@siemens/ix 5.1.1 → 5.2.1

package/dist/collection/components/icon-toggle-button/icon-toggle-button.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 {
   --ix-button-border-radius-left: var(--theme-btn--border-radius);
   --ix-button-border-radius-right: var(--theme-btn--border-radius);
@@ -101,7 +109,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -110,37 +118,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 button,
@@ -212,7 +220,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -221,37 +229,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 button,
@@ -353,6 +361,12 @@
   color: var(--theme-btn-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -415,6 +429,12 @@
   color: var(--theme-btn-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -477,6 +497,12 @@
   color: var(--theme-btn-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-tertiary--border-color--active);
+  background-color: var(--theme-btn-tertiary--background--active);
+  color: var(--theme-btn-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -539,6 +565,12 @@
   color: var(--theme-btn-subtle-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-primary--border-color--active);
+  background-color: var(--theme-btn-subtle-primary--background--active);
+  color: var(--theme-btn-subtle-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -601,6 +633,12 @@
   color: var(--theme-btn-subtle-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-secondary--border-color--active);
+  background-color: var(--theme-btn-subtle-secondary--background--active);
+  color: var(--theme-btn-subtle-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -663,6 +701,12 @@
   color: var(--theme-btn-subtle-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-tertiary--border-color--active);
+  background-color: var(--theme-btn-subtle-tertiary--background--active);
+  color: var(--theme-btn-subtle-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -725,6 +769,12 @@
   color: var(--theme-btn-danger-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-primary--border-color--active);
+  background-color: var(--theme-btn-danger-primary--background--active);
+  color: var(--theme-btn-danger-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -787,6 +837,12 @@
   color: var(--theme-btn-danger-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-secondary--border-color--active);
+  background-color: var(--theme-btn-danger-secondary--background--active);
+  color: var(--theme-btn-danger-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -849,6 +905,12 @@
   color: var(--theme-btn-danger-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-tertiary--border-color--active);
+  background-color: var(--theme-btn-danger-tertiary--background--active);
+  color: var(--theme-btn-danger-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -867,44 +929,46 @@
   box-sizing: border-box;
 }
 
-::-webkit-scrollbar-button {
+*::-webkit-scrollbar-button {
   display: none;
 }
-
 @-moz-document url-prefix() {
   * {
     scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
     scrollbar-width: thin;
   }
 }
-/* width */
-::-webkit-scrollbar {
+* {
+  /* width */
+}
+*::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-
-/* Track */
-::-webkit-scrollbar-track {
+* {
+  /* Track */
+}
+*::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-
-::-webkit-scrollbar-track:hover {
+*::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-
-/* Handle */
-::-webkit-scrollbar-thumb {
+* {
+  /* Handle */
+}
+*::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
+* {
+  /* Handle on hover */
+}
+*::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-
-::-webkit-scrollbar-corner {
+*::-webkit-scrollbar-corner {
   display: none;
 }
 

package/dist/collection/components/icon-toggle-button/icon-toggle-button.js

@@ -92,10 +92,10 @@ export class IconToggleButton extends Mixin(...DefaultMixins, InheritAriaAttribu
                 ...this.getIconSizeClass(),
             },
         };
-        return (h(Host, { key: '4a88b4c7a2378ef0f72ccc8256de227be868f8c8', class: {
+        return (h(Host, { key: '19d7a7c2ea4a7e1cb0aa96a7d1b7848acd61bb0f', class: {
                 ...this.getIconSizeClass(),
                 disabled: this.disabled || this.loading,
-            } }, h(BaseIconButton, { key: 'e2801bf6e2f360c58fb16753b8e5f7f160647b67', ...baseButtonProps })));
+            } }, h(BaseIconButton, { key: '1ad13c2f6bfe45ac8adf0c51c4079a44e156287e', ...baseButtonProps })));
     }
     static get is() { return "ix-icon-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input/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 {

package/dist/collection/components/input/input.js

@@ -207,19 +207,19 @@ export class Input {
     }
     render() {
         const inputAria = getAriaAttributesForInput(this);
-        return (h(Host, { key: '39e2e23db5a53ee6b5af6be560210e134fc05972', class: {
+        return (h(Host, { key: '66836b5459585c8a90488d16e71d545363b10863', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '11b06932337c40f4aed4ca7e472486bcc9fb443e', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'a4acff054f170436d054b1126ed983c441a4a862', class: "input-wrapper" }, h(SlotStart, { key: 'f5cedd24a63534c6ae89791eb13b1d130dad5123', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'd1b802c2c12e6bf2ef97c57c06de1e1c1ea0a81b', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, h("ix-field-wrapper", { key: 'f6ecaef9149b5abad35af671fa2cfd907ef32faf', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'cd37519c24d9d9bd209a161f2dd88df0942176d4', class: "input-wrapper" }, h(SlotStart, { key: 'e83805660ed82fdf555d8550df9c3341be618e18', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '5f6dba675ee9fb00bc6b7d1a10e1ce637ee766b2', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 onInputBlurWithChange(this, this.inputRef.current, this.value);
                 this.touched = true;
-            }, ariaAttributes: inputAria, form: this.formInternals.form ?? undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: '1546044564575e540f091b3a0b610627a06a1da2', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, this.type === 'password' && !this.disabled && (h("ix-icon-button", { key: '1f31b154f0c715c38a6e5303e458c768839b85d6', ref: this.passwordToggleRef, color: "color-weak-text", class: "password-eye", variant: "tertiary", size: "16", icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
+            }, ariaAttributes: inputAria, form: this.formInternals.form ?? undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: '93497c9dcef9942a90b288251870cca7fa3889eb', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, this.type === 'password' && !this.disabled && (h("ix-icon-button", { key: 'f0e8f7dfe18368db4327ac30e8041ad2594b5ca8', ref: this.passwordToggleRef, color: "color-weak-text", class: "password-eye", variant: "tertiary", size: "16", icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
                 if (this.inputType === 'password') {
                     this.inputType = 'text';
                     return;
                 }
                 this.inputType = 'password';
-            } })))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'e0759b32acfe0e8e50882861ce69c9951ce8fd82', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (this.value ?? '').length, "/", this.maxLength)))));
+            } })))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'e732a774c5842487a0171b2b45454511ecfcfb8e', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (this.value ?? '').length, "/", this.maxLength)))));
     }
     static get is() { return "ix-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input/input.util.js

@@ -148,7 +148,12 @@ export function onInputFocus(comp, currentValue) {
 export function onInputBlurWithChange(comp, input, currentValue) {
     onInputBlur(comp, input);
     if (comp.initialValue !== currentValue) {
-        comp.ixChange.emit(currentValue);
+        if (currentValue === undefined) {
+            comp.ixChange.emit();
+        }
+        else {
+            comp.ixChange.emit(currentValue);
+        }
         comp.initialValue = currentValue;
     }
 }

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

@@ -402,7 +402,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() {
@@ -411,37 +411,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 {

package/dist/collection/components/input/number-input.js

@@ -156,13 +156,13 @@ export class NumberInput {
     initialValue;
     disposableChangesAndVisibilityObservers;
     onValueChange(newValue) {
-        this.updateFormInternalValue(newValue);
+        this.updateOptionalFormInternalValue(newValue);
     }
     updateClassMappings(result) {
         mapValidationResult(this, result);
     }
     componentWillLoad() {
-        this.updateFormInternalValue(this.value);
+        this.updateOptionalFormInternalValue(this.value);
     }
     connectedCallback() {
         this.disposableChangesAndVisibilityObservers =
@@ -195,6 +195,9 @@ export class NumberInput {
         this.valueChange.emit(this.allowEmptyValueChange ? value : (value ?? 0));
     }
     updateFormInternalValue(value) {
+        this.updateOptionalFormInternalValue(value);
+    }
+    updateOptionalFormInternalValue(value) {
         const formValue = value !== undefined && value !== null ? value.toString() : '';
         this.formInternals.setFormValue(formValue);
         this.value = value;
@@ -215,11 +218,11 @@ export class NumberInput {
             return;
         const inputValue = this.inputRef.current.value;
         const parsedValue = this.convertNumberStringToFloat(inputValue);
-        this.updateFormInternalValue(parsedValue);
+        this.updateOptionalFormInternalValue(parsedValue);
         if (parsedValue !== undefined && this.inputRef.current) {
             this.inputRef.current.value = this.formatValue(parsedValue);
         }
-        this.updateFormInternalValue(parsedValue);
+        this.updateOptionalFormInternalValue(parsedValue);
         onInputBlurWithChange(this, this.inputRef.current, parsedValue);
         this.touched = true;
     };
@@ -337,13 +340,13 @@ export class NumberInput {
     }
     render() {
         const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
-        return (h(Host, { key: '43ec1c05fcf210e5ac04af411fffb2164eb5bde0', class: {
+        return (h(Host, { key: 'd7300e47cdcb3c0923b9a72874ed62e4bb1461d3', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '22b64f834e3d16fd6cf26397d8ea2bd52d68c6c8', id: this.numberInputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '5146fe06cb0e90ee45074775228f64b85f7994e6', class: {
+            } }, h("ix-field-wrapper", { key: '2f970edda1da48d2075ab520e17668e3a0bce8ab', id: this.numberInputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '20b3fe528654eba138465af45233bfc2e842b7de', class: {
                 'input-wrapper': true,
                 'show-stepper-buttons': !!this.showStepperButtons,
-            } }, h(SlotStart, { key: 'dcaab71a50b5b5dbda94936d0c58abfc0b44d134', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '2abe03ee9a881ce3aedd011ef8e6e2477fc6019a', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, step: this.step, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.formatValue(this.value), placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), onKeyDown: (event) => this.handleKeyDown(event), onBeforeInput: (event) => this.handleBeforeInput(event), onPaste: (event) => this.handlePaste(event), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: this.handleInputChange, updateFormInternalValue: (value) => {
+            } }, h(SlotStart, { key: '37d19aa438f13b76faf7dc79d3a64ac1a4c856e8', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '89493aabca135cb7a6ee332d017c3d973fe44ef7', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, step: this.step, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.formatValue(this.value), placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), onKeyDown: (event) => this.handleKeyDown(event), onBeforeInput: (event) => this.handleBeforeInput(event), onPaste: (event) => this.handlePaste(event), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: this.handleInputChange, updateFormInternalValue: (value) => {
                 const parsedValue = this.convertNumberStringToFloat(value);
                 const isScientificNotation = this.isScientificNotation(value.trim());
                 if (isScientificNotation) {
@@ -353,12 +356,12 @@ export class NumberInput {
                     this.value = parsedValue;
                 }
                 else {
-                    this.updateFormInternalValue(parsedValue);
+                    this.updateOptionalFormInternalValue(parsedValue);
                 }
-            }, onBlur: this.handleBlur, form: this.formInternals.form ?? undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: '5b16f4b47e29031a8ded31507713e5bf7f8bb47c', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: '8ad0ee470be89f02fe4586fde3e8b043558ad06d', class: {
+            }, onBlur: this.handleBlur, form: this.formInternals.form ?? undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: 'f23f2c74423302aab3a4257858e5dac5b27fd5d1', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: '98452a75169f12a0d156d07601fd8305e4cc1129', class: {
                 'number-stepper-container': true,
                 'container-hidden': !showStepperButtons,
-            } }, h("ix-icon-button", { key: '5de2a6a690e0e53708ac5f61dde101e2e036f83c', variant: "subtle-tertiary", icon: iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => this.handleStepOperation('down') }), h("ix-icon-button", { key: '6a6f63e4a160495e4d1ddd93a5657e0f2210982d', variant: "subtle-tertiary", icon: iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => this.handleStepOperation('up') })))))));
+            } }, h("ix-icon-button", { key: '1245a51baa0f92b48b75caae24bc04f7ca159fa3', variant: "subtle-tertiary", icon: iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => this.handleStepOperation('down') }), h("ix-icon-button", { key: '491dec7ae6b0f7a709f6e0a8c7ffcf4c3a5fd3de', variant: "subtle-tertiary", icon: iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => this.handleStepOperation('up') })))))));
     }
     static get is() { return "ix-number-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input/textarea.css

@@ -402,7 +402,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() {
@@ -411,37 +411,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 {

package/dist/collection/components/input/textarea.js

@@ -260,10 +260,10 @@ export class Textarea {
         return normalizeCssDimension(this.textareaWidth);
     }
     render() {
-        return (h(Host, { key: '25fd15e33b307ef6679fa4ecb743675e193b5c66', class: {
+        return (h(Host, { key: '0225922a8d56aa475954dc3a7b06d1963debf354', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: 'e710567e5ad61faaaa6ca856371adec196c14811', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: '5971779593dae3517af5cd174000a7c5cb8c1cdc', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (this.value ?? '').length, "/", this.maxLength)), h("div", { key: '73a09a125b0cdd366fa916071784290d1acff350', class: "input-wrapper" }, h(TextareaElement, { key: 'd79416a34716bf036e0a8943904c1986793c3399', id: this.inputId, minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.getTextareaHeight(), textareaWidth: this.getTextareaWidth(), resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, ariaAttributes: getAriaAttributesForInput(this), onFocus: () => onInputFocus(this, this.value), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, h("ix-field-wrapper", { key: '7d2b61104c9525173ac87cfe0dc278f8d19363b4', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: '8bb957ab2f076f590446cd05d49295de0ba49ed1', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (this.value ?? '').length, "/", this.maxLength)), h("div", { key: '0e5bc0c754d5ac6115c09e8d500d6ec7c3dbbce4', class: "input-wrapper" }, h(TextareaElement, { key: 'd7a41229fd7a72e56f58e88e6a4cd32299dc21b1', id: this.inputId, minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.getTextareaHeight(), textareaWidth: this.getTextareaWidth(), resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, ariaAttributes: getAriaAttributesForInput(this), onFocus: () => onInputFocus(this, this.value), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 onInputBlurWithChange(this, this.textAreaRef.current, this.value);
                 this.touched = true;
             } })))));

package/dist/collection/components/ix-playground/ix-playground.js

@@ -9,7 +9,7 @@
 import { Host, h } from "@stencil/core";
 export class IxPlayground {
     render() {
-        return h(Host, { key: 'd20bb68c63a8395efe6aabc279e176d3e4cc29ae' });
+        return (h(Host, { key: '4c39acd6341ee860e02ce62dbbd459f52159e401' }, h("ix-chat-input", { key: '5436d28ebbb5a37fb77eda07047d8b06b8acfff2' })));
     }
     static get is() { return "ix-playground"; }
     static get originalStyleUrls() {

package/dist/collection/components/key-value/key-value.js

@@ -34,7 +34,7 @@ export class KeyValue {
      */
     value;
     render() {
-        return (h(Host, { key: '84845bbe27624cc75a0b92fe3f0db65fbb3331e3', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: 'ad59a165d724eb8171dea28b98daa284bdf25fe8', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), h("div", { key: 'ed34046d743256b63cf2cc5f1733f8334da830b7', class: "keyValue__content" }, h("div", { key: '5604099f74006a2a99e8adc3a529d26d8b9ce953', class: "content__label" }, this.label), h("div", { key: '165a362f6d930d331449a96fcf189ace03776e47', class: {
+        return (h(Host, { key: 'd972c5d0a1228644a1e07510a21f11c02c671375', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: 'cfc9180413baddab9d7cd2ecd8140f59d5b59c11', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), h("div", { key: '2b0f8a08ac4a28a8232c96e9883a49c09cc9f645', class: "keyValue__content" }, h("div", { key: '4d8a3fbea38aa5485944e115b0f388b21e830df9', class: "content__label" }, this.label), h("div", { key: '31a26c86afad074b9595e4bf11600907036ed972', class: {
                 content__value: true,
                 'has-customValue': this.value === undefined,
             } }, this.value !== undefined ? (this.value) : (h("slot", { name: "custom-value" }))))));

package/dist/collection/components/key-value-list/key-value-list.js

@@ -16,7 +16,7 @@ export class KeyValueList {
      */
     striped = false;
     render() {
-        return (h(Host, { key: '934ba6bfcd2da7f444855670cffff90936cfb7c5', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: 'd935f982f4aa55443641f29615b70a610456b2c3' })));
+        return (h(Host, { key: 'd1df02c5eb06aa46663312486c259df70dc1d5a1', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '1e6e8856d7a21e9f9689e2823c38f4892f33604e' })));
     }
     static get is() { return "ix-key-value-list"; }
     static get encapsulation() { return "shadow"; }