@siemens/ix 5.1.1 → 5.2.1

package/dist/collection/components/tabs/tabs.js

@@ -22,6 +22,9 @@ export class Tabs extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
         super();
     }
     hostElement;
+    getIgnoredAriaAttributes() {
+        return ['role'];
+    }
     /**
      * Set tab items to small size
      */
@@ -96,12 +99,14 @@ export class Tabs extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
         this.onComponentResize();
     }
     componentWillLoad() {
+        super.componentWillLoad();
         this.onComponentChildrenChange();
         if (this.activeTabKey) {
             this.setTabActive(this.activeTabKey);
         }
     }
     disconnectedCallback() {
+        super.disconnectedCallback();
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
         }
@@ -230,19 +235,19 @@ export class Tabs extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
         }
     }
     render() {
-        return (h(Host, { key: 'e9e5ca8f1b7452ae44ea8f53f21153198b6b8111', onTabClick: (event) => this.onTabClick(event), class: {
+        return (h(Host, { key: '5554f09b7834c47e4c1890100ed750b15d6858d8', onTabClick: (event) => this.onTabClick(event), class: {
                 small: this.small,
-            } }, h("div", { key: 'd9d5d3e0c58df201b0a5c2dd0bcc674c38569cd7', ref: this.tabsContainerRef, class: {
+            } }, h("div", { key: 'b076db8284d73f8659cdf2932594133c655d695d', ref: this.tabsContainerRef, class: {
                 'tabs-container': true,
                 top: this.placement === 'top',
                 bottom: this.placement === 'bottom',
-            } }, h("div", { key: '23433718ad5b18cda24a8d007617043ee7864e2f', class: {
+            } }, h("div", { key: '73fa1a3e4ad9b30b6a8a47f8a74a7b44267ae328', class: {
                 'overflow-shadow-container': true,
                 'overflow-shadow': this.isTabsOverflow,
-            } }, h("div", { key: '745b6a2145d1d5e51f32870a704af18204cf5809', role: "tablist", ...this.inheritAriaAttributes, ref: this.tabsRef, class: {
+            } }, h("div", { key: '2defca0131e7c714e619f70265d5775d8aebf553', role: "tablist", ...this.inheritAriaAttributes, ref: this.tabsRef, class: {
                 tabs: true,
                 'tabs-stretched': this.layout === 'stretched',
-            }, tabIndex: this.isTabsOverflow ? 0 : -1, onKeyDown: (event) => this.onTabsNavigate(event) }, h("slot", { key: '3518fe1d37ca84c24b75a49dc047473daa1a5e28' }))), this.isTabsOverflow && this.layout !== 'stretched' && (h("ix-dropdown-button", { key: '626d85cf76445fa4921268de9b489fa762af86ce', ariaLabel: this.ariaLabelMoreTabs, icon: iconMoreMenu, class: {
+            }, tabIndex: this.isTabsOverflow ? 0 : -1, onKeyDown: (event) => this.onTabsNavigate(event) }, h("slot", { key: '3684ddc5023e0553ab0175150692256fc3109006' }))), this.isTabsOverflow && this.layout !== 'stretched' && (h("ix-dropdown-button", { key: '6827cbb9086793efd0f496f8ba81f81eba5266e9', ariaLabel: this.ariaLabelMoreTabs, icon: iconMoreMenu, class: {
                 'tabs-context-menu': true,
             }, variant: "subtle-tertiary" }, this.overflowMenuItems.map((item) => (h("ix-dropdown-item", { key: item.tabKey, checked: item.tabKey === this.activeTabKey, icon: item.icon, label: item.label, disabled: item.disabled, onClick: () => (this.activeTabKey = item.tabKey) }))))))));
     }

package/dist/collection/components/tile/tile.css

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

package/dist/collection/components/tile/tile.js

@@ -28,17 +28,17 @@ export class Tile {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: 'fe4f063c20f7e7d92d074dfecd5f7da29e5b466f', class: {
+        return (h(Host, { key: 'd4cc3c4197ae2796c1802801dabbf8839458e284', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: '10a6e4e55560a8c8927fbd6bfd477b4b2bd6ac63', class: {
+            } }, h("div", { key: '7a263f6826bb8100707c7886e588b5307cc96aba', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: '2757565c81f4b79cc58adf4063f884957c102317', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '051387aa0b12e9075e8711979e2706d3f1fbcdb0', class: "tile-subheader" }, h("slot", { key: 'bdb3cd31f463b89940f377ff078ad78a154d0b7d', name: "subheader" })), h("div", { key: '4e856e13a8ced7fc25fc286c65eecc5a2de2b826', class: "tile-content" }, h("slot", { key: '91b44be36ded3293d1c0fb11d3e383aff88aa01d' })), h("div", { key: '890de1414349994751cf9dc2081d3542d49fef1b', class: {
+            } }, h("slot", { key: '28a19a02e4bba01f86848af461863e430f48f944', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '097d77e86c3e758b58fa50406ba8d721e018f4c8', class: "tile-subheader" }, h("slot", { key: '7b39bd079aa40a107e305efb86c18d2b851d751a', name: "subheader" })), h("div", { key: '870c7f00e7c712d3bce3da8d82428c289097ab47', class: "tile-content" }, h("slot", { key: '4da7e10f781146c866ac0c927365f10c1004bebd' })), h("div", { key: 'af35feec030823452bbe5dcc489728238f0ac821', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: '0f45773fa5a79c27c563629b8645f3440d88acb7', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: '951a53fa07f2fb3a0f57e540e9f6397c0e5b45bf', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     static get is() { return "ix-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/time-input/time-input.css

@@ -410,7 +410,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -419,37 +419,37 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
     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 .input-wrapper {
@@ -569,7 +569,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -578,37 +578,37 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
     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 input {

package/dist/collection/components/time-input/time-input.js

@@ -422,17 +422,17 @@ export class TimeInput extends Mixin(...DefaultMixins, InputPickerMixin) {
     }
     render() {
         const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorTimeUnparsable);
-        return (h(Host, { key: 'ad852f1bdf16618d065d1fbab17420c11b3e5915', class: {
+        return (h(Host, { key: 'efe1cbc9df92596227d70edfb368a4a7695794fa', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, onFocusout: () => {
                 this.closeDropdown();
-            } }, h("ix-field-wrapper", { key: 'cf0d1f5e6fef2a1391ca1fb9b748eb7c75af3d18', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: '51ba0327ea62439e121ffbc1f6aa8a6a69564481', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            } }, h("ix-field-wrapper", { key: '08967e192b1e3b4c30d822373d8090c18b7db2e1', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: '336fec1ee4b2f222be22de2e4ad72e9a7659b8ff', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
             }, focusTrapOptions: {
                 targetElement: this.timePickerRef,
                 trapFocusInShadowDom: true,
-            } }, h("ix-time-picker", { key: '9d994dfdd9b7d58ba305dcff031397a3486a5d64', ref: this.timePickerRef, format: this.format, time: this.time ?? '', minTime: this.minTime, maxTime: this.maxTime, hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
+            } }, h("ix-time-picker", { key: '219accc28fa595836b21d809755c163bd42d10db', ref: this.timePickerRef, format: this.format, time: this.time ?? '', minTime: this.minTime, maxTime: this.maxTime, hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
                 this.onInput(event.detail);
                 if (this.initialValue !== event.detail) {
                     this.ixChange.emit(event.detail);

package/dist/collection/components/time-picker/test/expect-defined.js

@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { expect } from "vitest";
+export function expectDefined(value) {
+    expect(value).toBeDefined();
+    if (value === null || value === undefined) {
+        throw new Error('Expected value to be defined');
+    }
+    return value;
+}

package/dist/collection/components/time-picker/time-picker.css

@@ -630,7 +630,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -639,37 +639,37 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
     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 .standaloneAppearance {

package/dist/collection/components/time-picker/time-picker.js

@@ -846,7 +846,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
     }
     render() {
         const { bounds } = this.getUnitSelectionContext();
-        return (h(Host, { key: 'd82a36e9f2570227537fa27a4613728b14eb7728' }, h("ix-date-time-card", { key: '3176395745458739b9fb9de1b4b1d4f39b1f6d2f', embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: !this.dateTimePickerAppearance, hideHeader: this.hideHeader }, h("div", { key: '9defe01ecd678617fa2ecf70c891e6e257a92d65', class: "header", slot: "header" }, h("ix-typography", { key: '28e6bc8abc536182d3b63d231913316df54058f0', format: "body" }, this.i18nHeader)), h("div", { key: '3aa7571fd61469deadb3ccecb871456926b4f0ca', class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => {
+        return (h(Host, { key: '843508f1f761b09aa9f804d8508f073fc4e456c2' }, h("ix-date-time-card", { key: '5bd462965737df20d1bfaafb6fe909f9072e172f', embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: !this.dateTimePickerAppearance, hideHeader: this.hideHeader }, h("div", { key: '0a4753c97c668bbea0bf08fbc6ede9be9c7fec00', class: "header", slot: "header" }, h("ix-typography", { key: 'f16526b69e956e416f7cb71192ce59f8cacf757c', format: "body" }, this.i18nHeader)), h("div", { key: '18c828b4355fd21ad48bf0fccc485437eb99bcec', class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => {
             return (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden }, hidden: descriptor.hidden }, h("div", { class: "column-header", title: descriptor.header }, descriptor.header), h("div", { role: "listbox", "aria-label": descriptor.header, "data-element-list-id": descriptor.unit, class: "element-list", tabindex: -1 }, descriptor.numberArray.map((number) => {
                 const cellTabIndex = this.getUnitCellTabIndex(descriptor.unit, number);
                 const disabled = !this.canSelectUnitValue(descriptor.unit, number, bounds, this.buildCandidateBaseBeforeUnit(descriptor.unit));
@@ -862,16 +862,16 @@ export class TimePicker extends Mixin(...DefaultMixins) {
                     'column-separator': true,
                     hidden: descriptor.hidden,
                 } }, this.getColumnSeparator(index)))));
-        }), this.timeRef && (h("div", { key: 'f9fe74b09d9de0a95f2472d49faf5d675f8732ba', class: "flex" }, h("div", { key: '61323b760556dd2de6b55dc92ed4ce1f48d0e184', class: "column-separator" }), h("div", { key: 'e4c888487a559ef191dfcf76014251e217a6f00e', class: "columns" }, h("div", { key: '0ef38a3e63f0bff2f5ef6774eea41e07d68fd1f4', class: "column-header", title: "AM/PM" }), h("div", { key: '47cd9041e31b25c6d08ccb0eed005a6b9963eaec', role: "listbox", "aria-label": "AM/PM", class: "element-list", tabindex: -1 }, h("button", { key: 'd414632d382a84aa0db2c6f27c18f5b123c0d46a', role: "option", "aria-selected": this.timeRef === 'AM' ? 'true' : 'false', "data-am-pm-id": "AM", class: {
+        }), this.timeRef && (h("div", { key: '7ad04e4572dd11cc77509e5782364052811089d0', class: "flex" }, h("div", { key: 'd6b423fd2cd5c3b238504f951374d0b9b6435909', class: "column-separator" }), h("div", { key: 'f74cab2bcf22852af1b2f7a705ef8726bb779040', class: "columns" }, h("div", { key: '9e8f74e738d9dd95df814329a0e09b49633d2343', class: "column-header", title: "AM/PM" }), h("div", { key: '57cd6b520883953a66cddf6ab9ba486e0b32512a', role: "listbox", "aria-label": "AM/PM", class: "element-list", tabindex: -1 }, h("button", { key: '9486d0c81c91a235e1c9204afcbc794db7f063fe', role: "option", "aria-selected": this.timeRef === 'AM' ? 'true' : 'false', "data-am-pm-id": "AM", class: {
                 selected: this.timeRef === 'AM',
                 'element-container': true,
-            }, onClick: () => this.changeTimeReference('AM'), tabindex: "0", "aria-label": "AM" }, "AM"), h("button", { key: '1f288055298d5ec21b30137b82c9c729705dd989', role: "option", "aria-selected": this.timeRef === 'PM' ? 'true' : 'false', "data-am-pm-id": "PM", class: {
+            }, onClick: () => this.changeTimeReference('AM'), tabindex: "0", "aria-label": "AM" }, "AM"), h("button", { key: '90602f7ec60c50c8d4edec394de2d205f506ed6d', role: "option", "aria-selected": this.timeRef === 'PM' ? 'true' : 'false', "data-am-pm-id": "PM", class: {
                 selected: this.timeRef === 'PM',
                 'element-container': true,
-            }, onClick: () => this.changeTimeReference('PM'), tabindex: "0", "aria-label": "PM" }, "PM")))))), h("div", { key: 'afc8804b5164b9fb2606c03fc6fc518ef6b703ed', class: {
+            }, onClick: () => this.changeTimeReference('PM'), tabindex: "0", "aria-label": "PM" }, "PM")))))), h("div", { key: '73907cc1c7cdf44a249ea2557d14e1a61f4f66ea', class: {
                 footer: true,
                 'footer--compact': this.timePickerDescriptors.length <= 2,
-            }, slot: "footer" }, h("ix-button", { key: '743e3b4f53dd35e9a4bfd4b11dce8a524c66f581', class: "confirm-button", disabled: this.isConfirmDisabled(), onClick: () => {
+            }, slot: "footer" }, h("ix-button", { key: 'b2c32715f3a41323314f0da0f0b89c5e98f81dd4', class: "confirm-button", disabled: this.isConfirmDisabled(), onClick: () => {
                 this.timeSelect.emit(this._time?.toFormat(this.format));
             } }, this.i18nConfirmTime)))));
     }

package/dist/collection/components/toast/toast-container.css

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

package/dist/collection/components/toast/toast-container.js

@@ -69,10 +69,10 @@ export class ToastContainer {
         };
     }
     render() {
-        return (h(Host, { key: 'fbbfa8148d7362f98b4d3cdecd069e3e4b64fbcd', class: {
+        return (h(Host, { key: '2b7b81cc4a3cbef019ea2e3d80289932f851d1ad', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, h("slot", { key: '3365aa9ab2c4a46455c0a092e2bbb24ded60783e' })));
+            } }, h("slot", { key: '8782fca12768a3a18aa03b480e06fa01a8f35968' })));
     }
     static get is() { return "ix-toast-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.css

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

package/dist/collection/components/toast/toast.js

@@ -108,11 +108,11 @@ export class Toast {
             animationPlayState: this.touched || this.paused ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (h(Host, { key: 'f786bd46ed3cf18e869aa03c1af675f69bdcf75d', role: "alert", "aria-live": "polite", "aria-atomic": "true", class: "animate__animated animate__fadeIn" }, h("div", { key: '512ed44cc950fc819045c62478ba0ea42f1b58ae', class: "toast-body", onPointerLeave: () => {
+        return (h(Host, { key: '23320a0cad0f80260f080d3ccb893b97b0de3430', role: "alert", "aria-live": "polite", "aria-atomic": "true", class: "animate__animated animate__fadeIn" }, h("div", { key: 'e11be14a88b8b220d42810dc902c67f3b4bc6048', class: "toast-body", onPointerLeave: () => {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, (this.type || this.icon) && !this.hideIcon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: '195dd2bf1980e05fb91b119d06ab50397fbbdc9e', class: "toast-content" }, this.toastTitle ? (h("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, h("div", { key: 'c4b1b4f0e2325706656302ce0cdb0de56255d8e6', class: "toast-message" }, h("slot", { key: '778be19bb15122ed4cfc2bf9e362036aec8d366e' })), h("div", { key: 'e370c4935d412c442f804e65c4528fb6981e6c83', class: "toast-action" }, h("slot", { key: '6f6f6a7a2598bb42970d7a0abbea3e882d9d32b7', name: "action" }))), h("div", { key: '5021c6330fbe47a620a5b405e4e191a0d10ff047', class: "toast-close" }, h("ix-icon-button", { key: 'f8b2e9ca0f4cfadc1686f243ac3487e9ff029b81', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), !this.preventAutoClose && (h("div", { key: 'f85b6f0863ccb35af38895e12a7c53bfcb2d6571', class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, (this.type || this.icon) && !this.hideIcon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: '303876065f69252b89566c73aebb23bf28ebf221', class: "toast-content" }, this.toastTitle ? (h("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, h("div", { key: 'bf8e2ae5a9b24c7161f1823ce9542172cd092006', class: "toast-message" }, h("slot", { key: 'f60b4dae5967a6f192d432012273ab3e602f9cf3' })), h("div", { key: '97d552f3014e0f428d8beb4d1a31e6ba3b9085cd', class: "toast-action" }, h("slot", { key: 'a107a97f28acc21d33024ab7a2f33ccb571648c2', name: "action" }))), h("div", { key: 'b074eab437358b57a65aa2c6d96f3860cb04536e', class: "toast-close" }, h("ix-icon-button", { key: '8ca71069c1dbf7c25186357ebf508e7f69bf3c92', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), !this.preventAutoClose && (h("div", { key: '4dc63a7a7ed80ac9758db43acc0200ad71a4fae0', class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {

package/dist/collection/components/toggle/toggle.css

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

package/dist/collection/components/toggle/toggle.js

@@ -148,7 +148,7 @@ export class Toggle extends Mixin(...DefaultMixins, InheritAriaAttributesMixin)
         const ariaChecked = this.indeterminate
             ? 'mixed'
             : a11yBoolean(this.checked);
-        return (h(Host, { key: '41d91ada6ad7f8f0000ff5c636274df99b5bcec3', ...this.inheritAriaAttributes, role: "switch", tabindex: this.disabled ? -1 : 0, "aria-label": ariaLabel, "aria-checked": ariaChecked, "aria-disabled": a11yBoolean(this.disabled), "aria-required": a11yBoolean(this.required), class: {
+        return (h(Host, { key: 'dcc719533d7ebad6ebfc175db7fcce81ca432f6c', ...this.inheritAriaAttributes, role: "switch", tabindex: this.disabled ? -1 : 0, "aria-label": ariaLabel, "aria-checked": ariaChecked, "aria-disabled": a11yBoolean(this.disabled), "aria-required": a11yBoolean(this.required), class: {
                 disabled: this.disabled,
             }, onBlur: () => this.ixBlur.emit(), onFocus: () => (this.touched = true), onKeyDown: (e) => {
                 if (this.disabled)
@@ -161,11 +161,11 @@ export class Toggle extends Mixin(...DefaultMixins, InheritAriaAttributesMixin)
                 if (!this.disabled) {
                     this.onCheckedChange(!this.checked);
                 }
-            } }, h("div", { key: 'd712114dae9e0316346e6fb20b3ae28678308788', class: "wrapper" }, h("div", { key: '433f2624d9b2b619961a893c5ca4c13f628fa3a6', class: {
+            } }, h("div", { key: '86cac25e18858e76e535df0c0a66e94dc5ca4c30', class: "wrapper" }, h("div", { key: '63eb080dd311b49c211e57abc8b1b5830a8fb81c', class: {
                 switch: true,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            }, "aria-hidden": "true" }, h("div", { key: '02272dc7dad538380fe15e57835ac470e1327c4e', class: "slider" })), !this.hideText && (h("ix-typography", { key: '1917d18ba54dbcacb7995dafa45082d3ce7bc36d', class: "label", "aria-hidden": "true" }, toggleText)))));
+            }, "aria-hidden": "true" }, h("div", { key: 'a2f46d4412c3f51d93ffe20d9e8e7681c50f2fa8', class: "slider" })), !this.hideText && (h("ix-typography", { key: '8ed5848b4641a0152b937e8e3fdb9ce4d45ff1d3', class: "label", "aria-hidden": "true" }, toggleText)))));
     }
     static get is() { return "ix-toggle"; }
     static get encapsulation() { return "shadow"; }