@flowstack-ui/brick 0.1.4 → 0.1.6

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 (380) hide show
  1. package/README.md +14 -2
  2. package/dist/agents/accordion.json +80 -0
  3. package/dist/agents/accordion.md +48 -0
  4. package/dist/agents/app-bar.json +20 -3
  5. package/dist/agents/app-bar.md +7 -2
  6. package/dist/agents/appearance.json +84 -0
  7. package/dist/agents/appearance.md +48 -0
  8. package/dist/agents/badge.json +64 -0
  9. package/dist/agents/badge.md +41 -0
  10. package/dist/agents/card.json +5 -0
  11. package/dist/agents/card.md +1 -0
  12. package/dist/agents/carousel.json +131 -0
  13. package/dist/agents/carousel.md +64 -0
  14. package/dist/agents/collapsible.json +81 -0
  15. package/dist/agents/collapsible.md +49 -0
  16. package/dist/agents/container.json +10 -4
  17. package/dist/agents/container.md +4 -2
  18. package/dist/agents/divider.json +11 -5
  19. package/dist/agents/divider.md +5 -3
  20. package/dist/agents/drawer.json +34 -4
  21. package/dist/agents/drawer.md +10 -2
  22. package/dist/agents/frame.json +74 -0
  23. package/dist/agents/frame.md +47 -0
  24. package/dist/agents/grid.json +18 -0
  25. package/dist/agents/grid.md +4 -0
  26. package/dist/agents/icon.json +98 -0
  27. package/dist/agents/icon.md +51 -0
  28. package/dist/agents/image.json +18 -2
  29. package/dist/agents/image.md +5 -1
  30. package/dist/agents/interface-composition.json +153 -6
  31. package/dist/agents/interface-composition.md +42 -6
  32. package/dist/agents/layer-selection.json +13 -1
  33. package/dist/agents/layer-selection.md +4 -0
  34. package/dist/agents/list.json +80 -0
  35. package/dist/agents/list.md +48 -0
  36. package/dist/agents/manifest.json +61 -1
  37. package/dist/agents/nav-list.json +16 -5
  38. package/dist/agents/nav-list.md +6 -3
  39. package/dist/agents/navigation-menu.json +15 -1
  40. package/dist/agents/navigation-menu.md +4 -1
  41. package/dist/agents/scroll-area.json +8 -3
  42. package/dist/agents/scroll-area.md +4 -3
  43. package/dist/agents/section.json +65 -0
  44. package/dist/agents/section.md +42 -0
  45. package/dist/agents/stack.json +29 -5
  46. package/dist/agents/stack.md +14 -4
  47. package/dist/agents/surface.json +42 -4
  48. package/dist/agents/surface.md +13 -2
  49. package/dist/agents/tabs.json +17 -2
  50. package/dist/agents/tabs.md +8 -1
  51. package/dist/agents/text.json +19 -4
  52. package/dist/agents/text.md +6 -3
  53. package/dist/agents/z-stack.json +66 -0
  54. package/dist/agents/z-stack.md +41 -0
  55. package/dist/appearance.d.ts +2 -0
  56. package/dist/appearance.d.ts.map +1 -0
  57. package/dist/appearance.js +2 -0
  58. package/dist/appearance.js.map +1 -0
  59. package/dist/carousel.d.ts +3 -0
  60. package/dist/carousel.d.ts.map +1 -0
  61. package/dist/carousel.js +3 -0
  62. package/dist/carousel.js.map +1 -0
  63. package/dist/components/_responsive-value/ResponsiveValue.d.ts +9 -0
  64. package/dist/components/_responsive-value/ResponsiveValue.d.ts.map +1 -0
  65. package/dist/components/_responsive-value/ResponsiveValue.js +22 -0
  66. package/dist/components/_responsive-value/ResponsiveValue.js.map +1 -0
  67. package/dist/components/alert-dialog/AlertDialog.d.ts +7 -0
  68. package/dist/components/alert-dialog/AlertDialog.d.ts.map +1 -1
  69. package/dist/components/alert-dialog/AlertDialog.js +2 -2
  70. package/dist/components/alert-dialog/AlertDialog.js.map +1 -1
  71. package/dist/components/alert-dialog/index.d.ts +1 -1
  72. package/dist/components/alert-dialog/index.d.ts.map +1 -1
  73. package/dist/components/alert-dialog/index.js.map +1 -1
  74. package/dist/components/appearance/Appearance.d.ts +14 -0
  75. package/dist/components/appearance/Appearance.d.ts.map +1 -0
  76. package/dist/components/appearance/Appearance.js +39 -0
  77. package/dist/components/appearance/Appearance.js.map +1 -0
  78. package/dist/components/appearance/index.d.ts +2 -0
  79. package/dist/components/appearance/index.d.ts.map +1 -0
  80. package/dist/components/appearance/index.js +2 -0
  81. package/dist/components/appearance/index.js.map +1 -0
  82. package/dist/components/card/Card.d.ts +1 -0
  83. package/dist/components/card/Card.d.ts.map +1 -1
  84. package/dist/components/card/Card.js +2 -1
  85. package/dist/components/card/Card.js.map +1 -1
  86. package/dist/components/carousel/Carousel.d.ts +80 -0
  87. package/dist/components/carousel/Carousel.d.ts.map +1 -0
  88. package/dist/components/carousel/Carousel.js +90 -0
  89. package/dist/components/carousel/Carousel.js.map +1 -0
  90. package/dist/components/carousel/index.d.ts +2 -0
  91. package/dist/components/carousel/index.d.ts.map +1 -0
  92. package/dist/components/carousel/index.js +2 -0
  93. package/dist/components/carousel/index.js.map +1 -0
  94. package/dist/components/dialog/Dialog.d.ts +7 -0
  95. package/dist/components/dialog/Dialog.d.ts.map +1 -1
  96. package/dist/components/dialog/Dialog.js +2 -2
  97. package/dist/components/dialog/Dialog.js.map +1 -1
  98. package/dist/components/dialog/index.d.ts +1 -1
  99. package/dist/components/dialog/index.d.ts.map +1 -1
  100. package/dist/components/dialog/index.js.map +1 -1
  101. package/dist/components/divider/Divider.js +2 -2
  102. package/dist/components/divider/Divider.js.map +1 -1
  103. package/dist/components/drawer/Drawer.d.ts +8 -1
  104. package/dist/components/drawer/Drawer.d.ts.map +1 -1
  105. package/dist/components/drawer/Drawer.js +3 -2
  106. package/dist/components/drawer/Drawer.js.map +1 -1
  107. package/dist/components/drawer/index.d.ts +1 -1
  108. package/dist/components/drawer/index.d.ts.map +1 -1
  109. package/dist/components/drawer/index.js.map +1 -1
  110. package/dist/components/frame/Frame.d.ts +28 -0
  111. package/dist/components/frame/Frame.d.ts.map +1 -0
  112. package/dist/components/frame/Frame.js +84 -0
  113. package/dist/components/frame/Frame.js.map +1 -0
  114. package/dist/components/frame/index.d.ts +2 -0
  115. package/dist/components/frame/index.d.ts.map +1 -0
  116. package/dist/components/frame/index.js +2 -0
  117. package/dist/components/frame/index.js.map +1 -0
  118. package/dist/components/grid/Grid.d.ts +28 -11
  119. package/dist/components/grid/Grid.d.ts.map +1 -1
  120. package/dist/components/grid/Grid.js +77 -14
  121. package/dist/components/grid/Grid.js.map +1 -1
  122. package/dist/components/grid/index.d.ts +1 -1
  123. package/dist/components/grid/index.d.ts.map +1 -1
  124. package/dist/components/grid/index.js.map +1 -1
  125. package/dist/components/image/Image.d.ts +4 -0
  126. package/dist/components/image/Image.d.ts.map +1 -1
  127. package/dist/components/image/Image.js +4 -4
  128. package/dist/components/image/Image.js.map +1 -1
  129. package/dist/components/image/index.d.ts +1 -1
  130. package/dist/components/image/index.d.ts.map +1 -1
  131. package/dist/components/image/index.js +1 -1
  132. package/dist/components/image/index.js.map +1 -1
  133. package/dist/components/navigation-menu/NavigationMenu.d.ts +6 -3
  134. package/dist/components/navigation-menu/NavigationMenu.d.ts.map +1 -1
  135. package/dist/components/navigation-menu/NavigationMenu.js +2 -2
  136. package/dist/components/navigation-menu/NavigationMenu.js.map +1 -1
  137. package/dist/components/navigation-menu/index.d.ts +1 -1
  138. package/dist/components/navigation-menu/index.d.ts.map +1 -1
  139. package/dist/components/navigation-menu/index.js.map +1 -1
  140. package/dist/components/section/Section.d.ts +18 -0
  141. package/dist/components/section/Section.d.ts.map +1 -0
  142. package/dist/components/section/Section.js +29 -0
  143. package/dist/components/section/Section.js.map +1 -0
  144. package/dist/components/section/index.d.ts +2 -0
  145. package/dist/components/section/index.d.ts.map +1 -0
  146. package/dist/components/section/index.js +2 -0
  147. package/dist/components/section/index.js.map +1 -0
  148. package/dist/components/stack/Stack.d.ts +33 -8
  149. package/dist/components/stack/Stack.d.ts.map +1 -1
  150. package/dist/components/stack/Stack.js +71 -14
  151. package/dist/components/stack/Stack.js.map +1 -1
  152. package/dist/components/stack/index.d.ts +1 -1
  153. package/dist/components/stack/index.d.ts.map +1 -1
  154. package/dist/components/stack/index.js.map +1 -1
  155. package/dist/components/surface/Surface.d.ts +41 -3
  156. package/dist/components/surface/Surface.d.ts.map +1 -1
  157. package/dist/components/surface/Surface.js +79 -6
  158. package/dist/components/surface/Surface.js.map +1 -1
  159. package/dist/components/surface/index.d.ts +1 -1
  160. package/dist/components/surface/index.d.ts.map +1 -1
  161. package/dist/components/surface/index.js +1 -1
  162. package/dist/components/surface/index.js.map +1 -1
  163. package/dist/components/tabs/Tabs.d.ts +27 -6
  164. package/dist/components/tabs/Tabs.d.ts.map +1 -1
  165. package/dist/components/tabs/Tabs.js +10 -6
  166. package/dist/components/tabs/Tabs.js.map +1 -1
  167. package/dist/components/tabs/index.d.ts +1 -1
  168. package/dist/components/tabs/index.d.ts.map +1 -1
  169. package/dist/components/tabs/index.js.map +1 -1
  170. package/dist/components/text/Text.d.ts +1 -1
  171. package/dist/components/text/Text.d.ts.map +1 -1
  172. package/dist/components/text/Text.js.map +1 -1
  173. package/dist/components/z-stack/ZStack.d.ts +43 -0
  174. package/dist/components/z-stack/ZStack.d.ts.map +1 -0
  175. package/dist/components/z-stack/ZStack.js +70 -0
  176. package/dist/components/z-stack/ZStack.js.map +1 -0
  177. package/dist/components/z-stack/index.d.ts +2 -0
  178. package/dist/components/z-stack/index.d.ts.map +1 -0
  179. package/dist/components/z-stack/index.js +2 -0
  180. package/dist/components/z-stack/index.js.map +1 -0
  181. package/dist/drawer.d.ts +1 -0
  182. package/dist/drawer.d.ts.map +1 -1
  183. package/dist/drawer.js +1 -0
  184. package/dist/drawer.js.map +1 -1
  185. package/dist/frame.d.ts +2 -0
  186. package/dist/frame.d.ts.map +1 -0
  187. package/dist/frame.js +2 -0
  188. package/dist/frame.js.map +1 -0
  189. package/dist/grid.d.ts +1 -1
  190. package/dist/grid.d.ts.map +1 -1
  191. package/dist/grid.js.map +1 -1
  192. package/dist/image.d.ts +1 -1
  193. package/dist/image.d.ts.map +1 -1
  194. package/dist/image.js +1 -1
  195. package/dist/image.js.map +1 -1
  196. package/dist/index.d.ts +12 -7
  197. package/dist/index.d.ts.map +1 -1
  198. package/dist/index.js +8 -3
  199. package/dist/index.js.map +1 -1
  200. package/dist/section.d.ts +2 -0
  201. package/dist/section.d.ts.map +1 -0
  202. package/dist/section.js +2 -0
  203. package/dist/section.js.map +1 -0
  204. package/dist/stack.d.ts +1 -1
  205. package/dist/stack.d.ts.map +1 -1
  206. package/dist/stack.js.map +1 -1
  207. package/dist/styles/accordion.css +1 -1
  208. package/dist/styles/accordion.css.map +1 -1
  209. package/dist/styles/alert-dialog.css +1 -1
  210. package/dist/styles/alert-dialog.css.map +1 -1
  211. package/dist/styles/app-bar.css +1 -1
  212. package/dist/styles/app-bar.css.map +1 -1
  213. package/dist/styles/appearance.css +2 -0
  214. package/dist/styles/appearance.css.map +1 -0
  215. package/dist/styles/aspect-ratio.css +1 -1
  216. package/dist/styles/aspect-ratio.css.map +1 -1
  217. package/dist/styles/avatar.css +1 -1
  218. package/dist/styles/avatar.css.map +1 -1
  219. package/dist/styles/badge.css +1 -1
  220. package/dist/styles/badge.css.map +1 -1
  221. package/dist/styles/bottom-navigation.css +1 -1
  222. package/dist/styles/bottom-navigation.css.map +1 -1
  223. package/dist/styles/breadcrumb.css +1 -1
  224. package/dist/styles/breadcrumb.css.map +1 -1
  225. package/dist/styles/button.css +1 -1
  226. package/dist/styles/button.css.map +1 -1
  227. package/dist/styles/card.css +1 -1
  228. package/dist/styles/card.css.map +1 -1
  229. package/dist/styles/carousel.css +2 -0
  230. package/dist/styles/carousel.css.map +1 -0
  231. package/dist/styles/checkbox-group.css +1 -1
  232. package/dist/styles/checkbox-group.css.map +1 -1
  233. package/dist/styles/checkbox.css +1 -1
  234. package/dist/styles/checkbox.css.map +1 -1
  235. package/dist/styles/chip.css +1 -1
  236. package/dist/styles/chip.css.map +1 -1
  237. package/dist/styles/code-block.css +1 -1
  238. package/dist/styles/code-block.css.map +1 -1
  239. package/dist/styles/code.css +1 -1
  240. package/dist/styles/code.css.map +1 -1
  241. package/dist/styles/collapsible.css +1 -1
  242. package/dist/styles/collapsible.css.map +1 -1
  243. package/dist/styles/combobox.css +1 -1
  244. package/dist/styles/combobox.css.map +1 -1
  245. package/dist/styles/container.css +1 -1
  246. package/dist/styles/container.css.map +1 -1
  247. package/dist/styles/context-menu.css +1 -1
  248. package/dist/styles/context-menu.css.map +1 -1
  249. package/dist/styles/core.css +1 -1
  250. package/dist/styles/core.css.map +1 -1
  251. package/dist/styles/data-grid.css +1 -1
  252. package/dist/styles/data-grid.css.map +1 -1
  253. package/dist/styles/dialog.css +1 -1
  254. package/dist/styles/dialog.css.map +1 -1
  255. package/dist/styles/divider.css +1 -1
  256. package/dist/styles/divider.css.map +1 -1
  257. package/dist/styles/drawer.css +1 -1
  258. package/dist/styles/drawer.css.map +1 -1
  259. package/dist/styles/dropdown-menu.css +1 -1
  260. package/dist/styles/dropdown-menu.css.map +1 -1
  261. package/dist/styles/feed.css +1 -1
  262. package/dist/styles/feed.css.map +1 -1
  263. package/dist/styles/field.css +1 -1
  264. package/dist/styles/field.css.map +1 -1
  265. package/dist/styles/fieldset.css +1 -1
  266. package/dist/styles/fieldset.css.map +1 -1
  267. package/dist/styles/file-upload.css +1 -1
  268. package/dist/styles/file-upload.css.map +1 -1
  269. package/dist/styles/form.css +1 -1
  270. package/dist/styles/form.css.map +1 -1
  271. package/dist/styles/frame.css +2 -0
  272. package/dist/styles/frame.css.map +1 -0
  273. package/dist/styles/grid.css +1 -1
  274. package/dist/styles/grid.css.map +1 -1
  275. package/dist/styles/hide.css +1 -1
  276. package/dist/styles/hide.css.map +1 -1
  277. package/dist/styles/hover-card.css +1 -1
  278. package/dist/styles/hover-card.css.map +1 -1
  279. package/dist/styles/icon-button.css +1 -1
  280. package/dist/styles/icon-button.css.map +1 -1
  281. package/dist/styles/icon.css +1 -1
  282. package/dist/styles/icon.css.map +1 -1
  283. package/dist/styles/image.css +1 -1
  284. package/dist/styles/image.css.map +1 -1
  285. package/dist/styles/input.css +1 -1
  286. package/dist/styles/input.css.map +1 -1
  287. package/dist/styles/link.css +1 -1
  288. package/dist/styles/link.css.map +1 -1
  289. package/dist/styles/list.css +1 -1
  290. package/dist/styles/list.css.map +1 -1
  291. package/dist/styles/menubar.css +1 -1
  292. package/dist/styles/menubar.css.map +1 -1
  293. package/dist/styles/multi-select.css +1 -1
  294. package/dist/styles/multi-select.css.map +1 -1
  295. package/dist/styles/nav-list.css +1 -1
  296. package/dist/styles/nav-list.css.map +1 -1
  297. package/dist/styles/navigation-menu.css +1 -1
  298. package/dist/styles/navigation-menu.css.map +1 -1
  299. package/dist/styles/number-input.css +1 -1
  300. package/dist/styles/number-input.css.map +1 -1
  301. package/dist/styles/otp-field.css +1 -1
  302. package/dist/styles/otp-field.css.map +1 -1
  303. package/dist/styles/pagination.css +1 -1
  304. package/dist/styles/pagination.css.map +1 -1
  305. package/dist/styles/password-toggle-field.css +1 -1
  306. package/dist/styles/password-toggle-field.css.map +1 -1
  307. package/dist/styles/popover.css +1 -1
  308. package/dist/styles/popover.css.map +1 -1
  309. package/dist/styles/progress-circle.css +1 -1
  310. package/dist/styles/progress-circle.css.map +1 -1
  311. package/dist/styles/progress.css +1 -1
  312. package/dist/styles/progress.css.map +1 -1
  313. package/dist/styles/radio-group.css +1 -1
  314. package/dist/styles/radio-group.css.map +1 -1
  315. package/dist/styles/rating.css +1 -1
  316. package/dist/styles/rating.css.map +1 -1
  317. package/dist/styles/scroll-area.css +1 -1
  318. package/dist/styles/scroll-area.css.map +1 -1
  319. package/dist/styles/section.css +2 -0
  320. package/dist/styles/section.css.map +1 -0
  321. package/dist/styles/select.css +1 -1
  322. package/dist/styles/select.css.map +1 -1
  323. package/dist/styles/show.css +1 -1
  324. package/dist/styles/show.css.map +1 -1
  325. package/dist/styles/sidebar.css +1 -1
  326. package/dist/styles/sidebar.css.map +1 -1
  327. package/dist/styles/skeleton.css +1 -1
  328. package/dist/styles/skeleton.css.map +1 -1
  329. package/dist/styles/skip-link.css +1 -1
  330. package/dist/styles/skip-link.css.map +1 -1
  331. package/dist/styles/slider.css +1 -1
  332. package/dist/styles/slider.css.map +1 -1
  333. package/dist/styles/stack.css +1 -1
  334. package/dist/styles/stack.css.map +1 -1
  335. package/dist/styles/surface.css +1 -1
  336. package/dist/styles/surface.css.map +1 -1
  337. package/dist/styles/swipeable-item.css +1 -1
  338. package/dist/styles/swipeable-item.css.map +1 -1
  339. package/dist/styles/switch.css +1 -1
  340. package/dist/styles/switch.css.map +1 -1
  341. package/dist/styles/table.css +1 -1
  342. package/dist/styles/table.css.map +1 -1
  343. package/dist/styles/tabs.css +1 -1
  344. package/dist/styles/tabs.css.map +1 -1
  345. package/dist/styles/text.css +1 -1
  346. package/dist/styles/text.css.map +1 -1
  347. package/dist/styles/textarea.css +1 -1
  348. package/dist/styles/textarea.css.map +1 -1
  349. package/dist/styles/toast.css +1 -1
  350. package/dist/styles/toast.css.map +1 -1
  351. package/dist/styles/toggle-group.css +1 -1
  352. package/dist/styles/toggle-group.css.map +1 -1
  353. package/dist/styles/toggle.css +1 -1
  354. package/dist/styles/toggle.css.map +1 -1
  355. package/dist/styles/toolbar.css +1 -1
  356. package/dist/styles/toolbar.css.map +1 -1
  357. package/dist/styles/tooltip.css +1 -1
  358. package/dist/styles/tooltip.css.map +1 -1
  359. package/dist/styles/tree-grid.css +1 -1
  360. package/dist/styles/tree-grid.css.map +1 -1
  361. package/dist/styles/tree.css +1 -1
  362. package/dist/styles/tree.css.map +1 -1
  363. package/dist/styles/visually-hidden.css +1 -1
  364. package/dist/styles/visually-hidden.css.map +1 -1
  365. package/dist/styles/z-stack.css +2 -0
  366. package/dist/styles/z-stack.css.map +1 -0
  367. package/dist/styles.css +1 -1
  368. package/dist/styles.css.map +1 -1
  369. package/dist/surface.d.ts +1 -1
  370. package/dist/surface.d.ts.map +1 -1
  371. package/dist/surface.js +1 -1
  372. package/dist/surface.js.map +1 -1
  373. package/dist/tokens.css +1 -1
  374. package/dist/tokens.css.map +1 -1
  375. package/dist/z-stack.d.ts +2 -0
  376. package/dist/z-stack.d.ts.map +1 -0
  377. package/dist/z-stack.js +2 -0
  378. package/dist/z-stack.js.map +1 -0
  379. package/docs/guides/appearance-and-tokens.md +91 -1
  380. package/package.json +22 -2
package/README.md CHANGED
@@ -117,6 +117,17 @@ appearance on the document or any subtree:
117
117
  <html data-brick-appearance="dark">
118
118
  ```
119
119
 
120
+ Use the server-safe Appearance utility to place a typed local scope on exactly
121
+ one existing Brick host without adding a wrapper:
122
+
123
+ ```tsx
124
+ import { Appearance } from "@flowstack-ui/brick/appearance";
125
+
126
+ <Appearance value="dark">
127
+ <AppBar.Root>...</AppBar.Root>
128
+ </Appearance>
129
+ ```
130
+
120
131
  Override public semantic variables with ordinary CSS:
121
132
 
122
133
  ```css
@@ -141,12 +152,13 @@ The complete component guides live with the source repository:
141
152
  | --- | --- |
142
153
  | Actions and selection | [Button](https://github.com/flowstack-ui/brick/blob/main/docs/components/button/README.md), [Icon Button](https://github.com/flowstack-ui/brick/blob/main/docs/components/icon-button/README.md), [Toggle](https://github.com/flowstack-ui/brick/blob/main/docs/components/toggle/README.md), [Toggle Group](https://github.com/flowstack-ui/brick/blob/main/docs/components/toggle-group/README.md), [Toolbar](https://github.com/flowstack-ui/brick/blob/main/docs/components/toolbar/README.md), [Pagination](https://github.com/flowstack-ui/brick/blob/main/docs/components/pagination/README.md) |
143
154
  | Accessibility | [Skip Link](https://github.com/flowstack-ui/brick/blob/main/docs/components/skip-link/README.md), [Visually Hidden](https://github.com/flowstack-ui/brick/blob/main/docs/components/visually-hidden/README.md) |
144
- | Data display | [Aspect Ratio](https://github.com/flowstack-ui/brick/blob/main/docs/components/aspect-ratio/README.md), [Data Grid](https://github.com/flowstack-ui/brick/blob/main/docs/components/data-grid/README.md), [Tree Grid](https://github.com/flowstack-ui/brick/blob/main/docs/components/tree-grid/README.md), [Tree](https://github.com/flowstack-ui/brick/blob/main/docs/components/tree/README.md), [Feed](https://github.com/flowstack-ui/brick/blob/main/docs/components/feed/README.md), [Swipeable Item](https://github.com/flowstack-ui/brick/blob/main/docs/components/swipeable-item/README.md) |
155
+ | Data display | [Aspect Ratio](https://github.com/flowstack-ui/brick/blob/main/docs/components/aspect-ratio/README.md), [Data Grid](https://github.com/flowstack-ui/brick/blob/main/docs/components/data-grid/README.md), [Tree Grid](https://github.com/flowstack-ui/brick/blob/main/docs/components/tree-grid/README.md), [Tree](https://github.com/flowstack-ui/brick/blob/main/docs/components/tree/README.md), [Feed](https://github.com/flowstack-ui/brick/blob/main/docs/components/feed/README.md), [Swipeable Item](https://github.com/flowstack-ui/brick/blob/main/docs/components/swipeable-item/README.md), [Carousel](https://github.com/flowstack-ui/brick/blob/main/docs/components/carousel/README.md) |
145
156
  | Forms and choices | [Form](https://github.com/flowstack-ui/brick/blob/main/docs/components/form/README.md), [Field](https://github.com/flowstack-ui/brick/blob/main/docs/components/field/README.md), [Fieldset](https://github.com/flowstack-ui/brick/blob/main/docs/components/fieldset/README.md), [Input](https://github.com/flowstack-ui/brick/blob/main/docs/components/input/README.md), [Number Input](https://github.com/flowstack-ui/brick/blob/main/docs/components/number-input/README.md), [OTP Field](https://github.com/flowstack-ui/brick/blob/main/docs/components/otp-field/README.md), [Password Toggle Field](https://github.com/flowstack-ui/brick/blob/main/docs/components/password-toggle-field/README.md), [Textarea](https://github.com/flowstack-ui/brick/blob/main/docs/components/textarea/README.md), [Select](https://github.com/flowstack-ui/brick/blob/main/docs/components/select/README.md), [Combobox](https://github.com/flowstack-ui/brick/blob/main/docs/components/combobox/README.md), [Multi Select](https://github.com/flowstack-ui/brick/blob/main/docs/components/multi-select/README.md), [File Upload](https://github.com/flowstack-ui/brick/blob/main/docs/components/file-upload/README.md), [Checkbox](https://github.com/flowstack-ui/brick/blob/main/docs/components/checkbox/README.md), [Checkbox Group](https://github.com/flowstack-ui/brick/blob/main/docs/components/checkbox-group/README.md), [Radio Group](https://github.com/flowstack-ui/brick/blob/main/docs/components/radio-group/README.md), [Switch](https://github.com/flowstack-ui/brick/blob/main/docs/components/switch/README.md), [Slider](https://github.com/flowstack-ui/brick/blob/main/docs/components/slider/README.md), [Rating](https://github.com/flowstack-ui/brick/blob/main/docs/components/rating/README.md) |
146
157
  | Content and status | [Text](https://github.com/flowstack-ui/brick/blob/main/docs/components/text/README.md), [Icon](https://github.com/flowstack-ui/brick/blob/main/docs/components/icon/README.md), [Image](https://github.com/flowstack-ui/brick/blob/main/docs/components/image/README.md), [Code](https://github.com/flowstack-ui/brick/blob/main/docs/components/code/README.md), [Code Block](https://github.com/flowstack-ui/brick/blob/main/docs/components/code-block/README.md), [Avatar](https://github.com/flowstack-ui/brick/blob/main/docs/components/avatar/README.md), [Badge](https://github.com/flowstack-ui/brick/blob/main/docs/components/badge/README.md), [Chip](https://github.com/flowstack-ui/brick/blob/main/docs/components/chip/README.md), [Notification Badge](https://github.com/flowstack-ui/brick/blob/main/docs/components/notification-badge/README.md), [Card](https://github.com/flowstack-ui/brick/blob/main/docs/components/card/README.md), [List](https://github.com/flowstack-ui/brick/blob/main/docs/components/list/README.md), [Table](https://github.com/flowstack-ui/brick/blob/main/docs/components/table/README.md), [Divider](https://github.com/flowstack-ui/brick/blob/main/docs/components/divider/README.md), [Collapsible](https://github.com/flowstack-ui/brick/blob/main/docs/components/collapsible/README.md), [Accordion](https://github.com/flowstack-ui/brick/blob/main/docs/components/accordion/README.md), [Skeleton](https://github.com/flowstack-ui/brick/blob/main/docs/components/skeleton/README.md), [Progress](https://github.com/flowstack-ui/brick/blob/main/docs/components/progress/README.md), [Progress Circle](https://github.com/flowstack-ui/brick/blob/main/docs/components/progress-circle/README.md), [Toast](https://github.com/flowstack-ui/brick/blob/main/docs/components/toast/README.md) |
147
158
  | Contextual overlays | [Tooltip](https://github.com/flowstack-ui/brick/blob/main/docs/components/tooltip/README.md), [Hover Card](https://github.com/flowstack-ui/brick/blob/main/docs/components/hover-card/README.md), [Popover](https://github.com/flowstack-ui/brick/blob/main/docs/components/popover/README.md), [Dropdown Menu](https://github.com/flowstack-ui/brick/blob/main/docs/components/dropdown-menu/README.md), [Context Menu](https://github.com/flowstack-ui/brick/blob/main/docs/components/context-menu/README.md), [Menubar](https://github.com/flowstack-ui/brick/blob/main/docs/components/menubar/README.md) |
148
159
  | Modal surfaces | [Dialog](https://github.com/flowstack-ui/brick/blob/main/docs/components/dialog/README.md), [Alert Dialog](https://github.com/flowstack-ui/brick/blob/main/docs/components/alert-dialog/README.md), [Drawer](https://github.com/flowstack-ui/brick/blob/main/docs/components/drawer/README.md) |
149
- | Navigation and layout | [Breadcrumb](https://github.com/flowstack-ui/brick/blob/main/docs/components/breadcrumb/README.md), [Tabs](https://github.com/flowstack-ui/brick/blob/main/docs/components/tabs/README.md), [Navigation Menu](https://github.com/flowstack-ui/brick/blob/main/docs/components/navigation-menu/README.md), [Bottom Navigation](https://github.com/flowstack-ui/brick/blob/main/docs/components/bottom-navigation/README.md), [Link](https://github.com/flowstack-ui/brick/blob/main/docs/components/link/README.md), [Nav List](https://github.com/flowstack-ui/brick/blob/main/docs/components/nav-list/README.md), [Sidebar](https://github.com/flowstack-ui/brick/blob/main/docs/components/sidebar/README.md), [App Bar](https://github.com/flowstack-ui/brick/blob/main/docs/components/app-bar/README.md), [Stack](https://github.com/flowstack-ui/brick/blob/main/docs/components/stack/README.md), [Grid](https://github.com/flowstack-ui/brick/blob/main/docs/components/grid/README.md), [Container](https://github.com/flowstack-ui/brick/blob/main/docs/components/container/README.md), [Show](https://github.com/flowstack-ui/brick/blob/main/docs/components/show/README.md), [Hide](https://github.com/flowstack-ui/brick/blob/main/docs/components/hide/README.md), [Surface](https://github.com/flowstack-ui/brick/blob/main/docs/components/surface/README.md), [Scroll Area](https://github.com/flowstack-ui/brick/blob/main/docs/components/scroll-area/README.md) |
160
+ | Navigation and layout | [Appearance](https://github.com/flowstack-ui/brick/blob/main/docs/components/appearance/README.md), [Breadcrumb](https://github.com/flowstack-ui/brick/blob/main/docs/components/breadcrumb/README.md), [Tabs](https://github.com/flowstack-ui/brick/blob/main/docs/components/tabs/README.md), [Navigation Menu](https://github.com/flowstack-ui/brick/blob/main/docs/components/navigation-menu/README.md), [Bottom Navigation](https://github.com/flowstack-ui/brick/blob/main/docs/components/bottom-navigation/README.md), [Link](https://github.com/flowstack-ui/brick/blob/main/docs/components/link/README.md), [Nav List](https://github.com/flowstack-ui/brick/blob/main/docs/components/nav-list/README.md), [Sidebar](https://github.com/flowstack-ui/brick/blob/main/docs/components/sidebar/README.md), [App Bar](https://github.com/flowstack-ui/brick/blob/main/docs/components/app-bar/README.md), [Stack](https://github.com/flowstack-ui/brick/blob/main/docs/components/stack/README.md), [Grid](https://github.com/flowstack-ui/brick/blob/main/docs/components/grid/README.md), [Container](https://github.com/flowstack-ui/brick/blob/main/docs/components/container/README.md), [Section](https://github.com/flowstack-ui/brick/blob/main/docs/components/section/README.md), [Frame](https://github.com/flowstack-ui/brick/blob/main/docs/components/frame/README.md), [Show](https://github.com/flowstack-ui/brick/blob/main/docs/components/show/README.md), [Hide](https://github.com/flowstack-ui/brick/blob/main/docs/components/hide/README.md), [Surface](https://github.com/flowstack-ui/brick/blob/main/docs/components/surface/README.md), [Scroll Area](https://github.com/flowstack-ui/brick/blob/main/docs/components/scroll-area/README.md) |
161
+ | Depth layout | [ZStack](https://github.com/flowstack-ui/brick/blob/main/docs/components/z-stack/README.md) |
150
162
 
151
163
  ## Package boundary
152
164
 
package/dist/agents/accordion.json ADDED
@@ -0,0 +1,80 @@
1
+ {
2
+ "schema": "flowstack.agent-component.v1",
3
+ "id": "accordion",
4
+ "name": "Accordion",
5
+ "package": "@flowstack-ui/brick",
6
+ "layer": "brick",
7
+ "kind": "component",
8
+ "purpose": "Present a finished group of related disclosure sections while Atom owns expanded state, headings, linked panels, and keyboard navigation.",
9
+ "useWhen": [
10
+ "Several related sections belong to one scannable group and readers should reveal only the details they need."
11
+ ],
12
+ "avoidWhen": [
13
+ {
14
+ "condition": "Only one independent in-flow region needs disclosure.",
15
+ "useInstead": "Collapsible"
16
+ },
17
+ {
18
+ "condition": "Peer controls switch one shared content view.",
19
+ "useInstead": "Tabs"
20
+ },
21
+ {
22
+ "condition": "Content must layer, dismiss outside, contain focus, or lock document scrolling.",
23
+ "useInstead": "Dialog, Drawer, or another matching overlay component"
24
+ }
25
+ ],
26
+ "composition": [
27
+ "Compose Root > Item > Header > Trigger with Indicator inside Trigger, then place Content > ContentInner as Header's sibling inside the same Item.",
28
+ "Put visible panel padding and ordinary Brick layout in ContentInner so Content remains Atom's measured motion boundary.",
29
+ "Choose Header levels from the host document and use Content landmark=false when many regions would make landmark navigation noisy."
30
+ ],
31
+ "rules": [
32
+ {
33
+ "id": "accordion-complete-anatomy",
34
+ "level": "must",
35
+ "statement": "Use Root, Item, Header, Trigger, Content, and ContentInner rather than rebuilding disclosure state, relationships, measurement, or animation lifecycle."
36
+ },
37
+ {
38
+ "id": "accordion-single-trigger-owner",
39
+ "level": "must",
40
+ "statement": "Let Accordion Trigger own the finished control recipe; do not compose Button or IconButton into Trigger because competing recipes would own one element."
41
+ },
42
+ {
43
+ "id": "accordion-content-inner",
44
+ "level": "must",
45
+ "statement": "Keep visible padding and panel layout in ContentInner rather than Content so Atom can measure and animate the panel accurately."
46
+ },
47
+ {
48
+ "id": "accordion-heading-landmarks",
49
+ "level": "must",
50
+ "statement": "Choose Header level from the page outline and opt out of optional Content landmarks when the resulting region count would be noisy."
51
+ },
52
+ {
53
+ "id": "accordion-css",
54
+ "level": "must",
55
+ "statement": "Load styles.css or core.css plus accordion.css."
56
+ }
57
+ ],
58
+ "commonMistakes": [
59
+ {
60
+ "mistake": "Using Accordion for one disclosure, nesting a finished Button in Trigger, or placing padding directly on Content.",
61
+ "correction": "Use Collapsible for one region, let Trigger own its visual recipe, and put panel spacing in ContentInner."
62
+ },
63
+ {
64
+ "mistake": "Accepting the default heading level or region landmark count without checking the host page.",
65
+ "correction": "Set Header to the correct document level and use landmark=false when many open panels would create excessive landmarks."
66
+ }
67
+ ],
68
+ "validation": [
69
+ "Check complete anatomy, unique values, heading order, Trigger names, linked panel relationships, landmark usefulness, and CSS delivery.",
70
+ "Test Enter, Space, Home, End, orientation-aware arrows, RTL, disabled and locked-open state, single and multiple modes, and controlled and uncontrolled state.",
71
+ "Test initial open, open and close motion, dynamic panel measurement, reduced motion, focus geometry, long labels, narrow widths, zoom, and forced colors."
72
+ ],
73
+ "related": [
74
+ "collapsible",
75
+ "tabs",
76
+ "drawer",
77
+ "stack",
78
+ "text"
79
+ ]
80
+ }
package/dist/agents/accordion.md ADDED
@@ -0,0 +1,48 @@
1
+ # Accordion agent guide
2
+
3
+ ## Purpose
4
+
5
+ Present a finished group of related disclosure sections while Atom owns expanded state, headings, linked panels, and keyboard navigation.
6
+
7
+ ## Use when
8
+
9
+ - Several related sections belong to one scannable group and readers should reveal only the details they need.
10
+
11
+ ## Choose something else when
12
+
13
+ - Only one independent in-flow region needs disclosure. Use Collapsible.
14
+ - Peer controls switch one shared content view. Use Tabs.
15
+ - Content must layer, dismiss outside, contain focus, or lock document scrolling. Use Dialog, Drawer, or another matching overlay component.
16
+
17
+ ## Required composition
18
+
19
+ - Compose Root > Item > Header > Trigger with Indicator inside Trigger, then place Content > ContentInner as Header's sibling inside the same Item.
20
+ - Put visible panel padding and ordinary Brick layout in ContentInner so Content remains Atom's measured motion boundary.
21
+ - Choose Header levels from the host document and use Content landmark=false when many regions would make landmark navigation noisy.
22
+
23
+ ## Rules
24
+
25
+ - **MUST:** Use Root, Item, Header, Trigger, Content, and ContentInner rather than rebuilding disclosure state, relationships, measurement, or animation lifecycle.
26
+ - **MUST:** Let Accordion Trigger own the finished control recipe; do not compose Button or IconButton into Trigger because competing recipes would own one element.
27
+ - **MUST:** Keep visible padding and panel layout in ContentInner rather than Content so Atom can measure and animate the panel accurately.
28
+ - **MUST:** Choose Header level from the page outline and opt out of optional Content landmarks when the resulting region count would be noisy.
29
+ - **MUST:** Load styles.css or core.css plus accordion.css.
30
+
31
+ ## Common mistakes
32
+
33
+ - **Avoid:** Using Accordion for one disclosure, nesting a finished Button in Trigger, or placing padding directly on Content. **Instead:** Use Collapsible for one region, let Trigger own its visual recipe, and put panel spacing in ContentInner.
34
+ - **Avoid:** Accepting the default heading level or region landmark count without checking the host page. **Instead:** Set Header to the correct document level and use landmark=false when many open panels would create excessive landmarks.
35
+
36
+ ## Validation checklist
37
+
38
+ - Check complete anatomy, unique values, heading order, Trigger names, linked panel relationships, landmark usefulness, and CSS delivery.
39
+ - Test Enter, Space, Home, End, orientation-aware arrows, RTL, disabled and locked-open state, single and multiple modes, and controlled and uncontrolled state.
40
+ - Test initial open, open and close motion, dynamic panel measurement, reduced motion, focus geometry, long labels, narrow widths, zoom, and forced colors.
41
+
42
+ ## Related guidance
43
+
44
+ - `collapsible`
45
+ - `tabs`
46
+ - `drawer`
47
+ - `stack`
48
+ - `text`
package/dist/agents/app-bar.json CHANGED
@@ -16,9 +16,19 @@
16
16
  }
17
17
  ],
18
18
  "composition": [
19
- "Compose Root > Toolbar > Start, Center, and End, then place Brick brand, navigation, text, and action components in the matching sections."
19
+ "Root renders a semantic header by default. For a contained full-bleed bar, compose Root > Container > Toolbar > Start, Center, and End; omit Container only when Toolbar should use the full available width."
20
20
  ],
21
21
  "rules": [
22
+ {
23
+ "id": "appbar-root-semantics",
24
+ "level": "must",
25
+ "statement": "Keep AppBar.Root's default header when it owns page or application banner content; use asChild or render only when another semantic or neutral host is intentionally required, such as non-banner chrome inside a Drawer."
26
+ },
27
+ {
28
+ "id": "appbar-container-owner",
29
+ "level": "must",
30
+ "statement": "Place Container between Root and Toolbar when the AppBar surface should remain full bleed while its content uses a bounded measure; do not cap Root itself or recreate Toolbar geometry."
31
+ },
22
32
  {
23
33
  "id": "appbar-structural-toolbar",
24
34
  "level": "must",
@@ -29,6 +39,11 @@
29
39
  "level": "must",
30
40
  "statement": "Keep application-specific visibility and wrapping policy outside AppBar and implement it with Brick responsive/layout components."
31
41
  },
42
+ {
43
+ "id": "appbar-density-measurement",
44
+ "level": "must",
45
+ "statement": "When application layout references an App Bar density measurement, use the matching public comfortable or compact minimum block-size token instead of repeating Brick's value; allow the rendered bar and adjacent content to grow under zoom or enlarged content."
46
+ },
32
47
  {
33
48
  "id": "appbar-css",
34
49
  "level": "must",
@@ -37,15 +52,17 @@
37
52
  ],
38
53
  "commonMistakes": [
39
54
  {
40
- "mistake": "Hand-building a header row with div and flex CSS or expecting AppBar to create menus and breakpoints.",
41
- "correction": "Use AppBar for the top surface and compose the dedicated navigation, layout, and visibility owners inside it."
55
+ "mistake": "Hand-building a header row with div and flex CSS, assuming Root defaults to div, capping the full AppBar surface with application width CSS, or expecting AppBar to create menus and breakpoints.",
56
+ "correction": "Use Root's default header for banner content, place Container around Toolbar when content needs a measure, and compose the dedicated navigation, layout, and visibility owners inside it."
42
57
  }
43
58
  ],
44
59
  "validation": [
60
+ "Check the final Root element and landmark ownership, including non-banner composed hosts.",
45
61
  "Check geometric centering with unequal side content, truncation, zoom, narrow widths, and RTL.",
46
62
  "Confirm landmark names, actions, navigation, and modular CSS are complete."
47
63
  ],
48
64
  "related": [
65
+ "container",
49
66
  "toolbar",
50
67
  "navigation-menu",
51
68
  "nav-list",
package/dist/agents/app-bar.md CHANGED
@@ -14,25 +14,30 @@ Provide a finished top surface and one-row start, geometrically centered, and en
14
14
 
15
15
  ## Required composition
16
16
 
17
- - Compose Root > Toolbar > Start, Center, and End, then place Brick brand, navigation, text, and action components in the matching sections.
17
+ - Root renders a semantic header by default. For a contained full-bleed bar, compose Root > Container > Toolbar > Start, Center, and End; omit Container only when Toolbar should use the full available width.
18
18
 
19
19
  ## Rules
20
20
 
21
+ - **MUST:** Keep AppBar.Root's default header when it owns page or application banner content; use asChild or render only when another semantic or neutral host is intentionally required, such as non-banner chrome inside a Drawer.
22
+ - **MUST:** Place Container between Root and Toolbar when the AppBar surface should remain full bleed while its content uses a bounded measure; do not cap Root itself or recreate Toolbar geometry.
21
23
  - **MUST:** Do not treat AppBar.Toolbar as an ARIA toolbar; compose Toolbar for grouped-control keyboard behavior.
22
24
  - **MUST:** Keep application-specific visibility and wrapping policy outside AppBar and implement it with Brick responsive/layout components.
25
+ - **MUST:** When application layout references an App Bar density measurement, use the matching public comfortable or compact minimum block-size token instead of repeating Brick's value; allow the rendered bar and adjacent content to grow under zoom or enlarged content.
23
26
  - **MUST:** Load styles.css or core.css plus app-bar.css.
24
27
 
25
28
  ## Common mistakes
26
29
 
27
- - **Avoid:** Hand-building a header row with div and flex CSS or expecting AppBar to create menus and breakpoints. **Instead:** Use AppBar for the top surface and compose the dedicated navigation, layout, and visibility owners inside it.
30
+ - **Avoid:** Hand-building a header row with div and flex CSS, assuming Root defaults to div, capping the full AppBar surface with application width CSS, or expecting AppBar to create menus and breakpoints. **Instead:** Use Root's default header for banner content, place Container around Toolbar when content needs a measure, and compose the dedicated navigation, layout, and visibility owners inside it.
28
31
 
29
32
  ## Validation checklist
30
33
 
34
+ - Check the final Root element and landmark ownership, including non-banner composed hosts.
31
35
  - Check geometric centering with unequal side content, truncation, zoom, narrow widths, and RTL.
32
36
  - Confirm landmark names, actions, navigation, and modular CSS are complete.
33
37
 
34
38
  ## Related guidance
35
39
 
40
+ - `container`
36
41
  - `toolbar`
37
42
  - `navigation-menu`
38
43
  - `nav-list`
package/dist/agents/appearance.json ADDED
@@ -0,0 +1,84 @@
1
+ {
2
+ "schema": "flowstack.agent-component.v1",
3
+ "id": "appearance",
4
+ "name": "Appearance",
5
+ "package": "@flowstack-ui/brick",
6
+ "layer": "brick",
7
+ "kind": "component",
8
+ "purpose": "Apply one explicit light, dark, or inherited semantic-token boundary without adding visual paint, layout, state, or a required client provider.",
9
+ "useWhen": [
10
+ "A local region must use a different supported appearance from its DOM ancestor.",
11
+ "An existing Brick host should receive an appearance boundary without another wrapper.",
12
+ "Portalled visual roots must explicitly reproduce the appearance scope they left."
13
+ ],
14
+ "avoidWhen": [
15
+ {
16
+ "condition": "The whole application is selecting or persisting a user preference.",
17
+ "useInstead": "Application or framework appearance bootstrap on the document root"
18
+ },
19
+ {
20
+ "condition": "The region needs neutral background paint, inset, border, radius, or elevation.",
21
+ "useInstead": "Surface as the one direct child of Appearance when both paint and an appearance boundary are needed"
22
+ }
23
+ ],
24
+ "composition": [
25
+ "Pass exactly one existing DOM or Brick host to Appearance. That host may contain any number of descendants, must accept DOM props and a ref, and receives the boundary without a wrapper. For a portal, target a container inside the intended scope or apply Appearance to every portalled visual root."
26
+ ],
27
+ "rules": [
28
+ {
29
+ "id": "appearance-complete-theme",
30
+ "level": "must",
31
+ "statement": "Use Appearance only with a theme that supplies a complete appearance-dependent color and shadow assignment for the requested explicit appearance."
32
+ },
33
+ {
34
+ "id": "appearance-no-recoloring",
35
+ "level": "must",
36
+ "statement": "Do not recolor descendants component by component after establishing the scope."
37
+ },
38
+ {
39
+ "id": "appearance-single-host",
40
+ "level": "must",
41
+ "statement": "Pass exactly one existing host. Do not pass a Fragment, string, or multiple direct children; author a semantic host explicitly when the region does not already have one."
42
+ },
43
+ {
44
+ "id": "appearance-portal-explicit",
45
+ "level": "must",
46
+ "statement": "Do not assume a portal inherits the trigger's local CSS scope; preserve it with a scoped container or explicit portalled root scopes."
47
+ },
48
+ {
49
+ "id": "appearance-no-runtime-policy",
50
+ "level": "must",
51
+ "statement": "Keep saved preference, toggle state, storage, and pre-paint scripts in the application or framework layer."
52
+ },
53
+ {
54
+ "id": "appearance-css",
55
+ "level": "must",
56
+ "statement": "Load styles.css or styles/core.css plus appearance.css."
57
+ }
58
+ ],
59
+ "commonMistakes": [
60
+ {
61
+ "mistake": "Wrapping every region in Surface only to switch between light and dark.",
62
+ "correction": "Use Appearance; make Surface its direct child only when visual paint is also part of the job."
63
+ },
64
+ {
65
+ "mistake": "Defining branded light values only on the outer theme root.",
66
+ "correction": "Repeat the complete light semantic assignment at the theme's explicit light re-entry selector."
67
+ },
68
+ {
69
+ "mistake": "Opening a Drawer or Menu from a dark section and expecting its body portal to remain dark.",
70
+ "correction": "Use a scoped Portal container or apply the intended Appearance to its portalled visual roots."
71
+ }
72
+ ],
73
+ "validation": [
74
+ "Inspect the DOM and confirm Appearance adds no wrapper while preserving child classes, styles, native props, handlers, component slot, and refs.",
75
+ "Test light to dark to light and dark to light to dark with representative controls and interaction states.",
76
+ "Test every used portalled family, native controls, contrast, forced colors, SSR, and hydration."
77
+ ],
78
+ "related": [
79
+ "surface",
80
+ "app-bar",
81
+ "drawer",
82
+ "tabs"
83
+ ]
84
+ }
package/dist/agents/appearance.md ADDED
@@ -0,0 +1,48 @@
1
+ # Appearance agent guide
2
+
3
+ ## Purpose
4
+
5
+ Apply one explicit light, dark, or inherited semantic-token boundary without adding visual paint, layout, state, or a required client provider.
6
+
7
+ ## Use when
8
+
9
+ - A local region must use a different supported appearance from its DOM ancestor.
10
+ - An existing Brick host should receive an appearance boundary without another wrapper.
11
+ - Portalled visual roots must explicitly reproduce the appearance scope they left.
12
+
13
+ ## Choose something else when
14
+
15
+ - The whole application is selecting or persisting a user preference. Use Application or framework appearance bootstrap on the document root.
16
+ - The region needs neutral background paint, inset, border, radius, or elevation. Use Surface as the one direct child of Appearance when both paint and an appearance boundary are needed.
17
+
18
+ ## Required composition
19
+
20
+ - Pass exactly one existing DOM or Brick host to Appearance. That host may contain any number of descendants, must accept DOM props and a ref, and receives the boundary without a wrapper. For a portal, target a container inside the intended scope or apply Appearance to every portalled visual root.
21
+
22
+ ## Rules
23
+
24
+ - **MUST:** Use Appearance only with a theme that supplies a complete appearance-dependent color and shadow assignment for the requested explicit appearance.
25
+ - **MUST:** Do not recolor descendants component by component after establishing the scope.
26
+ - **MUST:** Pass exactly one existing host. Do not pass a Fragment, string, or multiple direct children; author a semantic host explicitly when the region does not already have one.
27
+ - **MUST:** Do not assume a portal inherits the trigger's local CSS scope; preserve it with a scoped container or explicit portalled root scopes.
28
+ - **MUST:** Keep saved preference, toggle state, storage, and pre-paint scripts in the application or framework layer.
29
+ - **MUST:** Load styles.css or styles/core.css plus appearance.css.
30
+
31
+ ## Common mistakes
32
+
33
+ - **Avoid:** Wrapping every region in Surface only to switch between light and dark. **Instead:** Use Appearance; make Surface its direct child only when visual paint is also part of the job.
34
+ - **Avoid:** Defining branded light values only on the outer theme root. **Instead:** Repeat the complete light semantic assignment at the theme's explicit light re-entry selector.
35
+ - **Avoid:** Opening a Drawer or Menu from a dark section and expecting its body portal to remain dark. **Instead:** Use a scoped Portal container or apply the intended Appearance to its portalled visual roots.
36
+
37
+ ## Validation checklist
38
+
39
+ - Inspect the DOM and confirm Appearance adds no wrapper while preserving child classes, styles, native props, handlers, component slot, and refs.
40
+ - Test light to dark to light and dark to light to dark with representative controls and interaction states.
41
+ - Test every used portalled family, native controls, contrast, forced colors, SSR, and hydration.
42
+
43
+ ## Related guidance
44
+
45
+ - `surface`
46
+ - `app-bar`
47
+ - `drawer`
48
+ - `tabs`
package/dist/agents/badge.json ADDED
@@ -0,0 +1,64 @@
1
+ {
2
+ "schema": "flowstack.agent-component.v1",
3
+ "id": "badge",
4
+ "name": "Badge",
5
+ "package": "@flowstack-ui/brick",
6
+ "layer": "brick",
7
+ "kind": "component",
8
+ "purpose": "Present a short passive category, status, or metadata label with a complete Brick visual recipe.",
9
+ "useWhen": [
10
+ "A short non-interactive label needs a bounded visual treatment that remains understandable in its surrounding content."
11
+ ],
12
+ "avoidWhen": [
13
+ {
14
+ "condition": "The element performs an action, changes state, announces a live update, or displays a count attached to another element.",
15
+ "useInstead": "Button, an appropriate control, a live-status pattern, or NotificationBadge"
16
+ }
17
+ ],
18
+ "composition": [
19
+ "Place the short label directly in Badge; when an icon or separately styled Text is necessary, keep those children passive and let Badge own their spacing and foreground."
20
+ ],
21
+ "rules": [
22
+ {
23
+ "id": "badge-passive",
24
+ "level": "must",
25
+ "statement": "Keep Badge passive; do not add click, press, selection, or disclosure behavior to it."
26
+ },
27
+ {
28
+ "id": "badge-inherited-text",
29
+ "level": "must",
30
+ "statement": "When composing Text inside Badge, use tone=inherit unless that Text intentionally communicates a separate semantic tone, so the Badge recipe continues to own foreground contrast."
31
+ },
32
+ {
33
+ "id": "badge-child-spacing",
34
+ "level": "must",
35
+ "statement": "Rely on Badge's gap for an icon and label instead of literal whitespace, wrapper margins, or positional offsets."
36
+ },
37
+ {
38
+ "id": "badge-short-label",
39
+ "level": "must",
40
+ "statement": "Keep the label short and do not use Badge as a container for explanatory prose."
41
+ },
42
+ {
43
+ "id": "badge-css",
44
+ "level": "must",
45
+ "statement": "Load styles.css or core.css plus badge.css."
46
+ }
47
+ ],
48
+ "commonMistakes": [
49
+ {
50
+ "mistake": "Nesting default-tone Text in a Badge, manually spacing an icon and label, or using Badge as an eyebrow solely for uppercase styling.",
51
+ "correction": "Use plain Badge text when possible, tone=inherit for nested Text, Badge's own gap for children, and Text variant=eyebrow for a short editorial heading introduction."
52
+ }
53
+ ],
54
+ "validation": [
55
+ "Check label brevity, passive semantics, child spacing, foreground contrast for every variant and tone, zoom, forced colors, and RTL.",
56
+ "Confirm nested Text inherits the Badge foreground and CSS is loaded."
57
+ ],
58
+ "related": [
59
+ "text",
60
+ "icon",
61
+ "notification-badge",
62
+ "button"
63
+ ]
64
+ }
package/dist/agents/badge.md ADDED
@@ -0,0 +1,41 @@
1
+ # Badge agent guide
2
+
3
+ ## Purpose
4
+
5
+ Present a short passive category, status, or metadata label with a complete Brick visual recipe.
6
+
7
+ ## Use when
8
+
9
+ - A short non-interactive label needs a bounded visual treatment that remains understandable in its surrounding content.
10
+
11
+ ## Choose something else when
12
+
13
+ - The element performs an action, changes state, announces a live update, or displays a count attached to another element. Use Button, an appropriate control, a live-status pattern, or NotificationBadge.
14
+
15
+ ## Required composition
16
+
17
+ - Place the short label directly in Badge; when an icon or separately styled Text is necessary, keep those children passive and let Badge own their spacing and foreground.
18
+
19
+ ## Rules
20
+
21
+ - **MUST:** Keep Badge passive; do not add click, press, selection, or disclosure behavior to it.
22
+ - **MUST:** When composing Text inside Badge, use tone=inherit unless that Text intentionally communicates a separate semantic tone, so the Badge recipe continues to own foreground contrast.
23
+ - **MUST:** Rely on Badge's gap for an icon and label instead of literal whitespace, wrapper margins, or positional offsets.
24
+ - **MUST:** Keep the label short and do not use Badge as a container for explanatory prose.
25
+ - **MUST:** Load styles.css or core.css plus badge.css.
26
+
27
+ ## Common mistakes
28
+
29
+ - **Avoid:** Nesting default-tone Text in a Badge, manually spacing an icon and label, or using Badge as an eyebrow solely for uppercase styling. **Instead:** Use plain Badge text when possible, tone=inherit for nested Text, Badge's own gap for children, and Text variant=eyebrow for a short editorial heading introduction.
30
+
31
+ ## Validation checklist
32
+
33
+ - Check label brevity, passive semantics, child spacing, foreground contrast for every variant and tone, zoom, forced colors, and RTL.
34
+ - Confirm nested Text inherits the Badge foreground and CSS is loaded.
35
+
36
+ ## Related guidance
37
+
38
+ - `text`
39
+ - `icon`
40
+ - `notification-badge`
41
+ - `button`
package/dist/agents/card.json CHANGED
@@ -28,6 +28,11 @@
28
28
  "id": "card-css",
29
29
  "level": "must",
30
30
  "statement": "Load styles.css or core.css plus card.css and styles for nested components."
31
+ },
32
+ {
33
+ "id": "card-borderless-media",
34
+ "level": "should",
35
+ "statement": "Use bordered={false} when edge-to-edge authored media should meet Card's clipped outer boundary without retaining the selected recipe's border; do not remove that geometry with application CSS."
31
36
  }
32
37
  ],
33
38
  "commonMistakes": [
package/dist/agents/card.md CHANGED
@@ -20,6 +20,7 @@ Group content about one subject in a finished static compound surface with heade
20
20
 
21
21
  - **MUST:** Do not turn the whole Card into an unnamed clickable div; place explicit Link or Button controls inside or use a valid link composition.
22
22
  - **MUST:** Load styles.css or core.css plus card.css and styles for nested components.
23
+ - **SHOULD:** Use bordered={false} when edge-to-edge authored media should meet Card's clipped outer boundary without retaining the selected recipe's border; do not remove that geometry with application CSS.
23
24
 
24
25
  ## Common mistakes
25
26