@flowstack-ui/brick 0.1.5 → 0.1.9

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 (343) hide show
  1. package/README.md +18 -3
  2. package/dist/agents/accordion.json +89 -0
  3. package/dist/agents/accordion.md +50 -0
  4. package/dist/agents/app-bar.json +5 -0
  5. package/dist/agents/app-bar.md +1 -0
  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 +1 -1
  19. package/dist/agents/divider.md +1 -1
  20. package/dist/agents/drawer.json +11 -1
  21. package/dist/agents/drawer.md +3 -0
  22. package/dist/agents/frame.json +74 -0
  23. package/dist/agents/frame.md +47 -0
  24. package/dist/agents/grid.json +9 -0
  25. package/dist/agents/grid.md +2 -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 +143 -6
  31. package/dist/agents/interface-composition.md +40 -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/scroll-area.json +8 -3
  38. package/dist/agents/scroll-area.md +4 -3
  39. package/dist/agents/section.json +65 -0
  40. package/dist/agents/section.md +42 -0
  41. package/dist/agents/stack.json +29 -5
  42. package/dist/agents/stack.md +14 -4
  43. package/dist/agents/surface.json +52 -4
  44. package/dist/agents/surface.md +16 -2
  45. package/dist/agents/tabs.json +17 -2
  46. package/dist/agents/tabs.md +8 -1
  47. package/dist/agents/text.json +14 -4
  48. package/dist/agents/text.md +5 -3
  49. package/dist/agents/z-stack.json +66 -0
  50. package/dist/agents/z-stack.md +41 -0
  51. package/dist/appearance.d.ts +2 -0
  52. package/dist/appearance.d.ts.map +1 -0
  53. package/dist/appearance.js +2 -0
  54. package/dist/appearance.js.map +1 -0
  55. package/dist/carousel.d.ts +3 -0
  56. package/dist/carousel.d.ts.map +1 -0
  57. package/dist/carousel.js +3 -0
  58. package/dist/carousel.js.map +1 -0
  59. package/dist/components/_responsive-value/ResponsiveValue.d.ts +9 -0
  60. package/dist/components/_responsive-value/ResponsiveValue.d.ts.map +1 -0
  61. package/dist/components/_responsive-value/ResponsiveValue.js +22 -0
  62. package/dist/components/_responsive-value/ResponsiveValue.js.map +1 -0
  63. package/dist/components/appearance/Appearance.d.ts +14 -0
  64. package/dist/components/appearance/Appearance.d.ts.map +1 -0
  65. package/dist/components/appearance/Appearance.js +39 -0
  66. package/dist/components/appearance/Appearance.js.map +1 -0
  67. package/dist/components/appearance/index.d.ts +2 -0
  68. package/dist/components/appearance/index.d.ts.map +1 -0
  69. package/dist/components/appearance/index.js +2 -0
  70. package/dist/components/appearance/index.js.map +1 -0
  71. package/dist/components/card/Card.d.ts +1 -0
  72. package/dist/components/card/Card.d.ts.map +1 -1
  73. package/dist/components/card/Card.js +2 -1
  74. package/dist/components/card/Card.js.map +1 -1
  75. package/dist/components/carousel/Carousel.d.ts +80 -0
  76. package/dist/components/carousel/Carousel.d.ts.map +1 -0
  77. package/dist/components/carousel/Carousel.js +90 -0
  78. package/dist/components/carousel/Carousel.js.map +1 -0
  79. package/dist/components/carousel/index.d.ts +2 -0
  80. package/dist/components/carousel/index.d.ts.map +1 -0
  81. package/dist/components/carousel/index.js +2 -0
  82. package/dist/components/carousel/index.js.map +1 -0
  83. package/dist/components/divider/Divider.js +2 -2
  84. package/dist/components/divider/Divider.js.map +1 -1
  85. package/dist/components/frame/Frame.d.ts +28 -0
  86. package/dist/components/frame/Frame.d.ts.map +1 -0
  87. package/dist/components/frame/Frame.js +84 -0
  88. package/dist/components/frame/Frame.js.map +1 -0
  89. package/dist/components/frame/index.d.ts +2 -0
  90. package/dist/components/frame/index.d.ts.map +1 -0
  91. package/dist/components/frame/index.js +2 -0
  92. package/dist/components/frame/index.js.map +1 -0
  93. package/dist/components/grid/Grid.d.ts +19 -9
  94. package/dist/components/grid/Grid.d.ts.map +1 -1
  95. package/dist/components/grid/Grid.js +26 -10
  96. package/dist/components/grid/Grid.js.map +1 -1
  97. package/dist/components/grid/index.d.ts +1 -1
  98. package/dist/components/grid/index.d.ts.map +1 -1
  99. package/dist/components/grid/index.js.map +1 -1
  100. package/dist/components/image/Image.d.ts +4 -0
  101. package/dist/components/image/Image.d.ts.map +1 -1
  102. package/dist/components/image/Image.js +4 -4
  103. package/dist/components/image/Image.js.map +1 -1
  104. package/dist/components/image/index.d.ts +1 -1
  105. package/dist/components/image/index.d.ts.map +1 -1
  106. package/dist/components/image/index.js +1 -1
  107. package/dist/components/image/index.js.map +1 -1
  108. package/dist/components/section/Section.d.ts +18 -0
  109. package/dist/components/section/Section.d.ts.map +1 -0
  110. package/dist/components/section/Section.js +29 -0
  111. package/dist/components/section/Section.js.map +1 -0
  112. package/dist/components/section/index.d.ts +2 -0
  113. package/dist/components/section/index.d.ts.map +1 -0
  114. package/dist/components/section/index.js +2 -0
  115. package/dist/components/section/index.js.map +1 -0
  116. package/dist/components/stack/Stack.d.ts +33 -8
  117. package/dist/components/stack/Stack.d.ts.map +1 -1
  118. package/dist/components/stack/Stack.js +71 -14
  119. package/dist/components/stack/Stack.js.map +1 -1
  120. package/dist/components/stack/index.d.ts +1 -1
  121. package/dist/components/stack/index.d.ts.map +1 -1
  122. package/dist/components/stack/index.js.map +1 -1
  123. package/dist/components/surface/Surface.d.ts +41 -3
  124. package/dist/components/surface/Surface.d.ts.map +1 -1
  125. package/dist/components/surface/Surface.js +79 -6
  126. package/dist/components/surface/Surface.js.map +1 -1
  127. package/dist/components/surface/index.d.ts +1 -1
  128. package/dist/components/surface/index.d.ts.map +1 -1
  129. package/dist/components/surface/index.js +1 -1
  130. package/dist/components/surface/index.js.map +1 -1
  131. package/dist/components/tabs/Tabs.d.ts +27 -6
  132. package/dist/components/tabs/Tabs.d.ts.map +1 -1
  133. package/dist/components/tabs/Tabs.js +10 -6
  134. package/dist/components/tabs/Tabs.js.map +1 -1
  135. package/dist/components/tabs/index.d.ts +1 -1
  136. package/dist/components/tabs/index.d.ts.map +1 -1
  137. package/dist/components/tabs/index.js.map +1 -1
  138. package/dist/components/z-stack/ZStack.d.ts +43 -0
  139. package/dist/components/z-stack/ZStack.d.ts.map +1 -0
  140. package/dist/components/z-stack/ZStack.js +70 -0
  141. package/dist/components/z-stack/ZStack.js.map +1 -0
  142. package/dist/components/z-stack/index.d.ts +2 -0
  143. package/dist/components/z-stack/index.d.ts.map +1 -0
  144. package/dist/components/z-stack/index.js +2 -0
  145. package/dist/components/z-stack/index.js.map +1 -0
  146. package/dist/frame.d.ts +2 -0
  147. package/dist/frame.d.ts.map +1 -0
  148. package/dist/frame.js +2 -0
  149. package/dist/frame.js.map +1 -0
  150. package/dist/grid.d.ts +1 -1
  151. package/dist/grid.d.ts.map +1 -1
  152. package/dist/grid.js.map +1 -1
  153. package/dist/image.d.ts +1 -1
  154. package/dist/image.d.ts.map +1 -1
  155. package/dist/image.js +1 -1
  156. package/dist/image.js.map +1 -1
  157. package/dist/index.d.ts +9 -4
  158. package/dist/index.d.ts.map +1 -1
  159. package/dist/index.js +7 -2
  160. package/dist/index.js.map +1 -1
  161. package/dist/section.d.ts +2 -0
  162. package/dist/section.d.ts.map +1 -0
  163. package/dist/section.js +2 -0
  164. package/dist/section.js.map +1 -0
  165. package/dist/stack.d.ts +1 -1
  166. package/dist/stack.d.ts.map +1 -1
  167. package/dist/stack.js.map +1 -1
  168. package/dist/styles/accordion.css +1 -1
  169. package/dist/styles/accordion.css.map +1 -1
  170. package/dist/styles/alert-dialog.css +1 -1
  171. package/dist/styles/alert-dialog.css.map +1 -1
  172. package/dist/styles/app-bar.css +1 -1
  173. package/dist/styles/app-bar.css.map +1 -1
  174. package/dist/styles/appearance.css +2 -0
  175. package/dist/styles/appearance.css.map +1 -0
  176. package/dist/styles/aspect-ratio.css +1 -1
  177. package/dist/styles/aspect-ratio.css.map +1 -1
  178. package/dist/styles/avatar.css +1 -1
  179. package/dist/styles/avatar.css.map +1 -1
  180. package/dist/styles/badge.css +1 -1
  181. package/dist/styles/badge.css.map +1 -1
  182. package/dist/styles/bottom-navigation.css +1 -1
  183. package/dist/styles/bottom-navigation.css.map +1 -1
  184. package/dist/styles/breadcrumb.css +1 -1
  185. package/dist/styles/breadcrumb.css.map +1 -1
  186. package/dist/styles/button.css +1 -1
  187. package/dist/styles/button.css.map +1 -1
  188. package/dist/styles/card.css +1 -1
  189. package/dist/styles/card.css.map +1 -1
  190. package/dist/styles/carousel.css +2 -0
  191. package/dist/styles/carousel.css.map +1 -0
  192. package/dist/styles/checkbox-group.css +1 -1
  193. package/dist/styles/checkbox-group.css.map +1 -1
  194. package/dist/styles/checkbox.css +1 -1
  195. package/dist/styles/checkbox.css.map +1 -1
  196. package/dist/styles/chip.css +1 -1
  197. package/dist/styles/chip.css.map +1 -1
  198. package/dist/styles/code-block.css +1 -1
  199. package/dist/styles/code-block.css.map +1 -1
  200. package/dist/styles/code.css +1 -1
  201. package/dist/styles/code.css.map +1 -1
  202. package/dist/styles/collapsible.css +1 -1
  203. package/dist/styles/collapsible.css.map +1 -1
  204. package/dist/styles/combobox.css +1 -1
  205. package/dist/styles/combobox.css.map +1 -1
  206. package/dist/styles/container.css +1 -1
  207. package/dist/styles/container.css.map +1 -1
  208. package/dist/styles/context-menu.css +1 -1
  209. package/dist/styles/context-menu.css.map +1 -1
  210. package/dist/styles/core.css +1 -1
  211. package/dist/styles/core.css.map +1 -1
  212. package/dist/styles/data-grid.css +1 -1
  213. package/dist/styles/data-grid.css.map +1 -1
  214. package/dist/styles/dialog.css +1 -1
  215. package/dist/styles/dialog.css.map +1 -1
  216. package/dist/styles/divider.css +1 -1
  217. package/dist/styles/divider.css.map +1 -1
  218. package/dist/styles/drawer.css +1 -1
  219. package/dist/styles/drawer.css.map +1 -1
  220. package/dist/styles/dropdown-menu.css +1 -1
  221. package/dist/styles/dropdown-menu.css.map +1 -1
  222. package/dist/styles/feed.css +1 -1
  223. package/dist/styles/feed.css.map +1 -1
  224. package/dist/styles/field.css +1 -1
  225. package/dist/styles/field.css.map +1 -1
  226. package/dist/styles/fieldset.css +1 -1
  227. package/dist/styles/fieldset.css.map +1 -1
  228. package/dist/styles/file-upload.css +1 -1
  229. package/dist/styles/file-upload.css.map +1 -1
  230. package/dist/styles/form.css +1 -1
  231. package/dist/styles/form.css.map +1 -1
  232. package/dist/styles/frame.css +2 -0
  233. package/dist/styles/frame.css.map +1 -0
  234. package/dist/styles/grid.css +1 -1
  235. package/dist/styles/grid.css.map +1 -1
  236. package/dist/styles/hide.css +1 -1
  237. package/dist/styles/hide.css.map +1 -1
  238. package/dist/styles/hover-card.css +1 -1
  239. package/dist/styles/hover-card.css.map +1 -1
  240. package/dist/styles/icon-button.css +1 -1
  241. package/dist/styles/icon-button.css.map +1 -1
  242. package/dist/styles/icon.css +1 -1
  243. package/dist/styles/icon.css.map +1 -1
  244. package/dist/styles/image.css +1 -1
  245. package/dist/styles/image.css.map +1 -1
  246. package/dist/styles/input.css +1 -1
  247. package/dist/styles/input.css.map +1 -1
  248. package/dist/styles/link.css +1 -1
  249. package/dist/styles/link.css.map +1 -1
  250. package/dist/styles/list.css +1 -1
  251. package/dist/styles/list.css.map +1 -1
  252. package/dist/styles/menubar.css +1 -1
  253. package/dist/styles/menubar.css.map +1 -1
  254. package/dist/styles/multi-select.css +1 -1
  255. package/dist/styles/multi-select.css.map +1 -1
  256. package/dist/styles/nav-list.css +1 -1
  257. package/dist/styles/nav-list.css.map +1 -1
  258. package/dist/styles/navigation-menu.css +1 -1
  259. package/dist/styles/navigation-menu.css.map +1 -1
  260. package/dist/styles/number-input.css +1 -1
  261. package/dist/styles/number-input.css.map +1 -1
  262. package/dist/styles/otp-field.css +1 -1
  263. package/dist/styles/otp-field.css.map +1 -1
  264. package/dist/styles/pagination.css +1 -1
  265. package/dist/styles/pagination.css.map +1 -1
  266. package/dist/styles/password-toggle-field.css +1 -1
  267. package/dist/styles/password-toggle-field.css.map +1 -1
  268. package/dist/styles/popover.css +1 -1
  269. package/dist/styles/popover.css.map +1 -1
  270. package/dist/styles/progress-circle.css +1 -1
  271. package/dist/styles/progress-circle.css.map +1 -1
  272. package/dist/styles/progress.css +1 -1
  273. package/dist/styles/progress.css.map +1 -1
  274. package/dist/styles/radio-group.css +1 -1
  275. package/dist/styles/radio-group.css.map +1 -1
  276. package/dist/styles/rating.css +1 -1
  277. package/dist/styles/rating.css.map +1 -1
  278. package/dist/styles/scroll-area.css +1 -1
  279. package/dist/styles/scroll-area.css.map +1 -1
  280. package/dist/styles/section.css +2 -0
  281. package/dist/styles/section.css.map +1 -0
  282. package/dist/styles/select.css +1 -1
  283. package/dist/styles/select.css.map +1 -1
  284. package/dist/styles/show.css +1 -1
  285. package/dist/styles/show.css.map +1 -1
  286. package/dist/styles/sidebar.css +1 -1
  287. package/dist/styles/sidebar.css.map +1 -1
  288. package/dist/styles/skeleton.css +1 -1
  289. package/dist/styles/skeleton.css.map +1 -1
  290. package/dist/styles/skip-link.css +1 -1
  291. package/dist/styles/skip-link.css.map +1 -1
  292. package/dist/styles/slider.css +1 -1
  293. package/dist/styles/slider.css.map +1 -1
  294. package/dist/styles/stack.css +1 -1
  295. package/dist/styles/stack.css.map +1 -1
  296. package/dist/styles/surface.css +1 -1
  297. package/dist/styles/surface.css.map +1 -1
  298. package/dist/styles/swipeable-item.css +1 -1
  299. package/dist/styles/swipeable-item.css.map +1 -1
  300. package/dist/styles/switch.css +1 -1
  301. package/dist/styles/switch.css.map +1 -1
  302. package/dist/styles/table.css +1 -1
  303. package/dist/styles/table.css.map +1 -1
  304. package/dist/styles/tabs.css +1 -1
  305. package/dist/styles/tabs.css.map +1 -1
  306. package/dist/styles/text.css +1 -1
  307. package/dist/styles/text.css.map +1 -1
  308. package/dist/styles/textarea.css +1 -1
  309. package/dist/styles/textarea.css.map +1 -1
  310. package/dist/styles/toast.css +1 -1
  311. package/dist/styles/toast.css.map +1 -1
  312. package/dist/styles/toggle-group.css +1 -1
  313. package/dist/styles/toggle-group.css.map +1 -1
  314. package/dist/styles/toggle.css +1 -1
  315. package/dist/styles/toggle.css.map +1 -1
  316. package/dist/styles/toolbar.css +1 -1
  317. package/dist/styles/toolbar.css.map +1 -1
  318. package/dist/styles/tooltip.css +1 -1
  319. package/dist/styles/tooltip.css.map +1 -1
  320. package/dist/styles/tree-grid.css +1 -1
  321. package/dist/styles/tree-grid.css.map +1 -1
  322. package/dist/styles/tree.css +1 -1
  323. package/dist/styles/tree.css.map +1 -1
  324. package/dist/styles/visually-hidden.css +1 -1
  325. package/dist/styles/visually-hidden.css.map +1 -1
  326. package/dist/styles/z-stack.css +2 -0
  327. package/dist/styles/z-stack.css.map +1 -0
  328. package/dist/styles.css +1 -1
  329. package/dist/styles.css.map +1 -1
  330. package/dist/surface.d.ts +1 -1
  331. package/dist/surface.d.ts.map +1 -1
  332. package/dist/surface.js +1 -1
  333. package/dist/surface.js.map +1 -1
  334. package/dist/theme-contract.json +23663 -0
  335. package/dist/tokens.css +1 -1
  336. package/dist/tokens.css.map +1 -1
  337. package/dist/z-stack.d.ts +2 -0
  338. package/dist/z-stack.d.ts.map +1 -0
  339. package/dist/z-stack.js +2 -0
  340. package/dist/z-stack.js.map +1 -0
  341. package/docs/guides/appearance-and-tokens.md +97 -1
  342. package/docs/guides/theme-contract.md +72 -0
  343. package/package.json +29 -4
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
@@ -128,12 +139,15 @@ Override public semantic variables with ordinary CSS:
128
139
  ```
129
140
 
130
141
  See [Appearance and tokens](docs/guides/appearance-and-tokens.md) for the full
131
- contract.
142
+ customization guide. Theme tooling can discover Brick's generated
143
+ [`flowstack.brick-theme-contract.v1`](docs/guides/theme-contract.md) artifact
144
+ through `@flowstack-ui/brick/theme-contract.json`.
132
145
 
133
146
  ## Documentation
134
147
 
135
148
  - [Installation and stylesheet setup](docs/guides/installation.md)
136
149
  - [Appearance and semantic tokens](docs/guides/appearance-and-tokens.md)
150
+ - [Generated theme contract](docs/guides/theme-contract.md)
137
151
 
138
152
  The complete component guides live with the source repository:
139
153
 
@@ -141,12 +155,13 @@ The complete component guides live with the source repository:
141
155
  | --- | --- |
142
156
  | 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
157
  | 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) |
158
+ | 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
159
  | 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
160
  | 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
161
  | 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
162
  | 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) |
163
+ | 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) |
164
+ | Depth layout | [ZStack](https://github.com/flowstack-ui/brick/blob/main/docs/components/z-stack/README.md) |
150
165
 
151
166
  ## Package boundary
152
167
 
package/dist/agents/accordion.json ADDED
@@ -0,0 +1,89 @@
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
+ "id": "accordion-grouped-focus-geometry",
59
+ "level": "must",
60
+ "statement": "Keep grouped trigger corners continuous with the enclosing Root and verify that the complete focus ring remains visible at the first and last group edges."
61
+ }
62
+ ],
63
+ "commonMistakes": [
64
+ {
65
+ "mistake": "Using Accordion for one disclosure, nesting a finished Button in Trigger, or placing padding directly on Content.",
66
+ "correction": "Use Collapsible for one region, let Trigger own its visual recipe, and put panel spacing in ContentInner."
67
+ },
68
+ {
69
+ "mistake": "Accepting the default heading level or region landmark count without checking the host page.",
70
+ "correction": "Set Header to the correct document level and use landmark=false when many open panels would create excessive landmarks."
71
+ },
72
+ {
73
+ "mistake": "Rounding every Trigger in one outlined group or clipping Root paint so the first and last Trigger focus rings are cut off.",
74
+ "correction": "Treat Root as the group silhouette, keep interior Trigger edges square, round only exposed group corners, and preserve visible focus outside the group boundary."
75
+ }
76
+ ],
77
+ "validation": [
78
+ "Check complete anatomy, unique values, heading order, Trigger names, linked panel relationships, landmark usefulness, and CSS delivery.",
79
+ "Test Enter, Space, Home, End, orientation-aware arrows, RTL, disabled and locked-open state, single and multiple modes, and controlled and uncontrolled state.",
80
+ "Test initial open, open and close motion, dynamic panel measurement, reduced motion, complete first and last Trigger focus geometry, continuous grouped corners, long labels, narrow widths, zoom, and forced colors."
81
+ ],
82
+ "related": [
83
+ "collapsible",
84
+ "tabs",
85
+ "drawer",
86
+ "stack",
87
+ "text"
88
+ ]
89
+ }
package/dist/agents/accordion.md ADDED
@@ -0,0 +1,50 @@
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
+ - **MUST:** Keep grouped trigger corners continuous with the enclosing Root and verify that the complete focus ring remains visible at the first and last group edges.
31
+
32
+ ## Common mistakes
33
+
34
+ - **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.
35
+ - **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.
36
+ - **Avoid:** Rounding every Trigger in one outlined group or clipping Root paint so the first and last Trigger focus rings are cut off. **Instead:** Treat Root as the group silhouette, keep interior Trigger edges square, round only exposed group corners, and preserve visible focus outside the group boundary.
37
+
38
+ ## Validation checklist
39
+
40
+ - Check complete anatomy, unique values, heading order, Trigger names, linked panel relationships, landmark usefulness, and CSS delivery.
41
+ - Test Enter, Space, Home, End, orientation-aware arrows, RTL, disabled and locked-open state, single and multiple modes, and controlled and uncontrolled state.
42
+ - Test initial open, open and close motion, dynamic panel measurement, reduced motion, complete first and last Trigger focus geometry, continuous grouped corners, long labels, narrow widths, zoom, and forced colors.
43
+
44
+ ## Related guidance
45
+
46
+ - `collapsible`
47
+ - `tabs`
48
+ - `drawer`
49
+ - `stack`
50
+ - `text`
package/dist/agents/app-bar.json CHANGED
@@ -39,6 +39,11 @@
39
39
  "level": "must",
40
40
  "statement": "Keep application-specific visibility and wrapping policy outside AppBar and implement it with Brick responsive/layout components."
41
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
+ },
42
47
  {
43
48
  "id": "appbar-css",
44
49
  "level": "must",
package/dist/agents/app-bar.md CHANGED
@@ -22,6 +22,7 @@ Provide a finished top surface and one-row start, geometrically centered, and en
22
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.
23
23
  - **MUST:** Do not treat AppBar.Toolbar as an ARIA toolbar; compose Toolbar for grouped-control keyboard behavior.
24
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.
25
26
  - **MUST:** Load styles.css or core.css plus app-bar.css.
26
27
 
27
28
  ## Common mistakes
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
 
package/dist/agents/carousel.json ADDED
@@ -0,0 +1,131 @@
1
+ {
2
+ "schema": "flowstack.agent-component.v1",
3
+ "id": "carousel",
4
+ "name": "Carousel",
5
+ "package": "@flowstack-ui/brick",
6
+ "layer": "brick",
7
+ "kind": "component",
8
+ "purpose": "Present one item or campaign at a time with optional navigation, picker dots, touch scrolling, and user-controlled rotation.",
9
+ "useWhen": [
10
+ "Several peer items benefit from sharing one bounded visual region.",
11
+ "A campaign hero needs multiple authored messages without placing them all in the initial viewport."
12
+ ],
13
+ "avoidWhen": [
14
+ {
15
+ "condition": "Every item must be visible for comparison or comprehension.",
16
+ "useInstead": "Grid, Stack, List, or Tabs"
17
+ },
18
+ {
19
+ "condition": "The content is only decorative image rotation.",
20
+ "useInstead": "a non-interactive media treatment that respects reduced motion"
21
+ }
22
+ ],
23
+ "composition": [
24
+ "Compose Root, Viewport, Track, and one Slide per unique value; add Navigation, Controls, Previous, Next, Picker, PickerItem, and RotationControl only when the product needs them.",
25
+ "In a React Server Component, import the subpath as a module namespace with import * as Carousel from '@flowstack-ui/brick/carousel'; use the frozen Carousel runtime object only inside client components.",
26
+ "When automatic rotation is enabled, always render RotationControl, Previous, and Next so people can stop and navigate the sequence; place RotationControl before Viewport in DOM order.",
27
+ "Build campaign-specific slide content from Brick layout, typography, action, and media components; Carousel does not own hero messaging or proof content.",
28
+ "When artwork, scrim, and copy form one peer campaign, compose a complete Surface with Media, Scrim, and Content inside each Slide; keep genuinely invariant evidence or navigation outside the rotating sequence.",
29
+ "When a parent already owns a stable block size, use Root fill to propagate it through Carousel's Viewport, Track, and Slides; continue sizing authored Surface, Content, and layout components explicitly.",
30
+ "Match Root radius to the visible containing geometry; use radius=none when an edge-to-edge square Surface owns the campaign boundary."
31
+ ],
32
+ "rules": [
33
+ {
34
+ "id": "carousel-optional-controls",
35
+ "level": "must",
36
+ "statement": "Treat arrows and picker dots as optional authored controls; dots represent direct slide selection and are not Tabs."
37
+ },
38
+ {
39
+ "id": "carousel-autoplay-control",
40
+ "level": "must",
41
+ "statement": "Never enable automatic rotation without a visible RotationControl and direct Previous and Next controls."
42
+ },
43
+ {
44
+ "id": "carousel-control-independence",
45
+ "level": "must",
46
+ "statement": "Keep picker treatment independent from arrow visibility; use Picker variant bare for dots without a capsule and Navigation visibility interaction only when arrows remain discoverable through focus, pointer, and touch."
47
+ },
48
+ {
49
+ "id": "carousel-quiet-rotation-control",
50
+ "level": "should",
51
+ "statement": "Use a compact xs ghost RotationControl when the required stop mechanism should remain visually quiet; never remove it while automatic rotation can run."
52
+ },
53
+ {
54
+ "id": "carousel-loop-direction",
55
+ "level": "must",
56
+ "statement": "Preserve requested direction at loop boundaries and never clone authored slide content, IDs, controls, or form fields."
57
+ },
58
+ {
59
+ "id": "carousel-initial-motion-gate",
60
+ "level": "must",
61
+ "statement": "Keep viewport motion instant until Atom exposes data-initialized; Brick's shipped Carousel CSS already enables smooth motion only after that signal."
62
+ },
63
+ {
64
+ "id": "carousel-stable-geometry",
65
+ "level": "should",
66
+ "statement": "Give campaign slides stable responsive geometry so changing the active slide does not move surrounding page content."
67
+ },
68
+ {
69
+ "id": "carousel-fill-ownership",
70
+ "level": "must",
71
+ "statement": "Treat fill as internal size propagation, not a viewport-height policy; the application or Block must establish the available parent height."
72
+ },
73
+ {
74
+ "id": "carousel-fill-parent",
75
+ "level": "must",
76
+ "statement": "Name the parent layout or section that establishes the definite block size before enabling fill; retain a real wrapper when that wrapper is the sizing box."
77
+ },
78
+ {
79
+ "id": "carousel-radius-visual-only",
80
+ "level": "must",
81
+ "statement": "Treat radius as Viewport and overlay-focus geometry only; it must not alter selection, scrolling, control placement, or slide anatomy."
82
+ },
83
+ {
84
+ "id": "carousel-overlay-safe-area",
85
+ "level": "must",
86
+ "statement": "When controls overlay slides, reserve application-owned content safe areas so arrows, rotation controls, and picker targets never obscure authored text or actions."
87
+ },
88
+ {
89
+ "id": "carousel-media-loading",
90
+ "level": "should",
91
+ "statement": "Prioritize only initially visible campaign media and defer non-current media when the image delivery layer supports it."
92
+ },
93
+ {
94
+ "id": "carousel-css",
95
+ "level": "must",
96
+ "statement": "Load styles.css or core.css plus carousel.css."
97
+ }
98
+ ],
99
+ "commonMistakes": [
100
+ {
101
+ "mistake": "Using Tabs for picker dots or hiding the only way to stop autoplay.",
102
+ "correction": "Use PickerItem buttons and render RotationControl whenever autoplay can run."
103
+ },
104
+ {
105
+ "mistake": "Putting unrelated proof rails or page sections inside every hero slide.",
106
+ "correction": "Rotate only the peer campaign content and keep stable page evidence outside the Carousel."
107
+ },
108
+ {
109
+ "mistake": "Rotating campaign copy while leaving campaign-specific artwork behind as one unrelated background.",
110
+ "correction": "Decide whether media is invariant or part of the campaign; when it communicates that campaign, place the complete Surface inside Slide."
111
+ },
112
+ {
113
+ "mistake": "Repeating block-size rules across Carousel Viewport, Track, and Slide.",
114
+ "correction": "Establish the parent height once and opt into Root fill; size only the authored content inside each Slide separately."
115
+ }
116
+ ],
117
+ "validation": [
118
+ "Check optional-control compositions, first and last boundaries in both directions, interaction-only arrow discovery, independent picker treatment, native horizontal touch scrolling, focus pause, hover pause, reduced motion, RTL, and screen-reader naming.",
119
+ "Confirm inactive slides are unavailable to focus and assistive technology, the overlay-safe Viewport focus indicator remains visible above slide media, control focus rings remain complete at rounded edges, overlay controls do not cover content, complete campaign media changes with its copy, and slide changes do not cause page-level layout shift."
120
+ ],
121
+ "related": [
122
+ "button",
123
+ "icon-button",
124
+ "image",
125
+ "surface",
126
+ "stack",
127
+ "grid",
128
+ "text",
129
+ "tabs"
130
+ ]
131
+ }