@siemens/ix 5.0.0 → 5.1.1

package/dist/collection/components/menu/menu.js

@@ -15,8 +15,17 @@ import { ApplicationLayoutContext } from "../utils/application-layout/context";
 import { applicationLayoutService } from "../utils/application-layout/service";
 import { useContextConsumer } from "../utils/context";
 import { menuController } from "../utils/menu-service/menu-service";
+import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
 import { convertToRemString } from "../utils/rwd.util";
 import { themeSwitcher } from "../utils/theme-switcher";
+/**
+ * @slot ix-menu-avatar - Avatar displayed at the top of the menu.
+ * @slot home - Home menu item.
+ * @slot default - Main menu items and categories.
+ * @slot bottom - Menu items displayed below the main navigation.
+ * @slot ix-menu-settings - Settings content displayed in the menu overlay.
+ * @slot ix-menu-about - About content displayed in the menu overlay.
+ */
 export class Menu {
     hostElement;
     /**
@@ -66,6 +75,18 @@ export class Menu {
         }
         applicationLayoutService.enableBreakpointDetection();
     }
+    /**
+     * i18n aria-label for menu. Gets read out by screen readers when first focusing the menu
+     *
+     * @since 5.1.0
+     */
+    i18nAriaLabelMenu = 'Application Navigation';
+    /**
+     * i18n description for menu keyboard navigation hint, read by screen readers when focusing the menu
+     *
+     * @since 5.1.0
+     */
+    i18nNavigationHint = 'Use Up and Down arrow keys to navigate between menu items';
     /**
      *  i18n label for 'About & legal information' button
      */
@@ -115,9 +136,11 @@ export class Menu {
     breakpoint = 'lg';
     itemsScrollShadowTop = false;
     itemsScrollShadowBottom = false;
+    hasBottomSlotItems = false;
     applicationLayoutContext;
     isDarkMode = false;
     isTransitionDisabled = false;
+    lastFocusedMenuItem;
     themeNameDisposer;
     // FBC IAM workaround #488
     isVisible = (elm) => {
@@ -133,6 +156,9 @@ export class Menu {
     get menuItemsContainer() {
         return this.menu.querySelector('.tabs');
     }
+    get menuNavigationContainer() {
+        return this.menu.querySelector('.menu-navigation');
+    }
     get overlayContainer() {
         return this.hostElement.shadowRoot.querySelector('.menu-overlay');
     }
@@ -179,18 +205,28 @@ export class Menu {
     get isSettingsEmpty() {
         return (Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-menu-settings-item')).length === 0);
     }
+    get hasUtilityMenuItems() {
+        return !!this.settings || this.enableToggleTheme || !!this.about;
+    }
+    get shouldFillMenuNavigation() {
+        return this.hasUtilityMenuItems || this.hasBottomSlotItems;
+    }
     get tabsContainer() {
         return this.hostElement;
     }
     componentDidLoad() {
         requestAnimationFrame(() => {
+            this.suppressAnchorWrapperTabStops();
             this.handleOverflowIndicator();
+            const items = this.getAllFocusableItems();
+            this.resetRovingTabIndex(items);
         });
         if (this.pinned) {
             this.pinnedChange(this.pinned);
         }
     }
     componentWillLoad() {
+        this.updateBottomSlotState();
         useContextConsumer(this.hostElement, ApplicationLayoutContext, (ctx) => {
             this.applicationLayoutContext = ctx;
             if (ctx.hideHeader === true) {
@@ -199,7 +235,6 @@ export class Menu {
             }
             this.onBreakpointChange(applicationLayoutService.breakpoint);
         }, true);
-        menuController.register(this.hostElement);
         applicationLayoutService.onChange.on((breakpoint) => this.onBreakpointChange(breakpoint));
         this.onBreakpointChange(applicationLayoutService.breakpoint, true);
         this.updateThemeState();
@@ -213,8 +248,12 @@ export class Menu {
         }
         this.appendFragments();
     }
+    connectedCallback() {
+        menuController.register(this.hostElement);
+    }
     disconnectedCallback() {
         this.themeNameDisposer?.dispose();
+        menuController.unregister(this.hostElement);
     }
     updateThemeState() {
         this.isDarkMode = themeSwitcher.getMode() === 'dark';
@@ -399,9 +438,25 @@ export class Menu {
         this.itemsScrollShadowBottom =
             Math.round(scrollTop + clientHeight) < scrollHeight;
     }
-    onOverlayClose() {
+    onOverlayClose(event) {
+        const shouldRestoreFocus = this.shouldRestoreMenuFocus(event);
         this.animateOverlayFadeOut(() => {
             this.resetOverlay();
+            if (shouldRestoreFocus) {
+                this.focusMenuNavigationContainer();
+            }
+        });
+    }
+    shouldRestoreMenuFocus(event) {
+        return !!event;
+    }
+    focusMenuNavigationContainer() {
+        const menuNavigation = this.menuNavigationContainer;
+        if (!menuNavigation) {
+            return;
+        }
+        requestAnimationFrameNoNgZone(() => {
+            menuNavigation.focus();
         });
     }
     animateOverlayFadeIn() {
@@ -441,9 +496,136 @@ export class Menu {
             this.onOverlayClose();
         }
     }
+    updateBottomSlotState() {
+        this.hasBottomSlotItems = Array.from(this.hostElement.children).some((element) => element.getAttribute('slot') === 'bottom');
+    }
     isHiddenFromViewport() {
         return this.breakpoint === 'sm' && this.expand === false;
     }
+    updateRovingTabIndex(items, activeIndex) {
+        this.updateMenuItemPositionMetadata(items);
+        items.forEach((item, i) => {
+            item.setTabIndex?.(i === activeIndex ? 0 : -1);
+        });
+    }
+    resetRovingTabIndex(items = this.getAllFocusableItems()) {
+        this.updateMenuItemPositionMetadata(items);
+        items.forEach((item) => {
+            item.setTabIndex?.(-1);
+        });
+    }
+    // item positions and menu size has to be set manually because slotted items and utility controls are separated into two groups
+    updateMenuItemPositionMetadata(items) {
+        // get all items unfiltered in case any of them changed state and became hidden or disabled
+        const allMenuItems = [
+            ...Array.from(this.hostElement.querySelectorAll('ix-menu-item')),
+            ...Array.from(this.hostElement.shadowRoot?.querySelectorAll('.menu-utility-controls > ix-menu-item') ?? []),
+        ];
+        allMenuItems.forEach((item) => {
+            item.removeAttribute('aria-posinset');
+            item.removeAttribute('aria-setsize');
+        });
+        const total = items.length;
+        items.forEach((item, index) => {
+            item.setAttribute('aria-posinset', String(index + 1));
+            item.setAttribute('aria-setsize', String(total));
+        });
+    }
+    handleMenuFocusIn(event) {
+        const items = this.getAllFocusableItems();
+        const path = event.composedPath();
+        const activeIndex = items.findIndex((item) => path.includes(item));
+        if (activeIndex !== -1) {
+            this.lastFocusedMenuItem = items[activeIndex];
+            this.updateRovingTabIndex(items, activeIndex);
+        }
+        else if (event.target instanceof HTMLElement) {
+            this.resetRovingTabIndex(items);
+        }
+    }
+    getAllFocusableItems() {
+        const isNavigable = (el) => !el.hasAttribute('disabled') &&
+            !el.hasAttribute('hidden') &&
+            this.isVisible(el);
+        const lightItems = Array.from(this.hostElement.querySelectorAll(':scope > ix-menu-item, :scope > ix-menu-category, :scope > a > ix-menu-item, :scope > a > ix-menu-category')).filter(isNavigable);
+        const utilityItems = Array.from(this.hostElement.shadowRoot?.querySelectorAll('.menu-utility-controls > ix-menu-item') ?? []).filter(isNavigable);
+        return [...lightItems, ...utilityItems];
+    }
+    suppressAnchorWrapperTabStops() {
+        Array.from(this.hostElement.querySelectorAll(':scope > a'))
+            .filter((a) => a.querySelector('ix-menu-item, ix-menu-category'))
+            .forEach((a) => {
+            if (a.getAttribute('tabindex') !== '-1') {
+                a.setAttribute('tabindex', '-1');
+            }
+        });
+    }
+    isEventFromExpandedCategoryItems(event) {
+        return event
+            .composedPath()
+            .some((el) => el instanceof HTMLElement && el.getAttribute?.('role') === 'menu');
+    }
+    handleMenuKeyDown(event) {
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+            return;
+        }
+        if (this.isEventFromExpandedCategoryItems(event)) {
+            return;
+        }
+        const items = this.getAllFocusableItems();
+        if (items.length === 0) {
+            return;
+        }
+        const path = event.composedPath();
+        const currentIndex = items.findIndex((item) => path.includes(item));
+        const isMenuNavigationFocused = currentIndex === -1 && path.includes(this.menuNavigationContainer);
+        if (!isMenuNavigationFocused && currentIndex === -1) {
+            return;
+        }
+        event.preventDefault();
+        if (isMenuNavigationFocused) {
+            let index = items.indexOf(this.lastFocusedMenuItem);
+            if (event.key === 'Home') {
+                index = 0;
+            }
+            else if (event.key === 'End') {
+                index = items.length - 1;
+            }
+            else if (index === -1) {
+                index = event.key === 'ArrowDown' ? 0 : items.length - 1;
+            }
+            this.updateRovingTabIndex(items, index);
+            this.lastFocusedMenuItem = items[index];
+            items[index].focus();
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown': {
+                const next = (currentIndex + 1) % items.length;
+                this.updateRovingTabIndex(items, next);
+                this.lastFocusedMenuItem = items[next];
+                items[next].focus();
+                break;
+            }
+            case 'ArrowUp': {
+                const prev = (currentIndex - 1 + items.length) % items.length;
+                this.updateRovingTabIndex(items, prev);
+                this.lastFocusedMenuItem = items[prev];
+                items[prev].focus();
+                break;
+            }
+            case 'Home':
+                this.updateRovingTabIndex(items, 0);
+                this.lastFocusedMenuItem = items[0];
+                items[0].focus();
+                break;
+            case 'End':
+                this.updateRovingTabIndex(items, items.length - 1);
+                this.lastFocusedMenuItem = items.at(-1);
+                items.at(-1)?.focus();
+                break;
+        }
+    }
     async showAppSwitch() {
         const { defaultPrevented } = this.openAppSwitch.emit();
         if (defaultPrevented) {
@@ -461,44 +643,47 @@ export class Menu {
         else if (this.showAbout) {
             overlayLabel = this.i18nLegal;
         }
-        return (h(Host, { key: '1aebc8f8c0ac09e4a0a01f30ba769f1974958cf9', class: {
+        return (h(Host, { key: 'e85a8e0d55269c10e679ef732e4f1e695d4ddd43', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("nav", { key: 'b23730df88ec2d76724c4c7920fa6993a24fe91b', "aria-label": this.applicationName, class: {
+            }, slot: "menu" }, h("nav", { key: '9a24665cb1cc4a1cfbbd47de4f579c11bbcb20b8', "aria-label": this.applicationName, class: {
                 menu: true,
                 expanded: this.expand,
-            } }, h("div", { key: 'dc91ac2d007de0e97ed1ba9d3a6d103b5b05868f', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: '19aff43787702fd8cdca2a3d51981538f0d36b38', breakpoint: this.breakpoint, expanded: this.expand, "i18n-expand": this.i18nExpand, "i18n-collapse": this.i18nCollapse, pinned: this.pinned, class: "menu-expand-icon", onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
-            this.applicationLayoutContext?.appSwitchConfig && (h("ix-icon-button", { key: '7adcf4e6a6436022dcfc61c7512a94229fbcc4bb', onClick: () => {
+            } }, h("div", { key: '5d3cd419caeaaa61fcc76c446321feea5702e767', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: '4259dc4201069a8ba1a6d02cf643647a87672e2d', breakpoint: this.breakpoint, expanded: this.expand, "i18n-expand": this.i18nExpand, "i18n-collapse": this.i18nCollapse, pinned: this.pinned, class: "menu-expand-icon", onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
+            this.applicationLayoutContext?.appSwitchConfig && (h("ix-icon-button", { key: 'f0934779c9031e59508491376d5bcbb8389a404d', onClick: () => {
                 this.showAppSwitch();
-            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: '387bac9de2fec8e79fabf6d1130c4d6b22dd9258', id: "menu-tabs", style: {
+            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: '36b41ef42aa08f1c01e6c0fb295ef61a1daf61de', role: "menubar", "aria-orientation": "vertical", "aria-label": this.i18nAriaLabelMenu, "aria-description": this.i18nNavigationHint, class: {
+                'menu-navigation': true,
+                'menu-navigation--fill': this.shouldFillMenuNavigation,
+            }, tabIndex: 0, onKeyDown: (e) => this.handleMenuKeyDown(e), onFocusin: (e) => this.handleMenuFocusIn(e), onFocusout: () => this.resetRovingTabIndex() }, h("div", { key: '3d5d491948f2c912d435a7a46b4e8ff02a41c242', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: 'bec523ac0b17d45d73c007cd7ca82193c8e25668', class: "tabs-shadow-container" }, h("div", { key: 'c69d499b1aac3d5ff2ce3cbacaea89f96873f94b', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '6fd98aa6dbad269e362d1796e1b96a6fda974cdd', class: "tabs-shadow-container" }, h("div", { key: '652837d937df0b5456569485dff51b0a8f4d4ebb', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), h("div", { key: '1bf7e6500511ee7404101d110161f105e5f43fe9', class: {
+            } }), h("div", { key: 'a3ea2437b589f65eb446f665bb1490e1cbfe2ad2', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '99f9994c254898d82ad98665881531105b298138', class: "menu-avatar" }, h("slot", { key: '180c3410631d5a78132b89b7e11db4f13d238867', name: "ix-menu-avatar" })), h("slot", { key: '38a1e0ea97e9889dc160be815c46ee4558d4078f', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: '338d93258911beb1bf3f98a8df7bde1d24b45b60', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: 'b57f2058a19b72373f9421030eeaa4c4e29bb74c', class: "menu-avatar" }, h("slot", { key: 'e8f517dcf4560f7dbe163d718138499929ea158e', name: "ix-menu-avatar" })), h("slot", { key: 'e2c7c6e96064935789a638b61cbac7ed41e2376f', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: 'b4dbc21fb94e875bf44c540c920808358da30c72', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), h("div", { key: '815181e90fd29218e43d04b1ea4dfc5f9c68cec6', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), h("div", { key: '2bdaa8799a1fbe9d604f369180184c52618b4d24', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '99f1e2452f900444d365e3c3e2ad438cb48ef7e5', name: "bottom", onSlotchange: () => this.updateBottomSlotState() })), h("div", { key: '0471a885588c5fb70ca704ac066d5dd3e739cb0c', class: "bottom-tab-divider" }), h("div", { key: 'd62d0249f5a20c692e293d67bb1b4e038aa88d27', class: "menu-utility-controls" }, this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings, "aria-expanded": this.showSettings.toString(), "aria-controls": "menu-overlay" })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: iconLightDark, label: this.i18nToggleTheme, role: "switch", "aria-checked": this.isDarkMode.toString() })) : null, h("div", { key: '5f90277b54ee68fa14b41d210eb52bcb04b72dbb', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: 'f11a76b89e66b2b5d7068011ee3b076b6464a87a', name: "bottom" })), h("div", { key: '737628853dc8a66a8b3b79bfe835efb37f24bb92', id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings, "aria-haspopup": "dialog", "aria-expanded": this.showSettings.toString(), "aria-controls": "menu-overlay" })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: iconLightDark, label: this.i18nToggleTheme, role: "menuitemcheckbox", "aria-checked": this.isDarkMode.toString() })) : null, this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal, "aria-expanded": this.showAbout.toString(), "aria-controls": "menu-overlay" })) : null), h("section", { key: '756fd1ff3ec02a40f6fd9cfabee6e3b2c9815e7c', id: "menu-overlay", "aria-label": overlayLabel, class: {
+            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal, "aria-haspopup": "dialog", "aria-expanded": this.showAbout.toString(), "aria-controls": "menu-overlay" })) : null)), h("div", { key: '076482a3461808756d0c028f5e9f8093ac435941', id: "popover-area" })), h("section", { key: 'cc54b807048a80a7284629d763f927d2191c9eec', id: "menu-overlay", role: "dialog", "aria-label": overlayLabel, class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, h("div", { key: '472fa2edfcbad244714c8e77ae30a1a3be0e82c8', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '220927c09a1e9f9d280cf096870b89e30a9131c3', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
+            } }, h("div", { key: 'c50c54c2729eba12801daf7d36bef977ea979ec9', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '8979d180bc1ad06d4fb2f0a2065b4e9d47dabab3', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
     }
     static get is() { return "ix-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -673,6 +858,52 @@ export class Menu {
                 "attribute": "pinned",
                 "defaultValue": "false"
             },
+            "i18nAriaLabelMenu": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "i18n aria-label for menu. Gets read out by screen readers when first focusing the menu"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "i18n-aria-label-menu",
+                "defaultValue": "'Application Navigation'"
+            },
+            "i18nNavigationHint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "i18n description for menu keyboard navigation hint, read by screen readers when focusing the menu"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "i18n-navigation-hint",
+                "defaultValue": "'Use Up and Down arrow keys to navigate between menu items'"
+            },
             "i18nLegal": {
                 "type": "string",
                 "mutable": false,
@@ -782,6 +1013,7 @@ export class Menu {
             "breakpoint": {},
             "itemsScrollShadowTop": {},
             "itemsScrollShadowBottom": {},
+            "hasBottomSlotItems": {},
             "applicationLayoutContext": {},
             "isDarkMode": {}
         };

package/dist/collection/components/menu-about/menu-about.js

@@ -8,6 +8,9 @@
  */
 import { iconClose } from "@siemens/ix-icons/icons";
 import { forceUpdate, h, Host, } from "@stencil/core";
+/**
+ * @slot default - About overlay content.
+ */
 export class MenuAbout {
     hostElement;
     /**
@@ -76,10 +79,10 @@ export class MenuAbout {
         forceUpdate(this);
     }
     render() {
-        return (h(Host, { key: 'cd2ec8d53634b27f234387f307e04d39533ca6ee', slot: 'ix-menu-about', class: {
+        return (h(Host, { key: '5a2f41b28934b02e58b96bbd17104fb6c59a033b', slot: 'ix-menu-about', class: {
                 show: this.show,
                 ['legacy-tabs']: !this.suppressLegacyTabs,
-            } }, h("div", { key: '68f17954c5f51c37e44b24b154cf58f218149468', class: 'about-header' }, h("h2", { key: '1e56a04ed218d37418cf9190f264586883e7f9bf', class: "text-h2" }, this.label), h("ix-icon-button", { key: '54b82a7838d4e1d9413efec58e03aeea3dcf21dd', variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
+            } }, h("div", { key: '39f148621fb106a682755bd6235460ac74cabf6e', class: 'about-header' }, h("h2", { key: '4a2932a48a28bd92dceb2ce63a97a397b871f89b', class: "text-h2" }, this.label), h("ix-icon-button", { key: '6956aaedb3e4a76735ef1cbe689220a9b43f67cf', variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
                 name: 'ix-menu-about',
                 nativeEvent: e,
             }) })), !this.suppressLegacyTabs ? (h("ix-tab-set", null, h("ix-tabs", { activeTabKey: this.activeTabKey }, this.items.map(({ label, tabKey }) => (h("ix-tab-item", { tabKey: tabKey, selected: tabKey === this.activeTabKey, label: label })))), h("slot", null))) : (h("slot", null))));

package/dist/collection/components/menu-about-item/menu-about-item.js

@@ -10,6 +10,7 @@ import { h, Host, Mixin, } from "@stencil/core";
 import { BaseTabMixin } from "../tab-item/tab.mixin";
 /**
  * @deprecated since 5.0.0, use ix-tab-item instead of ix-menu-about-item
+ * @slot default - About menu item content.
  */
 export class MenuAboutItem extends Mixin(BaseTabMixin) {
     constructor() {
@@ -31,7 +32,7 @@ export class MenuAboutItem extends Mixin(BaseTabMixin) {
         });
     }
     render() {
-        return (h(Host, { key: '30ba62aac3a8dff2224f9a207ca9f7fd2223bea8' }, h("ix-tab-panel", { key: '524c2909d0a0bec44a1867e8ff1323c0944e49e8', tabKey: this.tabKey }, h("slot", { key: 'aaa24a90ca22a0379437a2971b4dc1c52ee81110' }))));
+        return (h(Host, { key: '2d70a2809dc4eb56b1e3d6183ca837a38ee01b16' }, h("ix-tab-panel", { key: 'd0923d4116998d6a7e231b907eacd5f8081eae36', tabKey: this.tabKey }, h("slot", { key: 'abd6be8e81556b9cb3091dfb55cebfa9ab4d76d0' }))));
     }
     static get is() { return "ix-menu-about-item"; }
     static get properties() {

package/dist/collection/components/menu-about-news/menu-about-news.js

@@ -9,6 +9,9 @@
 import { iconClose, iconShout } from "@siemens/ix-icons/icons";
 import { h, Host, Mixin, } from "@stencil/core";
 import { DefaultMixins } from "../utils/internal/component";
+/**
+ * @slot default - News content.
+ */
 export class MenuAboutNews extends Mixin(...DefaultMixins) {
     constructor() {
         super();
@@ -47,16 +50,16 @@ export class MenuAboutNews extends Mixin(...DefaultMixins) {
     /** @internal */
     expanded = false;
     render() {
-        return (h(Host, { key: 'c284e2ac608e4e039c2df0ee62c2c3befc241391', class: {
+        return (h(Host, { key: '2140402346af0c9c6b35c32cd001d41fac408f66', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, h("div", { key: 'e4a567021e29740a32199328c1a18024265101a6', class: "banner-container" }, h("ix-icon", { key: 'dc9d56156ee0010d675315a3afd03f17f45a9b6f', color: "color-inv-contrast-text", name: iconShout, size: "32" }), h("svg", { key: '95f83ef229d360cc1d65641bcd0f7f377b1f22f7', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: '4291b6af8d4b43a13e2e4aa50b9a180ee5903202', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: 'adb50ab8101ff53415ea4fee45e7bc182c9aad00', class: "cui-popover-news-header" }, h("ix-typography", { key: '7b7bdb1153222bbee432ed46c562ac1a6a8d7d3f', format: "label", bold: true }, this.label)), h("ix-icon-button", { key: '6cdc8cf741a65498937db07c1f8d767d11a62f04', size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
+            } }, h("div", { key: '655926df0b24c2edbb2c5e8e504a7f2072ed16dd', class: "banner-container" }, h("ix-icon", { key: 'd7d86dd91e2d6d09ba16f48548f044520e36f893', color: "color-inv-contrast-text", name: iconShout, size: "32" }), h("svg", { key: '8b2bbf35bf826f8aeed01df8cf81aef3185a0fff', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: '0ff0926642c10c1662aa7055ba18db6f5b7b8a1d', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: 'c392b9b890d85e241f6f88d20c1307ce23030352', class: "cui-popover-news-header" }, h("ix-typography", { key: '546560dd3afdb47034e86e3ff2a6290824cc02c1', format: "label", bold: true }, this.label)), h("ix-icon-button", { key: 'e6343c6409f25403e870054a23c47c7b849c837c', size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), h("div", { key: '9c374a87ff85b7660820b9b57abe8e579190071b', class: "slot-container" }, h("slot", { key: 'bd4a92948a87e0e2fb2a0617bedb065147ae3d57' })), this.activeAboutTabKey ? (h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (event) => {
+            } }), h("div", { key: '73b723ebd03bdf5f5592f8da68bfe481d5e5995c', class: "slot-container" }, h("slot", { key: 'ef993e0dcaf820e2e89eeb017bc15f32026c9127' })), this.activeAboutTabKey ? (h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (event) => {
                 this.show = false;
                 this.showMore.emit(event);
-            } }, this.i18nShowMore))) : null, h("div", { key: '5f13c58d47a92e7acd3212ae7d48cc78ab4a5240', id: "arrow" })));
+            } }, this.i18nShowMore))) : null, h("div", { key: '90c790cac92119aa825bfd075e8c280894eb7141', id: "arrow" })));
     }
     static get is() { return "ix-menu-about-news"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-avatar/menu-avatar.js

@@ -11,6 +11,9 @@ import { h, Host, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
 import { makeRef } from "../utils/make-ref";
 import { getSlottedElements } from "../utils/shadow-dom";
+/**
+ * @slot default - Avatar dropdown items.
+ */
 export class MenuAvatar {
     hostElement;
     /**
@@ -77,13 +80,13 @@ export class MenuAvatar {
     render() {
         const tooltipText = this.tooltipText ?? this.top;
         const ariaHidden = tooltipText === this.top;
-        return (h(Host, { key: '5c6f05897a9a1c5a24b8ac5ba87686b6f83ca090', slot: "ix-menu-avatar" }, h("button", { key: '4425caeee1c3ae0c74d45c3253190cc6272416a3', class: "nav-item top-item avatar no-hover", id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: 'c0141851636696906476abd3777f7e5bd64322b7', image: this.image, initials: this.initials }), h("div", { key: '3f79c860b22a4dbcc8e72e768a6709c27a6a78ea', class: "avatar-name" }, h("span", { key: 'e901a92cee9be95d6602da989872c8870291418a', class: "text-default-single" }, this.top), h("span", { key: '7da5bba687c52d0fab08c8c4cdc992bdb3dbd7be', class: "text-default-single" }, this.bottom))), !!tooltipText && (h("ix-tooltip", { key: '1dd0063f1e2ee34df0076dd7a19b885d19837d80', ref: this.tooltipRef, for: `#${this.avatarElementId}`, placement: 'right', "aria-hidden": a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText)), h("ix-dropdown", { key: '6709e38d692c0f725ffbdd2531fa8d9b5d89bf3c', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
+        return (h(Host, { key: '037f15bd4bd44d3f233bebb922fe5e7b4f002fcf', slot: "ix-menu-avatar" }, h("button", { key: 'b25d995e137224af7d5e8a4a4ef75fbcd42139e5', class: "nav-item top-item avatar no-hover", id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: 'defa946c69c1ee6f31a68039a6eed6b2ed71ebd7', image: this.image, initials: this.initials }), h("div", { key: '14d0dba651a996032354d48f518b628c7392e61d', class: "avatar-name" }, h("span", { key: 'ec4ed8e734b95d43382f8f8bd7342e58895c4883', class: "text-default-single" }, this.top), h("span", { key: '691da78327c07d198b78ad62aa33b8dc63440050', class: "text-default-single" }, this.bottom))), !!tooltipText && (h("ix-tooltip", { key: 'a08173ffda2cb1c548e5d2f4b49a61f43f921390', ref: this.tooltipRef, for: `#${this.avatarElementId}`, placement: 'right', "aria-hidden": a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText)), h("ix-dropdown", { key: 'aad18b46b349927551b36988b51226f06789b91f', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
                 mainAxis: 16,
             }, onShowChanged: (event) => {
                 if (event.detail && this.tooltipRef.current) {
                     this.tooltipRef.current.hideTooltip(0);
                 }
-            }, enableTopLayer: this.enableTopLayer }, h("slot", { key: '40ebda089d3578ddd04b3a304b14406051760df8', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (h("ix-menu-avatar-item", { key: '7a0a8e9d709adb8e7cf851fa56e1943cdcd21966', label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
+            }, enableTopLayer: this.enableTopLayer }, h("slot", { key: '1dc6f211194711861c3374efbd7943124ede68de', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (h("ix-menu-avatar-item", { key: 'a39a67cb36600d63414cc8fa5457d0312580574d', label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
                 this.logoutClick.emit(e);
             } })))));
     }

package/dist/collection/components/menu-avatar-item/menu-avatar-item.js

@@ -28,7 +28,7 @@ export class MenuAvatarItem {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (h("ix-dropdown-item", { key: 'f96a631b215cb1d42035b4d5ffb7ce7fbea2b34a', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (h("ix-dropdown-item", { key: '437aead7832603097e4f814abef0108dcb0ad386', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
     static get is() { return "ix-menu-avatar-item"; }
     static get encapsulation() { return "shadow"; }