@siemens/ix 5.1.1 → 5.2.0

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

@@ -80,13 +80,13 @@ export class MenuAvatar {
     render() {
         const tooltipText = this.tooltipText ?? this.top;
         const ariaHidden = tooltipText === this.top;
-        return (h(Host, { key: '037f15bd4bd44d3f233bebb922fe5e7b4f002fcf', slot: "ix-menu-avatar" }, h("button", { key: 'b25d995e137224af7d5e8a4a4ef75fbcd42139e5', class: "nav-item top-item avatar no-hover", id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: 'defa946c69c1ee6f31a68039a6eed6b2ed71ebd7', image: this.image, initials: this.initials }), h("div", { key: '14d0dba651a996032354d48f518b628c7392e61d', class: "avatar-name" }, h("span", { key: 'ec4ed8e734b95d43382f8f8bd7342e58895c4883', class: "text-default-single" }, this.top), h("span", { key: '691da78327c07d198b78ad62aa33b8dc63440050', class: "text-default-single" }, this.bottom))), !!tooltipText && (h("ix-tooltip", { key: 'a08173ffda2cb1c548e5d2f4b49a61f43f921390', ref: this.tooltipRef, for: `#${this.avatarElementId}`, placement: 'right', "aria-hidden": a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText)), h("ix-dropdown", { key: 'aad18b46b349927551b36988b51226f06789b91f', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
+        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: '1dc6f211194711861c3374efbd7943124ede68de', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (h("ix-menu-avatar-item", { key: 'a39a67cb36600d63414cc8fa5457d0312580574d', 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

@@ -119,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) {
@@ -127,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) {
@@ -324,7 +327,7 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
             ...this.inheritAriaAttributes,
         };
         delete inheritedA11yWithoutRole.role;
-        return (h(Host, { key: 'b13967728dd925cf23d59525997326e3cae1d883', class: {
+        return (h(Host, { key: '16e92aa31c97226ac110248e58ee4e8cf6e686cb', class: {
                 expanded: this.showItems,
             }, onIxMenuCategoryItemSelect: () => this.onNestedItemSelect(), onPointerEnter: () => {
                 this.showMenuItemDropdown();
@@ -333,14 +336,14 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
                     return;
                 }
                 this.hideMenuItemDropdown();
-            } }, h("ix-menu-item", { key: '83115990b35fd94f74c054fca190e85c8ec62010', ...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: 'bbd0030c37c6931a742b9b95aff810b6bf54ba3d', class: "category" }, h("span", { key: '2de8dabb7dcad0b3d6d431961dc78f9fee737f9c', class: "category-text" }, this.label), h("ix-icon", { key: 'dadaef3f921796b4af1bdc2127d5cf85ae8d3d50', 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: '4f05e07d484bcafccacb6e52b16ed1d428fafd6e', 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: '9574783d83639a13003ef13a01aea92ae85b61c7', 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) {
@@ -351,7 +354,7 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
                         e.preventDefault();
                     }
                 }
-            }, onFocusout: () => this.onDropdownFocusOut() }, h("ix-dropdown-item", { key: '6844b7dd6cea9c3290060a0fc3b5d726272f99a5', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, h("ix-typography", { key: 'f06f3b478802a827589415b5025085c6f2825326', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: 'a0f540c48caaf3ea256edfc12c73ec8a95c7e210' }), h("slot", { key: '9dd47bc65bd63d610c936fe5f5c196764704443d' }))));
+            }, 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"; }
@@ -472,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

@@ -196,12 +196,12 @@ export class MenuItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin
             ...inheritedA11yWithoutRole,
         };
         const menuContent = [
-            this.icon && (h("ix-icon", { key: 'ba48d5b4a4fa45012b05c0c48f93b95406fcf668', 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: '7d851e398086593b8a950004fa309aa8e85ab293', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: 'f57c890242be1a0ea5bdd52b807ff17a54e01dae' })),
+            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: '52c4274a785714911f6c55be30aef4e32d83eac6', 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: '20b8f84afa73ab32c01a1afb65b74eab640f1b36', 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"; }

package/dist/collection/components/menu-settings/menu-settings.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 .settings-header {

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

@@ -79,10 +79,10 @@ export class MenuSettings {
         forceUpdate(this);
     }
     render() {
-        return (h(Host, { key: '64e54666ce3cbe2673deb203de0a1ca5cd79a784', slot: 'ix-menu-settings', class: {
+        return (h(Host, { key: '41ccd73336c9313b9a5c4aa47715541e2fb1d9de', slot: 'ix-menu-settings', class: {
                 show: this.show,
                 ['legacy-tabs']: !this.suppressLegacyTabs,
-            } }, h("div", { key: '11b48733718704c04e86ba7c5ffcf62122a8a0f7', class: 'settings-header' }, h("h2", { key: '356d053dcc9d393bb9eb5d369778347f4042d7f6', class: "text-h2" }, this.label), h("ix-icon-button", { key: '29755f5ecc2ff8539985662e4a6d3143984b5618', variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
+            } }, h("div", { key: 'c42d560569ed349e61c7be56b4489ac6c0cb3547', class: 'settings-header' }, h("h2", { key: '795f068e78d63e780e1aea8e989996f4b9806758', class: "text-h2" }, this.label), h("ix-icon-button", { key: '0fc5b175f9ca2b9bc5d9ebf022144c9aef29d9c3', variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
                 name: 'ix-menu-settings',
                 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-settings-item/menu-settings-item.js

@@ -32,7 +32,7 @@ export class MenuSettingsItem extends Mixin(BaseTabMixin) {
         });
     }
     render() {
-        return (h(Host, { key: 'fa1bed6ac28c778764d18f1074f77aa172501927' }, h("ix-tab-panel", { key: '7a2e3342ffb372598f84c7d11310c178dac6c455', tabKey: this.tabKey }, h("slot", { key: '94818c886c66864c067b6ac3a079c6938c87d6f4' }))));
+        return (h(Host, { key: '33f90f8f00fe5643ef89d4a9697a6f734ce94c96' }, h("ix-tab-panel", { key: '2e895bd3ca7c83a27a6c25039e2a0fa2be9b283b', tabKey: this.tabKey }, h("slot", { key: 'f04938cdd7b5d06cb7e20027e4aade76d83a2a07' }))));
     }
     static get is() { return "ix-menu-settings-item"; }
     static get properties() {

package/dist/collection/components/message-bar/message-bar.css

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

package/dist/collection/components/message-bar/message-bar.js

@@ -65,7 +65,7 @@ export class MessageBar {
         }
     }
     render() {
-        return (h(Host, { key: 'e2bbf611295113afe3ed6822a52d8d79e18be29b' }, h("div", { key: '3c05cd3b7309cde0ab647c0c7a24a142028e4880', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '214fc88a38ad4d8c9006faf170cd009afcffecb6', color: this.color, name: this.icon }), h("div", { key: 'b964803205ff9939d5046d71038bf51f17a981bc', class: "message-content" }, h("slot", { key: '5bad561a856f58bc9ba25e6add50d7354d16bb37' })), !this.persistent && (h("ix-icon-button", { key: 'e3d36f9b646257cd338201d3bfb371a23b377772', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (h(Host, { key: '312932d1de69b7048eae7e62330e83bdf8865f89' }, h("div", { key: '54a175ca6cde144af7e6b9f5bca577091eb55937', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '13b07a77ebe1cf2aa6c22ddb4171a2a1e1ea7474', color: this.color, name: this.icon }), h("div", { key: '4456d0637f40b5731aa40819cd7c75b258e8662d', class: "message-content" }, h("slot", { key: '5b8ee0df1bfc1d87a9cbf75c0972165108287be1' })), !this.persistent && (h("ix-icon-button", { key: 'fd5837a3df5df0c5642c5ad6190f83dbfbbe06be', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }

package/dist/collection/components/modal/modal.js

@@ -200,12 +200,12 @@ export class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '28c4d56440766ceccf75d3cafc229c6d640c5e8e', class: {
+        return (h(Host, { key: '1b9c4c03e9fad75ac84ab6854f51c4ff9cbf752a', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.hideBackdrop,
                 'align-center': this.centered,
                 'non-blocking': this.isNonBlocking,
-            } }, h("div", { key: 'f028e5780d37451c282a0eae8615cae3b5996b56', class: "dialog-backdrop" }, h("dialog", { key: '754e476f2e39b3ca4d73d776c1ef430b28a62088', "aria-modal": a11yBoolean(!this.isNonBlocking), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: 'd5f089500fae809e0080a262d5a4d54101fee727', class: "dialog-backdrop" }, h("dialog", { key: '1a124dda3c4961c8cdc0c81a5698f5f932145f22', "aria-modal": a11yBoolean(!this.isNonBlocking), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
                 modal: true,
                 [`modal-size-${this.size}`]: true,
             }, onClose: () => this.dismissModal(), onMouseDown: (event) => this.onMouseDown(event), onMouseUp: (event) => this.onMouseUp(event), onKeyDown: (e) => {
@@ -217,7 +217,7 @@ export class Modal {
             }, onCancel: (e) => {
                 e.preventDefault();
                 void this.dismissModal();
-            } }, h("slot", { key: 'a3aa26a26d244f4795b910764a316e6f8d71e255' })))));
+            } }, h("slot", { key: 'd24dd84c8f50b1542b4c992af079b0cdfbc50e15' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-content/modal-content.css

@@ -33,7 +33,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -42,36 +42,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/modal-content/modal-content.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalContent {
     render() {
-        return (h(Host, { key: '090635e20ba7a130412a560db4329a045f13a8dd' }, h("slot", { key: '71a6820650c0997dc09f309fdf70188b936f7434' })));
+        return (h(Host, { key: 'b9b13e4b94006023e1c4cb72f8750a0d3115fe83' }, h("slot", { key: 'ab56f72939eeb96ebf29990d00894c14be058f9a' })));
     }
     static get is() { return "ix-modal-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-footer/modal-footer.css

@@ -35,7 +35,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -44,36 +44,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/modal-footer/modal-footer.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalFooter {
     render() {
-        return (h(Host, { key: 'fbfacdb34450ce3cfbab374acfb09126c731d57d' }, h("slot", { key: 'f07cfe797970762196e720bb99294bf1b708e688' })));
+        return (h(Host, { key: 'd81ff27bbb7129f0b51464ce6d411deef7ccbb36' }, h("slot", { key: 'df7c48b616671aae6408d1045c0311cd83944492' })));
     }
     static get is() { return "ix-modal-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-header/modal-header.css

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

package/dist/collection/components/modal-header/modal-header.js

@@ -65,7 +65,7 @@ export class ModalHeader {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (h(Host, { key: '9be78d439e0240e95098199371f8c17a5c64cb49' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '7fb5bb78edaf86f7b26a7a6868e761f07870e1e0', class: "modal-title" }, h("ix-typography", { key: 'd350c239268ef025e5d99a84bd58f662518b2d85', format: "h5" }, h("slot", { key: 'f48e9917464a73998b49a799a792cf0eacc43ecc' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (h(Host, { key: '507ee77667cf755dd2c36c02437b8c345bd9dffb' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: 'e525b0e45c254793c69263f6f910255b96b99909', class: "modal-title" }, h("ix-typography", { key: 'bff18e37ae4ff51bdbac61adb7e16e13f8be7612', format: "h5" }, h("slot", { key: '2081bf8ae9df7f5b3d6c74e8cd4c2842202696f4' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     static get is() { return "ix-modal-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-loading/modal-loading.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalLoading {
     render() {
-        return (h(Host, { key: 'dc1f6ceb8a80533b033c8a942ad226a827797f5e' }, h("ix-spinner", { key: 'cba70b4acd7faac7076ccab3505ba3bf77b43294', variant: "primary" }), h("span", { key: '7e391743781992496039e4d71e2344c79bc134df', class: 'loading-text' }, h("slot", { key: '5c08f0076249ca3d16b80e2d107cf2fb975e7e5b' }))));
+        return (h(Host, { key: '80ca2b65f89cf55d1084594e06639391e2320c0a' }, h("ix-spinner", { key: '9aca415c30e8450db9c17458f3486e1f4abcbf5f', variant: "primary" }), h("span", { key: '5579c6694b9b3b7eb4e7188cb67ac99d14658ffb', class: 'loading-text' }, h("slot", { key: 'be9b2fdd084a96f88db388bd7a0b7a98d6088ac6' }))));
     }
     static get is() { return "ix-modal-loading"; }
     static get encapsulation() { return "shadow"; }