@editora/ui-core 0.1.25 → 0.2.1

package/dist/alert-dialog.esm.js

@@ -1,10 +1,11 @@
-import { E as N } from "./ElementBase-BeZT54Hj.mjs";
-import { a as C, r as I } from "./scroll-lock-LfqXXqsu.mjs";
-const U = `
+import { E as Z } from "./ElementBase-BeZT54Hj.mjs";
+import { c as G, l as J } from "./overlay-motion-BX3dPLay.mjs";
+import { a as S, r as L } from "./scroll-lock-LfqXXqsu.mjs";
+const Q = `
   :host {
     display: block;
     color-scheme: light dark;
-    --ui-alert-radius: var(--base-alert-dialog-radius, var(--ui-radius, 4px));
+    --ui-alert-radius: var(--base-alert-dialog-radius, var(--ui-radius, 6px));
     --ui-alert-bg-base: var(--base-alert-dialog-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-alert-bg: var(--ui-alert-bg-base);
     --ui-alert-text: var(--ui-color-text, var(--ui-text, #202020));
@@ -20,12 +21,16 @@ const U = `
     --ui-alert-z: 1301;
     --ui-alert-backdrop-z: 1300;
     --ui-alert-focus: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
-    --ui-alert-danger: var(--ui-color-danger, #dc2626);
+    --ui-alert-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
+    /* A solid dialog: the fill, and the text colour that reads on it. */
+    --ui-alert-solid-bg: var(--ui-alert-accent);
+    --ui-alert-on-accent: var(--ui-color-foreground-on-primary, #ffffff);
     --ui-alert-backdrop: var(--base-alert-dialog-backdrop, var(--color-overlay, rgba(2, 6, 23, 0.52)));
     --ui-alert-btn-bg: color-mix(in srgb, var(--ui-alert-bg-base) 90%, var(--ui-color-background, #ffffff) 10%);
     --ui-alert-btn-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-alert-btn-hover: color-mix(in srgb, var(--ui-alert-btn-bg) 76%, var(--ui-color-border, #cbd5e1) 24%);
-    --ui-alert-confirm-bg: var(--ui-alert-accent);
+    /* Default confirm is the primary fill. A tone sets its own fill and text below, so the text always reads. */
+    --ui-alert-confirm-bg: var(--ui-color-primary, #2563eb);
     --ui-alert-confirm-color: var(--ui-color-foreground-on-primary, #ffffff);
     --ui-alert-icon-bg: color-mix(in srgb, var(--ui-alert-accent) 14%, transparent);
     --ui-alert-icon-color: var(--ui-alert-accent);
@@ -37,8 +42,8 @@ const U = `
     --ui-alert-description-size: 13px;
     --ui-alert-description-line-height: 20px;
     --ui-alert-icon-size: 28px;
-    --ui-alert-button-height: var(--base-button-height-md, 36px);
-    --ui-alert-button-radius: var(--ui-radius, 4px);
+    --ui-alert-button-height: var(--base-button-height-md, var(--ui-control-height-2, 32px));
+    --ui-alert-button-radius: var(--ui-radius, 6px);
   }
 
   :host([tone='info']) {
@@ -47,14 +52,25 @@ const U = `
 
   :host([tone='success']) {
     --ui-alert-accent: var(--ui-color-success, #15803d);
+    --ui-alert-solid-bg: var(--ui-color-success-solid, var(--ui-alert-accent));
+    --ui-alert-on-accent: var(--ui-color-foreground-on-success, #ffffff);
+    --ui-alert-confirm-bg: color-mix(in srgb, var(--ui-alert-accent) 76%, #000000);
+    --ui-alert-confirm-color: #ffffff;
   }
 
   :host([tone='warning']) {
     --ui-alert-accent: var(--ui-color-warning, #b45309);
+    --ui-alert-on-accent: var(--ui-color-foreground-on-warning, #ffffff);
+    --ui-alert-confirm-bg: var(--ui-alert-accent);
+    --ui-alert-confirm-color: var(--ui-color-foreground-on-warning, #ffffff);
   }
 
   :host([tone='danger']) {
     --ui-alert-accent: var(--ui-color-danger, #dc2626);
+    --ui-alert-solid-bg: var(--ui-color-danger-solid, var(--ui-alert-accent));
+    --ui-alert-on-accent: var(--ui-color-foreground-on-danger, #ffffff);
+    --ui-alert-confirm-bg: color-mix(in srgb, var(--ui-alert-accent) 80%, #000000);
+    --ui-alert-confirm-color: #ffffff;
   }
 
   :host([size='sm']),
@@ -68,7 +84,7 @@ const U = `
     --ui-alert-description-size: 12px;
     --ui-alert-description-line-height: 18px;
     --ui-alert-icon-size: 24px;
-    --ui-alert-button-height: var(--base-button-height-sm, 32px);
+    --ui-alert-button-height: var(--base-button-height-sm, var(--ui-control-height-1, 24px));
   }
 
   :host([size='md']),
@@ -88,7 +104,7 @@ const U = `
     --ui-alert-description-size: 14px;
     --ui-alert-description-line-height: 22px;
     --ui-alert-icon-size: 32px;
-    --ui-alert-button-height: var(--base-button-height-lg, 44px);
+    --ui-alert-button-height: var(--base-button-height-lg, var(--ui-control-height-3, 40px));
   }
 
   :host([variant='outline']) {
@@ -103,17 +119,17 @@ const U = `
   }
 
   :host([variant='solid']) {
-    --ui-alert-bg: var(--ui-alert-accent);
+    --ui-alert-bg: var(--ui-alert-solid-bg);
     --ui-alert-border: 1px solid color-mix(in srgb, #000000 16%, transparent);
-    --ui-alert-text: #ffffff;
-    --ui-alert-muted: color-mix(in srgb, #ffffff 98%, transparent);
+    --ui-alert-text: var(--ui-alert-on-accent);
+    --ui-alert-muted: color-mix(in srgb, var(--ui-alert-on-accent) 98%, transparent);
     --ui-alert-btn-bg: color-mix(in srgb, #000000 14%, transparent);
-    --ui-alert-btn-border: color-mix(in srgb, #ffffff 30%, transparent);
+    --ui-alert-btn-border: color-mix(in srgb, var(--ui-alert-on-accent) 30%, transparent);
     --ui-alert-btn-hover: color-mix(in srgb, #000000 22%, transparent);
     --ui-alert-confirm-bg: color-mix(in srgb, #000000 30%, transparent);
-    --ui-alert-confirm-color: #ffffff;
-    --ui-alert-icon-bg: color-mix(in srgb, #ffffff 18%, transparent);
-    --ui-alert-icon-color: #ffffff;
+    --ui-alert-confirm-color: var(--ui-alert-on-accent);
+    --ui-alert-icon-bg: color-mix(in srgb, var(--ui-alert-on-accent) 18%, transparent);
+    --ui-alert-icon-color: var(--ui-alert-on-accent);
   }
 
   :host([elevation='none']) {
@@ -136,8 +152,16 @@ const U = `
     place-items: center;
     background: var(--ui-alert-backdrop);
     backdrop-filter: saturate(1.04) blur(3px);
-    opacity: 0;
-    transition: opacity var(--ui-alert-duration) var(--ui-alert-easing);
+    /* The backdrop goes to the top layer (popover); undo the popover user-agent box. */
+    inline-size: 100%;
+    block-size: 100%;
+    max-inline-size: none;
+    max-block-size: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: visible;
+    color: inherit;
   }
 
   .dialog {
@@ -154,13 +178,9 @@ const U = `
     padding: var(--ui-alert-padding);
     outline: none;
     overflow: clip;
-    opacity: 0;
-    transform: translateY(12px) scale(0.985);
     transition:
       border-color var(--ui-alert-duration) var(--ui-alert-easing),
-      box-shadow var(--ui-alert-duration) var(--ui-alert-easing),
-      transform var(--ui-alert-duration) var(--ui-alert-easing),
-      opacity var(--ui-alert-duration) var(--ui-alert-easing);
+      box-shadow var(--ui-alert-duration) var(--ui-alert-easing);
   }
 
   .dialog::before {
@@ -181,13 +201,33 @@ const U = `
     display: none;
   }
 
-  .backdrop[data-open='true'] {
-    opacity: 1;
+  /* Open and close are animations on data-state; the surface is created and removed, which a transition cannot play. */
+  .backdrop[data-state='open']:not([data-instant]) {
+    animation: ui-alert-backdrop-in 150ms ease-out backwards;
   }
 
-  .backdrop[data-open='true'] .dialog {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+  .backdrop[data-state='open']:not([data-instant]) .dialog {
+    animation: ui-alert-dialog-in 150ms var(--ui-motion-enter-easing, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
+  }
+
+  .backdrop[data-state='closed'] {
+    animation: ui-alert-backdrop-out 100ms ease-in both;
+    pointer-events: none;
+  }
+
+  .backdrop[data-state='closed'] .dialog {
+    animation: ui-alert-dialog-out 100ms var(--ui-motion-exit-easing, cubic-bezier(0.4, 0, 1, 1)) both;
+  }
+
+  @keyframes ui-alert-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes ui-alert-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
+  @keyframes ui-alert-dialog-in {
+    from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.96); }
+    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
+  }
+  @keyframes ui-alert-dialog-out {
+    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
+    to { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.96); }
   }
 
   .dialog:focus-visible {
@@ -307,12 +347,12 @@ const U = `
 
   .input {
     width: 100%;
-    border-radius: var(--ui-radius, 4px);
+    border-radius: var(--ui-radius, 6px);
     border: var(--base-input-border, 1px solid color-mix(in srgb, var(--ui-alert-border-color) 88%, transparent));
     background: var(--base-input-bg, color-mix(in srgb, var(--ui-alert-bg-base) 94%, #ffffff 6%));
     color: inherit;
     box-sizing: border-box;
-    min-height: var(--base-input-height-md, 36px);
+    min-height: var(--base-input-height-md, var(--ui-control-height-2, 32px));
     padding: 9px 12px;
     font: inherit;
     line-height: 1.35;
@@ -499,62 +539,62 @@ const U = `
       border: 1px solid CanvasText;
     }
   }
-`, Z = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function b(e, t) {
-  if (e == null) return t;
-  const i = e.trim().toLowerCase();
-  return i !== "false" && i !== "0" && i !== "off";
+`, X = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function f(i, t) {
+  if (i == null) return t;
+  const e = i.trim().toLowerCase();
+  return e !== "false" && e !== "0" && e !== "off";
 }
-function a(e) {
-  return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function s(i) {
+  return String(i).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function G(e) {
-  return e === "info" || e === "success" || e === "warning" || e === "danger" ? e : "neutral";
+function tt(i) {
+  return i === "info" || i === "success" || i === "warning" || i === "danger" ? i : "neutral";
 }
-function J(e) {
-  return e === "sm" || e === "1" ? "sm" : e === "lg" || e === "3" ? "lg" : "md";
+function et(i) {
+  return i === "sm" || i === "1" ? "sm" : i === "lg" || i === "3" ? "lg" : "md";
 }
-function Q(e) {
-  return e === "soft" || e === "outline" || e === "solid" ? e : "surface";
+function it(i) {
+  return i === "soft" || i === "outline" || i === "solid" ? i : "surface";
 }
-function X(e) {
-  return e === "none" || e === "high" ? e : "low";
+function rt(i) {
+  return i === "none" || i === "high" ? i : "low";
 }
-function tt(e) {
-  return e === "none" ? "none" : "line";
+function at(i) {
+  return i === "none" ? "none" : "line";
 }
-function it(e, t = "var(--base-alert-dialog-radius, var(--ui-radius, 4px))") {
-  if (e == null) return t;
-  const i = e.trim().toLowerCase();
-  return i ? i === "full" || i === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(i) ? `${i}px` : e : t;
+function st(i, t = "var(--base-alert-dialog-radius, var(--ui-radius, 6px))") {
+  if (i == null) return t;
+  const e = i.trim().toLowerCase();
+  return e ? e === "full" || e === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(e) ? `${e}px` : i : t;
 }
-const et = /* @__PURE__ */ new Set(["tone", "size", "variant", "elevation", "indicator", "radius"]);
-function rt(e) {
-  return e === "success" ? '<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10.2 8.3 13.4 15 6.8"></path></svg>' : e === "warning" ? '<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.6 17 16.4H3L10 3.6Z"></path><path d="M10 8v3.4"></path><circle cx="10" cy="14.1" r="0.9" fill="currentColor" stroke="none"></circle></svg>' : e === "danger" ? '<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="m7.5 7.5 5 5M12.5 7.5l-5 5"></path></svg>' : e === "info" ? '<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="M10 13v-3.8"></path><circle cx="10" cy="6.5" r="0.9" fill="currentColor" stroke="none"></circle></svg>' : '<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6 10h8"></path><circle cx="10" cy="10" r="7.1"></circle></svg>';
+const ot = /* @__PURE__ */ new Set(["tone", "size", "variant", "elevation", "indicator", "radius"]);
+function nt(i) {
+  return i === "success" ? '<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10.2 8.3 13.4 15 6.8"></path></svg>' : i === "warning" ? '<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.6 17 16.4H3L10 3.6Z"></path><path d="M10 8v3.4"></path><circle cx="10" cy="14.1" r="0.9" fill="currentColor" stroke="none"></circle></svg>' : i === "danger" ? '<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="m7.5 7.5 5 5M12.5 7.5l-5 5"></path></svg>' : i === "info" ? '<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="M10 13v-3.8"></path><circle cx="10" cy="6.5" r="0.9" fill="currentColor" stroke="none"></circle></svg>' : '<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6 10h8"></path><circle cx="10" cy="10" r="7.1"></circle></svg>';
 }
 function u() {
   return typeof window < "u" && typeof document < "u";
 }
-function S() {
+function T() {
   if (!u()) return null;
-  const e = document.activeElement;
-  return e instanceof HTMLElement ? e : null;
+  const i = document.activeElement;
+  return i instanceof HTMLElement ? i : null;
 }
-function _(e) {
-  return typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => e()) : window.setTimeout(e, 16);
+function k(i) {
+  return typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => i()) : window.setTimeout(i, 16);
 }
-function p(e) {
-  if (e) {
+function p(i) {
+  if (i) {
     if (typeof cancelAnimationFrame == "function") {
-      cancelAnimationFrame(e);
+      cancelAnimationFrame(i);
       return;
     }
-    window.clearTimeout(e);
+    window.clearTimeout(i);
   }
 }
-const c = "data-ui-auto-name", l = class l extends N {
+const c = "data-ui-auto-name", l = class l extends Z {
   constructor() {
-    super(), this._lastActive = null, this._active = !1, this._terminalEmitted = !1, this._closeMeta = null, this._uid = Math.random().toString(36).slice(2, 10), this._dialogId = "", this._config = {}, this._inputValue = "", this._checked = !1, this._runtimeError = "", this._activeHeadless = !1, this._focusInitialFrame = 0, this._restoreFocusFrame = 0, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onInput = this._onInput.bind(this), this._dialogId = this._uid;
+    super(), this._lastActive = null, this._active = !1, this._terminalEmitted = !1, this._closeMeta = null, this._uid = Math.random().toString(36).slice(2, 10), this._dialogId = "", this._config = {}, this._inputValue = "", this._checked = !1, this._runtimeError = "", this._activeHeadless = !1, this._focusInitialFrame = 0, this._restoreFocusFrame = 0, this._presented = !1, this._finishClose = null, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onInput = this._onInput.bind(this), this._dialogId = this._uid;
   }
   static get observedAttributes() {
     return [
@@ -590,9 +630,9 @@ const c = "data-ui-auto-name", l = class l extends N {
   disconnectedCallback() {
     this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this.root.removeEventListener("input", this._onInput), this._focusInitialFrame && (p(this._focusInitialFrame), this._focusInitialFrame = 0), this._restoreFocusFrame && (p(this._restoreFocusFrame), this._restoreFocusFrame = 0), this._active && !this._terminalEmitted && this.close("dismiss", "unmount"), this._deactivate(), super.disconnectedCallback();
   }
-  attributeChangedCallback(t, i, r) {
-    if (i !== r) {
-      if (et.has(t)) {
+  attributeChangedCallback(t, e, r) {
+    if (e !== r) {
+      if (ot.has(t)) {
         this._syncVisualTokens();
         return;
       }
@@ -620,25 +660,25 @@ const c = "data-ui-auto-name", l = class l extends N {
     t ? this.setAttribute("headless", "") : this.removeAttribute("headless");
   }
   get dismissible() {
-    return b(this.getAttribute("dismissible"), !0);
+    return f(this.getAttribute("dismissible"), !0);
   }
   set dismissible(t) {
     this.setAttribute("dismissible", String(t));
   }
   get closeOnEsc() {
-    return b(this.getAttribute("close-on-esc"), this.dismissible);
+    return f(this.getAttribute("close-on-esc"), this.dismissible);
   }
   set closeOnEsc(t) {
     this.setAttribute("close-on-esc", String(t));
   }
   get closeOnBackdrop() {
-    return b(this.getAttribute("close-on-backdrop"), this.dismissible);
+    return f(this.getAttribute("close-on-backdrop"), this.dismissible);
   }
   set closeOnBackdrop(t) {
     this.setAttribute("close-on-backdrop", String(t));
   }
   get lockWhileLoading() {
-    return b(this.getAttribute("lock-while-loading"), !0);
+    return f(this.getAttribute("lock-while-loading"), !0);
   }
   set lockWhileLoading(t) {
     this.setAttribute("lock-while-loading", String(t));
@@ -650,7 +690,7 @@ const c = "data-ui-auto-name", l = class l extends N {
     this.setAttribute("role", t);
   }
   get tone() {
-    return G(this.getAttribute("tone"));
+    return tt(this.getAttribute("tone"));
   }
   set tone(t) {
     if (t === "neutral") {
@@ -660,7 +700,7 @@ const c = "data-ui-auto-name", l = class l extends N {
     this.setAttribute("tone", t);
   }
   get size() {
-    return J(this.getAttribute("size"));
+    return et(this.getAttribute("size"));
   }
   set size(t) {
     if (t === "md") {
@@ -670,7 +710,7 @@ const c = "data-ui-auto-name", l = class l extends N {
     this.setAttribute("size", t);
   }
   get variant() {
-    return Q(this.getAttribute("variant"));
+    return it(this.getAttribute("variant"));
   }
   set variant(t) {
     if (t === "surface") {
@@ -680,7 +720,7 @@ const c = "data-ui-auto-name", l = class l extends N {
     this.setAttribute("variant", t);
   }
   get elevation() {
-    return X(this.getAttribute("elevation"));
+    return rt(this.getAttribute("elevation"));
   }
   set elevation(t) {
     if (t === "low") {
@@ -690,7 +730,7 @@ const c = "data-ui-auto-name", l = class l extends N {
     this.setAttribute("elevation", t);
   }
   get indicator() {
-    return tt(this.getAttribute("indicator"));
+    return at(this.getAttribute("indicator"));
   }
   set indicator(t) {
     if (t === "line") {
@@ -747,16 +787,16 @@ const c = "data-ui-auto-name", l = class l extends N {
   }
   setInputValue(t) {
     this._inputValue = t;
-    const i = this.root.querySelector(".input");
-    i && (i.value = t);
+    const e = this.root.querySelector(".input");
+    e && (e.value = t);
   }
   getChecked() {
     return this.root.querySelector(".checkbox-input")?.checked ?? this._checked;
   }
   setChecked(t) {
     this._checked = t;
-    const i = this.root.querySelector(".checkbox-input");
-    i && (i.checked = t);
+    const e = this.root.querySelector(".checkbox-input");
+    e && (e.checked = t);
   }
   setError(t) {
     this._runtimeError = t, this.state = t ? "error" : "idle", this.requestRender();
@@ -764,14 +804,14 @@ const c = "data-ui-auto-name", l = class l extends N {
   clearError() {
     this._runtimeError = "", this.state === "error" && (this.state = "idle"), this.requestRender();
   }
-  close(t = "dismiss", i, r) {
-    this._terminalEmitted || (this._closeMeta = { action: t, source: i, reason: r }, this.hasAttribute("open") && this.removeAttribute("open"), this._syncOpenState());
+  close(t = "dismiss", e, r) {
+    this._terminalEmitted || (this._closeMeta = { action: t, source: e, reason: r }, this.hasAttribute("open") && this.removeAttribute("open"), this._syncOpenState());
   }
   _syncFromAttributes() {
     this.hasAttribute("role") || this.setAttribute("role", "alertdialog");
   }
   _syncVisualTokens() {
-    this.style.setProperty("--ui-alert-radius", it(this.getAttribute("radius")));
+    this.style.setProperty("--ui-alert-radius", st(this.getAttribute("radius")));
   }
   _syncOpenState() {
     const t = this.hasAttribute("open");
@@ -782,9 +822,9 @@ const c = "data-ui-auto-name", l = class l extends N {
     !t && this._active && this._deactivate();
   }
   _activate() {
-    this._active = !0, this._activeHeadless = this.headless, this._terminalEmitted = !1, this._closeMeta = null, l._openStack.includes(this) || l._openStack.push(this), this._lastActive = this.headless ? null : S(), this.headless || C(), u() && !this.headless && document.addEventListener("focusin", this._onFocusIn, !0);
+    this._active = !0, this._activeHeadless = this.headless, this._terminalEmitted = !1, this._closeMeta = null, l._openStack.includes(this) || l._openStack.push(this), this._lastActive = this.headless ? null : T(), this.headless || S(), u() && !this.headless && document.addEventListener("focusin", this._onFocusIn, !0);
     const t = this.dialogId || this._uid;
-    this._dispatchWithLegacy("ui-open", "open", { id: t }), this.headless || (this._focusInitialFrame && p(this._focusInitialFrame), this._focusInitialFrame = _(() => {
+    this._dispatchWithLegacy("ui-open", "open", { id: t }), this.headless || (this._focusInitialFrame && p(this._focusInitialFrame), this._focusInitialFrame = k(() => {
       this._focusInitialFrame = 0, this._focusInitial();
     })), this.requestRender();
   }
@@ -792,24 +832,24 @@ const c = "data-ui-auto-name", l = class l extends N {
     if (!this._active) return;
     this._active = !1;
     const t = l._openStack.lastIndexOf(this);
-    if (t >= 0 && l._openStack.splice(t, 1), u() && !this._activeHeadless && document.removeEventListener("focusin", this._onFocusIn, !0), this._activeHeadless || I(), !this._terminalEmitted) {
-      const r = this._closeMeta || { action: "dismiss", source: "abort" }, s = this.dialogId || this._uid;
-      r.action === "cancel" ? this._dispatchWithLegacy("ui-cancel", "cancel", { id: s }) : r.action === "dismiss" && this._dispatchWithLegacy("ui-dismiss", "dismiss", {
-        id: s,
+    if (t >= 0 && l._openStack.splice(t, 1), u() && !this._activeHeadless && document.removeEventListener("focusin", this._onFocusIn, !0), this._activeHeadless || L(), !this._terminalEmitted) {
+      const r = this._closeMeta || { action: "dismiss", source: "abort" }, a = this.dialogId || this._uid;
+      r.action === "cancel" ? this._dispatchWithLegacy("ui-cancel", "cancel", { id: a }) : r.action === "dismiss" && this._dispatchWithLegacy("ui-dismiss", "dismiss", {
+        id: a,
         source: r.source || "abort",
         reason: r.reason
       }), this._dispatchWithLegacy("ui-close", "close", {
-        id: s,
+        id: a,
         action: r.action,
         source: r.source,
         reason: r.reason
       }), this._terminalEmitted = !0, this._closeMeta = null;
     }
-    const i = this._lastActive;
-    this._lastActive = null, i && !this._activeHeadless && (this._restoreFocusFrame && p(this._restoreFocusFrame), this._restoreFocusFrame = _(() => {
+    const e = this._lastActive;
+    this._lastActive = null, e && !this._activeHeadless && (this._restoreFocusFrame && p(this._restoreFocusFrame), this._restoreFocusFrame = k(() => {
       this._restoreFocusFrame = 0;
       try {
-        i.focus();
+        e.focus();
       } catch {
       }
     })), this._activeHeadless = !1, this.requestRender();
@@ -817,27 +857,27 @@ const c = "data-ui-auto-name", l = class l extends N {
   _syncActiveEnvironment() {
     if (this._active && this.headless !== this._activeHeadless) {
       if (this.headless) {
-        u() && document.removeEventListener("focusin", this._onFocusIn, !0), I(), this._lastActive = null, this._activeHeadless = !0;
+        u() && document.removeEventListener("focusin", this._onFocusIn, !0), L(), this._lastActive = null, this._activeHeadless = !0;
         return;
       }
-      this._lastActive = S(), C(), u() && document.addEventListener("focusin", this._onFocusIn, !0), this._activeHeadless = !1, this._focusInitialFrame && p(this._focusInitialFrame), this._focusInitialFrame = _(() => {
+      this._lastActive = T(), S(), u() && document.addEventListener("focusin", this._onFocusIn, !0), this._activeHeadless = !1, this._focusInitialFrame && p(this._focusInitialFrame), this._focusInitialFrame = k(() => {
         this._focusInitialFrame = 0, this._focusInitial();
       });
     }
   }
-  _dispatchWithLegacy(t, i, r, s = !1) {
+  _dispatchWithLegacy(t, e, r, a = !1) {
     const o = new CustomEvent(t, {
       detail: r,
       bubbles: !0,
       composed: !0,
-      cancelable: s
+      cancelable: a
     });
     this.dispatchEvent(o);
-    const n = new CustomEvent(i, {
+    const n = new CustomEvent(e, {
       detail: r,
       bubbles: !0,
       composed: !0,
-      cancelable: s
+      cancelable: a
     });
     return this.dispatchEvent(n), o;
   }
@@ -850,19 +890,19 @@ const c = "data-ui-auto-name", l = class l extends N {
     return this.root.querySelector(".dialog");
   }
   _collectFocusable(t) {
-    return Array.from(t.querySelectorAll(Z)).filter((i) => {
-      if (i.disabled || i.getAttribute("aria-hidden") === "true") return !1;
-      const s = u() ? window.getComputedStyle(i) : null;
-      return !(s && (s.display === "none" || s.visibility === "hidden"));
+    return Array.from(t.querySelectorAll(X)).filter((e) => {
+      if (e.disabled || e.getAttribute("aria-hidden") === "true") return !1;
+      const a = u() ? window.getComputedStyle(e) : null;
+      return !(a && (a.display === "none" || a.visibility === "hidden"));
     });
   }
   _focusInitial() {
     if (!this.open) return;
     const t = this._queryPanel();
     if (!t) return;
-    const i = this.initialFocus;
-    if (i) {
-      const n = t.querySelector(i);
+    const e = this.initialFocus;
+    if (e) {
+      const n = t.querySelector(e);
       if (n && typeof n.focus == "function") {
         n.focus();
         return;
@@ -877,30 +917,30 @@ const c = "data-ui-auto-name", l = class l extends N {
   }
   _handleTab(t) {
     if (t.key !== "Tab") return;
-    const i = this._queryPanel();
-    if (!i) return;
-    const r = this._collectFocusable(i);
+    const e = this._queryPanel();
+    if (!e) return;
+    const r = this._collectFocusable(e);
     if (!r.length) {
-      t.preventDefault(), i.focus();
+      t.preventDefault(), e.focus();
       return;
     }
-    const s = this.root.activeElement || document.activeElement, o = r[0], n = r[r.length - 1];
+    const a = this.root.activeElement || document.activeElement, o = r[0], n = r[r.length - 1];
     if (t.shiftKey) {
-      (s === o || !s || !i.contains(s)) && (t.preventDefault(), n.focus());
+      (a === o || !a || !e.contains(a)) && (t.preventDefault(), n.focus());
       return;
     }
-    s === n && (t.preventDefault(), o.focus());
+    a === n && (t.preventDefault(), o.focus());
   }
   _onFocusIn(t) {
     if (!this.open || !this._isTopMost()) return;
-    const i = this._queryPanel();
-    if (!i) return;
+    const e = this._queryPanel();
+    if (!e) return;
     const r = t.target;
-    (typeof t.composedPath == "function" ? t.composedPath() : []).includes(i) || r && i.contains(r) || this._focusInitial();
+    (typeof t.composedPath == "function" ? t.composedPath() : []).includes(e) || r && e.contains(r) || this._focusInitial();
   }
   _onInput(t) {
-    const i = t.target;
-    i && (i.classList.contains("input") && (this._inputValue = i.value), i.classList.contains("checkbox-input") && (this._checked = i.checked), this._dispatchWithLegacy("ui-change", "change", {
+    const e = t.target;
+    e && (e.classList.contains("input") && (this._inputValue = e.value), e.classList.contains("checkbox-input") && (this._checked = e.checked), this._dispatchWithLegacy("ui-change", "change", {
       id: this.dialogId || this._uid,
       inputValue: this._inputValue,
       checked: this._checked
@@ -909,8 +949,8 @@ const c = "data-ui-auto-name", l = class l extends N {
   _isInteractionLocked() {
     return this.state === "loading" && this.lockWhileLoading;
   }
-  _requestDismiss(t, i) {
-    this._isInteractionLocked() || this.close("dismiss", t, i);
+  _requestDismiss(t, e) {
+    this._isInteractionLocked() || this.close("dismiss", t, e);
   }
   _handleConfirm() {
     const t = {
@@ -925,21 +965,21 @@ const c = "data-ui-auto-name", l = class l extends N {
   }
   _onClick(t) {
     if (!this.open || !this._isTopMost()) return;
-    const i = t.target;
-    if (i) {
-      if (i.classList.contains("backdrop") && this.closeOnBackdrop) {
+    const e = t.target;
+    if (e) {
+      if (e.classList.contains("backdrop") && this.closeOnBackdrop) {
         this._requestDismiss("backdrop");
         return;
       }
-      if (i.closest(".close")) {
+      if (e.closest(".close")) {
         this._requestDismiss("close-icon");
         return;
       }
-      if (i.closest(".btn-confirm")) {
+      if (e.closest(".btn-confirm")) {
         this._handleConfirm();
         return;
       }
-      i.closest(".btn-cancel") && this._handleCancel();
+      e.closest(".btn-cancel") && this._handleCancel();
     }
   }
   _onKeyDown(t) {
@@ -955,7 +995,7 @@ const c = "data-ui-auto-name", l = class l extends N {
   // The host carries role="alertdialog" (that attribute is also how the role is configured), so it
   // is exposed as a dialog of its own. Closed, it was an empty, unnamed alert dialog sitting in the
   // page; open, it needs the same name as the dialog inside its shadow root.
-  _syncHostSemantics(t, i = "", r = !1) {
+  _syncHostSemantics(t, e = "", r = !1) {
     if (!t) {
       this.getAttribute("aria-hidden") !== "true" && this.setAttribute("aria-hidden", "true"), this.hasAttribute(c) && (this.removeAttribute("aria-label"), this.removeAttribute(c));
       return;
@@ -964,95 +1004,107 @@ const c = "data-ui-auto-name", l = class l extends N {
       this.hasAttribute(c) && this.removeAttribute(c);
       return;
     }
-    this.getAttribute("aria-label") !== i && this.setAttribute("aria-label", i), this.hasAttribute(c) || this.setAttribute(c, "");
+    this.getAttribute("aria-label") !== e && this.setAttribute("aria-label", e), this.hasAttribute(c) || this.setAttribute(c, "");
   }
   render() {
     if (!this.open) {
-      this._syncHostSemantics(!1), this.setContent("");
+      this._syncHostSemantics(!1);
+      const _ = this.root.querySelector(".backdrop");
+      if (this._presented && _) {
+        this._presented = !1, _.removeAttribute("data-instant"), this._finishClose = G(_, () => {
+          this._finishClose = null, this.setContent("");
+        });
+        return;
+      }
+      if (this._finishClose) return;
+      this.setContent("");
       return;
     }
-    const t = this._config.title ?? this.getAttribute("title") ?? "", i = this._config.description ?? this.getAttribute("description") ?? "", r = this._config.confirmText ?? this.getAttribute("confirm-text") ?? "Confirm", s = this._config.cancelText ?? this.getAttribute("cancel-text") ?? "Cancel", o = this._config.loadingText ?? this.getAttribute("loading-text") ?? "Working...", n = !!this._config.input?.enabled, L = this._config.input?.label || "Value", $ = this._config.input?.placeholder || "", T = !!this._config.input?.required, B = !!this._config.checkbox?.enabled, q = this._config.checkbox?.label || "Remember this choice", M = this.state, f = this._runtimeError || this._config.errorMessage || this.getAttribute("error-message") || "", y = `ui-alert-title-${this._uid}`, w = `ui-alert-description-${this._uid}`, A = `ui-alert-error-${this._uid}`, O = !!this.querySelector('[slot="title"]'), D = !!this.querySelector('[slot="description"]'), H = !!this.querySelector('[slot="icon"]'), V = !!this.querySelector('[slot="footer"]'), R = !!this.querySelector('[slot="content"]'), g = O || !!t, m = D || !!i, W = H || g || m, P = this._config.showCancel ?? this.dismissible, j = this._config.showClose ?? this.dismissible, K = this.tone, v = this.hasAttribute(c) ? "" : this.getAttribute("aria-label") || "", F = this.getAttribute("aria-labelledby") || "", z = this.getAttribute("aria-describedby") || "", x = F || (g ? y : ""), E = v || (x ? "" : t || i || "Dialog"), Y = (this.querySelector('[slot="title"]')?.textContent || "").replace(/\s+/g, " ").trim();
+    this._finishClose?.(), this._finishClose = null;
+    const t = this._config.title ?? this.getAttribute("title") ?? "", e = this._config.description ?? this.getAttribute("description") ?? "", r = this._config.confirmText ?? this.getAttribute("confirm-text") ?? "Confirm", a = this._config.cancelText ?? this.getAttribute("cancel-text") ?? "Cancel", o = this._config.loadingText ?? this.getAttribute("loading-text") ?? "Working...", n = !!this._config.input?.enabled, $ = this._config.input?.label || "Value", B = this._config.input?.placeholder || "", q = !!this._config.input?.required, O = !!this._config.checkbox?.enabled, D = this._config.checkbox?.label || "Remember this choice", M = this.state, b = this._runtimeError || this._config.errorMessage || this.getAttribute("error-message") || "", w = `ui-alert-title-${this._uid}`, A = `ui-alert-description-${this._uid}`, z = `ui-alert-error-${this._uid}`, H = !!this.querySelector('[slot="title"]'), V = !!this.querySelector('[slot="description"]'), R = !!this.querySelector('[slot="icon"]'), W = !!this.querySelector('[slot="footer"]'), P = !!this.querySelector('[slot="content"]'), g = H || !!t, m = V || !!e, j = R || g || m, K = this._config.showCancel ?? this.dismissible, Y = this._config.showClose ?? this.dismissible, N = this.tone, v = this.hasAttribute(c) ? "" : this.getAttribute("aria-label") || "", F = this.getAttribute("aria-labelledby") || "", C = this.getAttribute("aria-describedby") || "", x = F || (g ? w : ""), E = v || (x ? "" : t || e || "Dialog"), U = (this.querySelector('[slot="title"]')?.textContent || "").replace(/\s+/g, " ").trim();
     this._syncHostSemantics(
       !0,
-      v || Y || t || i || "Dialog",
+      v || U || t || e || "Dialog",
       !!v || !!F
     );
     const d = [];
-    z ? d.push(z) : (m && d.push(w), f && d.push(A));
+    C ? d.push(C) : (m && d.push(A), b && d.push(z));
     const h = M === "loading";
     this.setContent(`
-      <style>${U}</style>
-      <div class="backdrop" part="backdrop" role="presentation" data-open="${String(this.open)}">
+      <style>${Q}</style>
+      <div class="backdrop" part="backdrop" role="presentation" data-open="${String(this.open)}" data-state="open" ${this._presented ? "data-instant" : ""}>
         <section
           class="dialog"
           part="dialog"
-          role="${a(this.roleType)}"
+          role="${s(this.roleType)}"
           aria-modal="true"
-          ${E ? `aria-label="${a(E)}"` : ""}
-          ${x ? `aria-labelledby="${a(x)}"` : ""}
-          ${d.length ? `aria-describedby="${a(d.join(" "))}"` : ""}
+          ${E ? `aria-label="${s(E)}"` : ""}
+          ${x ? `aria-labelledby="${s(x)}"` : ""}
+          ${d.length ? `aria-describedby="${s(d.join(" "))}"` : ""}
           tabindex="-1"
         >
-          ${j ? `<button class="close" part="close" aria-label="Close dialog">
+          ${Y ? `<button class="close" part="close" aria-label="Close dialog">
                 <svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
                   <path d="m6 6 8 8M14 6l-8 8"></path>
                 </svg>
               </button>` : ""}
 
-          ${W ? `<header class="header">
+          ${j ? `<header class="header">
                 <div class="header-main">
                   <span class="icon-wrap" part="icon-wrap" aria-hidden="true">
                     <span class="icon" part="icon">
-                      <slot name="icon">${rt(K)}</slot>
+                      <slot name="icon">${nt(N)}</slot>
                     </span>
                   </span>
                   <div class="heading">
-                    ${g ? `<h2 id="${y}" class="title" part="title"><slot name="title">${a(t)}</slot></h2>` : ""}
-                    ${m ? `<p id="${w}" class="description" part="description"><slot name="description">${a(i)}</slot></p>` : ""}
+                    ${g ? `<h2 id="${w}" class="title" part="title"><slot name="title">${s(t)}</slot></h2>` : ""}
+                    ${m ? `<p id="${A}" class="description" part="description"><slot name="description">${s(e)}</slot></p>` : ""}
                   </div>
                 </div>
               </header>` : ""}
 
           <div class="content" part="content">
-            ${R ? '<slot name="content"></slot>' : "<slot></slot>"}
+            ${P ? '<slot name="content"></slot>' : "<slot></slot>"}
 
             ${n ? `<label class="input-wrap">
-                  <span class="label">${a(L)}</span>
+                  <span class="label">${s($)}</span>
                   <input
                     class="input"
                     part="input"
                     type="text"
-                    value="${a(this.getInputValue())}"
-                    placeholder="${a($)}"
-                    ${T ? "required" : ""}
+                    value="${s(this.getInputValue())}"
+                    placeholder="${s(B)}"
+                    ${q ? "required" : ""}
                     ${h ? "disabled" : ""}
                   />
                 </label>` : ""}
 
-            ${B ? `<label class="checkbox" part="checkbox">
+            ${O ? `<label class="checkbox" part="checkbox">
                   <span class="checkbox-line">
                     <input class="checkbox-input" type="checkbox" ${this.getChecked() ? "checked" : ""} ${h ? "disabled" : ""} />
-                    <span>${a(q)}</span>
+                    <span>${s(D)}</span>
                   </span>
                 </label>` : ""}
           </div>
 
-          <div class="error" id="${A}" part="error" aria-live="polite" data-empty="${String(!f)}">${a(f)}</div>
+          <div class="error" id="${z}" part="error" aria-live="polite" data-empty="${String(!b)}">${s(b)}</div>
 
           <footer class="footer" part="footer">
-            ${h ? `<span class="loading"><span class="spinner" aria-hidden="true"></span><span>${a(o)}</span></span>` : '<span aria-hidden="true"></span>'}
+            ${h ? `<span class="loading"><span class="spinner" aria-hidden="true"></span><span>${s(o)}</span></span>` : '<span aria-hidden="true"></span>'}
 
-            ${V ? '<slot name="footer"></slot>' : `${P ? `<button class="btn btn-cancel" part="cancel" type="button" ${h ? "disabled" : ""}>${a(s)}</button>` : ""}
-                 <button class="btn btn-confirm" part="confirm" type="button" ${h ? "disabled" : ""}>${a(r)}</button>`}
+            ${W ? '<slot name="footer"></slot>' : `${K ? `<button class="btn btn-cancel" part="cancel" type="button" ${h ? "disabled" : ""}>${s(a)}</button>` : ""}
+                 <button class="btn btn-confirm" part="confirm" type="button" ${h ? "disabled" : ""}>${s(r)}</button>`}
           </footer>
         </section>
       </div>
     `);
+    const I = this.root.querySelector(".backdrop");
+    I && !this.headless && J(I, { resetBox: !1 }), this._presented = !0;
   }
 };
 l._openStack = [];
-let k = l;
-typeof customElements < "u" && !customElements.get("ui-alert-dialog") && customElements.define("ui-alert-dialog", k);
+let y = l;
+typeof customElements < "u" && !customElements.get("ui-alert-dialog") && customElements.define("ui-alert-dialog", y);
 export {
-  k as UIAlertDialog
+  y as UIAlertDialog
 };