@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/modal/modal.css

@@ -98,7 +98,8 @@
   top: 50%;
 }
 
-:host(.no-backdrop) dialog::backdrop {
+:host(.no-backdrop) dialog::backdrop,
+:host(.non-blocking) dialog::backdrop {
   background-color: transparent !important;
   -webkit-backdrop-filter: none !important;
           backdrop-filter: none !important;

package/dist/collection/components/modal/modal.js

@@ -1,13 +1,3 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
  *
@@ -20,61 +10,82 @@ import { h, Host, } from "@stencil/core";
 import { animate } from "animejs";
 import { a11yBoolean, a11yHostAttributes } from "../utils/a11y";
 import Animation from "../utils/animation";
-import { OnListener } from "../utils/listener";
+import { tryFocusElement } from "../utils/focus/focus-utilities";
+import { IX_MODAL_AUTOFOCUS_SELECTOR } from "../utils/modal/modal";
 import { waitForElement } from "../utils/waitForElement";
 export class Modal {
-    constructor() {
-        this.ariaAttributes = {};
-        this.isMouseDownInsideDialog = false;
-        /**
-         * Modal size
-         */
-        this.size = '360';
-        /**
-         * Should the modal animation be disabled
-         */
-        this.disableAnimation = false;
-        /**
-         * Hide the backdrop behind the modal dialog
-         */
-        this.hideBackdrop = false;
-        /**
-         * Dismiss modal on backdrop click
-         */
-        this.closeOnBackdropClick = false;
-        /**
-         * Centered modal
-         */
-        this.centered = false;
-        /**
-         * If set to true the modal cannot be closed by pressing the Escape key
-         */
-        this.disableEscapeClose = false;
-        this.modalVisible = false;
-    }
-    onKey(e) {
-        if (e.key === 'Escape') {
-            e.preventDefault();
-        }
-    }
+    ariaAttributes = {};
+    isMouseDownInsideDialog = false;
+    hostElement;
+    /**
+     * Modal size
+     */
+    size = '360';
+    /**
+     * Should the modal animation be disabled
+     */
+    disableAnimation = false;
+    /**
+     * Hide the backdrop behind the modal dialog
+     */
+    hideBackdrop = false;
+    /**
+     * Dismiss modal on backdrop click (outside the dialog panel).
+     * Ignored when **isNonBlocking** is `true`.
+     */
+    closeOnBackdropClick = false;
+    /**
+     * Is called before the modal is dismissed.
+     *
+     * - Return `true` to proceed in dismissing the modal
+     * - Return `false` to abort in dismissing the modal
+     */
+    beforeDismiss;
+    /**
+     * Centered modal
+     */
+    centered = false;
+    /**
+     * Non-modal dialog: page stays interactive, no lightbox or focus trap; `aria-modal` is `false`.
+     * Set before calling `showModal()`; changing while open is unsupported.
+     */
+    isNonBlocking = false;
+    /**
+     * Dialog close
+     */
+    dialogClose;
+    /**
+     * Dialog cancel
+     */
+    dialogDismiss;
+    modalVisible = false;
     get dialog() {
         return this.hostElement.shadowRoot.querySelector('dialog');
     }
     slideInModal() {
+        const dialog = this.dialog;
+        dialog.classList.remove('modal-open-settled');
         const duration = this.disableAnimation ? 0 : Animation.mediumTime;
         const translateY = this.centered ? ['-90%', '-50%'] : [0, 40];
-        animate(this.dialog, {
+        const markEntranceSettled = () => dialog.classList.add('modal-open-settled');
+        animate(dialog, {
             duration,
             opacity: [0, 1],
             translateY,
             translateX: ['-50%', '-50%'],
             easing: 'easeOutSine',
+            complete: markEntranceSettled,
         });
+        if (duration === 0) {
+            markEntranceSettled();
+        }
     }
     slideOutModal(completeCallback) {
+        const dialog = this.dialog;
+        dialog.classList.remove('modal-open-settled');
         const duration = this.disableAnimation ? 0 : Animation.mediumTime;
         const translateY = this.centered ? ['-50%', '-90%'] : [40, 0];
-        animate(this.dialog, {
+        animate(dialog, {
             duration,
             opacity: [1, 0],
             translateY,
@@ -118,11 +129,25 @@ export class Modal {
     onMouseUp(event) {
         const isMouseUpInsideDialog = this.isInsideDialog(event);
         if (this.closeOnBackdropClick &&
+            !this.isNonBlocking &&
             !this.isMouseDownInsideDialog &&
             !isMouseUpInsideDialog) {
-            this.dismissModal();
+            void this.dismissModal();
         }
     }
+    async scheduleInitialAutofocus() {
+        await new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    const direct = this.hostElement.querySelector(IX_MODAL_AUTOFOCUS_SELECTOR);
+                    if (direct) {
+                        tryFocusElement(direct, { focusVisible: true });
+                    }
+                    resolve();
+                });
+            });
+        });
+    }
     /**
      * Show the dialog
      */
@@ -130,10 +155,16 @@ export class Modal {
         try {
             const dialog = await waitForElement('dialog', this.hostElement.shadowRoot);
             this.modalVisible = true;
-            dialog.showModal();
+            if (this.isNonBlocking) {
+                dialog.show();
+            }
+            else {
+                dialog.showModal();
+            }
             this.slideInModal();
+            await this.scheduleInitialAutofocus();
         }
-        catch (_a) {
+        catch {
             console.error('HTMLDialogElement not existing');
         }
     }
@@ -166,17 +197,24 @@ export class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '4081b8a78aba8b671d6eab5119be700a9b0387cb', class: {
+        return (h(Host, { key: 'b40ae3d2505764659681551aaab811b4c8bfcc6f', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.hideBackdrop,
                 'align-center': this.centered,
-            } }, h("div", { key: 'a38bd205e6289acdcd76e8e416ea6dbfdb2643e0', class: "dialog-backdrop" }, h("dialog", { key: 'b45fa45874bd0cb1f4e658ed0c64db2b8ac7adab', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+                'non-blocking': this.isNonBlocking,
+            } }, h("div", { key: '5985f073d9b74b75838b3e592fe5254dfec3ea11', class: "dialog-backdrop" }, h("dialog", { key: '372dd029f7d41622559568d99fe28608e1806cab', "aria-modal": a11yBoolean(!this.isNonBlocking), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
                 modal: true,
                 [`modal-size-${this.size}`]: true,
-            }, onClose: () => this.dismissModal(), onMouseDown: (event) => this.onMouseDown(event), onMouseUp: (event) => this.onMouseUp(event), onCancel: (e) => {
+            }, onClose: () => this.dismissModal(), onMouseDown: (event) => this.onMouseDown(event), onMouseUp: (event) => this.onMouseUp(event), onKeyDown: (e) => {
+                // Non-blocking uses dialog.show(); Escape is not guaranteed to fire cancel like showModal().
+                if (this.isNonBlocking && e.key === 'Escape') {
+                    e.preventDefault();
+                    void this.dismissModal();
+                }
+            }, onCancel: (e) => {
                 e.preventDefault();
-                this.dismissModal();
-            } }, h("slot", { key: '1cb176bec05a6a957a216509730ded7814f97c01' })))));
+                void this.dismissModal();
+            } }, h("slot", { key: '405cfdcead12f17c5bc3534d9d160fddd69106a7' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -271,7 +309,7 @@ export class Modal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Dismiss modal on backdrop click"
+                    "text": "Dismiss modal on backdrop click (outside the dialog panel).\nIgnored when **isNonBlocking** is `true`."
                 },
                 "getter": false,
                 "setter": false,
@@ -321,7 +359,7 @@ export class Modal {
                 "attribute": "centered",
                 "defaultValue": "false"
             },
-            "disableEscapeClose": {
+            "isNonBlocking": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -333,12 +371,12 @@ export class Modal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If set to true the modal cannot be closed by pressing the Escape key"
+                    "text": "Non-modal dialog: page stays interactive, no lightbox or focus trap; `aria-modal` is `false`.\nSet before calling `showModal()`; changing while open is unsupported."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "disable-escape-close",
+                "reflect": true,
+                "attribute": "is-non-blocking",
                 "defaultValue": "false"
             }
         };
@@ -458,6 +496,3 @@ export class Modal {
     }
     static get elementRef() { return "hostElement"; }
 }
-__decorate([
-    OnListener('keydown', (self) => self.disableEscapeClose)
-], Modal.prototype, "onKey", null);

package/dist/collection/components/modal-content/modal-content.js

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class ModalContent {
     render() {
-        return (h(Host, { key: '60b3a1c2a24a678788c823dde41f743d9bfa5aa7' }, h("slot", { key: 'bba0935551ec0c9078c4ce867827bef053234cc2' })));
+        return (h(Host, { key: 'bdcc31e92318ad5f9b10a5ece22fc01f2506e200' }, h("slot", { key: 'a7af3070d7d9766ea450e4a75417b4ae0f1137d3' })));
     }
     static get is() { return "ix-modal-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-footer/modal-footer.js

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class ModalFooter {
     render() {
-        return (h(Host, { key: '939d74c51190e3dcb1e29cd6d69a5001cdd6eaec' }, h("slot", { key: '2805bc8ca2e78d57e7d961e80093dbe3f5dc8dc1' })));
+        return (h(Host, { key: '6d10985e1922b6bffbc82d758fc2c5d64e0af761' }, h("slot", { key: '438d07e19d688048e331c64ca62f08c67b7ce0ae' })));
     }
     static get is() { return "ix-modal-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-header/modal-header.css

@@ -77,6 +77,7 @@
 }
 :host .modal-title {
   flex-grow: 1;
+  overflow-wrap: anywhere;
 }
 :host .modal-close {
   align-self: flex-start;

package/dist/collection/components/modal-header/modal-header.js

@@ -10,19 +10,26 @@ import { h, Host, } from "@stencil/core";
 import { closestPassShadow } from "../utils/shadow-dom";
 import { iconClose } from "@siemens/ix-icons/icons";
 export class ModalHeader {
-    constructor() {
-        /**
-         * Hide the close button
-         */
-        this.hideClose = false;
-        /**
-         * ARIA label for the close icon button
-         * Will be set as aria-label on the nested HTML button element
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelCloseIconButton = 'Close modal';
-    }
+    hostElement;
+    /**
+     * Hide the close button
+     */
+    hideClose = false;
+    /**
+     * Icon of the header
+     */
+    icon;
+    /**
+     * ARIA label for the icon
+     */
+    ariaLabelIcon;
+    /**
+     * ARIA label for the close icon button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelCloseIconButton = 'Close modal';
     onIconChange(icon) {
         if (this.parentDialog) {
             if (icon) {
@@ -33,6 +40,16 @@ export class ModalHeader {
             }
         }
     }
+    /**
+     * Icon color
+     */
+    iconColor;
+    /**
+     * Emits when the close icon is clicked and closes the modal
+     * Can be prevented, in which case only the event is triggered, and the modal remains open
+     */
+    closeClick;
+    parentDialog;
     componentDidLoad() {
         this.parentDialog = closestPassShadow(this.hostElement, 'ix-modal');
         this.onIconChange(this.icon);
@@ -45,10 +62,11 @@ export class ModalHeader {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (h(Host, { key: 'fe31f33b0c3ce2cca9e5681978bd9200d894a526' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '04284e4fb5bf5c1255a36ca5cf42cf0a3993bdbe', class: "modal-title" }, h("ix-typography", { key: 'fe6b10d56e689087b4cc97e05908ef047a4cea2e', format: "h5" }, h("slot", { key: '65426838b385f9644ee48c7565ec0fe93b9c4764' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (h(Host, { key: '2840ba385c7ad659786f48564bf307c2290049ca' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '5e6ce56e0e76e527a3e71e66ea2a4ec2d22a2ed7', class: "modal-title" }, h("ix-typography", { key: 'cd8c3d8cdfbdfed8a1ab2285328c88985843a8b5', format: "h5" }, h("slot", { key: '1de70c68751fb8ece53890adf94b95c2bfcbd66d' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     static get is() { return "ix-modal-header"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["modal-header.scss"]
@@ -93,7 +111,7 @@ export class ModalHeader {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Icon of the Header"
+                    "text": "Icon of the header"
                 },
                 "getter": false,
                 "setter": false,
@@ -172,7 +190,7 @@ export class ModalHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits when close icon is clicked and closes the modal\nCan be prevented, in which case only the event is triggered, and the modal remains open"
+                    "text": "Emits when the close icon is clicked and closes the modal\nCan be prevented, in which case only the event is triggered, and the modal remains open"
                 },
                 "complexType": {
                     "original": "MouseEvent",

package/dist/collection/components/modal-loading/modal-loading.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalLoading {
     render() {
-        return (h(Host, { key: 'd323b6a4a1650629e0ac5338c97fd7b08929807f' }, h("ix-spinner", { key: '94eab908aa232f0f022da10da6313cbe07388a3c', variant: "primary" }), h("span", { key: 'a1d7732187718f8775d626e0a0be49fb7578bec6', class: 'loading-text' }, h("slot", { key: 'bdbc66e91cc7f9ada60a3cda2f0347b40237d739' }))));
+        return (h(Host, { key: 'dc1f6ceb8a80533b033c8a942ad226a827797f5e' }, h("ix-spinner", { key: 'cba70b4acd7faac7076ccab3505ba3bf77b43294', variant: "primary" }), h("span", { key: '7e391743781992496039e4d71e2344c79bc134df', class: 'loading-text' }, h("slot", { key: '5c08f0076249ca3d16b80e2d107cf2fb975e7e5b' }))));
     }
     static get is() { return "ix-modal-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.css

@@ -387,7 +387,7 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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;
@@ -414,6 +414,16 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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);
@@ -488,7 +498,7 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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;
@@ -515,13 +525,24 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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);
@@ -529,10 +550,6 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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);
@@ -581,12 +598,13 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
 }
 
 :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);
@@ -594,10 +612,6 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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);
@@ -646,12 +660,13 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
 }
 
 :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);
@@ -659,10 +674,6 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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);
@@ -711,12 +722,13 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
 }
 
 :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);
@@ -724,10 +736,6 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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);
@@ -776,12 +784,13 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
 }
 
 :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);
@@ -789,10 +798,6 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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);
@@ -841,12 +846,13 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
 }
 
 :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);
@@ -854,10 +860,6 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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);
@@ -906,12 +908,13 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
 }
 
 :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);
@@ -919,10 +922,6 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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);
@@ -971,12 +970,13 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
 }
 
 :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);
@@ -984,10 +984,6 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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);
@@ -1036,12 +1032,13 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
 }
 
 :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);
@@ -1049,10 +1046,6 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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);