@felloinnovations/brand-kit 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (363) hide show
  1. package/AGENTS.md +198 -24
  2. package/CHANGELOG.md +197 -0
  3. package/README.md +34 -7
  4. package/design-system/01-how-claude-decides.md +26 -17
  5. package/design-system/02-principles.md +11 -6
  6. package/design-system/03-colour.md +134 -47
  7. package/design-system/04-type.md +45 -23
  8. package/design-system/05-space-and-layout.md +175 -52
  9. package/design-system/06-sizing-profiles.md +4 -4
  10. package/design-system/07-scrolling.md +66 -20
  11. package/design-system/08-choosing-components.md +50 -22
  12. package/design-system/09-charts.md +71 -28
  13. package/design-system/10-patterns.md +33 -10
  14. package/design-system/11-page-recipes.md +110 -23
  15. package/design-system/12-content.md +2 -1
  16. package/design-system/13-motion.md +330 -47
  17. package/design-system/14-accessibility.md +47 -24
  18. package/design-system/15-ai-experiences.md +11 -6
  19. package/design-system/16-creativity.md +1 -1
  20. package/design-system/17-decisions.md +357 -1
  21. package/design-system/18-checklist.md +79 -16
  22. package/design-system/19-public-pages.md +6 -4
  23. package/design-system/20-palettes.md +275 -0
  24. package/design-system/README.md +30 -17
  25. package/design-system/components/ActionList/README.md +96 -10
  26. package/design-system/components/ActionList/preview.html +52 -7
  27. package/design-system/components/ActionList/style.css +64 -0
  28. package/design-system/components/ActivityGrid/README.md +38 -2
  29. package/design-system/components/ActivityGrid/preview.html +1 -1
  30. package/design-system/components/ActivityGrid/style.css +35 -0
  31. package/design-system/components/AppShell/README.md +205 -75
  32. package/design-system/components/AppShell/preview.html +339 -58
  33. package/design-system/components/AppShell/style.css +154 -0
  34. package/design-system/components/Avatar/README.md +37 -10
  35. package/design-system/components/Avatar/preview.html +13 -4
  36. package/design-system/components/Avatar/style.css +14 -0
  37. package/design-system/components/Badge/README.md +41 -19
  38. package/design-system/components/Badge/preview.html +13 -10
  39. package/design-system/components/Badge/style.css +23 -0
  40. package/design-system/components/Banner/README.md +30 -9
  41. package/design-system/components/Banner/preview.html +1 -1
  42. package/design-system/components/Banner/style.css +19 -0
  43. package/design-system/components/Breadcrumb/README.md +58 -46
  44. package/design-system/components/Breadcrumb/preview.html +16 -16
  45. package/design-system/components/Breadcrumb/style.css +17 -0
  46. package/design-system/components/Button/README.md +113 -55
  47. package/design-system/components/Button/preview.html +98 -25
  48. package/design-system/components/Button/style.css +86 -0
  49. package/design-system/components/Card/README.md +158 -49
  50. package/design-system/components/Card/preview.html +141 -19
  51. package/design-system/components/Card/style.css +115 -0
  52. package/design-system/components/CardBoard/README.md +58 -37
  53. package/design-system/components/CardBoard/preview.html +26 -29
  54. package/design-system/components/ChatCard/README.md +115 -29
  55. package/design-system/components/ChatCard/preview.html +149 -32
  56. package/design-system/components/ChatCard/style.css +49 -0
  57. package/design-system/components/ChatShell/README.md +116 -0
  58. package/design-system/components/ChatShell/preview.html +201 -0
  59. package/design-system/components/ChatShell/style.css +86 -0
  60. package/design-system/components/ChatTurn/README.md +78 -35
  61. package/design-system/components/ChatTurn/preview.html +60 -28
  62. package/design-system/components/ChatTurn/style.css +50 -0
  63. package/design-system/components/CheckRow/README.md +141 -0
  64. package/design-system/components/CheckRow/preview.html +140 -0
  65. package/design-system/components/CheckRow/style.css +88 -0
  66. package/design-system/components/Checkbox/README.md +58 -22
  67. package/design-system/components/Checkbox/preview.html +112 -50
  68. package/design-system/components/Checkbox/style.css +45 -0
  69. package/design-system/components/Chip/README.md +78 -47
  70. package/design-system/components/Chip/preview.html +29 -4
  71. package/design-system/components/Chip/style.css +17 -0
  72. package/design-system/components/Combobox/README.md +44 -11
  73. package/design-system/components/Combobox/preview.html +35 -12
  74. package/design-system/components/Combobox/style.css +54 -0
  75. package/design-system/components/Composer/README.md +137 -35
  76. package/design-system/components/Composer/preview.html +115 -40
  77. package/design-system/components/Composer/style.css +81 -0
  78. package/design-system/components/ConfirmDialog/README.md +73 -52
  79. package/design-system/components/ConfirmDialog/preview.html +70 -26
  80. package/design-system/components/ConfirmDialog/style.css +5 -0
  81. package/design-system/components/Cover/preview.html +3 -3
  82. package/design-system/components/Cover/style.css +19 -0
  83. package/design-system/components/DateInput/README.md +77 -12
  84. package/design-system/components/DateInput/preview.html +27 -12
  85. package/design-system/components/DateInput/style.css +38 -0
  86. package/design-system/components/Dialog/README.md +112 -44
  87. package/design-system/components/Dialog/preview.html +141 -18
  88. package/design-system/components/Dialog/style.css +74 -0
  89. package/design-system/components/EmptyState/README.md +42 -12
  90. package/design-system/components/EmptyState/preview.html +11 -11
  91. package/design-system/components/EmptyState/style.css +9 -0
  92. package/design-system/components/EntryShell/README.md +73 -48
  93. package/design-system/components/EntryShell/preview.html +60 -27
  94. package/design-system/components/EntryShell/style.css +19 -0
  95. package/design-system/components/FeatureGrid/README.md +61 -39
  96. package/design-system/components/FeatureGrid/preview.html +2 -2
  97. package/design-system/components/FeatureGrid/style.css +20 -0
  98. package/design-system/components/FileUpload/README.md +33 -3
  99. package/design-system/components/FileUpload/preview.html +18 -4
  100. package/design-system/components/FileUpload/style.css +23 -0
  101. package/design-system/components/FilterBar/README.md +114 -0
  102. package/design-system/components/FilterBar/preview.html +82 -0
  103. package/design-system/components/FilterBar/style.css +22 -0
  104. package/design-system/components/Fold/README.md +84 -26
  105. package/design-system/components/Fold/preview.html +77 -34
  106. package/design-system/components/Fold/style.css +48 -0
  107. package/design-system/components/Footer/README.md +62 -39
  108. package/design-system/components/Footer/preview.html +5 -5
  109. package/design-system/components/Footer/style.css +30 -0
  110. package/design-system/components/FunnelBars/README.md +24 -3
  111. package/design-system/components/FunnelBars/preview.html +5 -5
  112. package/design-system/components/FunnelBars/style.css +13 -0
  113. package/design-system/components/GoalBars/README.md +54 -10
  114. package/design-system/components/GoalBars/preview.html +69 -28
  115. package/design-system/components/GoalBars/style.css +51 -0
  116. package/design-system/components/GoalTicks/README.md +74 -58
  117. package/design-system/components/GoalTicks/preview.html +41 -118
  118. package/design-system/components/GoalTicks/style.css +37 -0
  119. package/design-system/components/GoalTubes/README.md +29 -3
  120. package/design-system/components/GoalTubes/preview.html +6 -6
  121. package/design-system/components/GoalTubes/style.css +23 -0
  122. package/design-system/components/Heatmap/README.md +133 -0
  123. package/design-system/components/Heatmap/preview.html +168 -0
  124. package/design-system/components/Heatmap/style.css +119 -0
  125. package/design-system/components/Hero/README.md +58 -40
  126. package/design-system/components/Hero/preview.html +1 -1
  127. package/design-system/components/Hero/style.css +19 -0
  128. package/design-system/components/HoverCard/README.md +114 -0
  129. package/design-system/components/HoverCard/preview.html +107 -0
  130. package/design-system/components/HoverCard/style.css +59 -0
  131. package/design-system/components/IconButton/README.md +69 -38
  132. package/design-system/components/IconButton/preview.html +77 -43
  133. package/design-system/components/IconButton/style.css +45 -0
  134. package/design-system/components/Input/README.md +36 -11
  135. package/design-system/components/Input/preview.html +1 -1
  136. package/design-system/components/Input/style.css +23 -0
  137. package/design-system/components/KanbanBoard/README.md +93 -45
  138. package/design-system/components/KanbanBoard/preview.html +159 -43
  139. package/design-system/components/KanbanBoard/style.css +53 -0
  140. package/design-system/components/Kbd/README.md +25 -9
  141. package/design-system/components/Kbd/preview.html +6 -2
  142. package/design-system/components/Kbd/style.css +9 -0
  143. package/design-system/components/KitButton/README.md +81 -47
  144. package/design-system/components/KitButton/preview.html +35 -13
  145. package/design-system/components/KitButton/style.css +46 -0
  146. package/design-system/components/KitCard/README.md +75 -44
  147. package/design-system/components/KitCard/preview.html +18 -10
  148. package/design-system/components/KitCard/style.css +15 -0
  149. package/design-system/components/KitInput/README.md +54 -39
  150. package/design-system/components/KitInput/preview.html +7 -7
  151. package/design-system/components/KitInput/style.css +23 -0
  152. package/design-system/components/Leaderboard/README.md +76 -49
  153. package/design-system/components/Leaderboard/preview.html +61 -26
  154. package/design-system/components/Leaderboard/style.css +44 -0
  155. package/design-system/components/ListDetail/README.md +222 -0
  156. package/design-system/components/ListDetail/preview.html +213 -0
  157. package/design-system/components/ListDetail/style.css +148 -0
  158. package/design-system/components/LoadBar/README.md +79 -0
  159. package/design-system/components/LoadBar/preview.html +40 -0
  160. package/design-system/components/LoadBar/style.css +17 -0
  161. package/design-system/components/MarketingNav/README.md +76 -42
  162. package/design-system/components/MarketingNav/preview.html +37 -8
  163. package/design-system/components/MarketingNav/style.css +45 -0
  164. package/design-system/components/Matrix/README.md +129 -0
  165. package/design-system/components/Matrix/preview.html +99 -0
  166. package/design-system/components/Matrix/style.css +84 -0
  167. package/design-system/components/Menu/README.md +117 -41
  168. package/design-system/components/Menu/preview.html +85 -23
  169. package/design-system/components/Menu/style.css +61 -0
  170. package/design-system/components/Meter/README.md +39 -4
  171. package/design-system/components/Meter/preview.html +18 -1
  172. package/design-system/components/Meter/style.css +23 -0
  173. package/design-system/components/MetricTile/README.md +237 -0
  174. package/design-system/components/MetricTile/preview.html +241 -0
  175. package/design-system/components/MetricTile/style.css +129 -0
  176. package/design-system/components/Morph/README.md +106 -0
  177. package/design-system/components/Morph/preview.html +103 -0
  178. package/design-system/components/Morph/style.css +31 -0
  179. package/design-system/components/Motion/README.md +164 -0
  180. package/design-system/components/Motion/preview.html +2537 -0
  181. package/design-system/components/NumberInput/README.md +27 -8
  182. package/design-system/components/NumberInput/preview.html +21 -5
  183. package/design-system/components/NumberInput/style.css +34 -0
  184. package/design-system/components/PaceBar/README.md +75 -0
  185. package/design-system/components/PaceBar/preview.html +67 -0
  186. package/design-system/components/PaceBar/style.css +25 -0
  187. package/design-system/components/Page/README.md +57 -18
  188. package/design-system/components/Page/preview.html +15 -17
  189. package/design-system/components/Page/style.css +7 -0
  190. package/design-system/components/PageBar/README.md +90 -34
  191. package/design-system/components/PageBar/preview.html +60 -19
  192. package/design-system/components/PageBar/style.css +35 -0
  193. package/design-system/components/PageHero/README.md +87 -51
  194. package/design-system/components/PageHero/preview.html +35 -6
  195. package/design-system/components/PageHero/style.css +31 -0
  196. package/design-system/components/Pagination/README.md +70 -49
  197. package/design-system/components/Pagination/preview.html +24 -15
  198. package/design-system/components/Pagination/style.css +12 -0
  199. package/design-system/components/Panel/README.md +109 -51
  200. package/design-system/components/Panel/preview.html +118 -20
  201. package/design-system/components/Panel/style.css +51 -0
  202. package/design-system/components/PasswordInput/README.md +50 -18
  203. package/design-system/components/PasswordInput/preview.html +71 -21
  204. package/design-system/components/PasswordInput/style.css +31 -0
  205. package/design-system/components/Plate/README.md +75 -17
  206. package/design-system/components/Plate/preview.html +40 -7
  207. package/design-system/components/Plate/style.css +37 -0
  208. package/design-system/components/Popover/README.md +70 -49
  209. package/design-system/components/Popover/preview.html +44 -22
  210. package/design-system/components/Popover/style.css +41 -0
  211. package/design-system/components/PricingTable/README.md +69 -49
  212. package/design-system/components/PricingTable/preview.html +21 -21
  213. package/design-system/components/PricingTable/style.css +21 -0
  214. package/design-system/components/ProgressPetals/README.md +31 -3
  215. package/design-system/components/ProgressPetals/preview.html +14 -15
  216. package/design-system/components/ProgressPetals/style.css +27 -0
  217. package/design-system/components/README.md +151 -0
  218. package/design-system/components/Radio/README.md +40 -17
  219. package/design-system/components/Radio/preview.html +16 -1
  220. package/design-system/components/Radio/style.css +21 -0
  221. package/design-system/components/RankBar/README.md +29 -2
  222. package/design-system/components/RankBar/preview.html +14 -12
  223. package/design-system/components/RankBar/style.css +18 -0
  224. package/design-system/components/Ring/README.md +61 -11
  225. package/design-system/components/Ring/preview.html +55 -10
  226. package/design-system/components/Ring/style.css +49 -0
  227. package/design-system/components/ScoreHero/README.md +91 -0
  228. package/design-system/components/ScoreHero/preview.html +104 -0
  229. package/design-system/components/ScoreHero/style.css +32 -0
  230. package/design-system/components/Section/README.md +72 -33
  231. package/design-system/components/Section/preview.html +46 -16
  232. package/design-system/components/Section/style.css +18 -0
  233. package/design-system/components/Segmented/README.md +100 -55
  234. package/design-system/components/Segmented/preview.html +107 -26
  235. package/design-system/components/Segmented/style.css +94 -0
  236. package/design-system/components/SegmentedProgress/README.md +64 -0
  237. package/design-system/components/SegmentedProgress/preview.html +69 -0
  238. package/design-system/components/SegmentedProgress/style.css +11 -0
  239. package/design-system/components/Select/README.md +47 -12
  240. package/design-system/components/Select/preview.html +28 -2
  241. package/design-system/components/Select/style.css +22 -0
  242. package/design-system/components/ShareBar/README.md +69 -0
  243. package/design-system/components/ShareBar/preview.html +72 -0
  244. package/design-system/components/ShareBar/style.css +25 -0
  245. package/design-system/components/SideList/README.md +147 -0
  246. package/design-system/components/SideList/preview.html +139 -0
  247. package/design-system/components/SideList/style.css +94 -0
  248. package/design-system/components/Skeleton/README.md +52 -16
  249. package/design-system/components/Skeleton/preview.html +35 -23
  250. package/design-system/components/Skeleton/style.css +22 -0
  251. package/design-system/components/Slider/README.md +95 -0
  252. package/design-system/components/Slider/preview.html +49 -0
  253. package/design-system/components/Slider/style.css +13 -0
  254. package/design-system/components/Split/README.md +112 -0
  255. package/design-system/components/Split/preview.html +105 -0
  256. package/design-system/components/Split/style.css +30 -0
  257. package/design-system/components/Starter/README.md +21 -9
  258. package/design-system/components/Starter/preview.html +5 -5
  259. package/design-system/components/Stat/README.md +64 -43
  260. package/design-system/components/Stat/preview.html +3 -3
  261. package/design-system/components/Stat/style.css +15 -0
  262. package/design-system/components/StatTiles/README.md +88 -44
  263. package/design-system/components/StatTiles/preview.html +142 -71
  264. package/design-system/components/StatTiles/style.css +64 -0
  265. package/design-system/components/StatusLine/README.md +85 -0
  266. package/design-system/components/StatusLine/preview.html +49 -0
  267. package/design-system/components/StatusLine/style.css +14 -0
  268. package/design-system/components/StatusScreen/README.md +49 -35
  269. package/design-system/components/StatusScreen/preview.html +20 -5
  270. package/design-system/components/StatusScreen/style.css +9 -0
  271. package/design-system/components/StepLine/README.md +97 -0
  272. package/design-system/components/StepLine/preview.html +108 -0
  273. package/design-system/components/StepLine/style.css +62 -0
  274. package/design-system/components/Stepper/README.md +35 -13
  275. package/design-system/components/Stepper/style.css +13 -0
  276. package/design-system/components/StreakCalendar/README.md +22 -1
  277. package/design-system/components/StreakCalendar/preview.html +10 -10
  278. package/design-system/components/StreakCalendar/style.css +12 -0
  279. package/design-system/components/SuggestionChip/README.md +87 -0
  280. package/design-system/components/SuggestionChip/preview.html +42 -0
  281. package/design-system/components/SuggestionChip/style.css +20 -0
  282. package/design-system/components/Switch/README.md +44 -24
  283. package/design-system/components/Switch/preview.html +23 -8
  284. package/design-system/components/Switch/style.css +31 -0
  285. package/design-system/components/Table/README.md +129 -58
  286. package/design-system/components/Table/preview.html +106 -72
  287. package/design-system/components/Table/style.css +104 -0
  288. package/design-system/components/Tabs/README.md +71 -46
  289. package/design-system/components/Tabs/preview.html +56 -24
  290. package/design-system/components/Tabs/style.css +44 -0
  291. package/design-system/components/Testimonial/README.md +48 -32
  292. package/design-system/components/Testimonial/preview.html +14 -14
  293. package/design-system/components/Testimonial/style.css +12 -0
  294. package/design-system/components/TextArea/README.md +27 -11
  295. package/design-system/components/TextArea/preview.html +8 -2
  296. package/design-system/components/TextArea/style.css +12 -0
  297. package/design-system/components/ThemeSwitch/README.md +116 -0
  298. package/design-system/components/ThemeSwitch/preview.html +57 -0
  299. package/design-system/components/ThemeSwitch/style.css +6 -0
  300. package/design-system/components/TickRow/README.md +52 -36
  301. package/design-system/components/TickRow/preview.html +64 -41
  302. package/design-system/components/TickRow/style.css +23 -0
  303. package/design-system/components/TickStrip/README.md +95 -0
  304. package/design-system/components/TickStrip/preview.html +88 -0
  305. package/design-system/components/TickStrip/style.css +42 -0
  306. package/design-system/components/Tile/README.md +79 -18
  307. package/design-system/components/Tile/preview.html +91 -40
  308. package/design-system/components/Tile/style.css +36 -0
  309. package/design-system/components/Timeline/README.md +68 -48
  310. package/design-system/components/Timeline/preview.html +27 -15
  311. package/design-system/components/Timeline/style.css +25 -0
  312. package/design-system/components/Toast/README.md +70 -38
  313. package/design-system/components/Toast/preview.html +43 -8
  314. package/design-system/components/Toast/style.css +25 -0
  315. package/design-system/components/Tooltip/README.md +93 -35
  316. package/design-system/components/Tooltip/preview.html +69 -15
  317. package/design-system/components/Tooltip/style.css +78 -0
  318. package/design-system/components/TopBar/README.md +67 -53
  319. package/design-system/components/TopBar/preview.html +14 -27
  320. package/design-system/components/TopBar/style.css +35 -0
  321. package/design-system/components/TopicRail/README.md +108 -0
  322. package/design-system/components/TopicRail/preview.html +58 -0
  323. package/design-system/components/TopicRail/style.css +48 -0
  324. package/design-system/components/TrendBars/README.md +52 -14
  325. package/design-system/components/TrendBars/preview.html +65 -32
  326. package/design-system/components/TrendBars/style.css +25 -0
  327. package/design-system/components/TrendLine/README.md +164 -0
  328. package/design-system/components/TrendLine/preview.html +373 -0
  329. package/design-system/components/TrendLine/style.css +155 -0
  330. package/design-system/components/Well/README.md +64 -22
  331. package/design-system/components/Well/preview.html +14 -14
  332. package/design-system/components/Well/style.css +22 -0
  333. package/design-system/components/_house.css +324 -0
  334. package/design-system/components/bundle.css +4091 -744
  335. package/design-system/tokens.json +1314 -124
  336. package/dist/fello-core.css +2 -2
  337. package/dist/fello.css +6 -1369
  338. package/dist/fello.scoped.css +7 -0
  339. package/dist/index.d.ts +110 -11
  340. package/dist/index.js +781 -96
  341. package/dist/palettes.d.ts +464 -0
  342. package/dist/palettes.js +497 -0
  343. package/dist/scoped.d.ts +3 -0
  344. package/dist/scoped.js +16 -0
  345. package/dist/toast.d.ts +14 -0
  346. package/dist/toast.js +33 -29
  347. package/dist/tokens.d.ts +1686 -62
  348. package/dist/tokens.js +1668 -61
  349. package/package.json +20 -4
  350. package/scripts/check-palette.mjs +295 -0
  351. package/scripts/token-model.mjs +552 -0
  352. package/tokens/_dark.css +174 -0
  353. package/tokens/_palettes.css +46 -0
  354. package/tokens/_product.css +266 -53
  355. package/tokens/_source.hubl.css +39 -19
  356. package/tokens/design-tokens.json +319 -0
  357. package/tokens/palettes.ts +504 -0
  358. package/tokens/shadcn-compat.css +19 -19
  359. package/tokens/shadcn-compat.hsl.css +76 -0
  360. package/tokens/tokens.css +1292 -62
  361. package/tokens/tokens.md +588 -61
  362. package/tokens/tokens.root.css +1298 -62
  363. package/tokens/tokens.ts +1677 -64
package/design-system/components/IconButton/preview.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Actions" height=368 -->
1
+ <!-- @dsCard group="Actions" height=500 -->
2
2
  <!doctype html>
3
3
  <html>
4
4
  <head>
@@ -11,70 +11,104 @@
11
11
  <div class="ws-stage ws-stage--column">
12
12
 
13
13
  <div class="ws-stack">
14
- <span class="ws-muted">Ghost, outline, solid, primary (medium, 32px)</span>
14
+ <span class="ws-muted">Ghost, outline, solid, primary (32 px squares, 6 px corners, navy 16 px icons)</span>
15
15
  <div class="ws-cluster ws-cluster--loose">
16
- <button class="ws-icon-btn" aria-label="Edit criteria" title="Edit criteria">
17
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 2.5l3 3L5 14H2v-3L10.5 2.5Z"/></svg>
16
+ <button type="button" class="ws-icon-btn" aria-label="Edit criteria" title="Edit criteria">
17
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 2.5l3 3L5 14H2v-3L10.5 2.5Z"/></svg>
18
18
  </button>
19
- <button class="ws-icon-btn ws-icon-btn--outline" aria-label="Edit criteria" title="Edit criteria">
20
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 2.5l3 3L5 14H2v-3L10.5 2.5Z"/></svg>
19
+ <button type="button" class="ws-icon-btn ws-icon-btn--outline" aria-label="Edit criteria" title="Edit criteria">
20
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 2.5l3 3L5 14H2v-3L10.5 2.5Z"/></svg>
21
21
  </button>
22
- <button class="ws-icon-btn ws-icon-btn--solid" aria-label="Edit criteria" title="Edit criteria">
23
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 2.5l3 3L5 14H2v-3L10.5 2.5Z"/></svg>
22
+ <button type="button" class="ws-icon-btn ws-icon-btn--solid" aria-label="Close" title="Close">
23
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
24
24
  </button>
25
- <button class="ws-icon-btn ws-icon-btn--primary" aria-label="Send" title="Send">
26
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13V3M4 7l4-4 4 4"/></svg>
25
+ <button type="button" class="ws-icon-btn ws-icon-btn--primary" aria-label="Send" title="Send">
26
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 13V3M4 7l4-4 4 4"/></svg>
27
27
  </button>
28
28
  </div>
29
29
  </div>
30
30
 
31
31
  <div class="ws-stack">
32
- <span class="ws-muted">Sizes: xs (24px), small (28px), medium (32px), large (36px)</span>
32
+ <span class="ws-muted">Seth's Previous and Next (solid), beside their count</span>
33
+ <div class="ws-cluster">
34
+ <span class="ws-control-words ws-muted">4 of 10</span>
35
+ <button type="button" class="ws-icon-btn ws-icon-btn--solid" aria-label="Previous review" title="Previous review">
36
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 10l3.5-3.5 3.5 3.5"/></svg>
37
+ </button>
38
+ <button type="button" class="ws-icon-btn ws-icon-btn--solid" aria-label="Next review" title="Next review">
39
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 6l3.5 3.5 3.5-3.5"/></svg>
40
+ </button>
41
+ </div>
42
+ </div>
43
+
44
+ <div class="ws-stack">
45
+ <span class="ws-muted">Sizes: xs (24), small (28), medium (32), large (36, a 20 px icon); every one a 40 px target on touch</span>
46
+ <div class="ws-cluster ws-cluster--loose">
47
+ <button type="button" class="ws-icon-btn ws-icon-btn--xs ws-icon-btn--outline" aria-label="Remove" title="Remove">
48
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
49
+ </button>
50
+ <button type="button" class="ws-icon-btn ws-icon-btn--sm ws-icon-btn--outline" aria-label="Remove" title="Remove">
51
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
52
+ </button>
53
+ <button type="button" class="ws-icon-btn ws-icon-btn--outline" aria-label="Remove" title="Remove">
54
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
55
+ </button>
56
+ <button type="button" class="ws-icon-btn ws-icon-btn--lg ws-icon-btn--outline" aria-label="Remove" title="Remove">
57
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
58
+ </button>
59
+ </div>
60
+ </div>
61
+
62
+ <div class="ws-stack">
63
+ <span class="ws-muted">Round: the voice and send discs (they give 0.94 under a press)</span>
33
64
  <div class="ws-cluster ws-cluster--loose">
34
- <div class="ws-stack ws-stack--tight" style="align-items: center;">
35
- <button class="ws-icon-btn ws-icon-btn--xs ws-icon-btn--outline" aria-label="Remove" title="Remove">
36
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
37
- </button>
38
- <span class="ws-muted" style="font-size: var(--ws-text-micro);">xs</span>
39
- </div>
40
- <div class="ws-stack ws-stack--tight" style="align-items: center;">
41
- <button class="ws-icon-btn ws-icon-btn--sm ws-icon-btn--outline" aria-label="Remove" title="Remove">
42
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
43
- </button>
44
- <span class="ws-muted" style="font-size: var(--ws-text-micro);">small</span>
45
- </div>
46
- <div class="ws-stack ws-stack--tight" style="align-items: center;">
47
- <button class="ws-icon-btn ws-icon-btn--outline" aria-label="Remove" title="Remove">
48
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
49
- </button>
50
- <span class="ws-muted" style="font-size: var(--ws-text-micro);">medium</span>
51
- </div>
52
- <div class="ws-stack ws-stack--tight" style="align-items: center;">
53
- <button class="ws-icon-btn ws-icon-btn--lg ws-icon-btn--outline" aria-label="Remove" title="Remove">
54
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
55
- </button>
56
- <span class="ws-muted" style="font-size: var(--ws-text-micro);">large</span>
57
- </div>
65
+ <button type="button" class="ws-icon-btn ws-icon-btn--lg ws-icon-btn--round ws-icon-btn--primary" aria-label="Talk" title="Talk">
66
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="2" width="4" height="7" rx="2"/><path d="M4 7.5a4 4 0 0 0 8 0M8 13.5V15"/></svg>
67
+ </button>
68
+ <button type="button" class="ws-icon-btn ws-icon-btn--round ws-icon-btn--solid" aria-label="Send" title="Send">
69
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 13V3M4 7l4-4 4 4"/></svg>
70
+ </button>
58
71
  </div>
59
72
  </div>
60
73
 
61
74
  <div class="ws-stack">
62
- <span class="ws-muted">Selected (a mic that is listening) and pending (its answer is on the way)</span>
75
+ <span class="ws-muted">Hover, pictured (is-hover): ghost (the navy wash), outline (a darker edge), solid (a darker grey), primary (a brighter navy); then pressed (0.97) and focus (2 px navy ring)</span>
63
76
  <div class="ws-cluster ws-cluster--loose">
64
- <button class="ws-icon-btn" aria-label="Mute" aria-pressed="true" title="Mute">
65
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="2" width="4" height="7" rx="2"/><path d="M4 7.5a4 4 0 0 0 8 0M8 13.5V15M6 15h4"/></svg>
77
+ <button type="button" class="ws-icon-btn is-hover" aria-label="Edit criteria" title="Edit criteria">
78
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 2.5l3 3L5 14H2v-3L10.5 2.5Z"/></svg>
79
+ </button>
80
+ <button type="button" class="ws-icon-btn ws-icon-btn--outline is-hover" aria-label="Edit criteria" title="Edit criteria">
81
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 2.5l3 3L5 14H2v-3L10.5 2.5Z"/></svg>
66
82
  </button>
67
- <button class="ws-icon-btn ws-icon-btn--solid" aria-label="Draft the opener" aria-busy="true" aria-disabled="true" title="Draft the opener">
68
- <svg class="ws-working" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 2.5l3 3L5 14H2v-3L10.5 2.5Z"/></svg>
83
+ <button type="button" class="ws-icon-btn ws-icon-btn--solid is-hover" aria-label="Close" title="Close">
84
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
85
+ </button>
86
+ <button type="button" class="ws-icon-btn ws-icon-btn--primary is-hover" aria-label="Send" title="Send">
87
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 13V3M4 7l4-4 4 4"/></svg>
88
+ </button>
89
+ <button type="button" class="ws-icon-btn ws-icon-btn--solid is-hover is-pressed" aria-label="Close" title="Close">
90
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
91
+ </button>
92
+ <button type="button" class="ws-icon-btn ws-icon-btn--outline is-focus" aria-label="Edit criteria" title="Edit criteria">
93
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 2.5l3 3L5 14H2v-3L10.5 2.5Z"/></svg>
69
94
  </button>
70
95
  </div>
71
96
  </div>
72
97
 
73
98
  <div class="ws-stack">
74
- <span class="ws-muted">Disabled</span>
99
+ <span class="ws-muted">Selected (a mic that is listening), pending (its icon breathes), disabled, the navy one disabled</span>
75
100
  <div class="ws-cluster ws-cluster--loose">
76
- <button class="ws-icon-btn ws-icon-btn--outline" aria-label="Archive" disabled title="Archive">
77
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h10M6 5V3.5h4V5M5 5l.6 8.5A1 1 0 0 0 6.6 14.5h2.8a1 1 0 0 0 1-1L11 5"/></svg>
101
+ <button type="button" class="ws-icon-btn" aria-label="Microphone" aria-pressed="true" title="Microphone on">
102
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="2" width="4" height="7" rx="2"/><path d="M4 7.5a4 4 0 0 0 8 0M8 13.5V15M6 15h4"/></svg>
103
+ </button>
104
+ <button type="button" class="ws-icon-btn ws-icon-btn--solid" aria-label="Draft the opener" aria-busy="true" aria-disabled="true" title="Draft the opener">
105
+ <svg class="ws-working" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 2.5l3 3L5 14H2v-3L10.5 2.5Z"/></svg>
106
+ </button>
107
+ <button type="button" class="ws-icon-btn ws-icon-btn--outline" aria-label="Archive" disabled title="Archive">
108
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h10M6 5V3.5h4V5M5 5l.6 8.5A1 1 0 0 0 6.6 14.5h2.8a1 1 0 0 0 1-1L11 5"/></svg>
109
+ </button>
110
+ <button type="button" class="ws-icon-btn ws-icon-btn--primary" aria-label="Send" disabled title="Send">
111
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 13V3M4 7l4-4 4 4"/></svg>
78
112
  </button>
79
113
  </div>
80
114
  </div>
package/design-system/components/IconButton/style.css ADDED
@@ -0,0 +1,45 @@
1
+ /* ---- IconButton: Seth's square (0.5.0, D1): 6 px corners, one 16 px navy icon, 32 by default; ghost, outline, solid
2
+ (the tray grey), primary; --round for a voice or send disc. North's states: a navy wash, an edge or a brighter navy on
3
+ hover, never a lift. Restates the house's icon button in full, so that copy can go. On touch every size gets a 40 px
4
+ target (the house's touch block: the box grows, xs and small keep their look and gain a hit area). ---- */
5
+ .ws-icon-btn { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--ws-control-h); height: var(--ws-control-h); padding: 0; border: 0; border-radius: var(--ws-radius-row); background-color: transparent; color: var(--color-text-heading); cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft), color var(--ws-duration-hover) var(--ws-ease-soft), box-shadow var(--ws-duration-hover) var(--ws-ease-soft), transform var(--ws-duration-hover) var(--ws-ease-soft); }
6
+ .ws-icon-btn svg { width: var(--ws-icon); height: var(--ws-icon); }
7
+ .ws-icon-btn--xs { width: var(--space-lg); height: var(--space-lg); border-radius: var(--ws-radius-control); }
8
+ .ws-icon-btn--sm { width: var(--ws-control-h-sm); height: var(--ws-control-h-sm); }
9
+ .ws-icon-btn--lg { width: var(--ws-control-h-md); height: var(--ws-control-h-md); }
10
+ .ws-icon-btn--lg svg { width: var(--ws-icon-lg); height: var(--ws-icon-lg); }
11
+ .ws-icon-btn--round { border-radius: var(--radius-full); }
12
+ /* A busy one keeps its resting look under the pointer (each look's [aria-busy]:hover selector), since it refuses the
13
+ press a hover would invite. */
14
+ .ws-icon-btn[aria-busy="true"]:hover { background-color: transparent; opacity: 1; }
15
+
16
+ .ws-icon-btn--outline, .ws-icon-btn--outline[aria-busy="true"]:hover { background-color: transparent; box-shadow: var(--ws-shadow-hairline-in); }
17
+ .ws-icon-btn--solid, .ws-icon-btn--solid[aria-busy="true"]:hover { background-color: var(--ws-tray); }
18
+ .ws-icon-btn--primary, .ws-icon-btn[aria-pressed="true"], .ws-icon-btn--primary[aria-busy="true"]:hover { isolation: isolate; background-color: var(--color-text-heading); color: var(--ws-on-act); box-shadow: none; }
19
+ .ws-icon-btn--primary::before, .ws-icon-btn[aria-pressed="true"]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(var(--space-6xl) circle at var(--mx, 50%) var(--my, 50%), var(--ws-act-light), transparent 70%); opacity: 0; transition: opacity var(--ws-duration-hover) var(--ws-ease-soft); }
20
+
21
+ /* Hover, on a mouse only, never on a busy one (:where keeps each selector's weight as it was). */
22
+ @media (hover: hover) {
23
+ .ws-icon-btn:not(:where([aria-busy="true"])):hover { background-color: var(--ws-hover-strong); color: var(--color-text-heading); }
24
+ .ws-icon-btn--outline:not(:where([aria-busy="true"])):hover { background-color: transparent; box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-hover); }
25
+ .ws-icon-btn--solid:not(:where([aria-busy="true"])):hover { background-color: var(--ws-well-hover); }
26
+ .ws-icon-btn--primary:not(:where([aria-busy="true"])):hover, .ws-icon-btn[aria-pressed="true"]:not(:where([aria-busy="true"])):hover { background-color: var(--ws-act-hover); color: var(--ws-on-act); opacity: 1; }
27
+ .ws-icon-btn--primary:not(:where([aria-busy="true"])):hover::before, .ws-icon-btn[aria-pressed="true"]:not(:where([aria-busy="true"])):hover::before { opacity: 1; }
28
+ }
29
+ @media (prefers-reduced-motion: no-preference) {
30
+ .ws-icon-btn:active, .ws-icon-btn.is-pressed { transform: scale(var(--ws-press-scale)); transition-duration: var(--ws-duration-instant); }
31
+ .ws-icon-btn--round:active, .ws-icon-btn--round.is-pressed { transform: scale(var(--ws-press-scale-round)); }
32
+ }
33
+ /* States drawn still, for a preview or a mockup (D14): is-hover, is-pressed (above) and is-focus. */
34
+ .ws-icon-btn.is-hover { background-color: var(--ws-hover-strong); }
35
+ .ws-icon-btn--outline.is-hover { background-color: transparent; box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-hover); }
36
+ .ws-icon-btn--solid.is-hover { background-color: var(--ws-well-hover); }
37
+ .ws-icon-btn--primary.is-hover, .ws-icon-btn[aria-pressed="true"].is-hover { background-color: var(--ws-act-hover); }
38
+ .ws-icon-btn--primary.is-hover::before, .ws-icon-btn[aria-pressed="true"].is-hover::before { opacity: 1; }
39
+ .ws-icon-btn.is-focus { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
40
+
41
+ /* Disabled: 40%, no pointer. The navy one sinks instead (its fill at 40% reads as a broken act). Pending keeps full colour
42
+ and pulses its icon (ws-working on the svg). */
43
+ .ws-icon-btn:disabled { opacity: 0.4; pointer-events: none; }
44
+ .ws-icon-btn--primary:disabled { opacity: 1; background-color: var(--ws-surface-sunk); color: var(--color-text-muted); }
45
+ .ws-icon-btn[aria-busy="true"] { cursor: progress; }
package/design-system/components/Input/README.md CHANGED
@@ -16,10 +16,11 @@ edge while typing.
16
16
  ## Anatomy
17
17
 
18
18
  - Box: 32px tall (`--ws-control-h`, 40px on touch), `--ws-radius-control` (4px) corners, white ground (`--ws-field`),
19
- the fine hairline edge (`--ws-shadow-hairline`).
19
+ the 0.5 px card edge (`--ws-edge-card`) drawn inside, so a scroller never clips it.
20
20
  - Sides: 12px (`--space-sm`).
21
21
  - Label: 12px medium, `--color-text-body`, above the field.
22
- - Words typed: 14px, `--color-gray-8`; placeholder `--color-text-placeholder` (#6E6E6E).
22
+ - Words typed: 14 / 20, `--ws-field-ink`; placeholder `--color-text-placeholder` (#6E6E6E).
23
+ - Search (`ws-search`): 36 tall (40 on touch), the 16 px glass 8 px in at the left, the words 32 in.
23
24
  - Message below: 12px, `--color-text-muted` for a hint, `--ws-word-needs` for an error, with a warning icon before it.
24
25
 
25
26
  ## Variants and sizes
@@ -32,25 +33,28 @@ edge while typing.
32
33
  ## States
33
34
 
34
35
  - **Default (rest):** the cream-adjacent white ground, the fine grey edge, no ring.
35
- - **Typing (focus):** the edge turns mid blue (`--color-brand-mid-blue`) and the kit's focus halo shows
36
- (`--shadow-focus-ring`), over a white ground, so focus never reads as an error (a kit gap: its own focus border is the
37
- same salmon as its error border, reported, fixed here).
38
- - **Error:** the edge turns salmon (`--color-brand-salmon`) and a message rises in below (`ws-arrive`, 200ms) with a
39
- warning icon before it, in the AA `--ws-word-needs` tone, never salmon words. `aria-invalid` and `aria-describedby` are
36
+ - **Hover (a mouse only):** the edge darkens (#AAA49D, North's outlined controls).
37
+ - **Typing (focus):** the kit's focus ring, 2 px navy, 2 px out, over the field's own ground; it never reads as an error
38
+ (the error is the salmon's step, the ring is navy).
39
+ - **Error:** a 1 px edge in the salmon's AA step (`--ws-word-needs`; salmon itself is 2.7:1 on white, under the 3:1 an
40
+ edge asks) and a message rises in below (`ws-arrive`) with a warning icon, in `--ws-word-needs`. `aria-invalid` and `aria-describedby` are
40
41
  set together; an error with no message is never drawn.
41
- - **Disabled:** the field is not editable; shown at reduced emphasis.
42
+ - **Disabled:** the sunk cream ground with muted words, `cursor: not-allowed`.
42
43
  - **With placeholder:** the placeholder is `--color-text-placeholder` (#6E6E6E, 5.1:1 on white: AA) and still never the field's only label.
43
44
  - **Empty:** the rest state with no value and, if given, the placeholder.
44
45
  - **Long label:** the label wraps to a second line rather than truncate; the field itself keeps its height.
45
46
  - **Narrow:** the field is always `width: 100%` of its column.
46
- - **Touch:** the field grows to 40px tall (`--ws-touch`).
47
+ - **Touch:** the field grows to 40px tall (`--ws-touch`), the search box too, and its words to 16 px
48
+ (`--ws-text-value`): a phone zooms the page into any field under 16 px when it takes focus.
49
+ - **Dark:** the field's ground (`--ws-field`), ink and edge take their dark values; on the navy ground a field stays
50
+ white with navy words.
47
51
 
48
52
  ## Behaviour
49
53
 
50
54
  - Keyboard: a native `<input>`; Tab moves to and from it like any field; typing and browser autofill work unmodified.
51
55
  - Pointer / touch: clicking or tapping anywhere in the box focuses it; the touch floor is 40px.
52
- - Motion: border colour, background and shadow transition over `--ws-duration-instant` (120ms) on `--ws-ease-soft`; an
53
- error message rises in over `--ws-duration-gentle` (200ms); nothing animates under `prefers-reduced-motion: reduce`.
56
+ - Motion: the edge over the hover beat (200 ms) on `--ws-ease-soft`; an error message rises in (`ws-arrive`); still
57
+ under reduced motion.
54
58
 
55
59
  ## Content
56
60
 
@@ -84,3 +88,24 @@ edge while typing.
84
88
  - **Derived from**: the kit's `InputProps` contract (`label`, `error`, `hint`) and the system's rules for a field's
85
89
  ground, focus ring and search size.
86
90
  - **Precedent**: the first product built on the system.
91
+ - 0.5.0: the edge drawn inside (the field's fix: "the buttons' top looks cut off" in a scroller, 4 Nov), North's hover
92
+ edge, the kit's navy focus ring (D8) in place of the mid-blue edge and salmon halo, the error edge at its AA step.
93
+
94
+ ## Markup
95
+
96
+ ```html
97
+ <div class="ws-field">
98
+ <label class="ws-label" for="email">Seller's email</label>
99
+ <input class="ws-input" id="email" type="email" aria-invalid="true" aria-describedby="email-msg">
100
+ <p class="ws-field-msg ws-field-msg--error ws-arrive" id="email-msg">Needs a full address, like priya.nair@email.com</p>
101
+ </div>
102
+ <span class="ws-search-wrap">
103
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="M13 13l-2.8-2.8"/></svg>
104
+ <input class="ws-input ws-search" type="search" placeholder="Search" aria-label="Search leads">
105
+ </span>
106
+ ```
107
+
108
+ ## Styles
109
+
110
+ `design-system/components/Input/style.css`: `ws-input` (and `--typing`, the focus drawn still), `ws-search-wrap`,
111
+ `ws-search`. `ws-field`, `ws-label` and `ws-field-msg` are the house's (`_house.css`, Fields).
package/design-system/components/Input/preview.html CHANGED
@@ -9,7 +9,7 @@
9
9
  </head>
10
10
  <body>
11
11
  <div class="ws-stage">
12
- <div style="display: grid; grid-template-columns: repeat(3, minmax(var(--space-8xl), 1fr)); gap: var(--ws-gap-component); width: 100%;">
12
+ <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--ws-gap-component); width: 100%;">
13
13
 
14
14
  <div class="ws-field">
15
15
  <span class="ws-muted">Rest</span>
package/design-system/components/Input/style.css ADDED
@@ -0,0 +1,23 @@
1
+ /* ---- Input: the house field, restated (0.5.0) so the house's Fields copy can go: the white field ground, 32 tall (40 on
2
+ touch), 4 px corners, 14 / 20 words, its 0.5 px edge drawn inside (a scroller never clips it). Under the pointer the
3
+ edge darkens (North); typing shows the kit's focus ring (2 px navy, 2 px out); an error edge is the AA step of the
4
+ salmon, 1 px, beside words that say what to do. ---- */
5
+ .ws-input { width: 100%; min-width: 0; height: var(--ws-control-h); padding: 0 var(--space-sm); border: 0; border-radius: var(--ws-radius-control); background: var(--ws-field); box-shadow: var(--ws-shadow-hairline-in); color: var(--ws-field-ink); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); transition: box-shadow var(--ws-duration-hover) var(--ws-ease-soft); }
6
+ @media (hover: hover) { .ws-input:not(:disabled, [aria-invalid="true"]):hover { box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-hover); } }
7
+ .ws-input::placeholder { color: var(--color-text-placeholder); }
8
+ .ws-input:focus-visible { background: var(--ws-field); }
9
+ .ws-input[aria-invalid="true"] { box-shadow: inset 0 0 0 var(--ws-line) var(--ws-word-needs); }
10
+ .ws-input:disabled { background: var(--ws-surface-sunk); color: var(--color-text-muted); cursor: not-allowed; }
11
+ /* A field's marks (Select's and Combobox's chevrons, the calendar, the eye, the steppers) are navy, as Seth draws them,
12
+ and the light ink in night: the heading colour. On the navy ground the field stays white while the heading turns
13
+ white, so there the marks take the field's own ink. Each mark reads var(--ws-field-mark, var(--color-text-heading));
14
+ the navy ground re-points --ws-field-mark itself (tokens/_dark.css), on any element that carries it. */
15
+ /* The typing state drawn still, for a preview or a mockup: the focus ring a real focus draws. */
16
+ .ws-input--typing { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
17
+ /* The search box: 36 tall (40 on touch), the icon inside at the left. */
18
+ .ws-search-wrap { position: relative; display: flex; min-width: 0; }
19
+ .ws-search-wrap svg { position: absolute; left: var(--space-xs); top: 50%; width: var(--ws-icon); height: var(--ws-icon); transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
20
+ .ws-search { height: var(--ws-control-h-md); padding: 0 var(--space-sm) 0 var(--space-xl); }
21
+ /* Touch: 40 tall (the house's touch height, restated after the field's own so it still wins), the words 16 so a phone
22
+ does not zoom the page into the field when it takes focus (iOS zooms any field under 16 px). */
23
+ @media (pointer: coarse) { .ws-input, .ws-search { height: var(--ws-touch); font-size: var(--ws-text-value); } }
package/design-system/components/KanbanBoard/README.md CHANGED
@@ -1,4 +1,5 @@
1
1
  Columns of cards for a pipeline: a stage per column, a card per thing moving through it, a count beside each stage's name.
2
+ `--fill` makes it a board page: the rest of the page's height, every stage scrolling on its own, the sideways bar on screen.
2
3
 
3
4
  ## Use it when
4
5
 
@@ -14,45 +15,65 @@ Columns of cards for a pipeline: a stage per column, a card per thing moving thr
14
15
 
15
16
  ## Anatomy
16
17
 
17
- - A column: 280 px wide, flex-shrink none, on the `--ws-surface-sunk` plate, `--ws-radius-card` (8 px) corners.
18
- - A column head: a 12 px eyebrow (uppercase, `--letter-spacing-overline`, `--color-text-muted`) naming the stage with its
19
- count in parentheses, tabular numerals.
20
- - A card: `ws-card` (the cream, hairline edge, 8 px corners), 12 px inside (`--ws-card-padding`), a 14 px medium navy
21
- name, a 28 px avatar beside it, a 12 px muted meta line under (how long they have been here, what is waited on).
22
- - Gap between cards: 8 px (`--space-xs`); gap between columns: 12 px.
23
- - A dragged card: lifts off the plate with `--ws-shadow-lift`, the only piece in this board that ever gains a shadow
24
- (the product is otherwise flat).
25
- - An empty column: no cards, a centred muted sentence in place of them ("Nobody here yet").
18
+ - The board: a row of columns 12 apart (`--space-sm`), scrolling sideways inside itself, with 4 px of room on every
19
+ side (pulled back by a margin) so a focused card's 2 px ring, 2 px out, is never clipped. It snaps a stage at a time
20
+ (proximity), and while stages are hidden past the far edge its last 24 px fade out; the fade lifts at the end.
21
+ - A column: 280 wide (`min(280, the board less 40)`, so on a phone the next stage peeks in), on the sunk plate
22
+ (`--ws-surface-sunk`; in dark the well, `--ws-well`, so the cards stay lighter than their column), 8 px corners, 8
23
+ inside, cards 8 apart.
24
+ - A column head: at least 32 tall, the stage in 13 / 18 medium navy (`__title`), its count beside it in muted figures
25
+ (`__count`), sentence case, flush with the cards' edge.
26
+ - A card: `ws-card` (a link or a button when it opens the thing), 12 inside, a 28 px `Avatar` and the name (14 / 20
27
+ medium navy) 8 apart, a 13 / 18 muted meta line 4 under.
28
+ - A held card (`__card--dragging`, with `aria-grabbed="true"`; the app sets both while a card is held): North's
29
+ floating shadow (`--ws-shadow-pop`, with the dark rim) and a 1 degree tilt; the only thing on the board that floats.
30
+ - The column under a held card (`__column--over`, set by the app while the card is over it): one step darker
31
+ (`--ws-surface-press`), nothing moves. In dark that step would be
32
+ lighter than the cards, so the column keeps the well and takes a 1 px card edge (`--ws-edge-card`) round it.
33
+ - An empty column: its head and a count of 0, a centred muted sentence in place of cards ("Nobody here yet").
26
34
 
27
35
  ## Variants and sizes
28
36
 
29
- | Variant | Width | Note |
30
- | --- | --- | --- |
31
- | Default column | 280 px | This preview's width |
32
- | Narrow phone | One column, full width, in the same DOM order | So Tab and a screen reader follow the stage order, matching `CardBoard`'s own phone rule |
37
+ | Variant | What changes |
38
+ | --- | --- |
39
+ | Default | Columns as tall as their cards; the board as tall as its tallest column |
40
+ | `--fill` | The board takes the rest of a height-bound column (`flex: 1; min-height: 0`); every column runs the full height and scrolls on its own, its head stuck at the very top (over the column's 8 px padding, so no card shows above it; the title sits where the plain board's does), so the sideways bar sits at the window's foot (K16). A column that holds more than it shows fades its last 24 px into its ground, lifting at the end; a card reached by Tab scrolls clear of the stuck head |
41
+ | Phone | The same row of 280 columns, the next one peeking in, snapping a stage at a time |
33
42
 
34
43
  ## States
35
44
 
36
45
  - **Default**: as above.
37
- - **Hovered card**: the card tints `--ws-surface-sunk`'s next step up or simply lifts slightly on hover as a pressable
38
- card does elsewhere; it is still flat until picked up.
39
- - **Dragging**: `--ws-shadow-lift`, a slight rotation is optional flourish and not required; the column it is over can
40
- tint to show it will land there.
41
- - **Dropped**: the card glides to its new position (a shared layout id, the same technique a hiring app's own pipeline
42
- board uses so a moved card is seen moving rather than teleporting).
43
- - **Empty**: the column stays at its full width with its head and count (0), a muted sentence in place of cards; the
44
- column itself is never hidden, since hiding it would reflow every column beside it mid-task.
45
- - **Loading**: skeleton cards in place of real ones, the column heads shown at once.
46
- - **Touch**: a card's name and meta meet the 24 px minimum for words that act where a card is itself the opened target;
47
- dragging on touch needs its own affordance (a press-and-hold) not drawn in this preview.
46
+ - **Hover** (a card that opens): North's wash (`--ws-hover`) over the card's cream, stronger on press (`--ws-hover-strong`);
47
+ never the card's own sunk hover, which is the column's ground. It is flat until picked up.
48
+ - **Dragging**: `__card--dragging` (`--ws-shadow-pop` and the tilt); the column it is over takes `__column--over` and
49
+ darkens a step. The app adds and removes both classes; the kit only draws them.
50
+ - **Dropped**: the card glides to its new place and the cards it leaves close up, never teleports (North's "List rows
51
+ reorder", `springs.reorder` .4 / 0): wrap the move in `reorder()` (below).
52
+ - **Empty**: the column keeps its full width, its head and its count; a muted sentence in place of cards. It never
53
+ hides, which would reflow every column beside it mid-task.
54
+ - **Loading**: ghost cards the height of a card in the chart colours' sweep (`__ghost ws-shimmer`), the heads shown at
55
+ once; still under reduced motion.
56
+ - **Scrolled**: the far-edge fade while stages are hidden, gone at the end; in `--fill`, a column's foot fades while cards
57
+ are hidden below it, gone at its end.
58
+ - **Touch**: a card is one target (its whole box); dragging on touch needs a press-and-hold, not drawn here.
48
59
 
49
60
  ## Behaviour
50
61
 
51
- - Keyboard: a card is a real link or button in document order, column after column; moving a card by keyboard (not
52
- dragging) is a menu act ("Move to Offer") on the card, never keyboard-only drag and drop.
53
- - Pointer: drag and drop between columns; a plain click opens the card's own detail.
54
- - Motion: a card glides to its new column on `--ws-ease-soft`; columns do not resize during a drag, only the card being
55
- held does, so neighbours never jump.
62
+ - Keyboard: the board is a focusable region (its ring drawn inside; while it has focus the far-edge fade drops, so the
63
+ ring shows whole); a card is a real link or button in document order, column after column; moving a card by keyboard
64
+ is a menu act ("Move to Offer") on the card, never keyboard-only drag and drop.
65
+ - Pointer: drag and drop between columns; a plain click opens the card.
66
+ - Motion: a card glides to its new column; columns never resize during a drag, only the held card changes, so
67
+ neighbours never jump. The glide is `reorder(update, board)` from `@felloinnovations/brand-kit`, a small
68
+ framework-free helper (CSS alone cannot see a row's old place): it names each card in view for a View Transition,
69
+ runs `update` (the move), and eases every card's flight on the kit's reorder spring, `--ws-spring-reorder` over
70
+ `--ws-spring-reorder-duration` (motion's own `spring(.4, 0)`, 750 ms, read from the page's tokens), the card that changed column flying above the cards it passes; the column counts cross-fade. It runs on
71
+ the compositor, with no script per frame. Give each card a stable `id` or `data-key` so React re-rendering it into
72
+ another column keeps its flight; a card cut by a scrolling `--fill` column cross-fades instead (a flying card is
73
+ drawn above every clip). In React, make the update land inside the callback:
74
+ `reorder(() => flushSync(() => setColumns(next)), boardRef.current)`. The same helper glides `ListDetail` rows and
75
+ `SideList` picks, or any rows its third argument selects. Without View Transitions, or under reduced motion, the card
76
+ lands at once. Try it in the preview: click a card in the last board.
56
77
 
57
78
  ## Content
58
79
 
@@ -66,27 +87,54 @@ Columns of cards for a pipeline: a stage per column, a card per thing moving thr
66
87
  | Name | Type | Meaning |
67
88
  | --- | --- | --- |
68
89
  | `columns` | `{ stage, label, count, cards: CardItem[] }[]` | The board's stages, in order |
69
- | `CardItem` | `{ id, name, initials, meta }` | One card's content |
90
+ | `CardItem` | `{ id, name, initials, meta, href? }` | One card's content |
70
91
  | `onMove` | `(cardId, toStage) => void` | Called when a card changes column |
71
92
  | `draggingId` | `string \| null` | Which card, if any, is currently lifted |
93
+ | `fill` | `boolean` | The board page form (`--fill`) |
72
94
 
73
95
  ## Rules
74
96
 
75
- - **Every stage the same width**, whatever it holds (a hiring app's own rule, 23 Oct 2026): a column never grows to fit more
76
- cards than its neighbours, so the board reads as one steady row of stages.
77
- - **A card is `ws-card`, never redrawn**: the same hairline, corner and cream fill as every other card in the system,
78
- set on the sunk plate rather than invented as its own surface.
79
- - **An empty column says so in words**, never collapses or disappears, matching the system's empty-state rule that a
80
- place with nothing in it still shows its place.
81
- - **Lift is reserved for what is actually lifted**: only the card being dragged gains `--ws-shadow-lift`; the board stays
82
- flat otherwise, per the product's flat-with-fine-edges rule.
83
- - **One shape, many pipelines**: pipelines appear in any product with a process (sales, hiring, support tickets), not
84
- only one app's funnel. Derived from a hiring app's own pipeline board: its card shape, its column plate, and its
85
- "every stage the same width" rule, generalised to a reusable board.
97
+ - **Every stage the same width**, whatever it holds: a column never grows to fit more cards than its neighbours.
98
+ - **A card is `ws-card`, never redrawn**, set on the sunk plate rather than invented as its own surface.
99
+ - **An empty column says so in words**, never collapses or disappears.
100
+ - **Only what is lifted floats**: the held card alone takes a shadow.
101
+ - **A board page shows its sideways bar** (K16): when the board is the page, use `--fill` so the bar is never below the
102
+ fold, and each stage scrolls on its own.
103
+ - **The head is sentence case** (D6): 13 / 18 medium, no uppercase eyebrow.
86
104
 
87
105
  ## Source
88
106
 
89
- - **Derived from**: the system's card shape (`ws-card`), the sunk-plate column surface, and the equal-width-column and
90
- flat-except-dragged rules.
91
- - **Precedent**: an intentional addition decided from the system, 26 Oct 2026, generalised from the first product
92
- built on the system's own pipeline board.
107
+ - **Derived from**: the system's card shape (`ws-card`), the sunk-plate column, the equal-width-column and
108
+ flat-except-dragged rules; North's floating shadow family and its edge fade; the K16 audit (Revenue OS: a 6-stage
109
+ board 638 px tall with its sideways bar at y 1,107 in a 900 px window).
110
+ - **Precedent**: an intentional addition decided from the system, 26 Oct 2026, generalised from the first product's
111
+ pipeline board; `--fill` added in 0.5.0 (4 Nov 2026).
112
+
113
+ ## Markup
114
+
115
+ ```html
116
+ <div class="ws-kanban-board" role="region" aria-label="Pipeline stages" tabindex="0">
117
+ <section class="ws-kanban-board__column" aria-labelledby="kb-new">
118
+ <div class="ws-kanban-board__head">
119
+ <h3 class="ws-kanban-board__title" id="kb-new">New leads <span class="ws-kanban-board__count">1</span></h3>
120
+ </div>
121
+ <a class="ws-card ws-kanban-board__card" href="#priya">
122
+ <span class="ws-kanban-board__who"><span class="ws-avatar ws-avatar--sm" aria-hidden="true">PN</span><span class="ws-row__title">Priya Nair</span></span>
123
+ <span class="ws-kanban-board__meta">6 days here, cold call</span>
124
+ </a>
125
+ </section>
126
+ <section class="ws-kanban-board__column" aria-labelledby="kb-offer">
127
+ <div class="ws-kanban-board__head">
128
+ <h3 class="ws-kanban-board__title" id="kb-offer">Offer made <span class="ws-kanban-board__count">0</span></h3>
129
+ </div>
130
+ <p class="ws-kanban-board__empty">Nobody here yet</p>
131
+ </section>
132
+ </div>
133
+ ```
134
+
135
+ ## Styles
136
+
137
+ `design-system/components/KanbanBoard/style.css`, in `bundle.css` and `fello.css`. Dark and the navy ground come from
138
+ the tokens (`--ws-surface-sunk`, `--ws-well` for the column in dark, `--ws-surface-press`, `--ws-shadow-pop`). For
139
+ `--fill`, the board's parent must be a height-bound flex column (the shell's body, a fill page). The far-edge and
140
+ column fades use scroll-driven animations where the browser has them.