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

package/dist/cjs/ds-radio-button-group.cjs.entry.js

@@ -1,18 +1,18 @@
 'use strict';
 
-var index = require('./index-BSwr4Ukh.js');
+var index = require('./index-BNOD57K-.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-DOIzXqfM.js');
+var utils = require('./utils-DMgbvnde.js');
 var disableEventsFactory = require('./disableEventsFactory-B1wvz4el.js');
 var attributes = require('./attributes-5eBKMo1N.js');
-var controlUtils = require('./controlUtils-BLiRltjz.js');
-var cx = require('./cx-D-SFhp5j.js');
-require('./store-X-DFw257.js');
+var controlUtils = require('./controlUtils-CcUudA6Q.js');
+var cx = require('./cx-Bz5Mpvyi.js');
+var componentFactory = require('./componentFactory-BmBVCz8f.js');
+require('./store-DNuNXgOq.js');
 
-const dsRadioButtonGroupCss = () => `.ds-radio-button-group__SPFJ1E{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-radio-button-group__SPFJ1E__radio-buttons-slot{display:inline-flex;flex-direction:column}.ds-radio-button-group__SPFJ1E__radio-buttons-slot--horizontal{flex-flow:row wrap;gap:var(--ds-spacing-small)}.ds-radio-button-group__SPFJ1E__legend{padding-inline:0;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-group__SPFJ1E__assistive-text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}`;
+const dsRadioButtonGroupCss = () => `.ds-radio-button-group__GqWYnG{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-radio-button-group__GqWYnG__radio-buttons-slot{display:inline-flex;flex-direction:column}.ds-radio-button-group__GqWYnG__radio-buttons-slot--horizontal{flex-flow:row wrap;gap:var(--ds-spacing-small)}.ds-radio-button-group__GqWYnG__legend{padding-inline:0;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-group__GqWYnG__assistive-text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}`;
 
-const radioButtonGroupIdGenerator = utils.idGenerator('ds-radio-button-group');
-const DsRadioButtonGroup = class extends index.Mixin(disableEventsFactory.disableEventsFactory) {
+const DsRadioButtonGroup = class extends index.Mixin(componentFactory.componentFactory('ds-radio-button-group'), disableEventsFactory.disableEventsFactory) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -29,10 +29,11 @@ const DsRadioButtonGroup = class extends index.Mixin(disableEventsFactory.disabl
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
     }
-    fieldsetId = radioButtonGroupIdGenerator.next().value;
-    legendId = `${this.fieldsetId}-legend`;
-    errorTextId = `${this.fieldsetId}-error`;
-    assistiveTextId = `${this.fieldsetId}-assistive-text`;
+    generatedId = this.getUniqueId();
+    fieldsetId = this.generatedId;
+    legendId = `${this.generatedId}-legend`;
+    errorTextId = `${this.generatedId}-error`;
+    assistiveTextId = `${this.generatedId}-assistive-text`;
     childBlurTimeout = null;
     inheritedAttributes = {};
     get el() { return index.getElement(this); }
@@ -123,7 +124,7 @@ const DsRadioButtonGroup = class extends index.Mixin(disableEventsFactory.disabl
         e.preventDefault();
         this.dsSubmitInvalid.emit({
             flag: 'customError',
-            message: this.internals?.validationMessage,
+            message: this.internals?.validationMessage ?? '',
         });
     };
     componentWillLoad() {
@@ -135,6 +136,7 @@ const DsRadioButtonGroup = class extends index.Mixin(disableEventsFactory.disabl
         this.setDisableEventEmits(true);
     }
     componentDidLoad() {
+        this.componentMounted();
         this.updateRadios((element, index) => {
             element.dsErrorsDisabled = true;
             if (index === 0 && this.dsErrorText) {
@@ -222,7 +224,7 @@ const DsRadioButtonGroup = class extends index.Mixin(disableEventsFactory.disabl
         }
         e.preventDefault();
         const currentIndex = radios.findIndex(r => r === targetRadio);
-        let nextIndex;
+        let nextIndex = currentIndex;
         if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
             nextIndex = currentIndex === 0 ? radios.length - 1 : currentIndex - 1;
         }
@@ -243,7 +245,7 @@ const DsRadioButtonGroup = class extends index.Mixin(disableEventsFactory.disabl
         });
         const errorClasses = index$1.classNames(`${baseClass}__error`);
         const DsInputValidity = utils.transformTagName('ds-input-validity', 'ds-radio-button-group', this.el);
-        return (index.h(index.Host, { key: 'bfc004f27594e8f9d7a35e591cd6f8f8d5ce20f4', "data-invalid": !!this.dsErrorText || undefined }, index.h("fieldset", { key: '2fc540ce180279ed112755593db055160a2126fd', class: classes, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, index.h("legend", { key: 'd4f408aa4697f93c98a2388fb34e27c92035ad5f', id: this.legendId, class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (index.h("small", { key: '11e343143059e91b42699e2d83c867bca2ba22a9', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), index.h("div", { key: 'f3f5c95b6969c35657638a435a855fcb4fc80617', class: radioButtonsSlotClasses }, index.h("slot", { key: '9ab636880f3cf6db34f2e0015c38e9f3a1644471', onSlotchange: this.updateFocusableRadioButton })), index.h("div", { key: '48d8c84ef7365d463a3b33e2b7cd55bc3c948aba', class: errorClasses }, index.h(DsInputValidity, { key: 'd7cc1919ac771a9a7f824ab2035e22909d1baced', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" })))));
+        return (index.h(index.Host, { key: 'f4d191fb9cb71cbc468df73b9582fb4963a27347', "data-invalid": !!this.dsErrorText || undefined }, index.h("fieldset", { key: '08016d961d7aa378bc9011dfb854106e4c2112da', id: this.fieldsetId, class: classes, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, index.h("legend", { key: 'a82ac21e813057b086592b23ed2efd70ad067a75', id: this.legendId, class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (index.h("small", { key: 'fb5acc27987c7828af9ec907b21caae0d76198a6', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), index.h("div", { key: '668fc0ad478aabfbbfda56222c02cb33b524d42d', class: radioButtonsSlotClasses }, index.h("slot", { key: '6109abe10a835a26bc2bacdfa75145e13c838b51', onSlotchange: this.updateFocusableRadioButton })), index.h("div", { key: '94b7d547a147bb56d8be383a6139c86f6ac23190', class: errorClasses }, index.h(DsInputValidity, { key: 'ecdc36ad097dfea556568a0508dffbfa2a4e6f08', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" })))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

package/dist/cjs/ds-radio-button.cjs.entry.js

@@ -1,19 +1,19 @@
 'use strict';
 
-var index = require('./index-BSwr4Ukh.js');
+var index = require('./index-BNOD57K-.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-5eBKMo1N.js');
-var controlUtils = require('./controlUtils-BLiRltjz.js');
-var utils = require('./utils-DOIzXqfM.js');
-var cx = require('./cx-D-SFhp5j.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-xH9mSaws.js');
+var controlUtils = require('./controlUtils-CcUudA6Q.js');
+var utils = require('./utils-DMgbvnde.js');
+var cx = require('./cx-Bz5Mpvyi.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-BkrxJQA9.js');
 var disableEventsFactory = require('./disableEventsFactory-B1wvz4el.js');
-require('./store-X-DFw257.js');
+var componentFactory = require('./componentFactory-BmBVCz8f.js');
+require('./store-DNuNXgOq.js');
 
-const dsRadioButtonCss = () => `.ds-radio-button__SPFJ1E.sc-ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-textColor-default)}.ds-radio-button__SPFJ1E--disabled.sc-ds-radio-button{color:var(--ds-textColor-disabled-onLight)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:has(input:focus-visible) .ds-radio-button__SPFJ1E__icon.sc-ds-radio-button{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-bgColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-bgColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 0.5)}.ds-radio-button__SPFJ1E__icon.sc-ds-radio-button{border-radius:50%;height:24px;width:24px;margin:10px 10px 10px 0}.ds-radio-button__SPFJ1E__text.sc-ds-radio-button{margin-top:10px;padding-right:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white)}.ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-primary);fill:var(--ds-bgColor-white)}.ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-hover)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-bgColor-white)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-hover)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-active)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-bgColor-white)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-active)}.ds-radio-button__SPFJ1E--disabled.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__SPFJ1E--disabled.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__SPFJ1E--disabled.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-transparent-onLight-active)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__SPFJ1E-fieldset.sc-ds-radio-button{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button__SPFJ1E-fieldset__legend.sc-ds-radio-button{padding-inline:0;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button__SPFJ1E-fieldset__assistive-text.sc-ds-radio-button{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}`;
+const dsRadioButtonCss = () => `.ds-radio-button__GqWYnG.sc-ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-textColor-default)}.ds-radio-button__GqWYnG--disabled.sc-ds-radio-button{color:var(--ds-textColor-disabled-onLight)}.ds-radio-button__GqWYnG.sc-ds-radio-button:has(input:focus-visible) .ds-radio-button__GqWYnG__icon.sc-ds-radio-button{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-bgColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-bgColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 0.5)}.ds-radio-button__GqWYnG__icon.sc-ds-radio-button{border-radius:50%;height:24px;width:24px;margin:10px 10px 10px 0}.ds-radio-button__GqWYnG__text.sc-ds-radio-button{margin-top:10px;padding-right:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-radio-button__GqWYnG__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white)}.ds-radio-button__GqWYnG__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-primary);fill:var(--ds-bgColor-white)}.ds-radio-button__GqWYnG__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary)}.ds-radio-button__GqWYnG.sc-ds-radio-button:hover:not(.ds-radio-button__GqWYnG--disabled):not(.ds-radio-button__GqWYnG--invalid) .ds-radio-button__GqWYnG__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-hover)}.ds-radio-button__GqWYnG.sc-ds-radio-button:hover:not(.ds-radio-button__GqWYnG--disabled):not(.ds-radio-button__GqWYnG--invalid) .ds-radio-button__GqWYnG__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-bgColor-white)}.ds-radio-button__GqWYnG.sc-ds-radio-button:hover:not(.ds-radio-button__GqWYnG--disabled):not(.ds-radio-button__GqWYnG--invalid) .ds-radio-button__GqWYnG__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-hover)}.ds-radio-button__GqWYnG.sc-ds-radio-button:active:not(.ds-radio-button__GqWYnG--disabled):not(.ds-radio-button__GqWYnG--invalid) .ds-radio-button__GqWYnG__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-active)}.ds-radio-button__GqWYnG.sc-ds-radio-button:active:not(.ds-radio-button__GqWYnG--disabled):not(.ds-radio-button__GqWYnG--invalid) .ds-radio-button__GqWYnG__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-bgColor-white)}.ds-radio-button__GqWYnG.sc-ds-radio-button:active:not(.ds-radio-button__GqWYnG--disabled):not(.ds-radio-button__GqWYnG--invalid) .ds-radio-button__GqWYnG__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-active)}.ds-radio-button__GqWYnG--disabled.sc-ds-radio-button .ds-radio-button__GqWYnG__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__GqWYnG--disabled.sc-ds-radio-button .ds-radio-button__GqWYnG__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__GqWYnG--disabled.sc-ds-radio-button .ds-radio-button__GqWYnG__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-transparent-onLight-active)}.ds-radio-button__GqWYnG--invalid.sc-ds-radio-button .ds-radio-button__GqWYnG__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__GqWYnG--invalid.sc-ds-radio-button .ds-radio-button__GqWYnG__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__GqWYnG--invalid.sc-ds-radio-button .ds-radio-button__GqWYnG__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__GqWYnG--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__GqWYnG--disabled) .ds-radio-button__GqWYnG__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__GqWYnG--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__GqWYnG--disabled) .ds-radio-button__GqWYnG__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__GqWYnG--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__GqWYnG--disabled) .ds-radio-button__GqWYnG__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__GqWYnG--invalid.sc-ds-radio-button:active:not(.ds-radio-button__GqWYnG--disabled) .ds-radio-button__GqWYnG__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__GqWYnG--invalid.sc-ds-radio-button:active:not(.ds-radio-button__GqWYnG--disabled) .ds-radio-button__GqWYnG__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__GqWYnG--invalid.sc-ds-radio-button:active:not(.ds-radio-button__GqWYnG--disabled) .ds-radio-button__GqWYnG__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__GqWYnG-fieldset.sc-ds-radio-button{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button__GqWYnG-fieldset__legend.sc-ds-radio-button{padding-inline:0;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button__GqWYnG-fieldset__assistive-text.sc-ds-radio-button{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}`;
 
-const radioButtonIdGenerator = utils.idGenerator('ds-radio-button');
-const DsRadioButton = class extends index.Mixin(ariaDeprecationFactory.ariaDeprecationFactory, disableEventsFactory.disableEventsFactory) {
+const DsRadioButton = class extends index.Mixin(componentFactory.componentFactory('ds-radio-button'), ariaDeprecationFactory.ariaDeprecationFactory, disableEventsFactory.disableEventsFactory) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -37,7 +37,7 @@ const DsRadioButton = class extends index.Mixin(ariaDeprecationFactory.ariaDepre
     dsSubmitInvalid;
     dsValidity;
     dsForm;
-    dsId = radioButtonIdGenerator.next().value;
+    dsId = this.getUniqueId();
     _dsName = this.dsId;
     async setName(newValue) {
         this._dsName = this.radioGroup?.dsName || newValue || this._dsName;
@@ -112,6 +112,9 @@ const DsRadioButton = class extends index.Mixin(ariaDeprecationFactory.ariaDepre
         this.initialChecked = this.dsChecked;
         this.setDisableEventEmits(true);
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     formResetCallback() {
         this.dsErrorText = '';
         this.dsChecked = this.initialChecked;
@@ -212,7 +215,7 @@ const DsRadioButton = class extends index.Mixin(ariaDeprecationFactory.ariaDepre
         const ariaLabel = this.dsAriaLabel ?? attrAriaLabel;
         const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
         const ariaInvalid = this.dsErrorText ? 'true' : this.inheritedAttributes['aria-invalid'];
-        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { class: classes }, index.h(DsVisuallyHidden, null, index.h("input", { ref: ref => (this.inputElement = ref), type: "radio", class: inputClasses, id: this.dsId, name: this.dsName, form: this.dsForm, value: this.dsValue, disabled: this.dsDisabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, checked: this.dsChecked, tabIndex: tabindex, required: this.dsRequired, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, ...restAttributes })), this.renderRadioIcon(baseClass), index.h("span", { class: textClasses }, index.h("slot", null, this.dsText)))), !this.dsErrorsDisabled && (index.h("slot", { name: "validity" }, index.h("div", { class: `${baseClass}__validity` }, index.h(DsInputValidity, { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))))));
+        return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { class: classes }, index.h(DsVisuallyHidden, null, index.h("input", { ref: el => (this.inputElement = el), type: "radio", class: inputClasses, id: this.dsId, name: this.dsName, form: this.dsForm, value: this.dsValue, disabled: this.dsDisabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, checked: this.dsChecked, tabIndex: tabindex, required: this.dsRequired, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, ...restAttributes })), this.renderRadioIcon(baseClass), index.h("span", { class: textClasses }, index.h("slot", null, this.dsText)))), !this.dsErrorsDisabled && (index.h("slot", { name: "validity" }, index.h("div", { class: `${baseClass}__validity` }, index.h(DsInputValidity, { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))))));
     }
     renderFieldset(baseClass) {
         const fieldsetClasses = index$1.classNames(`${baseClass}-fieldset`);

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

@@ -1,13 +1,14 @@
 'use strict';
 
-var index = require('./index-BSwr4Ukh.js');
+var index = require('./index-BNOD57K-.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-5eBKMo1N.js');
-var utils = require('./utils-DOIzXqfM.js');
-var cx = require('./cx-D-SFhp5j.js');
-var linkUtils = require('./linkUtils-zwBNu10P.js');
-var store = require('./store-X-DFw257.js');
+var utils = require('./utils-DMgbvnde.js');
+var cx = require('./cx-Bz5Mpvyi.js');
+var linkUtils = require('./linkUtils-B2PIFB2p.js');
+var store = require('./store-DNuNXgOq.js');
 var data = require('./data-CZn97vqo.js');
+var componentFactory = require('./componentFactory-BmBVCz8f.js');
 
 const convertToRibbonLinks = (links, ribbonData, lang = 'en') => {
     return links.map(link => ({
@@ -45,11 +46,12 @@ class DataService {
     }
 }
 
-const dsRibbonCss = () => `.ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}:host{display:block;width:100%;border-bottom:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light, #ccc);background-color:var(--ds-bgColor-white, #fff);position:relative;z-index:1000}.ds-ribbon__SPFJ1E{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-ribbon__SPFJ1E__container{display:grid;grid-template-columns:8rem auto;align-items:center;justify-content:space-between;padding:0 var(--ds-spacing-small, 16px);max-width:120rem;margin:0 auto;height:3rem}@media (min-width: 30rem){.ds-ribbon__SPFJ1E__container{grid-template-columns:auto auto}}@media (min-width: 60rem){.ds-ribbon__SPFJ1E__container{grid-template-columns:145px auto;padding:0 var(--ds-spacing-large, 32px)}}@media (min-width: 75rem){.ds-ribbon__SPFJ1E__container{grid-template-columns:auto auto}}.ds-ribbon__SPFJ1E__branding{display:flex;align-items:center;flex-shrink:0}.ds-ribbon__SPFJ1E__mobile-toggle{display:block;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__SPFJ1E__mobile-toggle{display:none}}.ds-ribbon__SPFJ1E__drawer-backdrop{position:fixed;inset:0;background-color:var(--ds-overlay-black-00);grid-column-end:-1;opacity:0;z-index:-1;pointer-events:none}@media (min-width: 60rem){.ds-ribbon__SPFJ1E__drawer-backdrop{display:none}}.ds-ribbon__SPFJ1E--drawer-open .ds-ribbon__SPFJ1E__drawer-backdrop{cursor:pointer;pointer-events:auto}@media (min-width: 60rem){.ds-ribbon__SPFJ1E__drawer-backdrop{pointer-events:auto;z-index:1}.ds-ribbon__SPFJ1E__drawer-backdrop,.ds-ribbon__SPFJ1E--drawer-open .ds-ribbon__SPFJ1E__container .ds-ribbon__SPFJ1E__drawer-backdrop{position:static;background-color:unset;backdrop-filter:unset;opacity:1;transition:none}}.ds-ribbon__SPFJ1E--drawer-clicked .ds-ribbon__SPFJ1E__drawer-backdrop{transition:background-color 0.3s, opacity 0s 0.3s}.ds-ribbon__SPFJ1E--drawer-open .ds-ribbon__SPFJ1E__drawer-backdrop{background-color:var(--ds-overlay-black-50);opacity:1;transition:background-color 0.1s 0.3s, opacity 0s 0s;z-index:999}.ds-ribbon__SPFJ1E__desktop-nav{display:none;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__SPFJ1E__desktop-nav{display:block}}.ds-ribbon__SPFJ1E__desktop-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;gap:var(--ds-spacing-medium, 24px);align-items:center}.ds-ribbon__SPFJ1E__desktop-link-item{display:flex;align-items:center;position:relative;text-transform:uppercase;height:var(--ds-spacing-2xLarge, 3rem)}.ds-ribbon__SPFJ1E__desktop-link{font-size:var(--ds-fontSize-12);white-space:nowrap}.ds-ribbon__SPFJ1E__desktop-badge{font-size:var(--ds-fontSize-12);letter-spacing:var(--ds-letterSpacing-wide, 0);margin-left:var(--ds-spacing-2xSmall, 8px);text-transform:none;position:absolute;top:0;right:100%}.ds-ribbon__SPFJ1E__desktop-badge>*{display:flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem;border-radius:1.25rem;padding:0 var(--ds-spacing-2xSmall, 0.5rem)}.ds-ribbon__SPFJ1E__desktop-badge>* span{font-size:var(--ds-fontSize-12);line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}.ds-ribbon__SPFJ1E__drawer{position:absolute;top:0;right:0;bottom:0;width:calc(100% - var(--ds-spacing-small, 16px));background-color:var(--ds-bgColor-white, #fff);box-shadow:var(--ds-shadow-medium);padding-top:0;transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto;cursor:default}@media (min-width: 60rem){.ds-ribbon__SPFJ1E__drawer{position:static;width:auto;max-width:none;background-color:transparent;box-shadow:none;padding-top:0;transform:none;transition:none;overflow-y:visible}}.ds-ribbon__SPFJ1E--drawer-open .ds-ribbon__SPFJ1E__drawer{transform:translateX(0%)}.ds-ribbon__SPFJ1E__drawer-header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;height:3rem;z-index:1;padding:var(--ds-spacing-small, 16px) var(--ds-spacing-medium, 24px);border-bottom:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light, #ccc);background-color:var(--ds-bgColor-white, #fff)}@media (min-width: 60rem){.ds-ribbon__SPFJ1E__drawer-header{display:none}}.ds-ribbon__SPFJ1E__drawer-branding{display:flex;align-items:center;flex-shrink:0;max-width:8rem}@media (min-width: 30rem){.ds-ribbon__SPFJ1E__drawer-branding{max-width:unset}}.ds-ribbon__SPFJ1E__drawer-close{flex-shrink:0;margin-left:var(--ds-spacing-small, 16px)}.ds-ribbon__SPFJ1E__drawer-nav{display:block;padding:var(--ds-spacing-medium, 24px);position:relative}@media (min-width: 60rem){.ds-ribbon__SPFJ1E__drawer-nav{padding:0}}.ds-ribbon__SPFJ1E__top-scrim,.ds-ribbon__SPFJ1E__bottom-scrim{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.ds-ribbon__SPFJ1E__top-scrim{top:3rem;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-ribbon__SPFJ1E__bottom-scrim{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.has-top-scrim .ds-ribbon__SPFJ1E__top-scrim{display:block}.has-bottom-scrim .ds-ribbon__SPFJ1E__bottom-scrim{display:block}.ds-ribbon__SPFJ1E__drawer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-spacing-4xSmall, 2px)}.ds-ribbon__SPFJ1E__drawer-link-item{display:flex;align-items:center;position:relative;text-transform:uppercase;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-color-border-subtle);height:var(--ds-spacing-2xLarge, 3rem)}.ds-ribbon__SPFJ1E__drawer-link-item:last-child{border-bottom:none}@media (min-width: 60rem){.ds-ribbon__SPFJ1E__drawer-link-item{justify-content:flex-start;padding:0;border-bottom:none}.ds-ribbon__SPFJ1E__drawer-link-item:last-child{border-bottom:none}}.ds-ribbon__SPFJ1E__drawer-link{font-size:var(--ds-fontSize-14, 0.875rem);white-space:nowrap}@media (min-width: 60rem){.ds-ribbon__SPFJ1E__drawer-link{font-size:var(--ds-fontSize-12, 0.75rem)}}.ds-ribbon__SPFJ1E__drawer-badge{font-size:var(--ds-fontSize-12);letter-spacing:var(--ds-letterSpacing-wide, 0);margin-left:var(--ds-spacing-2xSmall, 8px);text-transform:none}@media (min-width: 60rem){.ds-ribbon__SPFJ1E__drawer-badge{position:absolute;top:0;right:100%}}.ds-ribbon__SPFJ1E__drawer-badge>*{display:flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem;border-radius:1.25rem;padding:0 var(--ds-spacing-2xSmall, 0.5rem)}.ds-ribbon__SPFJ1E__drawer-badge>* span{font-size:inherit;line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}:host(.ds-ribbon__SPFJ1E--drawer-open) .ds-ribbon__SPFJ1E__drawer-backdrop{display:block}@media (min-width: 60rem){:host(.ds-ribbon__SPFJ1E--drawer-open) .ds-ribbon__SPFJ1E__drawer-backdrop{display:block}}:host(.ds-ribbon__SPFJ1E--drawer-open) .ds-ribbon__SPFJ1E__drawer{transform:translateX(0)}@media (min-width: 60rem){:host(.ds-ribbon__SPFJ1E--drawer-open) .ds-ribbon__SPFJ1E__drawer{transform:none}}`;
+const dsRibbonCss = () => `.ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}:host{display:block;width:100%;border-bottom:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light, #ccc);background-color:var(--ds-bgColor-white, #fff);position:relative;z-index:1000}.ds-ribbon__GqWYnG{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-ribbon__GqWYnG__container{display:grid;grid-template-columns:8rem auto;align-items:center;justify-content:space-between;padding:0 var(--ds-spacing-small, 16px);max-width:120rem;margin:0 auto;height:3rem}@media (min-width: 30rem){.ds-ribbon__GqWYnG__container{grid-template-columns:auto auto}}@media (min-width: 60rem){.ds-ribbon__GqWYnG__container{grid-template-columns:145px auto;padding:0 var(--ds-spacing-large, 32px)}}@media (min-width: 75rem){.ds-ribbon__GqWYnG__container{grid-template-columns:auto auto}}.ds-ribbon__GqWYnG__branding{display:flex;align-items:center;flex-shrink:0}.ds-ribbon__GqWYnG__mobile-toggle{display:block;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__GqWYnG__mobile-toggle{display:none}}.ds-ribbon__GqWYnG__drawer-backdrop{position:fixed;inset:0;background-color:var(--ds-overlay-black-00);grid-column-end:-1;opacity:0;z-index:-1;pointer-events:none}@media (min-width: 60rem){.ds-ribbon__GqWYnG__drawer-backdrop{display:none}}.ds-ribbon__GqWYnG--drawer-open .ds-ribbon__GqWYnG__drawer-backdrop{cursor:pointer;pointer-events:auto}@media (min-width: 60rem){.ds-ribbon__GqWYnG__drawer-backdrop{pointer-events:auto;z-index:1}.ds-ribbon__GqWYnG__drawer-backdrop,.ds-ribbon__GqWYnG--drawer-open .ds-ribbon__GqWYnG__container .ds-ribbon__GqWYnG__drawer-backdrop{position:static;background-color:unset;backdrop-filter:unset;opacity:1;transition:none}}.ds-ribbon__GqWYnG--drawer-clicked .ds-ribbon__GqWYnG__drawer-backdrop{transition:background-color 0.3s, opacity 0s 0.3s}.ds-ribbon__GqWYnG--drawer-open .ds-ribbon__GqWYnG__drawer-backdrop{background-color:var(--ds-overlay-black-50);opacity:1;transition:background-color 0.1s 0.3s, opacity 0s 0s;z-index:999}.ds-ribbon__GqWYnG__desktop-nav{display:none;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__GqWYnG__desktop-nav{display:block}}.ds-ribbon__GqWYnG__desktop-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;gap:var(--ds-spacing-medium, 24px);align-items:center}.ds-ribbon__GqWYnG__desktop-link-item{display:flex;align-items:center;position:relative;text-transform:uppercase;height:var(--ds-spacing-2xLarge, 3rem)}.ds-ribbon__GqWYnG__desktop-link{font-size:var(--ds-fontSize-12);white-space:nowrap}.ds-ribbon__GqWYnG__desktop-badge{font-size:var(--ds-fontSize-12);letter-spacing:var(--ds-letterSpacing-wide, 0);margin-left:var(--ds-spacing-2xSmall, 8px);text-transform:none;position:absolute;top:0;right:100%}.ds-ribbon__GqWYnG__desktop-badge>*{display:flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem;border-radius:1.25rem;padding:0 var(--ds-spacing-2xSmall, 0.5rem)}.ds-ribbon__GqWYnG__desktop-badge>* span{font-size:var(--ds-fontSize-12);line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}.ds-ribbon__GqWYnG__drawer{position:absolute;top:0;right:0;bottom:0;width:calc(100% - var(--ds-spacing-small, 16px));background-color:var(--ds-bgColor-white, #fff);box-shadow:var(--ds-shadow-medium);padding-top:0;transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto;cursor:default}@media (min-width: 60rem){.ds-ribbon__GqWYnG__drawer{position:static;width:auto;max-width:none;background-color:transparent;box-shadow:none;padding-top:0;transform:none;transition:none;overflow-y:visible}}.ds-ribbon__GqWYnG--drawer-open .ds-ribbon__GqWYnG__drawer{transform:translateX(0%)}.ds-ribbon__GqWYnG__drawer-header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;height:3rem;z-index:1;padding:var(--ds-spacing-small, 16px) var(--ds-spacing-medium, 24px);border-bottom:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light, #ccc);background-color:var(--ds-bgColor-white, #fff)}@media (min-width: 60rem){.ds-ribbon__GqWYnG__drawer-header{display:none}}.ds-ribbon__GqWYnG__drawer-branding{display:flex;align-items:center;flex-shrink:0;max-width:8rem}@media (min-width: 30rem){.ds-ribbon__GqWYnG__drawer-branding{max-width:unset}}.ds-ribbon__GqWYnG__drawer-close{flex-shrink:0;margin-left:var(--ds-spacing-small, 16px)}.ds-ribbon__GqWYnG__drawer-nav{display:block;padding:var(--ds-spacing-medium, 24px);position:relative}@media (min-width: 60rem){.ds-ribbon__GqWYnG__drawer-nav{padding:0}}.ds-ribbon__GqWYnG__top-scrim,.ds-ribbon__GqWYnG__bottom-scrim{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.ds-ribbon__GqWYnG__top-scrim{top:3rem;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-ribbon__GqWYnG__bottom-scrim{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.has-top-scrim .ds-ribbon__GqWYnG__top-scrim{display:block}.has-bottom-scrim .ds-ribbon__GqWYnG__bottom-scrim{display:block}.ds-ribbon__GqWYnG__drawer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-spacing-4xSmall, 2px)}.ds-ribbon__GqWYnG__drawer-link-item{display:flex;align-items:center;position:relative;text-transform:uppercase;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-color-border-subtle);height:var(--ds-spacing-2xLarge, 3rem)}.ds-ribbon__GqWYnG__drawer-link-item:last-child{border-bottom:none}@media (min-width: 60rem){.ds-ribbon__GqWYnG__drawer-link-item{justify-content:flex-start;padding:0;border-bottom:none}.ds-ribbon__GqWYnG__drawer-link-item:last-child{border-bottom:none}}.ds-ribbon__GqWYnG__drawer-link{font-size:var(--ds-fontSize-14, 0.875rem);white-space:nowrap}@media (min-width: 60rem){.ds-ribbon__GqWYnG__drawer-link{font-size:var(--ds-fontSize-12, 0.75rem)}}.ds-ribbon__GqWYnG__drawer-badge{font-size:var(--ds-fontSize-12);letter-spacing:var(--ds-letterSpacing-wide, 0);margin-left:var(--ds-spacing-2xSmall, 8px);text-transform:none}@media (min-width: 60rem){.ds-ribbon__GqWYnG__drawer-badge{position:absolute;top:0;right:100%}}.ds-ribbon__GqWYnG__drawer-badge>*{display:flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem;border-radius:1.25rem;padding:0 var(--ds-spacing-2xSmall, 0.5rem)}.ds-ribbon__GqWYnG__drawer-badge>* span{font-size:inherit;line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}:host(.ds-ribbon__GqWYnG--drawer-open) .ds-ribbon__GqWYnG__drawer-backdrop{display:block}@media (min-width: 60rem){:host(.ds-ribbon__GqWYnG--drawer-open) .ds-ribbon__GqWYnG__drawer-backdrop{display:block}}:host(.ds-ribbon__GqWYnG--drawer-open) .ds-ribbon__GqWYnG__drawer{transform:translateX(0)}@media (min-width: 60rem){:host(.ds-ribbon__GqWYnG--drawer-open) .ds-ribbon__GqWYnG__drawer{transform:none}}`;
 
 const fallbackRibbonData = data.appData.v1.ribbon;
-const DsRibbon = class {
+const DsRibbon = class extends index.Mixin(componentFactory.componentFactory('ds-ribbon')) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
         this.dsDrawerToggle = index.createEvent(this, "dsDrawerToggle", 7);
     }
@@ -122,16 +124,9 @@ const DsRibbon = class {
             ...attributes.inheritSpecifiedAttributes(this.el, ['lang']),
         };
     }
-    async componentDidLoad() {
-        this.lang = store.getLanguage();
-        this.setupStoreListener();
-        if (this.dsDataUrl && this.dsDataUrl.trim() !== '') {
-            await this.loadExternalData();
-        }
-    }
-    async loadExternalData() {
+    async loadExternalData(dataUrl) {
         try {
-            const data = await DataService.loadRibbonData(this.dsDataUrl);
+            const data = await DataService.loadRibbonData(dataUrl);
             if (!data)
                 throw new Error('No external data');
             this.loadedExternalData = data;
@@ -146,6 +141,14 @@ const DsRibbon = class {
             this.brandingUrls = this.loadedExternalData?.brandingUrls;
         }
     }
+    componentDidLoad() {
+        this.componentMounted();
+        this.lang = store.getLanguage();
+        this.setupStoreListener();
+        if (this.dsDataUrl && this.dsDataUrl.trim() !== '') {
+            this.loadExternalData(this.dsDataUrl);
+        }
+    }
     setupStoreListener() {
         this.storeUnsubscribe = store.onChange('language', newLanguage => {
             if (newLanguage && newLanguage !== this.lang) {
@@ -397,7 +400,7 @@ const DsRibbon = class {
             [`${baseClass}--drawer-open`]: this.isMobileDrawerOpen,
             [`${baseClass}--drawer-clicked`]: this.isMobileDrawerClicked,
         });
-        return (index.h("div", { key: '083f9b57e28d8eecbfae7e2030d64a93b1d06c7c', class: ribbonClasses }, index.h("nav", { key: 'e27bb14d0158c3338a9cee617cadd6d7a939f4c4', "aria-label": this.localizedNavAriaLabel, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, index.h("div", { key: 'dd069ba6a40bbd9e8019f63de6cd6a8c76c07427', class: `${baseClass}__container`, ...this.inheritedAttributes }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle())), this.renderMobileNavigation()));
+        return (index.h("div", { key: '8f7ee40a823225e28bdce30b3ad0b3eb0c643a3b', class: ribbonClasses }, index.h("nav", { key: '520936251bb36aa51c490915095076153943207f', "aria-label": this.localizedNavAriaLabel, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, index.h("div", { key: '652fd61e9baa53ae34b30cab8a9c1dbd14a1349d', class: `${baseClass}__container`, ...this.inheritedAttributes }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle())), this.renderMobileNavigation()));
     }
     static get watchers() { return {
         "dsIcon": [{

package/dist/cjs/ds-select-native.cjs.entry.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-BSwr4Ukh.js');
+var index = require('./index-BNOD57K-.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-DOIzXqfM.js');
+var utils = require('./utils-DMgbvnde.js');
 var attributes = require('./attributes-5eBKMo1N.js');
-var cx = require('./cx-D-SFhp5j.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-xH9mSaws.js');
-var controlUtils = require('./controlUtils-BLiRltjz.js');
-require('./store-X-DFw257.js');
+var cx = require('./cx-Bz5Mpvyi.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-BkrxJQA9.js');
+var controlUtils = require('./controlUtils-CcUudA6Q.js');
+require('./store-DNuNXgOq.js');
 
-const dsSelectNativeCss = () => `.sc-ds-select-native-h{display:inline-block;width:100%}@media (min-width: 30rem){:not(:has(.ds-select__SPFJ1E--full-width)).sc-ds-select-native-h{width:20rem}}.sc-ds-select-native-h>div.sc-ds-select-native{display:flex;flex-direction:column;position:relative}.ds-select__SPFJ1E-native.sc-ds-select-native,.ds-select__SPFJ1E-custom.sc-ds-select-native{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select__SPFJ1E-native__dropdown-icon.sc-ds-select-native,.ds-select__SPFJ1E-custom__dropdown-icon.sc-ds-select-native{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__SPFJ1E-custom-wrapper.sc-ds-select-native{position:relative}.ds-select__SPFJ1E-custom.sc-ds-select-native .ds-options__SPFJ1E.sc-ds-select-native{display:block}.ds-select__SPFJ1E-custom-input-container.sc-ds-select-native{display:flex;position:relative}.ds-select__SPFJ1E-custom-input-container.sc-ds-select-native:has(.ds-select__SPFJ1E-custom__clear-button:hover) .ds-select__SPFJ1E-custom.sc-ds-select-native{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__SPFJ1E-custom.sc-ds-select-native:not(.ds-select__SPFJ1E-custom--open,.ds-select__SPFJ1E-custom--invalid.sc-ds-select-native,.ds-select__SPFJ1E-custom--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__SPFJ1E-custom.sc-ds-select-native:active:not(.ds-select__SPFJ1E-custom--open,.ds-select__SPFJ1E-custom--invalid.sc-ds-select-native,.ds-select__SPFJ1E-custom--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__SPFJ1E-custom--open.sc-ds-select-native,.ds-select__SPFJ1E-custom.sc-ds-select-native: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-select__SPFJ1E-custom--open.sc-ds-select-native:not(.ds-select__SPFJ1E-custom--open--invalid,.ds-select__SPFJ1E-custom.sc-ds-select-native:focus-visible--invalid),.ds-select__SPFJ1E-custom.sc-ds-select-native:focus-visible:not(.ds-select__SPFJ1E-custom--open--invalid,.ds-select__SPFJ1E-custom.sc-ds-select-native:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__SPFJ1E-custom--disabled.sc-ds-select-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-select__SPFJ1E-custom--disabled.sc-ds-select-native .ds-select__SPFJ1E-custom__dropdown-icon.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__SPFJ1E-custom--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__SPFJ1E-custom--invalid.sc-ds-select-native:not(.ds-select__SPFJ1E-custom--invalid--open,.ds-select__SPFJ1E-custom--invalid--disabled).sc-ds-select-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__SPFJ1E-custom--invalid.sc-ds-select-native:not(.ds-select__SPFJ1E-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__SPFJ1E-custom__dropdown-icon--has-clear-button.sc-ds-select-native{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__SPFJ1E-custom__selected-option.sc-ds-select-native{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-xSmall)}.ds-select__SPFJ1E-custom--has-icon.sc-ds-select-native .ds-select__SPFJ1E-custom__selected-option.sc-ds-select-native{padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-2xSmall)}.ds-select__SPFJ1E-custom__selected-option__placeholder-icon.sc-ds-select-native{font-size:var(--ds-fontSize-16)}.ds-select__SPFJ1E-custom__selected-option__text.sc-ds-select-native{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;color:var(--ds-textColor-default)}.ds-select__SPFJ1E-custom__selected-option__text--none-selected.sc-ds-select-native{color:var(--ds-textColor-secondary)}.ds-select__SPFJ1E-custom__selected-option__text--disabled.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight)}.ds-select__SPFJ1E-custom.sc-ds-select-native input.sc-ds-select-native{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__SPFJ1E-custom.sc-ds-select-native input.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__SPFJ1E-custom.sc-ds-select-native input.sc-ds-select-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__SPFJ1E-custom.sc-ds-select-native input.sc-ds-select-native:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__SPFJ1E-custom.sc-ds-select-native input.sc-ds-select-native:focus{outline:none}.ds-select__SPFJ1E-custom__clear-button.sc-ds-select-native{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__SPFJ1E-custom__badge-container.sc-ds-select-native{position:absolute;z-index:2;pointer-events:none;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);padding:10px 0}.ds-select__SPFJ1E-custom__options-container.sc-ds-select-native{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__SPFJ1E-custom__options-container--open.sc-ds-select-native{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__SPFJ1E-custom__options-container__options.sc-ds-select-native{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__SPFJ1E-custom__options-container__options__inner.sc-ds-select-native{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim.sc-ds-select-native,.ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim--visible.sc-ds-select-native,.ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select-native{display:block}.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim.sc-ds-select-native{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim--dark.sc-ds-select-native{height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));background:none;margin-top:calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));box-shadow:0 -2px 7px var(--ds-overlay-black-50)}.ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__SPFJ1E-native.sc-ds-select-native:not(.ds-select__SPFJ1E-native--invalid,.ds-select__SPFJ1E-native--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__SPFJ1E-native.sc-ds-select-native:has(.ds-select__SPFJ1E-native__select:active):not(.ds-select__SPFJ1E-native--invalid,.ds-select__SPFJ1E-native--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__SPFJ1E-native.sc-ds-select-native: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-select__SPFJ1E-native--disabled.sc-ds-select-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-select__SPFJ1E-native--disabled.sc-ds-select-native .ds-select__SPFJ1E-native__dropdown-icon.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__SPFJ1E-native--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__SPFJ1E-native--invalid.sc-ds-select-native:not(.ds-select__SPFJ1E-native--invalid--disabled):has(.ds-select__SPFJ1E-native__select:active){background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__SPFJ1E-native--invalid.sc-ds-select-native:not(.ds-select__SPFJ1E-native--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__SPFJ1E-native__selected-text.sc-ds-select-native{flex:1;padding:0 var(--ds-spacing-xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-select__SPFJ1E-native__select.sc-ds-select-native{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;appearance:none;border:none;outline:none;padding:0 var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);background-color:transparent;color:inherit;flex:1}.ds-select__SPFJ1E-native__select.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__SPFJ1E-native__select.sc-ds-select-native:disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}`;
+const dsSelectNativeCss = () => `.sc-ds-select-native-h{display:inline-block;width:var(--ds-select-narrow-width, 100%)}@media (min-width: 30rem){:not(:has(.ds-select__GqWYnG--full-width)).sc-ds-select-native-h{width:var(--ds-select-wide-width, 20rem)}}.sc-ds-select-native-h>div.sc-ds-select-native{display:flex;flex-direction:column;position:relative}.ds-select__GqWYnG-native.sc-ds-select-native,.ds-select__GqWYnG-custom.sc-ds-select-native{position:relative;display:flex;align-items:center;border:var(--ds-select-borderWidth, var(--ds-borderWidth-thin)) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:var(--ds-select-height, 2.75rem);width:100%}.ds-select__GqWYnG-native__dropdown-icon.sc-ds-select-native,.ds-select__GqWYnG-custom__dropdown-icon.sc-ds-select-native{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-select-dropdown-icon-border-left, var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight));color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:var(--ds-select-dropdown-icon-padding, 0 var(--ds-spacing-2xSmall))}.ds-select__GqWYnG-custom-wrapper.sc-ds-select-native{position:relative}.ds-select__GqWYnG-custom.sc-ds-select-native .ds-options__GqWYnG.sc-ds-select-native{display:block}.ds-select__GqWYnG-custom-input-container.sc-ds-select-native{display:flex;position:relative}.ds-select__GqWYnG-custom-input-container.sc-ds-select-native:has(.ds-select__GqWYnG-custom__clear-button:hover) .ds-select__GqWYnG-custom.sc-ds-select-native{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__GqWYnG-custom.sc-ds-select-native:not(.ds-select__GqWYnG-custom--open,.ds-select__GqWYnG-custom--invalid.sc-ds-select-native,.ds-select__GqWYnG-custom--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__GqWYnG-custom.sc-ds-select-native:active:not(.ds-select__GqWYnG-custom--open,.ds-select__GqWYnG-custom--invalid.sc-ds-select-native,.ds-select__GqWYnG-custom--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__GqWYnG-custom--open.sc-ds-select-native,.ds-select__GqWYnG-custom.sc-ds-select-native: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-select__GqWYnG-custom--open.sc-ds-select-native:not(.ds-select__GqWYnG-custom--open--invalid,.ds-select__GqWYnG-custom.sc-ds-select-native:focus-visible--invalid),.ds-select__GqWYnG-custom.sc-ds-select-native:focus-visible:not(.ds-select__GqWYnG-custom--open--invalid,.ds-select__GqWYnG-custom.sc-ds-select-native:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__GqWYnG-custom--disabled.sc-ds-select-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-select__GqWYnG-custom--disabled.sc-ds-select-native .ds-select__GqWYnG-custom__dropdown-icon.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__GqWYnG-custom--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__GqWYnG-custom--invalid.sc-ds-select-native:not(.ds-select__GqWYnG-custom--invalid--open,.ds-select__GqWYnG-custom--invalid--disabled).sc-ds-select-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__GqWYnG-custom--invalid.sc-ds-select-native:not(.ds-select__GqWYnG-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__GqWYnG-custom__dropdown-icon--has-clear-button.sc-ds-select-native{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__GqWYnG-custom__selected-option.sc-ds-select-native{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-select-selected-option-font-size, var(--ds-fontSize-16));font-weight:var(--ds-select-selected-option-font-weight, var(--ds-fontWeight-regular));color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-select-selected-option-padding, var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px)));padding-right:var(--ds-select-selected-option-padding, var(--ds-spacing-xSmall))}.ds-select__GqWYnG-custom--has-icon.sc-ds-select-native .ds-select__GqWYnG-custom__selected-option.sc-ds-select-native{padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-2xSmall)}.ds-select__GqWYnG-custom__selected-option__placeholder-icon.sc-ds-select-native{font-size:var(--ds-fontSize-16)}.ds-select__GqWYnG-custom__selected-option__text.sc-ds-select-native{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;color:var(--ds-textColor-default)}.ds-select__GqWYnG-custom__selected-option__text--none-selected.sc-ds-select-native{color:var(--ds-textColor-secondary)}.ds-select__GqWYnG-custom__selected-option__text--disabled.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight)}.ds-select__GqWYnG-custom.sc-ds-select-native input.sc-ds-select-native{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__GqWYnG-custom.sc-ds-select-native input.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__GqWYnG-custom.sc-ds-select-native input.sc-ds-select-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__GqWYnG-custom.sc-ds-select-native input.sc-ds-select-native:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__GqWYnG-custom.sc-ds-select-native input.sc-ds-select-native:focus{outline:none}.ds-select__GqWYnG-custom__clear-button.sc-ds-select-native{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__GqWYnG-custom__badge-container.sc-ds-select-native{position:absolute;z-index:2;pointer-events:none;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);padding:10px 0}.ds-select__GqWYnG-custom__options-container.sc-ds-select-native{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__GqWYnG-custom__options-container--open.sc-ds-select-native{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__GqWYnG-custom__options-container__options.sc-ds-select-native{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__GqWYnG-custom__options-container__options__inner.sc-ds-select-native{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__GqWYnG-custom__options-container__options__inner__top-scrim.sc-ds-select-native,.ds-select__GqWYnG-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__GqWYnG-custom__options-container__options__inner__top-scrim--visible.sc-ds-select-native,.ds-select__GqWYnG-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select-native{display:block}.ds-select__GqWYnG-custom__options-container__options__inner__top-scrim.sc-ds-select-native{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__GqWYnG-custom__options-container__options__inner__top-scrim--dark.sc-ds-select-native{height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));background:none;margin-top:calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));box-shadow:0 -2px 7px var(--ds-overlay-black-50)}.ds-select__GqWYnG-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__GqWYnG-native.sc-ds-select-native:not(.ds-select__GqWYnG-native--invalid,.ds-select__GqWYnG-native--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__GqWYnG-native.sc-ds-select-native:has(.ds-select__GqWYnG-native__select:active):not(.ds-select__GqWYnG-native--invalid,.ds-select__GqWYnG-native--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__GqWYnG-native.sc-ds-select-native: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-select__GqWYnG-native--disabled.sc-ds-select-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-select__GqWYnG-native--disabled.sc-ds-select-native .ds-select__GqWYnG-native__dropdown-icon.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__GqWYnG-native--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__GqWYnG-native--invalid.sc-ds-select-native:not(.ds-select__GqWYnG-native--invalid--disabled):has(.ds-select__GqWYnG-native__select:active){background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__GqWYnG-native--invalid.sc-ds-select-native:not(.ds-select__GqWYnG-native--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__GqWYnG-native__dropdown-icon.sc-ds-select-native{color:var(--ds-select-selected-option-color, inherit)}.ds-select__GqWYnG-native__selected-text.sc-ds-select-native{flex:1;padding:0 var(--ds-select-selected-option-padding, var(--ds-spacing-xSmall));margin-right:var(--ds-select-selected-text-margin-right, 0);font-family:var(--ds-fontFamily-body);font-size:var(--ds-select-selected-option-font-size, var(--ds-fontSize-16));font-weight:var(--ds-select-selected-option-font-weight, var(--ds-fontWeight-regular));color:var(--ds-select-selected-option-color, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-select__GqWYnG-native__select.sc-ds-select-native{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;appearance:none;border:none;outline:none;padding:0 var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);background-color:transparent;color:inherit;flex:1}.ds-select__GqWYnG-native__select.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__GqWYnG-native__select.sc-ds-select-native:disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}`;
 
 const DsSelectNative = class extends index.Mixin(ariaDeprecationFactory.ariaDeprecationFactory) {
     constructor(hostRef) {
@@ -27,18 +27,22 @@ const DsSelectNative = class extends index.Mixin(ariaDeprecationFactory.ariaDepr
     dsValidity;
     dsSubmitInvalid;
     dsId;
-    dsLabel;
+    dsLabel = '';
     dsPlaceholder;
     dsValue;
-    dsIcon;
+    dsIcon = '';
+    dsIconSize;
     dsName;
     dsForm;
     dsDisabled = false;
     dsErrorText;
     dsFullWidth = false;
     dsRequired = false;
+    dsAriaLabel;
     value = '';
-    inputValidityId = `${this.dsId}-input-validity`;
+    get inputValidityId() {
+        return `${this.dsId}-input-validity`;
+    }
     nativeSelectRef;
     get DsInputValidityTag() {
         return utils.transformTagName('ds-input-validity', 'ds-select-native', this.el);
@@ -51,13 +55,13 @@ const DsSelectNative = class extends index.Mixin(ariaDeprecationFactory.ariaDepr
         this.value = this.dsValue || '';
         this.inheritedAttributes = {
             ...attributes.inheritAttributes(this, this.el),
-            ...attributes.inheritAriaAttributes(this.el, ['aria-controls']),
         };
     }
     componentDidLoad() {
         if (!this.nativeSelectRef)
             return;
-        this.nativeSelectRef.addEventListener('invalid', (e) => {
+        const selectRef = this.nativeSelectRef;
+        selectRef.addEventListener('invalid', (e) => {
             e.preventDefault();
             this.dsSubmitInvalid.emit({
                 flag: 'customError',
@@ -68,8 +72,8 @@ const DsSelectNative = class extends index.Mixin(ariaDeprecationFactory.ariaDepr
                 message: controlUtils.atLeastOneOption(),
             });
         });
-        this.nativeSelectRef.addEventListener('blur', () => {
-            const isValid = this.nativeSelectRef.validity.valid;
+        selectRef.addEventListener('blur', () => {
+            const isValid = selectRef.validity.valid;
             this.dsValidity.emit({
                 flag: isValid ? 'valid' : 'customError',
                 message: isValid ? '' : controlUtils.atLeastOneOption(),
@@ -103,22 +107,22 @@ const DsSelectNative = class extends index.Mixin(ariaDeprecationFactory.ariaDepr
         const baseClass = cx.cx('ds-select');
         const nativeSelectClass = `${baseClass}-native`;
         const DsControlLabel = utils.transformTagName('ds-control-label', 'ds-select-native', this.el);
-        const { ['aria-controls']: attrAriaControls, ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
+        const { ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
-        const ariaControls = this.dsAriaControls ?? attrAriaControls ?? `${this.dsId}-listbox`;
-        return (index.h("div", { key: 'a6151f2eb05db8596f5b2bf905bd3c86c6f037e2' }, index.h(DsControlLabel, { key: 'c7d3f6154dcefdb2bb6da5c1bf099b535aab047f', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, index.h("slot", { key: '3f23a69479ea9ecdb75779de2578c58ace1e0976', name: "label" })), index.h("div", { key: 'bde07705b0a3746c8651d1836ed3d1340eee5dc8', class: index$1.classNames(`${nativeSelectClass}`, {
+        const hasLabelSlot = !!this.el.querySelector('[slot="label"]');
+        return (index.h("div", { key: '4ce1e5ddc0672318697ad4b0548ee457cec06b67' }, (this.dsLabel || hasLabelSlot) && (index.h(DsControlLabel, { key: '76edd27f666762a39e257d3058cdf488407532d6', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, index.h("slot", { key: '473538fcc0aa5847138a1b3b5c2e5b668632e7da', name: "label" }))), index.h("div", { key: 'ba5477be60e7709b7dd93c3627e4d1b18dc69f57', class: index$1.classNames(`${nativeSelectClass}`, {
                 [`${baseClass}--full-width`]: this.dsFullWidth,
                 [`${nativeSelectClass}--disabled`]: this.dsDisabled,
                 [`${nativeSelectClass}--invalid`]: !!this.dsErrorText,
-            }) }, index.h("div", { key: '9e0006fb87aee8a6d7137570262c1c23abbe2a4e', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), index.h("select", { key: 'd9f2b83a5d31d2411af500955dd18af5ab242702', ref: el => {
+            }) }, index.h("div", { key: '80c7b2f0dd80de0e1f75f685bc3078ca85314831', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), index.h("select", { key: '8429dbcf31a4f697351e362a33963e6c4262de78', ref: el => {
                 this.nativeSelectRef = el;
                 if (el)
                     el.value = this.value;
-            }, id: this.dsId, name: this.dsName, form: this.dsForm, class: `${nativeSelectClass}__select`, disabled: this.dsDisabled, required: this.dsRequired, onChange: (event) => {
+            }, id: this.dsId, name: this.dsName, form: this.dsForm, class: `${nativeSelectClass}__select`, disabled: this.dsDisabled, required: this.dsRequired, "aria-label": this.dsAriaLabel, onChange: (event) => {
                 const target = event.target;
                 this.value = target.value;
                 this.dsChange.emit(target.value);
-            }, "aria-describedby": ariaDescribedby, "aria-controls": ariaControls, ...restAttributes }, index.h("option", { key: '9b1a4055f338a9c3640b0810c805afb21c48875b', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), index.h("slot", { key: 'fb773442e20b07260b3418aa714591bbf4df3875', name: "native" })), index.h(this.DsIconTag, { key: 'd9cdf30eae2de4eb38796a4f8ffeb0e4f770a614', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), index.h(this.DsInputValidityTag, { key: '779101ea5d70873be46cde2d86a5e578224493e8', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-describedby": ariaDescribedby, ...restAttributes }, index.h("option", { key: 'b6f1411fa144bc901a4d8809fcf439c841c05f1b', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), index.h("slot", { key: '2aef453e4145dee8a1f5f7dd43853e3b8eace84d', name: "native" })), index.h(this.DsIconTag, { key: '7f8e5c544a5ca03f0872ddeff7433c12678e282e', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down", dsSize: this.dsIconSize })), index.h(this.DsInputValidityTag, { key: '3204a6e6ff7523145c2d3880c73bdbf687aca075', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get watchers() { return {
         "aria-describedby": [{

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

@@ -1,12 +1,13 @@
 'use strict';
 
-var index = require('./index-BSwr4Ukh.js');
+var index = require('./index-BNOD57K-.js');
 var attributes = require('./attributes-5eBKMo1N.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-DOIzXqfM.js');
-var cx = require('./cx-D-SFhp5j.js');
+var utils = require('./utils-DMgbvnde.js');
+var cx = require('./cx-Bz5Mpvyi.js');
+var componentFactory = require('./componentFactory-BmBVCz8f.js');
 
-const dsSpinnerCss = () => `.ds-font{}.ds-font-heading{font-family:var(--ds-fontFamily-heading)}.ds-font-body{font-family:var(--ds-fontFamily-body)}.ds-font{}.ds-font-regular{font-weight:var(--ds-fontWeight-regular)}.ds-font-semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font-semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font-bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking-xs{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking-sm{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking-md{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking-lg{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking-xl{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading-sm{line-height:var(--ds-lineHeight-small)}.ds-leading-md{line-height:var(--ds-lineHeight-medium)}.ds-leading-lg{line-height:var(--ds-lineHeight-large)}.ds-leading-xl{line-height:var(--ds-lineHeight-xLarge)}.ds-width-md{font-stretch:var(--ds-fontWidth-normal)}.ds-width-sm{font-stretch:var(--ds-fontWidth-condense)}.ds-number-proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph-16{margin-bottom:var(--ds-marginBottom, 16px)}.ds-paragraph-20{margin-bottom:var(--ds-marginBottom, 20px)}.ds-list-spacing{gap:4px}.ds-text-color-default{color:var(--ds-textColor-default)}.ds-text{}.ds-text-regular-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text{}.ds-text-semibold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text{}.ds-text-bold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__SPFJ1E{display:inline-block}.ds-spinner__SPFJ1E:has(.ds-spinner__SPFJ1E__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__SPFJ1E{}.ds-spinner__SPFJ1E--small{padding:1.5px}.ds-spinner__SPFJ1E--medium{padding:3px}.ds-spinner__SPFJ1E--large{padding:3px}.ds-spinner__SPFJ1E--xLarge{padding:5.5px}.ds-spinner__SPFJ1E--2xLarge{padding:5.5px}.ds-spinner__SPFJ1E--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__SPFJ1E{}.ds-spinner__SPFJ1E--below{flex-direction:column;align-items:center}.ds-spinner__SPFJ1E--right{flex-direction:row;align-items:center}.ds-spinner__SPFJ1E__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__SPFJ1E__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__SPFJ1E__text--white{color:var(--ds-textColor-white)}.ds-spinner__SPFJ1E__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__SPFJ1E__segment--1{animation-delay:-0.3s}.ds-spinner__SPFJ1E__segment--2{animation-delay:-0.2s}.ds-spinner__SPFJ1E__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__SPFJ1E__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__SPFJ1E__segment--1{animation-delay:-0.6s}.ds-spinner__SPFJ1E__segment--2{animation-delay:-0.4s}.ds-spinner__SPFJ1E__segment--3{animation-delay:-0.2s}}`;
+const dsSpinnerCss = () => `.ds-font{}.ds-font-heading{font-family:var(--ds-fontFamily-heading)}.ds-font-body{font-family:var(--ds-fontFamily-body)}.ds-font{}.ds-font-regular{font-weight:var(--ds-fontWeight-regular)}.ds-font-semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font-semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font-bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking-xs{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking-sm{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking-md{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking-lg{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking-xl{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading-sm{line-height:var(--ds-lineHeight-small)}.ds-leading-md{line-height:var(--ds-lineHeight-medium)}.ds-leading-lg{line-height:var(--ds-lineHeight-large)}.ds-leading-xl{line-height:var(--ds-lineHeight-xLarge)}.ds-width-md{font-stretch:var(--ds-fontWidth-normal)}.ds-width-sm{font-stretch:var(--ds-fontWidth-condense)}.ds-number-proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph-16{margin-bottom:var(--ds-marginBottom, 16px)}.ds-paragraph-20{margin-bottom:var(--ds-marginBottom, 20px)}.ds-list-spacing{gap:4px}.ds-text-color-default{color:var(--ds-textColor-default)}.ds-text{}.ds-text-regular-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text{}.ds-text-semibold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text{}.ds-text-bold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__GqWYnG{display:inline-block}.ds-spinner__GqWYnG:has(.ds-spinner__GqWYnG__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__GqWYnG{}.ds-spinner__GqWYnG--small{padding:1.5px}.ds-spinner__GqWYnG--medium{padding:3px}.ds-spinner__GqWYnG--large{padding:3px}.ds-spinner__GqWYnG--xLarge{padding:5.5px}.ds-spinner__GqWYnG--2xLarge{padding:5.5px}.ds-spinner__GqWYnG--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__GqWYnG{}.ds-spinner__GqWYnG--below{flex-direction:column;align-items:center}.ds-spinner__GqWYnG--right{flex-direction:row;align-items:center}.ds-spinner__GqWYnG__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__GqWYnG__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__GqWYnG__text--white{color:var(--ds-textColor-white)}.ds-spinner__GqWYnG__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__GqWYnG__segment--1{animation-delay:-0.3s}.ds-spinner__GqWYnG__segment--2{animation-delay:-0.2s}.ds-spinner__GqWYnG__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__GqWYnG__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__GqWYnG__segment--1{animation-delay:-0.6s}.ds-spinner__GqWYnG__segment--2{animation-delay:-0.4s}.ds-spinner__GqWYnG__segment--3{animation-delay:-0.2s}}`;
 
 const SPINNER_SIZES = {
     'small': 10,
@@ -28,8 +29,9 @@ const SPINNER_COLORS = {
     white: 'var(--ds-palette-white)',
     danger: 'var(--ds-palette-red-70)',
 };
-const DsSpinner = class {
+const DsSpinner = class extends index.Mixin(componentFactory.componentFactory('ds-spinner')) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
     }
     inheritedAttributes = {};
@@ -49,6 +51,9 @@ const DsSpinner = class {
             ...attributes.inheritAriaAttributes(this.el, ['role', 'aria-live']),
         };
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     render() {
         const sizeInPixels = SPINNER_SIZES[this.dsSize];
         const textSizeClass = this.dsCustomSize ? '' : SPINNER_TEXT_SIZES[this.dsSize];
@@ -63,11 +68,11 @@ const DsSpinner = class {
         const segmentClasses = (index) => index$1.classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = utils.transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
         const spinnerSizeValue = this.dsCustomSize ? `calc(${this.dsCustomSize} / 1.5833333333)` : `${sizeInPixels}px`;
-        return (index.h("div", { key: 'a5ab8628d31cd11157442ad55162b29d37816965', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (index.h("div", { key: 'e005009f0d7ae9e2b65ea914b4d34121d549367c', role: this.dsUseRoleAlert ? 'alert' : undefined, "aria-live": this.dsUseAriaLive ? 'polite' : undefined, class: classes, style: {
                 '--spinner-size': spinnerSizeValue,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, index.h("div", { key: '25ed96e729bb88c416b32d0f21880c5f2ab3951b', class: `${baseClass}__spinner` }, index.h("div", { key: 'b13b4a14ecc2c8c4c641eb86e4fdd74ebffad129', class: segmentClasses(1) }), index.h("div", { key: '318d9bb4f5a5d3f9fffba1becaee1e26e69b2be3', class: segmentClasses(2) }), index.h("div", { key: 'a30386defb94ac94812a7af7a997b0cd152282bc', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (index.h(DsVisuallyHidden, { key: '3527ed4476c41989409a1b8211ae24e2a0b47094' }, index.h("span", { key: 'a04b0e8b08d801b76795989b0c65172e58935dd7' }, this.dsHiddenAssistiveText))), this.dsText && (index.h("span", { key: '408add07c149d808d2907810fc10e0e8d5a43838', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+            }, ...this.inheritedAttributes }, index.h("div", { key: '7320d4ecad564b0fe273db837f8788df9779695b', class: `${baseClass}__spinner` }, index.h("div", { key: 'c48f5415839d7c6877aea23b0ce417083b1a3e68', class: segmentClasses(1) }), index.h("div", { key: '5493eb9032096b6d4465956f7464f0f1645f9b10', class: segmentClasses(2) }), index.h("div", { key: '21e06cea11eac46b75fa0c16e416ccce0ea7446a', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (index.h(DsVisuallyHidden, { key: 'a63fa57152c2a4521c8f046648d8b17aa48b6ebd' }, index.h("span", { key: '918c987794b085f3f2949154816e438482652399' }, this.dsHiddenAssistiveText))), this.dsText && (index.h("span", { key: '43fdbe3aca2fd375f61d70b48266b7cd533c5dbe', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
     }
 };
 utils.declareComponentDependencies([index.h("ds-visually-hidden", null)]);

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BSwr4Ukh.js');
-var store = require('./store-X-DFw257.js');
+var index = require('./index-BNOD57K-.js');
+var store = require('./store-DNuNXgOq.js');
 
 const DsStore = class {
     constructor(hostRef) {

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-BSwr4Ukh.js');
-var cx = require('./cx-D-SFhp5j.js');
+var index = require('./index-BNOD57K-.js');
+var cx = require('./cx-Bz5Mpvyi.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-DOIzXqfM.js');
-var tabsFactory = require('./tabsFactory-l_Wb2sJN.js');
+var utils = require('./utils-DMgbvnde.js');
+var tabsFactory = require('./tabsFactory-DHml7Z0I.js');
 var iconList = require('./iconList-CYf8SEZW.js');
-require('./tabsContext-Cg_aEFJd.js');
+require('./tabsContext-YJO8eY1d.js');
 
-const dsTabCss = () => `.ds-no-style-leak.sc-ds-tab *.sc-ds-tab{all:unset;box-sizing:border-box;display:block}.sc-ds-tab-h{display:contents}.ds-tab__SPFJ1E.sc-ds-tab{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative;display:inline-flex;flex-direction:row;flex-shrink:0;min-width:44px;min-height:44px;padding:var(--ds-spacing-xSmall);background-color:var(--ds-bgColor-transparent-onLight);color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-style:normal;font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);cursor:default}@media (min-width: 60rem){.ds-tab__SPFJ1E.sc-ds-tab{font-size:var(--ds-fontSize-18)}}.ds-tab__SPFJ1E--selected.sc-ds-tab,.ds-tab__SPFJ1E.sc-ds-tab:hover:not(.ds-tab__SPFJ1E--selected),.ds-tab__SPFJ1E.sc-ds-tab:active:not(.ds-tab__SPFJ1E--selected){color:var(--ds-textColor-default)}.ds-tab__SPFJ1E--container.sc-ds-tab: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-tab__SPFJ1E--container.ds-tab__SPFJ1E--selected.sc-ds-tab{background-color:var(--ds-bgColor-white)}.ds-tab__SPFJ1E--container.ds-tab__SPFJ1E--selected.sc-ds-tab::after{content:"";position:absolute;top:0;left:0;right:0;border-block-start:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__SPFJ1E--container.ds-tab__SPFJ1E--selected.sc-ds-tab:not(:focus-visible)::before{content:"";position:absolute;inset:0;border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tab__SPFJ1E--container.sc-ds-tab:hover:not(.ds-tab__SPFJ1E--selected){background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-tab__SPFJ1E--container.sc-ds-tab:active:not(.ds-tab__SPFJ1E--selected){background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-tab__SPFJ1E--line.sc-ds-tab:focus-visible .ds-tab__SPFJ1E__content.sc-ds-tab{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-tab__SPFJ1E--line.ds-tab__SPFJ1E--selected.sc-ds-tab::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__SPFJ1E--line.sc-ds-tab:hover:not(.ds-tab__SPFJ1E--selected)::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-default)}.ds-tab__SPFJ1E--line.sc-ds-tab:active:not(.ds-tab__SPFJ1E--selected)::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-black)}.ds-tab__SPFJ1E.sc-ds-tab .ds-tab__SPFJ1E__content.sc-ds-tab{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall)}`;
+const dsTabCss = () => `.ds-no-style-leak.sc-ds-tab *.sc-ds-tab{all:unset;box-sizing:border-box;display:block}.sc-ds-tab-h{display:contents}.ds-tab__GqWYnG.sc-ds-tab{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative;display:inline-flex;flex-direction:row;flex-shrink:0;min-width:44px;min-height:44px;padding:var(--ds-spacing-xSmall);background-color:var(--ds-bgColor-transparent-onLight);color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-style:normal;font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);cursor:default}@media (min-width: 60rem){.ds-tab__GqWYnG.sc-ds-tab{font-size:var(--ds-fontSize-18)}}.ds-tab__GqWYnG--selected.sc-ds-tab,.ds-tab__GqWYnG.sc-ds-tab:hover:not(.ds-tab__GqWYnG--selected),.ds-tab__GqWYnG.sc-ds-tab:active:not(.ds-tab__GqWYnG--selected){color:var(--ds-textColor-default)}.ds-tab__GqWYnG--container.sc-ds-tab: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-tab__GqWYnG--container.ds-tab__GqWYnG--selected.sc-ds-tab{background-color:var(--ds-bgColor-white)}.ds-tab__GqWYnG--container.ds-tab__GqWYnG--selected.sc-ds-tab::after{content:"";position:absolute;top:0;left:0;right:0;border-block-start:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__GqWYnG--container.ds-tab__GqWYnG--selected.sc-ds-tab:not(:focus-visible)::before{content:"";position:absolute;inset:0;border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tab__GqWYnG--container.sc-ds-tab:hover:not(.ds-tab__GqWYnG--selected){background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-tab__GqWYnG--container.sc-ds-tab:active:not(.ds-tab__GqWYnG--selected){background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-tab__GqWYnG--line.sc-ds-tab:focus-visible .ds-tab__GqWYnG__content.sc-ds-tab{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-tab__GqWYnG--line.ds-tab__GqWYnG--selected.sc-ds-tab::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__GqWYnG--line.sc-ds-tab:hover:not(.ds-tab__GqWYnG--selected)::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-default)}.ds-tab__GqWYnG--line.sc-ds-tab:active:not(.ds-tab__GqWYnG--selected)::after{content:"";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-black)}.ds-tab__GqWYnG.sc-ds-tab .ds-tab__GqWYnG__content.sc-ds-tab{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall)}`;
 
 const DsTab = class extends index.Mixin(tabsFactory.tabsFactory) {
     constructor(hostRef) {
@@ -106,7 +106,7 @@ const DsTab = class extends index.Mixin(tabsFactory.tabsFactory) {
             [`${baseClass}--line`]: this.context?.variant === 'line',
             [`${baseClass}--selected`]: isSelected,
         });
-        return (index.h("div", { key: 'd7ef3232e57989ba8ec756637533fa722cf31d8d', ref: elem => (this.tabElement = elem), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, index.h("div", { key: 'c70877273bfaa80e3b747ee58506576c8b07db38', class: `${baseClass}__content` }, index.h("slot", { key: '3f9c84ac04013e048dad762ddcc5141f1e7913ae', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && index.h(this.DsIcon, { key: '25fbae6d6864367c96b37d428a9a1f5292463c0f', dsName: this.dsIconStart })), index.h("slot", { key: '45c2fa3aa5f032d8e714d4d1feb9dea8d4a3c587', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && index.h("span", { key: 'a1fe345038d9e8ad270de3bed08e63999adda089' }, this.dsText)), index.h("slot", { key: 'c21c209255e904434d11f62a197c0e3d71379567', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && index.h(this.DsIcon, { key: '5de4042af5178dc4d0442e303391f7a9622bf400', dsName: this.dsIconEnd, dsColour: this.iconColour })))));
+        return (index.h("div", { key: 'f85656b4ec870dcf92947b3cbd95c80cc306d8c3', ref: el => (this.tabElement = el), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, index.h("div", { key: '1e44a6af00a3637ee2b9f32d8d21571e9fe46d21', class: `${baseClass}__content` }, index.h("slot", { key: 'c5ce3d8c478d4781823516ca0b5f63b40ca96689', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && index.h(this.DsIcon, { key: 'd5f1c70d72eed55890a8afb103c302f0019efc5b', dsName: this.dsIconStart })), index.h("slot", { key: 'dca39987bc2089aa2ffce964738b775dece1d868', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && index.h("span", { key: 'cb0c79a3ff1e25d4298d6e5fdb55f55f346695e7' }, this.dsText)), index.h("slot", { key: '6360928755f5350ac63361cfcfa9687db6685102', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && index.h(this.DsIcon, { key: 'e8ad3fc72b8a44d6d0c924209a140d4e25ac962b', dsName: this.dsIconEnd, dsColour: this.iconColour })))));
     }
 };
 utils.declareComponentDependencies([index.h("ds-icon", { dsName: "" })]);