@felloinnovations/brand-kit 0.5.0 → 0.5.3

package/design-system/components/Skeleton/README.md

@@ -1,30 +1,46 @@
-A ghost of what is coming, in the shape it will take, with North's shimmer in the chart colours passing over it, so
+A ghost of what is coming, in the shape it will take, with North's shimmer passing over it in one quiet grey, so
 nothing jumps when the real content lands.
 
 ## Use it when
 
 - A card, a row or a line of text has not loaded yet, and the layout it will take is already known.
-- A whole page is loading (`CanvasLoading`): a header pair and a bento of card-shaped rectangles, sized to match what will land.
+- A whole page is loading its data (a dashboard, an account's page): the page ghost (A page, below). The page's own
+  `PageBar` shows at once with its name, the words and acts that wait on the data are ghosts, and the board holds a tile
+  or card skeleton where each real one will land.
 - A list or a well is still being read: a few rows stand in placeholders' places (`Well busy`, `WellRow hidden`).
 
 ## Not for
 
+- A list page or a board page: the page's `PageBar` and `FilterBar` at once, then `Table`'s own ghost rows
+  (`ws-table__placeholder`) or `KanbanBoard`'s ghost cards (`ws-kanban-board__ghost`), their heads shown at once. Never a
+  bento of cards in place of a table or a board.
 - "There is an answer and it is nothing": use `EmptyState`.
 - A single control waiting on its own request (a pressed button): use the button's own `pending` state (a working dot), not a skeleton.
 - Content whose final size is unknown: a skeleton promises a shape; guessing wildly causes more jumping than a plain loading line would.
 
 ## Anatomy
 
-- A ghost block (`ws-skeleton`): 4 px corners (`--ws-radius-control`), the shimmer for its ground (`--ws-shimmer`:
-  the warm grey #ECE8E4 with a pass of salmon, purple and teal at 300 %), sized where used. Steps: `--line` 12 px
+- A ghost block (`ws-skeleton`): 4 px corners (`--ws-radius-control`), the shimmer (`--ws-shimmer`: the ghost grey
+  #E3DFDB with a lighter pass of the same grey, #F6F3F0, at 300 %; no chart hues), sized where used. Steps: `--line` 12 px
   tall, `--title` 28 px (a title's line), `--button` 120 x 36 with 6 px corners (North's button place, on the grid).
 - Lines: a column 8 px apart (`ws-stack`), full width except the last, two thirds.
 - A card skeleton: the same card (`ws-card`) with ghosts for its head (`ws-skeleton__head`, 20 in), its body
-  (`ws-skeleton__body`) and its band; a tile keeps its tray foot. On the tray (a foot) and in a band the ghosts are
-  built on the hover grey (`--ws-well-hover`), since the shimmer's own grey is the tray's (1.04:1) and vanished there.
-- A chart ghost (`ws-skeleton__chart`): 160 px tall, the bars 4 px apart in a quiet ghost grey (`--ws-well-hover`),
-  with one colour band (salmon, purple, teal) passing over the whole drawing in blend mode colour at 85 %, so each bar
-  takes the band's hue as it crosses it (North's loading chart).
+  (`ws-skeleton__body`) and its band; a tile keeps its tray foot. The ghost grey shows on the tray too (1.13:1, the
+  cream 1.29:1), so a ghost in a foot or a band is the same ghost.
+- A chart ghost (`ws-skeleton__chart`): 160 px tall, the bars 4 px apart, each a ghost under the same shimmer as every
+  other ghost. North's colour band over the drawing is not taken (0.5.1): loaders are one neutral tone.
+- A page (the page ghost; no class of its own, the page's own layout and the ghosts above): the real `.ws-page` (or
+  `AppShell`'s body) with `aria-busy="true"` and one `ws-sr` status line, so the ghost lands where the page will and
+  nothing jumps.
+  - Its `PageBar` is the real bar, 56 tall either way: the name shows at once (a page knows its own name). Words that
+    wait on the data are ghosts on their own classes (`ws-page-bar__context ws-skeleton ws-skeleton--line`, 200 wide),
+    so they wrap, and hide in a shell's bar on a phone, as the words will. An act that needs the data is a button place
+    (`--button`); one that does not ("Sync now") stays a real button. A name that comes with the data (an account's
+    page) is a ghost line in the title's place.
+  - Its board is the real board: `ws-board ws-board--4` for a row of tiles (four, two or one, never three), `ws-board`
+    for the chart cards, each a card skeleton the shape of the card that lands. The chart ghost stands for a 160 px plot;
+    set it to the card's own plot height when that is shorter (`ws-card__bars` is 72), and a card with rows gets a ghost
+    row per row. Draw only the cards above the fold; the rest come as they load.
 
 ## Variants and sizes
 
@@ -34,16 +50,18 @@ nothing jumps when the real content lands.
 | A card or tile skeleton | A chart card or tile still loading, keeping the page's layout steady |
 | A chart ghost | The drawing inside a chart card that is still being built |
 | A button place | The band's act before the card knows it |
+| A page | A whole page still loading its data: the real bar with its name, its waiting words and acts as ghosts, a board of tile and card skeletons |
 
 ## States
 
 - **Loading** (the only state): the shimmer passes over every ghost every 1.8 s (`--ws-loop-shimmer` on
-  `--ws-ease-shimmer`); the chart's colour band on the same beat.
+  `--ws-ease-shimmer`), the chart's bars included.
 - **Loaded**: the skeleton is removed and the real content takes its place; nothing jumps, since the ghosts use the
   content's own sizes.
-- **Reduced motion**: nothing travels. The ghosts are one still ghost grey (`--ws-well-hover`, North's ghost, the
-  chart ghost's own), never a frozen frame of the sweep, and the chart band is not drawn; still plainly a placeholder.
-- **Dark**: the shimmer and the ghost grey are theme tokens; the band keeps the brand hues.
+- **Reduced motion**: nothing travels. The ghosts are the still ghost grey (`--ws-ghost`, the shimmer's own ground),
+  never a frozen frame of the sweep; still plainly a placeholder.
+- **Dark and palettes**: the ghost and its pass are theme tokens (the night's ghost #273544 with a pass of 7 % ink), so
+  the shimmer is one neutral tone in every theme and palette.
 
 ## Behaviour
 
@@ -71,12 +89,17 @@ The kit's own `Skeleton` takes a `className` for its shape and size directly (he
 
 - Never invent a size: a skeleton's bars use the real content's own token sizes (a title's line height, a card's padding), so nothing jumps when the content replaces it.
 - A loading region is announced once (`aria-busy`, `aria-live="polite"` on the container), not per placeholder bar.
+- A page's name never waits on its data, and a page ghost is the page's own bar and board, never a layout of its own:
+  what lands takes the ghost's place in the same grid.
 - With reduced motion, a skeleton is still visibly a placeholder (still grey ghosts), never indistinguishable from real, blank content.
 
 ## Source
 
-**Derived from**: North's loading (style1.css:1458-1469: the chart-colour shimmer over blocks, the ghost shapes with a
-colour band in blend mode colour, the 116 x 38 button place) and the kit's own `Skeleton`. It replaces the breathing
+**Derived from**: North's loading (style1.css:1458-1469: the shimmer over blocks, the ghost shapes, the 116 x 38
+button place), North's `CanvasLoading` for the page ghost (a header pair and a bento of card-shaped ghosts; here on the
+page's own bar and board, the name shown at once, as `AppShell`, `Table` and `KanbanBoard` show their heads; Hemanth's
+ask for a page-level loader, 10 Nov 2026) and the kit's own `Skeleton`. North's sweep in the chart colours and its colour band over the chart are
+not taken: loaders are one quiet grey (Amit, 10 Nov 2026, Decisions). It replaces the breathing
 pulse, which read as blank (1.10:1 on the cream, field evidence S01). **Precedent**: the first product built on the
 system.
 
@@ -95,8 +118,50 @@ system.
 </div>
 ```
 
+A page (the preview draws four tiles and two chart cards; repeat the tile and the card for each one that lands):
+
+```html
+<main class="ws-page" aria-busy="true">
+  <span class="ws-sr" role="status">Loading onboarding</span>
+  <header class="ws-page-bar">
+    <div class="ws-page-bar__words">
+      <h1 class="ws-page-bar__title">Onboarding</h1>
+      <span class="ws-page-bar__context ws-skeleton ws-skeleton--line" style="width: var(--space-9xl);" aria-hidden="true"></span>
+    </div>
+    <div class="ws-page-bar__acts" aria-hidden="true"><div class="ws-skeleton ws-skeleton--button"></div></div>
+  </header>
+  <div class="ws-board ws-board--4">
+    <div class="ws-card" aria-hidden="true">
+      <div class="ws-card__surface ws-card__surface--pad ws-stack">
+        <div class="ws-skeleton ws-skeleton--line" style="width: 50%;"></div>
+        <div class="ws-skeleton" style="height: var(--ws-leading-figure); width: 40%;"></div>
+      </div>
+      <div class="ws-card__foot"><div class="ws-skeleton ws-skeleton--line" style="width: 40%;"></div></div>
+    </div>
+  </div>
+  <div class="ws-board">
+    <div class="ws-card ws-card--compound" aria-hidden="true">
+      <div class="ws-skeleton__head">
+        <div class="ws-skeleton ws-skeleton--title" style="width: 55%;"></div>
+        <div class="ws-skeleton ws-skeleton--line" style="width: 80%;"></div>
+      </div>
+      <div class="ws-skeleton__body">
+        <div class="ws-skeleton__chart"><i style="height: 35%;"></i><i style="height: 60%;"></i><i style="height: 45%;"></i><i style="height: 75%;"></i></div>
+      </div>
+      <footer class="ws-band">
+        <div class="ws-band__words"><div class="ws-skeleton ws-skeleton--line" style="width: 50%;"></div></div>
+        <div class="ws-band__acts"><div class="ws-skeleton ws-skeleton--button"></div></div>
+      </footer>
+    </div>
+  </div>
+</main>
+```
+
+In `AppShell` the nav and the bar are already there: put the bar's ghosts in the shell's bar and the boards straight in
+its body (`aria-busy="true"` and the status line on the body), with no `.ws-page` inside.
+
 ## Styles
 
 `Skeleton/style.css`, built into `bundle.css` and `fello.css`. The keyframe is the house's `ws-shimmer`. Tokens:
-`--ws-shimmer`, `--ws-loop-shimmer`, `--ws-ease-shimmer`, `--ws-well-hover`, `--ws-chart-under-half`,
-`--ws-chart-past-half`, `--ws-chart-finished`, `--ws-radius-control`, `--ws-radius-row`.
+`--ws-shimmer` (over `--ws-shimmer-ground`), `--ws-ghost`, `--ws-loop-shimmer`, `--ws-ease-shimmer`,
+`--ws-radius-control`, `--ws-radius-row`, `--ws-radius-bar`.

package/design-system/components/Skeleton/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Cards" height=430 -->
+<!-- @dsCard group="Cards" height=1180 -->
 <!doctype html>
 <html>
 <head>
@@ -30,7 +30,7 @@
   </div>
 
   <div class="ws-stack" style="width: 380px;">
-    <span class="ws-muted">A chart card still loading: the ghost bars take the colour band as it passes</span>
+    <span class="ws-muted">A chart card still loading: each bar a ghost under the same shimmer</span>
     <div class="ws-card ws-card--compound" aria-busy="true">
       <span class="ws-sr">Loading the chart</span>
       <div class="ws-skeleton__head" aria-hidden="true">
@@ -51,5 +51,87 @@
     </div>
   </div>
 </div>
+
+<div class="ws-stage ws-stage--column ws-stage--bleed">
+  <span class="ws-muted" style="padding: var(--ws-gap-component) var(--ws-gap-component) 0;">A whole page still loading: its own bar with the name shown at once, the context and the act as ghosts, then a board of tile and card skeletons where the real ones will land</span>
+  <main class="ws-page" aria-busy="true">
+    <span class="ws-sr" role="status">Loading onboarding</span>
+    <header class="ws-page-bar">
+      <div class="ws-page-bar__words">
+        <h1 class="ws-page-bar__title">Onboarding</h1>
+        <span class="ws-page-bar__context ws-skeleton ws-skeleton--line" style="width: var(--space-9xl);" aria-hidden="true"></span>
+      </div>
+      <div class="ws-page-bar__acts" aria-hidden="true">
+        <div class="ws-skeleton ws-skeleton--button"></div>
+      </div>
+    </header>
+    <div class="ws-board ws-board--4">
+      <div class="ws-card" aria-hidden="true">
+        <div class="ws-card__surface ws-card__surface--pad ws-stack">
+          <div class="ws-skeleton ws-skeleton--line" style="width: 50%;"></div>
+          <div class="ws-skeleton" style="height: var(--ws-leading-figure); width: 40%;"></div>
+        </div>
+        <div class="ws-card__foot">
+          <div class="ws-skeleton ws-skeleton--line" style="width: 40%;"></div>
+        </div>
+      </div>
+      <div class="ws-card" aria-hidden="true">
+        <div class="ws-card__surface ws-card__surface--pad ws-stack">
+          <div class="ws-skeleton ws-skeleton--line" style="width: 60%;"></div>
+          <div class="ws-skeleton" style="height: var(--ws-leading-figure); width: 30%;"></div>
+        </div>
+        <div class="ws-card__foot">
+          <div class="ws-skeleton ws-skeleton--line" style="width: 50%;"></div>
+        </div>
+      </div>
+      <div class="ws-card" aria-hidden="true">
+        <div class="ws-card__surface ws-card__surface--pad ws-stack">
+          <div class="ws-skeleton ws-skeleton--line" style="width: 45%;"></div>
+          <div class="ws-skeleton" style="height: var(--ws-leading-figure); width: 45%;"></div>
+        </div>
+        <div class="ws-card__foot">
+          <div class="ws-skeleton ws-skeleton--line" style="width: 35%;"></div>
+        </div>
+      </div>
+      <div class="ws-card" aria-hidden="true">
+        <div class="ws-card__surface ws-card__surface--pad ws-stack">
+          <div class="ws-skeleton ws-skeleton--line" style="width: 55%;"></div>
+          <div class="ws-skeleton" style="height: var(--ws-leading-figure); width: 35%;"></div>
+        </div>
+        <div class="ws-card__foot">
+          <div class="ws-skeleton ws-skeleton--line" style="width: 45%;"></div>
+        </div>
+      </div>
+    </div>
+    <div class="ws-board">
+      <div class="ws-card ws-card--compound" aria-hidden="true">
+        <div class="ws-skeleton__head">
+          <div class="ws-skeleton ws-skeleton--title" style="width: 55%;"></div>
+          <div class="ws-skeleton ws-skeleton--line" style="width: 80%;"></div>
+        </div>
+        <div class="ws-skeleton__body">
+          <div class="ws-skeleton__chart"><i style="height: 35%;"></i><i style="height: 60%;"></i><i style="height: 45%;"></i><i style="height: 75%;"></i><i style="height: 55%;"></i><i style="height: 90%;"></i><i style="height: 70%;"></i><i style="height: 50%;"></i></div>
+        </div>
+        <footer class="ws-band">
+          <div class="ws-band__words"><div class="ws-skeleton ws-skeleton--line" style="width: 50%;"></div></div>
+          <div class="ws-band__acts"><div class="ws-skeleton ws-skeleton--button"></div></div>
+        </footer>
+      </div>
+      <div class="ws-card ws-card--compound" aria-hidden="true">
+        <div class="ws-skeleton__head">
+          <div class="ws-skeleton ws-skeleton--title" style="width: 45%;"></div>
+          <div class="ws-skeleton ws-skeleton--line" style="width: 70%;"></div>
+        </div>
+        <div class="ws-skeleton__body">
+          <div class="ws-skeleton__chart"><i style="height: 60%;"></i><i style="height: 40%;"></i><i style="height: 70%;"></i><i style="height: 50%;"></i><i style="height: 80%;"></i><i style="height: 65%;"></i><i style="height: 45%;"></i><i style="height: 55%;"></i></div>
+        </div>
+        <footer class="ws-band">
+          <div class="ws-band__words"><div class="ws-skeleton ws-skeleton--line" style="width: 40%;"></div></div>
+          <div class="ws-band__acts"><div class="ws-skeleton ws-skeleton--button"></div></div>
+        </footer>
+      </div>
+    </div>
+  </main>
+</div>
 </body>
 </html>

package/design-system/components/Skeleton/style.css

@@ -1,22 +1,17 @@
-/* ---- Skeleton: ghost shapes of what is coming, with North's shimmer in the chart colours running over them; sized where used ---- */
-/* A ghost block: the shimmer (the warm grey, a pass of salmon, purple and teal) at 300 %, 1.8 s. It replaces the
-   breathing pulse (ws-working-slow), which read as blank. Under reduced motion it is a still ghost in North's ghost grey
-   (the chart ghost's), never a frozen frame of the sweep: at rest the 300 % gradient showed its pink edge. */
+/* ---- Skeleton: ghost shapes of what is coming, with North's shimmer, one quiet grey, running over them; sized where used ---- */
+/* A ghost block: the shimmer (the ghost grey with a lighter pass of the same grey) at 300 %, 1.8 s. It replaces the
+   breathing pulse (ws-working-slow), which read as blank. Under reduced motion it is the still ghost, the same grey
+   (North's ghost, the chart ghost's), never a frozen frame of the sweep. The ghost shows on the tray too (a card's foot,
+   a band), so it needs no ground of its own there. */
 .ws-skeleton { border-radius: var(--ws-radius-control); background: var(--ws-ghost); }
 .ws-skeleton--line { height: var(--space-sm); }
 .ws-skeleton--title { height: var(--ws-leading-title); }
 /* A button's place (North's 116 x 38 placeholder, on the grid: 120 x 36, 6 px corners). */
 .ws-skeleton--button { width: var(--space-7xl); height: var(--ws-control-h-md); border-radius: var(--ws-radius-row); }
-/* On the tray (a card's foot) and in a band the ghost's grey was the ground's own (1.04:1 on the tray in light, the same
-   grey as the track in dark), so the placeholder vanished: there it is built on the hover grey, with the dark theme's
-   recipe of 14 % salmon, purple and teal passes, on the token's stops (plain to 34 % and from 66 %, so the loop's end frames show no tint). */
-:is(.ws-card__foot, .ws-band) .ws-skeleton { --ws-shimmer: linear-gradient(100deg, var(--ws-well-hover) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-well-hover)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-well-hover)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-well-hover)) 56%, var(--ws-well-hover) 66% 100%); }
-@media (prefers-reduced-motion: no-preference) { .ws-skeleton { background: var(--ws-shimmer); background-size: 300% 100%; animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; } }
 .ws-skeleton__head { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--ws-card-inset); }
 .ws-skeleton__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: 0 var(--ws-card-inset) var(--space-md); }
-/* A chart still loading: its empty shapes in a quiet ghost grey, and one colour band (salmon, purple, teal) passing
-   over the whole drawing in blend mode colour, so the bars take the band's hue as it crosses them. */
-.ws-skeleton__chart { position: relative; display: flex; align-items: flex-end; gap: var(--space-xxs); height: var(--space-8xl); }
+/* A chart still loading: its empty shapes, each a ghost with the same sweep as every other ghost. North's colour band
+   over the drawing is gone (0.5.1): loaders are one neutral tone, and a neutral band in blend mode colour paints nothing. */
+.ws-skeleton__chart { display: flex; align-items: flex-end; gap: var(--space-xxs); height: var(--space-8xl); }
 .ws-skeleton__chart > * { flex: 1 1 0; min-width: 0; border-radius: var(--ws-radius-bar) var(--ws-radius-bar) 0 0; background: var(--ws-ghost); }
-.ws-skeleton__chart::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 28%, var(--ws-chart-under-half) 40%, var(--ws-chart-past-half) 50%, var(--color-stat-positive) 60%, transparent 72%); background-size: 300% 100%; mix-blend-mode: color; opacity: 0; }
-@media (prefers-reduced-motion: no-preference) { .ws-skeleton__chart::after { opacity: 0.85; animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; } }
+@media (prefers-reduced-motion: no-preference) { :is(.ws-skeleton, .ws-skeleton__chart > *) { background: var(--ws-shimmer); background-size: 300% 100%; animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; } }

package/design-system/components/Starter/README.md

@@ -23,7 +23,7 @@ paste the CSS into the `<style>`, then replace the sample content with the real
   `fello-core.css`, then the styles of each component the page uses (each component's card lists them; this page needs
   `Page`, `PageBar`, `Card`, `Button` and `Well`; the whole `fello.css` is too big to paste). The buttons and the well
   rows need their own blocks: `fello-core.css` holds only their 0.4 look. A plain page links the whole file instead,
-  pinned: `https://brand-kit-site-production.up.railway.app/v/0.5.0/fello.css`.
+  pinned: `https://brand-kit-site-production.up.railway.app/v/0.5.3/fello.css`.
 - `<main class="ws-page">`: the page (see `Page`), Seth's 32 gutter.
 - `PageBar`: the page's 56 px header, its one `h1` (16 / 22 semibold) and a word of context beside it, and its acts
   with the page's one navy primary last.

package/design-system/components/Starter/preview.html

@@ -7,7 +7,7 @@
 <title>Starter</title>
 <!-- In a claude.ai artifact, paste fello-core.css into the <style> below, then the styles of each component you use
      (each component's card lists them): an artifact may load no stylesheet but Google Fonts. On a plain page, link the
-     whole kit instead, pinned: https://brand-kit-site-production.up.railway.app/v/0.5.0/fello.css -->
+     whole kit instead, pinned: https://brand-kit-site-production.up.railway.app/v/0.5.3/fello.css -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..700&display=swap">

package/design-system/components/Stepper/README.md

@@ -1,16 +1,23 @@
-Ordered steps on a line that fills: done is a tick, the one in hand is ringed, the rest wait their turn.
+Ordered steps on a line that fills: done is a tick, the one in hand is ringed, the rest wait their turn. Down the page
+by default; `--across` lays the stages left to right; `--milestones` makes them dated points on one row.
 
 ## Use it when
 
 - Something happens in a known sequence and the person benefits from seeing where it is (a setup's path, an onboarding
   checklist, an audit).
 - Several things run at once rather than in order (a scan's sources), and the page needs to say which are being read right now.
+- One thing's stages under its title (an onboarding's Scheduling to Graduated, a deal's stages): `--across`.
+- One thing's dated milestones, each reached or not, measured from the start (signed, first value, first agreement):
+  `--milestones`. A variant, not its own component: it is the same marks, line and done or waiting states on a row.
 
 ## Not for
 
 - A share of a goal or a percent: use `GoalTicks` or `Ring`.
 - A count out of a whole: use `TickRow`.
 - A plain loading wait with no named steps: a working chip or spinner, not a `Stepper`.
+- What happened, in order, grouped by day: use `Timeline`.
+- Many things across their stages at once: use `KanbanBoard`.
+- Phases and tasks as bars across dates (a plan): not in the kit yet (issue #24).
 
 ## Anatomy
 
@@ -20,6 +27,17 @@ Ordered steps on a line that fills: done is a tick, the one in hand is ringed, t
 - Waiting: the cream with the fine hairline ring (drawn inside), muted grey number.
 - Connecting line: a 1 px (`calc(--ws-hairline * 2)`) line between marks in `--ws-edge`, filled teal top to bottom when its step above is done.
 - Title: 14 / 20 medium navy, its first line level with the mark; a note under it in `ws-muted` (how far, or "Done").
+- A stall (`__late` on the note, with `ws-muted`): the note in needs-you words (`--ws-word-needs`), never a colour on
+  the mark: the in-hand ring stays navy.
+- Across (`--across`): equal columns, each at least 120 (`--space-7xl`), the mark centred over its words, 8 between
+  them; the line runs at the mark's middle from its right edge to the next mark's left edge and fills left to right
+  (`ws-grow`). Wider than its column, the track scrolls inside and fades at the edge that hides stages (the house
+  `ws-scroll-edges` cue), and the in-hand stage opens in view (`scroll-initial-target`).
+- Milestones (`--milestones`): an 8 px dot, 8 to the words, the name as the title and its measure beside it in
+  `ws-muted` (a date, or days since the start), on one line; the line takes the room left between the words and the
+  next dot, 8 from each. Reached is the teal dot; not reached a 1 px ring (`--ws-edge-card`) with "Not yet", and at
+  most one quiet act beside it (`ws-btn ws-btn--text`). The line after a milestone fills when the next is reached. 4 px
+  of room on every side, pulled back by a margin, so the act's focus ring is never cut.
 
 ## Variants and sizes
 
@@ -27,12 +45,18 @@ Ordered steps on a line that fills: done is a tick, the one in hand is ringed, t
 | --- | --- |
 | In order (default) | The first step not done is the one in hand, found automatically |
 | Side by side (`active` set on any step) | Only steps with `active: true` are in hand (several at once); none active means none are in hand, every undone step simply waits |
+| Across (`ws-stepper--across`) | The same steps left to right, a mark over its words; for a thing's stages under its title |
+| Milestones (`ws-stepper--milestones`) | Dated points on one row: dots, no numbers, no in-hand ring; each reached or not yet |
 
 ## States
 
 - Default: the first undone step is in hand, ringed in navy; everything after it waits.
 - In hand (parallel): rings navy and breathes on `ws-working`, because something is actually in progress right now.
 - Waiting (parallel, nothing active): every undone step sits quiet, no ring, no breathing; nothing has started reading yet.
+- Stalled: the in-hand step has sat past its expected time. Its note says so with the time, in needs-you words
+  ("Stalled 40 days"); the ring stays navy and nothing breathes.
+- Late (milestones): reached past its target; the measure says by how much, in needs-you words ("52 days, 7 late").
+- Not yet (milestones): the ring dot, "Not yet", and the one act if the person can log it ("Add date").
 - Done: a filled teal circle with a check, popping in (`ws-pop`) the moment it completes, and the line below it filling down (`ws-grow-up`) the same moment.
 - Disabled / error / hover / focus / pressed / selected: do not apply; a step is a status, not a control.
 - Reduced motion: ticks, rings and the filling line are all simply in their final state, no pop, breathe or growth.
@@ -46,26 +70,36 @@ Ordered steps on a line that fills: done is a tick, the one in hand is ringed, t
 
 ## Content
 
-- A step's title says what it does, not just its name ("Writing the three recommendations", not "Step 3").
+- A step's title says what it does, not just its name ("Writing the three recommendations", not "Step 3"). A stage's
+  title is the stage's own name, sentence case ("Review and handoff").
 - The note under an in-hand step says how far ("2 of 4") or what is happening now ("Reading now"); a waiting step carries no note.
+- A stall or a late milestone says the time in words, never a bare "40d" or a colour alone.
+- A milestone's name is plain words, not an acronym the reader must know ("First value", not "TTV1"); its measure is a
+  date ("Sep 11") or days since the start ("15 days").
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
 | `label` | `string` | Names the whole sequence for the `<ol>` |
-| `steps` | `{ key, title, note?, done, active? }[]` | Each step; `active` turns on the side-by-side mode across the whole list |
+| `steps` | `{ key, title, note?, done, active?, late? }[]` | Each step; `active` turns on the side-by-side mode across the whole list; `late` puts the note in needs-you words |
+| `layout` | `"down" \| "across" \| "milestones"` | Down the page (default), stages left to right, or dated milestones on a row |
 
 ## Rules
 
 - Sequences and waits are steps; do not reach for a progress bar or a percent where a named sequence says it plainer.
 - The in-hand ring is always navy; a step never borrows a chart's tone (teal, salmon, purple) for its own status beyond "done".
+  A stall or a late milestone is said in needs-you words, not painted on the mark.
+- Across needs room for every stage at 120; on a phone it scrolls with the in-hand stage in view. Where every stage
+  must show at once in a narrow column, use the default, down the page.
+- One act at most on a milestone row, on a milestone not yet reached; a step or a milestone itself never takes a click.
 - A step that cannot start yet (no data, blocked) still appears in its place, waiting; it is never removed from the list.
 
 ## Source
 
 **Derived from**: the brand kit's own guidance that sequences and waits are drawn as steps, not a progress bar
-(21 Oct 2026). **Precedent**: the first product built on the system.
+(21 Oct 2026). **Precedent**: the first product built on the system. `--across` and `--milestones`: the Customer
+Value onboarding detail (Hemanth, 10 Nov 2026), whose stage track and milestone row were built by hand for want of them.
 
 ## Markup
 
@@ -83,7 +117,49 @@ Ordered steps on a line that fills: done is a tick, the one in hand is ringed, t
 </ol>
 ```
 
+Across: a thing's stages under its title (the line under a done stage fills; the stalled note under the in-hand one).
+
+```html
+<ol class="ws-stepper ws-stepper--across" aria-label="Onboarding stages">
+  <li class="ws-stepper__item">
+    <span class="ws-stepper__line"><span class="ws-stepper__line-fill ws-grow"></span></span>
+    <span class="ws-stepper__mark ws-stepper__mark--done" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" fill="none"><path d="M3.5 8.5L6.5 11.5L12.5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+    <span class="ws-stepper__body"><span class="ws-stepper__title">Optimizing</span></span>
+  </li>
+  <li class="ws-stepper__item" aria-current="step">
+    <span class="ws-stepper__line"></span>
+    <span class="ws-stepper__mark ws-stepper__mark--current" aria-hidden="true">5</span>
+    <span class="ws-stepper__body"><span class="ws-stepper__title">Review and handoff</span><span class="ws-muted ws-stepper__late">Stalled 40 days</span></span>
+  </li>
+  <li class="ws-stepper__item">
+    <span class="ws-stepper__mark ws-stepper__mark--wait" aria-hidden="true">6</span>
+    <span class="ws-stepper__body"><span class="ws-stepper__title">Graduated</span></span>
+  </li>
+</ol>
+```
+
+Milestones: reached, late and not yet, with the one act.
+
+```html
+<ol class="ws-stepper ws-stepper--milestones" aria-label="Milestones">
+  <li class="ws-stepper__item">
+    <span class="ws-stepper__line"><span class="ws-stepper__line-fill ws-grow"></span></span>
+    <span class="ws-stepper__mark ws-stepper__mark--done" aria-hidden="true"></span>
+    <span class="ws-stepper__body"><span class="ws-stepper__title">Signed</span><span class="ws-muted">Sep 11</span></span>
+  </li>
+  <li class="ws-stepper__item">
+    <span class="ws-stepper__line"></span>
+    <span class="ws-stepper__mark ws-stepper__mark--done" aria-hidden="true"></span>
+    <span class="ws-stepper__body"><span class="ws-stepper__title">First agreement</span><span class="ws-muted ws-stepper__late">52 days, 7 late</span></span>
+  </li>
+  <li class="ws-stepper__item">
+    <span class="ws-stepper__mark ws-stepper__mark--wait" aria-hidden="true"></span>
+    <span class="ws-stepper__body"><span class="ws-stepper__title">Graduated</span><span class="ws-muted">Not yet</span><button type="button" class="ws-btn ws-btn--text" aria-label="Add the graduation date">Add date</button></span>
+  </li>
+</ol>
+```
+
 ## Styles
 
 `design-system/components/Stepper/style.css`: `ws-stepper`, `__item`, `__line`, `__line-fill`, `__mark` with `--done`,
-`--current`, `--wait`; `__body`, `__title`.
+`--current`, `--wait`; `__body`, `__title`, `__late`; layouts `ws-stepper--across` and `ws-stepper--milestones`.

package/design-system/components/Stepper/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Progress" height=314 -->
+<!-- @dsCard group="Progress" height=520 -->
 <!doctype html>
 <html>
 <head>
@@ -104,6 +104,69 @@
     </ol>
   </div>
 
+  <div class="ws-stack" style="width: 100%;">
+    <span class="ws-muted">Across: four stages done, the fifth in hand and stalled, the last to come</span>
+    <ol class="ws-stepper ws-stepper--across" aria-label="Onboarding stages">
+      <li class="ws-stepper__item">
+        <span class="ws-stepper__line"><span class="ws-stepper__line-fill ws-grow"></span></span>
+        <span class="ws-stepper__mark ws-stepper__mark--done" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" fill="none"><path d="M3.5 8.5L6.5 11.5L12.5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+        <span class="ws-stepper__body"><span class="ws-stepper__title">Scheduling</span></span>
+      </li>
+      <li class="ws-stepper__item">
+        <span class="ws-stepper__line"><span class="ws-stepper__line-fill ws-grow" style="animation-delay: 30ms;"></span></span>
+        <span class="ws-stepper__mark ws-stepper__mark--done" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" fill="none"><path d="M3.5 8.5L6.5 11.5L12.5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+        <span class="ws-stepper__body"><span class="ws-stepper__title">Implementing</span></span>
+      </li>
+      <li class="ws-stepper__item">
+        <span class="ws-stepper__line"><span class="ws-stepper__line-fill ws-grow" style="animation-delay: 60ms;"></span></span>
+        <span class="ws-stepper__mark ws-stepper__mark--done" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" fill="none"><path d="M3.5 8.5L6.5 11.5L12.5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+        <span class="ws-stepper__body"><span class="ws-stepper__title">Enabling</span></span>
+      </li>
+      <li class="ws-stepper__item">
+        <span class="ws-stepper__line"><span class="ws-stepper__line-fill ws-grow" style="animation-delay: 90ms;"></span></span>
+        <span class="ws-stepper__mark ws-stepper__mark--done" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" fill="none"><path d="M3.5 8.5L6.5 11.5L12.5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+        <span class="ws-stepper__body"><span class="ws-stepper__title">Optimizing</span></span>
+      </li>
+      <li class="ws-stepper__item" aria-current="step">
+        <span class="ws-stepper__line"></span>
+        <span class="ws-stepper__mark ws-stepper__mark--current" aria-hidden="true">5</span>
+        <span class="ws-stepper__body">
+          <span class="ws-stepper__title">Review and handoff</span>
+          <span class="ws-muted ws-stepper__late">Stalled 40 days</span>
+        </span>
+      </li>
+      <li class="ws-stepper__item">
+        <span class="ws-stepper__mark ws-stepper__mark--wait" aria-hidden="true">6</span>
+        <span class="ws-stepper__body"><span class="ws-stepper__title">Graduated</span></span>
+      </li>
+    </ol>
+  </div>
+
+  <div class="ws-stack" style="width: 100%;">
+    <span class="ws-muted">Milestones: three reached (one late), the last not yet</span>
+    <ol class="ws-stepper ws-stepper--milestones" aria-label="Milestones">
+      <li class="ws-stepper__item">
+        <span class="ws-stepper__line"><span class="ws-stepper__line-fill ws-grow"></span></span>
+        <span class="ws-stepper__mark ws-stepper__mark--done" aria-hidden="true"></span>
+        <span class="ws-stepper__body"><span class="ws-stepper__title">Signed</span><span class="ws-muted">Sep 11</span></span>
+      </li>
+      <li class="ws-stepper__item">
+        <span class="ws-stepper__line"><span class="ws-stepper__line-fill ws-grow" style="animation-delay: 30ms;"></span></span>
+        <span class="ws-stepper__mark ws-stepper__mark--done" aria-hidden="true"></span>
+        <span class="ws-stepper__body"><span class="ws-stepper__title">First value</span><span class="ws-muted">15 days</span></span>
+      </li>
+      <li class="ws-stepper__item">
+        <span class="ws-stepper__line"></span>
+        <span class="ws-stepper__mark ws-stepper__mark--done" aria-hidden="true"></span>
+        <span class="ws-stepper__body"><span class="ws-stepper__title">First agreement</span><span class="ws-muted ws-stepper__late">52 days, 7 late</span></span>
+      </li>
+      <li class="ws-stepper__item">
+        <span class="ws-stepper__mark ws-stepper__mark--wait" aria-hidden="true"></span>
+        <span class="ws-stepper__body"><span class="ws-stepper__title">Graduated</span><span class="ws-muted">Not yet</span><button type="button" class="ws-btn ws-btn--text" aria-label="Add the graduation date">Add date</button></span>
+      </li>
+    </ol>
+  </div>
+
 </div>
 </body>
 </html>

package/design-system/components/Stepper/style.css

@@ -11,3 +11,32 @@
 .ws-stepper__body { display: flex; flex: 1; min-width: 0; flex-direction: column; padding-top: var(--space-3xs); }
 .ws-stepper__title { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
 
+/* A stall in words: the in-hand step's note when it has sat too long ("40 days in this stage"), and a milestone past its target. */
+.ws-stepper__late { color: var(--ws-word-needs); }
+/* Across: stages left to right, each mark over its words, the line running mark to mark. Equal columns (so the line
+   can reach the next mark's centre from its own item), each at least 120; past that the track scrolls inside and fades
+   at the edge that hides stages, like Segmented's stages. */
+.ws-stepper--across { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--space-7xl), 1fr); overflow-x: auto; scrollbar-width: none; }
+.ws-stepper--across::-webkit-scrollbar { display: none; }
+.ws-stepper--across > .ws-stepper__item { flex-direction: column; align-items: center; gap: var(--space-xs); padding: 0 var(--space-xxs); text-align: center; }
+.ws-stepper--across .ws-stepper__line { top: calc(var(--space-lg) / 2 - var(--ws-hairline)); bottom: auto; left: calc(50% + var(--space-lg) / 2); right: calc(var(--space-lg) / 2 - 50%); width: auto; height: calc(var(--ws-hairline) * 2); }
+.ws-stepper--across .ws-stepper__line-fill { transform-origin: left; }
+.ws-stepper--across .ws-stepper__body { align-items: center; padding-top: 0; }
+.ws-stepper--across .ws-stepper__title { text-wrap: balance; }
+/* The in-hand stage opens in view on a track that scrolls (a phone): the browser scrolls to it once, on load. */
+.ws-stepper--across > [aria-current="step"] { scroll-snap-align: center; scroll-initial-target: nearest; }
+/* Milestones: dated points on one row, an 8 px dot and its words, the line between them taking the room left. The
+   measure sits on the milestone (a date, or days since the start), so the line carries no words. 4 px of room on every
+   side, pulled back by a margin, so an act's focus ring and a text button's bleed are never cut by the scroll box. */
+.ws-stepper--milestones { flex-direction: row; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; padding: var(--space-xxs); margin: calc(var(--space-xxs) * -1); }
+.ws-stepper--milestones::-webkit-scrollbar { display: none; }
+.ws-stepper--milestones > .ws-stepper__item { flex: 1 0 auto; align-items: center; gap: var(--space-xs); padding: 0; }
+.ws-stepper--milestones > .ws-stepper__item:last-child { flex-grow: 0; }
+.ws-stepper--milestones .ws-stepper__line { position: relative; inset: auto; order: 1; flex: 1 0 var(--space-lg); width: auto; height: calc(var(--ws-hairline) * 2); }
+.ws-stepper--milestones .ws-stepper__line-fill { transform-origin: left; }
+.ws-stepper--milestones .ws-stepper__mark { width: var(--space-xs); height: var(--space-xs); }
+.ws-stepper--milestones .ws-stepper__mark--wait { box-shadow: inset 0 0 0 calc(var(--ws-hairline) * 2) var(--ws-edge-card); }
+.ws-stepper--milestones .ws-stepper__body { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: var(--space-xxs-plus); padding-top: 0; white-space: nowrap; }
+@supports (animation-timeline: scroll()) {
+  .ws-stepper--across, .ws-stepper--milestones { mask-image: linear-gradient(90deg, transparent, currentColor var(--ws-fade-start), currentColor calc(100% - var(--ws-fade-end)), transparent); animation: ws-scroll-edges linear; animation-timeline: scroll(self inline); }
+}

package/design-system/components/StreakCalendar/README.md

@@ -9,6 +9,7 @@ Eight weeks of activity as rows, Monday to Sunday across: a done day a pill, an
 **Not for**
 
 - Several people's attendance at once: use `ActivityGrid`.
+- Things that fall on a day (posts, tasks, sends) to open from their date: use `Calendar`.
 - A count out of a whole with no date axis: use `TickRow` or `GoalTicks`.
 - A trend line of a number changing day to day: this chart never plots a value, only whether a day happened.