@tachui/modifiers 0.8.25 → 0.8.27

package/dist/{modifiers-basic-DvcXSq1_.js → modifiers-basic-BR-ELO6K.js}

@@ -1,38 +1,38 @@
-var He = Object.defineProperty;
-var Ne = (o, s, e) => s in o ? He(o, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[s] = e;
-var d = (o, s, e) => Ne(o, typeof s != "symbol" ? s + "" : s, e);
-import { globalModifierRegistry as ze } from "@tachui/registry";
-import { isSignal as p, isComputed as m, createEffect as b, getThemeSignal as j } from "@tachui/core/reactive";
-import { bindReactiveStyle as ke } from "@tachui/core/modifiers/base";
-import { shouldExpandForInfinity as ue, dimensionToCSS as L, isInfinity as A } from "@tachui/core/constants/layout";
-import { AnimationModifier as oe, LifecycleModifier as Fe, LayoutModifier as pe, ResizableModifier as We, AppearanceModifier as B } from "@tachui/core/modifiers";
-import { gradientToCSS as je } from "@tachui/core/gradients/css-generator";
+var ze = Object.defineProperty;
+var Fe = (r, s, e) => s in r ? ze(r, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[s] = e;
+var d = (r, s, e) => Fe(r, typeof s != "symbol" ? s + "" : s, e);
+import { globalModifierRegistry as Ne } from "@tachui/registry";
+import { isSignal as p, isComputed as h, createEffect as b, getThemeSignal as j } from "@tachui/core/reactive";
+import { bindReactiveStyle as Ae, collectStaticAnimationCSSRules as Ie } from "@tachui/core/modifiers/base";
+import { shouldExpandForInfinity as ue, dimensionToCSS as L, isInfinity as k } from "@tachui/core/constants/layout";
+import { AnimationModifier as re, LifecycleModifier as We, LayoutModifier as pe, ResizableModifier as je, AppearanceModifier as _ } from "@tachui/core/modifiers";
+import { gradientToCSS as Ue } from "@tachui/core/gradients/css-generator";
 const V = {
   LAYOUT: 100,
   APPEARANCE: 200,
   INTERACTION: 300,
   ANIMATION: 400,
   CUSTOM: 500
-}, xe = Symbol.for("tachui.modifier.instanceId"), Ue = "package";
-let Me = 0;
-function P(o) {
-  return typeof HTMLElement < "u" && o instanceof HTMLElement;
+}, xe = Symbol.for("tachui.modifier.instanceId"), Ge = "package";
+let Te = 0;
+function P(r) {
+  return typeof HTMLElement < "u" && r instanceof HTMLElement;
 }
-function z(o) {
-  return typeof o == "object" && o !== null && "style" in o && !!o.style;
+function F(r) {
+  return typeof r == "object" && r !== null && "style" in r && !!r.style;
 }
 function Q() {
   return typeof document < "u";
 }
-function Ge() {
+function Ke() {
   return typeof window < "u";
 }
-function Ke(o) {
-  const s = o[xe];
+function Ye(r) {
+  const s = r[xe];
   if (typeof s == "number") return s;
-  Me += 1;
-  const e = Me;
-  return Object.defineProperty(o, xe, {
+  Te += 1;
+  const e = Te;
+  return Object.defineProperty(r, xe, {
     value: e,
     enumerable: !1,
     configurable: !1,
@@ -43,13 +43,16 @@ let g = class {
   constructor(s) {
     this.properties = s;
   }
+  getStaticCSS(s) {
+    return [];
+  }
   /**
    * Helper to resolve reactive properties
    */
   resolveReactiveProps(s, e) {
     const t = {};
     for (const [i, n] of Object.entries(s))
-      p(n) || m(n), t[i] = n;
+      p(n) || h(n), t[i] = n;
     return t;
   }
   /**
@@ -59,15 +62,15 @@ let g = class {
     const i = typeof HTMLElement < "u" && s instanceof HTMLElement;
     if (!i && !s.style)
       return;
-    const n = this.toCSSProperty(e), r = s.style, a = (l) => {
+    const n = this.toCSSProperty(e), o = s.style, a = (l) => {
       if (l.includes("!important")) {
         const c = l.replace(/\s*!important\s*$/, "").trim();
-        r.setProperty(n, c, "important");
+        o.setProperty(n, c, "important");
         return;
       }
-      r.setProperty(n, l);
+      o.setProperty(n, l);
     };
-    if (p(t) || m(t)) {
+    if (p(t) || h(t)) {
       b(() => {
         const l = t();
         a(String(l));
@@ -124,28 +127,28 @@ let g = class {
   applyStyles(s, e) {
     const t = typeof HTMLElement < "u" && s instanceof HTMLElement;
     if (t || s.style) {
-      const i = s.style, n = (r, a) => {
+      const i = s.style, n = (o, a) => {
         if (i.setProperty)
           if (typeof a == "string" && a.includes("!important")) {
             const l = a.replace(/\s*!important\s*$/, "").trim();
-            i.setProperty(r, l, "important");
+            i.setProperty(o, l, "important");
           } else
-            i.setProperty(r, a);
+            i.setProperty(o, a);
         else
-          i[r] = a;
+          i[o] = a;
       };
-      for (const [r, a] of Object.entries(e))
+      for (const [o, a] of Object.entries(e))
         if (a !== void 0) {
-          const l = this.toCSSProperty(r);
-          if (p(a) || m(a)) {
-            const c = a, u = Ke(this);
-            ke({
+          const l = this.toCSSProperty(o);
+          if (p(a) || h(a)) {
+            const c = a, u = Ye(this);
+            Ae({
               element: s,
               accessor: c,
-              updaterId: `${Ue}:${u}:${l}`,
+              updaterId: `${Ge}:${u}:${l}`,
               updater: (f) => {
-                const h = this.toCSSValueForProperty(l, f);
-                n(l, h);
+                const m = this.toCSSValueForProperty(l, f);
+                n(l, m);
               }
             });
           } else {
@@ -179,7 +182,7 @@ let g = class {
       cleanup: []
     };
   }
-}, Jo = class extends g {
+}, Jr = class extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "layout");
@@ -196,36 +199,36 @@ let g = class {
       i
     );
     this.applyStyles(t.element, n);
-    const r = this.properties;
-    r.offset && P(t.element) && this.applyOffsetTransform(t.element, r.offset), r.aspectRatio && P(t.element) && this.applyAspectRatio(t.element, r.aspectRatio), r.scaleEffect && P(t.element) && this.applyScaleTransform(t.element, r.scaleEffect), r.position && P(t.element) && this.applyAbsolutePosition(t.element, r.position), r.zIndex !== void 0 && P(t.element) && this.applyZIndex(t.element, r.zIndex);
+    const o = this.properties;
+    o.offset && P(t.element) && this.applyOffsetTransform(t.element, o.offset), o.aspectRatio && P(t.element) && this.applyAspectRatio(t.element, o.aspectRatio), o.scaleEffect && P(t.element) && this.applyScaleTransform(t.element, o.scaleEffect), o.position && P(t.element) && this.applyAbsolutePosition(t.element, o.position), o.zIndex !== void 0 && P(t.element) && this.applyZIndex(t.element, o.zIndex);
   }
   applyOffsetTransform(e, t) {
     const { x: i, y: n } = t;
-    if (p(i) || m(i) || p(n) || m(n))
+    if (p(i) || h(i) || p(n) || h(n))
       b(() => {
-        const r = p(i) || m(i) ? i() : i ?? 0, a = p(n) || m(n) ? n() : n ?? 0, l = this.toCSSValue(r), c = this.toCSSValue(a), u = `translate(${l}, ${c})`, h = (e.style.transform || "").split(" ").filter((v) => v && !v.startsWith("translate(")).join(" "), y = h ? `${h} ${u}` : u;
+        const o = p(i) || h(i) ? i() : i ?? 0, a = p(n) || h(n) ? n() : n ?? 0, l = this.toCSSValue(o), c = this.toCSSValue(a), u = `translate(${l}, ${c})`, m = (e.style.transform || "").split(" ").filter((v) => v && !v.startsWith("translate(")).join(" "), y = m ? `${m} ${u}` : u;
         e.style.transform = y;
       });
     else {
-      const r = i ?? 0, a = n ?? 0, l = this.toCSSValue(r), c = this.toCSSValue(a), u = `translate(${l}, ${c})`, h = (e.style.transform || "").split(" ").filter((v) => v && !v.startsWith("translate(")).join(" "), y = h ? `${h} ${u}` : u;
+      const o = i ?? 0, a = n ?? 0, l = this.toCSSValue(o), c = this.toCSSValue(a), u = `translate(${l}, ${c})`, m = (e.style.transform || "").split(" ").filter((v) => v && !v.startsWith("translate(")).join(" "), y = m ? `${m} ${u}` : u;
       e.style.transform = y;
     }
   }
   applyAspectRatio(e, t) {
     const { ratio: i, contentMode: n } = t;
-    i !== void 0 && (p(i) || m(i) ? b(() => {
-      const r = typeof i == "function" ? i() : i;
-      e.style.aspectRatio = String(r);
+    i !== void 0 && (p(i) || h(i) ? b(() => {
+      const o = typeof i == "function" ? i() : i;
+      e.style.aspectRatio = String(o);
     }) : e.style.aspectRatio = String(i), n === "fill" ? e.style.objectFit = "cover" : e.style.objectFit = "contain");
   }
   // Phase 3 - Epic: Butternut Transform Methods
   applyScaleTransform(e, t) {
-    const { x: i, y: n, anchor: r } = t, a = i ?? 1, l = n ?? a;
-    if (p(a) || m(a) || p(l) || m(l))
+    const { x: i, y: n, anchor: o } = t, a = i ?? 1, l = n ?? a;
+    if (p(a) || h(a) || p(l) || h(l))
       b(() => {
-        const c = p(a) || m(a) ? a() : a, u = p(l) || m(l) ? l() : l, f = `scale(${c}, ${u})`;
+        const c = p(a) || h(a) ? a() : a, u = p(l) || h(l) ? l() : l, f = `scale(${c}, ${u})`;
         e.style.transformOrigin = this.getTransformOrigin(
-          r || "center"
+          o || "center"
         );
         const y = (e.style.transform || "").replace(/\s*scale\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), v = y ? `${y} ${f}` : f;
         e.style.transform = v;
@@ -233,26 +236,26 @@ let g = class {
     else {
       const c = `scale(${a}, ${l})`;
       e.style.transformOrigin = this.getTransformOrigin(
-        r || "center"
+        o || "center"
       );
-      const f = (e.style.transform || "").replace(/\s*scale\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), h = f ? `${f} ${c}` : c;
-      e.style.transform = h;
+      const f = (e.style.transform || "").replace(/\s*scale\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), m = f ? `${f} ${c}` : c;
+      e.style.transform = m;
     }
   }
   applyAbsolutePosition(e, t) {
     const { x: i, y: n } = t;
-    if (e.style.position = "absolute", p(i) || m(i) || p(n) || m(n))
+    if (e.style.position = "absolute", p(i) || h(i) || p(n) || h(n))
       b(() => {
-        const r = p(i) || m(i) ? i() : i ?? 0, a = p(n) || m(n) ? n() : n ?? 0;
-        e.style.left = this.toCSSValue(r), e.style.top = this.toCSSValue(a);
+        const o = p(i) || h(i) ? i() : i ?? 0, a = p(n) || h(n) ? n() : n ?? 0;
+        e.style.left = this.toCSSValue(o), e.style.top = this.toCSSValue(a);
       });
     else {
-      const r = i ?? 0, a = n ?? 0;
-      e.style.left = this.toCSSValue(r), e.style.top = this.toCSSValue(a);
+      const o = i ?? 0, a = n ?? 0;
+      e.style.left = this.toCSSValue(o), e.style.top = this.toCSSValue(a);
     }
   }
   applyZIndex(e, t) {
-    p(t) || m(t) ? b(() => {
+    p(t) || h(t) ? b(() => {
       const i = t();
       e.style.zIndex = String(i);
     }) : e.style.zIndex = String(t);
@@ -273,31 +276,31 @@ let g = class {
   computeLayoutStyles(e, t) {
     const i = {};
     if (e.frame) {
-      const n = e.frame, r = ue(n);
-      if (Object.assign(i, r.cssProps), n.width !== void 0) {
+      const n = e.frame, o = ue(n);
+      if (Object.assign(i, o.cssProps), n.width !== void 0) {
         const a = L(n.width);
-        a !== void 0 && !A(n.width) && !r.expandWidth && (i.width = a);
+        a !== void 0 && !k(n.width) && !o.expandWidth && (i.width = a);
       }
       if (n.height !== void 0) {
         const a = L(n.height);
-        a !== void 0 && !A(n.height) && !r.expandHeight && (i.height = a);
+        a !== void 0 && !k(n.height) && !o.expandHeight && (i.height = a);
       }
       if (n.minWidth !== void 0) {
         const a = L(n.minWidth);
         a !== void 0 && (i.minWidth = a);
       }
-      if (n.maxWidth !== void 0 && !A(n.maxWidth)) {
+      if (n.maxWidth !== void 0 && !k(n.maxWidth)) {
         const a = L(n.maxWidth);
         a !== void 0 && (i.maxWidth = a);
-      } else A(n.maxWidth) && (i.maxWidth = "none", i.flexGrow = "1 !important", i.flexShrink = "1 !important", i.flexBasis = "0% !important", i.alignSelf = "stretch !important");
+      } else k(n.maxWidth) && (i.maxWidth = "none", i.flexGrow = "1 !important", i.flexShrink = "1 !important", i.flexBasis = "0% !important", i.alignSelf = "stretch !important");
       if (n.minHeight !== void 0) {
         const a = L(n.minHeight);
         a !== void 0 && (i.minHeight = a);
       }
-      if (n.maxHeight !== void 0 && !A(n.maxHeight)) {
+      if (n.maxHeight !== void 0 && !k(n.maxHeight)) {
         const a = L(n.maxHeight);
         a !== void 0 && (i.maxHeight = a);
-      } else A(n.maxHeight) && (i.maxHeight = "none", i.flexGrow = "1 !important", i.flexShrink = "1 !important", i.flexBasis = "0% !important", i.alignSelf = "stretch !important");
+      } else k(n.maxHeight) && (i.maxHeight = "none", i.flexGrow = "1 !important", i.flexShrink = "1 !important", i.flexBasis = "0% !important", i.alignSelf = "stretch !important");
     }
     if (e.padding !== void 0)
       if (typeof e.padding == "number")
@@ -336,16 +339,16 @@ let g = class {
       n > 0 ? (i.flexShrink = "0", i.flexGrow = String(Math.max(1, n / 10)), i.zIndex = String(n), i.gridRowEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(n / 10))))}`, i.gridColumnEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(n / 10))))}`) : n === 0 ? (i.flexShrink = "1", i.flexGrow = "1") : (i.flexShrink = String(Math.abs(n)), i.flexGrow = "0", i.zIndex = String(n)), i && typeof i == "object" && "setProperty" in i && i.setProperty("--layout-priority", String(n));
     }
     if (e.offset, e.aspectRatio) {
-      const { ratio: n, contentMode: r } = e.aspectRatio;
-      n !== void 0 && (i.aspectRatio = typeof n == "number" ? String(n) : n, r === "fill" ? i.objectFit = "cover" : i.objectFit = "contain");
+      const { ratio: n, contentMode: o } = e.aspectRatio;
+      n !== void 0 && (i.aspectRatio = typeof n == "number" ? String(n) : n, o === "fill" ? i.objectFit = "cover" : i.objectFit = "contain");
     }
     if (e.fixedSize) {
-      const { horizontal: n, vertical: r } = e.fixedSize;
-      n && (i.flexShrink = "0", i.width = "max-content"), r && (i.flexShrink = "0", i.height = "max-content");
+      const { horizontal: n, vertical: o } = e.fixedSize;
+      n && (i.flexShrink = "0", i.width = "max-content"), o && (i.flexShrink = "0", i.height = "max-content");
     }
     return i;
   }
-}, er = class extends g {
+}, eo = class extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "appearance");
@@ -363,8 +366,8 @@ let g = class {
       i
     );
     this.applyAssetBasedStyles(t.element, n);
-    const r = this.computeAppearanceStyles(n);
-    this.applyStyles(t.element, r);
+    const o = this.computeAppearanceStyles(n);
+    this.applyStyles(t.element, o);
   }
   /**
    * Apply Asset-based styles with theme reactivity
@@ -402,27 +405,27 @@ let g = class {
       n.width !== void 0 && (t.borderWidth = this.toCSSValue(n.width)), n.color && !this.isAsset(n.color) && (t.borderColor = n.color), n.style && (t.borderStyle = n.style);
     }
     if (e.shadow) {
-      const n = e.shadow, r = n.x || 0, a = n.y || 0, l = n.radius || 0, c = n.color || "rgba(0,0,0,0.25)";
-      t.boxShadow = `${r}px ${a}px ${l}px ${c}`;
+      const n = e.shadow, o = n.x || 0, a = n.y || 0, l = n.radius || 0, c = n.color || "rgba(0,0,0,0.25)";
+      t.boxShadow = `${o}px ${a}px ${l}px ${c}`;
     }
     if (e.clipped && (t.overflow = "hidden"), e.clipShape) {
-      const { shape: n, parameters: r } = e.clipShape;
+      const { shape: n, parameters: o } = e.clipShape;
       switch (n) {
         case "circle":
           t.clipPath = "circle(50%)";
           break;
         case "ellipse": {
-          const a = r?.radiusX || "50%", l = r?.radiusY || "50%";
+          const a = o?.radiusX || "50%", l = o?.radiusY || "50%";
           t.clipPath = `ellipse(${a} ${l} at center)`;
           break;
         }
         case "rect": {
-          const a = r?.inset || 0;
+          const a = o?.inset || 0;
           t.clipPath = `inset(${a}px)`;
           break;
         }
         case "polygon": {
-          const a = r?.points || "0% 0%, 100% 0%, 100% 100%, 0% 100%";
+          const a = o?.points || "0% 0%, 100% 0%, 100% 100%, 0% 100%";
           t.clipPath = `polygon(${a})`;
           break;
         }
@@ -431,7 +434,7 @@ let g = class {
     const i = [];
     return e.blur !== void 0 && i.push(`blur(${e.blur}px)`), e.brightness !== void 0 && i.push(`brightness(${e.brightness})`), e.contrast !== void 0 && i.push(`contrast(${e.contrast})`), e.saturation !== void 0 && i.push(`saturate(${e.saturation})`), e.hueRotation !== void 0 && i.push(`hue-rotate(${e.hueRotation}deg)`), e.grayscale !== void 0 && i.push(`grayscale(${e.grayscale})`), e.colorInvert !== void 0 && i.push(`invert(${e.colorInvert})`), i.length > 0 && (t.filter = i.join(" ")), t;
   }
-}, ir = class extends g {
+}, io = class extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "interaction");
@@ -445,16 +448,16 @@ let g = class {
     }), i.onWheel && t.element.addEventListener("wheel", i.onWheel, {
       passive: !1
     }), i.onInput && t.element.addEventListener("input", i.onInput), i.onChange && t.element.addEventListener("change", (n) => {
-      const r = n.target, a = r.value || r.textContent || "";
+      const o = n.target, a = o.value || o.textContent || "";
       i.onChange(a, n);
     }), i.onCopy && t.element.addEventListener("copy", i.onCopy), i.onCut && t.element.addEventListener("cut", i.onCut), i.onPaste && t.element.addEventListener("paste", i.onPaste), i.onSelect && t.element.addEventListener("select", i.onSelect), i.disabled !== void 0 && P(t.element)) {
-      const n = t.element, r = (a) => {
+      const n = t.element, o = (a) => {
         a ? (n.setAttribute("disabled", "true"), n.style.pointerEvents = "none", n.style.opacity = "0.6") : (n.removeAttribute("disabled"), n.style.pointerEvents = "", n.style.opacity = "");
       };
-      p(i.disabled) || m(i.disabled) ? b(() => {
+      p(i.disabled) || h(i.disabled) ? b(() => {
         const a = !!i.disabled();
-        r(a);
-      }) : r(!!i.disabled);
+        o(a);
+      }) : o(!!i.disabled);
     }
     i.draggable !== void 0 && P(t.element) && (t.element.draggable = i.draggable), i.accessibilityLabel && t.element.setAttribute("aria-label", i.accessibilityLabel), i.accessibilityHint && t.element.setAttribute("aria-describedby", i.accessibilityHint), i.onLongPressGesture && this.setupLongPressGesture(t.element, i.onLongPressGesture), i.keyboardShortcut && this.setupKeyboardShortcut(t.element, i.keyboardShortcut), i.focused !== void 0 && this.setupFocusManagement(t.element, i.focused), i.focusable && this.setupFocusable(t.element, i.focusable), i.onContinuousHover && this.setupContinuousHover(t.element, i.onContinuousHover), i.allowsHitTesting !== void 0 && this.setupHitTesting(t.element, i.allowsHitTesting);
   }
@@ -464,12 +467,12 @@ let g = class {
    */
   setupLongPressGesture(e, t) {
     const i = t.minimumDuration ?? 500, n = t.maximumDistance ?? 10;
-    let r, a = null, l = !1;
+    let o, a = null, l = !1;
     const c = () => {
-      r && (clearTimeout(r), r = void 0), l && t.onPressingChanged && t.onPressingChanged(!1), l = !1, a = null;
+      o && (clearTimeout(o), o = void 0), l && t.onPressingChanged && t.onPressingChanged(!1), l = !1, a = null;
     }, u = (v) => {
       const S = v;
-      a = { x: S.clientX, y: S.clientY }, l = !0, t.onPressingChanged && t.onPressingChanged(!0), r = (Ge() ? window.setTimeout : setTimeout)(() => {
+      a = { x: S.clientX, y: S.clientY }, l = !0, t.onPressingChanged && t.onPressingChanged(!0), o = (Ke() ? window.setTimeout : setTimeout)(() => {
         l && a && (t.perform(), c());
       }, i);
     }, f = (v) => {
@@ -478,12 +481,12 @@ let g = class {
       Math.sqrt(
         Math.pow(S.clientX - a.x, 2) + Math.pow(S.clientY - a.y, 2)
       ) > n && c();
-    }, h = () => {
+    }, m = () => {
       c();
     }, y = () => {
       c();
     };
-    e.addEventListener("pointerdown", u), e.addEventListener("pointermove", f), e.addEventListener("pointerup", h), e.addEventListener(
+    e.addEventListener("pointerdown", u), e.addEventListener("pointermove", f), e.addEventListener("pointerup", m), e.addEventListener(
       "pointercancel",
       y
     ), e._longPressCleanup = c;
@@ -492,22 +495,22 @@ let g = class {
    * Setup keyboard shortcut handling
    */
   setupKeyboardShortcut(e, t) {
-    const i = t.modifiers ?? [], n = (r) => {
+    const i = t.modifiers ?? [], n = (o) => {
       const a = {
         cmd: i.includes("cmd") || i.includes("meta"),
         ctrl: i.includes("ctrl"),
         shift: i.includes("shift"),
         alt: i.includes("alt")
       }, l = {
-        cmd: r.metaKey || r.ctrlKey,
+        cmd: o.metaKey || o.ctrlKey,
         // Handle both Mac (meta) and PC (ctrl)
-        ctrl: r.ctrlKey,
-        shift: r.shiftKey,
-        alt: r.altKey
-      }, c = r.key.toLowerCase() === t.key.toLowerCase(), u = Object.entries(a).every(
-        ([f, h]) => h === l[f]
+        ctrl: o.ctrlKey,
+        shift: o.shiftKey,
+        alt: o.altKey
+      }, c = o.key.toLowerCase() === t.key.toLowerCase(), u = Object.entries(a).every(
+        ([f, m]) => m === l[f]
       );
-      c && u && (r.preventDefault(), t.action());
+      c && u && (o.preventDefault(), t.action());
     };
     Q() && (document.addEventListener("keydown", n), e._keyboardShortcutCleanup = () => {
       document.removeEventListener("keydown", n);
@@ -519,7 +522,7 @@ let g = class {
   setupFocusManagement(e, t) {
     if (!P(e)) return;
     const i = e;
-    i.hasAttribute("tabindex") || i.setAttribute("tabindex", "0"), p(t) || m(t) ? b(() => {
+    i.hasAttribute("tabindex") || i.setAttribute("tabindex", "0"), p(t) || h(t) ? b(() => {
       t() ? i.focus() : i.blur();
     }) : t && i.focus();
   }
@@ -546,13 +549,13 @@ let g = class {
       } else
         c = l.clientX, u = l.clientY;
       t.perform({ x: c, y: u });
-    }, r = () => {
+    }, o = () => {
       t.perform(null);
     };
-    e.addEventListener("mousemove", n), e.addEventListener("mouseleave", r), e._continuousHoverCleanup = () => {
+    e.addEventListener("mousemove", n), e.addEventListener("mouseleave", o), e._continuousHoverCleanup = () => {
       e.removeEventListener("mousemove", n), e.removeEventListener(
         "mouseleave",
-        r
+        o
       );
     };
   }
@@ -562,7 +565,7 @@ let g = class {
   setupHitTesting(e, t) {
     P(e) && (e.style.pointerEvents = t ? "" : "none");
   }
-}, Ye = class extends g {
+}, Xe = class extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "animation");
@@ -572,26 +575,26 @@ let g = class {
     if (!t.element) return;
     const i = this.properties;
     if (i.transition) {
-      const n = i.transition, r = n.property || "all", a = n.duration || 300, l = n.easing || "ease", c = n.delay || 0;
-      z(t.element) && (r === "none" ? t.element.style.transition = "none" : t.element.style.transition = `${r} ${a}ms ${l} ${c}ms`);
+      const n = i.transition, o = n.property || "all", a = n.duration || 300, l = n.easing || "ease", c = n.delay || 0;
+      F(t.element) && (o === "none" ? t.element.style.transition = "none" : t.element.style.transition = `${o} ${a}ms ${l} ${c}ms`);
     }
-    if (i.animation && z(t.element)) {
+    if (i.animation && F(t.element)) {
       const n = i.animation;
       if (n.keyframes && Q()) {
-        const r = `tachui-animation-${t.componentId}-${Date.now()}`, a = this.createKeyframeRule(
-          r,
+        const o = `tachui-animation-${t.componentId}-${Date.now()}`, a = this.createKeyframeRule(
+          o,
           n.keyframes
         );
         this.addKeyframesToStylesheet(a);
         const l = n.duration || 1e3, c = n.easing || "ease", u = n.iterations || 1, f = n.direction || "normal";
-        t.element.style.animation = `${r} ${l}ms ${c} ${u} ${f}`;
+        t.element.style.animation = `${o} ${l}ms ${c} ${u} ${f}`;
       }
     }
-    if (i.transform && z(t.element) && (p(i.transform) || m(i.transform) ? b(() => {
+    if (i.transform && F(t.element) && (p(i.transform) || h(i.transform) ? b(() => {
       const n = i.transform();
-      z(t.element) && (t.element.style.transform = n);
-    }) : t.element.style.transform = i.transform), i.rotationEffect && z(t.element)) {
-      const { angle: n, anchor: r } = i.rotationEffect, l = {
+      F(t.element) && (t.element.style.transform = n);
+    }) : t.element.style.transform = i.transform), i.rotationEffect && F(t.element)) {
+      const { angle: n, anchor: o } = i.rotationEffect, l = {
         center: "50% 50%",
         top: "50% 0%",
         topLeading: "0% 0%",
@@ -601,30 +604,37 @@ let g = class {
         bottomTrailing: "100% 100%",
         leading: "0% 50%",
         trailing: "100% 50%"
-      }[r || "center"] || "50% 50%", c = `rotate(${n}deg)`;
-      if (p(n) || m(n))
+      }[o || "center"] || "50% 50%", c = `rotate(${n}deg)`;
+      if (p(n) || h(n))
         b(() => {
           const f = `rotate(${typeof n == "function" ? n() : n}deg)`;
-          if (z(t.element)) {
+          if (F(t.element)) {
             t.element.style.transformOrigin = l;
             const y = (t.element.style.transform || "").split(" ").filter((S) => S && !S.startsWith("rotate(")).join(" "), v = y ? `${y} ${f}` : f;
             t.element.style.transform = v;
           }
         });
-      else if (z(t.element)) {
+      else if (F(t.element)) {
         t.element.style.transformOrigin = l;
-        const f = (t.element.style.transform || "").split(" ").filter((y) => y && !y.startsWith("rotate(")).join(" "), h = f ? `${f} ${c}` : c;
-        t.element.style.transform = h;
+        const f = (t.element.style.transform || "").split(" ").filter((y) => y && !y.startsWith("rotate(")).join(" "), m = f ? `${f} ${c}` : c;
+        t.element.style.transform = m;
       }
     }
     i.overlay && P(t.element) && this.applyOverlay(t.element, i.overlay, t);
   }
+  getStaticCSS(e) {
+    return Ie(
+      e,
+      this.properties,
+      this.createKeyframeRule.bind(this)
+    );
+  }
   applyOverlay(e, t, i) {
-    const { content: n, alignment: r = "center" } = t;
+    const { content: n, alignment: o = "center" } = t;
     if ((e.style.position === "" || e.style.position === "static") && (e.style.position = "relative"), !Q()) return;
     const a = document.createElement("div");
     a.style.position = "absolute", a.style.pointerEvents = "none";
-    const l = this.getOverlayAlignment(r);
+    const l = this.getOverlayAlignment(o);
     if (Object.assign(a.style, l), typeof n == "function") {
       const c = n();
       if (c && typeof c.render == "function") {
@@ -686,10 +696,10 @@ let g = class {
   createKeyframeRule(e, t) {
     let i = `@keyframes ${e} {
 `;
-    for (const [n, r] of Object.entries(t)) {
+    for (const [n, o] of Object.entries(t)) {
       i += `  ${n} {
 `;
-      for (const [a, l] of Object.entries(r)) {
+      for (const [a, l] of Object.entries(o)) {
         const c = this.toCSSProperty(a);
         i += `    ${c}: ${l};
 `;
@@ -706,7 +716,7 @@ let g = class {
     );
     t || (t = document.createElement("style"), t.id = "tachui-animations", document.head.appendChild(t)), t.appendChild(document.createTextNode(e));
   }
-}, rr = class extends g {
+}, oo = class extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "lifecycle");
@@ -721,8 +731,8 @@ let g = class {
   setupLifecycleObserver(e, t) {
     const i = new IntersectionObserver(
       (n) => {
-        n.forEach((r) => {
-          r.isIntersecting && t.onAppear ? t.onAppear() : !r.isIntersecting && t.onDisappear && t.onDisappear();
+        n.forEach((o) => {
+          o.isIntersecting && t.onAppear ? t.onAppear() : !o.isIntersecting && t.onDisappear && t.onDisappear();
         });
       },
       {
@@ -743,11 +753,11 @@ let g = class {
     (async () => {
       try {
         if (i.aborted) return;
-        const r = t.operation();
-        r instanceof Promise && await r;
-      } catch (r) {
+        const o = t.operation();
+        o instanceof Promise && await o;
+      } catch (o) {
         if (i.aborted) return;
-        console.error("TachUI Task Error:", r);
+        console.error("TachUI Task Error:", o);
       }
     })(), this.addCleanup(() => {
       this.activeAbortController && this.activeAbortController.abort();
@@ -755,7 +765,7 @@ let g = class {
   }
   setupRefreshable(e, t) {
     if (!t) return;
-    let i = !1, n = 0, r = 0;
+    let i = !1, n = 0, o = 0;
     const a = 70;
     if (!Q()) return;
     const l = document.createElement("div");
@@ -785,16 +795,16 @@ let g = class {
     const c = e.parentElement || e;
     P(c) && (c.style.position = "relative", c.appendChild(l));
     const u = (y) => {
-      i || (r = y.touches[0].clientY);
+      i || (o = y.touches[0].clientY);
     }, f = (y) => {
       if (i) return;
       const v = y.touches[0].clientY;
-      if (n = Math.max(0, v - r), n > 20) {
+      if (n = Math.max(0, v - o), n > 20) {
         y.preventDefault();
         const S = Math.min(n / a, 1);
         l.style.opacity = String(S * 0.8), l.style.top = `${-50 + S * 20}px`;
       }
-    }, h = async () => {
+    }, m = async () => {
       if (i || n < a) {
         l.style.opacity = "0", l.style.top = "-50px", n = 0;
         return;
@@ -812,18 +822,18 @@ let g = class {
       passive: !1
     }), e.addEventListener("touchmove", f, {
       passive: !1
-    }), e.addEventListener("touchend", h), this.addCleanup(() => {
+    }), e.addEventListener("touchend", m), this.addCleanup(() => {
       e.removeEventListener(
         "touchstart",
         u
-      ), e.removeEventListener("touchmove", f), e.removeEventListener("touchend", h), l.parentElement && l.parentElement.removeChild(l);
+      ), e.removeEventListener("touchmove", f), e.removeEventListener("touchend", m), l.parentElement && l.parentElement.removeChild(l);
     });
   }
   addCleanup(e) {
     this.properties._cleanupFunctions || (this.properties._cleanupFunctions = []), this.properties._cleanupFunctions.push(e);
   }
 };
-const Xe = "@tachui/modifiers", Ze = "0.8.25", ar = Xe, qe = Ze;
+const Ze = "@tachui/modifiers", qe = "0.8.27", ao = Ze, Je = qe;
 class D extends g {
   // Optimized priority for internal spacing (before margin at 50)
   constructor(e) {
@@ -837,7 +847,7 @@ class D extends g {
     this.applyStyles(t.element, i);
   }
   computePaddingStyles(e) {
-    const t = {}, i = (n) => p(n) || m(n) ? n : typeof n == "number" ? `${n}px` : n === "auto" ? n : typeof n == "string" ? /^-?\d*\.?\d+(px|rem|em|%|vw|vh|vmin|vmax)$/.test(n) ? n : `${n}px` : String(n);
+    const t = {}, i = (n) => p(n) || h(n) ? n : typeof n == "number" ? `${n}px` : n === "auto" ? n : typeof n == "string" ? /^-?\d*\.?\d+(px|rem|em|%|vw|vh|vmin|vmax)$/.test(n) ? n : `${n}px` : String(n);
     if ("all" in e && e.all !== void 0)
       t.padding = i(e.all);
     else {
@@ -854,34 +864,34 @@ class D extends g {
     return t;
   }
 }
-function x(o) {
-  return p(o) || m(o) ? new D({ all: o }) : typeof o == "number" || typeof o == "string" ? new D({ all: o }) : new D(o);
+function x(r) {
+  return p(r) || h(r) ? new D({ all: r }) : typeof r == "number" || typeof r == "string" ? new D({ all: r }) : new D(r);
 }
-function Je(o) {
-  return new D({ top: o });
+function Qe(r) {
+  return new D({ top: r });
 }
-function Qe(o) {
-  return new D({ bottom: o });
+function et(r) {
+  return new D({ bottom: r });
 }
-function et(o) {
-  return new D({ left: o });
+function tt(r) {
+  return new D({ left: r });
 }
-function tt(o) {
-  return new D({ right: o });
+function it(r) {
+  return new D({ right: r });
 }
-function it(o) {
-  return new D({ leading: o });
+function nt(r) {
+  return new D({ leading: r });
 }
-function nt(o) {
-  return new D({ trailing: o });
+function rt(r) {
+  return new D({ trailing: r });
 }
-function ot(o) {
-  return new D({ horizontal: o });
+function ot(r) {
+  return new D({ horizontal: r });
 }
-function rt(o) {
-  return new D({ vertical: o });
+function st(r) {
+  return new D({ vertical: r });
 }
-const lr = {
+const lo = {
   /**
    * Extra small padding (4px) - For tight spacing
    */
@@ -973,7 +983,7 @@ class O extends g {
     this.applyStyles(t.element, i);
   }
   computeMarginStyles(e) {
-    const t = {}, i = (n) => p(n) || m(n) ? n : typeof n == "number" ? `${n}px` : n === "auto" ? n : typeof n == "string" ? /^-?\d*\.?\d+(px|rem|em|%|vw|vh|vmin|vmax)$/.test(n) ? n : `${n}px` : String(n);
+    const t = {}, i = (n) => p(n) || h(n) ? n : typeof n == "number" ? `${n}px` : n === "auto" ? n : typeof n == "string" ? /^-?\d*\.?\d+(px|rem|em|%|vw|vh|vmin|vmax)$/.test(n) ? n : `${n}px` : String(n);
     if ("all" in e && e.all !== void 0)
       t.margin = i(e.all);
     else {
@@ -990,116 +1000,116 @@ class O extends g {
     return t;
   }
 }
-function M(o) {
-  return typeof o == "number" || typeof o == "string" ? new O({ all: o }) : new O(o);
+function T(r) {
+  return typeof r == "number" || typeof r == "string" ? new O({ all: r }) : new O(r);
 }
-function st(o) {
-  return new O({ top: o });
+function at(r) {
+  return new O({ top: r });
 }
-function at(o) {
-  return new O({ bottom: o });
+function lt(r) {
+  return new O({ bottom: r });
 }
-function lt(o) {
-  return new O({ left: o });
+function ct(r) {
+  return new O({ left: r });
 }
-function ct(o) {
-  return new O({ right: o });
+function dt(r) {
+  return new O({ right: r });
 }
-function dt(o) {
-  return new O({ leading: o });
+function ft(r) {
+  return new O({ leading: r });
 }
-function ft(o) {
-  return new O({ trailing: o });
+function ut(r) {
+  return new O({ trailing: r });
 }
-function ut(o) {
-  return new O({ horizontal: o });
+function pt(r) {
+  return new O({ horizontal: r });
 }
-function pt(o) {
-  return new O({ vertical: o });
+function ht(r) {
+  return new O({ vertical: r });
 }
-const cr = {
+const co = {
   /**
    * Extra small margin (4px) - For tight spacing
    */
-  xs: () => M(4),
+  xs: () => T(4),
   /**
    * Small margin (8px) - For compact components
    */
-  sm: () => M(8),
+  sm: () => T(8),
   /**
    * Medium margin (12px) - Default comfortable spacing
    */
-  md: () => M(12),
+  md: () => T(12),
   /**
    * Large margin (16px) - For prominent separation
    */
-  lg: () => M(16),
+  lg: () => T(16),
   /**
    * Extra large margin (24px) - For emphasis
    */
-  xl: () => M(24),
+  xl: () => T(24),
   /**
    * Extra extra large margin (32px) - For major sections
    */
-  xxl: () => M(32),
+  xxl: () => T(32),
   /**
    * Huge margin (48px) - For hero sections
    */
-  xxxl: () => M(48),
+  xxxl: () => T(48),
   // Semantic presets for common UI patterns
   /**
    * Component separation (vertical: 16, horizontal: 0)
    * For spacing between stacked components
    */
-  component: () => M({ vertical: 16, horizontal: 0 }),
+  component: () => T({ vertical: 16, horizontal: 0 }),
   /**
    * Section separation (vertical: 24, horizontal: 0)
    * For major content sections
    */
-  section: () => M({ vertical: 24, horizontal: 0 }),
+  section: () => T({ vertical: 24, horizontal: 0 }),
   /**
    * Page margin (horizontal: auto)
    * For centering page content
    */
-  page: () => M({ horizontal: "auto" }),
+  page: () => T({ horizontal: "auto" }),
   /**
    * Card margin (all: 16)
    * Standard margin around card components
    */
-  card: () => M(16),
+  card: () => T(16),
   /**
    * Compact card margin (all: 8)
    */
-  cardSm: () => M(8),
+  cardSm: () => T(8),
   /**
    * Spacious card margin (all: 24)
    */
-  cardLg: () => M(24),
+  cardLg: () => T(24),
   /**
    * Button margin (horizontal: 8, vertical: 4)
    * For spacing between inline buttons
    */
-  button: () => M({ horizontal: 8, vertical: 4 }),
+  button: () => T({ horizontal: 8, vertical: 4 }),
   /**
    * List item margin (vertical: 8, horizontal: 0)
    * For spacing between list items
    */
-  listItem: () => M({ vertical: 8, horizontal: 0 }),
+  listItem: () => T({ vertical: 8, horizontal: 0 }),
   /**
    * Form field margin (vertical: 12, horizontal: 0)
    * For spacing between form fields
    */
-  field: () => M({ vertical: 12, horizontal: 0 }),
+  field: () => T({ vertical: 12, horizontal: 0 }),
   /**
    * Zero margin utility
    * For removing default margins
    */
-  none: () => M(0),
+  none: () => T(0),
   /**
    * Auto margin utility
    * For centering elements
    */
-  auto: () => M("auto")
+  auto: () => T("auto")
 };
 class U extends g {
   // Priority 80 for layout
@@ -1117,63 +1127,63 @@ class U extends g {
     const t = {}, i = ue(e);
     if (Object.assign(t, i.cssProps), e.width !== void 0) {
       const n = L(e.width);
-      n !== void 0 && !A(e.width) && (t.width = n);
+      n !== void 0 && !k(e.width) && (t.width = n);
     }
     if (e.height !== void 0) {
       const n = L(e.height);
-      n !== void 0 && !A(e.height) && (t.height = n);
+      n !== void 0 && !k(e.height) && (t.height = n);
     }
     if (e.minWidth !== void 0) {
       const n = L(e.minWidth);
       n !== void 0 && (t.minWidth = n);
     }
-    if (e.maxWidth !== void 0 && !A(e.maxWidth)) {
+    if (e.maxWidth !== void 0 && !k(e.maxWidth)) {
       const n = L(e.maxWidth);
       n !== void 0 && (t.maxWidth = n);
-    } else A(e.maxWidth) && (t.maxWidth = "none");
+    } else k(e.maxWidth) && (t.maxWidth = "none");
     if (e.minHeight !== void 0) {
       const n = L(e.minHeight);
       n !== void 0 && (t.minHeight = n);
     }
-    if (e.maxHeight !== void 0 && !A(e.maxHeight)) {
+    if (e.maxHeight !== void 0 && !k(e.maxHeight)) {
       const n = L(e.maxHeight);
       n !== void 0 && (t.maxHeight = n);
-    } else A(e.maxHeight) && (t.maxHeight = "none");
+    } else k(e.maxHeight) && (t.maxHeight = "none");
     return t;
   }
 }
-function mt(o) {
-  return new U(o);
+function mt(r) {
+  return new U(r);
 }
-function ht(o) {
-  return new U({ width: o });
+function yt(r) {
+  return new U({ width: r });
 }
-function yt(o) {
-  return new U({ height: o });
+function gt(r) {
+  return new U({ height: r });
 }
-function gt(o) {
-  return new U({ maxWidth: o });
+function vt(r) {
+  return new U({ maxWidth: r });
 }
-function vt(o) {
-  return new U({ minWidth: o });
+function bt(r) {
+  return new U({ minWidth: r });
 }
-function bt(o) {
-  return new U({ maxHeight: o });
+function St(r) {
+  return new U({ maxHeight: r });
 }
-function St(o) {
-  return new U({ minHeight: o });
+function wt(r) {
+  return new U({ minHeight: r });
 }
-class le extends Ye {
+class le extends Xe {
   constructor() {
     super(...arguments);
     // Override type to be 'transition' instead of 'animation'
     d(this, "type", "transition");
   }
 }
-function wt(o, s, e, t) {
-  if (typeof o == "object")
-    return new le({ transition: o });
-  const i = o;
+function Ct(r, s, e, t) {
+  if (typeof r == "object")
+    return new le({ transition: r });
+  const i = r;
   return i === "none" ? new le({
     transition: {
       property: "none",
@@ -1190,17 +1200,17 @@ function wt(o, s, e, t) {
     }
   });
 }
-function Ct(o) {
-  return new oe({ transform: o });
+function Et(r) {
+  return new re({ transform: r });
 }
-function Et(o) {
-  return o ? new oe({ animation: o }) : new oe({});
+function xt(r) {
+  return r ? new re({ animation: r }) : new re({});
 }
-function xt(o) {
-  return new oe({ transitions: o });
+function Tt(r) {
+  return new re({ transitions: r });
 }
-function Mt(o) {
-  return new Fe({ task: o });
+function Mt(r) {
+  return new We({ task: r });
 }
 class R extends g {
   // Optimized priority for layout modifiers
@@ -1215,7 +1225,7 @@ class R extends g {
     this.applyStyles(t.element, i);
   }
   computeFlexboxStyles(e) {
-    const t = {}, i = (r) => p(r) || m(r), n = (r) => typeof r == "number" ? `${r}px` : typeof r == "string" ? /^-?\d*\.?\d+(px|rem|em|%|fr|vw|vh|vmin|vmax)$/.test(r) || [
+    const t = {}, i = (o) => p(o) || h(o), n = (o) => typeof o == "number" ? `${o}px` : typeof o == "string" ? /^-?\d*\.?\d+(px|rem|em|%|fr|vw|vh|vmin|vmax)$/.test(o) || [
       "auto",
       "content",
       "max-content",
@@ -1225,50 +1235,50 @@ class R extends g {
       "inherit",
       "unset",
       "none"
-    ].includes(r) ? r : `${r}px` : String(r);
+    ].includes(o) ? o : `${o}px` : String(o);
     return e.display !== void 0 && (t.display = e.display), e.flexGrow !== void 0 && (t.flexGrow = i(e.flexGrow) ? e.flexGrow : e.flexGrow.toString()), e.flexShrink !== void 0 && (t.flexShrink = i(e.flexShrink) ? e.flexShrink : e.flexShrink.toString()), e.flexBasis !== void 0 && (t.flexBasis = i(e.flexBasis) ? e.flexBasis : n(e.flexBasis)), e.flex !== void 0 && (t.flex = i(e.flex) ? e.flex : typeof e.flex == "number" ? e.flex.toString() : e.flex), e.justifyContent !== void 0 && (t.justifyContent = e.justifyContent), e.alignItems !== void 0 && (t.alignItems = e.alignItems), e.alignContent !== void 0 && (t.alignContent = e.alignContent), e.alignSelf !== void 0 && (t.alignSelf = e.alignSelf), e.flexDirection !== void 0 && (t.flexDirection = e.flexDirection), e.flexWrap !== void 0 && (t.flexWrap = e.flexWrap), e.flexFlow !== void 0 && (t.flexFlow = e.flexFlow), e.gap !== void 0 && (t.gap = i(e.gap) ? e.gap : n(e.gap)), e.rowGap !== void 0 && (t.rowGap = i(e.rowGap) ? e.rowGap : n(e.rowGap)), e.columnGap !== void 0 && (t.columnGap = i(e.columnGap) ? e.columnGap : n(e.columnGap)), e.placeItems !== void 0 && (t.placeItems = e.placeItems), e.placeContent !== void 0 && (t.placeContent = e.placeContent), e.placeSelf !== void 0 && (t.placeSelf = e.placeSelf), t;
   }
 }
-function I(o) {
-  return new R(o);
+function I(r) {
+  return new R(r);
 }
-function Tt(o) {
-  return new R({ flexGrow: o });
+function Lt(r) {
+  return new R({ flexGrow: r });
 }
-function Lt(o) {
-  return new R({ flexShrink: o });
+function kt(r) {
+  return new R({ flexShrink: r });
 }
-function At(o) {
-  return new R({ flexBasis: o });
+function At(r) {
+  return new R({ flexBasis: r });
 }
-function dr(o) {
-  return new R({ flex: o });
+function fo(r) {
+  return new R({ flex: r });
 }
-function kt(o) {
-  return new R({ justifyContent: o });
+function It(r) {
+  return new R({ justifyContent: r });
 }
-function It(o) {
-  return new R({ alignItems: o });
+function Pt(r) {
+  return new R({ alignItems: r });
 }
-function Pt(o) {
-  return new R({ alignSelf: o });
+function $t(r) {
+  return new R({ alignSelf: r });
 }
-function $t(o) {
-  return new R({ gap: o });
+function Vt(r) {
+  return new R({ gap: r });
 }
-function fr(o) {
-  return new R({ rowGap: o });
+function uo(r) {
+  return new R({ rowGap: r });
 }
-function ur(o) {
-  return new R({ columnGap: o });
+function po(r) {
+  return new R({ columnGap: r });
 }
-function Vt(o) {
-  return new R({ flexDirection: o });
+function Rt(r) {
+  return new R({ flexDirection: r });
 }
-function Rt(o) {
-  return new R({ flexWrap: o });
+function Dt(r) {
+  return new R({ flexWrap: r });
 }
-const pr = {
+const ho = {
   /**
    * Standard flex container
    * Sets display: flex for basic flex container
@@ -1406,7 +1416,7 @@ const pr = {
     alignItems: "stretch"
   })
 };
-class Dt extends g {
+class Ot extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "offset");
@@ -1416,13 +1426,13 @@ class Dt extends g {
   apply(e, t) {
     if (!t.element) return;
     const { x: i, y: n = 0 } = this.properties;
-    p(i) || m(i) || p(n) || m(n) ? b(() => {
-      const r = p(i) || m(i) ? i() : i, a = p(n) || m(n) ? n() : n;
-      this.applyOffset(t.element, r, a);
+    p(i) || h(i) || p(n) || h(n) ? b(() => {
+      const o = p(i) || h(i) ? i() : i, a = p(n) || h(n) ? n() : n;
+      this.applyOffset(t.element, o, a);
     }) : this.applyOffset(t.element, i, n);
   }
   applyOffset(e, t, i) {
-    const n = this.toCSSValue(t), r = this.toCSSValue(i), a = `translate(${n}, ${r})`, c = (e.style.transform || "").replace(/\s*translate(?!Z\(0\))[XYZ3d]*\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), u = c ? `${c} ${a}` : a;
+    const n = this.toCSSValue(t), o = this.toCSSValue(i), a = `translate(${n}, ${o})`, c = (e.style.transform || "").replace(/\s*translate(?!Z\(0\))[XYZ3d]*\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), u = c ? `${c} ${a}` : a;
     e.style.transform = u;
   }
   /**
@@ -1430,13 +1440,13 @@ class Dt extends g {
    */
   validateOffset(e, t) {
     if (typeof process < "u" && process.env.NODE_ENV === "development") {
-      typeof e != "number" && !p(e) && !m(e) && console.warn(
+      typeof e != "number" && !p(e) && !h(e) && console.warn(
         `OffsetModifier: x value must be a number or reactive signal. Got: ${typeof e}`
-      ), t !== void 0 && typeof t != "number" && !p(t) && !m(t) && console.warn(
+      ), t !== void 0 && typeof t != "number" && !p(t) && !h(t) && console.warn(
         `OffsetModifier: y value must be a number or reactive signal. Got: ${typeof t}`
       );
-      const i = (n, r) => {
-        const a = p(n) || m(n) ? n.peek?.() || n() : n;
+      const i = (n, o) => {
+        const a = p(n) || h(n) ? n.peek?.() || n() : n;
         typeof a == "number" && (Math.abs(a) > 1e3 && console.warn(
           "OffsetModifier: Very large offset values may cause layout issues"
         ), a !== Math.round(a * 100) / 100 && console.info(
@@ -1447,9 +1457,9 @@ class Dt extends g {
     }
   }
 }
-function Ot(o, s) {
-  const e = new Dt({ x: o, y: s ?? 0 });
-  return typeof process < "u" && process.env.NODE_ENV === "development" && e.validateOffset(o, s), e;
+function Bt(r, s) {
+  const e = new Ot({ x: r, y: s ?? 0 });
+  return typeof process < "u" && process.env.NODE_ENV === "development" && e.validateOffset(r, s), e;
 }
 class _t extends g {
   constructor() {
@@ -1460,21 +1470,21 @@ class _t extends g {
   // High priority for transform operations
   apply(e, t) {
     if (!t.element) return;
-    const { x: i, y: n, anchor: r = "center" } = this.properties, a = n ?? i;
-    typeof process < "u" && process.env.NODE_ENV === "development" && this.validateScale(i, a, r), p(i) || m(i) || p(a) || m(a) ? b(() => {
-      const l = p(i) || m(i) ? i() : i, c = p(a) || m(a) ? a() : a;
+    const { x: i, y: n, anchor: o = "center" } = this.properties, a = n ?? i;
+    typeof process < "u" && process.env.NODE_ENV === "development" && this.validateScale(i, a, o), p(i) || h(i) || p(a) || h(a) ? b(() => {
+      const l = p(i) || h(i) ? i() : i, c = p(a) || h(a) ? a() : a;
       this.applyScale(
         t.element,
         l,
         c,
-        r
+        o
       );
-    }) : this.applyScale(t.element, i, a, r);
+    }) : this.applyScale(t.element, i, a, o);
   }
   applyScale(e, t, i, n) {
-    const r = `scale(${t}, ${i})`;
+    const o = `scale(${t}, ${i})`;
     e.style.transformOrigin = this.getTransformOrigin(n);
-    const l = (e.style.transform || "").replace(/\s*scale[XYZ3d]*\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), c = l ? `${l} ${r}`.trim() : r;
+    const l = (e.style.transform || "").replace(/\s*scale[XYZ3d]*\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), c = l ? `${l} ${o}`.trim() : o;
     e.style.transform = c;
   }
   getTransformOrigin(e) {
@@ -1495,9 +1505,9 @@ class _t extends g {
    */
   validateScale(e, t, i) {
     if (typeof process < "u" && process.env.NODE_ENV === "development") {
-      typeof e != "number" && !p(e) && !m(e) && console.warn(
+      typeof e != "number" && !p(e) && !h(e) && console.warn(
         `ScaleEffectModifier: x value must be a number or reactive signal. Got: ${typeof e}`
-      ), typeof t != "number" && !p(t) && !m(t) && console.warn(
+      ), typeof t != "number" && !p(t) && !h(t) && console.warn(
         `ScaleEffectModifier: y value must be a number or reactive signal. Got: ${typeof t}`
       );
       const n = [
@@ -1515,8 +1525,8 @@ class _t extends g {
         `ScaleEffectModifier: Invalid anchor "${i}". Valid anchors:`,
         n
       );
-      const r = (a, l) => {
-        const c = p(a) || m(a) ? a.peek?.() || a() : a;
+      const o = (a, l) => {
+        const c = p(a) || h(a) ? a.peek?.() || a() : a;
         typeof c == "number" && (c <= 0 && console.warn(
           `ScaleEffectModifier: ${l} scale value ${c} will make element invisible`
         ), c > 10 && console.warn(
@@ -1525,14 +1535,14 @@ class _t extends g {
           `ScaleEffectModifier: Consider rounding ${l} scale to 2 decimal places for better performance`
         ));
       };
-      r(e, "x"), r(t, "y");
+      o(e, "x"), o(t, "y");
     }
   }
 }
-function Bt(o, s, e = "center") {
-  return new _t({ x: o, y: s, anchor: e });
+function Ht(r, s, e = "center") {
+  return new _t({ x: r, y: s, anchor: e });
 }
-class Ie extends g {
+class Pe extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "aspectRatio");
@@ -1542,11 +1552,11 @@ class Ie extends g {
   apply(e, t) {
     if (!t.element) return;
     const { ratio: i, contentMode: n } = this.properties;
-    typeof process < "u" && process.env.NODE_ENV === "development" && this.validateAspectRatio(i, n), i !== void 0 ? p(i) || m(i) ? b(() => {
-      const r = i();
+    typeof process < "u" && process.env.NODE_ENV === "development" && this.validateAspectRatio(i, n), i !== void 0 ? p(i) || h(i) ? b(() => {
+      const o = i();
       this.applyAspectRatio(
         t.element,
-        r,
+        o,
         n
       );
     }) : this.applyAspectRatio(
@@ -1570,10 +1580,10 @@ class Ie extends g {
   validateAspectRatio(e, t) {
     if (typeof process < "u" && process.env.NODE_ENV === "development") {
       if (e !== void 0) {
-        typeof e != "number" && !p(e) && !m(e) && console.warn(
+        typeof e != "number" && !p(e) && !h(e) && console.warn(
           `AspectRatioModifier: ratio must be a number or reactive signal. Got: ${typeof e}`
         );
-        const n = p(e) || m(e) ? e.peek?.() || e() : e;
+        const n = p(e) || h(e) ? e.peek?.() || e() : e;
         typeof n == "number" && (n <= 0 && console.warn(
           `AspectRatioModifier: ratio must be positive. Got: ${n}`
         ), n > 100 && console.warn(
@@ -1593,7 +1603,7 @@ class Ie extends g {
 /**
  * Get common aspect ratios
  */
-d(Ie, "COMMON_RATIOS", {
+d(Pe, "COMMON_RATIOS", {
   square: 1,
   portrait: 3 / 4,
   landscape: 4 / 3,
@@ -1602,13 +1612,13 @@ d(Ie, "COMMON_RATIOS", {
   golden: 1.618,
   photo: 3 / 2
 });
-function Ht(o, s = "fit") {
-  return new Ie({ ratio: o, contentMode: s });
+function zt(r, s = "fit") {
+  return new Pe({ ratio: r, contentMode: s });
 }
-function Nt(o) {
-  return typeof getComputedStyle != "function" ? null : getComputedStyle(o);
+function Ft(r) {
+  return typeof getComputedStyle != "function" ? null : getComputedStyle(r);
 }
-class zt extends g {
+class Nt extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "fixedSize");
@@ -1642,7 +1652,7 @@ class zt extends g {
   isFlexItem(e) {
     const t = e.parentElement;
     if (!t) return !1;
-    const i = Nt(t);
+    const i = Ft(t);
     if (!i) return !1;
     const n = i.display;
     return n === "flex" || n === "inline-flex";
@@ -1666,33 +1676,33 @@ class zt extends g {
     ));
   }
 }
-function Ft(o = !0, s = !0) {
-  return new zt({ horizontal: o, vertical: s });
+function Wt(r = !0, s = !0) {
+  return new Nt({ horizontal: r, vertical: s });
 }
-function Wt(o) {
-  return new pe({ frame: o });
+function jt(r) {
+  return new pe({ frame: r });
 }
-function jt(o) {
-  return new pe({ layoutPriority: o });
+function Ut(r) {
+  return new pe({ layoutPriority: r });
 }
-function Ut(o, s) {
+function Gt(r, s) {
   return new pe({
     position: {
-      x: o,
+      x: r,
       y: s
     }
   });
 }
-function Gt() {
-  return new We({});
-}
 function Kt() {
+  return new je({});
+}
+function Yt() {
   return typeof document < "u";
 }
-function ce(o) {
-  return typeof getComputedStyle != "function" ? null : getComputedStyle(o);
+function ce(r) {
+  return typeof getComputedStyle != "function" ? null : getComputedStyle(r);
 }
-class Yt extends g {
+class Xt extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "position");
@@ -1706,7 +1716,7 @@ class Yt extends g {
       this.applyCoordinatePosition(t.element, i);
       return;
     }
-    p(i) || m(i) ? b(() => {
+    p(i) || h(i) ? b(() => {
       const n = i();
       this.applyPosition(t.element, n);
     }) : this.applyPosition(t.element, i);
@@ -1715,13 +1725,13 @@ class Yt extends g {
     return typeof e == "object" && e !== null && "x" in e && "y" in e;
   }
   applyCoordinatePosition(e, t) {
-    const i = (n, r) => {
-      e.style.position = "absolute", e.style.left = `${n}px`, e.style.top = `${r}px`, this.applyPositionOptimizations(e, "absolute");
+    const i = (n, o) => {
+      e.style.position = "absolute", e.style.left = `${n}px`, e.style.top = `${o}px`, this.applyPositionOptimizations(e, "absolute");
     };
-    if (p(t.x) || m(t.x) || p(t.y) || m(t.y)) {
+    if (p(t.x) || h(t.x) || p(t.y) || h(t.y)) {
       b(() => {
-        const n = p(t.x) || m(t.x) ? t.x() : t.x, r = p(t.y) || m(t.y) ? t.y() : t.y;
-        i(n, r);
+        const n = p(t.x) || h(t.x) ? t.x() : t.x, o = p(t.y) || h(t.y) ? t.y() : t.y;
+        i(n, o);
       });
       return;
     }
@@ -1753,7 +1763,7 @@ class Yt extends g {
     (t === "absolute" || t === "fixed") && (e.style.zIndex || (e.style.zIndex = "0"), e.style.transform || (e.style.transform = "translateZ(0)"));
   }
   warnIfMissingPositionedParent(e) {
-    if (!Kt()) return;
+    if (!Yt()) return;
     let t = e.parentElement, i = !1;
     for (; t && t !== document.body; ) {
       const n = ce(t);
@@ -1787,7 +1797,7 @@ class Yt extends g {
    */
   validatePosition(e) {
     if (typeof process < "u" && process.env.NODE_ENV === "development") {
-      const t = p(e) || m(e);
+      const t = p(e) || h(e);
       if (this.isCoordinatePosition(e))
         return;
       if (!t && typeof e != "string") {
@@ -1812,16 +1822,16 @@ class Yt extends g {
     }
   }
 }
-function Xt(o) {
-  return new Yt({ position: o });
+function Zt(r) {
+  return new Xt({ position: r });
 }
-function Zt() {
+function qt() {
   return typeof getComputedStyle == "function";
 }
-function ne(o) {
-  return Zt() ? getComputedStyle(o) : null;
+function ne(r) {
+  return qt() ? getComputedStyle(r) : null;
 }
-class Pe extends g {
+class $e extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "zIndex");
@@ -1831,7 +1841,7 @@ class Pe extends g {
   apply(e, t) {
     if (!t.element) return;
     const { zIndex: i } = this.properties;
-    typeof process < "u" && process.env.NODE_ENV === "development" && this.validateZIndex(i), p(i) || m(i) ? b(() => {
+    typeof process < "u" && process.env.NODE_ENV === "development" && this.validateZIndex(i), p(i) || h(i) ? b(() => {
       const n = i();
       this.applyZIndex(t.element, n);
     }) : this.applyZIndex(t.element, i);
@@ -1842,8 +1852,8 @@ class Pe extends g {
   ensureStackingContext(e, t) {
     const i = ne(e);
     if (!i) return;
-    const r = i.position !== "static", a = this.isFlexItem(e), l = this.isGridItem(e);
-    !r && !a && !l && (e.style.position = "relative", typeof process < "u" && process.env.NODE_ENV === "development" && console.info(
+    const o = i.position !== "static", a = this.isFlexItem(e), l = this.isGridItem(e);
+    !o && !a && !l && (e.style.position = "relative", typeof process < "u" && process.env.NODE_ENV === "development" && console.info(
       "ZIndexModifier: Set position: relative on element to enable z-index stacking"
     )), typeof process < "u" && process.env.NODE_ENV === "development" && this.provideStackingInsights(e, t);
   }
@@ -1891,10 +1901,10 @@ class Pe extends g {
         value: t.mixBlendMode,
         creates: t.mixBlendMode !== "normal"
       }
-    ].filter((r) => r.creates);
+    ].filter((o) => o.creates);
     n.length > 0 && console.info(
       "ZIndexModifier: Element creates new stacking context due to:",
-      n.map((r) => `${r.prop}: ${r.value}`).join(", ")
+      n.map((o) => `${o.prop}: ${o.value}`).join(", ")
     );
   }
   /**
@@ -1902,7 +1912,7 @@ class Pe extends g {
    */
   validateZIndex(e) {
     if (typeof process < "u" && process.env.NODE_ENV === "development") {
-      const t = p(e) || m(e);
+      const t = p(e) || h(e);
       if (!t && typeof e != "number") {
         console.warn(
           `ZIndexModifier: zIndex must be a number or reactive signal. Got: ${typeof e}`
@@ -1921,7 +1931,7 @@ class Pe extends g {
 /**
  * Common z-index values for semantic layering
  */
-d(Pe, "COMMON_LAYERS", {
+d($e, "COMMON_LAYERS", {
   background: -1,
   base: 0,
   content: 1,
@@ -1933,32 +1943,35 @@ d(Pe, "COMMON_LAYERS", {
   toast: 600,
   debug: 9999
 });
-function qt(o) {
-  return new Pe({ zIndex: o });
+function Jt(r) {
+  return new $e({ zIndex: r });
 }
-function $(o) {
-  return typeof HTMLElement < "u" && o instanceof HTMLElement;
+function $(r) {
+  return typeof HTMLElement < "u" && r instanceof HTMLElement;
 }
-function F(o) {
-  return typeof o == "object" && o !== null && "style" in o && !!o.style;
+function N(r) {
+  return typeof r == "object" && r !== null && "style" in r && !!r.style;
 }
-function re() {
+function oe() {
   return typeof document < "u";
 }
-function Jt() {
+function Qt() {
   return typeof window < "u";
 }
 class w {
   constructor(s) {
     this.properties = s;
   }
+  getStaticCSS(s) {
+    return [];
+  }
   /**
    * Helper to resolve reactive properties
    */
   resolveReactiveProps(s, e) {
     const t = {};
     for (const [i, n] of Object.entries(s))
-      p(n) || m(n), t[i] = n;
+      p(n) || h(n), t[i] = n;
     return t;
   }
   /**
@@ -1968,15 +1981,15 @@ class w {
     const i = typeof HTMLElement < "u" && s instanceof HTMLElement;
     if (!i && !s.style)
       return;
-    const n = this.toCSSProperty(e), r = s.style, a = (l) => {
+    const n = this.toCSSProperty(e), o = s.style, a = (l) => {
       if (l.includes("!important")) {
         const c = l.replace(/\s*!important\s*$/, "").trim();
-        r.setProperty(n, c, "important");
+        o.setProperty(n, c, "important");
         return;
       }
-      r.setProperty(n, l);
+      o.setProperty(n, l);
     };
-    if (p(t) || m(t)) {
+    if (p(t) || h(t)) {
       b(() => {
         const l = t();
         a(String(l));
@@ -2029,24 +2042,12 @@ class w {
     const t = typeof HTMLElement < "u" && s instanceof HTMLElement;
     if (t || s.style) {
       const i = s.style;
-      for (const [n, r] of Object.entries(e))
-        if (r !== void 0) {
+      for (const [n, o] of Object.entries(e))
+        if (o !== void 0) {
           const a = this.toCSSProperty(n);
-          if (p(r) || m(r) || this.isAssetValue(r))
-            console.log(
-              "BaseModifier applyStyles - creating reactive effect for property:",
-              a,
-              "value type:",
-              typeof r
-            ), b(() => {
-              const l = this.isAssetValue(r) ? (j()(), r.resolve()) : r();
-              console.log(
-                "BaseModifier reactive effect fired - property:",
-                a,
-                "currentValue:",
-                l
-              );
-              const c = this.toCSSValueForProperty(
+          if (p(o) || h(o) || this.isAssetValue(o))
+            b(() => {
+              const l = this.isAssetValue(o) ? (j()(), o.resolve()) : o(), c = this.toCSSValueForProperty(
                 a,
                 l
               );
@@ -2060,8 +2061,8 @@ class w {
                 i[a] = c;
             });
           else {
-            const l = this.toCSSValueForProperty(a, r);
-            if (process.env.NODE_ENV === "development" && a === "font-family" && (console.log("[AppearanceModifier.applyStyles] Setting font-family property:", a, "value:", l), console.log("[AppearanceModifier.applyStyles] Element:", s), typeof getComputedStyle == "function" && console.log("[AppearanceModifier.applyStyles] Current computed font-family:", getComputedStyle(s).fontFamily)), i.setProperty)
+            const l = this.toCSSValueForProperty(a, o);
+            if (i.setProperty)
               if (typeof l == "string" && l.includes("!important")) {
                 const c = l.replace(/\s*!important\s*$/, "").trim();
                 i.setProperty(a, c, "important");
@@ -2098,7 +2099,7 @@ class w {
     };
   }
 }
-class mr extends w {
+class mo extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "layout");
@@ -2115,36 +2116,36 @@ class mr extends w {
       i
     );
     this.applyStyles(t.element, n);
-    const r = this.properties;
-    r.offset && $(t.element) && this.applyOffsetTransform(t.element, r.offset), r.aspectRatio && $(t.element) && this.applyAspectRatio(t.element, r.aspectRatio), r.scaleEffect && $(t.element) && this.applyScaleTransform(t.element, r.scaleEffect), r.position && $(t.element) && this.applyAbsolutePosition(t.element, r.position), r.zIndex !== void 0 && $(t.element) && this.applyZIndex(t.element, r.zIndex);
+    const o = this.properties;
+    o.offset && $(t.element) && this.applyOffsetTransform(t.element, o.offset), o.aspectRatio && $(t.element) && this.applyAspectRatio(t.element, o.aspectRatio), o.scaleEffect && $(t.element) && this.applyScaleTransform(t.element, o.scaleEffect), o.position && $(t.element) && this.applyAbsolutePosition(t.element, o.position), o.zIndex !== void 0 && $(t.element) && this.applyZIndex(t.element, o.zIndex);
   }
   applyOffsetTransform(e, t) {
     const { x: i, y: n } = t;
-    if (p(i) || m(i) || p(n) || m(n))
+    if (p(i) || h(i) || p(n) || h(n))
       b(() => {
-        const r = p(i) || m(i) ? i() : i ?? 0, a = p(n) || m(n) ? n() : n ?? 0, l = this.toCSSValue(r), c = this.toCSSValue(a), u = `translate(${l}, ${c})`, h = (e.style.transform || "").split(" ").filter((v) => v && !v.startsWith("translate(")).join(" "), y = h ? `${h} ${u}` : u;
+        const o = p(i) || h(i) ? i() : i ?? 0, a = p(n) || h(n) ? n() : n ?? 0, l = this.toCSSValue(o), c = this.toCSSValue(a), u = `translate(${l}, ${c})`, m = (e.style.transform || "").split(" ").filter((v) => v && !v.startsWith("translate(")).join(" "), y = m ? `${m} ${u}` : u;
         e.style.transform = y;
       });
     else {
-      const r = i ?? 0, a = n ?? 0, l = this.toCSSValue(r), c = this.toCSSValue(a), u = `translate(${l}, ${c})`, h = (e.style.transform || "").split(" ").filter((v) => v && !v.startsWith("translate(")).join(" "), y = h ? `${h} ${u}` : u;
+      const o = i ?? 0, a = n ?? 0, l = this.toCSSValue(o), c = this.toCSSValue(a), u = `translate(${l}, ${c})`, m = (e.style.transform || "").split(" ").filter((v) => v && !v.startsWith("translate(")).join(" "), y = m ? `${m} ${u}` : u;
       e.style.transform = y;
     }
   }
   applyAspectRatio(e, t) {
     const { ratio: i, contentMode: n } = t;
-    i !== void 0 && (p(i) || m(i) ? b(() => {
-      const r = typeof i == "function" ? i() : i;
-      e.style.aspectRatio = String(r);
+    i !== void 0 && (p(i) || h(i) ? b(() => {
+      const o = typeof i == "function" ? i() : i;
+      e.style.aspectRatio = String(o);
     }) : e.style.aspectRatio = String(i), n === "fill" ? e.style.objectFit = "cover" : e.style.objectFit = "contain");
   }
   // Phase 3 - Epic: Butternut Transform Methods
   applyScaleTransform(e, t) {
-    const { x: i, y: n, anchor: r } = t, a = i ?? 1, l = n ?? a;
-    if (p(a) || m(a) || p(l) || m(l))
+    const { x: i, y: n, anchor: o } = t, a = i ?? 1, l = n ?? a;
+    if (p(a) || h(a) || p(l) || h(l))
       b(() => {
-        const c = p(a) || m(a) ? a() : a, u = p(l) || m(l) ? l() : l, f = `scale(${c}, ${u})`;
+        const c = p(a) || h(a) ? a() : a, u = p(l) || h(l) ? l() : l, f = `scale(${c}, ${u})`;
         e.style.transformOrigin = this.getTransformOrigin(
-          r || "center"
+          o || "center"
         );
         const y = (e.style.transform || "").replace(/\s*scale\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), v = y ? `${y} ${f}` : f;
         e.style.transform = v;
@@ -2152,26 +2153,26 @@ class mr extends w {
     else {
       const c = `scale(${a}, ${l})`;
       e.style.transformOrigin = this.getTransformOrigin(
-        r || "center"
+        o || "center"
       );
-      const f = (e.style.transform || "").replace(/\s*scale\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), h = f ? `${f} ${c}` : c;
-      e.style.transform = h;
+      const f = (e.style.transform || "").replace(/\s*scale\([^)]*\)\s*/g, " ").replace(/\s+/g, " ").trim(), m = f ? `${f} ${c}` : c;
+      e.style.transform = m;
     }
   }
   applyAbsolutePosition(e, t) {
     const { x: i, y: n } = t;
-    if (e.style.position = "absolute", p(i) || m(i) || p(n) || m(n))
+    if (e.style.position = "absolute", p(i) || h(i) || p(n) || h(n))
       b(() => {
-        const r = p(i) || m(i) ? i() : i ?? 0, a = p(n) || m(n) ? n() : n ?? 0;
-        e.style.left = this.toCSSValue(r), e.style.top = this.toCSSValue(a);
+        const o = p(i) || h(i) ? i() : i ?? 0, a = p(n) || h(n) ? n() : n ?? 0;
+        e.style.left = this.toCSSValue(o), e.style.top = this.toCSSValue(a);
       });
     else {
-      const r = i ?? 0, a = n ?? 0;
-      e.style.left = this.toCSSValue(r), e.style.top = this.toCSSValue(a);
+      const o = i ?? 0, a = n ?? 0;
+      e.style.left = this.toCSSValue(o), e.style.top = this.toCSSValue(a);
     }
   }
   applyZIndex(e, t) {
-    p(t) || m(t) ? b(() => {
+    p(t) || h(t) ? b(() => {
       const i = t();
       e.style.zIndex = String(i);
     }) : e.style.zIndex = String(t);
@@ -2192,31 +2193,31 @@ class mr extends w {
   computeLayoutStyles(e, t) {
     const i = {};
     if (e.frame) {
-      const n = e.frame, r = ue(n);
-      if (Object.assign(i, r.cssProps), n.width !== void 0) {
+      const n = e.frame, o = ue(n);
+      if (Object.assign(i, o.cssProps), n.width !== void 0) {
         const a = L(n.width);
-        a !== void 0 && !A(n.width) && !r.expandWidth && (i.width = a);
+        a !== void 0 && !k(n.width) && !o.expandWidth && (i.width = a);
       }
       if (n.height !== void 0) {
         const a = L(n.height);
-        a !== void 0 && !A(n.height) && !r.expandHeight && (i.height = a);
+        a !== void 0 && !k(n.height) && !o.expandHeight && (i.height = a);
       }
       if (n.minWidth !== void 0) {
         const a = L(n.minWidth);
         a !== void 0 && (i.minWidth = a);
       }
-      if (n.maxWidth !== void 0 && !A(n.maxWidth)) {
+      if (n.maxWidth !== void 0 && !k(n.maxWidth)) {
         const a = L(n.maxWidth);
         a !== void 0 && (i.maxWidth = a);
-      } else A(n.maxWidth) && (i.maxWidth = "none", i.flexGrow = "1 !important", i.flexShrink = "1 !important", i.flexBasis = "0% !important", i.alignSelf = "stretch !important");
+      } else k(n.maxWidth) && (i.maxWidth = "none", i.flexGrow = "1 !important", i.flexShrink = "1 !important", i.flexBasis = "0% !important", i.alignSelf = "stretch !important");
       if (n.minHeight !== void 0) {
         const a = L(n.minHeight);
         a !== void 0 && (i.minHeight = a);
       }
-      if (n.maxHeight !== void 0 && !A(n.maxHeight)) {
+      if (n.maxHeight !== void 0 && !k(n.maxHeight)) {
         const a = L(n.maxHeight);
         a !== void 0 && (i.maxHeight = a);
-      } else A(n.maxHeight) && (i.maxHeight = "none", i.flexGrow = "1 !important", i.flexShrink = "1 !important", i.flexBasis = "0% !important", i.alignSelf = "stretch !important");
+      } else k(n.maxHeight) && (i.maxHeight = "none", i.flexGrow = "1 !important", i.flexShrink = "1 !important", i.flexBasis = "0% !important", i.alignSelf = "stretch !important");
     }
     if (e.padding !== void 0)
       if (typeof e.padding == "number")
@@ -2255,27 +2256,25 @@ class mr extends w {
       n > 0 ? (i.flexShrink = "0", i.flexGrow = String(Math.max(1, n / 10)), i.zIndex = String(n), i.gridRowEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(n / 10))))}`, i.gridColumnEnd = `span ${String(Math.min(10, Math.max(1, Math.ceil(n / 10))))}`) : n === 0 ? (i.flexShrink = "1", i.flexGrow = "1") : (i.flexShrink = String(Math.abs(n)), i.flexGrow = "0", i.zIndex = String(n)), i && typeof i == "object" && "setProperty" in i && i.setProperty("--layout-priority", String(n));
     }
     if (e.offset, e.aspectRatio) {
-      const { ratio: n, contentMode: r } = e.aspectRatio;
-      n !== void 0 && (i.aspectRatio = typeof n == "number" ? String(n) : n, r === "fill" ? i.objectFit = "cover" : i.objectFit = "contain");
+      const { ratio: n, contentMode: o } = e.aspectRatio;
+      n !== void 0 && (i.aspectRatio = typeof n == "number" ? String(n) : n, o === "fill" ? i.objectFit = "cover" : i.objectFit = "contain");
     }
     if (e.fixedSize) {
-      const { horizontal: n, vertical: r } = e.fixedSize;
-      n && (i.flexShrink = "0", i.width = "max-content"), r && (i.flexShrink = "0", i.height = "max-content");
+      const { horizontal: n, vertical: o } = e.fixedSize;
+      n && (i.flexShrink = "0", i.width = "max-content"), o && (i.flexShrink = "0", i.height = "max-content");
     }
     return i;
   }
 }
-class hr extends w {
+class yo extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "appearance");
     d(this, "priority", V.APPEARANCE);
   }
   apply(e, t) {
-    if (process.env.NODE_ENV === "development" && console.log("[AppearanceModifier.apply] Called with properties:", Object.keys(this.properties)), !e.element || !t.element) {
-      process.env.NODE_ENV === "development" && console.log("[AppearanceModifier.apply] Early return - no element", { hasNodeElement: !!e.element, hasContextElement: !!t.element });
+    if (!e.element || !t.element)
       return;
-    }
     const i = this.createStyleContext(
       t.componentId,
       t.element,
@@ -2285,12 +2284,12 @@ class hr extends w {
       i
     );
     this.applyAssetBasedStyles(t.element, n);
-    let r = this.computeAppearanceStyles(n);
-    if (r.fontFamily || r.fontSize || r.fontWeight || r.fontStyle) {
-      const l = t.element.style, c = { ...r };
-      !r.fontFamily && l.fontFamily && (c.fontFamily = l.fontFamily, process.env.NODE_ENV === "development" && console.log("[AppearanceModifier.apply] Preserved existing fontFamily:", l.fontFamily)), !r.fontSize && l.fontSize && (c.fontSize = l.fontSize, process.env.NODE_ENV === "development" && console.log("[AppearanceModifier.apply] Preserved existing fontSize:", l.fontSize)), !r.fontWeight && l.fontWeight && (c.fontWeight = l.fontWeight, process.env.NODE_ENV === "development" && console.log("[AppearanceModifier.apply] Preserved existing fontWeight:", l.fontWeight)), !r.fontStyle && l.fontStyle && (c.fontStyle = l.fontStyle, process.env.NODE_ENV === "development" && console.log("[AppearanceModifier.apply] Preserved existing fontStyle:", l.fontStyle)), r = c;
+    let o = this.computeAppearanceStyles(n);
+    if (o.fontFamily || o.fontSize || o.fontWeight || o.fontStyle) {
+      const l = t.element.style, c = { ...o };
+      !o.fontFamily && l.fontFamily && (c.fontFamily = l.fontFamily), !o.fontSize && l.fontSize && (c.fontSize = l.fontSize), !o.fontWeight && l.fontWeight && (c.fontWeight = l.fontWeight), !o.fontStyle && l.fontStyle && (c.fontStyle = l.fontStyle), o = c;
     }
-    process.env.NODE_ENV === "development" && (console.log("[AppearanceModifier.apply] Final merged styles:", r), console.log("[AppearanceModifier.apply] fontFamily in final styles?", "fontFamily" in r, "fontFamily value:", r.fontFamily)), this.applyStyles(t.element, r), this.applyAttributes(t.element, n);
+    this.applyStyles(t.element, o), this.applyAttributes(t.element, n);
   }
   /**
    * Apply Asset-based styles with theme reactivity
@@ -2320,14 +2319,13 @@ class hr extends w {
   computeAppearanceStyles(e) {
     const t = {};
     if (e.foregroundColor && !this.isAsset(e.foregroundColor) && (t.color = e.foregroundColor), e.backgroundColor && !this.isAsset(e.backgroundColor) && (t.backgroundColor = e.backgroundColor), e.opacity !== void 0 && (t.opacity = e.opacity), e.font) {
-      process.env.NODE_ENV === "development" && (console.log("[AppearanceModifier] Processing font, keys:", Object.keys(e.font)), console.log("[AppearanceModifier] font.family:", e.font.family), console.log("[AppearanceModifier] font.size:", e.font.size), console.log("[AppearanceModifier] font.weight:", e.font.weight));
       const n = e.font;
       if (n.family)
         if (typeof n.family == "object" && n.family !== null && "resolve" in n.family) {
-          const r = n.family.resolve();
-          process.env.NODE_ENV === "development" && console.log("[AppearanceModifier] Resolved font.family:", r), t.fontFamily = r, process.env.NODE_ENV === "development" && console.log("[AppearanceModifier] Set styles.fontFamily to:", t.fontFamily);
+          const o = n.family.resolve();
+          t.fontFamily = o;
         } else
-          process.env.NODE_ENV === "development" && console.log("[AppearanceModifier] Using font.family as string:", n.family), t.fontFamily = n.family, process.env.NODE_ENV === "development" && console.log("[AppearanceModifier] Set styles.fontFamily to:", t.fontFamily);
+          t.fontFamily = n.family;
       n.size && (t.fontSize = this.toCSSValue(n.size)), n.weight && (t.fontWeight = String(n.weight)), n.style && (t.fontStyle = n.style);
     }
     if (e.cornerRadius !== void 0 && (t.borderRadius = this.toCSSValue(e.cornerRadius)), e.border) {
@@ -2335,34 +2333,34 @@ class hr extends w {
       n.width !== void 0 && (t.borderWidth = this.toCSSValue(n.width)), n.color && !this.isAsset(n.color) && (t.borderColor = n.color), n.style && (t.borderStyle = n.style);
     }
     if (e.shadow) {
-      const n = e.shadow, r = n.x || 0, a = n.y || 0, l = n.blur !== void 0 ? n.blur : n.radius || 0, c = n.spread || 0, u = n.color || "rgba(0,0,0,0.25)";
-      t.boxShadow = c !== 0 ? `${r}px ${a}px ${l}px ${c}px ${u}` : `${r}px ${a}px ${l}px ${u}`;
+      const n = e.shadow, o = n.x || 0, a = n.y || 0, l = n.blur !== void 0 ? n.blur : n.radius || 0, c = n.spread || 0, u = n.color || "rgba(0,0,0,0.25)";
+      t.boxShadow = c !== 0 ? `${o}px ${a}px ${l}px ${c}px ${u}` : `${o}px ${a}px ${l}px ${u}`;
     }
     if (e.clipped && (t.overflow = "hidden"), e.clipShape) {
-      const { shape: n, parameters: r } = e.clipShape;
+      const { shape: n, parameters: o } = e.clipShape;
       switch (n) {
         case "circle":
           t.clipPath = "circle(50%)";
           break;
         case "ellipse": {
-          const a = r?.radiusX || "50%", l = r?.radiusY || "50%";
+          const a = o?.radiusX || "50%", l = o?.radiusY || "50%";
           t.clipPath = `ellipse(${a} ${l} at center)`;
           break;
         }
         case "rect": {
-          const a = r?.inset || 0;
+          const a = o?.inset || 0;
           t.clipPath = `inset(${a}px)`;
           break;
         }
         case "polygon": {
-          const a = r?.points || "0% 0%, 100% 0%, 100% 100%, 0% 100%";
+          const a = o?.points || "0% 0%, 100% 0%, 100% 100%, 0% 100%";
           t.clipPath = `polygon(${a})`;
           break;
         }
       }
     }
     const i = [];
-    return e.blur !== void 0 && i.push(`blur(${e.blur}px)`), e.brightness !== void 0 && i.push(`brightness(${e.brightness})`), e.contrast !== void 0 && i.push(`contrast(${e.contrast})`), e.saturation !== void 0 && i.push(`saturate(${e.saturation})`), e.hueRotation !== void 0 && i.push(`hue-rotate(${e.hueRotation}deg)`), e.grayscale !== void 0 && i.push(`grayscale(${e.grayscale})`), e.colorInvert !== void 0 && i.push(`invert(${e.colorInvert})`), i.length > 0 && (t.filter = i.join(" ")), process.env.NODE_ENV === "development" && (console.log("[AppearanceModifier.computeAppearanceStyles] Returning styles object:", t), console.log("[AppearanceModifier.computeAppearanceStyles] fontFamily in styles?", "fontFamily" in t, "fontFamily value:", t.fontFamily)), t;
+    return e.blur !== void 0 && i.push(`blur(${e.blur}px)`), e.brightness !== void 0 && i.push(`brightness(${e.brightness})`), e.contrast !== void 0 && i.push(`contrast(${e.contrast})`), e.saturation !== void 0 && i.push(`saturate(${e.saturation})`), e.hueRotation !== void 0 && i.push(`hue-rotate(${e.hueRotation}deg)`), e.grayscale !== void 0 && i.push(`grayscale(${e.grayscale})`), e.colorInvert !== void 0 && i.push(`invert(${e.colorInvert})`), i.length > 0 && (t.filter = i.join(" ")), t;
   }
   /**
    * Apply HTML attributes (ARIA, role, data attributes, etc.)
@@ -2406,18 +2404,18 @@ class C extends w {
     }), i.onTouchCancel && t.element.addEventListener("touchcancel", i.onTouchCancel, {
       passive: !0
     }), i.onSwipeLeft || i.onSwipeRight) {
-      let n = 0, r = 0;
+      let n = 0, o = 0;
       t.element.addEventListener(
         "touchstart",
         (a) => {
           const c = a.touches[0];
-          n = c.clientX, r = c.clientY;
+          n = c.clientX, o = c.clientY;
         },
         { passive: !0 }
       ), t.element.addEventListener(
         "touchend",
         (a) => {
-          const c = a.changedTouches[0], u = c.clientX - n, f = c.clientY - r;
+          const c = a.changedTouches[0], u = c.clientX - n, f = c.clientY - o;
           Math.abs(u) > Math.abs(f) && Math.abs(u) > 50 && (u < 0 && i.onSwipeLeft ? i.onSwipeLeft() : u > 0 && i.onSwipeRight && i.onSwipeRight());
         },
         { passive: !0 }
@@ -2428,15 +2426,15 @@ class C extends w {
     }), i.onWheel && t.element.addEventListener("wheel", i.onWheel, {
       passive: !1
     }), i.onInput && t.element.addEventListener("input", i.onInput), i.onChange && t.element.addEventListener("change", (n) => {
-      const r = n.target, a = r.value || r.textContent || "";
+      const o = n.target, a = o.value || o.textContent || "";
       i.onChange(a, n);
     }), i.onCopy && t.element.addEventListener("copy", i.onCopy), i.onCut && t.element.addEventListener("cut", i.onCut), i.onPaste && t.element.addEventListener("paste", i.onPaste), i.onSelect && t.element.addEventListener("select", i.onSelect), i.disabled !== void 0 && $(t.element)) {
-      const n = t.element, r = (a) => {
+      const n = t.element, o = (a) => {
         a ? (n.setAttribute("disabled", "true"), n.style.pointerEvents = "none", n.style.opacity = "0.6") : (n.removeAttribute("disabled"), n.style.pointerEvents = "", n.style.opacity = "");
       };
-      p(i.disabled) || m(i.disabled) ? b(() => {
-        r(!!i.disabled());
-      }) : r(!!i.disabled);
+      p(i.disabled) || h(i.disabled) ? b(() => {
+        o(!!i.disabled());
+      }) : o(!!i.disabled);
     }
     i.draggable !== void 0 && $(t.element) && (t.element.draggable = i.draggable), i.accessibilityLabel && t.element.setAttribute("aria-label", i.accessibilityLabel), i.accessibilityHint && t.element.setAttribute("aria-describedby", i.accessibilityHint), i.onLongPressGesture && this.setupLongPressGesture(t.element, i.onLongPressGesture), i.keyboardShortcut && this.setupKeyboardShortcut(t.element, i.keyboardShortcut), i.focused !== void 0 && this.setupFocusManagement(t.element, i.focused), i.focusable && this.setupFocusable(t.element, i.focusable), i.onContinuousHover && this.setupContinuousHover(t.element, i.onContinuousHover), i.allowsHitTesting !== void 0 && this.setupHitTesting(t.element, i.allowsHitTesting);
   }
@@ -2446,12 +2444,12 @@ class C extends w {
    */
   setupLongPressGesture(e, t) {
     const i = t.minimumDuration ?? 500, n = t.maximumDistance ?? 10;
-    let r, a = null, l = !1;
+    let o, a = null, l = !1;
     const c = () => {
-      r && (clearTimeout(r), r = void 0), l && t.onPressingChanged && t.onPressingChanged(!1), l = !1, a = null;
+      o && (clearTimeout(o), o = void 0), l && t.onPressingChanged && t.onPressingChanged(!1), l = !1, a = null;
     }, u = (v) => {
       const S = v;
-      a = { x: S.clientX, y: S.clientY }, l = !0, t.onPressingChanged && t.onPressingChanged(!0), r = (Jt() ? window.setTimeout : setTimeout)(() => {
+      a = { x: S.clientX, y: S.clientY }, l = !0, t.onPressingChanged && t.onPressingChanged(!0), o = (Qt() ? window.setTimeout : setTimeout)(() => {
         l && a && (t.perform(), c());
       }, i);
     }, f = (v) => {
@@ -2460,12 +2458,12 @@ class C extends w {
       Math.sqrt(
         Math.pow(S.clientX - a.x, 2) + Math.pow(S.clientY - a.y, 2)
       ) > n && c();
-    }, h = () => {
+    }, m = () => {
       c();
     }, y = () => {
       c();
     };
-    e.addEventListener("pointerdown", u), e.addEventListener("pointermove", f), e.addEventListener("pointerup", h), e.addEventListener(
+    e.addEventListener("pointerdown", u), e.addEventListener("pointermove", f), e.addEventListener("pointerup", m), e.addEventListener(
       "pointercancel",
       y
     ), e._longPressCleanup = c;
@@ -2474,24 +2472,24 @@ class C extends w {
    * Setup keyboard shortcut handling
    */
   setupKeyboardShortcut(e, t) {
-    const i = t.modifiers ?? [], n = (r) => {
+    const i = t.modifiers ?? [], n = (o) => {
       const a = {
         cmd: i.includes("cmd") || i.includes("meta"),
         ctrl: i.includes("ctrl"),
         shift: i.includes("shift"),
         alt: i.includes("alt")
       }, l = {
-        cmd: r.metaKey || r.ctrlKey,
+        cmd: o.metaKey || o.ctrlKey,
         // Handle both Mac (meta) and PC (ctrl)
-        ctrl: r.ctrlKey,
-        shift: r.shiftKey,
-        alt: r.altKey
-      }, c = r.key.toLowerCase() === t.key.toLowerCase(), u = Object.entries(a).every(
-        ([f, h]) => h === l[f]
+        ctrl: o.ctrlKey,
+        shift: o.shiftKey,
+        alt: o.altKey
+      }, c = o.key.toLowerCase() === t.key.toLowerCase(), u = Object.entries(a).every(
+        ([f, m]) => m === l[f]
       );
-      c && u && (r.preventDefault(), t.action());
+      c && u && (o.preventDefault(), t.action());
     };
-    re() && (document.addEventListener("keydown", n), e._keyboardShortcutCleanup = () => {
+    oe() && (document.addEventListener("keydown", n), e._keyboardShortcutCleanup = () => {
       document.removeEventListener("keydown", n);
     });
   }
@@ -2501,7 +2499,7 @@ class C extends w {
   setupFocusManagement(e, t) {
     if (!$(e)) return;
     const i = e;
-    i.hasAttribute("tabindex") || i.setAttribute("tabindex", "0"), p(t) || m(t) ? b(() => {
+    i.hasAttribute("tabindex") || i.setAttribute("tabindex", "0"), p(t) || h(t) ? b(() => {
       t() ? i.focus() : i.blur();
     }) : t && i.focus();
   }
@@ -2528,13 +2526,13 @@ class C extends w {
       } else
         c = l.clientX, u = l.clientY;
       t.perform({ x: c, y: u });
-    }, r = () => {
+    }, o = () => {
       t.perform(null);
     };
-    e.addEventListener("mousemove", n), e.addEventListener("mouseleave", r), e._continuousHoverCleanup = () => {
+    e.addEventListener("mousemove", n), e.addEventListener("mouseleave", o), e._continuousHoverCleanup = () => {
       e.removeEventListener("mousemove", n), e.removeEventListener(
         "mouseleave",
-        r
+        o
       );
     };
   }
@@ -2545,7 +2543,7 @@ class C extends w {
     $(e) && (e.style.pointerEvents = t ? "" : "none");
   }
 }
-class yr extends w {
+class go extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "animation");
@@ -2555,26 +2553,26 @@ class yr extends w {
     if (!t.element) return;
     const i = this.properties;
     if (i.transition) {
-      const n = i.transition, r = n.property || "all", a = n.duration || 300, l = n.easing || "ease", c = n.delay || 0;
-      F(t.element) && (t.element.style.transition = `${r} ${a}ms ${l} ${c}ms`);
+      const n = i.transition, o = n.property || "all", a = n.duration || 300, l = n.easing || "ease", c = n.delay || 0;
+      N(t.element) && (o === "none" ? t.element.style.transition = "none" : t.element.style.transition = `${o} ${a}ms ${l} ${c}ms`);
     }
-    if (i.animation && F(t.element)) {
+    if (i.animation && N(t.element)) {
       const n = i.animation;
       if (n.keyframes && typeof document < "u") {
-        const r = `tachui-animation-${t.componentId}-${Date.now()}`, a = this.createKeyframeRule(
-          r,
+        const o = `tachui-animation-${t.componentId}-${Date.now()}`, a = this.createKeyframeRule(
+          o,
           n.keyframes
         );
         this.addKeyframesToStylesheet(a);
         const l = n.duration || 1e3, c = n.easing || "ease", u = n.iterations || 1, f = n.direction || "normal";
-        t.element.style.animation = `${r} ${l}ms ${c} ${u} ${f}`;
+        t.element.style.animation = `${o} ${l}ms ${c} ${u} ${f}`;
       }
     }
-    if (i.transform && F(t.element) && (p(i.transform) || m(i.transform) ? b(() => {
+    if (i.transform && N(t.element) && (p(i.transform) || h(i.transform) ? b(() => {
       const n = i.transform();
-      F(t.element) && (t.element.style.transform = n);
-    }) : t.element.style.transform = i.transform), i.rotationEffect && F(t.element)) {
-      const { angle: n, anchor: r } = i.rotationEffect, l = {
+      N(t.element) && (t.element.style.transform = n);
+    }) : t.element.style.transform = i.transform), i.rotationEffect && N(t.element)) {
+      const { angle: n, anchor: o } = i.rotationEffect, l = {
         center: "50% 50%",
         top: "50% 0%",
         topLeading: "0% 0%",
@@ -2584,30 +2582,37 @@ class yr extends w {
         bottomTrailing: "100% 100%",
         leading: "0% 50%",
         trailing: "100% 50%"
-      }[r || "center"] || "50% 50%", c = `rotate(${n}deg)`;
-      if (p(n) || m(n))
+      }[o || "center"] || "50% 50%", c = `rotate(${n}deg)`;
+      if (p(n) || h(n))
         b(() => {
           const f = `rotate(${typeof n == "function" ? n() : n}deg)`;
-          if (F(t.element)) {
+          if (N(t.element)) {
             t.element.style.transformOrigin = l;
             const y = (t.element.style.transform || "").split(" ").filter((S) => S && !S.startsWith("rotate(")).join(" "), v = y ? `${y} ${f}` : f;
             t.element.style.transform = v;
           }
         });
-      else if (F(t.element)) {
+      else if (N(t.element)) {
         t.element.style.transformOrigin = l;
-        const f = (t.element.style.transform || "").split(" ").filter((y) => y && !y.startsWith("rotate(")).join(" "), h = f ? `${f} ${c}` : c;
-        t.element.style.transform = h;
+        const f = (t.element.style.transform || "").split(" ").filter((y) => y && !y.startsWith("rotate(")).join(" "), m = f ? `${f} ${c}` : c;
+        t.element.style.transform = m;
       }
     }
     i.overlay && $(t.element) && this.applyOverlay(t.element, i.overlay, t);
   }
+  getStaticCSS(e) {
+    return Ie(
+      e,
+      this.properties,
+      this.createKeyframeRule.bind(this)
+    );
+  }
   applyOverlay(e, t, i) {
-    const { content: n, alignment: r = "center" } = t;
-    if ((e.style.position === "" || e.style.position === "static") && (e.style.position = "relative"), !re()) return;
+    const { content: n, alignment: o = "center" } = t;
+    if ((e.style.position === "" || e.style.position === "static") && (e.style.position = "relative"), !oe()) return;
     const a = document.createElement("div");
     a.style.position = "absolute", a.style.pointerEvents = "none";
-    const l = this.getOverlayAlignment(r);
+    const l = this.getOverlayAlignment(o);
     if (Object.assign(a.style, l), typeof n == "function") {
       const c = n();
       if (c && typeof c.render == "function") {
@@ -2669,10 +2674,10 @@ class yr extends w {
   createKeyframeRule(e, t) {
     let i = `@keyframes ${e} {
 `;
-    for (const [n, r] of Object.entries(t)) {
+    for (const [n, o] of Object.entries(t)) {
       i += `  ${n} {
 `;
-      for (const [a, l] of Object.entries(r)) {
+      for (const [a, l] of Object.entries(o)) {
         const c = this.toCSSProperty(a);
         i += `    ${c}: ${l};
 `;
@@ -2683,14 +2688,14 @@ class yr extends w {
     return i += "}", i;
   }
   addKeyframesToStylesheet(e) {
-    if (!re()) return;
+    if (!oe()) return;
     let t = document.querySelector(
       "#tachui-animations"
     );
     t || (t = document.createElement("style"), t.id = "tachui-animations", document.head.appendChild(t)), t.appendChild(document.createTextNode(e));
   }
 }
-class gr extends w {
+class vo extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "lifecycle");
@@ -2707,8 +2712,8 @@ class gr extends w {
   setupLifecycleObserver(e, t) {
     const i = new IntersectionObserver(
       (n) => {
-        n.forEach((r) => {
-          r.isIntersecting && t.onAppear ? t.onAppear() : !r.isIntersecting && t.onDisappear && t.onDisappear();
+        n.forEach((o) => {
+          o.isIntersecting && t.onAppear ? t.onAppear() : !o.isIntersecting && t.onDisappear && t.onDisappear();
         });
       },
       {
@@ -2729,11 +2734,11 @@ class gr extends w {
     (async () => {
       try {
         if (i.aborted) return;
-        const r = t.operation();
-        r instanceof Promise && await r;
-      } catch (r) {
+        const o = t.operation();
+        o instanceof Promise && await o;
+      } catch (o) {
         if (i.aborted) return;
-        console.error("TachUI Task Error:", r);
+        console.error("TachUI Task Error:", o);
       }
     })(), this.addCleanup(() => {
       this.activeAbortController && this.activeAbortController.abort();
@@ -2741,9 +2746,9 @@ class gr extends w {
   }
   setupRefreshable(e, t) {
     if (!t) return;
-    let i = !1, n = 0, r = 0;
+    let i = !1, n = 0, o = 0;
     const a = 70;
-    if (!re()) return;
+    if (!oe()) return;
     const l = document.createElement("div");
     if (l.style.cssText = `
       position: absolute;
@@ -2771,16 +2776,16 @@ class gr extends w {
     const c = e.parentElement || e;
     $(c) && (c.style.position = "relative", c.appendChild(l));
     const u = (y) => {
-      i || (r = y.touches[0].clientY);
+      i || (o = y.touches[0].clientY);
     }, f = (y) => {
       if (i) return;
       const v = y.touches[0].clientY;
-      if (n = Math.max(0, v - r), n > 20) {
+      if (n = Math.max(0, v - o), n > 20) {
         const S = Math.min(1, n / a);
         l.style.opacity = String(S);
       }
       n > 0 && e.scrollTop === 0 && y.preventDefault();
-    }, h = async () => {
+    }, m = async () => {
       if (!i)
         if (n > a) {
           i = !0, l.style.opacity = "1";
@@ -2798,13 +2803,13 @@ class gr extends w {
       passive: !0
     }), e.addEventListener("touchmove", f, {
       passive: !1
-    }), e.addEventListener("touchend", h, {
+    }), e.addEventListener("touchend", m, {
       passive: !0
     }), this.addCleanup(() => {
       e.removeEventListener(
         "touchstart",
         u
-      ), e.removeEventListener("touchmove", f), e.removeEventListener("touchend", h), l.parentElement && l.parentElement.removeChild(l);
+      ), e.removeEventListener("touchmove", f), e.removeEventListener("touchend", m), l.parentElement && l.parentElement.removeChild(l);
     });
   }
   addCleanup(e) {
@@ -2814,7 +2819,7 @@ class gr extends w {
     this.cleanupFunctions.forEach((e) => e()), this.cleanupFunctions = [];
   }
 }
-class Te extends w {
+class Me extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "overlay");
@@ -2838,9 +2843,9 @@ class Te extends w {
       const n = this.resolveReactive(
         this.properties.alignment,
         "center"
-      ), r = this.resolveReactive(this.properties.side, void 0), a = this.resolveReactive(this.properties.offset, void 0), l = this.resolveReactive(this.properties.enabled, !0);
+      ), o = this.resolveReactive(this.properties.side, void 0), a = this.resolveReactive(this.properties.offset, void 0), l = this.resolveReactive(this.properties.enabled, !0);
       this.clearPositionStyles(e);
-      const c = r ?? n, u = r !== void 0 ? c : n, f = this.getOverlayAlignment(u);
+      const c = o ?? n, u = o !== void 0 ? c : n, f = this.getOverlayAlignment(u);
       Object.assign(e.style, f), this.applyOffset(e, c, a), e.style.display = l ? "" : "none";
     };
     if (this.isReactive(this.properties.alignment) || this.isReactive(this.properties.side) || this.isReactive(this.properties.offset) || this.isReactive(this.properties.enabled)) {
@@ -2857,19 +2862,19 @@ class Te extends w {
       this.applyNumericOffset(e, t, i);
       return;
     }
-    const { x: n, y: r } = i;
+    const { x: n, y: o } = i;
     typeof n == "number" && (e.style.left ? e.style.left = this.addPixelOffset(
       e.style.left,
       n
     ) : e.style.right && (e.style.right = this.addPixelOffset(
       e.style.right,
       n
-    ))), typeof r == "number" && (e.style.top ? e.style.top = this.addPixelOffset(
+    ))), typeof o == "number" && (e.style.top ? e.style.top = this.addPixelOffset(
       e.style.top,
-      r
+      o
     ) : e.style.bottom && (e.style.bottom = this.addPixelOffset(
       e.style.bottom,
-      r
+      o
     )));
   }
   applyNumericOffset(e, t, i) {
@@ -2899,10 +2904,10 @@ class Te extends w {
     e.style.top = "", e.style.right = "", e.style.bottom = "", e.style.left = "", e.style.transform = "";
   }
   isReactive(e) {
-    return !!(e && (p(e) || m(e)));
+    return !!(e && (p(e) || h(e)));
   }
   resolveReactive(e, t) {
-    return e === void 0 ? t : p(e) || m(e) ? e() : e;
+    return e === void 0 ? t : p(e) || h(e) ? e() : e;
   }
   renderContent(e, t) {
     if (typeof t == "function") {
@@ -2963,16 +2968,16 @@ class Te extends w {
     return t[e] || t.center;
   }
 }
-function Qt(o, s = "center") {
-  return typeof s == "object" && s !== null && !p(s) && !m(s) ? new Te({
-    content: o,
+function ei(r, s = "center") {
+  return typeof s == "object" && s !== null && !p(s) && !h(s) ? new Me({
+    content: r,
     ...s
-  }) : new Te({
-    content: o,
+  }) : new Me({
+    content: r,
     alignment: s
   });
 }
-class $e extends g {
+class Ve extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "background");
@@ -2981,7 +2986,7 @@ class $e extends g {
   apply(e, t) {
     if (!t.element) return;
     const i = this.properties.background, n = this.properties.cssProperty ?? "background";
-    if (p(i) || m(i)) {
+    if (p(i) || h(i)) {
       this.applyStyles(t.element, { [n]: i });
       return;
     }
@@ -2997,11 +3002,11 @@ class $e extends g {
       this.applyStatefulBackground(t.element, i, n);
       return;
     }
-    const r = this.resolveBackgroundValue(
+    const o = this.resolveBackgroundValue(
       i
     );
-    if (r !== void 0) {
-      const a = { [n]: r };
+    if (o !== void 0) {
+      const a = { [n]: o };
       this.applyStyles(t.element, a);
     }
   }
@@ -3013,8 +3018,8 @@ class $e extends g {
     const n = j();
     b(() => {
       n();
-      const r = i.resolve();
-      this.applyStyleChange(e, t, r);
+      const o = i.resolve();
+      this.applyStyleChange(e, t, o);
     });
   }
   isGradientDefinition(e) {
@@ -3023,7 +3028,7 @@ class $e extends g {
   resolveBackgroundValue(e) {
     if (e != null) {
       if (this.isGradientDefinition(e))
-        return je(e);
+        return Ue(e);
       if (this.isAssetValue(e)) {
         const t = e.resolve();
         return typeof t == "string" ? t : String(t);
@@ -3043,49 +3048,49 @@ class $e extends g {
       disabled: t.disabled ? this.resolveBackgroundValue(
         t.disabled
       ) : void 0
-    }, r = (f) => {
+    }, o = (f) => {
       if (!f) return;
-      const h = n[f];
-      h !== void 0 && this.applyStyleChange(e, i, h);
+      const m = n[f];
+      m !== void 0 && this.applyStyleChange(e, i, m);
     }, a = () => this.isElementDisabled(e) && n.disabled ? "disabled" : n.focus && this.matchesSelector(e, ":focus") ? "focus" : "default", l = () => {
       const f = t.animation;
       if (!f) return;
-      const h = f.duration ?? 200, y = f.easing ?? "ease", v = f.delay ?? 0, N = `${i === "backgroundColor" ? "background-color" : "background"} ${h}ms ${y} ${v}ms`;
-      e.style.transition = N;
+      const m = f.duration ?? 200, y = f.easing ?? "ease", v = f.delay ?? 0, z = `${i === "backgroundColor" ? "background-color" : "background"} ${m}ms ${y} ${v}ms`;
+      e.style.transition = z;
       const K = e.style.cssText || "";
-      K.includes("transition") || (e.style.cssText = `${K}${K ? ";" : ""}transition: ${N};`);
+      K.includes("transition") || (e.style.cssText = `${K}${K ? ";" : ""}transition: ${z};`);
     }, c = () => {
       const f = a();
       if (f === "focus" && this.matchesSelector(e, ":hover") && n.hover) {
-        r("hover");
+        o("hover");
         return;
       }
-      r(f);
+      o(f);
     }, u = () => {
       if (this.isElementDisabled(e) && n.disabled) {
-        r("disabled");
+        o("disabled");
         return;
       }
       if (n.hover && this.matchesSelector(e, ":hover")) {
-        r("hover");
+        o("hover");
         return;
       }
       if (n.focus && this.matchesSelector(e, ":focus")) {
-        r("focus");
+        o("focus");
         return;
       }
-      r("default");
+      o("default");
     };
-    this.isElementDisabled(e) && n.disabled ? r("disabled") : r("default"), l(), n.hover && (e.addEventListener("mouseenter", () => {
-      this.isElementDisabled(e) || r("hover");
+    this.isElementDisabled(e) && n.disabled ? o("disabled") : o("default"), l(), n.hover && (e.addEventListener("mouseenter", () => {
+      this.isElementDisabled(e) || o("hover");
     }), e.addEventListener("mouseleave", c)), n.active && (e.addEventListener("mousedown", () => {
-      this.isElementDisabled(e) || r("active");
+      this.isElementDisabled(e) || o("active");
     }), e.addEventListener("mouseup", u)), n.focus && (e.addEventListener("focus", () => {
-      this.isElementDisabled(e) || r("focus");
+      this.isElementDisabled(e) || o("focus");
     }), e.addEventListener("blur", () => {
       c();
     })), n.disabled && new MutationObserver(() => {
-      this.isElementDisabled(e) ? r("disabled") : n.hover && this.matchesSelector(e, ":hover") ? r("hover") : n.focus && this.matchesSelector(e, ":focus") ? r("focus") : r("default");
+      this.isElementDisabled(e) ? o("disabled") : n.hover && this.matchesSelector(e, ":hover") ? o("hover") : n.focus && this.matchesSelector(e, ":focus") ? o("focus") : o("default");
     }).observe(e, {
       attributes: !0,
       attributeFilter: ["disabled", "aria-disabled"]
@@ -3104,12 +3109,12 @@ class $e extends g {
     return !!(e.hasAttribute && e.hasAttribute("disabled") || e.getAttribute && e.getAttribute("aria-disabled") === "true");
   }
 }
-const ei = {
+const ti = {
   repeat: "no-repeat",
   size: "cover",
   position: "center"
 };
-class ti extends g {
+class ii extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "backgroundImage");
@@ -3119,11 +3124,11 @@ class ti extends g {
     if (!t.element) return;
     const {
       source: i,
-      options: { repeat: n, size: r, position: a }
+      options: { repeat: n, size: o, position: a }
     } = this.properties;
     if (this.applyStyles(t.element, {
       backgroundRepeat: this.mapRepeatValue(n),
-      backgroundSize: r,
+      backgroundSize: o,
       backgroundPosition: a
     }), this.isAssetValue(i)) {
       this.applyImageAssetWithThemeReactivity(t.element, i);
@@ -3138,12 +3143,12 @@ class ti extends g {
     const i = j();
     b(() => {
       i();
-      const r = t.resolve().replace(/["\\]/g, "\\$&");
-      this.applyStyleChange(e, "backgroundImage", `url("${r}")`);
+      const o = t.resolve().replace(/["\\]/g, "\\$&");
+      this.applyStyleChange(e, "backgroundImage", `url("${o}")`);
     });
   }
 }
-class Ve extends g {
+class Re extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "backgroundClip");
@@ -3159,61 +3164,61 @@ class Ve extends g {
     return e.backgroundImage && (t.backgroundImage = e.backgroundImage), e.backgroundClip && (t.backgroundClip = e.backgroundClip, t.webkitBackgroundClip = e.backgroundClip), e.color && (t.color = e.color, e.backgroundClip === "text" && (t.webkitTextFillColor = e.color)), t;
   }
 }
-function ii(o) {
-  return new $e({
-    background: o,
+function ni(r) {
+  return new Ve({
+    background: r,
     cssProperty: "backgroundColor"
   });
 }
-function ni(o) {
-  return new $e({
-    background: o,
+function ri(r) {
+  return new Ve({
+    background: r,
     cssProperty: "background"
   });
 }
-function oi(o, s = {}) {
-  return new ti({
-    source: o,
+function oi(r, s = {}) {
+  return new ii({
+    source: r,
     options: {
-      ...ei,
+      ...ti,
       ...s
     }
   });
 }
-function vr(o, s = "text", e = "transparent") {
-  return new Ve({
-    backgroundImage: o,
+function bo(r, s = "text", e = "transparent") {
+  return new Re({
+    backgroundImage: r,
     backgroundClip: s,
     color: e
   });
 }
-function Z(o) {
-  return new Ve({
-    backgroundImage: o,
+function Z(r) {
+  return new Re({
+    backgroundImage: r,
     backgroundClip: "text",
     webkitBackgroundClip: "text",
     color: "transparent",
     webkitTextFillColor: "transparent"
   });
 }
-function br() {
+function So() {
   return Z("linear-gradient(45deg, #007AFF, #5856D6)");
 }
-function Sr() {
+function wo() {
   return Z(
     "linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff80, #0080ff, #8000ff)"
   );
 }
-function wr() {
+function Co() {
   return Z("linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3)");
 }
-function Cr() {
+function Eo() {
   return Z("linear-gradient(45deg, #667eea, #764ba2)");
 }
-function Er() {
+function xo() {
   return Z("linear-gradient(45deg, #f7971e, #ffd200)");
 }
-class ri extends g {
+class si extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "blendMode");
@@ -3223,7 +3228,7 @@ class ri extends g {
     t.element && this.applyStyleChange(t.element, "mixBlendMode", this.properties.mode);
   }
 }
-class si extends g {
+class ai extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "backgroundBlendMode");
@@ -3237,13 +3242,13 @@ class si extends g {
     );
   }
 }
-function ai(o) {
-  return new ri({ mode: o });
+function li(r) {
+  return new si({ mode: r });
 }
-function li(o) {
-  return new si({ mode: o });
+function ci(r) {
+  return new ai({ mode: r });
 }
-class ci extends g {
+class di extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "compositingGroup");
@@ -3253,10 +3258,10 @@ class ci extends g {
     t.element && this.applyStyleChange(t.element, "isolation", "isolate");
   }
 }
-function di() {
-  return new ci({});
+function fi() {
+  return new di({});
 }
-class _ extends g {
+class B extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "border");
@@ -3273,8 +3278,8 @@ class _ extends g {
       return;
     const n = j();
     b(() => {
-      n(), Object.entries(i).forEach(([r, a]) => {
-        this.applyStyleChange(e, r, a.resolve());
+      n(), Object.entries(i).forEach(([o, a]) => {
+        this.applyStyleChange(e, o, a.resolve());
       });
     });
   }
@@ -3304,7 +3309,7 @@ class _ extends g {
     return typeof e == "number" ? `${e}px` : e;
   }
 }
-class fi extends g {
+class ui extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "cornerRadius");
@@ -3320,12 +3325,12 @@ class fi extends g {
   }
   generateCornerRadiusCSS(e) {
     const t = this.resolveCornerValues(e), i = {};
-    return Object.entries(t).forEach(([n, r]) => {
-      if (r !== void 0) {
+    return Object.entries(t).forEach(([n, o]) => {
+      if (o !== void 0) {
         const a = this.cornerToCSSProperty(
           n
         );
-        i[a] = this.formatRadius(r);
+        i[a] = this.formatRadius(o);
       }
     }), i;
   }
@@ -3349,41 +3354,41 @@ class fi extends g {
     return typeof e == "number" ? `${e}px` : e;
   }
 }
-function ui(o, s, e) {
-  return typeof o == "number" || typeof o == "string" ? new _({
-    width: o,
+function pi(r, s, e) {
+  return typeof r == "number" || typeof r == "string" ? new B({
+    width: r,
     color: s || "currentColor",
     style: e || "solid"
-  }) : new _(o);
+  }) : new B(r);
 }
-function pi(o, s, e) {
-  return new _({ top: { width: o, color: s, style: e } });
+function hi(r, s, e) {
+  return new B({ top: { width: r, color: s, style: e } });
 }
-function mi(o, s, e) {
-  return new _({ right: { width: o, color: s, style: e } });
+function mi(r, s, e) {
+  return new B({ right: { width: r, color: s, style: e } });
 }
-function hi(o, s, e) {
-  return new _({ bottom: { width: o, color: s, style: e } });
+function yi(r, s, e) {
+  return new B({ bottom: { width: r, color: s, style: e } });
 }
-function yi(o, s, e) {
-  return new _({ left: { width: o, color: s, style: e } });
+function gi(r, s, e) {
+  return new B({ left: { width: r, color: s, style: e } });
 }
-function xr(o, s, e) {
-  return new _({ leading: { width: o, color: s, style: e } });
+function To(r, s, e) {
+  return new B({ leading: { width: r, color: s, style: e } });
 }
-function Mr(o, s, e) {
-  return new _({ trailing: { width: o, color: s, style: e } });
+function Mo(r, s, e) {
+  return new B({ trailing: { width: r, color: s, style: e } });
 }
-function Tr(o, s, e) {
-  return new _({ horizontal: { width: o, color: s, style: e } });
+function Lo(r, s, e) {
+  return new B({ horizontal: { width: r, color: s, style: e } });
 }
-function Lr(o, s, e) {
-  return new _({ vertical: { width: o, color: s, style: e } });
+function ko(r, s, e) {
+  return new B({ vertical: { width: r, color: s, style: e } });
 }
-function Ar(o) {
-  return new fi({ radius: o });
+function Ao(r) {
+  return new ui({ radius: r });
 }
-class Re extends g {
+class De extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "foreground");
@@ -3414,18 +3419,18 @@ class Re extends g {
     const n = j();
     b(() => {
       n();
-      const r = i.resolve();
-      this.applyStyleChange(e, t, r);
+      const o = i.resolve();
+      this.applyStyleChange(e, t, o);
     });
   }
 }
-function gi(o) {
-  return new Re({ color: o });
+function vi(r) {
+  return new De({ color: r });
 }
-function kr(o) {
-  return new Re({ color: o });
+function Io(r) {
+  return new De({ color: r });
 }
-class vi extends g {
+class bi extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "clip-shape");
@@ -3435,7 +3440,7 @@ class vi extends g {
     if (!t.element) return;
     const i = t.element;
     if (!i.style) return;
-    const { shape: n, parameters: r = {} } = this.properties, a = this.generateClipPath(n, r);
+    const { shape: n, parameters: o = {} } = this.properties, a = this.generateClipPath(n, o);
     a && (i.style.clipPath = a);
   }
   generateClipPath(e, t) {
@@ -3457,10 +3462,10 @@ class vi extends g {
     }
   }
 }
-function bi(o, s) {
-  return new vi({ shape: o, parameters: s || {} });
+function Si(r, s) {
+  return new bi({ shape: r, parameters: s || {} });
 }
-class Si extends g {
+class wi extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "clipped");
@@ -3472,45 +3477,45 @@ class Si extends g {
     i.style && (this.properties.clipped ? i.style.overflow = "hidden" : i.style.overflow = "");
   }
 }
-function wi(o = !0) {
-  return new Si({ clipped: o });
+function Ci(r = !0) {
+  return new wi({ clipped: r });
 }
-function Ci(o) {
-  return new B({ opacity: o });
+function Ei(r) {
+  return new _({ opacity: r });
 }
-function Ei(o) {
-  return new B({ cornerRadius: o });
+function xi(r) {
+  return new _({ cornerRadius: r });
 }
-function xi(o) {
-  return new B({ font: { family: o } });
+function Ti(r) {
+  return new _({ font: { family: r } });
 }
-function Mi(o) {
-  return new B({ font: { size: o } });
+function Mi(r) {
+  return new _({ font: { size: r } });
 }
-function Ti(o) {
-  return new B({ font: { weight: o } });
+function Li(r) {
+  return new _({ font: { weight: r } });
 }
-function Li(o) {
-  return new B({ font: { style: o } });
+function ki(r) {
+  return new _({ font: { style: r } });
 }
-function Ai(o) {
-  return new B({ font: o });
+function Ai(r) {
+  return new _({ font: r });
 }
-const ki = "typography", Le = Symbol.for("tachui.typography.instanceId");
-let Ae = 0;
-function Ii(o) {
-  const s = o[Le];
+const Ii = "typography", Le = Symbol.for("tachui.typography.instanceId");
+let ke = 0;
+function Pi(r) {
+  const s = r[Le];
   if (typeof s == "number") return s;
-  Ae += 1;
-  const e = Ae;
-  return Object.defineProperty(o, Le, {
+  ke += 1;
+  const e = ke;
+  return Object.defineProperty(r, Le, {
     value: e,
     enumerable: !1,
     configurable: !1,
     writable: !1
   }), e;
 }
-class k extends g {
+class A extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "typography");
@@ -3533,7 +3538,7 @@ class k extends g {
     if (i === void 0) return;
     const n = e.style;
     if (!n) return;
-    const r = (a) => {
+    const o = (a) => {
       const l = String(a);
       if (n.setProperty) {
         n.setProperty(t, l, "important");
@@ -3545,22 +3550,22 @@ class k extends g {
       );
       n[c] = l;
     };
-    if (p(i) || m(i)) {
-      const a = i, l = Ii(this);
-      ke({
+    if (p(i) || h(i)) {
+      const a = i, l = Pi(this);
+      Ae({
         element: e,
         accessor: a,
-        updaterId: `${ki}:${l}:${t}`,
+        updaterId: `${Ii}:${l}:${t}`,
         updater: (c) => {
-          r(c);
+          o(c);
         }
       });
       return;
     }
-    r(i);
+    o(i);
   }
   computeTypographyStyles(e) {
-    const t = {}, i = (n) => p(n) || m(n);
+    const t = {}, i = (n) => p(n) || h(n);
     if (e.size !== void 0 && (t.fontSize = this.toCSSValue(e.size)), e.weight !== void 0 && (t.fontWeight = String(e.weight)), e.family !== void 0)
       if (typeof e.family == "object" && e.family !== null) {
         const n = e.family;
@@ -3576,57 +3581,57 @@ class k extends g {
     return e === "leading" ? "start" : e === "trailing" ? "end" : e;
   }
 }
-function Pi(o) {
-  return new k(o);
+function $i(r) {
+  return new A(r);
 }
-function $i(o) {
-  return new k({ align: o });
+function Vi(r) {
+  return new A({ align: r });
 }
-function De(o) {
-  return new k({ transform: o });
+function Oe(r) {
+  return new A({ transform: r });
 }
-function Vi(o) {
-  return new k({ decoration: o });
+function Ri(r) {
+  return new A({ decoration: r });
 }
-function Ir(o) {
-  return new k({ size: o });
+function Po(r) {
+  return new A({ size: r });
 }
-function Pr(o) {
-  return new k({ weight: o });
+function $o(r) {
+  return new A({ weight: r });
 }
-function Ri(o) {
-  return new k({ lineHeight: o });
+function Di(r) {
+  return new A({ lineHeight: r });
 }
-function Di(o) {
-  return new k({ letterSpacing: o });
+function Oi(r) {
+  return new A({ letterSpacing: r });
 }
-function $r(o) {
-  return new k({ wordSpacing: o });
+function Vo(r) {
+  return new A({ wordSpacing: r });
 }
-function Oi(o) {
-  return new k({ textOverflow: o });
+function Bi(r) {
+  return new A({ textOverflow: r });
 }
-function _i(o) {
-  return new k({ whiteSpace: o });
+function _i(r) {
+  return new A({ whiteSpace: r });
 }
-function Bi(o) {
-  return new k({ overflow: o });
+function Hi(r) {
+  return new A({ overflow: r });
 }
-function Hi(o) {
-  return De(o);
+function zi(r) {
+  return Oe(r);
 }
-function Vr(o) {
-  return new k({ family: o });
+function Ro(r) {
+  return new A({ family: r });
 }
-function Ni(o) {
-  return typeof o == "string" ? zi(o) : new k({
-    family: o.family,
-    size: o.size,
-    weight: o.weight,
-    style: o.style
+function Fi(r) {
+  return typeof r == "string" ? Ni(r) : new A({
+    family: r.family,
+    size: r.size,
+    weight: r.weight,
+    style: r.style
   });
 }
-function zi(o) {
+function Ni(r) {
   const s = {
     ".largeTitle": { size: 34, weight: 400 },
     ".title": { size: 28, weight: 400 },
@@ -3639,12 +3644,12 @@ function zi(o) {
     ".footnote": { size: 13, weight: 400 },
     ".caption": { size: 12, weight: 400 },
     ".caption2": { size: 11, weight: 400 }
-  }, e = s[o];
-  return e ? new k(e) : new k(s[".body"]);
+  }, e = s[r];
+  return e ? new A(e) : new A(s[".body"]);
 }
-function Rr(o) {
+function Do(r) {
   let s;
-  switch (o.design) {
+  switch (r.design) {
     case "serif":
       s = "ui-serif, Georgia, serif";
       break;
@@ -3657,21 +3662,21 @@ function Rr(o) {
     default:
       s = "system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
   }
-  return new k({
+  return new A({
     family: s,
-    size: o.size,
-    weight: o.weight
+    size: r.size,
+    weight: r.weight
   });
 }
-function Dr(o, s) {
-  return new k({
-    family: o,
+function Oo(r, s) {
+  return new A({
+    family: r,
     size: s?.size,
     weight: s?.weight,
     style: s?.style
   });
 }
-class Fi extends g {
+class Wi extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "lineClamp");
@@ -3700,10 +3705,10 @@ class Fi extends g {
     );
   }
 }
-function Wi(o) {
-  return new Fi({ lines: o });
+function ji(r) {
+  return new Wi({ lines: r });
 }
-class ji extends g {
+class Ui extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "wordBreak");
@@ -3728,10 +3733,10 @@ class ji extends g {
     );
   }
 }
-function Ui(o) {
-  return new ji({ wordBreak: o });
+function Gi(r) {
+  return new Ui({ wordBreak: r });
 }
-class Gi extends g {
+class Ki extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "overflowWrap");
@@ -3753,10 +3758,10 @@ class Gi extends g {
     );
   }
 }
-function Ki(o) {
-  return new Gi({ overflowWrap: o });
+function Yi(r) {
+  return new Ki({ overflowWrap: r });
 }
-class Yi extends g {
+class Xi extends g {
   constructor() {
     super(...arguments);
     d(this, "type", "hyphens");
@@ -3781,8 +3786,8 @@ class Yi extends g {
     );
   }
 }
-function Xi(o) {
-  return new Yi({ hyphens: o });
+function Zi(r) {
+  return new Xi({ hyphens: r });
 }
 class H extends g {
   constructor(e) {
@@ -3826,35 +3831,35 @@ class H extends g {
     return typeof e == "number" ? `${e}px` : e;
   }
 }
-function Zi(o) {
-  return new H({ scroll: o });
+function qi(r) {
+  return new H({ scroll: r });
 }
-function qi(o) {
-  return new H({ scrollBehavior: o });
+function Ji(r) {
+  return new H({ scrollBehavior: r });
 }
-function Ji(o) {
-  return new H({ overscrollBehavior: o });
+function Qi(r) {
+  return new H({ overscrollBehavior: r });
 }
-function Qi(o) {
-  return new H({ overscrollBehaviorX: o });
+function en(r) {
+  return new H({ overscrollBehaviorX: r });
 }
-function en(o) {
-  return new H({ overscrollBehaviorY: o });
+function tn(r) {
+  return new H({ overscrollBehaviorY: r });
 }
-function tn(o) {
-  return new H({ scroll: { margin: o } });
+function nn(r) {
+  return new H({ scroll: { margin: r } });
 }
-function nn(o) {
-  return new H({ scroll: { padding: o } });
+function rn(r) {
+  return new H({ scroll: { padding: r } });
 }
-function on(o, s, e) {
+function on(r, s, e) {
   return new H({
     scroll: {
-      snap: { type: o, align: s, stop: e }
+      snap: { type: r, align: s, stop: e }
     }
   });
 }
-class rn extends w {
+class sn extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onHover");
@@ -3870,16 +3875,16 @@ class rn extends w {
       t.onHover(!1);
     };
     e.addEventListener("mouseenter", i), e.addEventListener("mouseleave", n);
-    const r = () => {
+    const o = () => {
       t.onHover(!1), e.removeEventListener("mouseenter", i), e.removeEventListener("mouseleave", n);
     };
-    e._hoverCleanup = r;
+    e._hoverCleanup = o;
   }
 }
-function sn(o) {
-  return new rn({ onHover: o });
+function an(r) {
+  return new sn({ onHover: r });
 }
-class an extends w {
+class ln extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onMouseEnter");
@@ -3895,7 +3900,7 @@ class an extends w {
     };
   }
 }
-class ln extends w {
+class cn extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onMouseLeave");
@@ -3911,7 +3916,7 @@ class ln extends w {
     };
   }
 }
-class cn extends w {
+class dn extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onMouseDown");
@@ -3927,7 +3932,7 @@ class cn extends w {
     };
   }
 }
-class dn extends w {
+class fn extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onMouseUp");
@@ -3943,7 +3948,7 @@ class dn extends w {
     };
   }
 }
-class fn extends w {
+class un extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onDoubleClick");
@@ -3959,7 +3964,7 @@ class fn extends w {
     };
   }
 }
-class un extends w {
+class pn extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onContextMenu");
@@ -3975,25 +3980,25 @@ class un extends w {
     };
   }
 }
-function pn(o) {
-  return new an({ onMouseEnter: o });
+function hn(r) {
+  return new ln({ onMouseEnter: r });
 }
-function mn(o) {
-  return new ln({ onMouseLeave: o });
+function mn(r) {
+  return new cn({ onMouseLeave: r });
 }
-function hn(o) {
-  return new cn({ onMouseDown: o });
+function yn(r) {
+  return new dn({ onMouseDown: r });
 }
-function yn(o) {
-  return new dn({ onMouseUp: o });
+function gn(r) {
+  return new fn({ onMouseUp: r });
 }
-function gn(o) {
-  return new fn({ onDoubleClick: o });
+function vn(r) {
+  return new un({ onDoubleClick: r });
 }
-function vn(o) {
-  return new un({ onContextMenu: o });
+function bn(r) {
+  return new pn({ onContextMenu: r });
 }
-class bn extends w {
+class Sn extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onKeyDown");
@@ -4009,7 +4014,7 @@ class bn extends w {
     };
   }
 }
-class Sn extends w {
+class wn extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onKeyUp");
@@ -4025,7 +4030,7 @@ class Sn extends w {
     };
   }
 }
-class wn extends w {
+class Cn extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onKeyPress");
@@ -4041,14 +4046,14 @@ class wn extends w {
     };
   }
 }
-function Cn(o) {
-  return new bn({ onKeyDown: o });
+function En(r) {
+  return new Sn({ onKeyDown: r });
 }
-function En(o) {
-  return new Sn({ onKeyUp: o });
+function xn(r) {
+  return new wn({ onKeyUp: r });
 }
-function xn(o) {
-  return new wn({ onKeyPress: o });
+function Tn(r) {
+  return new Cn({ onKeyPress: r });
 }
 class Mn extends w {
   constructor() {
@@ -4068,7 +4073,7 @@ class Mn extends w {
     };
   }
 }
-class Tn extends w {
+class Ln extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onBlur");
@@ -4086,13 +4091,13 @@ class Tn extends w {
     };
   }
 }
-function Ln(o) {
-  return new Mn({ onFocus: o });
+function kn(r) {
+  return new Mn({ onFocus: r });
 }
-function An(o) {
-  return new Tn({ onBlur: o });
+function An(r) {
+  return new Ln({ onBlur: r });
 }
-class kn extends w {
+class In extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "onLongPressGesture");
@@ -4103,55 +4108,55 @@ class kn extends w {
   }
   setupLongPressGesture(e, t) {
     const i = t.minimumDuration ?? 500, n = t.maximumDistance ?? 10;
-    let r = null, a = null, l = !1, c = !1;
-    const u = (T, E) => {
-      l || (r = { x: T, y: E }, l = !0, c = !1, t.onPressingChanged?.(!0), a = window.setTimeout(() => {
+    let o = null, a = null, l = !1, c = !1;
+    const u = (M, E) => {
+      l || (o = { x: M, y: E }, l = !0, c = !1, t.onPressingChanged?.(!0), a = window.setTimeout(() => {
         l && !c && (c = !0, t.perform());
       }, i));
-    }, f = (T, E) => r ? Math.sqrt(
-      Math.pow(T - r.x, 2) + Math.pow(E - r.y, 2)
-    ) <= n : !1, h = () => {
-      a && (clearTimeout(a), a = null), l && (l = !1, t.onPressingChanged?.(!1)), r = null, c = !1;
-    }, y = (T) => {
-      const E = T;
-      T.preventDefault(), u(E.clientX, E.clientY);
-    }, v = (T) => {
+    }, f = (M, E) => o ? Math.sqrt(
+      Math.pow(M - o.x, 2) + Math.pow(E - o.y, 2)
+    ) <= n : !1, m = () => {
+      a && (clearTimeout(a), a = null), l && (l = !1, t.onPressingChanged?.(!1)), o = null, c = !1;
+    }, y = (M) => {
+      const E = M;
+      M.preventDefault(), u(E.clientX, E.clientY);
+    }, v = (M) => {
       if (!l) return;
-      const E = T;
-      f(E.clientX, E.clientY) || h();
+      const E = M;
+      f(E.clientX, E.clientY) || m();
     }, S = () => {
-      h();
-    }, N = () => {
-      h();
-    }, K = (T) => {
-      const E = T;
+      m();
+    }, z = () => {
+      m();
+    }, K = (M) => {
+      const E = M;
       if (E.touches.length === 1) {
         const Y = E.touches[0];
-        T.preventDefault(), u(Y.clientX, Y.clientY);
+        M.preventDefault(), u(Y.clientX, Y.clientY);
       }
-    }, ge = (T) => {
+    }, ge = (M) => {
       if (!l) return;
-      const E = T;
+      const E = M;
       if (E.touches.length === 1) {
         const Y = E.touches[0];
-        f(Y.clientX, Y.clientY) || h();
+        f(Y.clientX, Y.clientY) || m();
       } else
-        h();
+        m();
     }, ve = () => {
-      h();
+      m();
     }, be = () => {
-      h();
-    }, Se = (T) => {
-      const E = T;
-      E.button === 0 && (T.preventDefault(), u(E.clientX, E.clientY));
-    }, we = (T) => {
+      m();
+    }, Se = (M) => {
+      const E = M;
+      E.button === 0 && (M.preventDefault(), u(E.clientX, E.clientY));
+    }, we = (M) => {
       if (!l) return;
-      const E = T;
-      f(E.clientX, E.clientY) || h();
+      const E = M;
+      f(E.clientX, E.clientY) || m();
     }, Ce = () => {
-      h();
+      m();
     }, Ee = () => {
-      h();
+      m();
     };
     "onpointerdown" in e ? (e.addEventListener(
       "pointerdown",
@@ -4161,7 +4166,7 @@ class kn extends w {
       v
     ), e.addEventListener("pointerup", S), e.addEventListener(
       "pointercancel",
-      N
+      z
     )) : "ontouchstart" in e ? (e.addEventListener(
       "touchstart",
       K,
@@ -4170,8 +4175,8 @@ class kn extends w {
       "touchcancel",
       be
     )) : (e.addEventListener("mousedown", Se), e.addEventListener("mousemove", we), e.addEventListener("mouseup", Ce), e.addEventListener("mouseleave", Ee));
-    const Be = () => {
-      h(), "onpointerdown" in e ? (e.removeEventListener(
+    const He = () => {
+      m(), "onpointerdown" in e ? (e.removeEventListener(
         "pointerdown",
         y
       ), e.removeEventListener(
@@ -4182,7 +4187,7 @@ class kn extends w {
         S
       ), e.removeEventListener(
         "pointercancel",
-        N
+        z
       )) : "ontouchstart" in e ? (e.removeEventListener(
         "touchstart",
         K
@@ -4203,13 +4208,13 @@ class kn extends w {
         Ee
       ));
     };
-    e._longPressCleanup = Be;
+    e._longPressCleanup = He;
   }
 }
-function In(o) {
-  return new kn(o);
+function Pn(r) {
+  return new In(r);
 }
-class Pn extends w {
+class $n extends w {
   constructor(e) {
     const t = {
       ...e,
@@ -4229,7 +4234,7 @@ class Pn extends w {
         return;
       const u = new Set(i), f = /* @__PURE__ */ new Set();
       (c.ctrlKey || c.metaKey) && (navigator.platform.includes("Mac") ? (c.metaKey && (f.add("cmd"), f.add("meta")), c.ctrlKey && f.add("ctrl")) : (c.ctrlKey && (f.add("ctrl"), f.add("cmd")), c.metaKey && f.add("meta"))), c.shiftKey && f.add("shift"), c.altKey && f.add("alt");
-      const h = Array.from(u).every(
+      const m = Array.from(u).every(
         (S) => f.has(S)
       ), y = /* @__PURE__ */ new Set([...u]);
       u.has("cmd") && (y.add("meta"), y.add("ctrl")), u.has("meta") && y.add("cmd"), u.has("ctrl") && y.add("cmd");
@@ -4238,11 +4243,11 @@ class Pn extends w {
           S
         )
       );
-      h && !v && (l.preventDefault(), l.stopPropagation(), t.action());
-    }, r = e instanceof HTMLElement && e.tabIndex >= 0 ? e : document;
-    r.addEventListener("keydown", n);
+      m && !v && (l.preventDefault(), l.stopPropagation(), t.action());
+    }, o = e instanceof HTMLElement && e.tabIndex >= 0 ? e : document;
+    o.addEventListener("keydown", n);
     const a = () => {
-      r.removeEventListener(
+      o.removeEventListener(
         "keydown",
         n
       );
@@ -4250,13 +4255,13 @@ class Pn extends w {
     e._keyboardShortcutCleanup = a;
   }
 }
-function Oe(o) {
-  return new Pn(o);
+function Be(r) {
+  return new $n(r);
 }
-function Or(o, s, e) {
-  return Oe({ key: o, modifiers: s, action: e });
+function Bo(r, s, e) {
+  return Be({ key: r, modifiers: s, action: e });
 }
-class $n extends w {
+class Vn extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "focused");
@@ -4270,23 +4275,23 @@ class $n extends w {
     const i = e;
     i.tabIndex < 0 && (i.tabIndex = 0);
     let n;
-    const r = (l) => {
+    const o = (l) => {
       l ? requestAnimationFrame(() => {
         document.activeElement !== i && i.focus();
       }) : document.activeElement === i && i.blur();
     };
     if (typeof t == "function") {
       const l = t;
-      if (r(l()), l.subscribe)
+      if (o(l()), l.subscribe)
         n = l.subscribe((c) => {
-          r(c);
+          o(c);
         });
       else if (process.env.NODE_ENV !== "test") {
         let c = l(), u = !0;
         const f = () => {
           if (!u) return;
-          const h = l();
-          h !== c && (c = h, r(h)), u && requestAnimationFrame(f);
+          const m = l();
+          m !== c && (c = m, o(m)), u && requestAnimationFrame(f);
         };
         n = () => {
           u = !1;
@@ -4295,17 +4300,17 @@ class $n extends w {
         n = () => {
         };
     } else
-      r(t);
+      o(t);
     const a = () => {
       n && n();
     };
     e._focusedCleanup = a;
   }
 }
-function Vn(o) {
-  return new $n({ focused: o });
+function Rn(r) {
+  return new Vn({ focused: r });
 }
-class Rn extends w {
+class Dn extends w {
   constructor(e = {}) {
     const t = {
       ...e,
@@ -4320,17 +4325,17 @@ class Rn extends w {
   }
   setupFocusable(e, t) {
     if (!e || typeof e.focus != "function") return;
-    const i = e, n = t.isFocusable ?? !0, r = t.interactions ?? [];
+    const i = e, n = t.isFocusable ?? !0, o = t.interactions ?? [];
     if (n) {
       i.tabIndex < 0 && (i.tabIndex = 0);
       const a = i.getAttribute("role");
-      if (r.includes("edit") ? (a || i.setAttribute("role", "textbox"), i.setAttribute("contenteditable", "true"), i.setAttribute(
+      if (o.includes("edit") ? (a || i.setAttribute("role", "textbox"), i.setAttribute("contenteditable", "true"), i.setAttribute(
         "aria-label",
         i.getAttribute("aria-label") || "Editable content"
-      )) : r.includes("activate") && (a || i.setAttribute("role", "button"), i.setAttribute(
+      )) : o.includes("activate") && (a || i.setAttribute("role", "button"), i.setAttribute(
         "aria-label",
         i.getAttribute("aria-label") || "Activatable element"
-      )), r.includes("activate")) {
+      )), o.includes("activate")) {
         const l = (u) => {
           (u.key === " " || u.key === "Enter") && (u.preventDefault(), i.click());
         };
@@ -4350,17 +4355,17 @@ class Rn extends w {
     }
   }
 }
-function me(o, s) {
-  return new Rn({
-    isFocusable: o ?? !0,
+function he(r, s) {
+  return new Dn({
+    isFocusable: r ?? !0,
     interactions: s ?? []
   });
 }
-function Dn() {
-  return me(!0, ["activate"]);
-}
 function On() {
-  return me(!0, ["edit"]);
+  return he(!0, ["activate"]);
+}
+function Bn() {
+  return he(!0, ["edit"]);
 }
 class _n extends w {
   constructor() {
@@ -4374,26 +4379,26 @@ class _n extends w {
   setupContinuousHover(e, t) {
     const i = t.coordinateSpace ?? "local";
     let n = !1;
-    const r = (f) => {
+    const o = (f) => {
       if (i === "global")
         return {
           x: f.clientX,
           y: f.clientY
         };
       {
-        const h = e.getBoundingClientRect();
+        const m = e.getBoundingClientRect();
         return {
-          x: f.clientX - h.left,
-          y: f.clientY - h.top
+          x: f.clientX - m.left,
+          y: f.clientY - m.top
         };
       }
     }, a = (f) => {
       n = !0;
-      const y = r(f);
+      const y = o(f);
       t.perform(y);
     }, l = (f) => {
       if (!n) return;
-      const y = r(f);
+      const y = o(f);
       t.perform(y);
     }, c = () => {
       n = !1, t.perform(null);
@@ -4411,22 +4416,22 @@ class _n extends w {
     e._continuousHoverCleanup = u;
   }
 }
-function he(o) {
-  return new _n(o);
+function me(r) {
+  return new _n(r);
 }
-function _r(o) {
-  return he({
+function _o(r) {
+  return me({
     coordinateSpace: "local",
-    perform: o
+    perform: r
   });
 }
-function Br(o) {
-  return he({
+function Ho(r) {
+  return me({
     coordinateSpace: "global",
-    perform: o
+    perform: r
   });
 }
-class Bn extends w {
+class Hn extends w {
   constructor() {
     super(...arguments);
     d(this, "type", "allowsHitTesting");
@@ -4441,90 +4446,90 @@ class Bn extends w {
     t ? i.style.pointerEvents === "none" && (i.style.pointerEvents = "") : i.style.pointerEvents = "none", e._hitTestingEnabled = t;
   }
 }
-function ye(o) {
-  return new Bn({ enabled: o });
+function ye(r) {
+  return new Hn({ enabled: r });
 }
-function Hr() {
+function zo() {
   return ye(!0);
 }
-function Nr() {
+function Fo() {
   return ye(!1);
 }
-function Hn(o, s) {
+function zn(r, s) {
   return new C({
-    highPriorityGesture: { gesture: o, including: s }
+    highPriorityGesture: { gesture: r, including: s }
   });
 }
-function Nn(o, s) {
+function Fn(r, s) {
   return new C({
-    simultaneousGesture: { gesture: o, including: s }
+    simultaneousGesture: { gesture: r, including: s }
   });
 }
-function zn(o) {
-  return new C({ onTap: o });
+function Nn(r) {
+  return new C({ onTap: r });
 }
-function zr(o) {
-  return new C({ onFocus: o });
+function No(r) {
+  return new C({ onFocus: r });
 }
-function Fr(o) {
-  return new C({ onBlur: o });
+function Wo(r) {
+  return new C({ onBlur: r });
 }
-function Fn(o) {
-  return new C({ onScroll: o });
+function Wn(r) {
+  return new C({ onScroll: r });
 }
-function Wr(o) {
-  return new C({ onKeyDown: o });
+function jo(r) {
+  return new C({ onKeyDown: r });
 }
-function jr(o) {
-  return new C({ onKeyPress: o });
+function Uo(r) {
+  return new C({ onKeyPress: r });
 }
-function Ur(o) {
-  return new C({ onKeyUp: o });
+function Go(r) {
+  return new C({ onKeyUp: r });
 }
-function Gr(o) {
-  return new C({ onDoubleClick: o });
+function Ko(r) {
+  return new C({ onDoubleClick: r });
 }
-function Kr(o) {
-  return new C({ onContextMenu: o });
+function Yo(r) {
+  return new C({ onContextMenu: r });
 }
-function Wn(o) {
-  return new C({ onWheel: o });
+function jn(r) {
+  return new C({ onWheel: r });
 }
-function jn(o) {
-  return new C({ onInput: o });
+function Un(r) {
+  return new C({ onInput: r });
 }
-function Un(o) {
-  return new C({ onChange: o });
+function Gn(r) {
+  return new C({ onChange: r });
 }
-function Gn(o) {
-  return new C({ onCopy: o });
+function Kn(r) {
+  return new C({ onCopy: r });
 }
-function Kn(o) {
-  return new C({ onCut: o });
+function Yn(r) {
+  return new C({ onCut: r });
 }
-function Yn(o) {
-  return new C({ onPaste: o });
+function Xn(r) {
+  return new C({ onPaste: r });
 }
-function Xn(o) {
-  return new C({ onSelect: o });
+function Zn(r) {
+  return new C({ onSelect: r });
 }
-function Zn(o) {
-  return new C({ onTouchStart: o });
+function qn(r) {
+  return new C({ onTouchStart: r });
 }
-function qn(o) {
-  return new C({ onTouchMove: o });
+function Jn(r) {
+  return new C({ onTouchMove: r });
 }
-function Jn(o) {
-  return new C({ onTouchEnd: o });
+function Qn(r) {
+  return new C({ onTouchEnd: r });
 }
-function Qn(o) {
-  return new C({ onSwipeLeft: o });
+function er(r) {
+  return new C({ onSwipeLeft: r });
 }
-function eo(o) {
-  return new C({ onSwipeRight: o });
+function tr(r) {
+  return new C({ onSwipeRight: r });
 }
-function to(o = !0) {
-  return new C({ disabled: o });
+function ir(r = !0) {
+  return new C({ disabled: r });
 }
 class G extends g {
   // Lower priority for utility properties
@@ -4567,26 +4572,26 @@ class G extends g {
     );
   }
 }
-function io(o) {
-  return new G(o);
+function nr(r) {
+  return new G(r);
 }
-function no(o) {
-  return new G({ cursor: o });
+function rr(r) {
+  return new G({ cursor: r });
 }
-function oo(o) {
-  return new G({ overflowY: o });
+function or(r) {
+  return new G({ overflowY: r });
 }
-function ro(o) {
-  return new G({ overflowX: o });
+function sr(r) {
+  return new G({ overflowX: r });
 }
-function so(o) {
-  return new G({ display: o });
+function ar(r) {
+  return new G({ display: r });
 }
-function ao(o) {
-  return new G({ outline: o });
+function lr(r) {
+  return new G({ outline: r });
 }
-function lo(o) {
-  return new G({ outlineOffset: o });
+function cr(r) {
+  return new G({ outlineOffset: r });
 }
 class ae extends g {
   // Very low priority so raw CSS doesn't override specific modifiers
@@ -4607,24 +4612,24 @@ class ae extends g {
     const t = {};
     for (const [i, n] of Object.entries(e))
       if (n !== void 0) {
-        const r = this.toCSSProperty(i);
-        t[r] = this.toCSSValue(n);
+        const o = this.toCSSProperty(i);
+        t[o] = this.toCSSValue(n);
       }
     return t;
   }
 }
-function co(o) {
-  return new ae(o);
+function dr(r) {
+  return new ae(r);
 }
-function fo(o, s) {
-  return new ae({ [o]: s });
+function fr(r, s) {
+  return new ae({ [r]: s });
 }
-function uo(o, s) {
-  const e = o.startsWith("--") ? o : `--${o}`;
+function ur(r, s) {
+  const e = r.startsWith("--") ? r : `--${r}`;
   return new ae({ [e]: s });
 }
-function Yr(o, s, e) {
-  const t = o.charAt(0).toUpperCase() + o.slice(1), i = `-${o.toLowerCase()}-${s}`, n = t + s.charAt(0).toUpperCase() + s.slice(1);
+function Xo(r, s, e) {
+  const t = r.charAt(0).toUpperCase() + r.slice(1), i = `-${r.toLowerCase()}-${s}`, n = t + s.charAt(0).toUpperCase() + s.slice(1);
   return new ae({
     [i]: e,
     [n]: e
@@ -4671,12 +4676,12 @@ class ee {
       s.remove();
       return;
     }
-    const n = this.getAllowedAttributesForTag(t, e), r = [];
+    const n = this.getAllowedAttributesForTag(t, e), o = [];
     for (let l = 0; l < s.attributes.length; l++) {
       const c = s.attributes[l];
-      n.includes(c.name) && this.isAttributeValueSafe(c.name, c.value) || r.push(c.name);
+      n.includes(c.name) && this.isAttributeValueSafe(c.name, c.value) || o.push(c.name);
     }
-    r.forEach((l) => s.removeAttribute(l)), Array.from(s.children).forEach((l) => this.cleanElement(l, e));
+    o.forEach((l) => s.removeAttribute(l)), Array.from(s.children).forEach((l) => this.cleanElement(l, e));
   }
   /**
    * Get allowed attributes for a specific tag
@@ -4785,8 +4790,8 @@ d(ee, "DANGEROUS_PATTERNS", [
   td: ["colspan", "rowspan"],
   th: ["colspan", "rowspan", "scope"]
 });
-function Xr(o, s) {
-  return ee.sanitize(o, s);
+function Zo(r, s) {
+  return ee.sanitize(r, s);
 }
 class _e {
   /**
@@ -4830,7 +4835,7 @@ d(_e, "SUSPICIOUS_PATTERNS", [
   { pattern: /@import/i, message: "CSS import statements detected" },
   { pattern: /expression\s*\(/i, message: "CSS expressions detected" }
 ]);
-class po extends g {
+class pr extends g {
   // Early priority to apply before other modifiers
   constructor(e = {}) {
     super(e);
@@ -4849,10 +4854,10 @@ class po extends g {
       process.env.NODE_ENV === "development" && console.warn("asHTML: No content found in Text component");
       return;
     }
-    const r = this.sanitizeHTML(n);
+    const o = this.sanitizeHTML(n);
     for (; t.element.firstChild; )
       t.element.removeChild(t.element.firstChild);
-    t.element.innerHTML = r, t.element.__tachui_asHTML = !0, process.env.NODE_ENV === "development" && this.validateContent(n);
+    t.element.innerHTML = o, t.element.__tachui_asHTML = !0, process.env.NODE_ENV === "development" && this.validateContent(n);
   }
   isTextComponent(e) {
     return e.type === "Text" || e.constructor?.name === "TextComponent" || e.__tachui_component_type === "Text" || e.props && e.props.__componentType === "Text" || // Check componentMetadata for enhanced Text components (primary check for new Text components)
@@ -4902,25 +4907,25 @@ class po extends g {
     }), console.warn("Consider using a more comprehensive sanitization solution like DOMPurify"), console.warn("To suppress these warnings, use { __suppressWarnings: true }"), console.groupEnd()), this.properties.skipSanitizer && console.warn("🚨 AsHTML: Sanitization is DISABLED. Ensure content is safe!");
   }
 }
-function mo(o = {}) {
-  return new po(o);
+function hr(r = {}) {
+  return new pr(r);
 }
-function ho(o) {
-  return new B({
-    navigationTitle: o,
+function mr(r) {
+  return new _({
+    navigationTitle: r,
     role: "heading"
   });
 }
-function yo(o = !0) {
-  return new B({
-    navigationBarHidden: o,
-    "aria-hidden": o.toString()
+function yr(r = !0) {
+  return new _({
+    navigationBarHidden: r,
+    "aria-hidden": r.toString()
   });
 }
-function go(o) {
-  return new B({ navigationBarItems: o });
+function gr(r) {
+  return new _({ navigationBarItems: r });
 }
-class vo extends g {
+class vr extends g {
   // High priority for HTML attributes
   constructor(e) {
     super(e);
@@ -4944,10 +4949,10 @@ class vo extends g {
     );
   }
 }
-function de(o) {
-  return new vo({ id: o });
+function de(r) {
+  return new vr({ id: r });
 }
-class bo extends g {
+class br extends g {
   // High priority for HTML attributes
   constructor(e) {
     super(e);
@@ -4957,8 +4962,8 @@ class bo extends g {
   apply(e, t) {
     if (!t.element) return;
     const { data: i } = this.properties;
-    typeof process < "u" && process.env.NODE_ENV === "development" && this.validateDataAttributes(i), Object.entries(i).forEach(([n, r]) => {
-      const a = this.formatDataAttributeName(n), l = this.formatDataAttributeValue(r);
+    typeof process < "u" && process.env.NODE_ENV === "development" && this.validateDataAttributes(i), Object.entries(i).forEach(([n, o]) => {
+      const a = this.formatDataAttributeName(n), l = this.formatDataAttributeValue(o);
       t.element.setAttribute(a, l);
     });
   }
@@ -4986,10 +4991,10 @@ class bo extends g {
     });
   }
 }
-function So(o) {
-  return new bo({ data: o });
+function Sr(r) {
+  return new br({ data: r });
 }
-class wo extends g {
+class wr extends g {
   // High priority for accessibility
   constructor(e) {
     super(e);
@@ -5013,8 +5018,8 @@ class wo extends g {
     );
   }
 }
-function Co(o) {
-  return new wo({ tabIndex: o });
+function Cr(r) {
+  return new wr({ tabIndex: r });
 }
 const se = class se extends g {
   constructor(e) {
@@ -5025,9 +5030,9 @@ const se = class se extends g {
   apply(e, t) {
     if (!t.element) return;
     const { aria: i } = this.properties;
-    typeof process < "u" && process.env.NODE_ENV === "development" && this.validateAriaAttributes(i), Object.entries(i).forEach(([n, r]) => {
-      if (r != null) {
-        const a = this.formatAriaAttributeName(n), l = this.formatAriaAttributeValue(r);
+    typeof process < "u" && process.env.NODE_ENV === "development" && this.validateAriaAttributes(i), Object.entries(i).forEach(([n, o]) => {
+      if (o != null) {
+        const a = this.formatAriaAttributeName(n), l = this.formatAriaAttributeValue(o);
         t.element.setAttribute(a, l);
       }
     });
@@ -5079,9 +5084,9 @@ const se = class se extends g {
         );
         break;
       case "current":
-        const r = ["page", "step", "location", "date", "time"];
-        typeof t == "string" && !r.includes(t) && console.warn(
-          `TachUI ARIA Modifier: Invalid value "${t}" for aria-current. Valid values are: false, true, ${r.join(", ")}`
+        const o = ["page", "step", "location", "date", "time"];
+        typeof t == "string" && !o.includes(t) && console.warn(
+          `TachUI ARIA Modifier: Invalid value "${t}" for aria-current. Valid values are: false, true, ${o.join(", ")}`
         );
         break;
       case "invalid":
@@ -5180,23 +5185,23 @@ d(se, "KNOWN_ATTRIBUTES", /* @__PURE__ */ new Set([
   "role"
 ]));
 let fe = se;
-function q(o) {
-  return new fe({ aria: o });
+function q(r) {
+  return new fe({ aria: r });
 }
-function Eo(o) {
-  return q({ role: o });
+function Er(r) {
+  return q({ role: r });
 }
-function xo(o) {
-  return q({ label: o });
+function xr(r) {
+  return q({ label: r });
 }
-function Mo(o) {
-  return q({ live: o });
+function Tr(r) {
+  return q({ live: r });
 }
-function To(o) {
-  return q({ describedby: o });
+function Mr(r) {
+  return q({ describedby: r });
 }
-function Lo(o) {
-  return q({ modal: o });
+function Lr(r) {
+  return q({ modal: r });
 }
 class te extends g {
   // Early application for CSS variables
@@ -5207,13 +5212,13 @@ class te extends g {
   }
   apply(e, t) {
     if (!t.element) return;
-    const i = this.computeCustomPropertyStyles(this.properties), n = t.element, r = (typeof HTMLElement < "u" && n instanceof HTMLElement, n.style);
-    if (r && typeof r.setProperty == "function") {
+    const i = this.computeCustomPropertyStyles(this.properties), n = t.element, o = (typeof HTMLElement < "u" && n instanceof HTMLElement, n.style);
+    if (o && typeof o.setProperty == "function") {
       for (const [a, l] of Object.entries(i)) {
         const c = a.startsWith("--") ? a.slice(2) : a, u = `--${this.toCSSProperty(c)}`;
-        r.setProperty(u, l);
+        o.setProperty(u, l);
         try {
-          r[u] = l;
+          o[u] = l;
         } catch {
         }
       }
@@ -5224,35 +5229,35 @@ class te extends g {
   computeCustomPropertyStyles(e) {
     const t = {};
     return Object.entries(e.properties).forEach(([i, n]) => {
-      const r = i.startsWith("--") ? i : `--${i}`;
-      t[r] = this.formatPropertyValue(n);
+      const o = i.startsWith("--") ? i : `--${i}`;
+      t[o] = this.formatPropertyValue(n);
     }), t;
   }
   formatPropertyValue(e) {
     return typeof e == "number" ? e.toString() : String(e);
   }
 }
-function Ao(o) {
+function kr(r) {
   return new te({
-    properties: o.properties,
-    scope: o.scope || "local"
+    properties: r.properties,
+    scope: r.scope || "local"
   });
 }
-function ko(o, s, e) {
+function Ar(r, s, e) {
   return new te({
-    properties: { [o]: s },
+    properties: { [r]: s },
     scope: e || "local"
   });
 }
-function Io(o) {
+function Ir(r) {
   return new te({
-    properties: o,
+    properties: r,
     scope: "local"
   });
 }
-function Zr(o) {
+function qo(r) {
   const s = {};
-  return Object.entries(o).forEach(([e, t]) => {
+  return Object.entries(r).forEach(([e, t]) => {
     if (t !== void 0) {
       const i = e.replace(
         /[A-Z]/g,
@@ -5265,9 +5270,9 @@ function Zr(o) {
     scope: "local"
   });
 }
-function qr(o) {
+function Jo(r) {
   const s = {};
-  return Object.entries(o).forEach(([e, t]) => {
+  return Object.entries(r).forEach(([e, t]) => {
     t !== void 0 && (s[`--token-${e}`] = t);
   }), new te({
     properties: s,
@@ -5286,21 +5291,21 @@ const W = class W extends w {
     t.element.classList.add(i), this.properties.before && this.addPseudoElementRule(i, "before", this.properties.before), this.properties.after && this.addPseudoElementRule(i, "after", this.properties.after);
   }
   addPseudoElementRule(e, t, i) {
-    const n = this.getOrCreateStyleSheet(), r = this.generatePseudoElementCSS(e, t, i);
+    const n = this.getOrCreateStyleSheet(), o = this.generatePseudoElementCSS(e, t, i);
     try {
-      n.insertRule(r);
+      n.insertRule(o);
     } catch (a) {
       (typeof process > "u" || process.env.NODE_ENV !== "test") && console.warn("Failed to add pseudo-element rule:", a);
     }
   }
   generatePseudoElementCSS(e, t, i) {
-    const n = `.${e}::${t}`, r = [];
+    const n = `.${e}::${t}`, o = [];
     return i.content || (i.content = '""'), Object.entries(i).forEach(([a, l]) => {
       if (l !== void 0) {
         const c = this.toCSSProperty(a), u = this.formatCSSValue(a, l);
-        r.push(`${c}: ${u}`);
+        o.push(`${c}: ${u}`);
       }
-    }), `${n} { ${r.join("; ")} }`;
+    }), `${n} { ${o.join("; ")} }`;
   }
   formatCSSValue(e, t) {
     return e === "content" ? typeof t == "string" ? !t.startsWith('"') && !t.startsWith("'") ? `"${t.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"` : t : '""' : typeof t == "number" ? [
@@ -5336,55 +5341,55 @@ const W = class W extends w {
 // High priority to ensure pseudo-elements are applied last
 d(W, "styleSheetId", "tachui-pseudo-elements"), d(W, "elementCount", 0);
 let X = W;
-function J(o) {
-  return new X({ before: o });
+function J(r) {
+  return new X({ before: r });
 }
-function ie(o) {
-  return new X({ after: o });
+function ie(r) {
+  return new X({ after: r });
 }
-function Po(o) {
-  return new X(o);
+function Pr(r) {
+  return new X(r);
 }
-function $o(o, s = {}) {
+function $r(r, s = {}) {
   return J({
-    content: o,
+    content: r,
     display: "inline-block",
     ...s
   });
 }
-function Vo(o, s = {}) {
+function Vr(r, s = {}) {
   return ie({
-    content: o,
+    content: r,
     display: "inline-block",
     ...s
   });
 }
-function Ro(o = "#ddd", s = 1, e = 16) {
+function Rr(r = "#ddd", s = 1, e = 16) {
   return J({
     content: "",
     display: "inline-block",
     width: e,
     height: s,
-    backgroundColor: o,
+    backgroundColor: r,
     marginRight: 8,
     verticalAlign: "middle"
   });
 }
-function Do(o = "#ddd", s = 1, e = 16) {
+function Dr(r = "#ddd", s = 1, e = 16) {
   return ie({
     content: "",
     display: "inline-block",
     width: e,
     height: s,
-    backgroundColor: o,
+    backgroundColor: r,
     marginLeft: 8,
     verticalAlign: "middle"
   });
 }
-function Oo(o = '"', s = '"') {
+function Or(r = '"', s = '"') {
   return new X({
     before: {
-      content: o,
+      content: r,
       fontSize: "1.2em",
       color: "#666",
       marginRight: 4
@@ -5397,7 +5402,7 @@ function Oo(o = '"', s = '"') {
     }
   });
 }
-function _o(o = "currentColor", s = 1, e = 1) {
+function Br(r = "currentColor", s = 1, e = 1) {
   return ie({
     content: "",
     position: "absolute",
@@ -5405,11 +5410,11 @@ function _o(o = "currentColor", s = 1, e = 1) {
     left: 0,
     right: 0,
     height: s,
-    backgroundColor: o,
+    backgroundColor: r,
     opacity: e
   });
 }
-function Bo(o = "#ff3b30", s = 6, e = "") {
+function _r(r = "#ff3b30", s = 6, e = "") {
   return ie({
     content: e,
     position: "absolute",
@@ -5418,7 +5423,7 @@ function Bo(o = "#ff3b30", s = 6, e = "") {
     width: e ? "auto" : s,
     height: s,
     minWidth: s,
-    backgroundColor: o,
+    backgroundColor: r,
     borderRadius: "50%",
     fontSize: 10,
     color: "white",
@@ -5430,9 +5435,9 @@ function Bo(o = "#ff3b30", s = 6, e = "") {
     justifyContent: "center"
   });
 }
-function Ho(o, s = "top", e = "#333", t = "white") {
+function Hr(r, s = "top", e = "#333", t = "white") {
   return J({
-    content: o,
+    content: r,
     position: "absolute",
     backgroundColor: e,
     color: t,
@@ -5472,9 +5477,9 @@ function Ho(o, s = "top", e = "#333", t = "white") {
     }[s]
   });
 }
-function No(o, s = "#ff3b30", e = "white") {
+function zr(r, s = "#ff3b30", e = "white") {
   return J({
-    content: o,
+    content: r,
     position: "absolute",
     top: 8,
     right: -8,
@@ -5489,7 +5494,7 @@ function No(o, s = "#ff3b30", e = "white") {
     zIndex: 10
   });
 }
-function zo(o = 20, s = "#007AFF", e = 2) {
+function Fr(r = 20, s = "#007AFF", e = 2) {
   if (!document.getElementById("tachui-spinner-animation")) {
     const t = document.createElement("style");
     t.id = "tachui-spinner-animation", t.textContent = `
@@ -5502,491 +5507,491 @@ function zo(o = 20, s = "#007AFF", e = 2) {
   return J({
     content: "",
     display: "inline-block",
-    width: o,
-    height: o,
+    width: r,
+    height: r,
     border: `${e}px solid transparent`,
     borderTop: `${e}px solid ${s}`,
     borderRadius: "50%",
     animation: "spin 1s linear infinite"
   });
 }
-const Fo = [
+const Nr = [
   // Padding
   ["padding", x],
-  ["paddingTop", Je],
-  ["paddingBottom", Qe],
-  ["paddingLeft", et],
-  ["paddingRight", tt],
-  ["paddingLeading", it],
-  ["paddingTrailing", nt],
+  ["paddingTop", Qe],
+  ["paddingBottom", et],
+  ["paddingLeft", tt],
+  ["paddingRight", it],
+  ["paddingLeading", nt],
+  ["paddingTrailing", rt],
   ["paddingHorizontal", ot],
-  ["paddingVertical", rt],
+  ["paddingVertical", st],
   // Margin
-  ["margin", M],
-  ["marginTop", st],
-  ["marginBottom", at],
-  ["marginLeft", lt],
-  ["marginRight", ct],
-  ["marginLeading", dt],
-  ["marginTrailing", ft],
-  ["marginHorizontal", ut],
-  ["marginVertical", pt],
+  ["margin", T],
+  ["marginTop", at],
+  ["marginBottom", lt],
+  ["marginLeft", ct],
+  ["marginRight", dt],
+  ["marginLeading", ft],
+  ["marginTrailing", ut],
+  ["marginHorizontal", pt],
+  ["marginVertical", ht],
   // Size helpers
   ["size", mt],
-  ["width", ht],
-  ["height", yt],
-  ["maxWidth", gt],
-  ["maxHeight", bt],
-  ["minWidth", vt],
-  ["minHeight", St],
+  ["width", yt],
+  ["height", gt],
+  ["maxWidth", vt],
+  ["maxHeight", St],
+  ["minWidth", bt],
+  ["minHeight", wt],
   // Layout + flexbox
-  ["aspectRatio", Ht],
-  ["fixedSize", Ft],
-  ["frame", Wt],
-  ["resizable", Gt],
-  ["layoutPriority", jt],
-  ["offset", Ot],
-  ["overlay", Qt],
-  ["position", Xt],
-  ["absolutePosition", Ut],
-  ["scaleEffect", Bt],
-  ["zIndex", qt],
+  ["aspectRatio", zt],
+  ["fixedSize", Wt],
+  ["frame", jt],
+  ["resizable", Kt],
+  ["layoutPriority", Ut],
+  ["offset", Bt],
+  ["overlay", ei],
+  ["position", Zt],
+  ["absolutePosition", Gt],
+  ["scaleEffect", Ht],
+  ["zIndex", Jt],
   ["flexbox", I],
-  ["flexGrow", Tt],
-  ["flexShrink", Lt],
+  ["flexGrow", Lt],
+  ["flexShrink", kt],
   ["flexBasis", At],
-  ["justifyContent", kt],
-  ["alignItems", It],
-  ["alignSelf", Pt],
-  ["gap", $t],
-  ["flexDirection", Vt],
-  ["flexWrap", Rt],
+  ["justifyContent", It],
+  ["alignItems", Pt],
+  ["alignSelf", $t],
+  ["gap", Vt],
+  ["flexDirection", Rt],
+  ["flexWrap", Dt],
   // Appearance
-  ["backgroundColor", ii],
-  ["background", ni],
+  ["backgroundColor", ni],
+  ["background", ri],
   ["backgroundImage", oi],
-  ["blendMode", ai],
-  ["backgroundBlendMode", li],
-  ["compositingGroup", di],
-  ["border", ui],
-  ["borderTop", pi],
-  ["borderBottom", hi],
-  ["borderLeft", yi],
+  ["blendMode", li],
+  ["backgroundBlendMode", ci],
+  ["compositingGroup", fi],
+  ["border", pi],
+  ["borderTop", hi],
+  ["borderBottom", yi],
+  ["borderLeft", gi],
   ["borderRight", mi],
-  ["clipShape", bi],
-  ["clipped", wi],
-  ["cornerRadius", Ei],
-  ["foregroundColor", gi],
+  ["clipShape", Si],
+  ["clipped", Ci],
+  ["cornerRadius", xi],
+  ["foregroundColor", vi],
   ["gradientText", Z],
-  ["opacity", Ci],
-  ["fontFamily", xi],
+  ["opacity", Ei],
+  ["fontFamily", Ti],
   ["fontSize", Mi],
-  ["fontWeight", Ti],
-  ["fontStyle", Li],
+  ["fontWeight", Li],
+  ["fontStyle", ki],
   ["fontPreset", Ai],
   // Typography
-  ["typography", Pi],
-  ["textAlign", $i],
-  ["font", Ni],
-  ["lineClamp", Wi],
-  ["wordBreak", Ui],
-  ["letterSpacing", Di],
-  ["lineHeight", Ri],
-  ["textDecoration", Vi],
-  ["textOverflow", Oi],
-  ["textTransform", De],
-  ["textCase", Hi],
+  ["typography", $i],
+  ["textAlign", Vi],
+  ["font", Fi],
+  ["lineClamp", ji],
+  ["wordBreak", Gi],
+  ["letterSpacing", Oi],
+  ["lineHeight", Di],
+  ["textDecoration", Ri],
+  ["textOverflow", Bi],
+  ["textTransform", Oe],
+  ["textCase", zi],
   ["whiteSpace", _i],
-  ["overflow", Bi],
-  ["hyphens", Xi],
-  ["overflowWrap", Ki],
+  ["overflow", Hi],
+  ["hyphens", Zi],
+  ["overflowWrap", Yi],
   // Interaction
   ["allowsHitTesting", ye],
-  ["focusable", me],
-  ["activatable", Dn],
-  ["editable", On],
-  ["focused", Vn],
-  ["keyboardShortcut", Oe],
-  ["onHover", sn],
-  ["onMouseEnter", pn],
+  ["focusable", he],
+  ["activatable", On],
+  ["editable", Bn],
+  ["focused", Rn],
+  ["keyboardShortcut", Be],
+  ["onHover", an],
+  ["onMouseEnter", hn],
   ["onMouseLeave", mn],
-  ["onMouseDown", hn],
-  ["onMouseUp", yn],
-  ["onDoubleClick", gn],
-  ["onContextMenu", vn],
-  ["onKeyDown", Cn],
-  ["onKeyUp", En],
-  ["onKeyPress", xn],
-  ["onFocus", Ln],
+  ["onMouseDown", yn],
+  ["onMouseUp", gn],
+  ["onDoubleClick", vn],
+  ["onContextMenu", bn],
+  ["onKeyDown", En],
+  ["onKeyUp", xn],
+  ["onKeyPress", Tn],
+  ["onFocus", kn],
   ["onBlur", An],
-  ["onContinuousHover", he],
-  ["onLongPressGesture", In],
-  ["scroll", Zi],
-  ["scrollBehavior", qi],
-  ["overscrollBehavior", Ji],
-  ["overscrollBehaviorX", Qi],
-  ["overscrollBehaviorY", en],
-  ["scrollMargin", tn],
-  ["scrollPadding", nn],
+  ["onContinuousHover", me],
+  ["onLongPressGesture", Pn],
+  ["scroll", qi],
+  ["scrollBehavior", Ji],
+  ["overscrollBehavior", Qi],
+  ["overscrollBehaviorX", en],
+  ["overscrollBehaviorY", tn],
+  ["scrollMargin", nn],
+  ["scrollPadding", rn],
   ["scrollSnap", on],
-  ["highPriorityGesture", Hn],
-  ["simultaneousGesture", Nn],
-  ["onTap", zn],
-  ["onScroll", Fn],
-  ["onWheel", Wn],
-  ["onInput", jn],
-  ["onChange", Un],
-  ["onCopy", Gn],
-  ["onCut", Kn],
-  ["onPaste", Yn],
-  ["onSelect", Xn],
-  ["onTouchStart", Zn],
-  ["onTouchMove", qn],
-  ["onTouchEnd", Jn],
-  ["onSwipeLeft", Qn],
-  ["onSwipeRight", eo],
-  ["disabled", to],
+  ["highPriorityGesture", zn],
+  ["simultaneousGesture", Fn],
+  ["onTap", Nn],
+  ["onScroll", Wn],
+  ["onWheel", jn],
+  ["onInput", Un],
+  ["onChange", Gn],
+  ["onCopy", Kn],
+  ["onCut", Yn],
+  ["onPaste", Xn],
+  ["onSelect", Zn],
+  ["onTouchStart", qn],
+  ["onTouchMove", Jn],
+  ["onTouchEnd", Qn],
+  ["onSwipeLeft", er],
+  ["onSwipeRight", tr],
+  ["disabled", ir],
   // Utility
-  ["css", co],
-  ["cssProperty", fo],
-  ["cssVariable", uo],
-  ["utility", io],
-  ["cursor", no],
-  ["display", so],
-  ["overflowX", ro],
-  ["overflowY", oo],
-  ["outline", ao],
-  ["outlineOffset", lo],
-  ["asHTML", mo],
-  ["navigationTitle", ho],
-  ["navigationBarHidden", yo],
-  ["navigationBarItems", go],
-  ["animation", Et],
-  ["transform", Ct],
-  ["transitions", xt],
-  ["transition", wt],
+  ["css", dr],
+  ["cssProperty", fr],
+  ["cssVariable", ur],
+  ["utility", nr],
+  ["cursor", rr],
+  ["display", ar],
+  ["overflowX", sr],
+  ["overflowY", or],
+  ["outline", lr],
+  ["outlineOffset", cr],
+  ["asHTML", hr],
+  ["navigationTitle", mr],
+  ["navigationBarHidden", yr],
+  ["navigationBarItems", gr],
+  ["animation", xt],
+  ["transform", Et],
+  ["transitions", Tt],
+  ["transition", Ct],
   // Attributes
   ["aria", q],
-  ["ariaLabel", xo],
-  ["ariaLive", Mo],
-  ["ariaDescribedBy", To],
-  ["ariaModal", Lo],
-  ["role", Eo],
-  ["customProperties", Ao],
-  ["customProperty", ko],
-  ["cssVariables", Io],
+  ["ariaLabel", xr],
+  ["ariaLive", Tr],
+  ["ariaDescribedBy", Mr],
+  ["ariaModal", Lr],
+  ["role", Er],
+  ["customProperties", kr],
+  ["customProperty", Ar],
+  ["cssVariables", Ir],
   ["id", de],
   ["elementId", de],
   ["viewId", de],
-  ["data", So],
-  ["tabIndex", Co],
+  ["data", Sr],
+  ["tabIndex", Cr],
   // Elements / pseudo elements
   ["before", J],
   ["after", ie],
-  ["pseudoElements", Po],
-  ["iconBefore", $o],
-  ["iconAfter", Vo],
-  ["lineBefore", Ro],
-  ["lineAfter", Do],
-  ["quotes", Oo],
-  ["underline", _o],
-  ["badge", Bo],
-  ["tooltip", Ho],
-  ["cornerRibbon", No],
-  ["spinner", zo],
+  ["pseudoElements", Pr],
+  ["iconBefore", $r],
+  ["iconAfter", Vr],
+  ["lineBefore", Rr],
+  ["lineAfter", Dr],
+  ["quotes", Or],
+  ["underline", Br],
+  ["badge", _r],
+  ["tooltip", Hr],
+  ["cornerRibbon", zr],
+  ["spinner", Fr],
   // Lifecycle
   ["task", Mt]
 ];
-function Wo(o) {
-  const s = o?.registry ?? ze;
+function Wr(r) {
+  const s = r?.registry ?? Ne;
   s.registerPlugin?.({
     name: "@tachui/modifiers",
-    version: qe,
+    version: Je,
     author: "tachUI Team",
     verified: !0
-  }), Fo.forEach(([e, t]) => {
+  }), Nr.forEach(([e, t]) => {
     s.has(e) || s.register(e, t);
   });
 }
-Wo();
+Wr();
 export {
-  Dr as $,
-  Ie as A,
-  qt as B,
-  Te as C,
-  Qt as D,
-  Ni as E,
+  Oo as $,
+  Pe as A,
+  Jt as B,
+  Me as C,
+  ei as D,
+  Fi as E,
   R as F,
-  Pi as G,
-  $i as H,
-  De as I,
-  Vi as J,
-  Ir as K,
-  Pr as L,
+  $i as G,
+  Vi as H,
+  Oe as I,
+  Ri as J,
+  Po as K,
+  $o as L,
   V as M,
-  Ri as N,
-  Dt as O,
-  Yt as P,
-  Di as Q,
-  $r as R,
+  Di as N,
+  Ot as O,
+  Xt as P,
+  Oi as Q,
+  Vo as R,
   _t as S,
-  k as T,
-  Oi as U,
+  A as T,
+  Bi as U,
   _i as V,
-  Bi as W,
-  Hi as X,
-  Vr as Y,
-  Pe as Z,
-  Rr as _,
-  Tt as a,
-  pn as a$,
-  Fi as a0,
-  Wi as a1,
-  ji as a2,
-  Ui as a3,
-  Gi as a4,
-  Ki as a5,
-  Yi as a6,
-  Xi as a7,
-  $e as a8,
-  ti as a9,
-  Tr as aA,
-  Lr as aB,
-  Ar as aC,
-  Re as aD,
-  gi as aE,
-  kr as aF,
-  vi as aG,
-  bi as aH,
-  Si as aI,
-  wi as aJ,
+  Hi as W,
+  zi as X,
+  Ro as Y,
+  $e as Z,
+  Do as _,
+  Lt as a,
+  hn as a$,
+  Wi as a0,
+  ji as a1,
+  Ui as a2,
+  Gi as a3,
+  Ki as a4,
+  Yi as a5,
+  Xi as a6,
+  Zi as a7,
+  Ve as a8,
+  ii as a9,
+  Lo as aA,
+  ko as aB,
+  Ao as aC,
+  De as aD,
+  vi as aE,
+  Io as aF,
+  bi as aG,
+  Si as aH,
+  wi as aI,
+  Ci as aJ,
   H as aK,
-  Zi as aL,
-  qi as aM,
-  Ji as aN,
-  Qi as aO,
-  en as aP,
-  tn as aQ,
-  nn as aR,
+  qi as aL,
+  Ji as aM,
+  Qi as aN,
+  en as aO,
+  tn as aP,
+  nn as aQ,
+  rn as aR,
   on as aS,
-  rn as aT,
-  sn as aU,
-  an as aV,
-  ln as aW,
-  cn as aX,
-  dn as aY,
-  fn as aZ,
-  un as a_,
-  Ve as aa,
-  ii as ab,
-  ni as ac,
+  sn as aT,
+  an as aU,
+  ln as aV,
+  cn as aW,
+  dn as aX,
+  fn as aY,
+  un as aZ,
+  pn as a_,
+  Re as aa,
+  ni as ab,
+  ri as ac,
   oi as ad,
-  vr as ae,
+  bo as ae,
   Z as af,
-  br as ag,
-  Sr as ah,
-  wr as ai,
-  Cr as aj,
-  Er as ak,
-  ri as al,
-  si as am,
-  ai as an,
-  li as ao,
-  ci as ap,
-  di as aq,
-  _ as ar,
-  fi as as,
-  ui as at,
-  pi as au,
+  So as ag,
+  wo as ah,
+  Co as ai,
+  Eo as aj,
+  xo as ak,
+  si as al,
+  ai as am,
+  li as an,
+  ci as ao,
+  di as ap,
+  fi as aq,
+  B as ar,
+  ui as as,
+  pi as at,
+  hi as au,
   mi as av,
-  hi as aw,
-  yi as ax,
-  xr as ay,
-  Mr as az,
-  Fo as b,
-  so as b$,
+  yi as aw,
+  gi as ax,
+  To as ay,
+  Mo as az,
+  Nr as b,
+  ar as b$,
   mn as b0,
-  hn as b1,
-  yn as b2,
-  gn as b3,
-  vn as b4,
-  bn as b5,
-  Sn as b6,
-  wn as b7,
-  Cn as b8,
-  En as b9,
-  zn as bA,
-  zr as bB,
-  Fr as bC,
-  Fn as bD,
-  Wr as bE,
-  jr as bF,
-  Ur as bG,
-  Gr as bH,
-  Kr as bI,
-  Wn as bJ,
-  jn as bK,
-  Un as bL,
-  Gn as bM,
-  Kn as bN,
-  Yn as bO,
-  Xn as bP,
-  Zn as bQ,
-  qn as bR,
-  Jn as bS,
-  Qn as bT,
-  eo as bU,
-  to as bV,
+  yn as b1,
+  gn as b2,
+  vn as b3,
+  bn as b4,
+  Sn as b5,
+  wn as b6,
+  Cn as b7,
+  En as b8,
+  xn as b9,
+  Nn as bA,
+  No as bB,
+  Wo as bC,
+  Wn as bD,
+  jo as bE,
+  Uo as bF,
+  Go as bG,
+  Ko as bH,
+  Yo as bI,
+  jn as bJ,
+  Un as bK,
+  Gn as bL,
+  Kn as bM,
+  Yn as bN,
+  Xn as bO,
+  Zn as bP,
+  qn as bQ,
+  Jn as bR,
+  Qn as bS,
+  er as bT,
+  tr as bU,
+  ir as bV,
   G as bW,
-  io as bX,
-  no as bY,
-  oo as bZ,
-  ro as b_,
-  xn as ba,
+  nr as bX,
+  rr as bY,
+  or as bZ,
+  sr as b_,
+  Tn as ba,
   Mn as bb,
-  Tn as bc,
-  Ln as bd,
+  Ln as bc,
+  kn as bd,
   An as be,
-  kn as bf,
-  In as bg,
-  Pn as bh,
-  Oe as bi,
-  Or as bj,
-  $n as bk,
-  Vn as bl,
-  Rn as bm,
-  me as bn,
-  Dn as bo,
-  On as bp,
+  In as bf,
+  Pn as bg,
+  $n as bh,
+  Be as bi,
+  Bo as bj,
+  Vn as bk,
+  Rn as bl,
+  Dn as bm,
+  he as bn,
+  On as bo,
+  Bn as bp,
   _n as bq,
-  he as br,
-  _r as bs,
-  Br as bt,
-  Bn as bu,
+  me as br,
+  _o as bs,
+  Ho as bt,
+  Hn as bu,
   ye as bv,
-  Hr as bw,
-  Nr as bx,
-  Hn as by,
-  Nn as bz,
-  Lt as c,
-  ft as c$,
-  ao as c0,
-  lo as c1,
+  zo as bw,
+  Fo as bx,
+  zn as by,
+  Fn as bz,
+  kt as c,
+  ut as c$,
+  lr as c0,
+  cr as c1,
   ae as c2,
-  co as c3,
-  fo as c4,
-  uo as c5,
-  Yr as c6,
+  dr as c3,
+  fr as c4,
+  ur as c5,
+  Xo as c6,
   ee as c7,
-  Xr as c8,
-  po as c9,
-  Mo as cA,
-  To as cB,
-  Lo as cC,
+  Zo as c8,
+  pr as c9,
+  Tr as cA,
+  Mr as cB,
+  Lr as cC,
   te as cD,
-  Ao as cE,
-  ko as cF,
-  Io as cG,
-  Zr as cH,
-  qr as cI,
+  kr as cE,
+  Ar as cF,
+  Ir as cG,
+  qo as cH,
+  Jo as cI,
   D as cJ,
   x as cK,
-  Je as cL,
-  Qe as cM,
-  et as cN,
-  tt as cO,
-  it as cP,
-  nt as cQ,
+  Qe as cL,
+  et as cM,
+  tt as cN,
+  it as cO,
+  nt as cP,
+  rt as cQ,
   ot as cR,
-  rt as cS,
-  lr as cT,
+  st as cS,
+  lo as cT,
   O as cU,
-  M as cV,
-  st as cW,
-  at as cX,
-  lt as cY,
-  ct as cZ,
-  dt as c_,
-  mo as ca,
+  T as cV,
+  at as cW,
+  lt as cX,
+  ct as cY,
+  dt as cZ,
+  ft as c_,
+  hr as ca,
   _e as cb,
   X as cc,
   J as cd,
   ie as ce,
-  Po as cf,
-  $o as cg,
-  Vo as ch,
-  Ro as ci,
-  Do as cj,
-  Oo as ck,
-  _o as cl,
-  Bo as cm,
-  Ho as cn,
-  No as co,
-  zo as cp,
-  vo as cq,
+  Pr as cf,
+  $r as cg,
+  Vr as ch,
+  Rr as ci,
+  Dr as cj,
+  Or as ck,
+  Br as cl,
+  _r as cm,
+  Hr as cn,
+  zr as co,
+  Fr as cp,
+  vr as cq,
   de as cr,
-  bo as cs,
-  So as ct,
-  wo as cu,
-  Co as cv,
+  br as cs,
+  Sr as ct,
+  wr as cu,
+  Cr as cv,
   fe as cw,
   q as cx,
-  Eo as cy,
-  xo as cz,
+  Er as cy,
+  xr as cz,
   At as d,
-  ut as d0,
-  pt as d1,
-  cr as d2,
+  pt as d0,
+  ht as d1,
+  co as d2,
   U as d3,
   mt as d4,
-  ht as d5,
-  yt as d6,
-  gt as d7,
-  vt as d8,
-  bt as d9,
-  St as da,
+  yt as d5,
+  gt as d6,
+  vt as d7,
+  bt as d8,
+  St as d9,
+  wt as da,
   le as db,
-  wt as dc,
-  ar as dd,
-  qe as de,
-  Jo as df,
-  er as dg,
-  ir as dh,
-  Ye as di,
-  rr as dj,
-  ho as dk,
-  yo as dl,
-  go as dm,
-  Ct as dn,
-  Et as dp,
-  xt as dq,
+  Ct as dc,
+  ao as dd,
+  Je as de,
+  Jr as df,
+  eo as dg,
+  io as dh,
+  Xe as di,
+  oo as dj,
+  mr as dk,
+  yr as dl,
+  gr as dm,
+  Et as dn,
+  xt as dp,
+  Tt as dq,
   Mt as dr,
   w as ds,
-  mr as dt,
-  hr as du,
+  mo as dt,
+  yo as du,
   C as dv,
-  yr as dw,
-  gr as dx,
-  dr as e,
+  go as dw,
+  vo as dx,
+  fo as e,
   I as f,
-  It as g,
-  Pt as h,
-  $t as i,
-  kt as j,
-  fr as k,
-  ur as l,
-  Vt as m,
-  Rt as n,
-  pr as o,
-  Ot as p,
-  Ht as q,
-  Wo as r,
-  Bt as s,
-  zt as t,
-  Ft as u,
-  Wt as v,
-  jt as w,
-  Ut as x,
-  Gt as y,
-  Xt as z
+  Pt as g,
+  $t as h,
+  Vt as i,
+  It as j,
+  uo as k,
+  po as l,
+  Rt as m,
+  Dt as n,
+  ho as o,
+  Bt as p,
+  zt as q,
+  Wr as r,
+  Ht as s,
+  Nt as t,
+  Wt as u,
+  jt as v,
+  Ut as w,
+  Gt as x,
+  Kt as y,
+  Zt as z
 };