@hirobius/design-system 0.20.0 → 0.22.0

package/dist/hirobius-ui.js

@@ -1,25 +1,25 @@
 'use client';
-import { jsxs as g, jsx as e, Fragment as et } from "react/jsx-runtime";
-import * as f from "react";
-import q, { useState as j, forwardRef as Q, useRef as ge, useEffect as tt, useId as Ve } from "react";
-import { motion as A, AnimatePresence as it } from "motion/react";
+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 { cva as $ } from "class-variance-authority";
-import { Info as he, TriangleAlert as Le, CircleX as Ie, CircleCheck as Me, X as ce, ChevronRight as be, Circle as at, Check as re, Copy as rt, SquareArrowOutUpRight as nt, Loader2 as ot, Minus as st, ChevronDown as Ae, ChevronsUpDown as lt, ChevronLeft as ct } from "lucide-react";
-import N, { tokenValues as $e } from "./tokens.js";
+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 { cn as d } from "./cn.js";
-import { u as G, I as M, i as dt, T as Ee, w as ne, B as le, a as Be, d as pt, r as He, L as We, S as ze } from "./chunks/empty-state-BBqhCx0S.js";
-import { A as sr, b as lr, e as cr, f as dr, g as pr, j as ur, k as mr, l as vr, m as fr, C as gr, E as hr, G as br, H as $r, c as xr, n as yr } from "./chunks/empty-state-BBqhCx0S.js";
-import * as O from "@radix-ui/react-dialog";
+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 * as U from "@radix-ui/react-dialog";
 import * as E from "@radix-ui/react-dropdown-menu";
-import * as ee from "@radix-ui/react-popover";
+import * as ie from "@radix-ui/react-popover";
 import * as Z from "@radix-ui/react-tooltip";
-import { a as Fe, u as oe } from "./chunks/DemoStateContext-Cz5TmrYu.js";
-import { H as kr } from "./chunks/DemoStateContext-Cz5TmrYu.js";
-import * as Ce from "@radix-ui/react-toggle-group";
-import * as _ from "@radix-ui/react-select";
-import * as de from "@radix-ui/react-tabs";
+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 ut = /* @__PURE__ */ $(
+const vi = /* @__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,25 +37,25 @@ const ut = /* @__PURE__ */ $(
     },
     defaultVariants: { tone: "info", hasTitle: !1 }
   }
-), mt = {
-  success: { icon: Me, colorVar: "var(--semantic-color-feedback-success)" },
-  danger: { icon: Ie, colorVar: "var(--semantic-color-feedback-error)" },
-  warning: { icon: Le, colorVar: "var(--semantic-color-feedback-warning)" },
-  info: { icon: he, colorVar: "var(--semantic-color-feedback-info)" }
-}, ua = /* @__PURE__ */ q.forwardRef(function({ tone: t = "info", title: i, children: a }, r) {
-  const { icon: n, colorVar: s } = mt[t], l = !!i, p = G("productive");
+), 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(
-    A.div,
+    H.div,
     {
       ref: r,
-      role: "alert",
+      role: i === "danger" || i === "warning" ? "alert" : "status",
       initial: { opacity: 0, y: -4 },
       animate: { opacity: 1, y: 0 },
       transition: { duration: p.duration, ease: p.easing },
-      className: d(ut({ tone: t, hasTitle: l })),
+      className: d(vi({ tone: i, hasTitle: l })),
       children: [
         /* @__PURE__ */ e(
-          M,
+          A,
           {
             icon: n,
             size: "small",
@@ -77,18 +77,18 @@ const ut = /* @__PURE__ */ $(
               "span",
               {
                 style: {
-                  ...N.typeStyles.ui,
+                  ...z.typeStyles.ui,
                   color: "var(--semantic-color-content-primary)",
                   margin: 0
                 },
-                children: i
+                children: t
               }
             ),
             /* @__PURE__ */ e(
               "span",
               {
                 style: {
-                  ...N.typeStyles.caption,
+                  ...z.typeStyles.caption,
                   color: "var(--semantic-color-content-primary)",
                   margin: 0
                 },
@@ -100,7 +100,7 @@ const ut = /* @__PURE__ */ $(
           "span",
           {
             style: {
-              ...N.typeStyles.caption,
+              ...z.typeStyles.caption,
               color: "var(--semantic-color-content-primary)",
               margin: 0
             },
@@ -110,33 +110,33 @@ const ut = /* @__PURE__ */ $(
       ]
     }
   );
-}), vt = /* @__PURE__ */ $(
-  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground font-medium uppercase select-none",
+}), gi = /* @__PURE__ */ $(
+  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground uppercase select-none",
   {
     variants: {
       size: {
-        sm: "h-8 w-8 text-xs",
-        md: "h-10 w-10 text-sm",
-        lg: "h-12 w-12 text-base"
+        sm: "h-8 w-8 hds-type-caption",
+        md: "h-10 w-10 hds-type-ui",
+        lg: "h-12 w-12 hds-type-body"
       }
     },
     defaultVariants: { size: "md" }
   }
 );
-function ft(o) {
+function hi(o) {
   if (!o) return "";
-  const t = o.trim().split(/\s+/).filter(Boolean);
-  return t.length === 0 ? "" : t.length === 1 ? t[0].slice(0, 2) : (t[0][0] ?? "") + (t[t.length - 1][0] ?? "");
+  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] ?? "");
 }
-const ma = /* @__PURE__ */ f.forwardRef(
-  function({ className: t, size: i, src: a, alt: r, initials: n, ...s }, l) {
-    const [p, c] = f.useState(!1), u = !!a && !p, m = n || ft(r);
+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(
       "span",
       {
         ref: l,
-        "data-size": i ?? "md",
-        className: d(vt({ size: i }), t),
+        "data-size": t ?? "md",
+        className: d(gi({ size: t }), i),
         ...s,
         children: u ? /* @__PURE__ */ e(
           "img",
@@ -150,8 +150,8 @@ const ma = /* @__PURE__ */ f.forwardRef(
       }
     );
   }
-), gt = /* @__PURE__ */ $(
-  "inline-flex w-fit items-center justify-center whitespace-nowrap box-border leading-none uppercase font-medium text-xs tracking-caps 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)]",
+), bi = /* @__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: {
       tone: {
@@ -165,7 +165,7 @@ const ma = /* @__PURE__ */ f.forwardRef(
     },
     defaultVariants: { tone: "neutral" }
   }
-), ht = /* @__PURE__ */ $("inline-block shrink-0 rounded-full", {
+), $i = /* @__PURE__ */ $("inline-block shrink-0 rounded-full", {
   variants: {
     tone: {
       neutral: "bg-muted-foreground",
@@ -177,45 +177,52 @@ const ma = /* @__PURE__ */ f.forwardRef(
     }
   },
   defaultVariants: { tone: "neutral" }
-}), bt = {
+}), yi = {
   sm: "size-1.5",
   md: "size-2",
   lg: "size-2.5"
-}, va = /* @__PURE__ */ f.forwardRef(function({ className: t, tone: i, as: a = "span", dot: r = !1, size: n, label: s, children: l, ...p }, c) {
-  return r ? /* @__PURE__ */ e(
+};
+let Re = !1;
+function xi() {
+  Re || pi() || (Re = !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(
     a,
     {
       ref: c,
-      "data-tone": i ?? "neutral",
+      "data-tone": t ?? "neutral",
       "data-size": n ?? "md",
-      className: d(ht({ tone: i }), bt[n ?? "md"], t),
-      ...s ? { role: "status", "aria-label": s } : { "aria-hidden": !0 },
+      className: d($i({ tone: t }), yi[n ?? "md"], i),
+      ...s ? { role: "img", "aria-label": s } : { "aria-hidden": !0 },
       ...p
     }
   ) : /* @__PURE__ */ e(
     a,
     {
       ref: c,
-      "data-tone": i ?? "neutral",
-      className: d(gt({ tone: i }), t),
+      "data-tone": t ?? "neutral",
+      className: d(bi({ tone: t }), i),
       ...p,
       children: l
     }
   );
-}), fa = /* @__PURE__ */ q.forwardRef(function({ as: t = "div", sx: i, className: a, children: r, ...n }, s) {
-  const l = i ? dt(i) : void 0;
+}), 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(
-    t,
+    i,
     {
       ref: s,
       className: d(l, a),
       "data-hds-component": "Box",
-      "data-hds-metrics": i ? `sx:${Object.keys(i).length}` : void 0,
+      "data-hds-metrics": t ? `sx:${Object.keys(t).length}` : void 0,
       ...n,
       children: r
     }
   );
-}), $t = /* @__PURE__ */ $(
+}), wi = /* @__PURE__ */ $(
   "border-l-[3px] p-[var(--semantic-space-surface-padding)]",
   {
     variants: {
@@ -233,20 +240,20 @@ const ma = /* @__PURE__ */ f.forwardRef(
     },
     defaultVariants: { tone: "info", italic: !1 }
   }
-), ga = /* @__PURE__ */ f.forwardRef(
-  function({ tone: t = "info", italic: i = !1, className: a, children: r, ...n }, s) {
+), ba = /* @__PURE__ */ v.forwardRef(
+  function({ tone: i = "info", italic: t = !1, className: a, children: r, ...n }, s) {
     return /* @__PURE__ */ e(
       "div",
       {
         ref: s,
-        "data-tone": t,
-        className: d($t({ tone: t, italic: i }), a),
+        "data-tone": i,
+        className: d(wi({ tone: i, italic: t }), a),
         ...n,
         children: r
       }
     );
   }
-), xt = /* @__PURE__ */ $("text-sm", {
+), ki = /* @__PURE__ */ $("hds-type-ui", {
   variants: {
     tone: {
       neutral: "text-foreground",
@@ -256,13 +263,13 @@ const ma = /* @__PURE__ */ f.forwardRef(
       info: "text-feedback-info"
     },
     mono: {
-      true: "font-mono text-xs",
+      true: "hds-type-mono",
       false: ""
     }
   },
   defaultVariants: { tone: "neutral", mono: !1 }
-}), ha = /* @__PURE__ */ f.forwardRef(function({ label: t, value: i, tone: a, mono: r, className: n, children: s, ...l }, p) {
-  const c = s ?? i;
+}), $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(
     "div",
     {
@@ -271,12 +278,12 @@ const ma = /* @__PURE__ */ f.forwardRef(
       className: d("flex flex-col gap-1", n),
       ...l,
       children: [
-        /* @__PURE__ */ e("span", { className: "text-xs uppercase tracking-caps text-muted-foreground", children: t }),
-        c != null && /* @__PURE__ */ e("span", { className: xt({ tone: a, mono: r }), children: c })
+        /* @__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 })
       ]
     }
   );
-}), yt = /* @__PURE__ */ $("m-0 text-2xl font-medium leading-tight", {
+}), Si = /* @__PURE__ */ $("m-0 hds-type-title", {
   variants: {
     tone: {
       neutral: "text-foreground",
@@ -287,22 +294,22 @@ const ma = /* @__PURE__ */ f.forwardRef(
     }
   },
   defaultVariants: { tone: "neutral" }
-}), ba = /* @__PURE__ */ f.forwardRef(function({ label: t, value: i, sub: a, tone: r, className: n, ...s }, l) {
+}), ya = /* @__PURE__ */ v.forwardRef(function({ label: i, value: t, sub: a, tone: r, className: n, ...s }, l) {
   return /* @__PURE__ */ g(
     "div",
     {
       ref: l,
       "data-tone": r ?? "neutral",
-      className: d("flex flex-col gap-0.5", n),
+      className: d("flex flex-col gap-1 self-start", n),
       ...s,
       children: [
-        /* @__PURE__ */ e("p", { className: yt({ tone: r }), children: i }),
-        /* @__PURE__ */ e("p", { className: "m-0 text-xs uppercase tracking-caps text-muted-foreground", children: t }),
-        a && /* @__PURE__ */ e("p", { className: "m-0 text-xs text-muted-foreground", children: a })
+        /* @__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 })
       ]
     }
   );
-}), wt = /* @__PURE__ */ $("mt-1.5 h-2 w-2 shrink-0 rounded-full", {
+}), Ni = /* @__PURE__ */ $("mt-1.5 h-2 w-2 shrink-0 rounded-full", {
   variants: {
     tone: {
       neutral: "bg-border",
@@ -313,51 +320,52 @@ const ma = /* @__PURE__ */ f.forwardRef(
     }
   },
   defaultVariants: { tone: "neutral" }
-}), $a = /* @__PURE__ */ f.forwardRef(
-  function({ tone: t, title: i, notes: a, trailing: r, className: n, ...s }, l) {
+}), xa = /* @__PURE__ */ v.forwardRef(
+  function({ tone: i, title: t, notes: a, trailing: r, className: n, ...s }, l) {
     return /* @__PURE__ */ g(
       "div",
       {
         ref: l,
-        "data-tone": t ?? "neutral",
+        "data-tone": i ?? "neutral",
         className: d("flex items-start gap-3", n),
         ...s,
         children: [
-          /* @__PURE__ */ e("span", { "aria-hidden": "true", className: wt({ tone: t }) }),
+          /* @__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 text-sm text-foreground", children: i }),
-            a == null ? void 0 : a.map((p, c) => /* @__PURE__ */ e("p", { className: "m-0 text-xs text-muted-foreground", children: p }, c))
+            /* @__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))
           ] }),
           r && /* @__PURE__ */ e("div", { className: "shrink-0", children: r })
         ]
       }
     );
   }
-), kt = O.Trigger, _e = /* @__PURE__ */ ne(O.Portal), St = O.Close, Ge = /* @__PURE__ */ f.forwardRef(function({ className: t, ...i }, a) {
+), zi = U.Trigger, Ge = /* @__PURE__ */ se(U.Portal), Ci = U.Close, je = /* @__PURE__ */ v.forwardRef(function({ className: i, ...t }, a) {
   return /* @__PURE__ */ e(
-    O.Overlay,
+    U.Overlay,
     {
       ref: a,
-      className: d("fixed inset-0 z-50 bg-scrim/60 backdrop-blur-sm", t),
-      ...i
+      className: d("fixed inset-0 z-50 bg-scrim/60 backdrop-blur-sm", i),
+      ...t
     }
   );
-}), Nt = /* @__PURE__ */ f.forwardRef(function({ className: t, children: i, hideClose: a = !1, container: r, ...n }, s) {
-  return /* @__PURE__ */ g(_e, { container: r, children: [
-    /* @__PURE__ */ e(Ge, {}),
+}), 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(
-      O.Content,
+      U.Content,
       {
         ref: s,
         className: d(
-          "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -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",
-          t
+          // 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
         ),
         ...n,
         children: [
-          i,
+          t,
           !a && /* @__PURE__ */ g(
-            O.Close,
+            U.Close,
             {
               className: d(
                 "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-sm text-muted-foreground transition-colors",
@@ -366,7 +374,7 @@ const ma = /* @__PURE__ */ f.forwardRef(
                 "disabled:pointer-events-none"
               ),
               children: [
-                /* @__PURE__ */ e(ce, { "aria-hidden": "true", className: "size-4" }),
+                /* @__PURE__ */ e(ve, { "aria-hidden": "true", className: "size-4" }),
                 /* @__PURE__ */ e("span", { className: "sr-only", children: "Close" })
               ]
             }
@@ -375,53 +383,54 @@ const ma = /* @__PURE__ */ f.forwardRef(
       }
     )
   ] });
-}), zt = /* @__PURE__ */ f.forwardRef(function({ className: t, ...i }, a) {
-  return /* @__PURE__ */ e("div", { ref: a, className: d("flex flex-col space-y-1.5 text-left", t), ...i });
-}), Ct = /* @__PURE__ */ f.forwardRef(function({ className: t, ...i }, 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(
     "div",
     {
       ref: a,
-      className: d("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2", t),
-      ...i
+      className: d("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2", i),
+      ...t
     }
   );
-}), Dt = /* @__PURE__ */ f.forwardRef(function({ className: t, children: i, ...a }, r) {
-  return /* @__PURE__ */ e(O.Title, { asChild: !0, children: /* @__PURE__ */ e(Ee, { ref: r, as: "h2", variant: "heading3", className: t, ...a, children: i }) });
-}), Tt = /* @__PURE__ */ f.forwardRef(function({ className: t, children: i, ...a }, r) {
-  return /* @__PURE__ */ e(O.Description, { asChild: !0, children: /* @__PURE__ */ e(
-    Ee,
+}), 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,
     {
       ref: r,
       as: "p",
       variant: "caption",
-      className: d("text-muted-foreground", t),
+      className: d("text-muted-foreground", i),
       ...a,
-      children: i
+      children: t
     }
   ) });
 });
-function Pt(o) {
-  return /* @__PURE__ */ e(O.Root, { ...o });
+function Vi(o) {
+  return /* @__PURE__ */ e(U.Root, { ...o });
 }
-const xa = /* @__PURE__ */ Object.assign(Pt, {
-  Trigger: kt,
-  Portal: _e,
-  Overlay: Ge,
-  Content: Nt,
-  Header: zt,
-  Footer: Ct,
-  Title: Dt,
-  Description: Tt,
-  Close: St,
+const wa = /* @__PURE__ */ Object.assign(Vi, {
+  Trigger: zi,
+  Portal: Ge,
+  Overlay: je,
+  Content: Di,
+  Header: Ti,
+  Footer: Ri,
+  Title: Pi,
+  Description: Li,
+  Close: Ci,
   // 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"
-}), Rt = /* @__PURE__ */ $("m-0 shrink-0 border-solid", {
+}), Ii = /* @__PURE__ */ $("m-0 shrink-0 border-solid", {
   variants: {
     orientation: {
       horizontal: "w-full self-stretch border-t",
-      vertical: "h-full border-l"
+      // h-auto + self-stretch, not h-full: a percent height is never stretched by flex and has nothing to resolve against in an auto-height row; the UA hr is height 0, so auto is needed for the stretch to apply (hds#522)
+      vertical: "h-auto self-stretch border-l"
     },
     variant: {
       default: "border-[var(--semantic-color-border-default)]",
@@ -429,16 +438,16 @@ const xa = /* @__PURE__ */ Object.assign(Pt, {
     }
   },
   defaultVariants: { orientation: "horizontal", variant: "default" }
-}), ya = /* @__PURE__ */ f.forwardRef(
-  function({ orientation: t = "horizontal", variant: i, spacing: a, strong: r, style: n, className: s, ...l }, p) {
-    const c = r !== void 0 ? r ? "strong" : "default" : i, u = t === "horizontal";
+}), 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(
       "hr",
       {
         ref: p,
-        "aria-orientation": t ?? "horizontal",
+        "aria-orientation": i ?? "horizontal",
         "data-variant": c ?? "default",
-        className: d(Rt({ orientation: t, variant: c }), s),
+        className: d(Ii({ orientation: i, variant: c }), s),
         style: {
           ...u ? { marginTop: a, marginBottom: a } : { marginLeft: a, marginRight: a },
           ...n
@@ -448,124 +457,124 @@ const xa = /* @__PURE__ */ Object.assign(Pt, {
     );
   }
 );
-function Vt(o) {
+function Mi(o) {
   return /* @__PURE__ */ e(E.Root, { ...o });
 }
-const Lt = E.Trigger, It = E.Group, Mt = E.RadioGroup, At = E.Sub, Oe = /* @__PURE__ */ ne(E.Portal), je = "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-overlay", pe = "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm 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", Et = /* @__PURE__ */ f.forwardRef(function({ className: t, sideOffset: i = 4, container: a, ...r }, n) {
-  return /* @__PURE__ */ e(Oe, { container: a, children: /* @__PURE__ */ e(
+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,
     {
       ref: n,
-      sideOffset: i,
+      sideOffset: t,
       collisionPadding: 8,
-      className: d(je, t),
+      className: d(Ye, i),
       ...r
     }
   ) });
-}), Bt = /* @__PURE__ */ f.forwardRef(function({ className: t, ...i }, a) {
-  return /* @__PURE__ */ e(E.Item, { ref: a, className: d(pe, t), ...i });
-}), Ht = /* @__PURE__ */ f.forwardRef(function({ className: t, children: i, ...a }, r) {
-  return /* @__PURE__ */ g(E.CheckboxItem, { ref: r, className: d(pe, "pl-6", t), ...a, children: [
-    /* @__PURE__ */ e("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ e(E.ItemIndicator, { children: /* @__PURE__ */ e(M, { icon: re, size: 14, color: "currentColor", "aria-hidden": !0 }) }) }),
-    i
+}), 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
   ] });
-}), Wt = /* @__PURE__ */ f.forwardRef(function({ className: t, children: i, ...a }, r) {
-  return /* @__PURE__ */ g(E.RadioItem, { ref: r, className: d(pe, "pl-6", t), ...a, children: [
-    /* @__PURE__ */ e("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ e(E.ItemIndicator, { children: /* @__PURE__ */ e(M, { icon: at, size: 6, color: "currentColor", "aria-hidden": !0, className: "fill-current" }) }) }),
-    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
   ] });
-}), Ft = /* @__PURE__ */ f.forwardRef(function({ className: t, ...i }, a) {
+}), Gi = /* @__PURE__ */ v.forwardRef(function({ className: i, ...t }, a) {
   return /* @__PURE__ */ e(
     E.Label,
     {
       ref: a,
-      className: d("px-2 py-1.5 text-sm font-medium text-muted-foreground", t),
-      ...i
+      className: d("px-2 py-1.5 hds-type-ui text-muted-foreground", i),
+      ...t
     }
   );
-}), _t = /* @__PURE__ */ f.forwardRef(function({ className: t, ...i }, a) {
+}), ji = /* @__PURE__ */ v.forwardRef(function({ className: i, ...t }, a) {
   return /* @__PURE__ */ e(
     E.Separator,
     {
       ref: a,
-      className: d("-mx-1 my-1 h-px bg-border", t),
-      ...i
+      className: d("-mx-1 my-1 h-px bg-border", i),
+      ...t
     }
   );
-}), Gt = /* @__PURE__ */ f.forwardRef(function({ className: t, children: i, ...a }, r) {
+}), Ui = /* @__PURE__ */ v.forwardRef(function({ className: i, children: t, ...a }, r) {
   return /* @__PURE__ */ g(
     E.SubTrigger,
     {
       ref: r,
-      className: d(pe, "data-[state=open]:bg-accent", t),
+      className: d(ge, "data-[state=open]:bg-accent", i),
       ...a,
       children: [
-        i,
-        /* @__PURE__ */ e(M, { icon: be, size: 14, color: "currentColor", "aria-hidden": !0, className: "ml-auto" })
+        t,
+        /* @__PURE__ */ e(A, { icon: xe, size: 14, color: "currentColor", "aria-hidden": !0, className: "ml-auto" })
       ]
     }
   );
-}), Ot = /* @__PURE__ */ f.forwardRef(function({ className: t, container: i, ...a }, r) {
-  return /* @__PURE__ */ e(Oe, { container: i, children: /* @__PURE__ */ e(E.SubContent, { ref: r, className: d(je, t), ...a }) });
-}), wa = /* @__PURE__ */ Object.assign(Vt, {
-  Trigger: Lt,
-  Content: Et,
-  Item: Bt,
-  CheckboxItem: Ht,
-  RadioGroup: Mt,
-  RadioItem: Wt,
-  Label: Ft,
-  Separator: _t,
-  Group: It,
-  Sub: At,
-  SubTrigger: Gt,
-  SubContent: Ot,
+}), 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,
   // 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 jt(o) {
-  return /* @__PURE__ */ e(ee.Root, { ...o });
+function qi(o) {
+  return /* @__PURE__ */ e(ie.Root, { ...o });
 }
-const Ut = ee.Trigger, Yt = ee.Anchor, qt = ee.Close, Xt = /* @__PURE__ */ ne(ee.Portal), Kt = /* @__PURE__ */ f.forwardRef(function({ className: t, align: i = "center", sideOffset: a = 4, container: r, ...n }, s) {
-  return /* @__PURE__ */ e(Xt, { container: r, children: /* @__PURE__ */ e(
-    ee.Content,
+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,
     {
       ref: s,
-      align: i,
+      align: t,
       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",
-        t
+        i
       ),
       ...n
     }
   ) });
-}), fe = /* @__PURE__ */ Object.assign(jt, {
-  Trigger: Ut,
-  Anchor: Yt,
-  Content: Kt,
-  Close: qt,
+}), be = /* @__PURE__ */ Object.assign(qi, {
+  Trigger: Xi,
+  Anchor: Ki,
+  Content: Qi,
+  Close: Ji,
   // 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"
-}), Jt = /* @__PURE__ */ ne(Z.Portal), Zt = /* @__PURE__ */ f.forwardRef(function({ className: t, sideOffset: i = 6, children: a, container: r, ...n }, s) {
-  return /* @__PURE__ */ e(Jt, { container: r, children: /* @__PURE__ */ g(
+}), 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,
     {
       ref: s,
-      sideOffset: i,
+      sideOffset: t,
       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
-        t
+        i
       ),
       style: {
-        ...N.typeStyles.caption,
+        ...z.typeStyles.caption,
         color: "var(--semantic-color-content-inverse)",
         margin: 0
       },
@@ -584,39 +593,41 @@ const Ut = ee.Trigger, Yt = ee.Anchor, qt = ee.Close, Xt = /* @__PURE__ */ ne(ee
     }
   ) });
 });
-function Qt({
+function tt({
   delayDuration: o = 300,
-  children: t,
-  ...i
+  children: i,
+  ...t
 }) {
-  return /* @__PURE__ */ e(Z.Provider, { delayDuration: o, children: /* @__PURE__ */ e(Z.Root, { ...i, children: t }) });
+  return /* @__PURE__ */ e(Z.Provider, { delayDuration: o, children: /* @__PURE__ */ e(Z.Root, { ...t, children: i }) });
 }
-const ka = /* @__PURE__ */ Object.assign(Qt, {
+const Na = /* @__PURE__ */ Object.assign(tt, {
   Trigger: Z.Trigger,
-  Content: Zt,
+  Content: it,
   // 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"
-}), ei = /* @__PURE__ */ $(
+}), at = /* @__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: {
       density: {
         comfortable: "py-[var(--semantic-space-subgrid-gap)] align-[-0.08em] leading-[1]",
+        // type-ramp-ok: inline chip hugs the prose line box, so it keeps its own leading
         compact: "py-[var(--semantic-space-subgrid-hairline)] align-[-0.04em] leading-[0.95]"
+        // type-ramp-ok: compact chip in dense cells, same reason
       }
     },
     defaultVariants: { density: "comfortable" }
   }
 );
-function Sa({
+function za({
   children: o,
-  style: t,
-  density: i,
+  style: i,
+  density: t,
   compact: a,
   copyable: r = !1
 }) {
-  const [n, s] = j(!1), l = a !== void 0 ? a ? "compact" : "comfortable" : i ?? "comfortable";
+  const [n, s] = Y(!1), l = a !== void 0 ? a ? "compact" : "comfortable" : t ?? "comfortable";
   function p() {
     typeof o == "string" && navigator.clipboard.writeText(o).then(() => {
       s(!0), setTimeout(() => s(!1), 2e3);
@@ -626,8 +637,8 @@ function Sa({
     "code",
     {
       "data-density": l,
-      className: ei({ density: l }),
-      style: r ? void 0 : t,
+      className: at({ density: l }),
+      style: r ? void 0 : i,
       children: o
     }
   );
@@ -637,12 +648,12 @@ function Sa({
       style: {
         display: "inline-flex",
         alignItems: "center",
-        gap: N.semantic.space.subgrid.gap,
-        ...t
+        gap: z.semantic.space.subgrid.gap,
+        ...i
       },
       children: [
         /* @__PURE__ */ e(
-          le,
+          me,
           {
             iconOnly: !0,
             size: "sm",
@@ -650,7 +661,7 @@ function Sa({
             "aria-label": n ? "Copied" : "Copy",
             onClick: p,
             style: n ? { color: "var(--semantic-color-content-accent)" } : void 0,
-            iconLeft: /* @__PURE__ */ e(M, { icon: n ? re : rt, size: "small" })
+            iconLeft: /* @__PURE__ */ e(A, { icon: n ? oe : ni, size: "small" })
           }
         ),
         c
@@ -658,35 +669,35 @@ function Sa({
     }
   ) : c;
 }
-function Na({ href: o, children: t, externalIcon: i = !0 }) {
-  const { LinkComponent: a } = Fe();
-  return o.startsWith("/") ? /* @__PURE__ */ e(a, { to: o, className: "hds-link", children: t }) : /* @__PURE__ */ g("a", { href: o, target: "_blank", rel: "noopener noreferrer", className: "hds-focus hds-link", children: [
-    t,
-    i && /* @__PURE__ */ e(
-      M,
+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(
+      A,
       {
-        icon: nt,
+        icon: oi,
         size: 11,
         color: "currentColor",
         "aria-hidden": !0,
         style: {
           display: "inline",
           verticalAlign: "middle",
-          marginLeft: N.semantic.space.subgrid.xs,
-          marginBottom: N.semantic.space.subgrid.hairline
+          marginLeft: z.semantic.space.subgrid.xs,
+          marginBottom: z.semantic.space.subgrid.hairline
         }
       }
     )
   ] });
 }
-const ti = /* @__PURE__ */ $(
+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",
   {
     variants: {
       size: {
-        sm: "h-8 text-xs",
-        md: "h-10 text-sm",
-        lg: "h-12 text-base"
+        sm: "h-8 hds-type-caption",
+        md: "h-10 hds-type-ui",
+        lg: "h-12 hds-type-body"
       },
       textStyle: {
         body: "font-sans",
@@ -703,14 +714,14 @@ const ti = /* @__PURE__ */ $(
       invalid: !1
     }
   }
-), ii = /* @__PURE__ */ $(
+), 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",
   {
     variants: {
       size: {
-        sm: "h-8 text-xs",
-        md: "h-10 text-sm",
-        lg: "h-12 text-base"
+        sm: "h-8 hds-type-caption",
+        md: "h-10 hds-type-ui",
+        lg: "h-12 hds-type-body"
       },
       textStyle: {
         body: "font-sans",
@@ -727,12 +738,12 @@ const ti = /* @__PURE__ */ $(
       invalid: !1
     }
   }
-), ai = "h-full border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 disabled:bg-transparent disabled:opacity-100", ri = /* @__PURE__ */ new Set([
+), 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([
   "number",
   "date",
   "time",
   "datetime-local"
-]), ni = {
+]), lt = {
   sm: {
     restPadL: "pl-2",
     restPadR: "pr-2",
@@ -773,12 +784,12 @@ const ti = /* @__PURE__ */ $(
     suffixGap: "pr-2.5"
   }
 };
-function De(o) {
+function Pe(o) {
   return o != null && typeof o != "boolean" && o !== "";
 }
-const za = /* @__PURE__ */ f.forwardRef(function({
-  type: t = "text",
-  size: i = "md",
+const Da = /* @__PURE__ */ v.forwardRef(function({
+  type: i = "text",
+  size: t = "md",
   textStyle: a = "body",
   id: r,
   label: n,
@@ -795,37 +806,37 @@ const za = /* @__PURE__ */ f.forwardRef(function({
   inputClassName: S,
   onChange: h,
   ...C
-}, V) {
-  const I = f.useId(), T = r ?? I, L = f.useRef(null), D = oe(), x = !!m || D === "error", P = b || D === "loading", B = !!k || P || D === "disabled", U = s ? `${T}-hint` : void 0, H = x && (y || D === "error") ? `${T}-error` : void 0, Y = [U, H].filter(Boolean).join(" ") || void 0, [te, ue] = f.useState(() => typeof C.defaultValue == "string" ? C.defaultValue : typeof C.defaultValue == "number" ? String(C.defaultValue) : ""), ie = typeof C.value == "string" ? C.value : typeof C.value == "number" ? String(C.value) : void 0, ae = ie ?? te, v = ni[i], z = !!l, W = !!p, X = De(c), K = De(u), me = X || K, we = !ri.has(t) && ae.length > 0 && !B && !P, qe = P || W || we;
-  function Xe(F) {
-    if (L.current = F, typeof V == "function") {
-      V(F);
+}, 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(_);
       return;
     }
-    V && (V.current = F);
+    L && (L.current = _);
   }
-  function Ke() {
-    var Ne;
-    const F = L.current;
-    if (!F) return;
-    const ve = (Ne = Object.getOwnPropertyDescriptor(
+  function Je() {
+    var Ce;
+    const _ = V.current;
+    if (!_) return;
+    const he = (Ce = Object.getOwnPropertyDescriptor(
       window.HTMLInputElement.prototype,
       "value"
-    )) == null ? void 0 : Ne.set;
-    ve == null || ve.call(F, ""), F.dispatchEvent(new Event("input", { bubbles: !0 })), F.focus();
+    )) == null ? void 0 : Ce.set;
+    he == null || he.call(_, ""), _.dispatchEvent(new Event("input", { bubbles: !0 })), _.focus();
   }
-  const Je = D || (P ? "loading" : B ? "disabled" : x ? "error" : ae.length > 0 ? "filled" : "default"), Ze = z ? v.leadPad : X ? v.prefixGap : v.restPadL, Qe = qe ? v.trailPad : K ? v.suffixGap : v.restPadR, ke = d(
+  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(
     "flex shrink-0 items-center whitespace-nowrap text-muted-foreground",
-    v.iconWrap
-  ), Se = /* @__PURE__ */ g("div", { className: me ? "relative min-w-0 flex-1 self-stretch" : "relative w-full", children: [
-    z && /* @__PURE__ */ e(
+    M.iconWrap
+  ), ze = /* @__PURE__ */ g("div", { className: F ? "relative min-w-0 flex-1 self-stretch" : "relative w-full", children: [
+    re && /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
         className: d(
           "pointer-events-none absolute left-0 flex items-center text-muted-foreground",
-          v.inset,
-          v.iconWrap
+          M.inset,
+          M.iconWrap
         ),
         children: l
       }
@@ -833,80 +844,80 @@ const za = /* @__PURE__ */ f.forwardRef(function({
     /* @__PURE__ */ e(
       "input",
       {
-        ref: Xe,
+        ref: Ke,
         id: T,
-        type: t,
+        type: i,
         disabled: B,
         "aria-disabled": B || void 0,
-        "aria-busy": P || void 0,
-        "aria-describedby": Y,
-        "aria-errormessage": H,
+        "aria-busy": R || void 0,
+        "aria-describedby": G,
+        "aria-errormessage": W,
         "aria-invalid": x || void 0,
-        "data-state": Je,
-        "data-size": i,
-        "data-search-input": t === "search" ? "true" : void 0,
+        "data-state": Ze,
+        "data-size": t,
+        "data-search-input": i === "search" ? "true" : void 0,
         className: d(
-          ti({ size: i, textStyle: a, invalid: x }),
-          Ze,
+          rt({ size: t, textStyle: a, invalid: x }),
           Qe,
-          me && ai,
+          ei,
+          F && ot,
           S
         ),
-        onChange: (F) => {
-          ie === void 0 && ue(F.target.value), h == null || h(F);
+        onChange: (_) => {
+          ce === void 0 && ae(_.target.value), h == null || h(_);
         },
         ...C
       }
     ),
-    P && /* @__PURE__ */ e(
+    R && /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
         className: d(
           "pointer-events-none absolute right-0 flex items-center text-muted-foreground",
-          v.inset
+          M.inset
         ),
-        children: /* @__PURE__ */ e(ot, { className: d("animate-spin", v.iconClass) })
+        children: /* @__PURE__ */ e(si, { className: d("animate-spin", M.iconClass) })
       }
     ),
-    !P && W && /* @__PURE__ */ e(
+    !R && K && /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
         className: d(
           "pointer-events-none absolute right-0 flex items-center text-muted-foreground",
-          v.inset,
-          v.iconWrap
+          M.inset,
+          M.iconWrap
         ),
         children: p
       }
     ),
-    !P && !W && we && /* @__PURE__ */ e(
+    !R && !K && ne && /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        onClick: Ke,
-        "aria-label": t === "search" ? "Clear search" : "Clear input",
+        onClick: Je,
+        "aria-label": i === "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",
-          v.inset
+          M.inset
         ),
-        children: /* @__PURE__ */ e(ce, { className: v.iconClass, "aria-hidden": "true" })
+        children: /* @__PURE__ */ e(ve, { className: M.iconClass, "aria-hidden": "true" })
       }
     )
   ] });
-  return /* @__PURE__ */ g("div", { className: d("flex flex-col gap-1.5", w), children: [
-    n && /* @__PURE__ */ e("label", { htmlFor: T, className: "text-xs font-medium text-muted-foreground", children: n }),
-    me ? /* @__PURE__ */ g("div", { className: ii({ size: i, textStyle: a, invalid: x }), children: [
-      X && /* @__PURE__ */ e("span", { className: d(ke, v.prefixPad), children: c }),
-      Se,
-      K && /* @__PURE__ */ e("span", { className: d(ke, v.suffixPad), children: u })
-    ] }) : Se,
-    s && !H && /* @__PURE__ */ e("span", { id: U, className: "text-xs text-muted-foreground", children: s }),
-    x && (y || D === "error") && /* @__PURE__ */ e("span", { id: H, role: "alert", className: "text-xs text-destructive", children: y || "Field error" })
+  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" })
   ] });
-}), oi = /* @__PURE__ */ $(
-  "flex w-full rounded-md border bg-background px-3 py-2 text-sm 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",
+}), 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",
   {
     variants: {
       resize: {
@@ -924,10 +935,10 @@ const za = /* @__PURE__ */ f.forwardRef(function({
       invalid: !1
     }
   }
-), Ca = /* @__PURE__ */ f.forwardRef(
+), Ta = /* @__PURE__ */ v.forwardRef(
   function({
-    id: t,
-    label: i,
+    id: i,
+    label: t,
     helperText: a,
     error: r,
     errorMessage: n,
@@ -938,9 +949,9 @@ const za = /* @__PURE__ */ f.forwardRef(function({
     textareaClassName: u,
     ...m
   }, y) {
-    const k = f.useId(), b = t ?? k, w = !!r, S = a ? `${b}-hint` : void 0, h = w && n ? `${b}-error` : void 0, C = [S, h].filter(Boolean).join(" ") || void 0, V = s ? "disabled" : w ? "error" : "default";
-    return /* @__PURE__ */ g("div", { className: d("flex flex-col gap-1.5", c), children: [
-      i && /* @__PURE__ */ e("label", { htmlFor: b, className: "text-xs font-medium text-muted-foreground", children: i }),
+    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(
         "textarea",
         {
@@ -952,21 +963,21 @@ const za = /* @__PURE__ */ f.forwardRef(function({
           "aria-describedby": C,
           "aria-errormessage": h,
           "aria-invalid": w || void 0,
-          "data-state": V,
-          className: d(oi({ resize: l, invalid: w }), u),
+          "data-state": L,
+          className: d(ct({ resize: l, invalid: w }), u),
           ...m
         }
       ),
-      a && !h && /* @__PURE__ */ e("span", { id: S, className: "text-xs text-muted-foreground", children: a }),
-      w && n && /* @__PURE__ */ e("span", { id: h, role: "alert", className: "text-xs text-destructive", children: n })
+      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 })
     ] });
   }
 );
-function xe({
+function ke({
   disabled: o,
-  frozenState: t = null
+  frozenState: i = null
 }) {
-  const [i, a] = j(!1), [r, n] = j(!1), [s, l] = j(!1), p = o === !0 || t === "disabled", c = t ?? (p ? "disabled" : r ? "pressed" : i ? "hover" : s ? "focused" : "rest");
+  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");
   return {
     visualState: c,
     isHover: c === "hover",
@@ -988,8 +999,8 @@ function xe({
     }
   };
 }
-const si = /* @__PURE__ */ $(
-  "relative inline-flex items-center gap-[var(--semantic-space-subgrid-gap)] rounded-md py-[var(--semantic-space-subgrid-gap)] px-[var(--semantic-space-scale-xs)] select-none",
+const dt = /* @__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: {
       state: {
@@ -1002,7 +1013,7 @@ const si = /* @__PURE__ */ $(
     },
     defaultVariants: { state: "rest" }
   }
-), li = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
+), pt = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
   variants: {
     state: {
       rest: "cursor-pointer",
@@ -1013,7 +1024,7 @@ const si = /* @__PURE__ */ $(
     }
   },
   defaultVariants: { state: "rest" }
-}), ci = /* @__PURE__ */ $(
+}), ut = /* @__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: {
@@ -1062,22 +1073,23 @@ const si = /* @__PURE__ */ $(
     defaultVariants: { state: "rest", on: !1 }
   }
 );
-function di(o, t) {
-  typeof o == "function" ? o(t) : o && (o.current = t);
+function mt(o, i) {
+  typeof o == "function" ? o(i) : o && (o.current = i);
 }
-const Da = /* @__PURE__ */ Q(
-  function({ label: t, checked: i, onChange: a, indeterminate: r = !1, onFocus: n, onBlur: s, disabled: l, ...p }, c) {
-    const u = ge(null), m = oe(), { visualState: y, isHover: k, isFocused: b, isPressed: w, isDisabled: S, handlers: h } = xe({
+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
     });
-    tt(() => {
+    ti(() => {
       u.current && (u.current.indeterminate = r);
     }, [r]);
-    const C = i || r, V = S ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-onAccent)", I = G("productive");
+    const C = t || r, L = S ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-onAccent)", I = j("productive");
     return /* @__PURE__ */ g(
-      A.label,
+      H.label,
       {
+        tabIndex: -1,
         whileTap: S ? void 0 : { scale: 0.99 },
         transition: { duration: I.duration, ease: I.easing },
         onMouseEnter: h.onMouseEnter,
@@ -1085,18 +1097,18 @@ const Da = /* @__PURE__ */ Q(
         onPointerDown: h.onPointerDown,
         onPointerUp: h.onPointerUp,
         onPointerCancel: h.onPointerCancel,
-        className: si({ state: y }),
+        className: dt({ state: y }),
         children: [
           /* @__PURE__ */ e(
             "input",
             {
               ref: (T) => {
-                u.current = T, di(c, T);
+                u.current = T, mt(c, T);
               },
               type: "checkbox",
-              checked: i,
+              checked: t,
               disabled: S,
-              "aria-checked": r ? "mixed" : i,
+              "aria-checked": r ? "mixed" : t,
               onChange: (T) => a(T.target.checked),
               onFocus: (T) => {
                 h.onFocus(), n == null || n(T);
@@ -1104,12 +1116,12 @@ const Da = /* @__PURE__ */ Q(
               onBlur: (T) => {
                 h.onBlur(), s == null || s(T);
               },
-              className: li({ state: y }),
+              className: pt({ state: y }),
               ...p
             }
           ),
           /* @__PURE__ */ e(
-            A.span,
+            H.span,
             {
               "aria-hidden": "true",
               animate: { scale: w ? 0.94 : k || b ? 1.04 : 1 },
@@ -1117,34 +1129,34 @@ const Da = /* @__PURE__ */ Q(
                 duration: I.duration,
                 ease: I.easing
               },
-              className: ci({ state: y, on: C }),
+              className: ut({ state: y, on: C }),
               style: {
                 transition: `background-color ${I.duration}s ease, border-color ${I.duration}s ease`
               },
-              children: r ? /* @__PURE__ */ e(M, { icon: st, size: 14, color: V, "aria-hidden": !0 }) : i ? /* @__PURE__ */ e(M, { icon: re, size: 14, color: V, "aria-hidden": !0 }) : null
+              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
             }
           ),
           /* @__PURE__ */ e(
-            A.span,
+            H.span,
             {
               className: "text-secondary",
-              animate: { x: w ? N.space.px1 : 0 },
+              animate: { x: w ? z.space.px1 : 0 },
               transition: {
                 duration: I.duration,
                 ease: I.easing
               },
               style: {
-                ...N.typeStyles.ui,
+                ...z.typeStyles.ui,
                 color: S ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-primary)"
               },
-              children: t
+              children: i
             }
           )
         ]
       }
     );
   }
-), pi = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
+), vt = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
   variants: {
     state: {
       rest: "cursor-pointer",
@@ -1155,8 +1167,8 @@ const Da = /* @__PURE__ */ Q(
     }
   },
   defaultVariants: { state: "rest" }
-}), ui = /* @__PURE__ */ $(
-  "relative inline-flex items-center gap-[var(--semantic-space-subgrid-gap)] select-none",
+}), ft = /* @__PURE__ */ $(
+  "relative inline-flex items-center gap-[var(--semantic-space-subgrid-gap)] py-[var(--semantic-space-subgrid-gap)] select-none hds-touch-row",
   {
     variants: {
       state: {
@@ -1169,7 +1181,7 @@ const Da = /* @__PURE__ */ Q(
     },
     defaultVariants: { state: "rest" }
   }
-), mi = /* @__PURE__ */ $(
+), gt = /* @__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)]",
   {
@@ -1210,7 +1222,7 @@ const Da = /* @__PURE__ */ Q(
     ],
     defaultVariants: { state: "rest", on: !1 }
   }
-), vi = /* @__PURE__ */ $(
+), ht = /* @__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
@@ -1224,9 +1236,9 @@ const Da = /* @__PURE__ */ Q(
     },
     defaultVariants: { disabled: !1 }
   }
-), Ta = /* @__PURE__ */ Q(function({
-  label: t,
-  checked: i,
+), Pa = /* @__PURE__ */ ee(function({
+  label: i,
+  checked: t,
   onChange: a,
   disabled: r,
   style: n,
@@ -1240,141 +1252,141 @@ const Da = /* @__PURE__ */ Q(
   onBlur: k,
   ...b
 }, w) {
-  const S = oe(), { visualState: h, isHover: C, isFocused: V, isPressed: I, isDisabled: T, handlers: L } = xe({
+  const S = le(), { visualState: h, isHover: C, isFocused: L, isPressed: I, isDisabled: T, handlers: V } = ke({
     disabled: r,
     frozenState: S
-  }), R = G("productive"), D = G("expressive");
+  }), P = j("productive"), D = j("expressive");
   return /* @__PURE__ */ g(
-    A.label,
+    H.label,
     {
+      tabIndex: -1,
       whileTap: T ? void 0 : { scale: 0.99 },
-      transition: { duration: R.duration, ease: R.easing },
-      className: ui({ state: h }),
+      transition: { duration: P.duration, ease: P.easing },
+      className: ft({ state: h }),
       children: [
         /* @__PURE__ */ e(
           "input",
           {
             ref: w,
             type: "radio",
-            checked: i,
+            checked: t,
             disabled: T,
             onChange: (x) => a(x.target.checked),
             onMouseEnter: (x) => {
-              L.onMouseEnter(), l == null || l(x);
+              V.onMouseEnter(), l == null || l(x);
             },
             onMouseLeave: (x) => {
-              L.onMouseLeave(), p == null || p(x);
+              V.onMouseLeave(), p == null || p(x);
             },
             onPointerDown: (x) => {
-              L.onPointerDown(), c == null || c(x);
+              V.onPointerDown(), c == null || c(x);
             },
             onPointerUp: (x) => {
-              L.onPointerUp(), u == null || u(x);
+              V.onPointerUp(), u == null || u(x);
             },
             onPointerCancel: (x) => {
-              L.onPointerCancel(), m == null || m(x);
+              V.onPointerCancel(), m == null || m(x);
             },
             onFocus: (x) => {
-              L.onFocus(), y == null || y(x);
+              V.onFocus(), y == null || y(x);
             },
             onBlur: (x) => {
-              L.onBlur(), k == null || k(x);
+              V.onBlur(), k == null || k(x);
             },
-            className: d("hds-focus", pi({ state: h })),
+            className: d("hds-focus", vt({ state: h })),
             ...b
           }
         ),
         /* @__PURE__ */ e(
-          A.span,
+          H.span,
           {
             "aria-hidden": "true",
-            className: mi({ state: h, on: i }),
+            className: gt({ state: h, on: t }),
             animate: {
-              scale: I ? 0.94 : C || V ? 1.04 : 1
+              scale: I ? 0.94 : C || L ? 1.04 : 1
             },
             transition: {
-              duration: R.duration,
-              ease: R.easing
+              duration: P.duration,
+              ease: P.easing
             },
             style: {
-              transition: `background-color ${R.duration}s ease, border-color ${R.duration}s ease`
+              transition: `background-color ${P.duration}s ease, border-color ${P.duration}s ease`
             },
-            children: i && /* @__PURE__ */ e(
-              A.span,
+            children: t && /* @__PURE__ */ e(
+              H.span,
               {
                 initial: { scale: 0.4, opacity: 0 },
                 animate: { scale: 1, opacity: 1 },
                 exit: { scale: 0.4, opacity: 0 },
                 transition: {
                   duration: D.duration,
-                  ease: R.easing
+                  ease: P.easing
                 },
-                className: vi({ disabled: T })
+                className: ht({ disabled: T })
               }
             )
           }
         ),
         /* @__PURE__ */ e(
-          A.span,
+          H.span,
           {
             animate: {
-              x: I ? N.space.px1 : 0
+              x: I ? z.space.px1 : 0
             },
             transition: {
-              duration: R.duration,
-              ease: R.easing
+              duration: P.duration,
+              ease: P.easing
             },
             style: {
-              ...N.typeStyles.ui,
+              ...z.typeStyles.ui,
               color: T ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-primary)"
             },
-            children: t
+            children: i
           }
         )
       ]
     }
   );
-}), Pa = /* @__PURE__ */ Q(function({ label: t, min: i, max: a, step: r = 1, value: n, onChange: s }, l) {
-  const [p, c] = j(!1), u = a - i, y = `${(u <= 0 ? 0 : Math.min(Math.max((n - i) / u, 0), 1)) * 100}%`, k = G("productive"), b = G("expressive");
+}), 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");
   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)]", children: [
+    /* @__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(
           "label",
           {
             style: {
-              ...N.typeStyles.ui,
+              ...z.typeStyles.ui,
               color: "var(--semantic-color-content-primary)"
             },
-            children: t
+            children: i
           }
         ),
         /* @__PURE__ */ e(
-          A.span,
+          H.span,
           {
             className: "text-secondary shrink-0",
-            initial: { opacity: 0.72, y: N.space.px2 },
+            initial: { opacity: 0.72, y: z.space.px2 },
             animate: { opacity: 1, y: 0 },
             transition: {
               duration: k.duration,
               ease: k.easing
             },
-            style: { ...N.typeStyles.technical },
+            style: { ...z.typeStyles.mono },
             children: n
           },
           n
         )
       ] }),
-      /* @__PURE__ */ g(A.div, { className: "relative h-[var(--semantic-size-control-md)] grid items-center", children: [
+      /* @__PURE__ */ g(H.div, { className: "relative h-[var(--semantic-size-control-md)] grid items-center", children: [
         /* @__PURE__ */ e(
-          Be,
+          "div",
           {
             "aria-hidden": "true",
-            padding: "component",
-            className: "absolute [inset-inline:0] top-1/2 h-[var(--semantic-size-control-sm)] -translate-y-1/2 bg-[var(--semantic-color-border-default)] overflow-hidden",
+            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(
-              A.div,
+              H.div,
               {
                 animate: {
                   width: y,
@@ -1394,8 +1406,8 @@ const Da = /* @__PURE__ */ Q(
           {
             ref: l,
             type: "range",
-            "aria-label": t,
-            min: i,
+            "aria-label": i,
+            min: t,
             max: a,
             step: r,
             value: n,
@@ -1410,8 +1422,8 @@ const Da = /* @__PURE__ */ Q(
       ] })
     ] })
   );
-}), ye = (o) => parseFloat(o), fi = ye($e.primitive.size[40]), gi = ye($e.primitive.size[20]), Ue = ye($e.primitive.size[16]), hi = (gi - Ue) / 2, bi = fi - Ue - hi * 2, $i = /* @__PURE__ */ $(
-  "relative inline-flex items-center gap-[var(--semantic-space-subgrid-gap)] rounded-md py-[var(--semantic-space-subgrid-gap)] px-[var(--semantic-space-scale-xs)] outline-offset-2 select-none",
+}), 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__ */ $(
+  "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: {
       state: {
@@ -1424,7 +1436,7 @@ const Da = /* @__PURE__ */ Q(
     },
     defaultVariants: { state: "rest" }
   }
-), xi = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
+), kt = /* @__PURE__ */ $("absolute inset-0 m-0 opacity-0", {
   variants: {
     state: {
       rest: "cursor-pointer",
@@ -1435,7 +1447,7 @@ const Da = /* @__PURE__ */ Q(
     }
   },
   defaultVariants: { state: "rest" }
-}), yi = /* @__PURE__ */ $(
+}), St = /* @__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)]",
   {
@@ -1471,17 +1483,18 @@ const Da = /* @__PURE__ */ Q(
     ],
     defaultVariants: { on: !1, disabled: !1 }
   }
-), wi = /* @__PURE__ */ $(
+), Nt = /* @__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)]"
-), Ra = /* @__PURE__ */ Q(function({ label: t, checked: i, onChange: a, onFocus: r, onBlur: n, disabled: s, ...l }, p) {
-  const c = oe(), { visualState: u, isHover: m, isFocused: y, isPressed: k, isDisabled: b, handlers: w } = xe({
+), 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 = G("productive");
+  }), S = j("productive");
   return /* @__PURE__ */ g(
-    A.label,
+    H.label,
     {
+      tabIndex: -1,
       whileTap: b ? void 0 : { scale: 0.99 },
       transition: { duration: S.duration, ease: S.easing },
       onMouseEnter: w.onMouseEnter,
@@ -1490,16 +1503,17 @@ const Da = /* @__PURE__ */ Q(
       onPointerUp: w.onPointerUp,
       onPointerCancel: w.onPointerCancel,
       animate: {
-        y: k ? N.space.px1 : 0
+        y: k ? z.space.px1 : 0
       },
-      className: $i({ state: u }),
+      className: wt({ state: u }),
       children: [
         /* @__PURE__ */ e(
           "input",
           {
             ref: p,
             type: "checkbox",
-            checked: i,
+            role: "switch",
+            checked: t,
             disabled: b,
             onChange: (h) => a(h.target.checked),
             onFocus: (h) => {
@@ -1508,12 +1522,12 @@ const Da = /* @__PURE__ */ Q(
             onBlur: (h) => {
               w.onBlur(), n == null || n(h);
             },
-            className: d("hds-focus", xi({ state: u })),
+            className: d("hds-focus", kt({ state: u })),
             ...l
           }
         ),
         /* @__PURE__ */ e(
-          A.span,
+          H.span,
           {
             "aria-hidden": "true",
             animate: {
@@ -1526,64 +1540,67 @@ const Da = /* @__PURE__ */ Q(
             style: {
               transition: `background-color ${S.duration}s ease, border-color ${S.duration}s ease`
             },
-            className: yi({ on: i, disabled: b }),
+            className: St({ on: t, disabled: b }),
             children: /* @__PURE__ */ e(
-              A.span,
+              H.span,
               {
-                animate: { x: i ? bi : 0 },
+                animate: { x: t ? xt : 0 },
                 transition: {
                   duration: S.duration,
                   ease: S.easing
                 },
-                className: wi()
+                className: Nt()
               }
             )
           }
         ),
         /* @__PURE__ */ e(
-          A.span,
+          H.span,
           {
             className: "text-secondary",
             animate: {
-              x: k ? N.space.px1 : 0
+              x: k ? z.space.px1 : 0
             },
             transition: {
               duration: S.duration,
               ease: S.easing
             },
             style: {
-              ...N.typeStyles.ui,
+              ...z.typeStyles.ui,
               color: b ? "var(--semantic-color-content-disabled)" : "var(--semantic-color-content-primary)"
             },
-            children: t
+            children: i
           }
         )
       ]
     }
   );
-}), ki = /* @__PURE__ */ $("w-full overflow-hidden rounded-full bg-muted", {
-  variants: {
-    size: {
-      sm: "h-1",
-      md: "h-2",
-      lg: "h-3"
-    }
-  },
-  defaultVariants: { size: "md" }
-}), Te = {
-  neutral: { bar: "bg-accent", ring: "text-primary" },
+}), zt = /* @__PURE__ */ $(
+  "w-full overflow-hidden rounded-full bg-[var(--semantic-color-surface-overlay)]",
+  {
+    variants: {
+      size: {
+        sm: "h-1.5",
+        md: "h-2",
+        lg: "h-3"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Le = {
+  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" }
-}, Si = {
+}, Ct = {
   sm: { box: 16, stroke: 2 },
   md: { box: 24, stroke: 3 },
   lg: { box: 32, stroke: 3 }
-}, Va = /* @__PURE__ */ f.forwardRef(
+}, Ia = /* @__PURE__ */ v.forwardRef(
   function({
-    className: t,
-    size: i,
+    className: i,
+    size: t,
     value: a = null,
     max: r = 100,
     variant: n = "linear",
@@ -1604,13 +1621,13 @@ const Da = /* @__PURE__ */ Q(
       "data-tone": s
     };
     if (n === "circular") {
-      const { box: b, stroke: w } = Si[i ?? "md"], S = (b - w) / 2, h = 2 * Math.PI * S, C = h * (u ? 0.75 : 1 - y / 100);
+      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(
         "span",
         {
           ref: c,
           ...k,
-          className: d("inline-flex", Te[s].ring, t),
+          className: d("inline-flex", Le[s].ring, i),
           ...p,
           children: /* @__PURE__ */ g(
             "svg",
@@ -1629,7 +1646,7 @@ const Da = /* @__PURE__ */ Q(
                     cy: b / 2,
                     r: S,
                     strokeWidth: w,
-                    className: "stroke-muted"
+                    className: "stroke-[var(--semantic-color-surface-overlay)]"
                   }
                 ),
                 /* @__PURE__ */ e(
@@ -1657,14 +1674,14 @@ const Da = /* @__PURE__ */ Q(
       {
         ref: c,
         ...k,
-        className: d(ki({ size: i }), t),
+        className: d(zt({ size: t }), i),
         ...p,
         children: /* @__PURE__ */ e(
           "div",
           {
             className: d(
               "h-full rounded-full transition-[width] duration-300 ease-out",
-              Te[s].bar,
+              Le[s].bar,
               u && "animate-pulse motion-reduce:animate-none"
             ),
             style: { width: `${y}%` }
@@ -1673,7 +1690,7 @@ const Da = /* @__PURE__ */ Q(
       }
     );
   }
-), Ni = /* @__PURE__ */ $("hds-skeleton block", {
+), Dt = /* @__PURE__ */ $("hds-skeleton block", {
   variants: {
     variant: {
       text: "rounded",
@@ -1682,22 +1699,22 @@ const Da = /* @__PURE__ */ Q(
     }
   },
   defaultVariants: { variant: "rectangular" }
-}), La = /* @__PURE__ */ f.forwardRef(
-  function({ className: t, variant: i = "rectangular", width: a, height: r, style: n, ...s }, l) {
-    const p = r ?? (i === "text" ? "1em" : void 0);
+}), 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(
       "div",
       {
         ref: l,
         "aria-hidden": "true",
-        "data-variant": i,
-        className: d(Ni({ variant: i }), t),
+        "data-variant": t,
+        className: d(Dt({ variant: t }), i),
         style: { width: a, height: p, ...n },
         ...s
       }
     );
   }
-), zi = /* @__PURE__ */ $(
+), Tt = /* @__PURE__ */ $(
   "inline-block shrink-0 animate-spin rounded-full border-solid border-current border-t-transparent align-middle motion-reduce:animate-none",
   {
     variants: {
@@ -1709,21 +1726,21 @@ const Da = /* @__PURE__ */ Q(
     },
     defaultVariants: { size: "md" }
   }
-), Ia = /* @__PURE__ */ f.forwardRef(
-  function({ className: t, size: i, label: a = "Loading", ...r }, n) {
+), Aa = /* @__PURE__ */ v.forwardRef(
+  function({ className: i, size: t, label: a = "Loading", ...r }, n) {
     return /* @__PURE__ */ e(
       "span",
       {
         ref: n,
         role: "status",
         "aria-label": a,
-        "data-size": i ?? "md",
-        className: d(zi({ size: i }), t),
+        "data-size": t ?? "md",
+        className: d(Tt({ size: t }), i),
         ...r
       }
     );
   }
-), Ci = /* @__PURE__ */ $(
+), Rt = /* @__PURE__ */ $(
   "inline-flex max-w-full flex-col items-start self-start gap-[var(--semantic-space-scale-xs)] p-0",
   {
     variants: {
@@ -1734,7 +1751,7 @@ const Da = /* @__PURE__ */ Q(
     },
     defaultVariants: { fullWidth: !1 }
   }
-), Di = /* @__PURE__ */ $(
+), Pt = /* @__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: {
@@ -1749,13 +1766,14 @@ const Da = /* @__PURE__ */ Q(
     },
     defaultVariants: { variant: "primary", fullWidth: !1 }
   }
-), Ti = /* @__PURE__ */ $(
+), Lt = /* @__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: {
       size: {
-        sm: "min-h-8",
-        md: "min-h-12"
+        // Rail = item + 2 x 4px padding + 2px border: 22px -> 32px (Button sm), 30px -> 40px (Button/Input md).
+        sm: "min-h-[22px] py-0",
+        md: "min-h-[30px]"
       },
       fullWidth: {
         true: "w-full min-w-0 flex-1",
@@ -1780,9 +1798,10 @@ const Da = /* @__PURE__ */ Q(
       }
     },
     compoundVariants: [
-      // Width / min-width for the non-fullWidth case — compact shrinks to content, md fills the rail.
-      { fullWidth: !1, size: "sm", className: "w-max min-w-max flex-none" },
-      { fullWidth: !1, size: "md", className: "w-full flex-none" },
+      // Width for the non-fullWidth case: every segment hugs its content. A
+      // `w-full` segment inside the `w-fit` rail is circular (hds#522): one
+      // segment took the whole rail and the rest scrolled out of view.
+      { fullWidth: !1, className: "w-max min-w-max flex-none" },
       // Foreground color — active wins over hover/rest regardless of interaction sub-state.
       {
         active: !0,
@@ -1825,7 +1844,7 @@ const Da = /* @__PURE__ */ Q(
       disabled: !1
     }
   }
-), Pi = /* @__PURE__ */ $(
+), Vt = /* @__PURE__ */ $(
   "pointer-events-none absolute inset-0 z-0 rounded-md bg-transparent shadow-none",
   {
     variants: {
@@ -1908,9 +1927,9 @@ const Da = /* @__PURE__ */ Q(
     ],
     defaultVariants: { variant: "primary", active: !1, interaction: "rest", disabled: !1 }
   }
-), Ri = /* @__PURE__ */ $(
+), It = /* @__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)] text-xs font-medium text-[var(--semantic-color-content-secondary)]",
+  "relative z-[var(--primitive-zIndex-10)] hds-type-caption text-[var(--semantic-color-content-secondary)]",
   {
     variants: {
       variant: { primary: "", secondary: "" },
@@ -1929,7 +1948,7 @@ const Da = /* @__PURE__ */ Q(
     ],
     defaultVariants: { variant: "primary", active: !1, interaction: "rest", disabled: !1 }
   }
-), Vi = /* @__PURE__ */ $(
+), Mt = /* @__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)]",
   {
@@ -1941,13 +1960,13 @@ const Da = /* @__PURE__ */ Q(
     },
     defaultVariants: { variant: "primary" }
   }
-), Li = /* @__PURE__ */ $(
+), At = /* @__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] text-sm font-medium leading-5 text-current"
-), Ma = /* @__PURE__ */ Q(
+  "relative z-[var(--primitive-zIndex-10)] max-w-[60ch] hds-type-ui text-current"
+), Ha = /* @__PURE__ */ ee(
   function({
-    label: t,
-    "aria-label": i,
+    label: i,
+    "aria-label": t,
     options: a,
     value: r,
     onChange: n,
@@ -1957,40 +1976,40 @@ const Da = /* @__PURE__ */ Q(
     railPadding: c,
     segmentPaddingX: u
   }, m) {
-    const [y, k] = j(null), [b, w] = j(null), h = oe(), C = h === "disabled", V = G("productive"), I = s === "sm", T = l === "secondary", L = i ?? t, R = u ?? (I ? N.semantic.space.scale.xs : N.semantic.space.layout.gap);
-    return /* @__PURE__ */ g("div", { ref: m, className: Ci({ fullWidth: p }), children: [
-      t && // 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
+    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(
         "span",
         {
-          className: "max-w-[60ch] text-sm font-medium leading-5 text-[var(--semantic-color-content-primary)]",
-          style: { paddingBottom: N.semantic.space.subgrid.gap },
-          children: t
+          className: "max-w-[60ch] hds-type-ui text-[var(--semantic-color-content-primary)]",
+          style: { paddingBottom: z.semantic.space.subgrid.gap },
+          children: i
         }
       ),
       /* @__PURE__ */ e(
-        Ce.Root,
+        Te.Root,
         {
           type: "single",
           role: "radiogroup",
-          "aria-label": L,
+          "aria-label": V,
           value: r,
           onValueChange: (D) => {
             D && !C && n(D);
           },
           disabled: C,
-          className: Di({ variant: l, fullWidth: p }),
+          className: Pt({ variant: l, fullWidth: p }),
           style: { padding: c ?? "4px" },
           children: a.map((D) => {
-            const x = D.value === r, P = h ? h === "hover" && x : y === D.value, B = h === "pressed" && x, U = h ? h === "focused" && x : b === D.value, H = C, Y = B ? "pressed" : P ? "hover" : "rest", te = !!h && U;
+            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(
-              Ce.Item,
+              Te.Item,
               {
                 asChild: !0,
                 value: D.value,
-                disabled: H,
+                disabled: W,
                 children: /* @__PURE__ */ g(
-                  A.button,
+                  H.button,
                   {
                     type: "button",
                     onHoverStart: () => !h && k(D.value),
@@ -1999,27 +2018,27 @@ const Da = /* @__PURE__ */ Q(
                     onBlur: () => !h && w(null),
                     animate: T ? {
                       y: x ? 0 : B ? 1 : 0,
-                      scale: x ? 1 : P ? 0.995 : 1
+                      scale: x ? 1 : R ? 0.995 : 1
                     } : void 0,
                     transition: T ? {
-                      duration: V.duration,
-                      ease: V.easing
+                      duration: L.duration,
+                      ease: L.easing
                     } : void 0,
                     className: d(
                       "hds-focus",
-                      Ti({
+                      Lt({
                         size: s,
                         fullWidth: p,
                         variant: l,
                         active: x,
-                        interaction: Y,
-                        disabled: H
+                        interaction: G,
+                        disabled: W
                       }),
-                      te && Vi({ variant: l })
+                      te && Mt({ variant: l })
                     ),
                     style: {
-                      paddingLeft: R,
-                      paddingRight: R
+                      paddingLeft: P,
+                      paddingRight: P
                     },
                     children: [
                       /* @__PURE__ */ e(
@@ -2027,25 +2046,25 @@ const Da = /* @__PURE__ */ Q(
                         {
                           "aria-hidden": "true",
                           className: d(
-                            Pi({
+                            Vt({
                               variant: l,
                               active: x,
-                              interaction: Y,
-                              disabled: H
+                              interaction: G,
+                              disabled: W
                             })
                           )
                         }
                       ),
-                      /* @__PURE__ */ e("span", { className: Li(), children: D.label }),
+                      /* @__PURE__ */ e("span", { className: At(), children: D.label }),
                       D.description && /* @__PURE__ */ e(
                         "span",
                         {
                           className: d(
-                            Ri({
+                            It({
                               variant: l,
                               active: x,
-                              interaction: Y,
-                              disabled: H
+                              interaction: G,
+                              disabled: W
                             })
                           ),
                           children: D.description
@@ -2062,9 +2081,9 @@ const Da = /* @__PURE__ */ Q(
       )
     ] });
   }
-), Ii = /* @__PURE__ */ ne(_.Portal), Aa = /* @__PURE__ */ Q(function({
-  label: t,
-  showLabel: i = !0,
+), Ht = /* @__PURE__ */ se(O.Portal), Ea = /* @__PURE__ */ ee(function({
+  label: i,
+  showLabel: t = !0,
   options: a,
   value: r,
   onChange: n,
@@ -2073,44 +2092,46 @@ const Da = /* @__PURE__ */ Q(
   "aria-describedby": p,
   "aria-invalid": c
 }, u) {
-  const m = a.find((b) => b.value === r) ?? a[0], y = Ve(), k = i && !!t;
-  return /* @__PURE__ */ g("div", { className: "flex flex-col", children: [
-    i ? /* @__PURE__ */ e(
+  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",
       {
         id: y,
-        className: "text-secondary",
-        style: { ...N.typeStyles.caption, marginBottom: N.semantic.space.scale.xs },
-        children: t
+        className: "hds-type-ui text-foreground",
+        style: { marginBottom: z.semantic.space.scale.xs },
+        children: i
       }
     ) : null,
-    /* @__PURE__ */ g(_.Root, { value: r, onValueChange: n, children: [
+    /* @__PURE__ */ g(O.Root, { value: r, onValueChange: n, children: [
       /* @__PURE__ */ g(
-        _.Trigger,
+        O.Trigger,
         {
           ref: u,
           id: l,
-          "aria-label": t ? `${t}: ${m.label}` : m.label,
+          "aria-label": i ? `${i}: ${m.label}` : m.label,
           "aria-describedby": p,
           "aria-invalid": c,
           className: d(
-            "hds-focus group flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm",
-            "border-input bg-muted text-foreground transition-colors",
+            // h-10 is the one md control height shared with Input, Combobox and Button;
+            // the trigger had py-2 and rendered 38px (hds#522). bg-background matches Input.
+            "hds-focus group flex h-10 w-full items-center justify-between gap-2 rounded-md border px-3 hds-type-ui",
+            "border-input bg-background text-foreground transition-colors",
             "hover:border-ring data-[state=open]:border-ring"
           ),
           children: [
-            /* @__PURE__ */ e(_.Value, {}),
-            /* @__PURE__ */ e(_.Icon, { className: "flex shrink-0 -rotate-90 text-muted-foreground transition-transform group-data-[state=open]:rotate-0", children: /* @__PURE__ */ e(M, { icon: Ae, size: "small", color: "currentColor" }) })
+            /* @__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__ */ e(Ii, { container: s, children: /* @__PURE__ */ e(
-        _.Content,
+      /* @__PURE__ */ e(Ht, { container: s, children: /* @__PURE__ */ e(
+        O.Content,
         {
           position: "popper",
           sideOffset: 4,
           "aria-labelledby": k ? y : void 0,
-          "aria-label": k ? void 0 : t || m.label,
+          "aria-label": k ? void 0 : i || m.label,
           style: {
             minWidth: "var(--radix-select-trigger-width)",
             maxHeight: "var(--radix-select-content-available-height)"
@@ -2119,18 +2140,18 @@ const Da = /* @__PURE__ */ Q(
             "z-50 overflow-hidden rounded-md border",
             "border-border bg-popover text-popover-foreground shadow-md"
           ),
-          children: /* @__PURE__ */ e(_.Viewport, { className: "p-1", children: a.map((b) => /* @__PURE__ */ g(
-            _.Item,
+          children: /* @__PURE__ */ e(O.Viewport, { className: "p-1", children: a.map((b) => /* @__PURE__ */ g(
+            O.Item,
             {
               value: b.value,
               className: d(
-                "relative flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+                "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(_.ItemText, { children: b.label }),
-                /* @__PURE__ */ e(_.ItemIndicator, { className: "flex shrink-0", children: /* @__PURE__ */ e(M, { icon: re, size: "small", color: "currentColor" }) })
+                /* @__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" }) })
               ]
             },
             b.value
@@ -2139,14 +2160,14 @@ const Da = /* @__PURE__ */ Q(
       ) })
     ] })
   ] });
-}), Mi = /* @__PURE__ */ $(
+}), Et = /* @__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"
-), Ai = /* @__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)] text-xs font-medium leading-none transition-colors",
+), Bt = /* @__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: {
       selected: {
@@ -2156,80 +2177,47 @@ const Da = /* @__PURE__ */ Q(
     },
     defaultVariants: { selected: !1 }
   }
-), Ea = /* @__PURE__ */ f.forwardRef(function({ children: t, active: i = !1, className: a, type: r = "button", ...n }, s) {
+), Ba = /* @__PURE__ */ v.forwardRef(function({ children: i, active: t = !1, className: a, type: r = "button", ...n }, s) {
   return /* @__PURE__ */ e(
     "button",
     {
       ref: s,
       type: r,
-      "aria-pressed": i,
-      "data-active": i ? "true" : void 0,
-      className: d("hds-focus", Mi(), a),
+      "aria-pressed": t,
+      "data-active": t ? "true" : void 0,
+      className: d("hds-focus", Et(), a),
       ...n,
-      children: /* @__PURE__ */ e("span", { className: Ai({ selected: i }), children: t })
+      children: /* @__PURE__ */ e("span", { className: Bt({ selected: t }), children: i })
     }
   );
-}), Ei = /* @__PURE__ */ $(
-  "inline-flex items-center justify-center whitespace-nowrap align-middle select-none rounded border border-border bg-muted font-medium text-muted-foreground",
+}), Wt = /* @__PURE__ */ $(
+  "inline-flex items-center justify-center whitespace-nowrap align-middle select-none rounded border border-border bg-muted text-muted-foreground",
   {
     variants: {
       size: {
-        sm: "h-5 min-w-5 px-1 text-xs",
-        md: "h-6 min-w-6 px-1.5 text-xs",
-        lg: "h-7 min-w-7 px-2 text-sm"
+        sm: "h-5 min-w-5 px-1 hds-type-caption",
+        md: "h-6 min-w-6 px-1.5 hds-type-caption",
+        lg: "h-7 min-w-7 px-2 hds-type-ui"
       }
     },
     defaultVariants: { size: "md" }
   }
-), Ba = /* @__PURE__ */ f.forwardRef(function({ className: t, size: i, children: a, ...r }, n) {
+), Wa = /* @__PURE__ */ v.forwardRef(function({ className: i, size: t, children: a, ...r }, n) {
   return /* @__PURE__ */ e(
     "kbd",
     {
       ref: n,
-      "data-size": i ?? "md",
-      className: d(Ei({ size: i }), t),
+      "data-size": t ?? "md",
+      className: d(Wt({ size: t }), i),
       ...r,
       children: a
     }
   );
-}), Bi = /* @__PURE__ */ $("inline-block shrink-0 rounded-full", {
-  variants: {
-    tone: {
-      neutral: "bg-muted-foreground",
-      info: "bg-feedback-info",
-      success: "bg-feedback-success",
-      danger: "bg-feedback-danger",
-      warning: "bg-feedback-warning",
-      inProgress: "bg-feedback-inProgress"
-    },
-    size: {
-      sm: "h-1.5 w-1.5",
-      md: "h-2 w-2",
-      lg: "h-2.5 w-2.5"
-    }
-  },
-  defaultVariants: { tone: "neutral", size: "md" }
-}), Ha = /* @__PURE__ */ f.forwardRef(
-  function({ className: t, tone: i, size: a, label: r, ...n }, s) {
-    return pt(
-      "status-dot-deprecated",
-      "StatusDot is deprecated and is removed in 0.21.0. Use <Badge dot> with the same tone, size and label; Badge takes no style, so move a style to a wrapper or a className (MIGRATIONS.md, hds#395)."
-    ), /* @__PURE__ */ e(
-      "span",
-      {
-        ref: s,
-        "data-tone": i ?? "neutral",
-        className: d(Bi({ tone: i, size: a }), t),
-        ...r ? { role: "status", "aria-label": r } : { "aria-hidden": !0 },
-        ...n
-      }
-    );
-  }
-);
-function Pe(o) {
+});
+function Ve(o) {
   return o instanceof Date ? o : new Date(o);
 }
-const Hi = [
+const Ft = [
   ["year", 3600 * 24 * 365],
   ["month", 3600 * 24 * 30],
   ["week", 3600 * 24 * 7],
@@ -2238,91 +2226,88 @@ const Hi = [
   ["minute", 60],
   ["second", 1]
 ];
-function Wi(o, t, i) {
-  const a = new Intl.RelativeTimeFormat(i, { numeric: "auto" }), r = Math.round((o.getTime() - t.getTime()) / 1e3), n = Math.abs(r);
-  for (const [s, l] of Hi)
+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")
       return a.format(Math.round(r / l), s);
   return a.format(0, "second");
 }
-const Fi = {
+const Ot = {
   date: { dateStyle: "medium" },
   time: { timeStyle: "short" },
   datetime: { dateStyle: "medium", timeStyle: "short" }
-}, Wa = /* @__PURE__ */ f.forwardRef(
-  function({ className: t, date: i, format: a = "datetime", locale: r, now: n, ...s }, l) {
-    const p = Pe(i), c = Number.isNaN(p.getTime()) ? void 0 : p.toISOString();
+}, 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 = Wi(p, n != null ? Pe(n) : /* @__PURE__ */ new Date(), r) : u = new Intl.DateTimeFormat(r, Fi[a]).format(p), /* @__PURE__ */ e(
+    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(
       "time",
       {
         ref: l,
         dateTime: c,
         "data-format": a,
-        className: d("tabular-nums", t),
+        className: d("tabular-nums", i),
         ...s,
         children: u
       }
     );
   }
-), _i = /* @__PURE__ */ $(
-  "border-l-2 border-border pl-4 font-medium text-foreground",
-  {
-    variants: {
-      size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-), Fa = /* @__PURE__ */ f.forwardRef(
-  function({ className: t, size: i, attribution: a, children: r, ...n }, s) {
+), Gt = /* @__PURE__ */ $("border-l-2 border-border pl-4 text-foreground", {
+  variants: {
+    size: {
+      sm: "hds-type-ui",
+      md: "hds-type-body",
+      lg: "hds-type-title"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), _a = /* @__PURE__ */ v.forwardRef(
+  function({ className: i, size: t, attribution: a, children: r, ...n }, s) {
     return /* @__PURE__ */ g(
       "blockquote",
       {
         ref: s,
-        "data-size": i ?? "md",
-        className: d(_i({ size: i }), t),
+        "data-size": t ?? "md",
+        className: d(Gt({ size: t }), i),
         ...n,
         children: [
           r,
-          a != null && /* @__PURE__ */ e("footer", { className: "mt-2 text-sm font-medium text-muted-foreground", children: a })
+          a != null && /* @__PURE__ */ e("footer", { className: "mt-2 hds-type-ui text-muted-foreground", children: a })
         ]
       }
     );
   }
-), _a = /* @__PURE__ */ f.forwardRef(
-  function({ as: t = "span", className: i, children: a, ...r }, n) {
-    return /* @__PURE__ */ e(t, { ref: n, className: d("sr-only", i), ...r, 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 });
   }
-), Gi = /* @__PURE__ */ $(
-  "inline-flex -ml-2 shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2 ring-background",
+), jt = /* @__PURE__ */ $(
+  "inline-flex -ml-2 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground ring-2 ring-background",
   {
     variants: {
       size: {
-        sm: "h-8 w-8 text-xs",
-        md: "h-10 w-10 text-sm",
-        lg: "h-12 w-12 text-base"
+        sm: "h-8 w-8 hds-type-caption",
+        md: "h-10 w-10 hds-type-ui",
+        lg: "h-12 w-12 hds-type-body"
       }
     },
     defaultVariants: { size: "md" }
   }
-), Ga = /* @__PURE__ */ f.forwardRef(
-  function({ className: t, children: i, max: a, size: r, ...n }, s) {
-    const l = r ?? "md", p = f.Children.toArray(i).filter(f.isValidElement), c = a && a > 0 ? a : p.length, u = p.slice(0, c), m = p.length - u.length;
+), 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(
       "div",
       {
         ref: s,
         role: "group",
         "data-size": l,
-        className: d("flex items-center", t),
+        className: d("flex items-center", i),
         ...n,
         children: [
           u.map(
-            (y, k) => f.cloneElement(y, {
+            (y, k) => v.cloneElement(y, {
               key: y.key ?? k,
               size: l,
               className: d(
@@ -2332,7 +2317,7 @@ const Fi = {
               )
             })
           ),
-          m > 0 && /* @__PURE__ */ g("span", { "aria-label": `+${m} more`, className: Gi({ size: r }), children: [
+          m > 0 && /* @__PURE__ */ g("span", { "aria-label": `+${m} more`, className: jt({ size: r }), children: [
             "+",
             m
           ] })
@@ -2340,40 +2325,41 @@ const Fi = {
       }
     );
   }
-), Re = /* @__PURE__ */ $("", {
+), Ie = /* @__PURE__ */ $("", {
   variants: {
     orientation: {
       vertical: "flex flex-col gap-3",
-      horizontal: "grid grid-cols-2 gap-x-4 gap-y-2"
+      // The term column hugs its longest term; it was half the list (146px at 1280, hds#522).
+      horizontal: "grid grid-cols-[max-content_minmax(0,1fr)] gap-x-4 gap-y-2"
     }
   },
   defaultVariants: { orientation: "vertical" }
-}), Oa = /* @__PURE__ */ f.forwardRef(
-  function({ className: t, items: i, orientation: a = "vertical", variant: r = "plain", footer: n, ...s }, l) {
+}), ja = /* @__PURE__ */ v.forwardRef(
+  function({ className: i, items: t, orientation: a = "vertical", variant: r = "plain", footer: n, ...s }, l) {
     return r === "divided" ? /* @__PURE__ */ g(
       "dl",
       {
         ref: l,
         "data-variant": "divided",
         "data-orientation": "vertical",
-        className: d("flex flex-col overflow-hidden rounded-lg", t),
+        className: d("flex flex-col overflow-hidden rounded-lg", i),
         style: {
-          border: `${N.borderWidth.default} solid var(--semantic-color-border-default)`
+          border: `${z.borderWidth.default} solid var(--semantic-color-border-default)`
         },
         ...s,
         children: [
-          i.map((p, c) => /* @__PURE__ */ g(
+          t.map((p, c) => /* @__PURE__ */ g(
             "div",
             {
               className: "flex flex-col gap-2 p-5",
               style: c === 0 ? void 0 : {
-                borderTop: `${N.borderWidth.default} solid var(--semantic-color-border-subtle)`
+                borderTop: `${z.borderWidth.default} solid var(--semantic-color-border-subtle)`
               },
               children: [
                 /* @__PURE__ */ e(
                   "dt",
                   {
-                    className: "text-sm font-medium",
+                    className: "hds-type-ui",
                     style: { color: "var(--semantic-color-content-secondary)" },
                     children: p.term
                   }
@@ -2381,7 +2367,7 @@ const Fi = {
                 /* @__PURE__ */ e(
                   "dd",
                   {
-                    className: "m-0 text-sm",
+                    className: "m-0 hds-type-ui",
                     style: { color: "var(--semantic-color-content-primary)" },
                     children: p.description
                   }
@@ -2393,9 +2379,9 @@ const Fi = {
           n != null && /* @__PURE__ */ g(
             "div",
             {
-              className: "p-5 text-sm",
+              className: "p-5 hds-type-ui",
               style: {
-                borderTop: `${N.borderWidth.default} solid var(--semantic-color-border-subtle)`,
+                borderTop: `${z.borderWidth.default} solid var(--semantic-color-border-subtle)`,
                 background: "var(--semantic-color-surface-raised)",
                 color: "var(--semantic-color-content-secondary)"
               },
@@ -2412,10 +2398,10 @@ const Fi = {
       {
         ref: l,
         "data-orientation": a,
-        className: d(Re({ orientation: a }), t),
+        className: d(Ie({ orientation: a }), i),
         ...s,
-        children: i.map((p, c) => /* @__PURE__ */ g(f.Fragment, { children: [
-          /* @__PURE__ */ e("dt", { className: "text-sm font-medium text-muted-foreground", children: p.term }),
+        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 })
         ] }, c))
       }
@@ -2424,19 +2410,19 @@ const Fi = {
       {
         ref: l,
         "data-orientation": a,
-        className: d(Re({ orientation: a }), t),
+        className: d(Ie({ orientation: a }), i),
         ...s,
-        children: i.map((p, c) => /* @__PURE__ */ g("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ e("dt", { className: "text-sm font-medium text-muted-foreground", children: p.term }),
+        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 })
         ] }, c))
       }
     );
   }
-), ja = /* @__PURE__ */ q.forwardRef(
+), Ua = /* @__PURE__ */ X.forwardRef(
   function({
-    children: t,
-    side: i = "start",
+    children: i,
+    side: t = "start",
     sideWidth: a = "16rem",
     contentMin: r = "50%",
     gap: n = "normal",
@@ -2444,22 +2430,22 @@ const Fi = {
     style: l,
     as: p = "div"
   }, c) {
-    const [u, m] = t;
+    const [u, m] = i;
     return /* @__PURE__ */ g(
       p,
       {
         ref: c,
         className: s,
         "data-hds-component": "Sidebar",
-        "data-hds-metrics": `side:${i}`,
+        "data-hds-metrics": `side:${t}`,
         style: {
           display: "flex",
           flexWrap: "wrap",
-          gap: He(n, We),
+          gap: Fe(n, _e),
           ...l
         },
         children: [
-          /* @__PURE__ */ e("div", { style: { flexBasis: a, flexGrow: 1, order: i === "end" ? 2 : 1 }, children: u }),
+          /* @__PURE__ */ e("div", { style: { flexBasis: a, flexGrow: 1, order: t === "end" ? 2 : 1 }, children: u }),
           /* @__PURE__ */ e(
             "div",
             {
@@ -2467,7 +2453,7 @@ const Fi = {
                 flexBasis: 0,
                 flexGrow: 999,
                 minWidth: r,
-                order: i === "end" ? 1 : 2
+                order: t === "end" ? 1 : 2
               },
               children: m
             }
@@ -2476,27 +2462,27 @@ const Fi = {
       }
     );
   }
-), Ua = /* @__PURE__ */ q.forwardRef(
-  function({ children: t, threshold: i = "30rem", gap: a = "normal", limit: r, className: n, style: s, as: l = "div" }, p) {
-    const c = q.Children.toArray(t), u = r !== void 0 && c.length > r;
+), 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(
       l,
       {
         ref: p,
         className: n,
         "data-hds-component": "Switcher",
-        "data-hds-metrics": `threshold:${i}`,
+        "data-hds-metrics": `threshold:${t}`,
         style: {
           display: "flex",
           flexWrap: "wrap",
-          gap: He(a, We),
+          gap: Fe(a, _e),
           ...u && { flexDirection: "column" },
           ...s
         },
         children: c.map((m, y) => /* @__PURE__ */ e(
           "div",
           {
-            style: u ? void 0 : { flexGrow: 1, flexBasis: `calc((${i} - 100%) * 999)` },
+            style: u ? void 0 : { flexGrow: 1, flexBasis: `calc((${t} - 100%) * 999)` },
             children: m
           },
           y
@@ -2504,21 +2490,21 @@ const Fi = {
       }
     );
   }
-), Ya = /* @__PURE__ */ q.forwardRef(function({ children: t, top: i = "0", className: a, style: r, as: n = "div" }, s) {
+), qa = /* @__PURE__ */ X.forwardRef(function({ children: i, top: t = "0", className: a, style: r, as: n = "div" }, s) {
   return /* @__PURE__ */ e(
     n,
     {
       ref: s,
       className: ["hds-pin", a].filter(Boolean).join(" "),
       "data-hds-component": "Pin",
-      style: { "--hds-pin-top": i, ...r },
-      children: t
+      style: { "--hds-pin-top": t, ...r },
+      children: i
     }
   );
-}), qa = de.Root;
-function Xa({ className: o, ...t }) {
+}), Xa = fe.Root;
+function Ka({ className: o, ...i }) {
   return /* @__PURE__ */ e(
-    de.List,
+    fe.List,
     {
       className: d(
         "flex h-10 items-center gap-6 overflow-x-auto whitespace-nowrap",
@@ -2526,19 +2512,19 @@ function Xa({ className: o, ...t }) {
         "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
         o
       ),
-      ...t
+      ...i
     }
   );
 }
-function Ka({
+function Ja({
   className: o,
-  ...t
+  ...i
 }) {
   return /* @__PURE__ */ e(
-    de.Trigger,
+    fe.Trigger,
     {
       className: d(
-        "relative -mb-px inline-flex items-center px-3 py-2 text-sm transition-colors",
+        "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",
@@ -2546,23 +2532,23 @@ function Ka({
         "disabled:pointer-events-none disabled:opacity-50",
         o
       ),
-      ...t
+      ...i
     }
   );
 }
-function Ja({
+function Za({
   className: o,
-  ...t
+  ...i
 }) {
   return /* @__PURE__ */ e(
-    de.Content,
+    fe.Content,
     {
       className: d("bg-accent/5 rounded-b-md p-6 -mt-6", o),
-      ...t
+      ...i
     }
   );
 }
-const Oi = /* @__PURE__ */ $("", {
+const Ut = /* @__PURE__ */ $("", {
   variants: {
     current: {
       true: "text-foreground",
@@ -2570,17 +2556,17 @@ const Oi = /* @__PURE__ */ $("", {
     }
   },
   defaultVariants: { current: !1 }
-}), Za = /* @__PURE__ */ f.forwardRef(
-  function({ items: t, label: i = "Breadcrumb", className: a, ...r }, n) {
-    const { LinkComponent: s } = Fe();
-    return /* @__PURE__ */ e("nav", { ref: n, "aria-label": i, className: d("w-full", a), ...r, children: /* @__PURE__ */ e("ol", { className: "flex flex-wrap items-center gap-2", children: t.map((l, p) => {
-      const c = p === t.length - 1, u = !!l.href && !c;
+}), 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(
           s,
           {
             to: l.href,
-            style: N.typeStyles.ui,
+            style: z.typeStyles.ui,
             className: "hds-focus text-muted-foreground transition-colors hover:text-foreground",
             children: l.label
           }
@@ -2588,15 +2574,15 @@ const Oi = /* @__PURE__ */ $("", {
           "span",
           {
             "aria-current": c ? "page" : void 0,
-            style: N.typeStyles.ui,
-            className: Oi({ current: c }),
+            style: z.typeStyles.ui,
+            className: Ut({ current: c }),
             children: l.label
           }
         ),
         !c && /* @__PURE__ */ e(
-          M,
+          A,
           {
-            icon: be,
+            icon: xe,
             size: "small",
             color: "var(--semantic-color-content-secondary)",
             "aria-hidden": !0
@@ -2605,10 +2591,10 @@ const Oi = /* @__PURE__ */ $("", {
       ] }, `${l.label}-${p}`);
     }) }) });
   }
-), Qa = /* @__PURE__ */ f.forwardRef(
+), er = /* @__PURE__ */ v.forwardRef(
   function({
-    options: t,
-    placeholder: i = "Select…",
+    options: i,
+    placeholder: t = "Select…",
     searchPlaceholder: a = "Search…",
     emptyMessage: r = "No results",
     "aria-label": n,
@@ -2620,58 +2606,63 @@ const Oi = /* @__PURE__ */ $("", {
     // The arm-specific trio (multiple, value, onChange), still discriminated.
     ...m
   }, y) {
-    var ae;
-    const [k, b] = f.useState(!1), [w, S] = f.useState(""), [h, C] = f.useState(0), V = f.useId(), I = `${V}-list`, T = n || i, L = m.multiple ? m.value : m.value === null ? [] : [m.value], R = m.multiple ? L.flatMap((v) => t.find((z) => z.value === v) ?? []) : [], D = R.length > 0 ? `${R.length} selected` : void 0, x = m.multiple ? D : (ae = t.find((v) => v.value === m.value)) == null ? void 0 : ae.label, P = f.useMemo(() => {
-      const v = w.trim().toLowerCase();
-      return v ? t.filter((z) => z.label.toLowerCase().includes(v)) : t;
-    }, [t, w]);
-    function B(v) {
-      if (!v.disabled) {
+    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(
-            L.includes(v.value) ? L.filter((z) => z !== v.value) : [...L, v.value]
+            V.includes(f.value) ? V.filter((N) => N !== f.value) : [...V, f.value]
           );
           return;
         }
-        m.onChange(v.value), b(!1), S("");
+        m.onChange(f.value), b(!1), S("");
       }
     }
-    const U = f.useRef(null), H = f.useRef(null);
-    f.useEffect(() => {
-      var K;
-      const v = H.current;
-      if (!v || R.length === v.count || (H.current = null, R.length > v.count)) return;
-      const z = U.current, W = (z == null ? void 0 : z.querySelectorAll("li button:not(:disabled)")) ?? [];
-      (K = W[Math.min(v.index, W.length - 1)] ?? (z == null ? void 0 : z.querySelector('[role="combobox"]'))) == null || K.focus();
-    }, [R.length]);
-    function Y(v, z) {
-      m.multiple && (H.current = { index: z, count: R.length }, m.onChange(L.filter((W) => W !== v.value)));
+    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);
+      },
+      [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();
+    }, [P.length]);
+    function ce(f, N) {
+      m.multiple && (ae.current = { index: N, count: P.length }, m.onChange(V.filter((F) => F !== f.value)));
     }
-    function te(v) {
-      if (P.length !== 0) {
-        if (v.key === "ArrowDown")
-          v.preventDefault(), C((z) => (z + 1) % P.length);
-        else if (v.key === "ArrowUp")
-          v.preventDefault(), C((z) => (z - 1 + P.length) % P.length);
-        else if (v.key === "Enter") {
-          v.preventDefault();
-          const z = P[h];
-          z && B(z);
+    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);
         }
       }
     }
-    const ue = P[h] ? `${V}-opt-${P[h].value}` : void 0, ie = /* @__PURE__ */ g(
-      fe,
+    const M = R[h] ? `${L}-opt-${R[h].value}` : void 0, re = /* @__PURE__ */ g(
+      be,
       {
         open: k,
-        onOpenChange: (v) => {
-          b(v), v || S("");
+        onOpenChange: (f) => {
+          b(f), f || S("");
         },
         children: [
-          /* @__PURE__ */ e(fe.Anchor, { asChild: !0, children: /* @__PURE__ */ g(
+          /* @__PURE__ */ e(be.Anchor, { asChild: !0, children: /* @__PURE__ */ g(
             "button",
             {
-              ref: y,
+              ref: te,
               id: s,
               type: "button",
               role: "combobox",
@@ -2682,19 +2673,20 @@ const Oi = /* @__PURE__ */ $("", {
               "aria-describedby": l,
               "aria-invalid": p,
               disabled: u,
-              onClick: () => b((v) => !v),
+              onClick: () => b((f) => !f),
               className: d(
-                "hds-focus flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input",
-                "bg-background px-3 text-sm text-foreground",
+                "hds-focus flex h-10 items-center justify-between gap-2 rounded-md border border-input",
+                Q,
+                "bg-background px-3 hds-type-ui text-foreground",
                 "disabled:cursor-not-allowed disabled:opacity-50",
                 c
               ),
               children: [
-                /* @__PURE__ */ e("span", { className: d("truncate", !x && "text-muted-foreground"), children: x || i }),
+                /* @__PURE__ */ e("span", { className: d("truncate", !x && "text-muted-foreground"), children: x || t }),
                 /* @__PURE__ */ e(
-                  M,
+                  A,
                   {
-                    icon: lt,
+                    icon: Be,
                     size: "small",
                     color: "var(--semantic-color-content-secondary)",
                     "aria-hidden": !0
@@ -2704,12 +2696,19 @@ const Oi = /* @__PURE__ */ $("", {
             }
           ) }),
           /* @__PURE__ */ g(
-            fe.Content,
+            be.Content,
             {
               "aria-label": T,
               align: "start",
               className: "p-0",
               style: { width: "var(--radix-popover-trigger-width)" },
+              onInteractOutside: () => {
+                G.current = !0;
+              },
+              onCloseAutoFocus: (f) => {
+                var N;
+                G.current || (f.preventDefault(), (N = W.current) == null || N.focus()), G.current = !1;
+              },
               children: [
                 /* @__PURE__ */ e(
                   "input",
@@ -2721,15 +2720,15 @@ const Oi = /* @__PURE__ */ $("", {
                     "aria-expanded": !0,
                     "aria-controls": I,
                     "aria-autocomplete": "list",
-                    "aria-activedescendant": ue,
+                    "aria-activedescendant": M,
                     "aria-label": a,
                     placeholder: a,
-                    onChange: (v) => {
-                      S(v.target.value), C(0);
+                    onChange: (f) => {
+                      S(f.target.value), C(0);
                     },
-                    onKeyDown: te,
+                    onKeyDown: de,
                     className: d(
-                      "hds-focus h-10 w-full border-b border-border bg-transparent px-3 text-sm text-foreground",
+                      "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"
                     )
                   }
@@ -2741,65 +2740,65 @@ const Oi = /* @__PURE__ */ $("", {
                     role: "listbox",
                     "aria-label": T,
                     "aria-multiselectable": m.multiple || void 0,
-                    className: d("max-h-60 overflow-y-auto", P.length > 0 && "p-1"),
-                    children: P.map((v, z) => {
-                      const W = L.includes(v.value), X = z === h;
+                    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(
                         "button",
                         {
                           type: "button",
-                          id: `${V}-opt-${v.value}`,
+                          id: `${L}-opt-${f.value}`,
                           role: "option",
-                          "aria-selected": W,
-                          "data-active": X ? "true" : void 0,
-                          disabled: v.disabled,
-                          onMouseEnter: () => C(z),
-                          onClick: () => B(v),
+                          "aria-selected": F,
+                          "data-active": ne ? "true" : void 0,
+                          disabled: f.disabled,
+                          onMouseEnter: () => C(N),
+                          onClick: () => B(f),
                           className: d(
-                            "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none",
+                            "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"
                           ),
                           children: [
-                            /* @__PURE__ */ e("span", { className: "flex size-4 items-center justify-center", children: W ? /* @__PURE__ */ e(M, { icon: re, size: "small", color: "currentColor", "aria-hidden": !0 }) : null }),
-                            /* @__PURE__ */ e("span", { className: "truncate", children: v.label })
+                            /* @__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 })
                           ]
                         }
-                      ) }, v.value);
+                      ) }, f.value);
                     })
                   }
                 ),
-                P.length === 0 ? /* @__PURE__ */ e("p", { className: "m-1 px-2 py-6 text-center text-sm text-muted-foreground", children: r }) : null
+                R.length === 0 ? /* @__PURE__ */ e("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: U, className: "flex w-full flex-col gap-2", children: [
-      ie,
-      R.length > 0 ? /* @__PURE__ */ e("ul", { className: "flex flex-wrap gap-1", children: R.map((v, z) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ g(
+    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(
         "button",
         {
           type: "button",
-          "aria-label": `Remove ${v.label}`,
-          disabled: u || v.disabled,
-          onClick: () => Y(v, z),
+          "aria-label": `Remove ${f.label}`,
+          disabled: u || f.disabled,
+          onClick: () => ce(f, N),
           className: d(
             "hds-focus inline-flex h-7 items-center gap-1 rounded-sm border border-border bg-muted pl-2 pr-1",
-            "text-xs text-foreground hover:bg-accent hover:text-accent-foreground",
+            "hds-type-caption text-foreground hover:bg-accent hover:text-accent-foreground",
             "disabled:pointer-events-none disabled:opacity-50"
           ),
           children: [
-            v.label,
-            /* @__PURE__ */ e(M, { icon: ce, size: "small", color: "currentColor", "aria-hidden": !0 })
+            f.label,
+            /* @__PURE__ */ e(A, { icon: ve, size: "small", color: "currentColor", "aria-hidden": !0 })
           ]
         }
-      ) }, v.value)) }) : null
-    ] }) : ie;
+      ) }, f.value)) }) : null
+    ] }) : re;
   }
-), ji = /* @__PURE__ */ $(
+), Yt = /* @__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: {
@@ -2812,14 +2811,14 @@ const Oi = /* @__PURE__ */ $("", {
     },
     defaultVariants: { variant: "panel" }
   }
-), Ui = {
-  panel: N.semantic.space.sidebar.gap,
-  nav: N.semantic.space.sidebar.sectionGap,
-  card: N.semantic.space.scale.xs
-}, er = /* @__PURE__ */ q.forwardRef(
+), qt = {
+  panel: z.semantic.space.sidebar.gap,
+  nav: z.semantic.space.sidebar.sectionGap,
+  card: z.semantic.space.scale.xs
+}, ir = /* @__PURE__ */ X.forwardRef(
   function({
-    label: t,
-    defaultOpen: i = !1,
+    label: i,
+    defaultOpen: t = !1,
     open: a,
     onOpenChange: r,
     variant: n = "panel",
@@ -2829,25 +2828,25 @@ const Oi = /* @__PURE__ */ $("", {
     contentStyle: c,
     children: u
   }, m) {
-    const [y, k] = j(i), b = Ve(), w = ge(null), S = ge(null), h = a ?? y, C = h ? "open" : "closed", V = G("productive");
+    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 P, B;
+      var R, B;
       const x = !h;
-      !x && ((P = S.current) != null && P.contains(document.activeElement)) && ((B = w.current) == null || B.focus()), a === void 0 && k(x), r == null || r(x);
+      !x && ((R = S.current) != null && R.contains(document.activeElement)) && ((B = w.current) == null || B.focus()), a === void 0 && k(x), r == null || r(x);
     }
     const T = d(
       "hds-focus",
-      ji({ variant: n }),
+      Yt({ variant: n }),
       n === "nav" ? "hds-text-hover hds-bg-hover-neutral" : "",
       l
-    ), L = h ? Ui[n] : 0, R = typeof t == "string" ? /* @__PURE__ */ e(
+    ), V = h ? qt[n] : 0, P = typeof i == "string" ? /* @__PURE__ */ e(
       "span",
       {
         className: "m-0 text-current",
-        style: n === "nav" ? N.typeStyles.ui : N.typeStyles.caption,
-        children: t
+        style: n === "nav" ? z.typeStyles.ui : z.typeStyles.caption,
+        children: i
       }
-    ) : t, D = /* @__PURE__ */ g(et, { children: [
+    ) : i, D = /* @__PURE__ */ g(ii, { children: [
       /* @__PURE__ */ g(
         "button",
         {
@@ -2860,25 +2859,25 @@ const Oi = /* @__PURE__ */ $("", {
           className: T,
           style: p,
           children: [
-            /* @__PURE__ */ e("div", { className: "grid min-w-0 flex-1 items-start gap-[var(--semantic-space-subgrid-gap)]", children: R }),
+            /* @__PURE__ */ e("div", { className: "grid min-w-0 flex-1 items-start gap-[var(--semantic-space-subgrid-gap)]", children: P }),
             /* @__PURE__ */ e(
-              A.span,
+              H.span,
               {
                 "aria-hidden": "true",
                 animate: { rotate: h ? 0 : -90 },
                 transition: {
-                  duration: V.duration,
-                  ease: V.easing
+                  duration: L.duration,
+                  ease: L.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(M, { icon: Ae, size: "small", color: "currentColor" })
+                children: /* @__PURE__ */ e(A, { icon: ci, size: "small", color: "currentColor" })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ e(it, { initial: !1, children: h && /* @__PURE__ */ e(
-        A.div,
+      /* @__PURE__ */ e(ai, { initial: !1, children: h && /* @__PURE__ */ e(
+        H.div,
         {
           ref: S,
           id: b,
@@ -2886,8 +2885,8 @@ const Oi = /* @__PURE__ */ $("", {
           animate: { opacity: 1, height: "auto" },
           exit: { opacity: 0, height: 0 },
           transition: {
-            duration: V.duration,
-            ease: V.easing
+            duration: L.duration,
+            ease: L.easing
           },
           className: "overflow-hidden",
           children: /* @__PURE__ */ e(
@@ -2902,41 +2901,41 @@ const Oi = /* @__PURE__ */ $("", {
         }
       ) })
     ] });
-    return n === "nav" ? /* @__PURE__ */ e(ze, { ref: m, gap: "tight", style: { gap: L }, children: D }) : /* @__PURE__ */ e(
-      Be,
+    return n === "nav" ? /* @__PURE__ */ e(De, { ref: m, gap: "tight", style: { gap: V }, children: D }) : /* @__PURE__ */ e(
+      mi,
       {
         ref: m,
         padding: "component",
         className: n === "card" ? "overflow-hidden" : void 0,
-        children: /* @__PURE__ */ e(ze, { gap: "tight", style: { gap: L }, children: D })
+        children: /* @__PURE__ */ e(De, { gap: "tight", style: { gap: V }, children: D })
       }
     );
   }
 );
-function se(o, t) {
-  return Array.from({ length: t - o + 1 }, (i, a) => o + a);
+function ue(o, i) {
+  return Array.from({ length: i - o + 1 }, (t, a) => o + a);
 }
-function Yi(o, t, i = 1) {
-  const a = i * 2 + 5;
-  if (t <= a) return se(1, t);
-  const r = Math.max(o - i, 1), n = Math.min(o + i, t), s = r > 2, l = n < t - 1;
-  return !s && l ? [...se(1, i * 2 + 3), "ellipsis", t] : s && !l ? [1, "ellipsis", ...se(t - (i * 2 + 2), t)] : [1, "ellipsis", ...se(r, n), "ellipsis", t];
+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];
 }
-const tr = /* @__PURE__ */ f.forwardRef(
-  function({ page: t, count: i, onPageChange: a, siblingCount: r = 1, label: n = "Pagination", className: s, ...l }, p) {
-    if (i <= 1) return null;
-    const c = Yi(t, i, r), u = (m) => a(Math.max(1, Math.min(i, m)));
+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(
-        le,
+        me,
         {
           iconOnly: !0,
           size: "sm",
           variant: "tertiary",
           "aria-label": "Previous page",
-          disabled: t <= 1,
-          onClick: () => u(t - 1),
-          iconLeft: /* @__PURE__ */ e(M, { icon: ct, size: "small" })
+          disabled: i <= 1,
+          onClick: () => u(i - 1),
+          iconLeft: /* @__PURE__ */ e(A, { icon: di, size: "small" })
         }
       ) }),
       c.map(
@@ -2949,32 +2948,33 @@ const tr = /* @__PURE__ */ f.forwardRef(
           },
           `ellipsis-${y}`
         ) : /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-          le,
+          me,
           {
-            variant: m === t ? "secondary" : "tertiary",
+            variant: m === i ? "secondary" : "tertiary",
             size: "sm",
+            className: "hds-touch-target",
             "aria-label": `Page ${m}`,
-            "aria-current": m === t ? "page" : void 0,
+            "aria-current": m === i ? "page" : void 0,
             onClick: () => u(m),
             children: m
           }
         ) }, m)
       ),
       /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-        le,
+        me,
         {
           iconOnly: !0,
           size: "sm",
           variant: "tertiary",
           "aria-label": "Next page",
-          disabled: t >= i,
-          onClick: () => u(t + 1),
-          iconLeft: /* @__PURE__ */ e(M, { icon: be, size: "small" })
+          disabled: i >= t,
+          onClick: () => u(i + 1),
+          iconLeft: /* @__PURE__ */ e(A, { icon: xe, size: "small" })
         }
       ) })
     ] }) });
   }
-), qi = /* @__PURE__ */ $("", {
+), Kt = /* @__PURE__ */ $("", {
   variants: {
     tone: {
       neutral: "text-muted-foreground",
@@ -2985,41 +2985,41 @@ const tr = /* @__PURE__ */ f.forwardRef(
     }
   },
   defaultVariants: { tone: "neutral" }
-}), Ye = /* @__PURE__ */ f.createContext(null);
-function ir() {
-  const o = f.useContext(Ye);
+}), 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;
 }
-const Xi = {
-  neutral: he,
-  info: he,
-  success: Me,
-  danger: Ie,
-  warning: Le
+const Jt = {
+  neutral: ye,
+  info: ye,
+  success: Ee,
+  danger: He,
+  warning: Ae
 };
-function ar({
+function rr({
   children: o,
-  duration: t = 5e3,
-  swipeDirection: i = "right"
+  duration: i = 5e3,
+  swipeDirection: t = "right"
 }) {
-  const [a, r] = f.useState([]), n = f.useRef(0), s = f.useCallback((c) => {
+  const [a, r] = v.useState([]), n = v.useRef(0), s = v.useCallback((c) => {
     r((u) => u.filter((m) => m.id !== c));
-  }, []), l = f.useCallback((c) => {
+  }, []), l = v.useCallback((c) => {
     const u = `toast-${n.current += 1}`;
     return r((m) => [...m, { ...c, id: u }]), u;
-  }, []), p = f.useMemo(
+  }, []), p = v.useMemo(
     () => ({ toast: l, dismiss: s }),
     [l, s]
   );
-  return /* @__PURE__ */ e(Ye.Provider, { value: p, children: /* @__PURE__ */ g(J.Provider, { duration: t, swipeDirection: i, children: [
+  return /* @__PURE__ */ e(Xe.Provider, { value: p, children: /* @__PURE__ */ g(J.Provider, { duration: i, swipeDirection: t, children: [
     o,
     a.map((c) => {
       const u = c.tone ?? "neutral";
       return /* @__PURE__ */ g(
         J.Root,
         {
-          duration: c.duration ?? t,
+          duration: c.duration ?? i,
           onOpenChange: (m) => {
             m || s(c.id);
           },
@@ -3030,18 +3030,18 @@ function ar({
           ),
           children: [
             /* @__PURE__ */ e(
-              M,
+              A,
               {
-                icon: Xi[u],
+                icon: Jt[u],
                 size: "small",
                 color: "currentColor",
-                className: qi({ tone: u }),
+                className: Kt({ tone: u }),
                 "aria-hidden": !0
               }
             ),
             /* @__PURE__ */ g("div", { className: "flex min-w-0 flex-col gap-1", children: [
-              /* @__PURE__ */ e(J.Title, { className: "text-sm font-medium", children: c.title }),
-              c.description ? /* @__PURE__ */ e(J.Description, { className: "text-sm text-muted-foreground", children: c.description }) : null
+              /* @__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__ */ e(
               J.Close,
@@ -3051,7 +3051,7 @@ function ar({
                   "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(M, { icon: ce, size: "small", color: "currentColor", "aria-hidden": !0 })
+                children: /* @__PURE__ */ e(A, { icon: ve, size: "small", color: "currentColor", "aria-hidden": !0 })
               }
             )
           ]
@@ -3070,95 +3070,94 @@ function ar({
     )
   ] }) });
 }
-const Ki = "https://www.designtokens.org/schemas/2025.10/format.json", Ji = "Adrian Milsap hirobius design tokens - W3C DTCG 2025.10 compliant, Figma SDS architecture", Zi = /* @__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 display/h1/h2/h3 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."}},"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."}},"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":{"$type":"spring","$value":{"type":"spring","stiffness":300,"damping":20,"mass":1},"$description":"Spring response defined by stiffness, damping, and mass parameters."}},"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"}}}}`), Qi = /* @__PURE__ */ JSON.parse(`{"motion":{"$type":"motion","productive":{"$value":{"duration":"{primitive.duration.short}","easing":"{primitive.easing.decelerate}"},"$description":"For micro-interactions and status changes. No deformation."},"expressive":{"$value":{"duration":"{primitive.duration.medium}","easing":"{primitive.easing.elastic}"},"$description":"For teaching moments and significant UI entries. Includes physics-based squish."},"spatial":{"$value":{"duration":"{primitive.duration.long}","easing":"{primitive.easing.emphasized}"},"$description":"For elements traveling long distances across the viewport."},"exit":{"$value":{"duration":"{primitive.duration.instant}","easing":"{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":"8-style Swiss-canon type ramp: display, h1–h3, body, small, caption, mono.","display":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.6xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.none}"},"$description":"Display headline. 60px / Satoshi bold 700 / leading-none (hds#283: was 72px/5xl).","$extensions":{"com.figma.variables":{"fontSize":"clamp(40px, 8vw, 60px)","note":"Figma stores the 60px desktop-max static value. Browser CSS overrides with fluid scaling (40px min → 60px max). See src/styles/theme.css."}}},"h1":{"$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.tight}"},"$description":"Primary section headings (h1). 48px / Satoshi bold 700 / leading-tight (hds#283: rung renamed 4xl→5xl, px unchanged).","$extensions":{"com.figma.variables":{"fontSize":"clamp(32px, 6vw, 48px)","note":"Figma stores the 48px desktop-max static value. Browser CSS overrides with fluid scaling (32px min → 48px max). See src/styles/theme.css."}}},"h2":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.3xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"40px"},"$description":"Secondary section headings (h2). Satoshi bold 700, 30px, line-height 40px (hds#283: rung renamed, was 42px).","$extensions":{"com.figma.variables":{"fontSize":"clamp(24px, 3.5vw, 30px)","note":"Figma stores the 30px desktop-max static value. Browser CSS overrides with fluid scaling (24px min → 30px max). See src/styles/theme.css."}}},"h3":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"28px"},"$description":"Component and card headers (h3). 20px / Satoshi bold 700 500 / leading-snug (hds#283: rung renamed lg→xl, px unchanged).","$extensions":{"com.figma.variables":{"fontSize":"clamp(18px, 2vw, 20px)","note":"Figma stores the 20px desktop-max static value. Browser CSS overrides with fluid scaling (18px min → 20px max). See src/styles/theme.css."}}},"body":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.base}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"24px","maxWidth":{"value":60,"unit":"ch"}},"$description":"Body prose. Satoshi medium, 16px, line-height 24px, max 60ch measure (hds#283: was 17px/28px)."},"ui":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.sm}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"20px","maxWidth":{"value":60,"unit":"ch"}},"$description":"UI text for nav, labels, captions. Satoshi medium, 14px, line-height 20px (hds#283: was 15px/24px)."},"caption":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"16px"},"$description":"Caption / helper text. Satoshi medium, 12px, line-height 16px. Matches the Figma typography/caption text style; now sourced from primitive.xs (hds#283)."},"eyebrow":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.caps}","lineHeight":"16px","textTransform":"uppercase"},"$description":"Eyebrow / kicker label. Satoshi medium, 12px, caps tracking, uppercase (hds#283: was 13px/20px)."},"mono":{"$value":{"fontFamily":"{primitive.typography.family.mono}","fontSize":"{primitive.typography.size.sm}","fontWeight":"{primitive.typography.weight.regular}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"20px","maxWidth":{"value":60,"unit":"ch"}},"$description":"Monospace for code, token names, shortcuts. Geist Mono regular, 14px (hds#283: repointed xs→sm; xs alone would give 12px)."},"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":{"$type":"elevation","flat":{"$value":{"surface":"{semantic.color.surface.page}","shadow":null,"border":"{semantic.color.border.subtle}"},"$description":"Flat surface (no shadow, hairline border) for embedded panels."},"raised":{"$value":{"surface":"{semantic.color.surface.raised}","shadow":"{semantic.shadow.subtle}","border":null},"$description":"Resting card / panel elevation."},"floating":{"$value":{"surface":"{semantic.color.surface.raised}","shadow":"{semantic.shadow.floating}","border":null},"$description":"Hover, menu, and popover elevation."},"overlay":{"$value":{"surface":"{semantic.color.surface.overlay}","shadow":"{semantic.shadow.overlay}","border":null},"$description":"Modal, dialog, and drawer elevation."}},"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."}}}`), ea = { 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: "dimension", $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." } } } }, ta = { $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." } }, ia = {
-  $schema: Ki,
-  $description: Ji,
-  primitive: Zi,
-  semantic: Qi,
-  component: ea,
-  role: ta
-}, rr = ia;
+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;
 export {
-  ua as Alert,
-  sr as AlertDialog,
-  ma as Avatar,
+  va as Alert,
+  lr as AlertDialog,
+  fa as Avatar,
   Ga as AvatarGroup,
-  va as Badge,
-  Fa as Blockquote,
-  fa as Box,
-  Za as Breadcrumb,
-  le as Button,
-  ga as Callout,
-  lr as Card,
-  cr as CardBody,
-  dr as CardDescription,
-  pr as CardFooter,
-  ur as CardHeader,
-  mr as CardMetric,
-  vr as CardProgress,
-  fr as CardTitle,
-  Da as Checkbox,
-  Qa as Combobox,
-  gr as Container,
-  xa as Dialog,
-  St as DialogClose,
-  Nt as DialogContent,
-  Tt as DialogDescription,
-  Ct as DialogFooter,
-  zt as DialogHeader,
-  Ge as DialogOverlay,
-  _e as DialogPortal,
-  Dt as DialogTitle,
-  kt as DialogTrigger,
-  er as Disclosure,
-  ya as Divider,
-  hr as EmptyState,
-  ha as Field,
-  br as Grid,
-  kr as HdsRouterProvider,
-  $r as HdsThemeProvider,
-  M as Icon,
-  Sa as InlineCode,
-  Na as InlineLink,
-  za as Input,
-  Ba as Kbd,
-  wa as Menu,
-  Oa as MetadataList,
+  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 Icon,
+  za as InlineCode,
+  Ca as InlineLink,
+  Da as Input,
+  Wa as Kbd,
+  Sa as Menu,
+  ja as MetadataList,
   tr as Pagination,
-  Ya as Pin,
-  fe as Popover,
-  Va as Progress,
-  Ta as Radio,
-  Ma as SegmentedControl,
-  Aa as Select,
-  ja as Sidebar,
-  La as Skeleton,
-  Pa as Slider,
-  Ia as Spinner,
-  ze as Stack,
-  ba as Stat,
-  Ha as StatusDot,
-  $a as StatusListItem,
-  Be as Surface,
-  Ua as Switcher,
+  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,
-  qa as Tabs,
-  Ja as TabsContent,
-  Xa as TabsList,
-  Ka as TabsTrigger,
-  Ea as Tag,
-  Ee as Text,
-  Ca as Textarea,
-  Wa as Timestamp,
-  ar as ToastProvider,
-  Ra as Toggle,
-  ka as Tooltip,
-  _a as VisuallyHidden,
+  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,
   d as cn,
-  N as hds,
-  Yi as paginationRange,
-  rr as tokens,
-  Fe as useHdsRouter,
-  yr as useHdsTheme,
-  ir as useToast
+  z as hds,
+  Xt as paginationRange,
+  nr as tokens,
+  Oe as useHdsRouter,
+  wr as useHdsTheme,
+  ar as useToast
 };