@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -1,5 +1,6 @@
-A table variant that ranks people against one number: a rank, a face and a name, a thin bar for the score, the score
-itself, with the person's own row lit so they find themselves at once.
+A list that ranks people against one number: a rank, a face and a name, a thin bar for the score, the score itself,
+with the person's own row lit so they find themselves at once. Every row shares one grid, so the bars start and end on
+the same lines and no number is ever cut.
 
 ## Use it when
 
@@ -15,80 +16,106 @@ itself, with the person's own row lit so they find themselves at once.
 
 ## Anatomy
 
-- Built on `Table`'s row rhythm: `--ws-row-h` (48 px, a row with a face) rather than the dense 40 px, since every row
-  carries an avatar; 20 px at the sides (`--ws-card-inset`), the card's one content edge.
-- Rank: 16 px semibold navy numerals (`--ws-text-value` size, 600 weight), right-aligned in a 20 px column so every digit
-  lines up.
-- Person: a 28 px `Avatar` (`ws-avatar--sm`: neutral disc, navy initials) then their name, 14 px medium navy, truncating rather than
-  wrapping.
-- Score: the system's thin bar, 8 px tall (`--space-xs`) with 1 px corners (`--ws-radius-bar`) on a
-  `--ws-chart-cell-edge` track, as long as the score against the leader's. Its fill takes the tone of the row's share
-  of the goal, by meaning, never by rank: teal (`--ws-chart-finished`) at or over the goal, purple
-  (`--ws-chart-past-half`) past half, salmon (`--ws-chart-under-half`) under half, the same tones `GoalBars` and
-  `TickRow` use. The number sits at the right, 14 px semibold navy, tabular numerals.
-- The person's own row: `--ws-surface-sunk`, the same wash a selected or hovered row takes elsewhere, so it reads as
-  "you" without a second colour being invented for it.
+- `ol.ws-leaderboard` in a `Card`: one grid (rank, face, name, bar, score) that every row takes as a subgrid, 12 between
+  columns; rows at least 48 (`--ws-row-h`, a row with a face), the card's 20 px edge at both sides, a 0.5 px line between
+  rows (`--ws-divider`).
+- Rank: 16 / 20 semibold navy numerals, right-aligned in a column at least 20 wide, tabular.
+- Person: a 28 px `Avatar` (`ws-avatar--sm`) then the name, 14 / 20 medium navy. The name column is as wide as the
+  longest name, up to 40 % of the list and never under 108; a longer name truncates with an ellipsis and carries a
+  `title` (K13).
+- Score: the system's thin bar, 8 tall, 1 px corners, on the empty track (`--ws-track`), as long as the score against
+  the leader's. Its fill (`__fill`) takes the tone of the row's share of the goal, by meaning, never by rank: teal
+  (`__fill--finished`, `--ws-chart-finished`) at or over the goal, purple (`__fill--past-half`,
+  `--ws-chart-past-half`) past half, salmon (`__fill--under-half`, `--ws-chart-under-half`, also the fill's default)
+  under half. The number sits at the right, 14 / 20 semibold navy, tabular, in a column as wide
+  as the widest score: it never truncates.
+- The person's own row: `--ws-surface-sunk`, also when the row is a link or a button.
+- Narrow (the list under 24rem): the bar drops under the name, from the name's edge to the score's, so every bar is the
+  same length; the row grows to fit. The name has its own line there and wraps instead of truncating (a phone has no
+  hover to show a `title`); the rank, face and score centre on its line or lines.
 
 ## Variants and sizes
 
 | Part | Choice | Why |
 | --- | --- | --- |
 | Score mark | `TickRow` | When the number is itself a count out of a small whole ("6 of 10 goals") |
-| Score mark | A thin bar (this preview) | When the number is a raw count or a percentage with no natural "whole" to tick against |
+| Score mark | A thin bar (this preview) | When the number is a raw count or a percentage with no natural "whole" |
+| Row | `li.ws-leaderboard__row` | A static row |
+| Row | `li > a.ws-leaderboard__row` | A row that opens the person; the `li` passes the grid on |
 
 ## States
 
 - **Default**: as above.
-- **Your row**: `--ws-surface-sunk`, no extra border or icon, so it matches every other "this one is yours" wash in the
-  system rather than adding a new signal.
-- **Tie**: two rows share a rank number; the system does not invent a visual tie-break (no "T-3"), since the number
-  itself already says so.
-- **Hover**: the row tints `--ws-surface-sunk` like any list row, stacking visually with "your row" when they coincide
-  (a slightly heavier tone is acceptable since both already share the same token).
+- **Your row**: `--ws-surface-sunk`, no extra border or icon.
+- **Tie**: two rows share a rank number; no invented tie-break ("T-3").
+- **Hover** (a row that opens): North's faint navy wash (`--ws-hover-faint`), laid over the row's ground, so your own
+  row stays lit under it; its focus ring is drawn inside the row.
 - **Empty** (nobody has a score yet): the same card, a sentence ("Nobody has logged a call yet") and the act that starts
-  it, in the band, per the system's empty-state rule; never a leaderboard drawn with every bar at zero.
-- **Long name**: truncates with an ellipsis, as any row title does; the full name is never the one piece of information
-  worth clipping silently, so it carries a `title` attribute.
+  it, in the band; never a leaderboard drawn with every bar at zero.
+- **Long name**: truncates past 40 % with a `title`; under 24rem it wraps instead. A short list of short names takes
+  only the room it needs.
+- **Narrow**: the bar under the name.
 
 ## Behaviour
 
-- Keyboard: each row is a static list item unless it opens something, in which case it is a link `Card` row in the
-  `Table` pattern, reachable in document order.
-- Pointer: hover tints the row; a click (if the row opens a person) behaves like any link row.
-- Motion: bars grow from the left on arrival (`ws-grow`, staggered per row up to the six-item cap), matching `GoalBars`'
-  own arrival motion; reduced motion shows every bar at its final length.
+- Keyboard: a static list unless a row opens something; then each row is a link in document order.
+- Pointer: hover tints a row that opens.
+- Motion: each bar fills from the left on arrival (North's fill, 700 ms on `--ws-ease-settle`), a row's worth apart
+  (`--ws-stagger-row`, 45 ms; set `--ws-i` on each fill). Under reduced motion every bar shows at its length.
 
 ## Content
 
-- A name is the person's own name when they have consented to be named; otherwise a role ("Team best", "Team average"),
-  never a name the viewer did not choose to show (the system's rule for any teammate comparison).
-- No em dashes; the score is a bare number with its unit implied by the card's title, not repeated in every row.
+- A name is the person's own name when they have consented to be named; otherwise a role ("Team best", "Team average").
+- No em dashes; the score is a bare number with its unit in the card's title, not repeated in every row.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `rows` | `{ rank, name, initials, score, max, isYou? }[]` | Every ranked row, already sorted |
-| `scoreOf` | `number` | The value a full-width bar represents, for the fill's percentage |
+| `rows` | `{ rank, name, initials, score, isYou?, href? }[]` | Every ranked row, already sorted |
+| `scoreOf` | `number` | The value a full-width bar represents |
 | `goal` | `number` | The goal each row's share is measured against, for its bar's tone |
 | `markKind` | `'bar' \| 'ticks'` | Which mark draws the score |
 
 ## Rules
 
-- **The person's row is `--ws-surface-sunk`**, the same token as a hovered or selected row everywhere else, never a new
-  colour invented to mean "you" (`02-principles.md` 5, "Colour means something").
-- **A comparison with a teammate is a role, not a name, when the name is not the person's to share** (`02-principles.md`
-  10, "Honest data"; `09-charts.md` "Data rules"), carried over from `GoalBars`' own "you beside others" row.
-- **A bar's tone is the row's share of the goal**: finished, past half or under half, never its rank and never an
-  arbitrary colour per row, so the same tone means the same thing here as in `GoalBars` and `TickRow`.
-- **A new shape for rankings**: rankings are a different reading task from a record table (`Table`) or a category
-  comparison (`GoalBars`), needing a rank column and a highlighted "you" row neither already provides. Derived from
-  `Table`'s row heights and hairlines, the sunk hover used everywhere for "the current one", and the goal's tones.
+- **The person's row is `--ws-surface-sunk`**, never a new colour invented to mean "you".
+- **A comparison with a teammate is a role, not a name, when the name is not the person's to share.**
+- **A bar's tone is the row's share of the goal**, never its rank.
+- **A number never truncates** (K13), and every bar has the same length (the shared grid).
 
 ## Source
 
-- **Derived from**: the system's row heights and hairlines (`Table`'s `--ws-row-h`, 48 px, "a list row with an
-  avatar"), the sunk-wash "this one is you" rule, the goal's tones by meaning (`GoalBars`), and `GoalTicks`'
-  `TickRow` for the tick alternative.
-- **Precedent**: an intentional addition decided from the system, 26 Oct 2026, since no single screen in the first
-  product built on the system ranks a team against one number as a table this way.
+- **Derived from**: the row heights and hairlines of `Table`, the sunk "this one is you" wash, the goal's tones
+  (`GoalBars`), North's hover wash and fill motion, and the K13 audit (names cut to 108 of 125 to 139 px in a 556 px
+  card, a fixed name box).
+- **Precedent**: an intentional addition decided from the system, 26 Oct 2026; one shared grid in 0.5.0 (4 Nov 2026).
+
+## Markup
+
+```html
+<section class="ws-card" aria-label="Cold calls this month, team ranking, goal 50">
+  <ol class="ws-leaderboard">
+    <li class="ws-leaderboard__row">
+      <span class="ws-leaderboard__rank">1</span>
+      <span class="ws-avatar ws-avatar--sm" aria-hidden="true">PN</span>
+      <span class="ws-leaderboard__name" title="Priya Nair">Priya Nair</span>
+      <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--finished" style="width: 100%;"></span></span>
+      <span class="ws-leaderboard__score">58</span>
+    </li>
+    <li class="ws-leaderboard__row ws-leaderboard__row--you">
+      <span class="ws-leaderboard__rank">2</span>
+      <span class="ws-avatar ws-avatar--sm" aria-hidden="true">RY</span>
+      <span class="ws-leaderboard__name" title="You">You</span>
+      <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--past-half" style="width: 62%; --ws-i: 1;"></span></span>
+      <span class="ws-leaderboard__score">36</span>
+    </li>
+  </ol>
+</section>
+```
+
+## Styles
+
+`design-system/components/Leaderboard/style.css`, in `bundle.css` and `fello.css`. Dark comes from the tokens
+(`--ws-track`, `--ws-surface-sunk`, the chart tones). The list is a size container named `ws-leaderboard`, so it needs
+its card's width (a card in a shrink-to-fit row collapses: give it a width).

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Data" height=508 -->
+<!-- @dsCard group="Data" height=640 -->
 <!doctype html>
 <html>
 <head>
@@ -10,74 +10,109 @@
 <body>
 <div class="ws-stage ws-stage--grey">
 
-  <figure class="ws-stack" style="width: 420px; max-width: 100%;">
-    <span class="ws-muted">8 rows against a goal of 50 calls: rank, face and name, a thin bar toned by the row's share of the goal (teal at or over it, purple past half, salmon under half), the number at the right, your own row lit</span>
-    <section class="ws-card" aria-label="Cold calls this month, team ranking, goal 50">
+  <figure class="ws-stack" style="width: 556px;">
+    <span class="ws-muted">8 rows against a goal of 900 calls: one shared grid, so every bar starts and ends on the same line; names as wide as the longest up to 40 %, the score never cut; your own row lit</span>
+    <section class="ws-card" aria-label="Cold calls this month, team ranking, goal 900">
       <ol class="ws-leaderboard">
         <li class="ws-leaderboard__row">
           <span class="ws-leaderboard__rank">1</span>
           <span class="ws-avatar ws-avatar--sm" aria-hidden="true">PN</span>
           <span class="ws-leaderboard__name" title="Priya Nair">Priya Nair</span>
-          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--finished ws-grow" style="width: 100%;"></span></span>
-          <span class="ws-leaderboard__score">58</span>
+          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--finished" style="width: 100%;"></span></span>
+          <span class="ws-leaderboard__score">1,058</span>
         </li>
         <li class="ws-leaderboard__row">
           <span class="ws-leaderboard__rank">2</span>
           <span class="ws-avatar ws-avatar--sm" aria-hidden="true">DA</span>
-          <span class="ws-leaderboard__name" title="Dana Alvarez">Dana Alvarez</span>
-          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--finished ws-grow" style="width: 91%; animation-delay: calc(var(--ws-stagger) * 1);"></span></span>
-          <span class="ws-leaderboard__score">53</span>
+          <span class="ws-leaderboard__name" title="Dana Alvarez-Whitcombe">Dana Alvarez-Whitcombe</span>
+          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--finished" style="width: 91%; --ws-i: 1;"></span></span>
+          <span class="ws-leaderboard__score">963</span>
         </li>
         <li class="ws-leaderboard__row">
           <span class="ws-leaderboard__rank">3</span>
           <span class="ws-avatar ws-avatar--sm" aria-hidden="true">MD</span>
-          <span class="ws-leaderboard__name" title="Marco Diaz">Marco Diaz</span>
-          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--past-half ws-grow" style="width: 78%; animation-delay: calc(var(--ws-stagger) * 2);"></span></span>
-          <span class="ws-leaderboard__score">45</span>
+          <span class="ws-leaderboard__name" title="Marco Diaz-Fernandez de la Vega">Marco Diaz-Fernandez de la Vega</span>
+          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--past-half" style="width: 78%; --ws-i: 2;"></span></span>
+          <span class="ws-leaderboard__score">825</span>
         </li>
         <li class="ws-leaderboard__row">
           <span class="ws-leaderboard__rank">4</span>
           <span class="ws-avatar ws-avatar--sm" aria-hidden="true">SO</span>
           <span class="ws-leaderboard__name" title="Sam Okafor">Sam Okafor</span>
-          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--past-half ws-grow" style="width: 69%; animation-delay: calc(var(--ws-stagger) * 3);"></span></span>
-          <span class="ws-leaderboard__score">40</span>
+          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--past-half" style="width: 69%; --ws-i: 3;"></span></span>
+          <span class="ws-leaderboard__score">730</span>
         </li>
         <li class="ws-leaderboard__row ws-leaderboard__row--you">
           <span class="ws-leaderboard__rank">5</span>
           <span class="ws-avatar ws-avatar--sm" aria-hidden="true">RY</span>
           <span class="ws-leaderboard__name" title="You">You</span>
-          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--past-half ws-grow" style="width: 62%; animation-delay: calc(var(--ws-stagger) * 4);"></span></span>
-          <span class="ws-leaderboard__score">36</span>
+          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--past-half" style="width: 62%; --ws-i: 4;"></span></span>
+          <span class="ws-leaderboard__score">656</span>
         </li>
         <li class="ws-leaderboard__row">
           <span class="ws-leaderboard__rank">6</span>
           <span class="ws-avatar ws-avatar--sm" aria-hidden="true">NP</span>
           <span class="ws-leaderboard__name" title="Nellie Park">Nellie Park</span>
-          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--past-half ws-grow" style="width: 50%; animation-delay: calc(var(--ws-stagger) * 5);"></span></span>
-          <span class="ws-leaderboard__score">29</span>
+          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--past-half" style="width: 50%; --ws-i: 5;"></span></span>
+          <span class="ws-leaderboard__score">529</span>
         </li>
         <li class="ws-leaderboard__row">
           <span class="ws-leaderboard__rank">7</span>
           <span class="ws-avatar ws-avatar--sm" aria-hidden="true">JW</span>
           <span class="ws-leaderboard__name" title="Jo Whitfield">Jo Whitfield</span>
-          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--under-half ws-grow" style="width: 38%; animation-delay: calc(var(--ws-stagger) * 5);"></span></span>
-          <span class="ws-leaderboard__score">22</span>
+          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--under-half" style="width: 38%; --ws-i: 6;"></span></span>
+          <span class="ws-leaderboard__score">402</span>
         </li>
         <li class="ws-leaderboard__row">
           <span class="ws-leaderboard__rank">8</span>
           <span class="ws-avatar ws-avatar--sm" aria-hidden="true">TL</span>
           <span class="ws-leaderboard__name" title="Theo Lang">Theo Lang</span>
-          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--under-half ws-grow" style="width: 24%; animation-delay: calc(var(--ws-stagger) * 5);"></span></span>
-          <span class="ws-leaderboard__score">14</span>
+          <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--under-half" style="width: 24%; --ws-i: 7;"></span></span>
+          <span class="ws-leaderboard__score">254</span>
         </li>
       </ol>
     </section>
-    <figcaption class="ws-muted">
-      When names are not the leader's to share, a row beside "You" reads as a role, "Team best" or "Team average", never
-      a name the person did not consent to show.
-    </figcaption>
+    <figcaption class="ws-muted">When names are not the leader's to share, a row beside "You" reads as a role, "Team best" or "Team average", never a name the person did not consent to show.</figcaption>
   </figure>
 
+  <div class="ws-stack ws-stack--component" style="width: 320px;">
+    <figure class="ws-stack">
+      <span class="ws-muted">Under 24rem the bar drops under the name; rows that open a person tint on hover</span>
+      <section class="ws-card" aria-label="Deals closed this quarter, goal 10">
+        <ol class="ws-leaderboard">
+          <li><a class="ws-leaderboard__row" href="#dana">
+            <span class="ws-leaderboard__rank">1</span>
+            <span class="ws-avatar ws-avatar--sm" aria-hidden="true">DA</span>
+            <span class="ws-leaderboard__name" title="Dana Alvarez">Dana Alvarez</span>
+            <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--finished" style="width: 100%;"></span></span>
+            <span class="ws-leaderboard__score">12</span>
+          </a></li>
+          <li><a class="ws-leaderboard__row ws-leaderboard__row--you" href="#you">
+            <span class="ws-leaderboard__rank">2</span>
+            <span class="ws-avatar ws-avatar--sm" aria-hidden="true">RY</span>
+            <span class="ws-leaderboard__name" title="You">You</span>
+            <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--past-half" style="width: 58%; --ws-i: 1;"></span></span>
+            <span class="ws-leaderboard__score">7</span>
+          </a></li>
+          <li><a class="ws-leaderboard__row" href="#team">
+            <span class="ws-leaderboard__rank">3</span>
+            <span class="ws-avatar ws-avatar--sm" aria-hidden="true">TA</span>
+            <span class="ws-leaderboard__name" title="Team average">Team average</span>
+            <span class="ws-leaderboard__bar" aria-hidden="true"><span class="ws-leaderboard__fill ws-leaderboard__fill--under-half" style="width: 33%; --ws-i: 2;"></span></span>
+            <span class="ws-leaderboard__score">4</span>
+          </a></li>
+        </ol>
+      </section>
+    </figure>
+    <figure class="ws-stack">
+      <span class="ws-muted">Empty: a sentence and the act that starts it, never bars at zero</span>
+      <section class="ws-card ws-card--compound">
+        <header class="ws-head"><div><h3 class="ws-title">Nobody has logged a call yet</h3><p class="ws-body ws-card__line">The board fills in as the team calls this month.</p></div></header>
+        <div class="ws-band"><div class="ws-band__words"><span class="ws-band__title">Start with your first call</span></div><button type="button" class="ws-btn ws-btn--primary">Log a call</button></div>
+      </section>
+    </figure>
+  </div>
+
 </div>
 </body>
 </html>

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

@@ -0,0 +1,44 @@
+/* ---- Leaderboard: a team ranked by one number, a thin bar toned by each row's share of the goal, your row lit. One grid
+   for every row (subgrid), so ranks, bars and scores sit in shared columns: the name column is as wide as the longest
+   name up to 40 % (at least 108), and a number never truncates (K13). Under 24rem the bar drops under the name. ---- */
+.ws-leaderboard { container: ws-leaderboard / inline-size; display: grid; grid-template-columns: [rank] minmax(calc(var(--space-md) + var(--space-xxs)), auto) [face] auto [name] fit-content(40%) [bar] minmax(0, 1fr) [score] auto; column-gap: var(--space-sm); border-radius: inherit; }
+/* Each item spans the grid and passes its columns on (an li holding a link row does too), a 0.5 px line between. */
+.ws-leaderboard > *, .ws-leaderboard__row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
+.ws-leaderboard > * + * { border-top: var(--ws-divider); }
+.ws-leaderboard > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
+.ws-leaderboard > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
+.ws-leaderboard__row { align-items: center; min-height: var(--ws-row-h); padding: 0 var(--ws-card-inset); }
+/* A link row takes its li's corners (only the first and last li have any), so a lit row or a line mid-list stays square. */
+.ws-leaderboard > * > .ws-leaderboard__row { border-radius: inherit; }
+/* Two classes, so the lit row stays lit when it is a link or a button (their reset is transparent). */
+.ws-leaderboard .ws-leaderboard__row--you { background-color: var(--ws-surface-sunk); }
+.ws-leaderboard__rank { text-align: right; font-size: var(--ws-text-value); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 600; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+/* The name: truncates only past 40 % of the list (its title then holds it whole); never under 108. */
+.ws-leaderboard__name { min-width: calc(var(--space-6xl) + var(--space-sm)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
+/* The system's thin bar: 8 tall, 1 px corners, on the empty track. */
+.ws-leaderboard__bar { position: relative; height: var(--space-xs); border-radius: var(--ws-radius-bar); background: var(--ws-track); overflow: hidden; }
+.ws-leaderboard__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--ws-radius-bar); background: var(--ws-chart-under-half); transform-origin: left; }
+.ws-leaderboard__fill--finished { background: var(--ws-chart-finished); }
+.ws-leaderboard__fill--past-half { background: var(--ws-chart-past-half); }
+.ws-leaderboard__fill--under-half { background: var(--ws-chart-under-half); }
+.ws-leaderboard__score { text-align: right; white-space: nowrap; font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 600; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+/* A row that opens the person: North's faint wash on hover, laid over the row's own ground (so your lit row stays lit),
+   nothing moves. */
+a.ws-leaderboard__row, button.ws-leaderboard__row { width: 100%; border: 0; background-color: transparent; text-align: left; text-decoration: none; color: inherit; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+a.ws-leaderboard__row:focus-visible, button.ws-leaderboard__row:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+@media (hover: hover) { a.ws-leaderboard__row:hover, button.ws-leaderboard__row:hover { background-image: linear-gradient(var(--ws-hover-faint), var(--ws-hover-faint)); } }
+/* Arrival: each bar fills from the left (North's fill, settling), a row's worth apart; set --ws-i on each fill. */
+@media (prefers-reduced-motion: no-preference) {
+  .ws-leaderboard__fill { animation: ws-grow var(--ws-duration-fill) var(--ws-ease-settle) backwards; animation-delay: calc(var(--ws-i, 0) * var(--ws-stagger-row)); }
+}
+/* Narrow: the bar under the name, from the name's edge to the score's, so every bar is the same length; the rank, the
+   face and the score centre on the name's line (or lines). */
+@container ws-leaderboard (max-width: 24rem) {
+  .ws-leaderboard__row { grid-template-columns: [rank] minmax(calc(var(--space-md) + var(--space-xxs)), auto) [face] auto [name] minmax(0, 1fr) [score] auto; gap: var(--space-xs) var(--space-sm); padding-block: var(--space-sm); }
+  .ws-leaderboard__rank { grid-area: 1 / rank; }
+  .ws-leaderboard__row > .ws-avatar { grid-area: 1 / face; }
+  /* The name has its own line here, and a phone has no hover to show a title, so a long name wraps instead of cutting. */
+  .ws-leaderboard__name { grid-area: 1 / name; min-width: 0; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
+  .ws-leaderboard__score { grid-area: 1 / score; }
+  .ws-leaderboard__bar { grid-area: 2 / name / 3 / -1; }
+}

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

@@ -0,0 +1,222 @@
+A list and the thing picked from it, side by side: the list one column wide, the open item two, on one three-column
+grid. Seth's Review inbox (313:2671) and North's board (a chart and the list that drives it), with Tally's vendors.
+
+## Use it when
+
+- People go through items one at a time and act on each (reviews to reply to, leads to work, tools to cut), with the
+  list in view so they keep their place.
+- Picking a row in a short list changes a chart or a detail beside it (North's board, Tally's "Vendor by vendor").
+
+## Not for
+
+- Records to compare across columns: use `Table`.
+- A detail that opens over the page: use `Panel` (a drawer) from a list.
+- One detail at a time with no list: a `Card`.
+
+## Anatomy
+
+- `.ws-list-detail` (a size container) holding `__grid`: three equal columns; the list (`__list`) takes one, the detail
+  (`__detail`) two. The list's right edge lines up with the first of three tiles above it on the same grid. A list that
+  needs a set width instead (Tally's vendor picker and North's board list, 362) sets `--ws-list-detail-list` on
+  `.ws-list-detail`; the detail takes the rest.
+- Joined (default): one rim, the tray grey (`--ws-tray`), 1 px round and 1 px between the panes, so a single grey line
+  splits them; 8 px corners outside, each surface rounding only its outer corners (7), so the split stays clean.
+- `--apart` (Seth's inbox): each pane its own rim, 8 apart.
+- `--list-end` (North's board, Tally's vendors): the list at the end, the detail first. The list stays first in the DOM.
+- A pane: its cream surface (`__surface`) and, under it on the rim, an optional foot (`__foot`: at least 32, 8 above and
+  below, 14 at the sides, 12 / 16 body words, a figure in 600, a needs-you figure in salmon's AA word; its stars are `--ws-chart-under-half`). Where its two
+  parts do not fit side by side (a phone) the second drops under the first, at the right, instead of both wrapping.
+- The list's head (`__head`, Seth): 12 above and below, 16 in, 20 out, 14 apart: a select-all box (`Checkbox --quiet`,
+  Seth's status box) and a filter (`Segmented --clear --stretch`: no ground, the items sharing the width; buttons with
+  `aria-pressed`, since it filters rather than switching panes); a 0.5 px line under it.
+- The list's scroller (`__scroll`): side by side, the list takes the detail's height and scrolls inside it. While rows
+  are hidden below, its last 24 px fade out; the fade lifts at the end (a scroll-driven fade, as `Table`'s far edge),
+  and a list that fits shows none.
+- An inbox row (`__rows > li`): 12 above and below, 16 in, 20 out, 14 apart: a box (the skinned `Checkbox`, centred on
+  the meta line, a 24 target, 40 on touch), then the open button (`__open`, its hit area the whole row): a meta line
+  (`__meta`: 12 px stars 2 apart, the date taking the room, the source; 13 / 18 medium muted, 8 apart) and, 4 under, one
+  line of the thing (`__text`, 14 / 20 navy, an ellipsis and a `title`). A 0.5 px line between rows, drawn inside the
+  top of the row, so a row's 66 includes it as in Seth's frame.
+- A picker list: `SideList`'s `__picks` on the list's surface.
+- The detail's body (`__body`): 16 inside (North), `--roomy` 28 above and below and 32 at the sides (Seth); parts 24
+  apart. Its parts: a pager head (`__pager`: the item's meta, "4 of 10", and `__pager-acts`, two square steppers,
+  `IconButton --solid` at 32 with 6 px corners, up and down), a title and line (`__words`, 2 apart), a top row
+  (`__top`, Tally's vendor head: the words at the left taking the room, the controls in one row at the right on the
+  title's line, 16 between the two and 8 between controls, such as two `ws-filter-pick`s and a `Checkbox --sm`; where
+  both do not fit the controls drop under the words, 12 under), a quote (`__quote`, 22 / 30 navy), a sunk draft
+  (`Plate`), the acts (`__acts`, 8 apart, pinned to the foot of the detail: the primary first, then Seth's grey act,
+  `Button --well`, and a trailing check act at the end) and a last line (`__note`, 13 / 18 medium muted).
+- A foot's needs-you figure (`__foot-needs`): salmon's AA word (`--ws-word-needs`), its figure in 600 (`<b>`).
+
+## Variants and sizes
+
+| Variant | What changes |
+| --- | --- |
+| Joined (default) | One rim, a 1 px split |
+| `--apart` | Two rims, 8 apart |
+| `--list-end` | The list at the end |
+| `--ws-list-detail-list` | The list's width in place of its third, the detail taking the rest (Tally and North: 362, `calc(var(--space-9xl) * 1.81)`); set on `.ws-list-detail`, either end |
+| `--fill` | The pair is the rest of a height-bound column: the list scrolls, the detail's acts sit at its foot, the detail scrolls if it must |
+| Narrow (under 48rem) | Stacked, 12 apart, each pane its own rim, the list first and as tall as its rows; a `--fill` pair scrolls as one |
+| A detail under 30rem | The pager head takes two lines: the stars and the meta, then "4 of 10" and the steppers at the right, 8 under (the detail is a size container named `ws-list-detail-pane`) |
+
+## States
+
+- **Default**: as above.
+- **Current row** (`aria-current="true"` on the open button): the sunk cream (`--ws-surface-sunk`), the words semibold at
+  the same size, so no row moves (Seth's frame grew the row 2 px; the kit does not). No left bar.
+- **Hover** (a row): North's faint wash (`--ws-hover-faint`), not on the current one.
+- **Focus**: the 2 px navy ring drawn inside the row.
+- **A row ticked**: its box only; the row stays where it is until the list is refreshed.
+- **Empty list**: the list's surface says so in a sentence (`__empty`: 14 / 20 body words on the rows' edges, 24 above
+  and below: "No reviews need a reply"), the detail shows the next step or nothing.
+- **Loading**: ghost lines (`__ghost ws-shimmer`) in the rows and the detail; still under reduced motion.
+- **Long words**: a row's line truncates with a `title`; the detail's words wrap.
+
+## Behaviour
+
+- Keyboard: each row's box and its open button are two stops; the steppers move to the previous and next item; the
+  scroller is a focusable region.
+- Pointer: clicking a row anywhere but its box opens it.
+- Motion: a picked row's fill slides to it and takes its height (North's "List highlight slide", `springs.highlight`
+  .45 / .14), plain CSS with no script and no new markup: the current row is a CSS anchor and `__rows`' `::before` is
+  the travelling fill, under the rows, their lines and their words, its four edges easing on motion's own
+  `spring(.45, .14)` written out as `linear()` (800 ms; `--ws-spring-highlight-duration` and `--ws-spring-highlight`). At
+  rest the current row paints its own fill (the 0.4 look); while the list is pointed at or holds focus the travelling
+  fill takes its place, so a pick made then slides. Rows that change places (a sort, a filter, a reply that files a
+  review away) glide with `reorder()` (see `KanbanBoard`). The old detail leaves and the new one arrives on
+  `springs.swap`, details settling in after it (`ws-settle`). Without CSS anchor positioning the fill moves at once;
+  under reduced motion the fill and the detail change at once. Try it in the preview: click a row.
+
+## Content
+
+- A row's one line is the item's own words (the review, the lead's need), never a status alone.
+- The detail's acts are verbs with their objects ("Copy reply", "Open your Zillow reviews"); the primary first.
+- No em dashes.
+
+## Rules
+
+- **The list is one column of the page's grid**, so it lines up with tiles above it; it takes a set width
+  (`--ws-list-detail-list`) only where the design sets one (Tally's and North's 362 picker beside a chart).
+- **The list never pushes the page**: side by side it scrolls in the detail's height.
+- **Reading order is the DOM order** (list, then detail) at every width; `--list-end` only moves the list visually.
+- **A current row never changes size.**
+
+## Source
+
+**Derived from**: Seth's Review inbox (313:2671: the 3-column grid 8 apart, the list head and rows, the open review),
+Tally's vendor board (319:3445: two trays joined by one grey line) and North's board (style1.css 173 to 206: detail and
+list joined, 16 inside, a 31 px foot, list first on a phone), on the kit's rim (D5) and type steps (D6). **Precedent**:
+new in 0.5.0 (4 Nov 2026).
+
+## Markup
+
+The inbox (Seth's Review inbox, `--apart --fill`: the list with its head, the open review with its pager, draft, acts
+and last line):
+
+```html
+<div class="ws-list-detail ws-list-detail--apart ws-list-detail--fill">
+  <div class="ws-list-detail__grid">
+    <section class="ws-list-detail__list" aria-label="Reviews">
+      <div class="ws-list-detail__surface">
+        <div class="ws-list-detail__head">
+          <label class="ws-check ws-check--quiet"><input type="checkbox" aria-label="Select every review"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span></label>
+          <div class="ws-segmented ws-segmented--clear ws-segmented--stretch" role="group" aria-label="Show">
+            <button type="button" class="ws-segmented__item" aria-pressed="true">Needs a reply <span class="ws-tnum">10</span></button>
+            <button type="button" class="ws-segmented__item" aria-pressed="false">All <span class="ws-tnum">100</span></button>
+          </div>
+        </div>
+        <div class="ws-list-detail__scroll" role="region" aria-label="Reviews, scrolls" tabindex="0">
+          <ul class="ws-list-detail__rows">
+            <li>
+              <label class="ws-check"><input type="checkbox" aria-label="Replied to the Oct 2 review"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span></label>
+              <button type="button" class="ws-list-detail__open" aria-current="true">
+                <span class="ws-list-detail__meta"><span class="ws-list-detail__stars" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><!-- five in all --></span><span>Oct 2</span><span>Zillow</span></span>
+                <span class="ws-list-detail__text" title="Knew the market inside out and got us a great price.">Knew the market inside out and got us a great price.</span>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="ws-list-detail__detail" aria-label="Review from Oct 2">
+      <div class="ws-list-detail__surface">
+        <div class="ws-list-detail__body ws-list-detail__body--roomy">
+          <div class="ws-list-detail__pager">
+            <span class="ws-list-detail__stars ws-list-detail__stars--lg" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.9 4.1 4.4.5-3.3 3 .9 4.4L8 11.3l-3.9 2.2.9-4.4-3.3-3 4.4-.5z"/></svg><!-- five in all --></span>
+            <span>Zillow, Oct 2, 2026</span>
+            <span class="ws-tnum">4 of 10</span>
+            <span class="ws-list-detail__pager-acts">
+              <button type="button" class="ws-icon-btn ws-icon-btn--solid" aria-label="Previous review"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10l4-4 4 4"/></svg></button>
+              <button type="button" class="ws-icon-btn ws-icon-btn--solid" aria-label="Next review"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
+            </span>
+          </div>
+          <p class="ws-list-detail__quote">“Knew the market inside out and got us a great price.”</p>
+          <div class="ws-plate ws-plate--draft">
+            <div class="ws-plate__head">
+              <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 16.5V9l6.5-5.5L16.5 9v7.5Z"/><path d="M8 16.5v-4h4v4"/></svg>
+              <p class="ws-section">Grow drafted a reply in your voice</p>
+              <button type="button" class="ws-btn ws-btn--text">Edit</button>
+            </div>
+            <p class="ws-body">Thank you both! It was a pleasure helping you price it right.</p>
+          </div>
+          <div class="ws-list-detail__acts">
+            <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Copy reply</button>
+            <button type="button" class="ws-btn ws-btn--well ws-btn--lg">Open your Zillow reviews</button>
+            <label class="ws-check"><input type="checkbox"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span><span class="ws-check__words"><span class="ws-check__label">Mark as replied</span></span></label>
+          </div>
+          <p class="ws-list-detail__note">Grow never posts for you. Copy the reply and paste it on Zillow.</p>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>
+```
+
+The vendor board (Tally, `--list-end` joined: the list a set 362, a top row in the detail, its foot on the rim; the
+picks are `SideList`'s):
+
+```html
+<div class="ws-list-detail ws-list-detail--list-end" style="--ws-list-detail-list: calc(var(--space-9xl) * 1.81);">
+  <div class="ws-list-detail__grid">
+    <section class="ws-list-detail__list" aria-label="Tools">
+      <div class="ws-list-detail__surface">
+        <div class="ws-list-detail__scroll">
+          <ul class="ws-side-list__picks">
+            <li><button type="button" class="ws-side-list__pick" aria-current="true" style="--ws-dot: var(--ws-chart-past-half);"><span class="ws-side-list__dot" aria-hidden="true"></span><span class="ws-side-list__main"><span class="ws-side-list__pick-name">Luxury Presence</span><span class="ws-side-list__sub">Website and IDX, Q1 2027</span></span><span class="ws-side-list__end"><span class="ws-side-list__figure">$20,400</span><span class="ws-side-list__sub ws-side-list__sub--needs">saves $20,400</span></span></button></li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="ws-list-detail__detail" aria-label="Luxury Presence">
+      <div class="ws-list-detail__surface">
+        <div class="ws-list-detail__body">
+          <div class="ws-list-detail__top">
+            <div class="ws-list-detail__words">
+              <h3 class="ws-title">Luxury Presence comes off in Q1 2027</h3>
+              <p class="ws-body">Fello websites and IDX home search replace it. Estimated from list prices.</p>
+            </div>
+            <div>
+              <button type="button" class="ws-filter-pick" aria-haspopup="menu" aria-expanded="false" aria-label="Kind: Website and IDX"><span class="ws-filter-pick__value">Website and IDX</span><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3 3 3-3"/></svg></button>
+              <label class="ws-check ws-check--sm"><input type="checkbox"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span><span class="ws-check__words"><span class="ws-check__label">Cancelled</span></span></label>
+            </div>
+          </div>
+          <p class="ws-cluster"><span class="ws-figure ws-figure--pane">$20,400</span><span class="ws-body">a year</span></p>
+        </div>
+      </div>
+      <div class="ws-list-detail__foot"><span>Website and IDX, estimate</span><span class="ws-list-detail__foot-needs"><b>Saves $20,400</b> a year</span></div>
+    </section>
+  </div>
+</div>
+```
+
+An empty list keeps its surface and says so: `<div class="ws-list-detail__surface"><p class="ws-list-detail__empty">No
+reviews need a reply.</p></div>`.
+
+## Styles
+
+`design-system/components/ListDetail/style.css`, in `bundle.css` and `fello.css`; a picker list also needs `SideList`'s
+styles, a vendor head's pickers `FilterBar`'s. Dark and the navy ground come from the tokens (`--ws-tray`,
+`--color-bg-page`, `--ws-divider`, `--ws-edge`,
+`--ws-surface-sunk`). `.ws-list-detail` is a size container named `ws-list-detail`; with `--fill` its parent must be a
+height-bound flex column.