@siemens/ix 4.4.0 → 5.1.0

package/dist/esm/ix-menu-category.entry.js

@@ -1,58 +1,67 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BEPo7U1W.js';
-import { g as iconChevronDownSmall } from './index-BBzEV-f4.js';
+import { M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-EBgS4zhE.js';
+import { h as iconChevronDownSmall } from './index-DgUGsIlh.js';
 import { a as animate } from './anime.esm-DhE1t8Qh.js';
-import { c as closestIxMenu } from './context-BniHpAE1.js';
+import { c as closestIxMenu } from './context-zqk3Dkv-.js';
 import { c as createMutationObserver } from './mutation-observer-CX81WQtk.js';
-import './typed-event-BdCnOrqW.js';
-
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-function createEnterLeaveDebounce(enterCallback, leaveCallback, { debounceTimeEnter, debounceTimeLeave, } = {
-    debounceTimeEnter: 0,
-    debounceTimeLeave: 500,
-}) {
-    let enterTimeout;
-    let leaveTimeout;
-    return {
-        onEnter: () => {
-            clearTimeout(leaveTimeout);
-            enterTimeout = setTimeout(() => {
-                enterCallback();
-            }, debounceTimeEnter);
-        },
-        onLeave: () => {
-            clearTimeout(enterTimeout);
-            leaveTimeout = setTimeout(() => {
-                leaveCallback();
-            }, debounceTimeLeave);
-        },
-    };
-}
+import { r as requestAnimationFrameNoNgZone } from './requestAnimationFrame-BEuV0Xpe.js';
+import { D as DefaultMixins, h as hasKeyboardMode } from './component-DqJSHc3A.js';
+import { I as InheritAriaAttributesMixin } from './inherit-aria-attributes.mixin-nCmPujqf.js';
+import { g as getComposedPath } from './shadow-dom-BClJdFQP.js';
+import { m as makeRef } from './make-ref-Djkc69iv.js';
+import { d as dropdownController } from './dropdown-controller-Jfg3ZWk6.js';
+import { c as createSequentialId } from './uuid-D3T7Lr4G.js';
+import './typed-event-CWshStHZ.js';
+import './focus-utilities-6ZxKp7Jn.js';
+import './a11y-C21npbUc.js';
+import './path-utils-CNLoALIl.js';
 
 const menuCategoryCss = () => `:host{display:flex;flex-direction:column;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-text{width:100%;padding-right:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .category-chevron{margin-left:auto;margin-right:0;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0;transition:var(--theme-default-time) max-height ease-in-out}:host .menu-items--expanded{max-height:999999999px;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--collapsed{display:none}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;padding-left:0.125rem;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}`;
 
 const DefaultIxMenuItemHeight = 40;
 const DefaultAnimationTimeout = 150;
-const MenuCategory = class {
+let categorySequenceId = 0;
+const MenuCategory = class extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor(hostRef) {
+        super();
         registerInstance(this, hostRef);
         this.closeOtherCategories = createEvent(this, "closeOtherCategories", 7);
-        this.menuExpand = false;
-        this.showItems = false;
-        this.showDropdown = false;
-        this.nestedItems = [];
-        this.enterLeaveDebounce = createEnterLeaveDebounce(() => {
-            this.onPointerEnter();
-        }, () => {
-            this.onPointerLeave();
-        });
     }
+    get hostElement() { return getElement(this); }
+    /**
+     * Display name of the category
+     */
+    label;
+    /**
+     * Icon of the category
+     */
+    icon;
+    /**
+     * Show notification count on the category
+     */
+    notifications;
+    /**
+     * Will be shown as tooltip text, if not provided menu text content will be used.
+     *
+     * @since 4.0.0
+     */
+    tooltipText;
+    /** @internal */
+    closeOtherCategories;
+    menuExpand = false;
+    showItems = false;
+    showDropdown = false;
+    nestedItems = [];
+    /** @internal */
+    async setTabIndex(value) {
+        await this.categoryParentRef.current?.setTabIndex(value);
+    }
+    observer;
+    menuItemsContainer;
+    ixMenu;
+    dropdownRef = makeRef();
+    categoryParentRef = makeRef();
+    categoryId = createSequentialId('ix-menu-category-', categorySequenceId++);
+    focusFirstItemOnDropdownOpen = false;
     isNestedItemActive() {
         return this.getNestedItems().some((item) => item.active);
     }
@@ -63,6 +72,13 @@ const MenuCategory = class {
         const items = this.getNestedItems();
         return items.length * DefaultIxMenuItemHeight;
     }
+    focusFirstItem() {
+        const items = this.getNestedItems();
+        const firstItem = items[0];
+        if (firstItem) {
+            requestAnimationFrameNoNgZone(() => firstItem.focus());
+        }
+    }
     onExpandCategory(showItems) {
         if (showItems) {
             this.animateFadeIn();
@@ -87,37 +103,151 @@ const MenuCategory = class {
         });
     }
     animateFadeIn() {
+        this.showItems = true;
+        this.showDropdown = false;
         animate(this.menuItemsContainer, {
             duration: DefaultAnimationTimeout,
             easing: 'easeInSine',
             opacity: [0, 1],
             maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],
-            onBegin: () => {
-                this.showItems = true;
-                this.showDropdown = false;
-            },
         });
     }
-    onPointerEnter() {
-        var _a;
-        if ((_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.expand) {
+    showMenuItemDropdown() {
+        if (this.ixMenu?.expand) {
             return;
         }
         this.closeOtherCategories.emit();
-        this.showDropdown = true;
+        if (this.dropdownRef.current) {
+            const ref = dropdownController.getDropdownById(this.dropdownRef.current.dataset.ixDropdown);
+            if (ref) {
+                dropdownController.present(ref);
+            }
+        }
     }
-    onPointerLeave() {
-        this.showDropdown = false;
+    hideMenuItemDropdown() {
+        if (this.dropdownRef.current) {
+            const ref = dropdownController.getDropdownById(this.dropdownRef.current.dataset.ixDropdown);
+            if (ref) {
+                dropdownController.dismiss(ref);
+            }
+        }
     }
-    onCategoryClick(e) {
-        var _a;
-        e.stopPropagation();
-        if ((_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.expand) {
+    handleCategoryVisibility() {
+        if (this.ixMenu?.expand) {
             this.onExpandCategory(!this.showItems);
             return;
         }
+        this.showMenuItemDropdown();
+    }
+    onDropdownShowChange(dropdownShow) {
+        if (dropdownShow) {
+            return;
+        }
+        const activeElement = document.activeElement;
+        const isFocused = getComposedPath(activeElement).includes(this.hostElement);
+        if (hasKeyboardMode() && isFocused) {
+            // Ugly workaround to restore focus to the category after the dropdown is closed,
+            // because focus gets lost when the dropdown is removed from the DOM.
+            // This is needed to ensure keyboard users can continue navigating after closing the dropdown with the keyboard.
+            requestAnimationFrameNoNgZone(() => requestAnimationFrameNoNgZone(() => this.hostElement.focus()));
+        }
+    }
+    onDropdownShowChanged(dropdownShown) {
+        this.showDropdown = dropdownShown;
+        if (!dropdownShown) {
+            this.focusFirstItemOnDropdownOpen = false;
+            return;
+        }
+        if (this.focusFirstItemOnDropdownOpen) {
+            this.focusFirstItemOnDropdownOpen = false;
+            this.focusFirstItem();
+        }
+    }
+    onDropdownFocusOut() {
+        requestAnimationFrameNoNgZone(() => {
+            const activeElement = document.activeElement;
+            if (!activeElement) {
+                return;
+            }
+            const activePath = getComposedPath(activeElement);
+            const focusInsideCategory = activePath.includes(this.hostElement);
+            const focusInsideDropdown = !!this.dropdownRef.current &&
+                activePath.includes(this.dropdownRef.current);
+            if (!focusInsideCategory && !focusInsideDropdown) {
+                this.showDropdown = false;
+            }
+        });
+    }
+    onNestedItemSelect() {
+        if (!this.ixMenu?.expand) {
+            this.showDropdown = false;
+        }
+    }
+    onCategoryClick(event) {
+        event.stopPropagation();
+        this.handleCategoryVisibility();
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            const isClosingPanel = this.ixMenu?.expand && this.showItems;
+            const isCollapsedMenu = !this.ixMenu?.expand;
+            this.handleCategoryVisibility();
+            if (!isClosingPanel) {
+                if (isCollapsedMenu) {
+                    // In collapsed mode, wait until the dropdown is fully shown before moving focus.
+                    this.focusFirstItemOnDropdownOpen = true;
+                    return;
+                }
+                this.focusFirstItem();
+            }
+            return;
+        }
+        if (event.key === 'ArrowDown' && this.showItems) {
+            event.preventDefault();
+            this.focusFirstItem();
+        }
+    }
+    onMenuItemsKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.categoryParentRef.current?.focus();
+            this.handleCategoryVisibility();
+            return;
+        }
+        if (event.key !== 'ArrowDown' &&
+            event.key !== 'ArrowUp' &&
+            event.key !== 'Tab') {
+            return;
+        }
+        const items = this.getNestedItems();
+        if (items.length === 0) {
+            return;
+        }
+        const path = event.composedPath();
+        const currentIndex = items.findIndex((item) => path.includes(item));
+        if (currentIndex === -1) {
+            return;
+        }
+        event.preventDefault();
+        if (event.key === 'ArrowDown' || (event.key === 'Tab' && !event.shiftKey)) {
+            items[(currentIndex + 1) % items.length].focus();
+        }
+        else {
+            items[(currentIndex - 1 + items.length) % items.length].focus();
+        }
+    }
+    suppressAnchorWrapperTabStops() {
+        Array.from(this.hostElement.querySelectorAll(':scope > a'))
+            .filter((a) => a.querySelector('ix-menu-item'))
+            .forEach((a) => {
+            if (a.getAttribute('tabindex') !== '-1') {
+                a.setAttribute('tabindex', '-1');
+            }
+        });
     }
     onNestedItemsChanged(mutations) {
+        this.suppressAnchorWrapperTabStops();
         const oldNestedItemsLength = this.nestedItems.length;
         this.nestedItems = this.getNestedItems();
         if (this.showItems &&
@@ -128,7 +258,7 @@ const MenuCategory = class {
         if (!this.menuExpand || this.showItems || !mutations) {
             return;
         }
-        for (const mutation of mutations !== null && mutations !== void 0 ? mutations : []) {
+        for (const mutation of mutations ?? []) {
             if (mutation.attributeName === 'class' &&
                 mutation.target instanceof HTMLElement &&
                 mutation.target.classList.contains('active')) {
@@ -142,6 +272,7 @@ const MenuCategory = class {
         return this.menuExpand && (this.showItems || this.isNestedItemActive());
     }
     componentWillLoad() {
+        super.componentWillLoad();
         const closestMenu = closestIxMenu(this.hostElement);
         if (!closestMenu) {
             throw Error('ix-menu-category can only be used as a child of ix-menu');
@@ -151,17 +282,18 @@ const MenuCategory = class {
         this.showItems = this.isCategoryItemListVisible();
     }
     componentDidLoad() {
-        var _a;
         this.observer = createMutationObserver((mutations) => this.onNestedItemsChanged(mutations));
         this.observer.observe(this.hostElement, {
             attributes: true,
+            attributeFilter: ['class'],
             childList: true,
             subtree: true,
         });
-        requestAnimationFrame(() => {
+        requestAnimationFrameNoNgZone(() => {
             this.onNestedItemsChanged();
+            this.onShowItemsChange();
         });
-        (_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.addEventListener('expandChange', ({ detail: menuExpand }) => {
+        this.ixMenu?.addEventListener('expandChange', ({ detail: menuExpand }) => {
             this.menuExpand = menuExpand;
             if (!menuExpand) {
                 this.clearMenuItemStyles();
@@ -170,37 +302,44 @@ const MenuCategory = class {
         });
     }
     clearMenuItemStyles() {
-        var _a, _b;
-        (_a = this.menuItemsContainer) === null || _a === void 0 ? void 0 : _a.style.removeProperty('max-height');
-        (_b = this.menuItemsContainer) === null || _b === void 0 ? void 0 : _b.style.removeProperty('opacity');
+        this.menuItemsContainer?.style.removeProperty('max-height');
+        this.menuItemsContainer?.style.removeProperty('opacity');
+    }
+    onShowItemsChange() {
+        this.getNestedItems().forEach((item) => {
+            item.hidden = !this.showItems && !this.showDropdown;
+        });
     }
     disconnectedCallback() {
+        super.disconnectedCallback();
         if (this.observer) {
             this.observer.disconnect();
         }
     }
     render() {
-        return (h(Host, { key: 'edd1e65e5cd1cc96d1da1decfa666654d3926f6d', class: {
+        const inheritedA11yWithoutRole = {
+            ...this.inheritAriaAttributes,
+        };
+        delete inheritedA11yWithoutRole.role;
+        return (h(Host, { key: '593b29c5f5cf2e63cc6c1492f6f90fc7bddb3bd8', class: {
                 expanded: this.showItems,
-            }, onPointerEnter: () => {
-                this.enterLeaveDebounce.onEnter();
+            }, onIxMenuCategoryItemSelect: () => this.onNestedItemSelect(), onPointerEnter: () => {
+                this.showMenuItemDropdown();
             }, onPointerLeave: (event) => {
                 if (event.pointerType === 'touch') {
                     return;
                 }
-                this.enterLeaveDebounce.onLeave();
-            } }, h("ix-menu-item", { key: 'bd7b6f2c2bef925249db2b73ad14e1454a291939', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, h("span", { key: '23c9e797cc2ef3a788866de2851d2d7fa8c1db83', class: "category" }, h("span", { key: 'b15dd87212ebbf9d2ceb6212ec9c85bdf27c4624', class: "category-text" }, this.label), h("ix-icon", { key: '6381529eccd7caa09f9361de68564969a56ffa3f', name: iconChevronDownSmall, class: {
+                this.hideMenuItemDropdown();
+            } }, h("ix-menu-item", { key: '35bfb38e90317bf2459bce59860ba0f74e8174f1', ...inheritedA11yWithoutRole, "aria-haspopup": 'menu', "aria-expanded": this.showItems || this.showDropdown ? 'true' : 'false', id: this.categoryId, ref: this.categoryParentRef, class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onKeyDown: (event) => this.onKeyDown(event), tooltipText: this.tooltipText, isCategory: true, menuCategoryLabel: this.label }, h("span", { key: '2ea2e12dad87e97ebb8ebac718cae45309e42eb2', class: "category" }, h("span", { key: '9ffeb1f8b799f59228a43d1d5c8c850a45ce3c25', class: "category-text" }, this.label), h("ix-icon", { key: '47cceda4005228068e13a36addcd60c01a1d1efc', name: iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            }, "aria-hidden": "true" }))), h("div", { key: 'dc0a076803031b9e2f725adaa0b5d2a1ad6b8c19', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            }, "aria-hidden": "true" }))), h("div", { key: '5dff5d2e58da8af82e56d927cdec4c2d8d52ee67', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '1d9fdeceee2eaf0f5d6ab29b1a5adfa8dba0c9a2', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
-                this.showDropdown = dropdownShown;
-            }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
+            }, role: "menu", "aria-labelledby": this.categoryId, onKeyDown: (e) => this.onMenuItemsKeyDown(e) }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '17963ff7cb90f56843d13b8d10a34d2efe56427d', ref: this.dropdownRef, hostRole: "menu", "aria-label": this.label, closeBehavior: 'both', show: this.showDropdown, onShowChange: ({ detail }) => this.onDropdownShowChange(detail), onShowChanged: ({ detail }) => this.onDropdownShowChanged(detail), class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
-            }, onClick: (e) => {
+            }, focusHost: this.hostElement, onClick: (e) => {
                 if (e.target instanceof HTMLElement) {
                     if (e.target.tagName === 'IX-MENU-ITEM') {
                         this.showDropdown = false;
@@ -209,9 +348,170 @@ const MenuCategory = class {
                         e.preventDefault();
                     }
                 }
-            } }, h("ix-dropdown-item", { key: '2344605c05f8bd39b29928584fe8130fde99a252', class: 'category-dropdown-header' }, h("ix-typography", { key: '619da17167ac283092b899b44bfac92417ce38f1', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: '0c5c0fb54666edd6d2680f39819042056a5e8a83' }), h("slot", { key: '1ed415049caaadf3347ff60cf8c241a8ab29b266' }))));
+            }, onFocusout: () => this.onDropdownFocusOut() }, h("ix-dropdown-item", { key: '76a24a1e7fdaa4cb8263fd3fc2a0f65e3bdb9674', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, h("ix-typography", { key: '5d11df71fc842c0968c9069340b0f208500e0d25', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: '3bb9b931667a4ed2ee32a230ffe6a7f8bae8e2b7' }), h("slot", { key: 'c37ca19af5209ec8129527e0c41c62f2b3f5d809' }))));
     }
-    get hostElement() { return getElement(this); }
+    static get delegatesFocus() { return true; }
+    static get watchers() { return {
+        "role": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-activedescendant": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-atomic": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-autocomplete": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-braillelabel": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-brailleroledescription": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-busy": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-checked": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colcount": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colindex": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colindextext": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colspan": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-controls": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-current": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-describedby": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-description": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-details": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-disabled": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-errormessage": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-expanded": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-flowto": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-haspopup": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-hidden": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-invalid": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-keyshortcuts": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-label": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-labelledby": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-level": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-live": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-multiline": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-multiselectable": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-orientation": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-owns": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-placeholder": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-posinset": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-pressed": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-readonly": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-relevant": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-required": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-roledescription": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowcount": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowindex": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowindextext": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowspan": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-selected": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-setsize": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-sort": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuemax": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuemin": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuenow": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuetext": [{
+                "ariaAttributeChanged": 0
+            }],
+        "showDropdown": [{
+                "onShowItemsChange": 0
+            }],
+        "showItems": [{
+                "onShowItemsChange": 0
+            }]
+    }; }
 };
 MenuCategory.style = menuCategoryCss();
 

package/dist/esm/ix-menu-expand-icon.entry.js

@@ -1,44 +1,44 @@
-import { r as registerInstance, h, H as Host } from './index-BEPo7U1W.js';
-import { G as iconDoubleChevronLeft, F as iconDoubleChevronRight } from './index-BBzEV-f4.js';
-import { g as getButtonClasses } from './base-button-CV0w47z9.js';
+import { r as registerInstance, h, H as Host } from './index-EBgS4zhE.js';
+import { J as iconDoubleChevronLeft, I as iconDoubleChevronRight } from './index-DgUGsIlh.js';
+import { g as getButtonClasses } from './base-button-DZdtpLxn.js';
+import { a as a11yBoolean } from './a11y-C21npbUc.js';
 
-const menuExpandIconCss = () => `:host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host .btn-subtle-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-tertiary,:host .btn-subtle-tertiary.focus,:host .btn-subtle-tertiary:focus-visible{background-color:var(--theme-btn-subtle-tertiary--background);color:var(--theme-btn-subtle-tertiary--color);--ix-button-color:var(--theme-btn-subtle-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-tertiary--border-color);border-style:solid}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-tertiary.selected{background-color:var(--theme-btn-subtle-tertiary--background--pressed);color:var(--theme-btn-subtle-tertiary--color--pressed)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-hover)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-active)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-tertiary--border-color--hover);background-color:var(--theme-btn-subtle-tertiary--background--hover);color:var(--theme-btn-subtle-tertiary--color--hover)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-tertiary--border-color--active);background-color:var(--theme-btn-subtle-tertiary--background--active);color:var(--theme-btn-subtle-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-tertiary.disabled,:host(.disabled) .btn-subtle-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-tertiary--border-color--disabled);background-color:var(--theme-btn-subtle-tertiary--background--disabled);color:var(--theme-btn-subtle-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-tertiary--color--disabled)}:host{display:flex;justify-content:center;align-items:center;height:2rem;width:2rem;border-radius:var(--theme-btn--border-radius);pointer-events:all}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host svg{display:inline-block;vertical-align:middle}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in var(--theme-default-time), transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)) .menu-expand-button{background-color:var(--theme-menu-btn--background--hover)}.menu-expand-button{width:2rem;padding:0px !important;cursor:pointer}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)) .menu-expand-button{background-color:var(--theme-menu-btn--background--active)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}`;
+const menuExpandIconCss = () => `:host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--ix-button-padding, 0 0.5rem)}:host ix-spinner{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host(.ix-focused) .btn{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-tertiary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-tertiary{background-color:var(--theme-btn-subtle-tertiary--background);color:var(--theme-btn-subtle-tertiary--color);--ix-button-color:var(--theme-btn-subtle-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-tertiary--border-color);border-style:solid}:host .btn-subtle-tertiary.selected{background-color:var(--theme-btn-subtle-tertiary--background--pressed);color:var(--theme-btn-subtle-tertiary--color--pressed)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-hover)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-active)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-tertiary--border-color--hover);background-color:var(--theme-btn-subtle-tertiary--background--hover);color:var(--theme-btn-subtle-tertiary--color--hover)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-tertiary--border-color--active);background-color:var(--theme-btn-subtle-tertiary--background--active);color:var(--theme-btn-subtle-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-tertiary.disabled,:host(.disabled) .btn-subtle-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-tertiary--border-color--disabled);background-color:var(--theme-btn-subtle-tertiary--background--disabled);color:var(--theme-btn-subtle-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-tertiary--color--disabled)}:host{display:flex;justify-content:center;align-items:center;height:2rem;width:2rem;border-radius:var(--theme-btn--border-radius);pointer-events:all}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host svg{display:inline-block;vertical-align:middle}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in var(--theme-default-time), transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)) .menu-expand-button{background-color:var(--theme-menu-btn--background--hover)}.menu-expand-button{width:2rem;padding:0px !important;cursor:pointer}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)) .menu-expand-button{background-color:var(--theme-menu-btn--background--active)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}`;
 
 const MenuExpandIcon = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /** Whether the menu expand icon displays the expanded state or not */
-        this.expanded = false;
-        /** Display as pinned */
-        this.pinned = false;
-        /**
-         * Accessibility label for the menu expand icon
-         * @deprecated This prop is no longer used as the component is hidden from screen readers (aria-hidden="true"). Will be removed in 5.0.0
-         */
-        this.ixAriaLabel = 'Expand';
     }
+    /** i18n label for 'Expand' button */
+    i18nExpand = 'Expand';
+    /** i18n label for 'Collapse' button */
+    i18nCollapse = 'Collapse';
+    /** Whether the menu expand icon displays the expanded state or not */
+    expanded = false;
+    /** Controls which icon is displayed */
+    breakpoint;
+    /** Display as pinned */
+    pinned = false;
     getSmallScreenIcon() {
-        return (h("button", { tabindex: -1, class: Object.assign(Object.assign({}, getButtonClasses('subtle-tertiary', true, false, false, false)), { 'menu-expand-button': true }) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))));
+        return (h("button", { "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, "aria-expanded": a11yBoolean(this.expanded), class: {
+                ...getButtonClasses('subtle-tertiary', true, false, false, false),
+                'menu-expand-button': true,
+            } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))));
     }
     getLargeScreenIcon() {
-        return (h("ix-icon-button", { tabindex: -1, icon: this.expanded ? iconDoubleChevronLeft : iconDoubleChevronRight, variant: "subtle-tertiary", "aria-label": this.expanded ? 'Collapse menu' : 'Expand menu' }));
+        return (h("ix-icon-button", { "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, "aria-expanded": a11yBoolean(this.expanded), icon: this.expanded ? iconDoubleChevronLeft : iconDoubleChevronRight, variant: "subtle-tertiary" }));
     }
     getMenuIcon() {
-        if (this.pinned) {
-            return this.getLargeScreenIcon();
-        }
-        if (this.breakpoint === 'md') {
-            return this.getLargeScreenIcon();
-        }
-        if (this.breakpoint === 'lg') {
+        if (this.pinned || this.breakpoint === 'lg' || this.breakpoint === 'md') {
             return this.getLargeScreenIcon();
         }
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: 'd0b7b4a7a64641d68b291468ff4e9de612461b62', class: {
+        return (h(Host, { key: '60d58cfa658802593452a3f96a38686e0fab4039', class: {
                 expanded: this.expanded,
-            }, "aria-hidden": "true" }, this.getMenuIcon()));
+                'ix-focusable': true,
+            } }, this.getMenuIcon()));
     }
 };
 MenuExpandIcon.style = menuExpandIconCss();