@siemens/ix 5.1.0 → 5.2.0

package/dist/collection/components/tab-item/tab-item.js

@@ -12,6 +12,9 @@ import { a11yBoolean } from "../utils/a11y";
 import { DefaultMixins } from "../utils/internal/component";
 import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
 import { BaseTabMixin } from "./tab.mixin";
+/**
+ * @slot default - Tab label.
+ */
 export class TabItem extends Mixin(...DefaultMixins, ComponentIdMixin, BaseTabMixin) {
     constructor() {
         super();
@@ -99,7 +102,7 @@ export class TabItem extends Mixin(...DefaultMixins, ComponentIdMixin, BaseTabMi
         else {
             variant = 'normal';
         }
-        return (h(Host, { key: 'cbb2004638023c1beeb4af192ba6219380c8f0e6', id: this.getHostElementId(), role: "tab", "aria-selected": a11yBoolean(this.selected), tabIndex: this.selected && !this.disabled ? 0 : -1, class: {
+        return (h(Host, { key: 'a1981fe23e2fd8e0655e22bd33474635a51cbef9', id: this.getHostElementId(), role: "tab", "aria-selected": a11yBoolean(this.selected), tabIndex: this.selected && !this.disabled ? 0 : -1, class: {
                 selected: this.selected,
                 disabled: this.disabled,
                 'small-tab': this.small,
@@ -119,17 +122,17 @@ export class TabItem extends Mixin(...DefaultMixins, ComponentIdMixin, BaseTabMi
                         nativeEvent: event,
                     });
                 }
-            } }, variant === 'rounded' && (h("div", { key: '1f98b9019ba76864d03c491435a60e913f566584', class: {
+            } }, variant === 'rounded' && (h("div", { key: '254faf12d2bacb122eed12f87ba2788ce23b0cf0', class: {
                 circle: true,
-            } }, this.icon && h("ix-icon", { key: '6849def7bdb3dba05f4a1b84f9067777bede78c5', name: this.icon, size: "24" }), h("slot", { key: '41b3464f6fc45ad5b853223c5a8819a00dcca841' }))), this.icon && variant !== 'rounded' && (h("ix-icon", { key: 'b9af7159f9306c2b841066a726008afdee58e472', name: this.icon, size: "16", class: 'tab-icon' })), variant === 'normal' && (h("div", { key: '87d1993bfa9bf76dff49f15b9a1e5e4f7dfe9a56', class: {
+            } }, this.icon && h("ix-icon", { key: 'b93c3250f3f250a62624dd5916f89dcb2827308c', name: this.icon, size: "24" }), h("slot", { key: '027121762879363b90880ed379303bf76d134f67' }))), this.icon && variant !== 'rounded' && (h("ix-icon", { key: '5e1c1665a517e08e61ae434ecbed6e8e46b5c1e5', name: this.icon, size: "16", class: 'tab-icon' })), variant === 'normal' && (h("div", { key: '32d9e8603dd0fafa17b6bac61a5c7a8e4065aecd', class: {
                 text: !!this.label,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, this.label, h("slot", { key: '328e393a77d1c24b487ef874e07bf7772cc24820' }))), variant === 'rounded' && this.counter !== undefined && (h("div", { key: '2758fc1447296c9c2cc04ce92905e5ba4fca9a1b', class: {
+            } }, this.label, h("slot", { key: 'ecda11782eeae556e74f44613b2ac2b697ef6be0' }))), variant === 'rounded' && this.counter !== undefined && (h("div", { key: '01e49113bf0d7be5d08ea97f844e88cda5bb73ca', class: {
                 counter: true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, this.counter)), this.counter && variant !== 'rounded' && (h("ix-pill", { key: '6a749ea40148e1d5ca319b7cfa52176e1303d1bd', variant: "primary", outline: true, class: 'tab-counter' }, this.counter)), this.closable && variant !== 'rounded' && (h("ix-icon-button", { key: '35fdcd1095f49cb083e10ce3aeb33e54458968d9', "aria-label": this.ariaLabelCloseButton, class: 'close-tab', size: "12", variant: "subtle-tertiary", icon: iconClose, onClick: (event) => {
+            } }, this.counter)), this.counter && variant !== 'rounded' && (h("ix-pill", { key: 'ab9e497662d8574fd7ed8a57686cc7bd4c91c7e9', variant: "primary", outline: true, class: 'tab-counter' }, this.counter)), this.closable && variant !== 'rounded' && (h("ix-icon-button", { key: '2a81e5282c8dfe6ccb02845264ca23db660b42b1', "aria-label": this.ariaLabelCloseButton, class: 'close-tab', size: "12", variant: "subtle-tertiary", icon: iconClose, onClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
                 this.tabClose.emit({

package/dist/collection/components/tab-panel/tab-panel.css

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

@@ -26,7 +26,7 @@ export class TabPanel extends Mixin(...DefaultMixins, ComponentIdMixin) {
         this.hostElement.hidden = true;
     }
     render() {
-        return (h(Host, { key: 'e2288e5376cca74e2ef8323f4d11928fbad0be76', role: "tabpanel", id: this.getHostElementId() }, h("slot", { key: '67c9634adbe0a40525e6b6ca7eb2ec774ad49b37' })));
+        return (h(Host, { key: '45f94d501555a0b3049353e3ad6ad44797de3892', role: "tabpanel", id: this.getHostElementId() }, h("slot", { key: 'eb086cb5407b0d2f30d4a5310ff5668c0dadd4cc' })));
     }
     static get is() { return "ix-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-set/tab-set.css

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

@@ -74,7 +74,7 @@ export class TabSet {
         });
     }
     render() {
-        return (h(Host, { key: '90be74d89acb43edb6eec575f07a3877ec90ac45', onTabChange: () => this.checkPanelsVisibility() }, h("slot", { key: '047c26c15f8b43312a25a35dddadd364a5b9f839' })));
+        return (h(Host, { key: '09c24128f2981d8276e3d63e6067f7b3da7f99a9', onTabChange: () => this.checkPanelsVisibility() }, h("slot", { key: 'ac2212c76128277abca943387b93a6d436cebe94' })));
     }
     static get is() { return "ix-tab-set"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.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 .tabs-container {

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

@@ -14,6 +14,9 @@ import { hasKeyboardMode } from "../utils/internal/mixins/setup.mixin";
 import { DefaultMixins } from "../utils/internal/component";
 import { InheritAriaAttributesMixin } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
 import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
+/**
+ * @slot default - Tab items.
+ */
 export class Tabs extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
         super();
@@ -227,19 +230,19 @@ export class Tabs extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
         }
     }
     render() {
-        return (h(Host, { key: '2e8b5f9f4d3658bd219e6ca5d5a829d16f0c1977', onTabClick: (event) => this.onTabClick(event), class: {
+        return (h(Host, { key: '59be7687531f1e2c2196232dbe2ae5a874481b3a', onTabClick: (event) => this.onTabClick(event), class: {
                 small: this.small,
-            } }, h("div", { key: '8e45e2d46485c6e3147b2237f6109d63cd02758c', ref: this.tabsContainerRef, class: {
+            } }, h("div", { key: '55697ae33bb24e020417996ef311fe1863e87047', ref: this.tabsContainerRef, class: {
                 'tabs-container': true,
                 top: this.placement === 'top',
                 bottom: this.placement === 'bottom',
-            } }, h("div", { key: '69b6177b0c8c7c20d039a434866f93135e168155', class: {
+            } }, h("div", { key: '0e1296872121e4951b16df684877246fa21f6e0f', class: {
                 'overflow-shadow-container': true,
                 'overflow-shadow': this.isTabsOverflow,
-            } }, h("div", { key: '97d6ccbe5e623cbedf6be21de05005599b9a2bcd', role: "tablist", ...this.inheritAriaAttributes, ref: this.tabsRef, class: {
+            } }, h("div", { key: 'afd9c8c5173ac2030476892b0dd79bcccef46f57', 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: '2ceb8d8dc886c9784e244172750192297f077360' }))), this.isTabsOverflow && this.layout !== 'stretched' && (h("ix-dropdown-button", { key: 'a7041a35c2dcac4f86eefbfbae5ac36ba9c45436', ariaLabel: this.ariaLabelMoreTabs, icon: iconMoreMenu, class: {
+            }, tabIndex: this.isTabsOverflow ? 0 : -1, onKeyDown: (event) => this.onTabsNavigate(event) }, h("slot", { key: '73ab7f836156f9eb8e32ef0c0ce1f153e32e2936' }))), this.isTabsOverflow && this.layout !== 'stretched' && (h("ix-dropdown-button", { key: 'cae99e1f6e20e6004d853aff98af0032e53730f3', 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

@@ -7,6 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot header - Content displayed in the tile header.
+ * @slot subheader - Content displayed below the tile header.
+ * @slot default - Main tile content.
+ * @slot footer - Content displayed in the tile footer.
+ */
 export class Tile {
     hostElement;
     /**
@@ -22,17 +28,17 @@ export class Tile {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: '8f679fa7052569f04f32e97794296dcb29cf7674', 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: 'd5d8cd568dfab0d8d4792cb598a062bd55b03845', class: {
+            } }, h("div", { key: '7a263f6826bb8100707c7886e588b5307cc96aba', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: 'cc289070975b9035d0a845e18fcdf73e877ca8eb', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '75ab8313010bc8716ed397aade9f3b21ae836d29', class: "tile-subheader" }, h("slot", { key: 'f4097db4fd6421f0482b00c66ab1c0b60097d935', name: "subheader" })), h("div", { key: '994f70d4c88f781e2cb5e10edda3cca65bc39e16', class: "tile-content" }, h("slot", { key: '71de26e86af5c6e180c555111079e106e433c4bb' })), h("div", { key: '28811550fcc1e2bb2f9fc1f5570e0473e96506d3', 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: '2723caa0308e311ad05a0b89806358c6fd60bf61', 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 {
@@ -516,6 +516,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
 :host(.disabled) input,
 :host(.disabled) textarea {
   pointer-events: none;
+  color: var(--theme-input--color--disabled);
 }
 
 :host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input {
@@ -568,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() {
@@ -577,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/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: '26fc55b40e07bde5fff6a21502925a88aa1eaf14' }, h("ix-date-time-card", { key: 'e6d72d2e2762ea0a67e69fcae8d89a49fd6bc6ec', embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: !this.dateTimePickerAppearance, hideHeader: this.hideHeader }, h("div", { key: 'de11595ccaeef7d0372d6af2c3e72ded18ed03d9', class: "header", slot: "header" }, h("ix-typography", { key: 'b001917ac3090679081c49852b2610adc381403f', format: "body" }, this.i18nHeader)), h("div", { key: '9bf75682fe81bf9a5c8bc668a533083d41776690', 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: '7d7a125d05231b0dc38d168308210ea6cd0aa5c9', class: "flex" }, h("div", { key: 'b3a8870552cbb4b665f63413a97bd5c4a82b1335', class: "column-separator" }), h("div", { key: '33e8cc862740c6348b7056acf33d62636136b4b4', class: "columns" }, h("div", { key: 'eb8a24da30e71e94d1a10528a2bc2e4e04529680', class: "column-header", title: "AM/PM" }), h("div", { key: '54ab57b53a21734900b856f6a98f59f8ed7ca789', role: "listbox", "aria-label": "AM/PM", class: "element-list", tabindex: -1 }, h("button", { key: '7dfd20d6f16bc1f5c2ed9c2b72589289b34b7207', 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: 'd6fee9560179caa7050fdb1add2d8b558e87d890', 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: '4544617138a6372ac583b62113f5be2a98550f8c', 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: '21b4ad3eb7e3ad466d1f4e8f1e7975df27bddc6e', class: "confirm-button", disabled: this.isConfirmDisabled(), onClick: () => {
                 this.timeSelect.emit(this._time?.toFormat(this.format));
             } }, this.i18nConfirmTime)))));
     }