@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/AppShell/preview.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Navigation" height=768 -->
1
+ <!-- @dsCard group="Navigation" height=2372 -->
2
2
  <!doctype html>
3
3
  <html>
4
4
  <head>
@@ -8,46 +8,63 @@
8
8
  <link rel="stylesheet" href="../bundle.css">
9
9
  </head>
10
10
  <body>
11
- <div class="ws-stage ws-stage--grey ws-stage--column" style="gap: var(--ws-gap-component);">
11
+ <div class="ws-stage ws-stage--column">
12
12
 
13
13
  <div class="ws-stack">
14
- <span class="ws-muted">Open, up to 1200 px: the 232 px nav, groups with an eyebrow, counts right-aligned, a 56 px bar, the cream stage</span>
15
- <div style="width: 1200px; max-width: 100%; height: 440px; border-radius: var(--ws-radius-panel); overflow: hidden;"><div class="ws-app-shell">
14
+ <span class="ws-muted">Open: the 232 px nav on the frame's wash, the current page a white pill, a 56 px bar with the crumbs, the glass stage; the body scrolls, the person stays. Click a row: the pill slides to it on North's sidebar spring</span>
15
+ <div style="width: 1240px; max-width: 100%; height: 600px; border-radius: var(--ws-radius-panel); overflow: hidden;"><div class="ws-app-shell">
16
16
  <nav class="ws-app-shell__nav" aria-label="Main">
17
- <div class="ws-app-shell__wordmark">Fello</div>
18
-
19
- <h2 class="ws-eyebrow ws-app-shell__eyebrow">Work</h2>
20
- <div class="ws-app-shell__rows">
21
- <button type="button" class="ws-app-shell__row ws-app-shell__row--current" aria-current="page">
22
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6.5h12"/></svg>
23
- <span class="ws-app-shell__name">Pipeline</span>
24
- <span class="ws-app-shell__count" aria-label="7 waiting">7</span>
25
- </button>
26
- <button type="button" class="ws-app-shell__row">
27
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="5.6" r="2.4"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4"/></svg>
28
- <span class="ws-app-shell__name">Leads</span>
29
- </button>
30
- <button type="button" class="ws-app-shell__row">
31
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12V7l5-3.5L13 7v5"/><path d="M6.5 13.5V9.5h3v4"/></svg>
32
- <span class="ws-app-shell__name">Listings</span>
17
+ <div class="ws-app-shell__head">
18
+ <span class="ws-app-shell__wordmark">Fello</span>
19
+ <button type="button" class="ws-icon-btn" aria-label="Fold the menu" aria-expanded="true">
20
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2.5" width="12" height="11" rx="2"/><path d="M6 2.5v11"/></svg>
33
21
  </button>
34
22
  </div>
35
-
36
- <h2 class="ws-eyebrow ws-app-shell__eyebrow">Reports</h2>
37
- <div class="ws-app-shell__rows">
38
- <button type="button" class="ws-app-shell__row">
39
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13V8M8 13V3M13 13V9.5"/></svg>
40
- <span class="ws-app-shell__name">Performance</span>
41
- </button>
42
- <button type="button" class="ws-app-shell__row">
43
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="5.5"/><path d="M8 5v3l2 1.5"/></svg>
44
- <span class="ws-app-shell__name">Activity</span>
45
- <span class="ws-app-shell__count" aria-label="2 waiting">2</span>
46
- </button>
23
+ <div class="ws-app-shell__groups">
24
+ <div class="ws-app-shell__group">
25
+ <ul class="ws-app-shell__rows">
26
+ <li><a href="#" class="ws-app-shell__row" onclick="return false;">
27
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5 8 3l5 4.5V13H3Z"/></svg>
28
+ <span class="ws-app-shell__name">Home</span>
29
+ </a></li>
30
+ <li><a href="#" class="ws-app-shell__row" aria-current="page" onclick="return false;">
31
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6.5h12"/></svg>
32
+ <span class="ws-app-shell__name">Pipeline</span>
33
+ <span class="ws-app-shell__count">7<span class="ws-sr"> waiting</span></span>
34
+ </a></li>
35
+ <li><a href="#" class="ws-app-shell__row" onclick="return false;">
36
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="5.6" r="2.4"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4"/></svg>
37
+ <span class="ws-app-shell__name">Leads</span>
38
+ <span class="ws-app-shell__count">12<span class="ws-sr"> new</span></span>
39
+ </a></li>
40
+ </ul>
41
+ </div>
42
+ <div class="ws-app-shell__group">
43
+ <h2 class="ws-app-shell__eyebrow">Reports</h2>
44
+ <ul class="ws-app-shell__rows">
45
+ <li><a href="#" class="ws-app-shell__row" onclick="return false;">
46
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13V8M8 13V3M13 13V9.5"/></svg>
47
+ <span class="ws-app-shell__name">Performance</span>
48
+ </a></li>
49
+ <li><a href="#" class="ws-app-shell__row" title="Listings that went quiet this quarter" onclick="return false;">
50
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="5.5"/><path d="M8 5v3l2 1.5"/></svg>
51
+ <span class="ws-app-shell__name">Listings that went quiet this quarter</span>
52
+ <span class="ws-app-shell__count">2<span class="ws-sr"> waiting</span></span>
53
+ </a></li>
54
+ </ul>
55
+ </div>
56
+ <div class="ws-app-shell__group">
57
+ <h2 class="ws-app-shell__eyebrow">Settings</h2>
58
+ <ul class="ws-app-shell__rows">
59
+ <li><a href="#" class="ws-app-shell__row" onclick="return false;">
60
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.5"/><circle cx="11.5" cy="7" r="1.8"/><path d="M1.5 13c0-2.2 2-3.5 4.5-3.5s4.5 1.3 4.5 3.5M10.5 10c1.8 0 3.5.9 3.5 2.6"/></svg>
61
+ <span class="ws-app-shell__name">Team</span>
62
+ </a></li>
63
+ </ul>
64
+ </div>
47
65
  </div>
48
-
49
66
  <div class="ws-app-shell__foot">
50
- <span class="ws-avatar">PN</span>
67
+ <span class="ws-avatar ws-avatar--sm ws-avatar--plain">PN</span>
51
68
  <span class="ws-app-shell__foot-words">
52
69
  <span class="ws-app-shell__foot-name">Priya Nair</span>
53
70
  <span class="ws-muted">Team lead</span>
@@ -57,41 +74,305 @@
57
74
 
58
75
  <div class="ws-app-shell__stage">
59
76
  <header class="ws-app-shell__bar">
60
- <h1 class="ws-app-shell__title">Pipeline</h1>
61
- <span class="ws-app-shell__search" role="searchbox" aria-label="Search">
62
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="6.8" cy="6.8" r="3.8"/><path d="M9.7 9.7l3.6 3.6"/></svg>
63
- Search leads
64
- </span>
65
- <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Add a lead</button>
77
+ <button type="button" class="ws-icon-btn ws-app-shell__menu" aria-label="Open the menu">
78
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/></svg>
79
+ </button>
80
+ <nav class="ws-breadcrumb" aria-label="Breadcrumb">
81
+ <a href="#" onclick="return false;">Pipeline</a>
82
+ <span class="ws-breadcrumb__sep" aria-hidden="true">/</span>
83
+ <span class="ws-breadcrumb__current" aria-current="page" title="Showings this week">Showings this week</span>
84
+ </nav>
85
+ <div class="ws-app-shell__acts">
86
+ <label class="ws-app-shell__search">
87
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6.8" cy="6.8" r="3.8"/><path d="M9.7 9.7l3.6 3.6"/></svg>
88
+ <input type="search" placeholder="Search leads" aria-label="Search leads">
89
+ </label>
90
+ <button type="button" class="ws-btn ws-btn--primary">Add a lead</button>
91
+ </div>
92
+ </header>
93
+ <main class="ws-app-shell__body">
94
+ <section class="ws-section-group" aria-labelledby="shell-week">
95
+ <div class="ws-section-group__head">
96
+ <div class="ws-section-group__words">
97
+ <h2 id="shell-week" class="ws-section-group__title">This week</h2>
98
+ <p class="ws-muted">Since Monday, Oct 27</p>
99
+ </div>
100
+ </div>
101
+ <ul class="ws-board ws-board--4" aria-label="This week">
102
+ <li class="ws-card ws-card--inset ws-stack ws-stack--tight ws-settle" style="--ws-i: 0;"><span class="ws-muted">Showings</span><span class="ws-figure ws-figure--tile">14</span></li>
103
+ <li class="ws-card ws-card--inset ws-stack ws-stack--tight ws-settle" style="--ws-i: 1;"><span class="ws-muted">Offers out</span><span class="ws-figure ws-figure--tile">3</span></li>
104
+ <li class="ws-card ws-card--inset ws-stack ws-stack--tight ws-settle" style="--ws-i: 2;"><span class="ws-muted">Follow-ups</span><span class="ws-figure ws-figure--tile">22</span></li>
105
+ <li class="ws-card ws-card--inset ws-stack ws-stack--tight ws-settle" style="--ws-i: 3;"><span class="ws-muted">New leads</span><span class="ws-figure ws-figure--tile">12</span></li>
106
+ </ul>
107
+ </section>
108
+ <div class="ws-board">
109
+ <section class="ws-card ws-card--inset ws-stack ws-settle" style="--ws-i: 4;" aria-labelledby="shell-c1"><h2 class="ws-title" id="shell-c1">Saturday is the busy day</h2><p class="ws-body">Six of fourteen showings are on Saturday. Two agents are free that morning.</p></section>
110
+ <section class="ws-card ws-card--inset ws-stack ws-settle" style="--ws-i: 5;" aria-labelledby="shell-c2"><h2 class="ws-title" id="shell-c2">Three offers wait on you</h2><p class="ws-body">The oldest has waited two days. Call Dana Alvarez first.</p></section>
111
+ <section class="ws-card ws-card--inset ws-stack" aria-labelledby="shell-c3"><h2 class="ws-title" id="shell-c3">Leads by source</h2><p class="ws-body">Zillow brought seven, referrals four, the website one.</p></section>
112
+ <section class="ws-card ws-card--inset ws-stack" aria-labelledby="shell-c4"><h2 class="ws-title" id="shell-c4">Calls this week</h2><p class="ws-body">Forty-one calls, up nine on last week.</p></section>
113
+ </div>
114
+ </main>
115
+ </div>
116
+ </div></div>
117
+ </div>
118
+
119
+ <div class="ws-stack">
120
+ <span class="ws-muted">Folded to the 64 px rail (the same nav, names faded but read aloud and in each row&rsquo;s title), the Fia frames&rsquo; cream stage (--wash), the thread header as the bar with its edge once scrolled, the body loading</span>
121
+ <div style="width: 1040px; max-width: 100%; height: 420px; border-radius: var(--ws-radius-panel); overflow: hidden;"><div class="ws-app-shell ws-app-shell--folded ws-app-shell--wash">
122
+ <nav class="ws-app-shell__nav" aria-label="Main">
123
+ <div class="ws-app-shell__head">
124
+ <span class="ws-app-shell__wordmark">Fello</span>
125
+ <button type="button" class="ws-icon-btn" aria-label="Open the menu" aria-expanded="false">
126
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2.5" width="12" height="11" rx="2"/><path d="M6 2.5v11"/></svg>
127
+ </button>
128
+ </div>
129
+ <div class="ws-app-shell__groups">
130
+ <div class="ws-app-shell__group">
131
+ <ul class="ws-app-shell__rows">
132
+ <li><a href="#" class="ws-app-shell__row" onclick="return false;" title="Home"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5 8 3l5 4.5V13H3Z"/></svg><span class="ws-app-shell__name">Home</span></a></li>
133
+ <li><a href="#" class="ws-app-shell__row" onclick="return false;" title="Pipeline, 7 waiting"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6.5h12"/></svg><span class="ws-app-shell__name">Pipeline</span><span class="ws-app-shell__count">7<span class="ws-sr"> waiting</span></span></a></li>
134
+ </ul>
135
+ </div>
136
+ <div class="ws-app-shell__group">
137
+ <h2 class="ws-app-shell__eyebrow">Reports</h2>
138
+ <ul class="ws-app-shell__rows">
139
+ <li><a href="#" class="ws-app-shell__row" aria-current="page" onclick="return false;" title="Audit report"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13V8M8 13V3M13 13V9.5"/></svg><span class="ws-app-shell__name">Audit report</span></a></li>
140
+ <li><a href="#" class="ws-app-shell__row" onclick="return false;" title="Activity"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="5.5"/><path d="M8 5v3l2 1.5"/></svg><span class="ws-app-shell__name">Activity</span></a></li>
141
+ </ul>
142
+ </div>
143
+ </div>
144
+ <div class="ws-app-shell__foot">
145
+ <span class="ws-avatar ws-avatar--sm ws-avatar--plain">PN</span>
146
+ <span class="ws-app-shell__foot-words"><span class="ws-app-shell__foot-name">Priya Nair</span><span class="ws-muted">Team lead</span></span>
147
+ </div>
148
+ </nav>
149
+ <div class="ws-app-shell__stage">
150
+ <header class="ws-app-shell__bar ws-app-shell__bar--scrolled ws-page-bar">
151
+ <div class="ws-page-bar__words">
152
+ <button type="button" class="ws-icon-btn ws-app-shell__menu" aria-label="Open the menu">
153
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/></svg>
154
+ </button>
155
+ <svg class="ws-page-bar__face" 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>
156
+ <h1 class="ws-page-bar__title" title="Audit report">Audit report</h1>
157
+ <span class="ws-page-bar__context">Grow</span>
158
+ </div>
159
+ <div class="ws-page-bar__acts">
160
+ <a href="#" class="ws-page-bar__back" aria-label="Back to the chat" onclick="return false;">
161
+ <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="M8 3v5H3M12 3v5h5M8 17v-5H3M12 17v-5h5"/></svg>
162
+ <span class="ws-page-bar__back-words">Back to the chat</span>
163
+ </a>
164
+ </div>
66
165
  </header>
67
- <div class="ws-app-shell__body">
68
- <div class="ws-card ws-rise" style="height: calc(var(--space-4xl) + var(--space-xs));"></div>
69
- <div class="ws-card ws-rise" style="height: calc(var(--space-4xl) + var(--space-xs)); animation-delay: 30ms;"></div>
70
- <div class="ws-card ws-rise" style="height: calc(var(--space-4xl) + var(--space-xs)); animation-delay: 60ms;"></div>
166
+ <div class="ws-app-shell__body" aria-busy="true">
167
+ <span class="ws-sr" role="status">Loading the report</span>
168
+ <span class="ws-shimmer" style="width: var(--space-9xl); height: var(--space-6xl);"></span>
169
+ <span class="ws-shimmer" style="height: var(--space-2xl);"></span>
170
+ <span class="ws-shimmer" style="height: var(--space-8xl);"></span>
71
171
  </div>
72
172
  </div>
73
173
  </div></div>
74
174
  </div>
75
175
 
76
- <figure class="ws-stack" style="align-self: flex-start;">
77
- <span class="ws-muted">Folded, 72 px: the same rows as marks only, the stage unchanged</span>
78
- <div style="width: 420px; max-width: 100%; height: 160px; border-radius: var(--ws-radius-panel); overflow: hidden;"><div class="ws-app-shell">
79
- <nav class="ws-app-shell__rail" aria-label="Main">
80
- <span class="ws-app-shell__mark ws-app-shell__mark--wordmark">F</span>
81
- <span class="ws-app-shell__mark ws-app-shell__mark--current" aria-current="page" aria-label="Pipeline">
82
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6.5h12"/></svg>
83
- </span>
84
- <span class="ws-app-shell__mark" aria-label="Leads">
85
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="5.6" r="2.4"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4"/></svg>
86
- </span>
176
+ <div class="ws-stack">
177
+ <span class="ws-muted">A Fia report with its drawer (recipe 23, Seth 301:1630): --wash, __body--wide (the body's full width, no 1128 cap), the thread header as the bar, a --fill Split: the report column scrolls on its own and fades while rows hide below, the drawer runs to the stage's foot, 24 above it</span>
178
+ <div style="width: 1440px; max-width: 100%; height: 600px; border-radius: var(--ws-radius-panel); overflow: hidden;"><div class="ws-app-shell ws-app-shell--folded ws-app-shell--wash">
179
+ <nav class="ws-app-shell__nav" aria-label="Main">
180
+ <div class="ws-app-shell__head">
181
+ <span class="ws-app-shell__wordmark">Fello</span>
182
+ <button type="button" class="ws-icon-btn" aria-label="Open the menu" aria-expanded="false">
183
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2.5" width="12" height="11" rx="2"/><path d="M6 2.5v11"/></svg>
184
+ </button>
185
+ </div>
186
+ <div class="ws-app-shell__groups">
187
+ <div class="ws-app-shell__group">
188
+ <ul class="ws-app-shell__rows">
189
+ <li><a href="#" class="ws-app-shell__row" onclick="return false;" title="Home"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5 8 3l5 4.5V13H3Z"/></svg><span class="ws-app-shell__name">Home</span></a></li>
190
+ <li><a href="#" class="ws-app-shell__row" aria-current="page" onclick="return false;" title="Audit report"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13V8M8 13V3M13 13V9.5"/></svg><span class="ws-app-shell__name">Audit report</span></a></li>
191
+ </ul>
192
+ </div>
193
+ </div>
194
+ <div class="ws-app-shell__foot">
195
+ <span class="ws-avatar ws-avatar--sm ws-avatar--plain">PN</span>
196
+ <span class="ws-app-shell__foot-words"><span class="ws-app-shell__foot-name">Priya Nair</span><span class="ws-muted">Team lead</span></span>
197
+ </div>
87
198
  </nav>
88
199
  <div class="ws-app-shell__stage">
89
- <header class="ws-app-shell__bar"><h1 class="ws-app-shell__title">Pipeline</h1></header>
200
+ <header class="ws-app-shell__bar ws-page-bar">
201
+ <div class="ws-page-bar__words">
202
+ <button type="button" class="ws-icon-btn ws-app-shell__menu" aria-label="Open the menu">
203
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/></svg>
204
+ </button>
205
+ <svg class="ws-page-bar__face" 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>
206
+ <h1 class="ws-page-bar__title" title="Audit report">Audit report</h1>
207
+ <span class="ws-page-bar__context">Grow</span>
208
+ </div>
209
+ <div class="ws-page-bar__acts">
210
+ <p class="ws-page-bar__meta"><span>Last audit</span><span>Nov 2, today</span></p>
211
+ <button type="button" class="ws-btn ws-btn--secondary">Settings</button>
212
+ <a href="#" class="ws-page-bar__back" aria-label="Back to the chat" onclick="return false;">
213
+ <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="M8 3v5H3M12 3v5h5M8 17v-5H3M12 17v-5h5"/></svg>
214
+ <span class="ws-page-bar__back-words">Back to the chat</span>
215
+ </a>
216
+ </div>
217
+ </header>
218
+ <main class="ws-app-shell__body ws-app-shell__body--wide">
219
+ <div class="ws-split ws-split--fill">
220
+ <div class="ws-split__main ws-stack ws-stack--block">
221
+ <section class="ws-score-hero ws-score-hero--needs-work" aria-label="Your score: 39 of 100, needs work">
222
+ <div class="ws-score-hero__head">
223
+ <p class="ws-figure ws-figure--score ws-score-hero__figure">39</p>
224
+ </div>
225
+ <div class="ws-tick-strip ws-tick-strip--lg" style="--n: 50;" aria-hidden="true"><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><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 3;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 4;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 5;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 6;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 7;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 8;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 9;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 10;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 11;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 12;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 13;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 14;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 15;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 16;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 17;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 18;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 19;"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
226
+ <p class="ws-score-hero__summary">
227
+ <span class="ws-score-hero__rating">Needs work</span>
228
+ <span class="ws-score-hero__line">Start with Local search: buyers near you see you in five of nine spots.</span>
229
+ </p>
230
+ </section>
231
+ <section class="ws-stack ws-stack--component" aria-labelledby="shell-r23-checks">
232
+ <h2 class="ws-section" id="shell-r23-checks">Your AI visibility checks</h2>
233
+ <ul class="ws-check-row" aria-label="Your AI visibility checks">
234
+ <li><button type="button" class="ws-check-row__row" aria-expanded="true" aria-label="Local search, score 39 of 100, needs work, 2 fixes">
235
+ <span class="ws-check-row__name">Local search</span>
236
+ <span class="ws-check-row__ticks ws-check-row__ticks--needs-work" aria-hidden="true"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
237
+ <span class="ws-check-row__score">39</span>
238
+ <span class="ws-check-row__status">2 fixes</span>
239
+ <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
240
+ </button></li>
241
+ <li><button type="button" class="ws-check-row__row" aria-expanded="false" aria-label="Website, score 75 of 100, strong, 2 fixes">
242
+ <span class="ws-check-row__name">Website</span>
243
+ <span class="ws-check-row__ticks" aria-hidden="true"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
244
+ <span class="ws-check-row__score">75</span>
245
+ <span class="ws-check-row__status">2 fixes</span>
246
+ <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
247
+ </button></li>
248
+ <li><button type="button" class="ws-check-row__row" aria-expanded="false" aria-label="Social, score 55 of 100, getting there, 1 fix">
249
+ <span class="ws-check-row__name">Social</span>
250
+ <span class="ws-check-row__ticks ws-check-row__ticks--middle" aria-hidden="true"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
251
+ <span class="ws-check-row__score">55</span>
252
+ <span class="ws-check-row__status">1 fix</span>
253
+ <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
254
+ </button></li>
255
+ <li><button type="button" class="ws-check-row__row" aria-expanded="false" aria-label="Zillow, score 100 of 100, strong, Nothing to fix">
256
+ <span class="ws-check-row__name">Zillow</span>
257
+ <span class="ws-check-row__ticks" aria-hidden="true"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></span>
258
+ <span class="ws-check-row__score">100</span>
259
+ <span class="ws-check-row__status ws-check-row__status--quiet">Nothing to fix</span>
260
+ <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
261
+ </button></li>
262
+ <li><button type="button" class="ws-check-row__row" aria-expanded="false" aria-label="Reviews, score 88 of 100, strong, 1 fix">
263
+ <span class="ws-check-row__name">Reviews</span>
264
+ <span class="ws-check-row__ticks" aria-hidden="true"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><i></i><i></i><i></i><i></i><i></i></span>
265
+ <span class="ws-check-row__score">88</span>
266
+ <span class="ws-check-row__status">1 fix</span>
267
+ <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
268
+ </button></li>
269
+ <li><button type="button" class="ws-check-row__row" aria-expanded="false" aria-label="AI answers, score 61 of 100, getting there, 1 fix">
270
+ <span class="ws-check-row__name">AI answers</span>
271
+ <span class="ws-check-row__ticks ws-check-row__ticks--middle" aria-hidden="true"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
272
+ <span class="ws-check-row__score">61</span>
273
+ <span class="ws-check-row__status">1 fix</span>
274
+ <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
275
+ </button></li>
276
+ <li><button type="button" class="ws-check-row__row" aria-expanded="false" aria-label="Google Business Profile, not checked, Could not check">
277
+ <span class="ws-check-row__name">Google Business Profile</span>
278
+ <span class="ws-check-row__ticks" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
279
+ <span class="ws-check-row__status ws-check-row__status--quiet">Could not check</span>
280
+ <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
281
+ </button></li>
282
+ </ul>
283
+ </section>
284
+ </div>
285
+ <aside class="ws-split__aside ws-card ws-card--compound" aria-labelledby="shell-r23-aside">
286
+ <header class="ws-head"><div>
287
+ <h2 class="ws-title" id="shell-r23-aside">Local search</h2>
288
+ <p class="ws-body ws-card__line">How often you show up on Google Maps when buyers search near you.</p>
289
+ </div></header>
290
+ <footer class="ws-band">
291
+ <div class="ws-band__words">
292
+ <p class="ws-band__title">Next fix, 1 of 2</p>
293
+ <p class="ws-band__how">Name the towns you serve</p>
294
+ </div>
295
+ <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Review the rewrite</button>
296
+ </footer>
297
+ </aside>
298
+ </div>
299
+ </main>
90
300
  </div>
91
301
  </div></div>
92
- <figcaption class="ws-muted" style="max-width: 380px;">The rail keeps the groups' marks in one column at 72 px (`--ws-rail-width`); only the width and the words trade, the same fold behaviour as any nav in the system.</figcaption>
93
- </figure>
302
+ </div>
303
+
304
+
305
+ <div class="ws-cluster ws-cluster--start ws-cluster--component">
306
+ <figure class="ws-stack" style="width: 390px; max-width: 100%;">
307
+ <span class="ws-muted">The phone form (under 60rem of the shell): no nav, a menu button, the stage edge to edge, 16 px sides</span>
308
+ <div style="height: 520px; border-radius: var(--ws-radius-panel); overflow: hidden; box-shadow: var(--ws-shadow-hairline);"><div class="ws-app-shell">
309
+ <nav class="ws-app-shell__nav" aria-label="Main"><div class="ws-app-shell__head"><span class="ws-app-shell__wordmark">Fello</span></div></nav>
310
+ <div class="ws-app-shell__stage">
311
+ <header class="ws-app-shell__bar">
312
+ <button type="button" class="ws-icon-btn ws-app-shell__menu" aria-label="Open the menu">
313
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/></svg>
314
+ </button>
315
+ <h1 class="ws-app-shell__title" title="Showings this week, by agent">Showings this week, by agent</h1>
316
+ <div class="ws-app-shell__acts">
317
+ <button type="button" class="ws-icon-btn" aria-label="Add a lead">
318
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v10M3 8h10"/></svg>
319
+ </button>
320
+ </div>
321
+ </header>
322
+ <div class="ws-app-shell__body">
323
+ <ul class="ws-board ws-board--4" aria-label="This week">
324
+ <li class="ws-card ws-card--inset ws-stack ws-stack--tight"><span class="ws-muted">Showings</span><span class="ws-figure ws-figure--tile">14</span></li>
325
+ <li class="ws-card ws-card--inset ws-stack ws-stack--tight"><span class="ws-muted">Offers out</span><span class="ws-figure ws-figure--tile">3</span></li>
326
+ </ul>
327
+ <section class="ws-card ws-card--inset ws-stack" aria-labelledby="shell-p1"><h2 class="ws-title" id="shell-p1">Saturday is the busy day</h2><p class="ws-body">Six of fourteen showings are on Saturday.</p></section>
328
+ <section class="ws-card ws-card--inset ws-stack" aria-labelledby="shell-p2"><h2 class="ws-title" id="shell-p2">Three offers wait on you</h2><p class="ws-body">Call Dana Alvarez first.</p></section>
329
+ </div>
330
+ </div>
331
+ </div></div>
332
+ </figure>
333
+
334
+ <figure class="ws-stack" style="width: 390px; max-width: 100%;">
335
+ <span class="ws-muted">The same nav in its drawer on a phone: the drawer's width, the head's act closes it</span>
336
+ <div style="height: 520px; display: flex; border-radius: var(--ws-radius-panel); overflow: hidden; background: var(--ws-frame); box-shadow: var(--ws-shadow-hairline);">
337
+ <nav class="ws-app-shell__nav" aria-label="Main" style="flex: 1;">
338
+ <div class="ws-app-shell__head">
339
+ <span class="ws-app-shell__wordmark">Fello</span>
340
+ <button type="button" class="ws-icon-btn" aria-label="Close the menu">
341
+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
342
+ </button>
343
+ </div>
344
+ <div class="ws-app-shell__groups">
345
+ <div class="ws-app-shell__group">
346
+ <ul class="ws-app-shell__rows">
347
+ <li><a href="#" class="ws-app-shell__row" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5 8 3l5 4.5V13H3Z"/></svg><span class="ws-app-shell__name">Home</span></a></li>
348
+ <li><a href="#" class="ws-app-shell__row" aria-current="page" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6.5h12"/></svg><span class="ws-app-shell__name">Pipeline</span><span class="ws-app-shell__count">7<span class="ws-sr"> waiting</span></span></a></li>
349
+ <li><a href="#" class="ws-app-shell__row" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="5.6" r="2.4"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4"/></svg><span class="ws-app-shell__name">Leads</span></a></li>
350
+ </ul>
351
+ </div>
352
+ <div class="ws-app-shell__group">
353
+ <h2 class="ws-app-shell__eyebrow">Reports</h2>
354
+ <ul class="ws-app-shell__rows">
355
+ <li><a href="#" class="ws-app-shell__row" onclick="return false;"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13V8M8 13V3M13 13V9.5"/></svg><span class="ws-app-shell__name">Performance</span></a></li>
356
+ </ul>
357
+ </div>
358
+ </div>
359
+ <div class="ws-app-shell__foot">
360
+ <span class="ws-avatar ws-avatar--sm ws-avatar--plain">PN</span>
361
+ <span class="ws-app-shell__foot-words"><span class="ws-app-shell__foot-name">Priya Nair</span><span class="ws-muted">Team lead</span></span>
362
+ </div>
363
+ </nav>
364
+ </div>
365
+ </figure>
366
+ </div>
94
367
 
95
368
  </div>
369
+ <script>
370
+ /* The demo's wiring: a click makes the row the current page (an app's router does this; the pill slides on its own). */
371
+ document.addEventListener('click', (e) => {
372
+ const row = e.target.closest('.ws-app-shell__row');
373
+ if (!row) return;
374
+ for (const r of row.closest('.ws-app-shell__nav').querySelectorAll('.ws-app-shell__row')) r === row ? r.setAttribute('aria-current', 'page') : r.removeAttribute('aria-current');
375
+ });
376
+ </script>
96
377
  </body>
97
378
  </html>