@hirobius/design-system 0.11.0 → 0.13.0

package/dist/manifest.js

@@ -1,28 +1,28 @@
 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 o = "2026-07-03T08:57:17.539Z", a = "hirobius.tokens.json", i = "W3C DTCG 2025.10", r = "https://adrianmilsap.com/hds", s = "https://adrianmilsap.com/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" }, c = { primaryColor: "#1E2EFD", primaryColorToken: "primitive.color.blue.500", font: "Satoshi variable 100–900, self-hosted", spacingBase: "4px", buttonBorderRadius: "0px", cardBorderRadius: "8px", neutralScale: "true monochromatic (equal RGB channels)", accentCount: 1 }, l = ["Alert", "Avatar", "Badge", "Breadcrumb", "Callout", "Card", "CinematicLink", "CodeBlock", "Combobox", "ComponentInstanceMatrix", "Container", "Dialog", "Disclosure", "Divider", "DocLinkCard", "EmptyState", "Field", "Form", "FormField", "FormFieldShell", "FoundationSwatch", "Grid", "HdsCheckbox", "HdsRadio", "HdsSlider", "HdsThemeProvider", "HdsToggle", "HeadingStack", "Icon", "IconButton", "InlineCode", "InlineLink", "NavGroup", "NavItem", "Page", "Pagination", "Progress", "SegmentedControl", "Skeleton", "Sketch", "SpecimenBlock", "Spinner", "Stack", "Stat", "StatusListItem", "StatusTile", "StepperField", "Surface", "Table", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "Tag", "Text", "TextLockup", "TileGrid", "ToastProvider", "Token"], 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 = /* @__PURE__ */ JSON.parse('{"uncategorized":[{"name":"HdsLegacyTokenGovernancePanel","filePath":"src/app/components/lab/legacy-token-detail.tsx"},{"name":"HdsSelect","filePath":"src/app/components/select.tsx"}],"namespaceViolations":[{"name":"ActivityFeed","filePath":"src/app/components/activity-feed.tsx"},{"name":"Alert","filePath":"src/app/components/alert.tsx"},{"name":"AnimatedLabel","filePath":"src/app/components/animated-label.tsx"},{"name":"ApiReference","filePath":"src/app/components/api-reference.tsx"},{"name":"AssetImg","filePath":"src/app/components/asset-img.tsx"},{"name":"AutoPreviewSpecimen","filePath":"src/app/components/componentPreviewRegistry.tsx"},{"name":"Avatar","filePath":"src/app/components/avatar.tsx"},{"name":"Badge","filePath":"src/app/components/badge.tsx"},{"name":"bezierPath","filePath":"src/app/components/doc-sections.tsx"},{"name":"BLUE_HEX","filePath":"src/app/components/doc-sections.tsx"},{"name":"BLUE_STEPS","filePath":"src/app/components/doc-sections.tsx"},{"name":"Breadcrumb","filePath":"src/app/components/breadcrumb.tsx"},{"name":"buildApiRowsFromManifest","filePath":"src/app/components/api-reference.tsx"},{"name":"buildPropTableRows","filePath":"src/app/components/propTableUtils.tsx"},{"name":"Button","filePath":"src/app/components/button.tsx"},{"name":"BUTTON_DEMO_STATES","filePath":"src/app/components/doc-sections.tsx"},{"name":"Callout","filePath":"src/app/components/callout.tsx"},{"name":"Card","filePath":"src/app/components/card.tsx"},{"name":"CascadePreview","filePath":"src/app/components/doc-sections.tsx"},{"name":"CascadeText","filePath":"src/app/components/CascadeText.tsx"},{"name":"CategoryComponentDocs","filePath":"src/app/components/CategoryComponentDocs.tsx"},{"name":"CinematicLink","filePath":"src/app/components/cinematic-link.tsx"},{"name":"CodeBlock","filePath":"src/app/components/code-block.tsx"},{"name":"Combobox","filePath":"src/app/components/combobox.tsx"},{"name":"CommandPalette","filePath":"src/app/components/command-palette.tsx"},{"name":"ComponentInstanceMatrix","filePath":"src/app/components/component-instance-matrix.tsx"},{"name":"ComponentPreview","filePath":"src/app/components/component-preview.tsx"},{"name":"Container","filePath":"src/app/components/container.tsx"},{"name":"ControlsPanel","filePath":"src/app/components/controls-panel.tsx"},{"name":"ControlsSection","filePath":"src/app/components/controls-panel.tsx"},{"name":"defaultActivityEvents","filePath":"src/app/components/activity-feed.tsx"},{"name":"DemoBlock","filePath":"src/app/components/demo-block.tsx"},{"name":"DemoButton","filePath":"src/app/components/doc-sections.tsx"},{"name":"DemoTag","filePath":"src/app/components/doc-sections.tsx"},{"name":"Dialog","filePath":"src/app/components/dialog.tsx"},{"name":"Disclosure","filePath":"src/app/components/disclosure.tsx"},{"name":"Divider","filePath":"src/app/components/divider.tsx"},{"name":"DocLabel","filePath":"src/app/components/doc-sections.tsx"},{"name":"DocLinkCard","filePath":"src/app/components/doc-link-card.tsx"},{"name":"DocPageHeader","filePath":"src/app/components/doc-page-header.tsx"},{"name":"DocPageSpec","filePath":"src/app/components/DocPageSpec.tsx"},{"name":"DocTOC","filePath":"src/app/components/doc-toc.tsx"},{"name":"DURATION_STEPS","filePath":"src/app/components/doc-sections.tsx"},{"name":"EASING_CURVES","filePath":"src/app/components/doc-sections.tsx"},{"name":"EmptyState","filePath":"src/app/components/empty-state.tsx"},{"name":"ErrorBoundary","filePath":"src/app/components/error-boundary.tsx"},{"name":"ErrorPattern","filePath":"src/app/components/error-pattern.tsx"},{"name":"FEEDBACK_COLORS","filePath":"src/app/components/doc-sections.tsx"},{"name":"Field","filePath":"src/app/components/field.tsx"},{"name":"FONT_SIZES","filePath":"src/app/components/doc-sections.tsx"},{"name":"Form","filePath":"src/app/components/form.tsx"},{"name":"FormField","filePath":"src/app/components/form.tsx"},{"name":"FormFieldShell","filePath":"src/app/components/form.tsx"},{"name":"FoundationSwatch","filePath":"src/app/components/foundation-swatch.tsx"},{"name":"getCategoryComponentNames","filePath":"src/app/components/CategoryComponentDocs.tsx"},{"name":"getPreviewVariantGroups","filePath":"src/app/components/componentPreviewRegistry.tsx"},{"name":"Grid","filePath":"src/app/components/grid.tsx"},{"name":"HeadingAnchor","filePath":"src/app/components/heading-anchor.tsx"},{"name":"HeadingStack","filePath":"src/app/components/heading-stack.tsx"},{"name":"HistoryCard","filePath":"src/app/components/history-card.tsx"},{"name":"HRule","filePath":"src/app/components/doc-sections.tsx"},{"name":"Icon","filePath":"src/app/components/icon.tsx"},{"name":"IconButton","filePath":"src/app/components/icon-button.tsx"},{"name":"ImageLightbox","filePath":"src/app/components/image-lightbox.tsx"},{"name":"InfoPage","filePath":"src/app/components/info-page.tsx"},{"name":"InlineCode","filePath":"src/app/components/inline-code.tsx"},{"name":"InlineLink","filePath":"src/app/components/inline-link.tsx"},{"name":"Input","filePath":"src/app/components/input.tsx"},{"name":"LAYOUT_NOTES","filePath":"src/app/components/doc-sections.tsx"},{"name":"LegacyTokenDetail","filePath":"src/app/components/lab/legacy-token-detail.tsx"},{"name":"LegacyTokenList","filePath":"src/app/components/lab/legacy-token-list.tsx"},{"name":"LETTER_SPACING","filePath":"src/app/components/doc-sections.tsx"},{"name":"MorphCard","filePath":"src/app/components/morph-card.tsx"},{"name":"NavGroup","filePath":"src/app/components/nav-group.tsx"},{"name":"NavItem","filePath":"src/app/components/nav-item.tsx"},{"name":"NEUTRAL_STEPS","filePath":"src/app/components/doc-sections.tsx"},{"name":"NotFoundPattern","filePath":"src/app/components/not-found-pattern.tsx"},{"name":"Page","filePath":"src/app/components/page.tsx"},{"name":"PageFooter","filePath":"src/app/components/page-footer.tsx"},{"name":"Pagination","filePath":"src/app/components/pagination.tsx"},{"name":"paginationRange","filePath":"src/app/components/pagination.tsx"},{"name":"PreviewFrame","filePath":"src/app/components/preview-frame.tsx"},{"name":"Progress","filePath":"src/app/components/progress.tsx"},{"name":"projectGithubBlobUrl","filePath":"src/app/components/doc-page-header.tsx"},{"name":"projectLede","filePath":"src/app/components/doc-page-header.tsx"},{"name":"PROP_TABLE_COLUMNS","filePath":"src/app/components/propTableUtils.tsx"},{"name":"resolveFigmaTarget","filePath":"src/app/components/doc-page-header.tsx"},{"name":"resolveStability","filePath":"src/app/components/doc-page-header.tsx"},{"name":"SegmentedControl","filePath":"src/app/components/segmented-control.tsx"},{"name":"SideNav","filePath":"src/app/components/side-nav.tsx"},{"name":"Skeleton","filePath":"src/app/components/skeleton.tsx"},{"name":"Sketch","filePath":"src/app/components/sketch.tsx"},{"name":"SketchButton","filePath":"src/app/components/sketch-controls.tsx"},{"name":"SketchCheckbox","filePath":"src/app/components/sketch-controls.tsx"},{"name":"SketchPanelToggle","filePath":"src/app/components/sketch-controls.tsx"},{"name":"SketchRange","filePath":"src/app/components/sketch-controls.tsx"},{"name":"SketchTextarea","filePath":"src/app/components/sketch-controls.tsx"},{"name":"SPACE_ENTRIES","filePath":"src/app/components/doc-sections.tsx"},{"name":"SpecimenBlock","filePath":"src/app/components/specimen-block.tsx"},{"name":"Spinner","filePath":"src/app/components/spinner.tsx"},{"name":"Stack","filePath":"src/app/components/stack.tsx"},{"name":"StackedCardRail","filePath":"src/app/components/stacked-card-rail.tsx"},{"name":"Stat","filePath":"src/app/components/stat.tsx"},{"name":"StatusListItem","filePath":"src/app/components/status-list-item.tsx"},{"name":"StatusTile","filePath":"src/app/components/status-tile.tsx"},{"name":"StepperField","filePath":"src/app/components/stepper-field.tsx"},{"name":"Surface","filePath":"src/app/components/surface.tsx"},{"name":"SURFACE_TIERS","filePath":"src/app/components/doc-sections.tsx"},{"name":"SurfaceSwatch","filePath":"src/app/components/doc-sections.tsx"},{"name":"Swatch","filePath":"src/app/components/doc-sections.tsx"},{"name":"Table","filePath":"src/app/components/table.tsx"},{"name":"Tabs","filePath":"src/app/components/tabs.tsx"},{"name":"TabsContent","filePath":"src/app/components/tabs.tsx"},{"name":"TabsList","filePath":"src/app/components/tabs.tsx"},{"name":"TabsTrigger","filePath":"src/app/components/tabs.tsx"},{"name":"Tag","filePath":"src/app/components/tag.tsx"},{"name":"TAGS","filePath":"src/app/components/doc-sections.tsx"},{"name":"Text","filePath":"src/app/components/text.tsx"},{"name":"Textarea","filePath":"src/app/components/textarea.tsx"},{"name":"TextLockup","filePath":"src/app/components/text-lockup.tsx"},{"name":"ThemeToggle","filePath":"src/app/components/theme-toggle.tsx"},{"name":"TileGrid","filePath":"src/app/components/tile-grid.tsx"},{"name":"ToastProvider","filePath":"src/app/components/toast.tsx"},{"name":"Token","filePath":"src/app/components/token.tsx"},{"name":"TOKEN_REF_GROUPS","filePath":"src/app/components/doc-sections.tsx"},{"name":"TokenCollectionList","filePath":"src/app/components/lab/token-collection-list.tsx"},{"name":"TokenDetail","filePath":"src/app/components/lab/token-detail.tsx"},{"name":"TokenDisplayToggle","filePath":"src/app/components/TokenDisplayToggle.tsx"},{"name":"TokenList","filePath":"src/app/components/lab/token-list.tsx"},{"name":"TOKENS_RAIL_MIN_W","filePath":"src/app/components/health-rail.tsx"},{"name":"TokensRail","filePath":"src/app/components/health-rail.tsx"},{"name":"Tooltip","filePath":"src/app/components/tooltip.tsx"},{"name":"TooltipDemo","filePath":"src/app/components/doc-sections.tsx"},{"name":"TYPE_PRESETS","filePath":"src/app/components/doc-sections.tsx"},{"name":"useFieldWiring","filePath":"src/app/components/form.tsx"},{"name":"useToast","filePath":"src/app/components/toast.tsx"},{"name":"VariantPreviewDeck","filePath":"src/app/components/componentPreviewRegistry.tsx"},{"name":"VariantPreviewDeck","filePath":"src/app/components/variant-preview-deck.tsx"},{"name":"VariantStrip","filePath":"src/app/components/variant-strip.tsx"}]}'), y = "CLAUDE.md", f = "Version increments on any prop rename, token path rename, or removed component. Additions are non-breaking.", v = /* @__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},"Alert":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/alert.tsx","description":"Alert - compact feedback surface with contextual severity.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Alert","sizing":"panel"},"consumers":["src/app/components/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx","src/stories/alert.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"},"props":{"variant":{"type":"enum","values":["info","success","warning","error"],"default":"info"},"title":{"type":"string","optional":true},"children":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{"variant":{"type":"enum","values":["info","success","warning","error"]},"title":{"type":"string"}},"requiredProps":["children"],"a11yRules":[{"rule":"role=alert is set by the component — do not override","required":false}],"variantAxes":["variant"],"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":"TODO:hds-master:Alert"},"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/app/components/componentPreviewRegistry.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":"TODO:hds-master:CinematicLink"},"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":null,"figmaId":null,"preview":{"exportName":"CodeBlock","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/lab/legacy-token-detail.tsx","src/app/pages/docs/patterns/_template.tsx","src/app/pages/docs/templates/_template.tsx","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":"TODO:hds-master:CodeBlock"},"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/page.tsx","src/app/data/projects.ts","src/app/layouts/CaseStudyLayout.tsx","src/app/layouts/DocLayout.tsx","src/stories/container.stories.tsx","src/stories/page.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":"TODO:hds-master:Container"},"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":null,"figmaId":null,"preview":{"exportName":"Disclosure","sizing":"panel"},"consumers":["src/app/components/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/nav-group.tsx","src/app/pages/docs/patterns/HdsDisclosure.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":"TODO:hds-master:Disclosure"},"Divider":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/divider.tsx","description":"Divider — semantic separator between content regions.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Divider","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx","src/app/data/projects.ts","src/stories/divider.stories.tsx"],"tokenMapping":{"Default stroke":"semantic.color.border.default","Strong stroke":"semantic.color.border.strong","Stroke thickness":"primitive.borderWidth.xs"},"props":{"className":{"type":"string","optional":true},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal"},"spacing":{"type":"string | number","optional":true},"strong":{"type":"boolean","default":false},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":[],"propConstraints":{"className":{"type":"string"},"orientation":{"type":"enum","values":["horizontal","vertical"]},"strong":{"type":"boolean"}},"requiredProps":[],"a11yRules":[],"variantAxes":["orientation"],"componentProperties":[],"states":["default"],"slots":[{"name":"line","figmaSlotName":"Line","tokenBinding":{"fill":"semantic.color.border.default"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Divider.tsx","figmaLink":"TODO:hds-master:Divider"},"DocLinkCard":{"category":"Navigation","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":"TODO:hds-master:DocLinkCard","consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx","src/stories/doc-link-card.stories.tsx"],"variantAxes":[],"componentProperties":[]},"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/app/pages/ErrorPage.tsx","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},"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/app/components/componentPreviewRegistry.tsx","src/app/pages/docs/patterns/HdsFoundationSwatch.tsx","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":"TODO:hds-master:FoundationSwatch"},"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/componentPreviewRegistry.tsx","src/app/components/foundation-swatch.tsx","src/app/components/image-lightbox.tsx","src/app/components/segmented-control.test.tsx","src/app/components/shell-controls.tsx","src/app/components/sketch-controls.tsx","src/app/components/stack.tsx","src/app/components/tooltip.tsx","src/app/data/projects.ts","src/app/pages/docs/patterns/HdsFoundationSwatch.tsx","src/stories/foundation-swatch.stories.tsx","src/stories/grid.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":"TODO:hds-master:Grid"},"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.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/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/disclosure.tsx","src/app/components/doc-link-card.tsx","src/app/components/doc-sections.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/lab/legacy-token-detail.tsx","src/app/components/lab/token-detail.tsx","src/app/components/lab/tokenUtils.ts","src/app/components/menu.tsx","src/app/components/select.tsx","src/app/components/shell-controls.tsx","src/app/components/text-lockup.tsx","src/app/components/theme-toggle.tsx","src/app/components/toast.tsx","src/app/components/tokenTableUtils.ts","src/app/data/hdsEditorial.tsx","src/app/pages/docs/patterns/HdsActivityFeed.tsx","src/app/pages/docs/patterns/HdsDisclosure.tsx","src/app/pages/docs/patterns/HdsIconButton.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":"TODO:hds-master:Icon"},"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":null,"figmaId":null,"preview":{"exportName":"IconButton","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/hds-tooltip.tsx","src/app/components/inline-code.tsx","src/app/components/page-footer.tsx","src/app/components/pagination.tsx","src/app/components/shell-controls.tsx","src/app/components/stepper-field.tsx","src/app/data/hdsEditorial.tsx","src/app/pages/docs/patterns/HdsIconButton.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":"TODO:hds-master:IconButton"},"InfoPage":{"category":"Branding","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/info-page.tsx","description":"InfoPage - branded profile surface used for the portfolio landing page.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"InfoPage","sizing":"full"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx","src/app/pages/docs/templates/_template.tsx","src/app/pages/InfoPageWrapper.tsx","src/stories/info-page.stories.tsx"],"tokenMapping":{"Layout gap":"semantic.space.layout.gap","Name typography":"semantic.typography.h3","Role typography":"semantic.typography.small","Bio typography":"semantic.typography.small","Caption typography":"semantic.typography.caption","Border stroke":"semantic.color.border.default"},"props":{"isDark":{"type":"boolean"}},"allowedChildren":["*"],"propConstraints":{"isDark":{"type":"boolean"}},"requiredProps":["isDark"],"a11yRules":[{"rule":"Author name renders as <h1> via Text variant=heading3 — only one InfoPage per page","required":true},{"rule":"Profile image must have a non-empty alt describing the subject","required":true}],"variantAxes":[],"componentProperties":[],"slots":[{"name":"root","figmaSlotName":"Root","tokenBinding":{"gap":"semantic.space.layout.gap"}},{"name":"portrait","figmaSlotName":"Portrait"},{"name":"name","figmaSlotName":"Name","tokenBinding":{"typography":"semantic.typography.h3","color":"semantic.color.content.primary"}},{"name":"role","figmaSlotName":"Role","tokenBinding":{"typography":"semantic.typography.small","color":"semantic.color.content.secondary"}},{"name":"bio","figmaSlotName":"Bio","tokenBinding":{"typography":"semantic.typography.small","color":"semantic.color.content.secondary"}}],"tier":"template","docExempt":false,"figmaLink":null},"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":null,"figmaId":null,"preview":{"exportName":"InlineCode","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx","src/stories/inline-code.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":"TODO:hds-master:InlineCode"},"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":null,"figmaId":null,"preview":{"exportName":"InlineLink","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/image-lightbox.tsx","src/app/components/info-page.tsx","src/app/components/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":"TODO:hds-master:InlineLink"},"Input":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/input.tsx","description":"Input — text field primitive (shadcn baseline). shadcn-baseline implementation (8s-5): cva-driven sizing/state composed against role-token Tailwind utilities (bg-background / border-input / focus-visible:ring-ring / placeholder:text-muted-foreground / etc.) wired by 8e-2 + 8s-1. Border swaps to border-destructive on error and the focus ring follows. Theme is handled entirely by CSS custom properties. The label/helper/error wrapper is deliberately retained on this primitive so existing call sites keep working unchanged. A future 8t pass may extract those slots into an HdsField pattern (see orchestration agentNote). Variants: size — sm (32px) / md (40px, default) / lg (48px) textStyle — body (default) / mono Derived state (data-state): default | focus | filled | error | disabled | loading loading swaps the trailing area for a spinner and sets aria-busy; disabled is implied. demoState (frozen, via DemoStateContext) is honored so matrix cells still freeze visually.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Input","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/stepper-field.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/app/pages/docs/patterns/_template.tsx","src/app/pages/docs/patterns/HdsField.tsx","src/app/pages/sketches/private/CombatArenaLayout.tsx","src/stories/input.stories.tsx"],"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":{"type":"Type","size":"Size","label":"Label","placeholder":"Placeholder","helperText":"Helper text","error":"Error","errorMessage":"Error message","disabled":"Disabled","loading":"Loading"},"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"},{"name":"Placeholder","type":"TEXT","defaultValue":"Placeholder","sourceProp":"placeholder","boundTo":"characters","targetSelector":"Placeholder"},{"name":"Helper text","type":"TEXT","defaultValue":"Helper text","sourceProp":"helperText","boundTo":"characters","targetSelector":"Helper"},{"name":"Error","type":"BOOLEAN","defaultValue":false,"sourceProp":"error","boundTo":"visibility","targetSelector":"Error"},{"name":"Error message","type":"TEXT","defaultValue":"Error message","sourceProp":"errorMessage","boundTo":"characters","targetSelector":"Error"}],"slots":[{"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":"TODO:hds-master:Input"},"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":null,"figmaId":null,"preview":{"exportName":"NavGroup","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","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":"TODO:hds-master:NavGroup"},"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":null,"figmaId":null,"preview":{"exportName":"NavItem","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/nav-group.tsx","src/app/components/side-nav.tsx","src/app/context/DemoStateContext.tsx","src/app/data/hds-nav-data.ts","src/app/hooks/useInteractionState.ts","src/app/pages/docs/patterns/HdsDisclosure.tsx","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":"TODO:hds-master:NavItem"},"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.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SegmentedControl","sizing":"panel"},"consumers":["src/app/components/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/segmented-control.test.tsx","src/app/components/TokenDisplayToggle.tsx","src/app/data/hdsEditorial.tsx","src/app/hooks/useInteractionState.ts","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":"TODO:hds-master:SegmentedControl"},"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/app/data/projects.ts","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":"TODO:hds-master:Sketch"},"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/CategoryComponentDocs.tsx","src/app/components/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/controls-panel.tsx","src/app/components/disclosure.tsx","src/app/components/doc-page-header.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/info-page.tsx","src/app/components/lab/token-collection-list.tsx","src/app/components/nav-group.tsx","src/app/components/page.tsx","src/app/components/shell-controls.tsx","src/app/components/sketch-controls.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/app/pages/docs/patterns/_template.tsx","src/app/pages/docs/patterns/HdsActivityFeed.tsx","src/app/pages/docs/patterns/HdsDisclosure.tsx","src/app/pages/docs/patterns/HdsFoundationSwatch.tsx","src/app/pages/docs/patterns/HdsIconButton.tsx","src/app/pages/docs/templates/_template.tsx","src/app/pages/lab/IncubatorPage.tsx","src/stories/code-block.stories.tsx","src/stories/grid.stories.tsx","src/stories/page.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":"TODO:hds-master:Stack"},"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":null,"figmaId":null,"preview":{"exportName":"StepperField","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.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":"TODO:hds-master:StepperField"},"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":null,"figmaId":null,"preview":{"exportName":"Table","sizing":"full"},"consumers":["src/app/components/api-reference.tsx","src/app/components/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/propTableUtils.tsx","src/app/data/hdsEditorial.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":"TODO:hds-master:Table"},"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) are owned by .hds-tag-btn / .hds-tag-pill in theme.css so :hover transitions work — inline styles beat :hover selectors and would silently break the effect. Active state: brand fill via [data-active=\\"true\\"] in theme.css. Hover states: inactive → subtle tint + brand border; active → brand-hover fill.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Tag","sizing":"panel"},"consumers":["src/app/components/badge.tsx","src/app/components/card.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/doc-sections.tsx","src/app/components/grid.tsx","src/app/components/heading-anchor.tsx","src/app/components/lab/token-detail.tsx","src/app/components/stack.tsx","src/app/components/surface.tsx","src/app/components/text.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","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":"TODO:hds-master:Tag"},"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.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Token","sizing":"panel"},"consumers":["src/app/components/activity-feed.tsx","src/app/components/code-block.tsx","src/app/components/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/doc-sections.tsx","src/app/components/foundation-swatch.tsx","src/app/components/health-rail.tsx","src/app/components/lab/legacy-token-detail.tsx","src/app/components/lab/legacy-token-list.tsx","src/app/components/lab/token-collection-list.tsx","src/app/components/lab/token-detail.tsx","src/app/components/TokenDisplayToggle.tsx","src/app/data/hdsEditorial.tsx","src/app/data/projects.ts","src/app/design-system/generated-token-descriptions.ts","src/app/lib/hds-search.ts","src/app/pages/docs/patterns/HdsFoundationSwatch.tsx","src/app/stores/mobiusStore.ts","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/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":"TODO:hds-master:Token"},"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":null,"figmaId":null,"preview":{"exportName":"Surface","sizing":"panel"},"consumers":["src/app/components/api-reference.tsx","src/app/components/component-preview.tsx","src/app/components/ComponentDocPage.tsx","src/app/components/controls-panel.tsx","src/app/components/dialog.tsx","src/app/components/disclosure.tsx","src/app/components/doc-page-header.tsx","src/app/components/doc-sections.tsx","src/app/components/doc-toc.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/lab/token-list.tsx","src/app/components/lab/tokenUtils.ts","src/app/components/popover.tsx","src/app/components/preview-frame.tsx","src/app/components/shell-controls.tsx","src/app/components/sketch-controls.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/tooltip.tsx","src/app/data/hdsEditorial.tsx","src/app/layouts/CaseStudyLayout.tsx","src/app/pages/docs/patterns/HdsDisclosure.tsx","src/app/pages/docs/patterns/HdsFoundationSwatch.tsx","src/app/pages/lab/IncubatorPage.tsx","src/stories/card.stories.tsx","src/stories/container.stories.tsx","src/stories/grid.stories.tsx","src/stories/page.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":"TODO:hds-master:Surface","states":["default"]},"Card":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card tone=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. Tone prop: \'default\' (neutral border) | \'accent\' (border-accent + raised bg) for highlighted variants like \\"recommended package\\", or feedback tones for status-driven cards. Tone replaces hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"figmaId":null,"consumers":["src/app/components/doc-link-card.tsx","src/app/components/empty-state.tsx","src/app/components/grid.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/data/projects.ts","src/app/design-system/generated-token-descriptions.ts","src/app/pages/docs/patterns/HdsDisclosure.tsx","src/stories/card.stories.tsx","src/stories/grid.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},"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"},"states":["default"],"allowedChildren":["*"],"propConstraints":{"padding":{"type":"enum","values":["component","item","none","px24","px16"]},"gap":{"type":"enum","values":["tight","normal","inset","spacious"]},"noPadding":{"type":"boolean"},"className":{"type":"string"},"layout":{"type":"enum","values":["VERTICAL","HORIZONTAL"]},"fill":{"type":"string"},"stroke":{"type":"string"},"radius":{"type":"string"}},"requiredProps":["children"],"a11yRules":[],"preview":{"exportName":"Card","sizing":"panel"},"variantAxes":["padding"],"componentProperties":[],"slots":[{"name":"background","figmaSlotName":"Background","tokenBinding":{"fill":"role.card","stroke":"role.border","cornerRadius":"role.radius","gap":"semantic.space.layout.tight"}},{"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":"TODO:hds-master:Card"},"HdsComponentDoc":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/ComponentDocPage.tsx","description":"HdsComponentDoc — manifest-backed component documentation shell.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsComponentDoc","sizing":"full"},"consumers":["src/app/components/CategoryComponentDocs.tsx","src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{"Tab panel duration":"motion.productive.duration","Tab panel easing":"motion.productive.easing","Component gap":"semantic.space.component.gap"},"props":{"componentName":{"type":"string"},"demo":{"type":"ReactNode","optional":true},"matrix":{"type":"ReactNode","optional":true},"props":{"type":"ComponentPropRow[]","optional":true},"description":{"type":"ReactNode","optional":true},"layout":{"type":"enum","values":["default","utility"],"default":"default"},"isDark":{"type":"boolean","optional":true},"children":{"type":"ReactNode","optional":true},"childrenPlacement":{"type":"enum","values":["beforeDetails","afterDetails"],"default":"afterDetails"}},"allowedChildren":["*"],"propConstraints":{"componentName":{"type":"string"},"layout":{"type":"enum","values":["default","utility"]},"childrenPlacement":{"type":"enum","values":["beforeDetails","afterDetails"]}},"requiredProps":["componentName"],"a11yRules":[{"rule":"componentName must match a manifest entry — drives accessible heading text","required":true},{"rule":"Tab panels are announced via segmented control aria-label","required":true}],"tier":"template","docExempt":true,"variantAxes":[],"componentProperties":[],"slots":[{"name":"root","figmaSlotName":"Root"},{"name":"header","figmaSlotName":"Header"},{"name":"specimen","figmaSlotName":"Specimen"},{"name":"tabs","figmaSlotName":"Tabs"},{"name":"panel","figmaSlotName":"Panel"}],"figmaLink":null},"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/app/components/componentPreviewRegistry.tsx","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":"TODO:hds-master:ComponentInstanceMatrix"},"SpecimenBlock":{"category":"Utilities","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/specimen-block.tsx","description":"SpecimenBlock — shared component-doc specimen block with preview, variant deck, and optional matrix.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SpecimenBlock","sizing":"panel"},"consumers":["src/app/components/api-reference.tsx","src/app/components/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"primitive","docExempt":true,"variantAxes":[],"componentProperties":[],"sourcePath":"src/app/components/SpecimenBlock.tsx","figmaLink":"TODO:hds-master:SpecimenBlock"},"ActivityFeed":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/activity-feed.tsx","description":"ActivityFeed — chronological event log using whitespace as the sole separator between items. Use for timeline views and system audit trails; reach for Table when columnar comparison matters. Enforces 48px gap (space.12) between events and semantic typography roles throughout.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ActivityFeed","sizing":"panel"},"consumers":["src/app/pages/docs/patterns/HdsActivityFeed.tsx","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":"TODO:hds-master:ActivityFeed"},"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-anchor.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":"Subtext","type":"TEXT","defaultValue":"Supporting subtext","sourceProp":"subtext","boundTo":"characters","targetSelector":"Subtext"}],"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":"TODO:hds-master:HeadingStack"},"HdsSystemDocLayout":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/pages/hds/HdsSystemDocLayout.tsx","description":"HdsSystemDocLayout — three-column doc layout with sidebar, nav, and content.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsSystemDocLayout","sizing":"panel"},"consumers":["src/app/pages/docs/patterns/_template.tsx","src/app/pages/docs/templates/_template.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},"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/animated-label.tsx","src/app/components/card.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/heading-anchor.tsx","src/app/components/info-page.tsx","src/app/components/nav-item.tsx","src/app/components/preview-frame.tsx","src/app/components/text-lockup.tsx","src/app/components/tokenTableUtils.ts","src/app/data/projects.ts","src/app/design-system/generated-token-descriptions.ts","src/app/pages/docs/patterns/_template.tsx","src/app/pages/docs/patterns/HdsDisclosure.tsx","src/app/pages/docs/patterns/HdsFoundationSwatch.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/skeleton.stories.tsx","src/stories/sketch.stories.tsx","src/stories/surface.stories.tsx","src/stories/text.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"tier":"primitive","docExempt":true,"sourcePath":"src/app/components/Text.tsx","figmaLink":"TODO:hds-master:Text"},"Dialog":{"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,"tier":"primitive","preview":{"exportName":"Dialog","sizing":"panel"},"consumers":["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/info-page.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","boundTo":"characters","targetSelector":"Title"},{"name":"Description","type":"TEXT","defaultValue":"Dialog description","sourceProp":"description","boundTo":"characters","targetSelector":"Description"},{"name":"Hide close","type":"BOOLEAN","defaultValue":false,"sourceProp":"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},"title":{"type":"string","optional":true},"description":{"type":"string","optional":true},"hideClose":{"type":"boolean","default":false},"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":"Title","description":"Description","hideClose":"Hide 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":["*"],"propConstraints":{"open":{"type":"boolean"},"defaultOpen":{"type":"boolean"},"modal":{"type":"boolean"},"title":{"type":"string"},"description":{"type":"string"},"hideClose":{"type":"boolean"}},"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":"TODO:hds-master: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":"TODO:hds-master:StackedCardRail","tier":"pattern","preview":{"exportName":"StackedCardRail","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"cards":{"type":"StackedCardRailCard[]","optional":false}},"allowedChildren":[],"propConstraints":{},"requiredProps":["cards"],"a11yRules":[]},"Button":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/button.tsx","description":"Triggers an action when activated.","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:Button","tier":"primitive","preview":{"exportName":"Button","sizing":"panel"},"consumers":["src/app/components/activity-feed.tsx","src/app/components/animated-label.tsx","src/app/components/api-reference.tsx","src/app/components/approval-card.tsx","src/app/components/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/dialog.tsx","src/app/components/doc-sections.tsx","src/app/components/error-boundary.tsx","src/app/components/error-pattern.tsx","src/app/components/icon-button.tsx","src/app/components/image-lightbox.tsx","src/app/components/sketch-controls.tsx","src/app/components/variant-strip.tsx","src/app/context/DemoStateContext.tsx","src/app/data/projects.ts","src/app/design-system/generated-token-descriptions.ts","src/app/design-system/searchIndex.ts","src/app/lab/shadcn-spike/Button.tsx","src/app/lab/shadcn-spike/page.tsx","src/app/pages/admin/ApprovalDetail.tsx","src/app/pages/docs/patterns/HdsActivityFeed.tsx","src/app/pages/docs/patterns/HdsIconButton.tsx","src/app/pages/sketches/private/MetaballsLayout.tsx","src/app/pages/sketches/private/ShapeExplorerLayout.tsx","src/app/pages/sketches/private/WaveBackgroundLayout.tsx","src/stories/button.stories.tsx","src/stories/icon-button.stories.tsx","src/stories/inline-code.stories.tsx","src/stories/table.stories.tsx","src/stories/text-lockup.stories.tsx"],"tokenMapping":{},"variantAxes":["variant","size","state"],"componentProperties":[{"name":"Label","type":"TEXT","defaultValue":"Button","sourceProp":"label","boundTo":"characters","targetSelector":"Label"},{"name":"Leading icon","type":"BOOLEAN","defaultValue":false,"sourceProp":"iconLeft","boundTo":"visibility","targetSelector":"IconLeft"},{"name":"Trailing icon","type":"BOOLEAN","defaultValue":false,"sourceProp":"iconRight","boundTo":"visibility","targetSelector":"IconRight"},{"name":"Show label","type":"BOOLEAN","defaultValue":true,"sourceProp":"iconOnly","boundTo":"visibility","targetSelector":"Label","invert":true}],"sourcePath":"src/app/components/button.tsx","sourceExport":"Button","props":{"variant":{"type":"enum","values":["primary","secondary","tertiary"],"default":"secondary"},"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","size":"Size","disabled":"Disabled","loading":"Loading","label":"Label","iconLeft":"Leading icon","iconRight":"Trailing icon","iconOnly":"Icon only"},"states":["default","hover","focus","active","disabled","loading"],"allowedChildren":[],"propConstraints":{"variant":{"type":"enum","values":["primary","secondary","tertiary"]},"size":{"type":"enum","values":["sm","md","lg"]},"disabled":{"type":"boolean"},"loading":{"type":"boolean"},"label":{"type":"string"},"iconOnly":{"type":"boolean"}},"requiredProps":[],"a11yRules":[{"rule":"Must have accessible name via label prop or aria-label","required":true},{"rule":"Focus ring visible in all interactive states (uses hds-focus class)","required":true}]},"Callout":{"category":"Feedback","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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Callout","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}]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:EmptyState","tier":"primitive","preview":{"exportName":"EmptyState","sizing":"panel"},"consumers":["src/app/components/lab/legacy-token-detail.tsx","src/app/components/lab/token-detail.tsx","src/stories/empty-state.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true},"description":{"type":"ReactNode","optional":true},"title":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Field","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/app/pages/docs/patterns/HdsField.tsx","src/form/hds-form.tsx","src/stories/field.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}]},"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":"TODO:hds-master:Page","tier":"primitive","preview":{"exportName":"Page","sizing":"panel"},"consumers":["src/app/components/doc-sections.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/data/projects.ts","src/app/design-system/generated-token-descriptions.ts","src/app/pages/ErrorPage.tsx","src/app/pages/lab/IncubatorPage.tsx","src/app/route-tree.tsx","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/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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Stat","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}]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:StatusListItem","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}]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:StatusTile","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":[]},"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":"TODO:hds-master:TileGrid","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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Badge","tier":"primitive","preview":{"exportName":"Badge","sizing":"panel"},"consumers":["src/app/components/alert.tsx","src/app/components/card.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/lab/legacy-token-detail.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","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/table.stories.tsx"],"tokenMapping":{}},"TextLockup":{"variantAxes":[],"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":"TODO:hds-master:TextLockup","tier":"pattern","preview":{"exportName":"TextLockup","sizing":"compact"},"consumers":["src/app/components/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/pages/lab/IncubatorPage.tsx","src/stories/text-lockup.stories.tsx"],"tokenMapping":{}},"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":"TODO:hds-master:AssetImg","tier":"primitive","preview":{"exportName":"AssetImg","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/image-lightbox.tsx","src/app/components/info-page.tsx","src/app/components/tooltip.tsx","src/app/data/hdsEditorial.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}]},"Tabs":{"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":"TODO:hds-master:Tabs","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":[]},"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":"TODO:hds-master:TabsContent","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":[]},"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":"TODO:hds-master:TabsList","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":[]},"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":"TODO:hds-master:TabsTrigger","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":[]},"HdsRadio":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/radio.tsx","description":"HdsRadio — radio button with animated selection indicator.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsRadio","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/controls.tsx","src/app/components/radio.test.tsx","src/app/data/hdsEditorial.tsx","src/app/hooks/useInteractionState.test.ts","src/app/hooks/useInteractionState.ts","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":"TODO:hds-master:HdsRadio"},"HdsSelect":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/select.tsx","description":"Controls — shared input/control primitives.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsSelect","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/controls.tsx","src/app/components/select.test.tsx","src/app/data/hdsEditorial.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":"TODO:hds-master:HdsSelect"},"HdsSlider":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/slider.tsx","description":"HdsSlider — range slider with label and value display.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsSlider","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/controls.tsx","src/app/data/hdsEditorial.tsx","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":"TODO:hds-master:HdsSlider"},"HdsToggle":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/toggle.tsx","description":"HdsToggle — boolean on/off toggle with animated thumb.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsToggle","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/controls.tsx","src/app/components/radio.tsx","src/app/components/toggle.test.tsx","src/app/data/hdsEditorial.tsx","src/app/hooks/useInteractionState.test.ts","src/app/hooks/useInteractionState.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":"TODO:hds-master:HdsToggle"},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Avatar","tier":"primitive","preview":{"exportName":"Avatar","sizing":"panel"},"consumers":["src/app/components/avatar.test.tsx","src/stories/avatar.stories.tsx"],"tokenMapping":{},"variantAxes":[],"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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Progress","tier":"primitive","preview":{"exportName":"Progress","sizing":"panel"},"consumers":["src/app/components/card.tsx","src/app/components/progress.test.tsx","src/app/data/projects.ts","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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Skeleton","tier":"primitive","preview":{"exportName":"Skeleton","sizing":"panel"},"consumers":["src/app/components/skeleton.test.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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Spinner","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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Breadcrumb","tier":"pattern","preview":{"exportName":"Breadcrumb","sizing":"panel"},"consumers":["src/app/components/breadcrumb.test.tsx","src/stories/breadcrumb.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"items":{"type":"BreadcrumbItem[]"},"label":{"type":"string","default":"Breadcrumb"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Pagination","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":[]},"HdsCheckbox":{"category":"Inputs","filePath":"src/app/components/checkbox.tsx","description":"HdsCheckbox — custom-drawn checkbox with check / indeterminate glyph.","hidden":false,"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{"exportName":"HdsCheckbox","sizing":"panel"},"tokenMapping":{},"tier":"primitive","categorySource":"jsdoc","governedCategory":true,"docExempt":false,"figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:HdsCheckbox","consumers":["src/app/components/checkbox.test.tsx","src/stories/checkbox.stories.tsx"],"variantAxes":[],"componentProperties":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:ToastProvider","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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Combobox","tier":"pattern","preview":{"exportName":"Combobox","sizing":"panel"},"consumers":["src/app/components/combobox.test.tsx","src/app/components/form.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":[]},"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.","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:Form","tier":"pattern","preview":{"exportName":"Form","sizing":"panel"},"consumers":["src/app/components/doc-sections.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/stories/form.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:FormField","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"],"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":[]},"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":"TODO:hds-master:FormFieldShell","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":[]},"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":"TODO:hds-master:HdsThemeProvider","tier":"primitive","preview":{"exportName":"HdsThemeProvider","sizing":"panel"},"consumers":["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":[]},"HdsPhosphor":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized icon alias stub for JSX normalization.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsFrame":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-internal frame primitive stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsHeading":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized heading primitive stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsLabel":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized label primitive stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsCaption":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized caption primitive stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsChip":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized chip instance stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsAvatar":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized avatar instance stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]}}'), 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"},"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"},"AutoPreviewSpecimen":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"docExempt":true,"filePath":"src/app/components/componentPreviewRegistry.tsx","description":"/** @internal @doc-exempt: demo-preview-helper — not part of @hirobius/design-system public API.","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:AutoPreviewSpecimen","tier":"utility","preview":{"exportName":"AutoPreviewSpecimen","sizing":"panel"},"consumers":["src/app/components/specimen-block.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"CascadePreview":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/doc-sections.tsx","description":"","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:CascadePreview","tier":"utility","preview":{"exportName":"CascadePreview","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"DemoButton":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/doc-sections.tsx","description":"","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:DemoButton","tier":"utility","preview":{"exportName":"DemoButton","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"DemoTag":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/doc-sections.tsx","description":"","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:DemoTag","tier":"utility","preview":{"exportName":"DemoTag","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"DocLabel":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/doc-sections.tsx","description":"","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:DocLabel","tier":"utility","preview":{"exportName":"DocLabel","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"TooltipDemo":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/doc-sections.tsx","description":"","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:TooltipDemo","tier":"utility","preview":{"exportName":"TooltipDemo","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"HRule":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/doc-sections.tsx","description":"","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:HRule","tier":"utility","preview":{"exportName":"HRule","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"SurfaceSwatch":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/doc-sections.tsx","description":"","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:SurfaceSwatch","tier":"utility","preview":{"exportName":"SurfaceSwatch","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"Swatch":{"category":"Internal","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/doc-sections.tsx","description":"","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:Swatch","tier":"utility","preview":{"exportName":"Swatch","sizing":"panel"},"consumers":["src/app/data/projects.ts","src/stories/stack.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"VariantPreviewDeck":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/variant-preview-deck.tsx","description":"/** @internal @doc-exempt: demo-preview-helper — not part of @hirobius/design-system public API.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"VariantPreviewDeck","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/specimen-block.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:VariantPreviewDeck"},"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/app/components/componentPreviewRegistry.tsx","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":"TODO:hds-master:HistoryCard"},"ComponentPreview":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/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/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:ComponentPreview"},"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":["src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:AnimatedLabel"},"ControlsPanel":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/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/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:ControlsPanel"},"ControlsSection":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/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/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:ControlsSection"},"HdsMobileTopBar":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/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":["src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:HdsMobileTopBar"},"PreviewFrame":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/preview-frame.tsx","description":"PreviewFrame - documentation preview shell for storefront component demos.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"PreviewFrame","sizing":"panel"},"consumers":["src/app/components/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/demo-block.tsx","src/app/components/specimen-block.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:PreviewFrame"},"HdsSidebarUtilityButton":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/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":["src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:HdsSidebarUtilityButton"},"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":"TODO:hds-master:ImageLightbox"},"SketchButton":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":"TODO:hds-master:SketchButton"},"SketchCheckbox":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":"TODO:hds-master:SketchCheckbox"},"SketchPanelToggle":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":"TODO:hds-master:SketchPanelToggle"},"SketchRange":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":"TODO:hds-master:SketchRange"},"SketchTextarea":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":"TODO:hds-master:SketchTextarea"},"MorphCard":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/morph-card.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"MorphCard","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:MorphCard"},"Tooltip":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/tooltip.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"Tooltip","sizing":"panel"},"consumers":["src/app/components/asset-img.tsx","src/app/components/doc-sections.tsx","src/app/components/hds-tooltip.tsx","src/app/data/hdsEditorial.tsx","src/stories/hds-tooltip.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:Tooltip"},"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/app/pages/NotFoundPage.tsx","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":"TODO:hds-master:NotFoundPattern"},"HdsDocPrimitives":{"category":"Doc Utilities","categorySource":"legacy-manifest","hidden":false,"description":"Use HdsDocPrimitives as the shared documentation primitive module that powers HDS reflection.","figmaUrl":null,"tokenMapping":{},"filePath":"src/app/pages/hds/HdsDocPrimitives.tsx","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{},"tier":"utility"},"SideNav":{"category":"Navigation","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/side-nav.tsx","description":"SideNav - sidebar navigation row primitive. Two levels: root — top-level section link. Full-width row using the shared nav label type style. nested — child page link. Keeps the same full-width hit area and label type treatment, with indentation handled via inner padding only. No indicator bar (reserved for HdsTocNav). Idle text = content-secondary → primary on hover/active. Accent surface fill on active state.","figmaUrl":null,"figmaId":null,"consumers":["src/stories/side-nav.stories.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{"exportName":"SideNav","sizing":"panel"},"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:SideNav"},"CascadeText":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/CascadeText.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"CascadeText","sizing":"panel"},"consumers":["src/app/components/doc-sections.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:CascadeText"},"CategoryComponentDocs":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/CategoryComponentDocs.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"CategoryComponentDocs","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:CategoryComponentDocs"},"DocPageSpec":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/DocPageSpec.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"DocPageSpec","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:DocPageSpec"},"TokenDisplayToggle":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/TokenDisplayToggle.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"TokenDisplayToggle","sizing":"panel"},"consumers":["src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:TokenDisplayToggle"},"HdsLegacyTokenGovernancePanel":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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/app/components/componentPreviewRegistry.tsx","src/app/components/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":"TODO:hds-master:HdsLegacyTokenGovernancePanel"},"LegacyTokenList":{"category":"Lab","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/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":["src/app/components/componentPreviewRegistry.tsx"],"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":"TODO:hds-master:LegacyTokenList"},"TokenCollectionList":{"category":"Lab","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/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/app/components/componentPreviewRegistry.tsx","src/app/components/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":"TODO:hds-master:TokenCollectionList"},"TokenDetail":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/lab/token-detail.tsx","description":"TokenDetail - canonical token detail inspector for the live token explorer and lab tooling.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"TokenDetail","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:TokenDetail"},"TokenList":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":["src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:TokenList"},"HdsFoundationSection":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/pages/hds/HdsDocPrimitives.tsx","description":"HdsDocPrimitives — shared doc-page building blocks. Previously embedded in HDSLayout.tsx. Extracted so page files can import from a single, focused module without pulling in the entire shell. Import pattern (from a sibling hds/ page): import { DocPageHeader, DocSection, useIsMobile } from \'./HdsDocPrimitives\'; Import pattern (from hds/components/ sub-page): import { DocPageHeader, DocSection, ComponentBlock } from \'../HdsDocPrimitives\';","figmaUrl":null,"figmaId":null,"consumers":[],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{},"tier":"utility"},"ErrorBoundary":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"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/App.tsx","src/app/layouts/CaseStudyLayout.tsx","src/app/layouts/DocLayout.tsx","src/stories/error-boundary.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:ErrorBoundary"},"ApiReference":{"category":"Utilities","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/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":"TODO:hds-master:ApiReference","tier":"utility","preview":{"exportName":"ApiReference","sizing":"panel"},"consumers":["src/app/pages/docs/patterns/_template.tsx","src/app/pages/docs/templates/_template.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"CommandPalette":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"docExempt":true,"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":"TODO:hds-master:CommandPalette","tier":"utility","preview":{"exportName":"CommandPalette","sizing":"panel"},"consumers":["src/app/lib/hds-search.ts"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"DocPageHeader":{"category":"Layout","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":false,"filePath":"src/app/components/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":"TODO:hds-master:DocPageHeader","tier":"utility","preview":{"exportName":"DocPageHeader","sizing":"panel"},"consumers":["src/app/pages/docs/patterns/_template.tsx","src/app/pages/docs/templates/_template.tsx","src/app/pages/SketchPage.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"DocTOC":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"docExempt":true,"filePath":"src/app/components/doc-toc.tsx","description":"","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:DocTOC","tier":"utility","preview":{"exportName":"DocTOC","sizing":"panel"},"consumers":["src/app/components/heading-anchor.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"HeadingAnchor":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"docExempt":true,"filePath":"src/app/components/heading-anchor.tsx","description":"","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:HeadingAnchor","tier":"utility","preview":{"exportName":"HeadingAnchor","sizing":"panel"},"consumers":["src/app/components/doc-toc.tsx","src/app/pages/docs/patterns/_template.tsx","src/app/pages/docs/templates/_template.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"ThemeToggle":{"category":"Layout","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":false,"filePath":"src/app/components/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":"TODO:hds-master:ThemeToggle","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/app/components/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":"TODO:hds-master:VariantStrip","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/app/components/demo-block.tsx","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:DemoBlock","tier":"utility","preview":{"exportName":"DemoBlock","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"PageFooter":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/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":"TODO:hds-master:PageFooter","tier":"utility","preview":{"exportName":"PageFooter","sizing":"panel"},"consumers":[],"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.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: Clash Display ITF, bound to display/h1/h2/h3 composites.","value":"\\"Clash Display\\", 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.2xs","cssVar":"--primitive-typography-size-2xs","type":"dimension","value":"10px"},{"path":"primitive.typography.size.xs","cssVar":"--primitive-typography-size-xs","type":"dimension","value":"13px"},{"path":"primitive.typography.size.sm","cssVar":"--primitive-typography-size-sm","type":"dimension","value":"15px"},{"path":"primitive.typography.size.base","cssVar":"--primitive-typography-size-base","type":"dimension","value":"17px"},{"path":"primitive.typography.size.lg","cssVar":"--primitive-typography-size-lg","type":"dimension","value":"20px"},{"path":"primitive.typography.size.xl","cssVar":"--primitive-typography-size-xl","type":"dimension","value":"24px"},{"path":"primitive.typography.size.2xl","cssVar":"--primitive-typography-size-2xl","type":"dimension","value":"30px"},{"path":"primitive.typography.size.3xl","cssVar":"--primitive-typography-size-3xl","type":"dimension","value":"36px"},{"path":"primitive.typography.size.4xl","cssVar":"--primitive-typography-size-4xl","type":"dimension","value":"48px"},{"path":"primitive.typography.size.5xl","cssVar":"--primitive-typography-size-5xl","type":"dimension","value":"80px"},{"path":"primitive.typography.size.7xl","cssVar":"--primitive-typography-size-7xl","type":"dimension","description":"Swiss-canon display size. Static desktop value; fluid in theme.css.","value":"72px"},{"path":"primitive.typography.weight.light","cssVar":"--primitive-typography-weight-light","type":"fontWeight","description":"Swiss-canon heading weight. Display and h1/h2 composites only.","value":"300"},{"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.semibold","cssVar":"--primitive-typography-weight-semibold","type":"fontWeight","value":"600"},{"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.tighter","cssVar":"--primitive-typography-letterSpacing-tighter","type":"dimension","value":"-0.02em"},{"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.wide","cssVar":"--primitive-typography-letterSpacing-wide","type":"dimension","value":"0.01em"},{"path":"primitive.typography.letterSpacing.wider","cssVar":"--primitive-typography-letterSpacing-wider","type":"dimension","value":"0.02em"},{"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.width.96","cssVar":"--primitive-size-width-96","type":"dimension","description":"96px width step.","value":"96px"},{"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.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","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD"}},{"path":"semantic.color.surface.accentSubtle","cssVar":"--semantic-color-surface-accentSubtle","type":"color","description":"Faint accent tint for hover states or highlights","alias":"{primitive.color.blue.50}","resolvedValue":"oklch(0.96 0.03 266.54)","dark":{"alias":"{primitive.color.blue.900}","resolvedValue":"oklch(0.22 0.05 266.54)"}},{"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","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.300}","resolvedValue":"oklch(0.70 0.2903 266.54)"}},{"path":"semantic.color.content.onAccent","cssVar":"--semantic-color-content-onAccent","type":"color","alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff","dark":{"alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff"}},{"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.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","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD"}},{"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.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.","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.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.space.layout.tight","cssVar":"--semantic-space-layout-tight","type":"dimension","description":"16px default HdsStack gap and inter-component spacing.","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.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.space.layout.gutter","cssVar":"--semantic-space-layout-gutter","type":"dimension","description":"24px column and region gutters (alias for layout.normal).","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.space.layout.inset","cssVar":"--semantic-space-layout-inset","type":"dimension","description":"32px major block separation and inset inter-component gaps.","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.","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.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. 72px / Clash Display 500 / leading-none.","composite":{"fontFamily":"\\"Clash Display\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"72px","fontWeight":"500","letterSpacing":"-0.01em","lineHeight":"1"}},{"path":"semantic.typography.h1","cssVar":"--semantic-typography-h1","type":"typography","description":"Primary section headings (h1). 48px / Clash Display medium 500 / leading-tight.","composite":{"fontFamily":"\\"Clash Display\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"48px","fontWeight":"500","letterSpacing":"-0.01em","lineHeight":"1.25"}},{"path":"semantic.typography.h2","cssVar":"--semantic-typography-h2","type":"typography","description":"Secondary section headings (h2). Clash Display medium, 30px, line-height 42px.","composite":{"fontFamily":"\\"Clash Display\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"30px","fontWeight":"500","letterSpacing":"-0.01em","lineHeight":"42px"}},{"path":"semantic.typography.h3","cssVar":"--semantic-typography-h3","type":"typography","description":"Component and card headers (h3). 20px / Clash Display medium 500 / leading-snug.","composite":{"fontFamily":"\\"Clash Display\\", system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"20px","fontWeight":"500","letterSpacing":"0em","lineHeight":"28px"}},{"path":"semantic.typography.body","cssVar":"--semantic-typography-body","type":"typography","description":"Body prose. Satoshi medium, 17px, line-height 28px, max 60ch measure.","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"17px","fontWeight":"500","letterSpacing":"0em","lineHeight":"28px","maxWidth":"60ch"}},{"path":"semantic.typography.ui","cssVar":"--semantic-typography-ui","type":"typography","description":"UI text for nav, labels, captions. Satoshi medium, 15px, line-height 24px.","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"15px","fontWeight":"500","letterSpacing":"0em","lineHeight":"24px","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.","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, 13px, caps tracking, uppercase.","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"13px","fontWeight":"500","letterSpacing":"0.06em","lineHeight":"20px","textTransform":"uppercase"}},{"path":"semantic.typography.mono","cssVar":"--semantic-typography-mono","type":"typography","description":"Monospace for code, token names, shortcuts. Geist Mono regular, 13px.","composite":{"fontFamily":"\\"Geist Mono\\", \\"Courier New\\", monospace","fontSize":"13px","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.","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD"}},{"path":"semantic.accent.hover","cssVar":"--semantic-accent-hover","type":"color","description":"Accent fill on pointer hover.","alias":"{primitive.color.blue.600}","resolvedValue":"oklch(0.45 0.2903 266.54)","dark":{"alias":"{primitive.color.blue.450}","resolvedValue":"oklch(0.56 0.29 266.60)"}},{"path":"semantic.accent.pressed","cssVar":"--semantic-accent-pressed","type":"color","description":"Accent fill during active press.","alias":"{primitive.color.blue.700}","resolvedValue":"oklch(0.44 0.2903 266.54)","dark":{"alias":"{primitive.color.blue.400}","resolvedValue":"oklch(0.65 0.2903 266.54)"}},{"path":"semantic.accent.inactive","cssVar":"--semantic-accent-inactive","type":"color","description":"Accent fill for inactive or unselected accent elements.","alias":"{primitive.color.blue.200}","resolvedValue":"oklch(0.88 0.07 266.54)","dark":{"alias":"{primitive.color.blue.200}","resolvedValue":"oklch(0.88 0.07 266.54)"}},{"path":"semantic.accent.disabled","cssVar":"--semantic-accent-disabled","type":"color","description":"Accent fill for disabled accent elements.","alias":"{primitive.color.blue.100}","resolvedValue":"oklch(0.92 0.04 266.54)","dark":{"alias":"{primitive.color.blue.100}","resolvedValue":"oklch(0.92 0.04 266.54)"}},{"path":"semantic.accent.content","cssVar":"--semantic-accent-content","type":"color","description":"Text and icon color on neutral surfaces with accent intent.","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.300}","resolvedValue":"oklch(0.70 0.2903 266.54)"}},{"path":"semantic.accent.contentHover","cssVar":"--semantic-accent-contentHover","type":"color","description":"Accent content color on pointer hover.","alias":"{primitive.color.blue.600}","resolvedValue":"oklch(0.45 0.2903 266.54)","dark":{"alias":"{primitive.color.blue.200}","resolvedValue":"oklch(0.88 0.07 266.54)"}},{"path":"semantic.accent.subtle","cssVar":"--semantic-accent-subtle","type":"color","description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","alias":"{primitive.color.blue.50}","resolvedValue":"oklch(0.96 0.03 266.54)","dark":{"alias":"{primitive.color.blue.900}","resolvedValue":"oklch(0.22 0.05 266.54)"}},{"path":"semantic.radius.action","cssVar":"--semantic-radius-action","type":"dimension","description":"Corner radius for interactive action elements like buttons and inputs.","alias":"{primitive.radius.12}","resolvedValue":"12px"},{"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}}],"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":"oklch(0.96 0.03 266.54)"},{"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":"#1E2EFD"},{"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":"oklch(0.96 0.03 266.54)"},{"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":"13px"},{"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":"#1E2EFD"},{"path":"component.tag.activeBorder","cssVar":"--component-tag-activeBorder","type":"color","description":"Active tag border color.","alias":"{semantic.accent.rest}","resolvedValue":"#1E2EFD"},{"path":"component.tag.activeHover","cssVar":"--component-tag-activeHover","type":"color","description":"Active tag hover fill color.","alias":"{semantic.accent.hover}","resolvedValue":"oklch(0.45 0.2903 266.54)"},{"path":"component.badge.fontSize","cssVar":"--component-badge-fontSize","type":"dimension","description":"Badge type size.","alias":"{primitive.typography.size.xs}","resolvedValue":"13px"},{"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":"#1E2EFD"},{"path":"component.button.bgHover","cssVar":"--component-button-bgHover","type":"color","description":"Primary button hover fill.","alias":"{semantic.accent.hover}","resolvedValue":"oklch(0.45 0.2903 266.54)"},{"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":"12px"},{"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 (13px).","alias":"{primitive.typography.size.xs}","resolvedValue":"13px"},{"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 (15px).","alias":"{primitive.typography.size.sm}","resolvedValue":"15px"},{"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 (17px).","alias":"{primitive.typography.size.base}","resolvedValue":"17px"},{"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":"oklch(0.96 0.03 266.54)"},{"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.default}","resolvedValue":"#e5e5e5"},{"path":"component.button.secondary.border.hover","cssVar":"--component-button-secondary-border-hover","type":"color","description":"Secondary button hover border.","alias":"{semantic.color.border.default}","resolvedValue":"#e5e5e5"},{"path":"component.button.secondary.border.pressed","cssVar":"--component-button-secondary-border-pressed","type":"color","description":"Secondary button pressed border.","alias":"{semantic.color.border.default}","resolvedValue":"#e5e5e5"},{"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.default}","resolvedValue":"#e5e5e5"},{"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":"12px"},{"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":"#1E2EFD"},{"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":"oklch(0.96 0.03 266.54)"},{"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":"#1E2EFD"},{"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.default}","resolvedValue":"#e5e5e5"},{"path":"role.ring","cssVar":"--role-ring","type":"color","description":"Focus ring color. shadcn role: ring.","alias":"{semantic.color.border.accent}","resolvedValue":"#1E2EFD"},{"path":"role.radius","cssVar":"--role-radius","type":"dimension","description":"Default border radius. shadcn role: radius.","alias":"{semantic.radius.action}","resolvedValue":"12px"}]}'), k = {
+const o = "2026-07-07T05:40:59.475Z", a = "hirobius.tokens.json", r = "W3C DTCG 2025.10", i = "https://adrianmilsap.com/hds", s = "https://adrianmilsap.com/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: "#1E2EFD", primaryColorToken: "primitive.color.blue.500", font: "Satoshi variable 100–900, self-hosted", spacingBase: "4px", buttonBorderRadius: "0px", cardBorderRadius: "8px", neutralScale: "true monochromatic (equal RGB channels)", accentCount: 1 }, c = ["Alert", "AlertDialog", "AspectRatio", "Avatar", "AvatarGroup", "Badge", "Bleed", "Blockquote", "Box", "Breadcrumb", "ButtonGroup", "Calendar", "Callout", "Card", "Carousel", "Center", "CinematicLink", "CircularProgress", "Cluster", "CodeBlock", "Combobox", "CommandPalette", "ComponentInstanceMatrix", "Container", "ContextMenu", "Cover", "DateInput", "DateRangeInput", "DateTimeInput", "Dialog", "Disclosure", "Divider", "DocLinkCard", "EmptyState", "Field", "FileInput", "Form", "FormField", "FormFieldShell", "FoundationSwatch", "Frame", "Grid", "HdsCheckbox", "HdsRadio", "HdsSlider", "HdsThemeProvider", "HdsToggle", "HeadingStack", "HoverCard", "Icon", "IconButton", "InlineCode", "InlineLink", "InputGroup", "Kbd", "Lightbox", "MetadataList", "MultiSelector", "NavGroup", "NavItem", "OverflowList", "Page", "Pagination", "Pin", "Progress", "Reveal", "SegmentedControl", "SelectableCard", "Sidebar", "SideNav", "Skeleton", "Sketch", "SpecimenBlock", "Spinner", "Stack", "Stat", "StatusDot", "StatusListItem", "StatusTile", "Stepper", "StepperField", "Surface", "Switcher", "Table", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "Tag", "Text", "TextLockup", "TileGrid", "TimeInput", "Timestamp", "ToastProvider", "ToggleButton", "Token", "Tokenizer", "Toolbar", "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/app/components/lab/legacy-token-detail.tsx" }, { name: "HdsSelect", filePath: "src/app/components/select.tsx" }], namespaceViolations: [{ name: "HdsCheckbox", filePath: "src/app/components/checkbox.tsx" }, { name: "HdsLegacyTokenGovernancePanel", filePath: "src/app/components/lab/legacy-token-detail.tsx" }, { name: "HdsMobileTopBar", filePath: "src/app/components/shell-controls.tsx" }, { name: "HdsRadio", filePath: "src/app/components/radio.tsx" }, { name: "HdsSelect", filePath: "src/app/components/select.tsx" }, { name: "HdsSidebarUtilityButton", filePath: "src/app/components/shell-controls.tsx" }, { name: "HdsSlider", filePath: "src/app/components/slider.tsx" }, { name: "HdsToggle", filePath: "src/app/components/toggle.tsx" }] }, y = "CLAUDE.md", v = "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},"Alert":{"category":"Feedback","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/alert.tsx","description":"Alert - compact feedback surface with contextual severity.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Alert","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx","src/stories/alert.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"},"props":{"variant":{"type":"enum","values":["info","success","warning","error"],"default":"info"},"title":{"type":"string","optional":true},"children":{"type":"ReactNode"}},"allowedChildren":["*"],"propConstraints":{"variant":{"type":"enum","values":["info","success","warning","error"]},"title":{"type":"string"}},"requiredProps":["children"],"a11yRules":[{"rule":"role=alert is set by the component — do not override","required":false}],"variantAxes":["variant"],"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":"TODO:hds-master:Alert"},"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/app/components/componentPreviewRegistry.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":"TODO:hds-master:CinematicLink"},"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":null,"figmaId":null,"preview":{"exportName":"CodeBlock","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/lab/legacy-token-detail.tsx","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":"TODO:hds-master:CodeBlock"},"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":"TODO:hds-master:Container"},"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":null,"figmaId":null,"preview":{"exportName":"Disclosure","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/nav-group.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":"TODO:hds-master:Disclosure"},"Divider":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/divider.tsx","description":"Divider — semantic separator between content regions.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Divider","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/metadata-list.tsx","src/app/data/hdsEditorial.tsx","src/stories/divider.stories.tsx"],"tokenMapping":{"Default stroke":"semantic.color.border.default","Strong stroke":"semantic.color.border.strong","Stroke thickness":"primitive.borderWidth.xs"},"props":{"className":{"type":"string","optional":true},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal"},"spacing":{"type":"string | number","optional":true},"strong":{"type":"boolean","default":false},"style":{"type":"CSSProperties","optional":true}},"allowedChildren":[],"propConstraints":{"className":{"type":"string"},"orientation":{"type":"enum","values":["horizontal","vertical"]},"strong":{"type":"boolean"}},"requiredProps":[],"a11yRules":[],"variantAxes":["orientation"],"componentProperties":[],"states":["default"],"slots":[{"name":"line","figmaSlotName":"Line","tokenBinding":{"fill":"semantic.color.border.default"}}],"tier":"primitive","docExempt":false,"sourcePath":"src/app/components/Divider.tsx","figmaLink":"TODO:hds-master:Divider"},"DocLinkCard":{"category":"Navigation","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":"TODO:hds-master:DocLinkCard","consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/doc-link-card.test.tsx","src/app/data/hdsEditorial.tsx","src/stories/doc-link-card.stories.tsx"],"variantAxes":[],"componentProperties":[]},"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/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},"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/app/components/componentPreviewRegistry.tsx","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":"TODO:hds-master:FoundationSwatch"},"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/componentPreviewRegistry.tsx","src/app/components/foundation-swatch.tsx","src/app/components/image-lightbox.tsx","src/app/components/segmented-control.test.tsx","src/app/components/shell-controls.tsx","src/app/components/sidebar.tsx","src/app/components/sketch-controls.tsx","src/app/components/stack.tsx","src/app/components/tooltip.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":"TODO:hds-master:Grid"},"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/componentPreviewRegistry.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/lab/legacy-token-detail.tsx","src/app/components/lab/tokenUtils.ts","src/app/components/menu.tsx","src/app/components/multi-selector.tsx","src/app/components/select.tsx","src/app/components/shell-controls.tsx","src/app/components/text-lockup.tsx","src/app/components/theme-toggle.tsx","src/app/components/toast.tsx","src/app/components/tokenTableUtils.ts","src/app/data/hdsEditorial.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":"TODO:hds-master:Icon"},"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":null,"figmaId":null,"preview":{"exportName":"IconButton","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/hds-tooltip.tsx","src/app/components/inline-code.tsx","src/app/components/page-footer.tsx","src/app/components/pagination.tsx","src/app/components/shell-controls.tsx","src/app/components/stepper-field.tsx","src/app/data/hdsEditorial.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":"TODO:hds-master:IconButton"},"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":null,"figmaId":null,"preview":{"exportName":"InlineCode","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","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":"TODO:hds-master:InlineCode"},"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":null,"figmaId":null,"preview":{"exportName":"InlineLink","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/hover-card.tsx","src/app/components/image-lightbox.tsx","src/app/components/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":"TODO:hds-master:InlineLink"},"Input":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/input.tsx","description":"Input — text field primitive (shadcn baseline). shadcn-baseline implementation (8s-5): cva-driven sizing/state composed against role-token Tailwind utilities (bg-background / border-input / focus-visible:ring-ring / placeholder:text-muted-foreground / etc.) wired by 8e-2 + 8s-1. Border swaps to border-destructive on error and the focus ring follows. Theme is handled entirely by CSS custom properties. The label/helper/error wrapper is deliberately retained on this primitive so existing call sites keep working unchanged. A future 8t pass may extract those slots into an HdsField pattern (see orchestration agentNote). Variants: size — sm (32px) / md (40px, default) / lg (48px) textStyle — body (default) / mono Derived state (data-state): default | focus | filled | error | disabled | loading loading swaps the trailing area for a spinner and sets aria-busy; disabled is implied. demoState (frozen, via DemoStateContext) is honored so matrix cells still freeze visually.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"Input","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/stepper-field.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","src/app/pages/docs/patterns/_template.tsx","src/app/pages/docs/patterns/HdsField.tsx","src/app/pages/sketches/private/CombatArenaLayout.tsx","src/stories/input.stories.tsx"],"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":{"type":"Type","size":"Size","label":"Label","placeholder":"Placeholder","helperText":"Helper text","error":"Error","errorMessage":"Error message","disabled":"Disabled","loading":"Loading"},"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"},{"name":"Placeholder","type":"TEXT","defaultValue":"Placeholder","sourceProp":"placeholder","boundTo":"characters","targetSelector":"Placeholder"},{"name":"Helper text","type":"TEXT","defaultValue":"Helper text","sourceProp":"helperText","boundTo":"characters","targetSelector":"Helper"},{"name":"Error","type":"BOOLEAN","defaultValue":false,"sourceProp":"error","boundTo":"visibility","targetSelector":"Error"},{"name":"Error message","type":"TEXT","defaultValue":"Error message","sourceProp":"errorMessage","boundTo":"characters","targetSelector":"Error"}],"slots":[{"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":"TODO:hds-master:Input"},"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":null,"figmaId":null,"preview":{"exportName":"NavGroup","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","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":"TODO:hds-master:NavGroup"},"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":null,"figmaId":null,"preview":{"exportName":"NavItem","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/nav-group.tsx","src/app/context/DemoStateContext.tsx","src/app/data/hds-nav-data.ts","src/app/hooks/useInteractionState.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":"TODO:hds-master:NavItem"},"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":null,"figmaId":null,"preview":{"exportName":"SegmentedControl","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/segmented-control.test.tsx","src/app/components/TokenDisplayToggle.tsx","src/app/data/hdsEditorial.tsx","src/app/hooks/useInteractionState.ts","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":"TODO:hds-master:SegmentedControl"},"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":"TODO:hds-master:Sketch"},"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/componentPreviewRegistry.tsx","src/app/components/container.tsx","src/app/components/controls-panel.tsx","src/app/components/cover.tsx","src/app/components/disclosure.tsx","src/app/components/doc-page-header.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/lab/token-collection-list.tsx","src/app/components/nav-group.tsx","src/app/components/page.tsx","src/app/components/shell-controls.tsx","src/app/components/sketch-controls.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/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":"TODO:hds-master:Stack"},"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":null,"figmaId":null,"preview":{"exportName":"StepperField","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.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":"TODO:hds-master:StepperField"},"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":null,"figmaId":null,"preview":{"exportName":"Table","sizing":"full"},"consumers":["src/app/components/api-reference.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/propTableUtils.tsx","src/app/data/hdsEditorial.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":"TODO:hds-master:Table"},"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":null,"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/componentPreviewRegistry.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/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":"TODO:hds-master:Tag"},"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/componentPreviewRegistry.tsx","src/app/components/foundation-swatch.tsx","src/app/components/health-rail.tsx","src/app/components/lab/legacy-token-detail.tsx","src/app/components/lab/legacy-token-list.tsx","src/app/components/lab/token-collection-list.tsx","src/app/components/side-nav.tsx","src/app/components/TokenDisplayToggle.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/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/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":"TODO:hds-master:Token"},"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":null,"figmaId":null,"preview":{"exportName":"Surface","sizing":"panel"},"consumers":["src/app/components/api-reference.tsx","src/app/components/component-preview.tsx","src/app/components/container.tsx","src/app/components/controls-panel.tsx","src/app/components/dialog.tsx","src/app/components/disclosure.tsx","src/app/components/doc-page-header.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/lab/token-list.tsx","src/app/components/lab/tokenUtils.ts","src/app/components/popover.tsx","src/app/components/preview-frame.tsx","src/app/components/shell-controls.tsx","src/app/components/sketch-controls.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/tooltip.tsx","src/app/data/hdsEditorial.tsx","src/app/layouts/CaseStudyLayout.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":"TODO:hds-master:Surface","states":["default"]},"Card":{"category":"Display","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/card.tsx","description":"Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\\"Card Anatomy\\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\\"accent\\"> <Card.Header metadata={<Badge tone=\\"warning\\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\\"5 / 12 tasks\\" /> <Card.Metric label=\\"Retainer\\" value=\\"$3,500\\" sub=\\"Active\\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label-uppercase + big value (h2) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: \'default\' (borderless) | \'accent\' (2px accent border) — the structural axis, for highlighted entries like \\"recommended package\\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\\"none\\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\\"shadow-...\\"` for a hover/floating treatment on interactive cards.","figmaUrl":null,"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"],"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},"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"},"states":["default"],"allowedChildren":["*"],"propConstraints":{"padding":{"type":"enum","values":["component","item","none","px24","px16"]},"gap":{"type":"enum","values":["tight","normal","inset","spacious"]},"noPadding":{"type":"boolean"},"className":{"type":"string"},"layout":{"type":"enum","values":["VERTICAL","HORIZONTAL"]},"fill":{"type":"string"},"stroke":{"type":"string"},"radius":{"type":"string"}},"requiredProps":["children"],"a11yRules":[],"preview":{"exportName":"Card","sizing":"panel"},"variantAxes":["padding"],"componentProperties":[],"slots":[{"name":"background","figmaSlotName":"Background","tokenBinding":{"fill":"role.card","stroke":"role.border","cornerRadius":"role.radius","gap":"semantic.space.layout.tight"}},{"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":"TODO:hds-master:Card"},"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/app/components/componentPreviewRegistry.tsx","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":"TODO:hds-master:ComponentInstanceMatrix"},"SpecimenBlock":{"category":"Utilities","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/specimen-block.tsx","description":"SpecimenBlock — shared component-doc specimen block with preview, variant deck, and optional matrix.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"SpecimenBlock","sizing":"panel"},"consumers":["src/app/components/api-reference.tsx","src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"primitive","docExempt":true,"variantAxes":[],"componentProperties":[],"sourcePath":"src/app/components/SpecimenBlock.tsx","figmaLink":"TODO:hds-master:SpecimenBlock"},"ActivityFeed":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/activity-feed.tsx","description":"ActivityFeed — chronological event log using whitespace as the sole separator between items. Use for timeline views and system audit trails; reach for Table when columnar comparison matters. Enforces 48px gap (space.12) between events and semantic typography roles throughout.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"ActivityFeed","sizing":"panel"},"consumers":["src/app/components/activity-feed.test.tsx","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":"TODO:hds-master:ActivityFeed"},"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":"Subtext","type":"TEXT","defaultValue":"Supporting subtext","sourceProp":"subtext","boundTo":"characters","targetSelector":"Subtext"}],"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":"TODO:hds-master:HeadingStack"},"HdsSystemDocLayout":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/layouts/HdsSystemDocLayout.tsx","description":"HdsSystemDocLayout — three-column doc layout with sidebar, nav, and content.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsSystemDocLayout","sizing":"panel"},"consumers":["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},"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/preview-frame.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/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":"TODO:hds-master:Text"},"Dialog":{"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,"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","boundTo":"characters","targetSelector":"Title"},{"name":"Description","type":"TEXT","defaultValue":"Dialog description","sourceProp":"description","boundTo":"characters","targetSelector":"Description"},{"name":"Hide close","type":"BOOLEAN","defaultValue":false,"sourceProp":"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},"title":{"type":"string","optional":true},"description":{"type":"string","optional":true},"hideClose":{"type":"boolean","default":false},"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":"Title","description":"Description","hideClose":"Hide 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":["*"],"propConstraints":{"open":{"type":"boolean"},"defaultOpen":{"type":"boolean"},"modal":{"type":"boolean"},"title":{"type":"string"},"description":{"type":"string"},"hideClose":{"type":"boolean"}},"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":"TODO:hds-master: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":"TODO:hds-master:StackedCardRail","tier":"pattern","preview":{"exportName":"StackedCardRail","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"cards":{"type":"StackedCardRailCard[]","optional":false}},"allowedChildren":[],"propConstraints":{},"requiredProps":["cards"],"a11yRules":[]},"Button":{"category":"Actions","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/button.tsx","description":"Triggers an action when activated.","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:Button","tier":"primitive","preview":{"exportName":"Button","sizing":"panel"},"consumers":["src/app/components/activity-feed.tsx","src/app/components/animated-label.tsx","src/app/components/api-reference.tsx","src/app/components/approval-card.tsx","src/app/components/ComponentDocPage.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/dialog.tsx","src/app/components/doc-sections.tsx","src/app/components/error-boundary.tsx","src/app/components/error-pattern.tsx","src/app/components/icon-button.tsx","src/app/components/image-lightbox.tsx","src/app/components/sketch-controls.tsx","src/app/components/variant-strip.tsx","src/app/context/DemoStateContext.tsx","src/app/data/projects.ts","src/app/design-system/generated-token-descriptions.ts","src/app/design-system/searchIndex.ts","src/app/lab/shadcn-spike/Button.tsx","src/app/lab/shadcn-spike/page.tsx","src/app/pages/admin/ApprovalDetail.tsx","src/app/pages/docs/patterns/HdsActivityFeed.tsx","src/app/pages/docs/patterns/HdsIconButton.tsx","src/app/pages/sketches/private/MetaballsLayout.tsx","src/app/pages/sketches/private/ShapeExplorerLayout.tsx","src/app/pages/sketches/private/WaveBackgroundLayout.tsx","src/stories/button.stories.tsx","src/stories/icon-button.stories.tsx","src/stories/inline-code.stories.tsx","src/stories/table.stories.tsx","src/stories/text-lockup.stories.tsx"],"tokenMapping":{},"variantAxes":["variant","size","state"],"componentProperties":[{"name":"Label","type":"TEXT","defaultValue":"Button","sourceProp":"label","boundTo":"characters","targetSelector":"Label"},{"name":"Leading icon","type":"BOOLEAN","defaultValue":false,"sourceProp":"iconLeft","boundTo":"visibility","targetSelector":"IconLeft"},{"name":"Trailing icon","type":"BOOLEAN","defaultValue":false,"sourceProp":"iconRight","boundTo":"visibility","targetSelector":"IconRight"},{"name":"Show label","type":"BOOLEAN","defaultValue":true,"sourceProp":"iconOnly","boundTo":"visibility","targetSelector":"Label","invert":true}],"sourcePath":"src/app/components/button.tsx","sourceExport":"Button","props":{"variant":{"type":"enum","values":["primary","secondary","tertiary"],"default":"secondary"},"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","size":"Size","disabled":"Disabled","loading":"Loading","label":"Label","iconLeft":"Leading icon","iconRight":"Trailing icon","iconOnly":"Icon only"},"states":["default","hover","focus","active","disabled","loading"],"allowedChildren":[],"propConstraints":{"variant":{"type":"enum","values":["primary","secondary","tertiary"]},"size":{"type":"enum","values":["sm","md","lg"]},"disabled":{"type":"boolean"},"loading":{"type":"boolean"},"label":{"type":"string"},"iconOnly":{"type":"boolean"}},"requiredProps":[],"a11yRules":[{"rule":"Must have accessible name via label prop or aria-label","required":true},{"rule":"Focus ring visible in all interactive states (uses hds-focus class)","required":true}]},"Callout":{"category":"Feedback","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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Callout","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}]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:EmptyState","tier":"primitive","preview":{"exportName":"EmptyState","sizing":"panel"},"consumers":["src/app/components/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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Field","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}]},"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":"TODO:hds-master:Page","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/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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Stat","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}]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:StatusListItem","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}]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:StatusTile","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":[]},"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":"TODO:hds-master:TileGrid","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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Badge","tier":"primitive","preview":{"exportName":"Badge","sizing":"panel"},"consumers":["src/app/components/alert.tsx","src/app/components/card.tsx","src/app/components/componentPreviewRegistry.tsx","src/app/components/lab/legacy-token-detail.tsx","src/app/data/hdsEditorial.tsx","src/app/design-system/generated-token-descriptions.ts","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/table.stories.tsx"],"tokenMapping":{}},"TextLockup":{"variantAxes":[],"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":"TODO:hds-master:TextLockup","tier":"pattern","preview":{"exportName":"TextLockup","sizing":"compact"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/stories/text-lockup.stories.tsx"],"tokenMapping":{}},"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":"TODO:hds-master:AssetImg","tier":"primitive","preview":{"exportName":"AssetImg","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/image-lightbox.tsx","src/app/components/info-page.tsx","src/app/components/tooltip.tsx","src/app/data/hdsEditorial.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}]},"Tabs":{"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":"TODO:hds-master:Tabs","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":[]},"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":"TODO:hds-master:TabsContent","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":[]},"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":"TODO:hds-master:TabsList","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":[]},"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":"TODO:hds-master:TabsTrigger","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":[]},"HdsRadio":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/radio.tsx","description":"HdsRadio — radio button with animated selection indicator.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsRadio","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/controls.tsx","src/app/components/radio.test.tsx","src/app/data/hdsEditorial.tsx","src/app/hooks/useInteractionState.test.ts","src/app/hooks/useInteractionState.ts","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":"TODO:hds-master:HdsRadio"},"HdsSelect":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/select.tsx","description":"Controls — shared input/control primitives.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsSelect","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/controls.tsx","src/app/components/select.test.tsx","src/app/data/hdsEditorial.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":"TODO:hds-master:HdsSelect"},"HdsSlider":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/slider.tsx","description":"HdsSlider — range slider with label and value display.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsSlider","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/controls.tsx","src/app/data/hdsEditorial.tsx","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":"TODO:hds-master:HdsSlider"},"HdsToggle":{"category":"Inputs","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/toggle.tsx","description":"HdsToggle — boolean on/off toggle with animated thumb.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"HdsToggle","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/controls.tsx","src/app/components/radio.tsx","src/app/components/toggle.test.tsx","src/app/data/hdsEditorial.tsx","src/app/hooks/useInteractionState.test.ts","src/app/hooks/useInteractionState.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":"TODO:hds-master:HdsToggle"},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Avatar","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/stories/avatar-group.stories.tsx","src/stories/avatar.stories.tsx"],"tokenMapping":{},"variantAxes":[],"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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Progress","tier":"primitive","preview":{"exportName":"Progress","sizing":"panel"},"consumers":["src/app/components/card.tsx","src/app/components/progress.test.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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Skeleton","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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Spinner","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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Breadcrumb","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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Pagination","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":[]},"HdsCheckbox":{"category":"Inputs","filePath":"src/app/components/checkbox.tsx","description":"HdsCheckbox — custom-drawn checkbox with check / indeterminate glyph.","hidden":false,"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{"exportName":"HdsCheckbox","sizing":"panel"},"tokenMapping":{},"tier":"primitive","categorySource":"jsdoc","governedCategory":true,"docExempt":false,"figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:HdsCheckbox","consumers":["src/app/components/checkbox.test.tsx","src/stories/checkbox.stories.tsx"],"variantAxes":[],"componentProperties":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:ToastProvider","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":[]},"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":null,"figmaId":null,"figmaLink":"TODO:hds-master:Combobox","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":[]},"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.","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:Form","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/stories/form.stories.tsx","src/stories/patterns-layout.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:FormField","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":[]},"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":"TODO:hds-master:FormFieldShell","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":[]},"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":"TODO:hds-master:HdsThemeProvider","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":[]},"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":"TODO:hds-master:AvatarGroup","tier":"primitive","preview":{"exportName":"AvatarGroup","sizing":"panel"},"consumers":["src/app/components/avatar-group.figma.tsx","src/app/components/avatar-group.test.tsx","src/stories/avatar-group.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"max":{"type":"number","optional":true},"size":{"type":"AvatarGroupSize","default":"md"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:Blockquote","tier":"primitive","preview":{"exportName":"Blockquote","sizing":"panel"},"consumers":["src/app/components/blockquote.figma.tsx","src/app/components/blockquote.test.tsx","src/stories/blockquote.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"attribution":{"type":"ReactNode","optional":true},"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:ButtonGroup","tier":"primitive","preview":{"exportName":"ButtonGroup","sizing":"panel"},"consumers":["src/app/components/button-group.figma.tsx","src/app/components/button-group.test.tsx","src/stories/button-group.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"orientation":{"type":"enum","values":["horizontal","vertical"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:InputGroup","tier":"primitive","preview":{"exportName":"InputGroup","sizing":"panel"},"consumers":["src/app/components/input-group.figma.tsx","src/app/components/input-group.test.tsx","src/stories/input-group.stories.tsx"],"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":[]},"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":"TODO:hds-master:Kbd","tier":"primitive","preview":{"exportName":"Kbd","sizing":"panel"},"consumers":["src/app/components/kbd.figma.tsx","src/app/components/kbd.test.tsx","src/stories/kbd.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:StatusDot","tier":"primitive","preview":{"exportName":"StatusDot","sizing":"panel"},"consumers":["src/app/components/status-dot.figma.tsx","src/app/components/status-dot.test.tsx","src/stories/status-dot.stories.tsx"],"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":[]},"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":"TODO:hds-master:Timestamp","tier":"primitive","preview":{"exportName":"Timestamp","sizing":"panel"},"consumers":["src/app/components/timestamp.figma.tsx","src/app/components/timestamp.test.tsx","src/stories/timestamp.stories.tsx"],"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":[]},"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":"TODO:hds-master:VisuallyHidden","tier":"primitive","preview":{"exportName":"VisuallyHidden","sizing":"panel"},"consumers":["src/app/components/visually-hidden.figma.tsx","src/app/components/visually-hidden.test.tsx","src/stories/visually-hidden.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","default":"span"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:CircularProgress","tier":"primitive","preview":{"exportName":"CircularProgress","sizing":"panel"},"consumers":["src/app/components/circular-progress.figma.tsx","src/app/components/circular-progress.test.tsx","src/stories/circular-progress.stories.tsx"],"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":[]},"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":null,"figmaId":null,"consumers":["src/app/components/side-nav.figma.tsx","src/app/components/side-nav.test.tsx","src/stories/side-nav.stories.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"preview":{"exportName":"SideNav","sizing":"panel"},"tier":"primitive","docExempt":false,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:SideNav"},"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":"TODO:hds-master:CommandPalette","tier":"primitive","preview":{"exportName":"CommandPalette","sizing":"panel"},"consumers":["src/app/components/command-palette.figma.tsx","src/app/data/nav-model.test.ts","src/app/lib/hds-search.ts","src/stories/command-palette.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"className":{"type":"string","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:Lightbox","tier":"primitive","preview":{"exportName":"Lightbox","sizing":"panel"},"consumers":["src/app/components/image-lightbox.figma.tsx","src/app/components/image-lightbox.test.tsx","src/app/data/hdsEditorial.tsx","src/stories/asset-img.stories.tsx","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":[]},"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":"TODO:hds-master:AppShell","tier":"template","preview":{"exportName":"AppShell","sizing":"panel"},"consumers":["src/app/components/app-shell.figma.tsx","src/app/components/app-shell.test.tsx","src/stories/app-shell.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:FileInput","tier":"pattern","preview":{"exportName":"FileInput","sizing":"panel"},"consumers":["src/app/components/file-input.figma.tsx","src/app/components/file-input.test.tsx","src/stories/file-input.stories.tsx"],"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":[]},"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":"TODO:hds-master:MetadataList","tier":"pattern","preview":{"exportName":"MetadataList","sizing":"panel"},"consumers":["src/app/components/metadata-list.figma.tsx","src/app/components/metadata-list.test.tsx","src/stories/metadata-list.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"items":{"type":"MetadataListItem[]"},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"vertical"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:OverflowList","tier":"pattern","preview":{"exportName":"OverflowList","sizing":"panel"},"consumers":["src/app/components/overflow-list.figma.tsx","src/app/components/overflow-list.test.tsx","src/stories/overflow-list.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"children":{"type":"ReactNode"},"max":{"type":"number","optional":true},"renderOverflow":{"type":"(count: number) => ReactNode","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:SelectableCard","tier":"pattern","preview":{"exportName":"SelectableCard","sizing":"panel"},"consumers":["src/app/components/selectable-card.figma.tsx","src/app/components/selectable-card.test.tsx","src/stories/selectable-card.stories.tsx"],"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":[]},"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":"TODO:hds-master:Tokenizer","tier":"pattern","preview":{"exportName":"Tokenizer","sizing":"panel"},"consumers":["src/app/components/tokenizer.figma.tsx","src/app/components/tokenizer.test.tsx","src/stories/tokenizer.stories.tsx"],"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":[]},"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":"TODO:hds-master:TopNav","tier":"pattern","preview":{"exportName":"TopNav","sizing":"panel"},"consumers":["src/app/components/top-nav.figma.tsx","src/app/components/top-nav.test.tsx","src/stories/top-nav.stories.tsx"],"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":[]},"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":"TODO:hds-master:Carousel","tier":"pattern","preview":{"exportName":"Carousel","sizing":"panel"},"consumers":["src/app/components/carousel.figma.tsx","src/app/components/carousel.test.tsx","src/stories/carousel.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"ariaLabel":{"type":"string","default":"Carousel"},"children":{"type":"ReactNode"},"showControls":{"type":"boolean","default":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:Stepper","tier":"pattern","preview":{"exportName":"Stepper","sizing":"panel"},"consumers":["src/app/components/stepper.figma.tsx","src/app/components/stepper.test.tsx","src/stories/stepper.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"activeStep":{"type":"number"},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal"},"steps":{"type":"Step[]"}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:Toolbar","tier":"pattern","preview":{"exportName":"Toolbar","sizing":"panel"},"consumers":["src/app/components/toolbar.figma.tsx","src/app/components/toolbar.test.tsx","src/stories/toolbar.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:TreeList","tier":"pattern","preview":{"exportName":"TreeList","sizing":"panel"},"consumers":["src/app/components/tree-list.figma.tsx","src/app/components/tree-list.test.tsx","src/stories/tree-list.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"defaultExpandedIds":{"type":"string[]","optional":true},"items":{"type":"TreeNode[]"},"onSelect":{"type":"(id: string) => void","optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:AlertDialog","tier":"primitive","preview":{"exportName":"AlertDialog","sizing":"panel"},"consumers":["src/app/components/alert-dialog.figma.tsx","src/app/components/alert-dialog.test.tsx","src/stories/alert-dialog.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:AspectRatio","tier":"primitive","preview":{"exportName":"AspectRatio","sizing":"panel"},"consumers":["src/app/components/aspect-ratio.figma.tsx","src/app/components/aspect-ratio.test.tsx","src/app/components/frame.tsx","src/stories/aspect-ratio.stories.tsx","src/stories/frame.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"asChild":{"type":"boolean","optional":true},"ratio":{"type":"number","default":1}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:Calendar","tier":"primitive","preview":{"exportName":"Calendar","sizing":"panel"},"consumers":["src/app/components/calendar.figma.tsx","src/app/components/calendar.test.tsx","src/app/components/date-input.tsx","src/app/components/date-range-input.tsx","src/app/components/date-time-input.tsx","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":[]},"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":"TODO:hds-master:ContextMenu","tier":"primitive","preview":{"exportName":"ContextMenu","sizing":"panel"},"consumers":["src/app/components/context-menu.figma.tsx","src/app/components/context-menu.test.tsx","src/stories/context-menu.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:DateInput","tier":"pattern","preview":{"exportName":"DateInput","sizing":"panel"},"consumers":["src/app/components/date-input.figma.tsx","src/app/components/date-input.test.tsx","src/stories/date-input.stories.tsx"],"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":[]},"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":"TODO:hds-master:DateRangeInput","tier":"pattern","preview":{"exportName":"DateRangeInput","sizing":"panel"},"consumers":["src/app/components/date-range-input.figma.tsx","src/app/components/date-range-input.test.tsx","src/stories/date-range-input.stories.tsx"],"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":[]},"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":"TODO:hds-master:DateTimeInput","tier":"pattern","preview":{"exportName":"DateTimeInput","sizing":"panel"},"consumers":["src/app/components/date-time-input.figma.tsx","src/app/components/date-time-input.test.tsx","src/stories/date-time-input.stories.tsx"],"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":[]},"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":"TODO:hds-master:HoverCard","tier":"primitive","preview":{"exportName":"HoverCard","sizing":"panel"},"consumers":["src/app/components/hover-card.figma.tsx","src/app/components/hover-card.test.tsx","src/stories/hover-card.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:MultiSelector","tier":"pattern","preview":{"exportName":"MultiSelector","sizing":"panel"},"consumers":["src/app/components/multi-selector.figma.tsx","src/app/components/multi-selector.test.tsx","src/stories/multi-selector.stories.tsx"],"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":[]},"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":"TODO:hds-master:TimeInput","tier":"primitive","preview":{"exportName":"TimeInput","sizing":"panel"},"consumers":["src/app/components/date-time-input.tsx","src/app/components/time-input.figma.tsx","src/app/components/time-input.test.tsx","src/stories/date-time-input.stories.tsx","src/stories/time-input.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"props":{"size":{"type":"enum","values":["sm","md","lg"],"optional":true}},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"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":"TODO:hds-master:ToggleButton","tier":"primitive","preview":{"exportName":"ToggleButton","sizing":"panel"},"consumers":["src/app/components/toggle-button.figma.tsx","src/app/components/toggle-button.test.tsx","src/stories/toggle-button.stories.tsx"],"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":[]},"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":"TODO:hds-master:Box","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/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":[]},"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":"TODO:hds-master:Bleed","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":[]},"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":"TODO:hds-master:Center","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":[]},"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":"TODO:hds-master:Cluster","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":[]},"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":"TODO:hds-master:Cover","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":[]},"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":"TODO:hds-master:Frame","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":[]},"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":"TODO:hds-master:Sidebar","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":[]},"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":"TODO:hds-master:Switcher","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":[]},"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":"TODO:hds-master:Pin","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":[]},"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":"TODO:hds-master:Reveal","tier":"primitive","preview":{"exportName":"Reveal","sizing":"panel"},"consumers":["src/app/components/pin.tsx","src/app/components/reveal.test.tsx","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":[]},"HdsPhosphor":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized icon alias stub for JSX normalization.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsFrame":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-internal frame primitive stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsHeading":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized heading primitive stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsLabel":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized label primitive stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsCaption":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized caption primitive stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsChip":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized chip instance stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]},"HdsAvatar":{"category":"Compiler","filePath":"scripts/hds-jsx-compiler.mjs","description":"Compiler-recognized avatar instance stub for generated JSX validation.","hidden":true,"tier":"utility","props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[]}}'), 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"},"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"},"AutoPreviewSpecimen":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"docExempt":true,"filePath":"src/app/components/componentPreviewRegistry.tsx","description":"/** @internal @doc-exempt: demo-preview-helper — not part of @hirobius/design-system public API.","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:AutoPreviewSpecimen","tier":"utility","preview":{"exportName":"AutoPreviewSpecimen","sizing":"panel"},"consumers":["src/app/components/specimen-block.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"VariantPreviewDeck":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/variant-preview-deck.tsx","description":"/** @internal @doc-exempt: demo-preview-helper — not part of @hirobius/design-system public API.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"VariantPreviewDeck","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/specimen-block.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:VariantPreviewDeck"},"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/app/components/componentPreviewRegistry.tsx","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":"TODO:hds-master:HistoryCard"},"ComponentPreview":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/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/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:ComponentPreview"},"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":["src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:AnimatedLabel"},"ControlsPanel":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/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/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:ControlsPanel"},"ControlsSection":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/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/components/componentPreviewRegistry.tsx","src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:ControlsSection"},"HdsMobileTopBar":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/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":["src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:HdsMobileTopBar"},"PreviewFrame":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/preview-frame.tsx","description":"PreviewFrame - documentation preview shell for storefront component demos.","figmaUrl":null,"figmaId":null,"preview":{"exportName":"PreviewFrame","sizing":"panel"},"consumers":["src/app/components/componentPreviewRegistry.tsx","src/app/components/demo-block.tsx","src/app/components/specimen-block.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:PreviewFrame"},"HdsSidebarUtilityButton":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"filePath":"src/app/components/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":["src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:HdsSidebarUtilityButton"},"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":"TODO:hds-master:ImageLightbox"},"SketchButton":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":"TODO:hds-master:SketchButton"},"SketchCheckbox":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":"TODO:hds-master:SketchCheckbox"},"SketchPanelToggle":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":"TODO:hds-master:SketchPanelToggle"},"SketchRange":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":"TODO:hds-master:SketchRange"},"SketchTextarea":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":"TODO:hds-master:SketchTextarea"},"MorphCard":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/morph-card.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"MorphCard","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:MorphCard"},"Tooltip":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/tooltip.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"Tooltip","sizing":"panel"},"consumers":["src/app/components/asset-img.tsx","src/app/components/hds-tooltip.tsx","src/app/data/hdsEditorial.tsx","src/stories/hds-tooltip.stories.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:Tooltip"},"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":"TODO:hds-master:NotFoundPattern"},"CascadeText":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/CascadeText.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"CascadeText","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:CascadeText"},"DocPageSpec":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/DocPageSpec.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"DocPageSpec","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:DocPageSpec"},"TokenDisplayToggle":{"category":"Uncategorized","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":true,"filePath":"src/app/components/TokenDisplayToggle.tsx","description":"","figmaUrl":null,"figmaId":null,"tier":"utility","preview":{"exportName":"TokenDisplayToggle","sizing":"panel"},"consumers":["src/app/data/hdsEditorial.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:TokenDisplayToggle"},"HdsLegacyTokenGovernancePanel":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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/app/components/componentPreviewRegistry.tsx","src/app/components/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":"TODO:hds-master:HdsLegacyTokenGovernancePanel"},"LegacyTokenList":{"category":"Lab","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/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":["src/app/components/componentPreviewRegistry.tsx"],"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":"TODO:hds-master:LegacyTokenList"},"TokenCollectionList":{"category":"Lab","categorySource":"jsdoc","governedCategory":true,"hidden":false,"filePath":"src/app/components/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/app/components/componentPreviewRegistry.tsx","src/app/components/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":"TODO:hds-master:TokenCollectionList"},"TokenList":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"filePath":"src/app/components/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":["src/app/components/componentPreviewRegistry.tsx"],"tokenMapping":{},"props":{},"allowedChildren":["*"],"propConstraints":{},"requiredProps":[],"a11yRules":[],"tier":"utility","docExempt":true,"variantAxes":[],"componentProperties":[],"figmaLink":"TODO:hds-master:TokenList"},"ErrorBoundary":{"category":"Uncategorized","categorySource":"missing-jsdoc","governedCategory":false,"hidden":false,"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":"TODO:hds-master:ErrorBoundary"},"ApiReference":{"category":"Utilities","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":true,"filePath":"src/app/components/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":"TODO:hds-master:ApiReference","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/app/components/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":"TODO:hds-master:DocPageHeader","tier":"utility","preview":{"exportName":"DocPageHeader","sizing":"panel"},"consumers":["src/app/pages/docs/patterns/_template.tsx","src/app/pages/docs/templates/_template.tsx","src/app/pages/SketchPage.tsx"],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"ThemeToggle":{"category":"Layout","categorySource":"internal-jsdoc","governedCategory":true,"hidden":true,"docExempt":false,"filePath":"src/app/components/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":"TODO:hds-master:ThemeToggle","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/app/components/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":"TODO:hds-master:VariantStrip","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/app/components/demo-block.tsx","figmaUrl":null,"figmaId":null,"figmaLink":"TODO:hds-master:DemoBlock","tier":"utility","preview":{"exportName":"DemoBlock","sizing":"panel"},"consumers":[],"tokenMapping":{},"variantAxes":[],"componentProperties":[]},"PageFooter":{"category":"Layout","categorySource":"jsdoc","governedCategory":true,"hidden":false,"docExempt":false,"filePath":"src/app/components/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":"TODO:hds-master:PageFooter","tier":"utility","preview":{"exportName":"PageFooter","sizing":"panel"},"consumers":[],"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 Bonds 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.2xs","cssVar":"--primitive-typography-size-2xs","type":"dimension","value":"10px"},{"path":"primitive.typography.size.xs","cssVar":"--primitive-typography-size-xs","type":"dimension","value":"13px"},{"path":"primitive.typography.size.sm","cssVar":"--primitive-typography-size-sm","type":"dimension","value":"15px"},{"path":"primitive.typography.size.base","cssVar":"--primitive-typography-size-base","type":"dimension","value":"17px"},{"path":"primitive.typography.size.lg","cssVar":"--primitive-typography-size-lg","type":"dimension","value":"20px"},{"path":"primitive.typography.size.xl","cssVar":"--primitive-typography-size-xl","type":"dimension","value":"24px"},{"path":"primitive.typography.size.2xl","cssVar":"--primitive-typography-size-2xl","type":"dimension","value":"30px"},{"path":"primitive.typography.size.3xl","cssVar":"--primitive-typography-size-3xl","type":"dimension","value":"36px"},{"path":"primitive.typography.size.4xl","cssVar":"--primitive-typography-size-4xl","type":"dimension","value":"48px"},{"path":"primitive.typography.size.5xl","cssVar":"--primitive-typography-size-5xl","type":"dimension","value":"80px"},{"path":"primitive.typography.size.7xl","cssVar":"--primitive-typography-size-7xl","type":"dimension","description":"Swiss-canon display size. Static desktop value; fluid in theme.css.","value":"72px"},{"path":"primitive.typography.weight.light","cssVar":"--primitive-typography-weight-light","type":"fontWeight","description":"Swiss-canon heading weight. Display and h1/h2 composites only.","value":"300"},{"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.semibold","cssVar":"--primitive-typography-weight-semibold","type":"fontWeight","value":"600"},{"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.tighter","cssVar":"--primitive-typography-letterSpacing-tighter","type":"dimension","value":"-0.02em"},{"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.wide","cssVar":"--primitive-typography-letterSpacing-wide","type":"dimension","value":"0.01em"},{"path":"primitive.typography.letterSpacing.wider","cssVar":"--primitive-typography-letterSpacing-wider","type":"dimension","value":"0.02em"},{"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.width.96","cssVar":"--primitive-size-width-96","type":"dimension","description":"96px width step.","value":"96px"},{"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.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","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD"}},{"path":"semantic.color.surface.accentSubtle","cssVar":"--semantic-color-surface-accentSubtle","type":"color","description":"Faint accent tint for hover states or highlights","alias":"{primitive.color.blue.50}","resolvedValue":"oklch(0.96 0.03 266.54)","dark":{"alias":"{primitive.color.blue.900}","resolvedValue":"oklch(0.22 0.05 266.54)"}},{"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","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.300}","resolvedValue":"oklch(0.70 0.2903 266.54)"}},{"path":"semantic.color.content.onAccent","cssVar":"--semantic-color-content-onAccent","type":"color","alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff","dark":{"alias":"{primitive.color.neutral.white}","resolvedValue":"#ffffff"}},{"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.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","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD"}},{"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.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.","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.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.space.layout.tight","cssVar":"--semantic-space-layout-tight","type":"dimension","description":"16px default HdsStack gap and inter-component spacing.","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.","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.space.layout.gutter","cssVar":"--semantic-space-layout-gutter","type":"dimension","description":"24px column and region gutters (alias for layout.normal).","alias":"{primitive.space.6}","resolvedValue":"24px"},{"path":"semantic.space.layout.inset","cssVar":"--semantic-space-layout-inset","type":"dimension","description":"32px major block separation and inset inter-component gaps.","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.","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.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. 72px / Satoshi bold 700 / leading-none.","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"72px","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.","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 42px.","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"30px","fontWeight":"700","letterSpacing":"-0.01em","lineHeight":"42px"}},{"path":"semantic.typography.h3","cssVar":"--semantic-typography-h3","type":"typography","description":"Component and card headers (h3). 20px / Satoshi bold 700 500 / leading-snug.","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, 17px, line-height 28px, max 60ch measure.","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"17px","fontWeight":"500","letterSpacing":"0em","lineHeight":"28px","maxWidth":"60ch"}},{"path":"semantic.typography.ui","cssVar":"--semantic-typography-ui","type":"typography","description":"UI text for nav, labels, captions. Satoshi medium, 15px, line-height 24px.","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"15px","fontWeight":"500","letterSpacing":"0em","lineHeight":"24px","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.","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, 13px, caps tracking, uppercase.","composite":{"fontFamily":"Satoshi, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", sans-serif","fontSize":"13px","fontWeight":"500","letterSpacing":"0.06em","lineHeight":"20px","textTransform":"uppercase"}},{"path":"semantic.typography.mono","cssVar":"--semantic-typography-mono","type":"typography","description":"Monospace for code, token names, shortcuts. Geist Mono regular, 13px.","composite":{"fontFamily":"\\"Geist Mono\\", \\"Courier New\\", monospace","fontSize":"13px","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.","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD"}},{"path":"semantic.accent.hover","cssVar":"--semantic-accent-hover","type":"color","description":"Accent fill on pointer hover.","alias":"{primitive.color.blue.600}","resolvedValue":"oklch(0.45 0.2903 266.54)","dark":{"alias":"{primitive.color.blue.450}","resolvedValue":"oklch(0.56 0.29 266.60)"}},{"path":"semantic.accent.pressed","cssVar":"--semantic-accent-pressed","type":"color","description":"Accent fill during active press.","alias":"{primitive.color.blue.700}","resolvedValue":"oklch(0.44 0.2903 266.54)","dark":{"alias":"{primitive.color.blue.400}","resolvedValue":"oklch(0.65 0.2903 266.54)"}},{"path":"semantic.accent.inactive","cssVar":"--semantic-accent-inactive","type":"color","description":"Accent fill for inactive or unselected accent elements.","alias":"{primitive.color.blue.200}","resolvedValue":"oklch(0.88 0.07 266.54)","dark":{"alias":"{primitive.color.blue.200}","resolvedValue":"oklch(0.88 0.07 266.54)"}},{"path":"semantic.accent.disabled","cssVar":"--semantic-accent-disabled","type":"color","description":"Accent fill for disabled accent elements.","alias":"{primitive.color.blue.100}","resolvedValue":"oklch(0.92 0.04 266.54)","dark":{"alias":"{primitive.color.blue.100}","resolvedValue":"oklch(0.92 0.04 266.54)"}},{"path":"semantic.accent.content","cssVar":"--semantic-accent-content","type":"color","description":"Text and icon color on neutral surfaces with accent intent.","alias":"{primitive.color.blue.500}","resolvedValue":"#1E2EFD","dark":{"alias":"{primitive.color.blue.300}","resolvedValue":"oklch(0.70 0.2903 266.54)"}},{"path":"semantic.accent.contentHover","cssVar":"--semantic-accent-contentHover","type":"color","description":"Accent content color on pointer hover.","alias":"{primitive.color.blue.600}","resolvedValue":"oklch(0.45 0.2903 266.54)","dark":{"alias":"{primitive.color.blue.200}","resolvedValue":"oklch(0.88 0.07 266.54)"}},{"path":"semantic.accent.subtle","cssVar":"--semantic-accent-subtle","type":"color","description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","alias":"{primitive.color.blue.50}","resolvedValue":"oklch(0.96 0.03 266.54)","dark":{"alias":"{primitive.color.blue.900}","resolvedValue":"oklch(0.22 0.05 266.54)"}},{"path":"semantic.radius.action","cssVar":"--semantic-radius-action","type":"dimension","description":"Corner radius for interactive action elements like buttons and inputs.","alias":"{primitive.radius.12}","resolvedValue":"12px"},{"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}}],"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":"oklch(0.96 0.03 266.54)"},{"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":"#1E2EFD"},{"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":"oklch(0.96 0.03 266.54)"},{"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":"13px"},{"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":"#1E2EFD"},{"path":"component.tag.activeBorder","cssVar":"--component-tag-activeBorder","type":"color","description":"Active tag border color.","alias":"{semantic.accent.rest}","resolvedValue":"#1E2EFD"},{"path":"component.tag.activeHover","cssVar":"--component-tag-activeHover","type":"color","description":"Active tag hover fill color.","alias":"{semantic.accent.hover}","resolvedValue":"oklch(0.45 0.2903 266.54)"},{"path":"component.badge.fontSize","cssVar":"--component-badge-fontSize","type":"dimension","description":"Badge type size.","alias":"{primitive.typography.size.xs}","resolvedValue":"13px"},{"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":"#1E2EFD"},{"path":"component.button.bgHover","cssVar":"--component-button-bgHover","type":"color","description":"Primary button hover fill.","alias":"{semantic.accent.hover}","resolvedValue":"oklch(0.45 0.2903 266.54)"},{"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":"12px"},{"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 (13px).","alias":"{primitive.typography.size.xs}","resolvedValue":"13px"},{"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 (15px).","alias":"{primitive.typography.size.sm}","resolvedValue":"15px"},{"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 (17px).","alias":"{primitive.typography.size.base}","resolvedValue":"17px"},{"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":"oklch(0.96 0.03 266.54)"},{"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.default}","resolvedValue":"#e5e5e5"},{"path":"component.button.secondary.border.hover","cssVar":"--component-button-secondary-border-hover","type":"color","description":"Secondary button hover border.","alias":"{semantic.color.border.default}","resolvedValue":"#e5e5e5"},{"path":"component.button.secondary.border.pressed","cssVar":"--component-button-secondary-border-pressed","type":"color","description":"Secondary button pressed border.","alias":"{semantic.color.border.default}","resolvedValue":"#e5e5e5"},{"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.default}","resolvedValue":"#e5e5e5"},{"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":"12px"},{"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":"#1E2EFD"},{"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":"oklch(0.96 0.03 266.54)"},{"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":"#1E2EFD"},{"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.default}","resolvedValue":"#e5e5e5"},{"path":"role.ring","cssVar":"--role-ring","type":"color","description":"Focus ring color. shadcn role: ring.","alias":"{semantic.color.border.accent}","resolvedValue":"#1E2EFD"},{"path":"role.radius","cssVar":"--role-radius","type":"dimension","description":"Default border radius. shadcn role: radius.","alias":"{semantic.radius.action}","resolvedValue":"12px"}]}'), k = {
   name: e,
   description: t,
   version: "1",
   generated: o,
   source: a,
-  format: i,
-  docs: r,
+  format: r,
+  docs: i,
   llmsTxt: s,
   systemSpecs: n,
   architecture: p,
-  brand: c,
-  componentInventory: l,
+  brand: l,
+  componentInventory: c,
   typographyRamp: d,
   patternInventory: m,
   phases: u,
   health: g,
   inventory: h,
   agentEntrypoint: y,
-  breakingChangePolicy: f,
-  componentSpecs: v,
+  breakingChangePolicy: v,
+  componentSpecs: f,
   utilities: x,
   tokens: b
-}, P = k;
+}, w = k;
 export {
-  P as default
+  w as default
 };