@siemens/ix 5.1.1 → 5.2.0

package/dist/collection/components/ix-playground/ix-playground.js

@@ -9,7 +9,7 @@
 import { Host, h } from "@stencil/core";
 export class IxPlayground {
     render() {
-        return h(Host, { key: 'd20bb68c63a8395efe6aabc279e176d3e4cc29ae' });
+        return (h(Host, { key: '4c39acd6341ee860e02ce62dbbd459f52159e401' }, h("ix-chat-input", { key: '5436d28ebbb5a37fb77eda07047d8b06b8acfff2' })));
     }
     static get is() { return "ix-playground"; }
     static get originalStyleUrls() {

package/dist/collection/components/key-value/key-value.js

@@ -34,7 +34,7 @@ export class KeyValue {
      */
     value;
     render() {
-        return (h(Host, { key: '84845bbe27624cc75a0b92fe3f0db65fbb3331e3', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: 'ad59a165d724eb8171dea28b98daa284bdf25fe8', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), h("div", { key: 'ed34046d743256b63cf2cc5f1733f8334da830b7', class: "keyValue__content" }, h("div", { key: '5604099f74006a2a99e8adc3a529d26d8b9ce953', class: "content__label" }, this.label), h("div", { key: '165a362f6d930d331449a96fcf189ace03776e47', class: {
+        return (h(Host, { key: 'd972c5d0a1228644a1e07510a21f11c02c671375', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: 'cfc9180413baddab9d7cd2ecd8140f59d5b59c11', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), h("div", { key: '2b0f8a08ac4a28a8232c96e9883a49c09cc9f645', class: "keyValue__content" }, h("div", { key: '4d8a3fbea38aa5485944e115b0f388b21e830df9', class: "content__label" }, this.label), h("div", { key: '31a26c86afad074b9595e4bf11600907036ed972', class: {
                 content__value: true,
                 'has-customValue': this.value === undefined,
             } }, this.value !== undefined ? (this.value) : (h("slot", { name: "custom-value" }))))));

package/dist/collection/components/key-value-list/key-value-list.js

@@ -16,7 +16,7 @@ export class KeyValueList {
      */
     striped = false;
     render() {
-        return (h(Host, { key: '934ba6bfcd2da7f444855670cffff90936cfb7c5', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: 'd935f982f4aa55443641f29615b70a610456b2c3' })));
+        return (h(Host, { key: 'd1df02c5eb06aa46663312486c259df70dc1d5a1', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '1e6e8856d7a21e9f9689e2823c38f4892f33604e' })));
     }
     static get is() { return "ix-key-value-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -643,32 +643,32 @@ export class Menu {
         else if (this.showAbout) {
             overlayLabel = this.i18nLegal;
         }
-        return (h(Host, { key: 'e85a8e0d55269c10e679ef732e4f1e695d4ddd43', class: {
+        return (h(Host, { key: '5f6815b9abd45243d81f776dd85efd9aab656588', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("nav", { key: '9a24665cb1cc4a1cfbbd47de4f579c11bbcb20b8', "aria-label": this.applicationName, class: {
+            }, slot: "menu" }, h("nav", { key: '7015050bc75040e5b8108a69192a1bdcbff57846', "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: '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: '36b41ef42aa08f1c01e6c0fb295ef61a1daf61de', 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: '3d5d491948f2c912d435a7a46b4e8ff02a41c242', 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: '6fd98aa6dbad269e362d1796e1b96a6fda974cdd', class: "tabs-shadow-container" }, h("div", { key: '652837d937df0b5456569485dff51b0a8f4d4ebb', 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: 'a3ea2437b589f65eb446f665bb1490e1cbfe2ad2', class: {
+            } }), h("div", { key: 'f9bfcef1a3c9da55668a9fcd3d1525eb93027c7a', 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: '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: '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: '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,
@@ -676,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: '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: '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: '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: '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

@@ -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"; }

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 {