@hirobius/design-system 0.13.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",
@@ -5751,7 +5775,7 @@
5751
5775
  "description": "Indeterminate spinner. Inherits the surrounding text color via currentColor.",
5752
5776
  "figmaUrl": null,
5753
5777
  "figmaId": null,
5754
- "figmaLink": "TODO:hds-master:Spinner",
5778
+ "figmaLink": null,
5755
5779
  "tier": "primitive",
5756
5780
  "preview": {
5757
5781
  "exportName": "Spinner",
@@ -5796,7 +5820,7 @@
5796
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\".",
5797
5821
  "figmaUrl": null,
5798
5822
  "figmaId": null,
5799
- "figmaLink": "TODO:hds-master:Breadcrumb",
5823
+ "figmaLink": null,
5800
5824
  "tier": "pattern",
5801
5825
  "preview": {
5802
5826
  "exportName": "Breadcrumb",
@@ -5836,7 +5860,7 @@
5836
5860
  "description": "Paged navigation with first/last anchors, sibling pages, and ellipses.",
5837
5861
  "figmaUrl": null,
5838
5862
  "figmaId": null,
5839
- "figmaLink": "TODO:hds-master:Pagination",
5863
+ "figmaLink": null,
5840
5864
  "tier": "pattern",
5841
5865
  "preview": {
5842
5866
  "exportName": "Pagination",
@@ -5898,9 +5922,10 @@
5898
5922
  "docExempt": false,
5899
5923
  "figmaUrl": null,
5900
5924
  "figmaId": null,
5901
- "figmaLink": "TODO:hds-master:HdsCheckbox",
5925
+ "figmaLink": null,
5902
5926
  "consumers": [
5903
5927
  "src/app/components/checkbox.test.tsx",
5928
+ "src/app/components/radio.tsx",
5904
5929
  "src/stories/checkbox.stories.tsx"
5905
5930
  ],
5906
5931
  "variantAxes": [],
@@ -5916,7 +5941,7 @@
5916
5941
  "description": "Provider + viewport for the toast system. Wrap the app root once.",
5917
5942
  "figmaUrl": null,
5918
5943
  "figmaId": null,
5919
- "figmaLink": "TODO:hds-master:ToastProvider",
5944
+ "figmaLink": null,
5920
5945
  "tier": "pattern",
5921
5946
  "preview": {
5922
5947
  "exportName": "ToastProvider",
@@ -5956,7 +5981,7 @@
5956
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\" />",
5957
5982
  "figmaUrl": null,
5958
5983
  "figmaId": null,
5959
- "figmaLink": "TODO:hds-master:Combobox",
5984
+ "figmaLink": null,
5960
5985
  "tier": "pattern",
5961
5986
  "preview": {
5962
5987
  "exportName": "Combobox",
@@ -6025,7 +6050,7 @@
6025
6050
  "description": "Styled `<form>` with consistent vertical field rhythm.",
6026
6051
  "figmaUrl": null,
6027
6052
  "figmaId": null,
6028
- "figmaLink": "TODO:hds-master:Form",
6053
+ "figmaLink": null,
6029
6054
  "tier": "pattern",
6030
6055
  "preview": {
6031
6056
  "exportName": "Form",
@@ -6061,7 +6086,7 @@
6061
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.",
6062
6087
  "figmaUrl": null,
6063
6088
  "figmaId": null,
6064
- "figmaLink": "TODO:hds-master:FormField",
6089
+ "figmaLink": null,
6065
6090
  "tier": "pattern",
6066
6091
  "preview": {
6067
6092
  "exportName": "FormField",
@@ -6122,7 +6147,7 @@
6122
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.",
6123
6148
  "figmaUrl": null,
6124
6149
  "figmaId": null,
6125
- "figmaLink": "TODO:hds-master:FormFieldShell",
6150
+ "figmaLink": null,
6126
6151
  "tier": "pattern",
6127
6152
  "preview": {
6128
6153
  "exportName": "FormFieldShell",
@@ -6178,7 +6203,7 @@
6178
6203
  "description": "Renders a `data-hds` scope wrapper that carries the four theming dials as root attributes + CSS vars, and exposes them to `useHdsTheme()`.",
6179
6204
  "figmaUrl": null,
6180
6205
  "figmaId": null,
6181
- "figmaLink": "TODO:hds-master:HdsThemeProvider",
6206
+ "figmaLink": null,
6182
6207
  "tier": "primitive",
6183
6208
  "preview": {
6184
6209
  "exportName": "HdsThemeProvider",
@@ -6250,14 +6275,13 @@
6250
6275
  "description": "Renders up to `max` overlapping avatars followed by a `+N` overflow chip.",
6251
6276
  "figmaUrl": null,
6252
6277
  "figmaId": null,
6253
- "figmaLink": "TODO:hds-master:AvatarGroup",
6278
+ "figmaLink": null,
6254
6279
  "tier": "primitive",
6255
6280
  "preview": {
6256
6281
  "exportName": "AvatarGroup",
6257
6282
  "sizing": "panel"
6258
6283
  },
6259
6284
  "consumers": [
6260
- "src/app/components/avatar-group.figma.tsx",
6261
6285
  "src/app/components/avatar-group.test.tsx",
6262
6286
  "src/stories/avatar-group.stories.tsx"
6263
6287
  ],
@@ -6294,14 +6318,13 @@
6294
6318
  "description": "A quoted passage; pass `cite` for the source URL and `attribution` for a byline.",
6295
6319
  "figmaUrl": null,
6296
6320
  "figmaId": null,
6297
- "figmaLink": "TODO:hds-master:Blockquote",
6321
+ "figmaLink": null,
6298
6322
  "tier": "primitive",
6299
6323
  "preview": {
6300
6324
  "exportName": "Blockquote",
6301
6325
  "sizing": "panel"
6302
6326
  },
6303
6327
  "consumers": [
6304
- "src/app/components/blockquote.figma.tsx",
6305
6328
  "src/app/components/blockquote.test.tsx",
6306
6329
  "src/stories/blockquote.stories.tsx"
6307
6330
  ],
@@ -6340,14 +6363,13 @@
6340
6363
  "description": "Groups Button (or button-like) children into a single attached segment.",
6341
6364
  "figmaUrl": null,
6342
6365
  "figmaId": null,
6343
- "figmaLink": "TODO:hds-master:ButtonGroup",
6366
+ "figmaLink": null,
6344
6367
  "tier": "primitive",
6345
6368
  "preview": {
6346
6369
  "exportName": "ButtonGroup",
6347
6370
  "sizing": "panel"
6348
6371
  },
6349
6372
  "consumers": [
6350
- "src/app/components/button-group.figma.tsx",
6351
6373
  "src/app/components/button-group.test.tsx",
6352
6374
  "src/stories/button-group.stories.tsx"
6353
6375
  ],
@@ -6381,14 +6403,13 @@
6381
6403
  "description": "A single-line input with optional `leading`/`trailing` adornments.",
6382
6404
  "figmaUrl": null,
6383
6405
  "figmaId": null,
6384
- "figmaLink": "TODO:hds-master:InputGroup",
6406
+ "figmaLink": null,
6385
6407
  "tier": "primitive",
6386
6408
  "preview": {
6387
6409
  "exportName": "InputGroup",
6388
6410
  "sizing": "panel"
6389
6411
  },
6390
6412
  "consumers": [
6391
- "src/app/components/input-group.figma.tsx",
6392
6413
  "src/app/components/input-group.test.tsx",
6393
6414
  "src/stories/input-group.stories.tsx"
6394
6415
  ],
@@ -6435,14 +6456,13 @@
6435
6456
  "description": "Renders a keyboard key or shortcut token, e.g. `<Kbd>⌘K</Kbd>`.",
6436
6457
  "figmaUrl": null,
6437
6458
  "figmaId": null,
6438
- "figmaLink": "TODO:hds-master:Kbd",
6459
+ "figmaLink": null,
6439
6460
  "tier": "primitive",
6440
6461
  "preview": {
6441
6462
  "exportName": "Kbd",
6442
6463
  "sizing": "panel"
6443
6464
  },
6444
6465
  "consumers": [
6445
- "src/app/components/kbd.figma.tsx",
6446
6466
  "src/app/components/kbd.test.tsx",
6447
6467
  "src/stories/kbd.stories.tsx"
6448
6468
  ],
@@ -6477,14 +6497,13 @@
6477
6497
  "description": "A small solid dot conveying a semantic status via `tone`.",
6478
6498
  "figmaUrl": null,
6479
6499
  "figmaId": null,
6480
- "figmaLink": "TODO:hds-master:StatusDot",
6500
+ "figmaLink": null,
6481
6501
  "tier": "primitive",
6482
6502
  "preview": {
6483
6503
  "exportName": "StatusDot",
6484
6504
  "sizing": "panel"
6485
6505
  },
6486
6506
  "consumers": [
6487
- "src/app/components/status-dot.figma.tsx",
6488
6507
  "src/app/components/status-dot.test.tsx",
6489
6508
  "src/stories/status-dot.stories.tsx"
6490
6509
  ],
@@ -6535,14 +6554,13 @@
6535
6554
  "description": "Presents a date/time with a machine-readable `dateTime` for accessibility.",
6536
6555
  "figmaUrl": null,
6537
6556
  "figmaId": null,
6538
- "figmaLink": "TODO:hds-master:Timestamp",
6557
+ "figmaLink": null,
6539
6558
  "tier": "primitive",
6540
6559
  "preview": {
6541
6560
  "exportName": "Timestamp",
6542
6561
  "sizing": "panel"
6543
6562
  },
6544
6563
  "consumers": [
6545
- "src/app/components/timestamp.figma.tsx",
6546
6564
  "src/app/components/timestamp.test.tsx",
6547
6565
  "src/stories/timestamp.stories.tsx"
6548
6566
  ],
@@ -6589,14 +6607,13 @@
6589
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.",
6590
6608
  "figmaUrl": null,
6591
6609
  "figmaId": null,
6592
- "figmaLink": "TODO:hds-master:VisuallyHidden",
6610
+ "figmaLink": null,
6593
6611
  "tier": "primitive",
6594
6612
  "preview": {
6595
6613
  "exportName": "VisuallyHidden",
6596
6614
  "sizing": "panel"
6597
6615
  },
6598
6616
  "consumers": [
6599
- "src/app/components/visually-hidden.figma.tsx",
6600
6617
  "src/app/components/visually-hidden.test.tsx",
6601
6618
  "src/stories/visually-hidden.stories.tsx"
6602
6619
  ],
@@ -6626,14 +6643,13 @@
6626
6643
  "description": "A circular progress ring; pass `value`/`max` or set `indeterminate`.",
6627
6644
  "figmaUrl": null,
6628
6645
  "figmaId": null,
6629
- "figmaLink": "TODO:hds-master:CircularProgress",
6646
+ "figmaLink": null,
6630
6647
  "tier": "primitive",
6631
6648
  "preview": {
6632
6649
  "exportName": "CircularProgress",
6633
6650
  "sizing": "panel"
6634
6651
  },
6635
6652
  "consumers": [
6636
- "src/app/components/circular-progress.figma.tsx",
6637
6653
  "src/app/components/circular-progress.test.tsx",
6638
6654
  "src/stories/circular-progress.stories.tsx"
6639
6655
  ],
@@ -6684,7 +6700,6 @@
6684
6700
  "figmaUrl": null,
6685
6701
  "figmaId": null,
6686
6702
  "consumers": [
6687
- "src/app/components/side-nav.figma.tsx",
6688
6703
  "src/app/components/side-nav.test.tsx",
6689
6704
  "src/stories/side-nav.stories.tsx"
6690
6705
  ],
@@ -6704,7 +6719,7 @@
6704
6719
  "docExempt": false,
6705
6720
  "variantAxes": [],
6706
6721
  "componentProperties": [],
6707
- "figmaLink": "TODO:hds-master:SideNav"
6722
+ "figmaLink": null
6708
6723
  },
6709
6724
  "CommandPalette": {
6710
6725
  "category": "Overlays",
@@ -6716,14 +6731,13 @@
6716
6731
  "description": "Mountable trigger + dialog. Drop into header slot; component manages its own open state and Cmd-K / Ctrl-K global keybinding.",
6717
6732
  "figmaUrl": null,
6718
6733
  "figmaId": null,
6719
- "figmaLink": "TODO:hds-master:CommandPalette",
6734
+ "figmaLink": null,
6720
6735
  "tier": "primitive",
6721
6736
  "preview": {
6722
6737
  "exportName": "CommandPalette",
6723
6738
  "sizing": "panel"
6724
6739
  },
6725
6740
  "consumers": [
6726
- "src/app/components/command-palette.figma.tsx",
6727
6741
  "src/app/data/nav-model.test.ts",
6728
6742
  "src/app/lib/hds-search.ts",
6729
6743
  "src/stories/command-palette.stories.tsx"
@@ -6754,14 +6768,13 @@
6754
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.",
6755
6769
  "figmaUrl": null,
6756
6770
  "figmaId": null,
6757
- "figmaLink": "TODO:hds-master:Lightbox",
6771
+ "figmaLink": null,
6758
6772
  "tier": "primitive",
6759
6773
  "preview": {
6760
6774
  "exportName": "Lightbox",
6761
6775
  "sizing": "panel"
6762
6776
  },
6763
6777
  "consumers": [
6764
- "src/app/components/image-lightbox.figma.tsx",
6765
6778
  "src/app/components/image-lightbox.test.tsx",
6766
6779
  "src/app/data/hdsEditorial.tsx",
6767
6780
  "src/stories/asset-img.stories.tsx",
@@ -6822,14 +6835,13 @@
6822
6835
  "description": "Renders a header/sidebar/main application frame, e.g. `<AppShell sidebar={<Nav />}>...</AppShell>`.",
6823
6836
  "figmaUrl": null,
6824
6837
  "figmaId": null,
6825
- "figmaLink": "TODO:hds-master:AppShell",
6838
+ "figmaLink": null,
6826
6839
  "tier": "template",
6827
6840
  "preview": {
6828
6841
  "exportName": "AppShell",
6829
6842
  "sizing": "panel"
6830
6843
  },
6831
6844
  "consumers": [
6832
- "src/app/components/app-shell.figma.tsx",
6833
6845
  "src/app/components/app-shell.test.tsx",
6834
6846
  "src/stories/app-shell.stories.tsx"
6835
6847
  ],
@@ -6854,14 +6866,13 @@
6854
6866
  "description": "A dashed dropzone that opens the native file picker or accepts a drag-and-drop.",
6855
6867
  "figmaUrl": null,
6856
6868
  "figmaId": null,
6857
- "figmaLink": "TODO:hds-master:FileInput",
6869
+ "figmaLink": null,
6858
6870
  "tier": "pattern",
6859
6871
  "preview": {
6860
6872
  "exportName": "FileInput",
6861
6873
  "sizing": "panel"
6862
6874
  },
6863
6875
  "consumers": [
6864
- "src/app/components/file-input.figma.tsx",
6865
6876
  "src/app/components/file-input.test.tsx",
6866
6877
  "src/stories/file-input.stories.tsx"
6867
6878
  ],
@@ -6907,14 +6918,13 @@
6907
6918
  "description": "Renders object metadata as a semantic `<dl>` of term/description pairs.",
6908
6919
  "figmaUrl": null,
6909
6920
  "figmaId": null,
6910
- "figmaLink": "TODO:hds-master:MetadataList",
6921
+ "figmaLink": null,
6911
6922
  "tier": "pattern",
6912
6923
  "preview": {
6913
6924
  "exportName": "MetadataList",
6914
6925
  "sizing": "panel"
6915
6926
  },
6916
6927
  "consumers": [
6917
- "src/app/components/metadata-list.figma.tsx",
6918
6928
  "src/app/components/metadata-list.test.tsx",
6919
6929
  "src/stories/metadata-list.stories.tsx"
6920
6930
  ],
@@ -6951,14 +6961,13 @@
6951
6961
  "description": "Renders up to `max` children followed by a `+N` overflow chip (or custom node).",
6952
6962
  "figmaUrl": null,
6953
6963
  "figmaId": null,
6954
- "figmaLink": "TODO:hds-master:OverflowList",
6964
+ "figmaLink": null,
6955
6965
  "tier": "pattern",
6956
6966
  "preview": {
6957
6967
  "exportName": "OverflowList",
6958
6968
  "sizing": "panel"
6959
6969
  },
6960
6970
  "consumers": [
6961
- "src/app/components/overflow-list.figma.tsx",
6962
6971
  "src/app/components/overflow-list.test.tsx",
6963
6972
  "src/stories/overflow-list.stories.tsx"
6964
6973
  ],
@@ -6995,14 +7004,13 @@
6995
7004
  "description": "A card-shaped single checkbox — click or activate to toggle selection.",
6996
7005
  "figmaUrl": null,
6997
7006
  "figmaId": null,
6998
- "figmaLink": "TODO:hds-master:SelectableCard",
7007
+ "figmaLink": null,
6999
7008
  "tier": "pattern",
7000
7009
  "preview": {
7001
7010
  "exportName": "SelectableCard",
7002
7011
  "sizing": "panel"
7003
7012
  },
7004
7013
  "consumers": [
7005
- "src/app/components/selectable-card.figma.tsx",
7006
7014
  "src/app/components/selectable-card.test.tsx",
7007
7015
  "src/stories/selectable-card.stories.tsx"
7008
7016
  ],
@@ -7040,14 +7048,13 @@
7040
7048
  "description": "A bordered field of Tag chips followed by a text input for adding more.",
7041
7049
  "figmaUrl": null,
7042
7050
  "figmaId": null,
7043
- "figmaLink": "TODO:hds-master:Tokenizer",
7051
+ "figmaLink": null,
7044
7052
  "tier": "pattern",
7045
7053
  "preview": {
7046
7054
  "exportName": "Tokenizer",
7047
7055
  "sizing": "panel"
7048
7056
  },
7049
7057
  "consumers": [
7050
- "src/app/components/tokenizer.figma.tsx",
7051
7058
  "src/app/components/tokenizer.test.tsx",
7052
7059
  "src/stories/tokenizer.stories.tsx"
7053
7060
  ],
@@ -7091,14 +7098,13 @@
7091
7098
  "description": "Top navigation bar with brand, nav, and trailing action slots.",
7092
7099
  "figmaUrl": null,
7093
7100
  "figmaId": null,
7094
- "figmaLink": "TODO:hds-master:TopNav",
7101
+ "figmaLink": null,
7095
7102
  "tier": "pattern",
7096
7103
  "preview": {
7097
7104
  "exportName": "TopNav",
7098
7105
  "sizing": "panel"
7099
7106
  },
7100
7107
  "consumers": [
7101
- "src/app/components/top-nav.figma.tsx",
7102
7108
  "src/app/components/top-nav.test.tsx",
7103
7109
  "src/stories/top-nav.stories.tsx"
7104
7110
  ],
@@ -7140,14 +7146,13 @@
7140
7146
  "description": "Renders children as a snap-scrolling track with Prev/Next scroll buttons.",
7141
7147
  "figmaUrl": null,
7142
7148
  "figmaId": null,
7143
- "figmaLink": "TODO:hds-master:Carousel",
7149
+ "figmaLink": null,
7144
7150
  "tier": "pattern",
7145
7151
  "preview": {
7146
7152
  "exportName": "Carousel",
7147
7153
  "sizing": "panel"
7148
7154
  },
7149
7155
  "consumers": [
7150
- "src/app/components/carousel.figma.tsx",
7151
7156
  "src/app/components/carousel.test.tsx",
7152
7157
  "src/stories/carousel.stories.tsx"
7153
7158
  ],
@@ -7184,14 +7189,13 @@
7184
7189
  "description": "Step indicator for multi-step flows. Purely presentational — no navigation.",
7185
7190
  "figmaUrl": null,
7186
7191
  "figmaId": null,
7187
- "figmaLink": "TODO:hds-master:Stepper",
7192
+ "figmaLink": null,
7188
7193
  "tier": "pattern",
7189
7194
  "preview": {
7190
7195
  "exportName": "Stepper",
7191
7196
  "sizing": "panel"
7192
7197
  },
7193
7198
  "consumers": [
7194
- "src/app/components/stepper.figma.tsx",
7195
7199
  "src/app/components/stepper.test.tsx",
7196
7200
  "src/stories/stepper.stories.tsx"
7197
7201
  ],
@@ -7231,14 +7235,13 @@
7231
7235
  "description": "Toolbar root. Groups related controls with a single roving tab-stop. Supports the native `orientation` prop (`horizontal` | `vertical`).",
7232
7236
  "figmaUrl": null,
7233
7237
  "figmaId": null,
7234
- "figmaLink": "TODO:hds-master:Toolbar",
7238
+ "figmaLink": null,
7235
7239
  "tier": "pattern",
7236
7240
  "preview": {
7237
7241
  "exportName": "Toolbar",
7238
7242
  "sizing": "panel"
7239
7243
  },
7240
7244
  "consumers": [
7241
- "src/app/components/toolbar.figma.tsx",
7242
7245
  "src/app/components/toolbar.test.tsx",
7243
7246
  "src/stories/toolbar.stories.tsx"
7244
7247
  ],
@@ -7268,14 +7271,13 @@
7268
7271
  "description": "Renders a hierarchical `role=\"tree\"` list; nodes with children get an expand/collapse toggle.",
7269
7272
  "figmaUrl": null,
7270
7273
  "figmaId": null,
7271
- "figmaLink": "TODO:hds-master:TreeList",
7274
+ "figmaLink": null,
7272
7275
  "tier": "pattern",
7273
7276
  "preview": {
7274
7277
  "exportName": "TreeList",
7275
7278
  "sizing": "panel"
7276
7279
  },
7277
7280
  "consumers": [
7278
- "src/app/components/tree-list.figma.tsx",
7279
7281
  "src/app/components/tree-list.test.tsx",
7280
7282
  "src/stories/tree-list.stories.tsx"
7281
7283
  ],
@@ -7312,14 +7314,13 @@
7312
7314
  "description": "AlertDialog root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.",
7313
7315
  "figmaUrl": null,
7314
7316
  "figmaId": null,
7315
- "figmaLink": "TODO:hds-master:AlertDialog",
7317
+ "figmaLink": null,
7316
7318
  "tier": "primitive",
7317
7319
  "preview": {
7318
7320
  "exportName": "AlertDialog",
7319
7321
  "sizing": "panel"
7320
7322
  },
7321
7323
  "consumers": [
7322
- "src/app/components/alert-dialog.figma.tsx",
7323
7324
  "src/app/components/alert-dialog.test.tsx",
7324
7325
  "src/stories/alert-dialog.stories.tsx"
7325
7326
  ],
@@ -7344,14 +7345,13 @@
7344
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.",
7345
7346
  "figmaUrl": null,
7346
7347
  "figmaId": null,
7347
- "figmaLink": "TODO:hds-master:AspectRatio",
7348
+ "figmaLink": null,
7348
7349
  "tier": "primitive",
7349
7350
  "preview": {
7350
7351
  "exportName": "AspectRatio",
7351
7352
  "sizing": "panel"
7352
7353
  },
7353
7354
  "consumers": [
7354
- "src/app/components/aspect-ratio.figma.tsx",
7355
7355
  "src/app/components/aspect-ratio.test.tsx",
7356
7356
  "src/app/components/frame.tsx",
7357
7357
  "src/stories/aspect-ratio.stories.tsx",
@@ -7387,14 +7387,13 @@
7387
7387
  "description": "Renders an accessible month grid; compose it inside a Popover for the date inputs.",
7388
7388
  "figmaUrl": null,
7389
7389
  "figmaId": null,
7390
- "figmaLink": "TODO:hds-master:Calendar",
7390
+ "figmaLink": null,
7391
7391
  "tier": "primitive",
7392
7392
  "preview": {
7393
7393
  "exportName": "Calendar",
7394
7394
  "sizing": "panel"
7395
7395
  },
7396
7396
  "consumers": [
7397
- "src/app/components/calendar.figma.tsx",
7398
7397
  "src/app/components/calendar.test.tsx",
7399
7398
  "src/app/components/date-input.tsx",
7400
7399
  "src/app/components/date-range-input.tsx",
@@ -7425,14 +7424,13 @@
7425
7424
  "description": "ContextMenu root + parts. Wrap the right-clickable area in `ContextMenu.Trigger`. Controlled via `onOpenChange`.",
7426
7425
  "figmaUrl": null,
7427
7426
  "figmaId": null,
7428
- "figmaLink": "TODO:hds-master:ContextMenu",
7427
+ "figmaLink": null,
7429
7428
  "tier": "primitive",
7430
7429
  "preview": {
7431
7430
  "exportName": "ContextMenu",
7432
7431
  "sizing": "panel"
7433
7432
  },
7434
7433
  "consumers": [
7435
- "src/app/components/context-menu.figma.tsx",
7436
7434
  "src/app/components/context-menu.test.tsx",
7437
7435
  "src/stories/context-menu.stories.tsx"
7438
7436
  ],
@@ -7457,14 +7455,13 @@
7457
7455
  "description": "Text field + calendar popover for picking a single date.",
7458
7456
  "figmaUrl": null,
7459
7457
  "figmaId": null,
7460
- "figmaLink": "TODO:hds-master:DateInput",
7458
+ "figmaLink": null,
7461
7459
  "tier": "pattern",
7462
7460
  "preview": {
7463
7461
  "exportName": "DateInput",
7464
7462
  "sizing": "panel"
7465
7463
  },
7466
7464
  "consumers": [
7467
- "src/app/components/date-input.figma.tsx",
7468
7465
  "src/app/components/date-input.test.tsx",
7469
7466
  "src/stories/date-input.stories.tsx"
7470
7467
  ],
@@ -7518,14 +7515,13 @@
7518
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} />",
7519
7516
  "figmaUrl": null,
7520
7517
  "figmaId": null,
7521
- "figmaLink": "TODO:hds-master:DateRangeInput",
7518
+ "figmaLink": null,
7522
7519
  "tier": "pattern",
7523
7520
  "preview": {
7524
7521
  "exportName": "DateRangeInput",
7525
7522
  "sizing": "panel"
7526
7523
  },
7527
7524
  "consumers": [
7528
- "src/app/components/date-range-input.figma.tsx",
7529
7525
  "src/app/components/date-range-input.test.tsx",
7530
7526
  "src/stories/date-range-input.stories.tsx"
7531
7527
  ],
@@ -7583,14 +7579,13 @@
7583
7579
  "description": "Text date field + calendar popover, paired with a native time field, producing one Date.",
7584
7580
  "figmaUrl": null,
7585
7581
  "figmaId": null,
7586
- "figmaLink": "TODO:hds-master:DateTimeInput",
7582
+ "figmaLink": null,
7587
7583
  "tier": "pattern",
7588
7584
  "preview": {
7589
7585
  "exportName": "DateTimeInput",
7590
7586
  "sizing": "panel"
7591
7587
  },
7592
7588
  "consumers": [
7593
- "src/app/components/date-time-input.figma.tsx",
7594
7589
  "src/app/components/date-time-input.test.tsx",
7595
7590
  "src/stories/date-time-input.stories.tsx"
7596
7591
  ],
@@ -7640,14 +7635,13 @@
7640
7635
  "description": "HoverCard root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`; tune timing with `openDelay`/`closeDelay`.",
7641
7636
  "figmaUrl": null,
7642
7637
  "figmaId": null,
7643
- "figmaLink": "TODO:hds-master:HoverCard",
7638
+ "figmaLink": null,
7644
7639
  "tier": "primitive",
7645
7640
  "preview": {
7646
7641
  "exportName": "HoverCard",
7647
7642
  "sizing": "panel"
7648
7643
  },
7649
7644
  "consumers": [
7650
- "src/app/components/hover-card.figma.tsx",
7651
7645
  "src/app/components/hover-card.test.tsx",
7652
7646
  "src/stories/hover-card.stories.tsx"
7653
7647
  ],
@@ -7672,14 +7666,13 @@
7672
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} />",
7673
7667
  "figmaUrl": null,
7674
7668
  "figmaId": null,
7675
- "figmaLink": "TODO:hds-master:MultiSelector",
7669
+ "figmaLink": null,
7676
7670
  "tier": "pattern",
7677
7671
  "preview": {
7678
7672
  "exportName": "MultiSelector",
7679
7673
  "sizing": "panel"
7680
7674
  },
7681
7675
  "consumers": [
7682
- "src/app/components/multi-selector.figma.tsx",
7683
7676
  "src/app/components/multi-selector.test.tsx",
7684
7677
  "src/stories/multi-selector.stories.tsx"
7685
7678
  ],
@@ -7726,7 +7719,7 @@
7726
7719
  "description": "A native time field skinned with HDS input chrome. Value is a `HH:mm` string.",
7727
7720
  "figmaUrl": null,
7728
7721
  "figmaId": null,
7729
- "figmaLink": "TODO:hds-master:TimeInput",
7722
+ "figmaLink": null,
7730
7723
  "tier": "primitive",
7731
7724
  "preview": {
7732
7725
  "exportName": "TimeInput",
@@ -7734,7 +7727,6 @@
7734
7727
  },
7735
7728
  "consumers": [
7736
7729
  "src/app/components/date-time-input.tsx",
7737
- "src/app/components/time-input.figma.tsx",
7738
7730
  "src/app/components/time-input.test.tsx",
7739
7731
  "src/stories/date-time-input.stories.tsx",
7740
7732
  "src/stories/time-input.stories.tsx"
@@ -7770,14 +7762,13 @@
7770
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.",
7771
7763
  "figmaUrl": null,
7772
7764
  "figmaId": null,
7773
- "figmaLink": "TODO:hds-master:ToggleButton",
7765
+ "figmaLink": null,
7774
7766
  "tier": "primitive",
7775
7767
  "preview": {
7776
7768
  "exportName": "ToggleButton",
7777
7769
  "sizing": "panel"
7778
7770
  },
7779
7771
  "consumers": [
7780
- "src/app/components/toggle-button.figma.tsx",
7781
7772
  "src/app/components/toggle-button.test.tsx",
7782
7773
  "src/stories/toggle-button.stories.tsx"
7783
7774
  ],
@@ -7824,7 +7815,7 @@
7824
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.",
7825
7816
  "figmaUrl": null,
7826
7817
  "figmaId": null,
7827
- "figmaLink": "TODO:hds-master:Box",
7818
+ "figmaLink": null,
7828
7819
  "tier": "primitive",
7829
7820
  "preview": {
7830
7821
  "exportName": "Box",
@@ -7841,6 +7832,7 @@
7841
7832
  "src/app/components/frame.tsx",
7842
7833
  "src/app/components/sidebar.tsx",
7843
7834
  "src/app/components/switcher.tsx",
7835
+ "src/app/components/toggle.tsx",
7844
7836
  "src/stories/box.stories.tsx",
7845
7837
  "src/stories/patterns-layout.stories.tsx"
7846
7838
  ],
@@ -7878,7 +7870,7 @@
7878
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).",
7879
7871
  "figmaUrl": null,
7880
7872
  "figmaId": null,
7881
- "figmaLink": "TODO:hds-master:Bleed",
7873
+ "figmaLink": null,
7882
7874
  "tier": "primitive",
7883
7875
  "preview": {
7884
7876
  "exportName": "Bleed",
@@ -7944,7 +7936,7 @@
7944
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/",
7945
7937
  "figmaUrl": null,
7946
7938
  "figmaId": null,
7947
- "figmaLink": "TODO:hds-master:Center",
7939
+ "figmaLink": null,
7948
7940
  "tier": "primitive",
7949
7941
  "preview": {
7950
7942
  "exportName": "Center",
@@ -8013,7 +8005,7 @@
8013
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/",
8014
8006
  "figmaUrl": null,
8015
8007
  "figmaId": null,
8016
- "figmaLink": "TODO:hds-master:Cluster",
8008
+ "figmaLink": null,
8017
8009
  "tier": "primitive",
8018
8010
  "preview": {
8019
8011
  "exportName": "Cluster",
@@ -8092,7 +8084,7 @@
8092
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/",
8093
8085
  "figmaUrl": null,
8094
8086
  "figmaId": null,
8095
- "figmaLink": "TODO:hds-master:Cover",
8087
+ "figmaLink": null,
8096
8088
  "tier": "primitive",
8097
8089
  "preview": {
8098
8090
  "exportName": "Cover",
@@ -8168,7 +8160,7 @@
8168
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/",
8169
8161
  "figmaUrl": null,
8170
8162
  "figmaId": null,
8171
- "figmaLink": "TODO:hds-master:Frame",
8163
+ "figmaLink": null,
8172
8164
  "tier": "primitive",
8173
8165
  "preview": {
8174
8166
  "exportName": "Frame",
@@ -8230,7 +8222,7 @@
8230
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/",
8231
8223
  "figmaUrl": null,
8232
8224
  "figmaId": null,
8233
- "figmaLink": "TODO:hds-master:Sidebar",
8225
+ "figmaLink": null,
8234
8226
  "tier": "primitive",
8235
8227
  "preview": {
8236
8228
  "exportName": "Sidebar",
@@ -8310,7 +8302,7 @@
8310
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/",
8311
8303
  "figmaUrl": null,
8312
8304
  "figmaId": null,
8313
- "figmaLink": "TODO:hds-master:Switcher",
8305
+ "figmaLink": null,
8314
8306
  "tier": "primitive",
8315
8307
  "preview": {
8316
8308
  "exportName": "Switcher",
@@ -8375,7 +8367,7 @@
8375
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.",
8376
8368
  "figmaUrl": null,
8377
8369
  "figmaId": null,
8378
- "figmaLink": "TODO:hds-master:Pin",
8370
+ "figmaLink": null,
8379
8371
  "tier": "primitive",
8380
8372
  "preview": {
8381
8373
  "exportName": "Pin",
@@ -8428,7 +8420,7 @@
8428
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.",
8429
8421
  "figmaUrl": null,
8430
8422
  "figmaId": null,
8431
- "figmaLink": "TODO:hds-master:Reveal",
8423
+ "figmaLink": null,
8432
8424
  "tier": "primitive",
8433
8425
  "preview": {
8434
8426
  "exportName": "Reveal",
@@ -8477,6 +8469,69 @@
8477
8469
  "requiredProps": [],
8478
8470
  "a11yRules": []
8479
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
+ },
8480
8535
  "HdsPhosphor": {
8481
8536
  "category": "Compiler",
8482
8537
  "filePath": "scripts/hds-jsx-compiler.mjs",
@@ -8883,15 +8938,15 @@
8883
8938
  },
8884
8939
  "AutoPreviewSpecimen": {
8885
8940
  "category": "Uncategorized",
8886
- "categorySource": "missing-jsdoc",
8887
- "governedCategory": false,
8888
- "hidden": false,
8941
+ "categorySource": "internal-jsdoc",
8942
+ "governedCategory": true,
8943
+ "hidden": true,
8889
8944
  "docExempt": true,
8890
8945
  "filePath": "src/app/components/componentPreviewRegistry.tsx",
8891
8946
  "description": "/** @internal @doc-exempt: demo-preview-helper — not part of @hirobius/design-system public API.",
8892
8947
  "figmaUrl": null,
8893
8948
  "figmaId": null,
8894
- "figmaLink": "TODO:hds-master:AutoPreviewSpecimen",
8949
+ "figmaLink": null,
8895
8950
  "tier": "utility",
8896
8951
  "preview": {
8897
8952
  "exportName": "AutoPreviewSpecimen",
@@ -8933,7 +8988,7 @@
8933
8988
  "docExempt": true,
8934
8989
  "variantAxes": [],
8935
8990
  "componentProperties": [],
8936
- "figmaLink": "TODO:hds-master:VariantPreviewDeck"
8991
+ "figmaLink": null
8937
8992
  },
8938
8993
  "HistoryCard": {
8939
8994
  "category": "Uncategorized",
@@ -8972,7 +9027,7 @@
8972
9027
  "tier": "utility",
8973
9028
  "docExempt": true,
8974
9029
  "sourcePath": "src/app/components/HistoryCard.tsx",
8975
- "figmaLink": "TODO:hds-master:HistoryCard"
9030
+ "figmaLink": null
8976
9031
  },
8977
9032
  "ComponentPreview": {
8978
9033
  "category": "Uncategorized",
@@ -9003,7 +9058,7 @@
9003
9058
  "docExempt": true,
9004
9059
  "variantAxes": [],
9005
9060
  "componentProperties": [],
9006
- "figmaLink": "TODO:hds-master:ComponentPreview"
9061
+ "figmaLink": null
9007
9062
  },
9008
9063
  "AnimatedLabel": {
9009
9064
  "category": "Uncategorized",
@@ -9033,7 +9088,7 @@
9033
9088
  "docExempt": true,
9034
9089
  "variantAxes": [],
9035
9090
  "componentProperties": [],
9036
- "figmaLink": "TODO:hds-master:AnimatedLabel"
9091
+ "figmaLink": null
9037
9092
  },
9038
9093
  "ControlsPanel": {
9039
9094
  "category": "Uncategorized",
@@ -9064,7 +9119,7 @@
9064
9119
  "docExempt": true,
9065
9120
  "variantAxes": [],
9066
9121
  "componentProperties": [],
9067
- "figmaLink": "TODO:hds-master:ControlsPanel"
9122
+ "figmaLink": null
9068
9123
  },
9069
9124
  "ControlsSection": {
9070
9125
  "category": "Uncategorized",
@@ -9095,7 +9150,7 @@
9095
9150
  "docExempt": true,
9096
9151
  "variantAxes": [],
9097
9152
  "componentProperties": [],
9098
- "figmaLink": "TODO:hds-master:ControlsSection"
9153
+ "figmaLink": null
9099
9154
  },
9100
9155
  "HdsMobileTopBar": {
9101
9156
  "category": "Uncategorized",
@@ -9125,7 +9180,7 @@
9125
9180
  "docExempt": true,
9126
9181
  "variantAxes": [],
9127
9182
  "componentProperties": [],
9128
- "figmaLink": "TODO:hds-master:HdsMobileTopBar"
9183
+ "figmaLink": null
9129
9184
  },
9130
9185
  "PreviewFrame": {
9131
9186
  "category": "Uncategorized",
@@ -9157,7 +9212,7 @@
9157
9212
  "docExempt": true,
9158
9213
  "variantAxes": [],
9159
9214
  "componentProperties": [],
9160
- "figmaLink": "TODO:hds-master:PreviewFrame"
9215
+ "figmaLink": null
9161
9216
  },
9162
9217
  "HdsSidebarUtilityButton": {
9163
9218
  "category": "Uncategorized",
@@ -9187,7 +9242,7 @@
9187
9242
  "docExempt": true,
9188
9243
  "variantAxes": [],
9189
9244
  "componentProperties": [],
9190
- "figmaLink": "TODO:hds-master:HdsSidebarUtilityButton"
9245
+ "figmaLink": null
9191
9246
  },
9192
9247
  "ImageLightbox": {
9193
9248
  "category": "Uncategorized",
@@ -9217,13 +9272,13 @@
9217
9272
  "docExempt": true,
9218
9273
  "variantAxes": [],
9219
9274
  "componentProperties": [],
9220
- "figmaLink": "TODO:hds-master:ImageLightbox"
9275
+ "figmaLink": null
9221
9276
  },
9222
9277
  "SketchButton": {
9223
9278
  "category": "Uncategorized",
9224
- "categorySource": "missing-jsdoc",
9225
- "governedCategory": false,
9226
- "hidden": false,
9279
+ "categorySource": "internal-jsdoc",
9280
+ "governedCategory": true,
9281
+ "hidden": true,
9227
9282
  "filePath": "src/app/components/sketch-controls.tsx",
9228
9283
  "description": "",
9229
9284
  "figmaUrl": null,
@@ -9245,13 +9300,13 @@
9245
9300
  "docExempt": true,
9246
9301
  "variantAxes": [],
9247
9302
  "componentProperties": [],
9248
- "figmaLink": "TODO:hds-master:SketchButton"
9303
+ "figmaLink": null
9249
9304
  },
9250
9305
  "SketchCheckbox": {
9251
9306
  "category": "Uncategorized",
9252
- "categorySource": "missing-jsdoc",
9253
- "governedCategory": false,
9254
- "hidden": false,
9307
+ "categorySource": "internal-jsdoc",
9308
+ "governedCategory": true,
9309
+ "hidden": true,
9255
9310
  "filePath": "src/app/components/sketch-controls.tsx",
9256
9311
  "description": "",
9257
9312
  "figmaUrl": null,
@@ -9273,13 +9328,13 @@
9273
9328
  "docExempt": true,
9274
9329
  "variantAxes": [],
9275
9330
  "componentProperties": [],
9276
- "figmaLink": "TODO:hds-master:SketchCheckbox"
9331
+ "figmaLink": null
9277
9332
  },
9278
9333
  "SketchPanelToggle": {
9279
9334
  "category": "Uncategorized",
9280
- "categorySource": "missing-jsdoc",
9281
- "governedCategory": false,
9282
- "hidden": false,
9335
+ "categorySource": "internal-jsdoc",
9336
+ "governedCategory": true,
9337
+ "hidden": true,
9283
9338
  "filePath": "src/app/components/sketch-controls.tsx",
9284
9339
  "description": "",
9285
9340
  "figmaUrl": null,
@@ -9301,13 +9356,13 @@
9301
9356
  "docExempt": true,
9302
9357
  "variantAxes": [],
9303
9358
  "componentProperties": [],
9304
- "figmaLink": "TODO:hds-master:SketchPanelToggle"
9359
+ "figmaLink": null
9305
9360
  },
9306
9361
  "SketchRange": {
9307
9362
  "category": "Uncategorized",
9308
- "categorySource": "missing-jsdoc",
9309
- "governedCategory": false,
9310
- "hidden": false,
9363
+ "categorySource": "internal-jsdoc",
9364
+ "governedCategory": true,
9365
+ "hidden": true,
9311
9366
  "filePath": "src/app/components/sketch-controls.tsx",
9312
9367
  "description": "",
9313
9368
  "figmaUrl": null,
@@ -9329,13 +9384,13 @@
9329
9384
  "docExempt": true,
9330
9385
  "variantAxes": [],
9331
9386
  "componentProperties": [],
9332
- "figmaLink": "TODO:hds-master:SketchRange"
9387
+ "figmaLink": null
9333
9388
  },
9334
9389
  "SketchTextarea": {
9335
9390
  "category": "Uncategorized",
9336
- "categorySource": "missing-jsdoc",
9337
- "governedCategory": false,
9338
- "hidden": false,
9391
+ "categorySource": "internal-jsdoc",
9392
+ "governedCategory": true,
9393
+ "hidden": true,
9339
9394
  "filePath": "src/app/components/sketch-controls.tsx",
9340
9395
  "description": "",
9341
9396
  "figmaUrl": null,
@@ -9357,7 +9412,7 @@
9357
9412
  "docExempt": true,
9358
9413
  "variantAxes": [],
9359
9414
  "componentProperties": [],
9360
- "figmaLink": "TODO:hds-master:SketchTextarea"
9415
+ "figmaLink": null
9361
9416
  },
9362
9417
  "MorphCard": {
9363
9418
  "category": "Uncategorized",
@@ -9378,7 +9433,7 @@
9378
9433
  "tokenMapping": {},
9379
9434
  "variantAxes": [],
9380
9435
  "componentProperties": [],
9381
- "figmaLink": "TODO:hds-master:MorphCard"
9436
+ "figmaLink": null
9382
9437
  },
9383
9438
  "Tooltip": {
9384
9439
  "category": "Uncategorized",
@@ -9404,7 +9459,7 @@
9404
9459
  "tokenMapping": {},
9405
9460
  "variantAxes": [],
9406
9461
  "componentProperties": [],
9407
- "figmaLink": "TODO:hds-master:Tooltip"
9462
+ "figmaLink": null
9408
9463
  },
9409
9464
  "NotFoundPattern": {
9410
9465
  "category": "Feedback",
@@ -9435,7 +9490,7 @@
9435
9490
  "componentProperties": [],
9436
9491
  "tier": "utility",
9437
9492
  "docExempt": true,
9438
- "figmaLink": "TODO:hds-master:NotFoundPattern"
9493
+ "figmaLink": null
9439
9494
  },
9440
9495
  "CascadeText": {
9441
9496
  "category": "Uncategorized",
@@ -9456,7 +9511,7 @@
9456
9511
  "tokenMapping": {},
9457
9512
  "variantAxes": [],
9458
9513
  "componentProperties": [],
9459
- "figmaLink": "TODO:hds-master:CascadeText"
9514
+ "figmaLink": null
9460
9515
  },
9461
9516
  "DocPageSpec": {
9462
9517
  "category": "Uncategorized",
@@ -9477,7 +9532,7 @@
9477
9532
  "tokenMapping": {},
9478
9533
  "variantAxes": [],
9479
9534
  "componentProperties": [],
9480
- "figmaLink": "TODO:hds-master:DocPageSpec"
9535
+ "figmaLink": null
9481
9536
  },
9482
9537
  "TokenDisplayToggle": {
9483
9538
  "category": "Uncategorized",
@@ -9500,7 +9555,7 @@
9500
9555
  "tokenMapping": {},
9501
9556
  "variantAxes": [],
9502
9557
  "componentProperties": [],
9503
- "figmaLink": "TODO:hds-master:TokenDisplayToggle"
9558
+ "figmaLink": null
9504
9559
  },
9505
9560
  "HdsLegacyTokenGovernancePanel": {
9506
9561
  "category": "Uncategorized",
@@ -9546,7 +9601,7 @@
9546
9601
  "componentProperties": [],
9547
9602
  "tier": "utility",
9548
9603
  "docExempt": false,
9549
- "figmaLink": "TODO:hds-master:HdsLegacyTokenGovernancePanel"
9604
+ "figmaLink": null
9550
9605
  },
9551
9606
  "LegacyTokenList": {
9552
9607
  "category": "Lab",
@@ -9592,7 +9647,7 @@
9592
9647
  "componentProperties": [],
9593
9648
  "tier": "utility",
9594
9649
  "docExempt": false,
9595
- "figmaLink": "TODO:hds-master:LegacyTokenList"
9650
+ "figmaLink": null
9596
9651
  },
9597
9652
  "TokenCollectionList": {
9598
9653
  "category": "Lab",
@@ -9633,7 +9688,7 @@
9633
9688
  "componentProperties": [],
9634
9689
  "tier": "utility",
9635
9690
  "docExempt": false,
9636
- "figmaLink": "TODO:hds-master:TokenCollectionList"
9691
+ "figmaLink": null
9637
9692
  },
9638
9693
  "TokenList": {
9639
9694
  "category": "Uncategorized",
@@ -9663,13 +9718,13 @@
9663
9718
  "docExempt": true,
9664
9719
  "variantAxes": [],
9665
9720
  "componentProperties": [],
9666
- "figmaLink": "TODO:hds-master:TokenList"
9721
+ "figmaLink": null
9667
9722
  },
9668
9723
  "ErrorBoundary": {
9669
9724
  "category": "Uncategorized",
9670
- "categorySource": "missing-jsdoc",
9671
- "governedCategory": false,
9672
- "hidden": false,
9725
+ "categorySource": "internal-jsdoc",
9726
+ "governedCategory": true,
9727
+ "hidden": true,
9673
9728
  "docExempt": true,
9674
9729
  "filePath": "src/app/components/error-boundary.tsx",
9675
9730
  "description": "ErrorBoundary — slot-scoped recovery surface for runtime render failures.",
@@ -9688,7 +9743,7 @@
9688
9743
  "tokenMapping": {},
9689
9744
  "variantAxes": [],
9690
9745
  "componentProperties": [],
9691
- "figmaLink": "TODO:hds-master:ErrorBoundary"
9746
+ "figmaLink": null
9692
9747
  },
9693
9748
  "ApiReference": {
9694
9749
  "category": "Utilities",
@@ -9700,7 +9755,7 @@
9700
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).",
9701
9756
  "figmaUrl": null,
9702
9757
  "figmaId": null,
9703
- "figmaLink": "TODO:hds-master:ApiReference",
9758
+ "figmaLink": null,
9704
9759
  "tier": "utility",
9705
9760
  "preview": {
9706
9761
  "exportName": "ApiReference",
@@ -9721,17 +9776,13 @@
9721
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.",
9722
9777
  "figmaUrl": null,
9723
9778
  "figmaId": null,
9724
- "figmaLink": "TODO:hds-master:DocPageHeader",
9779
+ "figmaLink": null,
9725
9780
  "tier": "utility",
9726
9781
  "preview": {
9727
9782
  "exportName": "DocPageHeader",
9728
9783
  "sizing": "panel"
9729
9784
  },
9730
- "consumers": [
9731
- "src/app/pages/docs/patterns/_template.tsx",
9732
- "src/app/pages/docs/templates/_template.tsx",
9733
- "src/app/pages/SketchPage.tsx"
9734
- ],
9785
+ "consumers": [],
9735
9786
  "tokenMapping": {},
9736
9787
  "variantAxes": [],
9737
9788
  "componentProperties": []
@@ -9746,7 +9797,7 @@
9746
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.",
9747
9798
  "figmaUrl": null,
9748
9799
  "figmaId": null,
9749
- "figmaLink": "TODO:hds-master:ThemeToggle",
9800
+ "figmaLink": null,
9750
9801
  "tier": "utility",
9751
9802
  "preview": {
9752
9803
  "exportName": "ThemeToggle",
@@ -9769,7 +9820,7 @@
9769
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.",
9770
9821
  "figmaUrl": null,
9771
9822
  "figmaId": null,
9772
- "figmaLink": "TODO:hds-master:VariantStrip",
9823
+ "figmaLink": null,
9773
9824
  "tier": "utility",
9774
9825
  "preview": {
9775
9826
  "exportName": "VariantStrip",
@@ -9789,7 +9840,7 @@
9789
9840
  "filePath": "src/app/components/demo-block.tsx",
9790
9841
  "figmaUrl": null,
9791
9842
  "figmaId": null,
9792
- "figmaLink": "TODO:hds-master:DemoBlock",
9843
+ "figmaLink": null,
9793
9844
  "tier": "utility",
9794
9845
  "preview": {
9795
9846
  "exportName": "DemoBlock",
@@ -9810,7 +9861,7 @@
9810
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.",
9811
9862
  "figmaUrl": null,
9812
9863
  "figmaId": null,
9813
- "figmaLink": "TODO:hds-master:PageFooter",
9864
+ "figmaLink": null,
9814
9865
  "tier": "utility",
9815
9866
  "preview": {
9816
9867
  "exportName": "PageFooter",
@@ -10129,7 +10180,7 @@
10129
10180
  "path": "primitive.color.lilac.500",
10130
10181
  "cssVar": "--primitive-color-lilac-500",
10131
10182
  "type": "color",
10132
- "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.",
10133
10184
  "value": "#6f3fd4"
10134
10185
  },
10135
10186
  {
@@ -10508,14 +10559,14 @@
10508
10559
  "path": "primitive.typography.size.5xl",
10509
10560
  "cssVar": "--primitive-typography-size-5xl",
10510
10561
  "type": "dimension",
10511
- "value": "80px"
10562
+ "description": "Swiss-canon display size. Static desktop value; fluid in theme.css.",
10563
+ "value": "72px"
10512
10564
  },
10513
10565
  {
10514
- "path": "primitive.typography.size.7xl",
10515
- "cssVar": "--primitive-typography-size-7xl",
10566
+ "path": "primitive.typography.size.6xl",
10567
+ "cssVar": "--primitive-typography-size-6xl",
10516
10568
  "type": "dimension",
10517
- "description": "Swiss-canon display size. Static desktop value; fluid in theme.css.",
10518
- "value": "72px"
10569
+ "value": "80px"
10519
10570
  },
10520
10571
  {
10521
10572
  "path": "primitive.typography.weight.light",
@@ -10990,12 +11041,12 @@
10990
11041
  "path": "semantic.color.surface.accent",
10991
11042
  "cssVar": "--semantic-color-surface-accent",
10992
11043
  "type": "color",
10993
- "description": "Accent-colored background",
10994
- "alias": "{primitive.color.blue.500}",
10995
- "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",
10996
11047
  "dark": {
10997
- "alias": "{primitive.color.blue.500}",
10998
- "resolvedValue": "#1E2EFD"
11048
+ "alias": "{primitive.color.neutral.100}",
11049
+ "resolvedValue": "#f5f5f5"
10999
11050
  }
11000
11051
  },
11001
11052
  {
@@ -11003,11 +11054,71 @@
11003
11054
  "cssVar": "--semantic-color-surface-accentSubtle",
11004
11055
  "type": "color",
11005
11056
  "description": "Faint accent tint for hover states or highlights",
11006
- "alias": "{primitive.color.blue.50}",
11007
- "resolvedValue": "oklch(0.96 0.03 266.54)",
11057
+ "alias": "{primitive.color.neutral.100}",
11058
+ "resolvedValue": "#f5f5f5",
11008
11059
  "dark": {
11009
- "alias": "{primitive.color.blue.900}",
11010
- "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"
11011
11122
  }
11012
11123
  },
11013
11124
  {
@@ -11058,22 +11169,60 @@
11058
11169
  "path": "semantic.color.content.accent",
11059
11170
  "cssVar": "--semantic-color-content-accent",
11060
11171
  "type": "color",
11061
- "alias": "{primitive.color.blue.500}",
11062
- "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",
11063
11175
  "dark": {
11064
- "alias": "{primitive.color.blue.300}",
11065
- "resolvedValue": "oklch(0.70 0.2903 266.54)"
11176
+ "alias": "{primitive.color.neutral.100}",
11177
+ "resolvedValue": "#f5f5f5"
11066
11178
  }
11067
11179
  },
11068
11180
  {
11069
11181
  "path": "semantic.color.content.onAccent",
11070
11182
  "cssVar": "--semantic-color-content-onAccent",
11071
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.",
11072
11185
  "alias": "{primitive.color.neutral.white}",
11073
11186
  "resolvedValue": "#ffffff",
11074
11187
  "dark": {
11075
- "alias": "{primitive.color.neutral.white}",
11076
- "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"
11077
11226
  }
11078
11227
  },
11079
11228
  {
@@ -11087,6 +11236,18 @@
11087
11236
  "resolvedValue": "#404040"
11088
11237
  }
11089
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
+ },
11090
11251
  {
11091
11252
  "path": "semantic.color.border.subdued",
11092
11253
  "cssVar": "--semantic-color-border-subdued",
@@ -11125,11 +11286,36 @@
11125
11286
  "path": "semantic.color.border.accent",
11126
11287
  "cssVar": "--semantic-color-border-accent",
11127
11288
  "type": "color",
11128
- "alias": "{primitive.color.blue.500}",
11129
- "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",
11130
11316
  "dark": {
11131
- "alias": "{primitive.color.blue.500}",
11132
- "resolvedValue": "#1E2EFD"
11317
+ "alias": "{primitive.color.amber.400}",
11318
+ "resolvedValue": "#fbbf24"
11133
11319
  }
11134
11320
  },
11135
11321
  {
@@ -11615,12 +11801,12 @@
11615
11801
  "path": "semantic.accent.rest",
11616
11802
  "cssVar": "--semantic-accent-rest",
11617
11803
  "type": "color",
11618
- "description": "Default accent fill for interactive elements at rest.",
11619
- "alias": "{primitive.color.blue.500}",
11620
- "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",
11621
11807
  "dark": {
11622
- "alias": "{primitive.color.blue.500}",
11623
- "resolvedValue": "#1E2EFD"
11808
+ "alias": "{primitive.color.neutral.100}",
11809
+ "resolvedValue": "#f5f5f5"
11624
11810
  }
11625
11811
  },
11626
11812
  {
@@ -11628,11 +11814,11 @@
11628
11814
  "cssVar": "--semantic-accent-hover",
11629
11815
  "type": "color",
11630
11816
  "description": "Accent fill on pointer hover.",
11631
- "alias": "{primitive.color.blue.600}",
11632
- "resolvedValue": "oklch(0.45 0.2903 266.54)",
11817
+ "alias": "{primitive.color.neutral.800}",
11818
+ "resolvedValue": "#262626",
11633
11819
  "dark": {
11634
- "alias": "{primitive.color.blue.450}",
11635
- "resolvedValue": "oklch(0.56 0.29 266.60)"
11820
+ "alias": "{primitive.color.neutral.200}",
11821
+ "resolvedValue": "#e5e5e5"
11636
11822
  }
11637
11823
  },
11638
11824
  {
@@ -11640,11 +11826,11 @@
11640
11826
  "cssVar": "--semantic-accent-pressed",
11641
11827
  "type": "color",
11642
11828
  "description": "Accent fill during active press.",
11643
- "alias": "{primitive.color.blue.700}",
11644
- "resolvedValue": "oklch(0.44 0.2903 266.54)",
11829
+ "alias": "{primitive.color.neutral.950}",
11830
+ "resolvedValue": "#0a0a0a",
11645
11831
  "dark": {
11646
- "alias": "{primitive.color.blue.400}",
11647
- "resolvedValue": "oklch(0.65 0.2903 266.54)"
11832
+ "alias": "{primitive.color.neutral.300}",
11833
+ "resolvedValue": "#d4d4d4"
11648
11834
  }
11649
11835
  },
11650
11836
  {
@@ -11652,11 +11838,11 @@
11652
11838
  "cssVar": "--semantic-accent-inactive",
11653
11839
  "type": "color",
11654
11840
  "description": "Accent fill for inactive or unselected accent elements.",
11655
- "alias": "{primitive.color.blue.200}",
11656
- "resolvedValue": "oklch(0.88 0.07 266.54)",
11841
+ "alias": "{primitive.color.neutral.400}",
11842
+ "resolvedValue": "#a3a3a3",
11657
11843
  "dark": {
11658
- "alias": "{primitive.color.blue.200}",
11659
- "resolvedValue": "oklch(0.88 0.07 266.54)"
11844
+ "alias": "{primitive.color.neutral.600}",
11845
+ "resolvedValue": "#525252"
11660
11846
  }
11661
11847
  },
11662
11848
  {
@@ -11664,23 +11850,23 @@
11664
11850
  "cssVar": "--semantic-accent-disabled",
11665
11851
  "type": "color",
11666
11852
  "description": "Accent fill for disabled accent elements.",
11667
- "alias": "{primitive.color.blue.100}",
11668
- "resolvedValue": "oklch(0.92 0.04 266.54)",
11853
+ "alias": "{primitive.color.neutral.300}",
11854
+ "resolvedValue": "#d4d4d4",
11669
11855
  "dark": {
11670
- "alias": "{primitive.color.blue.100}",
11671
- "resolvedValue": "oklch(0.92 0.04 266.54)"
11856
+ "alias": "{primitive.color.neutral.700}",
11857
+ "resolvedValue": "#404040"
11672
11858
  }
11673
11859
  },
11674
11860
  {
11675
11861
  "path": "semantic.accent.content",
11676
11862
  "cssVar": "--semantic-accent-content",
11677
11863
  "type": "color",
11678
- "description": "Text and icon color on neutral surfaces with accent intent.",
11679
- "alias": "{primitive.color.blue.500}",
11680
- "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",
11681
11867
  "dark": {
11682
- "alias": "{primitive.color.blue.300}",
11683
- "resolvedValue": "oklch(0.70 0.2903 266.54)"
11868
+ "alias": "{primitive.color.neutral.100}",
11869
+ "resolvedValue": "#f5f5f5"
11684
11870
  }
11685
11871
  },
11686
11872
  {
@@ -11688,11 +11874,11 @@
11688
11874
  "cssVar": "--semantic-accent-contentHover",
11689
11875
  "type": "color",
11690
11876
  "description": "Accent content color on pointer hover.",
11691
- "alias": "{primitive.color.blue.600}",
11692
- "resolvedValue": "oklch(0.45 0.2903 266.54)",
11877
+ "alias": "{primitive.color.neutral.700}",
11878
+ "resolvedValue": "#404040",
11693
11879
  "dark": {
11694
- "alias": "{primitive.color.blue.200}",
11695
- "resolvedValue": "oklch(0.88 0.07 266.54)"
11880
+ "alias": "{primitive.color.neutral.300}",
11881
+ "resolvedValue": "#d4d4d4"
11696
11882
  }
11697
11883
  },
11698
11884
  {
@@ -11700,20 +11886,20 @@
11700
11886
  "cssVar": "--semantic-accent-subtle",
11701
11887
  "type": "color",
11702
11888
  "description": "Low-emphasis accent tint for hover backgrounds and selection highlights.",
11703
- "alias": "{primitive.color.blue.50}",
11704
- "resolvedValue": "oklch(0.96 0.03 266.54)",
11889
+ "alias": "{primitive.color.neutral.100}",
11890
+ "resolvedValue": "#f5f5f5",
11705
11891
  "dark": {
11706
- "alias": "{primitive.color.blue.900}",
11707
- "resolvedValue": "oklch(0.22 0.05 266.54)"
11892
+ "alias": "{primitive.color.neutral.800}",
11893
+ "resolvedValue": "#262626"
11708
11894
  }
11709
11895
  },
11710
11896
  {
11711
11897
  "path": "semantic.radius.action",
11712
11898
  "cssVar": "--semantic-radius-action",
11713
11899
  "type": "dimension",
11714
- "description": "Corner radius for interactive action elements like buttons and inputs.",
11715
- "alias": "{primitive.radius.12}",
11716
- "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"
11717
11903
  },
11718
11904
  {
11719
11905
  "path": "semantic.borderWidth.default",
@@ -11836,7 +12022,7 @@
11836
12022
  "type": "color",
11837
12023
  "description": "Nav item background fill when active or selected.",
11838
12024
  "alias": "{semantic.accent.subtle}",
11839
- "resolvedValue": "oklch(0.96 0.03 266.54)"
12025
+ "resolvedValue": "#f5f5f5"
11840
12026
  },
11841
12027
  {
11842
12028
  "path": "component.nav.borderActive",
@@ -11844,7 +12030,7 @@
11844
12030
  "type": "color",
11845
12031
  "description": "Nav item border color when active or selected.",
11846
12032
  "alias": "{semantic.color.surface.accent}",
11847
- "resolvedValue": "#1E2EFD"
12033
+ "resolvedValue": "#111111"
11848
12034
  },
11849
12035
  {
11850
12036
  "path": "component.nav.text",
@@ -11892,7 +12078,7 @@
11892
12078
  "type": "color",
11893
12079
  "description": "Base tag surface color.",
11894
12080
  "alias": "{semantic.accent.subtle}",
11895
- "resolvedValue": "oklch(0.96 0.03 266.54)"
12081
+ "resolvedValue": "#f5f5f5"
11896
12082
  },
11897
12083
  {
11898
12084
  "path": "component.tag.text",
@@ -11988,7 +12174,7 @@
11988
12174
  "type": "color",
11989
12175
  "description": "Active tag fill color.",
11990
12176
  "alias": "{semantic.accent.rest}",
11991
- "resolvedValue": "#1E2EFD"
12177
+ "resolvedValue": "#111111"
11992
12178
  },
11993
12179
  {
11994
12180
  "path": "component.tag.activeBorder",
@@ -11996,7 +12182,7 @@
11996
12182
  "type": "color",
11997
12183
  "description": "Active tag border color.",
11998
12184
  "alias": "{semantic.accent.rest}",
11999
- "resolvedValue": "#1E2EFD"
12185
+ "resolvedValue": "#111111"
12000
12186
  },
12001
12187
  {
12002
12188
  "path": "component.tag.activeHover",
@@ -12004,7 +12190,7 @@
12004
12190
  "type": "color",
12005
12191
  "description": "Active tag hover fill color.",
12006
12192
  "alias": "{semantic.accent.hover}",
12007
- "resolvedValue": "oklch(0.45 0.2903 266.54)"
12193
+ "resolvedValue": "#262626"
12008
12194
  },
12009
12195
  {
12010
12196
  "path": "component.badge.fontSize",
@@ -12088,7 +12274,7 @@
12088
12274
  "type": "color",
12089
12275
  "description": "Primary button fill.",
12090
12276
  "alias": "{semantic.color.surface.accent}",
12091
- "resolvedValue": "#1E2EFD"
12277
+ "resolvedValue": "#111111"
12092
12278
  },
12093
12279
  {
12094
12280
  "path": "component.button.bgHover",
@@ -12096,7 +12282,7 @@
12096
12282
  "type": "color",
12097
12283
  "description": "Primary button hover fill.",
12098
12284
  "alias": "{semantic.accent.hover}",
12099
- "resolvedValue": "oklch(0.45 0.2903 266.54)"
12285
+ "resolvedValue": "#262626"
12100
12286
  },
12101
12287
  {
12102
12288
  "path": "component.button.text",
@@ -12112,7 +12298,7 @@
12112
12298
  "type": "dimension",
12113
12299
  "description": "Button corner radius.",
12114
12300
  "alias": "{semantic.radius.action}",
12115
- "resolvedValue": "12px"
12301
+ "resolvedValue": "8px"
12116
12302
  },
12117
12303
  {
12118
12304
  "path": "component.button.paddingX",
@@ -12292,7 +12478,7 @@
12292
12478
  "type": "color",
12293
12479
  "description": "Disabled primary button fill.",
12294
12480
  "alias": "{semantic.color.surface.accentSubtle}",
12295
- "resolvedValue": "oklch(0.96 0.03 266.54)"
12481
+ "resolvedValue": "#f5f5f5"
12296
12482
  },
12297
12483
  {
12298
12484
  "path": "component.button.secondary.bg.rest",
@@ -12323,24 +12509,24 @@
12323
12509
  "cssVar": "--component-button-secondary-border-rest",
12324
12510
  "type": "color",
12325
12511
  "description": "Secondary button border.",
12326
- "alias": "{semantic.color.border.default}",
12327
- "resolvedValue": "#e5e5e5"
12512
+ "alias": "{semantic.color.border.interactive}",
12513
+ "resolvedValue": "#737373"
12328
12514
  },
12329
12515
  {
12330
12516
  "path": "component.button.secondary.border.hover",
12331
12517
  "cssVar": "--component-button-secondary-border-hover",
12332
12518
  "type": "color",
12333
12519
  "description": "Secondary button hover border.",
12334
- "alias": "{semantic.color.border.default}",
12335
- "resolvedValue": "#e5e5e5"
12520
+ "alias": "{semantic.color.border.interactive}",
12521
+ "resolvedValue": "#737373"
12336
12522
  },
12337
12523
  {
12338
12524
  "path": "component.button.secondary.border.pressed",
12339
12525
  "cssVar": "--component-button-secondary-border-pressed",
12340
12526
  "type": "color",
12341
12527
  "description": "Secondary button pressed border.",
12342
- "alias": "{semantic.color.border.default}",
12343
- "resolvedValue": "#e5e5e5"
12528
+ "alias": "{semantic.color.border.interactive}",
12529
+ "resolvedValue": "#737373"
12344
12530
  },
12345
12531
  {
12346
12532
  "path": "component.button.secondary.border.disabled",
@@ -12376,8 +12562,8 @@
12376
12562
  "path": "component.input.border",
12377
12563
  "cssVar": "--component-input-border",
12378
12564
  "type": "color",
12379
- "alias": "{semantic.color.border.default}",
12380
- "resolvedValue": "#e5e5e5"
12565
+ "alias": "{semantic.color.border.interactive}",
12566
+ "resolvedValue": "#737373"
12381
12567
  },
12382
12568
  {
12383
12569
  "path": "component.input.borderError",
@@ -12391,7 +12577,7 @@
12391
12577
  "cssVar": "--component-input-radius",
12392
12578
  "type": "dimension",
12393
12579
  "alias": "{semantic.radius.action}",
12394
- "resolvedValue": "12px"
12580
+ "resolvedValue": "8px"
12395
12581
  },
12396
12582
  {
12397
12583
  "path": "component.input.paddingX",
@@ -12506,7 +12692,7 @@
12506
12692
  "type": "color",
12507
12693
  "description": "Primary action surface. shadcn role: primary.",
12508
12694
  "alias": "{semantic.color.surface.accent}",
12509
- "resolvedValue": "#1E2EFD"
12695
+ "resolvedValue": "#111111"
12510
12696
  },
12511
12697
  {
12512
12698
  "path": "role.primary-foreground",
@@ -12554,7 +12740,7 @@
12554
12740
  "type": "color",
12555
12741
  "description": "Hover/active tinted bg. shadcn role: accent.",
12556
12742
  "alias": "{semantic.color.surface.accentSubtle}",
12557
- "resolvedValue": "oklch(0.96 0.03 266.54)"
12743
+ "resolvedValue": "#f5f5f5"
12558
12744
  },
12559
12745
  {
12560
12746
  "path": "role.accent-foreground",
@@ -12562,7 +12748,7 @@
12562
12748
  "type": "color",
12563
12749
  "description": "Text on accent surface. shadcn role: accent-foreground.",
12564
12750
  "alias": "{semantic.color.content.accent}",
12565
- "resolvedValue": "#1E2EFD"
12751
+ "resolvedValue": "#111111"
12566
12752
  },
12567
12753
  {
12568
12754
  "path": "role.destructive",
@@ -12593,8 +12779,8 @@
12593
12779
  "cssVar": "--role-input",
12594
12780
  "type": "color",
12595
12781
  "description": "Input field border. shadcn role: input.",
12596
- "alias": "{semantic.color.border.default}",
12597
- "resolvedValue": "#e5e5e5"
12782
+ "alias": "{semantic.color.border.interactive}",
12783
+ "resolvedValue": "#737373"
12598
12784
  },
12599
12785
  {
12600
12786
  "path": "role.ring",
@@ -12602,7 +12788,7 @@
12602
12788
  "type": "color",
12603
12789
  "description": "Focus ring color. shadcn role: ring.",
12604
12790
  "alias": "{semantic.color.border.accent}",
12605
- "resolvedValue": "#1E2EFD"
12791
+ "resolvedValue": "#111111"
12606
12792
  },
12607
12793
  {
12608
12794
  "path": "role.radius",
@@ -12610,7 +12796,7 @@
12610
12796
  "type": "dimension",
12611
12797
  "description": "Default border radius. shadcn role: radius.",
12612
12798
  "alias": "{semantic.radius.action}",
12613
- "resolvedValue": "12px"
12799
+ "resolvedValue": "8px"
12614
12800
  }
12615
12801
  ]
12616
12802
  }