@tempots/beatui 0.32.1 → 0.33.0

package/dist/index.es.js

@@ -1,22 +1,22 @@
-import { prop as j, html as p, attr as s, computedOf as w, Use as Y, Empty as O, Value as S, WithElement as Q, Fragment as M, aria as A, OnDispose as W, OneOfValue as zt, on as T, style as v, coalesce as Ee, When as te, ForEach as be, Ensure as Ve, OneOfType as bt, dataAttr as He, NotEmpty as Wt, input as X, emitValue as E, emitValueAsDate as qt, Portal as mt, WithProvider as Zt, Task as Yt, Provide as ft, makeProviderMark as Gt, MapSignal as gt, svg as Ge, svgAttr as Ke } from "@tempots/dom";
+import { prop as j, html as p, attr as s, computedOf as w, Use as Y, Empty as O, Value as S, WithElement as Q, Fragment as M, aria as A, OnDispose as W, OneOfValue as zt, on as T, style as v, coalesce as Ee, When as te, ForEach as be, Ensure as De, OneOfType as bt, dataAttr as He, NotEmpty as Wt, input as X, emitValue as E, emitValueAsDate as qt, Portal as mt, WithProvider as Zt, Task as Yt, Provide as ft, makeProviderMark as Gt, MapSignal as gt, svg as Ge, svgAttr as Ke } from "@tempots/dom";
 import { Use as xs } from "@tempots/dom";
 import { PopOver as Kt, ElementRect as xe, WindowSize as Xt, Query as Jt, Location as he, NavigationService as Qt, Anchor as Re } from "@tempots/ui";
-import { a as ne, c as ce, h as Te, I as U, B as Xe, b as q, C as G, L as je, t as Je, g as Qe, i as et } from "./translations-iam7PITs.js";
+import { a as ne, c as ce, h as $e, I as U, B as Xe, b as q, C as G, L as je, t as Je, g as Qe, i as et } from "./translations-iam7PITs.js";
 import { v as ws, T as Ss, j as Cs, d as ks, f as Is, p as $s, o as Ts, l as _s, u as Ds, w as Vs, k as As, q as Ls, m as Bs, n as Ms, r as Os, s as Ns } from "./translations-iam7PITs.js";
-import { T as ht, a as en } from "./theme-DsQOxXW1.js";
+import { T as ht, a as en } from "./theme-B5pmbvQ_.js";
 import { t as Es, am as Fs, f as Hs, J as Rs, c as js, N as Us, I as zs, K as Ws, d as qs, k as Zs, b as Ys, a as Gs, ab as Ks, o as Xs, a0 as Js, ae as Qs, q as el, H as tl, A as nl, al, g as sl, E as ll, x as rl, aj as ol, $ as il, a4 as ul, j as cl, i as dl, h as pl, Y as bl, X as ml, Q as fl, P as gl, S as hl, R as vl, W as xl, V as yl, U as wl, T as Sl, a8 as Cl, a7 as kl, aa as Il, a9 as $l, n as Tl, m as _l, l as Dl, _ as Vl, Z as Al, ad as Ll, p as Bl, G as Ml, z as Ol, ak as Nl, D as Pl, C as El, w as Fl, v as Hl, ai as Rl, ah as jl, e as Ul, a3 as zl, a2 as Wl, M as ql, L as Zl, a5 as Yl, a6 as Gl, r as Kl, O as Xl, ac as Jl, s as Ql, F as er, y as tr, ag as nr, B as ar, u as sr, af as lr, a1 as rr } from "./index-DJJ67-RV.js";
-import { C as vt, s as re, m as xt, d as yt, I as Ue, B as wt, c as St, S as ze, e as tn } from "./notice-Ct8ZHvwq.js";
-import { A as ir, g as ur, b as cr, D as dr, E as pr, v as br, L as mr, M as fr, x as gr, N as hr, i as vr, P as xr, R as yr, n as wr, q as Sr, o as Cr, k as kr, j as Ir, f as $r, p as Tr, h as _r, r as Dr, t as Vr, l as Ar, u as Lr, w as Br } from "./notice-Ct8ZHvwq.js";
-import { S as nn, G as Ct, E as an, F as sn, N as kt, a as oe, M as me, e as tt, n as ln, W as J, d as rn } from "./utils-CuD-_CDx.js";
-import { g as Or, i as Nr, B as Pr, l as Er, O as Fr, C as Hr, j as Rr, L as jr, k as Ur, m as zr, o as Wr, p as qr, I as Zr, q as Yr, w as Gr, r as Kr, A as Xr, H as Jr, s as Qr, u as eo, z as to, K as no, v as ao, R as so, D as lo, x as ro, T as oo, y as io, b as uo, U as co, J as po, P as bo, Q as mo, V as fo, h as go, c as ho, t as vo, f as xo } from "./utils-CuD-_CDx.js";
-import { g as _e } from "./timer-CQlK5LhW.js";
-import { u as ve, A as Fe, O as on, F as un } from "./modal-eY-3j_zS.js";
-import { B as wo, C as So, M as Co, a as ko, S as Io, b as $o, c as To, o as _o, s as Do, e as Vo, d as Ao, f as Lo } from "./modal-eY-3j_zS.js";
+import { C as vt, s as re, m as xt, d as yt, I as Ue, B as wt, c as St, S as ze, e as tn } from "./notice-Cd9ElXwb.js";
+import { A as ir, g as ur, b as cr, D as dr, E as pr, v as br, L as mr, M as fr, x as gr, N as hr, i as vr, P as xr, R as yr, n as wr, q as Sr, o as Cr, k as kr, j as Ir, f as $r, p as Tr, h as _r, r as Dr, t as Vr, l as Ar, u as Lr, w as Br } from "./notice-Cd9ElXwb.js";
+import { S as nn, G as Ct, E as an, F as sn, N as kt, a as oe, M as me, e as tt, n as ln, W as J, d as rn } from "./utils-Dl44PfbT.js";
+import { g as Or, i as Nr, B as Pr, l as Er, O as Fr, C as Hr, j as Rr, L as jr, k as Ur, m as zr, o as Wr, p as qr, I as Zr, q as Yr, w as Gr, r as Kr, A as Xr, H as Jr, s as Qr, u as eo, z as to, K as no, v as ao, R as so, D as lo, x as ro, T as oo, y as io, b as uo, U as co, J as po, P as bo, Q as mo, V as fo, h as go, c as ho, t as vo, f as xo } from "./utils-Dl44PfbT.js";
+import { g as Te } from "./timer-CQlK5LhW.js";
+import { u as ve, A as Fe, O as on, F as un } from "./modal-BnY6iGcL.js";
+import { B as wo, C as So, M as Co, a as ko, S as Io, b as $o, c as To, o as _o, s as Do, e as Vo, d as Ao, f as Lo } from "./modal-BnY6iGcL.js";
 import { L as Mo } from "./link-portal-Cr2l9f3k.js";
 import { g as cn } from "./colors-WfmhQ5e1.js";
 import { b as No, e as Po, i as Eo, a as Fo, c as Ho, o as Ro, l as jo, m as Uo, k as zo, j as Wo, n as qo, r as Zo, s as Yo, d as Go, h as Ko, t as Xo } from "./colors-WfmhQ5e1.js";
 import { T as Qo, a as ei, c as ti, b as ni, d as ai } from "./toolbar-ClJbaKID.js";
-function De(e) {
+function _e(e) {
   if (typeof e != "string") return !1;
   const n = e.startsWith("#") ? e.slice(1) : e;
   return /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(n);
@@ -43,10 +43,10 @@ function bn(e) {
   return u >= 0 && u <= 360 && c >= 0 && c <= 100 && i >= 0 && i <= 100;
 }
 function mn(e) {
-  return De(e) || dn(e) || pn(e) || bn(e);
+  return _e(e) || dn(e) || pn(e) || bn(e);
 }
 function de(e) {
-  if (!De(e)) return null;
+  if (!_e(e)) return null;
   let n = e.startsWith("#") ? e.slice(1) : e;
   return n.length === 3 && (n = n.split("").map((t) => t + t).join("")), `#${n.toLowerCase()}`;
 }
@@ -70,8 +70,8 @@ function nt(e) {
 function ba(e, n) {
   const t = nt(e), a = nt(n);
   if (!t || !a) return null;
-  const l = (o, d, b) => {
-    const [x, f, g] = [o, d, b].map((h) => (h = h / 255, h <= 0.03928 ? h / 12.92 : Math.pow((h + 0.055) / 1.055, 2.4)));
+  const l = (o, d, m) => {
+    const [x, f, g] = [o, d, m].map((h) => (h = h / 255, h <= 0.03928 ? h / 12.92 : Math.pow((h + 0.055) / 1.055, 2.4)));
     return 0.2126 * x + 0.7152 * f + 0.0722 * g;
   }, r = l(t.r, t.g, t.b), u = l(a.r, a.g, a.b), c = Math.max(r, u), i = Math.min(r, u);
   return (c + 0.05) / (i + 0.05);
@@ -87,20 +87,20 @@ function ma(e, n = 0, t = () => !0) {
     a != null && clearTimeout(a);
   }), r;
 }
-const at = (e, n) => e < n ? e : n, ke = (e, n) => e > n ? e : n, Oe = ["xs", "sm", "md", "lg", "xl"];
+const at = (e, n) => e < n ? e : n, ke = (e, n) => e > n ? e : n, Me = ["xs", "sm", "md", "lg", "xl"];
 function fa(e, n = 1) {
-  const t = Oe.indexOf(e);
+  const t = Me.indexOf(e);
   if (t === -1)
     throw new Error(`Invalid size: ${e}`);
-  const a = Math.min(Math.max(t + n, 0), Oe.length - 1);
-  return Oe[a];
+  const a = Math.min(Math.max(t + n, 0), Me.length - 1);
+  return Me[a];
 }
 function fn(e, n) {
   const t = ["bc-tag"];
   return e !== "md" && t.push(`bc-tag--${e}`), n && t.push("bc-tag--disabled"), t.join(" ");
 }
 function gn(e) {
-  const n = ce(e, "light", "light"), t = ce(e, "light", "dark"), a = Te(e, "light", "light"), l = Te(e, "light", "dark");
+  const n = ce(e, "light", "light"), t = ce(e, "light", "dark"), a = $e(e, "light", "light"), l = $e(e, "light", "dark");
   return [
     `--tag-bg: ${n.backgroundColor}`,
     `--tag-text: ${n.textColor}`,
@@ -189,7 +189,7 @@ function ga() {
 function vn(e) {
   return e.startsWith("top") ? "flyout-top" : e.startsWith("bottom") ? "flyout-bottom" : e.startsWith("left") ? "flyout-left" : e.startsWith("right") ? "flyout-right" : "scale-fade";
 }
-function Ae(e) {
+function Ve(e) {
   const {
     content: n,
     placement: t = "top",
@@ -201,15 +201,15 @@ function Ae(e) {
     closable: i = !0,
     arrow: o,
     role: d,
-    hasPopup: b = "dialog"
+    hasPopup: m = "dialog"
   } = e;
   return Kt((x, f) => {
     const g = ve({
       initialStatus: "closed"
     }), h = re("flyout"), k = j(!1);
-    let C = null, m = null, y = null, D = !1;
+    let C = null, b = null, y = null, D = !1;
     function V() {
-      I != null && (clearTimeout(I), I = null), L != null && (clearTimeout(L), L = null), y && (y(), y = null), m && (m(), m = null), C && (document.removeEventListener("keydown", C), C = null), k.set(!1), D = !1;
+      I != null && (clearTimeout(I), I = null), L != null && (clearTimeout(L), L = null), y && (y(), y = null), b && (b(), b = null), C && (document.removeEventListener("keydown", C), C = null), k.set(!1), D = !1;
     }
     function N() {
       S.get(i) && (C = (H) => {
@@ -223,7 +223,7 @@ function Ae(e) {
         },
         arrow: o,
         content: Q((H) => {
-          g.setElement(H), y = _e(() => {
+          g.setElement(H), y = Te(() => {
             g.open(), y = null;
           });
           const F = (z) => {
@@ -250,7 +250,7 @@ function Ae(e) {
     }
     let I = null;
     function _() {
-      if (I != null && (clearTimeout(I), I = null), L != null && (clearTimeout(L), L = null), m && (m(), m = null), g.isOpened.value || g.isOpening.value || g.isStartOpening.value)
+      if (I != null && (clearTimeout(I), I = null), L != null && (clearTimeout(L), L = null), b && (b(), b = null), g.isOpened.value || g.isOpening.value || g.isStartOpening.value)
         return;
       if (g.isClosing.value || g.isStartClosing.value) {
         g.open();
@@ -269,7 +269,7 @@ function Ae(e) {
       }
       const H = S.get(l);
       L = setTimeout(() => {
-        L = null, m && (m(), m = null), g.close(), m = g.onClosed(() => {
+        L = null, b && (b(), b = null), g.close(), b = g.onClosed(() => {
           f(), V();
         });
       }, H);
@@ -283,7 +283,7 @@ function Ae(e) {
         A.expanded(k),
         A.controls(h),
         A.haspopup(
-          b
+          m
         )
       );
       if (typeof c == "function")
@@ -322,7 +322,7 @@ function Ae(e) {
             return M(
               W(we),
               T.click(() => {
-                F(), _e(() => {
+                F(), Te(() => {
                   document.addEventListener("click", pe, {
                     once: !0
                   });
@@ -374,7 +374,7 @@ function $t(e, { breakpoints: n, mode: t = "viewport" }) {
     ([u, c]) => [c, u]
   )].sort((u, c) => u[0] - c[0]), r = (u) => {
     const c = u.map(({ width: o }) => {
-      const d = l.findIndex((b) => b[0] > o) - 1;
+      const d = l.findIndex((m) => m[0] > o) - 1;
       return d >= 0 ? { width: o, breakpoint: l[d][1] } : l.length > 0 && o >= l[0][0] ? { width: o, breakpoint: l[0][1] } : { width: o, breakpoint: l[0][1] };
     });
     return e({
@@ -386,9 +386,9 @@ function $t(e, { breakpoints: n, mode: t = "viewport" }) {
   };
   return t === "element" ? xe(r) : Xt(r);
 }
-let Ne = NaN;
+let Oe = NaN;
 function Sn(e, n) {
-  return e ? (isNaN(Ne) && (Ne = parseFloat(getComputedStyle(document.documentElement).fontSize)), parseFloat(e) * Ne) : n;
+  return e ? (isNaN(Oe) && (Oe = parseFloat(getComputedStyle(document.documentElement).fontSize)), parseFloat(e) * Oe) : n;
 }
 function Z(e, n, t) {
   return Sn(e.getPropertyValue(n), t);
@@ -523,7 +523,7 @@ function st(e, n) {
   };
   return t.xs < t.zero && (t.xs = t.zero), t.sm < t.xs && (t.sm = t.xs), t.md < t.sm && (t.md = t.sm), t.lg < t.md && (t.lg = t.md), t.xl < t.lg && (t.xl = t.lg), t;
 }
-function Pe(e) {
+function Ne(e) {
   e = e.filter((n) => n.some((t) => t != null && !t.startsWith("?")));
   for (let n = 0; n < e[0].length; n++)
     e.every((t) => t[n] == null || t[n].startsWith("?")) && (e = e.map((t) => t.filter((a, l) => l !== n)), n--);
@@ -547,12 +547,12 @@ function kn({
     ];
     const d = [];
     d.push("1fr");
-    const b = [];
-    return a.banner && (b.push(a.banner[i] + "px"), o[0][1] = "banner"), (a.header || t.menu || t.aside) && (b.push(
+    const m = [];
+    return a.banner && (m.push(a.banner[i] + "px"), o[0][1] = "banner"), (a.header || t.menu || t.aside) && (m.push(
       (a.header?.[i] ?? se.header[i]) + "px"
-    ), o[1][1] = "header"), a.mainHeader && (b.push(a.mainHeader[i] + "px"), o[2][1] = "mainHeader"), b.push("1fr"), o[3][1] = "main", a.mainFooter && (b.push(a.mainFooter[i] + "px"), o[4][1] = "mainFooter"), a.footer && (b.push(a.footer[i] + "px"), o[5][1] = "footer"), o = Pe(o), {
+    ), o[1][1] = "header"), a.mainHeader && (m.push(a.mainHeader[i] + "px"), o[2][1] = "mainHeader"), m.push("1fr"), o[3][1] = "main", a.mainFooter && (m.push(a.mainFooter[i] + "px"), o[4][1] = "mainFooter"), a.footer && (m.push(a.footer[i] + "px"), o[5][1] = "footer"), o = Ne(o), {
       columns: d.join(" "),
-      rows: b.join(" "),
+      rows: m.join(" "),
       areas: o.map((f) => `"${f.join(" ")}"`).join(`
 `),
       displayMenu: !1,
@@ -572,12 +572,12 @@ function kn({
     ];
     const d = [];
     t.menu && (d.push(t.menu[i] + "px"), o[2][0] = "?menu", o[3][0] = "menu", o[4][0] = "?menu"), d.push("1fr");
-    const b = [];
-    return a.banner && (b.push(a.banner[i] + "px"), o[0][0] = "?banner", o[0][1] = "banner"), (a.header || t.aside) && (b.push(
+    const m = [];
+    return a.banner && (m.push(a.banner[i] + "px"), o[0][0] = "?banner", o[0][1] = "banner"), (a.header || t.aside) && (m.push(
       (a.header?.[i] ?? se.header[i]) + "px"
-    ), o[1][0] = "?header", o[1][1] = "header"), a.mainHeader && (b.push(a.mainHeader[i] + "px"), o[2][1] = "mainHeader"), b.push("1fr"), o[3][1] = "main", a.mainFooter && (b.push(a.mainFooter[i] + "px"), o[4][1] = "mainFooter"), a.footer && (b.push(a.footer[i] + "px"), o[5][0] = "?footer", o[5][1] = "footer"), o = Pe(o), {
+    ), o[1][0] = "?header", o[1][1] = "header"), a.mainHeader && (m.push(a.mainHeader[i] + "px"), o[2][1] = "mainHeader"), m.push("1fr"), o[3][1] = "main", a.mainFooter && (m.push(a.mainFooter[i] + "px"), o[4][1] = "mainFooter"), a.footer && (m.push(a.footer[i] + "px"), o[5][0] = "?footer", o[5][1] = "footer"), o = Ne(o), {
       columns: d.join(" "),
-      rows: b.join(" "),
+      rows: m.join(" "),
       areas: o.map((f) => `"${f.join(" ")}"`).join(`
 `),
       displayMenu: !0,
@@ -597,10 +597,10 @@ function kn({
     ];
     const d = [];
     t.menu && (d.push(t.menu[i] + "px"), o[2][0] = "?menu", o[3][0] = "menu", o[4][0] = "?menu"), d.push("1fr"), t.aside && (d.push(t.aside[i] + "px"), o[2][2] = "?aside", o[3][2] = "aside", o[4][2] = "?aside");
-    const b = [];
-    return a.banner && (b.push(a.banner[i] + "px"), o[0][0] = "?banner", o[0][1] = "banner", o[0][2] = "?banner"), a.header && (b.push(a.header[i] + "px"), o[1][0] = "?header", o[1][1] = "header", o[1][2] = "?header"), a.mainHeader && (b.push(a.mainHeader[i] + "px"), o[2][1] = "mainHeader"), b.push("1fr"), o[3][1] = "main", a.mainFooter && (b.push(a.mainFooter[i] + "px"), o[4][1] = "mainFooter"), a.footer && (b.push(a.footer[i] + "px"), o[5][0] = "?footer", o[5][1] = "footer", o[5][2] = "?footer"), o = Pe(o), {
+    const m = [];
+    return a.banner && (m.push(a.banner[i] + "px"), o[0][0] = "?banner", o[0][1] = "banner", o[0][2] = "?banner"), a.header && (m.push(a.header[i] + "px"), o[1][0] = "?header", o[1][1] = "header", o[1][2] = "?header"), a.mainHeader && (m.push(a.mainHeader[i] + "px"), o[2][1] = "mainHeader"), m.push("1fr"), o[3][1] = "main", a.mainFooter && (m.push(a.mainFooter[i] + "px"), o[4][1] = "mainFooter"), a.footer && (m.push(a.footer[i] + "px"), o[5][0] = "?footer", o[5][1] = "footer", o[5][2] = "?footer"), o = Ne(o), {
       columns: d.join(" "),
-      rows: b.join(" "),
+      rows: m.join(" "),
       areas: o.map((f) => `"${f.join(" ")}"`).join(`
 `),
       displayMenu: !0,
@@ -656,13 +656,13 @@ function xa({
         vertical: a,
         horizontal: l,
         is: c
-      }), o = u.map(i), d = l.header != null || a.menu != null || a.aside != null, b = w(
+      }), o = u.map(i), d = l.header != null || a.menu != null || a.aside != null, m = w(
         a.aside != null,
         o
-      )((m, { displayAside: y }) => m && !y), x = w(
+      )((b, { displayAside: y }) => b && !y), x = w(
         a.menu != null,
         o
-      )((m, { displayMenu: y }) => m && !y), f = ve(), g = ve(), h = j(0), k = w(
+      )((b, { displayMenu: y }) => b && !y), f = ve(), g = ve(), h = j(0), k = w(
         a.menu != null,
         o,
         f.display
@@ -700,13 +700,13 @@ function xa({
           v.zIndex("20"),
           v.display(d ? "block" : "none"),
           v.gridArea("header"),
-          xe((m) => (m.$.bottom.feedProp(h), null)),
+          xe((b) => (b.$.bottom.feedProp(h), null)),
           p.div(
             v.display("flex"),
             v.height("100%"),
             p.div(
               v.display(
-                x.map((m) => m ? "flex" : "none")
+                x.map((b) => b ? "flex" : "none")
               ),
               v.alignItems("center"),
               v.justifyContent("center"),
@@ -721,7 +721,7 @@ function xa({
                 A.label(r.$.toggleMenu),
                 U({
                   icon: f.display.map(
-                    (m) => m ? "line-md/menu-to-close-alt-transition" : "line-md/close-to-menu-alt-transition"
+                    (b) => b ? "line-md/menu-to-close-alt-transition" : "line-md/close-to-menu-alt-transition"
                   )
                 })
               )
@@ -737,7 +737,7 @@ function xa({
               v.height("100%"),
               v.width("60px"),
               v.display(
-                b.map((m) => m ? "flex" : "none")
+                m.map((b) => b ? "flex" : "none")
               ),
               Xe(
                 {
@@ -752,7 +752,7 @@ function xa({
                   s.style("transition: transform 0.2s ease-in-out"),
                   s.style(
                     g.display.map(
-                      (m) => `transform: rotate(${m ? 180 : 0}deg)`
+                      (b) => `transform: rotate(${b ? 180 : 0}deg)`
                     )
                   )
                 )
@@ -761,7 +761,7 @@ function xa({
           )
         ),
         t.menu ? p.nav(
-          Q((m) => f.setElement(m)),
+          Q((b) => f.setElement(b)),
           v.zIndex("10"),
           // Add ARIA attributes for navigation landmark
           A.label(r.$.mainNavigation),
@@ -769,7 +769,7 @@ function xa({
           v.overflow("hidden"),
           s.class(
             k.map(
-              (m) => m === "float" ? ae(
+              (b) => b === "float" ? ae(
                 "right",
                 t.menu?.shadow ?? "md"
               ) : ae(
@@ -781,7 +781,7 @@ function xa({
           ie(t.menu?.color ?? "white"),
           v.height(
             k.map(
-              (m) => m === "float" ? "auto" : "100%"
+              (b) => b === "float" ? "auto" : "100%"
             )
           ),
           v.overflow("hidden"),
@@ -790,21 +790,21 @@ function xa({
             w(
               k,
               f.status
-            )((m, y) => m === "none" && y === "closed" ? "none" : "block")
+            )((b, y) => b === "none" && y === "closed" ? "none" : "block")
           ),
           v.position(
             w(
               k,
               f.status
-            )((m, y) => m === "float" || m === "none" && y !== "closed" ? "fixed" : "initial")
+            )((b, y) => b === "float" || b === "none" && y !== "closed" ? "fixed" : "initial")
           ),
-          v.top(h.map((m) => `${m}px`)),
+          v.top(h.map((b) => `${b}px`)),
           Fe(
             "slide-right",
             w(
               k,
               f.status
-            )((m, y) => m === "block" ? "opened" : y)
+            )((b, y) => b === "block" ? "opened" : y)
           ),
           v.width(Ee(t.menu?.width, o.$.menuWidth)),
           v.bottom("0"),
@@ -845,8 +845,8 @@ function xa({
           t.mainFooter.content
         ) : null,
         t.aside ? p.aside(
-          Q((m) => {
-            g.setElement(m);
+          Q((b) => {
+            g.setElement(b);
           }),
           v.zIndex("10"),
           // Add ARIA attributes for aside landmark
@@ -854,7 +854,7 @@ function xa({
           s.role("complementary"),
           s.class(
             C.map(
-              (m) => m === "float" ? ae("left", "md") : ae("left", "none")
+              (b) => b === "float" ? ae("left", "md") : ae("left", "none")
             )
           ),
           ie("white"),
@@ -864,26 +864,26 @@ function xa({
             w(
               C,
               g.status
-            )((m, y) => m === "none" && y === "closed" ? "none" : "block")
+            )((b, y) => b === "none" && y === "closed" ? "none" : "block")
           ),
           v.position(
             w(
               C,
               g.status
-            )((m, y) => m === "float" || m === "none" && y !== "closed" ? "fixed" : "initial")
+            )((b, y) => b === "float" || b === "none" && y !== "closed" ? "fixed" : "initial")
           ),
-          v.top(h.map((m) => `${m}px`)),
+          v.top(h.map((b) => `${b}px`)),
           Fe(
             "slide-left",
             w(
               C,
               g.status
-            )((m, y) => m === "block" ? "opened" : y)
+            )((b, y) => b === "block" ? "opened" : y)
           ),
           v.width(
             Ee(t.aside?.width, o.$.asideWidth)
           ),
-          v.bottom(h.map((m) => `${m}px`)),
+          v.bottom(h.map((b) => `${b}px`)),
           t.aside.content
         ) : null,
         t.footer ? p.footer(
@@ -928,10 +928,10 @@ function Vn({ open: e }, ...n) {
         o != null && c.set(o);
       }), a.on((o) => {
         if (t && o === "start-opening") {
-          const d = t.style.height, b = t.style.transition;
+          const d = t.style.height, m = t.style.transition;
           t.style.transition = "none", t.style.height = "auto", t.offsetHeight;
           const x = t.scrollHeight;
-          x > 0 && c.set(x), t.style.height = d, t.style.transition = b, t.offsetHeight;
+          x > 0 && c.set(x), t.style.height = d, t.style.transition = m, t.offsetHeight;
         }
       }), M(
         W(r),
@@ -963,13 +963,13 @@ function Sa({
   footerHeight: i = 0,
   bottomStart: o,
   bottomEnd: d,
-  sidebarStart: b,
+  sidebarStart: m,
   sidebarStartWidth: x = 0,
   sidebarEnd: f,
   sidebarEndWidth: g = 0,
   anchorMode: h = "container-edge"
 }) {
-  const k = j(0n), C = j(0n), m = lt(l), y = lt(x), D = j(16);
+  const k = j(0n), C = j(0n), b = lt(l), y = lt(x), D = j(16);
   return p.div(
     W(
       k.dispose,
@@ -1018,8 +1018,8 @@ function Sa({
             P,
             g
           )(($, B, R, K) => {
-            const ee = $ + Number(B), le = $ + R, Me = Math.min(ee, le);
-            return `${Math.max($ + K, Me)}px`;
+            const ee = $ + Number(B), le = $ + R, Be = Math.min(ee, le);
+            return `${Math.max($ + K, Be)}px`;
           })
         ),
         () => v.right("0")
@@ -1035,8 +1035,8 @@ function Sa({
             H,
             i
           )(($, B, R, K) => {
-            const ee = $ + Number(B), le = $ + R, Me = Math.min(ee, le);
-            return `${Math.max($ + K, Me)}px`;
+            const ee = $ + Number(B), le = $ + R, Be = Math.min(ee, le);
+            return `${Math.max($ + K, Be)}px`;
           })
         ),
         () => v.bottom("0")
@@ -1060,16 +1060,16 @@ function Sa({
         C.map(($) => `translateX(-${$}px)`)
       ), Ye = v.transform(
         k.map(($) => `translateY(-${$}px)`)
-      ), Le = w(
+      ), Ae = w(
         t,
         H
-      )(($, B) => $ - BigInt(Math.max(1, B))), Be = w(
+      )(($, B) => $ - BigInt(Math.max(1, B))), Le = w(
         n,
         P
       )(($, B) => $ - BigInt(Math.max(1, B)));
       let ge = null, Se = 0, Ce = 0;
       const Ut = () => {
-        const $ = Le.value, B = Be.value, R = L.value, K = _.value;
+        const $ = Ae.value, B = Le.value, R = L.value, K = _.value;
         if (R && Ce !== 0) {
           const ee = at(
             ke(0n, $),
@@ -1100,8 +1100,8 @@ function Sa({
           L.on(($) => {
             $ || k.set(0n);
           }),
+          Ae.dispose,
           Le.dispose,
-          Be.dispose,
           () => {
             ge && clearTimeout(ge);
           }
@@ -1147,23 +1147,23 @@ function Sa({
             u
           ) : null,
           // middle-start sidebar
-          b != null ? p.div(
+          m != null ? p.div(
             s.class("bc-nine-slice-pane bc-nine-slice-sidebar-start"),
             v.left("0"),
-            v.top(m),
+            v.top(b),
             // style.height(visibleAreaHeightPx),
             // style.width(sidebarStartWidthPx),
             p.div(
               s.class("bc-nine-slice-pane-content"),
               Ye,
-              b
+              m
             )
           ) : null,
           // middle-center (main body)
           p.div(
             s.class("bc-nine-slice-pane bc-nine-slice-body"),
             v.left(y),
-            v.top(m),
+            v.top(b),
             // style.width(visibleAreaWidth.map(toPx)),
             // style.height(visibleAreaHeight.map(toPx)),
             p.div(
@@ -1176,7 +1176,7 @@ function Sa({
           f != null ? p.div(
             s.class("bc-nine-slice-pane bc-nine-slice-sidebar-end"),
             fe,
-            v.top(m),
+            v.top(b),
             // style.height(visibleAreaHeightPx),
             // style.width(sidebarEndWidthPx),
             p.div(
@@ -1247,7 +1247,7 @@ function Sa({
           T.scroll(($) => {
             const B = $.target, R = B.scrollLeft, K = B.scrollWidth - B.clientWidth;
             if (K > 0) {
-              const ee = R / K, le = Be.value;
+              const ee = R / K, le = Le.value;
               C.set(
                 BigInt(Math.round(Number(le) * ee))
               );
@@ -1289,7 +1289,7 @@ function Sa({
           T.scroll(($) => {
             const B = $.target, R = B.scrollTop, K = B.scrollHeight - B.clientHeight;
             if (K > 0) {
-              const ee = R / K, le = Le.value;
+              const ee = R / K, le = Ae.value;
               k.set(
                 BigInt(Math.round(Number(le) * ee))
               );
@@ -1331,7 +1331,7 @@ function rt({ header: e, footer: n, body: t, shadowOnScroll: a = !0 }, ...l) {
     p.div(
       s.class("bc-scrollable-panel__body"),
       Q(
-        (i) => W(_e(() => u(i)))
+        (i) => W(Te(() => u(i)))
       ),
       T.scroll((i) => {
         const o = i.target;
@@ -1407,52 +1407,52 @@ const ue = {
     onBeforeOpen: c,
     onAfterOpen: i,
     buildListboxContent: o
-  } = e, d = j(!1), b = j(-1), x = j(null), f = re("dropdown"), g = re("listbox");
+  } = e, d = j(!1), m = j(-1), x = j(null), f = re("dropdown"), g = re("listbox");
   let h, k;
   const C = (y) => {
-    n?.(y), d.set(!1), b.set(-1), x.set(null), h?.focus();
-  }, m = (y) => {
+    n?.(y), d.set(!1), m.set(-1), x.set(null), h?.focus();
+  }, b = (y) => {
     const D = ue.getValues(S.get(r));
     switch (y.key) {
       case "ArrowDown": {
         if (y.preventDefault(), !d.value)
-          d.set(!0), D.length > 0 && (b.set(0), x.set(D[0]));
+          d.set(!0), D.length > 0 && (m.set(0), x.set(D[0]));
         else {
           const V = Math.min(
-            b.value + 1,
+            m.value + 1,
             D.length - 1
           );
-          b.set(V), x.set(D[V] ?? null);
+          m.set(V), x.set(D[V] ?? null);
         }
         break;
       }
       case "ArrowUp": {
         if (y.preventDefault(), d.value) {
-          const V = Math.max(b.value - 1, 0);
-          b.set(V), x.set(D[V] ?? null);
+          const V = Math.max(m.value - 1, 0);
+          m.set(V), x.set(D[V] ?? null);
         }
         break;
       }
       case "Enter": {
-        if (y.preventDefault(), d.value && b.value >= 0) {
-          const V = D[b.value];
+        if (y.preventDefault(), d.value && m.value >= 0) {
+          const V = D[m.value];
           V != null && C(V);
         } else {
           c?.();
           const V = ue.getValues(S.get(r));
-          d.set(!0), V.length > 0 && (b.set(0), x.set(V[0])), setTimeout(() => i?.(), 0);
+          d.set(!0), V.length > 0 && (m.set(0), x.set(V[0])), setTimeout(() => i?.(), 0);
         }
         break;
       }
       case "Escape": {
-        d.value && (y.preventDefault(), d.set(!1), b.set(-1), x.set(null), h?.focus());
+        d.value && (y.preventDefault(), d.set(!1), m.set(-1), x.set(null), h?.focus());
         break;
       }
       case " ": {
         if (S.get(u)) {
           y.preventDefault();
           const V = ue.getValues(S.get(r));
-          d.set(!d.value), d.value && V.length > 0 && (b.set(0), x.set(V[0]));
+          d.set(!d.value), d.value && V.length > 0 && (m.set(0), x.set(V[0]));
         }
         break;
       }
@@ -1471,8 +1471,8 @@ const ue = {
       )
     },
     xe((y) => M(
-      Q((D) => (h = D, D.addEventListener("keydown", m), W(
-        () => D.removeEventListener("keydown", m)
+      Q((D) => (h = D, D.addEventListener("keydown", b), W(
+        () => D.removeEventListener("keydown", b)
       ))),
       G(e),
       s.id(f),
@@ -1491,10 +1491,10 @@ const ue = {
       ),
       t != null ? T.blur(() => {
         setTimeout(() => {
-          k?.contains(document.activeElement) || (d.set(!1), b.set(-1), t());
+          k?.contains(document.activeElement) || (d.set(!1), m.set(-1), t());
         }, 100);
       }) : O,
-      Ae({
+      Ve({
         content: () => p.div(
           Q((D) => {
             k = D;
@@ -1508,7 +1508,7 @@ const ue = {
             dropdownId: f,
             listboxId: g,
             focusedValue: x,
-            handleKeyDown: m,
+            handleKeyDown: b,
             onSelect: C
           })
         ),
@@ -1518,7 +1518,7 @@ const ue = {
         showOn: (D, V) => {
           const N = V;
           V = () => {
-            d.set(!1), b.set(-1), x.set(null), N();
+            d.set(!1), m.set(-1), x.set(null), N();
           };
           const I = () => {
             if (d.value)
@@ -1526,7 +1526,7 @@ const ue = {
             else {
               c?.();
               const _ = ue.getValues(S.get(r));
-              d.set(!0), _.length > 0 && (b.set(0), x.set(_[0])), D(), setTimeout(() => i?.(), 0);
+              d.set(!0), _.length > 0 && (m.set(0), x.set(_[0])), D(), setTimeout(() => i?.(), 0);
             }
           };
           return T.click(I);
@@ -1537,7 +1537,7 @@ const ue = {
       })
     ))
   );
-}, _t = (e, n, t, a, l) => Ve(
+}, _t = (e, n, t, a, l) => De(
   e,
   (r) => bt(r, {
     value: (u) => {
@@ -1557,9 +1557,9 @@ const ue = {
             c,
             i,
             u
-          )((o, d, b) => {
+          )((o, d, m) => {
             const x = [];
-            return o && x.push("bc-dropdown__option--selected"), d && x.push("bc-dropdown__option--focused"), b.disabled && x.push("bc-dropdown__option--disabled"), x.join(" ");
+            return o && x.push("bc-dropdown__option--selected"), d && x.push("bc-dropdown__option--focused"), m.disabled && x.push("bc-dropdown__option--disabled"), x.join(" ");
           })
         ),
         s.role("option"),
@@ -1616,17 +1616,17 @@ const ue = {
     t
   )((o, d) => {
     if (o == null) return "";
-    const b = (x) => {
+    const m = (x) => {
       for (const f of x) {
         if (f.type === "value" && l(f.value, o))
           return f.label;
         if (f.type === "group") {
-          const g = b(f.options);
+          const g = m(f.options);
           if (g) return g;
         }
       }
     };
-    return b(d) || String(o);
+    return m(d) || String(o);
   }), i = w(u)((o) => !o);
   return Tt({
     ...e,
@@ -1643,32 +1643,32 @@ const ue = {
     allowSpaceToggle: i,
     buildListboxContent: ({ focusedValue: o, onSelect: d }) => be(
       t,
-      (b) => _t(b, l, n, d, o)
+      (m) => _t(m, l, n, d, o)
     )
   });
 }, Mn = (e) => {
   const { controller: n, onChange: t, onBlur: a, ...l } = e;
   return Bn({
     ...l,
-    value: n.value,
+    value: n.signal,
     onChange: yt(n, t),
     onBlur: xt(n, a)
   });
 }, ka = (e) => Ue({
   ...e,
   content: Mn(e)
-}), Dt = (e, n, t, a, l, r) => Ve(
+}), Dt = (e, n, t, a, l, r) => De(
   e,
   (u) => bt(u, {
     value: (c) => {
       const i = w(
         c,
         t
-      )((d, b) => n(d.value, b)), o = w(
+      )((d, m) => n(d.value, m)), o = w(
         c,
         l
       )(
-        (d, b) => b != null && n(d.value, b)
+        (d, m) => m != null && n(d.value, m)
       );
       return p.div(
         W(i.dispose),
@@ -1679,9 +1679,9 @@ const ue = {
             i,
             o,
             c
-          )((d, b, x) => {
+          )((d, m, x) => {
             const f = [];
-            return d && f.push("bc-dropdown__option--selected"), b && f.push("bc-dropdown__option--focused"), x.disabled && f.push("bc-dropdown__option--disabled"), f.join(" ");
+            return d && f.push("bc-dropdown__option--selected"), m && f.push("bc-dropdown__option--focused"), x.disabled && f.push("bc-dropdown__option--disabled"), f.join(" ");
           })
         ),
         s.role("option"),
@@ -1734,24 +1734,24 @@ const ue = {
     loadOptions: t,
     renderOption: a,
     renderValue: l,
-    equality: r = (m, y) => m === y,
+    equality: r = (b, y) => b === y,
     placeholder: u,
     searchPlaceholder: c,
     debounceMs: i = 150
-  } = e, o = j(""), d = j(!1), b = j([]);
+  } = e, o = j(""), d = j(!1), m = j([]);
   let x;
   const f = S.toSignal(n), g = () => (l ?? a)(f);
   let h = null;
-  const k = (m) => {
-    d.set(!0), Promise.resolve(t(m)).then((y) => {
-      b.set(y ?? []);
+  const k = (b) => {
+    d.set(!0), Promise.resolve(t(b)).then((y) => {
+      m.set(y ?? []);
     }).catch(() => {
-      b.set([]);
+      m.set([]);
     }).finally(() => d.set(!1));
-  }, C = (m) => {
+  }, C = (b) => {
     h != null && (clearTimeout(h), h = null), h = setTimeout(
       () => {
-        k(m);
+        k(b);
       },
       Math.max(0, i)
     );
@@ -1760,19 +1760,19 @@ const ue = {
     ...e,
     role: "combobox",
     display: te(
-      w(n)((m) => m != null),
+      w(n)((b) => b != null),
       g,
-      () => Y(ne, (m) => m.$.selectOne)
+      () => Y(ne, (b) => b.$.selectOne)
     ),
-    optionsSource: b,
+    optionsSource: m,
     onBeforeOpen: () => {
-      const m = S.get(o);
-      C(m);
+      const b = S.get(o);
+      C(b);
     },
     onAfterOpen: () => {
       x?.focus();
     },
-    buildListboxContent: ({ focusedValue: m, handleKeyDown: y, onSelect: D }) => M(
+    buildListboxContent: ({ focusedValue: b, handleKeyDown: y, onSelect: D }) => M(
       // Search input at the top
       p.div(
         s.class("bc-dropdown__search"),
@@ -1801,13 +1801,13 @@ const ue = {
           U({ icon: "ph:spinner-bold", color: "neutral" })
         ),
         () => be(
-          b,
+          m,
           (V) => Dt(
             V,
             r,
             f,
             D,
-            m,
+            b,
             a
           )
         )
@@ -1818,7 +1818,7 @@ const ue = {
   const { controller: n, onChange: t, onBlur: a, ...l } = e;
   return On({
     ...l,
-    value: n.value,
+    value: n.signal,
     onChange: yt(n, t),
     onBlur: xt(n, a)
   });
@@ -1838,14 +1838,14 @@ function Vt(e) {
     closable: i = !0,
     onClose: o,
     onAction: d,
-    ariaLabel: b,
+    ariaLabel: m,
     ariaLabelledBy: x
   } = e, f = re("menu"), g = j(-1), h = j([]);
   let k = null;
-  return Ae({
+  return Ve({
     content: () => Q((C) => {
       k = document.activeElement;
-      const m = (I, _, L) => {
+      const b = (I, _, L) => {
         if (_.length === 0) return -1;
         let P = I + L, H = 0;
         for (; H < _.length; ) {
@@ -1861,12 +1861,12 @@ function Vt(e) {
         switch (I.key) {
           case "ArrowDown":
             I.preventDefault(), I.stopPropagation();
-            const P = m(L, _, 1);
+            const P = b(L, _, 1);
             D(P, _);
             break;
           case "ArrowUp":
             I.preventDefault(), I.stopPropagation();
-            const H = m(L, _, -1);
+            const H = b(L, _, -1);
             D(H, _);
             break;
           case "Enter":
@@ -1926,7 +1926,7 @@ function Vt(e) {
         s.role("menu"),
         s.tabindex(-1),
         A.orientation("vertical"),
-        b ? A.label(b) : M(),
+        m ? A.label(m) : M(),
         x ? A.labelledby(x) : M(),
         A.activedescendant(
           g.map((I) => {
@@ -1979,14 +1979,14 @@ function $a(e) {
     ariaLabel: c,
     submenu: i,
     submenuPlacement: o = "right-start"
-  } = e, d = n ?? re("menu-item"), b = `menu-item-${d}`, x = i != null;
+  } = e, d = n ?? re("menu-item"), m = `menu-item-${d}`, x = i != null;
   return p.div(
     s.class(
       w(r)(
         (f) => `bc-menu-item ${f ? "bc-menu-item--disabled" : ""} ${x ? "bc-menu-item--has-submenu" : ""}`
       )
     ),
-    s.id(b),
+    s.id(m),
     s.role("menuitem"),
     s.tabindex(-1),
     He.key(d),
@@ -2009,7 +2009,7 @@ function $a(e) {
     // End content
     l && p.span(s.class("bc-menu-item__end"), l),
     // Submenu (if present)
-    x && i ? Ae({
+    x && i ? Ve({
       content: () => M(
         s.class("bc-menu bc-submenu"),
         s.role("menu"),
@@ -2110,25 +2110,25 @@ function Et(e) {
   }, c = (o) => w(n)((d) => Mt(d, o, a)), i = Vt({
     items: () => {
       const o = S.get(t), d = [];
-      for (const b of o)
-        if (b.type === "value") {
-          const x = c(b.value);
+      for (const m of o)
+        if (m.type === "value") {
+          const x = c(m.value);
           d.push(
             p.div(
               s.role("menuitem"),
               s.tabindex(-1),
-              A.disabled(b.disabled === !0),
+              A.disabled(m.disabled === !0),
               A.checked(x),
               s.class("bc-menu-item"),
-              p.span(s.class("bc-menu-item__content"), b.label),
-              T.click(() => u(b.value))
+              p.span(s.class("bc-menu-item__content"), m.label),
+              T.click(() => u(m.value))
             )
           );
-        } else b.type === "group" ? d.push(
+        } else m.type === "group" ? d.push(
           p.div(
             s.class("bc-menu-group"),
-            p.div(s.class("bc-menu-group__label"), b.group),
-            ...b.options.map((x) => {
+            p.div(s.class("bc-menu-group__label"), m.group),
+            ...m.options.map((x) => {
               if (x.type === "value") {
                 const f = c(x.value);
                 return p.div(
@@ -2198,12 +2198,12 @@ function Ft(e) {
   }, o = (f) => {
     const g = S.get(n);
     e.onChange?.(Lt(g, f, a));
-  }, d = (f) => w(n)((g) => Mt(g, f, a)), b = w(
+  }, d = (f) => w(n)((g) => Mt(g, f, a)), m = w(
     t,
     c
   )((f, g) => Nt(f, g, u)), x = Vt({
     items: () => {
-      const f = [], g = S.get(b);
+      const f = [], g = S.get(m);
       if (g.length === 0)
         return f.push(
           p.div(
@@ -2406,11 +2406,11 @@ const Aa = (e) => {
     const g = w(
       n,
       a
-    )((C, m) => m == null ? !0 : (C ?? 0n) > m), h = w(
+    )((C, b) => b == null ? !0 : (C ?? 0n) > b), h = w(
       n,
       l
-    )((C, m) => m == null ? !0 : (C ?? 0n) < m), k = (C, m) => {
-      const y = S.get(n) ?? 0n, D = S.get(t), V = m?.shiftKey ? 10n : 1n, N = y + D * V * C, I = a != null ? S.get(a) : void 0, _ = l != null ? S.get(l) : void 0;
+    )((C, b) => b == null ? !0 : (C ?? 0n) < b), k = (C, b) => {
+      const y = S.get(n) ?? 0n, D = S.get(t), V = b?.shiftKey ? 10n : 1n, N = y + D * V * C, I = a != null ? S.get(a) : void 0, _ = l != null ? S.get(l) : void 0;
       if (C < 0n && I != null && N < I || C > 0n && _ != null && N > _) return;
       const L = i(N);
       L !== y && r && r(L);
@@ -2426,7 +2426,7 @@ const Aa = (e) => {
           w(
             h,
             e.disabled ?? !1
-          )((C, m) => !C || m)
+          )((C, b) => !C || b)
         ),
         T.click((C) => k(1n, C)),
         A.label(f.$.incrementValue),
@@ -2441,14 +2441,14 @@ const Aa = (e) => {
           w(
             g,
             e.disabled ?? !1
-          )((C, m) => !C || m)
+          )((C, b) => !C || b)
         ),
         T.click((C) => k(-1n, C)),
         A.label(f.$.decrementValue),
         U({ icon: "line-md:minus", size: "xs" })
       )
     );
-  }) : null, d = c != null && o != null ? M(o, c) : c ?? o, b = r ? (f) => {
+  }) : null, d = c != null && o != null ? M(o, c) : c ?? o, m = r ? (f) => {
     const g = ot(f);
     g != null && r(i(g));
   } : void 0, x = u ? (f) => {
@@ -2458,7 +2458,7 @@ const Aa = (e) => {
   return me({
     ...e,
     value: S.map(n, (f) => f.toString()),
-    onChange: b,
+    onChange: m,
     onInput: x,
     after: d,
     mask: null,
@@ -2480,18 +2480,18 @@ const Aa = (e) => {
     const h = w(
       n,
       a
-    )((m, y) => {
-      const D = m ?? 0n;
+    )((b, y) => {
+      const D = b ?? 0n;
       return y == null ? !0 : D > y;
     }), k = w(
       n,
       l
-    )((m, y) => {
-      const D = m ?? 0n;
+    )((b, y) => {
+      const D = b ?? 0n;
       return y == null ? !0 : D < y;
-    }), C = (m, y) => {
-      const D = S.get(n) ?? 0n, V = S.get(t), N = y?.shiftKey ? 10n : 1n, I = D + V * N * m, _ = a != null ? S.get(a) : void 0, L = l != null ? S.get(l) : void 0;
-      if (m < 0n && _ != null && I < _ || m > 0n && L != null && I > L) return;
+    }), C = (b, y) => {
+      const D = S.get(n) ?? 0n, V = S.get(t), N = y?.shiftKey ? 10n : 1n, I = D + V * N * b, _ = a != null ? S.get(a) : void 0, L = l != null ? S.get(l) : void 0;
+      if (b < 0n && _ != null && I < _ || b > 0n && L != null && I > L) return;
       const P = i(I);
       P !== D && r && r(P);
     };
@@ -2506,9 +2506,9 @@ const Aa = (e) => {
           w(
             k,
             e.disabled ?? !1
-          )((m, y) => !m || y)
+          )((b, y) => !b || y)
         ),
-        T.click((m) => C(1n, m)),
+        T.click((b) => C(1n, b)),
         A.label(g.$.incrementValue),
         U({ icon: "line-md:plus", size: "xs" })
       ),
@@ -2521,14 +2521,14 @@ const Aa = (e) => {
           w(
             h,
             e.disabled ?? !1
-          )((m, y) => !m || y)
+          )((b, y) => !b || y)
         ),
-        T.click((m) => C(-1n, m)),
+        T.click((b) => C(-1n, b)),
         A.label(g.$.decrementValue),
         U({ icon: "line-md:minus", size: "xs" })
       )
     );
-  }) : null, d = oe(n, e.disabled, r), b = c != null && o != null ? M(o, d, c) : c != null ? M(d, c) : o != null ? M(o, d) : d, x = r ? (g) => {
+  }) : null, d = oe(n, e.disabled, r), m = c != null && o != null ? M(o, d, c) : c != null ? M(d, c) : o != null ? M(o, d) : d, x = r ? (g) => {
     const h = it(g);
     r(h === null ? null : i(h));
   } : void 0, f = u ? (g) => {
@@ -2540,7 +2540,7 @@ const Aa = (e) => {
     value: S.map(n, (g) => g == null ? "" : g.toString()),
     onChange: x,
     onInput: f,
-    after: b,
+    after: m,
     mask: null,
     allowMode: "digits",
     class: "bc-number-input"
@@ -2843,8 +2843,8 @@ const Aa = (e) => {
   );
 };
 function es(e, n, t) {
-  return Ve(
-    e.value,
+  return De(
+    e.signal,
     () => {
       const a = e.transform(
         (l) => l,
@@ -2871,15 +2871,15 @@ class Rn extends tn {
   /**
    * Validates that the current value is a valid color
    */
-  isValidColor = this.value.map(mn);
+  isValidColor = this.signal.map(mn);
   /**
    * Validates that the current value is a valid hex color
    */
-  isValidHex = this.value.map(De);
+  isValidHex = this.signal.map(_e);
   /**
    * Gets the normalized hex color (always 6 characters with # prefix)
    */
-  normalizedHex = this.value.map(
+  normalizedHex = this.signal.map(
     (n) => de(n) ?? n
   );
   /**
@@ -2887,7 +2887,7 @@ class Rn extends tn {
    * @param color - The color value to set
    */
   setColor = (n) => {
-    if (De(n)) {
+    if (_e(n)) {
       const t = de(n);
       if (t) {
         this.change(t);
@@ -2922,7 +2922,7 @@ class Rn extends tn {
    * @returns RGB values or null if not a valid hex color
    */
   getRgb = () => {
-    const n = this.value.value, t = de(n);
+    const n = this.signal.value, t = de(n);
     if (!t) return null;
     const a = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);
     return a ? {
@@ -2957,7 +2957,7 @@ function ns(e) {
   return new Rn(
     e.path,
     e.change,
-    e.value,
+    e.signal,
     e.status,
     { disabled: e.disabled }
   );
@@ -3013,15 +3013,23 @@ const jn = () => Y(
 function ls({
   includeAuthI18n: e = !1,
   enableAppearance: n = !0,
-  defaultAppearance: t = "system"
-}, ...a) {
-  return Zt(({ set: l, use: r }) => {
-    l(he, {}), l(je, {}), l(ne, {}), n && l(ht, { defaultAppearance: t }), Qt.attach(r(he));
-    const u = M(en(), jn(), ...a);
+  defaultAppearance: t = "system",
+  appearancePreferenceKey: a = "bui-appearance"
+}, ...l) {
+  return Zt(({ set: r, use: u }) => {
+    r(he, {}), r(je, {}), r(ne, {}), r(ht, {
+      defaultAppearance: n ? t : "light",
+      appearancePreferenceKey: a
+    }), Qt.attach(u(he));
+    const c = M(
+      n ? en() : O,
+      jn(),
+      ...l
+    );
     return e ? Yt(
       () => import("./translations-1yD6Rm5l.js"),
-      ({ AuthI18n: c }) => ft(c, {}, () => u)
-    ) : u;
+      ({ AuthI18n: i }) => ft(i, {}, () => c)
+    ) : c;
   });
 }
 function rs({ content: e }) {
@@ -3096,7 +3104,7 @@ function Un({
   replace: i,
   target: o,
   rel: d
-}, ...b) {
+}, ...m) {
   return te(
     l,
     () => p.span(
@@ -3111,7 +3119,7 @@ function Un({
           (x) => ct(x ?? "base")
         )
       ),
-      ...b
+      ...m
     ),
     () => Re(
       {
@@ -3134,7 +3142,7 @@ function Un({
       ),
       o ? s.target(o) : null,
       d ? s.rel(d) : null,
-      ...b
+      ...m
     )
   );
 }
@@ -3161,9 +3169,9 @@ function qn(e, n, t) {
         const o = Array.from(
           new URLSearchParams(i.search).entries()
         ).sort(), d = Array.from(a.entries()).sort();
-        return o.length !== d.length ? !1 : o.every(([b, x], f) => {
+        return o.length !== d.length ? !1 : o.every(([m, x], f) => {
           const [g, h] = d[f];
-          return b === g && x === h;
+          return m === g && x === h;
         });
       } catch {
         return e.pathname === n;
@@ -3212,7 +3220,7 @@ function us({
   disableWhenActive: i,
   variant: o = "filled",
   size: d = "md",
-  color: b = "base",
+  color: m = "base",
   roundedness: x = "sm",
   disabled: f = !1
 }, ...g) {
@@ -3220,7 +3228,7 @@ function us({
     const k = c !== void 0 ? h.matchSignal(qe(e, c)) : w(h.location)(() => !1), C = w(
       k,
       i
-    )((y, D) => !(D ?? !0) || !c ? !1 : y), m = w(
+    )((y, D) => !(D ?? !0) || !c ? !1 : y), b = w(
       f,
       C
     )((y, D) => y || D);
@@ -3235,9 +3243,9 @@ function us({
         rel: u,
         variant: o,
         size: d,
-        color: b,
+        color: m,
         roundedness: x,
-        disabled: m
+        disabled: b
       },
       ...g
     );
@@ -3252,7 +3260,7 @@ function us({
       rel: u,
       variant: o,
       size: d,
-      color: b,
+      color: m,
       roundedness: x,
       disabled: f
     },
@@ -3271,10 +3279,10 @@ function dt({
   size: i,
   color: o,
   roundedness: d,
-  disabled: b
+  disabled: m
 }, ...x) {
   return te(
-    b ?? !1,
+    m ?? !1,
     () => p.span(
       s.class(
         w(
@@ -3293,7 +3301,7 @@ function dt({
         w(
           c,
           o,
-          b
+          m
         )(
           (f, g, h) => et(
             f ?? "filled",
@@ -3331,7 +3339,7 @@ function dt({
         w(
           c,
           o,
-          b
+          m
         )(
           (f, g, h) => et(
             f ?? "filled",
@@ -3498,9 +3506,9 @@ function Qn(e, n) {
   if (e !== "filled") return "";
   const t = /* @__PURE__ */ new Map(), a = ce(n, "solid", "light"), l = ce(n, "solid", "dark");
   t.set("--tabs-filled-inactive-bg", a.backgroundColor), t.set("--tabs-filled-inactive-text", "var(--color-white)");
-  const r = Te(n, "solid", "light");
+  const r = $e(n, "solid", "light");
   t.set("--tabs-filled-inactive-bg-hover", r.backgroundColor);
-  const u = Te(n, "solid", "dark");
+  const u = $e(n, "solid", "dark");
   t.set("--tabs-filled-inactive-bg-dark-hover", u.backgroundColor), t.set("--tabs-filled-inactive-bg-dark", l.backgroundColor), t.set("--tabs-filled-inactive-text-dark", l.textColor), t.set("--tabs-filled-active-bg", "var(--color-white)"), t.set("--tabs-filled-active-text", "var(--color-base-800)"), t.set("--tabs-filled-active-bg-dark", "var(--color-base-900)");
   const c = n === "white" || n === "black" || n === "transparent" ? "var(--color-white)" : cn(n, 400);
   return t.set("--tabs-filled-active-text-dark", c), Array.from(t.entries()).map(([i, o]) => `${i}: ${o}`).join("; ");
@@ -3534,15 +3542,15 @@ function bs(e) {
     orientation: i = "horizontal",
     showContent: o = !0,
     ariaLabel: d
-  } = e, b = re("tablist"), x = j(-1), f = w(t)((h) => n.find((k) => k.key === h)), g = (h) => {
+  } = e, m = re("tablist"), x = j(-1), f = w(t)((h) => n.find((k) => k.key === h)), g = (h) => {
     if (S.get(c)) return;
-    const C = x.value, m = S.get(i) === "horizontal";
+    const C = x.value, b = S.get(i) === "horizontal";
     let y = C;
     switch (h.key) {
-      case (m ? "ArrowRight" : "ArrowDown"):
+      case (b ? "ArrowRight" : "ArrowDown"):
         h.preventDefault(), y = Ie(C, n, 1);
         break;
-      case (m ? "ArrowLeft" : "ArrowUp"):
+      case (b ? "ArrowLeft" : "ArrowUp"):
         h.preventDefault(), y = Ie(C, n, -1);
         break;
       case "Home":
@@ -3574,11 +3582,11 @@ function bs(e) {
         c,
         r
       )(
-        (h, k, C, m) => Jn(
+        (h, k, C, b) => Jn(
           h ?? "md",
           k ?? "horizontal",
           C ?? !1,
-          m ?? "default"
+          b ?? "default"
         )
       )
     ),
@@ -3594,24 +3602,24 @@ function bs(e) {
     p.div(
       s.class("bc-tabs__list"),
       s.role("tablist"),
-      s.id(b),
+      s.id(m),
       A.orientation(
         i ?? "horizontal"
       ),
       d ? A.label(d) : M(),
       T.keydown(g),
       ...n.map((h, k) => {
-        const C = w(t)((V) => V === h.key), m = w(
+        const C = w(t)((V) => V === h.key), b = w(
           c,
           h.disabled
-        )((V, N) => V || N), y = `${b}-tab-${h.key}`, D = `${b}-panel-${h.key}`;
+        )((V, N) => V || N), y = `${m}-tab-${h.key}`, D = `${m}-panel-${h.key}`;
         return p.button(
           s.type("button"),
           s.class(
             w(
               l,
               C,
-              m
+              b
             )(
               (V, N, I) => ea(
                 V ?? "md",
@@ -3630,8 +3638,8 @@ function bs(e) {
           ),
           A.selected(C),
           A.controls(D),
-          A.disabled(m),
-          s.disabled(m),
+          A.disabled(b),
+          s.disabled(b),
           He["tab-index"](String(k)),
           h.ariaLabel ? A.label(h.ariaLabel) : M(),
           T.click((V) => {
@@ -3647,13 +3655,13 @@ function bs(e) {
     // Panel
     te(
       o ?? !0,
-      () => Ve(f, (h) => {
-        const k = h.$.key, C = k.map((y) => `${b}-tab-${y}`), m = k.map((y) => `${b}-panel-${y}`);
+      () => De(f, (h) => {
+        const k = h.$.key, C = k.map((y) => `${m}-tab-${y}`), b = k.map((y) => `${m}-panel-${y}`);
         return p.div(
           s.class("bc-tabs__panels"),
           p.div(
             s.class("bc-tabs__panel"),
-            s.id(m),
+            s.id(b),
             s.role("tabpanel"),
             s.tabindex(0),
             A.labelledby(C),
@@ -3673,7 +3681,7 @@ function ms(e) {
         size: i = "md",
         side: o = "right",
         dismissable: d = !0,
-        showCloseButton: b = !0,
+        showCloseButton: m = !0,
         onClose: x,
         overlayEffect: f = "opaque",
         container: g = "body",
@@ -3682,13 +3690,13 @@ function ms(e) {
         footer: C
       } = c;
       a = t;
-      const m = j("capturing");
+      const b = j("capturing");
       S.on(d, (V) => {
-        m.set(V ? "capturing" : "non-capturing");
+        b.set(V ? "capturing" : "non-capturing");
       });
       const y = w(
         h != null,
-        b
+        m
       )((V, N) => V || N), D = Q((V) => {
         const N = ve({
           initialStatus: "closed",
@@ -3698,7 +3706,7 @@ function ms(e) {
           N.close(), N.onClosed(() => {
             t();
           });
-        }, _e(() => N.open());
+        }, Te(() => N.open());
         const _ = re("drawer"), L = h != null ? `${_}-header` : void 0, P = `${_}-body`;
         return p.div(
           s.class(
@@ -3737,7 +3745,7 @@ function ms(e) {
               s.class("bc-drawer__header"),
               p.div(s.id(L), h),
               te(
-                b,
+                m,
                 () => Y(
                   ne,
                   (F) => vt({
@@ -3765,7 +3773,7 @@ function ms(e) {
         );
       });
       n({
-        mode: m,
+        mode: b,
         effect: f ?? "opaque",
         container: g,
         content: D,
@@ -3805,7 +3813,7 @@ function fs(e) {
   } = e, i = re("tooltip");
   return M(
     A.describedby(i),
-    Ae({
+    Ve({
       content: () => M(
         s.class("bc-tooltip"),
         s.role("tooltip"),
@@ -3825,14 +3833,14 @@ function fs(e) {
       arrow: (o) => {
         const d = o.map(
           ({
-            placement: b
-          }) => b.includes("top") ? "down" : b.includes("bottom") ? "up" : b.includes("left") ? "right" : b.includes("right") ? "left" : "up"
+            placement: m
+          }) => m.includes("top") ? "down" : m.includes("bottom") ? "up" : m.includes("left") ? "right" : m.includes("right") ? "left" : "up"
         );
         return M(
           s.class("bc-tooltip__arrow"),
-          s.class(d.map((b) => `bc-tooltip__arrow-${b}`)),
+          s.class(d.map((m) => `bc-tooltip__arrow-${m}`)),
           v.transform(
-            o.map(({ x: b, y: x }) => b == null && x == null ? "" : b != null ? `translate(${b}px, 0)` : `translate(0, ${x}px)`)
+            o.map(({ x: m, y: x }) => m == null && x == null ? "" : m != null ? `translate(${m}px, 0)` : `translate(0, ${x}px)`)
           ),
           ta(d)
         );
@@ -3847,46 +3855,32 @@ function na(e, n, t, a, l) {
     `--ribbon-text: ${r.textColor}`,
     `--ribbon-bg-dark: ${u.backgroundColor}`,
     `--ribbon-text-dark: ${u.textColor}`,
-    `--ribbon-thickness: ${$e(n)}`,
-    `--ribbon-inset: ${$e(t)}`,
-    `--ribbon-offset: ${$e(a)}`,
-    `--ribbon-min-width: ${$e(l)}`
+    `--ribbon-inset: ${Pe(n)}`,
+    `--ribbon-offset: ${Pe(t)}`,
+    `--ribbon-width: ${Pe(a)}`,
+    `--ribbon-angle: ${l}deg`
   ].join("; ");
 }
-function $e(e) {
+function Pe(e) {
   return e == null ? null : typeof e == "number" ? `${e}px` : e;
 }
 function gs({
   color: e = "primary",
   class: n,
-  thickness: t,
-  inset: a,
-  offset: l,
-  minWidth: r
+  inset: t = 0,
+  offset: a = 40,
+  width: l = 100,
+  angle: r = 45
 }, ...u) {
   return p.div(
     s.class("bc-ribbon"),
     // Theme styles via CSS variables
     s.style(
-      w(
-        e,
-        t,
-        a,
-        l,
-        r
-      )(
-        (c, i, o, d, b) => na(
-          c ?? "primary",
-          i ?? 28,
-          o ?? 0,
-          d ?? 40,
-          b ?? 0
-        )
-      )
+      w(e, t, a, l, r)(na)
     ),
     // Allow external classes
     s.class(n),
-    p.div(s.class("bc-ribbon__band"), ...u)
+    ...u
   );
 }
 export {
@@ -3943,7 +3937,7 @@ export {
   an as Expando,
   Ba as FileInput,
   sn as FilesInput,
-  Ae as Flyout,
+  Ve as Flyout,
   un as FocusTrap,
   ts as FormStatus,
   Ct as Group,
@@ -4160,7 +4154,7 @@ export {
   Ls as isRTLLocale,
   qn as isUrlMatch,
   mn as isValidColor,
-  De as isValidHexColor,
+  _e as isValidHexColor,
   bn as isValidHslColor,
   dn as isValidRgbColor,
   pn as isValidRgbaColor,