import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './Tile.svelte';
import '../iconbutton/IconButton.svelte';
import '@mozaic-ds/icons-svelte/components/OptionsVertical24/OptionsVertical24.svelte';
const meta = {
    title: 'Content/Tile/Base',
    component: 'm-tile',
    argTypes: {
        appearance: {
            control: { type: 'radio' },
            options: ['primary', 'secondary', 'inverse'],
        },
    },
    args: {
        default: `<div class="placeholder-slot">Insert a form element here to replace this slot.</div>`,
    },
    render: (args) => html `
    <m-tile appearance="${ifDefined(args.appearance)}" ?bordered="${args.bordered}">
      ${unsafeHTML(ifDefined(args.default))} ${unsafeHTML(ifDefined(args.action))}
    </m-tile>
  `,
};
export default meta;
export const Default = {};
export const WithAction = {
    args: {
        action: `
      <span slot="action" class="mc-tile__action-button">
        <m-icon-button ghost>
            <options-vertical-24 slot="icon"></options-vertical-24>
        </m-icon-button>
      </span>
    `,
    },
};
