@aggc/ui 0.5.1 → 0.7.0

package/dist/chunks/{UiSkeleton.vue_vue_type_script_setup_true_lang-Lghyrtms.js → UiSkeleton.vue_vue_type_script_setup_true_lang-Dg-HzSqj.js}

@@ -1,33 +1,30 @@
-import { defineComponent as p, openBlock as l, createElementBlock as o, normalizeClass as t, unref as a, renderSlot as y, createElementVNode as d, createBlock as ee, resolveDynamicComponent as ae, toDisplayString as c, createVNode as L, withCtx as te, createTextVNode as E, Fragment as z, renderList as V, createCommentVNode as b, withKeys as U, withModifiers as K, ref as $, useId as se, computed as R, watch as N, onMounted as le, onBeforeUnmount as oe, nextTick as T, normalizeStyle as ne } from "vue";
-import { j as ie, o as g, q as D, n as G, r as i, g as re, f as de, a as X, l as ce, p as ue, b as be, h as ge, i as fe, d as pe } from "./pageHeader-CcJrPX_8.js";
-import { CheckCircle2 as me, TriangleAlert as he, LoaderCircle as ve, Check as q, ChevronDown as ye } from "lucide-vue-next";
-const Ce = ie, Ea = /* @__PURE__ */ p({
+import { defineComponent as m, openBlock as l, createElementBlock as o, normalizeClass as t, unref as a, renderSlot as y, createElementVNode as d, createBlock as ee, resolveDynamicComponent as ae, toDisplayString as c, createVNode as R, withCtx as te, createTextVNode as O, Fragment as $, renderList as V, createCommentVNode as b, withKeys as U, withModifiers as K, ref as B, useId as se, computed as L, watch as N, onMounted as le, onBeforeUnmount as oe, nextTick as T, normalizeStyle as ie } from "vue";
+import { j as re, o as f, q as H, n as Y, r, g as ne, f as de, a as X, l as ce, p as ue, b as be, h as fe, i as ge, d as me } from "./pageHeader-DhPY_hNA.js";
+import { CheckCircle2 as pe, TriangleAlert as ve, LoaderCircle as he, Check as q, ChevronDown as ye } from "lucide-vue-next";
+const Ce = re, Oa = /* @__PURE__ */ m({
   __name: "PageSurface",
   setup(e) {
-    return (s, n) => (l(), o("div", {
+    return (s, i) => (l(), o("div", {
       class: t(a(Ce))
     }, [
       y(s.$slots, "default")
     ], 2));
   }
-}), xe = g({
+}), xe = f({
   base: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     borderRadius: "full",
     borderWidth: "1px",
-    px: "3",
-    py: "1.5",
+    px: "2.5",
+    py: "1",
     fontSize: "xs",
     fontWeight: "700",
     textTransform: "uppercase",
-    letterSpacing: "0.1em",
-    backdropFilter: "blur(16px) saturate(140%)",
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.16)",
-    _dark: {
-      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)"
-    }
+    letterSpacing: "0.06em",
+    lineHeight: "1",
+    whiteSpace: "nowrap"
   },
   variants: {
     tone: {
@@ -50,29 +47,37 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
         bg: "badge.neutralBg",
         color: "badge.neutralText",
         borderColor: "badge.neutralBorder"
+      },
+      danger: {
+        bg: "badge.dangerBg",
+        color: "badge.dangerText",
+        borderColor: "badge.dangerBorder"
       }
     }
   },
   defaultVariants: {
     tone: "neutral"
   }
-}), we = /* @__PURE__ */ p({
+}), ke = /* @__PURE__ */ m({
   __name: "StatusBadge",
   props: {
     tone: { default: "neutral" }
   },
   setup(e) {
     const s = e;
-    return (n, f) => (l(), o("span", {
+    return (i, g) => (l(), o("span", {
       class: t(a(xe)({ tone: s.tone }))
     }, [
-      y(n.$slots, "default")
+      y(i.$slots, "default")
     ], 2));
   }
-}), ke = g({
+}), we = f({
   base: {
     borderWidth: "1px",
-    padding: "5"
+    padding: "5",
+    _dark: {
+      borderColor: "border.default"
+    }
   },
   variants: {
     ok: {
@@ -86,25 +91,26 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       }
     }
   }
-}), Se = (e) => D(G, ke({ ok: e })), Be = i({
+}), Se = (e) => H(Y, we({ ok: e })), ze = r({
   display: "flex",
   justifyContent: "space-between",
   gap: "4",
   alignItems: { base: "flex-start", md: "center" },
   flexDirection: { base: "column", md: "row" },
   mb: "3"
-}), $e = i({
+}), Be = r({
   display: "flex",
   alignItems: "center",
   gap: "3"
-}), ze = g({
+}), $e = f({
   base: {
-    width: "10",
-    height: "10",
+    width: "9",
+    height: "9",
     borderRadius: "full",
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    flexShrink: "0"
   },
   variants: {
     ok: {
@@ -118,11 +124,12 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       }
     }
   }
-}), Ve = i({
+}), Ve = r({
   fontSize: "lg",
   fontWeight: "700",
-  color: "text.primary"
-}), Y = g({
+  color: "text.primary",
+  lineHeight: "1.3"
+}), G = f({
   base: {},
   variants: {
     spaced: {
@@ -130,7 +137,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       false: { mb: "0" }
     }
   }
-}), H = g({
+}), D = f({
   base: {
     fontSize: "sm",
     fontWeight: "700",
@@ -143,7 +150,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       error: { color: "result.errorLabel" }
     }
   }
-}), P = g({
+}), P = f({
   base: {
     display: "grid",
     gap: "1.5",
@@ -156,7 +163,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       error: { color: "result.errorBody" }
     }
   }
-}), Re = ["aria-live", "role"], Le = { key: 2 }, Fa = /* @__PURE__ */ p({
+}), Le = ["aria-live", "role"], Re = { key: 2 }, Ea = /* @__PURE__ */ m({
   __name: "ResultPanel",
   props: {
     ok: { type: Boolean },
@@ -173,158 +180,158 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
   },
   setup(e) {
     const s = e;
-    return (n, f) => (l(), o("div", {
+    return (i, g) => (l(), o("div", {
       class: t(a(Se)(e.ok)),
       "aria-live": s.live ?? "polite",
       role: (s.live ?? "polite") === "off" ? void 0 : "status"
     }, [
       d("div", {
-        class: t(a(Be))
+        class: t(a(ze))
       }, [
         d("div", {
-          class: t(a($e))
+          class: t(a(Be))
         }, [
           d("div", {
-            class: t(a(ze)({ ok: e.ok }))
+            class: t(a($e)({ ok: e.ok }))
           }, [
-            (l(), ee(ae(e.ok ? a(me) : a(he)), { size: 18 }))
+            (l(), ee(ae(e.ok ? a(pe) : a(ve)), { size: 18 }))
           ], 2),
           d("h3", {
             class: t(a(Ve))
           }, c(s.summary), 3)
         ], 2),
-        L(we, {
+        R(ke, {
           tone: e.ok ? "success" : "warning"
         }, {
           default: te(() => [
-            E(c(e.ok ? s.passLabel ?? "Pass" : s.failLabel ?? "Fail"), 1)
+            O(c(e.ok ? s.passLabel ?? "Pass" : s.failLabel ?? "Fail"), 1)
           ]),
           _: 1
         }, 8, ["tone"])
       ], 2),
       e.messages?.length ? (l(), o("div", {
         key: 0,
-        class: t(a(Y)({ spaced: !0 }))
+        class: t(a(G)({ spaced: !0 }))
       }, [
         d("p", {
-          class: t(a(H)({ tone: "detail" }))
+          class: t(a(D)({ tone: "detail" }))
         }, c(s.detailsLabel ?? "Details"), 3),
         d("ul", {
           class: t(a(P)({ tone: "detail" }))
         }, [
-          (l(!0), o(z, null, V(e.messages, (u) => (l(), o("li", { key: u }, c(u), 1))), 128))
+          (l(!0), o($, null, V(e.messages, (u) => (l(), o("li", { key: u }, c(u), 1))), 128))
         ], 2)
       ], 2)) : b("", !0),
       e.warnings?.length ? (l(), o("div", {
         key: 1,
-        class: t(a(Y)({ spaced: !!e.errors?.length }))
+        class: t(a(G)({ spaced: !!e.errors?.length }))
       }, [
         d("p", {
-          class: t(a(H)({ tone: "warning" }))
+          class: t(a(D)({ tone: "warning" }))
         }, c(s.warningsLabel ?? "Warnings"), 3),
         d("ul", {
           class: t(a(P)({ tone: "warning" }))
         }, [
-          (l(!0), o(z, null, V(e.warnings, (u) => (l(), o("li", { key: u }, c(u), 1))), 128))
+          (l(!0), o($, null, V(e.warnings, (u) => (l(), o("li", { key: u }, c(u), 1))), 128))
         ], 2)
       ], 2)) : b("", !0),
-      e.errors?.length ? (l(), o("div", Le, [
+      e.errors?.length ? (l(), o("div", Re, [
         d("p", {
-          class: t(a(H)({ tone: "error" }))
+          class: t(a(D)({ tone: "error" }))
         }, c(s.errorsLabel ?? "Errors"), 3),
         d("ul", {
           class: t(a(P)({ tone: "error" }))
         }, [
-          (l(!0), o(z, null, V(e.errors, (u) => (l(), o("li", { key: u }, c(u), 1))), 128))
+          (l(!0), o($, null, V(e.errors, (u) => (l(), o("li", { key: u }, c(u), 1))), 128))
         ], 2)
       ])) : b("", !0)
-    ], 10, Re));
+    ], 10, Le));
   }
-}), Ie = i({
+}), Ie = r({
   padding: "6"
-}), We = i({
+}), We = r({
   height: "100%",
   minHeight: "0",
   display: "grid",
   gridTemplateRows: "auto minmax(0, 1fr)"
-}), De = G, Te = re, He = i({
+}), He = Y, Te = ne, De = r({
   position: "relative",
   zIndex: "1",
-  mb: "5"
-}), Pe = i({
+  mb: "4"
+}), Pe = r({
   position: "relative",
   zIndex: "1",
   mb: "0"
-}), Ee = de, Fe = X, je = ce, Oe = i({
+}), Oe = de, Ee = X, je = ce, Ae = r({
   color: "text.secondary",
   lineHeight: "1.65",
   fontSize: "sm",
   maxWidth: "2xl"
-}), Ae = ue, Me = i({
+}), Fe = ue, Me = r({
   position: "relative",
   zIndex: "1",
   minHeight: "0",
   overflowY: "auto",
   paddingRight: "1",
   overscrollBehavior: "contain"
-}), Ue = i({
+}), Ue = r({
   position: "relative",
   zIndex: "1"
-}), ja = /* @__PURE__ */ p({
+}), ja = /* @__PURE__ */ m({
   __name: "SectionCard",
   props: {
     title: {},
-    eyebrow: { default: "Workspace surface" },
+    eyebrow: { default: void 0 },
     description: { default: "" },
     scrollBody: { type: Boolean, default: !1 },
     collapseBodyGap: { type: Boolean, default: !1 }
   },
   setup(e) {
     const s = e;
-    return (n, f) => (l(), o("section", {
-      class: t(a(D)(a(De), a(Ie), s.scrollBody && a(We)))
+    return (i, g) => (l(), o("section", {
+      class: t(a(H)(a(He), a(Ie), s.scrollBody && a(We)))
     }, [
       d("div", {
-        class: t(a(D)(a(Te), s.collapseBodyGap ? a(Pe) : a(He)))
+        class: t(a(H)(a(Te), s.collapseBodyGap ? a(Pe) : a(De)))
       }, [
         d("div", {
-          class: t(a(Ee))
+          class: t(a(Oe))
         }, [
           s.eyebrow ? (l(), o("p", {
             key: 0,
-            class: t(a(Fe))
+            class: t(a(Ee))
           }, c(s.eyebrow), 3)) : b("", !0),
           d("h2", {
             class: t(a(je))
           }, c(s.title), 3),
           s.description ? (l(), o("p", {
             key: 1,
-            class: t(a(Oe))
+            class: t(a(Ae))
           }, c(s.description), 3)) : b("", !0)
         ], 2),
-        n.$slots.actions ? (l(), o("div", {
+        i.$slots.actions ? (l(), o("div", {
           key: 0,
-          class: t(a(Ae))
+          class: t(a(Fe))
         }, [
-          y(n.$slots, "actions")
+          y(i.$slots, "actions")
         ], 2)) : b("", !0)
       ], 2),
       d("div", {
         class: t(s.scrollBody ? a(Me) : a(Ue))
       }, [
-        y(n.$slots, "default")
+        y(i.$slots, "default")
       ], 2)
     ], 2));
   }
-}), Ke = be, Ne = i({
+}), Ke = be, Ne = r({
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
   gap: "2",
   minWidth: "0"
-}), Ye = i({
+}), Ge = r({
   visibility: "hidden"
-}), Ge = i({
+}), Ye = r({
   position: "absolute",
   inset: "0",
   display: "inline-flex",
@@ -334,10 +341,12 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
   px: "4",
   py: "3",
   pointerEvents: "none"
-}), Xe = ["type", "disabled", "aria-busy", "aria-label"], Oa = /* @__PURE__ */ p({
+}), Xe = ["type", "disabled", "aria-busy", "aria-label"], Aa = /* @__PURE__ */ m({
   __name: "UiButton",
   props: {
     variant: { default: "solid" },
+    size: { default: "md" },
+    tone: { default: "default" },
     loading: { type: Boolean, default: !1 },
     loadingLabel: { default: "Working..." },
     disabled: { type: Boolean, default: !1 },
@@ -345,23 +354,23 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     ariaLabel: { default: void 0 }
   },
   setup(e) {
-    return (s, n) => (l(), o("button", {
+    return (s, i) => (l(), o("button", {
       type: e.type,
       disabled: e.disabled || e.loading,
       "aria-busy": e.loading || void 0,
       "aria-label": e.ariaLabel,
-      class: t(a(Ke)({ variant: e.variant, disabled: e.disabled, loading: e.loading }))
+      class: t(a(Ke)({ variant: e.variant, size: e.size, tone: e.tone, disabled: e.disabled, loading: e.loading }))
     }, [
       d("span", {
-        class: t([a(Ne), e.loading ? a(Ye) : void 0])
+        class: t([a(Ne), e.loading ? a(Ge) : void 0])
       }, [
         y(s.$slots, "default")
       ], 2),
       e.loading ? (l(), o("span", {
         key: 0,
-        class: t(a(Ge))
+        class: t(a(Ye))
       }, [
-        L(a(ve), {
+        R(a(he), {
           size: 14,
           class: "aggc-spin",
           "aria-hidden": "true"
@@ -370,37 +379,35 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       ], 2)) : b("", !0)
     ], 10, Xe));
   }
-}), qe = g({
+}), qe = f({
   base: {
     width: "100%",
     display: "flex",
     alignItems: "flex-start",
     gap: "3",
     textAlign: "left",
-    borderRadius: "2xl",
+    borderRadius: "xl",
     borderWidth: "1px",
     px: "4",
     py: "3.5",
     color: "text.primary",
-    transition: "all 160ms ease"
+    transition: "border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1)"
   },
   variants: {
     checked: {
       true: {
         borderColor: "border.accent",
-        bg: "bg.selected",
-        boxShadow: "0 18px 40px -30px rgba(49,94,255,0.56)"
+        bg: "bg.selected"
       },
       false: {
         borderColor: "border.default",
-        bg: "bg.input",
-        boxShadow: "0 14px 32px -30px rgba(15,23,42,0.42)"
+        bg: "bg.input"
       }
     },
     disabled: {
       true: {
         cursor: "not-allowed",
-        opacity: 0.5
+        opacity: 0.45
       },
       false: {
         cursor: "pointer"
@@ -413,8 +420,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       disabled: !1,
       css: {
         _hover: {
-          borderColor: "border.accent",
-          transform: "translateY(-1px)"
+          borderColor: "border.accent"
         }
       }
     },
@@ -423,8 +429,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       disabled: !1,
       css: {
         _hover: {
-          borderColor: "border.strong",
-          transform: "translateY(-1px)"
+          borderColor: "border.strong"
         }
       }
     }
@@ -433,18 +438,18 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     checked: !1,
     disabled: !1
   }
-}), Je = g({
+}), Je = f({
   base: {
     mt: "0.5",
     flexShrink: "0",
     width: "22px",
     height: "22px",
     borderRadius: "md",
-    borderWidth: "1px",
+    borderWidth: "1.5px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    transition: "all 160ms ease"
+    transition: "border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1)"
   },
   variants: {
     checked: {
@@ -452,32 +457,32 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
         borderColor: "border.accent",
         bg: "bg.accentStrong",
         color: "text.inverse",
-        boxShadow: "0 12px 24px -16px rgba(49,94,255,0.7)"
+        transform: "scale(1)"
       },
       false: {
         borderColor: "border.default",
         bg: "bg.buttonOutline",
         color: "transparent",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.32)"
+        transform: "scale(1)"
       }
     }
   },
   defaultVariants: {
     checked: !1
   }
-}), Qe = i({
+}), Qe = r({
   display: "grid",
   gap: "1",
   minWidth: "0"
-}), Ze = i({
+}), Ze = r({
   fontSize: "sm",
   fontWeight: "700",
   lineHeight: "1.45"
-}), _e = i({
+}), _e = r({
   color: "text.secondary",
   fontSize: "sm",
   lineHeight: "1.55"
-}), ea = ["id", "name", "aria-checked", "aria-describedby", "aria-invalid", "disabled", "onKeydown"], Aa = /* @__PURE__ */ p({
+}), ea = ["id", "name", "aria-checked", "aria-describedby", "aria-invalid", "disabled", "onKeydown"], Fa = /* @__PURE__ */ m({
   __name: "UiCheckbox",
   props: {
     modelValue: { type: Boolean },
@@ -491,11 +496,11 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: s }) {
-    const n = e, f = s;
+    const i = e, g = s;
     function u() {
-      n.disabled || f("update:modelValue", !n.modelValue);
+      i.disabled || g("update:modelValue", !i.modelValue);
     }
-    return (m, I) => (l(), o("button", {
+    return (p, I) => (l(), o("button", {
       type: "button",
       id: e.id,
       name: e.name,
@@ -515,50 +520,50 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
         class: t(a(Je)({ checked: e.modelValue })),
         "aria-hidden": "true"
       }, [
-        L(a(q), { size: 14 })
+        R(a(q), { size: 14 })
       ], 2),
       d("span", {
         class: t(a(Qe))
       }, [
-        e.label || m.$slots.default ? (l(), o("span", {
+        e.label || p.$slots.default ? (l(), o("span", {
           key: 0,
           class: t(a(Ze))
         }, [
-          y(m.$slots, "default", {}, () => [
-            E(c(e.label), 1)
+          y(p.$slots, "default", {}, () => [
+            O(c(e.label), 1)
           ])
         ], 2)) : b("", !0),
-        e.description || m.$slots.description ? (l(), o("span", {
+        e.description || p.$slots.description ? (l(), o("span", {
           key: 1,
           class: t(a(_e))
         }, [
-          y(m.$slots, "description", {}, () => [
-            E(c(e.description), 1)
+          y(p.$slots, "description", {}, () => [
+            O(c(e.description), 1)
           ])
         ], 2)) : b("", !0)
       ], 2)
     ], 42, ea));
   }
-}), aa = i({
+}), aa = r({
   display: "grid",
   gap: "2",
   minWidth: "0"
-}), ta = i({
+}), ta = r({
   display: "flex",
   alignItems: "flex-start",
   justifyContent: "space-between",
   gap: "3"
-}), sa = i({
+}), sa = r({
   display: "grid",
-  gap: "1",
+  gap: "0.5",
   minWidth: "0"
-}), la = X, oa = i({
+}), la = X, oa = r({
   fontSize: "sm",
-  fontWeight: "700",
+  fontWeight: "600",
   color: "text.primary"
-}), na = ge, ia = i({
+}), ia = fe, ra = r({
   flexShrink: "0"
-}), ra = ["for"], da = ["id"], Ma = /* @__PURE__ */ p({
+}), na = ["for"], da = ["id"], Ma = /* @__PURE__ */ m({
   __name: "UiField",
   props: {
     id: {},
@@ -568,7 +573,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     eyebrow: {}
   },
   setup(e) {
-    return (s, n) => (l(), o("div", {
+    return (s, i) => (l(), o("div", {
       class: t(a(aa))
     }, [
       e.eyebrow || e.label || e.hint || s.$slots.meta ? (l(), o("div", {
@@ -586,16 +591,16 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
             key: 1,
             for: e.forId,
             class: t(a(oa))
-          }, c(e.label), 11, ra)) : b("", !0),
+          }, c(e.label), 11, na)) : b("", !0),
           e.hint ? (l(), o("p", {
             key: 2,
             id: e.id,
-            class: t(a(na))
+            class: t(a(ia))
           }, c(e.hint), 11, da)) : b("", !0)
         ], 2),
         s.$slots.meta ? (l(), o("div", {
           key: 0,
-          class: t(a(ia))
+          class: t(a(ra))
         }, [
           y(s.$slots, "meta")
         ], 2)) : b("", !0)
@@ -603,9 +608,9 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       y(s.$slots, "default")
     ], 2));
   }
-}), ca = D(
-  fe,
-  i({
+}), ca = H(
+  ge,
+  r({
     paddingX: "4",
     paddingY: "3",
     display: "flex",
@@ -615,21 +620,21 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     fontSize: "sm",
     lineHeight: "1.5"
   })
-), ua = i({
+), ua = r({
   width: "2.5",
   height: "2.5",
   borderRadius: "full",
   flexShrink: "0",
   bg: "text.accent",
-  boxShadow: "0 0 0 0 rgba(49,94,255,0.35)",
-  animation: "loadingPulse 1.2s ease-out infinite"
-}), ba = i({
+  boxShadow: "0 0 0 0 var(--colors-bg-accentSoft, rgba(49, 94, 255, 0.3))",
+  animation: "loadingPulse 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite"
+}), ba = r({
   display: "grid",
   gap: "0.5"
-}), ga = i({
+}), fa = r({
   fontWeight: "700",
   color: "text.primary"
-}), fa = ["aria-live", "role"], Ua = /* @__PURE__ */ p({
+}), ga = ["aria-live", "role"], Ua = /* @__PURE__ */ m({
   __name: "UiLoadingState",
   props: {
     title: {},
@@ -637,7 +642,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     live: { default: "polite" }
   },
   setup(e) {
-    return (s, n) => (l(), o("div", {
+    return (s, i) => (l(), o("div", {
       class: t(a(ca)),
       "data-testid": "loading-state",
       "aria-live": e.live,
@@ -652,13 +657,13 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
         class: t(a(ba))
       }, [
         d("p", {
-          class: t(a(ga))
+          class: t(a(fa))
         }, c(e.title), 3),
         d("p", null, c(e.description), 1)
       ], 2)
-    ], 10, fa));
+    ], 10, ga));
   }
-}), pa = i({
+}), ma = r({
   display: "inline-flex",
   width: "fit-content",
   borderRadius: "full",
@@ -667,9 +672,10 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
   bg: "bg.input",
   padding: "1",
   gap: "1",
-  backdropFilter: "blur(18px) saturate(140%)",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)"
-}), ma = g({
+  _dark: {
+    borderColor: "border.strong"
+  }
+}), pa = f({
   base: {
     borderRadius: "full",
     px: "3.5",
@@ -678,7 +684,12 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     fontWeight: "600",
     cursor: "pointer",
     borderWidth: "1px",
-    transition: "all 160ms ease"
+    transition: "background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+    _focusVisible: {
+      outline: "2px solid",
+      outlineColor: "text.accent",
+      outlineOffset: "2px"
+    }
   },
   variants: {
     active: {
@@ -686,9 +697,13 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
         borderColor: "border.accent",
         bg: "bg.accentStrong",
         color: "text.inverse",
-        boxShadow: "0 14px 26px -16px rgba(49,94,255,0.68)",
         _hover: {
           bg: "bg.accentStrong"
+        },
+        _dark: {
+          bg: "rgba(138, 180, 255, 0.2)",
+          color: "text.accent",
+          borderColor: "border.accent"
         }
       },
       false: {
@@ -702,7 +717,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       }
     }
   }
-}), ha = ["onClick"], Ka = /* @__PURE__ */ p({
+}), va = ["onClick"], Ka = /* @__PURE__ */ m({
   __name: "UiSegmentedControl",
   props: {
     modelValue: {},
@@ -710,18 +725,18 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
   },
   emits: ["update:modelValue"],
   setup(e) {
-    return (s, n) => (l(), o("div", {
-      class: t(a(pa))
+    return (s, i) => (l(), o("div", {
+      class: t(a(ma))
     }, [
-      (l(!0), o(z, null, V(e.options, (f) => (l(), o("button", {
-        key: f.value,
+      (l(!0), o($, null, V(e.options, (g) => (l(), o("button", {
+        key: g.value,
         type: "button",
-        class: t(a(ma)({ active: f.value === e.modelValue })),
-        onClick: (u) => s.$emit("update:modelValue", f.value)
-      }, c(f.label), 11, ha))), 128))
+        class: t(a(pa)({ active: g.value === e.modelValue })),
+        onClick: (u) => s.$emit("update:modelValue", g.value)
+      }, c(g.label), 11, va))), 128))
     ], 2));
   }
-}), va = g({
+}), ha = f({
   base: {
     position: "relative"
   },
@@ -734,7 +749,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
   defaultVariants: {
     open: !1
   }
-}), ya = g({
+}), ya = f({
   base: {
     width: "100%",
     display: "flex",
@@ -744,8 +759,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     borderWidth: "1px",
     fontSize: "sm",
     overflow: "hidden",
-    backdropFilter: "blur(24px) saturate(145%)",
-    transition: "all 160ms ease"
+    transition: "border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1)"
   },
   variants: {
     size: {
@@ -766,12 +780,14 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       true: {
         borderColor: "border.accent",
         bg: "bg.cardStrong",
-        boxShadow: "0 18px 42px -28px rgba(49,94,255,0.42)"
+        _dark: {
+          borderColor: "border.accent",
+          bg: "bg.input"
+        }
       },
       false: {
         borderColor: "border.default",
-        bg: "bg.input",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)"
+        bg: "bg.input"
       }
     },
     selected: {
@@ -781,10 +797,15 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     disabled: {
       true: {
         cursor: "not-allowed",
-        opacity: 0.55
+        opacity: 0.45
       },
       false: {
-        cursor: "pointer"
+        cursor: "pointer",
+        _focusVisible: {
+          outline: "2px solid",
+          outlineColor: "text.accent",
+          outlineOffset: "2px"
+        }
       }
     }
   },
@@ -794,7 +815,10 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
       css: {
         _hover: {
           borderColor: "border.strong",
-          bg: "bg.cardStrong"
+          bg: "bg.cardStrong",
+          _dark: {
+            bg: "bg.input"
+          }
         }
       }
     }
@@ -805,30 +829,30 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     selected: !1,
     disabled: !1
   }
-}), Ca = pe({
+}), Ca = me({
   placement: "anchored",
   density: "cozy"
-}), xa = i({
+}), xa = r({
   width: "100%",
   zIndex: "30",
   maxHeight: "320px",
   overflowY: "auto",
   display: "grid"
-}), wa = i({
+}), ka = r({
   display: "block",
   textAlign: "left",
   minWidth: "0",
   flex: "1",
   overflow: "hidden"
-}), ka = i({
+}), wa = r({
   display: "block",
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
-}), Sa = g({
+}), Sa = f({
   base: {
     color: "text.muted",
-    transition: "transform 160ms ease"
+    transition: "transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1)"
   },
   variants: {
     open: {
@@ -839,7 +863,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
   defaultVariants: {
     open: !1
   }
-}), Ba = g({
+}), za = f({
   base: {
     width: "100%",
     display: "flex",
@@ -847,20 +871,25 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     justifyContent: "space-between",
     gap: "3",
     textAlign: "left",
-    borderRadius: "xl",
+    borderRadius: "lg",
     px: "3",
     borderWidth: "1px",
     cursor: "pointer",
-    transition: "all 140ms ease",
+    transition: "border-color 140ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 140ms cubic-bezier(0.25, 0.1, 0.25, 1), color 140ms cubic-bezier(0.25, 0.1, 0.25, 1)",
     _hover: {
       bg: "bg.selected",
       borderColor: "border.accent"
+    },
+    _focusVisible: {
+      outline: "2px solid",
+      outlineColor: "text.accent",
+      outlineOffset: "-2px"
     }
   },
   variants: {
     size: {
       sm: { py: "2.5" },
-      md: { py: "3" }
+      md: { py: "2.5" }
     },
     active: {
       true: {
@@ -879,26 +908,26 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     size: "md",
     active: !1
   }
-}), $a = i({
+}), Ba = r({
   display: "grid",
   gap: "0.5",
   minWidth: "0"
-}), za = i({
+}), $a = r({
   fontSize: "sm",
   fontWeight: "600",
   minWidth: "0",
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
-}), Va = i({
+}), Va = r({
   color: "text.secondary",
   fontSize: "xs",
   lineHeight: "1.45",
   overflowWrap: "anywhere"
-}), Ra = g({
+}), La = f({
   base: {
     color: "text.accent",
-    transition: "opacity 140ms ease"
+    transition: "opacity 140ms cubic-bezier(0.25, 0.1, 0.25, 1)"
   },
   variants: {
     selected: {
@@ -909,7 +938,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
   defaultVariants: {
     selected: !1
   }
-}), La = ["id", "name", "disabled", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid"], Ia = ["id", "aria-activedescendant"], Wa = ["id", "aria-selected", "onMouseenter", "onClick", "onKeydown"], Na = /* @__PURE__ */ p({
+}), Ra = ["id", "name", "disabled", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid"], Ia = ["id", "aria-activedescendant"], Wa = ["id", "aria-selected", "onMouseenter", "onClick", "onKeydown"], Na = /* @__PURE__ */ m({
   __name: "UiSelect",
   props: {
     modelValue: {},
@@ -926,100 +955,100 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: s }) {
-    const n = e, f = s, u = $(null), m = $(null), I = $([]), h = $(!1), x = $(-1), J = se(), W = R(() => n.id ?? `ui-select-${J}`), F = R(() => `${W.value}-listbox`), j = R(
-      () => n.options.find((r) => r.value === n.modelValue) ?? null
+    const i = e, g = s, u = B(null), p = B(null), I = B([]), v = B(!1), x = B(-1), J = se(), W = L(() => i.id ?? `ui-select-${J}`), E = L(() => `${W.value}-listbox`), j = L(
+      () => i.options.find((n) => n.value === i.modelValue) ?? null
     );
-    function k(r) {
-      if (!n.options.length) {
+    function w(n) {
+      if (!i.options.length) {
         x.value = -1;
         return;
       }
-      const v = (r + n.options.length) % n.options.length;
-      x.value = v, T(() => {
-        I.value[v]?.focus();
+      const h = (n + i.options.length) % i.options.length;
+      x.value = h, T(() => {
+        I.value[h]?.focus();
       });
     }
-    function w() {
-      h.value = !1, x.value = -1;
+    function k() {
+      v.value = !1, x.value = -1;
     }
-    async function O() {
-      if (n.disabled || !n.options.length)
+    async function A() {
+      if (i.disabled || !i.options.length)
         return;
-      h.value = !0;
-      const r = n.options.findIndex((v) => v.value === n.modelValue);
-      await T(), k(r >= 0 ? r : 0);
+      v.value = !0;
+      const n = i.options.findIndex((h) => h.value === i.modelValue);
+      await T(), w(n >= 0 ? n : 0);
     }
     function Q() {
-      if (h.value) {
-        w();
+      if (v.value) {
+        k();
         return;
       }
-      O();
+      A();
     }
-    function A(r) {
-      f("update:modelValue", r), w(), T(() => {
-        m.value?.focus();
+    function F(n) {
+      g("update:modelValue", n), k(), T(() => {
+        p.value?.focus();
       });
     }
-    function Z(r) {
-      n.disabled || (r.key === "ArrowDown" || r.key === "Enter" || r.key === " ") && (r.preventDefault(), O());
+    function Z(n) {
+      i.disabled || (n.key === "ArrowDown" || n.key === "Enter" || n.key === " ") && (n.preventDefault(), A());
     }
-    function _(r, v) {
-      switch (r.key) {
+    function _(n, h) {
+      switch (n.key) {
         case "ArrowDown":
-          r.preventDefault(), k(v + 1);
+          n.preventDefault(), w(h + 1);
           break;
         case "ArrowUp":
-          r.preventDefault(), k(v - 1);
+          n.preventDefault(), w(h - 1);
           break;
         case "Home":
-          r.preventDefault(), k(0);
+          n.preventDefault(), w(0);
           break;
         case "End":
-          r.preventDefault(), k(n.options.length - 1);
+          n.preventDefault(), w(i.options.length - 1);
           break;
         case "Escape":
-          r.preventDefault(), w(), m.value?.focus();
+          n.preventDefault(), k(), p.value?.focus();
           break;
         case "Enter":
         case " ":
-          r.preventDefault(), A(n.options[v].value);
+          n.preventDefault(), F(i.options[h].value);
           break;
       }
     }
-    function M(r) {
-      h.value && (u.value?.contains(r.target) || w());
+    function M(n) {
+      v.value && (u.value?.contains(n.target) || k());
     }
     return N(
-      () => n.options,
+      () => i.options,
       () => {
-        I.value = [], n.options.some((r) => r.value === n.modelValue) || w();
+        I.value = [], i.options.some((n) => n.value === i.modelValue) || k();
       }
     ), N(
-      () => n.disabled,
-      (r) => {
-        r && w();
+      () => i.disabled,
+      (n) => {
+        n && k();
       }
     ), le(() => {
       document.addEventListener("pointerdown", M);
     }), oe(() => {
       document.removeEventListener("pointerdown", M);
-    }), (r, v) => (l(), o("div", {
+    }), (n, h) => (l(), o("div", {
       ref_key: "rootRef",
       ref: u,
-      class: t(a(va)({ open: h.value }))
+      class: t(a(ha)({ open: v.value }))
     }, [
       d("button", {
         ref_key: "triggerRef",
-        ref: m,
+        ref: p,
         type: "button",
         id: W.value,
         name: e.name,
         disabled: e.disabled,
-        class: t(a(ya)({ size: e.size, open: h.value, selected: !!j.value, disabled: e.disabled })),
+        class: t(a(ya)({ size: e.size, open: v.value, selected: !!j.value, disabled: e.disabled })),
         "aria-haspopup": "listbox",
-        "aria-expanded": h.value,
-        "aria-controls": F.value,
+        "aria-expanded": v.value,
+        "aria-controls": E.value,
         "aria-label": e.ariaLabel,
         "aria-labelledby": e.ariaLabelledby,
         "aria-describedby": e.ariaDescribedby,
@@ -1028,71 +1057,74 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
         onKeydown: Z
       }, [
         d("span", {
-          class: t(a(wa))
+          class: t(a(ka))
         }, [
           d("span", {
-            class: t(a(ka))
+            class: t(a(wa))
           }, c(j.value?.label ?? e.placeholder), 3)
         ], 2),
-        L(a(ye), {
+        R(a(ye), {
           size: 16,
-          class: t(a(Sa)({ open: h.value }))
+          class: t(a(Sa)({ open: v.value }))
         }, null, 8, ["class"])
-      ], 42, La),
-      h.value ? (l(), o("div", {
+      ], 42, Ra),
+      v.value ? (l(), o("div", {
         key: 0,
-        id: F.value,
+        id: E.value,
         class: t([a(Ca), a(xa)]),
         role: "listbox",
         "aria-activedescendant": x.value >= 0 ? `${W.value}-${x.value}` : void 0
       }, [
-        (l(!0), o(z, null, V(e.options, (C, S) => (l(), o("button", {
+        (l(!0), o($, null, V(e.options, (C, S) => (l(), o("button", {
           id: `${W.value}-${S}`,
           key: C.value,
           ref_for: !0,
-          ref: (B) => I.value[S] = B,
+          ref: (z) => I.value[S] = z,
           type: "button",
           role: "option",
           "aria-selected": C.value === e.modelValue,
-          class: t(a(Ba)({ size: e.size, active: x.value === S || C.value === e.modelValue })),
-          onMouseenter: (B) => x.value = S,
-          onClick: (B) => A(C.value),
-          onKeydown: (B) => _(B, S)
+          class: t(a(za)({ size: e.size, active: x.value === S || C.value === e.modelValue })),
+          onMouseenter: (z) => x.value = S,
+          onClick: (z) => F(C.value),
+          onKeydown: (z) => _(z, S)
         }, [
           d("span", {
-            class: t(a($a))
+            class: t(a(Ba))
           }, [
             d("span", {
-              class: t(a(za))
+              class: t(a($a))
             }, c(C.label), 3),
             C.description && e.size === "md" ? (l(), o("span", {
               key: 0,
               class: t(a(Va))
             }, c(C.description), 3)) : b("", !0)
           ], 2),
-          L(a(q), {
+          R(a(q), {
             size: 15,
-            class: t(a(Ra)({ selected: C.value === e.modelValue }))
+            class: t(a(La)({ selected: C.value === e.modelValue }))
           }, null, 8, ["class"])
         ], 42, Wa))), 128))
       ], 10, Ia)) : b("", !0)
     ], 2));
   }
-}), Da = g({
+}), Ha = f({
   base: {
     position: "relative",
     overflow: "hidden",
+    bg: "bg.cardAlt",
+    borderRadius: "md",
     _before: {
       content: '""',
       position: "absolute",
       inset: "0",
-      background: "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0) 100%)",
+      background: "linear-gradient(90deg, transparent 0%, var(--colors-bg-overlay, rgba(255,255,255,0.36)) 50%, transparent 100%)",
       transform: "translateX(-100%)",
-      animation: "aggc-shimmer 1.45s ease-in-out infinite"
+      animation: "aggc-shimmer 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite"
     },
     _dark: {
+      bg: "rgba(255, 255, 255, 0.04)",
       _before: {
-        background: "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(186,204,236,0.22) 50%, rgba(255,255,255,0) 100%)"
+        background: "linear-gradient(90deg, transparent 0%, rgba(186, 204, 236, 0.1) 50%, transparent 100%)"
       }
     }
   },
@@ -1100,73 +1132,41 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     variant: {
       text: {
         width: "100%",
-        height: "0.875rem",
-        borderRadius: "md",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)"
-        }
+        height: "0.875rem"
       },
       title: {
         width: "100%",
         height: "1.75rem",
-        borderRadius: "xl",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)"
-        }
+        borderRadius: "md"
       },
       rect: {
         width: "100%",
-        height: "5rem",
-        borderRadius: "xl",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)"
-        }
+        height: "5rem"
       },
       pill: {
         width: "5rem",
         height: "1.75rem",
-        borderRadius: "999px",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)"
-        }
+        borderRadius: "999px"
       },
       circle: {
         width: "2.75rem",
         height: "2.75rem",
-        borderRadius: "999px",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)"
-        }
+        borderRadius: "999px"
       },
       stat: {
         width: "100%",
-        height: "4.75rem",
-        borderRadius: "xl",
-        bg: "rgba(117, 138, 178, 0.16)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.11)"
-        }
+        height: "4.75rem"
       },
       action: {
         width: "100%",
-        height: "2.75rem",
-        borderRadius: "xl",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)"
-        }
+        height: "2.75rem"
       }
     }
   },
   defaultVariants: {
     variant: "rect"
   }
-}), Ya = /* @__PURE__ */ p({
+}), Ga = /* @__PURE__ */ m({
   __name: "UiSkeleton",
   props: {
     variant: { default: "rect" },
@@ -1174,28 +1174,28 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
     height: { default: void 0 }
   },
   setup(e) {
-    const s = e, n = R(() => Da({ variant: s.variant })), f = R(() => ({
+    const s = e, i = L(() => Ha({ variant: s.variant })), g = L(() => ({
       width: s.width ?? (s.variant === "circle" ? "2.75rem" : s.variant === "pill" ? "5rem" : "100%"),
       height: s.height ?? (s.variant === "text" ? "0.875rem" : s.variant === "title" || s.variant === "pill" ? "1.75rem" : s.variant === "circle" || s.variant === "action" ? "2.75rem" : s.variant === "stat" ? "4.75rem" : "5rem")
     }));
-    return (u, m) => (l(), o("div", {
+    return (u, p) => (l(), o("div", {
       "aria-hidden": "true",
       "data-ui-skeleton": "",
-      class: t(n.value),
-      style: ne(f.value)
+      class: t(i.value),
+      style: ie(g.value)
     }, null, 6));
   }
 });
 export {
-  Ea as _,
-  Fa as a,
+  Oa as _,
+  Ea as a,
   ja as b,
-  we as c,
-  Oa as d,
-  Aa as e,
+  ke as c,
+  Aa as d,
+  Fa as e,
   Ma as f,
   Ua as g,
   Ka as h,
   Na as i,
-  Ya as j
+  Ga as j
 };