@siemens/ix 5.1.0 → 5.2.0

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

@@ -18,6 +18,14 @@ 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;
     /**
@@ -635,32 +643,32 @@ export class Menu {
         else if (this.showAbout) {
             overlayLabel = this.i18nLegal;
         }
-        return (h(Host, { key: '47a4fe953c394a65c515c69eb164fae9921241d0', class: {
+        return (h(Host, { key: '5f6815b9abd45243d81f776dd85efd9aab656588', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("nav", { key: 'befa847fe411183d14f2618eae42f11892bd53e3', "aria-label": this.applicationName, class: {
+            }, slot: "menu" }, h("nav", { key: '7015050bc75040e5b8108a69192a1bdcbff57846', "aria-label": this.applicationName, class: {
                 menu: true,
                 expanded: this.expand,
-            } }, 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: () => {
+            } }, h("div", { key: '3a114469dd32955a38cdca3a5e2e03cd5b2471db', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: '89f1c89efa15f828a257d275850dd26de4ee36b2', 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: '469adcac94c793d8d23296a97037e33027ef6101', onClick: () => {
                 this.showAppSwitch();
-            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: '088f955c6ab52008a6cd1aa6e75ef5d97211cb5b', role: "menubar", "aria-orientation": "vertical", "aria-label": this.i18nAriaLabelMenu, "aria-description": this.i18nNavigationHint, class: {
+            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: 'd7845606dc164ac287c1eb9fbbbc5182df51b3d6', 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: {
+            }, tabIndex: 0, onKeyDown: (e) => this.handleMenuKeyDown(e), onFocusin: (e) => this.handleMenuFocusIn(e), onFocusout: () => this.resetRovingTabIndex() }, h("div", { key: 'a9b2b9fb987fe35e89c79d48084188d352186a5d', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '80712fd2a17029394ca4355cc0ca22a61ff7b4ef', class: "tabs-shadow-container" }, h("div", { key: '3fc0eca7419f73746525f4881dea0cbc27398d87', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '9873540581ae3a56946aa25df1226f49cd8263dd', class: "tabs-shadow-container" }, h("div", { key: '455bab2823a08e5986b49cddee42f4ab6693fdf5', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), h("div", { key: 'f6d8d4716a1b3e15ac7c48a80fd7878ec7003d63', class: {
+            } }), h("div", { key: 'f9bfcef1a3c9da55668a9fcd3d1525eb93027c7a', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, 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: {
+            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '02b8d8fc871e63599af9da6671add34cdb6d44e9', class: "menu-avatar" }, h("slot", { key: 'd09ba12af87e88c37ef4191a93cf34e020b81697', name: "ix-menu-avatar" })), h("slot", { key: 'a5ba3a6342eb7fed67c335ce3e78827c5177cc00', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: 'e1a3055be90a4db89191c93fccd7639191864c92', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), 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: {
+            } }))), h("div", { key: '47ad3e4151532503b1615f09bd72ce817ac9cf78', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '06f18d87d99292f05df3456f0b6fb51df2635a4d', name: "bottom", onSlotchange: () => this.updateBottomSlotState() })), h("div", { key: '538aa364e048d96ecca787ce0e38e8307af99ef5', class: "bottom-tab-divider" }), h("div", { key: '3452cd5dcea04f81b23fe9ee7d761dcd8f34936f', 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,
@@ -668,14 +676,14 @@ export class Menu {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, 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: {
+            }, 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: 'b5b1d58232534c81c79591bf0df1c5e508551394', id: "popover-area" })), h("section", { key: 'e8b48131b814163ab7c23637e55b6991b7e2a3cb', 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: '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))));
+            } }, h("div", { key: '10e5137c8069b962c9114033c404f54bb9c60a63', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '975b5fdb40e76a00061e9e9744a53df4ea2055fb', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
     }
     static get is() { return "ix-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -215,7 +215,7 @@ a {
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -224,37 +224,37 @@ a {
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .about-header {

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: '56d35aa6c165dfcd963b3a6dce8721bac885aac5', slot: 'ix-menu-about', class: {
+        return (h(Host, { key: '4a505ef81bfc9d96cbff402d014f8b31e3a72957', slot: 'ix-menu-about', class: {
                 show: this.show,
                 ['legacy-tabs']: !this.suppressLegacyTabs,
-            } }, 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({
+            } }, h("div", { key: '12702e8e4b905e2c7f7b4f25641a59df69fd595f', class: 'about-header' }, h("h2", { key: '5277ff2507f0d623cce94150e680a3c4bbc844eb', class: "text-h2" }, this.label), h("ix-icon-button", { key: '8d27723ee3caacc43fc90e2dca417af2f5897e11', 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: 'f0d90c76679a6df3732abdadfdf89608a2873166' }, h("ix-tab-panel", { key: '7c702b375fb91714e5d0e9c8bd514705c5306bf2', tabKey: this.tabKey }, h("slot", { key: '281a2e494f1a7fe509a95d7288f56656b12a28e1' }))));
+        return (h(Host, { key: 'acde06cac4ff13c7b9529d219b60e5460d01eb2b' }, h("ix-tab-panel", { key: 'a7458d27e0b5f2cf93154a438f67386d6583fbe6', tabKey: this.tabKey }, h("slot", { key: 'e47b54b6640d0e2a068deb648a22d5908b9ea380' }))));
     }
     static get is() { return "ix-menu-about-item"; }
     static get properties() {

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

@@ -69,7 +69,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -78,37 +78,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .banner-container {

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: '4cd6bc26f5d602e17ff8bb73ec3f3b97fedc5737', class: {
+        return (h(Host, { key: 'fff5b2a49fedcf7c44e44d617b757c9e2e0a4d30', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, 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: () => {
+            } }, h("div", { key: '7945eb35a2f33579e87040f75a31e1b32389aac1', class: "banner-container" }, h("ix-icon", { key: 'f5a4674d02f6045af787f1ec6bee5db1d02fcb7d', color: "color-inv-contrast-text", name: iconShout, size: "32" }), h("svg", { key: 'ee79deb22d6dccdfa0c2a3a447f84fcfdf64eefb', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: '01336bc75d9a1d05c95784d394890502b979b366', points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: '8d4f8bef7935b59c964591ab30129cdcf798b95f', class: "cui-popover-news-header" }, h("ix-typography", { key: 'f760efa506ab850dbcf7874bbcd6884fb5db013f', format: "label", bold: true }, this.label)), h("ix-icon-button", { key: 'b1dcaf11abb71df154c8e9cfcf174315fceab36c', size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), 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) => {
+            } }), h("div", { key: '5d55061b7e0411577504303f79136feb34c56570', class: "slot-container" }, h("slot", { key: 'a0fea78d3ede753a3473885a19f178c08c8266cb' })), 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: 'f6785ecddbeab3b8bf184a7133aa49f6cefb485e', id: "arrow" })));
+            } }, this.i18nShowMore))) : null, h("div", { key: 'b0bf14f278e6eaf120c800b8ee94fc957b28e9e0', id: "arrow" })));
     }
     static get is() { return "ix-menu-about-news"; }
     static get encapsulation() { return "shadow"; }

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

@@ -60,7 +60,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -69,37 +69,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .avatar {

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: '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: {
+        return (h(Host, { key: 'd3454f7e95389f1d1f23963d6a70434fe44c7275', slot: "ix-menu-avatar" }, h("button", { key: '3a4bf271f0cd608143e921b57f544a3ce1a1ed2f', class: "nav-item top-item avatar no-hover", id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: 'b8cf381e8ff5111aa5ec84c68023011978170b44', image: this.image, initials: this.initials }), h("div", { key: 'fc20477ea49354b645c60a88329dd01832b50274', class: "avatar-name" }, h("span", { key: '42b988c3e71102ae457ebc3936c43f2c934cd25f', class: "text-default-single" }, this.top), h("span", { key: '96cb4f2ab217b4d802f3dd8d7be1f40437824697', class: "text-default-single" }, this.bottom))), !!tooltipText && (h("ix-tooltip", { key: '9dc4248b29a36552bccab8ea2a17484d6fb27ea8', ref: this.tooltipRef, for: `#${this.avatarElementId}`, placement: 'right', "aria-hidden": a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText)), h("ix-dropdown", { key: '382631209ea32a539c3fb6c59ad5088924a12c50', 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: 'd7444d53d15826d0999476c55bc428a89a6b73fa', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (h("ix-menu-avatar-item", { key: 'f6c1fc16b2b39ef2277ae01485f1b7014e72e568', label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
+            }, enableTopLayer: this.enableTopLayer }, h("slot", { key: '1f3ba4ccc8636154f8a853decacf1b0ffd9fa6c9', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (h("ix-menu-avatar-item", { key: 'ee3661210d5d8432338973d8cc3e96c941f8dd3d', label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
                 this.logoutClick.emit(e);
             } })))));
     }

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

@@ -31,7 +31,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -40,36 +40,36 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }

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: '437aead7832603097e4f814abef0108dcb0ad386', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (h("ix-dropdown-item", { key: '4ace9b42e923f07eafa2280318a258f3a8be422d', 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"; }

package/dist/collection/components/menu-category/menu-category.css

@@ -40,7 +40,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -49,37 +49,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .category {

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

@@ -22,6 +22,9 @@ import { createSequentialId } from "../utils/uuid";
 const DefaultIxMenuItemHeight = 40;
 const DefaultAnimationTimeout = 150;
 let categorySequenceId = 0;
+/**
+ * @slot default - Menu items in the category.
+ */
 export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
         super();
@@ -116,7 +119,7 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
         if (this.ixMenu?.expand) {
             return;
         }
-        this.closeOtherCategories.emit();
+        this.closeOtherCategories.emit(this.categoryId);
         if (this.dropdownRef.current) {
             const ref = dropdownController.getDropdownById(this.dropdownRef.current.dataset.ixDropdown);
             if (ref) {
@@ -124,7 +127,10 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
             }
         }
     }
-    hideMenuItemDropdown() {
+    hideMenuItemDropdown(event) {
+        if (event?.detail === this.categoryId) {
+            return;
+        }
         if (this.dropdownRef.current) {
             const ref = dropdownController.getDropdownById(this.dropdownRef.current.dataset.ixDropdown);
             if (ref) {
@@ -321,7 +327,7 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
             ...this.inheritAriaAttributes,
         };
         delete inheritedA11yWithoutRole.role;
-        return (h(Host, { key: '593b29c5f5cf2e63cc6c1492f6f90fc7bddb3bd8', class: {
+        return (h(Host, { key: '16e92aa31c97226ac110248e58ee4e8cf6e686cb', class: {
                 expanded: this.showItems,
             }, onIxMenuCategoryItemSelect: () => this.onNestedItemSelect(), onPointerEnter: () => {
                 this.showMenuItemDropdown();
@@ -330,14 +336,14 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
                     return;
                 }
                 this.hideMenuItemDropdown();
-            } }, h("ix-menu-item", { key: '35bfb38e90317bf2459bce59860ba0f74e8174f1', ...inheritedA11yWithoutRole, "aria-haspopup": 'menu', "aria-expanded": this.showItems || this.showDropdown ? 'true' : 'false', id: this.categoryId, ref: this.categoryParentRef, class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onKeyDown: (event) => this.onKeyDown(event), tooltipText: this.tooltipText, isCategory: true, menuCategoryLabel: this.label }, h("span", { key: '2ea2e12dad87e97ebb8ebac718cae45309e42eb2', class: "category" }, h("span", { key: '9ffeb1f8b799f59228a43d1d5c8c850a45ce3c25', class: "category-text" }, this.label), h("ix-icon", { key: '47cceda4005228068e13a36addcd60c01a1d1efc', name: iconChevronDownSmall, class: {
+            } }, h("ix-menu-item", { key: 'bfce7e95d4e994a53d20016b1108f26248c19de9', ...inheritedA11yWithoutRole, "aria-haspopup": 'menu', "aria-expanded": this.showItems || this.showDropdown ? 'true' : 'false', id: this.categoryId, ref: this.categoryParentRef, class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onKeyDown: (event) => this.onKeyDown(event), tooltipText: this.tooltipText, isCategory: true, menuCategoryLabel: this.label }, h("span", { key: '1700d1f6d3c93e66ede8e96ab6f6ed126b255220', class: "category" }, h("span", { key: '6f56b33cbf5be34051d2466c9b99d012664ad1c9', class: "category-text" }, this.label), h("ix-icon", { key: 'b971ca95e49344cc3f60c72430701c6a8c06a21c', name: iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            }, "aria-hidden": "true" }))), h("div", { key: '5dff5d2e58da8af82e56d927cdec4c2d8d52ee67', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            }, "aria-hidden": "true" }))), h("div", { key: '36f61ae3b2b0e52fa67380216d46b5386c446f30', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            }, role: "menu", "aria-labelledby": this.categoryId, onKeyDown: (e) => this.onMenuItemsKeyDown(e) }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '17963ff7cb90f56843d13b8d10a34d2efe56427d', ref: this.dropdownRef, hostRole: "menu", "aria-label": this.label, closeBehavior: 'both', show: this.showDropdown, onShowChange: ({ detail }) => this.onDropdownShowChange(detail), onShowChanged: ({ detail }) => this.onDropdownShowChanged(detail), class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
+            }, role: "menu", "aria-labelledby": this.categoryId, onKeyDown: (e) => this.onMenuItemsKeyDown(e) }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: 'a89d90584e563751f4e8c5705be94e2e52cd801a', 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) {
@@ -348,7 +354,7 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
                         e.preventDefault();
                     }
                 }
-            }, onFocusout: () => this.onDropdownFocusOut() }, h("ix-dropdown-item", { key: '76a24a1e7fdaa4cb8263fd3fc2a0f65e3bdb9674', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, h("ix-typography", { key: '5d11df71fc842c0968c9069340b0f208500e0d25', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: '3bb9b931667a4ed2ee32a230ffe6a7f8bae8e2b7' }), h("slot", { key: 'c37ca19af5209ec8129527e0c41c62f2b3f5d809' }))));
+            }, onFocusout: () => this.onDropdownFocusOut() }, h("ix-dropdown-item", { key: '437c4dfccac1e17d515cc1095b9b2d2ded520ae6', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, h("ix-typography", { key: 'a72c3c3f9db4d7330f7876518f2e0d26b3718f02', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: 'f743e54cbdbd27b56030f2a8f44073fe12ea1564' }), h("slot", { key: '37394a8edb8a0eeffa8b2ed4aaeb5d913249f2d5' }))));
     }
     static get is() { return "ix-menu-category"; }
     static get encapsulation() { return "shadow"; }
@@ -469,8 +475,8 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
                     "text": ""
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 }
             }];

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

@@ -17,7 +17,7 @@ import { createSequentialId } from "../utils/uuid";
 import { a11yBoolean } from "../utils/a11y";
 let sequenceId = 0;
 /**
- * @slot menu-item-label Custom label
+ * @slot default - Custom menu item label.
  */
 export class MenuItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
@@ -196,12 +196,12 @@ export class MenuItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin
             ...inheritedA11yWithoutRole,
         };
         const menuContent = [
-            this.icon && (h("ix-icon", { key: '64307467f954284272278cca78a80ae4f9c3b95a', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
+            this.icon && (h("ix-icon", { key: 'e319ac5c518ad11e6dee70251088c6f327f49827', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
             this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null,
-            h("span", { key: '1fd2d64f4f8487cb81ad7b981d4f8a0c5ebfb312', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: '571294f967aae798c6a63f3fbcd46aa4453e1263' })),
+            h("span", { key: 'c8e17fa4cb154eff4a2c524bc2118acb694d5d25', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: 'd747ad50df0926969025d4aaa60d0c47b7ca2602' })),
         ];
         const ariaLabel = this.getAriaLabel();
-        return (h(Host, { key: 'b3583fa356cc996792724ff03627f1a2fc6f9abd', class: {
+        return (h(Host, { key: '38dbbe9a89ab0a1063063d986c107eb0b4ecb92d', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
@@ -217,7 +217,7 @@ export class MenuItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin
                 }
             }, "aria-disabled": a11yBoolean(this.disabled), "aria-label": ariaLabel, "aria-current": this.active ? 'page' : undefined }, menuContent)) : (h("button", { ...commonAttributes, role: effectiveRole, tabIndex: this.isInMenuContext || this.isCategory
                 ? this.hostTabIndex
-                : undefined, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e), "aria-disabled": a11yBoolean(this.disabled), "aria-label": ariaLabel, "aria-current": this.active ? 'page' : undefined }, menuContent)), h("ix-tooltip", { key: '94f61e508c2c4653a40462f0a3e86ee86356e687', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": "true", "aria-labelledby": this.internalItemId }, this.tooltip)));
+                : undefined, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e), "aria-disabled": a11yBoolean(this.disabled), "aria-label": ariaLabel, "aria-current": this.active ? 'page' : undefined }, menuContent)), h("ix-tooltip", { key: '4fdc4aa9b1944ec3f43d12b71c81e0518d29ae75', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": "true", "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     static get is() { return "ix-menu-item"; }
     static get encapsulation() { return "shadow"; }