@editora/ui-core 0.1.21 → 0.1.22

package/dist/alert-dialog.esm.js

@@ -1,6 +1,6 @@
-import { E as K } from "./ElementBase-YlTLMsGk.mjs";
-import { a as F, r as z } from "./scroll-lock-LfqXXqsu.mjs";
-const Y = `
+import { E as N } from "./ElementBase-YlTLMsGk.mjs";
+import { a as C, r as I } from "./scroll-lock-LfqXXqsu.mjs";
+const U = `
   :host {
     display: block;
     color-scheme: light dark;
@@ -9,7 +9,7 @@ const Y = `
     --ui-alert-bg: var(--ui-alert-bg-base);
     --ui-alert-text: var(--ui-color-text, var(--ui-text, #202020));
     --ui-alert-muted: color-mix(in srgb, var(--ui-alert-text) 62%, var(--ui-color-muted, var(--ui-muted, #646464)) 38%);
-    --ui-alert-accent: var(--ui-color-muted, #64748b);
+    --ui-alert-accent: var(--ui-color-muted, #526175);
     --ui-alert-border-color: color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
     --ui-alert-border: var(--base-alert-dialog-border, 1px solid var(--ui-alert-border-color));
     --ui-alert-shadow: var(--base-alert-dialog-shadow, var(--shadow-4, none));
@@ -46,11 +46,11 @@ const Y = `
   }
 
   :host([tone='success']) {
-    --ui-alert-accent: var(--ui-color-success, #16a34a);
+    --ui-alert-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone='warning']) {
-    --ui-alert-accent: var(--ui-color-warning, #d97706);
+    --ui-alert-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone='danger']) {
@@ -106,11 +106,11 @@ const Y = `
     --ui-alert-bg: var(--ui-alert-accent);
     --ui-alert-border: 1px solid color-mix(in srgb, #000000 16%, transparent);
     --ui-alert-text: #ffffff;
-    --ui-alert-muted: color-mix(in srgb, #ffffff 78%, transparent);
-    --ui-alert-btn-bg: color-mix(in srgb, #ffffff 16%, transparent);
-    --ui-alert-btn-border: color-mix(in srgb, #ffffff 22%, transparent);
-    --ui-alert-btn-hover: color-mix(in srgb, #ffffff 24%, transparent);
-    --ui-alert-confirm-bg: color-mix(in srgb, #000000 22%, transparent);
+    --ui-alert-muted: color-mix(in srgb, #ffffff 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-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;
@@ -499,8 +499,8 @@ const Y = `
       border: 1px solid CanvasText;
     }
   }
-`, N = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function p(e, t) {
+`, 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";
@@ -508,42 +508,42 @@ function p(e, t) {
 function a(e) {
   return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function Z(e) {
+function G(e) {
   return e === "info" || e === "success" || e === "warning" || e === "danger" ? e : "neutral";
 }
-function G(e) {
+function J(e) {
   return e === "sm" || e === "1" ? "sm" : e === "lg" || e === "3" ? "lg" : "md";
 }
-function J(e) {
+function Q(e) {
   return e === "soft" || e === "outline" || e === "solid" ? e : "surface";
 }
-function Q(e) {
+function X(e) {
   return e === "none" || e === "high" ? e : "low";
 }
-function U(e) {
+function tt(e) {
   return e === "none" ? "none" : "line";
 }
-function X(e, t = "var(--base-alert-dialog-radius, var(--ui-radius, 4px))") {
+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;
 }
-const tt = /* @__PURE__ */ new Set(["tone", "size", "variant", "elevation", "indicator", "radius"]);
-function it(e) {
+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>';
 }
-function c() {
+function u() {
   return typeof window < "u" && typeof document < "u";
 }
-function E() {
-  if (!c()) return null;
+function S() {
+  if (!u()) return null;
   const e = document.activeElement;
   return e instanceof HTMLElement ? e : null;
 }
-function v(e) {
+function _(e) {
   return typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => e()) : window.setTimeout(e, 16);
 }
-function h(e) {
+function p(e) {
   if (e) {
     if (typeof cancelAnimationFrame == "function") {
       cancelAnimationFrame(e);
@@ -552,7 +552,7 @@ function h(e) {
     window.clearTimeout(e);
   }
 }
-const l = class l extends K {
+const c = "data-ui-auto-name", l = class l extends N {
   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;
   }
@@ -588,11 +588,11 @@ const l = class l extends K {
     super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this.root.addEventListener("input", this._onInput), this._syncFromAttributes(), this._syncVisualTokens(), this._syncOpenState();
   }
   disconnectedCallback() {
-    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this.root.removeEventListener("input", this._onInput), this._focusInitialFrame && (h(this._focusInitialFrame), this._focusInitialFrame = 0), this._restoreFocusFrame && (h(this._restoreFocusFrame), this._restoreFocusFrame = 0), this._active && !this._terminalEmitted && this.close("dismiss", "unmount"), this._deactivate(), super.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 (tt.has(t)) {
+      if (et.has(t)) {
         this._syncVisualTokens();
         return;
       }
@@ -620,25 +620,25 @@ const l = class l extends K {
     t ? this.setAttribute("headless", "") : this.removeAttribute("headless");
   }
   get dismissible() {
-    return p(this.getAttribute("dismissible"), !0);
+    return b(this.getAttribute("dismissible"), !0);
   }
   set dismissible(t) {
     this.setAttribute("dismissible", String(t));
   }
   get closeOnEsc() {
-    return p(this.getAttribute("close-on-esc"), this.dismissible);
+    return b(this.getAttribute("close-on-esc"), this.dismissible);
   }
   set closeOnEsc(t) {
     this.setAttribute("close-on-esc", String(t));
   }
   get closeOnBackdrop() {
-    return p(this.getAttribute("close-on-backdrop"), this.dismissible);
+    return b(this.getAttribute("close-on-backdrop"), this.dismissible);
   }
   set closeOnBackdrop(t) {
     this.setAttribute("close-on-backdrop", String(t));
   }
   get lockWhileLoading() {
-    return p(this.getAttribute("lock-while-loading"), !0);
+    return b(this.getAttribute("lock-while-loading"), !0);
   }
   set lockWhileLoading(t) {
     this.setAttribute("lock-while-loading", String(t));
@@ -650,7 +650,7 @@ const l = class l extends K {
     this.setAttribute("role", t);
   }
   get tone() {
-    return Z(this.getAttribute("tone"));
+    return G(this.getAttribute("tone"));
   }
   set tone(t) {
     if (t === "neutral") {
@@ -660,7 +660,7 @@ const l = class l extends K {
     this.setAttribute("tone", t);
   }
   get size() {
-    return G(this.getAttribute("size"));
+    return J(this.getAttribute("size"));
   }
   set size(t) {
     if (t === "md") {
@@ -670,7 +670,7 @@ const l = class l extends K {
     this.setAttribute("size", t);
   }
   get variant() {
-    return J(this.getAttribute("variant"));
+    return Q(this.getAttribute("variant"));
   }
   set variant(t) {
     if (t === "surface") {
@@ -680,7 +680,7 @@ const l = class l extends K {
     this.setAttribute("variant", t);
   }
   get elevation() {
-    return Q(this.getAttribute("elevation"));
+    return X(this.getAttribute("elevation"));
   }
   set elevation(t) {
     if (t === "low") {
@@ -690,7 +690,7 @@ const l = class l extends K {
     this.setAttribute("elevation", t);
   }
   get indicator() {
-    return U(this.getAttribute("indicator"));
+    return tt(this.getAttribute("indicator"));
   }
   set indicator(t) {
     if (t === "line") {
@@ -771,7 +771,7 @@ const l = class l extends K {
     this.hasAttribute("role") || this.setAttribute("role", "alertdialog");
   }
   _syncVisualTokens() {
-    this.style.setProperty("--ui-alert-radius", X(this.getAttribute("radius")));
+    this.style.setProperty("--ui-alert-radius", it(this.getAttribute("radius")));
   }
   _syncOpenState() {
     const t = this.hasAttribute("open");
@@ -782,9 +782,9 @@ const l = class l extends K {
     !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 : E(), this.headless || F(), c() && !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 : S(), this.headless || C(), 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 && h(this._focusInitialFrame), this._focusInitialFrame = v(() => {
+    this._dispatchWithLegacy("ui-open", "open", { id: t }), this.headless || (this._focusInitialFrame && p(this._focusInitialFrame), this._focusInitialFrame = _(() => {
       this._focusInitialFrame = 0, this._focusInitial();
     })), this.requestRender();
   }
@@ -792,7 +792,7 @@ const l = class l extends K {
     if (!this._active) return;
     this._active = !1;
     const t = l._openStack.lastIndexOf(this);
-    if (t >= 0 && l._openStack.splice(t, 1), c() && !this._activeHeadless && document.removeEventListener("focusin", this._onFocusIn, !0), this._activeHeadless || z(), !this._terminalEmitted) {
+    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,
@@ -806,7 +806,7 @@ const l = class l extends K {
       }), this._terminalEmitted = !0, this._closeMeta = null;
     }
     const i = this._lastActive;
-    this._lastActive = null, i && !this._activeHeadless && (this._restoreFocusFrame && h(this._restoreFocusFrame), this._restoreFocusFrame = v(() => {
+    this._lastActive = null, i && !this._activeHeadless && (this._restoreFocusFrame && p(this._restoreFocusFrame), this._restoreFocusFrame = _(() => {
       this._restoreFocusFrame = 0;
       try {
         i.focus();
@@ -817,10 +817,10 @@ const l = class l extends K {
   _syncActiveEnvironment() {
     if (this._active && this.headless !== this._activeHeadless) {
       if (this.headless) {
-        c() && document.removeEventListener("focusin", this._onFocusIn, !0), z(), this._lastActive = null, this._activeHeadless = !0;
+        u() && document.removeEventListener("focusin", this._onFocusIn, !0), I(), this._lastActive = null, this._activeHeadless = !0;
         return;
       }
-      this._lastActive = E(), F(), c() && document.addEventListener("focusin", this._onFocusIn, !0), this._activeHeadless = !1, this._focusInitialFrame && h(this._focusInitialFrame), this._focusInitialFrame = v(() => {
+      this._lastActive = S(), C(), u() && document.addEventListener("focusin", this._onFocusIn, !0), this._activeHeadless = !1, this._focusInitialFrame && p(this._focusInitialFrame), this._focusInitialFrame = _(() => {
         this._focusInitialFrame = 0, this._focusInitial();
       });
     }
@@ -850,9 +850,9 @@ const l = class l extends K {
     return this.root.querySelector(".dialog");
   }
   _collectFocusable(t) {
-    return Array.from(t.querySelectorAll(N)).filter((i) => {
+    return Array.from(t.querySelectorAll(Z)).filter((i) => {
       if (i.disabled || i.getAttribute("aria-hidden") === "true") return !1;
-      const s = c() ? window.getComputedStyle(i) : null;
+      const s = u() ? window.getComputedStyle(i) : null;
       return !(s && (s.display === "none" || s.visibility === "hidden"));
     });
   }
@@ -952,78 +952,98 @@ const l = class l extends K {
       this._handleTab(t);
     }
   }
+  // 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) {
+    if (!t) {
+      this.getAttribute("aria-hidden") !== "true" && this.setAttribute("aria-hidden", "true"), this.hasAttribute(c) && (this.removeAttribute("aria-label"), this.removeAttribute(c));
+      return;
+    }
+    if (this.hasAttribute("aria-hidden") && this.removeAttribute("aria-hidden"), r) {
+      this.hasAttribute(c) && this.removeAttribute(c);
+      return;
+    }
+    this.getAttribute("aria-label") !== i && this.setAttribute("aria-label", i), this.hasAttribute(c) || this.setAttribute(c, "");
+  }
   render() {
     if (!this.open) {
-      this.setContent("");
+      this._syncHostSemantics(!1), 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, I = this._config.input?.label || "Value", C = this._config.input?.placeholder || "", L = !!this._config.input?.required, S = !!this._config.checkbox?.enabled, $ = this._config.checkbox?.label || "Remember this choice", B = this.state, f = this._runtimeError || this._config.errorMessage || this.getAttribute("error-message") || "", _ = `ui-alert-title-${this._uid}`, k = `ui-alert-description-${this._uid}`, y = `ui-alert-error-${this._uid}`, T = !!this.querySelector('[slot="title"]'), q = !!this.querySelector('[slot="description"]'), M = !!this.querySelector('[slot="icon"]'), O = !!this.querySelector('[slot="footer"]'), D = !!this.querySelector('[slot="content"]'), g = T || !!t, b = q || !!i, V = M || g || b, H = this._config.showCancel ?? this.dismissible, W = this._config.showClose ?? this.dismissible, R = this.tone, P = this.getAttribute("aria-label") || "", j = this.getAttribute("aria-labelledby") || "", w = this.getAttribute("aria-describedby") || "", m = j || (g ? _ : ""), A = P || (m ? "" : t || i || "Dialog"), u = [];
-    w ? u.push(w) : (b && u.push(k), f && u.push(y));
-    const d = B === "loading";
+    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._syncHostSemantics(
+      !0,
+      v || Y || t || i || "Dialog",
+      !!v || !!F
+    );
+    const d = [];
+    z ? d.push(z) : (m && d.push(w), f && d.push(A));
+    const h = M === "loading";
     this.setContent(`
-      <style>${Y}</style>
+      <style>${U}</style>
       <div class="backdrop" part="backdrop" role="presentation" data-open="${String(this.open)}">
         <section
           class="dialog"
           part="dialog"
           role="${a(this.roleType)}"
           aria-modal="true"
-          ${A ? `aria-label="${a(A)}"` : ""}
-          ${m ? `aria-labelledby="${a(m)}"` : ""}
-          ${u.length ? `aria-describedby="${a(u.join(" "))}"` : ""}
+          ${E ? `aria-label="${a(E)}"` : ""}
+          ${x ? `aria-labelledby="${a(x)}"` : ""}
+          ${d.length ? `aria-describedby="${a(d.join(" "))}"` : ""}
           tabindex="-1"
         >
-          ${W ? `<button class="close" part="close" aria-label="Close dialog">
+          ${j ? `<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>` : ""}
 
-          ${V ? `<header class="header">
+          ${W ? `<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">${it(R)}</slot>
+                      <slot name="icon">${rt(K)}</slot>
                     </span>
                   </span>
                   <div class="heading">
-                    ${g ? `<h2 id="${_}" class="title" part="title"><slot name="title">${a(t)}</slot></h2>` : ""}
-                    ${b ? `<p id="${k}" class="description" part="description"><slot name="description">${a(i)}</slot></p>` : ""}
+                    ${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>` : ""}
                   </div>
                 </div>
               </header>` : ""}
 
           <div class="content" part="content">
-            ${D ? '<slot name="content"></slot>' : "<slot></slot>"}
+            ${R ? '<slot name="content"></slot>' : "<slot></slot>"}
 
             ${n ? `<label class="input-wrap">
-                  <span class="label">${a(I)}</span>
+                  <span class="label">${a(L)}</span>
                   <input
                     class="input"
                     part="input"
                     type="text"
                     value="${a(this.getInputValue())}"
-                    placeholder="${a(C)}"
-                    ${L ? "required" : ""}
-                    ${d ? "disabled" : ""}
+                    placeholder="${a($)}"
+                    ${T ? "required" : ""}
+                    ${h ? "disabled" : ""}
                   />
                 </label>` : ""}
 
-            ${S ? `<label class="checkbox" part="checkbox">
+            ${B ? `<label class="checkbox" part="checkbox">
                   <span class="checkbox-line">
-                    <input class="checkbox-input" type="checkbox" ${this.getChecked() ? "checked" : ""} ${d ? "disabled" : ""} />
-                    <span>${a($)}</span>
+                    <input class="checkbox-input" type="checkbox" ${this.getChecked() ? "checked" : ""} ${h ? "disabled" : ""} />
+                    <span>${a(q)}</span>
                   </span>
                 </label>` : ""}
           </div>
 
-          <div class="error" id="${y}" part="error" aria-live="polite" data-empty="${String(!f)}">${a(f)}</div>
+          <div class="error" id="${A}" part="error" aria-live="polite" data-empty="${String(!f)}">${a(f)}</div>
 
           <footer class="footer" part="footer">
-            ${d ? `<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>${a(o)}</span></span>` : '<span aria-hidden="true"></span>'}
 
-            ${O ? '<slot name="footer"></slot>' : `${H ? `<button class="btn btn-cancel" part="cancel" type="button" ${d ? "disabled" : ""}>${a(s)}</button>` : ""}
-                 <button class="btn btn-confirm" part="confirm" type="button" ${d ? "disabled" : ""}>${a(r)}</button>`}
+            ${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>`}
           </footer>
         </section>
       </div>
@@ -1031,8 +1051,8 @@ const l = class l extends K {
   }
 };
 l._openStack = [];
-let x = l;
-typeof customElements < "u" && !customElements.get("ui-alert-dialog") && customElements.define("ui-alert-dialog", x);
+let k = l;
+typeof customElements < "u" && !customElements.get("ui-alert-dialog") && customElements.define("ui-alert-dialog", k);
 export {
-  x as UIAlertDialog
+  k as UIAlertDialog
 };

package/dist/alert.cjs.js

@@ -10,7 +10,7 @@
     --ui-alert-surface-base: var(--base-alert-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-alert-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 6%, var(--ui-alert-surface-base));
     --ui-alert-color: var(--ui-color-text, var(--ui-text, #202020));
-    --ui-alert-muted: color-mix(in srgb, var(--ui-alert-color) 62%, var(--ui-color-muted, var(--ui-muted, #64748b)) 38%);
+    --ui-alert-muted: color-mix(in srgb, var(--ui-alert-color) 62%, var(--ui-color-muted, var(--ui-muted, #526175)) 38%);
     --ui-alert-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-alert-shadow: var(--base-alert-shadow, var(--shadow-2, none));
     --ui-alert-icon-bg: color-mix(in srgb, var(--ui-alert-accent) 14%, transparent);
@@ -240,16 +240,16 @@
     --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-primary, #2563eb) 28%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
   :host([tone="success"]) .alert {
-    --ui-alert-accent: var(--ui-color-success, #16a34a);
+    --ui-alert-accent: var(--ui-color-success, #15803d);
     --ui-alert-bg: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--ui-color-success, #16a34a) 14%, var(--ui-color-surface, #ffffff)) 0%,
-      color-mix(in srgb, var(--ui-color-success, #16a34a) 10%, var(--ui-color-surface, #ffffff)) 100%
+      color-mix(in srgb, var(--ui-color-success, #15803d) 14%, var(--ui-color-surface, #ffffff)) 0%,
+      color-mix(in srgb, var(--ui-color-success, #15803d) 10%, var(--ui-color-surface, #ffffff)) 100%
     );
-    --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-success, #16a34a) 30%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
+    --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-success, #15803d) 30%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
   :host([tone="warning"]) .alert {
-    --ui-alert-accent: var(--ui-color-warning, #d97706);
+    --ui-alert-accent: var(--ui-color-warning, #b45309);
     --ui-alert-bg: linear-gradient(
       180deg,
       color-mix(in srgb, var(--ui-color-warning, #f59e0b) 16%, var(--ui-color-surface, #ffffff)) 0%,

package/dist/alert.esm.js

@@ -11,7 +11,7 @@ const y = `
     --ui-alert-surface-base: var(--base-alert-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-alert-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 6%, var(--ui-alert-surface-base));
     --ui-alert-color: var(--ui-color-text, var(--ui-text, #202020));
-    --ui-alert-muted: color-mix(in srgb, var(--ui-alert-color) 62%, var(--ui-color-muted, var(--ui-muted, #64748b)) 38%);
+    --ui-alert-muted: color-mix(in srgb, var(--ui-alert-color) 62%, var(--ui-color-muted, var(--ui-muted, #526175)) 38%);
     --ui-alert-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-alert-shadow: var(--base-alert-shadow, var(--shadow-2, none));
     --ui-alert-icon-bg: color-mix(in srgb, var(--ui-alert-accent) 14%, transparent);
@@ -241,16 +241,16 @@ const y = `
     --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-primary, #2563eb) 28%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
   :host([tone="success"]) .alert {
-    --ui-alert-accent: var(--ui-color-success, #16a34a);
+    --ui-alert-accent: var(--ui-color-success, #15803d);
     --ui-alert-bg: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--ui-color-success, #16a34a) 14%, var(--ui-color-surface, #ffffff)) 0%,
-      color-mix(in srgb, var(--ui-color-success, #16a34a) 10%, var(--ui-color-surface, #ffffff)) 100%
+      color-mix(in srgb, var(--ui-color-success, #15803d) 14%, var(--ui-color-surface, #ffffff)) 0%,
+      color-mix(in srgb, var(--ui-color-success, #15803d) 10%, var(--ui-color-surface, #ffffff)) 100%
     );
-    --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-success, #16a34a) 30%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
+    --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-success, #15803d) 30%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
   :host([tone="warning"]) .alert {
-    --ui-alert-accent: var(--ui-color-warning, #d97706);
+    --ui-alert-accent: var(--ui-color-warning, #b45309);
     --ui-alert-bg: linear-gradient(
       180deg,
       color-mix(in srgb, var(--ui-color-warning, #f59e0b) 16%, var(--ui-color-surface, #ffffff)) 0%,

package/dist/animated-list.cjs.js

@@ -46,7 +46,7 @@
       0 1px 2px rgba(15, 23, 42, 0.04),
       0 10px 18px rgba(15, 23, 42, 0.06);
     --ui-animated-list-item-color: inherit;
-    --ui-animated-list-item-muted: var(--ui-color-muted, #64748b);
+    --ui-animated-list-item-muted: var(--ui-color-muted, #526175);
     --ui-animated-list-item-backdrop: none;
 
     display: block;
@@ -132,7 +132,7 @@
   }
 
   :host([tone="neutral"]) {
-    --ui-animated-list-accent: #64748b;
+    --ui-animated-list-accent: #526175;
   }
 
   :host([tone="info"]) {
@@ -140,11 +140,11 @@
   }
 
   :host([tone="success"]) {
-    --ui-animated-list-accent: var(--ui-color-success, #16a34a);
+    --ui-animated-list-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-animated-list-accent: var(--ui-color-warning, #d97706);
+    --ui-animated-list-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {

package/dist/animated-list.esm.js

@@ -47,7 +47,7 @@ const o = "520ms", l = "90ms", d = "0ms", _ = 1400, h = 0.24, x = /* @__PURE__ *
       0 1px 2px rgba(15, 23, 42, 0.04),
       0 10px 18px rgba(15, 23, 42, 0.06);
     --ui-animated-list-item-color: inherit;
-    --ui-animated-list-item-muted: var(--ui-color-muted, #64748b);
+    --ui-animated-list-item-muted: var(--ui-color-muted, #526175);
     --ui-animated-list-item-backdrop: none;
 
     display: block;
@@ -133,7 +133,7 @@ const o = "520ms", l = "90ms", d = "0ms", _ = 1400, h = 0.24, x = /* @__PURE__ *
   }
 
   :host([tone="neutral"]) {
-    --ui-animated-list-accent: #64748b;
+    --ui-animated-list-accent: #526175;
   }
 
   :host([tone="info"]) {
@@ -141,11 +141,11 @@ const o = "520ms", l = "90ms", d = "0ms", _ = 1400, h = 0.24, x = /* @__PURE__ *
   }
 
   :host([tone="success"]) {
-    --ui-animated-list-accent: var(--ui-color-success, #16a34a);
+    --ui-animated-list-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-animated-list-accent: var(--ui-color-warning, #d97706);
+    --ui-animated-list-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {

package/dist/animated-text.cjs.js

@@ -75,19 +75,19 @@
   }
 
   :host([tone="neutral"]) {
-    --ui-animated-text-accent: #64748b;
+    --ui-animated-text-accent: #526175;
   }
 
   :host([tone="info"]) {
-    --ui-animated-text-accent: #0ea5e9;
+    --ui-animated-text-accent: var(--ui-color-info, #0e7490);
   }
 
   :host([tone="success"]) {
-    --ui-animated-text-accent: var(--ui-color-success, #16a34a);
+    --ui-animated-text-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-animated-text-accent: var(--ui-color-warning, #d97706);
+    --ui-animated-text-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {

package/dist/animated-text.esm.js

@@ -91,19 +91,19 @@ const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set(
   }
 
   :host([tone="neutral"]) {
-    --ui-animated-text-accent: #64748b;
+    --ui-animated-text-accent: #526175;
   }
 
   :host([tone="info"]) {
-    --ui-animated-text-accent: #0ea5e9;
+    --ui-animated-text-accent: var(--ui-color-info, #0e7490);
   }
 
   :host([tone="success"]) {
-    --ui-animated-text-accent: var(--ui-color-success, #16a34a);
+    --ui-animated-text-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-animated-text-accent: var(--ui-color-warning, #d97706);
+    --ui-animated-text-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {

package/dist/app-header.cjs.js

@@ -77,7 +77,7 @@
   :host([variant='solid']) {
     --ui-app-header-bg: var(--ui-app-header-accent);
     --ui-app-header-color: #ffffff;
-    --ui-app-header-muted: color-mix(in srgb, #ffffff 76%, transparent);
+    --ui-app-header-muted: color-mix(in srgb, #ffffff 94%, transparent);
     --ui-app-header-border: 1px solid color-mix(in srgb, #000000 16%, transparent);
     --ui-app-header-control-bg: color-mix(in srgb, #ffffff 14%, transparent);
     --ui-app-header-control-bg-hover: color-mix(in srgb, #ffffff 24%, transparent);
@@ -102,11 +102,11 @@
   }
 
   :host([tone='success']) {
-    --ui-app-header-accent: var(--ui-color-success, #16a34a);
+    --ui-app-header-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone='warning']) {
-    --ui-app-header-accent: var(--ui-color-warning, #d97706);
+    --ui-app-header-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone='danger']) {