@siemens/ix 5.0.0 → 5.1.0

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

@@ -1,23 +1,28 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
-var index$1 = require('./index-Dw-NwUuT.js');
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-CwJ-mkQd.js');
 var anime_esm = require('./anime.esm-AXTM6yn_.js');
 var context = require('./context-DqdXbKw_.js');
 var mutationObserver = require('./mutation-observer-DE0YMfYu.js');
 var requestAnimationFrame = require('./requestAnimationFrame-B0rWQ3G-.js');
-var component = require('./component-CYtonfpw.js');
-var shadowDom = require('./shadow-dom-BG8VqeIu.js');
+var component = require('./component-DgA9FH-W.js');
+var inheritAriaAttributes_mixin = require('./inherit-aria-attributes.mixin-EyRU0cDO.js');
+var shadowDom = require('./shadow-dom-BL5F7RFW.js');
 var makeRef = require('./make-ref-CHsa3FY7.js');
-var dropdownController = require('./dropdown-controller-DeBeUVhj.js');
+var dropdownController = require('./dropdown-controller-kBwdbfGD.js');
+var uuid = require('./uuid-Bo2QzEg9.js');
 require('./typed-event-Bw4IfJC0.js');
-require('./focus-utilities-yx7wWjEO.js');
+require('./focus-utilities-5SZMxJg4.js');
+require('./a11y-_XjpTo2w.js');
+require('./path-utils-CQKWhbQW.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 extends index.Mixin(...component.DefaultMixins) {
+let categorySequenceId = 0;
+const MenuCategory = class extends index.Mixin(...component.DefaultMixins, inheritAriaAttributes_mixin.InheritAriaAttributesMixin) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -48,11 +53,17 @@ const MenuCategory = class extends index.Mixin(...component.DefaultMixins) {
     showItems = false;
     showDropdown = false;
     nestedItems = [];
+    /** @internal */
+    async setTabIndex(value) {
+        await this.categoryParentRef.current?.setTabIndex(value);
+    }
     observer;
     menuItemsContainer;
     ixMenu;
     dropdownRef = makeRef.makeRef();
     categoryParentRef = makeRef.makeRef();
+    categoryId = uuid.createSequentialId('ix-menu-category-', categorySequenceId++);
+    focusFirstItemOnDropdownOpen = false;
     isNestedItemActive() {
         return this.getNestedItems().some((item) => item.active);
     }
@@ -63,6 +74,13 @@ const MenuCategory = class extends index.Mixin(...component.DefaultMixins) {
         const items = this.getNestedItems();
         return items.length * DefaultIxMenuItemHeight;
     }
+    focusFirstItem() {
+        const items = this.getNestedItems();
+        const firstItem = items[0];
+        if (firstItem) {
+            requestAnimationFrame.requestAnimationFrameNoNgZone(() => firstItem.focus());
+        }
+    }
     onExpandCategory(showItems) {
         if (showItems) {
             this.animateFadeIn();
@@ -123,6 +141,50 @@ const MenuCategory = class extends index.Mixin(...component.DefaultMixins) {
         }
         this.showMenuItemDropdown();
     }
+    onDropdownShowChange(dropdownShow) {
+        if (dropdownShow) {
+            return;
+        }
+        const activeElement = document.activeElement;
+        const isFocused = shadowDom.getComposedPath(activeElement).includes(this.hostElement);
+        if (component.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.
+            requestAnimationFrame.requestAnimationFrameNoNgZone(() => requestAnimationFrame.requestAnimationFrameNoNgZone(() => this.hostElement.focus()));
+        }
+    }
+    onDropdownShowChanged(dropdownShown) {
+        this.showDropdown = dropdownShown;
+        if (!dropdownShown) {
+            this.focusFirstItemOnDropdownOpen = false;
+            return;
+        }
+        if (this.focusFirstItemOnDropdownOpen) {
+            this.focusFirstItemOnDropdownOpen = false;
+            this.focusFirstItem();
+        }
+    }
+    onDropdownFocusOut() {
+        requestAnimationFrame.requestAnimationFrameNoNgZone(() => {
+            const activeElement = document.activeElement;
+            if (!activeElement) {
+                return;
+            }
+            const activePath = shadowDom.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();
@@ -131,14 +193,21 @@ const MenuCategory = class extends index.Mixin(...component.DefaultMixins) {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             const isClosingPanel = this.ixMenu?.expand && this.showItems;
+            const isCollapsedMenu = !this.ixMenu?.expand;
             this.handleCategoryVisibility();
             if (!isClosingPanel) {
-                const items = this.getNestedItems();
-                const firstItem = items[0];
-                if (firstItem) {
-                    requestAnimationFrame.requestAnimationFrameNoNgZone(() => requestAnimationFrame.requestAnimationFrameNoNgZone(() => firstItem.focus()));
+                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) {
@@ -170,7 +239,17 @@ const MenuCategory = class extends index.Mixin(...component.DefaultMixins) {
             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 &&
@@ -195,6 +274,7 @@ const MenuCategory = class extends index.Mixin(...component.DefaultMixins) {
         return this.menuExpand && (this.showItems || this.isNestedItemActive());
     }
     componentWillLoad() {
+        super.componentWillLoad();
         const closestMenu = context.closestIxMenu(this.hostElement);
         if (!closestMenu) {
             throw Error('ix-menu-category can only be used as a child of ix-menu');
@@ -233,42 +313,33 @@ const MenuCategory = class extends index.Mixin(...component.DefaultMixins) {
         });
     }
     disconnectedCallback() {
+        super.disconnectedCallback();
         if (this.observer) {
             this.observer.disconnect();
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e775a045a05963df9bf1cad8af41cde3ba0024fc', class: {
+        const inheritedA11yWithoutRole = {
+            ...this.inheritAriaAttributes,
+        };
+        delete inheritedA11yWithoutRole.role;
+        return (index.h(index.Host, { key: '593b29c5f5cf2e63cc6c1492f6f90fc7bddb3bd8', class: {
                 expanded: this.showItems,
-            }, onPointerEnter: () => {
+            }, onIxMenuCategoryItemSelect: () => this.onNestedItemSelect(), onPointerEnter: () => {
                 this.showMenuItemDropdown();
             }, onPointerLeave: (event) => {
                 if (event.pointerType === 'touch') {
                     return;
                 }
                 this.hideMenuItemDropdown();
-            } }, index.h("ix-menu-item", { key: '55481bde3309e80823c3e1efcbd079b4c149607f', "aria-haspopup": 'true', "aria-expanded": this.showItems || this.showDropdown ? 'true' : 'false', 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 }, index.h("span", { key: '5d12c486d64aa42633db1250016d8471c9f4d63a', class: "category" }, index.h("span", { key: '3a7b5b3cb0bb27a140ea0d3522aa4b0735aff00b', class: "category-text" }, this.label), index.h("ix-icon", { key: '2fffdfadde0f86b453746cd785a69bcf72523f92', name: index$1.iconChevronDownSmall, class: {
+            } }, index.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 }, index.h("span", { key: '2ea2e12dad87e97ebb8ebac718cae45309e42eb2', class: "category" }, index.h("span", { key: '9ffeb1f8b799f59228a43d1d5c8c850a45ce3c25', class: "category-text" }, this.label), index.h("ix-icon", { key: '47cceda4005228068e13a36addcd60c01a1d1efc', name: index$1.iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            }, "aria-hidden": "true" }))), index.h("div", { key: '005a89c89004c7cf7a7f6621fbcdcf19f1d98fb6', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            }, "aria-hidden": "true" }))), index.h("div", { key: '5dff5d2e58da8af82e56d927cdec4c2d8d52ee67', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            }, role: "menu", onKeyDown: (e) => this.onMenuItemsKeyDown(e) }, this.showItems ? index.h("slot", null) : null), index.h("ix-dropdown", { key: 'b8fbeea12f40ad51d832be57644672f69a2c61fb', ref: this.dropdownRef, hostRole: "menu", "aria-label": this.label, closeBehavior: 'both', show: this.showDropdown, onShowChange: ({ detail: dropdownShow }) => {
-                if (dropdownShow) {
-                    return;
-                }
-                const activeElement = document.activeElement;
-                const isFocused = shadowDom.getComposedPath(activeElement).includes(this.hostElement);
-                if (component.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.
-                    requestAnimationFrame.requestAnimationFrameNoNgZone(() => requestAnimationFrame.requestAnimationFrameNoNgZone(() => this.hostElement.focus()));
-                }
-            }, 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 ? index.h("slot", null) : null), index.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,
             }, focusHost: this.hostElement, onClick: (e) => {
                 if (e.target instanceof HTMLElement) {
@@ -279,17 +350,163 @@ const MenuCategory = class extends index.Mixin(...component.DefaultMixins) {
                         e.preventDefault();
                     }
                 }
-            }, onFocusout: (event) => {
-                const relatedTarget = event.relatedTarget;
-                if (relatedTarget &&
-                    relatedTarget !== this.hostElement &&
-                    !this.hostElement.contains(relatedTarget)) {
-                    this.showDropdown = false;
-                }
-            } }, index.h("ix-dropdown-item", { key: 'cec1683aa36e2c5db9abe748e6fcb2f901b61028', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, index.h("ix-typography", { key: 'ea96b374abdc5e8dd79ac993782749bc217bfd0a', format: "label", bold: true, textColor: "std" }, this.label)), index.h("ix-divider", { key: 'aa0cae17e78ddcaa6db6822c3f3e27ca35977e07' }), index.h("slot", { key: '8fe5b81ea58e6f9ec316c06f002a5ff84552d3ff' }))));
+            }, onFocusout: () => this.onDropdownFocusOut() }, index.h("ix-dropdown-item", { key: '76a24a1e7fdaa4cb8263fd3fc2a0f65e3bdb9674', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, index.h("ix-typography", { key: '5d11df71fc842c0968c9069340b0f208500e0d25', format: "label", bold: true, textColor: "std" }, this.label)), index.h("ix-divider", { key: '3bb9b931667a4ed2ee32a230ffe6a7f8bae8e2b7' }), index.h("slot", { key: 'c37ca19af5209ec8129527e0c41c62f2b3f5d809' }))));
     }
     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
             }],

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
-var index$1 = require('./index-Dw-NwUuT.js');
-var baseButton = require('./base-button-C-1izOSS.js');
-var a11y = require('./a11y-C_6YiIMa.js');
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-CwJ-mkQd.js');
+var baseButton = require('./base-button-BP6iIMR7.js');
+var a11y = require('./a11y-_XjpTo2w.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(.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 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) {
@@ -22,13 +22,13 @@ const MenuExpandIcon = class {
     /** Display as pinned */
     pinned = false;
     getSmallScreenIcon() {
-        return (index.h("button", { "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, "aria-pressed": a11y.a11yBoolean(this.expanded), class: {
+        return (index.h("button", { "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, "aria-expanded": a11y.a11yBoolean(this.expanded), class: {
                 ...baseButton.getButtonClasses('subtle-tertiary', true, false, false, false),
                 'menu-expand-button': true,
             } }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, index.h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), index.h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), index.h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))));
     }
     getLargeScreenIcon() {
-        return (index.h("ix-icon-button", { "aria-pressed": a11y.a11yBoolean(this.expanded), "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, icon: this.expanded ? index$1.iconDoubleChevronLeft : index$1.iconDoubleChevronRight, variant: "subtle-tertiary" }));
+        return (index.h("ix-icon-button", { "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, "aria-expanded": a11y.a11yBoolean(this.expanded), icon: this.expanded ? index$1.iconDoubleChevronLeft : index$1.iconDoubleChevronRight, variant: "subtle-tertiary" }));
     }
     getMenuIcon() {
         if (this.pinned || this.breakpoint === 'lg' || this.breakpoint === 'md') {
@@ -37,7 +37,7 @@ const MenuExpandIcon = class {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (index.h(index.Host, { key: '45cdd3674fa759b54c5d0788cbd8711b4339bc2f', class: {
+        return (index.h(index.Host, { key: '60d58cfa658802593452a3f96a38686e0fab4039', class: {
                 expanded: this.expanded,
                 'ix-focusable': true,
             } }, this.getMenuIcon()));