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

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

@@ -0,0 +1,243 @@
+import { r as registerInstance, d as getElement, h } from './index-B4ZCBfpo.js';
+import { c as cx } from './cx-hUnOoCpm.js';
+import { t as transformTagName } from './utils-J5Ghj1_T.js';
+import { c as consumeActionMenuContext } from './actionMenuContext-Ccf9CXPb.js';
+import { g as getLanguage } from './store-I792JNgf.js';
+
+const actionListGroupLabel = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Toiminnallisuudet';
+        case 'sv':
+            return 'Åtgärder';
+        default:
+            return 'Actions';
+    }
+};
+const actionListGroupLabelSingleSelect = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Valitse yksi';
+        case 'sv':
+            return 'Välj ett';
+        default:
+            return 'Choose one';
+    }
+};
+const actionListGroupLabelMultiSelect = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Monivalinta';
+        case 'sv':
+            return 'Välj flera';
+        default:
+            return 'Choose multiple';
+    }
+};
+
+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 DsActionList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    isStandalone = false;
+    componentDidLoad() {
+        this.isStandalone = !consumeActionMenuContext(this.el);
+        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();
+                }
+            });
+        }
+    }
+    applyGroupTitleLabel() {
+        const listEl = this.el.querySelector('ul');
+        if (!listEl)
+            return;
+        const titleTag = 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);
+            }
+            return;
+        }
+        const itemTag = 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();
+        }
+        else if (variant === 'multi-select') {
+            label = actionListGroupLabelMultiSelect();
+        }
+        else {
+            label = actionListGroupLabel();
+        }
+        listEl.removeAttribute('aria-labelledby');
+        listEl.setAttribute('aria-label', label);
+    }
+    handleLanguageChange() {
+        if (!this.isStandalone) {
+            this.applyGroupTitleLabel();
+        }
+    }
+    getFocusableItems() {
+        return this.getFocusableItemsFromEl(this.el);
+    }
+    getFocusableItemsFromEl(el) {
+        const itemTag = transformTagName('ds-action-list-item', 'ds-action-list', this.el);
+        return Array.from(el.querySelectorAll(itemTag)).filter(item => !item.dsDisabled);
+    }
+    getSiblingLists() {
+        const parent = this.el.parentElement;
+        if (!parent)
+            return [this.el];
+        const listTag = transformTagName('ds-action-list', 'ds-action-list', this.el);
+        return Array.from(parent.querySelectorAll(`:scope > ${listTag}`));
+    }
+    updateIndentation() {
+        const itemTag = transformTagName('ds-action-list-item', 'ds-action-list', this.el);
+        const allItems = Array.from(this.el.querySelectorAll(`:scope > ${itemTag}`));
+        const hasIcon = allItems.some(item => item.dsIcon && item.dsVariant !== 'multi-select');
+        allItems.forEach(item => {
+            if (item.dsVariant !== 'multi-select') {
+                item.dsIndented = hasIcon && !item.dsIcon;
+            }
+        });
+    }
+    updateRovingTabindex(activeItem) {
+        const items = this.getFocusableItems();
+        const target = activeItem ?? items[0];
+        items.forEach(item => {
+            item.setTabIndex?.(item === target ? 0 : -1);
+        });
+    }
+    handleItemSelect(event) {
+        const { variant, selected } = event.detail;
+        const itemTag = transformTagName('ds-action-list-item', 'ds-action-list', this.el);
+        const allItems = Array.from(this.el.querySelectorAll(itemTag));
+        if (variant === 'single-select') {
+            allItems.forEach(item => {
+                item.dsSelected = item === event.target ? selected : false;
+            });
+        }
+        else if (variant === 'multi-select') {
+            const target = allItems.find(item => item === event.target);
+            if (target)
+                target.dsSelected = selected;
+        }
+    }
+    handleKeyDown(event) {
+        const items = this.getFocusableItems();
+        if (items.length === 0)
+            return;
+        const activeEl = document.activeElement;
+        const currentIndex = items.findIndex(item => item.contains(activeEl));
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                if (currentIndex < items.length - 1) {
+                    items[currentIndex + 1].setFocus?.();
+                    if (this.isStandalone)
+                        this.updateRovingTabindex(items[currentIndex + 1]);
+                }
+                else if (!this.isStandalone) {
+                    const lists = this.getSiblingLists();
+                    const myIndex = lists.indexOf(this.el);
+                    const nextList = lists[myIndex + 1] ?? lists[0];
+                    this.getFocusableItemsFromEl(nextList)[0]?.setFocus?.();
+                }
+                else {
+                    items[0].setFocus?.();
+                    this.updateRovingTabindex(items[0]);
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (currentIndex > 0) {
+                    items[currentIndex - 1].setFocus?.();
+                    if (this.isStandalone)
+                        this.updateRovingTabindex(items[currentIndex - 1]);
+                }
+                else if (!this.isStandalone) {
+                    const lists = this.getSiblingLists();
+                    const myIndex = lists.indexOf(this.el);
+                    const prevList = lists[myIndex - 1] ?? lists[lists.length - 1];
+                    const prevItems = this.getFocusableItemsFromEl(prevList);
+                    prevItems[prevItems.length - 1]?.setFocus?.();
+                }
+                else {
+                    items[items.length - 1].setFocus?.();
+                    this.updateRovingTabindex(items[items.length - 1]);
+                }
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                if (!this.isStandalone) {
+                    const firstList = this.getSiblingLists()[0];
+                    this.getFocusableItemsFromEl(firstList)[0]?.setFocus?.();
+                }
+                else {
+                    items[0].setFocus?.();
+                    this.updateRovingTabindex(items[0]);
+                }
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                if (!this.isStandalone) {
+                    const lists = this.getSiblingLists();
+                    const lastListItems = this.getFocusableItemsFromEl(lists[lists.length - 1]);
+                    lastListItems[lastListItems.length - 1]?.setFocus?.();
+                }
+                else {
+                    items[items.length - 1].setFocus?.();
+                    this.updateRovingTabindex(items[items.length - 1]);
+                }
+                break;
+            }
+            default: {
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                    event.preventDefault();
+                    const char = event.key.toLowerCase();
+                    const allItems = this.isStandalone
+                        ? this.getFocusableItems()
+                        : [].concat(...this.getSiblingLists().map(l => this.getFocusableItemsFromEl(l)));
+                    const activeEl = document.activeElement;
+                    const currentIndex = allItems.findIndex(item => item.contains(activeEl));
+                    const searchOrder = [...allItems.slice(currentIndex + 1), ...allItems.slice(0, currentIndex + 1)];
+                    const match = searchOrder.find(item => {
+                        const label = item.dsLabel ?? item.getAttribute('ds-label') ?? '';
+                        return label.trim().toLowerCase().startsWith(char);
+                    });
+                    match?.setFocus?.();
+                }
+            }
+        }
+    }
+    render() {
+        const baseClass = cx('ds-action-list');
+        return (h("ul", { key: '7867e5dfde937caf074e98e1a79850fff70c8558', role: this.isStandalone ? 'presentation' : 'group', class: baseClass }, h("slot", { key: 'd756ad50a5517b8870489e320f53195eff3358bf' })));
+    }
+};
+DsActionList.style = dsActionListCss;
+
+export { DsActionList as ds_action_list };

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

@@ -0,0 +1,182 @@
+import { h, r as registerInstance, c as createEvent, d as getElement } from './index-B4ZCBfpo.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { i as idGenerator, d as declareComponentDependencies, t as transformTagName } from './utils-J5Ghj1_T.js';
+import { c as cx } from './cx-hUnOoCpm.js';
+import { s as storeActionMenuContext, p as provideActionMenuContext } from './actionMenuContext-Ccf9CXPb.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 actionMenuIdGenerator = idGenerator('ds-action-menu');
+const MENU_MARGIN = 8;
+const MENU_MIN_HEIGHT = 120;
+const DsActionMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsOpen = createEvent(this, "dsOpen");
+        this.dsClose = createEvent(this, "dsClose");
+    }
+    get el() { return getElement(this); }
+    menuId;
+    triggerWrapperRef;
+    menuRef;
+    dsId = actionMenuIdGenerator.next().value;
+    dsButtonText = '';
+    dsButtonVariant = 'secondary';
+    dsButtonColour = 'blue';
+    dsButtonSize = 'medium';
+    dsIconOnly = false;
+    dsIcon = '';
+    dsAlign = 'start';
+    dsPlacement = 'auto';
+    dsMenuWidth;
+    dsMenuMaxHeight;
+    dsAriaLabel;
+    dsDisabled = false;
+    dsOpen;
+    dsClose;
+    isOpen = false;
+    componentWillLoad() {
+        this.menuId = `${this.dsId}-menu`;
+        storeActionMenuContext(this.el, { closeMenu: () => this.closeMenu() });
+    }
+    componentDidLoad() {
+        this.updateContext();
+        this.applyAnchorStyles();
+    }
+    componentDidRender() {
+        this.applyAnchorStyles();
+        this.constrainMenuHeight();
+    }
+    applyAnchorStyles() {
+        const anchorName = `--ds-action-menu-${this.dsId}`;
+        this.triggerWrapperRef?.style.setProperty('anchor-name', anchorName);
+        this.menuRef?.style.setProperty('position-anchor', anchorName);
+    }
+    constrainMenuHeight() {
+        if (!this.menuRef || this.dsMenuMaxHeight || !this.isOpen)
+            return;
+        const triggerRect = this.triggerWrapperRef?.getBoundingClientRect();
+        if (!triggerRect)
+            return;
+        const menuRect = this.menuRef.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const openingUpward = menuRect.bottom <= triggerRect.top + 1;
+        const maxH = openingUpward ? triggerRect.top - MENU_MARGIN : viewportHeight - triggerRect.bottom - MENU_MARGIN;
+        this.menuRef.style.maxHeight = `${Math.max(maxH, MENU_MIN_HEIGHT)}px`;
+    }
+    updateContext() {
+        provideActionMenuContext(this.el, { closeMenu: () => this.closeMenu() });
+    }
+    async open() {
+        this.openMenu();
+    }
+    async close() {
+        this.closeMenu();
+    }
+    async toggle() {
+        if (this.isOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu();
+        }
+    }
+    openMenu(focusTarget = 'first') {
+        if (this.dsDisabled || this.isOpen)
+            return;
+        this.isOpen = true;
+        this.dsOpen.emit();
+        this.updateContext();
+        requestAnimationFrame(() => {
+            if (focusTarget === 'last') {
+                this.focusLastItem();
+            }
+            else {
+                this.focusFirstItem();
+            }
+        });
+    }
+    closeMenu(returnFocus = true) {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.dsClose.emit();
+        if (returnFocus) {
+            this.el.querySelector(transformTagName('ds-button', 'ds-action-menu', this.el))?.setFocus?.();
+        }
+    }
+    focusFirstItem() {
+        const itemTag = transformTagName('ds-action-list-item', 'ds-action-menu', this.el);
+        const items = Array.from(this.el.querySelectorAll(itemTag));
+        items.find(item => !item.dsDisabled)?.setFocus?.();
+    }
+    focusLastItem() {
+        const itemTag = transformTagName('ds-action-list-item', 'ds-action-menu', this.el);
+        Array.from(this.el.querySelectorAll(itemTag))
+            .findLast(item => !item.dsDisabled)
+            ?.setFocus?.();
+    }
+    handleClickOutside(event) {
+        if (!this.isOpen)
+            return;
+        if (this.el.contains(event.target))
+            return;
+        this.closeMenu(false);
+    }
+    handleKeyDown(event) {
+        if (!this.isOpen) {
+            if (!this.triggerWrapperRef?.contains(document.activeElement))
+                return;
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.openMenu('first');
+            }
+            else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                this.openMenu('last');
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.closeMenu();
+                break;
+            case 'Tab':
+                this.closeMenu(false);
+                break;
+        }
+    }
+    handleTriggerClick = () => {
+        if (this.isOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu();
+        }
+    };
+    renderTrigger(baseClass) {
+        const DsButton = transformTagName('ds-button', 'ds-action-menu', this.el);
+        const DsIcon = transformTagName('ds-icon', 'ds-action-menu', this.el);
+        const triggerClass = `${baseClass}__trigger`;
+        if (this.dsIconOnly) {
+            const icon = this.dsIcon || 'more_vert';
+            return (h(DsButton, { class: triggerClass, dsId: this.dsId, dsVariant: this.dsButtonVariant, dsColour: this.dsButtonColour, dsSize: this.dsButtonSize, dsIcon: icon, dsAriaLabel: this.dsAriaLabel, dsActive: this.isOpen, dsDisabled: this.dsDisabled, dsAriaHaspopup: "menu", dsAriaExpanded: this.isOpen, dsAriaControls: this.menuId, onClick: this.handleTriggerClick }));
+        }
+        const chevronIcon = this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
+        return (h(DsButton, { class: triggerClass, dsId: this.dsId, dsVariant: this.dsButtonVariant, dsColour: this.dsButtonColour, dsSize: this.dsButtonSize, dsText: this.dsButtonText, dsIcon: chevronIcon, dsIconPosition: "end", dsActive: this.isOpen, dsDisabled: this.dsDisabled, dsAriaHaspopup: "menu", dsAriaExpanded: this.isOpen, dsAriaControls: this.menuId, onClick: this.handleTriggerClick }, this.dsIcon && h(DsIcon, { slot: "prefix", dsName: this.dsIcon, dsAriaHidden: true })));
+    }
+    render() {
+        const baseClass = cx('ds-action-menu');
+        const menuStyle = {
+            width: this.dsMenuWidth ?? 'auto',
+            maxHeight: this.dsMenuMaxHeight ?? 'none',
+        };
+        const menuClasses = classNames(`${baseClass}__menu`, `${baseClass}__menu--align-${this.dsAlign}`, `${baseClass}__menu--placement-${this.dsPlacement}`);
+        return (h("div", { key: 'dae52d98d89c7e03bb22495c6e3cbf8e66bceca5', class: baseClass }, h("div", { key: '9ef3b952b70b81e72ee5d44bae1ace6af58d3eb2', ref: el => (this.triggerWrapperRef = el), class: `${baseClass}__trigger-wrapper` }, this.renderTrigger(baseClass)), 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 }, h("slot", { key: '4055ac9e56b938382d5deb465070c4bd308ac662' }))));
+    }
+};
+declareComponentDependencies([h("ds-button", null)]);
+DsActionMenu.style = dsActionMenuCss;
+
+export { DsActionMenu as ds_action_menu };

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, h } from './index-CFKBuHGF.js';
-import { c as cx } from './cx-CoCfZwPE.js';
+import { r as registerInstance, h } from './index-B4ZCBfpo.js';
+import { c as cx } from './cx-hUnOoCpm.js';
 import { i as idGenerator } from './utils-J5Ghj1_T.js';
 
-const dsAssistiveTextCss = ".ds-assistive-text__1Vp5mb.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__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 dsAssistiveTextIdGenerator = idGenerator('ds-assistive-text');
 const DsAssistiveText = class {
@@ -13,7 +13,7 @@ const DsAssistiveText = class {
     dsText;
     render() {
         const baseClass = cx('ds-assistive-text');
-        return (h("small", { key: '1f105295c590d0b0e3928da12f128c0d38be27f1', class: baseClass, id: this.dsId }, h("slot", { key: '8519ed27619feca65f44a9d4e49a5842d31df674' }, this.dsText)));
+        return (h("small", { key: 'f9da763e0bb66c8a888a2344152923e89c13670a', class: baseClass, id: this.dsId }, h("slot", { key: '913fc3b11626c517805ddf12da782d99294a0195' }, this.dsText)));
     }
 };
 DsAssistiveText.style = dsAssistiveTextCss;

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, d as getElement, h } from './index-CFKBuHGF.js';
+import { r as registerInstance, c as createEvent, d as getElement, h } from './index-B4ZCBfpo.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-CoCfZwPE.js';
+import { c as cx } from './cx-hUnOoCpm.js';
 import { B as BACKDROP_TRANSITION_IN_DURATION, c as BACKDROP_TRANSITION_OUT_DURATION } from './constants-CLNvzo86.js';
 
-const dsBackdropCss = ".ds-backdrop__1Vp5mb {\n  z-index: var(--ds-backdrop-z-index);\n  max-width: 100vw;\n  max-height: 100vh;\n  max-height: 100dvh;\n}\n.ds-backdrop__1Vp5mb::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__1Vp5mb::backdrop {\n    background-color: var(--ds-bgColor-transparent-onLight);\n  }\n}\n.ds-backdrop__1Vp5mb--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__1Vp5mb--open::backdrop {\n  background-color: var(--ds-bgColor-backdrop);\n}\n@media (prefers-reduced-motion: reduce) {\n  .ds-backdrop__1Vp5mb::backdrop {\n    transition: none;\n  }\n}\n\nhtml:has(.ds-modal__1Vp5mb--open) {\n  overflow: hidden;\n}";
+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 DsBackdrop = class {
     constructor(hostRef) {
@@ -94,7 +94,7 @@ const DsBackdrop = class {
     };
     render() {
         const baseClass = cx('ds-backdrop');
-        return (h("dialog", { key: 'b164a1fbe719ef404ac27db2b1466b67c7a240cf', ref: el => (this.dialogElement = el), role: this.dsRole, class: classNames(baseClass, this.dsDialogClasses, {
+        return (h("dialog", { key: '244b195df7f69b545fb3bd8acb7e6c72b7010834', ref: el => (this.dialogElement = el), role: this.dsRole, class: classNames(baseClass, this.dsDialogClasses, {
                 [`${baseClass}--open`]: this.dsOpen,
                 [`${baseClass}--in`]: this.dsOpen && this.transitionInProgress,
             }), onClose: () => {
@@ -103,7 +103,7 @@ const DsBackdrop = class {
                 '--ds-backdrop-z-index': `${this.dsZIndex}`,
                 '--ds-backdrop-transition-in-duration': `${BACKDROP_TRANSITION_IN_DURATION}ms`,
                 '--ds-backdrop-transition-out-duration': `${BACKDROP_TRANSITION_OUT_DURATION}ms`,
-            } }, h("slot", { key: '728ad8a14f77a732495ba150e4defc11ee8dd789' })));
+            } }, h("slot", { key: '88e5c2fd5352316f227b8da5a4d4e9e52f87a158' })));
     }
     static get watchers() { return {
         "transitionInProgress": ["transitionInProgressObserver"],

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

@@ -1,9 +1,9 @@
-import { h, r as registerInstance, d as getElement } from './index-CFKBuHGF.js';
+import { h, r as registerInstance, d as getElement } from './index-B4ZCBfpo.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { c as cx } from './cx-CoCfZwPE.js';
+import { c as cx } from './cx-hUnOoCpm.js';
 import { i as idGenerator, d as declareComponentDependencies, t as transformTagName } from './utils-J5Ghj1_T.js';
 
-const dsBadgeCss = ".ds-badge__1Vp5mb.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__1Vp5mb--default.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-default)}.ds-badge__1Vp5mb--success.sc-ds-badge{background-color:var(--ds-bgColor-success);color:var(--ds-textColor-success)}.ds-badge__1Vp5mb--attention.sc-ds-badge{background-color:var(--ds-bgColor-attention);color:var(--ds-textColor-attention)}.ds-badge__1Vp5mb--danger.sc-ds-badge{background-color:var(--ds-bgColor-danger);color:var(--ds-textColor-danger)}.ds-badge__1Vp5mb--info.sc-ds-badge{background-color:var(--ds-bgColor-info);color:var(--ds-textColor-info)}.ds-badge__1Vp5mb--notification.sc-ds-badge{background-color:var(--ds-palette-red-50);color:var(--ds-textColor-white)}.ds-badge__1Vp5mb--primary.sc-ds-badge{background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-badge__1Vp5mb--disabled.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-disabled-onLight)}.ds-badge__1Vp5mb__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__1Vp5mb__content__text.sc-ds-badge{white-space:nowrap}";
+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 dsBadgeIdGenerator = idGenerator('ds-badge');
 const DsBadge = class {
@@ -21,7 +21,7 @@ const DsBadge = class {
     }
     render() {
         const baseClass = cx('ds-badge');
-        return (h("div", { key: '2aa22f658c39c44efe1d5e83584e79e9d9c4eb05', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`) }, h("div", { key: 'fc36b32e0501a61de1933731c1f7fe96f2c968fa', class: `${baseClass}__content` }, h("span", { key: '63eac6f120bdddd4be86e81f3510628628ff7b4b', class: `ds-text-semibold-xs ${baseClass}__content__text`, id: this.dsId, "aria-label": this.dsAriaLabel }, h("slot", { key: '1c023a1f0181782ecf2117baca1de07f03e2efc5' }, this.dsText, this.dsHiddenAssistiveText && h(this.DsVisuallyHidden, { key: '35fbdc7886a8283697c0080462fa6a995bc8cbe6', dsTag: "span" }, this.dsHiddenAssistiveText))))));
+        return (h("div", { key: '53c09b35bf56859d3d97139b7dc6215c51df99aa', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`) }, h("div", { key: '27c85c4553c3bb817685d7bbd41f8bef80baa422', class: `${baseClass}__content` }, h("span", { key: '82554f348826c6df350fc021f5bc18039221af35', class: `ds-text-semibold-xs ${baseClass}__content__text`, id: this.dsId, "aria-label": this.dsAriaLabel }, h("slot", { key: 'dd918014f3d58e30487905fc5a49c4e13480167f' }, this.dsText, this.dsHiddenAssistiveText && h(this.DsVisuallyHidden, { key: '69b4ed285ae23f669cb01a893edf328bb61c976c', dsTag: "span" }, this.dsHiddenAssistiveText))))));
     }
 };
 declareComponentDependencies([h("ds-visually-hidden", null)]);

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

@@ -1,10 +1,10 @@
-import { M as Mixin, r as registerInstance, c as createEvent, d as getElement, h, H as Host } from './index-CFKBuHGF.js';
+import { M as Mixin, r as registerInstance, c as createEvent, d as getElement, h, H as Host } from './index-B4ZCBfpo.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
 import { t as transformTagName, d as declareComponentDependencies } from './utils-J5Ghj1_T.js';
-import { l as linkFactory } from './linkFactory-s3TBSNeX.js';
-import { c as cx } from './cx-CoCfZwPE.js';
+import { l as linkFactory } from './linkFactory-HDvWs7Ax.js';
+import { c as cx } from './cx-hUnOoCpm.js';
 
-const dsBreadcrumbCss = ".sc-ds-breadcrumb-h{display:contents}.ds-breadcrumb__1Vp5mb.sc-ds-breadcrumb{display:contents}.ds-breadcrumb__1Vp5mb--hidden.sc-ds-breadcrumb{display:none}.ds-breadcrumb__1Vp5mb__content.sc-ds-breadcrumb{display:inline;vertical-align:middle}.ds-breadcrumb__1Vp5mb__content__link.sc-ds-breadcrumb::part(link),.ds-breadcrumb__1Vp5mb__content__link.sc-ds-breadcrumb [part~=\"link\"]{vertical-align:middle}.ds-breadcrumb__1Vp5mb__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__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 DsBreadcrumb = class extends Mixin(linkFactory) {
     constructor(hostRef) {
@@ -48,9 +48,9 @@ const DsBreadcrumb = class extends Mixin(linkFactory) {
     render() {
         const baseClass = cx('ds-breadcrumb');
         const contentClass = `${baseClass}__content`;
-        return (h(Host, { key: 'aa5c44d823e07ba18d53f28ab685d87901fdd7b6', role: "listitem" }, h("div", { key: '3c70014f2a347c9eccefa1dfa8d0cdb010ccc714', class: classNames(baseClass, {
+        return (h(Host, { key: '183b930bb862f8e3f333175dda41f68d734c55b4', role: "listitem" }, h("div", { key: '4d534134e1f8243a26a7aad8904266b7473b686c', class: classNames(baseClass, {
                 [`${baseClass}--hidden`]: this.dsIsHidden,
-            }) }, h("div", { key: '4f3a2475eeb27d7be0cf935249f8da1aa747187c', class: contentClass }, this.dsHasSeparator ? h(this.DsBreadcrumbsSeparator, { dsIcon: this.dsSeparatorIcon }) : null, this.dsIsCurrentPage ? this.renderCurrentPageCrumb(contentClass) : this.renderLinkCrumb(contentClass)))));
+            }) }, h("div", { key: '0c965c79a367650945bfcc0a406c57daf11dad4e', class: contentClass }, this.dsHasSeparator ? h(this.DsBreadcrumbsSeparator, { dsIcon: this.dsSeparatorIcon }) : null, this.dsIsCurrentPage ? this.renderCurrentPageCrumb(contentClass) : this.renderLinkCrumb(contentClass)))));
     }
     static get watchers() { return {
         "dsIsHidden": ["dsIsHiddenObserver"]

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

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, d as getElement, F as Fragment } from './index-CFKBuHGF.js';
+import { h, r as registerInstance, c as createEvent, d as getElement, F as Fragment } from './index-B4ZCBfpo.js';
 import { d as declareComponentDependencies, t as transformTagName } from './utils-J5Ghj1_T.js';
 
 const dsBreadcrumbsCollapsibleCss = ":host{display:contents}";
@@ -33,7 +33,7 @@ const DsBreadcrumbsCollapsible = class {
         this.collapsibleTarget = this.el.querySelector(this.DsBreadcrumb);
     };
     render() {
-        return (h(Fragment, { key: '7c705f5bdc2cc77fe85d151391f763c52c0796f0' }, h(this.DsBreadcrumbsExpandButton, { key: '5a6869db3e22d8f203c85ed2db3ef80e312b0266', dsIsHidden: this.dsIsExpandButtonHidden, dsSeparatorIcon: this.dsSeparatorIcon }), h("slot", { key: 'd35600ed0494b4e455d38a4bc5376932c98749b5', onSlotchange: this.handleDefaultSlotChange })));
+        return (h(Fragment, { key: '2fc049ae41fbd5da1d55a99a72b326698d0e2ebf' }, h(this.DsBreadcrumbsExpandButton, { key: '3255e9c994e00d90d767e6233b820ea377ba34f3', dsIsHidden: this.dsIsExpandButtonHidden, dsSeparatorIcon: this.dsSeparatorIcon }), h("slot", { key: '9cc45e02309010cd3f84892f80dcb18b1744f1f2', onSlotchange: this.handleDefaultSlotChange })));
     }
 };
 declareComponentDependencies([h("ds-breadcrumbs-expand-button", null)]);

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

@@ -1,10 +1,10 @@
-import { h, r as registerInstance, c as createEvent, d as getElement } from './index-CFKBuHGF.js';
+import { h, r as registerInstance, c as createEvent, d as getElement } from './index-B4ZCBfpo.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { g as getLanguage } from './store-DWYm2ny8.js';
-import { c as cx } from './cx-CoCfZwPE.js';
+import { g as getLanguage } from './store-I792JNgf.js';
+import { c as cx } from './cx-hUnOoCpm.js';
 import { d as declareComponentDependencies, t as transformTagName } from './utils-J5Ghj1_T.js';
 
-const dsBreadcrumbsExpandButtonCss = ".ds-breadcrumbs-expand-button__1Vp5mb.sc-ds-breadcrumbs-expand-button{display:inline;vertical-align:middle}.ds-breadcrumbs-expand-button__1Vp5mb--hidden.sc-ds-breadcrumbs-expand-button{display:none}.ds-breadcrumbs-expand-button__1Vp5mb__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__1Vp5mb__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__1Vp5mb__button.sc-ds-breadcrumbs-expand-button:hover,.ds-breadcrumbs-expand-button__1Vp5mb__button.sc-ds-breadcrumbs-expand-button:active{text-decoration-thickness:13%;text-underline-offset:12%}";
+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 DsBreadcrumbsExpandButton = class {
     constructor(hostRef) {
@@ -33,9 +33,9 @@ const DsBreadcrumbsExpandButton = class {
     };
     render() {
         const baseClass = cx('ds-breadcrumbs-expand-button');
-        return (h("div", { key: '26bfa17a904ebc98dfaf7cd5e95ce7ab3f7ae1e5', role: "listitem", class: classNames(baseClass, {
+        return (h("div", { key: '40c49a1bccac13857734865d547c3d724c604c1a', role: "listitem", class: classNames(baseClass, {
                 [`${baseClass}--hidden`]: this.dsIsHidden,
-            }) }, h(this.DsBreadcrumbsSeparator, { key: '49831c26321148d50fad2fd7f2bdadb1635dec4f', dsIcon: this.dsSeparatorIcon }), h("button", { key: '2f655e5ed43908bb3d6d4a8a2a64e8220da625c6', "aria-label": this.showFullBreadcrumbTrail, class: `${baseClass}__button`, onClick: this.handleExpandButtonClick }, "\u2026")));
+            }) }, h(this.DsBreadcrumbsSeparator, { key: '36cfc5e91b46c5a32aaa0f32ad6097fb73f50988', dsIcon: this.dsSeparatorIcon }), h("button", { key: 'b3acf675cf0ddaa1cba09db95c5e809d11f6bf55', "aria-label": this.showFullBreadcrumbTrail, class: `${baseClass}__button`, onClick: this.handleExpandButtonClick }, "\u2026")));
     }
 };
 declareComponentDependencies([h("ds-breadcrumbs-separator", null)]);

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, d as getElement, h } from './index-CFKBuHGF.js';
-import { c as cx } from './cx-CoCfZwPE.js';
+import { r as registerInstance, d as getElement, h } from './index-B4ZCBfpo.js';
+import { c as cx } from './cx-hUnOoCpm.js';
 import { t as transformTagName } from './utils-J5Ghj1_T.js';
 
-const dsBreadcrumbsSeparatorCss = ".ds-breadcrumbs-separator__1Vp5mb.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__1Vp5mb.sc-ds-breadcrumbs-separator{margin-left:var(--ds-spacing-2xSmall, 8px);margin-right:var(--ds-spacing-2xSmall, 8px)}}";
+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 DsBreadcrumbsSeparator = class {
     constructor(hostRef) {
@@ -15,7 +15,7 @@ const DsBreadcrumbsSeparator = class {
     }
     render() {
         const baseClass = cx('ds-breadcrumbs-separator');
-        return h(this.DsIcon, { key: 'bbf4623bf36af49030aaa8d31a1e5b502576a65e', class: baseClass, dsName: this.dsIcon, dsSize: "1rem" });
+        return h(this.DsIcon, { key: '30d5cb00e2361d2e0600b3d9abc86363beda1940', class: baseClass, dsName: this.dsIcon, dsSize: "1rem" });
     }
 };
 DsBreadcrumbsSeparator.style = dsBreadcrumbsSeparatorCss;

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, d as getElement, h } from './index-CFKBuHGF.js';
-import { c as cx } from './cx-CoCfZwPE.js';
-import { g as getLanguage } from './store-DWYm2ny8.js';
+import { r as registerInstance, c as createEvent, d as getElement, h } from './index-B4ZCBfpo.js';
+import { c as cx } from './cx-hUnOoCpm.js';
+import { g as getLanguage } from './store-I792JNgf.js';
 import { i as isGreaterThanEqualBreakpointMediaQuery } from './utils-BW1GUsO7.js';
 
-const dsBreadcrumbsCss = ".ds-breadcrumbs__1Vp5mb{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__1Vp5mb{min-height:32px}}.ds-breadcrumbs__1Vp5mb__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__1Vp5mb__breadcrumbs{padding:var(--ds-spacing-4xSmall, 2px) 0;font-size:var(--ds-fontSize-16)}}";
+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 DsBreadcrumbs = class {
     constructor(hostRef) {
@@ -42,7 +42,7 @@ const DsBreadcrumbs = class {
     }
     render() {
         const baseClass = cx('ds-breadcrumbs');
-        return (h("nav", { key: '10dc58feb1a0eee63d2859a73985341a8bc70e58', class: baseClass, "aria-label": this.dsAriaLabel || this.breadcrumb }, h("div", { key: '7cee16bd5f580a478161f33d886dbc28bad6b911', role: "list", class: `${baseClass}__breadcrumbs` }, h("slot", { key: '9043055ef831b97339609d97cdd03a8ec9245952' }))));
+        return (h("nav", { key: '01e0f590dfd6600ed96473b40a70ae6f5af1c24d', class: baseClass, "aria-label": this.dsAriaLabel || this.breadcrumb }, h("div", { key: 'b24c8ecbb9070c47fbb05c7df370185f4d9bec5a', role: "list", class: `${baseClass}__breadcrumbs` }, h("slot", { key: '061e679827111d236fa5777421e7c71608af14e0' }))));
     }
     static get watchers() { return {
         "size": ["sizeObserver"]