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

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

@@ -1,12 +1,12 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DVRFDmEO.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-BY4gL2mu.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as inheritSpecifiedAttributes, b as inheritAriaAttributes } from './attributes-DfbgRyXR.js';
-import { b as idGenerator, t as transformTagName, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { c as cx } from './cx-gIO_QE3F.js';
-import { v as visuallyHiddenAssistiveText } from './linkUtils-BDvEjv-H.js';
-import { g as getLanguage, o as onChange } from './store-CJmuEAso.js';
+import { c as inheritSpecifiedAttributes, b as inheritAriaAttributes } from './attributes-Dzq9qJk7.js';
+import { g as idGenerator, t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { c as cx } from './cx-BCNOIKle.js';
+import { v as visuallyHiddenAssistiveText } from './linkUtils-CO8ue_RN.js';
+import { g as getLanguage, o as onChange } from './store-CWWs5tG3.js';
 import { a as appData } from './data-gPkqWfeS.js';
-import { c as componentFactory } from './componentFactory-B_QxX88s.js';
+import { c as componentFactory } from './componentFactory-D1m7QO7a.js';
 
 const convertToRibbonLinks = (links, ribbonData, lang = 'en') => {
     return links.map(link => ({
@@ -44,7 +44,7 @@ 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__cpPWV0{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-ribbon__cpPWV0__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__cpPWV0__container{grid-template-columns:auto auto}}@media (min-width: 60rem){.ds-ribbon__cpPWV0__container{grid-template-columns:145px auto;padding:0 var(--ds-spacing-large, 32px)}}@media (min-width: 75rem){.ds-ribbon__cpPWV0__container{grid-template-columns:auto auto}}.ds-ribbon__cpPWV0__branding{display:flex;align-items:center;flex-shrink:0}.ds-ribbon__cpPWV0__mobile-toggle{display:block;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__cpPWV0__mobile-toggle{display:none}}.ds-ribbon__cpPWV0__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__cpPWV0__drawer-backdrop{display:none}}.ds-ribbon__cpPWV0--drawer-open .ds-ribbon__cpPWV0__drawer-backdrop{cursor:pointer;pointer-events:auto}@media (min-width: 60rem){.ds-ribbon__cpPWV0__drawer-backdrop{pointer-events:auto;z-index:1}.ds-ribbon__cpPWV0__drawer-backdrop,.ds-ribbon__cpPWV0--drawer-open .ds-ribbon__cpPWV0__container .ds-ribbon__cpPWV0__drawer-backdrop{position:static;background-color:unset;backdrop-filter:unset;opacity:1;transition:none}}.ds-ribbon__cpPWV0--drawer-clicked .ds-ribbon__cpPWV0__drawer-backdrop{transition:background-color 0.3s, opacity 0s 0.3s}.ds-ribbon__cpPWV0--drawer-open .ds-ribbon__cpPWV0__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__cpPWV0__desktop-nav{display:none;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__cpPWV0__desktop-nav{display:block}}.ds-ribbon__cpPWV0__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__cpPWV0__desktop-link-item{display:flex;align-items:center;position:relative;text-transform:uppercase;height:var(--ds-spacing-2xLarge, 3rem)}.ds-ribbon__cpPWV0__desktop-link{font-size:var(--ds-fontSize-12);white-space:nowrap}.ds-ribbon__cpPWV0__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__cpPWV0__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__cpPWV0__desktop-badge>* span{font-size:var(--ds-fontSize-12);line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}.ds-ribbon__cpPWV0__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__cpPWV0__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__cpPWV0--drawer-open .ds-ribbon__cpPWV0__drawer{transform:translateX(0%)}.ds-ribbon__cpPWV0__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__cpPWV0__drawer-header{display:none}}.ds-ribbon__cpPWV0__drawer-branding{display:flex;align-items:center;flex-shrink:0;max-width:8rem}@media (min-width: 30rem){.ds-ribbon__cpPWV0__drawer-branding{max-width:unset}}.ds-ribbon__cpPWV0__drawer-close{flex-shrink:0;margin-left:var(--ds-spacing-small, 16px)}.ds-ribbon__cpPWV0__drawer-nav{display:block;padding:var(--ds-spacing-medium, 24px);position:relative}@media (min-width: 60rem){.ds-ribbon__cpPWV0__drawer-nav{padding:0}}.ds-ribbon__cpPWV0__top-scrim,.ds-ribbon__cpPWV0__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__cpPWV0__top-scrim{top:3rem;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-ribbon__cpPWV0__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__cpPWV0__top-scrim{display:block}.has-bottom-scrim .ds-ribbon__cpPWV0__bottom-scrim{display:block}.ds-ribbon__cpPWV0__drawer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-spacing-4xSmall, 2px)}.ds-ribbon__cpPWV0__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__cpPWV0__drawer-link-item:last-child{border-bottom:none}@media (min-width: 60rem){.ds-ribbon__cpPWV0__drawer-link-item{justify-content:flex-start;padding:0;border-bottom:none}.ds-ribbon__cpPWV0__drawer-link-item:last-child{border-bottom:none}}.ds-ribbon__cpPWV0__drawer-link{font-size:var(--ds-fontSize-14, 0.875rem);white-space:nowrap}@media (min-width: 60rem){.ds-ribbon__cpPWV0__drawer-link{font-size:var(--ds-fontSize-12, 0.75rem)}}.ds-ribbon__cpPWV0__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__cpPWV0__drawer-badge{position:absolute;top:0;right:100%}}.ds-ribbon__cpPWV0__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__cpPWV0__drawer-badge>* span{font-size:inherit;line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}:host(.ds-ribbon__cpPWV0--drawer-open) .ds-ribbon__cpPWV0__drawer-backdrop{display:block}@media (min-width: 60rem){:host(.ds-ribbon__cpPWV0--drawer-open) .ds-ribbon__cpPWV0__drawer-backdrop{display:block}}:host(.ds-ribbon__cpPWV0--drawer-open) .ds-ribbon__cpPWV0__drawer{transform:translateX(0)}@media (min-width: 60rem){:host(.ds-ribbon__cpPWV0--drawer-open) .ds-ribbon__cpPWV0__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__9el4Wy{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-ribbon__9el4Wy__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__9el4Wy__container{grid-template-columns:auto auto}}@media (min-width: 60rem){.ds-ribbon__9el4Wy__container{grid-template-columns:145px auto;padding:0 var(--ds-spacing-large, 32px)}}@media (min-width: 75rem){.ds-ribbon__9el4Wy__container{grid-template-columns:auto auto}}.ds-ribbon__9el4Wy__branding{display:flex;align-items:center;flex-shrink:0}.ds-ribbon__9el4Wy__mobile-toggle{display:block;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__9el4Wy__mobile-toggle{display:none !important}}.ds-ribbon__9el4Wy__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__9el4Wy__drawer-backdrop{display:none}}.ds-ribbon__9el4Wy--drawer-open .ds-ribbon__9el4Wy__drawer-backdrop{cursor:pointer;pointer-events:auto}@media (min-width: 60rem){.ds-ribbon__9el4Wy__drawer-backdrop{pointer-events:auto;z-index:1}.ds-ribbon__9el4Wy__drawer-backdrop,.ds-ribbon__9el4Wy--drawer-open .ds-ribbon__9el4Wy__container .ds-ribbon__9el4Wy__drawer-backdrop{position:static;background-color:unset;backdrop-filter:unset;opacity:1;transition:none}}.ds-ribbon__9el4Wy--drawer-clicked .ds-ribbon__9el4Wy__drawer-backdrop{transition:background-color 0.3s, opacity 0s 0.3s}.ds-ribbon__9el4Wy--drawer-open .ds-ribbon__9el4Wy__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__9el4Wy__desktop-nav{display:none;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__9el4Wy__desktop-nav{display:block}}.ds-ribbon__9el4Wy__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__9el4Wy__desktop-link-item{--ds-link-text-transform:uppercase;display:flex;align-items:center;position:relative;text-transform:uppercase;height:var(--ds-spacing-2xLarge, 3rem)}.ds-ribbon__9el4Wy__desktop-link{--ds-link-font-size:var(--ds-fontSize-12);white-space:nowrap}.ds-ribbon__9el4Wy__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__9el4Wy__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__9el4Wy__desktop-badge>* span{font-size:var(--ds-fontSize-12);line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}.ds-ribbon__9el4Wy__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__9el4Wy__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__9el4Wy--drawer-open .ds-ribbon__9el4Wy__drawer{transform:translateX(0%)}.ds-ribbon__9el4Wy__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__9el4Wy__drawer-header{display:none}}.ds-ribbon__9el4Wy__drawer-branding{display:flex;align-items:center;flex-shrink:0;max-width:8rem}@media (min-width: 30rem){.ds-ribbon__9el4Wy__drawer-branding{max-width:unset}}.ds-ribbon__9el4Wy__drawer-close{flex-shrink:0;margin-left:var(--ds-spacing-small, 16px)}.ds-ribbon__9el4Wy__drawer-nav{display:block;padding:var(--ds-spacing-medium, 24px);position:relative}@media (min-width: 60rem){.ds-ribbon__9el4Wy__drawer-nav{padding:0}}.ds-ribbon__9el4Wy__top-scrim,.ds-ribbon__9el4Wy__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__9el4Wy__top-scrim{top:3rem;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-ribbon__9el4Wy__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__9el4Wy__top-scrim{display:block}.has-bottom-scrim .ds-ribbon__9el4Wy__bottom-scrim{display:block}.ds-ribbon__9el4Wy__drawer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-spacing-4xSmall, 2px)}.ds-ribbon__9el4Wy__drawer-link-item{display:flex;align-items:center;position:relative;text-transform:uppercase;--ds-link-text-transform:uppercase;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-color-border-subtle);height:var(--ds-spacing-2xLarge, 3rem)}.ds-ribbon__9el4Wy__drawer-link-item:last-child{border-bottom:none}@media (min-width: 60rem){.ds-ribbon__9el4Wy__drawer-link-item{justify-content:flex-start;padding:0;border-bottom:none}.ds-ribbon__9el4Wy__drawer-link-item:last-child{border-bottom:none}}.ds-ribbon__9el4Wy__drawer-link{--ds-link-font-size:var(--ds-fontSize-14, 0.875rem);white-space:nowrap}@media (min-width: 60rem){.ds-ribbon__9el4Wy__drawer-link{--ds-link-font-size:var(--ds-fontSize-12, 0.75rem)}}.ds-ribbon__9el4Wy__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__9el4Wy__drawer-badge{position:absolute;top:0;right:100%}}.ds-ribbon__9el4Wy__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__9el4Wy__drawer-badge>* span{font-size:inherit;line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}:host(.ds-ribbon__9el4Wy--drawer-open) .ds-ribbon__9el4Wy__drawer-backdrop{display:block}@media (min-width: 60rem){:host(.ds-ribbon__9el4Wy--drawer-open) .ds-ribbon__9el4Wy__drawer-backdrop{display:block}}:host(.ds-ribbon__9el4Wy--drawer-open) .ds-ribbon__9el4Wy__drawer{transform:translateX(0)}@media (min-width: 60rem){:host(.ds-ribbon__9el4Wy--drawer-open) .ds-ribbon__9el4Wy__drawer{transform:none}}`;
 
 const fallbackRibbonData = appData.v1.ribbon;
 const DsRibbon = class extends Mixin(componentFactory('ds-ribbon', { stopRootTracking: true })) {
@@ -178,7 +178,6 @@ const DsRibbon = class extends Mixin(componentFactory('ds-ribbon', { stopRootTra
         }
         if (event.key === 'Tab') {
             this.handleFocusTrap(event);
-            return;
         }
     }
     handleWindowResize() {
@@ -213,8 +212,7 @@ const DsRibbon = class extends Mixin(componentFactory('ds-ribbon', { stopRootTra
             drawer.classList.remove('has-bottom-scrim');
         }
         else {
-            drawer.classList.add('has-top-scrim');
-            drawer.classList.add('has-bottom-scrim');
+            drawer.classList.add('has-top-scrim', 'has-bottom-scrim');
         }
     };
     handleDrawerBackdropClick = (event) => {
@@ -231,26 +229,26 @@ const DsRibbon = class extends Mixin(componentFactory('ds-ribbon', { stopRootTra
             focusableElements.push(closeButton);
         }
         const logoComponent = this.drawerRef.querySelector(this.DsLinkLogo);
-        if (logoComponent && logoComponent.shadowRoot) {
+        if (logoComponent?.shadowRoot) {
             const logoLink = logoComponent.shadowRoot.querySelector('a');
             if (logoLink && this.isFocusableElement(logoLink)) {
                 focusableElements.push(logoLink);
             }
         }
         const navLinkContainers = this.drawerRef.querySelectorAll(`[class*="drawer-link-item"]`);
-        navLinkContainers.forEach(container => {
+        for (const container of navLinkContainers) {
             const dsLinkElement = container.querySelector(this.DsLink);
-            if (dsLinkElement && dsLinkElement.shadowRoot) {
-                const linkElement = dsLinkElement.shadowRoot.querySelector('a');
+            if (dsLinkElement) {
+                const linkElement = dsLinkElement.querySelector('a');
                 if (linkElement && this.isFocusableElement(linkElement)) {
                     focusableElements.push(linkElement);
                 }
             }
-        });
+        }
         return focusableElements;
     }
     isFocusableElement(element) {
-        if (!element || element.offsetParent === null)
+        if (element?.offsetParent === null)
             return false;
         const tagName = element.tagName.toLowerCase();
         return ['a', 'button'].includes(tagName) && element.tabIndex !== -1;
@@ -260,12 +258,12 @@ const DsRibbon = class extends Mixin(componentFactory('ds-ribbon', { stopRootTra
         if (focusableElements.length === 0)
             return;
         let currentElement = document.activeElement;
-        if (currentElement && currentElement.shadowRoot && currentElement.shadowRoot.activeElement) {
+        if (currentElement?.shadowRoot?.activeElement) {
             currentElement = currentElement.shadowRoot.activeElement;
         }
-        if (this.el.shadowRoot && this.el.shadowRoot.activeElement) {
+        if (this.el.shadowRoot?.activeElement) {
             currentElement = this.el.shadowRoot.activeElement;
-            if (currentElement.shadowRoot && currentElement.shadowRoot.activeElement) {
+            if (currentElement.shadowRoot?.activeElement) {
                 currentElement = currentElement.shadowRoot.activeElement;
             }
         }
@@ -311,8 +309,7 @@ const DsRibbon = class extends Mixin(componentFactory('ds-ribbon', { stopRootTra
                 this.drawerRef.classList.remove('has-bottom-scrim');
             }
             else {
-                this.drawerRef.classList.add('has-top-scrim');
-                this.drawerRef.classList.add('has-bottom-scrim');
+                this.drawerRef.classList.add('has-top-scrim', 'has-bottom-scrim');
             }
         }
     }
@@ -394,7 +391,7 @@ const DsRibbon = class extends Mixin(componentFactory('ds-ribbon', { stopRootTra
             [`${baseClass}--drawer-open`]: this.isMobileDrawerOpen,
             [`${baseClass}--drawer-clicked`]: this.isMobileDrawerClicked,
         });
-        return (h("div", { key: 'a250cb67860ab9c80815fc65eaedec4e495c98e9', class: ribbonClasses }, h("nav", { key: '7edfa7f9edc381231a65aee54d46ba9a3cbc7e1e', "aria-label": this.localizedNavAriaLabel, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, h("div", { key: 'fd78bff4a97e2fe6d42a03aea6814893efd16640', class: `${baseClass}__container`, ...this.inheritedAttributes }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle())), this.renderMobileNavigation()));
+        return (h("div", { key: '787f94561b7f05c4deb2181804393ce8d4dc39d9', class: ribbonClasses }, h("nav", { key: 'cce87ce61dce5c751543b58a45b5bc6362f5b692', "aria-label": this.localizedNavAriaLabel, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, h("div", { key: '5966d1f8fa3d276809ec2dad3d4d92d4cf730aa5', class: `${baseClass}__container`, ...this.inheritedAttributes }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle())), this.renderMobileNavigation()));
     }
     static get watchers() { return {
         "dsIcon": [{

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

@@ -1,13 +1,13 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DVRFDmEO.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h, H as Host } from './index-BY4gL2mu.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { i as inheritAttributes } from './attributes-DfbgRyXR.js';
-import { c as cx } from './cx-gIO_QE3F.js';
-import { a as ariaDeprecationFactory } from './ariaDeprecationFactory-DJfPtVrk.js';
-import { b as atLeastOneOption } from './controlUtils-Do94ctdy.js';
-import './store-CJmuEAso.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { i as inheritAttributes } from './attributes-Dzq9qJk7.js';
+import { c as cx } from './cx-BCNOIKle.js';
+import { a as ariaDeprecationFactory } from './ariaDeprecationFactory-CyzP_Y-2.js';
+import { b as atLeastOneOption } from './controlUtils-dmHmC77l.js';
+import './store-CWWs5tG3.js';
 
-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__cpPWV0--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__cpPWV0-native.sc-ds-select-native,.ds-select__cpPWV0-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__cpPWV0-native__dropdown-icon.sc-ds-select-native,.ds-select__cpPWV0-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__cpPWV0-custom-wrapper.sc-ds-select-native{position:relative}.ds-select__cpPWV0-custom.sc-ds-select-native .ds-options__cpPWV0.sc-ds-select-native{display:block}.ds-select__cpPWV0-custom-input-container.sc-ds-select-native{display:flex;position:relative}.ds-select__cpPWV0-custom-input-container.sc-ds-select-native:has(.ds-select__cpPWV0-custom__clear-button:hover) .ds-select__cpPWV0-custom.sc-ds-select-native{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__cpPWV0-custom.sc-ds-select-native:not(.ds-select__cpPWV0-custom--open,.ds-select__cpPWV0-custom--invalid.sc-ds-select-native,.ds-select__cpPWV0-custom--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__cpPWV0-custom.sc-ds-select-native:active:not(.ds-select__cpPWV0-custom--open,.ds-select__cpPWV0-custom--invalid.sc-ds-select-native,.ds-select__cpPWV0-custom--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__cpPWV0-custom--open.sc-ds-select-native,.ds-select__cpPWV0-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__cpPWV0-custom--open.sc-ds-select-native:not(.ds-select__cpPWV0-custom--open--invalid,.ds-select__cpPWV0-custom.sc-ds-select-native:focus-visible--invalid),.ds-select__cpPWV0-custom.sc-ds-select-native:focus-visible:not(.ds-select__cpPWV0-custom--open--invalid,.ds-select__cpPWV0-custom.sc-ds-select-native:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__cpPWV0-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__cpPWV0-custom--disabled.sc-ds-select-native .ds-select__cpPWV0-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__cpPWV0-custom--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__cpPWV0-custom--invalid.sc-ds-select-native:not(.ds-select__cpPWV0-custom--invalid--open,.ds-select__cpPWV0-custom--invalid--disabled).sc-ds-select-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__cpPWV0-custom--invalid.sc-ds-select-native:not(.ds-select__cpPWV0-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__cpPWV0-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__cpPWV0-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__cpPWV0-custom--has-icon.sc-ds-select-native .ds-select__cpPWV0-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__cpPWV0-custom__selected-option__placeholder-icon.sc-ds-select-native{font-size:var(--ds-fontSize-16)}.ds-select__cpPWV0-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__cpPWV0-custom__selected-option__text--none-selected.sc-ds-select-native{color:var(--ds-textColor-secondary)}.ds-select__cpPWV0-custom__selected-option__text--disabled.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight)}.ds-select__cpPWV0-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__cpPWV0-custom.sc-ds-select-native input.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__cpPWV0-custom.sc-ds-select-native input.sc-ds-select-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__cpPWV0-custom.sc-ds-select-native input.sc-ds-select-native:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__cpPWV0-custom.sc-ds-select-native input.sc-ds-select-native:focus{outline:none}.ds-select__cpPWV0-custom__clear-button.sc-ds-select-native{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);top:2px;bottom:2px;cursor:pointer}.ds-select__cpPWV0-custom__clear-button.sc-ds-select-native:has(button:focus){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 * 2)}.ds-select__cpPWV0-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__cpPWV0-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-default);background-color:var(--ds-bgColor-white)}.ds-select__cpPWV0-custom__options-container--open.sc-ds-select-native{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__cpPWV0-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__cpPWV0-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__cpPWV0-custom__options-container__options__inner__top-scrim.sc-ds-select-native,.ds-select__cpPWV0-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__cpPWV0-custom__options-container__options__inner__top-scrim--visible.sc-ds-select-native,.ds-select__cpPWV0-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select-native{display:block}.ds-select__cpPWV0-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__cpPWV0-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__cpPWV0-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__cpPWV0-native.sc-ds-select-native:not(.ds-select__cpPWV0-native--invalid,.ds-select__cpPWV0-native--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__cpPWV0-native.sc-ds-select-native:has(.ds-select__cpPWV0-native__select:active):not(.ds-select__cpPWV0-native--invalid,.ds-select__cpPWV0-native--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__cpPWV0-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__cpPWV0-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__cpPWV0-native--disabled.sc-ds-select-native .ds-select__cpPWV0-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__cpPWV0-native--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__cpPWV0-native--invalid.sc-ds-select-native:not(.ds-select__cpPWV0-native--invalid--disabled):has(.ds-select__cpPWV0-native__select:active){background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__cpPWV0-native--invalid.sc-ds-select-native:not(.ds-select__cpPWV0-native--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__cpPWV0-native__dropdown-icon.sc-ds-select-native{color:var(--ds-select-selected-option-color, inherit)}.ds-select__cpPWV0-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__cpPWV0-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__cpPWV0-native__select.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__cpPWV0-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 = () => `.ds-select__9el4Wy__host.sc-ds-select-native-h{display:inline-block;width:var(--ds-select-narrow-width, 100%)}@media (min-width: 30rem){.ds-select__9el4Wy__host.sc-ds-select-native-h{width:var(--ds-select-wide-width, 20rem)}}.ds-select__9el4Wy__host.sc-ds-select-native-h>div.sc-ds-select-native{display:flex;flex-direction:column;position:relative}@media (min-width: 30rem){.ds-select__9el4Wy__host--full-width.sc-ds-select-native-h{width:var(--ds-select-narrow-width, 100%)}}.ds-select__9el4Wy-native.sc-ds-select-native,.ds-select__9el4Wy-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__9el4Wy-native__dropdown-icon.sc-ds-select-native,.ds-select__9el4Wy-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__9el4Wy-custom-wrapper.sc-ds-select-native{position:relative}.ds-select__9el4Wy-custom.sc-ds-select-native .ds-options__9el4Wy.sc-ds-select-native{display:block}.ds-select__9el4Wy-custom-input-container.sc-ds-select-native{display:flex;position:relative}.ds-select__9el4Wy-custom-input-container.sc-ds-select-native:has(.ds-select__9el4Wy-custom__clear-button:hover) .ds-select__9el4Wy-custom.sc-ds-select-native{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__9el4Wy-custom.sc-ds-select-native:not(.ds-select__9el4Wy-custom--open,.ds-select__9el4Wy-custom--invalid.sc-ds-select-native,.ds-select__9el4Wy-custom--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__9el4Wy-custom.sc-ds-select-native:active:not(.ds-select__9el4Wy-custom--open,.ds-select__9el4Wy-custom--invalid.sc-ds-select-native,.ds-select__9el4Wy-custom--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__9el4Wy-custom--open.sc-ds-select-native,.ds-select__9el4Wy-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__9el4Wy-custom--open.sc-ds-select-native:not(.ds-select__9el4Wy-custom--open--invalid,.ds-select__9el4Wy-custom.sc-ds-select-native:focus-visible--invalid),.ds-select__9el4Wy-custom.sc-ds-select-native:focus-visible:not(.ds-select__9el4Wy-custom--open--invalid,.ds-select__9el4Wy-custom.sc-ds-select-native:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__9el4Wy-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__9el4Wy-custom--disabled.sc-ds-select-native .ds-select__9el4Wy-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__9el4Wy-custom--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__9el4Wy-custom--invalid.sc-ds-select-native:not(.ds-select__9el4Wy-custom--invalid--open,.ds-select__9el4Wy-custom--invalid--disabled).sc-ds-select-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__9el4Wy-custom--invalid.sc-ds-select-native:not(.ds-select__9el4Wy-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__9el4Wy-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__9el4Wy-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__9el4Wy-custom--has-icon.sc-ds-select-native .ds-select__9el4Wy-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__9el4Wy-custom__selected-option__placeholder-icon.sc-ds-select-native{font-size:var(--ds-fontSize-16)}.ds-select__9el4Wy-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__9el4Wy-custom__selected-option__text--none-selected.sc-ds-select-native{color:var(--ds-textColor-secondary)}.ds-select__9el4Wy-custom__selected-option__text--disabled.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight)}.ds-select__9el4Wy-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__9el4Wy-custom.sc-ds-select-native input.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__9el4Wy-custom.sc-ds-select-native input.sc-ds-select-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__9el4Wy-custom.sc-ds-select-native input.sc-ds-select-native:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__9el4Wy-custom.sc-ds-select-native input.sc-ds-select-native:focus{outline:none}.ds-select__9el4Wy-custom__clear-button.sc-ds-select-native{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);top:2px;bottom:2px;cursor:pointer}.ds-select__9el4Wy-custom__clear-button.sc-ds-select-native:has(button:focus){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 * 2)}.ds-select__9el4Wy-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__9el4Wy-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-default);background-color:var(--ds-bgColor-white)}.ds-select__9el4Wy-custom__options-container--open.sc-ds-select-native{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__9el4Wy-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__9el4Wy-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__9el4Wy-custom__options-container__options__inner__top-scrim.sc-ds-select-native,.ds-select__9el4Wy-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__9el4Wy-custom__options-container__options__inner__top-scrim--visible.sc-ds-select-native,.ds-select__9el4Wy-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select-native{display:block}.ds-select__9el4Wy-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__9el4Wy-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__9el4Wy-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__9el4Wy-native.sc-ds-select-native:not(.ds-select__9el4Wy-native--invalid,.ds-select__9el4Wy-native--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__9el4Wy-native.sc-ds-select-native:has(.ds-select__9el4Wy-native__select:active):not(.ds-select__9el4Wy-native--invalid,.ds-select__9el4Wy-native--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__9el4Wy-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__9el4Wy-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__9el4Wy-native--disabled.sc-ds-select-native .ds-select__9el4Wy-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__9el4Wy-native--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__9el4Wy-native--invalid.sc-ds-select-native:not(.ds-select__9el4Wy-native--invalid--disabled):has(.ds-select__9el4Wy-native__select:active){background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__9el4Wy-native--invalid.sc-ds-select-native:not(.ds-select__9el4Wy-native--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__9el4Wy-native__dropdown-icon.sc-ds-select-native{color:var(--ds-select-selected-option-color, inherit)}.ds-select__9el4Wy-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__9el4Wy-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__9el4Wy-native__select.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__9el4Wy-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 Mixin(ariaDeprecationFactory) {
     constructor(hostRef) {
@@ -103,16 +103,18 @@ const DsSelectNative = class extends Mixin(ariaDeprecationFactory) {
     }
     render() {
         const baseClass = cx('ds-select');
+        const hostClass = `${baseClass}__host`;
         const nativeSelectClass = `${baseClass}-native`;
         const DsControlLabel = transformTagName('ds-control-label', 'ds-select-native', this.el);
         const { ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
         const hasLabelSlot = !!this.el.querySelector('[slot="label"]');
-        return (h("div", { key: '30c1e71f8eb619ade5d516b41acca48dd0614b2b' }, (this.dsLabel || hasLabelSlot) && (h(DsControlLabel, { key: 'dab4131acd82325f2e9c6fda4b23baae3c42da02', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: 'e06aadfad4493685d3f89425612c54676e65dfa8', name: "label" }))), h("div", { key: '4c688e61ac9e9775b0fcb6cea946ac49dab79801', class: classNames(`${nativeSelectClass}`, {
-                [`${baseClass}--full-width`]: this.dsFullWidth,
+        return (h(Host, { key: 'f62dd4fa39eb73ee49ecb646a8c64019f3506bb9', class: classNames(hostClass, {
+                [`${hostClass}--full-width`]: this.dsFullWidth,
+            }) }, h("div", { key: '89bca77b098f8e7af606900fb12443c6c93ee3e6' }, (this.dsLabel || hasLabelSlot) && (h(DsControlLabel, { key: 'cde4f34d8fe52e7a31c38de56e412b93ce144878', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: 'b2b44a5ee7704fb8241fc2fc8d2e3ef90c6a8949', name: "label" }))), h("div", { key: '31976c1287cb9bcf71a617de303d9a0751882e65', class: classNames(`${nativeSelectClass}`, {
                 [`${nativeSelectClass}--disabled`]: this.dsDisabled,
                 [`${nativeSelectClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: '51b0a4871304c183df0c4deb5ce99a0d3567afd7', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '7169d2b1b9406d9c31b6e608cc955f2063dd94ad', ref: el => {
+            }) }, h("div", { key: '48576fbf4ca45c2af99687ebabaa574897a8670e', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '22cb4d33c218f4d528a0de51dd83e54d47d068ea', ref: el => {
                 this.nativeSelectRef = el;
                 if (el)
                     el.value = this.value;
@@ -120,7 +122,7 @@ const DsSelectNative = class extends Mixin(ariaDeprecationFactory) {
                 const target = event.target;
                 this.value = target.value;
                 this.dsChange.emit(target.value);
-            }, "aria-describedby": ariaDescribedby, ...restAttributes }, h("option", { key: '2f751ccd68d7b326ee84858d45ead0dee6f0be28', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: '2e1644c8cd879b0842a6327f24034147a83a7e72', name: "native" })), h(this.DsIconTag, { key: 'cdd3078fb9c89f443cb460bc09a34431d7e166fb', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down", dsSize: this.dsIconSize })), h(this.DsInputValidityTag, { key: 'b8f3addbd517ed233facab4a7d84e8fbd5df535a', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-describedby": ariaDescribedby, ...restAttributes }, h("option", { key: 'abfb86795397dc5e11ec4af32f18fe5045b7cc4b', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: '97f39c189efa89e0143a5541e76c57980f2d57b8', name: "native" })), h(this.DsIconTag, { key: '6a70540a731cbe7033b18b1d834e761c211c58d7', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down", dsSize: this.dsIconSize })), h(this.DsInputValidityTag, { key: '050e82eec5b8364468db771bd1008a751bec64f9', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
     }
     static get watchers() { return {
         "aria-describedby": [{

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

@@ -1,12 +1,12 @@
-import { M as Mixin, r as registerInstance, e as getElement, h } from './index-DVRFDmEO.js';
-import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-BY4gL2mu.js';
+import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-Dzq9qJk7.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { c as cx } from './cx-gIO_QE3F.js';
-import { c as componentFactory } from './componentFactory-B_QxX88s.js';
-import './store-CJmuEAso.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { c as cx } from './cx-BCNOIKle.js';
+import { c as componentFactory } from './componentFactory-D1m7QO7a.js';
+import './store-CWWs5tG3.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__cpPWV0{display:inline-block}.ds-spinner__cpPWV0:has(.ds-spinner__cpPWV0__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__cpPWV0{}.ds-spinner__cpPWV0--small{padding:1.5px}.ds-spinner__cpPWV0--medium{padding:3px}.ds-spinner__cpPWV0--large{padding:3px}.ds-spinner__cpPWV0--xLarge{padding:5.5px}.ds-spinner__cpPWV0--2xLarge{padding:5.5px}.ds-spinner__cpPWV0--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__cpPWV0{}.ds-spinner__cpPWV0--below{flex-direction:column;align-items:center}.ds-spinner__cpPWV0--right{flex-direction:row;align-items:center}.ds-spinner__cpPWV0__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__cpPWV0__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__cpPWV0__text--white{color:var(--ds-textColor-white)}.ds-spinner__cpPWV0__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__cpPWV0__segment--1{animation-delay:-0.3s}.ds-spinner__cpPWV0__segment--2{animation-delay:-0.2s}.ds-spinner__cpPWV0__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__cpPWV0__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__cpPWV0__segment--1{animation-delay:-0.6s}.ds-spinner__cpPWV0__segment--2{animation-delay:-0.4s}.ds-spinner__cpPWV0__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-paragraph-width-optimal{max-width:var(--ds-paragraphWidth-optimal)}.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__9el4Wy{display:inline-block}.ds-spinner__9el4Wy:has(.ds-spinner__9el4Wy__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__9el4Wy{}.ds-spinner__9el4Wy--small{padding:1.5px}.ds-spinner__9el4Wy--medium{padding:3px}.ds-spinner__9el4Wy--large{padding:3px}.ds-spinner__9el4Wy--xLarge{padding:5.5px}.ds-spinner__9el4Wy--2xLarge{padding:5.5px}.ds-spinner__9el4Wy--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__9el4Wy{}.ds-spinner__9el4Wy--below{flex-direction:column;align-items:center}.ds-spinner__9el4Wy--right{flex-direction:row;align-items:center}.ds-spinner__9el4Wy__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__9el4Wy__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__9el4Wy__text--white{color:var(--ds-textColor-white)}.ds-spinner__9el4Wy__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__9el4Wy__segment--1{animation-delay:-0.3s}.ds-spinner__9el4Wy__segment--2{animation-delay:-0.2s}.ds-spinner__9el4Wy__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__9el4Wy__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__9el4Wy__segment--1{animation-delay:-0.6s}.ds-spinner__9el4Wy__segment--2{animation-delay:-0.4s}.ds-spinner__9el4Wy__segment--3{animation-delay:-0.2s}}`;
 
 const SPINNER_SIZES = {
     'small': 10,
@@ -67,11 +67,11 @@ const DsSpinner = class extends Mixin(componentFactory('ds-spinner')) {
         const segmentClasses = (index) => classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
         const spinnerSizeValue = this.dsCustomSize ? `calc(${this.dsCustomSize} / 1.5833333333)` : `${sizeInPixels}px`;
-        return (h("div", { key: '299cf6ac396cf5bc5e9ce93b087df2f8068a8407', role: this.dsUseRoleAlert ? 'alert' : undefined, "aria-live": this.dsUseAriaLive ? 'polite' : undefined, class: classes, style: {
+        return (h("div", { key: '22d731a3381debe084f5caabf7f4f62f50c4caf4', 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 }, h("div", { key: 'db8fec76c6367e24fb052406dedc9a88d1b73f1e', class: `${baseClass}__spinner` }, h("div", { key: 'ccb9cc5c06d3db1bab2a1b2130ebf1e37429527f', class: segmentClasses(1) }), h("div", { key: '1fd9e787f933cfebea11b09d414b0b34a824fb6a', class: segmentClasses(2) }), h("div", { key: '6b0f98fb34941b7566a8873be4090de680bc929d', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '54af098abd9a7e06c73a149dd5da859362169e61' }, h("span", { key: '049186f1a35ff59b0e98102ed3c98d1f2d01cf30' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: '7a8da9b4ca9a13aecc150c60d3fbb9ca2774aa0e', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+            }, ...this.inheritedAttributes }, h("div", { key: '0e415eeb1da1e4cce51c5fe6c8e212d6b4c3fe7f', class: `${baseClass}__spinner` }, h("div", { key: 'f427fc3b0ee1a7f00014bc8f720710392bd1ffda', class: segmentClasses(1) }), h("div", { key: '796c7e0d493f524df33dd2995c7cd0b863a98499', class: segmentClasses(2) }), h("div", { key: 'e2959d5b0d51e0463fcf9659e6d4090bba44f2ac', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '3fdb1904b5edfc746ae25e7d2dcb4dd5cd9d6b7a' }, h("span", { key: '458410c6e7d5ef61f206993f44a842210de48838' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: 'e6f7214438611d6d944882c39d3ff7687331bb53', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
     }
 };
 declareComponentDependencies([h("ds-visually-hidden", null)]);

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent } from './index-DVRFDmEO.js';
-import { d as defaultLanguage, i as initialize, s as setLanguage, g as getLanguage } from './store-CJmuEAso.js';
+import { r as registerInstance, c as createEvent } from './index-BY4gL2mu.js';
+import { d as defaultLanguage, i as initialize, s as setLanguage, g as getLanguage } from './store-CWWs5tG3.js';
 
 const DsStore = class {
     constructor(hostRef) {

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

@@ -1,14 +1,14 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DVRFDmEO.js';
-import { c as cx } from './cx-gIO_QE3F.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-BY4gL2mu.js';
+import { c as cx } from './cx-BCNOIKle.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { t as tabsFactory } from './tabsFactory-C0BPawNG.js';
-import { g as getIconColourVariable } from './iconList-BeuglwyX.js';
-import { c as componentFactory } from './componentFactory-B_QxX88s.js';
-import './tabsContext-RZ5fuCaf.js';
-import './store-CJmuEAso.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { t as tabsFactory } from './tabsFactory-DUrmS62Q.js';
+import { g as getIconColourVariable } from './iconList-y2yISPfD.js';
+import { c as componentFactory } from './componentFactory-D1m7QO7a.js';
+import './tabsContext-BIhOkMrs.js';
+import './store-CWWs5tG3.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__cpPWV0.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__cpPWV0.sc-ds-tab{font-size:var(--ds-fontSize-18)}}.ds-tab__cpPWV0--selected.sc-ds-tab,.ds-tab__cpPWV0.sc-ds-tab:hover:not(.ds-tab__cpPWV0--selected),.ds-tab__cpPWV0.sc-ds-tab:active:not(.ds-tab__cpPWV0--selected){color:var(--ds-textColor-default)}.ds-tab__cpPWV0--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__cpPWV0--container.ds-tab__cpPWV0--selected.sc-ds-tab{background-color:var(--ds-bgColor-white)}.ds-tab__cpPWV0--container.ds-tab__cpPWV0--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__cpPWV0--container.ds-tab__cpPWV0--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__cpPWV0--container.sc-ds-tab:hover:not(.ds-tab__cpPWV0--selected){background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-tab__cpPWV0--container.sc-ds-tab:active:not(.ds-tab__cpPWV0--selected){background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-tab__cpPWV0--line.sc-ds-tab:focus-visible .ds-tab__cpPWV0__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__cpPWV0--line.ds-tab__cpPWV0--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__cpPWV0--line.sc-ds-tab:hover:not(.ds-tab__cpPWV0--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__cpPWV0--line.sc-ds-tab:active:not(.ds-tab__cpPWV0--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__cpPWV0.sc-ds-tab .ds-tab__cpPWV0__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__9el4Wy.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__9el4Wy.sc-ds-tab{font-size:var(--ds-fontSize-18)}}.ds-tab__9el4Wy--selected.sc-ds-tab,.ds-tab__9el4Wy.sc-ds-tab:hover:not(.ds-tab__9el4Wy--selected),.ds-tab__9el4Wy.sc-ds-tab:active:not(.ds-tab__9el4Wy--selected){color:var(--ds-textColor-default)}.ds-tab__9el4Wy--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__9el4Wy--container.ds-tab__9el4Wy--selected.sc-ds-tab{background-color:var(--ds-bgColor-white)}.ds-tab__9el4Wy--container.ds-tab__9el4Wy--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__9el4Wy--container.ds-tab__9el4Wy--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__9el4Wy--container.sc-ds-tab:hover:not(.ds-tab__9el4Wy--selected){background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-tab__9el4Wy--container.sc-ds-tab:active:not(.ds-tab__9el4Wy--selected){background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-tab__9el4Wy--line.sc-ds-tab:focus-visible .ds-tab__9el4Wy__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__9el4Wy--line.ds-tab__9el4Wy--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__9el4Wy--line.sc-ds-tab:hover:not(.ds-tab__9el4Wy--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__9el4Wy--line.sc-ds-tab:active:not(.ds-tab__9el4Wy--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__9el4Wy.sc-ds-tab .ds-tab__9el4Wy__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 Mixin(componentFactory('ds-tab'), tabsFactory) {
     constructor(hostRef) {
@@ -106,7 +106,7 @@ const DsTab = class extends Mixin(componentFactory('ds-tab'), tabsFactory) {
             [`${baseClass}--line`]: this.context?.variant === 'line',
             [`${baseClass}--selected`]: isSelected,
         });
-        return (h("div", { key: 'ae75a439a5169a270d6efc58cf7514597e1d10ad', ref: el => (this.tabElement = el), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, h("div", { key: 'ef08cacdea763f1fae8a53d5b5288d1c7749c1dc', class: `${baseClass}__content` }, h("slot", { key: 'b6677d3e5aa293c0e3e75e002470ddba2101f549', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && h(this.DsIcon, { key: '16d64ca02eabae826b9a75b956cd039e2bd88f5c', dsName: this.dsIconStart })), h("slot", { key: 'bb1b7e5a72e3aca2a4c85433b87f029e4cdb60a0', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && h("span", { key: '9ccf6bc28f27c841409643e7e301faec262ddbf9' }, this.dsText)), h("slot", { key: '6c6d0652750b3befbd7a8d9b79c7a7e832e18e52', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && h(this.DsIcon, { key: 'fd0bfe7afa6b5ebf7f2cbac21c0183342b39666f', dsName: this.dsIconEnd, dsColour: this.iconColour })))));
+        return (h("div", { key: '0a6c6d728f3cd2a94607841b48bbe3175ce8eb9c', ref: el => (this.tabElement = el), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, h("div", { key: '74dda6d84b96ba52bd27d7d26981dd0ac6aefa8d', class: `${baseClass}__content` }, h("slot", { key: 'd86cfa386a03900c9fc4ef8d8742b06ddbe1b894', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && h(this.DsIcon, { key: '8fefb92b506fdb891d0ae2e0b09e9e88ca3c3781', dsName: this.dsIconStart })), h("slot", { key: 'bfac3a742edef0839bfc7e4d172fc4c494ead1f2', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && h("span", { key: '59accad649404c11f74b4883e3296286871cb323' }, this.dsText)), h("slot", { key: 'b3816680181748f8a3726066657ae832eb2698e4', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && h(this.DsIcon, { key: '4a1c073f90003442bd88aaa1ec4bb77925ea5aed', dsName: this.dsIconEnd, dsColour: this.iconColour })))));
     }
 };
 declareComponentDependencies([h("ds-icon", { dsName: "" })]);

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

@@ -1,13 +1,13 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DVRFDmEO.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-BY4gL2mu.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-gIO_QE3F.js';
-import { t as transformTagName, f as throttle, i as ifDefined, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { t as tabsFactory } from './tabsFactory-C0BPawNG.js';
-import { c as componentFactory } from './componentFactory-B_QxX88s.js';
-import './tabsContext-RZ5fuCaf.js';
-import './store-CJmuEAso.js';
+import { c as cx } from './cx-BCNOIKle.js';
+import { t as transformTagName, m as throttle, a as ifDefined, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { t as tabsFactory } from './tabsFactory-DUrmS62Q.js';
+import { c as componentFactory } from './componentFactory-D1m7QO7a.js';
+import './tabsContext-BIhOkMrs.js';
+import './store-CWWs5tG3.js';
 
-const dsTablistCss = () => `.ds-no-style-leak.sc-ds-tablist *.sc-ds-tablist{all:unset;box-sizing:border-box;display:block}.ds-tablist__cpPWV0.sc-ds-tablist{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__scrollable.sc-ds-tablist{display:flex;gap:var(--ds-spacing-2xSmall);overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__scrollable.sc-ds-tablist:focus,.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__scrollable.sc-ds-tablist:focus-visible,.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__scrollable.sc-ds-tablist:-moz-focusring{outline:none;box-shadow:none}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__scrollable--container.sc-ds-tablist{background:linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) left/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) right/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) top/100% var(--ds-borderWidth-hairline) no-repeat, linear-gradient(var(--ds-bgColor-neutralLight), var(--ds-bgColor-neutralLight)) top/100% calc(100% - var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__scrollable--line.sc-ds-tablist{background:linear-gradient(var(--ds-bgColor-transparent-onLight), var(--ds-bgColor-transparent-onLight)) top/100% calc(100% - 1 * var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__button.sc-ds-tablist{position:absolute;top:0;bottom:0;display:flex;aspect-ratio:1;justify-content:center;align-items:center}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__button--backward.sc-ds-tablist{left:0}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__button--forward.sc-ds-tablist{right:0}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__button--container.sc-ds-tablist{border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-neutralLight)}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__button--line.sc-ds-tablist{border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__button--container.ds-tablist__cpPWV0__button--backward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 calc(-1 * var(--ds-spacing-small)) 0 0)}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__button--container.ds-tablist__cpPWV0__button--forward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 0 0 calc(-1 * var(--ds-spacing-small)))}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__button[hidden].sc-ds-tablist{display:none}.ds-tablist__cpPWV0.sc-ds-tablist .ds-tablist__cpPWV0__button__ds-button.sc-ds-tablist{width:100%;height:100%}`;
+const dsTablistCss = () => `.ds-no-style-leak.sc-ds-tablist *.sc-ds-tablist{all:unset;box-sizing:border-box;display:block}.ds-tablist__9el4Wy.sc-ds-tablist{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__scrollable.sc-ds-tablist{display:flex;gap:var(--ds-spacing-2xSmall);overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__scrollable.sc-ds-tablist:focus,.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__scrollable.sc-ds-tablist:focus-visible,.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__scrollable.sc-ds-tablist:-moz-focusring{outline:none;box-shadow:none}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__scrollable--container.sc-ds-tablist{background:linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) left/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) right/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) top/100% var(--ds-borderWidth-hairline) no-repeat, linear-gradient(var(--ds-bgColor-neutralLight), var(--ds-bgColor-neutralLight)) top/100% calc(100% - var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__scrollable--line.sc-ds-tablist{background:linear-gradient(var(--ds-bgColor-transparent-onLight), var(--ds-bgColor-transparent-onLight)) top/100% calc(100% - 1 * var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__button.sc-ds-tablist{position:absolute;top:0;bottom:0;display:flex;aspect-ratio:1;justify-content:center;align-items:center}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__button--backward.sc-ds-tablist{left:0}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__button--forward.sc-ds-tablist{right:0}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__button--container.sc-ds-tablist{border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-neutralLight)}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__button--line.sc-ds-tablist{border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__button--container.ds-tablist__9el4Wy__button--backward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 calc(-1 * var(--ds-spacing-small)) 0 0)}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__button--container.ds-tablist__9el4Wy__button--forward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 0 0 calc(-1 * var(--ds-spacing-small)))}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__button[hidden].sc-ds-tablist{display:none}.ds-tablist__9el4Wy.sc-ds-tablist .ds-tablist__9el4Wy__button__ds-button.sc-ds-tablist{width:100%;height:100%}`;
 
 const DsTablist = class extends Mixin(componentFactory('ds-tablist'), tabsFactory) {
     constructor(hostRef) {
@@ -40,9 +40,13 @@ const DsTablist = class extends Mixin(componentFactory('ds-tablist'), tabsFactor
     };
     throttledSetButtonsVisibility = throttle(this.setButtonsVisibility, this.RESIZE_THROTTLE_TIMEOUT);
     async tabConnected() {
+        if (!this.scrollableElement)
+            return;
         this.setButtonsVisibility(this.scrollableElement);
     }
     async tabDisconnected() {
+        if (!this.scrollableElement)
+            return;
         this.setButtonsVisibility(this.scrollableElement);
     }
     handleWindowResize() {
@@ -88,6 +92,9 @@ const DsTablist = class extends Mixin(componentFactory('ds-tablist'), tabsFactor
             return;
         let nextIndex = 0;
         switch (event.key) {
+            case 'Home': {
+                break;
+            }
             case 'Enter':
             case ' ': {
                 if (this.context?.currentTab === tabs[activeTabIndex].dsId)
@@ -103,10 +110,6 @@ const DsTablist = class extends Mixin(componentFactory('ds-tablist'), tabsFactor
                 nextIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
                 break;
             }
-            case 'Home': {
-                nextIndex = 0;
-                break;
-            }
             case 'End': {
                 nextIndex = tabs.length - 1;
                 break;
@@ -148,13 +151,13 @@ const DsTablist = class extends Mixin(componentFactory('ds-tablist'), tabsFactor
         const baseClass = cx('ds-tablist');
         const scrollableClass = `${baseClass}__scrollable`;
         const buttonClass = `${baseClass}__button`;
-        return (h("div", { key: 'facb4e5c32ae467b6a5696fdfcb32ace65174167', class: baseClass }, h("div", { key: 'e16066822780aa24e748ec7086b3aac920efd364', ref: el => (this.scrollableElement = el), class: classNames(scrollableClass, {
+        return (h("div", { key: '60e6cb85c51ff3d3c228c0b5bdd9d6ed643fa386', class: baseClass }, h("div", { key: 'e7cc8adee51bb770139dfde2576ee34c334f2166', ref: el => (this.scrollableElement = el), class: classNames(scrollableClass, {
                 [`${scrollableClass}--container`]: this.context?.variant === 'container',
                 [`${scrollableClass}--line`]: this.context?.variant === 'line',
-            }), role: "tablist", ...ifDefined('aria-label', this.dsAriaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), onScroll: this.handleScroll }, h("slot", { key: '460bd1c6016cdf0e6580d5982e9f4fd9137bd259' })), h("div", { key: '53c5fe325aacf605633dbe24ce86b43f779c8606', ref: el => (this.backwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--backward`, {
+            }), role: "tablist", ...ifDefined('aria-label', this.dsAriaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), onScroll: this.handleScroll }, h("slot", { key: '0308d59773042cd2af9287f564a3bc1529222d62' })), h("div", { key: '7351051ed214b0b79087c16be908a26c5ff6263d', ref: el => (this.backwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--backward`, {
                 [`${buttonClass}--container`]: this.context?.variant === 'container',
                 [`${buttonClass}--line`]: this.context?.variant === 'line',
-            }), "aria-hidden": "true", hidden: !this.showBackwardButton }, this.renderButton('backward')), h("div", { key: 'fab24ecfa00273931d5623479ac2bc7a45777e1c', ref: el => (this.forwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--forward`, {
+            }), "aria-hidden": "true", hidden: !this.showBackwardButton }, this.renderButton('backward')), h("div", { key: '203b45f676a3ee6fbac0251ae02cb8ea23418fb2', ref: el => (this.forwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--forward`, {
                 [`${buttonClass}--container`]: this.context?.variant === 'container',
                 [`${buttonClass}--line`]: this.context?.variant === 'line',
             }), "aria-hidden": "true", hidden: !this.showForwardButton }, this.renderButton('forward'))));

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

@@ -1,13 +1,13 @@
-import { M as Mixin, r as registerInstance, e as getElement, h } from './index-DVRFDmEO.js';
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-BY4gL2mu.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-gIO_QE3F.js';
-import { t as tabsFactory } from './tabsFactory-C0BPawNG.js';
-import { c as componentFactory } from './componentFactory-B_QxX88s.js';
-import './tabsContext-RZ5fuCaf.js';
-import './utils-BGPSuOgq.js';
-import './store-CJmuEAso.js';
+import { c as cx } from './cx-BCNOIKle.js';
+import { t as tabsFactory } from './tabsFactory-DUrmS62Q.js';
+import { c as componentFactory } from './componentFactory-D1m7QO7a.js';
+import './tabsContext-BIhOkMrs.js';
+import './utils-CRB48Q9-.js';
+import './store-CWWs5tG3.js';
 
-const dsTabpanelCss = () => `.ds-no-style-leak.sc-ds-tabpanel *.sc-ds-tabpanel{all:unset;box-sizing:border-box;display:block}.ds-tabpanel__cpPWV0.sc-ds-tabpanel{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-tabpanel__cpPWV0--container.sc-ds-tabpanel{border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tabpanel__cpPWV0--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__cpPWV0--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-medium)}}.ds-tabpanel__cpPWV0--container.ds-tabpanel__cpPWV0--padded.sc-ds-tabpanel{padding:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__cpPWV0--container.ds-tabpanel__cpPWV0--padded.sc-ds-tabpanel{padding:var(--ds-spacing-medium)}}.ds-tabpanel__cpPWV0[hidden].sc-ds-tabpanel{display:none}`;
+const dsTabpanelCss = () => `.ds-no-style-leak.sc-ds-tabpanel *.sc-ds-tabpanel{all:unset;box-sizing:border-box;display:block}.ds-tabpanel__9el4Wy.sc-ds-tabpanel{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-tabpanel__9el4Wy--container.sc-ds-tabpanel{border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tabpanel__9el4Wy--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__9el4Wy--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-medium)}}.ds-tabpanel__9el4Wy--container.ds-tabpanel__9el4Wy--padded.sc-ds-tabpanel{padding:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__9el4Wy--container.ds-tabpanel__9el4Wy--padded.sc-ds-tabpanel{padding:var(--ds-spacing-medium)}}.ds-tabpanel__9el4Wy[hidden].sc-ds-tabpanel{display:none}`;
 
 const DsTabpanel = class extends Mixin(componentFactory('ds-tabpanel'), tabsFactory) {
     constructor(hostRef) {
@@ -20,10 +20,10 @@ const DsTabpanel = class extends Mixin(componentFactory('ds-tabpanel'), tabsFact
     dsPadded = true;
     render() {
         const baseClass = cx('ds-tabpanel');
-        return (h("div", { key: '6d91e9c0ae540f71066c31928c717be1acf090d0', id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: 'c69bf6f708992fe08bebd4ad8535bc6f48d46166', id: this.dsId, class: classNames(baseClass, {
                 [`${baseClass}--container`]: this.context?.variant === 'container',
                 [`${baseClass}--padded`]: this.dsPadded,
-            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: '7fb5cc034e18a675c0236d433738113f16fe25b9' })));
+            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: '091708ead106bcfb48cfeeac6f4162608b48e325' })));
     }
 };
 DsTabpanel.style = dsTabpanelCss();

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

@@ -1,11 +1,11 @@
-import { M as Mixin, r as registerInstance, e as getElement, h } from './index-DVRFDmEO.js';
-import { c as cx } from './cx-gIO_QE3F.js';
-import { s as storeTabsContext, p as provideTabsContext } from './tabsContext-RZ5fuCaf.js';
-import { c as componentFactory } from './componentFactory-B_QxX88s.js';
-import './utils-BGPSuOgq.js';
-import './store-CJmuEAso.js';
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-BY4gL2mu.js';
+import { c as cx } from './cx-BCNOIKle.js';
+import { s as storeTabsContext, p as provideTabsContext } from './tabsContext-BIhOkMrs.js';
+import { c as componentFactory } from './componentFactory-D1m7QO7a.js';
+import './utils-CRB48Q9-.js';
+import './store-CWWs5tG3.js';
 
-const dsTabsCss = () => `.ds-no-style-leak.sc-ds-tabs *.sc-ds-tabs{all:unset;box-sizing:border-box;display:block}.ds-tabs__cpPWV0.sc-ds-tabs{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}`;
+const dsTabsCss = () => `.ds-no-style-leak.sc-ds-tabs *.sc-ds-tabs{all:unset;box-sizing:border-box;display:block}.ds-tabs__9el4Wy.sc-ds-tabs{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}`;
 
 const DsTabs = class extends Mixin(componentFactory('ds-tabs', { stopRootTracking: true })) {
     constructor(hostRef) {
@@ -45,7 +45,7 @@ const DsTabs = class extends Mixin(componentFactory('ds-tabs', { stopRootTrackin
     }
     render() {
         const baseClass = cx('ds-tabs');
-        return (h("div", { key: 'f6a1374d08011b0be56a4738835ef25a80a7069a', class: baseClass }, h("slot", { key: '85cb5f6e408873bede86ba315fa36afd0a5b51c2' })));
+        return (h("div", { key: '9ac888e3f6040c0f96795aa315848345b44338b0', class: baseClass }, h("slot", { key: '6a920af35a3df205d0e9aef5f843eca4e0ddb716' })));
     }
 };
 DsTabs.style = dsTabsCss();

package/dist/esm/ds-tag-group.entry.js

@@ -1,11 +1,11 @@
-import { M as Mixin, r as registerInstance, e as getElement, h } from './index-DVRFDmEO.js';
-import { t as transformTagName, i as ifDefined, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { c as cx } from './cx-gIO_QE3F.js';
-import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
-import { c as componentFactory } from './componentFactory-B_QxX88s.js';
-import './store-CJmuEAso.js';
+import { M as Mixin, r as registerInstance, e as getElement, h } from './index-BY4gL2mu.js';
+import { t as transformTagName, a as ifDefined, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { c as cx } from './cx-BCNOIKle.js';
+import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-Dzq9qJk7.js';
+import { c as componentFactory } from './componentFactory-D1m7QO7a.js';
+import './store-CWWs5tG3.js';
 
-const dsTagGroupCss = () => `.ds-tag-group__cpPWV0__tags.sc-ds-tag-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}`;
+const dsTagGroupCss = () => `.ds-tag-group__9el4Wy__tags.sc-ds-tag-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}`;
 
 const DsTagGroup = class extends Mixin(componentFactory('ds-tag-group', { stopRootTracking: true })) {
     constructor(hostRef) {
@@ -34,7 +34,7 @@ const DsTagGroup = class extends Mixin(componentFactory('ds-tag-group', { stopRo
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
-        return (h("div", { key: '60dca229a4e47da360bd54f3d32e8acd51908dd6', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: '8389032d5934b0b7259463c46529ddfe7218e827', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '6ed1eaf8c0f2913bd7ead73e6d108d7189d6288e', name: "label" }), h("slot", { key: '72b77ae86a5778285d353b184ee14eb7554e46d3', name: "assistiveText" })), h("div", { key: '7a9315fba9813a4a2a29a59030afc049d74b1da8', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '37b72f5f07405f4636a246e3888d4a05583799bf' }))));
+        return (h("div", { key: '10a9f91d8129b8f46d636d3283890afc24e91401', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'c040bfa3abd76bcfaa5994ff7b1c57d36e2b5ef7', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '8311510a194bb1c833e5ca9c5554f5ce92794d2b', name: "label" }), h("slot", { key: '9a3184d168ba1c0708276e25eab91c4cf84c40f9', name: "assistiveText" })), h("div", { key: '3127eee23cbbee234ab952de0bf7dfbe5f512290', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '250ac2c8e31205bb22f92640d1b0ab51689dd081' }))));
     }
 };
 declareComponentDependencies([h("ds-group-label", null)]);