@editora/ui-core 0.1.12 → 0.1.13

package/dist/alert-dialog.esm.js

@@ -1,6 +1,6 @@
-import { E as Z } from "./ElementBase-909688f3.mjs";
-import { a as L, r as I } from "./scroll-lock-9de6d328.mjs";
-const G = `
+import { E as J } from "./ElementBase-909688f3.mjs";
+import { a as L, r as S } from "./scroll-lock-31da444f.mjs";
+const Q = `
   :host {
     display: block;
     color-scheme: light dark;
@@ -499,53 +499,65 @@ const G = `
       border: 1px solid CanvasText;
     }
   }
-`, J = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function h(i, t) {
-  if (i == null)
+`, X = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function p(e, t) {
+  if (e == null)
     return t;
-  const e = i.trim().toLowerCase();
-  return e !== "false" && e !== "0" && e !== "off";
+  const i = e.trim().toLowerCase();
+  return i !== "false" && i !== "0" && i !== "off";
 }
-function a(i) {
-  return String(i).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function a(e) {
+  return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function Q(i) {
-  return i === "info" || i === "success" || i === "warning" || i === "danger" ? i : "neutral";
+function tt(e) {
+  return e === "info" || e === "success" || e === "warning" || e === "danger" ? e : "neutral";
 }
-function X(i) {
-  return i === "sm" || i === "1" ? "sm" : i === "lg" || i === "3" ? "lg" : "md";
+function it(e) {
+  return e === "sm" || e === "1" ? "sm" : e === "lg" || e === "3" ? "lg" : "md";
 }
-function tt(i) {
-  return i === "soft" || i === "outline" || i === "solid" ? i : "surface";
+function et(e) {
+  return e === "soft" || e === "outline" || e === "solid" ? e : "surface";
 }
-function et(i) {
-  return i === "none" || i === "high" ? i : "low";
+function rt(e) {
+  return e === "none" || e === "high" ? e : "low";
 }
-function it(i) {
-  return i === "none" ? "none" : "line";
+function st(e) {
+  return e === "none" ? "none" : "line";
 }
-function rt(i, t = "var(--base-alert-dialog-radius, var(--ui-radius, 4px))") {
-  if (i == null)
+function at(e, t = "var(--base-alert-dialog-radius, var(--ui-radius, 4px))") {
+  if (e == null)
     return t;
-  const e = i.trim().toLowerCase();
-  return e ? e === "full" || e === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(e) ? `${e}px` : i : t;
+  const i = e.trim().toLowerCase();
+  return i ? i === "full" || i === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(i) ? `${i}px` : e : t;
 }
-const st = /* @__PURE__ */ new Set(["tone", "size", "variant", "elevation", "indicator", "radius"]);
-function at(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 ot = /* @__PURE__ */ new Set(["tone", "size", "variant", "elevation", "indicator", "radius"]);
+function nt(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 l() {
   return typeof window < "u" && typeof document < "u";
 }
-function S() {
+function $() {
   if (!l())
     return null;
-  const i = document.activeElement;
-  return i instanceof HTMLElement ? i : null;
+  const e = document.activeElement;
+  return e instanceof HTMLElement ? e : null;
 }
-const $ = class c extends Z {
+function v(e) {
+  return typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => e()) : window.setTimeout(e, 16);
+}
+function h(e) {
+  if (e) {
+    if (typeof cancelAnimationFrame == "function") {
+      cancelAnimationFrame(e);
+      return;
+    }
+    window.clearTimeout(e);
+  }
+}
+const B = class c extends J {
   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._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onInput = this._onInput.bind(this), this._dialogId = this._uid;
+    super(), this._lastActive = null, this._active = !1, this._terminalEmitted = !1, this._closeMeta = null, this._uid = Math.random().toString(36).slice(2, 10), this._dialogId = "", this._config = {}, this._inputValue = "", this._checked = !1, this._runtimeError = "", this._activeHeadless = !1, this._focusInitialFrame = 0, this._restoreFocusFrame = 0, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onInput = this._onInput.bind(this), this._dialogId = this._uid;
   }
   static get observedAttributes() {
     return [
@@ -579,11 +591,11 @@ const $ = class c extends Z {
     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._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 && (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();
   }
-  attributeChangedCallback(t, e, r) {
-    if (e !== r) {
-      if (st.has(t)) {
+  attributeChangedCallback(t, i, r) {
+    if (i !== r) {
+      if (ot.has(t)) {
         this._syncVisualTokens();
         return;
       }
@@ -611,25 +623,25 @@ const $ = class c extends Z {
     t ? this.setAttribute("headless", "") : this.removeAttribute("headless");
   }
   get dismissible() {
-    return h(this.getAttribute("dismissible"), !0);
+    return p(this.getAttribute("dismissible"), !0);
   }
   set dismissible(t) {
     this.setAttribute("dismissible", String(t));
   }
   get closeOnEsc() {
-    return h(this.getAttribute("close-on-esc"), this.dismissible);
+    return p(this.getAttribute("close-on-esc"), this.dismissible);
   }
   set closeOnEsc(t) {
     this.setAttribute("close-on-esc", String(t));
   }
   get closeOnBackdrop() {
-    return h(this.getAttribute("close-on-backdrop"), this.dismissible);
+    return p(this.getAttribute("close-on-backdrop"), this.dismissible);
   }
   set closeOnBackdrop(t) {
     this.setAttribute("close-on-backdrop", String(t));
   }
   get lockWhileLoading() {
-    return h(this.getAttribute("lock-while-loading"), !0);
+    return p(this.getAttribute("lock-while-loading"), !0);
   }
   set lockWhileLoading(t) {
     this.setAttribute("lock-while-loading", String(t));
@@ -641,7 +653,7 @@ const $ = class c extends Z {
     this.setAttribute("role", t);
   }
   get tone() {
-    return Q(this.getAttribute("tone"));
+    return tt(this.getAttribute("tone"));
   }
   set tone(t) {
     if (t === "neutral") {
@@ -651,7 +663,7 @@ const $ = class c extends Z {
     this.setAttribute("tone", t);
   }
   get size() {
-    return X(this.getAttribute("size"));
+    return it(this.getAttribute("size"));
   }
   set size(t) {
     if (t === "md") {
@@ -661,7 +673,7 @@ const $ = class c extends Z {
     this.setAttribute("size", t);
   }
   get variant() {
-    return tt(this.getAttribute("variant"));
+    return et(this.getAttribute("variant"));
   }
   set variant(t) {
     if (t === "surface") {
@@ -671,7 +683,7 @@ const $ = class c extends Z {
     this.setAttribute("variant", t);
   }
   get elevation() {
-    return et(this.getAttribute("elevation"));
+    return rt(this.getAttribute("elevation"));
   }
   set elevation(t) {
     if (t === "low") {
@@ -681,7 +693,7 @@ const $ = class c extends Z {
     this.setAttribute("elevation", t);
   }
   get indicator() {
-    return it(this.getAttribute("indicator"));
+    return st(this.getAttribute("indicator"));
   }
   set indicator(t) {
     if (t === "line") {
@@ -731,8 +743,8 @@ const $ = class c extends Z {
     return this._config;
   }
   set config(t) {
-    var e, r;
-    this._config = t || {}, this._config.id && (this._dialogId = this._config.id), this._config.dismissible != null && (this.dismissible = !!this._config.dismissible), this._config.closeOnEsc != null && (this.closeOnEsc = !!this._config.closeOnEsc), this._config.closeOnBackdrop != null && (this.closeOnBackdrop = !!this._config.closeOnBackdrop), this._config.lockWhileLoading != null && (this.lockWhileLoading = !!this._config.lockWhileLoading), this._config.role && (this.roleType = this._config.role), this._config.tone && (this.tone = this._config.tone), this._config.size && (this.size = this._config.size), this._config.variant && (this.variant = this._config.variant), this._config.elevation && (this.elevation = this._config.elevation), this._config.indicator && (this.indicator = this._config.indicator), this._config.radius != null && (this.radius = String(this._config.radius)), this._config.ariaLabel && this.setAttribute("aria-label", this._config.ariaLabel), this._config.ariaLabelledby && this.setAttribute("aria-labelledby", this._config.ariaLabelledby), this._config.ariaDescribedby && this.setAttribute("aria-describedby", this._config.ariaDescribedby), this._config.initialFocus && (this.initialFocus = this._config.initialFocus), this._config.headless != null && (this.headless = !!this._config.headless), this._inputValue = ((e = this._config.input) == null ? void 0 : e.value) ?? this._inputValue, this._checked = ((r = this._config.checkbox) == null ? void 0 : r.checked) ?? this._checked, this._runtimeError = this._config.errorMessage || "", this._syncVisualTokens(), this.requestRender();
+    var i, r;
+    this._config = t || {}, this._config.id && (this._dialogId = this._config.id), this._config.dismissible != null && (this.dismissible = !!this._config.dismissible), this._config.closeOnEsc != null && (this.closeOnEsc = !!this._config.closeOnEsc), this._config.closeOnBackdrop != null && (this.closeOnBackdrop = !!this._config.closeOnBackdrop), this._config.lockWhileLoading != null && (this.lockWhileLoading = !!this._config.lockWhileLoading), this._config.role && (this.roleType = this._config.role), this._config.tone && (this.tone = this._config.tone), this._config.size && (this.size = this._config.size), this._config.variant && (this.variant = this._config.variant), this._config.elevation && (this.elevation = this._config.elevation), this._config.indicator && (this.indicator = this._config.indicator), this._config.radius != null && (this.radius = String(this._config.radius)), this._config.ariaLabel && this.setAttribute("aria-label", this._config.ariaLabel), this._config.ariaLabelledby && this.setAttribute("aria-labelledby", this._config.ariaLabelledby), this._config.ariaDescribedby && this.setAttribute("aria-describedby", this._config.ariaDescribedby), this._config.initialFocus && (this.initialFocus = this._config.initialFocus), this._config.headless != null && (this.headless = !!this._config.headless), this._inputValue = ((i = this._config.input) == null ? void 0 : i.value) ?? this._inputValue, this._checked = ((r = this._config.checkbox) == null ? void 0 : r.checked) ?? this._checked, this._runtimeError = this._config.errorMessage || "", this._syncVisualTokens(), this.requestRender();
   }
   getInputValue() {
     const t = this.root.querySelector(".input");
@@ -740,8 +752,8 @@ const $ = class c 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() {
     const t = this.root.querySelector(".checkbox-input");
@@ -749,8 +761,8 @@ const $ = class c extends Z {
   }
   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();
@@ -758,14 +770,14 @@ const $ = class c 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", rt(this.getAttribute("radius")));
+    this.style.setProperty("--ui-alert-radius", at(this.getAttribute("radius")));
   }
   _syncOpenState() {
     const t = this.hasAttribute("open");
@@ -776,18 +788,18 @@ const $ = class c extends Z {
     !t && this._active && this._deactivate();
   }
   _activate() {
-    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 : S(), this.headless || L(), l() && !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 : $(), this.headless || L(), l() && !this.headless && document.addEventListener("focusin", this._onFocusIn, !0);
     const t = this.dialogId || this._uid;
-    this._dispatchWithLegacy("ui-open", "open", { id: t }), this.headless || setTimeout(() => {
-      this._focusInitial();
-    }, 0), this.requestRender();
+    this._dispatchWithLegacy("ui-open", "open", { id: t }), this.headless || (this._focusInitialFrame && h(this._focusInitialFrame), this._focusInitialFrame = v(() => {
+      this._focusInitialFrame = 0, this._focusInitial();
+    })), this.requestRender();
   }
   _deactivate() {
     if (!this._active)
       return;
     this._active = !1;
     const t = c._openStack.lastIndexOf(this);
-    if (t >= 0 && c._openStack.splice(t, 1), l() && !this._activeHeadless && document.removeEventListener("focusin", this._onFocusIn, !0), this._activeHeadless || I(), !this._terminalEmitted) {
+    if (t >= 0 && c._openStack.splice(t, 1), l() && !this._activeHeadless && document.removeEventListener("focusin", this._onFocusIn, !0), this._activeHeadless || S(), !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,
@@ -800,26 +812,27 @@ const $ = class c extends Z {
         reason: r.reason
       }), this._terminalEmitted = !0, this._closeMeta = null;
     }
-    const e = this._lastActive;
-    this._lastActive = null, e && !this._activeHeadless && setTimeout(() => {
+    const i = this._lastActive;
+    this._lastActive = null, i && !this._activeHeadless && (this._restoreFocusFrame && h(this._restoreFocusFrame), this._restoreFocusFrame = v(() => {
+      this._restoreFocusFrame = 0;
       try {
-        e.focus();
+        i.focus();
       } catch {
       }
-    }, 0), this._activeHeadless = !1, this.requestRender();
+    })), this._activeHeadless = !1, this.requestRender();
   }
   _syncActiveEnvironment() {
     if (this._active && this.headless !== this._activeHeadless) {
       if (this.headless) {
-        l() && document.removeEventListener("focusin", this._onFocusIn, !0), I(), this._lastActive = null, this._activeHeadless = !0;
+        l() && document.removeEventListener("focusin", this._onFocusIn, !0), S(), this._lastActive = null, this._activeHeadless = !0;
         return;
       }
-      this._lastActive = S(), L(), l() && document.addEventListener("focusin", this._onFocusIn, !0), this._activeHeadless = !1, setTimeout(() => {
-        this._focusInitial();
-      }, 0);
+      this._lastActive = $(), L(), l() && document.addEventListener("focusin", this._onFocusIn, !0), this._activeHeadless = !1, this._focusInitialFrame && h(this._focusInitialFrame), this._focusInitialFrame = v(() => {
+        this._focusInitialFrame = 0, this._focusInitial();
+      });
     }
   }
-  _dispatchWithLegacy(t, e, r, s = !1) {
+  _dispatchWithLegacy(t, i, r, s = !1) {
     const o = new CustomEvent(t, {
       detail: r,
       bubbles: !0,
@@ -827,7 +840,7 @@ const $ = class c extends Z {
       cancelable: s
     });
     this.dispatchEvent(o);
-    const n = new CustomEvent(e, {
+    const n = new CustomEvent(i, {
       detail: r,
       bubbles: !0,
       composed: !0,
@@ -845,10 +858,10 @@ const $ = class c extends Z {
     return this.root.querySelector(".dialog");
   }
   _collectFocusable(t) {
-    return Array.from(t.querySelectorAll(J)).filter((e) => {
-      if (e.disabled || e.getAttribute("aria-hidden") === "true")
+    return Array.from(t.querySelectorAll(X)).filter((i) => {
+      if (i.disabled || i.getAttribute("aria-hidden") === "true")
         return !1;
-      const s = l() ? window.getComputedStyle(e) : null;
+      const s = l() ? window.getComputedStyle(i) : null;
       return !(s && (s.display === "none" || s.visibility === "hidden"));
     });
   }
@@ -858,9 +871,9 @@ const $ = class c extends Z {
     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;
@@ -876,17 +889,17 @@ const $ = class c extends Z {
   _handleTab(t) {
     if (t.key !== "Tab")
       return;
-    const e = this._queryPanel();
-    if (!e)
+    const i = this._queryPanel();
+    if (!i)
       return;
-    const r = this._collectFocusable(e);
+    const r = this._collectFocusable(i);
     if (!r.length) {
-      t.preventDefault(), e.focus();
+      t.preventDefault(), i.focus();
       return;
     }
     const s = this.root.activeElement || document.activeElement, o = r[0], n = r[r.length - 1];
     if (t.shiftKey) {
-      (s === o || !s || !e.contains(s)) && (t.preventDefault(), n.focus());
+      (s === o || !s || !i.contains(s)) && (t.preventDefault(), n.focus());
       return;
     }
     s === n && (t.preventDefault(), o.focus());
@@ -894,15 +907,15 @@ const $ = class c extends Z {
   _onFocusIn(t) {
     if (!this.open || !this._isTopMost())
       return;
-    const e = this._queryPanel();
-    if (!e)
+    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
@@ -911,8 +924,8 @@ const $ = class c 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 = {
@@ -928,21 +941,21 @@ const $ = class c 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) {
@@ -957,77 +970,77 @@ const $ = class c extends Z {
     }
   }
   render() {
-    var y, w, A, z, E, C;
+    var A, F, z, I, E, C;
     if (!this.open) {
       this.setContent("");
       return;
     }
-    const t = this._config.title ?? this.getAttribute("title") ?? "", e = 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 = !!((y = this._config.input) != null && y.enabled), B = ((w = this._config.input) == null ? void 0 : w.label) || "Value", T = ((A = this._config.input) == null ? void 0 : A.placeholder) || "", q = !!((z = this._config.input) != null && z.required), F = !!((E = this._config.checkbox) != null && E.enabled), D = ((C = this._config.checkbox) == null ? void 0 : C.label) || "Remember this choice", M = this.state, p = this._runtimeError || this._config.errorMessage || this.getAttribute("error-message") || "", v = `ui-alert-title-${this._uid}`, m = `ui-alert-description-${this._uid}`, x = `ui-alert-error-${this._uid}`, O = !!this.querySelector('[slot="title"]'), V = !!this.querySelector('[slot="description"]'), H = !!this.querySelector('[slot="icon"]'), W = !!this.querySelector('[slot="footer"]'), R = !!this.querySelector('[slot="content"]'), g = O || !!t, b = V || !!e, P = H || g || b, j = this._config.showCancel ?? this.dismissible, K = this._config.showClose ?? this.dismissible, Y = this.tone, U = this.getAttribute("aria-label") || "", N = this.getAttribute("aria-labelledby") || "", _ = this.getAttribute("aria-describedby") || "", f = N || (g ? v : ""), k = U || (f ? "" : t || e || "Dialog"), u = [];
-    _ ? u.push(_) : (b && u.push(m), p && u.push(x));
-    const d = M === "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 = !!((A = this._config.input) != null && A.enabled), T = ((F = this._config.input) == null ? void 0 : F.label) || "Value", q = ((z = this._config.input) == null ? void 0 : z.placeholder) || "", D = !!((I = this._config.input) != null && I.required), M = !!((E = this._config.checkbox) != null && E.enabled), O = ((C = this._config.checkbox) == null ? void 0 : C.label) || "Remember this choice", V = this.state, f = this._runtimeError || this._config.errorMessage || this.getAttribute("error-message") || "", x = `ui-alert-title-${this._uid}`, _ = `ui-alert-description-${this._uid}`, k = `ui-alert-error-${this._uid}`, H = !!this.querySelector('[slot="title"]'), W = !!this.querySelector('[slot="description"]'), R = !!this.querySelector('[slot="icon"]'), P = !!this.querySelector('[slot="footer"]'), j = !!this.querySelector('[slot="content"]'), g = H || !!t, b = W || !!i, K = R || g || b, Y = this._config.showCancel ?? this.dismissible, U = this._config.showClose ?? this.dismissible, N = this.tone, Z = this.getAttribute("aria-label") || "", G = this.getAttribute("aria-labelledby") || "", y = this.getAttribute("aria-describedby") || "", m = G || (g ? x : ""), w = Z || (m ? "" : t || i || "Dialog"), u = [];
+    y ? u.push(y) : (b && u.push(_), f && u.push(k));
+    const d = V === "loading";
     this.setContent(`
-      <style>${G}</style>
+      <style>${Q}</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"
-          ${k ? `aria-label="${a(k)}"` : ""}
-          ${f ? `aria-labelledby="${a(f)}"` : ""}
+          ${w ? `aria-label="${a(w)}"` : ""}
+          ${m ? `aria-labelledby="${a(m)}"` : ""}
           ${u.length ? `aria-describedby="${a(u.join(" "))}"` : ""}
           tabindex="-1"
         >
-          ${K ? `<button class="close" part="close" aria-label="Close dialog">
+          ${U ? `<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>` : ""}
 
-          ${P ? `<header class="header">
+          ${K ? `<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">${at(Y)}</slot>
+                      <slot name="icon">${nt(N)}</slot>
                     </span>
                   </span>
                   <div class="heading">
-                    ${g ? `<h2 id="${v}" class="title" part="title"><slot name="title">${a(t)}</slot></h2>` : ""}
-                    ${b ? `<p id="${m}" class="description" part="description"><slot name="description">${a(e)}</slot></p>` : ""}
+                    ${g ? `<h2 id="${x}" class="title" part="title"><slot name="title">${a(t)}</slot></h2>` : ""}
+                    ${b ? `<p id="${_}" class="description" part="description"><slot name="description">${a(i)}</slot></p>` : ""}
                   </div>
                 </div>
               </header>` : ""}
 
           <div class="content" part="content">
-            ${R ? '<slot name="content"></slot>' : "<slot></slot>"}
+            ${j ? '<slot name="content"></slot>' : "<slot></slot>"}
 
             ${n ? `<label class="input-wrap">
-                  <span class="label">${a(B)}</span>
+                  <span class="label">${a(T)}</span>
                   <input
                     class="input"
                     part="input"
                     type="text"
                     value="${a(this.getInputValue())}"
-                    placeholder="${a(T)}"
-                    ${q ? "required" : ""}
+                    placeholder="${a(q)}"
+                    ${D ? "required" : ""}
                     ${d ? "disabled" : ""}
                   />
                 </label>` : ""}
 
-            ${F ? `<label class="checkbox" part="checkbox">
+            ${M ? `<label class="checkbox" part="checkbox">
                   <span class="checkbox-line">
                     <input class="checkbox-input" type="checkbox" ${this.getChecked() ? "checked" : ""} ${d ? "disabled" : ""} />
-                    <span>${a(D)}</span>
+                    <span>${a(O)}</span>
                   </span>
                 </label>` : ""}
           </div>
 
-          <div class="error" id="${x}" part="error" aria-live="polite" data-empty="${String(!p)}">${a(p)}</div>
+          <div class="error" id="${k}" 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>'}
 
-            ${W ? '<slot name="footer"></slot>' : `${j ? `<button class="btn btn-cancel" part="cancel" type="button" ${d ? "disabled" : ""}>${a(s)}</button>` : ""}
+            ${P ? '<slot name="footer"></slot>' : `${Y ? `<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>`}
           </footer>
         </section>
@@ -1035,9 +1048,9 @@ const $ = class c extends Z {
     `);
   }
 };
-$._openStack = [];
-let ot = $;
-typeof customElements < "u" && !customElements.get("ui-alert-dialog") && customElements.define("ui-alert-dialog", ot);
+B._openStack = [];
+let lt = B;
+typeof customElements < "u" && !customElements.get("ui-alert-dialog") && customElements.define("ui-alert-dialog", lt);
 export {
-  ot as UIAlertDialog
+  lt as UIAlertDialog
 };

package/dist/app-header.cjs.js

@@ -6,6 +6,9 @@
     --ui-app-header-height-large: 76px;
     --ui-app-header-bg-base: var(--base-app-header-bg, var(--color-panel, var(--ui-color-surface, #ffffff)));
     --ui-app-header-bg: var(--ui-app-header-bg-base);
+    --ui-app-header-sticky-bg-base: var(--base-app-header-sticky-bg, var(--ui-color-surface, #ffffff));
+    --ui-app-header-surface-bg: var(--ui-app-header-bg);
+    --ui-app-header-surface-backdrop: blur(6px) saturate(1.05);
     --ui-app-header-color: var(--ui-color-text, var(--ui-text, #202020));
     --ui-app-header-muted: color-mix(in srgb, var(--ui-app-header-color) 56%, var(--ui-color-muted, var(--ui-muted, #646464)) 44%);
     --ui-app-header-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
@@ -114,6 +117,22 @@
     position: sticky;
     top: 0;
     z-index: var(--ui-app-header-z);
+    --ui-app-header-surface-bg: var(--ui-app-header-sticky-bg-base);
+    --ui-app-header-surface-backdrop: none;
+    contain: paint;
+  }
+
+  :host([sticky][variant='soft']) {
+    --ui-app-header-surface-bg: color-mix(in srgb, var(--ui-app-header-accent) 8%, var(--ui-app-header-sticky-bg-base));
+  }
+
+  :host([sticky][variant='solid']) {
+    --ui-app-header-surface-bg: var(--ui-app-header-accent);
+  }
+
+  :host([sticky]) header {
+    transform: translateZ(0);
+    backface-visibility: hidden;
   }
 
   header {
@@ -123,14 +142,15 @@
     grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
     align-items: center;
     gap: var(--ui-app-header-gap);
-    background: var(--ui-app-header-bg);
+    background: var(--ui-app-header-surface-bg);
     color: var(--ui-app-header-color);
     border: var(--ui-app-header-border);
     padding: 0 var(--ui-app-header-padding-x);
     box-sizing: border-box;
     border-radius: var(--ui-app-header-radius);
     box-shadow: var(--ui-app-header-shadow);
-    backdrop-filter: blur(6px) saturate(1.05);
+    -webkit-backdrop-filter: var(--ui-app-header-surface-backdrop);
+    backdrop-filter: var(--ui-app-header-surface-backdrop);
     transition:
       background var(--ui-app-header-duration) var(--ui-app-header-easing),
       border-color var(--ui-app-header-duration) var(--ui-app-header-easing),