@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/ListDetail/preview.html ADDED
@@ -0,0 +1,213 @@
1
+ <!-- @dsCard group="Data" height=1180 -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>ListDetail</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">
14
+ <span class="ws-muted">--apart --fill (Seth's Review inbox): the list a column wide, the open item two; the list scrolls inside the pair's height, the current row sunk and semibold at the same size, the detail's acts pinned to its foot (shown in a 600 px frame). Click a row: the fill slides to it on North's list highlight spring</span>
15
+ <div style="height: 600px; display: flex; flex-direction: column;">
16
+ <div class="ws-list-detail ws-list-detail--apart ws-list-detail--fill">
17
+ <div class="ws-list-detail__grid">
18
+ <section class="ws-list-detail__list" aria-label="Reviews">
19
+ <div class="ws-list-detail__surface">
20
+ <div class="ws-list-detail__head">
21
+ <label class="ws-check ws-check--quiet"><input type="checkbox" aria-label="Select every review"><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></label>
22
+ <div class="ws-segmented ws-segmented--clear ws-segmented--stretch" role="group" aria-label="Show">
23
+ <button type="button" class="ws-segmented__item" aria-pressed="true">Needs a reply <span class="ws-tnum">10</span></button>
24
+ <button type="button" class="ws-segmented__item" aria-pressed="false">All <span class="ws-tnum">100</span></button>
25
+ </div>
26
+ </div>
27
+ <div class="ws-list-detail__scroll" role="region" aria-label="Reviews, scrolls" tabindex="0">
28
+ <ul class="ws-list-detail__rows">
29
+ <li>
30
+ <label class="ws-check"><input type="checkbox" aria-label="Replied to the Oct 29 review"><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></label>
31
+ <button type="button" class="ws-list-detail__open">
32
+ <span class="ws-list-detail__meta"><span class="ws-list-detail__stars" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg></span><span>Oct 29</span><span>Zillow</span></span>
33
+ <span class="ws-list-detail__text" title="Knew the market inside out and got us a great price.">Knew the market inside out and got us a great price.</span>
34
+ </button>
35
+ </li>
36
+ <li>
37
+ <label class="ws-check"><input type="checkbox" aria-label="Replied to the Oct 20 review"><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></label>
38
+ <button type="button" class="ws-list-detail__open">
39
+ <span class="ws-list-detail__meta"><span class="ws-list-detail__stars" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg></span><span>Oct 20</span><span>Zillow</span></span>
40
+ <span class="ws-list-detail__text" title="Made buying our first home painless.">Made buying our first home painless.</span>
41
+ </button>
42
+ </li>
43
+ <li>
44
+ <label class="ws-check"><input type="checkbox" aria-label="Replied to the Oct 11 review"><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></label>
45
+ <button type="button" class="ws-list-detail__open">
46
+ <span class="ws-list-detail__meta"><span class="ws-list-detail__stars" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg></span><span>Oct 11</span><span>Zillow</span></span>
47
+ <span class="ws-list-detail__text" title="Sold in a weekend. Could not recommend more.">Sold in a weekend. Could not recommend more.</span>
48
+ </button>
49
+ </li>
50
+ <li>
51
+ <label class="ws-check"><input type="checkbox" aria-label="Replied to the Oct 2 review"><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></label>
52
+ <button type="button" class="ws-list-detail__open" aria-current="true">
53
+ <span class="ws-list-detail__meta"><span class="ws-list-detail__stars" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg></span><span>Oct 2</span><span>Zillow</span></span>
54
+ <span class="ws-list-detail__text" title="Knew the market inside out and got us a great price.">Knew the market inside out and got us a great price.</span>
55
+ </button>
56
+ </li>
57
+ <li>
58
+ <label class="ws-check"><input type="checkbox" aria-label="Replied to the Sep 23 review"><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></label>
59
+ <button type="button" class="ws-list-detail__open">
60
+ <span class="ws-list-detail__meta"><span class="ws-list-detail__stars" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg></span><span>Sep 23</span><span>Zillow</span></span>
61
+ <span class="ws-list-detail__text" title="Made buying our first home painless, from the first showing to the keys, and kept us calm the whole way.">Made buying our first home painless, from the first showing to the keys, and kept us calm the whole way.</span>
62
+ </button>
63
+ </li>
64
+ <li>
65
+ <label class="ws-check"><input type="checkbox" aria-label="Replied to the Sep 14 review"><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></label>
66
+ <button type="button" class="ws-list-detail__open">
67
+ <span class="ws-list-detail__meta"><span class="ws-list-detail__stars" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg></span><span>Sep 14</span><span>Zillow</span></span>
68
+ <span class="ws-list-detail__text" title="Sold in a weekend. Could not recommend more.">Sold in a weekend. Could not recommend more.</span>
69
+ </button>
70
+ </li>
71
+ <li>
72
+ <label class="ws-check"><input type="checkbox" aria-label="Replied to the Sep 5 review"><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></label>
73
+ <button type="button" class="ws-list-detail__open">
74
+ <span class="ws-list-detail__meta"><span class="ws-list-detail__stars" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg></span><span>Sep 5</span><span>Zillow</span></span>
75
+ <span class="ws-list-detail__text" title="Knew the market inside out and got us a great price.">Knew the market inside out and got us a great price.</span>
76
+ </button>
77
+ </li>
78
+ <li>
79
+ <label class="ws-check"><input type="checkbox" aria-label="Replied to the Aug 27 review"><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></label>
80
+ <button type="button" class="ws-list-detail__open">
81
+ <span class="ws-list-detail__meta"><span class="ws-list-detail__stars" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg></span><span>Aug 27</span><span>Zillow</span></span>
82
+ <span class="ws-list-detail__text" title="Made buying our first home painless.">Made buying our first home painless.</span>
83
+ </button>
84
+ </li>
85
+ </ul>
86
+ </div>
87
+ </div>
88
+ </section>
89
+ <section class="ws-list-detail__detail" aria-label="Review from Oct 2">
90
+ <div class="ws-list-detail__surface">
91
+ <div class="ws-list-detail__body ws-list-detail__body--roomy">
92
+ <div class="ws-list-detail__pager">
93
+ <span class="ws-list-detail__stars ws-list-detail__stars--lg" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg></span>
94
+ <span>Zillow, Oct 2, 2026</span>
95
+ <span class="ws-tnum">4 of 10</span>
96
+ <span class="ws-list-detail__pager-acts">
97
+ <button type="button" class="ws-icon-btn ws-icon-btn--solid" aria-label="Previous review"><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 10l4-4 4 4"/></svg></button>
98
+ <button type="button" class="ws-icon-btn ws-icon-btn--solid" aria-label="Next review"><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></button>
99
+ </span>
100
+ </div>
101
+ <p class="ws-list-detail__quote">“Knew the market inside out and got us a great price.”</p>
102
+ <div class="ws-plate ws-plate--draft">
103
+ <div class="ws-plate__head">
104
+ <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 16.5V9l6.5-5.5L16.5 9v7.5Z"/><path d="M8 16.5v-4h4v4"/></svg>
105
+ <p class="ws-section">Grow drafted a reply in your voice</p>
106
+ <button type="button" class="ws-btn ws-btn--text">Edit</button>
107
+ </div>
108
+ <p class="ws-body">Thank you both! It was a pleasure helping you price it right, and I'm so glad it came together the way you hoped. Enjoy the next chapter.</p>
109
+ </div>
110
+ <div class="ws-list-detail__acts">
111
+ <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Copy reply</button>
112
+ <button type="button" class="ws-btn ws-btn--well ws-btn--lg">Open your Zillow reviews</button>
113
+ <label class="ws-check"><input type="checkbox"><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><span class="ws-check__words"><span class="ws-check__label">Mark as replied</span></span></label>
114
+ </div>
115
+ <p class="ws-list-detail__note">Grow never posts for you. Copy the reply and paste it on Zillow.</p>
116
+ </div>
117
+ </div>
118
+ </section>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="ws-stack">
125
+ <span class="ws-muted">--list-end, joined (Tally's vendor board 319:3445): one rim split by a 1 px line, the picker list a set 362 (--ws-list-detail-list), the detail the rest with its top row (words, then pickers and a check on the title's line) and its foot on the rim; the lines beside the current row hide</span>
126
+ <div class="ws-list-detail ws-list-detail--list-end" style="--ws-list-detail-list: calc(var(--space-9xl) * 1.81);">
127
+ <div class="ws-list-detail__grid">
128
+ <section class="ws-list-detail__list" aria-label="Tools">
129
+ <div class="ws-list-detail__surface">
130
+ <div class="ws-list-detail__scroll">
131
+ <ul class="ws-side-list__picks">
132
+ <li><button type="button" class="ws-side-list__pick" style="--ws-dot: var(--ws-edge-card);"><span class="ws-side-list__dot" aria-hidden="true"></span><span class="ws-side-list__main"><span class="ws-side-list__pick-name">Meta Ads</span><span class="ws-side-list__sub">Paid ads: media, stays</span></span><span class="ws-side-list__end"><span class="ws-side-list__figure">$24,000</span><span class="ws-side-list__sub">stays</span></span></button></li>
133
+ <li><button type="button" class="ws-side-list__pick" aria-current="true" style="--ws-dot: var(--ws-chart-past-half);"><span class="ws-side-list__dot" aria-hidden="true"></span><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><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></button></li>
134
+ <li><button type="button" class="ws-side-list__pick" style="--ws-dot: var(--ws-chart-finished);"><span class="ws-side-list__dot" aria-hidden="true"></span><span class="ws-side-list__main"><span class="ws-side-list__pick-name">Follow Up Boss</span><span class="ws-side-list__sub">CRM, Q1 2027</span></span><span class="ws-side-list__end"><span class="ws-side-list__figure">$7,452</span><span class="ws-side-list__sub ws-side-list__sub--needs">saves $7,452</span></span></button></li>
135
+ <li><button type="button" class="ws-side-list__pick" style="--ws-dot: var(--ws-chart-under-half);"><span class="ws-side-list__dot" aria-hidden="true"></span><span class="ws-side-list__main"><span class="ws-side-list__pick-name">Mailchimp</span><span class="ws-side-list__sub">Email and marketing, today</span></span><span class="ws-side-list__end"><span class="ws-side-list__figure">$1,620</span><span class="ws-side-list__sub ws-side-list__sub--needs">saves $1,620</span></span></button></li>
136
+ </ul>
137
+ </div>
138
+ </div>
139
+ </section>
140
+ <section class="ws-list-detail__detail" aria-label="Luxury Presence">
141
+ <div class="ws-list-detail__surface">
142
+ <div class="ws-list-detail__body">
143
+ <div class="ws-list-detail__top">
144
+ <div class="ws-list-detail__words">
145
+ <h3 class="ws-title">Luxury Presence comes off in Q1 2027</h3>
146
+ <p class="ws-body">Fello websites and IDX home search replace it. Estimated from list prices.</p>
147
+ </div>
148
+ <div>
149
+ <button type="button" class="ws-filter-pick" aria-haspopup="menu" aria-expanded="false" aria-label="Kind: Website and IDX"><span class="ws-filter-pick__value">Website and IDX</span><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></button>
150
+ <button type="button" class="ws-filter-pick" aria-haspopup="menu" aria-expanded="false" aria-label="Comes off: Q1 2027"><span class="ws-filter-pick__value">Off Q1 2027</span><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></button>
151
+ <label class="ws-check ws-check--sm"><input type="checkbox"><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><span class="ws-check__words"><span class="ws-check__label">Cancelled</span></span></label>
152
+ </div>
153
+ </div>
154
+ <p class="ws-cluster"><span class="ws-figure ws-figure--pane">$20,400</span><span class="ws-body">a year</span></p>
155
+ </div>
156
+ </div>
157
+ <div class="ws-list-detail__foot"><span>Website and IDX, estimate</span><span class="ws-list-detail__foot-needs"><b>Saves $20,400</b> a year</span></div>
158
+ </section>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="ws-stack" style="width: 560px;">
164
+ <span class="ws-muted">Empty list: a sentence where the rows go; the detail shows what comes next</span>
165
+ <div class="ws-list-detail ws-list-detail--apart">
166
+ <div class="ws-list-detail__grid">
167
+ <section class="ws-list-detail__list" aria-label="Reviews that need a reply">
168
+ <div class="ws-list-detail__surface"><p class="ws-list-detail__empty">No reviews need a reply.</p></div>
169
+ </section>
170
+ <section class="ws-list-detail__detail" aria-label="Next">
171
+ <div class="ws-list-detail__surface"><div class="ws-list-detail__body"><p class="ws-body">Grow checks Zillow again tomorrow and drafts a reply for each new review.</p></div></div>
172
+ </section>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="ws-stack" style="width: 640px;">
178
+ <span class="ws-muted">Loading: the list's rows and the detail as ghosts under the shimmer (under 48rem the pair stacks, list first)</span>
179
+ <div class="ws-list-detail" aria-busy="true">
180
+ <div class="ws-list-detail__grid">
181
+ <section class="ws-list-detail__list" aria-label="Reviews, loading">
182
+ <div class="ws-list-detail__surface">
183
+ <ul class="ws-list-detail__rows">
184
+ <li><div class="ws-list-detail__open"><span class="ws-list-detail__ghost ws-shimmer" style="width: 50%;"></span><span class="ws-list-detail__ghost ws-shimmer" style="width: 90%;"></span></div></li>
185
+ <li><div class="ws-list-detail__open"><span class="ws-list-detail__ghost ws-shimmer" style="width: 40%;"></span><span class="ws-list-detail__ghost ws-shimmer" style="width: 80%;"></span></div></li>
186
+ </ul>
187
+ </div>
188
+ </section>
189
+ <section class="ws-list-detail__detail" aria-label="Review, loading">
190
+ <div class="ws-list-detail__surface">
191
+ <div class="ws-list-detail__body">
192
+ <span class="ws-list-detail__ghost ws-shimmer" style="width: 30%;"></span>
193
+ <span class="ws-list-detail__ghost ws-shimmer" style="width: 90%;"></span>
194
+ <span class="ws-list-detail__ghost ws-shimmer" style="width: 70%;"></span>
195
+ </div>
196
+ </div>
197
+ </section>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ </div>
203
+ <script>
204
+ /* The demo's wiring: a click opens the row, or picks a pick (an app keeps it; the fill slides on its own). */
205
+ document.addEventListener('click', (e) => {
206
+ const open = e.target.closest('.ws-list-detail__open, .ws-side-list__pick');
207
+ if (!open) return;
208
+ const list = open.closest('.ws-list-detail__rows, .ws-side-list__picks');
209
+ for (const o of list.querySelectorAll('.ws-list-detail__open, .ws-side-list__pick')) o === open ? o.setAttribute('aria-current', 'true') : o.removeAttribute('aria-current');
210
+ });
211
+ </script>
212
+ </body>
213
+ </html>
package/design-system/components/ListDetail/style.css ADDED
@@ -0,0 +1,148 @@
1
+ /* ---- ListDetail: a list and the thing picked from it, side by side on one three-column grid: the list a column wide,
2
+ the detail two (Seth's Review inbox 313:2671), or the list at the end (--list-end, North's board and Tally's vendors).
3
+ Joined by default, one rim split by a 1 px line; --apart, two rimmed cards 8 apart. Under 48rem the two stack,
4
+ 12 apart, list first (its DOM order). The list takes the detail's height and scrolls inside it; --fill makes the
5
+ pair the rest of a height-bound page, with the detail's acts pinned to its foot. The list can take a set width
6
+ instead of its third (--ws-list-detail-list: Tally's vendor picker and North's board list are 362). ---- */
7
+ .ws-list-detail { container: ws-list-detail / inline-size; }
8
+ .ws-list-detail__grid { display: grid; grid-template-columns: var(--ws-list-detail-list, minmax(0, 1fr)) repeat(2, minmax(0, 1fr)); gap: var(--ws-rim); padding: var(--ws-rim); border-radius: var(--ws-radius-card); background: var(--ws-tray); }
9
+ .ws-list-detail--list-end .ws-list-detail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) var(--ws-list-detail-list, minmax(0, 1fr)); }
10
+ .ws-list-detail__list, .ws-list-detail__detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
11
+ .ws-list-detail__list { grid-column: 1; grid-row: 1; }
12
+ .ws-list-detail__detail { grid-column: 2 / span 2; grid-row: 1; }
13
+ .ws-list-detail--list-end .ws-list-detail__list { grid-column: 3; }
14
+ .ws-list-detail--list-end .ws-list-detail__detail { grid-column: 1 / span 2; }
15
+ /* A pane's cream surface; a foot (__foot) can sit under it on the rim. Joined, a surface rounds only its outer corners,
16
+ so the split stays one clean line. */
17
+ .ws-list-detail__surface { display: flex; flex: 1; flex-direction: column; min-height: 0; background: var(--color-bg-page); }
18
+ .ws-list-detail__list > .ws-list-detail__surface { border-radius: var(--ws-radius-card-inner) 0 0 var(--ws-radius-card-inner); }
19
+ .ws-list-detail__detail > .ws-list-detail__surface { border-radius: 0 var(--ws-radius-card-inner) var(--ws-radius-card-inner) 0; }
20
+ .ws-list-detail--list-end .ws-list-detail__list > .ws-list-detail__surface { border-radius: 0 var(--ws-radius-card-inner) var(--ws-radius-card-inner) 0; }
21
+ .ws-list-detail--list-end .ws-list-detail__detail > .ws-list-detail__surface { border-radius: var(--ws-radius-card-inner) 0 0 var(--ws-radius-card-inner); }
22
+ /* Apart: each pane its own rim. */
23
+ .ws-list-detail--apart .ws-list-detail__grid { gap: var(--space-xs); padding: 0; background: none; border-radius: 0; }
24
+ .ws-list-detail--apart .ws-list-detail__list, .ws-list-detail--apart .ws-list-detail__detail { padding: var(--ws-rim); border-radius: var(--ws-radius-card); background: var(--ws-tray); }
25
+ .ws-list-detail--apart .ws-list-detail__surface { border-radius: var(--ws-radius-card-inner); }
26
+ /* Side by side, the list's own height does not count: it takes the detail's and scrolls inside (__scroll). */
27
+ @container ws-list-detail (width >= 48rem) { .ws-list-detail__list { contain: size; } }
28
+ .ws-list-detail__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
29
+ .ws-list-detail__scroll:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
30
+ /* It shows that it holds more: while rows are hidden below, the last 24 px fade out, and the fade lifts at the end (a
31
+ scroll-driven fade, as Table's far edge; a list that fits shows none). A focused scroller drops it so its ring stays whole. */
32
+ @supports (animation-timeline: scroll()) {
33
+ .ws-list-detail__scroll { mask-image: linear-gradient(to top, transparent, var(--ws-mask) var(--space-lg)); mask-size: 100% calc(100% + var(--space-lg)); mask-repeat: no-repeat; animation: ws-list-detail-end linear both; animation-timeline: scroll(self block); animation-range: calc(100% - var(--space-lg)) 100%; }
34
+ .ws-list-detail__scroll:focus-visible { mask-image: none; }
35
+ }
36
+ @keyframes ws-list-detail-end { from { mask-position: 0 calc(var(--space-lg) * -1); } to { mask-position: 0 0; } }
37
+ /* Fill: the pair is the rest of a height-bound column; the detail scrolls inside if it must. Stacked (narrow), the pair
38
+ is taller than its region, so the region scrolls the two together. */
39
+ .ws-list-detail--fill { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
40
+ .ws-list-detail--fill .ws-list-detail__grid { height: 100%; grid-template-rows: minmax(0, 1fr); }
41
+ .ws-list-detail--fill .ws-list-detail__detail .ws-list-detail__surface { overflow-y: auto; }
42
+
43
+ /* The list's head (Seth): 12 above and below, 16 in, 20 out, 14 apart (a select-all box, a filter), a 0.5 px line under. */
44
+ .ws-list-detail__head { display: flex; align-items: center; gap: var(--space-sm-plus); padding: var(--space-sm) var(--ws-card-inset) var(--space-sm) var(--space-md); border-bottom: var(--ws-divider); }
45
+ .ws-list-detail__head > .ws-segmented { flex: 1; align-self: center; }
46
+ /* A clear segmented shows no tray, so its items are its edges: they sit on the head's 20 px rail and 14 from the box. */
47
+ .ws-list-detail__head > .ws-segmented--clear { margin-inline: calc(var(--ws-halo) * -1); }
48
+ /* An inbox row: a box (outside the open target), then a meta line and one line of the thing, 4 apart; 0.5 px lines
49
+ between rows. Current: the sunk cream and semibold words, the same size, so no row ever moves. */
50
+ .ws-list-detail__rows > li { position: relative; display: flex; align-items: flex-start; gap: var(--space-sm-plus); padding: var(--space-sm) var(--ws-card-inset) var(--space-sm) var(--space-md); }
51
+ /* The line is drawn inside the row's top (Seth's 66 includes it, so a border would add 0.5 a row). */
52
+ .ws-list-detail__rows > li + li { box-shadow: inset 0 var(--ws-hairline) 0 var(--ws-edge); }
53
+ .ws-list-detail__rows > li > .ws-check { position: relative; z-index: 1; align-items: center; height: var(--ws-leading-control); padding: 0; }
54
+ .ws-list-detail__head > .ws-check { position: relative; align-items: center; padding: 0; }
55
+ .ws-list-detail__rows > li > .ws-check .ws-check__box, .ws-list-detail__head > .ws-check .ws-check__box { margin-top: 0; }
56
+ /* A box's target: 24 square, 40 on touch, a hit area round it, so the row's rhythm does not move. */
57
+ .ws-list-detail__rows > li > .ws-check::after, .ws-list-detail__head > .ws-check::after { content: ""; position: absolute; inset: calc((100% - var(--space-lg)) / 2); }
58
+ @media (pointer: coarse) { .ws-list-detail__rows > li > .ws-check::after, .ws-list-detail__head > .ws-check::after { inset: calc((100% - var(--ws-touch)) / 2); } }
59
+ .ws-list-detail__open { display: flex; flex: 1; flex-direction: column; gap: var(--space-xxs); min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; }
60
+ .ws-list-detail__open::after { content: ""; position: absolute; inset: 0; }
61
+ .ws-list-detail__open:focus-visible { outline: 0; }
62
+ .ws-list-detail__open:focus-visible::after { box-shadow: var(--ws-focus-inset); }
63
+ @media (hover: hover) { .ws-list-detail__rows > li:not(:has(> [aria-current="true"])):hover { background-color: var(--ws-hover-faint); } }
64
+ .ws-list-detail__rows > li:has(> [aria-current="true"]) { background-color: var(--ws-surface-sunk); }
65
+ /* Motion: the current row's fill slides to the new row (North "List highlight slide", select.glide, springs.highlight
66
+ .45 / .14, the board list's layoutId "board-sel"; north-motion 3) instead of jumping. The current row is the anchor
67
+ (CSS anchor positioning) and the list's ::before is a travelling fill, under the rows (each li, its line and its words
68
+ sit above it), its four edges easing on motion's own spring(.45, .14) written out as linear() (800 ms), so it also
69
+ grows or shrinks to the new row's height. At rest the current row paints its own fill, so a resting list is the 0.4
70
+ list pixel for pixel; while the list is pointed at or holds focus the travelling fill takes its place (the same box,
71
+ the same paint, at once), so a pick made then slides. Only a real pick moves it. No new markup. Without anchor
72
+ positioning, or under reduced motion, the fill moves at once. The spring is the global --ws-spring-highlight over --ws-spring-highlight-duration. */
73
+ @supports (anchor-name: --a) {
74
+ .ws-list-detail__rows { position: relative; anchor-scope: --ws-list-detail-current; }
75
+ .ws-list-detail__rows::before { content: ""; position: absolute; position-anchor: --ws-list-detail-current; inset: anchor(top) anchor(right) anchor(bottom) anchor(left); background: var(--ws-surface-sunk); opacity: 0; pointer-events: none; }
76
+ .ws-list-detail__rows > li:has(> [aria-current="true"]) { anchor-name: --ws-list-detail-current; }
77
+ }
78
+ @media (prefers-reduced-motion: no-preference) {
79
+ .ws-list-detail__rows > li { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
80
+ @supports (anchor-name: --a) {
81
+ .ws-list-detail__rows:is(:hover, :focus-within)::before { opacity: 1; transition: inset var(--ws-spring-highlight-duration) var(--ws-spring-highlight); }
82
+ .ws-list-detail__rows:is(:hover, :focus-within) > li:has(> [aria-current="true"]) { background-color: transparent; }
83
+ .ws-list-detail__rows > li:has(> [aria-current="true"]) { transition: none; }
84
+ }
85
+ }
86
+ .ws-list-detail__meta { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-muted); }
87
+ .ws-list-detail__meta > :nth-child(2) { flex: 1; min-width: 0; }
88
+ .ws-list-detail__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); color: var(--color-text-heading); }
89
+ .ws-list-detail__open[aria-current="true"] .ws-list-detail__text { font-weight: 600; }
90
+ /* Stars (a rating): salmon marks, 12 in a row, 16 in the detail, 2 apart; the rating in words for a screen reader. */
91
+ .ws-list-detail__stars { display: inline-flex; flex: none; gap: var(--space-3xs); color: var(--ws-chart-under-half); }
92
+ .ws-list-detail__stars > svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
93
+ .ws-list-detail__stars--lg > svg { width: var(--ws-icon); height: var(--ws-icon); }
94
+
95
+ /* The detail's body: 16 inside (North's board), --roomy 28 and 32 (Seth's open review), parts 24 apart. */
96
+ .ws-list-detail__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-lg); padding: var(--space-md); }
97
+ .ws-list-detail__body > .ws-head { padding: 0; } /* a head inside the detail already sits on the body inset: no second inset */
98
+ .ws-list-detail__body--roomy { padding: calc(var(--space-lg) + var(--space-xxs)) var(--space-xl); }
99
+ .ws-list-detail__words { display: flex; flex-direction: column; gap: var(--space-3xs); }
100
+ /* A top row (Tally's vendor head, 319:3445): the words at the left taking the room, the controls (pickers, a check) in
101
+ one row at the right on the title's line, 16 between the two, 8 between controls. Where both do not fit, the
102
+ controls drop under the words, at the left, 12 under. */
103
+ .ws-list-detail__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-sm) var(--space-md); }
104
+ .ws-list-detail__top > :first-child { flex: 1 1 var(--space-9xl); min-width: 0; }
105
+ .ws-list-detail__top > :last-child:not(:first-child) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
106
+ /* The pager head: the item's meta, "4 of 10", and the two square steppers, up and down (the list runs down). */
107
+ .ws-list-detail__pager { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-muted); }
108
+ .ws-list-detail__pager > :nth-child(2) { flex: 1; min-width: 0; }
109
+ .ws-list-detail__pager > :nth-child(2) + * { white-space: nowrap; }
110
+ .ws-list-detail__pager-acts { display: flex; flex: none; gap: var(--space-xs); }
111
+ /* A detail under 30rem (a phone, stacked) has no room for the four on one line: squeezed, the meta broke a word a line
112
+ and ran into "4 of 10". There the stars and the meta keep the first line, and "4 of 10" with its steppers take a
113
+ second, at the right, 8 under (the empty ::after is the break). */
114
+ .ws-list-detail__detail { container: ws-list-detail-pane / inline-size; }
115
+ @container ws-list-detail-pane (width < 30rem) {
116
+ .ws-list-detail__pager { flex-wrap: wrap; row-gap: 0; }
117
+ .ws-list-detail__pager::after { content: ""; flex-basis: 100%; order: 1; height: var(--space-xs); }
118
+ .ws-list-detail__pager > :nth-child(2) ~ * { order: 2; }
119
+ .ws-list-detail__pager > :nth-child(2) + * { margin-left: auto; }
120
+ }
121
+ /* Seth's steppers are square, 6 px corners, not the round icon button. */
122
+ .ws-list-detail__pager-acts > .ws-icon-btn { border-radius: var(--ws-radius-row); }
123
+ .ws-list-detail__quote { font-size: var(--ws-text-title); line-height: calc(var(--space-xl) - var(--space-3xs)); font-weight: 400; color: var(--color-text-heading); }
124
+ /* The acts: pinned to the foot of the detail (the space above them gives), 8 apart; a trailing check act at the end. */
125
+ .ws-list-detail__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: auto; }
126
+ .ws-list-detail__acts > .ws-check { margin-left: auto; }
127
+ .ws-list-detail__note { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-muted); }
128
+ /* The foot on the rim (North 31, on the grid 32): 8 above and below, 14 at the sides, 12 / 16 words, a figure in 600.
129
+ Where the two parts do not fit side by side (a phone) the second drops under the first, at the right, rather than
130
+ both breaking a word a line. */
131
+ .ws-list-detail__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-sm); min-height: var(--space-xl); padding: var(--space-xs) var(--space-sm-plus); font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-body); }
132
+ .ws-list-detail__foot > :last-child:not(:first-child) { margin-left: auto; }
133
+ .ws-list-detail__foot b { font-weight: 600; }
134
+ .ws-list-detail__foot-needs { color: var(--ws-word-needs); }
135
+ /* Empty: a sentence in the list's surface, on the rows' edges. */
136
+ .ws-list-detail__empty { padding: var(--space-lg) var(--ws-card-inset) var(--space-lg) var(--space-md); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); color: var(--color-text-body); }
137
+ /* Loading: ghost lines (add ws-shimmer). */
138
+ .ws-list-detail__ghost { display: block; height: calc(var(--space-xs) + var(--space-3xs)); border-radius: var(--ws-radius-bar); background: var(--ws-track); }
139
+ .ws-list-detail__ghost.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
140
+
141
+ /* Narrow: stacked, 12 apart, each pane its own rim, the list first and as tall as its rows. */
142
+ @container ws-list-detail (width < 48rem) {
143
+ .ws-list-detail__grid, .ws-list-detail--apart .ws-list-detail__grid, .ws-list-detail--list-end .ws-list-detail__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding: 0; background: none; border-radius: 0; }
144
+ .ws-list-detail__list, .ws-list-detail__detail, .ws-list-detail--list-end .ws-list-detail__list, .ws-list-detail--list-end .ws-list-detail__detail { grid-column: 1; grid-row: auto; padding: var(--ws-rim); border-radius: var(--ws-radius-card); background: var(--ws-tray); }
145
+ .ws-list-detail__list > .ws-list-detail__surface, .ws-list-detail__detail > .ws-list-detail__surface, .ws-list-detail--list-end .ws-list-detail__list > .ws-list-detail__surface, .ws-list-detail--list-end .ws-list-detail__detail > .ws-list-detail__surface { border-radius: var(--ws-radius-card-inner); }
146
+ .ws-list-detail--fill .ws-list-detail__grid { height: auto; grid-template-rows: none; }
147
+ .ws-list-detail__body--roomy { padding: var(--space-lg) var(--ws-card-inset); }
148
+ }
package/design-system/components/LoadBar/README.md ADDED
@@ -0,0 +1,79 @@
1
+ An honest 3 px progress line under something that is loading: it fills toward the end of the expected wait and never
2
+ claims done until it is.
3
+
4
+ ## Use it when
5
+
6
+ - A card, a chart or an answer takes more than a moment and the person should see it moving.
7
+ - The work has a real share done (26 of 40 calls read): the line holds that share.
8
+ - A card's tray waits for its act (`ChatCard` loading).
9
+
10
+ ## Not for
11
+
12
+ - A goal or a quota: use `Meter` or `GoalBars` (those are facts, this is a wait).
13
+ - A button waiting on its own tap: use the button's pending dot.
14
+ - A whole page loading: use `Skeleton`.
15
+
16
+ ## Anatomy
17
+
18
+ - Words (`ws-load-bar__words`): a 6 px salmon dot (`ws-load-bar__dot`) pulsing on the working beat, then what is
19
+ loading, 14 / 20 medium navy, 8 px apart.
20
+ - The track (`ws-load-bar__track`), 8 px under the words: 3 px tall (`--ws-halo`), at most 260 px wide, 2 px corners,
21
+ navy at 8 %.
22
+ - The fill (`ws-load-bar__fill`): navy, from the left. With no value it runs from 4 % to 90 % over most of the
23
+ expected wait, then creeps to 97 % and waits (North's). Set `--ws-load-for` to the expected wait (the build beat,
24
+ 2.4 s, by default).
25
+ - With a value: give the track `aria-valuenow` (and its min, max and text) and the fill `--ws-load` (0 to 1); the
26
+ fill moves to it over `--ws-duration-fill`.
27
+
28
+ ## Variants and sizes
29
+
30
+ | Variant | Fill |
31
+ | --- | --- |
32
+ | Share unknown | Runs toward the end of the expected wait, never to the end |
33
+ | Share known | Holds the real share |
34
+
35
+ One size.
36
+
37
+ ## States
38
+
39
+ - **Loading**: the fill moves, the dot pulses.
40
+ - **Done**: the bar goes with what it was loading; it never sits at 100 %.
41
+ - **Long words**: the words wrap; the track stays one line.
42
+ - **Reduced motion**: nothing travels. The fill holds its share (4 % when unknown) and the dot is still; the words say
43
+ what is happening.
44
+ - **Dark**: the track, the fill and the words follow the theme; the dot keeps the brand salmon.
45
+
46
+ ## Behaviour
47
+
48
+ - Screen reader: the track is a `role="progressbar"` with an `aria-label`; with a known share it carries
49
+ `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-valuetext`; without, it is indeterminate.
50
+ - Keyboard and pointer: nothing to interact with.
51
+
52
+ ## Content
53
+
54
+ - The words say what is loading in the person's terms ("Reading this week's calls"), sentence case, no em dash.
55
+
56
+ ## Rules
57
+
58
+ - Never fake a finish: the unknown fill stops short of the end.
59
+ - One load bar per thing loading.
60
+
61
+ ## Source
62
+
63
+ **Derived from**: North's load bar (style1.css:1449-1453: 3 px, at most 260, navy at 8 %, the fill scaling 0.04 to
64
+ 0.9 at 85 % to 0.97, linear, held; the coral 7 px dot pulsing 1 s). The dot is 6 px, on the grid (D3).
65
+
66
+ ## Markup
67
+
68
+ ```html
69
+ <div class="ws-load-bar">
70
+ <p class="ws-load-bar__words"><span class="ws-load-bar__dot" aria-hidden="true"></span>Building the chart</p>
71
+ <span class="ws-load-bar__track" role="progressbar" aria-label="Building the chart" style="--ws-load-for: 6s;"><span class="ws-load-bar__fill"></span></span>
72
+ </div>
73
+ ```
74
+
75
+ ## Styles
76
+
77
+ `LoadBar/style.css` (its two keyframes, `ws-load-fill` and `ws-load-dot`, live there). Tokens: `--ws-halo`,
78
+ `--ws-radius-chip`, `--ws-ink`, `--color-text-heading`, `--ws-chart-under-half`, `--ws-duration-build`,
79
+ `--ws-duration-fill`, `--ws-loop`, `--ws-ease-loop`, `--ws-ease-steady`.
package/design-system/components/LoadBar/preview.html ADDED
@@ -0,0 +1,40 @@
1
+ <!-- @dsCard group="Progress" height=380 -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>LoadBar</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
+ <div class="ws-stack" style="max-width: 440px;">
13
+ <span class="ws-muted">Waiting, share unknown: the fill runs toward the end of the expected wait and never claims done</span>
14
+ <div class="ws-load-bar">
15
+ <p class="ws-load-bar__words"><span class="ws-load-bar__dot" aria-hidden="true"></span>Building the chart</p>
16
+ <span class="ws-load-bar__track" role="progressbar" aria-label="Building the chart" style="--ws-load-for: 6s;"><span class="ws-load-bar__fill"></span></span>
17
+ </div>
18
+ </div>
19
+ <div class="ws-stack" style="max-width: 440px;">
20
+ <span class="ws-muted">Share known: the fill holds the real share</span>
21
+ <div class="ws-load-bar">
22
+ <p class="ws-load-bar__words"><span class="ws-load-bar__dot" aria-hidden="true"></span>Reading 40 calls</p>
23
+ <span class="ws-load-bar__track" role="progressbar" aria-label="Reading 40 calls" aria-valuemin="0" aria-valuemax="40" aria-valuenow="26" aria-valuetext="26 of 40"><span class="ws-load-bar__fill" style="--ws-load: 0.65;"></span></span>
24
+ </div>
25
+ </div>
26
+ <div class="ws-stack" style="max-width: var(--ws-chart-card-w);">
27
+ <span class="ws-muted">In a card's tray, while the card is still coming</span>
28
+ <div class="ws-card ws-card--compound" aria-busy="true">
29
+ <header class="ws-head"><div><h3 class="ws-title">Your week, if Coach runs it</h3></div></header>
30
+ <footer class="ws-band">
31
+ <div class="ws-load-bar" style="flex: 1;">
32
+ <p class="ws-load-bar__words"><span class="ws-load-bar__dot" aria-hidden="true"></span>Reading your last week of calls, follow-ups and notes</p>
33
+ <span class="ws-load-bar__track" role="progressbar" aria-label="Reading your last week"><span class="ws-load-bar__fill"></span></span>
34
+ </div>
35
+ </footer>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ </body>
40
+ </html>
package/design-system/components/LoadBar/style.css ADDED
@@ -0,0 +1,17 @@
1
+ /* ---- LoadBar: an honest 3 px progress line under something loading (North's): it fills toward the end and never claims done ---- */
2
+ /* The words (a 6 px salmon dot pulsing on the working beat, then what is loading, 14 / 20 medium navy), 8 above a 3 px
3
+ track at most 260 wide (navy at 8 %). With no value the navy fill runs 4 % to 90 % over most of the expected wait
4
+ (--ws-load-for, the build beat by default), then creeps to 97 % and waits; set aria-valuenow and --ws-load (0 to 1)
5
+ when the real share is known. Under reduced motion nothing travels: the fill holds its share and the dot is still. */
6
+ .ws-load-bar { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
7
+ .ws-load-bar__words { display: flex; align-items: flex-start; gap: var(--space-xs); min-width: 0; font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
8
+ .ws-load-bar__dot { flex-shrink: 0; width: var(--space-xxs-plus); height: var(--space-xxs-plus); margin-block: calc((var(--ws-leading-row) - var(--space-xxs-plus)) / 2); border-radius: var(--radius-full); background: var(--ws-chart-under-half); }
9
+ .ws-load-bar__track { position: relative; display: block; width: 100%; max-width: calc(var(--space-9xl) + var(--space-4xl) - var(--space-xxs)); height: var(--ws-halo); border-radius: var(--ws-radius-chip); background: color-mix(in srgb, var(--ws-ink) 8%, transparent); overflow: hidden; }
10
+ .ws-load-bar__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--color-text-heading); transform: scaleX(var(--ws-load, 0.04)); transform-origin: 0 50%; }
11
+ @keyframes ws-load-fill { from { transform: scaleX(0.04); } 85% { transform: scaleX(0.9); } to { transform: scaleX(0.97); } }
12
+ @keyframes ws-load-dot { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: none; } }
13
+ @media (prefers-reduced-motion: no-preference) {
14
+ .ws-load-bar__track:not([aria-valuenow]) > .ws-load-bar__fill { animation: ws-load-fill var(--ws-load-for, var(--ws-duration-build)) var(--ws-ease-steady) forwards; }
15
+ .ws-load-bar__track[aria-valuenow] > .ws-load-bar__fill { transition: transform var(--ws-duration-fill) var(--ws-ease-settle); }
16
+ .ws-load-bar__dot { animation: ws-load-dot var(--ws-loop) var(--ws-ease-loop) infinite; }
17
+ }