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

package/dist/esm/ds-media.entry.js

@@ -1,14 +1,41 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DvpMvX1M.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DHrlezow.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-BrOdPf9x.js';
-import { a as ifDefined, t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { c as cx } from './cx-CbD7OdM5.js';
+import { a as ifDefined, t as transformTagName, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
 import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-Dzq9qJk7.js';
-import { g as getLanguage } from './store-c20XLOUp.js';
-import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
+import { g as getLanguage } from './store-DYWVDmmN.js';
 
-const dsMediaCss = () => `.ds-media__oJU1eo{position:relative;width:100%;height:auto;overflow:hidden;background-color:var(--ds-palette-black-05)}.ds-media__oJU1eo .ds-media__image,.ds-media__oJU1eo .ds-media__video,.ds-media__oJU1eo .ds-media__youtube{width:100%;height:100%;object-fit:cover;display:block;max-height:var(--horizontal-image-max-height, auto);aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__oJU1eo .ds-media__image--fluid,.ds-media__oJU1eo .ds-media__video--fluid,.ds-media__oJU1eo .ds-media__youtube--fluid{aspect-ratio:unset}.ds-media__oJU1eo__youtube{border:none;object-fit:initial}.ds-media__oJU1eo--loading .ds-media__image,.ds-media__oJU1eo--loading .ds-media__video{opacity:0}.ds-media__oJU1eo--error{aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__oJU1eo--error .ds-media__image,.ds-media__oJU1eo--error .ds-media__video{display:none}.ds-media__oJU1eo--error .ds-media__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background-color:var(--ds-bgColor-secondary);color:var(--ds-bgColor-danger-bold);z-index:1;padding:16px;text-align:center}.ds-media__oJU1eo--error .ds-media__error-icon{width:48px;height:48px;color:var(--ds-bgColor-danger-bold);flex-shrink:0}.ds-media__oJU1eo--error .ds-media__error-text{font-size:14px;font-weight:500;line-height:1.4}.ds-media__oJU1eo--image .ds-media__image{transition:opacity 0.3s ease}.ds-media__oJU1eo--video .ds-media__video{transition:opacity 0.3s ease}.ds-media__oJU1eo--youtube .ds-media__youtube{transition:opacity 0.3s ease}.ds-media__oJU1eo--fluid{width:100%;height:100%}.ds-media__oJU1eo--fluid .ds-media__oJU1eo__image,.ds-media__oJU1eo--fluid .ds-media__oJU1eo__video,.ds-media__oJU1eo--fluid .ds-media__oJU1eo__youtube{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.ds-media__oJU1eo{border-radius:2px}.ds-media__oJU1eo__loading-spinner{width:24px;height:24px;border-width:2px}.ds-media__oJU1eo__loading-text{font-size:12px}.ds-media__oJU1eo__error-icon{width:40px;height:40px}.ds-media__oJU1eo__error-text{font-size:12px}}`;
+const strings = {
+    fi: {
+        defaultError: 'Median lataus epäonnistui',
+        abortedError: 'Median lataus keskeytettiin',
+        networkError: 'Verkkovirhe tapahtui',
+        decodeError: 'Median dekoodaus epäonnistui',
+        formatError: 'Median formaatti ei ole tuettu',
+    },
+    sv: {
+        defaultError: 'Media laddning misslyckades',
+        abortedError: 'Media laddning avbröts',
+        networkError: 'Nätverksfel uppstod',
+        decodeError: 'Mediaavkodning misslyckades',
+        formatError: 'Mediaformatet stöds inte',
+    },
+};
+const fallback = {
+    defaultError: 'Failed to load media',
+    abortedError: 'Media loading aborted',
+    networkError: 'Network error occurred',
+    decodeError: 'Media decoding failed',
+    formatError: 'Media format not supported',
+};
+function getDsMediaStrings() {
+    return strings[getLanguage()] ?? fallback;
+}
 
-const DsMedia = class extends Mixin(componentFactory('ds-media')) {
+const dsMediaCss = () => `.ds-media__pA2cRq{position:relative;width:100%;height:auto;margin:0;padding:0}.ds-media__pA2cRq__media-wrapper{position:relative;width:100%;height:auto;overflow:hidden;background-color:var(--ds-palette-black-05)}.ds-media__pA2cRq__caption{display:block;padding-top:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-media__pA2cRq__image,.ds-media__pA2cRq__video,.ds-media__pA2cRq__youtube,.ds-media__pA2cRq__iframe{width:100%;height:100%;object-fit:cover;display:block;max-height:var(--horizontal-image-max-height, auto);aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__pA2cRq__youtube,.ds-media__pA2cRq__iframe{border:none;object-fit:initial}.ds-media__pA2cRq__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}.ds-media__pA2cRq--loading .ds-media__pA2cRq__media-wrapper{aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__pA2cRq--loading .ds-media__pA2cRq__image,.ds-media__pA2cRq--loading .ds-media__pA2cRq__video,.ds-media__pA2cRq--loading .ds-media__pA2cRq__youtube,.ds-media__pA2cRq--loading .ds-media__pA2cRq__iframe{opacity:0}.ds-media__pA2cRq--error .ds-media__pA2cRq__media-wrapper{aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__pA2cRq--error .ds-media__pA2cRq__image,.ds-media__pA2cRq--error .ds-media__pA2cRq__video,.ds-media__pA2cRq--error .ds-media__pA2cRq__youtube,.ds-media__pA2cRq--error .ds-media__pA2cRq__iframe{display:none}.ds-media__pA2cRq--error .ds-media__pA2cRq__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-spacing-xSmall);background-color:var(--ds-bgColor-secondary);color:var(--ds-bgColor-danger-bold);z-index:1;padding:var(--ds-spacing-small);text-align:center}.ds-media__pA2cRq--error .ds-media__pA2cRq__error-text{font-size:var(--ds-fontSize-14);font-weight:500;line-height:var(--ds-lineHeight-large)}.ds-media__pA2cRq--image .ds-media__pA2cRq__image{transition:opacity 0.3s ease}.ds-media__pA2cRq--video .ds-media__pA2cRq__video{transition:opacity 0.3s ease}.ds-media__pA2cRq--youtube .ds-media__pA2cRq__youtube{transition:opacity 0.3s ease}.ds-media__pA2cRq--iframe .ds-media__pA2cRq__iframe{transition:opacity 0.3s ease}.ds-media__pA2cRq--fluid{width:100%;height:100%}.ds-media__pA2cRq--fluid .ds-media__pA2cRq__media-wrapper{height:100%}.ds-media__pA2cRq--fluid .ds-media__pA2cRq__image,.ds-media__pA2cRq--fluid .ds-media__pA2cRq__video,.ds-media__pA2cRq--fluid .ds-media__pA2cRq__youtube,.ds-media__pA2cRq--fluid .ds-media__pA2cRq__iframe{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.ds-media__pA2cRq .ds-media__pA2cRq__media-wrapper{border-radius:2px}.ds-media__pA2cRq .ds-media__pA2cRq__error-text{font-size:var(--ds-fontSize-12)}}`;
+
+const DsMedia = class extends Mixin(componentFactory('ds-media', { stopRootTracking: true })) {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
@@ -23,20 +50,30 @@ const DsMedia = class extends Mixin(componentFactory('ds-media')) {
     dsAutoplay = false;
     dsLoop = false;
     dsMuted = true;
+    dsControls = true;
     dsUseLazy = true;
     dsAspectRatio = '';
     dsFluid = false;
+    dsCaptionText;
+    dsSrcset;
+    dsSizes;
     get el() { return getElement(this); }
     isLoading = true;
     hasError = false;
     errorMessage = '';
     dsLoad;
     dsError;
+    get baseClass() {
+        return cx('ds-media');
+    }
+    get strings() {
+        return getDsMediaStrings();
+    }
     componentWillLoad() {
-        this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el, this.dsType === 'video' ? ['aria-label'] : []),
-        };
+        this.updateInheritedAttributes();
+        if (this.dsType === 'image' && this.dsAlt === undefined) {
+            console.warn('ds-media: dsAlt is missing for image type. Provide alt text or an empty string for decorative images.');
+        }
     }
     componentDidLoad() {
         this.componentMounted();
@@ -46,56 +83,16 @@ const DsMedia = class extends Mixin(componentFactory('ds-media')) {
     }
     onTypeChange() {
         this.resetState();
-    }
-    get defaultLoadError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median lataus epäonnistui';
-            case 'sv':
-                return 'Media laddning misslyckades';
-            default:
-                return 'Failed to load media';
+        this.updateInheritedAttributes();
+        if (this.dsType === 'image' && this.dsAlt === undefined) {
+            console.warn('ds-media: dsAlt is missing for image type. Provide alt text or an empty string for decorative images.');
         }
     }
-    get loadAbortedError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median lataus keskeytettiin';
-            case 'sv':
-                return 'Media laddning avbröts';
-            default:
-                return 'Media loading aborted';
-        }
-    }
-    get loadNetworkError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Verkkovirhe tapahtui';
-            case 'sv':
-                return 'Nätverksfel uppstod';
-            default:
-                return 'Network error occurred';
-        }
-    }
-    get loadDecodeError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median dekoodaus epäonnistui';
-            case 'sv':
-                return 'Mediaavkodning misslyckades';
-            default:
-                return 'Media decoding failed';
-        }
-    }
-    get formatError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median formaatti ei ole tuettu';
-            case 'sv':
-                return 'Mediaformatet stöds inte';
-            default:
-                return 'Media format not supported';
-        }
+    updateInheritedAttributes() {
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+            ...inheritAriaAttributes(this.el, this.dsType === 'video' ? ['aria-label'] : []),
+        };
     }
     resetState() {
         this.isLoading = true;
@@ -110,21 +107,22 @@ const DsMedia = class extends Mixin(componentFactory('ds-media')) {
     handleError = (event) => {
         this.isLoading = false;
         this.hasError = true;
-        let errorMessage = this.defaultLoadError;
+        const strings = this.strings;
+        let errorMessage = strings.defaultError;
         const target = event.target;
         if (target.error) {
             switch (target.error.code) {
                 case target.error.MEDIA_ERR_ABORTED:
-                    errorMessage = this.loadAbortedError;
+                    errorMessage = strings.abortedError;
                     break;
                 case target.error.MEDIA_ERR_NETWORK:
-                    errorMessage = this.loadNetworkError;
+                    errorMessage = strings.networkError;
                     break;
                 case target.error.MEDIA_ERR_DECODE:
-                    errorMessage = this.loadDecodeError;
+                    errorMessage = strings.decodeError;
                     break;
                 case target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
-                    errorMessage = this.formatError;
+                    errorMessage = strings.formatError;
                     break;
             }
         }
@@ -132,40 +130,37 @@ const DsMedia = class extends Mixin(componentFactory('ds-media')) {
         this.dsError.emit(errorMessage);
     };
     getYouTubeEmbedUrl(url) {
-        const regexes = [
-            /(?:youtube\.com\/watch\?v=|youtube\.com\/embed\/|youtu\.be\/|youtube\.com\/v\/|youtube\.com\/watch\?.*?&v=)([^&\n?#]+)/,
-            /youtube\.com\/embed\/([^?&\n]+)/,
-            /youtube\.com\/v\/([^?&\n]+)/,
-            /youtu\.be\/([^?&\n]+)/,
-        ];
-        for (const regex of regexes) {
-            const match = regex.exec(url);
-            if (match?.[1]) {
-                return `https://www.youtube.com/embed/${match[1]}`;
-            }
-        }
-        if (url.includes('youtube.com/embed/')) {
-            return url;
+        const match = /(?:youtube\.com\/watch\?v=|youtube\.com\/embed\/|youtu\.be\/|youtube\.com\/v\/|youtube\.com\/watch\?.*?&v=)([^&\n?#]+)/.exec(url);
+        if (match?.[1]) {
+            return `https://www.youtube.com/embed/${match[1]}`;
         }
         return url;
     }
     renderImage() {
-        return (h("img", { src: this.dsSrc, alt: this.dsAlt || '', class: "ds-media__image", onLoad: this.handleLoad, onError: this.handleError, loading: this.dsUseLazy ? 'lazy' : 'eager', ...this.inheritedAttributes }));
+        const baseClass = this.baseClass;
+        return (h("img", { src: this.dsSrc, alt: this.dsAlt || '', class: `${baseClass}__image`, onLoad: this.handleLoad, onError: this.handleError, loading: this.dsUseLazy ? 'lazy' : 'eager', srcset: this.dsSrcset || undefined, sizes: this.dsSizes || undefined, ...this.inheritedAttributes }));
     }
     renderVideo() {
-        return (h("video", { src: this.dsSrc, poster: this.dsPoster, autoplay: this.dsAutoplay, loop: this.dsLoop, muted: this.dsMuted, class: "ds-media__video", onLoadedData: this.handleLoad, onError: this.handleError, preload: "metadata", ...ifDefined('aria-label', this.dsAlt), ...this.inheritedAttributes }, "Your browser does not support the video tag."));
+        const baseClass = this.baseClass;
+        return (h("video", { src: this.dsSrc, poster: this.dsPoster, autoplay: this.dsAutoplay, loop: this.dsLoop, muted: this.dsMuted, controls: this.dsControls, class: `${baseClass}__video`, onLoadedData: this.handleLoad, onError: this.handleError, preload: this.dsAutoplay ? 'auto' : 'metadata', ...ifDefined('aria-label', this.dsAlt), ...this.inheritedAttributes }, "Your browser does not support the video tag."));
     }
     renderYouTube() {
+        const baseClass = this.baseClass;
         const embedUrl = this.getYouTubeEmbedUrl(this.dsSrc);
-        return (h("iframe", { src: embedUrl, class: "ds-media__youtube", frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowfullScreen: true, title: this.dsAlt, onLoad: this.handleLoad, onError: this.handleError, ...this.inheritedAttributes }));
+        return (h("iframe", { src: embedUrl, class: `${baseClass}__youtube`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen", title: this.dsAlt, onLoad: this.handleLoad, onError: this.handleError, ...this.inheritedAttributes }));
+    }
+    renderIframe() {
+        const baseClass = this.baseClass;
+        return h("iframe", { src: this.dsSrc, class: `${baseClass}__iframe`, title: this.dsAlt, onLoad: this.handleLoad, onError: this.handleError, ...this.inheritedAttributes });
     }
     renderLoadingState() {
         const DsSpinner = transformTagName('ds-spinner', 'ds-media', this.el);
-        return h(DsSpinner, { dsSize: "2xLarge" });
+        return (h("div", { class: `${this.baseClass}__spinner` }, h(DsSpinner, { dsSize: "2xLarge" })));
     }
     renderErrorState() {
+        const baseClass = this.baseClass;
         const DsIcon = transformTagName('ds-icon', 'ds-media', this.el);
-        return (h("div", { class: "ds-media__error", role: "alert", "aria-live": "polite" }, h(DsIcon, { dsName: "warning", dsSize: "2rem", dsColour: "ds-bgColor-danger-bold" }), h("span", { class: "ds-media__error-text" }, this.errorMessage)));
+        return (h("div", { class: `${baseClass}__error`, role: "alert", "aria-live": "polite" }, h(DsIcon, { dsName: "warning", dsSize: "2rem", dsColour: "ds-bgColor-danger-bold" }), h("span", { class: `${baseClass}__error-text` }, this.errorMessage)));
     }
     renderMedia() {
         switch (this.dsType) {
@@ -175,24 +170,30 @@ const DsMedia = class extends Mixin(componentFactory('ds-media')) {
                 return this.renderVideo();
             case 'youtube':
                 return this.renderYouTube();
+            case 'iframe':
+                return this.renderIframe();
             default:
                 return null;
         }
     }
+    renderCaption() {
+        if (!this.dsCaptionText)
+            return null;
+        return h("figcaption", { class: `${this.baseClass}__caption` }, this.dsCaptionText);
+    }
     render() {
         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: 'a4a54c00277784252977f41e7476f2b44a48d546', class: classNames(baseClass, {
+        const baseClass = this.baseClass;
+        return (h("figure", { key: 'e4e51d5286d8f405fc07ff94c0ab4cae960ccd88', 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}--iframe`]: this.dsType === 'iframe',
                 [`${baseClass}--fluid`]: this.dsFluid,
-            }), style: {
-                '--ds-media-aspect-ratio': aspectRatioValue,
-            } }, this.isLoading && this.renderLoadingState(), this.hasError && this.renderErrorState(), !this.hasError && this.renderMedia()));
+            }), style: aspectRatioValue ? { '--ds-media-aspect-ratio': aspectRatioValue } : {} }, h("div", { key: 'a7a95782f086bcf3dd2212ef8aa38aa2fc659cd0', class: `${baseClass}__media-wrapper` }, this.isLoading && this.renderLoadingState(), this.hasError && this.renderErrorState(), !this.hasError && this.renderMedia()), this.renderCaption()));
     }
     static get watchers() { return {
         "dsSrc": [{

package/dist/esm/ds-modal.entry.js

@@ -1,12 +1,12 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DvpMvX1M.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DHrlezow.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-BrOdPf9x.js';
-import { t as transformTagName, m as throttle, M as MODAL_TRANSITION_IN_DURATION, p as MODAL_TRANSITION_OUT_DURATION, a as ifDefined, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
-import { g as getLanguage } from './store-c20XLOUp.js';
+import { c as cx } from './cx-CbD7OdM5.js';
+import { t as transformTagName, m as throttle, M as MODAL_TRANSITION_IN_DURATION, p as MODAL_TRANSITION_OUT_DURATION, a as ifDefined, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
+import { g as getLanguage } from './store-DYWVDmmN.js';
 import { i as isGreaterThanEqualBreakpointMediaQuery } from './utils-C77HFMMS.js';
-import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
 
-const dsModalCss = () => `.ds-modal__oJU1eo{position:fixed;padding:0;border:0;margin:0;max-height:100vh;max-height:100dvh;min-height:100vh;min-height:100dvh;width:100vw;background-color:var(--ds-bgColor-transparent-onLight);overflow-y:hidden;inset:0}.ds-modal__oJU1eo--open{overflow-y:auto}.ds-modal__oJU1eo__positioner{pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100dvh;padding-block:var(--ds-spacing-small) 0;margin-block:auto 0}@media (min-width: 30rem){.ds-modal__oJU1eo__positioner{justify-content:center;padding-block:var(--ds-spacing-small);margin-block:auto}}@media (min-width: 60rem){.ds-modal__oJU1eo__positioner{padding-block:var(--ds-spacing-xLarge)}}.ds-modal__oJU1eo__container{pointer-events:auto;cursor:unset;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white);box-shadow:var(--ds-shadow-overlay);scale:0.98;opacity:0;transform:translateY(0.75rem);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__oJU1eo__container{margin:auto;width:fit-content;max-width:calc(100vw - 2 * var(--ds-spacing-small))}}@media (min-width: 60rem){.ds-modal__oJU1eo__container{max-width:calc(100vw - 2 * var(--ds-spacing-xLarge))}}.ds-modal__oJU1eo__container--full{width:100%}@media (min-width: 30rem){.ds-modal__oJU1eo__container--small{width:480px}.ds-modal__oJU1eo__container--medium{width:640px}.ds-modal__oJU1eo__container--large{width:800px}}.ds-modal__oJU1eo__container--scrollable{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100vh + calc(-1 * var(--ds-spacing-small)));max-height:calc(100dvh + calc(-1 * var(--ds-spacing-small)));min-height:calc(320px - 2 * var(--ds-spacing-small))}@media (min-width: 30rem){.ds-modal__oJU1eo__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__oJU1eo__container--scrollable{max-height:calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));max-height:calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)))}}.ds-modal__oJU1eo--open .ds-modal__oJU1eo__container{scale:1;opacity:1;transform:translateY(0)}.ds-modal__oJU1eo--in .ds-modal__oJU1eo__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__oJU1eo__container,.ds-modal__oJU1eo--in .ds-modal__oJU1eo__container{transition:none}}.ds-modal__oJU1eo__header{position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-spacing-2xSmall);padding-block:var(--ds-spacing-small);padding-inline:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__oJU1eo__header{padding-block:var(--ds-spacing-medium) var(--ds-spacing-small);padding-inline:var(--ds-spacing-medium)}}.ds-modal__oJU1eo__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__oJU1eo__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__oJU1eo__header__heading{display:flex;gap:var(--ds-spacing-xSmall)}.ds-modal__oJU1eo__header__heading__text{margin-block:var(--ds-spacing-4xSmall)}@media (min-width: 60rem){.ds-modal__oJU1eo__header__heading__text{margin-block:calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}}.ds-modal__oJU1eo__header__heading__icon{display:block;margin-block:var(--ds-spacing-4xSmall);margin-inline-end:var(--ds-spacing-3xSmall)}@media (min-width: 60rem){.ds-modal__oJU1eo__header__heading__icon{margin-block:var(--ds-spacing-3xSmall)}}.ds-modal__oJU1eo__header__close-button{margin-inline-start:auto}@media (min-width: 60rem){.ds-modal__oJU1eo__header__close-button{margin-block:var(--ds-spacing-4xSmall)}}.ds-modal__oJU1eo__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__oJU1eo__content{position:relative;padding-inline:var(--ds-spacing-small);flex:1;min-height:0}@media (min-width: 30rem){.ds-modal__oJU1eo__content{padding-inline:var(--ds-spacing-medium)}}.ds-modal__oJU1eo__content--padded{padding-block-end:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__oJU1eo__content--padded{padding-block-end:var(--ds-spacing-medium)}}.ds-modal__oJU1eo__content--scrollable{overflow-y:auto;padding-block-end:unset}.ds-modal__oJU1eo__content--scrollable__top-scrim,.ds-modal__oJU1eo__content--scrollable__bottom-scrim{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-modal__oJU1eo__content--scrollable__top-scrim--open,.ds-modal__oJU1eo__content--scrollable__bottom-scrim--open{display:block}.ds-modal__oJU1eo__content--scrollable__top-scrim{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__oJU1eo__content--scrollable__bottom-scrim{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__oJU1eo__content--scrollable:focus-visible .ds-modal__oJU1eo__content--scrollable__top-scrim{top:var(--ds-borderWidth-thin)}.ds-modal__oJU1eo__content--scrollable:focus-visible .ds-modal__oJU1eo__content--scrollable__bottom-scrim{bottom:var(--ds-borderWidth-thin)}.ds-modal__oJU1eo__footer{position:relative}.ds-modal__oJU1eo__footer:not(:empty){display:flex;flex-direction:column;padding:var(--ds-spacing-small);gap:var(--ds-spacing-xSmall)}@media (min-width: 30rem){.ds-modal__oJU1eo__footer:not(:empty){flex-direction:row;padding:var(--ds-spacing-medium);gap:var(--ds-spacing-small)}}.ds-modal__oJU1eo__footer:not(:empty)+.ds-modal__oJU1eo__content{border-block-end:0}.ds-modal__oJU1eo__footer--sticky:not(:empty){position:sticky;bottom:0;background-color:var(--ds-bgColor-white);border-block-start:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}`;
+const dsModalCss = () => `.ds-modal__pA2cRq{position:fixed;padding:0;border:0;margin:0;max-height:100vh;max-height:100dvh;min-height:100vh;min-height:100dvh;width:100vw;background-color:var(--ds-bgColor-transparent-onLight);overflow-y:hidden;inset:0}.ds-modal__pA2cRq--open{overflow-y:auto}.ds-modal__pA2cRq__positioner{pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100dvh;padding-block:var(--ds-spacing-small) 0;margin-block:auto 0}@media (min-width: 30rem){.ds-modal__pA2cRq__positioner{justify-content:center;padding-block:var(--ds-spacing-small);margin-block:auto}}@media (min-width: 60rem){.ds-modal__pA2cRq__positioner{padding-block:var(--ds-spacing-xLarge)}}.ds-modal__pA2cRq__container{pointer-events:auto;cursor:unset;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white);box-shadow:var(--ds-shadow-overlay);scale:0.98;opacity:0;transform:translateY(0.75rem);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__pA2cRq__container{margin:auto;width:fit-content;max-width:calc(100vw - 2 * var(--ds-spacing-small))}}@media (min-width: 60rem){.ds-modal__pA2cRq__container{max-width:calc(100vw - 2 * var(--ds-spacing-xLarge))}}.ds-modal__pA2cRq__container--full{width:100%}@media (min-width: 30rem){.ds-modal__pA2cRq__container--small{width:480px}.ds-modal__pA2cRq__container--medium{width:640px}.ds-modal__pA2cRq__container--large{width:800px}}.ds-modal__pA2cRq__container--scrollable{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100vh + calc(-1 * var(--ds-spacing-small)));max-height:calc(100dvh + calc(-1 * var(--ds-spacing-small)));min-height:calc(320px - 2 * var(--ds-spacing-small))}@media (min-width: 30rem){.ds-modal__pA2cRq__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__pA2cRq__container--scrollable{max-height:calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));max-height:calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)))}}.ds-modal__pA2cRq--open .ds-modal__pA2cRq__container{scale:1;opacity:1;transform:translateY(0)}.ds-modal__pA2cRq--in .ds-modal__pA2cRq__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__pA2cRq__container,.ds-modal__pA2cRq--in .ds-modal__pA2cRq__container{transition:none}}.ds-modal__pA2cRq__header{position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-spacing-2xSmall);padding-block:var(--ds-spacing-small);padding-inline:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__pA2cRq__header{padding-block:var(--ds-spacing-medium) var(--ds-spacing-small);padding-inline:var(--ds-spacing-medium)}}.ds-modal__pA2cRq__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__pA2cRq__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__pA2cRq__header__heading{display:flex;gap:var(--ds-spacing-xSmall)}.ds-modal__pA2cRq__header__heading__text{margin-block:var(--ds-spacing-4xSmall)}@media (min-width: 60rem){.ds-modal__pA2cRq__header__heading__text{margin-block:calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}}.ds-modal__pA2cRq__header__heading__icon{display:block;margin-block:var(--ds-spacing-4xSmall);margin-inline-end:var(--ds-spacing-3xSmall)}@media (min-width: 60rem){.ds-modal__pA2cRq__header__heading__icon{margin-block:var(--ds-spacing-3xSmall)}}.ds-modal__pA2cRq__header__close-button{margin-inline-start:auto}@media (min-width: 60rem){.ds-modal__pA2cRq__header__close-button{margin-block:var(--ds-spacing-4xSmall)}}.ds-modal__pA2cRq__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__pA2cRq__content{position:relative;padding-inline:var(--ds-spacing-small);flex:1;min-height:0}@media (min-width: 30rem){.ds-modal__pA2cRq__content{padding-inline:var(--ds-spacing-medium)}}.ds-modal__pA2cRq__content--padded{padding-block-end:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__pA2cRq__content--padded{padding-block-end:var(--ds-spacing-medium)}}.ds-modal__pA2cRq__content--scrollable{overflow-y:auto;padding-block-end:unset}.ds-modal__pA2cRq__content--scrollable__top-scrim,.ds-modal__pA2cRq__content--scrollable__bottom-scrim{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-modal__pA2cRq__content--scrollable__top-scrim--open,.ds-modal__pA2cRq__content--scrollable__bottom-scrim--open{display:block}.ds-modal__pA2cRq__content--scrollable__top-scrim{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__pA2cRq__content--scrollable__bottom-scrim{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__pA2cRq__content--scrollable:focus-visible .ds-modal__pA2cRq__content--scrollable__top-scrim{top:var(--ds-borderWidth-thin)}.ds-modal__pA2cRq__content--scrollable:focus-visible .ds-modal__pA2cRq__content--scrollable__bottom-scrim{bottom:var(--ds-borderWidth-thin)}.ds-modal__pA2cRq__footer{position:relative}.ds-modal__pA2cRq__footer:not(:empty){display:flex;flex-direction:column;padding:var(--ds-spacing-small);gap:var(--ds-spacing-xSmall)}@media (min-width: 30rem){.ds-modal__pA2cRq__footer:not(:empty){flex-direction:row;padding:var(--ds-spacing-medium);gap:var(--ds-spacing-small)}}.ds-modal__pA2cRq__footer:not(:empty)+.ds-modal__pA2cRq__content{border-block-end:0}.ds-modal__pA2cRq__footer--sticky:not(:empty){position:sticky;bottom:0;background-color:var(--ds-bgColor-white);border-block-start:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}`;
 
 const DsModal = class extends Mixin(componentFactory('ds-modal', { stopRootTracking: true })) {
     constructor(hostRef) {
@@ -216,11 +216,11 @@ const DsModal = class extends Mixin(componentFactory('ds-modal', { stopRootTrack
         });
         const contentAriaLabel = this.dsScrollable ? this.contentScrollArea : undefined;
         const contentTabIndex = this.dsScrollable ? 0 : undefined;
-        return (h(this.DsBackdrop, { key: '42413dd793d7040a7fd2e0db7d21b1aaf937504a', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, h("div", { key: '5f6eacaafbea9542b036adf5f9a6b1f6438a5bc0', class: `${baseClass}__positioner` }, h("div", { key: 'c5149230b5cb7c31f3650a12b9c85f3fb3bed8a0', 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: 'a879fd830a8cd2ed898af28ff29701f8eee4936b', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (h("div", { key: '2abef7e7a70f5cf0dc2929278c6f73e27e78aa3c', class: headerClasses }, this.dsHeadingText && (h("span", { key: '34e2821e019826b908210918c2d5c5e2c7c8a1f3', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (h(this.DsIcon, { key: 'd4cc8e5367cb8856272fc5d2de8508a0fa2da419', 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: 'a3b77daf74437d84f4dd1346a2dfdcd55842fd18', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (h(this.DsButton, { key: '463a9db3e76f6db85b7d56746fb9c3d68af342bc', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), h("div", { key: '806de2042aaf8ab9eedbc9c6418f84b5d737db3d', ref: el => (this.contentRef = el), class: contentClasses, ...ifDefined('aria-label', contentAriaLabel), ...ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (h("div", { key: '6f4c8881745efdc222642ad91414b82d80c537fb', class: classNames(`${baseClass}__content--scrollable__top-scrim`, {
+        return (h(this.DsBackdrop, { key: '5a6666dceafdd836c488dca0b4267f696fae96ad', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, h("div", { key: 'b9e9259d7aa33542bdf96e1ba276ed47151de0f2', class: `${baseClass}__positioner` }, h("div", { key: '8c735f1c2172140e23b6c7ebac8db2ff3eebd58b', 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: '2a2ac105c16055684e8c4887d57d674dbcc691eb', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (h("div", { key: 'cc388b665f36f1614d323aa264f736c273ca05ac', class: headerClasses }, this.dsHeadingText && (h("span", { key: '771a827000c9a7c005929c23021214f1db6c279d', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (h(this.DsIcon, { key: '438b20796c92a99f08491f936d3d5f287f090ea2', 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: '2d5c7996b8559cd495991cb0a459ca28e293cc6a', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (h(this.DsButton, { key: 'aa5ef6d2594b6064b9ae8a6ef005af68bcd449c1', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), h("div", { key: '47e06142d21b5286e9853e5a369a1761159e1a4e', ref: el => (this.contentRef = el), class: contentClasses, ...ifDefined('aria-label', contentAriaLabel), ...ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (h("div", { key: 'a5e145a50643d02dd801acb26e50a5486516e7f3', class: classNames(`${baseClass}__content--scrollable__top-scrim`, {
                 [`${baseClass}__content--scrollable__top-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atTop,
-            }), "aria-hidden": "true" })), h("slot", { key: '6561146e82a7a60b41c3975776d506f490388011', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (h("div", { key: '9461de8338172a11e2f70a871fb64d20f0c39a57', class: classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
+            }), "aria-hidden": "true" })), h("slot", { key: '45f6f1eecda2e9f1f8279ec0b3a274fcc187d9ab', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (h("div", { key: 'f5b6cb6fe2fed931d6540607807dcce3387f7c71', class: classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
                 [`${baseClass}__content--scrollable__bottom-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atBottom,
-            }), "aria-hidden": "true" }))), h("div", { key: '03c4038d7a3461e9595ad7993987dbd2e3529513', class: footerClasses }, h("slot", { key: '559da72c7e6aef4416e559769a0756d28718d4fd', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
+            }), "aria-hidden": "true" }))), h("div", { key: '4e62c73d5bf7b60205d999803708af9ec11538e5', class: footerClasses }, h("slot", { key: '68c2a8a0bd4be4a22ebe1cb728cabe3f1b5604c6', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
     }
     static get watchers() { return {
         "hasContentSlot": [{

package/dist/esm/ds-notification.entry.js

@@ -1,13 +1,13 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, h } from './index-DvpMvX1M.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, h } from './index-DHrlezow.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-BrOdPf9x.js';
-import { t as transformTagName, o as omit, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { c as cx } from './cx-CbD7OdM5.js';
+import { t as transformTagName, o as omit, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
 import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-Dzq9qJk7.js';
-import { g as getLanguage } from './store-c20XLOUp.js';
-import { a as ariaDeprecationFactory } from './ariaDeprecationFactory-pvv8XJ7K.js';
-import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import { g as getLanguage } from './store-DYWVDmmN.js';
+import { a as ariaDeprecationFactory } from './ariaDeprecationFactory-BCnMwTu4.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
 
-const dsNotificationCss = () => `.sc-ds-notification-h{display:block;width:100%}.ds-notification__oJU1eo.sc-ds-notification{padding:var(--ds-spacing-xSmall, 12px)}.ds-notification__oJU1eo.ds-notification__oJU1eo--neutral.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oJU1eo.ds-notification__oJU1eo--neutral.sc-ds-notification .ds-notification__oJU1eo__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__oJU1eo.ds-notification__oJU1eo--neutralWhite.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oJU1eo.ds-notification__oJU1eo--neutralWhite.sc-ds-notification .ds-notification__oJU1eo__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__oJU1eo.ds-notification__oJU1eo--info.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-info);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oJU1eo.ds-notification__oJU1eo--info.sc-ds-notification .ds-notification__oJU1eo__icon.sc-ds-notification{color:var(--ds-iconColor-info);margin-bottom:auto}.ds-notification__oJU1eo.ds-notification__oJU1eo--success.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-success);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oJU1eo.ds-notification__oJU1eo--success.sc-ds-notification .ds-notification__oJU1eo__icon.sc-ds-notification{color:var(--ds-iconColor-success);margin-bottom:auto}.ds-notification__oJU1eo.ds-notification__oJU1eo--attention.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-attention);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oJU1eo.ds-notification__oJU1eo--attention.sc-ds-notification .ds-notification__oJU1eo__icon.sc-ds-notification{color:var(--ds-iconColor-attention);margin-bottom:auto}.ds-notification__oJU1eo.ds-notification__oJU1eo--danger.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-danger);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oJU1eo.ds-notification__oJU1eo--danger.sc-ds-notification .ds-notification__oJU1eo__icon.sc-ds-notification{color:var(--ds-iconColor-danger);margin-bottom:auto}.ds-notification__oJU1eo__content.sc-ds-notification{display:flex;gap:var(--ds-spacing-2xSmall, 8px);max-width:1376px;margin:0 auto}.ds-notification__oJU1eo__content__text.sc-ds-notification{display:flex;padding:var(--ds-spacing-4xSmall, 2px) 0;flex-direction:column;align-items:flex-start;gap:var(--ds-spacing-4xSmall, 2px);flex:1 0 0}.ds-notification__oJU1eo__content__text__heading.sc-ds-notification,.ds-notification__oJU1eo__content__text__description.sc-ds-notification{font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-notification__oJU1eo__content__text__description.sc-ds-notification{max-width:var(--ds-notification-description-max-width, 550px)}`;
+const dsNotificationCss = () => `.sc-ds-notification-h{display:block;width:100%}.ds-notification__pA2cRq.sc-ds-notification{padding:var(--ds-spacing-xSmall, 12px)}.ds-notification__pA2cRq.ds-notification__pA2cRq--neutral.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__pA2cRq.ds-notification__pA2cRq--neutral.sc-ds-notification .ds-notification__pA2cRq__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__pA2cRq.ds-notification__pA2cRq--neutralWhite.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__pA2cRq.ds-notification__pA2cRq--neutralWhite.sc-ds-notification .ds-notification__pA2cRq__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__pA2cRq.ds-notification__pA2cRq--info.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-info);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__pA2cRq.ds-notification__pA2cRq--info.sc-ds-notification .ds-notification__pA2cRq__icon.sc-ds-notification{color:var(--ds-iconColor-info);margin-bottom:auto}.ds-notification__pA2cRq.ds-notification__pA2cRq--success.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-success);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__pA2cRq.ds-notification__pA2cRq--success.sc-ds-notification .ds-notification__pA2cRq__icon.sc-ds-notification{color:var(--ds-iconColor-success);margin-bottom:auto}.ds-notification__pA2cRq.ds-notification__pA2cRq--attention.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-attention);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__pA2cRq.ds-notification__pA2cRq--attention.sc-ds-notification .ds-notification__pA2cRq__icon.sc-ds-notification{color:var(--ds-iconColor-attention);margin-bottom:auto}.ds-notification__pA2cRq.ds-notification__pA2cRq--danger.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-danger);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__pA2cRq.ds-notification__pA2cRq--danger.sc-ds-notification .ds-notification__pA2cRq__icon.sc-ds-notification{color:var(--ds-iconColor-danger);margin-bottom:auto}.ds-notification__pA2cRq__content.sc-ds-notification{display:flex;gap:var(--ds-spacing-2xSmall, 8px);max-width:1376px;margin:0 auto}.ds-notification__pA2cRq__content__text.sc-ds-notification{display:flex;padding:var(--ds-spacing-4xSmall, 2px) 0;flex-direction:column;align-items:flex-start;gap:var(--ds-spacing-4xSmall, 2px);flex:1 0 0}.ds-notification__pA2cRq__content__text__heading.sc-ds-notification,.ds-notification__pA2cRq__content__text__description.sc-ds-notification{font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-notification__pA2cRq__content__text__description.sc-ds-notification{max-width:var(--ds-notification-description-max-width, 550px)}`;
 
 const variants = ['neutral', 'neutralWhite', 'info', 'success', 'attention', 'danger'];
 const customizableIconVariants = ['neutral', 'neutralWhite', 'info'];
@@ -157,7 +157,7 @@ const DsNotification = class extends Mixin(componentFactory('ds-notification', {
         const ariaLabelledby = this.dsAriaLabelledby ?? this.inheritedAttributes['aria-labelledby'] ?? this.ariaLabelledBy;
         const role = this.dsRole ?? this.inheritedAttributes['role'] ?? 'group';
         const restAttributes = omit(this.inheritedAttributes, ['aria-labelledby', 'aria-label', 'role']);
-        return (h("div", { key: 'da7dc416b3544bf88c8e430f5096760d578d6b2e', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: 'cc93c979d7ee7150d67e3a4694f1f21adcd66a33', class: contentClass }, h("div", { key: 'bf8403972e18bc332f5bf603b3396cf71af1c59c', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: '5a6ca762574fb8d030e9125d4359c98a846cc63d', dsName: this.icon })), h("div", { key: '247b10c7c31e21d5706f167115819d0e264ca8cd', class: textClass }, h("slot", { key: '832b560eba442d889d322ac1f0a6ad43f8545c8a', name: "heading" }, this.dsHeading && (h("div", { key: '5ed435ad98a1258b0be61a8c06ed7332ad5df990', class: `${textClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: 'e1a1c1463b2975873fa48226469fcf1a33c542c4', name: "description" }, this.dsDescription && (h("div", { key: '13eb68395d4633806941ede2066d86c8c50d04d0', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: '9dada7c528e67bf965ddcae728d717440bc40484' })), this.dsDismissable && (h(this.DsButton, { key: '6ffc560ffd9ddeaf6664da280ca3ec077c752e55', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsAriaLabelledby: [`${this.dsId}-dismiss-button`, ariaLabelledby].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: '88c24043208db16829f651540ae1a232536990e4', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
+        return (h("div", { key: '7b14408450830b5684feaae5112bb6d5ebd14ad0', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: '0b217857db9473deb8d4170dde2210c44678f564', class: contentClass }, h("div", { key: 'aa01e9f745e9e78816d5448cea369c917cd7e865', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: '055972a856b67cd4189ed9278fdf19c49726d808', dsName: this.icon })), h("div", { key: '04111ec788f7957075685cb0fd27a62b68ac88cb', class: textClass }, h("slot", { key: 'bde8bbc11c6d996264495c269a7e9fe53dd10b88', name: "heading" }, this.dsHeading && (h("div", { key: 'a1e9acfc2eedddba7b91e3bd50c3db3ce39095a1', class: `${textClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: '7b3a7679882494b12385180faa7b0372a4e27639', name: "description" }, this.dsDescription && (h("div", { key: 'b3528bf1e150bd89ca1fdc65906303f7a0ac45fe', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: '96f57e85be28e720d2cbb3d8e9dfb70e6cc2c701' })), this.dsDismissable && (h(this.DsButton, { key: '5aec0dbd01019afe590eb216e9e5041c5a5b5c1e', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsAriaLabelledby: [`${this.dsId}-dismiss-button`, ariaLabelledby].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: 'f9f222d9aab4de4a8fb68cad90c3c375434cd0d7', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
     }
     static get watchers() { return {
         "aria-label": [{

package/dist/esm/ds-option_2.entry.js

@@ -1,12 +1,12 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DvpMvX1M.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DHrlezow.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
-import { c as cx } from './cx-BrOdPf9x.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
+import { c as cx } from './cx-CbD7OdM5.js';
 import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-Dzq9qJk7.js';
-import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
-import './store-c20XLOUp.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
+import './store-DYWVDmmN.js';
 
-const dsOptionCss = () => `.ds-option__oJU1eo.sc-ds-option{display:flex;align-items:center;justify-content:normal;min-height:2.5rem;padding:0.625rem var(--ds-spacing-xSmall);position:relative;cursor:pointer;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-default);font-weight:var(--ds-fontWeight-regular);font-size:var(--ds-fontSize-16);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-option__oJU1eo.sc-ds-option:not(.ds-option__oJU1eo--multiple){justify-content:space-between}.ds-option__oJU1eo--hidden.sc-ds-option{display:none}.ds-option__oJU1eo--disabled.sc-ds-option{cursor:not-allowed;user-select:none;color:var(--ds-textColor-disabled-onLight)}.ds-option__oJU1eo.sc-ds-option:hover:not(.ds-option__oJU1eo--disabled){background-color:var(--ds-bgColor-white-hover)}.ds-option__oJU1eo.sc-ds-option:active:not(.ds-option__oJU1eo--disabled){background-color:var(--ds-bgColor-white-active)}.ds-option__oJU1eo--active.sc-ds-option{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.ds-option__oJU1eo--active.ds-option__oJU1eo--selected.sc-ds-option:not(.ds-option__oJU1eo--multiple){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-option__oJU1eo--multiple.ds-option__oJU1eo--disabled.sc-ds-option{color:var(--ds-textColor-default)}.ds-option__oJU1eo--multiple.sc-ds-option .ds-option__oJU1eo__checkbox.sc-ds-option{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-option__oJU1eo--multiple.ds-option__oJU1eo--disabled.sc-ds-option .ds-option__oJU1eo__checkbox.sc-ds-option{border-color:var(--ds-borderColor-transparent);background-color:var(--ds-bgColor-disabled-onLight)}.ds-option__oJU1eo--multiple.ds-option__oJU1eo--disabled.sc-ds-option:not(.ds-option__oJU1eo--selected) .ds-option__oJU1eo__checkbox.sc-ds-option{border-color:var(--ds-borderColor-disabled-onLight)}.ds-option__oJU1eo--selected.sc-ds-option .ds-option__oJU1eo__checkbox.sc-ds-option{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent);color:var(--ds-textColor-white);padding:var(--ds-spacing-4xSmall)}.ds-option__oJU1eo--selected.sc-ds-option:not(.ds-option__oJU1eo--multiple){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option__oJU1eo--selected.sc-ds-option:not(.ds-option__oJU1eo--multiple).ds-option__oJU1eo--disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-option__oJU1eo--selected.sc-ds-option:not(.ds-option__oJU1eo--multiple) .ds-option__oJU1eo__description.sc-ds-option{color:var(--ds-textColor-white)}.ds-option__oJU1eo--selected.sc-ds-option:not(.ds-option__oJU1eo--multiple) .ds-option__oJU1eo__check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option__oJU1eo--selected.sc-ds-option:not(.ds-option__oJU1eo--multiple).ds-option__oJU1eo--disabled .ds-option__oJU1eo__check-icon.sc-ds-option{color:var(--ds-textColor-disabled-onLight)}.ds-option__oJU1eo--selected.sc-ds-option:not(.ds-option__oJU1eo--multiple):hover:not(.ds-option__oJU1eo--disabled){background-color:var(--ds-bgColor-primary-hover)}.ds-option__oJU1eo--selected.sc-ds-option:not(.ds-option__oJU1eo--multiple):active:not(.ds-option__oJU1eo--disabled){background-color:var(--ds-bgColor-primary-active)}.ds-option__oJU1eo__label.sc-ds-option{display:flex;flex-direction:column;flex:1 1 auto;font-family:var(--ds-fontFamily-body);min-width:0;grid-column:1;grid-row:1}.ds-option__oJU1eo__check-icon.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}.ds-option__oJU1eo__description.sc-ds-option{color:var(--ds-textColor-secondary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.ds-option__oJU1eo__description.sc-ds-option:not(:empty){display:block}`;
+const dsOptionCss = () => `.ds-option__pA2cRq.sc-ds-option{display:flex;align-items:center;justify-content:normal;min-height:2.5rem;padding:0.625rem var(--ds-spacing-xSmall);position:relative;cursor:pointer;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-default);font-weight:var(--ds-fontWeight-regular);font-size:var(--ds-fontSize-16);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-option__pA2cRq.sc-ds-option:not(.ds-option__pA2cRq--multiple){justify-content:space-between}.ds-option__pA2cRq--hidden.sc-ds-option{display:none}.ds-option__pA2cRq--disabled.sc-ds-option{cursor:not-allowed;user-select:none;color:var(--ds-textColor-disabled-onLight)}.ds-option__pA2cRq.sc-ds-option:hover:not(.ds-option__pA2cRq--disabled){background-color:var(--ds-bgColor-white-hover)}.ds-option__pA2cRq.sc-ds-option:active:not(.ds-option__pA2cRq--disabled){background-color:var(--ds-bgColor-white-active)}.ds-option__pA2cRq--active.sc-ds-option{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.ds-option__pA2cRq--active.ds-option__pA2cRq--selected.sc-ds-option:not(.ds-option__pA2cRq--multiple){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-option__pA2cRq--multiple.ds-option__pA2cRq--disabled.sc-ds-option{color:var(--ds-textColor-default)}.ds-option__pA2cRq--multiple.sc-ds-option .ds-option__pA2cRq__checkbox.sc-ds-option{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-option__pA2cRq--multiple.ds-option__pA2cRq--disabled.sc-ds-option .ds-option__pA2cRq__checkbox.sc-ds-option{border-color:var(--ds-borderColor-transparent);background-color:var(--ds-bgColor-disabled-onLight)}.ds-option__pA2cRq--multiple.ds-option__pA2cRq--disabled.sc-ds-option:not(.ds-option__pA2cRq--selected) .ds-option__pA2cRq__checkbox.sc-ds-option{border-color:var(--ds-borderColor-disabled-onLight)}.ds-option__pA2cRq--selected.sc-ds-option .ds-option__pA2cRq__checkbox.sc-ds-option{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent);color:var(--ds-textColor-white);padding:var(--ds-spacing-4xSmall)}.ds-option__pA2cRq--selected.sc-ds-option:not(.ds-option__pA2cRq--multiple){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option__pA2cRq--selected.sc-ds-option:not(.ds-option__pA2cRq--multiple).ds-option__pA2cRq--disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-option__pA2cRq--selected.sc-ds-option:not(.ds-option__pA2cRq--multiple) .ds-option__pA2cRq__description.sc-ds-option{color:var(--ds-textColor-white)}.ds-option__pA2cRq--selected.sc-ds-option:not(.ds-option__pA2cRq--multiple) .ds-option__pA2cRq__check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option__pA2cRq--selected.sc-ds-option:not(.ds-option__pA2cRq--multiple).ds-option__pA2cRq--disabled .ds-option__pA2cRq__check-icon.sc-ds-option{color:var(--ds-textColor-disabled-onLight)}.ds-option__pA2cRq--selected.sc-ds-option:not(.ds-option__pA2cRq--multiple):hover:not(.ds-option__pA2cRq--disabled){background-color:var(--ds-bgColor-primary-hover)}.ds-option__pA2cRq--selected.sc-ds-option:not(.ds-option__pA2cRq--multiple):active:not(.ds-option__pA2cRq--disabled){background-color:var(--ds-bgColor-primary-active)}.ds-option__pA2cRq__label.sc-ds-option{display:flex;flex-direction:column;flex:1 1 auto;font-family:var(--ds-fontFamily-body);min-width:0;grid-column:1;grid-row:1}.ds-option__pA2cRq__check-icon.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}.ds-option__pA2cRq__description.sc-ds-option{color:var(--ds-textColor-secondary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.ds-option__pA2cRq__description.sc-ds-option:not(:empty){display:block}`;
 
 const DsOption = class extends Mixin(componentFactory('ds-option')) {
     constructor(hostRef) {
@@ -127,7 +127,7 @@ const DsOption = class extends Mixin(componentFactory('ds-option')) {
 declareComponentDependencies([h("ds-icon", { dsName: "" })]);
 DsOption.style = dsOptionCss();
 
-const dsOptionGroupCss = () => `.ds-option-group__oJU1eo.sc-ds-option-group{display:block;font-family:var(--ds-fontFamily-body)}.ds-option-group__oJU1eo--hidden.sc-ds-option-group{display:none}.ds-option-group__oJU1eo.sc-ds-option-group ul.sc-ds-option-group{padding:0}.ds-option-group__oJU1eo__label.sc-ds-option-group{position:sticky;display:block;top:0;background-color:var(--ds-bgColor-neutralLight);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large)}.ds-option-group__oJU1eo__label__shadow.sc-ds-option-group{box-shadow:var(--ds-shadow-overflow)}`;
+const dsOptionGroupCss = () => `.ds-option-group__pA2cRq.sc-ds-option-group{display:block;font-family:var(--ds-fontFamily-body)}.ds-option-group__pA2cRq--hidden.sc-ds-option-group{display:none}.ds-option-group__pA2cRq.sc-ds-option-group ul.sc-ds-option-group{padding:0}.ds-option-group__pA2cRq__label.sc-ds-option-group{position:sticky;display:block;top:0;background-color:var(--ds-bgColor-neutralLight);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large)}.ds-option-group__pA2cRq__label__shadow.sc-ds-option-group{box-shadow:var(--ds-shadow-overflow)}`;
 
 const DsOptionGroup = class extends Mixin(componentFactory('ds-option-group')) {
     constructor(hostRef) {
@@ -162,9 +162,9 @@ const DsOptionGroup = class extends Mixin(componentFactory('ds-option-group')) {
     }
     render() {
         const baseClass = cx('ds-option-group');
-        return (h("div", { key: '8023b873b342fb6ed068e04d1c5a90e7a0abbd08', class: classNames(`${baseClass}`, {
+        return (h("div", { key: '52223bab5fbf6ebc5f2704df1fd6d8d5d1ae9175', class: classNames(`${baseClass}`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, h("div", { key: '1dba0efdf6a067e140f293b632af322bbf0ccd4b', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: '57684ac864169f1a515d038026caba48f3f8fb52' })));
+            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, h("div", { key: '7909f575ab855df82dac8957c46c42e14468e64c', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: '0102c6419e9cdbe821a284f573877673306c60e4' })));
     }
 };
 DsOptionGroup.style = dsOptionGroupCss();

package/dist/esm/ds-options-message.entry.js

@@ -1,11 +1,11 @@
-import { M as Mixin, r as registerInstance, e as getElement, h } from './index-DvpMvX1M.js';
-import { g as getLanguage } from './store-c20XLOUp.js';
-import { t as tryADifferentSearchTerm, n as noResultsFound, l as loadingOptions, f as tryAgainOrIfTheProblemPersists, w as weCouldNotLoadOptions } from './controlUtils-DdeUSE7n.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
-import { c as cx } from './cx-BrOdPf9x.js';
-import { c as componentFactory } from './componentFactory-BFyiMxsr.js';
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-DHrlezow.js';
+import { g as getLanguage } from './store-DYWVDmmN.js';
+import { t as tryADifferentSearchTerm, n as noResultsFound, l as loadingOptions, f as tryAgainOrIfTheProblemPersists, w as weCouldNotLoadOptions } from './controlUtils-BT-SOH5c.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-D5pGK2ZH.js';
+import { c as cx } from './cx-CbD7OdM5.js';
+import { c as componentFactory } from './componentFactory-DRKnB2By.js';
 
-const dsOptionsMessageCss = () => `.ds-options-message__oJU1eo.sc-ds-options-message{display:flex;flex-direction:column;padding:var(--ds-spacing-2xSmall);height:18.5rem;overflow:hidden;box-sizing:border-box;align-items:center;justify-content:center;font-family:var(--ds-fontFamily-body)}.ds-options-message__oJU1eo__error.sc-ds-options-message{color:var(--ds-textColor-danger);text-align:center}.ds-options-message__oJU1eo__error__icon.sc-ds-options-message{display:inline-block}.ds-options-message__oJU1eo__error__title.sc-ds-options-message,.ds-options-message__oJU1eo__no-results__title.sc-ds-options-message{text-align:center;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.ds-options-message__oJU1eo__no-results__title.sc-ds-options-message{hyphens:auto}.ds-options-message__oJU1eo__error__text.sc-ds-options-message,.ds-options-message__oJU1eo__no-results__text.sc-ds-options-message{color:var(--ds-textColor-default);text-align:center;font-size:var(--ds-fontSize-16)}`;
+const dsOptionsMessageCss = () => `.ds-options-message__pA2cRq.sc-ds-options-message{display:flex;flex-direction:column;padding:var(--ds-spacing-2xSmall);height:18.5rem;overflow:hidden;box-sizing:border-box;align-items:center;justify-content:center;font-family:var(--ds-fontFamily-body)}.ds-options-message__pA2cRq__error.sc-ds-options-message{color:var(--ds-textColor-danger);text-align:center}.ds-options-message__pA2cRq__error__icon.sc-ds-options-message{display:inline-block}.ds-options-message__pA2cRq__error__title.sc-ds-options-message,.ds-options-message__pA2cRq__no-results__title.sc-ds-options-message{text-align:center;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.ds-options-message__pA2cRq__no-results__title.sc-ds-options-message{hyphens:auto}.ds-options-message__pA2cRq__error__text.sc-ds-options-message,.ds-options-message__pA2cRq__no-results__text.sc-ds-options-message{color:var(--ds-textColor-default);text-align:center;font-size:var(--ds-fontSize-16)}`;
 
 const defaultTextFns = {
     dsErrorTitle: weCouldNotLoadOptions,