@siemens/ix 5.0.0 → 5.1.0

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

@@ -570,6 +570,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.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.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

@@ -13,7 +13,7 @@ export class KeyValueList {
      */
     striped = false;
     render() {
-        return (h(Host, { key: 'b77626b4307e170ebcd609232d6b51e6352d77fc', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '5519febab149c0a10baf26a47fcb0cfecf14cfb2' })));
+        return (h(Host, { key: 'ac64d25e8d4038e99145c4badd28981e4fd5aea2', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '6445bc39f3c0c00811a4fa75cd7b12afde9627a9' })));
     }
     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

@@ -76,7 +76,7 @@ export class LayoutForm {
         });
     }
     render() {
-        return (h(Host, { key: 'fe057d2efd5bd08cfea04c9fa270f462b6883362' }, h("div", { key: 'd26f958f45b56d993527c00c552638352fbbfc17', class: "container" }, h("slot", { key: '6b27323636d5ef2b8be0900bf41f0807e99c0f53' }))));
+        return (h(Host, { key: 'c707c19699232702785f2f0593c1018b9b5e78e7' }, h("div", { key: 'cc72d9a30604068627beea36c736cfb1490fb4df', class: "container" }, h("slot", { key: '587763f535960efbbc9f8d6f62b28169b6f36ace' }))));
     }
     static get is() { return "ix-layout-auto"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,12 +21,12 @@ export class LayoutGrid {
      */
     columns = 12;
     render() {
-        return (h(Host, { key: 'ad1e96a96876525cbe9da91c13786d914bb3ce6b', class: {
+        return (h(Host, { key: '799b08194c2dfc38cbf4bd8c0e7d69f4cd42c577', 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: '8177f73aacd4da3cd8d52cb2cc16f6694e032851' })));
     }
     static get is() { return "ix-layout-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,13 +24,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: 'e30339cee917a58eefdcf6da77800ab06bff0675' }, h("a", { key: 'c1bd527ffc4a577decb3faf6c2348eed4fcc3b93', 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: '0f4601f33f9b48b76ab01ed863ca4755308541ec', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: '0e07c0bf6469a776cfa598b9ee24494f2afa2fe3', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: '471e61a08556e26bce42f032620a3c625ae9f702' })))));
+            } }, h("slot", { key: '2f2607089df3ca9bcf5f543e8f85ff987f2751a9' })))));
     }
     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) {