@hirobius/design-system 0.14.0 → 0.15.0

package/dist/hirobius-ui.js

@@ -1,3 +1,4 @@
+'use client';
 var ho = Object.defineProperty;
 var yo = (r, t, e) => t in r ? ho(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
 var R = (r, t, e) => yo(r, typeof t != "symbol" ? t + "" : t, e);
@@ -197,59 +198,64 @@ const Ao = {
   normal: "var(--semantic-space-layout-normal)",
   inset: "var(--semantic-space-layout-inset)",
   spacious: "var(--semantic-space-layout-spacious)"
-}, jo = $.forwardRef(
-  function({ children: t, colSpan: e, colOffset: a, style: i, className: o, as: n = "div" }, s) {
-    const c = {
-      ...e !== void 0 && { gridColumn: `span min(var(--current-cols, 12), ${e})` },
-      ...a !== void 0 && { gridColumnStart: a },
-      height: "100%",
-      minWidth: 0,
-      ...i
-    };
-    return /* @__PURE__ */ l(n, { ref: s, className: o, style: c, "data-hds-grid-item": "true", children: t });
-  }
-);
+}, jo = $.forwardRef(function({ children: t, colSpan: e, colOffset: a, style: i, className: o, as: n = "div" }, s) {
+  const c = {
+    ...e !== void 0 && { gridColumn: `span min(var(--current-cols, 12), ${e})` },
+    ...a !== void 0 && { gridColumnStart: a },
+    height: "100%",
+    minWidth: 0,
+    ...i
+  };
+  return /* @__PURE__ */ l(n, { ref: s, className: o, style: c, "data-hds-grid-item": "true", children: t });
+});
 function Uo(r, t) {
   return r <= b.breakpoints.sm ? Math.min(4, t) : r <= b.breakpoints.lg ? Math.min(8, t) : t;
 }
-const _o = $.forwardRef(
-  function({ children: t, layout: e = "fixed", columns: a = 12, gap: i = "inset", subgrid: o = !1, style: n, className: s, as: c = "div" }, d) {
-    const p = e === "fixed" && !o, [u, m] = Z(a);
-    tt(() => {
-      if (!p || typeof window > "u") return;
-      const v = () => {
-        m(Uo(window.innerWidth, a));
-      };
-      return v(), window.addEventListener("resize", v), () => {
-        window.removeEventListener("resize", v);
-      };
-    }, [a, p]);
-    let g;
-    o ? g = "subgrid" : e === "auto-fit" ? g = "repeat(auto-fit, minmax(280px, 1fr))" : g = `repeat(${u}, minmax(0, 1fr))`;
-    const f = {
-      display: "grid",
-      alignItems: "stretch",
-      ...g !== void 0 && { gridTemplateColumns: g },
-      ...p && {
-        "--current-cols": String(u)
-      },
-      gap: Wo[i],
-      ...n
+const _o = $.forwardRef(function({
+  children: t,
+  layout: e = "fixed",
+  columns: a = 12,
+  gap: i = "inset",
+  subgrid: o = !1,
+  style: n,
+  className: s,
+  as: c = "div"
+}, d) {
+  const p = e === "fixed" && !o, [u, m] = Z(a);
+  tt(() => {
+    if (!p || typeof window > "u") return;
+    const v = () => {
+      m(Uo(window.innerWidth, a));
     };
-    return /* @__PURE__ */ l(
-      c,
-      {
-        ref: d,
-        className: s,
-        style: f,
-        "data-hds-grid": "true",
-        "data-hds-component": "Grid",
-        "data-hds-metrics": `gap:${i}`,
-        children: t
-      }
-    );
-  }
-), Ba = Object.assign(_o, { Item: jo }), Go = {
+    return v(), window.addEventListener("resize", v), () => {
+      window.removeEventListener("resize", v);
+    };
+  }, [a, p]);
+  let g;
+  o ? g = "subgrid" : e === "auto-fit" ? g = "repeat(auto-fit, minmax(280px, 1fr))" : g = `repeat(${u}, minmax(0, 1fr))`;
+  const f = {
+    display: "grid",
+    alignItems: "stretch",
+    ...g !== void 0 && { gridTemplateColumns: g },
+    ...p && {
+      "--current-cols": String(u)
+    },
+    gap: Wo[i],
+    ...n
+  };
+  return /* @__PURE__ */ l(
+    c,
+    {
+      ref: d,
+      className: s,
+      style: f,
+      "data-hds-grid": "true",
+      "data-hds-component": "Grid",
+      "data-hds-metrics": `gap:${i}`,
+      children: t
+    }
+  );
+}), Ba = Object.assign(_o, { Item: jo }), Go = {
   start: "flex-start",
   center: "center",
   end: "flex-end",
@@ -473,24 +479,8 @@ function Jo({
               onError: () => D(!0)
             }
           ),
-          /* @__PURE__ */ l(
-            jr,
-            {
-              mode: "centered",
-              visible: z && !T,
-              label: v
-            }
-          ),
-          /* @__PURE__ */ l(
-            jr,
-            {
-              mode: "cursor",
-              visible: T,
-              x: M,
-              y: E,
-              label: v
-            }
-          )
+          /* @__PURE__ */ l(jr, { mode: "centered", visible: z && !T, label: v }),
+          /* @__PURE__ */ l(jr, { mode: "cursor", visible: T, x: M, y: E, label: v })
         ]
       }
     ) : (
@@ -1295,7 +1285,14 @@ function qf({ href: r, children: t, style: e, className: a, ...i }) {
             style: { transitionTimingFunction: "cubic-bezier(0.19, 1, 0.22, 1)" },
             children: [
               t,
-              /* @__PURE__ */ l("span", { className: "absolute left-0 top-full w-full h-full invisible group-hover:visible", "aria-hidden": "true", children: t })
+              /* @__PURE__ */ l(
+                "span",
+                {
+                  className: "absolute left-0 top-full w-full h-full invisible group-hover:visible",
+                  "aria-hidden": "true",
+                  children: t
+                }
+              )
             ]
           }
         ),
@@ -1609,7 +1606,7 @@ function ea(r, t) {
     (i, o) => i.kind === "plain" ? /* @__PURE__ */ l("span", { children: i.value }, o) : /* @__PURE__ */ l("span", { className: Qn(i.kind), children: i.value }, o)
   );
 }
-const is = /* @__PURE__ */ JSON.parse(`{"ActivityFeed":{"filePath":"src/app/components/activity-feed.tsx","description":"ActivityFeed — chronological system event log. Renders a list of activity events using white space as the sole separator. No dividers, no borders between items. 48px gap (space.12) creates the visual grouping between events; 16px gap inside each item structures the content hierarchy. Typography mapping: title → heading3 (24px/1.25) description → body (16px/1.5) timestamp → technical (12px/1.0 mono) category → ui (14px/1.5)","category":"Display","hidden":false,"props":[{"name":"events","type":"ActivityEvent[]","default":"[ { id: 'evt-001', title: 'File Uploaded', description: 'firmware-v2.4.1.bin was uploaded to the staging environment by adrianm. File size 4.2 MB. Integrity check passed.', timestamp: '2026-04-22 · 08:14', category: 'Storage', icon: <Icon icon={UploadSimple} size=\\"medium\\" />, tone: 'neutral', }, { id: 'evt-002', title: 'Policy Updated', description: 'Access control policy \\"eng-prod-write\\" was modified. Three permission groups were added; two removed. Change authored by sys-admin.', timestamp: '2026-04-22 · 07:52', category: 'Security', icon: <Icon icon={ShieldCheck} size=\\"medium\\" />, tone: 'info', action: { label: 'View Details' }, }, { id: 'evt-003', title: 'Deployment Failed', description: 'Release candidate rc-1.9.0 failed to deploy to production. Build step \\"lint:tokens\\" exited with code 1. Rollback triggered automatically.', timestamp: '2026-04-22 · 06:30', category: 'CI/CD', icon: <Icon icon={XCircle} size=\\"medium\\" />, tone: 'danger', action: { label: 'View Details' }, }, { id: 'evt-004', title: 'Service Deployed', description: 'API gateway v3.1.2 successfully promoted to production. Zero-downtime rollout completed across all three availability zones.', timestamp: '2026-04-21 · 23:05', category: 'CI/CD', icon: <Icon icon={Rocket} size=\\"medium\\" />, tone: 'success', }, { id: 'evt-005', title: 'Access Revoked', description: 'SSH access for contractor account \\"contractor-j.reed\\" was revoked following project completion. Token invalidated and session terminated.', timestamp: '2026-04-21 · 18:41', category: 'Security', icon: <Icon icon={Lock} size=\\"medium\\" />, tone: 'warning', }, ]","required":false,"description":""}],"observedTokens":[]},"Alert":{"filePath":"src/app/components/alert.tsx","description":"Alert - compact feedback surface with contextual severity.","category":"Feedback","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34","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.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":97,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":106,"sourceSnippet":"...hds.typeStyles.caption,"}]},"AlertDialog":{"filePath":"src/app/components/alert-dialog.tsx","description":"AlertDialog root + parts. Controlled via \`open\`/\`onOpenChange\`, or uncontrolled with \`defaultOpen\`.","category":"Overlays","hidden":false,"props":[],"observedTokens":[]},"AspectRatio":{"filePath":"src/app/components/aspect-ratio.tsx","description":"Locks its single child to the given width-to-height \`ratio\` so media reserves its box up front and never causes layout shift while it loads.","category":"Layout","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""},{"name":"ratio","type":"number","default":"1","required":false,"description":"Desired width-to-height ratio, e.g. \`16 / 9\`. Defaults to \`1\` (square)."}],"observedTokens":[]},"AssetImg":{"filePath":"src/app/components/asset-img.tsx","description":"AssetImg - responsive asset frame with fallback placeholder handling. Contexts: default, lightbox, and detail.","category":"Display","hidden":false,"props":[{"name":"alt","type":"string","required":false,"description":"Accessible alt text."},{"name":"className","type":"string","required":false,"description":"Optional class hook for parent-level styling."},{"name":"context","type":"'default' | 'lightbox' | 'detail'","default":"default","required":false,"description":"Rendering mode for the placeholder and image frame."},{"name":"draggable","type":"boolean","default":"false","required":false,"description":"Whether the image can be dragged."},{"name":"expandable","type":"boolean","default":"true","required":false,"description":"Whether the expandable tooltip is shown when the image is clickable."},{"name":"expandLabel","type":"string","required":false,"description":"Override label for the expandable tooltip."},{"name":"isDark","type":"boolean","default":"false","required":false,"description":"Dark-mode hint used by certain asset treatments."},{"name":"loading","type":"\\"lazy\\" | \\"eager\\"","default":"lazy","required":false,"description":"Image loading attribute: 'lazy' (default) for off-screen, 'eager' for above-the-fold."},{"name":"naturalHeight","type":"number","required":false,"description":"Natural asset height used to preserve aspect ratio in placeholders."},{"name":"naturalWidth","type":"number","required":false,"description":"Natural asset width used to preserve aspect ratio in placeholders."},{"name":"onClick","type":"(e: MouseEvent<Element, MouseEvent>) => void","required":false,"description":"Click handler for interactive assets."},{"name":"onMouseDown","type":"(e: MouseEvent<Element, MouseEvent>) => void","required":false,"description":"Pointer-down handler for interactive assets."},{"name":"onMouseLeave","type":"(e: MouseEvent<Element, MouseEvent>) => void","required":false,"description":"Pointer-leave handler for interactive assets."},{"name":"onMouseMove","type":"(e: MouseEvent<Element, MouseEvent>) => void","required":false,"description":"Pointer-move handler for interactive assets."},{"name":"onMouseUp","type":"(e: MouseEvent<Element, MouseEvent>) => void","required":false,"description":"Pointer-up handler for interactive assets."},{"name":"src","type":"string","required":true,"description":"Image source path."},{"name":"style","type":"CSSProperties","default":"{}","required":false,"description":"Optional inline styles for layout adjustments."},{"name":"title","type":"string","required":false,"description":"Optional title attribute."}],"observedTokens":[{"raw":"hds.space.px4","tokenPath":"primitive.space.1","sourceLine":249,"sourceSnippet":"gap: hds.space.px4,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":262,"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18","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":[]},"AvatarGroup":{"filePath":"src/app/components/avatar-group.tsx","description":"Renders up to \`max\` overlapping avatars followed by a \`+N\` overflow chip.","category":"Display","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"Avatar elements to cluster. Extra items beyond \`max\` collapse into +N."},{"name":"max","type":"number","required":false,"description":"Maximum avatars shown before collapsing into an overflow chip."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""}],"observedTokens":[]},"Badge":{"filePath":"src/app/components/badge.tsx","description":"Compact metadata/status chip. Tone is the only styling input.","category":"Feedback","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15","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":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\" | \\"inProgress\\"","required":false,"description":""}],"observedTokens":[]},"Bleed":{"filePath":"src/app/components/bleed.tsx","description":"Bleed — controlled negative-margin full-bleed within a padded container. padding\\" (a full-width image inside a padded card, a divider that should touch both edges) with a single tokenized negative-margin wrapper, so agents stop hand-rolling \`margin: -24px\` guesses that drift from the parent's actual padding token. use a semantic space step, never raw px, and MUST match the ancestor padding it is meant to cancel out. Do NOT use Bleed to fake extra spacing — its only job is canceling a specific known padding value on a specific axis. Every Layout reference: https://every-layout.dev/layouts/the-stack/ (bleed is the inverse of a padded Center/Container — HDS names it separately since \\"every-layout\\" itself does not ship a dedicated Bleed recipe).","category":"Layout","hidden":false,"props":[{"name":"amount","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"normal","required":false,"description":"Semantic space step to negate. Defaults to 'normal'."},{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the outer wrapper. Defaults to 'div'."},{"name":"axis","type":"'x' | 'y' | 'both'","default":"x","required":false,"description":"Which axis the negative margin applies to. Defaults to 'x'."},{"name":"children","type":"ReactNode","required":true,"description":"Bleed content."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[]},"Blockquote":{"filePath":"src/app/components/blockquote.tsx","description":"A quoted passage; pass \`cite\` for the source URL and \`attribution\` for a byline.","category":"Typography","hidden":false,"props":[{"name":"attribution","type":"ReactNode","required":false,"description":"Optional attribution rendered beneath the quote (e.g. the author)."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""}],"observedTokens":[]},"Box":{"filePath":"src/app/components/box.tsx","description":"Box — polymorphic layout primitive with a token-first \`sx\` engine. named primitive covers, without inviting ad hoc inline styles or raw hex/px values back into the system — the \`sx\` engine only accepts HDS token keys and a small, deliberate CSS subset. Box \`sx\` ONLY for genuinely one-off layout. sx colors/spacing MUST use token keys, not raw hex/px. Prefer named layout primitives over ad-hoc flex. \`sx\` is a deliberate SUBSET of MUI's sx — not all of CSS-in-JS is a feature: - Spacing shorthands (m/p/gap family) resolve numbers off the 4px HDS scale (\`--primitive-space-<n>\`) and named steps ('tight'|'normal'|'inset'|'spacious') off \`--semantic-space-layout-*\`. - \`color\`/\`bgcolor\`/\`borderColor\`/\`fill\`/\`stroke\` resolve dotted token keys ('content.primary', 'surface.raised', 'border.subtle', 'accent', 'accent.hover', 'feedback.success', …) to the matching semantic CSS var. - Responsive \`{ xs, sm, md, lg, xl }\` objects compile to \`min-width\` media queries off the HDS breakpoint scale. - \`&\`-prefixed keys ('&:hover', '& > *', '&[data-state=open]') nest a selector, composable with responsive values. - Everything else passes through as a plain camelCase→kebab-case CSS declaration (numbers get \`px\` unless in the unitless allowlist). See \`box-sx.ts\` for the pure resolver + hashing/injection engine.","category":"Layout","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element (or component) rendered as the outer wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":false,"description":"Box content."},{"name":"sx","type":"SxObject","required":false,"description":"Token-first \`sx\` layout engine — see the file-level docstring for the supported subset."}],"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159","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":72,"sourceSnippet":"style={hds.typeStyles.ui}"}]},"Button":{"filePath":"src/app/components/button.tsx","description":"Triggers an action when activated.","category":"Actions","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138","props":[{"name":"asChild","type":"boolean","default":"false","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":"iconLeft","type":"ReactNode","required":false,"description":"Leading icon rendered before the label."},{"name":"iconOnly","type":"boolean","default":"false","required":false,"description":"Render the button as a square icon-only control. Requires aria-label."},{"name":"iconRight","type":"ReactNode","required":false,"description":"Trailing icon rendered after the label."},{"name":"label","type":"string","required":false,"description":"Optional accessible label used when children are not suitable as the name."},{"name":"loading","type":"boolean","default":"false","required":false,"description":"Show a busy indicator and disable interaction."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","required":false,"description":""},{"name":"variant","type":"\\"primary\\" | \\"secondary\\" | \\"tertiary\\"","required":false,"description":""}],"observedTokens":[{"raw":"hds.duration","sourceLine":1,"sourceSnippet":"// motion-ok: motion delivered via Tailwind transition-[colors,filter] + active:brightness; gate accepts only hds.duration refs"}]},"ButtonGroup":{"filePath":"src/app/components/button-group.tsx","description":"Groups Button (or button-like) children into a single attached segment.","category":"Actions","hidden":false,"props":[{"name":"orientation","type":"\\"horizontal\\" | \\"vertical\\"","required":false,"description":""}],"observedTokens":[]},"Calendar":{"filePath":"src/app/components/calendar.tsx","description":"Renders an accessible month grid; compose it inside a Popover for the date inputs.","category":"Inputs","hidden":false,"props":[],"observedTokens":[]},"Callout":{"filePath":"src/app/components/callout.tsx","description":"Tone-driven side-rule callout for status, quotes, hypotheses.","category":"Feedback","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85","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":"Tagged per-export, not on the file block: this module exports eight components and a file-level","category":"Display","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11","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 variant. 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":"'neutral' | 'danger' | 'success' | 'warning' | 'info'","default":"neutral","required":false,"description":"Feedback tone — border IS the signal for status-driven cards. Defaults to \`neutral\` (no feedback border; falls back to \`variant\`/\`bordered\`)."},{"name":"variant","type":"'default' | 'accent'","default":"default","required":false,"description":"Structural treatment — \`default\` (borderless) or \`accent\` (2px accent border) for highlighted entries (e.g. recommended package). For a neutral-bordered card without semantic meaning, pass \`bordered\` instead of \`accent\`."}],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardBody":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":[],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardDescription":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":[],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardFooter":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":[],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardHeader":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":"metadata","type":"ReactNode","required":false,"description":"Top-of-card metadata zone — status badges, tags, eyebrow labels. Accepts <Badge>, <Tag>, or compound nodes. NEVER pass raw spans with status colors here; use the proper primitive so tone, padding, and accessibility role are consistent. Rendered ABOVE the title (Material/Polaris/Carbon convention) — no two-column flex, no crowding next to long titles, mobile-friendly."}],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardMetric":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":"label","type":"ReactNode","required":true,"description":"Uppercase eyebrow label (e.g. \\"Retainer\\", \\"Open tasks\\")."},{"name":"sub","type":"ReactNode","required":false,"description":"Optional sub-line beneath the value (e.g. \\"Active\\", \\"this week\\")."},{"name":"tone","type":"'neutral' | 'danger' | 'success' | 'warning' | 'info'","default":"neutral","required":false,"description":"Tone for the value — applies semantic color. Defaults to neutral."},{"name":"value","type":"ReactNode","required":true,"description":"Big value (e.g. \\"$3,500\\", \\"12\\", \\"67%\\"). Rendered at h2 weight."}],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardProgress":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":"label","type":"ReactNode","required":false,"description":"Optional caption rendered beneath the bar. Reserved baseline so it never crowds the slot above. Accepts strings or react nodes."},{"name":"max","type":"number","default":"100","required":false,"description":"Maximum value. Defaults to 100."},{"name":"tone","type":"'neutral' | 'danger' | 'success' | 'warning' | 'info'","default":"neutral","required":false,"description":"Visual tone for the fill. Defaults to \`neutral\` (accent-blue fill). Use feedback tones to signal status without a separate badge (e.g. red bar for over-budget)."},{"name":"value","type":"number","required":true,"description":"Current value (0..max)."}],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardTitle":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":[],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"Carousel":{"filePath":"src/app/components/carousel.tsx","description":"Renders children as a snap-scrolling track with Prev/Next scroll buttons.","category":"Display","hidden":false,"props":[{"name":"ariaLabel","type":"string","default":"Carousel","required":false,"description":"Accessible name for the carousel region. Defaults to 'Carousel'."},{"name":"children","type":"ReactNode","required":true,"description":"Slides rendered inside the scroll-snap track."},{"name":"showControls","type":"boolean","default":"true","required":false,"description":"Show the Prev/Next scroll affordance buttons. Defaults to true."}],"observedTokens":[]},"Center":{"filePath":"src/app/components/center.tsx","description":"Center — max-width column, auto-centered horizontally. max-width box with auto horizontal margins and, optionally, matching horizontal gutters — so agents stop hand-rolling \`marginInline: auto\` plus an ad hoc max-width value. use the semantic width scale ('content' | 'max'), never a raw px value. gutter, when set, MUST use a semantic space step, never raw px. Do NOT use Center for full-bleed page shells — use Container. Do NOT use Center when you need the deprecated Container padding prop — gutter replaces it. Every Layout reference: https://every-layout.dev/layouts/center/","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":"Center content."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"gutter","type":"'tight' | 'normal' | 'inset' | 'spacious'","required":false,"description":"Optional matching horizontal gutter (padding-inline) from the semantic space scale."},{"name":"maxWidth","type":"'content' | 'max'","default":"content","required":false,"description":"Max width: 'content' (760px prose) | 'max' (1200px full layouts). Defaults to 'content'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[]},"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,"}]},"CircularProgress":{"filePath":"src/app/components/circular-progress.tsx","description":"A circular progress ring; pass \`value\`/\`max\` or set \`indeterminate\`.","category":"Feedback","hidden":false,"props":[{"name":"indeterminate","type":"boolean","default":"false","required":false,"description":"Show a continuous spinner instead of a measured arc."},{"name":"label","type":"string","required":false,"description":"Accessible name for the progress indicator."},{"name":"max","type":"number","default":"100","required":false,"description":"Upper bound for \`value\`. Defaults to 100."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","default":"md","required":false,"description":"Ring diameter preset. Defaults to \`md\`."},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","required":false,"description":""},{"name":"value","type":"number","default":"0","required":false,"description":"Current value. Ignored (and the ring animates) when \`indeterminate\`."}],"observedTokens":[{"raw":"hds.duration","sourceLine":6,"sourceSnippet":"// motion-ok: indeterminate spin via Tailwind animate-spin (gate accepts only hds.duration refs; the SVG sweep has no token duration equivalent)"}]},"Cluster":{"filePath":"src/app/components/cluster.tsx","description":"Cluster — wrapping horizontal group with even gaps. (tag rows, button groups, chip lists, filter pills) with a single flex-wrap wrapper and a tokenized gap in both axes, so agents stop hand-rolling \`flexWrap\` + \`gap\` + alignment combinations inline. horizontal groups that should wrap as a unit. Spacing MUST use semantic steps, never raw px. Do NOT use Cluster for a strict single-line row — use Stack with \`direction=\\"row\\"\` when wrapping is never desired. Do NOT use Cluster for two-dimensional grid layouts — use Grid. Every Layout reference: https://every-layout.dev/layouts/cluster/","category":"Layout","hidden":false,"props":[{"name":"align","type":"'start' | 'center' | 'end' | 'stretch'","default":"center","required":false,"description":"Cross-axis alignment of items within a wrapped row. Defaults to 'center'."},{"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":"Cluster content — items that wrap as a unit."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"gap","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"tight","required":false,"description":"Gap token applied to both axes (row and column). Defaults to 'tight'."},{"name":"justify","type":"'start' | 'center' | 'end' | 'space-between'","default":"start","required":false,"description":"Main-axis distribution. Defaults to 'start'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[]},"CodeBlock":{"filePath":"src/app/components/code-block.tsx","description":"CodeBlock - code display with copy button and optional collapsible toggle.","category":"Display","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154","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.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":21,"sourceSnippet":"// semantic.typography.mono composite (formerly hds.typeStyles.technical) — var()-based, no matching Tailwind-theme utility."}]},"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237","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":[]},"CommandPalette":{"filePath":"src/app/components/command-palette.tsx","description":"Mountable trigger + dialog. Drop into header slot; component manages its own open state and Cmd-K / Ctrl-K global keybinding.","category":"Overlays","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Optional className for the trigger button."}],"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. semantic max-width scale, so agents stop hand-rolling \`marginInline: auto\` plus an ad hoc max-width pixel value for page shells. use the semantic width scale ('content' | 'max'), never a raw px value. Do NOT use the deprecated \`padding\` prop — it is a no-op; apply padding via Surface or a Stack instead. Do NOT import Container directly inside a page under src/app/pages — use Page, which wraps Container and owns vertical rhythm. Use Center instead when you also need a horizontal gutter, which Container does not support. 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":[]},"ContextMenu":{"filePath":"src/app/components/context-menu.tsx","description":"ContextMenu root + parts. Wrap the right-clickable area in \`ContextMenu.Trigger\`. Controlled via \`onOpenChange\`.","category":"Overlays","hidden":false,"props":[],"observedTokens":[]},"Cover":{"filePath":"src/app/components/cover.tsx","description":"Cover — vertical shell with an auto-centered main region. centered hero/main region that absorbs the remaining space, and an optional footer\\" problem via the flex auto-margin centering technique, so agents stop hand-rolling \`position: absolute\` centering or a fixed 50vh split. semantic space step, never raw px. minHeight is a CSS length dimension (not spacing) — defaults to '100svh' (small viewport height, safe against mobile browser chrome). Pass minHeight=\\"100vh\\" explicitly if you need the classic viewport unit for a target that predates svh support. Do NOT use Cover for ordinary page content flow — use Stack. Every Layout reference: https://every-layout.dev/layouts/cover/","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":"centerSlot","type":"ReactNode","required":false,"description":"Alias for \`children\` — the centered main region. If both are set, \`centerSlot\` wins."},{"name":"children","type":"ReactNode","required":false,"description":"The centered main region — takes the remaining space via auto margins. Also available as \`centerSlot\`."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"footer","type":"ReactNode","required":false,"description":"Optional content pinned to the bottom."},{"name":"gap","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"normal","required":false,"description":"Gap enforced between header/main/footer, in addition to the auto-margin centering. Defaults to 'normal'."},{"name":"header","type":"ReactNode","required":false,"description":"Optional content pinned to the top."},{"name":"minHeight","type":"string","default":"100svh","required":false,"description":"Minimum block size of the cover (CSS length). Defaults to '100svh'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[]},"DateInput":{"filePath":"src/app/components/date-input.tsx","description":"Text field + calendar popover for picking a single date.","category":"Inputs","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":""},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"displayFormat","type":"string","default":"yyyy-MM-dd","required":false,"description":"date-fns format string used to display and parse the text value."},{"name":"id","type":"string","required":false,"description":""},{"name":"onChange","type":"(date: Date) => void","required":false,"description":"Fired with the next date, or undefined when the field is cleared/invalid."},{"name":"placeholder","type":"string","required":false,"description":"Placeholder shown when the field is empty; defaults to the display format."},{"name":"value","type":"Date","required":false,"description":"Currently selected date, or undefined when empty."}],"observedTokens":[]},"DateRangeInput":{"filePath":"src/app/components/date-range-input.tsx","description":"DateRangeInput — date-range field composing the existing Popover with Calendar in range mode, so picking a start/end date reads as one overlay pattern with Combobox and Menu rather than a bespoke widget. No new primitive — built entirely on the HDS Popover + Calendar. The trigger reads like a secondary input, showing a placeholder or the formatted \`from – to\` range; the content is a two-month range calendar. <DateRangeInput value={range} onChange={setRange} />","category":"Inputs","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":""},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"displayFormat","type":"string","default":"yyyy-MM-dd","required":false,"description":"date-fns format string used to render the selected range on the trigger."},{"name":"id","type":"string","required":false,"description":""},{"name":"numberOfMonths","type":"number","default":"2","required":false,"description":"Number of months rendered side by side in the calendar."},{"name":"onChange","type":"(range: DateRange) => void","required":false,"description":"Fired with the next range whenever the calendar selection changes."},{"name":"placeholder","type":"string","default":"Select date range","required":false,"description":"Trigger text when nothing is selected."},{"name":"value","type":"DateRange","required":false,"description":"Currently selected range."}],"observedTokens":[]},"DateTimeInput":{"filePath":"src/app/components/date-time-input.tsx","description":"Text date field + calendar popover, paired with a native time field, producing one Date.","category":"Inputs","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":""},{"name":"dateFormat","type":"string","default":"yyyy-MM-dd","required":false,"description":"date-fns format string used to display and parse the date portion."},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"id","type":"string","required":false,"description":""},{"name":"onChange","type":"(date: Date) => void","required":false,"description":"Fired with the next combined date/time, or undefined when cleared."},{"name":"value","type":"Date","required":false,"description":"Currently selected date + time, or undefined when empty."}],"observedTokens":[]},"Dialog":{"filePath":"src/app/components/dialog.tsx","description":"Tagged per-export, not on the file block: this module exports ten components and a file-level","category":"Overlays","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27","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":[]},"DialogClose":{"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":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"DialogContent":{"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":"asChild","type":"boolean","required":false,"description":""},{"name":"hideClose","type":"boolean","default":"false","required":false,"description":"Hide the built-in close affordance. Useful for fully custom layouts."}],"observedTokens":[]},"DialogDescription":{"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":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"DialogFooter":{"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":[],"observedTokens":[]},"DialogHeader":{"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":[],"observedTokens":[]},"DialogOverlay":{"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":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"DialogPortal":{"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":[],"observedTokens":[]},"DialogTitle":{"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":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"DialogTrigger":{"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":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"Disclosure":{"filePath":"src/app/components/disclosure.tsx","description":"Disclosure - compact disclosure surface for optional explanatory content.","category":"Layout","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453","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":45,"sourceSnippet":"panel: hds.semantic.space.sidebar.gap,"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":46,"sourceSnippet":"nav: hds.semantic.space.sidebar.sectionGap,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":47,"sourceSnippet":"card: hds.semantic.space.component.gap,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":127,"sourceSnippet":"style={variant === 'nav' ? hds.typeStyles.ui : hds.typeStyles.caption}"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":127,"sourceSnippet":"style={variant === 'nav' ? hds.typeStyles.ui : hds.typeStyles.caption}"}]},"Divider":{"filePath":"src/app/components/divider.tsx","description":"Divider — semantic separator between content regions.","category":"Layout","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26","props":[{"name":"orientation","type":"\\"horizontal\\" | \\"vertical\\"","default":"horizontal","required":false,"description":""},{"name":"spacing","type":"string | number","required":false,"description":"Perpendicular spacing around the divider."},{"name":"strong","type":"boolean","required":false,"description":"@deprecated Use \`variant=\\"strong\\"\` instead. Kept for backward compatibility; when set, it takes precedence over \`variant\`. @removeIn 1.0.0 — a boolean superseded by a variant axis. Removing it is breaking, so it waits for the major."},{"name":"variant","type":"\\"strong\\" | \\"default\\"","required":false,"description":""}],"observedTokens":[]},"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":17,"sourceSnippet":"const bodyTextStyle = hds.typeStyles.ui;"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":88,"sourceSnippet":"const metaTextStyle = metaStyle === 'ui' ? hds.typeStyles.ui : hds.typeStyles.caption;"},{"raw":"hds.typeStyles.heading3","tokenPath":"semantic.typography.h3","sourceLine":164,"sourceSnippet":"style={hds.typeStyles.heading3}"}]},"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352","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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81","props":[{"name":"label","type":"string","required":true,"description":""},{"name":"mono","type":"boolean","required":false,"description":""},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","required":false,"description":""},{"name":"value","type":"ReactNode","required":false,"description":""}],"observedTokens":[]},"FileInput":{"filePath":"src/app/components/file-input.tsx","description":"A dashed dropzone that opens the native file picker or accepts a drag-and-drop.","category":"Inputs","hidden":false,"props":[{"name":"accept","type":"string","required":false,"description":"Native \`accept\` attribute, e.g. \`\\"image/*\\"\`."},{"name":"disabled","type":"boolean","required":false,"description":"Disable interaction."},{"name":"label","type":"ReactNode","default":"Click to upload or drag and drop","required":false,"description":"Dropzone prompt content."},{"name":"multiple","type":"boolean","required":false,"description":"Allow selecting more than one file."},{"name":"onFiles","type":"(files: File[]) => void","required":false,"description":"Called with the selected (or dropped) files."}],"observedTokens":[{"raw":"hds.duration","sourceLine":8,"sourceSnippet":"// motion-ok: dropzone border/background feedback via Tailwind transition-colors (gate accepts only hds.duration refs)"}]},"Form":{"filePath":"src/app/components/form.tsx","description":"Styled \`<form>\` with consistent vertical field rhythm. Tagged per-export: FormField and FormFieldShell share this module and have no Figma node, so a file-level","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94","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"}]},"Frame":{"filePath":"src/app/components/frame.tsx","description":"Frame — aspect-ratio-locked, token-clipped media box. cause layout shift while it loads, cropped to a token-governed corner radius\\" — a thin, token-skinned wrapper over \`AspectRatio\` (\`@radix-ui/react-aspect-ratio\`), which already owns the ratio-lock mechanics. Frame adds the overflow-hidden clip and semantic radius that a bare media frame needs and \`AspectRatio\` deliberately leaves undecorated. media (image, video, embed, map tile). radius MUST use a semantic borderRadius token, never a raw px value. Do NOT reach for bare \`AspectRatio\` in product code just to add a border-radius by hand — use Frame. Do NOT use Frame for non-media layout — it exists purely as a media clipping frame. Every Layout reference: https://every-layout.dev/layouts/frame/","category":"Layout","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the outer clipping wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":true,"description":"Media rendered inside the locked-ratio, clipped frame."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"radius","type":"'none' | 'sm' | 'md' | 'full'","default":"md","required":false,"description":"Corner radius token applied to the clipped frame. Defaults to 'md'."},{"name":"ratio","type":"number","default":"16 / 9","required":false,"description":"Desired width-to-height ratio, e.g. \`16 / 9\`. Defaults to \`16 / 9\`."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[{"raw":"hds.borderRadius[0]","tokenPath":"primitive.radius.0","sourceLine":28,"sourceSnippet":"none: hds.borderRadius[0],"},{"raw":"hds.borderRadius.sm","tokenPath":"primitive.radius.4","sourceLine":29,"sourceSnippet":"sm: hds.borderRadius.sm,"},{"raw":"hds.borderRadius.md","tokenPath":"primitive.radius.8","sourceLine":30,"sourceSnippet":"md: hds.borderRadius.md,"},{"raw":"hds.borderRadius.full","tokenPath":"primitive.radius.full","sourceLine":31,"sourceSnippet":"full: hds.borderRadius.full,"}]},"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29","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.space.px1","tokenPath":"primitive.space.px1","sourceLine":212,"sourceSnippet":"animate={{ x: isPressed ? hds.space.px1 : 0 }}"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":218,"sourceSnippet":"...hds.typeStyles.ui,"}]},"HdsRadio":{"filePath":"src/app/components/radio.tsx","description":"HdsRadio — radio button with animated selection indicator.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17","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.space.px1","tokenPath":"primitive.space.px1","sourceLine":209,"sourceSnippet":"x: isPressed ? hds.space.px1 : 0,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":216,"sourceSnippet":"...hds.typeStyles.ui,"}]},"HdsSelect":{"filePath":"src/app/components/select.tsx","description":"HdsSelect — dropdown selector built on Radix Select.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49","props":[{"name":"label","type":"string","required":true,"description":"Select label rendered above the control."},{"name":"onChange","type":"(v: string) => void","required":true,"description":"Called when the user picks a different option."},{"name":"options","type":"{ value: string; label: string; }[]","required":true,"description":"Select options displayed in the dropdown."},{"name":"showLabel","type":"boolean","default":"true","required":false,"description":"Controls whether the label is rendered."},{"name":"value","type":"string","required":true,"description":"Currently selected value."}],"observedTokens":[{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":48,"sourceSnippet":"style={{ ...hds.typeStyles.caption, marginBottom: hds.semantic.space.component.gap }}"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":48,"sourceSnippet":"style={{ ...hds.typeStyles.caption, marginBottom: hds.semantic.space.component.gap }}"}]},"HdsSlider":{"filePath":"src/app/components/slider.tsx","description":"HdsSlider — range slider with label and value display.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265","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.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":48,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.space.px2","tokenPath":"primitive.space.px2","sourceLine":57,"sourceSnippet":"initial={{ opacity: 0.72, y: hds.space.px2 }}"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":63,"sourceSnippet":"style={{ ...hds.typeStyles.technical }}"}]},"HdsThemeProvider":{"filePath":"src/app/context/hds-theme.tsx","description":"Renders a \`data-hds\` scope wrapper that carries the four theming dials as root attributes + CSS vars, and exposes them to \`useHdsTheme()\`.","category":"Theming","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Wrapper element type for the \`data-hds\` scope. Default \`\\"div\\"\`."},{"name":"brand","type":"string","required":false,"description":"Brand-overlay slug (compiled \`[data-brand]\`/\`[data-tenant]\` block). Omit for the base brand."},{"name":"className","type":"string","required":false,"description":""},{"name":"density","type":"'comfortable' | 'compact'","required":false,"description":"Spacing density. \`\\"compact\\"\` activates the compact overrides; omit for comfortable."},{"name":"fontFamily","type":"string","required":false,"description":"Body font-family override (\`--hds-font-family\`)."},{"name":"fontFamilyMono","type":"string","required":false,"description":"Monospace font-family override (\`--hds-font-family-mono\`)."},{"name":"style","type":"CSSProperties","required":false,"description":""},{"name":"theme","type":"'light' | 'dark'","required":false,"description":"Colour theme. \`\\"dark\\"\` activates the dark token overrides; omit for light."}],"observedTokens":[]},"HdsToggle":{"filePath":"src/app/components/toggle.tsx","description":"HdsToggle — boolean on/off toggle with animated thumb.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19","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.space.px1","tokenPath":"primitive.space.px1","sourceLine":186,"sourceSnippet":"y: isPressed ? hds.space.px1 : 0,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":244,"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":"HdsHeadingGap","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":"HdsHeadingLevel","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":[]},"HoverCard":{"filePath":"src/app/components/hover-card.tsx","description":"HoverCard root + parts. Controlled via \`open\`/\`onOpenChange\`, or uncontrolled with \`defaultOpen\`; tune timing with \`openDelay\`/\`closeDelay\`.","category":"Overlays","hidden":false,"props":[],"observedTokens":[]},"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\\" | \\"light\\" | \\"thin\\" | \\"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":12,"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39","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":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155","props":[{"name":"compact","type":"boolean","required":false,"description":"@deprecated Use \`density=\\"compact\\"\` instead. Kept for backward compatibility; when set, it takes precedence over \`density\`. @removeIn 1.0.0 — a boolean superseded by a variant axis, breaking to remove, so it waits for the major."},{"name":"copyable","type":"boolean","default":"false","required":false,"description":"Show a copy-to-clipboard button. children must be a string when true."},{"name":"density","type":"\\"comfortable\\" | \\"compact\\"","required":false,"description":"Layout density. \`compact\` tightens vertical rhythm for dense body copy and table prose. Defaults to \`comfortable\`."},{"name":"style","type":"CSSProperties","required":false,"description":""}],"observedTokens":[{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":103,"sourceSnippet":"gap: 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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161","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":60,"sourceSnippet":"marginLeft: hds.semantic.space.subgrid.xs,"},{"raw":"hds.semantic.space.subgrid.hairline","tokenPath":"semantic.space.subgrid.hairline","sourceLine":61,"sourceSnippet":"marginBottom: hds.semantic.space.subgrid.hairline,"}]},"Input":{"filePath":"src/app/components/input.tsx","description":"Input — text field primitive with label, helper, and error slots.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20","props":[{"name":"className","type":"string","required":false,"description":"Class hook for the outer wrapper."},{"name":"disabled","type":"boolean","required":false,"description":"Disable interaction."},{"name":"error","type":"boolean","required":false,"description":"Mark the field as invalid (sets aria-invalid + destructive border)."},{"name":"errorMessage","type":"string","required":false,"description":"Error message rendered below the input when \`error\` is true."},{"name":"helperText","type":"string","required":false,"description":"Supporting helper text rendered below the input when not in error."},{"name":"inputClassName","type":"string","required":false,"description":"Class hook for the input element itself."},{"name":"label","type":"string","required":false,"description":"Field label rendered above the input."},{"name":"leadingVisual","type":"ReactNode","required":false,"description":"Optional leading visual rendered inside the input shell."},{"name":"loading","type":"boolean","default":"false","required":false,"description":"Show busy indicator and disable interaction."},{"name":"size","type":"InputSize","default":"md","required":false,"description":"Field height tier."},{"name":"textStyle","type":"\\"body\\" | \\"mono\\"","default":"body","required":false,"description":"Body (sans) or mono text style for the value."},{"name":"trailingVisual","type":"ReactNode","required":false,"description":"Optional trailing visual rendered inside the input shell."},{"name":"type","type":"'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number'","default":"text","required":false,"description":"Native input type."}],"observedTokens":[{"raw":"hds.duration","sourceLine":1,"sourceSnippet":"// motion-ok: input field — focus ring + transition via Tailwind utilities (gate accepts only hds.duration refs)"}]},"InputGroup":{"filePath":"src/app/components/input-group.tsx","description":"A single-line input with optional \`leading\`/\`trailing\` adornments.","category":"Inputs","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Class applied to the wrapper (the input itself stays transparent)."},{"name":"leading","type":"ReactNode","required":false,"description":"Content rendered before the input, e.g. an icon or a static prefix."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"trailing","type":"ReactNode","required":false,"description":"Content rendered after the input, e.g. a unit or a clear button."}],"observedTokens":[{"raw":"hds.duration","sourceLine":6,"sourceSnippet":"// motion-ok: focus ring + color feedback via Tailwind transition-colors (gate accepts only hds.duration refs); mirrors input.tsx"}]},"Kbd":{"filePath":"src/app/components/kbd.tsx","description":"Renders a keyboard key or shortcut token, e.g. \`<Kbd>⌘K</Kbd>\`.","category":"Display","hidden":false,"props":[{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""}],"observedTokens":[]},"Lightbox":{"filePath":"src/app/components/image-lightbox.tsx","description":"Lightbox — full-bleed image viewer built on Radix Dialog. Full-bleed image viewer built on Radix Dialog (raw primitives, not the card \`Dialog\` wrapper — a lightbox is a transparent full-screen surface, not a centered card). Radix owns the modal a11y contract the hand-rolled version was missing: focus trap, focus restore on close, Escape, and scroll-lock. Motion is retained via \`forceMount\` + AnimatePresence + \`asChild\`: the backdrop fades and the image panel scales/translates in, exactly as before.","category":"Overlays","hidden":false,"props":[{"name":"alt","type":"string","required":false,"description":""},{"name":"caption","type":"string","required":false,"description":""},{"name":"captionHref","type":"string","required":false,"description":""},{"name":"captionLabel","type":"string","required":false,"description":""},{"name":"naturalHeight","type":"number","required":false,"description":""},{"name":"naturalWidth","type":"number","required":false,"description":""},{"name":"onClose","type":"() => void","required":true,"description":""},{"name":"open","type":"boolean","required":true,"description":""},{"name":"src","type":"string","required":true,"description":""}],"observedTokens":[{"raw":"hds.semantic.space.layout.gap","tokenPath":"semantic.space.layout.gap","sourceLine":52,"sourceSnippet":"const overlayInset = hds.semantic.space.layout.gap;"},{"raw":"hds.zIndex.modal","tokenPath":"primitive.zIndex.1000","sourceLine":78,"sourceSnippet":"zIndex: hds.zIndex.modal,"},{"raw":"hds.effect.blur.lightboxBackdrop","sourceLine":81,"sourceSnippet":"backdropFilter: \`blur(\${hds.effect.blur.lightboxBackdrop})\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":202,"sourceSnippet":"...hds.typeStyles.caption,"}]},"MetadataList":{"filePath":"src/app/components/metadata-list.tsx","description":"Renders object metadata as a semantic \`<dl>\` of term/description pairs.","category":"Display","hidden":false,"props":[{"name":"footer","type":"ReactNode","required":false,"description":"Optional summary band rendered as the final row on a subtle surface — e.g. a footnote or aggregate note. Only rendered by the \`divided\` variant."},{"name":"items","type":"MetadataListItem[]","required":true,"description":"The term/description pairs to render."},{"name":"orientation","type":"\\"horizontal\\" | \\"vertical\\"","default":"vertical","required":false,"description":""},{"name":"variant","type":"\\"plain\\" | \\"divided\\"","default":"plain","required":false,"description":"Visual treatment. - \`'plain'\` (default) — bare term/description pairs; honours \`orientation\`. - \`'divided'\` — one bordered, rounded container with a full-width rule between each pair (term above its rich description). Ignores \`orientation\` (always term-above-description). Use for spec sheets / namespace tables."}],"observedTokens":[{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":78,"sourceSnippet":"border: \`\${hds.borderWidth.default} solid var(--semantic-color-border-default)\`,"}]},"MultiSelector":{"filePath":"src/app/components/multi-selector.tsx","description":"MultiSelector — multi-select dropdown composing the existing Popover with a checkbox option list, so choosing several values from a fixed set reads as one overlay pattern with Combobox and Menu rather than a bespoke widget. No new dependency — built entirely on the HDS Popover. The trigger reads like a secondary Button, showing a placeholder or a \`\${n} selected\` count; the content is a token-skinned list where each row is a checkbox toggling membership in \`value\`. <MultiSelector options={[{ value: 'a', label: 'Apple' }, { value: 'b', label: 'Banana' }]} value={fruits} onChange={setFruits} />","category":"Inputs","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":""},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"onChange","type":"(next: string[]) => void","required":true,"description":"Fired with the next selected-values array whenever an option is toggled."},{"name":"options","type":"MultiSelectorOption[]","required":true,"description":"Selectable options."},{"name":"placeholder","type":"string","default":"Select…","required":false,"description":"Trigger text when nothing is selected."},{"name":"value","type":"string[]","required":true,"description":"Currently selected values."}],"observedTokens":[]},"NavGroup":{"filePath":"src/app/components/nav-group.tsx","description":"NavGroup - labeled navigation group for stacks of nav items.","category":"Navigation","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304","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":95,"sourceSnippet":"const labelStyle: CSSProperties = variant === 'side' ? hds.typeStyles.ui : hds.typeStyles.caption;"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":95,"sourceSnippet":"const labelStyle: CSSProperties = variant === 'side' ? hds.typeStyles.ui : hds.typeStyles.caption;"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":99,"sourceSnippet":"variant === 'toc' ? hds.semantic.space.sidebar.sectionGap : getNavLevelLeadingPadding(level),"},{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":101,"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258","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":"NavVariant","default":"side","required":false,"description":"Visual layout variant for side nav or table of contents usage."}],"observedTokens":[{"raw":"hds.motion.productive","sourceLine":8,"sourceSnippet":"// cva classes below; timing matches hds.motion.productive (150ms) via Tailwind's"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":119,"sourceSnippet":"typeStyle: hds.typeStyles.ui,"},{"raw":"hds.semantic.space.sidebar.railPadding","tokenPath":"semantic.space.sidebar.railPadding","sourceLine":120,"sourceSnippet":"leadingPaddingX: hds.semantic.space.sidebar.railPadding,"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":127,"sourceSnippet":"leadingPaddingX: hds.semantic.space.sidebar.sectionGap,"},{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":128,"sourceSnippet":"trailingPaddingX: hds.semantic.space.sidebar.gap,"}]},"OverflowList":{"filePath":"src/app/components/overflow-list.tsx","description":"Renders up to \`max\` children followed by a \`+N\` overflow chip (or custom node).","category":"Layout","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"Items to lay out. Extra items beyond \`max\` collapse into the overflow node."},{"name":"max","type":"number","required":false,"description":"Maximum items shown before collapsing into overflow. Unset or >= count shows all."},{"name":"renderOverflow","type":"(count: number) => ReactNode","required":false,"description":"Custom renderer for the overflow node. Defaults to a muted \`+N\` chip."}],"observedTokens":[]},"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.12","sourceLine":37,"sourceSnippet":"default: { top: hds.space.px48, bottom: hds.space.px64 },"},{"raw":"hds.space.px64","tokenPath":"primitive.space.16","sourceLine":37,"sourceSnippet":"default: { top: hds.space.px48, bottom: hds.space.px64 },"},{"raw":"hds.space.px24","tokenPath":"primitive.space.6","sourceLine":38,"sourceSnippet":"compact: { top: hds.space.px24, bottom: hds.space.px32 },"},{"raw":"hds.space.px32","tokenPath":"primitive.space.8","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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194","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":[]},"Pin":{"filePath":"src/app/components/pin.tsx","description":"Pin — sticky-pin an element within its scroll region. section scrolls — the dependency-free basis for pinned scroll scenes (the \\"tall section + sticky child\\" pattern that GSAP's \`pin: true\` solves imperatively). Reach for this before hand-rolling sticky positioning. Give the pinned element a TALLER scrolling parent so it has room to travel. For the scroll-scrubbed animation inside a pinned scene, use CSS \`animation-timeline\` (see Reveal) or \`useScrollProgress\` from \`@hirobius/design-system/scroll\`. See ADR-021.","category":"Layout","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":true,"description":"Content pinned within the scroll region."},{"name":"className","type":"string","required":false,"description":"Escape hatch: extra wrapper classes."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: narrow style adjustments that do not belong in the primitive API."},{"name":"top","type":"string","default":"0","required":false,"description":"Sticky offset from the top of the scroll region (CSS length). Defaults to '0'."}],"observedTokens":[]},"Progress":{"filePath":"src/app/components/progress.tsx","description":"Linear progress. Determinate when \`value\` is a number, else indeterminate.","category":"Feedback","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91","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":[]},"Reveal":{"filePath":"src/app/components/reveal.tsx","description":"Reveal — reveal-on-scroll primitive via CSS scroll-driven animation. purely by scroll position (\`animation-timeline: view()\`) — no JS, no deps, no IntersectionObserver. Reach for this before hand-rolling reveal logic. \`animation-timeline\` is supported AND the user has not requested reduced motion (both fall back to visible, never stuck hidden). Pick \`animation\` from the fixed set — do not hand-roll keyframes. For momentum/inertia scrolling wrap the app in \`SmoothScroll\`; for a scroll-progress value in JS use \`useScrollProgress\` — both from \`@hirobius/design-system/scroll\`. See ADR-021.","category":"Motion","hidden":false,"props":[{"name":"animation","type":"'fade' | 'fade-up' | 'fade-down' | 'scale'","default":"fade-up","required":false,"description":"Entrance animation. Defaults to 'fade-up'."},{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":true,"description":"Content revealed as it scrolls into view."},{"name":"className","type":"string","required":false,"description":"Escape hatch: extra wrapper classes."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: narrow style adjustments that do not belong in the primitive API."}],"observedTokens":[]},"SegmentedControl":{"filePath":"src/app/components/segmented-control.tsx","description":"SegmentedControl \\" segmented selection input for compact mutually-exclusive choices. The active×hover×pressed×disabled×secondary state matrix is expressed through \`cva\` compound variants keyed by \`active\` / \`interaction\` (the live-or-frozen-demo hover/pressed/rest sub-state) / \`variant\` / \`disabled\`, each resolving to the same \`--semantic-*\` custom properties the pre-Tailwind inline styles referenced — same tokens, same pixels, just Tailwind classes instead of a \`style\` object. Per ADR-015 this control keeps its own hover/focus tracking (per-segment \`string | null\` cardinality) rather than the shared \`useInteractionState\` single-element machine; only the class composition changed, not the state machine feeding it.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334","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":"NonNullable<\\"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":"NonNullable<\\"primary\\" | \\"secondary\\">","default":"primary","required":false,"description":"Visual treatment for the rail and active segment."}],"observedTokens":[{"raw":"hds.motion","sourceLine":17,"sourceSnippet":"// motion-ok: motion/react drives the secondary-variant press/hover spring (animate/transition below); CSS transitions reference hds.motion tokens via var(--hds-motion-productive-*)"},{"raw":"hds.zIndex.focus","tokenPath":"primitive.zIndex.10","sourceLine":241,"sourceSnippet":"// tier-ok: primitive.zIndex.10 (the discrete 0/10/100/1000 stacking scale, reached as hds.zIndex.focus) has no semantic alias — same primitive ref the pre-Tailwind inline style used"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":357,"sourceSnippet":"(isCompact ? hds.semantic.space.component.gap : hds.semantic.space.layout.gap);"},{"raw":"hds.semantic.space.layout.gap","tokenPath":"semantic.space.layout.gap","sourceLine":357,"sourceSnippet":"(isCompact ? hds.semantic.space.component.gap : hds.semantic.space.layout.gap);"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":366,"sourceSnippet":"style={{ paddingBottom: hds.semantic.space.subgrid.gap }}"}]},"SelectableCard":{"filePath":"src/app/components/selectable-card.tsx","description":"A card-shaped single checkbox — click or activate to toggle selection.","category":"Actions","hidden":false,"props":[{"name":"disabled","type":"boolean","required":false,"description":"Disable interaction."},{"name":"onSelectedChange","type":"(selected: boolean) => void","required":false,"description":"Called with the toggled selection state when the card is activated."},{"name":"selected","type":"boolean","default":"false","required":false,"description":"Whether this card is currently selected."}],"observedTokens":[]},"Sidebar":{"filePath":"src/app/components/sidebar.tsx","description":"Sidebar — fixed-width rail beside fluid content, no media query. problem with the flex-basis/flex-grow disparity technique — the rail holds \`sideWidth\` and the content flex-basis 0 with an overwhelming flex-grow, so the pair wraps to stacked automatically once the container can no longer fit both without squeezing content below \`contentMin\`. No CSS media query, no JS resize observer. EXACTLY two children — the rail and the content — passed in that order. \`side\` controls which one visually renders as the rail; DOM order is unchanged. gap MUST use a semantic space step, never raw px. sideWidth and contentMin are CSS length dimensions (not spacing) — a length string like '16rem' or '50%' is expected, matching the check-hardcoded-spacing gate's own dimension-prop exemption. Do NOT use Sidebar for more than two regions — use Grid. Every Layout reference: https://every-layout.dev/layouts/sidebar/","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, ReactNode]","required":true,"description":"Exactly two children: the rail first, the fluid content second (DOM order — \`side\` only changes visual order)."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"contentMin","type":"string","default":"50%","required":false,"description":"Minimum inline size the content is allowed to shrink to before the pair wraps to stacked (CSS length). Defaults to '50%'."},{"name":"gap","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"normal","required":false,"description":"Gap between the rail and the content, and between the two once stacked. Defaults to 'normal'."},{"name":"side","type":"'start' | 'end'","default":"start","required":false,"description":"Which visual edge the rail renders on. Defaults to 'start'."},{"name":"sideWidth","type":"string","default":"16rem","required":false,"description":"Fixed width of the rail (CSS length, e.g. '16rem'). Defaults to '16rem'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[]},"SideNav":{"filePath":"src/app/components/side-nav.tsx","description":"SideNav - sidebar navigation row primitive. Two levels: root — top-level section link. Full-width row using the shared nav label type style. nested — child page link. Keeps the same full-width hit area and label type treatment, with indentation handled via inner padding only. No indicator bar (reserved for HdsTocNav). Idle text = content-secondary → primary on hover/active. Accent surface fill on active state.","category":"Navigation","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332","props":[{"name":"active","type":"boolean","default":"false","required":false,"description":""},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"href","type":"string","required":false,"description":""},{"name":"indent","type":"number | boolean","default":"0","required":false,"description":"Nested depth offset applied via inner padding while keeping the row full width."},{"name":"label","type":"string","required":true,"description":""},{"name":"level","type":"'root' | 'nested'","default":"nested","required":false,"description":"Visual level — root matches group-header altitude, nested is an indented page link."},{"name":"onNavigate","type":"(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void","required":false,"description":""},{"name":"titleLabel","type":"boolean","default":"false","required":false,"description":""}],"observedTokens":[{"raw":"hds.motion.productive","sourceLine":19,"sourceSnippet":"// cva classes below; timing matches hds.motion.productive (150ms) via Tailwind's"},{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":117,"sourceSnippet":"isRtl ? hds.semantic.space.sidebar.gap : hds.semantic.space.sidebar.sectionGap,"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":117,"sourceSnippet":"isRtl ? hds.semantic.space.sidebar.gap : hds.semantic.space.sidebar.sectionGap,"},{"raw":"hds.semantic.space.sidebar.indent","tokenPath":"semantic.space.sidebar.indent","sourceLine":124,"sourceSnippet":": \`calc(\${hds.semantic.space.sidebar.sectionGap} + \${indent ? hds.semantic.space.sidebar.indent : '0px'})\`,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":182,"sourceSnippet":"const labelTypeStyle = titleLabel ? hds.typeStyles.eyebrow : hds.typeStyles.ui;"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":182,"sourceSnippet":"const labelTypeStyle = titleLabel ? hds.typeStyles.eyebrow : hds.typeStyles.ui;"}]},"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95","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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106","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;"}]},"StackedCardRail":{"filePath":"src/app/components/stacked-card-rail.tsx","description":"StackedCardRail — horizontally-scrolling stacked card carousel. Scroll mechanism: vertical scroll on an absolutely-positioned inner container is mapped to horizontal scroll on a sticky inner strip via a single scroll event listener. Cards use CSS scroll-driven animation (animation-timeline: view(x …)) for the stack/unstack effect where the browser supports it; a plain horizontal rail is the graceful fallback. Browser compat note: - animation-timeline: view() — Chrome 115+, Firefox 110+ (behind flag until v114), Safari 18+ (TP only as of 2025). The @supports guard ensures the stacking animation is only applied when the feature is available; all other browsers get a clean scrollable row. - :has() selector (neighbour shift on hover) — Chrome 105+, FF 121+, Safari 15.4+. Gated with @supports selector(:has(+ *)).","category":"Display","hidden":false,"props":[{"name":"cards","type":"StackedCardRailCard[]","required":true,"description":""}],"observedTokens":[{"raw":"hds.borderRadius[8]","tokenPath":"primitive.radius.8","sourceLine":128,"sourceSnippet":"border-radius: \${hds.borderRadius[8]};"},{"raw":"hds.typeStyles.eyebrow","sourceLine":318,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.heading3","tokenPath":"semantic.typography.h3","sourceLine":327,"sourceSnippet":"...hds.typeStyles.heading3,"}]},"Stat":{"filePath":"src/app/components/stat.tsx","description":"Headline metric — large value, uppercase caption label, optional sub-line.","category":"Display","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247","props":[{"name":"label","type":"string","required":true,"description":""},{"name":"sub","type":"ReactNode","required":false,"description":""},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","required":false,"description":""},{"name":"value","type":"ReactNode","required":true,"description":""}],"observedTokens":[]},"StatusDot":{"filePath":"src/app/components/status-dot.tsx","description":"A small solid dot conveying a semantic status via \`tone\`.","category":"Feedback","hidden":false,"props":[{"name":"label","type":"string","required":false,"description":"Accessible name for the status. When provided the dot is exposed as a \`role=\\"status\\"\` with this label; when omitted the dot is decorative (\`aria-hidden\`) and a sibling should carry the meaning."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\" | \\"inProgress\\"","required":false,"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350","props":[{"name":"notes","type":"ReactNode[]","required":false,"description":""},{"name":"title","type":"ReactNode","required":true,"description":""},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292","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":[]},"Stepper":{"filePath":"src/app/components/stepper.tsx","description":"Step indicator for multi-step flows. Purely presentational — no navigation.","category":"Navigation","hidden":false,"props":[{"name":"activeStep","type":"number","required":true,"description":"0-based index of the current step."},{"name":"orientation","type":"\\"horizontal\\" | \\"vertical\\"","default":"horizontal","required":false,"description":"Layout direction. Defaults to 'horizontal'."},{"name":"steps","type":"Step[]","required":true,"description":"Ordered steps from first to last."}],"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425","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":93,"sourceSnippet":"<label className=\\"text-secondary\\" style={{ ...hds.typeStyles.caption }}>"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":96,"sourceSnippet":"<div style={{ display: 'flex', alignItems: 'center', gap: hds.semantic.space.component.gap }}>"},{"raw":"hds.size[96]","tokenPath":"primitive.size.96","sourceLine":123,"sourceSnippet":"width: hds.size[96],"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":130,"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-27","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":[]},"Switcher":{"filePath":"src/app/components/switcher.tsx","description":"Switcher — flips a row to a column below a width threshold, no media query. vertical stack once the container gets narrow\\" without a breakpoint or a resize observer, using the flex-basis calc() technique: each item's flex-basis resolves to a huge negative or huge positive number depending on whether the container is above or below \`threshold\`, forcing every item onto its own line once it flips. semantic space step, never raw px. threshold is a CSS length dimension (not spacing), e.g. '30rem'. \`limit\` unconditionally forces the stacked (column) layout once there are more than \`limit\` children, regardless of container width — use it to stop a row from thinning out into an unreadable N-up strip. Do NOT use Switcher for content that should always wrap in place — use Cluster. Every Layout reference: https://every-layout.dev/layouts/the-switcher/","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":"Switcher content — peer items that flip between row and column as a unit."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"gap","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"normal","required":false,"description":"Gap between items in both the row and the stacked layout. Defaults to 'normal'."},{"name":"limit","type":"number","required":false,"description":"Maximum number of children before the layout is unconditionally forced to stacked, regardless of width."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."},{"name":"threshold","type":"string","default":"30rem","required":false,"description":"Container width below which items stack vertically (CSS length, e.g. '30rem'). Defaults to '30rem'."}],"observedTokens":[]},"Table":{"filePath":"src/app/components/table.tsx","description":"Table - structured data table primitive for documentation and compact UI matrices.","category":"Display","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300","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.X","sourceLine":106,"sourceSnippet":"// established \`style={hds.typeStyles.X}\` pattern used by already-converted"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":109,"sourceSnippet":"label: hds.typeStyles.ui,"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":110,"sourceSnippet":"value: hds.typeStyles.technical,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":112,"sourceSnippet":"...hds.typeStyles.caption,"}]},"Tabs":{"filePath":"src/app/components/tabs.tsx","description":"The tab set itself. Tagged here rather than in the file block because TabsList and TabsContent share this module and have no Figma node of their own — a file-level","category":"Navigation","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89","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) live in the pill's cva variants, painted through \`group-hover\`/\`group-active\` so the pill reacts to interaction on the shared outer button (converted off the former .hds-tag-btn/.hds-tag-pill theme.css rules for #60 — same behavior, now token-driven Tailwind classes). The \`active\` prop (aria-pressed selected state) is not one of the variant contract's four axes — it's expressed as the pill's \`selected\` cva variant, carrying the same rest → hover → pressed → focus-visible state matrix the contract expects, just keyed by selection instead of tone/size/density.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11","props":[{"name":"active","type":"boolean","default":"false","required":false,"description":"Whether the tag is active (selected)."},{"name":"children","type":"ReactNode","required":true,"description":"Tag content displayed inside the pill."}],"observedTokens":[]},"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\\" | \\"map\\" | \\"filter\\" | \\"title\\" | \\"a\\" | \\"button\\" | \\"div\\" | \\"form\\" | \\"h2\\" | \\"h3\\" | \\"img\\" | \\"input\\" | \\"label\\" | \\"li\\" | \\"nav\\" | \\"ol\\" | \\"p\\" | \\"select\\" | \\"span\\" | \\"svg\\" | ... 158 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","sourceLine":29,"sourceSnippet":"// (variantStyleMap → hds.typeStyles.*) read. No Tailwind-theme utility exists"}]},"Textarea":{"filePath":"src/app/components/textarea.tsx","description":"Textarea — multi-line text field primitive with label, helper, and error slots. Mirrors Input's shell + token skin as a native \`<textarea>\`. Figma parity: the four states Default / Focus / Error / Disabled map to the focus-ring, \`error\`, and \`disabled\` treatments below.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14","props":[{"name":"className","type":"string","required":false,"description":"Class hook for the outer wrapper."},{"name":"disabled","type":"boolean","required":false,"description":"Disable interaction."},{"name":"error","type":"boolean","required":false,"description":"Mark the field as invalid (sets aria-invalid + destructive border)."},{"name":"errorMessage","type":"string","required":false,"description":"Error message rendered below the textarea when \`error\` is true."},{"name":"helperText","type":"string","required":false,"description":"Supporting helper text rendered below when not in error."},{"name":"label","type":"string","required":false,"description":"Field label rendered above the textarea."},{"name":"resize","type":"TextareaResize","default":"vertical","required":false,"description":"User resize affordance. Defaults to vertical-only."},{"name":"textareaClassName","type":"string","required":false,"description":"Class hook for the textarea element itself."}],"observedTokens":[{"raw":"hds.duration","sourceLine":1,"sourceSnippet":"// motion-ok: textarea field — focus ring + transition via Tailwind utilities (gate accepts only hds.duration refs)"}]},"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":[]},"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":[]},"TimeInput":{"filePath":"src/app/components/time-input.tsx","description":"A native time field skinned with HDS input chrome. Value is a \`HH:mm\` string.","category":"Inputs","hidden":false,"props":[{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""}],"observedTokens":[]},"Timestamp":{"filePath":"src/app/components/timestamp.tsx","description":"Presents a date/time with a machine-readable \`dateTime\` for accessibility.","category":"Display","hidden":false,"props":[{"name":"date","type":"string | number | Date","required":true,"description":"The moment to render — a Date, epoch millis, or an ISO string."},{"name":"format","type":"'date' | 'time' | 'datetime' | 'relative'","default":"datetime","required":false,"description":"How to present it. Defaults to \`datetime\`."},{"name":"locale","type":"string","required":false,"description":"BCP-47 locale override; defaults to the runtime locale."},{"name":"now","type":"string | number | Date","required":false,"description":"Reference point for \`relative\` formatting. Defaults to the current time; pass an explicit value for deterministic rendering/tests."}],"observedTokens":[]},"ToastProvider":{"filePath":"src/app/components/toast.tsx","description":"Provider + viewport for the toast system. Wrap the app root once.","category":"Feedback","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367","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":[]},"ToggleButton":{"filePath":"src/app/components/toggle-button.tsx","description":"A single two-state toggle button exposing a native \`aria-pressed\` contract — use for one independent on/off control such as bold, mute, or pin.","category":"Actions","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"variant","type":"\\"secondary\\" | \\"ghost\\"","required":false,"description":""}],"observedTokens":[]},"Token":{"filePath":"src/app/components/token.tsx","description":"Token - reflective token specimen for unified node-based token views. The \`variant\` axis (node | diagram — diagram is a deprecated alias that resolves to the same node treatment) plus the \`selected\` / \`fullWidth\` / \`asButton\` / \`nowrap\` / \`sourceNode\` states used to be a Token.module.css \`[data-*]\` attribute stylesheet, with a duplicate \`isSelected\` branch re-painted inline on top of it. Both now live as one \`cva\` variant set — same \`--semantic-*\`/\`--component-*\`/\`--primitive-*\` custom properties, same pixels, no CSS module.","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":93,"sourceSnippet":"// tier-ok: primitive.typography.family.mono (Geist Mono stack) has no semantic alias — same primitive ref hds.typeStyles.technical used"}]},"Tokenizer":{"filePath":"src/app/components/tokenizer.tsx","description":"A bordered field of Tag chips followed by a text input for adding more.","category":"Inputs","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Class hook for the outer wrapper."},{"name":"disabled","type":"boolean","required":false,"description":"Disable the field and all token interactions."},{"name":"onChange","type":"(next: string[]) => void","required":true,"description":"Called with the next token list whenever tokens are added or removed."},{"name":"placeholder","type":"string","required":false,"description":"Placeholder shown in the trailing text field when empty."},{"name":"value","type":"string[]","required":true,"description":"Committed tokens rendered as chips."}],"observedTokens":[{"raw":"hds.duration","sourceLine":9,"sourceSnippet":"// motion-ok: interactive — focus-within ring via Tailwind transition-colors (gate accepts only hds.duration refs); mirrors input-group.tsx chrome"}]},"Toolbar":{"filePath":"src/app/components/toolbar.tsx","description":"Toolbar root. Groups related controls with a single roving tab-stop. Supports the native \`orientation\` prop (\`horizontal\` | \`vertical\`).","category":"Actions","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"TopNav":{"filePath":"src/app/components/top-nav.tsx","description":"Top navigation bar with brand, nav, and trailing action slots.","category":"Navigation","hidden":false,"props":[{"name":"brand","type":"ReactNode","required":false,"description":"Leading brand slot (e.g. logo/wordmark)."},{"name":"children","type":"ReactNode","required":false,"description":"Nav links, placed left after the brand and wrapped in a <nav>."},{"name":"sticky","type":"boolean","required":false,"description":"Pins the bar to the top of its scroll container."},{"name":"trailing","type":"ReactNode","required":false,"description":"Trailing actions, pushed to the far right."}],"observedTokens":[]},"TreeList":{"filePath":"src/app/components/tree-list.tsx","description":"Renders a hierarchical \`role=\\"tree\\"\` list; nodes with children get an expand/collapse toggle.","category":"Navigation","hidden":false,"props":[{"name":"defaultExpandedIds","type":"string[]","required":false,"description":"Node ids expanded on mount."},{"name":"items","type":"TreeNode[]","required":true,"description":"Root-level nodes to render."},{"name":"onSelect","type":"(id: string) => void","required":false,"description":"Called with a node's id when its label row is clicked."}],"observedTokens":[]},"VisuallyHidden":{"filePath":"src/app/components/visually-hidden.tsx","description":"Renders its children off-screen (Tailwind \`sr-only\`) so they are announced by screen readers without occupying visual space — e.g. a text label for an icon-only control.","category":"Utility","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"span","required":false,"description":"Element rendered as the wrapper. Defaults to 'span'."}],"observedTokens":[]},"HdsTooltip":{"filePath":"src/app/components/hds-tooltip.tsx","description":"Tooltip root. Bakes in the Radix Provider so a single \`<HdsTooltip>\` is self-contained — no app-level provider required. Controlled via \`open\`/\`onOpenChange\`, or uncontrolled with \`defaultOpen\`.","category":"Overlays","hidden":true,"props":[],"observedTokens":[{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":55,"sourceSnippet":"...hds.typeStyles.caption,"}]},"Menu":{"filePath":"src/app/components/menu.tsx","description":"Menu root + parts. Controlled via \`open\`/\`onOpenChange\`, or uncontrolled with \`defaultOpen\`.","category":"Overlays","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59","props":[],"observedTokens":[]},"Popover":{"filePath":"src/app/components/popover.tsx","description":"Popover root + parts. Controlled via \`open\`/\`onOpenChange\`, or uncontrolled with \`defaultOpen\`.","category":"Overlays","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32","props":[],"observedTokens":[]}}`), os = {
+const is = /* @__PURE__ */ JSON.parse(`{"ActivityFeed":{"filePath":"src/app/components/activity-feed.tsx","description":"ActivityFeed — chronological system event log. Renders a list of activity events using white space as the sole separator. No dividers, no borders between items. 48px gap (space.12) creates the visual grouping between events; 16px gap inside each item structures the content hierarchy. Typography mapping: title → heading3 (24px/1.25) description → body (16px/1.5) timestamp → technical (12px/1.0 mono) category → ui (14px/1.5)","category":"Display","hidden":false,"props":[{"name":"events","type":"ActivityEvent[]","default":"[ { id: 'evt-001', title: 'File Uploaded', description: 'firmware-v2.4.1.bin was uploaded to the staging environment by adrianm. File size 4.2 MB. Integrity check passed.', timestamp: '2026-04-22 · 08:14', category: 'Storage', icon: <Icon icon={UploadSimple} size=\\"medium\\" />, tone: 'neutral', }, { id: 'evt-002', title: 'Policy Updated', description: 'Access control policy \\"eng-prod-write\\" was modified. Three permission groups were added; two removed. Change authored by sys-admin.', timestamp: '2026-04-22 · 07:52', category: 'Security', icon: <Icon icon={ShieldCheck} size=\\"medium\\" />, tone: 'info', action: { label: 'View Details' }, }, { id: 'evt-003', title: 'Deployment Failed', description: 'Release candidate rc-1.9.0 failed to deploy to production. Build step \\"lint:tokens\\" exited with code 1. Rollback triggered automatically.', timestamp: '2026-04-22 · 06:30', category: 'CI/CD', icon: <Icon icon={XCircle} size=\\"medium\\" />, tone: 'danger', action: { label: 'View Details' }, }, { id: 'evt-004', title: 'Service Deployed', description: 'API gateway v3.1.2 successfully promoted to production. Zero-downtime rollout completed across all three availability zones.', timestamp: '2026-04-21 · 23:05', category: 'CI/CD', icon: <Icon icon={Rocket} size=\\"medium\\" />, tone: 'success', }, { id: 'evt-005', title: 'Access Revoked', description: 'SSH access for contractor account \\"contractor-j.reed\\" was revoked following project completion. Token invalidated and session terminated.', timestamp: '2026-04-21 · 18:41', category: 'Security', icon: <Icon icon={Lock} size=\\"medium\\" />, tone: 'warning', }, ]","required":false,"description":""}],"observedTokens":[]},"Alert":{"filePath":"src/app/components/alert.tsx","description":"Alert - compact feedback surface with contextual severity.","category":"Feedback","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34","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.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":97,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":106,"sourceSnippet":"...hds.typeStyles.caption,"}]},"AlertDialog":{"filePath":"src/app/components/alert-dialog.tsx","description":"AlertDialog root + parts. Controlled via \`open\`/\`onOpenChange\`, or uncontrolled with \`defaultOpen\`.","category":"Overlays","hidden":false,"props":[],"observedTokens":[]},"AspectRatio":{"filePath":"src/app/components/aspect-ratio.tsx","description":"Locks its single child to the given width-to-height \`ratio\` so media reserves its box up front and never causes layout shift while it loads.","category":"Layout","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""},{"name":"ratio","type":"number","default":"1","required":false,"description":"Desired width-to-height ratio, e.g. \`16 / 9\`. Defaults to \`1\` (square)."}],"observedTokens":[]},"AssetImg":{"filePath":"src/app/components/asset-img.tsx","description":"AssetImg - responsive asset frame with fallback placeholder handling. Contexts: default, lightbox, and detail.","category":"Display","hidden":false,"props":[{"name":"alt","type":"string","required":false,"description":"Accessible alt text."},{"name":"className","type":"string","required":false,"description":"Optional class hook for parent-level styling."},{"name":"context","type":"'default' | 'lightbox' | 'detail'","default":"default","required":false,"description":"Rendering mode for the placeholder and image frame."},{"name":"draggable","type":"boolean","default":"false","required":false,"description":"Whether the image can be dragged."},{"name":"expandable","type":"boolean","default":"true","required":false,"description":"Whether the expandable tooltip is shown when the image is clickable."},{"name":"expandLabel","type":"string","required":false,"description":"Override label for the expandable tooltip."},{"name":"isDark","type":"boolean","default":"false","required":false,"description":"Dark-mode hint used by certain asset treatments."},{"name":"loading","type":"\\"lazy\\" | \\"eager\\"","default":"lazy","required":false,"description":"Image loading attribute: 'lazy' (default) for off-screen, 'eager' for above-the-fold."},{"name":"naturalHeight","type":"number","required":false,"description":"Natural asset height used to preserve aspect ratio in placeholders."},{"name":"naturalWidth","type":"number","required":false,"description":"Natural asset width used to preserve aspect ratio in placeholders."},{"name":"onClick","type":"(e: MouseEvent<Element, MouseEvent>) => void","required":false,"description":"Click handler for interactive assets."},{"name":"onMouseDown","type":"(e: MouseEvent<Element, MouseEvent>) => void","required":false,"description":"Pointer-down handler for interactive assets."},{"name":"onMouseLeave","type":"(e: MouseEvent<Element, MouseEvent>) => void","required":false,"description":"Pointer-leave handler for interactive assets."},{"name":"onMouseMove","type":"(e: MouseEvent<Element, MouseEvent>) => void","required":false,"description":"Pointer-move handler for interactive assets."},{"name":"onMouseUp","type":"(e: MouseEvent<Element, MouseEvent>) => void","required":false,"description":"Pointer-up handler for interactive assets."},{"name":"src","type":"string","required":true,"description":"Image source path."},{"name":"style","type":"CSSProperties","default":"{}","required":false,"description":"Optional inline styles for layout adjustments."},{"name":"title","type":"string","required":false,"description":"Optional title attribute."}],"observedTokens":[{"raw":"hds.space.px4","tokenPath":"primitive.space.1","sourceLine":246,"sourceSnippet":"gap: hds.space.px4,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":265,"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18","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":[]},"AvatarGroup":{"filePath":"src/app/components/avatar-group.tsx","description":"Renders up to \`max\` overlapping avatars followed by a \`+N\` overflow chip.","category":"Display","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"Avatar elements to cluster. Extra items beyond \`max\` collapse into +N."},{"name":"max","type":"number","required":false,"description":"Maximum avatars shown before collapsing into an overflow chip."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""}],"observedTokens":[]},"Badge":{"filePath":"src/app/components/badge.tsx","description":"Compact metadata/status chip. Tone is the only styling input.","category":"Feedback","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15","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":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\" | \\"inProgress\\"","required":false,"description":""}],"observedTokens":[]},"Bleed":{"filePath":"src/app/components/bleed.tsx","description":"Bleed — controlled negative-margin full-bleed within a padded container. padding\\" (a full-width image inside a padded card, a divider that should touch both edges) with a single tokenized negative-margin wrapper, so agents stop hand-rolling \`margin: -24px\` guesses that drift from the parent's actual padding token. use a semantic space step, never raw px, and MUST match the ancestor padding it is meant to cancel out. Do NOT use Bleed to fake extra spacing — its only job is canceling a specific known padding value on a specific axis. Every Layout reference: https://every-layout.dev/layouts/the-stack/ (bleed is the inverse of a padded Center/Container — HDS names it separately since \\"every-layout\\" itself does not ship a dedicated Bleed recipe).","category":"Layout","hidden":false,"props":[{"name":"amount","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"normal","required":false,"description":"Semantic space step to negate. Defaults to 'normal'."},{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the outer wrapper. Defaults to 'div'."},{"name":"axis","type":"'x' | 'y' | 'both'","default":"x","required":false,"description":"Which axis the negative margin applies to. Defaults to 'x'."},{"name":"children","type":"ReactNode","required":true,"description":"Bleed content."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[]},"Blockquote":{"filePath":"src/app/components/blockquote.tsx","description":"A quoted passage; pass \`cite\` for the source URL and \`attribution\` for a byline.","category":"Typography","hidden":false,"props":[{"name":"attribution","type":"ReactNode","required":false,"description":"Optional attribution rendered beneath the quote (e.g. the author)."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""}],"observedTokens":[]},"Box":{"filePath":"src/app/components/box.tsx","description":"Box — polymorphic layout primitive with a token-first \`sx\` engine. named primitive covers, without inviting ad hoc inline styles or raw hex/px values back into the system — the \`sx\` engine only accepts HDS token keys and a small, deliberate CSS subset. Box \`sx\` ONLY for genuinely one-off layout. sx colors/spacing MUST use token keys, not raw hex/px. Prefer named layout primitives over ad-hoc flex. \`sx\` is a deliberate SUBSET of MUI's sx — not all of CSS-in-JS is a feature: - Spacing shorthands (m/p/gap family) resolve numbers off the 4px HDS scale (\`--primitive-space-<n>\`) and named steps ('tight'|'normal'|'inset'|'spacious') off \`--semantic-space-layout-*\`. - \`color\`/\`bgcolor\`/\`borderColor\`/\`fill\`/\`stroke\` resolve dotted token keys ('content.primary', 'surface.raised', 'border.subtle', 'accent', 'accent.hover', 'feedback.success', …) to the matching semantic CSS var. - Responsive \`{ xs, sm, md, lg, xl }\` objects compile to \`min-width\` media queries off the HDS breakpoint scale. - \`&\`-prefixed keys ('&:hover', '& > *', '&[data-state=open]') nest a selector, composable with responsive values. - Everything else passes through as a plain camelCase→kebab-case CSS declaration (numbers get \`px\` unless in the unitless allowlist). See \`box-sx.ts\` for the pure resolver + hashing/injection engine.","category":"Layout","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element (or component) rendered as the outer wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":false,"description":"Box content."},{"name":"sx","type":"SxObject","required":false,"description":"Token-first \`sx\` layout engine — see the file-level docstring for the supported subset."}],"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159","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":72,"sourceSnippet":"style={hds.typeStyles.ui}"}]},"Button":{"filePath":"src/app/components/button.tsx","description":"Triggers an action when activated.","category":"Actions","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138","props":[{"name":"asChild","type":"boolean","default":"false","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":"iconLeft","type":"ReactNode","required":false,"description":"Leading icon rendered before the label."},{"name":"iconOnly","type":"boolean","default":"false","required":false,"description":"Render the button as a square icon-only control. Requires aria-label."},{"name":"iconRight","type":"ReactNode","required":false,"description":"Trailing icon rendered after the label."},{"name":"label","type":"string","required":false,"description":"Optional accessible label used when children are not suitable as the name."},{"name":"loading","type":"boolean","default":"false","required":false,"description":"Show a busy indicator and disable interaction."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","required":false,"description":""},{"name":"variant","type":"\\"primary\\" | \\"secondary\\" | \\"tertiary\\"","required":false,"description":""}],"observedTokens":[{"raw":"hds.duration","sourceLine":1,"sourceSnippet":"// motion-ok: motion delivered via Tailwind transition-[colors,filter] + active:brightness; gate accepts only hds.duration refs"}]},"ButtonGroup":{"filePath":"src/app/components/button-group.tsx","description":"Groups Button (or button-like) children into a single attached segment.","category":"Actions","hidden":false,"props":[{"name":"orientation","type":"\\"horizontal\\" | \\"vertical\\"","required":false,"description":""}],"observedTokens":[]},"Calendar":{"filePath":"src/app/components/calendar.tsx","description":"Renders an accessible month grid; compose it inside a Popover for the date inputs.","category":"Inputs","hidden":false,"props":[],"observedTokens":[]},"Callout":{"filePath":"src/app/components/callout.tsx","description":"Tone-driven side-rule callout for status, quotes, hypotheses.","category":"Feedback","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85","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":"Tagged per-export, not on the file block: this module exports eight components and a file-level","category":"Display","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11","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 variant. 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":"'neutral' | 'danger' | 'success' | 'warning' | 'info'","default":"neutral","required":false,"description":"Feedback tone — border IS the signal for status-driven cards. Defaults to \`neutral\` (no feedback border; falls back to \`variant\`/\`bordered\`)."},{"name":"variant","type":"'default' | 'accent'","default":"default","required":false,"description":"Structural treatment — \`default\` (borderless) or \`accent\` (2px accent border) for highlighted entries (e.g. recommended package). For a neutral-bordered card without semantic meaning, pass \`bordered\` instead of \`accent\`."}],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardBody":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":[],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardDescription":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":[],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardFooter":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":[],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardHeader":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":"metadata","type":"ReactNode","required":false,"description":"Top-of-card metadata zone — status badges, tags, eyebrow labels. Accepts <Badge>, <Tag>, or compound nodes. NEVER pass raw spans with status colors here; use the proper primitive so tone, padding, and accessibility role are consistent. Rendered ABOVE the title (Material/Polaris/Carbon convention) — no two-column flex, no crowding next to long titles, mobile-friendly."}],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardMetric":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":"label","type":"ReactNode","required":true,"description":"Uppercase eyebrow label (e.g. \\"Retainer\\", \\"Open tasks\\")."},{"name":"sub","type":"ReactNode","required":false,"description":"Optional sub-line beneath the value (e.g. \\"Active\\", \\"this week\\")."},{"name":"tone","type":"'neutral' | 'danger' | 'success' | 'warning' | 'info'","default":"neutral","required":false,"description":"Tone for the value — applies semantic color. Defaults to neutral."},{"name":"value","type":"ReactNode","required":true,"description":"Big value (e.g. \\"$3,500\\", \\"12\\", \\"67%\\"). Rendered at h2 weight."}],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardProgress":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":"label","type":"ReactNode","required":false,"description":"Optional caption rendered beneath the bar. Reserved baseline so it never crowds the slot above. Accepts strings or react nodes."},{"name":"max","type":"number","default":"100","required":false,"description":"Maximum value. Defaults to 100."},{"name":"tone","type":"'neutral' | 'danger' | 'success' | 'warning' | 'info'","default":"neutral","required":false,"description":"Visual tone for the fill. Defaults to \`neutral\` (accent-blue fill). Use feedback tones to signal status without a separate badge (e.g. red bar for over-budget)."},{"name":"value","type":"number","required":true,"description":"Current value (0..max)."}],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"CardTitle":{"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 variant=\\"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. \`variant\`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". \`tone\`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. \`variant\`/\`tone\` together replace 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":[],"observedTokens":[{"raw":"hds.space","sourceLine":56,"sourceSnippet":"type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.space;"},{"raw":"hds.borderRadius[2]","tokenPath":"primitive.radius.2","sourceLine":340,"sourceSnippet":"borderRadius: hds.borderRadius[2],"},{"raw":"hds.motion.expressive.duration","tokenPath":"primitive.duration.medium","sourceLine":355,"sourceSnippet":"transition: \`transform \${hds.motion.expressive.duration}s ease-out\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":363,"sourceSnippet":"...hds.typeStyles.caption,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":407,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.h2","tokenPath":"semantic.typography.h2","sourceLine":417,"sourceSnippet":"...hds.typeStyles.h2,"}]},"Carousel":{"filePath":"src/app/components/carousel.tsx","description":"Renders children as a snap-scrolling track with Prev/Next scroll buttons.","category":"Display","hidden":false,"props":[{"name":"ariaLabel","type":"string","default":"Carousel","required":false,"description":"Accessible name for the carousel region. Defaults to 'Carousel'."},{"name":"children","type":"ReactNode","required":true,"description":"Slides rendered inside the scroll-snap track."},{"name":"showControls","type":"boolean","default":"true","required":false,"description":"Show the Prev/Next scroll affordance buttons. Defaults to true."}],"observedTokens":[]},"Center":{"filePath":"src/app/components/center.tsx","description":"Center — max-width column, auto-centered horizontally. max-width box with auto horizontal margins and, optionally, matching horizontal gutters — so agents stop hand-rolling \`marginInline: auto\` plus an ad hoc max-width value. use the semantic width scale ('content' | 'max'), never a raw px value. gutter, when set, MUST use a semantic space step, never raw px. Do NOT use Center for full-bleed page shells — use Container. Do NOT use Center when you need the deprecated Container padding prop — gutter replaces it. Every Layout reference: https://every-layout.dev/layouts/center/","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":"Center content."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"gutter","type":"'tight' | 'normal' | 'inset' | 'spacious'","required":false,"description":"Optional matching horizontal gutter (padding-inline) from the semantic space scale."},{"name":"maxWidth","type":"'content' | 'max'","default":"content","required":false,"description":"Max width: 'content' (760px prose) | 'max' (1200px full layouts). Defaults to 'content'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[]},"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":29,"sourceSnippet":"...hds.typeStyles.ui,"}]},"CircularProgress":{"filePath":"src/app/components/circular-progress.tsx","description":"A circular progress ring; pass \`value\`/\`max\` or set \`indeterminate\`.","category":"Feedback","hidden":false,"props":[{"name":"indeterminate","type":"boolean","default":"false","required":false,"description":"Show a continuous spinner instead of a measured arc."},{"name":"label","type":"string","required":false,"description":"Accessible name for the progress indicator."},{"name":"max","type":"number","default":"100","required":false,"description":"Upper bound for \`value\`. Defaults to 100."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","default":"md","required":false,"description":"Ring diameter preset. Defaults to \`md\`."},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","required":false,"description":""},{"name":"value","type":"number","default":"0","required":false,"description":"Current value. Ignored (and the ring animates) when \`indeterminate\`."}],"observedTokens":[{"raw":"hds.duration","sourceLine":6,"sourceSnippet":"// motion-ok: indeterminate spin via Tailwind animate-spin (gate accepts only hds.duration refs; the SVG sweep has no token duration equivalent)"}]},"Cluster":{"filePath":"src/app/components/cluster.tsx","description":"Cluster — wrapping horizontal group with even gaps. (tag rows, button groups, chip lists, filter pills) with a single flex-wrap wrapper and a tokenized gap in both axes, so agents stop hand-rolling \`flexWrap\` + \`gap\` + alignment combinations inline. horizontal groups that should wrap as a unit. Spacing MUST use semantic steps, never raw px. Do NOT use Cluster for a strict single-line row — use Stack with \`direction=\\"row\\"\` when wrapping is never desired. Do NOT use Cluster for two-dimensional grid layouts — use Grid. Every Layout reference: https://every-layout.dev/layouts/cluster/","category":"Layout","hidden":false,"props":[{"name":"align","type":"'start' | 'center' | 'end' | 'stretch'","default":"center","required":false,"description":"Cross-axis alignment of items within a wrapped row. Defaults to 'center'."},{"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":"Cluster content — items that wrap as a unit."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"gap","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"tight","required":false,"description":"Gap token applied to both axes (row and column). Defaults to 'tight'."},{"name":"justify","type":"'start' | 'center' | 'end' | 'space-between'","default":"start","required":false,"description":"Main-axis distribution. Defaults to 'start'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[]},"CodeBlock":{"filePath":"src/app/components/code-block.tsx","description":"CodeBlock - code display with copy button and optional collapsible toggle.","category":"Display","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154","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.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":21,"sourceSnippet":"// semantic.typography.mono composite (formerly hds.typeStyles.technical) — var()-based, no matching Tailwind-theme utility."}]},"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237","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":[]},"CommandPalette":{"filePath":"src/app/components/command-palette.tsx","description":"Mountable trigger + dialog. Drop into header slot; component manages its own open state and Cmd-K / Ctrl-K global keybinding.","category":"Overlays","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Optional className for the trigger button."}],"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. semantic max-width scale, so agents stop hand-rolling \`marginInline: auto\` plus an ad hoc max-width pixel value for page shells. use the semantic width scale ('content' | 'max'), never a raw px value. Do NOT use the deprecated \`padding\` prop — it is a no-op; apply padding via Surface or a Stack instead. Do NOT import Container directly inside a page under src/app/pages — use Page, which wraps Container and owns vertical rhythm. Use Center instead when you also need a horizontal gutter, which Container does not support. 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":[]},"ContextMenu":{"filePath":"src/app/components/context-menu.tsx","description":"ContextMenu root + parts. Wrap the right-clickable area in \`ContextMenu.Trigger\`. Controlled via \`onOpenChange\`.","category":"Overlays","hidden":false,"props":[],"observedTokens":[]},"Cover":{"filePath":"src/app/components/cover.tsx","description":"Cover — vertical shell with an auto-centered main region. centered hero/main region that absorbs the remaining space, and an optional footer\\" problem via the flex auto-margin centering technique, so agents stop hand-rolling \`position: absolute\` centering or a fixed 50vh split. semantic space step, never raw px. minHeight is a CSS length dimension (not spacing) — defaults to '100svh' (small viewport height, safe against mobile browser chrome). Pass minHeight=\\"100vh\\" explicitly if you need the classic viewport unit for a target that predates svh support. Do NOT use Cover for ordinary page content flow — use Stack. Every Layout reference: https://every-layout.dev/layouts/cover/","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":"centerSlot","type":"ReactNode","required":false,"description":"Alias for \`children\` — the centered main region. If both are set, \`centerSlot\` wins."},{"name":"children","type":"ReactNode","required":false,"description":"The centered main region — takes the remaining space via auto margins. Also available as \`centerSlot\`."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"footer","type":"ReactNode","required":false,"description":"Optional content pinned to the bottom."},{"name":"gap","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"normal","required":false,"description":"Gap enforced between header/main/footer, in addition to the auto-margin centering. Defaults to 'normal'."},{"name":"header","type":"ReactNode","required":false,"description":"Optional content pinned to the top."},{"name":"minHeight","type":"string","default":"100svh","required":false,"description":"Minimum block size of the cover (CSS length). Defaults to '100svh'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[]},"DateInput":{"filePath":"src/app/components/date-input.tsx","description":"Text field + calendar popover for picking a single date.","category":"Inputs","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":""},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"displayFormat","type":"string","default":"yyyy-MM-dd","required":false,"description":"date-fns format string used to display and parse the text value."},{"name":"id","type":"string","required":false,"description":""},{"name":"onChange","type":"(date: Date) => void","required":false,"description":"Fired with the next date, or undefined when the field is cleared/invalid."},{"name":"placeholder","type":"string","required":false,"description":"Placeholder shown when the field is empty; defaults to the display format."},{"name":"value","type":"Date","required":false,"description":"Currently selected date, or undefined when empty."}],"observedTokens":[]},"DateRangeInput":{"filePath":"src/app/components/date-range-input.tsx","description":"DateRangeInput — date-range field composing the existing Popover with Calendar in range mode, so picking a start/end date reads as one overlay pattern with Combobox and Menu rather than a bespoke widget. No new primitive — built entirely on the HDS Popover + Calendar. The trigger reads like a secondary input, showing a placeholder or the formatted \`from – to\` range; the content is a two-month range calendar. <DateRangeInput value={range} onChange={setRange} />","category":"Inputs","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":""},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"displayFormat","type":"string","default":"yyyy-MM-dd","required":false,"description":"date-fns format string used to render the selected range on the trigger."},{"name":"id","type":"string","required":false,"description":""},{"name":"numberOfMonths","type":"number","default":"2","required":false,"description":"Number of months rendered side by side in the calendar."},{"name":"onChange","type":"(range: DateRange) => void","required":false,"description":"Fired with the next range whenever the calendar selection changes."},{"name":"placeholder","type":"string","default":"Select date range","required":false,"description":"Trigger text when nothing is selected."},{"name":"value","type":"DateRange","required":false,"description":"Currently selected range."}],"observedTokens":[]},"DateTimeInput":{"filePath":"src/app/components/date-time-input.tsx","description":"Text date field + calendar popover, paired with a native time field, producing one Date.","category":"Inputs","hidden":false,"props":[{"name":"aria-label","type":"string","required":false,"description":""},{"name":"dateFormat","type":"string","default":"yyyy-MM-dd","required":false,"description":"date-fns format string used to display and parse the date portion."},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"id","type":"string","required":false,"description":""},{"name":"onChange","type":"(date: Date) => void","required":false,"description":"Fired with the next combined date/time, or undefined when cleared."},{"name":"value","type":"Date","required":false,"description":"Currently selected date + time, or undefined when empty."}],"observedTokens":[]},"Dialog":{"filePath":"src/app/components/dialog.tsx","description":"Tagged per-export, not on the file block: this module exports ten components and a file-level","category":"Overlays","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27","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":[]},"DialogClose":{"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":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"DialogContent":{"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":"asChild","type":"boolean","required":false,"description":""},{"name":"hideClose","type":"boolean","default":"false","required":false,"description":"Hide the built-in close affordance. Useful for fully custom layouts."}],"observedTokens":[]},"DialogDescription":{"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":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"DialogFooter":{"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":[],"observedTokens":[]},"DialogHeader":{"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":[],"observedTokens":[]},"DialogOverlay":{"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":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"DialogPortal":{"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":[],"observedTokens":[]},"DialogTitle":{"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":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"DialogTrigger":{"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":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"Disclosure":{"filePath":"src/app/components/disclosure.tsx","description":"Disclosure - compact disclosure surface for optional explanatory content.","category":"Layout","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453","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":45,"sourceSnippet":"panel: hds.semantic.space.sidebar.gap,"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":46,"sourceSnippet":"nav: hds.semantic.space.sidebar.sectionGap,"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":47,"sourceSnippet":"card: hds.semantic.space.component.gap,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":127,"sourceSnippet":"style={variant === 'nav' ? hds.typeStyles.ui : hds.typeStyles.caption}"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":127,"sourceSnippet":"style={variant === 'nav' ? hds.typeStyles.ui : hds.typeStyles.caption}"}]},"Divider":{"filePath":"src/app/components/divider.tsx","description":"Divider — semantic separator between content regions.","category":"Layout","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26","props":[{"name":"orientation","type":"\\"horizontal\\" | \\"vertical\\"","default":"horizontal","required":false,"description":""},{"name":"spacing","type":"string | number","required":false,"description":"Perpendicular spacing around the divider."},{"name":"strong","type":"boolean","required":false,"description":"@deprecated Use \`variant=\\"strong\\"\` instead. Kept for backward compatibility; when set, it takes precedence over \`variant\`. @removeIn 1.0.0 — a boolean superseded by a variant axis. Removing it is breaking, so it waits for the major."},{"name":"variant","type":"\\"strong\\" | \\"default\\"","required":false,"description":""}],"observedTokens":[]},"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":17,"sourceSnippet":"const bodyTextStyle = hds.typeStyles.ui;"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":88,"sourceSnippet":"const metaTextStyle = metaStyle === 'ui' ? hds.typeStyles.ui : hds.typeStyles.caption;"},{"raw":"hds.typeStyles.heading3","tokenPath":"semantic.typography.h3","sourceLine":164,"sourceSnippet":"style={hds.typeStyles.heading3}"}]},"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352","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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81","props":[{"name":"label","type":"string","required":true,"description":""},{"name":"mono","type":"boolean","required":false,"description":""},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","required":false,"description":""},{"name":"value","type":"ReactNode","required":false,"description":""}],"observedTokens":[]},"FileInput":{"filePath":"src/app/components/file-input.tsx","description":"A dashed dropzone that opens the native file picker or accepts a drag-and-drop.","category":"Inputs","hidden":false,"props":[{"name":"accept","type":"string","required":false,"description":"Native \`accept\` attribute, e.g. \`\\"image/*\\"\`."},{"name":"disabled","type":"boolean","required":false,"description":"Disable interaction."},{"name":"label","type":"ReactNode","default":"Click to upload or drag and drop","required":false,"description":"Dropzone prompt content."},{"name":"multiple","type":"boolean","required":false,"description":"Allow selecting more than one file."},{"name":"onFiles","type":"(files: File[]) => void","required":false,"description":"Called with the selected (or dropped) files."}],"observedTokens":[{"raw":"hds.duration","sourceLine":8,"sourceSnippet":"// motion-ok: dropzone border/background feedback via Tailwind transition-colors (gate accepts only hds.duration refs)"}]},"Form":{"filePath":"src/app/components/form.tsx","description":"Styled \`<form>\` with consistent vertical field rhythm. Tagged per-export: FormField and FormFieldShell share this module and have no Figma node, so a file-level","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94","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"}]},"Frame":{"filePath":"src/app/components/frame.tsx","description":"Frame — aspect-ratio-locked, token-clipped media box. cause layout shift while it loads, cropped to a token-governed corner radius\\" — a thin, token-skinned wrapper over \`AspectRatio\` (\`@radix-ui/react-aspect-ratio\`), which already owns the ratio-lock mechanics. Frame adds the overflow-hidden clip and semantic radius that a bare media frame needs and \`AspectRatio\` deliberately leaves undecorated. media (image, video, embed, map tile). radius MUST use a semantic borderRadius token, never a raw px value. Do NOT reach for bare \`AspectRatio\` in product code just to add a border-radius by hand — use Frame. Do NOT use Frame for non-media layout — it exists purely as a media clipping frame. Every Layout reference: https://every-layout.dev/layouts/frame/","category":"Layout","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the outer clipping wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":true,"description":"Media rendered inside the locked-ratio, clipped frame."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"radius","type":"'none' | 'sm' | 'md' | 'full'","default":"md","required":false,"description":"Corner radius token applied to the clipped frame. Defaults to 'md'."},{"name":"ratio","type":"number","default":"16 / 9","required":false,"description":"Desired width-to-height ratio, e.g. \`16 / 9\`. Defaults to \`16 / 9\`."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[{"raw":"hds.borderRadius[0]","tokenPath":"primitive.radius.0","sourceLine":28,"sourceSnippet":"none: hds.borderRadius[0],"},{"raw":"hds.borderRadius.sm","tokenPath":"primitive.radius.4","sourceLine":29,"sourceSnippet":"sm: hds.borderRadius.sm,"},{"raw":"hds.borderRadius.md","tokenPath":"primitive.radius.8","sourceLine":30,"sourceSnippet":"md: hds.borderRadius.md,"},{"raw":"hds.borderRadius.full","tokenPath":"primitive.radius.full","sourceLine":31,"sourceSnippet":"full: hds.borderRadius.full,"}]},"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":95,"sourceSnippet":"if (width <= hds.breakpoints.sm) {"},{"raw":"hds.breakpoints.lg","sourceLine":99,"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29","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.space.px1","tokenPath":"primitive.space.px1","sourceLine":212,"sourceSnippet":"animate={{ x: isPressed ? hds.space.px1 : 0 }}"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":218,"sourceSnippet":"...hds.typeStyles.ui,"}]},"HdsRadio":{"filePath":"src/app/components/radio.tsx","description":"HdsRadio — radio button with animated selection indicator.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17","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.space.px1","tokenPath":"primitive.space.px1","sourceLine":209,"sourceSnippet":"x: isPressed ? hds.space.px1 : 0,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":216,"sourceSnippet":"...hds.typeStyles.ui,"}]},"HdsSelect":{"filePath":"src/app/components/select.tsx","description":"HdsSelect — dropdown selector built on Radix Select.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49","props":[{"name":"label","type":"string","required":true,"description":"Select label rendered above the control."},{"name":"onChange","type":"(v: string) => void","required":true,"description":"Called when the user picks a different option."},{"name":"options","type":"{ value: string; label: string; }[]","required":true,"description":"Select options displayed in the dropdown."},{"name":"showLabel","type":"boolean","default":"true","required":false,"description":"Controls whether the label is rendered."},{"name":"value","type":"string","required":true,"description":"Currently selected value."}],"observedTokens":[{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":48,"sourceSnippet":"style={{ ...hds.typeStyles.caption, marginBottom: hds.semantic.space.component.gap }}"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":48,"sourceSnippet":"style={{ ...hds.typeStyles.caption, marginBottom: hds.semantic.space.component.gap }}"}]},"HdsSlider":{"filePath":"src/app/components/slider.tsx","description":"HdsSlider — range slider with label and value display.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265","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.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":48,"sourceSnippet":"...hds.typeStyles.ui,"},{"raw":"hds.space.px2","tokenPath":"primitive.space.px2","sourceLine":57,"sourceSnippet":"initial={{ opacity: 0.72, y: hds.space.px2 }}"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":63,"sourceSnippet":"style={{ ...hds.typeStyles.technical }}"}]},"HdsThemeProvider":{"filePath":"src/app/context/hds-theme.tsx","description":"Renders a \`data-hds\` scope wrapper that carries the four theming dials as root attributes + CSS vars, and exposes them to \`useHdsTheme()\`.","category":"Theming","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Wrapper element type for the \`data-hds\` scope. Default \`\\"div\\"\`."},{"name":"brand","type":"string","required":false,"description":"Brand-overlay slug (compiled \`[data-brand]\`/\`[data-tenant]\` block). Omit for the base brand."},{"name":"className","type":"string","required":false,"description":""},{"name":"density","type":"'comfortable' | 'compact'","required":false,"description":"Spacing density. \`\\"compact\\"\` activates the compact overrides; omit for comfortable."},{"name":"fontFamily","type":"string","required":false,"description":"Body font-family override (\`--hds-font-family\`)."},{"name":"fontFamilyMono","type":"string","required":false,"description":"Monospace font-family override (\`--hds-font-family-mono\`)."},{"name":"style","type":"CSSProperties","required":false,"description":""},{"name":"theme","type":"'light' | 'dark'","required":false,"description":"Colour theme. \`\\"dark\\"\` activates the dark token overrides; omit for light."}],"observedTokens":[]},"HdsToggle":{"filePath":"src/app/components/toggle.tsx","description":"HdsToggle — boolean on/off toggle with animated thumb.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19","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.space.px1","tokenPath":"primitive.space.px1","sourceLine":186,"sourceSnippet":"y: isPressed ? hds.space.px1 : 0,"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":244,"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":"HdsHeadingGap","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":"HdsHeadingLevel","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":[]},"HoverCard":{"filePath":"src/app/components/hover-card.tsx","description":"HoverCard root + parts. Controlled via \`open\`/\`onOpenChange\`, or uncontrolled with \`defaultOpen\`; tune timing with \`openDelay\`/\`closeDelay\`.","category":"Overlays","hidden":false,"props":[],"observedTokens":[]},"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\\" | \\"light\\" | \\"thin\\" | \\"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":12,"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39","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":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155","props":[{"name":"compact","type":"boolean","required":false,"description":"@deprecated Use \`density=\\"compact\\"\` instead. Kept for backward compatibility; when set, it takes precedence over \`density\`. @removeIn 1.0.0 — a boolean superseded by a variant axis, breaking to remove, so it waits for the major."},{"name":"copyable","type":"boolean","default":"false","required":false,"description":"Show a copy-to-clipboard button. children must be a string when true."},{"name":"density","type":"\\"comfortable\\" | \\"compact\\"","required":false,"description":"Layout density. \`compact\` tightens vertical rhythm for dense body copy and table prose. Defaults to \`comfortable\`."},{"name":"style","type":"CSSProperties","required":false,"description":""}],"observedTokens":[{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":103,"sourceSnippet":"gap: 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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161","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":60,"sourceSnippet":"marginLeft: hds.semantic.space.subgrid.xs,"},{"raw":"hds.semantic.space.subgrid.hairline","tokenPath":"semantic.space.subgrid.hairline","sourceLine":61,"sourceSnippet":"marginBottom: hds.semantic.space.subgrid.hairline,"}]},"Input":{"filePath":"src/app/components/input.tsx","description":"Input — text field primitive with label, helper, and error slots.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20","props":[{"name":"className","type":"string","required":false,"description":"Class hook for the outer wrapper."},{"name":"disabled","type":"boolean","required":false,"description":"Disable interaction."},{"name":"error","type":"boolean","required":false,"description":"Mark the field as invalid (sets aria-invalid + destructive border)."},{"name":"errorMessage","type":"string","required":false,"description":"Error message rendered below the input when \`error\` is true."},{"name":"helperText","type":"string","required":false,"description":"Supporting helper text rendered below the input when not in error."},{"name":"inputClassName","type":"string","required":false,"description":"Class hook for the input element itself."},{"name":"label","type":"string","required":false,"description":"Field label rendered above the input."},{"name":"leadingVisual","type":"ReactNode","required":false,"description":"Optional leading visual rendered inside the input shell."},{"name":"loading","type":"boolean","default":"false","required":false,"description":"Show busy indicator and disable interaction."},{"name":"size","type":"InputSize","default":"md","required":false,"description":"Field height tier."},{"name":"textStyle","type":"\\"body\\" | \\"mono\\"","default":"body","required":false,"description":"Body (sans) or mono text style for the value."},{"name":"trailingVisual","type":"ReactNode","required":false,"description":"Optional trailing visual rendered inside the input shell."},{"name":"type","type":"'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number'","default":"text","required":false,"description":"Native input type."}],"observedTokens":[{"raw":"hds.duration","sourceLine":1,"sourceSnippet":"// motion-ok: input field — focus ring + transition via Tailwind utilities (gate accepts only hds.duration refs)"}]},"InputGroup":{"filePath":"src/app/components/input-group.tsx","description":"A single-line input with optional \`leading\`/\`trailing\` adornments.","category":"Inputs","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Class applied to the wrapper (the input itself stays transparent)."},{"name":"leading","type":"ReactNode","required":false,"description":"Content rendered before the input, e.g. an icon or a static prefix."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"trailing","type":"ReactNode","required":false,"description":"Content rendered after the input, e.g. a unit or a clear button."}],"observedTokens":[{"raw":"hds.duration","sourceLine":6,"sourceSnippet":"// motion-ok: focus ring + color feedback via Tailwind transition-colors (gate accepts only hds.duration refs); mirrors input.tsx"}]},"Kbd":{"filePath":"src/app/components/kbd.tsx","description":"Renders a keyboard key or shortcut token, e.g. \`<Kbd>⌘K</Kbd>\`.","category":"Display","hidden":false,"props":[{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""}],"observedTokens":[]},"Lightbox":{"filePath":"src/app/components/image-lightbox.tsx","description":"Lightbox — full-bleed image viewer built on Radix Dialog. Full-bleed image viewer built on Radix Dialog (raw primitives, not the card \`Dialog\` wrapper — a lightbox is a transparent full-screen surface, not a centered card). Radix owns the modal a11y contract the hand-rolled version was missing: focus trap, focus restore on close, Escape, and scroll-lock. Motion is retained via \`forceMount\` + AnimatePresence + \`asChild\`: the backdrop fades and the image panel scales/translates in, exactly as before.","category":"Overlays","hidden":false,"props":[{"name":"alt","type":"string","required":false,"description":""},{"name":"caption","type":"string","required":false,"description":""},{"name":"captionHref","type":"string","required":false,"description":""},{"name":"captionLabel","type":"string","required":false,"description":""},{"name":"naturalHeight","type":"number","required":false,"description":""},{"name":"naturalWidth","type":"number","required":false,"description":""},{"name":"onClose","type":"() => void","required":true,"description":""},{"name":"open","type":"boolean","required":true,"description":""},{"name":"src","type":"string","required":true,"description":""}],"observedTokens":[{"raw":"hds.semantic.space.layout.gap","tokenPath":"semantic.space.layout.gap","sourceLine":52,"sourceSnippet":"const overlayInset = hds.semantic.space.layout.gap;"},{"raw":"hds.zIndex.modal","tokenPath":"primitive.zIndex.1000","sourceLine":78,"sourceSnippet":"zIndex: hds.zIndex.modal,"},{"raw":"hds.effect.blur.lightboxBackdrop","sourceLine":81,"sourceSnippet":"backdropFilter: \`blur(\${hds.effect.blur.lightboxBackdrop})\`,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":202,"sourceSnippet":"...hds.typeStyles.caption,"}]},"MetadataList":{"filePath":"src/app/components/metadata-list.tsx","description":"Renders object metadata as a semantic \`<dl>\` of term/description pairs.","category":"Display","hidden":false,"props":[{"name":"footer","type":"ReactNode","required":false,"description":"Optional summary band rendered as the final row on a subtle surface — e.g. a footnote or aggregate note. Only rendered by the \`divided\` variant."},{"name":"items","type":"MetadataListItem[]","required":true,"description":"The term/description pairs to render."},{"name":"orientation","type":"\\"horizontal\\" | \\"vertical\\"","default":"vertical","required":false,"description":""},{"name":"variant","type":"\\"plain\\" | \\"divided\\"","default":"plain","required":false,"description":"Visual treatment. - \`'plain'\` (default) — bare term/description pairs; honours \`orientation\`. - \`'divided'\` — one bordered, rounded container with a full-width rule between each pair (term above its rich description). Ignores \`orientation\` (always term-above-description). Use for spec sheets / namespace tables."}],"observedTokens":[{"raw":"hds.borderWidth.default","tokenPath":"semantic.borderWidth.default","sourceLine":78,"sourceSnippet":"border: \`\${hds.borderWidth.default} solid var(--semantic-color-border-default)\`,"}]},"MultiSelector":{"filePath":"src/app/components/multi-selector.tsx","description":"MultiSelector — multi-select dropdown composing the existing Popover with a checkbox option list, so choosing several values from a fixed set reads as one overlay pattern with Combobox and Menu rather than a bespoke widget. No new dependency — built entirely on the HDS Popover. The trigger reads like a secondary Button, showing a placeholder or a \`\${n} selected\` count; the content is a token-skinned list where each row is a checkbox toggling membership in \`value\`. <MultiSelector options={[{ value: 'a', label: 'Apple' }, { value: 'b', label: 'Banana' }]} value={fruits} onChange={setFruits} />","category":"Inputs","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":""},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"onChange","type":"(next: string[]) => void","required":true,"description":"Fired with the next selected-values array whenever an option is toggled."},{"name":"options","type":"MultiSelectorOption[]","required":true,"description":"Selectable options."},{"name":"placeholder","type":"string","default":"Select…","required":false,"description":"Trigger text when nothing is selected."},{"name":"value","type":"string[]","required":true,"description":"Currently selected values."}],"observedTokens":[]},"NavGroup":{"filePath":"src/app/components/nav-group.tsx","description":"NavGroup - labeled navigation group for stacks of nav items.","category":"Navigation","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304","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":95,"sourceSnippet":"const labelStyle: CSSProperties = variant === 'side' ? hds.typeStyles.ui : hds.typeStyles.caption;"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":95,"sourceSnippet":"const labelStyle: CSSProperties = variant === 'side' ? hds.typeStyles.ui : hds.typeStyles.caption;"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":99,"sourceSnippet":"variant === 'toc' ? hds.semantic.space.sidebar.sectionGap : getNavLevelLeadingPadding(level),"},{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":101,"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258","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":"NavVariant","default":"side","required":false,"description":"Visual layout variant for side nav or table of contents usage."}],"observedTokens":[{"raw":"hds.motion.productive","sourceLine":8,"sourceSnippet":"// cva classes below; timing matches hds.motion.productive (150ms) via Tailwind's"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":119,"sourceSnippet":"typeStyle: hds.typeStyles.ui,"},{"raw":"hds.semantic.space.sidebar.railPadding","tokenPath":"semantic.space.sidebar.railPadding","sourceLine":120,"sourceSnippet":"leadingPaddingX: hds.semantic.space.sidebar.railPadding,"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":127,"sourceSnippet":"leadingPaddingX: hds.semantic.space.sidebar.sectionGap,"},{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":128,"sourceSnippet":"trailingPaddingX: hds.semantic.space.sidebar.gap,"}]},"OverflowList":{"filePath":"src/app/components/overflow-list.tsx","description":"Renders up to \`max\` children followed by a \`+N\` overflow chip (or custom node).","category":"Layout","hidden":false,"props":[{"name":"children","type":"ReactNode","required":true,"description":"Items to lay out. Extra items beyond \`max\` collapse into the overflow node."},{"name":"max","type":"number","required":false,"description":"Maximum items shown before collapsing into overflow. Unset or >= count shows all."},{"name":"renderOverflow","type":"(count: number) => ReactNode","required":false,"description":"Custom renderer for the overflow node. Defaults to a muted \`+N\` chip."}],"observedTokens":[]},"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.12","sourceLine":37,"sourceSnippet":"default: { top: hds.space.px48, bottom: hds.space.px64 },"},{"raw":"hds.space.px64","tokenPath":"primitive.space.16","sourceLine":37,"sourceSnippet":"default: { top: hds.space.px48, bottom: hds.space.px64 },"},{"raw":"hds.space.px24","tokenPath":"primitive.space.6","sourceLine":38,"sourceSnippet":"compact: { top: hds.space.px24, bottom: hds.space.px32 },"},{"raw":"hds.space.px32","tokenPath":"primitive.space.8","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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194","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":[]},"Pin":{"filePath":"src/app/components/pin.tsx","description":"Pin — sticky-pin an element within its scroll region. section scrolls — the dependency-free basis for pinned scroll scenes (the \\"tall section + sticky child\\" pattern that GSAP's \`pin: true\` solves imperatively). Reach for this before hand-rolling sticky positioning. Give the pinned element a TALLER scrolling parent so it has room to travel. For the scroll-scrubbed animation inside a pinned scene, use CSS \`animation-timeline\` (see Reveal) or \`useScrollProgress\` from \`@hirobius/design-system/scroll\`. See ADR-021.","category":"Layout","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":true,"description":"Content pinned within the scroll region."},{"name":"className","type":"string","required":false,"description":"Escape hatch: extra wrapper classes."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: narrow style adjustments that do not belong in the primitive API."},{"name":"top","type":"string","default":"0","required":false,"description":"Sticky offset from the top of the scroll region (CSS length). Defaults to '0'."}],"observedTokens":[]},"Progress":{"filePath":"src/app/components/progress.tsx","description":"Linear progress. Determinate when \`value\` is a number, else indeterminate.","category":"Feedback","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91","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":[]},"Reveal":{"filePath":"src/app/components/reveal.tsx","description":"Reveal — reveal-on-scroll primitive via CSS scroll-driven animation. purely by scroll position (\`animation-timeline: view()\`) — no JS, no deps, no IntersectionObserver. Reach for this before hand-rolling reveal logic. \`animation-timeline\` is supported AND the user has not requested reduced motion (both fall back to visible, never stuck hidden). Pick \`animation\` from the fixed set — do not hand-roll keyframes. For momentum/inertia scrolling wrap the app in \`SmoothScroll\`; for a scroll-progress value in JS use \`useScrollProgress\` — both from \`@hirobius/design-system/scroll\`. See ADR-021.","category":"Motion","hidden":false,"props":[{"name":"animation","type":"'fade' | 'fade-up' | 'fade-down' | 'scale'","default":"fade-up","required":false,"description":"Entrance animation. Defaults to 'fade-up'."},{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"div","required":false,"description":"Element rendered as the wrapper. Defaults to 'div'."},{"name":"children","type":"ReactNode","required":true,"description":"Content revealed as it scrolls into view."},{"name":"className","type":"string","required":false,"description":"Escape hatch: extra wrapper classes."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: narrow style adjustments that do not belong in the primitive API."}],"observedTokens":[]},"SegmentedControl":{"filePath":"src/app/components/segmented-control.tsx","description":"SegmentedControl \\" segmented selection input for compact mutually-exclusive choices. The active×hover×pressed×disabled×secondary state matrix is expressed through \`cva\` compound variants keyed by \`active\` / \`interaction\` (the live-or-frozen-demo hover/pressed/rest sub-state) / \`variant\` / \`disabled\`, each resolving to the same \`--semantic-*\` custom properties the pre-Tailwind inline styles referenced — same tokens, same pixels, just Tailwind classes instead of a \`style\` object. Per ADR-015 this control keeps its own hover/focus tracking (per-segment \`string | null\` cardinality) rather than the shared \`useInteractionState\` single-element machine; only the class composition changed, not the state machine feeding it.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334","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":"NonNullable<\\"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":"NonNullable<\\"primary\\" | \\"secondary\\">","default":"primary","required":false,"description":"Visual treatment for the rail and active segment."}],"observedTokens":[{"raw":"hds.motion","sourceLine":17,"sourceSnippet":"// motion-ok: motion/react drives the secondary-variant press/hover spring (animate/transition below); CSS transitions reference hds.motion tokens via var(--hds-motion-productive-*)"},{"raw":"hds.zIndex.focus","tokenPath":"primitive.zIndex.10","sourceLine":241,"sourceSnippet":"// tier-ok: primitive.zIndex.10 (the discrete 0/10/100/1000 stacking scale, reached as hds.zIndex.focus) has no semantic alias — same primitive ref the pre-Tailwind inline style used"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":357,"sourceSnippet":"(isCompact ? hds.semantic.space.component.gap : hds.semantic.space.layout.gap);"},{"raw":"hds.semantic.space.layout.gap","tokenPath":"semantic.space.layout.gap","sourceLine":357,"sourceSnippet":"(isCompact ? hds.semantic.space.component.gap : hds.semantic.space.layout.gap);"},{"raw":"hds.semantic.space.subgrid.gap","tokenPath":"semantic.space.subgrid.gap","sourceLine":366,"sourceSnippet":"style={{ paddingBottom: hds.semantic.space.subgrid.gap }}"}]},"SelectableCard":{"filePath":"src/app/components/selectable-card.tsx","description":"A card-shaped single checkbox — click or activate to toggle selection.","category":"Actions","hidden":false,"props":[{"name":"disabled","type":"boolean","required":false,"description":"Disable interaction."},{"name":"onSelectedChange","type":"(selected: boolean) => void","required":false,"description":"Called with the toggled selection state when the card is activated."},{"name":"selected","type":"boolean","default":"false","required":false,"description":"Whether this card is currently selected."}],"observedTokens":[]},"Sidebar":{"filePath":"src/app/components/sidebar.tsx","description":"Sidebar — fixed-width rail beside fluid content, no media query. problem with the flex-basis/flex-grow disparity technique — the rail holds \`sideWidth\` and the content flex-basis 0 with an overwhelming flex-grow, so the pair wraps to stacked automatically once the container can no longer fit both without squeezing content below \`contentMin\`. No CSS media query, no JS resize observer. EXACTLY two children — the rail and the content — passed in that order. \`side\` controls which one visually renders as the rail; DOM order is unchanged. gap MUST use a semantic space step, never raw px. sideWidth and contentMin are CSS length dimensions (not spacing) — a length string like '16rem' or '50%' is expected, matching the check-hardcoded-spacing gate's own dimension-prop exemption. Do NOT use Sidebar for more than two regions — use Grid. Every Layout reference: https://every-layout.dev/layouts/sidebar/","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, ReactNode]","required":true,"description":"Exactly two children: the rail first, the fluid content second (DOM order — \`side\` only changes visual order)."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"contentMin","type":"string","default":"50%","required":false,"description":"Minimum inline size the content is allowed to shrink to before the pair wraps to stacked (CSS length). Defaults to '50%'."},{"name":"gap","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"normal","required":false,"description":"Gap between the rail and the content, and between the two once stacked. Defaults to 'normal'."},{"name":"side","type":"'start' | 'end'","default":"start","required":false,"description":"Which visual edge the rail renders on. Defaults to 'start'."},{"name":"sideWidth","type":"string","default":"16rem","required":false,"description":"Fixed width of the rail (CSS length, e.g. '16rem'). Defaults to '16rem'."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."}],"observedTokens":[]},"SideNav":{"filePath":"src/app/components/side-nav.tsx","description":"SideNav - sidebar navigation row primitive. Two levels: root — top-level section link. Full-width row using the shared nav label type style. nested — child page link. Keeps the same full-width hit area and label type treatment, with indentation handled via inner padding only. No indicator bar (reserved for HdsTocNav). Idle text = content-secondary → primary on hover/active. Accent surface fill on active state.","category":"Navigation","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332","props":[{"name":"active","type":"boolean","default":"false","required":false,"description":""},{"name":"disabled","type":"boolean","default":"false","required":false,"description":""},{"name":"href","type":"string","required":false,"description":""},{"name":"indent","type":"number | boolean","default":"0","required":false,"description":"Nested depth offset applied via inner padding while keeping the row full width."},{"name":"label","type":"string","required":true,"description":""},{"name":"level","type":"'root' | 'nested'","default":"nested","required":false,"description":"Visual level — root matches group-header altitude, nested is an indented page link."},{"name":"onNavigate","type":"(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void","required":false,"description":""},{"name":"titleLabel","type":"boolean","default":"false","required":false,"description":""}],"observedTokens":[{"raw":"hds.motion.productive","sourceLine":19,"sourceSnippet":"// cva classes below; timing matches hds.motion.productive (150ms) via Tailwind's"},{"raw":"hds.semantic.space.sidebar.gap","tokenPath":"semantic.space.sidebar.gap","sourceLine":117,"sourceSnippet":"isRtl ? hds.semantic.space.sidebar.gap : hds.semantic.space.sidebar.sectionGap,"},{"raw":"hds.semantic.space.sidebar.sectionGap","tokenPath":"semantic.space.sidebar.sectionGap","sourceLine":117,"sourceSnippet":"isRtl ? hds.semantic.space.sidebar.gap : hds.semantic.space.sidebar.sectionGap,"},{"raw":"hds.semantic.space.sidebar.indent","tokenPath":"semantic.space.sidebar.indent","sourceLine":124,"sourceSnippet":": \`calc(\${hds.semantic.space.sidebar.sectionGap} + \${indent ? hds.semantic.space.sidebar.indent : '0px'})\`,"},{"raw":"hds.typeStyles.eyebrow","sourceLine":182,"sourceSnippet":"const labelTypeStyle = titleLabel ? hds.typeStyles.eyebrow : hds.typeStyles.ui;"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":182,"sourceSnippet":"const labelTypeStyle = titleLabel ? hds.typeStyles.eyebrow : hds.typeStyles.ui;"}]},"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95","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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106","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;"}]},"StackedCardRail":{"filePath":"src/app/components/stacked-card-rail.tsx","description":"StackedCardRail — horizontally-scrolling stacked card carousel. Scroll mechanism: vertical scroll on an absolutely-positioned inner container is mapped to horizontal scroll on a sticky inner strip via a single scroll event listener. Cards use CSS scroll-driven animation (animation-timeline: view(x …)) for the stack/unstack effect where the browser supports it; a plain horizontal rail is the graceful fallback. Browser compat note: - animation-timeline: view() — Chrome 115+, Firefox 110+ (behind flag until v114), Safari 18+ (TP only as of 2025). The @supports guard ensures the stacking animation is only applied when the feature is available; all other browsers get a clean scrollable row. - :has() selector (neighbour shift on hover) — Chrome 105+, FF 121+, Safari 15.4+. Gated with @supports selector(:has(+ *)).","category":"Display","hidden":false,"props":[{"name":"cards","type":"StackedCardRailCard[]","required":true,"description":""}],"observedTokens":[{"raw":"hds.borderRadius[8]","tokenPath":"primitive.radius.8","sourceLine":128,"sourceSnippet":"border-radius: \${hds.borderRadius[8]};"},{"raw":"hds.typeStyles.eyebrow","sourceLine":318,"sourceSnippet":"...hds.typeStyles.eyebrow,"},{"raw":"hds.typeStyles.heading3","tokenPath":"semantic.typography.h3","sourceLine":327,"sourceSnippet":"...hds.typeStyles.heading3,"}]},"Stat":{"filePath":"src/app/components/stat.tsx","description":"Headline metric — large value, uppercase caption label, optional sub-line.","category":"Display","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247","props":[{"name":"label","type":"string","required":true,"description":""},{"name":"sub","type":"ReactNode","required":false,"description":""},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","required":false,"description":""},{"name":"value","type":"ReactNode","required":true,"description":""}],"observedTokens":[]},"StatusDot":{"filePath":"src/app/components/status-dot.tsx","description":"A small solid dot conveying a semantic status via \`tone\`.","category":"Feedback","hidden":false,"props":[{"name":"label","type":"string","required":false,"description":"Accessible name for the status. When provided the dot is exposed as a \`role=\\"status\\"\` with this label; when omitted the dot is decorative (\`aria-hidden\`) and a sibling should carry the meaning."},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\" | \\"inProgress\\"","required":false,"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350","props":[{"name":"notes","type":"ReactNode[]","required":false,"description":""},{"name":"title","type":"ReactNode","required":true,"description":""},{"name":"tone","type":"\\"neutral\\" | \\"danger\\" | \\"success\\" | \\"warning\\" | \\"info\\"","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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292","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":[]},"Stepper":{"filePath":"src/app/components/stepper.tsx","description":"Step indicator for multi-step flows. Purely presentational — no navigation.","category":"Navigation","hidden":false,"props":[{"name":"activeStep","type":"number","required":true,"description":"0-based index of the current step."},{"name":"orientation","type":"\\"horizontal\\" | \\"vertical\\"","default":"horizontal","required":false,"description":"Layout direction. Defaults to 'horizontal'."},{"name":"steps","type":"Step[]","required":true,"description":"Ordered steps from first to last."}],"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425","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":93,"sourceSnippet":"<label className=\\"text-secondary\\" style={{ ...hds.typeStyles.caption }}>"},{"raw":"hds.semantic.space.component.gap","tokenPath":"semantic.space.component.gap","sourceLine":96,"sourceSnippet":"<div style={{ display: 'flex', alignItems: 'center', gap: hds.semantic.space.component.gap }}>"},{"raw":"hds.size[96]","tokenPath":"primitive.size.96","sourceLine":123,"sourceSnippet":"width: hds.size[96],"},{"raw":"hds.motion.productive.duration","tokenPath":"primitive.duration.short","sourceLine":130,"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,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-27","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":[]},"Switcher":{"filePath":"src/app/components/switcher.tsx","description":"Switcher — flips a row to a column below a width threshold, no media query. vertical stack once the container gets narrow\\" without a breakpoint or a resize observer, using the flex-basis calc() technique: each item's flex-basis resolves to a huge negative or huge positive number depending on whether the container is above or below \`threshold\`, forcing every item onto its own line once it flips. semantic space step, never raw px. threshold is a CSS length dimension (not spacing), e.g. '30rem'. \`limit\` unconditionally forces the stacked (column) layout once there are more than \`limit\` children, regardless of container width — use it to stop a row from thinning out into an unreadable N-up strip. Do NOT use Switcher for content that should always wrap in place — use Cluster. Every Layout reference: https://every-layout.dev/layouts/the-switcher/","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":"Switcher content — peer items that flip between row and column as a unit."},{"name":"className","type":"string","required":false,"description":"Escape hatch: only use when tokenized props cannot express the required wrapper class."},{"name":"gap","type":"'tight' | 'normal' | 'inset' | 'spacious'","default":"normal","required":false,"description":"Gap between items in both the row and the stacked layout. Defaults to 'normal'."},{"name":"limit","type":"number","required":false,"description":"Maximum number of children before the layout is unconditionally forced to stacked, regardless of width."},{"name":"style","type":"CSSProperties","required":false,"description":"Escape hatch: only use for narrow layout adjustments that do not belong in the primitive API."},{"name":"threshold","type":"string","default":"30rem","required":false,"description":"Container width below which items stack vertically (CSS length, e.g. '30rem'). Defaults to '30rem'."}],"observedTokens":[]},"Table":{"filePath":"src/app/components/table.tsx","description":"Table - structured data table primitive for documentation and compact UI matrices.","category":"Display","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300","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.X","sourceLine":106,"sourceSnippet":"// established \`style={hds.typeStyles.X}\` pattern used by already-converted"},{"raw":"hds.typeStyles.ui","tokenPath":"semantic.typography.small","sourceLine":109,"sourceSnippet":"label: hds.typeStyles.ui,"},{"raw":"hds.typeStyles.technical","tokenPath":"semantic.typography.mono","sourceLine":110,"sourceSnippet":"value: hds.typeStyles.technical,"},{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":112,"sourceSnippet":"...hds.typeStyles.caption,"}]},"Tabs":{"filePath":"src/app/components/tabs.tsx","description":"The tab set itself. Tagged here rather than in the file block because TabsList and TabsContent share this module and have no Figma node of their own — a file-level","category":"Navigation","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89","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) live in the pill's cva variants, painted through \`group-hover\`/\`group-active\` so the pill reacts to interaction on the shared outer button (converted off the former .hds-tag-btn/.hds-tag-pill theme.css rules for #60 — same behavior, now token-driven Tailwind classes). The \`active\` prop (aria-pressed selected state) is not one of the variant contract's four axes — it's expressed as the pill's \`selected\` cva variant, carrying the same rest → hover → pressed → focus-visible state matrix the contract expects, just keyed by selection instead of tone/size/density.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11","props":[{"name":"active","type":"boolean","default":"false","required":false,"description":"Whether the tag is active (selected)."},{"name":"children","type":"ReactNode","required":true,"description":"Tag content displayed inside the pill."}],"observedTokens":[]},"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\\" | \\"map\\" | \\"filter\\" | \\"title\\" | \\"a\\" | \\"button\\" | \\"div\\" | \\"form\\" | \\"h2\\" | \\"h3\\" | \\"img\\" | \\"input\\" | \\"label\\" | \\"li\\" | \\"nav\\" | \\"ol\\" | \\"p\\" | \\"select\\" | \\"span\\" | \\"svg\\" | ... 158 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","sourceLine":29,"sourceSnippet":"// (variantStyleMap → hds.typeStyles.*) read. No Tailwind-theme utility exists"}]},"Textarea":{"filePath":"src/app/components/textarea.tsx","description":"Textarea — multi-line text field primitive with label, helper, and error slots. Mirrors Input's shell + token skin as a native \`<textarea>\`. Figma parity: the four states Default / Focus / Error / Disabled map to the focus-ring, \`error\`, and \`disabled\` treatments below.","category":"Inputs","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14","props":[{"name":"className","type":"string","required":false,"description":"Class hook for the outer wrapper."},{"name":"disabled","type":"boolean","required":false,"description":"Disable interaction."},{"name":"error","type":"boolean","required":false,"description":"Mark the field as invalid (sets aria-invalid + destructive border)."},{"name":"errorMessage","type":"string","required":false,"description":"Error message rendered below the textarea when \`error\` is true."},{"name":"helperText","type":"string","required":false,"description":"Supporting helper text rendered below when not in error."},{"name":"label","type":"string","required":false,"description":"Field label rendered above the textarea."},{"name":"resize","type":"TextareaResize","default":"vertical","required":false,"description":"User resize affordance. Defaults to vertical-only."},{"name":"textareaClassName","type":"string","required":false,"description":"Class hook for the textarea element itself."}],"observedTokens":[{"raw":"hds.duration","sourceLine":1,"sourceSnippet":"// motion-ok: textarea field — focus ring + transition via Tailwind utilities (gate accepts only hds.duration refs)"}]},"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":[]},"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":[]},"TimeInput":{"filePath":"src/app/components/time-input.tsx","description":"A native time field skinned with HDS input chrome. Value is a \`HH:mm\` string.","category":"Inputs","hidden":false,"props":[{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""}],"observedTokens":[]},"Timestamp":{"filePath":"src/app/components/timestamp.tsx","description":"Presents a date/time with a machine-readable \`dateTime\` for accessibility.","category":"Display","hidden":false,"props":[{"name":"date","type":"string | number | Date","required":true,"description":"The moment to render — a Date, epoch millis, or an ISO string."},{"name":"format","type":"'date' | 'time' | 'datetime' | 'relative'","default":"datetime","required":false,"description":"How to present it. Defaults to \`datetime\`."},{"name":"locale","type":"string","required":false,"description":"BCP-47 locale override; defaults to the runtime locale."},{"name":"now","type":"string | number | Date","required":false,"description":"Reference point for \`relative\` formatting. Defaults to the current time; pass an explicit value for deterministic rendering/tests."}],"observedTokens":[]},"ToastProvider":{"filePath":"src/app/components/toast.tsx","description":"Provider + viewport for the toast system. Wrap the app root once.","category":"Feedback","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367","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":[]},"ToggleButton":{"filePath":"src/app/components/toggle-button.tsx","description":"A single two-state toggle button exposing a native \`aria-pressed\` contract — use for one independent on/off control such as bold, mute, or pin.","category":"Actions","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""},{"name":"size","type":"\\"sm\\" | \\"md\\" | \\"lg\\"","required":false,"description":""},{"name":"variant","type":"\\"secondary\\" | \\"ghost\\"","required":false,"description":""}],"observedTokens":[]},"Token":{"filePath":"src/app/components/token.tsx","description":"Token - reflective token specimen for unified node-based token views. The \`variant\` axis (node | diagram — diagram is a deprecated alias that resolves to the same node treatment) plus the \`selected\` / \`fullWidth\` / \`asButton\` / \`nowrap\` / \`sourceNode\` states used to be a Token.module.css \`[data-*]\` attribute stylesheet, with a duplicate \`isSelected\` branch re-painted inline on top of it. Both now live as one \`cva\` variant set — same \`--semantic-*\`/\`--component-*\`/\`--primitive-*\` custom properties, same pixels, no CSS module.","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":93,"sourceSnippet":"// tier-ok: primitive.typography.family.mono (Geist Mono stack) has no semantic alias — same primitive ref hds.typeStyles.technical used"}]},"Tokenizer":{"filePath":"src/app/components/tokenizer.tsx","description":"A bordered field of Tag chips followed by a text input for adding more.","category":"Inputs","hidden":false,"props":[{"name":"className","type":"string","required":false,"description":"Class hook for the outer wrapper."},{"name":"disabled","type":"boolean","required":false,"description":"Disable the field and all token interactions."},{"name":"onChange","type":"(next: string[]) => void","required":true,"description":"Called with the next token list whenever tokens are added or removed."},{"name":"placeholder","type":"string","required":false,"description":"Placeholder shown in the trailing text field when empty."},{"name":"value","type":"string[]","required":true,"description":"Committed tokens rendered as chips."}],"observedTokens":[{"raw":"hds.duration","sourceLine":9,"sourceSnippet":"// motion-ok: interactive — focus-within ring via Tailwind transition-colors (gate accepts only hds.duration refs); mirrors input-group.tsx chrome"}]},"Toolbar":{"filePath":"src/app/components/toolbar.tsx","description":"Toolbar root. Groups related controls with a single roving tab-stop. Supports the native \`orientation\` prop (\`horizontal\` | \`vertical\`).","category":"Actions","hidden":false,"props":[{"name":"asChild","type":"boolean","required":false,"description":""}],"observedTokens":[]},"TopNav":{"filePath":"src/app/components/top-nav.tsx","description":"Top navigation bar with brand, nav, and trailing action slots.","category":"Navigation","hidden":false,"props":[{"name":"brand","type":"ReactNode","required":false,"description":"Leading brand slot (e.g. logo/wordmark)."},{"name":"children","type":"ReactNode","required":false,"description":"Nav links, placed left after the brand and wrapped in a <nav>."},{"name":"sticky","type":"boolean","required":false,"description":"Pins the bar to the top of its scroll container."},{"name":"trailing","type":"ReactNode","required":false,"description":"Trailing actions, pushed to the far right."}],"observedTokens":[]},"TreeList":{"filePath":"src/app/components/tree-list.tsx","description":"Renders a hierarchical \`role=\\"tree\\"\` list; nodes with children get an expand/collapse toggle.","category":"Navigation","hidden":false,"props":[{"name":"defaultExpandedIds","type":"string[]","required":false,"description":"Node ids expanded on mount."},{"name":"items","type":"TreeNode[]","required":true,"description":"Root-level nodes to render."},{"name":"onSelect","type":"(id: string) => void","required":false,"description":"Called with a node's id when its label row is clicked."}],"observedTokens":[]},"VisuallyHidden":{"filePath":"src/app/components/visually-hidden.tsx","description":"Renders its children off-screen (Tailwind \`sr-only\`) so they are announced by screen readers without occupying visual space — e.g. a text label for an icon-only control.","category":"Utility","hidden":false,"props":[{"name":"as","type":"ElementType<any, keyof IntrinsicElements>","default":"span","required":false,"description":"Element rendered as the wrapper. Defaults to 'span'."}],"observedTokens":[]},"HdsTooltip":{"filePath":"src/app/components/hds-tooltip.tsx","description":"Tooltip root. Bakes in the Radix Provider so a single \`<HdsTooltip>\` is self-contained — no app-level provider required. Controlled via \`open\`/\`onOpenChange\`, or uncontrolled with \`defaultOpen\`.","category":"Overlays","hidden":true,"props":[],"observedTokens":[{"raw":"hds.typeStyles.caption","tokenPath":"semantic.typography.caption","sourceLine":55,"sourceSnippet":"...hds.typeStyles.caption,"}]},"Menu":{"filePath":"src/app/components/menu.tsx","description":"Menu root + parts. Controlled via \`open\`/\`onOpenChange\`, or uncontrolled with \`defaultOpen\`.","category":"Overlays","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59","props":[],"observedTokens":[]},"Popover":{"filePath":"src/app/components/popover.tsx","description":"Popover root + parts. Controlled via \`open\`/\`onOpenChange\`, or uncontrolled with \`defaultOpen\`.","category":"Overlays","hidden":false,"figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32","props":[],"observedTokens":[]}}`), os = {
   components: is
 }, ns = os, ss = {
   demoState: [
@@ -24106,7 +24103,15 @@ class Mt extends bo {
               children: o.message || "A runtime error interrupted this slot."
             }
           ),
-          /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(vt, { variant: "secondary", onClick: this.handleRetry, "aria-label": `Retry ${a}`, children: "Retry section" }) })
+          /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(
+            vt,
+            {
+              variant: "secondary",
+              onClick: this.handleRetry,
+              "aria-label": `Retry ${a}`,
+              children: "Retry section"
+            }
+          ) })
         ] })
       }
     ) : /* @__PURE__ */ l(Na, { children: e }, n);
@@ -25279,7 +25284,12 @@ function Qh({
     )
   ] }) });
 }
-function Jh({ heroSlot: r, introSlot: t, metricsSlot: e, contentSlot: a }) {
+function Jh({
+  heroSlot: r,
+  introSlot: t,
+  metricsSlot: e,
+  contentSlot: a
+}) {
   return /* @__PURE__ */ l("main", { children: /* @__PURE__ */ x(se, { gap: "spacious", children: [
     /* @__PURE__ */ l(gt, { maxWidth: "max", children: /* @__PURE__ */ l(Mt, { slotLabel: "Case study hero", minHeight: "320px", children: r }) }),
     /* @__PURE__ */ l(gt, { maxWidth: "content", children: /* @__PURE__ */ l(Mt, { slotLabel: "Case study intro", minHeight: "240px", children: t }) }),