@hirobius/design-system 0.19.0 → 0.20.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.
Files changed (144) hide show
  1. package/CONSUMING.md +9 -6
  2. package/DESIGN.md +7 -5
  3. package/README.md +14 -11
  4. package/codemods/hds-prefix.mjs +231 -0
  5. package/codemods/jsx-fold.mjs +515 -0
  6. package/codemods/not-found-pattern.mjs +71 -0
  7. package/codemods/patterns-subpath.mjs +242 -81
  8. package/codemods/patterns-subpath.names.json +41 -15
  9. package/codemods/removed-0.20.json +194 -0
  10. package/codemods/tile-grid.mjs +283 -0
  11. package/codemods/unrewritable.mjs +291 -0
  12. package/dist/chunks/DemoStateContext-Cz5TmrYu.js +32 -0
  13. package/dist/chunks/empty-state-BBqhCx0S.js +1217 -0
  14. package/dist/chunks/{form-BvNNnJ0t.js → form-COP3vK9_.js} +29 -27
  15. package/dist/contexts.js +157 -78
  16. package/dist/form.js +1 -1
  17. package/dist/hirobius-ui.js +1826 -5503
  18. package/dist/manifest.js +12 -13
  19. package/dist/patterns.js +820 -561
  20. package/dist/styles.css +1 -1
  21. package/dist/tokens.css +1 -1
  22. package/dist/tokens.js +29 -8
  23. package/dist/types/src/app/components/avatar-group.d.ts +1 -2
  24. package/dist/types/src/app/components/badge.d.ts +8 -3
  25. package/dist/types/src/app/components/blockquote.d.ts +1 -2
  26. package/dist/types/src/app/components/box-sx.d.ts +110 -13
  27. package/dist/types/src/app/components/box.d.ts +6 -3
  28. package/dist/types/src/app/components/breadcrumb.d.ts +0 -5
  29. package/dist/types/src/app/components/button.d.ts +33 -4
  30. package/dist/types/src/app/components/card.d.ts +7 -8
  31. package/dist/types/src/app/components/combobox.d.ts +47 -11
  32. package/dist/types/src/app/components/container.d.ts +2 -2
  33. package/dist/types/src/app/components/data-table-section.d.ts +1 -1
  34. package/dist/types/src/app/components/dialog.d.ts +7 -1
  35. package/dist/types/src/app/components/disclosure.d.ts +1 -5
  36. package/dist/types/src/app/components/field.d.ts +1 -2
  37. package/dist/types/src/app/components/grid.d.ts +10 -6
  38. package/dist/types/src/app/components/hds-tooltip.d.ts +12 -2
  39. package/dist/types/src/app/components/inline-code.d.ts +1 -2
  40. package/dist/types/src/app/components/input.d.ts +8 -5
  41. package/dist/types/src/app/components/kbd.d.ts +1 -2
  42. package/dist/types/src/app/components/metadata-list.d.ts +1 -2
  43. package/dist/types/src/app/components/page-header.d.ts +0 -2
  44. package/dist/types/src/app/components/popover.d.ts +8 -0
  45. package/dist/types/src/app/components/progress.d.ts +33 -6
  46. package/dist/types/src/app/components/segmented-control.d.ts +2 -26
  47. package/dist/types/src/app/components/select.d.ts +10 -1
  48. package/dist/types/src/app/components/skeleton.d.ts +2 -3
  49. package/dist/types/src/app/components/spinner.d.ts +1 -2
  50. package/dist/types/src/app/components/stack.d.ts +4 -1
  51. package/dist/types/src/app/components/stat.d.ts +1 -2
  52. package/dist/types/src/app/components/status-dot.d.ts +18 -4
  53. package/dist/types/src/app/components/status-list-item.d.ts +1 -2
  54. package/dist/types/src/app/components/surface.d.ts +2 -3
  55. package/dist/types/src/app/components/switcher.d.ts +1 -1
  56. package/dist/types/src/app/components/table.d.ts +1 -15
  57. package/dist/types/src/app/components/tag.d.ts +0 -6
  58. package/dist/types/src/app/components/text.d.ts +1 -2
  59. package/dist/types/src/app/components/textarea.d.ts +1 -2
  60. package/dist/types/src/app/components/toast.d.ts +1 -2
  61. package/dist/types/src/app/components/tooltip.d.ts +1 -1
  62. package/dist/types/src/app/context/DemoStateContext.d.ts +1 -1
  63. package/dist/types/src/app/context/RouterContext.d.ts +5 -5
  64. package/dist/types/src/app/data/manifest-types.d.ts +6 -5
  65. package/dist/types/src/app/design-system/generated-token-refs.d.ts +8 -0
  66. package/dist/types/src/app/design-system/generated-token-values.d.ts +1 -0
  67. package/dist/types/src/app/design-system/tokens.d.ts +22 -3
  68. package/dist/types/src/icons.d.ts +1 -1
  69. package/dist/types/src/index.d.ts +33 -124
  70. package/dist/types/src/patterns.d.ts +20 -25
  71. package/dist/variables.css +6 -0
  72. package/docs/CONSUMING.md +21 -13
  73. package/hirobius.tokens.json +48 -15
  74. package/llms.txt +19 -20
  75. package/package.json +18 -22
  76. package/public/hds-manifest.json +2400 -6488
  77. package/public/llms/components.txt +41 -423
  78. package/public/llms/layout.txt +4 -4
  79. package/public/llms-full.txt +67 -448
  80. package/public/llms.txt +19 -20
  81. package/src/app/data/component-api.json +1379 -3271
  82. package/dist/chunks/LanguageContext-CH_bwzCq.js +0 -83
  83. package/dist/chunks/TokenDisplayContext-evZi_214.js +0 -18
  84. package/dist/chunks/activity-feed-DIMeUJpW.js +0 -21950
  85. package/dist/types/src/app/components/activity-feed.d.ts +0 -73
  86. package/dist/types/src/app/components/app-shell.d.ts +0 -40
  87. package/dist/types/src/app/components/aspect-ratio.d.ts +0 -25
  88. package/dist/types/src/app/components/bleed.d.ts +0 -39
  89. package/dist/types/src/app/components/button-group.d.ts +0 -22
  90. package/dist/types/src/app/components/calendar.d.ts +0 -22
  91. package/dist/types/src/app/components/carousel.d.ts +0 -26
  92. package/dist/types/src/app/components/center.d.ts +0 -36
  93. package/dist/types/src/app/components/cinematic-link.d.ts +0 -18
  94. package/dist/types/src/app/components/circular-progress.d.ts +0 -28
  95. package/dist/types/src/app/components/cluster.d.ts +0 -39
  96. package/dist/types/src/app/components/command-palette.d.ts +0 -46
  97. package/dist/types/src/app/components/component-instance-matrix.d.ts +0 -27
  98. package/dist/types/src/app/components/context-menu.d.ts +0 -78
  99. package/dist/types/src/app/components/cover.d.ts +0 -43
  100. package/dist/types/src/app/components/date-input.d.ts +0 -31
  101. package/dist/types/src/app/components/date-range-input.d.ts +0 -34
  102. package/dist/types/src/app/components/date-time-input.d.ts +0 -30
  103. package/dist/types/src/app/components/doc-link-card.d.ts +0 -32
  104. package/dist/types/src/app/components/error-boundary.d.ts +0 -25
  105. package/dist/types/src/app/components/file-input.d.ts +0 -30
  106. package/dist/types/src/app/components/foundation-swatch.d.ts +0 -45
  107. package/dist/types/src/app/components/frame.d.ts +0 -38
  108. package/dist/types/src/app/components/heading-stack.d.ts +0 -52
  109. package/dist/types/src/app/components/history-card.d.ts +0 -12
  110. package/dist/types/src/app/components/hover-card.d.ts +0 -46
  111. package/dist/types/src/app/components/icon-button.d.ts +0 -22
  112. package/dist/types/src/app/components/image-lightbox.d.ts +0 -14
  113. package/dist/types/src/app/components/input-group.d.ts +0 -23
  114. package/dist/types/src/app/components/multi-selector.d.ts +0 -40
  115. package/dist/types/src/app/components/nav-group.d.ts +0 -29
  116. package/dist/types/src/app/components/nav-item.d.ts +0 -33
  117. package/dist/types/src/app/components/not-found-pattern.d.ts +0 -1
  118. package/dist/types/src/app/components/overflow-list.d.ts +0 -21
  119. package/dist/types/src/app/components/selectable-card.d.ts +0 -29
  120. package/dist/types/src/app/components/side-nav.d.ts +0 -23
  121. package/dist/types/src/app/components/sketch.d.ts +0 -19
  122. package/dist/types/src/app/components/stacked-card-rail.d.ts +0 -32
  123. package/dist/types/src/app/components/stepper-field.d.ts +0 -12
  124. package/dist/types/src/app/components/stepper.d.ts +0 -33
  125. package/dist/types/src/app/components/text-lockup.d.ts +0 -38
  126. package/dist/types/src/app/components/tile-grid.d.ts +0 -17
  127. package/dist/types/src/app/components/time-input.d.ts +0 -24
  128. package/dist/types/src/app/components/toggle-button.d.ts +0 -32
  129. package/dist/types/src/app/components/token.d.ts +0 -90
  130. package/dist/types/src/app/components/tokenUtils.d.ts +0 -38
  131. package/dist/types/src/app/components/tokenizer.d.ts +0 -24
  132. package/dist/types/src/app/components/toolbar.d.ts +0 -36
  133. package/dist/types/src/app/components/top-nav.d.ts +0 -23
  134. package/dist/types/src/app/components/tree-list.d.ts +0 -30
  135. package/dist/types/src/app/data/nav-model.d.ts +0 -39
  136. package/dist/types/src/app/hooks/useFocusVisible.d.ts +0 -9
  137. package/dist/types/src/app/layouts/CaseStudyLayout.d.ts +0 -20
  138. package/dist/types/src/app/layouts/DocLayout.d.ts +0 -14
  139. package/dist/types/src/app/layouts/EmbeddedDocLayoutContext.d.ts +0 -6
  140. package/dist/types/src/app/layouts/HdsDocsShell.d.ts +0 -72
  141. package/dist/types/src/app/layouts/HdsSystemDocLayout.d.ts +0 -14
  142. package/dist/types/src/app/lib/hds-search.d.ts +0 -45
  143. package/dist/types/src/app/lib/nav-active.d.ts +0 -16
  144. package/dist/types/src/app/lib/navLevels.d.ts +0 -4
@@ -20,10 +20,6 @@ This file intentionally does not embed prop tables or long-form API docs.
20
20
 
21
21
  Compact: name, first line of description, then prop: type = default. Full detail in `src/app/data/component-api.json`.
22
22
 
23
- ### ActivityFeed
24
- ActivityFeed — chronological system event log. Renders a list of activity events using white space as the sole separator. No dividers, no borders between items…
25
- - events: ActivityEvent[] = [ { id: 'evt-001', title: 'File Uploade…
26
-
27
23
  ### Alert
28
24
  Alert - compact feedback surface with contextual severity.
29
25
  - children: ReactNode
@@ -37,11 +33,6 @@ AlertDialog root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled
37
33
  - onOpenChange: ((open: boolean) => void)
38
34
  - open: boolean
39
35
 
40
- ### AspectRatio
41
- 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.
42
- - asChild: boolean
43
- - ratio: number = 1
44
-
45
36
  ### AssetImg
46
37
  AssetImg - responsive asset frame with fallback placeholder handling. Contexts: default, lightbox, and detail.
47
38
  - alt: string
@@ -79,16 +70,10 @@ Renders up to `max` overlapping avatars followed by a `+N` overflow chip.
79
70
  ### Badge
80
71
  Compact metadata/status chip. Tone is the only styling input.
81
72
  - as: ElementType<any, keyof IntrinsicElements> = span
82
- - tone: "neutral" | "danger" | "success" | "warning" | "info" | "inProgress" | null
83
-
84
- ### Bleed
85
- Bleed — controlled negative-margin full-bleed within a padded container. Every Layout reference: https://every-layout.dev/layouts/the-stack/ (bleed is the inve…
86
- - amount: 'tight' | 'normal' | 'inset' | 'spacious' = normal
87
- - as: ElementType<any, keyof IntrinsicElements> = div
88
- - axis: 'x' | 'y' | 'both' = x
89
- - children: ReactNode
90
- - className: string
91
- - style: CSSProperties
73
+ - dot: boolean = false
74
+ - label: string
75
+ - size: "sm" | "md" | "lg"
76
+ - tone: "success" | "danger" | "warning" | "info" | "neutral" | "inProgress" | null
92
77
 
93
78
  ### Blockquote
94
79
  A quoted passage; pass `cite` for the source URL and `attribution` for a byline.
@@ -109,23 +94,19 @@ Breadcrumb trail. Links route through the HDS router seam (plain anchors with no
109
94
  ### Button
110
95
  Triggers an action when activated.
111
96
  - asChild: boolean = false
97
+ - defaultPressed: boolean
112
98
  - disabled: boolean
113
99
  - iconLeft: ReactNode
114
100
  - iconOnly: boolean = false
115
101
  - iconRight: ReactNode
116
102
  - label: string
117
103
  - loading: boolean = false
104
+ - onPressedChange: ((pressed: boolean) => void)
105
+ - pressed: boolean
118
106
  - size: "sm" | "md" | "lg" | null
119
- - tone: "neutral" | "danger" | "success" | "warning" | "info" | null
107
+ - tone: "success" | "danger" | "warning" | "info" | "neutral" | null
120
108
  - variant: "primary" | "secondary" | "tertiary" | null
121
109
 
122
- ### ButtonGroup
123
- Groups Button (or button-like) children into a single attached segment.
124
- - orientation: "horizontal" | "vertical" | null
125
-
126
- ### Calendar
127
- Renders an accessible month grid; compose it inside a Popover for the date inputs.
128
-
129
110
  ### Callout
130
111
  Tone-driven side-rule callout for status, quotes, hypotheses.
131
112
  - italic: boolean = false
@@ -137,7 +118,10 @@ Tagged per-export, not on the file block: this module exports eight components a
137
118
  - bordered: boolean = false
138
119
  - gap: GapOption = tight
139
120
  - noPadding: boolean = false
121
+ - onSelectedChange: ((selected: boolean) => void)
140
122
  - padding: PaddingOption = component
123
+ - selectable: boolean = false
124
+ - selected: boolean = false
141
125
  - tone: 'neutral' | 'danger' | 'success' | 'warning' | 'info' = neutral
142
126
  - variant: 'default' | 'accent' = default
143
127
 
@@ -171,21 +155,6 @@ Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (D
171
155
  ### CardTitle
172
156
  Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §"Card Anatomy"). Status, progress, and metadata are layout-bearing — th…
173
157
 
174
- ### Carousel
175
- Renders children as a snap-scrolling track with Prev/Next scroll buttons.
176
- - ariaLabel: string = Carousel
177
- - children: ReactNode
178
- - showControls: boolean = true
179
-
180
- ### Center
181
- Center — max-width column, auto-centered horizontally. Every Layout reference: https://every-layout.dev/layouts/center/
182
- - as: ElementType<any, keyof IntrinsicElements> = div
183
- - children: ReactNode
184
- - className: string
185
- - gutter: 'tight' | 'normal' | 'inset' | 'spacious'
186
- - maxWidth: 'content' | 'max' = content
187
- - style: CSSProperties
188
-
189
158
  ### Checkbox
190
159
  Checkbox — custom-drawn checkbox with check / indeterminate glyph.
191
160
  - checked: boolean
@@ -193,30 +162,6 @@ Checkbox — custom-drawn checkbox with check / indeterminate glyph.
193
162
  - label: string
194
163
  - onChange: (v: boolean) => void
195
164
 
196
- ### CinematicLink
197
- CinematicLink - cinematic editorial link treatment for portfolio surfaces.
198
- - children: string
199
- - href: string
200
-
201
- ### CircularProgress
202
- A circular progress ring; pass `value`/`max` or set `indeterminate`.
203
- - indeterminate: boolean = false
204
- - label: string
205
- - max: number = 100
206
- - size: "sm" | "md" | "lg" = md
207
- - tone: "neutral" | "danger" | "success" | "warning" | "info" | null
208
- - value: number = 0
209
-
210
- ### Cluster
211
- Cluster — wrapping horizontal group with even gaps. Every Layout reference: https://every-layout.dev/layouts/cluster/
212
- - align: 'start' | 'center' | 'end' | 'stretch' = center
213
- - as: ElementType<any, keyof IntrinsicElements> = div
214
- - children: ReactNode
215
- - className: string
216
- - gap: 'tight' | 'normal' | 'inset' | 'spacious' = tight
217
- - justify: 'start' | 'center' | 'end' | 'space-between' = start
218
- - style: CSSProperties
219
-
220
165
  ### CodeBlock
221
166
  CodeBlock - code display with copy button and optional collapsible toggle.
222
167
  - className: string
@@ -229,32 +174,20 @@ CodeBlock - code display with copy button and optional collapsible toggle.
229
174
  - variant: "inline" | "block" = block
230
175
 
231
176
  ### Combobox
232
- Combobox — searchable single-select (Popover + filtered listbox). A select-with-search built on the HDS Popover. The trigger shows the current selection; openi…
177
+ Combobox — searchable single- or multi-select (Popover + filtered listbox). A select-with-search built on the HDS Popover. The trigger shows the current select…
178
+ - aria-describedby: string
179
+ - aria-invalid: boolean
233
180
  - aria-label: string
234
181
  - className: string
235
182
  - disabled: boolean = false
236
183
  - emptyMessage: string = No results
237
- - onChange: (value: string) => void
184
+ - id: string
185
+ - multiple: boolean
186
+ - onChange: ((value: string) => void) | ((value: string[]) => void)
238
187
  - options: ComboboxOption[]
239
188
  - placeholder: string = Select…
240
189
  - searchPlaceholder: string = Search…
241
- - value: string | null
242
-
243
- ### CommandPalette
244
- Mountable trigger + dialog. Drop into header slot; component manages its own open state and Cmd-K / Ctrl-K global keybinding.
245
- - className: string
246
-
247
- ### ComponentInstanceMatrix
248
- ComponentInstanceMatrix — responsive specimen matrix for variant and state parity.
249
- - componentName: string
250
- - dimensionX: string
251
- - dimensionY: string
252
- - freezeRowState: boolean = false
253
- - isMobile: boolean
254
- - renderInstance: (rowKey: string, columnKey: string) => ReactNode
255
- - rowLabelTone: "primary" | "secondary" = primary
256
- - rowLabelWidth: number = 120
257
- - title: string
190
+ - value: string | readonly string[] | null
258
191
 
259
192
  ### Container
260
193
  Container — semantic width-constrained layout. Centers content horizontally and applies semantic max-width constraints. - maxWidth options: 'content' (760px pr…
@@ -264,67 +197,17 @@ Container — semantic width-constrained layout. Centers content horizontally an
264
197
  - padding: string = var(--semantic-space-surface-padding)
265
198
  - style: CSSProperties
266
199
 
267
- ### ContextMenu
268
- ContextMenu root + parts. Wrap the right-clickable area in `ContextMenu.Trigger`. Controlled via `onOpenChange`.
269
- - children: React.ReactNode
270
- - dir: ("ltr" | "rtl")
271
- - modal: boolean
272
- - onOpenChange: ((open: boolean) => void)
273
- - open: boolean
274
-
275
- ### Cover
276
- Cover — vertical shell with an auto-centered main region. Every Layout reference: https://every-layout.dev/layouts/cover/
277
- - as: ElementType<any, keyof IntrinsicElements> = div
278
- - centerSlot: ReactNode
279
- - children: ReactNode
280
- - className: string
281
- - footer: ReactNode
282
- - gap: 'tight' | 'normal' | 'inset' | 'spacious' = normal
283
- - header: ReactNode
284
- - minHeight: string = 100svh
285
- - style: CSSProperties
286
-
287
200
  ### DataTableSection
288
201
  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 `min…
289
202
  - actionsLabel: string = Actions
290
203
  - columns: TableColumn[]
291
204
  - emptyDescription: ReactNode
292
205
  - emptyTitle: ReactNode = Nothing here yet
293
- - level: 2 | 3 | 4 | 5 | 6 = 2
206
+ - level: 6 | 3 | 4 | 2 | 5 = 2
294
207
  - rows: DataTableSectionRow[]
295
208
  - title: ReactNode
296
209
  - toolbar: ReactNode
297
210
 
298
- ### DateInput
299
- Text field + calendar popover for picking a single date.
300
- - aria-label: string
301
- - disabled: boolean = false
302
- - displayFormat: string = yyyy-MM-dd
303
- - id: string
304
- - onChange: ((date: Date) => void) | undefined
305
- - placeholder: string
306
- - value: Date
307
-
308
- ### DateRangeInput
309
- 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 Com…
310
- - aria-label: string
311
- - disabled: boolean = false
312
- - displayFormat: string = yyyy-MM-dd
313
- - id: string
314
- - numberOfMonths: number = 2
315
- - onChange: ((range: DateRange) => void) | undefined
316
- - placeholder: string = Select date range
317
- - value: DateRange
318
-
319
- ### DateTimeInput
320
- Text date field + calendar popover, paired with a native time field, producing one Date.
321
- - aria-label: string
322
- - dateFormat: string = yyyy-MM-dd
323
- - disabled: boolean = false
324
- - id: string
325
- - onChange: ((date: Date) => void) | undefined
326
- - value: Date
327
-
328
211
  ### DestructiveSection
329
212
  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 …
330
213
  - actionLabel: ReactNode
@@ -332,7 +215,7 @@ Titled danger zone: a title, an explanation, and one danger `Button` that opens
332
215
  - confirmBody: ReactNode
333
216
  - confirmLabel: string
334
217
  - description: ReactNode
335
- - level: 2 | 3 | 4 | 5 | 6 = 2
218
+ - level: 6 | 3 | 4 | 2 | 5 = 2
336
219
  - onConfirm: () => void
337
220
  - title: ReactNode
338
221
 
@@ -410,19 +293,6 @@ Divider — semantic separator between content regions.
410
293
  - strong: boolean
411
294
  - variant: "strong" | "default" | null
412
295
 
413
- ### DocLinkCard
414
- DocLinkCard - navigation card for editorial and documentation cross-links.
415
- - accent: boolean = false
416
- - affordance: "up-right" | "right" | "left" = up-right
417
- - description: string
418
- - disabled: boolean = false
419
- - href: string
420
- - icon: LucideIcon
421
- - meta: string
422
- - metaStyle: "caption" | "ui" = caption
423
- - title: string
424
- - variant: "feature" | "pager" = feature
425
-
426
296
  ### EmptyState
427
297
  EmptyState — consistent no-data placeholder for lists, grids, and sections.
428
298
  - className: string
@@ -434,17 +304,9 @@ Caption label paired with a value — used in metadata grids and read-only forms
434
304
  - children: React.ReactNode
435
305
  - label: string
436
306
  - mono: boolean | null
437
- - tone: "neutral" | "danger" | "success" | "warning" | "info" | null
307
+ - tone: "success" | "danger" | "warning" | "info" | "neutral" | null
438
308
  - value: ReactNode
439
309
 
440
- ### FileInput
441
- A dashed dropzone that opens the native file picker or accepts a drag-and-drop.
442
- - accept: string
443
- - disabled: boolean
444
- - label: ReactNode = Click to upload or drag and drop
445
- - multiple: boolean
446
- - onFiles: ((files: File[]) => void)
447
-
448
310
  ### Form
449
311
  Styled `<form>` with consistent vertical field rhythm. Tagged per-export: FormField and FormFieldShell share this module and have no Figma node, so a file-leve…
450
312
 
@@ -475,50 +337,22 @@ Presentational label + control slot + helper/error markup. Renders `children` ve
475
337
  - label: string
476
338
  - required: boolean = false
477
339
 
478
- ### FoundationSwatch
479
- FoundationSwatch - governed foundation specimen for color and semantic role previews.
480
- - background: string
481
- - bordered: boolean = false
482
- - details: string[]
483
- - foreground: string = var(--semantic-color-content-primary)
484
- - hidePreviewLabel: boolean = false
485
- - label: string
486
- - note: ReactNode
487
- - previewPosition: 'bottom-left' | 'top-left' | 'center' = center
488
- - specimen: ReactNode
489
- - swatchVar: string
490
- - tokenDisplayPreset: 'depth1' | 'depth2' | 'full' = depth2
491
- - tokenPath: string
492
- - value: string
493
-
494
- ### Frame
495
- Frame — aspect-ratio-locked, token-clipped media box. Every Layout reference: https://every-layout.dev/layouts/frame/
496
- - as: ElementType<any, keyof IntrinsicElements> = div
497
- - children: ReactNode
498
- - className: string
499
- - radius: 'none' | 'sm' | 'md' | 'full' = md
500
- - ratio: number = 16 / 9
501
- - style: CSSProperties
502
-
503
340
  ### Grid
504
341
  Grid — responsive grid composition primitive. Enforces semantic gap and column values. No arbitrary CSS grid. - layout='fixed': responsive base (collapses via …
505
342
  - as: ElementType<any, keyof IntrinsicElements> = div
506
343
  - children: ReactNode
507
344
  - className: string
508
345
  - columns: number = 12
509
- - gap: 'tight' | 'normal' | 'inset' | 'spacious' = inset
510
- - layout: 'fixed' | 'auto-fit' = fixed
346
+ - gap: 'medium' | 'tight' | 'normal' | 'inset' | 'spacious' = inset
347
+ - layout: 'fixed' | 'auto-fit' | 'auto-fill' = fixed
348
+ - minItemWidth: string
511
349
  - style: CSSProperties
512
350
  - subgrid: boolean = false
513
351
 
514
- ### HdsDocsShell
515
- HdsDocsShell — three-region docs shell (left nav rail, content, right TOC rail), driven by grid columns that default to 0 and are set per breakpoint. hds#280 s…
352
+ ### HdsRouterProvider
353
+ Provide a router adapter to all HDS components below. Wrap your app root once.
354
+ - adapter: HdsRouterAdapter
516
355
  - children: ReactNode
517
- - className: string
518
- - leftRail: ReactNode
519
- - rightRail: ReactNode
520
- - style: CSSProperties
521
- - topOffset: string = 0px
522
356
 
523
357
  ### HdsThemeProvider
524
358
  Renders a `data-hds` scope wrapper that carries the four theming dials as root attributes + CSS vars, and exposes them to `useHdsTheme()`.
@@ -532,25 +366,6 @@ Renders a `data-hds` scope wrapper that carries the four theming dials as root a
532
366
  - style: CSSProperties
533
367
  - theme: 'light' | 'dark'
534
368
 
535
- ### HeadingStack
536
- HeadingStack — enforced vertical rhythm for heading + subheading pairs. Automatically handles gap and secondary color, preventing manual stacking. - Heading le…
537
- - as: ElementType = div
538
- - gap: HdsHeadingGap = px8
539
- - heading: string
540
- - headingAs: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
541
- - level: HdsHeadingLevel
542
- - subheading: string
543
- - subheadingAs: 'p' | 'div' | 'span' = p
544
-
545
- ### HoverCard
546
- HoverCard root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`; tune timing with `openDelay`/`closeDelay`.
547
- - children: React.ReactNode
548
- - closeDelay: number
549
- - defaultOpen: boolean
550
- - onOpenChange: ((open: boolean) => void)
551
- - open: boolean
552
- - openDelay: number
553
-
554
369
  ### Icon
555
370
  Icon — semantic icon wrapper for Lucide icons.
556
371
  - aria-hidden: boolean | "true" | "false" = true
@@ -561,22 +376,6 @@ Icon — semantic icon wrapper for Lucide icons.
561
376
  - style: CSSProperties
562
377
  - weight: "fill" | "bold" | "light" | "thin" | "regular" | "duotone"
563
378
 
564
- ### IconButton
565
- IconButton ” icon-only action trigger built on the shared Button primitive.
566
- - aria-label: string
567
- - asChild: boolean
568
- - disabled: boolean
569
- - icon: LucideIcon
570
- - iconColor: string
571
- - iconLeft: ReactNode
572
- - iconRight: ReactNode
573
- - iconSize: IconSize
574
- - label: string
575
- - loading: boolean
576
- - size: "sm" | "md" | "lg"
577
- - tone: "neutral" | "danger" | "success" | "warning" | "info" | null
578
- - variant: "primary" | "secondary" | "tertiary" | null
579
-
580
379
  ### InlineCode
581
380
  InlineCode — inline code chip for token paths, file paths, and code-adjacent prose.
582
381
  - children: ReactNode
@@ -602,34 +401,17 @@ Input — text field primitive with label, helper, and error slots.
602
401
  - label: string
603
402
  - leadingVisual: ReactNode
604
403
  - loading: boolean = false
404
+ - prefix: ReactNode
605
405
  - size: InputSize = md
406
+ - suffix: ReactNode
606
407
  - textStyle: "body" | "mono" = body
607
408
  - trailingVisual: ReactNode
608
- - type: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' = text
609
-
610
- ### InputGroup
611
- A single-line input with optional `leading`/`trailing` adornments.
612
- - className: string
613
- - leading: ReactNode
614
- - size: "sm" | "md" | "lg" | null
615
- - trailing: ReactNode
409
+ - type: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'date' | … = text
616
410
 
617
411
  ### Kbd
618
412
  Renders a keyboard key or shortcut token, e.g. `<Kbd>⌘K</Kbd>`.
619
413
  - size: "sm" | "md" | "lg" | null
620
414
 
621
- ### Lightbox
622
- 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 ligh…
623
- - alt: string
624
- - caption: string
625
- - captionHref: string
626
- - captionLabel: string
627
- - naturalHeight: number
628
- - naturalWidth: number
629
- - onClose: () => void
630
- - open: boolean
631
- - src: string
632
-
633
415
  ### Menu
634
416
  Menu root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.
635
417
  - children: React.ReactNode
@@ -657,44 +439,6 @@ One metric tile: eyebrow label, `heading2` value, caption sub line, on a raised
657
439
  A row of `MetricTile`s. The grid has `min(tiles, 4)` columns, so three tiles fill three columns and never leave an empty fourth. The default for any row of hea…
658
440
  - children: ReactNode
659
441
 
660
- ### MultiSelector
661
- MultiSelector — multi-select dropdown composing the existing Popover with a checkbox option list, so choosing several values from a fixed set reads as one over…
662
- - className: string
663
- - disabled: boolean = false
664
- - onChange: (next: string[]) => void
665
- - options: MultiSelectorOption[]
666
- - placeholder: string = Select…
667
- - value: string[]
668
-
669
- ### NavGroup
670
- NavGroup - labeled navigation group for stacks of nav items.
671
- - children: ReactNode
672
- - className: string
673
- - collapsible: boolean = false
674
- - contentStyle: CSSProperties
675
- - getExact: ((item: NavItem) => boolean)
676
- - items: NavItem[]
677
- - label: string
678
- - level: NavLevel = section
679
- - onNavigate: (() => void)
680
- - style: CSSProperties
681
- - variant: 'side' | 'toc' = side
682
-
683
- ### NavItem
684
- NavItem - navigation row primitive for sidebars, table of contents, and list navigation.
685
- - active: boolean = false
686
- - disabled: boolean = false
687
- - label: string
688
- - level: NavLevel = root
689
- - onNavigate: ((event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void)
690
- - variant: NavVariant = side
691
-
692
- ### OverflowList
693
- Renders up to `max` children followed by a `+N` overflow chip (or custom node).
694
- - children: ReactNode
695
- - max: number
696
- - renderOverflow: ((count: number) => ReactNode)
697
-
698
442
  ### Page
699
443
  Page — standard page shell. Wraps page content in Container (width constraint) and applies the canonical vertical padding so content breathes against the viewp…
700
444
  - children: ReactNode
@@ -736,10 +480,13 @@ Popover root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with
736
480
  - open: boolean
737
481
 
738
482
  ### Progress
739
- Linear progress. Determinate when `value` is a number, else indeterminate.
483
+ Linear bar or circular ring. Determinate when `value` is a number, else indeterminate.
740
484
  - label: string = Progress
485
+ - max: number = 100
741
486
  - size: "sm" | "md" | "lg" | null
487
+ - tone: "success" | "danger" | "warning" | "info" | "neutral" = neutral
742
488
  - value: number | null = null
489
+ - variant: "linear" | "circular" = linear
743
490
 
744
491
  ### Radio
745
492
  Radio — radio button with animated selection indicator.
@@ -770,30 +517,16 @@ SegmentedControl " segmented selection input for compact mutually-exclusive choi
770
517
 
771
518
  ### Select
772
519
  Select — dropdown selector built on Radix Select (ADR-001 Radix convention). Radix owns the listbox a11y contract: managed focus + active-descendant, typeahead…
520
+ - aria-describedby: string
521
+ - aria-invalid: boolean
773
522
  - container: HTMLElement | null
523
+ - id: string
774
524
  - label: string
775
525
  - onChange: (v: string) => void
776
526
  - options: { value: string; label: string; }[]
777
527
  - showLabel: boolean = true
778
528
  - value: string
779
529
 
780
- ### SelectableCard
781
- A card-shaped single checkbox — click or activate to toggle selection.
782
- - disabled: boolean
783
- - onSelectedChange: ((selected: boolean) => void)
784
- - selected: boolean = false
785
-
786
- ### SideNav
787
- SideNav - sidebar navigation row primitive. Two levels: root — top-level section link. Full-width row using the shared nav label type style. nested — child pag…
788
- - active: boolean = false
789
- - disabled: boolean = false
790
- - href: string
791
- - indent: number | boolean = 0
792
- - label: string
793
- - level: 'root' | 'nested' = nested
794
- - onNavigate: ((event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void)
795
- - titleLabel: boolean = false
796
-
797
530
  ### Sidebar
798
531
  Sidebar — fixed-width rail beside fluid content, no media query. Every Layout reference: https://every-layout.dev/layouts/sidebar/
799
532
  - as: ElementType<any, keyof IntrinsicElements> = div
@@ -808,15 +541,9 @@ Sidebar — fixed-width rail beside fluid content, no media query. Every Layout
808
541
  ### Skeleton
809
542
  Decorative loading placeholder. Marked aria-hidden — announce the loading state on the surrounding region (e.g. aria-busy) rather than per skeleton.
810
543
  - height: string | number
811
- - variant: "text" | "rectangular" | "circular" | null = rectangular
544
+ - variant: "text" | "circular" | "rectangular" | null = rectangular
812
545
  - width: string | number
813
546
 
814
- ### Sketch
815
- Sketch — shared shell for generative canvases and WebGL sketches.
816
- - children: ReactNode
817
- - controls: ReactNode
818
- - title: string
819
-
820
547
  ### Slider
821
548
  Slider — range slider with label and value display.
822
549
  - label: string
@@ -843,28 +570,18 @@ Stack — one-dimensional layout primitive.
843
570
  - style: CSSProperties
844
571
  - wrap: FlexWrap
845
572
 
846
- ### StackedCardRail
847
- StackedCardRail — horizontally-scrolling stacked card carousel. Scroll mechanism: vertical scroll on an absolutely-positioned inner container is mapped to hori…
848
- - cards: StackedCardRailCard[]
849
-
850
573
  ### Stat
851
574
  Headline metric — large value, uppercase caption label, optional sub-line.
852
575
  - label: string
853
576
  - sub: ReactNode
854
- - tone: "neutral" | "danger" | "success" | "warning" | "info" | null
577
+ - tone: "success" | "danger" | "warning" | "info" | "neutral" | null
855
578
  - value: ReactNode
856
579
 
857
- ### StatusDot
858
- A small solid dot conveying a semantic status via `tone`.
859
- - label: string
860
- - size: "sm" | "md" | "lg" | null
861
- - tone: "neutral" | "danger" | "success" | "warning" | "info" | "inProgress" | null
862
-
863
580
  ### StatusListItem
864
581
  Status dot + title row with optional muted notes and trailing slot (e.g. badge).
865
582
  - notes: ReactNode[]
866
583
  - title: ReactNode
867
- - tone: "neutral" | "danger" | "success" | "warning" | "info" | null
584
+ - tone: "success" | "danger" | "warning" | "info" | "neutral" | null
868
585
  - trailing: ReactNode
869
586
 
870
587
  ### StatusTile
@@ -874,23 +591,6 @@ Block-layout sibling of StatusListItem. Renders a raised surface tile with title
874
591
  - tone: 'success' | 'warning' | 'danger' | 'info' | 'neutral' = neutral
875
592
  - trailing: ReactNode
876
593
 
877
- ### Stepper
878
- Step indicator for multi-step flows. Purely presentational — no navigation.
879
- - activeStep: number
880
- - orientation: "horizontal" | "vertical" = horizontal
881
- - steps: Step[]
882
-
883
- ### StepperField
884
- StepperField ” numeric input with decrement/increment controls. Classification baseline: Material Design, Chakra UI, and Ant Design treat steppers as numeric i…
885
- - inputStep: number
886
- - label: string
887
- - max: number
888
- - min: number
889
- - onChange: (value: number) => void
890
- - precision: number
891
- - step: number
892
- - value: number
893
-
894
594
  ### Surface
895
595
  Surface — governed inset surface primitive. Enforces the "Surface Inset" rule: backgrounds MUST have internal padding. - Default padding: px24 (cards) | px16 (…
896
596
  - as: ElementType<any, keyof IntrinsicElements> = div
@@ -958,24 +658,12 @@ Tag — interactive filter and category chip. The outer <button> carries the acc
958
658
 
959
659
  ### Text
960
660
  Text — polymorphic typography primitive spanning the full HDS type ramp.
961
- - as: "symbol" | "object" | "map" | "filter" | "title" | "a" | "button" | "div" | "fo… = defaultTagMap[variant]
661
+ - as: "symbol" | "object" | "title" | "a" | "button" | "div" | "form" | "h2" | "h3" |… = defaultTagMap[variant]
962
662
  - children: ReactNode
963
663
  - className: string
964
664
  - style: CSSProperties
965
665
  - variant: TextVariant
966
666
 
967
- ### TextLockup
968
- TextLockup - governed title-and-description pairing primitive.
969
- - align: 'left' | 'center' = left
970
- - as: ElementType = div
971
- - description: ReactNode
972
- - descriptionAs: 'div' | 'p' | 'span' = div
973
- - eyebrow: string
974
- - id: string
975
- - size: 'hero' | 'heroXl' | 'section' | 'metric' | 'detail' | 'numbered'
976
- - title: string
977
- - titleAs: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
978
-
979
667
  ### Textarea
980
668
  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 …
981
669
  - className: string
@@ -987,15 +675,6 @@ Textarea — multi-line text field primitive with label, helper, and error slots
987
675
  - resize: TextareaResize = vertical
988
676
  - textareaClassName: string
989
677
 
990
- ### TileGrid
991
- 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.
992
- - gap: "sm" | "md" | "xs" = sm
993
- - minTileWidth: string = 260px
994
-
995
- ### TimeInput
996
- A native time field skinned with HDS input chrome. Value is a `HH:mm` string.
997
- - size: "sm" | "md" | "lg" | null
998
-
999
678
  ### Timestamp
1000
679
  Presents a date/time with a machine-readable `dateTime` for accessibility.
1001
680
  - date: string | number | Date
@@ -1015,54 +694,6 @@ Toggle — boolean on/off toggle with animated thumb.
1015
694
  - label: string
1016
695
  - onChange: (v: boolean) => void
1017
696
 
1018
- ### ToggleButton
1019
- 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.
1020
- - asChild: boolean
1021
- - defaultPressed: boolean
1022
- - onPressedChange: ((pressed: boolean) => void)
1023
- - pressed: boolean
1024
- - size: "sm" | "md" | "lg" | null
1025
- - variant: "secondary" | "ghost" | null
1026
-
1027
- ### Token
1028
- Token - reflective token specimen for unified node-based token views. The `variant` axis (node | diagram — diagram is a deprecated alias that resolves to the s…
1029
- - accentColor: string
1030
- - aria-label: string
1031
- - className: string
1032
- - description: ReactNode
1033
- - fullWidth: boolean
1034
- - isSelected: boolean
1035
- - isSourceNode: boolean
1036
- - label: string
1037
- - leadingSlot: ReactNode
1038
- - nodeRef: ((el: HTMLElement | null) => void)
1039
- - nowrap: boolean
1040
- - onClick: (() => void) | (() => void)
1041
- - pathDisplayDepth: number
1042
- - pathDisplayLeadingDot: boolean
1043
- - pathDisplayMode: "full" | "compressed"
1044
- - rawValue: ReactNode
1045
- - swatchVar: string
1046
- - tokenPath: string
1047
- - truncateFromStart: boolean
1048
- - value: string
1049
- - variant: "node" | "diagram"
1050
-
1051
- ### Tokenizer
1052
- A bordered field of Tag chips followed by a text input for adding more.
1053
- - className: string
1054
- - disabled: boolean
1055
- - onChange: (next: string[]) => void
1056
- - placeholder: string
1057
- - value: string[]
1058
-
1059
- ### Toolbar
1060
- Toolbar root. Groups related controls with a single roving tab-stop. Supports the native `orientation` prop (`horizontal` | `vertical`).
1061
- - asChild: boolean
1062
- - dir: ("ltr" | "rtl")
1063
- - loop: boolean
1064
- - orientation: "horizontal" | "vertical"
1065
-
1066
697
  ### Tooltip
1067
698
  Tooltip root. Bakes in the Radix Provider so a single `<Tooltip>` is self-contained — no app-level provider required. Controlled via `open`/`onOpenChange`, or …
1068
699
  - children: React.ReactNode
@@ -1072,19 +703,6 @@ Tooltip root. Bakes in the Radix Provider so a single `<Tooltip>` is self-contai
1072
703
  - onOpenChange: ((open: boolean) => void)
1073
704
  - open: boolean
1074
705
 
1075
- ### TopNav
1076
- Top navigation bar with brand, nav, and trailing action slots.
1077
- - brand: ReactNode
1078
- - children: ReactNode
1079
- - sticky: boolean
1080
- - trailing: ReactNode
1081
-
1082
- ### TreeList
1083
- Renders a hierarchical `role="tree"` list; nodes with children get an expand/collapse toggle.
1084
- - defaultExpandedIds: string[]
1085
- - items: TreeNode[]
1086
- - onSelect: ((id: string) => void)
1087
-
1088
706
  ### VisuallyHidden
1089
707
  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-onl…
1090
708
  - as: ElementType<any, keyof IntrinsicElements> = span