@hirobius/design-system 0.21.0 → 0.22.0
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.
- package/AGENTS.md +2 -0
- package/CHANGELOG.md +969 -0
- package/CONSUMING.md +23 -9
- package/MIGRATIONS.md +603 -0
- package/README.md +2 -0
- package/UPGRADING.md +222 -0
- package/codemods/hds-prefix.mjs +28 -13
- package/codemods/jsx-fold.mjs +28 -13
- package/codemods/lib/atomic-write.mjs +28 -0
- package/codemods/lib/installed-version.mjs +354 -0
- package/codemods/lib/project.mjs +395 -0
- package/codemods/lib/record.mjs +110 -0
- package/codemods/lib/scan.mjs +323 -0
- package/codemods/lib/semver.mjs +57 -0
- package/codemods/not-found-pattern.mjs +3 -3
- package/codemods/patterns-subpath.mjs +28 -12
- package/codemods/registry.mjs +67 -0
- package/codemods/tile-grid.mjs +3 -3
- package/codemods/upgrade.mjs +909 -0
- package/dist/hirobius-ui.js +1 -1
- package/dist/manifest.js +3 -3
- package/dist/styles.css +1 -1
- package/dist/tokens.css +1 -1
- package/dist/types/src/app/components/alert-dialog.d.ts +1 -1
- package/dist/types/src/app/components/alert.d.ts +1 -1
- package/dist/types/src/app/components/asset-img.d.ts +1 -1
- package/dist/types/src/app/components/avatar-group.d.ts +1 -1
- package/dist/types/src/app/components/avatar.d.ts +1 -1
- package/dist/types/src/app/components/badge.d.ts +1 -1
- package/dist/types/src/app/components/blockquote.d.ts +1 -1
- package/dist/types/src/app/components/breadcrumb.d.ts +1 -1
- package/dist/types/src/app/components/button.d.ts +1 -1
- package/dist/types/src/app/components/callout.d.ts +1 -1
- package/dist/types/src/app/components/card.d.ts +1 -1
- package/dist/types/src/app/components/checkbox.d.ts +1 -1
- package/dist/types/src/app/components/code-block.d.ts +1 -1
- package/dist/types/src/app/components/combobox.d.ts +1 -1
- package/dist/types/src/app/components/data-table-section.d.ts +1 -1
- package/dist/types/src/app/components/destructive-section.d.ts +1 -1
- package/dist/types/src/app/components/dialog.d.ts +1 -1
- package/dist/types/src/app/components/disclosure.d.ts +1 -1
- package/dist/types/src/app/components/divider.d.ts +1 -1
- package/dist/types/src/app/components/empty-state.d.ts +1 -1
- package/dist/types/src/app/components/field.d.ts +1 -1
- package/dist/types/src/app/components/form-actions.d.ts +1 -1
- package/dist/types/src/app/components/form.d.ts +1 -1
- package/dist/types/src/app/components/hds-tooltip.d.ts +1 -1
- package/dist/types/src/app/components/icon.d.ts +1 -1
- package/dist/types/src/app/components/inline-link.d.ts +1 -1
- package/dist/types/src/app/components/input.d.ts +1 -1
- package/dist/types/src/app/components/kbd.d.ts +1 -1
- package/dist/types/src/app/components/menu.d.ts +1 -1
- package/dist/types/src/app/components/metadata-list.d.ts +1 -1
- package/dist/types/src/app/components/metric-tiles.d.ts +1 -1
- package/dist/types/src/app/components/pagination.d.ts +1 -1
- package/dist/types/src/app/components/popover.d.ts +1 -1
- package/dist/types/src/app/components/progress.d.ts +1 -1
- package/dist/types/src/app/components/radio.d.ts +1 -1
- package/dist/types/src/app/components/select.d.ts +1 -1
- package/dist/types/src/app/components/skeleton.d.ts +1 -1
- package/dist/types/src/app/components/slider.d.ts +1 -1
- package/dist/types/src/app/components/spinner.d.ts +1 -1
- package/dist/types/src/app/components/stat.d.ts +1 -1
- package/dist/types/src/app/components/status-list-item.d.ts +1 -1
- package/dist/types/src/app/components/status-tile.d.ts +1 -1
- package/dist/types/src/app/components/table.d.ts +1 -1
- package/dist/types/src/app/components/tabs.d.ts +1 -1
- package/dist/types/src/app/components/tag.d.ts +1 -1
- package/dist/types/src/app/components/text.d.ts +1 -1
- package/dist/types/src/app/components/textarea.d.ts +1 -1
- package/dist/types/src/app/components/timestamp.d.ts +1 -1
- package/dist/types/src/app/components/toast.d.ts +1 -1
- package/dist/types/src/app/components/toggle.d.ts +1 -1
- package/dist/types/src/index.d.ts +79 -32
- package/hirobius.tokens.json +86 -39
- package/mcp/catalog.mjs +10 -7
- package/mcp/core-set.mjs +66 -0
- package/mcp/guide.mjs +9 -52
- package/package.json +23 -7
- package/public/hds-manifest.json +109 -109
- package/src/app/data/component-api.json +54 -54
- package/upgrade/index.json +208 -0
- package/upgrade/releases/0.17.0.json +962 -0
- package/upgrade/releases/0.18.0.json +8 -0
- package/upgrade/releases/0.19.0.json +233 -0
- package/upgrade/releases/0.19.1.json +8 -0
- package/upgrade/releases/0.20.0.json +5108 -0
- package/upgrade/releases/0.21.0.json +538 -0
- package/upgrade/releases/0.22.0.json +94 -0
- package/upgrade/schema.json +989 -0
package/public/hds-manifest.json
CHANGED
|
@@ -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-10-
|
|
5
|
+
"generated": "2026-10-07T17:58:53.026Z",
|
|
6
6
|
"source": "hirobius.tokens.json",
|
|
7
7
|
"format": "W3C DTCG 2025.10",
|
|
8
8
|
"docs": "https://hirobius-design-system.vercel.app/",
|
|
@@ -391,7 +391,7 @@
|
|
|
391
391
|
"hidden": false,
|
|
392
392
|
"filePath": "src/app/components/alert.tsx",
|
|
393
393
|
"description": "Alert - compact feedback surface with contextual severity.",
|
|
394
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
394
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=33-34",
|
|
395
395
|
"figmaId": null,
|
|
396
396
|
"preview": {
|
|
397
397
|
"exportName": "Alert",
|
|
@@ -479,7 +479,7 @@
|
|
|
479
479
|
"tier": "primitive",
|
|
480
480
|
"docExempt": false,
|
|
481
481
|
"sourcePath": "src/app/components/Alert.tsx",
|
|
482
|
-
"figmaLink": "https://www.figma.com/design/
|
|
482
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=33-34",
|
|
483
483
|
"props": {
|
|
484
484
|
"children": {
|
|
485
485
|
"type": "ReactNode"
|
|
@@ -547,7 +547,7 @@
|
|
|
547
547
|
"hidden": false,
|
|
548
548
|
"filePath": "src/app/components/code-block.tsx",
|
|
549
549
|
"description": "CodeBlock - code display with copy button and optional collapsible toggle.",
|
|
550
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
550
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-154",
|
|
551
551
|
"figmaId": null,
|
|
552
552
|
"preview": {
|
|
553
553
|
"exportName": "CodeBlock",
|
|
@@ -612,7 +612,7 @@
|
|
|
612
612
|
"tier": "primitive",
|
|
613
613
|
"docExempt": false,
|
|
614
614
|
"sourcePath": "src/app/components/CodeBlock.tsx",
|
|
615
|
-
"figmaLink": "https://www.figma.com/design/
|
|
615
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-154",
|
|
616
616
|
"storyFiles": [
|
|
617
617
|
"src/stories/code-block.stories.tsx"
|
|
618
618
|
],
|
|
@@ -721,7 +721,7 @@
|
|
|
721
721
|
"hidden": false,
|
|
722
722
|
"filePath": "src/app/components/disclosure.tsx",
|
|
723
723
|
"description": "Disclosure - compact disclosure surface for optional explanatory content.",
|
|
724
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
724
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-453",
|
|
725
725
|
"figmaId": null,
|
|
726
726
|
"preview": {
|
|
727
727
|
"exportName": "Disclosure",
|
|
@@ -825,7 +825,7 @@
|
|
|
825
825
|
}
|
|
826
826
|
],
|
|
827
827
|
"sourcePath": "src/app/components/Disclosure.tsx",
|
|
828
|
-
"figmaLink": "https://www.figma.com/design/
|
|
828
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-453",
|
|
829
829
|
"storyFiles": [
|
|
830
830
|
"src/stories/disclosure.stories.tsx"
|
|
831
831
|
],
|
|
@@ -854,7 +854,7 @@
|
|
|
854
854
|
"hidden": false,
|
|
855
855
|
"filePath": "src/app/components/divider.tsx",
|
|
856
856
|
"description": "Divider — semantic separator between content regions.",
|
|
857
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
857
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-26",
|
|
858
858
|
"figmaId": null,
|
|
859
859
|
"preview": {
|
|
860
860
|
"exportName": "Divider",
|
|
@@ -893,7 +893,7 @@
|
|
|
893
893
|
"tier": "primitive",
|
|
894
894
|
"docExempt": false,
|
|
895
895
|
"sourcePath": "src/app/components/Divider.tsx",
|
|
896
|
-
"figmaLink": "https://www.figma.com/design/
|
|
896
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-26",
|
|
897
897
|
"props": {
|
|
898
898
|
"orientation": {
|
|
899
899
|
"type": "enum",
|
|
@@ -1257,7 +1257,7 @@
|
|
|
1257
1257
|
"hidden": false,
|
|
1258
1258
|
"filePath": "src/app/components/icon.tsx",
|
|
1259
1259
|
"description": "Icon — semantic icon wrapper for Lucide icons.",
|
|
1260
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
1260
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=27-2",
|
|
1261
1261
|
"figmaId": null,
|
|
1262
1262
|
"preview": {
|
|
1263
1263
|
"exportName": "Icon",
|
|
@@ -1393,7 +1393,7 @@
|
|
|
1393
1393
|
"tier": "primitive",
|
|
1394
1394
|
"docExempt": false,
|
|
1395
1395
|
"sourcePath": "src/app/components/Icon.tsx",
|
|
1396
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
1396
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=27-2",
|
|
1397
1397
|
"storyFiles": [
|
|
1398
1398
|
"src/stories/icon.stories.tsx"
|
|
1399
1399
|
],
|
|
@@ -1428,7 +1428,7 @@
|
|
|
1428
1428
|
"hidden": false,
|
|
1429
1429
|
"filePath": "src/app/components/inline-code.tsx",
|
|
1430
1430
|
"description": "InlineCode — inline code chip for token paths, file paths, and code-adjacent prose.",
|
|
1431
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
1431
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-155",
|
|
1432
1432
|
"figmaId": null,
|
|
1433
1433
|
"preview": {
|
|
1434
1434
|
"exportName": "InlineCode",
|
|
@@ -1484,7 +1484,7 @@
|
|
|
1484
1484
|
"tier": "primitive",
|
|
1485
1485
|
"docExempt": false,
|
|
1486
1486
|
"sourcePath": "src/app/components/InlineCode.tsx",
|
|
1487
|
-
"figmaLink": "https://www.figma.com/design/
|
|
1487
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-155",
|
|
1488
1488
|
"storyFiles": [
|
|
1489
1489
|
"src/stories/inline-code.stories.tsx"
|
|
1490
1490
|
],
|
|
@@ -1505,7 +1505,7 @@
|
|
|
1505
1505
|
"hidden": false,
|
|
1506
1506
|
"filePath": "src/app/components/inline-link.tsx",
|
|
1507
1507
|
"description": "InlineLink ” inline navigation and external-link primitive for body copy.",
|
|
1508
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
1508
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-161",
|
|
1509
1509
|
"figmaId": null,
|
|
1510
1510
|
"preview": {
|
|
1511
1511
|
"exportName": "InlineLink",
|
|
@@ -1561,7 +1561,7 @@
|
|
|
1561
1561
|
"tier": "primitive",
|
|
1562
1562
|
"docExempt": false,
|
|
1563
1563
|
"sourcePath": "src/app/components/InlineLink.tsx",
|
|
1564
|
-
"figmaLink": "https://www.figma.com/design/
|
|
1564
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-161",
|
|
1565
1565
|
"storyFiles": [
|
|
1566
1566
|
"src/stories/inline-link.stories.tsx"
|
|
1567
1567
|
],
|
|
@@ -1594,7 +1594,7 @@
|
|
|
1594
1594
|
"hidden": false,
|
|
1595
1595
|
"filePath": "src/app/components/input.tsx",
|
|
1596
1596
|
"description": "Input — text field primitive with label, helper, and error slots.",
|
|
1597
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
1597
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=38-20",
|
|
1598
1598
|
"figmaId": null,
|
|
1599
1599
|
"preview": {
|
|
1600
1600
|
"exportName": "Input",
|
|
@@ -1846,7 +1846,7 @@
|
|
|
1846
1846
|
],
|
|
1847
1847
|
"tier": "primitive",
|
|
1848
1848
|
"docExempt": false,
|
|
1849
|
-
"figmaLink": "https://www.figma.com/design/
|
|
1849
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=38-20",
|
|
1850
1850
|
"storyFiles": [
|
|
1851
1851
|
"src/stories/input.stories.tsx"
|
|
1852
1852
|
],
|
|
@@ -1888,7 +1888,7 @@
|
|
|
1888
1888
|
"hidden": false,
|
|
1889
1889
|
"filePath": "src/app/components/segmented-control.tsx",
|
|
1890
1890
|
"description": "SegmentedControl \" segmented selection input for compact mutually-exclusive choices. The active×hover×pressed×disabled×secondary state matrix is expressed through `cva` compound variants keyed by `active` / `interaction` (the live-or-frozen-demo hover/pressed/rest sub-state) / `variant` / `disabled`, each resolving to the same `--semantic-*` custom properties the pre-Tailwind inline styles referenced — same tokens, same pixels, just Tailwind classes instead of a `style` object. Per ADR-015 this control keeps its own hover/focus tracking (per-segment `string | null` cardinality) rather than the shared `useInteractionState` single-element machine; only the class composition changed, not the state machine feeding it.",
|
|
1891
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
1891
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-334",
|
|
1892
1892
|
"figmaId": null,
|
|
1893
1893
|
"preview": {
|
|
1894
1894
|
"exportName": "SegmentedControl",
|
|
@@ -2004,7 +2004,7 @@
|
|
|
2004
2004
|
"tier": "primitive",
|
|
2005
2005
|
"docExempt": false,
|
|
2006
2006
|
"sourcePath": "src/app/components/SegmentedControl.tsx",
|
|
2007
|
-
"figmaLink": "https://www.figma.com/design/
|
|
2007
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-334",
|
|
2008
2008
|
"storyFiles": [
|
|
2009
2009
|
"src/stories/segmented-control.stories.tsx"
|
|
2010
2010
|
],
|
|
@@ -2231,7 +2231,7 @@
|
|
|
2231
2231
|
"hidden": false,
|
|
2232
2232
|
"filePath": "src/app/components/table.tsx",
|
|
2233
2233
|
"description": "Table - structured data table primitive for documentation and compact UI matrices.",
|
|
2234
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
2234
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-300",
|
|
2235
2235
|
"figmaId": null,
|
|
2236
2236
|
"preview": {
|
|
2237
2237
|
"exportName": "Table",
|
|
@@ -2327,7 +2327,7 @@
|
|
|
2327
2327
|
"tier": "primitive",
|
|
2328
2328
|
"docExempt": false,
|
|
2329
2329
|
"sourcePath": "src/app/components/Table.tsx",
|
|
2330
|
-
"figmaLink": "https://www.figma.com/design/
|
|
2330
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-300",
|
|
2331
2331
|
"storyFiles": [
|
|
2332
2332
|
"src/stories/table.stories.tsx"
|
|
2333
2333
|
],
|
|
@@ -2364,7 +2364,7 @@
|
|
|
2364
2364
|
"hidden": false,
|
|
2365
2365
|
"filePath": "src/app/components/tag.tsx",
|
|
2366
2366
|
"description": "Tag — interactive filter and category chip. The outer <button> carries the accessible 44px hit target directly via the size token while the inner pill keeps the visible surface compact. Colors (background, border-color, color) live in the pill's cva variants, painted through `group-hover`/`group-active` so the pill reacts to interaction on the shared outer button (converted off the former .hds-tag-btn/.hds-tag-pill theme.css rules for #60 — same behavior, now token-driven Tailwind classes). The `active` prop (aria-pressed selected state) is not one of the variant contract's four axes — it's expressed as the pill's `selected` cva variant, carrying the same rest → hover → pressed → focus-visible state matrix the contract expects, just keyed by selection instead of tone/size/density.",
|
|
2367
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
2367
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=32-11",
|
|
2368
2368
|
"figmaId": null,
|
|
2369
2369
|
"preview": {
|
|
2370
2370
|
"exportName": "Tag",
|
|
@@ -2480,7 +2480,7 @@
|
|
|
2480
2480
|
"tier": "primitive",
|
|
2481
2481
|
"docExempt": false,
|
|
2482
2482
|
"sourcePath": "src/app/components/Tag.tsx",
|
|
2483
|
-
"figmaLink": "https://www.figma.com/design/
|
|
2483
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=32-11",
|
|
2484
2484
|
"storyFiles": [
|
|
2485
2485
|
"src/stories/tag.stories.tsx"
|
|
2486
2486
|
],
|
|
@@ -2511,7 +2511,7 @@
|
|
|
2511
2511
|
"hidden": false,
|
|
2512
2512
|
"filePath": "src/app/components/surface.tsx",
|
|
2513
2513
|
"description": "Surface — governed inset surface primitive. Enforces the \"Surface Inset\" rule: backgrounds MUST have internal padding. - Default padding: px24 (cards) | px16 (items) - Default border: none (elevation model — use shadow for lift) - Radius: `rounded-lg` (role radius + 4px), the one container radius shared with Card - shadow prop: applies a two-layer elevation shadow for card lift Usage: <Surface>Card content</Surface> <Surface padding=\"item\">Compact item</Surface> <Surface shadow>Lifted card with elevation shadow.</Surface>",
|
|
2514
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
2514
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-27",
|
|
2515
2515
|
"figmaId": null,
|
|
2516
2516
|
"preview": {
|
|
2517
2517
|
"exportName": "Surface",
|
|
@@ -2606,7 +2606,7 @@
|
|
|
2606
2606
|
"tier": "primitive",
|
|
2607
2607
|
"docExempt": true,
|
|
2608
2608
|
"sourcePath": "src/app/components/Surface.tsx",
|
|
2609
|
-
"figmaLink": "https://www.figma.com/design/
|
|
2609
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-27",
|
|
2610
2610
|
"states": [
|
|
2611
2611
|
"default"
|
|
2612
2612
|
],
|
|
@@ -2644,7 +2644,7 @@
|
|
|
2644
2644
|
"hidden": false,
|
|
2645
2645
|
"filePath": "src/app/components/card.tsx",
|
|
2646
2646
|
"description": "Tagged per-export, not on the file block: this module exports eight components and a file-level @figma would hand all eight this one node.",
|
|
2647
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
2647
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=39-11",
|
|
2648
2648
|
"figmaId": null,
|
|
2649
2649
|
"consumers": [
|
|
2650
2650
|
"src/app/components/box-sx.test.ts",
|
|
@@ -2818,7 +2818,7 @@
|
|
|
2818
2818
|
"Body",
|
|
2819
2819
|
"Footer"
|
|
2820
2820
|
],
|
|
2821
|
-
"figmaLink": "https://www.figma.com/design/
|
|
2821
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=39-11",
|
|
2822
2822
|
"propConstraints": {
|
|
2823
2823
|
"bordered": {
|
|
2824
2824
|
"type": "boolean"
|
|
@@ -2916,7 +2916,7 @@
|
|
|
2916
2916
|
"a11yRules": [],
|
|
2917
2917
|
"categorySource": "jsdoc",
|
|
2918
2918
|
"governedCategory": true,
|
|
2919
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
2919
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2022-31",
|
|
2920
2920
|
"figmaId": null,
|
|
2921
2921
|
"preview": {
|
|
2922
2922
|
"exportName": "Text",
|
|
@@ -2953,7 +2953,7 @@
|
|
|
2953
2953
|
"tier": "primitive",
|
|
2954
2954
|
"docExempt": true,
|
|
2955
2955
|
"sourcePath": "src/app/components/Text.tsx",
|
|
2956
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
2956
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2022-31",
|
|
2957
2957
|
"storyFiles": [
|
|
2958
2958
|
"src/stories/text.stories.tsx"
|
|
2959
2959
|
],
|
|
@@ -2992,7 +2992,7 @@
|
|
|
2992
2992
|
"docExempt": true,
|
|
2993
2993
|
"filePath": "src/app/components/dialog.tsx",
|
|
2994
2994
|
"description": "Tagged per-export, not on the file block: this module exports ten components and a file-level @figma would hand all ten this one node.",
|
|
2995
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
2995
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-27",
|
|
2996
2996
|
"figmaId": null,
|
|
2997
2997
|
"tier": "primitive",
|
|
2998
2998
|
"preview": {
|
|
@@ -3179,7 +3179,7 @@
|
|
|
3179
3179
|
"Description",
|
|
3180
3180
|
"Close"
|
|
3181
3181
|
],
|
|
3182
|
-
"figmaLink": "https://www.figma.com/design/
|
|
3182
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-27",
|
|
3183
3183
|
"propConstraints": {
|
|
3184
3184
|
"defaultOpen": {
|
|
3185
3185
|
"type": "boolean"
|
|
@@ -3251,9 +3251,9 @@
|
|
|
3251
3251
|
"docExempt": false,
|
|
3252
3252
|
"filePath": "src/app/components/button.tsx",
|
|
3253
3253
|
"description": "Triggers an action when activated.",
|
|
3254
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
3254
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=28-138",
|
|
3255
3255
|
"figmaId": null,
|
|
3256
|
-
"figmaLink": "https://www.figma.com/design/
|
|
3256
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=28-138",
|
|
3257
3257
|
"tier": "primitive",
|
|
3258
3258
|
"preview": {
|
|
3259
3259
|
"exportName": "Button",
|
|
@@ -3537,9 +3537,9 @@
|
|
|
3537
3537
|
"docExempt": false,
|
|
3538
3538
|
"filePath": "src/app/components/callout.tsx",
|
|
3539
3539
|
"description": "Tone-driven side-rule callout for status, quotes, hypotheses.",
|
|
3540
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
3540
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-85",
|
|
3541
3541
|
"figmaId": null,
|
|
3542
|
-
"figmaLink": "https://www.figma.com/design/
|
|
3542
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-85",
|
|
3543
3543
|
"tier": "primitive",
|
|
3544
3544
|
"preview": {
|
|
3545
3545
|
"exportName": "Callout",
|
|
@@ -3614,9 +3614,9 @@
|
|
|
3614
3614
|
"docExempt": false,
|
|
3615
3615
|
"filePath": "src/app/components/empty-state.tsx",
|
|
3616
3616
|
"description": "EmptyState — consistent no-data placeholder for lists, grids, and sections.",
|
|
3617
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
3617
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-352",
|
|
3618
3618
|
"figmaId": null,
|
|
3619
|
-
"figmaLink": "https://www.figma.com/design/
|
|
3619
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-352",
|
|
3620
3620
|
"tier": "primitive",
|
|
3621
3621
|
"preview": {
|
|
3622
3622
|
"exportName": "EmptyState",
|
|
@@ -3684,9 +3684,9 @@
|
|
|
3684
3684
|
"docExempt": false,
|
|
3685
3685
|
"filePath": "src/app/components/field.tsx",
|
|
3686
3686
|
"description": "Caption label paired with a value — used in metadata grids and read-only forms.",
|
|
3687
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
3687
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-81",
|
|
3688
3688
|
"figmaId": null,
|
|
3689
|
-
"figmaLink": "https://www.figma.com/design/
|
|
3689
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-81",
|
|
3690
3690
|
"tier": "primitive",
|
|
3691
3691
|
"preview": {
|
|
3692
3692
|
"exportName": "Field",
|
|
@@ -3886,9 +3886,9 @@
|
|
|
3886
3886
|
"docExempt": false,
|
|
3887
3887
|
"filePath": "src/app/components/stat.tsx",
|
|
3888
3888
|
"description": "Headline metric — large value, caption label, optional sub-line.",
|
|
3889
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
3889
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-247",
|
|
3890
3890
|
"figmaId": null,
|
|
3891
|
-
"figmaLink": "https://www.figma.com/design/
|
|
3891
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-247",
|
|
3892
3892
|
"tier": "primitive",
|
|
3893
3893
|
"preview": {
|
|
3894
3894
|
"exportName": "Stat",
|
|
@@ -3989,9 +3989,9 @@
|
|
|
3989
3989
|
"docExempt": false,
|
|
3990
3990
|
"filePath": "src/app/components/status-list-item.tsx",
|
|
3991
3991
|
"description": "Status dot + title row with optional muted notes and trailing slot (e.g. badge).",
|
|
3992
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
3992
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-350",
|
|
3993
3993
|
"figmaId": null,
|
|
3994
|
-
"figmaLink": "https://www.figma.com/design/
|
|
3994
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-350",
|
|
3995
3995
|
"tier": "pattern",
|
|
3996
3996
|
"preview": {
|
|
3997
3997
|
"exportName": "StatusListItem",
|
|
@@ -4071,9 +4071,9 @@
|
|
|
4071
4071
|
"docExempt": false,
|
|
4072
4072
|
"filePath": "src/app/components/status-tile.tsx",
|
|
4073
4073
|
"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.",
|
|
4074
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
4074
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-292",
|
|
4075
4075
|
"figmaId": null,
|
|
4076
|
-
"figmaLink": "https://www.figma.com/design/
|
|
4076
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-292",
|
|
4077
4077
|
"tier": "pattern",
|
|
4078
4078
|
"preview": {
|
|
4079
4079
|
"exportName": "StatusTile",
|
|
@@ -4240,9 +4240,9 @@
|
|
|
4240
4240
|
"governedCategory": true,
|
|
4241
4241
|
"hidden": false,
|
|
4242
4242
|
"docExempt": false,
|
|
4243
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
4243
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=31-15",
|
|
4244
4244
|
"figmaId": null,
|
|
4245
|
-
"figmaLink": "https://www.figma.com/design/
|
|
4245
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=31-15",
|
|
4246
4246
|
"tier": "primitive",
|
|
4247
4247
|
"preview": {
|
|
4248
4248
|
"exportName": "Badge",
|
|
@@ -4308,9 +4308,9 @@
|
|
|
4308
4308
|
"docExempt": false,
|
|
4309
4309
|
"filePath": "src/app/components/asset-img.tsx",
|
|
4310
4310
|
"description": "AssetImg - responsive asset frame with fallback placeholder handling. Contexts: default, lightbox, and detail.",
|
|
4311
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
4311
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-67",
|
|
4312
4312
|
"figmaId": null,
|
|
4313
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
4313
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-67",
|
|
4314
4314
|
"tier": "primitive",
|
|
4315
4315
|
"preview": {
|
|
4316
4316
|
"exportName": "AssetImg",
|
|
@@ -4482,9 +4482,9 @@
|
|
|
4482
4482
|
"docExempt": false,
|
|
4483
4483
|
"filePath": "src/app/components/tabs.tsx",
|
|
4484
4484
|
"description": "The tab set itself. Tagged here rather than in the file block because TabsList and TabsContent share this module and have no Figma node of their own — a file-level @figma would silently claim this node for all four.",
|
|
4485
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
4485
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-89",
|
|
4486
4486
|
"figmaId": null,
|
|
4487
|
-
"figmaLink": "https://www.figma.com/design/
|
|
4487
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-89",
|
|
4488
4488
|
"tier": "primitive",
|
|
4489
4489
|
"preview": {
|
|
4490
4490
|
"exportName": "Tabs",
|
|
@@ -4726,7 +4726,7 @@
|
|
|
4726
4726
|
"hidden": false,
|
|
4727
4727
|
"filePath": "src/app/components/radio.tsx",
|
|
4728
4728
|
"description": "Radio — radio button with animated selection indicator.",
|
|
4729
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
4729
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=36-17",
|
|
4730
4730
|
"figmaId": null,
|
|
4731
4731
|
"preview": {
|
|
4732
4732
|
"exportName": "Radio",
|
|
@@ -4776,7 +4776,7 @@
|
|
|
4776
4776
|
"componentProperties": [],
|
|
4777
4777
|
"tier": "primitive",
|
|
4778
4778
|
"docExempt": false,
|
|
4779
|
-
"figmaLink": "https://www.figma.com/design/
|
|
4779
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=36-17",
|
|
4780
4780
|
"storyFiles": [
|
|
4781
4781
|
"src/stories/radio.stories.tsx"
|
|
4782
4782
|
],
|
|
@@ -4814,7 +4814,7 @@
|
|
|
4814
4814
|
"hidden": false,
|
|
4815
4815
|
"filePath": "src/app/components/select.tsx",
|
|
4816
4816
|
"description": "Select — dropdown selector built on Radix Select (ADR-001 Radix convention). Radix owns the listbox a11y contract: managed focus + active-descendant, typeahead, full keyboard (Home/End/PageUp-Down/wrap), Popper collision/flip positioning, and dismissal. The HDS surface is styled with the token-backed Tailwind idiom used by tabs.tsx / command-palette.tsx; `ref` targets the trigger button.",
|
|
4817
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
4817
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-49",
|
|
4818
4818
|
"figmaId": null,
|
|
4819
4819
|
"preview": {
|
|
4820
4820
|
"exportName": "Select",
|
|
@@ -4891,7 +4891,7 @@
|
|
|
4891
4891
|
"componentProperties": [],
|
|
4892
4892
|
"tier": "primitive",
|
|
4893
4893
|
"docExempt": false,
|
|
4894
|
-
"figmaLink": "https://www.figma.com/design/
|
|
4894
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-49",
|
|
4895
4895
|
"storyFiles": [
|
|
4896
4896
|
"src/stories/select.stories.tsx"
|
|
4897
4897
|
],
|
|
@@ -4953,7 +4953,7 @@
|
|
|
4953
4953
|
"hidden": false,
|
|
4954
4954
|
"filePath": "src/app/components/slider.tsx",
|
|
4955
4955
|
"description": "Slider — range slider with label and value display.",
|
|
4956
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
4956
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-265",
|
|
4957
4957
|
"figmaId": null,
|
|
4958
4958
|
"preview": {
|
|
4959
4959
|
"exportName": "Slider",
|
|
@@ -5000,7 +5000,7 @@
|
|
|
5000
5000
|
"componentProperties": [],
|
|
5001
5001
|
"tier": "primitive",
|
|
5002
5002
|
"docExempt": false,
|
|
5003
|
-
"figmaLink": "https://www.figma.com/design/
|
|
5003
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-265",
|
|
5004
5004
|
"storyFiles": [
|
|
5005
5005
|
"src/stories/slider.stories.tsx"
|
|
5006
5006
|
],
|
|
@@ -5029,7 +5029,7 @@
|
|
|
5029
5029
|
"hidden": false,
|
|
5030
5030
|
"filePath": "src/app/components/toggle.tsx",
|
|
5031
5031
|
"description": "Toggle — boolean on/off toggle with animated thumb.",
|
|
5032
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
5032
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=37-19",
|
|
5033
5033
|
"figmaId": null,
|
|
5034
5034
|
"preview": {
|
|
5035
5035
|
"exportName": "Toggle",
|
|
@@ -5076,7 +5076,7 @@
|
|
|
5076
5076
|
"componentProperties": [],
|
|
5077
5077
|
"tier": "primitive",
|
|
5078
5078
|
"docExempt": false,
|
|
5079
|
-
"figmaLink": "https://www.figma.com/design/
|
|
5079
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=37-19",
|
|
5080
5080
|
"storyFiles": [
|
|
5081
5081
|
"src/stories/toggle.stories.tsx"
|
|
5082
5082
|
],
|
|
@@ -5111,9 +5111,9 @@
|
|
|
5111
5111
|
"docExempt": false,
|
|
5112
5112
|
"filePath": "src/app/components/avatar.tsx",
|
|
5113
5113
|
"description": "Circular avatar. Renders the image when available, else initials from `alt`.",
|
|
5114
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
5114
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=34-18",
|
|
5115
5115
|
"figmaId": null,
|
|
5116
|
-
"figmaLink": "https://www.figma.com/design/
|
|
5116
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=34-18",
|
|
5117
5117
|
"tier": "primitive",
|
|
5118
5118
|
"preview": {
|
|
5119
5119
|
"exportName": "Avatar",
|
|
@@ -5196,9 +5196,9 @@
|
|
|
5196
5196
|
"docExempt": false,
|
|
5197
5197
|
"filePath": "src/app/components/progress.tsx",
|
|
5198
5198
|
"description": "Linear bar or circular ring. Determinate when `value` is a number, else indeterminate.",
|
|
5199
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
5199
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-91",
|
|
5200
5200
|
"figmaId": null,
|
|
5201
|
-
"figmaLink": "https://www.figma.com/design/
|
|
5201
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-91",
|
|
5202
5202
|
"tier": "primitive",
|
|
5203
5203
|
"preview": {
|
|
5204
5204
|
"exportName": "Progress",
|
|
@@ -5301,9 +5301,9 @@
|
|
|
5301
5301
|
"docExempt": false,
|
|
5302
5302
|
"filePath": "src/app/components/skeleton.tsx",
|
|
5303
5303
|
"description": "Decorative loading placeholder. Marked aria-hidden — announce the loading state on the surrounding region (e.g. aria-busy) rather than per skeleton.",
|
|
5304
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
5304
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-95",
|
|
5305
5305
|
"figmaId": null,
|
|
5306
|
-
"figmaLink": "https://www.figma.com/design/
|
|
5306
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-95",
|
|
5307
5307
|
"tier": "primitive",
|
|
5308
5308
|
"preview": {
|
|
5309
5309
|
"exportName": "Skeleton",
|
|
@@ -5380,9 +5380,9 @@
|
|
|
5380
5380
|
"docExempt": false,
|
|
5381
5381
|
"filePath": "src/app/components/spinner.tsx",
|
|
5382
5382
|
"description": "Indeterminate spinner. Inherits the surrounding text color via currentColor.",
|
|
5383
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
5383
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-106",
|
|
5384
5384
|
"figmaId": null,
|
|
5385
|
-
"figmaLink": "https://www.figma.com/design/
|
|
5385
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-106",
|
|
5386
5386
|
"tier": "primitive",
|
|
5387
5387
|
"preview": {
|
|
5388
5388
|
"exportName": "Spinner",
|
|
@@ -5453,9 +5453,9 @@
|
|
|
5453
5453
|
"docExempt": false,
|
|
5454
5454
|
"filePath": "src/app/components/breadcrumb.tsx",
|
|
5455
5455
|
"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\".",
|
|
5456
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
5456
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-159",
|
|
5457
5457
|
"figmaId": null,
|
|
5458
|
-
"figmaLink": "https://www.figma.com/design/
|
|
5458
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-159",
|
|
5459
5459
|
"tier": "pattern",
|
|
5460
5460
|
"preview": {
|
|
5461
5461
|
"exportName": "Breadcrumb",
|
|
@@ -5522,9 +5522,9 @@
|
|
|
5522
5522
|
"docExempt": false,
|
|
5523
5523
|
"filePath": "src/app/components/pagination.tsx",
|
|
5524
5524
|
"description": "Paged navigation with first/last anchors, sibling pages, and ellipses.",
|
|
5525
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
5525
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-194",
|
|
5526
5526
|
"figmaId": null,
|
|
5527
|
-
"figmaLink": "https://www.figma.com/design/
|
|
5527
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-194",
|
|
5528
5528
|
"tier": "pattern",
|
|
5529
5529
|
"preview": {
|
|
5530
5530
|
"exportName": "Pagination",
|
|
@@ -5594,9 +5594,9 @@
|
|
|
5594
5594
|
"docExempt": true,
|
|
5595
5595
|
"filePath": "src/app/components/toast.tsx",
|
|
5596
5596
|
"description": "Provider + viewport for the toast system. Wrap the app root once.",
|
|
5597
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
5597
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-367",
|
|
5598
5598
|
"figmaId": null,
|
|
5599
|
-
"figmaLink": "https://www.figma.com/design/
|
|
5599
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-367",
|
|
5600
5600
|
"tier": "pattern",
|
|
5601
5601
|
"preview": {
|
|
5602
5602
|
"exportName": "ToastProvider",
|
|
@@ -5666,9 +5666,9 @@
|
|
|
5666
5666
|
"docExempt": true,
|
|
5667
5667
|
"filePath": "src/app/components/combobox.tsx",
|
|
5668
5668
|
"description": "Combobox — searchable single- or multi-select (Popover + filtered listbox). A select-with-search built on the HDS Popover. The trigger shows the current selection (with `multiple`, a count and a removable chip per value); opening reveals a search field that filters the option list. Full keyboard support (↑/↓ to move, Enter to choose, Esc/outside-click to close) and listbox/option ARIA. Controlled via `value` + `onChange`. <Combobox options={[{ value: 'us', label: 'United States' }, …]} value={country} onChange={setCountry} placeholder=\"Select a country\" />",
|
|
5669
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
5669
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-237",
|
|
5670
5670
|
"figmaId": null,
|
|
5671
|
-
"figmaLink": "https://www.figma.com/design/
|
|
5671
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-237",
|
|
5672
5672
|
"tier": "pattern",
|
|
5673
5673
|
"preview": {
|
|
5674
5674
|
"exportName": "Combobox",
|
|
@@ -5809,9 +5809,9 @@
|
|
|
5809
5809
|
"docExempt": true,
|
|
5810
5810
|
"filePath": "src/app/components/form.tsx",
|
|
5811
5811
|
"description": "Styled `<form>` with consistent vertical field rhythm. Tagged per-export: FormField and FormFieldShell share this module and have no Figma node, so a file-level @figma would claim this one for all three.",
|
|
5812
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
5812
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-94",
|
|
5813
5813
|
"figmaId": null,
|
|
5814
|
-
"figmaLink": "https://www.figma.com/design/
|
|
5814
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-94",
|
|
5815
5815
|
"tier": "pattern",
|
|
5816
5816
|
"preview": {
|
|
5817
5817
|
"exportName": "Form",
|
|
@@ -6084,9 +6084,9 @@
|
|
|
6084
6084
|
"docExempt": false,
|
|
6085
6085
|
"filePath": "src/app/components/avatar-group.tsx",
|
|
6086
6086
|
"description": "Renders up to `max` overlapping avatars followed by a `+N` overflow chip.",
|
|
6087
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6087
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2030-63",
|
|
6088
6088
|
"figmaId": null,
|
|
6089
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6089
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2030-63",
|
|
6090
6090
|
"tier": "primitive",
|
|
6091
6091
|
"preview": {
|
|
6092
6092
|
"exportName": "AvatarGroup",
|
|
@@ -6140,9 +6140,9 @@
|
|
|
6140
6140
|
"docExempt": false,
|
|
6141
6141
|
"filePath": "src/app/components/blockquote.tsx",
|
|
6142
6142
|
"description": "A quoted passage; pass `cite` for the source URL and `attribution` for a byline.",
|
|
6143
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6143
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2024-18",
|
|
6144
6144
|
"figmaId": null,
|
|
6145
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6145
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2024-18",
|
|
6146
6146
|
"tier": "primitive",
|
|
6147
6147
|
"preview": {
|
|
6148
6148
|
"exportName": "Blockquote",
|
|
@@ -6193,9 +6193,9 @@
|
|
|
6193
6193
|
"docExempt": false,
|
|
6194
6194
|
"filePath": "src/app/components/kbd.tsx",
|
|
6195
6195
|
"description": "Renders a keyboard key or shortcut token, e.g. `<Kbd>⌘K</Kbd>`.",
|
|
6196
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6196
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2026-9",
|
|
6197
6197
|
"figmaId": null,
|
|
6198
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6198
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2026-9",
|
|
6199
6199
|
"tier": "primitive",
|
|
6200
6200
|
"preview": {
|
|
6201
6201
|
"exportName": "Kbd",
|
|
@@ -6254,9 +6254,9 @@
|
|
|
6254
6254
|
"docExempt": false,
|
|
6255
6255
|
"filePath": "src/app/components/timestamp.tsx",
|
|
6256
6256
|
"description": "Presents a date/time with a machine-readable `dateTime` for accessibility.",
|
|
6257
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6257
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2031-11",
|
|
6258
6258
|
"figmaId": null,
|
|
6259
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6259
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2031-11",
|
|
6260
6260
|
"tier": "primitive",
|
|
6261
6261
|
"preview": {
|
|
6262
6262
|
"exportName": "Timestamp",
|
|
@@ -6367,9 +6367,9 @@
|
|
|
6367
6367
|
"docExempt": false,
|
|
6368
6368
|
"filePath": "src/app/components/metadata-list.tsx",
|
|
6369
6369
|
"description": "Renders object metadata as a semantic `<dl>` of term/description pairs.",
|
|
6370
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6370
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-47",
|
|
6371
6371
|
"figmaId": null,
|
|
6372
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6372
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-47",
|
|
6373
6373
|
"tier": "pattern",
|
|
6374
6374
|
"preview": {
|
|
6375
6375
|
"exportName": "MetadataList",
|
|
@@ -6430,9 +6430,9 @@
|
|
|
6430
6430
|
"docExempt": true,
|
|
6431
6431
|
"filePath": "src/app/components/alert-dialog.tsx",
|
|
6432
6432
|
"description": "AlertDialog root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.",
|
|
6433
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6433
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2035-24",
|
|
6434
6434
|
"figmaId": null,
|
|
6435
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
6435
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2035-24",
|
|
6436
6436
|
"tier": "primitive",
|
|
6437
6437
|
"preview": {
|
|
6438
6438
|
"exportName": "AlertDialog",
|
|
@@ -6887,9 +6887,9 @@
|
|
|
6887
6887
|
"docExempt": false,
|
|
6888
6888
|
"filePath": "src/app/components/textarea.tsx",
|
|
6889
6889
|
"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.",
|
|
6890
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
6890
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-14",
|
|
6891
6891
|
"figmaId": null,
|
|
6892
|
-
"figmaLink": "https://www.figma.com/design/
|
|
6892
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-14",
|
|
6893
6893
|
"tier": "primitive",
|
|
6894
6894
|
"preview": {
|
|
6895
6895
|
"exportName": "Textarea",
|
|
@@ -7807,7 +7807,7 @@
|
|
|
7807
7807
|
"docExempt": true,
|
|
7808
7808
|
"filePath": "src/app/components/hds-tooltip.tsx",
|
|
7809
7809
|
"description": "Tooltip root. Bakes in the Radix Provider so a single `<Tooltip>` is self-contained — no app-level provider required. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.",
|
|
7810
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
7810
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-15",
|
|
7811
7811
|
"figmaId": null,
|
|
7812
7812
|
"tier": "primitive",
|
|
7813
7813
|
"preview": {
|
|
@@ -7826,7 +7826,7 @@
|
|
|
7826
7826
|
"tokenMapping": {},
|
|
7827
7827
|
"variantAxes": [],
|
|
7828
7828
|
"componentProperties": [],
|
|
7829
|
-
"figmaLink": "https://www.figma.com/design/
|
|
7829
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-15",
|
|
7830
7830
|
"props": {
|
|
7831
7831
|
"children": {
|
|
7832
7832
|
"type": "React.ReactNode",
|
|
@@ -7904,9 +7904,9 @@
|
|
|
7904
7904
|
"docExempt": true,
|
|
7905
7905
|
"filePath": "src/app/components/menu.tsx",
|
|
7906
7906
|
"description": "Menu root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.",
|
|
7907
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
7907
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-59",
|
|
7908
7908
|
"figmaId": null,
|
|
7909
|
-
"figmaLink": "https://www.figma.com/design/
|
|
7909
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-59",
|
|
7910
7910
|
"tier": "primitive",
|
|
7911
7911
|
"preview": {
|
|
7912
7912
|
"exportName": "Menu",
|
|
@@ -8028,9 +8028,9 @@
|
|
|
8028
8028
|
"docExempt": true,
|
|
8029
8029
|
"filePath": "src/app/components/popover.tsx",
|
|
8030
8030
|
"description": "Popover root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.",
|
|
8031
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
8031
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-32",
|
|
8032
8032
|
"figmaId": null,
|
|
8033
|
-
"figmaLink": "https://www.figma.com/design/
|
|
8033
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-32",
|
|
8034
8034
|
"tier": "primitive",
|
|
8035
8035
|
"preview": {
|
|
8036
8036
|
"exportName": "Popover",
|
|
@@ -8130,9 +8130,9 @@
|
|
|
8130
8130
|
"docExempt": false,
|
|
8131
8131
|
"filePath": "src/app/components/checkbox.tsx",
|
|
8132
8132
|
"description": "Checkbox — custom-drawn checkbox with check / indeterminate glyph.",
|
|
8133
|
-
"figmaUrl": "https://www.figma.com/design/
|
|
8133
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=35-29",
|
|
8134
8134
|
"figmaId": null,
|
|
8135
|
-
"figmaLink": "https://www.figma.com/design/
|
|
8135
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=35-29",
|
|
8136
8136
|
"tier": "primitive",
|
|
8137
8137
|
"preview": {
|
|
8138
8138
|
"exportName": "Checkbox",
|
|
@@ -8203,9 +8203,9 @@
|
|
|
8203
8203
|
"docExempt": false,
|
|
8204
8204
|
"filePath": "src/app/components/form-actions.tsx",
|
|
8205
8205
|
"description": "Form footer with one fixed order: destructive (far left, if any), then secondary, then primary last and right-most. Gap is the tight layout token.",
|
|
8206
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
8206
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-87",
|
|
8207
8207
|
"figmaId": null,
|
|
8208
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
8208
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-87",
|
|
8209
8209
|
"tier": "pattern",
|
|
8210
8210
|
"preview": {
|
|
8211
8211
|
"exportName": "FormActions",
|
|
@@ -8260,9 +8260,9 @@
|
|
|
8260
8260
|
"docExempt": false,
|
|
8261
8261
|
"filePath": "src/app/components/metric-tiles.tsx",
|
|
8262
8262
|
"description": "One metric tile: eyebrow label, `heading2` value, caption sub line, on a raised surface at one fixed min-height. Wraps `Card.Metric` (the sibling with the eyebrow / h2 / caption scale) and adds the surface and the fixed height, so a tile needs no enclosing `Card`.",
|
|
8263
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
8263
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-114",
|
|
8264
8264
|
"figmaId": null,
|
|
8265
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
8265
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-114",
|
|
8266
8266
|
"tier": "pattern",
|
|
8267
8267
|
"preview": {
|
|
8268
8268
|
"exportName": "MetricTile",
|
|
@@ -8447,9 +8447,9 @@
|
|
|
8447
8447
|
"docExempt": false,
|
|
8448
8448
|
"filePath": "src/app/components/data-table-section.tsx",
|
|
8449
8449
|
"description": "Section heading and toolbar over a `Table`. Row actions are consumer nodes in a trailing column, the table scrolls horizontally on narrow widths without a `minWidth` from the caller, and zero rows shows an `EmptyState`.",
|
|
8450
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
8450
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-268",
|
|
8451
8451
|
"figmaId": null,
|
|
8452
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
8452
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-268",
|
|
8453
8453
|
"tier": "pattern",
|
|
8454
8454
|
"preview": {
|
|
8455
8455
|
"exportName": "DataTableSection",
|
|
@@ -8519,9 +8519,9 @@
|
|
|
8519
8519
|
"docExempt": false,
|
|
8520
8520
|
"filePath": "src/app/components/destructive-section.tsx",
|
|
8521
8521
|
"description": "Titled danger zone: a title, an explanation, and one danger `Button` that opens an `AlertDialog`. Pressing the button never runs the action; only the dialog's confirm does. Place it last on the screen, below the form.",
|
|
8522
|
-
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
8522
|
+
"figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2076-3",
|
|
8523
8523
|
"figmaId": null,
|
|
8524
|
-
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components
|
|
8524
|
+
"figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2076-3",
|
|
8525
8525
|
"tier": "pattern",
|
|
8526
8526
|
"preview": {
|
|
8527
8527
|
"exportName": "DestructiveSection",
|
|
@@ -11577,10 +11577,10 @@
|
|
|
11577
11577
|
{
|
|
11578
11578
|
"path": "component.tag.lineHeight",
|
|
11579
11579
|
"cssVar": "--component-tag-lineHeight",
|
|
11580
|
-
"type": "
|
|
11580
|
+
"type": "number",
|
|
11581
11581
|
"description": "Readable label rhythm for tags.",
|
|
11582
11582
|
"alias": "{primitive.typography.lineHeight.normal}",
|
|
11583
|
-
"resolvedValue": "
|
|
11583
|
+
"resolvedValue": "1.5"
|
|
11584
11584
|
},
|
|
11585
11585
|
{
|
|
11586
11586
|
"path": "component.tag.minWidth",
|