@instruments/materia-ui 0.4.1 → 0.4.3

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 (118) hide show
  1. package/README.md +2 -4
  2. package/agent-docs.md +9 -9
  3. package/dist/components/accordion/accordion-root.d.ts +1 -0
  4. package/dist/components/accordion/accordion-root.js +1 -0
  5. package/dist/components/alert/alert-root.d.ts +1 -0
  6. package/dist/components/alert/alert-root.js +1 -0
  7. package/dist/components/alert-dialog/alert-dialog-root.d.ts +1 -0
  8. package/dist/components/alert-dialog/alert-dialog-root.js +1 -0
  9. package/dist/components/avatar/avatar-root.d.ts +1 -0
  10. package/dist/components/avatar/avatar-root.js +1 -0
  11. package/dist/components/badge/badge-root.d.ts +1 -0
  12. package/dist/components/badge/badge-root.js +1 -0
  13. package/dist/components/calendar/calendar-root.js +1 -0
  14. package/dist/components/carousel/carousel-root.d.ts +1 -0
  15. package/dist/components/carousel/carousel-root.js +1 -0
  16. package/dist/components/chart/chart-root.d.ts +1 -0
  17. package/dist/components/chart/chart-root.js +1 -0
  18. package/dist/components/collapsible/collapsible-root.d.ts +1 -0
  19. package/dist/components/collapsible/collapsible-root.js +1 -0
  20. package/dist/components/combobox/combobox-root.d.ts +1 -0
  21. package/dist/components/combobox/combobox-root.js +1 -0
  22. package/dist/components/command/command-root.d.ts +1 -0
  23. package/dist/components/command/command-root.js +1 -0
  24. package/dist/components/dialog/dialog-content.d.ts +2 -0
  25. package/dist/components/dialog/dialog-content.js +3 -2
  26. package/dist/components/dialog/dialog-footer.d.ts +2 -0
  27. package/dist/components/dialog/dialog-footer.js +8 -8
  28. package/dist/components/dialog/dialog-root.d.ts +1 -0
  29. package/dist/components/dialog/dialog-root.js +1 -0
  30. package/dist/components/dialog/dialog-title.d.ts +2 -0
  31. package/dist/components/dialog/dialog-title.js +3 -1
  32. package/dist/components/drawer/drawer-root.d.ts +1 -0
  33. package/dist/components/drawer/drawer-root.js +1 -0
  34. package/dist/components/heading/heading-root.d.ts +1 -0
  35. package/dist/components/heading/heading-root.js +1 -0
  36. package/dist/components/input/input-root.d.ts +1 -0
  37. package/dist/components/input/input-root.js +1 -0
  38. package/dist/components/kbd/kbd-root.d.ts +1 -0
  39. package/dist/components/kbd/kbd-root.js +1 -0
  40. package/dist/components/logo/logo-mark.d.ts +1 -1
  41. package/dist/components/logo/logo-mark.js +1 -1
  42. package/dist/components/logotype/logotype-paths.d.ts +1 -1
  43. package/dist/components/logotype/logotype-paths.js +1 -1
  44. package/dist/components/month-year-picker/month-year-picker-root.d.ts +1 -0
  45. package/dist/components/month-year-picker/month-year-picker-root.js +1 -0
  46. package/dist/components/native-select/native-select-root.d.ts +1 -0
  47. package/dist/components/native-select/native-select-root.js +1 -0
  48. package/dist/components/pill/pill-root.d.ts +1 -0
  49. package/dist/components/pill/pill-root.js +1 -0
  50. package/dist/components/popover/popover-root.d.ts +1 -0
  51. package/dist/components/popover/popover-root.js +1 -0
  52. package/dist/components/quantity-control/quantity-control-root.d.ts +1 -0
  53. package/dist/components/quantity-control/quantity-control-root.js +1 -0
  54. package/dist/components/select/select-root.d.ts +1 -0
  55. package/dist/components/select/select-root.js +1 -0
  56. package/dist/components/separator/separator-root.d.ts +1 -0
  57. package/dist/components/separator/separator-root.js +1 -0
  58. package/dist/components/sheet/sheet-root.d.ts +1 -0
  59. package/dist/components/sheet/sheet-root.js +1 -0
  60. package/dist/components/spinner/spinner-root.d.ts +1 -0
  61. package/dist/components/spinner/spinner-root.js +1 -0
  62. package/dist/components/stepper/stepper-root.d.ts +1 -0
  63. package/dist/components/stepper/stepper-root.js +1 -0
  64. package/dist/components/success-tick-ripple/success-tick-ripple-root.d.ts +1 -0
  65. package/dist/components/success-tick-ripple/success-tick-ripple-root.js +1 -0
  66. package/dist/components/switch/switch-root.d.ts +1 -0
  67. package/dist/components/switch/switch-root.js +1 -0
  68. package/dist/components/tag/tag-root.d.ts +1 -0
  69. package/dist/components/tag/tag-root.js +1 -0
  70. package/dist/components/textarea/textarea-root.d.ts +1 -0
  71. package/dist/components/textarea/textarea-root.js +1 -0
  72. package/dist/components/time-slot-picker/time-slot-picker-root.d.ts +1 -0
  73. package/dist/components/time-slot-picker/time-slot-picker-root.js +1 -0
  74. package/dist/components/toast/toast-root.d.ts +1 -0
  75. package/dist/components/toast/toast-root.js +1 -0
  76. package/dist/components/tooltip/tooltip-root.d.ts +1 -0
  77. package/dist/components/tooltip/tooltip-root.js +1 -0
  78. package/dist/compositions/empty-state/empty-state-root.d.ts +1 -0
  79. package/dist/compositions/empty-state/empty-state-root.js +1 -0
  80. package/dist/compositions/file-upload/file-upload-dropzone.d.ts +1 -0
  81. package/dist/compositions/file-upload/file-upload-dropzone.js +1 -0
  82. package/dist/compositions/product-card/product-card-caption.js +4 -2
  83. package/dist/compositions/product-card/product-card-content-types.d.ts +8 -0
  84. package/dist/compositions/product-card/product-card-meta.js +2 -2
  85. package/dist/compositions/product-card/product-card-provider-types.d.ts +3 -0
  86. package/dist/compositions/product-card/product-card-provider.js +4 -1
  87. package/dist/compositions/product-card/product-card-root.d.ts +1 -1
  88. package/dist/compositions/product-card/product-card-root.js +2 -1
  89. package/dist/compositions/product-card/product-card-skeleton.d.ts +14 -5
  90. package/dist/compositions/product-card/product-card-skeleton.js +6 -5
  91. package/dist/data/decision-trees.d.ts +1 -1
  92. package/dist/data/decision-trees.js +1 -1
  93. package/dist/data/docs-manifest.d.ts +2 -0
  94. package/dist/data/docs-manifest.js +257 -67
  95. package/dist/styles/index.css +0 -1
  96. package/dist/utils/cn-theme.js +1 -1
  97. package/lint/README.md +6 -2
  98. package/lint/doctrine-rules.mjs +4 -4
  99. package/lint/oxlint/index.d.mts +13 -5
  100. package/lint/oxlint/index.mjs +26 -0
  101. package/lint/oxlint/no-naked-element.mjs +123 -65
  102. package/lint/oxlint/no-render-layout-as.mjs +61 -56
  103. package/lint/scan-classes.d.mts +58 -5
  104. package/lint/scan-classes.mjs +274 -38
  105. package/lint/tokens.d.mts +16 -8
  106. package/lint/tokens.mjs +13 -3
  107. package/lint/type-case.d.mts +16 -8
  108. package/lint/type-case.mjs +17 -0
  109. package/package.json +27 -14
  110. package/lint/oxlint/fixtures/allowed.tsx +0 -12
  111. package/lint/oxlint/fixtures/fixture.config.mjs +0 -29
  112. package/lint/oxlint/fixtures/invalid.tsx +0 -24
  113. package/lint/oxlint/fixtures/layout-only.tsx +0 -26
  114. package/lint/oxlint/fixtures/render-as-invalid.tsx +0 -11
  115. package/lint/oxlint/fixtures/render-as-valid.tsx +0 -14
  116. package/lint/oxlint/fixtures/valid.tsx +0 -18
  117. package/lint/oxlint/no-naked-element.test.ts +0 -155
  118. package/lint/oxlint/no-render-layout-as.test.ts +0 -81
@@ -1,5 +1,5 @@
1
1
  /* oxlint-disable max-lines -- generated data module: one entry per design-system unit. */
2
- // GENERATED by scripts/generate-docs-manifest.mjs - do not edit.
2
+ // GENERATED by scripts/generate-docs-manifest.ts - do not edit.
3
3
  // Regenerate with `pnpm generate:docs-manifest`; the lint chain runs
4
4
  // `pnpm test` and fails when this file is stale.
5
5
  export const docsManifest = {
@@ -84,6 +84,7 @@ export const docsManifest = {
84
84
  "Reach for `Collapsible` instead when there is a single expandable region - `Accordion` is for a set of grouped items keyed by `value`.",
85
85
  "Children must be `AccordionItem`s (each with `AccordionTrigger`/`AccordionContent`); the item's `value` is what `value`/`defaultValue` match against.",
86
86
  ],
87
+ keywords: ["disclosure", "faq", "expander"],
87
88
  uses: ["icon"],
88
89
  usedBy: [],
89
90
  anatomy: {
@@ -150,6 +151,7 @@ export const docsManifest = {
150
151
  'Compose `AlertTitle` / `AlertDescription` as children and render a direct-child `<svg>` for the auto-detected icon column; `tone="danger"` recolours for errors.',
151
152
  'It renders `role="alert"`, so AT announces it on mount - keep it a notice, not a container for heavy interactive UI.',
152
153
  ],
154
+ keywords: ["callout", "notice", "banner", "message"],
153
155
  uses: ["grid"],
154
156
  usedBy: [],
155
157
  anatomy: {
@@ -286,6 +288,7 @@ export const docsManifest = {
286
288
  "Route every destructive confirmation here, never a plain `Dialog` - unlike `Dialog` it won't dismiss on outside-click / Esc, so the choice stays deliberate.",
287
289
  'Give the destructive `AlertDialogAction` `tone="danger"` and keep the safe escape as `AlertDialogCancel`.',
288
290
  ],
291
+ keywords: ["confirm", "confirmation", "modal"],
289
292
  uses: ["button", "flex"],
290
293
  usedBy: [],
291
294
  },
@@ -337,6 +340,7 @@ export const docsManifest = {
337
340
  'Use `variant="muted"` inside dense copy so the underline stays quiet; the default variant stands out from the surrounding text.',
338
341
  'Use `variant="plain"` where the link is already set apart by its position, such as a caption under a tile or a row in an index; keep an underline on links inside running text.',
339
342
  ],
343
+ keywords: [],
340
344
  uses: ["icon"],
341
345
  usedBy: ["mega-menu", "site-footer"],
342
346
  },
@@ -429,6 +433,7 @@ export const docsManifest = {
429
433
  "Use `prefix`/`suffix` for units and currency (`$`, `/10`), not sibling text nodes - they're layout-animated with the digits and folded into the one screen-reader announcement.",
430
434
  "Reach for the `duration`/`easing` tokens over a raw `transition` - token timing keeps it in step with the rest of the motion system; drop to `transition` only for bespoke springs.",
431
435
  ],
436
+ keywords: [],
432
437
  uses: ["visually-hidden"],
433
438
  usedBy: ["thinking-loader"],
434
439
  },
@@ -447,7 +452,7 @@ export const docsManifest = {
447
452
  name: "as",
448
453
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
449
454
  required: false,
450
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
455
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
451
456
  },
452
457
  {
453
458
  name: "ratio",
@@ -468,6 +473,7 @@ export const docsManifest = {
468
473
  "Give it exactly one child and let it fill - set the media to `size-full object-cover`; `AspectRatio` sizes to the available width and derives height from `ratio`.",
469
474
  "Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
470
475
  ],
476
+ keywords: [],
471
477
  uses: [],
472
478
  usedBy: [],
473
479
  anatomy: {
@@ -546,7 +552,7 @@ export const docsManifest = {
546
552
  type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
547
553
  required: false,
548
554
  defaultValue: "false",
549
- description: "Render a plain dot instead of a number. `true` tints it with the badge's\nown `tone`; a {@link Tone} value overrides that with the shared dot tint.",
555
+ description: "Render a plain dot instead of a number. `true` tints it with the badge's\nown `tone`; a `Tone` value overrides that with the shared dot tint.",
550
556
  },
551
557
  {
552
558
  name: "max",
@@ -748,6 +754,7 @@ export const docsManifest = {
748
754
  "Give `AvatarImage` a meaningful `alt`; the visual is decorative only when the fallback initials already convey the identity.",
749
755
  'Keep the default `radius="full"` for people; use a squared `radius` for brand/entity logos so they read as objects, not users.',
750
756
  ],
757
+ keywords: ["profile picture", "user", "initials"],
751
758
  uses: ["center", "dot", "flex", "visually-hidden"],
752
759
  usedBy: ["mobile-navigation"],
753
760
  },
@@ -944,6 +951,7 @@ export const docsManifest = {
944
951
  'A standalone count needs an `accessibleLabel` ("3 unread"); inside an icon-only trigger, mark the badge `aria-hidden` and fold the count into the trigger\'s `aria-label`.',
945
952
  "A badge overlapping a corner of another surface takes `ring` so a 2px `background`-coloured ring separates it from what's beneath; set it only where the badge truly overlaps, and the page surface should be `background`.",
946
953
  ],
954
+ keywords: ["chip", "status", "label"],
947
955
  uses: ["icon", "pill", "spinner", "visually-hidden"],
948
956
  usedBy: ["data-grid-column-filter", "product-card"],
949
957
  },
@@ -1025,6 +1033,7 @@ export const docsManifest = {
1025
1033
  "Requires `ReducedMotionProvider`; under reduced motion it renders nothing (a static ring would read louder than the sweep it replaces), so don't add your own fallback border.",
1026
1034
  'Use it as an attention / "try me" cue on an idle surface, not a loading state - content placeholders want `Skeleton`, and a periodic liveness flick wants `Shine`.',
1027
1035
  ],
1036
+ keywords: [],
1028
1037
  uses: ["fade-overlay"],
1029
1038
  usedBy: [],
1030
1039
  },
@@ -1033,7 +1042,7 @@ export const docsManifest = {
1033
1042
  module: "components/box",
1034
1043
  title: "Box",
1035
1044
  category: "layout",
1036
- description: "The escape hatch: a raw host element with a `className`, still checked for\ntokens-only classes. Box renders the chosen {@link LayoutElement} with no\nlayout opinions of its own (no margin, width, or padding, unlike Container),\nso it suits decorative wrappers that a styled primitive would visually break. Reach for it only when no styled primitive fits; the\n`className` you pass is governed by the same tokens-only scan as everything\nelse. RSC-safe.",
1045
+ description: "The escape hatch: a raw host element with a `className`, still checked for\ntokens-only classes. Box renders the chosen `LayoutElement` with no\nlayout opinions of its own (no margin, width, or padding, unlike Container),\nso it suits decorative wrappers that a styled primitive would visually break. Reach for it only when no styled primitive fits; the\n`className` you pass is governed by the same tokens-only scan as everything\nelse. RSC-safe.",
1037
1046
  exports: [
1038
1047
  {
1039
1048
  name: "Box",
@@ -1043,7 +1052,7 @@ export const docsManifest = {
1043
1052
  name: "as",
1044
1053
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
1045
1054
  required: false,
1046
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
1055
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
1047
1056
  },
1048
1057
  {
1049
1058
  name: "ref",
@@ -1065,6 +1074,7 @@ export const docsManifest = {
1065
1074
  "`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary.",
1066
1075
  "Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
1067
1076
  ],
1077
+ keywords: [],
1068
1078
  uses: [],
1069
1079
  usedBy: [
1070
1080
  "mega-menu",
@@ -1133,6 +1143,7 @@ export const docsManifest = {
1133
1143
  'Render router links via `<BreadcrumbLink render={<Link href="…" />}>` with a framework `<Link>` - the bare default is an `<a>`.',
1134
1144
  "Collapse overflow with `BreadcrumbEllipsis` hosting a menu of the hidden crumbs, rather than dropping items silently.",
1135
1145
  ],
1146
+ keywords: [],
1136
1147
  uses: ["center", "flex", "icon", "visually-hidden"],
1137
1148
  usedBy: [],
1138
1149
  anatomy: {
@@ -1355,6 +1366,7 @@ export const docsManifest = {
1355
1366
  "`loading` keeps the button focusable while it blocks presses, so focus stays put across a submit; a plain `disabled` button leaves the tab order.",
1356
1367
  'Reach for `emphasis="ghost"`/`"link"` in toolbars/headers - they carry `data-edge-comp` so containers can pull them flush to the edge.',
1357
1368
  ],
1369
+ keywords: [],
1358
1370
  uses: ["center", "dot", "icon", "spinner"],
1359
1371
  usedBy: [
1360
1372
  "alert-dialog",
@@ -1452,6 +1464,7 @@ export const docsManifest = {
1452
1464
  "Use `ButtonGroup` to visually join related `Button`s (plus `Input`/`Select`/`DropdownMenu`); for one/many *selection* state reach for `ToggleGroup`.",
1453
1465
  "The `segmented` variant owns the border/background/shadow and defaults `dividers` on, while `joined` (default) lets each child draw its own - don't mix the two.",
1454
1466
  ],
1467
+ keywords: [],
1455
1468
  uses: ["separator"],
1456
1469
  usedBy: ["quantity-control"],
1457
1470
  },
@@ -1478,6 +1491,7 @@ export const docsManifest = {
1478
1491
  "Restrict selectable dates with react-day-picker matchers (`disabled`/`hidden`/`startMonth`/`endMonth`), not by filtering after the user clicks.",
1479
1492
  "Use `Calendar` for an inline date grid; for a compact click-to-open date field, wrap it in a `Popover` behind a `Button`/`Input` trigger.",
1480
1493
  ],
1494
+ keywords: ["date picker", "datepicker", "date"],
1481
1495
  uses: ["button", "icon"],
1482
1496
  usedBy: [],
1483
1497
  },
@@ -1578,6 +1592,7 @@ export const docsManifest = {
1578
1592
  "Pass `shadow={false}` when stacking cards on a `muted`/shaded canvas - colour contrast separates them and per-card shadows read as noise.",
1579
1593
  "For a full-bleed media/CTA panel use an editorial composite (`EditorialCard`), not `Card` - `Card` is a neutral padded container, not a marketing surface.",
1580
1594
  ],
1595
+ keywords: [],
1581
1596
  uses: ["flex"],
1582
1597
  usedBy: ["attribute-card", "empty", "settings-card"],
1583
1598
  anatomy: {
@@ -1766,6 +1781,7 @@ export const docsManifest = {
1766
1781
  "Tune scroll behaviour via `opts` (Embla options like `loop`/`align`) and enable `wheelScroll`/`freeScroll` deliberately - free-scroll drops snap points, so pass `slideCount` if the dots miscount.",
1767
1782
  'Give a descriptive `aria-label` when the region isn\'t self-evidently "Carousel" (e.g. `"Product images"`).',
1768
1783
  ],
1784
+ keywords: ["slideshow", "gallery", "swiper"],
1769
1785
  uses: ["button", "flex"],
1770
1786
  usedBy: [],
1771
1787
  },
@@ -1784,7 +1800,7 @@ export const docsManifest = {
1784
1800
  name: "as",
1785
1801
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
1786
1802
  required: false,
1787
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
1803
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
1788
1804
  },
1789
1805
  {
1790
1806
  name: "inline",
@@ -1811,6 +1827,7 @@ export const docsManifest = {
1811
1827
  "`as`/`render` are mutually exclusive (`render` wins, dev-warned); use `inline` to center inline-level content without breaking the text flow.",
1812
1828
  "Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
1813
1829
  ],
1830
+ keywords: [],
1814
1831
  uses: [],
1815
1832
  usedBy: [
1816
1833
  "avatar",
@@ -1964,6 +1981,7 @@ export const docsManifest = {
1964
1981
  "Colour every series through `config` (`{ desktop: { label, color } }`) and reference `var(--color-<key>)` on the marks - never hardcode a hex on a `Bar` / `Line`; that keeps light/dark theming and the legend/tooltip swatches in sync.",
1965
1982
  "Reach for `Chart` only to render a recharts data visualization; for a static value + delta use `Stat`, and for a progress bar use `Progress`.",
1966
1983
  ],
1984
+ keywords: ["graph", "plot", "visualisation", "visualization"],
1967
1985
  uses: ["center", "flex", "grid"],
1968
1986
  usedBy: [],
1969
1987
  anatomy: {
@@ -2028,6 +2046,7 @@ export const docsManifest = {
2028
2046
  "Controlled use needs `checked` + `onCheckedChange` together; passing only `checked` freezes the box - use `defaultChecked` for uncontrolled.",
2029
2047
  "For a selectable card or a label+description row, reach for `CheckboxCardGroup`/`CheckboxField` instead of hand-laying-out around `Checkbox`.",
2030
2048
  ],
2049
+ keywords: [],
2031
2050
  uses: ["icon"],
2032
2051
  usedBy: ["checkbox-field", "data-grid", "document-list"],
2033
2052
  },
@@ -2202,6 +2221,7 @@ export const docsManifest = {
2202
2221
  "To control the set, give each card a `value`, drive `checkedValues` (a `string[]`) and toggle inside `onCheckedChange(value, checked)`; without `checkedValues` each card keeps its own `checked`/`defaultChecked`.",
2203
2222
  "Each card is one tab stop and toggles with Space; checkboxes don't rove, so Tab (not the arrow keys) moves between cards.",
2204
2223
  ],
2224
+ keywords: [],
2205
2225
  uses: ["center", "flex", "input-card"],
2206
2226
  usedBy: [],
2207
2227
  anatomy: {
@@ -2298,6 +2318,7 @@ export const docsManifest = {
2298
2318
  "Put helper text in `description` (linked via `aria-describedby`), not a separate sibling element the screen reader won't announce with the control.",
2299
2319
  '`size` accepts only `"xs"`/`"sm"`; for a full selectable card use `CheckboxCardGroup`, and render one `CheckboxField` per option for a set.',
2300
2320
  ],
2321
+ keywords: [],
2301
2322
  uses: ["checkbox", "grid", "label", "text"],
2302
2323
  usedBy: [],
2303
2324
  },
@@ -2331,6 +2352,7 @@ export const docsManifest = {
2331
2352
  "Use inline `Code` for identifiers/values in a sentence and `block` for multi-line snippets - `Kbd` is for keyboard keys, not code.",
2332
2353
  "`block` renders `<pre><code>` that scrolls horizontally; add `whitespace-pre-wrap` via `className` only when wrapping beats scrolling (long prose-like messages).",
2333
2354
  ],
2355
+ keywords: [],
2334
2356
  uses: [],
2335
2357
  usedBy: [],
2336
2358
  },
@@ -2373,6 +2395,7 @@ export const docsManifest = {
2373
2395
  "Compose `CollapsibleTrigger` + `CollapsibleContent` inside it - a bare child won't expand.",
2374
2396
  "Drive it uncontrolled with `defaultOpen`; only lift to `open`/`onOpenChange` when external state must sync (e.g. persisting the open panel).",
2375
2397
  ],
2398
+ keywords: ["disclosure", "show more", "expander"],
2376
2399
  uses: [],
2377
2400
  usedBy: [],
2378
2401
  anatomy: {
@@ -2444,6 +2467,7 @@ export const docsManifest = {
2444
2467
  "Values are HSL (`h` 0–360, `s`/`l` 0–100), not hex - convert at your storage boundary; a hex string won't position the handles.",
2445
2468
  "`onChange` fires on every pointer drag and arrow-key step - throttle persistence/network writes downstream rather than reacting to each intermediate value.",
2446
2469
  ],
2470
+ keywords: [],
2447
2471
  uses: [],
2448
2472
  usedBy: [],
2449
2473
  },
@@ -2544,6 +2568,7 @@ export const docsManifest = {
2544
2568
  "For lists in the hundreds+, pass `virtualization={{ enabled: true }}` so only visible rows mount instead of every option.",
2545
2569
  "Provide `items` as `{ label, value }[]` - the visible text comes from `label` while selection is tracked by `value`.",
2546
2570
  ],
2571
+ keywords: ["autocomplete", "typeahead", "searchable select"],
2547
2572
  uses: ["button", "flex", "icon"],
2548
2573
  usedBy: ["country-combobox"],
2549
2574
  },
@@ -2754,6 +2779,7 @@ export const docsManifest = {
2754
2779
  "Act on a choice with `CommandItem`'s `onClick`, which fires for a pointer click and for `Enter` on the highlighted item.",
2755
2780
  "A plain click-triggered action menu is `DropdownMenu`; a remembered selection is `Combobox`.",
2756
2781
  ],
2782
+ keywords: ["command palette", "spotlight", "cmd+k", "quick search"],
2757
2783
  uses: ["dialog", "flex", "icon"],
2758
2784
  usedBy: [],
2759
2785
  anatomy: {
@@ -2823,7 +2849,7 @@ export const docsManifest = {
2823
2849
  name: "as",
2824
2850
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
2825
2851
  required: false,
2826
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
2852
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
2827
2853
  },
2828
2854
  {
2829
2855
  name: "fluid",
@@ -2873,6 +2899,7 @@ export const docsManifest = {
2873
2899
  "`Container` constrains width and applies the page gutter; `Section` is the full-bleed vertical-rhythm band - nest a `Container` inside a `Section` when content must be both padded and centred.",
2874
2900
  "Fold a single band into one node with `space` (its `py`) instead of nesting a `Section`; pass `fluid` to drop the max-width.",
2875
2901
  ],
2902
+ keywords: [],
2876
2903
  uses: [],
2877
2904
  usedBy: [],
2878
2905
  },
@@ -2989,7 +3016,7 @@ export const docsManifest = {
2989
3016
  name: "dot",
2990
3017
  type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
2991
3018
  required: false,
2992
- description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a {@link Tone} to tint it.",
3019
+ description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a `Tone` to tint it.",
2993
3020
  },
2994
3021
  {
2995
3022
  name: "icon",
@@ -3171,6 +3198,7 @@ export const docsManifest = {
3171
3198
  "Use `ContextMenu` for a right-click / long-press menu on a surface; a menu opened by clicking a button or trigger is a `DropdownMenu`.",
3172
3199
  "Wrap the target region in `ContextMenuTrigger` so the whole surface is right-clickable; use `ContextMenuCheckboxItem` / `ContextMenuRadioGroup` for stateful rows.",
3173
3200
  ],
3201
+ keywords: [],
3174
3202
  uses: ["icon", "menu-item"],
3175
3203
  usedBy: [],
3176
3204
  anatomy: {
@@ -3319,6 +3347,7 @@ export const docsManifest = {
3319
3347
  'Feed `value` an ISO alpha-2 code (`"US"`) or a full country name (`"United States"`) - both resolve - but `onValueChange` always returns the code.',
3320
3348
  "Don't pass `items`; `CountryCombobox` supplies the full country list itself. For a non-country searchable list, use the base `Combobox`.",
3321
3349
  ],
3350
+ keywords: [],
3322
3351
  uses: ["combobox"],
3323
3352
  usedBy: [],
3324
3353
  },
@@ -3393,6 +3422,7 @@ export const docsManifest = {
3393
3422
  "It is controlled-only - pass `value` (ISO 3166-1 alpha-2) and an `onChange`; there is no uncontrolled/`defaultValue` mode.",
3394
3423
  'Give each option an alpha-2 `value` (e.g. `"US"`) so the overlaid flag resolves; a globe placeholder shows when the code is empty/unknown.',
3395
3424
  ],
3425
+ keywords: [],
3396
3426
  uses: ["center", "icon", "input-group"],
3397
3427
  usedBy: ["phone-input"],
3398
3428
  },
@@ -3450,6 +3480,7 @@ export const docsManifest = {
3450
3480
  "Use this for read-only key/value metadata about one entity; for tabular rows of many records reach for `Table` or `DataGrid` instead.",
3451
3481
  "Turn on `showSeparators` when items are visually dense; leave it off inside a bordered `Card` where the container already frames them.",
3452
3482
  ],
3483
+ keywords: [],
3453
3484
  uses: ["grid"],
3454
3485
  usedBy: [],
3455
3486
  },
@@ -3502,7 +3533,7 @@ export const docsManifest = {
3502
3533
  type: "DialogContentSize",
3503
3534
  required: false,
3504
3535
  defaultValue: '"default"',
3505
- description: "Panel geometry; see {@link DialogContentSize}.",
3536
+ description: "Panel geometry; see `DialogContentSize`.",
3506
3537
  },
3507
3538
  ],
3508
3539
  },
@@ -3578,6 +3609,7 @@ export const docsManifest = {
3578
3609
  "A panel that slides in from a screen edge is a `Sheet` (or `Drawer` for a drag-to-dismiss bottom sheet), not a `Dialog`.",
3579
3610
  "Always render a `DialogTitle` (wrap in `sr-only` if visually hidden) so the modal is announced; `DialogContent` uses the 36px `--radius-modal` corner.",
3580
3611
  ],
3612
+ keywords: ["modal", "popup", "lightbox"],
3581
3613
  uses: ["button", "flex"],
3582
3614
  usedBy: ["command", "quick-view"],
3583
3615
  anatomy: {
@@ -3674,6 +3706,7 @@ export const docsManifest = {
3674
3706
  "Prefer the semantic `tone` (`success`/`warning`/`danger`/…) over a raw `color` so the dot tracks theme tokens; reserve `color` for swatches outside the palette.",
3675
3707
  "The dot is decorative - pair it with visible text or an `aria-label`; colour alone doesn't convey status to assistive tech.",
3676
3708
  ],
3709
+ keywords: [],
3677
3710
  uses: [],
3678
3711
  usedBy: [
3679
3712
  "avatar",
@@ -3747,6 +3780,7 @@ export const docsManifest = {
3747
3780
  "Pick a glyph by intent from `DOT_MATRIX_LOADERS` - don't invent ad-hoc names. Map product actions → names in one place.",
3748
3781
  "Pass `settled` when the op finished but narration is still on screen, so the slot stays in character without spinning forever.",
3749
3782
  ],
3783
+ keywords: [],
3750
3784
  uses: [],
3751
3785
  usedBy: [],
3752
3786
  },
@@ -3856,6 +3890,7 @@ export const docsManifest = {
3856
3890
  "Always render a `DrawerTitle` inside `DrawerContent` (sr-only if visually hidden) - the underlying primitive uses it for `aria-labelledby`.",
3857
3891
  "Pass `container` to scope the drawer and its scrim to a bounded element instead of the viewport (the mobile-nav overlay pattern).",
3858
3892
  ],
3893
+ keywords: ["bottom sheet"],
3859
3894
  uses: ["flex"],
3860
3895
  usedBy: ["mobile-navigation"],
3861
3896
  },
@@ -3972,7 +4007,7 @@ export const docsManifest = {
3972
4007
  name: "dot",
3973
4008
  type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
3974
4009
  required: false,
3975
- description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a {@link Tone} to tint it.",
4010
+ description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a `Tone` to tint it.",
3976
4011
  },
3977
4012
  {
3978
4013
  name: "icon",
@@ -4155,6 +4190,7 @@ export const docsManifest = {
4155
4190
  "It's an actions / options menu, not a form control - to choose a value use `Select` (styled) or `Combobox` (searchable), not menu rows.",
4156
4191
  "Reach for `DropdownMenuCheckboxItem` / `DropdownMenuRadioItem` for stateful rows; `DropdownMenuContent` portals to the body.",
4157
4192
  ],
4193
+ keywords: [],
4158
4194
  uses: ["icon", "menu-item"],
4159
4195
  usedBy: [
4160
4196
  "data-grid-column-header",
@@ -4282,6 +4318,7 @@ export const docsManifest = {
4282
4318
  "Colour the curve with a `text-*` class (it strokes `currentColor`) and size it purely via `className` - the same primitive scales from a tiny preview to a full row.",
4283
4319
  "Always pass a meaningful `title` - it becomes the SVG `<title>`, the curve's only accessible name.",
4284
4320
  ],
4321
+ keywords: [],
4285
4322
  uses: [],
4286
4323
  usedBy: [],
4287
4324
  },
@@ -4386,6 +4423,7 @@ export const docsManifest = {
4386
4423
  'Use `Empty` for "no data / nothing here"; a failure the user can retry is an `ErrorState` (which composes `Empty`), so don\'t hand-roll a retry empty.',
4387
4424
  "Compose `EmptyHeader` › `EmptyMedia` + `EmptyTitle` + `EmptyDescription`, and put the call-to-action in `EmptyActions`.",
4388
4425
  ],
4426
+ keywords: [],
4389
4427
  uses: ["card", "flex", "heading", "icon", "icon-box", "stack", "text"],
4390
4428
  usedBy: ["empty-state", "error-state"],
4391
4429
  },
@@ -4440,6 +4478,7 @@ export const docsManifest = {
4440
4478
  "`ErrorBoundary` catches render crashes in a subtree - pair it with an `ErrorState` in `fallback` to show the failure; it renders nothing by default.",
4441
4479
  "It logs nothing itself - wire telemetry through `onError`, and offer recovery via the render-prop `fallback`'s `reset` callback.",
4442
4480
  ],
4481
+ keywords: [],
4443
4482
  uses: [],
4444
4483
  usedBy: [],
4445
4484
  },
@@ -4524,6 +4563,7 @@ export const docsManifest = {
4524
4563
  'Always pass an `aria-label` (e.g. "Expand row") - it\'s icon-only, so without one screen readers announce an unlabelled button.',
4525
4564
  "Drive the icon and `aria-expanded` with the `expanded` prop; set `expandedIcon`/`collapsedIcon` only to override the default Minus/Plus pair.",
4526
4565
  ],
4566
+ keywords: [],
4527
4567
  uses: [],
4528
4568
  usedBy: ["data-grid"],
4529
4569
  },
@@ -4565,6 +4605,7 @@ export const docsManifest = {
4565
4605
  "Set `collapsedHeight` in rem to a whole number of lines at the text's line height, so the cut lands between lines.",
4566
4606
  "Reach for `Collapsible` when the hidden part is separate content behind a labelled trigger rather than the rest of one passage.",
4567
4607
  ],
4608
+ keywords: [],
4568
4609
  uses: [],
4569
4610
  usedBy: [],
4570
4611
  },
@@ -4622,6 +4663,7 @@ export const docsManifest = {
4622
4663
  "It's the shared engine behind `BorderBeam` and `Shine` - prefer those named components for their specific looks; drop to `FadeOverlay` directly only for a new overlay effect.",
4623
4664
  "Needs `ReducedMotionProvider`; under reduced motion it renders only `children` (a static band would read louder than the animation), so the overlay doesn't appear.",
4624
4665
  ],
4666
+ keywords: [],
4625
4667
  uses: [],
4626
4668
  usedBy: ["border-beam", "shine"],
4627
4669
  },
@@ -4707,6 +4749,7 @@ export const docsManifest = {
4707
4749
  "Compose the documented parts (`FieldLabel`, `FieldContent`, `FieldError`, `FieldDescription`) around one control - the label's `htmlFor` and the control's `aria-describedby` are wired for you, so there are no ids to pass.",
4708
4750
  'Use `orientation="responsive"` for a label-beside-control that collapses to stacked on mobile, rather than duplicating the field per breakpoint.',
4709
4751
  ],
4752
+ keywords: [],
4710
4753
  uses: ["flex", "label"],
4711
4754
  usedBy: ["input", "input-group", "settings-card", "textarea"],
4712
4755
  anatomy: {
@@ -4761,7 +4804,7 @@ export const docsManifest = {
4761
4804
  name: "as",
4762
4805
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
4763
4806
  required: false,
4764
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
4807
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
4765
4808
  },
4766
4809
  {
4767
4810
  name: "direction",
@@ -4831,6 +4874,7 @@ export const docsManifest = {
4831
4874
  '`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).',
4832
4875
  "Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
4833
4876
  ],
4877
+ keywords: [],
4834
4878
  uses: [],
4835
4879
  usedBy: [
4836
4880
  "alert-dialog",
@@ -4969,6 +5013,7 @@ export const docsManifest = {
4969
5013
  "Drive variant switches by changing `src` - that triggers the built-in crossfade + shimmer; don't unmount/remount `GalleryImage` per variant or you lose the transition.",
4970
5014
  "Position `GalleryImage` inside a `relative` container with fixed dimensions - the surfaces are `absolute inset-0`, so an unsized parent collapses to zero height.",
4971
5015
  ],
5016
+ keywords: [],
4972
5017
  uses: [],
4973
5018
  usedBy: [],
4974
5019
  },
@@ -4993,7 +5038,7 @@ export const docsManifest = {
4993
5038
  name: "as",
4994
5039
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
4995
5040
  required: false,
4996
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
5041
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
4997
5042
  },
4998
5043
  {
4999
5044
  name: "columns",
@@ -5060,7 +5105,7 @@ export const docsManifest = {
5060
5105
  name: "as",
5061
5106
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
5062
5107
  required: false,
5063
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s (HTMLDivElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
5108
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s (HTMLDivElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
5064
5109
  },
5065
5110
  {
5066
5111
  name: "order",
@@ -5106,6 +5151,7 @@ export const docsManifest = {
5106
5151
  '`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).',
5107
5152
  "Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
5108
5153
  ],
5154
+ keywords: [],
5109
5155
  uses: [],
5110
5156
  usedBy: [
5111
5157
  "alert",
@@ -5147,7 +5193,7 @@ export const docsManifest = {
5147
5193
  name: "as",
5148
5194
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
5149
5195
  required: false,
5150
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
5196
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
5151
5197
  },
5152
5198
  {
5153
5199
  name: "gap",
@@ -5193,6 +5239,7 @@ export const docsManifest = {
5193
5239
  '`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).',
5194
5240
  "Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
5195
5241
  ],
5242
+ keywords: [],
5196
5243
  uses: [],
5197
5244
  usedBy: [],
5198
5245
  },
@@ -5243,6 +5290,7 @@ export const docsManifest = {
5243
5290
  "Set `level` (`h1`–`h6`) for the document outline and `size` for visual scale independently - don't pick a tag just to get a size; a small-looking heading can still be an `h2`.",
5244
5291
  "Keep one `h1` per page and don't skip levels for styling; use `size` (responsive-capable) to make a lower-level heading look larger.",
5245
5292
  ],
5293
+ keywords: ["title", "headline"],
5246
5294
  uses: [],
5247
5295
  usedBy: [
5248
5296
  "cookie-banner",
@@ -5355,6 +5403,7 @@ export const docsManifest = {
5355
5403
  "State is parent-controlled: pass `hovered`/`active` (plus `onMouseEnter`/`onClick`) - the dot grows and the ring pulses only in response; it tracks nothing itself.",
5356
5404
  "Always pass `label` - it's the button's `aria-label` and the hotspot's only accessible name; also mount `ReducedMotionProvider` so the pulse honours the OS motion setting.",
5357
5405
  ],
5406
+ keywords: [],
5358
5407
  uses: ["spinner"],
5359
5408
  usedBy: [],
5360
5409
  },
@@ -5392,6 +5441,7 @@ export const docsManifest = {
5392
5441
  "It opens on hover / focus only - never hide essential actions or content a touch / keyboard-only user can't otherwise reach behind it.",
5393
5442
  "Tune the trigger's `delay`/`closeDelay` (ms) instead of adding your own timers; `HoverCardContent` portals to the body.",
5394
5443
  ],
5444
+ keywords: [],
5395
5445
  uses: [],
5396
5446
  usedBy: [],
5397
5447
  },
@@ -5441,6 +5491,7 @@ export const docsManifest = {
5441
5491
  "`Icon` is always `aria-hidden` + non-focusable - pair it with visible text or give the interactive parent an `aria-label`; never rely on it to name a control.",
5442
5492
  'Size with the `size` token (`"sm"`,`"lg"`…), not `className="size-6"` - the scale maps to the shared `ComponentSize` steps other components align to.',
5443
5493
  ],
5494
+ keywords: [],
5444
5495
  uses: [],
5445
5496
  usedBy: [
5446
5497
  "accordion",
@@ -5559,6 +5610,7 @@ export const docsManifest = {
5559
5610
  "Set colour via `tone`, not a hex/`bg-*` className - `tone` carries the paired surface+foreground tokens, including the dark-mode variants.",
5560
5611
  "Let `iconSize` default from the box `size`; override only when the glyph must break the built-in `BOX_TO_ICON_SIZE` ratio.",
5561
5612
  ],
5613
+ keywords: [],
5562
5614
  uses: ["icon"],
5563
5615
  usedBy: ["empty", "item"],
5564
5616
  },
@@ -5609,6 +5661,7 @@ export const docsManifest = {
5609
5661
  "Pass a Lucide component to `icon` (e.g. `HomeIcon`), not a rendered element `<HomeIcon />` - it is handed to the internal `Icon` for consistent sizing/stroke.",
5610
5662
  "Use `IconCard` for compact icon-over-label option pickers (property type, category); for a content container with header/body reach for `Card`, and for a settings row use `SettingsCard`.",
5611
5663
  ],
5664
+ keywords: [],
5612
5665
  uses: ["center", "icon"],
5613
5666
  usedBy: [],
5614
5667
  },
@@ -5678,6 +5731,7 @@ export const docsManifest = {
5678
5731
  "Use it as the animated drop-in for `Icon`; for a plain static glyph stay on `Icon` and skip the extra `AnimatePresence`/motion cost.",
5679
5732
  "Needs `ReducedMotionProvider` for the blur-crossfade to run and honour reduced motion; like `Icon` it renders `aria-hidden`, so name the control elsewhere.",
5680
5733
  ],
5734
+ keywords: [],
5681
5735
  uses: ["icon"],
5682
5736
  usedBy: ["thinking-loader"],
5683
5737
  },
@@ -5752,6 +5806,7 @@ export const docsManifest = {
5752
5806
  "Position this over the exact identified bounds inside a relative container; inflate the bounds outside this component when the source geometry is smaller than a comfortable pointer target.",
5753
5807
  "Pair it with a real button or link. This component is deliberately pointer-transparent and carries no interaction semantics of its own.",
5754
5808
  ],
5809
+ keywords: [],
5755
5810
  uses: [],
5756
5811
  usedBy: [],
5757
5812
  },
@@ -5819,6 +5874,7 @@ export const docsManifest = {
5819
5874
  "Give every `Input` an associated label - inside a `Field` a `FieldLabel` targets it with no ids to wire; standalone, point a `Label`'s `htmlFor` at its `id`. A placeholder is not an accessible name.",
5820
5875
  '`size` defaults to `"xl"` (48px); pass a responsive object like `{ base: "sm", md: "xl" }` rather than swapping components per breakpoint.',
5821
5876
  ],
5877
+ keywords: ["text field", "textbox", "text input"],
5822
5878
  uses: ["field"],
5823
5879
  usedBy: ["sidebar", "tag-selector"],
5824
5880
  },
@@ -5915,6 +5971,7 @@ export const docsManifest = {
5915
5971
  "Drive the selected look via the `selected` prop (it sets `data-selected` + the primary tint), not by appending your own active classes.",
5916
5972
  "Use `render` to project the card styling onto a real interactive element (e.g. a `<label>` wrapping an input) when you need native selection behaviour.",
5917
5973
  ],
5974
+ keywords: [],
5918
5975
  uses: ["icon"],
5919
5976
  usedBy: ["checkbox-card", "radio-card"],
5920
5977
  },
@@ -6199,6 +6256,7 @@ export const docsManifest = {
6199
6256
  "Set `size`/`radius`/`disabled` once on `InputGroup`; children inherit them via context, so don't re-set them per child.",
6200
6257
  "Inside a `Field` the group inherits invalid state and its `InputGroupInput`/`InputGroupTextarea` becomes the field's control (labelled, described, `aria-invalid`) - pass `hasError` only to force error styling and `aria-invalid` independently.",
6201
6258
  ],
6259
+ keywords: [],
6202
6260
  uses: ["button", "field", "flex", "icon", "textarea"],
6203
6261
  usedBy: ["country-select", "search-input"],
6204
6262
  anatomy: {
@@ -6263,6 +6321,7 @@ export const docsManifest = {
6263
6321
  'Characters are filtered by `validationType` (`"numeric"` by default; `"alpha"`, `"alphanumeric"` and `"none"` are also available) - pass `"alphanumeric"` for codes that contain letters.',
6264
6322
  "Split slots into `InputOTPGroup`s with an `InputOTPSeparator` between them for visual grouping only - it does not change the underlying value.",
6265
6323
  ],
6324
+ keywords: [],
6266
6325
  uses: ["flex", "icon"],
6267
6326
  usedBy: [],
6268
6327
  },
@@ -6431,6 +6490,7 @@ export const docsManifest = {
6431
6490
  "Use `render` to make the whole item a link/button (e.g. `render={<Link href=\"…\" />}`); the item's children become the link's content.",
6432
6491
  "Reach for `Item` for generic single rows; for files/documents use `DocumentList`, and for term/value metadata use `DescriptionList`.",
6433
6492
  ],
6493
+ keywords: [],
6434
6494
  uses: ["flex", "icon-box", "separator", "stack"],
6435
6495
  usedBy: [],
6436
6496
  anatomy: {
@@ -6545,6 +6605,7 @@ export const docsManifest = {
6545
6605
  "Wrap multi-key chords in `KbdGroup` and set `size` on the group - children inherit it via context, so you size the combo once.",
6546
6606
  "It renders a semantic `<kbd>`; reserve it for keyboard keys/shortcuts, not as a generic small-label chip (that's `Badge`).",
6547
6607
  ],
6608
+ keywords: ["keyboard shortcut", "hotkey"],
6548
6609
  uses: [],
6549
6610
  usedBy: ["menu-item", "prompt-panel", "search-input", "sidebar"],
6550
6611
  },
@@ -6565,6 +6626,7 @@ export const docsManifest = {
6565
6626
  "Point `htmlFor` at the control's `id` so clicking the label focuses/toggles it; a `Label` with no association is just styled text.",
6566
6627
  "For checkbox/radio rows and fields, prefer `CheckboxField`/`FieldLabel`/`RadioGroupItem`, which generate the `id`/`htmlFor` pairing for you.",
6567
6628
  ],
6629
+ keywords: [],
6568
6630
  uses: [],
6569
6631
  usedBy: [
6570
6632
  "checkbox-field",
@@ -6689,6 +6751,7 @@ export const docsManifest = {
6689
6751
  "`search` may reject; the dropdown then shows no suggestions. Return `null` from `resolve` to ignore a selection.",
6690
6752
  'Pick `mode="city"` vs `"address"` to scope the geocoding; drive it controlled via the `Location` `value` + `onChange` (which also fires on clear).',
6691
6753
  ],
6754
+ keywords: [],
6692
6755
  uses: ["button", "icon", "menu-item"],
6693
6756
  usedBy: [],
6694
6757
  },
@@ -6732,6 +6795,7 @@ export const docsManifest = {
6732
6795
  'Don\'t add your own `aria-label`/`role` - `Logo` already ships `role="img"` + "Material Bank" (change the name with `label`); wrap it in a link only when you need a click target.',
6733
6796
  "To use your own brand, pass `mark` as SVG shapes in a 48x48 viewBox filled with `currentColor`, and a matching `label` - don't wrap or overlay the default mark.",
6734
6797
  ],
6798
+ keywords: [],
6735
6799
  uses: [],
6736
6800
  usedBy: ["logotype", "mobile-navigation"],
6737
6801
  },
@@ -6768,6 +6832,7 @@ export const docsManifest = {
6768
6832
  'Don\'t add your own `aria-label`/`role` - `Logotype` already ships `role="img"` + "Material Bank"; wrap it in a link only when you need a click target, and set `label=""` when the name is already visible beside it.',
6769
6833
  "Use `Logo` where only the mark fits, such as an app icon or a collapsed sidebar; use `Logotype` where the name should be read.",
6770
6834
  ],
6835
+ keywords: [],
6771
6836
  uses: ["logo"],
6772
6837
  usedBy: [],
6773
6838
  },
@@ -6819,6 +6884,7 @@ export const docsManifest = {
6819
6884
  "It only scrolls when the text overflows; short text that fits\nstays a static clipped label with no duplicate copy and no animation.",
6820
6885
  "Honours `prefers-reduced-motion` automatically via the shared\n`.animate-marquee` utility, which disables the animation.",
6821
6886
  ],
6887
+ keywords: [],
6822
6888
  uses: ["flex"],
6823
6889
  usedBy: ["product-card"],
6824
6890
  },
@@ -6837,7 +6903,7 @@ export const docsManifest = {
6837
6903
  name: "as",
6838
6904
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
6839
6905
  required: false,
6840
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
6906
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
6841
6907
  },
6842
6908
  {
6843
6909
  name: "edge",
@@ -6892,6 +6958,7 @@ export const docsManifest = {
6892
6958
  "Set `edge` to frame photography with an inset hairline that stays above the media; do not fake it with a border or an inset shadow on the frame, which the media hides.",
6893
6959
  "Reach for `raised` only when the frame sits on the same fill as its surface; in a dense row the edge already separates it.",
6894
6960
  ],
6961
+ keywords: [],
6895
6962
  uses: [],
6896
6963
  usedBy: ["editorial-card", "product-card"],
6897
6964
  },
@@ -7013,7 +7080,7 @@ export const docsManifest = {
7013
7080
  name: "dot",
7014
7081
  type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info" | undefined',
7015
7082
  required: false,
7016
- description: "Dot indicator at the start, centred in the icon space (takes precedence over icon): `true` for a neutral dot, or a {@link Tone} to tint it.",
7083
+ description: "Dot indicator at the start, centred in the icon space (takes precedence over icon): `true` for a neutral dot, or a `Tone` to tint it.",
7017
7084
  },
7018
7085
  {
7019
7086
  name: "icon",
@@ -7080,6 +7147,7 @@ export const docsManifest = {
7080
7147
  "`MenuItem` is the standalone base for custom menus (popovers, sheets); inside a `DropdownMenu` / `ContextMenu` use that family's `*Item` for built-in roving focus.",
7081
7148
  "Pass glyphs via the `icon` / `dot` / `avatar` / `kbd` / `suffixIcon` props, not as children - with `render` they render around `children`, which is the label only.",
7082
7149
  ],
7150
+ keywords: [],
7083
7151
  uses: ["center", "dot", "icon", "kbd", "radio", "spinner"],
7084
7152
  usedBy: [
7085
7153
  "context-menu",
@@ -7211,7 +7279,7 @@ export const docsManifest = {
7211
7279
  name: "dot",
7212
7280
  type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
7213
7281
  required: false,
7214
- description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a {@link Tone} to tint it.",
7282
+ description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a `Tone` to tint it.",
7215
7283
  },
7216
7284
  {
7217
7285
  name: "icon",
@@ -7404,6 +7472,7 @@ export const docsManifest = {
7404
7472
  "Reserve `Menubar` for a persistent desktop app menu bar; a single click menu is `DropdownMenu`, a right-click menu is `ContextMenu`.",
7405
7473
  "Give each top-level label its own `MenubarMenu`, and control a menu's open state on that `MenubarMenu` (`open`/`onOpenChange`) rather than on the bar.",
7406
7474
  ],
7475
+ keywords: [],
7407
7476
  uses: ["icon", "menu-item"],
7408
7477
  usedBy: [],
7409
7478
  anatomy: {
@@ -7579,6 +7648,7 @@ export const docsManifest = {
7579
7648
  'Enable the "I\'m not sure" escape hatch with `showUnsure` (off by default); `"unsure"`/`"beyond"` only ever arrive when their toggles are shown.',
7580
7649
  'Bound the range with `yearsAhead` (from the current year); it auto-advances and commits once both month and year are chosen, so don\'t add your own "next" control.',
7581
7650
  ],
7651
+ keywords: ["date picker", "date", "month", "year"],
7582
7652
  uses: ["flex", "grid", "text", "toggle"],
7583
7653
  usedBy: [],
7584
7654
  },
@@ -7717,6 +7787,7 @@ export const docsManifest = {
7717
7787
  "Pass the trigger's `borderRadius` / `boxShadow` via `style` (not `className`) on `MorphDialogTrigger` so Motion can correct their distortion during the morph.",
7718
7788
  "Render a `MorphDialogTitle` (use `visuallyHidden` if needed) for the accessible name; mount `ReducedMotionProvider` at the app root since it animates via `m.*`.",
7719
7789
  ],
7790
+ keywords: [],
7720
7791
  uses: [],
7721
7792
  usedBy: [],
7722
7793
  },
@@ -7744,6 +7815,7 @@ export const docsManifest = {
7744
7815
  "It's required app-side, not inside",
7745
7816
  'Rely on it (not per-component code) for reduced motion: its `MotionConfig reducedMotion="user"` honours the OS setting for all descendants.',
7746
7817
  ],
7818
+ keywords: [],
7747
7819
  uses: [],
7748
7820
  usedBy: [],
7749
7821
  },
@@ -7775,6 +7847,7 @@ export const docsManifest = {
7775
7847
  "Reach for `NativeSelect` when the native mobile picker and zero-JS behaviour matter; use `Select` when you need custom-rendered option content or styling.",
7776
7848
  "It has no built-in label - associate a `Label` via `htmlFor`/`id` for an accessible name.",
7777
7849
  ],
7850
+ keywords: ["dropdown", "picker"],
7778
7851
  uses: ["icon"],
7779
7852
  usedBy: [],
7780
7853
  },
@@ -7912,6 +7985,7 @@ export const docsManifest = {
7912
7985
  "Reserve `NavigationMenu` for site/section navigation with panels; a click actions menu is `DropdownMenu`, a desktop app menu bar is `Menubar`, and simple in-page routed tabs are `TabNavigation`.",
7913
7986
  "Keep it uncontrolled unless you must drive it; leave `viewport` on unless you render your own `NavigationMenuViewport` (e.g. to place a `NavigationMenuIndicator` in it).",
7914
7987
  ],
7988
+ keywords: [],
7915
7989
  uses: ["icon"],
7916
7990
  usedBy: [],
7917
7991
  anatomy: {
@@ -8035,6 +8109,7 @@ export const docsManifest = {
8035
8109
  "It is data-source agnostic (not coupled to react-table); for grid paging use the DataGrid's own pagination parts instead.",
8036
8110
  "Signal an in-flight jump with `loadingPage={n}` so only that button spins; leave a11y labels to the component (each control is pre-labelled).",
8037
8111
  ],
8112
+ keywords: [],
8038
8113
  uses: ["button", "center", "flex"],
8039
8114
  usedBy: [],
8040
8115
  },
@@ -8124,6 +8199,7 @@ export const docsManifest = {
8124
8199
  'Set `defaultCountry` (ISO alpha-2, default `"US"`) for the initial calling code; the integrated country selector then lets users switch.',
8125
8200
  "Validate the emitted E.164 value (e.g. via react-phone-number-input's `isValidPhoneNumber`) rather than regex-matching the display text.",
8126
8201
  ],
8202
+ keywords: [],
8127
8203
  uses: ["country-select"],
8128
8204
  usedBy: [],
8129
8205
  },
@@ -8242,6 +8318,7 @@ export const docsManifest = {
8242
8318
  "Don't reach for `Pill` in app code - it's the shared styling base; use `Badge` for display-only labels/counts and `Tag` for interactive (clickable/dismissible) chips.",
8243
8319
  "`Pill` is presentation-only and has no button semantics or dismiss/click handling - those live on `Tag`; adding `onClick` here yields a non-accessible pseudo-button.",
8244
8320
  ],
8321
+ keywords: ["chip"],
8245
8322
  uses: [],
8246
8323
  usedBy: ["badge", "tag", "tag-selector"],
8247
8324
  },
@@ -8295,6 +8372,7 @@ export const docsManifest = {
8295
8372
  bestPractices: [
8296
8373
  "Use for inline chat / agent waits. Prefer ThinkingLoader when you have narrated steps; ThinkingOrb for avatar-scale state; DotMatrixLoader for prompt-bar intent glyphs.",
8297
8374
  ],
8375
+ keywords: [],
8298
8376
  uses: ["grid", "text"],
8299
8377
  usedBy: [],
8300
8378
  },
@@ -8374,6 +8452,7 @@ export const docsManifest = {
8374
8452
  "It's non-modal by default (`modal={false}`) so the page stays interactive - pass `modal` only when you must trap focus and block the background.",
8375
8453
  "`PopoverContent` portals to the body; anchor to a non-trigger element with its `anchor` prop.",
8376
8454
  ],
8455
+ keywords: ["popup", "flyout", "popout"],
8377
8456
  uses: [],
8378
8457
  usedBy: ["color-palette", "mega-menu", "product-card", "tag-selector"],
8379
8458
  anatomy: {
@@ -8479,6 +8558,7 @@ export const docsManifest = {
8479
8558
  "For a ring instead of a bar use `ProgressCircle` - it needs an explicit `label` for its native `<progress>` accessible name.",
8480
8559
  "Mount `ReducedMotionProvider` at the app root - the indeterminate bar slides via `m.*` (LazyMotion).",
8481
8560
  ],
8561
+ keywords: [],
8482
8562
  uses: ["center"],
8483
8563
  usedBy: ["file-upload"],
8484
8564
  },
@@ -8531,6 +8611,7 @@ export const docsManifest = {
8531
8611
  "Pass `onDotClick` only when steps are navigable - it turns each dot into a focusable button; `labels` surface as hover tooltips.",
8532
8612
  "Mount `ReducedMotionProvider` at the app root - the dots animate via `m.*` (LazyMotion).",
8533
8613
  ],
8614
+ keywords: [],
8534
8615
  uses: ["flex", "tooltip"],
8535
8616
  usedBy: [],
8536
8617
  },
@@ -8614,6 +8695,7 @@ export const docsManifest = {
8614
8695
  "It's controlled - pass the current `value` and update it in `onIncrement`/`onDecrement`, which fire once per step for clicks, arrow keys and each repeat of a held button. Typing a number is not supported.",
8615
8696
  "Tab focuses the quantity itself (the stepper buttons are skipped, as in any number field), announced by its `label`. In a list of lines, pass a `label` naming the item so each field is told apart.",
8616
8697
  ],
8698
+ keywords: ["counter", "number input", "increment", "spinbutton"],
8617
8699
  uses: ["button", "button-group"],
8618
8700
  usedBy: [],
8619
8701
  },
@@ -8653,6 +8735,7 @@ export const docsManifest = {
8653
8735
  "Give every `Radio` a unique `value` and pair it with a `Label` - or use `RadioGroupItem`, which bundles the radio and its wired label.",
8654
8736
  "For selectable-card options rather than plain dots, use `RadioCardGroup`.",
8655
8737
  ],
8738
+ keywords: [],
8656
8739
  uses: [],
8657
8740
  usedBy: ["menu-item", "radio-card", "radio-group"],
8658
8741
  },
@@ -8794,6 +8877,7 @@ export const docsManifest = {
8794
8877
  'Drive selection with `value`/`onValueChange` (controlled) or `defaultValue` (uncontrolled); use `layout="inline"` for a wrapping row instead of the stacked grid.',
8795
8878
  "Label the group (e.g. `aria-label` or a `Field` with a `FieldLabel`) - Tab lands on the selected card and the arrow keys move between cards.",
8796
8879
  ],
8880
+ keywords: [],
8797
8881
  uses: ["center", "flex", "input-card", "radio"],
8798
8882
  usedBy: ["product-specifications-selector"],
8799
8883
  },
@@ -8845,6 +8929,7 @@ export const docsManifest = {
8845
8929
  "Drive selection with `value` + `onValueChange` (controlled) or `defaultValue` (uncontrolled) - don't set both on the same group.",
8846
8930
  "Prefer `RadioGroupItem` (radio + wired `Label`) over hand-pairing `Radio` and `Label`; it auto-generates the `id`/`htmlFor` link.",
8847
8931
  ],
8932
+ keywords: [],
8848
8933
  uses: ["flex", "grid", "label", "radio", "text"],
8849
8934
  usedBy: [],
8850
8935
  },
@@ -8891,6 +8976,7 @@ export const docsManifest = {
8891
8976
  "Render several in a vertical list and give it an accessible grouping (e.g. `aria-live` region) so screen readers announce requirements flipping to met.",
8892
8977
  "Reach for `RequirementItem` for pass/fail checklist rows; for a generic list row use `Item`, and for form field errors use the field's own error message.",
8893
8978
  ],
8979
+ keywords: [],
8894
8980
  uses: ["flex", "icon"],
8895
8981
  usedBy: [],
8896
8982
  },
@@ -8957,6 +9043,7 @@ export const docsManifest = {
8957
9043
  "Compose `ResizablePanel` children separated by `ResizableHandle` - a handle between panels is what makes them draggable.",
8958
9044
  "Set the axis with `direction` (`horizontal`/`vertical`); it maps to the library's `orientation`, which is intentionally not exposed.",
8959
9045
  ],
9046
+ keywords: [],
8960
9047
  uses: ["center", "icon"],
8961
9048
  usedBy: [],
8962
9049
  anatomy: {
@@ -9027,6 +9114,7 @@ export const docsManifest = {
9027
9114
  "`Scrim` is a decorative gradient for text-over-image legibility, not a modal backdrop - dialog / sheet dimming is built into those components.",
9028
9115
  "Place it inside a `position: relative` ancestor; it renders `aria-hidden` and ignores pointer events, so it never blocks the content beneath.",
9029
9116
  ],
9117
+ keywords: [],
9030
9118
  uses: [],
9031
9119
  usedBy: [],
9032
9120
  },
@@ -9050,7 +9138,7 @@ export const docsManifest = {
9050
9138
  name: "as",
9051
9139
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
9052
9140
  required: false,
9053
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
9141
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
9054
9142
  },
9055
9143
  {
9056
9144
  name: "allowOverflow",
@@ -9095,6 +9183,7 @@ export const docsManifest = {
9095
9183
  "`ScrollArea` renders its own `ScrollBar`; reach for `ScrollBar` directly only when hand-composing a Base UI scroll area.",
9096
9184
  "Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
9097
9185
  ],
9186
+ keywords: [],
9098
9187
  uses: [],
9099
9188
  usedBy: [
9100
9189
  "data-grid",
@@ -9154,6 +9243,7 @@ export const docsManifest = {
9154
9243
  "Match `theme` to the container's actual background (`card`/`popover`/…) - the scrim fades to that colour, so a mismatch leaves a visible seam.",
9155
9244
  'Set `position` (`start`/`end`) and `orientation` to the edge with hidden content - `end`+`vertical` is the common "more below" bottom fade.',
9156
9245
  ],
9246
+ keywords: [],
9157
9247
  uses: [],
9158
9248
  usedBy: ["scroll-frame", "segmented-control", "tag-selector"],
9159
9249
  },
@@ -9268,6 +9358,7 @@ export const docsManifest = {
9268
9358
  'Match `fadeTheme` to the surface behind the frame (`card` inside a Card). Over an image or a blur, use `fadeMode="mask"` instead.',
9269
9359
  "For a horizontal strip used with a mouse, add `dragScroll` and `controls`; both stand aside on touch screens, and each control hides at the end it points to.",
9270
9360
  ],
9361
+ keywords: [],
9271
9362
  uses: ["button", "scroll-area", "scroll-fade"],
9272
9363
  usedBy: ["page-toolbar"],
9273
9364
  },
@@ -9371,6 +9462,7 @@ export const docsManifest = {
9371
9462
  "Pass cycling placeholder ideas via `suggestions` (which suppresses the static `placeholder`); `shortcutHint` shows only while empty and is swapped for the clear button once the field has a value.",
9372
9463
  'Pill (`radius="full"`) at the 48px `xl` default is the search signature - so leave both defaults alone in standard search/filter placements; pass `size` explicitly for compact embedded contexts (popovers, table headers).',
9373
9464
  ],
9465
+ keywords: [],
9374
9466
  uses: ["flex", "grid", "input-group", "kbd"],
9375
9467
  usedBy: [],
9376
9468
  },
@@ -9389,7 +9481,7 @@ export const docsManifest = {
9389
9481
  name: "as",
9390
9482
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
9391
9483
  required: false,
9392
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
9484
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
9393
9485
  },
9394
9486
  {
9395
9487
  name: "inset",
@@ -9427,6 +9519,7 @@ export const docsManifest = {
9427
9519
  "`Section` is full-width (padding only, no max-width) - nest a `Container` inside when content should also be centred; use `Container` alone when you just need the width cap.",
9428
9520
  "Tune vertical rhythm with `space` (its `py`, default `base`); `as`/`render` are mutually exclusive with `render` winning (dev-warned).",
9429
9521
  ],
9522
+ keywords: [],
9430
9523
  uses: [],
9431
9524
  usedBy: [],
9432
9525
  },
@@ -9435,7 +9528,7 @@ export const docsManifest = {
9435
9528
  module: "components/segmented-control",
9436
9529
  title: "SegmentedControl",
9437
9530
  category: "forms",
9438
- description: "A single-select, always-one-selected control that switches between a small\nset of visible options - a view or mode switcher rendered as a pill of\nsegments. Built on Base UI ToggleGroup (single-select) but kept permanently\nselected: re-clicking the active segment never clears it.\n\nCompose it from {@link SegmentedControlItem}s; shared `size` / `fullWidth` /\nactive state flow to them through context. Controlled via `value`, or\nuncontrolled via `defaultValue`. Items scroll horizontally with a trailing\nfade hint when they overflow.",
9531
+ description: "A single-select, always-one-selected control that switches between a small\nset of visible options - a view or mode switcher rendered as a pill of\nsegments. Built on Base UI ToggleGroup (single-select) but kept permanently\nselected: re-clicking the active segment never clears it.\n\nCompose it from `SegmentedControlItem`s; shared `size` / `fullWidth` /\nactive state flow to them through context. Controlled via `value`, or\nuncontrolled via `defaultValue`. Items scroll horizontally with a trailing\nfade hint when they overflow.",
9439
9532
  exports: [
9440
9533
  {
9441
9534
  name: "SegmentedControl",
@@ -9534,6 +9627,7 @@ export const docsManifest = {
9534
9627
  "Switching visible content panels is Tabs; navigating URLs is TabNavigation - SegmentedControl is an input that selects a value or mode.",
9535
9628
  "Icon-only items must carry an `aria-label`.",
9536
9629
  ],
9630
+ keywords: [],
9537
9631
  uses: ["dot", "flex", "icon", "scroll-area", "scroll-fade"],
9538
9632
  usedBy: ["color-palette"],
9539
9633
  anatomy: {
@@ -9720,6 +9814,7 @@ export const docsManifest = {
9720
9814
  "Drive it with `value` + `onValueChange` (controlled) or `defaultValue` (uncontrolled), and give it an accessible name via the trigger (`Field`/`Label`).",
9721
9815
  "Pass `items` (a value-to-label map or `{ value, label }[]`) so the trigger shows the selected label even before the popup has mounted.",
9722
9816
  ],
9817
+ keywords: ["dropdown", "picker"],
9723
9818
  uses: ["button", "center", "icon", "menu-item"],
9724
9819
  usedBy: ["data-grid-pagination"],
9725
9820
  anatomy: {
@@ -9797,6 +9892,7 @@ export const docsManifest = {
9797
9892
  "It is announced as a separator by default - pass `aria-hidden` when the rule is purely decorative.",
9798
9893
  'For an inline rule set `orientation="vertical"` and give it an explicit height (e.g. `className="h-6"`) - a vertical separator has no intrinsic length.',
9799
9894
  ],
9895
+ keywords: ["divider", "rule", "hr"],
9800
9896
  uses: [],
9801
9897
  usedBy: [
9802
9898
  "button-group",
@@ -9906,6 +10002,7 @@ export const docsManifest = {
9906
10002
  "Use `Sheet` for a simple edge panel holding a focused form / settings; a drag-to-dismiss bottom sheet is a `Drawer`, and nested panels are a `Sidepanel`.",
9907
10003
  "Set the entry edge via `SheetContent` `side`; always render a `SheetTitle` (wrap in `sr-only` if hidden) so the panel is announced.",
9908
10004
  ],
10005
+ keywords: ["drawer", "side sheet", "slide-over"],
9909
10006
  uses: ["button", "flex"],
9910
10007
  usedBy: ["sidebar"],
9911
10008
  anatomy: {
@@ -10038,6 +10135,7 @@ export const docsManifest = {
10038
10135
  '`variant="metallic"` is built for dark surfaces only - on a light background the chrome ramp loses contrast. Its own `duration` and `repeatDelay` defaults apply only when you pass neither.',
10039
10136
  "To sweep several lines in step, pass them one shared `progress` motion value (0-100) and drive it yourself; a Shimmer given `progress` never animates on its own.",
10040
10137
  ],
10138
+ keywords: [],
10041
10139
  uses: [],
10042
10140
  usedBy: ["thinking-loader"],
10043
10141
  },
@@ -10108,6 +10206,7 @@ export const docsManifest = {
10108
10206
  "Either pass `children` (Shine wraps them in a relative box) or render it bare inside an existing `position: relative` parent - otherwise the sweep has nothing to overlay.",
10109
10207
  "Needs `ReducedMotionProvider`; under reduced motion it renders nothing (a static band would look like a permanent artefact), so don't rely on it as persistent decoration.",
10110
10208
  ],
10209
+ keywords: [],
10111
10210
  uses: ["fade-overlay"],
10112
10211
  usedBy: [],
10113
10212
  },
@@ -10416,6 +10515,7 @@ export const docsManifest = {
10416
10515
  "Reach for `Sidepanel` when you need nested sub-panels or a non-modal panel (`modal={false}`) that leaves the page interactive; a single focused edge panel is a `Sheet`.",
10417
10516
  "Compose nested panels with `SidepanelNestedRoot`, and always render a `SidepanelTitle` for the accessible name.",
10418
10517
  ],
10518
+ keywords: [],
10419
10519
  uses: ["button", "flex", "stack"],
10420
10520
  usedBy: [],
10421
10521
  anatomy: {
@@ -10490,7 +10590,7 @@ export const docsManifest = {
10490
10590
  name: "as",
10491
10591
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
10492
10592
  required: false,
10493
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
10593
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
10494
10594
  },
10495
10595
  {
10496
10596
  name: "cols",
@@ -10545,6 +10645,7 @@ export const docsManifest = {
10545
10645
  '`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).',
10546
10646
  "Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
10547
10647
  ],
10648
+ keywords: [],
10548
10649
  uses: [],
10549
10650
  usedBy: [],
10550
10651
  },
@@ -10608,6 +10709,7 @@ export const docsManifest = {
10608
10709
  "Prefer `Skeleton` over a spinner for content areas - a layout-stable placeholder that mirrors the final shape avoids reflow when data lands.",
10609
10710
  'Size it with `className` (`h-*` / `w-*`); use `variant="light"` on white / `bg-background` surfaces where the default grey is too dark.',
10610
10711
  ],
10712
+ keywords: [],
10611
10713
  uses: ["stack"],
10612
10714
  usedBy: ["data-grid-pagination", "product-card", "sidebar"],
10613
10715
  },
@@ -10638,7 +10740,7 @@ export const docsManifest = {
10638
10740
  name: "onDraggingChange",
10639
10741
  type: "(dragging: boolean) => void",
10640
10742
  required: false,
10641
- description: "Told when a drag starts and ends.\n\nA consumer usually has something else that should behave differently\nunder the finger - a preview that should stop animating each step, a\nreadout that should stop settling - and the state is already tracked here\nfor {@link travelToValue}.",
10743
+ description: "Told when a drag starts and ends.\n\nA consumer usually has something else that should behave differently\nunder the finger - a preview that should stop animating each step, a\nreadout that should stop settling - and the state is already tracked here\nfor `travelToValue`.",
10642
10744
  },
10643
10745
  {
10644
10746
  name: "variant",
@@ -10688,6 +10790,7 @@ export const docsManifest = {
10688
10790
  'On `variant="channel"`, give the channel its colour with `trackBackground` and keep the thumb legible against it with `getThumbColor`; the app owns the colour maths, the slider only paints the result.',
10689
10791
  "Use `labelStart`/`labelEnd` for visible end captions and `getValueText` for what a screen reader hears; the captions are hidden from assistive technology.\n\nChannel affordances adapted from",
10690
10792
  ],
10793
+ keywords: [],
10691
10794
  uses: ["flex", "text"],
10692
10795
  usedBy: [],
10693
10796
  },
@@ -10744,6 +10847,7 @@ export const docsManifest = {
10744
10847
  'The mark paints with `currentColor`, so colour it with a text-colour class on the icon or a parent (`className="text-muted-foreground"`), not a brand fill.',
10745
10848
  'Size with the `size` token (`"sm"`, `"lg"`…), not `className="size-6"`; it shares the `Icon` scale so a mark lines up with the icons around it.',
10746
10849
  ],
10850
+ keywords: [],
10747
10851
  uses: ["icon"],
10748
10852
  usedBy: ["site-footer"],
10749
10853
  },
@@ -10787,6 +10891,7 @@ export const docsManifest = {
10787
10891
  bestPractices: [
10788
10892
  "Reach for `Space` only for a fixed one-off gap between siblings; consistent spacing across many children belongs on a `Stack`/`Flex`/`Group` `gap` instead.",
10789
10893
  ],
10894
+ keywords: [],
10790
10895
  uses: [],
10791
10896
  usedBy: [],
10792
10897
  },
@@ -10812,6 +10917,7 @@ export const docsManifest = {
10812
10917
  "Use `Spinner` for small inline / action loading (inside a `Button`, next to text); a blocking full region is `LoadingState`, a layout placeholder is `Skeleton`.",
10813
10918
  "A bare `Spinner` carries no accessible name - wrap it in a labelled live region (e.g. `LoadingState`) when it's the sole loading signal.",
10814
10919
  ],
10920
+ keywords: ["loader", "loading", "activity indicator"],
10815
10921
  uses: [],
10816
10922
  usedBy: [
10817
10923
  "badge",
@@ -10851,7 +10957,7 @@ export const docsManifest = {
10851
10957
  name: "as",
10852
10958
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
10853
10959
  required: false,
10854
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
10960
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
10855
10961
  },
10856
10962
  {
10857
10963
  name: "align",
@@ -10898,7 +11004,7 @@ export const docsManifest = {
10898
11004
  name: "as",
10899
11005
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
10900
11006
  required: false,
10901
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
11007
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
10902
11008
  },
10903
11009
  {
10904
11010
  name: "direction",
@@ -10969,7 +11075,7 @@ export const docsManifest = {
10969
11075
  name: "as",
10970
11076
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
10971
11077
  required: false,
10972
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
11078
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
10973
11079
  },
10974
11080
  {
10975
11081
  name: "align",
@@ -11007,6 +11113,7 @@ export const docsManifest = {
11007
11113
  '`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).',
11008
11114
  "Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
11009
11115
  ],
11116
+ keywords: [],
11010
11117
  uses: [],
11011
11118
  usedBy: [
11012
11119
  "empty",
@@ -11079,6 +11186,7 @@ export const docsManifest = {
11079
11186
  "Tune rhythm with `stagger` (gap between items) and `delay` (lead-in) on the parent, rather than hand-setting per-child transition delays.",
11080
11187
  "Needs `ReducedMotionProvider` in the tree so the orchestrated entrance both runs and honours the reduced-motion setting.",
11081
11188
  ],
11189
+ keywords: [],
11082
11190
  uses: [],
11083
11191
  usedBy: [],
11084
11192
  },
@@ -11189,6 +11297,7 @@ export const docsManifest = {
11189
11297
  "Give each step a `StepperItem` child in order - progress is derived from child index, so conditionally rendering steps shifts the fill.",
11190
11298
  "Control completion via `value`/`onValueChange` (or uncontrolled `defaultValue`); the fill reaches only the last *completed* step, not the current one.",
11191
11299
  ],
11300
+ keywords: ["wizard", "steps", "multi-step"],
11192
11301
  uses: ["icon"],
11193
11302
  usedBy: [],
11194
11303
  },
@@ -11283,6 +11392,7 @@ export const docsManifest = {
11283
11392
  bestPractices: [
11284
11393
  "Drive `tokens` from real stream deltas - don't fake a word clock in product code. Showcase demos may animate.",
11285
11394
  ],
11395
+ keywords: [],
11286
11396
  uses: ["flex", "grid", "text"],
11287
11397
  usedBy: [],
11288
11398
  },
@@ -11291,7 +11401,7 @@ export const docsManifest = {
11291
11401
  module: "components/sub-navigation",
11292
11402
  title: "SubNavigation",
11293
11403
  category: "navigation",
11294
- description: "Vertical secondary navigation for page subsections and settings-like layouts;\nthe `<nav>` landmark wrapping a {@link SubNavigationList} of links.",
11404
+ description: "Vertical secondary navigation for page subsections and settings-like layouts;\nthe `<nav>` landmark wrapping a `SubNavigationList` of links.",
11295
11405
  exports: [
11296
11406
  {
11297
11407
  name: "SubNavigation",
@@ -11359,6 +11469,7 @@ export const docsManifest = {
11359
11469
  "Reach for `SubNavigation` for a vertical in-page section/settings menu; horizontal router tabs are `TabNavigation`, the app-chrome shell is `Sidebar`.",
11360
11470
  "Fill it with a `SubNavigationList` of links - it already renders the `<nav>` landmark, so don't nest it inside another `<nav>`.",
11361
11471
  ],
11472
+ keywords: [],
11362
11473
  uses: ["flex", "menu-item"],
11363
11474
  usedBy: [],
11364
11475
  },
@@ -11403,6 +11514,7 @@ export const docsManifest = {
11403
11514
  "Wrap `SuccessTickRipple` in a `position: relative; overflow: hidden` parent - the ripple field is absolutely positioned and bleeds past an unbounded container.",
11404
11515
  "It's decorative (`aria-hidden`) unless you pass `aria-label`, which exposes it as an `img`; animations are CSS-only and already collapse under `prefers-reduced-motion`.",
11405
11516
  ],
11517
+ keywords: ["celebrate", "success", "confirmation"],
11406
11518
  uses: [],
11407
11519
  usedBy: [],
11408
11520
  },
@@ -11593,6 +11705,7 @@ export const docsManifest = {
11593
11705
  "Reach for `Swatch` for a selectable colour/gradient/material chip or tile; a tiny non-interactive status marker is `Dot`, and a display-only status/category label is `Badge`.",
11594
11706
  "For a gradient or image chip fill pass `light` - auto contrast detection (`isLightColor`) only reads solid colours, so overlaid icons/labels lose legibility without it.",
11595
11707
  ],
11708
+ keywords: [],
11596
11709
  uses: ["center", "flex", "icon"],
11597
11710
  usedBy: [
11598
11711
  "swatch-fan",
@@ -11663,6 +11776,7 @@ export const docsManifest = {
11663
11776
  "Choose `SwatchGroup` when you want radio semantics + keyboard a11y; reach for `SwatchSelector` only for a lighter controlled row without the RadioGroup roles.",
11664
11777
  "Set `icon` (e.g. `Check`) on the group to swap the selection ring for a glyph on the chosen swatch, rather than styling items individually.",
11665
11778
  ],
11779
+ keywords: [],
11666
11780
  uses: ["swatch"],
11667
11781
  usedBy: [],
11668
11782
  },
@@ -11671,7 +11785,7 @@ export const docsManifest = {
11671
11785
  module: "components/swatch-selector",
11672
11786
  title: "SwatchSelector",
11673
11787
  category: "color",
11674
- description: "Row of selectable color/image swatches with controlled single selection,\nbuilt on Base UI ToggleGroup: the row is one tab stop and the arrow keys move\nbetween swatches.\n\nShares the selected `value`, `onValueChange`, and `size` with its\n{@link SwatchSelectorItem} children through context.",
11788
+ description: "Row of selectable color/image swatches with controlled single selection,\nbuilt on Base UI ToggleGroup: the row is one tab stop and the arrow keys move\nbetween swatches.\n\nShares the selected `value`, `onValueChange`, and `size` with its\n`SwatchSelectorItem` children through context.",
11675
11789
  exports: [
11676
11790
  {
11677
11791
  name: "Swatch",
@@ -11800,6 +11914,7 @@ export const docsManifest = {
11800
11914
  "Pressing the selected swatch again keeps it selected and does not call `onValueChange`.",
11801
11915
  "Selection is controlled - pass `value` and update it from `onValueChange`; there is no internal fallback state to fall back on.",
11802
11916
  ],
11917
+ keywords: [],
11803
11918
  uses: ["swatch", "tooltip"],
11804
11919
  usedBy: ["product-card"],
11805
11920
  },
@@ -11829,6 +11944,7 @@ export const docsManifest = {
11829
11944
  "Controlled use needs `checked` + `onCheckedChange`; with only `checked` the switch won't move - use `defaultChecked` for uncontrolled.",
11830
11945
  "`Switch` has no built-in label - associate a `Label` via `htmlFor`/`id` so the toggle has an accessible name.",
11831
11946
  ],
11947
+ keywords: ["toggle", "on off"],
11832
11948
  uses: [],
11833
11949
  usedBy: [],
11834
11950
  },
@@ -11933,6 +12049,7 @@ export const docsManifest = {
11933
12049
  "Use `TabNavigation` when each tab is a route/URL (it renders a `<nav>` of links); for in-page panels that swap without navigating, use `Tabs`.",
11934
12050
  'It shares the Tabs look via context but defaults to `variant="line"`; mark the active link yourself (e.g. router `aria-current`) - there\'s no Base UI value tracking here.',
11935
12051
  ],
12052
+ keywords: [],
11936
12053
  uses: ["flex", "icon", "tabs"],
11937
12054
  usedBy: [],
11938
12055
  anatomy: {
@@ -12008,6 +12125,7 @@ export const docsManifest = {
12008
12125
  "Include a `TableCaption` describing the table's contents - it is the accessible name screen readers announce for the `<table>`.",
12009
12126
  "Compose real `TableHeader`/`TableBody`/`TableRow`/`TableHead`/`TableCell` parts (semantic `thead`/`tbody`/`th`/`td`); don't fake rows with styled divs or you lose the table semantics.",
12010
12127
  ],
12128
+ keywords: [],
12011
12129
  uses: [],
12012
12130
  usedBy: [],
12013
12131
  },
@@ -12175,6 +12293,7 @@ export const docsManifest = {
12175
12293
  "Reach for `Tabs` to swap in-page panels via `TabsContent`; when each tab is a route, use `TabNavigation` instead (renders links, no panels).",
12176
12294
  "Compose `TabsList`/`TabsTrigger`/`TabsContent` - shared `variant`/`size`/`fullWidth` flow through context, so set them on `Tabs`, not each trigger.",
12177
12295
  ],
12296
+ keywords: [],
12178
12297
  uses: ["dot", "flex", "icon", "scroll-area"],
12179
12298
  usedBy: ["tab-navigation"],
12180
12299
  anatomy: {
@@ -12241,7 +12360,7 @@ export const docsManifest = {
12241
12360
  name: "dot",
12242
12361
  type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
12243
12362
  required: false,
12244
- description: "Leading status dot: `true` for a neutral dot, or a {@link Tone} to tint it.",
12363
+ description: "Leading status dot: `true` for a neutral dot, or a `Tone` to tint it.",
12245
12364
  },
12246
12365
  {
12247
12366
  name: "hideDismiss",
@@ -12340,6 +12459,7 @@ export const docsManifest = {
12340
12459
  'Set at most one leading visual - `loading` > `imageUrl` > `dot` > `icon` (in that precedence); pass a Lucide component to `icon` (not `<Icon/>`), and `imageUrl` renders a circular `<img alt="">`, so keep it decorative.',
12341
12460
  "When `onDismiss` is set, Backspace/Delete also removes the tag while it's focused - don't bind your own conflicting key handler.",
12342
12461
  ],
12462
+ keywords: ["chip", "token"],
12343
12463
  uses: ["dot", "icon", "pill", "spinner"],
12344
12464
  usedBy: ["data-grid", "tag-selector"],
12345
12465
  },
@@ -12358,7 +12478,7 @@ export const docsManifest = {
12358
12478
  name: "as",
12359
12479
  type: '"dd" | "dt" | "figcaption" | "legend" | "li" | "p" | "span"',
12360
12480
  required: false,
12361
- description: 'Render as a different host element from the closed text vocabulary\n({@link TextElement}). The set is deliberately closed and text-only:\n`as="div"` and `as="label"` are type errors (use Box for decorative\nwrappers, Label for form labels). Ref and event-handler types remain the\ndefault element\'s (HTMLParagraphElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
12481
+ description: 'Render as a different host element from the closed text vocabulary\n(`TextElement`). The set is deliberately closed and text-only:\n`as="div"` and `as="label"` are type errors (use Box for decorative\nwrappers, Label for form labels). Ref and event-handler types remain the\ndefault element\'s (HTMLParagraphElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
12362
12482
  },
12363
12483
  {
12364
12484
  name: "size",
@@ -12401,6 +12521,7 @@ export const docsManifest = {
12401
12521
  '`as` is a closed text-only vocabulary - use `as="span"` for inline copy; `as="div"`/`as="label"` are type errors (use `Box` for wrappers, `Label` for form labels).',
12402
12522
  "`as` and `render` are mutually exclusive (`render` wins, dev-warned); Text ships without a line-length cap - add `max-w-prose` at the call site for long-form prose.",
12403
12523
  ],
12524
+ keywords: [],
12404
12525
  uses: [],
12405
12526
  usedBy: [
12406
12527
  "checkbox-field",
@@ -12451,6 +12572,7 @@ export const docsManifest = {
12451
12572
  "It auto-grows with content (`field-sizing-content`); set `rows` for a minimum height in lines rather than pinning height via CSS.",
12452
12573
  "Give it a label - inside a `Field` a `FieldLabel` targets it with no ids to wire; standalone, point a `Label`'s `htmlFor` at its `id`. A placeholder is not an accessible name.",
12453
12574
  ],
12575
+ keywords: ["multiline", "text area"],
12454
12576
  uses: ["field"],
12455
12577
  usedBy: ["input-group"],
12456
12578
  },
@@ -12503,7 +12625,7 @@ export const docsManifest = {
12503
12625
  name: "orb",
12504
12626
  type: "ThinkingLoaderOrb",
12505
12627
  required: false,
12506
- description: "Inline {@link ThinkingOrb } in the loader slot. Ignored when `loader` is\nprovided. Defaults to size `20` for text-adjacent rows.",
12628
+ description: "Inline `ThinkingOrb` in the loader slot. Ignored when `loader` is\nprovided. Defaults to size `20` for text-adjacent rows.",
12507
12629
  },
12508
12630
  {
12509
12631
  name: "morphIcons",
@@ -12644,6 +12766,7 @@ export const docsManifest = {
12644
12766
  "Drive `ThinkingLoader` with `currentStep` (controlled) to reflect real progress, or omit it to auto-cycle `steps` on `interval` for a labor-illusion loader.",
12645
12767
  'It already renders an `aria-live="polite"` region announcing each step - don\'t wrap it in another status role. Mount `ReducedMotionProvider` since it animates via `m.*`.',
12646
12768
  ],
12769
+ keywords: [],
12647
12770
  uses: [
12648
12771
  "animated-number",
12649
12772
  "flex",
@@ -12756,6 +12879,7 @@ export const docsManifest = {
12756
12879
  'Prefer `theme="auto"` so the orb follows `data-theme` / system preference; pin `dark` or `light` only when the surrounding surface is fixed.',
12757
12880
  "Pass a specific `aria-label` when the state text is not otherwise announced (e.g. next to a ThinkingLoader that already speaks).",
12758
12881
  ],
12882
+ keywords: [],
12759
12883
  uses: [],
12760
12884
  usedBy: ["thinking-loader"],
12761
12885
  },
@@ -12830,6 +12954,7 @@ export const docsManifest = {
12830
12954
  "Name the group with `aria-label` or `aria-labelledby`; screen readers announce it before the first slot.",
12831
12955
  'Use `TimeSlotPicker` for a fixed set of offered times; for any time the user types, use `Input type="time"`.',
12832
12956
  ],
12957
+ keywords: ["date", "appointment", "booking", "schedule"],
12833
12958
  uses: [],
12834
12959
  usedBy: [],
12835
12960
  },
@@ -12909,6 +13034,7 @@ export const docsManifest = {
12909
13034
  "Mount `<Toaster />` exactly once near the app root, then fire toasts with `toast()` from `@instruments/materia-ui/components/toast` - don't render a `Toaster` per view.",
12910
13035
  "Press F6 to move focus into the toasts; hovering or focusing the stack pauses dismissal and fans it open.",
12911
13036
  ],
13037
+ keywords: ["notification", "snackbar", "flash message"],
12912
13038
  uses: ["button", "flex", "icon"],
12913
13039
  usedBy: [],
12914
13040
  },
@@ -12975,6 +13101,7 @@ export const docsManifest = {
12975
13101
  "One independent on/off is a `Toggle`; a mutually-exclusive or multi-select set is `ToggleGroup` with `Toggle`s inside it; an instantly-applied setting is `Switch`.",
12976
13102
  "Pass `icon` with no children for a square icon-only toggle (auto-sized); with a label, order it via `iconPlacement`.",
12977
13103
  ],
13104
+ keywords: [],
12978
13105
  uses: ["icon"],
12979
13106
  usedBy: [
12980
13107
  "data-grid",
@@ -12988,7 +13115,7 @@ export const docsManifest = {
12988
13115
  module: "components/toggle-group",
12989
13116
  title: "ToggleGroup",
12990
13117
  category: "actions",
12991
- description: "A literal group of {@link Toggle}s: several two-state pressable buttons that\nshare one selection, laid out `joined` (a seamless segmented row),\n`separated`, or `wrap`ped. Built on Base UI ToggleGroup - by default one\nitem is pressed at a time (radio-like), `multiple` makes it checkbox-like;\n`value` is always an array. The `Toggle`s inside take\n`size` / `radius` / `variant` from the group through context.",
13118
+ description: "A literal group of `Toggle`s: several two-state pressable buttons that\nshare one selection, laid out `joined` (a seamless segmented row),\n`separated`, or `wrap`ped. Built on Base UI ToggleGroup - by default one\nitem is pressed at a time (radio-like), `multiple` makes it checkbox-like;\n`value` is always an array. The `Toggle`s inside take\n`size` / `radius` / `variant` from the group through context.",
12992
13119
  exports: [
12993
13120
  {
12994
13121
  name: "ToggleGroup",
@@ -13038,6 +13165,7 @@ export const docsManifest = {
13038
13165
  "Put plain `Toggle`s inside, each with a `value`, as Base UI does.",
13039
13166
  "Icon-only toggles need an `aria-label` (a dev warning fires otherwise).",
13040
13167
  ],
13168
+ keywords: [],
13041
13169
  uses: ["toggle"],
13042
13170
  usedBy: ["data-grid"],
13043
13171
  },
@@ -13087,6 +13215,7 @@ export const docsManifest = {
13087
13215
  "The trigger must be focusable (a button / link, or `render` onto one) or keyboard and AT users never see the tip.",
13088
13216
  "Share one `TooltipProvider` to tune `delay` / skip-delay for a group; `Tooltip` wraps its own provider, so you only need it for grouping.",
13089
13217
  ],
13218
+ keywords: ["hint", "title"],
13090
13219
  uses: [],
13091
13220
  usedBy: ["product-card", "progress-dots", "sidebar", "swatch-selector"],
13092
13221
  },
@@ -13110,7 +13239,7 @@ export const docsManifest = {
13110
13239
  name: "as",
13111
13240
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
13112
13241
  required: false,
13113
- description: "Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). A row inside a real list must be an `li`.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).",
13242
+ description: "Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). A row inside a real list must be an `li`.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).",
13114
13243
  },
13115
13244
  ],
13116
13245
  },
@@ -13127,7 +13256,7 @@ export const docsManifest = {
13127
13256
  name: "as",
13128
13257
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
13129
13258
  required: false,
13130
- description: "Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).",
13259
+ description: "Render as a different host element from the closed layout vocabulary\n(`LayoutElement`).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).",
13131
13260
  },
13132
13261
  {
13133
13262
  name: "slots",
@@ -13163,6 +13292,7 @@ export const docsManifest = {
13163
13292
  "Use `slots` only to align controls into a column across rows with different counts; otherwise let the children size the slot.",
13164
13293
  "Do not use `visible` to say a row matters more; a control drawn on every row at rest is furniture.",
13165
13294
  ],
13295
+ keywords: [],
13166
13296
  uses: [],
13167
13297
  usedBy: [],
13168
13298
  anatomy: {
@@ -13200,6 +13330,7 @@ export const docsManifest = {
13200
13330
  "Use for screen-reader-only text (e.g. a link's full context) - for icon-only `Button`s prefer the `aria-label` prop the component already requires.",
13201
13331
  "Never hide interactive or focusable content inside it - sighted keyboard users would tab into something they cannot see.",
13202
13332
  ],
13333
+ keywords: [],
13203
13334
  uses: [],
13204
13335
  usedBy: ["animated-number", "avatar", "badge", "breadcrumb"],
13205
13336
  },
@@ -13371,6 +13502,7 @@ export const docsManifest = {
13371
13502
  'Pass `label` per state (the parent decides the copy, e.g. "Voice input" vs "Stop dictation") so screen readers announce the current action; never hardcode it here.',
13372
13503
  "Feed `level` from a real RMS meter while `listening` - a dead-flat waveform reads as a crashed mic; the atom floors and undulates the bars, but only live level makes it look alive.",
13373
13504
  ],
13505
+ keywords: [],
13374
13506
  uses: ["button", "flex", "icon"],
13375
13507
  usedBy: [],
13376
13508
  },
@@ -13429,6 +13561,7 @@ export const docsManifest = {
13429
13561
  "Pass a Lucide component to `icon` (e.g. `RulerIcon`), not a rendered `<Icon/>` - it is handed to the internal `Icon` at a fixed `sm` size.",
13430
13562
  "This is a preset composition of `Card`; restyle via the surrounding layout rather than reaching inside - for a bespoke layout compose `Card`/`CardContent` directly.",
13431
13563
  ],
13564
+ keywords: [],
13432
13565
  uses: ["card", "flex", "icon"],
13433
13566
  usedBy: [],
13434
13567
  },
@@ -13592,6 +13725,7 @@ export const docsManifest = {
13592
13725
  "Chunk items with `chunkIntoRows` (using `calculateColumns`) before passing `rows`; provide a stable `getItemKey` (and `getRowKey` where rows reorder) so React reconciliation stays correct.",
13593
13726
  "Render one `CardGridSkeletonItem` per expected card while data loads, inside the same `CardGrid` - this keeps list semantics and column widths stable across the loading→loaded transition.",
13594
13727
  ],
13728
+ keywords: [],
13595
13729
  uses: ["product-card"],
13596
13730
  usedBy: [],
13597
13731
  },
@@ -13759,6 +13893,7 @@ export const docsManifest = {
13759
13893
  "Give every `image` card a `searchHex`, otherwise it can't be searched or selected - flat colours and gradients derive theirs automatically.",
13760
13894
  "Pass `renderLink` (e.g. wrapping `next/link`) for client-side nav - the built-in links are plain `<a>`; the callback must return a single anchor element.",
13761
13895
  ],
13896
+ keywords: [],
13762
13897
  uses: [
13763
13898
  "button",
13764
13899
  "center",
@@ -13846,6 +13981,7 @@ export const docsManifest = {
13846
13981
  "Only wire the actions you support: Reject and Cookie settings render only when `onReject` / `onSettings` are passed.",
13847
13982
  "It records nothing. Store the visitor's choice in the handlers and stop rendering the banner once they have made it.",
13848
13983
  ],
13984
+ keywords: [],
13849
13985
  uses: ["button", "flex", "heading", "text"],
13850
13986
  usedBy: [],
13851
13987
  },
@@ -14274,6 +14410,7 @@ export const docsManifest = {
14274
14410
  "Render the satellite parts (`DataGridTable`, `DataGridPagination`, `DataGridColumnHeader/Filter/Visibility`) inside `DataGrid` - they read the table + layout from its context and break outside it.",
14275
14411
  "Enable features through `tableLayout` (`columnsPinnable`, `columnsResizable`, `columnsVisibility`, …) rather than styling rows manually; set `initialColumnPinning` to pin on mount.",
14276
14412
  ],
14413
+ keywords: [],
14277
14414
  uses: [
14278
14415
  "button",
14279
14416
  "checkbox",
@@ -14368,6 +14505,7 @@ export const docsManifest = {
14368
14505
  "Use this for a discrete multi-select facet; it stores an array filter value, so pair it with a column filter fn that matches array membership.",
14369
14506
  "The typed search survives each pick, so several matches can be ticked from one query; it resets when the popup closes.",
14370
14507
  ],
14508
+ keywords: [],
14371
14509
  uses: ["badge", "button", "center", "flex", "icon", "separator"],
14372
14510
  usedBy: [],
14373
14511
  },
@@ -14430,6 +14568,7 @@ export const docsManifest = {
14430
14568
  "The pin/move/visibility controls only appear when the matching `tableLayout` flags (`columnsPinnable`/`columnsMovable`/`columnsVisibility`) are enabled on `DataGrid` - a missing menu item usually means the flag is off, not a bug.",
14431
14569
  "Pass a human `title` (and optional `icon`); it is the accessible label for the sort/menu trigger and the moved-column announcement.",
14432
14570
  ],
14571
+ keywords: [],
14433
14572
  uses: ["button", "data-grid", "dropdown-menu", "flex", "icon"],
14434
14573
  usedBy: [],
14435
14574
  },
@@ -14464,6 +14603,7 @@ export const docsManifest = {
14464
14603
  "Only accessor columns reporting `getCanHide()` appear; set `enableHiding: false` on a column def to keep it always-visible and out of this menu.",
14465
14604
  "Label each column via `columnDef.meta.headerTitle` - the menu falls back to the raw column `id` when it's missing.",
14466
14605
  ],
14606
+ keywords: [],
14467
14607
  uses: ["dropdown-menu"],
14468
14608
  usedBy: [],
14469
14609
  },
@@ -14564,6 +14704,7 @@ export const docsManifest = {
14564
14704
  "For server-side paging, drive the table with `manualPagination` + `pageCount` and a controlled `pagination` state; the range summary uses `recordCount`, so pass the true total, not the page length.",
14565
14705
  "Configure page-size choices via `sizes` (not by restyling the select), and localise the range text through the `info` template.",
14566
14706
  ],
14707
+ keywords: [],
14567
14708
  uses: ["button", "data-grid", "flex", "select", "skeleton"],
14568
14709
  usedBy: [],
14569
14710
  },
@@ -14809,6 +14950,7 @@ export const docsManifest = {
14809
14950
  "Rows are virtualised, so give each a stable `rowHeight` via `tableLayout` (expanded rows use `expandedRowHeight`) - variable, unmeasured heights make the window jump.",
14810
14951
  "Use `DataGridTable` for a data-driven grid; for a small static table with hand-authored `<TableRow>`s reach for `Table` instead - no virtualisation or TanStack instance needed.",
14811
14952
  ],
14953
+ keywords: [],
14812
14954
  uses: ["center", "data-grid", "flex", "spinner"],
14813
14955
  usedBy: [],
14814
14956
  },
@@ -14888,6 +15030,7 @@ export const docsManifest = {
14888
15030
  "Give it `onLocationClick` when the address can be changed, so the location becomes a button rather than inert text.",
14889
15031
  "Place it full width directly under the header; it switches to its compact layout from its own width, not the viewport's.",
14890
15032
  ],
15033
+ keywords: [],
14891
15034
  uses: ["button", "flex", "grid", "icon", "separator"],
14892
15035
  usedBy: [],
14893
15036
  },
@@ -15057,6 +15200,7 @@ export const docsManifest = {
15057
15200
  "Set `selectable` to reveal per-item checkboxes and drive selection via `value`/`onValueChange` (a `string[]`) - don't add your own checkboxes.",
15058
15201
  "Use this for files/documents with icon + metadata + actions; for a generic single-line row reach for `Item`/`ItemGroup`, and for tabular columns use `Table`.",
15059
15202
  ],
15203
+ keywords: [],
15060
15204
  uses: ["center", "checkbox", "flex", "icon"],
15061
15205
  usedBy: [],
15062
15206
  },
@@ -15291,6 +15435,7 @@ export const docsManifest = {
15291
15435
  "Pass `renderImage` (wrapping `next/image`) in Next.js - the default is a plain `<img>` and skips Next optimisation; give `media` images a meaningful `alt`.",
15292
15436
  "Set `href` to make the whole card a single link (it wraps in an `<a>`); don't nest additional links/buttons inside - use `EditorialCard` for promo tiles, plain `Card` for neutral content.",
15293
15437
  ],
15438
+ keywords: [],
15294
15439
  uses: ["center", "flex", "media-frame", "swatch-fan"],
15295
15440
  usedBy: [],
15296
15441
  },
@@ -15385,6 +15530,7 @@ export const docsManifest = {
15385
15530
  'Use `EmptyState` for "no data / nothing here"; a failure the user can retry is an `ErrorState` (which also composes `Empty`), so don\'t hand-roll a retry empty.',
15386
15531
  'Set `level` to keep the document outline gapless where you place it - a full-page empty near an `h2` wants `level="3"`, but a nested one may need `"4"`.',
15387
15532
  ],
15533
+ keywords: ["no results", "zero state", "blank slate"],
15388
15534
  uses: ["empty"],
15389
15535
  usedBy: [],
15390
15536
  },
@@ -15483,6 +15629,7 @@ export const docsManifest = {
15483
15629
  "`ErrorState` renders a failure UI (icon / title / message / retry) but does not catch errors - wrap the throwing subtree in an `ErrorBoundary` and render this in its `fallback`.",
15484
15630
  "Pass `retry` to show the retry button (omit it to hide); it's built on `Empty`, so `layout` / `minHeight` props pass straight through.",
15485
15631
  ],
15632
+ keywords: [],
15486
15633
  uses: ["button", "empty"],
15487
15634
  usedBy: [],
15488
15635
  },
@@ -15893,6 +16040,7 @@ export const docsManifest = {
15893
16040
  "Forward the hook's `handleDragEnter/Leave/Over/Drop` and drag state into `dragging` so the drag styling matches the real drop-target state.",
15894
16041
  "Keep `title`/`description` (accepted types, size limit) accurate - they are the zone's only affordance copy; override the whole body via `children` when needed.",
15895
16042
  ],
16043
+ keywords: ["dropzone", "attachment", "file input"],
15896
16044
  uses: ["button", "center", "icon", "progress", "stack", "text"],
15897
16045
  usedBy: [],
15898
16046
  },
@@ -16022,6 +16170,7 @@ export const docsManifest = {
16022
16170
  "Drive drag-and-drop drop-target styling with `open` (forces the open look without revealing the action); use `selected`+`showSelectedState` for selection, not manual classes.",
16023
16171
  "`FolderTile` is itself the button - pass `name`/`onClick` and button props directly; don't wrap it in another `<button>`/`<a>`.",
16024
16172
  ],
16173
+ keywords: [],
16025
16174
  uses: ["center", "flex", "swatch-fan"],
16026
16175
  usedBy: [],
16027
16176
  },
@@ -16065,6 +16214,7 @@ export const docsManifest = {
16065
16214
  "Reserve `LoadingState` for a whole region / page with nothing to show yet; for in-place loading over existing layout prefer `Skeleton`, and a small inline spinner is `Spinner`.",
16066
16215
  'Pass `label` to name the live region for AT; it already renders `aria-live="polite"` with a default "Loading" name, so don\'t add your own status role.',
16067
16216
  ],
16217
+ keywords: [],
16068
16218
  uses: ["center", "spinner", "text"],
16069
16219
  usedBy: [],
16070
16220
  },
@@ -16223,6 +16373,7 @@ export const docsManifest = {
16223
16373
  "Use it in a shell whose chrome is lifted (`Sidebar header`, the fixed `SidebarLayoutHeader`): the panel fills the window from the top, beneath the chrome, so the brand row, search and actions stay on top of it.",
16224
16374
  "Keep it to navigation. Every entry is a `MegaMenuLink`, which closes the menu as it navigates; actions belong in a `DropdownMenu`.",
16225
16375
  ],
16376
+ keywords: [],
16226
16377
  uses: ["anchor", "box", "grid", "heading", "popover", "stack"],
16227
16378
  usedBy: [],
16228
16379
  },
@@ -16278,7 +16429,7 @@ export const docsManifest = {
16278
16429
  name: "as",
16279
16430
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
16280
16431
  required: false,
16281
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16432
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16282
16433
  },
16283
16434
  {
16284
16435
  name: "direction",
@@ -16479,7 +16630,7 @@ export const docsManifest = {
16479
16630
  name: "as",
16480
16631
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
16481
16632
  required: false,
16482
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16633
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16483
16634
  },
16484
16635
  {
16485
16636
  name: "align",
@@ -16519,7 +16670,7 @@ export const docsManifest = {
16519
16670
  name: "as",
16520
16671
  type: '"dd" | "dt" | "figcaption" | "legend" | "li" | "p" | "span"',
16521
16672
  required: false,
16522
- description: 'Render as a different host element from the closed text vocabulary\n({@link TextElement}). The set is deliberately closed and text-only:\n`as="div"` and `as="label"` are type errors (use Box for decorative\nwrappers, Label for form labels). Ref and event-handler types remain the\ndefault element\'s (HTMLParagraphElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16673
+ description: 'Render as a different host element from the closed text vocabulary\n(`TextElement`). The set is deliberately closed and text-only:\n`as="div"` and `as="label"` are type errors (use Box for decorative\nwrappers, Label for form labels). Ref and event-handler types remain the\ndefault element\'s (HTMLParagraphElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16523
16674
  },
16524
16675
  {
16525
16676
  name: "size",
@@ -16621,7 +16772,7 @@ export const docsManifest = {
16621
16772
  name: "as",
16622
16773
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
16623
16774
  required: false,
16624
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16775
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16625
16776
  },
16626
16777
  {
16627
16778
  name: "align",
@@ -16674,7 +16825,7 @@ export const docsManifest = {
16674
16825
  name: "as",
16675
16826
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
16676
16827
  required: false,
16677
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16828
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16678
16829
  },
16679
16830
  {
16680
16831
  name: "align",
@@ -16727,7 +16878,7 @@ export const docsManifest = {
16727
16878
  name: "as",
16728
16879
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
16729
16880
  required: false,
16730
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16881
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16731
16882
  },
16732
16883
  {
16733
16884
  name: "align",
@@ -16921,7 +17072,7 @@ export const docsManifest = {
16921
17072
  name: "as",
16922
17073
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
16923
17074
  required: false,
16924
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
17075
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
16925
17076
  },
16926
17077
  {
16927
17078
  name: "align",
@@ -17118,7 +17269,7 @@ export const docsManifest = {
17118
17269
  name: "dot",
17119
17270
  type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
17120
17271
  required: false,
17121
- description: "Show a status dot in place of the leading icon. `true` uses the default\naffirmative tint; a {@link Tone} value tints it from the shared dot palette.",
17272
+ description: "Show a status dot in place of the leading icon. `true` uses the default\naffirmative tint; a `Tone` value tints it from the shared dot palette.",
17122
17273
  },
17123
17274
  {
17124
17275
  name: "icon",
@@ -17270,7 +17421,7 @@ export const docsManifest = {
17270
17421
  name: "as",
17271
17422
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
17272
17423
  required: false,
17273
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
17424
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
17274
17425
  },
17275
17426
  {
17276
17427
  name: "align",
@@ -17544,6 +17695,7 @@ export const docsManifest = {
17544
17695
  'It\'s `role="dialog"`+`aria-modal` and hidden from `lg` up, so pair it with a desktop nav rather than showing both at once.',
17545
17696
  'Override the default "Navigation menu" accessible name via `aria-label` when the drawer\'s purpose is more specific.',
17546
17697
  ],
17698
+ keywords: [],
17547
17699
  uses: [
17548
17700
  "avatar",
17549
17701
  "button",
@@ -17762,6 +17914,7 @@ export const docsManifest = {
17762
17914
  'Set `layout="stacked"` and wrap each row in `PageHeaderRow` for multi-row headers; the default `"single"` wraps only when a narrow viewport needs to protect the title or actions.',
17763
17915
  "`PageHeader` is the sub-header below the app `HeaderBar`, not the app chrome itself - use `SidebarProvider` with `SidebarInset` or `HeaderBar` for the top-level frame; its `sticky` offset assumes that header is present.",
17764
17916
  ],
17917
+ keywords: [],
17765
17918
  uses: ["flex", "heading", "text"],
17766
17919
  usedBy: [],
17767
17920
  },
@@ -17800,7 +17953,7 @@ export const docsManifest = {
17800
17953
  name: "as",
17801
17954
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
17802
17955
  required: false,
17803
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
17956
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
17804
17957
  },
17805
17958
  {
17806
17959
  name: "direction",
@@ -17873,7 +18026,7 @@ export const docsManifest = {
17873
18026
  name: "as",
17874
18027
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
17875
18028
  required: false,
17876
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
18029
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
17877
18030
  },
17878
18031
  {
17879
18032
  name: "direction",
@@ -17976,7 +18129,7 @@ export const docsManifest = {
17976
18129
  name: "as",
17977
18130
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
17978
18131
  required: false,
17979
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
18132
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
17980
18133
  },
17981
18134
  {
17982
18135
  name: "direction",
@@ -18095,7 +18248,7 @@ export const docsManifest = {
18095
18248
  name: "as",
18096
18249
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
18097
18250
  required: false,
18098
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
18251
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
18099
18252
  },
18100
18253
  {
18101
18254
  name: "direction",
@@ -18396,6 +18549,7 @@ export const docsManifest = {
18396
18549
  "Each facet appears once. A `SegmentedControl` when the facet splits the set and one part is viewed at a time (its counts sum to the total); `PageToolbarFilter` chips when several combine. Never both for the same facet.",
18397
18550
  "Keep the actions to `PageToolbarSort`, which names the current order, and a view toggle. Page actions such as export belong in the `PageHeader`.",
18398
18551
  ],
18552
+ keywords: [],
18399
18553
  uses: [
18400
18554
  "box",
18401
18555
  "button",
@@ -18453,7 +18607,7 @@ export const docsManifest = {
18453
18607
  name: "dragging",
18454
18608
  type: "boolean | undefined",
18455
18609
  required: false,
18456
- description: "Swatch mode: set while the host is dragging the tile. Hides Quick view, the\ncaption and the add control and keeps the elevated shell. Distinct from\n{@link dragAdapter}, which wires a drag handle around the image.",
18610
+ description: "Swatch mode: set while the host is dragging the tile. Hides Quick view, the\ncaption and the add control and keeps the elevated shell. Distinct from\n`dragAdapter`, which wires a drag handle around the image.",
18457
18611
  },
18458
18612
  {
18459
18613
  name: "onAdd",
@@ -18479,7 +18633,7 @@ export const docsManifest = {
18479
18633
  type: "ProductCardAvailability | undefined",
18480
18634
  required: false,
18481
18635
  defaultValue: '"available"',
18482
- description: "Whether the product can be acted on - see {@link ProductCardAvailability}.",
18636
+ description: "Whether the product can be acted on - see `ProductCardAvailability`.",
18483
18637
  },
18484
18638
  {
18485
18639
  name: "dragAdapter",
@@ -18540,13 +18694,13 @@ export const docsManifest = {
18540
18694
  name: "price",
18541
18695
  type: "ReactNode",
18542
18696
  required: false,
18543
- description: "Price, supplied by the application as already-formatted content. Replaces\n`costIndicator` on the meta line. The card does no currency or tax logic.\nShipping and delivery flags go through {@link action}, whose `label` is\nalso a ReactNode.",
18697
+ description: "Price, supplied by the application as already-formatted content. Replaces\n`costIndicator` on the meta line. The card does no currency or tax logic.\nShipping and delivery flags go through `action`, whose `label` is\nalso a ReactNode.",
18544
18698
  },
18545
18699
  {
18546
18700
  name: "primaryAction",
18547
18701
  type: "ProductCardPrimaryAction | undefined",
18548
18702
  required: false,
18549
- description: "What this card's one labelled control offers - see\n{@link ProductCardPrimaryAction}.\n\nOmit entirely for a card with no control at all, which is the correct\nrendering for a product that can do nothing rather than a disabled button.\nOmitting also preserves the pre-existing cart-only behaviour for callers\nthat pass `renderAddToCart` and nothing else.",
18703
+ description: "What this card's one labelled control offers - see\n`ProductCardPrimaryAction`.\n\nOmit entirely for a card with no control at all, which is the correct\nrendering for a product that can do nothing rather than a disabled button.\nOmitting also preserves the pre-existing cart-only behaviour for callers\nthat pass `renderAddToCart` and nothing else.",
18550
18704
  },
18551
18705
  {
18552
18706
  name: "processing",
@@ -18607,6 +18761,12 @@ export const docsManifest = {
18607
18761
  required: false,
18608
18762
  description: 'Prioritise loading images (sets loading="eager" and adds preload link)',
18609
18763
  },
18764
+ {
18765
+ name: "productBrandLines",
18766
+ type: "1 | 2 | undefined",
18767
+ required: false,
18768
+ description: "How many lines the brand may take before it clamps; see `ProductCardDisplayOptions.brandLines`.",
18769
+ },
18610
18770
  {
18611
18771
  name: "productNameLines",
18612
18772
  type: "1 | 2 | undefined",
@@ -18801,7 +18961,7 @@ export const docsManifest = {
18801
18961
  name: "primaryAction",
18802
18962
  type: "ProductCardPrimaryAction | undefined",
18803
18963
  required: false,
18804
- description: "What this card's one labelled control offers - see\n{@link ProductCardPrimaryAction}.\n\nOmit entirely for a card with no control at all, which is the correct\nrendering for a product that can do nothing rather than a disabled button.\nOmitting also preserves the pre-existing cart-only behaviour for callers\nthat pass `renderAddToCart` and nothing else.",
18964
+ description: "What this card's one labelled control offers - see\n`ProductCardPrimaryAction`.\n\nOmit entirely for a card with no control at all, which is the correct\nrendering for a product that can do nothing rather than a disabled button.\nOmitting also preserves the pre-existing cart-only behaviour for callers\nthat pass `renderAddToCart` and nothing else.",
18805
18965
  },
18806
18966
  {
18807
18967
  name: "showActivePointer",
@@ -18827,6 +18987,12 @@ export const docsManifest = {
18827
18987
  required: false,
18828
18988
  description: 'Prioritise loading images (sets loading="eager" and adds preload link)',
18829
18989
  },
18990
+ {
18991
+ name: "productBrandLines",
18992
+ type: "1 | 2 | undefined",
18993
+ required: false,
18994
+ description: "How many lines the brand may take before it clamps; see `ProductCardDisplayOptions.brandLines`.",
18995
+ },
18830
18996
  {
18831
18997
  name: "productNameLines",
18832
18998
  type: "1 | 2 | undefined",
@@ -19078,14 +19244,14 @@ export const docsManifest = {
19078
19244
  name: "dragging",
19079
19245
  type: "boolean | undefined",
19080
19246
  required: false,
19081
- description: "Swatch mode: set while the host is dragging the tile. Hides Quick view, the\ncaption and the add control and keeps the elevated shell. Distinct from\n{@link dragAdapter}, which wires a drag handle around the image.",
19247
+ description: "Swatch mode: set while the host is dragging the tile. Hides Quick view, the\ncaption and the add control and keeps the elevated shell. Distinct from\n`dragAdapter`, which wires a drag handle around the image.",
19082
19248
  },
19083
19249
  {
19084
19250
  name: "availability",
19085
19251
  type: "ProductCardAvailability | undefined",
19086
19252
  required: false,
19087
19253
  defaultValue: '"available"',
19088
- description: "Whether the product can be acted on - see {@link ProductCardAvailability}.",
19254
+ description: "Whether the product can be acted on - see `ProductCardAvailability`.",
19089
19255
  },
19090
19256
  {
19091
19257
  name: "labels",
@@ -19147,7 +19313,7 @@ export const docsManifest = {
19147
19313
  name: "price",
19148
19314
  type: "ReactNode",
19149
19315
  required: false,
19150
- description: "Price, supplied by the application as already-formatted content. Replaces\n`costIndicator` on the meta line. The card does no currency or tax logic.\nShipping and delivery flags go through {@link action}, whose `label` is\nalso a ReactNode.",
19316
+ description: "Price, supplied by the application as already-formatted content. Replaces\n`costIndicator` on the meta line. The card does no currency or tax logic.\nShipping and delivery flags go through `action`, whose `label` is\nalso a ReactNode.",
19151
19317
  },
19152
19318
  {
19153
19319
  name: "processing",
@@ -19177,7 +19343,7 @@ export const docsManifest = {
19177
19343
  name: "primaryAction",
19178
19344
  type: "ProductCardPrimaryAction | undefined",
19179
19345
  required: false,
19180
- description: "What this card's one labelled control offers - see\n{@link ProductCardPrimaryAction}.\n\nOmit entirely for a card with no control at all, which is the correct\nrendering for a product that can do nothing rather than a disabled button.\nOmitting also preserves the pre-existing cart-only behaviour for callers\nthat pass `renderAddToCart` and nothing else.",
19346
+ description: "What this card's one labelled control offers - see\n`ProductCardPrimaryAction`.\n\nOmit entirely for a card with no control at all, which is the correct\nrendering for a product that can do nothing rather than a disabled button.\nOmitting also preserves the pre-existing cart-only behaviour for callers\nthat pass `renderAddToCart` and nothing else.",
19181
19347
  },
19182
19348
  {
19183
19349
  name: "product",
@@ -19316,6 +19482,18 @@ export const docsManifest = {
19316
19482
  type: "CSSProperties",
19317
19483
  required: false,
19318
19484
  },
19485
+ {
19486
+ name: "showAddToCart",
19487
+ type: "boolean",
19488
+ required: false,
19489
+ description: "Draw the add-to-cart control. True by default; pass the same value as the\ncard's `showAddToCart` so a grid without a cart keeps its height when the\nproducts arrive.",
19490
+ },
19491
+ {
19492
+ name: "showSwatches",
19493
+ type: "boolean",
19494
+ required: false,
19495
+ description: "Draw the row of colourway dots. True by default; pass the card's `showSwatches`.",
19496
+ },
19319
19497
  ],
19320
19498
  },
19321
19499
  {
@@ -19396,7 +19574,7 @@ export const docsManifest = {
19396
19574
  name: "labels",
19397
19575
  type: 'Pick<ProductCardLabels, "add" | "closeSuggestions" | "suggest"> | undefined',
19398
19576
  required: false,
19399
- description: "Strings, overridable; see {@link ProductCardLabels}.",
19577
+ description: "Strings, overridable; see `ProductCardLabels`.",
19400
19578
  },
19401
19579
  {
19402
19580
  name: "menuOpen",
@@ -19482,6 +19660,7 @@ export const docsManifest = {
19482
19660
  "Pass `renderImage` wrapping `next/image` in Next.js apps -\nthe default renderer is a plain `<img>` and skips Next's optimisation.",
19483
19661
  "Keep `dragAdapter` referentially stable (a module-level\nconstant) - an inline factory remounts the image subtree and drops the\ndrag ref mid-drag.",
19484
19662
  ],
19663
+ keywords: [],
19485
19664
  uses: [
19486
19665
  "badge",
19487
19666
  "box",
@@ -19573,6 +19752,7 @@ export const docsManifest = {
19573
19752
  "It renders nothing when there are no `variantOptions` dimensions and no `siblings` with images - supply `siblings`/`siblingsWithAttributes` so single-colourway products still show a fallback thumbnail.",
19574
19753
  "Pass `renderImage` (wrapping `next/image`) in Next.js; the default is a plain `<img>`. The component ships bare - wrap it in a `Card` with your own heading when a panel is wanted.",
19575
19754
  ],
19755
+ keywords: [],
19576
19756
  uses: ["label", "radio-card", "stack", "variant-selector"],
19577
19757
  usedBy: [],
19578
19758
  },
@@ -19875,6 +20055,7 @@ export const docsManifest = {
19875
20055
  'Pass `title` (or an explicit `aria-label`) - the panel is a `role="dialog"` surface floating over other content, so it needs an accessible name of its own.',
19876
20056
  "Wrap step transitions in `PromptPanelStage`, not a hand-rolled page swap - it owns the page-slide choreography and the reduced-motion fallback.",
19877
20057
  ],
20058
+ keywords: [],
19878
20059
  uses: ["button", "flex", "grid", "icon", "kbd", "stack"],
19879
20060
  usedBy: [],
19880
20061
  anatomy: {
@@ -20305,6 +20486,7 @@ export const docsManifest = {
20305
20486
  "Offer a way to the full page in the header's `actions` - a quick view previews, it does not replace the detail page.",
20306
20487
  "A panel that docks beside the page (a cart) is a `Sidepanel`, not a quick view.",
20307
20488
  ],
20489
+ keywords: [],
20308
20490
  uses: ["box", "button", "dialog", "flex", "grid", "scroll-area", "stack"],
20309
20491
  usedBy: [],
20310
20492
  },
@@ -20323,7 +20505,7 @@ export const docsManifest = {
20323
20505
  name: "as",
20324
20506
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
20325
20507
  required: false,
20326
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
20508
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
20327
20509
  },
20328
20510
  {
20329
20511
  name: "actions",
@@ -20383,6 +20565,7 @@ export const docsManifest = {
20383
20565
  "Set `level` for the document outline and `size` for visual scale independently - a visually small header can still be an `h2`. Use `reserveEyebrowSpace` to keep an eyebrow-less header aligned beside sibling headers that have an eyebrow.",
20384
20566
  "Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
20385
20567
  ],
20568
+ keywords: [],
20386
20569
  uses: ["flex", "heading", "text"],
20387
20570
  usedBy: [],
20388
20571
  },
@@ -20539,6 +20722,7 @@ export const docsManifest = {
20539
20722
  "The footer only renders when `onSave` is passed, and the Save button is gated on `dirty` (and disabled while `loading`) - wire form dirty state through, or the button stays disabled.",
20540
20723
  "Give each card one cohesive group of settings with its own save; don't nest multiple `SettingsCard`s or share one across unrelated sections.",
20541
20724
  ],
20725
+ keywords: [],
20542
20726
  uses: ["button", "card", "field", "flex"],
20543
20727
  usedBy: [],
20544
20728
  anatomy: {
@@ -20576,7 +20760,7 @@ export const docsManifest = {
20576
20760
  module: "compositions/sidebar",
20577
20761
  title: "Sidebar",
20578
20762
  category: "navigation",
20579
- description: 'The sidebar shell. Reads open/collapsed state from {@link useSidebar}, so it\nmust render inside a {@link SidebarProvider}.\n\nAdapts by viewport and `collapsible`: an animated docked shell on desktop, a\nslide-in `Sheet` on mobile, or a static column when `collapsible="none"`.',
20763
+ description: 'The sidebar shell. Reads open/collapsed state from `useSidebar`, so it\nmust render inside a `SidebarProvider`.\n\nAdapts by viewport and `collapsible`: an animated docked shell on desktop, a\nslide-in `Sheet` on mobile, or a static column when `collapsible="none"`.',
20580
20764
  exports: [
20581
20765
  {
20582
20766
  name: "CONTENT_COLUMN_CLASS",
@@ -21224,7 +21408,7 @@ export const docsManifest = {
21224
21408
  name: "dot",
21225
21409
  type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
21226
21410
  required: false,
21227
- description: "Dot indicator in the left column (takes precedence over icon): `true` for a neutral dot, or a {@link Tone} to tint it.",
21411
+ description: "Dot indicator in the left column (takes precedence over icon): `true` for a neutral dot, or a `Tone` to tint it.",
21228
21412
  },
21229
21413
  {
21230
21414
  name: "icon",
@@ -21537,6 +21721,7 @@ export const docsManifest = {
21537
21721
  "Render `Sidebar` inside a `SidebarProvider` - it reads open/collapsed state from `useSidebar` and cannot work outside one.",
21538
21722
  "Choose `collapsible` deliberately: `offcanvas` slides fully away, `icon` shrinks to a rail, `none` is a static column that never adapts to the mobile `Sheet`.",
21539
21723
  ],
21724
+ keywords: [],
21540
21725
  uses: [
21541
21726
  "button",
21542
21727
  "center",
@@ -21650,7 +21835,7 @@ export const docsManifest = {
21650
21835
  name: "as",
21651
21836
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
21652
21837
  required: false,
21653
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
21838
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
21654
21839
  },
21655
21840
  {
21656
21841
  name: "direction",
@@ -21836,7 +22021,7 @@ export const docsManifest = {
21836
22021
  name: "as",
21837
22022
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
21838
22023
  required: false,
21839
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
22024
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
21840
22025
  },
21841
22026
  {
21842
22027
  name: "align",
@@ -21881,7 +22066,7 @@ export const docsManifest = {
21881
22066
  name: "as",
21882
22067
  type: '"dd" | "dt" | "figcaption" | "legend" | "li" | "p" | "span"',
21883
22068
  required: false,
21884
- description: 'Render as a different host element from the closed text vocabulary\n({@link TextElement}). The set is deliberately closed and text-only:\n`as="div"` and `as="label"` are type errors (use Box for decorative\nwrappers, Label for form labels). Ref and event-handler types remain the\ndefault element\'s (HTMLParagraphElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
22069
+ description: 'Render as a different host element from the closed text vocabulary\n(`TextElement`). The set is deliberately closed and text-only:\n`as="div"` and `as="label"` are type errors (use Box for decorative\nwrappers, Label for form labels). Ref and event-handler types remain the\ndefault element\'s (HTMLParagraphElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
21885
22070
  },
21886
22071
  {
21887
22072
  name: "size",
@@ -21947,7 +22132,7 @@ export const docsManifest = {
21947
22132
  name: "as",
21948
22133
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
21949
22134
  required: false,
21950
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
22135
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
21951
22136
  },
21952
22137
  {
21953
22138
  name: "ref",
@@ -21975,7 +22160,7 @@ export const docsManifest = {
21975
22160
  name: "as",
21976
22161
  type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
21977
22162
  required: false,
21978
- description: 'Render as a different host element from the closed layout vocabulary\n({@link LayoutElement}). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
22163
+ description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
21979
22164
  },
21980
22165
  {
21981
22166
  name: "ref",
@@ -22018,6 +22203,7 @@ export const docsManifest = {
22018
22203
  "Render it after the page's `<main>`, not inside it, so it stays the page's own footer landmark.",
22019
22204
  "Keep it to a lead, one nav and one bar. Four columns of a few links each is the shape it is set for.",
22020
22205
  ],
22206
+ keywords: [],
22021
22207
  uses: [
22022
22208
  "anchor",
22023
22209
  "box",
@@ -22035,7 +22221,7 @@ export const docsManifest = {
22035
22221
  module: "compositions/swatch-fan",
22036
22222
  title: "SwatchFan",
22037
22223
  category: "catalogue",
22038
- description: 'A fanned stack of {@link Swatch} tiles: a fixed three-card editorial fan or\nan interactive N-tile splay.\n\nPass 3 `items` with `interaction="breathe"` for the editorial fan (Figma\ngeometry, `variant` spread/stack, white 3px mount via `bordered`); pass N\n`items` with `interaction="hover-fan"` for the interactive splay-on-hover with\npointer tilt. `bordered={false}` swaps the white mount for the 1px hairline\ntile.',
22224
+ description: 'A fanned stack of `Swatch` tiles: a fixed three-card editorial fan or\nan interactive N-tile splay.\n\nPass 3 `items` with `interaction="breathe"` for the editorial fan (Figma\ngeometry, `variant` spread/stack, white 3px mount via `bordered`); pass N\n`items` with `interaction="hover-fan"` for the interactive splay-on-hover with\npointer tilt. `bordered={false}` swaps the white mount for the 1px hairline\ntile.',
22039
22225
  exports: [
22040
22226
  {
22041
22227
  name: "SwatchFan",
@@ -22225,6 +22411,7 @@ export const docsManifest = {
22225
22411
  "Needs `ReducedMotionProvider`; it already collapses the mount fan-out, hover nudge, and splay under reduced motion (snapping to the settled frame), so don't gate the interaction yourself.",
22226
22412
  "`bordered` is the mount-as-a-prop: `true` = white 3px card mount, `false` = 1px hairline - don't hand-roll either border in a wrapper.",
22227
22413
  ],
22414
+ keywords: [],
22228
22415
  uses: ["center", "flex", "swatch"],
22229
22416
  usedBy: ["editorial-card", "folder-tile"],
22230
22417
  },
@@ -22530,6 +22717,7 @@ export const docsManifest = {
22530
22717
  "A custom `trigger` render-prop is passed to `PopoverTrigger` as `render`, so return a single element that forwards its ref/props (e.g. a `Button`).",
22531
22718
  "Use `singleSelect` when only one tag may be chosen; for a fixed, non-editable list prefer `Combobox`/multi-`Select` and reserve `TagSelector` for managing the tag set itself.",
22532
22719
  ],
22720
+ keywords: [],
22533
22721
  uses: [
22534
22722
  "button",
22535
22723
  "dot",
@@ -22618,6 +22806,7 @@ export const docsManifest = {
22618
22806
  bestPractices: [
22619
22807
  "Pair above streaming answers in chat. Use ThinkingLoader when you only need a one-line narrated header without an expandable timeline.",
22620
22808
  ],
22809
+ keywords: [],
22621
22810
  uses: ["center", "flex", "grid", "icon", "text"],
22622
22811
  usedBy: [],
22623
22812
  },
@@ -22742,6 +22931,7 @@ export const docsManifest = {
22742
22931
  "`defaultValue` is uncontrolled: the selector tracks later picks itself. Pass `value` with `onValueChange` to control it.",
22743
22932
  "Use `VariantSelector` for image/colour swatch pickers; for a labelled icon-over-text option grid use `IconCard`, and for plain radio/checkbox lists use `RadioGroup`/`Checkbox`.",
22744
22933
  ],
22934
+ keywords: [],
22745
22935
  uses: ["flex", "swatch"],
22746
22936
  usedBy: ["product-specifications-selector"],
22747
22937
  },
@@ -22822,7 +23012,7 @@ export const docsManifest = {
22822
23012
  statement: "The six src layers form a strict one-directional dependency matrix (data ← tokens ← utils ← hooks ← components ← compositions); tokens additionally take no external packages.",
22823
23013
  gates: [
22824
23014
  {
22825
- path: "packages/ui/scripts/layer-matrix.mjs",
23015
+ path: "packages/ui/scripts/layer-matrix.ts",
22826
23016
  doctrine: "Each src layer may import only from the layers at or below it (data ← tokens ← utils ← hooks ← components ← compositions); tokens additionally stay free of external packages, except statement-level type-only imports which erase at build time.",
22827
23017
  },
22828
23018
  ],
@@ -22867,7 +23057,7 @@ export const docsManifest = {
22867
23057
  statement: "The full public export surface is captured as resolved-type hashes in api-report.md; any change to a public signature flips a hash and fails the gate until the report is regenerated and reviewed.",
22868
23058
  gates: [
22869
23059
  {
22870
- path: "packages/ui/scripts/generate-api-report.mjs",
23060
+ path: "packages/ui/scripts/generate-api-report.ts",
22871
23061
  doctrine: null,
22872
23062
  },
22873
23063
  ],