@usefragments/ui 1.5.3 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (497) hide show
  1. package/README.md +1 -1
  2. package/dist/assets/ui.css +8808 -5810
  3. package/dist/chart.cjs +7 -20
  4. package/dist/chart.js +7 -20
  5. package/dist/colorpicker.cjs +2 -1
  6. package/dist/colorpicker.js +2 -1
  7. package/dist/components/Accordion/Accordion.module.scss.cjs +8 -8
  8. package/dist/components/Accordion/Accordion.module.scss.js +8 -8
  9. package/dist/components/Alert/Alert.module.scss.cjs +12 -12
  10. package/dist/components/Alert/Alert.module.scss.js +12 -12
  11. package/dist/components/AppShell/AppShell.module.scss.cjs +14 -14
  12. package/dist/components/AppShell/AppShell.module.scss.js +14 -14
  13. package/dist/components/AppShell/index.cjs +5 -3
  14. package/dist/components/AppShell/index.d.ts +4 -2
  15. package/dist/components/AppShell/index.d.ts.map +1 -1
  16. package/dist/components/AppShell/index.js +5 -3
  17. package/dist/components/Avatar/Avatar.module.scss.cjs +17 -14
  18. package/dist/components/Avatar/Avatar.module.scss.js +17 -14
  19. package/dist/components/Avatar/index.cjs +100 -118
  20. package/dist/components/Avatar/index.d.ts +7 -5
  21. package/dist/components/Avatar/index.d.ts.map +1 -1
  22. package/dist/components/Avatar/index.js +100 -118
  23. package/dist/components/Badge/Badge.module.scss.cjs +19 -19
  24. package/dist/components/Badge/Badge.module.scss.js +19 -19
  25. package/dist/components/BentoGrid/BentoGrid.module.scss.cjs +14 -14
  26. package/dist/components/BentoGrid/BentoGrid.module.scss.js +14 -14
  27. package/dist/components/Box/Box.module.scss.cjs +152 -152
  28. package/dist/components/Box/Box.module.scss.js +152 -152
  29. package/dist/components/Breadcrumbs/Breadcrumbs.module.scss.cjs +8 -8
  30. package/dist/components/Breadcrumbs/Breadcrumbs.module.scss.js +8 -8
  31. package/dist/components/Button/Button.module.scss.cjs +14 -14
  32. package/dist/components/Button/Button.module.scss.js +14 -14
  33. package/dist/components/ButtonGroup/ButtonGroup.module.scss.cjs +15 -15
  34. package/dist/components/ButtonGroup/ButtonGroup.module.scss.js +15 -15
  35. package/dist/components/Card/Card.module.scss.cjs +18 -18
  36. package/dist/components/Card/Card.module.scss.js +18 -18
  37. package/dist/components/Chart/Chart.module.scss.cjs +15 -15
  38. package/dist/components/Chart/Chart.module.scss.js +15 -15
  39. package/dist/components/Chart/index.d.ts +7 -7
  40. package/dist/components/Chart/index.d.ts.map +1 -1
  41. package/dist/components/Checkbox/Checkbox.module.scss.cjs +9 -15
  42. package/dist/components/Checkbox/Checkbox.module.scss.js +9 -15
  43. package/dist/components/Checkbox/index.cjs +4 -6
  44. package/dist/components/Checkbox/index.d.ts.map +1 -1
  45. package/dist/components/Checkbox/index.js +4 -6
  46. package/dist/components/Chip/Chip.module.scss.cjs +15 -15
  47. package/dist/components/Chip/Chip.module.scss.js +15 -15
  48. package/dist/components/Chip/index.cjs +4 -5
  49. package/dist/components/Chip/index.d.ts +1 -1
  50. package/dist/components/Chip/index.d.ts.map +1 -1
  51. package/dist/components/Chip/index.js +2 -3
  52. package/dist/components/CodeBlock/CodeBlock.module.scss.cjs +22 -22
  53. package/dist/components/CodeBlock/CodeBlock.module.scss.js +22 -22
  54. package/dist/components/Collapsible/Collapsible.module.scss.cjs +9 -12
  55. package/dist/components/Collapsible/Collapsible.module.scss.js +9 -12
  56. package/dist/components/Collapsible/index.cjs +3 -2
  57. package/dist/components/Collapsible/index.d.ts +3 -3
  58. package/dist/components/Collapsible/index.d.ts.map +1 -1
  59. package/dist/components/Collapsible/index.js +3 -2
  60. package/dist/components/ColorPicker/ColorPicker.module.scss.cjs +16 -16
  61. package/dist/components/ColorPicker/ColorPicker.module.scss.js +16 -16
  62. package/dist/components/ColorPicker/index.d.ts.map +1 -1
  63. package/dist/components/Combobox/Combobox.module.scss.cjs +21 -27
  64. package/dist/components/Combobox/Combobox.module.scss.js +21 -27
  65. package/dist/components/Combobox/index.cjs +4 -4
  66. package/dist/components/Combobox/index.d.ts.map +1 -1
  67. package/dist/components/Combobox/index.js +4 -4
  68. package/dist/components/Command/Command.module.scss.cjs +11 -11
  69. package/dist/components/Command/Command.module.scss.js +11 -11
  70. package/dist/components/ConversationList/ConversationList.module.scss.cjs +11 -14
  71. package/dist/components/ConversationList/ConversationList.module.scss.js +11 -14
  72. package/dist/components/ConversationList/index.cjs +40 -44
  73. package/dist/components/ConversationList/index.d.ts +3 -3
  74. package/dist/components/ConversationList/index.d.ts.map +1 -1
  75. package/dist/components/ConversationList/index.js +40 -44
  76. package/dist/components/DataTable/DataTable.module.scss.cjs +32 -56
  77. package/dist/components/DataTable/DataTable.module.scss.js +32 -56
  78. package/dist/components/DataTable/index.d.ts +5 -4
  79. package/dist/components/DataTable/index.d.ts.map +1 -1
  80. package/dist/components/DatePicker/DatePicker.module.scss.cjs +33 -33
  81. package/dist/components/DatePicker/DatePicker.module.scss.js +33 -33
  82. package/dist/components/DatePicker/index.d.ts.map +1 -1
  83. package/dist/components/Dialog/Dialog.module.scss.cjs +14 -14
  84. package/dist/components/Dialog/Dialog.module.scss.js +14 -14
  85. package/dist/components/Drawer/Drawer.module.scss.cjs +31 -28
  86. package/dist/components/Drawer/Drawer.module.scss.js +31 -28
  87. package/dist/components/Drawer/index.cjs +1 -1
  88. package/dist/components/Drawer/index.js +1 -1
  89. package/dist/components/Editor/Editor.module.scss.cjs +23 -23
  90. package/dist/components/Editor/Editor.module.scss.js +23 -23
  91. package/dist/components/EmptyState/EmptyState.module.scss.cjs +12 -12
  92. package/dist/components/EmptyState/EmptyState.module.scss.js +12 -12
  93. package/dist/components/Field/Field.module.scss.cjs +8 -5
  94. package/dist/components/Field/Field.module.scss.js +8 -5
  95. package/dist/components/Field/index.cjs +10 -1
  96. package/dist/components/Field/index.d.ts +9 -2
  97. package/dist/components/Field/index.d.ts.map +1 -1
  98. package/dist/components/Field/index.js +10 -1
  99. package/dist/components/Fieldset/Fieldset.module.scss.cjs +3 -3
  100. package/dist/components/Fieldset/Fieldset.module.scss.js +3 -3
  101. package/dist/components/Form/Form.module.scss.cjs +5 -2
  102. package/dist/components/Form/Form.module.scss.js +5 -2
  103. package/dist/components/Form/index.cjs +6 -1
  104. package/dist/components/Form/index.d.ts +8 -3
  105. package/dist/components/Form/index.d.ts.map +1 -1
  106. package/dist/components/Form/index.js +6 -1
  107. package/dist/components/Grid/Grid.module.scss.cjs +54 -72
  108. package/dist/components/Grid/Grid.module.scss.js +54 -72
  109. package/dist/components/Grid/index.cjs +57 -77
  110. package/dist/components/Grid/index.d.ts +11 -11
  111. package/dist/components/Grid/index.d.ts.map +1 -1
  112. package/dist/components/Grid/index.js +57 -77
  113. package/dist/components/Header/Header.module.scss.cjs +33 -33
  114. package/dist/components/Header/Header.module.scss.js +33 -33
  115. package/dist/components/Header/index.cjs +2 -1
  116. package/dist/components/Header/index.d.ts.map +1 -1
  117. package/dist/components/Header/index.js +2 -1
  118. package/dist/components/Icon/Icon.module.scss.cjs +29 -8
  119. package/dist/components/Icon/Icon.module.scss.js +30 -9
  120. package/dist/components/Icon/index.cjs +30 -48
  121. package/dist/components/Icon/index.d.ts +6 -6
  122. package/dist/components/Icon/index.d.ts.map +1 -1
  123. package/dist/components/Icon/index.js +30 -48
  124. package/dist/components/IconButton/IconButton.module.scss.cjs +8 -8
  125. package/dist/components/IconButton/IconButton.module.scss.js +8 -8
  126. package/dist/components/Input/Input.module.scss.cjs +19 -25
  127. package/dist/components/Input/Input.module.scss.js +19 -25
  128. package/dist/components/Input/index.cjs +1 -2
  129. package/dist/components/Input/index.d.ts.map +1 -1
  130. package/dist/components/Input/index.js +1 -2
  131. package/dist/components/Link/Link.module.scss.cjs +10 -10
  132. package/dist/components/Link/Link.module.scss.js +10 -10
  133. package/dist/components/List/List.module.scss.cjs +19 -19
  134. package/dist/components/List/List.module.scss.js +19 -19
  135. package/dist/components/List/index.cjs +4 -7
  136. package/dist/components/List/index.d.ts.map +1 -1
  137. package/dist/components/List/index.js +4 -7
  138. package/dist/components/Listbox/Listbox.module.scss.cjs +9 -9
  139. package/dist/components/Listbox/Listbox.module.scss.js +9 -9
  140. package/dist/components/Loading/Loading.module.scss.cjs +30 -30
  141. package/dist/components/Loading/Loading.module.scss.js +30 -30
  142. package/dist/components/Loading/index.cjs +39 -67
  143. package/dist/components/Loading/index.d.ts +6 -6
  144. package/dist/components/Loading/index.d.ts.map +1 -1
  145. package/dist/components/Loading/index.js +39 -67
  146. package/dist/components/Main/Main.module.scss.cjs +7 -7
  147. package/dist/components/Main/Main.module.scss.js +7 -7
  148. package/dist/components/Markdown/Markdown.module.scss.cjs +1 -1
  149. package/dist/components/Markdown/Markdown.module.scss.js +1 -1
  150. package/dist/components/Menu/Menu.module.scss.cjs +16 -16
  151. package/dist/components/Menu/Menu.module.scss.js +16 -16
  152. package/dist/components/Menu/index.cjs +19 -61
  153. package/dist/components/Menu/index.d.ts +10 -10
  154. package/dist/components/Menu/index.d.ts.map +1 -1
  155. package/dist/components/Menu/index.js +19 -61
  156. package/dist/components/Message/Message.module.scss.cjs +18 -21
  157. package/dist/components/Message/Message.module.scss.js +18 -21
  158. package/dist/components/Message/index.cjs +15 -2
  159. package/dist/components/Message/index.d.ts.map +1 -1
  160. package/dist/components/Message/index.js +15 -2
  161. package/dist/components/NavigationMenu/NavigationMenu.module.scss.cjs +28 -28
  162. package/dist/components/NavigationMenu/NavigationMenu.module.scss.js +28 -28
  163. package/dist/components/Pagination/Pagination.module.scss.cjs +18 -9
  164. package/dist/components/Pagination/Pagination.module.scss.js +19 -10
  165. package/dist/components/Pagination/index.cjs +5 -2
  166. package/dist/components/Pagination/index.d.ts +3 -1
  167. package/dist/components/Pagination/index.d.ts.map +1 -1
  168. package/dist/components/Pagination/index.js +5 -2
  169. package/dist/components/Popover/Popover.module.scss.cjs +10 -10
  170. package/dist/components/Popover/Popover.module.scss.js +10 -10
  171. package/dist/components/Progress/Progress.module.scss.cjs +29 -32
  172. package/dist/components/Progress/Progress.module.scss.js +29 -32
  173. package/dist/components/Progress/geometry.cjs +30 -0
  174. package/dist/components/Progress/geometry.d.ts +8 -0
  175. package/dist/components/Progress/geometry.d.ts.map +1 -0
  176. package/dist/components/Progress/geometry.js +30 -0
  177. package/dist/components/Progress/index.cjs +40 -29
  178. package/dist/components/Progress/index.d.ts +4 -3
  179. package/dist/components/Progress/index.d.ts.map +1 -1
  180. package/dist/components/Progress/index.js +40 -29
  181. package/dist/components/Prompt/Prompt.module.scss.cjs +29 -29
  182. package/dist/components/Prompt/Prompt.module.scss.js +29 -29
  183. package/dist/components/Prompt/index.cjs +5 -4
  184. package/dist/components/Prompt/index.d.ts.map +1 -1
  185. package/dist/components/Prompt/index.js +5 -4
  186. package/dist/components/RadioGroup/RadioGroup.module.scss.cjs +15 -21
  187. package/dist/components/RadioGroup/RadioGroup.module.scss.js +15 -21
  188. package/dist/components/RadioGroup/index.cjs +7 -6
  189. package/dist/components/RadioGroup/index.d.ts.map +1 -1
  190. package/dist/components/RadioGroup/index.js +7 -6
  191. package/dist/components/ScrollArea/ScrollArea.module.scss.cjs +7 -22
  192. package/dist/components/ScrollArea/ScrollArea.module.scss.js +7 -22
  193. package/dist/components/ScrollArea/index.cjs +66 -42
  194. package/dist/components/ScrollArea/index.d.ts +3 -2
  195. package/dist/components/ScrollArea/index.d.ts.map +1 -1
  196. package/dist/components/ScrollArea/index.js +66 -42
  197. package/dist/components/ScrollArea/scroll-state.cjs +58 -0
  198. package/dist/components/ScrollArea/scroll-state.d.ts +16 -0
  199. package/dist/components/ScrollArea/scroll-state.d.ts.map +1 -0
  200. package/dist/components/ScrollArea/scroll-state.js +58 -0
  201. package/dist/components/Select/Select.module.scss.cjs +21 -21
  202. package/dist/components/Select/Select.module.scss.js +21 -21
  203. package/dist/components/Select/index.cjs +3 -2
  204. package/dist/components/Select/index.d.ts.map +1 -1
  205. package/dist/components/Select/index.js +3 -2
  206. package/dist/components/Separator/Separator.module.scss.cjs +13 -10
  207. package/dist/components/Separator/Separator.module.scss.js +13 -10
  208. package/dist/components/Separator/index.cjs +37 -38
  209. package/dist/components/Separator/index.d.ts +4 -4
  210. package/dist/components/Separator/index.d.ts.map +1 -1
  211. package/dist/components/Separator/index.js +37 -38
  212. package/dist/components/Sidebar/Sidebar.module.scss.cjs +43 -43
  213. package/dist/components/Sidebar/Sidebar.module.scss.js +43 -43
  214. package/dist/components/Sidebar/index.cjs +5 -3
  215. package/dist/components/Sidebar/index.d.ts +6 -1
  216. package/dist/components/Sidebar/index.d.ts.map +1 -1
  217. package/dist/components/Sidebar/index.js +5 -3
  218. package/dist/components/Skeleton/Skeleton.module.scss.cjs +50 -38
  219. package/dist/components/Skeleton/Skeleton.module.scss.js +50 -38
  220. package/dist/components/Skeleton/index.cjs +41 -55
  221. package/dist/components/Skeleton/index.d.ts +7 -7
  222. package/dist/components/Skeleton/index.d.ts.map +1 -1
  223. package/dist/components/Skeleton/index.js +41 -55
  224. package/dist/components/Slider/Slider.module.scss.cjs +12 -12
  225. package/dist/components/Slider/Slider.module.scss.js +12 -12
  226. package/dist/components/Stack/Stack.module.scss.cjs +25 -45
  227. package/dist/components/Stack/Stack.module.scss.js +25 -45
  228. package/dist/components/Stack/index.cjs +106 -101
  229. package/dist/components/Stack/index.d.ts +7 -7
  230. package/dist/components/Stack/index.d.ts.map +1 -1
  231. package/dist/components/Stack/index.js +106 -101
  232. package/dist/components/Switch/Switch.module.scss.cjs +32 -0
  233. package/dist/components/Switch/Switch.module.scss.js +32 -0
  234. package/dist/components/{Toggle → Switch}/index.cjs +9 -14
  235. package/dist/components/Switch/index.d.ts +37 -1
  236. package/dist/components/Switch/index.d.ts.map +1 -1
  237. package/dist/components/{Toggle → Switch}/index.js +5 -10
  238. package/dist/components/Table/Table.module.scss.cjs +18 -27
  239. package/dist/components/Table/Table.module.scss.js +18 -27
  240. package/dist/components/Table/index.d.ts +6 -5
  241. package/dist/components/Table/index.d.ts.map +1 -1
  242. package/dist/components/TableOfContents/TableOfContents.module.scss.cjs +15 -15
  243. package/dist/components/TableOfContents/TableOfContents.module.scss.js +15 -15
  244. package/dist/components/Tabs/Tabs.module.scss.cjs +12 -12
  245. package/dist/components/Tabs/Tabs.module.scss.js +12 -12
  246. package/dist/components/Tabs/index.cjs +2 -2
  247. package/dist/components/Tabs/index.js +2 -2
  248. package/dist/components/Text/Text.module.scss.cjs +93 -57
  249. package/dist/components/Text/Text.module.scss.js +93 -57
  250. package/dist/components/Text/index.cjs +14 -6
  251. package/dist/components/Text/index.d.ts +25 -15
  252. package/dist/components/Text/index.d.ts.map +1 -1
  253. package/dist/components/Text/index.js +14 -6
  254. package/dist/components/Textarea/Textarea.module.scss.cjs +26 -23
  255. package/dist/components/Textarea/Textarea.module.scss.js +26 -23
  256. package/dist/components/Textarea/index.cjs +5 -10
  257. package/dist/components/Textarea/index.d.ts.map +1 -1
  258. package/dist/components/Textarea/index.js +5 -10
  259. package/dist/components/Theme/context.cjs +39 -0
  260. package/dist/components/Theme/context.d.ts +21 -0
  261. package/dist/components/Theme/context.d.ts.map +1 -0
  262. package/dist/components/Theme/context.js +22 -0
  263. package/dist/components/Theme/index.cjs +14 -209
  264. package/dist/components/Theme/index.d.ts +4 -37
  265. package/dist/components/Theme/index.d.ts.map +1 -1
  266. package/dist/components/Theme/index.js +9 -204
  267. package/dist/components/{Theme → ThemeToggle}/ThemeToggle.module.scss.cjs +6 -6
  268. package/dist/components/ThemeToggle/ThemeToggle.module.scss.js +23 -0
  269. package/dist/components/ThemeToggle/index.cjs +115 -0
  270. package/dist/components/ThemeToggle/index.d.ts +21 -0
  271. package/dist/components/ThemeToggle/index.d.ts.map +1 -0
  272. package/dist/components/ThemeToggle/index.js +115 -0
  273. package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.cjs +13 -13
  274. package/dist/components/ThinkingIndicator/ThinkingIndicator.module.scss.js +13 -13
  275. package/dist/components/ThinkingIndicator/index.cjs +34 -41
  276. package/dist/components/ThinkingIndicator/index.d.ts +4 -4
  277. package/dist/components/ThinkingIndicator/index.d.ts.map +1 -1
  278. package/dist/components/ThinkingIndicator/index.js +34 -41
  279. package/dist/components/Toast/Toast.module.scss.cjs +20 -20
  280. package/dist/components/Toast/Toast.module.scss.js +20 -20
  281. package/dist/components/Toggle/index.d.ts +2 -42
  282. package/dist/components/Toggle/index.d.ts.map +1 -1
  283. package/dist/components/ToggleGroup/ToggleGroup.module.scss.cjs +20 -20
  284. package/dist/components/ToggleGroup/ToggleGroup.module.scss.js +20 -20
  285. package/dist/components/ToggleGroup/index.cjs +3 -2
  286. package/dist/components/ToggleGroup/index.d.ts +2 -1
  287. package/dist/components/ToggleGroup/index.d.ts.map +1 -1
  288. package/dist/components/ToggleGroup/index.js +3 -2
  289. package/dist/components/Tooltip/Tooltip.module.scss.cjs +3 -3
  290. package/dist/components/Tooltip/Tooltip.module.scss.js +3 -3
  291. package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.cjs +1 -1
  292. package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.js +1 -1
  293. package/dist/data-table.cjs +12 -9
  294. package/dist/data-table.js +12 -9
  295. package/dist/datepicker.cjs +2 -1
  296. package/dist/datepicker.js +2 -1
  297. package/dist/index.cjs +100 -98
  298. package/dist/index.d.ts +2 -2
  299. package/dist/index.d.ts.map +1 -1
  300. package/dist/index.js +4 -2
  301. package/dist/markdown.cjs +1 -1
  302. package/dist/markdown.js +2 -2
  303. package/dist/measurements/generated.cjs +296 -0
  304. package/dist/measurements/generated.d.ts +261 -0
  305. package/dist/measurements/generated.d.ts.map +1 -0
  306. package/dist/measurements/generated.js +296 -0
  307. package/dist/measurements/index.d.ts +2 -0
  308. package/dist/measurements/index.d.ts.map +1 -0
  309. package/dist/measurements.cjs +6 -0
  310. package/dist/measurements.js +6 -0
  311. package/dist/recipes/popup.cjs +14 -0
  312. package/dist/recipes/popup.d.ts +4 -0
  313. package/dist/recipes/popup.d.ts.map +1 -0
  314. package/dist/recipes/popup.js +14 -0
  315. package/dist/recipes/table-chrome.cjs +18 -0
  316. package/dist/recipes/table-chrome.d.ts +10 -0
  317. package/dist/recipes/table-chrome.d.ts.map +1 -0
  318. package/dist/recipes/table-chrome.js +18 -0
  319. package/dist/table.cjs +5 -2
  320. package/dist/table.js +5 -2
  321. package/dist/utils/layout-spacing.cjs +27 -0
  322. package/dist/utils/layout-spacing.d.ts +5 -0
  323. package/dist/utils/layout-spacing.d.ts.map +1 -0
  324. package/dist/utils/layout-spacing.js +27 -0
  325. package/dist/utils/seed-derivation.cjs +4 -42
  326. package/dist/utils/seed-derivation.d.ts +4 -3
  327. package/dist/utils/seed-derivation.d.ts.map +1 -1
  328. package/dist/utils/seed-derivation.js +4 -42
  329. package/dist/utils/theme-presets.cjs +1 -0
  330. package/dist/utils/theme-presets.d.ts +3 -2
  331. package/dist/utils/theme-presets.d.ts.map +1 -1
  332. package/dist/utils/theme-presets.js +1 -0
  333. package/fragments.json +1 -1
  334. package/package.json +23 -4
  335. package/src/components/Accordion/Accordion.module.scss +31 -52
  336. package/src/components/Alert/Alert.module.scss +28 -44
  337. package/src/components/AppShell/AppShell.module.scss +6 -3
  338. package/src/components/AppShell/index.tsx +8 -4
  339. package/src/components/Avatar/Avatar.module.scss +22 -60
  340. package/src/components/Avatar/index.tsx +152 -146
  341. package/src/components/Badge/Badge.module.scss +51 -46
  342. package/src/components/BentoGrid/BentoGrid.module.scss +11 -32
  343. package/src/components/Box/Box.module.scss +253 -81
  344. package/src/components/Breadcrumbs/Breadcrumbs.module.scss +10 -11
  345. package/src/components/Button/Button.module.scss +52 -57
  346. package/src/components/ButtonGroup/ButtonGroup.module.scss +5 -5
  347. package/src/components/Card/Card.consumer-fixture.module.scss +8 -0
  348. package/src/components/Card/Card.module.scss +211 -175
  349. package/src/components/Chart/Chart.module.scss +28 -29
  350. package/src/components/Chart/index.tsx +40 -53
  351. package/src/components/Checkbox/Checkbox.module.scss +43 -64
  352. package/src/components/Checkbox/index.tsx +4 -9
  353. package/src/components/Chip/Chip.contract.json +4 -3
  354. package/src/components/Chip/Chip.module.scss +23 -34
  355. package/src/components/Chip/index.tsx +3 -4
  356. package/src/components/CodeBlock/CodeBlock.module.scss +102 -215
  357. package/src/components/Collapsible/Collapsible.module.scss +29 -63
  358. package/src/components/Collapsible/index.tsx +22 -26
  359. package/src/components/ColorPicker/ColorPicker.module.scss +42 -24
  360. package/src/components/ColorPicker/index.tsx +2 -1
  361. package/src/components/Combobox/Combobox.module.scss +60 -73
  362. package/src/components/Combobox/index.tsx +7 -5
  363. package/src/components/Command/Command.module.scss +47 -77
  364. package/src/components/ConversationList/ConversationList.module.scss +20 -78
  365. package/src/components/ConversationList/index.tsx +55 -59
  366. package/src/components/DataTable/DataTable.module.scss +76 -216
  367. package/src/components/DataTable/index.tsx +20 -25
  368. package/src/components/DatePicker/DatePicker.module.scss +54 -33
  369. package/src/components/DatePicker/index.tsx +2 -1
  370. package/src/components/Dialog/Dialog.module.scss +42 -66
  371. package/src/components/Drawer/Drawer.module.scss +93 -99
  372. package/src/components/Drawer/index.tsx +1 -1
  373. package/src/components/Editor/Editor.module.scss +115 -220
  374. package/src/components/EmptyState/EmptyState.module.scss +38 -85
  375. package/src/components/Field/Field.contract.json +2 -1
  376. package/src/components/Field/Field.module.scss +9 -11
  377. package/src/components/Field/index.tsx +27 -1
  378. package/src/components/Fieldset/Fieldset.module.scss +14 -6
  379. package/src/components/Form/Form.contract.json +10 -23
  380. package/src/components/Form/Form.module.scss +9 -4
  381. package/src/components/Form/index.tsx +22 -7
  382. package/src/components/Grid/Grid.module.scss +159 -63
  383. package/src/components/Grid/index.tsx +107 -126
  384. package/src/components/Header/Header.module.scss +25 -32
  385. package/src/components/Header/index.tsx +2 -1
  386. package/src/components/Icon/Icon.module.scss +16 -0
  387. package/src/components/Icon/index.tsx +74 -86
  388. package/src/components/IconButton/IconButton.module.scss +11 -21
  389. package/src/components/Input/Input.module.scss +67 -55
  390. package/src/components/Input/index.tsx +1 -2
  391. package/src/components/Link/Link.module.scss +8 -9
  392. package/src/components/List/List.module.scss +16 -21
  393. package/src/components/List/index.tsx +4 -10
  394. package/src/components/Listbox/Listbox.module.scss +26 -54
  395. package/src/components/Loading/Loading.module.scss +23 -33
  396. package/src/components/Loading/index.tsx +68 -97
  397. package/src/components/Main/Main.module.scss +3 -5
  398. package/src/components/Markdown/Markdown.module.scss +36 -184
  399. package/src/components/Markdown/index.tsx +2 -2
  400. package/src/components/Menu/Menu.module.scss +48 -133
  401. package/src/components/Menu/index.tsx +57 -89
  402. package/src/components/Message/Message.module.scss +52 -142
  403. package/src/components/Message/index.tsx +16 -6
  404. package/src/components/NavigationMenu/NavigationMenu.module.scss +59 -52
  405. package/src/components/Pagination/Pagination.module.scss +32 -25
  406. package/src/components/Pagination/index.tsx +7 -2
  407. package/src/components/Popover/Popover.module.scss +37 -73
  408. package/src/components/Progress/Progress.module.scss +61 -41
  409. package/src/components/Progress/geometry.ts +41 -0
  410. package/src/components/Progress/index.tsx +44 -30
  411. package/src/components/Prompt/Prompt.module.scss +45 -82
  412. package/src/components/Prompt/index.tsx +6 -5
  413. package/src/components/RadioGroup/RadioGroup.module.scss +50 -69
  414. package/src/components/RadioGroup/index.tsx +7 -9
  415. package/src/components/ScrollArea/ScrollArea.contract.json +8 -24
  416. package/src/components/ScrollArea/ScrollArea.module.scss +122 -96
  417. package/src/components/ScrollArea/index.tsx +78 -60
  418. package/src/components/ScrollArea/scroll-state.ts +87 -0
  419. package/src/components/Select/Select.module.scss +53 -41
  420. package/src/components/Select/index.tsx +6 -2
  421. package/src/components/Separator/Separator.module.scss +29 -19
  422. package/src/components/Separator/index.tsx +55 -51
  423. package/src/components/Sidebar/Sidebar.contract.json +12 -0
  424. package/src/components/Sidebar/Sidebar.module.scss +101 -99
  425. package/src/components/Sidebar/index.tsx +10 -3
  426. package/src/components/Skeleton/Skeleton.module.scss +26 -26
  427. package/src/components/Skeleton/index.tsx +65 -72
  428. package/src/components/Slider/Slider.module.scss +31 -25
  429. package/src/components/Stack/Stack.module.scss +101 -30
  430. package/src/components/Stack/index.tsx +157 -127
  431. package/src/components/{Toggle/Toggle.contract.json → Switch/Switch.contract.json} +1 -1
  432. package/src/components/{Toggle/Toggle.module.scss → Switch/Switch.module.scss} +55 -82
  433. package/src/components/{Toggle → Switch}/index.tsx +5 -21
  434. package/src/components/Table/Table.module.scss +38 -129
  435. package/src/components/Table/index.tsx +13 -6
  436. package/src/components/TableOfContents/TableOfContents.module.scss +20 -177
  437. package/src/components/Tabs/Tabs.module.scss +27 -22
  438. package/src/components/Tabs/index.tsx +2 -2
  439. package/src/components/Text/Text.module.scss +22 -3
  440. package/src/components/Text/index.tsx +56 -21
  441. package/src/components/Textarea/Textarea.module.scss +59 -39
  442. package/src/components/Textarea/index.tsx +5 -12
  443. package/src/components/Theme/context.ts +42 -0
  444. package/src/components/Theme/index.tsx +14 -309
  445. package/src/components/ThemeToggle/ThemeToggle.module.scss +73 -0
  446. package/src/components/ThemeToggle/index.tsx +144 -0
  447. package/src/components/ThinkingIndicator/ThinkingIndicator.module.scss +24 -19
  448. package/src/components/ThinkingIndicator/index.tsx +44 -54
  449. package/src/components/Toast/Toast.contract.json +5 -21
  450. package/src/components/Toast/Toast.module.scss +61 -138
  451. package/src/components/Toggle/index.ts +7 -0
  452. package/src/components/ToggleGroup/ToggleGroup.contract.json +12 -39
  453. package/src/components/ToggleGroup/ToggleGroup.module.scss +132 -88
  454. package/src/components/ToggleGroup/index.tsx +5 -3
  455. package/src/components/Tooltip/Tooltip.module.scss +23 -39
  456. package/src/components/VisuallyHidden/VisuallyHidden.module.scss +3 -0
  457. package/src/index.ts +2 -1
  458. package/src/measurements/MeasurementTargets.module.scss +229 -0
  459. package/src/measurements/generated.ts +317 -0
  460. package/src/measurements/index.ts +8 -0
  461. package/src/measurements/measurements.json +361 -0
  462. package/src/recipes/_action.scss +138 -0
  463. package/src/recipes/_boolean-range.scss +124 -0
  464. package/src/recipes/_feedback.scss +171 -0
  465. package/src/recipes/_field.scss +98 -0
  466. package/src/recipes/_layout.scss +67 -0
  467. package/src/recipes/_navigation.scss +110 -0
  468. package/src/recipes/_overlay.scss +191 -0
  469. package/src/recipes/_popup.scss +92 -0
  470. package/src/recipes/_prose.scss +174 -0
  471. package/src/recipes/_representation.scss +193 -0
  472. package/src/recipes/_segmented.scss +26 -0
  473. package/src/recipes/_surface.scss +13 -0
  474. package/src/recipes/_table-chrome.scss +105 -0
  475. package/src/recipes/_target.scss +31 -0
  476. package/src/recipes/_typography.scss +38 -0
  477. package/src/recipes/popup.ts +12 -0
  478. package/src/recipes/table-chrome.ts +30 -0
  479. package/src/styles/globals.scss +2 -2
  480. package/src/tokens/_component-properties.scss +2 -2
  481. package/src/tokens/_computed.scss +9 -9
  482. package/src/tokens/_density.scss +41 -132
  483. package/src/tokens/_measurements.catalog.generated.css +91 -0
  484. package/src/tokens/_measurements.generated.scss +604 -0
  485. package/src/tokens/_mixins.scss +0 -276
  486. package/src/tokens/_property-registrations.scss +96 -92
  487. package/src/tokens/_radius.scss +16 -70
  488. package/src/tokens/_seeds.scss +8 -7
  489. package/src/tokens/_variables.scss +163 -148
  490. package/src/utils/layout-spacing.ts +31 -0
  491. package/src/utils/seed-derivation.ts +134 -172
  492. package/src/utils/theme-presets.ts +58 -30
  493. package/dist/components/Theme/ThemeToggle.module.scss.js +0 -23
  494. package/dist/components/Toggle/Toggle.module.scss.cjs +0 -44
  495. package/dist/components/Toggle/Toggle.module.scss.js +0 -44
  496. package/src/components/Switch/index.ts +0 -3
  497. package/src/components/Theme/ThemeToggle.module.scss +0 -91
package/src/components/Collapsible/index.tsx CHANGED
@@ -1,7 +1,7 @@
1
- 'use client';
1
+ "use client";
2
2
 
3
- import React, { useState, useCallback, useId, createContext, useContext } from 'react';
4
- import styles from './Collapsible.module.scss';
3
+ import React, { useState, useCallback, useId, createContext, useContext } from "react";
4
+ import styles from "./Collapsible.module.scss";
5
5
 
6
6
  function composeEventHandlers<E extends { defaultPrevented: boolean }>(
7
7
  userHandler: ((event: E) => void) | undefined,
@@ -28,7 +28,7 @@ const CollapsibleContext = createContext<CollapsibleContextValue | null>(null);
28
28
  function useCollapsibleContext() {
29
29
  const context = useContext(CollapsibleContext);
30
30
  if (!context) {
31
- throw new Error('Collapsible compound components must be used within Collapsible.Root');
31
+ throw new Error("Collapsible compound components must be used within Collapsible.Root");
32
32
  }
33
33
  return context;
34
34
  }
@@ -89,8 +89,8 @@ function CollapsibleRoot({
89
89
  <CollapsibleContext.Provider value={contextValue}>
90
90
  <div
91
91
  {...htmlProps}
92
- className={`${styles.root} ${isOpen ? styles.open : ''} ${disabled ? styles.disabled : ''} ${className || ''}`}
93
- data-state={isOpen ? 'open' : 'closed'}
92
+ className={`${styles.root} ${isOpen ? styles.open : ""} ${disabled ? styles.disabled : ""} ${className || ""}`}
93
+ data-state={isOpen ? "open" : "closed"}
94
94
  data-disabled={disabled || undefined}
95
95
  >
96
96
  {children}
@@ -105,7 +105,7 @@ export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTML
105
105
  /** Show chevron indicator */
106
106
  showChevron?: boolean;
107
107
  /** Chevron position */
108
- chevronPosition?: 'start' | 'end';
108
+ chevronPosition?: "start" | "end";
109
109
  /** Render as child element (for custom triggers) */
110
110
  asChild?: boolean;
111
111
  }
@@ -114,7 +114,7 @@ function CollapsibleTrigger({
114
114
  children,
115
115
  className,
116
116
  showChevron = true,
117
- chevronPosition = 'end',
117
+ chevronPosition = "end",
118
118
  asChild = false,
119
119
  onClick,
120
120
  onKeyDown,
@@ -123,7 +123,7 @@ function CollapsibleTrigger({
123
123
  const { isOpen, toggle, contentId, triggerId, disabled } = useCollapsibleContext();
124
124
 
125
125
  const handleKeyDown = (e: React.KeyboardEvent) => {
126
- if (e.key === 'Enter' || e.key === ' ') {
126
+ if (e.key === "Enter" || e.key === " ") {
127
127
  e.preventDefault();
128
128
  toggle();
129
129
  }
@@ -135,7 +135,7 @@ function CollapsibleTrigger({
135
135
 
136
136
  const chevronIcon = showChevron && (
137
137
  <svg
138
- className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}
138
+ className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ""}`}
139
139
  viewBox="0 0 16 16"
140
140
  fill="none"
141
141
  aria-hidden="true"
@@ -160,9 +160,9 @@ function CollapsibleTrigger({
160
160
  return React.cloneElement(children as React.ReactElement<any>, {
161
161
  ...htmlProps,
162
162
  id: (htmlProps.id as string | undefined) ?? triggerId,
163
- 'aria-expanded': isOpen,
164
- 'aria-controls': contentId,
165
- 'aria-disabled': disabled || undefined,
163
+ "aria-expanded": isOpen,
164
+ "aria-controls": contentId,
165
+ "aria-disabled": disabled || undefined,
166
166
  onClick: composeEventHandlers(
167
167
  (event: React.MouseEvent<HTMLElement>) => {
168
168
  childProps.onClick?.(event);
@@ -177,7 +177,7 @@ function CollapsibleTrigger({
177
177
  },
178
178
  (event) => handleKeyDown(event as unknown as React.KeyboardEvent)
179
179
  ),
180
- className: [className, childProps.className].filter(Boolean).join(' '),
180
+ className: [styles.trigger, className, childProps.className].filter(Boolean).join(" "),
181
181
  });
182
182
  }
183
183
 
@@ -186,7 +186,7 @@ function CollapsibleTrigger({
186
186
  {...htmlProps}
187
187
  type="button"
188
188
  id={(htmlProps.id as string | undefined) ?? triggerId}
189
- className={`${styles.trigger} ${className || ''}`}
189
+ className={`${styles.trigger} ${className || ""}`}
190
190
  aria-expanded={isOpen}
191
191
  aria-controls={contentId}
192
192
  aria-disabled={disabled || undefined}
@@ -194,9 +194,9 @@ function CollapsibleTrigger({
194
194
  onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}
195
195
  disabled={disabled}
196
196
  >
197
- {chevronPosition === 'start' && chevronIcon}
197
+ {chevronPosition === "start" && chevronIcon}
198
198
  <span className={styles.triggerContent}>{children}</span>
199
- {chevronPosition === 'end' && chevronIcon}
199
+ {chevronPosition === "end" && chevronIcon}
200
200
  </button>
201
201
  );
202
202
  }
@@ -227,9 +227,10 @@ function CollapsibleContent({
227
227
  id={(htmlProps.id as string | undefined) ?? contentId}
228
228
  role="region"
229
229
  aria-labelledby={triggerId}
230
- className={`${styles.content} ${isOpen ? styles.contentOpen : styles.contentClosed} ${className || ''}`}
231
- data-state={isOpen ? 'open' : 'closed'}
232
- hidden={!isOpen && !forceMount}
230
+ aria-hidden={!isOpen || undefined}
231
+ inert={!isOpen || undefined}
232
+ className={`${styles.content} ${isOpen ? styles.contentOpen : styles.contentClosed} ${className || ""}`}
233
+ data-state={isOpen ? "open" : "closed"}
233
234
  >
234
235
  <div className={styles.contentInner}>{children}</div>
235
236
  </div>
@@ -244,11 +245,6 @@ export const Collapsible = Object.assign(CollapsibleRoot, {
244
245
  });
245
246
 
246
247
  // Named exports for direct imports
247
- export {
248
- CollapsibleRoot,
249
- CollapsibleTrigger,
250
- CollapsibleContent,
251
- useCollapsibleContext,
252
- };
248
+ export { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useCollapsibleContext };
253
249
 
254
250
  export type CollapsibleProps = CollapsibleRootProps;
package/src/components/ColorPicker/ColorPicker.module.scss CHANGED
@@ -1,5 +1,8 @@
1
1
  @use '../../tokens/variables' as *;
2
2
  @use '../../tokens/mixins' as *;
3
+ @use '../../recipes/action';
4
+ @use '../../recipes/field';
5
+ @use '../../recipes/popup';
3
6
 
4
7
  // Local component tokens
5
8
  $fui-colorpicker-size: 200px !default; // react-colorful saturation/hue square
@@ -7,18 +10,34 @@ $fui-colorpicker-hue-height: $fui-target-size-min !default;
7
10
  $fui-colorpicker-pointer-size: $fui-target-size-min !default;
8
11
  $fui-colorpicker-pointer-border: 2px !default;
9
12
 
10
- // Form field wrapper (label + helper + error)
11
- @include form-field-wrapper;
13
+ .wrapper {
14
+ @include field.wrapper;
15
+ }
16
+
17
+ .label {
18
+ @include field.label;
19
+ }
20
+
21
+ .helper {
22
+ @include field.helper;
23
+ }
24
+
25
+ .helperError,
26
+ .errorMessage {
27
+ @include field.error;
28
+ }
12
29
 
13
30
  // Size variants
14
31
  .sizeSm {
15
32
  .inputWrapper {
16
- gap: var(--fui-space-1, $fui-space-1);
33
+ gap: action.gap("sm");
17
34
  }
18
35
 
19
36
  .swatch {
20
- width: var(--fui-input-height-sm, $fui-input-height-sm);
21
- height: var(--fui-input-height-sm, $fui-input-height-sm);
37
+ @include field.size("sm");
38
+
39
+ width: field.track("sm");
40
+ height: field.track("sm");
22
41
  }
23
42
 
24
43
  .hexInput {
@@ -26,48 +45,49 @@ $fui-colorpicker-pointer-border: 2px !default;
26
45
  flex: 0 0 auto;
27
46
  }
28
47
 
29
- .label {
30
- font-size: var(--fui-font-size-xs, $fui-font-size-xs);
31
- }
32
48
  }
33
49
 
34
50
  .sizeMd {
35
- // Default size - no overrides needed
51
+ .inputWrapper {
52
+ gap: action.gap("md");
53
+ }
54
+
55
+ .swatch {
56
+ @include field.size("md");
57
+
58
+ width: field.track("md");
59
+ height: field.track("md");
60
+ }
36
61
  }
37
62
 
38
63
  .sizeLg {
39
64
  .inputWrapper {
40
- gap: var(--fui-space-3, $fui-space-3);
65
+ gap: action.gap("lg");
41
66
  }
42
67
 
43
68
  .swatch {
44
- width: var(--fui-input-height-lg, $fui-input-height-lg);
45
- height: var(--fui-input-height-lg, $fui-input-height-lg);
69
+ @include field.size("lg");
70
+
71
+ width: field.track("lg");
72
+ height: field.track("lg");
46
73
  }
47
74
 
48
75
  .hexInput {
49
76
  min-width: 120px;
50
77
  }
51
78
 
52
- .label {
53
- font-size: var(--fui-font-size-base, $fui-font-size-base);
54
- }
55
79
  }
56
80
 
57
81
  .inputWrapper {
58
82
  display: flex;
59
- gap: var(--fui-space-2, $fui-space-2);
60
83
  align-items: center;
61
84
  }
62
85
 
63
86
  .swatch {
64
87
  @include button-reset;
65
88
  @include interactive-base;
66
- @include min-target-size;
67
- @include field-shell;
89
+ @include field.shell;
68
90
 
69
- width: var(--fui-input-height, $fui-input-height);
70
- height: var(--fui-input-height, $fui-input-height);
71
91
  flex-shrink: 0;
72
92
  // Disabled state (opacity + pointer-events) comes from @include interactive-base.
73
93
  }
@@ -80,7 +100,7 @@ $fui-colorpicker-pointer-border: 2px !default;
80
100
 
81
101
  // Style the actual input field inside Input component
82
102
  .hexInputField {
83
- font-family: var(--fui-font-mono, $fui-font-mono) !important;
103
+ font-family: var(--fui-font-mono, $fui-font-mono);
84
104
  text-transform: lowercase;
85
105
  }
86
106
 
@@ -90,11 +110,9 @@ $fui-colorpicker-pointer-border: 2px !default;
90
110
  }
91
111
 
92
112
  .popup {
93
- @include surface-elevated;
113
+ @include popup.container;
94
114
 
95
- border-color: var(--fui-form-group-border, $fui-border);
96
115
  border-radius: var(--fui-radius-lg, $fui-radius-lg);
97
- padding: var(--fui-space-2, $fui-space-2);
98
116
 
99
117
  // react-colorful styling overrides
100
118
  :global(.react-colorful) {
package/src/components/ColorPicker/index.tsx CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  import * as React from "react";
4
4
  import { Popover as BasePopover } from "@base-ui/react/popover";
5
+ import { POPUP_OFFSET_PX } from "../../recipes/popup";
5
6
 
6
7
  // ============================================
7
8
  // Lazy-loaded dependency (react-colorful)
@@ -171,7 +172,7 @@ const ColorPickerRoot = React.forwardRef<HTMLDivElement, ColorPickerProps>(funct
171
172
  <BasePopover.Positioner
172
173
  side="bottom"
173
174
  align="start"
174
- sideOffset={4}
175
+ sideOffset={POPUP_OFFSET_PX}
175
176
  className={styles.positioner}
176
177
  >
177
178
  <BasePopover.Popup
package/src/components/Combobox/Combobox.module.scss CHANGED
@@ -1,31 +1,46 @@
1
1
  @use "../../tokens/variables" as *;
2
2
  @use "../../tokens/mixins" as *;
3
+ @use "../../recipes/action";
4
+ @use "../../recipes/field";
5
+ @use "../../recipes/layout";
6
+ @use "../../recipes/popup";
7
+ @use "../../recipes/target";
8
+
9
+ .wrapper {
10
+ @include field.wrapper;
11
+ }
12
+
13
+ .label {
14
+ @include field.label;
15
+ }
16
+
17
+ .helper {
18
+ @include field.helper;
19
+ }
3
20
 
4
- // Form field wrapper (label + helper + error)
5
- @include form-field-wrapper;
21
+ .helperError,
22
+ .errorMessage {
23
+ @include field.error;
24
+ }
6
25
 
7
26
  // Input + trigger wrapper.
8
- // --_field-h is the single field-height source (same input-height tokens that
9
- // control-size() uses for Select/DatePicker); the inner text input + chevron
10
- // trigger derive from it. Declared before the size variants so those win the
11
- // --_field-h override. min-height (not height) preserves chip wrapping.
27
+ // --_field-h is the shared control-height track (same ladder as Input/Select).
28
+ // Inner text + chips fill the content box after wrapper pad only.
29
+ // min-height (not height) preserves chip wrapping.
12
30
  .inputWrapper {
13
- @include field-shell;
14
-
15
- --_field-h: var(--fui-input-height, #{$fui-input-height});
31
+ @include field.size("md");
32
+ @include field.shell;
16
33
 
17
34
  display: inline-flex;
18
35
  align-items: center;
19
36
  flex-wrap: wrap;
20
- gap: var(--fui-space-1, $fui-space-1);
37
+ gap: action.gap("sm");
21
38
  width: 100%;
22
- min-width: 10rem;
23
- min-height: var(--_field-h);
24
- padding: calc(var(--fui-space-px, $fui-space-px) * 2);
25
- padding-right: var(--fui-space-1, $fui-space-1);
39
+ min-width: layout.measure("field-minimum");
40
+ padding-inline-end: var(--fui-raw-space-4, 4px);
26
41
 
27
42
  &:focus-within {
28
- @include field-shell-focus;
43
+ @include field.focus-state;
29
44
  }
30
45
 
31
46
  &:has([data-disabled]) {
@@ -36,35 +51,23 @@
36
51
 
37
52
  // Size variants for input wrapper — override --_field-h.
38
53
  .inputWrapperSm {
39
- --_field-h: var(--fui-input-height-sm, #{$fui-input-height-sm});
54
+ @include field.size("sm");
40
55
  }
41
56
 
42
57
  .inputWrapperMd {
43
- // Default — inherits from .inputWrapper
58
+ @include field.size("md");
44
59
  }
45
60
 
46
61
  .inputWrapperLg {
47
- --_field-h: var(--fui-input-height-lg, #{$fui-input-height-lg});
48
- }
49
-
50
- // Size variants for text input
51
- .inputSm {
52
- font-size: var(--fui-font-size-xs, $fui-font-size-xs);
53
- }
54
-
55
- .inputLg {
56
- font-size: var(--fui-font-size-base, $fui-font-size-base);
62
+ @include field.size("lg");
57
63
  }
58
64
 
59
65
  // Text input
60
66
  .input {
61
- @include text-base;
62
-
63
67
  flex: 1;
64
- min-width: 4rem;
65
- // Inner text row sits inside the field with vertical breathing room.
66
- height: calc(var(--_field-h) - var(--fui-space-2, #{$fui-space-2}));
67
- padding: 0 var(--fui-space-2, $fui-space-2);
68
+ min-width: layout.measure("inline-floor");
69
+ min-block-size: 0;
70
+ padding: 0;
68
71
  background: transparent;
69
72
  border: none;
70
73
  border-radius: var(--fui-radius-sm, $fui-radius-sm);
@@ -96,19 +99,15 @@
96
99
 
97
100
  // Individual chip (multi-select) — matches Chip component outlined xs
98
101
  .chip {
99
- display: inline-flex;
100
- align-items: center;
101
- gap: var(--fui-space-0-5, $fui-space-0-5);
102
- height: var(--fui-target-size-min, $fui-target-size-min);
103
- padding: 0 var(--fui-space-2, $fui-space-2);
102
+ @include action.base;
103
+ @include action.size("micro");
104
+
104
105
  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
105
- border: 1px solid var(--fui-form-group-border, $fui-border);
106
+ border: var(--fui-stroke-hairline, 1px) solid var(--fui-form-group-border, $fui-border);
106
107
  border-radius: var(--fui-radius-full, $fui-radius-full);
107
- font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
108
- line-height: 1;
109
108
  color: var(--fui-text-secondary, $fui-text-secondary);
110
109
  white-space: nowrap;
111
- max-width: 12rem;
110
+ max-width: layout.measure("compact-content");
112
111
  }
113
112
 
114
113
  .chipLabel {
@@ -120,14 +119,14 @@
120
119
  // Chip remove button — round icon button inside the pill
121
120
  .chipRemove {
122
121
  @include button-reset;
123
- @include touch-target;
122
+ @include target.hit-area("micro");
124
123
 
125
124
  display: flex;
126
125
  align-items: center;
127
126
  justify-content: center;
128
127
  flex-shrink: 0;
129
- width: var(--fui-icon-sm, $fui-icon-sm);
130
- height: var(--fui-icon-sm, $fui-icon-sm);
128
+ width: action.icon-size("sm");
129
+ height: action.icon-size("sm");
131
130
  border-radius: var(--fui-radius-full, $fui-radius-full);
132
131
  color: var(--fui-text-tertiary, $fui-text-tertiary);
133
132
  cursor: pointer;
@@ -151,8 +150,8 @@
151
150
  flex-shrink: 0;
152
151
  min-width: 0;
153
152
  min-height: 0;
154
- width: calc(var(--_field-h) - var(--fui-space-2, #{$fui-space-2}));
155
- height: calc(var(--_field-h) - var(--fui-space-2, #{$fui-space-2}));
153
+ width: action.track("micro");
154
+ height: action.track("micro");
156
155
  margin-left: auto;
157
156
  color: var(--fui-text-secondary, $fui-text-secondary);
158
157
  cursor: pointer;
@@ -160,7 +159,7 @@
160
159
  transition:
161
160
  color var(--fui-transition-fast, $fui-transition-fast),
162
161
  background-color var(--fui-transition-fast, $fui-transition-fast);
163
- margin-inline-end: calc(var(--fui-space-px, $fui-space-px) * 2);
162
+ margin-inline-end: var(--fui-raw-space-2, 2px);
164
163
 
165
164
  &:hover {
166
165
  color: var(--fui-text-primary, $fui-text-primary);
@@ -173,8 +172,7 @@
173
172
  }
174
173
 
175
174
  svg {
176
- width: var(--fui-icon-sm, $fui-icon-sm);
177
- height: var(--fui-icon-sm, $fui-icon-sm);
175
+ @include action.glyph("sm");
178
176
  transition: transform var(--fui-transition-fast, $fui-transition-fast);
179
177
  }
180
178
 
@@ -191,17 +189,10 @@
191
189
 
192
190
  // Popup container
193
191
  .popup {
194
- @include surface-elevated;
195
- @include popup-container;
196
-
197
- @include popup-scroll-viewport;
192
+ @include popup.container;
193
+ @include popup.viewport;
198
194
 
199
- border-color: var(--fui-form-group-border, $fui-border);
200
195
  min-width: var(--anchor-width);
201
- // Show N items + half-peek scroll hint (default 4.5 items).
202
- // !important needed to override Base UI's inline max-height: 100%
203
- max-height: var(--_popup-scroll-max-h) !important;
204
- overflow-y: auto !important;
205
196
 
206
197
  // Animation
207
198
  opacity: 0;
@@ -225,18 +216,18 @@
225
216
 
226
217
  // Individual option
227
218
  .item {
228
- @include popup-item;
219
+ @include popup.row;
229
220
 
230
221
  // Base UI Combobox sets [data-highlighted] on KEYBOARD nav only — it does NOT add it
231
222
  // on pointer hover (verified in-browser) — so :hover is required for mouse users.
232
223
  // Both map to the one shared neutral highlight.
233
224
  &:hover,
234
225
  &[data-highlighted] {
235
- @include popup-item-highlight;
226
+ @include popup.highlight-state;
236
227
  }
237
228
 
238
229
  &[data-selected] {
239
- @include popup-item-selected;
230
+ @include popup.selected-state;
240
231
 
241
232
  // Selected + active: stronger accent-tinted wash so it still reads as selected.
242
233
  &:hover,
@@ -246,7 +237,7 @@
246
237
  }
247
238
 
248
239
  &[data-disabled] {
249
- @include popup-item-disabled;
240
+ @include popup.disabled-state;
250
241
  }
251
242
  }
252
243
 
@@ -268,28 +259,24 @@
268
259
 
269
260
  // Empty state
270
261
  .empty {
271
- @include text-base;
262
+ @include popup.row;
272
263
 
273
- display: flex;
274
- align-items: center;
275
264
  justify-content: center;
276
- padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
277
265
  color: var(--fui-text-tertiary, $fui-text-tertiary);
278
- font-size: var(--fui-font-size-sm, $fui-font-size-sm);
279
266
  }
280
267
 
281
268
  // Group container
282
269
  .group {
283
- &:not(:first-child) {
284
- margin-top: var(--fui-space-1, $fui-space-1);
285
- padding-top: var(--fui-space-1, $fui-space-1);
286
- border-top: 1px solid var(--fui-border, $fui-border);
270
+ &:not(:first-child)::before {
271
+ content: "";
272
+ display: block;
273
+ @include popup.group-separator;
287
274
  }
288
275
  }
289
276
 
290
277
  // Group label
291
278
  .groupLabel {
292
- @include popup-group-label;
279
+ @include popup.group-label;
293
280
  }
294
281
 
295
282
  // ============================================
package/src/components/Combobox/index.tsx CHANGED
@@ -4,6 +4,10 @@ import * as React from "react";
4
4
  import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
5
5
  import { useResolvedControlSize } from "../ComponentDefaults";
6
6
  import { mergeAriaIds, useFormFieldIds, type FormFieldProps } from "../../utils/aria";
7
+ import {
8
+ POPUP_OFFSET_PX,
9
+ resolvePopupViewportRows,
10
+ } from "../../recipes/popup";
7
11
  import styles from "./Combobox.module.scss";
8
12
 
9
13
  // ============================================
@@ -532,15 +536,13 @@ function ComboboxInput({
532
536
  ...htmlProps
533
537
  }: ComboboxInputProps) {
534
538
  const context = React.useContext(ComboboxContext);
535
- const inputSizeClass =
536
- context.size === "sm" ? styles.inputSm : context.size === "lg" ? styles.inputLg : undefined;
537
539
  const wrapperSizeClass =
538
540
  context.size === "sm"
539
541
  ? styles.inputWrapperSm
540
542
  : context.size === "lg"
541
543
  ? styles.inputWrapperLg
542
544
  : undefined;
543
- const classes = [styles.input, inputSizeClass, className].filter(Boolean).join(" ");
545
+ const classes = [styles.input, className].filter(Boolean).join(" ");
544
546
  const wrapperClasses = [styles.inputWrapper, wrapperSizeClass].filter(Boolean).join(" ");
545
547
  const renderTrigger = showTrigger && context.explicitTriggerCount === 0;
546
548
  const inputId = context.inputId ?? htmlProps.id;
@@ -612,7 +614,7 @@ function ComboboxTrigger({ children, className, ...htmlProps }: ComboboxTriggerP
612
614
  function ComboboxContent({
613
615
  children,
614
616
  className,
615
- sideOffset = 4,
617
+ sideOffset = POPUP_OFFSET_PX,
616
618
  align = "start",
617
619
  maxVisibleItems,
618
620
  ...htmlProps
@@ -633,7 +635,7 @@ function ComboboxContent({
633
635
  const popupStyle =
634
636
  maxVisibleItems != null
635
637
  ? ({
636
- "--fui-select-max-items": maxVisibleItems + 0.5,
638
+ "--fui-popup-viewport-rows": resolvePopupViewportRows(maxVisibleItems),
637
639
  ...htmlProps.style,
638
640
  } as React.CSSProperties)
639
641
  : htmlProps.style;