@siemens/ix 5.1.1 → 5.2.1

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

@@ -34,13 +34,13 @@ export class ContentHeader {
      */
     backButtonClick;
     render() {
-        return (h(Host, { key: '7aff9412995ceff09f9e01cbe258702fd102ea75' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: 'ee525ee229cdb39d8095189634bdd98c97a71a55', class: "titleGroup" }, h("div", { key: '15262bbc2565c60fbccf52284c926e3d71147337', class: "headerTitleRow" }, h("ix-typography", { key: 'e3c3a23df25528b96f22c4144a8a3e1d5cfea603', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
+        return (h(Host, { key: 'f61310f6ea0a3469000fee7fb7b7186baa2cf36e' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: 'e0676de94ec7d4ab15fb9fd482da5667f10cf4e4', class: "titleGroup" }, h("div", { key: '6d0a6a9ff21a04430fa33f8a41c4e333bf3a4249', class: "headerTitleRow" }, h("ix-typography", { key: 'b66eb7cd9d491e3182765ad9747ecd626f45b23f', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
                 secondary: this.variant === 'secondary',
                 titleOverflow: true,
-            } }, this.headerTitle), h("div", { key: '0faeabfcaa745ad3ae69ea1643767d5ba07f3ac9', class: "headerSlot" }, h("slot", { key: '569da58b7ae972574bb52b4a201d8a8f9e89bfc4', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: '38ce3d985ce6ac069ee1a47dcf999b9f7c1ec6af', format: 'h6', "text-color": 'soft', class: {
+            } }, this.headerTitle), h("div", { key: '04c444efdf2cffaeb1ea0120c9e745626aef6f8c', class: "headerSlot" }, h("slot", { key: '775eee1677756fd3a8f77f558b8110c93491bcd1', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: 'abea3fa4aedd7ba74da32e656f34d472012dca14', format: 'h6', "text-color": 'soft', class: {
                 subtitle: this.variant === 'secondary',
                 titleOverflow: true,
-            }, title: this.headerSubtitle }, this.headerSubtitle))), h("div", { key: 'b792938f171aa505945a8da026303ebef1ba9837', class: "buttons" }, h("slot", { key: '68eb9f74a2120f9b62742b34735792cdf67530aa' }))));
+            }, title: this.headerSubtitle }, this.headerSubtitle))), h("div", { key: '798601c8081c2798088ebaeb3bce279947543e52', class: "buttons" }, h("slot", { key: '330aa42677e2b0991519c0f3c9007c5f7eaa8483' }))));
     }
     static get is() { return "ix-content-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/css-grid/css-grid-item.js

@@ -19,7 +19,7 @@ export class CssGridItem {
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: '0bc3ae81663d5b1993c95f06958bcd77e24180a7', style: style }, h("slot", { key: '62c78222da5bfa19d981cb30394f6e1d093b322b' })));
+        return (h(Host, { key: '4b9b2bded16014b694a78359c5591ad26098af76', style: style }, h("slot", { key: '1311fdee7e255ae712cea4ca5b94a4c27ab4b3cf' })));
     }
     static get is() { return "ix-css-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/css-grid/css-grid.js

@@ -80,7 +80,7 @@ export class CssGrid {
         if (this.currentTemplate && this.currentTemplate.length !== 0) {
             style['grid-template-areas'] = templateBuilder(this.currentTemplate);
         }
-        return (h(Host, { key: 'f528bf6c3a8915c642c42fb56aa230a95234770c', style: style }, h("slot", { key: 'd9520b70898f2c51bf5c3527d709cb109b403cf5' })));
+        return (h(Host, { key: '08b015b37602ee0ec82a2c8fb45f2ebc37a5495a', style: style }, h("slot", { key: 'ed86863c712c46fb4de4cc4e9121958b372e8ade' })));
     }
     static get is() { return "ix-css-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class CustomField {
         this.isWarning = isWarning;
     }
     render() {
-        return (h(Host, { key: '4e412bdb503dd54f56dcf6039c98ef6b1d90fc99' }, h("ix-field-wrapper", { key: '948a67bba4457bc92b497ec2a9f8354a46d88928', label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: '32074e9825ad42e3ca9d991775e9093db97b5ef7' }))));
+        return (h(Host, { key: '3865a646510b0a6c599fdeb3adb29d58f311d8d4' }, h("ix-field-wrapper", { key: 'bfaa5e15d46ce3328c072c1888ea3ca2a8f82521', label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: '6fc00234329533b6876319d7a851f417a0e9a4d3' }))));
     }
     static get is() { return "ix-custom-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-dropdown/date-dropdown.css

@@ -74,6 +74,14 @@
 * LICENSE file in the root directory of this source tree.
 */
 /*
+* SPDX-FileCopyrightText: 2026 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/*
 * SPDX-FileCopyrightText: 2024 Siemens AG
 *
 * SPDX-License-Identifier: MIT
@@ -98,7 +106,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -107,37 +115,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 .pull-right {
@@ -153,7 +161,7 @@
   overflow: auto;
   padding: 0.5rem;
 }
-:host .quick-selection ::-webkit-scrollbar-button {
+:host .quick-selection *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -162,37 +170,37 @@
     scrollbar-width: thin;
   }
 }
-:host .quick-selection {
+:host .quick-selection * {
   /* width */
 }
-:host .quick-selection ::-webkit-scrollbar {
+:host .quick-selection *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host .quick-selection {
+:host .quick-selection * {
   /* Track */
 }
-:host .quick-selection ::-webkit-scrollbar-track {
+:host .quick-selection *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host .quick-selection ::-webkit-scrollbar-track:hover {
+:host .quick-selection *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host .quick-selection {
+:host .quick-selection * {
   /* Handle */
 }
-:host .quick-selection ::-webkit-scrollbar-thumb {
+:host .quick-selection *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host .quick-selection {
+:host .quick-selection * {
   /* Handle on hover */
 }
-:host .quick-selection ::-webkit-scrollbar-thumb:hover {
+:host .quick-selection *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host .quick-selection ::-webkit-scrollbar-corner {
+:host .quick-selection *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .quick-selection .btn {

package/dist/collection/components/date-dropdown/date-dropdown.js

@@ -231,13 +231,13 @@ export class DateDropdown extends Mixin(...DefaultMixins) {
     }
     render() {
         const ariaLabel = this.inheritAriaAttributes['aria-label'] || this.getButtonLabel();
-        return (h(Host, { key: '22f023b7eebe6aeb1d1fb43e6fd9fca761fbb654', onFocusout: (event) => {
+        return (h(Host, { key: '5df489d50a9e459fcf350fcaf20dad2f3c6d09d8', onFocusout: (event) => {
                 const relatedTarget = event.relatedTarget;
                 if (!relatedTarget) {
                     return;
                 }
                 this.closeDropdown();
-            }, role: "presentation" }, h("ix-button", { key: '79990d758b39d7f8438d7333f1c148f94665f157', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ...this.inheritAriaAttributes, "aria-haspopup": "true", "aria-expanded": a11yBoolean(this.show), "aria-controls": "date-dropdown", "aria-label": ariaLabel, [TRAP_FOCUS_EXCLUDE_ATTRIBUTE]: true }, this.getButtonLabel()), h("ix-dropdown", { key: '04df9639b41dc3084e0a035e39441a64fb5398aa', focusTrapOptions: {
+            }, role: "presentation" }, h("ix-button", { key: '9de1225750e827a48370d77b643accbf717b5c90', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, class: { active: this.show }, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ...this.inheritAriaAttributes, "aria-haspopup": "true", "aria-expanded": a11yBoolean(this.show), "aria-controls": "date-dropdown", "aria-label": ariaLabel, [TRAP_FOCUS_EXCLUDE_ATTRIBUTE]: true }, this.getButtonLabel()), h("ix-dropdown", { key: '5adea2a62d0f2936c7f414d07e4b215fa46013c7', focusTrapOptions: {
                 excludeElements: true,
                 trapFocusInShadowDom: true,
             }, focusHost: this.hostElement, id: "date-dropdown", "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, onShowChanged: async ({ detail: show }) => {
@@ -251,18 +251,18 @@ export class DateDropdown extends Mixin(...DefaultMixins) {
                         datePicker?.focus();
                     });
                 }
-            } }, h("div", { key: '23f80678526a96c98c84130b820932ac449bfdb6', class: "container" }, this.dateRangeOptions?.length > 1 && (h("div", { key: 'e0ca957c06b3bf7ab910687958d9744e1bccba5e', class: {
+            } }, h("div", { key: '529789401a81e427362891c8067dceef2d792ccd', class: "container" }, this.dateRangeOptions?.length > 1 && (h("div", { key: '37357e44ca576b728da92a56b168441660298ad3', class: {
                 'quick-selection': true,
                 'border-right': this.selectedDateRangeId === 'custom',
             } }, this.dateRangeOptions.map((dateRangeOption) => (h(BaseButton, { disabled: false, iconOnly: false, iconOval: false, selected: false, loading: false, type: "button", variant: "subtle-tertiary", onClick: () => this.onRangeListSelect(dateRangeOption.id), ariaAttributes: {
                 'aria-label': `${dateRangeOption.label}: ${dateRangeOption.from} to ${dateRangeOption.to}`,
-            } }, dateRangeOption.label))))), h("div", { key: '47498278df33744c548709315f7e4f88b946c1cb', class: "picker-wrapper" }, h("ix-date-picker", { key: '7d2f12fcc2cd5018edfec3aa387f5ede6704bd04', ref: this.datePickerRef, embedded: true, locale: this.locale, onDateChange: (e) => {
+            } }, dateRangeOption.label))))), h("div", { key: '78ba6a786dd6c0f4eab6158c44bca11d8ee3b8a5', class: "picker-wrapper" }, h("ix-date-picker", { key: '17bd8255602531babe2f71e2db5ffac8bb2b7b2f', ref: this.datePickerRef, embedded: true, locale: this.locale, onDateChange: (e) => {
                 e.stopPropagation();
                 this.currentRangeValue = {
                     ...e.detail,
                     id: 'custom',
                 };
-            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || this.currentRangeValue?.from, to: this.to || this.currentRangeValue?.to, minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: 'b1b223d1116fdd455887e985aa8906c24de5b990', class: "pull-right" }, h("ix-button", { key: 'f788cee56c6aefaa3de91cabad89c01499d1b036', onClick: () => {
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || this.currentRangeValue?.from, to: this.to || this.currentRangeValue?.to, minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: 'bedbd4ed054f58030718054a601b0ba9215ded11', class: "pull-right" }, h("ix-button", { key: '05cb78d1a4e407390c00abad740a4516b6fd10fb', onClick: () => {
                 if (this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                     this.closeDropdown();

package/dist/collection/components/date-input/date-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/date-input/date-input.js

@@ -350,7 +350,7 @@ export class DateInput extends Mixin(...DefaultMixins, InputPickerMixin) {
     }
     render() {
         const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorDateUnparsable);
-        return (h(Host, { key: 'cd25d18346e36dce13464172417c605bb4883275', class: {
+        return (h(Host, { key: 'fa39c581495ea09be06ca5d1f200dc6bba252eef', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, onFocusout: (e) => {
@@ -360,7 +360,7 @@ export class DateInput extends Mixin(...DefaultMixins, InputPickerMixin) {
                     return;
                 }
                 this.closeDropdown();
-            } }, h("ix-field-wrapper", { key: 'e594e88d3f5629dfe9701eea33fffb714a402252', 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: '06f1a86337a9f3b03c7d06011b27375ff619a72f', "data-testid": "date-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: '09d8df1e50ca8b1a8cb1c17f5cdd81fde1ffc469', 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: '5f16427b97d679c1b01701895e3f188b971cf8b2', "data-testid": "date-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.datepickerRef,
@@ -368,7 +368,7 @@ export class DateInput extends Mixin(...DefaultMixins, InputPickerMixin) {
             }, callbackFocusElement: async () => {
                 this.datepickerRef.current?.focusActiveDay();
                 return true;
-            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, h("ix-date-picker", { key: 'dc2237c371745ce1734af52ae8497f8f5276d9c7', ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: this.from ?? '', minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
+            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, h("ix-date-picker", { key: '9c6be87560ca85c7229c7d7cc013cc92350284d6', ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: this.from ?? '', minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
                 const { from } = event.detail;
                 this.onInput(from);
                 if (this.initialValue !== from) {

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

@@ -81,6 +81,14 @@
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
+/*
+* SPDX-FileCopyrightText: 2026 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 :host {
   display: block;
   position: relative;
@@ -91,7 +99,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -100,37 +108,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 .header {

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

@@ -187,8 +187,8 @@ export class DatePicker extends Mixin(...DefaultMixins) {
     tempMonth = 0;
     yearDropdownButtonRef = makeRef();
     yearMonthSelectionDropdownRef = makeRef();
-    dayNames;
-    monthNames;
+    dayNames = [];
+    monthNames = [];
     focusedDay = 1;
     isDayFocus = false;
     monthChangedFromFocus = false;
@@ -657,7 +657,11 @@ export class DatePicker extends Mixin(...DefaultMixins) {
         });
     }
     async intersect(entries) {
-        const container = await this.yearDropdownButtonRef.current.getDropdownReference();
+        const yearDropdownButton = this.yearDropdownButtonRef.current;
+        if (!yearDropdownButton) {
+            return;
+        }
+        const container = await yearDropdownButton.getDropdownReference();
         entries.forEach((entry) => {
             const target = entry.target;
             if (entry.isIntersecting) {
@@ -681,21 +685,21 @@ export class DatePicker extends Mixin(...DefaultMixins) {
     intersectStart = new IntersectionObserver((entries) => this.intersect(entries), { threshold: 0.5 });
     intersectEnd = new IntersectionObserver((entries) => this.intersect(entries), { threshold: 0.5 });
     render() {
-        return (h(Host, { key: '3a758d5378cce782272d54ed210f854e1be9bee4', onKeyDown: (event) => this.onKeyDown(event), onFocusin: () => {
+        return (h(Host, { key: 'd3069d1895021eafcdbf31b1e3efb3fc9c9bd45c', onKeyDown: (event) => this.onKeyDown(event), onFocusin: () => {
                 if (hasKeyboardMode()) {
                     this.changeFocusedDay();
                 }
-            } }, h("ix-date-time-card", { key: 'fcdc8c2d76a536bd25328bae925cfbff49dd5e0f', corners: this.corners, embedded: this.embedded }, h("div", { key: '93a206ed565efbce5401e10a8f23aa6ac3a61f69', class: "header", slot: "header" }, h("ix-icon-button", { key: 'f05099c413c1c0c9537aec0bcd8aaddbdd6cad51', onClick: () => this.changeCalendarView(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: 'f1b99b9ac1efc8048caab32a1d47873e04075f57', class: "selector" }, h("ix-dropdown-button", { key: '260c713c94550e0e0b61abf9920d20f61881342c', class: "month-selector", focusCheckedItem: true, "aria-label": this.ariaLabelMonthSelection, variant: "tertiary", label: null, onShowChanged: (event) => {
+            } }, h("ix-date-time-card", { key: '565f344168f3cd6d5ec6cf52c995986069b8b283', corners: this.corners, embedded: this.embedded }, h("div", { key: '0736fee99626beb804c8cc12029fe54e7d548e2b', class: "header", slot: "header" }, h("ix-icon-button", { key: 'f7a6a2cf70bcc64d3c302b7030b6d3d6576e0f2a', onClick: () => this.changeCalendarView(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: '74181a640e8fc12a42b5e781a7c34e181cf1eb8a', class: "selector" }, h("ix-dropdown-button", { key: '4cf5f39ae313b65da3e2ac5a5fa52ccb82122e6d', class: "month-selector", focusCheckedItem: true, "aria-label": this.ariaLabelMonthSelection, variant: "tertiary", label: null, onShowChanged: (event) => {
                 // Need to stop event propagation to trigger initial focus handling of the calendar days
                 event.stopPropagation();
-            } }, h("ix-typography", { key: '793f53297fe36421acfddfa5a863eacdfe6d9cfb', bold: true, class: "capitalize", slot: "button-label" }, this.monthNames[this.selectedMonth]), this.renderMonths()), h("ix-dropdown-button", { key: '110d9b7237d5a99e30fd740f2d5113a80b5662e8', class: "year-selector", focusCheckedItem: true, "aria-label": this.ariaLabelYearSelection, ref: this.yearDropdownButtonRef, variant: "tertiary", label: null, onShowChanged: (event) => {
+            } }, h("ix-typography", { key: 'b2faf7ed035bbb6fdd6340b670293c8e0ca1621b', bold: true, class: "capitalize", slot: "button-label" }, this.monthNames[this.selectedMonth]), this.renderMonths()), h("ix-dropdown-button", { key: '4dbdfb735fb5f515968e631575c92e1163a25e1b', class: "year-selector", focusCheckedItem: true, "aria-label": this.ariaLabelYearSelection, ref: this.yearDropdownButtonRef, variant: "tertiary", label: null, onShowChanged: (event) => {
                 // Need to stop event propagation to trigger initial focus handling of the calendar days
                 event.stopPropagation();
                 if (event.detail) {
                     requestAnimationFrameNoNgZone(() => {
                         this.intersectStart.observe(this.hostElement.shadowRoot.querySelector('[data-sentinel="top"]'));
                         this.intersectEnd.observe(this.hostElement.shadowRoot.querySelector('[data-sentinel="bottom"]'));
-                        const selectedYearItem = this.yearDropdownButtonRef.current.querySelector('ix-dropdown-item[checked]');
+                        const selectedYearItem = this.yearDropdownButtonRef.current?.querySelector('ix-dropdown-item[checked]');
                         if (!selectedYearItem) {
                             return;
                         }
@@ -710,10 +714,10 @@ export class DatePicker extends Mixin(...DefaultMixins) {
                     this.intersectStart.disconnect();
                     this.intersectEnd.disconnect();
                 }
-            } }, h("div", { key: '1ef79a11c880ceda187e4275af1921cb230f1716', class: "infinite-scrolling-spacer" }, h("div", { key: '2d9fc10794f8efe1a8aef837008fb3a0ebe2ca29', class: "sentinel", "data-sentinel": "top" })), h("ix-typography", { key: '152c681624d375241d55c641b8013a2ce8b9874d', bold: true, class: "capitalize", slot: "button-label" }, this.selectedYear), this.renderYears(), h("div", { key: 'a8770b507077d201df514f35a46d71f3771289df', class: "infinite-scrolling-spacer" }, h("div", { key: 'e14c2e5bec16bab3d08268ae6bc61303e26355da', class: "sentinel", "data-sentinel": "bottom" })))), h("ix-icon-button", { key: '16b7fd43d4d514b628a4ac90f54c0dcd54380fd3', onClick: () => this.changeCalendarView(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: '869b001d286f35e721e31afa4546865f3ed02d1c', role: "grid", class: {
+            } }, h("div", { key: '6bff1627c2ae988c2cec43c0fab19301afe0d4b2', class: "infinite-scrolling-spacer" }, h("div", { key: '65649d41658fea52c472ae4a7be9b2049324012a', class: "sentinel", "data-sentinel": "top" })), h("ix-typography", { key: '845eaf9a759948f682bea5ac32cbff69a7911db9', bold: true, class: "capitalize", slot: "button-label" }, this.selectedYear), this.renderYears(), h("div", { key: '4b8886f3383301fce14c4c82a36a322a16bab48d', class: "infinite-scrolling-spacer" }, h("div", { key: '2ed935b2f11cb117b6ed10f4458ecc4d7b3466aa', class: "sentinel", "data-sentinel": "bottom" })))), h("ix-icon-button", { key: '6744bb35c08d528c1455c737823443f786739b87', onClick: () => this.changeCalendarView(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: '65e864e3df6b3f4c725337c13c302ae4f4d29904', role: "grid", class: {
                 grid: true,
                 'grid--show-week-numbers': this.showWeekNumbers,
-            } }, h("div", { key: 'b95a4e9f19c16ae42ac8e1396f43cedcc829893d', role: "row" }, this.showWeekNumbers && (h("div", { key: '5552fb1ecbfb5f71c07b29e838f146662edf9e9e', class: "calendar-item week-day", role: "columnheader" })), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day", role: "columnheader" }, h("div", { class: "overflow" }, name.slice(0, 3)))))), this.calendar.map((week) => {
+            } }, h("div", { key: '061afbad3742cbeba3564b06667414ac05c37461', role: "row" }, this.showWeekNumbers && (h("div", { key: '9f223211778fcef3281a0fc11ab2ddfb40c66670', class: "calendar-item week-day", role: "columnheader" })), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day", role: "columnheader" }, h("div", { class: "overflow" }, name.slice(0, 3)))))), this.calendar.map((week) => {
             return (h("div", { role: "row" }, this.showWeekNumbers && (h("div", { class: "calendar-item week-number", role: "rowheader" }, week.weekNumber)), week.dayNumbers.map((day) => {
                 return day ? (h("div", { role: "gridcell", "aria-selected": this.getUtilitiesBasedOnDay(day).isSelected()
                         ? 'true'
@@ -728,10 +732,10 @@ export class DatePicker extends Mixin(...DefaultMixins) {
                         }
                     }, tabIndex: day === this.focusedDay ? 0 : -1, autofocus: this.getUtilitiesBasedOnDay(day).isToday(), onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur(), "aria-label": `${day} ${Info.months()[this.selectedMonth]} ${this.selectedYear}` }, day)) : (h("div", { role: "gridcell" }));
             })));
-        })), h("div", { key: 'fddd1c1fc28e5f285551bc7a197c3ddc022e7bcb', class: {
+        })), h("div", { key: 'f4e2619893fdf4d3c4a6ba2b514a03285a9a145f', class: {
                 button: true,
                 hidden: this.singleSelection || this.embedded,
-            } }, h("ix-button", { key: '636a74b44e1e626b618d2c86bb1c5093c82e82e3', hidden: this.singleSelection || this.embedded, onClick: () => this.onDone() }, this.i18nDone)))));
+            } }, h("ix-button", { key: 'a907377384cc521a7302a4adc7a4076a9befbc38', hidden: this.singleSelection || this.embedded, onClick: () => this.onDone() }, this.i18nDone)))));
     }
     static get is() { return "ix-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-time-card/date-time-card.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 .card {

package/dist/collection/components/date-time-card/date-time-card.js

@@ -42,11 +42,11 @@ export class DateTimeCard {
         };
     }
     render() {
-        return (h(Host, { key: '2c99b24d79ebec2d725f97129fe3f342c522d079' }, h("div", { key: '5e2a5de64db6ef617518205fceb9bfa8d589aa23', class: this.cardClasses() }, !this.hideHeader && (h("div", { key: '03a4337b9d32f39e6269139f4daa7abc0be03782', class: "header-container" }, h("div", { key: '6ece0fe49bd23f36cef66adca6ebcff1889f7337', class: "header" }, h("slot", { key: '9119418fcc90d838f5cb91e424fb19c30b53fe55', name: "header" })), h("div", { key: '5ac0ad42605f8f4ca4352494f55e663e001e3188', class: "separator" }))), h("div", { key: 'a9d30cbca8fff9cb3821c7643054654e855750cb', class: {
+        return (h(Host, { key: '289080b5249c75edc736046a5ad221d48026e5d0' }, h("div", { key: '1ed983539d3bcc523b1ed09a257576b4039df91c', class: this.cardClasses() }, !this.hideHeader && (h("div", { key: '6e3e65760b7a86d80010ae2527c1d8d894dc71a4', class: "header-container" }, h("div", { key: 'da2e1eade722ad8cec33483ddd9d2e671a77a955', class: "header" }, h("slot", { key: '6827d46897a68e0ca11b1e2ea3b3d80fd5f55b71', name: "header" })), h("div", { key: '1c5da53871038ecd0181290ac8a8252e96b47cc0', class: "separator" }))), h("div", { key: 'a848fbd6e1ca7f8093f988d5f4dd45672d27e9f2', class: {
                 content: true,
                 'content--time-picker': this.timePickerAppearance,
                 'content--no-padding': this.noPadding,
-            } }, h("slot", { key: '6054b36f5cd386adde31aa4d7faa1fb63848a146' })), this.hasFooter && (h("div", { key: '60e9f4ec42a71ce72e32ad698acf0bcee6913b46', class: "footer-container" }, h("div", { key: '9c9b0a086adee3d0c0224e45f9c1ef0d37c3f9ba', class: "separator" }), h("div", { key: '59d1fac830d3632d3da09dd0c8183a83a619c9c3', class: "footer" }, h("slot", { key: '73a026a1015c6b900cea1dc0423cc616b7a3cd17', name: "footer" })))))));
+            } }, h("slot", { key: '45bc8172ac6ebee53ff34078f1d93fb10aaabab1' })), this.hasFooter && (h("div", { key: 'ddee781fb1860b60d7acf73548b8e952106740b8', class: "footer-container" }, h("div", { key: '356280fe315163d4a86bc6798b7917ccb75101b7', class: "separator" }), h("div", { key: '81a8be6aaa1ade1a686ae43aacc9b4c5990f05b5', class: "footer" }, h("slot", { key: 'd197efc24f44d7a4c6759cd19877287fb4997391', name: "footer" })))))));
     }
     static get is() { return "ix-date-time-card"; }
     static get encapsulation() { return "shadow"; }