import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './Divider.svelte';
const meta = {
    title: 'Structure/Divider',
    component: 'm-divider',
    tags: ['v2'],
    argTypes: {
        size: {
            control: 'inline-radio',
            options: ['s', 'm', 'l'],
        },
        orientation: {
            control: 'radio',
            options: ['vertical', 'horizontal'],
        },
        appearance: {
            control: 'radio',
            options: ['primary', 'secondary', 'tertiary', 'inverse'],
        },
    },
    render: (args) => html `
    <div>
      <m-divider
        orientation=${ifDefined(args.orientation)}
        appearance=${ifDefined(args.appearance)}
        size=${ifDefined(args.size)}
        >${unsafeHTML(ifDefined(args.default))}</m-divider
      >
      <p style="padding: 1rem">Horizontal Divider</p>
    </div>
  `,
};
export default meta;
export const Standard = {};
export const Vertical = {
    args: {
        orientation: 'vertical',
        default: `<p style="padding: 1rem">Vertical Divider</p>`,
    },
    render: (args) => html `
    <div>
      <m-divider
        orientation=${ifDefined(args.orientation)}
        appearance=${ifDefined(args.appearance)}
        size=${ifDefined(args.size)}
        >${unsafeHTML(ifDefined(args.default))}</m-divider
      >
    </div>
  `,
};
export const Size = {
    args: { size: 'm' },
};
export const Secondary = {
    args: { appearance: 'secondary' },
};
