npm - @uh-design-system/component-library - Versions diffs - 1.7.0 → 1.7.1-rc.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2364) hide show

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

@@ -1,16 +1,16 @@
 'use strict';
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-DbNfxmvc.js');
 var utils = require('./utils-DWrHry7C.js');
-var linkFactory = require('./linkFactory-B6Qw3X_e.js');
-var cx = require('./cx-B24n8vFf.js');
-var linkUtils = require('./linkUtils-Cytg4FCq.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
-require('./store-BDEqiIFl.js');
+var linkFactory = require('./linkFactory-DJ1cbhHh.js');
+var cx = require('./cx-D4_fhK_D.js');
+var linkUtils = require('./linkUtils-Oqrvna3k.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
+require('./store-BDkw2fdF.js');
-const dsLinkLogoCss = () => `.ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}:host{display:inline-block}.ds-link-logo__pA2cRq{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-link-logo__pA2cRq: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__pA2cRq{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__pA2cRq:hover{color:var(--ds-bgColor-primary, #005a94)}@media (min-width: 60rem){.ds-link-logo__pA2cRq{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__0apwgA{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-link-logo__0apwgA: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__0apwgA{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__0apwgA:hover{color:var(--ds-bgColor-primary, #005a94)}@media (min-width: 60rem){.ds-link-logo__0apwgA{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) {
@@ -22,6 +22,7 @@ const DsLinkLogo = class extends index.Mixin(componentFactory.componentFactory('
     inheritedAttributes = {};
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     get el() { return index.getElement(this); }
+    dsId = this.getUniqueId();
     dsIcon;
     dsText;
     dsSize;
@@ -78,7 +79,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: '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()))));
+        return (index.h(this.dsTag, { key: 'cb0ca7a85679f8cda0d391984d304cadf0989fa0', part: "link", class: classes, id: this.dsId, ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, this.dsIcon && index.h(this.DsIcon, { key: '08dd3d9becdaacac5fb1fd6b645658b7abc9b33c', dsName: this.dsIcon, dsSize: "2rem", dsRole: "img" }), this.dsText, linkUtils.opensInNewTab(this.dsTarget) && (index.h(DsVisuallyHidden, { key: 'c5e7990df78a9863d6481a571af83a7e7734d022', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, linkUtils.visuallyHiddenAssistiveText()))));
     }
     static get watchers() { return {
         "aria-label": [{
@@ -89,7 +90,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__pA2cRq{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-tag__pA2cRq: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__pA2cRq: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__pA2cRq{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__pA2cRq.ds-tag__pA2cRq--default{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral)}.ds-tag__pA2cRq.ds-tag__pA2cRq--default:has(.ds-tag__pA2cRq__link:hover){background-color:var(--ds-bgColor-neutral-hover)}.ds-tag__pA2cRq.ds-tag__pA2cRq--default:has(.ds-tag__pA2cRq__link:active){background-color:var(--ds-bgColor-neutral-active)}.ds-tag__pA2cRq.ds-tag__pA2cRq--black{color:var(--ds-textColor-white);background-color:var(--ds-bgColor-black)}.ds-tag__pA2cRq.ds-tag__pA2cRq--black:has(.ds-tag__pA2cRq__link:hover){background-color:var(--ds-bgColor-black-hover)}.ds-tag__pA2cRq.ds-tag__pA2cRq--black:has(.ds-tag__pA2cRq__link:active){background-color:var(--ds-bgColor-black-active)}.ds-tag__pA2cRq.ds-tag__pA2cRq--white{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white)}.ds-tag__pA2cRq.ds-tag__pA2cRq--white:has(.ds-tag__pA2cRq__link:hover){background-color:var(--ds-bgColor-white-hover)}.ds-tag__pA2cRq.ds-tag__pA2cRq--white:has(.ds-tag__pA2cRq__link:active){background-color:var(--ds-bgColor-white-active)}.ds-tag__pA2cRq.ds-tag__pA2cRq--info{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info)}.ds-tag__pA2cRq.ds-tag__pA2cRq--info:has(.ds-tag__pA2cRq__link:hover){background-color:var(--ds-bgColor-info-hover)}.ds-tag__pA2cRq.ds-tag__pA2cRq--info:has(.ds-tag__pA2cRq__link:active){background-color:var(--ds-bgColor-info-active)}.ds-tag__pA2cRq.ds-tag__pA2cRq--danger{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger)}.ds-tag__pA2cRq.ds-tag__pA2cRq--danger:has(.ds-tag__pA2cRq__link:hover){background-color:var(--ds-bgColor-danger-hover)}.ds-tag__pA2cRq.ds-tag__pA2cRq--danger:has(.ds-tag__pA2cRq__link:active){background-color:var(--ds-bgColor-danger-active)}.ds-tag__pA2cRq.ds-tag__pA2cRq--attention{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention)}.ds-tag__pA2cRq.ds-tag__pA2cRq--attention:has(.ds-tag__pA2cRq__link:hover){background-color:var(--ds-bgColor-attention-hover)}.ds-tag__pA2cRq.ds-tag__pA2cRq--attention:has(.ds-tag__pA2cRq__link:active){background-color:var(--ds-bgColor-attention-active)}.ds-tag__pA2cRq.ds-tag__pA2cRq--success{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success)}.ds-tag__pA2cRq.ds-tag__pA2cRq--success:has(.ds-tag__pA2cRq__link:hover){background-color:var(--ds-bgColor-success-hover)}.ds-tag__pA2cRq.ds-tag__pA2cRq--success:has(.ds-tag__pA2cRq__link:active){background-color:var(--ds-bgColor-success-active)}.ds-tag__pA2cRq__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__pA2cRq__link{display:contents}.ds-tag__pA2cRq__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__0apwgA{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-tag__0apwgA: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__0apwgA: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__0apwgA{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__0apwgA.ds-tag__0apwgA--default{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral)}.ds-tag__0apwgA.ds-tag__0apwgA--default:has(.ds-tag__0apwgA__link:hover){background-color:var(--ds-bgColor-neutral-hover)}.ds-tag__0apwgA.ds-tag__0apwgA--default:has(.ds-tag__0apwgA__link:active){background-color:var(--ds-bgColor-neutral-active)}.ds-tag__0apwgA.ds-tag__0apwgA--black{color:var(--ds-textColor-white);background-color:var(--ds-bgColor-black)}.ds-tag__0apwgA.ds-tag__0apwgA--black:has(.ds-tag__0apwgA__link:hover){background-color:var(--ds-bgColor-black-hover)}.ds-tag__0apwgA.ds-tag__0apwgA--black:has(.ds-tag__0apwgA__link:active){background-color:var(--ds-bgColor-black-active)}.ds-tag__0apwgA.ds-tag__0apwgA--white{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white)}.ds-tag__0apwgA.ds-tag__0apwgA--white:has(.ds-tag__0apwgA__link:hover){background-color:var(--ds-bgColor-white-hover)}.ds-tag__0apwgA.ds-tag__0apwgA--white:has(.ds-tag__0apwgA__link:active){background-color:var(--ds-bgColor-white-active)}.ds-tag__0apwgA.ds-tag__0apwgA--info{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info)}.ds-tag__0apwgA.ds-tag__0apwgA--info:has(.ds-tag__0apwgA__link:hover){background-color:var(--ds-bgColor-info-hover)}.ds-tag__0apwgA.ds-tag__0apwgA--info:has(.ds-tag__0apwgA__link:active){background-color:var(--ds-bgColor-info-active)}.ds-tag__0apwgA.ds-tag__0apwgA--danger{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger)}.ds-tag__0apwgA.ds-tag__0apwgA--danger:has(.ds-tag__0apwgA__link:hover){background-color:var(--ds-bgColor-danger-hover)}.ds-tag__0apwgA.ds-tag__0apwgA--danger:has(.ds-tag__0apwgA__link:active){background-color:var(--ds-bgColor-danger-active)}.ds-tag__0apwgA.ds-tag__0apwgA--attention{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention)}.ds-tag__0apwgA.ds-tag__0apwgA--attention:has(.ds-tag__0apwgA__link:hover){background-color:var(--ds-bgColor-attention-hover)}.ds-tag__0apwgA.ds-tag__0apwgA--attention:has(.ds-tag__0apwgA__link:active){background-color:var(--ds-bgColor-attention-active)}.ds-tag__0apwgA.ds-tag__0apwgA--success{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success)}.ds-tag__0apwgA.ds-tag__0apwgA--success:has(.ds-tag__0apwgA__link:hover){background-color:var(--ds-bgColor-success-hover)}.ds-tag__0apwgA.ds-tag__0apwgA--success:has(.ds-tag__0apwgA__link:active){background-color:var(--ds-bgColor-success-active)}.ds-tag__0apwgA__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__0apwgA__link{display:contents}.ds-tag__0apwgA__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 +127,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: '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)));
+        return (index.h("div", { key: '1a684e8bebb0c023695d92db3fbea875c1a98f00', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, index.h("slot", { key: '5da2a18d12a98f13ec4de5fa76ab73d90eb0a411', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? index.h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), index.h("slot", { key: 'c13e72cb380b1b64d6abf74ead873d4920dc6eae' }, 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: 'f56d5721e8a4d4037394d782020a45006494c00a', 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 CHANGED Viewed

@@ -1,18 +1,18 @@
 'use strict';
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var linkUtils = require('./linkUtils-Cytg4FCq.js');
+var linkUtils = require('./linkUtils-Oqrvna3k.js');
 var utils = require('./utils-DWrHry7C.js');
-var linkFactory = require('./linkFactory-B6Qw3X_e.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-aTPCMCOZ.js');
-var cx = require('./cx-B24n8vFf.js');
+var linkFactory = require('./linkFactory-DJ1cbhHh.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-DI1JBS5D.js');
+var cx = require('./cx-D4_fhK_D.js');
 var utils$1 = require('./utils-Ctsvcil0.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
-require('./store-BDEqiIFl.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
+require('./store-BDkw2fdF.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__pA2cRq.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__pA2cRq.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__pA2cRq.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__pA2cRq.sc-ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__pA2cRq--full-width.sc-ds-link-with-arrow{width:100%;justify-content:space-between}.ds-link-with-arrow__pA2cRq__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__pA2cRq__icon.sc-ds-link-with-arrow{width:2.5rem;height:2.5rem}}.ds-link-with-arrow__pA2cRq__icon--start.sc-ds-link-with-arrow{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__pA2cRq__icon--end.sc-ds-link-with-arrow{margin-left:var(--ds-spacing-xSmall)}.ds-link-with-arrow__pA2cRq.sc-ds-link-with-arrow:hover,.ds-link-with-arrow__pA2cRq.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__pA2cRq.sc-ds-link-with-arrow:hover{cursor:pointer;color:var(--ds-textColor-link-hover)}.ds-link-with-arrow__pA2cRq.sc-ds-link-with-arrow:hover .ds-link-with-arrow__pA2cRq__icon.sc-ds-link-with-arrow{background-color:var(--ds-bgColor-primary-hover)}.ds-link-with-arrow__pA2cRq.sc-ds-link-with-arrow:active,.ds-link-with-arrow__pA2cRq.sc-ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}.ds-link-with-arrow__pA2cRq.sc-ds-link-with-arrow:active .ds-link-with-arrow__pA2cRq__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__0apwgA.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__0apwgA.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__0apwgA.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__0apwgA.sc-ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__0apwgA--full-width.sc-ds-link-with-arrow{width:100%;justify-content:space-between}.ds-link-with-arrow__0apwgA__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__0apwgA__icon.sc-ds-link-with-arrow{width:2.5rem;height:2.5rem}}.ds-link-with-arrow__0apwgA__icon--start.sc-ds-link-with-arrow{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__0apwgA__icon--end.sc-ds-link-with-arrow{margin-left:var(--ds-spacing-xSmall)}.ds-link-with-arrow__0apwgA.sc-ds-link-with-arrow:hover,.ds-link-with-arrow__0apwgA.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__0apwgA.sc-ds-link-with-arrow:hover{cursor:pointer;color:var(--ds-textColor-link-hover)}.ds-link-with-arrow__0apwgA.sc-ds-link-with-arrow:hover .ds-link-with-arrow__0apwgA__icon.sc-ds-link-with-arrow{background-color:var(--ds-bgColor-primary-hover)}.ds-link-with-arrow__0apwgA.sc-ds-link-with-arrow:active,.ds-link-with-arrow__0apwgA.sc-ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}.ds-link-with-arrow__0apwgA.sc-ds-link-with-arrow:active .ds-link-with-arrow__0apwgA__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) {
@@ -26,6 +26,7 @@ const DsLinkWithArrow = class extends index.Mixin(componentFactory.componentFact
     defaultIcon = 'arrow_forward';
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     get el() { return index.getElement(this); }
+    dsId = this.getUniqueId();
     dsText;
     dsIconPosition = 'start';
     dsTag = 'a';
@@ -86,7 +87,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: '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()))));
+        return (index.h(this.dsTag, { key: '969fd489a4a90f37a4b8e9c97f48114ddaa34244', class: classes, id: this.dsId, ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, index.h("slot", { key: '98791e9f547b20649805970204bf497bcb733ab8', name: "prefix" }, this.dsIconPosition === 'start' && index.h(DsIcon, { key: 'bb6f03409e2706a9ffc92356015b011a1b0cee40', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, index.h("slot", { key: 'b0c2cc79301cd7a38ab245b717c0e5edb1225fa6', name: "suffix" }, this.dsIconPosition === 'end' && index.h(DsIcon, { key: '15caee7cfcce6609aba5336e9c276c522a7f1d6c', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), linkUtils.opensInNewTab(this.dsTarget) && (index.h(DsVisuallyHidden, { key: '840971928b2e3d3255eef5f27a19b800dd71867a', 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 CHANGED Viewed

@@ -1,17 +1,17 @@
 'use strict';
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var linkUtils = require('./linkUtils-Cytg4FCq.js');
+var linkUtils = require('./linkUtils-Oqrvna3k.js');
 var utils = require('./utils-DWrHry7C.js');
-var linkFactory = require('./linkFactory-B6Qw3X_e.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-aTPCMCOZ.js');
-var cx = require('./cx-B24n8vFf.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
-require('./store-BDEqiIFl.js');
+var linkFactory = require('./linkFactory-DJ1cbhHh.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-DI1JBS5D.js');
+var cx = require('./cx-D4_fhK_D.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
+require('./store-BDkw2fdF.js');
-const dsLinkCss = () => `.ds-no-style-leak.sc-ds-link *.sc-ds-link{all:unset;box-sizing:border-box;display:block}.ds-link__pA2cRq.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__pA2cRq.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__pA2cRq.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__pA2cRq--semibold.sc-ds-link{font-weight:var(--ds-fontWeight-semibold)}.ds-link__pA2cRq--bold.sc-ds-link{font-weight:var(--ds-fontWeight-bold)}.ds-link__pA2cRq--2xLarge.sc-ds-link{font-size:var(--ds-fontSize-22)}.ds-link__pA2cRq--xLarge.sc-ds-link{font-size:var(--ds-fontSize-20)}.ds-link__pA2cRq--large.sc-ds-link{font-size:var(--ds-fontSize-18)}.ds-link__pA2cRq--medium.sc-ds-link{font-size:var(--ds-fontSize-16)}.ds-link__pA2cRq--small.sc-ds-link{font-size:var(--ds-fontSize-14)}.ds-link__pA2cRq--xSmall.sc-ds-link{font-size:var(--ds-fontSize-12)}.ds-link__pA2cRq__icon.sc-ds-link{display:inline-block;vertical-align:-0.125em}.ds-link__pA2cRq__icon--start-inline.sc-ds-link{margin-right:var(--ds-spacing-3xSmall)}.ds-link__pA2cRq__icon--start-standalone.sc-ds-link{margin-right:var(--ds-spacing-2xSmall)}.ds-link__pA2cRq__icon--end-inline.sc-ds-link{margin-left:var(--ds-spacing-3xSmall)}.ds-link__pA2cRq__icon--end-standalone.sc-ds-link{margin-left:var(--ds-spacing-2xSmall)}.ds-link__pA2cRq.sc-ds-link:hover,.ds-link__pA2cRq.sc-ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link__pA2cRq.sc-ds-link:hover{color:var(--ds-textColor-link-hover);cursor:pointer}.ds-link__pA2cRq.sc-ds-link:active{color:var(--ds-textColor-link-active)}.ds-link__pA2cRq.sc-ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link__pA2cRq--standalone.sc-ds-link{display:inline-block;color:var(--ds-textColor-link);text-decoration-line:none}.ds-link__pA2cRq--standalone.sc-ds-link:hover,.ds-link__pA2cRq--standalone.sc-ds-link:active{text-decoration-line:underline}.ds-link__pA2cRq--standalone.sc-ds-link:focus-visible,.ds-link__pA2cRq--standalone.sc-ds-link:visited{color:var(--ds-textColor-link)}.ds-link__pA2cRq--standalone.sc-ds-link:active{color:var(--ds-textColor-link-active)}.ds-link__pA2cRq--standalone.sc-ds-link:hover{color:var(--ds-textColor-link-hover)}.ds-link__pA2cRq--colour-white.sc-ds-link{color:var(--ds-textColor-white)}.ds-link__pA2cRq--colour-white.sc-ds-link:hover,.ds-link__pA2cRq--colour-white.sc-ds-link:active,.ds-link__pA2cRq--colour-white.sc-ds-link:visited,.ds-link__pA2cRq--colour-white.sc-ds-link:focus-visible{color:var(--ds-textColor-white)}.ds-link__pA2cRq--colour-black.sc-ds-link{color:var(--ds-textColor-default)}.ds-link__pA2cRq--colour-black.sc-ds-link:hover,.ds-link__pA2cRq--colour-black.sc-ds-link:active,.ds-link__pA2cRq--colour-black.sc-ds-link:visited,.ds-link__pA2cRq--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__0apwgA.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__0apwgA.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__0apwgA.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__0apwgA--semibold.sc-ds-link{font-weight:var(--ds-fontWeight-semibold)}.ds-link__0apwgA--bold.sc-ds-link{font-weight:var(--ds-fontWeight-bold)}.ds-link__0apwgA--2xLarge.sc-ds-link{font-size:var(--ds-fontSize-22)}.ds-link__0apwgA--xLarge.sc-ds-link{font-size:var(--ds-fontSize-20)}.ds-link__0apwgA--large.sc-ds-link{font-size:var(--ds-fontSize-18)}.ds-link__0apwgA--medium.sc-ds-link{font-size:var(--ds-fontSize-16)}.ds-link__0apwgA--small.sc-ds-link{font-size:var(--ds-fontSize-14)}.ds-link__0apwgA--xSmall.sc-ds-link{font-size:var(--ds-fontSize-12)}.ds-link__0apwgA__icon.sc-ds-link{display:inline-block;vertical-align:-0.125em}.ds-link__0apwgA__icon--start-inline.sc-ds-link{margin-right:var(--ds-spacing-3xSmall)}.ds-link__0apwgA__icon--start-standalone.sc-ds-link{margin-right:var(--ds-spacing-2xSmall)}.ds-link__0apwgA__icon--end-inline.sc-ds-link{margin-left:var(--ds-spacing-3xSmall)}.ds-link__0apwgA__icon--end-standalone.sc-ds-link{margin-left:var(--ds-spacing-2xSmall)}.ds-link__0apwgA.sc-ds-link:hover,.ds-link__0apwgA.sc-ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link__0apwgA.sc-ds-link:hover{color:var(--ds-textColor-link-hover);cursor:pointer}.ds-link__0apwgA.sc-ds-link:active{color:var(--ds-textColor-link-active)}.ds-link__0apwgA.sc-ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link__0apwgA--standalone.sc-ds-link{display:inline-block;color:var(--ds-textColor-link);text-decoration-line:none}.ds-link__0apwgA--standalone.sc-ds-link:hover,.ds-link__0apwgA--standalone.sc-ds-link:active{text-decoration-line:underline}.ds-link__0apwgA--standalone.sc-ds-link:focus-visible,.ds-link__0apwgA--standalone.sc-ds-link:visited{color:var(--ds-textColor-link)}.ds-link__0apwgA--standalone.sc-ds-link:active{color:var(--ds-textColor-link-active)}.ds-link__0apwgA--standalone.sc-ds-link:hover{color:var(--ds-textColor-link-hover)}.ds-link__0apwgA--colour-white.sc-ds-link{color:var(--ds-textColor-white)}.ds-link__0apwgA--colour-white.sc-ds-link:hover,.ds-link__0apwgA--colour-white.sc-ds-link:active,.ds-link__0apwgA--colour-white.sc-ds-link:visited,.ds-link__0apwgA--colour-white.sc-ds-link:focus-visible{color:var(--ds-textColor-white)}.ds-link__0apwgA--colour-black.sc-ds-link{color:var(--ds-textColor-default)}.ds-link__0apwgA--colour-black.sc-ds-link:hover,.ds-link__0apwgA--colour-black.sc-ds-link:active,.ds-link__0apwgA--colour-black.sc-ds-link:visited,.ds-link__0apwgA--colour-black.sc-ds-link:focus-visible{color:var(--ds-textColor-default)}`;
 const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
 const linkIconSizeMap = {
@@ -32,6 +32,7 @@ const DsLink = class extends index.Mixin(componentFactory.componentFactory('ds-l
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     get el() { return index.getElement(this); }
     linkRef;
+    dsId = this.getUniqueId();
     dsText;
     dsSize;
     dsVariant = 'inline';
@@ -118,7 +119,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: '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()))));
+        return (index.h(this.dsTag, { key: 'cbe0b698c4dc07c27a5234a8df2c186bc2d1b0c6', ref: el => (this.linkRef = el), class: classes, id: this.dsId, ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, index.h("slot", { key: '7cae380ec5cf8fff35824886fbc28733a3433f18', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass)), this.dsText, index.h("slot", { key: '262cb6fd01bffe21cdd86104626d1a5cfcfb8ab4', name: "suffix" }, this.renderSuffixIcon(baseClass)), linkUtils.opensInNewTab(this.dsTarget) && (index.h(DsVisuallyHidden, { key: 'b63a7f1aee43ae2e002dee25388660ecb04ed0d3', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, linkUtils.visuallyHiddenAssistiveText()))));
     }
     static get watchers() { return {
         "dsTarget": [{

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

@@ -1,12 +1,12 @@
 'use strict';
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-B24n8vFf.js');
+var cx = require('./cx-D4_fhK_D.js');
 var utils = require('./utils-DWrHry7C.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
-var store = require('./store-BDEqiIFl.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
+var store = require('./store-BDkw2fdF.js');
 const strings = {
     fi: {
@@ -35,7 +35,7 @@ function getDsMediaStrings() {
     return strings[store.getLanguage()] ?? fallback;
 }
-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 dsMediaCss = () => `.ds-media__0apwgA{position:relative;width:100%;height:auto;margin:0;padding:0}.ds-media__0apwgA__media-wrapper{position:relative;width:100%;height:auto;overflow:hidden;background-color:var(--ds-palette-black-05)}.ds-media__0apwgA__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__0apwgA__image,.ds-media__0apwgA__video,.ds-media__0apwgA__youtube,.ds-media__0apwgA__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__0apwgA__youtube,.ds-media__0apwgA__iframe{border:none;object-fit:initial}.ds-media__0apwgA__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}.ds-media__0apwgA--loading .ds-media__0apwgA__media-wrapper{aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__0apwgA--loading .ds-media__0apwgA__image,.ds-media__0apwgA--loading .ds-media__0apwgA__video,.ds-media__0apwgA--loading .ds-media__0apwgA__youtube,.ds-media__0apwgA--loading .ds-media__0apwgA__iframe{opacity:0}.ds-media__0apwgA--error .ds-media__0apwgA__media-wrapper{aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__0apwgA--error .ds-media__0apwgA__image,.ds-media__0apwgA--error .ds-media__0apwgA__video,.ds-media__0apwgA--error .ds-media__0apwgA__youtube,.ds-media__0apwgA--error .ds-media__0apwgA__iframe{display:none}.ds-media__0apwgA--error .ds-media__0apwgA__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__0apwgA--error .ds-media__0apwgA__error-text{font-size:var(--ds-fontSize-14);font-weight:500;line-height:var(--ds-lineHeight-large)}.ds-media__0apwgA--image .ds-media__0apwgA__image{transition:opacity 0.3s ease}.ds-media__0apwgA--video .ds-media__0apwgA__video{transition:opacity 0.3s ease}.ds-media__0apwgA--youtube .ds-media__0apwgA__youtube{transition:opacity 0.3s ease}.ds-media__0apwgA--iframe .ds-media__0apwgA__iframe{transition:opacity 0.3s ease}.ds-media__0apwgA--fluid{width:100%;height:100%}.ds-media__0apwgA--fluid .ds-media__0apwgA__media-wrapper{height:100%}.ds-media__0apwgA--fluid .ds-media__0apwgA__image,.ds-media__0apwgA--fluid .ds-media__0apwgA__video,.ds-media__0apwgA--fluid .ds-media__0apwgA__youtube,.ds-media__0apwgA--fluid .ds-media__0apwgA__iframe{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.ds-media__0apwgA .ds-media__0apwgA__media-wrapper{border-radius:2px}.ds-media__0apwgA .ds-media__0apwgA__error-text{font-size:var(--ds-fontSize-12)}}`;
 const DsMedia = class extends index.Mixin(componentFactory.componentFactory('ds-media', { stopRootTracking: true })) {
     constructor(hostRef) {
@@ -187,7 +187,7 @@ const DsMedia = class extends index.Mixin(componentFactory.componentFactory('ds-
         const aspectRatioParts = this.dsAspectRatio.split('/');
         const aspectRatioValue = aspectRatioParts.length === 2 ? `${aspectRatioParts[0]} / ${aspectRatioParts[1]}` : this.dsAspectRatio;
         const baseClass = this.baseClass;
-        return (index.h("figure", { key: 'e4e51d5286d8f405fc07ff94c0ab4cae960ccd88', class: index$1.classNames(baseClass, {
+        return (index.h("figure", { key: 'bc7a17603484a313612c5b6889c854a7d5055591', class: index$1.classNames(baseClass, {
                 [`${baseClass}--loading`]: this.isLoading,
                 [`${baseClass}--error`]: this.hasError,
                 [`${baseClass}--image`]: this.dsType === 'image',
@@ -195,7 +195,7 @@ const DsMedia = class extends index.Mixin(componentFactory.componentFactory('ds-
                 [`${baseClass}--youtube`]: this.dsType === 'youtube',
                 [`${baseClass}--iframe`]: this.dsType === 'iframe',
                 [`${baseClass}--fluid`]: this.dsFluid,
-            }), 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()));
+            }), style: aspectRatioValue ? { '--ds-media-aspect-ratio': aspectRatioValue } : {} }, index.h("div", { key: '983ec4e0dff00bd059a5173458563faba9999593', 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 CHANGED Viewed

@@ -1,14 +1,14 @@
 'use strict';
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-B24n8vFf.js');
+var cx = require('./cx-D4_fhK_D.js');
 var utils$1 = require('./utils-DWrHry7C.js');
-var store = require('./store-BDEqiIFl.js');
+var store = require('./store-BDkw2fdF.js');
 var utils = require('./utils-Ctsvcil0.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
-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 dsModalCss = () => `.ds-modal__0apwgA{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__0apwgA--open{overflow-y:auto}.ds-modal__0apwgA__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__0apwgA__positioner{justify-content:center;padding-block:var(--ds-spacing-small);margin-block:auto}}@media (min-width: 60rem){.ds-modal__0apwgA__positioner{padding-block:var(--ds-spacing-xLarge)}}.ds-modal__0apwgA__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__0apwgA__container{margin:auto;width:fit-content;max-width:calc(100vw - 2 * var(--ds-spacing-small))}}@media (min-width: 60rem){.ds-modal__0apwgA__container{max-width:calc(100vw - 2 * var(--ds-spacing-xLarge))}}.ds-modal__0apwgA__container--full{width:100%}@media (min-width: 30rem){.ds-modal__0apwgA__container--small{width:480px}.ds-modal__0apwgA__container--medium{width:640px}.ds-modal__0apwgA__container--large{width:800px}}.ds-modal__0apwgA__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__0apwgA__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__0apwgA__container--scrollable{max-height:calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));max-height:calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)))}}.ds-modal__0apwgA--open .ds-modal__0apwgA__container{scale:1;opacity:1;transform:translateY(0)}.ds-modal__0apwgA--in .ds-modal__0apwgA__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__0apwgA__container,.ds-modal__0apwgA--in .ds-modal__0apwgA__container{transition:none}}.ds-modal__0apwgA__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__0apwgA__header{padding-block:var(--ds-spacing-medium) var(--ds-spacing-small);padding-inline:var(--ds-spacing-medium)}}.ds-modal__0apwgA__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__0apwgA__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__0apwgA__header__heading{display:flex;gap:var(--ds-spacing-xSmall)}.ds-modal__0apwgA__header__heading__text{margin-block:var(--ds-spacing-4xSmall)}@media (min-width: 60rem){.ds-modal__0apwgA__header__heading__text{margin-block:calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}}.ds-modal__0apwgA__header__heading__icon{display:block;margin-block:var(--ds-spacing-4xSmall);margin-inline-end:var(--ds-spacing-3xSmall)}@media (min-width: 60rem){.ds-modal__0apwgA__header__heading__icon{margin-block:var(--ds-spacing-3xSmall)}}.ds-modal__0apwgA__header__close-button{margin-inline-start:auto}@media (min-width: 60rem){.ds-modal__0apwgA__header__close-button{margin-block:var(--ds-spacing-4xSmall)}}.ds-modal__0apwgA__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__0apwgA__content{position:relative;padding-inline:var(--ds-spacing-small);flex:1;min-height:0}@media (min-width: 30rem){.ds-modal__0apwgA__content{padding-inline:var(--ds-spacing-medium)}}.ds-modal__0apwgA__content--padded{padding-block-end:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__0apwgA__content--padded{padding-block-end:var(--ds-spacing-medium)}}.ds-modal__0apwgA__content--scrollable{overflow-y:auto;padding-block-end:unset}.ds-modal__0apwgA__content--scrollable__top-scrim,.ds-modal__0apwgA__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__0apwgA__content--scrollable__top-scrim--open,.ds-modal__0apwgA__content--scrollable__bottom-scrim--open{display:block}.ds-modal__0apwgA__content--scrollable__top-scrim{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__0apwgA__content--scrollable__bottom-scrim{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__0apwgA__content--scrollable:focus-visible .ds-modal__0apwgA__content--scrollable__top-scrim{top:var(--ds-borderWidth-thin)}.ds-modal__0apwgA__content--scrollable:focus-visible .ds-modal__0apwgA__content--scrollable__bottom-scrim{bottom:var(--ds-borderWidth-thin)}.ds-modal__0apwgA__footer{position:relative}.ds-modal__0apwgA__footer:not(:empty){display:flex;flex-direction:column;padding:var(--ds-spacing-small);gap:var(--ds-spacing-xSmall)}@media (min-width: 30rem){.ds-modal__0apwgA__footer:not(:empty){flex-direction:row;padding:var(--ds-spacing-medium);gap:var(--ds-spacing-small)}}.ds-modal__0apwgA__footer:not(:empty)+.ds-modal__0apwgA__content{border-block-end:0}.ds-modal__0apwgA__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: '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`, {
+        return (index.h(this.DsBackdrop, { key: '0efa4dc7e5b299275242e5c12f34ffbf98f44b0f', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, index.h("div", { key: 'ca4ce0f949b40552e01a52a61ca0de2d88f81942', class: `${baseClass}__positioner` }, index.h("div", { key: '1d637eca01a1f980ef5ea137bc45294d72d7d038', 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: '8c9df307762556e823fee2930d37effb7dcdc52e', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (index.h("div", { key: 'c49cb564d9578968e508d8dc601938fc5fde2c5d', class: headerClasses }, this.dsHeadingText && (index.h("span", { key: '9577b3325a8733ec3de2a58af84d9a268c2485cf', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (index.h(this.DsIcon, { key: 'f3167c552351acd906001d381758af3dcaa21e3c', 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: '95a63ff5f74501d60ba255a6993969a3f30f584a', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (index.h(this.DsButton, { key: '23778f6a4df24bcb2de162a3c07fc1583f16bf69', 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: 'eef6b285c82b16594dea4970d28984ab0ca25c7e', 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: '0c3704a1dfa48c5f8b144321f3b12eb6d5b78320', 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: '45f6f1eecda2e9f1f8279ec0b3a274fcc187d9ab', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (index.h("div", { key: 'f5b6cb6fe2fed931d6540607807dcce3387f7c71', class: index$1.classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
+            }), "aria-hidden": "true" })), index.h("slot", { key: '1fa869f21f601685548ac28c24218b68425dfbc3', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (index.h("div", { key: '66a8687589204dbacd76298fbb5ceaca27494687', 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: '4e62c73d5bf7b60205d999803708af9ec11538e5', class: footerClasses }, index.h("slot", { key: '68c2a8a0bd4be4a22ebe1cb728cabe3f1b5604c6', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
+            }), "aria-hidden": "true" }))), index.h("div", { key: '9cfa82dac02e514034ec049c71d7ffae8c755548', class: footerClasses }, index.h("slot", { key: '971ce428de30b4731a5a4805d82391d0b9d509ab', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
     }
     static get watchers() { return {
         "hasContentSlot": [{

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

@@ -1,15 +1,15 @@
 'use strict';
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-B24n8vFf.js');
+var cx = require('./cx-D4_fhK_D.js');
 var utils = require('./utils-DWrHry7C.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var store = require('./store-BDEqiIFl.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-aTPCMCOZ.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
+var store = require('./store-BDkw2fdF.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-DI1JBS5D.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
-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 dsNotificationCss = () => `.sc-ds-notification-h{display:block;width:100%}.ds-notification__0apwgA.sc-ds-notification{padding:var(--ds-spacing-xSmall, 12px)}.ds-notification__0apwgA.ds-notification__0apwgA--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__0apwgA.ds-notification__0apwgA--neutral.sc-ds-notification .ds-notification__0apwgA__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__0apwgA.ds-notification__0apwgA--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__0apwgA.ds-notification__0apwgA--neutralWhite.sc-ds-notification .ds-notification__0apwgA__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__0apwgA.ds-notification__0apwgA--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__0apwgA.ds-notification__0apwgA--info.sc-ds-notification .ds-notification__0apwgA__icon.sc-ds-notification{color:var(--ds-iconColor-info);margin-bottom:auto}.ds-notification__0apwgA.ds-notification__0apwgA--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__0apwgA.ds-notification__0apwgA--success.sc-ds-notification .ds-notification__0apwgA__icon.sc-ds-notification{color:var(--ds-iconColor-success);margin-bottom:auto}.ds-notification__0apwgA.ds-notification__0apwgA--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__0apwgA.ds-notification__0apwgA--attention.sc-ds-notification .ds-notification__0apwgA__icon.sc-ds-notification{color:var(--ds-iconColor-attention);margin-bottom:auto}.ds-notification__0apwgA.ds-notification__0apwgA--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__0apwgA.ds-notification__0apwgA--danger.sc-ds-notification .ds-notification__0apwgA__icon.sc-ds-notification{color:var(--ds-iconColor-danger);margin-bottom:auto}.ds-notification__0apwgA__content.sc-ds-notification{display:flex;gap:var(--ds-spacing-2xSmall, 8px);max-width:1376px;margin:0 auto}.ds-notification__0apwgA__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__0apwgA__content__text__heading.sc-ds-notification,.ds-notification__0apwgA__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__0apwgA__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: '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))))));
+        return (index.h("div", { key: 'bbdfb170d0710ad63eb2fd21ccdb95ad698b5452', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, index.h("div", { key: '52a0d213bf4a702855d04c5f9e54e94ecad35673', class: contentClass }, index.h("div", { key: '1d74a64cc5f8b663e085f357a0f465401caf759a', class: `${baseClass}__icon ds-p-3xs` }, index.h(this.DsIcon, { key: '2901731a99302d4aa4d75483720b83e549c7673b', dsName: this.icon })), index.h("div", { key: '1830540c52433c0ed837fa4953524e62dddb02a0', class: textClass }, index.h("slot", { key: '749a7637dfee626c682fc310205af5587911cf64', name: "heading" }, this.dsHeading && (index.h("div", { key: 'de0fa2d238ee27531c6373e77e3fa9a99f1ec476', 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: '7d18d70b3c4e05a2a2b4fd212eb01ebe06eb0de8', name: "description" }, this.dsDescription && (index.h("div", { key: '6213231054ff65669916a64d05037ed015733ff6', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), index.h("slot", { key: '05838a337c7f5506ac76d098b57ed2521a1b76f1' })), this.dsDismissable && (index.h(this.DsButton, { key: 'ab0d62abd9893dbaa0619b7c913693283346cf93', 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: '2cd7002ecac35dd97d012fd400de859e23d0ff0d', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
     }
     static get watchers() { return {
         "aria-label": [{

package/dist/cjs/ds-option_2.cjs.entry.js CHANGED Viewed

@@ -1,14 +1,14 @@
 'use strict';
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-DWrHry7C.js');
-var cx = require('./cx-B24n8vFf.js');
+var cx = require('./cx-D4_fhK_D.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
-require('./store-BDEqiIFl.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
+require('./store-BDkw2fdF.js');
-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 dsOptionCss = () => `.ds-option__0apwgA.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__0apwgA.sc-ds-option:not(.ds-option__0apwgA--multiple){justify-content:space-between}.ds-option__0apwgA--hidden.sc-ds-option{display:none}.ds-option__0apwgA--disabled.sc-ds-option{cursor:not-allowed;user-select:none;color:var(--ds-textColor-disabled-onLight)}.ds-option__0apwgA.sc-ds-option:hover:not(.ds-option__0apwgA--disabled){background-color:var(--ds-bgColor-white-hover)}.ds-option__0apwgA.sc-ds-option:active:not(.ds-option__0apwgA--disabled){background-color:var(--ds-bgColor-white-active)}.ds-option__0apwgA--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__0apwgA--active.ds-option__0apwgA--selected.sc-ds-option:not(.ds-option__0apwgA--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__0apwgA--multiple.ds-option__0apwgA--disabled.sc-ds-option{color:var(--ds-textColor-default)}.ds-option__0apwgA--multiple.sc-ds-option .ds-option__0apwgA__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__0apwgA--multiple.ds-option__0apwgA--disabled.sc-ds-option .ds-option__0apwgA__checkbox.sc-ds-option{border-color:var(--ds-borderColor-transparent);background-color:var(--ds-bgColor-disabled-onLight)}.ds-option__0apwgA--multiple.ds-option__0apwgA--disabled.sc-ds-option:not(.ds-option__0apwgA--selected) .ds-option__0apwgA__checkbox.sc-ds-option{border-color:var(--ds-borderColor-disabled-onLight)}.ds-option__0apwgA--selected.sc-ds-option .ds-option__0apwgA__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__0apwgA--selected.sc-ds-option:not(.ds-option__0apwgA--multiple){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option__0apwgA--selected.sc-ds-option:not(.ds-option__0apwgA--multiple).ds-option__0apwgA--disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-option__0apwgA--selected.sc-ds-option:not(.ds-option__0apwgA--multiple) .ds-option__0apwgA__description.sc-ds-option{color:var(--ds-textColor-white)}.ds-option__0apwgA--selected.sc-ds-option:not(.ds-option__0apwgA--multiple) .ds-option__0apwgA__check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option__0apwgA--selected.sc-ds-option:not(.ds-option__0apwgA--multiple).ds-option__0apwgA--disabled .ds-option__0apwgA__check-icon.sc-ds-option{color:var(--ds-textColor-disabled-onLight)}.ds-option__0apwgA--selected.sc-ds-option:not(.ds-option__0apwgA--multiple):hover:not(.ds-option__0apwgA--disabled){background-color:var(--ds-bgColor-primary-hover)}.ds-option__0apwgA--selected.sc-ds-option:not(.ds-option__0apwgA--multiple):active:not(.ds-option__0apwgA--disabled){background-color:var(--ds-bgColor-primary-active)}.ds-option__0apwgA__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__0apwgA__check-icon.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}.ds-option__0apwgA__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__0apwgA__description.sc-ds-option:not(:empty){display:block}`;
 const DsOption = class extends index.Mixin(componentFactory.componentFactory('ds-option')) {
     constructor(hostRef) {
@@ -106,13 +106,13 @@ const DsOption = class extends index.Mixin(componentFactory.componentFactory('ds
     render() {
         const baseClass = cx.cx('ds-option');
         const DsIcon = utils.transformTagName('ds-icon', 'ds-option', this.el);
-        return (index.h("div", { key: '06dbe206da0933ad0f7d0a9ef1254dcc4ffa5296', ref: el => (this.optionRef = el), id: this.dsId, class: index$1.classNames(baseClass, {
+        return (index.h("div", { key: '4a9f09f8fc5b43ece3d31c57d5e24a31b0c1494a', ref: el => (this.optionRef = el), id: this.dsId, class: index$1.classNames(baseClass, {
                 [`${baseClass}--multiple`]: this.isMultiple,
                 [`${baseClass}--active`]: this.dsActive,
                 [`${baseClass}--selected`]: this.dsSelected,
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex, ...this.inheritedAttributes }, this.isMultiple && (index.h("span", { key: '9fc824a92b03d862ca9864d929b3bbde03e3b8f8', class: `${baseClass}__checkbox` }, this.dsSelected && (index.h(DsIcon, { key: 'c730cf3926c677d744e7c25f023f941275144e79', class: `${baseClass}__checkbox__icon`, dsName: "check_small", dsSize: "1.25rem", dsColour: this.dsDisabled ? 'ds-textColor-disabled-onLight' : 'ds-textColor-white' })))), index.h("span", { key: '41f6a2ca4b9b8f79c2f0e5501312df1f8e178b7c' }, index.h("span", { key: 'f55053553a85fc167b43d5faac3680d3b448ec9d', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, index.h("slot", { key: '68321ee802967c5f229ca0effec568c1beb6aebb' }, this.dsLabel)), this.dsDescription && index.h("span", { key: 'a1f3fae6c54a820741fa44f3154e804edc269233', class: `${baseClass}__description` }, this.dsDescription)), !this.isMultiple && this.dsSelected && index.h(DsIcon, { key: 'dde7f1b47b5d92d2479c92b5d059b0424160e27c', dsName: "check", class: `${baseClass}__check-icon` })));
+            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex, ...this.inheritedAttributes }, this.isMultiple && (index.h("span", { key: '22a75398d91461f70e26f7815e6559515cd58b1c', class: `${baseClass}__checkbox` }, this.dsSelected && (index.h(DsIcon, { key: 'b5071297fbe1227ae87185fec1bf9eed955d9089', class: `${baseClass}__checkbox__icon`, dsName: "check_small", dsSize: "1.25rem", dsColour: this.dsDisabled ? 'ds-textColor-disabled-onLight' : 'ds-textColor-white' })))), index.h("span", { key: '1c391ebafe9a103695bef19ce71b3e6c010bc801' }, index.h("span", { key: '5bc808891633782f60b8a22c81a302e5d4abef6c', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, index.h("slot", { key: '9f8e051fd73727730c6ba87e1f26c96fdd6d4088' }, this.dsLabel)), this.dsDescription && index.h("span", { key: '29be0a35a517fe4aef303bbbd589836062c261eb', class: `${baseClass}__description` }, this.dsDescription)), !this.isMultiple && this.dsSelected && index.h(DsIcon, { key: 'a41d71f2d7e1c10ab87d2c79b2595f40daa64f82', dsName: "check", class: `${baseClass}__check-icon` })));
     }
     static get watchers() { return {
         "dsActive": [{
@@ -129,7 +129,7 @@ const DsOption = class extends index.Mixin(componentFactory.componentFactory('ds
 utils.declareComponentDependencies([index.h("ds-icon", { dsName: "" })]);
 DsOption.style = dsOptionCss();
-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 dsOptionGroupCss = () => `.ds-option-group__0apwgA.sc-ds-option-group{display:block;font-family:var(--ds-fontFamily-body)}.ds-option-group__0apwgA--hidden.sc-ds-option-group{display:none}.ds-option-group__0apwgA.sc-ds-option-group ul.sc-ds-option-group{padding:0}.ds-option-group__0apwgA__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__0apwgA__label__shadow.sc-ds-option-group{box-shadow:var(--ds-shadow-overflow)}`;
 const DsOptionGroup = class extends index.Mixin(componentFactory.componentFactory('ds-option-group')) {
     constructor(hostRef) {
@@ -164,9 +164,9 @@ const DsOptionGroup = class extends index.Mixin(componentFactory.componentFactor
     }
     render() {
         const baseClass = cx.cx('ds-option-group');
-        return (index.h("div", { key: '52223bab5fbf6ebc5f2704df1fd6d8d5d1ae9175', class: index$1.classNames(`${baseClass}`, {
+        return (index.h("div", { key: 'cb8a39b348628cc69fcc3e8c38e0058c41d202e8', class: index$1.classNames(`${baseClass}`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, index.h("div", { key: '7909f575ab855df82dac8957c46c42e14468e64c', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), index.h("slot", { key: '0102c6419e9cdbe821a284f573877673306c60e4' })));
+            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, index.h("div", { key: '253175c5064ec652da1f70919241c7792c3736b9', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), index.h("slot", { key: '3201be9059b13f94302a1263c8acfb3923937dee' })));
     }
 };
 DsOptionGroup.style = dsOptionGroupCss();

package/dist/cjs/ds-options-message.cjs.entry.js CHANGED Viewed

@@ -1,13 +1,13 @@
 'use strict';
-var index = require('./index-DNG8iA6h.js');
-var store = require('./store-BDEqiIFl.js');
-var controlUtils = require('./controlUtils-CuHQwicz.js');
+var index = require('./index-7cLzA8W5.js');
+var store = require('./store-BDkw2fdF.js');
+var controlUtils = require('./controlUtils-C1d8TGh2.js');
 var utils = require('./utils-DWrHry7C.js');
-var cx = require('./cx-B24n8vFf.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
+var cx = require('./cx-D4_fhK_D.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
-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 dsOptionsMessageCss = () => `.ds-options-message__0apwgA.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__0apwgA__error.sc-ds-options-message{color:var(--ds-textColor-danger);text-align:center}.ds-options-message__0apwgA__error__icon.sc-ds-options-message{display:inline-block}.ds-options-message__0apwgA__error__title.sc-ds-options-message,.ds-options-message__0apwgA__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__0apwgA__no-results__title.sc-ds-options-message{hyphens:auto}.ds-options-message__0apwgA__error__text.sc-ds-options-message,.ds-options-message__0apwgA__no-results__text.sc-ds-options-message{color:var(--ds-textColor-default);text-align:center;font-size:var(--ds-fontSize-16)}`;
 const defaultTextFns = {
     dsErrorTitle: controlUtils.weCouldNotLoadOptions,