@siemens/ix 5.1.1 → 5.2.1

package/dist/collection/components/kpi/kpi.css

@@ -78,7 +78,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -87,37 +87,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 span {

package/dist/collection/components/kpi/kpi.js

@@ -59,13 +59,13 @@ export class Kpi {
         return tooltip;
     }
     render() {
-        return (h(Host, { key: '5efa239dd8c91b6661566c235f020900d0df9357', title: this.getTooltipText(), tabindex: "1", class: {
+        return (h(Host, { key: 'd89b035eefe6b02cdecdb139a28106dcd3b586de', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, h("div", { key: 'fc4d4c1ec7aa129aaf064809052e45e953bee223', class: {
+            } }, h("div", { key: 'b63dc3b4e257fffe4465af5535b2bec4b71940cf', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, h("span", { key: '82fe2894efb51fa9ca753745fd1dc3a82b1c04d0', class: "kpi-label" }, this.getStateIcon(), h("span", { key: 'c1d4de1f9945afacc737141c461c95e132a89141', class: "kpi-label-text" }, this.label)), h("span", { key: '60ef2f9d9d6cff9d19e9adc677eacd5a2f625854', class: "kpi-value-container" }, h("span", { key: 'cbf79bcf59f8614be4c1c540d33f4853943ea88d', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, h("span", { key: '46d740dc7d7562b72002c5fc7d5b7c48b1cbe7eb', class: "kpi-label" }, this.getStateIcon(), h("span", { key: '978eaa270dc2578b1a861b1ae6bbe7011357f282', class: "kpi-label-text" }, this.label)), h("span", { key: 'f103a4a0940cb9aa1d19f733b244fc7395a418cc', class: "kpi-value-container" }, h("span", { key: 'ced86eace345b294b2f1a444487b54c52808f5a3', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
     static get is() { return "ix-kpi"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout-auto/layout-auto.js

@@ -79,7 +79,7 @@ export class LayoutForm {
         });
     }
     render() {
-        return (h(Host, { key: '21efd579460a164571a802fe0bb80acf6f52c6dc' }, h("div", { key: 'ea241e9bb64871303076772e40eb0699ba358f3b', class: "container" }, h("slot", { key: 'a58d52f738522c46482a0dab84dc7fc8ca9ae6cb' }))));
+        return (h(Host, { key: '94b563d58576e5dee2891096349fff91de442bd0' }, h("div", { key: '567c89a3633e2566d069f73fb1332a1a40c0cf01', class: "container" }, h("slot", { key: '052862cfc5b47fc070e2354ac490bcb3f6cca4dd' }))));
     }
     static get is() { return "ix-layout-auto"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout-grid/layout-grid.js

@@ -24,12 +24,12 @@ export class LayoutGrid {
      */
     columns = 12;
     render() {
-        return (h(Host, { key: 'e6f61e2437dcf9815db4f5c1d2f2a13f8e579572', class: {
+        return (h(Host, { key: 'bbbb190067242d1af34db168445410d8dc223288', class: {
                 'no-margin': this.noMargin,
             }, style: {
                 '--ix-layout-grid-columns': `${this.columns}`,
                 '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, h("slot", { key: '485b027cb1717fe267b919d9f6b822a18db66a4f' })));
+            } }, h("slot", { key: 'efe37496334ae57f28e90d612e3598f606c66036' })));
     }
     static get is() { return "ix-layout-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/link-button/link-button.js

@@ -27,13 +27,13 @@ export class LinkButton {
      */
     target = '_self';
     render() {
-        return (h(Host, { key: '9a24825321d721c171c3701e5a6484f2dbdeffdc' }, h("a", { key: 'd3b81f3adba54dbdd0312510c79505c1ad7f1611', title: this.url, tabindex: "0", class: {
+        return (h(Host, { key: '2b52b09b194a4ea0f1295e38fda4b8eba79febcb' }, h("a", { key: 'aa7f332f3259e143ddc2ecdb489d3207475ce538', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: '3c6cb9b4adb2e2ace4835b8df8e4b3a082d1ffa2', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: '629817f64a53b1226a9e10f3abb8bc1bfaad2877', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: '96945fe61627958413117822bfbb3d321c91dfde', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: '93b6503a5fd5fba9fe22c1efeff8472e718f2fae', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: '8ec1e3c6991c89d4feb0aeaf8c8e6e3d87d2c23c' })))));
+            } }, h("slot", { key: 'c21e59ce0af752b66cdda745dc55588f00d6755d' })))));
     }
     static get is() { return "ix-link-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu/menu-expand-icon.css

@@ -65,6 +65,14 @@
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
+/*
+* SPDX-FileCopyrightText: 2026 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 :host {
   --ix-button-border-radius-left: var(--theme-btn--border-radius);
   --ix-button-border-radius-right: var(--theme-btn--border-radius);
@@ -85,7 +93,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -94,37 +102,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 button,
@@ -226,6 +234,12 @@
   color: var(--theme-btn-subtle-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-tertiary--border-color--active);
+  background-color: var(--theme-btn-subtle-tertiary--background--active);
+  color: var(--theme-btn-subtle-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -252,7 +266,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -261,37 +275,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 svg {

package/dist/collection/components/menu/menu-expand-icon.js

@@ -40,7 +40,7 @@ export class MenuExpandIcon {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: '60d58cfa658802593452a3f96a38686e0fab4039', class: {
+        return (h(Host, { key: '4a815a77cda2209ccb908c08adbbcc4f9fe28081', class: {
                 expanded: this.expanded,
                 'ix-focusable': true,
             } }, this.getMenuIcon()));

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

@@ -1696,7 +1696,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -1705,37 +1705,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 .tabs {

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

@@ -154,10 +154,22 @@ export class Menu {
         return this.hostElement.shadowRoot.querySelector('.menu');
     }
     get menuItemsContainer() {
-        return this.menu.querySelector('.tabs');
+        const menuItemsContainer = this.menu?.querySelector('.tabs');
+        if (!menuItemsContainer) {
+            throw new Error('Menu items container not found');
+        }
+        return menuItemsContainer;
     }
     get menuNavigationContainer() {
-        return this.menu.querySelector('.menu-navigation');
+        const menu = this.menu;
+        if (!menu) {
+            throw new Error('Menu element not found');
+        }
+        const menuNavigationContainer = menu.querySelector('.menu-navigation');
+        if (!menuNavigationContainer) {
+            throw new Error('Menu navigation container not found');
+        }
+        return menuNavigationContainer;
     }
     get overlayContainer() {
         return this.hostElement.shadowRoot.querySelector('.menu-overlay');
@@ -461,7 +473,11 @@ export class Menu {
     }
     animateOverlayFadeIn() {
         requestAnimationFrame(() => {
-            animate(this.overlayContainer, {
+            const overlayContainer = this.overlayContainer;
+            if (!overlayContainer) {
+                return;
+            }
+            animate(overlayContainer, {
                 duration: Animation.mediumTime,
                 backdropFilter: [0, 'blur(1rem)'],
                 translateX: ['-4rem', 0],
@@ -478,7 +494,12 @@ export class Menu {
     }
     animateOverlayFadeOut(onComplete) {
         requestAnimationFrame(() => {
-            animate(this.overlayContainer, {
+            const overlayContainer = this.overlayContainer;
+            if (!overlayContainer) {
+                onComplete();
+                return;
+            }
+            animate(overlayContainer, {
                 duration: Animation.mediumTime,
                 backdropFilter: ['blur(1rem)', 0],
                 translateX: [0, '-4rem'],
@@ -584,7 +605,8 @@ export class Menu {
         }
         event.preventDefault();
         if (isMenuNavigationFocused) {
-            let index = items.indexOf(this.lastFocusedMenuItem);
+            const lastFocusedMenuItem = this.lastFocusedMenuItem;
+            let index = lastFocusedMenuItem ? items.indexOf(lastFocusedMenuItem) : -1;
             if (event.key === 'Home') {
                 index = 0;
             }
@@ -643,32 +665,32 @@ export class Menu {
         else if (this.showAbout) {
             overlayLabel = this.i18nLegal;
         }
-        return (h(Host, { key: 'e85a8e0d55269c10e679ef732e4f1e695d4ddd43', class: {
+        return (h(Host, { key: '449ca7a0f94dfaf9394fdeaaa6e56d974fe9aea8', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("nav", { key: '9a24665cb1cc4a1cfbbd47de4f579c11bbcb20b8', "aria-label": this.applicationName, class: {
+            }, slot: "menu" }, h("nav", { key: 'bb57a2c2efc023be57d3d0038c60e62ab8eb6b49', "aria-label": this.applicationName, class: {
                 menu: true,
                 expanded: this.expand,
-            } }, 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: () => {
+            } }, h("div", { key: '0fcf66d57abbaad7223bdd9e5feb4b77bafd9431', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: '89c12c219b3fb73b0de5dc6ae3d0c6d10bb64758', 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: '51f3c2912ebb9b09c0af23079c66be10affd6960', onClick: () => {
                 this.showAppSwitch();
-            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: '36b41ef42aa08f1c01e6c0fb295ef61a1daf61de', role: "menubar", "aria-orientation": "vertical", "aria-label": this.i18nAriaLabelMenu, "aria-description": this.i18nNavigationHint, class: {
+            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: '57d9f0e01c35828de9d4fad3cfdcca2fe517b7be', 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: {
+            }, tabIndex: 0, onKeyDown: (e) => this.handleMenuKeyDown(e), onFocusin: (e) => this.handleMenuFocusIn(e), onFocusout: () => this.resetRovingTabIndex() }, h("div", { key: '59e46b324cbd55621602a2181226bc68d90387e0', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '6fd98aa6dbad269e362d1796e1b96a6fda974cdd', class: "tabs-shadow-container" }, h("div", { key: '652837d937df0b5456569485dff51b0a8f4d4ebb', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '0de02c5ad2c3542e2d151749f03b3fb146bf2af8', class: "tabs-shadow-container" }, h("div", { key: '5e0d14aa34ed1eeb8e73d584736cadeb61bb8470', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), h("div", { key: 'a3ea2437b589f65eb446f665bb1490e1cbfe2ad2', class: {
+            } }), h("div", { key: '7155a5ce55051a5af41d9d10846dea97c709195f', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, 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: {
+            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '517ce6c97a8849e3b5fe6fa94709961d405d4c31', class: "menu-avatar" }, h("slot", { key: '88390e60feda388e9a8111e79b3a6dc580b5c245', name: "ix-menu-avatar" })), h("slot", { key: 'd78f3b4d691725a0a40900f7ea1320ac9559337f', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: '148bb19403ce4054bfc9203daecf9170345cfb44', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), 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: {
+            } }))), h("div", { key: '39d0cf6c66d182b50f2e557a3b6a90da69d4ee79', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: 'cb990a09fb2691d7773acf6da632bce51376a93f', name: "bottom", onSlotchange: () => this.updateBottomSlotState() })), h("div", { key: '864ddfdd85e2262151aea546e9c9c8e754d70d58', class: "bottom-tab-divider" }), h("div", { key: '73ee7628abee073af7f8479e4aba31dc7319ba6d', 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,
@@ -676,14 +698,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: '076482a3461808756d0c028f5e9f8093ac435941', id: "popover-area" })), h("section", { key: 'cc54b807048a80a7284629d763f927d2191c9eec', 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: 'cb0da1257fdf75a09a878c5be78065f0936238f1', id: "popover-area" })), h("section", { key: 'c0baf0bd660819f8039a0ee8dcf4b7866e80f02c', 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: '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))));
+            } }, h("div", { key: '22297492769c540256fdf4b508ec8fec904886bf', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '271f5f0e12d342e41d439113e69d5820e885522b', 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

@@ -79,10 +79,10 @@ export class MenuAbout {
         forceUpdate(this);
     }
     render() {
-        return (h(Host, { key: '5a2f41b28934b02e58b96bbd17104fb6c59a033b', 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: '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({
+            } }, 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

@@ -32,7 +32,7 @@ export class MenuAboutItem extends Mixin(BaseTabMixin) {
         });
     }
     render() {
-        return (h(Host, { key: '2d70a2809dc4eb56b1e3d6183ca837a38ee01b16' }, h("ix-tab-panel", { key: 'd0923d4116998d6a7e231b907eacd5f8081eae36', tabKey: this.tabKey }, h("slot", { key: 'abd6be8e81556b9cb3091dfb55cebfa9ab4d76d0' }))));
+        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

@@ -50,16 +50,16 @@ export class MenuAboutNews extends Mixin(...DefaultMixins) {
     /** @internal */
     expanded = false;
     render() {
-        return (h(Host, { key: '2140402346af0c9c6b35c32cd001d41fac408f66', class: {
+        return (h(Host, { key: 'fff5b2a49fedcf7c44e44d617b757c9e2e0a4d30', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, 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: () => {
+            } }, 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: '73b723ebd03bdf5f5592f8da68bfe481d5e5995c', class: "slot-container" }, h("slot", { key: 'ef993e0dcaf820e2e89eeb017bc15f32026c9127' })), 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: '90c790cac92119aa825bfd075e8c280894eb7141', id: "arrow" })));
+            } }, this.i18nShowMore))) : null, h("div", { key: 'b0bf14f278e6eaf120c800b8ee94fc957b28e9e0', id: "arrow" })));
     }
     static get is() { return "ix-menu-about-news"; }
     static get encapsulation() { return "shadow"; }