@hirobius/design-system 0.13.0 → 0.14.0

package/public/hds-manifest.json

@@ -2,7 +2,7 @@
   "name": "Hirobius Design System",
   "description": "Three-tier design token system for Adrian Milsap's portfolio site. Tokens flow primitive → semantic → component. All visual decisions trace back to hirobius.tokens.json.",
   "version": "1",
-  "generated": "2026-07-07T05:40:59.475Z",
+  "generated": "2026-09-21T02:18:05.720Z",
   "source": "hirobius.tokens.json",
   "format": "W3C DTCG 2025.10",
   "docs": "https://adrianmilsap.com/hds",
@@ -38,9 +38,11 @@
     "accentCount": 1
   },
   "componentInventory": [
+    "ActivityFeed",
     "Alert",
     "AlertDialog",
     "AspectRatio",
+    "AssetImg",
     "Avatar",
     "AvatarGroup",
     "Badge",
@@ -48,10 +50,18 @@
     "Blockquote",
     "Box",
     "Breadcrumb",
+    "Button",
     "ButtonGroup",
     "Calendar",
     "Callout",
     "Card",
+    "CardBody",
+    "CardDescription",
+    "CardFooter",
+    "CardHeader",
+    "CardMetric",
+    "CardProgress",
+    "CardTitle",
     "Carousel",
     "Center",
     "CinematicLink",
@@ -68,6 +78,15 @@
     "DateRangeInput",
     "DateTimeInput",
     "Dialog",
+    "DialogClose",
+    "DialogContent",
+    "DialogDescription",
+    "DialogFooter",
+    "DialogHeader",
+    "DialogOverlay",
+    "DialogPortal",
+    "DialogTitle",
+    "DialogTrigger",
     "Disclosure",
     "Divider",
     "DocLinkCard",
@@ -82,18 +101,22 @@
     "Grid",
     "HdsCheckbox",
     "HdsRadio",
+    "HdsSelect",
     "HdsSlider",
     "HdsThemeProvider",
     "HdsToggle",
+    "HdsTooltip",
     "HeadingStack",
     "HoverCard",
     "Icon",
     "IconButton",
     "InlineCode",
     "InlineLink",
+    "Input",
     "InputGroup",
     "Kbd",
     "Lightbox",
+    "Menu",
     "MetadataList",
     "MultiSelector",
     "NavGroup",
@@ -102,6 +125,7 @@
     "Page",
     "Pagination",
     "Pin",
+    "Popover",
     "Progress",
     "Reveal",
     "SegmentedControl",
@@ -113,6 +137,7 @@
     "SpecimenBlock",
     "Spinner",
     "Stack",
+    "StackedCardRail",
     "Stat",
     "StatusDot",
     "StatusListItem",
@@ -128,6 +153,7 @@
     "TabsTrigger",
     "Tag",
     "Text",
+    "Textarea",
     "TextLockup",
     "TileGrid",
     "TimeInput",
@@ -551,10 +577,6 @@
       {
         "name": "HdsLegacyTokenGovernancePanel",
         "filePath": "src/app/components/lab/legacy-token-detail.tsx"
-      },
-      {
-        "name": "HdsSelect",
-        "filePath": "src/app/components/select.tsx"
       }
     ],
     "namespaceViolations": [
@@ -570,10 +592,18 @@
         "name": "HdsMobileTopBar",
         "filePath": "src/app/components/shell-controls.tsx"
       },
+      {
+        "name": "HdsRadio",
+        "filePath": "src/app/components/controls.tsx"
+      },
       {
         "name": "HdsRadio",
         "filePath": "src/app/components/radio.tsx"
       },
+      {
+        "name": "HdsSelect",
+        "filePath": "src/app/components/controls.tsx"
+      },
       {
         "name": "HdsSelect",
         "filePath": "src/app/components/select.tsx"
@@ -582,13 +612,25 @@
         "name": "HdsSidebarUtilityButton",
         "filePath": "src/app/components/shell-controls.tsx"
       },
+      {
+        "name": "HdsSlider",
+        "filePath": "src/app/components/controls.tsx"
+      },
       {
         "name": "HdsSlider",
         "filePath": "src/app/components/slider.tsx"
       },
+      {
+        "name": "HdsToggle",
+        "filePath": "src/app/components/controls.tsx"
+      },
       {
         "name": "HdsToggle",
         "filePath": "src/app/components/toggle.tsx"
+      },
+      {
+        "name": "HdsTooltip",
+        "filePath": "src/app/components/hds-tooltip.tsx"
       }
     ]
   },
@@ -693,7 +735,7 @@
       "hidden": false,
       "filePath": "src/app/components/alert.tsx",
       "description": "Alert - compact feedback surface with contextual severity.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34",
       "figmaId": null,
       "preview": {
         "exportName": "Alert",
@@ -702,7 +744,8 @@
       "consumers": [
         "src/app/components/componentPreviewRegistry.tsx",
         "src/app/data/hdsEditorial.tsx",
-        "src/stories/alert.stories.tsx"
+        "src/stories/alert.stories.tsx",
+        "src/stories/static-primitives.stories.tsx"
       ],
       "tokenMapping": {
         "Success accent": "semantic.color.feedback.success",
@@ -715,42 +758,9 @@
         "Info surface fill": "semantic.color.feedback.bg.info",
         "Corner radius": "primitive.radius.4"
       },
-      "props": {
-        "variant": {
-          "type": "enum",
-          "values": [
-            "info",
-            "success",
-            "warning",
-            "error"
-          ],
-          "default": "info"
-        },
-        "title": {
-          "type": "string",
-          "optional": true
-        },
-        "children": {
-          "type": "ReactNode"
-        }
-      },
       "allowedChildren": [
         "*"
       ],
-      "propConstraints": {
-        "variant": {
-          "type": "enum",
-          "values": [
-            "info",
-            "success",
-            "warning",
-            "error"
-          ]
-        },
-        "title": {
-          "type": "string"
-        }
-      },
       "requiredProps": [
         "children"
       ],
@@ -761,7 +771,7 @@
         }
       ],
       "variantAxes": [
-        "variant"
+        "tone"
       ],
       "componentProperties": [
         {
@@ -810,7 +820,40 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/Alert.tsx",
-      "figmaLink": "TODO:hds-master:Alert"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34",
+      "props": {
+        "children": {
+          "type": "ReactNode"
+        },
+        "title": {
+          "type": "string",
+          "optional": true
+        },
+        "tone": {
+          "type": "enum",
+          "values": [
+            "success",
+            "danger",
+            "warning",
+            "info"
+          ],
+          "default": "info"
+        }
+      },
+      "propConstraints": {
+        "title": {
+          "type": "string"
+        },
+        "tone": {
+          "type": "enum",
+          "values": [
+            "success",
+            "danger",
+            "warning",
+            "info"
+          ]
+        }
+      }
     },
     "CinematicLink": {
       "category": "Branding",
@@ -850,7 +893,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/CinematicLink.tsx",
-      "figmaLink": "TODO:hds-master:CinematicLink"
+      "figmaLink": null
     },
     "CodeBlock": {
       "category": "Display",
@@ -859,7 +902,7 @@
       "hidden": false,
       "filePath": "src/app/components/code-block.tsx",
       "description": "CodeBlock - code display with copy button and optional collapsible toggle.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154",
       "figmaId": null,
       "preview": {
         "exportName": "CodeBlock",
@@ -918,7 +961,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/CodeBlock.tsx",
-      "figmaLink": "TODO:hds-master:CodeBlock"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154"
     },
     "Container": {
       "category": "Layout",
@@ -983,7 +1026,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/Container.tsx",
-      "figmaLink": "TODO:hds-master:Container"
+      "figmaLink": null
     },
     "Disclosure": {
       "category": "Layout",
@@ -992,7 +1035,7 @@
       "hidden": false,
       "filePath": "src/app/components/disclosure.tsx",
       "description": "Disclosure - compact disclosure surface for optional explanatory content.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453",
       "figmaId": null,
       "preview": {
         "exportName": "Disclosure",
@@ -1098,7 +1141,7 @@
         }
       ],
       "sourcePath": "src/app/components/Disclosure.tsx",
-      "figmaLink": "TODO:hds-master:Disclosure"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453"
     },
     "Divider": {
       "category": "Layout",
@@ -1107,7 +1150,7 @@
       "hidden": false,
       "filePath": "src/app/components/divider.tsx",
       "description": "Divider — semantic separator between content regions.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26",
       "figmaId": null,
       "preview": {
         "exportName": "Divider",
@@ -1117,18 +1160,39 @@
         "src/app/components/componentPreviewRegistry.tsx",
         "src/app/components/metadata-list.tsx",
         "src/app/data/hdsEditorial.tsx",
-        "src/stories/divider.stories.tsx"
+        "src/stories/divider.stories.tsx",
+        "src/stories/static-primitives.stories.tsx"
       ],
       "tokenMapping": {
         "Default stroke": "semantic.color.border.default",
         "Strong stroke": "semantic.color.border.strong",
         "Stroke thickness": "primitive.borderWidth.xs"
       },
+      "allowedChildren": [],
+      "requiredProps": [],
+      "a11yRules": [],
+      "variantAxes": [
+        "orientation",
+        "variant"
+      ],
+      "componentProperties": [],
+      "states": [
+        "default"
+      ],
+      "slots": [
+        {
+          "name": "line",
+          "figmaSlotName": "Line",
+          "tokenBinding": {
+            "fill": "semantic.color.border.default"
+          }
+        }
+      ],
+      "tier": "primitive",
+      "docExempt": false,
+      "sourcePath": "src/app/components/Divider.tsx",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26",
       "props": {
-        "className": {
-          "type": "string",
-          "optional": true
-        },
         "orientation": {
           "type": "enum",
           "values": [
@@ -1143,18 +1207,18 @@
         },
         "strong": {
           "type": "boolean",
-          "default": false
+          "optional": true
         },
-        "style": {
-          "type": "CSSProperties",
+        "variant": {
+          "type": "enum",
+          "values": [
+            "strong",
+            "default"
+          ],
           "optional": true
         }
       },
-      "allowedChildren": [],
       "propConstraints": {
-        "className": {
-          "type": "string"
-        },
         "orientation": {
           "type": "enum",
           "values": [
@@ -1164,30 +1228,15 @@
         },
         "strong": {
           "type": "boolean"
+        },
+        "variant": {
+          "type": "enum",
+          "values": [
+            "strong",
+            "default"
+          ]
         }
-      },
-      "requiredProps": [],
-      "a11yRules": [],
-      "variantAxes": [
-        "orientation"
-      ],
-      "componentProperties": [],
-      "states": [
-        "default"
-      ],
-      "slots": [
-        {
-          "name": "line",
-          "figmaSlotName": "Line",
-          "tokenBinding": {
-            "fill": "semantic.color.border.default"
-          }
-        }
-      ],
-      "tier": "primitive",
-      "docExempt": false,
-      "sourcePath": "src/app/components/Divider.tsx",
-      "figmaLink": "TODO:hds-master:Divider"
+      }
     },
     "DocLinkCard": {
       "category": "Navigation",
@@ -1228,7 +1277,7 @@
       "hidden": false,
       "docExempt": false,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:DocLinkCard",
+      "figmaLink": null,
       "consumers": [
         "src/app/components/componentPreviewRegistry.tsx",
         "src/app/components/doc-link-card.test.tsx",
@@ -1444,7 +1493,7 @@
         }
       ],
       "sourcePath": "src/app/components/FoundationSwatch.tsx",
-      "figmaLink": "TODO:hds-master:FoundationSwatch"
+      "figmaLink": null
     },
     "Grid": {
       "category": "Layout",
@@ -1568,7 +1617,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/Grid.tsx",
-      "figmaLink": "TODO:hds-master:Grid"
+      "figmaLink": null
     },
     "Icon": {
       "category": "Display",
@@ -1722,7 +1771,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/Icon.tsx",
-      "figmaLink": "TODO:hds-master:Icon"
+      "figmaLink": null
     },
     "IconButton": {
       "category": "Actions",
@@ -1731,7 +1780,7 @@
       "hidden": false,
       "filePath": "src/app/components/icon-button.tsx",
       "description": "IconButton ” icon-only action trigger built on the shared Button primitive.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39",
       "figmaId": null,
       "preview": {
         "exportName": "IconButton",
@@ -1852,7 +1901,7 @@
         }
       ],
       "sourcePath": "src/app/components/IconButton.tsx",
-      "figmaLink": "TODO:hds-master:IconButton"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39"
     },
     "InlineCode": {
       "category": "Display",
@@ -1861,7 +1910,7 @@
       "hidden": false,
       "filePath": "src/app/components/inline-code.tsx",
       "description": "InlineCode — inline code chip for token paths, file paths, and code-adjacent prose.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155",
       "figmaId": null,
       "preview": {
         "exportName": "InlineCode",
@@ -1907,7 +1956,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/InlineCode.tsx",
-      "figmaLink": "TODO:hds-master:InlineCode"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155"
     },
     "InlineLink": {
       "category": "Navigation",
@@ -1916,7 +1965,7 @@
       "hidden": false,
       "filePath": "src/app/components/inline-link.tsx",
       "description": "InlineLink ” inline navigation and external-link primitive for body copy.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161",
       "figmaId": null,
       "preview": {
         "exportName": "InlineLink",
@@ -1966,7 +2015,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/InlineLink.tsx",
-      "figmaLink": "TODO:hds-master:InlineLink"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161"
     },
     "Input": {
       "category": "Inputs",
@@ -1974,8 +2023,8 @@
       "governedCategory": true,
       "hidden": false,
       "filePath": "src/app/components/input.tsx",
-      "description": "Input — text field primitive (shadcn baseline). shadcn-baseline implementation (8s-5): cva-driven sizing/state composed against role-token Tailwind utilities (bg-background / border-input / focus-visible:ring-ring / placeholder:text-muted-foreground / etc.) wired by 8e-2 + 8s-1. Border swaps to border-destructive on error and the focus ring follows. Theme is handled entirely by CSS custom properties. The label/helper/error wrapper is deliberately retained on this primitive so existing call sites keep working unchanged. A future 8t pass may extract those slots into an HdsField pattern (see orchestration agentNote). Variants: size — sm (32px) / md (40px, default) / lg (48px) textStyle — body (default) / mono Derived state (data-state): default | focus | filled | error | disabled | loading loading swaps the trailing area for a spinner and sets aria-busy; disabled is implied. demoState (frozen, via DemoStateContext) is honored so matrix cells still freeze visually.",
-      "figmaUrl": null,
+      "description": "Input — text field primitive with label, helper, and error slots.",
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20",
       "figmaId": null,
       "preview": {
         "exportName": "Input",
@@ -1983,13 +2032,17 @@
       },
       "consumers": [
         "src/app/components/componentPreviewRegistry.tsx",
+        "src/app/components/form.tsx",
+        "src/app/components/segmented-control.tsx",
         "src/app/components/stepper-field.tsx",
+        "src/app/components/textarea.tsx",
+        "src/app/components/time-input.tsx",
         "src/app/data/hdsEditorial.tsx",
         "src/app/design-system/generated-token-descriptions.ts",
-        "src/app/pages/docs/patterns/_template.tsx",
-        "src/app/pages/docs/patterns/HdsField.tsx",
-        "src/app/pages/sketches/private/CombatArenaLayout.tsx",
-        "src/stories/input.stories.tsx"
+        "src/stories/combobox.stories.tsx",
+        "src/stories/input.stories.tsx",
+        "src/stories/patterns-layout.stories.tsx",
+        "src/stories/textarea.stories.tsx"
       ],
       "tokenMapping": {
         "Surface fill": "role.background",
@@ -2074,15 +2127,8 @@
         "disabledText": "role.muted-foreground"
       },
       "figmaPropertyMapping": {
-        "type": "Type",
         "size": "Size",
-        "label": "Label",
-        "placeholder": "Placeholder",
-        "helperText": "Helper text",
-        "error": "Error",
-        "errorMessage": "Error message",
-        "disabled": "Disabled",
-        "loading": "Loading"
+        "label": "Label"
       },
       "states": [
         "default",
@@ -2162,38 +2208,6 @@
           "sourceProp": "label",
           "boundTo": "characters",
           "targetSelector": "Label"
-        },
-        {
-          "name": "Placeholder",
-          "type": "TEXT",
-          "defaultValue": "Placeholder",
-          "sourceProp": "placeholder",
-          "boundTo": "characters",
-          "targetSelector": "Placeholder"
-        },
-        {
-          "name": "Helper text",
-          "type": "TEXT",
-          "defaultValue": "Helper text",
-          "sourceProp": "helperText",
-          "boundTo": "characters",
-          "targetSelector": "Helper"
-        },
-        {
-          "name": "Error",
-          "type": "BOOLEAN",
-          "defaultValue": false,
-          "sourceProp": "error",
-          "boundTo": "visibility",
-          "targetSelector": "Error"
-        },
-        {
-          "name": "Error message",
-          "type": "TEXT",
-          "defaultValue": "Error message",
-          "sourceProp": "errorMessage",
-          "boundTo": "characters",
-          "targetSelector": "Error"
         }
       ],
       "slots": [
@@ -2244,7 +2258,7 @@
       ],
       "tier": "primitive",
       "docExempt": false,
-      "figmaLink": "TODO:hds-master:Input"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20"
     },
     "NavGroup": {
       "category": "Navigation",
@@ -2253,7 +2267,7 @@
       "hidden": false,
       "filePath": "src/app/components/nav-group.tsx",
       "description": "NavGroup - labeled navigation group for stacks of nav items.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304",
       "figmaId": null,
       "preview": {
         "exportName": "NavGroup",
@@ -2352,7 +2366,7 @@
         }
       ],
       "sourcePath": "src/app/components/NavGroup.tsx",
-      "figmaLink": "TODO:hds-master:NavGroup"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304"
     },
     "NavItem": {
       "category": "Navigation",
@@ -2361,7 +2375,7 @@
       "hidden": false,
       "filePath": "src/app/components/nav-item.tsx",
       "description": "NavItem - navigation row primitive for sidebars, table of contents, and list navigation.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258",
       "figmaId": null,
       "preview": {
         "exportName": "NavItem",
@@ -2426,7 +2440,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/NavItem.tsx",
-      "figmaLink": "TODO:hds-master:NavItem"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258"
     },
     "SegmentedControl": {
       "category": "Inputs",
@@ -2435,7 +2449,7 @@
       "hidden": false,
       "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.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334",
       "figmaId": null,
       "preview": {
         "exportName": "SegmentedControl",
@@ -2525,7 +2539,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/SegmentedControl.tsx",
-      "figmaLink": "TODO:hds-master:SegmentedControl"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334"
     },
     "Sketch": {
       "category": "Layout",
@@ -2595,7 +2609,7 @@
         }
       ],
       "sourcePath": "src/app/components/Sketch.tsx",
-      "figmaLink": "TODO:hds-master:Sketch"
+      "figmaLink": null
     },
     "Stack": {
       "category": "Layout",
@@ -2784,7 +2798,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/Stack.tsx",
-      "figmaLink": "TODO:hds-master:Stack"
+      "figmaLink": null
     },
     "StepperField": {
       "category": "Inputs",
@@ -2793,7 +2807,7 @@
       "hidden": false,
       "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.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425",
       "figmaId": null,
       "preview": {
         "exportName": "StepperField",
@@ -2875,7 +2889,7 @@
         }
       ],
       "sourcePath": "src/app/components/StepperField.tsx",
-      "figmaLink": "TODO:hds-master:StepperField"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425"
     },
     "Table": {
       "category": "Display",
@@ -2884,7 +2898,7 @@
       "hidden": false,
       "filePath": "src/app/components/table.tsx",
       "description": "Table - structured data table primitive for documentation and compact UI matrices.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300",
       "figmaId": null,
       "preview": {
         "exportName": "Table",
@@ -2961,7 +2975,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/Table.tsx",
-      "figmaLink": "TODO:hds-master:Table"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300"
     },
     "Tag": {
       "category": "Inputs",
@@ -2970,7 +2984,7 @@
       "hidden": false,
       "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.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11",
       "figmaId": null,
       "preview": {
         "exportName": "Tag",
@@ -3000,6 +3014,7 @@
         "src/app/components/visually-hidden.tsx",
         "src/app/data/hdsEditorial.tsx",
         "src/app/design-system/generated-token-descriptions.ts",
+        "src/stories/static-primitives.stories.tsx",
         "src/stories/tag.stories.tsx"
       ],
       "tokenMapping": {
@@ -3119,7 +3134,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/Tag.tsx",
-      "figmaLink": "TODO:hds-master:Tag"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11"
     },
     "Token": {
       "category": "Display",
@@ -3158,6 +3173,7 @@
         "src/stories/heading-stack.stories.tsx",
         "src/stories/input.stories.tsx",
         "src/stories/patterns-layout.stories.tsx",
+        "src/stories/stacked-card-rail.stories.tsx",
         "src/stories/status-list-item.stories.tsx",
         "src/stories/table.stories.tsx",
         "src/stories/tabs.stories.tsx",
@@ -3277,7 +3293,7 @@
       "tier": "primitive",
       "docExempt": false,
       "sourcePath": "src/app/components/Token.tsx",
-      "figmaLink": "TODO:hds-master:Token"
+      "figmaLink": null
     },
     "Surface": {
       "category": "Layout",
@@ -3286,7 +3302,7 @@
       "hidden": false,
       "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>",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-27",
       "figmaId": null,
       "preview": {
         "exportName": "Surface",
@@ -3365,7 +3381,7 @@
       "tier": "primitive",
       "docExempt": true,
       "sourcePath": "src/app/components/Surface.tsx",
-      "figmaLink": "TODO:hds-master:Surface",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-27",
       "states": [
         "default"
       ]
@@ -3376,8 +3392,8 @@
       "governedCategory": true,
       "hidden": false,
       "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.",
-      "figmaUrl": null,
+      "description": "Tagged per-export, not on the file block: this module exports eight components and a file-level @figma would hand all eight this one node.",
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11",
       "figmaId": null,
       "consumers": [
         "src/app/components/doc-link-card.tsx",
@@ -3391,7 +3407,8 @@
         "src/app/data/hdsEditorial.tsx",
         "src/app/design-system/generated-token-descriptions.ts",
         "src/stories/card.stories.tsx",
-        "src/stories/grid.stories.tsx"
+        "src/stories/grid.stories.tsx",
+        "src/stories/static-primitives.stories.tsx"
       ],
       "tokenMapping": {
         "Surface fill": "role.card",
@@ -3430,6 +3447,29 @@
           "type": "boolean",
           "default": false
         },
+        "variant": {
+          "type": "enum",
+          "values": [
+            "default",
+            "accent"
+          ],
+          "default": "default"
+        },
+        "tone": {
+          "type": "enum",
+          "values": [
+            "neutral",
+            "danger",
+            "success",
+            "warning",
+            "info"
+          ],
+          "default": "neutral"
+        },
+        "bordered": {
+          "type": "boolean",
+          "default": false
+        },
         "className": {
           "type": "string",
           "optional": true
@@ -3447,7 +3487,9 @@
       },
       "figmaPropertyMapping": {
         "padding": "Padding",
-        "gap": "Gap"
+        "gap": "Gap",
+        "variant": "Variant",
+        "tone": "Tone"
       },
       "states": [
         "default"
@@ -3455,71 +3497,30 @@
       "allowedChildren": [
         "*"
       ],
-      "propConstraints": {
-        "padding": {
-          "type": "enum",
-          "values": [
-            "component",
-            "item",
-            "none",
-            "px24",
-            "px16"
-          ]
-        },
-        "gap": {
-          "type": "enum",
-          "values": [
-            "tight",
-            "normal",
-            "inset",
-            "spacious"
-          ]
-        },
-        "noPadding": {
-          "type": "boolean"
-        },
-        "className": {
-          "type": "string"
-        },
-        "layout": {
-          "type": "enum",
-          "values": [
-            "VERTICAL",
-            "HORIZONTAL"
-          ]
-        },
-        "fill": {
-          "type": "string"
-        },
-        "stroke": {
-          "type": "string"
-        },
-        "radius": {
-          "type": "string"
-        }
-      },
-      "requiredProps": [
-        "children"
-      ],
-      "a11yRules": [],
-      "preview": {
-        "exportName": "Card",
-        "sizing": "panel"
-      },
-      "variantAxes": [
-        "padding"
-      ],
-      "componentProperties": [],
-      "slots": [
-        {
-          "name": "background",
-          "figmaSlotName": "Background",
-          "tokenBinding": {
-            "fill": "role.card",
-            "stroke": "role.border",
-            "cornerRadius": "role.radius",
-            "gap": "semantic.space.layout.tight"
-          }
+      "requiredProps": [
+        "children"
+      ],
+      "a11yRules": [],
+      "preview": {
+        "exportName": "Card",
+        "sizing": "panel"
+      },
+      "variantAxes": [
+        "padding",
+        "variant",
+        "tone"
+      ],
+      "componentProperties": [],
+      "slots": [
+        {
+          "name": "background",
+          "figmaSlotName": "Background",
+          "tokenBinding": {
+            "fill": "role.card",
+            "stroke": "role.border",
+            "cornerRadius": "role.radius",
+            "gap": "semantic.space.layout.tight"
+          }
         },
         {
           "name": "header",
@@ -3566,7 +3567,57 @@
         "Body",
         "Footer"
       ],
-      "figmaLink": "TODO:hds-master:Card"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11",
+      "propConstraints": {
+        "as": {
+          "type": "string"
+        },
+        "padding": {
+          "type": "enum",
+          "values": [
+            "component",
+            "item",
+            "none",
+            "px24",
+            "px16"
+          ]
+        },
+        "gap": {
+          "type": "enum",
+          "values": [
+            "tight",
+            "normal",
+            "inset",
+            "spacious"
+          ]
+        },
+        "noPadding": {
+          "type": "boolean"
+        },
+        "variant": {
+          "type": "enum",
+          "values": [
+            "default",
+            "accent"
+          ]
+        },
+        "tone": {
+          "type": "enum",
+          "values": [
+            "neutral",
+            "danger",
+            "success",
+            "warning",
+            "info"
+          ]
+        },
+        "bordered": {
+          "type": "boolean"
+        },
+        "className": {
+          "type": "string"
+        }
+      }
     },
     "ComponentInstanceMatrix": {
       "category": "Utilities",
@@ -3598,7 +3649,7 @@
       "variantAxes": [],
       "componentProperties": [],
       "sourcePath": "src/app/components/ComponentInstanceMatrix.tsx",
-      "figmaLink": "TODO:hds-master:ComponentInstanceMatrix"
+      "figmaLink": null
     },
     "SpecimenBlock": {
       "category": "Utilities",
@@ -3630,15 +3681,15 @@
       "variantAxes": [],
       "componentProperties": [],
       "sourcePath": "src/app/components/SpecimenBlock.tsx",
-      "figmaLink": "TODO:hds-master:SpecimenBlock"
+      "figmaLink": null
     },
     "ActivityFeed": {
-      "category": "Uncategorized",
-      "categorySource": "missing-jsdoc",
-      "governedCategory": false,
+      "category": "Display",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
       "hidden": false,
       "filePath": "src/app/components/activity-feed.tsx",
-      "description": "ActivityFeed — chronological event log using whitespace as the sole separator between items. Use for timeline views and system audit trails; reach for Table when columnar comparison matters. Enforces 48px gap (space.12) between events and semantic typography roles throughout.",
+      "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)",
       "figmaUrl": null,
       "figmaId": null,
       "preview": {
@@ -3706,7 +3757,7 @@
         }
       ],
       "sourcePath": "src/app/components/ActivityFeed.tsx",
-      "figmaLink": "TODO:hds-master:ActivityFeed"
+      "figmaLink": null
     },
     "HeadingStack": {
       "category": "Typography",
@@ -3768,12 +3819,12 @@
           "targetSelector": "Heading"
         },
         {
-          "name": "Subtext",
+          "name": "Subheading",
           "type": "TEXT",
-          "defaultValue": "Supporting subtext",
-          "sourceProp": "subtext",
+          "defaultValue": "Supporting subheading",
+          "sourceProp": "subheading",
           "boundTo": "characters",
-          "targetSelector": "Subtext"
+          "targetSelector": "Subheading"
         }
       ],
       "states": [
@@ -3805,7 +3856,7 @@
       "tier": "primitive",
       "docExempt": true,
       "sourcePath": "src/app/components/HeadingStack.tsx",
-      "figmaLink": "TODO:hds-master:HeadingStack"
+      "figmaLink": null
     },
     "HdsSystemDocLayout": {
       "category": "Uncategorized",
@@ -3975,7 +4026,7 @@
       "tier": "primitive",
       "docExempt": true,
       "sourcePath": "src/app/components/Text.tsx",
-      "figmaLink": "TODO:hds-master:Text"
+      "figmaLink": null
     },
     "Dialog": {
       "category": "Overlays",
@@ -3984,8 +4035,8 @@
       "hidden": false,
       "docExempt": true,
       "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.",
-      "figmaUrl": null,
+      "description": "Tagged per-export, not on the file block: this module exports ten components and a file-level @figma would hand all ten this one node.",
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27",
       "figmaId": null,
       "tier": "primitive",
       "preview": {
@@ -4015,7 +4066,7 @@
           "name": "Title",
           "type": "TEXT",
           "defaultValue": "Dialog title",
-          "sourceProp": "title",
+          "sourceProp": "Title.children",
           "boundTo": "characters",
           "targetSelector": "Title"
         },
@@ -4023,15 +4074,15 @@
           "name": "Description",
           "type": "TEXT",
           "defaultValue": "Dialog description",
-          "sourceProp": "description",
+          "sourceProp": "Description.children",
           "boundTo": "characters",
           "targetSelector": "Description"
         },
         {
-          "name": "Hide close",
+          "name": "Show close",
           "type": "BOOLEAN",
-          "defaultValue": false,
-          "sourceProp": "hideClose",
+          "defaultValue": true,
+          "sourceProp": "Content.hideClose",
           "boundTo": "visibility",
           "targetSelector": "Close",
           "invert": true
@@ -4052,18 +4103,6 @@
           "type": "boolean",
           "default": true
         },
-        "title": {
-          "type": "string",
-          "optional": true
-        },
-        "description": {
-          "type": "string",
-          "optional": true
-        },
-        "hideClose": {
-          "type": "boolean",
-          "default": false
-        },
         "children": {
           "type": "ReactNode"
         }
@@ -4081,9 +4120,9 @@
         "focusRing": "role.ring"
       },
       "figmaPropertyMapping": {
-        "title": "Title",
-        "description": "Description",
-        "hideClose": "Hide close",
+        "Title.children": "Title",
+        "Description.children": "Description",
+        "Content.hideClose": "Show close",
         "modal": "Modal"
       },
       "states": [
@@ -4148,26 +4187,6 @@
       "allowedChildren": [
         "*"
       ],
-      "propConstraints": {
-        "open": {
-          "type": "boolean"
-        },
-        "defaultOpen": {
-          "type": "boolean"
-        },
-        "modal": {
-          "type": "boolean"
-        },
-        "title": {
-          "type": "string"
-        },
-        "description": {
-          "type": "string"
-        },
-        "hideClose": {
-          "type": "boolean"
-        }
-      },
       "requiredProps": [
         "children"
       ],
@@ -4192,7 +4211,18 @@
         "Description",
         "Close"
       ],
-      "figmaLink": "TODO:hds-master:Dialog"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27",
+      "propConstraints": {
+        "open": {
+          "type": "boolean"
+        },
+        "defaultOpen": {
+          "type": "boolean"
+        },
+        "modal": {
+          "type": "boolean"
+        }
+      }
     },
     "StackedCardRail": {
       "category": "Display",
@@ -4204,13 +4234,15 @@
       "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(+ *)).",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:StackedCardRail",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "StackedCardRail",
         "sizing": "panel"
       },
-      "consumers": [],
+      "consumers": [
+        "src/stories/stacked-card-rail.stories.tsx"
+      ],
       "tokenMapping": {},
       "variantAxes": [],
       "componentProperties": [],
@@ -4235,9 +4267,9 @@
       "docExempt": false,
       "filePath": "src/app/components/button.tsx",
       "description": "Triggers an action when activated.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Button",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138",
       "tier": "primitive",
       "preview": {
         "exportName": "Button",
@@ -4245,40 +4277,58 @@
       },
       "consumers": [
         "src/app/components/activity-feed.tsx",
+        "src/app/components/alert-dialog.tsx",
         "src/app/components/animated-label.tsx",
         "src/app/components/api-reference.tsx",
-        "src/app/components/approval-card.tsx",
-        "src/app/components/ComponentDocPage.tsx",
+        "src/app/components/button-group.test.tsx",
+        "src/app/components/button-group.tsx",
+        "src/app/components/card.tsx",
         "src/app/components/componentPreviewRegistry.tsx",
         "src/app/components/dialog.tsx",
-        "src/app/components/doc-sections.tsx",
         "src/app/components/error-boundary.tsx",
         "src/app/components/error-pattern.tsx",
+        "src/app/components/form.tsx",
         "src/app/components/icon-button.tsx",
         "src/app/components/image-lightbox.tsx",
+        "src/app/components/menu.tsx",
+        "src/app/components/multi-selector.tsx",
+        "src/app/components/pagination.tsx",
+        "src/app/components/popover.tsx",
+        "src/app/components/segmented-control.tsx",
         "src/app/components/sketch-controls.tsx",
+        "src/app/components/toast.tsx",
+        "src/app/components/toolbar.test.tsx",
+        "src/app/components/toolbar.tsx",
         "src/app/components/variant-strip.tsx",
         "src/app/context/DemoStateContext.tsx",
-        "src/app/data/projects.ts",
         "src/app/design-system/generated-token-descriptions.ts",
-        "src/app/design-system/searchIndex.ts",
-        "src/app/lab/shadcn-spike/Button.tsx",
-        "src/app/lab/shadcn-spike/page.tsx",
-        "src/app/pages/admin/ApprovalDetail.tsx",
-        "src/app/pages/docs/patterns/HdsActivityFeed.tsx",
-        "src/app/pages/docs/patterns/HdsIconButton.tsx",
-        "src/app/pages/sketches/private/MetaballsLayout.tsx",
-        "src/app/pages/sketches/private/ShapeExplorerLayout.tsx",
-        "src/app/pages/sketches/private/WaveBackgroundLayout.tsx",
+        "src/form/index.ts",
+        "src/mui/index.ts",
+        "src/stories/alert-dialog.stories.tsx",
+        "src/stories/button-group.stories.tsx",
         "src/stories/button.stories.tsx",
+        "src/stories/code-block.stories.tsx",
+        "src/stories/combobox.stories.tsx",
+        "src/stories/dialog.stories.tsx",
+        "src/stories/form.stories.tsx",
+        "src/stories/hds-tooltip.stories.tsx",
         "src/stories/icon-button.stories.tsx",
+        "src/stories/image-lightbox.stories.tsx",
         "src/stories/inline-code.stories.tsx",
+        "src/stories/menu.stories.tsx",
+        "src/stories/nav-group.stories.tsx",
+        "src/stories/patterns-layout.stories.tsx",
+        "src/stories/popover.stories.tsx",
         "src/stories/table.stories.tsx",
-        "src/stories/text-lockup.stories.tsx"
+        "src/stories/text-lockup.stories.tsx",
+        "src/stories/toast.stories.tsx",
+        "src/stories/toolbar.stories.tsx",
+        "src/stories/top-nav.stories.tsx"
       ],
       "tokenMapping": {},
       "variantAxes": [
         "variant",
+        "tone",
         "size",
         "state"
       ],
@@ -4292,7 +4342,7 @@
           "targetSelector": "Label"
         },
         {
-          "name": "Leading icon",
+          "name": "Show icon",
           "type": "BOOLEAN",
           "defaultValue": false,
           "sourceProp": "iconLeft",
@@ -4300,21 +4350,12 @@
           "targetSelector": "IconLeft"
         },
         {
-          "name": "Trailing icon",
+          "name": "Show trail icon",
           "type": "BOOLEAN",
           "defaultValue": false,
           "sourceProp": "iconRight",
           "boundTo": "visibility",
           "targetSelector": "IconRight"
-        },
-        {
-          "name": "Show label",
-          "type": "BOOLEAN",
-          "defaultValue": true,
-          "sourceProp": "iconOnly",
-          "boundTo": "visibility",
-          "targetSelector": "Label",
-          "invert": true
         }
       ],
       "sourcePath": "src/app/components/button.tsx",
@@ -4329,6 +4370,17 @@
           ],
           "default": "secondary"
         },
+        "tone": {
+          "type": "enum",
+          "values": [
+            "neutral",
+            "danger",
+            "success",
+            "warning",
+            "info"
+          ],
+          "default": "neutral"
+        },
         "size": {
           "type": "enum",
           "values": [
@@ -4374,13 +4426,11 @@
       },
       "figmaPropertyMapping": {
         "variant": "Variant",
+        "tone": "Tone",
         "size": "Size",
-        "disabled": "Disabled",
-        "loading": "Loading",
         "label": "Label",
-        "iconLeft": "Leading icon",
-        "iconRight": "Trailing icon",
-        "iconOnly": "Icon only"
+        "iconLeft": "Show icon",
+        "iconRight": "Show trail icon"
       },
       "states": [
         "default",
@@ -4391,6 +4441,17 @@
         "loading"
       ],
       "allowedChildren": [],
+      "requiredProps": [],
+      "a11yRules": [
+        {
+          "rule": "Must have accessible name via label prop or aria-label",
+          "required": true
+        },
+        {
+          "rule": "Focus ring visible in all interactive states (uses hds-focus class)",
+          "required": true
+        }
+      ],
       "propConstraints": {
         "variant": {
           "type": "enum",
@@ -4400,6 +4461,16 @@
             "tertiary"
           ]
         },
+        "tone": {
+          "type": "enum",
+          "values": [
+            "neutral",
+            "danger",
+            "success",
+            "warning",
+            "info"
+          ]
+        },
         "size": {
           "type": "enum",
           "values": [
@@ -4420,18 +4491,7 @@
         "iconOnly": {
           "type": "boolean"
         }
-      },
-      "requiredProps": [],
-      "a11yRules": [
-        {
-          "rule": "Must have accessible name via label prop or aria-label",
-          "required": true
-        },
-        {
-          "rule": "Focus ring visible in all interactive states (uses hds-focus class)",
-          "required": true
-        }
-      ]
+      }
     },
     "Callout": {
       "category": "Feedback",
@@ -4441,9 +4501,9 @@
       "docExempt": false,
       "filePath": "src/app/components/callout.tsx",
       "description": "Tone-driven side-rule callout for status, quotes, hypotheses.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Callout",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85",
       "tier": "primitive",
       "preview": {
         "exportName": "Callout",
@@ -4506,9 +4566,9 @@
       "docExempt": false,
       "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.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:EmptyState",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352",
       "tier": "primitive",
       "preview": {
         "exportName": "EmptyState",
@@ -4550,9 +4610,9 @@
       "docExempt": false,
       "filePath": "src/app/components/field.tsx",
       "description": "Caption label paired with a value — used in metadata grids and read-only forms.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Field",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81",
       "tier": "primitive",
       "preview": {
         "exportName": "Field",
@@ -4634,7 +4694,7 @@
       "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>",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Page",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Page",
@@ -4701,9 +4761,9 @@
       "docExempt": false,
       "filePath": "src/app/components/stat.tsx",
       "description": "Headline metric — large value, uppercase caption label, optional sub-line.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Stat",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247",
       "tier": "primitive",
       "preview": {
         "exportName": "Stat",
@@ -4771,9 +4831,9 @@
       "docExempt": false,
       "filePath": "src/app/components/status-list-item.tsx",
       "description": "Status dot + title row with optional muted notes and trailing slot (e.g. badge).",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:StatusListItem",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350",
       "tier": "pattern",
       "preview": {
         "exportName": "StatusListItem",
@@ -4841,9 +4901,9 @@
       "docExempt": false,
       "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.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:StatusTile",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292",
       "tier": "pattern",
       "preview": {
         "exportName": "StatusTile",
@@ -4897,7 +4957,7 @@
       "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.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:TileGrid",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "TileGrid",
@@ -4961,9 +5021,9 @@
       "governedCategory": true,
       "hidden": false,
       "docExempt": false,
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Badge",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15",
       "tier": "primitive",
       "preview": {
         "exportName": "Badge",
@@ -4983,12 +5043,15 @@
         "src/stories/component-instance-matrix.stories.tsx",
         "src/stories/nav-group.stories.tsx",
         "src/stories/patterns-layout.stories.tsx",
+        "src/stories/static-primitives.stories.tsx",
         "src/stories/table.stories.tsx"
       ],
       "tokenMapping": {}
     },
     "TextLockup": {
-      "variantAxes": [],
+      "variantAxes": [
+        "size"
+      ],
       "componentProperties": [
         {
           "name": "Eyebrow",
@@ -5032,7 +5095,7 @@
       "docExempt": false,
       "figmaUrl": null,
       "figmaId": "text-lockup-pattern",
-      "figmaLink": "TODO:hds-master:TextLockup",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "TextLockup",
@@ -5054,7 +5117,7 @@
       "description": "AssetImg - responsive asset frame with fallback placeholder handling. Contexts: default, lightbox, and detail.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:AssetImg",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "AssetImg",
@@ -5062,10 +5125,11 @@
       },
       "consumers": [
         "src/app/components/componentPreviewRegistry.tsx",
+        "src/app/components/hds-tooltip.tsx",
         "src/app/components/image-lightbox.tsx",
-        "src/app/components/info-page.tsx",
         "src/app/components/tooltip.tsx",
-        "src/app/data/hdsEditorial.tsx"
+        "src/app/data/hdsEditorial.tsx",
+        "src/stories/asset-img.stories.tsx"
       ],
       "tokenMapping": {},
       "variantAxes": [],
@@ -5215,10 +5279,10 @@
       "hidden": false,
       "docExempt": false,
       "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).",
-      "figmaUrl": null,
+      "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 @figma would silently claim this node for all four.",
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Tabs",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89",
       "tier": "primitive",
       "preview": {
         "exportName": "Tabs",
@@ -5254,7 +5318,7 @@
       "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).",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:TabsContent",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "TabsContent",
@@ -5289,7 +5353,7 @@
       "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).",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:TabsList",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "TabsList",
@@ -5324,7 +5388,7 @@
       "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).",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:TabsTrigger",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "TabsTrigger",
@@ -5356,7 +5420,7 @@
       "hidden": false,
       "filePath": "src/app/components/radio.tsx",
       "description": "HdsRadio — radio button with animated selection indicator.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17",
       "figmaId": null,
       "preview": {
         "exportName": "HdsRadio",
@@ -5405,16 +5469,16 @@
       "componentProperties": [],
       "tier": "primitive",
       "docExempt": false,
-      "figmaLink": "TODO:hds-master:HdsRadio"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17"
     },
     "HdsSelect": {
-      "category": "Uncategorized",
-      "categorySource": "missing-jsdoc",
-      "governedCategory": false,
+      "category": "Inputs",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
       "hidden": false,
       "filePath": "src/app/components/select.tsx",
-      "description": "Controls — shared input/control primitives.",
-      "figmaUrl": null,
+      "description": "HdsSelect — dropdown selector built on Radix Select.",
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49",
       "figmaId": null,
       "preview": {
         "exportName": "HdsSelect",
@@ -5463,7 +5527,7 @@
       "componentProperties": [],
       "tier": "primitive",
       "docExempt": false,
-      "figmaLink": "TODO:hds-master:HdsSelect"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49"
     },
     "HdsSlider": {
       "category": "Inputs",
@@ -5472,7 +5536,7 @@
       "hidden": false,
       "filePath": "src/app/components/slider.tsx",
       "description": "HdsSlider — range slider with label and value display.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265",
       "figmaId": null,
       "preview": {
         "exportName": "HdsSlider",
@@ -5521,7 +5585,7 @@
       "componentProperties": [],
       "tier": "primitive",
       "docExempt": false,
-      "figmaLink": "TODO:hds-master:HdsSlider"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265"
     },
     "HdsToggle": {
       "category": "Inputs",
@@ -5530,7 +5594,7 @@
       "hidden": false,
       "filePath": "src/app/components/toggle.tsx",
       "description": "HdsToggle — boolean on/off toggle with animated thumb.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19",
       "figmaId": null,
       "preview": {
         "exportName": "HdsToggle",
@@ -5581,7 +5645,7 @@
       "componentProperties": [],
       "tier": "primitive",
       "docExempt": false,
-      "figmaLink": "TODO:hds-master:HdsToggle"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19"
     },
     "Avatar": {
       "category": "Display",
@@ -5591,9 +5655,9 @@
       "docExempt": false,
       "filePath": "src/app/components/avatar.tsx",
       "description": "Circular avatar. Renders the image when available, else initials from `alt`.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Avatar",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18",
       "tier": "primitive",
       "preview": {
         "exportName": "Avatar",
@@ -5607,7 +5671,9 @@
         "src/stories/avatar.stories.tsx"
       ],
       "tokenMapping": {},
-      "variantAxes": [],
+      "variantAxes": [
+        "size"
+      ],
       "componentProperties": [],
       "props": {
         "alt": {
@@ -5646,9 +5712,9 @@
       "docExempt": false,
       "filePath": "src/app/components/progress.tsx",
       "description": "Linear progress. Determinate when `value` is a number, else indeterminate.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Progress",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91",
       "tier": "primitive",
       "preview": {
         "exportName": "Progress",
@@ -5657,6 +5723,7 @@
       "consumers": [
         "src/app/components/card.tsx",
         "src/app/components/progress.test.tsx",
+        "src/stories/card.stories.tsx",
         "src/stories/circular-progress.stories.tsx",
         "src/stories/progress.stories.tsx",
         "src/stories/table.stories.tsx"
@@ -5698,9 +5765,9 @@
       "docExempt": false,
       "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.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Skeleton",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95",
       "tier": "primitive",
       "preview": {
         "exportName": "Skeleton",
@@ -5749,9 +5816,9 @@
       "docExempt": false,
       "filePath": "src/app/components/spinner.tsx",
       "description": "Indeterminate spinner. Inherits the surrounding text color via currentColor.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Spinner",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106",
       "tier": "primitive",
       "preview": {
         "exportName": "Spinner",
@@ -5794,9 +5861,9 @@
       "docExempt": false,
       "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\".",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Breadcrumb",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159",
       "tier": "pattern",
       "preview": {
         "exportName": "Breadcrumb",
@@ -5834,9 +5901,9 @@
       "docExempt": false,
       "filePath": "src/app/components/pagination.tsx",
       "description": "Paged navigation with first/last anchors, sibling pages, and ellipses.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Pagination",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194",
       "tier": "pattern",
       "preview": {
         "exportName": "Pagination",
@@ -5896,11 +5963,12 @@
       "categorySource": "jsdoc",
       "governedCategory": true,
       "docExempt": false,
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:HdsCheckbox",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29",
       "consumers": [
         "src/app/components/checkbox.test.tsx",
+        "src/app/components/radio.tsx",
         "src/stories/checkbox.stories.tsx"
       ],
       "variantAxes": [],
@@ -5914,9 +5982,9 @@
       "docExempt": true,
       "filePath": "src/app/components/toast.tsx",
       "description": "Provider + viewport for the toast system. Wrap the app root once.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:ToastProvider",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367",
       "tier": "pattern",
       "preview": {
         "exportName": "ToastProvider",
@@ -5954,9 +6022,9 @@
       "docExempt": true,
       "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\" />",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Combobox",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237",
       "tier": "pattern",
       "preview": {
         "exportName": "Combobox",
@@ -6022,10 +6090,10 @@
       "hidden": false,
       "docExempt": true,
       "filePath": "src/app/components/form.tsx",
-      "description": "Styled `<form>` with consistent vertical field rhythm.",
-      "figmaUrl": null,
+      "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 @figma would claim this one for all three.",
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94",
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Form",
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94",
       "tier": "pattern",
       "preview": {
         "exportName": "Form",
@@ -6061,7 +6129,7 @@
       "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.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:FormField",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "FormField",
@@ -6122,7 +6190,7 @@
       "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.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:FormFieldShell",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "FormFieldShell",
@@ -6178,7 +6246,7 @@
       "description": "Renders a `data-hds` scope wrapper that carries the four theming dials as root attributes + CSS vars, and exposes them to `useHdsTheme()`.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:HdsThemeProvider",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "HdsThemeProvider",
@@ -6250,14 +6318,13 @@
       "description": "Renders up to `max` overlapping avatars followed by a `+N` overflow chip.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:AvatarGroup",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "AvatarGroup",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/avatar-group.figma.tsx",
         "src/app/components/avatar-group.test.tsx",
         "src/stories/avatar-group.stories.tsx"
       ],
@@ -6294,14 +6361,13 @@
       "description": "A quoted passage; pass `cite` for the source URL and `attribution` for a byline.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Blockquote",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Blockquote",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/blockquote.figma.tsx",
         "src/app/components/blockquote.test.tsx",
         "src/stories/blockquote.stories.tsx"
       ],
@@ -6340,14 +6406,13 @@
       "description": "Groups Button (or button-like) children into a single attached segment.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:ButtonGroup",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "ButtonGroup",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/button-group.figma.tsx",
         "src/app/components/button-group.test.tsx",
         "src/stories/button-group.stories.tsx"
       ],
@@ -6381,14 +6446,13 @@
       "description": "A single-line input with optional `leading`/`trailing` adornments.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:InputGroup",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "InputGroup",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/input-group.figma.tsx",
         "src/app/components/input-group.test.tsx",
         "src/stories/input-group.stories.tsx"
       ],
@@ -6435,14 +6499,13 @@
       "description": "Renders a keyboard key or shortcut token, e.g. `<Kbd>⌘K</Kbd>`.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Kbd",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Kbd",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/kbd.figma.tsx",
         "src/app/components/kbd.test.tsx",
         "src/stories/kbd.stories.tsx"
       ],
@@ -6477,14 +6540,13 @@
       "description": "A small solid dot conveying a semantic status via `tone`.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:StatusDot",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "StatusDot",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/status-dot.figma.tsx",
         "src/app/components/status-dot.test.tsx",
         "src/stories/status-dot.stories.tsx"
       ],
@@ -6535,14 +6597,13 @@
       "description": "Presents a date/time with a machine-readable `dateTime` for accessibility.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Timestamp",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Timestamp",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/timestamp.figma.tsx",
         "src/app/components/timestamp.test.tsx",
         "src/stories/timestamp.stories.tsx"
       ],
@@ -6589,14 +6650,13 @@
       "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.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:VisuallyHidden",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "VisuallyHidden",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/visually-hidden.figma.tsx",
         "src/app/components/visually-hidden.test.tsx",
         "src/stories/visually-hidden.stories.tsx"
       ],
@@ -6626,14 +6686,13 @@
       "description": "A circular progress ring; pass `value`/`max` or set `indeterminate`.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:CircularProgress",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "CircularProgress",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/circular-progress.figma.tsx",
         "src/app/components/circular-progress.test.tsx",
         "src/stories/circular-progress.stories.tsx"
       ],
@@ -6681,10 +6740,9 @@
       "hidden": false,
       "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.",
-      "figmaUrl": null,
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332",
       "figmaId": null,
       "consumers": [
-        "src/app/components/side-nav.figma.tsx",
         "src/app/components/side-nav.test.tsx",
         "src/stories/side-nav.stories.tsx"
       ],
@@ -6704,7 +6762,7 @@
       "docExempt": false,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:SideNav"
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332"
     },
     "CommandPalette": {
       "category": "Overlays",
@@ -6716,14 +6774,13 @@
       "description": "Mountable trigger + dialog. Drop into header slot; component manages its own open state and Cmd-K / Ctrl-K global keybinding.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:CommandPalette",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "CommandPalette",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/command-palette.figma.tsx",
         "src/app/data/nav-model.test.ts",
         "src/app/lib/hds-search.ts",
         "src/stories/command-palette.stories.tsx"
@@ -6754,14 +6811,13 @@
       "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.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Lightbox",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Lightbox",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/image-lightbox.figma.tsx",
         "src/app/components/image-lightbox.test.tsx",
         "src/app/data/hdsEditorial.tsx",
         "src/stories/asset-img.stories.tsx",
@@ -6822,14 +6878,13 @@
       "description": "Renders a header/sidebar/main application frame, e.g. `<AppShell sidebar={<Nav />}>...</AppShell>`.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:AppShell",
+      "figmaLink": null,
       "tier": "template",
       "preview": {
         "exportName": "AppShell",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/app-shell.figma.tsx",
         "src/app/components/app-shell.test.tsx",
         "src/stories/app-shell.stories.tsx"
       ],
@@ -6854,14 +6909,13 @@
       "description": "A dashed dropzone that opens the native file picker or accepts a drag-and-drop.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:FileInput",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "FileInput",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/file-input.figma.tsx",
         "src/app/components/file-input.test.tsx",
         "src/stories/file-input.stories.tsx"
       ],
@@ -6907,14 +6961,13 @@
       "description": "Renders object metadata as a semantic `<dl>` of term/description pairs.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:MetadataList",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "MetadataList",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/metadata-list.figma.tsx",
         "src/app/components/metadata-list.test.tsx",
         "src/stories/metadata-list.stories.tsx"
       ],
@@ -6951,14 +7004,13 @@
       "description": "Renders up to `max` children followed by a `+N` overflow chip (or custom node).",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:OverflowList",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "OverflowList",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/overflow-list.figma.tsx",
         "src/app/components/overflow-list.test.tsx",
         "src/stories/overflow-list.stories.tsx"
       ],
@@ -6995,14 +7047,13 @@
       "description": "A card-shaped single checkbox — click or activate to toggle selection.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:SelectableCard",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "SelectableCard",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/selectable-card.figma.tsx",
         "src/app/components/selectable-card.test.tsx",
         "src/stories/selectable-card.stories.tsx"
       ],
@@ -7040,14 +7091,13 @@
       "description": "A bordered field of Tag chips followed by a text input for adding more.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Tokenizer",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "Tokenizer",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/tokenizer.figma.tsx",
         "src/app/components/tokenizer.test.tsx",
         "src/stories/tokenizer.stories.tsx"
       ],
@@ -7091,14 +7141,13 @@
       "description": "Top navigation bar with brand, nav, and trailing action slots.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:TopNav",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "TopNav",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/top-nav.figma.tsx",
         "src/app/components/top-nav.test.tsx",
         "src/stories/top-nav.stories.tsx"
       ],
@@ -7140,14 +7189,13 @@
       "description": "Renders children as a snap-scrolling track with Prev/Next scroll buttons.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Carousel",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "Carousel",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/carousel.figma.tsx",
         "src/app/components/carousel.test.tsx",
         "src/stories/carousel.stories.tsx"
       ],
@@ -7184,14 +7232,13 @@
       "description": "Step indicator for multi-step flows. Purely presentational — no navigation.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Stepper",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "Stepper",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/stepper.figma.tsx",
         "src/app/components/stepper.test.tsx",
         "src/stories/stepper.stories.tsx"
       ],
@@ -7231,14 +7278,13 @@
       "description": "Toolbar root. Groups related controls with a single roving tab-stop. Supports the native `orientation` prop (`horizontal` | `vertical`).",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Toolbar",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "Toolbar",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/toolbar.figma.tsx",
         "src/app/components/toolbar.test.tsx",
         "src/stories/toolbar.stories.tsx"
       ],
@@ -7268,14 +7314,13 @@
       "description": "Renders a hierarchical `role=\"tree\"` list; nodes with children get an expand/collapse toggle.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:TreeList",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "TreeList",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/tree-list.figma.tsx",
         "src/app/components/tree-list.test.tsx",
         "src/stories/tree-list.stories.tsx"
       ],
@@ -7312,14 +7357,13 @@
       "description": "AlertDialog root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:AlertDialog",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "AlertDialog",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/alert-dialog.figma.tsx",
         "src/app/components/alert-dialog.test.tsx",
         "src/stories/alert-dialog.stories.tsx"
       ],
@@ -7344,14 +7388,13 @@
       "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.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:AspectRatio",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "AspectRatio",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/aspect-ratio.figma.tsx",
         "src/app/components/aspect-ratio.test.tsx",
         "src/app/components/frame.tsx",
         "src/stories/aspect-ratio.stories.tsx",
@@ -7387,14 +7430,13 @@
       "description": "Renders an accessible month grid; compose it inside a Popover for the date inputs.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Calendar",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Calendar",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/calendar.figma.tsx",
         "src/app/components/calendar.test.tsx",
         "src/app/components/date-input.tsx",
         "src/app/components/date-range-input.tsx",
@@ -7425,14 +7467,13 @@
       "description": "ContextMenu root + parts. Wrap the right-clickable area in `ContextMenu.Trigger`. Controlled via `onOpenChange`.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:ContextMenu",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "ContextMenu",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/context-menu.figma.tsx",
         "src/app/components/context-menu.test.tsx",
         "src/stories/context-menu.stories.tsx"
       ],
@@ -7457,14 +7498,13 @@
       "description": "Text field + calendar popover for picking a single date.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:DateInput",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "DateInput",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/date-input.figma.tsx",
         "src/app/components/date-input.test.tsx",
         "src/stories/date-input.stories.tsx"
       ],
@@ -7518,14 +7558,13 @@
       "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} />",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:DateRangeInput",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "DateRangeInput",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/date-range-input.figma.tsx",
         "src/app/components/date-range-input.test.tsx",
         "src/stories/date-range-input.stories.tsx"
       ],
@@ -7583,14 +7622,13 @@
       "description": "Text date field + calendar popover, paired with a native time field, producing one Date.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:DateTimeInput",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "DateTimeInput",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/date-time-input.figma.tsx",
         "src/app/components/date-time-input.test.tsx",
         "src/stories/date-time-input.stories.tsx"
       ],
@@ -7640,14 +7678,13 @@
       "description": "HoverCard root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`; tune timing with `openDelay`/`closeDelay`.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:HoverCard",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "HoverCard",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/hover-card.figma.tsx",
         "src/app/components/hover-card.test.tsx",
         "src/stories/hover-card.stories.tsx"
       ],
@@ -7672,14 +7709,13 @@
       "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} />",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:MultiSelector",
+      "figmaLink": null,
       "tier": "pattern",
       "preview": {
         "exportName": "MultiSelector",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/multi-selector.figma.tsx",
         "src/app/components/multi-selector.test.tsx",
         "src/stories/multi-selector.stories.tsx"
       ],
@@ -7726,7 +7762,7 @@
       "description": "A native time field skinned with HDS input chrome. Value is a `HH:mm` string.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:TimeInput",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "TimeInput",
@@ -7734,7 +7770,6 @@
       },
       "consumers": [
         "src/app/components/date-time-input.tsx",
-        "src/app/components/time-input.figma.tsx",
         "src/app/components/time-input.test.tsx",
         "src/stories/date-time-input.stories.tsx",
         "src/stories/time-input.stories.tsx"
@@ -7770,14 +7805,13 @@
       "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.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:ToggleButton",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "ToggleButton",
         "sizing": "panel"
       },
       "consumers": [
-        "src/app/components/toggle-button.figma.tsx",
         "src/app/components/toggle-button.test.tsx",
         "src/stories/toggle-button.stories.tsx"
       ],
@@ -7824,7 +7858,7 @@
       "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.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Box",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Box",
@@ -7841,6 +7875,7 @@
         "src/app/components/frame.tsx",
         "src/app/components/sidebar.tsx",
         "src/app/components/switcher.tsx",
+        "src/app/components/toggle.tsx",
         "src/stories/box.stories.tsx",
         "src/stories/patterns-layout.stories.tsx"
       ],
@@ -7878,7 +7913,7 @@
       "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).",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Bleed",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Bleed",
@@ -7944,7 +7979,7 @@
       "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/",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Center",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Center",
@@ -8013,7 +8048,7 @@
       "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/",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Cluster",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Cluster",
@@ -8092,7 +8127,7 @@
       "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/",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Cover",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Cover",
@@ -8168,7 +8203,7 @@
       "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/",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Frame",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Frame",
@@ -8230,7 +8265,7 @@
       "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/",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Sidebar",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Sidebar",
@@ -8310,7 +8345,7 @@
       "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/",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Switcher",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Switcher",
@@ -8375,7 +8410,7 @@
       "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.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Pin",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Pin",
@@ -8428,7 +8463,7 @@
       "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.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:Reveal",
+      "figmaLink": null,
       "tier": "primitive",
       "preview": {
         "exportName": "Reveal",
@@ -8477,27 +8512,62 @@
       "requiredProps": [],
       "a11yRules": []
     },
-    "HdsPhosphor": {
-      "category": "Compiler",
-      "filePath": "scripts/hds-jsx-compiler.mjs",
-      "description": "Compiler-recognized icon alias stub for JSX normalization.",
-      "hidden": true,
-      "tier": "utility",
-      "props": {},
-      "allowedChildren": [
-        "*"
+    "Textarea": {
+      "category": "Inputs",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": false,
+      "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.",
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14",
+      "figmaId": null,
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14",
+      "tier": "primitive",
+      "preview": {
+        "exportName": "Textarea",
+        "sizing": "panel"
+      },
+      "consumers": [
+        "src/stories/textarea.stories.tsx"
       ],
-      "propConstraints": {},
-      "requiredProps": [],
-      "a11yRules": []
-    },
-    "HdsFrame": {
-      "category": "Compiler",
-      "filePath": "scripts/hds-jsx-compiler.mjs",
-      "description": "Compiler-internal frame primitive stub for generated JSX validation.",
-      "hidden": true,
-      "tier": "utility",
-      "props": {},
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {
+        "className": {
+          "type": "string",
+          "optional": true
+        },
+        "disabled": {
+          "type": "boolean",
+          "optional": true
+        },
+        "error": {
+          "type": "boolean",
+          "optional": true
+        },
+        "errorMessage": {
+          "type": "string",
+          "optional": true
+        },
+        "helperText": {
+          "type": "string",
+          "optional": true
+        },
+        "label": {
+          "type": "string",
+          "optional": true
+        },
+        "resize": {
+          "type": "TextareaResize",
+          "default": "vertical"
+        },
+        "textareaClassName": {
+          "type": "string",
+          "optional": true
+        }
+      },
       "allowedChildren": [
         "*"
       ],
@@ -8505,12 +8575,26 @@
       "requiredProps": [],
       "a11yRules": []
     },
-    "HdsHeading": {
-      "category": "Compiler",
-      "filePath": "scripts/hds-jsx-compiler.mjs",
-      "description": "Compiler-recognized heading primitive stub for generated JSX validation.",
-      "hidden": true,
-      "tier": "utility",
+    "CardBody": {
+      "category": "Display",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": false,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "CardBody",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
       "props": {},
       "allowedChildren": [
         "*"
@@ -8519,12 +8603,26 @@
       "requiredProps": [],
       "a11yRules": []
     },
-    "HdsLabel": {
-      "category": "Compiler",
-      "filePath": "scripts/hds-jsx-compiler.mjs",
-      "description": "Compiler-recognized label primitive stub for generated JSX validation.",
-      "hidden": true,
-      "tier": "utility",
+    "CardDescription": {
+      "category": "Display",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": false,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "CardDescription",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
       "props": {},
       "allowedChildren": [
         "*"
@@ -8533,12 +8631,26 @@
       "requiredProps": [],
       "a11yRules": []
     },
-    "HdsCaption": {
-      "category": "Compiler",
-      "filePath": "scripts/hds-jsx-compiler.mjs",
-      "description": "Compiler-recognized caption primitive stub for generated JSX validation.",
-      "hidden": true,
-      "tier": "utility",
+    "CardFooter": {
+      "category": "Display",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": false,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "CardFooter",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
       "props": {},
       "allowedChildren": [
         "*"
@@ -8547,13 +8659,32 @@
       "requiredProps": [],
       "a11yRules": []
     },
-    "HdsChip": {
-      "category": "Compiler",
-      "filePath": "scripts/hds-jsx-compiler.mjs",
-      "description": "Compiler-recognized chip instance stub for generated JSX validation.",
-      "hidden": true,
-      "tier": "utility",
-      "props": {},
+    "CardHeader": {
+      "category": "Display",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": false,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "CardHeader",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {
+        "metadata": {
+          "type": "ReactNode",
+          "optional": true
+        }
+      },
       "allowedChildren": [
         "*"
       ],
@@ -8561,44 +8692,661 @@
       "requiredProps": [],
       "a11yRules": []
     },
-    "HdsAvatar": {
-      "category": "Compiler",
-      "filePath": "scripts/hds-jsx-compiler.mjs",
-      "description": "Compiler-recognized avatar instance stub for generated JSX validation.",
-      "hidden": true,
-      "tier": "utility",
-      "props": {},
+    "CardMetric": {
+      "category": "Display",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": false,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "CardMetric",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {
+        "label": {
+          "type": "ReactNode"
+        },
+        "sub": {
+          "type": "ReactNode",
+          "optional": true
+        },
+        "tone": {
+          "type": "enum",
+          "values": [
+            "neutral",
+            "danger",
+            "success",
+            "warning",
+            "info"
+          ],
+          "default": "neutral"
+        },
+        "value": {
+          "type": "ReactNode"
+        }
+      },
       "allowedChildren": [
         "*"
       ],
       "propConstraints": {},
       "requiredProps": [],
       "a11yRules": []
-    }
-  },
-  "utilities": {
-    "HdsPhosphor": {
-      "category": "Compiler",
-      "filePath": "scripts/hds-jsx-compiler.mjs",
-      "description": "Compiler-recognized icon alias stub for JSX normalization.",
-      "hidden": true,
-      "props": {},
-      "allowedChildren": [
-        "*"
-      ],
-      "propConstraints": {},
-      "requiredProps": [],
-      "a11yRules": [],
-      "preview": {},
-      "tokenMapping": {},
-      "tier": "utility"
     },
-    "HdsFrame": {
-      "category": "Compiler",
-      "filePath": "scripts/hds-jsx-compiler.mjs",
-      "description": "Layout primitive — vertical or horizontal flex container on the 8px grid. Padding and gap from {0,8,16,24,32,48,64}; surfaces use semantic.color.surface.* tokens, never raw hex. Structural frames are rectilinear (no border-radius); only Card-wrapping frames pick up semantic.radius.card.",
-      "hidden": true,
-      "props": {
+    "CardProgress": {
+      "category": "Display",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": false,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "CardProgress",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {
+        "label": {
+          "type": "ReactNode",
+          "optional": true
+        },
+        "max": {
+          "type": "number",
+          "default": 100
+        },
+        "tone": {
+          "type": "enum",
+          "values": [
+            "neutral",
+            "danger",
+            "success",
+            "warning",
+            "info"
+          ],
+          "default": "neutral"
+        },
+        "value": {
+          "type": "number"
+        }
+      },
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "CardTitle": {
+      "category": "Display",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": false,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "CardTitle",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "DialogClose": {
+      "category": "Overlays",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": true,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "DialogClose",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {
+        "asChild": {
+          "type": "boolean",
+          "optional": true
+        }
+      },
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "DialogContent": {
+      "category": "Overlays",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": true,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "DialogContent",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {
+        "asChild": {
+          "type": "boolean",
+          "optional": true
+        },
+        "hideClose": {
+          "type": "boolean",
+          "default": false
+        }
+      },
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "DialogDescription": {
+      "category": "Overlays",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": true,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "DialogDescription",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {
+        "asChild": {
+          "type": "boolean",
+          "optional": true
+        }
+      },
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "DialogFooter": {
+      "category": "Overlays",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": true,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "DialogFooter",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "DialogHeader": {
+      "category": "Overlays",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": true,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "DialogHeader",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "DialogOverlay": {
+      "category": "Overlays",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": true,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "DialogOverlay",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {
+        "asChild": {
+          "type": "boolean",
+          "optional": true
+        }
+      },
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "DialogPortal": {
+      "category": "Overlays",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": true,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "DialogPortal",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "DialogTitle": {
+      "category": "Overlays",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": true,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "DialogTitle",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {
+        "asChild": {
+          "type": "boolean",
+          "optional": true
+        }
+      },
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "DialogTrigger": {
+      "category": "Overlays",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": true,
+      "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.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "DialogTrigger",
+        "sizing": "panel"
+      },
+      "consumers": [],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {
+        "asChild": {
+          "type": "boolean",
+          "optional": true
+        }
+      },
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "HdsTooltip": {
+      "category": "Internal",
+      "categorySource": "internal-jsdoc",
+      "governedCategory": true,
+      "hidden": true,
+      "docExempt": true,
+      "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`.",
+      "figmaUrl": null,
+      "figmaId": null,
+      "figmaLink": null,
+      "tier": "primitive",
+      "preview": {
+        "exportName": "HdsTooltip",
+        "sizing": "panel"
+      },
+      "consumers": [
+        "src/app/components/hover-card.tsx",
+        "src/stories/hds-tooltip.stories.tsx"
+      ],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "Menu": {
+      "category": "Overlays",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": true,
+      "filePath": "src/app/components/menu.tsx",
+      "description": "Menu root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.",
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59",
+      "figmaId": null,
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59",
+      "tier": "primitive",
+      "preview": {
+        "exportName": "Menu",
+        "sizing": "panel"
+      },
+      "consumers": [
+        "src/app/components/command-palette.tsx",
+        "src/app/components/context-menu.tsx",
+        "src/app/components/date-range-input.tsx",
+        "src/app/components/hover-card.tsx",
+        "src/app/components/menu.test.tsx",
+        "src/app/components/multi-selector.tsx",
+        "src/app/components/shell-controls.tsx",
+        "src/stories/menu.stories.tsx"
+      ],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "Popover": {
+      "category": "Overlays",
+      "categorySource": "jsdoc",
+      "governedCategory": true,
+      "hidden": false,
+      "docExempt": true,
+      "filePath": "src/app/components/popover.tsx",
+      "description": "Popover root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.",
+      "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32",
+      "figmaId": null,
+      "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32",
+      "tier": "primitive",
+      "preview": {
+        "exportName": "Popover",
+        "sizing": "panel"
+      },
+      "consumers": [
+        "src/app/components/calendar.tsx",
+        "src/app/components/combobox.test.tsx",
+        "src/app/components/combobox.tsx",
+        "src/app/components/date-input.test.tsx",
+        "src/app/components/date-input.tsx",
+        "src/app/components/date-range-input.test.tsx",
+        "src/app/components/date-range-input.tsx",
+        "src/app/components/date-time-input.test.tsx",
+        "src/app/components/date-time-input.tsx",
+        "src/app/components/hover-card.tsx",
+        "src/app/components/menu.tsx",
+        "src/app/components/multi-selector.test.tsx",
+        "src/app/components/multi-selector.tsx",
+        "src/app/components/popover.test.tsx",
+        "src/app/design-system/generated-token-descriptions.ts",
+        "src/stories/combobox.stories.tsx",
+        "src/stories/date-input.stories.tsx",
+        "src/stories/date-range-input.stories.tsx",
+        "src/stories/date-time-input.stories.tsx",
+        "src/stories/multi-selector.stories.tsx",
+        "src/stories/popover.stories.tsx"
+      ],
+      "tokenMapping": {},
+      "variantAxes": [],
+      "componentProperties": [],
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "HdsPhosphor": {
+      "category": "Compiler",
+      "filePath": "scripts/hds-jsx-compiler.mjs",
+      "description": "Compiler-recognized icon alias stub for JSX normalization.",
+      "hidden": true,
+      "tier": "utility",
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "HdsFrame": {
+      "category": "Compiler",
+      "filePath": "scripts/hds-jsx-compiler.mjs",
+      "description": "Compiler-internal frame primitive stub for generated JSX validation.",
+      "hidden": true,
+      "tier": "utility",
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "HdsHeading": {
+      "category": "Compiler",
+      "filePath": "scripts/hds-jsx-compiler.mjs",
+      "description": "Compiler-recognized heading primitive stub for generated JSX validation.",
+      "hidden": true,
+      "tier": "utility",
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "HdsLabel": {
+      "category": "Compiler",
+      "filePath": "scripts/hds-jsx-compiler.mjs",
+      "description": "Compiler-recognized label primitive stub for generated JSX validation.",
+      "hidden": true,
+      "tier": "utility",
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "HdsCaption": {
+      "category": "Compiler",
+      "filePath": "scripts/hds-jsx-compiler.mjs",
+      "description": "Compiler-recognized caption primitive stub for generated JSX validation.",
+      "hidden": true,
+      "tier": "utility",
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "HdsChip": {
+      "category": "Compiler",
+      "filePath": "scripts/hds-jsx-compiler.mjs",
+      "description": "Compiler-recognized chip instance stub for generated JSX validation.",
+      "hidden": true,
+      "tier": "utility",
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    },
+    "HdsAvatar": {
+      "category": "Compiler",
+      "filePath": "scripts/hds-jsx-compiler.mjs",
+      "description": "Compiler-recognized avatar instance stub for generated JSX validation.",
+      "hidden": true,
+      "tier": "utility",
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": []
+    }
+  },
+  "utilities": {
+    "HdsPhosphor": {
+      "category": "Compiler",
+      "filePath": "scripts/hds-jsx-compiler.mjs",
+      "description": "Compiler-recognized icon alias stub for JSX normalization.",
+      "hidden": true,
+      "props": {},
+      "allowedChildren": [
+        "*"
+      ],
+      "propConstraints": {},
+      "requiredProps": [],
+      "a11yRules": [],
+      "preview": {},
+      "tokenMapping": {},
+      "tier": "utility"
+    },
+    "HdsFrame": {
+      "category": "Compiler",
+      "filePath": "scripts/hds-jsx-compiler.mjs",
+      "description": "Layout primitive — vertical or horizontal flex container on the 8px grid. Padding and gap from {0,8,16,24,32,48,64}; surfaces use semantic.color.surface.* tokens, never raw hex. Structural frames are rectilinear (no border-radius); only Card-wrapping frames pick up semantic.radius.card.",
+      "hidden": true,
+      "props": {
         "layout": {
           "type": "enum",
           "values": [
@@ -8883,15 +9631,15 @@
     },
     "AutoPreviewSpecimen": {
       "category": "Uncategorized",
-      "categorySource": "missing-jsdoc",
-      "governedCategory": false,
-      "hidden": false,
+      "categorySource": "internal-jsdoc",
+      "governedCategory": true,
+      "hidden": true,
       "docExempt": true,
       "filePath": "src/app/components/componentPreviewRegistry.tsx",
       "description": "/** @internal @doc-exempt: demo-preview-helper — not part of @hirobius/design-system public API.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:AutoPreviewSpecimen",
+      "figmaLink": null,
       "tier": "utility",
       "preview": {
         "exportName": "AutoPreviewSpecimen",
@@ -8933,7 +9681,7 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:VariantPreviewDeck"
+      "figmaLink": null
     },
     "HistoryCard": {
       "category": "Uncategorized",
@@ -8972,7 +9720,7 @@
       "tier": "utility",
       "docExempt": true,
       "sourcePath": "src/app/components/HistoryCard.tsx",
-      "figmaLink": "TODO:hds-master:HistoryCard"
+      "figmaLink": null
     },
     "ComponentPreview": {
       "category": "Uncategorized",
@@ -9003,7 +9751,7 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:ComponentPreview"
+      "figmaLink": null
     },
     "AnimatedLabel": {
       "category": "Uncategorized",
@@ -9033,7 +9781,7 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:AnimatedLabel"
+      "figmaLink": null
     },
     "ControlsPanel": {
       "category": "Uncategorized",
@@ -9064,7 +9812,7 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:ControlsPanel"
+      "figmaLink": null
     },
     "ControlsSection": {
       "category": "Uncategorized",
@@ -9095,7 +9843,7 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:ControlsSection"
+      "figmaLink": null
     },
     "HdsMobileTopBar": {
       "category": "Uncategorized",
@@ -9125,7 +9873,7 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:HdsMobileTopBar"
+      "figmaLink": null
     },
     "PreviewFrame": {
       "category": "Uncategorized",
@@ -9157,7 +9905,7 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:PreviewFrame"
+      "figmaLink": null
     },
     "HdsSidebarUtilityButton": {
       "category": "Uncategorized",
@@ -9187,7 +9935,7 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:HdsSidebarUtilityButton"
+      "figmaLink": null
     },
     "ImageLightbox": {
       "category": "Uncategorized",
@@ -9217,13 +9965,13 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:ImageLightbox"
+      "figmaLink": null
     },
     "SketchButton": {
       "category": "Uncategorized",
-      "categorySource": "missing-jsdoc",
-      "governedCategory": false,
-      "hidden": false,
+      "categorySource": "internal-jsdoc",
+      "governedCategory": true,
+      "hidden": true,
       "filePath": "src/app/components/sketch-controls.tsx",
       "description": "",
       "figmaUrl": null,
@@ -9245,13 +9993,13 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:SketchButton"
+      "figmaLink": null
     },
     "SketchCheckbox": {
       "category": "Uncategorized",
-      "categorySource": "missing-jsdoc",
-      "governedCategory": false,
-      "hidden": false,
+      "categorySource": "internal-jsdoc",
+      "governedCategory": true,
+      "hidden": true,
       "filePath": "src/app/components/sketch-controls.tsx",
       "description": "",
       "figmaUrl": null,
@@ -9273,13 +10021,13 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:SketchCheckbox"
+      "figmaLink": null
     },
     "SketchPanelToggle": {
       "category": "Uncategorized",
-      "categorySource": "missing-jsdoc",
-      "governedCategory": false,
-      "hidden": false,
+      "categorySource": "internal-jsdoc",
+      "governedCategory": true,
+      "hidden": true,
       "filePath": "src/app/components/sketch-controls.tsx",
       "description": "",
       "figmaUrl": null,
@@ -9301,13 +10049,13 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:SketchPanelToggle"
+      "figmaLink": null
     },
     "SketchRange": {
       "category": "Uncategorized",
-      "categorySource": "missing-jsdoc",
-      "governedCategory": false,
-      "hidden": false,
+      "categorySource": "internal-jsdoc",
+      "governedCategory": true,
+      "hidden": true,
       "filePath": "src/app/components/sketch-controls.tsx",
       "description": "",
       "figmaUrl": null,
@@ -9329,13 +10077,13 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:SketchRange"
+      "figmaLink": null
     },
     "SketchTextarea": {
       "category": "Uncategorized",
-      "categorySource": "missing-jsdoc",
-      "governedCategory": false,
-      "hidden": false,
+      "categorySource": "internal-jsdoc",
+      "governedCategory": true,
+      "hidden": true,
       "filePath": "src/app/components/sketch-controls.tsx",
       "description": "",
       "figmaUrl": null,
@@ -9357,7 +10105,7 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:SketchTextarea"
+      "figmaLink": null
     },
     "MorphCard": {
       "category": "Uncategorized",
@@ -9378,7 +10126,7 @@
       "tokenMapping": {},
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:MorphCard"
+      "figmaLink": null
     },
     "Tooltip": {
       "category": "Uncategorized",
@@ -9404,7 +10152,7 @@
       "tokenMapping": {},
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:Tooltip"
+      "figmaLink": null
     },
     "NotFoundPattern": {
       "category": "Feedback",
@@ -9435,7 +10183,7 @@
       "componentProperties": [],
       "tier": "utility",
       "docExempt": true,
-      "figmaLink": "TODO:hds-master:NotFoundPattern"
+      "figmaLink": null
     },
     "CascadeText": {
       "category": "Uncategorized",
@@ -9456,7 +10204,7 @@
       "tokenMapping": {},
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:CascadeText"
+      "figmaLink": null
     },
     "DocPageSpec": {
       "category": "Uncategorized",
@@ -9477,7 +10225,7 @@
       "tokenMapping": {},
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:DocPageSpec"
+      "figmaLink": null
     },
     "TokenDisplayToggle": {
       "category": "Uncategorized",
@@ -9500,7 +10248,7 @@
       "tokenMapping": {},
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:TokenDisplayToggle"
+      "figmaLink": null
     },
     "HdsLegacyTokenGovernancePanel": {
       "category": "Uncategorized",
@@ -9546,7 +10294,7 @@
       "componentProperties": [],
       "tier": "utility",
       "docExempt": false,
-      "figmaLink": "TODO:hds-master:HdsLegacyTokenGovernancePanel"
+      "figmaLink": null
     },
     "LegacyTokenList": {
       "category": "Lab",
@@ -9592,7 +10340,7 @@
       "componentProperties": [],
       "tier": "utility",
       "docExempt": false,
-      "figmaLink": "TODO:hds-master:LegacyTokenList"
+      "figmaLink": null
     },
     "TokenCollectionList": {
       "category": "Lab",
@@ -9633,7 +10381,7 @@
       "componentProperties": [],
       "tier": "utility",
       "docExempt": false,
-      "figmaLink": "TODO:hds-master:TokenCollectionList"
+      "figmaLink": null
     },
     "TokenList": {
       "category": "Uncategorized",
@@ -9663,13 +10411,13 @@
       "docExempt": true,
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:TokenList"
+      "figmaLink": null
     },
     "ErrorBoundary": {
       "category": "Uncategorized",
-      "categorySource": "missing-jsdoc",
-      "governedCategory": false,
-      "hidden": false,
+      "categorySource": "internal-jsdoc",
+      "governedCategory": true,
+      "hidden": true,
       "docExempt": true,
       "filePath": "src/app/components/error-boundary.tsx",
       "description": "ErrorBoundary — slot-scoped recovery surface for runtime render failures.",
@@ -9688,7 +10436,7 @@
       "tokenMapping": {},
       "variantAxes": [],
       "componentProperties": [],
-      "figmaLink": "TODO:hds-master:ErrorBoundary"
+      "figmaLink": null
     },
     "ApiReference": {
       "category": "Utilities",
@@ -9700,7 +10448,7 @@
       "description": "ApiReference — collapsed <details> rendering of a component's public API. Returns `null` when: - The component is missing from the manifest (nothing to render). - The component is a template and `forceForTemplate` is not set. - The component has no props AND no slots (genuinely empty surface).",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:ApiReference",
+      "figmaLink": null,
       "tier": "utility",
       "preview": {
         "exportName": "ApiReference",
@@ -9721,17 +10469,13 @@
       "description": "DocPageHeader — standardized header zone mounted at the top of every primitive / pattern / template doc page. Projected from the live HDS manifest; the unit `9d-9` batch refactor wires this component into the doc routes — this file only CREATES the surface. 9d-4 contract (from `docs/ai/orchestration.json`): - H1: component name - Lede: single-line summary derived from `componentSpec.description` (truncated at the first newline / sentence break for the header zone; the full description still flows into the doc body downstream). - Status badge: Stable / Beta — derived from a new optional `componentSpec.stability` field (additive, schema 9d-4). When absent, the default falls back to the unit-spec rule: primitives → 'stable'; patterns and templates → 'beta' when they lack `slots[]` or carry propConstraints warnings, otherwise 'stable'. - Tier chip: primitive / pattern / template / utility (manifest field). - Source link: GitHub blob URL projected from `componentSpec.filePath` against the repo's origin remote (hirobius/adrian-milsap, branch `main` for canonical permalinks). - Figma link: rendered when `componentSpec.figmaUrl` is non-null. Surface rules (component-zone CLAUDE.md): - Heavy prop restriction — one slot, no business logic. - Theming via CSS variables / role tokens only (no inline hex). - Composes Stack rather than re-implementing layout primitives. Anti-goals: - Not a doc-shell — `DocShell` already owns the wordmark, search, theme-toggle, and rail nav. This component lives INSIDE the content column, not the header bar. - Does not render badges as decorative stickers next to prose; they sit in a dedicated metadata row below the H1, per CLAUDE.md.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:DocPageHeader",
+      "figmaLink": null,
       "tier": "utility",
       "preview": {
         "exportName": "DocPageHeader",
         "sizing": "panel"
       },
-      "consumers": [
-        "src/app/pages/docs/patterns/_template.tsx",
-        "src/app/pages/docs/templates/_template.tsx",
-        "src/app/pages/SketchPage.tsx"
-      ],
+      "consumers": [],
       "tokenMapping": {},
       "variantAxes": [],
       "componentProperties": []
@@ -9746,7 +10490,7 @@
       "description": "ThemeToggle — System / Light / Dark theme dropdown for the doc shell. 9d-3 baseline: a header-slot dropdown with three options: - System — follow `prefers-color-scheme`, react live to OS changes. - Light — force light mode. - Dark — force dark mode. Persistence: - Stored in localStorage under `hds-theme-mode` ('system' | 'light' | 'dark'). - Mirrored to the legacy `hds-theme` key ('light' | 'dark') so the existing ThemeContext binary toggle (if mounted) stays in sync without a hard dependency between the two. Application: - Sets `data-theme=\"light\"` or `data-theme=\"dark\"` on `<html>` so the 8e-2 `role.*` alias layer (theme-aware CSS vars) flips automatically. - Also toggles `<html>.dark` for parity with Tailwind's class-based dark variant (matching the convention already used in ThemeContext). Dependencies: - Zero new npm deps. Native button + click-outside listener. - SVG icons inlined (Sun / Moon / Monitor) — no icon-library dep added. Slot: - Renders into the `data-hds-slot=\"theme-toggle\"` zone in DocShell.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:ThemeToggle",
+      "figmaLink": null,
       "tier": "utility",
       "preview": {
         "exportName": "ThemeToggle",
@@ -9769,7 +10513,7 @@
       "description": "VariantStrip renders a horizontal family strip of component specimens with short labels. Designed for component docs to show all variants, sizes, or tones in a single scannable row.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:VariantStrip",
+      "figmaLink": null,
       "tier": "utility",
       "preview": {
         "exportName": "VariantStrip",
@@ -9789,7 +10533,7 @@
       "filePath": "src/app/components/demo-block.tsx",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:DemoBlock",
+      "figmaLink": null,
       "tier": "utility",
       "preview": {
         "exportName": "DemoBlock",
@@ -9810,7 +10554,7 @@
       "description": "PageFooter — minimal page footer rendered by the route shell. Currently houses a binary light/dark theme toggle on the left, with the footer owning its own bottom breathing room so the toggle never pins to the viewport edge. Add elements here as the page footer grows — keeping the shape in one place so every HDSLayout-mounted page gets a consistent footer surface without per-page rendering.",
       "figmaUrl": null,
       "figmaId": null,
-      "figmaLink": "TODO:hds-master:PageFooter",
+      "figmaLink": null,
       "tier": "utility",
       "preview": {
         "exportName": "PageFooter",
@@ -10129,7 +10873,7 @@
         "path": "primitive.color.lilac.500",
         "cssVar": "--primitive-color-lilac-500",
         "type": "color",
-        "description": "Lilac Bonds accent rest — AA for white text on page and card surfaces.",
+        "description": "Lilac accent rest — AA for white text on page and card surfaces.",
         "value": "#6f3fd4"
       },
       {
@@ -10508,14 +11252,14 @@
         "path": "primitive.typography.size.5xl",
         "cssVar": "--primitive-typography-size-5xl",
         "type": "dimension",
-        "value": "80px"
+        "description": "Swiss-canon display size. Static desktop value; fluid in theme.css.",
+        "value": "72px"
       },
       {
-        "path": "primitive.typography.size.7xl",
-        "cssVar": "--primitive-typography-size-7xl",
+        "path": "primitive.typography.size.6xl",
+        "cssVar": "--primitive-typography-size-6xl",
         "type": "dimension",
-        "description": "Swiss-canon display size. Static desktop value; fluid in theme.css.",
-        "value": "72px"
+        "value": "80px"
       },
       {
         "path": "primitive.typography.weight.light",
@@ -10990,12 +11734,12 @@
         "path": "semantic.color.surface.accent",
         "cssVar": "--semantic-color-surface-accent",
         "type": "color",
-        "description": "Accent-colored background",
-        "alias": "{primitive.color.blue.500}",
-        "resolvedValue": "#1E2EFD",
+        "description": "Accent-colored background (neutral/monochrome; inverts to a light neutral on dark surfaces).",
+        "alias": "{primitive.color.neutral.900}",
+        "resolvedValue": "#111111",
         "dark": {
-          "alias": "{primitive.color.blue.500}",
-          "resolvedValue": "#1E2EFD"
+          "alias": "{primitive.color.neutral.100}",
+          "resolvedValue": "#f5f5f5"
         }
       },
       {
@@ -11003,11 +11747,71 @@
         "cssVar": "--semantic-color-surface-accentSubtle",
         "type": "color",
         "description": "Faint accent tint for hover states or highlights",
-        "alias": "{primitive.color.blue.50}",
-        "resolvedValue": "oklch(0.96 0.03 266.54)",
+        "alias": "{primitive.color.neutral.100}",
+        "resolvedValue": "#f5f5f5",
         "dark": {
-          "alias": "{primitive.color.blue.900}",
-          "resolvedValue": "oklch(0.22 0.05 266.54)"
+          "alias": "{primitive.color.neutral.900}",
+          "resolvedValue": "#111111"
+        }
+      },
+      {
+        "path": "semantic.color.surface.hover",
+        "cssVar": "--semantic-color-surface-hover",
+        "type": "color",
+        "description": "Background for a hovered interactive surface (menu items, chips, tertiary buttons).",
+        "alias": "{primitive.color.neutral.100}",
+        "resolvedValue": "#f5f5f5",
+        "dark": {
+          "alias": "{primitive.color.neutral.900}",
+          "resolvedValue": "#111111"
+        }
+      },
+      {
+        "path": "semantic.color.surface.pressed",
+        "cssVar": "--semantic-color-surface-pressed",
+        "type": "color",
+        "description": "Background for an actively pressed interactive surface.",
+        "alias": "{primitive.color.neutral.50}",
+        "resolvedValue": "#fafafa",
+        "dark": {
+          "alias": "{primitive.color.neutral.950}",
+          "resolvedValue": "#0a0a0a"
+        }
+      },
+      {
+        "path": "semantic.color.surface.selected",
+        "cssVar": "--semantic-color-surface-selected",
+        "type": "color",
+        "description": "Background for a persistently selected item (active tab, checked row).",
+        "alias": "{primitive.color.neutral.200}",
+        "resolvedValue": "#e5e5e5",
+        "dark": {
+          "alias": "{primitive.color.neutral.800}",
+          "resolvedValue": "#262626"
+        }
+      },
+      {
+        "path": "semantic.color.surface.muted",
+        "cssVar": "--semantic-color-surface-muted",
+        "type": "color",
+        "description": "Muted background for low-emphasis content blocks.",
+        "alias": "{primitive.color.neutral.100}",
+        "resolvedValue": "#f5f5f5",
+        "dark": {
+          "alias": "{primitive.color.neutral.900}",
+          "resolvedValue": "#111111"
+        }
+      },
+      {
+        "path": "semantic.color.surface.sunken",
+        "cssVar": "--semantic-color-surface-sunken",
+        "type": "color",
+        "description": "Recessed background for inset wells (inputs, code blocks, nested panels).",
+        "alias": "{primitive.color.neutral.200}",
+        "resolvedValue": "#e5e5e5",
+        "dark": {
+          "alias": "{primitive.color.neutral.850}",
+          "resolvedValue": "#1a1a1a"
         }
       },
       {
@@ -11058,22 +11862,60 @@
         "path": "semantic.color.content.accent",
         "cssVar": "--semantic-color-content-accent",
         "type": "color",
-        "alias": "{primitive.color.blue.500}",
-        "resolvedValue": "#1E2EFD",
+        "description": "Accent-intent text/icon color (monochrome). Pair with underline/weight for link affordance.",
+        "alias": "{primitive.color.neutral.900}",
+        "resolvedValue": "#111111",
         "dark": {
-          "alias": "{primitive.color.blue.300}",
-          "resolvedValue": "oklch(0.70 0.2903 266.54)"
+          "alias": "{primitive.color.neutral.100}",
+          "resolvedValue": "#f5f5f5"
         }
       },
       {
         "path": "semantic.color.content.onAccent",
         "cssVar": "--semantic-color-content-onAccent",
         "type": "color",
+        "description": "Text/icon color on accent fills. Flips to a dark neutral in dark mode, where accent fills are light.",
         "alias": "{primitive.color.neutral.white}",
         "resolvedValue": "#ffffff",
         "dark": {
-          "alias": "{primitive.color.neutral.white}",
-          "resolvedValue": "#ffffff"
+          "alias": "{primitive.color.neutral.900}",
+          "resolvedValue": "#111111"
+        }
+      },
+      {
+        "path": "semantic.color.content.success",
+        "cssVar": "--semantic-color-content-success",
+        "type": "color",
+        "description": "Success-toned text/icon color, independent of feedback banners.",
+        "alias": "{primitive.color.green.700}",
+        "resolvedValue": "#047857",
+        "dark": {
+          "alias": "{primitive.color.green.400}",
+          "resolvedValue": "#34d399"
+        }
+      },
+      {
+        "path": "semantic.color.content.warning",
+        "cssVar": "--semantic-color-content-warning",
+        "type": "color",
+        "description": "Warning-toned text/icon color, independent of feedback banners.",
+        "alias": "{primitive.color.amber.800}",
+        "resolvedValue": "#92400e",
+        "dark": {
+          "alias": "{primitive.color.amber.400}",
+          "resolvedValue": "#fbbf24"
+        }
+      },
+      {
+        "path": "semantic.color.content.danger",
+        "cssVar": "--semantic-color-content-danger",
+        "type": "color",
+        "description": "Danger-toned text/icon color, independent of feedback banners.",
+        "alias": "{primitive.color.red.700}",
+        "resolvedValue": "#b91c1c",
+        "dark": {
+          "alias": "{primitive.color.red.400}",
+          "resolvedValue": "#f87171"
         }
       },
       {
@@ -11087,6 +11929,18 @@
           "resolvedValue": "#404040"
         }
       },
+      {
+        "path": "semantic.color.border.interactive",
+        "cssVar": "--semantic-color-border-interactive",
+        "type": "color",
+        "description": "Border for interactive control boundaries (inputs, selects, secondary buttons); meets the WCAG 1.4.11 3:1 non-text contrast floor.",
+        "alias": "{primitive.color.neutral.500}",
+        "resolvedValue": "#737373",
+        "dark": {
+          "alias": "{primitive.color.neutral.500}",
+          "resolvedValue": "#737373"
+        }
+      },
       {
         "path": "semantic.color.border.subdued",
         "cssVar": "--semantic-color-border-subdued",
@@ -11125,11 +11979,36 @@
         "path": "semantic.color.border.accent",
         "cssVar": "--semantic-color-border-accent",
         "type": "color",
-        "alias": "{primitive.color.blue.500}",
-        "resolvedValue": "#1E2EFD",
+        "description": "Accent border (neutral/monochrome; inverts on dark surfaces).",
+        "alias": "{primitive.color.neutral.900}",
+        "resolvedValue": "#111111",
+        "dark": {
+          "alias": "{primitive.color.neutral.100}",
+          "resolvedValue": "#f5f5f5"
+        }
+      },
+      {
+        "path": "semantic.color.border.success",
+        "cssVar": "--semantic-color-border-success",
+        "type": "color",
+        "description": "Success-toned border for status outlines and success-state inputs.",
+        "alias": "{primitive.color.green.400}",
+        "resolvedValue": "#34d399",
+        "dark": {
+          "alias": "{primitive.color.green.400}",
+          "resolvedValue": "#34d399"
+        }
+      },
+      {
+        "path": "semantic.color.border.warning",
+        "cssVar": "--semantic-color-border-warning",
+        "type": "color",
+        "description": "Warning-toned border for status outlines and warning-state inputs.",
+        "alias": "{primitive.color.amber.400}",
+        "resolvedValue": "#fbbf24",
         "dark": {
-          "alias": "{primitive.color.blue.500}",
-          "resolvedValue": "#1E2EFD"
+          "alias": "{primitive.color.amber.400}",
+          "resolvedValue": "#fbbf24"
         }
       },
       {
@@ -11615,12 +12494,12 @@
         "path": "semantic.accent.rest",
         "cssVar": "--semantic-accent-rest",
         "type": "color",
-        "description": "Default accent fill for interactive elements at rest.",
-        "alias": "{primitive.color.blue.500}",
-        "resolvedValue": "#1E2EFD",
+        "description": "Default accent fill for interactive elements at rest. Neutral (monochrome) accent — inverts to a light neutral on dark surfaces.",
+        "alias": "{primitive.color.neutral.900}",
+        "resolvedValue": "#111111",
         "dark": {
-          "alias": "{primitive.color.blue.500}",
-          "resolvedValue": "#1E2EFD"
+          "alias": "{primitive.color.neutral.100}",
+          "resolvedValue": "#f5f5f5"
         }
       },
       {
@@ -11628,11 +12507,11 @@
         "cssVar": "--semantic-accent-hover",
         "type": "color",
         "description": "Accent fill on pointer hover.",
-        "alias": "{primitive.color.blue.600}",
-        "resolvedValue": "oklch(0.45 0.2903 266.54)",
+        "alias": "{primitive.color.neutral.800}",
+        "resolvedValue": "#262626",
         "dark": {
-          "alias": "{primitive.color.blue.450}",
-          "resolvedValue": "oklch(0.56 0.29 266.60)"
+          "alias": "{primitive.color.neutral.200}",
+          "resolvedValue": "#e5e5e5"
         }
       },
       {
@@ -11640,11 +12519,11 @@
         "cssVar": "--semantic-accent-pressed",
         "type": "color",
         "description": "Accent fill during active press.",
-        "alias": "{primitive.color.blue.700}",
-        "resolvedValue": "oklch(0.44 0.2903 266.54)",
+        "alias": "{primitive.color.neutral.950}",
+        "resolvedValue": "#0a0a0a",
         "dark": {
-          "alias": "{primitive.color.blue.400}",
-          "resolvedValue": "oklch(0.65 0.2903 266.54)"
+          "alias": "{primitive.color.neutral.300}",
+          "resolvedValue": "#d4d4d4"
         }
       },
       {
@@ -11652,11 +12531,11 @@
         "cssVar": "--semantic-accent-inactive",
         "type": "color",
         "description": "Accent fill for inactive or unselected accent elements.",
-        "alias": "{primitive.color.blue.200}",
-        "resolvedValue": "oklch(0.88 0.07 266.54)",
+        "alias": "{primitive.color.neutral.400}",
+        "resolvedValue": "#a3a3a3",
         "dark": {
-          "alias": "{primitive.color.blue.200}",
-          "resolvedValue": "oklch(0.88 0.07 266.54)"
+          "alias": "{primitive.color.neutral.600}",
+          "resolvedValue": "#525252"
         }
       },
       {
@@ -11664,23 +12543,23 @@
         "cssVar": "--semantic-accent-disabled",
         "type": "color",
         "description": "Accent fill for disabled accent elements.",
-        "alias": "{primitive.color.blue.100}",
-        "resolvedValue": "oklch(0.92 0.04 266.54)",
+        "alias": "{primitive.color.neutral.300}",
+        "resolvedValue": "#d4d4d4",
         "dark": {
-          "alias": "{primitive.color.blue.100}",
-          "resolvedValue": "oklch(0.92 0.04 266.54)"
+          "alias": "{primitive.color.neutral.700}",
+          "resolvedValue": "#404040"
         }
       },
       {
         "path": "semantic.accent.content",
         "cssVar": "--semantic-accent-content",
         "type": "color",
-        "description": "Text and icon color on neutral surfaces with accent intent.",
-        "alias": "{primitive.color.blue.500}",
-        "resolvedValue": "#1E2EFD",
+        "description": "Text and icon color on neutral surfaces with accent intent. Monochrome — pair with underline/weight for link affordance.",
+        "alias": "{primitive.color.neutral.900}",
+        "resolvedValue": "#111111",
         "dark": {
-          "alias": "{primitive.color.blue.300}",
-          "resolvedValue": "oklch(0.70 0.2903 266.54)"
+          "alias": "{primitive.color.neutral.100}",
+          "resolvedValue": "#f5f5f5"
         }
       },
       {
@@ -11688,11 +12567,11 @@
         "cssVar": "--semantic-accent-contentHover",
         "type": "color",
         "description": "Accent content color on pointer hover.",
-        "alias": "{primitive.color.blue.600}",
-        "resolvedValue": "oklch(0.45 0.2903 266.54)",
+        "alias": "{primitive.color.neutral.700}",
+        "resolvedValue": "#404040",
         "dark": {
-          "alias": "{primitive.color.blue.200}",
-          "resolvedValue": "oklch(0.88 0.07 266.54)"
+          "alias": "{primitive.color.neutral.300}",
+          "resolvedValue": "#d4d4d4"
         }
       },
       {
@@ -11700,20 +12579,20 @@
         "cssVar": "--semantic-accent-subtle",
         "type": "color",
         "description": "Low-emphasis accent tint for hover backgrounds and selection highlights.",
-        "alias": "{primitive.color.blue.50}",
-        "resolvedValue": "oklch(0.96 0.03 266.54)",
+        "alias": "{primitive.color.neutral.100}",
+        "resolvedValue": "#f5f5f5",
         "dark": {
-          "alias": "{primitive.color.blue.900}",
-          "resolvedValue": "oklch(0.22 0.05 266.54)"
+          "alias": "{primitive.color.neutral.800}",
+          "resolvedValue": "#262626"
         }
       },
       {
         "path": "semantic.radius.action",
         "cssVar": "--semantic-radius-action",
         "type": "dimension",
-        "description": "Corner radius for interactive action elements like buttons and inputs.",
-        "alias": "{primitive.radius.12}",
-        "resolvedValue": "12px"
+        "description": "Corner radius for action elements (buttons, inputs, badges); Tailwind rounded-md resolves here. Override role.radius to reshape the system.",
+        "alias": "{primitive.radius.8}",
+        "resolvedValue": "8px"
       },
       {
         "path": "semantic.borderWidth.default",
@@ -11836,7 +12715,7 @@
         "type": "color",
         "description": "Nav item background fill when active or selected.",
         "alias": "{semantic.accent.subtle}",
-        "resolvedValue": "oklch(0.96 0.03 266.54)"
+        "resolvedValue": "#f5f5f5"
       },
       {
         "path": "component.nav.borderActive",
@@ -11844,7 +12723,7 @@
         "type": "color",
         "description": "Nav item border color when active or selected.",
         "alias": "{semantic.color.surface.accent}",
-        "resolvedValue": "#1E2EFD"
+        "resolvedValue": "#111111"
       },
       {
         "path": "component.nav.text",
@@ -11892,7 +12771,7 @@
         "type": "color",
         "description": "Base tag surface color.",
         "alias": "{semantic.accent.subtle}",
-        "resolvedValue": "oklch(0.96 0.03 266.54)"
+        "resolvedValue": "#f5f5f5"
       },
       {
         "path": "component.tag.text",
@@ -11988,7 +12867,7 @@
         "type": "color",
         "description": "Active tag fill color.",
         "alias": "{semantic.accent.rest}",
-        "resolvedValue": "#1E2EFD"
+        "resolvedValue": "#111111"
       },
       {
         "path": "component.tag.activeBorder",
@@ -11996,7 +12875,7 @@
         "type": "color",
         "description": "Active tag border color.",
         "alias": "{semantic.accent.rest}",
-        "resolvedValue": "#1E2EFD"
+        "resolvedValue": "#111111"
       },
       {
         "path": "component.tag.activeHover",
@@ -12004,7 +12883,7 @@
         "type": "color",
         "description": "Active tag hover fill color.",
         "alias": "{semantic.accent.hover}",
-        "resolvedValue": "oklch(0.45 0.2903 266.54)"
+        "resolvedValue": "#262626"
       },
       {
         "path": "component.badge.fontSize",
@@ -12088,7 +12967,7 @@
         "type": "color",
         "description": "Primary button fill.",
         "alias": "{semantic.color.surface.accent}",
-        "resolvedValue": "#1E2EFD"
+        "resolvedValue": "#111111"
       },
       {
         "path": "component.button.bgHover",
@@ -12096,7 +12975,7 @@
         "type": "color",
         "description": "Primary button hover fill.",
         "alias": "{semantic.accent.hover}",
-        "resolvedValue": "oklch(0.45 0.2903 266.54)"
+        "resolvedValue": "#262626"
       },
       {
         "path": "component.button.text",
@@ -12112,7 +12991,7 @@
         "type": "dimension",
         "description": "Button corner radius.",
         "alias": "{semantic.radius.action}",
-        "resolvedValue": "12px"
+        "resolvedValue": "8px"
       },
       {
         "path": "component.button.paddingX",
@@ -12292,7 +13171,7 @@
         "type": "color",
         "description": "Disabled primary button fill.",
         "alias": "{semantic.color.surface.accentSubtle}",
-        "resolvedValue": "oklch(0.96 0.03 266.54)"
+        "resolvedValue": "#f5f5f5"
       },
       {
         "path": "component.button.secondary.bg.rest",
@@ -12323,24 +13202,24 @@
         "cssVar": "--component-button-secondary-border-rest",
         "type": "color",
         "description": "Secondary button border.",
-        "alias": "{semantic.color.border.default}",
-        "resolvedValue": "#e5e5e5"
+        "alias": "{semantic.color.border.interactive}",
+        "resolvedValue": "#737373"
       },
       {
         "path": "component.button.secondary.border.hover",
         "cssVar": "--component-button-secondary-border-hover",
         "type": "color",
         "description": "Secondary button hover border.",
-        "alias": "{semantic.color.border.default}",
-        "resolvedValue": "#e5e5e5"
+        "alias": "{semantic.color.border.interactive}",
+        "resolvedValue": "#737373"
       },
       {
         "path": "component.button.secondary.border.pressed",
         "cssVar": "--component-button-secondary-border-pressed",
         "type": "color",
         "description": "Secondary button pressed border.",
-        "alias": "{semantic.color.border.default}",
-        "resolvedValue": "#e5e5e5"
+        "alias": "{semantic.color.border.interactive}",
+        "resolvedValue": "#737373"
       },
       {
         "path": "component.button.secondary.border.disabled",
@@ -12376,8 +13255,8 @@
         "path": "component.input.border",
         "cssVar": "--component-input-border",
         "type": "color",
-        "alias": "{semantic.color.border.default}",
-        "resolvedValue": "#e5e5e5"
+        "alias": "{semantic.color.border.interactive}",
+        "resolvedValue": "#737373"
       },
       {
         "path": "component.input.borderError",
@@ -12391,7 +13270,7 @@
         "cssVar": "--component-input-radius",
         "type": "dimension",
         "alias": "{semantic.radius.action}",
-        "resolvedValue": "12px"
+        "resolvedValue": "8px"
       },
       {
         "path": "component.input.paddingX",
@@ -12506,7 +13385,7 @@
         "type": "color",
         "description": "Primary action surface. shadcn role: primary.",
         "alias": "{semantic.color.surface.accent}",
-        "resolvedValue": "#1E2EFD"
+        "resolvedValue": "#111111"
       },
       {
         "path": "role.primary-foreground",
@@ -12554,7 +13433,7 @@
         "type": "color",
         "description": "Hover/active tinted bg. shadcn role: accent.",
         "alias": "{semantic.color.surface.accentSubtle}",
-        "resolvedValue": "oklch(0.96 0.03 266.54)"
+        "resolvedValue": "#f5f5f5"
       },
       {
         "path": "role.accent-foreground",
@@ -12562,7 +13441,7 @@
         "type": "color",
         "description": "Text on accent surface. shadcn role: accent-foreground.",
         "alias": "{semantic.color.content.accent}",
-        "resolvedValue": "#1E2EFD"
+        "resolvedValue": "#111111"
       },
       {
         "path": "role.destructive",
@@ -12593,8 +13472,8 @@
         "cssVar": "--role-input",
         "type": "color",
         "description": "Input field border. shadcn role: input.",
-        "alias": "{semantic.color.border.default}",
-        "resolvedValue": "#e5e5e5"
+        "alias": "{semantic.color.border.interactive}",
+        "resolvedValue": "#737373"
       },
       {
         "path": "role.ring",
@@ -12602,7 +13481,7 @@
         "type": "color",
         "description": "Focus ring color. shadcn role: ring.",
         "alias": "{semantic.color.border.accent}",
-        "resolvedValue": "#1E2EFD"
+        "resolvedValue": "#111111"
       },
       {
         "path": "role.radius",
@@ -12610,7 +13489,7 @@
         "type": "dimension",
         "description": "Default border radius. shadcn role: radius.",
         "alias": "{semantic.radius.action}",
-        "resolvedValue": "12px"
+        "resolvedValue": "8px"
       }
     ]
   }