@siemens/ix 5.1.0 → 5.2.0

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

@@ -10,6 +10,7 @@ import { h, Host } from "@stencil/core";
 import { hasSlottedElements } from "../utils/shadow-dom";
 /**
  * @slot header - Display content at the top of the content page
+ * @slot default - Main page content.
  */
 export class Content {
     hostElement;
@@ -18,12 +19,12 @@ export class Content {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: '2cb8428708f3a1e815704254035676f742cd6f30' }, h("div", { key: '4e275d8af38da243e29b46bb8e5dcc9e9d23b1da', class: {
+        return (h(Host, { key: 'b0090d73abb383f550111eb0adc7b143d8e605de' }, h("div", { key: 'ec8cce11ef773bb5b6665063558e33882c2c3d53', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: '3e4a6609305c444deaacbf29a60514f300f65301', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: '04ecaaeebdf17a57efd35cba932bc09928911fdd', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '893989653b3beaf7bc406e7870db8d8f7d0deba4', class: "content" }, h("slot", { key: '25b54aafbde16ab4d87a0cdbc4a8222dabacb226' }))));
+            } })), h("div", { key: '2fdeaacd37f4fe25c30b4807c61035297253385b', class: "content" }, h("slot", { key: 'd9ee1690a88d8f8a587a23cb1520a9b0598f2949' }))));
     }
     static get is() { return "ix-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ import { iconArrowLeft } from "@siemens/ix-icons/icons";
 import { h, Host } from "@stencil/core";
 /**
  * @slot header - Content to be placed in the header area next to the title
- * @slot - Default slot for action buttons or other content
+ * @slot default - Default slot for action buttons or other content
  */
 export class ContentHeader {
     /**
@@ -34,13 +34,13 @@ export class ContentHeader {
      */
     backButtonClick;
     render() {
-        return (h(Host, { key: 'a81bf466bf10e9e7a0794253b246c340a9b92999' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: '7b81cb2b7c5d48fdd75b631e9ef2b5da9224f455', class: "titleGroup" }, h("div", { key: '59d28222f4bbfd83a94490f10bb67b944e44c79f', class: "headerTitleRow" }, h("ix-typography", { key: 'f6b3985a6b8e2420e4d63a7032b1ff1f12f93679', 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: '9b1a9f865955f4b02a23a528d61e54959a8992d1', class: "headerSlot" }, h("slot", { key: '8d7d21906e9042de89123de9489b2cd8d8db25b5', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: '2b29f3ebde503fa328c10bad48ba5b98455d8a31', 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: '0a558d5e3c40ab3e5ebd77c1ff8e0e316e263658', class: "buttons" }, h("slot", { key: 'f54687cd38db7f152f3495beec362f0dc82e2bef' }))));
+            }, 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

@@ -9,6 +9,7 @@
 import { h, Host } from "@stencil/core";
 /**
  * @internal
+ * @slot default - Grid item content.
  */
 export class CssGridItem {
     /**
@@ -18,7 +19,7 @@ export class CssGridItem {
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: 'af7e2134d1e6a448e96a0a414c3766f51088fb54', style: style }, h("slot", { key: 'a20d56f4601d818ff1d2e7cad497a0facd09c44e' })));
+        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

@@ -18,6 +18,7 @@ const mediaQueryCollection = [
 ];
 /**
  * @internal
+ * @slot default - Grid items arranged by the configured template.
  */
 export class CssGrid {
     /**
@@ -79,7 +80,7 @@ export class CssGrid {
         if (this.currentTemplate && this.currentTemplate.length !== 0) {
             style['grid-template-areas'] = templateBuilder(this.currentTemplate);
         }
-        return (h(Host, { key: '491581fede3e8163cdf43cca11f597b98c5bfe32', style: style }, h("slot", { key: 'ddd975c6bfea2c4abfc3b69d8d0d895a69823756' })));
+        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

@@ -18,6 +18,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Host, h } from "@stencil/core";
 import { HookValidationLifecycle, } from "../utils/input";
+/**
+ * @slot default - The form control.
+ */
 export class CustomField {
     hostElement;
     /**
@@ -63,7 +66,7 @@ export class CustomField {
         this.isWarning = isWarning;
     }
     render() {
-        return (h(Host, { key: '4194f7081c66e42f9376cf0c8004a705bc053f0b' }, h("ix-field-wrapper", { key: '55a70e2a6500a6945f819004c9b910d7d7decd2b', 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: '8a54f90dc2db37f9a21f2c52f7b4721dbb7acc67' }))));
+        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: 'a457c4586b7d426cb3177b13ada395cd142c554c', "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: '4843647a409bf919d4221187eeb4fb9285a53f0e', 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: 'b56022ada38073e8f0eb41e45fe77ff9e7266619', class: "container" }, this.dateRangeOptions?.length > 1 && (h("div", { key: '08899447b48dbb8e0a9afd9869611694f859de8c', 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: '8c61f1698346dcbd76f6ac011c54c0034b19db70', class: "picker-wrapper" }, h("ix-date-picker", { key: 'd9f6d28e64a07aedd2f66a5edbb8c470e908b87e', 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: '1dc08213a7637d97a129484b84206f9c030448fd', class: "pull-right" }, h("ix-button", { key: 'fcdcc6e21a4aad47466ce6354d75286eed642081', 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 {
@@ -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/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

@@ -681,14 +681,14 @@ 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: '7de4a5edbe8988dcae7cd6f640ca4d5db58515f5', 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: 'efae993810b8c99e7093d99afff4585ad157f09d', corners: this.corners, embedded: this.embedded }, h("div", { key: 'b242490e8a186d2891c9f03d167ced3814af2be3', class: "header", slot: "header" }, h("ix-icon-button", { key: '23980a73c3296a4346d545c6ef6d34759a228f9f', onClick: () => this.changeCalendarView(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: 'ef74172fffd395ae5dd84b926b6ad6ecd07bfc18', class: "selector" }, h("ix-dropdown-button", { key: '40c5bd62bf2600880a003d90b889c9fd9e54e146', 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: 'f1a415a1bef4f302de05582bf053c052bad0505a', bold: true, class: "capitalize", slot: "button-label" }, this.monthNames[this.selectedMonth]), this.renderMonths()), h("ix-dropdown-button", { key: 'ce5a5b993fd02564d0104e13764418682a77acc4', 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) {
@@ -710,10 +710,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: 'd7d93c944877c170728b0aa41085a0ebdf657eac', class: "infinite-scrolling-spacer" }, h("div", { key: '9bdd838a9750150065141302e1e4a5aeaf8b58cc', class: "sentinel", "data-sentinel": "top" })), h("ix-typography", { key: 'f7adff586df01462d4e164d14f95f85dedb0e63d', bold: true, class: "capitalize", slot: "button-label" }, this.selectedYear), this.renderYears(), h("div", { key: '1b0db1dd2e77538f2a052272afc10bee207d35b9', class: "infinite-scrolling-spacer" }, h("div", { key: '1a324d048c46a7b7a1320f76255c6f251fa7ffe6', class: "sentinel", "data-sentinel": "bottom" })))), h("ix-icon-button", { key: '622614d0cf6eea4b960a69d40fbaee1558c457e7', onClick: () => this.changeCalendarView(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: '468b8b1a645c376fee7a33f153fc01c24174a048', 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: '1aef3ab46c009c831c0a46663490dcac49b3f857', role: "row" }, this.showWeekNumbers && (h("div", { key: '179664fef0ad9939184a6b9247931cb311f2cc8f', 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 +728,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: '64236c8cacbf0c467b6da51e9540e966076f1d46', 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: 'd0bd805434cbb01e8dbbed9fb539ee647b87ead4', 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"; }