@siemens/ix 4.4.0 → 5.0.0

package/dist/esm/ix-message-bar.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BEPo7U1W.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Ca5WUunf.js';
 import { a as animate } from './anime.esm-DhE1t8Qh.js';
-import { p as iconClose, y as iconNotification, b as iconInfo, c as iconSuccess, a as iconWarning, z as iconWarningRhomb, i as iconError } from './index-BBzEV-f4.js';
+import { B as iconNotification, d as iconInfo, a as iconSuccess, c as iconWarning, C as iconWarningRhomb, b as iconError, y as iconClose } from './index-Cl7fhG1I.js';
 
 const messageBarCss = () => `:host{margin:0.5rem 0.5rem 0rem 0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}:host .alarm{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .critical{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-critical)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .success{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-success)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .neutral{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-neutral)}:host .primary{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-primary)}:host .message-content{flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:normal;white-space:normal}:host ix-icon{margin-top:0.25rem}:host .message-bar-hidden{display:none}`;
 
@@ -9,15 +9,37 @@ const MessageBar = class {
         registerInstance(this, hostRef);
         this.closedChange = createEvent(this, "closedChange", 7);
         this.closeAnimationCompleted = createEvent(this, "closeAnimationCompleted", 7);
-        /**
-         * Specifies the type of the alert.
-         */
-        this.type = 'info';
-        /**
-         * If true, close button is disabled and alert cannot be dismissed by the user
-         */
-        this.persistent = false;
     }
+    /**
+     * Specifies the type of the alert.
+     */
+    type = 'info';
+    /**
+     * If true, close button is disabled and alert cannot be dismissed by the user
+     */
+    persistent = false;
+    /**
+     * An event emitted when the close button is clicked
+     */
+    closedChange;
+    /**
+     * An event emitted when the close animation is completed
+     */
+    closeAnimationCompleted;
+    icon;
+    color;
+    static duration = 300;
+    static messageTypeConfigs = {
+        //TODO(IX-3400): Replace icon colors with proper CSS variables when available
+        alarm: { icon: iconError, color: 'color-alarm' },
+        critical: { icon: iconWarningRhomb, color: 'color-critical' },
+        warning: { icon: iconWarning, color: 'color-warning-text' },
+        success: { icon: iconSuccess, color: 'color-success' },
+        info: { icon: iconInfo, color: 'color-info' },
+        neutral: { icon: iconNotification, color: 'color-neutral' },
+        primary: { icon: iconNotification, color: 'color-primary' },
+    };
+    divElement;
     componentWillRender() {
         const config = MessageBar.messageTypeConfigs[this.type];
         if (config) {
@@ -40,24 +62,13 @@ const MessageBar = class {
         }
     }
     render() {
-        return (h(Host, { key: '77cde4e0a2aa39b0838ccef1fe84dcd85a99f0e1' }, h("div", { key: '319882aba72c886393d8162442a56dc8404ed386', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: 'a204e1952605dc54532a3a862c8d00f9c049727d', color: this.color, name: this.icon }), h("div", { key: 'a1870021581d39097b24fae111a0f3418516cc1b', class: "message-content" }, h("slot", { key: '96e9f8283842a5ef183e62b0b49ea879a61f303e' })), !this.persistent && (h("ix-icon-button", { key: 'a136f9c0b1b557c3f789b569bbef64802f70cc26', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (h(Host, { key: '22bbc355ba3fca3209fab0491ae186f59bb64b02' }, h("div", { key: 'a84b47392ddfd8a8b0863ce99aa17985fbf39b4d', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '6528c7bd5a8b484858c97ca0e072704dcf37ad1c', color: this.color, name: this.icon }), h("div", { key: '07eed52e33baa107ebdebb10ef478d775901faf3', class: "message-content" }, h("slot", { key: 'cd5981304f6998d55edc38fa3fb0c67e139b8278' })), !this.persistent && (h("ix-icon-button", { key: 'ac6a235e1080bbb942c102f7c0e5c04672176557', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }
             }, "data-testid": "close-btn" })))));
     }
 };
-MessageBar.duration = 300;
-MessageBar.messageTypeConfigs = {
-    //TODO(IX-3400): Replace icon colors with proper CSS variables when available
-    alarm: { icon: iconError, color: 'color-alarm' },
-    critical: { icon: iconWarningRhomb, color: 'color-critical' },
-    warning: { icon: iconWarning, color: 'color-warning-text' },
-    success: { icon: iconSuccess, color: 'color-success' },
-    info: { icon: iconInfo, color: 'color-info' },
-    neutral: { icon: iconNotification, color: 'color-neutral' },
-    primary: { icon: iconNotification, color: 'color-primary' },
-};
 MessageBar.style = messageBarCss();
 
 export { MessageBar as ix_message_bar };

package/dist/esm/ix-modal-content_2.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-BEPo7U1W.js';
-import { a as closestPassShadow } from './shadow-dom-i60z1FJC.js';
-import { p as iconClose } from './index-BBzEV-f4.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-Ca5WUunf.js';
+import { b as closestPassShadow } from './shadow-dom-BIe8Nw9M.js';
+import { y as iconClose } from './index-Cl7fhG1I.js';
 
 const modalContentCss = () => `:host{display:block;position:relative;overflow:auto;padding:0 0.5rem 0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}`;
 
@@ -9,7 +9,7 @@ const ModalContent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '60b3a1c2a24a678788c823dde41f743d9bfa5aa7' }, h("slot", { key: 'bba0935551ec0c9078c4ce867827bef053234cc2' })));
+        return (h(Host, { key: '91592e2a2681326a99cafd1709581a29ecf48d61' }, h("slot", { key: '259ab95ce19cafdc7dbbe67c362e424590fe02c8' })));
     }
 };
 ModalContent.style = modalContentCss();
@@ -20,18 +20,27 @@ const ModalHeader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.closeClick = createEvent(this, "closeClick", 7);
-        /**
-         * 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';
     }
+    get hostElement() { return getElement(this); }
+    /**
+     * 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) {
@@ -42,6 +51,16 @@ const ModalHeader = class {
             }
         }
     }
+    /**
+     * 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);
@@ -54,9 +73,9 @@ const ModalHeader = class {
         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: 'a0e2437fa84c933cb035e3f756f35c852a629411' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: 'ed879eadde24489324a857524b2dcdda2daf553d', class: "modal-title" }, h("ix-typography", { key: 'f6058f099376e581e2c9d34f880dca129cb83e04', format: "h5" }, h("slot", { key: '25d3602826270d81e5d8c423fc197bc0e5fa6209' }))), !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));
     }
-    get hostElement() { return getElement(this); }
+    static get delegatesFocus() { return true; }
     static get watchers() { return {
         "icon": [{
                 "onIconChange": 0

package/dist/esm/ix-modal-footer.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BEPo7U1W.js';
+import { r as registerInstance, h, H as Host } from './index-Ca5WUunf.js';
 
 const modalFooterCss = () => `:host{display:flex;padding:0.5rem;justify-content:flex-end;align-items:center;gap:0.5rem;align-self:stretch}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}`;
 
@@ -7,7 +7,7 @@ const ModalFooter = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '939d74c51190e3dcb1e29cd6d69a5001cdd6eaec' }, h("slot", { key: '2805bc8ca2e78d57e7d961e80093dbe3f5dc8dc1' })));
+        return (h(Host, { key: 'bab5a43ac92a13caca46d241091c27c773990aba' }, h("slot", { key: 'fefe386636d486a7e1d4b35a23eafe0d04b7270c' })));
     }
 };
 ModalFooter.style = modalFooterCss();

package/dist/esm/ix-modal-loading.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BEPo7U1W.js';
+import { r as registerInstance, h, H as Host } from './index-Ca5WUunf.js';
 
 const modalLoadingCss = () => `:host{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem;overflow:hidden}:host .loading-text{display:block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`;
 
@@ -7,7 +7,7 @@ const ModalLoading = class {
         registerInstance(this, hostRef);
     }
     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: 'dac65dc36124b038728e843240d126432d85e987' }, h("ix-spinner", { key: '639371732304b733f79cf8498e46442ff6a442df', variant: "primary" }), h("span", { key: 'a9bf046b8c00552a4135cc5046789027abd1803e', class: 'loading-text' }, h("slot", { key: '362185ef3806ddb57c90f6fdf776cb3563baf903' }))));
     }
 };
 ModalLoading.style = modalLoadingCss();

package/dist/esm/ix-modal.entry.js

@@ -1,8 +1,10 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BEPo7U1W.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-Ca5WUunf.js';
 import { a as animate } from './anime.esm-DhE1t8Qh.js';
-import { b as a11yHostAttributes, a as a11yBoolean } from './a11y-DAzBNVe7.js';
-import { A as Animation } from './animation-BLaucX4x.js';
-import { O as OnListener } from './listener-DcAn-vyA.js';
+import { b as a11yHostAttributes, a as a11yBoolean } from './a11y-B5k8YVR0.js';
+import { A as Animation } from './animation-DNIQ2C1K.js';
+import { t as tryFocusElement } from './focus-utilities-DnaItyVQ.js';
+import { I as IX_MODAL_AUTOFOCUS_SELECTOR } from './modal-DaGSr1j4.js';
+import './typed-event-CWshStHZ.js';
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
@@ -33,74 +35,86 @@ function waitForElement(selector, doc, timeout = 3000) {
     });
 }
 
-const modalCss = () => `::backdrop{background:var(--theme-color-lightbox, rgba(0, 0, 0, 0.5490196078))}:focus-visible{outline:none !important}:host{display:none}:host dialog{--ix-dialog-padding:1rem;margin:0;padding:var(--ix-dialog-padding);padding-top:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));padding-bottom:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom));left:50%}:host .modal{display:flex;flex-direction:column;position:fixed;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all;overflow-wrap:break-word}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{border-radius:0;left:0 !important;top:0 !important;transform:none !important;box-shadow:none;--ix-dialog-full-screen-height:calc(     var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)   );width:calc(100% - var(--ix-dialog-padding) * 2);min-width:calc(100% - var(--ix-dialog-padding) * 2);max-width:calc(100% - var(--ix-dialog-padding) * 2);min-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height));max-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height))}:host dialog.modal-size-full-screen::backdrop{background:var(--theme-modal--background)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:3rem}`;
+const modalCss = () => `::backdrop{background:var(--theme-color-lightbox, rgba(0, 0, 0, 0.5490196078))}:focus-visible{outline:none !important}:host{display:none}:host dialog{--ix-dialog-padding:1rem;margin:0;padding:var(--ix-dialog-padding);padding-top:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));padding-bottom:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom));left:50%}:host .modal{display:flex;flex-direction:column;position:fixed;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all;overflow-wrap:break-word}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{border-radius:0;left:0 !important;top:0 !important;transform:none !important;box-shadow:none;--ix-dialog-full-screen-height:calc(     var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)   );width:calc(100% - var(--ix-dialog-padding) * 2);min-width:calc(100% - var(--ix-dialog-padding) * 2);max-width:calc(100% - var(--ix-dialog-padding) * 2);min-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height));max-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height))}:host dialog.modal-size-full-screen::backdrop{background:var(--theme-modal--background)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop,:host(.non-blocking) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:3rem}`;
 
-var __decorate = (undefined && undefined.__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;
-};
 const Modal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dialogClose = createEvent(this, "dialogClose", 7);
         this.dialogDismiss = createEvent(this, "dialogDismiss", 7);
-        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;
+    get hostElement() { return getElement(this); }
+    /**
+     * 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,
@@ -144,11 +158,25 @@ const Modal = class {
     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
      */
@@ -156,10 +184,16 @@ const Modal = class {
         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');
         }
     }
@@ -192,23 +226,26 @@ const Modal = class {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '4081b8a78aba8b671d6eab5119be700a9b0387cb', class: {
+        return (h(Host, { key: '0a2ab5326fb5cbadf863bd8e3a38cce5be19c0df', 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: '2e433b7bdb5aac5e38e96e725742868ca94f11be', class: "dialog-backdrop" }, h("dialog", { key: '39497dada9d70730da3b25f8693945c0daf3592f', "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: 'c8523949dec6428eb1c840240f5ac49e240c80c4' })))));
     }
-    get hostElement() { return getElement(this); }
 };
-__decorate([
-    OnListener('keydown', (self) => self.disableEscapeClose)
-], Modal.prototype, "onKey", null);
 Modal.style = modalCss();
 
 export { Modal as ix_modal };