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

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

@@ -0,0 +1,245 @@
+'use strict';
+
+var index = require('./index-C_LkFL3j.js');
+var cx = require('./cx-DmpPI8gl.js');
+var utils = require('./utils-DOIzXqfM.js');
+var store = require('./store-VaCHYhbQ.js');
+
+const actionListGroupLabel = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Toiminnallisuudet';
+        case 'sv':
+            return 'Åtgärder';
+        default:
+            return 'Actions';
+    }
+};
+const actionListGroupLabelSingleSelect = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Valitse yksi';
+        case 'sv':
+            return 'Välj ett';
+        default:
+            return 'Choose one';
+    }
+};
+const actionListGroupLabelMultiSelect = () => {
+    switch (store.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}.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); }
+    dsRole = 'group';
+    ariaLabel;
+    ariaLabelledby;
+    get isStandalone() {
+        return this.dsRole === 'menu';
+    }
+    slotChangeHandler = () => {
+        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);
+    }
+    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) {
+                this.ariaLabel = undefined;
+                this.ariaLabelledby = span.id;
+                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';
+        if (variant === 'single-select') {
+            this.ariaLabel = actionListGroupLabelSingleSelect();
+        }
+        else if (variant === 'multi-select') {
+            this.ariaLabel = actionListGroupLabelMultiSelect();
+        }
+        else {
+            this.ariaLabel = actionListGroupLabel();
+        }
+        this.ariaLabelledby = undefined;
+    }
+    handleLanguageChange() {
+        this.updateAriaLabelling();
+    }
+    getFocusableItems() {
+        return this.getFocusableItemsFromEl(this.el);
+    }
+    getFocusableItemsFromEl(el) {
+        const itemTag = utils.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 = utils.transformTagName('ds-action-list', 'ds-action-list', this.el);
+        return Array.from(parent.querySelectorAll(`:scope > ${listTag}`));
+    }
+    updateIndentation() {
+        const itemTag = utils.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 = utils.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.cx('ds-action-list');
+        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();
+
+exports.ds_action_list = DsActionList;

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

@@ -0,0 +1,184 @@
+'use strict';
+
+var index = require('./index-C_LkFL3j.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var utils = require('./utils-DOIzXqfM.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__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;
+const MENU_MIN_HEIGHT = 120;
+const DsActionMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsOpen = index.createEvent(this, "dsOpen", 7);
+        this.dsClose = index.createEvent(this, "dsClose", 7);
+    }
+    get el() { return index.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`;
+        actionMenuContext.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() {
+        actionMenuContext.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(utils.transformTagName('ds-button', 'ds-action-menu', this.el))?.setFocus?.();
+        }
+    }
+    focusFirstItem() {
+        const itemTag = utils.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 = utils.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 = utils.transformTagName('ds-button', 'ds-action-menu', this.el);
+        const DsIcon = utils.transformTagName('ds-icon', 'ds-action-menu', this.el);
+        const triggerClass = `${baseClass}__trigger`;
+        if (this.dsIconOnly) {
+            const icon = this.dsIcon || 'more_vert';
+            return (index.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 (index.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 && index.h(DsIcon, { slot: "prefix", dsName: this.dsIcon, dsAriaHidden: true })));
+    }
+    render() {
+        const baseClass = cx.cx('ds-action-menu');
+        const menuStyle = {
+            width: this.dsMenuWidth ?? 'auto',
+            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: '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), 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-D3R0QeQn.js');
-var cx = require('./cx-BnKHFJKC.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__MGLLcm.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: '1f105295c590d0b0e3928da12f128c0d38be27f1', class: baseClass, id: this.dsId }, index.h("slot", { key: '8519ed27619feca65f44a9d4e49a5842d31df674' }, 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-D3R0QeQn.js');
+var index = require('./index-C_LkFL3j.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-BnKHFJKC.js');
+var cx = require('./cx-DmpPI8gl.js');
 var constants = require('./constants-DQ8n-aJY.js');
 
-const dsBackdropCss = ".ds-backdrop__MGLLcm {\n  z-index: var(--ds-backdrop-z-index);\n  max-width: 100vw;\n  max-height: 100vh;\n  max-height: 100dvh;\n}\n.ds-backdrop__MGLLcm::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__MGLLcm::backdrop {\n    background-color: var(--ds-bgColor-transparent-onLight);\n  }\n}\n.ds-backdrop__MGLLcm--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__MGLLcm--open::backdrop {\n  background-color: var(--ds-bgColor-backdrop);\n}\n@media (prefers-reduced-motion: reduce) {\n  .ds-backdrop__MGLLcm::backdrop {\n    transition: none;\n  }\n}\n\nhtml:has(.ds-modal__MGLLcm--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: 'b164a1fbe719ef404ac27db2b1466b67c7a240cf', 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: '728ad8a14f77a732495ba150e4defc11ee8dd789' })));
+            } }, 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-D3R0QeQn.js');
+var index = require('./index-C_LkFL3j.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-BnKHFJKC.js');
+var cx = require('./cx-DmpPI8gl.js');
 var utils = require('./utils-DOIzXqfM.js');
 
-const dsBadgeCss = ".ds-badge__MGLLcm.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__MGLLcm--default.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-default)}.ds-badge__MGLLcm--success.sc-ds-badge{background-color:var(--ds-bgColor-success);color:var(--ds-textColor-success)}.ds-badge__MGLLcm--attention.sc-ds-badge{background-color:var(--ds-bgColor-attention);color:var(--ds-textColor-attention)}.ds-badge__MGLLcm--danger.sc-ds-badge{background-color:var(--ds-bgColor-danger);color:var(--ds-textColor-danger)}.ds-badge__MGLLcm--info.sc-ds-badge{background-color:var(--ds-bgColor-info);color:var(--ds-textColor-info)}.ds-badge__MGLLcm--notification.sc-ds-badge{background-color:var(--ds-palette-red-50);color:var(--ds-textColor-white)}.ds-badge__MGLLcm--primary.sc-ds-badge{background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-badge__MGLLcm--disabled.sc-ds-badge{background-color:var(--ds-overlay-black-10);color:var(--ds-textColor-disabled-onLight)}.ds-badge__MGLLcm__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__MGLLcm__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: '2aa22f658c39c44efe1d5e83584e79e9d9c4eb05', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`) }, index.h("div", { key: 'fc36b32e0501a61de1933731c1f7fe96f2c968fa', class: `${baseClass}__content` }, index.h("span", { key: '63eac6f120bdddd4be86e81f3510628628ff7b4b', class: `ds-text-semibold-xs ${baseClass}__content__text`, id: this.dsId, "aria-label": this.dsAriaLabel }, index.h("slot", { key: '1c023a1f0181782ecf2117baca1de07f03e2efc5' }, this.dsText, this.dsHiddenAssistiveText && index.h(this.DsVisuallyHidden, { key: '35fbdc7886a8283697c0080462fa6a995bc8cbe6', 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-D3R0QeQn.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-CSb52H3Y.js');
-var cx = require('./cx-BnKHFJKC.js');
+var linkFactory = require('./linkFactory-D295gbjl.js');
+var cx = require('./cx-DmpPI8gl.js');
 
-const dsBreadcrumbCss = ".sc-ds-breadcrumb-h{display:contents}.ds-breadcrumb__MGLLcm.sc-ds-breadcrumb{display:contents}.ds-breadcrumb__MGLLcm--hidden.sc-ds-breadcrumb{display:none}.ds-breadcrumb__MGLLcm__content.sc-ds-breadcrumb{display:inline;vertical-align:middle}.ds-breadcrumb__MGLLcm__content__link.sc-ds-breadcrumb::part(link),.ds-breadcrumb__MGLLcm__content__link.sc-ds-breadcrumb [part~=\"link\"]{vertical-align:middle}.ds-breadcrumb__MGLLcm__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: 'aa5c44d823e07ba18d53f28ab685d87901fdd7b6', role: "listitem" }, index.h("div", { key: '3c70014f2a347c9eccefa1dfa8d0cdb010ccc714', 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: '4f3a2475eeb27d7be0cf935249f8da1aa747187c', 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-D3R0QeQn.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: '7c705f5bdc2cc77fe85d151391f763c52c0796f0' }, index.h(this.DsBreadcrumbsExpandButton, { key: '5a6869db3e22d8f203c85ed2db3ef80e312b0266', dsIsHidden: this.dsIsExpandButtonHidden, dsSeparatorIcon: this.dsSeparatorIcon }), index.h("slot", { key: 'd35600ed0494b4e455d38a4bc5376932c98749b5', 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;