@siemens/ix 4.4.0 → 5.1.0

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

@@ -11,30 +11,54 @@ import { createMutationObserver } from "../utils/mutation-observer";
 import { hasSlottedElements } from "../utils/shadow-dom";
 import { iconChevronDownSmall, iconChevronUpSmall, } from "@siemens/ix-icons/icons";
 export class Group {
-    constructor() {
-        /**
-         * Prevent header from being selectable
-         */
-        this.suppressHeaderSelection = false;
-        /**
-         * Whether the group is expanded or collapsed. Defaults to false.
-         */
-        this.expanded = false;
-        /**
-         * Whether the group is selected.
-         */
-        this.selected = false;
-        /**
-         * Expand the group if the header is clicked
-         */
-        this.expandOnHeaderClick = false;
-        this.itemSelected = false;
-        this.slotSize = this.groupItems.length;
-        this.footerVisible = false;
-        this.showExpandCollapsedIcon = false;
-        this.hasDropdown = false;
-        this.observer = null;
-    }
+    hostElement;
+    /**
+     * Prevent header from being selectable
+     */
+    suppressHeaderSelection = false;
+    /**
+     * Group header
+     */
+    header;
+    /**
+     * Group header subtitle
+     */
+    subHeader;
+    /**
+     * Whether the group is expanded or collapsed. Defaults to false.
+     */
+    expanded = false;
+    /**
+     * Whether the group is selected.
+     */
+    selected = false;
+    /**
+     * The index of the selected group entry.
+     * If undefined no group item is selected.
+     */
+    index;
+    /**
+     * Expand the group if the header is clicked
+     */
+    expandOnHeaderClick = false;
+    /**
+     * Emits when whole group gets selected.
+     */
+    selectGroup;
+    /**
+     * Emits when group item gets selected.
+     */
+    selectItem;
+    /**
+     * Group expanded
+     */
+    expandedChanged;
+    itemSelected = false;
+    slotSize = 0;
+    footerVisible = false;
+    showExpandCollapsedIcon = false;
+    hasDropdown = false;
+    observer = null;
     selectedChanged(newSelected) {
         if (newSelected === false) {
             this.changeItemIndex();
@@ -47,8 +71,7 @@ export class Group {
         return Array.from(this.hostElement.querySelectorAll('ix-group-item:not(.footer)'));
     }
     get groupContent() {
-        var _a;
-        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.group-content');
+        return this.hostElement.shadowRoot?.querySelector('.group-content');
     }
     onExpandClick(event) {
         const oldExpanded = this.expanded;
@@ -96,8 +119,7 @@ export class Group {
         this.itemSelected = items.some((item) => item.selected);
     }
     onSlotChange() {
-        var _a;
-        const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="footer"]');
+        const slot = this.hostElement.shadowRoot?.querySelector('slot[name="footer"]');
         if (slot) {
             this.footerVisible = hasSlottedElements(slot);
         }
@@ -123,6 +145,7 @@ export class Group {
             childList: true,
         });
         this.checkDropdownSlot();
+        this.slotSize = this.groupItems.length;
     }
     disconnectedCallback() {
         if (this.observer) {
@@ -137,27 +160,26 @@ export class Group {
         }
     }
     render() {
-        return (h(Host, { key: '99b00ca8c88730036688974abd67ff0534dd4d17' }, h("div", { key: '47384431d36ce7cdc5a2e81ecd682d6a0dd13b53', class: {
+        return (h(Host, { key: 'd065bb1d37279005a3502e5261d0c6b0592ea47a' }, h("div", { key: '7d149368be2f9d72f9384f5969f269540161444d', class: {
                 'group-header': true,
                 expand: this.expanded,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: '68968fc5816ca0fef0ae658a6925cc6b8ee3479a', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'a26153957aa76d882d95a3f88318c01517078a64', class: {
+            }, tabindex: "0" }, h("div", { key: 'eaaf6a687c9553f7985e63e5459b4823f9920262', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '67b5527fcef1355812d942ee302809597307f476', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: '01427b28c1b873a1875bd4c2093fee6d900bdf89', class: "btn-expand-header" }, h("ix-icon", { key: '1feb76e98b4ebda01d902b76065cdcefa0dde5a4', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: '04531e1e6079ca2cd9b9e061af7b7cff39e56ad5', class: "btn-expand-header" }, h("ix-icon", { key: '8e269b8a32af709f46dadc5bf7819f5339702eae', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: '5c6232f9b9a36ccbfa2f0e9352a5e739e202e275', 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: '592d03499639a45183c8837b421a33bbffbae954', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: 'f666ce19d8441bd3afc40800128e6326da14615e' }, h("slot", { key: '96d9509e35fbf388d31fbc832fc31dd2167842a8', name: "dropdown" })))), h("div", { key: '3d6f649530d00fd19761bb84ed4bf8769b0bec14', class: {
+            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: 'e40416a2c68b331eed7686259749ad0387a01bc9', 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: '2c04121cdafcb93459ccc11016ed1c4182662a6d', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: '7e27de8765e03aa98e70f1b30c44473a95258a0e' }, h("slot", { key: '472f20892591d436232c1db7e396b74b68742027', name: "dropdown" })))), h("div", { key: 'c64f18662e441d11be9ac49dde219359dd65f6c0', class: {
                 'group-content': true,
-            } }, h("div", { key: 'cad4a7c42f5402400add10d1d5ac57174aa34b6e', style: {
+            } }, h("div", { key: '07da1f3ed9334a4b89833b2d9b284b967d3d8c4d', style: {
                 display: this.expanded ? 'contents' : 'none',
-            } }, h("slot", { key: '305a97c24f58db1e1d1264876c99316aceda6e8d', onSlotchange: () => {
-                var _a;
-                const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+            } }, h("slot", { key: '3c8291ab052f4a89122de4e8ca35671c814636d1', onSlotchange: () => {
+                const slot = this.hostElement.shadowRoot?.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), h("ix-group-item", { key: 'f19cce4aad2fc8465f57d94bb6a6b228204120e6', class: {
+            } }), h("ix-group-item", { key: 'a1ffdc4437fc26db17b9eae31b522422967cb2c1', class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, h("slot", { key: 'c073314bc4528f7559c8c1cfa43b88881d7a4e49', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            }, groupFooter: true, suppressSelection: true }, h("slot", { key: '25713f3beb605c9021d4b9a2ac51c3f02bec96db', 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

@@ -8,28 +8,51 @@
  */
 import { h, Host, } from "@stencil/core";
 export class GroupItem {
-    constructor() {
-        /**
-         * Supress the selection of the group
-         */
-        this.suppressSelection = false;
-        /**
-         * @internal
-         * Item represents the footer of the group
-         */
-        this.groupFooter = false;
-        /**
-         * Show selected state
-         */
-        this.selected = false;
-        /**
-         * Disable the group item.
-         * The elements tabindex attribute will get set accordingly.
-         *
-         * If false tabindex will be 0, -1 otherwise.
-         */
-        this.disabled = false;
-    }
+    hostElement;
+    /**
+     * Group item icon
+     */
+    icon;
+    /**
+     * ARIA label for the icon
+     */
+    ariaLabelIcon;
+    /**
+     * Group item text
+     */
+    text;
+    /**
+     * Group item secondary text
+     */
+    secondaryText;
+    /**
+     * Supress the selection of the group
+     */
+    suppressSelection = false;
+    /**
+     * @internal
+     * Item represents the footer of the group
+     */
+    groupFooter = false;
+    /**
+     * Show selected state
+     */
+    selected = false;
+    /**
+     * Disable the group item.
+     * The elements tabindex attribute will get set accordingly.
+     *
+     * If false tabindex will be 0, -1 otherwise.
+     */
+    disabled = false;
+    /**
+     * Selection changed
+     */
+    selectedChanged;
+    /**
+     * Index
+     */
+    index;
     clickListen() {
         if (this.suppressSelection || this.disabled) {
             return;

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

@@ -2,16 +2,40 @@ import { Host, h } from "@stencil/core";
 import { checkFieldClasses, createClassMutationObserver, } from "../utils/input";
 import { HelperText as HelperTextUtil } from "../field-wrapper/helper-text-util";
 export class HelperText {
-    constructor() {
-        this.validationResults = {
-            isInfo: false,
-            isInvalid: false,
-            isValid: false,
-            isWarning: false,
-            isInvalidByRequired: false,
-        };
-        this.observer = new MutationObserver(() => this.checkForRequired());
-    }
+    hostElement;
+    /**
+     * The id of the form element that the label is associated with
+     */
+    htmlFor;
+    /**
+     * Show text below the field component
+     */
+    helperText;
+    /**
+     * Error text for the field component
+     */
+    invalidText;
+    /**
+     * Valid text for the field component
+     */
+    validText;
+    /**
+     * Info text for the field component
+     */
+    infoText;
+    /**
+     * Warning text for the field component
+     */
+    warningText;
+    validationResults = {
+        isInfo: false,
+        isInvalid: false,
+        isValid: false,
+        isWarning: false,
+        isInvalidByRequired: false,
+    };
+    observer = new MutationObserver(() => this.checkForRequired());
+    classObserver;
     connectedCallback() {
         this.observer.observe(window.document, {
             childList: true,
@@ -43,11 +67,12 @@ export class HelperText {
         this.validationResults = checkFieldClasses(forElement);
     }
     render() {
-        return (h(Host, { key: 'aa99794dc7b9c59abf2fdd8f2ac8112cf705a5ad' }, h(HelperTextUtil, Object.assign({ key: 'c3e36ebbae8617aa43cf2616242b035739ab4cc7', helperText: this.helperText,
+        return (h(Host, { key: 'a38073cf4f6da8c8e91927cc14e194243c9f8acf' }, h(HelperTextUtil, { key: 'aad82c0c2704ac0b491c3f53e0faa52033706318', helperText: this.helperText,
             invalidText: this.invalidText,
             validText: this.validText,
             infoText: this.infoText,
-            warningText: this.warningText }, this.validationResults))));
+            warningText: this.warningText,
+            ...this.validationResults })));
     }
     static get is() { return "ix-helper-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,5 +9,5 @@
 import { h } from "@stencil/core";
 import { BaseButton } from "../button/base-button";
 export function BaseIconButton(props) {
-    return h(BaseButton, Object.assign({}, props, { type: "button" }));
+    return h(BaseButton, { ...props, type: "button" });
 }

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;
@@ -182,6 +182,16 @@
   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 {
   --ix-button-border-radius-left: var(--theme-btn--border-radius);
   --ix-button-border-radius-right: var(--theme-btn--border-radius);
@@ -256,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;
@@ -283,13 +293,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-primary {
+  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-primary, :host .btn-primary.focus, :host .btn-primary:focus-visible {
+:host .btn-primary {
   background-color: var(--theme-btn-primary--background);
   color: var(--theme-btn-primary--color);
   --ix-button-color: var(--theme-btn-primary--color);
@@ -297,10 +318,6 @@
   border-color: var(--theme-btn-primary--border-color);
   border-style: solid;
 }
-:host .btn-primary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-primary.selected {
   background-color: var(--theme-btn-primary--background--pressed);
   color: var(--theme-btn-primary--color--pressed);
@@ -349,12 +366,13 @@
 }
 
 :host .btn-secondary {
+  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-secondary, :host .btn-secondary.focus, :host .btn-secondary:focus-visible {
+:host .btn-secondary {
   background-color: var(--theme-btn-secondary--background);
   color: var(--theme-btn-secondary--color);
   --ix-button-color: var(--theme-btn-secondary--color);
@@ -362,10 +380,6 @@
   border-color: var(--theme-btn-secondary--border-color);
   border-style: solid;
 }
-:host .btn-secondary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-secondary.selected {
   background-color: var(--theme-btn-secondary--background--pressed);
   color: var(--theme-btn-secondary--color--pressed);
@@ -414,12 +428,13 @@
 }
 
 :host .btn-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-tertiary, :host .btn-tertiary.focus, :host .btn-tertiary:focus-visible {
+:host .btn-tertiary {
   background-color: var(--theme-btn-tertiary--background);
   color: var(--theme-btn-tertiary--color);
   --ix-button-color: var(--theme-btn-tertiary--color);
@@ -427,10 +442,6 @@
   border-color: var(--theme-btn-tertiary--border-color);
   border-style: solid;
 }
-:host .btn-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-tertiary.selected {
   background-color: var(--theme-btn-tertiary--background--pressed);
   color: var(--theme-btn-tertiary--color--pressed);
@@ -479,12 +490,13 @@
 }
 
 :host .btn-subtle-primary {
+  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-primary, :host .btn-subtle-primary.focus, :host .btn-subtle-primary:focus-visible {
+:host .btn-subtle-primary {
   background-color: var(--theme-btn-subtle-primary--background);
   color: var(--theme-btn-subtle-primary--color);
   --ix-button-color: var(--theme-btn-subtle-primary--color);
@@ -492,10 +504,6 @@
   border-color: var(--theme-btn-subtle-primary--border-color);
   border-style: solid;
 }
-:host .btn-subtle-primary: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-primary.selected {
   background-color: var(--theme-btn-subtle-primary--background--pressed);
   color: var(--theme-btn-subtle-primary--color--pressed);
@@ -544,12 +552,13 @@
 }
 
 :host .btn-subtle-secondary {
+  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-secondary, :host .btn-subtle-secondary.focus, :host .btn-subtle-secondary:focus-visible {
+:host .btn-subtle-secondary {
   background-color: var(--theme-btn-subtle-secondary--background);
   color: var(--theme-btn-subtle-secondary--color);
   --ix-button-color: var(--theme-btn-subtle-secondary--color);
@@ -557,10 +566,6 @@
   border-color: var(--theme-btn-subtle-secondary--border-color);
   border-style: solid;
 }
-:host .btn-subtle-secondary: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-secondary.selected {
   background-color: var(--theme-btn-subtle-secondary--background--pressed);
   color: var(--theme-btn-subtle-secondary--color--pressed);
@@ -609,12 +614,13 @@
 }
 
 :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);
@@ -622,10 +628,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);
@@ -674,12 +676,13 @@
 }
 
 :host .btn-danger-primary {
+  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-danger-primary, :host .btn-danger-primary.focus, :host .btn-danger-primary:focus-visible {
+:host .btn-danger-primary {
   background-color: var(--theme-btn-danger-primary--background);
   color: var(--theme-btn-danger-primary--color);
   --ix-button-color: var(--theme-btn-danger-primary--color);
@@ -687,10 +690,6 @@
   border-color: var(--theme-btn-danger-primary--border-color);
   border-style: solid;
 }
-:host .btn-danger-primary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-danger-primary.selected {
   background-color: var(--theme-btn-danger-primary--background--pressed);
   color: var(--theme-btn-danger-primary--color--pressed);
@@ -739,12 +738,13 @@
 }
 
 :host .btn-danger-secondary {
+  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-danger-secondary, :host .btn-danger-secondary.focus, :host .btn-danger-secondary:focus-visible {
+:host .btn-danger-secondary {
   background-color: var(--theme-btn-danger-secondary--background);
   color: var(--theme-btn-danger-secondary--color);
   --ix-button-color: var(--theme-btn-danger-secondary--color);
@@ -752,10 +752,6 @@
   border-color: var(--theme-btn-danger-secondary--border-color);
   border-style: solid;
 }
-:host .btn-danger-secondary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-danger-secondary.selected {
   background-color: var(--theme-btn-danger-secondary--background--pressed);
   color: var(--theme-btn-danger-secondary--color--pressed);
@@ -804,12 +800,13 @@
 }
 
 :host .btn-danger-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-danger-tertiary, :host .btn-danger-tertiary.focus, :host .btn-danger-tertiary:focus-visible {
+:host .btn-danger-tertiary {
   background-color: var(--theme-btn-danger-tertiary--background);
   color: var(--theme-btn-danger-tertiary--color);
   --ix-button-color: var(--theme-btn-danger-tertiary--color);
@@ -817,10 +814,6 @@
   border-color: var(--theme-btn-danger-tertiary--border-color);
   border-style: solid;
 }
-:host .btn-danger-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-danger-tertiary.selected {
   background-color: var(--theme-btn-danger-tertiary--background--pressed);
   color: var(--theme-btn-danger-tertiary--color--pressed);