@utilitywarehouse/hearth-react 0.29.8 → 0.30.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 (73) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +7 -7
  5. package/public/llms/components/accordion.md +15 -22
  6. package/public/llms/components/alert.md +6 -25
  7. package/public/llms/components/avatar.md +6 -13
  8. package/public/llms/components/badge.md +6 -14
  9. package/public/llms/components/body-text.md +8 -20
  10. package/public/llms/components/box.md +5 -78
  11. package/public/llms/components/button.md +9 -16
  12. package/public/llms/components/card-accordion.md +7 -25
  13. package/public/llms/components/card.md +4 -11
  14. package/public/llms/components/checkbox-group.md +16 -23
  15. package/public/llms/components/checkbox-tile.md +13 -20
  16. package/public/llms/components/checkbox.md +13 -20
  17. package/public/llms/components/combobox.md +49 -56
  18. package/public/llms/components/container.md +0 -61
  19. package/public/llms/components/currency-input.md +13 -20
  20. package/public/llms/components/date-input.md +30 -37
  21. package/public/llms/components/date-picker.md +0 -7
  22. package/public/llms/components/description-list.md +9 -19
  23. package/public/llms/components/detail-text.md +7 -18
  24. package/public/llms/components/divider.md +4 -11
  25. package/public/llms/components/em.md +4 -15
  26. package/public/llms/components/expandable-card.md +17 -31
  27. package/public/llms/components/grid.md +15 -97
  28. package/public/llms/components/heading.md +6 -17
  29. package/public/llms/components/helper-text.md +4 -13
  30. package/public/llms/components/highlight-banner.md +6 -13
  31. package/public/llms/components/icon-button.md +9 -16
  32. package/public/llms/components/icon-container.md +6 -18
  33. package/public/llms/components/inline-link.md +5 -13
  34. package/public/llms/components/label.md +7 -15
  35. package/public/llms/components/link.md +5 -13
  36. package/public/llms/components/list.md +16 -29
  37. package/public/llms/components/pagination.md +8 -15
  38. package/public/llms/components/password-input.md +12 -19
  39. package/public/llms/components/progress-bar.md +12 -19
  40. package/public/llms/components/progress-stepper.md +4 -11
  41. package/public/llms/components/radio-group.md +27 -45
  42. package/public/llms/components/search-input.md +13 -20
  43. package/public/llms/components/section-header.md +9 -16
  44. package/public/llms/components/select.md +20 -27
  45. package/public/llms/components/skeleton.md +7 -27
  46. package/public/llms/components/spinner.md +4 -12
  47. package/public/llms/components/strong.md +4 -15
  48. package/public/llms/components/switch.md +9 -16
  49. package/public/llms/components/table.md +4 -11
  50. package/public/llms/components/text-area.md +14 -21
  51. package/public/llms/components/text-input.md +14 -21
  52. package/public/llms/components/toggle-button-card.md +3 -88
  53. package/public/llms/components/validation-text.md +4 -13
  54. package/public/llms/components/verification-input.md +26 -33
  55. package/public/llms/docs/common-props/align-self.md +3 -78
  56. package/public/llms/docs/common-props/border.md +30 -234
  57. package/public/llms/docs/common-props/colour.md +6 -156
  58. package/public/llms/docs/common-props/flex-items.md +6 -78
  59. package/public/llms/docs/common-props/gap.md +5 -87
  60. package/public/llms/docs/common-props/grid-items.md +10 -78
  61. package/public/llms/docs/common-props/margin.md +9 -78
  62. package/public/llms/docs/common-props/opacity.md +3 -78
  63. package/public/llms/docs/common-props/order.md +0 -79
  64. package/public/llms/docs/common-props/overflow.md +5 -78
  65. package/public/llms/docs/common-props/padding.md +9 -78
  66. package/public/llms/docs/common-props/position.md +8 -78
  67. package/public/llms/docs/common-props/size.md +8 -78
  68. package/public/llms/docs/common-props/spacing.md +3 -87
  69. package/public/llms/docs/common-props/text.md +6 -20
  70. package/public/llms/docs/common-props/z-index.md +3 -78
  71. package/public/llms/docs/getting-started.md +1 -1
  72. package/public/llms/docs/responsive-design/breakpoints.md +2 -2
  73. package/styles.css +2 -2
@@ -109,16 +109,9 @@ This component is based on the `div` element and supports the following common p
109
109
 
110
110
  - Margin
111
111
 
112
- | Prop | Type | Default | Description |
113
- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------- |
114
- | `shadowColor` | `"brand" \| "mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "functional"` | — | Sets the card shadow colour |
115
- | `margin` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
116
- | `marginTop` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
117
- | `marginRight` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
118
- | `marginBottom` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
119
- | `marginLeft` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
120
- | `marginX` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
121
- | `marginY` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
122
- | `colorScheme` | `"neutralStrong" \| "neutralSubtle"` | — | |
123
- | `heading` | `string` | — | |
124
- | `headingColor` | `"mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | — | |
112
+ | Prop | Type | Default | Description |
113
+ | -------------- | ------------------------------------------------------------------------------------------------------ | ------- | --------------------------- |
114
+ | `shadowColor` | `"brand" \| "mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "functional"` | — | Sets the card shadow colour |
115
+ | `colorScheme` | `"neutralStrong" \| "neutralSubtle"` | — | |
116
+ | `heading` | `string` | — | |
117
+ | `headingColor` | `"mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | — | |
@@ -498,19 +498,12 @@ This component is based on the `button` element and supports the following commo
498
498
 
499
499
  - Margin
500
500
 
501
- | Prop | Type | Default | Description |
502
- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
503
- | `label` | `string` | — | An accessibility label that describes the button. Make sure this label reflects the visual icon. |
504
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
505
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
506
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
507
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
508
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
509
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
510
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
511
- | `variant` | `"emphasis" \| "solid" \| "outline" \| "ghost"` | — | Sets the button's visual variant |
512
- | `colorScheme` | `"highlight" \| "affirmative" \| "destructive" \| "functional"` | — | Sets the button's colour scheme |
513
- | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
514
- | `loading` | `boolean` | — | Indicate when the button is in a loading state, will also disable the button. |
515
- | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
516
- | `size` | `Responsive<"sm" \| "md">` | `md` | Sets the button height. |
501
+ | Prop | Type | Default | Description |
502
+ | ------------- | --------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
503
+ | `label` | `string` | — | An accessibility label that describes the button. Make sure this label reflects the visual icon. |
504
+ | `variant` | `"emphasis" \| "solid" \| "outline" \| "ghost"` | — | Sets the button's visual variant |
505
+ | `colorScheme` | `"highlight" \| "affirmative" \| "destructive" \| "functional"` | — | Sets the button's colour scheme |
506
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
507
+ | `loading` | `boolean` | — | Indicate when the button is in a loading state, will also disable the button. |
508
+ | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
509
+ | `size` | `Responsive<"sm" \| "md">` | `md` | Sets the button height. |
@@ -227,21 +227,9 @@ This component is based on the `span` element and supports the following common
227
227
  - Border Radius
228
228
  - Size
229
229
 
230
- | Prop | Type | Default | Description |
231
- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------- |
232
- | `size` | `Responsive<"sm" \| "md" \| "lg">` | `md` | Sets the container size. |
233
- | `variant` | `"emphasis" \| "subtle"` | `subtle` | Sets the container's visual variant |
234
- | `colorScheme` | `"mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | `pig` | Sets the colour scheme. |
235
- | `fill` | `"height" \| "width" \| "both"` | — | Fill the container height, width or both, rather than having a constrained size |
236
- | `borderRadius` | `Responsive<"none" \| "inherit">` | — | |
237
- | `borderTopLeftRadius` | `Responsive<"none" \| "inherit">` | — | |
238
- | `borderTopRightRadius` | `Responsive<"none" \| "inherit">` | — | |
239
- | `borderBottomRightRadius` | `Responsive<"none" \| "inherit">` | — | |
240
- | `borderBottomLeftRadius` | `Responsive<"none" \| "inherit">` | — | |
241
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
242
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
243
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
244
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
245
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
246
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
247
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
230
+ | Prop | Type | Default | Description |
231
+ | ------------- | ------------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------- |
232
+ | `size` | `Responsive<"sm" \| "md" \| "lg">` | `md` | Sets the container size. |
233
+ | `variant` | `"emphasis" \| "subtle"` | `subtle` | Sets the container's visual variant |
234
+ | `colorScheme` | `"mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | `pig` | Sets the colour scheme. |
235
+ | `fill` | `"height" \| "width" \| "both"` | — | Fill the container height, width or both, rather than having a constrained size |
@@ -175,16 +175,8 @@ This component is based on the `a` element and supports the following common pro
175
175
  - Margin
176
176
  - Text transform
177
177
 
178
- | Prop | Type | Default | Description |
179
- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
180
- | `color` | `"default" \| "inverted" \| "inherit"` | — | Sets the color scheme for the InlineLink. - 'default': Uses the standard link color. - 'inverted': Uses a color suitable for dark backgrounds. Use when placing the link on a dark or colored background for better contrast. - 'inherit': Inherits the color from its parent element. Use to match the surrounding text color. |
181
- | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
182
- | `hideOpenIcon` | `boolean` | — | Hides the "open in new tab" icon when `target="_blank"` is set. |
183
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
184
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
185
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
186
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
187
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
188
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
189
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
190
- | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
178
+ | Prop | Type | Default | Description |
179
+ | -------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
180
+ | `color` | `"default" \| "inverted" \| "inherit"` | — | Sets the color scheme for the InlineLink. - 'default': Uses the standard link color. - 'inverted': Uses a color suitable for dark backgrounds. Use when placing the link on a dark or colored background for better contrast. - 'inherit': Inherits the color from its parent element. Use to match the surrounding text color. |
181
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
182
+ | `hideOpenIcon` | `boolean` | — | Hides the "open in new tab" icon when `target="_blank"` is set. |
@@ -11,18 +11,10 @@ This component is based on the `label` element, and supports the following commo
11
11
  - Margin
12
12
  - Text transform
13
13
 
14
- | Prop | Type | Default | Description |
15
- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
16
- | `as` | `"label" \| "span"` | `label` | Shorthand for changing the default rendered element into a semantically appropriate alternative. Cannot be used in combination with `asChild`. |
17
- | `variant` | `"body" \| "heading"` | — | |
18
- | `fontWeight` | `"regular" \| "semibold"` | — | |
19
- | `disabled` | `boolean` | — | Set the label appearance to disabled |
20
- | `disableUserSelect` | `boolean` | — | Make the text unselectable, for use when associated with input elements. |
21
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
22
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
23
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
24
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
25
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
26
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
27
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
28
- | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
14
+ | Prop | Type | Default | Description |
15
+ | ------------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
16
+ | `as` | `"label" \| "span"` | `label` | Shorthand for changing the default rendered element into a semantically appropriate alternative. Cannot be used in combination with `asChild`. |
17
+ | `variant` | `"body" \| "heading"` | — | |
18
+ | `fontWeight` | `"regular" \| "semibold"` | — | |
19
+ | `disabled` | `boolean` | — | Set the label appearance to disabled |
20
+ | `disableUserSelect` | `boolean` | — | Make the text unselectable, for use when associated with input elements. |
@@ -221,16 +221,8 @@ This component is based on the `a` element and supports the following common pro
221
221
  - Margin
222
222
  - Text transform
223
223
 
224
- | Prop | Type | Default | Description |
225
- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
226
- | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
227
- | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
228
- | `hideOpenIcon` | `boolean` | — | Hides the "open in new tab" icon when `target="_blank"` is set. |
229
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
230
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
231
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
232
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
233
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
234
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
235
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
236
- | `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
224
+ | Prop | Type | Default | Description |
225
+ | -------------- | --------- | ------- | ---------------------------------------------------------------------------------------------------- |
226
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
227
+ | `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
228
+ | `hideOpenIcon` | `boolean` | — | Hides the "open in new tab" icon when `target="_blank"` is set. |
@@ -539,26 +539,19 @@ This component is based on the `ul` element and supports the following common pr
539
539
 
540
540
  - Margin
541
541
 
542
- | Prop | Type | Default | Description |
543
- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------- |
544
- | `heading` | `string` | — | Actual string to display as section header |
545
- | `headingElement` | `"div" \| "h1" \| "h2" \| "h3" \| "h4"` | `h2` | |
546
- | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
547
- | `trailingContent` | `ReactNode` | — | Optional trailing content element |
548
- | `validationStatus` | `"invalid"` | — | Indicates the validation state |
549
- | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
550
- | `direction` | `Responsive<"row" \| "column">` | — | Responsive direction of the section header content. By default, the content is laid out in a row. |
551
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
552
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
553
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
554
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
555
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
556
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
557
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
558
- | `variant` | `"emphasis" \| "subtle"` | `undefined` | Sets the visual variant of the list. |
559
- | `colorScheme` | `"neutralStrong" \| "neutralSubtle"` | — | Sets the color scheme of the list. |
560
- | `as` | `"ol" \| "ul"` | `ul` | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
561
- | `paddingNone` | `boolean` | — | Remove the inline padding for better alignment with other elements. |
542
+ | Prop | Type | Default | Description |
543
+ | ------------------ | --------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------- |
544
+ | `heading` | `string` | — | Actual string to display as section header |
545
+ | `headingElement` | `"div" \| "h1" \| "h2" \| "h3" \| "h4"` | `h2` | |
546
+ | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
547
+ | `trailingContent` | `ReactNode` | — | Optional trailing content element |
548
+ | `validationStatus` | `"invalid"` | — | Indicates the validation state |
549
+ | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
550
+ | `direction` | `Responsive<"row" \| "column">` | — | Responsive direction of the section header content. By default, the content is laid out in a row. |
551
+ | `variant` | `"emphasis" \| "subtle"` | `undefined` | Sets the visual variant of the list. |
552
+ | `colorScheme` | `"neutralStrong" \| "neutralSubtle"` | — | Sets the color scheme of the list. |
553
+ | `as` | `"ol" \| "ul"` | `ul` | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
554
+ | `paddingNone` | `boolean` | — | Remove the inline padding for better alignment with other elements. |
562
555
 
563
556
  ## ListItem
564
557
 
@@ -690,15 +683,9 @@ This component is base on the `a` element and extends the `ListItemContent`
690
683
  component, so it supports all the same props, as well as the following
691
684
  additional props:
692
685
 
693
- | Prop | Type | Default | Description |
694
- | ----------------- | ------------------- | ---------- | ---------------------------------------------------------------------------------------------------- |
695
- | `heading` | `string` | — | |
696
- | `helperText` | `ReactNode` | — | Optional helper text to provide additional context or instructions. |
697
- | `leadingContent` | `ReactNode` | — | |
698
- | `trailingContent` | `ReactNode` | — | |
699
- | `badge` | `ReactNode` | — | |
700
- | `badgePlacement` | `"top" \| "bottom"` | `'bottom'` | Placement of the badge element |
701
- | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
686
+ | Prop | Type | Default | Description |
687
+ | --------- | --------- | ------- | ---------------------------------------------------------------------------------------------------- |
688
+ | `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
702
689
 
703
690
  ## ListActionLink
704
691
 
@@ -121,18 +121,11 @@ This component is based on the `div` element by default and supports the followi
121
121
 
122
122
  - Margin
123
123
 
124
- | Prop | Type | Default | Description |
125
- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
126
- | `as` | `"div" \| "nav"` | `div` | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
127
- | `currentPage` | `number` | — | The current active page number (1-indexed) |
128
- | `totalPages` | `number` | — | The total number of pages |
129
- | `onPageChange` | `(page: number) => void` | — | Callback when page changes |
130
- | `condensed` | `boolean` | `false` | Whether to show condensed version with only "Page X of Y" text |
131
- | `hideSkipButtons` | `boolean` | `false` | Whether to hide the skip to first/last page buttons |
132
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
133
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
134
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
135
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
136
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
137
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
138
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
124
+ | Prop | Type | Default | Description |
125
+ | ----------------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------ |
126
+ | `as` | `"div" \| "nav"` | `div` | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
127
+ | `currentPage` | `number` | — | The current active page number (1-indexed) |
128
+ | `totalPages` | `number` | — | The total number of pages |
129
+ | `onPageChange` | `(page: number) => void` | — | Callback when page changes |
130
+ | `condensed` | `boolean` | `false` | Whether to show condensed version with only "Page X of Y" text |
131
+ | `hideSkipButtons` | `boolean` | `false` | Whether to hide the skip to first/last page buttons |
@@ -72,22 +72,15 @@ This component is based on the `TextInput` component and supports the following
72
72
 
73
73
  - Margin
74
74
 
75
- | Prop | Type | Default | Description |
76
- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- |
77
- | `label` | `string` | — | The label for the form field, describing its purpose. |
78
- | `defaultValue` | `string \| number` | — | The initial value of the input when rendered. |
79
- | `value` | `string \| number` | — | The controlled value of the input. Must be used with an `onChange` handler. |
80
- | `labelId` | `string` | — | |
81
- | `helperTextId` | `string` | — | |
82
- | `validationTextId` | `string` | — | |
83
- | `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
84
- | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
85
- | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
86
- | `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
87
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
88
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
89
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
90
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
91
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
92
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
93
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
75
+ | Prop | Type | Default | Description |
76
+ | ------------------ | ---------------------- | ------- | --------------------------------------------------------------------------- |
77
+ | `label` | `string` | — | The label for the form field, describing its purpose. |
78
+ | `defaultValue` | `string \| number` | — | The initial value of the input when rendered. |
79
+ | `value` | `string \| number` | — | The controlled value of the input. Must be used with an `onChange` handler. |
80
+ | `labelId` | `string` | — | |
81
+ | `helperTextId` | `string` | — | |
82
+ | `validationTextId` | `string` | — | |
83
+ | `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
84
+ | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
85
+ | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
86
+ | `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
@@ -118,22 +118,15 @@ This component is based on the `div` element and supports the following common p
118
118
 
119
119
  - Margin
120
120
 
121
- | Prop | Type | Default | Description |
122
- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------- |
123
- | `label` | `string` | — | The required text label. Can be visually hidden with the `hideLabel` prop. |
124
- | `variant` | `"linear" \| "circular"` | — | |
125
- | `colorScheme` | `"default" \| "success" \| "danger"` | `'default'` | Set the visual apearance. |
126
- | `size` | `Responsive<"sm" \| "md">` | `md` | Sets the circular variant size. Does not affect the appearance of the linear variant. |
127
- | `value` | `number` | — | The current progress value. |
128
- | `min` | `number` | `0` | The minimum value. |
129
- | `max` | `number` | `100` | The maximum value. |
130
- | `hideLabel` | `boolean` | — | Visually hide the label. |
131
- | `formatValueText` | `((value: number) => string)` | — | Override the default percentage value label formatting |
132
- | `aria-valuetext` | `string` | — | A human-readable text alternative for the current value (`aria-valuenow`). |
133
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
134
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
135
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
136
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
137
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
138
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
139
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
121
+ | Prop | Type | Default | Description |
122
+ | ----------------- | ------------------------------------ | ----------- | ------------------------------------------------------------------------------------- |
123
+ | `label` | `string` | — | The required text label. Can be visually hidden with the `hideLabel` prop. |
124
+ | `variant` | `"linear" \| "circular"` | — | |
125
+ | `colorScheme` | `"default" \| "success" \| "danger"` | `'default'` | Set the visual apearance. |
126
+ | `size` | `Responsive<"sm" \| "md">` | `md` | Sets the circular variant size. Does not affect the appearance of the linear variant. |
127
+ | `value` | `number` | — | The current progress value. |
128
+ | `min` | `number` | `0` | The minimum value. |
129
+ | `max` | `number` | `100` | The maximum value. |
130
+ | `hideLabel` | `boolean` | — | Visually hide the label. |
131
+ | `formatValueText` | `((value: number) => string)` | — | Override the default percentage value label formatting |
132
+ | `aria-valuetext` | `string` | — | A human-readable text alternative for the current value (`aria-valuenow`). |
@@ -108,17 +108,10 @@ This component is based on the `div` element and supports the following common p
108
108
 
109
109
  - Margin
110
110
 
111
- | Prop | Type | Default | Description |
112
- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------- |
113
- | `hideLabels` | `boolean` | `false` | Whether to hide step labels |
114
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
115
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
116
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
117
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
118
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
119
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
120
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
121
- | `as` | `"div" \| "nav"` | — | |
111
+ | Prop | Type | Default | Description |
112
+ | ------------ | ---------------- | ------- | --------------------------- |
113
+ | `hideLabels` | `boolean` | `false` | Whether to hide step labels |
114
+ | `as` | `"div" \| "nav"` | — | |
122
115
 
123
116
  ### ProgressStep API
124
117