import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './Overlay.svelte';
const meta = {
    title: 'Overlay/Overlay',
    component: 'm-overlay',
    parameters: {
        layout: 'fullscreen',
        docs: {
            story: { height: '400px' },
        },
    },
    args: {
        isvisible: true,
    },
    argTypes: {
        '--overlay-z-index': {
            description: 'Customise the z-index of the overlay',
            control: false,
            table: {
                category: 'Custom Properties',
                type: { summary: 'number' },
                defaultValue: { summary: '2' },
            },
        },
    },
    render: (args) => html `
    <m-overlay ?isvisible=${args.isvisible} dialoglabel=${ifDefined(args.dialoglabel)}>
      ${unsafeHTML(ifDefined(args.default))}
    </m-overlay>
  `,
};
export default meta;
export const Default = {};
