@felloinnovations/brand-kit 0.4.0 → 0.5.1

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 +221 -0
  3. package/README.md +38 -9
  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 +135 -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 +367 -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 +53 -16
  249. package/design-system/components/Skeleton/preview.html +35 -23
  250. package/design-system/components/Skeleton/style.css +17 -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 +4086 -744
  335. package/design-system/tokens.json +1310 -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 +109 -10
  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 +173 -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 +1287 -62
  361. package/tokens/tokens.md +587 -61
  362. package/tokens/tokens.root.css +1293 -62
  363. package/tokens/tokens.ts +1677 -64
package/design-system/components/Checkbox/preview.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Fields" height=426 -->
1
+ <!-- @dsCard group="Fields" height=560 -->
2
2
  <!doctype html>
3
3
  <html>
4
4
  <head>
@@ -10,74 +10,136 @@
10
10
  <body>
11
11
  <div class="ws-stage ws-stage--column">
12
12
 
13
- <div class="ws-stack ws-stack--tight">
14
- <span class="ws-muted">Chosen and not chosen (navy check, not the kit's salmon)</span>
13
+ <div class="ws-stack">
14
+ <span class="ws-muted">Not chosen, chosen, some chosen (Seth's 18 px box, a 1.5 px navy edge, a 12 px cream tick)</span>
15
+ <label class="ws-check">
16
+ <input type="checkbox">
17
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
18
+ <span class="ws-check__words"><span class="ws-check__label">Also text Priya once it is sent</span></span>
19
+ </label>
15
20
  <label class="ws-check">
16
21
  <input type="checkbox" checked>
17
- <span class="ws-check__box" aria-hidden="true">
18
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8.3l2.6 2.6L12 5.2"/></svg>
19
- </span>
20
- <span class="ws-check__words">
21
- <span class="ws-check__label">Send a copy to the team channel</span>
22
- </span>
22
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
23
+ <span class="ws-check__words"><span class="ws-check__label">Send a copy to the team channel</span></span>
23
24
  </label>
24
25
  <label class="ws-check">
25
- <input type="checkbox">
26
- <span class="ws-check__box" aria-hidden="true">
27
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8.3l2.6 2.6L12 5.2"/></svg>
28
- </span>
29
- <span class="ws-check__words">
30
- <span class="ws-check__label">Also text Priya once it is sent</span>
31
- </span>
26
+ <input type="checkbox" id="chk-some">
27
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
28
+ <span class="ws-check__words"><span class="ws-check__label">All 10 reviews (3 chosen)</span></span>
32
29
  </label>
30
+ <script>document.getElementById('chk-some').indeterminate = true;</script>
31
+ </div>
32
+
33
+ <div class="ws-stack">
34
+ <span class="ws-muted">States, pictured (is-hover, is-focus): rest, hover (the navy wash), focus (2 px navy ring round the box), chosen with focus</span>
35
+ <div class="ws-cluster ws-cluster--group">
36
+ <label class="ws-check">
37
+ <input type="checkbox">
38
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
39
+ <span class="ws-check__words"><span class="ws-check__label">Rest</span></span>
40
+ </label>
41
+ <label class="ws-check is-hover">
42
+ <input type="checkbox">
43
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
44
+ <span class="ws-check__words"><span class="ws-check__label">Hover</span></span>
45
+ </label>
46
+ <label class="ws-check is-focus">
47
+ <input type="checkbox">
48
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
49
+ <span class="ws-check__words"><span class="ws-check__label">Focus</span></span>
50
+ </label>
51
+ <label class="ws-check is-focus">
52
+ <input type="checkbox" checked>
53
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
54
+ <span class="ws-check__words"><span class="ws-check__label">Chosen, focus</span></span>
55
+ </label>
56
+ </div>
33
57
  </div>
34
58
 
35
- <div class="ws-stack ws-stack--tight">
36
- <span class="ws-muted">With a description line</span>
59
+ <div class="ws-cluster ws-cluster--group ws-cluster--start">
60
+ <div class="ws-stack ws-stack--loose" style="max-width: 360px;">
61
+ <span class="ws-muted">Steps (Seth's checklist): rows 20 tall, 12 apart, a done step muted</span>
62
+ <label class="ws-check ws-check--step">
63
+ <input type="checkbox" checked>
64
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
65
+ <span class="ws-check__words"><span class="ws-check__label">Open your Google Business Profile</span></span>
66
+ </label>
67
+ <label class="ws-check ws-check--step">
68
+ <input type="checkbox">
69
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
70
+ <span class="ws-check__words"><span class="ws-check__label">Paste the new description into About</span></span>
71
+ </label>
72
+ <label class="ws-check ws-check--step">
73
+ <input type="checkbox">
74
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
75
+ <span class="ws-check__words"><span class="ws-check__label">Save, then check it shows on Maps</span></span>
76
+ </label>
77
+ </div>
78
+ <div class="ws-stack">
79
+ <span class="ws-muted">Control words (13 / 18 medium)</span>
80
+ <label class="ws-check ws-check--control ws-check--quiet">
81
+ <input type="checkbox">
82
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
83
+ <span class="ws-check__words"><span class="ws-check__label">Mark as replied</span></span>
84
+ </label>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="ws-stack" style="max-width: 360px;">
89
+ <span class="ws-muted">With a description, and a long label that wraps beside the box</span>
37
90
  <label class="ws-check">
38
91
  <input type="checkbox" aria-describedby="chk-desc">
39
- <span class="ws-check__box" aria-hidden="true">
40
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8.3l2.6 2.6L12 5.2"/></svg>
41
- </span>
92
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
42
93
  <span class="ws-check__words">
43
94
  <span class="ws-check__label">Include last month's calls</span>
44
95
  <span class="ws-muted" id="chk-desc">Adds September's cold calls to this report</span>
45
96
  </span>
46
97
  </label>
47
- </div>
48
-
49
- <div class="ws-stack ws-stack--tight">
50
- <span class="ws-muted">Disabled</span>
51
- <label class="ws-check ws-check--disabled">
52
- <input type="checkbox" checked disabled>
53
- <span class="ws-check__box" aria-hidden="true">
54
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8.3l2.6 2.6L12 5.2"/></svg>
55
- </span>
56
- <span class="ws-check__words">
57
- <span class="ws-check__label">Verified (locked once confirmed)</span>
58
- </span>
59
- </label>
60
- </div>
61
-
62
- <div class="ws-stack ws-stack--tight">
63
- <span class="ws-muted">A group of three</span>
64
98
  <label class="ws-check">
65
99
  <input type="checkbox" checked>
66
- <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8.3l2.6 2.6L12 5.2"/></svg></span>
67
- <span class="ws-check__words"><span class="ws-check__label">Cold calls</span></span>
68
- </label>
69
- <label class="ws-check">
70
- <input type="checkbox" checked>
71
- <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8.3l2.6 2.6L12 5.2"/></svg></span>
72
- <span class="ws-check__words"><span class="ws-check__label">Live transfers</span></span>
73
- </label>
74
- <label class="ws-check">
75
- <input type="checkbox">
76
- <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8.3l2.6 2.6L12 5.2"/></svg></span>
77
- <span class="ws-check__words"><span class="ws-check__label">Follow-ups</span></span>
100
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
101
+ <span class="ws-check__words"><span class="ws-check__label">Run the site through an accessibility checker to see the flagged issues</span></span>
78
102
  </label>
79
103
  </div>
80
104
 
105
+ <div class="ws-cluster ws-cluster--group ws-cluster--start">
106
+ <div class="ws-stack">
107
+ <span class="ws-muted">Quiet: Seth's status box (select all)</span>
108
+ <label class="ws-check ws-check--quiet">
109
+ <input type="checkbox">
110
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
111
+ <span class="ws-check__words"><span class="ws-check__label">Select all</span></span>
112
+ </label>
113
+ </div>
114
+ <div class="ws-stack">
115
+ <span class="ws-muted">Small (16 px, Tally's dense row)</span>
116
+ <label class="ws-check ws-check--sm">
117
+ <input type="checkbox">
118
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
119
+ <span class="ws-check__words"><span class="ws-check__label">Cancelled</span></span>
120
+ </label>
121
+ </div>
122
+ <div class="ws-stack">
123
+ <span class="ws-muted">Error (a consent that must be given)</span>
124
+ <label class="ws-check">
125
+ <input type="checkbox" aria-invalid="true" aria-describedby="chk-err">
126
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
127
+ <span class="ws-check__words">
128
+ <span class="ws-check__label">I agree to the terms</span>
129
+ <span class="ws-field-msg ws-field-msg--error" id="chk-err">Agree to the terms to send it</span>
130
+ </span>
131
+ </label>
132
+ </div>
133
+ <div class="ws-stack">
134
+ <span class="ws-muted">Disabled</span>
135
+ <label class="ws-check">
136
+ <input type="checkbox" checked disabled>
137
+ <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
138
+ <span class="ws-check__words"><span class="ws-check__label">Verified (locked once confirmed)</span></span>
139
+ </label>
140
+ </div>
141
+ </div>
142
+
81
143
  </div>
82
144
  </body>
83
145
  </html>
package/design-system/components/Checkbox/style.css ADDED
@@ -0,0 +1,45 @@
1
+ /* ---- Checkbox: Seth's action box (0.5.0, D1; 308:2509, 313:2746): 18 px, 4 px corners, a 1.5 px navy edge at rest
2
+ (12:1, so the box itself passes the 3:1 a control asks), navy when chosen with a 12 px cream tick; a native input
3
+ under the skin, the label part of the target. --quiet: Seth's status box (select-all, replied), its edge the muted
4
+ grey (his #D3D3D3 is 1.45:1, under 3:1; the AA step is used). --sm: Tally's 16 px box for a dense row. --step: a
5
+ checklist step (14 / 20 regular, muted once done); --control: Seth's control words (13 / 18 medium, "Mark as replied").
6
+ The row is its line (20 tall, so Seth's steps sit 12 apart in a ws-stack--loose) and no wider than its words, so a
7
+ click far from them does nothing; its 24 px target is a hit area that moves nothing (40 on touch, below). ---- */
8
+ .ws-check { --ws-check: calc(var(--space-md) + var(--space-3xs)); --ws-check-line: calc(var(--space-md) + var(--space-xxs)); --ws-check-edge: var(--color-text-heading); position: relative; display: flex; align-items: flex-start; gap: var(--space-xs-plus); width: fit-content; max-width: 100%; padding: 0; cursor: pointer; }
9
+ .ws-check::after { content: ""; position: absolute; inset-block: min(0px, calc((100% - var(--space-lg)) / 2)); inset-inline: 0; }
10
+ .ws-check input { position: absolute; width: var(--ws-line); height: var(--ws-line); margin: 0; opacity: 0; }
11
+ .ws-check__box { position: relative; flex-shrink: 0; width: var(--ws-check); height: var(--ws-check); margin-top: calc((var(--ws-check-line) - var(--ws-check)) / 2); border: 0; border-radius: var(--ws-radius-control); background: var(--color-bg-page); box-shadow: inset 0 0 0 calc(var(--ws-line) * 1.5) var(--ws-check-edge); transition: background-color var(--ws-duration-hover) var(--ws-ease-soft), box-shadow var(--ws-duration-hover) var(--ws-ease-soft); }
12
+ .ws-check__box svg { position: absolute; inset: 0; width: var(--ws-icon-sm); height: var(--ws-icon-sm); margin: auto; color: var(--ws-on-act); opacity: 0; transform: scale(var(--ws-pop-scale)); }
13
+ .ws-check input:checked + .ws-check__box, .ws-check input:indeterminate + .ws-check__box { background: var(--color-text-heading); box-shadow: none; }
14
+ .ws-check input:checked + .ws-check__box svg { opacity: 1; transform: none; }
15
+ /* Some of a group chosen (input.indeterminate = true): a cream dash in place of the tick. */
16
+ .ws-check input:indeterminate + .ws-check__box svg { opacity: 0; }
17
+ .ws-check input:indeterminate + .ws-check__box::after { content: ""; position: absolute; inset: 0; width: var(--space-xs); height: calc(var(--ws-line) * 1.75); margin: auto; border-radius: var(--ws-radius-bar); background: var(--ws-on-act); }
18
+ .ws-check input:focus-visible + .ws-check__box { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
19
+ .ws-check input[aria-invalid="true"]:not(:checked) + .ws-check__box { --ws-check-edge: var(--ws-word-needs); }
20
+ @media (hover: hover) {
21
+ .ws-check:hover input:not(:checked, :indeterminate, :disabled) + .ws-check__box { background-image: linear-gradient(var(--ws-hover-strong), var(--ws-hover-strong)); }
22
+ }
23
+ /* States drawn still, for a preview or a mockup (D14): is-hover the wash, is-focus the ring round the box. */
24
+ .ws-check.is-hover input:not(:checked, :indeterminate, :disabled) + .ws-check__box { background-image: linear-gradient(var(--ws-hover-strong), var(--ws-hover-strong)); }
25
+ .ws-check.is-focus .ws-check__box { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
26
+ @media (prefers-reduced-motion: no-preference) {
27
+ .ws-check__box svg { transition: opacity var(--ws-duration-instant) var(--ws-ease-soft), transform var(--ws-duration-settle) var(--ws-ease-pop); }
28
+ }
29
+ .ws-check__words { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3xs); }
30
+ .ws-check__label { font-size: var(--ws-text-body); line-height: var(--ws-check-line); color: var(--color-text-heading); font-weight: 500; }
31
+ .ws-check--quiet { --ws-check-edge: var(--color-text-muted); }
32
+ .ws-check--sm { --ws-check: var(--ws-icon); --ws-check-line: var(--space-md); gap: var(--space-xs); }
33
+ .ws-check--sm .ws-check__label { font-size: var(--ws-text-dense); }
34
+ .ws-check--step .ws-check__label { font-weight: 400; }
35
+ .ws-check--step:has(input:checked) .ws-check__label { color: var(--color-text-muted); }
36
+ .ws-check--control { --ws-check-line: var(--ws-leading-control); }
37
+ .ws-check--control .ws-check__label { font-size: var(--ws-text-control); }
38
+ /* Disabled: the input's own state (ws-check--disabled is 0.4.0's class, still honoured for markup written then). */
39
+ .ws-check--disabled, .ws-check:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
40
+ /* Touch: one line is a 40 px row, the box still on the label's first line. A --control check is one line of 18, so its
41
+ row is a 40 tall box with the line centred in it (an 11 px pad would be off the scale). */
42
+ @media (pointer: coarse) {
43
+ .ws-check { padding-block: calc((var(--ws-touch) - var(--ws-check-line)) / 2); }
44
+ .ws-check--control { align-items: center; min-height: var(--ws-touch); padding-block: 0; }
45
+ }
package/design-system/components/Chip/README.md CHANGED
@@ -1,32 +1,41 @@
1
- A small fact or filter in a 24px pill, in one of six tones; its sibling `ChangeChip` says a number went up, down or stayed.
1
+ A small fact in a 24 px tag, in one of six tones, a rating tone or the Example mark; its sibling `ChangeChip` says a
2
+ number went up, down or stayed.
2
3
 
3
4
  ## Use it when
4
5
 
5
6
  - A short fact belongs beside a title or a row ("Version 1", "Cold call", "4.5+ stars").
6
- - A filter needs a removable or markable pill.
7
+ - A rating needs its word beside its mark ("Strong", "Getting there", "Needs work").
8
+ - A card shows made-up numbers (a first open, a mockup): chip it `Example` beside its title.
7
9
  - A number has a change worth calling out beside it: `ChangeChip` ("12% since Friday", "3 weeks in a row").
8
10
 
9
11
  ## Not for
10
12
 
11
- - An act that does something when clicked: use `Button` (`ghost`, `small`) or `IconButton`.
13
+ - An act that does something when clicked: use `Button` (`well`, `small`) or `IconButton`.
12
14
  - A mode or view switch: use `Segmented`.
15
+ - A count on a face or a nav row: use `Badge`.
13
16
  - A long label or a sentence: a chip's words are a fact, not a paragraph.
14
17
 
15
18
  ## Anatomy
16
19
 
17
20
  ### Chip
18
21
 
19
- - Box: 24px (`--space-lg`) tall, `--ws-radius-chip` (2px) corners, 8px (`--space-xs`) sides.
20
- - Edge: the 0.5px chip edge (`--ws-edge-chip`), drawn as an inset ring, except the tinted tones which have none.
21
- - Words: 12px medium, one line, truncates rather than wraps.
22
- - Optional icon: 12px (`--ws-icon-sm`), before the words.
22
+ - Box: 24 px (`--space-lg`) tall, 4 px corners (`--ws-radius-control`, Seth's tag), 8 px (`--space-xs`) sides.
23
+ - Edge: the 0.5 px chip edge (`--ws-edge-chip`), drawn inside, on the plain tone only; tinted tones have none.
24
+ - Words: 13 / 18 medium (Seth's control words), one line.
25
+ - Optional icon: 12 px (`--ws-icon-sm`), 4 before the words.
26
+ - Never wider than its column: a long fact ends in an ellipsis inside `ws-chip__label` (and the chip carries a `title`).
27
+
28
+ ### Example
29
+
30
+ - The same 24 px tag with a 1 px dashed edge in the muted words' grey, round ends (Seth's "about 10" px corners, snapped to
31
+ the 12 step), 11 px semibold muted words, no fill.
23
32
 
24
33
  ### ChangeChip
25
34
 
26
- - Box: the same chip shape, `--ws-radius-chip` corners, the 0.5px chip edge, no fill (always the cream).
27
- - Mark: a 12px diagonal arrow, up-right for a rise, down-right for a fall, or another mark (a dash) for "the same"; `null`
28
- for "a run that only grows", which shows no mark at all.
29
- - Words: 12px medium, the mark's colour (never colour alone: the words always say what happened too).
35
+ - Box: 24 px, 2 px corners (North's data chip), the 0.5 px chip edge, the cream.
36
+ - Mark: a 12 px diagonal arrow, up-right for a rise, down-right for a fall, a dash for "the same"; none for "a run that
37
+ only grows".
38
+ - Words: 12 px medium, the mark's colour (never colour alone: the words say what happened too).
30
39
 
31
40
  ## Variants and sizes
32
41
 
@@ -35,45 +44,47 @@ A small fact or filter in a 24px pill, in one of six tones; its sibling `ChangeC
35
44
  | Tone | Fill | Words | Where |
36
45
  | --- | --- | --- | --- |
37
46
  | `neutral` | `--color-bg-page` (cream), chip edge | `--color-text-body` | a plain fact ("Version 1") |
38
- | `sunk` | `--ws-surface-sunk` | `--color-text-body` | a fact that sits on a lighter card |
39
- | `accent` | `--ws-surface-sunk` | `--color-text-interactive` (mid blue) | a fact that is also a quiet link-coloured note |
40
- | `live` | `--ws-tint-live` (teal 12%) | `--ws-word-positive` | done, ready, gone well |
47
+ | `sunk` | `--ws-surface-sunk` | `--color-text-body` | a fact on a lighter card |
48
+ | `accent` | `--ws-surface-sunk` | `--color-text-interactive` (mid blue) | a quiet link-coloured note |
49
+ | `live` | `--ws-tint-live` (teal 12%) | `--ws-word-positive` | done, ready, gone well; the rating "Strong" |
41
50
  | `navy` | `--ws-surface-sunk` | `--color-text-heading`, semibold | a count or a highlighted fact ("New") |
42
51
  | `needs` | `--ws-tint-needs` (salmon 10%) | `--ws-word-needs` | something needs you ("2 behind") |
52
+ | `middle` | `--ws-card-tint-blue` | `--color-text-interactive` | the rating's middle band ("Getting there") |
53
+ | `needs-work` | `--ws-tint-needs-work` (Seth's pink at 20%) | `--ws-word-needs-work` (#B42D68) | the rating "Needs work" |
54
+ | `example` | none, dashed muted edge | `--color-text-muted`, 11 px semibold | made-up numbers |
43
55
 
44
56
  ### ChangeChip marks
45
57
 
46
58
  | Mark | Colour | Meaning |
47
59
  | --- | --- | --- |
48
- | up (`arrowUp`) | `--ws-word-positive` (AA teal) | the number rose |
49
- | down (`arrowDown`) | `--color-text-interactive` (mid blue, never red) | the number fell |
50
- | another mark (e.g. a dash) | `--color-text-muted` (grey) | the number stayed the same |
51
- | `null` (no mark) | `--ws-word-positive` (AA teal) | a run that only grows ("3 weeks in a row"): nothing to compare against, so no arrow, but still a good-news tone |
60
+ | up | `--ws-word-positive` (AA teal) | the number rose |
61
+ | down | `--color-text-interactive` (mid blue, never red) | the number fell |
62
+ | a dash | `--color-text-muted` | the number stayed the same |
63
+ | none | `--ws-word-positive` | a run that only grows ("3 weeks in a row") |
52
64
 
53
65
  ## States
54
66
 
55
- - **Default:** as the tone or mark above; there is no hover, focus or pressed state, since a chip is not a control.
56
- - **Selected / pending / disabled / loading:** not applicable to either component; both are read-only facts.
57
- - **Error:** not applicable; use the `needs` tone for a fact that needs attention, never an error border.
67
+ - **Default:** as the tone above; a chip is not a control, so it has no hover, focus or press.
68
+ - **Selected / pending / disabled / loading:** not applicable; chips are read-only facts.
69
+ - **Error:** not applicable; use `needs` for a fact that needs attention, never an error border.
58
70
  - **Empty:** a chip with nothing to say is left out, never rendered blank.
59
- - **Long label:** the words truncate with an ellipsis (`.truncate`) rather than wrap or push the layout.
60
- - **Narrow:** the chip shrinks to its content down to a minimum of its icon and a few characters.
61
- - **Touch:** chips are not tap targets; a chip that must be removable is paired with an `IconButton` beside it.
71
+ - **Long label:** cut with an ellipsis inside `ws-chip__label`, whole in the chip's `title`.
72
+ - **Narrow:** the chip shrinks to its column, never past it.
73
+ - **Touch:** chips are not tap targets; a chip that must be removable is paired with an `IconButton`.
74
+ - **Dark:** every tone takes its tint's and its words' dark values; every pair stays AA.
62
75
 
63
76
  ## Behaviour
64
77
 
65
- - Keyboard / pointer: none; both are `<span>`s. A chip that must be dismissed or clicked wears an `IconButton` next to it,
66
- never a click handler on the chip itself.
67
- - `ChangeChip` carries `aria-label` (and a `title`) for what it means when the visible words are shortened ("2" instead
68
- of "down 2% since Friday").
69
- - Motion: neither animates on its own; a chip appearing in a list may rise with its row (`ws-rise`).
78
+ - Keyboard / pointer: none; both are `<span>`s.
79
+ - `ChangeChip` carries `aria-label` (and a `title`) when its visible words are shortened.
80
+ - Motion: none of its own; a chip arriving in a list rises with its row (`ws-rise`).
70
81
 
71
82
  ## Content
72
83
 
73
- - Sentence case except where the source number itself has a case (a version number, a percentage).
74
- - A `ChangeChip`'s words always carry the direction in words too, never colour alone ("12% since Friday", not just "12%").
75
- - A falling number is mid blue, never red (house rule, applies to `ChangeChip--down`).
76
- - No em dashes in a chip's or a change chip's words.
84
+ - Sentence case except where the source has a case (a version, a percentage).
85
+ - A `ChangeChip`'s words carry the direction in words too ("12% since Friday", not just "12%").
86
+ - A falling number is mid blue, never red.
87
+ - No em dashes.
77
88
 
78
89
  ## Props
79
90
 
@@ -81,30 +92,50 @@ A small fact or filter in a 24px pill, in one of six tones; its sibling `ChangeC
81
92
 
82
93
  | Name | Type | Meaning |
83
94
  | --- | --- | --- |
84
- | `tone` | `'neutral' \| 'sunk' \| 'accent' \| 'live' \| 'navy' \| 'needs'` | the look, default `neutral` |
85
- | `icon` | `IconName` | an optional 12px icon before the words |
95
+ | `tone` | `'neutral' \| 'sunk' \| 'accent' \| 'live' \| 'navy' \| 'needs' \| 'middle' \| 'needs-work' \| 'example'` | the look, default `neutral` |
96
+ | `icon` | `IconName` | an optional 12 px icon before the words |
86
97
  | `children` | `ReactNode` | the words |
87
98
 
88
99
  ### ChangeChip
89
100
 
90
101
  | Name | Type | Meaning |
91
102
  | --- | --- | --- |
92
- | `icon` | `IconName \| null` | `arrowUp`, `arrowDown`, another mark for "the same", or `null` for no mark |
103
+ | `icon` | `IconName \| null` | `arrowUp`, `arrowDown`, a dash for "the same", or `null` for no mark |
93
104
  | `words` | `string` | what the chip shows |
94
- | `label` | `string` | what a screen reader and the tooltip say when the chip's own words are shortened |
105
+ | `label` | `string` | what a screen reader and the tooltip say when the words are shortened |
95
106
 
96
107
  ## Rules
97
108
 
98
- - Six tones only; a seventh look is a sign the screen needs a different component, not a new tone (the reference
99
- implementation's whole tone set).
100
- - `needs` is a mark, never a wash across a row: the 10% salmon tint stays inside the chip.
101
- - `ChangeChip` never uses red; a fall is mid blue, matching the house rule that a falling number is never alarmed in red.
102
- - The kit has no "the same" tone for a change chip: the system's own neutral grey is a reported gap.
103
- - `ChangeChip` is drawn with a server-safe class helper, not the kit's client-only one, so it can render in a server
104
- component (an audit note, 28 Oct 2026).
109
+ - Six fact tones, the three rating tones and Example; a further look is a sign the screen needs another component.
110
+ - Ratings (D10): strong is teal (`live`), the middle band mid blue (`middle`), needs work Seth's pink (`needs-work`, its
111
+ words the AA step #B42D68). Salmon stays "needs you" (`needs`).
112
+ - Made-up numbers are always chipped `Example` (issue #8, Seth's v7 first open); real numbers never are.
113
+ - `needs` is a mark, never a wash across a row: the tint stays inside the chip.
114
+ - `ChangeChip` never uses red; a fall is mid blue.
105
115
 
106
116
  ## Source
107
117
 
108
- **Derived from**: the system's six chip tones, the change-chip mark colours (teal for a rise or a run, mid blue
109
- never red for a fall, grey for "the same"), and the kit's own reasoning for a chip's shape. **Precedent**: the
110
- first product built on the system.
118
+ **Derived from**: Seth's tag (Grow drawer 301:2018: 24 tall, 4 px corners, 13 / 18 medium, the pink at 20%), the
119
+ Example chip from his v7 first open (issue #8), North's data chip for `ChangeChip` (style1.css:700-701), D10's rating
120
+ tones and the field's fix for a long chip (Ignite controls.tsx: a label that truncates).
121
+
122
+ ## Markup
123
+
124
+ ```html
125
+ <span class="ws-chip ws-chip--needs-work">Needs work</span>
126
+ <span class="ws-chip ws-chip--example">Example</span>
127
+ <span class="ws-chip ws-chip--sunk" title="Referred by Dana Alvarez at the open house">
128
+ <span class="ws-chip__label">Referred by Dana Alvarez at the open house</span>
129
+ </span>
130
+ <span class="ws-change ws-change--up" aria-label="Up 12% since Friday" title="Up 12% since Friday">
131
+ <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 12L12 4M6 4h6v6"/></svg>
132
+ 12% since Friday
133
+ </span>
134
+ ```
135
+
136
+ ## Styles
137
+
138
+ `design-system/components/Chip/style.css`: `ws-chip` with its tones (`ws-chip--sunk`, `ws-chip--accent`,
139
+ `ws-chip--live`, `ws-chip--navy`, `ws-chip--needs`, `ws-chip--middle`, `ws-chip--needs-work`, `ws-chip--example`) and
140
+ `ws-chip__label`. `ws-change` (ChangeChip)
141
+ is the house's (`_house.css`, Chips).
package/design-system/components/Chip/preview.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Actions" height=168 -->
1
+ <!-- @dsCard group="Actions" height=330 -->
2
2
  <!doctype html>
3
3
  <html>
4
4
  <head>
@@ -11,8 +11,8 @@
11
11
  <div class="ws-stage ws-stage--column">
12
12
 
13
13
  <div class="ws-stack">
14
- <span class="ws-muted">Chip: the six tones</span>
15
- <div class="ws-cluster ws-cluster--loose">
14
+ <span class="ws-muted">Chip: the six tones (24 px, 4 px corners, 13 px medium)</span>
15
+ <div class="ws-cluster">
16
16
  <span class="ws-chip">Version 1</span>
17
17
  <span class="ws-chip ws-chip--sunk">Cold call</span>
18
18
  <span class="ws-chip ws-chip--accent">4.5+ stars</span>
@@ -22,9 +22,34 @@
22
22
  </div>
23
23
  </div>
24
24
 
25
+ <div class="ws-stack">
26
+ <span class="ws-muted">Rating tones: strong (teal), getting there (mid blue), needs work (Seth's pink tag)</span>
27
+ <div class="ws-cluster">
28
+ <span class="ws-chip ws-chip--live">Strong</span>
29
+ <span class="ws-chip ws-chip--middle">Getting there</span>
30
+ <span class="ws-chip ws-chip--needs-work">Needs work</span>
31
+ </div>
32
+ </div>
33
+
34
+ <div class="ws-stack">
35
+ <span class="ws-muted">Example: made-up numbers, chipped beside the card's title</span>
36
+ <div class="ws-cluster">
37
+ <span class="ws-section">October goal</span>
38
+ <span class="ws-chip ws-chip--example">Example</span>
39
+ </div>
40
+ </div>
41
+
42
+ <div class="ws-stack" style="max-width: 240px;">
43
+ <span class="ws-muted">A long fact in a narrow column: cut with an ellipsis, whole in its title</span>
44
+ <span class="ws-chip ws-chip--sunk" title="Referred by Dana Alvarez at the open house">
45
+ <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="8" cy="5.5" r="2.5"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4"/></svg>
46
+ <span class="ws-chip__label">Referred by Dana Alvarez at the open house</span>
47
+ </span>
48
+ </div>
49
+
25
50
  <div class="ws-stack">
26
51
  <span class="ws-muted">ChangeChip: up (AA teal), down (mid blue), the same (grey), no mark (a run that only grows)</span>
27
- <div class="ws-cluster ws-cluster--loose">
52
+ <div class="ws-cluster">
28
53
  <span class="ws-change ws-change--up" aria-label="Up 12% since Friday" title="Up 12% since Friday">
29
54
  <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 12L12 4M6 4h6v6"/></svg>
30
55
  12% since Friday
package/design-system/components/Chip/style.css ADDED
@@ -0,0 +1,17 @@
1
+ /* ---- Chip: a fact in a 24 px tag, Seth's (0.5.0, D1): 4 px corners, 13 / 18 medium words, 8 px sides; the cream with
2
+ the 0.5 px chip edge, or a tint. Never wider than its column: a long fact ends in an ellipsis inside __label (give the
3
+ chip a title). Restates the house's chip (_house.css), so that copy can go; ChangeChip (.ws-change) is unchanged. ---- */
4
+ .ws-chip { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--space-xxs); max-width: 100%; min-width: 0; height: var(--space-lg); padding: 0 var(--space-xs); border-radius: var(--ws-radius-control); background: var(--color-bg-page); color: var(--color-text-body); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-chip); }
5
+ .ws-chip svg { flex-shrink: 0; width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
6
+ .ws-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
7
+ .ws-chip--sunk { background: var(--ws-surface-sunk); box-shadow: none; }
8
+ .ws-chip--accent { background: var(--ws-surface-sunk); color: var(--color-text-interactive); box-shadow: none; }
9
+ .ws-chip--live { background: var(--ws-tint-live); color: var(--ws-word-positive); box-shadow: none; }
10
+ .ws-chip--navy { background: var(--ws-surface-sunk); color: var(--color-text-heading); font-weight: 600; box-shadow: none; }
11
+ .ws-chip--needs { background: var(--ws-tint-needs); color: var(--ws-word-needs); box-shadow: none; }
12
+ /* Rating tones (D10): strong is --live; the middle band ("Getting there") is mid blue; needs work is Seth's pink as a
13
+ 20% tint, its words the AA step (#B42D68, 301:2018). */
14
+ .ws-chip--middle { background: var(--ws-card-tint-blue); color: var(--ws-rating-middle); box-shadow: none; }
15
+ .ws-chip--needs-work { background: var(--ws-tint-needs-work); color: var(--ws-word-needs-work); box-shadow: none; }
16
+ /* Example (issue #8, Seth's v7 first open): made-up numbers are chipped. A 1 px dashed edge, 11 px semibold, a round tag. */
17
+ .ws-chip--example { border-radius: var(--ws-radius-bubble); background: transparent; color: var(--color-text-muted); font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); font-weight: 600; box-shadow: none; outline: var(--ws-line) dashed var(--color-text-muted); outline-offset: calc(var(--ws-line) * -1); }
package/design-system/components/Combobox/README.md CHANGED
@@ -17,21 +17,23 @@ A searchable field for choosing from a long list, matching as you type and offer
17
17
 
18
18
  ## Anatomy
19
19
 
20
- - Field: 32 px tall (`--ws-control-h`, 40 px on touch), `--ws-radius-control` corners, white `--ws-field` ground,
21
- `--ws-shadow-hairline`, a 16 px chevron at the right, `--color-text-muted`, decorative, exactly as `Select`'s own
22
- chevron.
20
+ - Field: 32 px tall (`--ws-control-h`; 40 px on touch, its words 16 so a phone does not zoom in), `--ws-radius-control` corners, white `--ws-field` ground,
21
+ the 0.5 px card edge drawn inside, a 16 px navy chevron at the right, decorative, exactly as `Select`'s own chevron.
22
+ Its own input draws no focus of its own: the whole field takes the kit's ring while it is typed in.
23
23
  - Panel: `ws-menu` exactly (cream, `--ws-radius-card`, `--ws-shadow-lift`, `--space-xxs` padding), anchored directly
24
24
  under the field, capped to 8 rows of 32 px (`--ws-control-h`) then scrolling inside, never the page.
25
25
  - Row: 32 px, the typed portion of a match in navy medium (`--color-text-heading`, weight 500, matching `.ws-menu-item`'s
26
26
  own navy-medium words) and the rest of the word in body grey regular (`--color-text-body`), so the match is visible at
27
27
  a glance. This two-weight split is specific to `Combobox`'s rows; `Menu`'s own rows stay uniformly navy-medium.
28
- - Highlighted row: `--ws-surface-sunk`, the same tint as `.ws-menu-item:hover`.
28
+ - Highlighted row (the keyboard's, `aria-activedescendant`): `--ws-surface-sunk`; under the pointer, the navy wash
29
+ (`--ws-hover`); rows have 6 px corners.
29
30
  - "No matches" row: muted words (`--color-text-muted`), not a real option, not focusable.
30
31
  - "Create" row: a text act (`ws-act`-style navy medium, underlined on hover) with a small leading plus icon, since
31
32
  creating a new value is an act, not a choice among existing ones (08-choosing-components.md: "Words that act inside a
32
33
  sentence | ... text (navy: a quiet act)").
33
34
  - Chosen value: plain text in the field (single choice) or a row of `Chip`s (multiple choices, `TagInput` behaviour),
34
- each with a small inline remove mark, followed by the still-typable search text.
35
+ each a 24 px tag (4 px corners, 13 / 18 words) with a 12 px navy remove x that is a 24 px target, followed by the
36
+ still-typable search text.
35
37
 
36
38
  ## Variants and sizes
37
39
 
@@ -48,13 +50,19 @@ There is one size; both variants expand to 40 px (or taller, for wrapped chips)
48
50
  - **Open, with matches:** the panel shows rows with the two-weight highlight; the active row is sunk.
49
51
  - **No matches:** the panel shows the muted "No matches" row, and the "Create" row if creating is allowed.
50
52
  - **Multi-select:** chips sit in the field; the panel still opens below for further choices.
51
- - **Focus:** the field's edge turns mid blue with the focus halo, exactly as `Input`.
52
- - **Disabled:** the field is not editable, the panel cannot open; shown at reduced emphasis.
53
+ - **Focus:** the kit's focus ring, 2 px navy, 2 px out, as `Input`'s (a field's edge darkens under the pointer).
54
+ - **Focus, pictured (a preview or a mockup):** `ws-combobox__field--focus` draws the ring the typing state draws.
55
+ - **Error:** `aria-invalid="true"` on the input gives the field `Input`'s 1 px error edge (the salmon's AA step); the
56
+ message below says what to do (`ws-field-msg--error`, named by `aria-describedby`).
57
+ - **Disabled:** the field is not editable, the panel cannot open; `Input`'s sunk ground and muted words.
53
58
  - **Empty:** no value, no chips, the placeholder shows.
54
59
  - **Long label:** a long chosen value truncates in the field; a long row's words wrap rather than truncate inside the
55
60
  panel, since the panel has the room `Select`'s native control does not.
56
61
  - **Narrow:** the field and panel are always the width of their column.
57
- - **Touch:** the field and its rows expand to the 40 px floor.
62
+ - **Touch:** the field, its rows, the create act and the empty line expand to the 40 px floor (the panel still caps at
63
+ 8 rows); a chip's remove keeps its 16 px mark and is a 40 px target through its hit area, the chips 8 apart so it
64
+ never reaches the next one.
65
+ - **Dark:** the field and the menu take their dark values.
58
66
 
59
67
  ## Behaviour
60
68
 
@@ -62,8 +70,8 @@ There is one size; both variants expand to 40 px (or taller, for wrapped chips)
62
70
  (or runs the "Create" row); Escape closes the panel and returns focus to the field; in multi-select, Backspace on an
63
71
  empty search removes the last chip.
64
72
  - Pointer / touch: clicking a row chooses it; clicking outside closes the panel, as `Menu`'s own dismiss behaviour.
65
- - Motion: the panel opens on `--ws-duration-gentle` on `--ws-ease-soft`, exactly as `Menu`; rows have no motion of their
66
- own.
73
+ - Motion: the panel opens as `Menu` does, but grows from its top left corner, under the field's left edge, where it
74
+ hangs (D7: an open grows from its slot); rows have no motion of their own.
67
75
  - Reduced motion: the panel appears without its rise.
68
76
 
69
77
  ## Content
@@ -98,4 +106,29 @@ There is one size; both variants expand to 40 px (or taller, for wrapped chips)
98
106
 
99
107
  **Derived from**: `Select`'s field chrome and `Menu`'s panel chrome, combined with the search, match-highlight and
100
108
  create-row behaviour a plain select cannot offer. **Precedent**: an intentional addition decided from the system,
101
- 26 Oct 2026 (08-choosing-components.md already named the need without a built component for it).
109
+ 26 Oct 2026 (08-choosing-components.md already named the need without a built component for it). 0.5.0: the field's
110
+ focus ring (its input had `outline: none` and no replacement), the 24 px remove target (it was 10 by 10), `Input`'s
111
+ inside edge and hover.
112
+
113
+ ## Markup
114
+
115
+ ```html
116
+ <div class="ws-combobox">
117
+ <label class="ws-label" for="cb-address">Street address</label>
118
+ <span class="ws-combobox__field">
119
+ <input id="cb-address" type="text" role="combobox" aria-expanded="true" aria-controls="cb-list" aria-activedescendant="cb-opt-1" value="pine">
120
+ <svg class="ws-combobox__chevron" 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 6l4 4 4-4"/></svg>
121
+ </span>
122
+ <div class="ws-menu ws-combobox__panel" role="listbox" id="cb-list">
123
+ <div class="ws-combobox__option" role="option" id="cb-opt-0"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest">wood Drive</span></div>
124
+ <div class="ws-combobox__option ws-combobox__option--active" role="option" id="cb-opt-1" aria-selected="true"><span class="ws-combobox__match">Pine</span><span class="ws-combobox__rest"> Street</span></div>
125
+ </div>
126
+ </div>
127
+ ```
128
+
129
+ ## Styles
130
+
131
+ `design-system/components/Combobox/style.css`: `ws-combobox`, `__field` (and `ws-combobox__field--focus`, the pictured
132
+ typing state), `__chevron`, `__panel`, `__option` (and `--active`), `__match`, `__rest`, `__empty`, `__create`,
133
+ `__chip`. The panel is `Menu`'s `ws-menu`. The chevron reads `--ws-field-mark` (navy; the field's ink on the navy
134
+ ground, where the field stays white).