@hirobius/design-system 0.18.0 → 0.19.0

package/dist/manifest.js

@@ -1,28 +1,29 @@
 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.";
-const i = "2026-09-28T00:14:31.544Z", o = "hirobius.tokens.json", s = "W3C DTCG 2025.10", r = "https://adrianmilsap.com/hds", a = "https://adrianmilsap.com/llms.txt", n = { engine: "React + TypeScript", icons: "Lucide React", tokens: "W3C DTCG", styling: "CSS Variables" }, l = { 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" }, p = { primaryColor: "#111111", primaryColorToken: "semantic.accent.rest", font: "Satoshi variable 100–900, self-hosted", spacingBase: "4px", buttonBorderRadius: "0px", cardBorderRadius: "8px", neutralScale: "true monochromatic (equal RGB channels)", accentCount: 1 }, c = ["ActivityFeed", "Alert", "AlertDialog", "AspectRatio", "AssetImg", "Avatar", "AvatarGroup", "Badge", "Bleed", "Blockquote", "Box", "Breadcrumb", "Button", "ButtonGroup", "Calendar", "Callout", "Card", "CardBody", "CardDescription", "CardFooter", "CardHeader", "CardMetric", "CardProgress", "CardTitle", "Carousel", "Center", "Checkbox", "CinematicLink", "CircularProgress", "Cluster", "CodeBlock", "Combobox", "CommandPalette", "ComponentInstanceMatrix", "Container", "ContextMenu", "Cover", "DateInput", "DateRangeInput", "DateTimeInput", "Dialog", "DialogClose", "DialogContent", "DialogDescription", "DialogFooter", "DialogHeader", "DialogOverlay", "DialogPortal", "DialogTitle", "DialogTrigger", "Disclosure", "Divider", "DocLinkCard", "EmptyState", "Field", "FileInput", "Form", "FormField", "FormFieldShell", "FoundationSwatch", "Frame", "Grid", "HdsDocsShell", "HdsThemeProvider", "HeadingStack", "HoverCard", "Icon", "IconButton", "InlineCode", "InlineLink", "Input", "InputGroup", "Kbd", "Lightbox", "Menu", "MetadataList", "MultiSelector", "NavGroup", "NavItem", "OverflowList", "Page", "Pagination", "Pin", "Popover", "Progress", "Radio", "Reveal", "SegmentedControl", "Select", "SelectableCard", "Sidebar", "SideNav", "Skeleton", "Sketch", "Slider", "Spinner", "Stack", "StackedCardRail", "Stat", "StatusDot", "StatusListItem", "StatusTile", "Stepper", "StepperField", "Surface", "Switcher", "Table", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "Tag", "Text", "Textarea", "TextLockup", "TileGrid", "TimeInput", "Timestamp", "ToastProvider", "Toggle", "ToggleButton", "Token", "Tokenizer", "Toolbar", "Tooltip", "TopNav", "TreeList", "VisuallyHidden"], d = { status: "active", styleCount: 9, source: "hirobius.tokens.json semantic.typography", tokens: [{ name: "display", size: "48px", lineHeight: "1.0", role: "Hero headlines and landing-page displays" }, { name: "heading1", size: "36px", lineHeight: "1.25", role: "Primary section headings and h1 text" }, { name: "heading2", size: "30px", lineHeight: "1.25", role: "Secondary section headings and h2 text" }, { name: "heading3", size: "24px", lineHeight: "1.25", role: "Component headings, card headings, and h3 text" }, { name: "body", size: "16px", lineHeight: "1.5", role: "Default long-form prose and body copy" }, { name: "ui", size: "14px", lineHeight: "1.5", role: "Standard interface text, nav labels, inputs, and controls" }, { name: "caption", size: "12px", lineHeight: "1.5", role: "Active functional role for helper text, error metadata, secondary metadata, and form annotations" }, { name: "technical", size: "12px", lineHeight: "1.0", role: "Monospace token keys, code snippets, keyboard shortcuts, hashes, and aligned data readouts" }, { name: "badge", size: "10px", lineHeight: "1.0", role: "Status badges and compact tags only" }], deprecated: ["displayXl", "display2", "title", "body2", "label", "labelDescriptive", "labelTechnical", "micro", "monoXs", "monoSm"] }, m = [], u = [{ 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 }] }], g = { generatedAt: "2026-06-18T14:21:47.440Z", integrity: { score: 100, grade: "F" }, violations: { unmappedVariables: 0, forbiddenOverrides: 0, directPrimitiveViolations: 1, storefrontGovernance: 0, uncategorizedComponents: 1, namespaceViolations: 131, total: 133 }, usage: { highBlastRadiusTokens: 47, deadWood: 0, maxBlastRadius: 234, maxBlastRadiusToken: "semantic.color.content.secondary", textLockupsStandardized: 5 }, componentCoverage: { documented: 47, total: 47, percent: 100, apiComponents: 47, specs: 65 }, fidelity: { grade: "C", complete: 29, total: 39, percent: 74, incomplete: [{ name: "Field", filePath: "src/app/components/field.tsx", category: "Display", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "NavGroup", filePath: "src/app/components/nav-group.tsx", category: "Navigation", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !0, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "Sketch", filePath: "src/app/components/sketch.tsx", category: "Layout", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !0, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "Stat", filePath: "src/app/components/stat.tsx", category: "Display", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "StatusListItem", filePath: "src/app/components/status-list-item.tsx", category: "Display", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "StepperField", filePath: "src/app/components/stepper-field.tsx", category: "Inputs", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !0, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "Tabs", filePath: "src/app/components/tabs.tsx", category: "Navigation", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "TabsContent", filePath: "src/app/components/tabs.tsx", category: "Navigation", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "TabsList", filePath: "src/app/components/tabs.tsx", category: "Navigation", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "TabsTrigger", filePath: "src/app/components/tabs.tsx", category: "Navigation", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }] }, checks: { semanticReport: !0, dimensions: !0, docsCoverage: !0, docsFidelity: !1, registry: !0, storefrontSchema: !0, categorization: !1, namespaceAudit: !1, textPattern: !1, payloadAudit: !0, llmsSync: !1 }, scanCleanup: { criticalFileCount: 1, criticalFiles: [{ file: "src/app/components/componentPreviewRegistry.tsx", count: 1, label: "componentPreviewRegistry.tsx" }], trendDelta: -1, trendLabel: "-1", lastScannedAt: "2026-06-18T03:32:57.324Z", sparklineValues: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24] } }, h = { uncategorized: [{ name: "HdsLegacyTokenGovernancePanel", filePath: "src/docs-tooling/lab/legacy-token-detail.tsx" }], namespaceViolations: [] }, v = "CLAUDE.md", y = "Version increments on any prop rename, token path rename, or removed component. Additions are non-breaking.", f = /* @__PURE__ */ JSON.parse('{"CaseStudyLayout":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/layouts/CaseStudyLayout.tsx","description":"CaseStudyLayout — macro-layout skeleton for portfolio case study pages. Invisible structure only. No Surface, no decorative chrome. Slot anatomy: heroSlot → full-width (maxWidth=\\"max\\") — hero image + headline introSlot → prose-width (maxWidth=\\"content\\") — narrative, Brief/Problem/Solution metricsSlot → full-width (maxWidth=\\"max\\") — KPI or summary cards (optional) contentSlot → full-width (maxWidth=\\"max\\") — chapters, galleries, learnings","figmaUrl":null,"figmaId":null,"preview":{"exportName":"CaseStudyLayout","sizing":"panel"},"consumers":["src/index.ts"],"tokenMapping":{},"props":{"contentSlot":{"type":"ReactNode"},"heroSlot":{"type":"ReactNode"},"introSlot":{"type":"ReactNode"},"metricsSlot":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{"heroSlot":{"type":"ReactNode"},"introSlot":{"type":"ReactNode"},"metricsSlot":{"type":"ReactNode"},"contentSlot":{"type":"ReactNode"}},"requiredProps":["heroSlot","introSlot","contentSlot"],"a11yRules":[{"rule":"Root element is <main> — only one CaseStudyLayout per page","required":true}],"variantAxes":[],"componentProperties":[],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.layout.gap"}},{"name":"hero","figmaSlotName":"Hero"},{"name":"intro","figmaSlotName":"Intro"},{"name":"metrics","figmaSlotName":"Metrics"},{"name":"content","figmaSlotName":"Content"}],"tier":"template","docExempt":false,"figmaLink":null,"storyFiles":[],"storyIds":[]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34","figmaId":null,"preview":{"exportName":"Alert","sizing":"panel"},"consumers":["src/app/data/hdsEditorial.tsx","src/stories/alert.stories.tsx","src/stories/static-primitives.stories.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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34","props":{"children":{"type":"ReactNode"},"title":{"type":"string","optional":true},"tone":{"type":"enum","values":["success","danger","warning","info"],"default":"info"}},"propConstraints":{"title":{"type":"string"},"tone":{"type":"enum","values":["success","danger","warning","info"]}},"storyFiles":["src/stories/alert.stories.tsx"],"storyIds":["primitives-alert--all-variants","primitives-alert--error","primitives-alert--info","primitives-alert--success","primitives-alert--warning","primitives-alert--with-title"]},"CinematicLink":{"category":"Branding","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/cinematic-link.tsx","description":"CinematicLink - cinematic editorial link treatment for portfolio surfaces.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"CinematicLink","sizing":"panel"},"consumers":["src/app/components/animated-label.tsx","src/stories/cinematic-link.stories.tsx"],"tokenMapping":{},"props":{"href":{"type":"string"},"children":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/CinematicLink.tsx","figmaLink":null,"storyFiles":["src/stories/cinematic-link.stories.tsx"],"storyIds":["primitives-cinematic-link--default","primitives-cinematic-link--external-href","primitives-cinematic-link--long-label","primitives-cinematic-link--short-label"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154","figmaId":null,"preview":{"exportName":"CodeBlock","sizing":"panel"},"consumers":["src/docs-tooling/lab/legacy-token-detail.tsx","src/index.ts","src/stories/code-block.stories.tsx"],"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"},"filename":{"type":"string","optional":true},"language":{"type":"string","optional":true},"truncateFromStart":{"type":"boolean","default":false},"variant":{"type":"enum","values":["block","inline"],"default":"block"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/CodeBlock.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154","storyFiles":["src/stories/code-block.stories.tsx"],"storyIds":["primitives-code-block--collapsible","primitives-code-block--css-highlighting","primitives-code-block--default","primitives-code-block--inline","primitives-code-block--json-highlighting"]},"Container":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/container.tsx","description":"Container — semantic width-constrained layout. semantic max-width scale, so agents stop hand-rolling `marginInline: auto` plus an ad hoc max-width pixel value for page shells. use the semantic width scale (\'content\' | \'max\'), never a raw px value. Do NOT use the deprecated `padding` prop — it is a no-op; apply padding via Surface or a Stack instead. Do NOT import Container directly inside a page under src/app/pages — use Page, which wraps Container and owns vertical rhythm. Use Center instead when you also need a horizontal gutter, which Container does not support. Centers content horizontally and applies semantic max-width constraints. - maxWidth options: \'content\' (760px prose) | \'max\' (1200px full layout) - No arbitrary pixel values allowed Usage: <Container maxWidth=\\"max\\"> <div>...</div> </Container>","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Container","sizing":"panel"},"consumers":["src/app/components/bleed.tsx","src/app/components/box.tsx","src/app/components/center.tsx","src/app/components/page.tsx","src/app/components/switcher.tsx","src/app/layouts/CaseStudyLayout.tsx","src/app/layouts/DocLayout.tsx","src/stories/box.stories.tsx","src/stories/container.stories.tsx","src/stories/page.stories.tsx","src/stories/patterns-layout.stories.tsx"],"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-component-padding)"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Container.tsx","figmaLink":null,"storyFiles":["src/stories/container.stories.tsx"],"storyIds":["primitives-container--content-width","primitives-container--max-width"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453","figmaId":null,"preview":{"exportName":"Disclosure","sizing":"panel"},"consumers":["src/app/components/nav-group.tsx","src/app/layouts/HdsDocsShell.tsx","src/stories/disclosure.stories.tsx","src/stories/nav-group.stories.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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453","storyFiles":["src/stories/disclosure.stories.tsx"],"storyIds":["primitives-disclosure--controlled","primitives-disclosure--multiple-items","primitives-disclosure--open-by-default","primitives-disclosure--panel"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26","figmaId":null,"preview":{"exportName":"Divider","sizing":"panel"},"consumers":["src/app/components/metadata-list.tsx","src/app/data/hdsEditorial.tsx","src/stories/divider.stories.tsx","src/stories/static-primitives.stories.tsx"],"tokenMapping":{"Default stroke":"semantic.color.border.default","Strong stroke":"semantic.color.border.strong","Stroke thickness":"primitive.borderWidth.xs"},"allowedChildren":[],"requiredProps":[],"a11yRules":[],"variantAxes":["orientation","variant"],"componentProperties":[],"states":["default"],"slots":[{"name":"line","figmaSlotName":"Line","tokenBinding":{"fill":"semantic.color.border.default"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Divider.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26","props":{"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"]}},"storyFiles":["src/stories/divider.stories.tsx"],"storyIds":["primitives-divider--between-sections","primitives-divider--horizontal","primitives-divider--horizontal-strong","primitives-divider--legacy-strong-prop","primitives-divider--vertical","primitives-divider--with-spacing"]},"DocLinkCard":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"description":"DocLinkCard - navigation card for editorial and documentation cross-links.","figmaUrl":null,"tokenMapping":{"background":"component.card.bg","border":"component.card.border","radius":"component.card.radius","padding":"component.card.padding","gap":"component.card.gap","accent":"semantic.color.content.accent"},"filePath":"src/app/components/doc-link-card.tsx","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[{"rule":"Card link must have descriptive accessible name (not just the URL)","required":true},{"rule":"Focus ring visible on keyboard navigation","required":true}],"preview":{"exportName":"DocLinkCard","sizing":"panel"},"tier":"primitive","hidden":false,"docExempt":false,"figmaId":null,"figmaLink":null,"consumers":["src/app/components/doc-link-card.test.tsx","src/app/data/hdsEditorial.tsx","src/index.ts","src/stories/doc-link-card.stories.tsx"],"variantAxes":[],"componentProperties":[],"storyFiles":["src/stories/doc-link-card.stories.tsx"],"storyIds":["primitives-doc-link-card--accent","primitives-doc-link-card--default","primitives-doc-link-card--disabled","primitives-doc-link-card--pager-back","primitives-doc-link-card--pager-forward"]},"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":null,"figmaId":null,"preview":{"exportName":"ErrorPattern","sizing":"panel"},"consumers":["src/app/components/not-found-pattern.tsx","src/index.ts","src/stories/error-pattern.stories.tsx","src/stories/not-found-pattern.stories.tsx"],"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":null,"storyFiles":["src/stories/error-pattern.stories.tsx"],"storyIds":["feedback-error-pattern--default","feedback-error-pattern--not-found","feedback-error-pattern--server-error","feedback-error-pattern--unauthorized"]},"FoundationSwatch":{"category":"Utilities","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/foundation-swatch.tsx","description":"FoundationSwatch - governed foundation specimen for color and semantic role previews.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"FoundationSwatch","sizing":"full"},"consumers":["src/stories/foundation-swatch.stories.tsx"],"tokenMapping":{},"props":{"background":{"type":"string"},"bordered":{"type":"boolean","default":false},"details":{"type":"string[]","optional":true},"foreground":{"type":"string","default":"var(--semantic-color-content-primary)"},"hidePreviewLabel":{"type":"boolean","default":false},"label":{"type":"string"},"note":{"type":"ReactNode","optional":true},"previewPosition":{"type":"enum","values":["bottom-left","top-left","center"],"default":"center"},"specimen":{"type":"ReactNode","optional":true},"swatchVar":{"type":"string","optional":true},"tokenDisplayPreset":{"type":"enum","values":["depth1","depth2","full"],"default":"depth2"},"tokenPath":{"type":"string","optional":true},"value":{"type":"string","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{}},{"name":"specimen","figmaSlotName":"Specimen","tokenBinding":{"stroke":"semantic.color.border.default"}},{"name":"label","figmaSlotName":"Label","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"note","figmaSlotName":"Note","tokenBinding":{"fill":"semantic.color.content.secondary"}}],"sourcePath":"src/app/components/FoundationSwatch.tsx","figmaLink":null,"storyFiles":["src/stories/foundation-swatch.stories.tsx"],"storyIds":["primitives-foundation-swatch--color-grid","primitives-foundation-swatch--default","primitives-foundation-swatch--feedback-palette","primitives-foundation-swatch--with-details","primitives-foundation-swatch--with-specimen"]},"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. - 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.tsx","src/app/components/cluster.tsx","src/app/components/foundation-swatch.tsx","src/app/components/image-lightbox.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/docs-tooling/shell-controls.tsx","src/docs-tooling/sketch-controls.tsx","src/stories/box.stories.tsx","src/stories/foundation-swatch.stories.tsx","src/stories/grid.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/segmented-control.stories.tsx","src/stories/surface.stories.tsx"],"tokenMapping":{},"props":{"layout":{"type":"enum","values":["fixed","auto-fit"],"default":"fixed"},"columns":{"type":"number","default":12},"gap":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"inset"},"subgrid":{"type":"boolean","default":false},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"as":{"type":"React.ElementType","optional":true}},"allowedChildren":["*"],"propConstraints":{"layout":{"type":"enum","values":["fixed","auto-fit"]},"gap":{"type":"enum","values":["tight","normal","inset","spacious"]},"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,"storyFiles":["src/stories/grid.stories.tsx"],"storyIds":["primitives-grid--aside-layout","primitives-grid--auto-fit","primitives-grid--three-column","primitives-grid--two-column"]},"Icon":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/icon.tsx","description":"Icon — semantic icon wrapper for Lucide icons.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Icon","sizing":"panel"},"consumers":["src/app/components/activity-feed.test.tsx","src/app/components/activity-feed.tsx","src/app/components/alert.tsx","src/app/components/breadcrumb.tsx","src/app/components/checkbox.tsx","src/app/components/code-block.tsx","src/app/components/combobox.tsx","src/app/components/context-menu.tsx","src/app/components/disclosure.tsx","src/app/components/doc-link-card.tsx","src/app/components/history-card.tsx","src/app/components/icon-button.tsx","src/app/components/image-lightbox.tsx","src/app/components/inline-link.tsx","src/app/components/menu.tsx","src/app/components/multi-selector.tsx","src/app/components/select.tsx","src/app/components/table.tsx","src/app/components/text-lockup.tsx","src/app/components/toast.tsx","src/app/components/tokenTableUtils.ts","src/app/components/tokenUtils.ts","src/app/data/hdsEditorial.tsx","src/docs-tooling/lab/legacy-token-detail.tsx","src/docs-tooling/shell-controls.tsx","src/docs-tooling/theme-toggle.tsx","src/stories/activity-feed.stories.tsx","src/stories/icon-button.stories.tsx","src/stories/icon.stories.tsx","src/stories/nav-group.stories.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":"Icon"},"size":{"type":"IconSize","default":"small"},"style":{"type":"CSSProperties","optional":true},"weight":{"type":"enum","values":["thin","light","bold","fill","regular","duotone"],"optional":true}},"allowedChildren":[],"propConstraints":{"aria-hidden":{"type":"boolean"},"className":{"type":"string"},"color":{"type":"string"},"weight":{"type":"enum","values":["thin","light","bold","fill","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":null,"storyFiles":["src/stories/icon.stories.tsx"],"storyIds":["primitives-icon--default","primitives-icon--large","primitives-icon--medium","primitives-icon--semantic-color","primitives-icon--semantic-colors","primitives-icon--size-gallery"]},"IconButton":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/icon-button.tsx","description":"IconButton ” icon-only action trigger built on the shared Button primitive.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39","figmaId":null,"preview":{"exportName":"IconButton","sizing":"panel"},"consumers":["src/app/components/hds-tooltip.tsx","src/app/components/inline-code.tsx","src/app/components/pagination.tsx","src/app/components/stepper-field.tsx","src/app/data/hdsEditorial.tsx","src/docs-tooling/page-footer.tsx","src/docs-tooling/shell-controls.tsx","src/stories/icon-button.stories.tsx"],"tokenMapping":{"Fill":"semantic.accent.rest","Fill hover":"semantic.accent.hover","Fill pressed":"semantic.accent.pressed","Label":"semantic.color.content.onAccent","Corner radius":"semantic.radius.action","Horizontal padding":"primitive.space.4","Vertical padding":"primitive.space.2"},"props":{"aria-label":{"type":"string","optional":true},"asChild":{"type":"boolean","optional":true},"icon":{"type":"Icon"},"iconColor":{"type":"string","optional":true},"iconLeft":{"type":"ReactNode","optional":true},"iconRight":{"type":"ReactNode","optional":true},"iconSize":{"type":"IconSize","optional":true},"isDark":{"type":"boolean","optional":true},"label":{"type":"string","optional":true},"loading":{"type":"boolean","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"variant":{"type":"enum","values":["primary","secondary","tertiary"],"default":"secondary"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[{"rule":"Must have aria-label (icon-only buttons have no visible text)","required":true},{"rule":"Focus ring visible in all interactive states (uses hds-focus class)","required":true}],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"fill":"semantic.color.surface.action"}},{"name":"icon","figmaSlotName":"Icon","tokenBinding":{"fill":"semantic.color.content.primary"}}],"sourcePath":"src/app/components/IconButton.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39","storyFiles":["src/stories/icon-button.stories.tsx"],"storyIds":["primitives-icon-button--default","primitives-icon-button--disabled","primitives-icon-button--primary","primitives-icon-button--size-gallery","primitives-icon-button--tertiary"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155","figmaId":null,"preview":{"exportName":"InlineCode","sizing":"panel"},"consumers":["src/app/components/metadata-list.tsx","src/app/data/hdsEditorial.tsx","src/stories/inline-code.stories.tsx","src/stories/metadata-list.stories.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":{"compact":{"type":"boolean","default":false},"copyable":{"type":"boolean","default":false},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155","storyFiles":["src/stories/inline-code.stories.tsx"],"storyIds":["primitives-inline-code--comfortable","primitives-inline-code--compact","primitives-inline-code--compact-deprecated-alias","primitives-inline-code--copyable","primitives-inline-code--copyable-in-prose","primitives-inline-code--default","primitives-inline-code--in-prose"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161","figmaId":null,"preview":{"exportName":"InlineLink","sizing":"panel"},"consumers":["src/app/components/hover-card.tsx","src/app/components/image-lightbox.tsx","src/docs-tooling/lab/legacy-token-detail.tsx","src/stories/inline-link.stories.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":{},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161","storyFiles":["src/stories/inline-link.stories.tsx"],"storyIds":["primitives-inline-link--default","primitives-inline-link--external-no-icon","primitives-inline-link--in-body-copy","primitives-inline-link--internal-route"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20","figmaId":null,"preview":{"exportName":"Input","sizing":"panel"},"consumers":["src/app/components/form.tsx","src/app/components/segmented-control.tsx","src/app/components/stepper-field.tsx","src/app/components/textarea.tsx","src/app/components/time-input.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/stories/combobox.stories.tsx","src/stories/input.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/textarea.stories.tsx"],"tokenMapping":{"Surface fill":"role.background","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":{"type":{"type":"enum","values":["text","email","password","search","tel","url","number"],"default":"text"},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"textStyle":{"type":"enum","values":["body","mono"],"default":"body"},"label":{"type":"string","optional":true},"placeholder":{"type":"string","optional":true},"helperText":{"type":"string","optional":true},"error":{"type":"boolean","default":false},"errorMessage":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"loading":{"type":"boolean","default":false}},"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":{"type":{"type":"enum","values":["text","email","password","search","tel","url","number"]},"size":{"type":"enum","values":["sm","md","lg"]},"textStyle":{"type":"enum","values":["body","mono"]},"label":{"type":"string"},"placeholder":{"type":"string"},"helperText":{"type":"string"},"error":{"type":"boolean"},"errorMessage":{"type":"string"},"disabled":{"type":"boolean"},"loading":{"type":"boolean"}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20","storyFiles":["src/stories/input.stories.tsx"],"storyIds":["primitives-input--default","primitives-input--disabled","primitives-input--loading","primitives-input--mono","primitives-input--size-variants","primitives-input--with-error","primitives-input--with-helper"]},"NavGroup":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/nav-group.tsx","description":"NavGroup - labeled navigation group for stacks of nav items.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304","figmaId":null,"preview":{"exportName":"NavGroup","sizing":"panel"},"consumers":["src/app/lib/nav-active.ts","src/stories/nav-group.stories.tsx"],"tokenMapping":{},"props":{"className":{"type":"string","optional":true},"collapsible":{"type":"boolean","default":false},"contentStyle":{"type":"CSSProperties","optional":true},"getExact":{"type":"(item: NavItem) => boolean","optional":true},"items":{"type":"NavItem[]","optional":true},"label":{"type":"string","optional":true},"level":{"type":"NavLevel","default":"section"},"onNavigate":{"type":"() => void","optional":true},"style":{"type":"CSSProperties","optional":true},"variant":{"type":"enum","values":["side","toc"],"default":"side"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[{"rule":"Navigation group must have accessible label (aria-label on the nav element)","required":true},{"rule":"Expanded/collapsed state communicated via aria-expanded","required":true}],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{}},{"name":"label","figmaSlotName":"Label","tokenBinding":{"fill":"semantic.color.content.secondary"}},{"name":"items","figmaSlotName":"Items","tokenBinding":{"gap":"semantic.space.sidebar.gap"}}],"sourcePath":"src/app/components/NavGroup.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304","storyFiles":["src/stories/nav-group.stories.tsx"],"storyIds":["primitives-nav-group--collapsible","primitives-nav-group--default","primitives-nav-group--no-label","primitives-nav-group--toc-variant","primitives-nav-group--with-disabled-item"]},"NavItem":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/nav-item.tsx","description":"NavItem - navigation row primitive for sidebars, table of contents, and list navigation.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258","figmaId":null,"preview":{"exportName":"NavItem","sizing":"panel"},"consumers":["src/app/components/nav-group.tsx","src/app/context/DemoStateContext.tsx","src/app/data/hds-nav-data.ts","src/app/hooks/useInteractionState.ts","src/app/layouts/HdsDocsShell.tsx","src/index.ts","src/stories/nav-group.stories.tsx","src/stories/nav-item.stories.tsx"],"tokenMapping":{},"props":{"active":{"type":"boolean","default":false},"disabled":{"type":"boolean","default":false},"label":{"type":"string"},"level":{"type":"NavLevel","default":"root"},"onNavigate":{"type":"(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void","optional":true},"variant":{"type":"enum","values":["side","toc"],"default":"side"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[{"rule":"Active item must be communicated via aria-current=\\"page\\" or aria-selected","required":true},{"rule":"Focus ring visible in all interactive states (uses hds-focus class)","required":true}],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/NavItem.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258","storyFiles":["src/stories/nav-item.stories.tsx"],"storyIds":["primitives-nav-item--active","primitives-nav-item--button-mode","primitives-nav-item--default","primitives-nav-item--disabled","primitives-nav-item--nested-level","primitives-nav-item--toc-active","primitives-nav-item--toc-variant"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334","figmaId":null,"preview":{"exportName":"SegmentedControl","sizing":"panel"},"consumers":["src/app/components/segmented-control.test.tsx","src/app/data/hdsEditorial.tsx","src/app/hooks/useInteractionState.ts","src/docs-tooling/TokenDisplayToggle.tsx","src/stories/segmented-control.stories.tsx"],"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":{"ariaLabel":{"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":["default","compact"],"default":"default"},"value":{"type":"string"},"variant":{"type":"enum","values":["primary","secondary"],"default":"primary"}},"allowedChildren":["*"],"propConstraints":{},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334","storyFiles":["src/stories/segmented-control.stories.tsx"],"storyIds":["primitives-segmented-control--compact","primitives-segmented-control--full-width","primitives-segmented-control--primary","primitives-segmented-control--secondary"]},"Sketch":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/sketch.tsx","description":"Sketch — shared shell for generative canvases and WebGL sketches.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Sketch","sizing":"panel"},"consumers":["src/stories/sketch.stories.tsx"],"tokenMapping":{},"props":{"controls":{"type":"ReactNode","optional":true},"title":{"type":"string"},"children":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"fill":"semantic.color.surface.canvas"}},{"name":"header","figmaSlotName":"Header","tokenBinding":{"stroke":"semantic.color.border.default"}},{"name":"title","figmaSlotName":"Title","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"canvas","figmaSlotName":"Canvas","tokenBinding":{}}],"sourcePath":"src/app/components/Sketch.tsx","figmaLink":null,"storyFiles":["src/stories/sketch.stories.tsx"],"storyIds":["layout-sketch--default","layout-sketch--narrow-canvas","layout-sketch--with-controls"]},"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/activity-feed.tsx","src/app/components/box.tsx","src/app/components/cluster.tsx","src/app/components/container.tsx","src/app/components/cover.tsx","src/app/components/disclosure.tsx","src/app/components/error-boundary.tsx","src/app/components/error-pattern.tsx","src/app/components/foundation-swatch.tsx","src/app/components/grid.tsx","src/app/components/heading-stack.tsx","src/app/components/image-lightbox.tsx","src/app/components/nav-group.tsx","src/app/components/page.tsx","src/app/components/sketch.tsx","src/app/components/tooltip.tsx","src/app/data/hdsEditorial.tsx","src/app/layouts/CaseStudyLayout.tsx","src/app/layouts/DocLayout.tsx","src/docs-tooling/controls-panel.tsx","src/docs-tooling/doc-page-header.tsx","src/docs-tooling/lab/token-collection-list.tsx","src/docs-tooling/shell-controls.tsx","src/docs-tooling/sketch-controls.tsx","src/stories/box.stories.tsx","src/stories/code-block.stories.tsx","src/stories/grid.stories.tsx","src/stories/page.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/stack.stories.tsx"],"tokenMapping":{"Default gap":"primitive.space.3","Compact gap":"primitive.space.2","Wide gap":"primitive.space.6"},"props":{"direction":{"type":"enum","values":["column","row"],"default":"column"},"gap":{"type":"enum","values":["tight","normal","inset","spacious","gap","medium","hairline","xs","stack"],"default":"tight"},"align":{"type":"enum","values":["start","center","end","stretch"],"optional":true},"justify":{"type":"enum","values":["start","center","end","space-between"],"optional":true},"wrap":{"type":"boolean","default":false},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"as":{"type":"React.ElementType","optional":true}},"allowedChildren":["*"],"propConstraints":{"direction":{"type":"enum","values":["column","row"]},"gap":{"type":"enum","values":["tight","normal","inset","spacious","gap","medium","hairline","xs","stack"]},"align":{"type":"enum","values":["start","center","end","stretch"]},"justify":{"type":"enum","values":["start","center","end","space-between"]},"wrap":{"type":"boolean"}},"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,"storyFiles":["src/stories/stack.stories.tsx"],"storyIds":["primitives-stack--column","primitives-stack--row","primitives-stack--space-between","primitives-stack--spacious-gap","primitives-stack--tight-gap"]},"StepperField":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/stepper-field.tsx","description":"StepperField ” numeric input with decrement/increment controls. Classification baseline: Material Design, Chakra UI, and Ant Design treat steppers as numeric input controls rather than page-specific controls. This lives in shared components so sketches and docs consume the same primitive.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425","figmaId":null,"preview":{"exportName":"StepperField","sizing":"panel"},"consumers":["src/stories/stepper-field.stories.tsx"],"tokenMapping":{},"props":{"inputStep":{"type":"number","optional":true},"label":{"type":"string"},"max":{"type":"number"},"min":{"type":"number"},"onChange":{"type":"(value: number) => void"},"precision":{"type":"number","optional":true},"step":{"type":"number"},"value":{"type":"number"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[{"rule":"Must have associated label via label prop or aria-labelledby","required":true},{"rule":"Decrement/increment buttons must have aria-label","required":true}],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"fill":"semantic.color.surface.canvas"}},{"name":"label","figmaSlotName":"Label","tokenBinding":{"fill":"semantic.color.content.secondary"}},{"name":"controls","figmaSlotName":"Controls","tokenBinding":{"gap":"semantic.space.component.gap"}}],"sourcePath":"src/app/components/StepperField.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425","storyFiles":["src/stories/stepper-field.stories.tsx"],"storyIds":["primitives-stepper-field--column-count","primitives-stepper-field--decimal","primitives-stepper-field--default","primitives-stepper-field--dimension-panel","primitives-stepper-field--font-size"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300","figmaId":null,"preview":{"exportName":"Table","sizing":"full"},"consumers":["src/app/components/table.test.tsx","src/app/data/hdsEditorial.tsx","src/docs-tooling/api-reference.tsx","src/docs-tooling/propTableUtils.tsx","src/stories/nav-group.stories.tsx","src/stories/nav-item.stories.tsx","src/stories/segmented-control.stories.tsx","src/stories/table.stories.tsx"],"tokenMapping":{},"props":{"caption":{"type":"ReactNode","optional":true},"captionAction":{"type":"ReactNode","optional":true},"columns":{"type":"TableColumn[]"},"density":{"type":"enum","values":["compact","comfortable"],"default":"comfortable"},"description":{"type":"ReactNode","optional":true},"flush":{"type":"boolean","default":false},"minWidth":{"type":"string | number","optional":true},"rows":{"type":"TableRow[]"},"stickyHeader":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300","storyFiles":["src/stories/table.stories.tsx"],"storyIds":["primitives-table--default","primitives-table--density-comfortable","primitives-table--density-compact","primitives-table--flush","primitives-table--sortable","primitives-table--with-badge-slots","primitives-table--with-caption"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11","figmaId":null,"preview":{"exportName":"Tag","sizing":"panel"},"consumers":["src/app/components/badge.tsx","src/app/components/bleed.tsx","src/app/components/box.tsx","src/app/components/breadcrumb.tsx","src/app/components/card.tsx","src/app/components/center.tsx","src/app/components/cluster.tsx","src/app/components/cover.tsx","src/app/components/file-input.tsx","src/app/components/frame.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/tokenizer.tsx","src/app/components/visually-hidden.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/stories/static-primitives.stories.tsx","src/stories/tag.stories.tsx"],"tokenMapping":{"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},"ariaLabel":{"type":"string","optional":true},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"onClick":{"type":"() => void","optional":true},"title":{"type":"string","optional":true}},"allowedChildren":[],"propConstraints":{"active":{"type":"boolean"},"ariaLabel":{"type":"string"},"className":{"type":"string"},"title":{"type":"string"}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11","storyFiles":["src/stories/tag.stories.tsx"],"storyIds":["primitives-tag--active","primitives-tag--default","primitives-tag--disabled","primitives-tag--filter-row","primitives-tag--interactive","primitives-tag--state-matrix"]},"Token":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/token.tsx","description":"Token - reflective token specimen for unified node-based token views. The `variant` axis (node | diagram — diagram is a deprecated alias that resolves to the same node treatment) plus the `selected` / `fullWidth` / `asButton` / `nowrap` / `sourceNode` states used to be a Token.module.css `[data-*]` attribute stylesheet, with a duplicate `isSelected` branch re-painted inline on top of it. Both now live as one `cva` variant set — same `--semantic-*`/`--component-*`/`--primitive-*` custom properties, same pixels, no CSS module.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Token","sizing":"panel"},"consumers":["src/app/components/activity-feed.tsx","src/app/components/box-sx.ts","src/app/components/box.tsx","src/app/components/code-block.tsx","src/app/components/foundation-swatch.tsx","src/app/components/side-nav.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/app/lib/hds-search.ts","src/app/stores/mobiusStore.ts","src/docs-tooling/health-rail.tsx","src/docs-tooling/lab/legacy-token-detail.tsx","src/docs-tooling/lab/legacy-token-list.tsx","src/docs-tooling/lab/token-collection-list.tsx","src/docs-tooling/TokenDisplayToggle.tsx","src/index.ts","src/stories/activity-feed.stories.tsx","src/stories/card.stories.tsx","src/stories/foundation-swatch.stories.tsx","src/stories/heading-stack.stories.tsx","src/stories/input.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/stacked-card-rail.stories.tsx","src/stories/status-list-item.stories.tsx","src/stories/table.stories.tsx","src/stories/tabs.stories.tsx","src/stories/text-lockup.stories.tsx","src/stories/text.stories.tsx","src/stories/toast.stories.tsx","src/stories/token.stories.tsx"],"tokenMapping":{"Node label text":"semantic.color.content.primary","Diagram label text":"semantic.color.content.secondary","Diagram accent color":"semantic.color.content.accent","Border stroke":"semantic.color.border.default","Font family":"primitive.typography.family.mono","Corner radius (sm)":"primitive.radius.4","Corner radius (xs)":"primitive.radius.2"},"props":{"accentColor":{"type":"string"},"ariaLabel":{"type":"string","optional":true},"className":{"type":"string","optional":true},"description":{"type":"ReactNode","optional":true},"fullWidth":{"type":"boolean","optional":true},"isSelected":{"type":"boolean","optional":true},"isSourceNode":{"type":"boolean","optional":true},"label":{"type":"string"},"leadingSlot":{"type":"ReactNode","optional":true},"nodeRef":{"type":"(el: HTMLElement) => void","optional":true},"nowrap":{"type":"boolean","optional":true},"onClick":{"type":"(() => void) | (() => void)","optional":true},"pathDisplayDepth":{"type":"number","optional":true},"pathDisplayLeadingDot":{"type":"boolean","optional":true},"pathDisplayMode":{"type":"enum","values":["full","compressed"],"optional":true},"rawValue":{"type":"ReactNode","optional":true},"swatchVar":{"type":"string","optional":true},"tokenPath":{"type":"string","optional":true},"truncateFromStart":{"type":"boolean","optional":true},"value":{"type":"string"},"variant":{"type":"enum","values":["node","diagram"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Token.tsx","figmaLink":null,"storyFiles":["src/stories/token.stories.tsx"],"storyIds":["primitives-token--color-token","primitives-token--compressed-path","primitives-token--default","primitives-token--explicit-swatch","primitives-token--selected","primitives-token--source-node"]},"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) - Fixed radius: var(--component-card-radius) - shadow prop: applies a two-layer elevation shadow for card lift Usage: <Surface>Card content</Surface> <Surface padding=\\"item\\">Compact item</Surface> <Surface shadow>Lifted card with elevation shadow.</Surface>","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-27","figmaId":null,"preview":{"exportName":"Surface","sizing":"panel"},"consumers":["src/app/components/container.tsx","src/app/components/dialog.tsx","src/app/components/disclosure.tsx","src/app/components/empty-state.tsx","src/app/components/error-boundary.tsx","src/app/components/error-pattern.tsx","src/app/components/foundation-swatch.tsx","src/app/components/image-lightbox.tsx","src/app/components/popover.tsx","src/app/components/sketch.tsx","src/app/components/slider.tsx","src/app/components/stepper-field.tsx","src/app/components/surface-padding.ts","src/app/components/table.tsx","src/app/components/tokenTableUtils.ts","src/app/components/tokenUtils.ts","src/app/components/tooltip.tsx","src/app/data/hdsEditorial.tsx","src/app/layouts/CaseStudyLayout.tsx","src/docs-tooling/api-reference.tsx","src/docs-tooling/component-preview.tsx","src/docs-tooling/controls-panel.tsx","src/docs-tooling/doc-page-header.tsx","src/docs-tooling/lab/token-list.tsx","src/docs-tooling/preview-frame.tsx","src/docs-tooling/shell-controls.tsx","src/docs-tooling/sketch-controls.tsx","src/stories/card.stories.tsx","src/stories/container.stories.tsx","src/stories/grid.stories.tsx","src/stories/page.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/surface.stories.tsx","src/stories/text-lockup.stories.tsx"],"tokenMapping":{},"props":{"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"padding":{"type":"enum","values":["px16","px24"],"default":"px16"},"shadow":{"type":"boolean","default":false},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":true,"sourcePath":"src/app/components/Surface.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-27","states":["default"],"storyFiles":["src/stories/surface.stories.tsx"],"storyIds":["primitives-surface--card-grid","primitives-surface--default","primitives-surface--forced-dark","primitives-surface--item-padding","primitives-surface--with-shadow"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11","figmaId":null,"consumers":["src/app/components/doc-link-card.tsx","src/app/components/empty-state.tsx","src/app/components/grid.tsx","src/app/components/metadata-list.tsx","src/app/components/radio.test.tsx","src/app/components/stacked-card-rail.tsx","src/app/components/surface-padding.ts","src/app/components/surface.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/stories/card.stories.tsx","src/stories/grid.stories.tsx","src/stories/static-primitives.stories.tsx"],"tokenMapping":{"Surface fill":"role.card","Border stroke":"role.border","Corner radius":"role.radius"},"sourcePath":"src/app/components/Card.tsx","sourceExport":"Card","props":{"as":{"type":"string","optional":true},"padding":{"type":"enum","values":["component","item","none","px24","px16"],"default":"component"},"gap":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"tight"},"noPadding":{"type":"boolean","default":false},"variant":{"type":"enum","values":["default","accent"],"default":"default"},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"],"default":"neutral"},"bordered":{"type":"boolean","default":false},"className":{"type":"string","optional":true},"children":{"type":"ReactNode"}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11","propConstraints":{"as":{"type":"string"},"padding":{"type":"enum","values":["component","item","none","px24","px16"]},"gap":{"type":"enum","values":["tight","normal","inset","spacious"]},"noPadding":{"type":"boolean"},"variant":{"type":"enum","values":["default","accent"]},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"]},"bordered":{"type":"boolean"},"className":{"type":"string"}},"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"ComponentInstanceMatrix":{"category":"Utilities","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/component-instance-matrix.tsx","description":"ComponentInstanceMatrix — responsive specimen matrix for variant and state parity.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ComponentInstanceMatrix","sizing":"full"},"consumers":["src/stories/component-instance-matrix.stories.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"primitive","docExempt":true,"variantAxes":[],"componentProperties":[],"sourcePath":"src/app/components/ComponentInstanceMatrix.tsx","figmaLink":null,"storyFiles":["src/stories/component-instance-matrix.stories.tsx"],"storyIds":["primitives-component-instance-matrix--default","primitives-component-instance-matrix--frozen-row-state","primitives-component-instance-matrix--mobile-layout"]},"ActivityFeed":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/activity-feed.tsx","description":"ActivityFeed — chronological system event log. Renders a list of activity events using white space as the sole separator. No dividers, no borders between items. 48px gap (space.12) creates the visual grouping between events; 16px gap inside each item structures the content hierarchy. Typography mapping: title → heading3 (24px/1.25) description → body (16px/1.5) timestamp → technical (12px/1.0 mono) category → ui (14px/1.5)","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ActivityFeed","sizing":"panel"},"consumers":["src/app/components/activity-feed.test.tsx","src/index.ts","src/stories/activity-feed.stories.tsx"],"tokenMapping":{},"props":{"events":{"type":"ActivityEvent[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"pattern","docExempt":true,"variantAxes":[],"componentProperties":[],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{}},{"name":"item","figmaSlotName":"Item","tokenBinding":{}},{"name":"avatar","figmaSlotName":"Avatar","tokenBinding":{"fill":"semantic.color.surface.raised"}},{"name":"title","figmaSlotName":"Title","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"description","figmaSlotName":"Description","tokenBinding":{"fill":"semantic.color.content.secondary"}},{"name":"timestamp","figmaSlotName":"Timestamp","tokenBinding":{"fill":"semantic.color.content.secondary"}}],"sourcePath":"src/app/components/ActivityFeed.tsx","figmaLink":null,"storyFiles":["src/stories/activity-feed.stories.tsx"],"storyIds":["primitives-activity-feed--all-success","primitives-activity-feed--default","primitives-activity-feed--errors-and-warnings","primitives-activity-feed--single-event"]},"HeadingStack":{"category":"Typography","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/heading-stack.tsx","description":"HeadingStack — enforced vertical rhythm for heading + subheading pairs. Automatically handles gap and secondary color, preventing manual stacking. - Heading level: \'heading1\' | \'heading2\' | \'heading3\' - Gap: px4 (tight) | px8 (default) - Subheading color: always var(--semantic-color-content-secondary) GUARDRAIL: Never manually stack headings using Stack. Always use HeadingStack. Usage: <HeadingStack level=\\"heading1\\" heading=\\"Main Title\\" subheading=\\"Subtitle text\\" /> <HeadingStack level=\\"heading2\\" heading=\\"Section\\" subheading=\\"Description\\" gap=\\"px4\\" />","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HeadingStack","sizing":"panel"},"consumers":["src/app/components/heading-stack.test.tsx","src/stories/heading-stack.stories.tsx"],"tokenMapping":{},"props":{"heading":{"type":"string"},"subheading":{"type":"string"},"level":{"type":"HdsHeadingLevel"},"gap":{"type":"HdsHeadingGap","optional":true},"as":{"type":"ElementType","optional":true},"headingAs":{"type":"HdsHeadingTag","optional":true},"subheadingAs":{"type":"HdsSupportingTag","optional":true}},"allowedChildren":[],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[{"name":"Heading","type":"TEXT","defaultValue":"Heading","sourceProp":"heading","boundTo":"characters","targetSelector":"Heading"},{"name":"Subheading","type":"TEXT","defaultValue":"Supporting subheading","sourceProp":"subheading","boundTo":"characters","targetSelector":"Subheading"}],"states":["default"],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.subgrid.gap"}},{"name":"heading","figmaSlotName":"Heading","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"subtext","figmaSlotName":"Subtext","tokenBinding":{"fill":"semantic.color.content.secondary"}}],"tier":"primitive","docExempt":true,"sourcePath":"src/app/components/HeadingStack.tsx","figmaLink":null,"storyFiles":["src/stories/heading-stack.stories.tsx"],"storyIds":["primitives-heading-stack--all-levels","primitives-heading-stack--default","primitives-heading-stack--heading-1","primitives-heading-stack--heading-2","primitives-heading-stack--heading-3","primitives-heading-stack--tight-gap"]},"HdsSystemDocLayout":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/layouts/HdsSystemDocLayout.tsx","description":"HdsSystemDocLayout — single centered content column for documentation pages. Thin wrapper around DocLayout: takes only `contentSlot` and `contentMaxWidth`, with no sidebar or nav region to pass one into. Not the three-column docs shell (left rail + content + right rail) — that is tracked as its own shell component (hds#280).","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsSystemDocLayout","sizing":"panel"},"consumers":["src/app/layouts/DocLayout.tsx","src/index.ts"],"tokenMapping":{"TOC section gap":"semantic.space.sidebar.sectionGap","TOC label color":"semantic.color.content.secondary"},"props":{"contentSlot":{"type":"ReactNode"},"contentMaxWidth":{"type":"enum","values":["content","max","narrow"],"default":"content"}},"allowedChildren":["*"],"propConstraints":{"contentSlot":{"type":"ReactNode"},"contentMaxWidth":{"type":"enum","values":["content","max","narrow"]}},"requiredProps":["contentSlot"],"a11yRules":[{"rule":"Content sections must register with HdsTocContext to populate the on-this-page TOC","required":true}],"tier":"template","docExempt":true,"variantAxes":[],"componentProperties":[],"slots":[{"name":"root","figmaSlotName":"Root"},{"name":"nav","figmaSlotName":"Nav"},{"name":"content","figmaSlotName":"Content"},{"name":"toc","figmaSlotName":"Toc","tokenBinding":{"color":"semantic.color.content.secondary"}}],"figmaLink":null,"storyFiles":[],"storyIds":[]},"Text":{"category":"Typography","filePath":"src/app/components/text.tsx","description":"Text — polymorphic typography primitive spanning the full HDS type ramp.","hidden":false,"props":{"typography":{"type":"string","optional":true},"fill":{"type":"string","optional":true},"text":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{"typography":{"type":"string"},"fill":{"type":"string"}},"requiredProps":[],"a11yRules":[],"categorySource":"jsdoc","governedCategory":true,"figmaUrl":null,"figmaId":null,"preview":{"exportName":"Text","sizing":"panel"},"consumers":["src/app/components/alert-dialog.tsx","src/app/components/animated-label.tsx","src/app/components/card.tsx","src/app/components/date-input.tsx","src/app/components/date-time-input.tsx","src/app/components/dialog.tsx","src/app/components/error-pattern.tsx","src/app/components/foundation-swatch.tsx","src/app/components/hds-tooltip.tsx","src/app/components/nav-item.tsx","src/app/components/table.tsx","src/app/components/text-lockup.tsx","src/app/components/tokenTableUtils.ts","src/app/components/toolbar.test.tsx","src/app/design-system/generated-token-descriptions.ts","src/brand/overlay.ts","src/docs-tooling/preview-frame.tsx","src/stories/container.stories.tsx","src/stories/disclosure.stories.tsx","src/stories/error-boundary.stories.tsx","src/stories/grid.stories.tsx","src/stories/inline-code.stories.tsx","src/stories/input.stories.tsx","src/stories/page.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/skeleton.stories.tsx","src/stories/sketch.stories.tsx","src/stories/surface.stories.tsx","src/stories/text.stories.tsx","src/stories/toolbar.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":true,"sourcePath":"src/app/components/Text.tsx","figmaLink":null,"storyFiles":["src/stories/error-boundary.stories.tsx","src/stories/text.stories.tsx"],"storyIds":["feedback-error-boundary--default","feedback-error-boundary--with-min-height","primitives-text--body","primitives-text--caption","primitives-text--display","primitives-text--full-ramp","primitives-text--heading-1","primitives-text--heading-2","primitives-text--heading-3","primitives-text--technical","primitives-text--ui"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/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/command-palette.tsx","src/app/components/dialog.test.tsx","src/app/components/image-lightbox.test.tsx","src/app/components/image-lightbox.tsx","src/app/components/menu.tsx","src/app/components/popover.tsx","src/stories/alert.stories.tsx","src/stories/combobox.stories.tsx","src/stories/dialog.stories.tsx","src/stories/table.stories.tsx"],"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":{"open":{"type":"boolean","optional":true},"defaultOpen":{"type":"boolean","optional":true},"modal":{"type":"boolean","default":true},"children":{"type":"ReactNode"}},"tokens":{"background":"role.popover","text":"role.popover-foreground","border":"role.border","radius":"role.radius","shadow":"semantic.shadow.overlay","scrim":"role.foreground","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"}}],"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27","propConstraints":{"open":{"type":"boolean"},"defaultOpen":{"type":"boolean"},"modal":{"type":"boolean"}},"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"StackedCardRail":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/stacked-card-rail.tsx","description":"StackedCardRail — horizontally-scrolling stacked card carousel. Scroll mechanism: vertical scroll on an absolutely-positioned inner container is mapped to horizontal scroll on a sticky inner strip via a single scroll event listener. Cards use CSS scroll-driven animation (animation-timeline: view(x …)) for the stack/unstack effect where the browser supports it; a plain horizontal rail is the graceful fallback. Browser compat note: - animation-timeline: view() — Chrome 115+, Firefox 110+ (behind flag until v114), Safari 18+ (TP only as of 2025). The @supports guard ensures the stacking animation is only applied when the feature is available; all other browsers get a clean scrollable row. - :has() selector (neighbour shift on hover) — Chrome 105+, FF 121+, Safari 15.4+. Gated with @supports selector(:has(+ *)).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"StackedCardRail","sizing":"panel"},"consumers":["src/index.ts","src/stories/stacked-card-rail.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"cards":{"type":"StackedCardRailCard[]","optional":false}},"allowedChildren":[],"propConstraints":{},"requiredProps":["cards"],"a11yRules":[],"storyFiles":["src/stories/stacked-card-rail.stories.tsx"],"storyIds":["patterns-stacked-card-rail--default","patterns-stacked-card-rail--sparse","patterns-stacked-card-rail--with-links"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138","tier":"primitive","preview":{"exportName":"Button","sizing":"panel"},"consumers":["src/app/components/activity-feed.tsx","src/app/components/alert-dialog.tsx","src/app/components/animated-label.tsx","src/app/components/button-group.test.tsx","src/app/components/button-group.tsx","src/app/components/card.tsx","src/app/components/dialog.tsx","src/app/components/error-boundary.tsx","src/app/components/error-pattern.tsx","src/app/components/form.tsx","src/app/components/icon-button.tsx","src/app/components/image-lightbox.tsx","src/app/components/menu.tsx","src/app/components/multi-selector.tsx","src/app/components/pagination.tsx","src/app/components/popover.tsx","src/app/components/segmented-control.tsx","src/app/components/toast.tsx","src/app/components/toolbar.test.tsx","src/app/components/toolbar.tsx","src/app/context/DemoStateContext.tsx","src/app/design-system/generated-token-descriptions.ts","src/docs-tooling/api-reference.tsx","src/docs-tooling/doc-page-header.test.tsx","src/docs-tooling/sketch-controls.tsx","src/docs-tooling/variant-strip.tsx","src/form/index.ts","src/mui/index.ts","src/stories/alert-dialog.stories.tsx","src/stories/button-group.stories.tsx","src/stories/button.stories.tsx","src/stories/code-block.stories.tsx","src/stories/combobox.stories.tsx","src/stories/dialog.stories.tsx","src/stories/form.stories.tsx","src/stories/hds-tooltip.stories.tsx","src/stories/icon-button.stories.tsx","src/stories/image-lightbox.stories.tsx","src/stories/inline-code.stories.tsx","src/stories/menu.stories.tsx","src/stories/nav-group.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/popover.stories.tsx","src/stories/table.stories.tsx","src/stories/text-lockup.stories.tsx","src/stories/toast.stories.tsx","src/stories/toolbar.stories.tsx","src/stories/top-nav.stories.tsx"],"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":{"variant":{"type":"enum","values":["primary","secondary","tertiary"],"default":"secondary"},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"],"default":"neutral"},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"disabled":{"type":"boolean","default":false},"loading":{"type":"boolean","default":false},"label":{"type":"string","optional":true},"iconLeft":{"type":"ReactNode","optional":true},"iconRight":{"type":"ReactNode","optional":true},"iconOnly":{"type":"boolean","default":false}},"tokens":{"background":"role.primary","text":"role.primary-foreground","border":"role.input","hoverSurface":"role.accent","hoverText":"role.accent-foreground","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":{"variant":{"type":"enum","values":["primary","secondary","tertiary"]},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"]},"size":{"type":"enum","values":["sm","md","lg"]},"disabled":{"type":"boolean"},"loading":{"type":"boolean"},"label":{"type":"string"},"iconOnly":{"type":"boolean"}},"storyFiles":["src/stories/button.stories.tsx"],"storyIds":["primitives-button--all-variants-row","primitives-button--disabled","primitives-button--large","primitives-button--loading","primitives-button--medium","primitives-button--primary","primitives-button--secondary","primitives-button--small","primitives-button--tertiary"]},"Callout":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/callout.tsx","description":"Tone-driven side-rule callout for status, quotes, hypotheses.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85","tier":"primitive","preview":{"exportName":"Callout","sizing":"panel"},"consumers":["src/stories/callout.stories.tsx"],"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}],"storyFiles":["src/stories/callout.stories.tsx"],"storyIds":["primitives-callout--accent","primitives-callout--all-tones","primitives-callout--danger","primitives-callout--default","primitives-callout--italic","primitives-callout--success","primitives-callout--warning"]},"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. communicate \\"no data yet\\" with consistent muted typography instead of agents inventing one-off `<p>No items.</p>` lines. use for full-page errors (use ErrorPage) or for loading states (use a skeleton). Do NOT wrap in Surface or Card — the empty state is a typographic message, not a chrome-bearing container.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352","tier":"primitive","preview":{"exportName":"EmptyState","sizing":"panel"},"consumers":["src/docs-tooling/lab/legacy-token-detail.tsx","src/stories/empty-state.stories.tsx","src/stories/patterns-layout.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true},"description":{"type":"ReactNode","optional":true},"title":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/empty-state.stories.tsx"],"storyIds":["primitives-empty-state--default","primitives-empty-state--in-grid","primitives-empty-state--title-only","primitives-empty-state--with-description"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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/textarea.tsx","src/form/hds-form.tsx","src/stories/field.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/sketch.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string"},"mono":{"type":"boolean","default":false},"tone":{"type":"enum","values":["success","warning","danger","default"],"default":"default"},"value":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{"label":{"type":"string"},"mono":{"type":"boolean"},"tone":{"type":"enum","values":["success","warning","danger","default"]}},"requiredProps":["label"],"a11yRules":[{"rule":"Label must describe the value; pair with aria-describedby when value is non-trivial","required":false}],"storyFiles":["src/stories/field.stories.tsx"],"storyIds":["primitives-field--all-tones","primitives-field--danger","primitives-field--default","primitives-field--info","primitives-field--metadata-grid","primitives-field--mono","primitives-field--success","primitives-field--warning","primitives-field--with-children"]},"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/not-found-pattern.tsx","src/app/components/pagination.test.tsx","src/app/components/pagination.tsx","src/app/components/toast.tsx","src/app/design-system/generated-token-descriptions.ts","src/brand/overlay.ts","src/index.ts","src/stories/error-pattern.stories.tsx","src/stories/heading-stack.stories.tsx","src/stories/not-found-pattern.stories.tsx","src/stories/page.stories.tsx","src/stories/pagination.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/table.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"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":[],"storyFiles":["src/stories/page.stories.tsx","src/stories/patterns-layout.stories.tsx"],"storyIds":["layout-page--compact-padding","layout-page--content-width","layout-page--default","layout-page--no-padding","patterns-layout--dashboard-grid","patterns-layout--detail-page","patterns-layout--empty-state-screen","patterns-layout--form-screen"]},"Stat":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/stat.tsx","description":"Headline metric — large value, uppercase caption label, optional sub-line.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247","tier":"primitive","preview":{"exportName":"Stat","sizing":"panel"},"consumers":["src/stories/stat.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string"},"sub":{"type":"ReactNode","optional":true},"tone":{"type":"enum","values":["success","warning","danger","default"],"default":"default"},"value":{"type":"ReactNode"}},"allowedChildren":[],"propConstraints":{"label":{"type":"string"},"tone":{"type":"enum","values":["success","warning","danger","default"]}},"requiredProps":["label","value"],"a11yRules":[{"rule":"Provide an accessible name for the stat when value is symbolic (—, ✓, etc.)","required":false}],"storyFiles":["src/stories/stat.stories.tsx"],"storyIds":["primitives-stat--all-tones","primitives-stat--danger","primitives-stat--default","primitives-stat--success","primitives-stat--warning","primitives-stat--with-sub"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350","tier":"pattern","preview":{"exportName":"StatusListItem","sizing":"panel"},"consumers":["src/app/components/status-tile.tsx","src/stories/status-list-item.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"notes":{"type":"ReactNode[]","optional":true},"title":{"type":"ReactNode"},"tone":{"type":"enum","values":["info","success","warning","danger","neutral"],"default":"neutral"},"trailing":{"type":"ReactNode","optional":true}},"allowedChildren":[],"propConstraints":{"tone":{"type":"enum","values":["info","success","warning","danger","neutral"]}},"requiredProps":["title"],"a11yRules":[{"rule":"Status dot is decorative (aria-hidden); convey status meaning via title or trailing badge","required":true}],"storyFiles":["src/stories/status-list-item.stories.tsx"],"storyIds":["primitives-status-list-item--danger","primitives-status-list-item--default","primitives-status-list-item--info","primitives-status-list-item--success","primitives-status-list-item--warning","primitives-status-list-item--with-trailing"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292","tier":"pattern","preview":{"exportName":"StatusTile","sizing":"panel"},"consumers":["src/stories/status-list-item.stories.tsx","src/stories/status-tile.stories.tsx"],"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":[],"storyFiles":["src/stories/status-tile.stories.tsx"],"storyIds":["primitives-status-tile--danger","primitives-status-tile--default","primitives-status-tile--tile-grid","primitives-status-tile--warning","primitives-status-tile--with-trailing-badge"]},"TileGrid":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/tile-grid.tsx","description":"Auto-fill responsive grid for status/micro tiles. Wraps tile children in a one-line grid declaration so pages don\'t repeat the auto-fill minmax recipe.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TileGrid","sizing":"panel"},"consumers":["src/stories/status-tile.stories.tsx","src/stories/tile-grid.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"gap":{"type":"enum","values":["sm","md","xs"],"default":"sm"},"minTileWidth":{"type":"string","default":"260px"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tile-grid.stories.tsx"],"storyIds":["primitives-tile-grid--default","primitives-tile-grid--gap-md","primitives-tile-grid--gap-xs","primitives-tile-grid--narrow-tiles","primitives-tile-grid--wide-tiles"]},"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":{},"allowedChildren":[],"propConstraints":{},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15","tier":"primitive","preview":{"exportName":"Badge","sizing":"panel"},"consumers":["src/app/components/alert.tsx","src/app/components/card.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/docs-tooling/lab/legacy-token-detail.tsx","src/mui/index.ts","src/stories/badge.stories.tsx","src/stories/code-block.stories.tsx","src/stories/combobox.stories.tsx","src/stories/component-instance-matrix.stories.tsx","src/stories/nav-group.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/static-primitives.stories.tsx","src/stories/table.stories.tsx"],"tokenMapping":{},"storyFiles":["src/stories/badge.stories.tsx"],"storyIds":["primitives-badge--all-tones","primitives-badge--danger","primitives-badge--info","primitives-badge--neutral","primitives-badge--success","primitives-badge--warning"]},"TextLockup":{"variantAxes":["size"],"componentProperties":[{"name":"Eyebrow","type":"TEXT","defaultValue":"EYEBROW","sourceProp":"eyebrow","boundTo":"characters","targetSelector":"Eyebrow"},{"name":"Title","type":"TEXT","defaultValue":"Title text","sourceProp":"title","boundTo":"characters","targetSelector":"Title"},{"name":"Description","type":"TEXT","defaultValue":"Description","sourceProp":"description","boundTo":"characters","targetSelector":"Description"}],"states":["default"],"filePath":"src/app/components/text-lockup.tsx","props":{},"allowedChildren":[],"propConstraints":{},"requiredProps":[],"a11yRules":[],"description":"TextLockup - governed title-and-description pairing primitive.","category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"figmaUrl":null,"figmaId":"text-lockup-pattern","figmaLink":null,"tier":"pattern","preview":{"exportName":"TextLockup","sizing":"compact"},"consumers":["src/stories/text-lockup.stories.tsx"],"tokenMapping":{},"storyFiles":["src/stories/text-lockup.stories.tsx"],"storyIds":["primitives-text-lockup--centered","primitives-text-lockup--detail","primitives-text-lockup--hero","primitives-text-lockup--numbered","primitives-text-lockup--section","primitives-text-lockup--with-eyebrow"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"AssetImg","sizing":"panel"},"consumers":["src/app/components/hds-tooltip.tsx","src/app/components/image-lightbox.tsx","src/app/components/tooltip.tsx","src/app/data/hdsEditorial.tsx","src/index.ts","src/stories/asset-img.stories.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}],"storyFiles":["src/stories/asset-img.stories.tsx"],"storyIds":["primitives-asset-img--default","primitives-asset-img--detail-context","primitives-asset-img--lightbox-context","primitives-asset-img--placeholder-fallback","primitives-asset-img--with-title"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89","tier":"primitive","preview":{"exportName":"Tabs","sizing":"panel"},"consumers":["src/stories/combobox.stories.tsx","src/stories/tabs.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tabs.stories.tsx"],"storyIds":["primitives-tabs--controlled","primitives-tabs--default","primitives-tabs--many-tabs","primitives-tabs--with-disabled-tab"]},"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).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsContent","sizing":"panel"},"consumers":["src/stories/tabs.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tabs.stories.tsx"],"storyIds":["primitives-tabs--controlled","primitives-tabs--default","primitives-tabs--many-tabs","primitives-tabs--with-disabled-tab"]},"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).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsList","sizing":"panel"},"consumers":["src/stories/tabs.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tabs.stories.tsx"],"storyIds":["primitives-tabs--controlled","primitives-tabs--default","primitives-tabs--many-tabs","primitives-tabs--with-disabled-tab"]},"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).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsTrigger","sizing":"panel"},"consumers":["src/stories/tabs.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tabs.stories.tsx"],"storyIds":["primitives-tabs--controlled","primitives-tabs--default","primitives-tabs--many-tabs","primitives-tabs--with-disabled-tab"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17","figmaId":null,"preview":{"exportName":"Radio","sizing":"panel"},"consumers":["src/app/components/checkbox.tsx","src/app/components/radio.test.tsx","src/app/hooks/useInteractionState.test.ts","src/app/hooks/useInteractionState.ts","src/index.ts","src/stories/menu.stories.tsx","src/stories/radio.stories.tsx"],"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17","storyFiles":["src/stories/radio.stories.tsx"],"storyIds":["primitives-radio--default","primitives-radio--disabled","primitives-radio--disabled-selected","primitives-radio--group","primitives-radio--selected"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/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/date-range-input.test.tsx","src/app/components/date-range-input.tsx","src/app/components/form.tsx","src/app/components/multi-selector.test.tsx","src/app/components/multi-selector.tsx","src/app/components/select.test.tsx","src/app/data/hdsEditorial.tsx","src/docs-tooling/lab/legacy-token-detail.tsx","src/index.ts","src/stories/checkbox.stories.tsx","src/stories/combobox.stories.tsx","src/stories/select.stories.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":{"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49","storyFiles":["src/stories/select.stories.tsx"],"storyIds":["primitives-select--default","primitives-select--no-label"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265","figmaId":null,"preview":{"exportName":"Slider","sizing":"panel"},"consumers":["src/index.ts","src/stories/slider.stories.tsx"],"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265","storyFiles":["src/stories/slider.stories.tsx"],"storyIds":["primitives-slider--decimal","primitives-slider--default","primitives-slider--stepped","primitives-slider--typography-controls"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19","figmaId":null,"preview":{"exportName":"Toggle","sizing":"panel"},"consumers":["src/app/components/checkbox.tsx","src/app/components/radio.tsx","src/app/components/toggle-button.tsx","src/app/components/toggle.test.tsx","src/app/data/hdsEditorial.tsx","src/app/hooks/useInteractionState.test.ts","src/app/hooks/useInteractionState.ts","src/docs-tooling/shell-controls.tsx","src/index.ts","src/stories/toggle.stories.tsx"],"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":{"label":{"type":"string"},"checked":{"type":"boolean","default":false},"disabled":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19","storyFiles":["src/stories/toggle.stories.tsx"],"storyIds":["primitives-toggle--default","primitives-toggle--disabled","primitives-toggle--disabled-on","primitives-toggle--on","primitives-toggle--settings-group"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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/design-system/generated-token-descriptions.ts","src/stories/avatar-group.stories.tsx","src/stories/avatar.stories.tsx"],"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":[],"storyFiles":["src/stories/avatar.stories.tsx"],"storyIds":["primitives-avatar--all-sizes","primitives-avatar--default","primitives-avatar--explicit-initials","primitives-avatar--large","primitives-avatar--small","primitives-avatar--with-image"]},"Progress":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/progress.tsx","description":"Linear progress. Determinate when `value` is a number, else indeterminate.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91","tier":"primitive","preview":{"exportName":"Progress","sizing":"panel"},"consumers":["src/app/components/card.tsx","src/app/components/progress.test.tsx","src/stories/card.stories.tsx","src/stories/circular-progress.stories.tsx","src/stories/progress.stories.tsx","src/stories/table.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string","default":"Progress"},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"value":{"type":"number","default":"null"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/progress.stories.tsx"],"storyIds":["primitives-progress--all-sizes","primitives-progress--complete","primitives-progress--default","primitives-progress--indeterminate"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95","tier":"primitive","preview":{"exportName":"Skeleton","sizing":"panel"},"consumers":["src/app/components/skeleton.test.tsx","src/stories/patterns-layout.stories.tsx","src/stories/patterns-scroll.stories.tsx","src/stories/skeleton.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"height":{"type":"string | number","optional":true},"variant":{"type":"enum","values":["text","rectangular","circular"],"default":"rectangular"},"width":{"type":"string | number","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/skeleton.stories.tsx"],"storyIds":["primitives-skeleton--all-variants","primitives-skeleton--card-placeholder","primitives-skeleton--circular","primitives-skeleton--default","primitives-skeleton--text"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106","tier":"primitive","preview":{"exportName":"Spinner","sizing":"panel"},"consumers":["src/app/components/spinner.test.tsx","src/stories/spinner.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string","default":"Loading"},"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/spinner.stories.tsx"],"storyIds":["primitives-spinner--all-sizes","primitives-spinner--color-inheritance","primitives-spinner--custom-label","primitives-spinner--default","primitives-spinner--large","primitives-spinner--small"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159","tier":"pattern","preview":{"exportName":"Breadcrumb","sizing":"panel"},"consumers":["src/app/components/breadcrumb.test.tsx","src/app/components/table.tsx","src/stories/breadcrumb.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"items":{"type":"BreadcrumbItem[]"},"label":{"type":"string","default":"Breadcrumb"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/breadcrumb.stories.tsx"],"storyIds":["primitives-breadcrumb--custom-label","primitives-breadcrumb--deep-trail","primitives-breadcrumb--default","primitives-breadcrumb--shallow-trail","primitives-breadcrumb--single-crumb"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194","tier":"pattern","preview":{"exportName":"Pagination","sizing":"panel"},"consumers":["src/app/components/pagination.test.tsx","src/stories/pagination.stories.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":[],"storyFiles":["src/stories/pagination.stories.tsx"],"storyIds":["primitives-pagination--default","primitives-pagination--few-pages","primitives-pagination--last-page","primitives-pagination--middle-page","primitives-pagination--wide-siblings"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367","tier":"pattern","preview":{"exportName":"ToastProvider","sizing":"panel"},"consumers":["src/app/components/toast.test.tsx","src/stories/toast.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"duration":{"type":"number","default":5000},"swipeDirection":{"type":"SwipeDirection","default":"right"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/toast.stories.tsx"],"storyIds":["primitives-toast--danger","primitives-toast--default","primitives-toast--info","primitives-toast--success","primitives-toast--warning"]},"Combobox":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/combobox.tsx","description":"Combobox — searchable single-select (Popover + filtered listbox). A select-with-search built on the HDS Popover. The trigger shows the current selection; opening reveals a search field that filters the option list. Full keyboard support (↑/↓ to move, Enter to choose, Esc/outside-click to close) and listbox/option ARIA. Controlled via `value` + `onChange`. <Combobox options={[{ value: \'us\', label: \'United States\' }, …]} value={country} onChange={setCountry} placeholder=\\"Select a country\\" />","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237","tier":"pattern","preview":{"exportName":"Combobox","sizing":"panel"},"consumers":["src/app/components/combobox.test.tsx","src/app/components/date-range-input.tsx","src/app/components/form.tsx","src/app/components/multi-selector.tsx","src/stories/combobox.stories.tsx","src/stories/popover.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"aria-label":{"type":"string","optional":true},"className":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"emptyMessage":{"type":"string","default":"No results"},"onChange":{"type":"(value: string) => void"},"options":{"type":"ComboboxOption[]"},"placeholder":{"type":"string","default":"Select…"},"searchPlaceholder":{"type":"string","default":"Search…"},"value":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/combobox.stories.tsx"],"storyIds":["primitives-combobox--default","primitives-combobox--disabled-trigger","primitives-combobox--few-options","primitives-combobox--pre-selected","primitives-combobox--with-disabled-option"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94","tier":"pattern","preview":{"exportName":"Form","sizing":"panel"},"consumers":["src/app/components/form.test.tsx","src/app/data/hdsEditorial.tsx","src/form/hds-form.tsx","src/form/index.ts","src/form/use-hds-form.ts","src/index.ts","src/stories/form.stories.tsx","src/stories/patterns-layout.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/form.stories.tsx"],"storyIds":["patterns-form--controlled","patterns-form--default","patterns-form--with-description","patterns-form--with-error"]},"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/form.test.tsx","src/form/form-adapter.test.tsx","src/form/hds-form.tsx","src/stories/form.stories.tsx","src/stories/patterns-layout.stories.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":[],"storyFiles":["src/stories/form.stories.tsx"],"storyIds":["patterns-form--controlled","patterns-form--default","patterns-form--with-description","patterns-form--with-error"]},"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":[],"storyFiles":["src/stories/form.stories.tsx"],"storyIds":["patterns-form--controlled","patterns-form--default","patterns-form--with-description","patterns-form--with-error"]},"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/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"brand":{"type":"string","optional":true},"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":[],"storyFiles":[],"storyIds":[]},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"AvatarGroup","sizing":"panel"},"consumers":["src/app/components/avatar-group.test.tsx","src/stories/avatar-group.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"max":{"type":"number","optional":true},"size":{"type":"AvatarGroupSize","default":"md"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/avatar-group.stories.tsx"],"storyIds":["primitives-avatar-group--default","primitives-avatar-group--sizes","primitives-avatar-group--with-overflow"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Blockquote","sizing":"panel"},"consumers":["src/app/components/blockquote.test.tsx","src/stories/blockquote.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"attribution":{"type":"ReactNode","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/blockquote.stories.tsx"],"storyIds":["primitives-blockquote--default","primitives-blockquote--sizes","primitives-blockquote--with-attribution"]},"ButtonGroup":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/button-group.tsx","description":"Groups Button (or button-like) children into a single attached segment.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"ButtonGroup","sizing":"panel"},"consumers":["src/app/components/button-group.test.tsx","src/stories/button-group.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"orientation":{"type":"enum","values":["horizontal","vertical"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/button-group.stories.tsx"],"storyIds":["primitives-button-group--default","primitives-button-group--vertical"]},"InputGroup":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/input-group.tsx","description":"A single-line input with optional `leading`/`trailing` adornments.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"InputGroup","sizing":"panel"},"consumers":["src/app/components/input-group.test.tsx","src/stories/input-group.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true},"leading":{"type":"ReactNode","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"trailing":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/input-group.stories.tsx"],"storyIds":["primitives-input-group--default","primitives-input-group--with-adornments"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Kbd","sizing":"panel"},"consumers":["src/app/components/kbd.test.tsx","src/stories/kbd.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/kbd.stories.tsx"],"storyIds":["primitives-kbd--combination","primitives-kbd--default","primitives-kbd--sizes"]},"StatusDot":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/status-dot.tsx","description":"A small solid dot conveying a semantic status via `tone`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"StatusDot","sizing":"panel"},"consumers":["src/app/components/status-dot.test.tsx","src/stories/status-dot.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"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":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/status-dot.stories.tsx"],"storyIds":["primitives-status-dot--default","primitives-status-dot--tones","primitives-status-dot--with-label-text"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Timestamp","sizing":"panel"},"consumers":["src/app/components/timestamp.test.tsx","src/stories/timestamp.stories.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":[],"storyFiles":["src/stories/timestamp.stories.tsx"],"storyIds":["primitives-timestamp--default","primitives-timestamp--formats"]},"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","src/stories/visually-hidden.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"span"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/visually-hidden.stories.tsx"],"storyIds":["primitives-visually-hidden--default"]},"CircularProgress":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/circular-progress.tsx","description":"A circular progress ring; pass `value`/`max` or set `indeterminate`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CircularProgress","sizing":"panel"},"consumers":["src/app/components/circular-progress.test.tsx","src/stories/circular-progress.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"indeterminate":{"type":"boolean","default":false},"label":{"type":"string","optional":true},"max":{"type":"number","default":100},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"value":{"type":"number","default":0}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/circular-progress.stories.tsx"],"storyIds":["primitives-circular-progress--default","primitives-circular-progress--indeterminate","primitives-circular-progress--sizes","primitives-circular-progress--tones"]},"SideNav":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/side-nav.tsx","description":"SideNav - sidebar navigation row primitive. Two levels: root — top-level section link. Full-width row using the shared nav label type style. nested — child page link. Keeps the same full-width hit area and label type treatment, with indentation handled via inner padding only. No indicator bar (reserved for HdsTocNav). Idle text = content-secondary → primary on hover/active. Accent surface fill on active state.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332","figmaId":null,"consumers":["src/app/components/side-nav.test.tsx","src/app/layouts/HdsDocsShell.tsx","src/index.ts","src/stories/side-nav.stories.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{"exportName":"SideNav","sizing":"panel"},"tier":"primitive","docExempt":false,"variantAxes":[],"componentProperties":[],"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332","storyFiles":["src/stories/side-nav.stories.tsx"],"storyIds":["navigation-side-nav--disabled","navigation-side-nav--nested-active","navigation-side-nav--root","navigation-side-nav--sidebar-group"]},"CommandPalette":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/command-palette.tsx","description":"Mountable trigger + dialog. Drop into header slot; component manages its own open state and Cmd-K / Ctrl-K global keybinding.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CommandPalette","sizing":"panel"},"consumers":["src/app/data/nav-model.test.ts","src/app/lib/hds-search.ts","src/index.ts","src/stories/command-palette.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/command-palette.stories.tsx"],"storyIds":["primitives-command-palette--default"]},"Lightbox":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/image-lightbox.tsx","description":"Lightbox — full-bleed image viewer built on Radix Dialog. Full-bleed image viewer built on Radix Dialog (raw primitives, not the card `Dialog` wrapper — a lightbox is a transparent full-screen surface, not a centered card). Radix owns the modal a11y contract the hand-rolled version was missing: focus trap, focus restore on close, Escape, and scroll-lock. Motion is retained via `forceMount` + AnimatePresence + `asChild`: the backdrop fades and the image panel scales/translates in, exactly as before.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Lightbox","sizing":"panel"},"consumers":["src/app/components/image-lightbox.test.tsx","src/app/data/hdsEditorial.tsx","src/index.ts","src/stories/asset-img.stories.tsx","src/stories/image-lightbox.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"alt":{"type":"string","optional":true},"caption":{"type":"string","optional":true},"captionHref":{"type":"string","optional":true},"captionLabel":{"type":"string","optional":true},"naturalHeight":{"type":"number","optional":true},"naturalWidth":{"type":"number","optional":true},"onClose":{"type":"() => void"},"open":{"type":"boolean"},"src":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/image-lightbox.stories.tsx"],"storyIds":["primitives-image-lightbox--default"]},"AppShell":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/app-shell.tsx","description":"Renders a header/sidebar/main application frame, e.g. `<AppShell sidebar={<Nav />}>...</AppShell>`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"template","preview":{"exportName":"AppShell","sizing":"panel"},"consumers":["src/app/components/app-shell.test.tsx","src/index.ts","src/stories/app-shell.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/app-shell.stories.tsx"],"storyIds":["patterns-app-shell--default","patterns-app-shell--no-sidebar","patterns-app-shell--wide-sidebar"]},"FileInput":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/file-input.tsx","description":"A dashed dropzone that opens the native file picker or accepts a drag-and-drop.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"FileInput","sizing":"panel"},"consumers":["src/app/components/file-input.test.tsx","src/index.ts","src/stories/file-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"accept":{"type":"string","optional":true},"disabled":{"type":"boolean","optional":true},"label":{"type":"ReactNode","default":"Click to upload or drag and drop"},"multiple":{"type":"boolean","optional":true},"onFiles":{"type":"(files: File[]) => void","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/file-input.stories.tsx"],"storyIds":["patterns-file-input--default","patterns-file-input--disabled","patterns-file-input--multiple-images"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"MetadataList","sizing":"panel"},"consumers":["src/app/components/metadata-list.test.tsx","src/stories/metadata-list.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"items":{"type":"MetadataListItem[]"},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"vertical"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/metadata-list.stories.tsx"],"storyIds":["patterns-metadata-list--default","patterns-metadata-list--divided","patterns-metadata-list--horizontal"]},"OverflowList":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/overflow-list.tsx","description":"Renders up to `max` children followed by a `+N` overflow chip (or custom node).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"OverflowList","sizing":"panel"},"consumers":["src/app/components/overflow-list.test.tsx","src/index.ts","src/stories/overflow-list.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"max":{"type":"number","optional":true},"renderOverflow":{"type":"(count: number) => ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/overflow-list.stories.tsx"],"storyIds":["patterns-overflow-list--default","patterns-overflow-list--with-overflow"]},"SelectableCard":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/selectable-card.tsx","description":"A card-shaped single checkbox — click or activate to toggle selection.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"SelectableCard","sizing":"panel"},"consumers":["src/app/components/selectable-card.test.tsx","src/stories/selectable-card.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"disabled":{"type":"boolean","optional":true},"onSelectedChange":{"type":"(selected: boolean) => void","optional":true},"selected":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/selectable-card.stories.tsx"],"storyIds":["patterns-selectable-card--default","patterns-selectable-card--disabled","patterns-selectable-card--plan-picker","patterns-selectable-card--selected"]},"Tokenizer":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/tokenizer.tsx","description":"A bordered field of Tag chips followed by a text input for adding more.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"Tokenizer","sizing":"panel"},"consumers":["src/app/components/tokenizer.test.tsx","src/stories/tokenizer.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true},"disabled":{"type":"boolean","optional":true},"onChange":{"type":"(next: string[]) => void"},"placeholder":{"type":"string","optional":true},"value":{"type":"string[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tokenizer.stories.tsx"],"storyIds":["patterns-tokenizer--default","patterns-tokenizer--disabled","patterns-tokenizer--empty"]},"TopNav":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/top-nav.tsx","description":"Top navigation bar with brand, nav, and trailing action slots.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"TopNav","sizing":"panel"},"consumers":["src/app/components/top-nav.test.tsx","src/app/layouts/HdsDocsShell.tsx","src/index.ts","src/stories/top-nav.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"brand":{"type":"ReactNode","optional":true},"children":{"type":"ReactNode","optional":true},"sticky":{"type":"boolean","optional":true},"trailing":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/top-nav.stories.tsx"],"storyIds":["patterns-top-nav--default","patterns-top-nav--sticky"]},"Carousel":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/carousel.tsx","description":"Renders children as a snap-scrolling track with Prev/Next scroll buttons.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"Carousel","sizing":"panel"},"consumers":["src/app/components/carousel.test.tsx","src/index.ts","src/stories/carousel.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"ariaLabel":{"type":"string","default":"Carousel"},"children":{"type":"ReactNode"},"showControls":{"type":"boolean","default":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/carousel.stories.tsx"],"storyIds":["patterns-carousel--default","patterns-carousel--no-controls"]},"Stepper":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/stepper.tsx","description":"Step indicator for multi-step flows. Purely presentational — no navigation.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"Stepper","sizing":"panel"},"consumers":["src/app/components/stepper.test.tsx","src/index.ts","src/stories/stepper.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"activeStep":{"type":"number"},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal"},"steps":{"type":"Step[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/stepper.stories.tsx"],"storyIds":["patterns-stepper--default","patterns-stepper--vertical"]},"Toolbar":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/toolbar.tsx","description":"Toolbar root. Groups related controls with a single roving tab-stop. Supports the native `orientation` prop (`horizontal` | `vertical`).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"Toolbar","sizing":"panel"},"consumers":["src/app/components/toolbar.test.tsx","src/index.ts","src/stories/toolbar.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/toolbar.stories.tsx"],"storyIds":["patterns-toolbar--default"]},"TreeList":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/tree-list.tsx","description":"Renders a hierarchical `role=\\"tree\\"` list; nodes with children get an expand/collapse toggle.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"TreeList","sizing":"panel"},"consumers":["src/app/components/tree-list.test.tsx","src/index.ts","src/stories/tree-list.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"defaultExpandedIds":{"type":"string[]","optional":true},"items":{"type":"TreeNode[]"},"onSelect":{"type":"(id: string) => void","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tree-list.stories.tsx"],"storyIds":["patterns-tree-list--default","patterns-tree-list--with-default-expanded"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"AlertDialog","sizing":"panel"},"consumers":["src/app/components/alert-dialog.test.tsx","src/stories/alert-dialog.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/alert-dialog.stories.tsx"],"storyIds":["primitives-alert-dialog--default"]},"AspectRatio":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/aspect-ratio.tsx","description":"Locks its single child to the given width-to-height `ratio` so media reserves its box up front and never causes layout shift while it loads.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"AspectRatio","sizing":"panel"},"consumers":["src/app/components/aspect-ratio.test.tsx","src/app/components/frame.tsx","src/stories/aspect-ratio.stories.tsx","src/stories/frame.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"ratio":{"type":"number","default":1}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/aspect-ratio.stories.tsx"],"storyIds":["primitives-aspect-ratio--square","primitives-aspect-ratio--widescreen"]},"Calendar":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/calendar.tsx","description":"Renders an accessible month grid; compose it inside a Popover for the date inputs.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Calendar","sizing":"panel"},"consumers":["src/app/components/calendar.test.tsx","src/app/components/date-input.tsx","src/app/components/date-range-input.tsx","src/app/components/date-time-input.tsx","src/index.ts","src/stories/calendar.stories.tsx","src/stories/date-input.stories.tsx","src/stories/date-range-input.stories.tsx","src/stories/date-time-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/calendar.stories.tsx"],"storyIds":["primitives-calendar--range","primitives-calendar--single"]},"ContextMenu":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/context-menu.tsx","description":"ContextMenu root + parts. Wrap the right-clickable area in `ContextMenu.Trigger`. Controlled via `onOpenChange`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"ContextMenu","sizing":"panel"},"consumers":["src/app/components/context-menu.test.tsx","src/stories/context-menu.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/context-menu.stories.tsx"],"storyIds":["primitives-context-menu--default"]},"DateInput":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/date-input.tsx","description":"Text field + calendar popover for picking a single date.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"DateInput","sizing":"panel"},"consumers":["src/app/components/date-input.test.tsx","src/stories/date-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"aria-label":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"displayFormat":{"type":"string","default":"yyyy-MM-dd"},"id":{"type":"string","optional":true},"onChange":{"type":"(date: Date) => void","optional":true},"placeholder":{"type":"string","optional":true},"value":{"type":"Date","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/date-input.stories.tsx"],"storyIds":["patterns-date-input--default","patterns-date-input--with-initial-value"]},"DateRangeInput":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/date-range-input.tsx","description":"DateRangeInput — date-range field composing the existing Popover with Calendar in range mode, so picking a start/end date reads as one overlay pattern with Combobox and Menu rather than a bespoke widget. No new primitive — built entirely on the HDS Popover + Calendar. The trigger reads like a secondary input, showing a placeholder or the formatted `from – to` range; the content is a two-month range calendar. <DateRangeInput value={range} onChange={setRange} />","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"DateRangeInput","sizing":"panel"},"consumers":["src/app/components/date-range-input.test.tsx","src/stories/date-range-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"aria-label":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"displayFormat":{"type":"string","default":"yyyy-MM-dd"},"id":{"type":"string","optional":true},"numberOfMonths":{"type":"number","default":2},"onChange":{"type":"(range: DateRange) => void","optional":true},"placeholder":{"type":"string","default":"Select date range"},"value":{"type":"DateRange","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/date-range-input.stories.tsx"],"storyIds":["patterns-date-range-input--default","patterns-date-range-input--disabled-trigger","patterns-date-range-input--pre-selected"]},"DateTimeInput":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/date-time-input.tsx","description":"Text date field + calendar popover, paired with a native time field, producing one Date.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"DateTimeInput","sizing":"panel"},"consumers":["src/app/components/date-time-input.test.tsx","src/stories/date-time-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"aria-label":{"type":"string","optional":true},"dateFormat":{"type":"string","default":"yyyy-MM-dd"},"disabled":{"type":"boolean","default":false},"id":{"type":"string","optional":true},"onChange":{"type":"(date: Date) => void","optional":true},"value":{"type":"Date","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/date-time-input.stories.tsx"],"storyIds":["patterns-date-time-input--default","patterns-date-time-input--with-initial-value"]},"HoverCard":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/hover-card.tsx","description":"HoverCard root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`; tune timing with `openDelay`/`closeDelay`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"HoverCard","sizing":"panel"},"consumers":["src/app/components/hover-card.test.tsx","src/stories/hover-card.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/hover-card.stories.tsx"],"storyIds":["primitives-hover-card--default"]},"MultiSelector":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/multi-selector.tsx","description":"MultiSelector — multi-select dropdown composing the existing Popover with a checkbox option list, so choosing several values from a fixed set reads as one overlay pattern with Combobox and Menu rather than a bespoke widget. No new dependency — built entirely on the HDS Popover. The trigger reads like a secondary Button, showing a placeholder or a `${n} selected` count; the content is a token-skinned list where each row is a checkbox toggling membership in `value`. <MultiSelector options={[{ value: \'a\', label: \'Apple\' }, { value: \'b\', label: \'Banana\' }]} value={fruits} onChange={setFruits} />","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"MultiSelector","sizing":"panel"},"consumers":["src/app/components/multi-selector.test.tsx","src/stories/multi-selector.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"onChange":{"type":"(next: string[]) => void"},"options":{"type":"MultiSelectorOption[]"},"placeholder":{"type":"string","default":"Select…"},"value":{"type":"string[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/multi-selector.stories.tsx"],"storyIds":["patterns-multi-selector--default","patterns-multi-selector--disabled-trigger","patterns-multi-selector--pre-selected"]},"TimeInput":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/time-input.tsx","description":"A native time field skinned with HDS input chrome. Value is a `HH:mm` string.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TimeInput","sizing":"panel"},"consumers":["src/app/components/date-time-input.tsx","src/app/components/time-input.test.tsx","src/stories/date-time-input.stories.tsx","src/stories/time-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/time-input.stories.tsx"],"storyIds":["primitives-time-input--default","primitives-time-input--sizes"]},"ToggleButton":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/toggle-button.tsx","description":"A single two-state toggle button exposing a native `aria-pressed` contract — use for one independent on/off control such as bold, mute, or pin.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"ToggleButton","sizing":"panel"},"consumers":["src/app/components/toggle-button.test.tsx","src/stories/toggle-button.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"variant":{"type":"enum","values":["secondary","ghost"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/toggle-button.stories.tsx"],"storyIds":["primitives-toggle-button--default","primitives-toggle-button--pressed","primitives-toggle-button--variants"]},"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. named primitive covers, without inviting ad hoc inline styles or raw hex/px values back into the system — the `sx` engine only accepts HDS token keys and a small, deliberate CSS subset. Box `sx` ONLY for genuinely one-off layout. sx colors/spacing MUST use token keys, not raw hex/px. Prefer named layout primitives over ad-hoc flex. `sx` is a deliberate SUBSET of MUI\'s sx — not all of CSS-in-JS is a feature: - Spacing shorthands (m/p/gap family) resolve numbers off the 4px HDS scale (`--primitive-space-<n>`) and named steps (\'tight\'|\'normal\'|\'inset\'|\'spacious\') off `--semantic-space-layout-*`. - `color`/`bgcolor`/`borderColor`/`fill`/`stroke` resolve dotted token keys (\'content.primary\', \'surface.raised\', \'border.subtle\', \'accent\', \'accent.hover\', \'feedback.success\', …) to the matching semantic CSS var. - Responsive `{ xs, sm, md, lg, xl }` objects compile to `min-width` media queries off the HDS breakpoint scale. - `&`-prefixed keys (\'&:hover\', \'& > *\', \'&[data-state=open]\') nest a selector, composable with responsive values. - Everything else passes through as a plain camelCase→kebab-case CSS declaration (numbers get `px` unless in the unitless allowlist). See `box-sx.ts` for the pure resolver + hashing/injection engine.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Box","sizing":"panel"},"consumers":["src/app/components/bleed.tsx","src/app/components/box-sx.ts","src/app/components/box.test.tsx","src/app/components/center.tsx","src/app/components/cluster.tsx","src/app/components/container.tsx","src/app/components/cover.tsx","src/app/components/frame.tsx","src/app/components/sidebar.tsx","src/app/components/switcher.tsx","src/app/components/toggle.tsx","src/stories/box.stories.tsx","src/stories/patterns-layout.stories.tsx"],"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":[],"storyFiles":["src/stories/box.stories.tsx"],"storyIds":["primitives-box--ampersand-selectors","primitives-box--ampersand-with-responsive","primitives-box--polymorphic-as","primitives-box--responsive-values","primitives-box--spacing-shorthands","primitives-box--token-colors"]},"Bleed":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/bleed.tsx","description":"Bleed — controlled negative-margin full-bleed within a padded container. padding\\" (a full-width image inside a padded card, a divider that should touch both edges) with a single tokenized negative-margin wrapper, so agents stop hand-rolling `margin: -24px` guesses that drift from the parent\'s actual padding token. use a semantic space step, never raw px, and MUST match the ancestor padding it is meant to cancel out. Do NOT use Bleed to fake extra spacing — its only job is canceling a specific known padding value on a specific axis. Every Layout reference: https://every-layout.dev/layouts/the-stack/ (bleed is the inverse of a padded Center/Container — HDS names it separately since \\"every-layout\\" itself does not ship a dedicated Bleed recipe).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Bleed","sizing":"panel"},"consumers":["src/app/components/bleed.test.tsx","src/stories/bleed.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"amount":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"normal"},"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"axis":{"type":"enum","values":["x","y","both"],"default":"x"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/bleed.stories.tsx"],"storyIds":["primitives-bleed--bleed-both","primitives-bleed--bleed-x"]},"Center":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/center.tsx","description":"Center — max-width column, auto-centered horizontally. max-width box with auto horizontal margins and, optionally, matching horizontal gutters — so agents stop hand-rolling `marginInline: auto` plus an ad hoc max-width value. use the semantic width scale (\'content\' | \'max\'), never a raw px value. gutter, when set, MUST use a semantic space step, never raw px. Do NOT use Center for full-bleed page shells — use Container. Do NOT use Center when you need the deprecated Container padding prop — gutter replaces it. Every Layout reference: https://every-layout.dev/layouts/center/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Center","sizing":"panel"},"consumers":["src/app/components/bleed.tsx","src/app/components/center.test.tsx","src/app/components/container.tsx","src/stories/button-group.stories.tsx","src/stories/center.stories.tsx","src/stories/patterns-layout.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"gutter":{"type":"enum","values":["tight","normal","inset","spacious"],"optional":true},"maxWidth":{"type":"enum","values":["content","max"],"default":"content"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/center.stories.tsx"],"storyIds":["primitives-center--content-width","primitives-center--max-width","primitives-center--with-gutter"]},"Cluster":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/cluster.tsx","description":"Cluster — wrapping horizontal group with even gaps. (tag rows, button groups, chip lists, filter pills) with a single flex-wrap wrapper and a tokenized gap in both axes, so agents stop hand-rolling `flexWrap` + `gap` + alignment combinations inline. horizontal groups that should wrap as a unit. Spacing MUST use semantic steps, never raw px. Do NOT use Cluster for a strict single-line row — use Stack with `direction=\\"row\\"` when wrapping is never desired. Do NOT use Cluster for two-dimensional grid layouts — use Grid. Every Layout reference: https://every-layout.dev/layouts/cluster/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Cluster","sizing":"panel"},"consumers":["src/app/components/cluster.test.tsx","src/app/components/switcher.tsx","src/stories/cluster.stories.tsx","src/stories/patterns-layout.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"align":{"type":"enum","values":["start","center","end","stretch"],"default":"center"},"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":"tight"},"justify":{"type":"enum","values":["start","center","end","space-between"],"default":"start"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/cluster.stories.tsx"],"storyIds":["primitives-cluster--default","primitives-cluster--space-between","primitives-cluster--spacious-gap"]},"Cover":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/cover.tsx","description":"Cover — vertical shell with an auto-centered main region. centered hero/main region that absorbs the remaining space, and an optional footer\\" problem via the flex auto-margin centering technique, so agents stop hand-rolling `position: absolute` centering or a fixed 50vh split. semantic space step, never raw px. minHeight is a CSS length dimension (not spacing) — defaults to \'100svh\' (small viewport height, safe against mobile browser chrome). Pass minHeight=\\"100vh\\" explicitly if you need the classic viewport unit for a target that predates svh support. Do NOT use Cover for ordinary page content flow — use Stack. Every Layout reference: https://every-layout.dev/layouts/cover/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Cover","sizing":"panel"},"consumers":["src/app/components/cover.test.tsx","src/app/components/stacked-card-rail.tsx","src/stories/cover.stories.tsx","src/stories/patterns-layout.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"centerSlot":{"type":"ReactNode","optional":true},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"footer":{"type":"ReactNode","optional":true},"gap":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"normal"},"header":{"type":"ReactNode","optional":true},"minHeight":{"type":"string","default":"100svh"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/cover.stories.tsx"],"storyIds":["primitives-cover--header-main-footer","primitives-cover--header-only","primitives-cover--main-only"]},"Frame":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/frame.tsx","description":"Frame — aspect-ratio-locked, token-clipped media box. cause layout shift while it loads, cropped to a token-governed corner radius\\" — a thin, token-skinned wrapper over `AspectRatio` (`@radix-ui/react-aspect-ratio`), which already owns the ratio-lock mechanics. Frame adds the overflow-hidden clip and semantic radius that a bare media frame needs and `AspectRatio` deliberately leaves undecorated. media (image, video, embed, map tile). radius MUST use a semantic borderRadius token, never a raw px value. Do NOT reach for bare `AspectRatio` in product code just to add a border-radius by hand — use Frame. Do NOT use Frame for non-media layout — it exists purely as a media clipping frame. Every Layout reference: https://every-layout.dev/layouts/frame/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Frame","sizing":"panel"},"consumers":["src/app/components/frame.test.tsx","src/app/components/mobius-distortion.ts","src/stories/frame.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"radius":{"type":"enum","values":["none","sm","md","full"],"default":"md"},"ratio":{"type":"number","default":"16 / 9"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/frame.stories.tsx"],"storyIds":["primitives-frame--no-radius","primitives-frame--square","primitives-frame--widescreen"]},"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. problem with the flex-basis/flex-grow disparity technique — the rail holds `sideWidth` and the content flex-basis 0 with an overwhelming flex-grow, so the pair wraps to stacked automatically once the container can no longer fit both without squeezing content below `contentMin`. No CSS media query, no JS resize observer. EXACTLY two children — the rail and the content — passed in that order. `side` controls which one visually renders as the rail; DOM order is unchanged. gap MUST use a semantic space step, never raw px. sideWidth and contentMin are CSS length dimensions (not spacing) — a length string like \'16rem\' or \'50%\' is expected, matching the check-hardcoded-spacing gate\'s own dimension-prop exemption. Do NOT use Sidebar for more than two regions — use Grid. Every Layout reference: https://every-layout.dev/layouts/sidebar/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Sidebar","sizing":"panel"},"consumers":["src/app/components/app-shell.tsx","src/app/components/sidebar.test.tsx","src/app/data/nav-model.ts","src/stories/app-shell.stories.tsx","src/stories/grid.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/pin.stories.tsx","src/stories/side-nav.stories.tsx","src/stories/sidebar.stories.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":[],"storyFiles":["src/stories/sidebar.stories.tsx"],"storyIds":["primitives-sidebar--narrow-container-stacks","primitives-sidebar--rail-end","primitives-sidebar--rail-start"]},"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. vertical stack once the container gets narrow\\" without a breakpoint or a resize observer, using the flex-basis calc() technique: each item\'s flex-basis resolves to a huge negative or huge positive number depending on whether the container is above or below `threshold`, forcing every item onto its own line once it flips. semantic space step, never raw px. threshold is a CSS length dimension (not spacing), e.g. \'30rem\'. `limit` unconditionally forces the stacked (column) layout once there are more than `limit` children, regardless of container width — use it to stop a row from thinning out into an unreadable N-up strip. Do NOT use Switcher for content that should always wrap in place — use Cluster. Every Layout reference: https://every-layout.dev/layouts/the-switcher/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Switcher","sizing":"panel"},"consumers":["src/app/components/switcher.test.tsx","src/stories/switcher.stories.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":[],"storyFiles":["src/stories/switcher.stories.tsx"],"storyIds":["primitives-switcher--default","primitives-switcher--limit-forces-stacked","primitives-switcher--narrow-container-stacks"]},"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. section scrolls — the dependency-free basis for pinned scroll scenes (the \\"tall section + sticky child\\" pattern that GSAP\'s `pin: true` solves imperatively). Reach for this before hand-rolling sticky positioning. Give the pinned element a TALLER scrolling parent so it has room to travel. For the scroll-scrubbed animation inside a pinned scene, use CSS `animation-timeline` (see Reveal) or `useScrollProgress` from `@hirobius/design-system/scroll`. See ADR-021.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Pin","sizing":"panel"},"consumers":["src/app/components/pin.test.tsx","src/stories/patterns-scroll.stories.tsx","src/stories/pin.stories.tsx","src/stories/reveal.stories.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":[],"storyFiles":["src/stories/pin.stories.tsx"],"storyIds":["primitives-pin--sidebar"]},"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. purely by scroll position (`animation-timeline: view()`) — no JS, no deps, no IntersectionObserver. Reach for this before hand-rolling reveal logic. `animation-timeline` is supported AND the user has not requested reduced motion (both fall back to visible, never stuck hidden). Pick `animation` from the fixed set — do not hand-roll keyframes. For momentum/inertia scrolling wrap the app in `SmoothScroll`; for a scroll-progress value in JS use `useScrollProgress` — both from `@hirobius/design-system/scroll`. See ADR-021.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Reveal","sizing":"panel"},"consumers":["src/app/components/pin.tsx","src/app/components/reveal.test.tsx","src/index.ts","src/stories/patterns-scroll.stories.tsx","src/stories/reveal.stories.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":[],"storyFiles":["src/stories/patterns-scroll.stories.tsx","src/stories/reveal.stories.tsx"],"storyIds":["patterns-scroll--pinned-scale-reveal","patterns-scroll--reveal-sequence","patterns-scroll--simple-parallax","primitives-reveal--animations","primitives-reveal--scale-reveal-scene"]},"Textarea":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/textarea.tsx","description":"Textarea — multi-line text field primitive with label, helper, and error slots. Mirrors Input\'s shell + token skin as a native `<textarea>`. Figma parity: the four states Default / Focus / Error / Disabled map to the focus-ring, `error`, and `disabled` treatments below.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14","tier":"primitive","preview":{"exportName":"Textarea","sizing":"panel"},"consumers":["src/stories/textarea.stories.tsx"],"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":[],"storyFiles":["src/stories/textarea.stories.tsx"],"storyIds":["primitives-textarea--all-states","primitives-textarea--default","primitives-textarea--disabled","primitives-textarea--error","primitives-textarea--with-helper"]},"CardBody":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardBody","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"CardDescription":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardDescription","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"CardFooter":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardFooter","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"CardHeader":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardHeader","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"metadata":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"CardMetric":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardMetric","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"ReactNode"},"sub":{"type":"ReactNode","optional":true},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"],"default":"neutral"},"value":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"CardProgress":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardProgress","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"ReactNode","optional":true},"max":{"type":"number","default":100},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"],"default":"neutral"},"value":{"type":"number"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"CardTitle":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardTitle","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"DialogClose":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/dialog.tsx","description":"Dialog — modal dialog (shadcn baseline, compound parts). shadcn-baseline implementation (8s-7): Radix Dialog primitive (@radix-ui/react-dialog) themed with role tokens. Provides focus trap, scroll lock, ESC-to-close, backdrop scrim, and portal mounting out of the box. <Dialog> <Dialog.Trigger asChild> <Button>Open</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Confirm</Dialog.Title> <Dialog.Description>Are you sure?</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant=\\"secondary\\">Cancel</Button> </Dialog.Close> </Dialog.Footer> </Dialog.Content> </Dialog> Surface uses role.popover (semantic.color.surface.overlay) + shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is a foreground/80 wash so it picks up the theme without a hardcoded black. The close affordance is rendered as an absolutely-positioned X inside Content; pass `hideClose` to opt out for fully-custom layouts.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"DialogClose","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"DialogContent":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/dialog.tsx","description":"Dialog — modal dialog (shadcn baseline, compound parts). shadcn-baseline implementation (8s-7): Radix Dialog primitive (@radix-ui/react-dialog) themed with role tokens. Provides focus trap, scroll lock, ESC-to-close, backdrop scrim, and portal mounting out of the box. <Dialog> <Dialog.Trigger asChild> <Button>Open</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Confirm</Dialog.Title> <Dialog.Description>Are you sure?</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant=\\"secondary\\">Cancel</Button> </Dialog.Close> </Dialog.Footer> </Dialog.Content> </Dialog> Surface uses role.popover (semantic.color.surface.overlay) + shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is a foreground/80 wash so it picks up the theme without a hardcoded black. The close affordance is rendered as an absolutely-positioned X inside Content; pass `hideClose` to opt out for fully-custom layouts.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"DialogContent","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"hideClose":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"DialogDescription":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/dialog.tsx","description":"Dialog — modal dialog (shadcn baseline, compound parts). shadcn-baseline implementation (8s-7): Radix Dialog primitive (@radix-ui/react-dialog) themed with role tokens. Provides focus trap, scroll lock, ESC-to-close, backdrop scrim, and portal mounting out of the box. <Dialog> <Dialog.Trigger asChild> <Button>Open</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Confirm</Dialog.Title> <Dialog.Description>Are you sure?</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant=\\"secondary\\">Cancel</Button> </Dialog.Close> </Dialog.Footer> </Dialog.Content> </Dialog> Surface uses role.popover (semantic.color.surface.overlay) + shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is a foreground/80 wash so it picks up the theme without a hardcoded black. The close affordance is rendered as an absolutely-positioned X inside Content; pass `hideClose` to opt out for fully-custom layouts.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"DialogDescription","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"DialogFooter":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/dialog.tsx","description":"Dialog — modal dialog (shadcn baseline, compound parts). shadcn-baseline implementation (8s-7): Radix Dialog primitive (@radix-ui/react-dialog) themed with role tokens. Provides focus trap, scroll lock, ESC-to-close, backdrop scrim, and portal mounting out of the box. <Dialog> <Dialog.Trigger asChild> <Button>Open</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Confirm</Dialog.Title> <Dialog.Description>Are you sure?</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant=\\"secondary\\">Cancel</Button> </Dialog.Close> </Dialog.Footer> </Dialog.Content> </Dialog> Surface uses role.popover (semantic.color.surface.overlay) + shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is a foreground/80 wash so it picks up the theme without a hardcoded black. The close affordance is rendered as an absolutely-positioned X inside Content; pass `hideClose` to opt out for fully-custom layouts.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"DialogFooter","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"DialogHeader":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/dialog.tsx","description":"Dialog — modal dialog (shadcn baseline, compound parts). shadcn-baseline implementation (8s-7): Radix Dialog primitive (@radix-ui/react-dialog) themed with role tokens. Provides focus trap, scroll lock, ESC-to-close, backdrop scrim, and portal mounting out of the box. <Dialog> <Dialog.Trigger asChild> <Button>Open</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Confirm</Dialog.Title> <Dialog.Description>Are you sure?</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant=\\"secondary\\">Cancel</Button> </Dialog.Close> </Dialog.Footer> </Dialog.Content> </Dialog> Surface uses role.popover (semantic.color.surface.overlay) + shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is a foreground/80 wash so it picks up the theme without a hardcoded black. The close affordance is rendered as an absolutely-positioned X inside Content; pass `hideClose` to opt out for fully-custom layouts.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"DialogHeader","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"DialogOverlay":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/dialog.tsx","description":"Dialog — modal dialog (shadcn baseline, compound parts). shadcn-baseline implementation (8s-7): Radix Dialog primitive (@radix-ui/react-dialog) themed with role tokens. Provides focus trap, scroll lock, ESC-to-close, backdrop scrim, and portal mounting out of the box. <Dialog> <Dialog.Trigger asChild> <Button>Open</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Confirm</Dialog.Title> <Dialog.Description>Are you sure?</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant=\\"secondary\\">Cancel</Button> </Dialog.Close> </Dialog.Footer> </Dialog.Content> </Dialog> Surface uses role.popover (semantic.color.surface.overlay) + shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is a foreground/80 wash so it picks up the theme without a hardcoded black. The close affordance is rendered as an absolutely-positioned X inside Content; pass `hideClose` to opt out for fully-custom layouts.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"DialogOverlay","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"DialogPortal":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/dialog.tsx","description":"Dialog — modal dialog (shadcn baseline, compound parts). shadcn-baseline implementation (8s-7): Radix Dialog primitive (@radix-ui/react-dialog) themed with role tokens. Provides focus trap, scroll lock, ESC-to-close, backdrop scrim, and portal mounting out of the box. <Dialog> <Dialog.Trigger asChild> <Button>Open</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Confirm</Dialog.Title> <Dialog.Description>Are you sure?</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant=\\"secondary\\">Cancel</Button> </Dialog.Close> </Dialog.Footer> </Dialog.Content> </Dialog> Surface uses role.popover (semantic.color.surface.overlay) + shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is a foreground/80 wash so it picks up the theme without a hardcoded black. The close affordance is rendered as an absolutely-positioned X inside Content; pass `hideClose` to opt out for fully-custom layouts.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"DialogPortal","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"DialogTitle":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/dialog.tsx","description":"Dialog — modal dialog (shadcn baseline, compound parts). shadcn-baseline implementation (8s-7): Radix Dialog primitive (@radix-ui/react-dialog) themed with role tokens. Provides focus trap, scroll lock, ESC-to-close, backdrop scrim, and portal mounting out of the box. <Dialog> <Dialog.Trigger asChild> <Button>Open</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Confirm</Dialog.Title> <Dialog.Description>Are you sure?</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant=\\"secondary\\">Cancel</Button> </Dialog.Close> </Dialog.Footer> </Dialog.Content> </Dialog> Surface uses role.popover (semantic.color.surface.overlay) + shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is a foreground/80 wash so it picks up the theme without a hardcoded black. The close affordance is rendered as an absolutely-positioned X inside Content; pass `hideClose` to opt out for fully-custom layouts.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"DialogTitle","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"DialogTrigger":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/dialog.tsx","description":"Dialog — modal dialog (shadcn baseline, compound parts). shadcn-baseline implementation (8s-7): Radix Dialog primitive (@radix-ui/react-dialog) themed with role tokens. Provides focus trap, scroll lock, ESC-to-close, backdrop scrim, and portal mounting out of the box. <Dialog> <Dialog.Trigger asChild> <Button>Open</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Confirm</Dialog.Title> <Dialog.Description>Are you sure?</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant=\\"secondary\\">Cancel</Button> </Dialog.Close> </Dialog.Footer> </Dialog.Content> </Dialog> Surface uses role.popover (semantic.color.surface.overlay) + shadow-overlay (semantic.shadow.overlay from 8e-1). The scrim is a foreground/80 wash so it picks up the theme without a hardcoded black. The close affordance is rendered as an absolutely-positioned X inside Content; pass `hideClose` to opt out for fully-custom layouts.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"DialogTrigger","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"Tooltip":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/hds-tooltip.tsx","description":"Tooltip root. Bakes in the Radix Provider so a single `<Tooltip>` is self-contained — no app-level provider required. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.","figmaUrl":null,"figmaId":null,"tier":"primitive","preview":{"exportName":"Tooltip","sizing":"panel"},"consumers":["src/app/components/asset-img.tsx","src/app/components/hover-card.tsx","src/app/data/hdsEditorial.tsx","src/index.ts","src/stories/hds-tooltip.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":null,"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/hds-tooltip.stories.tsx"],"storyIds":["primitives-hds-tooltip--default","primitives-hds-tooltip--placement"]},"Menu":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/menu.tsx","description":"Menu root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59","tier":"primitive","preview":{"exportName":"Menu","sizing":"panel"},"consumers":["src/app/components/command-palette.tsx","src/app/components/context-menu.tsx","src/app/components/date-range-input.tsx","src/app/components/hover-card.tsx","src/app/components/menu.test.tsx","src/app/components/multi-selector.tsx","src/docs-tooling/shell-controls.tsx","src/stories/menu.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/menu.stories.tsx"],"storyIds":["primitives-menu--default","primitives-menu--with-checkbox-items","primitives-menu--with-radio-group","primitives-menu--with-submenu"]},"Popover":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/popover.tsx","description":"Popover root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32","tier":"primitive","preview":{"exportName":"Popover","sizing":"panel"},"consumers":["src/app/components/calendar.tsx","src/app/components/combobox.test.tsx","src/app/components/combobox.tsx","src/app/components/date-input.test.tsx","src/app/components/date-input.tsx","src/app/components/date-range-input.test.tsx","src/app/components/date-range-input.tsx","src/app/components/date-time-input.test.tsx","src/app/components/date-time-input.tsx","src/app/components/hover-card.tsx","src/app/components/menu.tsx","src/app/components/multi-selector.test.tsx","src/app/components/multi-selector.tsx","src/app/components/popover.test.tsx","src/app/design-system/generated-token-descriptions.ts","src/stories/combobox.stories.tsx","src/stories/date-input.stories.tsx","src/stories/date-range-input.stories.tsx","src/stories/date-time-input.stories.tsx","src/stories/multi-selector.stories.tsx","src/stories/popover.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/popover.stories.tsx"],"storyIds":["primitives-popover--aligned-start","primitives-popover--default","primitives-popover--info-tip","primitives-popover--with-dismiss"]},"HdsDocsShell":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/layouts/HdsDocsShell.tsx","description":"HdsDocsShell — three-region docs shell (left nav rail, content, right TOC rail), driven by grid columns that default to 0 and are set per breakpoint. hds#280 slice: this is the SHELL MECHANICS ONLY — the smallest shippable piece of the docs-shell epic. It ships: - A 3-column grid (`leftRail | content | rightRail`), both rail columns defaulting to `0px` and set to `semantic.space.sidebar.railWidth` (hds#280 token, our own 280px — not HeroUI\'s 268px) per breakpoint via Tailwind\'s arbitrary-property + responsive-variant syntax, the same technique Fumadocs/HeroUI uses. `md768:` brings in the left rail, `xl1280:` brings in the right rail — matching the three-stage table in hds#280. - Each rail is `position: sticky` and scrolls independently of content and of the other rail, clipped to the viewport minus `topOffset`. - `topOffset` composes (it is one CSS length a caller supplies, e.g. its own sticky header\'s height token) rather than a hardcoded pixel value — the first stage of the row-cascade pattern hds#280 asks for. A second region (a tabs row, hds#280\'s PR-comment addendum) would extend this by adding its own height into the same `calc()` chain, not by hardcoding a second offset. Deliberately NOT in this slice (tracked as proposed follow-up issues, not filed — see the PR/commit this ships in): - Below the TOC breakpoint, `rightRail` is omitted from the grid rather than becoming a reachable popover. The DoD explicitly wants a popover, not \\"merely hidden\\" — that is real, separate UI work (a sticky current-section breadcrumb bar), not shell mechanics. - Left-rail collapsible groups (chevron, active-section pill) and right-rail active-anchor styling (vertical rule, filled pill) are content the caller supplies via `leftRail`/`rightRail` — this shell does not build SideNav/Disclosure/NavItem composition for the caller. - `check-rendered-geometry` verification at every breakpoint in the DoD\'s table (needs a built Storybook + a live run, not exercised here). - Named CSS `grid-template-areas` (the DoD\'s literal ask) — this ships a 3-column grid with DOM order instead, which is behaviorally identical for a single linear row of regions and needs no separate stylesheet. Areas earn their keep once a 4th region (a tabs row spanning full width) is added — call out then, not before.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"HdsDocsShell","sizing":"panel"},"consumers":["src/app/design-system/generated-token-descriptions.ts","src/app/layouts/HdsDocsShell.test.tsx","src/index.ts","src/stories/hds-docs-shell.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"leftRail":{"type":"ReactNode","optional":true},"rightRail":{"type":"ReactNode","optional":true},"style":{"type":"CSSProperties","optional":true},"topOffset":{"type":"string","default":"0px"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/hds-docs-shell.stories.tsx"],"storyIds":["layout-hdsdocsshell--content-only","layout-hdsdocsshell--default","layout-hdsdocsshell--no-right-rail","layout-hdsdocsshell--with-top-offset"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29","tier":"primitive","preview":{"exportName":"Checkbox","sizing":"panel"},"consumers":["src/app/components/checkbox.test.tsx","src/app/components/radio.tsx","src/index.ts","src/stories/checkbox.stories.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":[],"storyFiles":["src/stories/checkbox.stories.tsx"],"storyIds":["primitives-checkbox--checked","primitives-checkbox--default","primitives-checkbox--disabled","primitives-checkbox--disabled-checked","primitives-checkbox--group","primitives-checkbox--indeterminate"]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]}}'), x = /* @__PURE__ */ JSON.parse('{"HdsPhosphor":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized icon alias stub for JSX normalization.","hidden":true,"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{},"tokenMapping":{},"tier":"utility"},"HdsFrame":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Layout primitive — vertical or horizontal flex container on the 8px grid. Padding and gap from {0,8,16,24,32,48,64}; surfaces use semantic.color.surface.* tokens, never raw hex. Structural frames are rectilinear (no border-radius); only Card-wrapping frames pick up semantic.radius.card.","hidden":true,"props":{"layout":{"type":"enum","values":["VERTICAL","HORIZONTAL"],"default":"VERTICAL"},"layoutMode":{"type":"enum","values":["VERTICAL","HORIZONTAL"],"optional":true},"fill":{"type":"string","optional":true},"background":{"type":"string","optional":true},"stroke":{"type":"string","optional":true},"border":{"type":"string","optional":true},"padding":{"type":"string","optional":true},"paddingX":{"type":"string","optional":true},"paddingY":{"type":"string","optional":true},"gap":{"type":"string","optional":true},"itemSpacing":{"type":"string","optional":true},"radius":{"type":"string","optional":true},"width":{"type":"string","optional":true},"height":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true}},"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":true,"props":{"typography":{"type":"string","optional":true},"fill":{"type":"string","optional":true},"text":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"level":{"type":"enum","values":["1","2","3"],"optional":true}},"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":true,"props":{"typography":{"type":"string","optional":true},"fill":{"type":"string","optional":true},"text":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"htmlFor":{"type":"string","optional":true}},"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":true,"props":{"typography":{"type":"string","optional":true},"fill":{"type":"string","optional":true},"text":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true}},"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":true,"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":true,"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":true,"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{},"tokenMapping":{},"tier":"utility"},"HistoryCard":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/history-card.tsx","description":"HistoryCard — compact commit-history card for repo and systems-log surfaces. Padding on the 8px grid; commit hash uses semantic.typography.mono (mono); secondary metadata via semantic.color.content.tertiary (opacity, never a different hue). No shadow — depth comes from semantic.color.border.default.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HistoryCard","sizing":"panel"},"consumers":["src/stories/history-card.stories.tsx"],"tokenMapping":{},"props":{"commit":{"type":"HistoryCardCommit"},"href":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"utility","docExempt":true,"sourcePath":"src/app/components/HistoryCard.tsx","figmaLink":null},"ComponentPreview":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/component-preview.tsx","description":"ComponentPreview - framed preview harness for utility and lab specimens.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ComponentPreview","sizing":"panel"},"consumers":["src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"AnimatedLabel":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/animated-label.tsx","description":"AnimatedLabel — animated text slot for use inside interactive surfaces. Renders the shared CinematicLink text treatment (slide-up reveal + underline draw) as a composable span, not a standalone anchor. Designed to slot inside HdsButton asChild or any other interactive surface that owns the hover group. Usage: add className=\\"group\\" to the parent HdsButton (or any ancestor), then wrap the label text in <AnimatedLabel>. The group-hover classes activate on CSS :hover of the parent group element — no JS hover state needed. level. The parent surface (button, anchor, etc.) owns semantic role, focus, and pointer events. AnimatedLabel only owns the visual animation layer.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"AnimatedLabel","sizing":"compact"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"ControlsPanel":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/controls-panel.tsx","description":"shared shell composition documented alongside the HDS doc utilities.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ControlsPanel","sizing":"panel"},"consumers":["src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"ControlsSection":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/controls-panel.tsx","description":"shared shell composition documented alongside the HDS doc utilities.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ControlsSection","sizing":"panel"},"consumers":["src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"HdsMobileTopBar":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/shell-controls.tsx","description":"shell-only extraction for HDS navigation chrome, not a consumer-facing reusable HDS component.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsMobileTopBar","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"PreviewFrame":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/docs-tooling/preview-frame.tsx","description":"PreviewFrame - documentation preview shell for storefront component demos.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"PreviewFrame","sizing":"panel"},"consumers":["src/docs-tooling/demo-block.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"HdsSidebarUtilityButton":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/shell-controls.tsx","description":"shell-only extraction for HDS navigation chrome, not a consumer-facing reusable HDS component.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsSidebarUtilityButton","sizing":"compact"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"ImageLightbox":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/image-lightbox.tsx","description":"","figmaUrl":null,"figmaId":null,"consumers":["src/app/components/image-lightbox.test.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{"exportName":"ImageLightbox","sizing":"panel"},"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"SketchButton":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/sketch-controls.tsx","description":"","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SketchButton","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"SketchCheckbox":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/sketch-controls.tsx","description":"","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SketchCheckbox","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"SketchPanelToggle":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/sketch-controls.tsx","description":"","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SketchPanelToggle","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"SketchRange":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/sketch-controls.tsx","description":"","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SketchRange","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"SketchTextarea":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/sketch-controls.tsx","description":"","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SketchTextarea","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"NotFoundPattern":{"category":"Feedback","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/not-found-pattern.tsx","description":"NotFoundPattern - governed not-found recovery pattern for unroutable pages.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"NotFoundPattern","sizing":"panel"},"consumers":["src/stories/error-pattern.stories.tsx","src/stories/not-found-pattern.stories.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"utility","docExempt":true,"figmaLink":null},"DocPageSpec":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/docs-tooling/DocPageSpec.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"DocPageSpec","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":null},"TokenDisplayToggle":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/docs-tooling/TokenDisplayToggle.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"TokenDisplayToggle","sizing":"panel"},"consumers":["src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":null},"HdsLegacyTokenGovernancePanel":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/docs-tooling/lab/legacy-token-detail.tsx","description":"LegacyTokenDetail - lab-facing token inspection panels used to maintain legacy token views.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsLegacyTokenGovernancePanel","sizing":"panel"},"consumers":["src/docs-tooling/health-rail.tsx"],"tokenMapping":{},"props":{"isDark":{"type":"boolean"},"onSelectToken":{"type":"(token: FlatToken) => void","optional":true},"showHeading":{"type":"boolean","default":true},"token":{"type":"FlatToken"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"utility","docExempt":false,"figmaLink":null},"LegacyTokenList":{"category":"Lab","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/docs-tooling/lab/legacy-token-list.tsx","description":"LegacyTokenList - legacy token grouping list retained for lab-side maintenance workflows. architecture per TASKS.md \\"Stale / Superseded\\" → \\"Live token inspector UI\\". Pruning deferred until /hds/tokens is retired or rewritten — see docs/archive/work/2026-05-01-token-explorer-prune-deferred.md.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"LegacyTokenList","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{"isDark":{"type":"boolean"},"onSelect":{"type":"(token: FlatToken) => void"},"selectedPath":{"type":"string"},"tier":{"type":"Tier"},"tokens":{"type":"FlatToken[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"utility","docExempt":false,"figmaLink":null},"TokenCollectionList":{"category":"Lab","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/docs-tooling/lab/token-collection-list.tsx","description":"TokenCollectionList - grouped token inventory list for lab and explorer maintenance. architecture per TASKS.md \\"Stale / Superseded\\" → \\"Live token inspector UI\\". Pruning deferred until /hds/tokens is retired or rewritten — see docs/archive/work/2026-05-01-token-explorer-prune-deferred.md.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"TokenCollectionList","sizing":"panel"},"consumers":["src/docs-tooling/lab/legacy-token-list.tsx"],"tokenMapping":{},"props":{"onSelect":{"type":"(token: FlatToken) => void"},"sections":{"type":"TokenCollectionSection[]"},"selectedPath":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"utility","docExempt":false,"figmaLink":null},"TokenList":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/docs-tooling/lab/token-list.tsx","description":"TokenList - searchable token rail for interactive lab-side token inspection.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"TokenList","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"ErrorBoundary":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/error-boundary.tsx","description":"ErrorBoundary — slot-scoped recovery surface for runtime render failures.","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"ErrorBoundary","sizing":"panel"},"consumers":["src/app/layouts/CaseStudyLayout.tsx","src/app/layouts/DocLayout.tsx","src/stories/error-boundary.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":null},"ApiReference":{"category":"Utilities","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/docs-tooling/api-reference.tsx","description":"ApiReference — collapsed <details> rendering of a component\'s public API. Returns `null` when: - The component is missing from the manifest (nothing to render). - The component is a template and `forceForTemplate` is not set. - The component has no props AND no slots (genuinely empty surface).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"ApiReference","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"DocPageHeader":{"category":"Layout","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":false,"filePath":"src/docs-tooling/doc-page-header.tsx","description":"DocPageHeader — standardized header zone mounted at the top of every primitive / pattern / template doc page. Projected from the live HDS manifest; the unit `9d-9` batch refactor wires this component into the doc routes — this file only CREATES the surface. 9d-4 contract (from `docs/ai/orchestration.json`): - H1: component name - Lede: single-line summary derived from `componentSpec.description` (truncated at the first newline / sentence break for the header zone; the full description still flows into the doc body downstream). - Status badge: Stable / Beta — derived from a new optional `componentSpec.stability` field (additive, schema 9d-4). When absent, the default falls back to the unit-spec rule: primitives → \'stable\'; patterns and templates → \'beta\' when they lack `slots[]` or carry propConstraints warnings, otherwise \'stable\'. - Tier chip: primitive / pattern / template / utility (manifest field). - Source link: GitHub blob URL projected from `componentSpec.filePath` against the repo\'s origin remote (hirobius/adrian-milsap, branch `main` for canonical permalinks). - Figma link: rendered when `componentSpec.figmaUrl` is non-null. Surface rules (component-zone CLAUDE.md): - Heavy prop restriction — one slot, no business logic. - Theming via CSS variables / role tokens only (no inline hex). - Composes Stack rather than re-implementing layout primitives. Anti-goals: - Not a doc-shell — `DocShell` already owns the wordmark, search, theme-toggle, and rail nav. This component lives INSIDE the content column, not the header bar. - Does not render badges as decorative stickers next to prose; they sit in a dedicated metadata row below the H1, per CLAUDE.md.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"DocPageHeader","sizing":"panel"},"consumers":["src/docs-tooling/doc-page-header.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"ThemeToggle":{"category":"Layout","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":false,"filePath":"src/docs-tooling/theme-toggle.tsx","description":"ThemeToggle — System / Light / Dark theme dropdown for the doc shell. 9d-3 baseline: a header-slot dropdown with three options: - System — follow `prefers-color-scheme`, react live to OS changes. - Light — force light mode. - Dark — force dark mode. Persistence: - Stored in localStorage under `hds-theme-mode` (\'system\' | \'light\' | \'dark\'). - Mirrored to the legacy `hds-theme` key (\'light\' | \'dark\') so the existing ThemeContext binary toggle (if mounted) stays in sync without a hard dependency between the two. Application: - Sets `data-theme=\\"light\\"` or `data-theme=\\"dark\\"` on `<html>` so the 8e-2 `role.*` alias layer (theme-aware CSS vars) flips automatically. - Also toggles `<html>.dark` for parity with Tailwind\'s class-based dark variant (matching the convention already used in ThemeContext). Dependencies: - Zero new npm deps. Native button + click-outside listener. - SVG icons inlined (Sun / Moon / Monitor) — no icon-library dep added. Slot: - Renders into the `data-hds-slot=\\"theme-toggle\\"` zone in DocShell.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"ThemeToggle","sizing":"panel"},"consumers":["src/app/context/ThemeContext.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"VariantStrip":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/docs-tooling/variant-strip.tsx","description":"VariantStrip renders a horizontal family strip of component specimens with short labels. Designed for component docs to show all variants, sizes, or tones in a single scannable row.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"VariantStrip","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"DemoBlock":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/docs-tooling/demo-block.tsx","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"DemoBlock","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"PageFooter":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/docs-tooling/page-footer.tsx","description":"PageFooter — minimal page footer rendered by the route shell. Currently houses a binary light/dark theme toggle on the left, with the footer owning its own bottom breathing room so the toggle never pins to the viewport edge. Add elements here as the page footer grows — keeping the shape in one place so every HDSLayout-mounted page gets a consistent footer surface without per-page rendering.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"PageFooter","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"ExpandTooltip":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"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"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]}}'), b = /* @__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.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 Satoshi (ITF) body typeface; falls back to system-ui sans-serif stack.","value":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif"},{"path":"primitive.typography.family.display","cssVar":"--primitive-typography-family-display","type":"fontFamily","description":"Display face: Satoshi Bold (ITF), bound to display/h1/h2/h3 composites.","value":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif"},{"path":"primitive.typography.family.mono","cssVar":"--primitive-typography-family-mono","type":"fontFamily","description":"Monospace face: Geist Mono. Falls back to Courier New, monospace.","value":"\\"Geist 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.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.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.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":"WCAG 2.2 AA (2.5.8) minimum target size for a compact inline control, such as a tokenizer chip's remove button, where the 44px AAA floor (2.5.5) does not apply.","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 — wide enough for the longest top-level nav label at the default type ramp with room to spare.","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":"Travel distance for a scroll-reveal translateY offset. Coincides in value with semantic.space.scale.md today, but names a motion travel distance rather than 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.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-colored background (neutral/monochrome; inverts to a light neutral on dark surfaces).","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.color.surface.accentSubtle","cssVar":"--semantic-color-surface-accentSubtle","type":"color","description":"Faint accent tint for hover states or highlights","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.900}","resolvedValue":"#111111"}},{"path":"semantic.color.surface.hover","cssVar":"--semantic-color-surface-hover","type":"color","description":"Background for a hovered interactive surface (menu items, chips, tertiary buttons).","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.900}","resolvedValue":"#111111"}},{"path":"semantic.color.surface.pressed","cssVar":"--semantic-color-surface-pressed","type":"color","description":"Background for an actively pressed interactive surface.","alias":"{primitive.color.neutral.50}","resolvedValue":"#fafafa","dark":{"alias":"{primitive.color.neutral.950}","resolvedValue":"#0a0a0a"}},{"path":"semantic.color.surface.selected","cssVar":"--semantic-color-surface-selected","type":"color","description":"Background for a persistently selected item (active tab, checked row).","alias":"{primitive.color.neutral.200}","resolvedValue":"#e5e5e5","dark":{"alias":"{primitive.color.neutral.800}","resolvedValue":"#262626"}},{"path":"semantic.color.surface.muted","cssVar":"--semantic-color-surface-muted","type":"color","description":"Muted background for low-emphasis content blocks.","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.900}","resolvedValue":"#111111"}},{"path":"semantic.color.surface.sunken","cssVar":"--semantic-color-surface-sunken","type":"color","description":"Recessed background for inset wells (inputs, code blocks, nested panels).","alias":"{primitive.color.neutral.200}","resolvedValue":"#e5e5e5","dark":{"alias":"{primitive.color.neutral.850}","resolvedValue":"#1a1a1a"}},{"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 (monochrome). Pair with underline/weight for link affordance.","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.color.content.onAccent","cssVar":"--semantic-color-content-onAccent","type":"color","description":"Text/icon color on accent fills. Flips to a dark neutral in dark mode, where accent fills are light.","alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff","dark":{"alias":"{primitive.color.neutral.900}","resolvedValue":"#111111"}},{"path":"semantic.color.content.success","cssVar":"--semantic-color-content-success","type":"color","description":"Success-toned text/icon color, independent of feedback banners.","alias":"{primitive.color.green.700}","resolvedValue":"#047857","dark":{"alias":"{primitive.color.green.400}","resolvedValue":"#34d399"}},{"path":"semantic.color.content.warning","cssVar":"--semantic-color-content-warning","type":"color","description":"Warning-toned text/icon color, independent of feedback banners.","alias":"{primitive.color.amber.800}","resolvedValue":"#92400e","dark":{"alias":"{primitive.color.amber.400}","resolvedValue":"#fbbf24"}},{"path":"semantic.color.content.danger","cssVar":"--semantic-color-content-danger","type":"color","description":"Danger-toned text/icon color, independent of feedback banners.","alias":"{primitive.color.red.700}","resolvedValue":"#b91c1c","dark":{"alias":"{primitive.color.red.400}","resolvedValue":"#f87171"}},{"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 (neutral/monochrome; inverts on dark surfaces).","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.color.border.success","cssVar":"--semantic-color-border-success","type":"color","description":"Success-toned border for status outlines and success-state inputs.","alias":"{primitive.color.green.400}","resolvedValue":"#34d399","dark":{"alias":"{primitive.color.green.400}","resolvedValue":"#34d399"}},{"path":"semantic.color.border.warning","cssVar":"--semantic-color-border-warning","type":"color","description":"Warning-toned border for status outlines and warning-state inputs.","alias":"{primitive.color.amber.400}","resolvedValue":"#fbbf24","dark":{"alias":"{primitive.color.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.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 — same value as layout.normal (deprecated alias). Default of the overridable roles surface.padding and region.gutter, which replace the deprecated component.padding / layout.gutter.","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) default inset for cards, forms, panels, and grouped surfaces. Tenants override it with another scale step (tenants/*/tokens.json, incl. a Compact density mode). Replaces the deprecated semantic.space.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 it responsively to scale.lg (32px) and, below 640px, scale.sm (16px). Replaces the deprecated semantic.space.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 default inset for cards, forms, panels, and grouped surfaces. DEPRECATED alias (hds#206) — use semantic.space.surface.padding (tenant/density-overridable); 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 section break and whitespace separator 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 left nav rail and right TOC rail width (hds#280). Both rails share one width token; default 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":"Display headline. 60px / Satoshi bold 700 / leading-none (hds#283: was 72px/5xl).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"60px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1"}},{"path":"semantic.typography.h1","cssVar":"--semantic-typography-h1","type":"typography","description":"Primary section headings (h1). 48px / Satoshi bold 700 / leading-tight (hds#283: rung renamed 4xl→5xl, px unchanged).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"48px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.25"}},{"path":"semantic.typography.h2","cssVar":"--semantic-typography-h2","type":"typography","description":"Secondary section headings (h2). Satoshi bold 700, 30px, line-height 40px (hds#283: rung renamed, was 42px).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"30px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"40px"}},{"path":"semantic.typography.h3","cssVar":"--semantic-typography-h3","type":"typography","description":"Component and card headers (h3). 20px / Satoshi bold 700 500 / leading-snug (hds#283: rung renamed lg→xl, px unchanged).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"20px","fontWeight":"700","letterSpacing":"0em","lineHeight":"28px"}},{"path":"semantic.typography.body","cssVar":"--semantic-typography-body","type":"typography","description":"Body prose. Satoshi medium, 16px, line-height 24px, max 60ch measure (hds#283: was 17px/28px).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"16px","fontWeight":"500","letterSpacing":"0em","lineHeight":"24px","maxWidth":"60ch"}},{"path":"semantic.typography.ui","cssVar":"--semantic-typography-ui","type":"typography","description":"UI text for nav, labels, captions. Satoshi medium, 14px, line-height 20px (hds#283: was 15px/24px).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"14px","fontWeight":"500","letterSpacing":"0em","lineHeight":"20px","maxWidth":"60ch"}},{"path":"semantic.typography.caption","cssVar":"--semantic-typography-caption","type":"typography","description":"Caption / helper text. Satoshi medium, 12px, line-height 16px. Matches the Figma typography/caption text style; now sourced from primitive.xs (hds#283).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"12px","fontWeight":"500","letterSpacing":"0em","lineHeight":"16px"}},{"path":"semantic.typography.eyebrow","cssVar":"--semantic-typography-eyebrow","type":"typography","description":"Eyebrow / kicker label. Satoshi medium, 12px, caps tracking, uppercase (hds#283: was 13px/20px).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"12px","fontWeight":"500","letterSpacing":"0.06em","lineHeight":"16px","textTransform":"uppercase"}},{"path":"semantic.typography.mono","cssVar":"--semantic-typography-mono","type":"typography","description":"Monospace for code, token names, shortcuts. Geist Mono regular, 14px (hds#283: repointed xs→sm; xs alone would give 12px).","composite":{"fontFamily":"\\"Geist Mono\\", \\"Courier New\\", monospace","fontSize":"14px","fontWeight":"400","letterSpacing":"0em","lineHeight":"20px","maxWidth":"60ch"}},{"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. Neutral (monochrome) accent — inverts to a light neutral on dark surfaces.","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.accent.hover","cssVar":"--semantic-accent-hover","type":"color","description":"Accent fill on pointer hover.","alias":"{primitive.color.neutral.800}","resolvedValue":"#262626","dark":{"alias":"{primitive.color.neutral.200}","resolvedValue":"#e5e5e5"}},{"path":"semantic.accent.pressed","cssVar":"--semantic-accent-pressed","type":"color","description":"Accent fill during active press.","alias":"{primitive.color.neutral.950}","resolvedValue":"#0a0a0a","dark":{"alias":"{primitive.color.neutral.300}","resolvedValue":"#d4d4d4"}},{"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":"Text and icon color on neutral surfaces with accent intent. Monochrome — pair with underline/weight for link affordance.","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.accent.contentHover","cssVar":"--semantic-accent-contentHover","type":"color","description":"Accent content color on pointer hover.","alias":"{primitive.color.neutral.700}","resolvedValue":"#404040","dark":{"alias":"{primitive.color.neutral.300}","resolvedValue":"#d4d4d4"}},{"path":"semantic.accent.subtle","cssVar":"--semantic-accent-subtle","type":"color","description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.800}","resolvedValue":"#262626"}},{"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 interactive control glyphs (e.g. checkbox glyph box) that are not fully round and not the standard action radius. Real design-scale value, 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 diagonal (width/height) for activity-feed and similar identity glyphs. Coincides in pixels with row.compact today; kept as a separate role per hds#242 so either can change independently.","alias":"{primitive.size.40}","resolvedValue":"40px"},{"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":"#f5f5f5"},{"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":"#111111"},{"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":"#f5f5f5"},{"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":"dimension","description":"Readable label rhythm for tags.","alias":"{primitive.typography.lineHeight.normal}","resolvedValue":"undefinedundefined"},{"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":"#ffffff"},{"path":"component.tag.activeBackground","cssVar":"--component-tag-activeBackground","type":"color","description":"Active tag fill color.","alias":"{semantic.accent.rest}","resolvedValue":"#111111"},{"path":"component.tag.activeBorder","cssVar":"--component-tag-activeBorder","type":"color","description":"Active tag border color.","alias":"{semantic.accent.rest}","resolvedValue":"#111111"},{"path":"component.tag.activeHover","cssVar":"--component-tag-activeHover","type":"color","description":"Active tag hover fill color.","alias":"{semantic.accent.hover}","resolvedValue":"#262626"},{"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":"#111111"},{"path":"component.button.bgHover","cssVar":"--component-button-bgHover","type":"color","description":"Primary button hover fill.","alias":"{semantic.accent.hover}","resolvedValue":"#262626"},{"path":"component.button.text","cssVar":"--component-button-text","type":"color","description":"Primary button text color.","alias":"{semantic.color.content.onAccent}","resolvedValue":"#ffffff"},{"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.onAccent}","resolvedValue":"#ffffff","dark":{"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.accentSubtle}","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.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":"#111111"},{"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":"#ffffff"},{"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":"#f5f5f5"},{"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":"#111111"},{"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":"#111111"},{"path":"role.radius","cssVar":"--role-radius","type":"dimension","description":"Default border radius. shadcn role: radius.","alias":"{semantic.radius.action}","resolvedValue":"8px"}]}`), w = {
+const s = "2026-09-30T12:27:39.299Z", o = "hirobius.tokens.json", i = "W3C DTCG 2025.10", r = "https://hirobius-design-system.vercel.app/", a = "https://hirobius-design-system.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: "#111111", primaryColorToken: "semantic.accent.rest", font: "Satoshi variable 100–900, self-hosted", spacingBase: "4px", buttonBorderRadius: "0px", cardBorderRadius: "8px", neutralScale: "true monochromatic (equal RGB channels)", accentCount: 1 }, c = ["ActivityFeed", "Alert", "AlertDialog", "AspectRatio", "AssetImg", "Avatar", "AvatarGroup", "Badge", "Bleed", "Blockquote", "Box", "Breadcrumb", "Button", "ButtonGroup", "Calendar", "Callout", "Card", "CardBody", "CardDescription", "CardFooter", "CardHeader", "CardMetric", "CardProgress", "CardTitle", "Carousel", "Center", "Checkbox", "CinematicLink", "CircularProgress", "Cluster", "CodeBlock", "Combobox", "CommandPalette", "ComponentInstanceMatrix", "Container", "ContextMenu", "Cover", "DataTableSection", "DateInput", "DateRangeInput", "DateTimeInput", "DestructiveSection", "Dialog", "DialogClose", "DialogContent", "DialogDescription", "DialogFooter", "DialogHeader", "DialogOverlay", "DialogPortal", "DialogTitle", "DialogTrigger", "Disclosure", "Divider", "DocLinkCard", "EmptyState", "Field", "FileInput", "Form", "FormActions", "FormField", "FormFieldShell", "FoundationSwatch", "Frame", "Grid", "HdsDocsShell", "HdsThemeProvider", "HeadingStack", "HoverCard", "Icon", "IconButton", "InlineCode", "InlineLink", "Input", "InputGroup", "Kbd", "Lightbox", "Menu", "MetadataList", "MetricTile", "MetricTiles", "MultiSelector", "NavGroup", "NavItem", "OverflowList", "Page", "PageHeader", "Pagination", "Pin", "Popover", "Progress", "Radio", "Reveal", "SegmentedControl", "Select", "SelectableCard", "Sidebar", "SideNav", "Skeleton", "Sketch", "Slider", "Spinner", "Stack", "StackedCardRail", "Stat", "StatusDot", "StatusListItem", "StatusTile", "Stepper", "StepperField", "Surface", "Switcher", "Table", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "Tag", "Text", "Textarea", "TextLockup", "TileGrid", "TimeInput", "Timestamp", "ToastProvider", "Toggle", "ToggleButton", "Token", "Tokenizer", "Toolbar", "Tooltip", "TopNav", "TreeList", "VisuallyHidden"], d = { status: "active", styleCount: 9, source: "hirobius.tokens.json semantic.typography", tokens: [{ name: "display", size: "48px", lineHeight: "1.0", role: "Hero headlines and landing-page displays" }, { name: "heading1", size: "36px", lineHeight: "1.25", role: "Primary section headings and h1 text" }, { name: "heading2", size: "30px", lineHeight: "1.25", role: "Secondary section headings and h2 text" }, { name: "heading3", size: "24px", lineHeight: "1.25", role: "Component headings, card headings, and h3 text" }, { name: "body", size: "16px", lineHeight: "1.5", role: "Default long-form prose and body copy" }, { name: "ui", size: "14px", lineHeight: "1.5", role: "Standard interface text, nav labels, inputs, and controls" }, { name: "caption", size: "12px", lineHeight: "1.5", role: "Active functional role for helper text, error metadata, secondary metadata, and form annotations" }, { name: "technical", size: "12px", lineHeight: "1.0", role: "Monospace token keys, code snippets, keyboard shortcuts, hashes, and aligned data readouts" }, { name: "badge", size: "10px", lineHeight: "1.0", role: "Status badges and compact tags only" }], deprecated: ["displayXl", "display2", "title", "body2", "label", "labelDescriptive", "labelTechnical", "micro", "monoXs", "monoSm"] }, 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 = { generatedAt: "2026-06-18T14:21:47.440Z", integrity: { score: 100, grade: "F" }, violations: { unmappedVariables: 0, forbiddenOverrides: 0, directPrimitiveViolations: 1, storefrontGovernance: 0, uncategorizedComponents: 1, namespaceViolations: 131, total: 133 }, usage: { highBlastRadiusTokens: 47, deadWood: 0, maxBlastRadius: 234, maxBlastRadiusToken: "semantic.color.content.secondary", textLockupsStandardized: 5 }, componentCoverage: { documented: 47, total: 47, percent: 100, apiComponents: 47, specs: 65 }, fidelity: { grade: "C", complete: 29, total: 39, percent: 74, incomplete: [{ name: "Field", filePath: "src/app/components/field.tsx", category: "Display", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "NavGroup", filePath: "src/app/components/nav-group.tsx", category: "Navigation", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !0, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "Sketch", filePath: "src/app/components/sketch.tsx", category: "Layout", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !0, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "Stat", filePath: "src/app/components/stat.tsx", category: "Display", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "StatusListItem", filePath: "src/app/components/status-list-item.tsx", category: "Display", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "StepperField", filePath: "src/app/components/stepper-field.tsx", category: "Inputs", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !0, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "Tabs", filePath: "src/app/components/tabs.tsx", category: "Navigation", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "TabsContent", filePath: "src/app/components/tabs.tsx", category: "Navigation", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "TabsList", filePath: "src/app/components/tabs.tsx", category: "Navigation", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }, { name: "TabsTrigger", filePath: "src/app/components/tabs.tsx", category: "Navigation", hasPageEntry: !0, hasPreview: !0, hasDocumentedProp: !1, usesTokens: !1, hasTokenTable: !0, missing: ["documented props"], complete: !1 }] }, checks: { semanticReport: !0, dimensions: !0, docsCoverage: !0, docsFidelity: !1, registry: !0, storefrontSchema: !0, categorization: !1, namespaceAudit: !1, textPattern: !1, payloadAudit: !0, llmsSync: !1 }, scanCleanup: { criticalFileCount: 1, criticalFiles: [{ file: "src/app/components/componentPreviewRegistry.tsx", count: 1, label: "componentPreviewRegistry.tsx" }], trendDelta: -1, trendLabel: "-1", lastScannedAt: "2026-06-18T03:32:57.324Z", sparklineValues: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24] } }, y = { uncategorized: [{ name: "HdsLegacyTokenGovernancePanel", filePath: "src/docs-tooling/lab/legacy-token-detail.tsx" }], namespaceViolations: [] }, v = "llms.txt", f = "Version increments on any prop rename, token path rename, or removed component. Additions are non-breaking.", x = /* @__PURE__ */ JSON.parse('{"CaseStudyLayout":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/layouts/CaseStudyLayout.tsx","description":"CaseStudyLayout — macro-layout skeleton for portfolio case study pages. Invisible structure only. No Surface, no decorative chrome. Slot anatomy: heroSlot → full-width (maxWidth=\\"max\\") — hero image + headline introSlot → prose-width (maxWidth=\\"content\\") — narrative, Brief/Problem/Solution metricsSlot → full-width (maxWidth=\\"max\\") — KPI or summary cards (optional) contentSlot → full-width (maxWidth=\\"max\\") — chapters, galleries, learnings","figmaUrl":null,"figmaId":null,"preview":{"exportName":"CaseStudyLayout","sizing":"panel"},"consumers":["src/index.ts"],"tokenMapping":{},"props":{"contentSlot":{"type":"ReactNode"},"heroSlot":{"type":"ReactNode"},"introSlot":{"type":"ReactNode"},"metricsSlot":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{"heroSlot":{"type":"ReactNode"},"introSlot":{"type":"ReactNode"},"metricsSlot":{"type":"ReactNode"},"contentSlot":{"type":"ReactNode"}},"requiredProps":["heroSlot","introSlot","contentSlot"],"a11yRules":[{"rule":"Root element is <main> — only one CaseStudyLayout per page","required":true}],"variantAxes":[],"componentProperties":[],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.layout.gap"}},{"name":"hero","figmaSlotName":"Hero"},{"name":"intro","figmaSlotName":"Intro"},{"name":"metrics","figmaSlotName":"Metrics"},{"name":"content","figmaSlotName":"Content"}],"tier":"template","docExempt":false,"figmaLink":null,"storyFiles":[],"storyIds":[]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34","figmaId":null,"preview":{"exportName":"Alert","sizing":"panel"},"consumers":["src/app/components/badge.tsx","src/app/components/dialog.tsx","src/app/components/empty-state.tsx","src/app/components/toast.tsx","src/app/data/hdsEditorial.tsx","src/stories/alert-dialog.stories.tsx","src/stories/alert.stories.tsx","src/stories/static-primitives.stories.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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34","props":{"children":{"type":"ReactNode"},"title":{"type":"string","optional":true},"tone":{"type":"enum","values":["success","danger","warning","info"],"default":"info"}},"propConstraints":{"title":{"type":"string"},"tone":{"type":"enum","values":["success","danger","warning","info"]}},"storyFiles":["src/stories/alert.stories.tsx"],"storyIds":["primitives-alert--all-variants","primitives-alert--error","primitives-alert--info","primitives-alert--success","primitives-alert--warning","primitives-alert--with-title"],"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"}]}},"CinematicLink":{"category":"Branding","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/cinematic-link.tsx","description":"CinematicLink - cinematic editorial link treatment for portfolio surfaces.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"CinematicLink","sizing":"panel"},"consumers":["src/app/components/animated-label.tsx","src/stories/cinematic-link.stories.tsx"],"tokenMapping":{},"props":{"href":{"type":"string"},"children":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/CinematicLink.tsx","figmaLink":null,"storyFiles":["src/stories/cinematic-link.stories.tsx"],"storyIds":["primitives-cinematic-link--default","primitives-cinematic-link--external-href","primitives-cinematic-link--long-label","primitives-cinematic-link--short-label"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154","figmaId":null,"preview":{"exportName":"CodeBlock","sizing":"panel"},"consumers":["src/docs-tooling/lab/legacy-token-detail.tsx","src/index.ts","src/stories/code-block.stories.tsx"],"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"},"filename":{"type":"string","optional":true},"language":{"type":"string","optional":true},"truncateFromStart":{"type":"boolean","default":false},"variant":{"type":"enum","values":["block","inline"],"default":"block"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/CodeBlock.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154","storyFiles":["src/stories/code-block.stories.tsx"],"storyIds":["primitives-code-block--collapsible","primitives-code-block--css-highlighting","primitives-code-block--default","primitives-code-block--inline","primitives-code-block--json-highlighting"]},"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/bleed.tsx","src/app/components/box.tsx","src/app/components/center.tsx","src/app/components/page.tsx","src/app/components/switcher.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/app/layouts/CaseStudyLayout.tsx","src/app/layouts/DocLayout.tsx","src/stories/box.stories.tsx","src/stories/container.stories.tsx","src/stories/page.stories.tsx","src/stories/patterns-layout.stories.tsx"],"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-component-padding)"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Container.tsx","figmaLink":null,"storyFiles":["src/stories/container.stories.tsx"],"storyIds":["primitives-container--content-width","primitives-container--max-width"],"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. Use Center instead when you also need a horizontal gutter, which Container does not support."},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453","figmaId":null,"preview":{"exportName":"Disclosure","sizing":"panel"},"consumers":["src/app/components/nav-group.tsx","src/app/components/tabs.tsx","src/app/layouts/HdsDocsShell.tsx","src/stories/disclosure.stories.tsx","src/stories/nav-group.stories.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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453","storyFiles":["src/stories/disclosure.stories.tsx"],"storyIds":["primitives-disclosure--controlled","primitives-disclosure--multiple-items","primitives-disclosure--open-by-default","primitives-disclosure--panel"],"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"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26","figmaId":null,"preview":{"exportName":"Divider","sizing":"panel"},"consumers":["src/app/components/metadata-list.tsx","src/app/data/hdsEditorial.tsx","src/stories/divider.stories.tsx","src/stories/static-primitives.stories.tsx"],"tokenMapping":{"Default stroke":"semantic.color.border.default","Strong stroke":"semantic.color.border.strong","Stroke thickness":"primitive.borderWidth.xs"},"allowedChildren":[],"requiredProps":[],"a11yRules":[],"variantAxes":["orientation","variant"],"componentProperties":[],"states":["default"],"slots":[{"name":"line","figmaSlotName":"Line","tokenBinding":{"fill":"semantic.color.border.default"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Divider.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26","props":{"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"]}},"storyFiles":["src/stories/divider.stories.tsx"],"storyIds":["primitives-divider--between-sections","primitives-divider--horizontal","primitives-divider--horizontal-strong","primitives-divider--legacy-strong-prop","primitives-divider--vertical","primitives-divider--with-spacing"],"usage":{"when":"Separate two regions of content with a thin semantic rule.","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"}]}},"DocLinkCard":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"description":"DocLinkCard - navigation card for editorial and documentation cross-links.","figmaUrl":null,"tokenMapping":{"background":"component.card.bg","border":"component.card.border","radius":"component.card.radius","padding":"component.card.padding","gap":"component.card.gap","accent":"semantic.color.content.accent"},"filePath":"src/app/components/doc-link-card.tsx","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[{"rule":"Card link must have descriptive accessible name (not just the URL)","required":true},{"rule":"Focus ring visible on keyboard navigation","required":true}],"preview":{"exportName":"DocLinkCard","sizing":"panel"},"tier":"primitive","hidden":false,"docExempt":false,"figmaId":null,"figmaLink":null,"consumers":["src/app/components/doc-link-card.test.tsx","src/app/data/hdsEditorial.tsx","src/index.ts","src/stories/doc-link-card.stories.tsx"],"variantAxes":[],"componentProperties":[],"storyFiles":["src/stories/doc-link-card.stories.tsx"],"storyIds":["primitives-doc-link-card--accent","primitives-doc-link-card--default","primitives-doc-link-card--disabled","primitives-doc-link-card--pager-back","primitives-doc-link-card--pager-forward"]},"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":null,"figmaId":null,"preview":{"exportName":"ErrorPattern","sizing":"panel"},"consumers":["src/app/components/not-found-pattern.tsx","src/index.ts","src/stories/error-pattern.stories.tsx","src/stories/not-found-pattern.stories.tsx"],"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":null,"storyFiles":["src/stories/error-pattern.stories.tsx"],"storyIds":["feedback-error-pattern--default","feedback-error-pattern--not-found","feedback-error-pattern--server-error","feedback-error-pattern--unauthorized"]},"FoundationSwatch":{"category":"Utilities","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/foundation-swatch.tsx","description":"FoundationSwatch - governed foundation specimen for color and semantic role previews.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"FoundationSwatch","sizing":"full"},"consumers":["src/stories/foundation-swatch.stories.tsx"],"tokenMapping":{},"props":{"background":{"type":"string"},"bordered":{"type":"boolean","default":false},"details":{"type":"string[]","optional":true},"foreground":{"type":"string","default":"var(--semantic-color-content-primary)"},"hidePreviewLabel":{"type":"boolean","default":false},"label":{"type":"string"},"note":{"type":"ReactNode","optional":true},"previewPosition":{"type":"enum","values":["bottom-left","top-left","center"],"default":"center"},"specimen":{"type":"ReactNode","optional":true},"swatchVar":{"type":"string","optional":true},"tokenDisplayPreset":{"type":"enum","values":["depth1","depth2","full"],"default":"depth2"},"tokenPath":{"type":"string","optional":true},"value":{"type":"string","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{}},{"name":"specimen","figmaSlotName":"Specimen","tokenBinding":{"stroke":"semantic.color.border.default"}},{"name":"label","figmaSlotName":"Label","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"note","figmaSlotName":"Note","tokenBinding":{"fill":"semantic.color.content.secondary"}}],"sourcePath":"src/app/components/FoundationSwatch.tsx","figmaLink":null,"storyFiles":["src/stories/foundation-swatch.stories.tsx"],"storyIds":["primitives-foundation-swatch--color-grid","primitives-foundation-swatch--default","primitives-foundation-swatch--feedback-palette","primitives-foundation-swatch--with-details","primitives-foundation-swatch--with-specimen"]},"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. - 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.tsx","src/app/components/cluster.tsx","src/app/components/container.tsx","src/app/components/foundation-swatch.tsx","src/app/components/image-lightbox.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/docs-tooling/shell-controls.tsx","src/docs-tooling/sketch-controls.tsx","src/stories/box.stories.tsx","src/stories/foundation-swatch.stories.tsx","src/stories/grid.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/segmented-control.stories.tsx","src/stories/surface.stories.tsx","src/stories/tile-grid.stories.tsx"],"tokenMapping":{},"props":{"layout":{"type":"enum","values":["fixed","auto-fit"],"default":"fixed"},"columns":{"type":"number","default":12},"gap":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"inset"},"subgrid":{"type":"boolean","default":false},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"as":{"type":"React.ElementType","optional":true}},"allowedChildren":["*"],"propConstraints":{"layout":{"type":"enum","values":["fixed","auto-fit"]},"gap":{"type":"enum","values":["tight","normal","inset","spacious"]},"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,"storyFiles":["src/stories/grid.stories.tsx"],"storyIds":["primitives-grid--aside-layout","primitives-grid--auto-fit","primitives-grid--three-column","primitives-grid--two-column"],"usage":{"when":"Lay out content in responsive columns with token-governed gaps, or align 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, or subgrid modes already express the layout. Do NOT use Grid for simple one-dimensional stacks where Stack is sufficient."},"Icon":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/icon.tsx","description":"Icon — semantic icon wrapper for Lucide icons.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Icon","sizing":"panel"},"consumers":["src/app/components/activity-feed.test.tsx","src/app/components/activity-feed.tsx","src/app/components/alert.tsx","src/app/components/avatar.tsx","src/app/components/breadcrumb.tsx","src/app/components/checkbox.tsx","src/app/components/code-block.tsx","src/app/components/combobox.tsx","src/app/components/context-menu.tsx","src/app/components/disclosure.tsx","src/app/components/doc-link-card.tsx","src/app/components/history-card.tsx","src/app/components/icon-button.tsx","src/app/components/image-lightbox.tsx","src/app/components/inline-link.tsx","src/app/components/menu.tsx","src/app/components/multi-selector.tsx","src/app/components/select.tsx","src/app/components/table.tsx","src/app/components/text-lockup.tsx","src/app/components/toast.tsx","src/app/components/tokenTableUtils.ts","src/app/components/tokenUtils.ts","src/app/data/hdsEditorial.tsx","src/docs-tooling/lab/legacy-token-detail.tsx","src/docs-tooling/shell-controls.tsx","src/docs-tooling/theme-toggle.tsx","src/stories/activity-feed.stories.tsx","src/stories/icon-button.stories.tsx","src/stories/icon.stories.tsx","src/stories/nav-group.stories.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":"Icon"},"size":{"type":"IconSize","default":"small"},"style":{"type":"CSSProperties","optional":true},"weight":{"type":"enum","values":["thin","light","bold","fill","regular","duotone"],"optional":true}},"allowedChildren":[],"propConstraints":{"aria-hidden":{"type":"boolean"},"className":{"type":"string"},"color":{"type":"string"},"weight":{"type":"enum","values":["thin","light","bold","fill","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":null,"storyFiles":["src/stories/icon.stories.tsx"],"storyIds":["primitives-icon--default","primitives-icon--large","primitives-icon--medium","primitives-icon--semantic-color","primitives-icon--semantic-colors","primitives-icon--size-gallery"],"usage":{"when":"Draw a Lucide glyph at a size and colour from the design tokens.","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"}]}},"IconButton":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/icon-button.tsx","description":"IconButton ” icon-only action trigger built on the shared Button primitive.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39","figmaId":null,"preview":{"exportName":"IconButton","sizing":"panel"},"consumers":["src/app/components/button.test.tsx","src/app/components/data-table-section.tsx","src/app/components/hds-tooltip.tsx","src/app/components/inline-code.tsx","src/app/components/pagination.tsx","src/app/components/stepper-field.tsx","src/app/data/hdsEditorial.tsx","src/docs-tooling/page-footer.tsx","src/docs-tooling/shell-controls.tsx","src/stories/data-table-section.stories.tsx","src/stories/icon-button.stories.tsx","src/stories/lib/usage-description.test.ts","src/stories/patterns-client-detail.stories.tsx"],"tokenMapping":{"Fill":"semantic.accent.rest","Fill hover":"semantic.accent.hover","Fill pressed":"semantic.accent.pressed","Label":"semantic.color.content.onAccent","Corner radius":"semantic.radius.action","Horizontal padding":"primitive.space.4","Vertical padding":"primitive.space.2"},"props":{"aria-label":{"type":"string","optional":true},"asChild":{"type":"boolean","optional":true},"icon":{"type":"Icon"},"iconColor":{"type":"string","optional":true},"iconLeft":{"type":"ReactNode","optional":true},"iconRight":{"type":"ReactNode","optional":true},"iconSize":{"type":"IconSize","optional":true},"isDark":{"type":"boolean","optional":true},"label":{"type":"string","optional":true},"loading":{"type":"boolean","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"variant":{"type":"enum","values":["primary","secondary","tertiary"],"default":"secondary"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[{"rule":"Must have aria-label (icon-only buttons have no visible text)","required":true},{"rule":"Focus ring visible in all interactive states (uses hds-focus class)","required":true}],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"fill":"semantic.color.surface.action"}},{"name":"icon","figmaSlotName":"Icon","tokenBinding":{"fill":"semantic.color.content.primary"}}],"sourcePath":"src/app/components/IconButton.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39","storyFiles":["src/stories/icon-button.stories.tsx"],"storyIds":["primitives-icon-button--default","primitives-icon-button--disabled","primitives-icon-button--primary","primitives-icon-button--size-gallery","primitives-icon-button--tertiary"],"usage":{"when":"Trigger an action from a compact icon-only control, always with an accessible label.","whenNot":"A control that needs a visible text label.","useInstead":[{"component":"Button","reason":"a control with a text label, or Button iconOnly (hds#254 folds IconButton into it)"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155","figmaId":null,"preview":{"exportName":"InlineCode","sizing":"panel"},"consumers":["src/app/components/metadata-list.tsx","src/app/data/hdsEditorial.tsx","src/stories/inline-code.stories.tsx","src/stories/metadata-list.stories.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":{"compact":{"type":"boolean","default":false},"copyable":{"type":"boolean","default":false},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155","storyFiles":["src/stories/inline-code.stories.tsx"],"storyIds":["primitives-inline-code--comfortable","primitives-inline-code--compact","primitives-inline-code--compact-deprecated-alias","primitives-inline-code--copyable","primitives-inline-code--copyable-in-prose","primitives-inline-code--default","primitives-inline-code--in-prose"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161","figmaId":null,"preview":{"exportName":"InlineLink","sizing":"panel"},"consumers":["src/app/components/button.tsx","src/app/components/hover-card.tsx","src/app/components/image-lightbox.tsx","src/app/components/text.tsx","src/docs-tooling/lab/legacy-token-detail.tsx","src/stories/inline-link.stories.tsx","src/stories/lib/usage-description.test.ts"],"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":{},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161","storyFiles":["src/stories/inline-link.stories.tsx"],"storyIds":["primitives-inline-link--default","primitives-inline-link--external-no-icon","primitives-inline-link--in-body-copy","primitives-inline-link--internal-route"],"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"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20","figmaId":null,"preview":{"exportName":"Input","sizing":"panel"},"consumers":["src/app/components/field.tsx","src/app/components/form.tsx","src/app/components/segmented-control.tsx","src/app/components/slider.tsx","src/app/components/stepper-field.tsx","src/app/components/textarea.tsx","src/app/components/time-input.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/stories/combobox.stories.tsx","src/stories/date-input.stories.tsx","src/stories/date-range-input.stories.tsx","src/stories/date-time-input.stories.tsx","src/stories/file-input.stories.tsx","src/stories/input-group.stories.tsx","src/stories/input.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/textarea.stories.tsx","src/stories/time-input.stories.tsx"],"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":{"type":{"type":"enum","values":["text","email","password","search","tel","url","number"],"default":"text"},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"textStyle":{"type":"enum","values":["body","mono"],"default":"body"},"label":{"type":"string","optional":true},"placeholder":{"type":"string","optional":true},"helperText":{"type":"string","optional":true},"error":{"type":"boolean","default":false},"errorMessage":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"loading":{"type":"boolean","default":false}},"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":{"type":{"type":"enum","values":["text","email","password","search","tel","url","number"]},"size":{"type":"enum","values":["sm","md","lg"]},"textStyle":{"type":"enum","values":["body","mono"]},"label":{"type":"string"},"placeholder":{"type":"string"},"helperText":{"type":"string"},"error":{"type":"boolean"},"errorMessage":{"type":"string"},"disabled":{"type":"boolean"},"loading":{"type":"boolean"}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20","storyFiles":["src/stories/input.stories.tsx"],"storyIds":["primitives-input--default","primitives-input--disabled","primitives-input--loading","primitives-input--mono","primitives-input--size-variants","primitives-input--with-error","primitives-input--with-helper"],"usage":{"when":"Collect a single line of text, a number, an email or a password, 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"}]}},"NavGroup":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/nav-group.tsx","description":"NavGroup - labeled navigation group for stacks of nav items.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304","figmaId":null,"preview":{"exportName":"NavGroup","sizing":"panel"},"consumers":["src/app/lib/nav-active.ts","src/stories/nav-group.stories.tsx"],"tokenMapping":{},"props":{"className":{"type":"string","optional":true},"collapsible":{"type":"boolean","default":false},"contentStyle":{"type":"CSSProperties","optional":true},"getExact":{"type":"(item: NavItem) => boolean","optional":true},"items":{"type":"NavItem[]","optional":true},"label":{"type":"string","optional":true},"level":{"type":"NavLevel","default":"section"},"onNavigate":{"type":"() => void","optional":true},"style":{"type":"CSSProperties","optional":true},"variant":{"type":"enum","values":["side","toc"],"default":"side"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[{"rule":"Navigation group must have accessible label (aria-label on the nav element)","required":true},{"rule":"Expanded/collapsed state communicated via aria-expanded","required":true}],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{}},{"name":"label","figmaSlotName":"Label","tokenBinding":{"fill":"semantic.color.content.secondary"}},{"name":"items","figmaSlotName":"Items","tokenBinding":{"gap":"semantic.space.sidebar.gap"}}],"sourcePath":"src/app/components/NavGroup.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304","storyFiles":["src/stories/nav-group.stories.tsx"],"storyIds":["primitives-nav-group--collapsible","primitives-nav-group--default","primitives-nav-group--no-label","primitives-nav-group--toc-variant","primitives-nav-group--with-disabled-item"]},"NavItem":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/nav-item.tsx","description":"NavItem - navigation row primitive for sidebars, table of contents, and list navigation.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258","figmaId":null,"preview":{"exportName":"NavItem","sizing":"panel"},"consumers":["src/app/components/nav-group.tsx","src/app/context/DemoStateContext.tsx","src/app/data/hds-nav-data.ts","src/app/hooks/useInteractionState.ts","src/app/layouts/HdsDocsShell.tsx","src/index.ts","src/stories/nav-group.stories.tsx","src/stories/nav-item.stories.tsx"],"tokenMapping":{},"props":{"active":{"type":"boolean","default":false},"disabled":{"type":"boolean","default":false},"label":{"type":"string"},"level":{"type":"NavLevel","default":"root"},"onNavigate":{"type":"(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void","optional":true},"variant":{"type":"enum","values":["side","toc"],"default":"side"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[{"rule":"Active item must be communicated via aria-current=\\"page\\" or aria-selected","required":true},{"rule":"Focus ring visible in all interactive states (uses hds-focus class)","required":true}],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/NavItem.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258","storyFiles":["src/stories/nav-item.stories.tsx"],"storyIds":["primitives-nav-item--active","primitives-nav-item--button-mode","primitives-nav-item--default","primitives-nav-item--disabled","primitives-nav-item--nested-level","primitives-nav-item--toc-active","primitives-nav-item--toc-variant"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334","figmaId":null,"preview":{"exportName":"SegmentedControl","sizing":"panel"},"consumers":["src/app/components/button-group.tsx","src/app/components/radio.tsx","src/app/components/segmented-control.test.tsx","src/app/components/tabs.tsx","src/app/data/hdsEditorial.tsx","src/app/hooks/useInteractionState.ts","src/docs-tooling/TokenDisplayToggle.tsx","src/stories/segmented-control.stories.tsx"],"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":{"ariaLabel":{"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":["default","compact"],"default":"default"},"value":{"type":"string"},"variant":{"type":"enum","values":["primary","secondary"],"default":"primary"}},"allowedChildren":["*"],"propConstraints":{},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334","storyFiles":["src/stories/segmented-control.stories.tsx"],"storyIds":["primitives-segmented-control--compact","primitives-segmented-control--full-width","primitives-segmented-control--primary","primitives-segmented-control--secondary"],"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"}]}},"Sketch":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/sketch.tsx","description":"Sketch — shared shell for generative canvases and WebGL sketches.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Sketch","sizing":"panel"},"consumers":["src/stories/sketch.stories.tsx"],"tokenMapping":{},"props":{"controls":{"type":"ReactNode","optional":true},"title":{"type":"string"},"children":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"fill":"semantic.color.surface.canvas"}},{"name":"header","figmaSlotName":"Header","tokenBinding":{"stroke":"semantic.color.border.default"}},{"name":"title","figmaSlotName":"Title","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"canvas","figmaSlotName":"Canvas","tokenBinding":{}}],"sourcePath":"src/app/components/Sketch.tsx","figmaLink":null,"storyFiles":["src/stories/sketch.stories.tsx"],"storyIds":["layout-sketch--default","layout-sketch--narrow-canvas","layout-sketch--with-controls"]},"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/activity-feed.tsx","src/app/components/box.tsx","src/app/components/button-group.tsx","src/app/components/cluster.tsx","src/app/components/container.tsx","src/app/components/cover.tsx","src/app/components/data-table-section.tsx","src/app/components/disclosure.tsx","src/app/components/divider.tsx","src/app/components/error-boundary.tsx","src/app/components/error-pattern.tsx","src/app/components/foundation-swatch.tsx","src/app/components/grid.tsx","src/app/components/heading-stack.tsx","src/app/components/image-lightbox.tsx","src/app/components/nav-group.tsx","src/app/components/page-header.tsx","src/app/components/page.tsx","src/app/components/sketch.tsx","src/app/components/surface.tsx","src/app/components/table.tsx","src/app/components/tooltip.tsx","src/app/data/hdsEditorial.tsx","src/app/layouts/CaseStudyLayout.tsx","src/app/layouts/DocLayout.tsx","src/docs-tooling/controls-panel.tsx","src/docs-tooling/doc-page-header.tsx","src/docs-tooling/lab/token-collection-list.tsx","src/docs-tooling/shell-controls.tsx","src/docs-tooling/sketch-controls.tsx","src/stories/box.stories.tsx","src/stories/code-block.stories.tsx","src/stories/grid.stories.tsx","src/stories/heading-stack.stories.tsx","src/stories/page.stories.tsx","src/stories/patterns-client-detail.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/stack.stories.tsx"],"tokenMapping":{"Default gap":"primitive.space.3","Compact gap":"primitive.space.2","Wide gap":"primitive.space.6"},"props":{"direction":{"type":"enum","values":["column","row"],"default":"column"},"gap":{"type":"enum","values":["tight","normal","inset","spacious","gap","medium","hairline","xs","stack"],"default":"tight"},"align":{"type":"enum","values":["start","center","end","stretch"],"optional":true},"justify":{"type":"enum","values":["start","center","end","space-between"],"optional":true},"wrap":{"type":"boolean","default":false},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"as":{"type":"React.ElementType","optional":true}},"allowedChildren":["*"],"propConstraints":{"direction":{"type":"enum","values":["column","row"]},"gap":{"type":"enum","values":["tight","normal","inset","spacious","gap","medium","hairline","xs","stack"]},"align":{"type":"enum","values":["start","center","end","stretch"]},"justify":{"type":"enum","values":["start","center","end","space-between"]},"wrap":{"type":"boolean"}},"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,"storyFiles":["src/stories/stack.stories.tsx"],"storyIds":["primitives-stack--column","primitives-stack--row","primitives-stack--space-between","primitives-stack--spacious-gap","primitives-stack--tight-gap"],"usage":{"when":"Space a row or column of content with token gaps and simple flex alignment.","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."},"StepperField":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/stepper-field.tsx","description":"StepperField ” numeric input with decrement/increment controls. Classification baseline: Material Design, Chakra UI, and Ant Design treat steppers as numeric input controls rather than page-specific controls. This lives in shared components so sketches and docs consume the same primitive.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425","figmaId":null,"preview":{"exportName":"StepperField","sizing":"panel"},"consumers":["src/app/components/stepper-field.test.tsx","src/stories/stepper-field.stories.tsx"],"tokenMapping":{},"props":{"inputStep":{"type":"number","optional":true},"label":{"type":"string"},"max":{"type":"number"},"min":{"type":"number"},"onChange":{"type":"(value: number) => void"},"precision":{"type":"number","optional":true},"step":{"type":"number"},"value":{"type":"number"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[{"rule":"Must have associated label via label prop or aria-labelledby","required":true},{"rule":"Decrement/increment buttons must have aria-label","required":true}],"variantAxes":[],"componentProperties":[],"tier":"pattern","docExempt":false,"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"fill":"semantic.color.surface.canvas"}},{"name":"label","figmaSlotName":"Label","tokenBinding":{"fill":"semantic.color.content.secondary"}},{"name":"controls","figmaSlotName":"Controls","tokenBinding":{"gap":"semantic.space.component.gap"}}],"sourcePath":"src/app/components/StepperField.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425","storyFiles":["src/stories/stepper-field.stories.tsx"],"storyIds":["primitives-stepper-field--column-count","primitives-stepper-field--decimal","primitives-stepper-field--default","primitives-stepper-field--dimension-panel","primitives-stepper-field--font-size"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/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/hdsEditorial.tsx","src/app/data/manifest-types.ts","src/docs-tooling/api-reference.tsx","src/docs-tooling/propTableUtils.tsx","src/stories/data-table-section.stories.tsx","src/stories/nav-group.stories.tsx","src/stories/nav-item.stories.tsx","src/stories/segmented-control.stories.tsx","src/stories/table.stories.tsx"],"tokenMapping":{},"props":{"caption":{"type":"ReactNode","optional":true},"captionAction":{"type":"ReactNode","optional":true},"columns":{"type":"TableColumn[]"},"density":{"type":"enum","values":["compact","comfortable"],"default":"comfortable"},"description":{"type":"ReactNode","optional":true},"flush":{"type":"boolean","default":false},"minWidth":{"type":"string | number","optional":true},"rows":{"type":"TableRow[]"},"stickyHeader":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300","storyFiles":["src/stories/table.stories.tsx"],"storyIds":["primitives-table--default","primitives-table--density-comfortable","primitives-table--density-compact","primitives-table--flush","primitives-table--follows-density-dial","primitives-table--sortable","primitives-table--with-badge-slots","primitives-table--with-caption"],"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"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11","figmaId":null,"preview":{"exportName":"Tag","sizing":"panel"},"consumers":["src/app/components/badge.tsx","src/app/components/bleed.tsx","src/app/components/box.tsx","src/app/components/breadcrumb.tsx","src/app/components/card.tsx","src/app/components/center.tsx","src/app/components/cluster.tsx","src/app/components/cover.tsx","src/app/components/file-input.tsx","src/app/components/frame.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/tokenizer.tsx","src/app/components/visually-hidden.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/stories/static-primitives.stories.tsx","src/stories/tag.stories.tsx"],"tokenMapping":{"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},"ariaLabel":{"type":"string","optional":true},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"onClick":{"type":"() => void","optional":true},"title":{"type":"string","optional":true}},"allowedChildren":[],"propConstraints":{"active":{"type":"boolean"},"ariaLabel":{"type":"string"},"className":{"type":"string"},"title":{"type":"string"}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11","storyFiles":["src/stories/tag.stories.tsx"],"storyIds":["primitives-tag--active","primitives-tag--default","primitives-tag--disabled","primitives-tag--filter-row","primitives-tag--interactive","primitives-tag--state-matrix"],"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"}]}},"Token":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/token.tsx","description":"Token - reflective token specimen for unified node-based token views. The `variant` axis (node | diagram — diagram is a deprecated alias that resolves to the same node treatment) plus the `selected` / `fullWidth` / `asButton` / `nowrap` / `sourceNode` states used to be a Token.module.css `[data-*]` attribute stylesheet, with a duplicate `isSelected` branch re-painted inline on top of it. Both now live as one `cva` variant set — same `--semantic-*`/`--component-*`/`--primitive-*` custom properties, same pixels, no CSS module.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Token","sizing":"panel"},"consumers":["src/app/components/activity-feed.tsx","src/app/components/box-sx.ts","src/app/components/box.tsx","src/app/components/code-block.tsx","src/app/components/foundation-swatch.tsx","src/app/components/side-nav.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/app/lib/hds-search.ts","src/app/stores/mobiusStore.ts","src/docs-tooling/health-rail.tsx","src/docs-tooling/lab/legacy-token-detail.tsx","src/docs-tooling/lab/legacy-token-list.tsx","src/docs-tooling/lab/token-collection-list.tsx","src/docs-tooling/TokenDisplayToggle.tsx","src/index.ts","src/stories/activity-feed.stories.tsx","src/stories/card.stories.tsx","src/stories/foundation-swatch.stories.tsx","src/stories/heading-stack.stories.tsx","src/stories/input.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/stacked-card-rail.stories.tsx","src/stories/status-list-item.stories.tsx","src/stories/table.stories.tsx","src/stories/tabs.stories.tsx","src/stories/text-lockup.stories.tsx","src/stories/text.stories.tsx","src/stories/toast.stories.tsx","src/stories/token.stories.tsx"],"tokenMapping":{"Node label text":"semantic.color.content.primary","Diagram label text":"semantic.color.content.secondary","Diagram accent color":"semantic.color.content.accent","Border stroke":"semantic.color.border.default","Font family":"primitive.typography.family.mono","Corner radius (sm)":"primitive.radius.4","Corner radius (xs)":"primitive.radius.2"},"props":{"accentColor":{"type":"string"},"ariaLabel":{"type":"string","optional":true},"className":{"type":"string","optional":true},"description":{"type":"ReactNode","optional":true},"fullWidth":{"type":"boolean","optional":true},"isSelected":{"type":"boolean","optional":true},"isSourceNode":{"type":"boolean","optional":true},"label":{"type":"string"},"leadingSlot":{"type":"ReactNode","optional":true},"nodeRef":{"type":"(el: HTMLElement) => void","optional":true},"nowrap":{"type":"boolean","optional":true},"onClick":{"type":"(() => void) | (() => void)","optional":true},"pathDisplayDepth":{"type":"number","optional":true},"pathDisplayLeadingDot":{"type":"boolean","optional":true},"pathDisplayMode":{"type":"enum","values":["full","compressed"],"optional":true},"rawValue":{"type":"ReactNode","optional":true},"swatchVar":{"type":"string","optional":true},"tokenPath":{"type":"string","optional":true},"truncateFromStart":{"type":"boolean","optional":true},"value":{"type":"string"},"variant":{"type":"enum","values":["node","diagram"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Token.tsx","figmaLink":null,"storyFiles":["src/stories/token.stories.tsx"],"storyIds":["primitives-token--color-token","primitives-token--compressed-path","primitives-token--default","primitives-token--explicit-swatch","primitives-token--selected","primitives-token--source-node"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/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-boundary.tsx","src/app/components/error-pattern.tsx","src/app/components/foundation-swatch.tsx","src/app/components/image-lightbox.tsx","src/app/components/metric-tiles.tsx","src/app/components/popover.tsx","src/app/components/sketch.tsx","src/app/components/slider.tsx","src/app/components/stack.tsx","src/app/components/stepper-field.tsx","src/app/components/surface-padding.ts","src/app/components/table.tsx","src/app/components/tokenTableUtils.ts","src/app/components/tokenUtils.ts","src/app/components/tooltip.tsx","src/app/context/hds-theme.tsx","src/app/data/hdsEditorial.tsx","src/app/layouts/CaseStudyLayout.tsx","src/docs-tooling/api-reference.tsx","src/docs-tooling/component-preview.tsx","src/docs-tooling/controls-panel.tsx","src/docs-tooling/doc-page-header.tsx","src/docs-tooling/lab/token-list.tsx","src/docs-tooling/preview-frame.tsx","src/docs-tooling/shell-controls.tsx","src/docs-tooling/sketch-controls.tsx","src/stories/card.stories.tsx","src/stories/container.stories.tsx","src/stories/grid.stories.tsx","src/stories/page.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/surface.stories.tsx","src/stories/text-lockup.stories.tsx"],"tokenMapping":{},"props":{"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"padding":{"type":"enum","values":["px16","px24"],"default":"px16"},"shadow":{"type":"boolean","default":false},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":true,"sourcePath":"src/app/components/Surface.tsx","figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-27","states":["default"],"storyFiles":["src/stories/surface.stories.tsx"],"storyIds":["primitives-surface--card-grid","primitives-surface--default","primitives-surface--forced-dark","primitives-surface--item-padding","primitives-surface--with-shadow"],"usage":{"when":"Wrap content in a padded, background-bearing inset surface with no header or footer anatomy.","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."},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11","figmaId":null,"consumers":["src/app/components/card-progress.test.tsx","src/app/components/destructive-section.tsx","src/app/components/doc-link-card.tsx","src/app/components/empty-state.tsx","src/app/components/field.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/stacked-card-rail.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/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/stories/card.stories.tsx","src/stories/doc-link-card.stories.tsx","src/stories/grid.stories.tsx","src/stories/history-card.stories.tsx","src/stories/hover-card.stories.tsx","src/stories/metric-tiles.stories.tsx","src/stories/selectable-card.stories.tsx","src/stories/stacked-card-rail.stories.tsx","src/stories/static-primitives.stories.tsx"],"tokenMapping":{"Surface fill":"role.card","Border stroke":"role.border","Corner radius":"role.radius"},"sourcePath":"src/app/components/Card.tsx","sourceExport":"Card","props":{"as":{"type":"string","optional":true},"padding":{"type":"enum","values":["component","item","none","px24","px16"],"default":"component"},"gap":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"tight"},"noPadding":{"type":"boolean","default":false},"variant":{"type":"enum","values":["default","accent"],"default":"default"},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"],"default":"neutral"},"bordered":{"type":"boolean","default":false},"className":{"type":"string","optional":true},"children":{"type":"ReactNode"}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11","propConstraints":{"as":{"type":"string"},"padding":{"type":"enum","values":["component","item","none","px24","px16"]},"gap":{"type":"enum","values":["tight","normal","inset","spacious"]},"noPadding":{"type":"boolean"},"variant":{"type":"enum","values":["default","accent"]},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"]},"bordered":{"type":"boolean"},"className":{"type":"string"}},"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"],"usage":{"when":"Group related content on a raised surface with header, body, footer and metric slots.","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"}]}},"ComponentInstanceMatrix":{"category":"Utilities","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/component-instance-matrix.tsx","description":"ComponentInstanceMatrix — responsive specimen matrix for variant and state parity.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ComponentInstanceMatrix","sizing":"full"},"consumers":["src/stories/component-instance-matrix.stories.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"primitive","docExempt":true,"variantAxes":[],"componentProperties":[],"sourcePath":"src/app/components/ComponentInstanceMatrix.tsx","figmaLink":null,"storyFiles":["src/stories/component-instance-matrix.stories.tsx"],"storyIds":["primitives-component-instance-matrix--default","primitives-component-instance-matrix--frozen-row-state","primitives-component-instance-matrix--mobile-layout"]},"ActivityFeed":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/activity-feed.tsx","description":"ActivityFeed — chronological system event log. Renders a list of activity events using white space as the sole separator. No dividers, no borders between items. 48px gap (space.12) creates the visual grouping between events; 16px gap inside each item structures the content hierarchy. Typography mapping: title → heading3 (24px/1.25) description → body (16px/1.5) timestamp → technical (12px/1.0 mono) category → ui (14px/1.5)","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ActivityFeed","sizing":"panel"},"consumers":["src/app/components/activity-feed.test.tsx","src/index.ts","src/stories/activity-feed.stories.tsx"],"tokenMapping":{},"props":{"events":{"type":"ActivityEvent[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"pattern","docExempt":true,"variantAxes":[],"componentProperties":[],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{}},{"name":"item","figmaSlotName":"Item","tokenBinding":{}},{"name":"avatar","figmaSlotName":"Avatar","tokenBinding":{"fill":"semantic.color.surface.raised"}},{"name":"title","figmaSlotName":"Title","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"description","figmaSlotName":"Description","tokenBinding":{"fill":"semantic.color.content.secondary"}},{"name":"timestamp","figmaSlotName":"Timestamp","tokenBinding":{"fill":"semantic.color.content.secondary"}}],"sourcePath":"src/app/components/ActivityFeed.tsx","figmaLink":null,"storyFiles":["src/stories/activity-feed.stories.tsx"],"storyIds":["primitives-activity-feed--all-success","primitives-activity-feed--default","primitives-activity-feed--errors-and-warnings","primitives-activity-feed--single-event"]},"HeadingStack":{"category":"Typography","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/heading-stack.tsx","description":"HeadingStack — enforced vertical rhythm for heading + subheading pairs. Automatically handles gap and secondary color, preventing manual stacking. - Heading level: \'heading1\' | \'heading2\' | \'heading3\' - Gap: px4 (tight) | px8 (default) - Subheading color: always var(--semantic-color-content-secondary) GUARDRAIL: Never manually stack headings using Stack. Always use HeadingStack. Usage: <HeadingStack level=\\"heading1\\" heading=\\"Main Title\\" subheading=\\"Subtitle text\\" /> <HeadingStack level=\\"heading2\\" heading=\\"Section\\" subheading=\\"Description\\" gap=\\"px4\\" />","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HeadingStack","sizing":"panel"},"consumers":["src/app/components/heading-stack.test.tsx","src/stories/heading-stack.stories.tsx"],"tokenMapping":{},"props":{"heading":{"type":"string"},"subheading":{"type":"string"},"level":{"type":"HdsHeadingLevel"},"gap":{"type":"HdsHeadingGap","optional":true},"as":{"type":"ElementType","optional":true},"headingAs":{"type":"HdsHeadingTag","optional":true},"subheadingAs":{"type":"HdsSupportingTag","optional":true}},"allowedChildren":[],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[{"name":"Heading","type":"TEXT","defaultValue":"Heading","sourceProp":"heading","boundTo":"characters","targetSelector":"Heading"},{"name":"Subheading","type":"TEXT","defaultValue":"Supporting subheading","sourceProp":"subheading","boundTo":"characters","targetSelector":"Subheading"}],"states":["default"],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.subgrid.gap"}},{"name":"heading","figmaSlotName":"Heading","tokenBinding":{"fill":"semantic.color.content.primary"}},{"name":"subtext","figmaSlotName":"Subtext","tokenBinding":{"fill":"semantic.color.content.secondary"}}],"tier":"primitive","docExempt":true,"sourcePath":"src/app/components/HeadingStack.tsx","figmaLink":null,"storyFiles":["src/stories/heading-stack.stories.tsx"],"storyIds":["primitives-heading-stack--all-levels","primitives-heading-stack--default","primitives-heading-stack--heading-1","primitives-heading-stack--heading-2","primitives-heading-stack--heading-3","primitives-heading-stack--tight-gap"]},"HdsSystemDocLayout":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/layouts/HdsSystemDocLayout.tsx","description":"HdsSystemDocLayout — single centered content column for documentation pages. Thin wrapper around DocLayout: takes only `contentSlot` and `contentMaxWidth`, with no sidebar or nav region to pass one into. Not the three-column docs shell (left rail + content + right rail) — that is tracked as its own shell component (hds#280).","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsSystemDocLayout","sizing":"panel"},"consumers":["src/app/layouts/DocLayout.tsx","src/index.ts"],"tokenMapping":{"TOC section gap":"semantic.space.sidebar.sectionGap","TOC label color":"semantic.color.content.secondary"},"props":{"contentSlot":{"type":"ReactNode"},"contentMaxWidth":{"type":"enum","values":["content","max","narrow"],"default":"content"}},"allowedChildren":["*"],"propConstraints":{"contentSlot":{"type":"ReactNode"},"contentMaxWidth":{"type":"enum","values":["content","max","narrow"]}},"requiredProps":["contentSlot"],"a11yRules":[{"rule":"Content sections must register with HdsTocContext to populate the on-this-page TOC","required":true}],"tier":"template","docExempt":true,"variantAxes":[],"componentProperties":[],"slots":[{"name":"root","figmaSlotName":"Root"},{"name":"nav","figmaSlotName":"Nav"},{"name":"content","figmaSlotName":"Content"},{"name":"toc","figmaSlotName":"Toc","tokenBinding":{"color":"semantic.color.content.secondary"}}],"figmaLink":null,"storyFiles":[],"storyIds":[]},"Text":{"category":"Typography","filePath":"src/app/components/text.tsx","description":"Text — polymorphic typography primitive spanning the full HDS type ramp.","hidden":false,"props":{"typography":{"type":"string","optional":true},"fill":{"type":"string","optional":true},"text":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{"typography":{"type":"string"},"fill":{"type":"string"}},"requiredProps":[],"a11yRules":[],"categorySource":"jsdoc","governedCategory":true,"figmaUrl":null,"figmaId":null,"preview":{"exportName":"Text","sizing":"panel"},"consumers":["src/app/components/alert-dialog.tsx","src/app/components/animated-label.tsx","src/app/components/card.tsx","src/app/components/data-table-section.tsx","src/app/components/date-input.tsx","src/app/components/date-time-input.tsx","src/app/components/destructive-section.tsx","src/app/components/dialog.tsx","src/app/components/error-pattern.tsx","src/app/components/foundation-swatch.tsx","src/app/components/hds-tooltip.tsx","src/app/components/inline-link.tsx","src/app/components/kbd.tsx","src/app/components/nav-item.tsx","src/app/components/table.tsx","src/app/components/text-lockup.tsx","src/app/components/tokenTableUtils.ts","src/app/components/toolbar.test.tsx","src/app/components/visually-hidden.tsx","src/app/design-system/generated-token-descriptions.ts","src/brand/overlay.ts","src/docs-tooling/preview-frame.tsx","src/stories/container.stories.tsx","src/stories/disclosure.stories.tsx","src/stories/error-boundary.stories.tsx","src/stories/grid.stories.tsx","src/stories/inline-code.stories.tsx","src/stories/input.stories.tsx","src/stories/page.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/skeleton.stories.tsx","src/stories/sketch.stories.tsx","src/stories/surface.stories.tsx","src/stories/text-lockup.stories.tsx","src/stories/text.stories.tsx","src/stories/toolbar.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":true,"sourcePath":"src/app/components/Text.tsx","figmaLink":null,"storyFiles":["src/stories/error-boundary.stories.tsx","src/stories/text.stories.tsx"],"storyIds":["feedback-error-boundary--default","feedback-error-boundary--with-min-height","primitives-text--body","primitives-text--caption","primitives-text--display","primitives-text--full-ramp","primitives-text--heading-1","primitives-text--heading-2","primitives-text--heading-3","primitives-text--technical","primitives-text--ui"],"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"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/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/command-palette.tsx","src/app/components/dialog.test.tsx","src/app/components/hover-card.tsx","src/app/components/image-lightbox.test.tsx","src/app/components/image-lightbox.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/stories/alert-dialog.stories.tsx","src/stories/alert.stories.tsx","src/stories/combobox.stories.tsx","src/stories/dialog.stories.tsx","src/stories/table.stories.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":{"open":{"type":"boolean","optional":true},"defaultOpen":{"type":"boolean","optional":true},"modal":{"type":"boolean","default":true},"children":{"type":"ReactNode"}},"tokens":{"background":"role.popover","text":"role.popover-foreground","border":"role.border","radius":"role.radius","shadow":"semantic.shadow.overlay","scrim":"role.foreground","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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27","propConstraints":{"open":{"type":"boolean"},"defaultOpen":{"type":"boolean"},"modal":{"type":"boolean"}},"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--dark-scope","primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"],"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":"HoverCard","reason":"a preview on hover or focus"},{"component":"Alert","reason":"a message that needs no reply"},{"component":"ToastProvider","reason":"a brief confirmation"}]},"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."}]},"StackedCardRail":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/stacked-card-rail.tsx","description":"StackedCardRail — horizontally-scrolling stacked card carousel. Scroll mechanism: vertical scroll on an absolutely-positioned inner container is mapped to horizontal scroll on a sticky inner strip via a single scroll event listener. Cards use CSS scroll-driven animation (animation-timeline: view(x …)) for the stack/unstack effect where the browser supports it; a plain horizontal rail is the graceful fallback. Browser compat note: - animation-timeline: view() — Chrome 115+, Firefox 110+ (behind flag until v114), Safari 18+ (TP only as of 2025). The @supports guard ensures the stacking animation is only applied when the feature is available; all other browsers get a clean scrollable row. - :has() selector (neighbour shift on hover) — Chrome 105+, FF 121+, Safari 15.4+. Gated with @supports selector(:has(+ *)).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"StackedCardRail","sizing":"panel"},"consumers":["src/app/components/stacked-card-rail.test.tsx","src/index.ts","src/stories/stacked-card-rail.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"cards":{"type":"StackedCardRailCard[]","optional":false}},"allowedChildren":[],"propConstraints":{},"requiredProps":["cards"],"a11yRules":[],"storyFiles":["src/stories/stacked-card-rail.stories.tsx"],"storyIds":["patterns-stacked-card-rail--default","patterns-stacked-card-rail--sparse","patterns-stacked-card-rail--with-links"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138","tier":"primitive","preview":{"exportName":"Button","sizing":"panel"},"consumers":["src/app/components/activity-feed.tsx","src/app/components/alert-dialog.tsx","src/app/components/animated-label.tsx","src/app/components/button-group.test.tsx","src/app/components/button-group.tsx","src/app/components/button.test.tsx","src/app/components/card.tsx","src/app/components/command-palette.tsx","src/app/components/data-table-section.tsx","src/app/components/destructive-section.tsx","src/app/components/dialog.tsx","src/app/components/error-boundary.tsx","src/app/components/error-pattern.tsx","src/app/components/form-actions.tsx","src/app/components/form.tsx","src/app/components/icon-button.tsx","src/app/components/icon.tsx","src/app/components/image-lightbox.tsx","src/app/components/inline-link.tsx","src/app/components/menu.tsx","src/app/components/multi-selector.tsx","src/app/components/pagination.tsx","src/app/components/popover.tsx","src/app/components/segmented-control.tsx","src/app/components/toast.tsx","src/app/components/toolbar.test.tsx","src/app/components/toolbar.tsx","src/app/context/DemoStateContext.tsx","src/app/design-system/generated-token-descriptions.ts","src/docs-tooling/api-reference.tsx","src/docs-tooling/doc-page-header.test.tsx","src/docs-tooling/sketch-controls.tsx","src/docs-tooling/variant-strip.tsx","src/form/index.ts","src/mui/index.ts","src/stories/alert-dialog.stories.tsx","src/stories/button-group.stories.tsx","src/stories/button.stories.tsx","src/stories/code-block.stories.tsx","src/stories/combobox.stories.tsx","src/stories/data-table-section.stories.tsx","src/stories/dialog.stories.tsx","src/stories/form-actions.stories.tsx","src/stories/form.stories.tsx","src/stories/hds-tooltip.stories.tsx","src/stories/icon-button.stories.tsx","src/stories/image-lightbox.stories.tsx","src/stories/inline-code.stories.tsx","src/stories/lib/usage-description.test.ts","src/stories/menu.stories.tsx","src/stories/nav-group.stories.tsx","src/stories/page-header.stories.tsx","src/stories/patterns-client-detail.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/popover.stories.tsx","src/stories/table.stories.tsx","src/stories/text-lockup.stories.tsx","src/stories/toast.stories.tsx","src/stories/toggle-button.stories.tsx","src/stories/toolbar.stories.tsx","src/stories/top-nav.stories.tsx"],"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":{"variant":{"type":"enum","values":["primary","secondary","tertiary"],"default":"secondary"},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"],"default":"neutral"},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"disabled":{"type":"boolean","default":false},"loading":{"type":"boolean","default":false},"label":{"type":"string","optional":true},"iconLeft":{"type":"ReactNode","optional":true},"iconRight":{"type":"ReactNode","optional":true},"iconOnly":{"type":"boolean","default":false}},"tokens":{"background":"role.primary","text":"role.primary-foreground","border":"role.input","hoverSurface":"role.accent","hoverText":"role.accent-foreground","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":{"variant":{"type":"enum","values":["primary","secondary","tertiary"]},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"]},"size":{"type":"enum","values":["sm","md","lg"]},"disabled":{"type":"boolean"},"loading":{"type":"boolean"},"label":{"type":"string"},"iconOnly":{"type":"boolean"}},"storyFiles":["src/stories/button.stories.tsx"],"storyIds":["primitives-button--all-variants-row","primitives-button--disabled","primitives-button--large","primitives-button--loading","primitives-button--medium","primitives-button--primary","primitives-button--secondary","primitives-button--small","primitives-button--tertiary"],"usage":{"when":"Trigger an action (submit, save, open a dialog) with a text label and optional icons; for an icon-only control pass iconOnly with iconLeft.","whenNot":"Navigating to another page, where a link is the correct element.","useInstead":[{"component":"InlineLink","reason":"navigation to another page"}]}},"Callout":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/callout.tsx","description":"Tone-driven side-rule callout for status, quotes, hypotheses.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85","tier":"primitive","preview":{"exportName":"Callout","sizing":"panel"},"consumers":["src/stories/callout.stories.tsx"],"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}],"storyFiles":["src/stories/callout.stories.tsx"],"storyIds":["primitives-callout--accent","primitives-callout--all-tones","primitives-callout--danger","primitives-callout--default","primitives-callout--italic","primitives-callout--success","primitives-callout--warning"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352","tier":"primitive","preview":{"exportName":"EmptyState","sizing":"panel"},"consumers":["src/app/components/data-table-section.tsx","src/docs-tooling/lab/legacy-token-detail.tsx","src/stories/data-table-section.stories.tsx","src/stories/empty-state.stories.tsx","src/stories/patterns-layout.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true},"description":{"type":"ReactNode","optional":true},"title":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/empty-state.stories.tsx"],"storyIds":["primitives-empty-state--default","primitives-empty-state--in-grid","primitives-empty-state--title-only","primitives-empty-state--with-description"],"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."},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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","src/stories/field.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/sketch.stories.tsx","src/stories/stepper-field.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string"},"mono":{"type":"boolean","default":false},"tone":{"type":"enum","values":["success","warning","danger","default"],"default":"default"},"value":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{"label":{"type":"string"},"mono":{"type":"boolean"},"tone":{"type":"enum","values":["success","warning","danger","default"]}},"requiredProps":["label"],"a11yRules":[{"rule":"Label must describe the value; pair with aria-describedby when value is non-trivial","required":false}],"storyFiles":["src/stories/field.stories.tsx"],"storyIds":["primitives-field--all-tones","primitives-field--danger","primitives-field--default","primitives-field--info","primitives-field--metadata-grid","primitives-field--mono","primitives-field--success","primitives-field--warning","primitives-field--with-children"],"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"}]}},"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/not-found-pattern.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","src/index.ts","src/stories/error-pattern.stories.tsx","src/stories/heading-stack.stories.tsx","src/stories/not-found-pattern.stories.tsx","src/stories/page.stories.tsx","src/stories/pagination.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/table.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"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":[],"storyFiles":["src/stories/page.stories.tsx","src/stories/patterns-layout.stories.tsx"],"storyIds":["layout-page--compact-padding","layout-page--content-width","layout-page--default","layout-page--no-padding","patterns-layout--dashboard-grid","patterns-layout--detail-page","patterns-layout--empty-state-screen","patterns-layout--form-screen"]},"Stat":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/stat.tsx","description":"Headline metric — large value, uppercase caption label, optional sub-line.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247","tier":"primitive","preview":{"exportName":"Stat","sizing":"panel"},"consumers":["src/app/components/metric-tiles.tsx","src/stories/metric-tiles.stories.tsx","src/stories/stat.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string"},"sub":{"type":"ReactNode","optional":true},"tone":{"type":"enum","values":["success","warning","danger","default"],"default":"default"},"value":{"type":"ReactNode"}},"allowedChildren":[],"propConstraints":{"label":{"type":"string"},"tone":{"type":"enum","values":["success","warning","danger","default"]}},"requiredProps":["label","value"],"a11yRules":[{"rule":"Provide an accessible name for the stat when value is symbolic (—, ✓, etc.)","required":false}],"storyFiles":["src/stories/stat.stories.tsx"],"storyIds":["primitives-stat--all-tones","primitives-stat--danger","primitives-stat--default","primitives-stat--success","primitives-stat--warning","primitives-stat--with-sub"],"usage":{"when":"Show one standalone headline figure with its label and an optional sub-line.","whenNot":"A figure inside a Card, or a status with a trailing badge.","useInstead":[{"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350","tier":"pattern","preview":{"exportName":"StatusListItem","sizing":"panel"},"consumers":["src/app/components/status-tile.tsx","src/stories/status-list-item.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"notes":{"type":"ReactNode[]","optional":true},"title":{"type":"ReactNode"},"tone":{"type":"enum","values":["info","success","warning","danger","neutral"],"default":"neutral"},"trailing":{"type":"ReactNode","optional":true}},"allowedChildren":[],"propConstraints":{"tone":{"type":"enum","values":["info","success","warning","danger","neutral"]}},"requiredProps":["title"],"a11yRules":[{"rule":"Status dot is decorative (aria-hidden); convey status meaning via title or trailing badge","required":true}],"storyFiles":["src/stories/status-list-item.stories.tsx"],"storyIds":["primitives-status-list-item--danger","primitives-status-list-item--default","primitives-status-list-item--info","primitives-status-list-item--success","primitives-status-list-item--warning","primitives-status-list-item--with-trailing"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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/stories/metric-tiles.stories.tsx","src/stories/status-list-item.stories.tsx","src/stories/status-tile.stories.tsx"],"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":[],"storyFiles":["src/stories/status-tile.stories.tsx"],"storyIds":["primitives-status-tile--danger","primitives-status-tile--default","primitives-status-tile--tile-grid","primitives-status-tile--warning","primitives-status-tile--with-trailing-badge"],"usage":{"when":"Show a titled status block with optional notes and a trailing badge or affordance.","whenNot":"A single headline figure, or a row inside a list.","useInstead":[{"component":"Card.Metric","reason":"a headline figure (hds#254 folds StatusTile into the Card slot)"},{"component":"StatusListItem","reason":"a status row inside a list"}]}},"TileGrid":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/tile-grid.tsx","description":"Auto-fill responsive grid for status/micro tiles. Wraps tile children in a one-line grid declaration so pages don\'t repeat the auto-fill minmax recipe.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TileGrid","sizing":"panel"},"consumers":["src/stories/status-tile.stories.tsx","src/stories/tile-grid.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"gap":{"type":"enum","values":["sm","md","xs"],"default":"sm"},"minTileWidth":{"type":"string","default":"260px"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tile-grid.stories.tsx"],"storyIds":["primitives-tile-grid--default","primitives-tile-grid--gap-md","primitives-tile-grid--gap-xs","primitives-tile-grid--narrow-tiles","primitives-tile-grid--wide-tiles"]},"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":{},"allowedChildren":[],"propConstraints":{},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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/card.tsx","src/app/components/page-header.tsx","src/app/components/tag.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/docs-tooling/lab/legacy-token-detail.tsx","src/mui/index.ts","src/stories/badge.stories.tsx","src/stories/code-block.stories.tsx","src/stories/combobox.stories.tsx","src/stories/component-instance-matrix.stories.tsx","src/stories/data-table-section.stories.tsx","src/stories/nav-group.stories.tsx","src/stories/page-header.stories.tsx","src/stories/patterns-client-detail.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/static-primitives.stories.tsx","src/stories/table.stories.tsx"],"tokenMapping":{},"storyFiles":["src/stories/badge.stories.tsx"],"storyIds":["primitives-badge--all-tones","primitives-badge--danger","primitives-badge--info","primitives-badge--neutral","primitives-badge--success","primitives-badge--warning"],"usage":{"when":"Label a status, state or count with a compact neutral or semantic chip.","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"}]}},"TextLockup":{"variantAxes":["size"],"componentProperties":[{"name":"Eyebrow","type":"TEXT","defaultValue":"EYEBROW","sourceProp":"eyebrow","boundTo":"characters","targetSelector":"Eyebrow"},{"name":"Title","type":"TEXT","defaultValue":"Title text","sourceProp":"title","boundTo":"characters","targetSelector":"Title"},{"name":"Description","type":"TEXT","defaultValue":"Description","sourceProp":"description","boundTo":"characters","targetSelector":"Description"}],"states":["default"],"filePath":"src/app/components/text-lockup.tsx","props":{},"allowedChildren":[],"propConstraints":{},"requiredProps":[],"a11yRules":[],"description":"TextLockup - governed title-and-description pairing primitive.","category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"figmaUrl":null,"figmaId":"text-lockup-pattern","figmaLink":null,"tier":"pattern","preview":{"exportName":"TextLockup","sizing":"compact"},"consumers":["src/stories/text-lockup.stories.tsx"],"tokenMapping":{},"storyFiles":["src/stories/text-lockup.stories.tsx"],"storyIds":["primitives-text-lockup--centered","primitives-text-lockup--detail","primitives-text-lockup--hero","primitives-text-lockup--numbered","primitives-text-lockup--section","primitives-text-lockup--with-eyebrow"],"aiRules":"Use TextLockup when content is a semantic title lockup with optional eyebrow and supporting text. Do NOT use TextLockup for arbitrary prose groups, data tables, or freeform mixed layouts. Do NOT restyle the internal type pairing with custom heading stacks when an existing size already fits. Do NOT use TextLockup to replace standalone body text or labels that do not form a title-description unit."},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"AssetImg","sizing":"panel"},"consumers":["src/app/components/asset-img.test.tsx","src/app/components/hds-tooltip.tsx","src/app/components/image-lightbox.tsx","src/app/components/tooltip.tsx","src/app/data/hdsEditorial.tsx","src/index.ts","src/stories/asset-img.stories.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}],"storyFiles":["src/stories/asset-img.stories.tsx"],"storyIds":["primitives-asset-img--default","primitives-asset-img--detail-context","primitives-asset-img--lightbox-context","primitives-asset-img--placeholder-fallback","primitives-asset-img--with-title"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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/stories/combobox.stories.tsx","src/stories/patterns-client-detail.stories.tsx","src/stories/tabs.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tabs.stories.tsx"],"storyIds":["primitives-tabs--controlled","primitives-tabs--default","primitives-tabs--many-tabs","primitives-tabs--with-disabled-tab"],"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"}]}},"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).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsContent","sizing":"panel"},"consumers":["src/stories/patterns-client-detail.stories.tsx","src/stories/tabs.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tabs.stories.tsx"],"storyIds":["primitives-tabs--controlled","primitives-tabs--default","primitives-tabs--many-tabs","primitives-tabs--with-disabled-tab"]},"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).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsList","sizing":"panel"},"consumers":["src/stories/patterns-client-detail.stories.tsx","src/stories/tabs.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tabs.stories.tsx"],"storyIds":["primitives-tabs--controlled","primitives-tabs--default","primitives-tabs--many-tabs","primitives-tabs--with-disabled-tab"]},"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).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TabsTrigger","sizing":"panel"},"consumers":["src/stories/patterns-client-detail.stories.tsx","src/stories/tabs.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tabs.stories.tsx"],"storyIds":["primitives-tabs--controlled","primitives-tabs--default","primitives-tabs--many-tabs","primitives-tabs--with-disabled-tab"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17","figmaId":null,"preview":{"exportName":"Radio","sizing":"panel"},"consumers":["src/app/components/checkbox.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","src/index.ts","src/stories/menu.stories.tsx","src/stories/radio.stories.tsx"],"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17","storyFiles":["src/stories/radio.stories.tsx"],"storyIds":["primitives-radio--default","primitives-radio--disabled","primitives-radio--disabled-selected","primitives-radio--group","primitives-radio--selected"],"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"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/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/date-range-input.test.tsx","src/app/components/date-range-input.tsx","src/app/components/form.tsx","src/app/components/input.tsx","src/app/components/menu.tsx","src/app/components/multi-selector.test.tsx","src/app/components/multi-selector.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","src/app/data/hdsEditorial.tsx","src/docs-tooling/lab/legacy-token-detail.tsx","src/index.ts","src/stories/checkbox.stories.tsx","src/stories/combobox.stories.tsx","src/stories/select.stories.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":{"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49","storyFiles":["src/stories/select.stories.tsx"],"storyIds":["primitives-select--default","primitives-select--no-label"],"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."}]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265","figmaId":null,"preview":{"exportName":"Slider","sizing":"panel"},"consumers":["src/index.ts","src/stories/slider.stories.tsx"],"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265","storyFiles":["src/stories/slider.stories.tsx"],"storyIds":["primitives-slider--decimal","primitives-slider--default","primitives-slider--stepped","primitives-slider--typography-controls"],"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\\")"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19","figmaId":null,"preview":{"exportName":"Toggle","sizing":"panel"},"consumers":["src/app/components/checkbox.tsx","src/app/components/radio.tsx","src/app/components/toggle-button.tsx","src/app/components/toggle.test.tsx","src/app/data/hdsEditorial.tsx","src/app/hooks/useInteractionState.test.ts","src/app/hooks/useInteractionState.ts","src/docs-tooling/shell-controls.tsx","src/index.ts","src/stories/toggle-button.stories.tsx","src/stories/toggle.stories.tsx"],"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":{"label":{"type":"string"},"checked":{"type":"boolean","default":false},"disabled":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":false,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19","storyFiles":["src/stories/toggle.stories.tsx"],"storyIds":["primitives-toggle--default","primitives-toggle--disabled","primitives-toggle--disabled-on","primitives-toggle--on","primitives-toggle--settings-group"],"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"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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","src/stories/avatar-group.stories.tsx","src/stories/avatar.stories.tsx"],"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":[],"storyFiles":["src/stories/avatar.stories.tsx"],"storyIds":["primitives-avatar--all-sizes","primitives-avatar--default","primitives-avatar--explicit-initials","primitives-avatar--large","primitives-avatar--small","primitives-avatar--with-image"],"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"}]}},"Progress":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/progress.tsx","description":"Linear progress. Determinate when `value` is a number, else indeterminate.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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.tsx","src/app/components/progress.test.tsx","src/app/components/skeleton.tsx","src/app/components/spinner.tsx","src/stories/card.stories.tsx","src/stories/circular-progress.stories.tsx","src/stories/progress.stories.tsx","src/stories/table.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string","default":"Progress"},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"value":{"type":"number","default":"null"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/progress.stories.tsx"],"storyIds":["primitives-progress--all-sizes","primitives-progress--complete","primitives-progress--default","primitives-progress--indeterminate"],"usage":{"when":"Show how far a task has got, as a bar 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"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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","src/stories/patterns-layout.stories.tsx","src/stories/patterns-scroll.stories.tsx","src/stories/skeleton.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"height":{"type":"string | number","optional":true},"variant":{"type":"enum","values":["text","rectangular","circular"],"default":"rectangular"},"width":{"type":"string | number","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/skeleton.stories.tsx"],"storyIds":["primitives-skeleton--all-variants","primitives-skeleton--card-placeholder","primitives-skeleton--circular","primitives-skeleton--default","primitives-skeleton--text"],"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"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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","src/stories/spinner.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"string","default":"Loading"},"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/spinner.stories.tsx"],"storyIds":["primitives-spinner--all-sizes","primitives-spinner--color-inheritance","primitives-spinner--custom-label","primitives-spinner--default","primitives-spinner--large","primitives-spinner--small"],"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"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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","src/stories/breadcrumb.stories.tsx","src/stories/page-header.stories.tsx","src/stories/patterns-client-detail.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"items":{"type":"BreadcrumbItem[]"},"label":{"type":"string","default":"Breadcrumb"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/breadcrumb.stories.tsx"],"storyIds":["primitives-breadcrumb--custom-label","primitives-breadcrumb--deep-trail","primitives-breadcrumb--default","primitives-breadcrumb--shallow-trail","primitives-breadcrumb--single-crumb"],"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"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194","tier":"pattern","preview":{"exportName":"Pagination","sizing":"panel"},"consumers":["src/app/components/breadcrumb.tsx","src/app/components/pagination.test.tsx","src/stories/pagination.stories.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":[],"storyFiles":["src/stories/pagination.stories.tsx"],"storyIds":["primitives-pagination--default","primitives-pagination--few-pages","primitives-pagination--last-page","primitives-pagination--middle-page","primitives-pagination--wide-siblings"],"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"}]}},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367","tier":"pattern","preview":{"exportName":"ToastProvider","sizing":"panel"},"consumers":["src/app/components/alert.tsx","src/app/components/dialog.tsx","src/app/components/toast.test.tsx","src/stories/toast.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"duration":{"type":"number","default":5000},"swipeDirection":{"type":"SwipeDirection","default":"right"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/toast.stories.tsx"],"storyIds":["primitives-toast--danger","primitives-toast--default","primitives-toast--info","primitives-toast--success","primitives-toast--warning"],"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"}]}},"Combobox":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/combobox.tsx","description":"Combobox — searchable single-select (Popover + filtered listbox). A select-with-search built on the HDS Popover. The trigger shows the current selection; opening reveals a search field that filters the option list. Full keyboard support (↑/↓ to move, Enter to choose, Esc/outside-click to close) and listbox/option ARIA. Controlled via `value` + `onChange`. <Combobox options={[{ value: \'us\', label: \'United States\' }, …]} value={country} onChange={setCountry} placeholder=\\"Select a country\\" />","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237","tier":"pattern","preview":{"exportName":"Combobox","sizing":"panel"},"consumers":["src/app/components/combobox.test.tsx","src/app/components/date-range-input.tsx","src/app/components/form.tsx","src/app/components/input.tsx","src/app/components/multi-selector.tsx","src/app/components/select.tsx","src/stories/combobox.stories.tsx","src/stories/popover.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"aria-label":{"type":"string","optional":true},"className":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"emptyMessage":{"type":"string","default":"No results"},"onChange":{"type":"(value: string) => void"},"options":{"type":"ComboboxOption[]"},"placeholder":{"type":"string","default":"Select…"},"searchPlaceholder":{"type":"string","default":"Search…"},"value":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/combobox.stories.tsx"],"storyIds":["primitives-combobox--default","primitives-combobox--disabled-trigger","primitives-combobox--few-options","primitives-combobox--pre-selected","primitives-combobox--with-disabled-option"],"usage":{"when":"Pick one value 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 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."},{"keys":"Escape","effect":"Closes the list."},{"keys":"Tab","effect":"Stays inside the open list."}]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/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/app/data/hdsEditorial.tsx","src/form/hds-form.tsx","src/form/index.ts","src/form/use-hds-form.ts","src/index.ts","src/stories/form-actions.stories.tsx","src/stories/form.stories.tsx","src/stories/patterns-layout.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/form.stories.tsx"],"storyIds":["patterns-form--controlled","patterns-form--default","patterns-form--with-description","patterns-form--with-error"]},"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/form.test.tsx","src/form/form-adapter.test.tsx","src/form/hds-form.tsx","src/stories/form.stories.tsx","src/stories/patterns-layout.stories.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":[],"storyFiles":["src/stories/form.stories.tsx"],"storyIds":["patterns-form--controlled","patterns-form--default","patterns-form--with-description","patterns-form--with-error"]},"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":[],"storyFiles":["src/stories/form.stories.tsx"],"storyIds":["patterns-form--controlled","patterns-form--default","patterns-form--with-description","patterns-form--with-error"]},"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/index.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"brand":{"type":"string","optional":true},"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":[],"storyFiles":[],"storyIds":[],"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"}]}},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"AvatarGroup","sizing":"panel"},"consumers":["src/app/components/avatar-group.test.tsx","src/stories/avatar-group.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"max":{"type":"number","optional":true},"size":{"type":"AvatarGroupSize","default":"md"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/avatar-group.stories.tsx"],"storyIds":["primitives-avatar-group--default","primitives-avatar-group--sizes","primitives-avatar-group--with-overflow"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Blockquote","sizing":"panel"},"consumers":["src/app/components/blockquote.test.tsx","src/stories/blockquote.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"attribution":{"type":"ReactNode","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/blockquote.stories.tsx"],"storyIds":["primitives-blockquote--default","primitives-blockquote--sizes","primitives-blockquote--with-attribution"]},"ButtonGroup":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/button-group.tsx","description":"Groups Button (or button-like) children into a single attached segment.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"ButtonGroup","sizing":"panel"},"consumers":["src/app/components/button-group.test.tsx","src/stories/button-group.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"orientation":{"type":"enum","values":["horizontal","vertical"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/button-group.stories.tsx"],"storyIds":["primitives-button-group--default","primitives-button-group--vertical"],"usage":{"when":"Attach related Buttons into one segmented row or column that reads as a single control.","whenNot":"Buttons that are unrelated, or choosing one of several views.","useInstead":[{"component":"SegmentedControl","reason":"choosing one of several views"},{"component":"Stack","reason":"loosely spaced buttons"}]}},"InputGroup":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/input-group.tsx","description":"A single-line input with optional `leading`/`trailing` adornments.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"InputGroup","sizing":"panel"},"consumers":["src/app/components/input-group.test.tsx","src/stories/input-group.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true},"leading":{"type":"ReactNode","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"trailing":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/input-group.stories.tsx"],"storyIds":["primitives-input-group--default","primitives-input-group--with-adornments"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Kbd","sizing":"panel"},"consumers":["src/app/components/kbd.test.tsx","src/app/components/text.tsx","src/stories/kbd.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/kbd.stories.tsx"],"storyIds":["primitives-kbd--combination","primitives-kbd--default","primitives-kbd--sizes"],"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"}]}},"StatusDot":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/status-dot.tsx","description":"A small solid dot conveying a semantic status via `tone`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"StatusDot","sizing":"panel"},"consumers":["src/app/components/status-dot.test.tsx","src/stories/status-dot.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"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":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/status-dot.stories.tsx"],"storyIds":["primitives-status-dot--default","primitives-status-dot--tones","primitives-status-dot--with-label-text"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Timestamp","sizing":"panel"},"consumers":["src/app/components/timestamp.test.tsx","src/stories/timestamp.stories.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":[],"storyFiles":["src/stories/timestamp.stories.tsx"],"storyIds":["primitives-timestamp--default","primitives-timestamp--formats"]},"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","src/stories/visually-hidden.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"span"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/visually-hidden.stories.tsx"],"storyIds":["primitives-visually-hidden--default"],"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"}]}},"CircularProgress":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/circular-progress.tsx","description":"A circular progress ring; pass `value`/`max` or set `indeterminate`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CircularProgress","sizing":"panel"},"consumers":["src/app/components/circular-progress.test.tsx","src/stories/circular-progress.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"indeterminate":{"type":"boolean","default":false},"label":{"type":"string","optional":true},"max":{"type":"number","default":100},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"value":{"type":"number","default":0}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/circular-progress.stories.tsx"],"storyIds":["primitives-circular-progress--default","primitives-circular-progress--indeterminate","primitives-circular-progress--sizes","primitives-circular-progress--tones"]},"SideNav":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/side-nav.tsx","description":"SideNav - sidebar navigation row primitive. Two levels: root — top-level section link. Full-width row using the shared nav label type style. nested — child page link. Keeps the same full-width hit area and label type treatment, with indentation handled via inner padding only. No indicator bar (reserved for HdsTocNav). Idle text = content-secondary → primary on hover/active. Accent surface fill on active state.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332","figmaId":null,"consumers":["src/app/components/side-nav.test.tsx","src/app/layouts/HdsDocsShell.tsx","src/index.ts","src/stories/side-nav.stories.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{"exportName":"SideNav","sizing":"panel"},"tier":"primitive","docExempt":false,"variantAxes":[],"componentProperties":[],"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332","storyFiles":["src/stories/side-nav.stories.tsx"],"storyIds":["navigation-side-nav--disabled","navigation-side-nav--nested-active","navigation-side-nav--root","navigation-side-nav--sidebar-group"]},"CommandPalette":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/command-palette.tsx","description":"Mountable trigger + dialog. Drop into header slot; component manages its own open state and Cmd-K / Ctrl-K global keybinding.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CommandPalette","sizing":"panel"},"consumers":["src/app/data/nav-model.test.ts","src/app/lib/hds-search.ts","src/index.ts","src/stories/command-palette.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/command-palette.stories.tsx"],"storyIds":["primitives-command-palette--default"]},"Lightbox":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/image-lightbox.tsx","description":"Lightbox — full-bleed image viewer built on Radix Dialog. Full-bleed image viewer built on Radix Dialog (raw primitives, not the card `Dialog` wrapper — a lightbox is a transparent full-screen surface, not a centered card). Radix owns the modal a11y contract the hand-rolled version was missing: focus trap, focus restore on close, Escape, and scroll-lock. Motion is retained via `forceMount` + AnimatePresence + `asChild`: the backdrop fades and the image panel scales/translates in, exactly as before.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Lightbox","sizing":"panel"},"consumers":["src/app/components/image-lightbox.test.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/app/data/hdsEditorial.tsx","src/index.ts","src/stories/asset-img.stories.tsx","src/stories/image-lightbox.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"alt":{"type":"string","optional":true},"caption":{"type":"string","optional":true},"captionHref":{"type":"string","optional":true},"captionLabel":{"type":"string","optional":true},"naturalHeight":{"type":"number","optional":true},"naturalWidth":{"type":"number","optional":true},"onClose":{"type":"() => void"},"open":{"type":"boolean"},"src":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/image-lightbox.stories.tsx"],"storyIds":["primitives-image-lightbox--default"]},"AppShell":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/app-shell.tsx","description":"Renders a header/sidebar/main application frame, e.g. `<AppShell sidebar={<Nav />}>...</AppShell>`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"template","preview":{"exportName":"AppShell","sizing":"panel"},"consumers":["src/app/components/app-shell.test.tsx","src/index.ts","src/stories/app-shell.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/app-shell.stories.tsx"],"storyIds":["patterns-app-shell--default","patterns-app-shell--no-sidebar","patterns-app-shell--wide-sidebar"]},"FileInput":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/file-input.tsx","description":"A dashed dropzone that opens the native file picker or accepts a drag-and-drop.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"FileInput","sizing":"panel"},"consumers":["src/app/components/file-input.test.tsx","src/index.ts","src/stories/file-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"accept":{"type":"string","optional":true},"disabled":{"type":"boolean","optional":true},"label":{"type":"ReactNode","default":"Click to upload or drag and drop"},"multiple":{"type":"boolean","optional":true},"onFiles":{"type":"(files: File[]) => void","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/file-input.stories.tsx"],"storyIds":["patterns-file-input--default","patterns-file-input--disabled","patterns-file-input--multiple-images"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"MetadataList","sizing":"panel"},"consumers":["src/app/components/metadata-list.test.tsx","src/stories/metadata-list.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"items":{"type":"MetadataListItem[]"},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"vertical"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/metadata-list.stories.tsx"],"storyIds":["patterns-metadata-list--default","patterns-metadata-list--divided","patterns-metadata-list--horizontal"]},"OverflowList":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/overflow-list.tsx","description":"Renders up to `max` children followed by a `+N` overflow chip (or custom node).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"OverflowList","sizing":"panel"},"consumers":["src/app/components/overflow-list.test.tsx","src/index.ts","src/stories/overflow-list.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"max":{"type":"number","optional":true},"renderOverflow":{"type":"(count: number) => ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/overflow-list.stories.tsx"],"storyIds":["patterns-overflow-list--default","patterns-overflow-list--with-overflow"]},"SelectableCard":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/selectable-card.tsx","description":"A card-shaped single checkbox — click or activate to toggle selection.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"SelectableCard","sizing":"panel"},"consumers":["src/app/components/selectable-card.test.tsx","src/stories/selectable-card.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"disabled":{"type":"boolean","optional":true},"onSelectedChange":{"type":"(selected: boolean) => void","optional":true},"selected":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/selectable-card.stories.tsx"],"storyIds":["patterns-selectable-card--default","patterns-selectable-card--disabled","patterns-selectable-card--plan-picker","patterns-selectable-card--selected"]},"Tokenizer":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/tokenizer.tsx","description":"A bordered field of Tag chips followed by a text input for adding more.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"Tokenizer","sizing":"panel"},"consumers":["src/app/components/tokenizer.test.tsx","src/stories/tokenizer.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true},"disabled":{"type":"boolean","optional":true},"onChange":{"type":"(next: string[]) => void"},"placeholder":{"type":"string","optional":true},"value":{"type":"string[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tokenizer.stories.tsx"],"storyIds":["patterns-tokenizer--default","patterns-tokenizer--disabled","patterns-tokenizer--empty"]},"TopNav":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/top-nav.tsx","description":"Top navigation bar with brand, nav, and trailing action slots.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"TopNav","sizing":"panel"},"consumers":["src/app/components/top-nav.test.tsx","src/app/layouts/HdsDocsShell.tsx","src/index.ts","src/stories/top-nav.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"brand":{"type":"ReactNode","optional":true},"children":{"type":"ReactNode","optional":true},"sticky":{"type":"boolean","optional":true},"trailing":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/top-nav.stories.tsx"],"storyIds":["patterns-top-nav--default","patterns-top-nav--sticky"]},"Carousel":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/carousel.tsx","description":"Renders children as a snap-scrolling track with Prev/Next scroll buttons.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"Carousel","sizing":"panel"},"consumers":["src/app/components/carousel.test.tsx","src/index.ts","src/stories/carousel.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"ariaLabel":{"type":"string","default":"Carousel"},"children":{"type":"ReactNode"},"showControls":{"type":"boolean","default":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/carousel.stories.tsx"],"storyIds":["patterns-carousel--default","patterns-carousel--no-controls"]},"Stepper":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/stepper.tsx","description":"Step indicator for multi-step flows. Purely presentational — no navigation.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"Stepper","sizing":"panel"},"consumers":["src/app/components/stepper.test.tsx","src/index.ts","src/stories/stepper-field.stories.tsx","src/stories/stepper.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"activeStep":{"type":"number"},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal"},"steps":{"type":"Step[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/stepper.stories.tsx"],"storyIds":["patterns-stepper--default","patterns-stepper--vertical"]},"Toolbar":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/toolbar.tsx","description":"Toolbar root. Groups related controls with a single roving tab-stop. Supports the native `orientation` prop (`horizontal` | `vertical`).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"Toolbar","sizing":"panel"},"consumers":["src/app/components/data-table-section.tsx","src/app/components/toolbar.test.tsx","src/index.ts","src/stories/toolbar.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/toolbar.stories.tsx"],"storyIds":["patterns-toolbar--default"]},"TreeList":{"category":"Navigation","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/tree-list.tsx","description":"Renders a hierarchical `role=\\"tree\\"` list; nodes with children get an expand/collapse toggle.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"TreeList","sizing":"panel"},"consumers":["src/app/components/tree-list.test.tsx","src/index.ts","src/stories/tree-list.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"defaultExpandedIds":{"type":"string[]","optional":true},"items":{"type":"TreeNode[]"},"onSelect":{"type":"(id: string) => void","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/tree-list.stories.tsx"],"storyIds":["patterns-tree-list--default","patterns-tree-list--with-default-expanded"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"AlertDialog","sizing":"panel"},"consumers":["src/app/components/alert-dialog.test.tsx","src/app/components/destructive-section.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/stories/alert-dialog.stories.tsx","src/stories/destructive-section.stories.tsx","src/styles/__tests__/scrim-and-color-scheme.test.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/alert-dialog.stories.tsx"],"storyIds":["primitives-alert-dialog--dark-scope","primitives-alert-dialog--default"]},"AspectRatio":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/aspect-ratio.tsx","description":"Locks its single child to the given width-to-height `ratio` so media reserves its box up front and never causes layout shift while it loads.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"AspectRatio","sizing":"panel"},"consumers":["src/app/components/aspect-ratio.test.tsx","src/app/components/frame.tsx","src/stories/aspect-ratio.stories.tsx","src/stories/frame.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"ratio":{"type":"number","default":1}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/aspect-ratio.stories.tsx"],"storyIds":["primitives-aspect-ratio--square","primitives-aspect-ratio--widescreen"]},"Calendar":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/calendar.tsx","description":"Renders an accessible month grid; compose it inside a Popover for the date inputs.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Calendar","sizing":"panel"},"consumers":["src/app/components/calendar.test.tsx","src/app/components/date-input.tsx","src/app/components/date-range-input.tsx","src/app/components/date-time-input.tsx","src/index.ts","src/stories/calendar.stories.tsx","src/stories/date-input.stories.tsx","src/stories/date-range-input.stories.tsx","src/stories/date-time-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/calendar.stories.tsx"],"storyIds":["primitives-calendar--range","primitives-calendar--single"]},"ContextMenu":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/context-menu.tsx","description":"ContextMenu root + parts. Wrap the right-clickable area in `ContextMenu.Trigger`. Controlled via `onOpenChange`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"ContextMenu","sizing":"panel"},"consumers":["src/app/components/context-menu.test.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/stories/context-menu.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/context-menu.stories.tsx"],"storyIds":["primitives-context-menu--default"],"slots":[{"name":"trigger","description":"The area that opens the menu on right-click (ContextMenu.Trigger).","source":"jsdoc"},{"name":"content","description":"The popup holding the items (ContextMenu.Content).","source":"jsdoc"}],"usage":{"when":"Offer actions for an item on right-click, or the equivalent keyboard gesture.","whenNot":"The only way to reach an action, or actions from a visible trigger.","useInstead":[{"component":"Menu","reason":"actions from a visible trigger"}]},"keyboard":[{"keys":"ArrowDown/ArrowUp","effect":"Moves the highlight and stops at the first and last item."},{"keys":"End","effect":"Jumps to the 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 without leaving focus inside the removed content."},{"keys":"Tab","effect":"Does not leave the open menu."}]},"DateInput":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/date-input.tsx","description":"Text field + calendar popover for picking a single date.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"DateInput","sizing":"panel"},"consumers":["src/app/components/date-input.test.tsx","src/stories/date-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"aria-label":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"displayFormat":{"type":"string","default":"yyyy-MM-dd"},"id":{"type":"string","optional":true},"onChange":{"type":"(date: Date) => void","optional":true},"placeholder":{"type":"string","optional":true},"value":{"type":"Date","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/date-input.stories.tsx"],"storyIds":["patterns-date-input--default","patterns-date-input--with-initial-value"]},"DateRangeInput":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/date-range-input.tsx","description":"DateRangeInput — date-range field composing the existing Popover with Calendar in range mode, so picking a start/end date reads as one overlay pattern with Combobox and Menu rather than a bespoke widget. No new primitive — built entirely on the HDS Popover + Calendar. The trigger reads like a secondary input, showing a placeholder or the formatted `from – to` range; the content is a two-month range calendar. <DateRangeInput value={range} onChange={setRange} />","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"DateRangeInput","sizing":"panel"},"consumers":["src/app/components/date-range-input.test.tsx","src/stories/date-range-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"aria-label":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"displayFormat":{"type":"string","default":"yyyy-MM-dd"},"id":{"type":"string","optional":true},"numberOfMonths":{"type":"number","default":2},"onChange":{"type":"(range: DateRange) => void","optional":true},"placeholder":{"type":"string","default":"Select date range"},"value":{"type":"DateRange","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/date-range-input.stories.tsx"],"storyIds":["patterns-date-range-input--default","patterns-date-range-input--disabled-trigger","patterns-date-range-input--pre-selected"]},"DateTimeInput":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/date-time-input.tsx","description":"Text date field + calendar popover, paired with a native time field, producing one Date.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"DateTimeInput","sizing":"panel"},"consumers":["src/app/components/date-time-input.test.tsx","src/stories/date-time-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"aria-label":{"type":"string","optional":true},"dateFormat":{"type":"string","default":"yyyy-MM-dd"},"disabled":{"type":"boolean","default":false},"id":{"type":"string","optional":true},"onChange":{"type":"(date: Date) => void","optional":true},"value":{"type":"Date","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/date-time-input.stories.tsx"],"storyIds":["patterns-date-time-input--default","patterns-date-time-input--with-initial-value"]},"HoverCard":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/hover-card.tsx","description":"HoverCard root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`; tune timing with `openDelay`/`closeDelay`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"HoverCard","sizing":"panel"},"consumers":["src/app/components/dialog.tsx","src/app/components/hover-card.test.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/stories/hover-card.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/hover-card.stories.tsx"],"storyIds":["primitives-hover-card--default"],"slots":[{"name":"trigger","description":"The link or element that opens the card (HoverCard.Trigger).","source":"jsdoc"},{"name":"content","description":"The preview (HoverCard.Content).","source":"jsdoc"}],"usage":{"when":"Preview extra detail about a link or mention when it is hovered or focused, without navigating.","whenNot":"Content people must reach, or a label for an interactive control.","useInstead":[{"component":"Dialog","reason":"content people must act on"},{"component":"Tooltip","reason":"a short label for a control"}]},"keyboard":[{"keys":"Focus","effect":"Opens the card when the trigger receives keyboard focus."},{"keys":"Escape","effect":"Closes the card and keeps focus on the trigger."},{"keys":"Tab","effect":"Moves on to the next element and closes the card."}]},"MultiSelector":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/multi-selector.tsx","description":"MultiSelector — multi-select dropdown composing the existing Popover with a checkbox option list, so choosing several values from a fixed set reads as one overlay pattern with Combobox and Menu rather than a bespoke widget. No new dependency — built entirely on the HDS Popover. The trigger reads like a secondary Button, showing a placeholder or a `${n} selected` count; the content is a token-skinned list where each row is a checkbox toggling membership in `value`. <MultiSelector options={[{ value: \'a\', label: \'Apple\' }, { value: \'b\', label: \'Banana\' }]} value={fruits} onChange={setFruits} />","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"MultiSelector","sizing":"panel"},"consumers":["src/app/components/multi-selector.test.tsx","src/stories/multi-selector.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true},"disabled":{"type":"boolean","default":false},"onChange":{"type":"(next: string[]) => void"},"options":{"type":"MultiSelectorOption[]"},"placeholder":{"type":"string","default":"Select…"},"value":{"type":"string[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/multi-selector.stories.tsx"],"storyIds":["patterns-multi-selector--default","patterns-multi-selector--disabled-trigger","patterns-multi-selector--pre-selected"]},"TimeInput":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/time-input.tsx","description":"A native time field skinned with HDS input chrome. Value is a `HH:mm` string.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"TimeInput","sizing":"panel"},"consumers":["src/app/components/date-time-input.tsx","src/app/components/time-input.test.tsx","src/stories/date-time-input.stories.tsx","src/stories/time-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/time-input.stories.tsx"],"storyIds":["primitives-time-input--default","primitives-time-input--sizes"]},"ToggleButton":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/toggle-button.tsx","description":"A single two-state toggle button exposing a native `aria-pressed` contract — use for one independent on/off control such as bold, mute, or pin.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"ToggleButton","sizing":"panel"},"consumers":["src/app/components/toggle-button.test.tsx","src/stories/toggle-button.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true},"variant":{"type":"enum","values":["secondary","ghost"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/toggle-button.stories.tsx"],"storyIds":["primitives-toggle-button--default","primitives-toggle-button--pressed","primitives-toggle-button--variants"]},"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) resolve numbers off the 4px HDS scale (`--primitive-space-<n>`) and named steps (\'tight\'|\'normal\'|\'inset\'|\'spacious\') off `--semantic-space-layout-*`. - `color`/`bgcolor`/`borderColor`/`fill`/`stroke` resolve dotted token keys (\'content.primary\', \'surface.raised\', \'border.subtle\', \'accent\', \'accent.hover\', \'feedback.success\', …) to the matching semantic CSS var. - Responsive `{ xs, sm, md, lg, xl }` objects compile to `min-width` media queries off the HDS breakpoint scale. - `&`-prefixed keys (\'&:hover\', \'& > *\', \'&[data-state=open]\') nest a selector, composable with responsive values. - Everything else passes through as a plain camelCase→kebab-case CSS declaration (numbers get `px` unless in the unitless allowlist). See `box-sx.ts` for the pure resolver + hashing/injection engine.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Box","sizing":"panel"},"consumers":["src/app/components/bleed.tsx","src/app/components/box-sx.ts","src/app/components/box.test.tsx","src/app/components/center.tsx","src/app/components/cluster.tsx","src/app/components/container.tsx","src/app/components/cover.tsx","src/app/components/frame.tsx","src/app/components/grid.tsx","src/app/components/sidebar.tsx","src/app/components/switcher.tsx","src/app/components/toggle.tsx","src/stories/box.stories.tsx","src/stories/patterns-layout.stories.tsx"],"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":[],"storyFiles":["src/stories/box.stories.tsx"],"storyIds":["primitives-box--ampersand-selectors","primitives-box--ampersand-with-responsive","primitives-box--polymorphic-as","primitives-box--responsive-values","primitives-box--spacing-shorthands","primitives-box--token-colors"],"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."},"Bleed":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/bleed.tsx","description":"Bleed — controlled negative-margin full-bleed within a padded container. Every Layout reference: https://every-layout.dev/layouts/the-stack/ (bleed is the inverse of a padded Center/Container — HDS names it separately since \\"every-layout\\" itself does not ship a dedicated Bleed recipe).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Bleed","sizing":"panel"},"consumers":["src/app/components/bleed.test.tsx","src/stories/bleed.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"amount":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"normal"},"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"axis":{"type":"enum","values":["x","y","both"],"default":"x"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/bleed.stories.tsx"],"storyIds":["primitives-bleed--bleed-both","primitives-bleed--bleed-x"],"aiRules":"Reach for this named layout intent before Box/sx. amount MUST use a semantic space step, never raw px, and MUST match the ancestor padding it is meant to cancel out. Do NOT use Bleed to fake extra spacing — its only job is canceling a specific known padding value on a specific axis."},"Center":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/center.tsx","description":"Center — max-width column, auto-centered horizontally. Every Layout reference: https://every-layout.dev/layouts/center/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Center","sizing":"panel"},"consumers":["src/app/components/bleed.tsx","src/app/components/center.test.tsx","src/app/components/container.tsx","src/stories/button-group.stories.tsx","src/stories/center.stories.tsx","src/stories/patterns-layout.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"gutter":{"type":"enum","values":["tight","normal","inset","spacious"],"optional":true},"maxWidth":{"type":"enum","values":["content","max"],"default":"content"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/center.stories.tsx"],"storyIds":["primitives-center--content-width","primitives-center--max-width","primitives-center--with-gutter"],"aiRules":"Reach for this named layout intent before Box/sx. maxWidth MUST use the semantic width scale (\'content\' | \'max\'), never a raw px value. gutter, when set, MUST use a semantic space step, never raw px. Do NOT use Center for full-bleed page shells — use Container. Do NOT use Center when you need the deprecated Container padding prop — gutter replaces it."},"Cluster":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/cluster.tsx","description":"Cluster — wrapping horizontal group with even gaps. Every Layout reference: https://every-layout.dev/layouts/cluster/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Cluster","sizing":"panel"},"consumers":["src/app/components/cluster.test.tsx","src/app/components/data-table-section.tsx","src/app/components/destructive-section.tsx","src/app/components/form-actions.test.tsx","src/app/components/form-actions.tsx","src/app/components/page-header.tsx","src/app/components/switcher.tsx","src/stories/cluster.stories.tsx","src/stories/patterns-layout.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"align":{"type":"enum","values":["start","center","end","stretch"],"default":"center"},"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":"tight"},"justify":{"type":"enum","values":["start","center","end","space-between"],"default":"start"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/cluster.stories.tsx"],"storyIds":["primitives-cluster--default","primitives-cluster--space-between","primitives-cluster--spacious-gap"],"aiRules":"Reach for this named layout intent before Box/sx. Use Cluster for horizontal groups that should wrap as a unit. Spacing MUST use semantic steps, never raw px. Do NOT use Cluster for a strict single-line row — use Stack with `direction=\\"row\\"` when wrapping is never desired. Do NOT use Cluster for two-dimensional grid layouts — use Grid."},"Cover":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/cover.tsx","description":"Cover — vertical shell with an auto-centered main region. Every Layout reference: https://every-layout.dev/layouts/cover/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Cover","sizing":"panel"},"consumers":["src/app/components/cover.test.tsx","src/app/components/stacked-card-rail.tsx","src/stories/cover.stories.tsx","src/stories/patterns-layout.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"centerSlot":{"type":"ReactNode","optional":true},"children":{"type":"ReactNode","optional":true},"className":{"type":"string","optional":true},"footer":{"type":"ReactNode","optional":true},"gap":{"type":"enum","values":["tight","normal","inset","spacious"],"default":"normal"},"header":{"type":"ReactNode","optional":true},"minHeight":{"type":"string","default":"100svh"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/cover.stories.tsx"],"storyIds":["primitives-cover--header-main-footer","primitives-cover--header-only","primitives-cover--main-only"],"aiRules":"Reach for this named layout intent before Box/sx. gap MUST use a semantic space step, never raw px. minHeight is a CSS length dimension (not spacing) — defaults to \'100svh\' (small viewport height, safe against mobile browser chrome). Pass minHeight=\\"100vh\\" explicitly if you need the classic viewport unit for a target that predates svh support. Do NOT use Cover for ordinary page content flow — use Stack."},"Frame":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/frame.tsx","description":"Frame — aspect-ratio-locked, token-clipped media box. Every Layout reference: https://every-layout.dev/layouts/frame/","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"Frame","sizing":"panel"},"consumers":["src/app/components/frame.test.tsx","src/app/components/mobius-distortion.ts","src/stories/frame.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"div"},"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"radius":{"type":"enum","values":["none","sm","md","full"],"default":"md"},"ratio":{"type":"number","default":"16 / 9"},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/frame.stories.tsx"],"storyIds":["primitives-frame--no-radius","primitives-frame--square","primitives-frame--widescreen"],"aiRules":"Reach for this named layout intent before Box/sx when framing media (image, video, embed, map tile). radius MUST use a semantic borderRadius token, never a raw px value. Do NOT reach for bare `AspectRatio` in product code just to add a border-radius by hand — use Frame. Do NOT use Frame for non-media layout — it exists purely as a media clipping frame."},"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/app-shell.tsx","src/app/components/sidebar.test.tsx","src/app/data/nav-model.ts","src/stories/app-shell.stories.tsx","src/stories/grid.stories.tsx","src/stories/patterns-layout.stories.tsx","src/stories/pin.stories.tsx","src/stories/side-nav.stories.tsx","src/stories/sidebar.stories.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":[],"storyFiles":["src/stories/sidebar.stories.tsx"],"storyIds":["primitives-sidebar--narrow-container-stacks","primitives-sidebar--rail-end","primitives-sidebar--rail-start"],"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/switcher.test.tsx","src/stories/switcher.stories.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":[],"storyFiles":["src/stories/switcher.stories.tsx"],"storyIds":["primitives-switcher--default","primitives-switcher--limit-forces-stacked","primitives-switcher--narrow-container-stacks"],"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 Cluster."},"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","src/stories/patterns-scroll.stories.tsx","src/stories/pin.stories.tsx","src/stories/reveal.stories.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":[],"storyFiles":["src/stories/pin.stories.tsx"],"storyIds":["primitives-pin--sidebar"],"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","src/index.ts","src/stories/patterns-scroll.stories.tsx","src/stories/reveal.stories.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":[],"storyFiles":["src/stories/patterns-scroll.stories.tsx","src/stories/reveal.stories.tsx"],"storyIds":["patterns-scroll--pinned-scale-reveal","patterns-scroll--reveal-sequence","patterns-scroll--simple-parallax","primitives-reveal--animations","primitives-reveal--scale-reveal-scene"],"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14","tier":"primitive","preview":{"exportName":"Textarea","sizing":"panel"},"consumers":["src/app/components/input.tsx","src/stories/patterns-client-detail.stories.tsx","src/stories/textarea.stories.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":[],"storyFiles":["src/stories/textarea.stories.tsx"],"storyIds":["primitives-textarea--all-states","primitives-textarea--default","primitives-textarea--disabled","primitives-textarea--error","primitives-textarea--with-helper"],"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"}]}},"CardBody":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardBody","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"CardDescription":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardDescription","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"CardFooter":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardFooter","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"CardHeader":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardHeader","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"metadata":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"CardMetric":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card.Metric — one uppercase 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":[],"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":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"],"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."}},"CardProgress":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardProgress","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"label":{"type":"ReactNode","optional":true},"max":{"type":"number","default":100},"tone":{"type":"enum","values":["neutral","danger","success","warning","info"],"default":"neutral"},"value":{"type":"number"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"CardTitle":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"primitive","preview":{"exportName":"CardTitle","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/card.stories.tsx"],"storyIds":["primitives-card--bordered","primitives-card--default","primitives-card--elevated","primitives-card--feedback-tones","primitives-card--full-anatomy","primitives-card--header-only","primitives-card--metric-slot","primitives-card--padding-variants","primitives-card--progress-slot","primitives-card--variant-accent"]},"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":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--dark-scope","primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"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":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"hideClose":{"type":"boolean","default":false}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--dark-scope","primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"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":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--dark-scope","primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"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":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--dark-scope","primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"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":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--dark-scope","primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"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":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--dark-scope","primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"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":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--dark-scope","primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"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":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--dark-scope","primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"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":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/dialog.stories.tsx"],"storyIds":["primitives-dialog--dark-scope","primitives-dialog--default","primitives-dialog--destructive","primitives-dialog--information","primitives-dialog--no-close-affordance"]},"Tooltip":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/hds-tooltip.tsx","description":"Tooltip root. Bakes in the Radix Provider so a single `<Tooltip>` is self-contained — no app-level provider required. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.","figmaUrl":null,"figmaId":null,"tier":"primitive","preview":{"exportName":"Tooltip","sizing":"panel"},"consumers":["src/app/components/asset-img.tsx","src/app/components/hover-card.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/app/data/hdsEditorial.tsx","src/index.ts","src/stories/hds-tooltip.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":null,"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/hds-tooltip.stories.tsx"],"storyIds":["primitives-hds-tooltip--default","primitives-hds-tooltip--placement"]},"Menu":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/menu.tsx","description":"Menu root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59","tier":"primitive","preview":{"exportName":"Menu","sizing":"panel"},"consumers":["src/app/components/combobox.tsx","src/app/components/command-palette.tsx","src/app/components/context-menu.tsx","src/app/components/data-table-section.tsx","src/app/components/date-range-input.tsx","src/app/components/hover-card.tsx","src/app/components/menu.test.tsx","src/app/components/multi-selector.tsx","src/app/components/select.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/docs-tooling/shell-controls.tsx","src/stories/context-menu.stories.tsx","src/stories/menu.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/menu.stories.tsx"],"storyIds":["primitives-menu--default","primitives-menu--with-checkbox-items","primitives-menu--with-radio-group","primitives-menu--with-submenu"],"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"}],"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."}]},"Popover":{"category":"Overlays","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/popover.tsx","description":"Popover root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.","figmaUrl":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32","tier":"primitive","preview":{"exportName":"Popover","sizing":"panel"},"consumers":["src/app/components/calendar.tsx","src/app/components/combobox.test.tsx","src/app/components/combobox.tsx","src/app/components/date-input.test.tsx","src/app/components/date-input.tsx","src/app/components/date-range-input.test.tsx","src/app/components/date-range-input.tsx","src/app/components/date-time-input.test.tsx","src/app/components/date-time-input.tsx","src/app/components/hover-card.tsx","src/app/components/menu.tsx","src/app/components/multi-selector.test.tsx","src/app/components/multi-selector.tsx","src/app/components/popover.test.tsx","src/app/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx","src/app/design-system/generated-token-descriptions.ts","src/stories/combobox.stories.tsx","src/stories/date-input.stories.tsx","src/stories/date-range-input.stories.tsx","src/stories/date-time-input.stories.tsx","src/stories/multi-selector.stories.tsx","src/stories/popover.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/popover.stories.tsx"],"storyIds":["primitives-popover--aligned-start","primitives-popover--default","primitives-popover--info-tip","primitives-popover--with-dismiss"]},"HdsDocsShell":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/layouts/HdsDocsShell.tsx","description":"HdsDocsShell — three-region docs shell (left nav rail, content, right TOC rail), driven by grid columns that default to 0 and are set per breakpoint. hds#280 slice: this is the SHELL MECHANICS ONLY — the smallest shippable piece of the docs-shell epic. It ships: - A 3-column grid (`leftRail | content | rightRail`), both rail columns defaulting to `0px` and set to `semantic.space.sidebar.railWidth` (hds#280 token, our own 280px — not HeroUI\'s 268px) per breakpoint via Tailwind\'s arbitrary-property + responsive-variant syntax, the same technique Fumadocs/HeroUI uses. `md768:` brings in the left rail, `xl1280:` brings in the right rail — matching the three-stage table in hds#280. - Each rail is `position: sticky` and scrolls independently of content and of the other rail, clipped to the viewport minus `topOffset`. - `topOffset` composes (it is one CSS length a caller supplies, e.g. its own sticky header\'s height token) rather than a hardcoded pixel value — the first stage of the row-cascade pattern hds#280 asks for. A second region (a tabs row, hds#280\'s PR-comment addendum) would extend this by adding its own height into the same `calc()` chain, not by hardcoding a second offset. Deliberately NOT in this slice (tracked as proposed follow-up issues, not filed — see the PR/commit this ships in): - Below the TOC breakpoint, `rightRail` is omitted from the grid rather than becoming a reachable popover. The DoD explicitly wants a popover, not \\"merely hidden\\" — that is real, separate UI work (a sticky current-section breadcrumb bar), not shell mechanics. - Left-rail collapsible groups (chevron, active-section pill) and right-rail active-anchor styling (vertical rule, filled pill) are content the caller supplies via `leftRail`/`rightRail` — this shell does not build SideNav/Disclosure/NavItem composition for the caller. - `check-rendered-geometry` verification at every breakpoint in the DoD\'s table (needs a built Storybook + a live run, not exercised here). - Named CSS `grid-template-areas` (the DoD\'s literal ask) — this ships a 3-column grid with DOM order instead, which is behaviorally identical for a single linear row of regions and needs no separate stylesheet. Areas earn their keep once a 4th region (a tabs row spanning full width) is added — call out then, not before.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"HdsDocsShell","sizing":"panel"},"consumers":["src/app/design-system/generated-token-descriptions.ts","src/app/layouts/HdsDocsShell.test.tsx","src/index.ts","src/stories/hds-docs-shell.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"className":{"type":"string","optional":true},"leftRail":{"type":"ReactNode","optional":true},"rightRail":{"type":"ReactNode","optional":true},"style":{"type":"CSSProperties","optional":true},"topOffset":{"type":"string","default":"0px"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/hds-docs-shell.stories.tsx"],"storyIds":["layout-hdsdocsshell--content-only","layout-hdsdocsshell--default","layout-hdsdocsshell--no-right-rail","layout-hdsdocsshell--with-top-offset"]},"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/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29","figmaId":null,"figmaLink":"https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29","tier":"primitive","preview":{"exportName":"Checkbox","sizing":"panel"},"consumers":["src/app/components/checkbox.test.tsx","src/app/components/radio.tsx","src/app/components/toggle.tsx","src/index.ts","src/stories/checkbox.stories.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":[],"storyFiles":["src/stories/checkbox.stories.tsx"],"storyIds":["primitives-checkbox--checked","primitives-checkbox--default","primitives-checkbox--disabled","primitives-checkbox--disabled-checked","primitives-checkbox--group","primitives-checkbox--indeterminate"],"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"}]}},"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":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"FormActions","sizing":"panel"},"consumers":["src/app/components/form-actions.test.tsx","src/stories/form-actions.stories.tsx","src/stories/patterns-client-detail.stories.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":[],"storyFiles":["src/stories/form-actions.stories.tsx"],"storyIds":["patterns-formactions--primary-only","patterns-formactions--sticky","patterns-formactions--with-destructive","patterns-formactions--with-secondary"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"MetricTile","sizing":"panel"},"consumers":["src/app/components/metric-tiles.test.tsx","src/stories/metric-tiles.stories.tsx","src/stories/patterns-client-detail.stories.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":[],"storyFiles":["src/stories/metric-tiles.stories.tsx"],"storyIds":["patterns-metrictiles--four-tiles","patterns-metrictiles--sub-line-optional","patterns-metrictiles--three-tiles","patterns-metrictiles--tones"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"MetricTiles","sizing":"panel"},"consumers":["src/app/components/metric-tiles.test.tsx","src/stories/metric-tiles.stories.tsx","src/stories/patterns-client-detail.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/metric-tiles.stories.tsx"],"storyIds":["patterns-metrictiles--four-tiles","patterns-metrictiles--sub-line-optional","patterns-metrictiles--three-tiles","patterns-metrictiles--tones"]},"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. Distinct from the docs-only page header in `src/docs-tooling`.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"PageHeader","sizing":"panel"},"consumers":["src/app/components/page-header.test.tsx","src/stories/page-header.stories.tsx","src/stories/patterns-client-detail.stories.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":[],"storyFiles":["src/stories/page-header.stories.tsx","src/stories/patterns-client-detail.stories.tsx"],"storyIds":["patterns-client-detail-screen--compact","patterns-client-detail-screen--dark","patterns-client-detail-screen--light","patterns-client-detail-screen--phone-390","patterns-pageheader--default","patterns-pageheader--long-title-wraps","patterns-pageheader--nested-level","patterns-pageheader--title-only","patterns-pageheader--with-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":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"DataTableSection","sizing":"panel"},"consumers":["src/app/components/data-table-section.test.tsx","src/stories/data-table-section.stories.tsx","src/stories/patterns-client-detail.stories.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":"2 | 3 | 4 | 5 | 6","default":2},"rows":{"type":"DataTableSectionRow[]"},"title":{"type":"ReactNode"},"toolbar":{"type":"ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/data-table-section.stories.tsx"],"storyIds":["patterns-datatablesection--dark","patterns-datatablesection--default","patterns-datatablesection--empty","patterns-datatablesection--phone-390","patterns-datatablesection--without-row-actions"]},"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":null,"figmaId":null,"figmaLink":null,"tier":"pattern","preview":{"exportName":"DestructiveSection","sizing":"panel"},"consumers":["src/app/components/destructive-section.test.tsx","src/stories/destructive-section.stories.tsx","src/stories/patterns-client-detail.stories.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":"2 | 3 | 4 | 5 | 6","default":2},"onConfirm":{"type":"() => void"},"title":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"storyFiles":["src/stories/destructive-section.stories.tsx"],"storyIds":["patterns-destructivesection--dark","patterns-destructivesection--default","patterns-destructivesection--phone","patterns-destructivesection--separate-button-label"]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]},"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":[],"storyFiles":[],"storyIds":[]}}'), b = /* @__PURE__ */ JSON.parse('{"HdsPhosphor":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized icon alias stub for JSX normalization.","hidden":true,"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{},"tokenMapping":{},"tier":"utility"},"HdsFrame":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Layout primitive — vertical or horizontal flex container on the 8px grid. Padding and gap from {0,8,16,24,32,48,64}; surfaces use semantic.color.surface.* tokens, never raw hex. Structural frames are rectilinear (no border-radius); only Card-wrapping frames pick up semantic.radius.card.","hidden":true,"props":{"layout":{"type":"enum","values":["VERTICAL","HORIZONTAL"],"default":"VERTICAL"},"layoutMode":{"type":"enum","values":["VERTICAL","HORIZONTAL"],"optional":true},"fill":{"type":"string","optional":true},"background":{"type":"string","optional":true},"stroke":{"type":"string","optional":true},"border":{"type":"string","optional":true},"padding":{"type":"string","optional":true},"paddingX":{"type":"string","optional":true},"paddingY":{"type":"string","optional":true},"gap":{"type":"string","optional":true},"itemSpacing":{"type":"string","optional":true},"radius":{"type":"string","optional":true},"width":{"type":"string","optional":true},"height":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true}},"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":true,"props":{"typography":{"type":"string","optional":true},"fill":{"type":"string","optional":true},"text":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"level":{"type":"enum","values":["1","2","3"],"optional":true}},"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":true,"props":{"typography":{"type":"string","optional":true},"fill":{"type":"string","optional":true},"text":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true},"htmlFor":{"type":"string","optional":true}},"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":true,"props":{"typography":{"type":"string","optional":true},"fill":{"type":"string","optional":true},"text":{"type":"string","optional":true},"children":{"type":"ReactNode","optional":true}},"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":true,"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":true,"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":true,"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{},"tokenMapping":{},"tier":"utility"},"HistoryCard":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/history-card.tsx","description":"HistoryCard — compact commit-history card for repo and systems-log surfaces. Padding on the 8px grid; commit hash uses semantic.typography.mono (mono); secondary metadata via semantic.color.content.tertiary (opacity, never a different hue). No shadow — depth comes from semantic.color.border.default.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HistoryCard","sizing":"panel"},"consumers":["src/stories/history-card.stories.tsx"],"tokenMapping":{},"props":{"commit":{"type":"HistoryCardCommit"},"href":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"utility","docExempt":true,"sourcePath":"src/app/components/HistoryCard.tsx","figmaLink":null},"ComponentPreview":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/component-preview.tsx","description":"ComponentPreview - framed preview harness for utility and lab specimens.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ComponentPreview","sizing":"panel"},"consumers":["src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"AnimatedLabel":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/animated-label.tsx","description":"AnimatedLabel — animated text slot for use inside interactive surfaces. Renders the shared CinematicLink text treatment (slide-up reveal + underline draw) as a composable span, not a standalone anchor. Designed to slot inside HdsButton asChild or any other interactive surface that owns the hover group. Usage: add className=\\"group\\" to the parent HdsButton (or any ancestor), then wrap the label text in <AnimatedLabel>. The group-hover classes activate on CSS :hover of the parent group element — no JS hover state needed. level. The parent surface (button, anchor, etc.) owns semantic role, focus, and pointer events. AnimatedLabel only owns the visual animation layer.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"AnimatedLabel","sizing":"compact"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"ControlsPanel":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/controls-panel.tsx","description":"shared shell composition documented alongside the HDS doc utilities.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ControlsPanel","sizing":"panel"},"consumers":["src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"ControlsSection":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/controls-panel.tsx","description":"shared shell composition documented alongside the HDS doc utilities.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ControlsSection","sizing":"panel"},"consumers":["src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"HdsMobileTopBar":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/shell-controls.tsx","description":"shell-only extraction for HDS navigation chrome, not a consumer-facing reusable HDS component.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsMobileTopBar","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"PreviewFrame":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/docs-tooling/preview-frame.tsx","description":"PreviewFrame - documentation preview shell for storefront component demos.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"PreviewFrame","sizing":"panel"},"consumers":["src/docs-tooling/demo-block.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"HdsSidebarUtilityButton":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/shell-controls.tsx","description":"shell-only extraction for HDS navigation chrome, not a consumer-facing reusable HDS component.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsSidebarUtilityButton","sizing":"compact"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"ImageLightbox":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/image-lightbox.tsx","description":"","figmaUrl":null,"figmaId":null,"consumers":["src/app/components/image-lightbox.test.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{"exportName":"ImageLightbox","sizing":"panel"},"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"SketchButton":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/sketch-controls.tsx","description":"","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SketchButton","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"SketchCheckbox":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/sketch-controls.tsx","description":"","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SketchCheckbox","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"SketchPanelToggle":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/sketch-controls.tsx","description":"","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SketchPanelToggle","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"SketchRange":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/sketch-controls.tsx","description":"","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SketchRange","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"SketchTextarea":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/docs-tooling/sketch-controls.tsx","description":"","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SketchTextarea","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"NotFoundPattern":{"category":"Feedback","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/not-found-pattern.tsx","description":"NotFoundPattern - governed not-found recovery pattern for unroutable pages.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"NotFoundPattern","sizing":"panel"},"consumers":["src/stories/error-pattern.stories.tsx","src/stories/not-found-pattern.stories.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"utility","docExempt":true,"figmaLink":null},"DocPageSpec":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/docs-tooling/DocPageSpec.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"DocPageSpec","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":null},"TokenDisplayToggle":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/docs-tooling/TokenDisplayToggle.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"TokenDisplayToggle","sizing":"panel"},"consumers":["src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":null},"HdsLegacyTokenGovernancePanel":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/docs-tooling/lab/legacy-token-detail.tsx","description":"LegacyTokenDetail - lab-facing token inspection panels used to maintain legacy token views.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsLegacyTokenGovernancePanel","sizing":"panel"},"consumers":["src/docs-tooling/health-rail.tsx"],"tokenMapping":{},"props":{"isDark":{"type":"boolean"},"onSelectToken":{"type":"(token: FlatToken) => void","optional":true},"showHeading":{"type":"boolean","default":true},"token":{"type":"FlatToken"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"utility","docExempt":false,"figmaLink":null},"LegacyTokenList":{"category":"Lab","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/docs-tooling/lab/legacy-token-list.tsx","description":"LegacyTokenList - legacy token grouping list retained for lab-side maintenance workflows.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"LegacyTokenList","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{"isDark":{"type":"boolean"},"onSelect":{"type":"(token: FlatToken) => void"},"selectedPath":{"type":"string"},"tier":{"type":"Tier"},"tokens":{"type":"FlatToken[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"utility","docExempt":false,"figmaLink":null},"TokenCollectionList":{"category":"Lab","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/docs-tooling/lab/token-collection-list.tsx","description":"TokenCollectionList - grouped token inventory list for lab and explorer maintenance.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"TokenCollectionList","sizing":"panel"},"consumers":["src/docs-tooling/lab/legacy-token-list.tsx"],"tokenMapping":{},"props":{"onSelect":{"type":"(token: FlatToken) => void"},"sections":{"type":"TokenCollectionSection[]"},"selectedPath":{"type":"string"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"variantAxes":[],"componentProperties":[],"tier":"utility","docExempt":false,"figmaLink":null},"TokenList":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/docs-tooling/lab/token-list.tsx","description":"TokenList - searchable token rail for interactive lab-side token inspection.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"TokenList","sizing":"panel"},"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":null},"ErrorBoundary":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/error-boundary.tsx","description":"ErrorBoundary — slot-scoped recovery surface for runtime render failures.","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"ErrorBoundary","sizing":"panel"},"consumers":["src/app/layouts/CaseStudyLayout.tsx","src/app/layouts/DocLayout.tsx","src/stories/error-boundary.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":null},"ApiReference":{"category":"Utilities","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/docs-tooling/api-reference.tsx","description":"ApiReference — collapsed <details> rendering of a component\'s public API. Returns `null` when: - The component is missing from the manifest (nothing to render). - The component is a template and `forceForTemplate` is not set. - The component has no props AND no slots (genuinely empty surface).","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"ApiReference","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"DocPageHeader":{"category":"Layout","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":false,"filePath":"src/docs-tooling/doc-page-header.tsx","description":"DocPageHeader — standardized header zone mounted at the top of every primitive / pattern / template doc page. Projected from the live HDS manifest; the unit `9d-9` batch refactor wires this component into the doc routes — this file only CREATES the surface. 9d-4 contract (from `docs/ai/orchestration.json`): - H1: component name - Lede: single-line summary derived from `componentSpec.description` (truncated at the first newline / sentence break for the header zone; the full description still flows into the doc body downstream). - Status badge: Stable / Beta — derived from a new optional `componentSpec.stability` field (additive, schema 9d-4). When absent, the default falls back to the unit-spec rule: primitives → \'stable\'; patterns and templates → \'beta\' when they lack `slots[]` or carry propConstraints warnings, otherwise \'stable\'. - Tier chip: primitive / pattern / template / utility (manifest field). - Source link: GitHub blob URL projected from `componentSpec.filePath` against the repo\'s origin remote (hirobius/adrian-milsap, branch `main` for canonical permalinks). - Figma link: rendered when `componentSpec.figmaUrl` is non-null. Surface rules (component-zone CLAUDE.md): - Heavy prop restriction — one slot, no business logic. - Theming via CSS variables / role tokens only (no inline hex). - Composes Stack rather than re-implementing layout primitives. Anti-goals: - Not a doc-shell — `DocShell` already owns the wordmark, search, theme-toggle, and rail nav. This component lives INSIDE the content column, not the header bar. - Does not render badges as decorative stickers next to prose; they sit in a dedicated metadata row below the H1, per CLAUDE.md.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"DocPageHeader","sizing":"panel"},"consumers":["src/docs-tooling/doc-page-header.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"ThemeToggle":{"category":"Layout","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":false,"filePath":"src/docs-tooling/theme-toggle.tsx","description":"ThemeToggle — System / Light / Dark theme dropdown for the doc shell. 9d-3 baseline: a header-slot dropdown with three options: - System — follow `prefers-color-scheme`, react live to OS changes. - Light — force light mode. - Dark — force dark mode. Persistence: - Stored in localStorage under `hds-theme-mode` (\'system\' | \'light\' | \'dark\'). - Mirrored to the legacy `hds-theme` key (\'light\' | \'dark\') so the existing ThemeContext binary toggle (if mounted) stays in sync without a hard dependency between the two. Application: - Sets `data-theme=\\"light\\"` or `data-theme=\\"dark\\"` on `<html>` so the 8e-2 `role.*` alias layer (theme-aware CSS vars) flips automatically. - Also toggles `<html>.dark` for parity with Tailwind\'s class-based dark variant (matching the convention already used in ThemeContext). Dependencies: - Zero new npm deps. Native button + click-outside listener. - SVG icons inlined (Sun / Moon / Monitor) — no icon-library dep added. Slot: - Renders into the `data-hds-slot=\\"theme-toggle\\"` zone in DocShell.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"ThemeToggle","sizing":"panel"},"consumers":["src/app/context/ThemeContext.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"VariantStrip":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/docs-tooling/variant-strip.tsx","description":"VariantStrip renders a horizontal family strip of component specimens with short labels. Designed for component docs to show all variants, sizes, or tones in a single scannable row.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"VariantStrip","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"DemoBlock":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/docs-tooling/demo-block.tsx","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"DemoBlock","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"PageFooter":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/docs-tooling/page-footer.tsx","description":"PageFooter — minimal page footer rendered by the route shell. Currently houses a binary light/dark theme toggle on the left, with the footer owning its own bottom breathing room so the toggle never pins to the viewport edge. Add elements here as the page footer grows — keeping the shape in one place so every HDSLayout-mounted page gets a consistent footer surface without per-page rendering.","figmaUrl":null,"figmaId":null,"figmaLink":null,"tier":"utility","preview":{"exportName":"PageFooter","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"ExpandTooltip":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"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/context/__tests__/portal-hydration.test.tsx","src/app/context/__tests__/portal-scope.test.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]}}'), w = /* @__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.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 Satoshi (ITF) body typeface; falls back to system-ui sans-serif stack.","value":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif"},{"path":"primitive.typography.family.display","cssVar":"--primitive-typography-family-display","type":"fontFamily","description":"Display face: Satoshi Bold (ITF), bound to display/h1/h2/h3 composites.","value":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif"},{"path":"primitive.typography.family.mono","cssVar":"--primitive-typography-family-mono","type":"fontFamily","description":"Monospace face: Geist Mono. Falls back to Courier New, monospace.","value":"\\"Geist 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.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.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.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":"WCAG 2.2 AA (2.5.8) minimum target size for a compact inline control, such as a tokenizer chip's remove button, where the 44px AAA floor (2.5.5) does not apply.","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 — wide enough for the longest top-level nav label at the default type ramp with room to spare.","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":"Travel distance for a scroll-reveal translateY offset. Coincides in value with semantic.space.scale.md today, but names a motion travel distance rather than 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.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-colored background (neutral/monochrome; inverts to a light neutral on dark surfaces).","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.color.surface.accentSubtle","cssVar":"--semantic-color-surface-accentSubtle","type":"color","description":"Faint accent tint for hover states or highlights","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.900}","resolvedValue":"#111111"}},{"path":"semantic.color.surface.hover","cssVar":"--semantic-color-surface-hover","type":"color","description":"Background for a hovered interactive surface (menu items, chips, tertiary buttons).","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.900}","resolvedValue":"#111111"}},{"path":"semantic.color.surface.pressed","cssVar":"--semantic-color-surface-pressed","type":"color","description":"Background for an actively pressed interactive surface.","alias":"{primitive.color.neutral.50}","resolvedValue":"#fafafa","dark":{"alias":"{primitive.color.neutral.950}","resolvedValue":"#0a0a0a"}},{"path":"semantic.color.surface.selected","cssVar":"--semantic-color-surface-selected","type":"color","description":"Background for a persistently selected item (active tab, checked row).","alias":"{primitive.color.neutral.200}","resolvedValue":"#e5e5e5","dark":{"alias":"{primitive.color.neutral.800}","resolvedValue":"#262626"}},{"path":"semantic.color.surface.muted","cssVar":"--semantic-color-surface-muted","type":"color","description":"Muted background for low-emphasis content blocks.","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.900}","resolvedValue":"#111111"}},{"path":"semantic.color.surface.sunken","cssVar":"--semantic-color-surface-sunken","type":"color","description":"Recessed background for inset wells (inputs, code blocks, nested panels).","alias":"{primitive.color.neutral.200}","resolvedValue":"#e5e5e5","dark":{"alias":"{primitive.color.neutral.850}","resolvedValue":"#1a1a1a"}},{"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 (monochrome). Pair with underline/weight for link affordance.","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.color.content.onAccent","cssVar":"--semantic-color-content-onAccent","type":"color","description":"Text/icon color on accent fills. Flips to a dark neutral in dark mode, where accent fills are light.","alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff","dark":{"alias":"{primitive.color.neutral.900}","resolvedValue":"#111111"}},{"path":"semantic.color.content.success","cssVar":"--semantic-color-content-success","type":"color","description":"Success-toned text/icon color, independent of feedback banners.","alias":"{primitive.color.green.700}","resolvedValue":"#047857","dark":{"alias":"{primitive.color.green.400}","resolvedValue":"#34d399"}},{"path":"semantic.color.content.warning","cssVar":"--semantic-color-content-warning","type":"color","description":"Warning-toned text/icon color, independent of feedback banners.","alias":"{primitive.color.amber.800}","resolvedValue":"#92400e","dark":{"alias":"{primitive.color.amber.400}","resolvedValue":"#fbbf24"}},{"path":"semantic.color.content.danger","cssVar":"--semantic-color-content-danger","type":"color","description":"Danger-toned text/icon color, independent of feedback banners.","alias":"{primitive.color.red.700}","resolvedValue":"#b91c1c","dark":{"alias":"{primitive.color.red.400}","resolvedValue":"#f87171"}},{"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 (neutral/monochrome; inverts on dark surfaces).","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.color.border.success","cssVar":"--semantic-color-border-success","type":"color","description":"Success-toned border for status outlines and success-state inputs.","alias":"{primitive.color.green.400}","resolvedValue":"#34d399","dark":{"alias":"{primitive.color.green.400}","resolvedValue":"#34d399"}},{"path":"semantic.color.border.warning","cssVar":"--semantic-color-border-warning","type":"color","description":"Warning-toned border for status outlines and warning-state inputs.","alias":"{primitive.color.amber.400}","resolvedValue":"#fbbf24","dark":{"alias":"{primitive.color.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.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 — same value as layout.normal (deprecated alias). Default of the overridable roles surface.padding and region.gutter, which replace the deprecated component.padding / layout.gutter.","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) default inset for cards, forms, panels, and grouped surfaces. Tenants override it with another scale step (tenants/*/tokens.json, incl. a Compact density mode). Replaces the deprecated semantic.space.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 it responsively to scale.lg (32px) and, below 640px, scale.sm (16px). Replaces the deprecated semantic.space.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 default inset for cards, forms, panels, and grouped surfaces. DEPRECATED alias (hds#206) — use semantic.space.surface.padding (tenant/density-overridable); 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 section break and whitespace separator 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 left nav rail and right TOC rail width (hds#280). Both rails share one width token; default 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":"Display headline. 60px / Satoshi bold 700 / leading-none (hds#283: was 72px/5xl).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"60px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1"}},{"path":"semantic.typography.h1","cssVar":"--semantic-typography-h1","type":"typography","description":"Primary section headings (h1). 48px / Satoshi bold 700 / leading-tight (hds#283: rung renamed 4xl→5xl, px unchanged).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"48px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"1.25"}},{"path":"semantic.typography.h2","cssVar":"--semantic-typography-h2","type":"typography","description":"Secondary section headings (h2). Satoshi bold 700, 30px, line-height 40px (hds#283: rung renamed, was 42px).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"30px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"40px"}},{"path":"semantic.typography.h3","cssVar":"--semantic-typography-h3","type":"typography","description":"Component and card headers (h3). 20px / Satoshi bold 700 500 / leading-snug (hds#283: rung renamed lg→xl, px unchanged).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"20px","fontWeight":"700","letterSpacing":"0em","lineHeight":"28px"}},{"path":"semantic.typography.body","cssVar":"--semantic-typography-body","type":"typography","description":"Body prose. Satoshi medium, 16px, line-height 24px, max 60ch measure (hds#283: was 17px/28px).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"16px","fontWeight":"500","letterSpacing":"0em","lineHeight":"24px","maxWidth":"60ch"}},{"path":"semantic.typography.ui","cssVar":"--semantic-typography-ui","type":"typography","description":"UI text for nav, labels, captions. Satoshi medium, 14px, line-height 20px (hds#283: was 15px/24px).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"14px","fontWeight":"500","letterSpacing":"0em","lineHeight":"20px","maxWidth":"60ch"}},{"path":"semantic.typography.caption","cssVar":"--semantic-typography-caption","type":"typography","description":"Caption / helper text. Satoshi medium, 12px, line-height 16px. Matches the Figma typography/caption text style; now sourced from primitive.xs (hds#283).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"12px","fontWeight":"500","letterSpacing":"0em","lineHeight":"16px"}},{"path":"semantic.typography.eyebrow","cssVar":"--semantic-typography-eyebrow","type":"typography","description":"Eyebrow / kicker label. Satoshi medium, 12px, caps tracking, uppercase (hds#283: was 13px/20px).","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"12px","fontWeight":"500","letterSpacing":"0.06em","lineHeight":"16px","textTransform":"uppercase"}},{"path":"semantic.typography.mono","cssVar":"--semantic-typography-mono","type":"typography","description":"Monospace for code, token names, shortcuts. Geist Mono regular, 14px (hds#283: repointed xs→sm; xs alone would give 12px).","composite":{"fontFamily":"\\"Geist Mono\\", \\"Courier New\\", monospace","fontSize":"14px","fontWeight":"400","letterSpacing":"0em","lineHeight":"20px","maxWidth":"60ch"}},{"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. Neutral (monochrome) accent — inverts to a light neutral on dark surfaces.","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.accent.hover","cssVar":"--semantic-accent-hover","type":"color","description":"Accent fill on pointer hover.","alias":"{primitive.color.neutral.800}","resolvedValue":"#262626","dark":{"alias":"{primitive.color.neutral.200}","resolvedValue":"#e5e5e5"}},{"path":"semantic.accent.pressed","cssVar":"--semantic-accent-pressed","type":"color","description":"Accent fill during active press.","alias":"{primitive.color.neutral.950}","resolvedValue":"#0a0a0a","dark":{"alias":"{primitive.color.neutral.300}","resolvedValue":"#d4d4d4"}},{"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":"Text and icon color on neutral surfaces with accent intent. Monochrome — pair with underline/weight for link affordance.","alias":"{primitive.color.neutral.900}","resolvedValue":"#111111","dark":{"alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5"}},{"path":"semantic.accent.contentHover","cssVar":"--semantic-accent-contentHover","type":"color","description":"Accent content color on pointer hover.","alias":"{primitive.color.neutral.700}","resolvedValue":"#404040","dark":{"alias":"{primitive.color.neutral.300}","resolvedValue":"#d4d4d4"}},{"path":"semantic.accent.subtle","cssVar":"--semantic-accent-subtle","type":"color","description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","alias":"{primitive.color.neutral.100}","resolvedValue":"#f5f5f5","dark":{"alias":"{primitive.color.neutral.800}","resolvedValue":"#262626"}},{"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 interactive control glyphs (e.g. checkbox glyph box) that are not fully round and not the standard action radius. Real design-scale value, 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 diagonal (width/height) for activity-feed and similar identity glyphs. Coincides in pixels with row.compact today; kept as a separate role per hds#242 so either can change independently.","alias":"{primitive.size.40}","resolvedValue":"40px"},{"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":"#f5f5f5"},{"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":"#111111"},{"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":"#f5f5f5"},{"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":"dimension","description":"Readable label rhythm for tags.","alias":"{primitive.typography.lineHeight.normal}","resolvedValue":"undefinedundefined"},{"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":"#ffffff"},{"path":"component.tag.activeBackground","cssVar":"--component-tag-activeBackground","type":"color","description":"Active tag fill color.","alias":"{semantic.accent.rest}","resolvedValue":"#111111"},{"path":"component.tag.activeBorder","cssVar":"--component-tag-activeBorder","type":"color","description":"Active tag border color.","alias":"{semantic.accent.rest}","resolvedValue":"#111111"},{"path":"component.tag.activeHover","cssVar":"--component-tag-activeHover","type":"color","description":"Active tag hover fill color.","alias":"{semantic.accent.hover}","resolvedValue":"#262626"},{"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":"#111111"},{"path":"component.button.bgHover","cssVar":"--component-button-bgHover","type":"color","description":"Primary button hover fill.","alias":"{semantic.accent.hover}","resolvedValue":"#262626"},{"path":"component.button.text","cssVar":"--component-button-text","type":"color","description":"Primary button text color.","alias":"{semantic.color.content.onAccent}","resolvedValue":"#ffffff"},{"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.onAccent}","resolvedValue":"#ffffff","dark":{"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.accentSubtle}","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.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":"#111111"},{"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":"#ffffff"},{"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":"#f5f5f5"},{"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":"#111111"},{"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":"#111111"},{"path":"role.radius","cssVar":"--role-radius","type":"dimension","description":"Default border radius. shadcn role: radius.","alias":"{semantic.radius.action}","resolvedValue":"8px"}]}`), k = {
   name: e,
   description: t,
   version: "1",
-  generated: i,
+  generated: s,
   source: o,
-  format: s,
+  format: i,
   docs: r,
   llmsTxt: a,
   systemSpecs: n,
-  architecture: l,
-  brand: p,
+  architecture: p,
+  brand: l,
   componentInventory: c,
   typographyRamp: d,
   patternInventory: m,
-  phases: u,
-  health: g,
-  inventory: h,
+  iconSet: u,
+  phases: g,
+  health: h,
+  inventory: y,
   agentEntrypoint: v,
-  breakingChangePolicy: y,
-  componentSpecs: f,
-  utilities: x,
-  tokens: b
-}, k = w;
+  breakingChangePolicy: f,
+  componentSpecs: x,
+  utilities: b,
+  tokens: w
+}, C = k;
 export {
-  k as default
+  C as default
 };