@uh-design-system/component-library 1.4.0 → 1.5.0

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

@@ -1,16 +1,16 @@
 :host {
   display: inline-block;
 }
-:host:has(.ds-link-with-arrow__SPFJ1E--full-width) {
+:host:has(.ds-link-with-arrow__GqWYnG--full-width) {
   width: 100%;
 }
 
-.ds-link-with-arrow__SPFJ1E:focus-visible {
+.ds-link-with-arrow__GqWYnG: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-link-with-arrow__SPFJ1E {
+.ds-link-with-arrow__GqWYnG {
   display: inline-flex;
   align-items: center;
   color: var(--ds-textColor-link);
@@ -21,15 +21,15 @@
   text-decoration-line: none;
 }
 @media (min-width: 30rem) {
-  .ds-link-with-arrow__SPFJ1E {
+  .ds-link-with-arrow__GqWYnG {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-link-with-arrow__SPFJ1E--full-width {
+.ds-link-with-arrow__GqWYnG--full-width {
   width: 100%;
   justify-content: space-between;
 }
-.ds-link-with-arrow__SPFJ1E__icon {
+.ds-link-with-arrow__GqWYnG__icon {
   display: inline-flex;
   flex-shrink: 0;
   width: 2rem;
@@ -41,24 +41,24 @@
   background-color: var(--ds-bgColor-primary);
 }
 @media (min-width: 30rem) {
-  .ds-link-with-arrow__SPFJ1E__icon {
+  .ds-link-with-arrow__GqWYnG__icon {
     width: 2.5rem;
     height: 2.5rem;
   }
 }
-.ds-link-with-arrow__SPFJ1E__icon--start {
+.ds-link-with-arrow__GqWYnG__icon--start {
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-link-with-arrow__SPFJ1E__icon--end {
+.ds-link-with-arrow__GqWYnG__icon--end {
   margin-left: var(--ds-spacing-xSmall);
 }
-:hover slot > .ds-link-with-arrow__SPFJ1E__icon {
+:hover slot > .ds-link-with-arrow__GqWYnG__icon {
   background-color: var(--ds-bgColor-primary-hover);
 }
-:active slot > .ds-link-with-arrow__SPFJ1E__icon {
+:active slot > .ds-link-with-arrow__GqWYnG__icon {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-link-with-arrow__SPFJ1E:hover, .ds-link-with-arrow__SPFJ1E:active {
+.ds-link-with-arrow__GqWYnG:hover, .ds-link-with-arrow__GqWYnG:active {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -66,9 +66,9 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link-with-arrow__SPFJ1E:hover {
+.ds-link-with-arrow__GqWYnG:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link-with-arrow__SPFJ1E:active, .ds-link-with-arrow__SPFJ1E:focus-visible {
+.ds-link-with-arrow__GqWYnG:active, .ds-link-with-arrow__GqWYnG:focus-visible {
   color: var(--ds-textColor-link-active);
 }

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

@@ -7,8 +7,9 @@ import { linkFactory } from "../../00-foundations/factories/linkFactory";
 import { ariaDeprecationFactory } from "../../00-foundations/factories/ariaDeprecationFactory";
 import { cx } from "../../../utils/cx";
 import { isGreaterThanEqualBreakpointMediaQuery } from "../../00-foundations/breakpoints/utils";
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
-export class DsLinkWithArrow extends Mixin(linkFactory, ariaDeprecationFactory) {
+export class DsLinkWithArrow extends Mixin(componentFactory('ds-link-with-arrow'), linkFactory, ariaDeprecationFactory) {
     constructor() {
         super();
     }
@@ -60,6 +61,9 @@ export class DsLinkWithArrow extends Mixin(linkFactory, ariaDeprecationFactory)
             this.rel = undefined;
         }
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     render() {
         const baseClass = cx('ds-link-with-arrow');
         const classes = classNames(baseClass, {
@@ -74,7 +78,7 @@ export class DsLinkWithArrow extends Mixin(linkFactory, ariaDeprecationFactory)
         const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
-        return (h(this.dsTag, { key: 'fc0f8980144f76aef80ffede688b5ad58dcf97bb', class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: '1533ec6f843e4300c94c7bac1e0c72e9208fba06', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: '481aefe4ed9760347c5417fccf79af4e9feb51a4', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: '4af8c0f99fb2fc5b132bee73a8a3e17a3bc166a9', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: '270b77401665ba8c457f73704c7e310a9dfff0a2', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '4959b02fbe4bf3891253864e36d1654ff671c4ab', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+        return (h(this.dsTag, { key: 'da0a4ca8b12b41e4e2f4db972b71222b7d9c5243', class: classes, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, h("slot", { key: 'ae6d8138f58faae2e34b3c0a99f91f793d0f646d', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: 'f835904e1e1e80d0b20f36a7d25633da062126cb', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: 'dfd47300d81fad800cfbab100bfe95eda56ca993', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: 'e023bfcb58aa21a2a1357d9c856e678900600b2e', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'a51c12cea73a2369588e94dd73339bbb91a59405', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-with-arrow"; }
     static get encapsulation() { return "shadow"; }
@@ -143,7 +147,7 @@ export class DsLinkWithArrow extends Mixin(linkFactory, ariaDeprecationFactory)
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Specifies the HTML tag to render for the link component.\n\nBy default, the link is rendered as an `<a>` element. However, when using client-side routing libraries\nlike `react-router`, you may want to render the link as a `<span>` instead, and wrap this component\nwith a router-specific link component (e.g., `<Link>` in React Router) to enable navigation without\ncausing a full page reload."

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

@@ -1,13 +1,13 @@
-.ds-media__SPFJ1E {
+.ds-media__GqWYnG {
   position: relative;
   width: 100%;
   height: auto;
   overflow: hidden;
   background-color: var(--ds-palette-black-05);
 }
-.ds-media__SPFJ1E .ds-media__image,
-.ds-media__SPFJ1E .ds-media__video,
-.ds-media__SPFJ1E .ds-media__youtube {
+.ds-media__GqWYnG .ds-media__image,
+.ds-media__GqWYnG .ds-media__video,
+.ds-media__GqWYnG .ds-media__youtube {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -15,27 +15,27 @@
   max-height: var(--horizontal-image-max-height, auto);
   aspect-ratio: var(--ds-media-aspect-ratio);
 }
-.ds-media__SPFJ1E .ds-media__image--fluid,
-.ds-media__SPFJ1E .ds-media__video--fluid,
-.ds-media__SPFJ1E .ds-media__youtube--fluid {
+.ds-media__GqWYnG .ds-media__image--fluid,
+.ds-media__GqWYnG .ds-media__video--fluid,
+.ds-media__GqWYnG .ds-media__youtube--fluid {
   aspect-ratio: unset;
 }
-.ds-media__SPFJ1E__youtube {
+.ds-media__GqWYnG__youtube {
   border: none;
   object-fit: initial;
 }
-.ds-media__SPFJ1E--loading .ds-media__image,
-.ds-media__SPFJ1E--loading .ds-media__video {
+.ds-media__GqWYnG--loading .ds-media__image,
+.ds-media__GqWYnG--loading .ds-media__video {
   opacity: 0;
 }
-.ds-media__SPFJ1E--error {
+.ds-media__GqWYnG--error {
   aspect-ratio: var(--ds-media-aspect-ratio);
 }
-.ds-media__SPFJ1E--error .ds-media__image,
-.ds-media__SPFJ1E--error .ds-media__video {
+.ds-media__GqWYnG--error .ds-media__image,
+.ds-media__GqWYnG--error .ds-media__video {
   display: none;
 }
-.ds-media__SPFJ1E--error .ds-media__error {
+.ds-media__GqWYnG--error .ds-media__error {
   position: absolute;
   inset: 0;
   display: flex;
@@ -49,54 +49,54 @@
   padding: 16px;
   text-align: center;
 }
-.ds-media__SPFJ1E--error .ds-media__error-icon {
+.ds-media__GqWYnG--error .ds-media__error-icon {
   width: 48px;
   height: 48px;
   color: var(--ds-bgColor-danger-bold);
   flex-shrink: 0;
 }
-.ds-media__SPFJ1E--error .ds-media__error-text {
+.ds-media__GqWYnG--error .ds-media__error-text {
   font-size: 14px;
   font-weight: 500;
   line-height: 1.4;
 }
-.ds-media__SPFJ1E--image .ds-media__image {
+.ds-media__GqWYnG--image .ds-media__image {
   transition: opacity 0.3s ease;
 }
-.ds-media__SPFJ1E--video .ds-media__video {
+.ds-media__GqWYnG--video .ds-media__video {
   transition: opacity 0.3s ease;
 }
-.ds-media__SPFJ1E--youtube .ds-media__youtube {
+.ds-media__GqWYnG--youtube .ds-media__youtube {
   transition: opacity 0.3s ease;
 }
-.ds-media__SPFJ1E--fluid {
+.ds-media__GqWYnG--fluid {
   width: 100%;
   height: 100%;
 }
-.ds-media__SPFJ1E--fluid .ds-media__SPFJ1E__image,
-.ds-media__SPFJ1E--fluid .ds-media__SPFJ1E__video,
-.ds-media__SPFJ1E--fluid .ds-media__SPFJ1E__youtube {
+.ds-media__GqWYnG--fluid .ds-media__GqWYnG__image,
+.ds-media__GqWYnG--fluid .ds-media__GqWYnG__video,
+.ds-media__GqWYnG--fluid .ds-media__GqWYnG__youtube {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 @media (max-width: 768px) {
-  .ds-media__SPFJ1E {
+  .ds-media__GqWYnG {
     border-radius: 2px;
   }
-  .ds-media__SPFJ1E__loading-spinner {
+  .ds-media__GqWYnG__loading-spinner {
     width: 24px;
     height: 24px;
     border-width: 2px;
   }
-  .ds-media__SPFJ1E__loading-text {
+  .ds-media__GqWYnG__loading-text {
     font-size: 12px;
   }
-  .ds-media__SPFJ1E__error-icon {
+  .ds-media__GqWYnG__error-icon {
     width: 40px;
     height: 40px;
   }
-  .ds-media__SPFJ1E__error-text {
+  .ds-media__GqWYnG__error-text {
     font-size: 12px;
   }
 }

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

@@ -1,9 +1,14 @@
-import { h } from "@stencil/core";
+import { h, Mixin } from "@stencil/core";
+import classNames from "classnames";
 import { cx } from "../../../utils/cx";
 import { declareComponentDependencies, ifDefined, transformTagName } from "../../../utils/utils";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { getLanguage } from "../../../store";
-export class DsMedia {
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsMedia extends Mixin(componentFactory('ds-media')) {
+    constructor() {
+        super();
+    }
     inheritedAttributes = {};
     dsSrc;
     dsType;
@@ -27,6 +32,9 @@ export class DsMedia {
             ...inheritAriaAttributes(this.el, this.dsType === 'video' ? ['aria-label'] : []),
         };
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     onSrcChange() {
         this.resetState();
     }
@@ -169,15 +177,14 @@ export class DsMedia {
         const aspectRatioParts = this.dsAspectRatio.split('/');
         const aspectRatioValue = aspectRatioParts.length === 2 ? `${aspectRatioParts[0]} / ${aspectRatioParts[1]}` : this.dsAspectRatio;
         const baseClass = cx('ds-media');
-        return (h("div", { key: '1a5f9527435223be8dce54812bf17e83d30ac88d', class: {
-                [baseClass]: true,
+        return (h("div", { key: 'b9907477ef7139b39ae90d2f66afd4b3264b6e71', class: classNames(baseClass, {
                 [`${baseClass}--loading`]: this.isLoading,
                 [`${baseClass}--error`]: this.hasError,
                 [`${baseClass}--image`]: this.dsType === 'image',
                 [`${baseClass}--video`]: this.dsType === 'video',
                 [`${baseClass}--youtube`]: this.dsType === 'youtube',
                 [`${baseClass}--fluid`]: this.dsFluid,
-            }, style: {
+            }), style: {
                 '--ds-media-aspect-ratio': aspectRatioValue,
             } }, this.isLoading && this.renderLoadingState(), this.hasError && this.renderErrorState(), !this.hasError && this.renderMedia()));
     }
@@ -365,7 +372,7 @@ export class DsMedia {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Aspect ratio for the media container (e.g., '16/10')."

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

@@ -1,4 +1,4 @@
-.ds-modal__SPFJ1E {
+.ds-modal__GqWYnG {
   position: fixed;
   padding: 0;
   border: 0;
@@ -12,10 +12,10 @@
   overflow-y: hidden;
   inset: 0;
 }
-.ds-modal__SPFJ1E--open {
+.ds-modal__GqWYnG--open {
   overflow-y: auto;
 }
-.ds-modal__SPFJ1E__positioner {
+.ds-modal__GqWYnG__positioner {
   pointer-events: none;
   display: flex;
   flex-direction: column;
@@ -26,18 +26,18 @@
   margin-block: auto 0;
 }
 @media (min-width: 30rem) {
-  .ds-modal__SPFJ1E__positioner {
+  .ds-modal__GqWYnG__positioner {
     justify-content: center;
     padding-block: var(--ds-spacing-small);
     margin-block: auto;
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__SPFJ1E__positioner {
+  .ds-modal__GqWYnG__positioner {
     padding-block: var(--ds-spacing-xLarge);
   }
 }
-.ds-modal__SPFJ1E__container {
+.ds-modal__GqWYnG__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__SPFJ1E__container {
+  .ds-modal__GqWYnG__container {
     margin: auto;
     width: fit-content;
     max-width: calc(100vw - 2 * var(--ds-spacing-small));
   }
 }
 @media (min-width: 60rem) {
-  .ds-modal__SPFJ1E__container {
+  .ds-modal__GqWYnG__container {
     max-width: calc(100vw - 2 * var(--ds-spacing-xLarge));
   }
 }
-.ds-modal__SPFJ1E__container--full {
+.ds-modal__GqWYnG__container--full {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-modal__SPFJ1E__container--small {
+  .ds-modal__GqWYnG__container--small {
     width: 480px;
   }
-  .ds-modal__SPFJ1E__container--medium {
+  .ds-modal__GqWYnG__container--medium {
     width: 640px;
   }
-  .ds-modal__SPFJ1E__container--large {
+  .ds-modal__GqWYnG__container--large {
     width: 800px;
   }
 }
-.ds-modal__SPFJ1E__container--scrollable {
+.ds-modal__GqWYnG__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__SPFJ1E__container--scrollable {
+  .ds-modal__GqWYnG__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__SPFJ1E__container--scrollable {
+  .ds-modal__GqWYnG__container--scrollable {
     max-height: calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));
     max-height: calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)));
   }
 }
-.ds-modal__SPFJ1E--open .ds-modal__SPFJ1E__container {
+.ds-modal__GqWYnG--open .ds-modal__GqWYnG__container {
   scale: 1;
   opacity: 1;
   transform: translateY(0);
 }
-.ds-modal__SPFJ1E--in .ds-modal__SPFJ1E__container {
+.ds-modal__GqWYnG--in .ds-modal__GqWYnG__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__SPFJ1E__container, .ds-modal__SPFJ1E--in .ds-modal__SPFJ1E__container {
+  .ds-modal__GqWYnG__container, .ds-modal__GqWYnG--in .ds-modal__GqWYnG__container {
     transition: none;
   }
 }
-.ds-modal__SPFJ1E__header {
+.ds-modal__GqWYnG__header {
   position: relative;
   display: flex;
   flex-direction: row;
@@ -117,81 +117,81 @@
   padding-inline: var(--ds-spacing-small);
 }
 @media (min-width: 30rem) {
-  .ds-modal__SPFJ1E__header {
+  .ds-modal__GqWYnG__header {
     padding-block: var(--ds-spacing-medium) var(--ds-spacing-small);
     padding-inline: var(--ds-spacing-medium);
   }
 }
-.ds-modal__SPFJ1E__header--sticky {
+.ds-modal__GqWYnG__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__SPFJ1E__header__heading:focus-visible {
+.ds-modal__GqWYnG__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__SPFJ1E__header__heading {
+.ds-modal__GqWYnG__header__heading {
   display: flex;
   gap: var(--ds-spacing-xSmall);
 }
-.ds-modal__SPFJ1E__header__heading__text {
+.ds-modal__GqWYnG__header__heading__text {
   margin-block: var(--ds-spacing-4xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-modal__SPFJ1E__header__heading__text {
+  .ds-modal__GqWYnG__header__heading__text {
     margin-block: calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall));
   }
 }
-.ds-modal__SPFJ1E__header__heading__icon {
+.ds-modal__GqWYnG__header__heading__icon {
   display: block;
   margin-block: var(--ds-spacing-4xSmall);
   margin-inline-end: var(--ds-spacing-3xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-modal__SPFJ1E__header__heading__icon {
+  .ds-modal__GqWYnG__header__heading__icon {
     margin-block: var(--ds-spacing-3xSmall);
   }
 }
-.ds-modal__SPFJ1E__header__close-button {
+.ds-modal__GqWYnG__header__close-button {
   margin-inline-start: auto;
 }
 @media (min-width: 60rem) {
-  .ds-modal__SPFJ1E__header__close-button {
+  .ds-modal__GqWYnG__header__close-button {
     margin-block: var(--ds-spacing-4xSmall);
   }
 }
-.ds-modal__SPFJ1E__content:focus-visible {
+.ds-modal__GqWYnG__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__SPFJ1E__content {
+.ds-modal__GqWYnG__content {
   position: relative;
   padding-inline: var(--ds-spacing-small);
   flex: 1;
   min-height: 0;
 }
 @media (min-width: 30rem) {
-  .ds-modal__SPFJ1E__content {
+  .ds-modal__GqWYnG__content {
     padding-inline: var(--ds-spacing-medium);
   }
 }
-.ds-modal__SPFJ1E__content--padded {
+.ds-modal__GqWYnG__content--padded {
   padding-block-end: var(--ds-spacing-small);
 }
 @media (min-width: 30rem) {
-  .ds-modal__SPFJ1E__content--padded {
+  .ds-modal__GqWYnG__content--padded {
     padding-block-end: var(--ds-spacing-medium);
   }
 }
-.ds-modal__SPFJ1E__content--scrollable {
+.ds-modal__GqWYnG__content--scrollable {
   overflow-y: auto;
   padding-block-end: unset;
 }
-.ds-modal__SPFJ1E__content--scrollable__top-scrim, .ds-modal__SPFJ1E__content--scrollable__bottom-scrim {
+.ds-modal__GqWYnG__content--scrollable__top-scrim, .ds-modal__GqWYnG__content--scrollable__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -201,43 +201,43 @@
   z-index: 1;
   display: none;
 }
-.ds-modal__SPFJ1E__content--scrollable__top-scrim--open, .ds-modal__SPFJ1E__content--scrollable__bottom-scrim--open {
+.ds-modal__GqWYnG__content--scrollable__top-scrim--open, .ds-modal__GqWYnG__content--scrollable__bottom-scrim--open {
   display: block;
 }
-.ds-modal__SPFJ1E__content--scrollable__top-scrim {
+.ds-modal__GqWYnG__content--scrollable__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%);
 }
-.ds-modal__SPFJ1E__content--scrollable__bottom-scrim {
+.ds-modal__GqWYnG__content--scrollable__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%);
 }
-.ds-modal__SPFJ1E__content--scrollable:focus-visible .ds-modal__SPFJ1E__content--scrollable__top-scrim {
+.ds-modal__GqWYnG__content--scrollable:focus-visible .ds-modal__GqWYnG__content--scrollable__top-scrim {
   top: var(--ds-borderWidth-thin);
 }
-.ds-modal__SPFJ1E__content--scrollable:focus-visible .ds-modal__SPFJ1E__content--scrollable__bottom-scrim {
+.ds-modal__GqWYnG__content--scrollable:focus-visible .ds-modal__GqWYnG__content--scrollable__bottom-scrim {
   bottom: var(--ds-borderWidth-thin);
 }
-.ds-modal__SPFJ1E__footer {
+.ds-modal__GqWYnG__footer {
   position: relative;
 }
-.ds-modal__SPFJ1E__footer:not(:empty) {
+.ds-modal__GqWYnG__footer:not(:empty) {
   display: flex;
   flex-direction: column;
   padding: var(--ds-spacing-small);
   gap: var(--ds-spacing-xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-modal__SPFJ1E__footer:not(:empty) {
+  .ds-modal__GqWYnG__footer:not(:empty) {
     flex-direction: row;
     padding: var(--ds-spacing-medium);
     gap: var(--ds-spacing-small);
   }
 }
-.ds-modal__SPFJ1E__footer:not(:empty) + .ds-modal__SPFJ1E__content {
+.ds-modal__GqWYnG__footer:not(:empty) + .ds-modal__GqWYnG__content {
   border-block-end: 0;
 }
-.ds-modal__SPFJ1E__footer--sticky:not(:empty) {
+.ds-modal__GqWYnG__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

@@ -1,12 +1,15 @@
-import { h } from "@stencil/core";
+import { h, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { cx } from "../../../utils/cx";
-import { transformTagName, declareComponentDependencies, ifDefined, throttle, idGenerator } from "../../../utils/utils";
+import { transformTagName, declareComponentDependencies, ifDefined, throttle } from "../../../utils/utils";
 import { getLanguage } from "../../../store";
 import { MODAL_TRANSITION_IN_DURATION, MODAL_TRANSITION_OUT_DURATION } from "../../../constants";
 import { isGreaterThanEqualBreakpointMediaQuery } from "../../00-foundations/breakpoints/utils";
-const modalIdGenerator = idGenerator('ds-modal');
-export class DsModal {
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsModal extends Mixin(componentFactory('ds-modal')) {
+    constructor() {
+        super();
+    }
     el;
     RESIZE_THROTTLE_TIMEOUT = 100;
     reducedMotionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -15,7 +18,7 @@ export class DsModal {
     contentRef;
     contentSlotContainsElements = false;
     dsModalClose;
-    dsId = modalIdGenerator.next().value;
+    dsId = this.getUniqueId();
     dsOpen = false;
     dsCloseable = true;
     dsVariant = 'default';
@@ -135,6 +138,7 @@ export class DsModal {
         this.isGreaterThanEqualSmallMediaQuery.addEventListener('change', this.setIsGreaterThanEqualSmall);
     }
     componentDidLoad() {
+        this.componentMounted();
         this.checkHeaderSlot();
         this.checkContentSlot();
         this.checkFooterSlot();
@@ -208,11 +212,11 @@ export class DsModal {
         });
         const contentAriaLabel = this.dsScrollable ? this.contentScrollArea : undefined;
         const contentTabIndex = this.dsScrollable ? 0 : undefined;
-        return (h(this.DsBackdrop, { key: '34f20ec233affd5f92d99d4b59ceb0c3a38e2760', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, h("div", { key: '3bd47c3984fd90968d6760d6270c3f21ebc01e40', class: `${baseClass}__positioner` }, h("div", { key: '1a928135c70bfcf40949a982a8a2f9ecac649fb0', 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: '851c23a858d2b8b65beefcd68bcadd363aaa43c9', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (h("div", { key: '12fbe87f94d59cd9a59975796ff72da9abba4f3c', class: headerClasses }, this.dsHeadingText && (h("span", { key: '1ae6ade01c6d29ceba2aec63deb11ab3873edc0a', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (h(this.DsIcon, { key: '9407e530a689437ccea941efdacfda82ea47c7d5', 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: '97e4776346300a649a0cd6be8c02797a3843cfaf', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (h(this.DsButton, { key: 'b765dc5aa456c1f75fb9c617088f9a68fc5160f2', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), h("div", { key: '7e4c9f7615e9bc8fbd21596cfa5753cb3271520b', ref: el => (this.contentRef = el), class: contentClasses, ...ifDefined('aria-label', contentAriaLabel), ...ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (h("div", { key: '9f92416f7dd975358659a5c3b74be588c5a58743', class: classNames(`${baseClass}__content--scrollable__top-scrim`, {
+        return (h(this.DsBackdrop, { key: 'aeac338ec835800734cf50b26833811b802c9e72', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, h("div", { key: 'd89d406ed89bbe3ddfc42c7b446f55e6e7e561fe', class: `${baseClass}__positioner` }, h("div", { key: 'abc49a7924f5834b0a96f9c3ac13e6e8d3f5f22f', 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: '365f46da6bc17ef13af69db428fd27f8c933614b', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (h("div", { key: '9a4213e797659d153036bfba178f70c1347e66c5', class: headerClasses }, this.dsHeadingText && (h("span", { key: '3cff2fc7cb75c14b4bd6d82da39edab631a80ccb', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (h(this.DsIcon, { key: 'c801e35bcea8ee98a48e2eaa9fe5808656cc9374', 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: 'bed199dcc40bdaa067d58be2f65b06647b62606c', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (h(this.DsButton, { key: 'd20d158069791ae18f4a7c1b65b4ab9f9c84137e', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), h("div", { key: 'ce736b63338aaa29804ff7fc3208f2fd45614edd', ref: el => (this.contentRef = el), class: contentClasses, ...ifDefined('aria-label', contentAriaLabel), ...ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (h("div", { key: '6b326f965acdb3ca7f4b55ae43cd3125b61e91e4', class: classNames(`${baseClass}__content--scrollable__top-scrim`, {
                 [`${baseClass}__content--scrollable__top-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atTop,
-            }), "aria-hidden": "true" })), h("slot", { key: '5dfc1e4efa4d8c76779056a8e129e9086f7b274c', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (h("div", { key: '1891614721ba5cc9dcd12f57b60486cb3d30bab4', class: classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
+            }), "aria-hidden": "true" })), h("slot", { key: '386861c44236e267016ffdcb1e57ea0e96fd82a1', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (h("div", { key: 'd8002608d4b20720c9cae8885f4c2714dfa765b3', class: classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
                 [`${baseClass}__content--scrollable__bottom-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atBottom,
-            }), "aria-hidden": "true" }))), h("div", { key: 'd96c91412976c2f7d5587e474ba5ea903233d2a8', class: footerClasses }, h("slot", { key: 'cd7591f3727ddd6228c50699afddc74810f97adf', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
+            }), "aria-hidden": "true" }))), h("div", { key: '2d1527db1def8c15a9cf2cf43765ebd26a3a9f98', class: footerClasses }, h("slot", { key: '5e184d9ed1d1b6bdc24f5ce3dbc9c90f3f6307e2', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
     }
     static get is() { return "ds-modal"; }
     static get originalStyleUrls() {
@@ -245,7 +249,7 @@ export class DsModal {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-id",
-                "defaultValue": "modalIdGenerator.next().value as string"
+                "defaultValue": "this.getUniqueId()"
             },
             "dsOpen": {
                 "type": "boolean",