@hirobius/design-system 0.22.0 → 0.23.0

package/dist/hirobius-ui.js

@@ -1,25 +1,25 @@
 'use client';
-import { jsxs as g, jsx as e, Fragment as ii } from "react/jsx-runtime";
-import * as v from "react";
-import X, { useState as Y, forwardRef as ee, useRef as $e, useEffect as ti, useId as Me } from "react";
-import { motion as H, AnimatePresence as ai } from "motion/react";
+import { jsxs as h, jsx as t, Fragment as at } from "react/jsx-runtime";
+import * as m from "react";
+import Z, { useState as X, forwardRef as oe, useRef as Se, useEffect as rt, useId as Ne } from "react";
+import { motion as E, AnimatePresence as nt } from "motion/react";
 import { cva as $ } from "class-variance-authority";
-import { Info as ye, TriangleAlert as Ae, CircleX as He, CircleCheck as Ee, X as ve, ChevronRight as xe, Circle as ri, Check as oe, Copy as ni, SquareArrowOutUpRight as oi, Loader2 as si, Minus as li, ChevronsUpDown as Be, ChevronDown as ci, ChevronLeft as di } from "lucide-react";
-import z, { tokenValues as we } from "./tokens.js";
+import { Info as ze, TriangleAlert as _e, CircleX as Oe, CircleCheck as Ge, X as $e, ChevronRight as Ce, Circle as ot, Check as pe, Copy as st, SquareArrowOutUpRight as lt, Loader2 as ct, Minus as dt, ChevronsUpDown as je, ChevronDown as pt, ChevronLeft as ut } from "lucide-react";
+import D, { tokenValues as De } from "./tokens.js";
 import { cn as d } from "./cn.js";
-import { u as j, I as A, i as pi, d as ui, T as We, w as se, B as me, r as Fe, L as _e, S as De, a as mi } from "./chunks/empty-state-DNoThgfV.js";
-import { A as lr, b as cr, e as dr, f as pr, g as ur, j as mr, k as vr, l as fr, m as gr, C as hr, E as br, G as $r, H as yr, c as xr, n as wr } from "./chunks/empty-state-DNoThgfV.js";
+import { u as j, I as A, i as mt, d as vt, T as Ue, w as ue, B as be, r as Ye, L as qe, S as Ie, a as gt } from "./chunks/empty-state-ChC_xZfg.js";
+import { A as mr, b as vr, e as gr, f as fr, g as hr, j as br, k as $r, l as yr, m as xr, C as wr, E as kr, G as Sr, H as Nr, c as zr, n as Cr } from "./chunks/empty-state-ChC_xZfg.js";
 import * as U from "@radix-ui/react-dialog";
-import * as E from "@radix-ui/react-dropdown-menu";
-import * as ie from "@radix-ui/react-popover";
-import * as Z from "@radix-ui/react-tooltip";
-import { a as Oe, u as le } from "./chunks/DemoStateContext-Cz5TmrYu.js";
-import { H as Sr } from "./chunks/DemoStateContext-Cz5TmrYu.js";
-import * as Te from "@radix-ui/react-toggle-group";
-import * as O from "@radix-ui/react-select";
-import * as fe from "@radix-ui/react-tabs";
-import * as J from "@radix-ui/react-toast";
-const vi = /* @__PURE__ */ $(
+import * as B from "@radix-ui/react-dropdown-menu";
+import * as se from "@radix-ui/react-popover";
+import * as re from "@radix-ui/react-tooltip";
+import { a as Xe, u as me } from "./chunks/DemoStateContext-Cz5TmrYu.js";
+import { H as Tr } from "./chunks/DemoStateContext-Cz5TmrYu.js";
+import * as Ae from "@radix-ui/react-toggle-group";
+import * as G from "@radix-ui/react-select";
+import * as ye from "@radix-ui/react-tabs";
+import * as ae from "@radix-ui/react-toast";
+const ft = /* @__PURE__ */ $(
   "flex gap-[var(--semantic-space-scale-xs)] p-[var(--semantic-space-scale-xs)] rounded-[var(--primitive-radius-4)]",
   // tier-ok: 4px primitive radius, no semantic 4px token
   {
@@ -37,27 +37,27 @@ const vi = /* @__PURE__ */ $(
     },
     defaultVariants: { tone: "info", hasTitle: !1 }
   }
-), fi = {
-  success: { icon: Ee, colorVar: "var(--semantic-color-feedback-success)" },
-  danger: { icon: He, colorVar: "var(--semantic-color-feedback-error)" },
-  warning: { icon: Ae, colorVar: "var(--semantic-color-feedback-warning)" },
-  info: { icon: ye, colorVar: "var(--semantic-color-feedback-info)" }
-}, va = /* @__PURE__ */ X.forwardRef(function({ tone: i = "info", title: t, children: a }, r) {
-  const { icon: n, colorVar: s } = fi[i], l = !!t, p = j("productive");
-  return /* @__PURE__ */ g(
-    H.div,
+), ht = {
+  success: { icon: Ge, colorVar: "var(--semantic-color-feedback-success)" },
+  danger: { icon: Oe, colorVar: "var(--semantic-color-feedback-error)" },
+  warning: { icon: _e, colorVar: "var(--semantic-color-feedback-warning)" },
+  info: { icon: ze, colorVar: "var(--semantic-color-feedback-info)" }
+}, $a = /* @__PURE__ */ Z.forwardRef(function({ tone: e = "info", title: i, children: a }, r) {
+  const { icon: o, colorVar: s } = ht[e], l = !!i, p = j("productive");
+  return /* @__PURE__ */ h(
+    E.div,
     {
       ref: r,
-      role: i === "danger" || i === "warning" ? "alert" : "status",
+      role: e === "danger" || e === "warning" ? "alert" : "status",
       initial: { opacity: 0, y: -4 },
       animate: { opacity: 1, y: 0 },
       transition: { duration: p.duration, ease: p.easing },
-      className: d(vi({ tone: i, hasTitle: l })),
+      className: d(ft({ tone: e, hasTitle: l })),
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           A,
           {
-            icon: n,
+            icon: o,
             size: "small",
             color: s,
             weight: "light",
@@ -72,23 +72,23 @@ const vi = /* @__PURE__ */ $(
           // makes the title its own block instead of an inline sibling, with
           // spacing from a semantic token rather than a literal.
           // eslint-disable-next-line tailwindcss/no-arbitrary-value -- semantic subgrid-hairline gap; var()-based, no Tailwind-theme utility exists
-          /* @__PURE__ */ g("span", { className: "flex flex-col gap-[var(--semantic-space-subgrid-hairline)]", children: [
-            /* @__PURE__ */ e(
+          /* @__PURE__ */ h("span", { className: "flex flex-col gap-[var(--semantic-space-subgrid-hairline)]", children: [
+            /* @__PURE__ */ t(
               "span",
               {
                 style: {
-                  ...z.typeStyles.ui,
+                  ...D.typeStyles.ui,
                   color: "var(--semantic-color-content-primary)",
                   margin: 0
                 },
-                children: t
+                children: i
               }
             ),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ t(
               "span",
               {
                 style: {
-                  ...z.typeStyles.caption,
+                  ...D.typeStyles.caption,
                   color: "var(--semantic-color-content-primary)",
                   margin: 0
                 },
@@ -96,11 +96,11 @@ const vi = /* @__PURE__ */ $(
               }
             )
           ] })
-        ) : /* @__PURE__ */ e(
+        ) : /* @__PURE__ */ t(
           "span",
           {
             style: {
-              ...z.typeStyles.caption,
+              ...D.typeStyles.caption,
               color: "var(--semantic-color-content-primary)",
               margin: 0
             },
@@ -110,7 +110,7 @@ const vi = /* @__PURE__ */ $(
       ]
     }
   );
-}), gi = /* @__PURE__ */ $(
+}), bt = /* @__PURE__ */ $(
   "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground uppercase select-none",
   {
     variants: {
@@ -123,22 +123,24 @@ const vi = /* @__PURE__ */ $(
     defaultVariants: { size: "md" }
   }
 );
-function hi(o) {
-  if (!o) return "";
-  const i = o.trim().split(/\s+/).filter(Boolean);
-  return i.length === 0 ? "" : i.length === 1 ? i[0].slice(0, 2) : (i[0][0] ?? "") + (i[i.length - 1][0] ?? "");
+function $t(n) {
+  if (!n) return "";
+  const e = n.trim().split(/\s+/).filter(Boolean);
+  return e.length === 0 ? "" : e.length === 1 ? e[0].slice(0, 2) : (e[0][0] ?? "") + (e[e.length - 1][0] ?? "");
 }
-const fa = /* @__PURE__ */ v.forwardRef(
-  function({ className: i, size: t, src: a, alt: r, initials: n, ...s }, l) {
-    const [p, c] = v.useState(!1), u = !!a && !p, m = n || hi(r);
-    return /* @__PURE__ */ e(
+const ya = /* @__PURE__ */ m.forwardRef(
+  function({ className: e, size: i, src: a, alt: r, initials: o, ...s }, l) {
+    const [p, c] = m.useState(!1), [v, u] = m.useState(a);
+    a !== v && (u(a), c(!1));
+    const b = !!a && !p, w = o || $t(r);
+    return /* @__PURE__ */ t(
       "span",
       {
         ref: l,
-        "data-size": t ?? "md",
-        className: d(gi({ size: t }), i),
+        "data-size": i ?? "md",
+        className: d(bt({ size: i }), e),
         ...s,
-        children: u ? /* @__PURE__ */ e(
+        children: b ? /* @__PURE__ */ t(
           "img",
           {
             src: a,
@@ -146,11 +148,11 @@ const fa = /* @__PURE__ */ v.forwardRef(
             className: "h-full w-full object-cover",
             onError: () => c(!0)
           }
-        ) : /* @__PURE__ */ e("span", { "aria-label": r, role: "img", children: m })
+        ) : /* @__PURE__ */ t("span", { "aria-label": r, role: "img", children: w })
       }
     );
   }
-), bi = /* @__PURE__ */ $(
+), yt = /* @__PURE__ */ $(
   "inline-flex w-fit items-center justify-center whitespace-nowrap box-border hds-type-caption h-[var(--component-badge-height)] min-w-[var(--component-badge-minWidth)] px-[var(--component-badge-paddingX)] py-[var(--component-badge-paddingY)] rounded-[var(--component-badge-radius)]",
   {
     variants: {
@@ -165,7 +167,7 @@ const fa = /* @__PURE__ */ v.forwardRef(
     },
     defaultVariants: { tone: "neutral" }
   }
-), $i = /* @__PURE__ */ $("inline-block shrink-0 rounded-full", {
+), xt = /* @__PURE__ */ $("inline-block shrink-0 rounded-full", {
   variants: {
     tone: {
       neutral: "bg-muted-foreground",
@@ -177,61 +179,61 @@ const fa = /* @__PURE__ */ v.forwardRef(
     }
   },
   defaultVariants: { tone: "neutral" }
-}), yi = {
+}), wt = {
   sm: "size-1.5",
   md: "size-2",
   lg: "size-2.5"
 };
-let Re = !1;
-function xi() {
-  Re || pi() || (Re = !0, console.warn(
+let Me = !1;
+function kt() {
+  Me || mt() || (Me = !0, console.warn(
     "[HDS] Badge `label` only names a `dot` badge and renders no text. Put the text in children: <Badge>Active</Badge>, or add `dot`."
   ));
 }
-const ga = /* @__PURE__ */ v.forwardRef(function({ className: i, tone: t, as: a = "span", dot: r = !1, size: n, label: s, children: l, ...p }, c) {
-  return s && !r && xi(), r ? /* @__PURE__ */ e(
+const xa = /* @__PURE__ */ m.forwardRef(function({ className: e, tone: i, as: a = "span", dot: r = !1, size: o, label: s, children: l, ...p }, c) {
+  return s && !r && kt(), r ? /* @__PURE__ */ t(
     a,
     {
       ref: c,
-      "data-tone": t ?? "neutral",
-      "data-size": n ?? "md",
-      className: d($i({ tone: t }), yi[n ?? "md"], i),
+      "data-tone": i ?? "neutral",
+      "data-size": o ?? "md",
+      className: d(xt({ tone: i }), wt[o ?? "md"], e),
       ...s ? { role: "img", "aria-label": s } : { "aria-hidden": !0 },
       ...p
     }
-  ) : /* @__PURE__ */ e(
+  ) : /* @__PURE__ */ t(
     a,
     {
       ref: c,
-      "data-tone": t ?? "neutral",
-      className: d(bi({ tone: t }), i),
+      "data-tone": i ?? "neutral",
+      className: d(yt({ tone: i }), e),
       ...p,
       children: l
     }
   );
-}), ha = /* @__PURE__ */ X.forwardRef(function({ as: i = "div", sx: t, className: a, children: r, ...n }, s) {
-  const l = t ? ui(t) : void 0;
-  return /* @__PURE__ */ e(
-    i,
+}), wa = /* @__PURE__ */ Z.forwardRef(function({ as: e = "div", sx: i, className: a, children: r, ...o }, s) {
+  const l = i ? vt(i) : void 0;
+  return /* @__PURE__ */ t(
+    e,
     {
       ref: s,
       className: d(l, a),
       "data-hds-component": "Box",
-      "data-hds-metrics": t ? `sx:${Object.keys(t).length}` : void 0,
-      ...n,
+      "data-hds-metrics": i ? `sx:${Object.keys(i).length}` : void 0,
+      ...o,
       children: r
     }
   );
-}), wi = /* @__PURE__ */ $(
-  "border-l-[3px] p-[var(--semantic-space-surface-padding)]",
+}), St = /* @__PURE__ */ $(
+  "rounded-[var(--primitive-radius-4)] p-[var(--semantic-space-surface-padding)]",
   {
     variants: {
       tone: {
-        accent: "border-l-[color:var(--semantic-color-content-accent)] bg-[color:var(--semantic-color-surface-raised)]",
-        info: "border-l-feedback-info bg-[color:var(--semantic-color-surface-raised)]",
-        success: "border-l-feedback-success bg-[color:var(--semantic-color-surface-raised)]",
-        warning: "border-l-feedback-warning bg-[color:var(--semantic-color-surface-raised)]",
-        danger: "border-l-feedback-danger bg-[color:var(--semantic-color-surface-page)]"
+        accent: "bg-muted",
+        info: "bg-feedback-bg-info",
+        success: "bg-feedback-bg-success",
+        warning: "bg-feedback-bg-warning",
+        danger: "bg-feedback-bg-danger"
       },
       italic: {
         true: "italic",
@@ -240,20 +242,20 @@ const ga = /* @__PURE__ */ v.forwardRef(function({ className: i, tone: t, as: a
     },
     defaultVariants: { tone: "info", italic: !1 }
   }
-), ba = /* @__PURE__ */ v.forwardRef(
-  function({ tone: i = "info", italic: t = !1, className: a, children: r, ...n }, s) {
-    return /* @__PURE__ */ e(
+), ka = /* @__PURE__ */ m.forwardRef(
+  function({ tone: e = "info", italic: i = !1, className: a, children: r, ...o }, s) {
+    return /* @__PURE__ */ t(
       "div",
       {
         ref: s,
-        "data-tone": i,
-        className: d(wi({ tone: i, italic: t }), a),
-        ...n,
+        "data-tone": e,
+        className: d(St({ tone: e, italic: i }), a),
+        ...o,
         children: r
       }
     );
   }
-), ki = /* @__PURE__ */ $("hds-type-ui", {
+), Nt = /* @__PURE__ */ $("hds-type-ui", {
   variants: {
     tone: {
       neutral: "text-foreground",
@@ -268,22 +270,22 @@ const ga = /* @__PURE__ */ v.forwardRef(function({ className: i, tone: t, as: a
     }
   },
   defaultVariants: { tone: "neutral", mono: !1 }
-}), $a = /* @__PURE__ */ v.forwardRef(function({ label: i, value: t, tone: a, mono: r, className: n, children: s, ...l }, p) {
-  const c = s ?? t;
-  return /* @__PURE__ */ g(
+}), Sa = /* @__PURE__ */ m.forwardRef(function({ label: e, value: i, tone: a, mono: r, className: o, children: s, ...l }, p) {
+  const c = s ?? i;
+  return /* @__PURE__ */ h(
     "div",
     {
       ref: p,
       "data-tone": a ?? "neutral",
-      className: d("flex flex-col gap-1", n),
+      className: d("flex flex-col gap-1", o),
       ...l,
       children: [
-        /* @__PURE__ */ e("span", { className: "hds-type-caption text-muted-foreground", children: i }),
-        c != null && /* @__PURE__ */ e("span", { className: ki({ tone: a, mono: r }), children: c })
+        /* @__PURE__ */ t("span", { className: "hds-type-caption text-muted-foreground", children: e }),
+        c != null && /* @__PURE__ */ t("span", { className: Nt({ tone: a, mono: r }), children: c })
       ]
     }
   );
-}), Si = /* @__PURE__ */ $("m-0 hds-type-title", {
+}), zt = /* @__PURE__ */ $("m-0 hds-type-title", {
   variants: {
     tone: {
       neutral: "text-foreground",
@@ -294,22 +296,22 @@ const ga = /* @__PURE__ */ v.forwardRef(function({ className: i, tone: t, as: a
     }
   },
   defaultVariants: { tone: "neutral" }
-}), ya = /* @__PURE__ */ v.forwardRef(function({ label: i, value: t, sub: a, tone: r, className: n, ...s }, l) {
-  return /* @__PURE__ */ g(
+}), Na = /* @__PURE__ */ m.forwardRef(function({ label: e, value: i, sub: a, tone: r, className: o, ...s }, l) {
+  return /* @__PURE__ */ h(
     "div",
     {
       ref: l,
       "data-tone": r ?? "neutral",
-      className: d("flex flex-col gap-1 self-start", n),
+      className: d("flex flex-col gap-1 self-start", o),
       ...s,
       children: [
-        /* @__PURE__ */ e("p", { className: Si({ tone: r }), children: t }),
-        /* @__PURE__ */ e("p", { className: "m-0 hds-type-caption text-muted-foreground", children: i }),
-        a && /* @__PURE__ */ e("p", { className: "m-0 hds-type-caption text-muted-foreground", children: a })
+        /* @__PURE__ */ t("p", { className: zt({ tone: r }), children: i }),
+        /* @__PURE__ */ t("p", { className: "m-0 hds-type-caption text-muted-foreground", children: e }),
+        a && /* @__PURE__ */ t("p", { className: "m-0 hds-type-caption text-muted-foreground", children: a })
       ]
     }
   );
-}), Ni = /* @__PURE__ */ $("mt-1.5 h-2 w-2 shrink-0 rounded-full", {
+}), Ct = /* @__PURE__ */ $("mt-1.5 h-2 w-2 shrink-0 rounded-full", {
   variants: {
     tone: {
       neutral: "bg-border",
@@ -320,51 +322,51 @@ const ga = /* @__PURE__ */ v.forwardRef(function({ className: i, tone: t, as: a
     }
   },
   defaultVariants: { tone: "neutral" }
-}), xa = /* @__PURE__ */ v.forwardRef(
-  function({ tone: i, title: t, notes: a, trailing: r, className: n, ...s }, l) {
-    return /* @__PURE__ */ g(
+}), za = /* @__PURE__ */ m.forwardRef(
+  function({ tone: e, title: i, notes: a, trailing: r, className: o, ...s }, l) {
+    return /* @__PURE__ */ h(
       "div",
       {
         ref: l,
-        "data-tone": i ?? "neutral",
-        className: d("flex items-start gap-3", n),
+        "data-tone": e ?? "neutral",
+        className: d("flex items-start gap-3", o),
         ...s,
         children: [
-          /* @__PURE__ */ e("span", { "aria-hidden": "true", className: Ni({ tone: i }) }),
-          /* @__PURE__ */ g("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ e("p", { className: "m-0 hds-type-ui text-foreground", children: t }),
-            a == null ? void 0 : a.map((p, c) => /* @__PURE__ */ e("p", { className: "m-0 hds-type-caption text-muted-foreground", children: p }, c))
+          /* @__PURE__ */ t("span", { "aria-hidden": "true", className: Ct({ tone: e }) }),
+          /* @__PURE__ */ h("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ t("p", { className: "m-0 hds-type-ui text-foreground", children: i }),
+            a == null ? void 0 : a.map((p, c) => /* @__PURE__ */ t("p", { className: "m-0 hds-type-caption text-muted-foreground", children: p }, c))
           ] }),
-          r && /* @__PURE__ */ e("div", { className: "shrink-0", children: r })
+          r && /* @__PURE__ */ t("div", { className: "shrink-0", children: r })
         ]
       }
     );
   }
-), zi = U.Trigger, Ge = /* @__PURE__ */ se(U.Portal), Ci = U.Close, je = /* @__PURE__ */ v.forwardRef(function({ className: i, ...t }, a) {
-  return /* @__PURE__ */ e(
+), Dt = U.Trigger, Ke = /* @__PURE__ */ ue(U.Portal), Tt = U.Close, Je = /* @__PURE__ */ m.forwardRef(function({ className: e, ...i }, a) {
+  return /* @__PURE__ */ t(
     U.Overlay,
     {
       ref: a,
-      className: d("fixed inset-0 z-50 bg-scrim/60 backdrop-blur-sm", i),
-      ...t
+      className: d("fixed inset-0 z-50 bg-scrim/60 backdrop-blur-sm", e),
+      ...i
     }
   );
-}), Di = /* @__PURE__ */ v.forwardRef(function({ className: i, children: t, hideClose: a = !1, container: r, ...n }, s) {
-  return /* @__PURE__ */ g(Ge, { container: r, children: [
-    /* @__PURE__ */ e(je, {}),
-    /* @__PURE__ */ g(
+}), Rt = /* @__PURE__ */ m.forwardRef(function({ className: e, children: i, hideClose: a = !1, container: r, ...o }, s) {
+  return /* @__PURE__ */ h(Ke, { container: r, children: [
+    /* @__PURE__ */ t(Je, {}),
+    /* @__PURE__ */ h(
       U.Content,
       {
         ref: s,
         className: d(
           // 16px of page margin each side, so the panel never sits flush to a 390px viewport (hds#522)
           "fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2*var(--semantic-space-scale-sm))] max-h-[calc(100dvh-2*var(--semantic-space-scale-sm))] max-w-lg overflow-y-auto -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-overlay hds-focus",
-          i
+          e
         ),
-        ...n,
+        ...o,
         children: [
-          t,
-          !a && /* @__PURE__ */ g(
+          i,
+          !a && /* @__PURE__ */ h(
             U.Close,
             {
               className: d(
@@ -374,8 +376,8 @@ const ga = /* @__PURE__ */ v.forwardRef(function({ className: i, tone: t, as: a
                 "disabled:pointer-events-none"
               ),
               children: [
-                /* @__PURE__ */ e(ve, { "aria-hidden": "true", className: "size-4" }),
-                /* @__PURE__ */ e("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ t($e, { "aria-hidden": "true", className: "size-4" }),
+                /* @__PURE__ */ t("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -383,49 +385,49 @@ const ga = /* @__PURE__ */ v.forwardRef(function({ className: i, tone: t, as: a
       }
     )
   ] });
-}), Ti = /* @__PURE__ */ v.forwardRef(function({ className: i, ...t }, a) {
-  return /* @__PURE__ */ e("div", { ref: a, className: d("flex flex-col space-y-1.5 text-left", i), ...t });
-}), Ri = /* @__PURE__ */ v.forwardRef(function({ className: i, ...t }, a) {
-  return /* @__PURE__ */ e(
+}), Pt = /* @__PURE__ */ m.forwardRef(function({ className: e, ...i }, a) {
+  return /* @__PURE__ */ t("div", { ref: a, className: d("flex flex-col space-y-1.5 text-left", e), ...i });
+}), Lt = /* @__PURE__ */ m.forwardRef(function({ className: e, ...i }, a) {
+  return /* @__PURE__ */ t(
     "div",
     {
       ref: a,
-      className: d("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2", i),
-      ...t
+      className: d("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2", e),
+      ...i
     }
   );
-}), Pi = /* @__PURE__ */ v.forwardRef(function({ className: i, children: t, ...a }, r) {
-  return /* @__PURE__ */ e(U.Title, { asChild: !0, children: /* @__PURE__ */ e(We, { ref: r, as: "h2", variant: "title", className: i, ...a, children: t }) });
-}), Li = /* @__PURE__ */ v.forwardRef(function({ className: i, children: t, ...a }, r) {
-  return /* @__PURE__ */ e(U.Description, { asChild: !0, children: /* @__PURE__ */ e(
-    We,
+}), Vt = /* @__PURE__ */ m.forwardRef(function({ className: e, children: i, ...a }, r) {
+  return /* @__PURE__ */ t(U.Title, { asChild: !0, children: /* @__PURE__ */ t(Ue, { ref: r, as: "h2", variant: "title", className: e, ...a, children: i }) });
+}), It = /* @__PURE__ */ m.forwardRef(function({ className: e, children: i, ...a }, r) {
+  return /* @__PURE__ */ t(U.Description, { asChild: !0, children: /* @__PURE__ */ t(
+    Ue,
     {
       ref: r,
       as: "p",
       variant: "caption",
-      className: d("text-muted-foreground", i),
+      className: d("text-muted-foreground", e),
       ...a,
-      children: t
+      children: i
     }
   ) });
 });
-function Vi(o) {
-  return /* @__PURE__ */ e(U.Root, { ...o });
+function At(n) {
+  return /* @__PURE__ */ t(U.Root, { ...n });
 }
-const wa = /* @__PURE__ */ Object.assign(Vi, {
-  Trigger: zi,
-  Portal: Ge,
-  Overlay: je,
-  Content: Di,
-  Header: Ti,
-  Footer: Ri,
-  Title: Pi,
-  Description: Li,
-  Close: Ci,
+const Ca = /* @__PURE__ */ Object.assign(At, {
+  Trigger: Dt,
+  Portal: Ke,
+  Overlay: Je,
+  Content: Rt,
+  Header: Pt,
+  Footer: Lt,
+  Title: Vt,
+  Description: It,
+  Close: Tt,
   // Set here, not by a later `Dialog.displayName = …` write: a top-level
   // property write is a side effect that keeps the module alive.
   displayName: "Dialog"
-}), Ii = /* @__PURE__ */ $("m-0 shrink-0 border-solid", {
+}), Mt = /* @__PURE__ */ $("m-0 shrink-0 border-solid", {
   variants: {
     orientation: {
       horizontal: "w-full self-stretch border-t",
@@ -438,151 +440,151 @@ const wa = /* @__PURE__ */ Object.assign(Vi, {
     }
   },
   defaultVariants: { orientation: "horizontal", variant: "default" }
-}), ka = /* @__PURE__ */ v.forwardRef(
-  function({ orientation: i = "horizontal", variant: t, spacing: a, strong: r, style: n, className: s, ...l }, p) {
-    const c = r !== void 0 ? r ? "strong" : "default" : t, u = i === "horizontal";
-    return /* @__PURE__ */ e(
+}), Da = /* @__PURE__ */ m.forwardRef(
+  function({ orientation: e = "horizontal", variant: i, spacing: a, strong: r, style: o, className: s, ...l }, p) {
+    const c = r !== void 0 ? r ? "strong" : "default" : i, v = e === "horizontal";
+    return /* @__PURE__ */ t(
       "hr",
       {
         ref: p,
-        "aria-orientation": i ?? "horizontal",
+        "aria-orientation": e ?? "horizontal",
         "data-variant": c ?? "default",
-        className: d(Ii({ orientation: i, variant: c }), s),
+        className: d(Mt({ orientation: e, variant: c }), s),
         style: {
-          ...u ? { marginTop: a, marginBottom: a } : { marginLeft: a, marginRight: a },
-          ...n
+          ...v ? { marginTop: a, marginBottom: a } : { marginLeft: a, marginRight: a },
+          ...o
         },
         ...l
       }
     );
   }
 );
-function Mi(o) {
-  return /* @__PURE__ */ e(E.Root, { ...o });
+function Et(n) {
+  return /* @__PURE__ */ t(B.Root, { ...n });
 }
-const Ai = E.Trigger, Hi = E.Group, Ei = E.RadioGroup, Bi = E.Sub, Ue = /* @__PURE__ */ se(E.Portal), Ye = "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-overlay", ge = "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 hds-type-ui outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:ring-2 data-[highlighted]:ring-inset data-[highlighted]:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50", Wi = /* @__PURE__ */ v.forwardRef(function({ className: i, sideOffset: t = 4, container: a, ...r }, n) {
-  return /* @__PURE__ */ e(Ue, { container: a, children: /* @__PURE__ */ e(
-    E.Content,
+const Ht = B.Trigger, Bt = B.Group, Wt = B.RadioGroup, Ft = B.Sub, Ze = /* @__PURE__ */ ue(B.Portal), Qe = "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-overlay", xe = "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 hds-type-ui outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:ring-2 data-[highlighted]:ring-inset data-[highlighted]:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50", _t = /* @__PURE__ */ m.forwardRef(function({ className: e, sideOffset: i = 4, container: a, ...r }, o) {
+  return /* @__PURE__ */ t(Ze, { container: a, children: /* @__PURE__ */ t(
+    B.Content,
     {
-      ref: n,
-      sideOffset: t,
+      ref: o,
+      sideOffset: i,
       collisionPadding: 8,
-      className: d(Ye, i),
+      className: d(Qe, e),
       ...r
     }
   ) });
-}), Fi = /* @__PURE__ */ v.forwardRef(function({ className: i, ...t }, a) {
-  return /* @__PURE__ */ e(E.Item, { ref: a, className: d(ge, i), ...t });
-}), _i = /* @__PURE__ */ v.forwardRef(function({ className: i, children: t, ...a }, r) {
-  return /* @__PURE__ */ g(E.CheckboxItem, { ref: r, className: d(ge, "pl-6", i), ...a, children: [
-    /* @__PURE__ */ e("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ e(E.ItemIndicator, { children: /* @__PURE__ */ e(A, { icon: oe, size: 14, color: "currentColor", "aria-hidden": !0 }) }) }),
-    t
+}), Ot = /* @__PURE__ */ m.forwardRef(function({ className: e, ...i }, a) {
+  return /* @__PURE__ */ t(B.Item, { ref: a, className: d(xe, e), ...i });
+}), Gt = /* @__PURE__ */ m.forwardRef(function({ className: e, children: i, ...a }, r) {
+  return /* @__PURE__ */ h(B.CheckboxItem, { ref: r, className: d(xe, "pl-6", e), ...a, children: [
+    /* @__PURE__ */ t("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ t(B.ItemIndicator, { children: /* @__PURE__ */ t(A, { icon: pe, size: 14, color: "currentColor", "aria-hidden": !0 }) }) }),
+    i
   ] });
-}), Oi = /* @__PURE__ */ v.forwardRef(function({ className: i, children: t, ...a }, r) {
-  return /* @__PURE__ */ g(E.RadioItem, { ref: r, className: d(ge, "pl-6", i), ...a, children: [
-    /* @__PURE__ */ e("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ e(E.ItemIndicator, { children: /* @__PURE__ */ e(A, { icon: ri, size: 6, color: "currentColor", "aria-hidden": !0, className: "fill-current" }) }) }),
-    t
+}), jt = /* @__PURE__ */ m.forwardRef(function({ className: e, children: i, ...a }, r) {
+  return /* @__PURE__ */ h(B.RadioItem, { ref: r, className: d(xe, "pl-6", e), ...a, children: [
+    /* @__PURE__ */ t("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ t(B.ItemIndicator, { children: /* @__PURE__ */ t(A, { icon: ot, size: 6, color: "currentColor", "aria-hidden": !0, className: "fill-current" }) }) }),
+    i
   ] });
-}), Gi = /* @__PURE__ */ v.forwardRef(function({ className: i, ...t }, a) {
-  return /* @__PURE__ */ e(
-    E.Label,
+}), Ut = /* @__PURE__ */ m.forwardRef(function({ className: e, ...i }, a) {
+  return /* @__PURE__ */ t(
+    B.Label,
     {
       ref: a,
-      className: d("px-2 py-1.5 hds-type-ui text-muted-foreground", i),
-      ...t
+      className: d("px-2 py-1.5 hds-type-ui text-muted-foreground", e),
+      ...i
     }
   );
-}), ji = /* @__PURE__ */ v.forwardRef(function({ className: i, ...t }, a) {
-  return /* @__PURE__ */ e(
-    E.Separator,
+}), Yt = /* @__PURE__ */ m.forwardRef(function({ className: e, ...i }, a) {
+  return /* @__PURE__ */ t(
+    B.Separator,
     {
       ref: a,
-      className: d("-mx-1 my-1 h-px bg-border", i),
-      ...t
+      className: d("-mx-1 my-1 h-px bg-border", e),
+      ...i
     }
   );
-}), Ui = /* @__PURE__ */ v.forwardRef(function({ className: i, children: t, ...a }, r) {
-  return /* @__PURE__ */ g(
-    E.SubTrigger,
+}), qt = /* @__PURE__ */ m.forwardRef(function({ className: e, children: i, ...a }, r) {
+  return /* @__PURE__ */ h(
+    B.SubTrigger,
     {
       ref: r,
-      className: d(ge, "data-[state=open]:bg-accent", i),
+      className: d(xe, "data-[state=open]:bg-accent", e),
       ...a,
       children: [
-        t,
-        /* @__PURE__ */ e(A, { icon: xe, size: 14, color: "currentColor", "aria-hidden": !0, className: "ml-auto" })
+        i,
+        /* @__PURE__ */ t(A, { icon: Ce, size: 14, color: "currentColor", "aria-hidden": !0, className: "ml-auto" })
       ]
     }
   );
-}), Yi = /* @__PURE__ */ v.forwardRef(function({ className: i, container: t, ...a }, r) {
-  return /* @__PURE__ */ e(Ue, { container: t, children: /* @__PURE__ */ e(E.SubContent, { ref: r, className: d(Ye, i), ...a }) });
-}), Sa = /* @__PURE__ */ Object.assign(Mi, {
-  Trigger: Ai,
-  Content: Wi,
-  Item: Fi,
-  CheckboxItem: _i,
-  RadioGroup: Ei,
-  RadioItem: Oi,
-  Label: Gi,
-  Separator: ji,
-  Group: Hi,
-  Sub: Bi,
-  SubTrigger: Ui,
-  SubContent: Yi,
+}), Xt = /* @__PURE__ */ m.forwardRef(function({ className: e, container: i, ...a }, r) {
+  return /* @__PURE__ */ t(Ze, { container: i, children: /* @__PURE__ */ t(B.SubContent, { ref: r, className: d(Qe, e), ...a }) });
+}), Ta = /* @__PURE__ */ Object.assign(Et, {
+  Trigger: Ht,
+  Content: _t,
+  Item: Ot,
+  CheckboxItem: Gt,
+  RadioGroup: Wt,
+  RadioItem: jt,
+  Label: Ut,
+  Separator: Yt,
+  Group: Bt,
+  Sub: Ft,
+  SubTrigger: qt,
+  SubContent: Xt,
   // Set here, not by a later `Menu.displayName = …` write: a top-level
   // property write is a side effect that keeps the module alive.
   displayName: "Menu"
 });
-function qi(o) {
-  return /* @__PURE__ */ e(ie.Root, { ...o });
+function Kt(n) {
+  return /* @__PURE__ */ t(se.Root, { ...n });
 }
-const Xi = ie.Trigger, Ki = ie.Anchor, Ji = ie.Close, Zi = /* @__PURE__ */ se(ie.Portal), Qi = /* @__PURE__ */ v.forwardRef(function({ className: i, align: t = "center", sideOffset: a = 4, container: r, ...n }, s) {
-  return /* @__PURE__ */ e(Zi, { container: r, children: /* @__PURE__ */ e(
-    ie.Content,
+const Jt = se.Trigger, Zt = se.Anchor, Qt = se.Close, ei = /* @__PURE__ */ ue(se.Portal), ti = /* @__PURE__ */ m.forwardRef(function({ className: e, align: i = "center", sideOffset: a = 4, container: r, ...o }, s) {
+  return /* @__PURE__ */ t(ei, { container: r, children: /* @__PURE__ */ t(
+    se.Content,
     {
       ref: s,
-      align: t,
+      align: i,
       sideOffset: a,
       collisionPadding: 8,
       className: d(
         "z-50 w-72 rounded-md border border-border bg-popover p-4",
         "text-popover-foreground shadow-overlay outline-none hds-focus",
-        i
+        e
       ),
-      ...n
+      ...o
     }
   ) });
-}), be = /* @__PURE__ */ Object.assign(qi, {
-  Trigger: Xi,
-  Anchor: Ki,
-  Content: Qi,
-  Close: Ji,
+}), ke = /* @__PURE__ */ Object.assign(Kt, {
+  Trigger: Jt,
+  Anchor: Zt,
+  Content: ti,
+  Close: Qt,
   // Set here, not by a later `Popover.displayName = …` write: a top-level
   // property write is a side effect that keeps the module alive.
   displayName: "Popover"
-}), et = /* @__PURE__ */ se(Z.Portal), it = /* @__PURE__ */ v.forwardRef(function({ className: i, sideOffset: t = 6, children: a, container: r, ...n }, s) {
-  return /* @__PURE__ */ e(et, { container: r, children: /* @__PURE__ */ g(
-    Z.Content,
+}), ii = /* @__PURE__ */ ue(re.Portal), ai = /* @__PURE__ */ m.forwardRef(function({ className: e, sideOffset: i = 6, children: a, container: r, ...o }, s) {
+  return /* @__PURE__ */ t(ii, { container: r, children: /* @__PURE__ */ h(
+    re.Content,
     {
       ref: s,
-      sideOffset: t,
+      sideOffset: i,
       collisionPadding: 8,
       className: d(
         "z-50 max-w-xs select-none px-2 py-1 shadow-floating",
         "bg-[var(--semantic-color-surface-inverse)] rounded-[var(--primitive-radius-4)]",
         // tier-ok: 4px primitive radius, no semantic 4px token
-        i
+        e
       ),
       style: {
-        ...z.typeStyles.caption,
+        ...D.typeStyles.caption,
         color: "var(--semantic-color-content-inverse)",
         margin: 0
       },
-      ...n,
+      ...o,
       children: [
         a,
-        /* @__PURE__ */ e(
-          Z.Arrow,
+        /* @__PURE__ */ t(
+          re.Arrow,
           {
             className: "fill-[var(--semantic-color-surface-inverse)]",
             width: 11,
@@ -593,20 +595,20 @@ const Xi = ie.Trigger, Ki = ie.Anchor, Ji = ie.Close, Zi = /* @__PURE__ */ se(ie
     }
   ) });
 });
-function tt({
-  delayDuration: o = 300,
-  children: i,
-  ...t
+function ri({
+  delayDuration: n = 300,
+  children: e,
+  ...i
 }) {
-  return /* @__PURE__ */ e(Z.Provider, { delayDuration: o, children: /* @__PURE__ */ e(Z.Root, { ...t, children: i }) });
+  return /* @__PURE__ */ t(re.Provider, { delayDuration: n, children: /* @__PURE__ */ t(re.Root, { ...i, children: e }) });
 }
-const Na = /* @__PURE__ */ Object.assign(tt, {
-  Trigger: Z.Trigger,
-  Content: it,
+const Ra = /* @__PURE__ */ Object.assign(ri, {
+  Trigger: re.Trigger,
+  Content: ai,
   // Set here, not by a later `Tooltip.displayName = …` write: a top-level
   // property write is a side effect that keeps the module alive.
   displayName: "Tooltip"
-}), at = /* @__PURE__ */ $(
+}), ni = /* @__PURE__ */ $(
   "inline-flex max-w-[var(--semantic-typography-mono-max-width)] items-center whitespace-nowrap rounded-none border-0 bg-[var(--component-badge-bg)] px-[var(--semantic-space-subgrid-gap)] text-foreground [font-family:var(--semantic-typography-mono-font-family)] [font-size:var(--semantic-typography-mono-font-size)] [font-weight:var(--semantic-typography-mono-font-weight)] [letter-spacing:var(--semantic-typography-mono-letter-spacing)]",
   {
     variants: {
@@ -620,48 +622,48 @@ const Na = /* @__PURE__ */ Object.assign(tt, {
     defaultVariants: { density: "comfortable" }
   }
 );
-function za({
-  children: o,
-  style: i,
-  density: t,
+function Pa({
+  children: n,
+  style: e,
+  density: i,
   compact: a,
   copyable: r = !1
 }) {
-  const [n, s] = Y(!1), l = a !== void 0 ? a ? "compact" : "comfortable" : t ?? "comfortable";
+  const [o, s] = X(!1), l = a !== void 0 ? a ? "compact" : "comfortable" : i ?? "comfortable";
   function p() {
-    typeof o == "string" && navigator.clipboard.writeText(o).then(() => {
+    typeof n == "string" && navigator.clipboard.writeText(n).then(() => {
       s(!0), setTimeout(() => s(!1), 2e3);
     });
   }
-  const c = /* @__PURE__ */ e(
+  const c = /* @__PURE__ */ t(
     "code",
     {
       "data-density": l,
-      className: at({ density: l }),
-      style: r ? void 0 : i,
-      children: o
+      className: ni({ density: l }),
+      style: r ? void 0 : e,
+      children: n
     }
   );
-  return r ? /* @__PURE__ */ g(
+  return r ? /* @__PURE__ */ h(
     "span",
     {
       style: {
         display: "inline-flex",
         alignItems: "center",
-        gap: z.semantic.space.subgrid.gap,
-        ...i
+        gap: D.semantic.space.subgrid.gap,
+        ...e
       },
       children: [
-        /* @__PURE__ */ e(
-          me,
+        /* @__PURE__ */ t(
+          be,
           {
             iconOnly: !0,
             size: "sm",
             variant: "tertiary",
-            "aria-label": n ? "Copied" : "Copy",
+            "aria-label": o ? "Copied" : "Copy",
             onClick: p,
-            style: n ? { color: "var(--semantic-color-content-accent)" } : void 0,
-            iconLeft: /* @__PURE__ */ e(A, { icon: n ? oe : ni, size: "small" })
+            style: o ? { color: "var(--semantic-color-content-accent)" } : void 0,
+            iconLeft: /* @__PURE__ */ t(A, { icon: o ? pe : st, size: "small" })
           }
         ),
         c
@@ -669,29 +671,34 @@ function za({
     }
   ) : c;
 }
-function Ca({ href: o, children: i, externalIcon: t = !0 }) {
-  const { LinkComponent: a } = Oe();
-  return o.startsWith("/") ? /* @__PURE__ */ e(a, { to: o, className: "hds-link", children: i }) : /* @__PURE__ */ g("a", { href: o, target: "_blank", rel: "noopener noreferrer", className: "hds-focus hds-link", children: [
-    i,
-    t && /* @__PURE__ */ e(
+function oi(n) {
+  const e = n.trim();
+  return e.startsWith("//") || e.startsWith("/\\") ? "external" : e.startsWith("/") ? "internal" : /^https?:/i.test(e) ? "external" : "plain";
+}
+function La({ href: n, children: e, externalIcon: i = !0 }) {
+  const { LinkComponent: a } = Xe(), r = oi(n);
+  return r === "internal" ? /* @__PURE__ */ t(a, { to: n, className: "hds-focus hds-link", children: e }) : r === "plain" ? /* @__PURE__ */ t("a", { href: n, className: "hds-focus hds-link", children: e }) : /* @__PURE__ */ h("a", { href: n, target: "_blank", rel: "noopener noreferrer", className: "hds-focus hds-link", children: [
+    e,
+    /* @__PURE__ */ t("span", { className: "sr-only", children: " (opens in new tab)" }),
+    i && /* @__PURE__ */ t(
       A,
       {
-        icon: oi,
+        icon: lt,
         size: 11,
         color: "currentColor",
         "aria-hidden": !0,
         style: {
           display: "inline",
           verticalAlign: "middle",
-          marginLeft: z.semantic.space.subgrid.xs,
-          marginBottom: z.semantic.space.subgrid.hairline
+          marginLeft: D.semantic.space.subgrid.xs,
+          marginBottom: D.semantic.space.subgrid.hairline
         }
       }
     )
   ] });
 }
-const Q = "w-full max-w-[var(--hds-form-control-max-width,40rem)]", rt = /* @__PURE__ */ $(
-  "flex w-full rounded-md border bg-background text-foreground ring-offset-background transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-70",
+const ne = "w-full max-w-[var(--hds-form-control-max-width,40rem)]", si = /* @__PURE__ */ $(
+  "flex w-full rounded-md border bg-background text-foreground ring-offset-background transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-muted disabled:text-[var(--semantic-color-content-disabled)]",
   {
     variants: {
       size: {
@@ -714,8 +721,8 @@ const Q = "w-full max-w-[var(--hds-form-control-max-width,40rem)]", rt = /* @__P
       invalid: !1
     }
   }
-), nt = /* @__PURE__ */ $(
-  "relative flex w-full items-center rounded-md border bg-background text-foreground ring-offset-background transition-colors has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-muted has-[input:disabled]:opacity-70",
+), li = /* @__PURE__ */ $(
+  "relative flex w-full items-center rounded-md border bg-background text-foreground ring-offset-background transition-colors has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-muted",
   {
     variants: {
       size: {
@@ -738,12 +745,12 @@ const Q = "w-full max-w-[var(--hds-form-control-max-width,40rem)]", rt = /* @__P
       invalid: !1
     }
   }
-), ot = "h-full border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 disabled:bg-transparent disabled:opacity-100", st = /* @__PURE__ */ new Set([
+), ci = "h-full border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 disabled:bg-transparent disabled:opacity-100", di = /* @__PURE__ */ new Set([
   "number",
   "date",
   "time",
   "datetime-local"
-]), lt = {
+]), pi = {
   sm: {
     restPadL: "pl-2",
     restPadR: "pr-2",
@@ -784,140 +791,142 @@ const Q = "w-full max-w-[var(--hds-form-control-max-width,40rem)]", rt = /* @__P
     suffixGap: "pr-2.5"
   }
 };
-function Pe(o) {
-  return o != null && typeof o != "boolean" && o !== "";
+function Ee(n) {
+  return n != null && typeof n != "boolean" && n !== "";
 }
-const Da = /* @__PURE__ */ v.forwardRef(function({
-  type: i = "text",
-  size: t = "md",
+const Va = /* @__PURE__ */ m.forwardRef(function({
+  type: e = "text",
+  size: i = "md",
   textStyle: a = "body",
   id: r,
-  label: n,
+  label: o,
   helperText: s,
   leadingVisual: l,
   trailingVisual: p,
   prefix: c,
-  suffix: u,
-  error: m,
-  errorMessage: y,
-  disabled: k,
-  loading: b = !1,
-  className: w,
-  inputClassName: S,
-  onChange: h,
-  ...C
-}, L) {
-  const I = v.useId(), T = r ?? I, V = v.useRef(null), D = le(), x = !!m || D === "error", R = b || D === "loading", B = !!k || R || D === "disabled", q = s ? `${T}-hint` : void 0, W = x && (y || D === "error") ? `${T}-error` : void 0, G = [q, W].filter(Boolean).join(" ") || void 0, [te, ae] = v.useState(() => typeof C.defaultValue == "string" ? C.defaultValue : typeof C.defaultValue == "number" ? String(C.defaultValue) : ""), ce = typeof C.value == "string" ? C.value : typeof C.value == "number" ? String(C.value) : void 0, de = ce ?? te, M = lt[t], re = !!l, K = !!p, f = Pe(c), N = Pe(u), F = f || N, ne = !st.has(i) && de.length > 0 && !B && !R, pe = R || K || ne;
-  function Ke(_) {
-    if (V.current = _, typeof L == "function") {
-      L(_);
+  suffix: v,
+  error: u,
+  errorMessage: b,
+  disabled: w,
+  loading: x = !1,
+  readOnly: S,
+  className: N,
+  inputClassName: f,
+  onChange: k,
+  ...R
+}, H) {
+  const V = m.useId(), C = r ?? V, P = m.useRef(null), L = me(), y = !!u || L === "error", M = x || L === "loading", Y = !!w || L === "disabled", F = y && (b || L === "error") ? `${C}-error` : void 0, _ = s && !F ? `${C}-hint` : void 0, Q = [_, F].filter(Boolean).join(" ") || void 0, [ve, le] = m.useState(() => typeof R.defaultValue == "string" ? R.defaultValue : typeof R.defaultValue == "number" ? String(R.defaultValue) : ""), ee = typeof R.value == "string" ? R.value : typeof R.value == "number" ? String(R.value) : void 0, ge = ee ?? ve, I = pi[i], fe = !!l, ce = !!p, te = Ee(c), q = Ee(v), ie = te || q, de = !di.has(e) && ge.length > 0 && !Y && !M, g = M || ce || de;
+  function z(O) {
+    if (P.current = O, typeof H == "function") {
+      H(O);
       return;
     }
-    L && (L.current = _);
+    H && (H.current = O);
   }
-  function Je() {
-    var Ce;
-    const _ = V.current;
-    if (!_) return;
-    const he = (Ce = Object.getOwnPropertyDescriptor(
+  function W() {
+    var Ve;
+    const O = P.current;
+    if (!O) return;
+    const we = (Ve = Object.getOwnPropertyDescriptor(
       window.HTMLInputElement.prototype,
       "value"
-    )) == null ? void 0 : Ce.set;
-    he == null || he.call(_, ""), _.dispatchEvent(new Event("input", { bubbles: !0 })), _.focus();
+    )) == null ? void 0 : Ve.set;
+    we == null || we.call(O, ""), O.dispatchEvent(new Event("input", { bubbles: !0 })), O.focus();
   }
-  const Ze = D || (R ? "loading" : B ? "disabled" : x ? "error" : de.length > 0 ? "filled" : "default"), Qe = re ? M.leadPad : f ? M.prefixGap : M.restPadL, ei = pe ? M.trailPad : N ? M.suffixGap : M.restPadR, Ne = d(
+  const K = L || (M ? "loading" : Y ? "disabled" : y ? "error" : ge.length > 0 ? "filled" : "default"), J = fe ? I.leadPad : te ? I.prefixGap : I.restPadL, it = g ? I.trailPad : q ? I.suffixGap : I.restPadR, Pe = d(
     "flex shrink-0 items-center whitespace-nowrap text-muted-foreground",
-    M.iconWrap
-  ), ze = /* @__PURE__ */ g("div", { className: F ? "relative min-w-0 flex-1 self-stretch" : "relative w-full", children: [
-    re && /* @__PURE__ */ e(
+    I.iconWrap
+  ), Le = /* @__PURE__ */ h("div", { className: ie ? "relative min-w-0 flex-1 self-stretch" : "relative w-full", children: [
+    fe && /* @__PURE__ */ t(
       "span",
       {
         "aria-hidden": "true",
         className: d(
           "pointer-events-none absolute left-0 flex items-center text-muted-foreground",
-          M.inset,
-          M.iconWrap
+          I.inset,
+          I.iconWrap
         ),
         children: l
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ t(
       "input",
       {
-        ref: Ke,
-        id: T,
-        type: i,
-        disabled: B,
-        "aria-disabled": B || void 0,
-        "aria-busy": R || void 0,
-        "aria-describedby": G,
-        "aria-errormessage": W,
-        "aria-invalid": x || void 0,
-        "data-state": Ze,
-        "data-size": t,
-        "data-search-input": i === "search" ? "true" : void 0,
+        ref: z,
+        id: C,
+        type: e,
+        disabled: Y,
+        readOnly: M || S,
+        "aria-disabled": Y || void 0,
+        "aria-busy": M || void 0,
+        "aria-describedby": Q,
+        "aria-errormessage": F,
+        "aria-invalid": y || void 0,
+        "data-state": K,
+        "data-size": i,
+        "data-search-input": e === "search" ? "true" : void 0,
         className: d(
-          rt({ size: t, textStyle: a, invalid: x }),
-          Qe,
-          ei,
-          F && ot,
-          S
+          si({ size: i, textStyle: a, invalid: y }),
+          J,
+          it,
+          ie && ci,
+          f
         ),
-        onChange: (_) => {
-          ce === void 0 && ae(_.target.value), h == null || h(_);
+        onChange: (O) => {
+          ee === void 0 && le(O.target.value), k == null || k(O);
         },
-        ...C
+        ...R
       }
     ),
-    R && /* @__PURE__ */ e(
+    M && /* @__PURE__ */ t(
       "span",
       {
         "aria-hidden": "true",
         className: d(
           "pointer-events-none absolute right-0 flex items-center text-muted-foreground",
-          M.inset
+          I.inset
         ),
-        children: /* @__PURE__ */ e(si, { className: d("animate-spin", M.iconClass) })
+        children: /* @__PURE__ */ t(ct, { className: d("animate-spin motion-reduce:animate-none", I.iconClass) })
       }
     ),
-    !R && K && /* @__PURE__ */ e(
+    !M && ce && /* @__PURE__ */ t(
       "span",
       {
         "aria-hidden": "true",
         className: d(
           "pointer-events-none absolute right-0 flex items-center text-muted-foreground",
-          M.inset,
-          M.iconWrap
+          I.inset,
+          I.iconWrap
         ),
         children: p
       }
     ),
-    !R && !K && ne && /* @__PURE__ */ e(
+    !M && !ce && de && /* @__PURE__ */ t(
       "button",
       {
         type: "button",
-        onClick: Je,
-        "aria-label": i === "search" ? "Clear search" : "Clear input",
+        onClick: W,
+        "aria-label": e === "search" ? "Clear search" : "Clear input",
         className: d(
           "absolute right-0 flex items-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
-          M.inset
+          I.inset
         ),
-        children: /* @__PURE__ */ e(ve, { className: M.iconClass, "aria-hidden": "true" })
+        children: /* @__PURE__ */ t($e, { className: I.iconClass, "aria-hidden": "true" })
       }
     )
   ] });
-  return /* @__PURE__ */ g("div", { className: d("flex flex-col gap-1.5", Q, w), children: [
-    n && /* @__PURE__ */ e("label", { htmlFor: T, className: "hds-type-ui text-foreground", children: n }),
-    F ? /* @__PURE__ */ g("div", { className: nt({ size: t, textStyle: a, invalid: x }), children: [
-      f && /* @__PURE__ */ e("span", { className: d(Ne, M.prefixPad), children: c }),
-      ze,
-      N && /* @__PURE__ */ e("span", { className: d(Ne, M.suffixPad), children: u })
-    ] }) : ze,
-    s && !W && /* @__PURE__ */ e("span", { id: q, className: "hds-type-caption text-muted-foreground", children: s }),
-    x && (y || D === "error") && /* @__PURE__ */ e("span", { id: W, role: "alert", className: "hds-type-caption text-destructive", children: y || "Field error" })
+  return /* @__PURE__ */ h("div", { className: d("flex flex-col gap-1.5", ne, N), children: [
+    o && /* @__PURE__ */ t("label", { htmlFor: C, className: "hds-type-ui text-foreground", children: o }),
+    ie ? /* @__PURE__ */ h("div", { className: li({ size: i, textStyle: a, invalid: y }), children: [
+      te && /* @__PURE__ */ t("span", { className: d(Pe, I.prefixPad), children: c }),
+      Le,
+      q && /* @__PURE__ */ t("span", { className: d(Pe, I.suffixPad), children: v })
+    ] }) : Le,
+    _ && /* @__PURE__ */ t("span", { id: _, className: "hds-type-caption text-muted-foreground", children: s }),
+    y && (b || L === "error") && /* @__PURE__ */ t("span", { id: F, role: "alert", className: "hds-type-caption text-destructive", children: b || "Field error" })
   ] });
-}), ct = /* @__PURE__ */ $(
-  "flex w-full rounded-md border bg-background px-3 py-2 hds-type-ui text-foreground ring-offset-background transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-70",
+}), ui = /* @__PURE__ */ $(
+  "flex w-full rounded-md border bg-background px-3 py-2 hds-type-ui text-foreground ring-offset-background transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-muted disabled:text-[var(--semantic-color-content-disabled)]",
   {
     variants: {
       resize: {
@@ -935,49 +944,57 @@ const Da = /* @__PURE__ */ v.forwardRef(function({
       invalid: !1
     }
   }
-), Ta = /* @__PURE__ */ v.forwardRef(
+), Ia = /* @__PURE__ */ m.forwardRef(
   function({
-    id: i,
-    label: t,
+    id: e,
+    label: i,
     helperText: a,
     error: r,
-    errorMessage: n,
+    errorMessage: o,
     disabled: s,
     resize: l = "vertical",
     rows: p = 4,
     className: c,
-    textareaClassName: u,
-    ...m
-  }, y) {
-    const k = v.useId(), b = i ?? k, w = !!r, S = a ? `${b}-hint` : void 0, h = w && n ? `${b}-error` : void 0, C = [S, h].filter(Boolean).join(" ") || void 0, L = s ? "disabled" : w ? "error" : "default";
-    return /* @__PURE__ */ g("div", { className: d("flex flex-col gap-1.5", Q, c), children: [
-      t && /* @__PURE__ */ e("label", { htmlFor: b, className: "hds-type-ui text-foreground", children: t }),
-      /* @__PURE__ */ e(
+    textareaClassName: v,
+    ...u
+  }, b) {
+    const w = m.useId(), x = e ?? w, S = !!r, N = S && o ? `${x}-error` : void 0, f = a && !N ? `${x}-hint` : void 0, k = [f, N].filter(Boolean).join(" ") || void 0, R = s ? "disabled" : S ? "error" : "default";
+    return /* @__PURE__ */ h("div", { className: d("flex flex-col gap-1.5", ne, c), children: [
+      i && /* @__PURE__ */ t("label", { htmlFor: x, className: "hds-type-ui text-foreground", children: i }),
+      /* @__PURE__ */ t(
         "textarea",
         {
-          ref: y,
-          id: b,
+          ref: b,
+          id: x,
           rows: p,
           disabled: s,
           "aria-disabled": s || void 0,
-          "aria-describedby": C,
-          "aria-errormessage": h,
-          "aria-invalid": w || void 0,
-          "data-state": L,
-          className: d(ct({ resize: l, invalid: w }), u),
-          ...m
+          "aria-describedby": k,
+          "aria-errormessage": N,
+          "aria-invalid": S || void 0,
+          "data-state": R,
+          className: d(ui({ resize: l, invalid: S }), v),
+          ...u
         }
       ),
-      a && !h && /* @__PURE__ */ e("span", { id: S, className: "hds-type-caption text-muted-foreground", children: a }),
-      w && n && /* @__PURE__ */ e("span", { id: h, role: "alert", className: "hds-type-caption text-destructive", children: n })
+      f && /* @__PURE__ */ t("span", { id: f, className: "hds-type-caption text-muted-foreground", children: a }),
+      S && o && /* @__PURE__ */ t("span", { id: N, role: "alert", className: "hds-type-caption text-destructive", children: o })
     ] });
   }
 );
-function ke({
-  disabled: o,
-  frozenState: i = null
+function He(n) {
+  if (!n) return !0;
+  try {
+    return n.matches(":focus-visible");
+  } catch {
+    return !0;
+  }
+}
+function Te({
+  disabled: n,
+  frozenState: e = null
 }) {
-  const [t, a] = Y(!1), [r, n] = Y(!1), [s, l] = Y(!1), p = o === !0 || i === "disabled", c = i ?? (p ? "disabled" : r ? "pressed" : t ? "hover" : s ? "focused" : "rest");
+  const [i, a] = X(!1), [r, o] = X(!1), [s, l] = X(!1), p = n === !0 || e === "disabled", c = e ?? (p ? "disabled" : r ? "pressed" : s ? "focused" : i ? "hover" : "rest");
   return {
     visualState: c,
     isHover: c === "hover",
@@ -987,19 +1004,24 @@ function ke({
     handlers: {
       onMouseEnter: () => a(!0),
       onMouseLeave: () => {
-        a(!1), n(!1);
+        a(!1), o(!1);
+      },
+      onPointerDown: () => o(!0),
+      onPointerUp: () => o(!1),
+      onPointerCancel: () => o(!1),
+      // `focused` means keyboard-visible focus, not just "has focus": a mouse
+      // click focuses a checkbox/radio/switch but must not draw the ring.
+      onFocus: (v) => l(He(v)),
+      onKeyDown: (v) => {
+        He(v) && l(!0);
       },
-      onPointerDown: () => n(!0),
-      onPointerUp: () => n(!1),
-      onPointerCancel: () => n(!1),
-      onFocus: () => l(!0),
       onBlur: () => {
-        l(!1), n(!1);
+        l(!1), o(!1);
       }
     }
   };
 }
-const dt = /* @__PURE__ */ $(
+const mi = /* @__PURE__ */ $(
   "relative inline-flex items-center gap-[var(--semantic-space-subgrid-gap)] rounded-md py-[var(--semantic-space-subgrid-gap)] select-none hds-touch-row",
   {
     variants: {
@@ -1013,7 +1035,7 @@ const dt = /* @__PURE__ */ $(
     },
     defaultVariants: { state: "rest" }
   }
-), pt = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
+), vi = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
   variants: {
     state: {
       rest: "cursor-pointer",
@@ -1024,7 +1046,7 @@ const dt = /* @__PURE__ */ $(
     }
   },
   defaultVariants: { state: "rest" }
-}), ut = /* @__PURE__ */ $(
+}), gi = /* @__PURE__ */ $(
   "inline-flex shrink-0 items-center justify-center w-[var(--semantic-size-control-md)] h-[var(--semantic-size-control-md)] rounded-[var(--semantic-radius-control)] border-solid border-[length:var(--semantic-borderWidth-emphasis)] outline-offset-2",
   {
     variants: {
@@ -1073,90 +1095,103 @@ const dt = /* @__PURE__ */ $(
     defaultVariants: { state: "rest", on: !1 }
   }
 );
-function mt(o, i) {
-  typeof o == "function" ? o(i) : o && (o.current = i);
+function fi(n, e) {
+  typeof n == "function" ? n(e) : n && (n.current = e);
 }
-const Ra = /* @__PURE__ */ ee(
-  function({ label: i, checked: t, onChange: a, indeterminate: r = !1, onFocus: n, onBlur: s, disabled: l, ...p }, c) {
-    const u = $e(null), m = le(), { visualState: y, isHover: k, isFocused: b, isPressed: w, isDisabled: S, handlers: h } = ke({
-      disabled: l,
-      frozenState: m
+const Aa = /* @__PURE__ */ oe(
+  function({
+    label: e,
+    checked: i,
+    onChange: a,
+    indeterminate: r = !1,
+    onFocus: o,
+    onKeyDown: s,
+    onBlur: l,
+    disabled: p,
+    ...c
+  }, v) {
+    const u = Se(null), b = me(), { visualState: w, isHover: x, isFocused: S, isPressed: N, isDisabled: f, handlers: k } = Te({
+      disabled: p,
+      frozenState: b
     });
-    ti(() => {
+    rt(() => {
       u.current && (u.current.indeterminate = r);
     }, [r]);
-    const C = t || r, L = S ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-onAccent)", I = j("productive");
-    return /* @__PURE__ */ g(
-      H.label,
+    const R = i || r, H = f ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-onAccent)", V = j("productive");
+    return /* @__PURE__ */ h(
+      E.label,
       {
         tabIndex: -1,
-        whileTap: S ? void 0 : { scale: 0.99 },
-        transition: { duration: I.duration, ease: I.easing },
-        onMouseEnter: h.onMouseEnter,
-        onMouseLeave: h.onMouseLeave,
-        onPointerDown: h.onPointerDown,
-        onPointerUp: h.onPointerUp,
-        onPointerCancel: h.onPointerCancel,
-        className: dt({ state: y }),
+        whileTap: f ? void 0 : { scale: 0.99 },
+        transition: { duration: V.duration, ease: V.easing },
+        onMouseEnter: k.onMouseEnter,
+        onMouseLeave: k.onMouseLeave,
+        onPointerDown: k.onPointerDown,
+        onPointerUp: k.onPointerUp,
+        onPointerCancel: k.onPointerCancel,
+        className: mi({ state: w }),
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "input",
             {
-              ref: (T) => {
-                u.current = T, mt(c, T);
+              ref: (C) => {
+                u.current = C, fi(v, C);
               },
               type: "checkbox",
-              checked: t,
-              disabled: S,
-              "aria-checked": r ? "mixed" : t,
-              onChange: (T) => a(T.target.checked),
-              onFocus: (T) => {
-                h.onFocus(), n == null || n(T);
+              checked: i,
+              disabled: f,
+              "aria-checked": r ? "mixed" : i,
+              onChange: (C) => a(C.target.checked),
+              onFocus: (C) => {
+                k.onFocus(C.currentTarget), o == null || o(C);
+              },
+              onKeyDown: (C) => {
+                k.onKeyDown(C.currentTarget), s == null || s(C);
               },
-              onBlur: (T) => {
-                h.onBlur(), s == null || s(T);
+              onBlur: (C) => {
+                k.onBlur(), l == null || l(C);
               },
-              className: pt({ state: y }),
-              ...p
+              className: vi({ state: w }),
+              ...c
             }
           ),
-          /* @__PURE__ */ e(
-            H.span,
+          /* @__PURE__ */ t(
+            E.span,
             {
               "aria-hidden": "true",
-              animate: { scale: w ? 0.94 : k || b ? 1.04 : 1 },
+              animate: { scale: N ? 0.94 : x || S ? 1.04 : 1 },
               transition: {
-                duration: I.duration,
-                ease: I.easing
+                duration: V.duration,
+                ease: V.easing
               },
-              className: ut({ state: y, on: C }),
+              className: gi({ state: w, on: R }),
               style: {
-                transition: `background-color ${I.duration}s ease, border-color ${I.duration}s ease`
+                transition: `background-color ${V.duration}s ease, border-color ${V.duration}s ease`
               },
-              children: r ? /* @__PURE__ */ e(A, { icon: li, size: 14, color: L, "aria-hidden": !0 }) : t ? /* @__PURE__ */ e(A, { icon: oe, size: 14, color: L, "aria-hidden": !0 }) : null
+              children: r ? /* @__PURE__ */ t(A, { icon: dt, size: 14, color: H, "aria-hidden": !0 }) : i ? /* @__PURE__ */ t(A, { icon: pe, size: 14, color: H, "aria-hidden": !0 }) : null
             }
           ),
-          /* @__PURE__ */ e(
-            H.span,
+          /* @__PURE__ */ t(
+            E.span,
             {
               className: "text-secondary",
-              animate: { x: w ? z.space.px1 : 0 },
+              animate: { x: N ? D.space.px1 : 0 },
               transition: {
-                duration: I.duration,
-                ease: I.easing
+                duration: V.duration,
+                ease: V.easing
               },
               style: {
-                ...z.typeStyles.ui,
-                color: S ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-primary)"
+                ...D.typeStyles.ui,
+                color: f ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-primary)"
               },
-              children: i
+              children: e
             }
           )
         ]
       }
     );
   }
-), vt = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
+), hi = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
   variants: {
     state: {
       rest: "cursor-pointer",
@@ -1167,7 +1202,7 @@ const Ra = /* @__PURE__ */ ee(
     }
   },
   defaultVariants: { state: "rest" }
-}), ft = /* @__PURE__ */ $(
+}), bi = /* @__PURE__ */ $(
   "relative inline-flex items-center gap-[var(--semantic-space-subgrid-gap)] py-[var(--semantic-space-subgrid-gap)] select-none hds-touch-row",
   {
     variants: {
@@ -1181,7 +1216,7 @@ const Ra = /* @__PURE__ */ ee(
     },
     defaultVariants: { state: "rest" }
   }
-), gt = /* @__PURE__ */ $(
+), $i = /* @__PURE__ */ $(
   // tier-ok: primitive.size.20 / primitive.radius.full mirror checkbox's glyph box model 1:1 — no semantic alias for either
   "inline-flex shrink-0 items-center justify-center w-[var(--primitive-size-20)] h-[var(--primitive-size-20)] rounded-[var(--primitive-radius-full)] border-solid border-[length:var(--primitive-borderWidth-sm)]",
   {
@@ -1189,7 +1224,10 @@ const Ra = /* @__PURE__ */ ee(
       state: {
         rest: "",
         hover: "",
-        focused: "",
+        focused: (
+          // tier-ok: semantic-borderWidth-emphasis resolves to var(--primitive-borderWidth-sm) exactly — same ring as checkbox's focused glyph
+          "outline-offset-2 [outline:var(--semantic-borderWidth-emphasis)_solid_var(--semantic-color-border-accent)]"
+        ),
         pressed: "",
         disabled: ""
       },
@@ -1222,7 +1260,7 @@ const Ra = /* @__PURE__ */ ee(
     ],
     defaultVariants: { state: "rest", on: !1 }
   }
-), ht = /* @__PURE__ */ $(
+), yi = /* @__PURE__ */ $(
   // `inline-block` is the other half of the #225 fix: the dot's declared
   // width/height are ignored under the browser's default `display: inline`.
   // tier-ok: radius-full (9999px) is the mathematical "fully round" constant — one possible value, not a design-scale choice. hds#186/hds#242
@@ -1236,182 +1274,186 @@ const Ra = /* @__PURE__ */ ee(
     },
     defaultVariants: { disabled: !1 }
   }
-), Pa = /* @__PURE__ */ ee(function({
-  label: i,
-  checked: t,
+), Ma = /* @__PURE__ */ oe(function({
+  label: e,
+  checked: i,
   onChange: a,
   disabled: r,
-  style: n,
+  style: o,
   className: s,
   onMouseEnter: l,
   onMouseLeave: p,
   onPointerDown: c,
-  onPointerUp: u,
-  onPointerCancel: m,
-  onFocus: y,
-  onBlur: k,
-  ...b
-}, w) {
-  const S = le(), { visualState: h, isHover: C, isFocused: L, isPressed: I, isDisabled: T, handlers: V } = ke({
+  onPointerUp: v,
+  onPointerCancel: u,
+  onFocus: b,
+  onKeyDown: w,
+  onBlur: x,
+  ...S
+}, N) {
+  const f = me(), { visualState: k, isHover: R, isFocused: H, isPressed: V, isDisabled: C, handlers: P } = Te({
     disabled: r,
-    frozenState: S
-  }), P = j("productive"), D = j("expressive");
-  return /* @__PURE__ */ g(
-    H.label,
+    frozenState: f
+  }), T = j("productive"), L = j("expressive");
+  return /* @__PURE__ */ h(
+    E.label,
     {
       tabIndex: -1,
-      whileTap: T ? void 0 : { scale: 0.99 },
-      transition: { duration: P.duration, ease: P.easing },
-      className: ft({ state: h }),
+      whileTap: C ? void 0 : { scale: 0.99 },
+      transition: { duration: T.duration, ease: T.easing },
+      className: bi({ state: k }),
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           "input",
           {
-            ref: w,
+            ref: N,
             type: "radio",
-            checked: t,
-            disabled: T,
-            onChange: (x) => a(x.target.checked),
-            onMouseEnter: (x) => {
-              V.onMouseEnter(), l == null || l(x);
+            checked: i,
+            disabled: C,
+            onChange: (y) => a(y.target.checked),
+            onMouseEnter: (y) => {
+              P.onMouseEnter(), l == null || l(y);
+            },
+            onMouseLeave: (y) => {
+              P.onMouseLeave(), p == null || p(y);
             },
-            onMouseLeave: (x) => {
-              V.onMouseLeave(), p == null || p(x);
+            onPointerDown: (y) => {
+              P.onPointerDown(), c == null || c(y);
             },
-            onPointerDown: (x) => {
-              V.onPointerDown(), c == null || c(x);
+            onPointerUp: (y) => {
+              P.onPointerUp(), v == null || v(y);
             },
-            onPointerUp: (x) => {
-              V.onPointerUp(), u == null || u(x);
+            onPointerCancel: (y) => {
+              P.onPointerCancel(), u == null || u(y);
             },
-            onPointerCancel: (x) => {
-              V.onPointerCancel(), m == null || m(x);
+            onFocus: (y) => {
+              P.onFocus(y.currentTarget), b == null || b(y);
             },
-            onFocus: (x) => {
-              V.onFocus(), y == null || y(x);
+            onKeyDown: (y) => {
+              P.onKeyDown(y.currentTarget), w == null || w(y);
             },
-            onBlur: (x) => {
-              V.onBlur(), k == null || k(x);
+            onBlur: (y) => {
+              P.onBlur(), x == null || x(y);
             },
-            className: d("hds-focus", vt({ state: h })),
-            ...b
+            className: d("hds-focus", hi({ state: k })),
+            ...S
           }
         ),
-        /* @__PURE__ */ e(
-          H.span,
+        /* @__PURE__ */ t(
+          E.span,
           {
             "aria-hidden": "true",
-            className: gt({ state: h, on: t }),
+            className: $i({ state: k, on: i }),
             animate: {
-              scale: I ? 0.94 : C || L ? 1.04 : 1
+              scale: V ? 0.94 : R || H ? 1.04 : 1
             },
             transition: {
-              duration: P.duration,
-              ease: P.easing
+              duration: T.duration,
+              ease: T.easing
             },
             style: {
-              transition: `background-color ${P.duration}s ease, border-color ${P.duration}s ease`
+              transition: `background-color ${T.duration}s ease, border-color ${T.duration}s ease`
             },
-            children: t && /* @__PURE__ */ e(
-              H.span,
+            children: i && /* @__PURE__ */ t(
+              E.span,
               {
                 initial: { scale: 0.4, opacity: 0 },
                 animate: { scale: 1, opacity: 1 },
                 exit: { scale: 0.4, opacity: 0 },
                 transition: {
-                  duration: D.duration,
-                  ease: P.easing
+                  duration: L.duration,
+                  ease: T.easing
                 },
-                className: ht({ disabled: T })
+                className: yi({ disabled: C })
               }
             )
           }
         ),
-        /* @__PURE__ */ e(
-          H.span,
+        /* @__PURE__ */ t(
+          E.span,
           {
             animate: {
-              x: I ? z.space.px1 : 0
+              x: V ? D.space.px1 : 0
             },
             transition: {
-              duration: P.duration,
-              ease: P.easing
+              duration: T.duration,
+              ease: T.easing
             },
             style: {
-              ...z.typeStyles.ui,
-              color: T ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-primary)"
+              ...D.typeStyles.ui,
+              color: C ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-primary)"
             },
-            children: i
+            children: e
           }
         )
       ]
     }
   );
-}), La = /* @__PURE__ */ ee(function({ label: i, min: t, max: a, step: r = 1, value: n, onChange: s }, l) {
-  const [p, c] = Y(!1), u = a - t, y = `${(u <= 0 ? 0 : Math.min(Math.max((n - t) / u, 0), 1)) * 100}%`, k = j("productive"), b = j("expressive");
+}), Ea = /* @__PURE__ */ oe(function({ label: e, min: i, max: a, step: r = 1, value: o, onChange: s }, l) {
+  const [p, c] = X(!1), v = a - i, b = `${(v <= 0 ? 0 : Math.min(Math.max((o - i) / v, 0), 1)) * 100}%`, w = j("productive"), x = j("expressive");
   return (
     // eslint-disable-next-line tailwindcss/no-arbitrary-value -- token-driven gap; var()-based, no Tailwind-theme utility exists
-    /* @__PURE__ */ g("div", { className: `flex flex-col gap-[var(--semantic-space-scale-xs)] ${Q}`, children: [
-      /* @__PURE__ */ g("div", { className: "flex justify-between items-baseline gap-[var(--semantic-space-scale-xs)]", children: [
-        /* @__PURE__ */ e(
+    /* @__PURE__ */ h("div", { className: `flex flex-col gap-[var(--semantic-space-scale-xs)] ${ne}`, children: [
+      /* @__PURE__ */ h("div", { className: "flex justify-between items-baseline gap-[var(--semantic-space-scale-xs)]", children: [
+        /* @__PURE__ */ t(
           "label",
           {
             style: {
-              ...z.typeStyles.ui,
+              ...D.typeStyles.ui,
               color: "var(--semantic-color-content-primary)"
             },
-            children: i
+            children: e
           }
         ),
-        /* @__PURE__ */ e(
-          H.span,
+        /* @__PURE__ */ t(
+          E.span,
           {
             className: "text-secondary shrink-0",
-            initial: { opacity: 0.72, y: z.space.px2 },
+            initial: { opacity: 0.72, y: D.space.px2 },
             animate: { opacity: 1, y: 0 },
             transition: {
-              duration: k.duration,
-              ease: k.easing
+              duration: w.duration,
+              ease: w.easing
             },
-            style: { ...z.typeStyles.mono },
-            children: n
+            style: { ...D.typeStyles.mono },
+            children: o
           },
-          n
+          o
         )
       ] }),
-      /* @__PURE__ */ g(H.div, { className: "relative h-[var(--semantic-size-control-md)] grid items-center", children: [
-        /* @__PURE__ */ e(
+      /* @__PURE__ */ h(E.div, { className: "relative h-[var(--semantic-size-control-md)] grid items-center", children: [
+        /* @__PURE__ */ t(
           "div",
           {
             "aria-hidden": "true",
             className: "absolute [inset-inline:0] top-1/2 h-[var(--semantic-size-control-sm)] -translate-y-1/2 rounded-[var(--primitive-radius-full)] bg-[var(--semantic-color-border-default)] overflow-hidden",
-            children: /* @__PURE__ */ e(
-              H.div,
+            children: /* @__PURE__ */ t(
+              E.div,
               {
                 animate: {
-                  width: y,
+                  width: b,
                   opacity: p ? 1 : 0.92
                 },
                 transition: {
-                  duration: b.duration,
-                  ease: k.easing
+                  duration: x.duration,
+                  ease: w.easing
                 },
                 className: "h-full rounded-[var(--primitive-radius-full)] bg-[var(--semantic-color-surface-accent)]"
               }
             )
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           "input",
           {
             ref: l,
             type: "range",
-            "aria-label": i,
-            min: t,
+            "aria-label": e,
+            min: i,
             max: a,
             step: r,
-            value: n,
-            onChange: (w) => s(Number(w.target.value)),
+            value: o,
+            onChange: (S) => s(Number(S.target.value)),
             onPointerDown: () => c(!0),
             onPointerUp: () => c(!1),
             onPointerCancel: () => c(!1),
@@ -1422,7 +1464,7 @@ const Ra = /* @__PURE__ */ ee(
       ] })
     ] })
   );
-}), Se = (o) => parseFloat(o), bt = Se(we.primitive.size[40]), $t = Se(we.primitive.size[20]), qe = Se(we.primitive.size[16]), yt = ($t - qe) / 2, xt = bt - qe - yt * 2, wt = /* @__PURE__ */ $(
+}), Re = (n) => parseFloat(n), xi = Re(De.primitive.size[40]), wi = Re(De.primitive.size[20]), et = Re(De.primitive.size[16]), ki = (wi - et) / 2, Si = xi - et - ki * 2, Ni = /* @__PURE__ */ $(
   "relative inline-flex items-center gap-[var(--semantic-space-subgrid-gap)] rounded-md py-[var(--semantic-space-subgrid-gap)] outline-offset-2 select-none hds-touch-row",
   {
     variants: {
@@ -1436,7 +1478,7 @@ const Ra = /* @__PURE__ */ ee(
     },
     defaultVariants: { state: "rest" }
   }
-), kt = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
+), zi = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
   variants: {
     state: {
       rest: "cursor-pointer",
@@ -1447,7 +1489,7 @@ const Ra = /* @__PURE__ */ ee(
     }
   },
   defaultVariants: { state: "rest" }
-}), St = /* @__PURE__ */ $(
+}), Ci = /* @__PURE__ */ $(
   // tier-ok: primitive.size.40 / primitive.size.20 / primitive.radius.full — no semantic alias for toggle-track geometry yet (same gap as checkbox/radio's glyph sizing)
   "inline-flex shrink-0 items-center rounded-[var(--primitive-radius-full)] border-solid border-[length:var(--primitive-borderWidth-sm)] p-[var(--semantic-space-subgrid-xs)] w-[var(--primitive-size-40)] h-[var(--primitive-size-20)]",
   {
@@ -1483,99 +1525,102 @@ const Ra = /* @__PURE__ */ ee(
     ],
     defaultVariants: { on: !1, disabled: !1 }
   }
-), Nt = /* @__PURE__ */ $(
+), Di = /* @__PURE__ */ $(
   // tier-ok: primitive.size.16 / primitive.radius.full — no semantic alias for toggle-thumb geometry yet
   "pointer-events-none block w-[var(--primitive-size-16)] h-[var(--primitive-size-16)] rounded-[var(--primitive-radius-full)] bg-[var(--semantic-color-surface-page)]"
-), Va = /* @__PURE__ */ ee(function({ label: i, checked: t, onChange: a, onFocus: r, onBlur: n, disabled: s, ...l }, p) {
-  const c = le(), { visualState: u, isHover: m, isFocused: y, isPressed: k, isDisabled: b, handlers: w } = ke({
-    disabled: s,
-    frozenState: c
-  }), S = j("productive");
-  return /* @__PURE__ */ g(
-    H.label,
+), Ha = /* @__PURE__ */ oe(function({ label: e, checked: i, onChange: a, onFocus: r, onKeyDown: o, onBlur: s, disabled: l, ...p }, c) {
+  const v = me(), { visualState: u, isHover: b, isFocused: w, isPressed: x, isDisabled: S, handlers: N } = Te({
+    disabled: l,
+    frozenState: v
+  }), f = j("productive");
+  return /* @__PURE__ */ h(
+    E.label,
     {
       tabIndex: -1,
-      whileTap: b ? void 0 : { scale: 0.99 },
-      transition: { duration: S.duration, ease: S.easing },
-      onMouseEnter: w.onMouseEnter,
-      onMouseLeave: w.onMouseLeave,
-      onPointerDown: w.onPointerDown,
-      onPointerUp: w.onPointerUp,
-      onPointerCancel: w.onPointerCancel,
+      whileTap: S ? void 0 : { scale: 0.99 },
+      transition: { duration: f.duration, ease: f.easing },
+      onMouseEnter: N.onMouseEnter,
+      onMouseLeave: N.onMouseLeave,
+      onPointerDown: N.onPointerDown,
+      onPointerUp: N.onPointerUp,
+      onPointerCancel: N.onPointerCancel,
       animate: {
-        y: k ? z.space.px1 : 0
+        y: x ? D.space.px1 : 0
       },
-      className: wt({ state: u }),
+      className: Ni({ state: u }),
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           "input",
           {
-            ref: p,
+            ref: c,
             type: "checkbox",
             role: "switch",
-            checked: t,
-            disabled: b,
-            onChange: (h) => a(h.target.checked),
-            onFocus: (h) => {
-              w.onFocus(), r == null || r(h);
+            checked: i,
+            disabled: S,
+            onChange: (k) => a(k.target.checked),
+            onFocus: (k) => {
+              N.onFocus(k.currentTarget), r == null || r(k);
             },
-            onBlur: (h) => {
-              w.onBlur(), n == null || n(h);
+            onKeyDown: (k) => {
+              N.onKeyDown(k.currentTarget), o == null || o(k);
             },
-            className: d("hds-focus", kt({ state: u })),
-            ...l
+            onBlur: (k) => {
+              N.onBlur(), s == null || s(k);
+            },
+            className: d("hds-focus", zi({ state: u })),
+            ...p
           }
         ),
-        /* @__PURE__ */ e(
-          H.span,
+        /* @__PURE__ */ t(
+          E.span,
           {
             "aria-hidden": "true",
             animate: {
-              scale: k ? 0.96 : m || y ? 1.04 : 1
+              scale: x ? 0.96 : b || w ? 1.04 : 1
             },
             transition: {
-              duration: S.duration,
-              ease: S.easing
+              duration: f.duration,
+              ease: f.easing
             },
             style: {
-              transition: `background-color ${S.duration}s ease, border-color ${S.duration}s ease`
+              transition: `background-color ${f.duration}s ease, border-color ${f.duration}s ease`
             },
-            className: St({ on: t, disabled: b }),
-            children: /* @__PURE__ */ e(
-              H.span,
+            className: Ci({ on: i, disabled: S }),
+            children: /* @__PURE__ */ t(
+              E.span,
               {
-                animate: { x: t ? xt : 0 },
+                animate: { x: i ? Si : 0 },
                 transition: {
-                  duration: S.duration,
-                  ease: S.easing
+                  duration: f.duration,
+                  ease: f.easing
                 },
-                className: Nt()
+                className: Di()
               }
             )
           }
         ),
-        /* @__PURE__ */ e(
-          H.span,
+        /* @__PURE__ */ t(
+          E.span,
           {
             className: "text-secondary",
             animate: {
-              x: k ? z.space.px1 : 0
+              x: x ? D.space.px1 : 0
             },
             transition: {
-              duration: S.duration,
-              ease: S.easing
+              duration: f.duration,
+              ease: f.easing
             },
             style: {
-              ...z.typeStyles.ui,
-              color: b ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-primary)"
+              ...D.typeStyles.ui,
+              color: S ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-primary)"
             },
-            children: i
+            children: e
           }
         )
       ]
     }
   );
-}), zt = /* @__PURE__ */ $(
+}), Ti = /* @__PURE__ */ $(
   "w-full overflow-hidden rounded-full bg-[var(--semantic-color-surface-overlay)]",
   {
     variants: {
@@ -1587,80 +1632,80 @@ const Ra = /* @__PURE__ */ ee(
     },
     defaultVariants: { size: "md" }
   }
-), Le = {
+), Be = {
   neutral: { bar: "bg-primary", ring: "text-primary" },
   danger: { bar: "bg-feedback-danger", ring: "text-feedback-danger" },
   success: { bar: "bg-feedback-success", ring: "text-feedback-success" },
   warning: { bar: "bg-feedback-warning", ring: "text-feedback-warning" },
   info: { bar: "bg-feedback-info", ring: "text-feedback-info" }
-}, Ct = {
+}, Ri = {
   sm: { box: 16, stroke: 2 },
   md: { box: 24, stroke: 3 },
   lg: { box: 32, stroke: 3 }
-}, Ia = /* @__PURE__ */ v.forwardRef(
+}, Ba = /* @__PURE__ */ m.forwardRef(
   function({
-    className: i,
-    size: t,
+    className: e,
+    size: i,
     value: a = null,
     max: r = 100,
-    variant: n = "linear",
+    variant: o = "linear",
     tone: s = "neutral",
     label: l = "Progress",
     ...p
   }, c) {
-    const u = a == null, m = u ? r : Math.max(0, Math.min(r, a)), y = r === 100 ? m : r > 0 ? m * 100 / r : 0, k = {
+    const v = a == null, u = v ? r : Math.max(0, Math.min(r, a)), b = r === 100 ? u : r > 0 ? u * 100 / r : 0, w = {
       role: "progressbar",
       "aria-label": l,
-      "aria-valuemin": u ? void 0 : 0,
-      "aria-valuemax": u ? void 0 : r,
+      "aria-valuemin": v ? void 0 : 0,
+      "aria-valuemax": v ? void 0 : r,
       // The default 0-100 scale keeps its whole-number aria-valuenow; a custom
       // max reports the value as given.
-      "aria-valuenow": u ? void 0 : r === 100 ? Math.round(m) : m,
-      "data-state": u ? "indeterminate" : "determinate",
-      "data-variant": n,
+      "aria-valuenow": v ? void 0 : r === 100 ? Math.round(u) : u,
+      "data-state": v ? "indeterminate" : "determinate",
+      "data-variant": o,
       "data-tone": s
     };
-    if (n === "circular") {
-      const { box: b, stroke: w } = Ct[t ?? "md"], S = (b - w) / 2, h = 2 * Math.PI * S, C = h * (u ? 0.75 : 1 - y / 100);
-      return /* @__PURE__ */ e(
+    if (o === "circular") {
+      const { box: x, stroke: S } = Ri[i ?? "md"], N = (x - S) / 2, f = 2 * Math.PI * N, k = f * (v ? 0.75 : 1 - b / 100);
+      return /* @__PURE__ */ t(
         "span",
         {
           ref: c,
-          ...k,
-          className: d("inline-flex", Le[s].ring, i),
+          ...w,
+          className: d("inline-flex", Be[s].ring, e),
           ...p,
-          children: /* @__PURE__ */ g(
+          children: /* @__PURE__ */ h(
             "svg",
             {
-              width: b,
-              height: b,
-              viewBox: `0 0 ${b} ${b}`,
+              width: x,
+              height: x,
+              viewBox: `0 0 ${x} ${x}`,
               fill: "none",
               "aria-hidden": "true",
-              className: d(u && "animate-spin motion-reduce:animate-none"),
+              className: d(v && "animate-spin motion-reduce:animate-none"),
               children: [
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ t(
                   "circle",
                   {
-                    cx: b / 2,
-                    cy: b / 2,
-                    r: S,
-                    strokeWidth: w,
+                    cx: x / 2,
+                    cy: x / 2,
+                    r: N,
+                    strokeWidth: S,
                     className: "stroke-[var(--semantic-color-surface-overlay)]"
                   }
                 ),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ t(
                   "circle",
                   {
-                    cx: b / 2,
-                    cy: b / 2,
-                    r: S,
-                    strokeWidth: w,
+                    cx: x / 2,
+                    cy: x / 2,
+                    r: N,
+                    strokeWidth: S,
                     strokeLinecap: "round",
-                    strokeDasharray: h,
-                    strokeDashoffset: C,
+                    strokeDasharray: f,
+                    strokeDashoffset: k,
                     className: "stroke-current",
-                    transform: `rotate(-90 ${b / 2} ${b / 2})`
+                    transform: `rotate(-90 ${x / 2} ${x / 2})`
                   }
                 )
               ]
@@ -1669,28 +1714,28 @@ const Ra = /* @__PURE__ */ ee(
         }
       );
     }
-    return /* @__PURE__ */ e(
+    return /* @__PURE__ */ t(
       "div",
       {
         ref: c,
-        ...k,
-        className: d(zt({ size: t }), i),
+        ...w,
+        className: d(Ti({ size: i }), e),
         ...p,
-        children: /* @__PURE__ */ e(
+        children: /* @__PURE__ */ t(
           "div",
           {
             className: d(
-              "h-full rounded-full transition-[width] duration-300 ease-out",
-              Le[s].bar,
-              u && "animate-pulse motion-reduce:animate-none"
+              "h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none",
+              Be[s].bar,
+              v && "animate-pulse motion-reduce:animate-none"
             ),
-            style: { width: `${y}%` }
+            style: { width: `${b}%` }
           }
         )
       }
     );
   }
-), Dt = /* @__PURE__ */ $("hds-skeleton block", {
+), Pi = /* @__PURE__ */ $("hds-skeleton block", {
   variants: {
     variant: {
       text: "rounded",
@@ -1699,22 +1744,22 @@ const Ra = /* @__PURE__ */ ee(
     }
   },
   defaultVariants: { variant: "rectangular" }
-}), Ma = /* @__PURE__ */ v.forwardRef(
-  function({ className: i, variant: t = "rectangular", width: a, height: r, style: n, ...s }, l) {
-    const p = r ?? (t === "text" ? "1em" : t === "rectangular" ? "5rem" : void 0);
-    return /* @__PURE__ */ e(
+}), Wa = /* @__PURE__ */ m.forwardRef(
+  function({ className: e, variant: i = "rectangular", width: a, height: r, style: o, ...s }, l) {
+    const p = r ?? (i === "text" ? "1em" : i === "rectangular" ? "5rem" : void 0);
+    return /* @__PURE__ */ t(
       "div",
       {
         ref: l,
         "aria-hidden": "true",
-        "data-variant": t,
-        className: d(Dt({ variant: t }), i),
-        style: { width: a, height: p, ...n },
+        "data-variant": i,
+        className: d(Pi({ variant: i }), e),
+        style: { width: a, height: p, ...o },
         ...s
       }
     );
   }
-), Tt = /* @__PURE__ */ $(
+), Li = /* @__PURE__ */ $(
   "inline-block shrink-0 animate-spin rounded-full border-solid border-current border-t-transparent align-middle motion-reduce:animate-none",
   {
     variants: {
@@ -1726,21 +1771,21 @@ const Ra = /* @__PURE__ */ ee(
     },
     defaultVariants: { size: "md" }
   }
-), Aa = /* @__PURE__ */ v.forwardRef(
-  function({ className: i, size: t, label: a = "Loading", ...r }, n) {
-    return /* @__PURE__ */ e(
+), Fa = /* @__PURE__ */ m.forwardRef(
+  function({ className: e, size: i, label: a = "Loading", ...r }, o) {
+    return /* @__PURE__ */ t(
       "span",
       {
-        ref: n,
+        ref: o,
         role: "status",
         "aria-label": a,
-        "data-size": t ?? "md",
-        className: d(Tt({ size: t }), i),
+        "data-size": i ?? "md",
+        className: d(Li({ size: i }), e),
         ...r
       }
     );
   }
-), Rt = /* @__PURE__ */ $(
+), Vi = /* @__PURE__ */ $(
   "inline-flex max-w-full flex-col items-start self-start gap-[var(--semantic-space-scale-xs)] p-0",
   {
     variants: {
@@ -1751,7 +1796,7 @@ const Ra = /* @__PURE__ */ ee(
     },
     defaultVariants: { fullWidth: !1 }
   }
-), Pt = /* @__PURE__ */ $(
+), Ii = /* @__PURE__ */ $(
   "flex max-w-full items-stretch gap-[var(--semantic-space-subgrid-gap)] overflow-x-auto overflow-y-hidden rounded-lg border border-solid border-[var(--semantic-color-border-default)] [scrollbar-width:thin]",
   {
     variants: {
@@ -1766,7 +1811,7 @@ const Ra = /* @__PURE__ */ ee(
     },
     defaultVariants: { variant: "primary", fullWidth: !1 }
   }
-), Lt = /* @__PURE__ */ $(
+), Ai = /* @__PURE__ */ $(
   "relative m-0 flex flex-col items-center justify-center gap-[var(--semantic-space-subgrid-hairline)] rounded-md border-0 bg-transparent py-[var(--semantic-space-subgrid-gap)] text-center transition-[color,outline-color,transform] duration-[var(--hds-motion-productive-duration)] ease-[var(--hds-motion-productive-easing)]",
   {
     variants: {
@@ -1844,7 +1889,7 @@ const Ra = /* @__PURE__ */ ee(
       disabled: !1
     }
   }
-), Vt = /* @__PURE__ */ $(
+), Mi = /* @__PURE__ */ $(
   "pointer-events-none absolute inset-0 z-0 rounded-md bg-transparent shadow-none",
   {
     variants: {
@@ -1927,7 +1972,7 @@ const Ra = /* @__PURE__ */ ee(
     ],
     defaultVariants: { variant: "primary", active: !1, interaction: "rest", disabled: !1 }
   }
-), It = /* @__PURE__ */ $(
+), Ei = /* @__PURE__ */ $(
   // tier-ok: primitive.zIndex.10 (the discrete 0/10/100/1000 stacking scale, reached as hds.zIndex.focus) has no semantic alias — same primitive ref the pre-Tailwind inline style used
   "relative z-[var(--primitive-zIndex-10)] hds-type-caption text-[var(--semantic-color-content-secondary)]",
   {
@@ -1948,7 +1993,7 @@ const Ra = /* @__PURE__ */ ee(
     ],
     defaultVariants: { variant: "primary", active: !1, interaction: "rest", disabled: !1 }
   }
-), Mt = /* @__PURE__ */ $(
+), Hi = /* @__PURE__ */ $(
   // tier-ok: primitive.borderWidth.sm (the 2px accent/selection-ring weight) has no semantic alias — same primitive ref the pre-Tailwind inline style used
   "outline outline-[length:var(--primitive-borderWidth-sm)] outline-offset-[length:var(--semantic-space-subgrid-gap)]",
   {
@@ -1960,156 +2005,157 @@ const Ra = /* @__PURE__ */ ee(
     },
     defaultVariants: { variant: "primary" }
   }
-), At = /* @__PURE__ */ $(
+), Bi = /* @__PURE__ */ $(
   // tier-ok: primitive.zIndex.10, reached as hds.zIndex.focus, has no semantic alias — same primitive ref the pre-Tailwind inline style used
   "relative z-[var(--primitive-zIndex-10)] max-w-[60ch] hds-type-ui text-current"
-), Ha = /* @__PURE__ */ ee(
+), _a = /* @__PURE__ */ oe(
   function({
-    label: i,
-    "aria-label": t,
+    label: e,
+    "aria-label": i,
     options: a,
     value: r,
-    onChange: n,
+    onChange: o,
     size: s = "md",
     variant: l = "primary",
     fullWidth: p = !1,
     railPadding: c,
-    segmentPaddingX: u
-  }, m) {
-    const [y, k] = Y(null), [b, w] = Y(null), h = le(), C = h === "disabled", L = j("productive"), I = s === "sm", T = l === "secondary", V = t ?? i, P = u ?? (I ? z.semantic.space.scale.xs : z.semantic.space.layout.gap);
-    return /* @__PURE__ */ g("div", { ref: m, className: Rt({ fullWidth: p }), children: [
-      i && // inline-ok: pb here mirrors the dynamic-padding cases below — token value, not a magic number, kept inline to match the group's spacing rhythm without a one-off arbitrary class
-      /* @__PURE__ */ e(
+    segmentPaddingX: v
+  }, u) {
+    const [b, w] = X(null), [x, S] = X(null), f = me(), k = f === "disabled", R = j("productive"), H = s === "sm", V = l === "secondary", C = i ?? e, P = v ?? (H ? D.semantic.space.scale.xs : D.semantic.space.layout.gap);
+    return /* @__PURE__ */ h("div", { ref: u, className: Vi({ fullWidth: p }), children: [
+      e && // inline-ok: pb here mirrors the dynamic-padding cases below — token value, not a magic number, kept inline to match the group's spacing rhythm without a one-off arbitrary class
+      /* @__PURE__ */ t(
         "span",
         {
           className: "max-w-[60ch] hds-type-ui text-[var(--semantic-color-content-primary)]",
-          style: { paddingBottom: z.semantic.space.subgrid.gap },
-          children: i
+          style: { paddingBottom: D.semantic.space.subgrid.gap },
+          children: e
         }
       ),
-      /* @__PURE__ */ e(
-        Te.Root,
+      /* @__PURE__ */ t(
+        Ae.Root,
         {
           type: "single",
           role: "radiogroup",
-          "aria-label": V,
+          "aria-label": C,
           value: r,
-          onValueChange: (D) => {
-            D && !C && n(D);
+          onValueChange: (T) => {
+            T && !k && o(T);
           },
-          disabled: C,
-          className: Pt({ variant: l, fullWidth: p }),
+          disabled: k,
+          className: Ii({ variant: l, fullWidth: p }),
           style: { padding: c ?? "4px" },
-          children: a.map((D) => {
-            const x = D.value === r, R = h ? h === "hover" && x : y === D.value, B = h === "pressed" && x, q = h ? h === "focused" && x : b === D.value, W = C, G = B ? "pressed" : R ? "hover" : "rest", te = !!h && q;
-            return /* @__PURE__ */ e(
-              Te.Item,
+          children: a.map((T) => {
+            const L = T.value === r, y = f ? f === "hover" && L : b === T.value, M = f === "pressed" && L, Y = f ? f === "focused" && L : x === T.value, F = k, _ = M ? "pressed" : y ? "hover" : "rest", Q = !!f && Y;
+            return /* @__PURE__ */ t(
+              Ae.Item,
               {
                 asChild: !0,
-                value: D.value,
-                disabled: W,
-                children: /* @__PURE__ */ g(
-                  H.button,
+                value: T.value,
+                disabled: F,
+                children: /* @__PURE__ */ h(
+                  E.button,
                   {
                     type: "button",
-                    onHoverStart: () => !h && k(D.value),
-                    onHoverEnd: () => !h && k(null),
-                    onFocus: () => !h && w(D.value),
-                    onBlur: () => !h && w(null),
-                    animate: T ? {
-                      y: x ? 0 : B ? 1 : 0,
-                      scale: x ? 1 : R ? 0.995 : 1
+                    onHoverStart: () => !f && w(T.value),
+                    onHoverEnd: () => !f && w(null),
+                    onFocus: () => !f && S(T.value),
+                    onBlur: () => !f && S(null),
+                    animate: V ? {
+                      y: L ? 0 : M ? 1 : 0,
+                      scale: L ? 1 : y ? 0.995 : 1
                     } : void 0,
-                    transition: T ? {
-                      duration: L.duration,
-                      ease: L.easing
+                    transition: V ? {
+                      duration: R.duration,
+                      ease: R.easing
                     } : void 0,
                     className: d(
                       "hds-focus",
-                      Lt({
+                      Ai({
                         size: s,
                         fullWidth: p,
                         variant: l,
-                        active: x,
-                        interaction: G,
-                        disabled: W
+                        active: L,
+                        interaction: _,
+                        disabled: F
                       }),
-                      te && Mt({ variant: l })
+                      Q && Hi({ variant: l })
                     ),
                     style: {
                       paddingLeft: P,
                       paddingRight: P
                     },
                     children: [
-                      /* @__PURE__ */ e(
+                      /* @__PURE__ */ t(
                         "span",
                         {
                           "aria-hidden": "true",
                           className: d(
-                            Vt({
+                            Mi({
                               variant: l,
-                              active: x,
-                              interaction: G,
-                              disabled: W
+                              active: L,
+                              interaction: _,
+                              disabled: F
                             })
                           )
                         }
                       ),
-                      /* @__PURE__ */ e("span", { className: At(), children: D.label }),
-                      D.description && /* @__PURE__ */ e(
+                      /* @__PURE__ */ t("span", { className: Bi(), children: T.label }),
+                      T.description && /* @__PURE__ */ t(
                         "span",
                         {
                           className: d(
-                            It({
+                            Ei({
                               variant: l,
-                              active: x,
-                              interaction: G,
-                              disabled: W
+                              active: L,
+                              interaction: _,
+                              disabled: F
                             })
                           ),
-                          children: D.description
+                          children: T.description
                         }
                       )
                     ]
                   }
                 )
               },
-              D.value
+              T.value
             );
           })
         }
       )
     ] });
   }
-), Ht = /* @__PURE__ */ se(O.Portal), Ea = /* @__PURE__ */ ee(function({
-  label: i,
-  showLabel: t = !0,
+), Wi = /* @__PURE__ */ ue(G.Portal), Oa = /* @__PURE__ */ oe(function({
+  label: e,
+  showLabel: i = !0,
   options: a,
   value: r,
-  onChange: n,
+  onChange: o,
   container: s,
   id: l,
   "aria-describedby": p,
   "aria-invalid": c
-}, u) {
-  const m = a.find((b) => b.value === r) ?? a[0], y = Me(), k = t && !!i;
-  return /* @__PURE__ */ g("div", { className: d("flex flex-col", Q), children: [
-    t ? /* @__PURE__ */ e(
-      "span",
+}, v) {
+  const u = a.find((f) => f.value === r), b = (u == null ? void 0 : u.label) ?? "", w = Ne(), x = Ne(), S = l ?? x, N = i && !!e;
+  return /* @__PURE__ */ h("div", { className: d("flex flex-col", ne), children: [
+    i ? /* @__PURE__ */ t(
+      "label",
       {
-        id: y,
+        id: w,
+        htmlFor: S,
         className: "hds-type-ui text-foreground",
-        style: { marginBottom: z.semantic.space.scale.xs },
-        children: i
+        style: { marginBottom: D.semantic.space.scale.xs },
+        children: e
       }
     ) : null,
-    /* @__PURE__ */ g(O.Root, { value: r, onValueChange: n, children: [
-      /* @__PURE__ */ g(
-        O.Trigger,
+    /* @__PURE__ */ h(G.Root, { value: r, onValueChange: o, children: [
+      /* @__PURE__ */ h(
+        G.Trigger,
         {
-          ref: u,
-          id: l,
-          "aria-label": i ? `${i}: ${m.label}` : m.label,
+          ref: v,
+          id: S,
+          "aria-label": e ? b ? `${e}: ${b}` : e : b || void 0,
           "aria-describedby": p,
           "aria-invalid": c,
           className: d(
@@ -2120,18 +2166,18 @@ const Ra = /* @__PURE__ */ ee(
             "hover:border-ring data-[state=open]:border-ring"
           ),
           children: [
-            /* @__PURE__ */ e(O.Value, {}),
-            /* @__PURE__ */ e(O.Icon, { className: "flex shrink-0 text-muted-foreground", children: /* @__PURE__ */ e(A, { icon: Be, size: "small", color: "currentColor" }) })
+            /* @__PURE__ */ t(G.Value, {}),
+            /* @__PURE__ */ t(G.Icon, { className: "flex shrink-0 text-muted-foreground", children: /* @__PURE__ */ t(A, { icon: je, size: "small", color: "currentColor" }) })
           ]
         }
       ),
-      /* @__PURE__ */ e(Ht, { container: s, children: /* @__PURE__ */ e(
-        O.Content,
+      /* @__PURE__ */ t(Wi, { container: s, children: /* @__PURE__ */ t(
+        G.Content,
         {
           position: "popper",
           sideOffset: 4,
-          "aria-labelledby": k ? y : void 0,
-          "aria-label": k ? void 0 : i || m.label,
+          "aria-labelledby": N ? w : void 0,
+          "aria-label": N ? void 0 : e || b || void 0,
           style: {
             minWidth: "var(--radix-select-trigger-width)",
             maxHeight: "var(--radix-select-content-available-height)"
@@ -2140,33 +2186,33 @@ const Ra = /* @__PURE__ */ ee(
             "z-50 overflow-hidden rounded-md border",
             "border-border bg-popover text-popover-foreground shadow-md"
           ),
-          children: /* @__PURE__ */ e(O.Viewport, { className: "p-1", children: a.map((b) => /* @__PURE__ */ g(
-            O.Item,
+          children: /* @__PURE__ */ t(G.Viewport, { className: "p-1", children: a.map((f) => /* @__PURE__ */ h(
+            G.Item,
             {
-              value: b.value,
+              value: f.value,
               className: d(
                 "relative flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-sm px-2 py-1.5 hds-type-ui outline-none",
                 "text-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
                 "data-[highlighted]:ring-2 data-[highlighted]:ring-inset data-[highlighted]:ring-ring"
               ),
               children: [
-                /* @__PURE__ */ e(O.ItemText, { children: b.label }),
-                /* @__PURE__ */ e(O.ItemIndicator, { className: "flex shrink-0", children: /* @__PURE__ */ e(A, { icon: oe, size: "small", color: "currentColor" }) })
+                /* @__PURE__ */ t(G.ItemText, { children: f.label }),
+                /* @__PURE__ */ t(G.ItemIndicator, { className: "flex shrink-0", children: /* @__PURE__ */ t(A, { icon: pe, size: "small", color: "currentColor" }) })
               ]
             },
-            b.value
+            f.value
           )) })
         }
       ) })
     ] })
   ] });
-}), Et = /* @__PURE__ */ $(
+}), Fi = /* @__PURE__ */ $(
   // 44px is the WCAG 2.5.5 / platform HIG minimum interactive target — a
   // regulatory floor, not a design-scale choice; no semantic size scale exists
   // yet for dimensional primitives (see hds#186 follow-up).
   // tier-ok: regulatory a11y constant, not a design decision. hds#186
-  "group inline-flex min-w-[var(--primitive-size-interactive-min)] cursor-pointer select-none items-center justify-center border-0 bg-transparent p-0 text-inherit transition-colors disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-), Bt = /* @__PURE__ */ $(
+  "group inline-flex min-w-[var(--primitive-size-interactive-min)] cursor-pointer select-none items-center justify-center border-0 bg-transparent p-0 text-inherit transition-colors disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-[var(--semantic-color-content-disabled)]"
+), _i = /* @__PURE__ */ $(
   "pointer-events-none box-border inline-flex min-h-[var(--component-tag-minHeight)] min-w-[var(--component-tag-minWidth)] items-center justify-center whitespace-nowrap rounded-[var(--component-tag-radius)] border border-solid px-[var(--component-tag-paddingX)] py-[var(--component-tag-paddingY)] hds-type-caption transition-colors",
   {
     variants: {
@@ -2177,20 +2223,20 @@ const Ra = /* @__PURE__ */ ee(
     },
     defaultVariants: { selected: !1 }
   }
-), Ba = /* @__PURE__ */ v.forwardRef(function({ children: i, active: t = !1, className: a, type: r = "button", ...n }, s) {
-  return /* @__PURE__ */ e(
+), Ga = /* @__PURE__ */ m.forwardRef(function({ children: e, active: i = !1, className: a, type: r = "button", ...o }, s) {
+  return /* @__PURE__ */ t(
     "button",
     {
       ref: s,
       type: r,
-      "aria-pressed": t,
-      "data-active": t ? "true" : void 0,
-      className: d("hds-focus", Et(), a),
-      ...n,
-      children: /* @__PURE__ */ e("span", { className: Bt({ selected: t }), children: i })
+      "aria-pressed": i,
+      "data-active": i ? "true" : void 0,
+      className: d("hds-focus", Fi(), a),
+      ...o,
+      children: /* @__PURE__ */ t("span", { className: _i({ selected: i }), children: e })
     }
   );
-}), Wt = /* @__PURE__ */ $(
+}), Oi = /* @__PURE__ */ $(
   "inline-flex items-center justify-center whitespace-nowrap align-middle select-none rounded border border-border bg-muted text-muted-foreground",
   {
     variants: {
@@ -2202,22 +2248,22 @@ const Ra = /* @__PURE__ */ ee(
     },
     defaultVariants: { size: "md" }
   }
-), Wa = /* @__PURE__ */ v.forwardRef(function({ className: i, size: t, children: a, ...r }, n) {
-  return /* @__PURE__ */ e(
+), ja = /* @__PURE__ */ m.forwardRef(function({ className: e, size: i, children: a, ...r }, o) {
+  return /* @__PURE__ */ t(
     "kbd",
     {
-      ref: n,
-      "data-size": t ?? "md",
-      className: d(Wt({ size: t }), i),
+      ref: o,
+      "data-size": i ?? "md",
+      className: d(Oi({ size: i }), e),
       ...r,
       children: a
     }
   );
 });
-function Ve(o) {
-  return o instanceof Date ? o : new Date(o);
+function We(n) {
+  return n instanceof Date ? n : new Date(n);
 }
-const Ft = [
+const Gi = [
   ["year", 3600 * 24 * 365],
   ["month", 3600 * 24 * 30],
   ["week", 3600 * 24 * 7],
@@ -2226,34 +2272,34 @@ const Ft = [
   ["minute", 60],
   ["second", 1]
 ];
-function _t(o, i, t) {
-  const a = new Intl.RelativeTimeFormat(t, { numeric: "auto" }), r = Math.round((o.getTime() - i.getTime()) / 1e3), n = Math.abs(r);
-  for (const [s, l] of Ft)
-    if (n >= l || s === "second")
+function ji(n, e, i) {
+  const a = new Intl.RelativeTimeFormat(i, { numeric: "auto" }), r = Math.round((n.getTime() - e.getTime()) / 1e3), o = Math.abs(r);
+  for (const [s, l] of Gi)
+    if (o >= l || s === "second")
       return a.format(Math.round(r / l), s);
   return a.format(0, "second");
 }
-const Ot = {
+const Ui = {
   date: { dateStyle: "medium" },
   time: { timeStyle: "short" },
   datetime: { dateStyle: "medium", timeStyle: "short" }
-}, Fa = /* @__PURE__ */ v.forwardRef(
-  function({ className: i, date: t, format: a = "datetime", locale: r, now: n, ...s }, l) {
-    const p = Ve(t), c = Number.isNaN(p.getTime()) ? void 0 : p.toISOString();
-    let u;
-    return Number.isNaN(p.getTime()) ? u = "" : a === "relative" ? u = _t(p, n != null ? Ve(n) : /* @__PURE__ */ new Date(), r) : u = new Intl.DateTimeFormat(r, Ot[a]).format(p), /* @__PURE__ */ e(
+}, Ua = /* @__PURE__ */ m.forwardRef(
+  function({ className: e, date: i, format: a = "datetime", locale: r, now: o, ...s }, l) {
+    const p = We(i), c = Number.isNaN(p.getTime()) ? void 0 : p.toISOString();
+    let v;
+    return Number.isNaN(p.getTime()) ? v = "" : a === "relative" ? v = ji(p, o != null ? We(o) : /* @__PURE__ */ new Date(), r) : v = new Intl.DateTimeFormat(r, Ui[a]).format(p), /* @__PURE__ */ t(
       "time",
       {
         ref: l,
         dateTime: c,
         "data-format": a,
-        className: d("tabular-nums", i),
+        className: d("tabular-nums", e),
         ...s,
-        children: u
+        children: v
       }
     );
   }
-), Gt = /* @__PURE__ */ $("border-l-2 border-border pl-4 text-foreground", {
+), Yi = /* @__PURE__ */ $("border-l-2 border-border pl-4 text-foreground", {
   variants: {
     size: {
       sm: "hds-type-ui",
@@ -2262,27 +2308,27 @@ const Ot = {
     }
   },
   defaultVariants: { size: "md" }
-}), _a = /* @__PURE__ */ v.forwardRef(
-  function({ className: i, size: t, attribution: a, children: r, ...n }, s) {
-    return /* @__PURE__ */ g(
+}), Ya = /* @__PURE__ */ m.forwardRef(
+  function({ className: e, size: i, attribution: a, children: r, ...o }, s) {
+    return /* @__PURE__ */ h(
       "blockquote",
       {
         ref: s,
-        "data-size": t ?? "md",
-        className: d(Gt({ size: t }), i),
-        ...n,
+        "data-size": i ?? "md",
+        className: d(Yi({ size: i }), e),
+        ...o,
         children: [
           r,
-          a != null && /* @__PURE__ */ e("footer", { className: "mt-2 hds-type-ui text-muted-foreground", children: a })
+          a != null && /* @__PURE__ */ t("footer", { className: "mt-2 hds-type-ui text-muted-foreground", children: a })
         ]
       }
     );
   }
-), Oa = /* @__PURE__ */ v.forwardRef(
-  function({ as: i = "span", className: t, children: a, ...r }, n) {
-    return /* @__PURE__ */ e(i, { ref: n, className: d("sr-only", t), ...r, children: a });
+), qa = /* @__PURE__ */ m.forwardRef(
+  function({ as: e = "span", className: i, children: a, ...r }, o) {
+    return /* @__PURE__ */ t(e, { ref: o, className: d("sr-only", i), ...r, children: a });
   }
-), jt = /* @__PURE__ */ $(
+), qi = /* @__PURE__ */ $(
   "inline-flex -ml-2 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground ring-2 ring-background",
   {
     variants: {
@@ -2294,38 +2340,38 @@ const Ot = {
     },
     defaultVariants: { size: "md" }
   }
-), Ga = /* @__PURE__ */ v.forwardRef(
-  function({ className: i, children: t, max: a, size: r, ...n }, s) {
-    const l = r ?? "md", p = v.Children.toArray(t).filter(v.isValidElement), c = a && a > 0 ? a : p.length, u = p.slice(0, c), m = p.length - u.length;
-    return /* @__PURE__ */ g(
+), Xa = /* @__PURE__ */ m.forwardRef(
+  function({ className: e, children: i, max: a, size: r, ...o }, s) {
+    const l = r ?? "md", p = m.Children.toArray(i).filter(m.isValidElement), c = a && a > 0 ? a : p.length, v = p.slice(0, c), u = p.length - v.length;
+    return /* @__PURE__ */ h(
       "div",
       {
         ref: s,
         role: "group",
         "data-size": l,
-        className: d("flex items-center", i),
-        ...n,
+        className: d("flex items-center", e),
+        ...o,
         children: [
-          u.map(
-            (y, k) => v.cloneElement(y, {
-              key: y.key ?? k,
+          v.map(
+            (b, w) => m.cloneElement(b, {
+              key: b.key ?? w,
               size: l,
               className: d(
                 "ring-2 ring-background",
-                k > 0 && "-ml-2",
-                y.props.className
+                w > 0 && "-ml-2",
+                b.props.className
               )
             })
           ),
-          m > 0 && /* @__PURE__ */ g("span", { "aria-label": `+${m} more`, className: jt({ size: r }), children: [
+          u > 0 && /* @__PURE__ */ h("span", { "aria-label": `+${u} more`, className: qi({ size: r }), children: [
             "+",
-            m
+            u
           ] })
         ]
       }
     );
   }
-), Ie = /* @__PURE__ */ $("", {
+), Fe = /* @__PURE__ */ $("", {
   variants: {
     orientation: {
       vertical: "flex flex-col gap-3",
@@ -2334,29 +2380,29 @@ const Ot = {
     }
   },
   defaultVariants: { orientation: "vertical" }
-}), ja = /* @__PURE__ */ v.forwardRef(
-  function({ className: i, items: t, orientation: a = "vertical", variant: r = "plain", footer: n, ...s }, l) {
-    return r === "divided" ? /* @__PURE__ */ g(
+}), Ka = /* @__PURE__ */ m.forwardRef(
+  function({ className: e, items: i, orientation: a = "vertical", variant: r = "plain", footer: o, ...s }, l) {
+    return r === "divided" ? /* @__PURE__ */ h(
       "dl",
       {
         ref: l,
         "data-variant": "divided",
         "data-orientation": "vertical",
-        className: d("flex flex-col overflow-hidden rounded-lg", i),
+        className: d("flex flex-col overflow-hidden rounded-lg", e),
         style: {
-          border: `${z.borderWidth.default} solid var(--semantic-color-border-default)`
+          border: `${D.borderWidth.default} solid var(--semantic-color-border-default)`
         },
         ...s,
         children: [
-          t.map((p, c) => /* @__PURE__ */ g(
+          i.map((p, c) => /* @__PURE__ */ h(
             "div",
             {
               className: "flex flex-col gap-2 p-5",
               style: c === 0 ? void 0 : {
-                borderTop: `${z.borderWidth.default} solid var(--semantic-color-border-subtle)`
+                borderTop: `${D.borderWidth.default} solid var(--semantic-color-border-subtle)`
               },
               children: [
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ t(
                   "dt",
                   {
                     className: "hds-type-ui",
@@ -2364,7 +2410,7 @@ const Ot = {
                     children: p.term
                   }
                 ),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ t(
                   "dd",
                   {
                     className: "m-0 hds-type-ui",
@@ -2376,179 +2422,179 @@ const Ot = {
             },
             c
           )),
-          n != null && /* @__PURE__ */ g(
+          o != null && /* @__PURE__ */ h(
             "div",
             {
               className: "p-5 hds-type-ui",
               style: {
-                borderTop: `${z.borderWidth.default} solid var(--semantic-color-border-subtle)`,
+                borderTop: `${D.borderWidth.default} solid var(--semantic-color-border-subtle)`,
                 background: "var(--semantic-color-surface-raised)",
                 color: "var(--semantic-color-content-secondary)"
               },
               children: [
-                /* @__PURE__ */ e("dt", { className: "sr-only", children: "Summary" }),
-                /* @__PURE__ */ e("dd", { className: "m-0", children: n })
+                /* @__PURE__ */ t("dt", { className: "sr-only", children: "Summary" }),
+                /* @__PURE__ */ t("dd", { className: "m-0", children: o })
               ]
             }
           )
         ]
       }
-    ) : a === "horizontal" ? /* @__PURE__ */ e(
+    ) : a === "horizontal" ? /* @__PURE__ */ t(
       "dl",
       {
         ref: l,
         "data-orientation": a,
-        className: d(Ie({ orientation: a }), i),
+        className: d(Fe({ orientation: a }), e),
         ...s,
-        children: t.map((p, c) => /* @__PURE__ */ g(v.Fragment, { children: [
-          /* @__PURE__ */ e("dt", { className: "hds-type-ui text-muted-foreground", children: p.term }),
-          /* @__PURE__ */ e("dd", { className: d("m-0 text-foreground"), children: p.description })
+        children: i.map((p, c) => /* @__PURE__ */ h(m.Fragment, { children: [
+          /* @__PURE__ */ t("dt", { className: "hds-type-ui text-muted-foreground", children: p.term }),
+          /* @__PURE__ */ t("dd", { className: d("m-0 text-foreground"), children: p.description })
         ] }, c))
       }
-    ) : /* @__PURE__ */ e(
+    ) : /* @__PURE__ */ t(
       "dl",
       {
         ref: l,
         "data-orientation": a,
-        className: d(Ie({ orientation: a }), i),
+        className: d(Fe({ orientation: a }), e),
         ...s,
-        children: t.map((p, c) => /* @__PURE__ */ g("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ e("dt", { className: "hds-type-ui text-muted-foreground", children: p.term }),
-          /* @__PURE__ */ e("dd", { className: d("m-0 text-foreground"), children: p.description })
+        children: i.map((p, c) => /* @__PURE__ */ h("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ t("dt", { className: "hds-type-ui text-muted-foreground", children: p.term }),
+          /* @__PURE__ */ t("dd", { className: d("m-0 text-foreground"), children: p.description })
         ] }, c))
       }
     );
   }
-), Ua = /* @__PURE__ */ X.forwardRef(
+), Ja = /* @__PURE__ */ Z.forwardRef(
   function({
-    children: i,
-    side: t = "start",
+    children: e,
+    side: i = "start",
     sideWidth: a = "16rem",
     contentMin: r = "50%",
-    gap: n = "normal",
+    gap: o = "normal",
     className: s,
     style: l,
     as: p = "div"
   }, c) {
-    const [u, m] = i;
-    return /* @__PURE__ */ g(
+    const [v, u] = e;
+    return /* @__PURE__ */ h(
       p,
       {
         ref: c,
         className: s,
         "data-hds-component": "Sidebar",
-        "data-hds-metrics": `side:${t}`,
+        "data-hds-metrics": `side:${i}`,
         style: {
           display: "flex",
           flexWrap: "wrap",
-          gap: Fe(n, _e),
+          gap: Ye(o, qe),
           ...l
         },
         children: [
-          /* @__PURE__ */ e("div", { style: { flexBasis: a, flexGrow: 1, order: t === "end" ? 2 : 1 }, children: u }),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t("div", { style: { flexBasis: a, flexGrow: 1, order: i === "end" ? 2 : 1 }, children: v }),
+          /* @__PURE__ */ t(
             "div",
             {
               style: {
                 flexBasis: 0,
                 flexGrow: 999,
                 minWidth: r,
-                order: t === "end" ? 1 : 2
+                order: i === "end" ? 1 : 2
               },
-              children: m
+              children: u
             }
           )
         ]
       }
     );
   }
-), Ya = /* @__PURE__ */ X.forwardRef(
-  function({ children: i, threshold: t = "30rem", gap: a = "normal", limit: r, className: n, style: s, as: l = "div" }, p) {
-    const c = X.Children.toArray(i), u = r !== void 0 && c.length > r;
-    return /* @__PURE__ */ e(
+), Za = /* @__PURE__ */ Z.forwardRef(
+  function({ children: e, threshold: i = "30rem", gap: a = "normal", limit: r, className: o, style: s, as: l = "div" }, p) {
+    const c = Z.Children.toArray(e), v = r !== void 0 && c.length > r;
+    return /* @__PURE__ */ t(
       l,
       {
         ref: p,
-        className: n,
+        className: o,
         "data-hds-component": "Switcher",
-        "data-hds-metrics": `threshold:${t}`,
+        "data-hds-metrics": `threshold:${i}`,
         style: {
           display: "flex",
           flexWrap: "wrap",
-          gap: Fe(a, _e),
-          ...u && { flexDirection: "column" },
+          gap: Ye(a, qe),
+          ...v && { flexDirection: "column" },
           ...s
         },
-        children: c.map((m, y) => /* @__PURE__ */ e(
+        children: c.map((u, b) => /* @__PURE__ */ t(
           "div",
           {
-            style: u ? void 0 : { flexGrow: 1, flexBasis: `calc((${t} - 100%) * 999)` },
-            children: m
+            style: v ? void 0 : { flexGrow: 1, flexBasis: `calc((${i} - 100%) * 999)` },
+            children: u
           },
-          y
+          b
         ))
       }
     );
   }
-), qa = /* @__PURE__ */ X.forwardRef(function({ children: i, top: t = "0", className: a, style: r, as: n = "div" }, s) {
-  return /* @__PURE__ */ e(
-    n,
+), Qa = /* @__PURE__ */ Z.forwardRef(function({ children: e, top: i = "0", className: a, style: r, as: o = "div" }, s) {
+  return /* @__PURE__ */ t(
+    o,
     {
       ref: s,
       className: ["hds-pin", a].filter(Boolean).join(" "),
       "data-hds-component": "Pin",
-      style: { "--hds-pin-top": t, ...r },
-      children: i
+      style: { "--hds-pin-top": i, ...r },
+      children: e
     }
   );
-}), Xa = fe.Root;
-function Ka({ className: o, ...i }) {
-  return /* @__PURE__ */ e(
-    fe.List,
+}), er = ye.Root;
+function tr({ className: n, ...e }) {
+  return /* @__PURE__ */ t(
+    ye.List,
     {
       className: d(
         "flex h-10 items-center gap-6 overflow-x-auto whitespace-nowrap",
         "border-b border-border/40 mb-6",
         "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
-        o
+        n
       ),
-      ...i
+      ...e
     }
   );
 }
-function Ja({
-  className: o,
-  ...i
+function ir({
+  className: n,
+  ...e
 }) {
-  return /* @__PURE__ */ e(
-    fe.Trigger,
+  return /* @__PURE__ */ t(
+    ye.Trigger,
     {
       className: d(
         "relative -mb-px inline-flex items-center px-3 py-2 hds-type-ui transition-colors",
         "border-b-2 border-transparent text-muted-foreground rounded-t-md",
         // impeccable-disable-line border-accent-on-rounded -- false positive: the bottom edge and top corners never touch
         "data-[state=active]:border-foreground data-[state=active]:text-foreground data-[state=active]:bg-accent/5",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        "disabled:pointer-events-none disabled:opacity-50",
-        o
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        "disabled:pointer-events-none disabled:text-[var(--semantic-color-content-disabled)]",
+        n
       ),
-      ...i
+      ...e
     }
   );
 }
-function Za({
-  className: o,
-  ...i
+function ar({
+  className: n,
+  ...e
 }) {
-  return /* @__PURE__ */ e(
-    fe.Content,
+  return /* @__PURE__ */ t(
+    ye.Content,
     {
-      className: d("bg-accent/5 rounded-b-md p-6 -mt-6", o),
-      ...i
+      className: d("bg-accent/5 rounded-b-md p-6 -mt-6", n),
+      ...e
     }
   );
 }
-const Ut = /* @__PURE__ */ $("", {
+const Xi = /* @__PURE__ */ $("", {
   variants: {
     current: {
       true: "text-foreground",
@@ -2556,33 +2602,33 @@ const Ut = /* @__PURE__ */ $("", {
     }
   },
   defaultVariants: { current: !1 }
-}), Qa = /* @__PURE__ */ v.forwardRef(
-  function({ items: i, label: t = "Breadcrumb", className: a, ...r }, n) {
-    const { LinkComponent: s } = Oe();
-    return /* @__PURE__ */ e("nav", { ref: n, "aria-label": t, className: d("w-full", a), ...r, children: /* @__PURE__ */ e("ol", { className: "flex flex-wrap items-center gap-2", children: i.map((l, p) => {
-      const c = p === i.length - 1, u = !!l.href && !c;
-      return /* @__PURE__ */ g("li", { className: "inline-flex items-center gap-2", children: [
-        u ? /* @__PURE__ */ e(
+}), rr = /* @__PURE__ */ m.forwardRef(
+  function({ items: e, label: i = "Breadcrumb", className: a, ...r }, o) {
+    const { LinkComponent: s } = Xe();
+    return /* @__PURE__ */ t("nav", { ref: o, "aria-label": i, className: d("w-full", a), ...r, children: /* @__PURE__ */ t("ol", { className: "flex flex-wrap items-center gap-2", children: e.map((l, p) => {
+      const c = p === e.length - 1, v = !!l.href && !c;
+      return /* @__PURE__ */ h("li", { className: "inline-flex items-center gap-2", children: [
+        v ? /* @__PURE__ */ t(
           s,
           {
             to: l.href,
-            style: z.typeStyles.ui,
+            style: D.typeStyles.ui,
             className: "hds-focus text-muted-foreground transition-colors hover:text-foreground",
             children: l.label
           }
-        ) : /* @__PURE__ */ e(
+        ) : /* @__PURE__ */ t(
           "span",
           {
             "aria-current": c ? "page" : void 0,
-            style: z.typeStyles.ui,
-            className: Ut({ current: c }),
+            style: D.typeStyles.ui,
+            className: Xi({ current: c }),
             children: l.label
           }
         ),
-        !c && /* @__PURE__ */ e(
+        !c && /* @__PURE__ */ t(
           A,
           {
-            icon: xe,
+            icon: Ce,
             size: "small",
             color: "var(--semantic-color-content-secondary)",
             "aria-hidden": !0
@@ -2591,102 +2637,122 @@ const Ut = /* @__PURE__ */ $("", {
       ] }, `${l.label}-${p}`);
     }) }) });
   }
-), er = /* @__PURE__ */ v.forwardRef(
+);
+function Ki(n) {
+  const e = n.findIndex((i) => !i.disabled);
+  return e === -1 ? 0 : e;
+}
+function Ji(n, e, i) {
+  const a = n.length;
+  for (let r = 1; r <= a; r++) {
+    const o = ((e + i * r) % a + a) % a;
+    if (!n[o].disabled) return o;
+  }
+  return e;
+}
+const nr = /* @__PURE__ */ m.forwardRef(
   function({
-    options: i,
-    placeholder: t = "Select…",
+    options: e,
+    placeholder: i = "Select…",
     searchPlaceholder: a = "Search…",
     emptyMessage: r = "No results",
-    "aria-label": n,
+    "aria-label": o,
     id: s,
     "aria-describedby": l,
     "aria-invalid": p,
     className: c,
-    disabled: u = !1,
+    disabled: v = !1,
     // The arm-specific trio (multiple, value, onChange), still discriminated.
-    ...m
-  }, y) {
-    var K;
-    const [k, b] = v.useState(!1), [w, S] = v.useState(""), [h, C] = v.useState(0), L = v.useId(), I = `${L}-list`, T = n || t, V = m.multiple ? m.value : m.value === null ? [] : [m.value], P = m.multiple ? V.flatMap((f) => i.find((N) => N.value === f) ?? []) : [], D = P.length > 0 ? `${P.length} selected` : void 0, x = m.multiple ? D : (K = i.find((f) => f.value === m.value)) == null ? void 0 : K.label, R = v.useMemo(() => {
-      const f = w.trim().toLowerCase();
-      return f ? i.filter((N) => N.label.toLowerCase().includes(f)) : i;
-    }, [i, w]);
-    function B(f) {
-      if (!f.disabled) {
-        if (m.multiple) {
-          m.onChange(
-            V.includes(f.value) ? V.filter((N) => N !== f.value) : [...V, f.value]
+    ...u
+  }, b) {
+    var de;
+    const [w, x] = m.useState(!1), [S, N] = m.useState(""), [f, k] = m.useState(0), R = m.useId(), H = `${R}-list`, V = o || i, C = u.multiple ? u.value : u.value === null ? [] : [u.value], P = u.multiple ? C.flatMap((g) => e.find((z) => z.value === g) ?? []) : [], T = P.length > 0 ? `${P.length} selected` : void 0, L = u.multiple ? T : (de = e.find((g) => g.value === u.value)) == null ? void 0 : de.label, y = m.useMemo(() => {
+      const g = S.trim().toLowerCase();
+      return g ? e.filter((z) => z.label.toLowerCase().includes(g)) : e;
+    }, [e, S]), M = `${w}|${y.map((g) => `${g.value}:${g.disabled ? 1 : 0}`).join("\0")}`, [Y, F] = m.useState(M);
+    Y !== M && (F(M), k(Ki(y)));
+    const _ = m.useRef(!1);
+    function Q(g) {
+      if (!g.disabled) {
+        if (u.multiple) {
+          u.onChange(
+            C.includes(g.value) ? C.filter((z) => z !== g.value) : [...C, g.value]
           );
           return;
         }
-        m.onChange(f.value), b(!1), S("");
+        u.onChange(g.value), x(!1), N("");
       }
     }
-    const q = v.useRef(null), W = v.useRef(null), G = v.useRef(!1), te = v.useCallback(
-      (f) => {
-        W.current = f, typeof y == "function" ? y(f) : y && (y.current = f);
+    const ve = m.useRef(null), le = m.useRef(null), ee = m.useRef(!1), ge = m.useCallback(
+      (g) => {
+        le.current = g, typeof b == "function" ? b(g) : b && (b.current = g);
       },
-      [y]
-    ), ae = v.useRef(null);
-    v.useEffect(() => {
-      var pe;
-      const f = ae.current;
-      if (!f || P.length === f.count || (ae.current = null, P.length > f.count)) return;
-      const N = q.current, F = (N == null ? void 0 : N.querySelectorAll("li button:not(:disabled)")) ?? [];
-      (pe = F[Math.min(f.index, F.length - 1)] ?? (N == null ? void 0 : N.querySelector('[role="combobox"]'))) == null || pe.focus();
+      [b]
+    ), I = m.useRef(null);
+    m.useEffect(() => {
+      var J;
+      const g = I.current;
+      if (!g || P.length === g.count || (I.current = null, P.length > g.count)) return;
+      const z = ve.current, W = (z == null ? void 0 : z.querySelectorAll("li button:not(:disabled)")) ?? [];
+      (J = W[Math.min(g.index, W.length - 1)] ?? (z == null ? void 0 : z.querySelector('[role="combobox"]'))) == null || J.focus();
     }, [P.length]);
-    function ce(f, N) {
-      m.multiple && (ae.current = { index: N, count: P.length }, m.onChange(V.filter((F) => F !== f.value)));
+    function fe(g, z) {
+      u.multiple && (I.current = { index: z, count: P.length }, u.onChange(C.filter((W) => W !== g.value)));
     }
-    function de(f) {
-      if (R.length !== 0) {
-        if (f.key === "ArrowDown")
-          f.preventDefault(), C((N) => (N + 1) % R.length);
-        else if (f.key === "ArrowUp")
-          f.preventDefault(), C((N) => (N - 1 + R.length) % R.length);
-        else if (f.key === "Enter") {
-          f.preventDefault();
-          const N = R[h];
-          N && B(N);
+    function ce(g) {
+      if (y.length !== 0) {
+        if (g.key === "ArrowDown" || g.key === "ArrowUp") {
+          g.preventDefault();
+          const z = Ji(y, f, g.key === "ArrowDown" ? 1 : -1);
+          z !== f && (_.current = !0, k(z));
+        } else if (g.key === "Enter") {
+          g.preventDefault();
+          const z = y[f];
+          z && Q(z);
         }
       }
     }
-    const M = R[h] ? `${L}-opt-${R[h].value}` : void 0, re = /* @__PURE__ */ g(
-      be,
+    const te = (g) => `${R}-opt-${g}`, q = y[f] ? te(f) : void 0;
+    m.useEffect(() => {
+      var g;
+      _.current && (_.current = !1, w && q && ((g = document.getElementById(q)) == null || g.scrollIntoView({ block: "nearest" })));
+    }, [w, q]);
+    const ie = /* @__PURE__ */ h(
+      ke,
       {
-        open: k,
-        onOpenChange: (f) => {
-          b(f), f || S("");
+        open: w,
+        onOpenChange: (g) => {
+          x(g), g || N("");
         },
         children: [
-          /* @__PURE__ */ e(be.Anchor, { asChild: !0, children: /* @__PURE__ */ g(
+          /* @__PURE__ */ t(ke.Anchor, { asChild: !0, children: /* @__PURE__ */ h(
             "button",
             {
-              ref: te,
+              ref: ge,
               id: s,
               type: "button",
               role: "combobox",
-              "aria-expanded": k,
+              "aria-expanded": w,
               "aria-haspopup": "listbox",
-              "aria-controls": k ? I : void 0,
-              "aria-label": n,
+              "aria-controls": w ? H : void 0,
+              "aria-label": o,
               "aria-describedby": l,
               "aria-invalid": p,
-              disabled: u,
-              onClick: () => b((f) => !f),
+              disabled: v,
+              onClick: () => x((g) => !g),
               className: d(
                 "hds-focus flex h-10 items-center justify-between gap-2 rounded-md border border-input",
-                Q,
+                ne,
                 "bg-background px-3 hds-type-ui text-foreground",
-                "disabled:cursor-not-allowed disabled:opacity-50",
+                "disabled:cursor-not-allowed disabled:text-[var(--semantic-color-content-disabled)]",
                 c
               ),
               children: [
-                /* @__PURE__ */ e("span", { className: d("truncate", !x && "text-muted-foreground"), children: x || t }),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ t("span", { className: d("truncate", !L && "text-muted-foreground"), children: L || i }),
+                /* @__PURE__ */ t(
                   A,
                   {
-                    icon: Be,
+                    icon: je,
                     size: "small",
                     color: "var(--semantic-color-content-secondary)",
                     "aria-hidden": !0
@@ -2695,110 +2761,117 @@ const Ut = /* @__PURE__ */ $("", {
               ]
             }
           ) }),
-          /* @__PURE__ */ g(
-            be.Content,
+          /* @__PURE__ */ h(
+            ke.Content,
             {
-              "aria-label": T,
+              "aria-label": V,
               align: "start",
               className: "p-0",
               style: { width: "var(--radix-popover-trigger-width)" },
-              onInteractOutside: () => {
-                G.current = !0;
+              onInteractOutside: (g) => {
+                var K, J;
+                const z = (K = g.detail) == null ? void 0 : K.originalEvent, W = (z == null ? void 0 : z.target) ?? g.target;
+                if (W && ((J = le.current) != null && J.contains(W))) {
+                  g.preventDefault();
+                  return;
+                }
+                ee.current = !0;
               },
-              onCloseAutoFocus: (f) => {
-                var N;
-                G.current || (f.preventDefault(), (N = W.current) == null || N.focus()), G.current = !1;
+              onCloseAutoFocus: (g) => {
+                var z;
+                ee.current || (g.preventDefault(), (z = le.current) == null || z.focus()), ee.current = !1;
               },
               children: [
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ t(
                   "input",
                   {
                     type: "text",
-                    value: w,
+                    value: S,
                     autoFocus: !0,
                     role: "combobox",
                     "aria-expanded": !0,
-                    "aria-controls": I,
+                    "aria-controls": H,
                     "aria-autocomplete": "list",
-                    "aria-activedescendant": M,
+                    "aria-activedescendant": q,
                     "aria-label": a,
                     placeholder: a,
-                    onChange: (f) => {
-                      S(f.target.value), C(0);
+                    onChange: (g) => {
+                      N(g.target.value);
                     },
-                    onKeyDown: de,
+                    onKeyDown: ce,
                     className: d(
                       "hds-focus h-10 w-full border-b border-border bg-transparent px-3 hds-type-ui text-foreground",
                       "outline-none placeholder:text-muted-foreground"
                     )
                   }
                 ),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ t(
                   "ul",
                   {
-                    id: I,
+                    id: H,
                     role: "listbox",
-                    "aria-label": T,
-                    "aria-multiselectable": m.multiple || void 0,
-                    className: d("max-h-60 overflow-y-auto", R.length > 0 && "p-1"),
-                    children: R.map((f, N) => {
-                      const F = V.includes(f.value), ne = N === h;
-                      return /* @__PURE__ */ e("li", { role: "none", children: /* @__PURE__ */ g(
+                    "aria-label": V,
+                    "aria-multiselectable": u.multiple || void 0,
+                    className: d("max-h-60 overflow-y-auto", y.length > 0 && "p-1"),
+                    children: y.map((g, z) => {
+                      const W = C.includes(g.value), K = z === f;
+                      return /* @__PURE__ */ t("li", { role: "none", children: /* @__PURE__ */ h(
                         "button",
                         {
                           type: "button",
-                          id: `${L}-opt-${f.value}`,
+                          id: te(z),
                           role: "option",
-                          "aria-selected": F,
-                          "data-active": ne ? "true" : void 0,
-                          disabled: f.disabled,
-                          onMouseEnter: () => C(N),
-                          onClick: () => B(f),
+                          tabIndex: -1,
+                          "aria-selected": W,
+                          "data-active": K ? "true" : void 0,
+                          disabled: g.disabled,
+                          onMouseEnter: () => k(z),
+                          onClick: () => Q(g),
                           className: d(
                             "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hds-type-ui outline-none",
                             "data-[active=true]:bg-accent data-[active=true]:text-accent-foreground",
                             "data-[active=true]:ring-2 data-[active=true]:ring-inset data-[active=true]:ring-ring",
-                            "disabled:pointer-events-none disabled:opacity-50"
+                            "disabled:pointer-events-none disabled:text-[var(--semantic-color-content-disabled)]"
                           ),
                           children: [
-                            /* @__PURE__ */ e("span", { className: "flex size-4 items-center justify-center", children: F ? /* @__PURE__ */ e(A, { icon: oe, size: "small", color: "currentColor", "aria-hidden": !0 }) : null }),
-                            /* @__PURE__ */ e("span", { className: "truncate", children: f.label })
+                            /* @__PURE__ */ t("span", { className: "flex size-4 items-center justify-center", children: W ? /* @__PURE__ */ t(A, { icon: pe, size: "small", color: "currentColor", "aria-hidden": !0 }) : null }),
+                            /* @__PURE__ */ t("span", { className: "truncate", children: g.label })
                           ]
                         }
-                      ) }, f.value);
+                      ) }, g.value);
                     })
                   }
                 ),
-                R.length === 0 ? /* @__PURE__ */ e("p", { className: "m-1 px-2 py-6 text-center hds-type-ui text-muted-foreground", children: r }) : null
+                y.length === 0 ? /* @__PURE__ */ t("p", { className: "m-1 px-2 py-6 text-center hds-type-ui text-muted-foreground", children: r }) : null
               ]
             }
           )
         ]
       }
     );
-    return m.multiple ? /* @__PURE__ */ g("div", { ref: q, className: d("flex flex-col gap-2", Q), children: [
-      re,
-      P.length > 0 ? /* @__PURE__ */ e("ul", { className: "flex flex-wrap gap-1", children: P.map((f, N) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ g(
+    return u.multiple ? /* @__PURE__ */ h("div", { ref: ve, className: d("flex flex-col gap-2", ne), children: [
+      ie,
+      P.length > 0 ? /* @__PURE__ */ t("ul", { className: "flex flex-wrap gap-1", children: P.map((g, z) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ h(
         "button",
         {
           type: "button",
-          "aria-label": `Remove ${f.label}`,
-          disabled: u || f.disabled,
-          onClick: () => ce(f, N),
+          "aria-label": `Remove ${g.label}`,
+          disabled: v || g.disabled,
+          onClick: () => fe(g, z),
           className: d(
             "hds-focus inline-flex h-7 items-center gap-1 rounded-sm border border-border bg-muted pl-2 pr-1",
             "hds-type-caption text-foreground hover:bg-accent hover:text-accent-foreground",
-            "disabled:pointer-events-none disabled:opacity-50"
+            "disabled:pointer-events-none disabled:text-[var(--semantic-color-content-disabled)]"
           ),
           children: [
-            f.label,
-            /* @__PURE__ */ e(A, { icon: ve, size: "small", color: "currentColor", "aria-hidden": !0 })
+            g.label,
+            /* @__PURE__ */ t(A, { icon: $e, size: "small", color: "currentColor", "aria-hidden": !0 })
           ]
         }
-      ) }, f.value)) }) : null
-    ] }) : re;
+      ) }, g.value)) }) : null
+    ] }) : ie;
   }
-), Yt = /* @__PURE__ */ $(
+), Zi = /* @__PURE__ */ $(
   "flex w-full cursor-pointer items-center gap-[var(--semantic-space-sidebar-gap)] text-left text-primary transition-[border-color,box-shadow,color]",
   {
     variants: {
@@ -2811,170 +2884,170 @@ const Ut = /* @__PURE__ */ $("", {
     },
     defaultVariants: { variant: "panel" }
   }
-), qt = {
-  panel: z.semantic.space.sidebar.gap,
-  nav: z.semantic.space.sidebar.sectionGap,
-  card: z.semantic.space.scale.xs
-}, ir = /* @__PURE__ */ X.forwardRef(
+), Qi = {
+  panel: D.semantic.space.sidebar.gap,
+  nav: D.semantic.space.sidebar.sectionGap,
+  card: D.semantic.space.scale.xs
+}, or = /* @__PURE__ */ Z.forwardRef(
   function({
-    label: i,
-    defaultOpen: t = !1,
+    label: e,
+    defaultOpen: i = !1,
     open: a,
     onOpenChange: r,
-    variant: n = "panel",
+    variant: o = "panel",
     accent: s = !1,
     className: l,
     triggerStyle: p,
     contentStyle: c,
-    children: u
-  }, m) {
-    const [y, k] = Y(t), b = Me(), w = $e(null), S = $e(null), h = a ?? y, C = h ? "open" : "closed", L = j("productive");
-    function I() {
-      var R, B;
-      const x = !h;
-      !x && ((R = S.current) != null && R.contains(document.activeElement)) && ((B = w.current) == null || B.focus()), a === void 0 && k(x), r == null || r(x);
+    children: v
+  }, u) {
+    const [b, w] = X(i), x = Ne(), S = Se(null), N = Se(null), f = a ?? b, k = f ? "open" : "closed", R = j("productive");
+    function H() {
+      var y, M;
+      const L = !f;
+      !L && ((y = N.current) != null && y.contains(document.activeElement)) && ((M = S.current) == null || M.focus()), a === void 0 && w(L), r == null || r(L);
     }
-    const T = d(
+    const V = d(
       "hds-focus",
-      Yt({ variant: n }),
-      n === "nav" ? "hds-text-hover hds-bg-hover-neutral" : "",
+      Zi({ variant: o }),
+      o === "nav" ? "hds-text-hover hds-bg-hover-neutral" : "",
       l
-    ), V = h ? qt[n] : 0, P = typeof i == "string" ? /* @__PURE__ */ e(
+    ), C = f ? Qi[o] : 0, P = typeof e == "string" ? /* @__PURE__ */ t(
       "span",
       {
         className: "m-0 text-current",
-        style: n === "nav" ? z.typeStyles.ui : z.typeStyles.caption,
-        children: i
+        style: o === "nav" ? D.typeStyles.ui : D.typeStyles.caption,
+        children: e
       }
-    ) : i, D = /* @__PURE__ */ g(ii, { children: [
-      /* @__PURE__ */ g(
+    ) : e, T = /* @__PURE__ */ h(at, { children: [
+      /* @__PURE__ */ h(
         "button",
         {
-          ref: w,
+          ref: S,
           type: "button",
-          onClick: I,
-          "aria-expanded": h,
-          "aria-controls": b,
-          "data-state": C,
-          className: T,
+          onClick: H,
+          "aria-expanded": f,
+          "aria-controls": x,
+          "data-state": k,
+          className: V,
           style: p,
           children: [
-            /* @__PURE__ */ e("div", { className: "grid min-w-0 flex-1 items-start gap-[var(--semantic-space-subgrid-gap)]", children: P }),
-            /* @__PURE__ */ e(
-              H.span,
+            /* @__PURE__ */ t("div", { className: "grid min-w-0 flex-1 items-start gap-[var(--semantic-space-subgrid-gap)]", children: P }),
+            /* @__PURE__ */ t(
+              E.span,
               {
                 "aria-hidden": "true",
-                animate: { rotate: h ? 0 : -90 },
+                animate: { rotate: f ? 0 : -90 },
                 transition: {
-                  duration: L.duration,
-                  ease: L.easing
+                  duration: R.duration,
+                  ease: R.easing
                 },
                 className: "inline-grid size-[var(--hds-icon-small)] shrink-0 origin-center place-items-center self-center overflow-hidden leading-none",
-                children: /* @__PURE__ */ e(A, { icon: ci, size: "small", color: "currentColor" })
+                children: /* @__PURE__ */ t(A, { icon: pt, size: "small", color: "currentColor" })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ e(ai, { initial: !1, children: h && /* @__PURE__ */ e(
-        H.div,
+      /* @__PURE__ */ t(nt, { initial: !1, children: f && /* @__PURE__ */ t(
+        E.div,
         {
-          ref: S,
-          id: b,
+          ref: N,
+          id: x,
           initial: { opacity: 0, height: 0 },
           animate: { opacity: 1, height: "auto" },
           exit: { opacity: 0, height: 0 },
           transition: {
-            duration: L.duration,
-            ease: L.easing
+            duration: R.duration,
+            ease: R.easing
           },
           className: "overflow-hidden",
-          children: /* @__PURE__ */ e(
+          children: /* @__PURE__ */ t(
             "div",
             {
               style: {
                 ...c
               },
-              children: u
+              children: v
             }
           )
         }
       ) })
     ] });
-    return n === "nav" ? /* @__PURE__ */ e(De, { ref: m, gap: "tight", style: { gap: V }, children: D }) : /* @__PURE__ */ e(
-      mi,
+    return o === "nav" ? /* @__PURE__ */ t(Ie, { ref: u, gap: "tight", style: { gap: C }, children: T }) : /* @__PURE__ */ t(
+      gt,
       {
-        ref: m,
+        ref: u,
         padding: "component",
-        className: n === "card" ? "overflow-hidden" : void 0,
-        children: /* @__PURE__ */ e(De, { gap: "tight", style: { gap: V }, children: D })
+        className: o === "card" ? "overflow-hidden" : void 0,
+        children: /* @__PURE__ */ t(Ie, { gap: "tight", style: { gap: C }, children: T })
       }
     );
   }
 );
-function ue(o, i) {
-  return Array.from({ length: i - o + 1 }, (t, a) => o + a);
+function he(n, e) {
+  return Array.from({ length: e - n + 1 }, (i, a) => n + a);
 }
-function Xt(o, i, t = 1) {
-  const a = t * 2 + 5;
-  if (i <= a) return ue(1, i);
-  const r = Math.max(o - t, 1), n = Math.min(o + t, i), s = r > 2, l = n < i - 1;
-  return !s && l ? [...ue(1, t * 2 + 3), "ellipsis", i] : s && !l ? [1, "ellipsis", ...ue(i - (t * 2 + 2), i)] : [1, "ellipsis", ...ue(r, n), "ellipsis", i];
+function ea(n, e, i = 1) {
+  const a = i * 2 + 5;
+  if (e <= a) return he(1, e);
+  const r = Math.max(n - i, 1), o = Math.min(n + i, e), s = r > 2, l = o < e - 1;
+  return !s && l ? [...he(1, i * 2 + 3), "ellipsis", e] : s && !l ? [1, "ellipsis", ...he(e - (i * 2 + 2), e)] : [1, "ellipsis", ...he(r, o), "ellipsis", e];
 }
-const tr = /* @__PURE__ */ v.forwardRef(
-  function({ page: i, count: t, onPageChange: a, siblingCount: r = 1, label: n = "Pagination", className: s, ...l }, p) {
-    if (t <= 1) return null;
-    const c = Xt(i, t, r), u = (m) => a(Math.max(1, Math.min(t, m)));
-    return /* @__PURE__ */ e("nav", { ref: p, "aria-label": n, className: d("w-full", s), ...l, children: /* @__PURE__ */ g("ul", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-        me,
+const sr = /* @__PURE__ */ m.forwardRef(
+  function({ page: e, count: i, onPageChange: a, siblingCount: r = 1, label: o = "Pagination", className: s, ...l }, p) {
+    if (i <= 1) return null;
+    const c = ea(e, i, r), v = (u) => a(Math.max(1, Math.min(i, u)));
+    return /* @__PURE__ */ t("nav", { ref: p, "aria-label": o, className: d("w-full", s), ...l, children: /* @__PURE__ */ h("ul", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+        be,
         {
           iconOnly: !0,
           size: "sm",
           variant: "tertiary",
           "aria-label": "Previous page",
-          disabled: i <= 1,
-          onClick: () => u(i - 1),
-          iconLeft: /* @__PURE__ */ e(A, { icon: di, size: "small" })
+          disabled: e <= 1,
+          onClick: () => v(e - 1),
+          iconLeft: /* @__PURE__ */ t(A, { icon: ut, size: "small" })
         }
       ) }),
       c.map(
-        (m, y) => m === "ellipsis" ? /* @__PURE__ */ e(
+        (u, b) => u === "ellipsis" ? /* @__PURE__ */ t(
           "li",
           {
             "aria-hidden": "true",
             className: "px-2 text-muted-foreground select-none",
             children: "…"
           },
-          `ellipsis-${y}`
-        ) : /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-          me,
+          `ellipsis-${b}`
+        ) : /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+          be,
           {
-            variant: m === i ? "secondary" : "tertiary",
+            variant: u === e ? "secondary" : "tertiary",
             size: "sm",
             className: "hds-touch-target",
-            "aria-label": `Page ${m}`,
-            "aria-current": m === i ? "page" : void 0,
-            onClick: () => u(m),
-            children: m
+            "aria-label": `Page ${u}`,
+            "aria-current": u === e ? "page" : void 0,
+            onClick: () => v(u),
+            children: u
           }
-        ) }, m)
+        ) }, u)
       ),
-      /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-        me,
+      /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+        be,
         {
           iconOnly: !0,
           size: "sm",
           variant: "tertiary",
           "aria-label": "Next page",
-          disabled: i >= t,
-          onClick: () => u(i + 1),
-          iconLeft: /* @__PURE__ */ e(A, { icon: xe, size: "small" })
+          disabled: e >= i,
+          onClick: () => v(e + 1),
+          iconLeft: /* @__PURE__ */ t(A, { icon: Ce, size: "small" })
         }
       ) })
     ] }) });
   }
-), Kt = /* @__PURE__ */ $("", {
+), ta = /* @__PURE__ */ $("", {
   variants: {
     tone: {
       neutral: "text-muted-foreground",
@@ -2985,43 +3058,43 @@ const tr = /* @__PURE__ */ v.forwardRef(
     }
   },
   defaultVariants: { tone: "neutral" }
-}), Xe = /* @__PURE__ */ v.createContext(null);
-function ar() {
-  const o = v.useContext(Xe);
-  if (!o) throw new Error("useToast must be used within a <ToastProvider>");
-  return o;
+}), tt = /* @__PURE__ */ m.createContext(null);
+function lr() {
+  const n = m.useContext(tt);
+  if (!n) throw new Error("useToast must be used within a <ToastProvider>");
+  return n;
 }
-const Jt = {
-  neutral: ye,
-  info: ye,
-  success: Ee,
-  danger: He,
-  warning: Ae
+const ia = {
+  neutral: ze,
+  info: ze,
+  success: Ge,
+  danger: Oe,
+  warning: _e
 };
-function rr({
-  children: o,
-  duration: i = 5e3,
-  swipeDirection: t = "right"
+function cr({
+  children: n,
+  duration: e = 5e3,
+  swipeDirection: i = "right"
 }) {
-  const [a, r] = v.useState([]), n = v.useRef(0), s = v.useCallback((c) => {
-    r((u) => u.filter((m) => m.id !== c));
-  }, []), l = v.useCallback((c) => {
-    const u = `toast-${n.current += 1}`;
-    return r((m) => [...m, { ...c, id: u }]), u;
-  }, []), p = v.useMemo(
+  const [a, r] = m.useState([]), o = m.useRef(0), s = m.useCallback((c) => {
+    r((v) => v.filter((u) => u.id !== c));
+  }, []), l = m.useCallback((c) => {
+    const v = `toast-${o.current += 1}`;
+    return r((u) => [...u, { ...c, id: v }]), v;
+  }, []), p = m.useMemo(
     () => ({ toast: l, dismiss: s }),
     [l, s]
   );
-  return /* @__PURE__ */ e(Xe.Provider, { value: p, children: /* @__PURE__ */ g(J.Provider, { duration: i, swipeDirection: t, children: [
-    o,
+  return /* @__PURE__ */ t(tt.Provider, { value: p, children: /* @__PURE__ */ h(ae.Provider, { duration: e, swipeDirection: i, children: [
+    n,
     a.map((c) => {
-      const u = c.tone ?? "neutral";
-      return /* @__PURE__ */ g(
-        J.Root,
+      const v = c.tone ?? "neutral";
+      return /* @__PURE__ */ h(
+        ae.Root,
         {
-          duration: c.duration ?? i,
-          onOpenChange: (m) => {
-            m || s(c.id);
+          duration: c.duration ?? e,
+          onOpenChange: (u) => {
+            u || s(c.id);
           },
           className: d(
             "pointer-events-auto relative flex w-full items-start gap-3",
@@ -3029,29 +3102,29 @@ function rr({
             "text-popover-foreground shadow-overlay hds-focus"
           ),
           children: [
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ t(
               A,
               {
-                icon: Jt[u],
+                icon: ia[v],
                 size: "small",
                 color: "currentColor",
-                className: Kt({ tone: u }),
+                className: ta({ tone: v }),
                 "aria-hidden": !0
               }
             ),
-            /* @__PURE__ */ g("div", { className: "flex min-w-0 flex-col gap-1", children: [
-              /* @__PURE__ */ e(J.Title, { className: "hds-type-ui", children: c.title }),
-              c.description ? /* @__PURE__ */ e(J.Description, { className: "hds-type-ui text-muted-foreground", children: c.description }) : null
+            /* @__PURE__ */ h("div", { className: "flex min-w-0 flex-col gap-1", children: [
+              /* @__PURE__ */ t(ae.Title, { className: "hds-type-ui", children: c.title }),
+              c.description ? /* @__PURE__ */ t(ae.Description, { className: "hds-type-ui text-muted-foreground", children: c.description }) : null
             ] }),
-            /* @__PURE__ */ e(
-              J.Close,
+            /* @__PURE__ */ t(
+              ae.Close,
               {
                 "aria-label": "Dismiss",
                 className: d(
                   "absolute right-2 top-2 inline-flex size-6 items-center justify-center",
                   "rounded-sm text-muted-foreground transition-colors hover:text-foreground hds-focus"
                 ),
-                children: /* @__PURE__ */ e(A, { icon: ve, size: "small", color: "currentColor", "aria-hidden": !0 })
+                children: /* @__PURE__ */ t(A, { icon: $e, size: "small", color: "currentColor", "aria-hidden": !0 })
               }
             )
           ]
@@ -3059,8 +3132,8 @@ function rr({
         c.id
       );
     }),
-    /* @__PURE__ */ e(
-      J.Viewport,
+    /* @__PURE__ */ t(
+      ae.Viewport,
       {
         className: d(
           "fixed bottom-0 right-0 z-50 m-0 flex w-full list-none flex-col gap-2 p-4",
@@ -3070,94 +3143,94 @@ function rr({
     )
   ] }) });
 }
-const Zt = "https://www.designtokens.org/schemas/2025.10/format.json", Qt = "Adrian Milsap hirobius design tokens - W3C DTCG 2025.10 compliant, Figma SDS architecture", ea = /* @__PURE__ */ JSON.parse(`{"$description":"Base values used as inputs to derived token layers.","color":{"$type":"color","neutral":{"50":{"$value":"#fafafa","$description":"Specific value within the neutral range at a defined lightness step."},"100":{"$value":"#f5f5f5","$description":"Specific value within the neutral range at a defined lightness step."},"200":{"$value":"#e5e5e5","$description":"Specific value within the neutral range at a defined lightness step."},"300":{"$value":"#d4d4d4","$description":"Specific value within the neutral range at a defined lightness step."},"400":{"$value":"#a3a3a3","$description":"Specific value within the neutral range at a defined lightness step."},"500":{"$value":"#737373","$description":"Specific value within the neutral range at a defined lightness step."},"600":{"$value":"#525252","$description":"Specific value within the neutral range at a defined lightness step."},"700":{"$value":"#404040","$description":"Specific value within the neutral range at a defined lightness step."},"800":{"$value":"#262626","$description":"Specific value within the neutral range at a defined lightness step."},"850":{"$value":"#1a1a1a","$description":"Specific value within the neutral range at a defined lightness step."},"900":{"$value":"#111111","$description":"Specific value within the neutral range at a defined lightness step."},"950":{"$value":"#0a0a0a","$description":"Specific value within the neutral range at a defined lightness step."},"$description":"Discrete values within the neutral range at defined lightness steps.","white":{"$value":"#ffffff","$description":"Specific value within the neutral range at a defined lightness step."},"black":{"$value":"#000000","$description":"Specific value within the neutral range at a defined lightness step."}},"blue":{"50":{"$value":"oklch(0.96 0.03 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"100":{"$value":"oklch(0.92 0.04 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"200":{"$value":"oklch(0.88 0.07 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"300":{"$value":"oklch(0.70 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"400":{"$value":"oklch(0.65 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"450":{"$value":"oklch(0.56 0.29 266.60)","$description":"Specific value within the blue range at a defined lightness step."},"500":{"$value":"#1E2EFD","$description":"Specific value within the blue range at a defined lightness step."},"600":{"$value":"oklch(0.45 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"700":{"$value":"oklch(0.44 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"800":{"$value":"oklch(0.30 0.07 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"900":{"$value":"oklch(0.22 0.05 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"$description":"Discrete values within the blue range at defined lightness steps."},"red":{"50":{"$value":"#fef2f2","$description":"Specific value within the red range at a defined lightness step."},"400":{"$value":"#f87171","$description":"Specific value within the red range at a defined lightness step."},"700":{"$value":"#b91c1c","$description":"Specific value within the red range at a defined lightness step."},"950":{"$value":"#450a0a","$description":"Specific value within the red range at a defined lightness step."},"$description":"Discrete values within the red range at defined lightness steps."},"green":{"50":{"$value":"#ecfdf5","$description":"Specific value within the green range at a defined lightness step."},"400":{"$value":"#34d399","$description":"Specific value within the green range at a defined lightness step."},"700":{"$value":"#047857","$description":"Specific value within the green range at a defined lightness step."},"950":{"$value":"#022c22","$description":"Specific value within the green range at a defined lightness step."},"$description":"Discrete values within the green range at defined lightness steps."},"violet":{"50":{"$value":"#f5f3ff","$description":"Specific value within the violet range at a defined lightness step."},"400":{"$value":"#a78bfa","$description":"Specific value within the violet range at a defined lightness step."},"700":{"$value":"#6d28d9","$description":"Specific value within the violet range at a defined lightness step."},"950":{"$value":"#2e1065","$description":"Specific value within the violet range at a defined lightness step."},"$description":"Discrete values within the violet range at defined lightness steps."},"lilac":{"50":{"$value":"#f7f4fe","$description":"Specific value within the lilac range at a defined lightness step."},"100":{"$value":"#efe9fd","$description":"Specific value within the lilac range at a defined lightness step."},"200":{"$value":"#ddd0fb","$description":"Specific value within the lilac range at a defined lightness step."},"300":{"$value":"#c3aef6","$description":"Specific value within the lilac range at a defined lightness step."},"400":{"$value":"#a585ee","$description":"Specific value within the lilac range at a defined lightness step."},"450":{"$value":"#9a6fe8","$description":"Specific value within the lilac range at a defined lightness step."},"500":{"$value":"#6f3fd4","$description":"Lilac accent rest — AA for white text on page and card surfaces."},"600":{"$value":"#5f33c0","$description":"Specific value within the lilac range at a defined lightness step."},"700":{"$value":"#4f2aa3","$description":"Specific value within the lilac range at a defined lightness step."},"800":{"$value":"#3a1f78","$description":"Specific value within the lilac range at a defined lightness step."},"900":{"$value":"#2a1659","$description":"Specific value within the lilac range at a defined lightness step."},"$description":"Lilac ramp at fixed lightness steps. Mirrors the blue ramp's stops; available to brand overlays."},"amber":{"50":{"$value":"#fffbeb","$description":"Specific value within the amber range at a defined lightness step."},"400":{"$value":"#fbbf24","$description":"Specific value within the amber range at a defined lightness step."},"800":{"$value":"#92400e","$description":"Specific value within the amber range at a defined lightness step."},"950":{"$value":"#451a03","$description":"Specific value within the amber range at a defined lightness step."},"$description":"Discrete values within the amber range at defined lightness steps."},"stone":{"100":{"$value":"#F5EFE7","$description":"Stone 100 — near-white warm tint; accent-subtle surface."},"400":{"$value":"#D0B492","$description":"Stone 400 — light warm tone; dark-mode pressed accent."},"450":{"$value":"#BC9D7E","$description":"Stone 450 — medium warm tone; dark-mode hover accent."},"500":{"$value":"#A8896A","$description":"Stone 500 — mid warm tone; dark-mode rest accent."},"600":{"$value":"#8B6F47","$description":"Stone 600 — primary warm stone; light-mode rest accent and CTA surface."},"700":{"$value":"#75593A","$description":"Stone 700 — darker warm stone; light-mode hover accent."},"800":{"$value":"#5C432A","$description":"Stone 800 — deep warm stone; light-mode pressed accent."},"950":{"$value":"#3A2E1F","$description":"Stone 950 — near-black warm tone; dark-mode subtle accent surface."},"$description":"Warm stone/brown palette for Concrete Creations brand accent ramp. PLACEHOLDER values pending final brand identity work."},"projectBrand":{"microsoftGameDev":{"100":{"$value":"#E5E5FC","$description":"Light support tone for the Microsoft Game Dev project brand."},"500":{"$value":"#6d31fb","$description":"Primary accent tone for the Microsoft Game Dev project brand."},"900":{"$value":"oklch(0.22 0.16 304)","$description":"Dark support tone for the Microsoft Game Dev project brand."},"$description":"Project-specific brand colors used in portfolio contexts."},"$description":"Project-specific brand color families reserved for portfolio surfaces."}},"space":{"0":{"$value":{"value":0,"unit":"px"}},"1":{"$value":{"value":4,"unit":"px"}},"2":{"$value":{"value":8,"unit":"px"}},"3":{"$value":{"value":12,"unit":"px"}},"4":{"$value":{"value":16,"unit":"px"}},"5":{"$value":{"value":20,"unit":"px"}},"6":{"$value":{"value":24,"unit":"px"}},"7":{"$value":{"value":28,"unit":"px"}},"8":{"$value":{"value":32,"unit":"px"}},"10":{"$value":{"value":40,"unit":"px"}},"12":{"$value":{"value":48,"unit":"px"}},"16":{"$value":{"value":64,"unit":"px"}},"20":{"$value":{"value":80,"unit":"px"}},"24":{"$value":{"value":96,"unit":"px"}},"32":{"$value":{"value":128,"unit":"px"}},"$type":"dimension","$description":"Dimensional increments within the 4px base-unit spatial system.","px1":{"$value":{"value":1,"unit":"px"}},"px2":{"$value":{"value":2,"unit":"px"}},"px6":{"$value":{"value":6,"unit":"px"}},"px10":{"$value":{"value":10,"unit":"px"}}},"blur":{"8":{"$value":{"value":8,"unit":"px"},"$description":"8px blur step."},"16":{"$value":{"value":16,"unit":"px"},"$description":"Fullscreen backdrop blur for portfolio lightbox overlays."},"$type":"dimension","$description":"Backdrop blur strengths for frosted overlays and fullscreen media treatments."},"radius":{"0":{"$value":{"value":0,"unit":"px"}},"2":{"$value":{"value":2,"unit":"px"}},"4":{"$value":{"value":4,"unit":"px"}},"8":{"$value":{"value":8,"unit":"px"}},"12":{"$value":{"value":12,"unit":"px"}},"$type":"dimension","full":{"$value":{"value":9999,"unit":"px"}}},"typography":{"family":{"$type":"fontFamily","primary":{"$value":["Satoshi","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","sans-serif"],"$description":"Self-hosted Satoshi (ITF) body typeface; falls back to system-ui sans-serif stack."},"display":{"$value":["Satoshi","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","sans-serif"],"$description":"Display face: Satoshi Bold (ITF), bound to the display and title composites."},"mono":{"$value":["Geist Mono","Courier New","monospace"],"$description":"Monospace face: Geist Mono. Falls back to Courier New, monospace."}},"size":{"$type":"dimension","xs":{"$value":{"value":12,"unit":"px"},"$description":"Tailwind 4 default text-xs (hds#283 ramp)."},"sm":{"$value":{"value":14,"unit":"px"},"$description":"Tailwind 4 default text-sm (hds#283 ramp)."},"base":{"$value":{"value":16,"unit":"px"},"$description":"Tailwind 4 default text-base (hds#283 ramp)."},"lg":{"$value":{"value":18,"unit":"px"},"$description":"Tailwind 4 default text-lg (hds#283 ramp)."},"xl":{"$value":{"value":20,"unit":"px"},"$description":"Tailwind 4 default text-xl (hds#283 ramp)."},"2xl":{"$value":{"value":24,"unit":"px"},"$description":"Tailwind 4 default text-2xl (hds#283 ramp)."},"3xl":{"$value":{"value":30,"unit":"px"},"$description":"Tailwind 4 default text-3xl (hds#283 ramp)."},"4xl":{"$value":{"value":36,"unit":"px"},"$description":"Tailwind 4 default text-4xl (hds#283 ramp)."},"5xl":{"$value":{"value":48,"unit":"px"},"$description":"Tailwind 4 default text-5xl (hds#283 ramp)."},"6xl":{"$value":{"value":60,"unit":"px"},"$description":"Swiss-canon display size (hds#283 ramp). Static desktop value; fluid in theme.css. Tailwind 4 default text-6xl."},"code":{"$value":{"value":13,"unit":"px"},"$description":"13px code size. The mono role (hds#485): one px below ui so code sits level with 14px prose."}},"weight":{"$type":"fontWeight","regular":{"$value":400},"medium":{"$value":500},"bold":{"$value":700}},"lineHeight":{"$type":"number","compact":{"$value":0.95},"none":{"$value":1},"tight":{"$value":1.25},"snug":{"$value":1.375,"$description":"Swiss-canon snug rhythm (10t-5). Used by h2/h3 composites for tight-but-readable heading lines."},"normal":{"$value":1.5},"relaxed":{"$value":1.625,"$description":"Swiss-canon relaxed rhythm (10t-5). Used by body/small/mono composites for long-form prose comfort."},"display":{"$value":1.05,"$description":"Display role leading (hds#485)."},"body":{"$value":1.6,"$description":"Body role leading (hds#485)."}},"letterSpacing":{"$type":"dimension","tight":{"$value":{"value":-0.01,"unit":"em"}},"normal":{"$value":{"value":0,"unit":"em"}},"caps":{"$value":{"value":0.06,"unit":"em"},"$description":"All-caps tracking for eyebrow / kicker labels. Always pairs with text-transform: uppercase."}}},"duration":{"$type":"duration","instant":{"$value":{"value":100,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"short":{"$value":{"value":150,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"medium":{"$value":{"value":250,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"long":{"$value":{"value":400,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."}},"easing":{"$type":"cubicBezier","emphasized":{"$value":[0.4,0,0.2,1],"$description":"Cubic bezier with balanced input and output tangents."},"decelerate":{"$value":[0,0,0.2,1],"$description":"Cubic bezier with steep initial gain and constrained tail velocity."},"accelerate":{"$value":[0.4,0,1,1],"$description":"Cubic bezier with restrained initial gain and steep terminal velocity."},"elastic":{"$value":[0.34,1.56,0.64,1],"$description":"Spring response defined by stiffness, damping, and mass parameters.","$extensions":{"com.hirobius.hds":{"$type":"spring","$value":{"type":"spring","stiffness":300,"damping":20,"mass":1},"bezierSource":"The cubicBezier is easeOutBack (easings.net), chosen as a stand-in for the spring, not fitted to it: both overshoot once, the curve by about 10% and spring(300, 20, 1) by about 11%."}}}},"shadow":{"color":{"$type":"color","$value":"220 13% 18%","$description":"HSL channels for shadow-color alpha compositing. Light: cool neutral; dark: black.","$extensions":{"com.figma.variables":{"modes":{"Light":"220 13% 18%","Dark":"0 0% 0%"}}}}},"breakpoint":{"$description":"Discrete viewport thresholds expressed as dimensions.","xs":{"$type":"dimension","$value":{"value":375,"unit":"px"}},"sm":{"$type":"dimension","$value":{"value":640,"unit":"px"}},"md":{"$type":"dimension","$value":{"value":768,"unit":"px"}},"lg":{"$type":"dimension","$value":{"value":1024,"unit":"px"}},"xl":{"$type":"dimension","$value":{"value":1280,"unit":"px"}}},"size":{"8":{"$type":"dimension","$value":{"value":8,"unit":"px"},"$description":"8px size step."},"10":{"$type":"dimension","$value":{"value":10,"unit":"px"},"$description":"10px size step."},"12":{"$type":"dimension","$value":{"value":12,"unit":"px"},"$description":"12px size step."},"16":{"$type":"dimension","$value":{"value":16,"unit":"px"},"$description":"16px size step."},"20":{"$type":"dimension","$value":{"value":20,"unit":"px"},"$description":"20px size step."},"24":{"$type":"dimension","$value":{"value":24,"unit":"px"},"$description":"24px size step."},"32":{"$type":"dimension","$value":{"value":32,"unit":"px"},"$description":"32px size step."},"40":{"$type":"dimension","$value":{"value":40,"unit":"px"},"$description":"40px size step."},"48":{"$type":"dimension","$value":{"value":48,"unit":"px"},"$description":"48px size step."},"64":{"$type":"dimension","$value":{"value":64,"unit":"px"},"$description":"64px size step."},"80":{"$type":"dimension","$value":{"value":80,"unit":"px"},"$description":"80px size step."},"96":{"$type":"dimension","$value":{"value":96,"unit":"px"},"$description":"96px size step."},"120":{"$type":"dimension","$value":{"value":120,"unit":"px"},"$description":"120px size step. Backs semantic.size.tile."},"$description":"Unaliased dimensional values.","interactive":{"$description":"Interactive control size minimums.","min":{"$type":"dimension","$value":{"value":44,"unit":"px"},"$description":"Minimum interactive hit target size."},"minCompact":{"$type":"dimension","$value":{"value":24,"unit":"px"},"$description":"Compact inline control target minimum, e.g. a chip's remove button: WCAG 2.2 AA (2.5.8), not the 44px AAA floor (2.5.5)."}},"width":{"96":{"$type":"dimension","$value":{"value":96,"unit":"px"},"$description":"96px width step."},"280":{"$type":"dimension","$value":{"value":280,"unit":"px"},"$description":"Docs-shell rail width (hds#280): our own number, not HeroUI's 268px; fits the longest top-level nav label with room."},"760":{"$type":"dimension","$value":{"value":760,"unit":"px"}},"1200":{"$type":"dimension","$value":{"value":1200,"unit":"px"}},"50ch":{"$type":"dimension","$value":{"value":50,"unit":"ch"}}}},"grid":{"columns":{"1":{"$type":"number","$value":1},"2":{"$type":"number","$value":2},"3":{"$type":"number","$value":3}}},"zIndex":{"0":{"$type":"number","$value":0},"10":{"$type":"number","$value":10},"100":{"$type":"number","$value":100},"1000":{"$type":"number","$value":1000},"$description":"Discrete stacking levels along the z axis."},"borderWidth":{"$type":"dimension","xs":{"$value":{"value":1,"unit":"px"}},"sm":{"$value":{"value":2,"unit":"px"}},"md":{"$value":{"value":4,"unit":"px"}}}}`), ia = /* @__PURE__ */ JSON.parse(`{"motion":{"$type":"transition","$extensions":{"com.hirobius.hds":{"$type":"motion"}},"productive":{"$value":{"duration":"{primitive.duration.short}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.decelerate}"},"$description":"For micro-interactions and status changes. No deformation."},"expressive":{"$value":{"duration":"{primitive.duration.medium}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.elastic}"},"$description":"For teaching moments and significant UI entries. Includes physics-based squish."},"spatial":{"$value":{"duration":"{primitive.duration.long}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.emphasized}"},"$description":"For elements traveling long distances across the viewport."},"exit":{"$value":{"duration":"{primitive.duration.instant}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.accelerate}"},"$description":"For elements being removed from the DOM."},"distance":{"$type":"dimension","$value":"{primitive.space.6}","$description":"Scroll-reveal translateY travel distance. Equals semantic.space.scale.md today, but names motion travel, not a spacing tier (hds#242)."}},"color":{"$type":"color","surface":{"page":{"$value":"{primitive.color.neutral.white}","$description":"Main page background","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.white}","Dark":"{primitive.color.neutral.black}"}}}},"raised":{"$value":"{primitive.color.neutral.50}","$description":"Subtle elevated surface (cards, sections)","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.50}","Dark":"{primitive.color.neutral.950}"}}}},"overlay":{"$value":"{primitive.color.neutral.100}","$description":"Deeper surface layer","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.850}"}}}},"scrim":{"$value":"{primitive.color.neutral.900}","$description":"Opaque modal backdrop, near-black in both themes. Apply alpha in the class (bg-scrim/60), not here.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.black}"}}}},"inverse":{"$value":"{primitive.color.neutral.black}","$description":"Inverted background for contrast sections","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.black}","Dark":"{primitive.color.neutral.white}"}}}},"accent":{"$value":"{primitive.color.neutral.900}","$description":"Accent-colored background (neutral/monochrome; inverts to a light neutral on dark surfaces).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.100}"}}}},"accentSubtle":{"$value":"{primitive.color.neutral.100}","$description":"Faint accent tint for hover states or highlights","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"hover":{"$value":"{primitive.color.neutral.100}","$description":"Background for a hovered interactive surface (menu items, chips, tertiary buttons).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"pressed":{"$value":"{primitive.color.neutral.50}","$description":"Background for an actively pressed interactive surface.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.50}","Dark":"{primitive.color.neutral.950}"}}}},"selected":{"$value":"{primitive.color.neutral.200}","$description":"Background for a persistently selected item (active tab, checked row).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.800}"}}}},"muted":{"$value":"{primitive.color.neutral.100}","$description":"Muted background for low-emphasis content blocks.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"sunken":{"$value":"{primitive.color.neutral.200}","$description":"Recessed background for inset wells (inputs, code blocks, nested panels).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.850}"}}}}},"content":{"primary":{"$value":"{primitive.color.neutral.900}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.100}"}}}},"secondary":{"$value":"{primitive.color.neutral.600}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.600}","Dark":"{primitive.color.neutral.400}"}}}},"disabled":{"$value":"{primitive.color.neutral.300}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.600}"}}}},"inverse":{"$value":"{primitive.color.neutral.100}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"accent":{"$value":"{primitive.color.neutral.900}","$description":"Accent-intent text/icon color (monochrome). Pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.100}"}}}},"onAccent":{"$value":"{primitive.color.neutral.white}","$description":"Text/icon color on accent fills. Flips to a dark neutral in dark mode, where accent fills are light.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.white}","Dark":"{primitive.color.neutral.900}"}}}},"success":{"$value":"{primitive.color.green.700}","$description":"Success-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.700}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$value":"{primitive.color.amber.800}","$description":"Warning-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.800}","Dark":"{primitive.color.amber.400}"}}}},"danger":{"$value":"{primitive.color.red.700}","$description":"Danger-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.700}","Dark":"{primitive.color.red.400}"}}}}},"border":{"default":{"$value":"{primitive.color.neutral.200}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.700}"}}}},"interactive":{"$value":"{primitive.color.neutral.500}","$description":"Border for interactive control boundaries (inputs, selects, secondary buttons); meets the WCAG 1.4.11 3:1 non-text contrast floor.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.500}","Dark":"{primitive.color.neutral.500}"}}}},"subdued":{"$value":"{primitive.color.neutral.200}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.800}"}}}},"subtle":{"$value":"{primitive.color.neutral.100}","$description":"Lowest-contrast border for resting hairline edges on flat surfaces.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.850}"}}}},"strong":{"$value":"{primitive.color.neutral.300}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.600}"}}}},"accent":{"$value":"{primitive.color.neutral.900}","$description":"Accent border (neutral/monochrome; inverts on dark surfaces).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.100}"}}}},"success":{"$value":"{primitive.color.green.400}","$description":"Success-toned border for status outlines and success-state inputs.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.400}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$value":"{primitive.color.amber.400}","$description":"Warning-toned border for status outlines and warning-state inputs.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.400}","Dark":"{primitive.color.amber.400}"}}}}},"feedback":{"error":{"$type":"color","$value":"{primitive.color.red.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.700}","Dark":"{primitive.color.red.400}"}}}},"success":{"$type":"color","$value":"{primitive.color.green.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.700}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$type":"color","$value":"{primitive.color.amber.800}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.800}","Dark":"{primitive.color.amber.400}"}}}},"info":{"$type":"color","$value":"{primitive.color.blue.500}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.300}"}}}},"inProgress":{"$type":"color","$value":"{primitive.color.violet.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.violet.700}","Dark":"{primitive.color.violet.400}"}}}},"bg":{"error":{"$type":"color","$value":"{primitive.color.red.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.50}","Dark":"{primitive.color.red.950}"}}}},"success":{"$type":"color","$value":"{primitive.color.green.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.50}","Dark":"{primitive.color.green.950}"}}}},"warning":{"$type":"color","$value":"{primitive.color.amber.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.50}","Dark":"{primitive.color.amber.950}"}}}},"info":{"$type":"color","$value":"{primitive.color.blue.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.50}","Dark":"{primitive.color.blue.900}"}}}},"inProgress":{"$type":"color","$value":"{primitive.color.violet.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.violet.50}","Dark":"{primitive.color.violet.950}"}}}}}},"state":{"pressed":{"overlay":{"$value":"{primitive.color.neutral.black}","$description":"Opaque pressed wash over a control's own fill: black in light, white in dark. Alpha in the class (inset-shadow-pressed-overlay/5).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.black}","Dark":"{primitive.color.neutral.white}"}}}}}}},"space":{"$type":"dimension","$description":"Semantic spacing tiers: subgrid, component, layout, section, scale.","scale":{"$description":"hds#206: the canonical spacing vocabulary, one monotonic t-shirt scale (xs to xl) for padding, margin and gap. Supersedes deprecated names.","xs":{"$value":"{primitive.space.2}","$description":"8px — smallest step. Same value as component.gap (deprecated alias)."},"sm":{"$value":"{primitive.space.4}","$description":"16px — same value as layout.tight (deprecated alias)."},"md":{"$value":"{primitive.space.6}","$description":"24px. Default of the overridable roles surface.padding and region.gutter. The deprecated layout.normal has the same value."},"lg":{"$value":"{primitive.space.8}","$description":"32px — same value as layout.inset (deprecated alias)."},"xl":{"$value":"{primitive.space.12}","$description":"48px — same value as layout.spacious (deprecated alias)."}},"surface":{"$description":"hds#206 surface inset role. Tenants override it per brand and density, always with a scale step.","padding":{"$value":"{semantic.space.scale.md}","$description":"24px (scale.md) inset for cards, forms and panels. Tenants override it per brand and density. Replaces component.padding."}},"region":{"$description":"hds#206 region gutter role. theme.css retunes it per viewport, always with a scale step.","gutter":{"$value":"{semantic.space.scale.md}","$description":"24px (scale.md) column and region gutters; theme.css sets scale.lg (32px), and scale.sm (16px) below 640px. Replaces layout.gutter."}},"subgrid":{"hairline":{"$value":"{primitive.space.px1}","$description":"1px border offset and hairline spacing."},"xs":{"$value":"{primitive.space.px2}","$description":"2px vertical rhythm nudge and baseline adjustment."},"gap":{"$value":"{primitive.space.1}","$description":"4px cap-height and inline cluster spacing."}},"component":{"gap":{"$value":"{primitive.space.2}","$description":"8px label↔input rhythm and closely coupled control spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.xs; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.xs"},"medium":{"$value":"{primitive.space.3}","$description":"12px adjacent form fields and medium intra-component gaps."},"padding":{"$value":"{semantic.space.surface.padding}","$description":"24px inset for cards, forms and panels. DEPRECATED alias (hds#206) — use semantic.space.surface.padding; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.surface.padding"}},"layout":{"tight":{"$value":"{primitive.space.4}","$description":"16px default HdsStack gap and inter-component spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.sm; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.sm"},"normal":{"$value":"{primitive.space.6}","$description":"24px column gutters and sidebar gutter spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.md; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.md"},"gutter":{"$value":"{semantic.space.region.gutter}","$description":"24px column and region gutters. DEPRECATED alias (hds#206) — use semantic.space.region.gutter (responsive in theme.css); kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.region.gutter"},"inset":{"$value":"{primitive.space.8}","$description":"32px major block separation and inset inter-component gaps. DEPRECATED alias (hds#206) — use semantic.space.scale.lg; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.lg"},"spacious":{"$value":"{primitive.space.12}","$description":"48px break between major content blocks. DEPRECATED alias (hds#206) — use semantic.space.scale.xl; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.xl"}},"section":{"stack":{"$value":"{primitive.space.20}","$description":"80px vertical rhythm between page sections and major editorial blocks."},"inset":{"$value":"{primitive.space.24}","$description":"96px hero and landing-page inset padding."},"heroMax":{"$value":"{primitive.space.32}","$description":"128px maximum hero region padding for extra-large displays."}},"sidebar":{"indent":{"$value":"{primitive.space.3}","$description":"12px indent level for nested sidebar and TOC groups."},"gap":{"$value":"{primitive.space.4}","$description":"16px vertical spacing between items in sidebar and TOC stacks."},"sectionGap":{"$value":"{primitive.space.3}","$description":"12px spacing between sidebar sections and grouped rail blocks."},"railPadding":{"$value":"{primitive.space.5}","$description":"20px outer padding for sidebar and TOC rails."},"railWidth":{"$type":"dimension","$value":"{primitive.size.width.280}","$description":"Docs-shell nav and TOC rail width (hds#280), one token for both rails; 0 below their breakpoint (see HdsDocsShell)."}}},"layout":{"width":{"content":{"$type":"dimension","$value":"{primitive.size.width.760}","$description":"Max width for prose/content (760px). Use with HdsContainer for centered text blocks."},"max":{"$type":"dimension","$value":"{primitive.size.width.1200}","$description":"Max width for full-layout containers (1200px). Use with HdsContainer for page layouts."}},"container":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.1200}"}},"content":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.760}"}},"prose":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.50ch}"}},"section":{"paddingY":{"$type":"dimension","$value":"{primitive.space.20}"}},"grid":{"gap":{"$type":"dimension","$value":"{primitive.space.8}"},"columns":{"mobile":{"$type":"number","$value":"{primitive.grid.columns.1}"},"tablet":{"$type":"number","$value":"{primitive.grid.columns.2}"},"desktop":{"$type":"number","$value":"{primitive.grid.columns.3}"}}}},"typography":{"$type":"typography","$description":"5-role type ramp plus mono (hds#483): display, title, body, ui, caption, mono. h1, h2, h3 and eyebrow are deprecated aliases.","display":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.5xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.display}"},"$description":"One per page, hero only. 48px / 1.05 / 700. Role 1 of 6."},"title":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"Section and card headings. 24px / 1.25 / 700. Role 2 of 6."},"body":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.base}","fontWeight":"{primitive.typography.weight.regular}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.body}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Prose. 16px / 1.6 / 400, 60ch measure. Role 3 of 6."},"ui":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.sm}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Controls, nav, table text, values. 14px / 1.5 / 500. Role 4 of 6."},"caption":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}"},"$description":"Metadata, help text and labels, in sentence case. 12px / 1.5 / 500. Role 5 of 6."},"mono":{"$value":{"fontFamily":"{primitive.typography.family.mono}","fontSize":"{primitive.typography.size.code}","fontWeight":"{primitive.typography.weight.regular}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Code and ids. 13px / 1.5 / 400. The mono companion, role 6 of 6."},"h1":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"h2":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"h3":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"eyebrow":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}"},"$description":"deprecated: use semantic.typography.caption","$deprecated":"hds#483 — use semantic.typography.caption"},"lineHeight":{"none":{"$type":"number","$value":"{primitive.typography.lineHeight.none}","$description":"Semantic alias for leading-none (1). Display text and badge spans."}}},"docs":{"$description":"Doc-page spacing scale: section, paragraph, inline rhythm.","space":{"$type":"dimension","section":{"$value":"{primitive.space.12}","$description":"48px between H2 sections — generous section break for doc pages."},"paragraph":{"$value":"{primitive.space.6}","$description":"24px between paragraphs — comfortable prose rhythm for long-form doc content."},"inline":{"$value":"{primitive.space.2}","$description":"8px inline cluster spacing — gap between metadata badges, inline icons, doc-page chips."}}},"accent":{"$type":"color","rest":{"$value":"{primitive.color.neutral.900}","$description":"Default accent fill for interactive elements at rest. Neutral (monochrome) accent — inverts to a light neutral on dark surfaces.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.100}"}}}},"hover":{"$value":"{primitive.color.neutral.800}","$description":"Accent fill on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.800}","Dark":"{primitive.color.neutral.200}"}}}},"pressed":{"$value":"{primitive.color.neutral.950}","$description":"Accent fill during active press.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.950}","Dark":"{primitive.color.neutral.300}"}}}},"inactive":{"$value":"{primitive.color.neutral.400}","$description":"Accent fill for inactive or unselected accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.400}","Dark":"{primitive.color.neutral.600}"}}}},"disabled":{"$value":"{primitive.color.neutral.300}","$description":"Accent fill for disabled accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.700}"}}}},"content":{"$value":"{primitive.color.neutral.900}","$description":"Text and icon color on neutral surfaces with accent intent. Monochrome — pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.100}"}}}},"contentHover":{"$value":"{primitive.color.neutral.700}","$description":"Accent content color on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.700}","Dark":"{primitive.color.neutral.300}"}}}},"subtle":{"$value":"{primitive.color.neutral.100}","$description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.800}"}}}}},"radius":{"action":{"$type":"dimension","$value":"{primitive.radius.8}","$description":"Corner radius for action elements (buttons, inputs, badges); Tailwind rounded-md resolves here. Override role.radius to reshape the system."},"control":{"$type":"dimension","$value":"{primitive.radius.4}","$description":"Corner radius for small control glyphs such as the checkbox box: not fully round, and distinct from semantic.radius.action (hds#242)."}},"borderWidth":{"default":{"$type":"dimension","$value":"{primitive.borderWidth.xs}","$description":"Default hairline border weight for surfaces and inputs."},"emphasis":{"$type":"dimension","$value":"{primitive.borderWidth.sm}","$description":"Stronger border weight for focus rings and active indicators."}},"shadow":{"$type":"shadow","subtle":{"$value":"0 1px 2px hsl(var(--primitive-shadow-color) / 0.04), 0 1px 1px hsl(var(--primitive-shadow-color) / 0.06)","$description":"Resting elevation shadow for raised surfaces (cards, inline panels)."},"floating":{"$value":"0 4px 6px hsl(var(--primitive-shadow-color) / 0.05), 0 10px 15px hsl(var(--primitive-shadow-color) / 0.08)","$description":"Hover/floating elevation for menus, popovers, and tooltips."},"overlay":{"$value":"0 10px 15px hsl(var(--primitive-shadow-color) / 0.08), 0 25px 50px hsl(var(--primitive-shadow-color) / 0.12)","$description":"Modal/dialog elevation for full-screen overlays."}},"elevation":{"$extensions":{"com.hirobius.hds":{"$type":"elevation"}},"flat":{"$description":"Flat surface (no shadow, hairline border) for embedded panels.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.page}","shadow":null,"border":"{semantic.color.border.subtle}"}}}},"raised":{"$description":"Resting card / panel elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.raised}","shadow":"{semantic.shadow.subtle}","border":null}}}},"floating":{"$description":"Hover, menu, and popover elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.raised}","shadow":"{semantic.shadow.floating}","border":null}}}},"overlay":{"$description":"Modal, dialog, and drawer elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.overlay}","shadow":"{semantic.shadow.overlay}","border":null}}}}},"size":{"$type":"dimension","$description":"Sizing roles for control glyphs, avatars and table rows. Roles sharing a value stay separate so each can change (hds#242).","control":{"$description":"Interactive control glyph/element sizing (checkbox glyph box, radio dot, slider track/fill, code-block copy-button-matched footprint).","sm":{"$value":"{primitive.size.8}","$description":"Small control element — radio dot, slider fill bar height."},"md":{"$value":"{primitive.size.20}","$description":"Medium control element — checkbox glyph box, slider track wrapper height."},"lg":{"$value":"{primitive.size.32}","$description":"Large control footprint — code-block inline-wrapper min-height / copy-button-matched pre padding."}},"icon":{"$description":"Reserved icon-size role, parallel to the existing --hds-icon-* bridge (src/styles/theme.css), for future direct semantic.size.icon consumers.","sm":{"$value":"{primitive.size.16}","$description":"Small icon box — matches --hds-icon-small."},"md":{"$value":"{primitive.size.20}","$description":"Medium icon box — matches --hds-icon-medium."},"lg":{"$value":"{primitive.size.24}","$description":"Large icon box — matches --hds-icon-large."}},"avatar":{"$value":"{primitive.size.40}","$description":"Avatar size (width and height) for activity feeds and identity glyphs. Same pixels as row.compact today, a separate role (hds#242)."},"tile":{"$value":"{primitive.size.120}","$description":"Minimum height of a metric tile, one height for every tile so rows line up (hds#403)."},"row":{"$description":"Table row minimum height by density.","compact":{"$value":"{primitive.size.40}","$description":"Compact-density row minimum height."},"comfortable":{"$value":"{primitive.size.48}","$description":"Comfortable-density row minimum height."}}},"zIndex":{"$type":"number","$description":"Named stacking layers, aliasing the numeric primitive.zIndex scale (hds#242).","control":{"$value":"{primitive.zIndex.10}","$description":"Raises an interactive control (e.g. a native range input) above its visual decoration for hit-testing."},"sticky":{"$value":"{primitive.zIndex.100}","$description":"Sticky-positioned elements, such as a table header row."}}}`), ta = { nav: { bg: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Nav bar background fill." }, bgActive: { $type: "color", $value: "{semantic.accent.subtle}", $description: "Nav item background fill when active or selected." }, borderActive: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Nav item border color when active or selected." }, text: { $type: "color", $value: "{semantic.color.content.secondary}", $description: "Nav item text color at rest." }, textActive: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Nav item text color when active or selected." }, height: { $type: "dimension", $value: "{primitive.space.16}", $description: "Nav bar height." }, paddingX: { $type: "dimension", $value: "{primitive.space.6}", $description: "Horizontal padding inside nav items." }, paddingY: { $type: "dimension", $value: "{primitive.space.2}", $description: "Vertical padding inside nav items." } }, tag: { background: { $type: "color", $value: "{semantic.accent.subtle}", $description: "Base tag surface color." }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Default tag text color." }, border: { $type: "color", $value: "{semantic.color.border.default}", $description: "Default tag border color." }, radius: { $type: "dimension", $value: "{primitive.radius.full}", $description: "Pill radius for the tag surface." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Tag type size." }, fontWeight: { $type: "fontWeight", $value: "{primitive.typography.weight.medium}", $description: "Tag label weight." }, lineHeight: { $type: "number", $value: "{primitive.typography.lineHeight.normal}", $description: "Readable label rhythm for tags." }, minWidth: { $type: "dimension", $value: "{primitive.size.48}", $description: "Minimum tag width." }, minHeight: { $type: "dimension", $value: "{primitive.space.6}", $description: "Minimum tag height." }, paddingX: { $type: "dimension", $value: "{primitive.space.3}", $description: "Horizontal padding inside the pill." }, paddingY: { $type: "dimension", $value: "{primitive.space.2}", $description: "Vertical padding inside the pill." }, activeText: { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Text color when the tag is active." }, activeBackground: { $type: "color", $value: "{semantic.accent.rest}", $description: "Active tag fill color." }, activeBorder: { $type: "color", $value: "{semantic.accent.rest}", $description: "Active tag border color." }, activeHover: { $type: "color", $value: "{semantic.accent.hover}", $description: "Active tag hover fill color." } }, badge: { fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Badge type size." }, fontWeight: { $type: "fontWeight", $value: "{primitive.typography.weight.medium}", $description: "Badge label weight." }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Badge text color." }, bg: { $type: "color", $value: "{semantic.color.feedback.bg.info}", $extensions: { "com.figma.variables": { modes: { Light: "{semantic.color.feedback.bg.info}", Dark: "{semantic.color.feedback.bg.info}" } } }, $description: "Badge background color." }, radius: { $type: "dimension", $value: "{primitive.radius.4}", $description: "Small rounded radius for badges." }, height: { $type: "dimension", $value: "{primitive.size.20}", $description: "Badge height." }, minWidth: { $type: "dimension", $value: "{primitive.size.20}", $description: "Badge minimum width." }, paddingY: { $type: "dimension", $value: "{primitive.space.px2}", $description: "Vertical padding inside the badge." }, paddingX: { $type: "dimension", $value: "{primitive.space.px6}", $description: "Horizontal padding inside the badge." } }, button: { bg: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Primary button fill." }, bgHover: { $type: "color", $value: "{semantic.accent.hover}", $description: "Primary button hover fill." }, text: { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Primary button text color." }, radius: { $type: "dimension", $value: "{semantic.radius.action}", $description: "Button corner radius." }, paddingX: { $type: "dimension", $value: "{primitive.space.4}", $description: "Horizontal button padding." }, paddingY: { $type: "dimension", $value: "{primitive.space.3}", $description: "Vertical button padding." }, size: { sm: { paddingX: { $type: "dimension", $value: "{primitive.space.2}", $description: "Small button horizontal padding (8px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.1}", $description: "Small button vertical padding (4px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Small button label size (12px, hds#283: was 13px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.12}", $description: "Small button icon slot size (12px)." }, height: { $type: "dimension", $value: "{primitive.space.7}", $description: "Small button height (28px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.1}", $description: "Small button icon-to-label gap (4px)." } }, md: { paddingX: { $type: "dimension", $value: "{primitive.space.4}", $description: "Medium button horizontal padding (16px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.3}", $description: "Medium button vertical padding (12px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.sm}", $description: "Medium button label size (14px, hds#283: was 15px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.16}", $description: "Medium button icon slot size (16px)." }, height: { $type: "dimension", $value: "{primitive.size.40}", $description: "Medium button height (40px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.2}", $description: "Medium button icon-to-label gap (8px)." } }, lg: { paddingX: { $type: "dimension", $value: "{primitive.space.6}", $description: "Large button horizontal padding (24px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.4}", $description: "Large button vertical padding (16px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.base}", $description: "Large button label size (16px, hds#283: was 17px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.20}", $description: "Large button icon slot size (20px)." }, height: { $type: "dimension", $value: "{primitive.size.48}", $description: "Large button height (48px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.2}", $description: "Large button icon-to-label gap (8px)." } } }, primary: { textDisabled: { $type: "color", $value: "{semantic.color.content.onAccent}", $extensions: { "com.figma.variables": { modes: { Light: "{semantic.color.content.onAccent}", Dark: "{semantic.color.content.disabled}" } } }, $description: "Disabled primary button text color." }, bgDisabled: { $type: "color", $value: "{semantic.color.surface.accentSubtle}", $description: "Disabled primary button fill." } }, secondary: { bg: { rest: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Secondary button fill." }, hover: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Secondary button hover fill." }, pressed: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Secondary button pressed fill." } }, border: { rest: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button border." }, hover: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button hover border." }, pressed: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button pressed border." }, disabled: { $type: "color", $value: "{semantic.color.border.subdued}", $description: "Secondary button disabled border." } }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Secondary button text color." } } }, input: { bg: { $type: "color", $value: "{semantic.color.surface.raised}" }, text: { $type: "color", $value: "{semantic.color.content.primary}" }, border: { $type: "color", $value: "{semantic.color.border.interactive}" }, borderError: { $type: "color", $value: "{semantic.color.feedback.error}" }, radius: { $type: "dimension", $value: "{semantic.radius.action}" }, paddingX: { $type: "dimension", $value: "{primitive.space.4}" }, paddingY: { $type: "dimension", $value: "{primitive.space.3}" } }, card: { bg: { $type: "color", $value: "{semantic.color.surface.raised}" }, border: { $type: "color", $value: "{semantic.color.border.default}" }, radius: { $type: "dimension", $value: "{primitive.radius.8}" }, padding: { $type: "dimension", $value: "{primitive.space.6}" }, gap: { $type: "dimension", $value: "{primitive.space.2}" } }, lightbox: { backdrop: { blur: { $type: "dimension", $value: "{primitive.blur.16}", $description: "Backdrop blur applied behind fullscreen image lightboxes." } } } }, aa = { $description: "Shadcn-style role aliases mapping to semantic tokens. Compiled to --role-* CSS vars.", background: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Page background. shadcn role: background." }, foreground: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Default text on background. shadcn role: foreground." }, card: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Card surface. shadcn role: card." }, "card-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on card. shadcn role: card-foreground." }, popover: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Popover/menu surface. shadcn role: popover." }, scrim: { $type: "color", $value: "{semantic.color.surface.scrim}", $description: "Modal backdrop colour role. Apply alpha in the class, e.g. bg-scrim/60." }, "pressed-overlay": { $type: "color", $value: "{semantic.color.state.pressed.overlay}", $description: "Pressed-state overlay colour role. Apply alpha in the class, e.g. inset-shadow-pressed-overlay/5." }, "popover-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on popover. shadcn role: popover-foreground." }, primary: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Primary action surface. shadcn role: primary." }, "primary-foreground": { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Text/icons on primary surface. shadcn role: primary-foreground." }, secondary: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Secondary action surface. shadcn role: secondary." }, "secondary-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on secondary surface. shadcn role: secondary-foreground." }, muted: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Muted/quiet bg (skeletons, disabled inputs). shadcn role: muted." }, "muted-foreground": { $type: "color", $value: "{semantic.color.content.secondary}", $description: "Muted text. shadcn role: muted-foreground." }, accent: { $type: "color", $value: "{semantic.color.surface.accentSubtle}", $description: "Hover/active tinted bg. shadcn role: accent." }, "accent-foreground": { $type: "color", $value: "{semantic.color.content.accent}", $description: "Text on accent surface. shadcn role: accent-foreground." }, destructive: { $type: "color", $value: "{semantic.color.feedback.error}", $description: "Destructive action surface. shadcn role: destructive." }, "destructive-foreground": { $type: "color", $value: "{semantic.color.content.inverse}", $description: "Text on destructive surface. shadcn role: destructive-foreground." }, border: { $type: "color", $value: "{semantic.color.border.default}", $description: "Default border. shadcn role: border." }, input: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Input field border. shadcn role: input." }, ring: { $type: "color", $value: "{semantic.color.border.accent}", $description: "Focus ring color. shadcn role: ring." }, radius: { $type: "dimension", $value: "{semantic.radius.action}", $description: "Default border radius. shadcn role: radius." } }, ra = {
-  $schema: Zt,
-  $description: Qt,
-  primitive: ea,
-  semantic: ia,
-  component: ta,
-  role: aa
-}, nr = ra;
+const aa = "https://www.designtokens.org/schemas/2025.10/format.json", ra = "Adrian Milsap hirobius design tokens - W3C DTCG 2025.10 compliant, Figma SDS architecture", na = /* @__PURE__ */ JSON.parse(`{"$description":"Base values used as inputs to derived token layers.","color":{"$type":"color","neutral":{"50":{"$value":"#fafafa","$description":"Specific value within the neutral range at a defined lightness step."},"100":{"$value":"#f5f5f5","$description":"Specific value within the neutral range at a defined lightness step."},"200":{"$value":"#e5e5e5","$description":"Specific value within the neutral range at a defined lightness step."},"300":{"$value":"#d4d4d4","$description":"Specific value within the neutral range at a defined lightness step."},"400":{"$value":"#a3a3a3","$description":"Specific value within the neutral range at a defined lightness step."},"500":{"$value":"#737373","$description":"Specific value within the neutral range at a defined lightness step."},"600":{"$value":"#525252","$description":"Specific value within the neutral range at a defined lightness step."},"700":{"$value":"#404040","$description":"Specific value within the neutral range at a defined lightness step."},"800":{"$value":"#262626","$description":"Specific value within the neutral range at a defined lightness step."},"850":{"$value":"#1a1a1a","$description":"Specific value within the neutral range at a defined lightness step."},"900":{"$value":"#111111","$description":"Specific value within the neutral range at a defined lightness step."},"950":{"$value":"#0a0a0a","$description":"Specific value within the neutral range at a defined lightness step."},"$description":"Discrete values within the neutral range at defined lightness steps.","white":{"$value":"#ffffff","$description":"Specific value within the neutral range at a defined lightness step."},"black":{"$value":"#000000","$description":"Specific value within the neutral range at a defined lightness step."}},"blue":{"50":{"$value":"oklch(0.96 0.03 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"100":{"$value":"oklch(0.92 0.04 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"200":{"$value":"oklch(0.88 0.07 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"300":{"$value":"oklch(0.70 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"400":{"$value":"oklch(0.65 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"450":{"$value":"oklch(0.56 0.29 266.60)","$description":"Specific value within the blue range at a defined lightness step."},"500":{"$value":"#1E2EFD","$description":"Specific value within the blue range at a defined lightness step."},"600":{"$value":"oklch(0.45 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"700":{"$value":"oklch(0.44 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"800":{"$value":"oklch(0.30 0.07 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"900":{"$value":"oklch(0.22 0.05 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"$description":"Discrete values within the blue range at defined lightness steps."},"red":{"50":{"$value":"#fef2f2","$description":"Specific value within the red range at a defined lightness step."},"400":{"$value":"#f87171","$description":"Specific value within the red range at a defined lightness step."},"700":{"$value":"#b91c1c","$description":"Specific value within the red range at a defined lightness step."},"950":{"$value":"#450a0a","$description":"Specific value within the red range at a defined lightness step."},"$description":"Discrete values within the red range at defined lightness steps."},"green":{"50":{"$value":"#ecfdf5","$description":"Specific value within the green range at a defined lightness step."},"400":{"$value":"#34d399","$description":"Specific value within the green range at a defined lightness step."},"700":{"$value":"#047857","$description":"Specific value within the green range at a defined lightness step."},"950":{"$value":"#022c22","$description":"Specific value within the green range at a defined lightness step."},"$description":"Discrete values within the green range at defined lightness steps."},"apple":{"50":{"$value":"#f2faeb","$description":"Apple-green accent tint — faintest step."},"100":{"$value":"#e2f3cf","$description":"Apple-green accent — very light tint."},"200":{"$value":"#c7e7a4","$description":"Apple-green accent — light tint."},"300":{"$value":"#a6d873","$description":"Apple-green accent — soft mid-light step."},"400":{"$value":"#85c84c","$description":"Apple-green accent — bright step; dark-mode rest accent."},"500":{"$value":"#66b239","$description":"Apple-green accent rest — bright, rich apple green; AA for dark (neutral.900) text as a fill."},"600":{"$value":"#54922d","$description":"Apple-green accent — hover / border step."},"700":{"$value":"#416f20","$description":"Apple-green accent — pressed and accent-intent text (AA for text on page and card surfaces)."},"800":{"$value":"#34571b","$description":"Apple-green accent — deep step."},"900":{"$value":"#2b4518","$description":"Apple-green accent — darkest usable step."},"950":{"$value":"#16250c","$description":"Apple-green accent — near-black green substrate."},"$description":"Discrete values within the apple-green (brand accent) range at defined lightness steps. Distinct from the emerald \`green\` feedback/success scale."},"violet":{"50":{"$value":"#f5f3ff","$description":"Specific value within the violet range at a defined lightness step."},"400":{"$value":"#a78bfa","$description":"Specific value within the violet range at a defined lightness step."},"700":{"$value":"#6d28d9","$description":"Specific value within the violet range at a defined lightness step."},"950":{"$value":"#2e1065","$description":"Specific value within the violet range at a defined lightness step."},"$description":"Discrete values within the violet range at defined lightness steps."},"lilac":{"50":{"$value":"#f7f4fe","$description":"Specific value within the lilac range at a defined lightness step."},"100":{"$value":"#efe9fd","$description":"Specific value within the lilac range at a defined lightness step."},"200":{"$value":"#ddd0fb","$description":"Specific value within the lilac range at a defined lightness step."},"300":{"$value":"#c3aef6","$description":"Specific value within the lilac range at a defined lightness step."},"400":{"$value":"#a585ee","$description":"Specific value within the lilac range at a defined lightness step."},"450":{"$value":"#9a6fe8","$description":"Specific value within the lilac range at a defined lightness step."},"500":{"$value":"#6f3fd4","$description":"Lilac accent rest — AA for white text on page and card surfaces."},"600":{"$value":"#5f33c0","$description":"Specific value within the lilac range at a defined lightness step."},"700":{"$value":"#4f2aa3","$description":"Specific value within the lilac range at a defined lightness step."},"800":{"$value":"#3a1f78","$description":"Specific value within the lilac range at a defined lightness step."},"900":{"$value":"#2a1659","$description":"Specific value within the lilac range at a defined lightness step."},"$description":"Lilac ramp at fixed lightness steps. Mirrors the blue ramp's stops; available to brand overlays."},"amber":{"50":{"$value":"#fffbeb","$description":"Specific value within the amber range at a defined lightness step."},"400":{"$value":"#fbbf24","$description":"Specific value within the amber range at a defined lightness step."},"800":{"$value":"#92400e","$description":"Specific value within the amber range at a defined lightness step."},"950":{"$value":"#451a03","$description":"Specific value within the amber range at a defined lightness step."},"$description":"Discrete values within the amber range at defined lightness steps."},"stone":{"100":{"$value":"#F5EFE7","$description":"Stone 100 — near-white warm tint; accent-subtle surface."},"400":{"$value":"#D0B492","$description":"Stone 400 — light warm tone; dark-mode pressed accent."},"450":{"$value":"#BC9D7E","$description":"Stone 450 — medium warm tone; dark-mode hover accent."},"500":{"$value":"#A8896A","$description":"Stone 500 — mid warm tone; dark-mode rest accent."},"600":{"$value":"#8B6F47","$description":"Stone 600 — primary warm stone; light-mode rest accent and CTA surface."},"700":{"$value":"#75593A","$description":"Stone 700 — darker warm stone; light-mode hover accent."},"800":{"$value":"#5C432A","$description":"Stone 800 — deep warm stone; light-mode pressed accent."},"950":{"$value":"#3A2E1F","$description":"Stone 950 — near-black warm tone; dark-mode subtle accent surface."},"$description":"Warm stone/brown palette for Concrete Creations brand accent ramp. PLACEHOLDER values pending final brand identity work."},"projectBrand":{"microsoftGameDev":{"100":{"$value":"#E5E5FC","$description":"Light support tone for the Microsoft Game Dev project brand."},"500":{"$value":"#6d31fb","$description":"Primary accent tone for the Microsoft Game Dev project brand."},"900":{"$value":"oklch(0.22 0.16 304)","$description":"Dark support tone for the Microsoft Game Dev project brand."},"$description":"Project-specific brand colors used in portfolio contexts."},"$description":"Project-specific brand color families reserved for portfolio surfaces."}},"space":{"0":{"$value":{"value":0,"unit":"px"}},"1":{"$value":{"value":4,"unit":"px"}},"2":{"$value":{"value":8,"unit":"px"}},"3":{"$value":{"value":12,"unit":"px"}},"4":{"$value":{"value":16,"unit":"px"}},"5":{"$value":{"value":20,"unit":"px"}},"6":{"$value":{"value":24,"unit":"px"}},"7":{"$value":{"value":28,"unit":"px"}},"8":{"$value":{"value":32,"unit":"px"}},"10":{"$value":{"value":40,"unit":"px"}},"12":{"$value":{"value":48,"unit":"px"}},"16":{"$value":{"value":64,"unit":"px"}},"20":{"$value":{"value":80,"unit":"px"}},"24":{"$value":{"value":96,"unit":"px"}},"32":{"$value":{"value":128,"unit":"px"}},"$type":"dimension","$description":"Dimensional increments within the 4px base-unit spatial system.","px1":{"$value":{"value":1,"unit":"px"}},"px2":{"$value":{"value":2,"unit":"px"}},"px6":{"$value":{"value":6,"unit":"px"}},"px10":{"$value":{"value":10,"unit":"px"}}},"blur":{"8":{"$value":{"value":8,"unit":"px"},"$description":"8px blur step."},"16":{"$value":{"value":16,"unit":"px"},"$description":"Fullscreen backdrop blur for portfolio lightbox overlays."},"$type":"dimension","$description":"Backdrop blur strengths for frosted overlays and fullscreen media treatments."},"radius":{"0":{"$value":{"value":0,"unit":"px"}},"2":{"$value":{"value":2,"unit":"px"}},"4":{"$value":{"value":4,"unit":"px"}},"8":{"$value":{"value":8,"unit":"px"}},"12":{"$value":{"value":12,"unit":"px"}},"$type":"dimension","full":{"$value":{"value":9999,"unit":"px"}}},"typography":{"family":{"$type":"fontFamily","primary":{"$value":["Satoshi","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","sans-serif"],"$description":"Self-hosted Satoshi (ITF) body typeface; falls back to system-ui sans-serif stack."},"display":{"$value":["Satoshi","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","sans-serif"],"$description":"Display face: Satoshi Bold (ITF), bound to the display and title composites."},"mono":{"$value":["IBM Plex Mono","Courier New","monospace"],"$description":"Monospace face: IBM Plex Mono. Falls back to Courier New, monospace."}},"size":{"$type":"dimension","xs":{"$value":{"value":12,"unit":"px"},"$description":"Tailwind 4 default text-xs (hds#283 ramp)."},"sm":{"$value":{"value":14,"unit":"px"},"$description":"Tailwind 4 default text-sm (hds#283 ramp)."},"base":{"$value":{"value":16,"unit":"px"},"$description":"Tailwind 4 default text-base (hds#283 ramp)."},"lg":{"$value":{"value":18,"unit":"px"},"$description":"Tailwind 4 default text-lg (hds#283 ramp)."},"xl":{"$value":{"value":20,"unit":"px"},"$description":"Tailwind 4 default text-xl (hds#283 ramp)."},"2xl":{"$value":{"value":24,"unit":"px"},"$description":"Tailwind 4 default text-2xl (hds#283 ramp)."},"3xl":{"$value":{"value":30,"unit":"px"},"$description":"Tailwind 4 default text-3xl (hds#283 ramp)."},"4xl":{"$value":{"value":36,"unit":"px"},"$description":"Tailwind 4 default text-4xl (hds#283 ramp)."},"5xl":{"$value":{"value":48,"unit":"px"},"$description":"Tailwind 4 default text-5xl (hds#283 ramp)."},"6xl":{"$value":{"value":60,"unit":"px"},"$description":"Swiss-canon display size (hds#283 ramp). Static desktop value; fluid in theme.css. Tailwind 4 default text-6xl."},"code":{"$value":{"value":13,"unit":"px"},"$description":"13px code size. The mono role (hds#485): one px below ui so code sits level with 14px prose."}},"weight":{"$type":"fontWeight","regular":{"$value":400},"medium":{"$value":500},"bold":{"$value":700}},"lineHeight":{"$type":"number","compact":{"$value":0.95},"none":{"$value":1},"tight":{"$value":1.25},"snug":{"$value":1.375,"$description":"Swiss-canon snug rhythm (10t-5). Used by h2/h3 composites for tight-but-readable heading lines."},"normal":{"$value":1.5},"relaxed":{"$value":1.625,"$description":"Swiss-canon relaxed rhythm (10t-5). Used by body/small/mono composites for long-form prose comfort."},"display":{"$value":1.05,"$description":"Display role leading (hds#485)."},"body":{"$value":1.6,"$description":"Body role leading (hds#485)."}},"letterSpacing":{"$type":"dimension","tight":{"$value":{"value":-0.01,"unit":"em"}},"normal":{"$value":{"value":0,"unit":"em"}},"caps":{"$value":{"value":0.06,"unit":"em"},"$description":"All-caps tracking for eyebrow / kicker labels. Always pairs with text-transform: uppercase."}}},"duration":{"$type":"duration","instant":{"$value":{"value":100,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"short":{"$value":{"value":150,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"medium":{"$value":{"value":250,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"long":{"$value":{"value":400,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."}},"easing":{"$type":"cubicBezier","emphasized":{"$value":[0.4,0,0.2,1],"$description":"Cubic bezier with balanced input and output tangents."},"decelerate":{"$value":[0,0,0.2,1],"$description":"Cubic bezier with steep initial gain and constrained tail velocity."},"accelerate":{"$value":[0.4,0,1,1],"$description":"Cubic bezier with restrained initial gain and steep terminal velocity."},"elastic":{"$value":[0.34,1.56,0.64,1],"$description":"Spring response defined by stiffness, damping, and mass parameters.","$extensions":{"com.hirobius.hds":{"$type":"spring","$value":{"type":"spring","stiffness":300,"damping":20,"mass":1},"bezierSource":"The cubicBezier is easeOutBack (easings.net), chosen as a stand-in for the spring, not fitted to it: both overshoot once, the curve by about 10% and spring(300, 20, 1) by about 11%."}}}},"shadow":{"color":{"$type":"color","$value":"220 13% 18%","$description":"HSL channels for shadow-color alpha compositing. Light: cool neutral; dark: black.","$extensions":{"com.figma.variables":{"modes":{"Light":"220 13% 18%","Dark":"0 0% 0%"}}}}},"breakpoint":{"$description":"Discrete viewport thresholds expressed as dimensions.","xs":{"$type":"dimension","$value":{"value":375,"unit":"px"}},"sm":{"$type":"dimension","$value":{"value":640,"unit":"px"}},"md":{"$type":"dimension","$value":{"value":768,"unit":"px"}},"lg":{"$type":"dimension","$value":{"value":1024,"unit":"px"}},"xl":{"$type":"dimension","$value":{"value":1280,"unit":"px"}}},"size":{"8":{"$type":"dimension","$value":{"value":8,"unit":"px"},"$description":"8px size step."},"10":{"$type":"dimension","$value":{"value":10,"unit":"px"},"$description":"10px size step."},"12":{"$type":"dimension","$value":{"value":12,"unit":"px"},"$description":"12px size step."},"16":{"$type":"dimension","$value":{"value":16,"unit":"px"},"$description":"16px size step."},"20":{"$type":"dimension","$value":{"value":20,"unit":"px"},"$description":"20px size step."},"24":{"$type":"dimension","$value":{"value":24,"unit":"px"},"$description":"24px size step."},"32":{"$type":"dimension","$value":{"value":32,"unit":"px"},"$description":"32px size step."},"40":{"$type":"dimension","$value":{"value":40,"unit":"px"},"$description":"40px size step."},"48":{"$type":"dimension","$value":{"value":48,"unit":"px"},"$description":"48px size step."},"64":{"$type":"dimension","$value":{"value":64,"unit":"px"},"$description":"64px size step."},"80":{"$type":"dimension","$value":{"value":80,"unit":"px"},"$description":"80px size step."},"96":{"$type":"dimension","$value":{"value":96,"unit":"px"},"$description":"96px size step."},"120":{"$type":"dimension","$value":{"value":120,"unit":"px"},"$description":"120px size step. Backs semantic.size.tile."},"$description":"Unaliased dimensional values.","interactive":{"$description":"Interactive control size minimums.","min":{"$type":"dimension","$value":{"value":44,"unit":"px"},"$description":"Minimum interactive hit target size."},"minCompact":{"$type":"dimension","$value":{"value":24,"unit":"px"},"$description":"Compact inline control target minimum, e.g. a chip's remove button: WCAG 2.2 AA (2.5.8), not the 44px AAA floor (2.5.5)."}},"width":{"96":{"$type":"dimension","$value":{"value":96,"unit":"px"},"$description":"96px width step."},"280":{"$type":"dimension","$value":{"value":280,"unit":"px"},"$description":"Docs-shell rail width (hds#280): our own number, not HeroUI's 268px; fits the longest top-level nav label with room."},"760":{"$type":"dimension","$value":{"value":760,"unit":"px"}},"1200":{"$type":"dimension","$value":{"value":1200,"unit":"px"}},"50ch":{"$type":"dimension","$value":{"value":50,"unit":"ch"}}}},"grid":{"columns":{"1":{"$type":"number","$value":1},"2":{"$type":"number","$value":2},"3":{"$type":"number","$value":3}}},"zIndex":{"0":{"$type":"number","$value":0},"10":{"$type":"number","$value":10},"100":{"$type":"number","$value":100},"1000":{"$type":"number","$value":1000},"$description":"Discrete stacking levels along the z axis."},"borderWidth":{"$type":"dimension","xs":{"$value":{"value":1,"unit":"px"}},"sm":{"$value":{"value":2,"unit":"px"}},"md":{"$value":{"value":4,"unit":"px"}}}}`), oa = /* @__PURE__ */ JSON.parse(`{"motion":{"$type":"transition","$extensions":{"com.hirobius.hds":{"$type":"motion"}},"productive":{"$value":{"duration":"{primitive.duration.short}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.decelerate}"},"$description":"For micro-interactions and status changes. No deformation."},"expressive":{"$value":{"duration":"{primitive.duration.medium}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.elastic}"},"$description":"For teaching moments and significant UI entries. Includes physics-based squish."},"spatial":{"$value":{"duration":"{primitive.duration.long}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.emphasized}"},"$description":"For elements traveling long distances across the viewport."},"exit":{"$value":{"duration":"{primitive.duration.instant}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.accelerate}"},"$description":"For elements being removed from the DOM."},"distance":{"$type":"dimension","$value":"{primitive.space.6}","$description":"Scroll-reveal translateY travel distance. Equals semantic.space.scale.md today, but names motion travel, not a spacing tier (hds#242)."}},"color":{"$type":"color","surface":{"page":{"$value":"{primitive.color.neutral.white}","$description":"Main page background","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.white}","Dark":"{primitive.color.neutral.black}"}}}},"raised":{"$value":"{primitive.color.neutral.50}","$description":"Subtle elevated surface (cards, sections)","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.50}","Dark":"{primitive.color.neutral.950}"}}}},"overlay":{"$value":"{primitive.color.neutral.100}","$description":"Deeper surface layer","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.850}"}}}},"scrim":{"$value":"{primitive.color.neutral.900}","$description":"Opaque modal backdrop, near-black in both themes. Apply alpha in the class (bg-scrim/60), not here.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.black}"}}}},"inverse":{"$value":"{primitive.color.neutral.black}","$description":"Inverted background for contrast sections","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.black}","Dark":"{primitive.color.neutral.white}"}}}},"accent":{"$value":"{primitive.color.apple.500}","$description":"Accent-colored background — bright apple green (stays green on dark surfaces; pair with content.onAccent dark text).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.500}","Dark":"{primitive.color.apple.400}"}}}},"accentSubtle":{"$value":"{primitive.color.apple.50}","$description":"Faint accent tint for hover states or highlights","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.50}","Dark":"{primitive.color.apple.900}"}}}},"hover":{"$value":"{primitive.color.neutral.100}","$description":"Background for a hovered interactive surface (menu items, chips, tertiary buttons).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"pressed":{"$value":"{primitive.color.neutral.50}","$description":"Background for an actively pressed interactive surface.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.50}","Dark":"{primitive.color.neutral.950}"}}}},"selected":{"$value":"{primitive.color.neutral.200}","$description":"Background for a persistently selected item (active tab, checked row).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.800}"}}}},"muted":{"$value":"{primitive.color.neutral.100}","$description":"Muted background for low-emphasis content blocks.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"sunken":{"$value":"{primitive.color.neutral.200}","$description":"Recessed background for inset wells (inputs, code blocks, nested panels).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.850}"}}}}},"content":{"primary":{"$value":"{primitive.color.neutral.900}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.100}"}}}},"secondary":{"$value":"{primitive.color.neutral.600}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.600}","Dark":"{primitive.color.neutral.400}"}}}},"disabled":{"$value":"{primitive.color.neutral.300}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.600}"}}}},"inverse":{"$value":"{primitive.color.neutral.100}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"accent":{"$value":"{primitive.color.apple.700}","$description":"Accent-intent text/icon color — a dark apple green legible on page and card surfaces. Pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.700}","Dark":"{primitive.color.apple.400}"}}}},"onAccent":{"$value":"{primitive.color.neutral.900}","$description":"Text/icon color on accent fills — a dark neutral, since the brand accent fill is a bright apple green in both light and dark mode.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.900}"}}}},"success":{"$value":"{primitive.color.green.700}","$description":"Success-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.700}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$value":"{primitive.color.amber.800}","$description":"Warning-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.800}","Dark":"{primitive.color.amber.400}"}}}},"danger":{"$value":"{primitive.color.red.700}","$description":"Danger-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.700}","Dark":"{primitive.color.red.400}"}}}}},"border":{"default":{"$value":"{primitive.color.neutral.200}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.700}"}}}},"interactive":{"$value":"{primitive.color.neutral.500}","$description":"Border for interactive control boundaries (inputs, selects, secondary buttons); meets the WCAG 1.4.11 3:1 non-text contrast floor.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.500}","Dark":"{primitive.color.neutral.500}"}}}},"subdued":{"$value":"{primitive.color.neutral.200}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.800}"}}}},"subtle":{"$value":"{primitive.color.neutral.100}","$description":"Lowest-contrast border for resting hairline edges on flat surfaces.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.850}"}}}},"strong":{"$value":"{primitive.color.neutral.300}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.600}"}}}},"accent":{"$value":"{primitive.color.apple.600}","$description":"Accent border — apple green, dark enough to read as a boundary on page and card surfaces.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.600}","Dark":"{primitive.color.apple.400}"}}}},"success":{"$value":"{primitive.color.green.400}","$description":"Success-toned border for status outlines and success-state inputs.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.400}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$value":"{primitive.color.amber.400}","$description":"Warning-toned border for status outlines and warning-state inputs.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.400}","Dark":"{primitive.color.amber.400}"}}}}},"feedback":{"error":{"$type":"color","$value":"{primitive.color.red.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.700}","Dark":"{primitive.color.red.400}"}}}},"success":{"$type":"color","$value":"{primitive.color.green.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.700}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$type":"color","$value":"{primitive.color.amber.800}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.800}","Dark":"{primitive.color.amber.400}"}}}},"info":{"$type":"color","$value":"{primitive.color.blue.500}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.300}"}}}},"inProgress":{"$type":"color","$value":"{primitive.color.violet.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.violet.700}","Dark":"{primitive.color.violet.400}"}}}},"bg":{"error":{"$type":"color","$value":"{primitive.color.red.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.50}","Dark":"{primitive.color.red.950}"}}}},"success":{"$type":"color","$value":"{primitive.color.green.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.50}","Dark":"{primitive.color.green.950}"}}}},"warning":{"$type":"color","$value":"{primitive.color.amber.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.50}","Dark":"{primitive.color.amber.950}"}}}},"info":{"$type":"color","$value":"{primitive.color.blue.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.50}","Dark":"{primitive.color.blue.900}"}}}},"inProgress":{"$type":"color","$value":"{primitive.color.violet.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.violet.50}","Dark":"{primitive.color.violet.950}"}}}}}},"state":{"pressed":{"overlay":{"$value":"{primitive.color.neutral.black}","$description":"Opaque pressed wash over a control's own fill: black in light, white in dark. Alpha in the class (inset-shadow-pressed-overlay/5).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.black}","Dark":"{primitive.color.neutral.white}"}}}}}}},"space":{"$type":"dimension","$description":"Semantic spacing tiers: subgrid, component, layout, section, scale.","scale":{"$description":"hds#206: the canonical spacing vocabulary, one monotonic t-shirt scale (xs to xl) for padding, margin and gap. Supersedes deprecated names.","xs":{"$value":"{primitive.space.2}","$description":"8px — smallest step. Same value as component.gap (deprecated alias)."},"sm":{"$value":"{primitive.space.4}","$description":"16px — same value as layout.tight (deprecated alias)."},"md":{"$value":"{primitive.space.6}","$description":"24px. Default of the overridable roles surface.padding and region.gutter. The deprecated layout.normal has the same value."},"lg":{"$value":"{primitive.space.8}","$description":"32px — same value as layout.inset (deprecated alias)."},"xl":{"$value":"{primitive.space.12}","$description":"48px — same value as layout.spacious (deprecated alias)."}},"surface":{"$description":"hds#206 surface inset role. Tenants override it per brand and density, always with a scale step.","padding":{"$value":"{semantic.space.scale.md}","$description":"24px (scale.md) inset for cards, forms and panels. Tenants override it per brand and density. Replaces component.padding."}},"region":{"$description":"hds#206 region gutter role. theme.css retunes it per viewport, always with a scale step.","gutter":{"$value":"{semantic.space.scale.md}","$description":"24px (scale.md) column and region gutters; theme.css sets scale.lg (32px), and scale.sm (16px) below 640px. Replaces layout.gutter."}},"subgrid":{"hairline":{"$value":"{primitive.space.px1}","$description":"1px border offset and hairline spacing."},"xs":{"$value":"{primitive.space.px2}","$description":"2px vertical rhythm nudge and baseline adjustment."},"gap":{"$value":"{primitive.space.1}","$description":"4px cap-height and inline cluster spacing."}},"component":{"gap":{"$value":"{primitive.space.2}","$description":"8px label↔input rhythm and closely coupled control spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.xs; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.xs"},"medium":{"$value":"{primitive.space.3}","$description":"12px adjacent form fields and medium intra-component gaps."},"padding":{"$value":"{semantic.space.surface.padding}","$description":"24px inset for cards, forms and panels. DEPRECATED alias (hds#206) — use semantic.space.surface.padding; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.surface.padding"}},"layout":{"tight":{"$value":"{primitive.space.4}","$description":"16px default HdsStack gap and inter-component spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.sm; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.sm"},"normal":{"$value":"{primitive.space.6}","$description":"24px column gutters and sidebar gutter spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.md; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.md"},"gutter":{"$value":"{semantic.space.region.gutter}","$description":"24px column and region gutters. DEPRECATED alias (hds#206) — use semantic.space.region.gutter (responsive in theme.css); kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.region.gutter"},"inset":{"$value":"{primitive.space.8}","$description":"32px major block separation and inset inter-component gaps. DEPRECATED alias (hds#206) — use semantic.space.scale.lg; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.lg"},"spacious":{"$value":"{primitive.space.12}","$description":"48px break between major content blocks. DEPRECATED alias (hds#206) — use semantic.space.scale.xl; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.xl"}},"section":{"stack":{"$value":"{primitive.space.20}","$description":"80px vertical rhythm between page sections and major editorial blocks."},"inset":{"$value":"{primitive.space.24}","$description":"96px hero and landing-page inset padding."},"heroMax":{"$value":"{primitive.space.32}","$description":"128px maximum hero region padding for extra-large displays."}},"sidebar":{"indent":{"$value":"{primitive.space.3}","$description":"12px indent level for nested sidebar and TOC groups."},"gap":{"$value":"{primitive.space.4}","$description":"16px vertical spacing between items in sidebar and TOC stacks."},"sectionGap":{"$value":"{primitive.space.3}","$description":"12px spacing between sidebar sections and grouped rail blocks."},"railPadding":{"$value":"{primitive.space.5}","$description":"20px outer padding for sidebar and TOC rails."},"railWidth":{"$type":"dimension","$value":"{primitive.size.width.280}","$description":"Docs-shell nav and TOC rail width (hds#280), one token for both rails; 0 below their breakpoint (see HdsDocsShell)."}}},"layout":{"width":{"content":{"$type":"dimension","$value":"{primitive.size.width.760}","$description":"Max width for prose/content (760px). Use with HdsContainer for centered text blocks."},"max":{"$type":"dimension","$value":"{primitive.size.width.1200}","$description":"Max width for full-layout containers (1200px). Use with HdsContainer for page layouts."}},"container":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.1200}"}},"content":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.760}"}},"prose":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.50ch}"}},"section":{"paddingY":{"$type":"dimension","$value":"{primitive.space.20}"}},"grid":{"gap":{"$type":"dimension","$value":"{primitive.space.8}"},"columns":{"mobile":{"$type":"number","$value":"{primitive.grid.columns.1}"},"tablet":{"$type":"number","$value":"{primitive.grid.columns.2}"},"desktop":{"$type":"number","$value":"{primitive.grid.columns.3}"}}}},"typography":{"$type":"typography","$description":"5-role type ramp plus mono (hds#483): display, title, body, ui, caption, mono. h1, h2, h3 and eyebrow are deprecated aliases.","display":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.5xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.display}"},"$description":"One per page, hero only. 48px / 1.05 / 700. Role 1 of 6."},"title":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"Section and card headings. 24px / 1.25 / 700. Role 2 of 6."},"body":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.base}","fontWeight":"{primitive.typography.weight.regular}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.body}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Prose. 16px / 1.6 / 400, 60ch measure. Role 3 of 6."},"ui":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.sm}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Controls, nav, table text, values. 14px / 1.5 / 500. Role 4 of 6."},"caption":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}"},"$description":"Metadata, help text and labels, in sentence case. 12px / 1.5 / 500. Role 5 of 6."},"mono":{"$value":{"fontFamily":"{primitive.typography.family.mono}","fontSize":"{primitive.typography.size.code}","fontWeight":"{primitive.typography.weight.regular}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Code and ids. 13px / 1.5 / 400. The mono companion, role 6 of 6."},"h1":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"h2":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"h3":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"eyebrow":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}"},"$description":"deprecated: use semantic.typography.caption","$deprecated":"hds#483 — use semantic.typography.caption"},"lineHeight":{"none":{"$type":"number","$value":"{primitive.typography.lineHeight.none}","$description":"Semantic alias for leading-none (1). Display text and badge spans."}}},"docs":{"$description":"Doc-page spacing scale: section, paragraph, inline rhythm.","space":{"$type":"dimension","section":{"$value":"{primitive.space.12}","$description":"48px between H2 sections — generous section break for doc pages."},"paragraph":{"$value":"{primitive.space.6}","$description":"24px between paragraphs — comfortable prose rhythm for long-form doc content."},"inline":{"$value":"{primitive.space.2}","$description":"8px inline cluster spacing — gap between metadata badges, inline icons, doc-page chips."}}},"accent":{"$type":"color","rest":{"$value":"{primitive.color.apple.500}","$description":"Default accent fill for interactive elements at rest — bright apple green. Pair with content.onAccent (a dark neutral).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.500}","Dark":"{primitive.color.apple.400}"}}}},"hover":{"$value":"{primitive.color.apple.600}","$description":"Accent fill on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.600}","Dark":"{primitive.color.apple.500}"}}}},"pressed":{"$value":"{primitive.color.apple.700}","$description":"Accent fill during active press.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.700}","Dark":"{primitive.color.apple.600}"}}}},"inactive":{"$value":"{primitive.color.neutral.400}","$description":"Accent fill for inactive or unselected accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.400}","Dark":"{primitive.color.neutral.600}"}}}},"disabled":{"$value":"{primitive.color.neutral.300}","$description":"Accent fill for disabled accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.700}"}}}},"content":{"$value":"{primitive.color.apple.700}","$description":"Accent-intent text/icon color on neutral surfaces (a dark apple green) — pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.700}","Dark":"{primitive.color.apple.400}"}}}},"contentHover":{"$value":"{primitive.color.apple.800}","$description":"Accent content color on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.800}","Dark":"{primitive.color.apple.300}"}}}},"subtle":{"$value":"{primitive.color.apple.50}","$description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.50}","Dark":"{primitive.color.apple.900}"}}}}},"radius":{"action":{"$type":"dimension","$value":"{primitive.radius.8}","$description":"Corner radius for action elements (buttons, inputs, badges); Tailwind rounded-md resolves here. Override role.radius to reshape the system."},"control":{"$type":"dimension","$value":"{primitive.radius.4}","$description":"Corner radius for small control glyphs such as the checkbox box: not fully round, and distinct from semantic.radius.action (hds#242)."}},"borderWidth":{"default":{"$type":"dimension","$value":"{primitive.borderWidth.xs}","$description":"Default hairline border weight for surfaces and inputs."},"emphasis":{"$type":"dimension","$value":"{primitive.borderWidth.sm}","$description":"Stronger border weight for focus rings and active indicators."}},"shadow":{"$type":"shadow","subtle":{"$value":"0 1px 2px hsl(var(--primitive-shadow-color) / 0.04), 0 1px 1px hsl(var(--primitive-shadow-color) / 0.06)","$description":"Resting elevation shadow for raised surfaces (cards, inline panels)."},"floating":{"$value":"0 4px 6px hsl(var(--primitive-shadow-color) / 0.05), 0 10px 15px hsl(var(--primitive-shadow-color) / 0.08)","$description":"Hover/floating elevation for menus, popovers, and tooltips."},"overlay":{"$value":"0 10px 15px hsl(var(--primitive-shadow-color) / 0.08), 0 25px 50px hsl(var(--primitive-shadow-color) / 0.12)","$description":"Modal/dialog elevation for full-screen overlays."}},"elevation":{"$extensions":{"com.hirobius.hds":{"$type":"elevation"}},"flat":{"$description":"Flat surface (no shadow, hairline border) for embedded panels.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.page}","shadow":null,"border":"{semantic.color.border.subtle}"}}}},"raised":{"$description":"Resting card / panel elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.raised}","shadow":"{semantic.shadow.subtle}","border":null}}}},"floating":{"$description":"Hover, menu, and popover elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.raised}","shadow":"{semantic.shadow.floating}","border":null}}}},"overlay":{"$description":"Modal, dialog, and drawer elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.overlay}","shadow":"{semantic.shadow.overlay}","border":null}}}}},"size":{"$type":"dimension","$description":"Sizing roles for control glyphs, avatars and table rows. Roles sharing a value stay separate so each can change (hds#242).","control":{"$description":"Interactive control glyph/element sizing (checkbox glyph box, radio dot, slider track/fill, code-block copy-button-matched footprint).","sm":{"$value":"{primitive.size.8}","$description":"Small control element — radio dot, slider fill bar height."},"md":{"$value":"{primitive.size.20}","$description":"Medium control element — checkbox glyph box, slider track wrapper height."},"lg":{"$value":"{primitive.size.32}","$description":"Large control footprint — code-block inline-wrapper min-height / copy-button-matched pre padding."}},"icon":{"$description":"Reserved icon-size role, parallel to the existing --hds-icon-* bridge (src/styles/theme.css), for future direct semantic.size.icon consumers.","sm":{"$value":"{primitive.size.16}","$description":"Small icon box — matches --hds-icon-small."},"md":{"$value":"{primitive.size.20}","$description":"Medium icon box — matches --hds-icon-medium."},"lg":{"$value":"{primitive.size.24}","$description":"Large icon box — matches --hds-icon-large."}},"avatar":{"$value":"{primitive.size.40}","$description":"Avatar size (width and height) for activity feeds and identity glyphs. Same pixels as row.compact today, a separate role (hds#242)."},"tile":{"$value":"{primitive.size.120}","$description":"Minimum height of a metric tile, one height for every tile so rows line up (hds#403)."},"row":{"$description":"Table row minimum height by density.","compact":{"$value":"{primitive.size.40}","$description":"Compact-density row minimum height."},"comfortable":{"$value":"{primitive.size.48}","$description":"Comfortable-density row minimum height."}}},"zIndex":{"$type":"number","$description":"Named stacking layers, aliasing the numeric primitive.zIndex scale (hds#242).","control":{"$value":"{primitive.zIndex.10}","$description":"Raises an interactive control (e.g. a native range input) above its visual decoration for hit-testing."},"sticky":{"$value":"{primitive.zIndex.100}","$description":"Sticky-positioned elements, such as a table header row."}}}`), sa = { nav: { bg: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Nav bar background fill." }, bgActive: { $type: "color", $value: "{semantic.accent.subtle}", $description: "Nav item background fill when active or selected." }, borderActive: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Nav item border color when active or selected." }, text: { $type: "color", $value: "{semantic.color.content.secondary}", $description: "Nav item text color at rest." }, textActive: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Nav item text color when active or selected." }, height: { $type: "dimension", $value: "{primitive.space.16}", $description: "Nav bar height." }, paddingX: { $type: "dimension", $value: "{primitive.space.6}", $description: "Horizontal padding inside nav items." }, paddingY: { $type: "dimension", $value: "{primitive.space.2}", $description: "Vertical padding inside nav items." } }, tag: { background: { $type: "color", $value: "{semantic.accent.subtle}", $description: "Base tag surface color." }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Default tag text color." }, border: { $type: "color", $value: "{semantic.color.border.default}", $description: "Default tag border color." }, radius: { $type: "dimension", $value: "{primitive.radius.full}", $description: "Pill radius for the tag surface." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Tag type size." }, fontWeight: { $type: "fontWeight", $value: "{primitive.typography.weight.medium}", $description: "Tag label weight." }, lineHeight: { $type: "number", $value: "{primitive.typography.lineHeight.normal}", $description: "Readable label rhythm for tags." }, minWidth: { $type: "dimension", $value: "{primitive.size.48}", $description: "Minimum tag width." }, minHeight: { $type: "dimension", $value: "{primitive.space.6}", $description: "Minimum tag height." }, paddingX: { $type: "dimension", $value: "{primitive.space.3}", $description: "Horizontal padding inside the pill." }, paddingY: { $type: "dimension", $value: "{primitive.space.2}", $description: "Vertical padding inside the pill." }, activeText: { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Text color when the tag is active." }, activeBackground: { $type: "color", $value: "{semantic.accent.rest}", $description: "Active tag fill color." }, activeBorder: { $type: "color", $value: "{semantic.accent.rest}", $description: "Active tag border color." }, activeHover: { $type: "color", $value: "{semantic.accent.hover}", $description: "Active tag hover fill color." } }, badge: { fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Badge type size." }, fontWeight: { $type: "fontWeight", $value: "{primitive.typography.weight.medium}", $description: "Badge label weight." }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Badge text color." }, bg: { $type: "color", $value: "{semantic.color.feedback.bg.info}", $extensions: { "com.figma.variables": { modes: { Light: "{semantic.color.feedback.bg.info}", Dark: "{semantic.color.feedback.bg.info}" } } }, $description: "Badge background color." }, radius: { $type: "dimension", $value: "{primitive.radius.4}", $description: "Small rounded radius for badges." }, height: { $type: "dimension", $value: "{primitive.size.20}", $description: "Badge height." }, minWidth: { $type: "dimension", $value: "{primitive.size.20}", $description: "Badge minimum width." }, paddingY: { $type: "dimension", $value: "{primitive.space.px2}", $description: "Vertical padding inside the badge." }, paddingX: { $type: "dimension", $value: "{primitive.space.px6}", $description: "Horizontal padding inside the badge." } }, button: { bg: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Primary button fill." }, bgHover: { $type: "color", $value: "{semantic.accent.hover}", $description: "Primary button hover fill." }, text: { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Primary button text color." }, radius: { $type: "dimension", $value: "{semantic.radius.action}", $description: "Button corner radius." }, paddingX: { $type: "dimension", $value: "{primitive.space.4}", $description: "Horizontal button padding." }, paddingY: { $type: "dimension", $value: "{primitive.space.3}", $description: "Vertical button padding." }, size: { sm: { paddingX: { $type: "dimension", $value: "{primitive.space.2}", $description: "Small button horizontal padding (8px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.1}", $description: "Small button vertical padding (4px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Small button label size (12px, hds#283: was 13px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.12}", $description: "Small button icon slot size (12px)." }, height: { $type: "dimension", $value: "{primitive.space.7}", $description: "Small button height (28px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.1}", $description: "Small button icon-to-label gap (4px)." } }, md: { paddingX: { $type: "dimension", $value: "{primitive.space.4}", $description: "Medium button horizontal padding (16px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.3}", $description: "Medium button vertical padding (12px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.sm}", $description: "Medium button label size (14px, hds#283: was 15px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.16}", $description: "Medium button icon slot size (16px)." }, height: { $type: "dimension", $value: "{primitive.size.40}", $description: "Medium button height (40px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.2}", $description: "Medium button icon-to-label gap (8px)." } }, lg: { paddingX: { $type: "dimension", $value: "{primitive.space.6}", $description: "Large button horizontal padding (24px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.4}", $description: "Large button vertical padding (16px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.base}", $description: "Large button label size (16px, hds#283: was 17px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.20}", $description: "Large button icon slot size (20px)." }, height: { $type: "dimension", $value: "{primitive.size.48}", $description: "Large button height (48px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.2}", $description: "Large button icon-to-label gap (8px)." } } }, primary: { textDisabled: { $type: "color", $value: "{semantic.color.content.onAccent}", $extensions: { "com.figma.variables": { modes: { Light: "{semantic.color.content.onAccent}", Dark: "{semantic.color.content.disabled}" } } }, $description: "Disabled primary button text color." }, bgDisabled: { $type: "color", $value: "{semantic.color.surface.accentSubtle}", $description: "Disabled primary button fill." } }, secondary: { bg: { rest: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Secondary button fill." }, hover: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Secondary button hover fill." }, pressed: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Secondary button pressed fill." } }, border: { rest: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button border." }, hover: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button hover border." }, pressed: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button pressed border." }, disabled: { $type: "color", $value: "{semantic.color.border.subdued}", $description: "Secondary button disabled border." } }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Secondary button text color." } } }, input: { bg: { $type: "color", $value: "{semantic.color.surface.raised}" }, text: { $type: "color", $value: "{semantic.color.content.primary}" }, border: { $type: "color", $value: "{semantic.color.border.interactive}" }, borderError: { $type: "color", $value: "{semantic.color.feedback.error}" }, radius: { $type: "dimension", $value: "{semantic.radius.action}" }, paddingX: { $type: "dimension", $value: "{primitive.space.4}" }, paddingY: { $type: "dimension", $value: "{primitive.space.3}" } }, card: { bg: { $type: "color", $value: "{semantic.color.surface.raised}" }, border: { $type: "color", $value: "{semantic.color.border.default}" }, radius: { $type: "dimension", $value: "{primitive.radius.8}" }, padding: { $type: "dimension", $value: "{primitive.space.6}" }, gap: { $type: "dimension", $value: "{primitive.space.2}" } }, lightbox: { backdrop: { blur: { $type: "dimension", $value: "{primitive.blur.16}", $description: "Backdrop blur applied behind fullscreen image lightboxes." } } } }, la = { $description: "Shadcn-style role aliases mapping to semantic tokens. Compiled to --role-* CSS vars.", background: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Page background. shadcn role: background." }, foreground: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Default text on background. shadcn role: foreground." }, card: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Card surface. shadcn role: card." }, "card-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on card. shadcn role: card-foreground." }, popover: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Popover/menu surface. shadcn role: popover." }, scrim: { $type: "color", $value: "{semantic.color.surface.scrim}", $description: "Modal backdrop colour role. Apply alpha in the class, e.g. bg-scrim/60." }, "pressed-overlay": { $type: "color", $value: "{semantic.color.state.pressed.overlay}", $description: "Pressed-state overlay colour role. Apply alpha in the class, e.g. inset-shadow-pressed-overlay/5." }, "popover-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on popover. shadcn role: popover-foreground." }, primary: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Primary action surface. shadcn role: primary." }, "primary-foreground": { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Text/icons on primary surface. shadcn role: primary-foreground." }, secondary: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Secondary action surface. shadcn role: secondary." }, "secondary-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on secondary surface. shadcn role: secondary-foreground." }, muted: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Muted/quiet bg (skeletons, disabled inputs). shadcn role: muted." }, "muted-foreground": { $type: "color", $value: "{semantic.color.content.secondary}", $description: "Muted text. shadcn role: muted-foreground." }, accent: { $type: "color", $value: "{semantic.color.surface.accentSubtle}", $description: "Hover/active tinted bg. shadcn role: accent." }, "accent-foreground": { $type: "color", $value: "{semantic.color.content.accent}", $description: "Text on accent surface. shadcn role: accent-foreground." }, destructive: { $type: "color", $value: "{semantic.color.feedback.error}", $description: "Destructive action surface. shadcn role: destructive." }, "destructive-foreground": { $type: "color", $value: "{semantic.color.content.inverse}", $description: "Text on destructive surface. shadcn role: destructive-foreground." }, border: { $type: "color", $value: "{semantic.color.border.default}", $description: "Default border. shadcn role: border." }, input: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Input field border. shadcn role: input." }, ring: { $type: "color", $value: "{semantic.color.border.accent}", $description: "Focus ring color. shadcn role: ring." }, radius: { $type: "dimension", $value: "{semantic.radius.action}", $description: "Default border radius. shadcn role: radius." } }, ca = {
+  $schema: aa,
+  $description: ra,
+  primitive: na,
+  semantic: oa,
+  component: sa,
+  role: la
+}, dr = ca;
 export {
-  va as Alert,
-  lr as AlertDialog,
-  fa as Avatar,
-  Ga as AvatarGroup,
-  ga as Badge,
-  _a as Blockquote,
-  ha as Box,
-  Qa as Breadcrumb,
-  me as Button,
-  ba as Callout,
-  cr as Card,
-  dr as CardBody,
-  pr as CardDescription,
-  ur as CardFooter,
-  mr as CardHeader,
-  vr as CardMetric,
-  fr as CardProgress,
-  gr as CardTitle,
-  Ra as Checkbox,
-  er as Combobox,
-  hr as Container,
-  wa as Dialog,
-  Ci as DialogClose,
-  Di as DialogContent,
-  Li as DialogDescription,
-  Ri as DialogFooter,
-  Ti as DialogHeader,
-  je as DialogOverlay,
-  Ge as DialogPortal,
-  Pi as DialogTitle,
-  zi as DialogTrigger,
-  ir as Disclosure,
-  ka as Divider,
-  br as EmptyState,
-  $a as Field,
-  $r as Grid,
-  Sr as HdsRouterProvider,
-  yr as HdsThemeProvider,
+  $a as Alert,
+  mr as AlertDialog,
+  ya as Avatar,
+  Xa as AvatarGroup,
+  xa as Badge,
+  Ya as Blockquote,
+  wa as Box,
+  rr as Breadcrumb,
+  be as Button,
+  ka as Callout,
+  vr as Card,
+  gr as CardBody,
+  fr as CardDescription,
+  hr as CardFooter,
+  br as CardHeader,
+  $r as CardMetric,
+  yr as CardProgress,
+  xr as CardTitle,
+  Aa as Checkbox,
+  nr as Combobox,
+  wr as Container,
+  Ca as Dialog,
+  Tt as DialogClose,
+  Rt as DialogContent,
+  It as DialogDescription,
+  Lt as DialogFooter,
+  Pt as DialogHeader,
+  Je as DialogOverlay,
+  Ke as DialogPortal,
+  Vt as DialogTitle,
+  Dt as DialogTrigger,
+  or as Disclosure,
+  Da as Divider,
+  kr as EmptyState,
+  Sa as Field,
+  Sr as Grid,
+  Tr as HdsRouterProvider,
+  Nr as HdsThemeProvider,
   A as Icon,
-  za as InlineCode,
-  Ca as InlineLink,
-  Da as Input,
-  Wa as Kbd,
-  Sa as Menu,
-  ja as MetadataList,
-  tr as Pagination,
-  qa as Pin,
-  be as Popover,
-  Ia as Progress,
-  Pa as Radio,
-  Ha as SegmentedControl,
-  Ea as Select,
-  Ua as Sidebar,
-  Ma as Skeleton,
-  La as Slider,
-  Aa as Spinner,
-  De as Stack,
-  ya as Stat,
-  xa as StatusListItem,
-  mi as Surface,
-  Ya as Switcher,
-  xr as Table,
-  Xa as Tabs,
-  Za as TabsContent,
-  Ka as TabsList,
-  Ja as TabsTrigger,
-  Ba as Tag,
-  We as Text,
-  Ta as Textarea,
-  Fa as Timestamp,
-  rr as ToastProvider,
-  Va as Toggle,
-  Na as Tooltip,
-  Oa as VisuallyHidden,
+  Pa as InlineCode,
+  La as InlineLink,
+  Va as Input,
+  ja as Kbd,
+  Ta as Menu,
+  Ka as MetadataList,
+  sr as Pagination,
+  Qa as Pin,
+  ke as Popover,
+  Ba as Progress,
+  Ma as Radio,
+  _a as SegmentedControl,
+  Oa as Select,
+  Ja as Sidebar,
+  Wa as Skeleton,
+  Ea as Slider,
+  Fa as Spinner,
+  Ie as Stack,
+  Na as Stat,
+  za as StatusListItem,
+  gt as Surface,
+  Za as Switcher,
+  zr as Table,
+  er as Tabs,
+  ar as TabsContent,
+  tr as TabsList,
+  ir as TabsTrigger,
+  Ga as Tag,
+  Ue as Text,
+  Ia as Textarea,
+  Ua as Timestamp,
+  cr as ToastProvider,
+  Ha as Toggle,
+  Ra as Tooltip,
+  qa as VisuallyHidden,
   d as cn,
-  z as hds,
-  Xt as paginationRange,
-  nr as tokens,
-  Oe as useHdsRouter,
-  wr as useHdsTheme,
-  ar as useToast
+  D as hds,
+  ea as paginationRange,
+  dr as tokens,
+  Xe as useHdsRouter,
+  Cr as useHdsTheme,
+  lr as useToast
 };