@hirobius/design-system 0.24.0 → 0.24.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/UPGRADING.md +24 -1
  3. package/dist/css-contract.json +1 -1
  4. package/dist/hirobius-ui.js +1 -1
  5. package/dist/manifest.js +1 -1
  6. package/dist/styles.css +1 -1
  7. package/dist/tokens.css +1 -1
  8. package/dist/types/src/index.d.ts +6 -6
  9. package/dist/variables.css +23 -23
  10. package/hirobius.tokens.json +36 -36
  11. package/package.json +1 -1
  12. package/public/hds-manifest.json +43 -43
  13. package/src/app/data/component-api.json +1 -1
  14. package/upgrade/index.json +8 -1
  15. package/upgrade/releases/0.24.1.json +311 -0
package/dist/manifest.js CHANGED
@@ -1,5 +1,5 @@
1
1
  const e = "Hirobius Design System", t = "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.";
2
- const o = "2026-10-11T21:00:30.237Z", a = "hirobius.tokens.json", i = "W3C DTCG 2025.10", r = "https://hirobius-hds-components.vercel.app/", s = "https://hirobius-hds-components.vercel.app/llms.txt", n = { engine: "React + TypeScript", icons: "Lucide React", tokens: "W3C DTCG", styling: "CSS Variables" }, p = { tiers: ["primitive", "semantic", "component", "role"], aliasRule: "Semantic, component, and role tokens must alias an upstream token, except computed oklch() color values for derived tints.", darkMode: '[data-theme="dark"] on <html>. Semantic tokens auto-switch via CSS var chain — no JS re-renders.', cssVarFormat: "--{tier}-{...path-segments}", consumeInCSS: "var(--semantic-color-surface-page)", consumeInJS: "hds.space.px16 | ct(isDark).content.primary from theme.ts", consumeTypography: "hds.typeStyles.h1 (inline style object) — never Tailwind font classes" }, l = { primaryColor: "#433a3f", primaryColorToken: "semantic.accent.rest", font: "Plus Jakarta Sans variable 100–900, self-hosted", spacingBase: "4px", buttonBorderRadius: "0px", cardBorderRadius: "8px", neutralScale: "true monochromatic (equal RGB channels)", accentCount: 1 }, c = ["Alert", "AlertDialog", "AssetImg", "Avatar", "AvatarGroup", "Badge", "Blockquote", "Box", "Breadcrumb", "Button", "Callout", "Card", "CardBody", "CardDescription", "CardFooter", "CardHeader", "CardMetric", "CardProgress", "CardTitle", "Checkbox", "CodeBlock", "Combobox", "Container", "DataTableSection", "DestructiveSection", "Dialog", "DialogClose", "DialogContent", "DialogDescription", "DialogFooter", "DialogHeader", "DialogOverlay", "DialogPortal", "DialogTitle", "DialogTrigger", "Disclosure", "Divider", "EmptyState", "Field", "Form", "FormActions", "FormField", "FormFieldShell", "Grid", "HdsRouterProvider", "HdsThemeProvider", "Icon", "InlineCode", "InlineLink", "Input", "Kbd", "Menu", "MetadataList", "MetricTile", "MetricTiles", "Page", "PageHeader", "Pagination", "Pin", "Popover", "Progress", "Radio", "Reveal", "SegmentedControl", "Select", "Sidebar", "Skeleton", "Slider", "Spinner", "Stack", "Stat", "StatusListItem", "StatusTile", "Surface", "Switcher", "Table", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "Tag", "Text", "Textarea", "Timestamp", "ToastProvider", "Toggle", "Tooltip", "VisuallyHidden"], d = { status: "active", styleCount: 6, source: "hirobius.tokens.json semantic.typography", tokens: [{ name: "display", size: "48px", lineHeight: "1.05", weight: 700, role: "One per page, hero only" }, { name: "title", size: "24px", lineHeight: "1.25", weight: 700, role: "Section and card headings" }, { name: "body", size: "16px", lineHeight: "1.6", weight: 400, role: "Prose" }, { name: "ui", size: "14px", lineHeight: "1.5", weight: 500, role: "Controls, nav, table text, values" }, { name: "caption", size: "12px", lineHeight: "1.5", weight: 500, role: "Metadata, help text and labels, in sentence case" }, { name: "mono", size: "13px", lineHeight: "1.5", weight: 400, role: "Code and ids" }], deprecated: ["heading1", "heading2", "heading3", "h1", "h2", "h3", "technical", "badge", "eyebrow", "small", "displayXl", "display1", "display2", "headingHero", "headingSection", "body2", "bodyLarge", "bodySmall", "label", "labelDescriptive", "labelTechnical", "micro", "monoXs", "monoSm"], aliasOf: { heading1: "title", heading2: "title", heading3: "title", h1: "title", h2: "title", h3: "title", technical: "mono", badge: "caption", eyebrow: "caption", small: "ui" } }, m = ["DataTableSection", "DestructiveSection", "FormActions", "MetricTiles", "PageHeader"], u = { subpath: "@hirobius/design-system/icons", names: ["Archive", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp", "Bell", "Bookmark", "Calendar", "Check", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "CircleAlert", "CircleCheck", "CircleHelp", "Clock", "Copy", "Download", "Ellipsis", "EllipsisVertical", "ExternalLink", "Eye", "EyeOff", "FileText", "Funnel", "Heart", "House", "Image", "Info", "Link", "Lock", "LogIn", "LogOut", "Mail", "Menu", "Minus", "Pencil", "Plus", "RefreshCw", "Save", "Search", "Settings", "Share", "Star", "Trash2", "TriangleAlert", "Upload", "User", "X"] }, g = [{ id: "foundation", label: "Foundations", description: "Token architecture, CSS pipeline, accessibility, and primitive scales.", criteria: [{ label: "W3C DTCG three-tier token architecture", done: !0 }, { label: "CSS variable pipeline + token verify", done: !0 }, { label: "Primitive scales complete (color, type, space)", done: !1, partial: !0 }, { label: "Token audit clean", done: !1 }] }, { id: "components", label: "Components", description: "Accessible React UI built from foundations and mapped toward Figma parity.", criteria: [{ label: "Component inventory with typed props", done: !0 }, { label: "Action system architecture (buttons, links, groups)", done: !0 }, { label: "Prop tables and API doc coverage", done: !0 }, { label: "Figma parity mapping", done: !1 }] }, { id: "infrastructure-operations", label: "Architecture", description: "System delivery, Figma sync, automation, quality gates, and operational hygiene.", criteria: [{ label: "System manifest + llms.txt AI context", done: !0 }, { label: "Release gate + full audit gate", done: !0 }, { label: "Documentation automation (AST pipeline, LLMS sync)", done: !0 }, { label: "Payload sweep + orphan cleanup", done: !1, partial: !0 }, { label: "Motion system foundations", done: !1, partial: !0 }, { label: "Figma library generated from tokens", done: !1 }, { label: "Code Connect CI + reverse sync", done: !1 }, { label: "AST gatekeeper + token schema validation", done: !1, partial: !0 }, { label: "A11y CI + visual regression pipeline", done: !1, partial: !0 }, { label: "Operational feedback loop + AI retrospective", done: !1, partial: !0 }] }], h = { uncategorized: [], namespaceViolations: [] }, y = "llms.txt", f = "Version increments on any prop rename, token path rename, or removed component. Additions are non-breaking.", v = /* @__PURE__ */ JSON.parse('{"Alert":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/alert.tsx","description":"Alert - compact feedback surface with contextual severity.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=33-34","figmaId":null,"preview":{"exportName":"Alert","sizing":"panel"},"consumers":["src/app/components/badge.tsx","src/app/components/callout.tsx","src/app/components/dialog.tsx","src/app/components/empty-state.tsx","src/app/components/toast.tsx"],"tokenMapping":{"Success accent":"semantic.color.feedback.success","Error accent":"semantic.color.feedback.error","Warning accent":"semantic.color.feedback.warning","Info accent":"semantic.color.feedback.info","Success surface fill":"semantic.color.feedback.bg.success","Error surface fill":"semantic.color.feedback.bg.error","Warning surface fill":"semantic.color.feedback.bg.warning","Info surface fill":"semantic.color.feedback.bg.info","Corner radius":"primitive.radius.4"},"allowedChildren":["*"],"requiredProps":["children"],"a11yRules":[{"rule":"role=alert is set by the component — do not override","required":false}],"variantAxes":["tone"],"componentProperties":[{"name":"Title","type":"TEXT","defaultValue":"Alert title","sourceProp":"title","boundTo":"characters","targetSelector":"Title"},{"name":"Body","type":"TEXT","defaultValue":"Alert message","sourceProp":"children","boundTo":"characters","targetSelector":"Body"}],"states":["default"],"slots":[{"name":"background","figmaSlotName":"Background","tokenBinding":{"fill":"semantic.color.surface.raised"}},{"name":"title","figmaSlotName":"Title","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"body","figmaSlotName":"Body","tokenBinding":{"fill":"semantic.color.content.secondary"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Alert.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/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"]}},"docsPage":"/docs/components/alert","usage":{"when":"Show a persistent inline message with a severity, next to the content it concerns.","whenNot":"A brief confirmation that should disappear on its own, or a status label.","useInstead":[{"component":"ToastProvider","reason":"a brief confirmation that fades away"},{"component":"Badge","reason":"a short status label"}]},"core":true},"CodeBlock":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/code-block.tsx","description":"CodeBlock - code display with copy button and optional collapsible toggle.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-154","figmaId":null,"preview":{"exportName":"CodeBlock","sizing":"panel"},"consumers":[],"tokenMapping":{"Surface fill":"semantic.color.surface.raised","Border stroke":"semantic.color.border.default","Primary text":"semantic.color.content.primary","Secondary text":"semantic.color.content.secondary","Corner radius":"primitive.radius.8","Inner padding":"primitive.space.px20"},"props":{"className":{"type":"string","optional":true},"code":{"type":"string"},"collapsible":{"type":"boolean","default":false},"defaultExpanded":{"type":"boolean","default":false},"filename":{"type":"string","optional":true},"language":{"type":"string","optional":true},"truncateFromStart":{"type":"boolean","default":false},"variant":{"type":"enum","values":["inline","block"],"default":"block"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/CodeBlock.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-154","docsPage":"/docs/patterns/code-block","usage":{"when":"Show a code sample with a copy button, optionally collapsed."}},"Container":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/container.tsx","description":"Container — semantic width-constrained layout. Centers content horizontally and applies semantic max-width constraints. - maxWidth options: \'content\' (760px prose) | \'max\' (1200px full layout) - No arbitrary pixel values allowed Usage: <Container maxWidth=\\"max\\"> <div>...</div> </Container>","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Container","sizing":"panel"},"consumers":["src/app/components/box.tsx","src/app/components/page.tsx","src/app/components/switcher.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/index.ts"],"tokenMapping":{},"props":{"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"maxWidth":{"type":"enum","values":["content","max"],"default":"max"},"padding":{"type":"string","default":"var(--semantic-space-surface-padding)"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Container.tsx","figmaLink":null,"docsPage":"/docs/components/utilities","usage":{"when":"Constrain a page region to the content or maximum width and centre it.","whenNot":"Spacing between siblings, columns, or a surface with padding.","useInstead":[{"component":"Stack","reason":"spacing between siblings"},{"component":"Grid","reason":"columns"},{"component":"Box","reason":"one-off layout that no named primitive covers"}]},"aiRules":"Reach for this named layout intent before Box/sx. maxWidth MUST use the semantic width scale (\'content\' | \'max\'), never a raw px value. Do NOT use the deprecated `padding` prop — it is a no-op; apply padding via Surface or a Stack instead. Do NOT import Container directly inside a page under src/app/pages — use Page, which wraps Container and owns vertical rhythm. For a horizontal gutter, which Container does not support, put a Box with `style={{ paddingInline }}` inside it.","core":true},"Disclosure":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/disclosure.tsx","description":"Disclosure - compact disclosure surface for optional explanatory content.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-453","figmaId":null,"preview":{"exportName":"Disclosure","sizing":"panel"},"consumers":["src/app/components/tabs.tsx"],"tokenMapping":{"Surface fill":"semantic.color.surface.raised","Open surface fill":"semantic.color.surface.accentSubtle","Border stroke":"semantic.color.border.default","Open border stroke":"semantic.color.border.accent","Label typography":"semantic.typography.sidebar.groupLabel","Icon color":"semantic.color.content.secondary","Horizontal padding":"semantic.space.sidebar.sectionGap","Vertical padding":"semantic.space.sidebar.sectionGap"},"props":{"accent":{"type":"boolean","default":false},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"contentStyle":{"type":"CSSProperties","optional":true},"defaultOpen":{"type":"boolean","default":false},"label":{"type":"ReactNode"},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true},"triggerStyle":{"type":"CSSProperties","optional":true},"variant":{"type":"enum","values":["panel","nav","card"],"default":"panel"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"fill":"semantic.color.surface.canvas"}},{"name":"trigger","figmaSlotName":"Trigger","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"icon-end","figmaSlotName":"IconRight","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"content","figmaSlotName":"Content","tokenBinding":{}}],"sourcePath":"src/app/components/Disclosure.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-453","docsPage":"/docs/components/disclosure","usage":{"when":"Hide optional explanatory content behind a heading that people can expand.","whenNot":"Content people must see, or switching between panels.","useInstead":[{"component":"Tabs","reason":"switching between panels of content"}]},"core":true},"Divider":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/divider.tsx","description":"Divider — semantic separator between content regions.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-26","figmaId":null,"preview":{"exportName":"Divider","sizing":"panel"},"consumers":["src/app/components/metadata-list.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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-26","props":{"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal"},"spacing":{"type":"string | number","optional":true},"strong":{"type":"boolean","optional":true},"variant":{"type":"enum","values":["strong","default"],"optional":true}},"propConstraints":{"orientation":{"type":"enum","values":["horizontal","vertical"]},"strong":{"type":"boolean"},"variant":{"type":"enum","values":["strong","default"]}},"docsPage":"/docs/components/divider","usage":{"when":"Separate two blocks of content with a thin line.","whenNot":"Spacing alone would do, or the separation needs a container.","useInstead":[{"component":"Stack","reason":"gap-based spacing between siblings"},{"component":"Surface","reason":"a bounded region with its own background"}]},"core":true},"ErrorPattern":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/error-pattern.tsx","description":"ErrorPattern - governed recovery surface for routed application errors.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-839","figmaId":null,"preview":{"exportName":"ErrorPattern","sizing":"panel"},"consumers":["src/index.ts"],"tokenMapping":{"Headline typography":"semantic.typography.display","Message typography":"semantic.typography.h2","Message text color":"semantic.color.content.secondary","Layout gap":"semantic.space.layout.gap"},"props":{"displayText":{"type":"string","default":"Oops"},"message":{"type":"string","default":"Something went wrong"}},"allowedChildren":["*"],"propConstraints":{"displayText":{"type":"string"},"message":{"type":"string"}},"requiredProps":[],"a11yRules":[{"rule":"Headline renders as <h1> via Text variant=display — only one ErrorPattern per page","required":true}],"variantAxes":[],"componentProperties":[],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.layout.gap"}},{"name":"headline","figmaSlotName":"Headline","tokenBinding":{"typography":"semantic.typography.display","color":"semantic.color.content.primary"}},{"name":"message","figmaSlotName":"Message","tokenBinding":{"typography":"semantic.typography.h2","color":"semantic.color.content.secondary"}},{"name":"action","figmaSlotName":"Action"}],"tier":"template","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-839","docsPage":"/docs/patterns/error-pattern","usage":{"when":"Show an error with a short message and a Back button, in place or as a full page."}},"Grid":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/grid.tsx","description":"Grid — responsive grid composition primitive. Enforces semantic gap and column values. No arbitrary CSS grid. - layout=\'fixed\': responsive base (collapses via CSS at tablet/mobile). `columns` sets desktop count (default 12). Tablet/mobile clamp to min(8, cols) and min(4, cols) respectively. - layout=\'auto-fit\': responsive card wrapping via auto-fit. - layout=\'auto-fill\': tile wrapping at `minItemWidth` (TileGrid\'s recipe; 0.20.0 removed TileGrid). - subgrid=true: sets gridTemplateColumns:\'subgrid\' for nested alignment. Usage (default responsive 12-col): <Grid> <Grid.Item colSpan={6}>…</Grid.Item> <Grid.Item colSpan={6}>…</Grid.Item> </Grid> Usage (responsive auto-fit): <Grid layout=\\"auto-fit\\"> <Card /> <Card /> </Grid>","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Grid","sizing":"panel"},"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/box.tsx","src/app/components/container.tsx","src/app/components/grid.test.tsx","src/app/components/metric-tiles.test.tsx","src/app/components/metric-tiles.tsx","src/app/components/segmented-control.test.tsx","src/app/components/sidebar.tsx","src/app/components/stack.tsx","src/app/components/table.tsx","src/app/components/tooltip.tsx","src/index.ts"],"tokenMapping":{},"props":{"align":{"type":"enum","values":["center","end","start","stretch"],"default":"start"},"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"columns":{"type":"number","default":12},"gap":{"type":"enum","values":["medium","tight","normal","inset","spacious"],"default":"inset"},"layout":{"type":"enum","values":["fixed","auto-fit","auto-fill"],"default":"fixed"},"minItemWidth":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true},"subgrid":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{"align":{"type":"enum","values":["center","end","start","stretch"]},"className":{"type":"string"},"gap":{"type":"enum","values":["medium","tight","normal","inset","spacious"]},"layout":{"type":"enum","values":["fixed","auto-fit","auto-fill"]},"minItemWidth":{"type":"string"},"subgrid":{"type":"boolean"}},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"states":["default"],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.component.gap"}},{"name":"cell","figmaSlotName":"Cell","tokenBinding":{"fill":"semantic.color.surface.raised"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Grid.tsx","figmaLink":null,"docsPage":"/docs/components/grid","usage":{"when":"Lay out content in columns that adapt to the screen width, or line up nested content with subgrid.","whenNot":"A single row or column, or styling a surface.","useInstead":[{"component":"Stack","reason":"a single row or column"},{"component":"Box","reason":"one-off layout that no named primitive covers"}]},"aiRules":"Use Grid for spatial layout, not for surface styling or content padding. Do NOT apply background, border, or internal padding directly to Grid to mimic a card. Do NOT use arbitrary CSS grid templates when fixed, auto-fit, auto-fill, or subgrid modes already express the layout. Do NOT use Grid for simple one-dimensional stacks where Stack is sufficient.","core":true},"Icon":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/icon.tsx","description":"Icon — semantic icon wrapper for Lucide icons.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=27-2","figmaId":null,"preview":{"exportName":"Icon","sizing":"panel"},"consumers":["src/app/components/alert.tsx","src/app/components/avatar.tsx","src/app/components/breadcrumb.tsx","src/app/components/button.test.tsx","src/app/components/button.tsx","src/app/components/checkbox.tsx","src/app/components/code-block.tsx","src/app/components/combobox.tsx","src/app/components/disclosure.tsx","src/app/components/hds-tooltip.tsx","src/app/components/inline-code.test.tsx","src/app/components/inline-code.tsx","src/app/components/inline-link.tsx","src/app/components/menu.tsx","src/app/components/pagination.markup.test.tsx","src/app/components/pagination.tsx","src/app/components/select.tsx","src/app/components/table.tsx","src/app/components/toast.tsx"],"tokenMapping":{"Small icon size":"primitive.typography.size.base","Medium icon size":"primitive.typography.size.lg","Large icon size":"primitive.typography.size.xl","Primary color":"semantic.color.content.primary","Secondary color":"semantic.color.content.secondary","Accent color":"semantic.color.content.accent","Disabled color":"semantic.color.content.disabled"},"props":{"aria-hidden":{"type":"boolean","default":true},"className":{"type":"string","optional":true},"color":{"type":"string","default":"currentColor"},"icon":{"type":"LucideIcon"},"size":{"type":"IconSize","default":"small"},"style":{"type":"CSSProperties","optional":true},"weight":{"type":"enum","values":["fill","bold","light","thin","regular","duotone"],"optional":true}},"allowedChildren":[],"propConstraints":{"aria-hidden":{"type":"boolean"},"className":{"type":"string"},"color":{"type":"string"},"weight":{"type":"enum","values":["fill","bold","light","thin","regular","duotone"]}},"requiredProps":["icon"],"a11yRules":[{"rule":"Must have aria-label when used without adjacent text","required":true}],"variantAxes":["size"],"componentProperties":[],"states":["default"],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"paddingLeft":"semantic.space.subgrid.xs","paddingRight":"semantic.space.subgrid.xs","paddingTop":"semantic.space.subgrid.xs","paddingBottom":"semantic.space.subgrid.xs"}},{"name":"glyph","figmaSlotName":"Glyph","tokenBinding":{"fill":"semantic.color.content.primary"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Icon.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=27-2","docsPage":"/docs/components/icon","usage":{"when":"Show a Lucide icon at a set size and color.","whenNot":"A control someone can activate, or a picture that carries content.","useInstead":[{"component":"Button","reason":"a clickable control, with iconOnly for an icon-only one"},{"component":"Avatar","reason":"a picture of a person or entity"}]},"core":true},"InlineCode":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/inline-code.tsx","description":"InlineCode — inline code chip for token paths, file paths, and code-adjacent prose.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-155","figmaId":null,"preview":{"exportName":"InlineCode","sizing":"panel"},"consumers":["src/app/components/inline-code.test.tsx","src/app/components/metadata-list.tsx"],"tokenMapping":{"Font family":"primitive.typography.family.mono","Label text":"semantic.color.content.primary","Border stroke":"semantic.color.border.default","Corner radius":"primitive.radius.2","Horizontal padding":"primitive.space.px4","Vertical padding":"primitive.space.px2"},"props":{"children":{"type":"ReactNode"},"compact":{"type":"boolean","optional":true},"copyable":{"type":"boolean","default":false},"density":{"type":"enum","values":["comfortable","compact"],"optional":true},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/InlineCode.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-155","docsPage":null},"InlineLink":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/inline-link.tsx","description":"InlineLink ” inline navigation and external-link primitive for body copy.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-161","figmaId":null,"preview":{"exportName":"InlineLink","sizing":"panel"},"consumers":["src/app/components/button.tsx","src/app/components/inline-link.test.tsx","src/app/components/text.tsx"],"tokenMapping":{"Link text":"semantic.color.content.accent","Hover text":"semantic.color.content.primary","Transition motion":"semantic.motion.productive"},"props":{"children":{"type":"ReactNode"},"externalIcon":{"type":"boolean","default":true},"href":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{"externalIcon":{"type":"boolean"},"href":{"type":"string"}},"requiredProps":[],"a11yRules":[{"rule":"Link text must be descriptive — avoid \\"click here\\" or \\"read more\\"","required":true},{"rule":"External links must signal new-tab behavior via aria-label or visually hidden text","required":false}],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/InlineLink.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-161","docsPage":"/docs/components/inline-link","usage":{"when":"Link to a route or external URL from inside body copy.","whenNot":"An action that changes something, or a control that needs button styling.","useInstead":[{"component":"Button","reason":"an action or a link that needs button styling"},{"component":"Text","reason":"unlinked body copy"}]},"core":true},"Input":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/input.tsx","description":"Input — text field primitive with label, helper, and error slots.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=38-20","figmaId":null,"preview":{"exportName":"Input","sizing":"panel"},"consumers":["src/app/components/field.tsx","src/app/components/form-control.ts","src/app/components/form.tsx","src/app/components/input.test.tsx","src/app/components/segmented-control.tsx","src/app/components/select.tsx","src/app/components/slider.tsx","src/app/components/textarea.tsx","src/app/design-system/generated-token-descriptions.ts","src/index.ts"],"tokenMapping":{"Surface fill":"role.background","Label text":"role.foreground","Border stroke":"role.input","Error border":"role.destructive","Corner radius":"role.radius"},"sourcePath":"src/app/components/Input.tsx","sourceExport":"Input","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},"inputClassName":{"type":"string","optional":true},"label":{"type":"string","optional":true},"leadingVisual":{"type":"ReactNode","optional":true},"loading":{"type":"boolean","default":false},"prefix":{"type":"ReactNode","optional":true},"size":{"type":"InputSize","default":"md"},"suffix":{"type":"ReactNode","optional":true},"textStyle":{"type":"enum","values":["body","mono"],"default":"body"},"trailingVisual":{"type":"ReactNode","optional":true},"type":{"type":"enum","values":["text","email","password","search","tel","url","number","date","time","datetime-local"],"default":"text"}},"tokens":{"background":"role.background","text":"role.foreground","border":"role.input","borderError":"role.destructive","radius":"role.radius","focusRing":"role.ring","placeholder":"role.muted-foreground","helperText":"role.muted-foreground","errorText":"role.destructive","disabledBg":"role.muted","disabledText":"role.muted-foreground"},"figmaPropertyMapping":{"size":"Size","label":"Label"},"states":["default","focus","filled","error","disabled","loading"],"allowedChildren":[],"propConstraints":{"className":{"type":"string"},"disabled":{"type":"boolean"},"error":{"type":"boolean"},"errorMessage":{"type":"string"},"helperText":{"type":"string"},"inputClassName":{"type":"string"},"label":{"type":"string"},"loading":{"type":"boolean"},"textStyle":{"type":"enum","values":["body","mono"]},"type":{"type":"enum","values":["text","email","password","search","tel","url","number","date","time","datetime-local"]}},"requiredProps":[],"a11yRules":[{"rule":"Must have associated label via label prop or aria-labelledby","required":true}],"variantAxes":["size","state"],"componentProperties":[{"name":"Label","type":"TEXT","defaultValue":"Label","sourceProp":"label","boundTo":"characters","targetSelector":"Label"}],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.subgrid.xs"}},{"name":"label","figmaSlotName":"Label","tokenBinding":{"fill":"role.muted-foreground"}},{"name":"background","figmaSlotName":"InputShell","tokenBinding":{"fill":"role.background","stroke":"role.input","cornerRadius":"role.radius"}},{"name":"placeholder","figmaSlotName":"Placeholder","tokenBinding":{"fill":"role.muted-foreground"}},{"name":"helper-text","figmaSlotName":"Helper","tokenBinding":{"fill":"role.muted-foreground"}},{"name":"error-text","figmaSlotName":"Error","tokenBinding":{"fill":"role.destructive"}}],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=38-20","docsPage":"/docs/components/input","usage":{"when":"Collect a single line of text, a number, an email, a password, a date or a time, with label, helper and error slots.","whenNot":"Multi-line text, or choosing from a fixed list of options.","useInstead":[{"component":"Textarea","reason":"multi-line text"},{"component":"Select","reason":"a short fixed list"},{"component":"Combobox","reason":"a long fixed list that needs search"}]},"core":true},"SegmentedControl":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-334","figmaId":null,"preview":{"exportName":"SegmentedControl","sizing":"panel"},"consumers":["src/app/components/radio.tsx","src/app/components/segmented-control.test.tsx","src/app/components/tabs.tsx","src/app/hooks/useInteractionState.ts"],"tokenMapping":{"Frame surface fill":"semantic.color.surface.page","Frame border stroke":"semantic.color.border.default","Active segment fill":"semantic.color.surface.accent","Active segment text":"semantic.color.content.onAccent","Inactive segment text":"semantic.color.content.secondary","Corner radius":"semantic.radius.action","Rail inner padding":"primitive.space.2"},"props":{"aria-label":{"type":"string","optional":true},"fullWidth":{"type":"boolean","default":false},"label":{"type":"string","optional":true},"onChange":{"type":"(value: string) => void"},"options":{"type":"HdsSegmentedOption[]"},"railPadding":{"type":"Padding<string | number>","optional":true},"segmentPaddingX":{"type":"PaddingLeft<string | number>","optional":true},"size":{"type":"enum","values":["sm","md"],"default":"md"},"value":{"type":"string"},"variant":{"type":"enum","values":["primary","secondary"],"default":"primary"}},"allowedChildren":["*"],"propConstraints":{"aria-label":{"type":"string"},"fullWidth":{"type":"boolean"},"label":{"type":"string"},"size":{"type":"enum","values":["sm","md"]},"value":{"type":"string"},"variant":{"type":"enum","values":["primary","secondary"]}},"requiredProps":[],"a11yRules":[{"rule":"Must have accessible group label (aria-label or aria-labelledby on the container)","required":true},{"rule":"Selected option must be communicated via aria-pressed or aria-selected","required":true}],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/SegmentedControl.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-334","docsPage":"/docs/components/segmented-control","usage":{"when":"Switch between two to five mutually exclusive views or modes in a compact row.","whenNot":"A form choice that submits with the form, or more than five options.","useInstead":[{"component":"Radio","reason":"a form choice that submits with the form"},{"component":"Tabs","reason":"switching between panels of content"},{"component":"Select","reason":"more than five options"}]},"core":true},"Stack":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/stack.tsx","description":"Stack — one-dimensional layout primitive.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Stack","sizing":"panel"},"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/box.tsx","src/app/components/container.tsx","src/app/components/data-table-section.tsx","src/app/components/destructive-section.tsx","src/app/components/disclosure.tsx","src/app/components/divider.tsx","src/app/components/error-pattern.tsx","src/app/components/form-actions.test.tsx","src/app/components/form-actions.tsx","src/app/components/grid.tsx","src/app/components/page-header.tsx","src/app/components/page.tsx","src/app/components/stack.test.tsx","src/app/components/surface.tsx","src/app/components/switcher.tsx","src/app/components/table.tsx","src/app/components/tooltip.tsx","src/index.ts"],"tokenMapping":{"Default gap":"primitive.space.3","Compact gap":"primitive.space.2","Wide gap":"primitive.space.6"},"props":{"align":{"type":"enum","values":["start","center","end","stretch"],"optional":true},"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"direction":{"type":"enum","values":["row","column"],"default":"column"},"gap":{"type":"GapOption","default":"tight"},"justify":{"type":"enum","values":["start","center","end","space-between"],"optional":true},"style":{"type":"CSSProperties","optional":true},"wrap":{"type":"FlexWrap","optional":true}},"allowedChildren":["*"],"propConstraints":{"align":{"type":"enum","values":["start","center","end","stretch"]},"className":{"type":"string"},"direction":{"type":"enum","values":["row","column"]},"justify":{"type":"enum","values":["start","center","end","space-between"]}},"requiredProps":[],"a11yRules":[],"variantAxes":["direction"],"componentProperties":[],"states":["default"],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.component.gap"}},{"name":"item","figmaSlotName":"Item","tokenBinding":{"fill":"semantic.color.surface.raised","stroke":"semantic.color.border.default"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Stack.tsx","figmaLink":null,"docsPage":"/docs/components/stack","usage":{"when":"Space items in a row or column with even gaps.","whenNot":"Multi-column layout, or giving content a background or padding.","useInstead":[{"component":"Grid","reason":"multi-column layout"},{"component":"Surface","reason":"content that needs a background or padding"}]},"aiRules":"Use Stack for flow spacing and simple flex alignment only. Do NOT use Stack to create card chrome, internal surface padding, or page-width constraints. Do NOT apply arbitrary margins to Stack to fake spacing between children when the gap prop should own that rhythm. Do NOT use Stack for true two-dimensional layouts that require Grid.","core":true},"Table":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/table.tsx","description":"Table - structured data table primitive for documentation and compact UI matrices.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-300","figmaId":null,"preview":{"exportName":"Table","sizing":"full"},"consumers":["src/app/components/data-table-section.tsx","src/app/components/table.test.tsx","src/app/data/manifest-types.ts"],"tokenMapping":{},"props":{"caption":{"type":"ReactNode","optional":true},"captionAction":{"type":"ReactNode","optional":true},"columns":{"type":"TableColumn[]"},"density":{"type":"enum","values":["compact","comfortable"],"optional":true},"description":{"type":"ReactNode","optional":true},"flush":{"type":"boolean","default":true},"labelledBy":{"type":"string","optional":true},"minWidth":{"type":"string | number","optional":true},"rows":{"type":"TableRow[]"},"stickyHeader":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{"density":{"type":"enum","values":["compact","comfortable"]},"flush":{"type":"boolean"},"labelledBy":{"type":"string"},"stickyHeader":{"type":"boolean"}},"requiredProps":[],"a11yRules":[{"rule":"Column headers must use <th> with scope=\\"col\\", row headers with scope=\\"row\\"","required":true},{"rule":"Table must have caption or aria-label describing its contents","required":false}],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Table.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-300","docsPage":"/docs/components/table","usage":{"when":"Show rows of structured data in aligned columns, with optional sorting.","whenNot":"A single record, a short list of links, or content that reflows as cards.","useInstead":[{"component":"Field","reason":"one record as label and value pairs"},{"component":"Stack","reason":"a short list of items"}]},"core":true},"Tag":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=32-11","figmaId":null,"preview":{"exportName":"Tag","sizing":"panel"},"consumers":["src/app/components/badge.tsx","src/app/components/box.tsx","src/app/components/breadcrumb.tsx","src/app/components/card.tsx","src/app/components/grid.tsx","src/app/components/pin.tsx","src/app/components/reveal.tsx","src/app/components/sidebar.tsx","src/app/components/stack.tsx","src/app/components/surface.tsx","src/app/components/switcher.tsx","src/app/components/text.tsx","src/app/components/visually-hidden.tsx","src/app/design-system/generated-token-descriptions.ts"],"tokenMapping":{"Surface fill":"component.tag.background","Label text":"component.tag.text","Border stroke":"component.tag.border","Corner radius":"component.tag.radius","Type size":"component.tag.fontSize","Type weight":"component.tag.fontWeight","Line rhythm":"component.tag.lineHeight","Min width":"component.tag.minWidth","Min height":"component.tag.minHeight","Horizontal padding":"component.tag.paddingX","Vertical padding":"component.tag.paddingY","Active label text":"component.tag.activeText","Active surface fill":"component.tag.activeBackground","Active border stroke":"component.tag.activeBorder","Active hover fill":"component.tag.activeHover"},"props":{"active":{"type":"boolean","default":false},"children":{"type":"ReactNode"}},"allowedChildren":[],"propConstraints":{"active":{"type":"boolean"}},"requiredProps":["children"],"a11yRules":[{"rule":"When used as interactive chip (onClick), must have role=\\"button\\" and keyboard activation","required":true},{"rule":"When used as status indicator (no onClick), role should be \\"status\\" or omitted","required":false}],"variantAxes":["active"],"componentProperties":[{"name":"Label","type":"TEXT","defaultValue":"Tag","sourceProp":"children","boundTo":"characters","targetSelector":"Label"}],"states":["default","hover","disabled"],"slots":[{"name":"background","figmaSlotName":"Background","tokenBinding":{"fill":"semantic.color.surface.raised","stroke":"semantic.color.border.default","paddingLeft":"component.tag.paddingX","paddingRight":"component.tag.paddingX","paddingTop":"component.tag.paddingY","paddingBottom":"component.tag.paddingY","cornerRadius":"semantic.radius.action"}},{"name":"label","figmaSlotName":"Label","tokenBinding":{"fill":"semantic.color.content.secondary"}}],"tokens":{"minWidth":"component.tag.minWidth","minHeight":"component.tag.minHeight"},"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Tag.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=32-11","docsPage":"/docs/components/tag","usage":{"when":"Show an interactive filter or category chip that people can toggle.","whenNot":"A read-only status or count label.","useInstead":[{"component":"Badge","reason":"a read-only status or count"}]},"core":true},"Surface":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"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) - Radius: `rounded-lg` (role radius + 4px), the one container radius shared with Card - 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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-27","figmaId":null,"preview":{"exportName":"Surface","sizing":"panel"},"consumers":["src/app/components/card.tsx","src/app/components/container.tsx","src/app/components/dialog.tsx","src/app/components/disclosure.tsx","src/app/components/divider.tsx","src/app/components/empty-state.tsx","src/app/components/error-pattern.tsx","src/app/components/form-control.ts","src/app/components/metric-tiles.tsx","src/app/components/popover.tsx","src/app/components/slider.tsx","src/app/components/stack.tsx","src/app/components/surface-padding.ts","src/app/components/table.tsx","src/app/components/tooltip.test.tsx","src/app/components/tooltip.tsx","src/app/context/hds-theme.tsx"],"tokenMapping":{},"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"overflow":{"type":"Overflow","optional":true},"padding":{"type":"PaddingOption","default":"component"},"shadow":{"type":"boolean","default":false},"style":{"type":"CSSProperties","optional":true},"theme":{"type":"enum","values":["light","dark"],"optional":true}},"allowedChildren":["*"],"propConstraints":{"className":{"type":"string"},"shadow":{"type":"boolean"},"theme":{"type":"enum","values":["light","dark"]}},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":true,"sourcePath":"src/app/components/Surface.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-27","states":["default"],"docsPage":"/docs/components/surface","usage":{"when":"Give a block of content a background and padding, with no header or footer.","whenNot":"Page layout, section spacing, width constraints, or content that needs slots.","useInstead":[{"component":"Card","reason":"content that needs header, body or footer slots"},{"component":"Stack","reason":"spacing between siblings"}]},"aiRules":"Use Surface only when content needs a background-bearing inset wrapper. Do NOT use Surface for macro page layouts, section spacing, or pure width constraints. Do NOT nest extra padded wrappers inside Surface to simulate another card. Do NOT recreate surface behavior with raw div padding, backgroundColor, or border styles elsewhere.","core":true},"Card":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/card.tsx","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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=39-11","figmaId":null,"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/card-progress.test.tsx","src/app/components/card.test.tsx","src/app/components/destructive-section.tsx","src/app/components/empty-state.tsx","src/app/components/field.tsx","src/app/components/focus-visible.test.tsx","src/app/components/grid.tsx","src/app/components/metadata-list.tsx","src/app/components/metric-tiles.tsx","src/app/components/radio.test.tsx","src/app/components/stat.tsx","src/app/components/status-tile.tsx","src/app/components/surface-padding.ts","src/app/components/surface.tsx","src/app/design-system/generated-token-descriptions.ts","src/index.ts"],"tokenMapping":{"Surface fill":"role.card","Border stroke":"role.border","Corner radius":"role.radius"},"sourcePath":"src/app/components/Card.tsx","sourceExport":"Card","props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","optional":true},"bordered":{"type":"boolean","default":false},"gap":{"type":"GapOption","default":"tight"},"noPadding":{"type":"boolean","default":false},"onSelectedChange":{"type":"(selected: boolean) => void","optional":true},"padding":{"type":"PaddingOption","default":"component"},"selectable":{"type":"boolean","default":false},"selected":{"type":"boolean","default":false},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"],"default":"neutral"},"variant":{"type":"enum","values":["default","accent"],"default":"default"}},"tokens":{"background":"role.card","text":"role.card-foreground","border":"role.border","radius":"role.radius","description":"role.muted-foreground"},"figmaPropertyMapping":{"padding":"Padding","gap":"Gap","variant":"Variant","tone":"Tone"},"states":["default"],"allowedChildren":["*"],"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","figmaSlotName":"Header","tokenBinding":{"fill":"role.card-foreground"}},{"name":"title","figmaSlotName":"Title","tokenBinding":{"fill":"role.card-foreground"}},{"name":"description","figmaSlotName":"Description","tokenBinding":{"fill":"role.muted-foreground"}},{"name":"body","figmaSlotName":"Body","tokenBinding":{"fill":"role.card-foreground"}},{"name":"footer","figmaSlotName":"Footer","tokenBinding":{"fill":"role.card-foreground"}}],"tier":"primitive","docExempt":false,"compoundMembers":["Header","Title","Description","Body","Footer"],"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=39-11","propConstraints":{"bordered":{"type":"boolean"},"noPadding":{"type":"boolean"},"selectable":{"type":"boolean"},"selected":{"type":"boolean"},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"]},"variant":{"type":"enum","values":["default","accent"]}},"docsPage":"/docs/components/card","usage":{"when":"Group related content on a raised surface with header, body, footer and metric slots, or as one selectable option.","whenNot":"A bare padded background with no slot anatomy, or a single headline figure.","useInstead":[{"component":"Surface","reason":"a padded background without slot anatomy"},{"component":"Card.Metric","reason":"a single headline figure"}]},"core":true},"Text":{"category":"Typography","filePath":"src/app/components/text.tsx","description":"Text — polymorphic typography primitive spanning the full HDS type ramp.","hidden":false,"props":{"as":{"type":"\\"symbol\\" | \\"object\\" | \\"title\\" | \\"a\\" | \\"button\\" | \\"div\\" | \\"form\\" | \\"h2\\" | \\"h3\\" | \\"img\\" | \\"input\\" | \\"label\\" | \\"li\\" | \\"nav\\" | \\"ol\\" | \\"p\\" | \\"select\\" | \\"span\\" | \\"svg\\" | \\"ul\\" | \\"abbr\\" | \\"address\\" | ... 158 more ...","default":"defaultTagMap[variant]"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true},"variant":{"type":"TextVariant"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"categorySource":"jsdoc","governedCategory":true,"figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2022-31","figmaId":null,"preview":{"exportName":"Text","sizing":"panel"},"consumers":["src/app/components/alert-dialog.tsx","src/app/components/card.tsx","src/app/components/data-table-section.tsx","src/app/components/destructive-section.tsx","src/app/components/dialog.tsx","src/app/components/error-pattern.tsx","src/app/components/hds-tooltip.tsx","src/app/components/inline-link.tsx","src/app/components/kbd.tsx","src/app/components/table.tsx","src/app/components/visually-hidden.tsx","src/app/design-system/generated-token-descriptions.ts","src/brand/overlay.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":true,"sourcePath":"src/app/components/Text.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2022-31","docsPage":"/docs/components/text","usage":{"when":"Set any text on the type ramp, with the element chosen by `as`.","whenNot":"Navigation links, or a keyboard hint.","useInstead":[{"component":"InlineLink","reason":"a link inside body copy"},{"component":"Kbd","reason":"a keyboard key hint"}]},"core":true},"Dialog":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/dialog.tsx","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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-27","figmaId":null,"tier":"primitive","preview":{"exportName":"Dialog","sizing":"panel"},"consumers":["src/app/components/alert-dialog.test.tsx","src/app/components/alert-dialog.tsx","src/app/components/dialog.test.tsx","src/app/components/menu.tsx","src/app/components/popover.tsx","src/app/components/toast.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/styles/__tests__/scrim-and-color-scheme.test.ts"],"tokenMapping":{},"variantAxes":["state"],"componentProperties":[{"name":"Title","type":"TEXT","defaultValue":"Dialog title","sourceProp":"Title.children","boundTo":"characters","targetSelector":"Title"},{"name":"Description","type":"TEXT","defaultValue":"Dialog description","sourceProp":"Description.children","boundTo":"characters","targetSelector":"Description"},{"name":"Show close","type":"BOOLEAN","defaultValue":true,"sourceProp":"Content.hideClose","boundTo":"visibility","targetSelector":"Close","invert":true}],"sourcePath":"src/app/components/Dialog.tsx","sourceExport":"Dialog","props":{"children":{"type":"ReactNode","optional":true},"defaultOpen":{"type":"boolean","optional":true},"modal":{"type":"boolean","optional":true},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true}},"tokens":{"background":"role.popover","text":"role.popover-foreground","border":"role.border","radius":"role.radius","shadow":"semantic.shadow.overlay","scrim":"role.scrim","descriptionText":"role.muted-foreground","closeHover":"role.accent","closeHoverText":"role.accent-foreground","focusRing":"role.ring"},"figmaPropertyMapping":{"Title.children":"Title","Description.children":"Description","Content.hideClose":"Show close","modal":"Modal"},"states":["closed","open"],"slots":[{"name":"overlay","figmaSlotName":"Overlay","tokenBinding":{"fill":"role.foreground"}},{"name":"surface","figmaSlotName":"Surface","tokenBinding":{"fill":"role.popover","stroke":"role.border","cornerRadius":"role.radius"}},{"name":"header","figmaSlotName":"Header","tokenBinding":{"fill":"role.popover-foreground"}},{"name":"title","figmaSlotName":"Title","tokenBinding":{"fill":"role.popover-foreground","typography":"semantic.typography.h3"}},{"name":"description","figmaSlotName":"Description","tokenBinding":{"fill":"role.muted-foreground","typography":"semantic.typography.body"}},{"name":"footer","figmaSlotName":"Footer","tokenBinding":{"fill":"role.popover-foreground"}},{"name":"close","figmaSlotName":"Close","tokenBinding":{"fill":"role.muted-foreground"}},{"name":"trigger","description":"The element that opens the dialog (Dialog.Trigger).","source":"jsdoc"}],"allowedChildren":["*"],"requiredProps":["children"],"a11yRules":[{"rule":"Must have an accessible name via Dialog.Title or aria-label","required":true},{"rule":"Description should be associated via Dialog.Description when present","required":false}],"compoundMembers":["Trigger","Portal","Overlay","Content","Header","Footer","Title","Description","Close"],"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-27","propConstraints":{"defaultOpen":{"type":"boolean"},"modal":{"type":"boolean"},"open":{"type":"boolean"}},"docsPage":"/docs/components/dialog","usage":{"when":"Interrupt the page with a modal that needs a decision or focused input before people continue.","whenNot":"A preview on hover, a message that needs no reply, or content that can stay inline.","useInstead":[{"component":"Tooltip","reason":"a short hint on hover or focus"},{"component":"Alert","reason":"a message that needs no reply"},{"component":"ToastProvider","reason":"a brief confirmation"},{"component":"AlertDialog","reason":"confirming a destructive or irreversible action"}]},"keyboard":[{"keys":"Enter/Space","effect":"Opens the dialog from the trigger and moves focus inside it."},{"keys":"Escape","effect":"Closes the dialog and returns focus to the trigger."},{"keys":"Tab","effect":"Cycles focus inside the open dialog."},{"keys":"Shift+Tab","effect":"Cycles focus backwards inside the open dialog."}],"core":true},"Button":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/button.tsx","description":"Triggers an action when activated.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=28-138","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=28-138","tier":"primitive","preview":{"exportName":"Button","sizing":"panel"},"consumers":["src/app/components/alert-dialog.tsx","src/app/components/button.test.tsx","src/app/components/card.test.tsx","src/app/components/card.tsx","src/app/components/data-table-section.tsx","src/app/components/destructive-section.tsx","src/app/components/dialog.tsx","src/app/components/error-pattern.tsx","src/app/components/form-actions.tsx","src/app/components/form.tsx","src/app/components/hds-tooltip.tsx","src/app/components/icon.tsx","src/app/components/inline-code.test.tsx","src/app/components/inline-code.tsx","src/app/components/inline-link.tsx","src/app/components/menu.tsx","src/app/components/pagination.markup.test.tsx","src/app/components/pagination.tsx","src/app/components/popover.tsx","src/app/components/segmented-control.tsx","src/app/components/select.tsx","src/app/components/toast.tsx","src/app/context/DemoStateContext.tsx","src/app/design-system/generated-token-descriptions.ts","src/form/index.ts","src/index.ts","src/mui/index.ts","src/styles/__tests__/pressed-overlay-token.test.ts"],"tokenMapping":{},"variantAxes":["variant","tone","size","state"],"componentProperties":[{"name":"Label","type":"TEXT","defaultValue":"Button","sourceProp":"label","boundTo":"characters","targetSelector":"Label"},{"name":"Show icon","type":"BOOLEAN","defaultValue":false,"sourceProp":"iconLeft","boundTo":"visibility","targetSelector":"IconLeft"},{"name":"Show trail icon","type":"BOOLEAN","defaultValue":false,"sourceProp":"iconRight","boundTo":"visibility","targetSelector":"IconRight"}],"sourcePath":"src/app/components/button.tsx","sourceExport":"Button","props":{"asChild":{"type":"boolean","default":false},"defaultPressed":{"type":"boolean","optional":true},"disabled":{"type":"boolean","optional":true},"iconLeft":{"type":"ReactNode","optional":true},"iconOnly":{"type":"boolean","default":false},"iconRight":{"type":"ReactNode","optional":true},"label":{"type":"string","optional":true},"loading":{"type":"boolean","default":false},"onPressedChange":{"type":"(pressed: boolean) => void","optional":true},"pressed":{"type":"boolean","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"],"optional":true},"variant":{"type":"enum","values":["primary","secondary","tertiary"],"optional":true}},"tokens":{"background":"role.primary","text":"role.primary-foreground","border":"role.input","hoverSurface":"role.accent","hoverText":"role.accent-foreground","pressedOverlay":"role.pressed-overlay","focusRing":"role.ring","radius":"role.radius"},"figmaPropertyMapping":{"variant":"Variant","tone":"Tone","size":"Size","label":"Label","iconLeft":"Show icon","iconRight":"Show trail icon"},"states":["default","hover","focus","active","disabled","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":{"asChild":{"type":"boolean"},"defaultPressed":{"type":"boolean"},"disabled":{"type":"boolean"},"iconOnly":{"type":"boolean"},"label":{"type":"string"},"loading":{"type":"boolean"},"pressed":{"type":"boolean"},"size":{"type":"enum","values":["sm","md","lg"]},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"]},"variant":{"type":"enum","values":["primary","secondary","tertiary"]}},"docsPage":"/docs/components/button","usage":{"when":"Run an action, such as submit, save or open a dialog. For an icon-only control pass iconOnly, iconLeft and label; for an on/off toggle pass pressed.","whenNot":"Navigating to another page, where a link is the correct element.","useInstead":[{"component":"InlineLink","reason":"navigation to another page"}]},"core":true},"Callout":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/callout.tsx","description":"Tone-driven tinted callout for notes, quotes, hypotheses — the same feedback fill language as Alert, without Alert\'s icon or status role.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-85","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-85","tier":"primitive","preview":{"exportName":"Callout","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"italic":{"type":"boolean","default":false},"tone":{"type":"enum","values":["accent","info","success","warning","danger"],"default":"info"}},"allowedChildren":["*"],"propConstraints":{"italic":{"type":"boolean"},"tone":{"type":"enum","values":["accent","info","success","warning","danger"]}},"requiredProps":[],"a11yRules":[{"rule":"Callout is decorative; tone is signaled visually — pair with semantic role when meaning matters","required":false}],"docsPage":null},"EmptyState":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/empty-state.tsx","description":"EmptyState — consistent no-data placeholder for lists, grids, and sections.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-352","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-352","tier":"primitive","preview":{"exportName":"EmptyState","sizing":"panel"},"consumers":["src/app/components/data-table-section.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true},"description":{"type":"ReactNode","optional":true},"title":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/empty-state","usage":{"when":"Say that a list, grid or section has no data yet, with a title and an optional description.","whenNot":"Content that is still loading, or a full-page error.","useInstead":[{"component":"Skeleton","reason":"content that is still loading"},{"component":"Alert","reason":"a message about something that went wrong"}]},"aiRules":"Use only for inline empty states inside an existing section. Do NOT 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.","core":true},"Field":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/field.tsx","description":"Caption label paired with a value — used in metadata grids and read-only forms.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-81","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-81","tier":"primitive","preview":{"exportName":"Field","sizing":"panel"},"consumers":["src/app/components/combobox.tsx","src/app/components/form.tsx","src/app/components/input.tsx","src/app/components/table.tsx","src/app/components/textarea.tsx","src/form/hds-form.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"label":{"type":"string"},"mono":{"type":"boolean","optional":true},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"],"optional":true},"value":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{"label":{"type":"string"},"mono":{"type":"boolean"},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"]}},"requiredProps":["label"],"a11yRules":[{"rule":"Label must describe the value; pair with aria-describedby when value is non-trivial","required":false}],"docsPage":"/docs/components/field","usage":{"when":"Show a labelled read-only value, such as a name and its value in a detail view.","whenNot":"Editable input, or a single headline figure.","useInstead":[{"component":"Input","reason":"an editable single-line value"},{"component":"Card.Metric","reason":"a headline figure inside a Card"}]},"core":true},"Page":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/page.tsx","description":"Page — standard page shell. Wraps page content in Container (width constraint) and applies the canonical vertical padding so content breathes against the viewport edges on scroll. Use as the outermost element of any new page so vertical rhythm is consistent across the system without per-page reinvention. Footer: every page mounted under HDSLayout (the standard route shell) gets a shared footer rendered after this component\'s content, with bottom space below the footer owned by the layout shell. Page intentionally does not render its own footer — the shell is the single source of truth. Use Container directly only for full-bleed surfaces (sketches, hero sections, embedded canvases) where the page owns its own vertical padding. Usage: <Page> <Stack direction=\\"column\\" gap=\\"spacious\\">...</Stack> </Page> <Page maxWidth=\\"content\\" paddingY=\\"compact\\"> <article>...</article> </Page>","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Page","sizing":"panel"},"consumers":["src/app/components/container.tsx","src/app/components/pagination.markup.test.tsx","src/app/components/pagination.test.tsx","src/app/components/pagination.tsx","src/app/components/surface.tsx","src/app/components/toast.tsx","src/app/design-system/generated-token-descriptions.ts","src/brand/overlay.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"maxWidth":{"type":"enum","values":["content","max"],"default":"max"},"paddingY":{"type":"enum","values":["default","compact","none"],"default":"default"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/page","usage":{"when":"Wrap a screen in the standard width and padding."}},"Stat":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/stat.tsx","description":"Headline metric — large value, caption label, optional sub-line.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-247","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-247","tier":"primitive","preview":{"exportName":"Stat","sizing":"panel"},"consumers":["src/app/components/metric-tiles.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string"},"sub":{"type":"ReactNode","optional":true},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"],"optional":true},"value":{"type":"ReactNode"}},"allowedChildren":[],"propConstraints":{"label":{"type":"string"},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"]}},"requiredProps":["label","value"],"a11yRules":[{"rule":"Provide an accessible name for the stat when value is symbolic (—, ✓, etc.)","required":false}],"docsPage":null,"usage":{"when":"Show one headline figure inline, inside prose or a dense list, with its label and an optional sub-line.","whenNot":"A row of headline numbers on a screen, a figure inside a Card, or a status with a trailing badge.","useInstead":[{"component":"MetricTiles","reason":"a row of headline numbers (one MetricTile per number)"},{"component":"Card.Metric","reason":"a figure inside a Card (hds#254 folds Stat into the Card slot)"},{"component":"StatusTile","reason":"a titled status with notes and a trailing badge"}]}},"StatusListItem":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-350","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-350","tier":"pattern","preview":{"exportName":"StatusListItem","sizing":"panel"},"consumers":["src/app/components/status-tile.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"notes":{"type":"ReactNode[]","optional":true},"title":{"type":"ReactNode"},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"],"optional":true},"trailing":{"type":"ReactNode","optional":true}},"allowedChildren":[],"propConstraints":{"tone":{"type":"enum","values":["success","danger","warning","info","neutral"]}},"requiredProps":["title"],"a11yRules":[{"rule":"Status dot is decorative (aria-hidden); convey status meaning via title or trailing badge","required":true}],"docsPage":null},"StatusTile":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-292","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-292","tier":"pattern","preview":{"exportName":"StatusTile","sizing":"panel"},"consumers":["src/app/components/metric-tiles.tsx","src/app/components/stat.tsx","src/index.ts","src/patterns.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"notes":{"type":"ReactNode[]","optional":true},"title":{"type":"ReactNode"},"tone":{"type":"enum","values":["success","warning","danger","info","neutral"],"default":"neutral"},"trailing":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/status-tile","usage":{"when":"Show a titled status block with optional notes and a trailing badge or affordance.","whenNot":"A headline number (never a value), or a row inside a list.","useInstead":[{"component":"MetricTiles","reason":"a row of headline numbers"},{"component":"Card.Metric","reason":"a headline figure inside a Card (hds#254 folds StatusTile into the Card slot)"},{"component":"StatusListItem","reason":"a status row inside a list"}]}},"Badge":{"variantAxes":["tone"],"componentProperties":[{"name":"Label","type":"TEXT","defaultValue":"Badge","sourceProp":"children","boundTo":"characters","targetSelector":"Label"}],"states":["default"],"filePath":"src/app/components/badge.tsx","props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"span"},"dot":{"type":"boolean","default":false},"label":{"type":"string","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"tone":{"type":"enum","values":["success","danger","warning","info","neutral","inProgress"],"optional":true}},"allowedChildren":[],"propConstraints":{"dot":{"type":"boolean"},"label":{"type":"string"},"size":{"type":"enum","values":["sm","md","lg"]},"tone":{"type":"enum","values":["success","danger","warning","info","neutral","inProgress"]}},"requiredProps":[],"a11yRules":[],"description":"Compact metadata/status chip. Tone is the only styling input.","category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=31-15","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=31-15","tier":"primitive","preview":{"exportName":"Badge","sizing":"panel"},"consumers":["src/app/components/alert.tsx","src/app/components/avatar.tsx","src/app/components/badge.test.tsx","src/app/components/card.tsx","src/app/components/page-header.tsx","src/app/components/tag.tsx","src/app/design-system/generated-token-descriptions.ts","src/mui/index.ts"],"tokenMapping":{},"docsPage":"/docs/components/badge","usage":{"when":"Label a status, state or count with a compact neutral or semantic chip, or a dot.","whenNot":"A chip people can toggle, or a message that needs a sentence.","useInstead":[{"component":"Tag","reason":"an interactive filter or category chip"},{"component":"Alert","reason":"a message that needs a sentence"}]},"core":true},"AssetImg":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/asset-img.tsx","description":"AssetImg - responsive asset frame with fallback placeholder handling. Contexts: default, lightbox, and detail.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-67","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-67","tier":"primitive","preview":{"exportName":"AssetImg","sizing":"panel"},"consumers":["src/app/components/asset-img.test.tsx","src/app/components/hds-tooltip.tsx","src/app/components/tooltip.test.tsx","src/app/components/tooltip.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"alt":{"type":"string","optional":true},"className":{"type":"string","optional":true},"context":{"type":"enum","values":["default","lightbox","detail"],"default":"default"},"draggable":{"type":"boolean","default":false},"expandable":{"type":"boolean","default":true},"expandLabel":{"type":"string","optional":true},"isDark":{"type":"boolean","default":false},"loading":{"type":"enum","values":["lazy","eager"],"default":"lazy"},"naturalHeight":{"type":"number","optional":true},"naturalWidth":{"type":"number","optional":true},"onClick":{"type":"(e: MouseEvent<Element, MouseEvent>) => void","optional":true},"onMouseDown":{"type":"(e: MouseEvent<Element, MouseEvent>) => void","optional":true},"onMouseLeave":{"type":"(e: MouseEvent<Element, MouseEvent>) => void","optional":true},"onMouseMove":{"type":"(e: MouseEvent<Element, MouseEvent>) => void","optional":true},"onMouseUp":{"type":"(e: MouseEvent<Element, MouseEvent>) => void","optional":true},"src":{"type":"string"},"style":{"type":"CSSProperties","default":"{}"},"title":{"type":"string","optional":true}},"allowedChildren":[],"propConstraints":{"alt":{"type":"string"},"className":{"type":"string"},"context":{"type":"enum","values":["default","lightbox","detail"]},"draggable":{"type":"boolean"},"expandable":{"type":"boolean"},"expandLabel":{"type":"string"},"isDark":{"type":"boolean"},"loading":{"type":"enum","values":["lazy","eager"]},"src":{"type":"string"},"title":{"type":"string"}},"requiredProps":["src"],"a11yRules":[{"rule":"Must have alt text (decorative images use alt=\\"\\")","required":true},{"rule":"Caption or description should be associated via aria-describedby when present","required":false}],"docsPage":"/docs/patterns/asset-img","usage":{"when":"Show an image that scales to its frame, with a placeholder if it fails to load."}},"Tabs":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/tabs.tsx","description":"The tab set itself. Tagged here rather than in the file block because TabsList and TabsContent share this module and have no Figma node of their own — a file-level @figma would silently claim this node for all four.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-89","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-89","tier":"primitive","preview":{"exportName":"Tabs","sizing":"panel"},"consumers":["src/app/components/breadcrumb.tsx","src/app/components/disclosure.tsx","src/app/components/segmented-control.tsx","src/app/components/tabs.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"activationMode":{"type":"enum","values":["automatic","manual"],"optional":true},"asChild":{"type":"boolean","optional":true},"defaultValue":{"type":"string","optional":true},"dir":{"type":"\\"ltr\\" | \\"rtl\\"","optional":true},"onValueChange":{"type":"(value: string) => void","optional":true},"orientation":{"type":"enum","values":["horizontal","vertical"],"optional":true},"value":{"type":"string","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/tabs","usage":{"when":"Switch between panels of related content in the same place, one visible at a time.","whenNot":"A compact mode switch with no panels, or content that must all be visible.","useInstead":[{"component":"SegmentedControl","reason":"a compact switch with no panels"},{"component":"Disclosure","reason":"optional content that expands in place"}]},"core":true},"TabsContent":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"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). The trigger\'s focus ring is `ring-inset` because `overflow-x-auto` clips anything drawn outside the list box (an outer ring was cut on the first/last tab).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsContent","sizing":"panel"},"consumers":["src/app/components/tabs.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"forceMount":{"type":"true","optional":true},"value":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"TabsList":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"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). The trigger\'s focus ring is `ring-inset` because `overflow-x-auto` clips anything drawn outside the list box (an outer ring was cut on the first/last tab).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsList","sizing":"panel"},"consumers":["src/app/components/tabs.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"loop":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"TabsTrigger":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"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). The trigger\'s focus ring is `ring-inset` because `overflow-x-auto` clips anything drawn outside the list box (an outer ring was cut on the first/last tab).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsTrigger","sizing":"panel"},"consumers":["src/app/components/tabs.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"value":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"Radio":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/radio.tsx","description":"Radio — radio button with animated selection indicator.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=36-17","figmaId":null,"preview":{"exportName":"Radio","sizing":"panel"},"consumers":["src/app/components/checkbox.tsx","src/app/components/focus-visible.test.tsx","src/app/components/radio.test.tsx","src/app/components/segmented-control.tsx","src/app/components/toggle.tsx","src/app/hooks/useInteractionState.test.ts","src/app/hooks/useInteractionState.ts"],"tokenMapping":{"label":"semantic.typography.small","indicator":"semantic.color.surface.accent","indicatorDot":"semantic.color.content.onAccent","border":"semantic.color.border.default","borderActive":"semantic.color.border.accent","hoverBackground":"semantic.color.surface.raised","pressedBackground":"semantic.color.surface.overlay","disabledLabel":"semantic.color.content.disabled","radius":"primitive.radius.4","gap":"primitive.space.2","rowPadding":"primitive.space.3"},"props":{"checked":{"type":"boolean"},"label":{"type":"string"},"onChange":{"type":"(v: boolean) => void"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=36-17","docsPage":"/docs/components/radio","usage":{"when":"Choose exactly one option from a small set that should stay visible together.","whenNot":"Independent yes/no options, or a long list of options.","useInstead":[{"component":"Checkbox","reason":"independent options that can be ticked together"},{"component":"Select","reason":"a long list that can collapse into a dropdown"},{"component":"SegmentedControl","reason":"a compact switch between two to five views or modes"}]},"core":true},"Select":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/select.tsx","description":"Select — dropdown selector built on Radix Select (ADR-001 Radix convention). Radix owns the listbox a11y contract: managed focus + active-descendant, typeahead, full keyboard (Home/End/PageUp-Down/wrap), Popper collision/flip positioning, and dismissal. The HDS surface is styled with the token-backed Tailwind idiom used by tabs.tsx / command-palette.tsx; `ref` targets the trigger button.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-49","figmaId":null,"preview":{"exportName":"Select","sizing":"panel"},"consumers":["src/app/components/checkbox.test.tsx","src/app/components/combobox.test.tsx","src/app/components/combobox.tsx","src/app/components/form-control.ts","src/app/components/form.tsx","src/app/components/input.tsx","src/app/components/menu.tsx","src/app/components/radio.tsx","src/app/components/segmented-control.tsx","src/app/components/select.test.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx"],"tokenMapping":{"label":"semantic.typography.small","background":"semantic.color.surface.raised","border":"semantic.color.border.default","text":"semantic.color.content.primary","mutedText":"semantic.color.content.secondary","radius":"semantic.radius.action"},"props":{"aria-describedby":{"type":"string","optional":true},"aria-invalid":{"type":"boolean","optional":true},"container":{"type":"HTMLElement","optional":true},"id":{"type":"string","optional":true},"label":{"type":"string"},"onChange":{"type":"(v: string) => void"},"options":{"type":"{ value: string; label: string; }[]"},"showLabel":{"type":"boolean","default":true},"value":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-49","docsPage":"/docs/components/select","usage":{"when":"Choose one value from a short list of options in a form field.","whenNot":"Firing actions, or choosing from a list long enough to need search.","useInstead":[{"component":"Menu","reason":"firing actions from a trigger"},{"component":"Combobox","reason":"a long list that needs search"}]},"keyboard":[{"keys":"Enter/Space/ArrowDown","effect":"Opens the listbox from the trigger with the selected option highlighted."},{"keys":"ArrowDown/ArrowUp","effect":"Moves the highlight."},{"keys":"Home/End","effect":"Jumps to the first or last option."},{"keys":"Character","effect":"Highlights the option that matches the typed letters."},{"keys":"Enter","effect":"Commits the highlighted option and returns focus to the trigger."},{"keys":"Escape","effect":"Closes the listbox and returns focus to the trigger."},{"keys":"Tab","effect":"Does not leave the open listbox."}],"core":true},"Slider":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/slider.tsx","description":"Slider — range slider with label and value display.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-265","figmaId":null,"preview":{"exportName":"Slider","sizing":"panel"},"consumers":["src/app/components/form-control.ts"],"tokenMapping":{"label":"semantic.typography.small","track":"semantic.color.surface.accent","value":"primitive.typography.family.mono","helperText":"semantic.color.content.secondary"},"props":{"label":{"type":"string"},"max":{"type":"number"},"min":{"type":"number"},"onChange":{"type":"(v: number) => void"},"step":{"type":"number","default":1},"value":{"type":"number"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-265","docsPage":"/docs/components/slider","usage":{"when":"Pick a number within a known range by dragging, when the exact value matters less than the position.","whenNot":"A precise number the person must type or read exactly.","useInstead":[{"component":"Input","reason":"a precise typed value (type=\\"number\\")"}]},"core":true},"Toggle":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/toggle.tsx","description":"Toggle — boolean on/off toggle with animated thumb.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=37-19","figmaId":null,"preview":{"exportName":"Toggle","sizing":"panel"},"consumers":["src/app/components/checkbox.tsx","src/app/components/focus-visible.test.tsx","src/app/components/radio.tsx","src/app/components/toggle.test.tsx","src/app/hooks/useInteractionState.test.ts","src/app/hooks/useInteractionState.ts"],"tokenMapping":{"label":"semantic.typography.small","indicator":"semantic.color.surface.accent","indicatorTick":"semantic.color.content.onAccent","border":"semantic.color.border.default","borderActive":"semantic.color.border.accent","hoverBackground":"semantic.color.surface.accentSubtle","disabledLabel":"semantic.color.content.disabled","radius":"primitive.radius.4","gap":"primitive.space.2","rowPadding":"primitive.space.3"},"props":{"checked":{"type":"boolean"},"label":{"type":"string"},"onChange":{"type":"(v: boolean) => void"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=37-19","docsPage":"/docs/components/toggle","usage":{"when":"Switch one setting on or off, with the effect applying immediately.","whenNot":"A choice that only takes effect after submitting a form, or picking from several options.","useInstead":[{"component":"Checkbox","reason":"a form option confirmed on submit"},{"component":"Radio","reason":"one choice from a set"}]},"core":true},"Avatar":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/avatar.tsx","description":"Circular avatar. Renders the image when available, else initials from `alt`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=34-18","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=34-18","tier":"primitive","preview":{"exportName":"Avatar","sizing":"panel"},"consumers":["src/app/components/avatar-group.test.tsx","src/app/components/avatar-group.tsx","src/app/components/avatar.test.tsx","src/app/components/icon.tsx","src/app/design-system/generated-token-descriptions.ts"],"tokenMapping":{},"variantAxes":["size"],"componentProperties":[],"props":{"alt":{"type":"string"},"initials":{"type":"string","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"src":{"type":"string","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/avatar","usage":{"when":"Show a person or entity as an image with an initials fallback.","whenNot":"A generic pictogram, or a status marker.","useInstead":[{"component":"Icon","reason":"a generic pictogram"},{"component":"Badge","reason":"a status marker"}]},"core":true},"Progress":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/progress.tsx","description":"Linear bar or circular ring. Determinate when `value` is a number, else indeterminate.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-91","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-91","tier":"primitive","preview":{"exportName":"Progress","sizing":"panel"},"consumers":["src/app/components/card-progress.test.tsx","src/app/components/card.test.tsx","src/app/components/card.tsx","src/app/components/progress.test.tsx","src/app/components/skeleton.tsx","src/app/components/spinner.tsx","src/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string","default":"Progress"},"max":{"type":"number","default":100},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"],"default":"neutral"},"value":{"type":"number","default":"null"},"variant":{"type":"enum","values":["linear","circular"],"default":"linear"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/progress","usage":{"when":"Show how far a task has got, as a bar or ring that is determinate or indeterminate.","whenNot":"A wait of unknown length with no bar, or content that is still loading.","useInstead":[{"component":"Spinner","reason":"a wait of unknown length"},{"component":"Skeleton","reason":"placeholder shapes for loading content"}]},"core":true},"Skeleton":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-95","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-95","tier":"primitive","preview":{"exportName":"Skeleton","sizing":"panel"},"consumers":["src/app/components/empty-state.tsx","src/app/components/progress.tsx","src/app/components/skeleton.test.tsx","src/app/components/spinner.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"height":{"type":"string | number","optional":true},"variant":{"type":"enum","values":["text","circular","rectangular"],"default":"rectangular"},"width":{"type":"string | number","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/skeleton","usage":{"when":"Reserve the shape of content that is still loading, so the layout does not jump.","whenNot":"A task with measurable progress, or a wait with no layout to reserve.","useInstead":[{"component":"Progress","reason":"a task with measurable progress"},{"component":"Spinner","reason":"a short wait with no layout to reserve"}]},"core":true},"Spinner":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/spinner.tsx","description":"Indeterminate spinner. Inherits the surrounding text color via currentColor.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-106","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-106","tier":"primitive","preview":{"exportName":"Spinner","sizing":"panel"},"consumers":["src/app/components/progress.tsx","src/app/components/skeleton.tsx","src/app/components/spinner.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string","default":"Loading"},"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/spinner","usage":{"when":"Show that something is loading when the wait is short or has no measurable end.","whenNot":"A task with measurable progress, or a region whose layout is known.","useInstead":[{"component":"Progress","reason":"a task with measurable progress"},{"component":"Skeleton","reason":"a region whose layout is known"}]},"core":true},"Breadcrumb":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-159","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-159","tier":"pattern","preview":{"exportName":"Breadcrumb","sizing":"panel"},"consumers":["src/app/components/breadcrumb.test.tsx","src/app/components/page-header.tsx","src/app/components/pagination.tsx","src/app/components/table.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"items":{"type":"BreadcrumbItem[]"},"label":{"type":"string","default":"Breadcrumb"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/breadcrumb","usage":{"when":"Show where the current page sits in a hierarchy and link back up it.","whenNot":"Switching between sibling views, or stepping through pages of results.","useInstead":[{"component":"Tabs","reason":"switching between sibling views"},{"component":"Pagination","reason":"stepping through pages of results"}]},"core":true},"Pagination":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/pagination.tsx","description":"Paged navigation with first/last anchors, sibling pages, and ellipses.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-194","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-194","tier":"pattern","preview":{"exportName":"Pagination","sizing":"panel"},"consumers":["src/app/components/breadcrumb.tsx","src/app/components/pagination.markup.test.tsx","src/app/components/pagination.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"count":{"type":"number"},"label":{"type":"string","default":"Pagination"},"onPageChange":{"type":"(page: number) => void"},"page":{"type":"number"},"siblingCount":{"type":"number","default":1}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/pagination","usage":{"when":"Move between pages of a long result set, with truncated page numbers.","whenNot":"A hierarchy trail, or a short list that fits on one page.","useInstead":[{"component":"Breadcrumb","reason":"a hierarchy trail"}]},"core":true},"ToastProvider":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/toast.tsx","description":"Provider + viewport for the toast system. Wrap the app root once.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-367","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-367","tier":"pattern","preview":{"exportName":"ToastProvider","sizing":"panel"},"consumers":["src/app/components/alert-dialog.tsx","src/app/components/alert.tsx","src/app/components/dialog.tsx","src/app/components/toast.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"duration":{"type":"number","default":5000},"swipeDirection":{"type":"SwipeDirection","default":"right"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/guides/providers","usage":{"when":"Confirm an action with a brief message that appears and dismisses itself, through useToast.","whenNot":"A message people must act on or that must stay next to its content.","useInstead":[{"component":"Alert","reason":"a message that stays next to its content"},{"component":"Dialog","reason":"a message that needs a decision"}]},"core":true},"Combobox":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/combobox.tsx","description":"Combobox — searchable single- or multi-select (Popover + filtered listbox). A select-with-search built on the HDS Popover. The trigger shows the current selection (with `multiple`, a count and a removable chip per value); 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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-237","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-237","tier":"pattern","preview":{"exportName":"Combobox","sizing":"panel"},"consumers":["src/app/components/combobox.test.tsx","src/app/components/form-control.ts","src/app/components/form.tsx","src/app/components/input.tsx","src/app/components/select.tsx","src/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"aria-describedby":{"type":"string","optional":true},"aria-invalid":{"type":"boolean","optional":true},"aria-label":{"type":"string","optional":true},"className":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"emptyMessage":{"type":"string","default":"No results"},"id":{"type":"string","optional":true},"multiple":{"type":"boolean","optional":true},"onChange":{"type":"((value: string) => void) | ((value: string[]) => void)"},"options":{"type":"ComboboxOption[]"},"placeholder":{"type":"string","default":"Select…"},"searchPlaceholder":{"type":"string","default":"Search…"},"value":{"type":"string | readonly string[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/combobox","usage":{"when":"Pick one value, or several with `multiple`, from a long list of options, with a search field that filters as you type.","whenNot":"A short list that needs no search, or an action list.","useInstead":[{"component":"Select","reason":"a short list without search"},{"component":"Menu","reason":"firing actions from a trigger"}]},"keyboard":[{"keys":"Enter/Space","effect":"Opens the list from the trigger and moves focus to the search field."},{"keys":"ArrowDown/ArrowUp","effect":"Moves the active option, skipping disabled ones, and wraps at the ends."},{"keys":"Character","effect":"Filters the options to those matching the typed text."},{"keys":"Enter","effect":"Commits the active option and closes the list; with `multiple`, toggles it and keeps the list open."},{"keys":"Escape","effect":"Closes the list."},{"keys":"Tab","effect":"Stays inside the open list."}],"core":true},"Form":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/form.tsx","description":"Styled `<form>` with consistent vertical field rhythm. Tagged per-export: FormField and FormFieldShell share this module and have no Figma node, so a file-level @figma would claim this one for all three.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-94","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-94","tier":"pattern","preview":{"exportName":"Form","sizing":"panel"},"consumers":["src/app/components/form-actions.tsx","src/app/components/form.test.tsx","src/form/hds-form.tsx","src/form/index.ts","src/form/use-hds-form.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/form","usage":{"when":"Wrap form fields so they stack with even spacing."}},"FormField":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/form.tsx","description":"Label + description + error wrapper that wires the a11y relationships onto its single child control via cloneElement. Validation-library agnostic — pass `error` from whatever you use. For controls with an externally-managed callback ref (e.g. react-hook-form), use `FormFieldShell` + `useFieldWiring` instead.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"FormField","sizing":"panel"},"consumers":["src/app/components/combobox.tsx","src/app/components/form.test.tsx","src/app/components/select.tsx","src/form/form-adapter.test.tsx","src/form/hds-form.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactElement<any, string | JSXElementConstructor<any>>"},"className":{"type":"string","optional":true},"description":{"type":"string","optional":true},"error":{"type":"string","optional":true},"htmlFor":{"type":"string","optional":true},"label":{"type":"string"},"required":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"FormFieldShell":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/form.tsx","description":"Presentational label + control slot + helper/error markup. Renders `children` verbatim — it does NOT clone — so it is safe to use with controls that own a callback ref. Pair it with `useFieldWiring` to apply ids/aria yourself.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"FormFieldShell","sizing":"panel"},"consumers":["src/form/hds-form.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"controlId":{"type":"string"},"description":{"type":"string","optional":true},"error":{"type":"string","optional":true},"label":{"type":"string"},"required":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"HdsThemeProvider":{"category":"Theming","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/context/hds-theme.tsx","description":"Renders a `data-hds` scope wrapper that carries the four theming dials as root attributes + CSS vars, and exposes them to `useHdsTheme()`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"HdsThemeProvider","sizing":"panel"},"consumers":["src/app/context/__tests__/context.test.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/app/context/hds-portal.tsx","src/app/context/RouterContext.tsx","src/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"brand":{"type":"string","optional":true},"children":{"type":"React.ReactNode"},"className":{"type":"string","optional":true},"density":{"type":"enum","values":["comfortable","compact"],"optional":true},"fontFamily":{"type":"string","optional":true},"fontFamilyMono":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true},"theme":{"type":"enum","values":["light","dark"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/guides/providers","usage":{"when":"Wrap an app or region once to set theme, density and other root attributes for everything inside it.","whenNot":"Styling a single component, or per-component overrides.","useInstead":[{"component":"Surface","reason":"a single region with its own background"}]},"core":true},"AvatarGroup":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/avatar-group.tsx","description":"Renders up to `max` overlapping avatars followed by a `+N` overflow chip.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2030-63","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2030-63","tier":"primitive","preview":{"exportName":"AvatarGroup","sizing":"panel"},"consumers":["src/app/components/avatar-group.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"max":{"type":"number","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"Blockquote":{"category":"Typography","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/blockquote.tsx","description":"A quoted passage; pass `cite` for the source URL and `attribution` for a byline.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2024-18","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2024-18","tier":"primitive","preview":{"exportName":"Blockquote","sizing":"panel"},"consumers":["src/app/components/blockquote.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"attribution":{"type":"ReactNode","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"Kbd":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/kbd.tsx","description":"Renders a keyboard key or shortcut token, e.g. `<Kbd>⌘K</Kbd>`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2026-9","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2026-9","tier":"primitive","preview":{"exportName":"Kbd","sizing":"panel"},"consumers":["src/app/components/kbd.test.tsx","src/app/components/text.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/kbd","usage":{"when":"Show a keyboard key or shortcut hint inline, as a native kbd element.","whenNot":"Code samples, or a control that runs the shortcut.","useInstead":[{"component":"Text","reason":"inline code and other typography"}]},"core":true},"Timestamp":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/timestamp.tsx","description":"Presents a date/time with a machine-readable `dateTime` for accessibility.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2031-11","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2031-11","tier":"primitive","preview":{"exportName":"Timestamp","sizing":"panel"},"consumers":["src/app/components/timestamp.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"date":{"type":"string | number | Date"},"format":{"type":"enum","values":["date","time","datetime","relative"],"default":"datetime"},"locale":{"type":"string","optional":true},"now":{"type":"string | number | Date","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"VisuallyHidden":{"category":"Utility","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/visually-hidden.tsx","description":"Renders its children off-screen (Tailwind `sr-only`) so they are announced by screen readers without occupying visual space — e.g. a text label for an icon-only control.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"VisuallyHidden","sizing":"panel"},"consumers":["src/app/components/visually-hidden.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"span"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/utilities","usage":{"when":"Give assistive technology a label or description that sighted people do not need to see.","whenNot":"Text everyone should read, or hiding an element from assistive technology too.","useInstead":[{"component":"Text","reason":"text that everyone should read"}]},"core":true},"MetadataList":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/metadata-list.tsx","description":"Renders object metadata as a semantic `<dl>` of term/description pairs.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-47","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-47","tier":"pattern","preview":{"exportName":"MetadataList","sizing":"panel"},"consumers":["src/app/components/metadata-list.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"footer":{"type":"ReactNode","optional":true},"items":{"type":"MetadataListItem[]"},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"vertical"},"variant":{"type":"enum","values":["plain","divided"],"default":"plain"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"AlertDialog":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/alert-dialog.tsx","description":"AlertDialog root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2035-24","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2035-24","tier":"primitive","preview":{"exportName":"AlertDialog","sizing":"panel"},"consumers":["src/app/components/alert-dialog.test.tsx","src/app/components/destructive-section.tsx","src/app/components/dialog.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/styles/__tests__/scrim-and-color-scheme.test.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"defaultOpen":{"type":"boolean","optional":true},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null,"usage":{"when":"Confirm a destructive or irreversible action (delete, archive, remove) before it runs, with Cancel and Action buttons.","whenNot":"A modal that collects input or shows content, or a confirmation after the action is done.","useInstead":[{"component":"Dialog","reason":"a modal with a form or other content"},{"component":"ToastProvider","reason":"a brief confirmation after the action"}]}},"Box":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/box.tsx","description":"Box — polymorphic layout primitive with a token-first `sx` engine. `sx` is a deliberate SUBSET of MUI\'s sx — not all of CSS-in-JS is a feature: - Spacing shorthands (m/p/gap family) take the t-shirt scale (\'xs\'|\'sm\'|\'md\'|\'lg\'|\'xl\' → `--semantic-space-scale-*`, hds#206) through the resolver Stack\'s `gap` shares. Numbers still resolve as a count of 4px units (`p: 4` is 16px), and the deprecated \'tight\'|\'normal\'|\'inset\'|\'spacious\' still read `--semantic-space-layout-*`, fixed px that compact density does not remap. HDS source may not use raw integers (check-spacing-vocabulary). - `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":null,"tier":"primitive","preview":{"exportName":"Box","sizing":"panel"},"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/box.test.tsx","src/app/components/container.tsx","src/app/components/grid.tsx","src/app/components/sidebar.tsx","src/app/components/stack.test.tsx","src/app/components/stack.tsx","src/app/components/switcher.tsx","src/app/components/toggle.tsx","src/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode","optional":true},"sx":{"type":"SxObject","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/utilities","usage":{"when":"Build one-off layout that no named layout primitive covers, using token keys through `sx`.","whenNot":"Ordinary vertical or horizontal spacing, columns, or page-width constraint.","useInstead":[{"component":"Stack","reason":"a row or column of content with even gaps"},{"component":"Grid","reason":"multi-column layout"},{"component":"Container","reason":"a width-constrained page region"}]},"aiRules":"Reach for Stack/Grid/Container/the every-layout primitives first. Use 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.","core":true},"Sidebar":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/sidebar.tsx","description":"Sidebar — fixed-width rail beside fluid content, no media query. Every Layout reference: https://every-layout.dev/layouts/sidebar/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Sidebar","sizing":"panel"},"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/sidebar.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"[ReactNode, ReactNode]"},"className":{"type":"string","optional":true},"contentMin":{"type":"string","default":"50%"},"gap":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"normal"},"side":{"type":"enum","values":["start","end"],"default":"start"},"sideWidth":{"type":"string","default":"16rem"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null,"aiRules":"Reach for this named layout intent before Box/sx. Sidebar expects 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."},"Switcher":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/switcher.tsx","description":"Switcher — flips a row to a column below a width threshold, no media query. Every Layout reference: https://every-layout.dev/layouts/the-switcher/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Switcher","sizing":"panel"},"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/switcher.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"gap":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"normal"},"limit":{"type":"number","optional":true},"style":{"type":"CSSProperties","optional":true},"threshold":{"type":"string","default":"30rem"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null,"aiRules":"Reach for this named layout intent before Box/sx. gap MUST use a 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 Stack with `direction=\\"row\\"` and `wrap=\\"wrap\\"`."},"Pin":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/pin.tsx","description":"Pin — sticky-pin an element within its scroll region.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Pin","sizing":"panel"},"consumers":["src/app/components/form-actions.tsx","src/app/components/pin.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true},"top":{"type":"string","default":0}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null,"aiRules":"`top` is a CSS length offset (a dimension, not a spacing step). 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."},"Reveal":{"category":"Motion","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/reveal.tsx","description":"Reveal — reveal-on-scroll primitive via CSS scroll-driven animation.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Reveal","sizing":"panel"},"consumers":["src/app/components/pin.tsx","src/app/components/reveal.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"animation":{"type":"enum","values":["fade","fade-up","fade-down","scale"],"default":"fade-up"},"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/reveal","usage":{"when":"Fade content in as it scrolls into view."},"aiRules":"Content is fully visible by DEFAULT; the effect applies only where `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."},"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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-14","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-14","tier":"primitive","preview":{"exportName":"Textarea","sizing":"panel"},"consumers":["src/app/components/form-control.ts","src/app/components/input.tsx","src/app/components/select.tsx","src/app/components/textarea.test.tsx"],"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":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/textarea","usage":{"when":"Collect multi-line free text such as a message, note or description.","whenNot":"A single line of text, or choosing from a list.","useInstead":[{"component":"Input","reason":"a single line of text"}]},"core":true},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"metadata":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"CardMetric":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card.Metric — one label, a large value and an optional sub-line inside a Card.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardMetric","sizing":"panel"},"consumers":["src/app/components/card.test.tsx"],"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":[],"docsPage":null,"usage":{"when":"Show one headline figure (a KPI, a count, a total) with its label inside a Card.","whenNot":"A metric outside a Card, or several figures that share one label.","useInstead":[{"component":"MetricTiles","reason":"a row of headline numbers with no enclosing Card"}]}},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"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":[],"docsPage":null},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"container":{"type":"HTMLElement","optional":true},"forceMount":{"type":"true","optional":true},"hideClose":{"type":"boolean","default":false},"onCloseAutoFocus":{"type":"(event: Event) => void","optional":true},"onEscapeKeyDown":{"type":"(event: KeyboardEvent) => void","optional":true},"onFocusOutside":{"type":"(event: CustomEvent<{ originalEvent: FocusEvent; }>) => void","optional":true},"onInteractOutside":{"type":"(event: CustomEvent<{ originalEvent: PointerEvent; }> | CustomEvent<{ originalEvent: FocusEvent; }>) => void","optional":true},"onOpenAutoFocus":{"type":"(event: Event) => void","optional":true},"onPointerDownOutside":{"type":"(event: CustomEvent<{ originalEvent: PointerEvent; }>) => void","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"forceMount":{"type":"true","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"container":{"type":"Element | DocumentFragment","optional":true},"forceMount":{"type":"true","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"Tooltip":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/hds-tooltip.tsx","description":"Tooltip root. Bakes in the Radix Provider so a single `<Tooltip>` is self-contained — no app-level provider required. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-15","figmaId":null,"tier":"primitive","preview":{"exportName":"Tooltip","sizing":"panel"},"consumers":["src/app/components/asset-img.tsx","src/app/components/dialog.tsx","src/app/components/hds-tooltip.test.tsx","src/app/components/popover.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-15","props":{"children":{"type":"React.ReactNode","optional":true},"defaultOpen":{"type":"boolean","optional":true},"delayDuration":{"type":"number","optional":true},"disableHoverableContent":{"type":"boolean","optional":true},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/tooltip","usage":{"when":"Name an icon-only control, or add a short hint that appears on hover and keyboard focus.","whenNot":"Anything interactive, text people need to finish a task, or a hint touch users must see (touch has no hover).","useInstead":[{"component":"Popover","reason":"interactive or longer content that opens on click"},{"component":"Text","reason":"a hint that must stay visible"}]},"keyboard":[{"keys":"Focus","effect":"Opens the tooltip when the trigger receives keyboard focus."},{"keys":"Escape","effect":"Closes the tooltip and keeps focus on the trigger."},{"keys":"Tab","effect":"Moves on to the next control and closes the tooltip."}],"core":true},"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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-59","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-59","tier":"primitive","preview":{"exportName":"Menu","sizing":"panel"},"consumers":["src/app/components/combobox.tsx","src/app/components/data-table-section.tsx","src/app/components/menu.test.tsx","src/app/components/popover.tsx","src/app/components/select.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"defaultOpen":{"type":"boolean","optional":true},"dir":{"type":"\\"ltr\\" | \\"rtl\\"","optional":true},"modal":{"type":"boolean","optional":true},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"slots":[{"name":"trigger","description":"The element that opens the menu (Menu.Trigger).","source":"jsdoc"},{"name":"content","description":"The popup holding the items (Menu.Content).","source":"jsdoc"}],"docsPage":"/docs/components/menu","usage":{"when":"Offer a list of actions from a trigger, closed until opened.","whenNot":"Choosing one value for a form field, or a set of options that must stay visible.","useInstead":[{"component":"Select","reason":"choosing a value for a form field"}]},"keyboard":[{"keys":"Enter/Space/ArrowDown","effect":"Opens the menu from the trigger and highlights the first item."},{"keys":"ArrowDown/ArrowUp","effect":"Moves the highlight; it stops at the first and last item."},{"keys":"Home/End","effect":"Jumps to the first or last item."},{"keys":"Character","effect":"Highlights the next item that starts with the typed letter."},{"keys":"Enter","effect":"Selects the highlighted item and closes the menu."},{"keys":"Escape","effect":"Closes the menu and returns focus to the trigger."},{"keys":"Tab","effect":"Does not leave the open menu."}],"core":true},"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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-32","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-32","tier":"primitive","preview":{"exportName":"Popover","sizing":"panel"},"consumers":["src/app/components/combobox.test.tsx","src/app/components/combobox.tsx","src/app/components/hds-tooltip.tsx","src/app/components/menu.tsx","src/app/components/popover.test.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/app/design-system/generated-token-descriptions.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"defaultOpen":{"type":"boolean","optional":true},"modal":{"type":"boolean","optional":true},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/popover","usage":{"when":"Anchor interactive content, such as a short form, a filter set or a picker, to a trigger people click to open.","whenNot":"A short label on hover or focus, a list of actions, or a decision that must block the page.","useInstead":[{"component":"Tooltip","reason":"a short label shown on hover or focus"},{"component":"Menu","reason":"a list of actions"},{"component":"Dialog","reason":"a decision that blocks the page"}]},"keyboard":[{"keys":"Enter/Space","effect":"Opens the popover from the trigger and moves focus inside it."},{"keys":"Escape","effect":"Closes the popover and returns focus to the trigger."},{"keys":"Tab","effect":"Cycles focus inside the open popover; the page behind stays reachable."}],"core":true},"Checkbox":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/checkbox.tsx","description":"Checkbox — custom-drawn checkbox with check / indeterminate glyph.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=35-29","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=35-29","tier":"primitive","preview":{"exportName":"Checkbox","sizing":"panel"},"consumers":["src/app/components/checkbox.test.tsx","src/app/components/focus-visible.test.tsx","src/app/components/radio.tsx","src/app/components/toggle.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"checked":{"type":"boolean"},"indeterminate":{"type":"boolean","default":false},"label":{"type":"string"},"onChange":{"type":"(v: boolean) => void"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/checkbox","usage":{"when":"Let people tick one or more independent options, or a parent choice that is partly selected.","whenNot":"An immediate on/off setting, or a choice of exactly one option from a set.","useInstead":[{"component":"Toggle","reason":"a setting that applies as soon as it flips"},{"component":"Radio","reason":"exactly one choice from a set"}]},"core":true},"FormActions":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/form-actions.tsx","description":"Form footer with one fixed order: destructive (far left, if any), then secondary, then primary last and right-most. Gap is the tight layout token.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-87","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-87","tier":"pattern","preview":{"exportName":"FormActions","sizing":"panel"},"consumers":["src/app/components/form-actions.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"destructive":{"type":"ReactNode","optional":true},"primary":{"type":"ReactNode"},"secondary":{"type":"ReactNode","optional":true},"sticky":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/form-actions","usage":{"when":"Lay out a form\'s buttons in a fixed order: danger on the left, then secondary, then primary on the right."}},"MetricTile":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/metric-tiles.tsx","description":"One metric tile: eyebrow label, `heading2` value, caption sub line, on a raised surface at one fixed min-height. Wraps `Card.Metric` (the sibling with the eyebrow / h2 / caption scale) and adds the surface and the fixed height, so a tile needs no enclosing `Card`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-114","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-114","tier":"pattern","preview":{"exportName":"MetricTile","sizing":"panel"},"consumers":["src/app/components/metric-tiles.test.tsx","src/app/components/stat.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"ReactNode"},"sub":{"type":"ReactNode","optional":true},"tone":{"type":"enum","values":["neutral","success","warning","danger","info"],"default":"neutral"},"value":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null,"usage":{"when":"Show one key number with its label, inside a MetricTiles row."}},"MetricTiles":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/metric-tiles.tsx","description":"A row of `MetricTile`s. The grid has `min(tiles, 4)` columns, so three tiles fill three columns and never leave an empty fourth. The default for any row of headline numbers on a screen; use `Stat` only for an inline number inside prose or a dense list, `Card.Metric` only inside an existing `Card`, and `StatusTile` for state with notes (never a number).","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-89","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-89","tier":"pattern","preview":{"exportName":"MetricTiles","sizing":"panel"},"consumers":["src/app/components/card.tsx","src/app/components/metric-tiles.test.tsx","src/app/components/stat.tsx","src/app/components/status-tile.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/metric-tiles","usage":{"when":"Show a row of key numbers, one tile each."}},"PageHeader":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/page-header.tsx","description":"Screen header: breadcrumb slot, the title at the one canonical page-title size (`heading2`), a status slot and an actions slot. Every screen has exactly one. `display` and `h1` type are reserved for marketing and landing surfaces.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-3","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-3","tier":"pattern","preview":{"exportName":"PageHeader","sizing":"panel"},"consumers":["src/app/components/page-header.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"actions":{"type":"ReactNode","optional":true},"breadcrumb":{"type":"ReactNode","optional":true},"level":{"type":"PageHeaderLevel","default":1},"status":{"type":"ReactNode","optional":true},"title":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/page-header","usage":{"when":"Open a screen with its title, plus optional breadcrumb, status and actions."}},"DataTableSection":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/data-table-section.tsx","description":"Section heading and toolbar over a `Table`. Row actions are consumer nodes in a trailing column, the table scrolls horizontally on narrow widths without a `minWidth` from the caller, and zero rows shows an `EmptyState`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-268","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-268","tier":"pattern","preview":{"exportName":"DataTableSection","sizing":"panel"},"consumers":["src/app/components/data-table-section.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"actionsLabel":{"type":"string","default":"Actions"},"columns":{"type":"TableColumn[]"},"emptyDescription":{"type":"ReactNode","optional":true},"emptyTitle":{"type":"ReactNode","default":"Nothing here yet"},"level":{"type":"6 | 3 | 4 | 2 | 5","default":2},"rows":{"type":"DataTableSectionRow[]"},"title":{"type":"ReactNode"},"toolbar":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/data-table-section","usage":{"when":"Put a heading and toolbar above a Table."}},"DestructiveSection":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/destructive-section.tsx","description":"Titled danger zone: a title, an explanation, and one danger `Button` that opens an `AlertDialog`. Pressing the button never runs the action; only the dialog\'s confirm does. Place it last on the screen, below the form.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2076-3","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2076-3","tier":"pattern","preview":{"exportName":"DestructiveSection","sizing":"panel"},"consumers":["src/app/components/destructive-section.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"actionLabel":{"type":"ReactNode","optional":true},"cancelLabel":{"type":"string","default":"Cancel"},"confirmBody":{"type":"ReactNode"},"confirmLabel":{"type":"string"},"description":{"type":"ReactNode"},"level":{"type":"6 | 3 | 4 | 2 | 5","default":2},"onConfirm":{"type":"() => void"},"title":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/destructive-section","usage":{"when":"Put a dangerous action, such as delete, in its own section with a warning and a confirm step."}},"HdsRouterProvider":{"category":"Theming","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/context/RouterContext.tsx","description":"Provide a router adapter to all HDS components below. Wrap your app root once.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"HdsRouterProvider","sizing":"panel"},"consumers":["src/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"adapter":{"type":"HdsRouterAdapter"},"children":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/guides/providers","usage":{"when":"Wrap the app root once so HDS links and navigation use your client router; with no provider they stay plain anchors."},"core":true},"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":[],"docsPage":null},"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":[],"docsPage":null},"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":[],"docsPage":null},"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":[],"docsPage":null},"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":[],"docsPage":null},"HdsCheckbox":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized checkbox instance stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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":[],"docsPage":null},"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":[],"docsPage":null}}'), b = { HdsPhosphor: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Compiler-recognized icon alias stub for JSX normalization.", hidden: !0, 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: !0, props: { layout: { type: "enum", values: ["VERTICAL", "HORIZONTAL"], default: "VERTICAL" }, layoutMode: { type: "enum", values: ["VERTICAL", "HORIZONTAL"], optional: !0 }, fill: { type: "string", optional: !0 }, background: { type: "string", optional: !0 }, stroke: { type: "string", optional: !0 }, border: { type: "string", optional: !0 }, padding: { type: "string", optional: !0 }, paddingX: { type: "string", optional: !0 }, paddingY: { type: "string", optional: !0 }, gap: { type: "string", optional: !0 }, itemSpacing: { type: "string", optional: !0 }, radius: { type: "string", optional: !0 }, width: { type: "string", optional: !0 }, height: { type: "string", optional: !0 }, children: { type: "ReactNode", optional: !0 } }, allowedChildren: ["*"], propConstraints: { layout: { type: "enum", values: ["VERTICAL", "HORIZONTAL"] }, layoutMode: { type: "enum", values: ["VERTICAL", "HORIZONTAL"] }, fill: { type: "string" }, stroke: { type: "string" }, padding: { type: "string" }, gap: { type: "string" }, radius: { type: "string" } }, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, HdsHeading: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Semantic heading wrapper. Maps level={1,2,3} to a typography token AND the matching h-tag (h1/h2/h3). Never skip levels (h1 → h3 without h2). Headings are font-light (display, h1) or font-normal (h2, h3) — never bold. Use Text for non-heading display copy.", hidden: !0, props: { typography: { type: "string", optional: !0 }, fill: { type: "string", optional: !0 }, text: { type: "string", optional: !0 }, children: { type: "ReactNode", optional: !0 }, level: { type: "enum", values: ["1", "2", "3"], optional: !0 } }, allowedChildren: ["*"], propConstraints: { typography: { type: "string" }, fill: { type: "string" }, level: { type: "enum", values: ["1", "2", "3"] } }, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, HdsLabel: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Form-control label primitive. Uses semantic.typography.caption (uppercase, tracked, font-medium). Color is semantic.color.content.secondary by default; the required-asterisk takes semantic.color.feedback.danger. Always pairs htmlFor with the control id; never used for non-label microcopy.", hidden: !0, props: { typography: { type: "string", optional: !0 }, fill: { type: "string", optional: !0 }, text: { type: "string", optional: !0 }, children: { type: "ReactNode", optional: !0 }, htmlFor: { type: "string", optional: !0 } }, allowedChildren: ["*"], propConstraints: { typography: { type: "string" }, fill: { type: "string" } }, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, HdsCaption: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Compiler-recognized caption primitive stub for generated JSX validation.", hidden: !0, props: { typography: { type: "string", optional: !0 }, fill: { type: "string", optional: !0 }, text: { type: "string", optional: !0 }, children: { type: "ReactNode", optional: !0 } }, allowedChildren: ["*"], propConstraints: { typography: { type: "string" }, fill: { type: "string" } }, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, HdsCheckbox: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Compiler-recognized checkbox instance stub for generated JSX validation.", hidden: !0, tier: "utility", props: {}, allowedChildren: ["*"], propConstraints: {}, requiredProps: [], a11yRules: [], storyFiles: [], storyIds: [] }, HdsChip: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Compiler-recognized chip instance stub for generated JSX validation.", hidden: !0, props: {}, allowedChildren: ["*"], propConstraints: {}, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, HdsAvatar: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "User identity glyph. Square or circle, sized on the 8px grid (24/32/40/48/64). Initial-letter fallback uses semantic.typography.small (font-medium, never bold). Image variant is object-cover, never object-fill. Radius is semantic.radius.action for square or semantic.radius.pill for circle.", hidden: !0, props: {}, allowedChildren: ["*"], propConstraints: {}, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, ExpandTooltip: { category: "Internal", categorySource: "internal-jsdoc", governedCategory: !0, hidden: !0, docExempt: !0, filePath: "src/app/components/tooltip.tsx", figmaUrl: null, figmaId: null, figmaLink: null, tier: "utility", preview: { exportName: "ExpandTooltip", sizing: "panel" }, consumers: ["src/app/components/asset-img.tsx", "src/app/components/hds-tooltip.tsx", "src/app/components/tooltip.test.tsx", "src/app/context/__tests__/portal-hydration.test.tsx", "src/app/context/__tests__/portal-scope.test.tsx"], tokenMapping: {}, variantAxes: [], componentProperties: [] } }, x = /* @__PURE__ */ JSON.parse(`{"primitive":[{"path":"primitive.color.neutral.50","cssVar":"--primitive-color-neutral-50","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#fafafa"},{"path":"primitive.color.neutral.100","cssVar":"--primitive-color-neutral-100","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#f5f5f5"},{"path":"primitive.color.neutral.200","cssVar":"--primitive-color-neutral-200","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#e5e5e5"},{"path":"primitive.color.neutral.300","cssVar":"--primitive-color-neutral-300","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#d4d4d4"},{"path":"primitive.color.neutral.400","cssVar":"--primitive-color-neutral-400","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#a3a3a3"},{"path":"primitive.color.neutral.500","cssVar":"--primitive-color-neutral-500","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#737373"},{"path":"primitive.color.neutral.600","cssVar":"--primitive-color-neutral-600","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#525252"},{"path":"primitive.color.neutral.700","cssVar":"--primitive-color-neutral-700","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#404040"},{"path":"primitive.color.neutral.800","cssVar":"--primitive-color-neutral-800","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#262626"},{"path":"primitive.color.neutral.850","cssVar":"--primitive-color-neutral-850","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#1a1a1a"},{"path":"primitive.color.neutral.900","cssVar":"--primitive-color-neutral-900","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#111111"},{"path":"primitive.color.neutral.950","cssVar":"--primitive-color-neutral-950","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#0a0a0a"},{"path":"primitive.color.neutral.white","cssVar":"--primitive-color-neutral-white","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#ffffff"},{"path":"primitive.color.neutral.black","cssVar":"--primitive-color-neutral-black","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#000000"},{"path":"primitive.color.blue.50","cssVar":"--primitive-color-blue-50","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.96 0.03 266.54)"},{"path":"primitive.color.blue.100","cssVar":"--primitive-color-blue-100","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.92 0.04 266.54)"},{"path":"primitive.color.blue.200","cssVar":"--primitive-color-blue-200","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.88 0.07 266.54)"},{"path":"primitive.color.blue.300","cssVar":"--primitive-color-blue-300","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.70 0.2903 266.54)"},{"path":"primitive.color.blue.400","cssVar":"--primitive-color-blue-400","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.65 0.2903 266.54)"},{"path":"primitive.color.blue.450","cssVar":"--primitive-color-blue-450","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.56 0.29 266.60)"},{"path":"primitive.color.blue.500","cssVar":"--primitive-color-blue-500","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"#1E2EFD"},{"path":"primitive.color.blue.600","cssVar":"--primitive-color-blue-600","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.45 0.2903 266.54)"},{"path":"primitive.color.blue.700","cssVar":"--primitive-color-blue-700","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.44 0.2903 266.54)"},{"path":"primitive.color.blue.800","cssVar":"--primitive-color-blue-800","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.30 0.07 266.54)"},{"path":"primitive.color.blue.900","cssVar":"--primitive-color-blue-900","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.22 0.05 266.54)"},{"path":"primitive.color.red.50","cssVar":"--primitive-color-red-50","type":"color","description":"Specific value within the red range at a defined lightness step.","value":"#fef2f2"},{"path":"primitive.color.red.400","cssVar":"--primitive-color-red-400","type":"color","description":"Specific value within the red range at a defined lightness step.","value":"#f87171"},{"path":"primitive.color.red.700","cssVar":"--primitive-color-red-700","type":"color","description":"Specific value within the red range at a defined lightness step.","value":"#b91c1c"},{"path":"primitive.color.red.950","cssVar":"--primitive-color-red-950","type":"color","description":"Specific value within the red range at a defined lightness step.","value":"#450a0a"},{"path":"primitive.color.green.50","cssVar":"--primitive-color-green-50","type":"color","description":"Specific value within the green range at a defined lightness step.","value":"#ecfdf5"},{"path":"primitive.color.green.400","cssVar":"--primitive-color-green-400","type":"color","description":"Specific value within the green range at a defined lightness step.","value":"#34d399"},{"path":"primitive.color.green.700","cssVar":"--primitive-color-green-700","type":"color","description":"Specific value within the green range at a defined lightness step.","value":"#047857"},{"path":"primitive.color.green.950","cssVar":"--primitive-color-green-950","type":"color","description":"Specific value within the green range at a defined lightness step.","value":"#022c22"},{"path":"primitive.color.graphite.50","cssVar":"--primitive-color-graphite-50","type":"color","description":"Graphite accent tint — faintest step.","value":"#f5f4f4"},{"path":"primitive.color.graphite.100","cssVar":"--primitive-color-graphite-100","type":"color","description":"Graphite accent — very light warm tint.","value":"#e9e7e8"},{"path":"primitive.color.graphite.200","cssVar":"--primitive-color-graphite-200","type":"color","description":"Graphite accent — light warm-grey; dark-mode rest accent fill.","value":"#d4d0d2"},{"path":"primitive.color.graphite.300","cssVar":"--primitive-color-graphite-300","type":"color","description":"Graphite accent — soft mid-light step; dark-mode hover/link.","value":"#b2abae"},{"path":"primitive.color.graphite.400","cssVar":"--primitive-color-graphite-400","type":"color","description":"Graphite accent — mid warm-grey step.","value":"#8b8488"},{"path":"primitive.color.graphite.500","cssVar":"--primitive-color-graphite-500","type":"color","description":"Graphite accent — mid step.","value":"#655e62"},{"path":"primitive.color.graphite.600","cssVar":"--primitive-color-graphite-600","type":"color","description":"Graphite accent — mid-dark step.","value":"#544d51"},{"path":"primitive.color.graphite.700","cssVar":"--primitive-color-graphite-700","type":"color","description":"Graphite accent rest — the warm charcoal brand accent; white text as a fill (AA).","value":"#433a3f"},{"path":"primitive.color.graphite.800","cssVar":"--primitive-color-graphite-800","type":"color","description":"Graphite accent — deep step; light-mode hover.","value":"#352e32"},{"path":"primitive.color.graphite.900","cssVar":"--primitive-color-graphite-900","type":"color","description":"Graphite accent — darkest usable step; light-mode pressed, dark-mode on-accent text.","value":"#2a2428"},{"path":"primitive.color.graphite.950","cssVar":"--primitive-color-graphite-950","type":"color","description":"Graphite accent — near-black warm substrate.","value":"#19161a"},{"path":"primitive.color.mauve.50","cssVar":"--primitive-color-mauve-50","type":"color","description":"Mauve tint, faintest step.","value":"#fff0f6"},{"path":"primitive.color.mauve.100","cssVar":"--primitive-color-mauve-100","type":"color","description":"Mauve step 100, lightness-matched to graphite 100.","value":"#f4e2ea"},{"path":"primitive.color.mauve.200","cssVar":"--primitive-color-mauve-200","type":"color","description":"Mauve step 200, lightness-matched to graphite 200.","value":"#e1cad4"},{"path":"primitive.color.mauve.300","cssVar":"--primitive-color-mauve-300","type":"color","description":"Mauve step 300, lightness-matched to graphite 300.","value":"#c0a4b1"},{"path":"primitive.color.mauve.400","cssVar":"--primitive-color-mauve-400","type":"color","description":"Mauve step 400, lightness-matched to graphite 400.","value":"#9d7b8a"},{"path":"primitive.color.mauve.500","cssVar":"--primitive-color-mauve-500","type":"color","description":"Mauve anchor (#734B5E). Reserved; not mapped to any semantic token yet.","value":"#734b5e"},{"path":"primitive.color.mauve.600","cssVar":"--primitive-color-mauve-600","type":"color","description":"Mauve step 600, lightness-matched to graphite 600.","value":"#674254"},{"path":"primitive.color.mauve.700","cssVar":"--primitive-color-mauve-700","type":"color","description":"Mauve step 700, lightness-matched to graphite 700.","value":"#523141"},{"path":"primitive.color.mauve.800","cssVar":"--primitive-color-mauve-800","type":"color","description":"Mauve step 800, lightness-matched to graphite 800.","value":"#432634"},{"path":"primitive.color.mauve.900","cssVar":"--primitive-color-mauve-900","type":"color","description":"Mauve step 900, lightness-matched to graphite 900.","value":"#361d29"},{"path":"primitive.color.mauve.950","cssVar":"--primitive-color-mauve-950","type":"color","description":"Mauve, near-black substrate.","value":"#240f1a"},{"path":"primitive.color.violet.50","cssVar":"--primitive-color-violet-50","type":"color","description":"Specific value within the violet range at a defined lightness step.","value":"#f5f3ff"},{"path":"primitive.color.violet.400","cssVar":"--primitive-color-violet-400","type":"color","description":"Specific value within the violet range at a defined lightness step.","value":"#a78bfa"},{"path":"primitive.color.violet.700","cssVar":"--primitive-color-violet-700","type":"color","description":"Specific value within the violet range at a defined lightness step.","value":"#6d28d9"},{"path":"primitive.color.violet.950","cssVar":"--primitive-color-violet-950","type":"color","description":"Specific value within the violet range at a defined lightness step.","value":"#2e1065"},{"path":"primitive.color.lilac.50","cssVar":"--primitive-color-lilac-50","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#f7f4fe"},{"path":"primitive.color.lilac.100","cssVar":"--primitive-color-lilac-100","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#efe9fd"},{"path":"primitive.color.lilac.200","cssVar":"--primitive-color-lilac-200","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#ddd0fb"},{"path":"primitive.color.lilac.300","cssVar":"--primitive-color-lilac-300","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#c3aef6"},{"path":"primitive.color.lilac.400","cssVar":"--primitive-color-lilac-400","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#a585ee"},{"path":"primitive.color.lilac.450","cssVar":"--primitive-color-lilac-450","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#9a6fe8"},{"path":"primitive.color.lilac.500","cssVar":"--primitive-color-lilac-500","type":"color","description":"Lilac accent rest — AA for white text on page and card surfaces.","value":"#6f3fd4"},{"path":"primitive.color.lilac.600","cssVar":"--primitive-color-lilac-600","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#5f33c0"},{"path":"primitive.color.lilac.700","cssVar":"--primitive-color-lilac-700","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#4f2aa3"},{"path":"primitive.color.lilac.800","cssVar":"--primitive-color-lilac-800","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#3a1f78"},{"path":"primitive.color.lilac.900","cssVar":"--primitive-color-lilac-900","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#2a1659"},{"path":"primitive.color.amber.50","cssVar":"--primitive-color-amber-50","type":"color","description":"Specific value within the amber range at a defined lightness step.","value":"#fffbeb"},{"path":"primitive.color.amber.400","cssVar":"--primitive-color-amber-400","type":"color","description":"Specific value within the amber range at a defined lightness step.","value":"#fbbf24"},{"path":"primitive.color.amber.800","cssVar":"--primitive-color-amber-800","type":"color","description":"Specific value within the amber range at a defined lightness step.","value":"#92400e"},{"path":"primitive.color.amber.950","cssVar":"--primitive-color-amber-950","type":"color","description":"Specific value within the amber range at a defined lightness step.","value":"#451a03"},{"path":"primitive.color.stone.100","cssVar":"--primitive-color-stone-100","type":"color","description":"Stone 100 — near-white warm tint; accent-subtle surface.","value":"#F5EFE7"},{"path":"primitive.color.stone.400","cssVar":"--primitive-color-stone-400","type":"color","description":"Stone 400 — light warm tone; dark-mode pressed accent.","value":"#D0B492"},{"path":"primitive.color.stone.450","cssVar":"--primitive-color-stone-450","type":"color","description":"Stone 450 — medium warm tone; dark-mode hover accent.","value":"#BC9D7E"},{"path":"primitive.color.stone.500","cssVar":"--primitive-color-stone-500","type":"color","description":"Stone 500 — mid warm tone; dark-mode rest accent.","value":"#A8896A"},{"path":"primitive.color.stone.600","cssVar":"--primitive-color-stone-600","type":"color","description":"Stone 600 — primary warm stone; light-mode rest accent and CTA surface.","value":"#8B6F47"},{"path":"primitive.color.stone.700","cssVar":"--primitive-color-stone-700","type":"color","description":"Stone 700 — darker warm stone; light-mode hover accent.","value":"#75593A"},{"path":"primitive.color.stone.800","cssVar":"--primitive-color-stone-800","type":"color","description":"Stone 800 — deep warm stone; light-mode pressed accent.","value":"#5C432A"},{"path":"primitive.color.stone.950","cssVar":"--primitive-color-stone-950","type":"color","description":"Stone 950 — near-black warm tone; dark-mode subtle accent surface.","value":"#3A2E1F"},{"path":"primitive.color.projectBrand.microsoftGameDev.100","cssVar":"--primitive-color-projectBrand-microsoftGameDev-100","type":"color","description":"Light support tone for the Microsoft Game Dev project brand.","value":"#E5E5FC"},{"path":"primitive.color.projectBrand.microsoftGameDev.500","cssVar":"--primitive-color-projectBrand-microsoftGameDev-500","type":"color","description":"Primary accent tone for the Microsoft Game Dev project brand.","value":"#6d31fb"},{"path":"primitive.color.projectBrand.microsoftGameDev.900","cssVar":"--primitive-color-projectBrand-microsoftGameDev-900","type":"color","description":"Dark support tone for the Microsoft Game Dev project brand.","value":"oklch(0.22 0.16 304)"},{"path":"primitive.space.0","cssVar":"--primitive-space-0","type":"dimension","value":"0px"},{"path":"primitive.space.1","cssVar":"--primitive-space-1","type":"dimension","value":"4px"},{"path":"primitive.space.2","cssVar":"--primitive-space-2","type":"dimension","value":"8px"},{"path":"primitive.space.3","cssVar":"--primitive-space-3","type":"dimension","value":"12px"},{"path":"primitive.space.4","cssVar":"--primitive-space-4","type":"dimension","value":"16px"},{"path":"primitive.space.5","cssVar":"--primitive-space-5","type":"dimension","value":"20px"},{"path":"primitive.space.6","cssVar":"--primitive-space-6","type":"dimension","value":"24px"},{"path":"primitive.space.7","cssVar":"--primitive-space-7","type":"dimension","value":"28px"},{"path":"primitive.space.8","cssVar":"--primitive-space-8","type":"dimension","value":"32px"},{"path":"primitive.space.10","cssVar":"--primitive-space-10","type":"dimension","value":"40px"},{"path":"primitive.space.12","cssVar":"--primitive-space-12","type":"dimension","value":"48px"},{"path":"primitive.space.16","cssVar":"--primitive-space-16","type":"dimension","value":"64px"},{"path":"primitive.space.20","cssVar":"--primitive-space-20","type":"dimension","value":"80px"},{"path":"primitive.space.24","cssVar":"--primitive-space-24","type":"dimension","value":"96px"},{"path":"primitive.space.32","cssVar":"--primitive-space-32","type":"dimension","value":"128px"},{"path":"primitive.space.px1","cssVar":"--primitive-space-px1","type":"dimension","value":"1px"},{"path":"primitive.space.px2","cssVar":"--primitive-space-px2","type":"dimension","value":"2px"},{"path":"primitive.space.px6","cssVar":"--primitive-space-px6","type":"dimension","value":"6px"},{"path":"primitive.space.px10","cssVar":"--primitive-space-px10","type":"dimension","value":"10px"},{"path":"primitive.blur.8","cssVar":"--primitive-blur-8","type":"dimension","description":"8px blur step.","value":"8px"},{"path":"primitive.blur.16","cssVar":"--primitive-blur-16","type":"dimension","description":"Fullscreen backdrop blur for portfolio lightbox overlays.","value":"16px"},{"path":"primitive.radius.0","cssVar":"--primitive-radius-0","type":"dimension","value":"0px"},{"path":"primitive.radius.2","cssVar":"--primitive-radius-2","type":"dimension","value":"2px"},{"path":"primitive.radius.4","cssVar":"--primitive-radius-4","type":"dimension","value":"4px"},{"path":"primitive.radius.8","cssVar":"--primitive-radius-8","type":"dimension","value":"8px"},{"path":"primitive.radius.12","cssVar":"--primitive-radius-12","type":"dimension","value":"12px"},{"path":"primitive.radius.full","cssVar":"--primitive-radius-full","type":"dimension","value":"9999px"},{"path":"primitive.typography.family.primary","cssVar":"--primitive-typography-family-primary","type":"fontFamily","description":"Self-hosted Plus Jakarta Sans (OFL) body typeface; falls back to system-ui sans-serif stack.","value":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif"},{"path":"primitive.typography.family.display","cssVar":"--primitive-typography-family-display","type":"fontFamily","description":"Display face: Plus Jakarta Sans Bold (OFL), bound to the display and title composites.","value":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif"},{"path":"primitive.typography.family.mono","cssVar":"--primitive-typography-family-mono","type":"fontFamily","description":"Monospace face: IBM Plex Mono. Falls back to Courier New, monospace.","value":"\\"IBM Plex Mono\\", \\"Courier New\\", monospace"},{"path":"primitive.typography.size.xs","cssVar":"--primitive-typography-size-xs","type":"dimension","description":"Tailwind 4 default text-xs (hds#283 ramp).","value":"12px"},{"path":"primitive.typography.size.sm","cssVar":"--primitive-typography-size-sm","type":"dimension","description":"Tailwind 4 default text-sm (hds#283 ramp).","value":"14px"},{"path":"primitive.typography.size.base","cssVar":"--primitive-typography-size-base","type":"dimension","description":"Tailwind 4 default text-base (hds#283 ramp).","value":"16px"},{"path":"primitive.typography.size.lg","cssVar":"--primitive-typography-size-lg","type":"dimension","description":"Tailwind 4 default text-lg (hds#283 ramp).","value":"18px"},{"path":"primitive.typography.size.xl","cssVar":"--primitive-typography-size-xl","type":"dimension","description":"Tailwind 4 default text-xl (hds#283 ramp).","value":"20px"},{"path":"primitive.typography.size.2xl","cssVar":"--primitive-typography-size-2xl","type":"dimension","description":"Tailwind 4 default text-2xl (hds#283 ramp).","value":"24px"},{"path":"primitive.typography.size.3xl","cssVar":"--primitive-typography-size-3xl","type":"dimension","description":"Tailwind 4 default text-3xl (hds#283 ramp).","value":"30px"},{"path":"primitive.typography.size.4xl","cssVar":"--primitive-typography-size-4xl","type":"dimension","description":"Tailwind 4 default text-4xl (hds#283 ramp).","value":"36px"},{"path":"primitive.typography.size.5xl","cssVar":"--primitive-typography-size-5xl","type":"dimension","description":"Tailwind 4 default text-5xl (hds#283 ramp).","value":"48px"},{"path":"primitive.typography.size.6xl","cssVar":"--primitive-typography-size-6xl","type":"dimension","description":"Swiss-canon display size (hds#283 ramp). Static desktop value; fluid in theme.css. Tailwind 4 default text-6xl.","value":"60px"},{"path":"primitive.typography.size.code","cssVar":"--primitive-typography-size-code","type":"dimension","description":"13px code size. The mono role (hds#485): one px below ui so code sits level with 14px prose.","value":"13px"},{"path":"primitive.typography.weight.regular","cssVar":"--primitive-typography-weight-regular","type":"fontWeight","value":"400"},{"path":"primitive.typography.weight.medium","cssVar":"--primitive-typography-weight-medium","type":"fontWeight","value":"500"},{"path":"primitive.typography.weight.bold","cssVar":"--primitive-typography-weight-bold","type":"fontWeight","value":"700"},{"path":"primitive.typography.lineHeight.compact","cssVar":"--primitive-typography-lineHeight-compact","type":"number","value":"0.95"},{"path":"primitive.typography.lineHeight.none","cssVar":"--primitive-typography-lineHeight-none","type":"number","value":"1"},{"path":"primitive.typography.lineHeight.tight","cssVar":"--primitive-typography-lineHeight-tight","type":"number","value":"1.25"},{"path":"primitive.typography.lineHeight.snug","cssVar":"--primitive-typography-lineHeight-snug","type":"number","description":"Swiss-canon snug rhythm (10t-5). Used by h2/h3 composites for tight-but-readable heading lines.","value":"1.375"},{"path":"primitive.typography.lineHeight.normal","cssVar":"--primitive-typography-lineHeight-normal","type":"number","value":"1.5"},{"path":"primitive.typography.lineHeight.relaxed","cssVar":"--primitive-typography-lineHeight-relaxed","type":"number","description":"Swiss-canon relaxed rhythm (10t-5). Used by body/small/mono composites for long-form prose comfort.","value":"1.625"},{"path":"primitive.typography.lineHeight.display","cssVar":"--primitive-typography-lineHeight-display","type":"number","description":"Display role leading (hds#485).","value":"1.05"},{"path":"primitive.typography.lineHeight.body","cssVar":"--primitive-typography-lineHeight-body","type":"number","description":"Body role leading (hds#485).","value":"1.6"},{"path":"primitive.typography.letterSpacing.tight","cssVar":"--primitive-typography-letterSpacing-tight","type":"dimension","value":"-0.01em"},{"path":"primitive.typography.letterSpacing.normal","cssVar":"--primitive-typography-letterSpacing-normal","type":"dimension","value":"0em"},{"path":"primitive.typography.letterSpacing.caps","cssVar":"--primitive-typography-letterSpacing-caps","type":"dimension","description":"All-caps tracking for eyebrow / kicker labels. Always pairs with text-transform: uppercase.","value":"0.06em"},{"path":"primitive.duration.instant","cssVar":"--primitive-duration-instant","type":"duration","description":"Fixed elapsed time interval in milliseconds.","value":"100ms"},{"path":"primitive.duration.short","cssVar":"--primitive-duration-short","type":"duration","description":"Fixed elapsed time interval in milliseconds.","value":"150ms"},{"path":"primitive.duration.medium","cssVar":"--primitive-duration-medium","type":"duration","description":"Fixed elapsed time interval in milliseconds.","value":"250ms"},{"path":"primitive.duration.long","cssVar":"--primitive-duration-long","type":"duration","description":"Fixed elapsed time interval in milliseconds.","value":"400ms"},{"path":"primitive.easing.emphasized","cssVar":"--primitive-easing-emphasized","type":"cubicBezier","description":"Cubic bezier with balanced input and output tangents.","value":"cubic-bezier(0.4, 0, 0.2, 1)"},{"path":"primitive.easing.decelerate","cssVar":"--primitive-easing-decelerate","type":"cubicBezier","description":"Cubic bezier with steep initial gain and constrained tail velocity.","value":"cubic-bezier(0, 0, 0.2, 1)"},{"path":"primitive.easing.accelerate","cssVar":"--primitive-easing-accelerate","type":"cubicBezier","description":"Cubic bezier with restrained initial gain and steep terminal velocity.","value":"cubic-bezier(0.4, 0, 1, 1)"},{"path":"primitive.easing.elastic","cssVar":"--primitive-easing-elastic","type":"spring","description":"Spring response defined by stiffness, damping, and mass parameters.","value":"spring(300, 20, 1)"},{"path":"primitive.shadow.color","cssVar":"--primitive-shadow-color","type":"color","description":"HSL channels for shadow-color alpha compositing. Light: cool neutral; dark: black.","value":"220 13% 18%","dark":{"alias":"0 0% 0%","resolvedValue":"0 0% 0%"}},{"path":"primitive.breakpoint.xs","cssVar":"--primitive-breakpoint-xs","type":"dimension","value":"375px"},{"path":"primitive.breakpoint.sm","cssVar":"--primitive-breakpoint-sm","type":"dimension","value":"640px"},{"path":"primitive.breakpoint.md","cssVar":"--primitive-breakpoint-md","type":"dimension","value":"768px"},{"path":"primitive.breakpoint.lg","cssVar":"--primitive-breakpoint-lg","type":"dimension","value":"1024px"},{"path":"primitive.breakpoint.xl","cssVar":"--primitive-breakpoint-xl","type":"dimension","value":"1280px"},{"path":"primitive.size.8","cssVar":"--primitive-size-8","type":"dimension","description":"8px size step.","value":"8px"},{"path":"primitive.size.10","cssVar":"--primitive-size-10","type":"dimension","description":"10px size step.","value":"10px"},{"path":"primitive.size.12","cssVar":"--primitive-size-12","type":"dimension","description":"12px size step.","value":"12px"},{"path":"primitive.size.16","cssVar":"--primitive-size-16","type":"dimension","description":"16px size step.","value":"16px"},{"path":"primitive.size.20","cssVar":"--primitive-size-20","type":"dimension","description":"20px size step.","value":"20px"},{"path":"primitive.size.24","cssVar":"--primitive-size-24","type":"dimension","description":"24px size step.","value":"24px"},{"path":"primitive.size.32","cssVar":"--primitive-size-32","type":"dimension","description":"32px size step.","value":"32px"},{"path":"primitive.size.40","cssVar":"--primitive-size-40","type":"dimension","description":"40px size step.","value":"40px"},{"path":"primitive.size.48","cssVar":"--primitive-size-48","type":"dimension","description":"48px size step.","value":"48px"},{"path":"primitive.size.64","cssVar":"--primitive-size-64","type":"dimension","description":"64px size step.","value":"64px"},{"path":"primitive.size.80","cssVar":"--primitive-size-80","type":"dimension","description":"80px size step.","value":"80px"},{"path":"primitive.size.96","cssVar":"--primitive-size-96","type":"dimension","description":"96px size step.","value":"96px"},{"path":"primitive.size.120","cssVar":"--primitive-size-120","type":"dimension","description":"120px size step. Backs semantic.size.tile.","value":"120px"},{"path":"primitive.size.interactive.min","cssVar":"--primitive-size-interactive-min","type":"dimension","description":"Minimum interactive hit target size.","value":"44px"},{"path":"primitive.size.interactive.minCompact","cssVar":"--primitive-size-interactive-minCompact","type":"dimension","description":"Compact inline control target minimum, e.g. a chip's remove button: WCAG 2.2 AA (2.5.8), not the 44px AAA floor (2.5.5).","value":"24px"},{"path":"primitive.size.width.96","cssVar":"--primitive-size-width-96","type":"dimension","description":"96px width step.","value":"96px"},{"path":"primitive.size.width.280","cssVar":"--primitive-size-width-280","type":"dimension","description":"Docs-shell rail width (hds#280): our own number, not HeroUI's 268px; fits the longest top-level nav label with room.","value":"280px"},{"path":"primitive.size.width.760","cssVar":"--primitive-size-width-760","type":"dimension","value":"760px"},{"path":"primitive.size.width.1200","cssVar":"--primitive-size-width-1200","type":"dimension","value":"1200px"},{"path":"primitive.size.width.50ch","cssVar":"--primitive-size-width-50ch","type":"dimension","value":"50ch"},{"path":"primitive.grid.columns.1","cssVar":"--primitive-grid-columns-1","type":"number","value":"1"},{"path":"primitive.grid.columns.2","cssVar":"--primitive-grid-columns-2","type":"number","value":"2"},{"path":"primitive.grid.columns.3","cssVar":"--primitive-grid-columns-3","type":"number","value":"3"},{"path":"primitive.zIndex.0","cssVar":"--primitive-zIndex-0","type":"number","value":"0"},{"path":"primitive.zIndex.10","cssVar":"--primitive-zIndex-10","type":"number","value":"10"},{"path":"primitive.zIndex.100","cssVar":"--primitive-zIndex-100","type":"number","value":"100"},{"path":"primitive.zIndex.1000","cssVar":"--primitive-zIndex-1000","type":"number","value":"1000"},{"path":"primitive.borderWidth.xs","cssVar":"--primitive-borderWidth-xs","type":"dimension","value":"1px"},{"path":"primitive.borderWidth.sm","cssVar":"--primitive-borderWidth-sm","type":"dimension","value":"2px"},{"path":"primitive.borderWidth.md","cssVar":"--primitive-borderWidth-md","type":"dimension","value":"4px"}],"semantic":[{"path":"semantic.motion.productive","cssVar":"--hds-motion-productive","type":"motion","description":"For micro-interactions and status changes. No deformation.","composite":{"duration":"150ms","easing":"cubic-bezier(0, 0, 0.2, 1)"}},{"path":"semantic.motion.expressive","cssVar":"--hds-motion-expressive","type":"motion","description":"For teaching moments and significant UI entries. Includes physics-based squish.","composite":{"duration":"250ms","easing":"spring(300, 20, 1)"}},{"path":"semantic.motion.spatial","cssVar":"--hds-motion-spatial","type":"motion","description":"For elements traveling long distances across the viewport.","composite":{"duration":"400ms","easing":"cubic-bezier(0.4, 0, 0.2, 1)"}},{"path":"semantic.motion.exit","cssVar":"--hds-motion-exit","type":"motion","description":"For elements being removed from the DOM.","composite":{"duration":"100ms","easing":"cubic-bezier(0.4, 0, 1, 1)"}},{"path":"semantic.motion.distance","cssVar":"--semantic-motion-distance","type":"dimension","description":"Scroll-reveal translateY travel distance. Equals semantic.space.scale.md today, but names motion travel, not a spacing tier (hds#242).","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.color.surface.page","cssVar":"--semantic-color-surface-page","type":"color","description":"Main page background","alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff","dark":{"alias":"{primitive.color.neutral.black}","resolvedValue":"#000000"}},{"path":"semantic.color.surface.raised","cssVar":"--semantic-color-surface-raised","type":"color","description":"Subtle elevated surface (cards, sections)","alias":"{primitive.color.neutral.50}","resolvedValue":"#fafafa","dark":{"alias":"{primitive.color.neutral.950}","resolvedValue":"#0a0a0a"}},{"path":"semantic.color.surface.overlay","cssVar":"--semantic-color-surface-overlay","type":"color","description":"Deeper surface layer","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.850}","resolvedValue":"#1a1a1a"}},{"path":"semantic.color.surface.scrim","cssVar":"--semantic-color-surface-scrim","type":"color","description":"Opaque modal backdrop, near-black in both themes. Apply alpha in the class (bg-scrim/60), not here.","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.black}","resolvedValue":"#000000"}},{"path":"semantic.color.surface.inverse","cssVar":"--semantic-color-surface-inverse","type":"color","description":"Inverted background for contrast sections","alias":"{primitive.color.neutral.black}","resolvedValue":"#000000","dark":{"alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff"}},{"path":"semantic.color.surface.accent","cssVar":"--semantic-color-surface-accent","type":"color","description":"Accent fill, warm graphite. Dark in light mode, light warm-grey in dark mode; pair with content.onAccent.","alias":"{primitive.color.graphite.700}","resolvedValue":"#433a3f","dark":{"alias":"{primitive.color.graphite.200}","resolvedValue":"#d4d0d2"}},{"path":"semantic.color.surface.accentSubtle","cssVar":"--semantic-color-surface-accentSubtle","type":"color","description":"Faint accent tint for hover states or highlights.","alias":"{primitive.color.graphite.50}","resolvedValue":"#f5f4f4","dark":{"alias":"{primitive.color.graphite.800}","resolvedValue":"#352e32"}},{"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"}},{"path":"semantic.color.content.primary","cssVar":"--semantic-color-content-primary","type":"color","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.color.content.secondary","cssVar":"--semantic-color-content-secondary","type":"color","alias":"{primitive.color.neutral.600}","resolvedValue":"#525252","dark":{"alias":"{primitive.color.neutral.400}","resolvedValue":"#a3a3a3"}},{"path":"semantic.color.content.disabled","cssVar":"--semantic-color-content-disabled","type":"color","alias":"{primitive.color.neutral.300}","resolvedValue":"#d4d4d4","dark":{"alias":"{primitive.color.neutral.600}","resolvedValue":"#525252"}},{"path":"semantic.color.content.inverse","cssVar":"--semantic-color-content-inverse","type":"color","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.900}","resolvedValue":"#111111"}},{"path":"semantic.color.content.accent","cssVar":"--semantic-color-content-accent","type":"color","description":"Accent-intent text/icon color — graphite, legible on page and card surfaces. Pair with underline/weight for link affordance.","alias":"{primitive.color.graphite.700}","resolvedValue":"#433a3f","dark":{"alias":"{primitive.color.graphite.300}","resolvedValue":"#b2abae"}},{"path":"semantic.color.content.onAccent","cssVar":"--semantic-color-content-onAccent","type":"color","description":"Text and icons on accent fills: near-white in light mode, dark graphite in dark mode.","alias":"{primitive.color.neutral.50}","resolvedValue":"#fafafa","dark":{"alias":"{primitive.color.graphite.900}","resolvedValue":"#2a2428"}},{"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"}},{"path":"semantic.color.border.default","cssVar":"--semantic-color-border-default","type":"color","alias":"{primitive.color.neutral.200}","resolvedValue":"#e5e5e5","dark":{"alias":"{primitive.color.neutral.700}","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","type":"color","alias":"{primitive.color.neutral.200}","resolvedValue":"#e5e5e5","dark":{"alias":"{primitive.color.neutral.800}","resolvedValue":"#262626"}},{"path":"semantic.color.border.subtle","cssVar":"--semantic-color-border-subtle","type":"color","description":"Lowest-contrast border for resting hairline edges on flat surfaces.","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.850}","resolvedValue":"#1a1a1a"}},{"path":"semantic.color.border.strong","cssVar":"--semantic-color-border-strong","type":"color","alias":"{primitive.color.neutral.300}","resolvedValue":"#d4d4d4","dark":{"alias":"{primitive.color.neutral.600}","resolvedValue":"#525252"}},{"path":"semantic.color.border.accent","cssVar":"--semantic-color-border-accent","type":"color","description":"Accent border — graphite, dark enough to read as a boundary on page and card surfaces.","alias":"{primitive.color.graphite.700}","resolvedValue":"#433a3f","dark":{"alias":"{primitive.color.graphite.300}","resolvedValue":"#b2abae"}},{"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.amber.400}","resolvedValue":"#fbbf24"}},{"path":"semantic.color.feedback.error","cssVar":"--semantic-color-feedback-error","type":"color","alias":"{primitive.color.red.700}","resolvedValue":"#b91c1c","dark":{"alias":"{primitive.color.red.400}","resolvedValue":"#f87171"}},{"path":"semantic.color.feedback.success","cssVar":"--semantic-color-feedback-success","type":"color","alias":"{primitive.color.green.700}","resolvedValue":"#047857","dark":{"alias":"{primitive.color.green.400}","resolvedValue":"#34d399"}},{"path":"semantic.color.feedback.warning","cssVar":"--semantic-color-feedback-warning","type":"color","alias":"{primitive.color.amber.800}","resolvedValue":"#92400e","dark":{"alias":"{primitive.color.amber.400}","resolvedValue":"#fbbf24"}},{"path":"semantic.color.feedback.info","cssVar":"--semantic-color-feedback-info","type":"color","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.300}","resolvedValue":"oklch(0.70 0.2903 266.54)"}},{"path":"semantic.color.feedback.inProgress","cssVar":"--semantic-color-feedback-inProgress","type":"color","alias":"{primitive.color.violet.700}","resolvedValue":"#6d28d9","dark":{"alias":"{primitive.color.violet.400}","resolvedValue":"#a78bfa"}},{"path":"semantic.color.feedback.bg.error","cssVar":"--semantic-color-feedback-bg-error","type":"color","alias":"{primitive.color.red.50}","resolvedValue":"#fef2f2","dark":{"alias":"{primitive.color.red.950}","resolvedValue":"#450a0a"}},{"path":"semantic.color.feedback.bg.success","cssVar":"--semantic-color-feedback-bg-success","type":"color","alias":"{primitive.color.green.50}","resolvedValue":"#ecfdf5","dark":{"alias":"{primitive.color.green.950}","resolvedValue":"#022c22"}},{"path":"semantic.color.feedback.bg.warning","cssVar":"--semantic-color-feedback-bg-warning","type":"color","alias":"{primitive.color.amber.50}","resolvedValue":"#fffbeb","dark":{"alias":"{primitive.color.amber.950}","resolvedValue":"#451a03"}},{"path":"semantic.color.feedback.bg.info","cssVar":"--semantic-color-feedback-bg-info","type":"color","alias":"{primitive.color.blue.50}","resolvedValue":"oklch(0.96 0.03 266.54)","dark":{"alias":"{primitive.color.blue.900}","resolvedValue":"oklch(0.22 0.05 266.54)"}},{"path":"semantic.color.feedback.bg.inProgress","cssVar":"--semantic-color-feedback-bg-inProgress","type":"color","alias":"{primitive.color.violet.50}","resolvedValue":"#f5f3ff","dark":{"alias":"{primitive.color.violet.950}","resolvedValue":"#2e1065"}},{"path":"semantic.color.state.pressed.overlay","cssVar":"--semantic-color-state-pressed-overlay","type":"color","description":"Opaque pressed wash over a control's own fill: black in light, white in dark. Alpha in the class (inset-shadow-pressed-overlay/5).","alias":"{primitive.color.neutral.black}","resolvedValue":"#000000","dark":{"alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff"}},{"path":"semantic.space.scale.xs","cssVar":"--semantic-space-scale-xs","type":"dimension","description":"8px — smallest step. Same value as component.gap (deprecated alias).","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"semantic.space.scale.sm","cssVar":"--semantic-space-scale-sm","type":"dimension","description":"16px — same value as layout.tight (deprecated alias).","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"semantic.space.scale.md","cssVar":"--semantic-space-scale-md","type":"dimension","description":"24px. Default of the overridable roles surface.padding and region.gutter. The deprecated layout.normal has the same value.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.space.scale.lg","cssVar":"--semantic-space-scale-lg","type":"dimension","description":"32px — same value as layout.inset (deprecated alias).","alias":"{primitive.space.8}","resolvedValue":"32px"},{"path":"semantic.space.scale.xl","cssVar":"--semantic-space-scale-xl","type":"dimension","description":"48px — same value as layout.spacious (deprecated alias).","alias":"{primitive.space.12}","resolvedValue":"48px"},{"path":"semantic.space.surface.padding","cssVar":"--semantic-space-surface-padding","type":"dimension","description":"24px (scale.md) inset for cards, forms and panels. Tenants override it per brand and density. Replaces component.padding.","alias":"{semantic.space.scale.md}","resolvedValue":"24px"},{"path":"semantic.space.region.gutter","cssVar":"--semantic-space-region-gutter","type":"dimension","description":"24px (scale.md) column and region gutters; theme.css sets scale.lg (32px), and scale.sm (16px) below 640px. Replaces layout.gutter.","alias":"{semantic.space.scale.md}","resolvedValue":"24px"},{"path":"semantic.space.subgrid.hairline","cssVar":"--semantic-space-subgrid-hairline","type":"dimension","description":"1px border offset and hairline spacing.","alias":"{primitive.space.px1}","resolvedValue":"1px"},{"path":"semantic.space.subgrid.xs","cssVar":"--semantic-space-subgrid-xs","type":"dimension","description":"2px vertical rhythm nudge and baseline adjustment.","alias":"{primitive.space.px2}","resolvedValue":"2px"},{"path":"semantic.space.subgrid.gap","cssVar":"--semantic-space-subgrid-gap","type":"dimension","description":"4px cap-height and inline cluster spacing.","alias":"{primitive.space.1}","resolvedValue":"4px"},{"path":"semantic.space.component.gap","cssVar":"--semantic-space-component-gap","type":"dimension","description":"8px label↔input rhythm and closely coupled control spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.xs; kept live, no removal yet.","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"semantic.space.component.medium","cssVar":"--semantic-space-component-medium","type":"dimension","description":"12px adjacent form fields and medium intra-component gaps.","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"semantic.space.component.padding","cssVar":"--semantic-space-component-padding","type":"dimension","description":"24px inset for cards, forms and panels. DEPRECATED alias (hds#206) — use semantic.space.surface.padding; kept live, no removal yet.","alias":"{semantic.space.surface.padding}","resolvedValue":"24px"},{"path":"semantic.space.layout.tight","cssVar":"--semantic-space-layout-tight","type":"dimension","description":"16px default HdsStack gap and inter-component spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.sm; kept live, no removal yet.","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"semantic.space.layout.normal","cssVar":"--semantic-space-layout-normal","type":"dimension","description":"24px column gutters and sidebar gutter spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.md; kept live, no removal yet.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.space.layout.gutter","cssVar":"--semantic-space-layout-gutter","type":"dimension","description":"24px column and region gutters. DEPRECATED alias (hds#206) — use semantic.space.region.gutter (responsive in theme.css); kept live, no removal yet.","alias":"{semantic.space.region.gutter}","resolvedValue":"24px"},{"path":"semantic.space.layout.inset","cssVar":"--semantic-space-layout-inset","type":"dimension","description":"32px major block separation and inset inter-component gaps. DEPRECATED alias (hds#206) — use semantic.space.scale.lg; kept live, no removal yet.","alias":"{primitive.space.8}","resolvedValue":"32px"},{"path":"semantic.space.layout.spacious","cssVar":"--semantic-space-layout-spacious","type":"dimension","description":"48px break between major content blocks. DEPRECATED alias (hds#206) — use semantic.space.scale.xl; kept live, no removal yet.","alias":"{primitive.space.12}","resolvedValue":"48px"},{"path":"semantic.space.section.stack","cssVar":"--semantic-space-section-stack","type":"dimension","description":"80px vertical rhythm between page sections and major editorial blocks.","alias":"{primitive.space.20}","resolvedValue":"80px"},{"path":"semantic.space.section.inset","cssVar":"--semantic-space-section-inset","type":"dimension","description":"96px hero and landing-page inset padding.","alias":"{primitive.space.24}","resolvedValue":"96px"},{"path":"semantic.space.section.heroMax","cssVar":"--semantic-space-section-heroMax","type":"dimension","description":"128px maximum hero region padding for extra-large displays.","alias":"{primitive.space.32}","resolvedValue":"128px"},{"path":"semantic.space.sidebar.indent","cssVar":"--semantic-space-sidebar-indent","type":"dimension","description":"12px indent level for nested sidebar and TOC groups.","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"semantic.space.sidebar.gap","cssVar":"--semantic-space-sidebar-gap","type":"dimension","description":"16px vertical spacing between items in sidebar and TOC stacks.","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"semantic.space.sidebar.sectionGap","cssVar":"--semantic-space-sidebar-sectionGap","type":"dimension","description":"12px spacing between sidebar sections and grouped rail blocks.","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"semantic.space.sidebar.railPadding","cssVar":"--semantic-space-sidebar-railPadding","type":"dimension","description":"20px outer padding for sidebar and TOC rails.","alias":"{primitive.space.5}","resolvedValue":"20px"},{"path":"semantic.space.sidebar.railWidth","cssVar":"--semantic-space-sidebar-railWidth","type":"dimension","description":"Docs-shell nav and TOC rail width (hds#280), one token for both rails; 0 below their breakpoint (see HdsDocsShell).","alias":"{primitive.size.width.280}","resolvedValue":"280px"},{"path":"semantic.layout.width.content","cssVar":"--semantic-layout-width-content","type":"dimension","description":"Max width for prose/content (760px). Use with HdsContainer for centered text blocks.","alias":"{primitive.size.width.760}","resolvedValue":"760px"},{"path":"semantic.layout.width.max","cssVar":"--semantic-layout-width-max","type":"dimension","description":"Max width for full-layout containers (1200px). Use with HdsContainer for page layouts.","alias":"{primitive.size.width.1200}","resolvedValue":"1200px"},{"path":"semantic.layout.container.maxWidth","cssVar":"--semantic-layout-container-maxWidth","type":"dimension","alias":"{primitive.size.width.1200}","resolvedValue":"1200px"},{"path":"semantic.layout.content.maxWidth","cssVar":"--semantic-layout-content-maxWidth","type":"dimension","alias":"{primitive.size.width.760}","resolvedValue":"760px"},{"path":"semantic.layout.prose.maxWidth","cssVar":"--semantic-layout-prose-maxWidth","type":"dimension","alias":"{primitive.size.width.50ch}","resolvedValue":"50ch"},{"path":"semantic.layout.section.paddingY","cssVar":"--semantic-layout-section-paddingY","type":"dimension","alias":"{primitive.space.20}","resolvedValue":"80px"},{"path":"semantic.layout.grid.gap","cssVar":"--semantic-layout-grid-gap","type":"dimension","alias":"{primitive.space.8}","resolvedValue":"32px"},{"path":"semantic.layout.grid.columns.mobile","cssVar":"--semantic-layout-grid-columns-mobile","type":"number","alias":"{primitive.grid.columns.1}","resolvedValue":"1"},{"path":"semantic.layout.grid.columns.tablet","cssVar":"--semantic-layout-grid-columns-tablet","type":"number","alias":"{primitive.grid.columns.2}","resolvedValue":"2"},{"path":"semantic.layout.grid.columns.desktop","cssVar":"--semantic-layout-grid-columns-desktop","type":"number","alias":"{primitive.grid.columns.3}","resolvedValue":"3"},{"path":"semantic.typography.display","cssVar":"--semantic-typography-display","type":"typography","description":"One per page, hero only. 48px / 1.05 / 700. Role 1 of 6.","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"48px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.05"}},{"path":"semantic.typography.title","cssVar":"--semantic-typography-title","type":"typography","description":"Section and card headings. 24px / 1.25 / 700. Role 2 of 6.","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"24px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.25"}},{"path":"semantic.typography.body","cssVar":"--semantic-typography-body","type":"typography","description":"Prose. 16px / 1.6 / 400, 60ch measure. Role 3 of 6.","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"16px","fontWeight":"400","letterSpacing":"0em","lineHeight":"1.6","maxWidth":"60ch"}},{"path":"semantic.typography.ui","cssVar":"--semantic-typography-ui","type":"typography","description":"Controls, nav, table text, values. 14px / 1.5 / 500. Role 4 of 6.","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"14px","fontWeight":"500","letterSpacing":"0em","lineHeight":"1.5","maxWidth":"60ch"}},{"path":"semantic.typography.caption","cssVar":"--semantic-typography-caption","type":"typography","description":"Metadata, help text and labels, in sentence case. 12px / 1.5 / 500. Role 5 of 6.","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"12px","fontWeight":"500","letterSpacing":"0em","lineHeight":"1.5"}},{"path":"semantic.typography.mono","cssVar":"--semantic-typography-mono","type":"typography","description":"Code and ids. 13px / 1.5 / 400. The mono companion, role 6 of 6.","composite":{"fontFamily":"\\"IBM Plex Mono\\", \\"Courier New\\", monospace","fontSize":"13px","fontWeight":"400","letterSpacing":"0em","lineHeight":"1.5","maxWidth":"60ch"}},{"path":"semantic.typography.h1","cssVar":"--semantic-typography-h1","type":"typography","description":"deprecated: use semantic.typography.title","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"24px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.25"}},{"path":"semantic.typography.h2","cssVar":"--semantic-typography-h2","type":"typography","description":"deprecated: use semantic.typography.title","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"24px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.25"}},{"path":"semantic.typography.h3","cssVar":"--semantic-typography-h3","type":"typography","description":"deprecated: use semantic.typography.title","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"24px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.25"}},{"path":"semantic.typography.eyebrow","cssVar":"--semantic-typography-eyebrow","type":"typography","description":"deprecated: use semantic.typography.caption","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"12px","fontWeight":"500","letterSpacing":"0em","lineHeight":"1.5"}},{"path":"semantic.typography.lineHeight.none","cssVar":"--semantic-typography-lineHeight-none","type":"number","description":"Semantic alias for leading-none (1). Display text and badge spans.","alias":"{primitive.typography.lineHeight.none}","resolvedValue":"1"},{"path":"semantic.docs.space.section","cssVar":"--semantic-docs-space-section","type":"dimension","description":"48px between H2 sections — generous section break for doc pages.","alias":"{primitive.space.12}","resolvedValue":"48px"},{"path":"semantic.docs.space.paragraph","cssVar":"--semantic-docs-space-paragraph","type":"dimension","description":"24px between paragraphs — comfortable prose rhythm for long-form doc content.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.docs.space.inline","cssVar":"--semantic-docs-space-inline","type":"dimension","description":"8px inline cluster spacing — gap between metadata badges, inline icons, doc-page chips.","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"semantic.accent.rest","cssVar":"--semantic-accent-rest","type":"color","description":"Default accent fill for interactive elements at rest — warm graphite. Inverts per theme; pair with content.onAccent.","alias":"{primitive.color.graphite.700}","resolvedValue":"#433a3f","dark":{"alias":"{primitive.color.graphite.200}","resolvedValue":"#d4d0d2"}},{"path":"semantic.accent.hover","cssVar":"--semantic-accent-hover","type":"color","description":"Accent fill on pointer hover.","alias":"{primitive.color.graphite.800}","resolvedValue":"#352e32","dark":{"alias":"{primitive.color.graphite.300}","resolvedValue":"#b2abae"}},{"path":"semantic.accent.pressed","cssVar":"--semantic-accent-pressed","type":"color","description":"Accent fill during active press.","alias":"{primitive.color.graphite.900}","resolvedValue":"#2a2428","dark":{"alias":"{primitive.color.graphite.400}","resolvedValue":"#8b8488"}},{"path":"semantic.accent.inactive","cssVar":"--semantic-accent-inactive","type":"color","description":"Accent fill for inactive or unselected accent elements.","alias":"{primitive.color.neutral.400}","resolvedValue":"#a3a3a3","dark":{"alias":"{primitive.color.neutral.600}","resolvedValue":"#525252"}},{"path":"semantic.accent.disabled","cssVar":"--semantic-accent-disabled","type":"color","description":"Accent fill for disabled accent elements.","alias":"{primitive.color.neutral.300}","resolvedValue":"#d4d4d4","dark":{"alias":"{primitive.color.neutral.700}","resolvedValue":"#404040"}},{"path":"semantic.accent.content","cssVar":"--semantic-accent-content","type":"color","description":"Accent-intent text/icon color on neutral surfaces (graphite) — pair with underline/weight for link affordance.","alias":"{primitive.color.graphite.700}","resolvedValue":"#433a3f","dark":{"alias":"{primitive.color.graphite.300}","resolvedValue":"#b2abae"}},{"path":"semantic.accent.contentHover","cssVar":"--semantic-accent-contentHover","type":"color","description":"Accent content color on pointer hover.","alias":"{primitive.color.graphite.800}","resolvedValue":"#352e32","dark":{"alias":"{primitive.color.graphite.200}","resolvedValue":"#d4d0d2"}},{"path":"semantic.accent.subtle","cssVar":"--semantic-accent-subtle","type":"color","description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","alias":"{primitive.color.graphite.50}","resolvedValue":"#f5f4f4","dark":{"alias":"{primitive.color.graphite.800}","resolvedValue":"#352e32"}},{"path":"semantic.radius.action","cssVar":"--semantic-radius-action","type":"dimension","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.radius.control","cssVar":"--semantic-radius-control","type":"dimension","description":"Corner radius for small control glyphs such as the checkbox box: not fully round, and distinct from semantic.radius.action (hds#242).","alias":"{primitive.radius.4}","resolvedValue":"4px"},{"path":"semantic.borderWidth.default","cssVar":"--semantic-borderWidth-default","type":"dimension","description":"Default hairline border weight for surfaces and inputs.","alias":"{primitive.borderWidth.xs}","resolvedValue":"1px"},{"path":"semantic.borderWidth.emphasis","cssVar":"--semantic-borderWidth-emphasis","type":"dimension","description":"Stronger border weight for focus rings and active indicators.","alias":"{primitive.borderWidth.sm}","resolvedValue":"2px"},{"path":"semantic.shadow.subtle","cssVar":"--semantic-shadow-subtle","type":"shadow","description":"Resting elevation shadow for raised surfaces (cards, inline panels).","value":"0 1px 2px hsl(var(--primitive-shadow-color) / 0.04), 0 1px 1px hsl(var(--primitive-shadow-color) / 0.06)"},{"path":"semantic.shadow.floating","cssVar":"--semantic-shadow-floating","type":"shadow","description":"Hover/floating elevation for menus, popovers, and tooltips.","value":"0 4px 6px hsl(var(--primitive-shadow-color) / 0.05), 0 10px 15px hsl(var(--primitive-shadow-color) / 0.08)"},{"path":"semantic.shadow.overlay","cssVar":"--semantic-shadow-overlay","type":"shadow","description":"Modal/dialog elevation for full-screen overlays.","value":"0 10px 15px hsl(var(--primitive-shadow-color) / 0.08), 0 25px 50px hsl(var(--primitive-shadow-color) / 0.12)"},{"path":"semantic.elevation.flat","cssVar":"--semantic-elevation-flat","type":"elevation","description":"Flat surface (no shadow, hairline border) for embedded panels.","composite":{"surface":{"alias":"{semantic.color.surface.page}","resolvedValue":"#ffffff"},"shadow":null,"border":{"alias":"{semantic.color.border.subtle}","resolvedValue":"#f5f5f5"}}},{"path":"semantic.elevation.raised","cssVar":"--semantic-elevation-raised","type":"elevation","description":"Resting card / panel elevation.","composite":{"surface":{"alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},"shadow":{"alias":"{semantic.shadow.subtle}","resolvedValue":"0 1px 2px hsl(var(--primitive-shadow-color) / 0.04), 0 1px 1px hsl(var(--primitive-shadow-color) / 0.06)"},"border":null}},{"path":"semantic.elevation.floating","cssVar":"--semantic-elevation-floating","type":"elevation","description":"Hover, menu, and popover elevation.","composite":{"surface":{"alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},"shadow":{"alias":"{semantic.shadow.floating}","resolvedValue":"0 4px 6px hsl(var(--primitive-shadow-color) / 0.05), 0 10px 15px hsl(var(--primitive-shadow-color) / 0.08)"},"border":null}},{"path":"semantic.elevation.overlay","cssVar":"--semantic-elevation-overlay","type":"elevation","description":"Modal, dialog, and drawer elevation.","composite":{"surface":{"alias":"{semantic.color.surface.overlay}","resolvedValue":"#f5f5f5"},"shadow":{"alias":"{semantic.shadow.overlay}","resolvedValue":"0 10px 15px hsl(var(--primitive-shadow-color) / 0.08), 0 25px 50px hsl(var(--primitive-shadow-color) / 0.12)"},"border":null}},{"path":"semantic.size.control.sm","cssVar":"--semantic-size-control-sm","type":"dimension","description":"Small control element — radio dot, slider fill bar height.","alias":"{primitive.size.8}","resolvedValue":"8px"},{"path":"semantic.size.control.md","cssVar":"--semantic-size-control-md","type":"dimension","description":"Medium control element — checkbox glyph box, slider track wrapper height.","alias":"{primitive.size.20}","resolvedValue":"20px"},{"path":"semantic.size.control.lg","cssVar":"--semantic-size-control-lg","type":"dimension","description":"Large control footprint — code-block inline-wrapper min-height / copy-button-matched pre padding.","alias":"{primitive.size.32}","resolvedValue":"32px"},{"path":"semantic.size.icon.sm","cssVar":"--semantic-size-icon-sm","type":"dimension","description":"Small icon box — matches --hds-icon-small.","alias":"{primitive.size.16}","resolvedValue":"16px"},{"path":"semantic.size.icon.md","cssVar":"--semantic-size-icon-md","type":"dimension","description":"Medium icon box — matches --hds-icon-medium.","alias":"{primitive.size.20}","resolvedValue":"20px"},{"path":"semantic.size.icon.lg","cssVar":"--semantic-size-icon-lg","type":"dimension","description":"Large icon box — matches --hds-icon-large.","alias":"{primitive.size.24}","resolvedValue":"24px"},{"path":"semantic.size.avatar","cssVar":"--semantic-size-avatar","type":"dimension","description":"Avatar size (width and height) for activity feeds and identity glyphs. Same pixels as row.compact today, a separate role (hds#242).","alias":"{primitive.size.40}","resolvedValue":"40px"},{"path":"semantic.size.tile","cssVar":"--semantic-size-tile","type":"dimension","description":"Minimum height of a metric tile, one height for every tile so rows line up (hds#403).","alias":"{primitive.size.120}","resolvedValue":"120px"},{"path":"semantic.size.row.compact","cssVar":"--semantic-size-row-compact","type":"dimension","description":"Compact-density row minimum height.","alias":"{primitive.size.40}","resolvedValue":"40px"},{"path":"semantic.size.row.comfortable","cssVar":"--semantic-size-row-comfortable","type":"dimension","description":"Comfortable-density row minimum height.","alias":"{primitive.size.48}","resolvedValue":"48px"},{"path":"semantic.zIndex.control","cssVar":"--semantic-zIndex-control","type":"number","description":"Raises an interactive control (e.g. a native range input) above its visual decoration for hit-testing.","alias":"{primitive.zIndex.10}","resolvedValue":"10"},{"path":"semantic.zIndex.sticky","cssVar":"--semantic-zIndex-sticky","type":"number","description":"Sticky-positioned elements, such as a table header row.","alias":"{primitive.zIndex.100}","resolvedValue":"100"}],"component":[{"path":"component.nav.bg","cssVar":"--component-nav-bg","type":"color","description":"Nav bar background fill.","alias":"{semantic.color.surface.page}","resolvedValue":"#ffffff"},{"path":"component.nav.bgActive","cssVar":"--component-nav-bgActive","type":"color","description":"Nav item background fill when active or selected.","alias":"{semantic.accent.subtle}","resolvedValue":"#f5f4f4"},{"path":"component.nav.borderActive","cssVar":"--component-nav-borderActive","type":"color","description":"Nav item border color when active or selected.","alias":"{semantic.color.surface.accent}","resolvedValue":"#433a3f"},{"path":"component.nav.text","cssVar":"--component-nav-text","type":"color","description":"Nav item text color at rest.","alias":"{semantic.color.content.secondary}","resolvedValue":"#525252"},{"path":"component.nav.textActive","cssVar":"--component-nav-textActive","type":"color","description":"Nav item text color when active or selected.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"component.nav.height","cssVar":"--component-nav-height","type":"dimension","description":"Nav bar height.","alias":"{primitive.space.16}","resolvedValue":"64px"},{"path":"component.nav.paddingX","cssVar":"--component-nav-paddingX","type":"dimension","description":"Horizontal padding inside nav items.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"component.nav.paddingY","cssVar":"--component-nav-paddingY","type":"dimension","description":"Vertical padding inside nav items.","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.tag.background","cssVar":"--component-tag-background","type":"color","description":"Base tag surface color.","alias":"{semantic.accent.subtle}","resolvedValue":"#f5f4f4"},{"path":"component.tag.text","cssVar":"--component-tag-text","type":"color","description":"Default tag text color.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"component.tag.border","cssVar":"--component-tag-border","type":"color","description":"Default tag border color.","alias":"{semantic.color.border.default}","resolvedValue":"#e5e5e5"},{"path":"component.tag.radius","cssVar":"--component-tag-radius","type":"dimension","description":"Pill radius for the tag surface.","alias":"{primitive.radius.full}","resolvedValue":"9999px"},{"path":"component.tag.fontSize","cssVar":"--component-tag-fontSize","type":"dimension","description":"Tag type size.","alias":"{primitive.typography.size.xs}","resolvedValue":"12px"},{"path":"component.tag.fontWeight","cssVar":"--component-tag-fontWeight","type":"fontWeight","description":"Tag label weight.","alias":"{primitive.typography.weight.medium}","resolvedValue":"500"},{"path":"component.tag.lineHeight","cssVar":"--component-tag-lineHeight","type":"number","description":"Readable label rhythm for tags.","alias":"{primitive.typography.lineHeight.normal}","resolvedValue":"1.5"},{"path":"component.tag.minWidth","cssVar":"--component-tag-minWidth","type":"dimension","description":"Minimum tag width.","alias":"{primitive.size.48}","resolvedValue":"48px"},{"path":"component.tag.minHeight","cssVar":"--component-tag-minHeight","type":"dimension","description":"Minimum tag height.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"component.tag.paddingX","cssVar":"--component-tag-paddingX","type":"dimension","description":"Horizontal padding inside the pill.","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"component.tag.paddingY","cssVar":"--component-tag-paddingY","type":"dimension","description":"Vertical padding inside the pill.","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.tag.activeText","cssVar":"--component-tag-activeText","type":"color","description":"Text color when the tag is active.","alias":"{semantic.color.content.onAccent}","resolvedValue":"#fafafa"},{"path":"component.tag.activeBackground","cssVar":"--component-tag-activeBackground","type":"color","description":"Active tag fill color.","alias":"{semantic.accent.rest}","resolvedValue":"#433a3f"},{"path":"component.tag.activeBorder","cssVar":"--component-tag-activeBorder","type":"color","description":"Active tag border color.","alias":"{semantic.accent.rest}","resolvedValue":"#433a3f"},{"path":"component.tag.activeHover","cssVar":"--component-tag-activeHover","type":"color","description":"Active tag hover fill color.","alias":"{semantic.accent.hover}","resolvedValue":"#352e32"},{"path":"component.badge.fontSize","cssVar":"--component-badge-fontSize","type":"dimension","description":"Badge type size.","alias":"{primitive.typography.size.xs}","resolvedValue":"12px"},{"path":"component.badge.fontWeight","cssVar":"--component-badge-fontWeight","type":"fontWeight","description":"Badge label weight.","alias":"{primitive.typography.weight.medium}","resolvedValue":"500"},{"path":"component.badge.text","cssVar":"--component-badge-text","type":"color","description":"Badge text color.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"component.badge.bg","cssVar":"--component-badge-bg","type":"color","description":"Badge background color.","alias":"{semantic.color.feedback.bg.info}","resolvedValue":"oklch(0.96 0.03 266.54)","dark":{"alias":"{semantic.color.feedback.bg.info}","resolvedValue":"oklch(0.96 0.03 266.54)"}},{"path":"component.badge.radius","cssVar":"--component-badge-radius","type":"dimension","description":"Small rounded radius for badges.","alias":"{primitive.radius.4}","resolvedValue":"4px"},{"path":"component.badge.height","cssVar":"--component-badge-height","type":"dimension","description":"Badge height.","alias":"{primitive.size.20}","resolvedValue":"20px"},{"path":"component.badge.minWidth","cssVar":"--component-badge-minWidth","type":"dimension","description":"Badge minimum width.","alias":"{primitive.size.20}","resolvedValue":"20px"},{"path":"component.badge.paddingY","cssVar":"--component-badge-paddingY","type":"dimension","description":"Vertical padding inside the badge.","alias":"{primitive.space.px2}","resolvedValue":"2px"},{"path":"component.badge.paddingX","cssVar":"--component-badge-paddingX","type":"dimension","description":"Horizontal padding inside the badge.","alias":"{primitive.space.px6}","resolvedValue":"6px"},{"path":"component.button.bg","cssVar":"--component-button-bg","type":"color","description":"Primary button fill.","alias":"{semantic.color.surface.accent}","resolvedValue":"#433a3f"},{"path":"component.button.bgHover","cssVar":"--component-button-bgHover","type":"color","description":"Primary button hover fill.","alias":"{semantic.accent.hover}","resolvedValue":"#352e32"},{"path":"component.button.text","cssVar":"--component-button-text","type":"color","description":"Primary button text color.","alias":"{semantic.color.content.onAccent}","resolvedValue":"#fafafa"},{"path":"component.button.radius","cssVar":"--component-button-radius","type":"dimension","description":"Button corner radius.","alias":"{semantic.radius.action}","resolvedValue":"8px"},{"path":"component.button.paddingX","cssVar":"--component-button-paddingX","type":"dimension","description":"Horizontal button padding.","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"component.button.paddingY","cssVar":"--component-button-paddingY","type":"dimension","description":"Vertical button padding.","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"component.button.size.sm.paddingX","cssVar":"--component-button-size-sm-paddingX","type":"dimension","description":"Small button horizontal padding (8px).","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.button.size.sm.paddingY","cssVar":"--component-button-size-sm-paddingY","type":"dimension","description":"Small button vertical padding (4px).","alias":"{primitive.space.1}","resolvedValue":"4px"},{"path":"component.button.size.sm.fontSize","cssVar":"--component-button-size-sm-fontSize","type":"dimension","description":"Small button label size (12px, hds#283: was 13px).","alias":"{primitive.typography.size.xs}","resolvedValue":"12px"},{"path":"component.button.size.sm.iconSize","cssVar":"--component-button-size-sm-iconSize","type":"dimension","description":"Small button icon slot size (12px).","alias":"{primitive.size.12}","resolvedValue":"12px"},{"path":"component.button.size.sm.height","cssVar":"--component-button-size-sm-height","type":"dimension","description":"Small button height (28px).","alias":"{primitive.space.7}","resolvedValue":"28px"},{"path":"component.button.size.sm.itemSpacing","cssVar":"--component-button-size-sm-itemSpacing","type":"dimension","description":"Small button icon-to-label gap (4px).","alias":"{primitive.space.1}","resolvedValue":"4px"},{"path":"component.button.size.md.paddingX","cssVar":"--component-button-size-md-paddingX","type":"dimension","description":"Medium button horizontal padding (16px).","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"component.button.size.md.paddingY","cssVar":"--component-button-size-md-paddingY","type":"dimension","description":"Medium button vertical padding (12px).","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"component.button.size.md.fontSize","cssVar":"--component-button-size-md-fontSize","type":"dimension","description":"Medium button label size (14px, hds#283: was 15px).","alias":"{primitive.typography.size.sm}","resolvedValue":"14px"},{"path":"component.button.size.md.iconSize","cssVar":"--component-button-size-md-iconSize","type":"dimension","description":"Medium button icon slot size (16px).","alias":"{primitive.size.16}","resolvedValue":"16px"},{"path":"component.button.size.md.height","cssVar":"--component-button-size-md-height","type":"dimension","description":"Medium button height (40px).","alias":"{primitive.size.40}","resolvedValue":"40px"},{"path":"component.button.size.md.itemSpacing","cssVar":"--component-button-size-md-itemSpacing","type":"dimension","description":"Medium button icon-to-label gap (8px).","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.button.size.lg.paddingX","cssVar":"--component-button-size-lg-paddingX","type":"dimension","description":"Large button horizontal padding (24px).","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"component.button.size.lg.paddingY","cssVar":"--component-button-size-lg-paddingY","type":"dimension","description":"Large button vertical padding (16px).","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"component.button.size.lg.fontSize","cssVar":"--component-button-size-lg-fontSize","type":"dimension","description":"Large button label size (16px, hds#283: was 17px).","alias":"{primitive.typography.size.base}","resolvedValue":"16px"},{"path":"component.button.size.lg.iconSize","cssVar":"--component-button-size-lg-iconSize","type":"dimension","description":"Large button icon slot size (20px).","alias":"{primitive.size.20}","resolvedValue":"20px"},{"path":"component.button.size.lg.height","cssVar":"--component-button-size-lg-height","type":"dimension","description":"Large button height (48px).","alias":"{primitive.size.48}","resolvedValue":"48px"},{"path":"component.button.size.lg.itemSpacing","cssVar":"--component-button-size-lg-itemSpacing","type":"dimension","description":"Large button icon-to-label gap (8px).","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.button.primary.textDisabled","cssVar":"--component-button-primary-textDisabled","type":"color","description":"Disabled primary button text color.","alias":"{semantic.color.content.disabled}","resolvedValue":"#d4d4d4"},{"path":"component.button.primary.bgDisabled","cssVar":"--component-button-primary-bgDisabled","type":"color","description":"Disabled primary button fill.","alias":"{semantic.color.surface.muted}","resolvedValue":"#f5f5f5"},{"path":"component.button.secondary.bg.rest","cssVar":"--component-button-secondary-bg-rest","type":"color","description":"Secondary button fill.","alias":"{semantic.color.surface.page}","resolvedValue":"#ffffff"},{"path":"component.button.secondary.bg.hover","cssVar":"--component-button-secondary-bg-hover","type":"color","description":"Secondary button hover fill.","alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},{"path":"component.button.secondary.bg.pressed","cssVar":"--component-button-secondary-bg-pressed","type":"color","description":"Secondary button pressed fill.","alias":"{semantic.color.surface.overlay}","resolvedValue":"#f5f5f5"},{"path":"component.button.secondary.border.rest","cssVar":"--component-button-secondary-border-rest","type":"color","description":"Secondary button border.","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.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.interactive}","resolvedValue":"#737373"},{"path":"component.button.secondary.border.disabled","cssVar":"--component-button-secondary-border-disabled","type":"color","description":"Secondary button disabled border.","alias":"{semantic.color.border.subdued}","resolvedValue":"#e5e5e5"},{"path":"component.button.secondary.text","cssVar":"--component-button-secondary-text","type":"color","description":"Secondary button text color.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"component.input.bg","cssVar":"--component-input-bg","type":"color","alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},{"path":"component.input.text","cssVar":"--component-input-text","type":"color","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"component.input.border","cssVar":"--component-input-border","type":"color","alias":"{semantic.color.border.interactive}","resolvedValue":"#737373"},{"path":"component.input.borderError","cssVar":"--component-input-borderError","type":"color","alias":"{semantic.color.feedback.error}","resolvedValue":"#b91c1c"},{"path":"component.input.radius","cssVar":"--component-input-radius","type":"dimension","alias":"{semantic.radius.action}","resolvedValue":"8px"},{"path":"component.input.paddingX","cssVar":"--component-input-paddingX","type":"dimension","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"component.input.paddingY","cssVar":"--component-input-paddingY","type":"dimension","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"component.card.bg","cssVar":"--component-card-bg","type":"color","alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},{"path":"component.card.border","cssVar":"--component-card-border","type":"color","alias":"{semantic.color.border.default}","resolvedValue":"#e5e5e5"},{"path":"component.card.radius","cssVar":"--component-card-radius","type":"dimension","alias":"{primitive.radius.8}","resolvedValue":"8px"},{"path":"component.card.padding","cssVar":"--component-card-padding","type":"dimension","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"component.card.gap","cssVar":"--component-card-gap","type":"dimension","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.lightbox.backdrop.blur","cssVar":"--component-lightbox-backdrop-blur","type":"dimension","description":"Backdrop blur applied behind fullscreen image lightboxes.","alias":"{primitive.blur.16}","resolvedValue":"16px"}],"role":[{"path":"role.background","cssVar":"--role-background","type":"color","description":"Page background. shadcn role: background.","alias":"{semantic.color.surface.page}","resolvedValue":"#ffffff"},{"path":"role.foreground","cssVar":"--role-foreground","type":"color","description":"Default text on background. shadcn role: foreground.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"role.card","cssVar":"--role-card","type":"color","description":"Card surface. shadcn role: card.","alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},{"path":"role.card-foreground","cssVar":"--role-card-foreground","type":"color","description":"Text on card. shadcn role: card-foreground.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"role.popover","cssVar":"--role-popover","type":"color","description":"Popover/menu surface. shadcn role: popover.","alias":"{semantic.color.surface.overlay}","resolvedValue":"#f5f5f5"},{"path":"role.scrim","cssVar":"--role-scrim","type":"color","description":"Modal backdrop colour role. Apply alpha in the class, e.g. bg-scrim/60.","alias":"{semantic.color.surface.scrim}","resolvedValue":"#111111"},{"path":"role.pressed-overlay","cssVar":"--role-pressed-overlay","type":"color","description":"Pressed-state overlay colour role. Apply alpha in the class, e.g. inset-shadow-pressed-overlay/5.","alias":"{semantic.color.state.pressed.overlay}","resolvedValue":"#000000"},{"path":"role.popover-foreground","cssVar":"--role-popover-foreground","type":"color","description":"Text on popover. shadcn role: popover-foreground.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"role.primary","cssVar":"--role-primary","type":"color","description":"Primary action surface. shadcn role: primary.","alias":"{semantic.color.surface.accent}","resolvedValue":"#433a3f"},{"path":"role.primary-foreground","cssVar":"--role-primary-foreground","type":"color","description":"Text/icons on primary surface. shadcn role: primary-foreground.","alias":"{semantic.color.content.onAccent}","resolvedValue":"#fafafa"},{"path":"role.secondary","cssVar":"--role-secondary","type":"color","description":"Secondary action surface. shadcn role: secondary.","alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},{"path":"role.secondary-foreground","cssVar":"--role-secondary-foreground","type":"color","description":"Text on secondary surface. shadcn role: secondary-foreground.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"role.muted","cssVar":"--role-muted","type":"color","description":"Muted/quiet bg (skeletons, disabled inputs). shadcn role: muted.","alias":"{semantic.color.surface.overlay}","resolvedValue":"#f5f5f5"},{"path":"role.muted-foreground","cssVar":"--role-muted-foreground","type":"color","description":"Muted text. shadcn role: muted-foreground.","alias":"{semantic.color.content.secondary}","resolvedValue":"#525252"},{"path":"role.accent","cssVar":"--role-accent","type":"color","description":"Hover/active tinted bg. shadcn role: accent.","alias":"{semantic.color.surface.accentSubtle}","resolvedValue":"#f5f4f4"},{"path":"role.accent-foreground","cssVar":"--role-accent-foreground","type":"color","description":"Text on accent surface. shadcn role: accent-foreground.","alias":"{semantic.color.content.accent}","resolvedValue":"#433a3f"},{"path":"role.destructive","cssVar":"--role-destructive","type":"color","description":"Destructive action surface. shadcn role: destructive.","alias":"{semantic.color.feedback.error}","resolvedValue":"#b91c1c"},{"path":"role.destructive-foreground","cssVar":"--role-destructive-foreground","type":"color","description":"Text on destructive surface. shadcn role: destructive-foreground.","alias":"{semantic.color.content.inverse}","resolvedValue":"#f5f5f5"},{"path":"role.border","cssVar":"--role-border","type":"color","description":"Default border. shadcn role: border.","alias":"{semantic.color.border.default}","resolvedValue":"#e5e5e5"},{"path":"role.input","cssVar":"--role-input","type":"color","description":"Input field border. shadcn role: input.","alias":"{semantic.color.border.interactive}","resolvedValue":"#737373"},{"path":"role.ring","cssVar":"--role-ring","type":"color","description":"Focus ring color. shadcn role: ring.","alias":"{semantic.color.border.accent}","resolvedValue":"#433a3f"},{"path":"role.radius","cssVar":"--role-radius","type":"dimension","description":"Default border radius. shadcn role: radius.","alias":"{semantic.radius.action}","resolvedValue":"8px"}]}`), w = ["hds-alert", "hds-alert--danger", "hds-alert--info", "hds-alert--success", "hds-alert--warning", "hds-alert--with-title", "hds-alert__body", "hds-alert__icon", "hds-alert__title", "hds-badge", "hds-badge--danger", "hds-badge--in-progress", "hds-badge--info", "hds-badge--neutral", "hds-badge--success", "hds-badge--warning", "hds-card", "hds-card--accent", "hds-card--bordered", "hds-card--danger", "hds-card--info", "hds-card--no-padding", "hds-card--success", "hds-card--warning", "hds-divider", "hds-divider--horizontal", "hds-divider--strong", "hds-divider--vertical", "hds-focus", "hds-tag", "hds-tag--active", "hds-tag__pill"], k = {
2
+ const o = "2026-10-12T02:29:50.977Z", a = "hirobius.tokens.json", i = "W3C DTCG 2025.10", r = "https://hirobius-hds-components.vercel.app/", s = "https://hirobius-hds-components.vercel.app/llms.txt", n = { engine: "React + TypeScript", icons: "Lucide React", tokens: "W3C DTCG", styling: "CSS Variables" }, p = { tiers: ["primitive", "semantic", "component", "role"], aliasRule: "Semantic, component, and role tokens must alias an upstream token, except computed oklch() color values for derived tints.", darkMode: '[data-theme="dark"] on <html>. Semantic tokens auto-switch via CSS var chain — no JS re-renders.', cssVarFormat: "--{tier}-{...path-segments}", consumeInCSS: "var(--semantic-color-surface-page)", consumeInJS: "hds.space.px16 | ct(isDark).content.primary from theme.ts", consumeTypography: "hds.typeStyles.h1 (inline style object) — never Tailwind font classes" }, l = { primaryColor: "#433a3f", primaryColorToken: "semantic.accent.rest", font: "Plus Jakarta Sans variable 100–900, self-hosted", spacingBase: "4px", buttonBorderRadius: "0px", cardBorderRadius: "8px", neutralScale: "true monochromatic (equal RGB channels)", accentCount: 1 }, c = ["Alert", "AlertDialog", "AssetImg", "Avatar", "AvatarGroup", "Badge", "Blockquote", "Box", "Breadcrumb", "Button", "Callout", "Card", "CardBody", "CardDescription", "CardFooter", "CardHeader", "CardMetric", "CardProgress", "CardTitle", "Checkbox", "CodeBlock", "Combobox", "Container", "DataTableSection", "DestructiveSection", "Dialog", "DialogClose", "DialogContent", "DialogDescription", "DialogFooter", "DialogHeader", "DialogOverlay", "DialogPortal", "DialogTitle", "DialogTrigger", "Disclosure", "Divider", "EmptyState", "Field", "Form", "FormActions", "FormField", "FormFieldShell", "Grid", "HdsRouterProvider", "HdsThemeProvider", "Icon", "InlineCode", "InlineLink", "Input", "Kbd", "Menu", "MetadataList", "MetricTile", "MetricTiles", "Page", "PageHeader", "Pagination", "Pin", "Popover", "Progress", "Radio", "Reveal", "SegmentedControl", "Select", "Sidebar", "Skeleton", "Slider", "Spinner", "Stack", "Stat", "StatusListItem", "StatusTile", "Surface", "Switcher", "Table", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "Tag", "Text", "Textarea", "Timestamp", "ToastProvider", "Toggle", "Tooltip", "VisuallyHidden"], d = { status: "active", styleCount: 6, source: "hirobius.tokens.json semantic.typography", tokens: [{ name: "display", size: "48px", lineHeight: "1.05", weight: 700, role: "One per page, hero only" }, { name: "title", size: "24px", lineHeight: "1.25", weight: 700, role: "Section and card headings" }, { name: "body", size: "16px", lineHeight: "1.6", weight: 400, role: "Prose" }, { name: "ui", size: "14px", lineHeight: "1.5", weight: 500, role: "Controls, nav, table text, values" }, { name: "caption", size: "12px", lineHeight: "1.5", weight: 500, role: "Metadata, help text and labels, in sentence case" }, { name: "mono", size: "13px", lineHeight: "1.5", weight: 400, role: "Code and ids" }], deprecated: ["heading1", "heading2", "heading3", "h1", "h2", "h3", "technical", "badge", "eyebrow", "small", "displayXl", "display1", "display2", "headingHero", "headingSection", "body2", "bodyLarge", "bodySmall", "label", "labelDescriptive", "labelTechnical", "micro", "monoXs", "monoSm"], aliasOf: { heading1: "title", heading2: "title", heading3: "title", h1: "title", h2: "title", h3: "title", technical: "mono", badge: "caption", eyebrow: "caption", small: "ui" } }, m = ["DataTableSection", "DestructiveSection", "FormActions", "MetricTiles", "PageHeader"], u = { subpath: "@hirobius/design-system/icons", names: ["Archive", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp", "Bell", "Bookmark", "Calendar", "Check", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "CircleAlert", "CircleCheck", "CircleHelp", "Clock", "Copy", "Download", "Ellipsis", "EllipsisVertical", "ExternalLink", "Eye", "EyeOff", "FileText", "Funnel", "Heart", "House", "Image", "Info", "Link", "Lock", "LogIn", "LogOut", "Mail", "Menu", "Minus", "Pencil", "Plus", "RefreshCw", "Save", "Search", "Settings", "Share", "Star", "Trash2", "TriangleAlert", "Upload", "User", "X"] }, g = [{ id: "foundation", label: "Foundations", description: "Token architecture, CSS pipeline, accessibility, and primitive scales.", criteria: [{ label: "W3C DTCG three-tier token architecture", done: !0 }, { label: "CSS variable pipeline + token verify", done: !0 }, { label: "Primitive scales complete (color, type, space)", done: !1, partial: !0 }, { label: "Token audit clean", done: !1 }] }, { id: "components", label: "Components", description: "Accessible React UI built from foundations and mapped toward Figma parity.", criteria: [{ label: "Component inventory with typed props", done: !0 }, { label: "Action system architecture (buttons, links, groups)", done: !0 }, { label: "Prop tables and API doc coverage", done: !0 }, { label: "Figma parity mapping", done: !1 }] }, { id: "infrastructure-operations", label: "Architecture", description: "System delivery, Figma sync, automation, quality gates, and operational hygiene.", criteria: [{ label: "System manifest + llms.txt AI context", done: !0 }, { label: "Release gate + full audit gate", done: !0 }, { label: "Documentation automation (AST pipeline, LLMS sync)", done: !0 }, { label: "Payload sweep + orphan cleanup", done: !1, partial: !0 }, { label: "Motion system foundations", done: !1, partial: !0 }, { label: "Figma library generated from tokens", done: !1 }, { label: "Code Connect CI + reverse sync", done: !1 }, { label: "AST gatekeeper + token schema validation", done: !1, partial: !0 }, { label: "A11y CI + visual regression pipeline", done: !1, partial: !0 }, { label: "Operational feedback loop + AI retrospective", done: !1, partial: !0 }] }], h = { uncategorized: [], namespaceViolations: [] }, y = "llms.txt", f = "Version increments on any prop rename, token path rename, or removed component. Additions are non-breaking.", v = /* @__PURE__ */ JSON.parse('{"Alert":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/alert.tsx","description":"Alert - compact feedback surface with contextual severity.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=33-34","figmaId":null,"preview":{"exportName":"Alert","sizing":"panel"},"consumers":["src/app/components/badge.tsx","src/app/components/callout.tsx","src/app/components/dialog.tsx","src/app/components/empty-state.tsx","src/app/components/toast.tsx"],"tokenMapping":{"Success accent":"semantic.color.feedback.success","Error accent":"semantic.color.feedback.error","Warning accent":"semantic.color.feedback.warning","Info accent":"semantic.color.feedback.info","Success surface fill":"semantic.color.feedback.bg.success","Error surface fill":"semantic.color.feedback.bg.error","Warning surface fill":"semantic.color.feedback.bg.warning","Info surface fill":"semantic.color.feedback.bg.info","Corner radius":"primitive.radius.4"},"allowedChildren":["*"],"requiredProps":["children"],"a11yRules":[{"rule":"role=alert is set by the component — do not override","required":false}],"variantAxes":["tone"],"componentProperties":[{"name":"Title","type":"TEXT","defaultValue":"Alert title","sourceProp":"title","boundTo":"characters","targetSelector":"Title"},{"name":"Body","type":"TEXT","defaultValue":"Alert message","sourceProp":"children","boundTo":"characters","targetSelector":"Body"}],"states":["default"],"slots":[{"name":"background","figmaSlotName":"Background","tokenBinding":{"fill":"semantic.color.surface.raised"}},{"name":"title","figmaSlotName":"Title","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"body","figmaSlotName":"Body","tokenBinding":{"fill":"semantic.color.content.secondary"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Alert.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/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"]}},"docsPage":"/docs/components/alert","usage":{"when":"Show a persistent inline message with a severity, next to the content it concerns.","whenNot":"A brief confirmation that should disappear on its own, or a status label.","useInstead":[{"component":"ToastProvider","reason":"a brief confirmation that fades away"},{"component":"Badge","reason":"a short status label"}]},"core":true},"CodeBlock":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/code-block.tsx","description":"CodeBlock - code display with copy button and optional collapsible toggle.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-154","figmaId":null,"preview":{"exportName":"CodeBlock","sizing":"panel"},"consumers":[],"tokenMapping":{"Surface fill":"semantic.color.surface.raised","Border stroke":"semantic.color.border.default","Primary text":"semantic.color.content.primary","Secondary text":"semantic.color.content.secondary","Corner radius":"primitive.radius.8","Inner padding":"primitive.space.px20"},"props":{"className":{"type":"string","optional":true},"code":{"type":"string"},"collapsible":{"type":"boolean","default":false},"defaultExpanded":{"type":"boolean","default":false},"filename":{"type":"string","optional":true},"language":{"type":"string","optional":true},"truncateFromStart":{"type":"boolean","default":false},"variant":{"type":"enum","values":["inline","block"],"default":"block"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/CodeBlock.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-154","docsPage":"/docs/patterns/code-block","usage":{"when":"Show a code sample with a copy button, optionally collapsed."}},"Container":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/container.tsx","description":"Container — semantic width-constrained layout. Centers content horizontally and applies semantic max-width constraints. - maxWidth options: \'content\' (760px prose) | \'max\' (1200px full layout) - No arbitrary pixel values allowed Usage: <Container maxWidth=\\"max\\"> <div>...</div> </Container>","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Container","sizing":"panel"},"consumers":["src/app/components/box.tsx","src/app/components/page.tsx","src/app/components/switcher.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/index.ts"],"tokenMapping":{},"props":{"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"maxWidth":{"type":"enum","values":["content","max"],"default":"max"},"padding":{"type":"string","default":"var(--semantic-space-surface-padding)"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Container.tsx","figmaLink":null,"docsPage":"/docs/components/utilities","usage":{"when":"Constrain a page region to the content or maximum width and centre it.","whenNot":"Spacing between siblings, columns, or a surface with padding.","useInstead":[{"component":"Stack","reason":"spacing between siblings"},{"component":"Grid","reason":"columns"},{"component":"Box","reason":"one-off layout that no named primitive covers"}]},"aiRules":"Reach for this named layout intent before Box/sx. maxWidth MUST use the semantic width scale (\'content\' | \'max\'), never a raw px value. Do NOT use the deprecated `padding` prop — it is a no-op; apply padding via Surface or a Stack instead. Do NOT import Container directly inside a page under src/app/pages — use Page, which wraps Container and owns vertical rhythm. For a horizontal gutter, which Container does not support, put a Box with `style={{ paddingInline }}` inside it.","core":true},"Disclosure":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/disclosure.tsx","description":"Disclosure - compact disclosure surface for optional explanatory content.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-453","figmaId":null,"preview":{"exportName":"Disclosure","sizing":"panel"},"consumers":["src/app/components/tabs.tsx"],"tokenMapping":{"Surface fill":"semantic.color.surface.raised","Open surface fill":"semantic.color.surface.accentSubtle","Border stroke":"semantic.color.border.default","Open border stroke":"semantic.color.border.accent","Label typography":"semantic.typography.sidebar.groupLabel","Icon color":"semantic.color.content.secondary","Horizontal padding":"semantic.space.sidebar.sectionGap","Vertical padding":"semantic.space.sidebar.sectionGap"},"props":{"accent":{"type":"boolean","default":false},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"contentStyle":{"type":"CSSProperties","optional":true},"defaultOpen":{"type":"boolean","default":false},"label":{"type":"ReactNode"},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true},"triggerStyle":{"type":"CSSProperties","optional":true},"variant":{"type":"enum","values":["panel","nav","card"],"default":"panel"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"fill":"semantic.color.surface.canvas"}},{"name":"trigger","figmaSlotName":"Trigger","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"icon-end","figmaSlotName":"IconRight","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"content","figmaSlotName":"Content","tokenBinding":{}}],"sourcePath":"src/app/components/Disclosure.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-453","docsPage":"/docs/components/disclosure","usage":{"when":"Hide optional explanatory content behind a heading that people can expand.","whenNot":"Content people must see, or switching between panels.","useInstead":[{"component":"Tabs","reason":"switching between panels of content"}]},"core":true},"Divider":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/divider.tsx","description":"Divider — semantic separator between content regions.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-26","figmaId":null,"preview":{"exportName":"Divider","sizing":"panel"},"consumers":["src/app/components/metadata-list.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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-26","props":{"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal"},"spacing":{"type":"string | number","optional":true},"strong":{"type":"boolean","optional":true},"variant":{"type":"enum","values":["strong","default"],"optional":true}},"propConstraints":{"orientation":{"type":"enum","values":["horizontal","vertical"]},"strong":{"type":"boolean"},"variant":{"type":"enum","values":["strong","default"]}},"docsPage":"/docs/components/divider","usage":{"when":"Separate two blocks of content with a thin line.","whenNot":"Spacing alone would do, or the separation needs a container.","useInstead":[{"component":"Stack","reason":"gap-based spacing between siblings"},{"component":"Surface","reason":"a bounded region with its own background"}]},"core":true},"ErrorPattern":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/error-pattern.tsx","description":"ErrorPattern - governed recovery surface for routed application errors.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-839","figmaId":null,"preview":{"exportName":"ErrorPattern","sizing":"panel"},"consumers":["src/index.ts"],"tokenMapping":{"Headline typography":"semantic.typography.display","Message typography":"semantic.typography.h2","Message text color":"semantic.color.content.secondary","Layout gap":"semantic.space.layout.gap"},"props":{"displayText":{"type":"string","default":"Oops"},"message":{"type":"string","default":"Something went wrong"}},"allowedChildren":["*"],"propConstraints":{"displayText":{"type":"string"},"message":{"type":"string"}},"requiredProps":[],"a11yRules":[{"rule":"Headline renders as <h1> via Text variant=display — only one ErrorPattern per page","required":true}],"variantAxes":[],"componentProperties":[],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.layout.gap"}},{"name":"headline","figmaSlotName":"Headline","tokenBinding":{"typography":"semantic.typography.display","color":"semantic.color.content.primary"}},{"name":"message","figmaSlotName":"Message","tokenBinding":{"typography":"semantic.typography.h2","color":"semantic.color.content.secondary"}},{"name":"action","figmaSlotName":"Action"}],"tier":"template","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-839","docsPage":"/docs/patterns/error-pattern","usage":{"when":"Show an error with a short message and a Back button, in place or as a full page."}},"Grid":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/grid.tsx","description":"Grid — responsive grid composition primitive. Enforces semantic gap and column values. No arbitrary CSS grid. - layout=\'fixed\': responsive base (collapses via CSS at tablet/mobile). `columns` sets desktop count (default 12). Tablet/mobile clamp to min(8, cols) and min(4, cols) respectively. - layout=\'auto-fit\': responsive card wrapping via auto-fit. - layout=\'auto-fill\': tile wrapping at `minItemWidth` (TileGrid\'s recipe; 0.20.0 removed TileGrid). - subgrid=true: sets gridTemplateColumns:\'subgrid\' for nested alignment. Usage (default responsive 12-col): <Grid> <Grid.Item colSpan={6}>…</Grid.Item> <Grid.Item colSpan={6}>…</Grid.Item> </Grid> Usage (responsive auto-fit): <Grid layout=\\"auto-fit\\"> <Card /> <Card /> </Grid>","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Grid","sizing":"panel"},"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/box.tsx","src/app/components/container.tsx","src/app/components/grid.test.tsx","src/app/components/metric-tiles.test.tsx","src/app/components/metric-tiles.tsx","src/app/components/segmented-control.test.tsx","src/app/components/sidebar.tsx","src/app/components/stack.tsx","src/app/components/table.tsx","src/app/components/tooltip.tsx","src/index.ts"],"tokenMapping":{},"props":{"align":{"type":"enum","values":["center","end","start","stretch"],"default":"start"},"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"columns":{"type":"number","default":12},"gap":{"type":"enum","values":["medium","tight","normal","inset","spacious"],"default":"inset"},"layout":{"type":"enum","values":["fixed","auto-fit","auto-fill"],"default":"fixed"},"minItemWidth":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true},"subgrid":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{"align":{"type":"enum","values":["center","end","start","stretch"]},"className":{"type":"string"},"gap":{"type":"enum","values":["medium","tight","normal","inset","spacious"]},"layout":{"type":"enum","values":["fixed","auto-fit","auto-fill"]},"minItemWidth":{"type":"string"},"subgrid":{"type":"boolean"}},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"states":["default"],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.component.gap"}},{"name":"cell","figmaSlotName":"Cell","tokenBinding":{"fill":"semantic.color.surface.raised"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Grid.tsx","figmaLink":null,"docsPage":"/docs/components/grid","usage":{"when":"Lay out content in columns that adapt to the screen width, or line up nested content with subgrid.","whenNot":"A single row or column, or styling a surface.","useInstead":[{"component":"Stack","reason":"a single row or column"},{"component":"Box","reason":"one-off layout that no named primitive covers"}]},"aiRules":"Use Grid for spatial layout, not for surface styling or content padding. Do NOT apply background, border, or internal padding directly to Grid to mimic a card. Do NOT use arbitrary CSS grid templates when fixed, auto-fit, auto-fill, or subgrid modes already express the layout. Do NOT use Grid for simple one-dimensional stacks where Stack is sufficient.","core":true},"Icon":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/icon.tsx","description":"Icon — semantic icon wrapper for Lucide icons.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=27-2","figmaId":null,"preview":{"exportName":"Icon","sizing":"panel"},"consumers":["src/app/components/alert.tsx","src/app/components/avatar.tsx","src/app/components/breadcrumb.tsx","src/app/components/button.test.tsx","src/app/components/button.tsx","src/app/components/checkbox.tsx","src/app/components/code-block.tsx","src/app/components/combobox.tsx","src/app/components/disclosure.tsx","src/app/components/hds-tooltip.tsx","src/app/components/inline-code.test.tsx","src/app/components/inline-code.tsx","src/app/components/inline-link.tsx","src/app/components/menu.tsx","src/app/components/pagination.markup.test.tsx","src/app/components/pagination.tsx","src/app/components/select.tsx","src/app/components/table.tsx","src/app/components/toast.tsx"],"tokenMapping":{"Small icon size":"primitive.typography.size.base","Medium icon size":"primitive.typography.size.lg","Large icon size":"primitive.typography.size.xl","Primary color":"semantic.color.content.primary","Secondary color":"semantic.color.content.secondary","Accent color":"semantic.color.content.accent","Disabled color":"semantic.color.content.disabled"},"props":{"aria-hidden":{"type":"boolean","default":true},"className":{"type":"string","optional":true},"color":{"type":"string","default":"currentColor"},"icon":{"type":"LucideIcon"},"size":{"type":"IconSize","default":"small"},"style":{"type":"CSSProperties","optional":true},"weight":{"type":"enum","values":["fill","bold","light","thin","regular","duotone"],"optional":true}},"allowedChildren":[],"propConstraints":{"aria-hidden":{"type":"boolean"},"className":{"type":"string"},"color":{"type":"string"},"weight":{"type":"enum","values":["fill","bold","light","thin","regular","duotone"]}},"requiredProps":["icon"],"a11yRules":[{"rule":"Must have aria-label when used without adjacent text","required":true}],"variantAxes":["size"],"componentProperties":[],"states":["default"],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"paddingLeft":"semantic.space.subgrid.xs","paddingRight":"semantic.space.subgrid.xs","paddingTop":"semantic.space.subgrid.xs","paddingBottom":"semantic.space.subgrid.xs"}},{"name":"glyph","figmaSlotName":"Glyph","tokenBinding":{"fill":"semantic.color.content.primary"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Icon.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=27-2","docsPage":"/docs/components/icon","usage":{"when":"Show a Lucide icon at a set size and color.","whenNot":"A control someone can activate, or a picture that carries content.","useInstead":[{"component":"Button","reason":"a clickable control, with iconOnly for an icon-only one"},{"component":"Avatar","reason":"a picture of a person or entity"}]},"core":true},"InlineCode":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/inline-code.tsx","description":"InlineCode — inline code chip for token paths, file paths, and code-adjacent prose.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-155","figmaId":null,"preview":{"exportName":"InlineCode","sizing":"panel"},"consumers":["src/app/components/inline-code.test.tsx","src/app/components/metadata-list.tsx"],"tokenMapping":{"Font family":"primitive.typography.family.mono","Label text":"semantic.color.content.primary","Border stroke":"semantic.color.border.default","Corner radius":"primitive.radius.2","Horizontal padding":"primitive.space.px4","Vertical padding":"primitive.space.px2"},"props":{"children":{"type":"ReactNode"},"compact":{"type":"boolean","optional":true},"copyable":{"type":"boolean","default":false},"density":{"type":"enum","values":["comfortable","compact"],"optional":true},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/InlineCode.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-155","docsPage":null},"InlineLink":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/inline-link.tsx","description":"InlineLink ” inline navigation and external-link primitive for body copy.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-161","figmaId":null,"preview":{"exportName":"InlineLink","sizing":"panel"},"consumers":["src/app/components/button.tsx","src/app/components/inline-link.test.tsx","src/app/components/text.tsx"],"tokenMapping":{"Link text":"semantic.color.content.accent","Hover text":"semantic.color.content.primary","Transition motion":"semantic.motion.productive"},"props":{"children":{"type":"ReactNode"},"externalIcon":{"type":"boolean","default":true},"href":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{"externalIcon":{"type":"boolean"},"href":{"type":"string"}},"requiredProps":[],"a11yRules":[{"rule":"Link text must be descriptive — avoid \\"click here\\" or \\"read more\\"","required":true},{"rule":"External links must signal new-tab behavior via aria-label or visually hidden text","required":false}],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/InlineLink.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-161","docsPage":"/docs/components/inline-link","usage":{"when":"Link to a route or external URL from inside body copy.","whenNot":"An action that changes something, or a control that needs button styling.","useInstead":[{"component":"Button","reason":"an action or a link that needs button styling"},{"component":"Text","reason":"unlinked body copy"}]},"core":true},"Input":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/input.tsx","description":"Input — text field primitive with label, helper, and error slots.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=38-20","figmaId":null,"preview":{"exportName":"Input","sizing":"panel"},"consumers":["src/app/components/field.tsx","src/app/components/form-control.ts","src/app/components/form.tsx","src/app/components/input.test.tsx","src/app/components/segmented-control.tsx","src/app/components/select.tsx","src/app/components/slider.tsx","src/app/components/textarea.tsx","src/app/design-system/generated-token-descriptions.ts","src/index.ts"],"tokenMapping":{"Surface fill":"role.background","Label text":"role.foreground","Border stroke":"role.input","Error border":"role.destructive","Corner radius":"role.radius"},"sourcePath":"src/app/components/Input.tsx","sourceExport":"Input","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},"inputClassName":{"type":"string","optional":true},"label":{"type":"string","optional":true},"leadingVisual":{"type":"ReactNode","optional":true},"loading":{"type":"boolean","default":false},"prefix":{"type":"ReactNode","optional":true},"size":{"type":"InputSize","default":"md"},"suffix":{"type":"ReactNode","optional":true},"textStyle":{"type":"enum","values":["body","mono"],"default":"body"},"trailingVisual":{"type":"ReactNode","optional":true},"type":{"type":"enum","values":["text","email","password","search","tel","url","number","date","time","datetime-local"],"default":"text"}},"tokens":{"background":"role.background","text":"role.foreground","border":"role.input","borderError":"role.destructive","radius":"role.radius","focusRing":"role.ring","placeholder":"role.muted-foreground","helperText":"role.muted-foreground","errorText":"role.destructive","disabledBg":"role.muted","disabledText":"role.muted-foreground"},"figmaPropertyMapping":{"size":"Size","label":"Label"},"states":["default","focus","filled","error","disabled","loading"],"allowedChildren":[],"propConstraints":{"className":{"type":"string"},"disabled":{"type":"boolean"},"error":{"type":"boolean"},"errorMessage":{"type":"string"},"helperText":{"type":"string"},"inputClassName":{"type":"string"},"label":{"type":"string"},"loading":{"type":"boolean"},"textStyle":{"type":"enum","values":["body","mono"]},"type":{"type":"enum","values":["text","email","password","search","tel","url","number","date","time","datetime-local"]}},"requiredProps":[],"a11yRules":[{"rule":"Must have associated label via label prop or aria-labelledby","required":true}],"variantAxes":["size","state"],"componentProperties":[{"name":"Label","type":"TEXT","defaultValue":"Label","sourceProp":"label","boundTo":"characters","targetSelector":"Label"}],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.subgrid.xs"}},{"name":"label","figmaSlotName":"Label","tokenBinding":{"fill":"role.muted-foreground"}},{"name":"background","figmaSlotName":"InputShell","tokenBinding":{"fill":"role.background","stroke":"role.input","cornerRadius":"role.radius"}},{"name":"placeholder","figmaSlotName":"Placeholder","tokenBinding":{"fill":"role.muted-foreground"}},{"name":"helper-text","figmaSlotName":"Helper","tokenBinding":{"fill":"role.muted-foreground"}},{"name":"error-text","figmaSlotName":"Error","tokenBinding":{"fill":"role.destructive"}}],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=38-20","docsPage":"/docs/components/input","usage":{"when":"Collect a single line of text, a number, an email, a password, a date or a time, with label, helper and error slots.","whenNot":"Multi-line text, or choosing from a fixed list of options.","useInstead":[{"component":"Textarea","reason":"multi-line text"},{"component":"Select","reason":"a short fixed list"},{"component":"Combobox","reason":"a long fixed list that needs search"}]},"core":true},"SegmentedControl":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-334","figmaId":null,"preview":{"exportName":"SegmentedControl","sizing":"panel"},"consumers":["src/app/components/radio.tsx","src/app/components/segmented-control.test.tsx","src/app/components/tabs.tsx","src/app/hooks/useInteractionState.ts"],"tokenMapping":{"Frame surface fill":"semantic.color.surface.page","Frame border stroke":"semantic.color.border.default","Active segment fill":"semantic.color.surface.accent","Active segment text":"semantic.color.content.onAccent","Inactive segment text":"semantic.color.content.secondary","Corner radius":"semantic.radius.action","Rail inner padding":"primitive.space.2"},"props":{"aria-label":{"type":"string","optional":true},"fullWidth":{"type":"boolean","default":false},"label":{"type":"string","optional":true},"onChange":{"type":"(value: string) => void"},"options":{"type":"HdsSegmentedOption[]"},"railPadding":{"type":"Padding<string | number>","optional":true},"segmentPaddingX":{"type":"PaddingLeft<string | number>","optional":true},"size":{"type":"enum","values":["sm","md"],"default":"md"},"value":{"type":"string"},"variant":{"type":"enum","values":["primary","secondary"],"default":"primary"}},"allowedChildren":["*"],"propConstraints":{"aria-label":{"type":"string"},"fullWidth":{"type":"boolean"},"label":{"type":"string"},"size":{"type":"enum","values":["sm","md"]},"value":{"type":"string"},"variant":{"type":"enum","values":["primary","secondary"]}},"requiredProps":[],"a11yRules":[{"rule":"Must have accessible group label (aria-label or aria-labelledby on the container)","required":true},{"rule":"Selected option must be communicated via aria-pressed or aria-selected","required":true}],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/SegmentedControl.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-334","docsPage":"/docs/components/segmented-control","usage":{"when":"Switch between two to five mutually exclusive views or modes in a compact row.","whenNot":"A form choice that submits with the form, or more than five options.","useInstead":[{"component":"Radio","reason":"a form choice that submits with the form"},{"component":"Tabs","reason":"switching between panels of content"},{"component":"Select","reason":"more than five options"}]},"core":true},"Stack":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/stack.tsx","description":"Stack — one-dimensional layout primitive.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Stack","sizing":"panel"},"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/box.tsx","src/app/components/container.tsx","src/app/components/data-table-section.tsx","src/app/components/destructive-section.tsx","src/app/components/disclosure.tsx","src/app/components/divider.tsx","src/app/components/error-pattern.tsx","src/app/components/form-actions.test.tsx","src/app/components/form-actions.tsx","src/app/components/grid.tsx","src/app/components/page-header.tsx","src/app/components/page.tsx","src/app/components/stack.test.tsx","src/app/components/surface.tsx","src/app/components/switcher.tsx","src/app/components/table.tsx","src/app/components/tooltip.tsx","src/index.ts"],"tokenMapping":{"Default gap":"primitive.space.3","Compact gap":"primitive.space.2","Wide gap":"primitive.space.6"},"props":{"align":{"type":"enum","values":["start","center","end","stretch"],"optional":true},"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"direction":{"type":"enum","values":["row","column"],"default":"column"},"gap":{"type":"GapOption","default":"tight"},"justify":{"type":"enum","values":["start","center","end","space-between"],"optional":true},"style":{"type":"CSSProperties","optional":true},"wrap":{"type":"FlexWrap","optional":true}},"allowedChildren":["*"],"propConstraints":{"align":{"type":"enum","values":["start","center","end","stretch"]},"className":{"type":"string"},"direction":{"type":"enum","values":["row","column"]},"justify":{"type":"enum","values":["start","center","end","space-between"]}},"requiredProps":[],"a11yRules":[],"variantAxes":["direction"],"componentProperties":[],"states":["default"],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.component.gap"}},{"name":"item","figmaSlotName":"Item","tokenBinding":{"fill":"semantic.color.surface.raised","stroke":"semantic.color.border.default"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Stack.tsx","figmaLink":null,"docsPage":"/docs/components/stack","usage":{"when":"Space items in a row or column with even gaps.","whenNot":"Multi-column layout, or giving content a background or padding.","useInstead":[{"component":"Grid","reason":"multi-column layout"},{"component":"Surface","reason":"content that needs a background or padding"}]},"aiRules":"Use Stack for flow spacing and simple flex alignment only. Do NOT use Stack to create card chrome, internal surface padding, or page-width constraints. Do NOT apply arbitrary margins to Stack to fake spacing between children when the gap prop should own that rhythm. Do NOT use Stack for true two-dimensional layouts that require Grid.","core":true},"Table":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/table.tsx","description":"Table - structured data table primitive for documentation and compact UI matrices.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-300","figmaId":null,"preview":{"exportName":"Table","sizing":"full"},"consumers":["src/app/components/data-table-section.tsx","src/app/components/table.test.tsx","src/app/data/manifest-types.ts"],"tokenMapping":{},"props":{"caption":{"type":"ReactNode","optional":true},"captionAction":{"type":"ReactNode","optional":true},"columns":{"type":"TableColumn[]"},"density":{"type":"enum","values":["compact","comfortable"],"optional":true},"description":{"type":"ReactNode","optional":true},"flush":{"type":"boolean","default":true},"labelledBy":{"type":"string","optional":true},"minWidth":{"type":"string | number","optional":true},"rows":{"type":"TableRow[]"},"stickyHeader":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{"density":{"type":"enum","values":["compact","comfortable"]},"flush":{"type":"boolean"},"labelledBy":{"type":"string"},"stickyHeader":{"type":"boolean"}},"requiredProps":[],"a11yRules":[{"rule":"Column headers must use <th> with scope=\\"col\\", row headers with scope=\\"row\\"","required":true},{"rule":"Table must have caption or aria-label describing its contents","required":false}],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Table.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-300","docsPage":"/docs/components/table","usage":{"when":"Show rows of structured data in aligned columns, with optional sorting.","whenNot":"A single record, a short list of links, or content that reflows as cards.","useInstead":[{"component":"Field","reason":"one record as label and value pairs"},{"component":"Stack","reason":"a short list of items"}]},"core":true},"Tag":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=32-11","figmaId":null,"preview":{"exportName":"Tag","sizing":"panel"},"consumers":["src/app/components/badge.tsx","src/app/components/box.tsx","src/app/components/breadcrumb.tsx","src/app/components/card.tsx","src/app/components/grid.tsx","src/app/components/pin.tsx","src/app/components/reveal.tsx","src/app/components/sidebar.tsx","src/app/components/stack.tsx","src/app/components/surface.tsx","src/app/components/switcher.tsx","src/app/components/text.tsx","src/app/components/visually-hidden.tsx","src/app/design-system/generated-token-descriptions.ts"],"tokenMapping":{"Surface fill":"component.tag.background","Label text":"component.tag.text","Border stroke":"component.tag.border","Corner radius":"component.tag.radius","Type size":"component.tag.fontSize","Type weight":"component.tag.fontWeight","Line rhythm":"component.tag.lineHeight","Min width":"component.tag.minWidth","Min height":"component.tag.minHeight","Horizontal padding":"component.tag.paddingX","Vertical padding":"component.tag.paddingY","Active label text":"component.tag.activeText","Active surface fill":"component.tag.activeBackground","Active border stroke":"component.tag.activeBorder","Active hover fill":"component.tag.activeHover"},"props":{"active":{"type":"boolean","default":false},"children":{"type":"ReactNode"}},"allowedChildren":[],"propConstraints":{"active":{"type":"boolean"}},"requiredProps":["children"],"a11yRules":[{"rule":"When used as interactive chip (onClick), must have role=\\"button\\" and keyboard activation","required":true},{"rule":"When used as status indicator (no onClick), role should be \\"status\\" or omitted","required":false}],"variantAxes":["active"],"componentProperties":[{"name":"Label","type":"TEXT","defaultValue":"Tag","sourceProp":"children","boundTo":"characters","targetSelector":"Label"}],"states":["default","hover","disabled"],"slots":[{"name":"background","figmaSlotName":"Background","tokenBinding":{"fill":"semantic.color.surface.raised","stroke":"semantic.color.border.default","paddingLeft":"component.tag.paddingX","paddingRight":"component.tag.paddingX","paddingTop":"component.tag.paddingY","paddingBottom":"component.tag.paddingY","cornerRadius":"semantic.radius.action"}},{"name":"label","figmaSlotName":"Label","tokenBinding":{"fill":"semantic.color.content.secondary"}}],"tokens":{"minWidth":"component.tag.minWidth","minHeight":"component.tag.minHeight"},"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Tag.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=32-11","docsPage":"/docs/components/tag","usage":{"when":"Show an interactive filter or category chip that people can toggle.","whenNot":"A read-only status or count label.","useInstead":[{"component":"Badge","reason":"a read-only status or count"}]},"core":true},"Surface":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"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) - Radius: `rounded-lg` (role radius + 4px), the one container radius shared with Card - 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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-27","figmaId":null,"preview":{"exportName":"Surface","sizing":"panel"},"consumers":["src/app/components/card.tsx","src/app/components/container.tsx","src/app/components/dialog.tsx","src/app/components/disclosure.tsx","src/app/components/divider.tsx","src/app/components/empty-state.tsx","src/app/components/error-pattern.tsx","src/app/components/form-control.ts","src/app/components/metric-tiles.tsx","src/app/components/popover.tsx","src/app/components/slider.tsx","src/app/components/stack.tsx","src/app/components/surface-padding.ts","src/app/components/table.tsx","src/app/components/tooltip.test.tsx","src/app/components/tooltip.tsx","src/app/context/hds-theme.tsx"],"tokenMapping":{},"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"overflow":{"type":"Overflow","optional":true},"padding":{"type":"PaddingOption","default":"component"},"shadow":{"type":"boolean","default":false},"style":{"type":"CSSProperties","optional":true},"theme":{"type":"enum","values":["light","dark"],"optional":true}},"allowedChildren":["*"],"propConstraints":{"className":{"type":"string"},"shadow":{"type":"boolean"},"theme":{"type":"enum","values":["light","dark"]}},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":true,"sourcePath":"src/app/components/Surface.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-27","states":["default"],"docsPage":"/docs/components/surface","usage":{"when":"Give a block of content a background and padding, with no header or footer.","whenNot":"Page layout, section spacing, width constraints, or content that needs slots.","useInstead":[{"component":"Card","reason":"content that needs header, body or footer slots"},{"component":"Stack","reason":"spacing between siblings"}]},"aiRules":"Use Surface only when content needs a background-bearing inset wrapper. Do NOT use Surface for macro page layouts, section spacing, or pure width constraints. Do NOT nest extra padded wrappers inside Surface to simulate another card. Do NOT recreate surface behavior with raw div padding, backgroundColor, or border styles elsewhere.","core":true},"Card":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/card.tsx","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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=39-11","figmaId":null,"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/card-progress.test.tsx","src/app/components/card.test.tsx","src/app/components/destructive-section.tsx","src/app/components/empty-state.tsx","src/app/components/field.tsx","src/app/components/focus-visible.test.tsx","src/app/components/grid.tsx","src/app/components/metadata-list.tsx","src/app/components/metric-tiles.tsx","src/app/components/radio.test.tsx","src/app/components/stat.tsx","src/app/components/status-tile.tsx","src/app/components/surface-padding.ts","src/app/components/surface.tsx","src/app/design-system/generated-token-descriptions.ts","src/index.ts"],"tokenMapping":{"Surface fill":"role.card","Border stroke":"role.border","Corner radius":"role.radius"},"sourcePath":"src/app/components/Card.tsx","sourceExport":"Card","props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","optional":true},"bordered":{"type":"boolean","default":false},"gap":{"type":"GapOption","default":"tight"},"noPadding":{"type":"boolean","default":false},"onSelectedChange":{"type":"(selected: boolean) => void","optional":true},"padding":{"type":"PaddingOption","default":"component"},"selectable":{"type":"boolean","default":false},"selected":{"type":"boolean","default":false},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"],"default":"neutral"},"variant":{"type":"enum","values":["default","accent"],"default":"default"}},"tokens":{"background":"role.card","text":"role.card-foreground","border":"role.border","radius":"role.radius","description":"role.muted-foreground"},"figmaPropertyMapping":{"padding":"Padding","gap":"Gap","variant":"Variant","tone":"Tone"},"states":["default"],"allowedChildren":["*"],"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","figmaSlotName":"Header","tokenBinding":{"fill":"role.card-foreground"}},{"name":"title","figmaSlotName":"Title","tokenBinding":{"fill":"role.card-foreground"}},{"name":"description","figmaSlotName":"Description","tokenBinding":{"fill":"role.muted-foreground"}},{"name":"body","figmaSlotName":"Body","tokenBinding":{"fill":"role.card-foreground"}},{"name":"footer","figmaSlotName":"Footer","tokenBinding":{"fill":"role.card-foreground"}}],"tier":"primitive","docExempt":false,"compoundMembers":["Header","Title","Description","Body","Footer"],"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=39-11","propConstraints":{"bordered":{"type":"boolean"},"noPadding":{"type":"boolean"},"selectable":{"type":"boolean"},"selected":{"type":"boolean"},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"]},"variant":{"type":"enum","values":["default","accent"]}},"docsPage":"/docs/components/card","usage":{"when":"Group related content on a raised surface with header, body, footer and metric slots, or as one selectable option.","whenNot":"A bare padded background with no slot anatomy, or a single headline figure.","useInstead":[{"component":"Surface","reason":"a padded background without slot anatomy"},{"component":"Card.Metric","reason":"a single headline figure"}]},"core":true},"Text":{"category":"Typography","filePath":"src/app/components/text.tsx","description":"Text — polymorphic typography primitive spanning the full HDS type ramp.","hidden":false,"props":{"as":{"type":"\\"symbol\\" | \\"object\\" | \\"title\\" | \\"a\\" | \\"button\\" | \\"div\\" | \\"form\\" | \\"h2\\" | \\"h3\\" | \\"img\\" | \\"input\\" | \\"label\\" | \\"li\\" | \\"nav\\" | \\"ol\\" | \\"p\\" | \\"select\\" | \\"span\\" | \\"svg\\" | \\"ul\\" | \\"abbr\\" | \\"address\\" | ... 158 more ...","default":"defaultTagMap[variant]"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true},"variant":{"type":"TextVariant"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"categorySource":"jsdoc","governedCategory":true,"figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2022-31","figmaId":null,"preview":{"exportName":"Text","sizing":"panel"},"consumers":["src/app/components/alert-dialog.tsx","src/app/components/card.tsx","src/app/components/data-table-section.tsx","src/app/components/destructive-section.tsx","src/app/components/dialog.tsx","src/app/components/error-pattern.tsx","src/app/components/hds-tooltip.tsx","src/app/components/inline-link.tsx","src/app/components/kbd.tsx","src/app/components/table.tsx","src/app/components/visually-hidden.tsx","src/app/design-system/generated-token-descriptions.ts","src/brand/overlay.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":true,"sourcePath":"src/app/components/Text.tsx","figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2022-31","docsPage":"/docs/components/text","usage":{"when":"Set any text on the type ramp, with the element chosen by `as`.","whenNot":"Navigation links, or a keyboard hint.","useInstead":[{"component":"InlineLink","reason":"a link inside body copy"},{"component":"Kbd","reason":"a keyboard key hint"}]},"core":true},"Dialog":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/dialog.tsx","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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-27","figmaId":null,"tier":"primitive","preview":{"exportName":"Dialog","sizing":"panel"},"consumers":["src/app/components/alert-dialog.test.tsx","src/app/components/alert-dialog.tsx","src/app/components/dialog.test.tsx","src/app/components/menu.tsx","src/app/components/popover.tsx","src/app/components/toast.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/styles/__tests__/scrim-and-color-scheme.test.ts"],"tokenMapping":{},"variantAxes":["state"],"componentProperties":[{"name":"Title","type":"TEXT","defaultValue":"Dialog title","sourceProp":"Title.children","boundTo":"characters","targetSelector":"Title"},{"name":"Description","type":"TEXT","defaultValue":"Dialog description","sourceProp":"Description.children","boundTo":"characters","targetSelector":"Description"},{"name":"Show close","type":"BOOLEAN","defaultValue":true,"sourceProp":"Content.hideClose","boundTo":"visibility","targetSelector":"Close","invert":true}],"sourcePath":"src/app/components/Dialog.tsx","sourceExport":"Dialog","props":{"children":{"type":"ReactNode","optional":true},"defaultOpen":{"type":"boolean","optional":true},"modal":{"type":"boolean","optional":true},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true}},"tokens":{"background":"role.popover","text":"role.popover-foreground","border":"role.border","radius":"role.radius","shadow":"semantic.shadow.overlay","scrim":"role.scrim","descriptionText":"role.muted-foreground","closeHover":"role.accent","closeHoverText":"role.accent-foreground","focusRing":"role.ring"},"figmaPropertyMapping":{"Title.children":"Title","Description.children":"Description","Content.hideClose":"Show close","modal":"Modal"},"states":["closed","open"],"slots":[{"name":"overlay","figmaSlotName":"Overlay","tokenBinding":{"fill":"role.foreground"}},{"name":"surface","figmaSlotName":"Surface","tokenBinding":{"fill":"role.popover","stroke":"role.border","cornerRadius":"role.radius"}},{"name":"header","figmaSlotName":"Header","tokenBinding":{"fill":"role.popover-foreground"}},{"name":"title","figmaSlotName":"Title","tokenBinding":{"fill":"role.popover-foreground","typography":"semantic.typography.h3"}},{"name":"description","figmaSlotName":"Description","tokenBinding":{"fill":"role.muted-foreground","typography":"semantic.typography.body"}},{"name":"footer","figmaSlotName":"Footer","tokenBinding":{"fill":"role.popover-foreground"}},{"name":"close","figmaSlotName":"Close","tokenBinding":{"fill":"role.muted-foreground"}},{"name":"trigger","description":"The element that opens the dialog (Dialog.Trigger).","source":"jsdoc"}],"allowedChildren":["*"],"requiredProps":["children"],"a11yRules":[{"rule":"Must have an accessible name via Dialog.Title or aria-label","required":true},{"rule":"Description should be associated via Dialog.Description when present","required":false}],"compoundMembers":["Trigger","Portal","Overlay","Content","Header","Footer","Title","Description","Close"],"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-27","propConstraints":{"defaultOpen":{"type":"boolean"},"modal":{"type":"boolean"},"open":{"type":"boolean"}},"docsPage":"/docs/components/dialog","usage":{"when":"Interrupt the page with a modal that needs a decision or focused input before people continue.","whenNot":"A preview on hover, a message that needs no reply, or content that can stay inline.","useInstead":[{"component":"Tooltip","reason":"a short hint on hover or focus"},{"component":"Alert","reason":"a message that needs no reply"},{"component":"ToastProvider","reason":"a brief confirmation"},{"component":"AlertDialog","reason":"confirming a destructive or irreversible action"}]},"keyboard":[{"keys":"Enter/Space","effect":"Opens the dialog from the trigger and moves focus inside it."},{"keys":"Escape","effect":"Closes the dialog and returns focus to the trigger."},{"keys":"Tab","effect":"Cycles focus inside the open dialog."},{"keys":"Shift+Tab","effect":"Cycles focus backwards inside the open dialog."}],"core":true},"Button":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/button.tsx","description":"Triggers an action when activated.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=28-138","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=28-138","tier":"primitive","preview":{"exportName":"Button","sizing":"panel"},"consumers":["src/app/components/alert-dialog.tsx","src/app/components/button.test.tsx","src/app/components/card.test.tsx","src/app/components/card.tsx","src/app/components/data-table-section.tsx","src/app/components/destructive-section.tsx","src/app/components/dialog.tsx","src/app/components/error-pattern.tsx","src/app/components/form-actions.tsx","src/app/components/form.tsx","src/app/components/hds-tooltip.tsx","src/app/components/icon.tsx","src/app/components/inline-code.test.tsx","src/app/components/inline-code.tsx","src/app/components/inline-link.tsx","src/app/components/menu.tsx","src/app/components/pagination.markup.test.tsx","src/app/components/pagination.tsx","src/app/components/popover.tsx","src/app/components/segmented-control.tsx","src/app/components/select.tsx","src/app/components/toast.tsx","src/app/context/DemoStateContext.tsx","src/app/design-system/generated-token-descriptions.ts","src/form/index.ts","src/index.ts","src/mui/index.ts","src/styles/__tests__/pressed-overlay-token.test.ts"],"tokenMapping":{},"variantAxes":["variant","tone","size","state"],"componentProperties":[{"name":"Label","type":"TEXT","defaultValue":"Button","sourceProp":"label","boundTo":"characters","targetSelector":"Label"},{"name":"Show icon","type":"BOOLEAN","defaultValue":false,"sourceProp":"iconLeft","boundTo":"visibility","targetSelector":"IconLeft"},{"name":"Show trail icon","type":"BOOLEAN","defaultValue":false,"sourceProp":"iconRight","boundTo":"visibility","targetSelector":"IconRight"}],"sourcePath":"src/app/components/button.tsx","sourceExport":"Button","props":{"asChild":{"type":"boolean","default":false},"defaultPressed":{"type":"boolean","optional":true},"disabled":{"type":"boolean","optional":true},"iconLeft":{"type":"ReactNode","optional":true},"iconOnly":{"type":"boolean","default":false},"iconRight":{"type":"ReactNode","optional":true},"label":{"type":"string","optional":true},"loading":{"type":"boolean","default":false},"onPressedChange":{"type":"(pressed: boolean) => void","optional":true},"pressed":{"type":"boolean","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"],"optional":true},"variant":{"type":"enum","values":["primary","secondary","tertiary"],"optional":true}},"tokens":{"background":"role.primary","text":"role.primary-foreground","border":"role.input","hoverSurface":"role.accent","hoverText":"role.accent-foreground","pressedOverlay":"role.pressed-overlay","focusRing":"role.ring","radius":"role.radius"},"figmaPropertyMapping":{"variant":"Variant","tone":"Tone","size":"Size","label":"Label","iconLeft":"Show icon","iconRight":"Show trail icon"},"states":["default","hover","focus","active","disabled","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":{"asChild":{"type":"boolean"},"defaultPressed":{"type":"boolean"},"disabled":{"type":"boolean"},"iconOnly":{"type":"boolean"},"label":{"type":"string"},"loading":{"type":"boolean"},"pressed":{"type":"boolean"},"size":{"type":"enum","values":["sm","md","lg"]},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"]},"variant":{"type":"enum","values":["primary","secondary","tertiary"]}},"docsPage":"/docs/components/button","usage":{"when":"Run an action, such as submit, save or open a dialog. For an icon-only control pass iconOnly, iconLeft and label; for an on/off toggle pass pressed.","whenNot":"Navigating to another page, where a link is the correct element.","useInstead":[{"component":"InlineLink","reason":"navigation to another page"}]},"core":true},"Callout":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/callout.tsx","description":"Tone-driven tinted callout for notes, quotes, hypotheses — the same feedback fill language as Alert, without Alert\'s icon or status role.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-85","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-85","tier":"primitive","preview":{"exportName":"Callout","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"italic":{"type":"boolean","default":false},"tone":{"type":"enum","values":["accent","info","success","warning","danger"],"default":"info"}},"allowedChildren":["*"],"propConstraints":{"italic":{"type":"boolean"},"tone":{"type":"enum","values":["accent","info","success","warning","danger"]}},"requiredProps":[],"a11yRules":[{"rule":"Callout is decorative; tone is signaled visually — pair with semantic role when meaning matters","required":false}],"docsPage":null},"EmptyState":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/empty-state.tsx","description":"EmptyState — consistent no-data placeholder for lists, grids, and sections.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-352","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-352","tier":"primitive","preview":{"exportName":"EmptyState","sizing":"panel"},"consumers":["src/app/components/data-table-section.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true},"description":{"type":"ReactNode","optional":true},"title":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/empty-state","usage":{"when":"Say that a list, grid or section has no data yet, with a title and an optional description.","whenNot":"Content that is still loading, or a full-page error.","useInstead":[{"component":"Skeleton","reason":"content that is still loading"},{"component":"Alert","reason":"a message about something that went wrong"}]},"aiRules":"Use only for inline empty states inside an existing section. Do NOT 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.","core":true},"Field":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/field.tsx","description":"Caption label paired with a value — used in metadata grids and read-only forms.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-81","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-81","tier":"primitive","preview":{"exportName":"Field","sizing":"panel"},"consumers":["src/app/components/combobox.tsx","src/app/components/form.tsx","src/app/components/input.tsx","src/app/components/table.tsx","src/app/components/textarea.tsx","src/form/hds-form.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"label":{"type":"string"},"mono":{"type":"boolean","optional":true},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"],"optional":true},"value":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{"label":{"type":"string"},"mono":{"type":"boolean"},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"]}},"requiredProps":["label"],"a11yRules":[{"rule":"Label must describe the value; pair with aria-describedby when value is non-trivial","required":false}],"docsPage":"/docs/components/field","usage":{"when":"Show a labelled read-only value, such as a name and its value in a detail view.","whenNot":"Editable input, or a single headline figure.","useInstead":[{"component":"Input","reason":"an editable single-line value"},{"component":"Card.Metric","reason":"a headline figure inside a Card"}]},"core":true},"Page":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/page.tsx","description":"Page — standard page shell. Wraps page content in Container (width constraint) and applies the canonical vertical padding so content breathes against the viewport edges on scroll. Use as the outermost element of any new page so vertical rhythm is consistent across the system without per-page reinvention. Footer: every page mounted under HDSLayout (the standard route shell) gets a shared footer rendered after this component\'s content, with bottom space below the footer owned by the layout shell. Page intentionally does not render its own footer — the shell is the single source of truth. Use Container directly only for full-bleed surfaces (sketches, hero sections, embedded canvases) where the page owns its own vertical padding. Usage: <Page> <Stack direction=\\"column\\" gap=\\"spacious\\">...</Stack> </Page> <Page maxWidth=\\"content\\" paddingY=\\"compact\\"> <article>...</article> </Page>","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Page","sizing":"panel"},"consumers":["src/app/components/container.tsx","src/app/components/pagination.markup.test.tsx","src/app/components/pagination.test.tsx","src/app/components/pagination.tsx","src/app/components/surface.tsx","src/app/components/toast.tsx","src/app/design-system/generated-token-descriptions.ts","src/brand/overlay.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"maxWidth":{"type":"enum","values":["content","max"],"default":"max"},"paddingY":{"type":"enum","values":["default","compact","none"],"default":"default"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/page","usage":{"when":"Wrap a screen in the standard width and padding."}},"Stat":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/stat.tsx","description":"Headline metric — large value, caption label, optional sub-line.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-247","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-247","tier":"primitive","preview":{"exportName":"Stat","sizing":"panel"},"consumers":["src/app/components/metric-tiles.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string"},"sub":{"type":"ReactNode","optional":true},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"],"optional":true},"value":{"type":"ReactNode"}},"allowedChildren":[],"propConstraints":{"label":{"type":"string"},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"]}},"requiredProps":["label","value"],"a11yRules":[{"rule":"Provide an accessible name for the stat when value is symbolic (—, ✓, etc.)","required":false}],"docsPage":null,"usage":{"when":"Show one headline figure inline, inside prose or a dense list, with its label and an optional sub-line.","whenNot":"A row of headline numbers on a screen, a figure inside a Card, or a status with a trailing badge.","useInstead":[{"component":"MetricTiles","reason":"a row of headline numbers (one MetricTile per number)"},{"component":"Card.Metric","reason":"a figure inside a Card (hds#254 folds Stat into the Card slot)"},{"component":"StatusTile","reason":"a titled status with notes and a trailing badge"}]}},"StatusListItem":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-350","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-350","tier":"pattern","preview":{"exportName":"StatusListItem","sizing":"panel"},"consumers":["src/app/components/status-tile.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"notes":{"type":"ReactNode[]","optional":true},"title":{"type":"ReactNode"},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"],"optional":true},"trailing":{"type":"ReactNode","optional":true}},"allowedChildren":[],"propConstraints":{"tone":{"type":"enum","values":["success","danger","warning","info","neutral"]}},"requiredProps":["title"],"a11yRules":[{"rule":"Status dot is decorative (aria-hidden); convey status meaning via title or trailing badge","required":true}],"docsPage":null},"StatusTile":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-292","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-292","tier":"pattern","preview":{"exportName":"StatusTile","sizing":"panel"},"consumers":["src/app/components/metric-tiles.tsx","src/app/components/stat.tsx","src/index.ts","src/patterns.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"notes":{"type":"ReactNode[]","optional":true},"title":{"type":"ReactNode"},"tone":{"type":"enum","values":["success","warning","danger","info","neutral"],"default":"neutral"},"trailing":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/status-tile","usage":{"when":"Show a titled status block with optional notes and a trailing badge or affordance.","whenNot":"A headline number (never a value), or a row inside a list.","useInstead":[{"component":"MetricTiles","reason":"a row of headline numbers"},{"component":"Card.Metric","reason":"a headline figure inside a Card (hds#254 folds StatusTile into the Card slot)"},{"component":"StatusListItem","reason":"a status row inside a list"}]}},"Badge":{"variantAxes":["tone"],"componentProperties":[{"name":"Label","type":"TEXT","defaultValue":"Badge","sourceProp":"children","boundTo":"characters","targetSelector":"Label"}],"states":["default"],"filePath":"src/app/components/badge.tsx","props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"span"},"dot":{"type":"boolean","default":false},"label":{"type":"string","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"tone":{"type":"enum","values":["success","danger","warning","info","neutral","inProgress"],"optional":true}},"allowedChildren":[],"propConstraints":{"dot":{"type":"boolean"},"label":{"type":"string"},"size":{"type":"enum","values":["sm","md","lg"]},"tone":{"type":"enum","values":["success","danger","warning","info","neutral","inProgress"]}},"requiredProps":[],"a11yRules":[],"description":"Compact metadata/status chip. Tone is the only styling input.","category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=31-15","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=31-15","tier":"primitive","preview":{"exportName":"Badge","sizing":"panel"},"consumers":["src/app/components/alert.tsx","src/app/components/avatar.tsx","src/app/components/badge.test.tsx","src/app/components/card.tsx","src/app/components/page-header.tsx","src/app/components/tag.tsx","src/app/design-system/generated-token-descriptions.ts","src/mui/index.ts"],"tokenMapping":{},"docsPage":"/docs/components/badge","usage":{"when":"Label a status, state or count with a compact neutral or semantic chip, or a dot.","whenNot":"A chip people can toggle, or a message that needs a sentence.","useInstead":[{"component":"Tag","reason":"an interactive filter or category chip"},{"component":"Alert","reason":"a message that needs a sentence"}]},"core":true},"AssetImg":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/asset-img.tsx","description":"AssetImg - responsive asset frame with fallback placeholder handling. Contexts: default, lightbox, and detail.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-67","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-67","tier":"primitive","preview":{"exportName":"AssetImg","sizing":"panel"},"consumers":["src/app/components/asset-img.test.tsx","src/app/components/hds-tooltip.tsx","src/app/components/tooltip.test.tsx","src/app/components/tooltip.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"alt":{"type":"string","optional":true},"className":{"type":"string","optional":true},"context":{"type":"enum","values":["default","lightbox","detail"],"default":"default"},"draggable":{"type":"boolean","default":false},"expandable":{"type":"boolean","default":true},"expandLabel":{"type":"string","optional":true},"isDark":{"type":"boolean","default":false},"loading":{"type":"enum","values":["lazy","eager"],"default":"lazy"},"naturalHeight":{"type":"number","optional":true},"naturalWidth":{"type":"number","optional":true},"onClick":{"type":"(e: MouseEvent<Element, MouseEvent>) => void","optional":true},"onMouseDown":{"type":"(e: MouseEvent<Element, MouseEvent>) => void","optional":true},"onMouseLeave":{"type":"(e: MouseEvent<Element, MouseEvent>) => void","optional":true},"onMouseMove":{"type":"(e: MouseEvent<Element, MouseEvent>) => void","optional":true},"onMouseUp":{"type":"(e: MouseEvent<Element, MouseEvent>) => void","optional":true},"src":{"type":"string"},"style":{"type":"CSSProperties","default":"{}"},"title":{"type":"string","optional":true}},"allowedChildren":[],"propConstraints":{"alt":{"type":"string"},"className":{"type":"string"},"context":{"type":"enum","values":["default","lightbox","detail"]},"draggable":{"type":"boolean"},"expandable":{"type":"boolean"},"expandLabel":{"type":"string"},"isDark":{"type":"boolean"},"loading":{"type":"enum","values":["lazy","eager"]},"src":{"type":"string"},"title":{"type":"string"}},"requiredProps":["src"],"a11yRules":[{"rule":"Must have alt text (decorative images use alt=\\"\\")","required":true},{"rule":"Caption or description should be associated via aria-describedby when present","required":false}],"docsPage":"/docs/patterns/asset-img","usage":{"when":"Show an image that scales to its frame, with a placeholder if it fails to load."}},"Tabs":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/tabs.tsx","description":"The tab set itself. Tagged here rather than in the file block because TabsList and TabsContent share this module and have no Figma node of their own — a file-level @figma would silently claim this node for all four.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-89","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-89","tier":"primitive","preview":{"exportName":"Tabs","sizing":"panel"},"consumers":["src/app/components/breadcrumb.tsx","src/app/components/disclosure.tsx","src/app/components/segmented-control.tsx","src/app/components/tabs.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"activationMode":{"type":"enum","values":["automatic","manual"],"optional":true},"asChild":{"type":"boolean","optional":true},"defaultValue":{"type":"string","optional":true},"dir":{"type":"\\"ltr\\" | \\"rtl\\"","optional":true},"onValueChange":{"type":"(value: string) => void","optional":true},"orientation":{"type":"enum","values":["horizontal","vertical"],"optional":true},"value":{"type":"string","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/tabs","usage":{"when":"Switch between panels of related content in the same place, one visible at a time.","whenNot":"A compact mode switch with no panels, or content that must all be visible.","useInstead":[{"component":"SegmentedControl","reason":"a compact switch with no panels"},{"component":"Disclosure","reason":"optional content that expands in place"}]},"core":true},"TabsContent":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"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). The trigger\'s focus ring is `ring-inset` because `overflow-x-auto` clips anything drawn outside the list box (an outer ring was cut on the first/last tab).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsContent","sizing":"panel"},"consumers":["src/app/components/tabs.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"forceMount":{"type":"true","optional":true},"value":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"TabsList":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"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). The trigger\'s focus ring is `ring-inset` because `overflow-x-auto` clips anything drawn outside the list box (an outer ring was cut on the first/last tab).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsList","sizing":"panel"},"consumers":["src/app/components/tabs.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"loop":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"TabsTrigger":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"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). The trigger\'s focus ring is `ring-inset` because `overflow-x-auto` clips anything drawn outside the list box (an outer ring was cut on the first/last tab).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsTrigger","sizing":"panel"},"consumers":["src/app/components/tabs.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"value":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"Radio":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/radio.tsx","description":"Radio — radio button with animated selection indicator.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=36-17","figmaId":null,"preview":{"exportName":"Radio","sizing":"panel"},"consumers":["src/app/components/checkbox.tsx","src/app/components/focus-visible.test.tsx","src/app/components/radio.test.tsx","src/app/components/segmented-control.tsx","src/app/components/toggle.tsx","src/app/hooks/useInteractionState.test.ts","src/app/hooks/useInteractionState.ts"],"tokenMapping":{"label":"semantic.typography.small","indicator":"semantic.color.surface.accent","indicatorDot":"semantic.color.content.onAccent","border":"semantic.color.border.default","borderActive":"semantic.color.border.accent","hoverBackground":"semantic.color.surface.raised","pressedBackground":"semantic.color.surface.overlay","disabledLabel":"semantic.color.content.disabled","radius":"primitive.radius.4","gap":"primitive.space.2","rowPadding":"primitive.space.3"},"props":{"checked":{"type":"boolean"},"label":{"type":"string"},"onChange":{"type":"(v: boolean) => void"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=36-17","docsPage":"/docs/components/radio","usage":{"when":"Choose exactly one option from a small set that should stay visible together.","whenNot":"Independent yes/no options, or a long list of options.","useInstead":[{"component":"Checkbox","reason":"independent options that can be ticked together"},{"component":"Select","reason":"a long list that can collapse into a dropdown"},{"component":"SegmentedControl","reason":"a compact switch between two to five views or modes"}]},"core":true},"Select":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/select.tsx","description":"Select — dropdown selector built on Radix Select (ADR-001 Radix convention). Radix owns the listbox a11y contract: managed focus + active-descendant, typeahead, full keyboard (Home/End/PageUp-Down/wrap), Popper collision/flip positioning, and dismissal. The HDS surface is styled with the token-backed Tailwind idiom used by tabs.tsx / command-palette.tsx; `ref` targets the trigger button.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-49","figmaId":null,"preview":{"exportName":"Select","sizing":"panel"},"consumers":["src/app/components/checkbox.test.tsx","src/app/components/combobox.test.tsx","src/app/components/combobox.tsx","src/app/components/form-control.ts","src/app/components/form.tsx","src/app/components/input.tsx","src/app/components/menu.tsx","src/app/components/radio.tsx","src/app/components/segmented-control.tsx","src/app/components/select.test.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx"],"tokenMapping":{"label":"semantic.typography.small","background":"semantic.color.surface.raised","border":"semantic.color.border.default","text":"semantic.color.content.primary","mutedText":"semantic.color.content.secondary","radius":"semantic.radius.action"},"props":{"aria-describedby":{"type":"string","optional":true},"aria-invalid":{"type":"boolean","optional":true},"container":{"type":"HTMLElement","optional":true},"id":{"type":"string","optional":true},"label":{"type":"string"},"onChange":{"type":"(v: string) => void"},"options":{"type":"{ value: string; label: string; }[]"},"showLabel":{"type":"boolean","default":true},"value":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-49","docsPage":"/docs/components/select","usage":{"when":"Choose one value from a short list of options in a form field.","whenNot":"Firing actions, or choosing from a list long enough to need search.","useInstead":[{"component":"Menu","reason":"firing actions from a trigger"},{"component":"Combobox","reason":"a long list that needs search"}]},"keyboard":[{"keys":"Enter/Space/ArrowDown","effect":"Opens the listbox from the trigger with the selected option highlighted."},{"keys":"ArrowDown/ArrowUp","effect":"Moves the highlight."},{"keys":"Home/End","effect":"Jumps to the first or last option."},{"keys":"Character","effect":"Highlights the option that matches the typed letters."},{"keys":"Enter","effect":"Commits the highlighted option and returns focus to the trigger."},{"keys":"Escape","effect":"Closes the listbox and returns focus to the trigger."},{"keys":"Tab","effect":"Does not leave the open listbox."}],"core":true},"Slider":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/slider.tsx","description":"Slider — range slider with label and value display.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-265","figmaId":null,"preview":{"exportName":"Slider","sizing":"panel"},"consumers":["src/app/components/form-control.ts"],"tokenMapping":{"label":"semantic.typography.small","track":"semantic.color.surface.accent","value":"primitive.typography.family.mono","helperText":"semantic.color.content.secondary"},"props":{"label":{"type":"string"},"max":{"type":"number"},"min":{"type":"number"},"onChange":{"type":"(v: number) => void"},"step":{"type":"number","default":1},"value":{"type":"number"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-265","docsPage":"/docs/components/slider","usage":{"when":"Pick a number within a known range by dragging, when the exact value matters less than the position.","whenNot":"A precise number the person must type or read exactly.","useInstead":[{"component":"Input","reason":"a precise typed value (type=\\"number\\")"}]},"core":true},"Toggle":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/toggle.tsx","description":"Toggle — boolean on/off toggle with animated thumb.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=37-19","figmaId":null,"preview":{"exportName":"Toggle","sizing":"panel"},"consumers":["src/app/components/checkbox.tsx","src/app/components/focus-visible.test.tsx","src/app/components/radio.tsx","src/app/components/toggle.test.tsx","src/app/hooks/useInteractionState.test.ts","src/app/hooks/useInteractionState.ts"],"tokenMapping":{"label":"semantic.typography.small","indicator":"semantic.color.surface.accent","indicatorTick":"semantic.color.content.onAccent","border":"semantic.color.border.default","borderActive":"semantic.color.border.accent","hoverBackground":"semantic.color.surface.accentSubtle","disabledLabel":"semantic.color.content.disabled","radius":"primitive.radius.4","gap":"primitive.space.2","rowPadding":"primitive.space.3"},"props":{"checked":{"type":"boolean"},"label":{"type":"string"},"onChange":{"type":"(v: boolean) => void"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=37-19","docsPage":"/docs/components/toggle","usage":{"when":"Switch one setting on or off, with the effect applying immediately.","whenNot":"A choice that only takes effect after submitting a form, or picking from several options.","useInstead":[{"component":"Checkbox","reason":"a form option confirmed on submit"},{"component":"Radio","reason":"one choice from a set"}]},"core":true},"Avatar":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/avatar.tsx","description":"Circular avatar. Renders the image when available, else initials from `alt`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=34-18","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=34-18","tier":"primitive","preview":{"exportName":"Avatar","sizing":"panel"},"consumers":["src/app/components/avatar-group.test.tsx","src/app/components/avatar-group.tsx","src/app/components/avatar.test.tsx","src/app/components/icon.tsx","src/app/design-system/generated-token-descriptions.ts"],"tokenMapping":{},"variantAxes":["size"],"componentProperties":[],"props":{"alt":{"type":"string"},"initials":{"type":"string","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"src":{"type":"string","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/avatar","usage":{"when":"Show a person or entity as an image with an initials fallback.","whenNot":"A generic pictogram, or a status marker.","useInstead":[{"component":"Icon","reason":"a generic pictogram"},{"component":"Badge","reason":"a status marker"}]},"core":true},"Progress":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/progress.tsx","description":"Linear bar or circular ring. Determinate when `value` is a number, else indeterminate.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-91","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-91","tier":"primitive","preview":{"exportName":"Progress","sizing":"panel"},"consumers":["src/app/components/card-progress.test.tsx","src/app/components/card.test.tsx","src/app/components/card.tsx","src/app/components/progress.test.tsx","src/app/components/skeleton.tsx","src/app/components/spinner.tsx","src/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string","default":"Progress"},"max":{"type":"number","default":100},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"tone":{"type":"enum","values":["success","danger","warning","info","neutral"],"default":"neutral"},"value":{"type":"number","default":"null"},"variant":{"type":"enum","values":["linear","circular"],"default":"linear"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/progress","usage":{"when":"Show how far a task has got, as a bar or ring that is determinate or indeterminate.","whenNot":"A wait of unknown length with no bar, or content that is still loading.","useInstead":[{"component":"Spinner","reason":"a wait of unknown length"},{"component":"Skeleton","reason":"placeholder shapes for loading content"}]},"core":true},"Skeleton":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-95","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-95","tier":"primitive","preview":{"exportName":"Skeleton","sizing":"panel"},"consumers":["src/app/components/empty-state.tsx","src/app/components/progress.tsx","src/app/components/skeleton.test.tsx","src/app/components/spinner.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"height":{"type":"string | number","optional":true},"variant":{"type":"enum","values":["text","circular","rectangular"],"default":"rectangular"},"width":{"type":"string | number","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/skeleton","usage":{"when":"Reserve the shape of content that is still loading, so the layout does not jump.","whenNot":"A task with measurable progress, or a wait with no layout to reserve.","useInstead":[{"component":"Progress","reason":"a task with measurable progress"},{"component":"Spinner","reason":"a short wait with no layout to reserve"}]},"core":true},"Spinner":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/spinner.tsx","description":"Indeterminate spinner. Inherits the surrounding text color via currentColor.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-106","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-106","tier":"primitive","preview":{"exportName":"Spinner","sizing":"panel"},"consumers":["src/app/components/progress.tsx","src/app/components/skeleton.tsx","src/app/components/spinner.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string","default":"Loading"},"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/spinner","usage":{"when":"Show that something is loading when the wait is short or has no measurable end.","whenNot":"A task with measurable progress, or a region whose layout is known.","useInstead":[{"component":"Progress","reason":"a task with measurable progress"},{"component":"Skeleton","reason":"a region whose layout is known"}]},"core":true},"Breadcrumb":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-159","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-159","tier":"pattern","preview":{"exportName":"Breadcrumb","sizing":"panel"},"consumers":["src/app/components/breadcrumb.test.tsx","src/app/components/page-header.tsx","src/app/components/pagination.tsx","src/app/components/table.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"items":{"type":"BreadcrumbItem[]"},"label":{"type":"string","default":"Breadcrumb"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/breadcrumb","usage":{"when":"Show where the current page sits in a hierarchy and link back up it.","whenNot":"Switching between sibling views, or stepping through pages of results.","useInstead":[{"component":"Tabs","reason":"switching between sibling views"},{"component":"Pagination","reason":"stepping through pages of results"}]},"core":true},"Pagination":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/pagination.tsx","description":"Paged navigation with first/last anchors, sibling pages, and ellipses.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-194","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-194","tier":"pattern","preview":{"exportName":"Pagination","sizing":"panel"},"consumers":["src/app/components/breadcrumb.tsx","src/app/components/pagination.markup.test.tsx","src/app/components/pagination.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"count":{"type":"number"},"label":{"type":"string","default":"Pagination"},"onPageChange":{"type":"(page: number) => void"},"page":{"type":"number"},"siblingCount":{"type":"number","default":1}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/pagination","usage":{"when":"Move between pages of a long result set, with truncated page numbers.","whenNot":"A hierarchy trail, or a short list that fits on one page.","useInstead":[{"component":"Breadcrumb","reason":"a hierarchy trail"}]},"core":true},"ToastProvider":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/toast.tsx","description":"Provider + viewport for the toast system. Wrap the app root once.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-367","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-367","tier":"pattern","preview":{"exportName":"ToastProvider","sizing":"panel"},"consumers":["src/app/components/alert-dialog.tsx","src/app/components/alert.tsx","src/app/components/dialog.tsx","src/app/components/toast.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"duration":{"type":"number","default":5000},"swipeDirection":{"type":"SwipeDirection","default":"right"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/guides/providers","usage":{"when":"Confirm an action with a brief message that appears and dismisses itself, through useToast.","whenNot":"A message people must act on or that must stay next to its content.","useInstead":[{"component":"Alert","reason":"a message that stays next to its content"},{"component":"Dialog","reason":"a message that needs a decision"}]},"core":true},"Combobox":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/combobox.tsx","description":"Combobox — searchable single- or multi-select (Popover + filtered listbox). A select-with-search built on the HDS Popover. The trigger shows the current selection (with `multiple`, a count and a removable chip per value); 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":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-237","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-237","tier":"pattern","preview":{"exportName":"Combobox","sizing":"panel"},"consumers":["src/app/components/combobox.test.tsx","src/app/components/form-control.ts","src/app/components/form.tsx","src/app/components/input.tsx","src/app/components/select.tsx","src/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"aria-describedby":{"type":"string","optional":true},"aria-invalid":{"type":"boolean","optional":true},"aria-label":{"type":"string","optional":true},"className":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"emptyMessage":{"type":"string","default":"No results"},"id":{"type":"string","optional":true},"multiple":{"type":"boolean","optional":true},"onChange":{"type":"((value: string) => void) | ((value: string[]) => void)"},"options":{"type":"ComboboxOption[]"},"placeholder":{"type":"string","default":"Select…"},"searchPlaceholder":{"type":"string","default":"Search…"},"value":{"type":"string | readonly string[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/combobox","usage":{"when":"Pick one value, or several with `multiple`, from a long list of options, with a search field that filters as you type.","whenNot":"A short list that needs no search, or an action list.","useInstead":[{"component":"Select","reason":"a short list without search"},{"component":"Menu","reason":"firing actions from a trigger"}]},"keyboard":[{"keys":"Enter/Space","effect":"Opens the list from the trigger and moves focus to the search field."},{"keys":"ArrowDown/ArrowUp","effect":"Moves the active option, skipping disabled ones, and wraps at the ends."},{"keys":"Character","effect":"Filters the options to those matching the typed text."},{"keys":"Enter","effect":"Commits the active option and closes the list; with `multiple`, toggles it and keeps the list open."},{"keys":"Escape","effect":"Closes the list."},{"keys":"Tab","effect":"Stays inside the open list."}],"core":true},"Form":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/form.tsx","description":"Styled `<form>` with consistent vertical field rhythm. Tagged per-export: FormField and FormFieldShell share this module and have no Figma node, so a file-level @figma would claim this one for all three.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-94","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-94","tier":"pattern","preview":{"exportName":"Form","sizing":"panel"},"consumers":["src/app/components/form-actions.tsx","src/app/components/form.test.tsx","src/form/hds-form.tsx","src/form/index.ts","src/form/use-hds-form.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/form","usage":{"when":"Wrap form fields so they stack with even spacing."}},"FormField":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/form.tsx","description":"Label + description + error wrapper that wires the a11y relationships onto its single child control via cloneElement. Validation-library agnostic — pass `error` from whatever you use. For controls with an externally-managed callback ref (e.g. react-hook-form), use `FormFieldShell` + `useFieldWiring` instead.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"FormField","sizing":"panel"},"consumers":["src/app/components/combobox.tsx","src/app/components/form.test.tsx","src/app/components/select.tsx","src/form/form-adapter.test.tsx","src/form/hds-form.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactElement<any, string | JSXElementConstructor<any>>"},"className":{"type":"string","optional":true},"description":{"type":"string","optional":true},"error":{"type":"string","optional":true},"htmlFor":{"type":"string","optional":true},"label":{"type":"string"},"required":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"FormFieldShell":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/form.tsx","description":"Presentational label + control slot + helper/error markup. Renders `children` verbatim — it does NOT clone — so it is safe to use with controls that own a callback ref. Pair it with `useFieldWiring` to apply ids/aria yourself.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"FormFieldShell","sizing":"panel"},"consumers":["src/form/hds-form.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"controlId":{"type":"string"},"description":{"type":"string","optional":true},"error":{"type":"string","optional":true},"label":{"type":"string"},"required":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"HdsThemeProvider":{"category":"Theming","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/context/hds-theme.tsx","description":"Renders a `data-hds` scope wrapper that carries the four theming dials as root attributes + CSS vars, and exposes them to `useHdsTheme()`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"HdsThemeProvider","sizing":"panel"},"consumers":["src/app/context/__tests__/context.test.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/app/context/hds-portal.tsx","src/app/context/RouterContext.tsx","src/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"brand":{"type":"string","optional":true},"children":{"type":"React.ReactNode"},"className":{"type":"string","optional":true},"density":{"type":"enum","values":["comfortable","compact"],"optional":true},"fontFamily":{"type":"string","optional":true},"fontFamilyMono":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true},"theme":{"type":"enum","values":["light","dark"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/guides/providers","usage":{"when":"Wrap an app or region once to set theme, density and other root attributes for everything inside it.","whenNot":"Styling a single component, or per-component overrides.","useInstead":[{"component":"Surface","reason":"a single region with its own background"}]},"core":true},"AvatarGroup":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/avatar-group.tsx","description":"Renders up to `max` overlapping avatars followed by a `+N` overflow chip.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2030-63","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2030-63","tier":"primitive","preview":{"exportName":"AvatarGroup","sizing":"panel"},"consumers":["src/app/components/avatar-group.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"max":{"type":"number","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"Blockquote":{"category":"Typography","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/blockquote.tsx","description":"A quoted passage; pass `cite` for the source URL and `attribution` for a byline.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2024-18","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2024-18","tier":"primitive","preview":{"exportName":"Blockquote","sizing":"panel"},"consumers":["src/app/components/blockquote.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"attribution":{"type":"ReactNode","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"Kbd":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/kbd.tsx","description":"Renders a keyboard key or shortcut token, e.g. `<Kbd>⌘K</Kbd>`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2026-9","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2026-9","tier":"primitive","preview":{"exportName":"Kbd","sizing":"panel"},"consumers":["src/app/components/kbd.test.tsx","src/app/components/text.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/kbd","usage":{"when":"Show a keyboard key or shortcut hint inline, as a native kbd element.","whenNot":"Code samples, or a control that runs the shortcut.","useInstead":[{"component":"Text","reason":"inline code and other typography"}]},"core":true},"Timestamp":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/timestamp.tsx","description":"Presents a date/time with a machine-readable `dateTime` for accessibility.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2031-11","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2031-11","tier":"primitive","preview":{"exportName":"Timestamp","sizing":"panel"},"consumers":["src/app/components/timestamp.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"date":{"type":"string | number | Date"},"format":{"type":"enum","values":["date","time","datetime","relative"],"default":"datetime"},"locale":{"type":"string","optional":true},"now":{"type":"string | number | Date","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"VisuallyHidden":{"category":"Utility","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/visually-hidden.tsx","description":"Renders its children off-screen (Tailwind `sr-only`) so they are announced by screen readers without occupying visual space — e.g. a text label for an icon-only control.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"VisuallyHidden","sizing":"panel"},"consumers":["src/app/components/visually-hidden.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"span"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/utilities","usage":{"when":"Give assistive technology a label or description that sighted people do not need to see.","whenNot":"Text everyone should read, or hiding an element from assistive technology too.","useInstead":[{"component":"Text","reason":"text that everyone should read"}]},"core":true},"MetadataList":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/metadata-list.tsx","description":"Renders object metadata as a semantic `<dl>` of term/description pairs.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-47","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-47","tier":"pattern","preview":{"exportName":"MetadataList","sizing":"panel"},"consumers":["src/app/components/metadata-list.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"footer":{"type":"ReactNode","optional":true},"items":{"type":"MetadataListItem[]"},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"vertical"},"variant":{"type":"enum","values":["plain","divided"],"default":"plain"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"AlertDialog":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/alert-dialog.tsx","description":"AlertDialog root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2035-24","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2035-24","tier":"primitive","preview":{"exportName":"AlertDialog","sizing":"panel"},"consumers":["src/app/components/alert-dialog.test.tsx","src/app/components/destructive-section.tsx","src/app/components/dialog.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/styles/__tests__/scrim-and-color-scheme.test.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"defaultOpen":{"type":"boolean","optional":true},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null,"usage":{"when":"Confirm a destructive or irreversible action (delete, archive, remove) before it runs, with Cancel and Action buttons.","whenNot":"A modal that collects input or shows content, or a confirmation after the action is done.","useInstead":[{"component":"Dialog","reason":"a modal with a form or other content"},{"component":"ToastProvider","reason":"a brief confirmation after the action"}]}},"Box":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/box.tsx","description":"Box — polymorphic layout primitive with a token-first `sx` engine. `sx` is a deliberate SUBSET of MUI\'s sx — not all of CSS-in-JS is a feature: - Spacing shorthands (m/p/gap family) take the t-shirt scale (\'xs\'|\'sm\'|\'md\'|\'lg\'|\'xl\' → `--semantic-space-scale-*`, hds#206) through the resolver Stack\'s `gap` shares. Numbers still resolve as a count of 4px units (`p: 4` is 16px), and the deprecated \'tight\'|\'normal\'|\'inset\'|\'spacious\' still read `--semantic-space-layout-*`, fixed px that compact density does not remap. HDS source may not use raw integers (check-spacing-vocabulary). - `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":null,"tier":"primitive","preview":{"exportName":"Box","sizing":"panel"},"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/box.test.tsx","src/app/components/container.tsx","src/app/components/grid.tsx","src/app/components/sidebar.tsx","src/app/components/stack.test.tsx","src/app/components/stack.tsx","src/app/components/switcher.tsx","src/app/components/toggle.tsx","src/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode","optional":true},"sx":{"type":"SxObject","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/utilities","usage":{"when":"Build one-off layout that no named layout primitive covers, using token keys through `sx`.","whenNot":"Ordinary vertical or horizontal spacing, columns, or page-width constraint.","useInstead":[{"component":"Stack","reason":"a row or column of content with even gaps"},{"component":"Grid","reason":"multi-column layout"},{"component":"Container","reason":"a width-constrained page region"}]},"aiRules":"Reach for Stack/Grid/Container/the every-layout primitives first. Use 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.","core":true},"Sidebar":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/sidebar.tsx","description":"Sidebar — fixed-width rail beside fluid content, no media query. Every Layout reference: https://every-layout.dev/layouts/sidebar/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Sidebar","sizing":"panel"},"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/sidebar.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"[ReactNode, ReactNode]"},"className":{"type":"string","optional":true},"contentMin":{"type":"string","default":"50%"},"gap":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"normal"},"side":{"type":"enum","values":["start","end"],"default":"start"},"sideWidth":{"type":"string","default":"16rem"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null,"aiRules":"Reach for this named layout intent before Box/sx. Sidebar expects 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."},"Switcher":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/switcher.tsx","description":"Switcher — flips a row to a column below a width threshold, no media query. Every Layout reference: https://every-layout.dev/layouts/the-switcher/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Switcher","sizing":"panel"},"consumers":["src/app/components/box-sx.test.ts","src/app/components/box-sx.ts","src/app/components/switcher.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"gap":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"normal"},"limit":{"type":"number","optional":true},"style":{"type":"CSSProperties","optional":true},"threshold":{"type":"string","default":"30rem"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null,"aiRules":"Reach for this named layout intent before Box/sx. gap MUST use a 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 Stack with `direction=\\"row\\"` and `wrap=\\"wrap\\"`."},"Pin":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/pin.tsx","description":"Pin — sticky-pin an element within its scroll region.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Pin","sizing":"panel"},"consumers":["src/app/components/form-actions.tsx","src/app/components/pin.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true},"top":{"type":"string","default":0}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null,"aiRules":"`top` is a CSS length offset (a dimension, not a spacing step). 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."},"Reveal":{"category":"Motion","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/reveal.tsx","description":"Reveal — reveal-on-scroll primitive via CSS scroll-driven animation.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Reveal","sizing":"panel"},"consumers":["src/app/components/pin.tsx","src/app/components/reveal.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"animation":{"type":"enum","values":["fade","fade-up","fade-down","scale"],"default":"fade-up"},"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/reveal","usage":{"when":"Fade content in as it scrolls into view."},"aiRules":"Content is fully visible by DEFAULT; the effect applies only where `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."},"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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-14","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-14","tier":"primitive","preview":{"exportName":"Textarea","sizing":"panel"},"consumers":["src/app/components/form-control.ts","src/app/components/input.tsx","src/app/components/select.tsx","src/app/components/textarea.test.tsx"],"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":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/textarea","usage":{"when":"Collect multi-line free text such as a message, note or description.","whenNot":"A single line of text, or choosing from a list.","useInstead":[{"component":"Input","reason":"a single line of text"}]},"core":true},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"metadata":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"CardMetric":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card.Metric — one label, a large value and an optional sub-line inside a Card.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardMetric","sizing":"panel"},"consumers":["src/app/components/card.test.tsx"],"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":[],"docsPage":null,"usage":{"when":"Show one headline figure (a KPI, a count, a total) with its label inside a Card.","whenNot":"A metric outside a Card, or several figures that share one label.","useInstead":[{"component":"MetricTiles","reason":"a row of headline numbers with no enclosing Card"}]}},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"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":[],"docsPage":null},"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 + big value (title) + 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\\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). 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":["src/app/components/card.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"container":{"type":"HTMLElement","optional":true},"forceMount":{"type":"true","optional":true},"hideClose":{"type":"boolean","default":false},"onCloseAutoFocus":{"type":"(event: Event) => void","optional":true},"onEscapeKeyDown":{"type":"(event: KeyboardEvent) => void","optional":true},"onFocusOutside":{"type":"(event: CustomEvent<{ originalEvent: FocusEvent; }>) => void","optional":true},"onInteractOutside":{"type":"(event: CustomEvent<{ originalEvent: PointerEvent; }> | CustomEvent<{ originalEvent: FocusEvent; }>) => void","optional":true},"onOpenAutoFocus":{"type":"(event: Event) => void","optional":true},"onPointerDownOutside":{"type":"(event: CustomEvent<{ originalEvent: PointerEvent; }>) => void","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"forceMount":{"type":"true","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"container":{"type":"Element | DocumentFragment","optional":true},"forceMount":{"type":"true","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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 role.scrim (semantic.color.surface.scrim) at 60% alpha: dark in both themes, black in dark mode. The overlay portals into the nearest `data-hds` scope so it inherits the active theme; pass `container` to override. 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":["src/app/components/dialog.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"Tooltip":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/hds-tooltip.tsx","description":"Tooltip root. Bakes in the Radix Provider so a single `<Tooltip>` is self-contained — no app-level provider required. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-15","figmaId":null,"tier":"primitive","preview":{"exportName":"Tooltip","sizing":"panel"},"consumers":["src/app/components/asset-img.tsx","src/app/components/dialog.tsx","src/app/components/hds-tooltip.test.tsx","src/app/components/popover.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-15","props":{"children":{"type":"React.ReactNode","optional":true},"defaultOpen":{"type":"boolean","optional":true},"delayDuration":{"type":"number","optional":true},"disableHoverableContent":{"type":"boolean","optional":true},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/tooltip","usage":{"when":"Name an icon-only control, or add a short hint that appears on hover and keyboard focus.","whenNot":"Anything interactive, text people need to finish a task, or a hint touch users must see (touch has no hover).","useInstead":[{"component":"Popover","reason":"interactive or longer content that opens on click"},{"component":"Text","reason":"a hint that must stay visible"}]},"keyboard":[{"keys":"Focus","effect":"Opens the tooltip when the trigger receives keyboard focus."},{"keys":"Escape","effect":"Closes the tooltip and keeps focus on the trigger."},{"keys":"Tab","effect":"Moves on to the next control and closes the tooltip."}],"core":true},"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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-59","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-59","tier":"primitive","preview":{"exportName":"Menu","sizing":"panel"},"consumers":["src/app/components/combobox.tsx","src/app/components/data-table-section.tsx","src/app/components/menu.test.tsx","src/app/components/popover.tsx","src/app/components/select.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"defaultOpen":{"type":"boolean","optional":true},"dir":{"type":"\\"ltr\\" | \\"rtl\\"","optional":true},"modal":{"type":"boolean","optional":true},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"slots":[{"name":"trigger","description":"The element that opens the menu (Menu.Trigger).","source":"jsdoc"},{"name":"content","description":"The popup holding the items (Menu.Content).","source":"jsdoc"}],"docsPage":"/docs/components/menu","usage":{"when":"Offer a list of actions from a trigger, closed until opened.","whenNot":"Choosing one value for a form field, or a set of options that must stay visible.","useInstead":[{"component":"Select","reason":"choosing a value for a form field"}]},"keyboard":[{"keys":"Enter/Space/ArrowDown","effect":"Opens the menu from the trigger and highlights the first item."},{"keys":"ArrowDown/ArrowUp","effect":"Moves the highlight; it stops at the first and last item."},{"keys":"Home/End","effect":"Jumps to the first or last item."},{"keys":"Character","effect":"Highlights the next item that starts with the typed letter."},{"keys":"Enter","effect":"Selects the highlighted item and closes the menu."},{"keys":"Escape","effect":"Closes the menu and returns focus to the trigger."},{"keys":"Tab","effect":"Does not leave the open menu."}],"core":true},"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/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-32","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-32","tier":"primitive","preview":{"exportName":"Popover","sizing":"panel"},"consumers":["src/app/components/combobox.test.tsx","src/app/components/combobox.tsx","src/app/components/hds-tooltip.tsx","src/app/components/menu.tsx","src/app/components/popover.test.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/app/design-system/generated-token-descriptions.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"React.ReactNode","optional":true},"defaultOpen":{"type":"boolean","optional":true},"modal":{"type":"boolean","optional":true},"onOpenChange":{"type":"(open: boolean) => void","optional":true},"open":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/popover","usage":{"when":"Anchor interactive content, such as a short form, a filter set or a picker, to a trigger people click to open.","whenNot":"A short label on hover or focus, a list of actions, or a decision that must block the page.","useInstead":[{"component":"Tooltip","reason":"a short label shown on hover or focus"},{"component":"Menu","reason":"a list of actions"},{"component":"Dialog","reason":"a decision that blocks the page"}]},"keyboard":[{"keys":"Enter/Space","effect":"Opens the popover from the trigger and moves focus inside it."},{"keys":"Escape","effect":"Closes the popover and returns focus to the trigger."},{"keys":"Tab","effect":"Cycles focus inside the open popover; the page behind stays reachable."}],"core":true},"Checkbox":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/checkbox.tsx","description":"Checkbox — custom-drawn checkbox with check / indeterminate glyph.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=35-29","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=35-29","tier":"primitive","preview":{"exportName":"Checkbox","sizing":"panel"},"consumers":["src/app/components/checkbox.test.tsx","src/app/components/focus-visible.test.tsx","src/app/components/radio.tsx","src/app/components/toggle.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"checked":{"type":"boolean"},"indeterminate":{"type":"boolean","default":false},"label":{"type":"string"},"onChange":{"type":"(v: boolean) => void"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/components/checkbox","usage":{"when":"Let people tick one or more independent options, or a parent choice that is partly selected.","whenNot":"An immediate on/off setting, or a choice of exactly one option from a set.","useInstead":[{"component":"Toggle","reason":"a setting that applies as soon as it flips"},{"component":"Radio","reason":"exactly one choice from a set"}]},"core":true},"FormActions":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/form-actions.tsx","description":"Form footer with one fixed order: destructive (far left, if any), then secondary, then primary last and right-most. Gap is the tight layout token.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-87","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-87","tier":"pattern","preview":{"exportName":"FormActions","sizing":"panel"},"consumers":["src/app/components/form-actions.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"destructive":{"type":"ReactNode","optional":true},"primary":{"type":"ReactNode"},"secondary":{"type":"ReactNode","optional":true},"sticky":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/form-actions","usage":{"when":"Lay out a form\'s buttons in a fixed order: danger on the left, then secondary, then primary on the right."}},"MetricTile":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/metric-tiles.tsx","description":"One metric tile: eyebrow label, `heading2` value, caption sub line, on a raised surface at one fixed min-height. Wraps `Card.Metric` (the sibling with the eyebrow / h2 / caption scale) and adds the surface and the fixed height, so a tile needs no enclosing `Card`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-114","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-114","tier":"pattern","preview":{"exportName":"MetricTile","sizing":"panel"},"consumers":["src/app/components/metric-tiles.test.tsx","src/app/components/stat.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"ReactNode"},"sub":{"type":"ReactNode","optional":true},"tone":{"type":"enum","values":["neutral","success","warning","danger","info"],"default":"neutral"},"value":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null,"usage":{"when":"Show one key number with its label, inside a MetricTiles row."}},"MetricTiles":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/metric-tiles.tsx","description":"A row of `MetricTile`s. The grid has `min(tiles, 4)` columns, so three tiles fill three columns and never leave an empty fourth. The default for any row of headline numbers on a screen; use `Stat` only for an inline number inside prose or a dense list, `Card.Metric` only inside an existing `Card`, and `StatusTile` for state with notes (never a number).","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-89","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-89","tier":"pattern","preview":{"exportName":"MetricTiles","sizing":"panel"},"consumers":["src/app/components/card.tsx","src/app/components/metric-tiles.test.tsx","src/app/components/stat.tsx","src/app/components/status-tile.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/metric-tiles","usage":{"when":"Show a row of key numbers, one tile each."}},"PageHeader":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/page-header.tsx","description":"Screen header: breadcrumb slot, the title at the one canonical page-title size (`heading2`), a status slot and an actions slot. Every screen has exactly one. `display` and `h1` type are reserved for marketing and landing surfaces.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-3","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2121-3","tier":"pattern","preview":{"exportName":"PageHeader","sizing":"panel"},"consumers":["src/app/components/page-header.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"actions":{"type":"ReactNode","optional":true},"breadcrumb":{"type":"ReactNode","optional":true},"level":{"type":"PageHeaderLevel","default":1},"status":{"type":"ReactNode","optional":true},"title":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/page-header","usage":{"when":"Open a screen with its title, plus optional breadcrumb, status and actions."}},"DataTableSection":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/data-table-section.tsx","description":"Section heading and toolbar over a `Table`. Row actions are consumer nodes in a trailing column, the table scrolls horizontally on narrow widths without a `minWidth` from the caller, and zero rows shows an `EmptyState`.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-268","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-268","tier":"pattern","preview":{"exportName":"DataTableSection","sizing":"panel"},"consumers":["src/app/components/data-table-section.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"actionsLabel":{"type":"string","default":"Actions"},"columns":{"type":"TableColumn[]"},"emptyDescription":{"type":"ReactNode","optional":true},"emptyTitle":{"type":"ReactNode","default":"Nothing here yet"},"level":{"type":"6 | 3 | 4 | 2 | 5","default":2},"rows":{"type":"DataTableSectionRow[]"},"title":{"type":"ReactNode"},"toolbar":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/data-table-section","usage":{"when":"Put a heading and toolbar above a Table."}},"DestructiveSection":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/destructive-section.tsx","description":"Titled danger zone: a title, an explanation, and one danger `Button` that opens an `AlertDialog`. Pressing the button never runs the action; only the dialog\'s confirm does. Place it last on the screen, below the form.","figmaUrl":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2076-3","figmaId":null,"figmaLink":"https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2076-3","tier":"pattern","preview":{"exportName":"DestructiveSection","sizing":"panel"},"consumers":["src/app/components/destructive-section.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"actionLabel":{"type":"ReactNode","optional":true},"cancelLabel":{"type":"string","default":"Cancel"},"confirmBody":{"type":"ReactNode"},"confirmLabel":{"type":"string"},"description":{"type":"ReactNode"},"level":{"type":"6 | 3 | 4 | 2 | 5","default":2},"onConfirm":{"type":"() => void"},"title":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/patterns/destructive-section","usage":{"when":"Put a dangerous action, such as delete, in its own section with a warning and a confirm step."}},"HdsRouterProvider":{"category":"Theming","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/context/RouterContext.tsx","description":"Provide a router adapter to all HDS components below. Wrap your app root once.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"HdsRouterProvider","sizing":"panel"},"consumers":["src/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"adapter":{"type":"HdsRouterAdapter"},"children":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":"/docs/guides/providers","usage":{"when":"Wrap the app root once so HDS links and navigation use your client router; with no provider they stay plain anchors."},"core":true},"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":[],"docsPage":null},"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":[],"docsPage":null},"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":[],"docsPage":null},"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":[],"docsPage":null},"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":[],"docsPage":null},"HdsCheckbox":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized checkbox instance stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"docsPage":null},"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":[],"docsPage":null},"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":[],"docsPage":null}}'), b = { HdsPhosphor: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Compiler-recognized icon alias stub for JSX normalization.", hidden: !0, 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: !0, props: { layout: { type: "enum", values: ["VERTICAL", "HORIZONTAL"], default: "VERTICAL" }, layoutMode: { type: "enum", values: ["VERTICAL", "HORIZONTAL"], optional: !0 }, fill: { type: "string", optional: !0 }, background: { type: "string", optional: !0 }, stroke: { type: "string", optional: !0 }, border: { type: "string", optional: !0 }, padding: { type: "string", optional: !0 }, paddingX: { type: "string", optional: !0 }, paddingY: { type: "string", optional: !0 }, gap: { type: "string", optional: !0 }, itemSpacing: { type: "string", optional: !0 }, radius: { type: "string", optional: !0 }, width: { type: "string", optional: !0 }, height: { type: "string", optional: !0 }, children: { type: "ReactNode", optional: !0 } }, allowedChildren: ["*"], propConstraints: { layout: { type: "enum", values: ["VERTICAL", "HORIZONTAL"] }, layoutMode: { type: "enum", values: ["VERTICAL", "HORIZONTAL"] }, fill: { type: "string" }, stroke: { type: "string" }, padding: { type: "string" }, gap: { type: "string" }, radius: { type: "string" } }, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, HdsHeading: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Semantic heading wrapper. Maps level={1,2,3} to a typography token AND the matching h-tag (h1/h2/h3). Never skip levels (h1 → h3 without h2). Headings are font-light (display, h1) or font-normal (h2, h3) — never bold. Use Text for non-heading display copy.", hidden: !0, props: { typography: { type: "string", optional: !0 }, fill: { type: "string", optional: !0 }, text: { type: "string", optional: !0 }, children: { type: "ReactNode", optional: !0 }, level: { type: "enum", values: ["1", "2", "3"], optional: !0 } }, allowedChildren: ["*"], propConstraints: { typography: { type: "string" }, fill: { type: "string" }, level: { type: "enum", values: ["1", "2", "3"] } }, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, HdsLabel: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Form-control label primitive. Uses semantic.typography.caption (uppercase, tracked, font-medium). Color is semantic.color.content.secondary by default; the required-asterisk takes semantic.color.feedback.danger. Always pairs htmlFor with the control id; never used for non-label microcopy.", hidden: !0, props: { typography: { type: "string", optional: !0 }, fill: { type: "string", optional: !0 }, text: { type: "string", optional: !0 }, children: { type: "ReactNode", optional: !0 }, htmlFor: { type: "string", optional: !0 } }, allowedChildren: ["*"], propConstraints: { typography: { type: "string" }, fill: { type: "string" } }, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, HdsCaption: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Compiler-recognized caption primitive stub for generated JSX validation.", hidden: !0, props: { typography: { type: "string", optional: !0 }, fill: { type: "string", optional: !0 }, text: { type: "string", optional: !0 }, children: { type: "ReactNode", optional: !0 } }, allowedChildren: ["*"], propConstraints: { typography: { type: "string" }, fill: { type: "string" } }, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, HdsCheckbox: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Compiler-recognized checkbox instance stub for generated JSX validation.", hidden: !0, tier: "utility", props: {}, allowedChildren: ["*"], propConstraints: {}, requiredProps: [], a11yRules: [], storyFiles: [], storyIds: [] }, HdsChip: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "Compiler-recognized chip instance stub for generated JSX validation.", hidden: !0, props: {}, allowedChildren: ["*"], propConstraints: {}, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, HdsAvatar: { category: "Compiler", filePath: "scripts/hds-jsx-compiler.mjs", description: "User identity glyph. Square or circle, sized on the 8px grid (24/32/40/48/64). Initial-letter fallback uses semantic.typography.small (font-medium, never bold). Image variant is object-cover, never object-fill. Radius is semantic.radius.action for square or semantic.radius.pill for circle.", hidden: !0, props: {}, allowedChildren: ["*"], propConstraints: {}, requiredProps: [], a11yRules: [], preview: {}, tokenMapping: {}, tier: "utility" }, ExpandTooltip: { category: "Internal", categorySource: "internal-jsdoc", governedCategory: !0, hidden: !0, docExempt: !0, filePath: "src/app/components/tooltip.tsx", figmaUrl: null, figmaId: null, figmaLink: null, tier: "utility", preview: { exportName: "ExpandTooltip", sizing: "panel" }, consumers: ["src/app/components/asset-img.tsx", "src/app/components/hds-tooltip.tsx", "src/app/components/tooltip.test.tsx", "src/app/context/__tests__/portal-hydration.test.tsx", "src/app/context/__tests__/portal-scope.test.tsx"], tokenMapping: {}, variantAxes: [], componentProperties: [] } }, x = /* @__PURE__ */ JSON.parse(`{"primitive":[{"path":"primitive.color.neutral.50","cssVar":"--primitive-color-neutral-50","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#fafafa"},{"path":"primitive.color.neutral.100","cssVar":"--primitive-color-neutral-100","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#f5f5f5"},{"path":"primitive.color.neutral.200","cssVar":"--primitive-color-neutral-200","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#e5e5e5"},{"path":"primitive.color.neutral.300","cssVar":"--primitive-color-neutral-300","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#d4d4d4"},{"path":"primitive.color.neutral.400","cssVar":"--primitive-color-neutral-400","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#a3a3a3"},{"path":"primitive.color.neutral.500","cssVar":"--primitive-color-neutral-500","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#737373"},{"path":"primitive.color.neutral.600","cssVar":"--primitive-color-neutral-600","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#525252"},{"path":"primitive.color.neutral.700","cssVar":"--primitive-color-neutral-700","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#404040"},{"path":"primitive.color.neutral.800","cssVar":"--primitive-color-neutral-800","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#262626"},{"path":"primitive.color.neutral.850","cssVar":"--primitive-color-neutral-850","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#1a1a1a"},{"path":"primitive.color.neutral.900","cssVar":"--primitive-color-neutral-900","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#111111"},{"path":"primitive.color.neutral.950","cssVar":"--primitive-color-neutral-950","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#0a0a0a"},{"path":"primitive.color.neutral.white","cssVar":"--primitive-color-neutral-white","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#ffffff"},{"path":"primitive.color.neutral.black","cssVar":"--primitive-color-neutral-black","type":"color","description":"Specific value within the neutral range at a defined lightness step.","value":"#000000"},{"path":"primitive.color.blue.50","cssVar":"--primitive-color-blue-50","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.96 0.03 266.54)"},{"path":"primitive.color.blue.100","cssVar":"--primitive-color-blue-100","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.92 0.04 266.54)"},{"path":"primitive.color.blue.200","cssVar":"--primitive-color-blue-200","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.88 0.07 266.54)"},{"path":"primitive.color.blue.300","cssVar":"--primitive-color-blue-300","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.70 0.2903 266.54)"},{"path":"primitive.color.blue.400","cssVar":"--primitive-color-blue-400","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.65 0.2903 266.54)"},{"path":"primitive.color.blue.450","cssVar":"--primitive-color-blue-450","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.56 0.29 266.60)"},{"path":"primitive.color.blue.500","cssVar":"--primitive-color-blue-500","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"#1E2EFD"},{"path":"primitive.color.blue.600","cssVar":"--primitive-color-blue-600","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.45 0.2903 266.54)"},{"path":"primitive.color.blue.700","cssVar":"--primitive-color-blue-700","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.44 0.2903 266.54)"},{"path":"primitive.color.blue.800","cssVar":"--primitive-color-blue-800","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.30 0.07 266.54)"},{"path":"primitive.color.blue.900","cssVar":"--primitive-color-blue-900","type":"color","description":"Specific value within the blue range at a defined lightness step.","value":"oklch(0.22 0.05 266.54)"},{"path":"primitive.color.red.50","cssVar":"--primitive-color-red-50","type":"color","description":"Specific value within the red range at a defined lightness step.","value":"#fef2f2"},{"path":"primitive.color.red.400","cssVar":"--primitive-color-red-400","type":"color","description":"Specific value within the red range at a defined lightness step.","value":"#f87171"},{"path":"primitive.color.red.700","cssVar":"--primitive-color-red-700","type":"color","description":"Specific value within the red range at a defined lightness step.","value":"#b91c1c"},{"path":"primitive.color.red.950","cssVar":"--primitive-color-red-950","type":"color","description":"Specific value within the red range at a defined lightness step.","value":"#450a0a"},{"path":"primitive.color.green.50","cssVar":"--primitive-color-green-50","type":"color","description":"Specific value within the green range at a defined lightness step.","value":"#ecfdf5"},{"path":"primitive.color.green.400","cssVar":"--primitive-color-green-400","type":"color","description":"Specific value within the green range at a defined lightness step.","value":"#34d399"},{"path":"primitive.color.green.700","cssVar":"--primitive-color-green-700","type":"color","description":"Specific value within the green range at a defined lightness step.","value":"#047857"},{"path":"primitive.color.green.950","cssVar":"--primitive-color-green-950","type":"color","description":"Specific value within the green range at a defined lightness step.","value":"#022c22"},{"path":"primitive.color.graphite.50","cssVar":"--primitive-color-graphite-50","type":"color","description":"Graphite accent tint — faintest step.","value":"#f5f4f4"},{"path":"primitive.color.graphite.100","cssVar":"--primitive-color-graphite-100","type":"color","description":"Graphite accent — very light warm tint.","value":"#e9e7e8"},{"path":"primitive.color.graphite.200","cssVar":"--primitive-color-graphite-200","type":"color","description":"Graphite accent — light warm-grey; dark-mode rest accent fill.","value":"#d4d0d2"},{"path":"primitive.color.graphite.300","cssVar":"--primitive-color-graphite-300","type":"color","description":"Graphite accent — soft mid-light step; dark-mode hover/link.","value":"#b2abae"},{"path":"primitive.color.graphite.400","cssVar":"--primitive-color-graphite-400","type":"color","description":"Graphite accent — mid warm-grey step.","value":"#8b8488"},{"path":"primitive.color.graphite.500","cssVar":"--primitive-color-graphite-500","type":"color","description":"Graphite accent — mid step.","value":"#655e62"},{"path":"primitive.color.graphite.600","cssVar":"--primitive-color-graphite-600","type":"color","description":"Graphite accent — mid-dark step.","value":"#544d51"},{"path":"primitive.color.graphite.700","cssVar":"--primitive-color-graphite-700","type":"color","description":"Graphite accent rest — the warm charcoal brand accent; white text as a fill (AA).","value":"#433a3f"},{"path":"primitive.color.graphite.800","cssVar":"--primitive-color-graphite-800","type":"color","description":"Graphite accent — deep step; light-mode hover.","value":"#352e32"},{"path":"primitive.color.graphite.900","cssVar":"--primitive-color-graphite-900","type":"color","description":"Graphite accent — darkest usable step; light-mode pressed, dark-mode on-accent text.","value":"#2a2428"},{"path":"primitive.color.graphite.950","cssVar":"--primitive-color-graphite-950","type":"color","description":"Graphite accent — near-black warm substrate.","value":"#19161a"},{"path":"primitive.color.mauve.50","cssVar":"--primitive-color-mauve-50","type":"color","description":"Mauve tint, faintest step.","value":"#fff0f6"},{"path":"primitive.color.mauve.100","cssVar":"--primitive-color-mauve-100","type":"color","description":"Mauve step 100, lightness-matched to graphite 100.","value":"#f4e2ea"},{"path":"primitive.color.mauve.200","cssVar":"--primitive-color-mauve-200","type":"color","description":"Mauve step 200, lightness-matched to graphite 200.","value":"#e1cad4"},{"path":"primitive.color.mauve.300","cssVar":"--primitive-color-mauve-300","type":"color","description":"Mauve step 300, lightness-matched to graphite 300.","value":"#c0a4b1"},{"path":"primitive.color.mauve.400","cssVar":"--primitive-color-mauve-400","type":"color","description":"Mauve step 400, lightness-matched to graphite 400.","value":"#9d7b8a"},{"path":"primitive.color.mauve.500","cssVar":"--primitive-color-mauve-500","type":"color","description":"Mauve anchor (#734B5E). Reserved; not mapped to any semantic token yet.","value":"#734b5e"},{"path":"primitive.color.mauve.600","cssVar":"--primitive-color-mauve-600","type":"color","description":"Mauve step 600, lightness-matched to graphite 600.","value":"#674254"},{"path":"primitive.color.mauve.700","cssVar":"--primitive-color-mauve-700","type":"color","description":"Mauve step 700, lightness-matched to graphite 700.","value":"#523141"},{"path":"primitive.color.mauve.800","cssVar":"--primitive-color-mauve-800","type":"color","description":"Mauve step 800, lightness-matched to graphite 800.","value":"#432634"},{"path":"primitive.color.mauve.900","cssVar":"--primitive-color-mauve-900","type":"color","description":"Mauve step 900, lightness-matched to graphite 900.","value":"#361d29"},{"path":"primitive.color.mauve.950","cssVar":"--primitive-color-mauve-950","type":"color","description":"Mauve, near-black substrate.","value":"#240f1a"},{"path":"primitive.color.violet.50","cssVar":"--primitive-color-violet-50","type":"color","description":"Specific value within the violet range at a defined lightness step.","value":"#f5f3ff"},{"path":"primitive.color.violet.400","cssVar":"--primitive-color-violet-400","type":"color","description":"Specific value within the violet range at a defined lightness step.","value":"#a78bfa"},{"path":"primitive.color.violet.700","cssVar":"--primitive-color-violet-700","type":"color","description":"Specific value within the violet range at a defined lightness step.","value":"#6d28d9"},{"path":"primitive.color.violet.950","cssVar":"--primitive-color-violet-950","type":"color","description":"Specific value within the violet range at a defined lightness step.","value":"#2e1065"},{"path":"primitive.color.lilac.50","cssVar":"--primitive-color-lilac-50","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#f7f4fe"},{"path":"primitive.color.lilac.100","cssVar":"--primitive-color-lilac-100","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#efe9fd"},{"path":"primitive.color.lilac.200","cssVar":"--primitive-color-lilac-200","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#ddd0fb"},{"path":"primitive.color.lilac.300","cssVar":"--primitive-color-lilac-300","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#c3aef6"},{"path":"primitive.color.lilac.400","cssVar":"--primitive-color-lilac-400","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#a585ee"},{"path":"primitive.color.lilac.450","cssVar":"--primitive-color-lilac-450","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#9a6fe8"},{"path":"primitive.color.lilac.500","cssVar":"--primitive-color-lilac-500","type":"color","description":"Lilac accent rest — AA for white text on page and card surfaces.","value":"#6f3fd4"},{"path":"primitive.color.lilac.600","cssVar":"--primitive-color-lilac-600","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#5f33c0"},{"path":"primitive.color.lilac.700","cssVar":"--primitive-color-lilac-700","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#4f2aa3"},{"path":"primitive.color.lilac.800","cssVar":"--primitive-color-lilac-800","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#3a1f78"},{"path":"primitive.color.lilac.900","cssVar":"--primitive-color-lilac-900","type":"color","description":"Specific value within the lilac range at a defined lightness step.","value":"#2a1659"},{"path":"primitive.color.amber.50","cssVar":"--primitive-color-amber-50","type":"color","description":"Specific value within the amber range at a defined lightness step.","value":"#fffbeb"},{"path":"primitive.color.amber.400","cssVar":"--primitive-color-amber-400","type":"color","description":"Specific value within the amber range at a defined lightness step.","value":"#fbbf24"},{"path":"primitive.color.amber.800","cssVar":"--primitive-color-amber-800","type":"color","description":"Specific value within the amber range at a defined lightness step.","value":"#92400e"},{"path":"primitive.color.amber.950","cssVar":"--primitive-color-amber-950","type":"color","description":"Specific value within the amber range at a defined lightness step.","value":"#451a03"},{"path":"primitive.color.stone.100","cssVar":"--primitive-color-stone-100","type":"color","description":"Stone 100 — near-white warm tint; accent-subtle surface.","value":"#F5EFE7"},{"path":"primitive.color.stone.400","cssVar":"--primitive-color-stone-400","type":"color","description":"Stone 400 — light warm tone; dark-mode pressed accent.","value":"#D0B492"},{"path":"primitive.color.stone.450","cssVar":"--primitive-color-stone-450","type":"color","description":"Stone 450 — medium warm tone; dark-mode hover accent.","value":"#BC9D7E"},{"path":"primitive.color.stone.500","cssVar":"--primitive-color-stone-500","type":"color","description":"Stone 500 — mid warm tone; dark-mode rest accent.","value":"#A8896A"},{"path":"primitive.color.stone.600","cssVar":"--primitive-color-stone-600","type":"color","description":"Stone 600 — primary warm stone; light-mode rest accent and CTA surface.","value":"#8B6F47"},{"path":"primitive.color.stone.700","cssVar":"--primitive-color-stone-700","type":"color","description":"Stone 700 — darker warm stone; light-mode hover accent.","value":"#75593A"},{"path":"primitive.color.stone.800","cssVar":"--primitive-color-stone-800","type":"color","description":"Stone 800 — deep warm stone; light-mode pressed accent.","value":"#5C432A"},{"path":"primitive.color.stone.950","cssVar":"--primitive-color-stone-950","type":"color","description":"Stone 950 — near-black warm tone; dark-mode subtle accent surface.","value":"#3A2E1F"},{"path":"primitive.color.projectBrand.microsoftGameDev.100","cssVar":"--primitive-color-projectBrand-microsoftGameDev-100","type":"color","description":"Light support tone for the Microsoft Game Dev project brand.","value":"#E5E5FC"},{"path":"primitive.color.projectBrand.microsoftGameDev.500","cssVar":"--primitive-color-projectBrand-microsoftGameDev-500","type":"color","description":"Primary accent tone for the Microsoft Game Dev project brand.","value":"#6d31fb"},{"path":"primitive.color.projectBrand.microsoftGameDev.900","cssVar":"--primitive-color-projectBrand-microsoftGameDev-900","type":"color","description":"Dark support tone for the Microsoft Game Dev project brand.","value":"oklch(0.22 0.16 304)"},{"path":"primitive.space.0","cssVar":"--primitive-space-0","type":"dimension","value":"0px"},{"path":"primitive.space.1","cssVar":"--primitive-space-1","type":"dimension","value":"4px"},{"path":"primitive.space.2","cssVar":"--primitive-space-2","type":"dimension","value":"8px"},{"path":"primitive.space.3","cssVar":"--primitive-space-3","type":"dimension","value":"12px"},{"path":"primitive.space.4","cssVar":"--primitive-space-4","type":"dimension","value":"16px"},{"path":"primitive.space.5","cssVar":"--primitive-space-5","type":"dimension","value":"20px"},{"path":"primitive.space.6","cssVar":"--primitive-space-6","type":"dimension","value":"24px"},{"path":"primitive.space.7","cssVar":"--primitive-space-7","type":"dimension","value":"28px"},{"path":"primitive.space.8","cssVar":"--primitive-space-8","type":"dimension","value":"32px"},{"path":"primitive.space.10","cssVar":"--primitive-space-10","type":"dimension","value":"40px"},{"path":"primitive.space.12","cssVar":"--primitive-space-12","type":"dimension","value":"48px"},{"path":"primitive.space.16","cssVar":"--primitive-space-16","type":"dimension","value":"64px"},{"path":"primitive.space.20","cssVar":"--primitive-space-20","type":"dimension","value":"80px"},{"path":"primitive.space.24","cssVar":"--primitive-space-24","type":"dimension","value":"96px"},{"path":"primitive.space.32","cssVar":"--primitive-space-32","type":"dimension","value":"128px"},{"path":"primitive.space.px1","cssVar":"--primitive-space-px1","type":"dimension","value":"1px"},{"path":"primitive.space.px2","cssVar":"--primitive-space-px2","type":"dimension","value":"2px"},{"path":"primitive.space.px6","cssVar":"--primitive-space-px6","type":"dimension","value":"6px"},{"path":"primitive.space.px10","cssVar":"--primitive-space-px10","type":"dimension","value":"10px"},{"path":"primitive.blur.8","cssVar":"--primitive-blur-8","type":"dimension","description":"8px blur step.","value":"8px"},{"path":"primitive.blur.16","cssVar":"--primitive-blur-16","type":"dimension","description":"Fullscreen backdrop blur for portfolio lightbox overlays.","value":"16px"},{"path":"primitive.radius.0","cssVar":"--primitive-radius-0","type":"dimension","value":"0px"},{"path":"primitive.radius.2","cssVar":"--primitive-radius-2","type":"dimension","value":"2px"},{"path":"primitive.radius.4","cssVar":"--primitive-radius-4","type":"dimension","value":"4px"},{"path":"primitive.radius.8","cssVar":"--primitive-radius-8","type":"dimension","value":"8px"},{"path":"primitive.radius.12","cssVar":"--primitive-radius-12","type":"dimension","value":"12px"},{"path":"primitive.radius.full","cssVar":"--primitive-radius-full","type":"dimension","value":"9999px"},{"path":"primitive.typography.family.primary","cssVar":"--primitive-typography-family-primary","type":"fontFamily","description":"Self-hosted Plus Jakarta Sans (OFL) body typeface; falls back to system-ui sans-serif stack.","value":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif"},{"path":"primitive.typography.family.display","cssVar":"--primitive-typography-family-display","type":"fontFamily","description":"Display face: Plus Jakarta Sans Bold (OFL), bound to the display and title composites.","value":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif"},{"path":"primitive.typography.family.mono","cssVar":"--primitive-typography-family-mono","type":"fontFamily","description":"Monospace face: IBM Plex Mono. Falls back to Courier New, monospace.","value":"\\"IBM Plex Mono\\", \\"Courier New\\", monospace"},{"path":"primitive.typography.size.xs","cssVar":"--primitive-typography-size-xs","type":"dimension","description":"Tailwind 4 default text-xs (hds#283 ramp).","value":"12px"},{"path":"primitive.typography.size.sm","cssVar":"--primitive-typography-size-sm","type":"dimension","description":"Tailwind 4 default text-sm (hds#283 ramp).","value":"14px"},{"path":"primitive.typography.size.base","cssVar":"--primitive-typography-size-base","type":"dimension","description":"Tailwind 4 default text-base (hds#283 ramp).","value":"16px"},{"path":"primitive.typography.size.lg","cssVar":"--primitive-typography-size-lg","type":"dimension","description":"Tailwind 4 default text-lg (hds#283 ramp).","value":"18px"},{"path":"primitive.typography.size.xl","cssVar":"--primitive-typography-size-xl","type":"dimension","description":"Tailwind 4 default text-xl (hds#283 ramp).","value":"20px"},{"path":"primitive.typography.size.2xl","cssVar":"--primitive-typography-size-2xl","type":"dimension","description":"Tailwind 4 default text-2xl (hds#283 ramp).","value":"24px"},{"path":"primitive.typography.size.3xl","cssVar":"--primitive-typography-size-3xl","type":"dimension","description":"Tailwind 4 default text-3xl (hds#283 ramp).","value":"30px"},{"path":"primitive.typography.size.4xl","cssVar":"--primitive-typography-size-4xl","type":"dimension","description":"Tailwind 4 default text-4xl (hds#283 ramp).","value":"36px"},{"path":"primitive.typography.size.5xl","cssVar":"--primitive-typography-size-5xl","type":"dimension","description":"Tailwind 4 default text-5xl (hds#283 ramp).","value":"48px"},{"path":"primitive.typography.size.6xl","cssVar":"--primitive-typography-size-6xl","type":"dimension","description":"Swiss-canon display size (hds#283 ramp). Static desktop value; fluid in theme.css. Tailwind 4 default text-6xl.","value":"60px"},{"path":"primitive.typography.size.code","cssVar":"--primitive-typography-size-code","type":"dimension","description":"13px code size. The mono role (hds#485): one px below ui so code sits level with 14px prose.","value":"13px"},{"path":"primitive.typography.weight.regular","cssVar":"--primitive-typography-weight-regular","type":"fontWeight","value":"400"},{"path":"primitive.typography.weight.medium","cssVar":"--primitive-typography-weight-medium","type":"fontWeight","value":"500"},{"path":"primitive.typography.weight.bold","cssVar":"--primitive-typography-weight-bold","type":"fontWeight","value":"700"},{"path":"primitive.typography.lineHeight.compact","cssVar":"--primitive-typography-lineHeight-compact","type":"number","value":"0.95"},{"path":"primitive.typography.lineHeight.none","cssVar":"--primitive-typography-lineHeight-none","type":"number","value":"1"},{"path":"primitive.typography.lineHeight.tight","cssVar":"--primitive-typography-lineHeight-tight","type":"number","value":"1.25"},{"path":"primitive.typography.lineHeight.snug","cssVar":"--primitive-typography-lineHeight-snug","type":"number","description":"Swiss-canon snug rhythm (10t-5). Used by h2/h3 composites for tight-but-readable heading lines.","value":"1.375"},{"path":"primitive.typography.lineHeight.normal","cssVar":"--primitive-typography-lineHeight-normal","type":"number","value":"1.5"},{"path":"primitive.typography.lineHeight.relaxed","cssVar":"--primitive-typography-lineHeight-relaxed","type":"number","description":"Swiss-canon relaxed rhythm (10t-5). Used by body/small/mono composites for long-form prose comfort.","value":"1.625"},{"path":"primitive.typography.lineHeight.display","cssVar":"--primitive-typography-lineHeight-display","type":"number","description":"Display role leading (hds#485).","value":"1.05"},{"path":"primitive.typography.lineHeight.body","cssVar":"--primitive-typography-lineHeight-body","type":"number","description":"Body role leading (hds#485).","value":"1.6"},{"path":"primitive.typography.letterSpacing.tight","cssVar":"--primitive-typography-letterSpacing-tight","type":"dimension","value":"-0.01em"},{"path":"primitive.typography.letterSpacing.normal","cssVar":"--primitive-typography-letterSpacing-normal","type":"dimension","value":"0em"},{"path":"primitive.typography.letterSpacing.caps","cssVar":"--primitive-typography-letterSpacing-caps","type":"dimension","description":"All-caps tracking for eyebrow / kicker labels. Always pairs with text-transform: uppercase.","value":"0.06em"},{"path":"primitive.duration.instant","cssVar":"--primitive-duration-instant","type":"duration","description":"Fixed elapsed time interval in milliseconds.","value":"100ms"},{"path":"primitive.duration.short","cssVar":"--primitive-duration-short","type":"duration","description":"Fixed elapsed time interval in milliseconds.","value":"150ms"},{"path":"primitive.duration.medium","cssVar":"--primitive-duration-medium","type":"duration","description":"Fixed elapsed time interval in milliseconds.","value":"250ms"},{"path":"primitive.duration.long","cssVar":"--primitive-duration-long","type":"duration","description":"Fixed elapsed time interval in milliseconds.","value":"400ms"},{"path":"primitive.easing.emphasized","cssVar":"--primitive-easing-emphasized","type":"cubicBezier","description":"Cubic bezier with balanced input and output tangents.","value":"cubic-bezier(0.4, 0, 0.2, 1)"},{"path":"primitive.easing.decelerate","cssVar":"--primitive-easing-decelerate","type":"cubicBezier","description":"Cubic bezier with steep initial gain and constrained tail velocity.","value":"cubic-bezier(0, 0, 0.2, 1)"},{"path":"primitive.easing.accelerate","cssVar":"--primitive-easing-accelerate","type":"cubicBezier","description":"Cubic bezier with restrained initial gain and steep terminal velocity.","value":"cubic-bezier(0.4, 0, 1, 1)"},{"path":"primitive.easing.elastic","cssVar":"--primitive-easing-elastic","type":"spring","description":"Spring response defined by stiffness, damping, and mass parameters.","value":"spring(300, 20, 1)"},{"path":"primitive.shadow.color","cssVar":"--primitive-shadow-color","type":"color","description":"HSL channels for shadow-color alpha compositing. Light: cool neutral; dark: black.","value":"220 13% 18%","dark":{"alias":"0 0% 0%","resolvedValue":"0 0% 0%"}},{"path":"primitive.breakpoint.xs","cssVar":"--primitive-breakpoint-xs","type":"dimension","value":"375px"},{"path":"primitive.breakpoint.sm","cssVar":"--primitive-breakpoint-sm","type":"dimension","value":"640px"},{"path":"primitive.breakpoint.md","cssVar":"--primitive-breakpoint-md","type":"dimension","value":"768px"},{"path":"primitive.breakpoint.lg","cssVar":"--primitive-breakpoint-lg","type":"dimension","value":"1024px"},{"path":"primitive.breakpoint.xl","cssVar":"--primitive-breakpoint-xl","type":"dimension","value":"1280px"},{"path":"primitive.size.8","cssVar":"--primitive-size-8","type":"dimension","description":"8px size step.","value":"8px"},{"path":"primitive.size.10","cssVar":"--primitive-size-10","type":"dimension","description":"10px size step.","value":"10px"},{"path":"primitive.size.12","cssVar":"--primitive-size-12","type":"dimension","description":"12px size step.","value":"12px"},{"path":"primitive.size.16","cssVar":"--primitive-size-16","type":"dimension","description":"16px size step.","value":"16px"},{"path":"primitive.size.20","cssVar":"--primitive-size-20","type":"dimension","description":"20px size step.","value":"20px"},{"path":"primitive.size.24","cssVar":"--primitive-size-24","type":"dimension","description":"24px size step.","value":"24px"},{"path":"primitive.size.32","cssVar":"--primitive-size-32","type":"dimension","description":"32px size step.","value":"32px"},{"path":"primitive.size.40","cssVar":"--primitive-size-40","type":"dimension","description":"40px size step.","value":"40px"},{"path":"primitive.size.48","cssVar":"--primitive-size-48","type":"dimension","description":"48px size step.","value":"48px"},{"path":"primitive.size.64","cssVar":"--primitive-size-64","type":"dimension","description":"64px size step.","value":"64px"},{"path":"primitive.size.80","cssVar":"--primitive-size-80","type":"dimension","description":"80px size step.","value":"80px"},{"path":"primitive.size.96","cssVar":"--primitive-size-96","type":"dimension","description":"96px size step.","value":"96px"},{"path":"primitive.size.120","cssVar":"--primitive-size-120","type":"dimension","description":"120px size step. Backs semantic.size.tile.","value":"120px"},{"path":"primitive.size.interactive.min","cssVar":"--primitive-size-interactive-min","type":"dimension","description":"Minimum interactive hit target size.","value":"44px"},{"path":"primitive.size.interactive.minCompact","cssVar":"--primitive-size-interactive-minCompact","type":"dimension","description":"Compact inline control target minimum, e.g. a chip's remove button: WCAG 2.2 AA (2.5.8), not the 44px AAA floor (2.5.5).","value":"24px"},{"path":"primitive.size.width.96","cssVar":"--primitive-size-width-96","type":"dimension","description":"96px width step.","value":"96px"},{"path":"primitive.size.width.280","cssVar":"--primitive-size-width-280","type":"dimension","description":"Docs-shell rail width (hds#280): our own number, not HeroUI's 268px; fits the longest top-level nav label with room.","value":"280px"},{"path":"primitive.size.width.760","cssVar":"--primitive-size-width-760","type":"dimension","value":"760px"},{"path":"primitive.size.width.1200","cssVar":"--primitive-size-width-1200","type":"dimension","value":"1200px"},{"path":"primitive.size.width.50ch","cssVar":"--primitive-size-width-50ch","type":"dimension","value":"50ch"},{"path":"primitive.grid.columns.1","cssVar":"--primitive-grid-columns-1","type":"number","value":"1"},{"path":"primitive.grid.columns.2","cssVar":"--primitive-grid-columns-2","type":"number","value":"2"},{"path":"primitive.grid.columns.3","cssVar":"--primitive-grid-columns-3","type":"number","value":"3"},{"path":"primitive.zIndex.0","cssVar":"--primitive-zIndex-0","type":"number","value":"0"},{"path":"primitive.zIndex.10","cssVar":"--primitive-zIndex-10","type":"number","value":"10"},{"path":"primitive.zIndex.100","cssVar":"--primitive-zIndex-100","type":"number","value":"100"},{"path":"primitive.zIndex.1000","cssVar":"--primitive-zIndex-1000","type":"number","value":"1000"},{"path":"primitive.borderWidth.xs","cssVar":"--primitive-borderWidth-xs","type":"dimension","value":"1px"},{"path":"primitive.borderWidth.sm","cssVar":"--primitive-borderWidth-sm","type":"dimension","value":"2px"},{"path":"primitive.borderWidth.md","cssVar":"--primitive-borderWidth-md","type":"dimension","value":"4px"}],"semantic":[{"path":"semantic.motion.productive","cssVar":"--hds-motion-productive","type":"motion","description":"For micro-interactions and status changes. No deformation.","composite":{"duration":"150ms","easing":"cubic-bezier(0, 0, 0.2, 1)"}},{"path":"semantic.motion.expressive","cssVar":"--hds-motion-expressive","type":"motion","description":"For teaching moments and significant UI entries. Includes physics-based squish.","composite":{"duration":"250ms","easing":"spring(300, 20, 1)"}},{"path":"semantic.motion.spatial","cssVar":"--hds-motion-spatial","type":"motion","description":"For elements traveling long distances across the viewport.","composite":{"duration":"400ms","easing":"cubic-bezier(0.4, 0, 0.2, 1)"}},{"path":"semantic.motion.exit","cssVar":"--hds-motion-exit","type":"motion","description":"For elements being removed from the DOM.","composite":{"duration":"100ms","easing":"cubic-bezier(0.4, 0, 1, 1)"}},{"path":"semantic.motion.distance","cssVar":"--semantic-motion-distance","type":"dimension","description":"Scroll-reveal translateY travel distance. Equals semantic.space.scale.md today, but names motion travel, not a spacing tier (hds#242).","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.color.surface.page","cssVar":"--semantic-color-surface-page","type":"color","description":"Main page background","alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff","dark":{"alias":"{primitive.color.neutral.black}","resolvedValue":"#000000"}},{"path":"semantic.color.surface.raised","cssVar":"--semantic-color-surface-raised","type":"color","description":"Subtle elevated surface (cards, sections)","alias":"{primitive.color.neutral.50}","resolvedValue":"#fafafa","dark":{"alias":"{primitive.color.neutral.950}","resolvedValue":"#0a0a0a"}},{"path":"semantic.color.surface.overlay","cssVar":"--semantic-color-surface-overlay","type":"color","description":"Deeper surface layer","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.850}","resolvedValue":"#1a1a1a"}},{"path":"semantic.color.surface.scrim","cssVar":"--semantic-color-surface-scrim","type":"color","description":"Opaque modal backdrop, near-black in both themes. Apply alpha in the class (bg-scrim/60), not here.","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.black}","resolvedValue":"#000000"}},{"path":"semantic.color.surface.inverse","cssVar":"--semantic-color-surface-inverse","type":"color","description":"Inverted background for contrast sections","alias":"{primitive.color.neutral.black}","resolvedValue":"#000000","dark":{"alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff"}},{"path":"semantic.color.surface.accent","cssVar":"--semantic-color-surface-accent","type":"color","description":"Accent fill, warm graphite. Dark in light mode, light warm-grey in dark mode; pair with content.onAccent.","alias":"{primitive.color.graphite.700}","resolvedValue":"#433a3f","dark":{"alias":"{primitive.color.graphite.200}","resolvedValue":"#d4d0d2"}},{"path":"semantic.color.surface.accentSubtle","cssVar":"--semantic-color-surface-accentSubtle","type":"color","description":"Faint accent tint for hover states or highlights.","alias":"{primitive.color.graphite.50}","resolvedValue":"#f5f4f4","dark":{"alias":"{primitive.color.graphite.800}","resolvedValue":"#352e32"}},{"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"}},{"path":"semantic.color.content.primary","cssVar":"--semantic-color-content-primary","type":"color","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.color.content.secondary","cssVar":"--semantic-color-content-secondary","type":"color","alias":"{primitive.color.neutral.600}","resolvedValue":"#525252","dark":{"alias":"{primitive.color.neutral.400}","resolvedValue":"#a3a3a3"}},{"path":"semantic.color.content.disabled","cssVar":"--semantic-color-content-disabled","type":"color","alias":"{primitive.color.neutral.300}","resolvedValue":"#d4d4d4","dark":{"alias":"{primitive.color.neutral.600}","resolvedValue":"#525252"}},{"path":"semantic.color.content.inverse","cssVar":"--semantic-color-content-inverse","type":"color","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.900}","resolvedValue":"#111111"}},{"path":"semantic.color.content.accent","cssVar":"--semantic-color-content-accent","type":"color","description":"Accent-intent text/icon color — graphite, legible on page and card surfaces. Pair with underline/weight for link affordance.","alias":"{primitive.color.graphite.700}","resolvedValue":"#433a3f","dark":{"alias":"{primitive.color.graphite.300}","resolvedValue":"#b2abae"}},{"path":"semantic.color.content.onAccent","cssVar":"--semantic-color-content-onAccent","type":"color","description":"Text and icons on accent fills: near-white in light mode, dark graphite in dark mode.","alias":"{primitive.color.neutral.50}","resolvedValue":"#fafafa","dark":{"alias":"{primitive.color.graphite.900}","resolvedValue":"#2a2428"}},{"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"}},{"path":"semantic.color.border.default","cssVar":"--semantic-color-border-default","type":"color","alias":"{primitive.color.neutral.200}","resolvedValue":"#e5e5e5","dark":{"alias":"{primitive.color.neutral.700}","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","type":"color","alias":"{primitive.color.neutral.200}","resolvedValue":"#e5e5e5","dark":{"alias":"{primitive.color.neutral.800}","resolvedValue":"#262626"}},{"path":"semantic.color.border.subtle","cssVar":"--semantic-color-border-subtle","type":"color","description":"Lowest-contrast border for resting hairline edges on flat surfaces.","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.850}","resolvedValue":"#1a1a1a"}},{"path":"semantic.color.border.strong","cssVar":"--semantic-color-border-strong","type":"color","alias":"{primitive.color.neutral.300}","resolvedValue":"#d4d4d4","dark":{"alias":"{primitive.color.neutral.600}","resolvedValue":"#525252"}},{"path":"semantic.color.border.accent","cssVar":"--semantic-color-border-accent","type":"color","description":"Accent border — graphite, dark enough to read as a boundary on page and card surfaces.","alias":"{primitive.color.graphite.700}","resolvedValue":"#433a3f","dark":{"alias":"{primitive.color.graphite.300}","resolvedValue":"#b2abae"}},{"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.amber.400}","resolvedValue":"#fbbf24"}},{"path":"semantic.color.feedback.error","cssVar":"--semantic-color-feedback-error","type":"color","alias":"{primitive.color.red.700}","resolvedValue":"#b91c1c","dark":{"alias":"{primitive.color.red.400}","resolvedValue":"#f87171"}},{"path":"semantic.color.feedback.success","cssVar":"--semantic-color-feedback-success","type":"color","alias":"{primitive.color.green.700}","resolvedValue":"#047857","dark":{"alias":"{primitive.color.green.400}","resolvedValue":"#34d399"}},{"path":"semantic.color.feedback.warning","cssVar":"--semantic-color-feedback-warning","type":"color","alias":"{primitive.color.amber.800}","resolvedValue":"#92400e","dark":{"alias":"{primitive.color.amber.400}","resolvedValue":"#fbbf24"}},{"path":"semantic.color.feedback.info","cssVar":"--semantic-color-feedback-info","type":"color","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.300}","resolvedValue":"oklch(0.70 0.2903 266.54)"}},{"path":"semantic.color.feedback.inProgress","cssVar":"--semantic-color-feedback-inProgress","type":"color","alias":"{primitive.color.violet.700}","resolvedValue":"#6d28d9","dark":{"alias":"{primitive.color.violet.400}","resolvedValue":"#a78bfa"}},{"path":"semantic.color.feedback.bg.error","cssVar":"--semantic-color-feedback-bg-error","type":"color","alias":"{primitive.color.red.50}","resolvedValue":"#fef2f2","dark":{"alias":"{primitive.color.red.950}","resolvedValue":"#450a0a"}},{"path":"semantic.color.feedback.bg.success","cssVar":"--semantic-color-feedback-bg-success","type":"color","alias":"{primitive.color.green.50}","resolvedValue":"#ecfdf5","dark":{"alias":"{primitive.color.green.950}","resolvedValue":"#022c22"}},{"path":"semantic.color.feedback.bg.warning","cssVar":"--semantic-color-feedback-bg-warning","type":"color","alias":"{primitive.color.amber.50}","resolvedValue":"#fffbeb","dark":{"alias":"{primitive.color.amber.950}","resolvedValue":"#451a03"}},{"path":"semantic.color.feedback.bg.info","cssVar":"--semantic-color-feedback-bg-info","type":"color","alias":"{primitive.color.blue.50}","resolvedValue":"oklch(0.96 0.03 266.54)","dark":{"alias":"{primitive.color.blue.900}","resolvedValue":"oklch(0.22 0.05 266.54)"}},{"path":"semantic.color.feedback.bg.inProgress","cssVar":"--semantic-color-feedback-bg-inProgress","type":"color","alias":"{primitive.color.violet.50}","resolvedValue":"#f5f3ff","dark":{"alias":"{primitive.color.violet.950}","resolvedValue":"#2e1065"}},{"path":"semantic.color.state.pressed.overlay","cssVar":"--semantic-color-state-pressed-overlay","type":"color","description":"Opaque pressed wash over a control's own fill: black in light, white in dark. Alpha in the class (inset-shadow-pressed-overlay/5).","alias":"{primitive.color.neutral.black}","resolvedValue":"#000000","dark":{"alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff"}},{"path":"semantic.space.scale.xs","cssVar":"--semantic-space-scale-xs","type":"dimension","description":"8px — smallest step. Same value as component.gap (deprecated alias).","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"semantic.space.scale.sm","cssVar":"--semantic-space-scale-sm","type":"dimension","description":"16px — same value as layout.tight (deprecated alias).","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"semantic.space.scale.md","cssVar":"--semantic-space-scale-md","type":"dimension","description":"24px. Default of the overridable roles surface.padding and region.gutter. The deprecated layout.normal has the same value.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.space.scale.lg","cssVar":"--semantic-space-scale-lg","type":"dimension","description":"32px — same value as layout.inset (deprecated alias).","alias":"{primitive.space.8}","resolvedValue":"32px"},{"path":"semantic.space.scale.xl","cssVar":"--semantic-space-scale-xl","type":"dimension","description":"48px — same value as layout.spacious (deprecated alias).","alias":"{primitive.space.12}","resolvedValue":"48px"},{"path":"semantic.space.surface.padding","cssVar":"--semantic-space-surface-padding","type":"dimension","description":"24px (scale.md) inset for cards, forms and panels. Tenants override it per brand and density. Replaces component.padding.","alias":"{semantic.space.scale.md}","resolvedValue":"24px"},{"path":"semantic.space.region.gutter","cssVar":"--semantic-space-region-gutter","type":"dimension","description":"24px (scale.md) column and region gutters; theme.css sets scale.lg (32px), and scale.sm (16px) below 640px. Replaces layout.gutter.","alias":"{semantic.space.scale.md}","resolvedValue":"24px"},{"path":"semantic.space.subgrid.hairline","cssVar":"--semantic-space-subgrid-hairline","type":"dimension","description":"1px border offset and hairline spacing.","alias":"{primitive.space.px1}","resolvedValue":"1px"},{"path":"semantic.space.subgrid.xs","cssVar":"--semantic-space-subgrid-xs","type":"dimension","description":"2px vertical rhythm nudge and baseline adjustment.","alias":"{primitive.space.px2}","resolvedValue":"2px"},{"path":"semantic.space.subgrid.gap","cssVar":"--semantic-space-subgrid-gap","type":"dimension","description":"4px cap-height and inline cluster spacing.","alias":"{primitive.space.1}","resolvedValue":"4px"},{"path":"semantic.space.component.gap","cssVar":"--semantic-space-component-gap","type":"dimension","description":"8px label↔input rhythm and closely coupled control spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.xs; kept live, no removal yet.","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"semantic.space.component.medium","cssVar":"--semantic-space-component-medium","type":"dimension","description":"12px adjacent form fields and medium intra-component gaps.","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"semantic.space.component.padding","cssVar":"--semantic-space-component-padding","type":"dimension","description":"24px inset for cards, forms and panels. DEPRECATED alias (hds#206) — use semantic.space.surface.padding; kept live, no removal yet.","alias":"{semantic.space.surface.padding}","resolvedValue":"24px"},{"path":"semantic.space.layout.tight","cssVar":"--semantic-space-layout-tight","type":"dimension","description":"16px default HdsStack gap and inter-component spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.sm; kept live, no removal yet.","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"semantic.space.layout.normal","cssVar":"--semantic-space-layout-normal","type":"dimension","description":"24px column gutters and sidebar gutter spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.md; kept live, no removal yet.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.space.layout.gutter","cssVar":"--semantic-space-layout-gutter","type":"dimension","description":"24px column and region gutters. DEPRECATED alias (hds#206) — use semantic.space.region.gutter (responsive in theme.css); kept live, no removal yet.","alias":"{semantic.space.region.gutter}","resolvedValue":"24px"},{"path":"semantic.space.layout.inset","cssVar":"--semantic-space-layout-inset","type":"dimension","description":"32px major block separation and inset inter-component gaps. DEPRECATED alias (hds#206) — use semantic.space.scale.lg; kept live, no removal yet.","alias":"{primitive.space.8}","resolvedValue":"32px"},{"path":"semantic.space.layout.spacious","cssVar":"--semantic-space-layout-spacious","type":"dimension","description":"48px break between major content blocks. DEPRECATED alias (hds#206) — use semantic.space.scale.xl; kept live, no removal yet.","alias":"{primitive.space.12}","resolvedValue":"48px"},{"path":"semantic.space.section.stack","cssVar":"--semantic-space-section-stack","type":"dimension","description":"80px vertical rhythm between page sections and major editorial blocks.","alias":"{primitive.space.20}","resolvedValue":"80px"},{"path":"semantic.space.section.inset","cssVar":"--semantic-space-section-inset","type":"dimension","description":"96px hero and landing-page inset padding.","alias":"{primitive.space.24}","resolvedValue":"96px"},{"path":"semantic.space.section.heroMax","cssVar":"--semantic-space-section-heroMax","type":"dimension","description":"128px maximum hero region padding for extra-large displays.","alias":"{primitive.space.32}","resolvedValue":"128px"},{"path":"semantic.space.sidebar.indent","cssVar":"--semantic-space-sidebar-indent","type":"dimension","description":"12px indent level for nested sidebar and TOC groups.","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"semantic.space.sidebar.gap","cssVar":"--semantic-space-sidebar-gap","type":"dimension","description":"16px vertical spacing between items in sidebar and TOC stacks.","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"semantic.space.sidebar.sectionGap","cssVar":"--semantic-space-sidebar-sectionGap","type":"dimension","description":"12px spacing between sidebar sections and grouped rail blocks.","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"semantic.space.sidebar.railPadding","cssVar":"--semantic-space-sidebar-railPadding","type":"dimension","description":"20px outer padding for sidebar and TOC rails.","alias":"{primitive.space.5}","resolvedValue":"20px"},{"path":"semantic.space.sidebar.railWidth","cssVar":"--semantic-space-sidebar-railWidth","type":"dimension","description":"Docs-shell nav and TOC rail width (hds#280), one token for both rails; 0 below their breakpoint (see HdsDocsShell).","alias":"{primitive.size.width.280}","resolvedValue":"280px"},{"path":"semantic.layout.width.content","cssVar":"--semantic-layout-width-content","type":"dimension","description":"Max width for prose/content (760px). Use with HdsContainer for centered text blocks.","alias":"{primitive.size.width.760}","resolvedValue":"760px"},{"path":"semantic.layout.width.max","cssVar":"--semantic-layout-width-max","type":"dimension","description":"Max width for full-layout containers (1200px). Use with HdsContainer for page layouts.","alias":"{primitive.size.width.1200}","resolvedValue":"1200px"},{"path":"semantic.layout.container.maxWidth","cssVar":"--semantic-layout-container-maxWidth","type":"dimension","alias":"{primitive.size.width.1200}","resolvedValue":"1200px"},{"path":"semantic.layout.content.maxWidth","cssVar":"--semantic-layout-content-maxWidth","type":"dimension","alias":"{primitive.size.width.760}","resolvedValue":"760px"},{"path":"semantic.layout.prose.maxWidth","cssVar":"--semantic-layout-prose-maxWidth","type":"dimension","alias":"{primitive.size.width.50ch}","resolvedValue":"50ch"},{"path":"semantic.layout.section.paddingY","cssVar":"--semantic-layout-section-paddingY","type":"dimension","alias":"{primitive.space.20}","resolvedValue":"80px"},{"path":"semantic.layout.grid.gap","cssVar":"--semantic-layout-grid-gap","type":"dimension","alias":"{primitive.space.8}","resolvedValue":"32px"},{"path":"semantic.layout.grid.columns.mobile","cssVar":"--semantic-layout-grid-columns-mobile","type":"number","alias":"{primitive.grid.columns.1}","resolvedValue":"1"},{"path":"semantic.layout.grid.columns.tablet","cssVar":"--semantic-layout-grid-columns-tablet","type":"number","alias":"{primitive.grid.columns.2}","resolvedValue":"2"},{"path":"semantic.layout.grid.columns.desktop","cssVar":"--semantic-layout-grid-columns-desktop","type":"number","alias":"{primitive.grid.columns.3}","resolvedValue":"3"},{"path":"semantic.typography.display","cssVar":"--semantic-typography-display","type":"typography","description":"One per page, hero only. 48px / 1.05 / 700. Role 1 of 6.","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"48px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.05"}},{"path":"semantic.typography.title","cssVar":"--semantic-typography-title","type":"typography","description":"Section and card headings. 24px / 1.25 / 700. Role 2 of 6.","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"24px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.25"}},{"path":"semantic.typography.body","cssVar":"--semantic-typography-body","type":"typography","description":"Prose. 16px / 1.6 / 400, 60ch measure. Role 3 of 6.","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"16px","fontWeight":"400","letterSpacing":"0em","lineHeight":"1.6","maxWidth":"60ch"}},{"path":"semantic.typography.ui","cssVar":"--semantic-typography-ui","type":"typography","description":"Controls, nav, table text, values. 14px / 1.5 / 500. Role 4 of 6.","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"14px","fontWeight":"500","letterSpacing":"0em","lineHeight":"1.5","maxWidth":"60ch"}},{"path":"semantic.typography.caption","cssVar":"--semantic-typography-caption","type":"typography","description":"Metadata, help text and labels, in sentence case. 12px / 1.5 / 500. Role 5 of 6.","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"12px","fontWeight":"500","letterSpacing":"0em","lineHeight":"1.5"}},{"path":"semantic.typography.mono","cssVar":"--semantic-typography-mono","type":"typography","description":"Code and ids. 13px / 1.5 / 400. The mono companion, role 6 of 6.","composite":{"fontFamily":"\\"IBM Plex Mono\\", \\"Courier New\\", monospace","fontSize":"13px","fontWeight":"400","letterSpacing":"0em","lineHeight":"1.5","maxWidth":"60ch"}},{"path":"semantic.typography.h1","cssVar":"--semantic-typography-h1","type":"typography","description":"deprecated: use semantic.typography.title","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"24px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.25"}},{"path":"semantic.typography.h2","cssVar":"--semantic-typography-h2","type":"typography","description":"deprecated: use semantic.typography.title","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"24px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.25"}},{"path":"semantic.typography.h3","cssVar":"--semantic-typography-h3","type":"typography","description":"deprecated: use semantic.typography.title","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"24px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.25"}},{"path":"semantic.typography.eyebrow","cssVar":"--semantic-typography-eyebrow","type":"typography","description":"deprecated: use semantic.typography.caption","composite":{"fontFamily":"\\"Plus Jakarta Sans\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"12px","fontWeight":"500","letterSpacing":"0em","lineHeight":"1.5"}},{"path":"semantic.typography.lineHeight.none","cssVar":"--semantic-typography-lineHeight-none","type":"number","description":"Semantic alias for leading-none (1). Display text and badge spans.","alias":"{primitive.typography.lineHeight.none}","resolvedValue":"1"},{"path":"semantic.docs.space.section","cssVar":"--semantic-docs-space-section","type":"dimension","description":"48px between H2 sections — generous section break for doc pages.","alias":"{primitive.space.12}","resolvedValue":"48px"},{"path":"semantic.docs.space.paragraph","cssVar":"--semantic-docs-space-paragraph","type":"dimension","description":"24px between paragraphs — comfortable prose rhythm for long-form doc content.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.docs.space.inline","cssVar":"--semantic-docs-space-inline","type":"dimension","description":"8px inline cluster spacing — gap between metadata badges, inline icons, doc-page chips.","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"semantic.accent.rest","cssVar":"--semantic-accent-rest","type":"color","description":"Default accent fill for interactive elements at rest — warm graphite. Inverts per theme; pair with content.onAccent.","alias":"{primitive.color.graphite.700}","resolvedValue":"#433a3f","dark":{"alias":"{primitive.color.graphite.200}","resolvedValue":"#d4d0d2"}},{"path":"semantic.accent.hover","cssVar":"--semantic-accent-hover","type":"color","description":"Accent fill on pointer hover.","alias":"{primitive.color.graphite.800}","resolvedValue":"#352e32","dark":{"alias":"{primitive.color.graphite.300}","resolvedValue":"#b2abae"}},{"path":"semantic.accent.pressed","cssVar":"--semantic-accent-pressed","type":"color","description":"Accent fill during active press.","alias":"{primitive.color.graphite.900}","resolvedValue":"#2a2428","dark":{"alias":"{primitive.color.graphite.400}","resolvedValue":"#8b8488"}},{"path":"semantic.accent.inactive","cssVar":"--semantic-accent-inactive","type":"color","description":"Accent fill for inactive or unselected accent elements.","alias":"{primitive.color.neutral.400}","resolvedValue":"#a3a3a3","dark":{"alias":"{primitive.color.neutral.600}","resolvedValue":"#525252"}},{"path":"semantic.accent.disabled","cssVar":"--semantic-accent-disabled","type":"color","description":"Accent fill for disabled accent elements.","alias":"{primitive.color.neutral.300}","resolvedValue":"#d4d4d4","dark":{"alias":"{primitive.color.neutral.700}","resolvedValue":"#404040"}},{"path":"semantic.accent.content","cssVar":"--semantic-accent-content","type":"color","description":"Accent-intent text/icon color on neutral surfaces (graphite) — pair with underline/weight for link affordance.","alias":"{primitive.color.graphite.700}","resolvedValue":"#433a3f","dark":{"alias":"{primitive.color.graphite.300}","resolvedValue":"#b2abae"}},{"path":"semantic.accent.contentHover","cssVar":"--semantic-accent-contentHover","type":"color","description":"Accent content color on pointer hover.","alias":"{primitive.color.graphite.800}","resolvedValue":"#352e32","dark":{"alias":"{primitive.color.graphite.200}","resolvedValue":"#d4d0d2"}},{"path":"semantic.accent.subtle","cssVar":"--semantic-accent-subtle","type":"color","description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","alias":"{primitive.color.graphite.50}","resolvedValue":"#f5f4f4","dark":{"alias":"{primitive.color.graphite.800}","resolvedValue":"#352e32"}},{"path":"semantic.radius.action","cssVar":"--semantic-radius-action","type":"dimension","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.radius.control","cssVar":"--semantic-radius-control","type":"dimension","description":"Corner radius for small control glyphs such as the checkbox box: not fully round, and distinct from semantic.radius.action (hds#242).","alias":"{primitive.radius.4}","resolvedValue":"4px"},{"path":"semantic.borderWidth.default","cssVar":"--semantic-borderWidth-default","type":"dimension","description":"Default hairline border weight for surfaces and inputs.","alias":"{primitive.borderWidth.xs}","resolvedValue":"1px"},{"path":"semantic.borderWidth.emphasis","cssVar":"--semantic-borderWidth-emphasis","type":"dimension","description":"Stronger border weight for focus rings and active indicators.","alias":"{primitive.borderWidth.sm}","resolvedValue":"2px"},{"path":"semantic.shadow.subtle","cssVar":"--semantic-shadow-subtle","type":"shadow","description":"Resting elevation shadow for raised surfaces (cards, inline panels).","value":"0 1px 2px hsl(var(--primitive-shadow-color) / 0.04), 0 1px 1px hsl(var(--primitive-shadow-color) / 0.06)"},{"path":"semantic.shadow.floating","cssVar":"--semantic-shadow-floating","type":"shadow","description":"Hover/floating elevation for menus, popovers, and tooltips.","value":"0 4px 6px hsl(var(--primitive-shadow-color) / 0.05), 0 10px 15px hsl(var(--primitive-shadow-color) / 0.08)"},{"path":"semantic.shadow.overlay","cssVar":"--semantic-shadow-overlay","type":"shadow","description":"Modal/dialog elevation for full-screen overlays.","value":"0 10px 15px hsl(var(--primitive-shadow-color) / 0.08), 0 25px 50px hsl(var(--primitive-shadow-color) / 0.12)"},{"path":"semantic.elevation.flat","cssVar":"--semantic-elevation-flat","type":"elevation","description":"Flat surface (no shadow, hairline border) for embedded panels.","composite":{"surface":{"alias":"{semantic.color.surface.page}","resolvedValue":"#ffffff"},"shadow":null,"border":{"alias":"{semantic.color.border.subtle}","resolvedValue":"#f5f5f5"}}},{"path":"semantic.elevation.raised","cssVar":"--semantic-elevation-raised","type":"elevation","description":"Resting card / panel elevation.","composite":{"surface":{"alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},"shadow":{"alias":"{semantic.shadow.subtle}","resolvedValue":"0 1px 2px hsl(var(--primitive-shadow-color) / 0.04), 0 1px 1px hsl(var(--primitive-shadow-color) / 0.06)"},"border":null}},{"path":"semantic.elevation.floating","cssVar":"--semantic-elevation-floating","type":"elevation","description":"Hover, menu, and popover elevation.","composite":{"surface":{"alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},"shadow":{"alias":"{semantic.shadow.floating}","resolvedValue":"0 4px 6px hsl(var(--primitive-shadow-color) / 0.05), 0 10px 15px hsl(var(--primitive-shadow-color) / 0.08)"},"border":null}},{"path":"semantic.elevation.overlay","cssVar":"--semantic-elevation-overlay","type":"elevation","description":"Modal, dialog, and drawer elevation.","composite":{"surface":{"alias":"{semantic.color.surface.overlay}","resolvedValue":"#f5f5f5"},"shadow":{"alias":"{semantic.shadow.overlay}","resolvedValue":"0 10px 15px hsl(var(--primitive-shadow-color) / 0.08), 0 25px 50px hsl(var(--primitive-shadow-color) / 0.12)"},"border":null}},{"path":"semantic.size.control.sm","cssVar":"--semantic-size-control-sm","type":"dimension","description":"Small control element — radio dot, slider fill bar height.","alias":"{primitive.size.8}","resolvedValue":"8px"},{"path":"semantic.size.control.md","cssVar":"--semantic-size-control-md","type":"dimension","description":"Medium control element — checkbox glyph box, slider track wrapper height.","alias":"{primitive.size.20}","resolvedValue":"20px"},{"path":"semantic.size.control.lg","cssVar":"--semantic-size-control-lg","type":"dimension","description":"Large control footprint — code-block inline-wrapper min-height / copy-button-matched pre padding.","alias":"{primitive.size.32}","resolvedValue":"32px"},{"path":"semantic.size.icon.sm","cssVar":"--semantic-size-icon-sm","type":"dimension","description":"Small icon box — matches --hds-icon-small.","alias":"{primitive.size.16}","resolvedValue":"16px"},{"path":"semantic.size.icon.md","cssVar":"--semantic-size-icon-md","type":"dimension","description":"Medium icon box — matches --hds-icon-medium.","alias":"{primitive.size.20}","resolvedValue":"20px"},{"path":"semantic.size.icon.lg","cssVar":"--semantic-size-icon-lg","type":"dimension","description":"Large icon box — matches --hds-icon-large.","alias":"{primitive.size.24}","resolvedValue":"24px"},{"path":"semantic.size.avatar","cssVar":"--semantic-size-avatar","type":"dimension","description":"Avatar size (width and height) for activity feeds and identity glyphs. Same pixels as row.compact today, a separate role (hds#242).","alias":"{primitive.size.40}","resolvedValue":"40px"},{"path":"semantic.size.tile","cssVar":"--semantic-size-tile","type":"dimension","description":"Minimum height of a metric tile, one height for every tile so rows line up (hds#403).","alias":"{primitive.size.120}","resolvedValue":"120px"},{"path":"semantic.size.row.compact","cssVar":"--semantic-size-row-compact","type":"dimension","description":"Compact-density row minimum height.","alias":"{primitive.size.40}","resolvedValue":"40px"},{"path":"semantic.size.row.comfortable","cssVar":"--semantic-size-row-comfortable","type":"dimension","description":"Comfortable-density row minimum height.","alias":"{primitive.size.48}","resolvedValue":"48px"},{"path":"semantic.zIndex.control","cssVar":"--semantic-zIndex-control","type":"number","description":"Raises an interactive control (e.g. a native range input) above its visual decoration for hit-testing.","alias":"{primitive.zIndex.10}","resolvedValue":"10"},{"path":"semantic.zIndex.sticky","cssVar":"--semantic-zIndex-sticky","type":"number","description":"Sticky-positioned elements, such as a table header row.","alias":"{primitive.zIndex.100}","resolvedValue":"100"}],"component":[{"path":"component.nav.bg","cssVar":"--component-nav-bg","type":"color","description":"Nav bar background fill.","alias":"{semantic.color.surface.page}","resolvedValue":"#ffffff"},{"path":"component.nav.bgActive","cssVar":"--component-nav-bgActive","type":"color","description":"Nav item background fill when active or selected.","alias":"{semantic.accent.subtle}","resolvedValue":"#f5f4f4"},{"path":"component.nav.borderActive","cssVar":"--component-nav-borderActive","type":"color","description":"Nav item border color when active or selected.","alias":"{semantic.color.surface.accent}","resolvedValue":"#433a3f"},{"path":"component.nav.text","cssVar":"--component-nav-text","type":"color","description":"Nav item text color at rest.","alias":"{semantic.color.content.secondary}","resolvedValue":"#525252"},{"path":"component.nav.textActive","cssVar":"--component-nav-textActive","type":"color","description":"Nav item text color when active or selected.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"component.nav.height","cssVar":"--component-nav-height","type":"dimension","description":"Nav bar height.","alias":"{primitive.space.16}","resolvedValue":"64px"},{"path":"component.nav.paddingX","cssVar":"--component-nav-paddingX","type":"dimension","description":"Horizontal padding inside nav items.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"component.nav.paddingY","cssVar":"--component-nav-paddingY","type":"dimension","description":"Vertical padding inside nav items.","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.tag.background","cssVar":"--component-tag-background","type":"color","description":"Unselected tag surface color (matches the rendered pill; the active fill is activeBackground).","alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},{"path":"component.tag.text","cssVar":"--component-tag-text","type":"color","description":"Unselected tag text color (the active label uses activeText).","alias":"{semantic.color.content.secondary}","resolvedValue":"#525252"},{"path":"component.tag.border","cssVar":"--component-tag-border","type":"color","description":"Default tag border color.","alias":"{semantic.color.border.default}","resolvedValue":"#e5e5e5"},{"path":"component.tag.radius","cssVar":"--component-tag-radius","type":"dimension","description":"Pill radius for the tag surface.","alias":"{primitive.radius.full}","resolvedValue":"9999px"},{"path":"component.tag.fontSize","cssVar":"--component-tag-fontSize","type":"dimension","description":"Tag type size.","alias":"{primitive.typography.size.xs}","resolvedValue":"12px"},{"path":"component.tag.fontWeight","cssVar":"--component-tag-fontWeight","type":"fontWeight","description":"Tag label weight.","alias":"{primitive.typography.weight.medium}","resolvedValue":"500"},{"path":"component.tag.lineHeight","cssVar":"--component-tag-lineHeight","type":"number","description":"Readable label rhythm for tags.","alias":"{primitive.typography.lineHeight.normal}","resolvedValue":"1.5"},{"path":"component.tag.minWidth","cssVar":"--component-tag-minWidth","type":"dimension","description":"Minimum tag width.","alias":"{primitive.size.48}","resolvedValue":"48px"},{"path":"component.tag.minHeight","cssVar":"--component-tag-minHeight","type":"dimension","description":"Minimum tag height.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"component.tag.paddingX","cssVar":"--component-tag-paddingX","type":"dimension","description":"Horizontal padding inside the pill.","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"component.tag.paddingY","cssVar":"--component-tag-paddingY","type":"dimension","description":"Vertical padding inside the pill.","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.tag.activeText","cssVar":"--component-tag-activeText","type":"color","description":"Text color when the tag is active.","alias":"{semantic.color.content.onAccent}","resolvedValue":"#fafafa"},{"path":"component.tag.activeBackground","cssVar":"--component-tag-activeBackground","type":"color","description":"Active tag fill color.","alias":"{semantic.accent.rest}","resolvedValue":"#433a3f"},{"path":"component.tag.activeBorder","cssVar":"--component-tag-activeBorder","type":"color","description":"Active tag border color.","alias":"{semantic.accent.rest}","resolvedValue":"#433a3f"},{"path":"component.tag.activeHover","cssVar":"--component-tag-activeHover","type":"color","description":"Active tag hover fill color.","alias":"{semantic.accent.hover}","resolvedValue":"#352e32"},{"path":"component.badge.fontSize","cssVar":"--component-badge-fontSize","type":"dimension","description":"Badge type size.","alias":"{primitive.typography.size.xs}","resolvedValue":"12px"},{"path":"component.badge.fontWeight","cssVar":"--component-badge-fontWeight","type":"fontWeight","description":"Badge label weight.","alias":"{primitive.typography.weight.medium}","resolvedValue":"500"},{"path":"component.badge.text","cssVar":"--component-badge-text","type":"color","description":"Badge text color.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"component.badge.bg","cssVar":"--component-badge-bg","type":"color","description":"Badge background color.","alias":"{semantic.color.feedback.bg.info}","resolvedValue":"oklch(0.96 0.03 266.54)","dark":{"alias":"{semantic.color.feedback.bg.info}","resolvedValue":"oklch(0.96 0.03 266.54)"}},{"path":"component.badge.radius","cssVar":"--component-badge-radius","type":"dimension","description":"Small rounded radius for badges.","alias":"{primitive.radius.4}","resolvedValue":"4px"},{"path":"component.badge.height","cssVar":"--component-badge-height","type":"dimension","description":"Badge height.","alias":"{primitive.size.20}","resolvedValue":"20px"},{"path":"component.badge.minWidth","cssVar":"--component-badge-minWidth","type":"dimension","description":"Badge minimum width.","alias":"{primitive.size.20}","resolvedValue":"20px"},{"path":"component.badge.paddingY","cssVar":"--component-badge-paddingY","type":"dimension","description":"Vertical padding inside the badge.","alias":"{primitive.space.px2}","resolvedValue":"2px"},{"path":"component.badge.paddingX","cssVar":"--component-badge-paddingX","type":"dimension","description":"Horizontal padding inside the badge.","alias":"{primitive.space.px6}","resolvedValue":"6px"},{"path":"component.button.bg","cssVar":"--component-button-bg","type":"color","description":"Primary button fill.","alias":"{semantic.color.surface.accent}","resolvedValue":"#433a3f"},{"path":"component.button.bgHover","cssVar":"--component-button-bgHover","type":"color","description":"Primary button hover fill.","alias":"{semantic.accent.hover}","resolvedValue":"#352e32"},{"path":"component.button.text","cssVar":"--component-button-text","type":"color","description":"Primary button text color.","alias":"{semantic.color.content.onAccent}","resolvedValue":"#fafafa"},{"path":"component.button.radius","cssVar":"--component-button-radius","type":"dimension","description":"Button corner radius.","alias":"{semantic.radius.action}","resolvedValue":"8px"},{"path":"component.button.paddingX","cssVar":"--component-button-paddingX","type":"dimension","description":"Horizontal button padding.","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"component.button.paddingY","cssVar":"--component-button-paddingY","type":"dimension","description":"Vertical button padding (8px, the md size; legacy flat alias of size.md.paddingY).","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.button.size.sm.paddingX","cssVar":"--component-button-size-sm-paddingX","type":"dimension","description":"Small button horizontal padding (12px).","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"component.button.size.sm.paddingY","cssVar":"--component-button-size-sm-paddingY","type":"dimension","description":"Small button vertical padding (4px).","alias":"{primitive.space.1}","resolvedValue":"4px"},{"path":"component.button.size.sm.fontSize","cssVar":"--component-button-size-sm-fontSize","type":"dimension","description":"Small button label size (12px, hds#283: was 13px).","alias":"{primitive.typography.size.xs}","resolvedValue":"12px"},{"path":"component.button.size.sm.iconSize","cssVar":"--component-button-size-sm-iconSize","type":"dimension","description":"Small button icon slot size (12px).","alias":"{primitive.size.12}","resolvedValue":"12px"},{"path":"component.button.size.sm.height","cssVar":"--component-button-size-sm-height","type":"dimension","description":"Small button height (32px).","alias":"{primitive.size.32}","resolvedValue":"32px"},{"path":"component.button.size.sm.itemSpacing","cssVar":"--component-button-size-sm-itemSpacing","type":"dimension","description":"Small button icon-to-label gap (8px).","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.button.size.md.paddingX","cssVar":"--component-button-size-md-paddingX","type":"dimension","description":"Medium button horizontal padding (16px).","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"component.button.size.md.paddingY","cssVar":"--component-button-size-md-paddingY","type":"dimension","description":"Medium button vertical padding (8px; the 40px height drives the box).","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.button.size.md.fontSize","cssVar":"--component-button-size-md-fontSize","type":"dimension","description":"Medium button label size (14px, hds#283: was 15px).","alias":"{primitive.typography.size.sm}","resolvedValue":"14px"},{"path":"component.button.size.md.iconSize","cssVar":"--component-button-size-md-iconSize","type":"dimension","description":"Medium button icon slot size (16px).","alias":"{primitive.size.16}","resolvedValue":"16px"},{"path":"component.button.size.md.height","cssVar":"--component-button-size-md-height","type":"dimension","description":"Medium button height (40px).","alias":"{primitive.size.40}","resolvedValue":"40px"},{"path":"component.button.size.md.itemSpacing","cssVar":"--component-button-size-md-itemSpacing","type":"dimension","description":"Medium button icon-to-label gap (8px).","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.button.size.lg.paddingX","cssVar":"--component-button-size-lg-paddingX","type":"dimension","description":"Large button horizontal padding (24px).","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"component.button.size.lg.paddingY","cssVar":"--component-button-size-lg-paddingY","type":"dimension","description":"Large button vertical padding (16px).","alias":"{primitive.space.4}","resolvedValue":"16px"},{"path":"component.button.size.lg.fontSize","cssVar":"--component-button-size-lg-fontSize","type":"dimension","description":"Large button label size (14px, the same hds-type-ui role as md).","alias":"{primitive.typography.size.sm}","resolvedValue":"14px"},{"path":"component.button.size.lg.iconSize","cssVar":"--component-button-size-lg-iconSize","type":"dimension","description":"Large button icon slot size (20px).","alias":"{primitive.size.20}","resolvedValue":"20px"},{"path":"component.button.size.lg.height","cssVar":"--component-button-size-lg-height","type":"dimension","description":"Large button height (48px).","alias":"{primitive.size.48}","resolvedValue":"48px"},{"path":"component.button.size.lg.itemSpacing","cssVar":"--component-button-size-lg-itemSpacing","type":"dimension","description":"Large button icon-to-label gap (8px).","alias":"{primitive.space.2}","resolvedValue":"8px"},{"path":"component.button.primary.textDisabled","cssVar":"--component-button-primary-textDisabled","type":"color","description":"Disabled primary button text color.","alias":"{semantic.color.content.disabled}","resolvedValue":"#d4d4d4"},{"path":"component.button.primary.bgDisabled","cssVar":"--component-button-primary-bgDisabled","type":"color","description":"Disabled primary button fill.","alias":"{semantic.color.surface.muted}","resolvedValue":"#f5f5f5"},{"path":"component.button.secondary.bg.rest","cssVar":"--component-button-secondary-bg-rest","type":"color","description":"Secondary button fill.","alias":"{semantic.color.surface.page}","resolvedValue":"#ffffff"},{"path":"component.button.secondary.bg.hover","cssVar":"--component-button-secondary-bg-hover","type":"color","description":"Secondary button hover fill.","alias":"{semantic.color.surface.accentSubtle}","resolvedValue":"#f5f4f4"},{"path":"component.button.secondary.bg.pressed","cssVar":"--component-button-secondary-bg-pressed","type":"color","description":"Secondary button pressed fill.","alias":"{semantic.color.surface.overlay}","resolvedValue":"#f5f5f5"},{"path":"component.button.secondary.border.rest","cssVar":"--component-button-secondary-border-rest","type":"color","description":"Secondary button border.","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.accent}","resolvedValue":"#433a3f"},{"path":"component.button.secondary.border.pressed","cssVar":"--component-button-secondary-border-pressed","type":"color","description":"Secondary button pressed border (the hover border still applies while pressed).","alias":"{semantic.color.border.accent}","resolvedValue":"#433a3f"},{"path":"component.button.secondary.border.disabled","cssVar":"--component-button-secondary-border-disabled","type":"color","description":"Secondary button disabled border (no disabled border class: the rest border stays).","alias":"{semantic.color.border.interactive}","resolvedValue":"#737373"},{"path":"component.button.secondary.text","cssVar":"--component-button-secondary-text","type":"color","description":"Secondary button text color.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"component.input.bg","cssVar":"--component-input-bg","type":"color","alias":"{semantic.color.surface.page}","resolvedValue":"#ffffff"},{"path":"component.input.text","cssVar":"--component-input-text","type":"color","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"component.input.border","cssVar":"--component-input-border","type":"color","alias":"{semantic.color.border.interactive}","resolvedValue":"#737373"},{"path":"component.input.borderError","cssVar":"--component-input-borderError","type":"color","alias":"{semantic.color.feedback.error}","resolvedValue":"#b91c1c"},{"path":"component.input.radius","cssVar":"--component-input-radius","type":"dimension","alias":"{semantic.radius.action}","resolvedValue":"8px"},{"path":"component.input.paddingX","cssVar":"--component-input-paddingX","type":"dimension","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"component.input.paddingY","cssVar":"--component-input-paddingY","type":"dimension","alias":"{primitive.space.3}","resolvedValue":"12px"},{"path":"component.card.bg","cssVar":"--component-card-bg","type":"color","alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},{"path":"component.card.border","cssVar":"--component-card-border","type":"color","alias":"{semantic.color.border.default}","resolvedValue":"#e5e5e5"},{"path":"component.card.radius","cssVar":"--component-card-radius","type":"dimension","alias":"{primitive.radius.12}","resolvedValue":"12px"},{"path":"component.card.padding","cssVar":"--component-card-padding","type":"dimension","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"component.card.gap","cssVar":"--component-card-gap","type":"dimension","alias":"{semantic.space.scale.sm}","resolvedValue":"16px"},{"path":"component.lightbox.backdrop.blur","cssVar":"--component-lightbox-backdrop-blur","type":"dimension","description":"Backdrop blur applied behind fullscreen image lightboxes.","alias":"{primitive.blur.16}","resolvedValue":"16px"}],"role":[{"path":"role.background","cssVar":"--role-background","type":"color","description":"Page background. shadcn role: background.","alias":"{semantic.color.surface.page}","resolvedValue":"#ffffff"},{"path":"role.foreground","cssVar":"--role-foreground","type":"color","description":"Default text on background. shadcn role: foreground.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"role.card","cssVar":"--role-card","type":"color","description":"Card surface. shadcn role: card.","alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},{"path":"role.card-foreground","cssVar":"--role-card-foreground","type":"color","description":"Text on card. shadcn role: card-foreground.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"role.popover","cssVar":"--role-popover","type":"color","description":"Popover/menu surface. shadcn role: popover.","alias":"{semantic.color.surface.overlay}","resolvedValue":"#f5f5f5"},{"path":"role.scrim","cssVar":"--role-scrim","type":"color","description":"Modal backdrop colour role. Apply alpha in the class, e.g. bg-scrim/60.","alias":"{semantic.color.surface.scrim}","resolvedValue":"#111111"},{"path":"role.pressed-overlay","cssVar":"--role-pressed-overlay","type":"color","description":"Pressed-state overlay colour role. Apply alpha in the class, e.g. inset-shadow-pressed-overlay/5.","alias":"{semantic.color.state.pressed.overlay}","resolvedValue":"#000000"},{"path":"role.popover-foreground","cssVar":"--role-popover-foreground","type":"color","description":"Text on popover. shadcn role: popover-foreground.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"role.primary","cssVar":"--role-primary","type":"color","description":"Primary action surface. shadcn role: primary.","alias":"{semantic.color.surface.accent}","resolvedValue":"#433a3f"},{"path":"role.primary-foreground","cssVar":"--role-primary-foreground","type":"color","description":"Text/icons on primary surface. shadcn role: primary-foreground.","alias":"{semantic.color.content.onAccent}","resolvedValue":"#fafafa"},{"path":"role.secondary","cssVar":"--role-secondary","type":"color","description":"Secondary action surface. shadcn role: secondary.","alias":"{semantic.color.surface.raised}","resolvedValue":"#fafafa"},{"path":"role.secondary-foreground","cssVar":"--role-secondary-foreground","type":"color","description":"Text on secondary surface. shadcn role: secondary-foreground.","alias":"{semantic.color.content.primary}","resolvedValue":"#111111"},{"path":"role.muted","cssVar":"--role-muted","type":"color","description":"Muted/quiet bg (skeletons, disabled inputs). shadcn role: muted.","alias":"{semantic.color.surface.overlay}","resolvedValue":"#f5f5f5"},{"path":"role.muted-foreground","cssVar":"--role-muted-foreground","type":"color","description":"Muted text. shadcn role: muted-foreground.","alias":"{semantic.color.content.secondary}","resolvedValue":"#525252"},{"path":"role.accent","cssVar":"--role-accent","type":"color","description":"Hover/active tinted bg. shadcn role: accent.","alias":"{semantic.color.surface.accentSubtle}","resolvedValue":"#f5f4f4"},{"path":"role.accent-foreground","cssVar":"--role-accent-foreground","type":"color","description":"Text on accent surface. shadcn role: accent-foreground.","alias":"{semantic.color.content.accent}","resolvedValue":"#433a3f"},{"path":"role.destructive","cssVar":"--role-destructive","type":"color","description":"Destructive action surface. shadcn role: destructive.","alias":"{semantic.color.feedback.error}","resolvedValue":"#b91c1c"},{"path":"role.destructive-foreground","cssVar":"--role-destructive-foreground","type":"color","description":"Text on destructive surface. shadcn role: destructive-foreground.","alias":"{semantic.color.content.inverse}","resolvedValue":"#f5f5f5"},{"path":"role.border","cssVar":"--role-border","type":"color","description":"Default border. shadcn role: border.","alias":"{semantic.color.border.default}","resolvedValue":"#e5e5e5"},{"path":"role.input","cssVar":"--role-input","type":"color","description":"Input field border. shadcn role: input.","alias":"{semantic.color.border.interactive}","resolvedValue":"#737373"},{"path":"role.ring","cssVar":"--role-ring","type":"color","description":"Focus ring color. shadcn role: ring.","alias":"{semantic.color.border.accent}","resolvedValue":"#433a3f"},{"path":"role.radius","cssVar":"--role-radius","type":"dimension","description":"Default border radius. shadcn role: radius.","alias":"{semantic.radius.action}","resolvedValue":"8px"}]}`), w = ["hds-alert", "hds-alert--danger", "hds-alert--info", "hds-alert--success", "hds-alert--warning", "hds-alert--with-title", "hds-alert__body", "hds-alert__icon", "hds-alert__title", "hds-badge", "hds-badge--danger", "hds-badge--in-progress", "hds-badge--info", "hds-badge--neutral", "hds-badge--success", "hds-badge--warning", "hds-card", "hds-card--accent", "hds-card--bordered", "hds-card--danger", "hds-card--info", "hds-card--no-padding", "hds-card--success", "hds-card--warning", "hds-divider", "hds-divider--horizontal", "hds-divider--strong", "hds-divider--vertical", "hds-focus", "hds-tag", "hds-tag--active", "hds-tag__pill"], k = {
3
3
  name: e,
4
4
  description: t,
5
5
  version: "1",