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

package/dist/collection/components/01-base-components/ds-modal/ds-modal.css

@@ -1,4 +1,4 @@
-.ds-modal__m9sbXh {
+.ds-modal__cpPWV0 {
   position: fixed;
   padding: 0;
   border: 0;
@@ -12,10 +12,10 @@
   overflow-y: hidden;
   inset: 0;
 }
-.ds-modal__m9sbXh--open {
+.ds-modal__cpPWV0--open {
   overflow-y: auto;
 }
-.ds-modal__m9sbXh__positioner {
+.ds-modal__cpPWV0__positioner {
   pointer-events: none;
   display: flex;
   flex-direction: column;
@@ -26,18 +26,18 @@
   margin-block: auto 0;
 }
 @media (min-width: 30rem) {
-  .ds-modal__m9sbXh__positioner {
+  .ds-modal__cpPWV0__positioner {
     justify-content: center;
     padding-block: var(--ds-spacing-small);
     margin-block: auto;
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__m9sbXh__positioner {
+  .ds-modal__cpPWV0__positioner {
     padding-block: var(--ds-spacing-xLarge);
   }
 }
-.ds-modal__m9sbXh__container {
+.ds-modal__cpPWV0__container {
   pointer-events: auto;
   cursor: unset;
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
@@ -49,32 +49,32 @@
   transition: scale var(--ds-modal-transition-out-duration) ease-out, opacity var(--ds-modal-transition-out-duration) ease-out, transform var(--ds-modal-transition-out-duration) ease-out;
 }
 @media (min-width: 30rem) {
-  .ds-modal__m9sbXh__container {
+  .ds-modal__cpPWV0__container {
     margin: auto;
     width: fit-content;
     max-width: calc(100vw - 2 * var(--ds-spacing-small));
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__m9sbXh__container {
+  .ds-modal__cpPWV0__container {
     max-width: calc(100vw - 2 * var(--ds-spacing-xLarge));
   }
 }
-.ds-modal__m9sbXh__container--full {
+.ds-modal__cpPWV0__container--full {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-modal__m9sbXh__container--small {
+  .ds-modal__cpPWV0__container--small {
     width: 480px;
   }
-  .ds-modal__m9sbXh__container--medium {
+  .ds-modal__cpPWV0__container--medium {
     width: 640px;
   }
-  .ds-modal__m9sbXh__container--large {
+  .ds-modal__cpPWV0__container--large {
     width: 800px;
   }
 }
-.ds-modal__m9sbXh__container--scrollable {
+.ds-modal__cpPWV0__container--scrollable {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -83,31 +83,31 @@
   min-height: calc(320px - 2 * var(--ds-spacing-small));
 }
 @media (min-width: 30rem) {
-  .ds-modal__m9sbXh__container--scrollable {
+  .ds-modal__cpPWV0__container--scrollable {
     max-height: calc(100vh + calc(-2 * var(--ds-spacing-small)));
     max-height: calc(100dvh + calc(-2 * var(--ds-spacing-small)));
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__m9sbXh__container--scrollable {
+  .ds-modal__cpPWV0__container--scrollable {
     max-height: calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));
     max-height: calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)));
   }
 }
-.ds-modal__m9sbXh--open .ds-modal__m9sbXh__container {
+.ds-modal__cpPWV0--open .ds-modal__cpPWV0__container {
   scale: 1;
   opacity: 1;
   transform: translateY(0);
 }
-.ds-modal__m9sbXh--in .ds-modal__m9sbXh__container {
+.ds-modal__cpPWV0--in .ds-modal__cpPWV0__container {
   transition: scale var(--ds-modal-transition-in-duration) ease-out, opacity var(--ds-modal-transition-in-duration) ease-out, transform var(--ds-modal-transition-in-duration) ease-out;
 }
 @media (prefers-reduced-motion: reduce) {
-  .ds-modal__m9sbXh__container, .ds-modal__m9sbXh--in .ds-modal__m9sbXh__container {
+  .ds-modal__cpPWV0__container, .ds-modal__cpPWV0--in .ds-modal__cpPWV0__container {
     transition: none;
   }
 }
-.ds-modal__m9sbXh__header {
+.ds-modal__cpPWV0__header {
   position: relative;
   display: flex;
   flex-direction: row;
@@ -117,81 +117,81 @@
   padding-inline: var(--ds-spacing-small);
 }
 @media (min-width: 30rem) {
-  .ds-modal__m9sbXh__header {
+  .ds-modal__cpPWV0__header {
     padding-block: var(--ds-spacing-medium) var(--ds-spacing-small);
     padding-inline: var(--ds-spacing-medium);
   }
 }
-.ds-modal__m9sbXh__header--sticky {
+.ds-modal__cpPWV0__header--sticky {
   position: sticky;
   top: 0;
   background-color: var(--ds-bgColor-white);
   border-block-end: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-modal__m9sbXh__header__heading:focus-visible {
+.ds-modal__cpPWV0__header__heading:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-modal__m9sbXh__header__heading {
+.ds-modal__cpPWV0__header__heading {
   display: flex;
   gap: var(--ds-spacing-xSmall);
 }
-.ds-modal__m9sbXh__header__heading__text {
+.ds-modal__cpPWV0__header__heading__text {
   margin-block: var(--ds-spacing-4xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-modal__m9sbXh__header__heading__text {
+  .ds-modal__cpPWV0__header__heading__text {
     margin-block: calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall));
   }
 }
-.ds-modal__m9sbXh__header__heading__icon {
+.ds-modal__cpPWV0__header__heading__icon {
   display: block;
   margin-block: var(--ds-spacing-4xSmall);
   margin-inline-end: var(--ds-spacing-3xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-modal__m9sbXh__header__heading__icon {
+  .ds-modal__cpPWV0__header__heading__icon {
     margin-block: var(--ds-spacing-3xSmall);
   }
 }
-.ds-modal__m9sbXh__header__close-button {
+.ds-modal__cpPWV0__header__close-button {
   margin-inline-start: auto;
 }
 @media (min-width: 60rem) {
-  .ds-modal__m9sbXh__header__close-button {
+  .ds-modal__cpPWV0__header__close-button {
     margin-block: var(--ds-spacing-4xSmall);
   }
 }
-.ds-modal__m9sbXh__content:focus-visible {
+.ds-modal__cpPWV0__content:focus-visible {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.ds-modal__m9sbXh__content {
+.ds-modal__cpPWV0__content {
   position: relative;
   padding-inline: var(--ds-spacing-small);
   flex: 1;
   min-height: 0;
 }
 @media (min-width: 30rem) {
-  .ds-modal__m9sbXh__content {
+  .ds-modal__cpPWV0__content {
     padding-inline: var(--ds-spacing-medium);
   }
 }
-.ds-modal__m9sbXh__content--padded {
+.ds-modal__cpPWV0__content--padded {
   padding-block-end: var(--ds-spacing-small);
 }
 @media (min-width: 30rem) {
-  .ds-modal__m9sbXh__content--padded {
+  .ds-modal__cpPWV0__content--padded {
     padding-block-end: var(--ds-spacing-medium);
   }
 }
-.ds-modal__m9sbXh__content--scrollable {
+.ds-modal__cpPWV0__content--scrollable {
   overflow-y: auto;
   padding-block-end: unset;
 }
-.ds-modal__m9sbXh__content--scrollable__top-scrim, .ds-modal__m9sbXh__content--scrollable__bottom-scrim {
+.ds-modal__cpPWV0__content--scrollable__top-scrim, .ds-modal__cpPWV0__content--scrollable__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -201,43 +201,43 @@
   z-index: 1;
   display: none;
 }
-.ds-modal__m9sbXh__content--scrollable__top-scrim--open, .ds-modal__m9sbXh__content--scrollable__bottom-scrim--open {
+.ds-modal__cpPWV0__content--scrollable__top-scrim--open, .ds-modal__cpPWV0__content--scrollable__bottom-scrim--open {
   display: block;
 }
-.ds-modal__m9sbXh__content--scrollable__top-scrim {
+.ds-modal__cpPWV0__content--scrollable__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%);
 }
-.ds-modal__m9sbXh__content--scrollable__bottom-scrim {
+.ds-modal__cpPWV0__content--scrollable__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%);
 }
-.ds-modal__m9sbXh__content--scrollable:focus-visible .ds-modal__m9sbXh__content--scrollable__top-scrim {
+.ds-modal__cpPWV0__content--scrollable:focus-visible .ds-modal__cpPWV0__content--scrollable__top-scrim {
   top: var(--ds-borderWidth-thin);
 }
-.ds-modal__m9sbXh__content--scrollable:focus-visible .ds-modal__m9sbXh__content--scrollable__bottom-scrim {
+.ds-modal__cpPWV0__content--scrollable:focus-visible .ds-modal__cpPWV0__content--scrollable__bottom-scrim {
   bottom: var(--ds-borderWidth-thin);
 }
-.ds-modal__m9sbXh__footer {
+.ds-modal__cpPWV0__footer {
   position: relative;
 }
-.ds-modal__m9sbXh__footer:not(:empty) {
+.ds-modal__cpPWV0__footer:not(:empty) {
   display: flex;
   flex-direction: column;
   padding: var(--ds-spacing-small);
   gap: var(--ds-spacing-xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-modal__m9sbXh__footer:not(:empty) {
+  .ds-modal__cpPWV0__footer:not(:empty) {
     flex-direction: row;
     padding: var(--ds-spacing-medium);
     gap: var(--ds-spacing-small);
   }
 }
-.ds-modal__m9sbXh__footer:not(:empty) + .ds-modal__m9sbXh__content {
+.ds-modal__cpPWV0__footer:not(:empty) + .ds-modal__cpPWV0__content {
   border-block-end: 0;
 }
-.ds-modal__m9sbXh__footer--sticky:not(:empty) {
+.ds-modal__cpPWV0__footer--sticky:not(:empty) {
   position: sticky;
   bottom: 0;
   background-color: var(--ds-bgColor-white);

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

@@ -212,11 +212,11 @@ export class DsModal extends Mixin(componentFactory('ds-modal', { stopRootTracki
         });
         const contentAriaLabel = this.dsScrollable ? this.contentScrollArea : undefined;
         const contentTabIndex = this.dsScrollable ? 0 : undefined;
-        return (h(this.DsBackdrop, { key: '937e89060be8652b7a5e27eea7c2f2e2586604e7', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, h("div", { key: 'c24c5cbe65e8111a9ecb6417bf06c2a94568090f', class: `${baseClass}__positioner` }, h("div", { key: 'b6bf573d926a37fda88adea353e2aab0869eda10', class: containerClasses, style: { '--ds-modal-transition-in-duration': `${MODAL_TRANSITION_IN_DURATION}ms`, '--ds-modal-transition-out-duration': `${MODAL_TRANSITION_OUT_DURATION}ms` } }, h("slot", { key: '802affcb12c2c59ee1f77f69dfe00d22b58e98f9', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (h("div", { key: 'ab3f15653104929578e31754f43e987d1af41a9b', class: headerClasses }, this.dsHeadingText && (h("span", { key: '8e9c57f974893caa3e58a1ba9796283ab14203d3', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (h(this.DsIcon, { key: '33c3cef078b3baf2d020fedca243ad8c04b2879f', class: `${baseClass}__header__heading__icon`, dsAriaHidden: this.icon.ariaHidden, dsAriaLabel: this.icon.ariaLabel, dsSize: this.icon.size, dsName: this.icon.name, dsColour: this.icon.colour })), h("span", { key: '40f2255f36c83b8da5202d08caa3f2bee86b3573', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (h(this.DsButton, { key: '6bad9269962475a5d455c2e885de43fbd292eb15', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), h("div", { key: '7da28c17478a5ce8a6c1290ba32fddd8500c5496', ref: el => (this.contentRef = el), class: contentClasses, ...ifDefined('aria-label', contentAriaLabel), ...ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (h("div", { key: 'ab5f42d46124d3f3b86b4e15bae5871483d44cef', class: classNames(`${baseClass}__content--scrollable__top-scrim`, {
+        return (h(this.DsBackdrop, { key: '103de744e412db537b1e552e983307d172c8568a', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, h("div", { key: '95b45b2a2c70b1918817df845a5c81604ac79f82', class: `${baseClass}__positioner` }, h("div", { key: '7fc50b03ec5aa8d508d16427cd820547514818f6', class: containerClasses, style: { '--ds-modal-transition-in-duration': `${MODAL_TRANSITION_IN_DURATION}ms`, '--ds-modal-transition-out-duration': `${MODAL_TRANSITION_OUT_DURATION}ms` } }, h("slot", { key: '647b0f26723f281a7b7d938d2b4ffa611a28bffc', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (h("div", { key: 'a05bee315b5532fc44e2eaaa61e5e23159509af4', class: headerClasses }, this.dsHeadingText && (h("span", { key: 'f53134c9492f1556ca743249f60579fbcecee7ee', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (h(this.DsIcon, { key: 'c7bd86c2b9ab0f1012bf09652e84b144b2cc8d0b', class: `${baseClass}__header__heading__icon`, dsAriaHidden: this.icon.ariaHidden, dsAriaLabel: this.icon.ariaLabel, dsSize: this.icon.size, dsName: this.icon.name, dsColour: this.icon.colour })), h("span", { key: '1ed1790642d653a43c76c70d1860b5baea201f9b', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (h(this.DsButton, { key: 'b566b85abc89b4da0e3f4dd2b27c4a2c4d94ecb9', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), h("div", { key: '2a5e105d6b5a59e13750863b1b29cf57f895b482', ref: el => (this.contentRef = el), class: contentClasses, ...ifDefined('aria-label', contentAriaLabel), ...ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (h("div", { key: '57d4250df4c6bc6bf7e666bf632791eb0ec30a54', class: classNames(`${baseClass}__content--scrollable__top-scrim`, {
                 [`${baseClass}__content--scrollable__top-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atTop,
-            }), "aria-hidden": "true" })), h("slot", { key: '5d52c8c2bc581bf51ea14912ad44fabea75beee2', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (h("div", { key: 'fbfd7f45b29e26fed24c2c73d0f169c8bcf5652f', class: classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
+            }), "aria-hidden": "true" })), h("slot", { key: '7d52546d93ec5b6699c0e5b772d3136caab044ec', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (h("div", { key: 'a55e6d54d338bbc19e3cc2cf921b6f6d29936d9a', class: classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
                 [`${baseClass}__content--scrollable__bottom-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atBottom,
-            }), "aria-hidden": "true" }))), h("div", { key: '51cd0ca3e9a87040ad6280171defbc97f7159338', class: footerClasses }, h("slot", { key: '2d0854ee9b3573951c61b8b246317fb08fa455ee', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
+            }), "aria-hidden": "true" }))), h("div", { key: '427b527c3c60ccd6e3948879e5673a8eb605fb4e', class: footerClasses }, h("slot", { key: 'ad9764f5651cead785a24433c7c47e3ffb93092b', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
     }
     static get is() { return "ds-modal"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,291 @@
+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>
+  `,
+};