@siemens/ix 5.1.1 → 5.2.0

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

@@ -408,7 +408,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() {
@@ -417,37 +417,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 {
@@ -567,7 +567,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() {
@@ -576,37 +576,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/datetime-input/datetime-input.js

@@ -489,10 +489,10 @@ export class DatetimeInput extends Mixin(...DefaultMixins, InputPickerMixin) {
     }
     render() {
         const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorDateTimeUnparsable);
-        return (h(Host, { key: 'e3798b039b41158b1cf0c93f82f5aae2394b60b8', class: {
+        return (h(Host, { key: 'c6dab3c854539b33ce7bcdffdb441b96ae909c46', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '42e309eb2cab84b15a3053afb1d66018b62110cf', controlRef: this.inputElementRef, helperText: this.helperText, infoText: this.infoText, invalidText: invalidText, isInfo: this.isInfo, isInvalid: this.isInvalid, isValid: this.isValid, isWarning: this.isWarning, label: this.label, required: this.required, showTextAsTooltip: this.showTextAsTooltip, validText: this.validText, warningText: this.warningText }, this.renderInput()), h("ix-dropdown", { key: '5451e2a2275efe4558db30041b49b78ac203305a', class: "datetime-dropdown", closeBehavior: "outside", "data-testid": "datetime-dropdown", enableTopLayer: this.enableTopLayer, ref: this.dropdownElementRef, show: this.show, suppressOverflowBehavior: true, trigger: this.inputElementRef.waitForCurrent(), onShowChanged: (event) => {
+            } }, h("ix-field-wrapper", { key: 'cd147faf61199c60e0ab224af2dd2e56dcfea64a', controlRef: this.inputElementRef, helperText: this.helperText, infoText: this.infoText, invalidText: invalidText, isInfo: this.isInfo, isInvalid: this.isInvalid, isValid: this.isValid, isWarning: this.isWarning, label: this.label, required: this.required, showTextAsTooltip: this.showTextAsTooltip, validText: this.validText, warningText: this.warningText }, this.renderInput()), h("ix-dropdown", { key: '35ab730d2c304fb4aa71bc86c0994d0f1a952410', class: "datetime-dropdown", closeBehavior: "outside", "data-testid": "datetime-dropdown", enableTopLayer: this.enableTopLayer, ref: this.dropdownElementRef, show: this.show, suppressOverflowBehavior: true, trigger: this.inputElementRef.waitForCurrent(), onShowChanged: (event) => {
                 this.show = event.detail;
             }, focusTrapOptions: {
                 targetElement: this.datetimePickerRef,
@@ -504,7 +504,7 @@ export class DatetimeInput extends Mixin(...DefaultMixins, InputPickerMixin) {
                     datePickerElement?.focusActiveDay();
                 }
                 return true;
-            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, h("ix-datetime-picker", { key: '3a469a3a476293d90dc7133feb94e9967c6d54bd', ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, dateFormat: this.dateOnlyFormat, embedded: true, from: this.from ?? '', i18nDone: this.i18nDone, i18nTime: this.i18nTime, locale: this.locale, maxDate: this.maxDate, maxTime: this.maxTime, minDate: this.minDate, minTime: this.minTime, ref: this.datetimePickerRef, showWeekNumbers: this.showWeekNumbers, singleSelection: true, time: this.time ?? '', timeFormat: this.timeOnlyFormat, weekStartIndex: this.weekStartIndex, onDateSelect: this.handleDateSelect }))));
+            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, h("ix-datetime-picker", { key: '78934892208337ab3fdd71fe196dad5fd4914ec9', ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, dateFormat: this.dateOnlyFormat, embedded: true, from: this.from ?? '', i18nDone: this.i18nDone, i18nTime: this.i18nTime, locale: this.locale, maxDate: this.maxDate, maxTime: this.maxTime, minDate: this.minDate, minTime: this.minTime, ref: this.datetimePickerRef, showWeekNumbers: this.showWeekNumbers, singleSelection: true, time: this.time ?? '', timeFormat: this.timeOnlyFormat, weekStartIndex: this.weekStartIndex, onDateSelect: this.handleDateSelect }))));
     }
     static get is() { return "ix-datetime-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,7 +44,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -53,37 +53,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host ix-time-picker {

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

@@ -246,9 +246,9 @@ export class DatetimePicker {
     }
     render() {
         const { minTime, maxTime } = this.getEffectiveTimeConstraints();
-        return (h(Host, { key: '0eb6ec0e18a9794f023b8dd6dee89640b9a0a948' }, h("ix-date-time-card", { key: 'e45f91528b04c803324da4af217ebf7eda31dba0', hideHeader: true, hasFooter: true, embedded: this.embedded, corners: "rounded", noPadding: true }, h("ix-layout-grid", { key: '4cade86af3e6a77563e528d92d52c1d86079d0f9', class: "no-padding" }, h("ix-row", { key: '657adbd57b8334398f171b5aebf6e63cbc03b2af', class: "row-separator" }, h("ix-col", { key: '02d019f2a71c6c1c8cfa716a486acd7ed844c622', class: "col-separator" }, h("ix-date-picker", { key: 'efb6483f6528cec9660913bca6b51d907c59dd3f', ref: (ref) => (this.datePickerElement = ref), corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, tabIndex: this.embedded ? -1 : 0,
-            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })), h("ix-col", { key: 'e0884bbeabca263427ed98d26febb94b9d90cf91' }, h("ix-time-picker", { key: '9b9088f1ed6568028ab41a7f9732e537a1438359', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time, minTime: minTime, maxTime: maxTime, tabIndex: this.embedded ? -1 : 0,
-            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })))), h("div", { key: 'ad8dacb09da1525749481373191078dc1b85ba60', slot: "footer", class: "btn-select-date-container" }, h("ix-button", { key: '1124f92c6f59f14c74385f587f665537bd6cb9e2', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))));
+        return (h(Host, { key: '74103cbb608cda32c6ce7792b2c0a3638b04c02b' }, h("ix-date-time-card", { key: 'f9b1c284b74416ee9f84633ed1fd6fed292a341a', hideHeader: true, hasFooter: true, embedded: this.embedded, corners: "rounded", noPadding: true }, h("ix-layout-grid", { key: '3ec94694fb618b94535c799c31a711f73f577b02', class: "no-padding" }, h("ix-row", { key: 'd45083e8d657c9dc08c3a43150051ca4abf39593', class: "row-separator" }, h("ix-col", { key: '3688c2ee4e7dabf91953a3e685c7b8d10f087925', class: "col-separator" }, h("ix-date-picker", { key: '9f3bcce5cedd9d5bb449030c7c4cab16522c95f7', ref: (ref) => (this.datePickerElement = ref), corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, tabIndex: this.embedded ? -1 : 0,
+            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })), h("ix-col", { key: '8d9e526e746b316e558144f0bf5a630168ddde6a' }, h("ix-time-picker", { key: '1d726de042a1b1b1d8b61870f028e4cd46b6a72e', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time, minTime: minTime, maxTime: maxTime, tabIndex: this.embedded ? -1 : 0,
+            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })))), h("div", { key: '923cd8d5baad08e240c32c7ecaa33177afe4b12a', slot: "footer", class: "btn-select-date-container" }, h("ix-button", { key: '552314657eb3bf326e15b098561cff1cad0fc0d9', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))));
     }
     static get is() { return "ix-datetime-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/divider/divider.js

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class Divider {
     render() {
-        return h(Host, { key: 'eb2dfcf5c516b8b1469282e06edf116e63c7d66a' });
+        return h(Host, { key: '279e531d8f3dfd1b1cf2ca3ea1d41420e596c492' });
     }
     static get is() { return "ix-divider"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -681,7 +681,7 @@ export class Dropdown extends Mixin(...DefaultMixins) {
         else if (this.hostRole) {
             ariaAttributes['role'] = this.hostRole;
         }
-        return (h(Host, { key: '316324b74a3654414f8ae385cec8a0fb7b5d2906', ...ariaAttributes, "aria-modal": "true", "data-ix-dropdown": this.dropdownElementId, "data-ix-focus-trap": true, class: {
+        return (h(Host, { key: 'eebc7297596d43ef67c3461ae0a74fbf9e5c3917', ...ariaAttributes, "aria-modal": "true", "data-ix-dropdown": this.dropdownElementId, "data-ix-focus-trap": true, class: {
                 'dropdown-menu': true,
                 show: this.show,
                 // overflow handling not needed when using top-layer