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

package/dist/cjs/ds-link-logo_2.cjs.entry.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var utils = require('./utils-D94MuKO1.js');
-var linkFactory = require('./linkFactory-D35BBFD_.js');
-var cx = require('./cx-uuGgi31h.js');
-var linkUtils = require('./linkUtils-C8b_nzIl.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
-require('./store-Dse4EhGQ.js');
+var utils = require('./utils-DWrHry7C.js');
+var linkFactory = require('./linkFactory-DLYjioyX.js');
+var cx = require('./cx-BS6nqACL.js');
+var linkUtils = require('./linkUtils-zEbT6bdG.js');
+var componentFactory = require('./componentFactory-izBTCdjj.js');
+require('./store-C9xOI2Br.js');
 
-const dsLinkLogoCss = () => `.ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}:host{display:inline-block}.ds-link-logo__oJU1eo{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-link-logo__oJU1eo: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-logo__oJU1eo{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall, 0.5rem);color:var(--ds-textColor-default, #0c0c0c);cursor:pointer;font-family:var(--ds-fontFamily-headings);font-size:var(--ds-fontSize-14, 0.875rem);font-weight:var(--ds-fontWeight-bold, 700);letter-spacing:-0.04375rem;line-height:1;text-transform:uppercase}.ds-link-logo__oJU1eo:hover{color:var(--ds-bgColor-primary, #005a94)}@media (min-width: 60rem){.ds-link-logo__oJU1eo{font-size:var(--ds-fontSize-16, 1rem)}}`;
+const dsLinkLogoCss = () => `.ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}:host{display:inline-block}.ds-link-logo__owcjsm{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-link-logo__owcjsm: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-logo__owcjsm{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall, 0.5rem);color:var(--ds-textColor-default, #0c0c0c);cursor:pointer;font-family:var(--ds-fontFamily-headings);font-size:var(--ds-fontSize-14, 0.875rem);font-weight:var(--ds-fontWeight-bold, 700);letter-spacing:-0.04375rem;line-height:1;text-transform:uppercase}.ds-link-logo__owcjsm:hover{color:var(--ds-bgColor-primary, #005a94)}@media (min-width: 60rem){.ds-link-logo__owcjsm{font-size:var(--ds-fontSize-16, 1rem)}}`;
 
 const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
 const DsLinkLogo = class extends index.Mixin(componentFactory.componentFactory('ds-link-logo'), linkFactory.linkFactory) {
@@ -78,7 +78,7 @@ const DsLinkLogo = class extends index.Mixin(componentFactory.componentFactory('
         const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
-        return (index.h(this.dsTag, { key: '5fe903e4aef8be83400c0db4f794a00efe8263bf', part: "link", class: classes, ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, this.dsIcon && index.h(this.DsIcon, { key: 'a429b38f5fecd00c3079c96c3d6d8b80611367f4', dsName: this.dsIcon, dsSize: "2rem", dsRole: "img" }), this.dsText, linkUtils.opensInNewTab(this.dsTarget) && (index.h(DsVisuallyHidden, { key: '159eee2db540f5e02296e1f9abff70808f089395', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, linkUtils.visuallyHiddenAssistiveText()))));
+        return (index.h(this.dsTag, { key: 'd7b1c58186d068de66ba8dc0ab9ac081a8123a56', part: "link", class: classes, ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, this.dsIcon && index.h(this.DsIcon, { key: 'd55b2710d004dcf24a0521e7ce91ad6b224342f8', dsName: this.dsIcon, dsSize: "2rem", dsRole: "img" }), this.dsText, linkUtils.opensInNewTab(this.dsTarget) && (index.h(DsVisuallyHidden, { key: '2c4be790fc7f5d7a49cbe2daa259b6389f8820e4', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, linkUtils.visuallyHiddenAssistiveText()))));
     }
     static get watchers() { return {
         "aria-label": [{
@@ -89,7 +89,7 @@ const DsLinkLogo = class extends index.Mixin(componentFactory.componentFactory('
 utils.declareComponentDependencies([index.h("ds-icon", { dsName: "" }), index.h("ds-link", { dsText: "" })]);
 DsLinkLogo.style = dsLinkLogoCss();
 
-const dsTagCss = () => `.ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}.ds-tag__oJU1eo{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-tag__oJU1eo: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-tag__oJU1eo:focus-within{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-tag__oJU1eo{box-sizing:border-box;display:inline-flex;align-items:center;min-height:1.5rem;background-color:var(--ds-bgColor-neutral);padding:calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);gap:var(--ds-spacing-3xSmall)}.ds-tag__oJU1eo.ds-tag__oJU1eo--default{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral)}.ds-tag__oJU1eo.ds-tag__oJU1eo--default:has(.ds-tag__oJU1eo__link:hover){background-color:var(--ds-bgColor-neutral-hover)}.ds-tag__oJU1eo.ds-tag__oJU1eo--default:has(.ds-tag__oJU1eo__link:active){background-color:var(--ds-bgColor-neutral-active)}.ds-tag__oJU1eo.ds-tag__oJU1eo--black{color:var(--ds-textColor-white);background-color:var(--ds-bgColor-black)}.ds-tag__oJU1eo.ds-tag__oJU1eo--black:has(.ds-tag__oJU1eo__link:hover){background-color:var(--ds-bgColor-black-hover)}.ds-tag__oJU1eo.ds-tag__oJU1eo--black:has(.ds-tag__oJU1eo__link:active){background-color:var(--ds-bgColor-black-active)}.ds-tag__oJU1eo.ds-tag__oJU1eo--white{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white)}.ds-tag__oJU1eo.ds-tag__oJU1eo--white:has(.ds-tag__oJU1eo__link:hover){background-color:var(--ds-bgColor-white-hover)}.ds-tag__oJU1eo.ds-tag__oJU1eo--white:has(.ds-tag__oJU1eo__link:active){background-color:var(--ds-bgColor-white-active)}.ds-tag__oJU1eo.ds-tag__oJU1eo--info{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info)}.ds-tag__oJU1eo.ds-tag__oJU1eo--info:has(.ds-tag__oJU1eo__link:hover){background-color:var(--ds-bgColor-info-hover)}.ds-tag__oJU1eo.ds-tag__oJU1eo--info:has(.ds-tag__oJU1eo__link:active){background-color:var(--ds-bgColor-info-active)}.ds-tag__oJU1eo.ds-tag__oJU1eo--danger{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger)}.ds-tag__oJU1eo.ds-tag__oJU1eo--danger:has(.ds-tag__oJU1eo__link:hover){background-color:var(--ds-bgColor-danger-hover)}.ds-tag__oJU1eo.ds-tag__oJU1eo--danger:has(.ds-tag__oJU1eo__link:active){background-color:var(--ds-bgColor-danger-active)}.ds-tag__oJU1eo.ds-tag__oJU1eo--attention{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention)}.ds-tag__oJU1eo.ds-tag__oJU1eo--attention:has(.ds-tag__oJU1eo__link:hover){background-color:var(--ds-bgColor-attention-hover)}.ds-tag__oJU1eo.ds-tag__oJU1eo--attention:has(.ds-tag__oJU1eo__link:active){background-color:var(--ds-bgColor-attention-active)}.ds-tag__oJU1eo.ds-tag__oJU1eo--success{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success)}.ds-tag__oJU1eo.ds-tag__oJU1eo--success:has(.ds-tag__oJU1eo__link:hover){background-color:var(--ds-bgColor-success-hover)}.ds-tag__oJU1eo.ds-tag__oJU1eo--success:has(.ds-tag__oJU1eo__link:active){background-color:var(--ds-bgColor-success-active)}.ds-tag__oJU1eo__text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-tag__oJU1eo__link{display:contents}.ds-tag__oJU1eo__link a:focus-visible{box-shadow:none !important;outline:none !important;outline-offset:unset !important}`;
+const dsTagCss = () => `.ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}.ds-tag__owcjsm{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-tag__owcjsm: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-tag__owcjsm:focus-within{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-tag__owcjsm{box-sizing:border-box;display:inline-flex;align-items:center;min-height:1.5rem;background-color:var(--ds-bgColor-neutral);padding:calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);gap:var(--ds-spacing-3xSmall)}.ds-tag__owcjsm.ds-tag__owcjsm--default{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral)}.ds-tag__owcjsm.ds-tag__owcjsm--default:has(.ds-tag__owcjsm__link:hover){background-color:var(--ds-bgColor-neutral-hover)}.ds-tag__owcjsm.ds-tag__owcjsm--default:has(.ds-tag__owcjsm__link:active){background-color:var(--ds-bgColor-neutral-active)}.ds-tag__owcjsm.ds-tag__owcjsm--black{color:var(--ds-textColor-white);background-color:var(--ds-bgColor-black)}.ds-tag__owcjsm.ds-tag__owcjsm--black:has(.ds-tag__owcjsm__link:hover){background-color:var(--ds-bgColor-black-hover)}.ds-tag__owcjsm.ds-tag__owcjsm--black:has(.ds-tag__owcjsm__link:active){background-color:var(--ds-bgColor-black-active)}.ds-tag__owcjsm.ds-tag__owcjsm--white{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white)}.ds-tag__owcjsm.ds-tag__owcjsm--white:has(.ds-tag__owcjsm__link:hover){background-color:var(--ds-bgColor-white-hover)}.ds-tag__owcjsm.ds-tag__owcjsm--white:has(.ds-tag__owcjsm__link:active){background-color:var(--ds-bgColor-white-active)}.ds-tag__owcjsm.ds-tag__owcjsm--info{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info)}.ds-tag__owcjsm.ds-tag__owcjsm--info:has(.ds-tag__owcjsm__link:hover){background-color:var(--ds-bgColor-info-hover)}.ds-tag__owcjsm.ds-tag__owcjsm--info:has(.ds-tag__owcjsm__link:active){background-color:var(--ds-bgColor-info-active)}.ds-tag__owcjsm.ds-tag__owcjsm--danger{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger)}.ds-tag__owcjsm.ds-tag__owcjsm--danger:has(.ds-tag__owcjsm__link:hover){background-color:var(--ds-bgColor-danger-hover)}.ds-tag__owcjsm.ds-tag__owcjsm--danger:has(.ds-tag__owcjsm__link:active){background-color:var(--ds-bgColor-danger-active)}.ds-tag__owcjsm.ds-tag__owcjsm--attention{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention)}.ds-tag__owcjsm.ds-tag__owcjsm--attention:has(.ds-tag__owcjsm__link:hover){background-color:var(--ds-bgColor-attention-hover)}.ds-tag__owcjsm.ds-tag__owcjsm--attention:has(.ds-tag__owcjsm__link:active){background-color:var(--ds-bgColor-attention-active)}.ds-tag__owcjsm.ds-tag__owcjsm--success{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success)}.ds-tag__owcjsm.ds-tag__owcjsm--success:has(.ds-tag__owcjsm__link:hover){background-color:var(--ds-bgColor-success-hover)}.ds-tag__owcjsm.ds-tag__owcjsm--success:has(.ds-tag__owcjsm__link:active){background-color:var(--ds-bgColor-success-active)}.ds-tag__owcjsm__text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-tag__owcjsm__link{display:contents}.ds-tag__owcjsm__link a:focus-visible{box-shadow:none !important;outline:none !important;outline-offset:unset !important}`;
 
 const DsTag = class extends index.Mixin(componentFactory.componentFactory('ds-tag')) {
     constructor(hostRef) {
@@ -126,7 +126,7 @@ const DsTag = class extends index.Mixin(componentFactory.componentFactory('ds-ta
         const ariaHidden = this.dsAriaHidden ?? !this.dsHref;
         const role = this.dsRole ?? this.inheritedAttributes.role;
         const restAttributes = utils.omit(this.inheritedAttributes, ['aria-hidden', 'role']);
-        return (index.h("div", { key: '4aa78d59d29a7b02c38feafd8803267ca4d44e45', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, index.h("slot", { key: '5c22591ea524e20192e9cf2a729f14fd2ab4caf6', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? index.h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), index.h("slot", { key: 'f78a5568a25bce3e234538525eb97c8a1c936040' }, this.dsHref ? (index.h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (index.h("span", { class: `${baseClass}__text` }, this.dsText))), index.h("slot", { key: '503a2cfcacf654d3f5f218197232610523e476b4', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? index.h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (index.h("div", { key: '3305650df4292d39cde25b9a84e7350d02dfd53d', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, index.h("slot", { key: 'e403d25adf10157c46debb2c877e7fe7c294eb16', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? index.h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), index.h("slot", { key: '605714b89a4683dee8e102f50f5ec93c7023def7' }, this.dsHref ? (index.h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (index.h("span", { class: `${baseClass}__text` }, this.dsText))), index.h("slot", { key: '91eb6271152b525043529a7d1963d6e81195e856', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? index.h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
     }
 };
 utils.declareComponentDependencies([index.h("ds-icon", { dsName: "" }), index.h("ds-link", { dsText: "" })]);

package/dist/cjs/ds-link-with-arrow.cjs.entry.js

@@ -1,18 +1,18 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var linkUtils = require('./linkUtils-C8b_nzIl.js');
-var utils = require('./utils-D94MuKO1.js');
-var linkFactory = require('./linkFactory-D35BBFD_.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-j82aBIxx.js');
-var cx = require('./cx-uuGgi31h.js');
+var linkUtils = require('./linkUtils-zEbT6bdG.js');
+var utils = require('./utils-DWrHry7C.js');
+var linkFactory = require('./linkFactory-DLYjioyX.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-Os9dT7II.js');
+var cx = require('./cx-BS6nqACL.js');
 var utils$1 = require('./utils-Ctsvcil0.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
-require('./store-Dse4EhGQ.js');
+var componentFactory = require('./componentFactory-izBTCdjj.js');
+require('./store-C9xOI2Br.js');
 
-const dsLinkWithArrowCss = () => `.ds-no-style-leak.sc-ds-link-with-arrow *.sc-ds-link-with-arrow{all:unset;box-sizing:border-box;display:block}.ds-link-with-arrow__oJU1eo.sc-ds-link-with-arrow{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-link-with-arrow__oJU1eo.sc-ds-link-with-arrow: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__oJU1eo.sc-ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-textColor-link);letter-spacing:var(--ds-letterSpacing-wide);font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}@media (min-width: 30rem){.ds-link-with-arrow__oJU1eo.sc-ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__oJU1eo--full-width.sc-ds-link-with-arrow{width:100%;justify-content:space-between}.ds-link-with-arrow__oJU1eo__icon.sc-ds-link-with-arrow{display:inline-flex;flex-shrink:0;width:2rem;height:2rem;line-height:0;align-items:center;justify-content:center;color:var(--ds-textColor-white);background-color:var(--ds-bgColor-primary)}@media (min-width: 30rem){.ds-link-with-arrow__oJU1eo__icon.sc-ds-link-with-arrow{width:2.5rem;height:2.5rem}}.ds-link-with-arrow__oJU1eo__icon--start.sc-ds-link-with-arrow{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__oJU1eo__icon--end.sc-ds-link-with-arrow{margin-left:var(--ds-spacing-xSmall)}.ds-link-with-arrow__oJU1eo.sc-ds-link-with-arrow:hover,.ds-link-with-arrow__oJU1eo.sc-ds-link-with-arrow:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-with-arrow__oJU1eo.sc-ds-link-with-arrow:hover{cursor:pointer;color:var(--ds-textColor-link-hover)}.ds-link-with-arrow__oJU1eo.sc-ds-link-with-arrow:hover .ds-link-with-arrow__oJU1eo__icon.sc-ds-link-with-arrow{background-color:var(--ds-bgColor-primary-hover)}.ds-link-with-arrow__oJU1eo.sc-ds-link-with-arrow:active,.ds-link-with-arrow__oJU1eo.sc-ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}.ds-link-with-arrow__oJU1eo.sc-ds-link-with-arrow:active .ds-link-with-arrow__oJU1eo__icon.sc-ds-link-with-arrow{background-color:var(--ds-bgColor-primary-active)}`;
+const dsLinkWithArrowCss = () => `.ds-no-style-leak.sc-ds-link-with-arrow *.sc-ds-link-with-arrow{all:unset;box-sizing:border-box;display:block}.ds-link-with-arrow__owcjsm.sc-ds-link-with-arrow{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-link-with-arrow__owcjsm.sc-ds-link-with-arrow: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__owcjsm.sc-ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-textColor-link);letter-spacing:var(--ds-letterSpacing-wide);font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}@media (min-width: 30rem){.ds-link-with-arrow__owcjsm.sc-ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__owcjsm--full-width.sc-ds-link-with-arrow{width:100%;justify-content:space-between}.ds-link-with-arrow__owcjsm__icon.sc-ds-link-with-arrow{display:inline-flex;flex-shrink:0;width:2rem;height:2rem;line-height:0;align-items:center;justify-content:center;color:var(--ds-textColor-white);background-color:var(--ds-bgColor-primary)}@media (min-width: 30rem){.ds-link-with-arrow__owcjsm__icon.sc-ds-link-with-arrow{width:2.5rem;height:2.5rem}}.ds-link-with-arrow__owcjsm__icon--start.sc-ds-link-with-arrow{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__owcjsm__icon--end.sc-ds-link-with-arrow{margin-left:var(--ds-spacing-xSmall)}.ds-link-with-arrow__owcjsm.sc-ds-link-with-arrow:hover,.ds-link-with-arrow__owcjsm.sc-ds-link-with-arrow:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-with-arrow__owcjsm.sc-ds-link-with-arrow:hover{cursor:pointer;color:var(--ds-textColor-link-hover)}.ds-link-with-arrow__owcjsm.sc-ds-link-with-arrow:hover .ds-link-with-arrow__owcjsm__icon.sc-ds-link-with-arrow{background-color:var(--ds-bgColor-primary-hover)}.ds-link-with-arrow__owcjsm.sc-ds-link-with-arrow:active,.ds-link-with-arrow__owcjsm.sc-ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}.ds-link-with-arrow__owcjsm.sc-ds-link-with-arrow:active .ds-link-with-arrow__owcjsm__icon.sc-ds-link-with-arrow{background-color:var(--ds-bgColor-primary-active)}`;
 
 const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
 const DsLinkWithArrow = class extends index.Mixin(componentFactory.componentFactory('ds-link-with-arrow'), linkFactory.linkFactory, ariaDeprecationFactory.ariaDeprecationFactory) {
@@ -86,7 +86,7 @@ const DsLinkWithArrow = class extends index.Mixin(componentFactory.componentFact
         const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
-        return (index.h(this.dsTag, { key: '3e7200ff059ad4ba18bca6f51be2dd64d36e954c', class: classes, ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, index.h("slot", { key: 'a1df9653811580869013f5d39dbcf3d5a46537ea', name: "prefix" }, this.dsIconPosition === 'start' && index.h(DsIcon, { key: '1a3f309f236700c53beed173c635256cf807527c', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, index.h("slot", { key: 'caeeb904f1af41f0e4afc53f39309fa70156c8ef', name: "suffix" }, this.dsIconPosition === 'end' && index.h(DsIcon, { key: '35be26fc38924d10b3305bb853b8133a745c82c8', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), linkUtils.opensInNewTab(this.dsTarget) && (index.h(DsVisuallyHidden, { key: '806ebc69ec707c71fc3eb15a9ea3c03e690a7cbe', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, linkUtils.visuallyHiddenAssistiveText()))));
+        return (index.h(this.dsTag, { key: '1d23feca569fa2a2bf438db4446283f12215eba8', class: classes, ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, index.h("slot", { key: 'acc62c6dd5cf5a0262c10ffa1f0d1723a7f4e4ea', name: "prefix" }, this.dsIconPosition === 'start' && index.h(DsIcon, { key: '4ff8d012d980e5ba799adfcc0fc0d442f2ea7599', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, index.h("slot", { key: 'a68628f775ae39b7942543ce982aeeddc7c1ea59', name: "suffix" }, this.dsIconPosition === 'end' && index.h(DsIcon, { key: 'cd849008980aea45c6166bdf43641218ff394619', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), linkUtils.opensInNewTab(this.dsTarget) && (index.h(DsVisuallyHidden, { key: '450738f6df19a886c122f984bf7fff34345383d7', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, linkUtils.visuallyHiddenAssistiveText()))));
     }
 };
 utils.declareComponentDependencies([index.h("ds-icon", { dsName: "" }), index.h("ds-visually-hidden", null)]);

package/dist/cjs/ds-link.cjs.entry.js

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var linkUtils = require('./linkUtils-C8b_nzIl.js');
-var utils = require('./utils-D94MuKO1.js');
-var linkFactory = require('./linkFactory-D35BBFD_.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-j82aBIxx.js');
-var cx = require('./cx-uuGgi31h.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
-require('./store-Dse4EhGQ.js');
+var linkUtils = require('./linkUtils-zEbT6bdG.js');
+var utils = require('./utils-DWrHry7C.js');
+var linkFactory = require('./linkFactory-DLYjioyX.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-Os9dT7II.js');
+var cx = require('./cx-BS6nqACL.js');
+var componentFactory = require('./componentFactory-izBTCdjj.js');
+require('./store-C9xOI2Br.js');
 
-const dsLinkCss = () => `.ds-no-style-leak.sc-ds-link *.sc-ds-link{all:unset;box-sizing:border-box;display:block}.ds-link__oJU1eo.sc-ds-link{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-link__oJU1eo.sc-ds-link: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__oJU1eo.sc-ds-link{box-sizing:border-box;display:inline;vertical-align:var(--ds-link-vertical-align, baseline);color:var(--ds-textColor-link);font-family:var(--ds-fontFamily-body);font-size:var(--ds-link-font-size, var(--ds-fontSize-16));font-weight:var(--ds-fontWeight-regular);text-transform:var(--ds-link-text-transform, none);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link__oJU1eo--semibold.sc-ds-link{font-weight:var(--ds-fontWeight-semibold)}.ds-link__oJU1eo--bold.sc-ds-link{font-weight:var(--ds-fontWeight-bold)}.ds-link__oJU1eo--2xLarge.sc-ds-link{font-size:var(--ds-fontSize-22)}.ds-link__oJU1eo--xLarge.sc-ds-link{font-size:var(--ds-fontSize-20)}.ds-link__oJU1eo--large.sc-ds-link{font-size:var(--ds-fontSize-18)}.ds-link__oJU1eo--medium.sc-ds-link{font-size:var(--ds-fontSize-16)}.ds-link__oJU1eo--small.sc-ds-link{font-size:var(--ds-fontSize-14)}.ds-link__oJU1eo--xSmall.sc-ds-link{font-size:var(--ds-fontSize-12)}.ds-link__oJU1eo__icon.sc-ds-link{display:inline-block;vertical-align:-0.125em}.ds-link__oJU1eo__icon--start-inline.sc-ds-link{margin-right:var(--ds-spacing-3xSmall)}.ds-link__oJU1eo__icon--start-standalone.sc-ds-link{margin-right:var(--ds-spacing-2xSmall)}.ds-link__oJU1eo__icon--end-inline.sc-ds-link{margin-left:var(--ds-spacing-3xSmall)}.ds-link__oJU1eo__icon--end-standalone.sc-ds-link{margin-left:var(--ds-spacing-2xSmall)}.ds-link__oJU1eo.sc-ds-link:hover,.ds-link__oJU1eo.sc-ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link__oJU1eo.sc-ds-link:hover{color:var(--ds-textColor-link-hover);cursor:pointer}.ds-link__oJU1eo.sc-ds-link:active{color:var(--ds-textColor-link-active)}.ds-link__oJU1eo.sc-ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link__oJU1eo--standalone.sc-ds-link{display:inline-block;color:var(--ds-textColor-link);text-decoration-line:none}.ds-link__oJU1eo--standalone.sc-ds-link:hover,.ds-link__oJU1eo--standalone.sc-ds-link:active{text-decoration-line:underline}.ds-link__oJU1eo--standalone.sc-ds-link:focus-visible,.ds-link__oJU1eo--standalone.sc-ds-link:visited{color:var(--ds-textColor-link)}.ds-link__oJU1eo--standalone.sc-ds-link:active{color:var(--ds-textColor-link-active)}.ds-link__oJU1eo--standalone.sc-ds-link:hover{color:var(--ds-textColor-link-hover)}.ds-link__oJU1eo--colour-white.sc-ds-link{color:var(--ds-textColor-white)}.ds-link__oJU1eo--colour-white.sc-ds-link:hover,.ds-link__oJU1eo--colour-white.sc-ds-link:active,.ds-link__oJU1eo--colour-white.sc-ds-link:visited,.ds-link__oJU1eo--colour-white.sc-ds-link:focus-visible{color:var(--ds-textColor-white)}.ds-link__oJU1eo--colour-black.sc-ds-link{color:var(--ds-textColor-default)}.ds-link__oJU1eo--colour-black.sc-ds-link:hover,.ds-link__oJU1eo--colour-black.sc-ds-link:active,.ds-link__oJU1eo--colour-black.sc-ds-link:visited,.ds-link__oJU1eo--colour-black.sc-ds-link:focus-visible{color:var(--ds-textColor-default)}`;
+const dsLinkCss = () => `.ds-no-style-leak.sc-ds-link *.sc-ds-link{all:unset;box-sizing:border-box;display:block}.ds-link__owcjsm.sc-ds-link{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-link__owcjsm.sc-ds-link: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__owcjsm.sc-ds-link{box-sizing:border-box;display:inline;vertical-align:var(--ds-link-vertical-align, baseline);color:var(--ds-textColor-link);font-family:var(--ds-fontFamily-body);font-size:var(--ds-link-font-size, var(--ds-fontSize-16));font-weight:var(--ds-fontWeight-regular);text-transform:var(--ds-link-text-transform, none);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link__owcjsm--semibold.sc-ds-link{font-weight:var(--ds-fontWeight-semibold)}.ds-link__owcjsm--bold.sc-ds-link{font-weight:var(--ds-fontWeight-bold)}.ds-link__owcjsm--2xLarge.sc-ds-link{font-size:var(--ds-fontSize-22)}.ds-link__owcjsm--xLarge.sc-ds-link{font-size:var(--ds-fontSize-20)}.ds-link__owcjsm--large.sc-ds-link{font-size:var(--ds-fontSize-18)}.ds-link__owcjsm--medium.sc-ds-link{font-size:var(--ds-fontSize-16)}.ds-link__owcjsm--small.sc-ds-link{font-size:var(--ds-fontSize-14)}.ds-link__owcjsm--xSmall.sc-ds-link{font-size:var(--ds-fontSize-12)}.ds-link__owcjsm__icon.sc-ds-link{display:inline-block;vertical-align:-0.125em}.ds-link__owcjsm__icon--start-inline.sc-ds-link{margin-right:var(--ds-spacing-3xSmall)}.ds-link__owcjsm__icon--start-standalone.sc-ds-link{margin-right:var(--ds-spacing-2xSmall)}.ds-link__owcjsm__icon--end-inline.sc-ds-link{margin-left:var(--ds-spacing-3xSmall)}.ds-link__owcjsm__icon--end-standalone.sc-ds-link{margin-left:var(--ds-spacing-2xSmall)}.ds-link__owcjsm.sc-ds-link:hover,.ds-link__owcjsm.sc-ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link__owcjsm.sc-ds-link:hover{color:var(--ds-textColor-link-hover);cursor:pointer}.ds-link__owcjsm.sc-ds-link:active{color:var(--ds-textColor-link-active)}.ds-link__owcjsm.sc-ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link__owcjsm--standalone.sc-ds-link{display:inline-block;color:var(--ds-textColor-link);text-decoration-line:none}.ds-link__owcjsm--standalone.sc-ds-link:hover,.ds-link__owcjsm--standalone.sc-ds-link:active{text-decoration-line:underline}.ds-link__owcjsm--standalone.sc-ds-link:focus-visible,.ds-link__owcjsm--standalone.sc-ds-link:visited{color:var(--ds-textColor-link)}.ds-link__owcjsm--standalone.sc-ds-link:active{color:var(--ds-textColor-link-active)}.ds-link__owcjsm--standalone.sc-ds-link:hover{color:var(--ds-textColor-link-hover)}.ds-link__owcjsm--colour-white.sc-ds-link{color:var(--ds-textColor-white)}.ds-link__owcjsm--colour-white.sc-ds-link:hover,.ds-link__owcjsm--colour-white.sc-ds-link:active,.ds-link__owcjsm--colour-white.sc-ds-link:visited,.ds-link__owcjsm--colour-white.sc-ds-link:focus-visible{color:var(--ds-textColor-white)}.ds-link__owcjsm--colour-black.sc-ds-link{color:var(--ds-textColor-default)}.ds-link__owcjsm--colour-black.sc-ds-link:hover,.ds-link__owcjsm--colour-black.sc-ds-link:active,.ds-link__owcjsm--colour-black.sc-ds-link:visited,.ds-link__owcjsm--colour-black.sc-ds-link:focus-visible{color:var(--ds-textColor-default)}`;
 
 const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
 const linkIconSizeMap = {
@@ -118,7 +118,7 @@ const DsLink = class extends index.Mixin(componentFactory.componentFactory('ds-l
         const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
-        return (index.h(this.dsTag, { key: 'a708eab4b62cc2f734208f4d96977d1e140243af', ref: el => (this.linkRef = el), class: classes, ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, index.h("slot", { key: 'adbed6efbcab1ae6161dc20e125e8e0e5cfe6d9b', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, index.h("slot", { key: '95e72ce1c53700b384e51101097550ba3cee3ff1', name: "suffix" }, this.renderSuffixIcon(baseClass)), linkUtils.opensInNewTab(this.dsTarget) && (index.h(DsVisuallyHidden, { key: '4cb8316e39d5357150aa31fcf7fc24862b058d4f', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, linkUtils.visuallyHiddenAssistiveText()))));
+        return (index.h(this.dsTag, { key: '7cb39dfc5bb57ef6bcabc4e7a0f1815edd15bc3b', ref: el => (this.linkRef = el), class: classes, ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, index.h("slot", { key: '630bd0be06599e988a4fc9155eb466df967a3cbd', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, index.h("slot", { key: '878a0915db6a6d491a3ddfc21ddcf1e31d41fae8', name: "suffix" }, this.renderSuffixIcon(baseClass)), linkUtils.opensInNewTab(this.dsTarget) && (index.h(DsVisuallyHidden, { key: '2041fdc422f07be45a74ed153705f831249f55ea', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, linkUtils.visuallyHiddenAssistiveText()))));
     }
     static get watchers() { return {
         "dsTarget": [{

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

@@ -1,16 +1,43 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-uuGgi31h.js');
-var utils = require('./utils-D94MuKO1.js');
+var cx = require('./cx-BS6nqACL.js');
+var utils = require('./utils-DWrHry7C.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var store = require('./store-Dse4EhGQ.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
+var componentFactory = require('./componentFactory-izBTCdjj.js');
+var store = require('./store-C9xOI2Br.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[store.getLanguage()] ?? fallback;
+}
 
-const DsMedia = class extends index.Mixin(componentFactory.componentFactory('ds-media')) {
+const dsMediaCss = () => `.ds-media__owcjsm{position:relative;width:100%;height:auto;margin:0;padding:0}.ds-media__owcjsm__media-wrapper{position:relative;width:100%;height:auto;overflow:hidden;background-color:var(--ds-palette-black-05)}.ds-media__owcjsm__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__owcjsm__image,.ds-media__owcjsm__video,.ds-media__owcjsm__youtube,.ds-media__owcjsm__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__owcjsm__youtube,.ds-media__owcjsm__iframe{border:none;object-fit:initial}.ds-media__owcjsm__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}.ds-media__owcjsm--loading .ds-media__owcjsm__media-wrapper{aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__owcjsm--loading .ds-media__owcjsm__image,.ds-media__owcjsm--loading .ds-media__owcjsm__video,.ds-media__owcjsm--loading .ds-media__owcjsm__youtube,.ds-media__owcjsm--loading .ds-media__owcjsm__iframe{opacity:0}.ds-media__owcjsm--error .ds-media__owcjsm__media-wrapper{aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__owcjsm--error .ds-media__owcjsm__image,.ds-media__owcjsm--error .ds-media__owcjsm__video,.ds-media__owcjsm--error .ds-media__owcjsm__youtube,.ds-media__owcjsm--error .ds-media__owcjsm__iframe{display:none}.ds-media__owcjsm--error .ds-media__owcjsm__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__owcjsm--error .ds-media__owcjsm__error-text{font-size:var(--ds-fontSize-14);font-weight:500;line-height:var(--ds-lineHeight-large)}.ds-media__owcjsm--image .ds-media__owcjsm__image{transition:opacity 0.3s ease}.ds-media__owcjsm--video .ds-media__owcjsm__video{transition:opacity 0.3s ease}.ds-media__owcjsm--youtube .ds-media__owcjsm__youtube{transition:opacity 0.3s ease}.ds-media__owcjsm--iframe .ds-media__owcjsm__iframe{transition:opacity 0.3s ease}.ds-media__owcjsm--fluid{width:100%;height:100%}.ds-media__owcjsm--fluid .ds-media__owcjsm__media-wrapper{height:100%}.ds-media__owcjsm--fluid .ds-media__owcjsm__image,.ds-media__owcjsm--fluid .ds-media__owcjsm__video,.ds-media__owcjsm--fluid .ds-media__owcjsm__youtube,.ds-media__owcjsm--fluid .ds-media__owcjsm__iframe{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.ds-media__owcjsm .ds-media__owcjsm__media-wrapper{border-radius:2px}.ds-media__owcjsm .ds-media__owcjsm__error-text{font-size:var(--ds-fontSize-12)}}`;
+
+const DsMedia = class extends index.Mixin(componentFactory.componentFactory('ds-media', { stopRootTracking: true })) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -25,20 +52,30 @@ const DsMedia = class extends index.Mixin(componentFactory.componentFactory('ds-
     dsAutoplay = false;
     dsLoop = false;
     dsMuted = true;
+    dsControls = true;
     dsUseLazy = true;
     dsAspectRatio = '';
     dsFluid = false;
+    dsCaptionText;
+    dsSrcset;
+    dsSizes;
     get el() { return index.getElement(this); }
     isLoading = true;
     hasError = false;
     errorMessage = '';
     dsLoad;
     dsError;
+    get baseClass() {
+        return cx.cx('ds-media');
+    }
+    get strings() {
+        return getDsMediaStrings();
+    }
     componentWillLoad() {
-        this.inheritedAttributes = {
-            ...attributes.inheritAttributes(this, this.el),
-            ...attributes.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();
@@ -48,56 +85,16 @@ const DsMedia = class extends index.Mixin(componentFactory.componentFactory('ds-
     }
     onTypeChange() {
         this.resetState();
-    }
-    get defaultLoadError() {
-        switch (store.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 (store.getLanguage()) {
-            case 'fi':
-                return 'Median lataus keskeytettiin';
-            case 'sv':
-                return 'Media laddning avbröts';
-            default:
-                return 'Media loading aborted';
-        }
-    }
-    get loadNetworkError() {
-        switch (store.getLanguage()) {
-            case 'fi':
-                return 'Verkkovirhe tapahtui';
-            case 'sv':
-                return 'Nätverksfel uppstod';
-            default:
-                return 'Network error occurred';
-        }
-    }
-    get loadDecodeError() {
-        switch (store.getLanguage()) {
-            case 'fi':
-                return 'Median dekoodaus epäonnistui';
-            case 'sv':
-                return 'Mediaavkodning misslyckades';
-            default:
-                return 'Media decoding failed';
-        }
-    }
-    get formatError() {
-        switch (store.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 = {
+            ...attributes.inheritAttributes(this, this.el),
+            ...attributes.inheritAriaAttributes(this.el, this.dsType === 'video' ? ['aria-label'] : []),
+        };
     }
     resetState() {
         this.isLoading = true;
@@ -112,21 +109,22 @@ const DsMedia = class extends index.Mixin(componentFactory.componentFactory('ds-
     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;
             }
         }
@@ -134,40 +132,37 @@ const DsMedia = class extends index.Mixin(componentFactory.componentFactory('ds-
         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 (index.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 (index.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 (index.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", ...utils.ifDefined('aria-label', this.dsAlt), ...this.inheritedAttributes }, "Your browser does not support the video tag."));
+        const baseClass = this.baseClass;
+        return (index.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', ...utils.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 (index.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 (index.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 index.h("iframe", { src: this.dsSrc, class: `${baseClass}__iframe`, title: this.dsAlt, onLoad: this.handleLoad, onError: this.handleError, ...this.inheritedAttributes });
     }
     renderLoadingState() {
         const DsSpinner = utils.transformTagName('ds-spinner', 'ds-media', this.el);
-        return index.h(DsSpinner, { dsSize: "2xLarge" });
+        return (index.h("div", { class: `${this.baseClass}__spinner` }, index.h(DsSpinner, { dsSize: "2xLarge" })));
     }
     renderErrorState() {
+        const baseClass = this.baseClass;
         const DsIcon = utils.transformTagName('ds-icon', 'ds-media', this.el);
-        return (index.h("div", { class: "ds-media__error", role: "alert", "aria-live": "polite" }, index.h(DsIcon, { dsName: "warning", dsSize: "2rem", dsColour: "ds-bgColor-danger-bold" }), index.h("span", { class: "ds-media__error-text" }, this.errorMessage)));
+        return (index.h("div", { class: `${baseClass}__error`, role: "alert", "aria-live": "polite" }, index.h(DsIcon, { dsName: "warning", dsSize: "2rem", dsColour: "ds-bgColor-danger-bold" }), index.h("span", { class: `${baseClass}__error-text` }, this.errorMessage)));
     }
     renderMedia() {
         switch (this.dsType) {
@@ -177,24 +172,30 @@ const DsMedia = class extends index.Mixin(componentFactory.componentFactory('ds-
                 return this.renderVideo();
             case 'youtube':
                 return this.renderYouTube();
+            case 'iframe':
+                return this.renderIframe();
             default:
                 return null;
         }
     }
+    renderCaption() {
+        if (!this.dsCaptionText)
+            return null;
+        return index.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.cx('ds-media');
-        return (index.h("div", { key: 'a4a54c00277784252977f41e7476f2b44a48d546', class: index$1.classNames(baseClass, {
+        const baseClass = this.baseClass;
+        return (index.h("figure", { key: 'e4e51d5286d8f405fc07ff94c0ab4cae960ccd88', class: index$1.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 } : {} }, index.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/cjs/ds-modal.cjs.entry.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-uuGgi31h.js');
-var utils$1 = require('./utils-D94MuKO1.js');
-var store = require('./store-Dse4EhGQ.js');
+var cx = require('./cx-BS6nqACL.js');
+var utils$1 = require('./utils-DWrHry7C.js');
+var store = require('./store-C9xOI2Br.js');
 var utils = require('./utils-Ctsvcil0.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
+var componentFactory = require('./componentFactory-izBTCdjj.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__owcjsm{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__owcjsm--open{overflow-y:auto}.ds-modal__owcjsm__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__owcjsm__positioner{justify-content:center;padding-block:var(--ds-spacing-small);margin-block:auto}}@media (min-width: 60rem){.ds-modal__owcjsm__positioner{padding-block:var(--ds-spacing-xLarge)}}.ds-modal__owcjsm__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__owcjsm__container{margin:auto;width:fit-content;max-width:calc(100vw - 2 * var(--ds-spacing-small))}}@media (min-width: 60rem){.ds-modal__owcjsm__container{max-width:calc(100vw - 2 * var(--ds-spacing-xLarge))}}.ds-modal__owcjsm__container--full{width:100%}@media (min-width: 30rem){.ds-modal__owcjsm__container--small{width:480px}.ds-modal__owcjsm__container--medium{width:640px}.ds-modal__owcjsm__container--large{width:800px}}.ds-modal__owcjsm__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__owcjsm__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__owcjsm__container--scrollable{max-height:calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));max-height:calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)))}}.ds-modal__owcjsm--open .ds-modal__owcjsm__container{scale:1;opacity:1;transform:translateY(0)}.ds-modal__owcjsm--in .ds-modal__owcjsm__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__owcjsm__container,.ds-modal__owcjsm--in .ds-modal__owcjsm__container{transition:none}}.ds-modal__owcjsm__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__owcjsm__header{padding-block:var(--ds-spacing-medium) var(--ds-spacing-small);padding-inline:var(--ds-spacing-medium)}}.ds-modal__owcjsm__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__owcjsm__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__owcjsm__header__heading{display:flex;gap:var(--ds-spacing-xSmall)}.ds-modal__owcjsm__header__heading__text{margin-block:var(--ds-spacing-4xSmall)}@media (min-width: 60rem){.ds-modal__owcjsm__header__heading__text{margin-block:calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}}.ds-modal__owcjsm__header__heading__icon{display:block;margin-block:var(--ds-spacing-4xSmall);margin-inline-end:var(--ds-spacing-3xSmall)}@media (min-width: 60rem){.ds-modal__owcjsm__header__heading__icon{margin-block:var(--ds-spacing-3xSmall)}}.ds-modal__owcjsm__header__close-button{margin-inline-start:auto}@media (min-width: 60rem){.ds-modal__owcjsm__header__close-button{margin-block:var(--ds-spacing-4xSmall)}}.ds-modal__owcjsm__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__owcjsm__content{position:relative;padding-inline:var(--ds-spacing-small);flex:1;min-height:0}@media (min-width: 30rem){.ds-modal__owcjsm__content{padding-inline:var(--ds-spacing-medium)}}.ds-modal__owcjsm__content--padded{padding-block-end:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__owcjsm__content--padded{padding-block-end:var(--ds-spacing-medium)}}.ds-modal__owcjsm__content--scrollable{overflow-y:auto;padding-block-end:unset}.ds-modal__owcjsm__content--scrollable__top-scrim,.ds-modal__owcjsm__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__owcjsm__content--scrollable__top-scrim--open,.ds-modal__owcjsm__content--scrollable__bottom-scrim--open{display:block}.ds-modal__owcjsm__content--scrollable__top-scrim{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__owcjsm__content--scrollable__bottom-scrim{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__owcjsm__content--scrollable:focus-visible .ds-modal__owcjsm__content--scrollable__top-scrim{top:var(--ds-borderWidth-thin)}.ds-modal__owcjsm__content--scrollable:focus-visible .ds-modal__owcjsm__content--scrollable__bottom-scrim{bottom:var(--ds-borderWidth-thin)}.ds-modal__owcjsm__footer{position:relative}.ds-modal__owcjsm__footer:not(:empty){display:flex;flex-direction:column;padding:var(--ds-spacing-small);gap:var(--ds-spacing-xSmall)}@media (min-width: 30rem){.ds-modal__owcjsm__footer:not(:empty){flex-direction:row;padding:var(--ds-spacing-medium);gap:var(--ds-spacing-small)}}.ds-modal__owcjsm__footer:not(:empty)+.ds-modal__owcjsm__content{border-block-end:0}.ds-modal__owcjsm__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 index.Mixin(componentFactory.componentFactory('ds-modal', { stopRootTracking: true })) {
     constructor(hostRef) {
@@ -218,11 +218,11 @@ const DsModal = class extends index.Mixin(componentFactory.componentFactory('ds-
         });
         const contentAriaLabel = this.dsScrollable ? this.contentScrollArea : undefined;
         const contentTabIndex = this.dsScrollable ? 0 : undefined;
-        return (index.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 }, index.h("div", { key: '5f6eacaafbea9542b036adf5f9a6b1f6438a5bc0', class: `${baseClass}__positioner` }, index.h("div", { key: 'c5149230b5cb7c31f3650a12b9c85f3fb3bed8a0', class: containerClasses, style: { '--ds-modal-transition-in-duration': `${utils$1.MODAL_TRANSITION_IN_DURATION}ms`, '--ds-modal-transition-out-duration': `${utils$1.MODAL_TRANSITION_OUT_DURATION}ms` } }, index.h("slot", { key: 'a879fd830a8cd2ed898af28ff29701f8eee4936b', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (index.h("div", { key: '2abef7e7a70f5cf0dc2929278c6f73e27e78aa3c', class: headerClasses }, this.dsHeadingText && (index.h("span", { key: '34e2821e019826b908210918c2d5c5e2c7c8a1f3', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (index.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 })), index.h("span", { key: 'a3b77daf74437d84f4dd1346a2dfdcd55842fd18', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (index.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 }))))), index.h("div", { key: '806de2042aaf8ab9eedbc9c6418f84b5d737db3d', ref: el => (this.contentRef = el), class: contentClasses, ...utils$1.ifDefined('aria-label', contentAriaLabel), ...utils$1.ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (index.h("div", { key: '6f4c8881745efdc222642ad91414b82d80c537fb', class: index$1.classNames(`${baseClass}__content--scrollable__top-scrim`, {
+        return (index.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 }, index.h("div", { key: 'b9e9259d7aa33542bdf96e1ba276ed47151de0f2', class: `${baseClass}__positioner` }, index.h("div", { key: '8c735f1c2172140e23b6c7ebac8db2ff3eebd58b', class: containerClasses, style: { '--ds-modal-transition-in-duration': `${utils$1.MODAL_TRANSITION_IN_DURATION}ms`, '--ds-modal-transition-out-duration': `${utils$1.MODAL_TRANSITION_OUT_DURATION}ms` } }, index.h("slot", { key: '2a2ac105c16055684e8c4887d57d674dbcc691eb', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (index.h("div", { key: 'cc388b665f36f1614d323aa264f736c273ca05ac', class: headerClasses }, this.dsHeadingText && (index.h("span", { key: '771a827000c9a7c005929c23021214f1db6c279d', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (index.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 })), index.h("span", { key: '2d5c7996b8559cd495991cb0a459ca28e293cc6a', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (index.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 }))))), index.h("div", { key: '47e06142d21b5286e9853e5a369a1761159e1a4e', ref: el => (this.contentRef = el), class: contentClasses, ...utils$1.ifDefined('aria-label', contentAriaLabel), ...utils$1.ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (index.h("div", { key: 'a5e145a50643d02dd801acb26e50a5486516e7f3', class: index$1.classNames(`${baseClass}__content--scrollable__top-scrim`, {
                 [`${baseClass}__content--scrollable__top-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atTop,
-            }), "aria-hidden": "true" })), index.h("slot", { key: '6561146e82a7a60b41c3975776d506f490388011', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (index.h("div", { key: '9461de8338172a11e2f70a871fb64d20f0c39a57', class: index$1.classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
+            }), "aria-hidden": "true" })), index.h("slot", { key: '45f6f1eecda2e9f1f8279ec0b3a274fcc187d9ab', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (index.h("div", { key: 'f5b6cb6fe2fed931d6540607807dcce3387f7c71', class: index$1.classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
                 [`${baseClass}__content--scrollable__bottom-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atBottom,
-            }), "aria-hidden": "true" }))), index.h("div", { key: '03c4038d7a3461e9595ad7993987dbd2e3529513', class: footerClasses }, index.h("slot", { key: '559da72c7e6aef4416e559769a0756d28718d4fd', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
+            }), "aria-hidden": "true" }))), index.h("div", { key: '4e62c73d5bf7b60205d999803708af9ec11538e5', class: footerClasses }, index.h("slot", { key: '68c2a8a0bd4be4a22ebe1cb728cabe3f1b5604c6', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
     }
     static get watchers() { return {
         "hasContentSlot": [{

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

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-uuGgi31h.js');
-var utils = require('./utils-D94MuKO1.js');
+var cx = require('./cx-BS6nqACL.js');
+var utils = require('./utils-DWrHry7C.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var store = require('./store-Dse4EhGQ.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-j82aBIxx.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
+var store = require('./store-C9xOI2Br.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-Os9dT7II.js');
+var componentFactory = require('./componentFactory-izBTCdjj.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__owcjsm.sc-ds-notification{padding:var(--ds-spacing-xSmall, 12px)}.ds-notification__owcjsm.ds-notification__owcjsm--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__owcjsm.ds-notification__owcjsm--neutral.sc-ds-notification .ds-notification__owcjsm__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__owcjsm.ds-notification__owcjsm--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__owcjsm.ds-notification__owcjsm--neutralWhite.sc-ds-notification .ds-notification__owcjsm__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__owcjsm.ds-notification__owcjsm--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__owcjsm.ds-notification__owcjsm--info.sc-ds-notification .ds-notification__owcjsm__icon.sc-ds-notification{color:var(--ds-iconColor-info);margin-bottom:auto}.ds-notification__owcjsm.ds-notification__owcjsm--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__owcjsm.ds-notification__owcjsm--success.sc-ds-notification .ds-notification__owcjsm__icon.sc-ds-notification{color:var(--ds-iconColor-success);margin-bottom:auto}.ds-notification__owcjsm.ds-notification__owcjsm--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__owcjsm.ds-notification__owcjsm--attention.sc-ds-notification .ds-notification__owcjsm__icon.sc-ds-notification{color:var(--ds-iconColor-attention);margin-bottom:auto}.ds-notification__owcjsm.ds-notification__owcjsm--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__owcjsm.ds-notification__owcjsm--danger.sc-ds-notification .ds-notification__owcjsm__icon.sc-ds-notification{color:var(--ds-iconColor-danger);margin-bottom:auto}.ds-notification__owcjsm__content.sc-ds-notification{display:flex;gap:var(--ds-spacing-2xSmall, 8px);max-width:1376px;margin:0 auto}.ds-notification__owcjsm__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__owcjsm__content__text__heading.sc-ds-notification,.ds-notification__owcjsm__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__owcjsm__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'];
@@ -159,7 +159,7 @@ const DsNotification = class extends index.Mixin(componentFactory.componentFacto
         const ariaLabelledby = this.dsAriaLabelledby ?? this.inheritedAttributes['aria-labelledby'] ?? this.ariaLabelledBy;
         const role = this.dsRole ?? this.inheritedAttributes['role'] ?? 'group';
         const restAttributes = utils.omit(this.inheritedAttributes, ['aria-labelledby', 'aria-label', 'role']);
-        return (index.h("div", { key: 'da7dc416b3544bf88c8e430f5096760d578d6b2e', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, index.h("div", { key: 'cc93c979d7ee7150d67e3a4694f1f21adcd66a33', class: contentClass }, index.h("div", { key: 'bf8403972e18bc332f5bf603b3396cf71af1c59c', class: `${baseClass}__icon ds-p-3xs` }, index.h(this.DsIcon, { key: '5a6ca762574fb8d030e9125d4359c98a846cc63d', dsName: this.icon })), index.h("div", { key: '247b10c7c31e21d5706f167115819d0e264ca8cd', class: textClass }, index.h("slot", { key: '832b560eba442d889d322ac1f0a6ad43f8545c8a', name: "heading" }, this.dsHeading && (index.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))), index.h("slot", { key: 'e1a1c1463b2975873fa48226469fcf1a33c542c4', name: "description" }, this.dsDescription && (index.h("div", { key: '13eb68395d4633806941ede2066d86c8c50d04d0', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), index.h("slot", { key: '9dada7c528e67bf965ddcae728d717440bc40484' })), this.dsDismissable && (index.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 }, index.h(this.DsVisuallyHidden, { key: '88c24043208db16829f651540ae1a232536990e4', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
+        return (index.h("div", { key: '7b14408450830b5684feaae5112bb6d5ebd14ad0', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, index.h("div", { key: '0b217857db9473deb8d4170dde2210c44678f564', class: contentClass }, index.h("div", { key: 'aa01e9f745e9e78816d5448cea369c917cd7e865', class: `${baseClass}__icon ds-p-3xs` }, index.h(this.DsIcon, { key: '055972a856b67cd4189ed9278fdf19c49726d808', dsName: this.icon })), index.h("div", { key: '04111ec788f7957075685cb0fd27a62b68ac88cb', class: textClass }, index.h("slot", { key: 'bde8bbc11c6d996264495c269a7e9fe53dd10b88', name: "heading" }, this.dsHeading && (index.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))), index.h("slot", { key: '7b3a7679882494b12385180faa7b0372a4e27639', name: "description" }, this.dsDescription && (index.h("div", { key: 'b3528bf1e150bd89ca1fdc65906303f7a0ac45fe', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), index.h("slot", { key: '96f57e85be28e720d2cbb3d8e9dfb70e6cc2c701' })), this.dsDismissable && (index.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 }, index.h(this.DsVisuallyHidden, { key: 'f9f222d9aab4de4a8fb68cad90c3c375434cd0d7', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
     }
     static get watchers() { return {
         "aria-label": [{