@siemens/ix 5.0.0 → 5.1.0

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

@@ -15,6 +15,7 @@ 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";
 export class Menu {
@@ -66,6 +67,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 +128,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 +148,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 +197,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 +227,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 +240,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 +430,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 +488,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 +635,47 @@ export class Menu {
         else if (this.showAbout) {
             overlayLabel = this.i18nLegal;
         }
-        return (h(Host, { key: '1aebc8f8c0ac09e4a0a01f30ba769f1974958cf9', class: {
+        return (h(Host, { key: '47a4fe953c394a65c515c69eb164fae9921241d0', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("nav", { key: 'b23730df88ec2d76724c4c7920fa6993a24fe91b', "aria-label": this.applicationName, class: {
+            }, slot: "menu" }, h("nav", { key: 'befa847fe411183d14f2618eae42f11892bd53e3', "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: 'd648ef9cf9525f858b25dbf8b396ab6faceadd4e', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: 'b9092de8f71df6ec8b78cc356f5fcc83902b75cd', 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: '4ce5e027869a3fe66290e9447c1da57ea827cdde', onClick: () => {
                 this.showAppSwitch();
-            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: '387bac9de2fec8e79fabf6d1130c4d6b22dd9258', id: "menu-tabs", style: {
+            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: '088f955c6ab52008a6cd1aa6e75ef5d97211cb5b', 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: 'b1ec4b72b2a1d791429a97617184065e1d47b260', 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: '80712fd2a17029394ca4355cc0ca22a61ff7b4ef', class: "tabs-shadow-container" }, h("div", { key: '3fc0eca7419f73746525f4881dea0cbc27398d87', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), h("div", { key: '1bf7e6500511ee7404101d110161f105e5f43fe9', class: {
+            } }), h("div", { key: 'f6d8d4716a1b3e15ac7c48a80fd7878ec7003d63', 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: '53ebf16042ac81b94cfceedf4efff1d4eaf74d08', class: "menu-avatar" }, h("slot", { key: '1cbebf98bb6bb2ba9545a153d45390fe6e7effb0', name: "ix-menu-avatar" })), h("slot", { key: '28941eced5a431a5610859c187db19d0f0a17437', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: 'e67916be1c943d25ae37b7b97c08b0cc1dd72bdf', 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: '0d5aed4213390ac89cb1906e52528fe0451a250f', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '95514a4b070d7e8c9f73869acf59c78169a524ac', name: "bottom", onSlotchange: () => this.updateBottomSlotState() })), h("div", { key: '24b2a88b7eb24c2a33cf94313a2f6736249d0cd5', class: "bottom-tab-divider" }), h("div", { key: '6900b0226aeed36a3b643b790a4db230a0635eb6', 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: '4d1cfd95a64cd7b51eadb71131284ed7404af601', id: "popover-area" })), h("section", { key: '730576b8b7214a6aee310c05f67109fe6911b0c5', 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: 'f2c7e8b61608398eead0080b0b7e9f40702e3eab', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: 'e77e005e8a36e3b243b310254f230d90539fec94', 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 +850,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 +1005,7 @@ export class Menu {
             "breakpoint": {},
             "itemsScrollShadowTop": {},
             "itemsScrollShadowBottom": {},
+            "hasBottomSlotItems": {},
             "applicationLayoutContext": {},
             "isDarkMode": {}
         };

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

@@ -76,10 +76,10 @@ export class MenuAbout {
         forceUpdate(this);
     }
     render() {
-        return (h(Host, { key: 'cd2ec8d53634b27f234387f307e04d39533ca6ee', slot: 'ix-menu-about', class: {
+        return (h(Host, { key: '56d35aa6c165dfcd963b3a6dce8721bac885aac5', 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: '08a23deef054843de85fa1d2a6d97f4f8995e298', class: 'about-header' }, h("h2", { key: '9f97df8a9bfb172ebd3b3d549e965570ca20cfc3', class: "text-h2" }, this.label), h("ix-icon-button", { key: 'a007fc7f753a7c1f18c2c7a9639b5008810c70c5', 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

@@ -31,7 +31,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: 'f0d90c76679a6df3732abdadfdf89608a2873166' }, h("ix-tab-panel", { key: '7c702b375fb91714e5d0e9c8bd514705c5306bf2', tabKey: this.tabKey }, h("slot", { key: '281a2e494f1a7fe509a95d7288f56656b12a28e1' }))));
     }
     static get is() { return "ix-menu-about-item"; }
     static get properties() {

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

@@ -47,16 +47,16 @@ export class MenuAboutNews extends Mixin(...DefaultMixins) {
     /** @internal */
     expanded = false;
     render() {
-        return (h(Host, { key: 'c284e2ac608e4e039c2df0ee62c2c3befc241391', class: {
+        return (h(Host, { key: '4cd6bc26f5d602e17ff8bb73ec3f3b97fedc5737', 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: 'aceccc274a03b2b9bd5d0e88fe2063a1f238e356', class: "banner-container" }, h("ix-icon", { key: 'e2f6e81b2bb8ad1b44c881e3328f35dfb1856984', color: "color-inv-contrast-text", name: iconShout, size: "32" }), h("svg", { key: '7c55727357b4562e6868dab8497a82953371a732', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: 'a4269a3e39b7228fb8ecc3bbf3e0e8a7a64cd4d7', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: '322dfb66bc94343d9996d516cb58f404c186c115', class: "cui-popover-news-header" }, h("ix-typography", { key: '0f1553e39f9ab26f58fd09b9c40f79fc7c4afe38', format: "label", bold: true }, this.label)), h("ix-icon-button", { key: 'a4760b08b0b4e5b7480f690a55a3f9390225bfe3', 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: '810aaae79189785390a10d50f40d58e77ffd325d', class: "slot-container" }, h("slot", { key: '6a40f2beb6feb68b53fdc27d4cf96e2182c501ed' })), 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: 'f6785ecddbeab3b8bf184a7133aa49f6cefb485e', id: "arrow" })));
     }
     static get is() { return "ix-menu-about-news"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,13 +77,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: '63251d35fc15b945de3bae097702c3e0e7377568', slot: "ix-menu-avatar" }, h("button", { key: 'f50dd772c58b7b20e966d0a992f6e2537ebbe5bc', class: "nav-item top-item avatar no-hover", id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: '1b3ea2ab31cc248e021306b9399b5b2bbad1122f', image: this.image, initials: this.initials }), h("div", { key: '1e8aee8c464ebc41e99d00b6933f6682d1c98019', class: "avatar-name" }, h("span", { key: '3bc559472005be3d21b406fd9ea85fcb9737dcb6', class: "text-default-single" }, this.top), h("span", { key: '023fb55cd5229df9aadec9daf86834e16944a66f', class: "text-default-single" }, this.bottom))), !!tooltipText && (h("ix-tooltip", { key: '8e13fc36570e1152049b636ecabb042e7288c3e8', ref: this.tooltipRef, for: `#${this.avatarElementId}`, placement: 'right', "aria-hidden": a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText)), h("ix-dropdown", { key: '6a7e04c67894981100c3b81eb6ac9c5d9a16194a', 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: 'd7444d53d15826d0999476c55bc428a89a6b73fa', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (h("ix-menu-avatar-item", { key: 'f6c1fc16b2b39ef2277ae01485f1b7014e72e568', 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"; }