@uh-design-system/component-library 1.4.0-rc.2 → 1.4.0-rc.3

package/dist/cjs/ds-action-list.cjs.entry.js

@@ -1,10 +1,9 @@
 'use strict';
 
-var index = require('./index-Cwc95KFn.js');
-var cx = require('./cx-BxEHiZno.js');
+var index = require('./index-C_LkFL3j.js');
+var cx = require('./cx-DmpPI8gl.js');
 var utils = require('./utils-DOIzXqfM.js');
-var actionMenuContext = require('./actionMenuContext--I6RtAhH.js');
-var store = require('./store-CZlFszsx.js');
+var store = require('./store-VaCHYhbQ.js');
 
 const actionListGroupLabel = () => {
     switch (store.getLanguage()) {
@@ -37,67 +36,68 @@ const actionListGroupLabelMultiSelect = () => {
     }
 };
 
-const dsActionListCss = ".ds-no-style-leak.sc-ds-action-list *.sc-ds-action-list{all:unset;box-sizing:border-box;display:block}.sc-ds-action-list-h{display:block}.ds-action-list__oSBnIJ.sc-ds-action-list{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);list-style:none;margin:0;padding:0}";
+const dsActionListCss = () => `.ds-no-style-leak.sc-ds-action-list *.sc-ds-action-list{all:unset;box-sizing:border-box;display:block}.ds-action-list__KmYz6O.sc-ds-action-list{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block;list-style:none;margin:0;padding:0}`;
 
 const DsActionList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     get el() { return index.getElement(this); }
-    isStandalone = false;
-    componentDidLoad() {
-        this.isStandalone = !actionMenuContext.consumeActionMenuContext(this.el);
+    dsRole = 'group';
+    ariaLabel;
+    ariaLabelledby;
+    get isStandalone() {
+        return this.dsRole === 'menu';
+    }
+    slotChangeHandler = () => {
         this.updateIndentation();
         if (this.isStandalone) {
             this.updateRovingTabindex();
         }
-        if (!this.isStandalone) {
-            this.applyGroupTitleLabel();
-        }
-        const slot = this.el.querySelector('ul')?.querySelector('slot') ?? this.el.querySelector('slot');
-        if (slot) {
-            slot.addEventListener('slotchange', () => {
-                this.updateIndentation();
-                if (this.isStandalone) {
-                    this.updateRovingTabindex();
-                }
-            });
+        this.updateAriaLabelling();
+    };
+    componentWillLoad() {
+        this.updateAriaLabelling();
+    }
+    componentDidLoad() {
+        this.updateIndentation();
+        if (this.isStandalone) {
+            this.updateRovingTabindex();
         }
+        const slot = this.el.querySelector('slot');
+        slot?.addEventListener('slotchange', this.slotChangeHandler);
     }
-    applyGroupTitleLabel() {
-        const listEl = this.el.querySelector('ul');
-        if (!listEl)
-            return;
+    disconnectedCallback() {
+        const slot = this.el.querySelector('slot');
+        slot?.removeEventListener('slotchange', this.slotChangeHandler);
+    }
+    updateAriaLabelling() {
         const titleTag = utils.transformTagName('ds-action-list-group-title', 'ds-action-list', this.el);
         const titleEl = this.el.querySelector(titleTag);
         if (titleEl) {
             const span = titleEl.querySelector('[id]');
             if (span?.id) {
-                listEl.removeAttribute('aria-label');
-                listEl.setAttribute('aria-labelledby', span.id);
+                this.ariaLabel = undefined;
+                this.ariaLabelledby = span.id;
+                return;
             }
-            return;
         }
         const itemTag = utils.transformTagName('ds-action-list-item', 'ds-action-list', this.el);
         const firstItem = this.el.querySelector(itemTag);
         const variant = firstItem?.dsVariant ?? firstItem?.getAttribute('ds-variant') ?? 'action';
-        let label;
         if (variant === 'single-select') {
-            label = actionListGroupLabelSingleSelect();
+            this.ariaLabel = actionListGroupLabelSingleSelect();
         }
         else if (variant === 'multi-select') {
-            label = actionListGroupLabelMultiSelect();
+            this.ariaLabel = actionListGroupLabelMultiSelect();
         }
         else {
-            label = actionListGroupLabel();
+            this.ariaLabel = actionListGroupLabel();
         }
-        listEl.removeAttribute('aria-labelledby');
-        listEl.setAttribute('aria-label', label);
+        this.ariaLabelledby = undefined;
     }
     handleLanguageChange() {
-        if (!this.isStandalone) {
-            this.applyGroupTitleLabel();
-        }
+        this.updateAriaLabelling();
     }
     getFocusableItems() {
         return this.getFocusableItemsFromEl(this.el);
@@ -237,9 +237,9 @@ const DsActionList = class {
     }
     render() {
         const baseClass = cx.cx('ds-action-list');
-        return (index.h("ul", { key: '7867e5dfde937caf074e98e1a79850fff70c8558', role: this.isStandalone ? 'presentation' : 'group', class: baseClass }, index.h("slot", { key: 'd756ad50a5517b8870489e320f53195eff3358bf' })));
+        return (index.h(index.Host, { key: '416359e7c52d95866c31b064c1e28b905f39749f', class: baseClass, role: this.dsRole, ...utils.ifDefined('aria-label', this.ariaLabel), ...utils.ifDefined('aria-labelledby', this.ariaLabelledby) }, index.h("slot", { key: '23b828f825c333f6230f1d03dac7eead9c6ed3de' })));
     }
 };
-DsActionList.style = dsActionListCss;
+DsActionList.style = dsActionListCss();
 
 exports.ds_action_list = DsActionList;

package/dist/cjs/ds-action-menu.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-Cwc95KFn.js');
+var index = require('./index-C_LkFL3j.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-DOIzXqfM.js');
-var cx = require('./cx-BxEHiZno.js');
+var cx = require('./cx-DmpPI8gl.js');
 var actionMenuContext = require('./actionMenuContext--I6RtAhH.js');
 
-const dsActionMenuCss = ".ds-no-style-leak.sc-ds-action-menu *.sc-ds-action-menu{all:unset;box-sizing:border-box;display:block}.sc-ds-action-menu-h{display:inline-block}.ds-action-menu__oSBnIJ.sc-ds-action-menu{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:inline-flex;position:relative}.ds-action-menu__oSBnIJ__trigger-wrapper.sc-ds-action-menu{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:inline-flex}.ds-action-menu__oSBnIJ__menu.sc-ds-action-menu{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-action-menu__oSBnIJ__menu[hidden].sc-ds-action-menu{display:none}.ds-action-menu__oSBnIJ__menu.sc-ds-action-menu{position:absolute;z-index:100;min-width:288px;background-color:var(--ds-bgColor-white);box-shadow:var(--ds-shadow-overlay);border-radius:var(--ds-borderRadius-none);border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);font-family:var(--ds-fontFamily-body);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ds-borderColor-default) transparent}.ds-action-menu__oSBnIJ__menu.sc-ds-action-menu::-webkit-scrollbar{width:6px}.ds-action-menu__oSBnIJ__menu.sc-ds-action-menu::-webkit-scrollbar-track{background:transparent}.ds-action-menu__oSBnIJ__menu.sc-ds-action-menu::-webkit-scrollbar-thumb{background-color:var(--ds-borderColor-default);border-radius:3px}.ds-action-menu__oSBnIJ__menu.sc-ds-action-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ds-borderColor-black)}.ds-action-menu__oSBnIJ__menu.sc-ds-action-menu{max-height:100dvh;padding:var(--ds-spacing-3xSmall) 0}.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--placement-bottom.sc-ds-action-menu,.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--placement-auto.sc-ds-action-menu{top:100%;margin-top:var(--ds-spacing-3xSmall)}.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--placement-top.sc-ds-action-menu{bottom:100%;margin-bottom:var(--ds-spacing-3xSmall)}.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--align-start.sc-ds-action-menu{left:0}.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--align-end.sc-ds-action-menu{right:0}.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--align-center.sc-ds-action-menu{left:50%;transform:translateX(-50%)}@supports (anchor-name: --test){.ds-action-menu__oSBnIJ__menu.sc-ds-action-menu{position:fixed}.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--placement-bottom.sc-ds-action-menu{inset-block:anchor(bottom) auto}.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--placement-top.sc-ds-action-menu{inset-block:auto anchor(top)}.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--placement-auto.sc-ds-action-menu{inset-block:anchor(bottom) auto;position-try-order:most-height;position-try-fallbacks:--ds-action-menu-top-start, --ds-action-menu-top-end, --ds-action-menu-top-center}.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--align-start.sc-ds-action-menu{inset-inline:anchor(left) auto}.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--align-end.sc-ds-action-menu{inset-inline:auto anchor(right)}.ds-action-menu__oSBnIJ__menu.ds-action-menu__oSBnIJ__menu--align-center.sc-ds-action-menu{inset-inline:anchor(center) auto}}@position-try --ds-action-menu-top-start{inset:auto auto anchor(top) anchor(left);margin-block:0 var(--ds-spacing-3xSmall);transform:none}@position-try --ds-action-menu-top-end{inset:auto anchor(right) anchor(top) auto;margin-block:0 var(--ds-spacing-3xSmall);transform:none}@position-try --ds-action-menu-top-center{inset:auto auto anchor(top) anchor(center);margin-block:0 var(--ds-spacing-3xSmall);transform:translateX(-50%)}";
+const dsActionMenuCss = () => `.ds-no-style-leak.sc-ds-action-menu *.sc-ds-action-menu{all:unset;box-sizing:border-box;display:block}.sc-ds-action-menu-h{display:inline-block}.ds-action-menu__KmYz6O.sc-ds-action-menu{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:inline-flex;position:relative}.ds-action-menu__KmYz6O__trigger-wrapper.sc-ds-action-menu{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:inline-flex}.ds-action-menu__KmYz6O__menu.sc-ds-action-menu{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-action-menu__KmYz6O__menu[hidden].sc-ds-action-menu{display:none}.ds-action-menu__KmYz6O__menu.sc-ds-action-menu{position:absolute;z-index:100;min-width:288px;background-color:var(--ds-bgColor-white);box-shadow:var(--ds-shadow-overlay);border-radius:var(--ds-borderRadius-none);border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);font-family:var(--ds-fontFamily-body);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ds-borderColor-default) transparent}.ds-action-menu__KmYz6O__menu.sc-ds-action-menu::-webkit-scrollbar{width:6px}.ds-action-menu__KmYz6O__menu.sc-ds-action-menu::-webkit-scrollbar-track{background:transparent}.ds-action-menu__KmYz6O__menu.sc-ds-action-menu::-webkit-scrollbar-thumb{background-color:var(--ds-borderColor-default);border-radius:3px}.ds-action-menu__KmYz6O__menu.sc-ds-action-menu::-webkit-scrollbar-thumb:hover{background-color:var(--ds-borderColor-black)}.ds-action-menu__KmYz6O__menu.sc-ds-action-menu{max-height:100dvh;padding:var(--ds-spacing-3xSmall) 0}.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--placement-bottom.sc-ds-action-menu,.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--placement-auto.sc-ds-action-menu{top:100%;margin-top:var(--ds-spacing-3xSmall)}.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--placement-top.sc-ds-action-menu{bottom:100%;margin-bottom:var(--ds-spacing-3xSmall)}.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--align-start.sc-ds-action-menu{left:0}.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--align-end.sc-ds-action-menu{right:0}.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--align-center.sc-ds-action-menu{left:50%;transform:translateX(-50%)}@supports (anchor-name: --test){.ds-action-menu__KmYz6O__menu.sc-ds-action-menu{position:fixed}.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--placement-bottom.sc-ds-action-menu{inset-block:anchor(bottom) auto}.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--placement-top.sc-ds-action-menu{inset-block:auto anchor(top)}.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--placement-auto.sc-ds-action-menu{inset-block:anchor(bottom) auto;position-try-order:most-height;position-try-fallbacks:--ds-action-menu-top-start, --ds-action-menu-top-end, --ds-action-menu-top-center}.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--align-start.sc-ds-action-menu{inset-inline:anchor(left) auto}.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--align-end.sc-ds-action-menu{inset-inline:auto anchor(right)}.ds-action-menu__KmYz6O__menu.ds-action-menu__KmYz6O__menu--align-center.sc-ds-action-menu{inset-inline:anchor(center) auto}}@position-try --ds-action-menu-top-start{inset:auto auto anchor(top) anchor(left);margin-block:0 var(--ds-spacing-3xSmall);transform:none}@position-try --ds-action-menu-top-end{inset:auto anchor(right) anchor(top) auto;margin-block:0 var(--ds-spacing-3xSmall);transform:none}@position-try --ds-action-menu-top-center{inset:auto auto anchor(top) anchor(center);margin-block:0 var(--ds-spacing-3xSmall);transform:translateX(-50%)}`;
 
 const actionMenuIdGenerator = utils.idGenerator('ds-action-menu');
 const MENU_MARGIN = 8;
@@ -14,8 +14,8 @@ const MENU_MIN_HEIGHT = 120;
 const DsActionMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dsOpen = index.createEvent(this, "dsOpen");
-        this.dsClose = index.createEvent(this, "dsClose");
+        this.dsOpen = index.createEvent(this, "dsOpen", 7);
+        this.dsClose = index.createEvent(this, "dsClose", 7);
     }
     get el() { return index.getElement(this); }
     menuId;
@@ -175,10 +175,10 @@ const DsActionMenu = class {
             maxHeight: this.dsMenuMaxHeight ?? 'none',
         };
         const menuClasses = index$1.classNames(`${baseClass}__menu`, `${baseClass}__menu--align-${this.dsAlign}`, `${baseClass}__menu--placement-${this.dsPlacement}`);
-        return (index.h("div", { key: 'dae52d98d89c7e03bb22495c6e3cbf8e66bceca5', class: baseClass }, index.h("div", { key: '9ef3b952b70b81e72ee5d44bae1ace6af58d3eb2', ref: el => (this.triggerWrapperRef = el), class: `${baseClass}__trigger-wrapper` }, this.renderTrigger(baseClass)), index.h("div", { key: 'c116601d26bf5e911c1da1e0ad932bb762e891e7', ref: el => (this.menuRef = el), id: this.menuId, role: "menu", "aria-labelledby": this.dsId, class: menuClasses, style: menuStyle, hidden: !this.isOpen }, index.h("slot", { key: '4055ac9e56b938382d5deb465070c4bd308ac662' }))));
+        return (index.h("div", { key: 'f9e75e06be5ee40da1f4afbb1bf5db8fae452bb7', class: baseClass }, index.h("div", { key: 'e3e5bc1981132aac9fbd08afc1cf9607978da01b', ref: el => (this.triggerWrapperRef = el), class: `${baseClass}__trigger-wrapper` }, this.renderTrigger(baseClass)), index.h("div", { key: '2dd2b8c9ac4d4ed0470abaeb66d9333c538b108b', ref: el => (this.menuRef = el), id: this.menuId, role: "menu", "aria-labelledby": this.dsId, class: menuClasses, style: menuStyle, hidden: !this.isOpen }, index.h("slot", { key: '7c63f9bc5b9548853012c975c0411a8a3df0ed00' }))));
     }
 };
-utils.declareComponentDependencies([index.h("ds-button", null)]);
-DsActionMenu.style = dsActionMenuCss;
+utils.declareComponentDependencies([index.h("ds-button", null), index.h("ds-icon", { dsName: "" })]);
+DsActionMenu.style = dsActionMenuCss();
 
 exports.ds_action_menu = DsActionMenu;

package/dist/cjs/ds-assistive-text.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-Cwc95KFn.js');
-var cx = require('./cx-BxEHiZno.js');
+var index = require('./index-C_LkFL3j.js');
+var cx = require('./cx-DmpPI8gl.js');
 var utils = require('./utils-DOIzXqfM.js');
 
-const dsAssistiveTextCss = ".ds-assistive-text__oSBnIJ.sc-ds-assistive-text{display:inline-block;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-block-start:var(--ds-spacing-3xSmall)}";
+const dsAssistiveTextCss = () => `.ds-assistive-text__KmYz6O.sc-ds-assistive-text{display:inline-block;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-block-start:var(--ds-spacing-3xSmall)}`;
 
 const dsAssistiveTextIdGenerator = utils.idGenerator('ds-assistive-text');
 const DsAssistiveText = class {
@@ -15,9 +15,9 @@ const DsAssistiveText = class {
     dsText;
     render() {
         const baseClass = cx.cx('ds-assistive-text');
-        return (index.h("small", { key: 'f9da763e0bb66c8a888a2344152923e89c13670a', class: baseClass, id: this.dsId }, index.h("slot", { key: '913fc3b11626c517805ddf12da782d99294a0195' }, this.dsText)));
+        return (index.h("small", { key: '9bfb0e81eb1ef34e38a55a04ff0af6aa3a9d565b', class: baseClass, id: this.dsId }, index.h("slot", { key: '179642f01fe69bb1871172a8365e9e20a66d5336' }, this.dsText)));
     }
 };
-DsAssistiveText.style = dsAssistiveTextCss;
+DsAssistiveText.style = dsAssistiveTextCss();
 
 exports.ds_assistive_text = DsAssistiveText;

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

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-Cwc95KFn.js');
+var index = require('./index-C_LkFL3j.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-BxEHiZno.js');
+var cx = require('./cx-DmpPI8gl.js');
 var constants = require('./constants-DQ8n-aJY.js');
 
-const dsBackdropCss = ".ds-backdrop__oSBnIJ {\n  z-index: var(--ds-backdrop-z-index);\n  max-width: 100vw;\n  max-height: 100vh;\n  max-height: 100dvh;\n}\n.ds-backdrop__oSBnIJ::backdrop {\n  background-color: var(--ds-bgColor-transparent-onLight);\n  transition: display var(--ds-backdrop-transition-out-duration) allow-discrete, overlay var(--ds-backdrop-transition-out-duration) allow-discrete, background-color var(--ds-backdrop-transition-out-duration) ease;\n}\n@starting-style {\n  .ds-backdrop__oSBnIJ::backdrop {\n    background-color: var(--ds-bgColor-transparent-onLight);\n  }\n}\n.ds-backdrop__oSBnIJ--in::backdrop {\n  transition: display var(--ds-backdrop-transition-in-duration) allow-discrete, overlay var(--ds-backdrop-transition-in-duration) allow-discrete, background-color var(--ds-backdrop-transition-in-duration) ease;\n}\n.ds-backdrop__oSBnIJ--open::backdrop {\n  background-color: var(--ds-bgColor-backdrop);\n}\n@media (prefers-reduced-motion: reduce) {\n  .ds-backdrop__oSBnIJ::backdrop {\n    transition: none;\n  }\n}\n\nhtml:has(.ds-modal__oSBnIJ--open) {\n  overflow: hidden;\n}";
+const dsBackdropCss = () => `.ds-backdrop__KmYz6O{z-index:var(--ds-backdrop-z-index);max-width:100vw;max-height:100vh;max-height:100dvh}.ds-backdrop__KmYz6O::backdrop{background-color:var(--ds-bgColor-transparent-onLight);transition:display var(--ds-backdrop-transition-out-duration) allow-discrete, overlay var(--ds-backdrop-transition-out-duration) allow-discrete, background-color var(--ds-backdrop-transition-out-duration) ease}@starting-style{.ds-backdrop__KmYz6O::backdrop{background-color:var(--ds-bgColor-transparent-onLight)}}.ds-backdrop__KmYz6O--in::backdrop{transition:display var(--ds-backdrop-transition-in-duration) allow-discrete, overlay var(--ds-backdrop-transition-in-duration) allow-discrete, background-color var(--ds-backdrop-transition-in-duration) ease}.ds-backdrop__KmYz6O--open::backdrop{background-color:var(--ds-bgColor-backdrop)}@media (prefers-reduced-motion: reduce){.ds-backdrop__KmYz6O::backdrop{transition:none}}html:has(.ds-modal__KmYz6O--open){overflow:hidden}`;
 
 const DsBackdrop = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dsBackdropClose = index.createEvent(this, "dsBackdropClose");
-        this.dsTransition = index.createEvent(this, "dsTransition");
+        this.dsBackdropClose = index.createEvent(this, "dsBackdropClose", 7);
+        this.dsTransition = index.createEvent(this, "dsTransition", 7);
     }
     get el() { return index.getElement(this); }
     mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -96,7 +96,7 @@ const DsBackdrop = class {
     };
     render() {
         const baseClass = cx.cx('ds-backdrop');
-        return (index.h("dialog", { key: '244b195df7f69b545fb3bd8acb7e6c72b7010834', ref: el => (this.dialogElement = el), role: this.dsRole, class: index$1.classNames(baseClass, this.dsDialogClasses, {
+        return (index.h("dialog", { key: '2c397bbb4612b57540f57b9efee6b637a1ce16ad', ref: el => (this.dialogElement = el), role: this.dsRole, class: index$1.classNames(baseClass, this.dsDialogClasses, {
                 [`${baseClass}--open`]: this.dsOpen,
                 [`${baseClass}--in`]: this.dsOpen && this.transitionInProgress,
             }), onClose: () => {
@@ -105,13 +105,17 @@ const DsBackdrop = class {
                 '--ds-backdrop-z-index': `${this.dsZIndex}`,
                 '--ds-backdrop-transition-in-duration': `${constants.BACKDROP_TRANSITION_IN_DURATION}ms`,
                 '--ds-backdrop-transition-out-duration': `${constants.BACKDROP_TRANSITION_OUT_DURATION}ms`,
-            } }, index.h("slot", { key: '88e5c2fd5352316f227b8da5a4d4e9e52f87a158' })));
+            } }, index.h("slot", { key: '97c03f43ff477edaf702dc06e5ca7820f92ecbc3' })));
     }
     static get watchers() { return {
-        "transitionInProgress": ["transitionInProgressObserver"],
-        "dsOpen": ["dsOpenObserver"]
+        "transitionInProgress": [{
+                "transitionInProgressObserver": 0
+            }],
+        "dsOpen": [{
+                "dsOpenObserver": 0
+            }]
     }; }
 };
-DsBackdrop.style = dsBackdropCss;
+DsBackdrop.style = dsBackdropCss();
 
 exports.ds_backdrop = DsBackdrop;

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-Cwc95KFn.js');
+var index = require('./index-C_LkFL3j.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-BxEHiZno.js');
+var cx = require('./cx-DmpPI8gl.js');
 var utils = require('./utils-DOIzXqfM.js');
 
-const dsBadgeCss = ".ds-badge__oSBnIJ.sc-ds-badge{display:flex;width:fit-content;min-width:24px;min-height:24px;padding:0 var(--ds-spacing-3xSmall, 4px);justify-content:center;align-items:center;gap:var(--ds-spacing-3xSmall, 4px);border-radius:12px}.ds-badge__oSBnIJ--default.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-default)}.ds-badge__oSBnIJ--success.sc-ds-badge{background-color:var(--ds-bgColor-success);color:var(--ds-textColor-success)}.ds-badge__oSBnIJ--attention.sc-ds-badge{background-color:var(--ds-bgColor-attention);color:var(--ds-textColor-attention)}.ds-badge__oSBnIJ--danger.sc-ds-badge{background-color:var(--ds-bgColor-danger);color:var(--ds-textColor-danger)}.ds-badge__oSBnIJ--info.sc-ds-badge{background-color:var(--ds-bgColor-info);color:var(--ds-textColor-info)}.ds-badge__oSBnIJ--notification.sc-ds-badge{background-color:var(--ds-palette-red-50);color:var(--ds-textColor-white)}.ds-badge__oSBnIJ--primary.sc-ds-badge{background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-badge__oSBnIJ--disabled.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-disabled-onLight)}.ds-badge__oSBnIJ__content.sc-ds-badge{display:flex;padding:0 var(--ds-spacing-3xSmall, 4px);flex-direction:column;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall, 8px)}.ds-badge__oSBnIJ__content__text.sc-ds-badge{white-space:nowrap}";
+const dsBadgeCss = () => `.ds-badge__KmYz6O.sc-ds-badge{display:flex;width:fit-content;min-width:24px;min-height:24px;padding:0 var(--ds-spacing-3xSmall, 4px);justify-content:center;align-items:center;gap:var(--ds-spacing-3xSmall, 4px);border-radius:12px}.ds-badge__KmYz6O--default.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-default)}.ds-badge__KmYz6O--success.sc-ds-badge{background-color:var(--ds-bgColor-success);color:var(--ds-textColor-success)}.ds-badge__KmYz6O--attention.sc-ds-badge{background-color:var(--ds-bgColor-attention);color:var(--ds-textColor-attention)}.ds-badge__KmYz6O--danger.sc-ds-badge{background-color:var(--ds-bgColor-danger);color:var(--ds-textColor-danger)}.ds-badge__KmYz6O--info.sc-ds-badge{background-color:var(--ds-bgColor-info);color:var(--ds-textColor-info)}.ds-badge__KmYz6O--notification.sc-ds-badge{background-color:var(--ds-palette-red-50);color:var(--ds-textColor-white)}.ds-badge__KmYz6O--primary.sc-ds-badge{background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-badge__KmYz6O--disabled.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-disabled-onLight)}.ds-badge__KmYz6O__content.sc-ds-badge{display:flex;padding:0 var(--ds-spacing-3xSmall, 4px);flex-direction:column;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall, 8px)}.ds-badge__KmYz6O__content__text.sc-ds-badge{white-space:nowrap}`;
 
 const dsBadgeIdGenerator = utils.idGenerator('ds-badge');
 const DsBadge = class {
@@ -23,10 +23,10 @@ const DsBadge = class {
     }
     render() {
         const baseClass = cx.cx('ds-badge');
-        return (index.h("div", { key: '53c09b35bf56859d3d97139b7dc6215c51df99aa', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`) }, index.h("div", { key: '27c85c4553c3bb817685d7bbd41f8bef80baa422', class: `${baseClass}__content` }, index.h("span", { key: '82554f348826c6df350fc021f5bc18039221af35', class: `ds-text-semibold-xs ${baseClass}__content__text`, id: this.dsId, "aria-label": this.dsAriaLabel }, index.h("slot", { key: 'dd918014f3d58e30487905fc5a49c4e13480167f' }, this.dsText, this.dsHiddenAssistiveText && index.h(this.DsVisuallyHidden, { key: '69b4ed285ae23f669cb01a893edf328bb61c976c', dsTag: "span" }, this.dsHiddenAssistiveText))))));
+        return (index.h("div", { key: '0b5952edb04767581882da7f90dcdab4f21898e4', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`) }, index.h("div", { key: '51e361f5d2675fa832b3bf701148f825f0e28051', class: `${baseClass}__content` }, index.h("span", { key: '70a50201cf6f70566a6259af6f6eacb918414055', class: `ds-text-semibold-xs ${baseClass}__content__text`, id: this.dsId, "aria-label": this.dsAriaLabel }, index.h("slot", { key: 'b6a8cef352c1be691d0f96a01d4e9aa498b9cd73' }, this.dsText, this.dsHiddenAssistiveText && index.h(this.DsVisuallyHidden, { key: 'ba35968b6ab35158cd186c5f3eb21477967da0ef', dsTag: "span" }, this.dsHiddenAssistiveText))))));
     }
 };
 utils.declareComponentDependencies([index.h("ds-visually-hidden", null)]);
-DsBadge.style = dsBadgeCss;
+DsBadge.style = dsBadgeCss();
 
 exports.ds_badge = DsBadge;

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

@@ -1,19 +1,19 @@
 'use strict';
 
-var index = require('./index-Cwc95KFn.js');
+var index = require('./index-C_LkFL3j.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-DOIzXqfM.js');
-var linkFactory = require('./linkFactory-CPwcejdS.js');
-var cx = require('./cx-BxEHiZno.js');
+var linkFactory = require('./linkFactory-D295gbjl.js');
+var cx = require('./cx-DmpPI8gl.js');
 
-const dsBreadcrumbCss = ".sc-ds-breadcrumb-h{display:contents}.ds-breadcrumb__oSBnIJ.sc-ds-breadcrumb{display:contents}.ds-breadcrumb__oSBnIJ--hidden.sc-ds-breadcrumb{display:none}.ds-breadcrumb__oSBnIJ__content.sc-ds-breadcrumb{display:inline;vertical-align:middle}.ds-breadcrumb__oSBnIJ__content__link.sc-ds-breadcrumb::part(link),.ds-breadcrumb__oSBnIJ__content__link.sc-ds-breadcrumb [part~=\"link\"]{vertical-align:middle}.ds-breadcrumb__oSBnIJ__content__current-page.sc-ds-breadcrumb{color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-style:normal;font-weight:600;line-height:var(--ds-lineHeight-large);vertical-align:middle;letter-spacing:var(--ds-letterSpacing-wide)}";
+const dsBreadcrumbCss = () => `.sc-ds-breadcrumb-h{display:contents}.ds-breadcrumb__KmYz6O.sc-ds-breadcrumb{display:contents}.ds-breadcrumb__KmYz6O--hidden.sc-ds-breadcrumb{display:none}.ds-breadcrumb__KmYz6O__content.sc-ds-breadcrumb{display:inline;vertical-align:middle}.ds-breadcrumb__KmYz6O__content__link.sc-ds-breadcrumb::part(link),.ds-breadcrumb__KmYz6O__content__link.sc-ds-breadcrumb [part~="link"]{vertical-align:middle}.ds-breadcrumb__KmYz6O__content__current-page.sc-ds-breadcrumb{color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-style:normal;font-weight:600;line-height:var(--ds-lineHeight-large);vertical-align:middle;letter-spacing:var(--ds-letterSpacing-wide)}`;
 
 const DsBreadcrumb = class extends index.Mixin(linkFactory.linkFactory) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
-        this.dsClick = index.createEvent(this, "dsClick");
-        this.dsIsHiddenChange = index.createEvent(this, "dsIsHiddenChange");
+        this.dsClick = index.createEvent(this, "dsClick", 7);
+        this.dsIsHiddenChange = index.createEvent(this, "dsIsHiddenChange", 7);
     }
     get el() { return index.getElement(this); }
     dsIsHiddenChange;
@@ -50,15 +50,17 @@ const DsBreadcrumb = class extends index.Mixin(linkFactory.linkFactory) {
     render() {
         const baseClass = cx.cx('ds-breadcrumb');
         const contentClass = `${baseClass}__content`;
-        return (index.h(index.Host, { key: '183b930bb862f8e3f333175dda41f68d734c55b4', role: "listitem" }, index.h("div", { key: '4d534134e1f8243a26a7aad8904266b7473b686c', class: index$1.classNames(baseClass, {
+        return (index.h(index.Host, { key: '25803662c47dfe56c8ba57c8f4630144d869ac65', role: "listitem" }, index.h("div", { key: '2d6932977932da3af5fddbeb07e19ef7209021a1', class: index$1.classNames(baseClass, {
                 [`${baseClass}--hidden`]: this.dsIsHidden,
-            }) }, index.h("div", { key: '0c965c79a367650945bfcc0a406c57daf11dad4e', class: contentClass }, this.dsHasSeparator ? index.h(this.DsBreadcrumbsSeparator, { dsIcon: this.dsSeparatorIcon }) : null, this.dsIsCurrentPage ? this.renderCurrentPageCrumb(contentClass) : this.renderLinkCrumb(contentClass)))));
+            }) }, index.h("div", { key: 'a631c7e8a8cfb5c2d4a0bbdd455d9191b9239883', class: contentClass }, this.dsHasSeparator ? index.h(this.DsBreadcrumbsSeparator, { dsIcon: this.dsSeparatorIcon }) : null, this.dsIsCurrentPage ? this.renderCurrentPageCrumb(contentClass) : this.renderLinkCrumb(contentClass)))));
     }
     static get watchers() { return {
-        "dsIsHidden": ["dsIsHiddenObserver"]
+        "dsIsHidden": [{
+                "dsIsHiddenObserver": 0
+            }]
     }; }
 };
 utils.declareComponentDependencies([index.h("ds-link", { dsText: "" }), index.h("ds-breadcrumbs-separator", null)]);
-DsBreadcrumb.style = dsBreadcrumbCss;
+DsBreadcrumb.style = dsBreadcrumbCss();
 
 exports.ds_breadcrumb = DsBreadcrumb;

package/dist/cjs/ds-breadcrumbs-collapsible.cjs.entry.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-Cwc95KFn.js');
+var index = require('./index-C_LkFL3j.js');
 var utils = require('./utils-DOIzXqfM.js');
 
-const dsBreadcrumbsCollapsibleCss = ":host{display:contents}";
+const dsBreadcrumbsCollapsibleCss = () => `:host{display:contents}`;
 
 const DsBreadcrumbsCollapsible = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dsExpandButtonClick = index.createEvent(this, "dsExpandButtonClick");
+        this.dsExpandButtonClick = index.createEvent(this, "dsExpandButtonClick", 7);
     }
     get el() { return index.getElement(this); }
     dsExpandButtonClick;
@@ -35,10 +35,10 @@ const DsBreadcrumbsCollapsible = class {
         this.collapsibleTarget = this.el.querySelector(this.DsBreadcrumb);
     };
     render() {
-        return (index.h(index.Fragment, { key: '2fc049ae41fbd5da1d55a99a72b326698d0e2ebf' }, index.h(this.DsBreadcrumbsExpandButton, { key: '3255e9c994e00d90d767e6233b820ea377ba34f3', dsIsHidden: this.dsIsExpandButtonHidden, dsSeparatorIcon: this.dsSeparatorIcon }), index.h("slot", { key: '9cc45e02309010cd3f84892f80dcb18b1744f1f2', onSlotchange: this.handleDefaultSlotChange })));
+        return (index.h(index.Fragment, { key: '6c33c1954b52afe65a0c83e97c1a2a70a4977a78' }, index.h(this.DsBreadcrumbsExpandButton, { key: '8507f3df6f6e9941f1104529f77ad101df4f8c05', dsIsHidden: this.dsIsExpandButtonHidden, dsSeparatorIcon: this.dsSeparatorIcon }), index.h("slot", { key: '7cd48b130da55341ba29d24b7bfb85281c22b27c', onSlotchange: this.handleDefaultSlotChange })));
     }
 };
 utils.declareComponentDependencies([index.h("ds-breadcrumbs-expand-button", null)]);
-DsBreadcrumbsCollapsible.style = dsBreadcrumbsCollapsibleCss;
+DsBreadcrumbsCollapsible.style = dsBreadcrumbsCollapsibleCss();
 
 exports.ds_breadcrumbs_collapsible = DsBreadcrumbsCollapsible;

package/dist/cjs/ds-breadcrumbs-expand-button.cjs.entry.js

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-Cwc95KFn.js');
+var index = require('./index-C_LkFL3j.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var store = require('./store-CZlFszsx.js');
-var cx = require('./cx-BxEHiZno.js');
+var store = require('./store-VaCHYhbQ.js');
+var cx = require('./cx-DmpPI8gl.js');
 var utils = require('./utils-DOIzXqfM.js');
 
-const dsBreadcrumbsExpandButtonCss = ".ds-breadcrumbs-expand-button__oSBnIJ.sc-ds-breadcrumbs-expand-button{display:inline;vertical-align:middle}.ds-breadcrumbs-expand-button__oSBnIJ--hidden.sc-ds-breadcrumbs-expand-button{display:none}.ds-breadcrumbs-expand-button__oSBnIJ__button.sc-ds-breadcrumbs-expand-button: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-breadcrumbs-expand-button__oSBnIJ__button.sc-ds-breadcrumbs-expand-button{background:none;border:none;padding:0;margin:0;overflow:visible;text-transform:none;display:inline;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:inherit;font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);vertical-align:middle;line-height:1.375;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-breadcrumbs-expand-button__oSBnIJ__button.sc-ds-breadcrumbs-expand-button:hover,.ds-breadcrumbs-expand-button__oSBnIJ__button.sc-ds-breadcrumbs-expand-button:active{text-decoration-thickness:13%;text-underline-offset:12%}";
+const dsBreadcrumbsExpandButtonCss = () => `.ds-breadcrumbs-expand-button__KmYz6O.sc-ds-breadcrumbs-expand-button{display:inline;vertical-align:middle}.ds-breadcrumbs-expand-button__KmYz6O--hidden.sc-ds-breadcrumbs-expand-button{display:none}.ds-breadcrumbs-expand-button__KmYz6O__button.sc-ds-breadcrumbs-expand-button: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-breadcrumbs-expand-button__KmYz6O__button.sc-ds-breadcrumbs-expand-button{background:none;border:none;padding:0;margin:0;overflow:visible;text-transform:none;display:inline;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:inherit;font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);vertical-align:middle;line-height:1.375;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-breadcrumbs-expand-button__KmYz6O__button.sc-ds-breadcrumbs-expand-button:hover,.ds-breadcrumbs-expand-button__KmYz6O__button.sc-ds-breadcrumbs-expand-button:active{text-decoration-thickness:13%;text-underline-offset:12%}`;
 
 const DsBreadcrumbsExpandButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dsClick = index.createEvent(this, "dsClick");
+        this.dsClick = index.createEvent(this, "dsClick", 7);
     }
     get el() { return index.getElement(this); }
     dsClick;
@@ -35,12 +35,12 @@ const DsBreadcrumbsExpandButton = class {
     };
     render() {
         const baseClass = cx.cx('ds-breadcrumbs-expand-button');
-        return (index.h("div", { key: '40c49a1bccac13857734865d547c3d724c604c1a', role: "listitem", class: index$1.classNames(baseClass, {
+        return (index.h("div", { key: '30a3a18d9c081633cb6a7d757895f8e6e4408c35', role: "listitem", class: index$1.classNames(baseClass, {
                 [`${baseClass}--hidden`]: this.dsIsHidden,
-            }) }, index.h(this.DsBreadcrumbsSeparator, { key: '36cfc5e91b46c5a32aaa0f32ad6097fb73f50988', dsIcon: this.dsSeparatorIcon }), index.h("button", { key: 'b3acf675cf0ddaa1cba09db95c5e809d11f6bf55', "aria-label": this.showFullBreadcrumbTrail, class: `${baseClass}__button`, onClick: this.handleExpandButtonClick }, "\u2026")));
+            }) }, index.h(this.DsBreadcrumbsSeparator, { key: '72464f4258717ed7619cd42ac072f1678bc90580', dsIcon: this.dsSeparatorIcon }), index.h("button", { key: 'efc2b73e6a84262d6dadfe1a9cd440c611d93a85', "aria-label": this.showFullBreadcrumbTrail, class: `${baseClass}__button`, onClick: this.handleExpandButtonClick }, "\u2026")));
     }
 };
 utils.declareComponentDependencies([index.h("ds-breadcrumbs-separator", null)]);
-DsBreadcrumbsExpandButton.style = dsBreadcrumbsExpandButtonCss;
+DsBreadcrumbsExpandButton.style = dsBreadcrumbsExpandButtonCss();
 
 exports.ds_breadcrumbs_expand_button = DsBreadcrumbsExpandButton;

package/dist/cjs/ds-breadcrumbs-separator.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-Cwc95KFn.js');
-var cx = require('./cx-BxEHiZno.js');
+var index = require('./index-C_LkFL3j.js');
+var cx = require('./cx-DmpPI8gl.js');
 var utils = require('./utils-DOIzXqfM.js');
 
-const dsBreadcrumbsSeparatorCss = ".ds-breadcrumbs-separator__oSBnIJ.sc-ds-breadcrumbs-separator{display:inline-block;line-height:var(--ds-lineHeight-large);vertical-align:middle;margin-left:var(--ds-spacing-3xSmall, 4px);margin-right:var(--ds-spacing-3xSmall, 4px)}@media (min-width: 60rem){.ds-breadcrumbs-separator__oSBnIJ.sc-ds-breadcrumbs-separator{margin-left:var(--ds-spacing-2xSmall, 8px);margin-right:var(--ds-spacing-2xSmall, 8px)}}";
+const dsBreadcrumbsSeparatorCss = () => `.ds-breadcrumbs-separator__KmYz6O.sc-ds-breadcrumbs-separator{display:inline-block;line-height:var(--ds-lineHeight-large);vertical-align:middle;margin-left:var(--ds-spacing-3xSmall, 4px);margin-right:var(--ds-spacing-3xSmall, 4px)}@media (min-width: 60rem){.ds-breadcrumbs-separator__KmYz6O.sc-ds-breadcrumbs-separator{margin-left:var(--ds-spacing-2xSmall, 8px);margin-right:var(--ds-spacing-2xSmall, 8px)}}`;
 
 const DsBreadcrumbsSeparator = class {
     constructor(hostRef) {
@@ -17,9 +17,9 @@ const DsBreadcrumbsSeparator = class {
     }
     render() {
         const baseClass = cx.cx('ds-breadcrumbs-separator');
-        return index.h(this.DsIcon, { key: '30d5cb00e2361d2e0600b3d9abc86363beda1940', class: baseClass, dsName: this.dsIcon, dsSize: "1rem" });
+        return index.h(this.DsIcon, { key: 'e8cf0c89c14a260b6b1f13e0f8efeca24cfec458', class: baseClass, dsName: this.dsIcon, dsSize: "1rem" });
     }
 };
-DsBreadcrumbsSeparator.style = dsBreadcrumbsSeparatorCss;
+DsBreadcrumbsSeparator.style = dsBreadcrumbsSeparatorCss();
 
 exports.ds_breadcrumbs_separator = DsBreadcrumbsSeparator;

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

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-Cwc95KFn.js');
-var cx = require('./cx-BxEHiZno.js');
-var store = require('./store-CZlFszsx.js');
+var index = require('./index-C_LkFL3j.js');
+var cx = require('./cx-DmpPI8gl.js');
+var store = require('./store-VaCHYhbQ.js');
 var utils = require('./utils-CRkX9b81.js');
 
-const dsBreadcrumbsCss = ".ds-breadcrumbs__oSBnIJ{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:24px;line-height:var(--ds-lineHeight-small)}@media (min-width: 60rem){.ds-breadcrumbs__oSBnIJ{min-height:32px}}.ds-breadcrumbs__oSBnIJ__breadcrumbs{display:inline-block;vertical-align:middle;margin:0;padding:1px 0;list-style:none;line-height:var(--ds-lineHeight-small);font-size:var(--ds-fontSize-14)}@media (min-width: 60rem){.ds-breadcrumbs__oSBnIJ__breadcrumbs{padding:var(--ds-spacing-4xSmall, 2px) 0;font-size:var(--ds-fontSize-16)}}";
+const dsBreadcrumbsCss = () => `.ds-breadcrumbs__KmYz6O{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:24px;line-height:var(--ds-lineHeight-small)}@media (min-width: 60rem){.ds-breadcrumbs__KmYz6O{min-height:32px}}.ds-breadcrumbs__KmYz6O__breadcrumbs{display:inline-block;vertical-align:middle;margin:0;padding:1px 0;list-style:none;line-height:var(--ds-lineHeight-small);font-size:var(--ds-fontSize-14)}@media (min-width: 60rem){.ds-breadcrumbs__KmYz6O__breadcrumbs{padding:var(--ds-spacing-4xSmall, 2px) 0;font-size:var(--ds-fontSize-16)}}`;
 
 const DsBreadcrumbs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dsSizeChange = index.createEvent(this, "dsSizeChange");
+        this.dsSizeChange = index.createEvent(this, "dsSizeChange", 7);
     }
     isGreaterThanEqualMediumMediaQuery = utils.isGreaterThanEqualBreakpointMediaQuery('medium');
     get el() { return index.getElement(this); }
@@ -44,12 +44,14 @@ const DsBreadcrumbs = class {
     }
     render() {
         const baseClass = cx.cx('ds-breadcrumbs');
-        return (index.h("nav", { key: '01e0f590dfd6600ed96473b40a70ae6f5af1c24d', class: baseClass, "aria-label": this.dsAriaLabel || this.breadcrumb }, index.h("div", { key: 'b24c8ecbb9070c47fbb05c7df370185f4d9bec5a', role: "list", class: `${baseClass}__breadcrumbs` }, index.h("slot", { key: '061e679827111d236fa5777421e7c71608af14e0' }))));
+        return (index.h("nav", { key: '32200ea636a5e0b12dd1b2aff968063aa9a292b1', class: baseClass, "aria-label": this.dsAriaLabel || this.breadcrumb }, index.h("div", { key: 'b68af73fe06dadfbbdbcc1327cc79e7896497fff', role: "list", class: `${baseClass}__breadcrumbs` }, index.h("slot", { key: '2d7af502821d4760b5e3d48a6132035d6df7435a' }))));
     }
     static get watchers() { return {
-        "size": ["sizeObserver"]
+        "size": [{
+                "sizeObserver": 0
+            }]
     }; }
 };
-DsBreadcrumbs.style = dsBreadcrumbsCss;
+DsBreadcrumbs.style = dsBreadcrumbsCss();
 
 exports.ds_breadcrumbs = DsBreadcrumbs;