@siemens/ix 5.1.1 → 5.2.0

package/dist/collection/components/empty-state/empty-state.css

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

package/dist/collection/components/empty-state/empty-state.js

@@ -39,7 +39,7 @@ export class EmptyState {
      */
     actionClick;
     render() {
-        return (h(Host, { key: '788853c0170edd6124ee95f6f37023c3de53f7b4', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: 'fa915d69e9ff30ad13f5edbb70136d16ea0766f4', class: "emptyState__icon" }, h("ix-icon", { key: 'f9b951b527e138dc58c4bf1b2abd46e3ebf570fa', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text", "aria-label": this.ariaLabelEmptyStateIcon }))), h("div", { key: '4d531a294a9bcd8281c37ac497a576ab86e6192c', class: "emptyState__content" }, h("div", { key: '1cc40c9096599b31580cea0edf449a146c8ff768', class: "content__label" }, h("ix-typography", { key: 'd708fc4fb0306b5ec54efb44f003c4792e4eb75f', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: 'a08cf6802626709bba74186fd0e5f0056da20981', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: 'ff17b01d8fffe6ba98d5a5a0a91985972b8368e8', class: "content__action" }, h("ix-button", { key: 'c78f1ddb54915618c6e2783e025dd608e6c2152a', onClick: () => this.actionClick.emit() }, this.action))))));
+        return (h(Host, { key: 'c7c62331f07da27fc2f4f43aa2a50e14d617e0f6', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: '44b56e63a08d33c3cec8a790dc7483062c562f7f', class: "emptyState__icon" }, h("ix-icon", { key: 'd43f77965ea9e50b886d48f7e533fedf6e1173b4', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text", "aria-label": this.ariaLabelEmptyStateIcon }))), h("div", { key: '2c1da308b8cdc40e570391d641a28f40a3c547f4', class: "emptyState__content" }, h("div", { key: 'c0a463113791be8473f1a113066c77ca6c6cf58d', class: "content__label" }, h("ix-typography", { key: '2841339368d8de62795ba2e4bf30b65b525621de', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: '9d455295f3ec660089ecf3c964c0cbda23b614e5', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: '24d72b3c2d9869093c31bd1a0e4479dac3b00bee', class: "content__action" }, h("ix-button", { key: '43b6bef5639dd157742fc072cd7057bb56fe9f5b', onClick: () => this.actionClick.emit() }, this.action))))));
     }
     static get is() { return "ix-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/event-list/event-list.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,37 +40,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;
 }
 

package/dist/collection/components/event-list/event-list.js

@@ -90,9 +90,12 @@ export class EventList {
     triggerFadeOut() {
         return new Promise((resolve) => {
             if (!this.animated) {
-                resolve();
+                return resolve();
+            }
+            const listElement = this.hostElement.shadowRoot?.querySelector('div[role="list"]');
+            if (!listElement) {
+                return resolve();
             }
-            const listElement = this.hostElement.shadowRoot.querySelector('ul');
             animate(listElement, {
                 opacity: [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }],
                 duration: EventList.fadeOutDuration,
@@ -132,11 +135,11 @@ export class EventList {
         });
     }
     render() {
-        return (h(Host, { key: '658281cbf0ee3fad909a2385437d1911c3c6f75f', class: {
+        return (h(Host, { key: 'a8a45d70a13452c6beb7c214ce91e853a38b8552', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, h("div", { key: '01328d11ed8a045241f4382d1ce3ec1a162190f2', role: "list" }, h("slot", { key: '8d7a0a467ca57d359cbd05b0f5f3f4f5e11a4e79' }))));
+            } }, h("div", { key: 'dacba6d4f41062ef6a7cd6a1792d792c9279655e', role: "list" }, h("slot", { key: '6193e925c292452afb5d8889120fefd21ebe9351' }))));
     }
     static get is() { return "ix-event-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/event-list-item/event-list-item.css

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

package/dist/collection/components/event-list-item/event-list-item.js

@@ -50,17 +50,17 @@ export class EventListItem {
         let color = this.itemColor?.startsWith('--theme')
             ? `var(${this.itemColor})`
             : `var(--theme-${this.itemColor})`;
-        return (h(Host, { key: 'de697815028a7bb6199cba49916a2454536785ee', class: {
+        return (h(Host, { key: 'a9bcbd4a1f0a240324e1e58dbc6489c1b60d9ffd', class: {
                 disabled: this.disabled,
                 [`event-list-item-${this.variant}`]: true,
-            } }, h("div", { key: '30b7be1c6c9823fb6def0ca88f2ec9debe578b34', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
+            } }, h("div", { key: '40d3bcf6be18cd99e0a3f19355d08122eaca8a31', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
                 'event-list-item': true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("div", { key: 'c6991076039f3fb8fb0656a63131fa63ea5bb7c5', class: `indicator ${!this.itemColor ? 'indicator-empty' : ''}`, style: {
+            } }, h("div", { key: '7645085fa71963863fffe8c4a7f85288b563ee99', class: `indicator ${!this.itemColor ? 'indicator-empty' : ''}`, style: {
                 'background-color': this.itemColor ? color : 'inherit',
                 opacity: `${this.disabled ? 0.4 : 1}`,
-            } }), h("div", { key: '2d7489f2c00d4f43b96b42bd2cd194faf82c9657', class: "event-list-item-container" }, h("div", { key: '3a818bd2553d0bf5c1e0245d440edb232c592944', class: "event-content" }, h("slot", { key: '7eb036f7acb004910d54457ff6ed2f56708448cc' })), this.chevron && (h("ix-icon", { key: 'af6703cbc3fab72ad5158cf72beab6a4d5c0c6d1', name: iconChevronRight, size: "16", class: "chevron-icon", "aria-hidden": "true" }))))));
+            } }), h("div", { key: '22c9414286ea6f5ac0dbf76af542e62cc41ec1fa', class: "event-list-item-container" }, h("div", { key: 'ccd04a3054f1285c9bdcdc8a440b2ce8e626b606', class: "event-content" }, h("slot", { key: '19d3223501c51d391cecbd14c79e660b2880d1d4' })), this.chevron && (h("ix-icon", { key: '577a5993cc4b428e76c1a0a23ef7848ce8df0fe5', name: iconChevronRight, size: "16", class: "chevron-icon", "aria-hidden": "true" }))))));
     }
     static get is() { return "ix-event-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/expanding-search/expanding-search.css

@@ -278,7 +278,7 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -287,37 +287,37 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
     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-container {

package/dist/collection/components/expanding-search/expanding-search.js

@@ -93,21 +93,21 @@ export class ExpandingSearch {
         this.valueChange.emit(this.value);
     }
     render() {
-        return (h(Host, { key: 'f954d610f8eee9f8864262567d501f7f53596b14', class: {
+        return (h(Host, { key: '4d6452d558ed37acdf210f14a3cdd2de27a7034e', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, h("ix-icon-button", { key: '760a79a6faced78eb06603357b83e460991926fa', size: this.expanded ? '16' : '24', icon: this.icon ?? iconSearch, variant: this.expanded ? 'tertiary' : this.variant, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, h("ix-icon-button", { key: 'aac4778c162d196b24e0d824a9f935b48bd77878', size: this.expanded ? '16' : '24', icon: this.icon ?? iconSearch, variant: this.expanded ? 'tertiary' : this.variant, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
             }, "aria-label": this.ariaLabelSearchIconButton ??
-                (this.expanded ? 'Close search' : 'Open search') }), h("div", { key: '2f29b9e24e4875fa907226a97fe2c20aedbf5b73', class: {
+                (this.expanded ? 'Close search' : 'Open search') }), h("div", { key: 'b48c231d07c5a6e1022497c8fc2549aa9d43f914', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, h("input", { key: 'ff934d36786c9f6be7b235773309c32ba6ed1842', class: {
+            }, "data-testid": "input-wrapper" }, h("input", { key: 'aaa9f94916684ede2655ed81c4577b302b5d65db', class: {
                 'ix-form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,

package/dist/collection/components/field-label/field-label.js

@@ -137,10 +137,10 @@ export class FormFieldLabel {
         }
     }
     render() {
-        return (h(Host, { key: '0fdcf56a50a448dd0d58e70d4389105d79ace1d3', onClick: () => this.focusOnClick(), class: {
+        return (h(Host, { key: 'a228926a776118e196b07787d6a32c2241f60404', onClick: () => this.focusOnClick(), class: {
                 'text-overflow-wrap': this.textOverflow === 'wrap',
                 'text-overflow-no-wrap': this.textOverflow === 'no-wrap',
-            } }, h("label", { key: '985b6494c3ecc3cbe3071a352dd375a785366ea7', htmlFor: this.htmlFor, ...this.a11yAttributes, ref: this.labelRef }, h("ix-typography", { key: '1fae47aef80983c02272b73b5d2de4969aa87daf', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: '706a5c9687ac5fea48d9efda67b660ed78b999df' }), this.required && h("span", { key: 'fa1da16ab40a270019534c26b17e8771f478eb4e' }, "*")))));
+            } }, h("label", { key: '9e30a5944eed06c87108bb95dc18fd8965a7830e', htmlFor: this.htmlFor, ...this.a11yAttributes, ref: this.labelRef }, h("ix-typography", { key: 'efe6d7b8de49a4ed5ba305d0d3f125fe6b1d3658', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: '189e87c98f4c77a11a9bfb3a2b5d397f2993d241' }), this.required && h("span", { key: 'd0c29240d16c2e98b1d21b0ae21518c886be5643' }, "*")))));
     }
     static get is() { return "ix-field-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-wrapper/field-wrapper.js

@@ -155,9 +155,9 @@ export class FieldWrapper extends Mixin(...DefaultMixins, ComponentIdMixin) {
                 'aria-live': 'polite',
             };
         }
-        return (h(Host, { key: '25255aed5f9b7fb77fdeb61473bf2b75a262ffba', ...additionalAriaAttributes }, this.label && (h("div", { key: 'bb885771ecfcf509a62bbe6f7ba1a7d518f17c78', class: "field-top" }, h("ix-field-label", { key: '916a96ca521dd4e9dd7f55e9f3bd19cc947ba123', required: this.required, controlRef: this.controlRef, isInvalid: this.isInvalid, ariaHidden: true }, this.label))), h("div", { key: 'ce2d746aea87f49611ef413f49fbb52c59ab468a', class: {
+        return (h(Host, { key: 'fd7a223ad75c9c2073031d63f60783fb56fd7b09', ...additionalAriaAttributes }, this.label && (h("div", { key: '3c435387e8297bb8b2e97436df054012ab2f801d', class: "field-top" }, h("ix-field-label", { key: 'a5526dca7376ca80a982d955b38c32b053018428', required: this.required, controlRef: this.controlRef, isInvalid: this.isInvalid, ariaHidden: true }, this.label))), h("div", { key: 'c76fcf98ad31b6c89b5e6aae4c2e44a27f7ae7df', class: {
                 'slot-wrapper': true,
-            }, ref: this.slotRef }, h("slot", { key: '2bb54f35cc1ff930918dc211e2018875ce105d7b' })), h("div", { key: 'c427f40269dd19c40c413d0794cbf0096a7f8cd1', class: 'field-bottom' }, !this.showTextAsTooltip && h(HelperText, { key: '76100d6cd0e6c22eeca8de06b7aa7ae59ab9ea33', ...textOptions }), h("div", { key: 'b9d5688b85687792c491d8cecd9411dbb5bddb0e', class: "bottom-right" }, h("slot", { key: '95102f11d6b5c82d67be1c7c104eadf56bcb8112', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (h("ix-tooltip", { key: 'c484b0edcd735b2d9155819ad9eb8d98c45e2633', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, h(HelperText, { key: '7d0ea7c1cd80af012492984d7ad2b5399ee50c4d', ...textOptions })))));
+            }, ref: this.slotRef }, h("slot", { key: '77c50384c3098490c1cb55b130645a244fbe884a' })), h("div", { key: '36ce0a8d7a15a2eeee189caf304983a80fbc2bc2', class: 'field-bottom' }, !this.showTextAsTooltip && h(HelperText, { key: '7f0d5cf73307cdd236a11e381695f22c58bdf50c', ...textOptions }), h("div", { key: 'c1cd0ff7edbd167e03517810fb4b3b5aa423f22e', class: "bottom-right" }, h("slot", { key: '3acb46dffa748d54a7cc05e44f993927cac412f5', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (h("ix-tooltip", { key: '0bb08975464a35c0a22f8e0f276d11c650ea6eb3', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, h(HelperText, { key: 'f1658860c1245ebb708d79f0c9c9717b960718d0', ...textOptions })))));
     }
     static get is() { return "ix-field-wrapper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/filter-chip/filter-chip.css

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

package/dist/collection/components/filter-chip/filter-chip.js

@@ -42,11 +42,11 @@ export class FilterChip {
         this.closeClick.emit();
     }
     render() {
-        return (h(Host, { key: '7b1d7b5eaa69878f972a32ae012dd3e9a96c4dca', class: {
+        return (h(Host, { key: 'f78c6c14ea22791ba39081cf287e86fed7172ca4', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 'hide-close-button': this.hideCloseButton,
-            }, title: this.hostElement.textContent }, h("div", { key: 'c678ad613f23f633a38d002f8d9aa74e67473384', class: "slot-container" }, h("slot", { key: '4a91b222a51991df3baaaa328b7e991ad80732ae' })), !this.disabled && !this.readonly && !this.hideCloseButton ? (h("ix-icon-button", { variant: "tertiary", oval: true, icon: iconCloseSmall, size: "16", disabled: this.disabled, onClick: (event) => {
+            }, title: this.hostElement.textContent }, h("div", { key: '260717a791623fde5d0a597fc3933cba4303f80d', class: "slot-container" }, h("slot", { key: '033d4c695b8ee9022ec4ba061fc2200b723484f4' })), !this.disabled && !this.readonly && !this.hideCloseButton ? (h("ix-icon-button", { variant: "tertiary", oval: true, icon: iconCloseSmall, size: "16", disabled: this.disabled, onClick: (event) => {
                 this.onCloseClick(event);
             }, onKeyDown: (event) => {
                 switch (event.key) {

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

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

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

@@ -134,7 +134,7 @@ export class FlipTile {
         }, 2 * Animation.defaultTime);
     }
     render() {
-        return (h(Host, { key: '99644a121b896cbe3db0f9bcf87a2f1292dce9c8', class: {
+        return (h(Host, { key: '7bc177cf90b779cb1bd62d6350ff54717d538d9d', class: {
                 [`flip-tile-variant-${this.variant}`]: true,
             }, style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
@@ -143,10 +143,10 @@ export class FlipTile {
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, h("div", { key: 'e5b18eb890b7b07fe65ebe7d7bcee732cb3ca438', class: "flip-tile-container" }, h("div", { key: 'a53fbd9be6391f546c60e55305f46206c2955013', class: "flip-tile-header" }, h("div", { key: '30b5aa980a15c0f11a143bf6c4acafb9f4bc22b5', class: "header-slot-container text-l-title" }, h("slot", { key: '3262a92c1c681c2c2565f4d508b1c91a6440f0ac', name: "header" })), h("ix-icon-button", { key: '3b2840daaef5df2d8ba5c1aae57d9746fec04711', icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), h("div", { key: '2776781bbf7f81ec3eec13458784224015104375', class: "content-container" }, h("slot", { key: 'd094b595d41f6b95b8c823d27b1bf711f366a5d7' })), h("div", { key: '2b3b4d2f3a95e42489210091e97a8455624cedf1', class: {
+            } }, h("div", { key: 'eb5ef0d6d6eaa317bcf80883dd11ce25294fa421', class: "flip-tile-container" }, h("div", { key: '8e861ac9d55afff755a2bdc71f10ce190a2a8e9b', class: "flip-tile-header" }, h("div", { key: '02976c0cd61c9b4957e5d2e6ea4e9a9b21dc53cb', class: "header-slot-container text-l-title" }, h("slot", { key: '3ae486e56833ccabf4d03e5c2b5ca6c6823bc221', name: "header" })), h("ix-icon-button", { key: '61b1a2afbfed9fca1cd1ef2276b4d74554abb2af', icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), h("div", { key: 'f2b4b94a81ad12a02b182dcb95d03a67b9d89aa5', class: "content-container" }, h("slot", { key: 'd9892f4613eb61ab72c73e69dd766002c3d1c173' })), h("div", { key: '8c0b61ce539b83a98df94c9b7ee656c09ef38818', class: {
                 footer: true,
                 'show-footer': this.hasFooterSlot,
-            } }, h("slot", { key: '45f0d2cca37604489c565e0144fa648f157e5bb4', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
+            } }, h("slot", { key: '6af34d8dddef92ac78d5a8772035ca380da4525a', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
     }
     static get is() { return "ix-flip-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/flip-tile-content/flip-tile-content.js

@@ -18,7 +18,7 @@ export class FlipTileContent {
      */
     contentVisible = false;
     render() {
-        return h(Host, { key: '2db68ac6c4947fe4f53b7764f0dcc3b6e990f668' }, this.contentVisible ? h("slot", null) : null);
+        return h(Host, { key: 'e0f760de5693681a0ee6e0eef654233d9b8b3fad' }, this.contentVisible ? h("slot", null) : null);
     }
     static get is() { return "ix-flip-tile-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/group/group-context-menu.js

@@ -40,7 +40,7 @@ export class GroupContextMenu {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (h(Host, { key: '7a75df2f66b25774f2161d9b8a8253f1c77d74b3' }, h("ix-icon-button", { key: 'c50905c961529535450ad54cf3fb28be0145ea98', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), h("slot", { key: '3b19aca1490c3e15a3630f53ff2081054acd0313', onSlotchange: () => this.onSlotChange() })));
+        return (h(Host, { key: '8d5cde7a5aeadb2bb73d56e23481b592e408c211' }, h("ix-icon-button", { key: '91701da1319aed49a3ced6debf9e136d65bb4f9f', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), h("slot", { key: '12b2df94d37c16da0e9db898b67f470f383dec8e', onSlotchange: () => this.onSlotChange() })));
     }
     static get is() { return "ix-group-context-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/group/group.js

@@ -166,26 +166,26 @@ export class Group {
         }
     }
     render() {
-        return (h(Host, { key: 'f56b013952f4978b036193d55e216f7e1f271031' }, h("div", { key: '9dfee69b32d0b68d140623e7019640e2590ec2d4', class: {
+        return (h(Host, { key: '1793ac3e26d91c376e82c74d31b30d32f1e9cd2a' }, h("div", { key: 'ad7d3167ee6823f4835ee4b5002af0bcec586a07', class: {
                 'group-header': true,
                 expand: this.expanded,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: 'e1d2bf627cd0ed4d43a9b33831cd29be78a97c6d', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '4f7dff297456b0a0ff4ca93db16fe365d7760dfd', class: {
+            }, tabindex: "0" }, h("div", { key: '5a56cffe47d4e3a9b9a88eaa402f00fe5f9788a3', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'e7cfb2b5d583e2c057624c4a1568e85dc5e4badc', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: '5b10de668b6a4f7cee2937d4da6225a1237b72cb', class: "btn-expand-header" }, h("ix-icon", { key: 'da2beae25ed7720d46b7f168ee2cb1acabf3b215', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: '01597689aabccdfb0910941815980ed2cb7ded18', class: "btn-expand-header" }, h("ix-icon", { key: 'f7317874a7830a08f4eaf4f899c2bb9c6b9f1b17', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: 'c5d422508f12b3e00f5fde6892d0ba8596c04ba1', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '46bdd2e2b88d5805a3ce26143766b64bc7cec7e4', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: '50375ddf2cb1a42530ce096e08403c6c6e1ed9f5' }, h("slot", { key: 'cc78c4a6b9ad383e17bd62090df99c3c0c56e377', name: "dropdown" })))), h("div", { key: 'c4eb114ff535fdc9a356d7344feed441019f1c8b', class: {
+            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: 'ac24f6cd5d8d37185ea2f863c22c8b3a6ca7250b', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '5790b072f91964ac542ae058e9764a46ee9462d6', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: '3451bc23ed72ae8ccced159708176593bb13cfc5' }, h("slot", { key: '3d2e98dbaa2016707dd904d352df9a1cfc62faa3', name: "dropdown" })))), h("div", { key: 'a65bc2d61c25bd2758efac9470362f9d6c461f44', class: {
                 'group-content': true,
-            } }, h("div", { key: '80f250870c587563c3447417debf7b8fe8d61c1c', style: {
+            } }, h("div", { key: '2aacc03d7a9c9e7f922f02a76b951fba83127d57', style: {
                 display: this.expanded ? 'contents' : 'none',
-            } }, h("slot", { key: 'a3c6af2dcd96a8bc9bbcade86a8e031b3e3c7fb0', onSlotchange: () => {
+            } }, h("slot", { key: '2d1efdfc125553264095f9fbedbedf18f23bd61b', onSlotchange: () => {
                 const slot = this.hostElement.shadowRoot?.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), h("ix-group-item", { key: 'a92adbfd1177080cd034cb91b87d11f2cf6ef924', class: {
+            } }), h("ix-group-item", { key: '87d5d74df393611c8681d5d3aec6393b3d439323', class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, h("slot", { key: '55f1fb62d4ee9afb2808c3330b607e1e0fed5ec4', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            }, groupFooter: true, suppressSelection: true }, h("slot", { key: 'f3f126f527efb02af78b884439c35eee1aa35afc', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     static get is() { return "ix-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/group-item/group-item.css

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

package/dist/collection/components/helper-text/helper-text.js

@@ -67,7 +67,7 @@ export class HelperText {
         this.validationResults = checkFieldClasses(forElement);
     }
     render() {
-        return (h(Host, { key: 'a38073cf4f6da8c8e91927cc14e194243c9f8acf' }, h(HelperTextUtil, { key: 'aad82c0c2704ac0b491c3f53e0faa52033706318', helperText: this.helperText,
+        return (h(Host, { key: 'ba5a5611cc239def89bc29b6986347bac9d7b54c' }, h(HelperTextUtil, { key: 'f5bc32ae34d57c8fbf8e01a634114482789ddde9', helperText: this.helperText,
             invalidText: this.invalidText,
             validText: this.validText,
             infoText: this.infoText,