@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/SegmentedProgress/preview.html ADDED
@@ -0,0 +1,69 @@
1
+ <!-- @dsCard group="Progress" height=640 -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>SegmentedProgress</title>
7
+ <link rel="stylesheet" href="../../tokens.css">
8
+ <link rel="stylesheet" href="../bundle.css">
9
+ </head>
10
+ <body>
11
+ <div class="ws-stage ws-stage--column">
12
+
13
+ <div class="ws-stack" style="max-width: 1350px;">
14
+ <span class="ws-muted">Seth's Fixes checklist: 1 of 6 fixes done, three areas of two</span>
15
+ <section class="ws-segmented-progress" aria-label="1 of 6 fixes done: Website 0 of 2, Social 1 of 2, Local search 0 of 2">
16
+ <p class="ws-figure ws-figure--pane">1 of 6</p>
17
+ <p class="ws-segmented-progress__line">From your Nov 2 audit. Grow checks each one again where it can.</p>
18
+ <div class="ws-segmented-progress__areas" aria-hidden="true">
19
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">Website</span></div>
20
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">Social</span></div>
21
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">Local search</span></div>
22
+ </div>
23
+ </section>
24
+ </div>
25
+
26
+ <div class="ws-stack" style="max-width: 1350px;">
27
+ <span class="ws-muted">Areas of different sizes, one finished, drawn in once</span>
28
+ <section class="ws-segmented-progress" aria-label="5 of 9 steps done: Profile 3 of 3, Listings 2 of 4, Reviews 0 of 2">
29
+ <p class="ws-figure ws-figure--pane">5 of 9</p>
30
+ <p class="ws-segmented-progress__line">Set up for the Atlanta launch.</p>
31
+ <div class="ws-segmented-progress__areas" aria-hidden="true">
32
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar ws-tick-strip--draw" style="--n: 3;"><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 0;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 1;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 2;"></span></div><span class="ws-segmented-progress__label">Profile, done</span></div>
33
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar ws-tick-strip--draw" style="--n: 4;"><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 0;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 1;"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">Listings</span></div>
34
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">Reviews</span></div>
35
+ </div>
36
+ </section>
37
+ </div>
38
+
39
+ <div class="ws-stack" style="width: 320px; max-width: 100%;">
40
+ <span class="ws-muted">A 320 px column: five areas wrap, a long label truncates with its title</span>
41
+ <section class="ws-segmented-progress" aria-label="2 of 10 fixes done">
42
+ <p class="ws-figure ws-figure--pane">2 of 10</p>
43
+ <p class="ws-segmented-progress__line">From your Nov 2 audit.</p>
44
+ <div class="ws-segmented-progress__areas" aria-hidden="true">
45
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">Website</span></div>
46
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">Social</span></div>
47
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label" title="Local search and Google Maps">Local search and Google Maps</span></div>
48
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">Zillow</span></div>
49
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">AI answers</span></div>
50
+ </div>
51
+ </section>
52
+ </div>
53
+
54
+ <div class="ws-stack" style="max-width: 1350px;">
55
+ <span class="ws-muted">Nothing done yet: every segment the track</span>
56
+ <section class="ws-segmented-progress" aria-label="0 of 6 fixes done">
57
+ <p class="ws-figure ws-figure--pane">0 of 6</p>
58
+ <p class="ws-segmented-progress__line">Start with the one Grow marked first.</p>
59
+ <div class="ws-segmented-progress__areas" aria-hidden="true">
60
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">Website</span></div>
61
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">Social</span></div>
62
+ <div class="ws-segmented-progress__area"><div class="ws-tick-strip ws-tick-strip--bar" style="--n: 2;"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div><span class="ws-segmented-progress__label">Local search</span></div>
63
+ </div>
64
+ </section>
65
+ </div>
66
+
67
+ </div>
68
+ </body>
69
+ </html>
package/design-system/components/SegmentedProgress/style.css ADDED
@@ -0,0 +1,11 @@
1
+ /* ---- SegmentedProgress: progress split by area and by step, Seth's "1 of 6" bar with a label under each area ---- */
2
+ /* The head (the pane figure, 6, a line, 6) then the areas 12 apart, equal widths; each area is a TickStrip --bar (one
3
+ segment a step, 12 tall, 4 apart, 2 px corners) with its label 8 under it. On a narrow column the areas wrap onto
4
+ the same columns (at least 96 wide). */
5
+ .ws-segmented-progress { display: flex; flex-direction: column; gap: var(--space-xxs-plus); }
6
+ /* The pane figure stands alone: proportional numerals put its ink on the bar's edge, as Seth draws "1 of 6". */
7
+ .ws-segmented-progress > .ws-figure { font-variant-numeric: proportional-nums; }
8
+ .ws-segmented-progress__line { font-size: var(--ws-text-body); line-height: var(--ws-leading-row); color: var(--color-text-body); text-wrap: pretty; }
9
+ .ws-segmented-progress__areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--space-6xl)), 1fr)); gap: var(--space-md) var(--space-sm); }
10
+ .ws-segmented-progress__area { display: flex; min-width: 0; flex-direction: column; gap: var(--space-xs); }
11
+ .ws-segmented-progress__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ws-text-control); font-weight: 500; line-height: var(--ws-leading-control); color: var(--color-text-muted); }
package/design-system/components/Select/README.md CHANGED
@@ -17,9 +17,11 @@ A native dropdown that matches `Input`: label above, a chevron inside the field,
17
17
  ## Anatomy
18
18
 
19
19
  - Box: 32px tall (`--ws-control-h`, 40px on touch), `--ws-radius-control` (4px) corners, white ground (`--ws-field`),
20
- the fine hairline edge.
21
- - Chevron: 16px (`--ws-icon`), `--color-text-muted`, centred vertically inside the field's right side, decorative
20
+ the 0.5 px card edge (`--ws-edge-card`) drawn inside, so a scroller never clips it.
21
+ - Chevron: 16px (`--ws-icon`), navy (Seth's chevrons are navy), 8 px in from the right, decorative
22
22
  (`pointer-events: none`).
23
+ - `--sm`: Seth's chip select (Tally 319:3460), 28 tall on the cream, 12 / 16 medium navy words, 12 px in at the left,
24
+ a 12 px chevron, for a chart's or a toolbar's own controls.
23
25
  - Label: 12px medium, `--color-text-body`, above the field.
24
26
  - Sides: 12px left, room for the chevron on the right.
25
27
  - Message below: as `Input`'s (hint muted, error in `--ws-word-needs` with a warning icon).
@@ -29,31 +31,35 @@ A native dropdown that matches `Input`: label above, a chevron inside the field,
29
31
  | Variant | What it looks like | Where |
30
32
  | --- | --- | --- |
31
33
  | Default | 32px, as above | every select on a card or a form |
34
+ | `--sm` | 28px on the cream (no field ground), the 0.5 px edge, 12 / 16 medium navy words, a 12 px chevron | Tally's chip select: a toolbar or a chart's own controls |
35
+ | With a dot (`ws-select-wrap__dot`) | a 6 px category dot before the value (its colour in `--ws-dot`), the words 6 past it | a select whose options are categories with a colour (Tally's select chip, 319:3445) |
32
36
 
33
- There is one size; it grows to 40px on a touch screen like every other field.
37
+ Two sizes: the default 32 and `--sm` 28; both grow to 40px on a touch screen like every other field (the words 16, so a
38
+ phone does not zoom into them).
34
39
 
35
40
  ## States
36
41
 
37
42
  - **Default (rest):** white ground, fine grey edge, the chosen option's words in `--color-gray-8`.
38
- - **Hover:** the native browser affordance for a select; the field itself does not change colour.
39
- - **Focus:** the edge turns mid blue and the focus halo shows, exactly as `Input`'s.
43
+ - **Hover (a mouse only):** the edge darkens, as `Input`'s.
44
+ - **Focus:** the kit's focus ring, as `Input`'s.
40
45
  - **Pressed:** opens the browser's native option list; no custom styling reaches inside it.
41
46
  - **Selected:** the chosen option's words show in the field; there is no separate "selected" look for the control itself.
42
47
  - **Pending / loading:** not applicable; a select has no network state of its own.
43
- - **Disabled:** not editable, options unreachable; shown at reduced emphasis.
44
- - **Error:** the edge turns salmon and a message rises in below with a warning icon, exactly as `Input`'s.
48
+ - **Disabled:** the sunk cream ground, muted words and chevron.
49
+ - **Error:** the salmon's AA step as a 1 px edge and a message below, exactly as `Input`'s.
45
50
  - **Empty:** a placeholder option ("Choose a source") sits first, unselected by default once a real choice is required.
46
51
  - **Long label:** the field's own label wraps rather than truncates; a long chosen option's words truncate inside the
47
- field (the native browser behaviour).
52
+ field with an ellipsis.
48
53
  - **Narrow:** the field is always the width of its column; the chevron never moves.
49
- - **Touch:** grows to 40px tall; the native option sheet takes over on a phone.
54
+ - **Touch:** grows to 40px tall and its words to 16 px (the small one too), so a phone does not zoom into it; the
55
+ native option sheet takes over on a phone.
56
+ - **Dark:** as `Input`'s.
50
57
 
51
58
  ## Behaviour
52
59
 
53
60
  - Keyboard: a native `<select>`; arrow keys move between options, typing a letter jumps to it, Enter or Space opens it.
54
61
  - Pointer / touch: opens the platform's own list (a native sheet on a phone); no part of the list is custom-drawn.
55
- - Motion: border colour, background and shadow transition over `--ws-duration-instant` on `--ws-ease-soft`; an error
56
- message rises in over `--ws-duration-gentle`.
62
+ - Motion: the edge over the hover beat; an error message rises in; still under reduced motion.
57
63
 
58
64
  ## Content
59
65
 
@@ -82,5 +88,34 @@ There is one size; it grows to 40px on a touch screen like every other field.
82
88
 
83
89
  ## Source
84
90
 
85
- **Derived from**: the system's rule that a field without a kit equivalent is drawn to match `Input` exactly.
91
+ **Derived from**: the system's rule that a field without a kit equivalent is drawn to match `Input` exactly, and
92
+ Seth's chip select (Tally 319:3460, 319:3464). Its 27 px height snaps to 28 (D3), its 0.5 px #D3D3D3 border is the
93
+ kit's inside edge, its 14 px chevron the 12 icon step; the category dot it carries is left to the page.
86
94
  **Precedent**: the first product built on the system.
95
+
96
+ ## Markup
97
+
98
+ ```html
99
+ <div class="ws-field">
100
+ <label class="ws-label" for="kind">Call kind</label>
101
+ <span class="ws-select-wrap">
102
+ <select class="ws-select" id="kind"><option>Cold call</option><option selected>Live transfer</option></select>
103
+ <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 6l4 4 4-4"/></svg>
104
+ </span>
105
+ </div>
106
+ <span class="ws-select-wrap">
107
+ <select class="ws-select ws-select--sm" aria-label="Comes off"><option>Off Q1 2027</option><option>Stays</option></select>
108
+ <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
109
+ </span>
110
+ <span class="ws-select-wrap">
111
+ <span class="ws-select-wrap__dot" style="--ws-dot: var(--ws-chart-past-half);" aria-hidden="true"></span>
112
+ <select class="ws-select ws-select--sm" aria-label="Category"><option>Reviews</option><option>Listings</option></select>
113
+ <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
114
+ </span>
115
+ ```
116
+
117
+ ## Styles
118
+
119
+ `design-system/components/Select/style.css`: `ws-select-wrap` (and `__dot`), `ws-select` and `--sm`. The chevron reads
120
+ `--ws-field-mark` (navy, the field's ink on the navy ground; Input/style.css). It restates the house's
121
+ `.ws-select` (Fields).
package/design-system/components/Select/preview.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Fields" height=140 -->
1
+ <!-- @dsCard group="Fields" height=220 -->
2
2
  <!doctype html>
3
3
  <html>
4
4
  <head>
@@ -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, with a hint</span>
@@ -54,6 +54,32 @@
54
54
  </span>
55
55
  </div>
56
56
 
57
+ <div class="ws-field">
58
+ <span class="ws-muted">Small: Seth's chip select, for a chart's own controls</span>
59
+ <span class="ws-label" id="s-sm-l">Comes off</span>
60
+ <span class="ws-select-wrap">
61
+ <select class="ws-select ws-select--sm" aria-labelledby="s-sm-l">
62
+ <option>Off Q1 2027</option>
63
+ <option>Off Q2 2027</option>
64
+ <option>Stays</option>
65
+ </select>
66
+ <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
67
+ </span>
68
+ </div>
69
+
70
+ <div class="ws-field">
71
+ <span class="ws-muted">Small with a category dot (Tally's select chip)</span>
72
+ <span class="ws-label" id="s-dot-l">Category</span>
73
+ <span class="ws-select-wrap">
74
+ <span class="ws-select-wrap__dot" style="--ws-dot: var(--ws-chart-past-half);" aria-hidden="true"></span>
75
+ <select class="ws-select ws-select--sm" aria-labelledby="s-dot-l">
76
+ <option>Reviews</option>
77
+ <option>Listings</option>
78
+ <option>Calls</option>
79
+ </select>
80
+ <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg>
81
+ </span>
82
+ </div>
57
83
  </div>
58
84
  </div>
59
85
  </body>
package/design-system/components/Select/style.css ADDED
@@ -0,0 +1,22 @@
1
+ /* ---- Select: a native select dressed as the house field (0.5.0, restated so the house's Fields copy can go): Input's
2
+ ground, edge, hover, focus ring and error, a 16 px navy chevron at the right (Seth's chevrons are navy), the chosen
3
+ option cut with an ellipsis when it is longer than the field. --sm: Seth's chip select (319:3460), 28 tall on the
4
+ cream, 12 / 16 medium navy, a 12 px chevron, for a toolbar or a chart's own controls. ---- */
5
+ .ws-select-wrap { position: relative; display: flex; min-width: 0; }
6
+ .ws-select { width: 100%; min-width: 0; height: var(--ws-control-h); padding: 0 var(--space-xl) 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)); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; appearance: none; cursor: pointer; transition: box-shadow var(--ws-duration-hover) var(--ws-ease-soft); }
7
+ .ws-select-wrap > svg { position: absolute; top: 50%; right: var(--space-xs); width: var(--ws-icon); height: var(--ws-icon); transform: translateY(-50%); color: var(--ws-field-mark, var(--color-text-heading)); pointer-events: none; }
8
+ @media (hover: hover) { .ws-select:not(:disabled, [aria-invalid="true"]):hover { box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-hover); } }
9
+ .ws-select:focus-visible { background: var(--ws-field); }
10
+ .ws-select[aria-invalid="true"] { box-shadow: inset 0 0 0 var(--ws-line) var(--ws-word-needs); }
11
+ .ws-select:disabled { background: var(--ws-surface-sunk); color: var(--color-text-muted); cursor: not-allowed; }
12
+ .ws-select-wrap:has(> .ws-select:disabled) > svg { color: var(--color-text-muted); }
13
+ .ws-select--sm { height: var(--ws-control-h-sm); padding: 0 var(--space-lg) 0 var(--space-sm); background: var(--color-bg-page); color: var(--color-text-heading); font-size: var(--ws-text-dense); line-height: var(--space-md); font-weight: 500; }
14
+ .ws-select-wrap:has(> .ws-select--sm) { display: inline-flex; align-self: flex-start; }
15
+ /* The small one sits on the page's ground, not a field, so its chevron is the heading colour on every ground. */
16
+ .ws-select-wrap:has(> .ws-select--sm) > svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); color: var(--color-text-heading); }
17
+ /* A category dot before the chosen value (Tally's select chip, 319:3445): 6 px in its category's colour (set --ws-dot on
18
+ the dot, as SideList's), the words 6 past it. */
19
+ .ws-select-wrap__dot { position: absolute; top: 50%; left: var(--space-sm); width: var(--space-xxs-plus); height: var(--space-xxs-plus); border-radius: var(--radius-full); background: var(--ws-dot, var(--color-text-heading)); transform: translateY(-50%); pointer-events: none; }
20
+ .ws-select-wrap:has(> .ws-select-wrap__dot) > .ws-select { padding-left: calc(var(--space-sm) + var(--space-xxs-plus) * 2); }
21
+ /* Touch: 40 tall, the words 16 (the small one too), so a phone does not zoom the page into it on focus. */
22
+ @media (pointer: coarse) { .ws-select { height: var(--ws-touch); font-size: var(--ws-text-value); } }
package/design-system/components/ShareBar/README.md ADDED
@@ -0,0 +1,69 @@
1
+ Where a whole goes: one stacked bar of parts in their tones over what stays, a head line above and a key under it.
2
+
3
+ **Use it when**
4
+
5
+ - One amount splits into a few named parts and the story is how much of it moves (what comes off a bill, where a
6
+ commission goes).
7
+ - The parts are shares of one whole that add up, and one share matters most (it goes in the head: "38% comes off").
8
+
9
+ **Not for**
10
+
11
+ - Parts of a whole as a round picture with the total in the middle: use `Ring`'s split ring.
12
+ - Comparing separate rows against their own goals: use `GoalBars`.
13
+ - One share and the rest: use `Meter` or `TickStrip`.
14
+
15
+ **Anatomy**
16
+
17
+ - A column, 12 apart: the head, the bar, the key.
18
+ - Head: what the whole is (14/20 medium navy, wraps) and the share that matters (14/20 semibold navy, never wraps), 8
19
+ apart on one baseline.
20
+ - Bar: 14 tall, 2 px corners. Its ground is what stays (`--ws-chart-rest`, Seth's #D9D9D9). Each part is
21
+ `style="--share: 26.3%; --tone: ..."`, a 1 px cut in the page's colour after it.
22
+ - Key: wraps, 6 between rows and 14 between items; an 8 px swatch with 2 px corners, 6, 12/16 medium words in
23
+ `--color-text-body`, the figure `<b>` in the same weight and colour (Seth's key is one tone), tabular numerals. An item
24
+ with no `--tone` is what stays.
25
+
26
+ **States**
27
+
28
+ - Draw (`--draw`): each part grows from its left edge in turn, 70 ms apart (`--ws-stagger-part`), over 700 ms on the
29
+ settle curve. Set `--i` on each part.
30
+ - Nothing moves: the bar is all ground; the key says what stays.
31
+ - Loading (`--loading`): the bar as a ghost in the chart colours' sweep.
32
+ - Narrow: the head and the key wrap; the bar keeps its parts in proportion.
33
+ - Reduced motion: the parts in place, the ghost still.
34
+ - Hover, focus: none; the key carries the words.
35
+
36
+ **Behaviour**
37
+
38
+ - The `<figure>` carries `aria-label` with the whole story in one sentence; the head, bar and key are `aria-hidden`.
39
+
40
+ **Rules**
41
+
42
+ - At most five parts and what stays; past that, fold the small ones into "Other".
43
+ - Parts keep the chart tones; the words in the key stay body grey and navy, never the tone.
44
+ - A mid blue part takes `--color-text-interactive` (the mid blue in light, lifted in dark), never the raw
45
+ `--color-brand-mid-blue`, which falls under 3:1 on the dark grounds.
46
+ - Parts are in the order the head talks about them, largest first unless time decides the order.
47
+
48
+ **Source**
49
+
50
+ **Seth**: Tally report hero, "Where your $77,472 goes" (319:3322 to 319:3345). His "stays" ground is #D9D9D9, which has
51
+ no token; the kit uses `--ws-edge-card` (#D3D3D3) until one exists. His grain texture on the parts is left out. The
52
+ swatch is 8 (his 9 is off the grid) and the head's line is 20 (his 17). Overturns 09-charts' "no stacked bars".
53
+
54
+ **Markup**
55
+
56
+ ```html
57
+ <figure class="ws-share-bar" aria-label="Where your $77,472 goes: website and IDX $20,400 comes off; $57,072 stays.">
58
+ <div class="ws-share-bar__head" aria-hidden="true"><span>Where your $77,472 goes</span><span>26% comes off</span></div>
59
+ <div class="ws-share-bar__bar" aria-hidden="true">
60
+ <span class="ws-share-bar__part" style="--share: 26.3%; --tone: var(--ws-chart-past-half);"></span>
61
+ </div>
62
+ <ul class="ws-share-bar__key" aria-hidden="true">
63
+ <li class="ws-share-bar__item" style="--tone: var(--ws-chart-past-half);">Website &amp; IDX <b>$20,400</b></li>
64
+ <li class="ws-share-bar__item">The rest <b>$57,072</b> stays</li>
65
+ </ul>
66
+ </figure>
67
+ ```
68
+
69
+ **Styles**: `ShareBar/style.css`, in `bundle.css` and `fello.css` as `.ws-share-bar`. Every value is a token.
package/design-system/components/ShareBar/preview.html ADDED
@@ -0,0 +1,72 @@
1
+ <!-- @dsCard group="Charts" height=560 -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>ShareBar</title>
7
+ <link rel="stylesheet" href="../../tokens.css">
8
+ <link rel="stylesheet" href="../bundle.css">
9
+ </head>
10
+ <body>
11
+ <div class="ws-stage ws-stage--column">
12
+
13
+ <div class="ws-stack" style="max-width: 600px;">
14
+ <span class="ws-muted">Seth's Tally hero: three parts that come off over what stays, drawn in once</span>
15
+ <figure class="ws-share-bar ws-share-bar--draw" aria-label="Where your $77,472 goes: website and IDX $20,400, CRM $7,452, email and marketing $1,620; paid ads $48,000 stays. 38% comes off.">
16
+ <div class="ws-share-bar__head" aria-hidden="true"><span>Where your $77,472 goes</span><span>38% comes off</span></div>
17
+ <div class="ws-share-bar__bar" aria-hidden="true">
18
+ <span class="ws-share-bar__part" style="--share: 26.3%; --tone: var(--ws-chart-past-half); --i: 0;"></span>
19
+ <span class="ws-share-bar__part" style="--share: 9.6%; --tone: var(--ws-chart-finished); --i: 1;"></span>
20
+ <span class="ws-share-bar__part" style="--share: 2.1%; --tone: var(--ws-chart-under-half); --i: 2;"></span>
21
+ </div>
22
+ <ul class="ws-share-bar__key" aria-hidden="true">
23
+ <li class="ws-share-bar__item" style="--tone: var(--ws-chart-past-half);">Website &amp; IDX <b>$20,400</b></li>
24
+ <li class="ws-share-bar__item" style="--tone: var(--ws-chart-finished);">CRM <b>$7,452</b></li>
25
+ <li class="ws-share-bar__item" style="--tone: var(--ws-chart-under-half);">Email &amp; marketing <b>$1,620</b></li>
26
+ <li class="ws-share-bar__item">Paid ads: media <b>$48,000</b> stays</li>
27
+ </ul>
28
+ </figure>
29
+ </div>
30
+
31
+ <div class="ws-stack" style="width: 320px; max-width: 100%;">
32
+ <span class="ws-muted">A narrow column: the head and the key wrap</span>
33
+ <figure class="ws-share-bar" aria-label="Where this month's commission goes: splits 42%, fees 18%, marketing 9%, desk 6%, referrals 5%; 20% you keep.">
34
+ <div class="ws-share-bar__head" aria-hidden="true"><span>Where this month's commission goes</span><span>80% goes out</span></div>
35
+ <div class="ws-share-bar__bar" aria-hidden="true">
36
+ <span class="ws-share-bar__part" style="--share: 42%; --tone: var(--color-text-heading);"></span>
37
+ <span class="ws-share-bar__part" style="--share: 18%; --tone: var(--ws-chart-past-half);"></span>
38
+ <span class="ws-share-bar__part" style="--share: 9%; --tone: var(--ws-chart-finished);"></span>
39
+ <span class="ws-share-bar__part" style="--share: 6%; --tone: var(--ws-chart-under-half);"></span>
40
+ <span class="ws-share-bar__part" style="--share: 5%; --tone: var(--color-text-interactive);"></span>
41
+ </div>
42
+ <ul class="ws-share-bar__key" aria-hidden="true">
43
+ <li class="ws-share-bar__item" style="--tone: var(--color-text-heading);">Brokerage split <b>42%</b></li>
44
+ <li class="ws-share-bar__item" style="--tone: var(--ws-chart-past-half);">Transaction fees <b>18%</b></li>
45
+ <li class="ws-share-bar__item" style="--tone: var(--ws-chart-finished);">Marketing <b>9%</b></li>
46
+ <li class="ws-share-bar__item" style="--tone: var(--ws-chart-under-half);">Desk <b>6%</b></li>
47
+ <li class="ws-share-bar__item" style="--tone: var(--color-text-interactive);">Referrals <b>5%</b></li>
48
+ <li class="ws-share-bar__item">You keep <b>20%</b></li>
49
+ </ul>
50
+ </figure>
51
+ </div>
52
+
53
+ <div class="ws-stack" style="max-width: 600px;">
54
+ <span class="ws-muted">Nothing comes off yet: the whole bar is what stays</span>
55
+ <figure class="ws-share-bar" aria-label="Where your $77,472 goes: all of it stays until you pick the tools Fello replaces.">
56
+ <div class="ws-share-bar__head" aria-hidden="true"><span>Where your $77,472 goes</span><span>0% comes off</span></div>
57
+ <div class="ws-share-bar__bar" aria-hidden="true"></div>
58
+ <ul class="ws-share-bar__key" aria-hidden="true"><li class="ws-share-bar__item">All five tools <b>$77,472</b> stay</li></ul>
59
+ </figure>
60
+ </div>
61
+
62
+ <div class="ws-stack" style="max-width: 600px;">
63
+ <span class="ws-muted">Loading: the bar as a ghost</span>
64
+ <figure class="ws-share-bar ws-share-bar--loading" aria-busy="true" aria-label="Where your money goes, loading">
65
+ <div class="ws-share-bar__head" aria-hidden="true"><span>Where your money goes</span></div>
66
+ <div class="ws-share-bar__bar" aria-hidden="true"></div>
67
+ </figure>
68
+ </div>
69
+
70
+ </div>
71
+ </body>
72
+ </html>
package/design-system/components/ShareBar/style.css ADDED
@@ -0,0 +1,25 @@
1
+ /* ---- ShareBar: where a whole goes, one stacked bar of parts in their tones over what stays, a key under it ---- */
2
+ /* Seth's Tally hero: a head line (what the whole is, and the share that matters), 12, the bar, 12, the key. The bar is
3
+ 14 tall with 2 px corners; its ground is what stays (--ws-chart-rest); each part is style="--share: 26%; --tone: ..."
4
+ with a 1 px cut in the page's colour after it. */
5
+ .ws-share-bar { display: flex; flex-direction: column; gap: var(--space-sm); }
6
+ .ws-share-bar__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xxs) var(--space-xs); font-size: var(--ws-text-body); line-height: var(--ws-leading-row); color: var(--color-text-heading); }
7
+ .ws-share-bar__head > :first-child { flex: 1 1 auto; min-width: 0; font-weight: 500; }
8
+ .ws-share-bar__head > :last-child:not(:first-child) { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
9
+ .ws-share-bar__bar { display: flex; height: var(--space-sm-plus); overflow: hidden; border-radius: var(--ws-radius-chip); background: var(--ws-chart-rest); }
10
+ .ws-share-bar__part { flex: none; width: var(--share); height: 100%; background: var(--tone); box-shadow: var(--ws-line) 0 0 var(--color-bg-page); transform-origin: left; }
11
+ /* The key: it wraps, 6 between rows and 14 between items; an 8 px swatch, 6, 12/16 medium words. */
12
+ .ws-share-bar__key { display: flex; flex-wrap: wrap; gap: var(--space-xxs-plus) var(--space-sm-plus); font-size: var(--ws-text-dense); font-weight: 500; line-height: var(--space-md); color: var(--color-text-body); }
13
+ /* The swatch hangs in the item's start pad, centred on the first line, so the words and the figure flow as one line of
14
+ text with a plain space between them (as Seth draws "Website & IDX $20,400"), and a wrapped line keeps the indent. */
15
+ .ws-share-bar__item { position: relative; padding-inline-start: calc(var(--space-xs) + var(--space-xxs-plus)); }
16
+ .ws-share-bar__item::before { content: ""; position: absolute; inset-inline-start: 0; top: calc((var(--space-md) - var(--space-xs)) / 2); width: var(--space-xs); height: var(--space-xs); border-radius: var(--ws-radius-chip); background: var(--tone, var(--ws-chart-rest)); }
17
+ /* Seth's key is one tone: the figure keeps the words' weight and colour, only its numerals are tabular. */
18
+ .ws-share-bar__item b { font-weight: inherit; color: inherit; font-variant-numeric: tabular-nums; }
19
+ /* Loading: the bar as a ghost in the chart colours' sweep, the key held back. */
20
+ .ws-share-bar--loading .ws-share-bar__bar { background: var(--ws-shimmer); background-size: 300% 100%; }
21
+ @media (prefers-reduced-motion: no-preference) {
22
+ .ws-share-bar--loading .ws-share-bar__bar { animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; }
23
+ /* The build-in: each part grows from its left edge in turn, 70 ms apart, on the settle curve. Set --i on each part. */
24
+ .ws-share-bar--draw .ws-share-bar__part { animation: ws-grow var(--ws-duration-fill) var(--ws-ease-settle) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--i, 0) * var(--ws-stagger-part)); }
25
+ }
package/design-system/components/SideList/README.md ADDED
@@ -0,0 +1,147 @@
1
+ Short lists with no card of their own: a few groups down a side column, each with a small head and rows joined by fine
2
+ lines, an act or a value at the right of each row. Its picker form, `__picks`, sits on a card's surface: rows as soft
3
+ pills, one of them the current one.
4
+
5
+ ## Use it when
6
+
7
+ - A side column beside a report or a chart holds a few short lists: what needs the person's input, the assumptions a
8
+ figure rests on, settings at a glance (Seth's Tally report, 319:3407).
9
+ - `__picks`: a short list where picking a row changes what the rest of the card shows (North's board list, Tally's
10
+ vendors; see `ListDetail`).
11
+
12
+ ## Not for
13
+
14
+ - Records to compare across columns: use `Table`.
15
+ - Next acts with a reason each, in a card: use `ActionList`.
16
+ - Navigation between pages: use the shell's sidebar (`AppShell`).
17
+ - A long list: past about eight rows it wants a card, a search or a `Table`.
18
+
19
+ ## Anatomy
20
+
21
+ - `.ws-side-list`: groups 40 apart (`--space-2xl`), no card, no ground.
22
+ - A group's head (`__head`): 14 in from the sides (the rows' words), 8 above its rows; the title 16 / 20 semibold navy
23
+ (`__title`), and at the right either a count (`__count`, 12 / 16 semibold, tabular) or a word act (`ws-act`, 12 / 16,
24
+ its box 2 px wider each side so it is 24 across, its words where they were).
25
+ - A row (`__row`): at least 40 (`--ws-row-h-dense`), 10 above and below, 14 at the sides, 10 between parts, a 0.5 px line
26
+ on top (`--ws-divider`; the first one under the head too); its words 13 / 18 medium navy (`__name`, wrapping), then a
27
+ 20 px arrow when the row acts, or a value (`__value`, 12 / 16 semibold; `--quiet` medium muted).
28
+ - A row that acts (`a` or `button`): North's inset pill on hover, 6 px corners, 2 in from the row's top and bottom and 4
29
+ from its sides, so the line above stays whole; the words sit over it. Focus shows the same pill with the 2 px navy ring on it, so the ring has the pill's 6 px
30
+ corners, as a pick's does.
31
+ - A row with a measure (`__row--measure`): the name and value line (`__line`), a 4 px bar under it (`__bar`, 2 px
32
+ corners, the empty track, a navy fill), an 11 / 13 caption (`__caption`, muted); parts 4 apart, 8 above and below.
33
+ - A goal row (North's goals beside the key metrics): a measure row, a link or a button when it opens the goal. Its tone
34
+ says where it stands: navy on track; `__row--over` past the goal, the fill teal (`--ws-chart-finished`) and the
35
+ figure in teal's AA word (`--ws-word-positive`); `__row--behind`, the fill alert red (`--ws-chart-alert`) and the
36
+ figure in its word (`--ws-word-alert`). A pace or target mark (`<i style="--at: 30%">` in the bar) is a 1.5 px cut
37
+ in the ground's colour, so the bar reads in two segments once the fill passes it. A goal past 100% fills the bar and
38
+ says how far in its figure ("112%").
39
+ - `__picks`: a list on a card's surface, 4 inside. Each row (`__pick`, a button) at least 56, 8 above and below, 12 at the
40
+ sides, 10 between parts, 6 px corners: a 6 px dot in the category's tone (`--ws-dot`), the name (13 / 16 medium, one
41
+ line, an ellipsis) over an 11 / 13 muted sub-line, 1 apart; at the right, end-aligned as one block, the figure
42
+ (13 / 16 semibold, tabular) over its sub-line (11 / 13 medium; `--needs` in salmon's AA word). A 0.5 px line between
43
+ rows runs the surface's full width, past its 4 px padding.
44
+
45
+ ## Variants and sizes
46
+
47
+ | Part | Value |
48
+ | --- | --- |
49
+ | Group gap | 40 |
50
+ | Row | 40 at least, 10 / 14 inside |
51
+ | Pick row | 56 at least, 8 / 12 inside |
52
+ | Hover pill | 6 px corners, inset 2 / 4 |
53
+ | Measure bar | 4 tall, 2 px corners |
54
+ | Dot | 6 |
55
+
56
+ ## States
57
+
58
+ - **Default**: as above.
59
+ - **Hover** (a row that acts): the pill in `--ws-hover` (navy 5 %); pressed, `--ws-hover-strong`.
60
+ - **Current pick** (`aria-current="true"`): the rim's grey as a pill (`--ws-tray`), its name semibold, the lines above
61
+ and below it hidden. The words never change size, so nothing under it moves.
62
+ - **Hover** (a pick): North's faint wash (`--ws-hover-faint`), never on the current one.
63
+ - **Empty group**: its head and a count of 0, one quiet row that says so ("Nothing is waiting on anyone").
64
+ - **Long words**: a row's name wraps; a pick's name and sub-line truncate with a `title`, the figure never does.
65
+ - **A goal with nothing done**: the empty track (its cut still marks the pace) and 0%.
66
+ - **Filling on arrival** (`--draw` on the list, North's Home intro, "Metric + goal bars fill"): the bars fill in order
67
+ inside the card's share of the page fill (`--ws-duration-fill-page` x 0.79, 1343 ms), from 10% to 80%
68
+ of it: row `i` of `--n` (`--n` on the group, `--i` on each row) starts at `i / (n - 1)` of the first 55% of that
69
+ window and fills from the start over the rest (423 ms) on `--ws-ease-settle`, so the four rows of a goals list land
70
+ about 170 ms apart and each one sweeps across its cut. In a `.ws-build` card it starts at the card's
71
+ `--ws-build-at`, when the card scrolls into view, once. Reduced motion: filled.
72
+
73
+ ## Behaviour
74
+
75
+ - Keyboard: rows that act are links or buttons in document order; picks are buttons, the current one marked
76
+ `aria-current="true"`.
77
+ - Pointer: hover shows the pill; a pick changes what the card shows.
78
+ - Motion: hover over 200 ms. The current pick's fill slides to the new pick (North's "List highlight slide",
79
+ `springs.highlight` .45 / .14), plain CSS with no script and no new markup: the current pick is a CSS anchor and
80
+ `__picks`' `::before` is the travelling fill, under the rows, its four edges easing on motion's own
81
+ `spring(.45, .14)` written out as `linear()` (800 ms, a 0.5% give; `--ws-spring-highlight-duration` and `--ws-spring-highlight`); the lines beside the old and the new pick fade over 200 ms. At rest the current pick paints
82
+ its own fill (the 0.4 look); while the list is pointed at or holds focus the travelling fill takes its place, so a
83
+ pick made then slides. Picks that change places (a sort, a filter) glide with `reorder()` (see `KanbanBoard`).
84
+ Without CSS anchor positioning, or under reduced motion, it moves at once. Try it in the preview: click a pick.
85
+
86
+ ## Content
87
+
88
+ - A group's title says what the rows are ("Needs your input", "Seats Felix absorbs"), sentence case.
89
+ - A row that acts starts with a verb ("Add your team size").
90
+ - A value is a word or a figure, never a sentence. No em dashes.
91
+
92
+ ## Rules
93
+
94
+ - **No card**: a side list sits on the page; its lines and its head group it. Put `__picks` on a card's surface.
95
+ - **Lines run full width** (North D1), 0.5 px (D5); beside the current pick they hide (North D4).
96
+ - **Hover never moves anything**: the pill is a colour behind the words.
97
+ - **Words pass AA on the ground they sit on** (D2): Seth's #8A8A8A sub-lines and salmon figures take their AA steps
98
+ (`--color-text-muted`, `--ws-word-needs`).
99
+
100
+ ## Source
101
+
102
+ **Derived from**: Seth's Tally report (319:3302: the right column 319:3407 to 3444, the vendor list 319:3536 to 3577) and
103
+ North's board list and "you" column (style1.css 192 to 206, 282 to 305), on the kit's divider, hover washes and type
104
+ steps. **Precedent**: new in 0.5.0 (4 Nov 2026).
105
+
106
+ ## Markup
107
+
108
+ ```html
109
+ <div class="ws-side-list">
110
+ <section class="ws-side-list__group" aria-labelledby="sl-input">
111
+ <div class="ws-side-list__head"><h3 class="ws-side-list__title" id="sl-input">Needs your input</h3><span class="ws-side-list__count">1</span></div>
112
+ <ul>
113
+ <li><a class="ws-side-list__row" href="#team-size"><span class="ws-side-list__name">Add your team size</span><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h12M11 5l5 5-5 5"/></svg></a></li>
114
+ </ul>
115
+ </section>
116
+ </div>
117
+
118
+ <section class="ws-card" aria-label="Tools">
119
+ <ul class="ws-side-list__picks">
120
+ <li><button type="button" class="ws-side-list__pick" aria-current="true" style="--ws-dot: var(--ws-chart-past-half);">
121
+ <span class="ws-side-list__dot" aria-hidden="true"></span>
122
+ <span class="ws-side-list__main"><span class="ws-side-list__pick-name">Luxury Presence</span><span class="ws-side-list__sub">Website and IDX, Q1 2027</span></span>
123
+ <span class="ws-side-list__end"><span class="ws-side-list__figure">$20,400</span><span class="ws-side-list__sub ws-side-list__sub--needs">saves $20,400</span></span>
124
+ </button></li>
125
+ </ul>
126
+ </section>
127
+ ```
128
+
129
+ Goals, filling in order on arrival:
130
+
131
+ ```html
132
+ <div class="ws-side-list ws-side-list--draw">
133
+ <section class="ws-side-list__group" aria-labelledby="sl-goals" style="--n: 4;">
134
+ <div class="ws-side-list__head"><h3 class="ws-side-list__title" id="sl-goals">Q4 goals</h3><button type="button" class="ws-act">Edit</button></div>
135
+ <ul>
136
+ <li><a class="ws-side-list__row ws-side-list__row--measure" href="#goal-1" style="--i: 0;"><span class="ws-side-list__line"><span class="ws-side-list__name">Close $40M ending revenue</span><span class="ws-side-list__value">27%</span></span><span class="ws-side-list__bar" aria-hidden="true"><span style="width: 27%;"></span><i style="--at: 30%;"></i></span></a></li>
137
+ <li><a class="ws-side-list__row ws-side-list__row--measure ws-side-list__row--over" href="#goal-3" style="--i: 2;"><span class="ws-side-list__line"><span class="ws-side-list__name">Book 40 expansion deals</span><span class="ws-side-list__value">112%</span></span><span class="ws-side-list__bar" aria-hidden="true"><span style="width: 100%;"></span><i style="--at: 30%;"></i></span></a></li>
138
+ <li><a class="ws-side-list__row ws-side-list__row--measure ws-side-list__row--behind" href="#goal-4" style="--i: 3;"><span class="ws-side-list__line"><span class="ws-side-list__name">Time to value under 15 days</span><span class="ws-side-list__value">9%</span></span><span class="ws-side-list__bar" aria-hidden="true"><span style="width: 9%;"></span><i style="--at: 30%;"></i></span></a></li>
139
+ </ul>
140
+ </section>
141
+ </div>
142
+ ```
143
+
144
+ ## Styles
145
+
146
+ `design-system/components/SideList/style.css`, in `bundle.css` and `fello.css`. Dark and the navy ground come from the
147
+ tokens (`--ws-divider`, `--ws-hover`, `--ws-tray`, `--ws-track`, `--color-text-heading`).