@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/radio/radio.js

@@ -13,22 +13,47 @@ import { createClassMutationObserver, } from "../utils/input";
  * @form-ready
  */
 export class Radio {
-    constructor() {
-        /**
-         * Disabled state of the radio component
-         */
-        this.disabled = false;
-        /**
-         * Checked state of the radio component
-         */
-        this.checked = false;
-        /**
-         * Requires the radio component and its group to be checked for the form to be submittable
-         *
-         * @since 3.0.0
-         */
-        this.required = false;
-    }
+    hostElement;
+    formInternals;
+    /**
+     * Name of the radio component
+     */
+    name;
+    /**
+     * Value of the radio component
+     */
+    value;
+    /**
+     * Label for the radio component
+     */
+    label;
+    /**
+     * Disabled state of the radio component
+     */
+    disabled = false;
+    /**
+     * Checked state of the radio component
+     */
+    checked = false;
+    /**
+     * Requires the radio component and its group to be checked for the form to be submittable
+     *
+     * @since 3.0.0
+     */
+    required = false;
+    /**
+     * Event emitted when the checked state of the radio changes
+     */
+    checkedChange;
+    /**
+     * Event emitted when the value of the radio changes
+     */
+    valueChange;
+    /**
+     * Event emitted when the radio is blurred
+     */
+    ixBlur;
+    classMutationObserver;
     /** @internal */
     async setCheckedState(newChecked) {
         if (this.checked) {
@@ -63,9 +88,8 @@ export class Radio {
         this.updateFormInternalValue();
     }
     updateFormInternalValue() {
-        var _a;
         if (this.checked) {
-            this.formInternals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : 'on');
+            this.formInternals.setFormValue(this.value ?? 'on');
         }
         else {
             this.formInternals.setFormValue(null);
@@ -85,12 +109,12 @@ export class Radio {
             case 'ArrowUp':
             case 'ArrowLeft':
                 preventEvent = true;
-                closestRadioGroup === null || closestRadioGroup === void 0 ? void 0 : closestRadioGroup.setCheckedToNextItem(this.hostElement, false);
+                closestRadioGroup?.setCheckedToNextItem(this.hostElement, false);
                 break;
             case 'ArrowDown':
             case 'ArrowRight':
                 preventEvent = true;
-                closestRadioGroup === null || closestRadioGroup === void 0 ? void 0 : closestRadioGroup.setCheckedToNextItem(this.hostElement, true);
+                closestRadioGroup?.setCheckedToNextItem(this.hostElement, true);
                 break;
             default:
                 break;
@@ -113,17 +137,17 @@ export class Radio {
         if (this.disabled) {
             tabIndex = -1;
         }
-        return (h(Host, { key: '2d239f9247e418efb8cbd9ecd1b56dfb060fcfcd', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
+        return (h(Host, { key: '38a5132a44f733662ff6b744cb4469595df3d2b9', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
                 disabled: this.disabled,
                 checked: this.checked,
             }, onClick: () => {
                 if (this.disabled)
                     return;
                 this.setCheckedState(true);
-            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: '6ce7a29836eb51925a57f7598fe6eabc5174c1b0' }, h("div", { key: '47df681feb5e8ae432f6c9f58a7b90bd3d304c37', class: "radio-button" }, h("div", { key: '16b634e3893281e6f172b16d91adcbf19799a074', "aria-hidden": "true", class: {
+            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: '2505290137ef4bf9771119b347c95896afd3bfb2' }, h("div", { key: '774c09d5a0bb29a13cf6fb091e912f81d17e3ea8', class: "radio-button" }, h("div", { key: '1a44e92780fa8fa8ecee253400b23febfa3de481', "aria-hidden": "true", class: {
                 ['radio-checkmark']: true,
                 checked: this.checked,
-            } }, h("div", { key: 'd26eb4e6ae16eb5c8e2e046f0396f756d0944f15', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: '0ff4f2b18b8474dc5f33543ac6874aedafdba1cc', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'f5b48dcabcd1c5d851e2a4055767cf936d86dd93' }))))));
+            } }, h("div", { key: 'e2e26bd36cbc7c94be84fed124f30dda3aee4086', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: 'c96621fb5011671d18b32d38bb619585ba2aaa35', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '849c0c96db14348798bb2ca509e3e828dfd40600' }))))));
     }
     static get is() { return "ix-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,28 +23,63 @@ import { makeRef } from "../utils/make-ref";
  * @form-ready
  */
 export class RadiobuttonGroup {
-    constructor() {
-        /**
-         * Alignment of the radio buttons in the group
-         */
-        this.direction = 'column';
-        /**
-         * Required state of the checkbox component
-         *
-         * @internal
-         */
-        this.required = false;
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
-        this.touched = false;
-        this.groupRef = makeRef();
-        this.observer = new MutationObserver(() => {
-            this.ensureOnlyLastRadioChecked();
-            this.hasNestedRequiredRadio();
-        });
-    }
+    hostElement;
+    /**
+     * Show text below the field component
+     */
+    helperText;
+    /**
+     * Label for the field component
+     */
+    label;
+    /**
+     * Value of the radiobutton group component
+     */
+    value;
+    /**
+     * Error text for the field component
+     */
+    invalidText;
+    /**
+     * Info text for the field component
+     */
+    infoText;
+    /**
+     * Warning text for the field component
+     */
+    warningText;
+    /**
+     * Valid text for the field component
+     */
+    validText;
+    /**
+     * Show helper, info, warning, error and valid text as tooltip
+     */
+    showTextAsTooltip;
+    /**
+     * Alignment of the radio buttons in the group
+     */
+    direction = 'column';
+    /**
+     * Required state of the checkbox component
+     *
+     * @internal
+     */
+    required = false;
+    /**
+     * Event emitted when the value of the radiobutton group changes
+     */
+    valueChange;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
+    touched = false;
+    groupRef = makeRef();
+    observer = new MutationObserver(() => {
+        this.ensureOnlyLastRadioChecked();
+        this.hasNestedRequiredRadio();
+    });
     get radiobuttonElements() {
         return Array.from(this.hostElement.querySelectorAll('ix-radio'));
     }
@@ -147,10 +182,10 @@ export class RadiobuttonGroup {
         nextRadio.focus();
     }
     render() {
-        return (h(Host, { key: '829b222152a0cfcbdf561425591174ad3bb3716a', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, h("ix-field-wrapper", { key: 'f9cc7e451c564f554fbe13b9631934b1776f4dc8', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: 'a7a67482251f6ee87f5266959f01fff3c51dda99', class: {
+        return (h(Host, { key: '52fe1cdeb484f3114564701e714e686479ad27cb', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, h("ix-field-wrapper", { key: '21591f15dbea1dbbe7fcf625b4f866ecfc95f8bb', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: '1acbd13c448af7fc4b76690ceafe8afbf19e66b8', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: '9a99b6cdced60eb7234e2d28645ba074ef79cb4a' })))));
+            } }, h("slot", { key: 'cca579b75a01d8bd2755de0eb5d1e48e1eb2125d' })))));
     }
     static get is() { return "ix-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/range-field/range-field.css

@@ -0,0 +1,102 @@
+/*
+ * 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
+*
+* 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
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host {
+  /* width */
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host {
+  /* Track */
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host {
+  /* Handle */
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host {
+  /* Handle on hover */
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host {
+  display: inline-flex;
+  position: relative;
+  gap: 0.25rem;
+}
+:host .range-delimiter {
+  order: 2;
+  flex: 0 0 auto;
+  margin-top: 0.25rem;
+}
+:host .range-delimiter.has-label {
+  margin-top: 2rem;
+}
+:host ::slotted(:first-child),
+:host ::slotted(:last-child) {
+  flex: 1 1 0;
+  min-width: 0;
+}
+:host ::slotted(:first-child) {
+  order: 1;
+}
+:host ::slotted(:last-child) {
+  order: 3;
+}
+:host ::slotted(.fallback-label-margin) {
+  margin-top: 1.8rem;
+}
+
+:host(.hide-arrow) {
+  gap: 0.5rem;
+}

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

@@ -0,0 +1,193 @@
+/*
+ * 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.
+ */
+import { iconArrowRight } from "@siemens/ix-icons/icons";
+import { Build, Host, Mixin, h, } from "@stencil/core";
+import { isIxInputFieldComponent, isIxInputFieldWithPickerComponent, } from "../utils/input";
+import { DefaultMixins } from "../utils/internal/component";
+import { hasKeyboardMode } from "../utils/internal/mixins/setup.mixin";
+import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
+export class RangeField extends Mixin(...DefaultMixins) {
+    constructor() {
+        super();
+    }
+    hostElement;
+    /**
+     * The type of the input range. If set to "time-range", the input range will be displayed as a time range.
+     */
+    type;
+    /**
+     * Hides the arrow icon between the two input fields. This can be used when the input range is used in a context where the arrow icon is not desired, such as in a form field with a custom label.
+     */
+    hideArrow = false;
+    observeElements;
+    hasLabel = false;
+    elements;
+    warnInDev(message, element) {
+        if (Build.isDev) {
+            console.warn(message, element);
+        }
+    }
+    componentWillLoad() {
+        this.observeElements = new MutationObserver(() => {
+            this.validateRangeElements();
+        });
+        this.observeElements.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['label'],
+        });
+        this.validateRangeElements();
+    }
+    disconnectedCallback() {
+        this.observeElements?.disconnect();
+    }
+    validateRangeElements() {
+        if (!this.type) {
+            throw new Error('Input range type is not specified.');
+        }
+        const elements = this.hostElement?.children;
+        if (!elements) {
+            return;
+        }
+        if (elements?.length !== 2) {
+            throw new Error('Input range must have exactly two child elements.');
+        }
+        let validElements = false;
+        if (this.type === 'time-range') {
+            validElements = Array.from(elements).every((element) => element.tagName.toLowerCase() === 'ix-time-input');
+        }
+        else if (this.type === 'date-range') {
+            validElements = Array.from(elements).every((element) => element.tagName.toLowerCase() === 'ix-date-input');
+        }
+        else if (this.type === 'datetime-range') {
+            validElements = Array.from(elements).every((element) => element.tagName.toLowerCase() === 'ix-datetime-input');
+        }
+        if (!validElements) {
+            throw new Error(`Input range elements are not valid for the specified type (type=${this.type}). Current elements: ${Array.from(elements)
+                .map((el) => el.tagName.toLowerCase())
+                .join(', ')}`);
+        }
+        this.elements = Array.from(elements);
+        this.hasLabel = this.elements.some((element) => !!element.label);
+        if (!this.hasLabel) {
+            return;
+        }
+        this.elements.forEach((element) => {
+            if (!element.label) {
+                element.classList.add('fallback-label-margin');
+                return;
+            }
+            element.classList.remove('fallback-label-margin');
+        });
+    }
+    async onValueChange(evt) {
+        if (!this.elements) {
+            return;
+        }
+        const [firstElement, secondElement] = this.elements;
+        if (hasKeyboardMode()) {
+            return;
+        }
+        if (!evt.detail || evt.target !== firstElement) {
+            return;
+        }
+        if (!isIxInputFieldComponent(firstElement)) {
+            this.warnInDev('First element is not an input field component.', firstElement);
+            return;
+        }
+        if (!isIxInputFieldComponent(secondElement)) {
+            this.warnInDev('Second element is not an input field component.', secondElement);
+            return;
+        }
+        const input = await secondElement.getNativeInputElement();
+        input?.focus();
+        if (!isIxInputFieldWithPickerComponent(secondElement)) {
+            this.warnInDev('Second element is not an input field with picker component.', secondElement);
+            return;
+        }
+        requestAnimationFrameNoNgZone(() => secondElement.openPicker());
+    }
+    render() {
+        return (h(Host, { key: 'a3fe83cc2529f7b415a7c2b7cc6f03685078df51', class: { 'hide-arrow': this.hideArrow }, role: "group" }, !this.hideArrow && (h("ix-icon", { key: '10503bc358606a043a4cd3f56c399bc500fb4714', "aria-hidden": "true", class: {
+                'range-delimiter': true,
+                'has-label': this.hasLabel,
+            }, name: iconArrowRight })), h("slot", { key: '2b97358a113fa98803c17dda0d1202d94d1cdc34' })));
+    }
+    static get is() { return "ix-range-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["range-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["range-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'time-range' | 'date-range' | 'datetime-range'",
+                    "resolved": "\"date-range\" | \"datetime-range\" | \"time-range\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the input range. If set to \"time-range\", the input range will be displayed as a time range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type"
+            },
+            "hideArrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the arrow icon between the two input fields. This can be used when the input range is used in a context where the arrow icon is not desired, such as in a form field with a custom label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-arrow",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasLabel": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "ixChange",
+                "method": "onValueChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/row/row.js

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class Row {
     render() {
-        return (h(Host, { key: 'f38fd53867857b85a1b2d618125c81bba478cdac' }, h("slot", { key: '1fbd414a8c0bb275dcdc88a0e4ff54e944212739' })));
+        return (h(Host, { key: 'd196cf5b6609b66fd1d8e60175373e6463faec5c' }, h("slot", { key: 'cd5208fe0e779fb69579e8f9bbc1af21572d8bbc' })));
     }
     static get is() { return "ix-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.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: inline-block;
   position: relative;
@@ -135,9 +143,6 @@
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
-:host .display-none {
-  display: none;
-}
 :host .select {
   position: relative;
   display: flex;
@@ -153,12 +158,6 @@
   background-color: var(--theme-input--background--hover);
   border-color: var(--theme-input--border-color--hover);
 }
-:host .select:focus-within {
-  background-color: var(--theme-input--background--focus);
-  border-color: var(--theme-input--border-color--focus);
-  outline: 1px solid #119fff;
-  outline-offset: var(--theme-input--focus--outline-offset);
-}
 :host .select.readonly,
 :host .select.disabled {
   box-shadow: none !important;
@@ -193,9 +192,6 @@
 :host .select.readonly input {
   color: var(--theme-input--color--readonly);
 }
-:host .hidden {
-  display: none !important;
-}
 :host .trigger {
   display: flex;
   align-items: center;
@@ -213,14 +209,27 @@
   position: relative;
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   height: 100%;
-  max-height: 3.5rem;
   flex-grow: 1;
-  overflow-y: auto;
+  overflow: hidden;
 }
 :host .input-container .chips > ix-filter-chip {
   margin: 0.1rem;
+  flex-shrink: 0;
+  max-width: min(40%, 14rem);
+}
+:host .input-container .chips > ix-filter-chip.chip-measuring {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+:host .input-container .chips > ix-filter-chip.chip-overflow {
+  cursor: pointer;
+}
+:host .input-container .chips > ix-filter-chip.chip-overflow:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
 }
 :host .input-container ix-icon-button {
   height: 1.875rem;
@@ -260,8 +269,19 @@
   opacity: 0;
 }
 :host ix-dropdown {
+  display: flex;
+  flex-direction: column;
   max-width: 100%;
 }
+:host .overflow-dropdown-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
 :host .dropdown-visible {
   --ix-icon-button-color: var(--theme-color-std-text--hover);
 }
@@ -282,6 +302,31 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+:host .hidden {
+  display: none !important;
+}
+:host .proxy-list {
+  all: unset;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  overflow: hidden;
+  color: transparent;
+  opacity: 0;
+  pointer-events: all;
+  z-index: 1000;
+}
+:host .proxy-list li {
+  height: 2px;
+  width: 2px;
+  pointer-events: all;
+}
+
+:host(.ix-focused) .select,
+:host(.show-focus-outline) .select {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
 
 :host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select {
   border-color: var(--theme-input--border-color--info);
@@ -295,6 +340,7 @@
 
 :host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select {
   border-color: var(--theme-input--border-color--warning);
+  background-color: var(--theme-input--background--warning);
 }
 :host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover {
   border-color: var(--theme-input--border-color--warning--hover) !important;
@@ -307,7 +353,6 @@
 :host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select {
   border-color: var(--theme-input--border-color--invalid);
   background-color: var(--theme-input--background--invalid);
-  box-shadow: none;
 }
 :host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover,
 :host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover {