@siemens/ix 4.4.0 → 5.1.0

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

@@ -467,7 +467,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
   left: var(--theme-input--border-thickness);
 }
 :host .end-container {
-  right: calc(var(--theme-input--border-thickness) + 0.125rem);
+  right: 0.25rem;
 }
 :host .start-container ::slotted(*) {
   margin-left: 0.5rem;
@@ -480,14 +480,14 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
   margin-left: 0;
 }
 :host .end-container ::slotted(*) {
-  margin-right: 0.5rem;
+  margin-right: calc(0.5rem - 0.25rem);
 }
 :host .end-container ::slotted(ix-icon.size-24),
 :host .end-container ::slotted(ix-icon-button.btn-icon-16) {
-  margin-right: 0.25rem;
+  margin-right: calc(0.25rem - 0.25rem);
 }
 :host .end-container ::slotted(ix-icon-button.btn-icon-32) {
-  margin-right: 0;
+  margin-right: calc(0rem - 0.25rem);
 }
 :host .bottom-text {
   margin-top: 0.25rem;

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

@@ -27,41 +27,129 @@ let sequentialInstanceId = 0;
  * @form-ready
  */
 export class Textarea {
-    constructor() {
-        /**
-         * The value of the textarea field.
-         */
-        this.value = '';
-        /**
-         * Determines if the textarea field is required.
-         */
-        this.required = false;
-        /**
-         * Determines if the textarea field is disabled.
-         */
-        this.disabled = false;
-        /**
-         * Determines if the textarea field is readonly.
-         */
-        this.readonly = false;
-        /**
-         * Determines the resize behavior of the textarea field.
-         * Resizing can be enabled in one direction, both directions or completely disabled.
-         */
-        this.resizeBehavior = 'both';
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
-        this.isInvalidByRequired = false;
-        this.textAreaRef = makeRef(() => {
-            this.initResizeObserver();
-        });
-        this.inputId = `ix-textarea-${sequentialInstanceId++}`;
-        this.touched = false;
-        this.isManuallyResized = false;
-        this.isProgrammaticResize = false;
-    }
+    hostElement;
+    formInternals;
+    /**
+     * The name of the textarea field.
+     */
+    name;
+    /**
+     * The placeholder text for the textarea field.
+     */
+    placeholder;
+    /**
+     * The value of the textarea field.
+     */
+    value = '';
+    /**
+     * Determines if the textarea field is required.
+     */
+    required = false;
+    /**
+     * Determines if the textarea field is disabled.
+     */
+    disabled = false;
+    /**
+     * Determines if the textarea field is readonly.
+     */
+    readonly = false;
+    /**
+     * The helper text for the textarea field.
+     */
+    helperText;
+    /**
+     * The info text for the textarea field.
+     */
+    infoText;
+    /**
+     * Determines if the text should be displayed as a tooltip.
+     */
+    showTextAsTooltip;
+    /**
+     * The valid text for the textarea field.
+     */
+    validText;
+    /**
+     * The warning text for the textarea field.
+     */
+    warningText;
+    /**
+     * The label for the textarea field.
+     */
+    label;
+    /**
+     * The error text for the textarea field.
+     */
+    invalidText;
+    /**
+     * The height of the textarea field (e.g. "52px").
+     * Will take precedence over `textareaRows` prop if both are set.
+     */
+    textareaHeight;
+    /**
+     * The width of the textarea field (e.g. "200px").
+     * Will take precedence over `textareaCols` prop if both are set.
+     */
+    textareaWidth;
+    /**
+     * The height of the textarea specified by number of rows.
+     * Will be overridden by `textareaHeight` prop if both are set.
+     */
+    textareaRows;
+    /**
+     * The width of the textarea specified by number of characters.
+     * Will be overridden by `textareaWidth` prop if both are set.
+     */
+    textareaCols;
+    /**
+     * Determines the resize behavior of the textarea field.
+     * Resizing can be enabled in one direction, both directions or completely disabled.
+     */
+    resizeBehavior = 'both';
+    /**
+     * The maximum length of the textarea field.
+     */
+    maxLength;
+    /**
+     * The minimum length of the textarea field.
+     */
+    minLength;
+    /**
+     * Event emitted when the value of the textarea field changes.
+     */
+    valueChange;
+    /**
+     * Event emitted when the validity state of the textarea field changes.
+     */
+    validityStateChange;
+    /**
+     * Event emitted when the textarea field loses focus.
+     */
+    ixBlur;
+    /**
+     * Event emitted when the textarea field loses focus and the value has changed.
+     *@since 4.4.0
+     */
+    ixChange;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
+    isInvalidByRequired = false;
+    textAreaRef = makeRef(() => {
+        this.initResizeObserver();
+    });
+    inputId = `ix-textarea-${sequentialInstanceId++}`;
+    touched = false;
+    /** @internal */
+    initialValue;
+    resizeObserver;
+    isManuallyResized = false;
+    manualHeight;
+    manualWidth;
+    isProgrammaticResize = false;
+    lastObservedInlineHeight;
+    lastObservedInlineWidth;
     updateClassMappings(result) {
         mapValidationResult(this, result);
     }
@@ -76,8 +164,7 @@ export class Textarea {
         this.updateFormInternalValue(this.value);
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver?.disconnect();
     }
     resetManualResizeState() {
         this.isManuallyResized = false;
@@ -93,8 +180,7 @@ export class Textarea {
             textarea.style.width !== this.lastObservedInlineWidth);
     }
     initResizeObserver() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver?.disconnect();
         const textarea = this.textAreaRef.current;
         if (!textarea)
             return;
@@ -174,11 +260,10 @@ export class Textarea {
         return normalizeCssDimension(this.textareaWidth);
     }
     render() {
-        var _a;
-        return (h(Host, { key: '0ec2ec18091bec45a0ade9a3bb6aeea24866291e', class: {
+        return (h(Host, { key: '25fd15e33b307ef6679fa4ecb743675e193b5c66', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '9a481da22f3dc4ba2efa40b5aff112cf79a00ada', htmlForLabel: this.inputId, 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: '28f2de84b3bd25e400ea3844a6bb5d6d7408c123', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)), h("div", { key: '078f995e33935765b8ed70f55230c60c112a77f1', class: "input-wrapper" }, h(TextareaElement, { key: '9ca194b673a022c166e85b5fd89728bf968f3cec', 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

@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Host, h } from "@stencil/core";
+export class IxPlayground {
+    render() {
+        return h(Host, { key: 'd20bb68c63a8395efe6aabc279e176d3e4cc29ae' });
+    }
+    static get is() { return "ix-playground"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ix-playground.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ix-playground.css"]
+        };
+    }
+}

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

@@ -11,14 +11,30 @@ import { h, Host } from "@stencil/core";
  * @slot custom-value - Optional custom value at key value instead of text value
  */
 export class KeyValue {
-    constructor() {
-        /**
-         * Optional key value label position - 'top' or 'left'
-         */
-        this.labelPosition = 'top';
-    }
+    /**
+     * Optional key value icon
+     */
+    icon;
+    /**
+     * ARIA label for the icon
+     *
+     * @since 3.2.0
+     */
+    ariaLabelIcon;
+    /**
+     * Key value label
+     */
+    label;
+    /**
+     * Optional key value label position - 'top' or 'left'
+     */
+    labelPosition = 'top';
+    /**
+     * Optional key value text value
+     */
+    value;
     render() {
-        return (h(Host, { key: 'ee855752985c8321f4f9608cb957acd093293a9f', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { key: '6bfb94d5df575189c0df6e86cd65ea25a2dddecc', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), h("div", { key: '028c1ca00511298ae99c1088a2800c0b7ccd97bd', class: "keyValue__content" }, h("div", { key: '1b61165be2e1462f3d18e325236f9175b3a84a0d', class: "content__label" }, this.label), h("div", { key: 'd778bac4980281cce97bade4247b8f3b62191e1b', 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

@@ -8,14 +8,12 @@
  */
 import { h, Host } from "@stencil/core";
 export class KeyValueList {
-    constructor() {
-        /**
-         * Optional striped key value list style
-         */
-        this.striped = false;
-    }
+    /**
+     * Optional striped key value list style
+     */
+    striped = false;
     render() {
-        return (h(Host, { key: '8ac8c1edacddbe11072e692c165c338bdaa6fcdf', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '844c573286e6022f4d3f53086b584425306f7f1e' })));
+        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

@@ -9,16 +9,38 @@
 import { iconAlarm, iconWarning } from "@siemens/ix-icons/icons";
 import { h, Host } from "@stencil/core";
 export class Kpi {
-    constructor() {
-        /**
-         *
-         */
-        this.state = 'neutral';
-        /**
-         *
-         */
-        this.orientation = 'horizontal';
-    }
+    /**
+     *
+     */
+    label;
+    /**
+     * ARIA label for the alarm icon
+     *
+     * @since 3.2.0
+     */
+    ariaLabelAlarmIcon;
+    /**
+     * ARIA label for the warning icon
+     *
+     * @since 3.2.0
+     */
+    ariaLabelWarningIcon;
+    /**
+     *
+     */
+    value;
+    /**
+     *
+     */
+    unit;
+    /**
+     *
+     */
+    state = 'neutral';
+    /**
+     *
+     */
+    orientation = 'horizontal';
     getStateIcon() {
         switch (this.state) {
             case 'alarm':
@@ -37,13 +59,13 @@ export class Kpi {
         return tooltip;
     }
     render() {
-        return (h(Host, { key: '66e7a14d365489072d53128deddfe610ea2c0589', title: this.getTooltipText(), tabindex: "1", class: {
+        return (h(Host, { key: '5efa239dd8c91b6661566c235f020900d0df9357', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, h("div", { key: '724d4ad85701d09ad46ad85d5d62150195545cb1', class: {
+            } }, h("div", { key: 'fc4d4c1ec7aa129aaf064809052e45e953bee223', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, h("span", { key: '581ec9d9dac67105f5d92fc714511a1578d0833d', class: "kpi-label" }, this.getStateIcon(), h("span", { key: 'a81cb7fe8322e8d0682527c7d961a4d1fb32fd58', class: "kpi-label-text" }, this.label)), h("span", { key: 'ed7cefc54de202ccab0e9d1ec1adc42eb74f6f78', class: "kpi-value-container" }, h("span", { key: 'cade7321b2d3d1dc564480b3ad7f769f079b84d1', 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,19 +1,18 @@
 import { Host, h } from "@stencil/core";
 export class LayoutForm {
-    constructor() {
-        /**
-         * Defines the layout of the form.
-         */
-        this.layout = [
-            { minWidth: '0', columns: 1 },
-            { minWidth: '48em', columns: 2 },
-        ];
-        this.mediaQueryList = [];
-        this.observer = new MutationObserver(() => this.calculateGridTemplateColumns());
-        this.resizeObserver = new ResizeObserver(() => {
-            this.calculateGridTemplateColumns();
-        });
-    }
+    hostElement;
+    /**
+     * Defines the layout of the form.
+     */
+    layout = [
+        { minWidth: '0', columns: 1 },
+        { minWidth: '48em', columns: 2 },
+    ];
+    mediaQueryList = [];
+    observer = new MutationObserver(() => this.calculateGridTemplateColumns());
+    resizeObserver = new ResizeObserver(() => {
+        this.calculateGridTemplateColumns();
+    });
     connectedCallback() {
         this.observer.observe(this.hostElement, {
             childList: true,
@@ -77,7 +76,7 @@ export class LayoutForm {
         });
     }
     render() {
-        return (h(Host, { key: 'e80a4427592546a5c5155d23108840ec2e34ecd3' }, h("div", { key: 'cf63d295988d17bf976bfddd13c13f8987b2ca1a', class: "container" }, h("slot", { key: '0eaa6a54b56fa3f43adde3620178ccd25447507e' }))));
+        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

@@ -8,27 +8,25 @@
  */
 import { h, Host } from "@stencil/core";
 export class LayoutGrid {
-    constructor() {
-        /**
-         * The grid will not have any horizontal padding
-         */
-        this.noMargin = false;
-        /**
-         * Grid gap
-         */
-        this.gap = '24';
-        /**
-         * Overwrite the default number of columns. Choose between 2 and 12 columns.
-         */
-        this.columns = 12;
-    }
+    /**
+     * The grid will not have any horizontal padding
+     */
+    noMargin = false;
+    /**
+     * Grid gap
+     */
+    gap = '24';
+    /**
+     * Overwrite the default number of columns. Choose between 2 and 12 columns.
+     */
+    columns = 12;
     render() {
-        return (h(Host, { key: '7ca75d3fb578d30d3b8e3d5d4455123ee7344456', 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: '566e2bf1294f8780e4aedb8e2874bd2f216d3712' })));
+            } }, 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

@@ -9,26 +9,28 @@
 import { iconChevronRightSmall } from "@siemens/ix-icons/icons";
 import { h, Host } from "@stencil/core";
 export class LinkButton {
-    constructor() {
-        /**
-         * Disable the link button
-         */
-        this.disabled = false;
-        /**
-         * Specifies where to open the link
-         *
-         * https://www.w3schools.com/html/html_links.asp
-         */
-        this.target = '_self';
-    }
+    /**
+     * Disable the link button
+     */
+    disabled = false;
+    /**
+     * Url for the link button
+     */
+    url;
+    /**
+     * Specifies where to open the link
+     *
+     * https://www.w3schools.com/html/html_links.asp
+     */
+    target = '_self';
     render() {
-        return (h(Host, { key: '4d24f0a12d133ab58cb2a873536e68db17df2d5a' }, h("a", { key: '0585700d404cf2d49597085527608c6db40ea97e', 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: '68d6611903eec80a879d4bfbb90a71fcdd05d5a0', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: '4e4b66cb6cd469f56d9029a0ddbf5a44ea838128', 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: 'eb961e003cfa95ceaf0033a19d1e12ff92b7f78f' })))));
+            } }, 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;
@@ -166,13 +166,24 @@
   cursor: default;
 }
 
+:host(.ix-focused) .btn {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+
+:host .btn:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+
 :host .btn-subtle-tertiary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-subtle-tertiary, :host .btn-subtle-tertiary.focus, :host .btn-subtle-tertiary:focus-visible {
+:host .btn-subtle-tertiary {
   background-color: var(--theme-btn-subtle-tertiary--background);
   color: var(--theme-btn-subtle-tertiary--color);
   --ix-button-color: var(--theme-btn-subtle-tertiary--color);
@@ -180,10 +191,6 @@
   border-color: var(--theme-btn-subtle-tertiary--border-color);
   border-style: solid;
 }
-:host .btn-subtle-tertiary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-subtle-tertiary.selected {
   background-color: var(--theme-btn-subtle-tertiary--background--pressed);
   color: var(--theme-btn-subtle-tertiary--color--pressed);