@editora/ui-core 0.1.21 → 0.1.23

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-BeZT54Hj.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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-EV6mVBUV.js"),z=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-DxbvhLJs.js"),z=`
   :host {
     display: block;
     --ui-alert-radius: var(--base-alert-radius, var(--ui-radius, 4px));
@@ -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

@@ -1,4 +1,4 @@
-import { E as w } from "./ElementBase-YlTLMsGk.mjs";
+import { E as w } from "./ElementBase-BeZT54Hj.mjs";
 const y = `
   :host {
     display: block;
@@ -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/anchor.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./domElement-DazSZBjV.js"),n=`
   :host {
     display: inline-flex;
     vertical-align: middle;
@@ -22,8 +22,8 @@
     cursor: default;
     opacity: 0.6;
   }
-`;class i extends HTMLElement{static get observedAttributes(){return["href","target","rel","download","hreflang","referrerpolicy","ping","type","aria-label","title"]}constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML=`
-      <style>${r}</style>
+`;class i extends r.DOMElement{static get observedAttributes(){return["href","target","rel","download","hreflang","referrerpolicy","ping","type","aria-label","title"]}constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML=`
+      <style>${n}</style>
       <a part="anchor">
         <slot></slot>
       </a>

package/dist/anchor.esm.js

@@ -1,4 +1,5 @@
-const i = `
+import { D as i } from "./domElement-ZlSGVP0l.mjs";
+const r = `
   :host {
     display: inline-flex;
     vertical-align: middle;
@@ -23,7 +24,7 @@ const i = `
     opacity: 0.6;
   }
 `;
-class r extends HTMLElement {
+class n extends i {
   static get observedAttributes() {
     return ["href", "target", "rel", "download", "hreflang", "referrerpolicy", "ping", "type", "aria-label", "title"];
   }
@@ -31,7 +32,7 @@ class r extends HTMLElement {
     super();
     const t = this.attachShadow({ mode: "open" });
     t.innerHTML = `
-      <style>${i}</style>
+      <style>${r}</style>
       <a part="anchor">
         <slot></slot>
       </a>
@@ -56,7 +57,7 @@ class r extends HTMLElement {
     this.anchorEl.setAttribute(t, e);
   }
 }
-typeof customElements < "u" && !customElements.get("ui-anchor") && customElements.define("ui-anchor", r);
+typeof customElements < "u" && !customElements.get("ui-anchor") && customElements.define("ui-anchor", n);
 export {
-  r as UIAnchor
+  n as UIAnchor
 };

package/dist/animated-beam.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const ge=require("./ElementBase-EV6mVBUV.js"),ie=3200,ne=0,oe=0,se=3,re=4,de=.18,me=3,D="#8b5cf6",q="#f59e0b",fe="rgba(148, 163, 184, 0.34)",Q=2,xe=new Set(["none","sm","md","lg","full"]),ue=new Set(["brand","neutral","info","success","warning","danger"]),ye=new Set(["calm","smooth","snappy","surge","pulse","heartbeat"]),Y=new Set(["auto","straight","soft","arc"]),X=new Set(["forward","reverse"]),_e=new Set(["none","glow","pulse","ring","shake"]),K=["node-id","column","row","size","from","to","curve","direction","reverse","duration","delay","tone","color-start","color-end","beam-factor","trail-width","beam-width","id"],c={xxs:{nodeSize:36,hubSize:50,columnGap:72,rowGap:28,padding:12,minHeight:160,radius:16},xs:{nodeSize:46,hubSize:62,columnGap:88,rowGap:36,padding:16,minHeight:190,radius:18},sm:{nodeSize:56,hubSize:74,columnGap:108,rowGap:48,padding:20,minHeight:220,radius:22},md:{nodeSize:84,hubSize:116,columnGap:156,rowGap:72,padding:32,minHeight:320,radius:28},lg:{nodeSize:98,hubSize:132,columnGap:188,rowGap:88,padding:40,minHeight:400,radius:34}},v={calm:{durationScale:1.18,glowOpacity:.26,glowBlur:9,beamFactor:.15,pattern:"progress"},smooth:{durationScale:1,glowOpacity:.34,glowBlur:11,beamFactor:de,pattern:"progress"},snappy:{durationScale:.82,glowOpacity:.38,glowBlur:10,beamFactor:.2,pattern:"progress"},surge:{durationScale:.68,glowOpacity:.44,glowBlur:13,beamFactor:.24,pattern:"progress"},pulse:{durationScale:.92,glowOpacity:.42,glowBlur:14,beamFactor:.22,pattern:"pulse"},heartbeat:{durationScale:.86,glowOpacity:.48,glowBlur:15,beamFactor:.18,pattern:"heartbeat"}},E={brand:{start:D,end:q},neutral:{start:"#64748b",end:"#cbd5e1"},info:{start:"#38bdf8",end:"#6366f1"},success:{start:"#22c55e",end:"#14b8a6"},warning:{start:"#f59e0b",end:"#f97316"},danger:{start:"#ef4444",end:"#f97316"}},ve=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const ge=require("./ElementBase-DxbvhLJs.js"),ie=3200,ne=0,oe=0,se=3,re=4,de=.18,me=3,D="#8b5cf6",q="#f59e0b",fe="rgba(148, 163, 184, 0.34)",Q=2,xe=new Set(["none","sm","md","lg","full"]),ue=new Set(["brand","neutral","info","success","warning","danger"]),ye=new Set(["calm","smooth","snappy","surge","pulse","heartbeat"]),Y=new Set(["auto","straight","soft","arc"]),X=new Set(["forward","reverse"]),_e=new Set(["none","glow","pulse","ring","shake"]),K=["node-id","column","row","size","from","to","curve","direction","reverse","duration","delay","tone","color-start","color-end","beam-factor","trail-width","beam-width","id"],c={xxs:{nodeSize:36,hubSize:50,columnGap:72,rowGap:28,padding:12,minHeight:160,radius:16},xs:{nodeSize:46,hubSize:62,columnGap:88,rowGap:36,padding:16,minHeight:190,radius:18},sm:{nodeSize:56,hubSize:74,columnGap:108,rowGap:48,padding:20,minHeight:220,radius:22},md:{nodeSize:84,hubSize:116,columnGap:156,rowGap:72,padding:32,minHeight:320,radius:28},lg:{nodeSize:98,hubSize:132,columnGap:188,rowGap:88,padding:40,minHeight:400,radius:34}},v={calm:{durationScale:1.18,glowOpacity:.26,glowBlur:9,beamFactor:.15,pattern:"progress"},smooth:{durationScale:1,glowOpacity:.34,glowBlur:11,beamFactor:de,pattern:"progress"},snappy:{durationScale:.82,glowOpacity:.38,glowBlur:10,beamFactor:.2,pattern:"progress"},surge:{durationScale:.68,glowOpacity:.44,glowBlur:13,beamFactor:.24,pattern:"progress"},pulse:{durationScale:.92,glowOpacity:.42,glowBlur:14,beamFactor:.22,pattern:"pulse"},heartbeat:{durationScale:.86,glowOpacity:.48,glowBlur:15,beamFactor:.18,pattern:"heartbeat"}},E={brand:{start:D,end:q},neutral:{start:"#64748b",end:"#cbd5e1"},info:{start:"#38bdf8",end:"#6366f1"},success:{start:"#22c55e",end:"#14b8a6"},warning:{start:"#f59e0b",end:"#f97316"},danger:{start:"#ef4444",end:"#f97316"}},ve=`
   :host {
     --ui-animated-beam-required-width: 0px;
     --ui-animated-beam-duration: ${ie}ms;

package/dist/animated-beam.esm.js

@@ -1,4 +1,4 @@
-import { E as pe } from "./ElementBase-YlTLMsGk.mjs";
+import { E as pe } from "./ElementBase-BeZT54Hj.mjs";
 const ie = 3200, ne = 0, oe = 0, se = 3, re = 4, de = 0.18, me = 3, D = "#8b5cf6", q = "#f59e0b", fe = "rgba(148, 163, 184, 0.34)", j = 2, ge = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), ue = /* @__PURE__ */ new Set(["brand", "neutral", "info", "success", "warning", "danger"]), xe = /* @__PURE__ */ new Set(["calm", "smooth", "snappy", "surge", "pulse", "heartbeat"]), Y = /* @__PURE__ */ new Set(["auto", "straight", "soft", "arc"]), X = /* @__PURE__ */ new Set(["forward", "reverse"]), ye = /* @__PURE__ */ new Set(["none", "glow", "pulse", "ring", "shake"]), K = [
   "node-id",
   "column",

package/dist/animated-list.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-EV6mVBUV.js"),o="520ms",l="90ms",d="0ms",x=1400,h=.24,y=new Set(["none","sm","md","lg","full"]),v=new Set(["load","visible","manual"]),A=new Set(["calm","smooth","snappy","bouncy"]),S=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-DxbvhLJs.js"),o="520ms",l="90ms",d="0ms",x=1400,h=.24,y=new Set(["none","sm","md","lg","full"]),v=new Set(["load","visible","manual"]),A=new Set(["calm","smooth","snappy","bouncy"]),S=`
   :host {
     --ui-animated-list-duration: ${o};
     --ui-animated-list-stagger: ${l};
@@ -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"]) {