@siemens/ix 5.0.0 → 5.1.1

package/dist/collection/components/group/group-context-menu.js

@@ -9,6 +9,9 @@
 import { h, Host } from "@stencil/core";
 import { getSlottedElements } from "../utils/shadow-dom";
 import { iconContextMenu } from "@siemens/ix-icons/icons";
+/**
+ * @slot default - Context menu items.
+ */
 export class GroupContextMenu {
     hostElement;
     showContextMenu = false;
@@ -37,7 +40,7 @@ export class GroupContextMenu {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (h(Host, { key: '3440dd5a4f2bab1b2c3448f5fcec00770892ab01' }, h("ix-icon-button", { key: 'ba6c8170bed28cb7060dc70fa457dfa41ec19e6c', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), h("slot", { key: '217eae86a7748599fa9a5cab3e76fa27710e6c66', onSlotchange: () => this.onSlotChange() })));
+        return (h(Host, { key: '7a75df2f66b25774f2161d9b8a8253f1c77d74b3' }, h("ix-icon-button", { key: 'c50905c961529535450ad54cf3fb28be0145ea98', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), h("slot", { key: '3b19aca1490c3e15a3630f53ff2081054acd0313', onSlotchange: () => this.onSlotChange() })));
     }
     static get is() { return "ix-group-context-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,6 +10,12 @@ import { h, Host, } from "@stencil/core";
 import { createMutationObserver } from "../utils/mutation-observer";
 import { hasSlottedElements } from "../utils/shadow-dom";
 import { iconChevronDownSmall, iconChevronUpSmall, } from "@siemens/ix-icons/icons";
+/**
+ * @slot header - Content displayed in the group header.
+ * @slot dropdown - Dropdown used for the group context menu.
+ * @slot default - Group items.
+ * @slot footer - Content displayed below the group items.
+ */
 export class Group {
     hostElement;
     /**
@@ -160,26 +166,26 @@ export class Group {
         }
     }
     render() {
-        return (h(Host, { key: '27d311321d22d9017cb1b5ef1c8111ab6c64287a' }, h("div", { key: '12af89da94df847b308aeab2ae17b08706b30186', class: {
+        return (h(Host, { key: 'f56b013952f4978b036193d55e216f7e1f271031' }, h("div", { key: '9dfee69b32d0b68d140623e7019640e2590ec2d4', class: {
                 'group-header': true,
                 expand: this.expanded,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: 'c591e59143d43a8fae481c7453eaf41340bf57bf', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '84d39c3f502d4a41e1d84f373d5da964bd5986d3', class: {
+            }, tabindex: "0" }, h("div", { key: 'e1d2bf627cd0ed4d43a9b33831cd29be78a97c6d', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '4f7dff297456b0a0ff4ca93db16fe365d7760dfd', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: '5f297db1492b8b30a00c59658b9a920a2c353500', class: "btn-expand-header" }, h("ix-icon", { key: '51b5c4f48401a22057af6b4ae3e1c461a51e8374', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: '5b10de668b6a4f7cee2937d4da6225a1237b72cb', class: "btn-expand-header" }, h("ix-icon", { key: 'da2beae25ed7720d46b7f168ee2cb1acabf3b215', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: 'ba9fbc5a70927476e1ead817e64862fac6c97767', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: 'f760a427586603d9a186d35b0d42abb4b1ab460a', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: 'b63443b4daf82bbd185f11965eb9ff4b54932f2b' }, h("slot", { key: '196393e4ae905b26075f4dd99008f71e69f5cdc5', name: "dropdown" })))), h("div", { key: 'd7114d36a07d2fe1dd9f71b0502e3cddb9eef8dc', class: {
+            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: 'c5d422508f12b3e00f5fde6892d0ba8596c04ba1', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '46bdd2e2b88d5805a3ce26143766b64bc7cec7e4', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: '50375ddf2cb1a42530ce096e08403c6c6e1ed9f5' }, h("slot", { key: 'cc78c4a6b9ad383e17bd62090df99c3c0c56e377', name: "dropdown" })))), h("div", { key: 'c4eb114ff535fdc9a356d7344feed441019f1c8b', class: {
                 'group-content': true,
-            } }, h("div", { key: 'f3ab7295ac0b6e7abf49f76f6b77cd35a234b8cd', style: {
+            } }, h("div", { key: '80f250870c587563c3447417debf7b8fe8d61c1c', style: {
                 display: this.expanded ? 'contents' : 'none',
-            } }, h("slot", { key: '765ca882c56cb4153e97bc84c41c7a23fae1f02a', onSlotchange: () => {
+            } }, h("slot", { key: 'a3c6af2dcd96a8bc9bbcade86a8e031b3e3c7fb0', onSlotchange: () => {
                 const slot = this.hostElement.shadowRoot?.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), h("ix-group-item", { key: '066f81aefb6cc93a2289640c5b7b076be7752e47', class: {
+            } }), h("ix-group-item", { key: 'a92adbfd1177080cd034cb91b87d11f2cf6ef924', class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, h("slot", { key: '4cd4ad5915dc00a1a723e83d515777343d2033bc', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            }, groupFooter: true, suppressSelection: true }, h("slot", { key: '55f1fb62d4ee9afb2808c3330b607e1e0fed5ec4', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     static get is() { return "ix-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,6 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host, } from "@stencil/core";
+/**
+ * @slot default - Group item content.
+ */
 export class GroupItem {
     hostElement;
     /**

package/dist/collection/components/helper-text/helper-text.js

@@ -67,7 +67,7 @@ export class HelperText {
         this.validationResults = checkFieldClasses(forElement);
     }
     render() {
-        return (h(Host, { key: 'e86aee742388bd82aab6cbf8e9847cc720636a4b' }, h(HelperTextUtil, { key: '310510c551f0595d975a0b4690a26a4d4ee53fff', helperText: this.helperText,
+        return (h(Host, { key: 'a38073cf4f6da8c8e91927cc14e194243c9f8acf' }, h(HelperTextUtil, { key: 'aad82c0c2704ac0b491c3f53e0faa52033706318', helperText: this.helperText,
             invalidText: this.invalidText,
             validText: this.validText,
             infoText: this.infoText,

package/dist/collection/components/icon-button/icon-button.css

@@ -155,7 +155,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -266,7 +266,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;

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

@@ -102,10 +102,10 @@ export class IconButton extends Mixin(...DefaultMixins, InheritAriaAttributesMix
                 ? this.hostElement.tabIndex
                 : undefined,
         };
-        return (h(Host, { key: 'b1ad69ccd94cf290a88db0d5f9da8c5992bba336', class: {
+        return (h(Host, { key: '2e94f45af8e808b3e503ad20704bc3953b923316', class: {
                 ...this.getIconSizeClass(),
                 disabled: this.disabled || this.loading,
-            }, tabIndex: this.disabled ? -1 : 0 }, h(BaseIconButton, { key: '928bd44422d72964601e7311a4faa257df34e91b', ...baseButtonProps })));
+            }, tabIndex: this.disabled ? -1 : 0 }, h(BaseIconButton, { key: 'c1a1a4e8bf780bc8bfb33c039bebda99b15cacfb', ...baseButtonProps })));
     }
     static get is() { return "ix-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -155,7 +155,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -266,7 +266,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;

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: '0a1dfc74c10dd9f01b64dc48005183716c249bf3', class: {
+        return (h(Host, { key: '4a88b4c7a2378ef0f72ccc8256de227be868f8c8', class: {
                 ...this.getIconSizeClass(),
                 disabled: this.disabled || this.loading,
-            } }, h(BaseIconButton, { key: 'b74ab2be815eb77c86fc49daa2c0a68448bc036b', ...baseButtonProps })));
+            } }, h(BaseIconButton, { key: 'e2801bf6e2f360c58fb16753b8e5f7f160647b67', ...baseButtonProps })));
     }
     static get is() { return "ix-icon-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -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 {
@@ -570,6 +571,6 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
   visibility: hidden;
   pointer-events: none;
 }
-:host .password-eye.eye-hidden {
-  display: none;
+:host .password-eye {
+  margin-left: 0.125rem;
 }

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

@@ -140,6 +140,7 @@ export class Input {
     inputRef = makeRef();
     slotEndRef = makeRef();
     slotStartRef = makeRef();
+    passwordToggleRef = () => this.updatePaddings();
     inputId = `input-${inputIds++}`;
     touched = false;
     disposableChangesAndVisibilityObservers;
@@ -206,22 +207,19 @@ export class Input {
     }
     render() {
         const inputAria = getAriaAttributesForInput(this);
-        return (h(Host, { key: 'e5c0380187e14c515c1920ff753f02d954b0c468', class: {
+        return (h(Host, { key: '39e2e23db5a53ee6b5af6be560210e134fc05972', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '00ae4da738996eb5fb3fceb3fd2f4bf8f293fd5c', 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: 'ed44a7d89133fcb9ce2574346364212ddbe13630', class: "input-wrapper" }, h(SlotStart, { key: 'f6e0cf1aaa1bb3a945882d89356efd2e15be20df', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'a0263a3186ba0aed9dc7f873f209e32008571336', 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: '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: () => {
                 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: 'ddaf9b30b725f84934c937711cdd5cc6aa4e564b', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: '216ce61735239e8b67f767ec08a37976a03ed74b', color: "color-weak-text", class: {
-                'password-eye': true,
-                'eye-hidden': this.type !== 'password' || this.disabled,
-            }, 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: '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: () => {
                 if (this.inputType === 'password') {
                     this.inputType = 'text';
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'e90d202b3bd47dfd3056c1140f2cabb6aea4e82a', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (this.value ?? '').length, "/", this.maxLength)))));
+            } })))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'e0759b32acfe0e8e50882861ce69c9951ce8fd82', 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/number-input.css

@@ -508,6 +508,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 {

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

@@ -337,13 +337,13 @@ export class NumberInput {
     }
     render() {
         const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
-        return (h(Host, { key: '33890aa9ea0b965a4b78d45fc0ae357ae30daee6', class: {
+        return (h(Host, { key: '43ec1c05fcf210e5ac04af411fffb2164eb5bde0', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: 'eeb301066981e6a0cc6f91c5607948171275f871', 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: 'b72ca95246672d90b96db8ecad0be82f3fe8d28d', class: {
+            } }, 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: {
                 'input-wrapper': true,
                 'show-stepper-buttons': !!this.showStepperButtons,
-            } }, h(SlotStart, { key: '804bfc9ceb55804d55aeb8dec9928ec91af8b574', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '1ce26e202f7bf9d86eacb1d29fb00765c3df8ce6', 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: '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) => {
                 const parsedValue = this.convertNumberStringToFloat(value);
                 const isScientificNotation = this.isScientificNotation(value.trim());
                 if (isScientificNotation) {
@@ -355,10 +355,10 @@ export class NumberInput {
                 else {
                     this.updateFormInternalValue(parsedValue);
                 }
-            }, onBlur: this.handleBlur, form: this.formInternals.form ?? undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: 'c0a582046240d94de487cc139d37ac83a511c2bb', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: 'aa9d15adc8f79e39fbc334d446427f4350f04584', class: {
+            }, 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: {
                 'number-stepper-container': true,
                 'container-hidden': !showStepperButtons,
-            } }, h("ix-icon-button", { key: '01fec50d28065398e09d1916c6d46950d76f6376', 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: 'bf4ec84bc355505671c9d6938f2d94b4ed2b5cf0', 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: '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') })))))));
     }
     static get is() { return "ix-number-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -508,6 +508,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 {

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

@@ -260,10 +260,10 @@ export class Textarea {
         return normalizeCssDimension(this.textareaWidth);
     }
     render() {
-        return (h(Host, { key: 'b1e2135e1ef4df339961519bf2dcf845908c77e6', class: {
+        return (h(Host, { key: '25fd15e33b307ef6679fa4ecb743675e193b5c66', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '18229f5ddcc73f93c4ecbf51663dd10e0c973053', 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: '5088d84355ccaba0df4add4deef2e7efb4fb450c', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (this.value ?? '').length, "/", this.maxLength)), h("div", { key: 'ec6c349bffbaa1ab52e554ad326ae81ca44e6140', class: "input-wrapper" }, h(TextareaElement, { key: '3f597239de02767415994cc39dea5aaf71f09482', 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: '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: () => {
                 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: '823d6cbecae40b6a2f49b36bebcea2978c3d74e2' });
+        return h(Host, { key: 'd20bb68c63a8395efe6aabc279e176d3e4cc29ae' });
     }
     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: 'af5e03b72f520823744f01a43cb9a1e126095a62', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: '425d6eae99291316992748089cbeb77308b920d6', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), h("div", { key: 'ce5eb1beac504b0887aa33afd74e1b44afd8b466', class: "keyValue__content" }, h("div", { key: '0c884df43d337cffb68175a91acb8537698645db', class: "content__label" }, this.label), h("div", { key: 'b274e8cb81453c64291cce2e23883b07beae523c', class: {
+        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: {
                 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

@@ -7,13 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Key-value entries.
+ */
 export class KeyValueList {
     /**
      * Optional striped key value list style
      */
     striped = false;
     render() {
-        return (h(Host, { key: 'b77626b4307e170ebcd609232d6b51e6352d77fc', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '5519febab149c0a10baf26a47fcb0cfecf14cfb2' })));
+        return (h(Host, { key: '934ba6bfcd2da7f444855670cffff90936cfb7c5', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: 'd935f982f4aa55443641f29615b70a610456b2c3' })));
     }
     static get is() { return "ix-key-value-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kpi/kpi.js

@@ -59,13 +59,13 @@ export class Kpi {
         return tooltip;
     }
     render() {
-        return (h(Host, { key: 'd215b422347ffdcb0c46a2a964ccfcd3f4b0a6d2', title: this.getTooltipText(), tabindex: "1", class: {
+        return (h(Host, { key: '5efa239dd8c91b6661566c235f020900d0df9357', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, h("div", { key: '8095eb708071a93c90570eb1e80658f410791e0e', class: {
+            } }, h("div", { key: 'fc4d4c1ec7aa129aaf064809052e45e953bee223', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, h("span", { key: '00141bb9ab93b22647de0c9ea4cc26d2912eeae5', class: "kpi-label" }, this.getStateIcon(), h("span", { key: 'fe025474c9b78ec444200a56c0e2cf2bcb4721f3', class: "kpi-label-text" }, this.label)), h("span", { key: '816283cf52380e84dc60243f23184d5c791ef07c', class: "kpi-value-container" }, h("span", { key: '0d5b79ee139486c5838e3e78426582bc540585ce', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, h("span", { key: '82fe2894efb51fa9ca753745fd1dc3a82b1c04d0', class: "kpi-label" }, this.getStateIcon(), h("span", { key: 'c1d4de1f9945afacc737141c461c95e132a89141', class: "kpi-label-text" }, this.label)), h("span", { key: '60ef2f9d9d6cff9d19e9adc677eacd5a2f625854', class: "kpi-value-container" }, h("span", { key: 'cbf79bcf59f8614be4c1c540d33f4853943ea88d', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
     static get is() { return "ix-kpi"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout-auto/layout-auto.js

@@ -1,4 +1,7 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot default - Content arranged by the automatic layout.
+ */
 export class LayoutForm {
     hostElement;
     /**
@@ -76,7 +79,7 @@ export class LayoutForm {
         });
     }
     render() {
-        return (h(Host, { key: 'fe057d2efd5bd08cfea04c9fa270f462b6883362' }, h("div", { key: 'd26f958f45b56d993527c00c552638352fbbfc17', class: "container" }, h("slot", { key: '6b27323636d5ef2b8be0900bf41f0807e99c0f53' }))));
+        return (h(Host, { key: '21efd579460a164571a802fe0bb80acf6f52c6dc' }, h("div", { key: 'ea241e9bb64871303076772e40eb0699ba358f3b', class: "container" }, h("slot", { key: 'a58d52f738522c46482a0dab84dc7fc8ca9ae6cb' }))));
     }
     static get is() { return "ix-layout-auto"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,6 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Content arranged in the grid.
+ */
 export class LayoutGrid {
     /**
      * The grid will not have any horizontal padding
@@ -21,12 +24,12 @@ export class LayoutGrid {
      */
     columns = 12;
     render() {
-        return (h(Host, { key: 'ad1e96a96876525cbe9da91c13786d914bb3ce6b', class: {
+        return (h(Host, { key: 'e6f61e2437dcf9815db4f5c1d2f2a13f8e579572', class: {
                 'no-margin': this.noMargin,
             }, style: {
                 '--ix-layout-grid-columns': `${this.columns}`,
                 '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, h("slot", { key: '6eb10f5be8cc7aa38e19e38b33d2b5c07e1fe421' })));
+            } }, h("slot", { key: '485b027cb1717fe267b919d9f6b822a18db66a4f' })));
     }
     static get is() { return "ix-layout-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/link-button/link-button.js

@@ -8,6 +8,9 @@
  */
 import { iconChevronRightSmall } from "@siemens/ix-icons/icons";
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Link button label.
+ */
 export class LinkButton {
     /**
      * Disable the link button
@@ -24,13 +27,13 @@ export class LinkButton {
      */
     target = '_self';
     render() {
-        return (h(Host, { key: '99e0bfd85187215ee07ccdb1b8480148524b76d7' }, h("a", { key: '81cc5552afe3b2d8dceae94fef7cdd5324fb77a5', title: this.url, tabindex: "0", class: {
+        return (h(Host, { key: '9a24825321d721c171c3701e5a6484f2dbdeffdc' }, h("a", { key: 'd3b81f3adba54dbdd0312510c79505c1ad7f1611', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: '1fcde8efc7c175f30d8d39833ef99bf204e6e436', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: '54fc7768b69d4dd4f41d4903b7a305bf580d3ce0', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: '3c6cb9b4adb2e2ace4835b8df8e4b3a082d1ffa2', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: '629817f64a53b1226a9e10f3abb8bc1bfaad2877', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: '471e61a08556e26bce42f032620a3c625ae9f702' })))));
+            } }, h("slot", { key: '8ec1e3c6991c89d4feb0aeaf8c8e6e3d87d2c23c' })))));
     }
     static get is() { return "ix-link-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu/menu-expand-icon.css

@@ -139,7 +139,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;

package/dist/collection/components/menu/menu-expand-icon.js

@@ -25,13 +25,13 @@ export class MenuExpandIcon {
     /** Display as pinned */
     pinned = false;
     getSmallScreenIcon() {
-        return (h("button", { "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, "aria-pressed": a11yBoolean(this.expanded), class: {
+        return (h("button", { "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, "aria-expanded": a11yBoolean(this.expanded), class: {
                 ...getButtonClasses('subtle-tertiary', true, false, false, false),
                 'menu-expand-button': true,
             } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))));
     }
     getLargeScreenIcon() {
-        return (h("ix-icon-button", { "aria-pressed": a11yBoolean(this.expanded), "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, icon: this.expanded ? iconDoubleChevronLeft : iconDoubleChevronRight, variant: "subtle-tertiary" }));
+        return (h("ix-icon-button", { "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, "aria-expanded": a11yBoolean(this.expanded), icon: this.expanded ? iconDoubleChevronLeft : iconDoubleChevronRight, variant: "subtle-tertiary" }));
     }
     getMenuIcon() {
         if (this.pinned || this.breakpoint === 'lg' || this.breakpoint === 'md') {
@@ -40,7 +40,7 @@ export class MenuExpandIcon {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: '45cdd3674fa759b54c5d0788cbd8711b4339bc2f', class: {
+        return (h(Host, { key: '60d58cfa658802593452a3f96a38686e0fab4039', class: {
                 expanded: this.expanded,
                 'ix-focusable': true,
             } }, this.getMenuIcon()));

package/dist/collection/components/menu/menu.css

@@ -1749,6 +1749,10 @@
 :host .tabs::-webkit-scrollbar {
   display: none;
 }
+:host .tabs:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: -1px;
+}
 :host .show-scrollbar {
   scrollbar-width: inherit;
 }
@@ -1760,6 +1764,20 @@
   display: block;
   position: relative;
   margin-bottom: 0.75rem;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+:host .menu-navigation {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+:host .menu-navigation.menu-navigation--fill {
+  flex: 1 1 auto;
+}
+:host .menu-navigation:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: -1px;
 }
 :host .tabs--shadow {
   opacity: 0;
@@ -1844,10 +1862,10 @@
   margin-top: auto;
 }
 :host .menu-buttons {
-  margin: 0.5rem 0 0 0.625rem;
+  margin: 0.75rem 0 0 0.625rem;
 }
-:host .menu-buttons > :last-child {
-  margin-bottom: 1rem;
+:host .menu-buttons:not(:empty) {
+  margin-bottom: 0.75rem;
 }
 
 :host(.breakpoint-sm) .menu:not(.expanded) {