@hirobius/design-system 0.12.0 → 0.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,7 @@
2
2
  "name": "Hirobius Design System",
3
3
  "description": "Three-tier design token system for Adrian Milsap's portfolio site. Tokens flow primitive → semantic → component. All visual decisions trace back to hirobius.tokens.json.",
4
4
  "version": "1",
5
- "generated": "2026-07-07T05:40:59.475Z",
5
+ "generated": "2026-09-19T21:10:47.474Z",
6
6
  "source": "hirobius.tokens.json",
7
7
  "format": "W3C DTCG 2025.10",
8
8
  "docs": "https://adrianmilsap.com/hds",
@@ -38,9 +38,11 @@
38
38
  "accentCount": 1
39
39
  },
40
40
  "componentInventory": [
41
+ "ActivityFeed",
41
42
  "Alert",
42
43
  "AlertDialog",
43
44
  "AspectRatio",
45
+ "AssetImg",
44
46
  "Avatar",
45
47
  "AvatarGroup",
46
48
  "Badge",
@@ -48,6 +50,7 @@
48
50
  "Blockquote",
49
51
  "Box",
50
52
  "Breadcrumb",
53
+ "Button",
51
54
  "ButtonGroup",
52
55
  "Calendar",
53
56
  "Callout",
@@ -82,6 +85,7 @@
82
85
  "Grid",
83
86
  "HdsCheckbox",
84
87
  "HdsRadio",
88
+ "HdsSelect",
85
89
  "HdsSlider",
86
90
  "HdsThemeProvider",
87
91
  "HdsToggle",
@@ -91,6 +95,7 @@
91
95
  "IconButton",
92
96
  "InlineCode",
93
97
  "InlineLink",
98
+ "Input",
94
99
  "InputGroup",
95
100
  "Kbd",
96
101
  "Lightbox",
@@ -113,6 +118,7 @@
113
118
  "SpecimenBlock",
114
119
  "Spinner",
115
120
  "Stack",
121
+ "StackedCardRail",
116
122
  "Stat",
117
123
  "StatusDot",
118
124
  "StatusListItem",
@@ -128,6 +134,7 @@
128
134
  "TabsTrigger",
129
135
  "Tag",
130
136
  "Text",
137
+ "Textarea",
131
138
  "TextLockup",
132
139
  "TileGrid",
133
140
  "TimeInput",
@@ -551,10 +558,6 @@
551
558
  {
552
559
  "name": "HdsLegacyTokenGovernancePanel",
553
560
  "filePath": "src/app/components/lab/legacy-token-detail.tsx"
554
- },
555
- {
556
- "name": "HdsSelect",
557
- "filePath": "src/app/components/select.tsx"
558
561
  }
559
562
  ],
560
563
  "namespaceViolations": [
@@ -693,7 +696,7 @@
693
696
  "hidden": false,
694
697
  "filePath": "src/app/components/alert.tsx",
695
698
  "description": "Alert - compact feedback surface with contextual severity.",
696
- "figmaUrl": null,
699
+ "figmaUrl": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34",
697
700
  "figmaId": null,
698
701
  "preview": {
699
702
  "exportName": "Alert",
@@ -702,7 +705,8 @@
702
705
  "consumers": [
703
706
  "src/app/components/componentPreviewRegistry.tsx",
704
707
  "src/app/data/hdsEditorial.tsx",
705
- "src/stories/alert.stories.tsx"
708
+ "src/stories/alert.stories.tsx",
709
+ "src/stories/static-primitives.stories.tsx"
706
710
  ],
707
711
  "tokenMapping": {
708
712
  "Success accent": "semantic.color.feedback.success",
@@ -715,42 +719,9 @@
715
719
  "Info surface fill": "semantic.color.feedback.bg.info",
716
720
  "Corner radius": "primitive.radius.4"
717
721
  },
718
- "props": {
719
- "variant": {
720
- "type": "enum",
721
- "values": [
722
- "info",
723
- "success",
724
- "warning",
725
- "error"
726
- ],
727
- "default": "info"
728
- },
729
- "title": {
730
- "type": "string",
731
- "optional": true
732
- },
733
- "children": {
734
- "type": "ReactNode"
735
- }
736
- },
737
722
  "allowedChildren": [
738
723
  "*"
739
724
  ],
740
- "propConstraints": {
741
- "variant": {
742
- "type": "enum",
743
- "values": [
744
- "info",
745
- "success",
746
- "warning",
747
- "error"
748
- ]
749
- },
750
- "title": {
751
- "type": "string"
752
- }
753
- },
754
725
  "requiredProps": [
755
726
  "children"
756
727
  ],
@@ -761,7 +732,7 @@
761
732
  }
762
733
  ],
763
734
  "variantAxes": [
764
- "variant"
735
+ "tone"
765
736
  ],
766
737
  "componentProperties": [
767
738
  {
@@ -810,7 +781,40 @@
810
781
  "tier": "primitive",
811
782
  "docExempt": false,
812
783
  "sourcePath": "src/app/components/Alert.tsx",
813
- "figmaLink": "TODO:hds-master:Alert"
784
+ "figmaLink": "https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34",
785
+ "props": {
786
+ "children": {
787
+ "type": "ReactNode"
788
+ },
789
+ "title": {
790
+ "type": "string",
791
+ "optional": true
792
+ },
793
+ "tone": {
794
+ "type": "enum",
795
+ "values": [
796
+ "success",
797
+ "danger",
798
+ "warning",
799
+ "info"
800
+ ],
801
+ "default": "info"
802
+ }
803
+ },
804
+ "propConstraints": {
805
+ "title": {
806
+ "type": "string"
807
+ },
808
+ "tone": {
809
+ "type": "enum",
810
+ "values": [
811
+ "success",
812
+ "danger",
813
+ "warning",
814
+ "info"
815
+ ]
816
+ }
817
+ }
814
818
  },
815
819
  "CinematicLink": {
816
820
  "category": "Branding",
@@ -850,7 +854,7 @@
850
854
  "tier": "primitive",
851
855
  "docExempt": false,
852
856
  "sourcePath": "src/app/components/CinematicLink.tsx",
853
- "figmaLink": "TODO:hds-master:CinematicLink"
857
+ "figmaLink": null
854
858
  },
855
859
  "CodeBlock": {
856
860
  "category": "Display",
@@ -918,7 +922,7 @@
918
922
  "tier": "primitive",
919
923
  "docExempt": false,
920
924
  "sourcePath": "src/app/components/CodeBlock.tsx",
921
- "figmaLink": "TODO:hds-master:CodeBlock"
925
+ "figmaLink": null
922
926
  },
923
927
  "Container": {
924
928
  "category": "Layout",
@@ -983,7 +987,7 @@
983
987
  "tier": "primitive",
984
988
  "docExempt": false,
985
989
  "sourcePath": "src/app/components/Container.tsx",
986
- "figmaLink": "TODO:hds-master:Container"
990
+ "figmaLink": null
987
991
  },
988
992
  "Disclosure": {
989
993
  "category": "Layout",
@@ -1098,7 +1102,7 @@
1098
1102
  }
1099
1103
  ],
1100
1104
  "sourcePath": "src/app/components/Disclosure.tsx",
1101
- "figmaLink": "TODO:hds-master:Disclosure"
1105
+ "figmaLink": null
1102
1106
  },
1103
1107
  "Divider": {
1104
1108
  "category": "Layout",
@@ -1117,18 +1121,39 @@
1117
1121
  "src/app/components/componentPreviewRegistry.tsx",
1118
1122
  "src/app/components/metadata-list.tsx",
1119
1123
  "src/app/data/hdsEditorial.tsx",
1120
- "src/stories/divider.stories.tsx"
1124
+ "src/stories/divider.stories.tsx",
1125
+ "src/stories/static-primitives.stories.tsx"
1121
1126
  ],
1122
1127
  "tokenMapping": {
1123
1128
  "Default stroke": "semantic.color.border.default",
1124
1129
  "Strong stroke": "semantic.color.border.strong",
1125
1130
  "Stroke thickness": "primitive.borderWidth.xs"
1126
1131
  },
1132
+ "allowedChildren": [],
1133
+ "requiredProps": [],
1134
+ "a11yRules": [],
1135
+ "variantAxes": [
1136
+ "orientation",
1137
+ "variant"
1138
+ ],
1139
+ "componentProperties": [],
1140
+ "states": [
1141
+ "default"
1142
+ ],
1143
+ "slots": [
1144
+ {
1145
+ "name": "line",
1146
+ "figmaSlotName": "Line",
1147
+ "tokenBinding": {
1148
+ "fill": "semantic.color.border.default"
1149
+ }
1150
+ }
1151
+ ],
1152
+ "tier": "primitive",
1153
+ "docExempt": false,
1154
+ "sourcePath": "src/app/components/Divider.tsx",
1155
+ "figmaLink": null,
1127
1156
  "props": {
1128
- "className": {
1129
- "type": "string",
1130
- "optional": true
1131
- },
1132
1157
  "orientation": {
1133
1158
  "type": "enum",
1134
1159
  "values": [
@@ -1143,18 +1168,18 @@
1143
1168
  },
1144
1169
  "strong": {
1145
1170
  "type": "boolean",
1146
- "default": false
1171
+ "optional": true
1147
1172
  },
1148
- "style": {
1149
- "type": "CSSProperties",
1173
+ "variant": {
1174
+ "type": "enum",
1175
+ "values": [
1176
+ "strong",
1177
+ "default"
1178
+ ],
1150
1179
  "optional": true
1151
1180
  }
1152
1181
  },
1153
- "allowedChildren": [],
1154
1182
  "propConstraints": {
1155
- "className": {
1156
- "type": "string"
1157
- },
1158
1183
  "orientation": {
1159
1184
  "type": "enum",
1160
1185
  "values": [
@@ -1164,30 +1189,15 @@
1164
1189
  },
1165
1190
  "strong": {
1166
1191
  "type": "boolean"
1192
+ },
1193
+ "variant": {
1194
+ "type": "enum",
1195
+ "values": [
1196
+ "strong",
1197
+ "default"
1198
+ ]
1167
1199
  }
1168
- },
1169
- "requiredProps": [],
1170
- "a11yRules": [],
1171
- "variantAxes": [
1172
- "orientation"
1173
- ],
1174
- "componentProperties": [],
1175
- "states": [
1176
- "default"
1177
- ],
1178
- "slots": [
1179
- {
1180
- "name": "line",
1181
- "figmaSlotName": "Line",
1182
- "tokenBinding": {
1183
- "fill": "semantic.color.border.default"
1184
- }
1185
- }
1186
- ],
1187
- "tier": "primitive",
1188
- "docExempt": false,
1189
- "sourcePath": "src/app/components/Divider.tsx",
1190
- "figmaLink": "TODO:hds-master:Divider"
1200
+ }
1191
1201
  },
1192
1202
  "DocLinkCard": {
1193
1203
  "category": "Navigation",
@@ -1228,7 +1238,7 @@
1228
1238
  "hidden": false,
1229
1239
  "docExempt": false,
1230
1240
  "figmaId": null,
1231
- "figmaLink": "TODO:hds-master:DocLinkCard",
1241
+ "figmaLink": null,
1232
1242
  "consumers": [
1233
1243
  "src/app/components/componentPreviewRegistry.tsx",
1234
1244
  "src/app/components/doc-link-card.test.tsx",
@@ -1444,7 +1454,7 @@
1444
1454
  }
1445
1455
  ],
1446
1456
  "sourcePath": "src/app/components/FoundationSwatch.tsx",
1447
- "figmaLink": "TODO:hds-master:FoundationSwatch"
1457
+ "figmaLink": null
1448
1458
  },
1449
1459
  "Grid": {
1450
1460
  "category": "Layout",
@@ -1568,7 +1578,7 @@
1568
1578
  "tier": "primitive",
1569
1579
  "docExempt": false,
1570
1580
  "sourcePath": "src/app/components/Grid.tsx",
1571
- "figmaLink": "TODO:hds-master:Grid"
1581
+ "figmaLink": null
1572
1582
  },
1573
1583
  "Icon": {
1574
1584
  "category": "Display",
@@ -1722,7 +1732,7 @@
1722
1732
  "tier": "primitive",
1723
1733
  "docExempt": false,
1724
1734
  "sourcePath": "src/app/components/Icon.tsx",
1725
- "figmaLink": "TODO:hds-master:Icon"
1735
+ "figmaLink": null
1726
1736
  },
1727
1737
  "IconButton": {
1728
1738
  "category": "Actions",
@@ -1852,7 +1862,7 @@
1852
1862
  }
1853
1863
  ],
1854
1864
  "sourcePath": "src/app/components/IconButton.tsx",
1855
- "figmaLink": "TODO:hds-master:IconButton"
1865
+ "figmaLink": null
1856
1866
  },
1857
1867
  "InlineCode": {
1858
1868
  "category": "Display",
@@ -1907,7 +1917,7 @@
1907
1917
  "tier": "primitive",
1908
1918
  "docExempt": false,
1909
1919
  "sourcePath": "src/app/components/InlineCode.tsx",
1910
- "figmaLink": "TODO:hds-master:InlineCode"
1920
+ "figmaLink": null
1911
1921
  },
1912
1922
  "InlineLink": {
1913
1923
  "category": "Navigation",
@@ -1966,7 +1976,7 @@
1966
1976
  "tier": "primitive",
1967
1977
  "docExempt": false,
1968
1978
  "sourcePath": "src/app/components/InlineLink.tsx",
1969
- "figmaLink": "TODO:hds-master:InlineLink"
1979
+ "figmaLink": null
1970
1980
  },
1971
1981
  "Input": {
1972
1982
  "category": "Inputs",
@@ -1974,7 +1984,7 @@
1974
1984
  "governedCategory": true,
1975
1985
  "hidden": false,
1976
1986
  "filePath": "src/app/components/input.tsx",
1977
- "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.",
1987
+ "description": "Input — text field primitive with label, helper, and error slots.",
1978
1988
  "figmaUrl": null,
1979
1989
  "figmaId": null,
1980
1990
  "preview": {
@@ -1983,13 +1993,17 @@
1983
1993
  },
1984
1994
  "consumers": [
1985
1995
  "src/app/components/componentPreviewRegistry.tsx",
1996
+ "src/app/components/form.tsx",
1997
+ "src/app/components/segmented-control.tsx",
1986
1998
  "src/app/components/stepper-field.tsx",
1999
+ "src/app/components/textarea.tsx",
2000
+ "src/app/components/time-input.tsx",
1987
2001
  "src/app/data/hdsEditorial.tsx",
1988
2002
  "src/app/design-system/generated-token-descriptions.ts",
1989
- "src/app/pages/docs/patterns/_template.tsx",
1990
- "src/app/pages/docs/patterns/HdsField.tsx",
1991
- "src/app/pages/sketches/private/CombatArenaLayout.tsx",
1992
- "src/stories/input.stories.tsx"
2003
+ "src/stories/combobox.stories.tsx",
2004
+ "src/stories/input.stories.tsx",
2005
+ "src/stories/patterns-layout.stories.tsx",
2006
+ "src/stories/textarea.stories.tsx"
1993
2007
  ],
1994
2008
  "tokenMapping": {
1995
2009
  "Surface fill": "role.background",
@@ -2074,15 +2088,8 @@
2074
2088
  "disabledText": "role.muted-foreground"
2075
2089
  },
2076
2090
  "figmaPropertyMapping": {
2077
- "type": "Type",
2078
2091
  "size": "Size",
2079
- "label": "Label",
2080
- "placeholder": "Placeholder",
2081
- "helperText": "Helper text",
2082
- "error": "Error",
2083
- "errorMessage": "Error message",
2084
- "disabled": "Disabled",
2085
- "loading": "Loading"
2092
+ "label": "Label"
2086
2093
  },
2087
2094
  "states": [
2088
2095
  "default",
@@ -2162,38 +2169,6 @@
2162
2169
  "sourceProp": "label",
2163
2170
  "boundTo": "characters",
2164
2171
  "targetSelector": "Label"
2165
- },
2166
- {
2167
- "name": "Placeholder",
2168
- "type": "TEXT",
2169
- "defaultValue": "Placeholder",
2170
- "sourceProp": "placeholder",
2171
- "boundTo": "characters",
2172
- "targetSelector": "Placeholder"
2173
- },
2174
- {
2175
- "name": "Helper text",
2176
- "type": "TEXT",
2177
- "defaultValue": "Helper text",
2178
- "sourceProp": "helperText",
2179
- "boundTo": "characters",
2180
- "targetSelector": "Helper"
2181
- },
2182
- {
2183
- "name": "Error",
2184
- "type": "BOOLEAN",
2185
- "defaultValue": false,
2186
- "sourceProp": "error",
2187
- "boundTo": "visibility",
2188
- "targetSelector": "Error"
2189
- },
2190
- {
2191
- "name": "Error message",
2192
- "type": "TEXT",
2193
- "defaultValue": "Error message",
2194
- "sourceProp": "errorMessage",
2195
- "boundTo": "characters",
2196
- "targetSelector": "Error"
2197
2172
  }
2198
2173
  ],
2199
2174
  "slots": [
@@ -2244,7 +2219,7 @@
2244
2219
  ],
2245
2220
  "tier": "primitive",
2246
2221
  "docExempt": false,
2247
- "figmaLink": "TODO:hds-master:Input"
2222
+ "figmaLink": null
2248
2223
  },
2249
2224
  "NavGroup": {
2250
2225
  "category": "Navigation",
@@ -2352,7 +2327,7 @@
2352
2327
  }
2353
2328
  ],
2354
2329
  "sourcePath": "src/app/components/NavGroup.tsx",
2355
- "figmaLink": "TODO:hds-master:NavGroup"
2330
+ "figmaLink": null
2356
2331
  },
2357
2332
  "NavItem": {
2358
2333
  "category": "Navigation",
@@ -2426,7 +2401,7 @@
2426
2401
  "tier": "primitive",
2427
2402
  "docExempt": false,
2428
2403
  "sourcePath": "src/app/components/NavItem.tsx",
2429
- "figmaLink": "TODO:hds-master:NavItem"
2404
+ "figmaLink": null
2430
2405
  },
2431
2406
  "SegmentedControl": {
2432
2407
  "category": "Inputs",
@@ -2525,7 +2500,7 @@
2525
2500
  "tier": "primitive",
2526
2501
  "docExempt": false,
2527
2502
  "sourcePath": "src/app/components/SegmentedControl.tsx",
2528
- "figmaLink": "TODO:hds-master:SegmentedControl"
2503
+ "figmaLink": null
2529
2504
  },
2530
2505
  "Sketch": {
2531
2506
  "category": "Layout",
@@ -2595,7 +2570,7 @@
2595
2570
  }
2596
2571
  ],
2597
2572
  "sourcePath": "src/app/components/Sketch.tsx",
2598
- "figmaLink": "TODO:hds-master:Sketch"
2573
+ "figmaLink": null
2599
2574
  },
2600
2575
  "Stack": {
2601
2576
  "category": "Layout",
@@ -2784,7 +2759,7 @@
2784
2759
  "tier": "primitive",
2785
2760
  "docExempt": false,
2786
2761
  "sourcePath": "src/app/components/Stack.tsx",
2787
- "figmaLink": "TODO:hds-master:Stack"
2762
+ "figmaLink": null
2788
2763
  },
2789
2764
  "StepperField": {
2790
2765
  "category": "Inputs",
@@ -2875,7 +2850,7 @@
2875
2850
  }
2876
2851
  ],
2877
2852
  "sourcePath": "src/app/components/StepperField.tsx",
2878
- "figmaLink": "TODO:hds-master:StepperField"
2853
+ "figmaLink": null
2879
2854
  },
2880
2855
  "Table": {
2881
2856
  "category": "Display",
@@ -2961,7 +2936,7 @@
2961
2936
  "tier": "primitive",
2962
2937
  "docExempt": false,
2963
2938
  "sourcePath": "src/app/components/Table.tsx",
2964
- "figmaLink": "TODO:hds-master:Table"
2939
+ "figmaLink": null
2965
2940
  },
2966
2941
  "Tag": {
2967
2942
  "category": "Inputs",
@@ -3000,6 +2975,7 @@
3000
2975
  "src/app/components/visually-hidden.tsx",
3001
2976
  "src/app/data/hdsEditorial.tsx",
3002
2977
  "src/app/design-system/generated-token-descriptions.ts",
2978
+ "src/stories/static-primitives.stories.tsx",
3003
2979
  "src/stories/tag.stories.tsx"
3004
2980
  ],
3005
2981
  "tokenMapping": {
@@ -3119,7 +3095,7 @@
3119
3095
  "tier": "primitive",
3120
3096
  "docExempt": false,
3121
3097
  "sourcePath": "src/app/components/Tag.tsx",
3122
- "figmaLink": "TODO:hds-master:Tag"
3098
+ "figmaLink": null
3123
3099
  },
3124
3100
  "Token": {
3125
3101
  "category": "Display",
@@ -3277,7 +3253,7 @@
3277
3253
  "tier": "primitive",
3278
3254
  "docExempt": false,
3279
3255
  "sourcePath": "src/app/components/Token.tsx",
3280
- "figmaLink": "TODO:hds-master:Token"
3256
+ "figmaLink": null
3281
3257
  },
3282
3258
  "Surface": {
3283
3259
  "category": "Layout",
@@ -3365,7 +3341,7 @@
3365
3341
  "tier": "primitive",
3366
3342
  "docExempt": true,
3367
3343
  "sourcePath": "src/app/components/Surface.tsx",
3368
- "figmaLink": "TODO:hds-master:Surface",
3344
+ "figmaLink": null,
3369
3345
  "states": [
3370
3346
  "default"
3371
3347
  ]
@@ -3391,7 +3367,8 @@
3391
3367
  "src/app/data/hdsEditorial.tsx",
3392
3368
  "src/app/design-system/generated-token-descriptions.ts",
3393
3369
  "src/stories/card.stories.tsx",
3394
- "src/stories/grid.stories.tsx"
3370
+ "src/stories/grid.stories.tsx",
3371
+ "src/stories/static-primitives.stories.tsx"
3395
3372
  ],
3396
3373
  "tokenMapping": {
3397
3374
  "Surface fill": "role.card",
@@ -3430,6 +3407,29 @@
3430
3407
  "type": "boolean",
3431
3408
  "default": false
3432
3409
  },
3410
+ "variant": {
3411
+ "type": "enum",
3412
+ "values": [
3413
+ "default",
3414
+ "accent"
3415
+ ],
3416
+ "default": "default"
3417
+ },
3418
+ "tone": {
3419
+ "type": "enum",
3420
+ "values": [
3421
+ "neutral",
3422
+ "danger",
3423
+ "success",
3424
+ "warning",
3425
+ "info"
3426
+ ],
3427
+ "default": "neutral"
3428
+ },
3429
+ "bordered": {
3430
+ "type": "boolean",
3431
+ "default": false
3432
+ },
3433
3433
  "className": {
3434
3434
  "type": "string",
3435
3435
  "optional": true
@@ -3447,7 +3447,9 @@
3447
3447
  },
3448
3448
  "figmaPropertyMapping": {
3449
3449
  "padding": "Padding",
3450
- "gap": "Gap"
3450
+ "gap": "Gap",
3451
+ "variant": "Variant",
3452
+ "tone": "Tone"
3451
3453
  },
3452
3454
  "states": [
3453
3455
  "default"
@@ -3455,49 +3457,6 @@
3455
3457
  "allowedChildren": [
3456
3458
  "*"
3457
3459
  ],
3458
- "propConstraints": {
3459
- "padding": {
3460
- "type": "enum",
3461
- "values": [
3462
- "component",
3463
- "item",
3464
- "none",
3465
- "px24",
3466
- "px16"
3467
- ]
3468
- },
3469
- "gap": {
3470
- "type": "enum",
3471
- "values": [
3472
- "tight",
3473
- "normal",
3474
- "inset",
3475
- "spacious"
3476
- ]
3477
- },
3478
- "noPadding": {
3479
- "type": "boolean"
3480
- },
3481
- "className": {
3482
- "type": "string"
3483
- },
3484
- "layout": {
3485
- "type": "enum",
3486
- "values": [
3487
- "VERTICAL",
3488
- "HORIZONTAL"
3489
- ]
3490
- },
3491
- "fill": {
3492
- "type": "string"
3493
- },
3494
- "stroke": {
3495
- "type": "string"
3496
- },
3497
- "radius": {
3498
- "type": "string"
3499
- }
3500
- },
3501
3460
  "requiredProps": [
3502
3461
  "children"
3503
3462
  ],
@@ -3507,7 +3466,9 @@
3507
3466
  "sizing": "panel"
3508
3467
  },
3509
3468
  "variantAxes": [
3510
- "padding"
3469
+ "padding",
3470
+ "variant",
3471
+ "tone"
3511
3472
  ],
3512
3473
  "componentProperties": [],
3513
3474
  "slots": [
@@ -3566,7 +3527,57 @@
3566
3527
  "Body",
3567
3528
  "Footer"
3568
3529
  ],
3569
- "figmaLink": "TODO:hds-master:Card"
3530
+ "figmaLink": null,
3531
+ "propConstraints": {
3532
+ "as": {
3533
+ "type": "string"
3534
+ },
3535
+ "padding": {
3536
+ "type": "enum",
3537
+ "values": [
3538
+ "component",
3539
+ "item",
3540
+ "none",
3541
+ "px24",
3542
+ "px16"
3543
+ ]
3544
+ },
3545
+ "gap": {
3546
+ "type": "enum",
3547
+ "values": [
3548
+ "tight",
3549
+ "normal",
3550
+ "inset",
3551
+ "spacious"
3552
+ ]
3553
+ },
3554
+ "noPadding": {
3555
+ "type": "boolean"
3556
+ },
3557
+ "variant": {
3558
+ "type": "enum",
3559
+ "values": [
3560
+ "default",
3561
+ "accent"
3562
+ ]
3563
+ },
3564
+ "tone": {
3565
+ "type": "enum",
3566
+ "values": [
3567
+ "neutral",
3568
+ "danger",
3569
+ "success",
3570
+ "warning",
3571
+ "info"
3572
+ ]
3573
+ },
3574
+ "bordered": {
3575
+ "type": "boolean"
3576
+ },
3577
+ "className": {
3578
+ "type": "string"
3579
+ }
3580
+ }
3570
3581
  },
3571
3582
  "ComponentInstanceMatrix": {
3572
3583
  "category": "Utilities",
@@ -3598,7 +3609,7 @@
3598
3609
  "variantAxes": [],
3599
3610
  "componentProperties": [],
3600
3611
  "sourcePath": "src/app/components/ComponentInstanceMatrix.tsx",
3601
- "figmaLink": "TODO:hds-master:ComponentInstanceMatrix"
3612
+ "figmaLink": null
3602
3613
  },
3603
3614
  "SpecimenBlock": {
3604
3615
  "category": "Utilities",
@@ -3630,15 +3641,15 @@
3630
3641
  "variantAxes": [],
3631
3642
  "componentProperties": [],
3632
3643
  "sourcePath": "src/app/components/SpecimenBlock.tsx",
3633
- "figmaLink": "TODO:hds-master:SpecimenBlock"
3644
+ "figmaLink": null
3634
3645
  },
3635
3646
  "ActivityFeed": {
3636
- "category": "Uncategorized",
3637
- "categorySource": "missing-jsdoc",
3638
- "governedCategory": false,
3647
+ "category": "Display",
3648
+ "categorySource": "jsdoc",
3649
+ "governedCategory": true,
3639
3650
  "hidden": false,
3640
3651
  "filePath": "src/app/components/activity-feed.tsx",
3641
- "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.",
3652
+ "description": "ActivityFeed — chronological system event log. Renders a list of activity events using white space as the sole separator. No dividers, no borders between items. 48px gap (space.12) creates the visual grouping between events; 16px gap inside each item structures the content hierarchy. Typography mapping: title → heading3 (24px/1.25) description → body (16px/1.5) timestamp → technical (12px/1.0 mono) category → ui (14px/1.5)",
3642
3653
  "figmaUrl": null,
3643
3654
  "figmaId": null,
3644
3655
  "preview": {
@@ -3706,7 +3717,7 @@
3706
3717
  }
3707
3718
  ],
3708
3719
  "sourcePath": "src/app/components/ActivityFeed.tsx",
3709
- "figmaLink": "TODO:hds-master:ActivityFeed"
3720
+ "figmaLink": null
3710
3721
  },
3711
3722
  "HeadingStack": {
3712
3723
  "category": "Typography",
@@ -3768,12 +3779,12 @@
3768
3779
  "targetSelector": "Heading"
3769
3780
  },
3770
3781
  {
3771
- "name": "Subtext",
3782
+ "name": "Subheading",
3772
3783
  "type": "TEXT",
3773
- "defaultValue": "Supporting subtext",
3774
- "sourceProp": "subtext",
3784
+ "defaultValue": "Supporting subheading",
3785
+ "sourceProp": "subheading",
3775
3786
  "boundTo": "characters",
3776
- "targetSelector": "Subtext"
3787
+ "targetSelector": "Subheading"
3777
3788
  }
3778
3789
  ],
3779
3790
  "states": [
@@ -3805,7 +3816,7 @@
3805
3816
  "tier": "primitive",
3806
3817
  "docExempt": true,
3807
3818
  "sourcePath": "src/app/components/HeadingStack.tsx",
3808
- "figmaLink": "TODO:hds-master:HeadingStack"
3819
+ "figmaLink": null
3809
3820
  },
3810
3821
  "HdsSystemDocLayout": {
3811
3822
  "category": "Uncategorized",
@@ -3975,7 +3986,7 @@
3975
3986
  "tier": "primitive",
3976
3987
  "docExempt": true,
3977
3988
  "sourcePath": "src/app/components/Text.tsx",
3978
- "figmaLink": "TODO:hds-master:Text"
3989
+ "figmaLink": null
3979
3990
  },
3980
3991
  "Dialog": {
3981
3992
  "category": "Overlays",
@@ -4015,7 +4026,7 @@
4015
4026
  "name": "Title",
4016
4027
  "type": "TEXT",
4017
4028
  "defaultValue": "Dialog title",
4018
- "sourceProp": "title",
4029
+ "sourceProp": "Title.children",
4019
4030
  "boundTo": "characters",
4020
4031
  "targetSelector": "Title"
4021
4032
  },
@@ -4023,15 +4034,15 @@
4023
4034
  "name": "Description",
4024
4035
  "type": "TEXT",
4025
4036
  "defaultValue": "Dialog description",
4026
- "sourceProp": "description",
4037
+ "sourceProp": "Description.children",
4027
4038
  "boundTo": "characters",
4028
4039
  "targetSelector": "Description"
4029
4040
  },
4030
4041
  {
4031
- "name": "Hide close",
4042
+ "name": "Show close",
4032
4043
  "type": "BOOLEAN",
4033
- "defaultValue": false,
4034
- "sourceProp": "hideClose",
4044
+ "defaultValue": true,
4045
+ "sourceProp": "Content.hideClose",
4035
4046
  "boundTo": "visibility",
4036
4047
  "targetSelector": "Close",
4037
4048
  "invert": true
@@ -4052,18 +4063,6 @@
4052
4063
  "type": "boolean",
4053
4064
  "default": true
4054
4065
  },
4055
- "title": {
4056
- "type": "string",
4057
- "optional": true
4058
- },
4059
- "description": {
4060
- "type": "string",
4061
- "optional": true
4062
- },
4063
- "hideClose": {
4064
- "type": "boolean",
4065
- "default": false
4066
- },
4067
4066
  "children": {
4068
4067
  "type": "ReactNode"
4069
4068
  }
@@ -4081,9 +4080,9 @@
4081
4080
  "focusRing": "role.ring"
4082
4081
  },
4083
4082
  "figmaPropertyMapping": {
4084
- "title": "Title",
4085
- "description": "Description",
4086
- "hideClose": "Hide close",
4083
+ "Title.children": "Title",
4084
+ "Description.children": "Description",
4085
+ "Content.hideClose": "Show close",
4087
4086
  "modal": "Modal"
4088
4087
  },
4089
4088
  "states": [
@@ -4148,26 +4147,6 @@
4148
4147
  "allowedChildren": [
4149
4148
  "*"
4150
4149
  ],
4151
- "propConstraints": {
4152
- "open": {
4153
- "type": "boolean"
4154
- },
4155
- "defaultOpen": {
4156
- "type": "boolean"
4157
- },
4158
- "modal": {
4159
- "type": "boolean"
4160
- },
4161
- "title": {
4162
- "type": "string"
4163
- },
4164
- "description": {
4165
- "type": "string"
4166
- },
4167
- "hideClose": {
4168
- "type": "boolean"
4169
- }
4170
- },
4171
4150
  "requiredProps": [
4172
4151
  "children"
4173
4152
  ],
@@ -4192,7 +4171,18 @@
4192
4171
  "Description",
4193
4172
  "Close"
4194
4173
  ],
4195
- "figmaLink": "TODO:hds-master:Dialog"
4174
+ "figmaLink": null,
4175
+ "propConstraints": {
4176
+ "open": {
4177
+ "type": "boolean"
4178
+ },
4179
+ "defaultOpen": {
4180
+ "type": "boolean"
4181
+ },
4182
+ "modal": {
4183
+ "type": "boolean"
4184
+ }
4185
+ }
4196
4186
  },
4197
4187
  "StackedCardRail": {
4198
4188
  "category": "Display",
@@ -4204,7 +4194,7 @@
4204
4194
  "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(+ *)).",
4205
4195
  "figmaUrl": null,
4206
4196
  "figmaId": null,
4207
- "figmaLink": "TODO:hds-master:StackedCardRail",
4197
+ "figmaLink": null,
4208
4198
  "tier": "pattern",
4209
4199
  "preview": {
4210
4200
  "exportName": "StackedCardRail",
@@ -4237,7 +4227,7 @@
4237
4227
  "description": "Triggers an action when activated.",
4238
4228
  "figmaUrl": null,
4239
4229
  "figmaId": null,
4240
- "figmaLink": "TODO:hds-master:Button",
4230
+ "figmaLink": null,
4241
4231
  "tier": "primitive",
4242
4232
  "preview": {
4243
4233
  "exportName": "Button",
@@ -4245,40 +4235,58 @@
4245
4235
  },
4246
4236
  "consumers": [
4247
4237
  "src/app/components/activity-feed.tsx",
4238
+ "src/app/components/alert-dialog.tsx",
4248
4239
  "src/app/components/animated-label.tsx",
4249
4240
  "src/app/components/api-reference.tsx",
4250
- "src/app/components/approval-card.tsx",
4251
- "src/app/components/ComponentDocPage.tsx",
4241
+ "src/app/components/button-group.test.tsx",
4242
+ "src/app/components/button-group.tsx",
4243
+ "src/app/components/card.tsx",
4252
4244
  "src/app/components/componentPreviewRegistry.tsx",
4253
4245
  "src/app/components/dialog.tsx",
4254
- "src/app/components/doc-sections.tsx",
4255
4246
  "src/app/components/error-boundary.tsx",
4256
4247
  "src/app/components/error-pattern.tsx",
4248
+ "src/app/components/form.tsx",
4257
4249
  "src/app/components/icon-button.tsx",
4258
4250
  "src/app/components/image-lightbox.tsx",
4251
+ "src/app/components/menu.tsx",
4252
+ "src/app/components/multi-selector.tsx",
4253
+ "src/app/components/pagination.tsx",
4254
+ "src/app/components/popover.tsx",
4255
+ "src/app/components/segmented-control.tsx",
4259
4256
  "src/app/components/sketch-controls.tsx",
4257
+ "src/app/components/toast.tsx",
4258
+ "src/app/components/toolbar.test.tsx",
4259
+ "src/app/components/toolbar.tsx",
4260
4260
  "src/app/components/variant-strip.tsx",
4261
4261
  "src/app/context/DemoStateContext.tsx",
4262
- "src/app/data/projects.ts",
4263
4262
  "src/app/design-system/generated-token-descriptions.ts",
4264
- "src/app/design-system/searchIndex.ts",
4265
- "src/app/lab/shadcn-spike/Button.tsx",
4266
- "src/app/lab/shadcn-spike/page.tsx",
4267
- "src/app/pages/admin/ApprovalDetail.tsx",
4268
- "src/app/pages/docs/patterns/HdsActivityFeed.tsx",
4269
- "src/app/pages/docs/patterns/HdsIconButton.tsx",
4270
- "src/app/pages/sketches/private/MetaballsLayout.tsx",
4271
- "src/app/pages/sketches/private/ShapeExplorerLayout.tsx",
4272
- "src/app/pages/sketches/private/WaveBackgroundLayout.tsx",
4263
+ "src/form/index.ts",
4264
+ "src/mui/index.ts",
4265
+ "src/stories/alert-dialog.stories.tsx",
4266
+ "src/stories/button-group.stories.tsx",
4273
4267
  "src/stories/button.stories.tsx",
4268
+ "src/stories/code-block.stories.tsx",
4269
+ "src/stories/combobox.stories.tsx",
4270
+ "src/stories/dialog.stories.tsx",
4271
+ "src/stories/form.stories.tsx",
4272
+ "src/stories/hds-tooltip.stories.tsx",
4274
4273
  "src/stories/icon-button.stories.tsx",
4274
+ "src/stories/image-lightbox.stories.tsx",
4275
4275
  "src/stories/inline-code.stories.tsx",
4276
+ "src/stories/menu.stories.tsx",
4277
+ "src/stories/nav-group.stories.tsx",
4278
+ "src/stories/patterns-layout.stories.tsx",
4279
+ "src/stories/popover.stories.tsx",
4276
4280
  "src/stories/table.stories.tsx",
4277
- "src/stories/text-lockup.stories.tsx"
4281
+ "src/stories/text-lockup.stories.tsx",
4282
+ "src/stories/toast.stories.tsx",
4283
+ "src/stories/toolbar.stories.tsx",
4284
+ "src/stories/top-nav.stories.tsx"
4278
4285
  ],
4279
4286
  "tokenMapping": {},
4280
4287
  "variantAxes": [
4281
4288
  "variant",
4289
+ "tone",
4282
4290
  "size",
4283
4291
  "state"
4284
4292
  ],
@@ -4292,7 +4300,7 @@
4292
4300
  "targetSelector": "Label"
4293
4301
  },
4294
4302
  {
4295
- "name": "Leading icon",
4303
+ "name": "Show icon",
4296
4304
  "type": "BOOLEAN",
4297
4305
  "defaultValue": false,
4298
4306
  "sourceProp": "iconLeft",
@@ -4300,21 +4308,12 @@
4300
4308
  "targetSelector": "IconLeft"
4301
4309
  },
4302
4310
  {
4303
- "name": "Trailing icon",
4311
+ "name": "Show trail icon",
4304
4312
  "type": "BOOLEAN",
4305
4313
  "defaultValue": false,
4306
4314
  "sourceProp": "iconRight",
4307
4315
  "boundTo": "visibility",
4308
4316
  "targetSelector": "IconRight"
4309
- },
4310
- {
4311
- "name": "Show label",
4312
- "type": "BOOLEAN",
4313
- "defaultValue": true,
4314
- "sourceProp": "iconOnly",
4315
- "boundTo": "visibility",
4316
- "targetSelector": "Label",
4317
- "invert": true
4318
4317
  }
4319
4318
  ],
4320
4319
  "sourcePath": "src/app/components/button.tsx",
@@ -4329,6 +4328,17 @@
4329
4328
  ],
4330
4329
  "default": "secondary"
4331
4330
  },
4331
+ "tone": {
4332
+ "type": "enum",
4333
+ "values": [
4334
+ "neutral",
4335
+ "danger",
4336
+ "success",
4337
+ "warning",
4338
+ "info"
4339
+ ],
4340
+ "default": "neutral"
4341
+ },
4332
4342
  "size": {
4333
4343
  "type": "enum",
4334
4344
  "values": [
@@ -4374,13 +4384,11 @@
4374
4384
  },
4375
4385
  "figmaPropertyMapping": {
4376
4386
  "variant": "Variant",
4387
+ "tone": "Tone",
4377
4388
  "size": "Size",
4378
- "disabled": "Disabled",
4379
- "loading": "Loading",
4380
4389
  "label": "Label",
4381
- "iconLeft": "Leading icon",
4382
- "iconRight": "Trailing icon",
4383
- "iconOnly": "Icon only"
4390
+ "iconLeft": "Show icon",
4391
+ "iconRight": "Show trail icon"
4384
4392
  },
4385
4393
  "states": [
4386
4394
  "default",
@@ -4391,6 +4399,17 @@
4391
4399
  "loading"
4392
4400
  ],
4393
4401
  "allowedChildren": [],
4402
+ "requiredProps": [],
4403
+ "a11yRules": [
4404
+ {
4405
+ "rule": "Must have accessible name via label prop or aria-label",
4406
+ "required": true
4407
+ },
4408
+ {
4409
+ "rule": "Focus ring visible in all interactive states (uses hds-focus class)",
4410
+ "required": true
4411
+ }
4412
+ ],
4394
4413
  "propConstraints": {
4395
4414
  "variant": {
4396
4415
  "type": "enum",
@@ -4400,6 +4419,16 @@
4400
4419
  "tertiary"
4401
4420
  ]
4402
4421
  },
4422
+ "tone": {
4423
+ "type": "enum",
4424
+ "values": [
4425
+ "neutral",
4426
+ "danger",
4427
+ "success",
4428
+ "warning",
4429
+ "info"
4430
+ ]
4431
+ },
4403
4432
  "size": {
4404
4433
  "type": "enum",
4405
4434
  "values": [
@@ -4420,18 +4449,7 @@
4420
4449
  "iconOnly": {
4421
4450
  "type": "boolean"
4422
4451
  }
4423
- },
4424
- "requiredProps": [],
4425
- "a11yRules": [
4426
- {
4427
- "rule": "Must have accessible name via label prop or aria-label",
4428
- "required": true
4429
- },
4430
- {
4431
- "rule": "Focus ring visible in all interactive states (uses hds-focus class)",
4432
- "required": true
4433
- }
4434
- ]
4452
+ }
4435
4453
  },
4436
4454
  "Callout": {
4437
4455
  "category": "Feedback",
@@ -4443,7 +4461,7 @@
4443
4461
  "description": "Tone-driven side-rule callout for status, quotes, hypotheses.",
4444
4462
  "figmaUrl": null,
4445
4463
  "figmaId": null,
4446
- "figmaLink": "TODO:hds-master:Callout",
4464
+ "figmaLink": null,
4447
4465
  "tier": "primitive",
4448
4466
  "preview": {
4449
4467
  "exportName": "Callout",
@@ -4508,7 +4526,7 @@
4508
4526
  "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.",
4509
4527
  "figmaUrl": null,
4510
4528
  "figmaId": null,
4511
- "figmaLink": "TODO:hds-master:EmptyState",
4529
+ "figmaLink": null,
4512
4530
  "tier": "primitive",
4513
4531
  "preview": {
4514
4532
  "exportName": "EmptyState",
@@ -4552,7 +4570,7 @@
4552
4570
  "description": "Caption label paired with a value — used in metadata grids and read-only forms.",
4553
4571
  "figmaUrl": null,
4554
4572
  "figmaId": null,
4555
- "figmaLink": "TODO:hds-master:Field",
4573
+ "figmaLink": null,
4556
4574
  "tier": "primitive",
4557
4575
  "preview": {
4558
4576
  "exportName": "Field",
@@ -4634,7 +4652,7 @@
4634
4652
  "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>",
4635
4653
  "figmaUrl": null,
4636
4654
  "figmaId": null,
4637
- "figmaLink": "TODO:hds-master:Page",
4655
+ "figmaLink": null,
4638
4656
  "tier": "primitive",
4639
4657
  "preview": {
4640
4658
  "exportName": "Page",
@@ -4703,7 +4721,7 @@
4703
4721
  "description": "Headline metric — large value, uppercase caption label, optional sub-line.",
4704
4722
  "figmaUrl": null,
4705
4723
  "figmaId": null,
4706
- "figmaLink": "TODO:hds-master:Stat",
4724
+ "figmaLink": null,
4707
4725
  "tier": "primitive",
4708
4726
  "preview": {
4709
4727
  "exportName": "Stat",
@@ -4773,7 +4791,7 @@
4773
4791
  "description": "Status dot + title row with optional muted notes and trailing slot (e.g. badge).",
4774
4792
  "figmaUrl": null,
4775
4793
  "figmaId": null,
4776
- "figmaLink": "TODO:hds-master:StatusListItem",
4794
+ "figmaLink": null,
4777
4795
  "tier": "pattern",
4778
4796
  "preview": {
4779
4797
  "exportName": "StatusListItem",
@@ -4843,7 +4861,7 @@
4843
4861
  "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.",
4844
4862
  "figmaUrl": null,
4845
4863
  "figmaId": null,
4846
- "figmaLink": "TODO:hds-master:StatusTile",
4864
+ "figmaLink": null,
4847
4865
  "tier": "pattern",
4848
4866
  "preview": {
4849
4867
  "exportName": "StatusTile",
@@ -4897,7 +4915,7 @@
4897
4915
  "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.",
4898
4916
  "figmaUrl": null,
4899
4917
  "figmaId": null,
4900
- "figmaLink": "TODO:hds-master:TileGrid",
4918
+ "figmaLink": null,
4901
4919
  "tier": "primitive",
4902
4920
  "preview": {
4903
4921
  "exportName": "TileGrid",
@@ -4963,7 +4981,7 @@
4963
4981
  "docExempt": false,
4964
4982
  "figmaUrl": null,
4965
4983
  "figmaId": null,
4966
- "figmaLink": "TODO:hds-master:Badge",
4984
+ "figmaLink": null,
4967
4985
  "tier": "primitive",
4968
4986
  "preview": {
4969
4987
  "exportName": "Badge",
@@ -4983,12 +5001,15 @@
4983
5001
  "src/stories/component-instance-matrix.stories.tsx",
4984
5002
  "src/stories/nav-group.stories.tsx",
4985
5003
  "src/stories/patterns-layout.stories.tsx",
5004
+ "src/stories/static-primitives.stories.tsx",
4986
5005
  "src/stories/table.stories.tsx"
4987
5006
  ],
4988
5007
  "tokenMapping": {}
4989
5008
  },
4990
5009
  "TextLockup": {
4991
- "variantAxes": [],
5010
+ "variantAxes": [
5011
+ "size"
5012
+ ],
4992
5013
  "componentProperties": [
4993
5014
  {
4994
5015
  "name": "Eyebrow",
@@ -5032,7 +5053,7 @@
5032
5053
  "docExempt": false,
5033
5054
  "figmaUrl": null,
5034
5055
  "figmaId": "text-lockup-pattern",
5035
- "figmaLink": "TODO:hds-master:TextLockup",
5056
+ "figmaLink": null,
5036
5057
  "tier": "pattern",
5037
5058
  "preview": {
5038
5059
  "exportName": "TextLockup",
@@ -5054,7 +5075,7 @@
5054
5075
  "description": "AssetImg - responsive asset frame with fallback placeholder handling. Contexts: default, lightbox, and detail.",
5055
5076
  "figmaUrl": null,
5056
5077
  "figmaId": null,
5057
- "figmaLink": "TODO:hds-master:AssetImg",
5078
+ "figmaLink": null,
5058
5079
  "tier": "primitive",
5059
5080
  "preview": {
5060
5081
  "exportName": "AssetImg",
@@ -5062,10 +5083,11 @@
5062
5083
  },
5063
5084
  "consumers": [
5064
5085
  "src/app/components/componentPreviewRegistry.tsx",
5086
+ "src/app/components/hds-tooltip.tsx",
5065
5087
  "src/app/components/image-lightbox.tsx",
5066
- "src/app/components/info-page.tsx",
5067
5088
  "src/app/components/tooltip.tsx",
5068
- "src/app/data/hdsEditorial.tsx"
5089
+ "src/app/data/hdsEditorial.tsx",
5090
+ "src/stories/asset-img.stories.tsx"
5069
5091
  ],
5070
5092
  "tokenMapping": {},
5071
5093
  "variantAxes": [],
@@ -5218,7 +5240,7 @@
5218
5240
  "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).",
5219
5241
  "figmaUrl": null,
5220
5242
  "figmaId": null,
5221
- "figmaLink": "TODO:hds-master:Tabs",
5243
+ "figmaLink": null,
5222
5244
  "tier": "primitive",
5223
5245
  "preview": {
5224
5246
  "exportName": "Tabs",
@@ -5254,7 +5276,7 @@
5254
5276
  "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).",
5255
5277
  "figmaUrl": null,
5256
5278
  "figmaId": null,
5257
- "figmaLink": "TODO:hds-master:TabsContent",
5279
+ "figmaLink": null,
5258
5280
  "tier": "primitive",
5259
5281
  "preview": {
5260
5282
  "exportName": "TabsContent",
@@ -5289,7 +5311,7 @@
5289
5311
  "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).",
5290
5312
  "figmaUrl": null,
5291
5313
  "figmaId": null,
5292
- "figmaLink": "TODO:hds-master:TabsList",
5314
+ "figmaLink": null,
5293
5315
  "tier": "primitive",
5294
5316
  "preview": {
5295
5317
  "exportName": "TabsList",
@@ -5324,7 +5346,7 @@
5324
5346
  "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).",
5325
5347
  "figmaUrl": null,
5326
5348
  "figmaId": null,
5327
- "figmaLink": "TODO:hds-master:TabsTrigger",
5349
+ "figmaLink": null,
5328
5350
  "tier": "primitive",
5329
5351
  "preview": {
5330
5352
  "exportName": "TabsTrigger",
@@ -5405,15 +5427,15 @@
5405
5427
  "componentProperties": [],
5406
5428
  "tier": "primitive",
5407
5429
  "docExempt": false,
5408
- "figmaLink": "TODO:hds-master:HdsRadio"
5430
+ "figmaLink": null
5409
5431
  },
5410
5432
  "HdsSelect": {
5411
- "category": "Uncategorized",
5412
- "categorySource": "missing-jsdoc",
5413
- "governedCategory": false,
5433
+ "category": "Inputs",
5434
+ "categorySource": "jsdoc",
5435
+ "governedCategory": true,
5414
5436
  "hidden": false,
5415
5437
  "filePath": "src/app/components/select.tsx",
5416
- "description": "Controls — shared input/control primitives.",
5438
+ "description": "HdsSelect — dropdown selector built on Radix Select.",
5417
5439
  "figmaUrl": null,
5418
5440
  "figmaId": null,
5419
5441
  "preview": {
@@ -5463,7 +5485,7 @@
5463
5485
  "componentProperties": [],
5464
5486
  "tier": "primitive",
5465
5487
  "docExempt": false,
5466
- "figmaLink": "TODO:hds-master:HdsSelect"
5488
+ "figmaLink": null
5467
5489
  },
5468
5490
  "HdsSlider": {
5469
5491
  "category": "Inputs",
@@ -5521,7 +5543,7 @@
5521
5543
  "componentProperties": [],
5522
5544
  "tier": "primitive",
5523
5545
  "docExempt": false,
5524
- "figmaLink": "TODO:hds-master:HdsSlider"
5546
+ "figmaLink": null
5525
5547
  },
5526
5548
  "HdsToggle": {
5527
5549
  "category": "Inputs",
@@ -5581,7 +5603,7 @@
5581
5603
  "componentProperties": [],
5582
5604
  "tier": "primitive",
5583
5605
  "docExempt": false,
5584
- "figmaLink": "TODO:hds-master:HdsToggle"
5606
+ "figmaLink": null
5585
5607
  },
5586
5608
  "Avatar": {
5587
5609
  "category": "Display",
@@ -5593,7 +5615,7 @@
5593
5615
  "description": "Circular avatar. Renders the image when available, else initials from `alt`.",
5594
5616
  "figmaUrl": null,
5595
5617
  "figmaId": null,
5596
- "figmaLink": "TODO:hds-master:Avatar",
5618
+ "figmaLink": null,
5597
5619
  "tier": "primitive",
5598
5620
  "preview": {
5599
5621
  "exportName": "Avatar",
@@ -5607,7 +5629,9 @@
5607
5629
  "src/stories/avatar.stories.tsx"
5608
5630
  ],
5609
5631
  "tokenMapping": {},
5610
- "variantAxes": [],
5632
+ "variantAxes": [
5633
+ "size"
5634
+ ],
5611
5635
  "componentProperties": [],
5612
5636
  "props": {
5613
5637
  "alt": {
@@ -5648,7 +5672,7 @@
5648
5672
  "description": "Linear progress. Determinate when `value` is a number, else indeterminate.",
5649
5673
  "figmaUrl": null,
5650
5674
  "figmaId": null,
5651
- "figmaLink": "TODO:hds-master:Progress",
5675
+ "figmaLink": null,
5652
5676
  "tier": "primitive",
5653
5677
  "preview": {
5654
5678
  "exportName": "Progress",
@@ -5700,7 +5724,7 @@
5700
5724
  "description": "Decorative loading placeholder. Marked aria-hidden — announce the loading state on the surrounding region (e.g. aria-busy) rather than per skeleton.",
5701
5725
  "figmaUrl": null,
5702
5726
  "figmaId": null,
5703
- "figmaLink": "TODO:hds-master:Skeleton",
5727
+ "figmaLink": null,
5704
5728
  "tier": "primitive",
5705
5729
  "preview": {
5706
5730
  "exportName": "Skeleton",
@@ -5709,6 +5733,7 @@
5709
5733
  "consumers": [
5710
5734
  "src/app/components/skeleton.test.tsx",
5711
5735
  "src/stories/patterns-layout.stories.tsx",
5736
+ "src/stories/patterns-scroll.stories.tsx",
5712
5737
  "src/stories/skeleton.stories.tsx"
5713
5738
  ],
5714
5739
  "tokenMapping": {},
@@ -5750,7 +5775,7 @@
5750
5775
  "description": "Indeterminate spinner. Inherits the surrounding text color via currentColor.",
5751
5776
  "figmaUrl": null,
5752
5777
  "figmaId": null,
5753
- "figmaLink": "TODO:hds-master:Spinner",
5778
+ "figmaLink": null,
5754
5779
  "tier": "primitive",
5755
5780
  "preview": {
5756
5781
  "exportName": "Spinner",
@@ -5795,7 +5820,7 @@
5795
5820
  "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\".",
5796
5821
  "figmaUrl": null,
5797
5822
  "figmaId": null,
5798
- "figmaLink": "TODO:hds-master:Breadcrumb",
5823
+ "figmaLink": null,
5799
5824
  "tier": "pattern",
5800
5825
  "preview": {
5801
5826
  "exportName": "Breadcrumb",
@@ -5835,7 +5860,7 @@
5835
5860
  "description": "Paged navigation with first/last anchors, sibling pages, and ellipses.",
5836
5861
  "figmaUrl": null,
5837
5862
  "figmaId": null,
5838
- "figmaLink": "TODO:hds-master:Pagination",
5863
+ "figmaLink": null,
5839
5864
  "tier": "pattern",
5840
5865
  "preview": {
5841
5866
  "exportName": "Pagination",
@@ -5897,9 +5922,10 @@
5897
5922
  "docExempt": false,
5898
5923
  "figmaUrl": null,
5899
5924
  "figmaId": null,
5900
- "figmaLink": "TODO:hds-master:HdsCheckbox",
5925
+ "figmaLink": null,
5901
5926
  "consumers": [
5902
5927
  "src/app/components/checkbox.test.tsx",
5928
+ "src/app/components/radio.tsx",
5903
5929
  "src/stories/checkbox.stories.tsx"
5904
5930
  ],
5905
5931
  "variantAxes": [],
@@ -5915,7 +5941,7 @@
5915
5941
  "description": "Provider + viewport for the toast system. Wrap the app root once.",
5916
5942
  "figmaUrl": null,
5917
5943
  "figmaId": null,
5918
- "figmaLink": "TODO:hds-master:ToastProvider",
5944
+ "figmaLink": null,
5919
5945
  "tier": "pattern",
5920
5946
  "preview": {
5921
5947
  "exportName": "ToastProvider",
@@ -5955,7 +5981,7 @@
5955
5981
  "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\" />",
5956
5982
  "figmaUrl": null,
5957
5983
  "figmaId": null,
5958
- "figmaLink": "TODO:hds-master:Combobox",
5984
+ "figmaLink": null,
5959
5985
  "tier": "pattern",
5960
5986
  "preview": {
5961
5987
  "exportName": "Combobox",
@@ -6024,7 +6050,7 @@
6024
6050
  "description": "Styled `<form>` with consistent vertical field rhythm.",
6025
6051
  "figmaUrl": null,
6026
6052
  "figmaId": null,
6027
- "figmaLink": "TODO:hds-master:Form",
6053
+ "figmaLink": null,
6028
6054
  "tier": "pattern",
6029
6055
  "preview": {
6030
6056
  "exportName": "Form",
@@ -6060,7 +6086,7 @@
6060
6086
  "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.",
6061
6087
  "figmaUrl": null,
6062
6088
  "figmaId": null,
6063
- "figmaLink": "TODO:hds-master:FormField",
6089
+ "figmaLink": null,
6064
6090
  "tier": "pattern",
6065
6091
  "preview": {
6066
6092
  "exportName": "FormField",
@@ -6121,7 +6147,7 @@
6121
6147
  "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.",
6122
6148
  "figmaUrl": null,
6123
6149
  "figmaId": null,
6124
- "figmaLink": "TODO:hds-master:FormFieldShell",
6150
+ "figmaLink": null,
6125
6151
  "tier": "pattern",
6126
6152
  "preview": {
6127
6153
  "exportName": "FormFieldShell",
@@ -6177,7 +6203,7 @@
6177
6203
  "description": "Renders a `data-hds` scope wrapper that carries the four theming dials as root attributes + CSS vars, and exposes them to `useHdsTheme()`.",
6178
6204
  "figmaUrl": null,
6179
6205
  "figmaId": null,
6180
- "figmaLink": "TODO:hds-master:HdsThemeProvider",
6206
+ "figmaLink": null,
6181
6207
  "tier": "primitive",
6182
6208
  "preview": {
6183
6209
  "exportName": "HdsThemeProvider",
@@ -6249,14 +6275,13 @@
6249
6275
  "description": "Renders up to `max` overlapping avatars followed by a `+N` overflow chip.",
6250
6276
  "figmaUrl": null,
6251
6277
  "figmaId": null,
6252
- "figmaLink": "TODO:hds-master:AvatarGroup",
6278
+ "figmaLink": null,
6253
6279
  "tier": "primitive",
6254
6280
  "preview": {
6255
6281
  "exportName": "AvatarGroup",
6256
6282
  "sizing": "panel"
6257
6283
  },
6258
6284
  "consumers": [
6259
- "src/app/components/avatar-group.figma.tsx",
6260
6285
  "src/app/components/avatar-group.test.tsx",
6261
6286
  "src/stories/avatar-group.stories.tsx"
6262
6287
  ],
@@ -6293,14 +6318,13 @@
6293
6318
  "description": "A quoted passage; pass `cite` for the source URL and `attribution` for a byline.",
6294
6319
  "figmaUrl": null,
6295
6320
  "figmaId": null,
6296
- "figmaLink": "TODO:hds-master:Blockquote",
6321
+ "figmaLink": null,
6297
6322
  "tier": "primitive",
6298
6323
  "preview": {
6299
6324
  "exportName": "Blockquote",
6300
6325
  "sizing": "panel"
6301
6326
  },
6302
6327
  "consumers": [
6303
- "src/app/components/blockquote.figma.tsx",
6304
6328
  "src/app/components/blockquote.test.tsx",
6305
6329
  "src/stories/blockquote.stories.tsx"
6306
6330
  ],
@@ -6339,14 +6363,13 @@
6339
6363
  "description": "Groups Button (or button-like) children into a single attached segment.",
6340
6364
  "figmaUrl": null,
6341
6365
  "figmaId": null,
6342
- "figmaLink": "TODO:hds-master:ButtonGroup",
6366
+ "figmaLink": null,
6343
6367
  "tier": "primitive",
6344
6368
  "preview": {
6345
6369
  "exportName": "ButtonGroup",
6346
6370
  "sizing": "panel"
6347
6371
  },
6348
6372
  "consumers": [
6349
- "src/app/components/button-group.figma.tsx",
6350
6373
  "src/app/components/button-group.test.tsx",
6351
6374
  "src/stories/button-group.stories.tsx"
6352
6375
  ],
@@ -6380,14 +6403,13 @@
6380
6403
  "description": "A single-line input with optional `leading`/`trailing` adornments.",
6381
6404
  "figmaUrl": null,
6382
6405
  "figmaId": null,
6383
- "figmaLink": "TODO:hds-master:InputGroup",
6406
+ "figmaLink": null,
6384
6407
  "tier": "primitive",
6385
6408
  "preview": {
6386
6409
  "exportName": "InputGroup",
6387
6410
  "sizing": "panel"
6388
6411
  },
6389
6412
  "consumers": [
6390
- "src/app/components/input-group.figma.tsx",
6391
6413
  "src/app/components/input-group.test.tsx",
6392
6414
  "src/stories/input-group.stories.tsx"
6393
6415
  ],
@@ -6434,14 +6456,13 @@
6434
6456
  "description": "Renders a keyboard key or shortcut token, e.g. `<Kbd>⌘K</Kbd>`.",
6435
6457
  "figmaUrl": null,
6436
6458
  "figmaId": null,
6437
- "figmaLink": "TODO:hds-master:Kbd",
6459
+ "figmaLink": null,
6438
6460
  "tier": "primitive",
6439
6461
  "preview": {
6440
6462
  "exportName": "Kbd",
6441
6463
  "sizing": "panel"
6442
6464
  },
6443
6465
  "consumers": [
6444
- "src/app/components/kbd.figma.tsx",
6445
6466
  "src/app/components/kbd.test.tsx",
6446
6467
  "src/stories/kbd.stories.tsx"
6447
6468
  ],
@@ -6476,14 +6497,13 @@
6476
6497
  "description": "A small solid dot conveying a semantic status via `tone`.",
6477
6498
  "figmaUrl": null,
6478
6499
  "figmaId": null,
6479
- "figmaLink": "TODO:hds-master:StatusDot",
6500
+ "figmaLink": null,
6480
6501
  "tier": "primitive",
6481
6502
  "preview": {
6482
6503
  "exportName": "StatusDot",
6483
6504
  "sizing": "panel"
6484
6505
  },
6485
6506
  "consumers": [
6486
- "src/app/components/status-dot.figma.tsx",
6487
6507
  "src/app/components/status-dot.test.tsx",
6488
6508
  "src/stories/status-dot.stories.tsx"
6489
6509
  ],
@@ -6534,14 +6554,13 @@
6534
6554
  "description": "Presents a date/time with a machine-readable `dateTime` for accessibility.",
6535
6555
  "figmaUrl": null,
6536
6556
  "figmaId": null,
6537
- "figmaLink": "TODO:hds-master:Timestamp",
6557
+ "figmaLink": null,
6538
6558
  "tier": "primitive",
6539
6559
  "preview": {
6540
6560
  "exportName": "Timestamp",
6541
6561
  "sizing": "panel"
6542
6562
  },
6543
6563
  "consumers": [
6544
- "src/app/components/timestamp.figma.tsx",
6545
6564
  "src/app/components/timestamp.test.tsx",
6546
6565
  "src/stories/timestamp.stories.tsx"
6547
6566
  ],
@@ -6588,14 +6607,13 @@
6588
6607
  "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.",
6589
6608
  "figmaUrl": null,
6590
6609
  "figmaId": null,
6591
- "figmaLink": "TODO:hds-master:VisuallyHidden",
6610
+ "figmaLink": null,
6592
6611
  "tier": "primitive",
6593
6612
  "preview": {
6594
6613
  "exportName": "VisuallyHidden",
6595
6614
  "sizing": "panel"
6596
6615
  },
6597
6616
  "consumers": [
6598
- "src/app/components/visually-hidden.figma.tsx",
6599
6617
  "src/app/components/visually-hidden.test.tsx",
6600
6618
  "src/stories/visually-hidden.stories.tsx"
6601
6619
  ],
@@ -6625,14 +6643,13 @@
6625
6643
  "description": "A circular progress ring; pass `value`/`max` or set `indeterminate`.",
6626
6644
  "figmaUrl": null,
6627
6645
  "figmaId": null,
6628
- "figmaLink": "TODO:hds-master:CircularProgress",
6646
+ "figmaLink": null,
6629
6647
  "tier": "primitive",
6630
6648
  "preview": {
6631
6649
  "exportName": "CircularProgress",
6632
6650
  "sizing": "panel"
6633
6651
  },
6634
6652
  "consumers": [
6635
- "src/app/components/circular-progress.figma.tsx",
6636
6653
  "src/app/components/circular-progress.test.tsx",
6637
6654
  "src/stories/circular-progress.stories.tsx"
6638
6655
  ],
@@ -6683,7 +6700,6 @@
6683
6700
  "figmaUrl": null,
6684
6701
  "figmaId": null,
6685
6702
  "consumers": [
6686
- "src/app/components/side-nav.figma.tsx",
6687
6703
  "src/app/components/side-nav.test.tsx",
6688
6704
  "src/stories/side-nav.stories.tsx"
6689
6705
  ],
@@ -6703,7 +6719,7 @@
6703
6719
  "docExempt": false,
6704
6720
  "variantAxes": [],
6705
6721
  "componentProperties": [],
6706
- "figmaLink": "TODO:hds-master:SideNav"
6722
+ "figmaLink": null
6707
6723
  },
6708
6724
  "CommandPalette": {
6709
6725
  "category": "Overlays",
@@ -6715,14 +6731,13 @@
6715
6731
  "description": "Mountable trigger + dialog. Drop into header slot; component manages its own open state and Cmd-K / Ctrl-K global keybinding.",
6716
6732
  "figmaUrl": null,
6717
6733
  "figmaId": null,
6718
- "figmaLink": "TODO:hds-master:CommandPalette",
6734
+ "figmaLink": null,
6719
6735
  "tier": "primitive",
6720
6736
  "preview": {
6721
6737
  "exportName": "CommandPalette",
6722
6738
  "sizing": "panel"
6723
6739
  },
6724
6740
  "consumers": [
6725
- "src/app/components/command-palette.figma.tsx",
6726
6741
  "src/app/data/nav-model.test.ts",
6727
6742
  "src/app/lib/hds-search.ts",
6728
6743
  "src/stories/command-palette.stories.tsx"
@@ -6753,14 +6768,13 @@
6753
6768
  "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.",
6754
6769
  "figmaUrl": null,
6755
6770
  "figmaId": null,
6756
- "figmaLink": "TODO:hds-master:Lightbox",
6771
+ "figmaLink": null,
6757
6772
  "tier": "primitive",
6758
6773
  "preview": {
6759
6774
  "exportName": "Lightbox",
6760
6775
  "sizing": "panel"
6761
6776
  },
6762
6777
  "consumers": [
6763
- "src/app/components/image-lightbox.figma.tsx",
6764
6778
  "src/app/components/image-lightbox.test.tsx",
6765
6779
  "src/app/data/hdsEditorial.tsx",
6766
6780
  "src/stories/asset-img.stories.tsx",
@@ -6821,14 +6835,13 @@
6821
6835
  "description": "Renders a header/sidebar/main application frame, e.g. `<AppShell sidebar={<Nav />}>...</AppShell>`.",
6822
6836
  "figmaUrl": null,
6823
6837
  "figmaId": null,
6824
- "figmaLink": "TODO:hds-master:AppShell",
6838
+ "figmaLink": null,
6825
6839
  "tier": "template",
6826
6840
  "preview": {
6827
6841
  "exportName": "AppShell",
6828
6842
  "sizing": "panel"
6829
6843
  },
6830
6844
  "consumers": [
6831
- "src/app/components/app-shell.figma.tsx",
6832
6845
  "src/app/components/app-shell.test.tsx",
6833
6846
  "src/stories/app-shell.stories.tsx"
6834
6847
  ],
@@ -6853,14 +6866,13 @@
6853
6866
  "description": "A dashed dropzone that opens the native file picker or accepts a drag-and-drop.",
6854
6867
  "figmaUrl": null,
6855
6868
  "figmaId": null,
6856
- "figmaLink": "TODO:hds-master:FileInput",
6869
+ "figmaLink": null,
6857
6870
  "tier": "pattern",
6858
6871
  "preview": {
6859
6872
  "exportName": "FileInput",
6860
6873
  "sizing": "panel"
6861
6874
  },
6862
6875
  "consumers": [
6863
- "src/app/components/file-input.figma.tsx",
6864
6876
  "src/app/components/file-input.test.tsx",
6865
6877
  "src/stories/file-input.stories.tsx"
6866
6878
  ],
@@ -6906,14 +6918,13 @@
6906
6918
  "description": "Renders object metadata as a semantic `<dl>` of term/description pairs.",
6907
6919
  "figmaUrl": null,
6908
6920
  "figmaId": null,
6909
- "figmaLink": "TODO:hds-master:MetadataList",
6921
+ "figmaLink": null,
6910
6922
  "tier": "pattern",
6911
6923
  "preview": {
6912
6924
  "exportName": "MetadataList",
6913
6925
  "sizing": "panel"
6914
6926
  },
6915
6927
  "consumers": [
6916
- "src/app/components/metadata-list.figma.tsx",
6917
6928
  "src/app/components/metadata-list.test.tsx",
6918
6929
  "src/stories/metadata-list.stories.tsx"
6919
6930
  ],
@@ -6950,14 +6961,13 @@
6950
6961
  "description": "Renders up to `max` children followed by a `+N` overflow chip (or custom node).",
6951
6962
  "figmaUrl": null,
6952
6963
  "figmaId": null,
6953
- "figmaLink": "TODO:hds-master:OverflowList",
6964
+ "figmaLink": null,
6954
6965
  "tier": "pattern",
6955
6966
  "preview": {
6956
6967
  "exportName": "OverflowList",
6957
6968
  "sizing": "panel"
6958
6969
  },
6959
6970
  "consumers": [
6960
- "src/app/components/overflow-list.figma.tsx",
6961
6971
  "src/app/components/overflow-list.test.tsx",
6962
6972
  "src/stories/overflow-list.stories.tsx"
6963
6973
  ],
@@ -6994,14 +7004,13 @@
6994
7004
  "description": "A card-shaped single checkbox — click or activate to toggle selection.",
6995
7005
  "figmaUrl": null,
6996
7006
  "figmaId": null,
6997
- "figmaLink": "TODO:hds-master:SelectableCard",
7007
+ "figmaLink": null,
6998
7008
  "tier": "pattern",
6999
7009
  "preview": {
7000
7010
  "exportName": "SelectableCard",
7001
7011
  "sizing": "panel"
7002
7012
  },
7003
7013
  "consumers": [
7004
- "src/app/components/selectable-card.figma.tsx",
7005
7014
  "src/app/components/selectable-card.test.tsx",
7006
7015
  "src/stories/selectable-card.stories.tsx"
7007
7016
  ],
@@ -7039,14 +7048,13 @@
7039
7048
  "description": "A bordered field of Tag chips followed by a text input for adding more.",
7040
7049
  "figmaUrl": null,
7041
7050
  "figmaId": null,
7042
- "figmaLink": "TODO:hds-master:Tokenizer",
7051
+ "figmaLink": null,
7043
7052
  "tier": "pattern",
7044
7053
  "preview": {
7045
7054
  "exportName": "Tokenizer",
7046
7055
  "sizing": "panel"
7047
7056
  },
7048
7057
  "consumers": [
7049
- "src/app/components/tokenizer.figma.tsx",
7050
7058
  "src/app/components/tokenizer.test.tsx",
7051
7059
  "src/stories/tokenizer.stories.tsx"
7052
7060
  ],
@@ -7090,14 +7098,13 @@
7090
7098
  "description": "Top navigation bar with brand, nav, and trailing action slots.",
7091
7099
  "figmaUrl": null,
7092
7100
  "figmaId": null,
7093
- "figmaLink": "TODO:hds-master:TopNav",
7101
+ "figmaLink": null,
7094
7102
  "tier": "pattern",
7095
7103
  "preview": {
7096
7104
  "exportName": "TopNav",
7097
7105
  "sizing": "panel"
7098
7106
  },
7099
7107
  "consumers": [
7100
- "src/app/components/top-nav.figma.tsx",
7101
7108
  "src/app/components/top-nav.test.tsx",
7102
7109
  "src/stories/top-nav.stories.tsx"
7103
7110
  ],
@@ -7139,14 +7146,13 @@
7139
7146
  "description": "Renders children as a snap-scrolling track with Prev/Next scroll buttons.",
7140
7147
  "figmaUrl": null,
7141
7148
  "figmaId": null,
7142
- "figmaLink": "TODO:hds-master:Carousel",
7149
+ "figmaLink": null,
7143
7150
  "tier": "pattern",
7144
7151
  "preview": {
7145
7152
  "exportName": "Carousel",
7146
7153
  "sizing": "panel"
7147
7154
  },
7148
7155
  "consumers": [
7149
- "src/app/components/carousel.figma.tsx",
7150
7156
  "src/app/components/carousel.test.tsx",
7151
7157
  "src/stories/carousel.stories.tsx"
7152
7158
  ],
@@ -7183,14 +7189,13 @@
7183
7189
  "description": "Step indicator for multi-step flows. Purely presentational — no navigation.",
7184
7190
  "figmaUrl": null,
7185
7191
  "figmaId": null,
7186
- "figmaLink": "TODO:hds-master:Stepper",
7192
+ "figmaLink": null,
7187
7193
  "tier": "pattern",
7188
7194
  "preview": {
7189
7195
  "exportName": "Stepper",
7190
7196
  "sizing": "panel"
7191
7197
  },
7192
7198
  "consumers": [
7193
- "src/app/components/stepper.figma.tsx",
7194
7199
  "src/app/components/stepper.test.tsx",
7195
7200
  "src/stories/stepper.stories.tsx"
7196
7201
  ],
@@ -7230,14 +7235,13 @@
7230
7235
  "description": "Toolbar root. Groups related controls with a single roving tab-stop. Supports the native `orientation` prop (`horizontal` | `vertical`).",
7231
7236
  "figmaUrl": null,
7232
7237
  "figmaId": null,
7233
- "figmaLink": "TODO:hds-master:Toolbar",
7238
+ "figmaLink": null,
7234
7239
  "tier": "pattern",
7235
7240
  "preview": {
7236
7241
  "exportName": "Toolbar",
7237
7242
  "sizing": "panel"
7238
7243
  },
7239
7244
  "consumers": [
7240
- "src/app/components/toolbar.figma.tsx",
7241
7245
  "src/app/components/toolbar.test.tsx",
7242
7246
  "src/stories/toolbar.stories.tsx"
7243
7247
  ],
@@ -7267,14 +7271,13 @@
7267
7271
  "description": "Renders a hierarchical `role=\"tree\"` list; nodes with children get an expand/collapse toggle.",
7268
7272
  "figmaUrl": null,
7269
7273
  "figmaId": null,
7270
- "figmaLink": "TODO:hds-master:TreeList",
7274
+ "figmaLink": null,
7271
7275
  "tier": "pattern",
7272
7276
  "preview": {
7273
7277
  "exportName": "TreeList",
7274
7278
  "sizing": "panel"
7275
7279
  },
7276
7280
  "consumers": [
7277
- "src/app/components/tree-list.figma.tsx",
7278
7281
  "src/app/components/tree-list.test.tsx",
7279
7282
  "src/stories/tree-list.stories.tsx"
7280
7283
  ],
@@ -7311,14 +7314,13 @@
7311
7314
  "description": "AlertDialog root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.",
7312
7315
  "figmaUrl": null,
7313
7316
  "figmaId": null,
7314
- "figmaLink": "TODO:hds-master:AlertDialog",
7317
+ "figmaLink": null,
7315
7318
  "tier": "primitive",
7316
7319
  "preview": {
7317
7320
  "exportName": "AlertDialog",
7318
7321
  "sizing": "panel"
7319
7322
  },
7320
7323
  "consumers": [
7321
- "src/app/components/alert-dialog.figma.tsx",
7322
7324
  "src/app/components/alert-dialog.test.tsx",
7323
7325
  "src/stories/alert-dialog.stories.tsx"
7324
7326
  ],
@@ -7343,14 +7345,13 @@
7343
7345
  "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.",
7344
7346
  "figmaUrl": null,
7345
7347
  "figmaId": null,
7346
- "figmaLink": "TODO:hds-master:AspectRatio",
7348
+ "figmaLink": null,
7347
7349
  "tier": "primitive",
7348
7350
  "preview": {
7349
7351
  "exportName": "AspectRatio",
7350
7352
  "sizing": "panel"
7351
7353
  },
7352
7354
  "consumers": [
7353
- "src/app/components/aspect-ratio.figma.tsx",
7354
7355
  "src/app/components/aspect-ratio.test.tsx",
7355
7356
  "src/app/components/frame.tsx",
7356
7357
  "src/stories/aspect-ratio.stories.tsx",
@@ -7386,14 +7387,13 @@
7386
7387
  "description": "Renders an accessible month grid; compose it inside a Popover for the date inputs.",
7387
7388
  "figmaUrl": null,
7388
7389
  "figmaId": null,
7389
- "figmaLink": "TODO:hds-master:Calendar",
7390
+ "figmaLink": null,
7390
7391
  "tier": "primitive",
7391
7392
  "preview": {
7392
7393
  "exportName": "Calendar",
7393
7394
  "sizing": "panel"
7394
7395
  },
7395
7396
  "consumers": [
7396
- "src/app/components/calendar.figma.tsx",
7397
7397
  "src/app/components/calendar.test.tsx",
7398
7398
  "src/app/components/date-input.tsx",
7399
7399
  "src/app/components/date-range-input.tsx",
@@ -7424,14 +7424,13 @@
7424
7424
  "description": "ContextMenu root + parts. Wrap the right-clickable area in `ContextMenu.Trigger`. Controlled via `onOpenChange`.",
7425
7425
  "figmaUrl": null,
7426
7426
  "figmaId": null,
7427
- "figmaLink": "TODO:hds-master:ContextMenu",
7427
+ "figmaLink": null,
7428
7428
  "tier": "primitive",
7429
7429
  "preview": {
7430
7430
  "exportName": "ContextMenu",
7431
7431
  "sizing": "panel"
7432
7432
  },
7433
7433
  "consumers": [
7434
- "src/app/components/context-menu.figma.tsx",
7435
7434
  "src/app/components/context-menu.test.tsx",
7436
7435
  "src/stories/context-menu.stories.tsx"
7437
7436
  ],
@@ -7456,14 +7455,13 @@
7456
7455
  "description": "Text field + calendar popover for picking a single date.",
7457
7456
  "figmaUrl": null,
7458
7457
  "figmaId": null,
7459
- "figmaLink": "TODO:hds-master:DateInput",
7458
+ "figmaLink": null,
7460
7459
  "tier": "pattern",
7461
7460
  "preview": {
7462
7461
  "exportName": "DateInput",
7463
7462
  "sizing": "panel"
7464
7463
  },
7465
7464
  "consumers": [
7466
- "src/app/components/date-input.figma.tsx",
7467
7465
  "src/app/components/date-input.test.tsx",
7468
7466
  "src/stories/date-input.stories.tsx"
7469
7467
  ],
@@ -7517,14 +7515,13 @@
7517
7515
  "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} />",
7518
7516
  "figmaUrl": null,
7519
7517
  "figmaId": null,
7520
- "figmaLink": "TODO:hds-master:DateRangeInput",
7518
+ "figmaLink": null,
7521
7519
  "tier": "pattern",
7522
7520
  "preview": {
7523
7521
  "exportName": "DateRangeInput",
7524
7522
  "sizing": "panel"
7525
7523
  },
7526
7524
  "consumers": [
7527
- "src/app/components/date-range-input.figma.tsx",
7528
7525
  "src/app/components/date-range-input.test.tsx",
7529
7526
  "src/stories/date-range-input.stories.tsx"
7530
7527
  ],
@@ -7582,14 +7579,13 @@
7582
7579
  "description": "Text date field + calendar popover, paired with a native time field, producing one Date.",
7583
7580
  "figmaUrl": null,
7584
7581
  "figmaId": null,
7585
- "figmaLink": "TODO:hds-master:DateTimeInput",
7582
+ "figmaLink": null,
7586
7583
  "tier": "pattern",
7587
7584
  "preview": {
7588
7585
  "exportName": "DateTimeInput",
7589
7586
  "sizing": "panel"
7590
7587
  },
7591
7588
  "consumers": [
7592
- "src/app/components/date-time-input.figma.tsx",
7593
7589
  "src/app/components/date-time-input.test.tsx",
7594
7590
  "src/stories/date-time-input.stories.tsx"
7595
7591
  ],
@@ -7639,14 +7635,13 @@
7639
7635
  "description": "HoverCard root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`; tune timing with `openDelay`/`closeDelay`.",
7640
7636
  "figmaUrl": null,
7641
7637
  "figmaId": null,
7642
- "figmaLink": "TODO:hds-master:HoverCard",
7638
+ "figmaLink": null,
7643
7639
  "tier": "primitive",
7644
7640
  "preview": {
7645
7641
  "exportName": "HoverCard",
7646
7642
  "sizing": "panel"
7647
7643
  },
7648
7644
  "consumers": [
7649
- "src/app/components/hover-card.figma.tsx",
7650
7645
  "src/app/components/hover-card.test.tsx",
7651
7646
  "src/stories/hover-card.stories.tsx"
7652
7647
  ],
@@ -7671,14 +7666,13 @@
7671
7666
  "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} />",
7672
7667
  "figmaUrl": null,
7673
7668
  "figmaId": null,
7674
- "figmaLink": "TODO:hds-master:MultiSelector",
7669
+ "figmaLink": null,
7675
7670
  "tier": "pattern",
7676
7671
  "preview": {
7677
7672
  "exportName": "MultiSelector",
7678
7673
  "sizing": "panel"
7679
7674
  },
7680
7675
  "consumers": [
7681
- "src/app/components/multi-selector.figma.tsx",
7682
7676
  "src/app/components/multi-selector.test.tsx",
7683
7677
  "src/stories/multi-selector.stories.tsx"
7684
7678
  ],
@@ -7725,7 +7719,7 @@
7725
7719
  "description": "A native time field skinned with HDS input chrome. Value is a `HH:mm` string.",
7726
7720
  "figmaUrl": null,
7727
7721
  "figmaId": null,
7728
- "figmaLink": "TODO:hds-master:TimeInput",
7722
+ "figmaLink": null,
7729
7723
  "tier": "primitive",
7730
7724
  "preview": {
7731
7725
  "exportName": "TimeInput",
@@ -7733,7 +7727,6 @@
7733
7727
  },
7734
7728
  "consumers": [
7735
7729
  "src/app/components/date-time-input.tsx",
7736
- "src/app/components/time-input.figma.tsx",
7737
7730
  "src/app/components/time-input.test.tsx",
7738
7731
  "src/stories/date-time-input.stories.tsx",
7739
7732
  "src/stories/time-input.stories.tsx"
@@ -7769,14 +7762,13 @@
7769
7762
  "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.",
7770
7763
  "figmaUrl": null,
7771
7764
  "figmaId": null,
7772
- "figmaLink": "TODO:hds-master:ToggleButton",
7765
+ "figmaLink": null,
7773
7766
  "tier": "primitive",
7774
7767
  "preview": {
7775
7768
  "exportName": "ToggleButton",
7776
7769
  "sizing": "panel"
7777
7770
  },
7778
7771
  "consumers": [
7779
- "src/app/components/toggle-button.figma.tsx",
7780
7772
  "src/app/components/toggle-button.test.tsx",
7781
7773
  "src/stories/toggle-button.stories.tsx"
7782
7774
  ],
@@ -7823,7 +7815,7 @@
7823
7815
  "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.",
7824
7816
  "figmaUrl": null,
7825
7817
  "figmaId": null,
7826
- "figmaLink": "TODO:hds-master:Box",
7818
+ "figmaLink": null,
7827
7819
  "tier": "primitive",
7828
7820
  "preview": {
7829
7821
  "exportName": "Box",
@@ -7840,6 +7832,7 @@
7840
7832
  "src/app/components/frame.tsx",
7841
7833
  "src/app/components/sidebar.tsx",
7842
7834
  "src/app/components/switcher.tsx",
7835
+ "src/app/components/toggle.tsx",
7843
7836
  "src/stories/box.stories.tsx",
7844
7837
  "src/stories/patterns-layout.stories.tsx"
7845
7838
  ],
@@ -7877,7 +7870,7 @@
7877
7870
  "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).",
7878
7871
  "figmaUrl": null,
7879
7872
  "figmaId": null,
7880
- "figmaLink": "TODO:hds-master:Bleed",
7873
+ "figmaLink": null,
7881
7874
  "tier": "primitive",
7882
7875
  "preview": {
7883
7876
  "exportName": "Bleed",
@@ -7943,7 +7936,7 @@
7943
7936
  "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/",
7944
7937
  "figmaUrl": null,
7945
7938
  "figmaId": null,
7946
- "figmaLink": "TODO:hds-master:Center",
7939
+ "figmaLink": null,
7947
7940
  "tier": "primitive",
7948
7941
  "preview": {
7949
7942
  "exportName": "Center",
@@ -8012,7 +8005,7 @@
8012
8005
  "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/",
8013
8006
  "figmaUrl": null,
8014
8007
  "figmaId": null,
8015
- "figmaLink": "TODO:hds-master:Cluster",
8008
+ "figmaLink": null,
8016
8009
  "tier": "primitive",
8017
8010
  "preview": {
8018
8011
  "exportName": "Cluster",
@@ -8091,7 +8084,7 @@
8091
8084
  "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/",
8092
8085
  "figmaUrl": null,
8093
8086
  "figmaId": null,
8094
- "figmaLink": "TODO:hds-master:Cover",
8087
+ "figmaLink": null,
8095
8088
  "tier": "primitive",
8096
8089
  "preview": {
8097
8090
  "exportName": "Cover",
@@ -8167,7 +8160,7 @@
8167
8160
  "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/",
8168
8161
  "figmaUrl": null,
8169
8162
  "figmaId": null,
8170
- "figmaLink": "TODO:hds-master:Frame",
8163
+ "figmaLink": null,
8171
8164
  "tier": "primitive",
8172
8165
  "preview": {
8173
8166
  "exportName": "Frame",
@@ -8229,7 +8222,7 @@
8229
8222
  "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/",
8230
8223
  "figmaUrl": null,
8231
8224
  "figmaId": null,
8232
- "figmaLink": "TODO:hds-master:Sidebar",
8225
+ "figmaLink": null,
8233
8226
  "tier": "primitive",
8234
8227
  "preview": {
8235
8228
  "exportName": "Sidebar",
@@ -8242,6 +8235,7 @@
8242
8235
  "src/stories/app-shell.stories.tsx",
8243
8236
  "src/stories/grid.stories.tsx",
8244
8237
  "src/stories/patterns-layout.stories.tsx",
8238
+ "src/stories/pin.stories.tsx",
8245
8239
  "src/stories/side-nav.stories.tsx",
8246
8240
  "src/stories/sidebar.stories.tsx"
8247
8241
  ],
@@ -8308,7 +8302,7 @@
8308
8302
  "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/",
8309
8303
  "figmaUrl": null,
8310
8304
  "figmaId": null,
8311
- "figmaLink": "TODO:hds-master:Switcher",
8305
+ "figmaLink": null,
8312
8306
  "tier": "primitive",
8313
8307
  "preview": {
8314
8308
  "exportName": "Switcher",
@@ -8373,13 +8367,18 @@
8373
8367
  "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.",
8374
8368
  "figmaUrl": null,
8375
8369
  "figmaId": null,
8376
- "figmaLink": "TODO:hds-master:Pin",
8370
+ "figmaLink": null,
8377
8371
  "tier": "primitive",
8378
8372
  "preview": {
8379
8373
  "exportName": "Pin",
8380
8374
  "sizing": "panel"
8381
8375
  },
8382
- "consumers": [],
8376
+ "consumers": [
8377
+ "src/app/components/pin.test.tsx",
8378
+ "src/stories/patterns-scroll.stories.tsx",
8379
+ "src/stories/pin.stories.tsx",
8380
+ "src/stories/reveal.stories.tsx"
8381
+ ],
8383
8382
  "tokenMapping": {},
8384
8383
  "variantAxes": [],
8385
8384
  "componentProperties": [],
@@ -8421,14 +8420,17 @@
8421
8420
  "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.",
8422
8421
  "figmaUrl": null,
8423
8422
  "figmaId": null,
8424
- "figmaLink": "TODO:hds-master:Reveal",
8423
+ "figmaLink": null,
8425
8424
  "tier": "primitive",
8426
8425
  "preview": {
8427
8426
  "exportName": "Reveal",
8428
8427
  "sizing": "panel"
8429
8428
  },
8430
8429
  "consumers": [
8431
- "src/app/components/pin.tsx"
8430
+ "src/app/components/pin.tsx",
8431
+ "src/app/components/reveal.test.tsx",
8432
+ "src/stories/patterns-scroll.stories.tsx",
8433
+ "src/stories/reveal.stories.tsx"
8432
8434
  ],
8433
8435
  "tokenMapping": {},
8434
8436
  "variantAxes": [],
@@ -8467,6 +8469,69 @@
8467
8469
  "requiredProps": [],
8468
8470
  "a11yRules": []
8469
8471
  },
8472
+ "Textarea": {
8473
+ "category": "Inputs",
8474
+ "categorySource": "jsdoc",
8475
+ "governedCategory": true,
8476
+ "hidden": false,
8477
+ "docExempt": false,
8478
+ "filePath": "src/app/components/textarea.tsx",
8479
+ "description": "Textarea — multi-line text field primitive with label, helper, and error slots. Mirrors Input's shell + token skin as a native `<textarea>`. Figma parity: the four states Default / Focus / Error / Disabled map to the focus-ring, `error`, and `disabled` treatments below.",
8480
+ "figmaUrl": null,
8481
+ "figmaId": null,
8482
+ "figmaLink": null,
8483
+ "tier": "primitive",
8484
+ "preview": {
8485
+ "exportName": "Textarea",
8486
+ "sizing": "panel"
8487
+ },
8488
+ "consumers": [
8489
+ "src/stories/textarea.stories.tsx"
8490
+ ],
8491
+ "tokenMapping": {},
8492
+ "variantAxes": [],
8493
+ "componentProperties": [],
8494
+ "props": {
8495
+ "className": {
8496
+ "type": "string",
8497
+ "optional": true
8498
+ },
8499
+ "disabled": {
8500
+ "type": "boolean",
8501
+ "optional": true
8502
+ },
8503
+ "error": {
8504
+ "type": "boolean",
8505
+ "optional": true
8506
+ },
8507
+ "errorMessage": {
8508
+ "type": "string",
8509
+ "optional": true
8510
+ },
8511
+ "helperText": {
8512
+ "type": "string",
8513
+ "optional": true
8514
+ },
8515
+ "label": {
8516
+ "type": "string",
8517
+ "optional": true
8518
+ },
8519
+ "resize": {
8520
+ "type": "TextareaResize",
8521
+ "default": "vertical"
8522
+ },
8523
+ "textareaClassName": {
8524
+ "type": "string",
8525
+ "optional": true
8526
+ }
8527
+ },
8528
+ "allowedChildren": [
8529
+ "*"
8530
+ ],
8531
+ "propConstraints": {},
8532
+ "requiredProps": [],
8533
+ "a11yRules": []
8534
+ },
8470
8535
  "HdsPhosphor": {
8471
8536
  "category": "Compiler",
8472
8537
  "filePath": "scripts/hds-jsx-compiler.mjs",
@@ -8873,15 +8938,15 @@
8873
8938
  },
8874
8939
  "AutoPreviewSpecimen": {
8875
8940
  "category": "Uncategorized",
8876
- "categorySource": "missing-jsdoc",
8877
- "governedCategory": false,
8878
- "hidden": false,
8941
+ "categorySource": "internal-jsdoc",
8942
+ "governedCategory": true,
8943
+ "hidden": true,
8879
8944
  "docExempt": true,
8880
8945
  "filePath": "src/app/components/componentPreviewRegistry.tsx",
8881
8946
  "description": "/** @internal @doc-exempt: demo-preview-helper — not part of @hirobius/design-system public API.",
8882
8947
  "figmaUrl": null,
8883
8948
  "figmaId": null,
8884
- "figmaLink": "TODO:hds-master:AutoPreviewSpecimen",
8949
+ "figmaLink": null,
8885
8950
  "tier": "utility",
8886
8951
  "preview": {
8887
8952
  "exportName": "AutoPreviewSpecimen",
@@ -8923,7 +8988,7 @@
8923
8988
  "docExempt": true,
8924
8989
  "variantAxes": [],
8925
8990
  "componentProperties": [],
8926
- "figmaLink": "TODO:hds-master:VariantPreviewDeck"
8991
+ "figmaLink": null
8927
8992
  },
8928
8993
  "HistoryCard": {
8929
8994
  "category": "Uncategorized",
@@ -8962,7 +9027,7 @@
8962
9027
  "tier": "utility",
8963
9028
  "docExempt": true,
8964
9029
  "sourcePath": "src/app/components/HistoryCard.tsx",
8965
- "figmaLink": "TODO:hds-master:HistoryCard"
9030
+ "figmaLink": null
8966
9031
  },
8967
9032
  "ComponentPreview": {
8968
9033
  "category": "Uncategorized",
@@ -8993,7 +9058,7 @@
8993
9058
  "docExempt": true,
8994
9059
  "variantAxes": [],
8995
9060
  "componentProperties": [],
8996
- "figmaLink": "TODO:hds-master:ComponentPreview"
9061
+ "figmaLink": null
8997
9062
  },
8998
9063
  "AnimatedLabel": {
8999
9064
  "category": "Uncategorized",
@@ -9023,7 +9088,7 @@
9023
9088
  "docExempt": true,
9024
9089
  "variantAxes": [],
9025
9090
  "componentProperties": [],
9026
- "figmaLink": "TODO:hds-master:AnimatedLabel"
9091
+ "figmaLink": null
9027
9092
  },
9028
9093
  "ControlsPanel": {
9029
9094
  "category": "Uncategorized",
@@ -9054,7 +9119,7 @@
9054
9119
  "docExempt": true,
9055
9120
  "variantAxes": [],
9056
9121
  "componentProperties": [],
9057
- "figmaLink": "TODO:hds-master:ControlsPanel"
9122
+ "figmaLink": null
9058
9123
  },
9059
9124
  "ControlsSection": {
9060
9125
  "category": "Uncategorized",
@@ -9085,7 +9150,7 @@
9085
9150
  "docExempt": true,
9086
9151
  "variantAxes": [],
9087
9152
  "componentProperties": [],
9088
- "figmaLink": "TODO:hds-master:ControlsSection"
9153
+ "figmaLink": null
9089
9154
  },
9090
9155
  "HdsMobileTopBar": {
9091
9156
  "category": "Uncategorized",
@@ -9115,7 +9180,7 @@
9115
9180
  "docExempt": true,
9116
9181
  "variantAxes": [],
9117
9182
  "componentProperties": [],
9118
- "figmaLink": "TODO:hds-master:HdsMobileTopBar"
9183
+ "figmaLink": null
9119
9184
  },
9120
9185
  "PreviewFrame": {
9121
9186
  "category": "Uncategorized",
@@ -9147,7 +9212,7 @@
9147
9212
  "docExempt": true,
9148
9213
  "variantAxes": [],
9149
9214
  "componentProperties": [],
9150
- "figmaLink": "TODO:hds-master:PreviewFrame"
9215
+ "figmaLink": null
9151
9216
  },
9152
9217
  "HdsSidebarUtilityButton": {
9153
9218
  "category": "Uncategorized",
@@ -9177,7 +9242,7 @@
9177
9242
  "docExempt": true,
9178
9243
  "variantAxes": [],
9179
9244
  "componentProperties": [],
9180
- "figmaLink": "TODO:hds-master:HdsSidebarUtilityButton"
9245
+ "figmaLink": null
9181
9246
  },
9182
9247
  "ImageLightbox": {
9183
9248
  "category": "Uncategorized",
@@ -9207,13 +9272,13 @@
9207
9272
  "docExempt": true,
9208
9273
  "variantAxes": [],
9209
9274
  "componentProperties": [],
9210
- "figmaLink": "TODO:hds-master:ImageLightbox"
9275
+ "figmaLink": null
9211
9276
  },
9212
9277
  "SketchButton": {
9213
9278
  "category": "Uncategorized",
9214
- "categorySource": "missing-jsdoc",
9215
- "governedCategory": false,
9216
- "hidden": false,
9279
+ "categorySource": "internal-jsdoc",
9280
+ "governedCategory": true,
9281
+ "hidden": true,
9217
9282
  "filePath": "src/app/components/sketch-controls.tsx",
9218
9283
  "description": "",
9219
9284
  "figmaUrl": null,
@@ -9235,13 +9300,13 @@
9235
9300
  "docExempt": true,
9236
9301
  "variantAxes": [],
9237
9302
  "componentProperties": [],
9238
- "figmaLink": "TODO:hds-master:SketchButton"
9303
+ "figmaLink": null
9239
9304
  },
9240
9305
  "SketchCheckbox": {
9241
9306
  "category": "Uncategorized",
9242
- "categorySource": "missing-jsdoc",
9243
- "governedCategory": false,
9244
- "hidden": false,
9307
+ "categorySource": "internal-jsdoc",
9308
+ "governedCategory": true,
9309
+ "hidden": true,
9245
9310
  "filePath": "src/app/components/sketch-controls.tsx",
9246
9311
  "description": "",
9247
9312
  "figmaUrl": null,
@@ -9263,13 +9328,13 @@
9263
9328
  "docExempt": true,
9264
9329
  "variantAxes": [],
9265
9330
  "componentProperties": [],
9266
- "figmaLink": "TODO:hds-master:SketchCheckbox"
9331
+ "figmaLink": null
9267
9332
  },
9268
9333
  "SketchPanelToggle": {
9269
9334
  "category": "Uncategorized",
9270
- "categorySource": "missing-jsdoc",
9271
- "governedCategory": false,
9272
- "hidden": false,
9335
+ "categorySource": "internal-jsdoc",
9336
+ "governedCategory": true,
9337
+ "hidden": true,
9273
9338
  "filePath": "src/app/components/sketch-controls.tsx",
9274
9339
  "description": "",
9275
9340
  "figmaUrl": null,
@@ -9291,13 +9356,13 @@
9291
9356
  "docExempt": true,
9292
9357
  "variantAxes": [],
9293
9358
  "componentProperties": [],
9294
- "figmaLink": "TODO:hds-master:SketchPanelToggle"
9359
+ "figmaLink": null
9295
9360
  },
9296
9361
  "SketchRange": {
9297
9362
  "category": "Uncategorized",
9298
- "categorySource": "missing-jsdoc",
9299
- "governedCategory": false,
9300
- "hidden": false,
9363
+ "categorySource": "internal-jsdoc",
9364
+ "governedCategory": true,
9365
+ "hidden": true,
9301
9366
  "filePath": "src/app/components/sketch-controls.tsx",
9302
9367
  "description": "",
9303
9368
  "figmaUrl": null,
@@ -9319,13 +9384,13 @@
9319
9384
  "docExempt": true,
9320
9385
  "variantAxes": [],
9321
9386
  "componentProperties": [],
9322
- "figmaLink": "TODO:hds-master:SketchRange"
9387
+ "figmaLink": null
9323
9388
  },
9324
9389
  "SketchTextarea": {
9325
9390
  "category": "Uncategorized",
9326
- "categorySource": "missing-jsdoc",
9327
- "governedCategory": false,
9328
- "hidden": false,
9391
+ "categorySource": "internal-jsdoc",
9392
+ "governedCategory": true,
9393
+ "hidden": true,
9329
9394
  "filePath": "src/app/components/sketch-controls.tsx",
9330
9395
  "description": "",
9331
9396
  "figmaUrl": null,
@@ -9347,7 +9412,7 @@
9347
9412
  "docExempt": true,
9348
9413
  "variantAxes": [],
9349
9414
  "componentProperties": [],
9350
- "figmaLink": "TODO:hds-master:SketchTextarea"
9415
+ "figmaLink": null
9351
9416
  },
9352
9417
  "MorphCard": {
9353
9418
  "category": "Uncategorized",
@@ -9368,7 +9433,7 @@
9368
9433
  "tokenMapping": {},
9369
9434
  "variantAxes": [],
9370
9435
  "componentProperties": [],
9371
- "figmaLink": "TODO:hds-master:MorphCard"
9436
+ "figmaLink": null
9372
9437
  },
9373
9438
  "Tooltip": {
9374
9439
  "category": "Uncategorized",
@@ -9394,7 +9459,7 @@
9394
9459
  "tokenMapping": {},
9395
9460
  "variantAxes": [],
9396
9461
  "componentProperties": [],
9397
- "figmaLink": "TODO:hds-master:Tooltip"
9462
+ "figmaLink": null
9398
9463
  },
9399
9464
  "NotFoundPattern": {
9400
9465
  "category": "Feedback",
@@ -9425,7 +9490,7 @@
9425
9490
  "componentProperties": [],
9426
9491
  "tier": "utility",
9427
9492
  "docExempt": true,
9428
- "figmaLink": "TODO:hds-master:NotFoundPattern"
9493
+ "figmaLink": null
9429
9494
  },
9430
9495
  "CascadeText": {
9431
9496
  "category": "Uncategorized",
@@ -9446,7 +9511,7 @@
9446
9511
  "tokenMapping": {},
9447
9512
  "variantAxes": [],
9448
9513
  "componentProperties": [],
9449
- "figmaLink": "TODO:hds-master:CascadeText"
9514
+ "figmaLink": null
9450
9515
  },
9451
9516
  "DocPageSpec": {
9452
9517
  "category": "Uncategorized",
@@ -9467,7 +9532,7 @@
9467
9532
  "tokenMapping": {},
9468
9533
  "variantAxes": [],
9469
9534
  "componentProperties": [],
9470
- "figmaLink": "TODO:hds-master:DocPageSpec"
9535
+ "figmaLink": null
9471
9536
  },
9472
9537
  "TokenDisplayToggle": {
9473
9538
  "category": "Uncategorized",
@@ -9490,7 +9555,7 @@
9490
9555
  "tokenMapping": {},
9491
9556
  "variantAxes": [],
9492
9557
  "componentProperties": [],
9493
- "figmaLink": "TODO:hds-master:TokenDisplayToggle"
9558
+ "figmaLink": null
9494
9559
  },
9495
9560
  "HdsLegacyTokenGovernancePanel": {
9496
9561
  "category": "Uncategorized",
@@ -9536,7 +9601,7 @@
9536
9601
  "componentProperties": [],
9537
9602
  "tier": "utility",
9538
9603
  "docExempt": false,
9539
- "figmaLink": "TODO:hds-master:HdsLegacyTokenGovernancePanel"
9604
+ "figmaLink": null
9540
9605
  },
9541
9606
  "LegacyTokenList": {
9542
9607
  "category": "Lab",
@@ -9582,7 +9647,7 @@
9582
9647
  "componentProperties": [],
9583
9648
  "tier": "utility",
9584
9649
  "docExempt": false,
9585
- "figmaLink": "TODO:hds-master:LegacyTokenList"
9650
+ "figmaLink": null
9586
9651
  },
9587
9652
  "TokenCollectionList": {
9588
9653
  "category": "Lab",
@@ -9623,7 +9688,7 @@
9623
9688
  "componentProperties": [],
9624
9689
  "tier": "utility",
9625
9690
  "docExempt": false,
9626
- "figmaLink": "TODO:hds-master:TokenCollectionList"
9691
+ "figmaLink": null
9627
9692
  },
9628
9693
  "TokenList": {
9629
9694
  "category": "Uncategorized",
@@ -9653,13 +9718,13 @@
9653
9718
  "docExempt": true,
9654
9719
  "variantAxes": [],
9655
9720
  "componentProperties": [],
9656
- "figmaLink": "TODO:hds-master:TokenList"
9721
+ "figmaLink": null
9657
9722
  },
9658
9723
  "ErrorBoundary": {
9659
9724
  "category": "Uncategorized",
9660
- "categorySource": "missing-jsdoc",
9661
- "governedCategory": false,
9662
- "hidden": false,
9725
+ "categorySource": "internal-jsdoc",
9726
+ "governedCategory": true,
9727
+ "hidden": true,
9663
9728
  "docExempt": true,
9664
9729
  "filePath": "src/app/components/error-boundary.tsx",
9665
9730
  "description": "ErrorBoundary — slot-scoped recovery surface for runtime render failures.",
@@ -9678,7 +9743,7 @@
9678
9743
  "tokenMapping": {},
9679
9744
  "variantAxes": [],
9680
9745
  "componentProperties": [],
9681
- "figmaLink": "TODO:hds-master:ErrorBoundary"
9746
+ "figmaLink": null
9682
9747
  },
9683
9748
  "ApiReference": {
9684
9749
  "category": "Utilities",
@@ -9690,7 +9755,7 @@
9690
9755
  "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).",
9691
9756
  "figmaUrl": null,
9692
9757
  "figmaId": null,
9693
- "figmaLink": "TODO:hds-master:ApiReference",
9758
+ "figmaLink": null,
9694
9759
  "tier": "utility",
9695
9760
  "preview": {
9696
9761
  "exportName": "ApiReference",
@@ -9711,17 +9776,13 @@
9711
9776
  "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.",
9712
9777
  "figmaUrl": null,
9713
9778
  "figmaId": null,
9714
- "figmaLink": "TODO:hds-master:DocPageHeader",
9779
+ "figmaLink": null,
9715
9780
  "tier": "utility",
9716
9781
  "preview": {
9717
9782
  "exportName": "DocPageHeader",
9718
9783
  "sizing": "panel"
9719
9784
  },
9720
- "consumers": [
9721
- "src/app/pages/docs/patterns/_template.tsx",
9722
- "src/app/pages/docs/templates/_template.tsx",
9723
- "src/app/pages/SketchPage.tsx"
9724
- ],
9785
+ "consumers": [],
9725
9786
  "tokenMapping": {},
9726
9787
  "variantAxes": [],
9727
9788
  "componentProperties": []
@@ -9736,7 +9797,7 @@
9736
9797
  "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.",
9737
9798
  "figmaUrl": null,
9738
9799
  "figmaId": null,
9739
- "figmaLink": "TODO:hds-master:ThemeToggle",
9800
+ "figmaLink": null,
9740
9801
  "tier": "utility",
9741
9802
  "preview": {
9742
9803
  "exportName": "ThemeToggle",
@@ -9759,7 +9820,7 @@
9759
9820
  "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.",
9760
9821
  "figmaUrl": null,
9761
9822
  "figmaId": null,
9762
- "figmaLink": "TODO:hds-master:VariantStrip",
9823
+ "figmaLink": null,
9763
9824
  "tier": "utility",
9764
9825
  "preview": {
9765
9826
  "exportName": "VariantStrip",
@@ -9779,7 +9840,7 @@
9779
9840
  "filePath": "src/app/components/demo-block.tsx",
9780
9841
  "figmaUrl": null,
9781
9842
  "figmaId": null,
9782
- "figmaLink": "TODO:hds-master:DemoBlock",
9843
+ "figmaLink": null,
9783
9844
  "tier": "utility",
9784
9845
  "preview": {
9785
9846
  "exportName": "DemoBlock",
@@ -9800,7 +9861,7 @@
9800
9861
  "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.",
9801
9862
  "figmaUrl": null,
9802
9863
  "figmaId": null,
9803
- "figmaLink": "TODO:hds-master:PageFooter",
9864
+ "figmaLink": null,
9804
9865
  "tier": "utility",
9805
9866
  "preview": {
9806
9867
  "exportName": "PageFooter",
@@ -10119,7 +10180,7 @@
10119
10180
  "path": "primitive.color.lilac.500",
10120
10181
  "cssVar": "--primitive-color-lilac-500",
10121
10182
  "type": "color",
10122
- "description": "Lilac Bonds accent rest — AA for white text on page and card surfaces.",
10183
+ "description": "Lilac accent rest — AA for white text on page and card surfaces.",
10123
10184
  "value": "#6f3fd4"
10124
10185
  },
10125
10186
  {
@@ -10498,14 +10559,14 @@
10498
10559
  "path": "primitive.typography.size.5xl",
10499
10560
  "cssVar": "--primitive-typography-size-5xl",
10500
10561
  "type": "dimension",
10501
- "value": "80px"
10562
+ "description": "Swiss-canon display size. Static desktop value; fluid in theme.css.",
10563
+ "value": "72px"
10502
10564
  },
10503
10565
  {
10504
- "path": "primitive.typography.size.7xl",
10505
- "cssVar": "--primitive-typography-size-7xl",
10566
+ "path": "primitive.typography.size.6xl",
10567
+ "cssVar": "--primitive-typography-size-6xl",
10506
10568
  "type": "dimension",
10507
- "description": "Swiss-canon display size. Static desktop value; fluid in theme.css.",
10508
- "value": "72px"
10569
+ "value": "80px"
10509
10570
  },
10510
10571
  {
10511
10572
  "path": "primitive.typography.weight.light",
@@ -10980,12 +11041,12 @@
10980
11041
  "path": "semantic.color.surface.accent",
10981
11042
  "cssVar": "--semantic-color-surface-accent",
10982
11043
  "type": "color",
10983
- "description": "Accent-colored background",
10984
- "alias": "{primitive.color.blue.500}",
10985
- "resolvedValue": "#1E2EFD",
11044
+ "description": "Accent-colored background (neutral/monochrome; inverts to a light neutral on dark surfaces).",
11045
+ "alias": "{primitive.color.neutral.900}",
11046
+ "resolvedValue": "#111111",
10986
11047
  "dark": {
10987
- "alias": "{primitive.color.blue.500}",
10988
- "resolvedValue": "#1E2EFD"
11048
+ "alias": "{primitive.color.neutral.100}",
11049
+ "resolvedValue": "#f5f5f5"
10989
11050
  }
10990
11051
  },
10991
11052
  {
@@ -10993,11 +11054,71 @@
10993
11054
  "cssVar": "--semantic-color-surface-accentSubtle",
10994
11055
  "type": "color",
10995
11056
  "description": "Faint accent tint for hover states or highlights",
10996
- "alias": "{primitive.color.blue.50}",
10997
- "resolvedValue": "oklch(0.96 0.03 266.54)",
11057
+ "alias": "{primitive.color.neutral.100}",
11058
+ "resolvedValue": "#f5f5f5",
10998
11059
  "dark": {
10999
- "alias": "{primitive.color.blue.900}",
11000
- "resolvedValue": "oklch(0.22 0.05 266.54)"
11060
+ "alias": "{primitive.color.neutral.900}",
11061
+ "resolvedValue": "#111111"
11062
+ }
11063
+ },
11064
+ {
11065
+ "path": "semantic.color.surface.hover",
11066
+ "cssVar": "--semantic-color-surface-hover",
11067
+ "type": "color",
11068
+ "description": "Background for a hovered interactive surface (menu items, chips, tertiary buttons).",
11069
+ "alias": "{primitive.color.neutral.100}",
11070
+ "resolvedValue": "#f5f5f5",
11071
+ "dark": {
11072
+ "alias": "{primitive.color.neutral.900}",
11073
+ "resolvedValue": "#111111"
11074
+ }
11075
+ },
11076
+ {
11077
+ "path": "semantic.color.surface.pressed",
11078
+ "cssVar": "--semantic-color-surface-pressed",
11079
+ "type": "color",
11080
+ "description": "Background for an actively pressed interactive surface.",
11081
+ "alias": "{primitive.color.neutral.50}",
11082
+ "resolvedValue": "#fafafa",
11083
+ "dark": {
11084
+ "alias": "{primitive.color.neutral.950}",
11085
+ "resolvedValue": "#0a0a0a"
11086
+ }
11087
+ },
11088
+ {
11089
+ "path": "semantic.color.surface.selected",
11090
+ "cssVar": "--semantic-color-surface-selected",
11091
+ "type": "color",
11092
+ "description": "Background for a persistently selected item (active tab, checked row).",
11093
+ "alias": "{primitive.color.neutral.200}",
11094
+ "resolvedValue": "#e5e5e5",
11095
+ "dark": {
11096
+ "alias": "{primitive.color.neutral.800}",
11097
+ "resolvedValue": "#262626"
11098
+ }
11099
+ },
11100
+ {
11101
+ "path": "semantic.color.surface.muted",
11102
+ "cssVar": "--semantic-color-surface-muted",
11103
+ "type": "color",
11104
+ "description": "Muted background for low-emphasis content blocks.",
11105
+ "alias": "{primitive.color.neutral.100}",
11106
+ "resolvedValue": "#f5f5f5",
11107
+ "dark": {
11108
+ "alias": "{primitive.color.neutral.900}",
11109
+ "resolvedValue": "#111111"
11110
+ }
11111
+ },
11112
+ {
11113
+ "path": "semantic.color.surface.sunken",
11114
+ "cssVar": "--semantic-color-surface-sunken",
11115
+ "type": "color",
11116
+ "description": "Recessed background for inset wells (inputs, code blocks, nested panels).",
11117
+ "alias": "{primitive.color.neutral.200}",
11118
+ "resolvedValue": "#e5e5e5",
11119
+ "dark": {
11120
+ "alias": "{primitive.color.neutral.850}",
11121
+ "resolvedValue": "#1a1a1a"
11001
11122
  }
11002
11123
  },
11003
11124
  {
@@ -11048,22 +11169,60 @@
11048
11169
  "path": "semantic.color.content.accent",
11049
11170
  "cssVar": "--semantic-color-content-accent",
11050
11171
  "type": "color",
11051
- "alias": "{primitive.color.blue.500}",
11052
- "resolvedValue": "#1E2EFD",
11172
+ "description": "Accent-intent text/icon color (monochrome). Pair with underline/weight for link affordance.",
11173
+ "alias": "{primitive.color.neutral.900}",
11174
+ "resolvedValue": "#111111",
11053
11175
  "dark": {
11054
- "alias": "{primitive.color.blue.300}",
11055
- "resolvedValue": "oklch(0.70 0.2903 266.54)"
11176
+ "alias": "{primitive.color.neutral.100}",
11177
+ "resolvedValue": "#f5f5f5"
11056
11178
  }
11057
11179
  },
11058
11180
  {
11059
11181
  "path": "semantic.color.content.onAccent",
11060
11182
  "cssVar": "--semantic-color-content-onAccent",
11061
11183
  "type": "color",
11184
+ "description": "Text/icon color on accent fills. Flips to a dark neutral in dark mode, where the accent fill is a light neutral.",
11062
11185
  "alias": "{primitive.color.neutral.white}",
11063
11186
  "resolvedValue": "#ffffff",
11064
11187
  "dark": {
11065
- "alias": "{primitive.color.neutral.white}",
11066
- "resolvedValue": "#ffffff"
11188
+ "alias": "{primitive.color.neutral.900}",
11189
+ "resolvedValue": "#111111"
11190
+ }
11191
+ },
11192
+ {
11193
+ "path": "semantic.color.content.success",
11194
+ "cssVar": "--semantic-color-content-success",
11195
+ "type": "color",
11196
+ "description": "Success-toned text/icon color, independent of feedback banners.",
11197
+ "alias": "{primitive.color.green.700}",
11198
+ "resolvedValue": "#047857",
11199
+ "dark": {
11200
+ "alias": "{primitive.color.green.400}",
11201
+ "resolvedValue": "#34d399"
11202
+ }
11203
+ },
11204
+ {
11205
+ "path": "semantic.color.content.warning",
11206
+ "cssVar": "--semantic-color-content-warning",
11207
+ "type": "color",
11208
+ "description": "Warning-toned text/icon color, independent of feedback banners.",
11209
+ "alias": "{primitive.color.amber.800}",
11210
+ "resolvedValue": "#92400e",
11211
+ "dark": {
11212
+ "alias": "{primitive.color.amber.400}",
11213
+ "resolvedValue": "#fbbf24"
11214
+ }
11215
+ },
11216
+ {
11217
+ "path": "semantic.color.content.danger",
11218
+ "cssVar": "--semantic-color-content-danger",
11219
+ "type": "color",
11220
+ "description": "Danger-toned text/icon color, independent of feedback banners.",
11221
+ "alias": "{primitive.color.red.700}",
11222
+ "resolvedValue": "#b91c1c",
11223
+ "dark": {
11224
+ "alias": "{primitive.color.red.400}",
11225
+ "resolvedValue": "#f87171"
11067
11226
  }
11068
11227
  },
11069
11228
  {
@@ -11077,6 +11236,18 @@
11077
11236
  "resolvedValue": "#404040"
11078
11237
  }
11079
11238
  },
11239
+ {
11240
+ "path": "semantic.color.border.interactive",
11241
+ "cssVar": "--semantic-color-border-interactive",
11242
+ "type": "color",
11243
+ "description": "Border for interactive control boundaries (inputs, selects, secondary buttons); meets the WCAG 1.4.11 3:1 non-text contrast floor.",
11244
+ "alias": "{primitive.color.neutral.500}",
11245
+ "resolvedValue": "#737373",
11246
+ "dark": {
11247
+ "alias": "{primitive.color.neutral.500}",
11248
+ "resolvedValue": "#737373"
11249
+ }
11250
+ },
11080
11251
  {
11081
11252
  "path": "semantic.color.border.subdued",
11082
11253
  "cssVar": "--semantic-color-border-subdued",
@@ -11115,11 +11286,36 @@
11115
11286
  "path": "semantic.color.border.accent",
11116
11287
  "cssVar": "--semantic-color-border-accent",
11117
11288
  "type": "color",
11118
- "alias": "{primitive.color.blue.500}",
11119
- "resolvedValue": "#1E2EFD",
11289
+ "description": "Accent border (neutral/monochrome; inverts on dark surfaces).",
11290
+ "alias": "{primitive.color.neutral.900}",
11291
+ "resolvedValue": "#111111",
11292
+ "dark": {
11293
+ "alias": "{primitive.color.neutral.100}",
11294
+ "resolvedValue": "#f5f5f5"
11295
+ }
11296
+ },
11297
+ {
11298
+ "path": "semantic.color.border.success",
11299
+ "cssVar": "--semantic-color-border-success",
11300
+ "type": "color",
11301
+ "description": "Success-toned border for status outlines and success-state inputs.",
11302
+ "alias": "{primitive.color.green.400}",
11303
+ "resolvedValue": "#34d399",
11304
+ "dark": {
11305
+ "alias": "{primitive.color.green.400}",
11306
+ "resolvedValue": "#34d399"
11307
+ }
11308
+ },
11309
+ {
11310
+ "path": "semantic.color.border.warning",
11311
+ "cssVar": "--semantic-color-border-warning",
11312
+ "type": "color",
11313
+ "description": "Warning-toned border for status outlines and warning-state inputs.",
11314
+ "alias": "{primitive.color.amber.400}",
11315
+ "resolvedValue": "#fbbf24",
11120
11316
  "dark": {
11121
- "alias": "{primitive.color.blue.500}",
11122
- "resolvedValue": "#1E2EFD"
11317
+ "alias": "{primitive.color.amber.400}",
11318
+ "resolvedValue": "#fbbf24"
11123
11319
  }
11124
11320
  },
11125
11321
  {
@@ -11605,12 +11801,12 @@
11605
11801
  "path": "semantic.accent.rest",
11606
11802
  "cssVar": "--semantic-accent-rest",
11607
11803
  "type": "color",
11608
- "description": "Default accent fill for interactive elements at rest.",
11609
- "alias": "{primitive.color.blue.500}",
11610
- "resolvedValue": "#1E2EFD",
11804
+ "description": "Default accent fill for interactive elements at rest. Neutral (monochrome) accent — inverts to a light neutral on dark surfaces.",
11805
+ "alias": "{primitive.color.neutral.900}",
11806
+ "resolvedValue": "#111111",
11611
11807
  "dark": {
11612
- "alias": "{primitive.color.blue.500}",
11613
- "resolvedValue": "#1E2EFD"
11808
+ "alias": "{primitive.color.neutral.100}",
11809
+ "resolvedValue": "#f5f5f5"
11614
11810
  }
11615
11811
  },
11616
11812
  {
@@ -11618,11 +11814,11 @@
11618
11814
  "cssVar": "--semantic-accent-hover",
11619
11815
  "type": "color",
11620
11816
  "description": "Accent fill on pointer hover.",
11621
- "alias": "{primitive.color.blue.600}",
11622
- "resolvedValue": "oklch(0.45 0.2903 266.54)",
11817
+ "alias": "{primitive.color.neutral.800}",
11818
+ "resolvedValue": "#262626",
11623
11819
  "dark": {
11624
- "alias": "{primitive.color.blue.450}",
11625
- "resolvedValue": "oklch(0.56 0.29 266.60)"
11820
+ "alias": "{primitive.color.neutral.200}",
11821
+ "resolvedValue": "#e5e5e5"
11626
11822
  }
11627
11823
  },
11628
11824
  {
@@ -11630,11 +11826,11 @@
11630
11826
  "cssVar": "--semantic-accent-pressed",
11631
11827
  "type": "color",
11632
11828
  "description": "Accent fill during active press.",
11633
- "alias": "{primitive.color.blue.700}",
11634
- "resolvedValue": "oklch(0.44 0.2903 266.54)",
11829
+ "alias": "{primitive.color.neutral.950}",
11830
+ "resolvedValue": "#0a0a0a",
11635
11831
  "dark": {
11636
- "alias": "{primitive.color.blue.400}",
11637
- "resolvedValue": "oklch(0.65 0.2903 266.54)"
11832
+ "alias": "{primitive.color.neutral.300}",
11833
+ "resolvedValue": "#d4d4d4"
11638
11834
  }
11639
11835
  },
11640
11836
  {
@@ -11642,11 +11838,11 @@
11642
11838
  "cssVar": "--semantic-accent-inactive",
11643
11839
  "type": "color",
11644
11840
  "description": "Accent fill for inactive or unselected accent elements.",
11645
- "alias": "{primitive.color.blue.200}",
11646
- "resolvedValue": "oklch(0.88 0.07 266.54)",
11841
+ "alias": "{primitive.color.neutral.400}",
11842
+ "resolvedValue": "#a3a3a3",
11647
11843
  "dark": {
11648
- "alias": "{primitive.color.blue.200}",
11649
- "resolvedValue": "oklch(0.88 0.07 266.54)"
11844
+ "alias": "{primitive.color.neutral.600}",
11845
+ "resolvedValue": "#525252"
11650
11846
  }
11651
11847
  },
11652
11848
  {
@@ -11654,23 +11850,23 @@
11654
11850
  "cssVar": "--semantic-accent-disabled",
11655
11851
  "type": "color",
11656
11852
  "description": "Accent fill for disabled accent elements.",
11657
- "alias": "{primitive.color.blue.100}",
11658
- "resolvedValue": "oklch(0.92 0.04 266.54)",
11853
+ "alias": "{primitive.color.neutral.300}",
11854
+ "resolvedValue": "#d4d4d4",
11659
11855
  "dark": {
11660
- "alias": "{primitive.color.blue.100}",
11661
- "resolvedValue": "oklch(0.92 0.04 266.54)"
11856
+ "alias": "{primitive.color.neutral.700}",
11857
+ "resolvedValue": "#404040"
11662
11858
  }
11663
11859
  },
11664
11860
  {
11665
11861
  "path": "semantic.accent.content",
11666
11862
  "cssVar": "--semantic-accent-content",
11667
11863
  "type": "color",
11668
- "description": "Text and icon color on neutral surfaces with accent intent.",
11669
- "alias": "{primitive.color.blue.500}",
11670
- "resolvedValue": "#1E2EFD",
11864
+ "description": "Text and icon color on neutral surfaces with accent intent. Monochrome — pair with underline/weight for link affordance.",
11865
+ "alias": "{primitive.color.neutral.900}",
11866
+ "resolvedValue": "#111111",
11671
11867
  "dark": {
11672
- "alias": "{primitive.color.blue.300}",
11673
- "resolvedValue": "oklch(0.70 0.2903 266.54)"
11868
+ "alias": "{primitive.color.neutral.100}",
11869
+ "resolvedValue": "#f5f5f5"
11674
11870
  }
11675
11871
  },
11676
11872
  {
@@ -11678,11 +11874,11 @@
11678
11874
  "cssVar": "--semantic-accent-contentHover",
11679
11875
  "type": "color",
11680
11876
  "description": "Accent content color on pointer hover.",
11681
- "alias": "{primitive.color.blue.600}",
11682
- "resolvedValue": "oklch(0.45 0.2903 266.54)",
11877
+ "alias": "{primitive.color.neutral.700}",
11878
+ "resolvedValue": "#404040",
11683
11879
  "dark": {
11684
- "alias": "{primitive.color.blue.200}",
11685
- "resolvedValue": "oklch(0.88 0.07 266.54)"
11880
+ "alias": "{primitive.color.neutral.300}",
11881
+ "resolvedValue": "#d4d4d4"
11686
11882
  }
11687
11883
  },
11688
11884
  {
@@ -11690,20 +11886,20 @@
11690
11886
  "cssVar": "--semantic-accent-subtle",
11691
11887
  "type": "color",
11692
11888
  "description": "Low-emphasis accent tint for hover backgrounds and selection highlights.",
11693
- "alias": "{primitive.color.blue.50}",
11694
- "resolvedValue": "oklch(0.96 0.03 266.54)",
11889
+ "alias": "{primitive.color.neutral.100}",
11890
+ "resolvedValue": "#f5f5f5",
11695
11891
  "dark": {
11696
- "alias": "{primitive.color.blue.900}",
11697
- "resolvedValue": "oklch(0.22 0.05 266.54)"
11892
+ "alias": "{primitive.color.neutral.800}",
11893
+ "resolvedValue": "#262626"
11698
11894
  }
11699
11895
  },
11700
11896
  {
11701
11897
  "path": "semantic.radius.action",
11702
11898
  "cssVar": "--semantic-radius-action",
11703
11899
  "type": "dimension",
11704
- "description": "Corner radius for interactive action elements like buttons and inputs.",
11705
- "alias": "{primitive.radius.12}",
11706
- "resolvedValue": "12px"
11900
+ "description": "The shape knob. Corner radius for interactive action elements (buttons, inputs, badges, alerts, segmented items). Tailwind's rounded-md resolves to exactly this value via --role-radius; containers are one step above it at rounded-lg. Override role.radius in a tenant overlay to reshape the whole system from one value.",
11901
+ "alias": "{primitive.radius.8}",
11902
+ "resolvedValue": "8px"
11707
11903
  },
11708
11904
  {
11709
11905
  "path": "semantic.borderWidth.default",
@@ -11826,7 +12022,7 @@
11826
12022
  "type": "color",
11827
12023
  "description": "Nav item background fill when active or selected.",
11828
12024
  "alias": "{semantic.accent.subtle}",
11829
- "resolvedValue": "oklch(0.96 0.03 266.54)"
12025
+ "resolvedValue": "#f5f5f5"
11830
12026
  },
11831
12027
  {
11832
12028
  "path": "component.nav.borderActive",
@@ -11834,7 +12030,7 @@
11834
12030
  "type": "color",
11835
12031
  "description": "Nav item border color when active or selected.",
11836
12032
  "alias": "{semantic.color.surface.accent}",
11837
- "resolvedValue": "#1E2EFD"
12033
+ "resolvedValue": "#111111"
11838
12034
  },
11839
12035
  {
11840
12036
  "path": "component.nav.text",
@@ -11882,7 +12078,7 @@
11882
12078
  "type": "color",
11883
12079
  "description": "Base tag surface color.",
11884
12080
  "alias": "{semantic.accent.subtle}",
11885
- "resolvedValue": "oklch(0.96 0.03 266.54)"
12081
+ "resolvedValue": "#f5f5f5"
11886
12082
  },
11887
12083
  {
11888
12084
  "path": "component.tag.text",
@@ -11978,7 +12174,7 @@
11978
12174
  "type": "color",
11979
12175
  "description": "Active tag fill color.",
11980
12176
  "alias": "{semantic.accent.rest}",
11981
- "resolvedValue": "#1E2EFD"
12177
+ "resolvedValue": "#111111"
11982
12178
  },
11983
12179
  {
11984
12180
  "path": "component.tag.activeBorder",
@@ -11986,7 +12182,7 @@
11986
12182
  "type": "color",
11987
12183
  "description": "Active tag border color.",
11988
12184
  "alias": "{semantic.accent.rest}",
11989
- "resolvedValue": "#1E2EFD"
12185
+ "resolvedValue": "#111111"
11990
12186
  },
11991
12187
  {
11992
12188
  "path": "component.tag.activeHover",
@@ -11994,7 +12190,7 @@
11994
12190
  "type": "color",
11995
12191
  "description": "Active tag hover fill color.",
11996
12192
  "alias": "{semantic.accent.hover}",
11997
- "resolvedValue": "oklch(0.45 0.2903 266.54)"
12193
+ "resolvedValue": "#262626"
11998
12194
  },
11999
12195
  {
12000
12196
  "path": "component.badge.fontSize",
@@ -12078,7 +12274,7 @@
12078
12274
  "type": "color",
12079
12275
  "description": "Primary button fill.",
12080
12276
  "alias": "{semantic.color.surface.accent}",
12081
- "resolvedValue": "#1E2EFD"
12277
+ "resolvedValue": "#111111"
12082
12278
  },
12083
12279
  {
12084
12280
  "path": "component.button.bgHover",
@@ -12086,7 +12282,7 @@
12086
12282
  "type": "color",
12087
12283
  "description": "Primary button hover fill.",
12088
12284
  "alias": "{semantic.accent.hover}",
12089
- "resolvedValue": "oklch(0.45 0.2903 266.54)"
12285
+ "resolvedValue": "#262626"
12090
12286
  },
12091
12287
  {
12092
12288
  "path": "component.button.text",
@@ -12102,7 +12298,7 @@
12102
12298
  "type": "dimension",
12103
12299
  "description": "Button corner radius.",
12104
12300
  "alias": "{semantic.radius.action}",
12105
- "resolvedValue": "12px"
12301
+ "resolvedValue": "8px"
12106
12302
  },
12107
12303
  {
12108
12304
  "path": "component.button.paddingX",
@@ -12282,7 +12478,7 @@
12282
12478
  "type": "color",
12283
12479
  "description": "Disabled primary button fill.",
12284
12480
  "alias": "{semantic.color.surface.accentSubtle}",
12285
- "resolvedValue": "oklch(0.96 0.03 266.54)"
12481
+ "resolvedValue": "#f5f5f5"
12286
12482
  },
12287
12483
  {
12288
12484
  "path": "component.button.secondary.bg.rest",
@@ -12313,24 +12509,24 @@
12313
12509
  "cssVar": "--component-button-secondary-border-rest",
12314
12510
  "type": "color",
12315
12511
  "description": "Secondary button border.",
12316
- "alias": "{semantic.color.border.default}",
12317
- "resolvedValue": "#e5e5e5"
12512
+ "alias": "{semantic.color.border.interactive}",
12513
+ "resolvedValue": "#737373"
12318
12514
  },
12319
12515
  {
12320
12516
  "path": "component.button.secondary.border.hover",
12321
12517
  "cssVar": "--component-button-secondary-border-hover",
12322
12518
  "type": "color",
12323
12519
  "description": "Secondary button hover border.",
12324
- "alias": "{semantic.color.border.default}",
12325
- "resolvedValue": "#e5e5e5"
12520
+ "alias": "{semantic.color.border.interactive}",
12521
+ "resolvedValue": "#737373"
12326
12522
  },
12327
12523
  {
12328
12524
  "path": "component.button.secondary.border.pressed",
12329
12525
  "cssVar": "--component-button-secondary-border-pressed",
12330
12526
  "type": "color",
12331
12527
  "description": "Secondary button pressed border.",
12332
- "alias": "{semantic.color.border.default}",
12333
- "resolvedValue": "#e5e5e5"
12528
+ "alias": "{semantic.color.border.interactive}",
12529
+ "resolvedValue": "#737373"
12334
12530
  },
12335
12531
  {
12336
12532
  "path": "component.button.secondary.border.disabled",
@@ -12366,8 +12562,8 @@
12366
12562
  "path": "component.input.border",
12367
12563
  "cssVar": "--component-input-border",
12368
12564
  "type": "color",
12369
- "alias": "{semantic.color.border.default}",
12370
- "resolvedValue": "#e5e5e5"
12565
+ "alias": "{semantic.color.border.interactive}",
12566
+ "resolvedValue": "#737373"
12371
12567
  },
12372
12568
  {
12373
12569
  "path": "component.input.borderError",
@@ -12381,7 +12577,7 @@
12381
12577
  "cssVar": "--component-input-radius",
12382
12578
  "type": "dimension",
12383
12579
  "alias": "{semantic.radius.action}",
12384
- "resolvedValue": "12px"
12580
+ "resolvedValue": "8px"
12385
12581
  },
12386
12582
  {
12387
12583
  "path": "component.input.paddingX",
@@ -12496,7 +12692,7 @@
12496
12692
  "type": "color",
12497
12693
  "description": "Primary action surface. shadcn role: primary.",
12498
12694
  "alias": "{semantic.color.surface.accent}",
12499
- "resolvedValue": "#1E2EFD"
12695
+ "resolvedValue": "#111111"
12500
12696
  },
12501
12697
  {
12502
12698
  "path": "role.primary-foreground",
@@ -12544,7 +12740,7 @@
12544
12740
  "type": "color",
12545
12741
  "description": "Hover/active tinted bg. shadcn role: accent.",
12546
12742
  "alias": "{semantic.color.surface.accentSubtle}",
12547
- "resolvedValue": "oklch(0.96 0.03 266.54)"
12743
+ "resolvedValue": "#f5f5f5"
12548
12744
  },
12549
12745
  {
12550
12746
  "path": "role.accent-foreground",
@@ -12552,7 +12748,7 @@
12552
12748
  "type": "color",
12553
12749
  "description": "Text on accent surface. shadcn role: accent-foreground.",
12554
12750
  "alias": "{semantic.color.content.accent}",
12555
- "resolvedValue": "#1E2EFD"
12751
+ "resolvedValue": "#111111"
12556
12752
  },
12557
12753
  {
12558
12754
  "path": "role.destructive",
@@ -12583,8 +12779,8 @@
12583
12779
  "cssVar": "--role-input",
12584
12780
  "type": "color",
12585
12781
  "description": "Input field border. shadcn role: input.",
12586
- "alias": "{semantic.color.border.default}",
12587
- "resolvedValue": "#e5e5e5"
12782
+ "alias": "{semantic.color.border.interactive}",
12783
+ "resolvedValue": "#737373"
12588
12784
  },
12589
12785
  {
12590
12786
  "path": "role.ring",
@@ -12592,7 +12788,7 @@
12592
12788
  "type": "color",
12593
12789
  "description": "Focus ring color. shadcn role: ring.",
12594
12790
  "alias": "{semantic.color.border.accent}",
12595
- "resolvedValue": "#1E2EFD"
12791
+ "resolvedValue": "#111111"
12596
12792
  },
12597
12793
  {
12598
12794
  "path": "role.radius",
@@ -12600,7 +12796,7 @@
12600
12796
  "type": "dimension",
12601
12797
  "description": "Default border radius. shadcn role: radius.",
12602
12798
  "alias": "{semantic.radius.action}",
12603
- "resolvedValue": "12px"
12799
+ "resolvedValue": "8px"
12604
12800
  }
12605
12801
  ]
12606
12802
  }