@uh-design-system/component-library 1.5.1-rc.0 → 1.5.2-rc.0

package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-link-with-arrow.features.stories.js

@@ -1,47 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Base Components/LinkWithArrow/Features',
-    component: 'ds-link-with-arrow',
-};
-export default meta;
-export const IconPositionStart = {
-    args: {
-        dsText: 'Link with arrow icon',
-        dsHref: '#',
-        dsIconPosition: 'start',
-    },
-};
-export const IconPositionEnd = {
-    args: {
-        dsText: 'Link with arrow icon',
-        dsHref: '#',
-        dsIconPosition: 'end',
-    },
-};
-export const AlternativeTag = {
-    args: {
-        dsText: 'Link with arrow icon',
-        dsTag: 'span',
-        dsIconPosition: 'end',
-    },
-};
-export const FullWidth = {
-    args: {
-        dsText: 'Full width link with arrow icon',
-        dsHref: '#',
-        dsIconPosition: 'end',
-        dsIcon: 'arrow_forward',
-        dsFullWidth: true,
-    },
-};
-export const Slots = {
-    render: () => html `
-    <ds-link-with-arrow ds-text="Link text">
-      <span slot="prefix">Prefix slot</span>
-      <span slot="suffix">Suffix slot</span>
-    </ds-link-with-arrow>
-  `,
-};
-export const CustomTagName = {
-    render: () => html ` <custom-ds-link-with-arrow ds-icon-position="end" ds-href="#" ds-text="Link text"></custom-ds-link-with-arrow> `,
-};

package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-link-with-arrow.stories.js

@@ -1,76 +0,0 @@
-import { html } from "lit";
-export const Events = {
-    parameters: {
-        docs: {
-            source: {
-                code: `
-          <ul id="link-with-arrow-output">
-            <li>
-              Link clicked: <span id="link-with-arrow-output__clicked-text">No</span>
-            </li>
-          </ul>
-          <script>
-            document.addEventListener('dsClick', (event) => {
-              const output = document.getElementById('link-with-arrow-output__clicked-text');
-              if (output) {
-                output.textContent = 'Yes';
-              }
-            });
-          </script>
-        `,
-            },
-        },
-    },
-    render: () => html `
-    <ds-card
-      ds-link-type="none"
-      ds-heading="Events"
-      ds-description="Click the link and observe the event trigger. See implementation in 'Show code' tab in Docs."
-      style="margin-bottom: 1.5rem;"
-    >
-      <ul slot="content" id="link-with-arrow-output" class="ds-bodytext-sm ds-m-sm">
-        <li>Link clicked: <span id="link-with-arrow-output__clicked-text">No</span></li>
-      </ul>
-    </ds-card>
-    <ds-link-with-arrow
-      ds-text="Test click event"
-      ds-href="#"
-      @click=${(e) => e.preventDefault()}
-      @dsClick=${() => {
-        const output = document.getElementById('link-with-arrow-output__clicked-text');
-        if (output) {
-            output.textContent = 'Yes';
-        }
-    }}
-    ></ds-link-with-arrow>
-  `,
-};
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
-const meta = {
-    title: 'Base Components/LinkWithArrow',
-    component: 'ds-link-with-arrow',
-    argTypes: {
-        ...getAriaAttributeArgTypes(['aria-label', 'aria-labelledby']),
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        dsText: 'Link with arrow icon',
-        dsHref: '#',
-        dsIconPosition: 'start',
-        dsTag: 'a',
-        dsFullWidth: false,
-        dsIcon: 'arrow_forward',
-    },
-};
-export const Playground = {
-    args: {
-        dsText: 'Link with arrow icon',
-        dsHref: '#',
-        dsIconPosition: 'start',
-        dsTag: 'a',
-        dsFullWidth: false,
-        dsIcon: 'arrow_forward',
-    },
-};

package/dist/collection/components/01-base-components/ds-media/stories/ds-media.stories.js

@@ -1,43 +0,0 @@
-import { html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-const meta = {
-    title: 'Base Components/Media',
-    component: 'ds-media',
-    args: {
-        dsSrc: 'assets/placeholder.svg',
-        dsType: 'image',
-        dsAlt: 'Placeholder image',
-        dsAspectRatio: '16/10',
-    },
-    render: args => {
-        return html `
-      <ds-media
-        ds-src="${ifDefined(args.dsSrc)}"
-        ds-type="${ifDefined(args.dsType)}"
-        ds-alt="${ifDefined(args.dsAlt)}"
-        ds-poster="${ifDefined(args.dsPoster)}"
-        ds-autoplay="${ifDefined(args.dsAutoplay)}"
-        ds-loop="${ifDefined(args.dsLoop)}"
-        ds-muted="${ifDefined(args.dsMuted)}"
-        ds-aspect-ratio="${ifDefined(args.dsAspectRatio)}"
-      ></ds-media>
-    `;
-    },
-    argTypes: {
-        dsSrc: { control: 'select', options: ['assets/placeholder.svg', 'assets/video.mp4'] },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        dsSrc: 'assets/placeholder.svg',
-        dsType: 'image',
-    },
-};
-export const Playground = {
-    args: {
-        dsSrc: 'assets/placeholder.svg',
-        dsType: 'image',
-        dsAspectRatio: '3/4',
-    },
-};

package/dist/collection/components/01-base-components/ds-modal/stories/ds-modal.examples.stories.js

@@ -1,84 +0,0 @@
-import { html } from "lit";
-import { generateLoremIpsum } from "../../../../utils/storybook/storybookUtils";
-const meta = {
-    title: 'Base Components/Modal/Examples',
-    component: 'ds-modal',
-    tags: ['!autodocs'],
-    parameters: {
-        docs: {
-            story: {
-                inline: false,
-            },
-        },
-    },
-};
-export default meta;
-export const Confirm = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-size="medium" ds-closeable ds-open ds-heading-text="Confirm registration">
-      <div slot="content">Are you sure you want to register?</div>
-      <ds-button slot="footer" ds-variant="primary" ds-text="Confirm"></ds-button>
-      <ds-button slot="footer" ds-variant="secondary" ds-text="Cancel"></ds-button>
-    </ds-modal>
-  `,
-};
-export const Delete = {
-    render: () => html `
-    <ds-modal ds-variant="danger" ds-size="medium" ds-closeable ds-open ds-heading-text="Delete course?">
-      <div slot="content">The course "Basics of Programming" will be permanently deleted.</div>
-      <ds-button slot="footer" ds-variant="secondary" ds-colour="black" ds-text="Cancel"></ds-button>
-      <ds-button slot="footer" ds-variant="primary" ds-colour="danger" ds-text="Delete" ds-icon="delete_forever"></ds-button>
-    </ds-modal>
-  `,
-};
-export const LongTitleWithIcon = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-size="medium" ds-closeable ds-open ds-heading-text="Confirm registration before participation" ds-icon="help_fill" ds-icon-aria-label="Info">
-      <div slot="content">Are you sure you want to register to the course?</div>
-      <ds-button slot="footer" ds-variant="primary" ds-text="Confirm"></ds-button>
-      <ds-button slot="footer" ds-variant="secondary" ds-text="Cancel"></ds-button>
-    </ds-modal>
-  `,
-};
-export const Alert = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-size="medium" ds-closeable=${false} ds-open ds-scrollable ds-heading-text="Terms of service updated">
-      <div slot="content">
-        <h3 class="ds-heading-sm ds-mt-md">Terms and conditions</h3>
-        <div class="ds-mb-md">${generateLoremIpsum({ paragraphs: 20, wordsPerParagraph: 30, startWithLorem: true, consistent: true })}</div>
-      </div>
-      <ds-button slot="footer" ds-variant="primary" ds-text="Accept"></ds-button>
-    </ds-modal>
-  `,
-};
-export const Task = {
-    render: () => html `
-    <style>
-      @media (max-width: 479px) {
-        .ds-sb-task__text-input {
-          width: 100%;
-        }
-      }
-    </style>
-    <ds-modal ds-variant="default" ds-size="medium" ds-closeable ds-open ds-heading-text="Add supervisor details">
-      <div slot="content">
-        <div class="ds-mb-md">If you can't find your supervisor on the list, you can add the supervisor to your thesis information.</div>
-        <form id="modal-task-form" action="#">
-          <ds-grid>
-            <ds-grid>
-              <ds-text-input class="ds-sb-task__text-input" ds-name="first-name" ds-label="First name" ds-required></ds-text-input>
-            </ds-grid>
-            <ds-grid>
-              <ds-text-input class="ds-sb-task__text-input" ds-name="last-name" ds-label="Last name" ds-required></ds-text-input>
-            </ds-grid>
-            <ds-grid>
-              <ds-text-input class="ds-sb-task__text-input" ds-name="email" ds-label="Email" ds-required ds-type="email"></ds-text-input>
-            </ds-grid>
-          </ds-grid>
-        </form>
-      </div>
-      <ds-button ds-form="modal-task-form" ds-type="submit" slot="footer" ds-variant="primary" ds-text="Add supervisor"></ds-button>
-      <ds-button slot="footer" ds-variant="secondary" ds-text="Cancel"></ds-button>
-    </ds-modal>
-  `,
-};

package/dist/collection/components/01-base-components/ds-modal/stories/ds-modal.features.stories.js

@@ -1,291 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { html } from "lit";
-import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { generateLoremIpsum } from "../../../../utils/storybook/storybookUtils";
-import { icons } from "../../../00-foundations/icons/iconList";
-const meta = {
-    title: 'Base Components/Modal/Features',
-    component: 'ds-modal',
-    tags: ['!autodocs'],
-    parameters: {
-        docs: {
-            story: {
-                inline: false,
-            },
-        },
-    },
-};
-export default meta;
-const renderModal = (args) => {
-    const [, updateArgs] = useArgs();
-    return html `
-    <ds-button ds-variant="primary" ds-text="Open modal" @click=${() => updateArgs({ dsOpen: true })}></ds-button>
-    <ds-modal
-      ds-variant=${args.dsVariant}
-      ds-size=${args.dsSize}
-      ?ds-open=${args.dsOpen}
-      ?ds-scrollable=${args.dsScrollable}
-      ds-closeable=${args.dsCloseable}
-      ds-icon=${ifDefined(args.dsIcon)}
-      ds-icon-aria-label=${ifDefined(args.dsIconAriaLabel)}
-      ?ds-backdrop-is-closeable=${args.dsBackdropIsCloseable}
-      ds-auto-focus-target=${ifDefined(args.dsAutoFocusTarget)}
-      ds-heading-text=${args.dsHeadingText}
-      ds-heading-level="2"
-      @dsModalClose=${() => {
-        updateArgs({ dsOpen: false });
-    }}
-    >
-      ${unsafeHTML(args.contentSlot)}${unsafeHTML(args.footerSlot)}
-    </ds-modal>
-  `;
-};
-const baseArgs = {
-    contentSlot: '<div slot="content">You can edit this text with any custom content.</div>',
-    dsSize: 'medium',
-    dsOpen: true,
-    dsCloseable: true,
-    dsScrollable: false,
-    dsIcon: '',
-    dsIconAriaLabel: '',
-    dsBackdropIsCloseable: true,
-};
-export const Default = {
-    args: {
-        ...baseArgs,
-        dsVariant: 'default',
-        contentSlot: '<div slot="content">This modal variant is for standard, non-destructive actions.</div>',
-        footerSlot: `
-<ds-button slot="footer" ds-variant="primary" ds-text="Confirm"></ds-button>
-<ds-button slot="footer" ds-variant="secondary" ds-text="Cancel"></ds-button>
-    `,
-        dsHeadingText: 'Default variant',
-    },
-    render: renderModal,
-};
-export const Danger = {
-    args: {
-        ...baseArgs,
-        dsVariant: 'danger',
-        contentSlot: '<div slot="content">This modal variant is for destructive or irreversible actions.</div>',
-        footerSlot: `
-<ds-button slot="footer" ds-variant="secondary" ds-colour="black" ds-text="Cancel"></ds-button>
-<ds-button slot="footer" ds-variant="primary" ds-colour="danger" ds-icon="delete_forever" ds-text="Delete"></ds-button>
-    `,
-        dsHeadingText: 'Danger variant',
-    },
-    render: renderModal,
-};
-export const ForcedAction = {
-    args: {
-        ...baseArgs,
-        dsCloseable: false,
-        dsVariant: 'default',
-        contentSlot: '<div slot="content">This modal requires the user to complete a mandatory action before closing. It cannot be dismissed via backdrop click, Escape key, or a close button.</div>',
-        footerSlot: `
-<ds-button slot="footer" ds-variant="primary" ds-text="Accept"></ds-button>
-    `,
-        dsHeadingText: 'Forced action',
-    },
-    render: renderModal,
-};
-export const WithIcon = {
-    args: {
-        ...Default.args,
-        dsIcon: 'help_fill',
-        dsIconAriaLabel: 'Info',
-        contentSlot: '<div slot="content">Use this variant when additional visual emphasis or semantic context is needed. The icon should support the message (e.g. warning, information) and not replace the title.</div>',
-        dsHeadingText: 'With icon',
-    },
-    argTypes: {
-        dsIcon: {
-            control: 'select',
-            options: icons.map(icon => icon.name).sort(),
-        },
-    },
-    render: renderModal,
-};
-export const Scrollable = {
-    args: {
-        ...Default.args,
-        dsHeadingText: 'Scrollable content',
-        contentSlot: `<div slot="content" class="ds-mb-md"><p>Use when modal content exceeds the available viewport height. The content area scrolls independently while header and actions remain fixed.</p><p>${generateLoremIpsum({ paragraphs: 5, wordsPerParagraph: 30, startWithLorem: true, consistent: true })}</p></div>`,
-        footerSlot: `
-<ds-button slot="footer" ds-variant="primary" ds-text="Confirm"></ds-button>
-<ds-button slot="footer" ds-variant="secondary" ds-text="Cancel"></ds-button>
-    `,
-        dsScrollable: true,
-    },
-    render: renderModal,
-};
-export const AutoFocus = {
-    argTypes: {
-        dsAutoFocusTarget: {
-            control: 'select',
-            options: ['heading', 'close-button', 'other'],
-        },
-    },
-    args: {
-        ...Default.args,
-        dsHeadingText: 'Auto-focus',
-        dsAutoFocusTarget: 'other',
-        contentSlot: `
-<div slot="content">
-  <p>
-    The <code>ds-auto-focus-target</code> property controls which element receives focus when the modal opens.
-    <span>The options are:</span>
-    <ul>
-      <li><code>"heading"</code> (default): Focuses the heading element.</li>
-      <li><code>"close-button"</code>: Focuses the close button.</li>
-      <li><code>"other"</code>: Focuses the first custom target with the <code>autofocus</code> attribute.</li>
-    </ul>
-  </p>
-  <p class="ds-mb-0">
-    In this example, <code>ds-auto-focus-target="other"</code> focuses the "Confirm" button.
-  </p>
-</div>
-    `,
-        footerSlot: `
-<ds-button slot="footer" ds-auto-focus="true" ds-variant="primary" ds-text="Confirm"></ds-button>
-    `,
-    },
-    render: renderModal,
-};
-export const AutoSized = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-heading-text="Auto-sized modal" ds-size="auto" ds-open>
-      <div slot="content">The modal width adapts to its content within defined min/max constraints.</div>
-      <ds-button slot="footer" ds-variant="primary" ds-text="Primary"></ds-button>
-      <ds-button slot="footer" ds-variant="secondary" ds-text="Secondary"></ds-button>
-    </ds-modal>
-  `,
-};
-export const FullWidth = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-heading-text="Full-width modal" ds-size="full" ds-open>
-      <div slot="content">Expands the modal to the maximum allowed width within the layout. Recommended for dense content, forms, or data-heavy views.</div>
-      <ds-button slot="footer" ds-variant="primary" ds-text="Primary"></ds-button>
-      <ds-button slot="footer" ds-variant="secondary" ds-text="Secondary"></ds-button>
-    </ds-modal>
-  `,
-};
-export const Small = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-heading-text="Small modal" ds-size="small" ds-open>
-      <div slot="content">Compact modal size for brief messages or simple confirmations.</div>
-      <ds-button slot="footer" ds-variant="primary" ds-text="Primary"></ds-button>
-      <ds-button slot="footer" ds-variant="secondary" ds-text="Secondary"></ds-button>
-    </ds-modal>
-  `,
-};
-export const Medium = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-heading-text="Medium modal" ds-size="medium" ds-open>
-      <div slot="content">Default modal size for most use cases.</div>
-      <ds-button slot="footer" ds-variant="primary" ds-text="Primary"></ds-button>
-      <ds-button slot="footer" ds-variant="secondary" ds-text="Secondary"></ds-button>
-    </ds-modal>
-  `,
-};
-export const Large = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-heading-text="Large modal" ds-size="large" ds-open>
-      <div slot="content">Use for complex forms, multi-step flows, or content requiring more horizontal space.</div>
-      <ds-button slot="footer" ds-variant="primary" ds-text="Primary"></ds-button>
-      <ds-button slot="footer" ds-variant="secondary" ds-text="Secondary"></ds-button>
-    </ds-modal>
-  `,
-};
-export const OneButton = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-heading-text="One button" ds-size="medium" ds-open>
-      <div slot="content">Modals can contain 1–3 buttons, and Cancel always has the lowest visual priority.</div>
-      <ds-button slot="footer" ds-variant="primary" ds-text="Primary"></ds-button>
-    </ds-modal>
-  `,
-};
-export const TwoButtons = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-heading-text="Two buttons" ds-size="medium" ds-open>
-      <div slot="content">Modals can contain 1–3 buttons, and Cancel always has the lowest visual priority.</div>
-      <ds-button slot="footer" ds-variant="primary" ds-text="Primary"></ds-button>
-      <ds-button slot="footer" ds-variant="secondary" ds-text="Secondary"></ds-button>
-    </ds-modal>
-  `,
-};
-export const ThreeButtons = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-heading-text="Three buttons" ds-size="medium" ds-open>
-      <div slot="content">Modals can contain 1–3 buttons, and Cancel always has the lowest visual priority.</div>
-      <ds-button slot="footer" ds-variant="primary" ds-text="Primary"></ds-button>
-      <ds-button slot="footer" ds-variant="secondary" ds-text="Secondary"></ds-button>
-      <ds-button slot="footer" ds-variant="supplementary" ds-text="Supplementary"></ds-button>
-    </ds-modal>
-  `,
-};
-export const DynamicContent = {
-    render: () => html `
-    <ds-modal ds-variant="default" ds-size="medium" ds-closeable ds-open ds-heading-text="Dynamic content">
-      <div class="ds-mb-xs" slot="content">Use the buttons below to dynamically update the modal content.</div>
-      <div id="modal-dynamic-content__content" slot="content"><i>Default content...</i></div>
-      <ds-button
-        id="modal-dynamic-content__change-content-button"
-        slot="footer"
-        ds-variant="primary"
-        ds-text="Change content"
-        @click=${() => {
-        const strong = document.createElement('strong');
-        strong.textContent = 'has changed!';
-        strong.slot = 'content';
-        const content = document.getElementById('modal-dynamic-content__content');
-        if (content) {
-            content.textContent += ' ';
-            content.appendChild(strong);
-            const changeContentButton = document.querySelector('ds-button#modal-dynamic-content__change-content-button');
-            if (changeContentButton) {
-                changeContentButton.dsDisabled = true;
-            }
-        }
-    }}
-      ></ds-button>
-      <ds-button
-        id="modal-dynamic-content__add-content-button"
-        slot="footer"
-        ds-variant="secondary"
-        ds-text="Add content"
-        @click=${() => {
-        const newContent = document.createElement('div');
-        newContent.textContent = 'New content added';
-        newContent.slot = 'content';
-        const content = document.getElementById('modal-dynamic-content__content');
-        if (content) {
-            content.after(newContent);
-            const addContentButton = document.querySelector('ds-button#modal-dynamic-content__add-content-button');
-            if (addContentButton) {
-                addContentButton.dsDisabled = true;
-            }
-        }
-    }}
-      ></ds-button>
-      <ds-button slot="footer" ds-variant="supplementary" ds-text="Cancel"></ds-button>
-    </ds-modal>
-  `,
-};
-export const Slots = {
-    render: args => html `
-    <ds-modal ds-variant=${args.dsVariant} ds-open>
-      <div slot="header">Header slot</div>
-      <div slot="content">Content slot</div>
-      <div slot="footer">Footer slot</div>
-    </ds-modal>
-  `,
-};
-export const CustomTagName = {
-    render: () => html `
-    <custom-ds-modal ds-heading-text="custom-ds-modal" ds-variant="default" ds-open ds-closeable ds-icon="help_fill" ds-icon-aria-label="Info">
-      <div slot="content">&lt;content&gt;</div>
-      <custom-ds-button slot="footer" ds-variant="primary" ds-text="custom-ds-button"></custom-ds-button>
-    </custom-ds-modal>
-  `,
-};

package/dist/collection/components/01-base-components/ds-modal/stories/ds-modal.stories.js

@@ -1,133 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { html } from "lit";
-import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { icons } from "../../../00-foundations/icons/iconList";
-const meta = {
-    title: 'Base Components/Modal',
-    component: 'ds-modal',
-    parameters: {
-        docs: {
-            story: {
-                height: '500px',
-                inline: false,
-            },
-            description: {
-                component: `
-> **NOTE**: The controls on the Docs page don't work because the stories are rendered into iframes.
-Open each story's Canvas page to interact with the component using Storybook controls.
-See [Storybook Docs](https://storybook.js.org/docs/api/doc-blocks/doc-block-story#inline) for more info.
-
-Modal component for displaying content above the main page content.
-
-## Opening and closing the modal
-
-The modal is opened by setting the \`dsOpen\` property to true. The modal can be closed by setting it to false, which can be done through various user interactions, such as:
-
-- The following user interactions emit the \`dsModalClose\` event, set a listener to manage the modal's open state:
-  - Clicking on the close button (if \`dsCloseable\` is true)
-  - Pressing the "Esc" key (if \`dsBackdropCloseable\` is true)
-  - Clicking on the backdrop (if \`dsBackdropCloseable\` is true)
-- Dispatching a custom event that triggers closing the modal, such as a click event on a button inside the modal content.
-
-## Variant
-
-The variant of the modal is determined by the \`dsVariant\` property. The available variants are:
-
-- \`default\` (default): for standard, non-destructive actions.
-- \`danger\`: for destructive or irreversible actions.
-
-### Icon
-
-The icon is controlled by the \`dsIcon\` property. However, when using \`dsVariant="danger"\`, a danger icon is displayed regardless of its value.
-
-Set \`dsIconAriaLabel\` property to provide an accessible name for the icon.
-
-## Size
-
-The size of the modal is determined by the \`dsSize\` property. The available sizes are:
-
-- \`auto\`: The modal width is determined by its content.
-- \`small\`: The modal max-width is 480px.
-- \`medium\` (default): The modal max-width is 640px.
-- \`large\`: The modal max-width is 800px.
-- \`full\`: The modal takes the width of the viewport minus the margins.
-
-## Buttons
-
-Modals can contain 1—3 buttons, and Cancel always has the lowest visual priority.
-
-Three-button modals are allowed only in exceptional cases. Use them only when the secondary action performs a meaningful operation that is different from dismissal.
-
-## Autofocus
-
-The \`dsAutoFocusTarget\` property controls which element should receive focus when the modal is opened. The options are:
-
-- \`heading\` (default): Focus the heading element. If there is no heading, attempts to focus the close-button.
-- \`close-button\`: Focus the close button. If there is no close button, set a focus target.
-- \`other\`: Set \`autofocus\` attribute on the element you want to focus.
-
-## Backdrop
-
-The modal component uses the \`ds-backdrop\` component for the backdrop. See its documentation for properties and other usage instructions.
-        `,
-            },
-        },
-    },
-    args: {
-        contentSlot: '<div slot="content">You can edit this text with any custom content.</div>',
-        footerSlot: '<ds-button autofocus="true" slot="footer" ds-variant="primary" ds-text="Primary"></ds-button>',
-        dsVariant: 'default',
-        dsSize: 'medium',
-        dsAutoFocusTarget: 'heading',
-        dsOpen: true,
-        dsScrollable: false,
-        dsCloseable: true,
-        dsIcon: '',
-        dsIconAriaLabel: '',
-        dsBackdropCloseable: true,
-        dsBackdropZIndex: 9999,
-        dsHeadingText: 'Heading',
-        dsHeadingLevel: 2,
-    },
-    argTypes: {
-        dsAutoFocusTarget: {
-            control: 'select',
-            options: ['heading', 'close-button', 'other'],
-        },
-        dsIcon: {
-            control: 'select',
-            options: icons.map(icon => icon.name).sort(),
-        },
-    },
-    render: (args) => {
-        const [, updateArgs] = useArgs();
-        return html `
-      <ds-button ds-variant="primary" ds-text="Open modal" @click=${() => updateArgs({ dsOpen: true })}></ds-button>
-      <ds-modal
-        ds-variant=${args.dsVariant}
-        ds-size=${args.dsSize}
-        ds-auto-focus-target=${args.dsAutoFocusTarget}
-        ds-open=${args.dsOpen}
-        ds-scrollable=${args.dsScrollable}
-        ds-closeable=${args.dsCloseable}
-        ds-icon=${args.dsIcon}
-        ds-icon-aria-label=${ifDefined(args.dsIconAriaLabel)}
-        ds-backdrop-closeable=${args.dsBackdropCloseable}
-        ds-backdrop-z-index=${args.dsBackdropZIndex}
-        ds-heading-text=${args.dsHeadingText}
-        ds-heading-level=${args.dsHeadingLevel}
-        @dsModalClose=${() => {
-            updateArgs({ dsOpen: false });
-        }}
-      >
-        ${unsafeHTML(args.contentSlot)}${unsafeHTML(args.footerSlot)}
-      </ds-modal>
-    `;
-    },
-};
-export default meta;
-export const Default = {};
-export const Playground = {
-    tags: ['!autodocs'],
-};