@editora/ui-core 0.2.2 → 0.3.0

package/dist/alert-dialog.esm.js

@@ -1,7 +1,8 @@
-import { E as Z } from "./ElementBase-BeZT54Hj.mjs";
-import { c as G, l as J } from "./overlay-motion-BX3dPLay.mjs";
+import { E as G } from "./ElementBase-D5QsC5Vw.mjs";
+import { g as J, d as Q, c as U } from "./focus-scope-Dl0qk5GP.mjs";
+import { c as X, l as tt } from "./overlay-motion-BX3dPLay.mjs";
 import { a as S, r as L } from "./scroll-lock-LfqXXqsu.mjs";
-const Q = `
+const it = `
   :host {
     display: block;
     color-scheme: light dark;
@@ -539,60 +540,60 @@ const Q = `
       border: 1px solid CanvasText;
     }
   }
-`, 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 f(e, t) {
+  if (e == null) return t;
+  const i = e.trim().toLowerCase();
+  return i !== "false" && i !== "0" && i !== "off";
 }
-function s(i) {
-  return String(i).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function s(e) {
+  return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function tt(i) {
-  return i === "info" || i === "success" || i === "warning" || i === "danger" ? i : "neutral";
+function et(e) {
+  return e === "info" || e === "success" || e === "warning" || e === "danger" ? e : "neutral";
 }
-function et(i) {
-  return i === "sm" || i === "1" ? "sm" : i === "lg" || i === "3" ? "lg" : "md";
+function rt(e) {
+  return e === "sm" || e === "1" ? "sm" : e === "lg" || e === "3" ? "lg" : "md";
 }
-function it(i) {
-  return i === "soft" || i === "outline" || i === "solid" ? i : "surface";
+function at(e) {
+  return e === "soft" || e === "outline" || e === "solid" ? e : "surface";
 }
-function rt(i) {
-  return i === "none" || i === "high" ? i : "low";
+function st(e) {
+  return e === "none" || e === "high" ? e : "low";
 }
-function at(i) {
-  return i === "none" ? "none" : "line";
+function ot(e) {
+  return e === "none" ? "none" : "line";
 }
-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;
+function nt(e, t = "var(--base-alert-dialog-radius, var(--ui-radius, 6px))") {
+  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;
 }
-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>';
+const lt = /* @__PURE__ */ new Set(["tone", "size", "variant", "elevation", "indicator", "radius"]);
+function ct(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>';
 }
 function u() {
   return typeof window < "u" && typeof document < "u";
 }
 function T() {
   if (!u()) return null;
-  const i = document.activeElement;
-  return i instanceof HTMLElement ? i : null;
+  const e = document.activeElement;
+  return e instanceof HTMLElement ? e : null;
 }
-function k(i) {
-  return typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => i()) : window.setTimeout(i, 16);
+function k(e) {
+  return typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => e()) : window.setTimeout(e, 16);
 }
-function p(i) {
-  if (i) {
+function p(e) {
+  if (e) {
     if (typeof cancelAnimationFrame == "function") {
-      cancelAnimationFrame(i);
+      cancelAnimationFrame(e);
       return;
     }
-    window.clearTimeout(i);
+    window.clearTimeout(e);
   }
 }
-const c = "data-ui-auto-name", l = class l extends Z {
+const l = "data-ui-auto-name", c = class c extends G {
   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._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;
   }
@@ -605,6 +606,7 @@ const c = "data-ui-auto-name", l = class l extends Z {
       "close-on-backdrop",
       "lock-while-loading",
       "role",
+      "dialog-role",
       "tone",
       "size",
       "variant",
@@ -630,9 +632,9 @@ const c = "data-ui-auto-name", l = class l extends Z {
   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, e, r) {
-    if (e !== r) {
-      if (ot.has(t)) {
+  attributeChangedCallback(t, i, r) {
+    if (i !== r) {
+      if (lt.has(t)) {
         this._syncVisualTokens();
         return;
       }
@@ -684,13 +686,13 @@ const c = "data-ui-auto-name", l = class l extends Z {
     this.setAttribute("lock-while-loading", String(t));
   }
   get roleType() {
-    return this.getAttribute("role") === "dialog" ? "dialog" : "alertdialog";
+    return (this.getAttribute("dialog-role") || this.getAttribute("role")) === "dialog" ? "dialog" : "alertdialog";
   }
   set roleType(t) {
-    this.setAttribute("role", t);
+    this.setAttribute("dialog-role", t);
   }
   get tone() {
-    return tt(this.getAttribute("tone"));
+    return et(this.getAttribute("tone"));
   }
   set tone(t) {
     if (t === "neutral") {
@@ -700,7 +702,7 @@ const c = "data-ui-auto-name", l = class l extends Z {
     this.setAttribute("tone", t);
   }
   get size() {
-    return et(this.getAttribute("size"));
+    return rt(this.getAttribute("size"));
   }
   set size(t) {
     if (t === "md") {
@@ -710,7 +712,7 @@ const c = "data-ui-auto-name", l = class l extends Z {
     this.setAttribute("size", t);
   }
   get variant() {
-    return it(this.getAttribute("variant"));
+    return at(this.getAttribute("variant"));
   }
   set variant(t) {
     if (t === "surface") {
@@ -720,7 +722,7 @@ const c = "data-ui-auto-name", l = class l extends Z {
     this.setAttribute("variant", t);
   }
   get elevation() {
-    return rt(this.getAttribute("elevation"));
+    return st(this.getAttribute("elevation"));
   }
   set elevation(t) {
     if (t === "low") {
@@ -730,7 +732,7 @@ const c = "data-ui-auto-name", l = class l extends Z {
     this.setAttribute("elevation", t);
   }
   get indicator() {
-    return at(this.getAttribute("indicator"));
+    return ot(this.getAttribute("indicator"));
   }
   set indicator(t) {
     if (t === "line") {
@@ -787,16 +789,16 @@ const c = "data-ui-auto-name", l = class l extends Z {
   }
   setInputValue(t) {
     this._inputValue = t;
-    const e = this.root.querySelector(".input");
-    e && (e.value = t);
+    const i = this.root.querySelector(".input");
+    i && (i.value = t);
   }
   getChecked() {
     return this.root.querySelector(".checkbox-input")?.checked ?? this._checked;
   }
   setChecked(t) {
     this._checked = t;
-    const e = this.root.querySelector(".checkbox-input");
-    e && (e.checked = t);
+    const i = this.root.querySelector(".checkbox-input");
+    i && (i.checked = t);
   }
   setError(t) {
     this._runtimeError = t, this.state = t ? "error" : "idle", this.requestRender();
@@ -804,14 +806,13 @@ const c = "data-ui-auto-name", l = class l extends Z {
   clearError() {
     this._runtimeError = "", this.state === "error" && (this.state = "idle"), this.requestRender();
   }
-  close(t = "dismiss", e, r) {
-    this._terminalEmitted || (this._closeMeta = { action: t, source: e, reason: r }, this.hasAttribute("open") && this.removeAttribute("open"), this._syncOpenState());
+  close(t = "dismiss", i, r) {
+    this._terminalEmitted || (this._closeMeta = { action: t, source: i, 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", st(this.getAttribute("radius")));
+    this.style.setProperty("--ui-alert-radius", nt(this.getAttribute("radius")));
   }
   _syncOpenState() {
     const t = this.hasAttribute("open");
@@ -822,7 +823,7 @@ const c = "data-ui-auto-name", l = class l extends Z {
     !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 : T(), this.headless || S(), u() && !this.headless && document.addEventListener("focusin", this._onFocusIn, !0);
+    this._active = !0, this._activeHeadless = this.headless, this._terminalEmitted = !1, this._closeMeta = null, c._openStack.includes(this) || c._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 = k(() => {
       this._focusInitialFrame = 0, this._focusInitial();
@@ -831,8 +832,8 @@ const c = "data-ui-auto-name", l = class l extends Z {
   _deactivate() {
     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 || L(), !this._terminalEmitted) {
+    const t = c._openStack.lastIndexOf(this);
+    if (t >= 0 && c._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,
@@ -845,11 +846,11 @@ const c = "data-ui-auto-name", l = class l extends Z {
         reason: r.reason
       }), this._terminalEmitted = !0, this._closeMeta = null;
     }
-    const e = this._lastActive;
-    this._lastActive = null, e && !this._activeHeadless && (this._restoreFocusFrame && p(this._restoreFocusFrame), this._restoreFocusFrame = k(() => {
+    const i = this._lastActive;
+    this._lastActive = null, i && !this._activeHeadless && (this._restoreFocusFrame && p(this._restoreFocusFrame), this._restoreFocusFrame = k(() => {
       this._restoreFocusFrame = 0;
       try {
-        e.focus();
+        i.focus();
       } catch {
       }
     })), this._activeHeadless = !1, this.requestRender();
@@ -865,7 +866,7 @@ const c = "data-ui-auto-name", l = class l extends Z {
       });
     }
   }
-  _dispatchWithLegacy(t, e, r, a = !1) {
+  _dispatchWithLegacy(t, i, r, a = !1) {
     const o = new CustomEvent(t, {
       detail: r,
       bubbles: !0,
@@ -873,7 +874,7 @@ const c = "data-ui-auto-name", l = class l extends Z {
       cancelable: a
     });
     this.dispatchEvent(o);
-    const n = new CustomEvent(e, {
+    const n = new CustomEvent(i, {
       detail: r,
       bubbles: !0,
       composed: !0,
@@ -883,16 +884,16 @@ const c = "data-ui-auto-name", l = class l extends Z {
   }
   _isTopMost() {
     if (!this._active) return !1;
-    const t = l._openStack;
+    const t = c._openStack;
     return t.length > 0 && t[t.length - 1] === this;
   }
   _queryPanel() {
     return this.root.querySelector(".dialog");
   }
   _collectFocusable(t) {
-    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 J(t).filter((i) => {
+      if (i.disabled || i.getAttribute("aria-hidden") === "true") return !1;
+      const a = u() ? window.getComputedStyle(i) : null;
       return !(a && (a.display === "none" || a.visibility === "hidden"));
     });
   }
@@ -900,9 +901,9 @@ const c = "data-ui-auto-name", l = class l extends Z {
     if (!this.open) return;
     const t = this._queryPanel();
     if (!t) return;
-    const e = this.initialFocus;
-    if (e) {
-      const n = t.querySelector(e);
+    const i = this.initialFocus;
+    if (i) {
+      const n = t.querySelector(i);
       if (n && typeof n.focus == "function") {
         n.focus();
         return;
@@ -917,30 +918,30 @@ const c = "data-ui-auto-name", l = class l extends Z {
   }
   _handleTab(t) {
     if (t.key !== "Tab") return;
-    const e = this._queryPanel();
-    if (!e) return;
-    const r = this._collectFocusable(e);
+    const i = this._queryPanel();
+    if (!i) return;
+    const r = this._collectFocusable(i);
     if (!r.length) {
-      t.preventDefault(), e.focus();
+      t.preventDefault(), i.focus();
       return;
     }
-    const a = this.root.activeElement || document.activeElement, o = r[0], n = r[r.length - 1];
+    const a = Q(), o = r[0], n = r[r.length - 1];
     if (t.shiftKey) {
-      (a === o || !a || !e.contains(a)) && (t.preventDefault(), n.focus());
+      (a === o || !a || !U(i, a)) && (t.preventDefault(), n.focus());
       return;
     }
     a === n && (t.preventDefault(), o.focus());
   }
   _onFocusIn(t) {
     if (!this.open || !this._isTopMost()) return;
-    const e = this._queryPanel();
-    if (!e) return;
+    const i = this._queryPanel();
+    if (!i) return;
     const r = t.target;
-    (typeof t.composedPath == "function" ? t.composedPath() : []).includes(e) || r && e.contains(r) || this._focusInitial();
+    (typeof t.composedPath == "function" ? t.composedPath() : []).includes(i) || r && i.contains(r) || this._focusInitial();
   }
   _onInput(t) {
-    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", {
+    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", {
       id: this.dialogId || this._uid,
       inputValue: this._inputValue,
       checked: this._checked
@@ -949,8 +950,8 @@ const c = "data-ui-auto-name", l = class l extends Z {
   _isInteractionLocked() {
     return this.state === "loading" && this.lockWhileLoading;
   }
-  _requestDismiss(t, e) {
-    this._isInteractionLocked() || this.close("dismiss", t, e);
+  _requestDismiss(t, i) {
+    this._isInteractionLocked() || this.close("dismiss", t, i);
   }
   _handleConfirm() {
     const t = {
@@ -965,21 +966,21 @@ const c = "data-ui-auto-name", l = class l extends Z {
   }
   _onClick(t) {
     if (!this.open || !this._isTopMost()) return;
-    const e = t.target;
-    if (e) {
-      if (e.classList.contains("backdrop") && this.closeOnBackdrop) {
+    const i = t.target;
+    if (i) {
+      if (i.classList.contains("backdrop") && this.closeOnBackdrop) {
         this._requestDismiss("backdrop");
         return;
       }
-      if (e.closest(".close")) {
+      if (i.closest(".close")) {
         this._requestDismiss("close-icon");
         return;
       }
-      if (e.closest(".btn-confirm")) {
+      if (i.closest(".btn-confirm")) {
         this._handleConfirm();
         return;
       }
-      e.closest(".btn-cancel") && this._handleCancel();
+      i.closest(".btn-cancel") && this._handleCancel();
     }
   }
   _onKeyDown(t) {
@@ -995,23 +996,27 @@ const c = "data-ui-auto-name", l = class l extends Z {
   // 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, e = "", r = !1) {
+  _syncHostSemantics(t, i = "", r = !1) {
+    if (!this.hasAttribute("role")) {
+      this.hasAttribute(l) && (this.removeAttribute("aria-label"), this.removeAttribute(l)), t ? this.hasAttribute("aria-hidden") && this.removeAttribute("aria-hidden") : this.getAttribute("aria-hidden") !== "true" && this.setAttribute("aria-hidden", "true");
+      return;
+    }
     if (!t) {
-      this.getAttribute("aria-hidden") !== "true" && this.setAttribute("aria-hidden", "true"), this.hasAttribute(c) && (this.removeAttribute("aria-label"), this.removeAttribute(c));
+      this.getAttribute("aria-hidden") !== "true" && this.setAttribute("aria-hidden", "true"), this.hasAttribute(l) && (this.removeAttribute("aria-label"), this.removeAttribute(l));
       return;
     }
     if (this.hasAttribute("aria-hidden") && this.removeAttribute("aria-hidden"), r) {
-      this.hasAttribute(c) && this.removeAttribute(c);
+      this.hasAttribute(l) && this.removeAttribute(l);
       return;
     }
-    this.getAttribute("aria-label") !== e && this.setAttribute("aria-label", e), this.hasAttribute(c) || this.setAttribute(c, "");
+    this.getAttribute("aria-label") !== i && this.setAttribute("aria-label", i), this.hasAttribute(l) || this.setAttribute(l, "");
   }
   render() {
     if (!this.open) {
       this._syncHostSemantics(!1);
       const _ = this.root.querySelector(".backdrop");
       if (this._presented && _) {
-        this._presented = !1, _.removeAttribute("data-instant"), this._finishClose = G(_, () => {
+        this._presented = !1, _.removeAttribute("data-instant"), this._finishClose = X(_, () => {
           this._finishClose = null, this.setContent("");
         });
         return;
@@ -1021,24 +1026,24 @@ const c = "data-ui-auto-name", l = class l extends Z {
       return;
     }
     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();
+    const t = this._config.title ?? this.getAttribute("title") ?? "", i = 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, D = !!this._config.checkbox?.enabled, M = this._config.checkbox?.label || "Remember this choice", O = 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"]'), W = !!this.querySelector('[slot="icon"]'), R = !!this.querySelector('[slot="footer"]'), P = !!this.querySelector('[slot="content"]'), g = H || !!t, m = V || !!i, j = W || g || m, K = this._config.showCancel ?? this.dismissible, Y = this._config.showClose ?? this.dismissible, N = this.tone, v = this.hasAttribute(l) ? "" : this.getAttribute("aria-label") || "", F = this.getAttribute("aria-labelledby") || "", C = this.getAttribute("aria-describedby") || "", x = F || (g ? w : ""), I = v || (x ? "" : t || i || "Dialog"), Z = (this.querySelector('[slot="title"]')?.textContent || "").replace(/\s+/g, " ").trim();
     this._syncHostSemantics(
       !0,
-      v || U || t || e || "Dialog",
+      v || Z || t || i || "Dialog",
       !!v || !!F
     );
     const d = [];
     C ? d.push(C) : (m && d.push(A), b && d.push(z));
-    const h = M === "loading";
+    const h = O === "loading";
     this.setContent(`
-      <style>${Q}</style>
+      <style>${it}</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="${s(this.roleType)}"
           aria-modal="true"
-          ${E ? `aria-label="${s(E)}"` : ""}
+          ${I ? `aria-label="${s(I)}"` : ""}
           ${x ? `aria-labelledby="${s(x)}"` : ""}
           ${d.length ? `aria-describedby="${s(d.join(" "))}"` : ""}
           tabindex="-1"
@@ -1053,12 +1058,12 @@ const c = "data-ui-auto-name", l = class l extends Z {
                 <div class="header-main">
                   <span class="icon-wrap" part="icon-wrap" aria-hidden="true">
                     <span class="icon" part="icon">
-                      <slot name="icon">${nt(N)}</slot>
+                      <slot name="icon">${ct(N)}</slot>
                     </span>
                   </span>
                   <div class="heading">
                     ${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>` : ""}
+                    ${m ? `<p id="${A}" class="description" part="description"><slot name="description">${s(i)}</slot></p>` : ""}
                   </div>
                 </div>
               </header>` : ""}
@@ -1079,10 +1084,10 @@ const c = "data-ui-auto-name", l = class l extends Z {
                   />
                 </label>` : ""}
 
-            ${O ? `<label class="checkbox" part="checkbox">
+            ${D ? `<label class="checkbox" part="checkbox">
                   <span class="checkbox-line">
                     <input class="checkbox-input" type="checkbox" ${this.getChecked() ? "checked" : ""} ${h ? "disabled" : ""} />
-                    <span>${s(D)}</span>
+                    <span>${s(M)}</span>
                   </span>
                 </label>` : ""}
           </div>
@@ -1092,18 +1097,18 @@ const c = "data-ui-auto-name", l = class l extends Z {
           <footer class="footer" part="footer">
             ${h ? `<span class="loading"><span class="spinner" aria-hidden="true"></span><span>${s(o)}</span></span>` : '<span aria-hidden="true"></span>'}
 
-            ${W ? '<slot name="footer"></slot>' : `${K ? `<button class="btn btn-cancel" part="cancel" type="button" ${h ? "disabled" : ""}>${s(a)}</button>` : ""}
+            ${R ? '<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;
+    const E = this.root.querySelector(".backdrop");
+    E && !this.headless && tt(E, { resetBox: !1 }), this._presented = !0;
   }
 };
-l._openStack = [];
-let y = l;
+c._openStack = [];
+let y = c;
 typeof customElements < "u" && !customElements.get("ui-alert-dialog") && customElements.define("ui-alert-dialog", y);
 export {
   y as UIAlertDialog

package/dist/alert.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-DxbvhLJs.js"),z=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const z=require("./ElementBase-CbUsP3D6.js"),k=`
   :host {
     display: block;
     --ui-alert-radius: var(--base-alert-radius, var(--ui-radius, 6px));
@@ -334,23 +334,23 @@
       border-color: Highlight;
     }
   }
-`;function n(r){return String(r).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function k(r){return r==="neutral"||r==="success"||r==="warning"||r==="danger"?r:"info"}function _(r){return r==="surface"||r==="outline"||r==="solid"||r==="soft"?r:"surface"}function C(r){return r==="sm"||r==="lg"?r:r==="1"?"sm":r==="3"?"lg":"md"}function S(r){return r==="banner"?"banner":"inline"}function A(r){return r==="none"||r==="low"||r==="high"?r:"low"}function $(r){return r==="none"?"none":"line"}function B(r,i="var(--base-alert-radius, var(--ui-radius, 6px))"){if(!r||!r.trim())return i;const t=r.trim().toLowerCase();return t==="full"||t==="pill"?"999px":t==="square"||t==="none"?"0px":/^-?\d+(\.\d+)?$/.test(t)?`${t}px`:r.trim()}function o(r,i){return Array.from(r.children).some(t=>{if(!(t instanceof HTMLElement))return!1;const e=t.getAttribute("slot")||"";return i?e===i:e===""})}function E(r){return r==="success"?'<svg viewBox="0 0 20 20" width="16" height="16" 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>':r==="warning"?'<svg viewBox="0 0 20 20" width="16" height="16" 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>':r==="danger"?'<svg viewBox="0 0 20 20" width="16" height="16" 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>':'<svg viewBox="0 0 20 20" width="16" height="16" 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>'}class l extends y.ElementBase{constructor(){super(),this._dismissBtn=null,this._actionsSlot=null,this._onDismiss=this._onDismiss.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["title","description","dismissible","tone","variant","layout","headless","hidden","size","radius","elevation","indicator"]}disconnectedCallback(){this._dismissBtn&&(this._dismissBtn.removeEventListener("click",this._onDismiss),this._dismissBtn=null),this._actionsSlot&&(this._actionsSlot.removeEventListener("slotchange",this._onSlotChange),this._actionsSlot=null),super.disconnectedCallback()}get open(){return!this.hasAttribute("hidden")}set open(i){i?this.removeAttribute("hidden"):this.setAttribute("hidden","")}connectedCallback(){super.connectedCallback(),this._syncHostStyles()}attributeChangedCallback(i,t,e){if(t!==e){if(i==="radius"){this._syncHostStyles();return}super.attributeChangedCallback(i,t,e)}}_onDismiss(i){i.preventDefault();const t=new CustomEvent("close",{bubbles:!0,cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||(this.open=!1)}_onSlotChange(){const i=this.root.querySelector(".actions");if(!i||!this._actionsSlot)return;const t=this._actionsSlot.assignedNodes({flatten:!0}).length>0;i.setAttribute("data-empty",t?"false":"true")}_syncHostStyles(){const i=this.getAttribute("radius");if(i&&i.trim()){this.style.setProperty("--ui-alert-radius",B(i));return}this.style.removeProperty("--ui-alert-radius")}render(){const i=this.getAttribute("title")||"",t=this.getAttribute("description")||"",e=this.hasAttribute("dismissible"),a=k(this.getAttribute("tone")),u=_(this.getAttribute("variant")),c=S(this.getAttribute("layout")),d=C(this.getAttribute("size")),h=A(this.getAttribute("elevation")),p=$(this.getAttribute("indicator")),s=a==="danger"||a==="warning"?"alert":"status",g=s==="alert"?"assertive":"polite",b=o(this,"title"),f=o(this),v=o(this,"actions"),m=i||b?`<div class="title" part="title"><slot name="title">${n(i)}</slot></div>`:"",x=t||f?`<div class="description" part="description"><slot>${n(t)}</slot></div>`:"",w=a==="danger"?"Dismiss critical alert":"Dismiss alert";this.setContent(`
-      <style>${z}</style>
-      <section class="alert tone-${a} variant-${u} layout-${c} size-${d} elevation-${h} indicator-${p}" part="base" role="${s}" aria-live="${g}" aria-atomic="true">
+`;function n(r){return String(r).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function _(r){return r==="neutral"||r==="success"||r==="warning"||r==="danger"?r:"info"}function C(r){return r==="surface"||r==="outline"||r==="solid"||r==="soft"?r:"surface"}function S(r){return r==="sm"||r==="lg"?r:r==="1"?"sm":r==="3"?"lg":"md"}function A(r){return r==="banner"?"banner":"inline"}function $(r){return r==="none"||r==="low"||r==="high"?r:"low"}function B(r){return r==="none"?"none":"line"}function E(r,i="var(--base-alert-radius, var(--ui-radius, 6px))"){if(!r||!r.trim())return i;const t=r.trim().toLowerCase();return t==="full"||t==="pill"?"999px":t==="square"||t==="none"?"0px":/^-?\d+(\.\d+)?$/.test(t)?`${t}px`:r.trim()}function o(r,i){return Array.from(r.children).some(t=>{if(!(t instanceof HTMLElement))return!1;const e=t.getAttribute("slot")||"";return i?e===i:e===""})}function L(r){return r==="success"?'<svg viewBox="0 0 20 20" width="16" height="16" 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>':r==="warning"?'<svg viewBox="0 0 20 20" width="16" height="16" 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>':r==="danger"?'<svg viewBox="0 0 20 20" width="16" height="16" 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>':'<svg viewBox="0 0 20 20" width="16" height="16" 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>'}class l extends z.ElementBase{constructor(){super(),this._dismissBtn=null,this._actionsSlot=null,this._onDismiss=this._onDismiss.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["title","description","dismissible","tone","variant","layout","headless","hidden","size","radius","elevation","indicator","live"]}disconnectedCallback(){this._dismissBtn&&(this._dismissBtn.removeEventListener("click",this._onDismiss),this._dismissBtn=null),this._actionsSlot&&(this._actionsSlot.removeEventListener("slotchange",this._onSlotChange),this._actionsSlot=null),super.disconnectedCallback()}get open(){return!this.hasAttribute("hidden")}set open(i){i?this.removeAttribute("hidden"):this.setAttribute("hidden","")}connectedCallback(){super.connectedCallback(),this._syncHostStyles()}attributeChangedCallback(i,t,e){if(t!==e){if(i==="radius"){this._syncHostStyles();return}super.attributeChangedCallback(i,t,e)}}_onDismiss(i){i.preventDefault();const t=new CustomEvent("close",{bubbles:!0,cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||(this.open=!1)}_onSlotChange(){const i=this.root.querySelector(".actions");if(!i||!this._actionsSlot)return;const t=this._actionsSlot.assignedNodes({flatten:!0}).length>0;i.setAttribute("data-empty",t?"false":"true")}_syncHostStyles(){const i=this.getAttribute("radius");if(i&&i.trim()){this.style.setProperty("--ui-alert-radius",E(i));return}this.style.removeProperty("--ui-alert-radius")}render(){const i=this.getAttribute("title")||"",t=this.getAttribute("description")||"",e=this.hasAttribute("dismissible"),a=_(this.getAttribute("tone")),u=C(this.getAttribute("variant")),c=A(this.getAttribute("layout")),d=S(this.getAttribute("size")),h=$(this.getAttribute("elevation")),p=B(this.getAttribute("indicator")),g=this.getAttribute("live")!=="false",s=a==="danger"||a==="warning"?"alert":"status",b=g?`role="${s}" aria-live="${s==="alert"?"assertive":"polite"}" aria-atomic="true"`:"",f=o(this,"title"),v=o(this),m=o(this,"actions"),x=i||f?`<div class="title" part="title"><slot name="title">${n(i)}</slot></div>`:"",w=t||v?`<div class="description" part="description"><slot>${n(t)}</slot></div>`:"",y=a==="danger"?"Dismiss critical alert":"Dismiss alert";this.setContent(`
+      <style>${k}</style>
+      <section class="alert tone-${a} variant-${u} layout-${c} size-${d} elevation-${h} indicator-${p}" part="base" ${b}>
         <div class="row">
           <span class="icon-wrap" part="icon-wrap" aria-hidden="true">
             <span class="icon" part="icon">
-              <slot name="icon">${E(a)}</slot>
+              <slot name="icon">${L(a)}</slot>
             </span>
           </span>
           <div class="content">
-            ${m}
             ${x}
-            <div class="actions" part="actions" data-empty="${v?"false":"true"}">
+            ${w}
+            <div class="actions" part="actions" data-empty="${m?"false":"true"}">
               <slot name="actions"></slot>
             </div>
           </div>
-          ${e?`<button class="dismiss" part="dismiss" type="button" aria-label="${w}">
+          ${e?`<button class="dismiss" part="dismiss" type="button" aria-label="${y}">
                   <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>