@hirobius/design-system 0.8.1 → 0.10.0

package/dist/hirobius-ui.js

@@ -1,5 +1,5 @@
-var Pt = Object.defineProperty;
-var zt = (t, e, r) => e in t ? Pt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var Tt = Object.defineProperty;
+var zt = (t, e, r) => e in t ? Tt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
 var We = (t, e, r) => zt(t, typeof e != "symbol" ? e + "" : e, r);
 import { jsx as a, jsxs as h, Fragment as Be } from "react/jsx-runtime";
 import * as $ from "react";
@@ -376,7 +376,7 @@ function di({
   context: v = "default",
   loading: k = "lazy"
 }) {
-  const [D, C] = W(!1), S = n && typeof n == "object" ? n : {}, [z, L] = W(!1), [T, x] = W(!1), [q, H] = W(0), [E, N] = W(0), _ = v === "default" && y && !!l;
+  const [D, C] = W(!1), S = n && typeof n == "object" ? n : {}, [z, L] = W(!1), [P, x] = W(!1), [q, H] = W(0), [E, N] = W(0), _ = v === "default" && y && !!l;
   if (!D)
     return _ ? /* @__PURE__ */ h(
       "div",
@@ -394,15 +394,15 @@ function di({
         tabIndex: 0,
         "aria-label": e,
         onClick: l,
-        onKeyDown: (P) => {
-          (P.key === "Enter" || P.key === " ") && l && (P.preventDefault(), l(P));
+        onKeyDown: (T) => {
+          (T.key === "Enter" || T.key === " ") && l && (T.preventDefault(), l(T));
         },
         onMouseEnter: () => L(!0),
-        onMouseMove: (P) => {
-          H(P.clientX), N(P.clientY), u == null || u(P);
+        onMouseMove: (T) => {
+          H(T.clientX), N(T.clientY), u == null || u(T);
         },
-        onMouseLeave: (P) => {
-          L(!1), g == null || g(P);
+        onMouseLeave: (T) => {
+          L(!1), g == null || g(T);
         },
         onMouseDown: m,
         onMouseUp: f,
@@ -424,7 +424,7 @@ function di({
             Ue,
             {
               mode: "centered",
-              visible: T && !z,
+              visible: P && !z,
               label: b
             }
           ),
@@ -452,8 +452,8 @@ function di({
           className: o,
           draggable: s,
           onClick: l,
-          onKeyDown: l ? (P) => {
-            P.key === "Enter" && l(P);
+          onKeyDown: l ? (T) => {
+            T.key === "Enter" && l(T);
           } : void 0,
           onMouseDown: m,
           onMouseMove: u,
@@ -488,15 +488,15 @@ function di({
       flexShrink: 0
     };
   else {
-    let P, j;
+    let T, j;
     if (n.maxHeight && !n.width) {
       const U = parseInt(n.maxHeight) || pe;
-      j = U, P = Math.round(U * A);
+      j = U, T = Math.round(U * A);
     } else if (n.maxWidth && !n.height) {
       const U = parseInt(n.maxWidth) || pe;
-      P = U, j = Math.round(U / A);
-    } else n.width === "100%" ? (P = 0, j = 0) : Y ? (P = pe, j = Math.round(pe / A)) : (j = pe, P = Math.round(pe * A));
-    Z = P === 0 ? { width: "100%", aspectRatio: `${A}`, display: "block" } : { width: P, height: j, display: "block", flexShrink: 0 };
+      T = U, j = Math.round(U / A);
+    } else n.width === "100%" ? (T = 0, j = 0) : Y ? (T = pe, j = Math.round(pe / A)) : (j = pe, T = Math.round(pe * A));
+    Z = T === 0 ? { width: "100%", aspectRatio: `${A}`, display: "block" } : { width: T, height: j, display: "block", flexShrink: 0 };
   }
   return /* @__PURE__ */ a(
     "div",
@@ -516,8 +516,8 @@ function di({
       role: l ? "button" : void 0,
       tabIndex: l ? 0 : void 0,
       onClick: l,
-      onKeyDown: l ? (P) => {
-        (P.key === "Enter" || P.key === " ") && l(P);
+      onKeyDown: l ? (T) => {
+        (T.key === "Enter" || T.key === " ") && l(T);
       } : void 0,
       "aria-label": e,
       children: r && /* @__PURE__ */ a(
@@ -584,7 +584,8 @@ const hr = $.forwardRef(function({ className: e, size: r, src: n, alt: o, initia
         info: "bg-feedback-bg-info text-feedback-info",
         success: "bg-feedback-bg-success text-feedback-success",
         danger: "bg-feedback-bg-danger text-feedback-danger",
-        warning: "bg-feedback-bg-warning text-feedback-warning"
+        warning: "bg-feedback-bg-warning text-feedback-warning",
+        inProgress: "bg-feedback-bg-inProgress text-feedback-inProgress"
       }
     },
     defaultVariants: { tone: "neutral" }
@@ -609,6 +610,20 @@ const hr = $.forwardRef(function({ className: e, size: r, src: n, alt: o, initia
         secondary: "border border-input bg-background text-foreground hover:bg-accent hover:border-ring",
         tertiary: "text-foreground hover:bg-accent"
       },
+      // Semantic action color. `neutral` (default) keeps the variant's own
+      // colors; the status tones apply a token-driven tonal fill (tinted
+      // surface + matching feedback text) that clears AA in BOTH light and dark
+      // because the fg/bg feedback token pair flips together per theme. `!`
+      // (important) lets the tone override whichever `variant` colors are set,
+      // so `tone` composes with any variant. Drives the destructive/status
+      // actions consumers previously kept on MUI.
+      tone: {
+        neutral: "",
+        danger: "!border-transparent !bg-feedback-bg-danger !text-feedback-danger hover:!brightness-95 dark:hover:!brightness-110",
+        success: "!border-transparent !bg-feedback-bg-success !text-feedback-success hover:!brightness-95 dark:hover:!brightness-110",
+        warning: "!border-transparent !bg-feedback-bg-warning !text-feedback-warning hover:!brightness-95 dark:hover:!brightness-110",
+        info: "!border-transparent !bg-feedback-bg-info !text-feedback-info hover:!brightness-95 dark:hover:!brightness-110"
+      },
       size: {
         sm: "h-8 px-3 text-xs [&_svg]:size-3.5",
         md: "h-10 px-4 py-2 text-sm [&_svg]:size-4",
@@ -626,6 +641,7 @@ const hr = $.forwardRef(function({ className: e, size: r, src: n, alt: o, initia
     ],
     defaultVariants: {
       variant: "secondary",
+      tone: "neutral",
       size: "md",
       iconOnly: !1
     }
@@ -633,48 +649,51 @@ const hr = $.forwardRef(function({ className: e, size: r, src: n, alt: o, initia
 ), Ce = $.forwardRef(function({
   className: e,
   variant: r,
-  size: n,
-  iconOnly: o = !1,
-  asChild: s = !1,
-  label: d,
-  loading: c = !1,
-  iconLeft: p,
-  iconRight: l,
-  disabled: m,
-  children: u,
-  type: f = "button",
-  ...g
-}, y) {
-  const b = m || c, v = u ?? d;
-  return s ? /* @__PURE__ */ a(
+  tone: n,
+  size: o,
+  iconOnly: s = !1,
+  asChild: d = !1,
+  label: c,
+  loading: p = !1,
+  iconLeft: l,
+  iconRight: m,
+  disabled: u,
+  children: f,
+  type: g = "button",
+  ...y
+}, b) {
+  const v = u || p, k = f ?? c;
+  return d ? /* @__PURE__ */ a(
     _t,
     {
-      ref: y,
-      className: w(Xe({ variant: r, size: n, iconOnly: o, className: e })),
-      "aria-disabled": b || void 0,
-      "aria-busy": c || void 0,
-      "data-state": c ? "loading" : void 0,
+      ref: b,
+      className: w(Xe({ variant: r, tone: n, size: o, iconOnly: s, className: e })),
+      "aria-disabled": v || void 0,
+      "aria-busy": p || void 0,
+      "data-state": p ? "loading" : void 0,
       "data-variant": r ?? void 0,
-      "data-size": n ?? void 0,
-      ...g,
-      children: u
+      "data-tone": n ?? void 0,
+      "data-size": o ?? void 0,
+      ...y,
+      children: f
     }
   ) : /* @__PURE__ */ h(
     "button",
     {
-      ref: y,
-      type: f,
-      disabled: b,
-      "aria-busy": c || void 0,
-      "data-state": c ? "loading" : void 0,
+      ref: b,
+      type: g,
+      disabled: v,
+      "aria-busy": p || void 0,
+      "data-state": p ? "loading" : void 0,
       "data-variant": r ?? void 0,
-      "data-size": n ?? void 0,
-      className: w(Xe({ variant: r, size: n, iconOnly: o, className: e })),
-      ...g,
+      "data-tone": n ?? void 0,
+      "data-size": o ?? void 0,
+      className: w(Xe({ variant: r, tone: n, size: o, iconOnly: s, className: e })),
+      ...y,
       children: [
-        c ? /* @__PURE__ */ a(pt, { className: "animate-spin", "aria-hidden": "true" }) : p,
-        !o && v,
-        !c && !o && l
+        p ? /* @__PURE__ */ a(pt, { className: "animate-spin", "aria-hidden": "true" }) : l,
+        !s && k,
+        !p && !s && m
       ]
     }
   );
@@ -869,9 +888,9 @@ const Si = {
   function({ className: e, children: r, ...n }, o) {
     return /* @__PURE__ */ a(M, { ref: o, variant: "heading3", className: e, ...n, children: r });
   }
-), Ti = $.forwardRef(function({ className: e, children: r, ...n }, o) {
+), Pi = $.forwardRef(function({ className: e, children: r, ...n }, o) {
   return /* @__PURE__ */ a(M, { ref: o, variant: "caption", className: w("text-muted-foreground", e), ...n, children: r });
-}), Pi = $.forwardRef(
+}), Ti = $.forwardRef(
   function({ className: e, ...r }, n) {
     return /* @__PURE__ */ a("div", { ref: n, className: w("p-6 pt-0", e), ...r });
   }
@@ -981,8 +1000,8 @@ const Si = {
 }), ce = ki;
 ce.Header = Ci;
 ce.Title = Li;
-ce.Description = Ti;
-ce.Body = Pi;
+ce.Description = Pi;
+ce.Body = Ti;
 ce.Footer = zi;
 ce.Progress = qi;
 ce.Metric = Ii;
@@ -1448,7 +1467,7 @@ function Ze(t, e) {
     (o, s) => o.kind === "plain" ? /* @__PURE__ */ a("span", { children: o.value }, s) : /* @__PURE__ */ a("span", { style: { color: Ai(o.kind) }, children: o.value }, s)
   );
 }
-const Mi = /* @__PURE__ */ JSON.parse(`{"Alert":{"filePath":"src/app/components/alert.tsx","description":"Alert - compact feedback surface with contextual severity.","category":"Feedback","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"Main alert message content."},{"name":"title","type":"string","required":false,"description":"Optional heading shown above the body copy."},{"name":"tone","type":"'success' | 'danger' | 'warning' | 'info'","default":"info","required":false,"description":"Feedback tone that controls icon, border, and surface treatment."}],"observedTokens":[{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":72,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.motion.productive.easing","sourceLine":72,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":86,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":95,"sourceSnippet":"...hds.typeStyles.caption,"}]},"Avatar":{"filePath":"src/app/components/avatar.tsx","description":"Circular avatar. Renders the image when available, else initials from \`alt\`.","category":"Display","hidden":false,"props":[{"name":"alt","type":"string","required":true,"description":"Required descriptive alt / accessible name (e.g. the person's name)."},{"name":"initials","type":"string","required":false,"description":"Explicit initials. Falls back to the first letters derived from \`alt\`."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"src","type":"string","required":false,"description":"Image source. When absent or it fails to load, the initials fallback shows."}],"observedTokens":[]},"Badge":{"filePath":"src/app/components/badge.tsx","description":"Compact metadata/status chip. Tone is the only styling input.","category":"Feedback","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"span","required":false,"description":"Element rendered as the badge wrapper. Defaults to 'span'."},{"name":"tone","type":"\\"success\\" | \\"danger\\" | \\"warning\\" | \\"info\\" | \\"neutral\\"","required":false,"description":""}],"observedTokens":[]},"Breadcrumb":{"filePath":"src/app/components/breadcrumb.tsx","description":"Breadcrumb trail. Links route through the HDS router seam (plain anchors with no router, client-side nav when a router adapter is provided). The final item is marked aria-current=\\"page\\".","category":"Navigation","hidden":false,"props":[{"name":"items","type":"BreadcrumbItem[]","required":true,"description":"Ordered trail from root → current. The last item renders as the current page."},{"name":"label","type":"string","default":"Breadcrumb","required":false,"description":"Accessible label for the nav landmark."}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":56,"sourceSnippet":"style={hds.typeStyles.ui}"}]},"Callout":{"filePath":"src/app/components/callout.tsx","description":"Tone-driven side-rule callout for status, quotes, hypotheses.","category":"Feedback","hidden":false,"props":[{"name":"italic","type":"boolean","default":"false","required":false,"description":"Italicize the body content (quote / pull-quote pattern)."},{"name":"tone","type":"'accent' | 'info' | 'success' | 'warning' | 'danger'","default":"info","required":false,"description":"Tone — drives the left rule color and bg tint."}],"observedTokens":[]},"Card":{"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card tone=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. Tone prop: 'default' (neutral border) | 'accent' (border-accent + raised bg) for highlighted variants like \\"recommended package\\", or feedback tones for status-driven cards. Tone replaces hand-rolled \`pkgHighlight\`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + \`padding=\\"none\\"\`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass \`className=\\"shadow-...\\"\` for a hover/floating treatment on interactive cards.","category":"Display","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","required":false,"description":"Render-as element for the root wrapper."},{"name":"bordered","type":"boolean","default":"false","required":false,"description":"Opt in to a neutral 1px border on the default tone. Use for genuinely discrete standalone records in sparse layouts where containment helps legibility. Default false — repeated cards in grids should stay borderless and rely on whitespace, rails, or section dividers."},{"name":"gap","type":"GapOption","default":"tight","required":false,"description":"Legacy gap prop for the root flex container."},{"name":"noPadding","type":"boolean","default":"false","required":false,"description":"Legacy convenience flag that removes inner padding."},{"name":"padding","type":"PaddingOption","default":"component","required":false,"description":"Legacy padding prop for raw-children cards. Use \`none\` when composing parts."},{"name":"tone","type":"'default' | 'accent' | 'success' | 'warning' | 'danger'","default":"default","required":false,"description":"Visual tone — controls border color/weight. Default is BORDERLESS; \`accent\` for highlighted entries (e.g. recommended package); semantic tones for status-driven cards (border IS the signal). For a neutral-bordered card without semantic meaning, pass \`bordered\` instead of overloading tone."}],"observedTokens":[{"raw":"hds.space","sourceLine":52,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":308,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":319,"sourceSnippet":"transition: \`width \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":327,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":368,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":378,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CinematicLink":{"filePath":"src/app/components/cinematic-link.tsx","description":"CinematicLink - cinematic editorial link treatment for portfolio surfaces.","category":"Branding","hidden":false,"props":[{"name":"href","type":"string","required":true,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":24,"sourceSnippet":"...hds.typeStyles.ui,"}]},"CodeBlock":{"filePath":"src/app/components/code-block.tsx","description":"CodeBlock - code display with copy button and optional collapsible toggle.","category":"Display","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Optional class hook for layout-specific styling."},{"name":"code","type":"string","required":true,"description":"Code string displayed in the block."},{"name":"collapsible","type":"boolean","default":"false","required":false,"description":"When true (block variant only), code is hidden behind a \\"Show code\\" toggle. Off by default to preserve backward compatibility for existing consumers."},{"name":"defaultExpanded","type":"boolean","default":"false","required":false,"description":"When \`collapsible\`, controls the initial state. Defaults to collapsed."},{"name":"filename","type":"string","required":false,"description":"Optional filename label shown in the header."},{"name":"language","type":"string","required":false,"description":"Optional language label shown in the header (also drives syntax coloring)."},{"name":"truncateFromStart","type":"boolean","default":"false","required":false,"description":"When true, inline code truncates from the start rather than the end."},{"name":"variant","type":"\\"inline\\" | \\"block\\"","default":"block","required":false,"description":"Visual presentation mode for block snippets vs inline single-line code."}],"observedTokens":[{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":18,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.size[32]","tokenPath":"primitive.size.32","sourceLine":21,"sourceSnippet":"minHeight: hds.size[32],"},{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":22,"sourceSnippet":"border: \`\${hds.borderWidth.default} solid var(--semantic-color-border-default)\`,"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":24,"sourceSnippet":"borderRadius: hds.borderRadius.action,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":28,"sourceSnippet":"paddingLeft: hds.semantic.space.component.gap,"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":43,"sourceSnippet":"transition: \`background-color \${hds.motion.productive.duration}s ease, color \${hds.motion.productive.duration}s ease, transform \${hds.motion.productive.duration}s ease\`,"},{"raw":"hds.semantic.space.component.padding","tokenPath":"semantic.space.component.padding","sourceLine":49,"sourceSnippet":"paddingLeft: hds.semantic.space.component.padding,"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":85,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.semantic.space.section.stack","tokenPath":"semantic.space.section.stack","sourceLine":236,"sourceSnippet":"padding: hds.semantic.space.section.stack,"}]},"Combobox":{"filePath":"src/app/components/combobox.tsx","description":"Combobox — searchable single-select (Popover + filtered listbox). A select-with-search built on the HDS Popover. The trigger shows the current selection; opening reveals a search field that filters the option list. Full keyboard support (↑/↓ to move, Enter to choose, Esc/outside-click to close) and listbox/option ARIA. Controlled via \`value\` + \`onChange\`. <Combobox options={[{ value: 'us', label: 'United States' }, …]} value={country} onChange={setCountry} placeholder=\\"Select a country\\" />","category":"Inputs","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":"Accessible label for the trigger (when not labelled by a <Field>)."},{"name":"className","type":"string","required":false,"description":""},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"emptyMessage","type":"string","default":"No results","required":false,"description":"Shown when the filter matches no options."},{"name":"onChange","type":"(value: string) => void","required":true,"description":"Fired with the chosen option's value."},{"name":"options","type":"ComboboxOption[]","required":true,"description":"Selectable options."},{"name":"placeholder","type":"string","default":"Select…","required":false,"description":"Trigger text when nothing is selected."},{"name":"searchPlaceholder","type":"string","default":"Search…","required":false,"description":"Placeholder for the search field."},{"name":"value","type":"string","required":true,"description":"Currently selected value, or null when nothing is chosen."}],"observedTokens":[]},"ComponentInstanceMatrix":{"filePath":"src/app/components/component-instance-matrix.tsx","description":"ComponentInstanceMatrix — responsive specimen matrix for variant and state parity.","category":"Utilities","hidden":false,"props":[{"name":"componentName","type":"string","required":true,"description":""},{"name":"dimensionX","type":"string","required":true,"description":""},{"name":"dimensionY","type":"string","required":true,"description":""},{"name":"freezeRowState","type":"boolean","default":"false","required":false,"description":"Wrap each row's rendered instance in FreezeState so the visual state is frozen."},{"name":"isMobile","type":"boolean","required":true,"description":""},{"name":"renderInstance","type":"(rowKey: string, columnKey: string) => ReactNode","required":true,"description":""},{"name":"rowLabelTone","type":"\\"primary\\" | \\"secondary\\"","default":"primary","required":false,"description":""},{"name":"rowLabelWidth","type":"number","default":"120","required":false,"description":""},{"name":"title","type":"string","required":false,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":128,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":141,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.semantic.space.layout.gap","tokenPath":"semantic.space.layout.gap","sourceLine":144,"sourceSnippet":"paddingBottom: hds.semantic.space.layout.gap,"}]},"Container":{"filePath":"src/app/components/container.tsx","description":"Container — semantic width-constrained layout. Centers content horizontally and applies semantic max-width constraints. - maxWidth options: 'content' (760px prose) | 'max' (1200px full layout) - No arbitrary pixel values allowed Usage: <Container maxWidth=\\"max\\"> <div>...</div> </Container>","category":"Layout","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"Container content."},{"name":"className","type":"string","required":false,"description":"Optional class hook."},{"name":"maxWidth","type":"'content' | 'max'","default":"max","required":false,"description":"Max width: 'content' (760px for prose) | 'max' (1200px for full layouts). Defaults to 'max'."},{"name":"padding","type":"string","default":"var(--semantic-space-component-padding)","required":false,"description":"Deprecated. Container no longer owns internal padding."},{"name":"style","type":"CSSProperties","required":false,"description":"Optional inline styles for layout-specific adjustments."}],"observedTokens":[]},"Dialog":{"filePath":"src/app/components/dialog.tsx","description":"Dialog — modal dialog (shadcn baseline, compound parts). shadcn-baseline implementation (8s-7): Radix Dialog primitive (@radix-ui/react-dialog) themed with role tokens. Provides focus trap, scroll lock, ESC-to-close, backdrop scrim, and portal mounting out of the box. <Dialog> <Dialog.Trigger asChild> <Button>Open</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Confirm</Dialog.Title> <Dialog.Description>Are you sure?</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant=\\"secondary\\">Cancel</Button> </Dialog.Close> </Dialog.Footer> </Dialog.Content> </Dialog> Surface uses role.popover (semantic.color.surface.overlay) + shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is a foreground/80 wash so it picks up the theme without a hardcoded black. The close affordance is rendered as an absolutely-positioned X inside Content; pass \`hideClose\` to opt out for fully-custom layouts.","category":"Overlays","hidden":false,"props":[{"name":"children","type":"ReactNode","required":false,"description":"Children — typically \`Dialog.Trigger\` and \`Dialog.Content\`."},{"name":"defaultOpen","type":"boolean","required":false,"description":"Initial open state for uncontrolled usage."},{"name":"modal","type":"boolean","required":false,"description":"When true (default), traps focus and locks scroll while open."},{"name":"open","type":"boolean","required":false,"description":"Controlled open state."}],"observedTokens":[]},"Disclosure":{"filePath":"src/app/components/disclosure.tsx","description":"Disclosure - compact disclosure surface for optional explanatory content.","category":"Layout","hidden":false,"props":[{"name":"accent","type":"boolean","default":"false","required":false,"description":"Keeps the disclosure visually highlighted even when closed."},{"name":"children","type":"ReactNode","required":true,"description":"Content revealed when the disclosure is expanded."},{"name":"className","type":"string","required":false,"description":"Optional className passthrough for the trigger."},{"name":"contentStyle","type":"CSSProperties","required":false,"description":"Optional inner content style overrides."},{"name":"defaultOpen","type":"boolean","default":"false","required":false,"description":"Whether the disclosure starts in the open state."},{"name":"label","type":"ReactNode","required":true,"description":"Summary label rendered in the disclosure trigger. Accepts a string or ReactNode for icon+label combos."},{"name":"onOpenChange","type":"(open: boolean) => void","required":false,"description":"Called whenever the disclosure toggles."},{"name":"open","type":"boolean","required":false,"description":"Controlled open state."},{"name":"triggerStyle","type":"CSSProperties","required":false,"description":"Optional trigger style overrides."},{"name":"variant","type":"'panel' | 'nav' | 'card'","default":"panel","required":false,"description":"Visual treatment for docs panels, nav groups, or summary cards."}],"observedTokens":[{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":88,"sourceSnippet":"gap: hds.semantic.space.sidebar.gap,"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":93,"sourceSnippet":"\`border-color \${hds.motion.productive.duration}s \${hds.motion.productive.easing}\`,"},{"raw":"hds.motion.productive.easing","sourceLine":93,"sourceSnippet":"\`border-color \${hds.motion.productive.duration}s \${hds.motion.productive.easing}\`,"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":107,"sourceSnippet":"borderRadius: hds.borderRadius.action,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":112,"sourceSnippet":"columnGap: hds.semantic.space.component.gap,"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":127,"sourceSnippet":"? hds.semantic.space.sidebar.sectionGap"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":134,"sourceSnippet":"...(variant === 'nav' ? hds.typeStyles.ui : hds.typeStyles.caption),"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":134,"sourceSnippet":"...(variant === 'nav' ? hds.typeStyles.ui : hds.typeStyles.caption),"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":167,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.iconSize.small","tokenPath":"primitive.typography.size.base","sourceLine":183,"sourceSnippet":"width: hds.iconSize.small,"}]},"Divider":{"filePath":"src/app/components/divider.tsx","description":"Divider — semantic separator between content regions.","category":"Layout","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Optional class hook for parent-level styling."},{"name":"orientation","type":"\\"horizontal\\" | \\"vertical\\"","default":"horizontal","required":false,"description":"Divider orientation."},{"name":"spacing","type":"string | number","required":false,"description":"Perpendicular spacing around the divider."},{"name":"strong","type":"boolean","default":"false","required":false,"description":"Increase the stroke weight for stronger separation."},{"name":"style","type":"CSSProperties","required":false,"description":"Optional inline styles for one-off layout adjustments."}],"observedTokens":[{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":53,"sourceSnippet":"borderTop: \`\${hds.borderWidth.default} solid \${borderColor}\`,"}]},"DocLinkCard":{"filePath":"src/app/components/doc-link-card.tsx","description":"DocLinkCard - navigation card for editorial and documentation cross-links.","category":"Navigation","hidden":false,"props":[{"name":"accent","type":"boolean","default":"false","required":false,"description":"Tint the card surface for emphasis."},{"name":"affordance","type":"\\"up-right\\" | \\"right\\" | \\"left\\"","default":"up-right","required":false,"description":"Directional affordance for the header icon."},{"name":"description","type":"string","required":false,"description":"Supporting body copy shown below the title."},{"name":"disabled","type":"boolean","default":"false","required":false,"description":"Disable navigation and reduce contrast."},{"name":"href","type":"string","required":true,"description":"Destination route or URL."},{"name":"icon","type":"LucideIcon","required":true,"description":"Icon rendered in the card header."},{"name":"meta","type":"string","required":false,"description":"Optional metadata label rendered above the title."},{"name":"metaStyle","type":"\\"caption\\" | \\"ui\\"","default":"caption","required":false,"description":"Typography style used for the meta label."},{"name":"title","type":"string","required":true,"description":"Primary title displayed in the card."},{"name":"variant","type":"\\"feature\\" | \\"pager\\"","default":"feature","required":false,"description":"Card layout variant."}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":14,"sourceSnippet":"const bodyTextStyle = hds.typeStyles.ui;"},{"raw":"hds.semantic.space.layout.gap","tokenPath":"semantic.space.layout.gap","sourceLine":41,"sourceSnippet":"padding: hds.semantic.space.layout.gap,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":42,"sourceSnippet":"gap: hds.semantic.space.component.gap,"},{"raw":"hds.typeStyles.heading3","tokenPath":"semantic.typography.h3","sourceLine":43,"sourceSnippet":"titleStyle: { ...hds.typeStyles.heading3, color: 'var(--semantic-color-content-primary)' },"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":45,"sourceSnippet":"iconGap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":81,"sourceSnippet":"const metaTextStyle = metaStyle === 'ui' ? hds.typeStyles.ui : hds.typeStyles.caption;"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":85,"sourceSnippet":"duration: hds.motion.productive.duration,"},{"raw":"hds.motion.productive.easing","sourceLine":86,"sourceSnippet":"ease: hds.motion.productive.easing,"}]},"EmptyState":{"filePath":"src/app/components/empty-state.tsx","description":"EmptyState — consistent no-data placeholder for lists, grids, and sections. communicate \\"no data yet\\" with consistent muted typography instead of agents inventing one-off \`<p>No items.</p>\` lines. use for full-page errors (use ErrorPage) or for loading states (use a skeleton). Do NOT wrap in Surface or Card — the empty state is a typographic message, not a chrome-bearing container.","category":"Display","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Escape hatch for layout adjustments — token-only, no business logic."},{"name":"description","type":"ReactNode","required":false,"description":"Optional supporting line."},{"name":"title","type":"ReactNode","required":true,"description":"Primary message. Sentence-case, no trailing period required."}],"observedTokens":[]},"Field":{"filePath":"src/app/components/field.tsx","description":"Caption label paired with a value — used in metadata grids and read-only forms.","category":"Display","hidden":false,"props":[{"name":"label","type":"string","required":true,"description":""},{"name":"mono","type":"boolean","default":"false","required":false,"description":""},{"name":"tone","type":"\\"success\\" | \\"danger\\" | \\"warning\\" | \\"default\\"","default":"default","required":false,"description":""},{"name":"value","type":"ReactNode","required":false,"description":""}],"observedTokens":[]},"Form":{"filePath":"src/app/components/form.tsx","description":"Styled \`<form>\` with consistent vertical field rhythm.","category":"Inputs","hidden":false,"props":[],"observedTokens":[]},"FormField":{"filePath":"src/app/components/form.tsx","description":"Label + description + error wrapper that wires the a11y relationships onto its single child control via cloneElement. Validation-library agnostic — pass \`error\` from whatever you use. For controls with an externally-managed callback ref (e.g. react-hook-form), use \`FormFieldShell\` + \`useFieldWiring\` instead.","category":"Inputs","hidden":false,"props":[{"name":"children","type":"ReactElement<any, string | JSXElementConstructor<any>>","required":true,"description":"The single form control (native input, Select, Combobox, …)."},{"name":"className","type":"string","required":false,"description":""},{"name":"description","type":"string","required":false,"description":"Helper text below the control; linked via aria-describedby."},{"name":"error","type":"string","required":false,"description":"Error message; when set, marks the control aria-invalid and links it."},{"name":"htmlFor","type":"string","required":false,"description":"Explicit control id. Defaults to a generated id."},{"name":"label","type":"string","required":true,"description":"Field label, associated to the control via htmlFor/id."},{"name":"required","type":"boolean","default":"false","required":false,"description":"Adds a required marker and sets \`required\` on the control."}],"observedTokens":[]},"FormFieldShell":{"filePath":"src/app/components/form.tsx","description":"Presentational label + control slot + helper/error markup. Renders \`children\` verbatim — it does NOT clone — so it is safe to use with controls that own a callback ref. Pair it with \`useFieldWiring\` to apply ids/aria yourself.","category":"Inputs","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"The already-rendered control (already carrying its own id/aria props)."},{"name":"className","type":"string","required":false,"description":""},{"name":"controlId","type":"string","required":true,"description":"Id of the control rendered as \`children\` (drives the label's htmlFor)."},{"name":"description","type":"string","required":false,"description":""},{"name":"error","type":"string","required":false,"description":""},{"name":"label","type":"string","required":true,"description":""},{"name":"required","type":"boolean","default":"false","required":false,"description":""}],"observedTokens":[]},"FoundationSwatch":{"filePath":"src/app/components/foundation-swatch.tsx","description":"FoundationSwatch - governed foundation specimen for color and semantic role previews.","category":"Utilities","hidden":false,"props":[{"name":"background","type":"string","required":true,"description":"Background fill or tone shown by the specimen."},{"name":"bordered","type":"boolean","default":"false","required":false,"description":"Whether to show a bordered specimen surface."},{"name":"details","type":"string[]","required":false,"description":"Optional supporting lines shown inside the specimen."},{"name":"foreground","type":"string","default":"var(--semantic-color-content-primary)","required":false,"description":"Foreground color used for text inside the specimen."},{"name":"hidePreviewLabel","type":"boolean","default":"false","required":false,"description":"Whether to hide the preview label inside the swatch specimen."},{"name":"label","type":"string","required":true,"description":"Primary label rendered inside or below the swatch."},{"name":"note","type":"ReactNode","required":false,"description":"Optional note rendered below card-style swatches."},{"name":"previewPosition","type":"'bottom-left' | 'top-left' | 'center'","default":"center","required":false,"description":"Placement of the specimen content inside the swatch surface."},{"name":"specimen","type":"ReactNode","required":false,"description":"Custom specimen content rendered inside card-style swatches."},{"name":"swatchVar","type":"string","required":false,"description":"Explicit color value (hex or CSS var name) to pin the token chip's swatch square, overriding auto-resolution from tokenPath."},{"name":"tokenDisplayPreset","type":"'depth1' | 'depth2' | 'full'","default":"depth2","required":false,"description":"Shorthand preset for how the token path renders inside the specimen."},{"name":"tokenPath","type":"string","required":false,"description":"Optional token path rendered as a condensed node inside the swatch surface."},{"name":"value","type":"string","required":false,"description":"Optional text/value line shown inside the specimen."}],"observedTokens":[{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":70,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":79,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":149,"sourceSnippet":"? hds.semantic.space.component.gap"}]},"Grid":{"filePath":"src/app/components/grid.tsx","description":"Grid — responsive grid composition primitive. Enforces semantic gap and column values. No arbitrary CSS grid. - layout='fixed': responsive base (collapses via CSS at tablet/mobile). \`columns\` sets desktop count (default 12). Tablet/mobile clamp to min(8, cols) and min(4, cols) respectively. - layout='auto-fit': responsive card wrapping via auto-fit. - subgrid=true: sets gridTemplateColumns:'subgrid' for nested alignment. Usage (default responsive 12-col): <Grid> <Grid.Item colSpan={6}>…</Grid.Item> <Grid.Item colSpan={6}>…</Grid.Item> </Grid> Usage (responsive auto-fit): <Grid layout=\\"auto-fit\\"> <Card /> <Card /> </Grid>","category":"Layout","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the outer wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":true,"description":"Grid content."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"columns","type":"number","default":"12","required":false,"description":"Desktop column count for layout='fixed'. Tablet clamps to min(8,n), mobile to min(4,n). Defaults to 12."},{"name":"gap","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"inset","required":false,"description":"Gap between grid items: semantic only. Defaults to 'inset' (32px)."},{"name":"layout","type":"'fixed' | 'auto-fit'","default":"fixed","required":false,"description":"Grid layout mode: 'fixed' (responsive) or 'auto-fit' (card wrapping). Defaults to 'fixed'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."},{"name":"subgrid","type":"boolean","default":"false","required":false,"description":"If true, sets gridTemplateColumns:'subgrid' for nested grid alignment."}],"observedTokens":[{"raw":"hds.breakpoints.sm","sourceLine":94,"sourceSnippet":"if (width <= hds.breakpoints.sm) {"},{"raw":"hds.breakpoints.lg","sourceLine":98,"sourceSnippet":"if (width <= hds.breakpoints.lg) {"}]},"HdsCheckbox":{"filePath":"src/app/components/checkbox.tsx","description":"HdsCheckbox — custom-drawn checkbox with check / indeterminate glyph.","category":"Inputs","hidden":false,"props":[{"name":"checked","type":"boolean","required":true,"description":"Current checked state."},{"name":"indeterminate","type":"boolean","default":"false","required":false,"description":"Mixed state — visually a dash; supersedes the check glyph."},{"name":"label","type":"string","required":true,"description":"Checkbox label displayed next to the control."},{"name":"onChange","type":"(v: boolean) => void","required":true,"description":"Called when the checkbox changes."}],"observedTokens":[{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":68,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.motion.productive.easing","sourceLine":68,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":78,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":81,"sourceSnippet":"paddingLeft: hds.semantic.space.component.gap,"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":83,"sourceSnippet":"borderRadius: hds.borderRadius.action,"},{"raw":"hds.size[20]","tokenPath":"primitive.size.20","sourceLine":127,"sourceSnippet":"width: hds.size[20],"},{"raw":"hds.borderRadius[4]","tokenPath":"primitive.radius.4","sourceLine":129,"sourceSnippet":"borderRadius: hds.borderRadius[4],"},{"raw":"hds.borderWidth.sm","tokenPath":"primitive.borderWidth.sm","sourceLine":130,"sourceSnippet":"border: \`\${hds.borderWidth.sm} solid \${borderColor}\`,"},{"raw":"hds.space.px1","tokenPath":"primitive.space.px1","sourceLine":147,"sourceSnippet":"animate={{ x: isPressed ? hds.space.px1 : 0 }}"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":150,"sourceSnippet":"...hds.typeStyles.ui,"}]},"HdsRadio":{"filePath":"src/app/components/radio.tsx","description":"HdsRadio — radio button with animated selection indicator.","category":"Inputs","hidden":false,"props":[{"name":"checked","type":"boolean","required":true,"description":"Current checked state."},{"name":"label","type":"string","required":true,"description":"Radio label displayed next to the control."},{"name":"onChange","type":"(v: boolean) => void","required":true,"description":"Called when the radio changes."}],"observedTokens":[{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":58,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.motion.productive.easing","sourceLine":58,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":126,"sourceSnippet":"duration: hds.motion.expressive.duration,"},{"raw":"hds.size[8]","tokenPath":"primitive.size.8","sourceLine":130,"sourceSnippet":"width: hds.size[8],"},{"raw":"hds.borderRadius.full","tokenPath":"primitive.radius.full","sourceLine":132,"sourceSnippet":"borderRadius: hds.borderRadius.full,"},{"raw":"hds.space.px1","tokenPath":"primitive.space.px1","sourceLine":142,"sourceSnippet":"x: isPressed ? hds.space.px1 : 0,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":149,"sourceSnippet":"...hds.typeStyles.ui,"}]},"HdsSlider":{"filePath":"src/app/components/slider.tsx","description":"HdsSlider — range slider with label and value display.","category":"Inputs","hidden":false,"props":[{"name":"label","type":"string","required":true,"description":"Slider label."},{"name":"max","type":"number","required":true,"description":"Maximum value in the range."},{"name":"min","type":"number","required":true,"description":"Minimum value in the range."},{"name":"onChange","type":"(v: number) => void","required":true,"description":"Called when the slider value changes."},{"name":"step","type":"number","default":"1","required":false,"description":"Step increment for the range input."},{"name":"value","type":"number","required":true,"description":"Current slider value."}],"observedTokens":[{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":39,"sourceSnippet":"style={{ display: 'flex', flexDirection: 'column', gap: hds.semantic.space.component.gap }}"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":51,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.space.px2","tokenPath":"primitive.space.px2","sourceLine":60,"sourceSnippet":"initial={{ opacity: 0.72, y: hds.space.px2 }}"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":63,"sourceSnippet":"duration: hds.motion.productive.duration,"},{"raw":"hds.motion.productive.easing","sourceLine":64,"sourceSnippet":"ease: hds.motion.productive.easing,"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":66,"sourceSnippet":"style={{ ...hds.typeStyles.technical, flexShrink: 0 }}"},{"raw":"hds.size[20]","tokenPath":"primitive.size.20","sourceLine":74,"sourceSnippet":"height: hds.size[20],"},{"raw":"hds.size[8]","tokenPath":"primitive.size.8","sourceLine":86,"sourceSnippet":"height: hds.size[8],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":98,"sourceSnippet":"duration: hds.motion.expressive.duration,"},{"raw":"hds.borderRadius.full","tokenPath":"primitive.radius.full","sourceLine":103,"sourceSnippet":"borderRadius: hds.borderRadius.full,"},{"raw":"hds.zIndex.focus","sourceLine":131,"sourceSnippet":"zIndex: hds.zIndex.focus,"}]},"HdsToggle":{"filePath":"src/app/components/toggle.tsx","description":"HdsToggle — boolean on/off toggle with animated thumb.","category":"Inputs","hidden":false,"props":[{"name":"checked","type":"boolean","required":true,"description":"Current checked state."},{"name":"label","type":"string","required":true,"description":"Toggle label displayed next to the control."},{"name":"onChange","type":"(v: boolean) => void","required":true,"description":"Called when the toggle changes."}],"observedTokens":[{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":44,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.motion.productive.easing","sourceLine":44,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.space.px1","tokenPath":"primitive.space.px1","sourceLine":51,"sourceSnippet":"y: isPressed ? hds.space.px1 : 0,"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":56,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":59,"sourceSnippet":"paddingLeft: hds.semantic.space.component.gap,"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":61,"sourceSnippet":"borderRadius: hds.borderRadius.action,"},{"raw":"hds.borderWidth.sm","tokenPath":"primitive.borderWidth.sm","sourceLine":70,"sourceSnippet":"? \`\${hds.borderWidth.sm} solid var(--semantic-color-border-accent)\`"},{"raw":"hds.size[16]","tokenPath":"primitive.size.16","sourceLine":102,"sourceSnippet":"width: hds.size[16],"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":120,"sourceSnippet":"...hds.typeStyles.ui,"}]},"HeadingStack":{"filePath":"src/app/components/heading-stack.tsx","description":"HeadingStack — enforced vertical rhythm for heading + subheading pairs. Automatically handles gap and secondary color, preventing manual stacking. - Heading level: 'heading1' | 'heading2' | 'heading3' - Gap: px4 (tight) | px8 (default) - Subheading color: always var(--semantic-color-content-secondary) GUARDRAIL: Never manually stack headings using Stack. Always use HeadingStack. Usage: <HeadingStack level=\\"heading1\\" heading=\\"Main Title\\" subheading=\\"Subtitle text\\" /> <HeadingStack level=\\"heading2\\" heading=\\"Section\\" subheading=\\"Description\\" gap=\\"px4\\" />","category":"Typography","hidden":false,"props":[{"name":"as","type":"ElementType","default":"div","required":false,"description":"Override the root semantic wrapper while preserving the governed layout styles."},{"name":"gap","type":"'px4' | 'px8'","default":"px8","required":false,"description":"Gap between heading and subheading: px4 (tight) | px8 (default)."},{"name":"heading","type":"string","required":true,"description":"The heading content (string)."},{"name":"headingAs","type":"'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'","required":false,"description":"Override the heading tag without altering the applied typography style."},{"name":"level","type":"'heading1' | 'heading2' | 'heading3'","required":true,"description":"Semantic heading level: heading1 | heading2 | heading3."},{"name":"subheading","type":"string","required":true,"description":"The supporting copy rendered beneath the heading."},{"name":"subheadingAs","type":"'p' | 'div' | 'span'","default":"p","required":false,"description":"Override the supporting-copy tag."}],"observedTokens":[{"raw":"hds.space","sourceLine":97,"sourceSnippet":"gap: hds.space[gap],"}]},"Icon":{"filePath":"src/app/components/icon.tsx","description":"Icon — semantic icon wrapper for Lucide icons.","category":"Display","hidden":false,"props":[{"name":"aria-hidden","type":"boolean | \\"true\\" | \\"false\\"","default":"true","required":false,"description":"\`aria-hidden\` defaults to true because HDS icons are decorative by default."},{"name":"className","type":"string","required":false,"description":"Optional class hook for layout or utility styling (rotation, transition, etc.)."},{"name":"color","type":"string","default":"currentColor","required":false,"description":"CSS color value or token, such as \`var(--semantic-color-content-secondary)\`."},{"name":"icon","type":"LucideIcon","required":true,"description":"Lucide icon component to render."},{"name":"size","type":"IconSize","default":"small","required":false,"description":"Size token from \`hds.iconSize\`."},{"name":"style","type":"CSSProperties","required":false,"description":"Optional inline styles for rare rotation, transition, or layout tweaks."},{"name":"weight","type":"\\"fill\\" | \\"bold\\" | \\"thin\\" | \\"light\\" | \\"regular\\" | \\"duotone\\"","required":false,"description":"Stroke weight shim for backward compatibility with former Phosphor weight prop. Maps to Lucide's \`strokeWidth\` (thin=1, light=1.5, regular=2, bold=2.5)."}],"observedTokens":[{"raw":"hds.iconSize","sourceLine":11,"sourceSnippet":"export type IconSize = keyof typeof hds.iconSize | number | string;"}]},"IconButton":{"filePath":"src/app/components/icon-button.tsx","description":"IconButton ” icon-only action trigger built on the shared Button primitive.","category":"Actions","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":"Accessible label fallback for backward compatibility."},{"name":"asChild","type":"boolean","required":false,"description":"Render the button chrome onto a single child element for link semantics."},{"name":"disabled","type":"boolean","required":false,"description":"Disable interaction. Mirrors the native HTML attribute."},{"name":"icon","type":"LucideIcon","required":true,"description":"Lucide icon rendered inside the button."},{"name":"iconColor","type":"string","required":false,"description":"Override the inner icon color."},{"name":"iconLeft","type":"ReactNode","required":false,"description":"Leading icon rendered before the label."},{"name":"iconRight","type":"ReactNode","required":false,"description":"Trailing icon rendered after the label."},{"name":"iconSize","type":"IconSize","required":false,"description":"Override the inner icon size; defaults to the matching button ramp size."},{"name":"label","type":"string","required":false,"description":"Accessible label for the icon button."},{"name":"loading","type":"boolean","required":false,"description":"Show a busy indicator and disable interaction."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":"Size token for the button itself."},{"name":"variant","type":"\\"primary\\" | \\"secondary\\" | \\"tertiary\\"","required":false,"description":""}],"observedTokens":[]},"InlineCode":{"filePath":"src/app/components/inline-code.tsx","description":"InlineCode — inline code chip for token paths, file paths, and code-adjacent prose.","category":"Display","hidden":false,"props":[{"name":"compact","type":"boolean","default":"false","required":false,"description":"Compact mode is tuned for dense body copy and table prose."},{"name":"copyable","type":"boolean","default":"false","required":false,"description":"Show a copy-to-clipboard button. children must be a string when true."},{"name":"style","type":"CSSProperties","required":false,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":37,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.borderRadius[0]","tokenPath":"primitive.radius.0","sourceLine":41,"sourceSnippet":"borderRadius: hds.borderRadius[0],"},{"raw":"hds.semantic.space.subgrid.hairline","tokenPath":"semantic.space.subgrid.hairline","sourceLine":42,"sourceSnippet":"paddingTop: compact ? hds.semantic.space.subgrid.hairline : hds.semantic.space.subgrid.gap,"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":42,"sourceSnippet":"paddingTop: compact ? hds.semantic.space.subgrid.hairline : hds.semantic.space.subgrid.gap,"}]},"InlineLink":{"filePath":"src/app/components/inline-link.tsx","description":"InlineLink ” inline navigation and external-link primitive for body copy.","category":"Navigation","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"Inline label or content to render inside the link."},{"name":"externalIcon","type":"boolean","default":"true","required":false,"description":"Append the external-link icon for non-internal URLs."},{"name":"href","type":"string","required":true,"description":"Destination route or URL."}],"observedTokens":[{"raw":"hds.semantic.space.subgrid.xs","tokenPath":"semantic.space.subgrid.xs","sourceLine":59,"sourceSnippet":"marginLeft: hds.semantic.space.subgrid.xs,"},{"raw":"hds.semantic.space.subgrid.hairline","tokenPath":"semantic.space.subgrid.hairline","sourceLine":60,"sourceSnippet":"marginBottom: hds.semantic.space.subgrid.hairline,"}]},"NavGroup":{"filePath":"src/app/components/nav-group.tsx","description":"NavGroup - labeled navigation group for stacks of nav items.","category":"Navigation","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":""},{"name":"collapsible","type":"boolean","default":"false","required":false,"description":""},{"name":"contentStyle","type":"CSSProperties","required":false,"description":""},{"name":"getExact","type":"(item: NavItem) => boolean","required":false,"description":""},{"name":"items","type":"NavItem[]","required":false,"description":""},{"name":"label","type":"string","required":false,"description":""},{"name":"level","type":"NavLevel","default":"section","required":false,"description":""},{"name":"onNavigate","type":"() => void","required":false,"description":""},{"name":"style","type":"CSSProperties","required":false,"description":""},{"name":"variant","type":"\\"side\\" | \\"toc\\"","default":"side","required":false,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":73,"sourceSnippet":"...(variant === 'side' ? hds.typeStyles.ui : hds.typeStyles.caption),"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":73,"sourceSnippet":"...(variant === 'side' ? hds.typeStyles.ui : hds.typeStyles.caption),"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":79,"sourceSnippet":"variant === 'toc' ? hds.semantic.space.sidebar.sectionGap : getNavLevelLeadingPadding(level),"},{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":81,"sourceSnippet":"variant === 'toc' ? hds.semantic.space.sidebar.gap : 'var(--component-nav-paddingX)',"}]},"NavItem":{"filePath":"src/app/components/nav-item.tsx","description":"NavItem - navigation row primitive for sidebars, table of contents, and list navigation.","category":"Navigation","hidden":false,"props":[{"name":"active","type":"boolean","default":"false","required":false,"description":"Marks the item as the current route."},{"name":"disabled","type":"boolean","default":"false","required":false,"description":"Disables interaction and muted the nav row."},{"name":"label","type":"string","required":true,"description":"Text label displayed inside the navigation row."},{"name":"level","type":"NavLevel","default":"root","required":false,"description":"Visual hierarchy level for the navigation row."},{"name":"onNavigate","type":"(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void","required":false,"description":"Navigation callback fired before the browser follows the link."},{"name":"variant","type":"'side' | 'toc'","default":"side","required":false,"description":"Visual layout variant for side nav or table of contents usage."}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":84,"sourceSnippet":"typeStyle: hds.typeStyles.ui,"},{"raw":"hds.semantic.space.sidebar.railPadding","tokenPath":"semantic.space.sidebar.railPadding","sourceLine":85,"sourceSnippet":"leadingPaddingX: hds.semantic.space.sidebar.railPadding,"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":92,"sourceSnippet":"leadingPaddingX: hds.semantic.space.sidebar.sectionGap,"},{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":93,"sourceSnippet":"trailingPaddingX: hds.semantic.space.sidebar.gap,"},{"raw":"hds.borderWidth.sm","tokenPath":"primitive.borderWidth.sm","sourceLine":188,"sourceSnippet":"outline: showFocus ? \`\${hds.borderWidth.sm} solid var(--semantic-color-border-accent)\` : 'none',"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":192,"sourceSnippet":"transition: \`background-color \${hds.motion.productive.duration}s ease, color \${hds.motion.productive.duration}s ease\`,"}]},"Page":{"filePath":"src/app/components/page.tsx","description":"Page — standard page shell. Wraps page content in Container (width constraint) and applies the canonical vertical padding so content breathes against the viewport edges on scroll. Use as the outermost element of any new page so vertical rhythm is consistent across the system without per-page reinvention. Footer: every page mounted under HDSLayout (the standard route shell) gets a shared footer rendered after this component's content, with bottom space below the footer owned by the layout shell. Page intentionally does not render its own footer — the shell is the single source of truth. Use Container directly only for full-bleed surfaces (sketches, hero sections, embedded canvases) where the page owns its own vertical padding. Usage: <Page> <Stack direction=\\"column\\" gap=\\"spacious\\">...</Stack> </Page> <Page maxWidth=\\"content\\" paddingY=\\"compact\\"> <article>...</article> </Page>","category":"Layout","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":""},{"name":"maxWidth","type":"'content' | 'max'","default":"max","required":false,"description":"Max width: 'content' (760px for prose) | 'max' (1200px). Defaults to 'max'."},{"name":"paddingY","type":"'default' | 'compact' | 'none'","default":"default","required":false,"description":"Vertical padding token: 'default' (48/64) | 'compact' (24/32) | 'none'. Defaults to 'default'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch for narrow page-specific adjustments."}],"observedTokens":[{"raw":"hds.space.px48","tokenPath":"primitive.space.px48","sourceLine":37,"sourceSnippet":"default: { top: hds.space.px48, bottom: hds.space.px64 },"},{"raw":"hds.space.px64","tokenPath":"primitive.space.px64","sourceLine":37,"sourceSnippet":"default: { top: hds.space.px48, bottom: hds.space.px64 },"},{"raw":"hds.space.px24","tokenPath":"primitive.space.px24","sourceLine":38,"sourceSnippet":"compact: { top: hds.space.px24, bottom: hds.space.px32 },"},{"raw":"hds.space.px32","tokenPath":"primitive.space.px32","sourceLine":38,"sourceSnippet":"compact: { top: hds.space.px24, bottom: hds.space.px32 },"}]},"Pagination":{"filePath":"src/app/components/pagination.tsx","description":"Paged navigation with first/last anchors, sibling pages, and ellipses.","category":"Navigation","hidden":false,"props":[{"name":"count","type":"number","required":true,"description":"Total number of pages."},{"name":"label","type":"string","default":"Pagination","required":false,"description":"Accessible label for the nav landmark."},{"name":"onPageChange","type":"(page: number) => void","required":true,"description":"Fired with the next page when a control is activated."},{"name":"page","type":"number","required":true,"description":"Current page (1-based)."},{"name":"siblingCount","type":"number","default":"1","required":false,"description":"Pages shown either side of the current page before truncating."}],"observedTokens":[]},"Progress":{"filePath":"src/app/components/progress.tsx","description":"Linear progress. Determinate when \`value\` is a number, else indeterminate.","category":"Feedback","hidden":false,"props":[{"name":"label","type":"string","default":"Progress","required":false,"description":"Accessible label for the progress bar."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"value","type":"number","default":"null","required":false,"description":"Completion 0–100. Omit (or pass null) for an indeterminate bar that animates until the work completes."}],"observedTokens":[]},"SegmentedControl":{"filePath":"src/app/components/segmented-control.tsx","description":"SegmentedControl \\" segmented selection input for compact mutually-exclusive choices.","category":"Inputs","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":"Accessible label when no visible label should be rendered."},{"name":"fullWidth","type":"boolean","default":"false","required":false,"description":"Whether the control should stretch to the width of its container."},{"name":"label","type":"string","required":false,"description":"Accessible label for the control."},{"name":"onChange","type":"(value: string) => void","required":true,"description":"Called when the user selects a different option."},{"name":"options","type":"HdsSegmentedOption[]","required":true,"description":"Option set rendered inside the segmented rail."},{"name":"railPadding","type":"Padding<string | number>","required":false,"description":"Padding inside the rail container."},{"name":"segmentPaddingX","type":"PaddingLeft<string | number>","required":false,"description":"Horizontal padding inside each segment."},{"name":"size","type":"\\"sm\\" | \\"md\\"","default":"md","required":false,"description":"Size on the sm/md ramp shared with Button/Input."},{"name":"value","type":"string","required":true,"description":"Currently selected value."},{"name":"variant","type":"\\"primary\\" | \\"secondary\\"","default":"primary","required":false,"description":"Visual treatment for the rail and active segment."}],"observedTokens":[{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":17,"sourceSnippet":"gap: hds.semantic.space.component.gap,"},{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":26,"sourceSnippet":"border: \`\${hds.borderWidth.default} solid var(--semantic-color-border-default)\`,"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":31,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.semantic.space.layout.gap","tokenPath":"semantic.space.layout.gap","sourceLine":94,"sourceSnippet":"(isCompact ? hds.semantic.space.component.gap : hds.semantic.space.layout.gap);"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":108,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":175,"sourceSnippet":"duration: hds.motion.productive.duration,"},{"raw":"hds.motion.productive.easing","sourceLine":176,"sourceSnippet":"ease: hds.motion.productive.easing,"},{"raw":"hds.zIndex.base","sourceLine":183,"sourceSnippet":"zIndex: active ? 1 : hds.zIndex.base,"},{"raw":"hds.semantic.space.subgrid.hairline","tokenPath":"semantic.space.subgrid.hairline","sourceLine":191,"sourceSnippet":"gap: hds.semantic.space.subgrid.hairline,"},{"raw":"hds.size[32]","tokenPath":"primitive.size.32","sourceLine":192,"sourceSnippet":"minHeight: isCompact ? hds.size[32] : hds.size[48],"},{"raw":"hds.size[48]","tokenPath":"primitive.size.48","sourceLine":192,"sourceSnippet":"minHeight: isCompact ? hds.size[32] : hds.size[48],"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":200,"sourceSnippet":"borderRadius: hds.borderRadius.action,"},{"raw":"hds.borderWidth.sm","tokenPath":"primitive.borderWidth.sm","sourceLine":216,"sourceSnippet":"? \`\${hds.borderWidth.sm} solid \${isSecondary ? 'var(--semantic-color-border-default)' : 'var(--semantic-color-border-accent)'}\`"},{"raw":"hds.zIndex.focus","sourceLine":265,"sourceSnippet":"zIndex: hds.zIndex.focus,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":277,"sourceSnippet":"...hds.typeStyles.caption,"}]},"Skeleton":{"filePath":"src/app/components/skeleton.tsx","description":"Decorative loading placeholder. Marked aria-hidden — announce the loading state on the surrounding region (e.g. aria-busy) rather than per skeleton.","category":"Feedback","hidden":false,"props":[{"name":"height","type":"string | number","required":false,"description":"Explicit height (number → px, or any CSS length). For \`text\`, defaults to 1em."},{"name":"variant","type":"\\"text\\" | \\"rectangular\\" | \\"circular\\"","default":"rectangular","required":false,"description":""},{"name":"width","type":"string | number","required":false,"description":"Explicit width (number → px, or any CSS length)."}],"observedTokens":[]},"Sketch":{"filePath":"src/app/components/sketch.tsx","description":"Sketch — shared shell for generative canvases and WebGL sketches.","category":"Layout","hidden":false,"props":[{"name":"controls","type":"ReactNode","required":false,"description":""},{"name":"title","type":"string","required":true,"description":""}],"observedTokens":[{"raw":"hds.semantic.space.component.padding","tokenPath":"semantic.space.component.padding","sourceLine":21,"sourceSnippet":"padding: hds.semantic.space.component.padding,"},{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":22,"sourceSnippet":"borderBottom: \`\${hds.borderWidth.default} solid var(--semantic-color-border-default)\`,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":27,"sourceSnippet":"...hds.typeStyles.ui,"}]},"SpecimenBlock":{"filePath":"src/app/components/specimen-block.tsx","description":"SpecimenBlock — shared component-doc specimen block with preview, variant deck, and optional matrix.","category":"Utilities","hidden":false,"props":[{"name":"componentName","type":"string","required":true,"description":""},{"name":"demo","type":"ReactNode","required":false,"description":""},{"name":"filePath","type":"string","required":false,"description":""},{"name":"hideHero","type":"boolean","default":"false","required":false,"description":""},{"name":"hideHeroLabel","type":"boolean","default":"false","required":false,"description":""},{"name":"hideVariantDeck","type":"boolean","default":"false","required":false,"description":""},{"name":"matrix","type":"ReactNode","required":false,"description":""}],"observedTokens":[{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":50,"sourceSnippet":"<div style={{ marginTop: hideHero ? 0 : \`calc(\${hds.semantic.space.component.gap} * 2)\` }}>"}]},"Spinner":{"filePath":"src/app/components/spinner.tsx","description":"Indeterminate spinner. Inherits the surrounding text color via currentColor.","category":"Feedback","hidden":false,"props":[{"name":"label","type":"string","default":"Loading","required":false,"description":"Accessible label announced to assistive tech. Defaults to \\"Loading\\"."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""}],"observedTokens":[]},"Stack":{"filePath":"src/app/components/stack.tsx","description":"Stack — one-dimensional layout primitive.","category":"Layout","hidden":false,"props":[{"name":"align","type":"'start' | 'center' | 'end' | 'stretch'","required":false,"description":"Cross-axis alignment: start | center | end | stretch."},{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the outer wrapper."},{"name":"children","type":"ReactNode","required":true,"description":"Stack content rendered inside the flex wrapper."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"direction","type":"\\"row\\" | \\"column\\"","default":"column","required":false,"description":"Flex direction for the stack."},{"name":"gap","type":"GapOption","default":"tight","required":false,"description":"Gap token: semantic (tight, normal, inset, spacious) or primitive (px4, px8, etc). Defaults to 'tight' (16px)."},{"name":"justify","type":"'start' | 'center' | 'end' | 'space-between'","required":false,"description":"Main-axis distribution: start | center | end | space-between."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."},{"name":"wrap","type":"FlexWrap","required":false,"description":"Whether children may wrap."}],"observedTokens":[{"raw":"hds.space","sourceLine":16,"sourceSnippet":"type GapOption = SemanticGap | ComponentGap | SubgridGap | SectionGap | keyof typeof hds.space;"}]},"Stat":{"filePath":"src/app/components/stat.tsx","description":"Headline metric — large value, uppercase caption label, optional sub-line.","category":"Display","hidden":false,"props":[{"name":"label","type":"string","required":true,"description":""},{"name":"sub","type":"ReactNode","required":false,"description":""},{"name":"tone","type":"\\"success\\" | \\"danger\\" | \\"warning\\" | \\"default\\"","default":"default","required":false,"description":""},{"name":"value","type":"ReactNode","required":true,"description":""}],"observedTokens":[]},"StatusListItem":{"filePath":"src/app/components/status-list-item.tsx","description":"Status dot + title row with optional muted notes and trailing slot (e.g. badge).","category":"Display","hidden":false,"props":[{"name":"notes","type":"ReactNode[]","required":false,"description":""},{"name":"title","type":"ReactNode","required":true,"description":""},{"name":"tone","type":"\\"success\\" | \\"danger\\" | \\"warning\\" | \\"info\\" | \\"neutral\\"","default":"neutral","required":false,"description":""},{"name":"trailing","type":"ReactNode","required":false,"description":""}],"observedTokens":[]},"StatusTile":{"filePath":"src/app/components/status-tile.tsx","description":"Block-layout sibling of StatusListItem. Renders a raised surface tile with title, optional muted notes, and a trailing slot for a badge or affordance. Status colour belongs in the trailing slot, never as a left rule on the tile — every tile should look the same so feedback signals stay reserved for genuinely interrupting states.","category":"Display","hidden":false,"props":[{"name":"notes","type":"ReactNode[]","required":false,"description":""},{"name":"title","type":"ReactNode","required":true,"description":""},{"name":"tone","type":"'success' | 'warning' | 'danger' | 'info' | 'neutral'","default":"neutral","required":false,"description":"Tone metadata kept for downstream consumers (e.g., the trailing badge). The tile itself does not paint a tone-bearing rule."},{"name":"trailing","type":"ReactNode","required":false,"description":""}],"observedTokens":[]},"StepperField":{"filePath":"src/app/components/stepper-field.tsx","description":"StepperField ” numeric input with decrement/increment controls. Classification baseline: Material Design, Chakra UI, and Ant Design treat steppers as numeric input controls rather than page-specific controls. This lives in shared components so sketches and docs consume the same primitive.","category":"Inputs","hidden":false,"props":[{"name":"inputStep","type":"number","required":false,"description":""},{"name":"label","type":"string","required":true,"description":""},{"name":"max","type":"number","required":true,"description":""},{"name":"min","type":"number","required":true,"description":""},{"name":"onChange","type":"(value: number) => void","required":true,"description":""},{"name":"precision","type":"number","required":false,"description":""},{"name":"step","type":"number","required":true,"description":""},{"name":"value","type":"number","required":true,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":92,"sourceSnippet":"<label className=\\"text-secondary\\" style={{ ...hds.typeStyles.caption }}>"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":95,"sourceSnippet":"<div style={{ display: 'flex', alignItems: 'center', gap: hds.semantic.space.component.gap }}>"},{"raw":"hds.size[96]","tokenPath":"primitive.size.96","sourceLine":122,"sourceSnippet":"width: hds.size[96],"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":129,"sourceSnippet":"transition: \`background-color \${hds.motion.productive.duration}s ease, border-color \${hds.motion.productive.duration}s ease\`,"}]},"Surface":{"filePath":"src/app/components/surface.tsx","description":"Surface — governed inset surface primitive. Enforces the \\"Surface Inset\\" rule: backgrounds MUST have internal padding. - Default padding: px24 (cards) | px16 (items) - Default border: none (elevation model — use shadow for lift) - Fixed radius: var(--component-card-radius) - shadow prop: applies a two-layer elevation shadow for card lift Usage: <Surface>Card content</Surface> <Surface padding=\\"item\\">Compact item</Surface> <Surface shadow>Lifted card with elevation shadow.</Surface>","category":"Layout","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the outer wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":false,"description":"Surface content."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"overflow","type":"Overflow","required":false,"description":"Override CSS overflow."},{"name":"padding","type":"PaddingOption","default":"component","required":false,"description":"Padding: 'component' (24px, default) | 'item' (16px) | primitive px values | 'none' (0px)."},{"name":"shadow","type":"boolean","default":"false","required":false,"description":"Apply the two-layer card elevation shadow for lift."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."},{"name":"theme","type":"\\"light\\" | \\"dark\\"","required":false,"description":"Force a theme regardless of context: 'dark' | 'light'. Defaults to context value."}],"observedTokens":[]},"Table":{"filePath":"src/app/components/table.tsx","description":"Table - structured data table primitive for documentation and compact UI matrices.","category":"Display","hidden":false,"props":[{"name":"caption","type":"ReactNode","required":false,"description":""},{"name":"captionAction","type":"ReactNode","required":false,"description":"Optional action rendered to the right of the caption."},{"name":"columns","type":"TableColumn[]","required":true,"description":""},{"name":"density","type":"'compact' | 'comfortable'","default":"comfortable","required":false,"description":""},{"name":"description","type":"ReactNode","required":false,"description":""},{"name":"flush","type":"boolean","default":"false","required":false,"description":""},{"name":"minWidth","type":"string | number","required":false,"description":""},{"name":"rows","type":"TableRow[]","required":true,"description":""},{"name":"stickyHeader","type":"boolean","default":"false","required":false,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":19,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.semantic.space.component.padding","tokenPath":"semantic.space.component.padding","sourceLine":26,"sourceSnippet":"paddingRight: hds.semantic.space.component.padding,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":96,"sourceSnippet":"label: hds.typeStyles.ui,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":99,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":117,"sourceSnippet":"paddingY: hds.semantic.space.component.gap,"},{"raw":"hds.size[40]","tokenPath":"primitive.size.40","sourceLine":118,"sourceSnippet":"minHeight: hds.size[40],"},{"raw":"hds.space.px12","tokenPath":"primitive.space.px12","sourceLine":123,"sourceSnippet":"paddingY: hds.space.px12,"},{"raw":"hds.size[48]","tokenPath":"primitive.size.48","sourceLine":124,"sourceSnippet":"minHeight: hds.size[48],"},{"raw":"hds.zIndex.overlay","sourceLine":219,"sourceSnippet":"style={makeHeaderCellStyle({ justifyContent: cellJustifyContent(column.align), textAlign: alignToTextAlign(column.align), paddingY: metrics.paddingY, minHeight: metrics.minHeight, stickyHeader: Boolean(stickyHeader), zIndex: hds.zIndex.overlay })}"},{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":229,"sourceSnippet":"style={makeDataCellStyle({ justifyContent: cellJustifyContent(cell.align), minHeight: metrics.minHeight, paddingY: metrics.paddingY, borderBottom: rowIndex < rows.length - 1 ? \`\${hds.borderWidth.default} solid var(--semantic-color-border-subdued)\` : 'none', textAlign: alignToTextAlign(cell.align), slotStyle: SLOT_STYLES[cell.slot] })}"}]},"Tabs":{"filePath":"src/app/components/tabs.tsx","description":"Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries \`border-b border-border/40\` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has \`border-b-2 border-transparent -mb-px\` at rest. The \`-mb-px\` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft \`bg-accent/5\` tint that extends down into TabsContent — the active tab visually \\"claims\\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (\`overflow-x-auto whitespace-nowrap\`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE).","category":"Navigation","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"TabsContent":{"filePath":"src/app/components/tabs.tsx","description":"Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries \`border-b border-border/40\` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has \`border-b-2 border-transparent -mb-px\` at rest. The \`-mb-px\` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft \`bg-accent/5\` tint that extends down into TabsContent — the active tab visually \\"claims\\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (\`overflow-x-auto whitespace-nowrap\`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE).","category":"Navigation","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"TabsList":{"filePath":"src/app/components/tabs.tsx","description":"Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries \`border-b border-border/40\` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has \`border-b-2 border-transparent -mb-px\` at rest. The \`-mb-px\` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft \`bg-accent/5\` tint that extends down into TabsContent — the active tab visually \\"claims\\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (\`overflow-x-auto whitespace-nowrap\`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE).","category":"Navigation","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"TabsTrigger":{"filePath":"src/app/components/tabs.tsx","description":"Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries \`border-b border-border/40\` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has \`border-b-2 border-transparent -mb-px\` at rest. The \`-mb-px\` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft \`bg-accent/5\` tint that extends down into TabsContent — the active tab visually \\"claims\\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (\`overflow-x-auto whitespace-nowrap\`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE).","category":"Navigation","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"Tag":{"filePath":"src/app/components/tag.tsx","description":"Tag — interactive filter and category chip. The outer <button> carries the accessible 44px hit target directly via the size token while the inner pill keeps the visible surface compact. Colors (background, border-color, color) are owned by .hds-tag-btn / .hds-tag-pill in theme.css so :hover transitions work — inline styles beat :hover selectors and would silently break the effect. Active state: brand fill via [data-active=\\"true\\"] in theme.css. Hover states: inactive → subtle tint + brand border; active → brand-hover fill.","category":"Inputs","hidden":false,"props":[{"name":"active","type":"boolean","default":"false","required":false,"description":"Whether the tag is active."},{"name":"aria-label","type":"string","required":false,"description":"Accessible label when the visible text is abbreviated."},{"name":"children","type":"ReactNode","required":true,"description":"Tag content displayed inside the pill."},{"name":"className","type":"string","required":false,"description":"Optional class hook for parent-level styling."},{"name":"onClick","type":"() => void","required":false,"description":"Click handler for toggling the tag."},{"name":"title","type":"string","required":false,"description":"Native tooltip for explicit file/path affordance."}],"observedTokens":[{"raw":"hds.size.interactive.min","tokenPath":"primitive.size.interactive.min","sourceLine":49,"sourceSnippet":"minWidth: hds.size.interactive.min,"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":50,"sourceSnippet":"transition: \`background-color \${hds.motion.productive.duration}s ease, color \${hds.motion.productive.duration}s ease, transform \${hds.motion.productive.duration}s ease\`,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":54,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":67,"sourceSnippet":"borderRadius: hds.borderRadius.action,"}]},"Text":{"filePath":"src/app/components/text.tsx","description":"Text — polymorphic typography primitive spanning the full HDS type ramp.","category":"Typography","hidden":false,"props":[{"name":"as","type":"\\"symbol\\" | \\"object\\" | \\"title\\" | \\"slot\\" | \\"style\\" | \\"search\\" | \\"article\\" | \\"button\\" | \\"dialog\\" | \\"figure\\" | \\"form\\" | \\"img\\" | \\"link\\" | \\"main\\" | \\"menu\\" | \\"menuitem\\" | \\"option\\" | \\"switch\\" | ... 161 more ... | FunctionComponent<...>","default":"defaultTagMap[variant]","required":false,"description":""},{"name":"className","type":"string","required":false,"description":""},{"name":"style","type":"CSSProperties","required":false,"description":""},{"name":"variant","type":"TextVariant","required":true,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.display","tokenPath":"semantic.typography.display","sourceLine":38,"sourceSnippet":"display: hds.typeStyles.display,"},{"raw":"hds.typeStyles.heading1","tokenPath":"semantic.typography.h1","sourceLine":39,"sourceSnippet":"heading1: hds.typeStyles.heading1,"},{"raw":"hds.typeStyles.heading2","tokenPath":"semantic.typography.h2","sourceLine":40,"sourceSnippet":"heading2: hds.typeStyles.heading2,"},{"raw":"hds.typeStyles.heading3","tokenPath":"semantic.typography.h3","sourceLine":41,"sourceSnippet":"heading3: hds.typeStyles.heading3,"},{"raw":"hds.typeStyles.body","tokenPath":"semantic.typography.body","sourceLine":42,"sourceSnippet":"body: hds.typeStyles.body,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":43,"sourceSnippet":"ui: hds.typeStyles.ui,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":44,"sourceSnippet":"eyebrow: hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":45,"sourceSnippet":"caption: hds.typeStyles.caption,"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":46,"sourceSnippet":"technical: hds.typeStyles.technical,"},{"raw":"hds.typeStyles.badge","tokenPath":"semantic.typography.caption","sourceLine":47,"sourceSnippet":"badge: hds.typeStyles.badge,"},{"raw":"hds.typeStyles.small","tokenPath":"semantic.typography.small","sourceLine":51,"sourceSnippet":"docSmall: hds.typeStyles.small,"},{"raw":"hds.typeStyles.mono","tokenPath":"semantic.typography.mono","sourceLine":52,"sourceSnippet":"docCode: hds.typeStyles.mono,"}]},"TextLockup":{"filePath":"src/app/components/text-lockup.tsx","description":"TextLockup - governed title-and-description pairing primitive.","category":"Display","hidden":false,"props":[{"name":"align","type":"'left' | 'center'","default":"left","required":false,"description":"Horizontal alignment for the text pair."},{"name":"as","type":"ElementType","default":"div","required":false,"description":"Override the semantic wrapper while preserving the governed layout styles."},{"name":"description","type":"ReactNode","required":false,"description":"Supporting body copy paired with the title."},{"name":"descriptionAs","type":"'div' | 'p' | 'span'","default":"div","required":false,"description":"Override the description tag without altering the visual type ramp."},{"name":"eyebrow","type":"string","required":false,"description":"Optional overline or category cue displayed above the title."},{"name":"id","type":"string","required":false,"description":"When provided on the \`numbered\` size, renders a copy-anchor action next to the title on hover. Should match the section's DOM id."},{"name":"size","type":"'hero' | 'heroXl' | 'section' | 'metric' | 'detail' | 'numbered'","required":true,"description":"Preset controlling title and body type pairing."},{"name":"title","type":"string","required":true,"description":"Primary heading copy rendered by the lockup."},{"name":"titleAs","type":"'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'","required":false,"description":"Override the title tag without altering the visual type ramp."}],"observedTokens":[{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":22,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.typeStyles","sourceLine":62,"sourceSnippet":"// deliberate metric deviations) — the redundant \`...hds.typeStyles.*\` spreads"},{"raw":"hds.layout.proseMaxWidth","tokenPath":"semantic.layout.prose.maxWidth","sourceLine":74,"sourceSnippet":"maxWidth: hds.layout.proseMaxWidth,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":94,"sourceSnippet":"gap: hds.semantic.space.component.gap,"}]},"TileGrid":{"filePath":"src/app/components/tile-grid.tsx","description":"Auto-fill responsive grid for status/micro tiles. Wraps tile children in a one-line grid declaration so pages don't repeat the auto-fill minmax recipe.","category":"Layout","hidden":false,"props":[{"name":"gap","type":"\\"sm\\" | \\"md\\" | \\"xs\\"","default":"sm","required":false,"description":"Gap token between tiles. Defaults to 'sm' (12px)."},{"name":"minTileWidth","type":"string","default":"260px","required":false,"description":"Minimum tile width before the grid wraps. Defaults to 260px."}],"observedTokens":[]},"ToastProvider":{"filePath":"src/app/components/toast.tsx","description":"Provider + viewport for the toast system. Wrap the app root once.","category":"Feedback","hidden":false,"props":[{"name":"duration","type":"number","default":"5000","required":false,"description":"Default auto-dismiss in ms (Radix default is 5000)."},{"name":"swipeDirection","type":"SwipeDirection","default":"right","required":false,"description":"Swipe-to-dismiss direction."}],"observedTokens":[]},"Token":{"filePath":"src/app/components/token.tsx","description":"Token - reflective token specimen for unified node-based token views.","category":"Display","hidden":false,"props":[{"name":"accentColor","type":"string","required":true,"description":""},{"name":"aria-label","type":"string","required":false,"description":""},{"name":"className","type":"string","required":false,"description":""},{"name":"description","type":"ReactNode","required":false,"description":""},{"name":"fullWidth","type":"boolean","required":false,"description":""},{"name":"isSelected","type":"boolean","required":false,"description":""},{"name":"isSourceNode","type":"boolean","required":false,"description":""},{"name":"label","type":"string","required":true,"description":""},{"name":"leadingSlot","type":"ReactNode","required":false,"description":"Optional left-side slot for compact node content, e.g. curve previews."},{"name":"nodeRef","type":"(el: HTMLElement) => void","required":false,"description":""},{"name":"nowrap","type":"boolean","required":false,"description":""},{"name":"onClick","type":"(() => void) | (() => void)","required":false,"description":""},{"name":"pathDisplayDepth","type":"number","required":false,"description":""},{"name":"pathDisplayLeadingDot","type":"boolean","required":false,"description":""},{"name":"pathDisplayMode","type":"\\"full\\" | \\"compressed\\"","required":false,"description":""},{"name":"rawValue","type":"ReactNode","required":false,"description":""},{"name":"swatchVar","type":"string","required":false,"description":""},{"name":"tokenPath","type":"string","required":false,"description":"Optional explicit token path for deep-linking node instances. Falls back to children when omitted."},{"name":"truncateFromStart","type":"boolean","required":false,"description":"When true, overflow ellipsis appears at the start (left) instead of the end."},{"name":"value","type":"string","required":true,"description":""},{"name":"variant","type":"\\"node\\" | \\"diagram\\"","required":false,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":71,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":80,"sourceSnippet":"const tokenSwatchTextGap = hds.semantic.space.subgrid.gap;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":84,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.semantic.space.subgrid.hairline","tokenPath":"semantic.space.subgrid.hairline","sourceLine":87,"sourceSnippet":"marginLeft: \`calc(\${hds.semantic.space.subgrid.hairline} * -1)\`,"}]}}`), ji = {
+const Mi = /* @__PURE__ */ JSON.parse(`{"Alert":{"filePath":"src/app/components/alert.tsx","description":"Alert - compact feedback surface with contextual severity.","category":"Feedback","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"Main alert message content."},{"name":"title","type":"string","required":false,"description":"Optional heading shown above the body copy."},{"name":"tone","type":"'success' | 'danger' | 'warning' | 'info'","default":"info","required":false,"description":"Feedback tone that controls icon, border, and surface treatment."}],"observedTokens":[{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":72,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.motion.productive.easing","sourceLine":72,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":86,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":95,"sourceSnippet":"...hds.typeStyles.caption,"}]},"Avatar":{"filePath":"src/app/components/avatar.tsx","description":"Circular avatar. Renders the image when available, else initials from \`alt\`.","category":"Display","hidden":false,"props":[{"name":"alt","type":"string","required":true,"description":"Required descriptive alt / accessible name (e.g. the person's name)."},{"name":"initials","type":"string","required":false,"description":"Explicit initials. Falls back to the first letters derived from \`alt\`."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"src","type":"string","required":false,"description":"Image source. When absent or it fails to load, the initials fallback shows."}],"observedTokens":[]},"Badge":{"filePath":"src/app/components/badge.tsx","description":"Compact metadata/status chip. Tone is the only styling input.","category":"Feedback","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"span","required":false,"description":"Element rendered as the badge wrapper. Defaults to 'span'."},{"name":"tone","type":"\\"success\\" | \\"danger\\" | \\"warning\\" | \\"info\\" | \\"neutral\\" | \\"inProgress\\"","required":false,"description":""}],"observedTokens":[]},"Breadcrumb":{"filePath":"src/app/components/breadcrumb.tsx","description":"Breadcrumb trail. Links route through the HDS router seam (plain anchors with no router, client-side nav when a router adapter is provided). The final item is marked aria-current=\\"page\\".","category":"Navigation","hidden":false,"props":[{"name":"items","type":"BreadcrumbItem[]","required":true,"description":"Ordered trail from root → current. The last item renders as the current page."},{"name":"label","type":"string","default":"Breadcrumb","required":false,"description":"Accessible label for the nav landmark."}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":56,"sourceSnippet":"style={hds.typeStyles.ui}"}]},"Callout":{"filePath":"src/app/components/callout.tsx","description":"Tone-driven side-rule callout for status, quotes, hypotheses.","category":"Feedback","hidden":false,"props":[{"name":"italic","type":"boolean","default":"false","required":false,"description":"Italicize the body content (quote / pull-quote pattern)."},{"name":"tone","type":"'accent' | 'info' | 'success' | 'warning' | 'danger'","default":"info","required":false,"description":"Tone — drives the left rule color and bg tint."}],"observedTokens":[]},"Card":{"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card tone=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. Tone prop: 'default' (neutral border) | 'accent' (border-accent + raised bg) for highlighted variants like \\"recommended package\\", or feedback tones for status-driven cards. Tone replaces hand-rolled \`pkgHighlight\`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + \`padding=\\"none\\"\`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass \`className=\\"shadow-...\\"\` for a hover/floating treatment on interactive cards.","category":"Display","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","required":false,"description":"Render-as element for the root wrapper."},{"name":"bordered","type":"boolean","default":"false","required":false,"description":"Opt in to a neutral 1px border on the default tone. Use for genuinely discrete standalone records in sparse layouts where containment helps legibility. Default false — repeated cards in grids should stay borderless and rely on whitespace, rails, or section dividers."},{"name":"gap","type":"GapOption","default":"tight","required":false,"description":"Legacy gap prop for the root flex container."},{"name":"noPadding","type":"boolean","default":"false","required":false,"description":"Legacy convenience flag that removes inner padding."},{"name":"padding","type":"PaddingOption","default":"component","required":false,"description":"Legacy padding prop for raw-children cards. Use \`none\` when composing parts."},{"name":"tone","type":"'default' | 'accent' | 'success' | 'warning' | 'danger'","default":"default","required":false,"description":"Visual tone — controls border color/weight. Default is BORDERLESS; \`accent\` for highlighted entries (e.g. recommended package); semantic tones for status-driven cards (border IS the signal). For a neutral-bordered card without semantic meaning, pass \`bordered\` instead of overloading tone."}],"observedTokens":[{"raw":"hds.space","sourceLine":52,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":308,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":319,"sourceSnippet":"transition: \`width \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":327,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":368,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":378,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CinematicLink":{"filePath":"src/app/components/cinematic-link.tsx","description":"CinematicLink - cinematic editorial link treatment for portfolio surfaces.","category":"Branding","hidden":false,"props":[{"name":"href","type":"string","required":true,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":24,"sourceSnippet":"...hds.typeStyles.ui,"}]},"CodeBlock":{"filePath":"src/app/components/code-block.tsx","description":"CodeBlock - code display with copy button and optional collapsible toggle.","category":"Display","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Optional class hook for layout-specific styling."},{"name":"code","type":"string","required":true,"description":"Code string displayed in the block."},{"name":"collapsible","type":"boolean","default":"false","required":false,"description":"When true (block variant only), code is hidden behind a \\"Show code\\" toggle. Off by default to preserve backward compatibility for existing consumers."},{"name":"defaultExpanded","type":"boolean","default":"false","required":false,"description":"When \`collapsible\`, controls the initial state. Defaults to collapsed."},{"name":"filename","type":"string","required":false,"description":"Optional filename label shown in the header."},{"name":"language","type":"string","required":false,"description":"Optional language label shown in the header (also drives syntax coloring)."},{"name":"truncateFromStart","type":"boolean","default":"false","required":false,"description":"When true, inline code truncates from the start rather than the end."},{"name":"variant","type":"\\"inline\\" | \\"block\\"","default":"block","required":false,"description":"Visual presentation mode for block snippets vs inline single-line code."}],"observedTokens":[{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":18,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.size[32]","tokenPath":"primitive.size.32","sourceLine":21,"sourceSnippet":"minHeight: hds.size[32],"},{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":22,"sourceSnippet":"border: \`\${hds.borderWidth.default} solid var(--semantic-color-border-default)\`,"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":24,"sourceSnippet":"borderRadius: hds.borderRadius.action,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":28,"sourceSnippet":"paddingLeft: hds.semantic.space.component.gap,"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":43,"sourceSnippet":"transition: \`background-color \${hds.motion.productive.duration}s ease, color \${hds.motion.productive.duration}s ease, transform \${hds.motion.productive.duration}s ease\`,"},{"raw":"hds.semantic.space.component.padding","tokenPath":"semantic.space.component.padding","sourceLine":49,"sourceSnippet":"paddingLeft: hds.semantic.space.component.padding,"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":85,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.semantic.space.section.stack","tokenPath":"semantic.space.section.stack","sourceLine":236,"sourceSnippet":"padding: hds.semantic.space.section.stack,"}]},"Combobox":{"filePath":"src/app/components/combobox.tsx","description":"Combobox — searchable single-select (Popover + filtered listbox). A select-with-search built on the HDS Popover. The trigger shows the current selection; opening reveals a search field that filters the option list. Full keyboard support (↑/↓ to move, Enter to choose, Esc/outside-click to close) and listbox/option ARIA. Controlled via \`value\` + \`onChange\`. <Combobox options={[{ value: 'us', label: 'United States' }, …]} value={country} onChange={setCountry} placeholder=\\"Select a country\\" />","category":"Inputs","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":"Accessible label for the trigger (when not labelled by a <Field>)."},{"name":"className","type":"string","required":false,"description":""},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"emptyMessage","type":"string","default":"No results","required":false,"description":"Shown when the filter matches no options."},{"name":"onChange","type":"(value: string) => void","required":true,"description":"Fired with the chosen option's value."},{"name":"options","type":"ComboboxOption[]","required":true,"description":"Selectable options."},{"name":"placeholder","type":"string","default":"Select…","required":false,"description":"Trigger text when nothing is selected."},{"name":"searchPlaceholder","type":"string","default":"Search…","required":false,"description":"Placeholder for the search field."},{"name":"value","type":"string","required":true,"description":"Currently selected value, or null when nothing is chosen."}],"observedTokens":[]},"ComponentInstanceMatrix":{"filePath":"src/app/components/component-instance-matrix.tsx","description":"ComponentInstanceMatrix — responsive specimen matrix for variant and state parity.","category":"Utilities","hidden":false,"props":[{"name":"componentName","type":"string","required":true,"description":""},{"name":"dimensionX","type":"string","required":true,"description":""},{"name":"dimensionY","type":"string","required":true,"description":""},{"name":"freezeRowState","type":"boolean","default":"false","required":false,"description":"Wrap each row's rendered instance in FreezeState so the visual state is frozen."},{"name":"isMobile","type":"boolean","required":true,"description":""},{"name":"renderInstance","type":"(rowKey: string, columnKey: string) => ReactNode","required":true,"description":""},{"name":"rowLabelTone","type":"\\"primary\\" | \\"secondary\\"","default":"primary","required":false,"description":""},{"name":"rowLabelWidth","type":"number","default":"120","required":false,"description":""},{"name":"title","type":"string","required":false,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":128,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":141,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.semantic.space.layout.gap","tokenPath":"semantic.space.layout.gap","sourceLine":144,"sourceSnippet":"paddingBottom: hds.semantic.space.layout.gap,"}]},"Container":{"filePath":"src/app/components/container.tsx","description":"Container — semantic width-constrained layout. Centers content horizontally and applies semantic max-width constraints. - maxWidth options: 'content' (760px prose) | 'max' (1200px full layout) - No arbitrary pixel values allowed Usage: <Container maxWidth=\\"max\\"> <div>...</div> </Container>","category":"Layout","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"Container content."},{"name":"className","type":"string","required":false,"description":"Optional class hook."},{"name":"maxWidth","type":"'content' | 'max'","default":"max","required":false,"description":"Max width: 'content' (760px for prose) | 'max' (1200px for full layouts). Defaults to 'max'."},{"name":"padding","type":"string","default":"var(--semantic-space-component-padding)","required":false,"description":"Deprecated. Container no longer owns internal padding."},{"name":"style","type":"CSSProperties","required":false,"description":"Optional inline styles for layout-specific adjustments."}],"observedTokens":[]},"Dialog":{"filePath":"src/app/components/dialog.tsx","description":"Dialog — modal dialog (shadcn baseline, compound parts). shadcn-baseline implementation (8s-7): Radix Dialog primitive (@radix-ui/react-dialog) themed with role tokens. Provides focus trap, scroll lock, ESC-to-close, backdrop scrim, and portal mounting out of the box. <Dialog> <Dialog.Trigger asChild> <Button>Open</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Confirm</Dialog.Title> <Dialog.Description>Are you sure?</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant=\\"secondary\\">Cancel</Button> </Dialog.Close> </Dialog.Footer> </Dialog.Content> </Dialog> Surface uses role.popover (semantic.color.surface.overlay) + shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is a foreground/80 wash so it picks up the theme without a hardcoded black. The close affordance is rendered as an absolutely-positioned X inside Content; pass \`hideClose\` to opt out for fully-custom layouts.","category":"Overlays","hidden":false,"props":[{"name":"children","type":"ReactNode","required":false,"description":"Children — typically \`Dialog.Trigger\` and \`Dialog.Content\`."},{"name":"defaultOpen","type":"boolean","required":false,"description":"Initial open state for uncontrolled usage."},{"name":"modal","type":"boolean","required":false,"description":"When true (default), traps focus and locks scroll while open."},{"name":"open","type":"boolean","required":false,"description":"Controlled open state."}],"observedTokens":[]},"Disclosure":{"filePath":"src/app/components/disclosure.tsx","description":"Disclosure - compact disclosure surface for optional explanatory content.","category":"Layout","hidden":false,"props":[{"name":"accent","type":"boolean","default":"false","required":false,"description":"Keeps the disclosure visually highlighted even when closed."},{"name":"children","type":"ReactNode","required":true,"description":"Content revealed when the disclosure is expanded."},{"name":"className","type":"string","required":false,"description":"Optional className passthrough for the trigger."},{"name":"contentStyle","type":"CSSProperties","required":false,"description":"Optional inner content style overrides."},{"name":"defaultOpen","type":"boolean","default":"false","required":false,"description":"Whether the disclosure starts in the open state."},{"name":"label","type":"ReactNode","required":true,"description":"Summary label rendered in the disclosure trigger. Accepts a string or ReactNode for icon+label combos."},{"name":"onOpenChange","type":"(open: boolean) => void","required":false,"description":"Called whenever the disclosure toggles."},{"name":"open","type":"boolean","required":false,"description":"Controlled open state."},{"name":"triggerStyle","type":"CSSProperties","required":false,"description":"Optional trigger style overrides."},{"name":"variant","type":"'panel' | 'nav' | 'card'","default":"panel","required":false,"description":"Visual treatment for docs panels, nav groups, or summary cards."}],"observedTokens":[{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":88,"sourceSnippet":"gap: hds.semantic.space.sidebar.gap,"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":93,"sourceSnippet":"\`border-color \${hds.motion.productive.duration}s \${hds.motion.productive.easing}\`,"},{"raw":"hds.motion.productive.easing","sourceLine":93,"sourceSnippet":"\`border-color \${hds.motion.productive.duration}s \${hds.motion.productive.easing}\`,"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":107,"sourceSnippet":"borderRadius: hds.borderRadius.action,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":112,"sourceSnippet":"columnGap: hds.semantic.space.component.gap,"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":127,"sourceSnippet":"? hds.semantic.space.sidebar.sectionGap"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":134,"sourceSnippet":"...(variant === 'nav' ? hds.typeStyles.ui : hds.typeStyles.caption),"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":134,"sourceSnippet":"...(variant === 'nav' ? hds.typeStyles.ui : hds.typeStyles.caption),"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":167,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.iconSize.small","tokenPath":"primitive.typography.size.base","sourceLine":183,"sourceSnippet":"width: hds.iconSize.small,"}]},"Divider":{"filePath":"src/app/components/divider.tsx","description":"Divider — semantic separator between content regions.","category":"Layout","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Optional class hook for parent-level styling."},{"name":"orientation","type":"\\"horizontal\\" | \\"vertical\\"","default":"horizontal","required":false,"description":"Divider orientation."},{"name":"spacing","type":"string | number","required":false,"description":"Perpendicular spacing around the divider."},{"name":"strong","type":"boolean","default":"false","required":false,"description":"Increase the stroke weight for stronger separation."},{"name":"style","type":"CSSProperties","required":false,"description":"Optional inline styles for one-off layout adjustments."}],"observedTokens":[{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":53,"sourceSnippet":"borderTop: \`\${hds.borderWidth.default} solid \${borderColor}\`,"}]},"DocLinkCard":{"filePath":"src/app/components/doc-link-card.tsx","description":"DocLinkCard - navigation card for editorial and documentation cross-links.","category":"Navigation","hidden":false,"props":[{"name":"accent","type":"boolean","default":"false","required":false,"description":"Tint the card surface for emphasis."},{"name":"affordance","type":"\\"up-right\\" | \\"right\\" | \\"left\\"","default":"up-right","required":false,"description":"Directional affordance for the header icon."},{"name":"description","type":"string","required":false,"description":"Supporting body copy shown below the title."},{"name":"disabled","type":"boolean","default":"false","required":false,"description":"Disable navigation and reduce contrast."},{"name":"href","type":"string","required":true,"description":"Destination route or URL."},{"name":"icon","type":"LucideIcon","required":true,"description":"Icon rendered in the card header."},{"name":"meta","type":"string","required":false,"description":"Optional metadata label rendered above the title."},{"name":"metaStyle","type":"\\"caption\\" | \\"ui\\"","default":"caption","required":false,"description":"Typography style used for the meta label."},{"name":"title","type":"string","required":true,"description":"Primary title displayed in the card."},{"name":"variant","type":"\\"feature\\" | \\"pager\\"","default":"feature","required":false,"description":"Card layout variant."}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":14,"sourceSnippet":"const bodyTextStyle = hds.typeStyles.ui;"},{"raw":"hds.semantic.space.layout.gap","tokenPath":"semantic.space.layout.gap","sourceLine":41,"sourceSnippet":"padding: hds.semantic.space.layout.gap,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":42,"sourceSnippet":"gap: hds.semantic.space.component.gap,"},{"raw":"hds.typeStyles.heading3","tokenPath":"semantic.typography.h3","sourceLine":43,"sourceSnippet":"titleStyle: { ...hds.typeStyles.heading3, color: 'var(--semantic-color-content-primary)' },"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":45,"sourceSnippet":"iconGap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":81,"sourceSnippet":"const metaTextStyle = metaStyle === 'ui' ? hds.typeStyles.ui : hds.typeStyles.caption;"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":85,"sourceSnippet":"duration: hds.motion.productive.duration,"},{"raw":"hds.motion.productive.easing","sourceLine":86,"sourceSnippet":"ease: hds.motion.productive.easing,"}]},"EmptyState":{"filePath":"src/app/components/empty-state.tsx","description":"EmptyState — consistent no-data placeholder for lists, grids, and sections. communicate \\"no data yet\\" with consistent muted typography instead of agents inventing one-off \`<p>No items.</p>\` lines. use for full-page errors (use ErrorPage) or for loading states (use a skeleton). Do NOT wrap in Surface or Card — the empty state is a typographic message, not a chrome-bearing container.","category":"Display","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Escape hatch for layout adjustments — token-only, no business logic."},{"name":"description","type":"ReactNode","required":false,"description":"Optional supporting line."},{"name":"title","type":"ReactNode","required":true,"description":"Primary message. Sentence-case, no trailing period required."}],"observedTokens":[]},"Field":{"filePath":"src/app/components/field.tsx","description":"Caption label paired with a value — used in metadata grids and read-only forms.","category":"Display","hidden":false,"props":[{"name":"label","type":"string","required":true,"description":""},{"name":"mono","type":"boolean","default":"false","required":false,"description":""},{"name":"tone","type":"\\"success\\" | \\"danger\\" | \\"warning\\" | \\"default\\"","default":"default","required":false,"description":""},{"name":"value","type":"ReactNode","required":false,"description":""}],"observedTokens":[]},"Form":{"filePath":"src/app/components/form.tsx","description":"Styled \`<form>\` with consistent vertical field rhythm.","category":"Inputs","hidden":false,"props":[],"observedTokens":[]},"FormField":{"filePath":"src/app/components/form.tsx","description":"Label + description + error wrapper that wires the a11y relationships onto its single child control via cloneElement. Validation-library agnostic — pass \`error\` from whatever you use. For controls with an externally-managed callback ref (e.g. react-hook-form), use \`FormFieldShell\` + \`useFieldWiring\` instead.","category":"Inputs","hidden":false,"props":[{"name":"children","type":"ReactElement<any, string | JSXElementConstructor<any>>","required":true,"description":"The single form control (native input, Select, Combobox, …)."},{"name":"className","type":"string","required":false,"description":""},{"name":"description","type":"string","required":false,"description":"Helper text below the control; linked via aria-describedby."},{"name":"error","type":"string","required":false,"description":"Error message; when set, marks the control aria-invalid and links it."},{"name":"htmlFor","type":"string","required":false,"description":"Explicit control id. Defaults to a generated id."},{"name":"label","type":"string","required":true,"description":"Field label, associated to the control via htmlFor/id."},{"name":"required","type":"boolean","default":"false","required":false,"description":"Adds a required marker and sets \`required\` on the control."}],"observedTokens":[]},"FormFieldShell":{"filePath":"src/app/components/form.tsx","description":"Presentational label + control slot + helper/error markup. Renders \`children\` verbatim — it does NOT clone — so it is safe to use with controls that own a callback ref. Pair it with \`useFieldWiring\` to apply ids/aria yourself.","category":"Inputs","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"The already-rendered control (already carrying its own id/aria props)."},{"name":"className","type":"string","required":false,"description":""},{"name":"controlId","type":"string","required":true,"description":"Id of the control rendered as \`children\` (drives the label's htmlFor)."},{"name":"description","type":"string","required":false,"description":""},{"name":"error","type":"string","required":false,"description":""},{"name":"label","type":"string","required":true,"description":""},{"name":"required","type":"boolean","default":"false","required":false,"description":""}],"observedTokens":[]},"FoundationSwatch":{"filePath":"src/app/components/foundation-swatch.tsx","description":"FoundationSwatch - governed foundation specimen for color and semantic role previews.","category":"Utilities","hidden":false,"props":[{"name":"background","type":"string","required":true,"description":"Background fill or tone shown by the specimen."},{"name":"bordered","type":"boolean","default":"false","required":false,"description":"Whether to show a bordered specimen surface."},{"name":"details","type":"string[]","required":false,"description":"Optional supporting lines shown inside the specimen."},{"name":"foreground","type":"string","default":"var(--semantic-color-content-primary)","required":false,"description":"Foreground color used for text inside the specimen."},{"name":"hidePreviewLabel","type":"boolean","default":"false","required":false,"description":"Whether to hide the preview label inside the swatch specimen."},{"name":"label","type":"string","required":true,"description":"Primary label rendered inside or below the swatch."},{"name":"note","type":"ReactNode","required":false,"description":"Optional note rendered below card-style swatches."},{"name":"previewPosition","type":"'bottom-left' | 'top-left' | 'center'","default":"center","required":false,"description":"Placement of the specimen content inside the swatch surface."},{"name":"specimen","type":"ReactNode","required":false,"description":"Custom specimen content rendered inside card-style swatches."},{"name":"swatchVar","type":"string","required":false,"description":"Explicit color value (hex or CSS var name) to pin the token chip's swatch square, overriding auto-resolution from tokenPath."},{"name":"tokenDisplayPreset","type":"'depth1' | 'depth2' | 'full'","default":"depth2","required":false,"description":"Shorthand preset for how the token path renders inside the specimen."},{"name":"tokenPath","type":"string","required":false,"description":"Optional token path rendered as a condensed node inside the swatch surface."},{"name":"value","type":"string","required":false,"description":"Optional text/value line shown inside the specimen."}],"observedTokens":[{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":70,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":79,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":149,"sourceSnippet":"? hds.semantic.space.component.gap"}]},"Grid":{"filePath":"src/app/components/grid.tsx","description":"Grid — responsive grid composition primitive. Enforces semantic gap and column values. No arbitrary CSS grid. - layout='fixed': responsive base (collapses via CSS at tablet/mobile). \`columns\` sets desktop count (default 12). Tablet/mobile clamp to min(8, cols) and min(4, cols) respectively. - layout='auto-fit': responsive card wrapping via auto-fit. - subgrid=true: sets gridTemplateColumns:'subgrid' for nested alignment. Usage (default responsive 12-col): <Grid> <Grid.Item colSpan={6}>…</Grid.Item> <Grid.Item colSpan={6}>…</Grid.Item> </Grid> Usage (responsive auto-fit): <Grid layout=\\"auto-fit\\"> <Card /> <Card /> </Grid>","category":"Layout","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the outer wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":true,"description":"Grid content."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"columns","type":"number","default":"12","required":false,"description":"Desktop column count for layout='fixed'. Tablet clamps to min(8,n), mobile to min(4,n). Defaults to 12."},{"name":"gap","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"inset","required":false,"description":"Gap between grid items: semantic only. Defaults to 'inset' (32px)."},{"name":"layout","type":"'fixed' | 'auto-fit'","default":"fixed","required":false,"description":"Grid layout mode: 'fixed' (responsive) or 'auto-fit' (card wrapping). Defaults to 'fixed'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."},{"name":"subgrid","type":"boolean","default":"false","required":false,"description":"If true, sets gridTemplateColumns:'subgrid' for nested grid alignment."}],"observedTokens":[{"raw":"hds.breakpoints.sm","sourceLine":94,"sourceSnippet":"if (width <= hds.breakpoints.sm) {"},{"raw":"hds.breakpoints.lg","sourceLine":98,"sourceSnippet":"if (width <= hds.breakpoints.lg) {"}]},"HdsCheckbox":{"filePath":"src/app/components/checkbox.tsx","description":"HdsCheckbox — custom-drawn checkbox with check / indeterminate glyph.","category":"Inputs","hidden":false,"props":[{"name":"checked","type":"boolean","required":true,"description":"Current checked state."},{"name":"indeterminate","type":"boolean","default":"false","required":false,"description":"Mixed state — visually a dash; supersedes the check glyph."},{"name":"label","type":"string","required":true,"description":"Checkbox label displayed next to the control."},{"name":"onChange","type":"(v: boolean) => void","required":true,"description":"Called when the checkbox changes."}],"observedTokens":[{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":68,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.motion.productive.easing","sourceLine":68,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":78,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":81,"sourceSnippet":"paddingLeft: hds.semantic.space.component.gap,"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":83,"sourceSnippet":"borderRadius: hds.borderRadius.action,"},{"raw":"hds.size[20]","tokenPath":"primitive.size.20","sourceLine":127,"sourceSnippet":"width: hds.size[20],"},{"raw":"hds.borderRadius[4]","tokenPath":"primitive.radius.4","sourceLine":129,"sourceSnippet":"borderRadius: hds.borderRadius[4],"},{"raw":"hds.borderWidth.sm","tokenPath":"primitive.borderWidth.sm","sourceLine":130,"sourceSnippet":"border: \`\${hds.borderWidth.sm} solid \${borderColor}\`,"},{"raw":"hds.space.px1","tokenPath":"primitive.space.px1","sourceLine":147,"sourceSnippet":"animate={{ x: isPressed ? hds.space.px1 : 0 }}"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":150,"sourceSnippet":"...hds.typeStyles.ui,"}]},"HdsRadio":{"filePath":"src/app/components/radio.tsx","description":"HdsRadio — radio button with animated selection indicator.","category":"Inputs","hidden":false,"props":[{"name":"checked","type":"boolean","required":true,"description":"Current checked state."},{"name":"label","type":"string","required":true,"description":"Radio label displayed next to the control."},{"name":"onChange","type":"(v: boolean) => void","required":true,"description":"Called when the radio changes."}],"observedTokens":[{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":58,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.motion.productive.easing","sourceLine":58,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":126,"sourceSnippet":"duration: hds.motion.expressive.duration,"},{"raw":"hds.size[8]","tokenPath":"primitive.size.8","sourceLine":130,"sourceSnippet":"width: hds.size[8],"},{"raw":"hds.borderRadius.full","tokenPath":"primitive.radius.full","sourceLine":132,"sourceSnippet":"borderRadius: hds.borderRadius.full,"},{"raw":"hds.space.px1","tokenPath":"primitive.space.px1","sourceLine":142,"sourceSnippet":"x: isPressed ? hds.space.px1 : 0,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":149,"sourceSnippet":"...hds.typeStyles.ui,"}]},"HdsSlider":{"filePath":"src/app/components/slider.tsx","description":"HdsSlider — range slider with label and value display.","category":"Inputs","hidden":false,"props":[{"name":"label","type":"string","required":true,"description":"Slider label."},{"name":"max","type":"number","required":true,"description":"Maximum value in the range."},{"name":"min","type":"number","required":true,"description":"Minimum value in the range."},{"name":"onChange","type":"(v: number) => void","required":true,"description":"Called when the slider value changes."},{"name":"step","type":"number","default":"1","required":false,"description":"Step increment for the range input."},{"name":"value","type":"number","required":true,"description":"Current slider value."}],"observedTokens":[{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":39,"sourceSnippet":"style={{ display: 'flex', flexDirection: 'column', gap: hds.semantic.space.component.gap }}"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":51,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.space.px2","tokenPath":"primitive.space.px2","sourceLine":60,"sourceSnippet":"initial={{ opacity: 0.72, y: hds.space.px2 }}"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":63,"sourceSnippet":"duration: hds.motion.productive.duration,"},{"raw":"hds.motion.productive.easing","sourceLine":64,"sourceSnippet":"ease: hds.motion.productive.easing,"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":66,"sourceSnippet":"style={{ ...hds.typeStyles.technical, flexShrink: 0 }}"},{"raw":"hds.size[20]","tokenPath":"primitive.size.20","sourceLine":74,"sourceSnippet":"height: hds.size[20],"},{"raw":"hds.size[8]","tokenPath":"primitive.size.8","sourceLine":86,"sourceSnippet":"height: hds.size[8],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":98,"sourceSnippet":"duration: hds.motion.expressive.duration,"},{"raw":"hds.borderRadius.full","tokenPath":"primitive.radius.full","sourceLine":103,"sourceSnippet":"borderRadius: hds.borderRadius.full,"},{"raw":"hds.zIndex.focus","sourceLine":131,"sourceSnippet":"zIndex: hds.zIndex.focus,"}]},"HdsToggle":{"filePath":"src/app/components/toggle.tsx","description":"HdsToggle — boolean on/off toggle with animated thumb.","category":"Inputs","hidden":false,"props":[{"name":"checked","type":"boolean","required":true,"description":"Current checked state."},{"name":"label","type":"string","required":true,"description":"Toggle label displayed next to the control."},{"name":"onChange","type":"(v: boolean) => void","required":true,"description":"Called when the toggle changes."}],"observedTokens":[{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":44,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.motion.productive.easing","sourceLine":44,"sourceSnippet":"transition={{ duration: hds.motion.productive.duration, ease: hds.motion.productive.easing }}"},{"raw":"hds.space.px1","tokenPath":"primitive.space.px1","sourceLine":51,"sourceSnippet":"y: isPressed ? hds.space.px1 : 0,"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":56,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":59,"sourceSnippet":"paddingLeft: hds.semantic.space.component.gap,"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":61,"sourceSnippet":"borderRadius: hds.borderRadius.action,"},{"raw":"hds.borderWidth.sm","tokenPath":"primitive.borderWidth.sm","sourceLine":70,"sourceSnippet":"? \`\${hds.borderWidth.sm} solid var(--semantic-color-border-accent)\`"},{"raw":"hds.size[16]","tokenPath":"primitive.size.16","sourceLine":102,"sourceSnippet":"width: hds.size[16],"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":120,"sourceSnippet":"...hds.typeStyles.ui,"}]},"HeadingStack":{"filePath":"src/app/components/heading-stack.tsx","description":"HeadingStack — enforced vertical rhythm for heading + subheading pairs. Automatically handles gap and secondary color, preventing manual stacking. - Heading level: 'heading1' | 'heading2' | 'heading3' - Gap: px4 (tight) | px8 (default) - Subheading color: always var(--semantic-color-content-secondary) GUARDRAIL: Never manually stack headings using Stack. Always use HeadingStack. Usage: <HeadingStack level=\\"heading1\\" heading=\\"Main Title\\" subheading=\\"Subtitle text\\" /> <HeadingStack level=\\"heading2\\" heading=\\"Section\\" subheading=\\"Description\\" gap=\\"px4\\" />","category":"Typography","hidden":false,"props":[{"name":"as","type":"ElementType","default":"div","required":false,"description":"Override the root semantic wrapper while preserving the governed layout styles."},{"name":"gap","type":"'px4' | 'px8'","default":"px8","required":false,"description":"Gap between heading and subheading: px4 (tight) | px8 (default)."},{"name":"heading","type":"string","required":true,"description":"The heading content (string)."},{"name":"headingAs","type":"'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'","required":false,"description":"Override the heading tag without altering the applied typography style."},{"name":"level","type":"'heading1' | 'heading2' | 'heading3'","required":true,"description":"Semantic heading level: heading1 | heading2 | heading3."},{"name":"subheading","type":"string","required":true,"description":"The supporting copy rendered beneath the heading."},{"name":"subheadingAs","type":"'p' | 'div' | 'span'","default":"p","required":false,"description":"Override the supporting-copy tag."}],"observedTokens":[{"raw":"hds.space","sourceLine":97,"sourceSnippet":"gap: hds.space[gap],"}]},"Icon":{"filePath":"src/app/components/icon.tsx","description":"Icon — semantic icon wrapper for Lucide icons.","category":"Display","hidden":false,"props":[{"name":"aria-hidden","type":"boolean | \\"true\\" | \\"false\\"","default":"true","required":false,"description":"\`aria-hidden\` defaults to true because HDS icons are decorative by default."},{"name":"className","type":"string","required":false,"description":"Optional class hook for layout or utility styling (rotation, transition, etc.)."},{"name":"color","type":"string","default":"currentColor","required":false,"description":"CSS color value or token, such as \`var(--semantic-color-content-secondary)\`."},{"name":"icon","type":"LucideIcon","required":true,"description":"Lucide icon component to render."},{"name":"size","type":"IconSize","default":"small","required":false,"description":"Size token from \`hds.iconSize\`."},{"name":"style","type":"CSSProperties","required":false,"description":"Optional inline styles for rare rotation, transition, or layout tweaks."},{"name":"weight","type":"\\"fill\\" | \\"bold\\" | \\"thin\\" | \\"light\\" | \\"regular\\" | \\"duotone\\"","required":false,"description":"Stroke weight shim for backward compatibility with former Phosphor weight prop. Maps to Lucide's \`strokeWidth\` (thin=1, light=1.5, regular=2, bold=2.5)."}],"observedTokens":[{"raw":"hds.iconSize","sourceLine":11,"sourceSnippet":"export type IconSize = keyof typeof hds.iconSize | number | string;"}]},"IconButton":{"filePath":"src/app/components/icon-button.tsx","description":"IconButton ” icon-only action trigger built on the shared Button primitive.","category":"Actions","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":"Accessible label fallback for backward compatibility."},{"name":"asChild","type":"boolean","required":false,"description":"Render the button chrome onto a single child element for link semantics."},{"name":"disabled","type":"boolean","required":false,"description":"Disable interaction. Mirrors the native HTML attribute."},{"name":"icon","type":"LucideIcon","required":true,"description":"Lucide icon rendered inside the button."},{"name":"iconColor","type":"string","required":false,"description":"Override the inner icon color."},{"name":"iconLeft","type":"ReactNode","required":false,"description":"Leading icon rendered before the label."},{"name":"iconRight","type":"ReactNode","required":false,"description":"Trailing icon rendered after the label."},{"name":"iconSize","type":"IconSize","required":false,"description":"Override the inner icon size; defaults to the matching button ramp size."},{"name":"label","type":"string","required":false,"description":"Accessible label for the icon button."},{"name":"loading","type":"boolean","required":false,"description":"Show a busy indicator and disable interaction."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":"Size token for the button itself."},{"name":"tone","type":"\\"success\\" | \\"danger\\" | \\"warning\\" | \\"info\\" | \\"neutral\\"","required":false,"description":""},{"name":"variant","type":"\\"primary\\" | \\"secondary\\" | \\"tertiary\\"","required":false,"description":""}],"observedTokens":[]},"InlineCode":{"filePath":"src/app/components/inline-code.tsx","description":"InlineCode — inline code chip for token paths, file paths, and code-adjacent prose.","category":"Display","hidden":false,"props":[{"name":"compact","type":"boolean","default":"false","required":false,"description":"Compact mode is tuned for dense body copy and table prose."},{"name":"copyable","type":"boolean","default":"false","required":false,"description":"Show a copy-to-clipboard button. children must be a string when true."},{"name":"style","type":"CSSProperties","required":false,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":37,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.borderRadius[0]","tokenPath":"primitive.radius.0","sourceLine":41,"sourceSnippet":"borderRadius: hds.borderRadius[0],"},{"raw":"hds.semantic.space.subgrid.hairline","tokenPath":"semantic.space.subgrid.hairline","sourceLine":42,"sourceSnippet":"paddingTop: compact ? hds.semantic.space.subgrid.hairline : hds.semantic.space.subgrid.gap,"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":42,"sourceSnippet":"paddingTop: compact ? hds.semantic.space.subgrid.hairline : hds.semantic.space.subgrid.gap,"}]},"InlineLink":{"filePath":"src/app/components/inline-link.tsx","description":"InlineLink ” inline navigation and external-link primitive for body copy.","category":"Navigation","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"Inline label or content to render inside the link."},{"name":"externalIcon","type":"boolean","default":"true","required":false,"description":"Append the external-link icon for non-internal URLs."},{"name":"href","type":"string","required":true,"description":"Destination route or URL."}],"observedTokens":[{"raw":"hds.semantic.space.subgrid.xs","tokenPath":"semantic.space.subgrid.xs","sourceLine":59,"sourceSnippet":"marginLeft: hds.semantic.space.subgrid.xs,"},{"raw":"hds.semantic.space.subgrid.hairline","tokenPath":"semantic.space.subgrid.hairline","sourceLine":60,"sourceSnippet":"marginBottom: hds.semantic.space.subgrid.hairline,"}]},"NavGroup":{"filePath":"src/app/components/nav-group.tsx","description":"NavGroup - labeled navigation group for stacks of nav items.","category":"Navigation","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":""},{"name":"collapsible","type":"boolean","default":"false","required":false,"description":""},{"name":"contentStyle","type":"CSSProperties","required":false,"description":""},{"name":"getExact","type":"(item: NavItem) => boolean","required":false,"description":""},{"name":"items","type":"NavItem[]","required":false,"description":""},{"name":"label","type":"string","required":false,"description":""},{"name":"level","type":"NavLevel","default":"section","required":false,"description":""},{"name":"onNavigate","type":"() => void","required":false,"description":""},{"name":"style","type":"CSSProperties","required":false,"description":""},{"name":"variant","type":"\\"side\\" | \\"toc\\"","default":"side","required":false,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":73,"sourceSnippet":"...(variant === 'side' ? hds.typeStyles.ui : hds.typeStyles.caption),"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":73,"sourceSnippet":"...(variant === 'side' ? hds.typeStyles.ui : hds.typeStyles.caption),"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":79,"sourceSnippet":"variant === 'toc' ? hds.semantic.space.sidebar.sectionGap : getNavLevelLeadingPadding(level),"},{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":81,"sourceSnippet":"variant === 'toc' ? hds.semantic.space.sidebar.gap : 'var(--component-nav-paddingX)',"}]},"NavItem":{"filePath":"src/app/components/nav-item.tsx","description":"NavItem - navigation row primitive for sidebars, table of contents, and list navigation.","category":"Navigation","hidden":false,"props":[{"name":"active","type":"boolean","default":"false","required":false,"description":"Marks the item as the current route."},{"name":"disabled","type":"boolean","default":"false","required":false,"description":"Disables interaction and muted the nav row."},{"name":"label","type":"string","required":true,"description":"Text label displayed inside the navigation row."},{"name":"level","type":"NavLevel","default":"root","required":false,"description":"Visual hierarchy level for the navigation row."},{"name":"onNavigate","type":"(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void","required":false,"description":"Navigation callback fired before the browser follows the link."},{"name":"variant","type":"'side' | 'toc'","default":"side","required":false,"description":"Visual layout variant for side nav or table of contents usage."}],"observedTokens":[{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":84,"sourceSnippet":"typeStyle: hds.typeStyles.ui,"},{"raw":"hds.semantic.space.sidebar.railPadding","tokenPath":"semantic.space.sidebar.railPadding","sourceLine":85,"sourceSnippet":"leadingPaddingX: hds.semantic.space.sidebar.railPadding,"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":92,"sourceSnippet":"leadingPaddingX: hds.semantic.space.sidebar.sectionGap,"},{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":93,"sourceSnippet":"trailingPaddingX: hds.semantic.space.sidebar.gap,"},{"raw":"hds.borderWidth.sm","tokenPath":"primitive.borderWidth.sm","sourceLine":188,"sourceSnippet":"outline: showFocus ? \`\${hds.borderWidth.sm} solid var(--semantic-color-border-accent)\` : 'none',"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":192,"sourceSnippet":"transition: \`background-color \${hds.motion.productive.duration}s ease, color \${hds.motion.productive.duration}s ease\`,"}]},"Page":{"filePath":"src/app/components/page.tsx","description":"Page — standard page shell. Wraps page content in Container (width constraint) and applies the canonical vertical padding so content breathes against the viewport edges on scroll. Use as the outermost element of any new page so vertical rhythm is consistent across the system without per-page reinvention. Footer: every page mounted under HDSLayout (the standard route shell) gets a shared footer rendered after this component's content, with bottom space below the footer owned by the layout shell. Page intentionally does not render its own footer — the shell is the single source of truth. Use Container directly only for full-bleed surfaces (sketches, hero sections, embedded canvases) where the page owns its own vertical padding. Usage: <Page> <Stack direction=\\"column\\" gap=\\"spacious\\">...</Stack> </Page> <Page maxWidth=\\"content\\" paddingY=\\"compact\\"> <article>...</article> </Page>","category":"Layout","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":""},{"name":"maxWidth","type":"'content' | 'max'","default":"max","required":false,"description":"Max width: 'content' (760px for prose) | 'max' (1200px). Defaults to 'max'."},{"name":"paddingY","type":"'default' | 'compact' | 'none'","default":"default","required":false,"description":"Vertical padding token: 'default' (48/64) | 'compact' (24/32) | 'none'. Defaults to 'default'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch for narrow page-specific adjustments."}],"observedTokens":[{"raw":"hds.space.px48","tokenPath":"primitive.space.px48","sourceLine":37,"sourceSnippet":"default: { top: hds.space.px48, bottom: hds.space.px64 },"},{"raw":"hds.space.px64","tokenPath":"primitive.space.px64","sourceLine":37,"sourceSnippet":"default: { top: hds.space.px48, bottom: hds.space.px64 },"},{"raw":"hds.space.px24","tokenPath":"primitive.space.px24","sourceLine":38,"sourceSnippet":"compact: { top: hds.space.px24, bottom: hds.space.px32 },"},{"raw":"hds.space.px32","tokenPath":"primitive.space.px32","sourceLine":38,"sourceSnippet":"compact: { top: hds.space.px24, bottom: hds.space.px32 },"}]},"Pagination":{"filePath":"src/app/components/pagination.tsx","description":"Paged navigation with first/last anchors, sibling pages, and ellipses.","category":"Navigation","hidden":false,"props":[{"name":"count","type":"number","required":true,"description":"Total number of pages."},{"name":"label","type":"string","default":"Pagination","required":false,"description":"Accessible label for the nav landmark."},{"name":"onPageChange","type":"(page: number) => void","required":true,"description":"Fired with the next page when a control is activated."},{"name":"page","type":"number","required":true,"description":"Current page (1-based)."},{"name":"siblingCount","type":"number","default":"1","required":false,"description":"Pages shown either side of the current page before truncating."}],"observedTokens":[]},"Progress":{"filePath":"src/app/components/progress.tsx","description":"Linear progress. Determinate when \`value\` is a number, else indeterminate.","category":"Feedback","hidden":false,"props":[{"name":"label","type":"string","default":"Progress","required":false,"description":"Accessible label for the progress bar."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"value","type":"number","default":"null","required":false,"description":"Completion 0–100. Omit (or pass null) for an indeterminate bar that animates until the work completes."}],"observedTokens":[]},"SegmentedControl":{"filePath":"src/app/components/segmented-control.tsx","description":"SegmentedControl \\" segmented selection input for compact mutually-exclusive choices.","category":"Inputs","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":"Accessible label when no visible label should be rendered."},{"name":"fullWidth","type":"boolean","default":"false","required":false,"description":"Whether the control should stretch to the width of its container."},{"name":"label","type":"string","required":false,"description":"Accessible label for the control."},{"name":"onChange","type":"(value: string) => void","required":true,"description":"Called when the user selects a different option."},{"name":"options","type":"HdsSegmentedOption[]","required":true,"description":"Option set rendered inside the segmented rail."},{"name":"railPadding","type":"Padding<string | number>","required":false,"description":"Padding inside the rail container."},{"name":"segmentPaddingX","type":"PaddingLeft<string | number>","required":false,"description":"Horizontal padding inside each segment."},{"name":"size","type":"\\"sm\\" | \\"md\\"","default":"md","required":false,"description":"Size on the sm/md ramp shared with Button/Input."},{"name":"value","type":"string","required":true,"description":"Currently selected value."},{"name":"variant","type":"\\"primary\\" | \\"secondary\\"","default":"primary","required":false,"description":"Visual treatment for the rail and active segment."}],"observedTokens":[{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":17,"sourceSnippet":"gap: hds.semantic.space.component.gap,"},{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":26,"sourceSnippet":"border: \`\${hds.borderWidth.default} solid var(--semantic-color-border-default)\`,"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":31,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.semantic.space.layout.gap","tokenPath":"semantic.space.layout.gap","sourceLine":94,"sourceSnippet":"(isCompact ? hds.semantic.space.component.gap : hds.semantic.space.layout.gap);"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":108,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":175,"sourceSnippet":"duration: hds.motion.productive.duration,"},{"raw":"hds.motion.productive.easing","sourceLine":176,"sourceSnippet":"ease: hds.motion.productive.easing,"},{"raw":"hds.zIndex.base","sourceLine":183,"sourceSnippet":"zIndex: active ? 1 : hds.zIndex.base,"},{"raw":"hds.semantic.space.subgrid.hairline","tokenPath":"semantic.space.subgrid.hairline","sourceLine":191,"sourceSnippet":"gap: hds.semantic.space.subgrid.hairline,"},{"raw":"hds.size[32]","tokenPath":"primitive.size.32","sourceLine":192,"sourceSnippet":"minHeight: isCompact ? hds.size[32] : hds.size[48],"},{"raw":"hds.size[48]","tokenPath":"primitive.size.48","sourceLine":192,"sourceSnippet":"minHeight: isCompact ? hds.size[32] : hds.size[48],"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":200,"sourceSnippet":"borderRadius: hds.borderRadius.action,"},{"raw":"hds.borderWidth.sm","tokenPath":"primitive.borderWidth.sm","sourceLine":216,"sourceSnippet":"? \`\${hds.borderWidth.sm} solid \${isSecondary ? 'var(--semantic-color-border-default)' : 'var(--semantic-color-border-accent)'}\`"},{"raw":"hds.zIndex.focus","sourceLine":265,"sourceSnippet":"zIndex: hds.zIndex.focus,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":277,"sourceSnippet":"...hds.typeStyles.caption,"}]},"Skeleton":{"filePath":"src/app/components/skeleton.tsx","description":"Decorative loading placeholder. Marked aria-hidden — announce the loading state on the surrounding region (e.g. aria-busy) rather than per skeleton.","category":"Feedback","hidden":false,"props":[{"name":"height","type":"string | number","required":false,"description":"Explicit height (number → px, or any CSS length). For \`text\`, defaults to 1em."},{"name":"variant","type":"\\"text\\" | \\"rectangular\\" | \\"circular\\"","default":"rectangular","required":false,"description":""},{"name":"width","type":"string | number","required":false,"description":"Explicit width (number → px, or any CSS length)."}],"observedTokens":[]},"Sketch":{"filePath":"src/app/components/sketch.tsx","description":"Sketch — shared shell for generative canvases and WebGL sketches.","category":"Layout","hidden":false,"props":[{"name":"controls","type":"ReactNode","required":false,"description":""},{"name":"title","type":"string","required":true,"description":""}],"observedTokens":[{"raw":"hds.semantic.space.component.padding","tokenPath":"semantic.space.component.padding","sourceLine":21,"sourceSnippet":"padding: hds.semantic.space.component.padding,"},{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":22,"sourceSnippet":"borderBottom: \`\${hds.borderWidth.default} solid var(--semantic-color-border-default)\`,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":27,"sourceSnippet":"...hds.typeStyles.ui,"}]},"SpecimenBlock":{"filePath":"src/app/components/specimen-block.tsx","description":"SpecimenBlock — shared component-doc specimen block with preview, variant deck, and optional matrix.","category":"Utilities","hidden":false,"props":[{"name":"componentName","type":"string","required":true,"description":""},{"name":"demo","type":"ReactNode","required":false,"description":""},{"name":"filePath","type":"string","required":false,"description":""},{"name":"hideHero","type":"boolean","default":"false","required":false,"description":""},{"name":"hideHeroLabel","type":"boolean","default":"false","required":false,"description":""},{"name":"hideVariantDeck","type":"boolean","default":"false","required":false,"description":""},{"name":"matrix","type":"ReactNode","required":false,"description":""}],"observedTokens":[{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":50,"sourceSnippet":"<div style={{ marginTop: hideHero ? 0 : \`calc(\${hds.semantic.space.component.gap} * 2)\` }}>"}]},"Spinner":{"filePath":"src/app/components/spinner.tsx","description":"Indeterminate spinner. Inherits the surrounding text color via currentColor.","category":"Feedback","hidden":false,"props":[{"name":"label","type":"string","default":"Loading","required":false,"description":"Accessible label announced to assistive tech. Defaults to \\"Loading\\"."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""}],"observedTokens":[]},"Stack":{"filePath":"src/app/components/stack.tsx","description":"Stack — one-dimensional layout primitive.","category":"Layout","hidden":false,"props":[{"name":"align","type":"'start' | 'center' | 'end' | 'stretch'","required":false,"description":"Cross-axis alignment: start | center | end | stretch."},{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the outer wrapper."},{"name":"children","type":"ReactNode","required":true,"description":"Stack content rendered inside the flex wrapper."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"direction","type":"\\"row\\" | \\"column\\"","default":"column","required":false,"description":"Flex direction for the stack."},{"name":"gap","type":"GapOption","default":"tight","required":false,"description":"Gap token: semantic (tight, normal, inset, spacious) or primitive (px4, px8, etc). Defaults to 'tight' (16px)."},{"name":"justify","type":"'start' | 'center' | 'end' | 'space-between'","required":false,"description":"Main-axis distribution: start | center | end | space-between."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."},{"name":"wrap","type":"FlexWrap","required":false,"description":"Whether children may wrap."}],"observedTokens":[{"raw":"hds.space","sourceLine":16,"sourceSnippet":"type GapOption = SemanticGap | ComponentGap | SubgridGap | SectionGap | keyof typeof hds.space;"}]},"Stat":{"filePath":"src/app/components/stat.tsx","description":"Headline metric — large value, uppercase caption label, optional sub-line.","category":"Display","hidden":false,"props":[{"name":"label","type":"string","required":true,"description":""},{"name":"sub","type":"ReactNode","required":false,"description":""},{"name":"tone","type":"\\"success\\" | \\"danger\\" | \\"warning\\" | \\"default\\"","default":"default","required":false,"description":""},{"name":"value","type":"ReactNode","required":true,"description":""}],"observedTokens":[]},"StatusListItem":{"filePath":"src/app/components/status-list-item.tsx","description":"Status dot + title row with optional muted notes and trailing slot (e.g. badge).","category":"Display","hidden":false,"props":[{"name":"notes","type":"ReactNode[]","required":false,"description":""},{"name":"title","type":"ReactNode","required":true,"description":""},{"name":"tone","type":"\\"success\\" | \\"danger\\" | \\"warning\\" | \\"info\\" | \\"neutral\\"","default":"neutral","required":false,"description":""},{"name":"trailing","type":"ReactNode","required":false,"description":""}],"observedTokens":[]},"StatusTile":{"filePath":"src/app/components/status-tile.tsx","description":"Block-layout sibling of StatusListItem. Renders a raised surface tile with title, optional muted notes, and a trailing slot for a badge or affordance. Status colour belongs in the trailing slot, never as a left rule on the tile — every tile should look the same so feedback signals stay reserved for genuinely interrupting states.","category":"Display","hidden":false,"props":[{"name":"notes","type":"ReactNode[]","required":false,"description":""},{"name":"title","type":"ReactNode","required":true,"description":""},{"name":"tone","type":"'success' | 'warning' | 'danger' | 'info' | 'neutral'","default":"neutral","required":false,"description":"Tone metadata kept for downstream consumers (e.g., the trailing badge). The tile itself does not paint a tone-bearing rule."},{"name":"trailing","type":"ReactNode","required":false,"description":""}],"observedTokens":[]},"StepperField":{"filePath":"src/app/components/stepper-field.tsx","description":"StepperField ” numeric input with decrement/increment controls. Classification baseline: Material Design, Chakra UI, and Ant Design treat steppers as numeric input controls rather than page-specific controls. This lives in shared components so sketches and docs consume the same primitive.","category":"Inputs","hidden":false,"props":[{"name":"inputStep","type":"number","required":false,"description":""},{"name":"label","type":"string","required":true,"description":""},{"name":"max","type":"number","required":true,"description":""},{"name":"min","type":"number","required":true,"description":""},{"name":"onChange","type":"(value: number) => void","required":true,"description":""},{"name":"precision","type":"number","required":false,"description":""},{"name":"step","type":"number","required":true,"description":""},{"name":"value","type":"number","required":true,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":92,"sourceSnippet":"<label className=\\"text-secondary\\" style={{ ...hds.typeStyles.caption }}>"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":95,"sourceSnippet":"<div style={{ display: 'flex', alignItems: 'center', gap: hds.semantic.space.component.gap }}>"},{"raw":"hds.size[96]","tokenPath":"primitive.size.96","sourceLine":122,"sourceSnippet":"width: hds.size[96],"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":129,"sourceSnippet":"transition: \`background-color \${hds.motion.productive.duration}s ease, border-color \${hds.motion.productive.duration}s ease\`,"}]},"Surface":{"filePath":"src/app/components/surface.tsx","description":"Surface — governed inset surface primitive. Enforces the \\"Surface Inset\\" rule: backgrounds MUST have internal padding. - Default padding: px24 (cards) | px16 (items) - Default border: none (elevation model — use shadow for lift) - Fixed radius: var(--component-card-radius) - shadow prop: applies a two-layer elevation shadow for card lift Usage: <Surface>Card content</Surface> <Surface padding=\\"item\\">Compact item</Surface> <Surface shadow>Lifted card with elevation shadow.</Surface>","category":"Layout","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the outer wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":false,"description":"Surface content."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"overflow","type":"Overflow","required":false,"description":"Override CSS overflow."},{"name":"padding","type":"PaddingOption","default":"component","required":false,"description":"Padding: 'component' (24px, default) | 'item' (16px) | primitive px values | 'none' (0px)."},{"name":"shadow","type":"boolean","default":"false","required":false,"description":"Apply the two-layer card elevation shadow for lift."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."},{"name":"theme","type":"\\"light\\" | \\"dark\\"","required":false,"description":"Force a theme regardless of context: 'dark' | 'light'. Defaults to context value."}],"observedTokens":[]},"Table":{"filePath":"src/app/components/table.tsx","description":"Table - structured data table primitive for documentation and compact UI matrices.","category":"Display","hidden":false,"props":[{"name":"caption","type":"ReactNode","required":false,"description":""},{"name":"captionAction","type":"ReactNode","required":false,"description":"Optional action rendered to the right of the caption."},{"name":"columns","type":"TableColumn[]","required":true,"description":""},{"name":"density","type":"'compact' | 'comfortable'","default":"comfortable","required":false,"description":""},{"name":"description","type":"ReactNode","required":false,"description":""},{"name":"flush","type":"boolean","default":"false","required":false,"description":""},{"name":"minWidth","type":"string | number","required":false,"description":""},{"name":"rows","type":"TableRow[]","required":true,"description":""},{"name":"stickyHeader","type":"boolean","default":"false","required":false,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":19,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.semantic.space.component.padding","tokenPath":"semantic.space.component.padding","sourceLine":26,"sourceSnippet":"paddingRight: hds.semantic.space.component.padding,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":96,"sourceSnippet":"label: hds.typeStyles.ui,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":99,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":117,"sourceSnippet":"paddingY: hds.semantic.space.component.gap,"},{"raw":"hds.size[40]","tokenPath":"primitive.size.40","sourceLine":118,"sourceSnippet":"minHeight: hds.size[40],"},{"raw":"hds.space.px12","tokenPath":"primitive.space.px12","sourceLine":123,"sourceSnippet":"paddingY: hds.space.px12,"},{"raw":"hds.size[48]","tokenPath":"primitive.size.48","sourceLine":124,"sourceSnippet":"minHeight: hds.size[48],"},{"raw":"hds.zIndex.overlay","sourceLine":219,"sourceSnippet":"style={makeHeaderCellStyle({ justifyContent: cellJustifyContent(column.align), textAlign: alignToTextAlign(column.align), paddingY: metrics.paddingY, minHeight: metrics.minHeight, stickyHeader: Boolean(stickyHeader), zIndex: hds.zIndex.overlay })}"},{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":229,"sourceSnippet":"style={makeDataCellStyle({ justifyContent: cellJustifyContent(cell.align), minHeight: metrics.minHeight, paddingY: metrics.paddingY, borderBottom: rowIndex < rows.length - 1 ? \`\${hds.borderWidth.default} solid var(--semantic-color-border-subdued)\` : 'none', textAlign: alignToTextAlign(cell.align), slotStyle: SLOT_STYLES[cell.slot] })}"}]},"Tabs":{"filePath":"src/app/components/tabs.tsx","description":"Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries \`border-b border-border/40\` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has \`border-b-2 border-transparent -mb-px\` at rest. The \`-mb-px\` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft \`bg-accent/5\` tint that extends down into TabsContent — the active tab visually \\"claims\\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (\`overflow-x-auto whitespace-nowrap\`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE).","category":"Navigation","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"TabsContent":{"filePath":"src/app/components/tabs.tsx","description":"Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries \`border-b border-border/40\` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has \`border-b-2 border-transparent -mb-px\` at rest. The \`-mb-px\` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft \`bg-accent/5\` tint that extends down into TabsContent — the active tab visually \\"claims\\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (\`overflow-x-auto whitespace-nowrap\`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE).","category":"Navigation","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"TabsList":{"filePath":"src/app/components/tabs.tsx","description":"Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries \`border-b border-border/40\` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has \`border-b-2 border-transparent -mb-px\` at rest. The \`-mb-px\` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft \`bg-accent/5\` tint that extends down into TabsContent — the active tab visually \\"claims\\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (\`overflow-x-auto whitespace-nowrap\`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE).","category":"Navigation","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"TabsTrigger":{"filePath":"src/app/components/tabs.tsx","description":"Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries \`border-b border-border/40\` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has \`border-b-2 border-transparent -mb-px\` at rest. The \`-mb-px\` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft \`bg-accent/5\` tint that extends down into TabsContent — the active tab visually \\"claims\\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (\`overflow-x-auto whitespace-nowrap\`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE).","category":"Navigation","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"Tag":{"filePath":"src/app/components/tag.tsx","description":"Tag — interactive filter and category chip. The outer <button> carries the accessible 44px hit target directly via the size token while the inner pill keeps the visible surface compact. Colors (background, border-color, color) are owned by .hds-tag-btn / .hds-tag-pill in theme.css so :hover transitions work — inline styles beat :hover selectors and would silently break the effect. Active state: brand fill via [data-active=\\"true\\"] in theme.css. Hover states: inactive → subtle tint + brand border; active → brand-hover fill.","category":"Inputs","hidden":false,"props":[{"name":"active","type":"boolean","default":"false","required":false,"description":"Whether the tag is active."},{"name":"aria-label","type":"string","required":false,"description":"Accessible label when the visible text is abbreviated."},{"name":"children","type":"ReactNode","required":true,"description":"Tag content displayed inside the pill."},{"name":"className","type":"string","required":false,"description":"Optional class hook for parent-level styling."},{"name":"onClick","type":"() => void","required":false,"description":"Click handler for toggling the tag."},{"name":"title","type":"string","required":false,"description":"Native tooltip for explicit file/path affordance."}],"observedTokens":[{"raw":"hds.size.interactive.min","tokenPath":"primitive.size.interactive.min","sourceLine":49,"sourceSnippet":"minWidth: hds.size.interactive.min,"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":50,"sourceSnippet":"transition: \`background-color \${hds.motion.productive.duration}s ease, color \${hds.motion.productive.duration}s ease, transform \${hds.motion.productive.duration}s ease\`,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":54,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.borderRadius.action","tokenPath":"semantic.radius.action","sourceLine":67,"sourceSnippet":"borderRadius: hds.borderRadius.action,"}]},"Text":{"filePath":"src/app/components/text.tsx","description":"Text — polymorphic typography primitive spanning the full HDS type ramp.","category":"Typography","hidden":false,"props":[{"name":"as","type":"\\"symbol\\" | \\"object\\" | \\"title\\" | \\"slot\\" | \\"style\\" | \\"search\\" | \\"article\\" | \\"button\\" | \\"dialog\\" | \\"figure\\" | \\"form\\" | \\"img\\" | \\"link\\" | \\"main\\" | \\"menu\\" | \\"menuitem\\" | \\"option\\" | \\"switch\\" | ... 161 more ... | FunctionComponent<...>","default":"defaultTagMap[variant]","required":false,"description":""},{"name":"className","type":"string","required":false,"description":""},{"name":"style","type":"CSSProperties","required":false,"description":""},{"name":"variant","type":"TextVariant","required":true,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.display","tokenPath":"semantic.typography.display","sourceLine":38,"sourceSnippet":"display: hds.typeStyles.display,"},{"raw":"hds.typeStyles.heading1","tokenPath":"semantic.typography.h1","sourceLine":39,"sourceSnippet":"heading1: hds.typeStyles.heading1,"},{"raw":"hds.typeStyles.heading2","tokenPath":"semantic.typography.h2","sourceLine":40,"sourceSnippet":"heading2: hds.typeStyles.heading2,"},{"raw":"hds.typeStyles.heading3","tokenPath":"semantic.typography.h3","sourceLine":41,"sourceSnippet":"heading3: hds.typeStyles.heading3,"},{"raw":"hds.typeStyles.body","tokenPath":"semantic.typography.body","sourceLine":42,"sourceSnippet":"body: hds.typeStyles.body,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":43,"sourceSnippet":"ui: hds.typeStyles.ui,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":44,"sourceSnippet":"eyebrow: hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":45,"sourceSnippet":"caption: hds.typeStyles.caption,"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":46,"sourceSnippet":"technical: hds.typeStyles.technical,"},{"raw":"hds.typeStyles.badge","tokenPath":"semantic.typography.caption","sourceLine":47,"sourceSnippet":"badge: hds.typeStyles.badge,"},{"raw":"hds.typeStyles.small","tokenPath":"semantic.typography.small","sourceLine":51,"sourceSnippet":"docSmall: hds.typeStyles.small,"},{"raw":"hds.typeStyles.mono","tokenPath":"semantic.typography.mono","sourceLine":52,"sourceSnippet":"docCode: hds.typeStyles.mono,"}]},"TextLockup":{"filePath":"src/app/components/text-lockup.tsx","description":"TextLockup - governed title-and-description pairing primitive.","category":"Display","hidden":false,"props":[{"name":"align","type":"'left' | 'center'","default":"left","required":false,"description":"Horizontal alignment for the text pair."},{"name":"as","type":"ElementType","default":"div","required":false,"description":"Override the semantic wrapper while preserving the governed layout styles."},{"name":"description","type":"ReactNode","required":false,"description":"Supporting body copy paired with the title."},{"name":"descriptionAs","type":"'div' | 'p' | 'span'","default":"div","required":false,"description":"Override the description tag without altering the visual type ramp."},{"name":"eyebrow","type":"string","required":false,"description":"Optional overline or category cue displayed above the title."},{"name":"id","type":"string","required":false,"description":"When provided on the \`numbered\` size, renders a copy-anchor action next to the title on hover. Should match the section's DOM id."},{"name":"size","type":"'hero' | 'heroXl' | 'section' | 'metric' | 'detail' | 'numbered'","required":true,"description":"Preset controlling title and body type pairing."},{"name":"title","type":"string","required":true,"description":"Primary heading copy rendered by the lockup."},{"name":"titleAs","type":"'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'","required":false,"description":"Override the title tag without altering the visual type ramp."}],"observedTokens":[{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":22,"sourceSnippet":"gap: hds.semantic.space.subgrid.gap,"},{"raw":"hds.typeStyles","sourceLine":62,"sourceSnippet":"// deliberate metric deviations) — the redundant \`...hds.typeStyles.*\` spreads"},{"raw":"hds.layout.proseMaxWidth","tokenPath":"semantic.layout.prose.maxWidth","sourceLine":74,"sourceSnippet":"maxWidth: hds.layout.proseMaxWidth,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":94,"sourceSnippet":"gap: hds.semantic.space.component.gap,"}]},"TileGrid":{"filePath":"src/app/components/tile-grid.tsx","description":"Auto-fill responsive grid for status/micro tiles. Wraps tile children in a one-line grid declaration so pages don't repeat the auto-fill minmax recipe.","category":"Layout","hidden":false,"props":[{"name":"gap","type":"\\"sm\\" | \\"md\\" | \\"xs\\"","default":"sm","required":false,"description":"Gap token between tiles. Defaults to 'sm' (12px)."},{"name":"minTileWidth","type":"string","default":"260px","required":false,"description":"Minimum tile width before the grid wraps. Defaults to 260px."}],"observedTokens":[]},"ToastProvider":{"filePath":"src/app/components/toast.tsx","description":"Provider + viewport for the toast system. Wrap the app root once.","category":"Feedback","hidden":false,"props":[{"name":"duration","type":"number","default":"5000","required":false,"description":"Default auto-dismiss in ms (Radix default is 5000)."},{"name":"swipeDirection","type":"SwipeDirection","default":"right","required":false,"description":"Swipe-to-dismiss direction."}],"observedTokens":[]},"Token":{"filePath":"src/app/components/token.tsx","description":"Token - reflective token specimen for unified node-based token views.","category":"Display","hidden":false,"props":[{"name":"accentColor","type":"string","required":true,"description":""},{"name":"aria-label","type":"string","required":false,"description":""},{"name":"className","type":"string","required":false,"description":""},{"name":"description","type":"ReactNode","required":false,"description":""},{"name":"fullWidth","type":"boolean","required":false,"description":""},{"name":"isSelected","type":"boolean","required":false,"description":""},{"name":"isSourceNode","type":"boolean","required":false,"description":""},{"name":"label","type":"string","required":true,"description":""},{"name":"leadingSlot","type":"ReactNode","required":false,"description":"Optional left-side slot for compact node content, e.g. curve previews."},{"name":"nodeRef","type":"(el: HTMLElement) => void","required":false,"description":""},{"name":"nowrap","type":"boolean","required":false,"description":""},{"name":"onClick","type":"(() => void) | (() => void)","required":false,"description":""},{"name":"pathDisplayDepth","type":"number","required":false,"description":""},{"name":"pathDisplayLeadingDot","type":"boolean","required":false,"description":""},{"name":"pathDisplayMode","type":"\\"full\\" | \\"compressed\\"","required":false,"description":""},{"name":"rawValue","type":"ReactNode","required":false,"description":""},{"name":"swatchVar","type":"string","required":false,"description":""},{"name":"tokenPath","type":"string","required":false,"description":"Optional explicit token path for deep-linking node instances. Falls back to children when omitted."},{"name":"truncateFromStart","type":"boolean","required":false,"description":"When true, overflow ellipsis appears at the start (left) instead of the end."},{"name":"value","type":"string","required":true,"description":""},{"name":"variant","type":"\\"node\\" | \\"diagram\\"","required":false,"description":""}],"observedTokens":[{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":71,"sourceSnippet":"...hds.typeStyles.technical,"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":80,"sourceSnippet":"const tokenSwatchTextGap = hds.semantic.space.subgrid.gap;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":84,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.semantic.space.subgrid.hairline","tokenPath":"semantic.space.subgrid.hairline","sourceLine":87,"sourceSnippet":"marginLeft: \`calc(\${hds.semantic.space.subgrid.hairline} * -1)\`,"}]}}`), ji = {
   components: Mi
 }, Gi = ji, Vi = {
   demoState: [
@@ -1820,7 +1839,7 @@ function kr({
     }
     S.start(D ? { y: -3 } : { y: 0 }, Y);
   }, [l, S, D, z, c]);
-  const T = {
+  const P = {
     display: "flex",
     flexDirection: u ? "row-reverse" : "row",
     justifyContent: "space-between",
@@ -1899,7 +1918,7 @@ function kr({
           }
         ) })
       ] }) : /* @__PURE__ */ h("div", { style: q, children: [
-        /* @__PURE__ */ h("div", { style: T, children: [
+        /* @__PURE__ */ h("div", { style: P, children: [
           o ? /* @__PURE__ */ a(
             "p",
             {
@@ -2118,7 +2137,7 @@ const La = {
     }
   );
 });
-function Tr({ children: t, style: e, compact: r = !1, copyable: n = !1 }) {
+function Pr({ children: t, style: e, compact: r = !1, copyable: n = !1 }) {
   const [o, s] = W(!1);
   function d() {
     typeof t == "string" && navigator.clipboard.writeText(t).then(() => {
@@ -2174,7 +2193,7 @@ function Tr({ children: t, style: e, compact: r = !1, copyable: n = !1 }) {
     }
   ) : c;
 }
-function Ta({ href: t, children: e, externalIcon: r = !0 }) {
+function Pa({ href: t, children: e, externalIcon: r = !0 }) {
   const { LinkComponent: n } = fe();
   return t.startsWith("/") ? /* @__PURE__ */ a(n, { to: t, className: "hds-link", children: e }) : /* @__PURE__ */ h("a", { href: t, target: "_blank", rel: "noopener noreferrer", className: "hds-focus hds-link", children: [
     e,
@@ -2195,7 +2214,7 @@ function Ta({ href: t, children: e, externalIcon: r = !0 }) {
     )
   ] });
 }
-const Pa = K(
+const Ta = K(
   "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: {
@@ -2262,8 +2281,8 @@ const Pa = K(
   onChange: b,
   ...v
 }, k) {
-  const D = $.useId(), C = o ?? D, S = $.useRef(null), L = ye(), T = !!l || L === "error", x = f || L === "loading", q = !!u || x || L === "disabled", H = d ? `${C}-hint` : void 0, E = T && (m || L === "error") ? `${C}-error` : void 0, N = [H, E].filter(Boolean).join(" ") || void 0, [_, A] = $.useState(() => typeof v.defaultValue == "string" ? v.defaultValue : typeof v.defaultValue == "number" ? String(v.defaultValue) : ""), Y = typeof v.value == "string" ? v.value : typeof v.value == "number" ? String(v.value) : void 0, Z = Y ?? _, P = za[r], j = !!c, U = !!p, Le = e !== "number" && Z.length > 0 && !q && !x, Re = x || U || Le;
-  function Te(G) {
+  const D = $.useId(), C = o ?? D, S = $.useRef(null), L = ye(), P = !!l || L === "error", x = f || L === "loading", q = !!u || x || L === "disabled", H = d ? `${C}-hint` : void 0, E = P && (m || L === "error") ? `${C}-error` : void 0, N = [H, E].filter(Boolean).join(" ") || void 0, [_, A] = $.useState(() => typeof v.defaultValue == "string" ? v.defaultValue : typeof v.defaultValue == "number" ? String(v.defaultValue) : ""), Y = typeof v.value == "string" ? v.value : typeof v.value == "number" ? String(v.value) : void 0, Z = Y ?? _, T = za[r], j = !!c, U = !!p, Le = e !== "number" && Z.length > 0 && !q && !x, Re = x || U || Le;
+  function Pe(G) {
     if (S.current = G, typeof k == "function") {
       k(G);
       return;
@@ -2280,7 +2299,7 @@ const Pa = K(
     )) == null ? void 0 : R.set;
     de == null || de.call(G, ""), G.dispatchEvent(new Event("input", { bubbles: !0 })), G.focus();
   }
-  const Ie = L || (x ? "loading" : q ? "disabled" : T ? "error" : Z.length > 0 ? "filled" : "default"), Pe = j ? P.leadPad : P.restPad, Ne = Re ? P.trailPad : P.restPad;
+  const Ie = L || (x ? "loading" : q ? "disabled" : P ? "error" : Z.length > 0 ? "filled" : "default"), Te = j ? T.leadPad : T.restPad, Ne = Re ? T.trailPad : T.restPad;
   return /* @__PURE__ */ h("div", { className: w("flex flex-col gap-1.5", g), children: [
     s && /* @__PURE__ */ a("label", { htmlFor: C, className: "text-xs font-medium text-muted-foreground", children: s }),
     /* @__PURE__ */ h("div", { className: "relative w-full", children: [
@@ -2290,8 +2309,8 @@ const Pa = K(
           "aria-hidden": "true",
           className: w(
             "pointer-events-none absolute left-0 flex items-center text-muted-foreground",
-            P.inset,
-            P.iconWrap
+            T.inset,
+            T.iconWrap
           ),
           children: c
         }
@@ -2299,7 +2318,7 @@ const Pa = K(
       /* @__PURE__ */ a(
         "input",
         {
-          ref: Te,
+          ref: Pe,
           id: C,
           type: e,
           disabled: q,
@@ -2307,13 +2326,13 @@ const Pa = K(
           "aria-busy": x || void 0,
           "aria-describedby": N,
           "aria-errormessage": E,
-          "aria-invalid": T || void 0,
+          "aria-invalid": P || void 0,
           "data-state": Ie,
           "data-size": r,
           "data-search-input": e === "search" ? "true" : void 0,
           className: w(
-            Pa({ size: r, textStyle: n, invalid: T }),
-            Pe,
+            Ta({ size: r, textStyle: n, invalid: P }),
+            Te,
             Ne,
             y
           ),
@@ -2329,9 +2348,9 @@ const Pa = K(
           "aria-hidden": "true",
           className: w(
             "pointer-events-none absolute right-0 flex items-center text-muted-foreground",
-            P.inset
+            T.inset
           ),
-          children: /* @__PURE__ */ a(pt, { className: w("animate-spin", P.iconClass) })
+          children: /* @__PURE__ */ a(pt, { className: w("animate-spin", T.iconClass) })
         }
       ),
       !x && U && /* @__PURE__ */ a(
@@ -2340,8 +2359,8 @@ const Pa = K(
           "aria-hidden": "true",
           className: w(
             "pointer-events-none absolute right-0 flex items-center text-muted-foreground",
-            P.inset,
-            P.iconWrap
+            T.inset,
+            T.iconWrap
           ),
           children: p
         }
@@ -2354,14 +2373,14 @@ const Pa = K(
           "aria-label": e === "search" ? "Clear search" : "Clear input",
           className: w(
             "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",
-            P.inset
+            T.inset
           ),
-          children: /* @__PURE__ */ a(Me, { className: P.iconClass, "aria-hidden": "true" })
+          children: /* @__PURE__ */ a(Me, { className: T.iconClass, "aria-hidden": "true" })
         }
       )
     ] }),
     d && !E && /* @__PURE__ */ a("span", { id: H, className: "text-xs text-muted-foreground", children: d }),
-    T && (m || L === "error") && /* @__PURE__ */ a("span", { id: E, role: "alert", className: "text-xs text-destructive", children: m || "Field error" })
+    P && (m || L === "error") && /* @__PURE__ */ a("span", { id: E, role: "alert", className: "text-xs text-destructive", children: m || "Field error" })
   ] });
 });
 function Ge({
@@ -2393,7 +2412,7 @@ function Ge({
 function qa(t, e) {
   typeof t == "function" ? t(e) : t && (t.current = e);
 }
-const Pr = Q(function({ label: e, checked: r, onChange: n, indeterminate: o = !1, onFocus: s, onBlur: d, disabled: c, ...p }, l) {
+const Tr = Q(function({ label: e, checked: r, onChange: n, indeterminate: o = !1, onFocus: s, onBlur: d, disabled: c, ...p }, l) {
   const m = he(null), u = ye(), { isHover: f, isFocused: g, isPressed: y, isDisabled: b, handlers: v } = Ge({
     disabled: c,
     frozenState: u
@@ -2933,7 +2952,7 @@ function tt({
   onBlur: b,
   ...v
 }) {
-  const { isRtl: k } = gt(), { navigate: D } = fe(), [C, S] = W(!1), [z, L] = W(!1), { isFocusVisible: T, onFocus: x, clearFocusVisible: q } = Ra(), H = ye(), E = H, N = Aa[t], A = o ? "disabled" : n ? "active" : (E === "focused" ? "focus" : E) ?? (z ? "pressed" : T ? "focus" : C ? "hover" : "default"), Y = A === "hover", Z = A === "focus", P = A === "pressed", j = n || A === "active", U = A === "disabled" ? "transparent" : j || P ? X.indicator.active : Y ? X.indicator.hover : X.indicator.idle, Le = A === "disabled" ? X.background.disabled : j ? X.background.active : P ? X.background.pressed : Y ? X.background.hover : X.background.idle, Re = t === "side" ? "var(--semantic-color-content-secondary)" : X.text.idle, Te = A === "disabled" ? X.text.disabled : j || P ? X.text.active : Y ? "var(--semantic-color-content-primary)" : Re, ve = t === "side" ? bt(s) : "0px", Ie = {
+  const { isRtl: k } = gt(), { navigate: D } = fe(), [C, S] = W(!1), [z, L] = W(!1), { isFocusVisible: P, onFocus: x, clearFocusVisible: q } = Ra(), H = ye(), E = H, N = Aa[t], A = o ? "disabled" : n ? "active" : (E === "focused" ? "focus" : E) ?? (z ? "pressed" : P ? "focus" : C ? "hover" : "default"), Y = A === "hover", Z = A === "focus", T = A === "pressed", j = n || A === "active", U = A === "disabled" ? "transparent" : j || T ? X.indicator.active : Y ? X.indicator.hover : X.indicator.idle, Le = A === "disabled" ? X.background.disabled : j ? X.background.active : T ? X.background.pressed : Y ? X.background.hover : X.background.idle, Re = t === "side" ? "var(--semantic-color-content-secondary)" : X.text.idle, Pe = A === "disabled" ? X.text.disabled : j || T ? X.text.active : Y ? "var(--semantic-color-content-primary)" : Re, ve = t === "side" ? bt(s) : "0px", Ie = {
     ...N.typeStyle,
     position: "relative",
     display: "flex",
@@ -2950,7 +2969,7 @@ function tt({
     paddingRight: k ? N.leadingPaddingX : N.trailingPaddingX,
     textDecoration: "none",
     textAlign: k ? "right" : "left",
-    color: Te,
+    color: Pe,
     backgroundColor: Le,
     outline: Z ? `${i.borderWidth.sm} solid var(--semantic-color-border-accent)` : "none",
     outlineOffset: Z ? "2px" : void 0,
@@ -2958,7 +2977,7 @@ function tt({
     pointerEvents: H !== null ? "none" : void 0,
     transition: `background-color ${i.motion.productive.duration}s ease, color ${i.motion.productive.duration}s ease`,
     ...p
-  }, Pe = c ? `hds-focus ${c}` : "hds-focus", Ne = typeof r == "string" && r.startsWith("/"), G = {
+  }, Te = c ? `hds-focus ${c}` : "hds-focus", Ne = typeof r == "string" && r.startsWith("/"), G = {
     style: Ie,
     "data-disabled": o ? "true" : void 0,
     "data-level": s,
@@ -3004,7 +3023,7 @@ function tt({
       {
         style: {
           ...N.typeStyle,
-          color: Te
+          color: Pe
         },
         children: e
       }
@@ -3013,7 +3032,7 @@ function tt({
   return r ? /* @__PURE__ */ a(
     "a",
     {
-      className: Pe,
+      className: Te,
       href: o ? void 0 : r,
       "aria-disabled": o || void 0,
       "aria-current": j ? v["aria-current"] ?? (t === "toc" ? "location" : "page") : void 0,
@@ -3034,7 +3053,7 @@ function tt({
   ) : /* @__PURE__ */ a(
     "button",
     {
-      className: Pe,
+      className: Te,
       type: "button",
       disabled: o,
       "aria-disabled": o || void 0,
@@ -3199,8 +3218,8 @@ const Rr = $.forwardRef(function({ className: e, size: r, value: n = null, label
               role: "radiogroup",
               "aria-label": z,
               value: o,
-              onValueChange: (T) => {
-                T && !D && s(T);
+              onValueChange: (P) => {
+                P && !D && s(P);
               },
               disabled: D,
               style: {
@@ -3209,21 +3228,21 @@ const Rr = $.forwardRef(function({ className: e, size: r, value: n = null, label
                 padding: l ?? "4px",
                 background: S ? "var(--semantic-color-surface-page)" : "var(--semantic-color-surface-raised)"
               },
-              children: n.map((T) => {
-                const x = T.value === o, q = k ? k === "hover" && x : f === T.value, H = k === "pressed" && x, E = k ? k === "focused" && x : y === T.value, N = D;
+              children: n.map((P) => {
+                const x = P.value === o, q = k ? k === "hover" && x : f === P.value, H = k === "pressed" && x, E = k ? k === "focused" && x : y === P.value, N = D;
                 return /* @__PURE__ */ a(
                   _e.Item,
                   {
                     asChild: !0,
-                    value: T.value,
+                    value: P.value,
                     disabled: N,
                     children: /* @__PURE__ */ h(
                       B.button,
                       {
                         type: "button",
-                        onHoverStart: () => !k && g(T.value),
+                        onHoverStart: () => !k && g(P.value),
                         onHoverEnd: () => !k && g(null),
-                        onFocus: () => !k && b(T.value),
+                        onFocus: () => !k && b(P.value),
                         onBlur: () => !k && b(null),
                         className: "hds-focus",
                         animate: S ? {
@@ -3289,10 +3308,10 @@ const Rr = $.forwardRef(function({ className: e, size: r, value: n = null, label
                                 ...i.typeStyles.ui,
                                 color: "currentColor"
                               },
-                              children: T.label
+                              children: P.label
                             }
                           ),
-                          T.description && /* @__PURE__ */ a(
+                          P.description && /* @__PURE__ */ a(
                             "span",
                             {
                               style: {
@@ -3301,14 +3320,14 @@ const Rr = $.forwardRef(function({ className: e, size: r, value: n = null, label
                                 ...i.typeStyles.caption,
                                 color: N ? "var(--semantic-color-content-disabled)" : x && !(q || H) ? S ? "var(--semantic-color-content-secondary)" : "var(--semantic-color-content-onAccent)" : "var(--semantic-color-content-secondary)"
                               },
-                              children: T.description
+                              children: P.description
                             }
                           )
                         ]
                       }
                     )
                   },
-                  T.value
+                  P.value
                 );
               })
             }
@@ -3521,7 +3540,7 @@ const Va = {
       children: /* @__PURE__ */ a("span", { className: "hds-tag-pill", style: _a, children: e })
     }
   );
-}), Ya = "https://www.designtokens.org/schemas/2025.10/format.json", Ua = "Adrian Milsap hirobius design tokens - W3C DTCG 2025.10 compliant, Figma SDS architecture", Xa = /* @__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."},"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":["Clash Display","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","sans-serif"],"$description":"Display face: Clash Display 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","2xs":{"$value":{"value":10,"unit":"px"}},"xs":{"$value":{"value":13,"unit":"px"}},"sm":{"$value":{"value":15,"unit":"px"}},"base":{"$value":{"value":17,"unit":"px"}},"lg":{"$value":{"value":20,"unit":"px"}},"xl":{"$value":{"value":24,"unit":"px"}},"2xl":{"$value":{"value":30,"unit":"px"}},"3xl":{"$value":{"value":36,"unit":"px"}},"4xl":{"$value":{"value":48,"unit":"px"}},"5xl":{"$value":{"value":80,"unit":"px"}},"7xl":{"$value":{"value":72,"unit":"px"},"$description":"Swiss-canon display size. Static desktop value; fluid in theme.css."}},"weight":{"$type":"fontWeight","light":{"$value":300,"$description":"Swiss-canon heading weight. Display and h1/h2 composites only."},"regular":{"$value":400},"medium":{"$value":500},"semibold":{"$value":600},"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","tighter":{"$value":{"value":-0.02,"unit":"em"}},"tight":{"$value":{"value":-0.01,"unit":"em"}},"normal":{"$value":{"value":0,"unit":"em"}},"wide":{"$value":{"value":0.01,"unit":"em"}},"wider":{"$value":{"value":0.02,"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."},"$description":"Unaliased dimensional values.","interactive":{"$description":"Interactive control size minimums.","min":{"$type":"dimension","$value":{"value":44,"unit":"px"},"$description":"Minimum interactive hit target size."}},"width":{"96":{"$type":"dimension","$value":{"value":96,"unit":"px"},"$description":"96px width step."},"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"}}}}'), Ka = /* @__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."}},"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}"}}}},"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.blue.500}","$description":"Accent-colored background","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.500}"}}}},"accentSubtle":{"$value":"{primitive.color.blue.50}","$description":"Faint accent tint for hover states or highlights","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.50}","Dark":"{primitive.color.blue.900}"}}}}},"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.blue.500}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.300}"}}}},"onAccent":{"$value":"{primitive.color.neutral.white}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.white}","Dark":"{primitive.color.neutral.white}"}}}}},"border":{"default":{"$value":"{primitive.color.neutral.200}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.700}"}}}},"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.blue.500}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.500}"}}}}},"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}"}}}},"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}"}}}}}}},"space":{"$type":"dimension","$description":"Semantic spacing tiers: subgrid, component, layout, section.","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."},"medium":{"$value":"{primitive.space.3}","$description":"12px adjacent form fields and medium intra-component gaps."},"padding":{"$value":"{primitive.space.6}","$description":"24px default inset for cards, forms, panels, and grouped surfaces."}},"layout":{"tight":{"$value":"{primitive.space.4}","$description":"16px default HdsStack gap and inter-component spacing."},"normal":{"$value":"{primitive.space.6}","$description":"24px column gutters and sidebar gutter spacing."},"gutter":{"$value":"{primitive.space.6}","$description":"24px column and region gutters (alias for layout.normal)."},"inset":{"$value":"{primitive.space.8}","$description":"32px major block separation and inset inter-component gaps."},"spacious":{"$value":"{primitive.space.12}","$description":"48px section break and whitespace separator between major content blocks."}},"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."}}},"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.7xl}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.none}"},"$description":"Display headline. 72px / Clash Display 500 / leading-none.","$extensions":{"com.figma.variables":{"fontSize":"clamp(40px, 8vw, 72px)","note":"Figma stores the 72px desktop-max static value. Browser CSS overrides with fluid scaling (40px min → 72px max). See src/styles/theme.css."}}},"h1":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.4xl}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"Primary section headings (h1). 48px / Clash Display medium 500 / leading-tight.","$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.2xl}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"42px"},"$description":"Secondary section headings (h2). Clash Display medium, 30px, line-height 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.lg}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"28px"},"$description":"Component and card headers (h3). 20px / Clash Display medium 500 / leading-snug.","$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":"28px","maxWidth":{"value":60,"unit":"ch"}},"$description":"Body prose. Satoshi medium, 17px, line-height 28px, max 60ch measure."},"ui":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.sm}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"24px","maxWidth":{"value":60,"unit":"ch"}},"$description":"UI text for nav, labels, captions. Satoshi medium, 15px, line-height 24px."},"eyebrow":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.caps}","lineHeight":"20px","textTransform":"uppercase"},"$description":"Eyebrow / kicker label. Satoshi medium, 13px, caps tracking, uppercase."},"mono":{"$value":{"fontFamily":"{primitive.typography.family.mono}","fontSize":"{primitive.typography.size.xs}","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, 13px."},"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.blue.500}","$description":"Default accent fill for interactive elements at rest.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.500}"}}}},"hover":{"$value":"{primitive.color.blue.600}","$description":"Accent fill on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.600}","Dark":"{primitive.color.blue.450}"}}}},"pressed":{"$value":"{primitive.color.blue.700}","$description":"Accent fill during active press.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.700}","Dark":"{primitive.color.blue.400}"}}}},"inactive":{"$value":"{primitive.color.blue.200}","$description":"Accent fill for inactive or unselected accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.200}","Dark":"{primitive.color.blue.200}"}}}},"disabled":{"$value":"{primitive.color.blue.100}","$description":"Accent fill for disabled accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.100}","Dark":"{primitive.color.blue.100}"}}}},"content":{"$value":"{primitive.color.blue.500}","$description":"Text and icon color on neutral surfaces with accent intent.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.300}"}}}},"contentHover":{"$value":"{primitive.color.blue.600}","$description":"Accent content color on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.600}","Dark":"{primitive.color.blue.200}"}}}},"subtle":{"$value":"{primitive.color.blue.50}","$description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.50}","Dark":"{primitive.color.blue.900}"}}}}},"radius":{"action":{"$type":"dimension","$value":"{primitive.radius.12}","$description":"Corner radius for interactive action elements like buttons and inputs."}},"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."}}}'), Za = { 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 (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 (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 (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.default}", $description: "Secondary button border." }, hover: { $type: "color", $value: "{semantic.color.border.default}", $description: "Secondary button hover border." }, pressed: { $type: "color", $value: "{semantic.color.border.default}", $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.default}" }, 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." } } } }, Ja = { $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." }, "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.default}", $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." } }, xt = {
+}), Ya = "https://www.designtokens.org/schemas/2025.10/format.json", Ua = "Adrian Milsap hirobius design tokens - W3C DTCG 2025.10 compliant, Figma SDS architecture", Xa = /* @__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."},"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":["Clash Display","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","sans-serif"],"$description":"Display face: Clash Display 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","2xs":{"$value":{"value":10,"unit":"px"}},"xs":{"$value":{"value":13,"unit":"px"}},"sm":{"$value":{"value":15,"unit":"px"}},"base":{"$value":{"value":17,"unit":"px"}},"lg":{"$value":{"value":20,"unit":"px"}},"xl":{"$value":{"value":24,"unit":"px"}},"2xl":{"$value":{"value":30,"unit":"px"}},"3xl":{"$value":{"value":36,"unit":"px"}},"4xl":{"$value":{"value":48,"unit":"px"}},"5xl":{"$value":{"value":80,"unit":"px"}},"7xl":{"$value":{"value":72,"unit":"px"},"$description":"Swiss-canon display size. Static desktop value; fluid in theme.css."}},"weight":{"$type":"fontWeight","light":{"$value":300,"$description":"Swiss-canon heading weight. Display and h1/h2 composites only."},"regular":{"$value":400},"medium":{"$value":500},"semibold":{"$value":600},"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","tighter":{"$value":{"value":-0.02,"unit":"em"}},"tight":{"$value":{"value":-0.01,"unit":"em"}},"normal":{"$value":{"value":0,"unit":"em"}},"wide":{"$value":{"value":0.01,"unit":"em"}},"wider":{"$value":{"value":0.02,"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."},"$description":"Unaliased dimensional values.","interactive":{"$description":"Interactive control size minimums.","min":{"$type":"dimension","$value":{"value":44,"unit":"px"},"$description":"Minimum interactive hit target size."}},"width":{"96":{"$type":"dimension","$value":{"value":96,"unit":"px"},"$description":"96px width step."},"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"}}}}'), Ka = /* @__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."}},"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}"}}}},"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.blue.500}","$description":"Accent-colored background","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.500}"}}}},"accentSubtle":{"$value":"{primitive.color.blue.50}","$description":"Faint accent tint for hover states or highlights","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.50}","Dark":"{primitive.color.blue.900}"}}}}},"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.blue.500}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.300}"}}}},"onAccent":{"$value":"{primitive.color.neutral.white}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.white}","Dark":"{primitive.color.neutral.white}"}}}}},"border":{"default":{"$value":"{primitive.color.neutral.200}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.700}"}}}},"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.blue.500}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.500}"}}}}},"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}"}}}}}}},"space":{"$type":"dimension","$description":"Semantic spacing tiers: subgrid, component, layout, section.","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."},"medium":{"$value":"{primitive.space.3}","$description":"12px adjacent form fields and medium intra-component gaps."},"padding":{"$value":"{primitive.space.6}","$description":"24px default inset for cards, forms, panels, and grouped surfaces."}},"layout":{"tight":{"$value":"{primitive.space.4}","$description":"16px default HdsStack gap and inter-component spacing."},"normal":{"$value":"{primitive.space.6}","$description":"24px column gutters and sidebar gutter spacing."},"gutter":{"$value":"{primitive.space.6}","$description":"24px column and region gutters (alias for layout.normal)."},"inset":{"$value":"{primitive.space.8}","$description":"32px major block separation and inset inter-component gaps."},"spacious":{"$value":"{primitive.space.12}","$description":"48px section break and whitespace separator between major content blocks."}},"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."}}},"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.7xl}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.none}"},"$description":"Display headline. 72px / Clash Display 500 / leading-none.","$extensions":{"com.figma.variables":{"fontSize":"clamp(40px, 8vw, 72px)","note":"Figma stores the 72px desktop-max static value. Browser CSS overrides with fluid scaling (40px min → 72px max). See src/styles/theme.css."}}},"h1":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.4xl}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"Primary section headings (h1). 48px / Clash Display medium 500 / leading-tight.","$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.2xl}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"42px"},"$description":"Secondary section headings (h2). Clash Display medium, 30px, line-height 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.lg}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"28px"},"$description":"Component and card headers (h3). 20px / Clash Display medium 500 / leading-snug.","$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":"28px","maxWidth":{"value":60,"unit":"ch"}},"$description":"Body prose. Satoshi medium, 17px, line-height 28px, max 60ch measure."},"ui":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.sm}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"24px","maxWidth":{"value":60,"unit":"ch"}},"$description":"UI text for nav, labels, captions. Satoshi medium, 15px, line-height 24px."},"eyebrow":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.caps}","lineHeight":"20px","textTransform":"uppercase"},"$description":"Eyebrow / kicker label. Satoshi medium, 13px, caps tracking, uppercase."},"mono":{"$value":{"fontFamily":"{primitive.typography.family.mono}","fontSize":"{primitive.typography.size.xs}","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, 13px."},"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.blue.500}","$description":"Default accent fill for interactive elements at rest.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.500}"}}}},"hover":{"$value":"{primitive.color.blue.600}","$description":"Accent fill on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.600}","Dark":"{primitive.color.blue.450}"}}}},"pressed":{"$value":"{primitive.color.blue.700}","$description":"Accent fill during active press.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.700}","Dark":"{primitive.color.blue.400}"}}}},"inactive":{"$value":"{primitive.color.blue.200}","$description":"Accent fill for inactive or unselected accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.200}","Dark":"{primitive.color.blue.200}"}}}},"disabled":{"$value":"{primitive.color.blue.100}","$description":"Accent fill for disabled accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.100}","Dark":"{primitive.color.blue.100}"}}}},"content":{"$value":"{primitive.color.blue.500}","$description":"Text and icon color on neutral surfaces with accent intent.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.300}"}}}},"contentHover":{"$value":"{primitive.color.blue.600}","$description":"Accent content color on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.600}","Dark":"{primitive.color.blue.200}"}}}},"subtle":{"$value":"{primitive.color.blue.50}","$description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.50}","Dark":"{primitive.color.blue.900}"}}}}},"radius":{"action":{"$type":"dimension","$value":"{primitive.radius.12}","$description":"Corner radius for interactive action elements like buttons and inputs."}},"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."}}}'), Za = { 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 (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 (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 (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.default}", $description: "Secondary button border." }, hover: { $type: "color", $value: "{semantic.color.border.default}", $description: "Secondary button hover border." }, pressed: { $type: "color", $value: "{semantic.color.border.default}", $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.default}" }, 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." } } } }, Ja = { $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." }, "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.default}", $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." } }, xt = {
   $schema: Ya,
   $description: Ua,
   primitive: Xa,
@@ -3851,7 +3870,7 @@ function $t({
     pathDisplayMode: p,
     pathDisplayDepth: l,
     pathDisplayLeadingDot: m
-  }) : t, L = !!o || C, T = s ?? bn(S);
+  }) : t, L = !!o || C, P = s ?? bn(S);
   return /* @__PURE__ */ a(
     $n,
     {
@@ -3881,9 +3900,9 @@ function $t({
         Sn,
         {
           label: z,
-          swatchVar: T,
+          swatchVar: P,
           leadingSlot: d,
-          isColorValue: !!T,
+          isColorValue: !!P,
           isSelected: n,
           nowrap: g,
           isSourceNode: y,
@@ -4034,18 +4053,18 @@ class $e extends Dt {
     ) : /* @__PURE__ */ a(ct, { children: r }, d);
   }
 }
-const Tn = {
+const Pn = {
   minHeight: "100vh",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   fontFamily: i.fontFamily
 };
-function Pn({
+function Tn({
   displayText: t = "Oops",
   message: e = "Something went wrong"
 }) {
-  return /* @__PURE__ */ a("div", { style: Tn, "data-role": "error-recovery", children: /* @__PURE__ */ a(ee, { padding: "component", children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a("div", { style: Pn, "data-role": "error-recovery", children: /* @__PURE__ */ a(ee, { padding: "component", children: /* @__PURE__ */ a(
     B.div,
     {
       initial: { opacity: 0, y: 2 },
@@ -4087,7 +4106,7 @@ function Pn({
   ) }) });
 }
 function Fr() {
-  return /* @__PURE__ */ a(Pn, { displayText: "404", message: "Page not found" });
+  return /* @__PURE__ */ a(Tn, { displayText: "404", message: "Page not found" });
 }
 const Or = De.Root;
 function Mr({
@@ -4381,7 +4400,7 @@ const Ur = $.forwardRef(function({ items: e, label: r = "Breadcrumb", className:
       }
     }
   }
-  const T = S[b] ? `${k}-opt-${S[b].value}` : void 0;
+  const P = S[b] ? `${k}-opt-${S[b].value}` : void 0;
   return /* @__PURE__ */ h(
     re,
     {
@@ -4431,7 +4450,7 @@ const Ur = $.forwardRef(function({ items: e, label: r = "Breadcrumb", className:
                   "aria-expanded": !0,
                   "aria-controls": D,
                   "aria-autocomplete": "list",
-                  "aria-activedescendant": T,
+                  "aria-activedescendant": P,
                   "aria-label": s,
                   placeholder: s,
                   onChange: (x) => {
@@ -4511,7 +4530,7 @@ const Ur = $.forwardRef(function({ items: e, label: r = "Breadcrumb", className:
       `box-shadow ${i.motion.productive.duration}s ${i.motion.productive.easing}`,
       `color ${i.motion.productive.duration}s ${i.motion.productive.easing}`
     ].join(", ")
-  }, T = {
+  }, P = {
     panel: {
       minWidth: 0
     },
@@ -4552,7 +4571,7 @@ const Ur = $.forwardRef(function({ items: e, label: r = "Breadcrumb", className:
         className: z,
         style: {
           ...L,
-          ...T[s],
+          ...P[s],
           ...p
         },
         children: [
@@ -4760,7 +4779,7 @@ function Zr({
   style: l,
   contentStyle: m
 }) {
-  const { currentPath: u } = fe(), f = n ?? [], g = s && u === "/", y = s && f.some((T) => On(u, T.path, c == null ? void 0 : c(T))), [b, v] = W(() => s ? g ? !1 : y : !0);
+  const { currentPath: u } = fe(), f = n ?? [], g = s && u === "/", y = s && f.some((P) => On(u, P.path, c == null ? void 0 : c(P))), [b, v] = W(() => s ? g ? !1 : y : !0);
   oe(() => {
     if (s) {
       if (g) {
@@ -4789,17 +4808,17 @@ function Zr({
       },
       children: [
         t ? /* @__PURE__ */ a("p", { style: { ...D, margin: 0 }, children: t }) : null,
-        /* @__PURE__ */ a("nav", { children: o ?? f.map((T) => /* @__PURE__ */ a(
+        /* @__PURE__ */ a("nav", { children: o ?? f.map((P) => /* @__PURE__ */ a(
           tt,
           {
             variant: C,
-            label: T.label,
-            href: T.path,
+            label: P.label,
+            href: P.path,
             level: S,
-            disabled: T.disabled,
+            disabled: P.disabled,
             onNavigate: d
           },
-          T.path
+          P.path
         )) })
       ]
     }
@@ -4818,17 +4837,17 @@ function Zr({
         marginTop: 0
       },
       contentStyle: m,
-      children: o ?? f.map((T) => /* @__PURE__ */ a(
+      children: o ?? f.map((P) => /* @__PURE__ */ a(
         tt,
         {
           variant: C,
-          label: T.label,
-          href: T.path,
+          label: P.label,
+          href: P.path,
           level: S,
-          disabled: T.disabled,
+          disabled: P.disabled,
           onNavigate: d
         },
-        T.path
+        P.path
       ))
     }
   ) : L;
@@ -5286,7 +5305,7 @@ const Xn = Rt(null);
 function Kn() {
   return qt(Xn);
 }
-const Tt = i.space.px40, Zn = {
+const Pt = i.space.px40, Zn = {
   content: "var(--semantic-layout-width-content)",
   max: "var(--semantic-layout-width-max)"
 }, Jn = {
@@ -5295,7 +5314,7 @@ const Tt = i.space.px40, Zn = {
     marginLeft: "auto",
     marginRight: "auto",
     marginTop: 0,
-    paddingTop: Tt,
+    paddingTop: Pt,
     boxSizing: "border-box"
   }
 };
@@ -5329,7 +5348,7 @@ function Qn({
 }
 const er = {
   pageWrapper: {
-    paddingTop: Tt,
+    paddingTop: Pt,
     width: "100%",
     maxWidth: "var(--semantic-layout-width-content)",
     marginLeft: "auto",
@@ -5480,7 +5499,7 @@ function ro({ isDark: t }) {
                   children: [
                     "Product Designer focused on design and visual systems at scale. I build modular libraries, frameworks and visual languages that drive efficiency and consistency across complex ecosystems. Currently building",
                     " ",
-                    /* @__PURE__ */ a(Ta, { href: "/case-studies/hirobius", children: "Hirobius" }),
+                    /* @__PURE__ */ a(Pa, { href: "/case-studies/hirobius", children: "Hirobius" }),
                     ", a code-first design system that powers this site."
                   ]
                 }
@@ -5515,8 +5534,8 @@ export {
   Ce as Button,
   fr as Callout,
   ce as Card,
-  Pi as CardBody,
-  Ti as CardDescription,
+  Ti as CardBody,
+  Pi as CardDescription,
   zi as CardFooter,
   Ci as CardHeader,
   Ii as CardMetric,
@@ -5543,14 +5562,14 @@ export {
   kr as DocLinkCard,
   Br as EmptyState,
   $e as ErrorBoundary,
-  Pn as ErrorPattern,
+  Tn as ErrorPattern,
   yr as Field,
   mo as Form,
   ho as FormField,
   go as FormFieldShell,
   Kr as FoundationSwatch,
   ii as Grid,
-  Pr as HdsCheckbox,
+  Tr as HdsCheckbox,
   zr as HdsRadio,
   po as HdsRouterProvider,
   Dr as HdsSlider,
@@ -5561,8 +5580,8 @@ export {
   I as Icon,
   ke as IconButton,
   ro as InfoPage,
-  Tr as InlineCode,
-  Ta as InlineLink,
+  Pr as InlineCode,
+  Pa as InlineLink,
   Da as Input,
   V as Menu,
   Zr as NavGroup,
@@ -5598,7 +5617,7 @@ export {
   w as cn,
   Nn as defaultActivityEvents,
   i as hds,
-  Pa as inputVariants,
+  Ta as inputVariants,
   Mn as paginationRange,
   Ea as progressTrackVariants,
   Ba as skeletonVariants,