@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -1,69 +1,113 @@
-A page's answer at a glance: four big-number tiles in a row, each a tone's stripe, a label, a figure with its chip, and one line or a tick row.
+A page's answer at a glance: a few rimmed tiles, each a label, a figure with its mark or chip, and an optional foot.
 
 **Use it when**
 
-- A page's whole answer is a small set of numbers, not one card's single figure (a dashboard's "How you show up" and
-  "Fixes" tiles, or a pipeline page's "Insights" tiles).
-- Each number deserves its own short line or tick row, not a shared chart.
+- A page's whole answer is a small set of numbers (a review inbox's rating, replies due and a connection; a pipeline's
+  counts), not one card's single figure.
+- Each number may carry a small mark (stars, a tall tick row), a chip, a short line, or a foot with its source or its act.
 
 **Not for**
 
-- One card's own single share with a strip: use `GoalTicks`.
+- A key metric that opens into its chart across the row: use `MetricTile`.
+- One card's own share with a strip: use `GoalTicks`; a report's score: use `ScoreHero`.
 - Comparing rows of the same kind of count: use `GoalBars`.
-- A page that already has one dominant chart card: tiles are for a page whose answer is numbers, not a chart's companion row.
 
 **Anatomy**
 
-- Each tile is a plain `Card`, `--ws-card-padding-lg` (16 px) inside, a `calc(--space-xxs * 0.75)` (3 px) stripe across its top in the tile's tone, pale to solid left to right (`.ws-stat-tiles__stripe--navy`, `--salmon`, `--purple`, `--teal`).
-- Label: 12 px semibold muted (`--ws-text-dense`), above the number.
-- Figure: 40 px (`--font-size-3xl`), regular weight, `--ws-tracking-display`, tabular numerals; a unit word after it in 12 px muted (`--ws-text-dense`, the system's 11 px floor rules out the kit's 10); a `ChangeChip` beside it when the number moved.
-- One line under the figure: either a short muted sentence (truncates) or a `TickRow` showing the number as a share of a whole; never both.
-- Four tiles across from the page's `lg` container width, two below it (`@area-lg/board:grid-cols-4`, `grid-cols-2` otherwise). In fello.css: `<ul class="ws-stat-tiles">` of `<li class="ws-card ws-stat-tiles__tile">`, four across once its `.ws-page` or `.ws-area` is 60rem wide, two below; outside either it stays two across.
-
-**Variants and sizes**
-
-| Variant | What changes |
-| --- | --- |
-| `tile.unit` | A word or two after the number ("of 100", "spots") |
-| `tile.change` | A chip beside the number: up teal, down mid blue, `null` for a run with no arrow |
-| `tile.ticks` | A short tick row under the number instead of a line |
-| `tile.line` | A short sentence under the number instead of ticks |
+- The set measures itself (K3): `<div class="ws-stat-tiles">` is a size container holding
+  `<ul class="ws-stat-tiles__grid">`, tiles 8 apart (`--space-xs`).
+
+| Column width | 1 to 2 tiles | 3 | 4 | 5 | 6 |
+| --- | --- | --- | --- | --- | --- |
+| under 40rem | 2 across | 2 + 1 | 2 + 2 | 2 + 2 + 1 | 2 + 2 + 2 |
+| 40 to 60rem | 2 | 3 | 2 + 2 | 3 + 2 | 3 + 3 |
+| from 60rem | 2 | 3 | 4 | 5 | 3 + 3 |
+
+  On two across an odd last tile takes the whole row, so there is never an orphan beside an empty cell.
+- Tile (Seth's Review inbox): the tray rim, 1 px of `--ws-tray` through padding, 8 outside and 7 inside
+  (`--ws-radius-card-inner`); the cream surface 16 inside, 8 between its parts. No outline, no shadow, no stripe.
+- Label: 13/18 medium, `--color-text-body`, one line.
+- Figure: 32/38 regular (`--ws-text-figure`), -3%, navy, tabular. "Not connected" in the figure's place is
+  `__value--none`, the same size in `--color-text-muted`.
+- On the figure's line, 12 after it and centred: stars (18 px salmon, 2 apart) or a `TickRow --tall` in a tone. A
+  `ChangeChip` or a unit word sits on the figure's baseline instead.
+- Line (optional): 13/18 muted, wraps to two lines at most (K13), its `title` holds the rest.
+- Foot (optional), on the tray itself: 8 above and below, 16 at the sides, 13/18 medium. Left words in
+  `--color-text-body`, right words in `--color-text-muted` (AA on the tray); in a narrow tile the right words drop to
+  their own line, and the lines pack at the top, so feet in a row share their first line. As an `<a>` it is the
+  tile's one act: navy words and a 16 px chevron. A link button in the surface instead ("See the 5 quoted deals" and a
+  chevron) takes `ws-btn--wrap`: two across on a 390 phone a tile is about 140 inside, and a one-line button runs past it.
+- Tiles take two rows of the grid each (subgrid), so in a row every surface ends and every foot starts on one line.
+
+**Parts and modifiers**
+
+- `.ws-stat-tiles__change`: a change chip on the figure's baseline; one line, an ellipsis in a narrow tile (give it a title).
+- `.ws-stat-tiles__unit`: a word or two after the figure on its baseline ("of 20"), 12 px muted.
+- `.ws-stat-tiles__stars`: a rating out of five: 18 px salmon stars (`--ws-chart-under-half` (chart tone 3, so a palette that sets it moves it)), 2 apart.
+- `.ws-stat-tiles__star--off`: an unlit star, in the track grey.
+- `.ws-stat-tiles__line`: one line under the figure, 13/18 muted; it wraps to two lines, then an ellipsis with a title.
+- `.ws-stat-tiles__ghost`: loading: a ghost the size of the label (with `ws-shimmer`); `--value` the size of the figure.
+- `.ws-stat-tiles__ghost--value`: loading: a ghost the size of the figure.
 
 **States**
 
-- Default: tiles rise in order (`ws-rise`, staggered 40 ms each) when the page first shows.
-- No change: `change` omitted; the figure stands alone with its unit.
-- Narrow (two columns): the same tiles, same content, simply reflowed; nothing is cut beyond a long line's own ellipsis.
-- Disabled / error / hover / focus / pressed / selected / empty: do not apply; a tile is a read-only figure, not a control.
-- Reduced motion: tiles are simply in place, no rise.
+- Default: tiles settle in on first paint (`ws-settle` with `--ws-i`, 22 ms apart).
+- Foot act: hover washes the foot navy 5% (`--ws-hover`, 200 ms); focus draws the 2 px navy ring inside the foot; 40 px
+  tall on touch.
+- Not connected: the figure's words in muted, the foot is the act that connects.
+- Loading: ghosts the size of the label and the figure (`ws-shimmer`), `aria-busy="true"` on the list.
+- Long line: two lines, then an ellipsis and its `title`. A long label truncates; give it the full words as a `title`.
+- Narrow tile: a chip that has no room beside the figure drops under it; if it still has no room it ends in an ellipsis
+  (give it a `title`), never wrapping and never running past the tile.
+- Reduced motion: tiles in place.
+- Pressed, selected, disabled: do not apply; a tile is a figure, and only its foot acts.
 
 **Behaviour**
 
-- Each tile is one list item inside a labelled `<ul aria-label="…">`; the figure and its chip read as plain text to a screen reader (no separate `aria-label` beyond the visible words).
-- Motion: `ws-rise` on arrival, staggered by index; still with reduced motion.
-- No pointer or keyboard behaviour; a tile never links anywhere on its own.
+- The list carries `aria-label` naming the set; each figure reads as plain text. Stars carry `role="img"` and an
+  `aria-label` ("5 of 5 stars"); a tick row is `aria-hidden`, its figure says the count.
 
 **Content**
 
-- Labels are short nouns in sentence case ("Pass rate", not "PASS RATE").
-- One line of meaning under the number: a short sentence or a tick row, never both, never a second number.
-- A unit is a word or two, never a full sentence ("of 100", "spots").
-
-**Props**
-
-| Name | Type | Meaning |
-| --- | --- | --- |
-| `label` | `string` | Names the whole set, for the `<ul>`'s `aria-label` |
-| `tiles` | `{ key, label, value, unit?, line?, tone, change?, ticks? }[]` | One tile a figure |
+- Labels are short nouns in sentence case ("Need a reply").
+- One line of meaning: a mark, a chip, a line or a foot; never a second number in the surface.
+- A unit is a word or two ("of 20").
 
 **Rules**
 
-- Only pages whose answer is numbers get tiles (a dashboard's summary tiles, a pipeline page's Insights); a page already
-  built around one chart card does not also get a tile row beside it.
-- The system's exact tones stay on the stripe; the figure itself is always navy, never tone-coloured.
-- A falling number's chip is mid blue, never red; "same" never gets an arrow.
+- Only pages whose answer is numbers get tiles; a page built around one chart card does not also get a tile row.
+- The figure is always navy; marks keep their exact tone; words on the tray use body or muted grey, which pass AA there.
+- A falling number's chip is mid blue, never red.
 
 **Source**
 
-**Derived from**: the system's figure, chip and tick-row rules, arranged into a four-tile row (23 Oct 2026, an
-arrangement pattern rather than a single named chart card). **Precedent**: the first product built on the system.
+**Derived from**: Seth's Review inbox tiles (313:2687, 313:2706, 313:2725); the container, the count rule and the
+two-line wrap from Aryan's Revenue OS audit (K3, K13); the owner's ruling that a tile's line wraps (27 Oct).
+
+**Markup**
+
+```html
+<div class="ws-stat-tiles">
+  <ul class="ws-stat-tiles__grid" aria-label="Reviews at a glance">
+    <li class="ws-stat-tiles__tile">
+      <div class="ws-stat-tiles__surface">
+        <span class="ws-stat-tiles__label">Need a reply</span>
+        <span class="ws-stat-tiles__value-row">
+          <span class="ws-stat-tiles__value">10</span>
+          <span class="ws-tick-row ws-tick-row--tall" style="--tone: var(--ws-chart-alert);" aria-hidden="true">
+            <span class="ws-tick-row__tick"></span><!-- one a reply due -->
+          </span>
+        </span>
+      </div>
+      <div class="ws-stat-tiles__foot"><span>0 marked replied</span><span>Zillow</span></div>
+    </li>
+  </ul>
+</div>
+```
+
+0.4 markup (`<ul class="ws-stat-tiles">` of `li.ws-card.ws-stat-tiles__tile` with a stripe) still lays out, by its own
+width: as many tiles across as fit at 14rem each (four in a 60rem column, two in a 30rem side column, one on a phone),
+each tile cream with its rim drawn inside and no stripe. It never reads a `.ws-page`, `.ws-area` or app shell around
+it. Move to the container form above to get the count rules, two across on a phone, and the foot.
+
+**Styles**: `StatTiles/style.css`, in `bundle.css` and `fello.css` as `.ws-stat-tiles`. Every value is a token.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" height=198 -->
+<!-- @dsCard group="Charts" height=1180 -->
 <!doctype html>
 <html>
 <head>
@@ -8,80 +8,151 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage">
+<div class="ws-stage ws-stage--column">
 
-  <div class="ws-stack ws-area" style="width: 100%;">
-    <span class="ws-muted">Four across once the page or area is 60rem wide (its `lg` width); two below it, as here at 960 px</span>
-    <ul class="ws-stat-tiles" aria-label="This month at a glance">
-      <li class="ws-card ws-stat-tiles__tile ws-rise">
-        <span class="ws-stat-tiles__stripe ws-stat-tiles__stripe--navy" aria-hidden="true"></span>
-        <span class="ws-stat-tiles__label">Calls this month</span>
-        <span class="ws-stat-tiles__value-row">
-          <span class="ws-stat-tiles__value">142</span>
-          <span class="ws-change ws-change--up ws-stat-tiles__change">
-            <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden="true"><path d="M5 11L11 5M11 5H6M11 5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-            18 since last week
-          </span>
-        </span>
-      </li>
-      <li class="ws-card ws-stat-tiles__tile ws-rise" style="animation-delay: 40ms;">
-        <span class="ws-stat-tiles__stripe ws-stat-tiles__stripe--teal" aria-hidden="true"></span>
-        <span class="ws-stat-tiles__label">Show rate</span>
-        <span class="ws-stat-tiles__value-row">
-          <span class="ws-stat-tiles__value">72%</span>
-        </span>
-        <span class="ws-stat-tiles__line" title="Above the 65% goal">Above the 65% goal</span>
-      </li>
-      <li class="ws-card ws-stat-tiles__tile ws-rise" style="animation-delay: 80ms;">
-        <span class="ws-stat-tiles__stripe ws-stat-tiles__stripe--salmon" aria-hidden="true"></span>
-        <span class="ws-stat-tiles__label">Leads sourced</span>
-        <span class="ws-stat-tiles__value-row">
-          <span class="ws-stat-tiles__value">14</span>
-        </span>
-        <span class="ws-tick-row ws-stat-tiles__ticks" aria-hidden="true">
-          <span class="ws-tick-row__tick" style="background: var(--ws-chart-under-half);"></span><span class="ws-tick-row__tick" style="background: var(--ws-chart-under-half);"></span><span class="ws-tick-row__tick" style="background: var(--ws-chart-under-half);"></span>
-          <span class="ws-tick-row__tick" style="background: var(--ws-chart-past-half);"></span><span class="ws-tick-row__tick" style="background: var(--ws-chart-past-half);"></span><span class="ws-tick-row__tick" style="background: var(--ws-chart-past-half);"></span>
-          <span class="ws-tick-row__tick" style="background: var(--ws-chart-finished);"></span><span class="ws-tick-row__tick" style="background: var(--ws-chart-finished);"></span><span class="ws-tick-row__tick" style="background: var(--ws-chart-finished);"></span>
-          <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
-        </span>
-      </li>
-      <li class="ws-card ws-stat-tiles__tile ws-rise" style="animation-delay: 120ms;">
-        <span class="ws-stat-tiles__stripe ws-stat-tiles__stripe--purple" aria-hidden="true"></span>
-        <span class="ws-stat-tiles__label">Response rate</span>
-        <span class="ws-stat-tiles__value-row">
-          <span class="ws-stat-tiles__value">38%</span>
-          <span class="ws-change ws-change--down ws-stat-tiles__change">
-            <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden="true"><path d="M5 5L11 11M11 11H6M11 11V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-            4% since Monday
-          </span>
-        </span>
-      </li>
-    </ul>
+  <div class="ws-stack" style="max-width: 1350px;">
+    <span class="ws-muted">Seth's Review inbox: three tiles, a mark on the figure's line, a foot on the tray (one of them the tile's act)</span>
+    <div class="ws-stat-tiles">
+      <ul class="ws-stat-tiles__grid" aria-label="Reviews at a glance">
+        <li class="ws-stat-tiles__tile ws-settle" style="--ws-i: 0;">
+          <div class="ws-stat-tiles__surface">
+            <span class="ws-stat-tiles__label">Zillow rating</span>
+            <span class="ws-stat-tiles__value-row">
+              <span class="ws-stat-tiles__value">5.0</span>
+              <span class="ws-stat-tiles__stars" role="img" aria-label="5 of 5 stars"><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M9 1.5l2.3 4.7 5.2.8-3.8 3.6.9 5.1L9 13.3l-4.6 2.4.9-5.1L1.5 7l5.2-.8z" fill="currentColor"/></svg><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M9 1.5l2.3 4.7 5.2.8-3.8 3.6.9 5.1L9 13.3l-4.6 2.4.9-5.1L1.5 7l5.2-.8z" fill="currentColor"/></svg><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M9 1.5l2.3 4.7 5.2.8-3.8 3.6.9 5.1L9 13.3l-4.6 2.4.9-5.1L1.5 7l5.2-.8z" fill="currentColor"/></svg><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M9 1.5l2.3 4.7 5.2.8-3.8 3.6.9 5.1L9 13.3l-4.6 2.4.9-5.1L1.5 7l5.2-.8z" fill="currentColor"/></svg><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M9 1.5l2.3 4.7 5.2.8-3.8 3.6.9 5.1L9 13.3l-4.6 2.4.9-5.1L1.5 7l5.2-.8z" fill="currentColor"/></svg></span>
+            </span>
+          </div>
+          <div class="ws-stat-tiles__foot"><span>10 reviews</span><span>Checked Nov 2</span></div>
+        </li>
+        <li class="ws-stat-tiles__tile ws-settle" style="--ws-i: 1;">
+          <div class="ws-stat-tiles__surface">
+            <span class="ws-stat-tiles__label">Need a reply</span>
+            <span class="ws-stat-tiles__value-row">
+              <span class="ws-stat-tiles__value">10</span>
+              <span class="ws-tick-row ws-tick-row--tall" style="--tone: var(--ws-chart-alert);" aria-hidden="true"><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span></span>
+            </span>
+          </div>
+          <div class="ws-stat-tiles__foot"><span>0 marked replied</span><span>Zillow</span></div>
+        </li>
+        <li class="ws-stat-tiles__tile ws-settle" style="--ws-i: 2;">
+          <div class="ws-stat-tiles__surface">
+            <span class="ws-stat-tiles__label">Google reviews</span>
+            <span class="ws-stat-tiles__value-row">
+              <span class="ws-stat-tiles__value ws-stat-tiles__value--none">Not connected</span>
+            </span>
+          </div>
+          <a class="ws-stat-tiles__foot" href="#connect"><span>Connect Google</span><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8L6.6 10.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1200px;">
+    <span class="ws-muted">Four across from 60rem: a chip on the figure's baseline, a unit, a line that wraps to two lines</span>
+    <div class="ws-stat-tiles">
+      <ul class="ws-stat-tiles__grid" aria-label="This month at a glance">
+        <li class="ws-stat-tiles__tile">
+          <div class="ws-stat-tiles__surface">
+            <span class="ws-stat-tiles__label">Calls this month</span>
+            <span class="ws-stat-tiles__value-row">
+              <span class="ws-stat-tiles__value">142</span>
+              <span class="ws-change ws-change--up ws-stat-tiles__change" title="18 since last week"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden="true"><path d="M5 11L11 5M11 5H6M11 5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>18 since last week</span>
+            </span>
+          </div>
+        </li>
+        <li class="ws-stat-tiles__tile">
+          <div class="ws-stat-tiles__surface">
+            <span class="ws-stat-tiles__label">Show rate</span>
+            <span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">72%</span></span>
+            <span class="ws-stat-tiles__line" title="Above the 65% goal, median from your list to the first booked showing">Above the 65% goal, median from your list to the first booked showing</span>
+          </div>
+        </li>
+        <li class="ws-stat-tiles__tile">
+          <div class="ws-stat-tiles__surface">
+            <span class="ws-stat-tiles__label">Leads sourced</span>
+            <span class="ws-stat-tiles__value-row">
+              <span class="ws-stat-tiles__value">14</span>
+              <span class="ws-stat-tiles__unit">of 20</span>
+            </span>
+          </div>
+        </li>
+        <li class="ws-stat-tiles__tile">
+          <div class="ws-stat-tiles__surface">
+            <span class="ws-stat-tiles__label">Response rate</span>
+            <span class="ws-stat-tiles__value-row">
+              <span class="ws-stat-tiles__value">38%</span>
+              <span class="ws-change ws-change--down ws-stat-tiles__change" title="4% since Monday"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden="true"><path d="M5 5L11 11M11 11H6M11 11V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>4% since Monday</span>
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1200px;">
+    <span class="ws-muted">Five tiles: five across from 60rem, three then two below it, never four and an orphan</span>
+    <div class="ws-stat-tiles">
+      <ul class="ws-stat-tiles__grid" aria-label="Pipeline">
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-stat-tiles__label">New leads</span><span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">48</span></span></div></li>
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-stat-tiles__label">Booked</span><span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">19</span></span></div></li>
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-stat-tiles__label">Shown</span><span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">12</span></span></div></li>
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-stat-tiles__label">Under contract</span><span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">4</span></span></div></li>
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-stat-tiles__label">Closed this month</span><span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">2</span></span></div></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1200px;">
+    <span class="ws-muted">Six tiles: three and three</span>
+    <div class="ws-stat-tiles">
+      <ul class="ws-stat-tiles__grid" aria-label="Today">
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-stat-tiles__label">Calls</span><span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">31</span></span></div></li>
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-stat-tiles__label">Texts</span><span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">64</span></span></div></li>
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-stat-tiles__label">Emails</span><span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">22</span></span></div></li>
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-stat-tiles__label">Booked</span><span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">5</span></span></div></li>
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-stat-tiles__label">Follow-ups due</span><span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">9</span></span></div></li>
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-stat-tiles__label">Missed</span><span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">0</span></span></div></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 360px; max-width: 100%;">
+    <span class="ws-muted">A 360 px column: two across, the odd last tile takes the row</span>
+    <div class="ws-stat-tiles">
+      <ul class="ws-stat-tiles__grid" aria-label="Reviews at a glance">
+        <li class="ws-stat-tiles__tile">
+          <div class="ws-stat-tiles__surface">
+            <span class="ws-stat-tiles__label">Zillow rating</span>
+            <span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">4.6</span><span class="ws-stat-tiles__stars" role="img" aria-label="4 of 5 stars"><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M9 1.5l2.3 4.7 5.2.8-3.8 3.6.9 5.1L9 13.3l-4.6 2.4.9-5.1L1.5 7l5.2-.8z" fill="currentColor"/></svg><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M9 1.5l2.3 4.7 5.2.8-3.8 3.6.9 5.1L9 13.3l-4.6 2.4.9-5.1L1.5 7l5.2-.8z" fill="currentColor"/></svg><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M9 1.5l2.3 4.7 5.2.8-3.8 3.6.9 5.1L9 13.3l-4.6 2.4.9-5.1L1.5 7l5.2-.8z" fill="currentColor"/></svg><svg viewBox="0 0 18 18" aria-hidden="true"><path d="M9 1.5l2.3 4.7 5.2.8-3.8 3.6.9 5.1L9 13.3l-4.6 2.4.9-5.1L1.5 7l5.2-.8z" fill="currentColor"/></svg><svg viewBox="0 0 18 18" class="ws-stat-tiles__star--off" aria-hidden="true"><path d="M9 1.5l2.3 4.7 5.2.8-3.8 3.6.9 5.1L9 13.3l-4.6 2.4.9-5.1L1.5 7l5.2-.8z" fill="currentColor"/></svg></span></span>
+          </div>
+          <div class="ws-stat-tiles__foot"><span>10 reviews</span><span>Nov 2</span></div>
+        </li>
+        <li class="ws-stat-tiles__tile">
+          <div class="ws-stat-tiles__surface">
+            <span class="ws-stat-tiles__label">Need a reply</span>
+            <span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value">10</span><span class="ws-tick-row ws-tick-row--tall" style="--tone: var(--ws-chart-alert);" aria-hidden="true"><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span></span></span>
+          </div>
+          <div class="ws-stat-tiles__foot"><span>0 marked replied</span><span>Zillow</span></div>
+        </li>
+        <li class="ws-stat-tiles__tile">
+          <div class="ws-stat-tiles__surface">
+            <span class="ws-stat-tiles__label">Google reviews</span>
+            <span class="ws-stat-tiles__value-row"><span class="ws-stat-tiles__value ws-stat-tiles__value--none">Not connected</span></span>
+          </div>
+          <a class="ws-stat-tiles__foot" href="#connect"><span>Connect Google</span><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8L6.6 10.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
+        </li>
+      </ul>
+    </div>
   </div>
 
   <div class="ws-stack" style="width: 360px; max-width: 100%;">
-    <span class="ws-muted">Two below `lg`: the same tiles wrap to a 2-column grid</span>
-    <ul class="ws-stat-tiles" aria-label="This month at a glance">
-      <li class="ws-card ws-stat-tiles__tile ws-rise">
-        <span class="ws-stat-tiles__stripe ws-stat-tiles__stripe--navy" aria-hidden="true"></span>
-        <span class="ws-stat-tiles__label">Calls this month</span>
-        <span class="ws-stat-tiles__value-row">
-          <span class="ws-stat-tiles__value">142</span>
-          <span class="ws-change ws-change--up ws-stat-tiles__change">
-            <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden="true"><path d="M5 11L11 5M11 5H6M11 5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-            18<span class="ws-sr"> since last week</span>
-          </span>
-        </span>
-      </li>
-      <li class="ws-card ws-stat-tiles__tile ws-rise" style="animation-delay: 40ms;">
-        <span class="ws-stat-tiles__stripe ws-stat-tiles__stripe--teal" aria-hidden="true"></span>
-        <span class="ws-stat-tiles__label">Show rate</span>
-        <span class="ws-stat-tiles__value-row">
-          <span class="ws-stat-tiles__value">72%</span>
-        </span>
-        <span class="ws-stat-tiles__line" title="Above the 65% goal">Above the 65% goal</span>
-      </li>
-    </ul>
+    <span class="ws-muted">Loading: ghosts the size of the label and the figure</span>
+    <div class="ws-stat-tiles">
+      <ul class="ws-stat-tiles__grid" aria-label="This month at a glance" aria-busy="true">
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-shimmer ws-stat-tiles__ghost" aria-hidden="true"></span><span class="ws-shimmer ws-stat-tiles__ghost ws-stat-tiles__ghost--value" aria-hidden="true"></span></div></li>
+        <li class="ws-stat-tiles__tile"><div class="ws-stat-tiles__surface"><span class="ws-shimmer ws-stat-tiles__ghost" aria-hidden="true"></span><span class="ws-shimmer ws-stat-tiles__ghost ws-stat-tiles__ghost--value" aria-hidden="true"></span></div></li>
+      </ul>
+    </div>
   </div>
 
 </div>

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

@@ -0,0 +1,64 @@
+/* ---- StatTiles: a page's few numbers as rimmed tiles that measure their own width ---- */
+/* K3: the set is its own container (<div class="ws-stat-tiles"> holding <ul class="ws-stat-tiles__grid">), so it lays
+   out by the column it sits in, never by a .ws-page or .ws-area it may not have. Two across; from 40rem three when
+   there are 3, 5 or 6 tiles; from 60rem four, or five for 5. An odd last tile on two across takes the whole row. */
+.ws-stat-tiles:not(ul) { container-type: inline-size; }
+.ws-stat-tiles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
+/* 0.4 markup (ul.ws-stat-tiles, no wrapper to measure): a grid that measures itself, a tile at least 14rem, as many
+   across as fit its own column. A container query on the ul would read whatever ancestor is a container (an app
+   shell's body), not the column the tiles sit in (Revenue OS K3). */
+ul.ws-stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-xs); }
+.ws-stat-tiles__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
+@container (min-width: 40rem) {
+  .ws-stat-tiles__grid > :last-child:nth-child(odd):not(:only-child) { grid-column: auto; }
+  .ws-stat-tiles__grid:has(> :nth-child(3):last-child, > :nth-child(5):last-child, > :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@container (min-width: 60rem) {
+  .ws-stat-tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .ws-stat-tiles__grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ws-stat-tiles__grid:has(> :nth-child(3):last-child, > :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .ws-stat-tiles__grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+}
+/* A tile (Seth's Review inbox): the tray rim (1 px of #EDEDED through padding, 8 outside, 7 inside), the cream surface,
+   and an optional foot that sits on the tray itself. No outline, no shadow, no stripe. Each tile takes two rows of the
+   set's grid (subgrid), so in a row every surface ends and every foot starts on one line. */
+.ws-stat-tiles__tile { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; min-width: 0; border-radius: var(--ws-radius-card); background: var(--ws-tray); padding: var(--ws-rim); }
+.ws-stat-tiles__tile:not(:has(> .ws-stat-tiles__foot)) > .ws-stat-tiles__surface { grid-row: span 2; }
+.ws-stat-tiles__surface { display: flex; min-width: 0; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--ws-radius-card-inner); background: var(--color-bg-page); }
+/* 0.4 markup (the tile is the surface, no __surface inside): cream, the rim drawn inside. */
+.ws-stat-tiles__tile:not(:has(> .ws-stat-tiles__surface)) { display: flex; grid-row: auto; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); background: var(--color-bg-page); box-shadow: inset 0 0 0 var(--ws-rim) var(--ws-tray); }
+.ws-stat-tiles__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ws-text-control); font-weight: 500; line-height: var(--ws-leading-control); color: var(--color-text-body); }
+/* The figure and its mark (stars, a tall TickRow) 12 apart and centred; a chip or a unit on the figure's baseline. */
+.ws-stat-tiles__value-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs) var(--space-sm); min-width: 0; }
+.ws-stat-tiles__value { flex-shrink: 0; font-size: var(--ws-text-figure); font-weight: 400; line-height: var(--ws-leading-figure); letter-spacing: var(--ws-tracking-display); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+.ws-stat-tiles__value--none { flex-shrink: 1; min-width: 0; color: var(--color-text-muted); }
+.ws-stat-tiles__value-row:has(> .ws-stat-tiles__change, > .ws-stat-tiles__unit) > .ws-stat-tiles__value, .ws-stat-tiles__change, .ws-stat-tiles__unit { align-self: last baseline; }
+/* A chip never runs past its tile and never wraps: in a narrow tile it ends in an ellipsis (give it a title). As a block
+   of one line, not a flex box, so the ellipsis works on the existing markup; the icon sits 4 before the words. */
+.ws-stat-tiles__change { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+.ws-stat-tiles__change > svg { display: inline-block; margin-right: var(--space-xxs); vertical-align: calc((var(--space-md) - var(--ws-icon-sm)) / -2); }
+.ws-stat-tiles__unit { font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
+.ws-stat-tiles__value-row .ws-tick-row { flex: 1 1 0; }
+/* Stars (a rating out of five): 18 px salmon marks, 2 apart. */
+.ws-stat-tiles__stars { display: flex; gap: var(--space-3xs); color: var(--ws-chart-under-half); }
+.ws-stat-tiles__stars > svg { flex-shrink: 0; width: calc(var(--space-md) + var(--space-3xs)); height: calc(var(--space-md) + var(--space-3xs)); }
+.ws-stat-tiles__stars > svg.ws-stat-tiles__star--off { color: var(--ws-track); }
+/* One line under the figure: it wraps to two lines at most (K13), its title holds the rest. */
+.ws-stat-tiles__line { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-muted); text-wrap: pretty; }
+/* The foot on the tray: 8 above and below, 16 at the sides (the surface's edge), 13/18 medium; the left words first,
+   the right ones at the end, and in a narrow tile the right ones drop to their own line. Its lines pack at the top, so
+   a one-line foot beside a two-line one shares its first line. As a link it is the tile's one act, with a 16 px
+   chevron. */
+.ws-stat-tiles__foot { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 0 var(--space-xs); min-height: calc(var(--space-xl) + var(--space-3xs)); padding: var(--space-xs) var(--space-md); border-radius: 0 0 var(--ws-radius-card-inner) var(--ws-radius-card-inner); font-size: var(--ws-text-control); font-weight: 500; line-height: var(--ws-leading-control); color: var(--color-text-body); text-decoration: none; }
+.ws-stat-tiles__foot > :first-child { flex: 1 1 auto; min-width: 0; }
+.ws-stat-tiles__foot > span:last-child:not(:first-child) { flex-shrink: 0; margin-left: auto; white-space: nowrap; color: var(--color-text-muted); }
+a.ws-stat-tiles__foot { flex-wrap: nowrap; }
+a.ws-stat-tiles__foot { color: var(--color-text-heading); cursor: pointer; }
+@media (prefers-reduced-motion: no-preference) { a.ws-stat-tiles__foot { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); } }
+a.ws-stat-tiles__foot > svg { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); color: var(--color-text-heading); }
+a.ws-stat-tiles__foot:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+@media (hover: hover) { a.ws-stat-tiles__foot:hover { background: var(--ws-hover); } }
+@media (pointer: coarse) { a.ws-stat-tiles__foot { min-height: var(--ws-touch); } }
+/* Loading: ghosts the size of the label and the figure. */
+.ws-stat-tiles__ghost { width: var(--space-6xl); height: var(--ws-leading-control); }
+.ws-stat-tiles__ghost--value { width: var(--space-7xl); height: var(--ws-leading-figure); }

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

@@ -0,0 +1,85 @@
+The working line at the top of an answer in progress: who is working, what it is doing in a moving shimmer, and the
+step it is on, so a wait never looks like a stall.
+
+## Use it when
+
+- An agent is building an answer, a chart or a card and the person waits for it.
+- The work has steps a person would recognise ("Reading your calls", "Checking Google", "12 of 40").
+- A card is still coming (`ChatCard` loading): the line sits on top of its ghost.
+
+## Not for
+
+- A person typing in a handoff: use the typing dots (`ChatTurn`).
+- A wait with a known share of the work done: add a `LoadBar` (it holds the real share).
+- A page still loading: use `Skeleton`.
+- An error: say what went wrong in the answer's own words, not on the working line.
+
+## Anatomy
+
+- One line, 24 px tall at least, 13 / 18 (`--ws-text-control`), its parts 8 px apart on the baseline, never wrapping.
+- Who (`ws-status-line__who`): the agent's name, semibold navy.
+- Doing (`ws-status-line__doing`): what it is doing, medium. A shimmer passes over these words every 1.6 s
+  (`--ws-loop-status`, steady), from navy through the AA steps of salmon, purple and teal (`--ws-word-needs`,
+  `--ws-word-past-half`, `--ws-word-positive`), so no letter ever drops under AA as the band passes.
+- Step (`ws-status-line__step`): where it is, in `--color-text-muted`, tabular figures.
+- A long line cuts the step first, then the doing, each with an ellipsis; the line's `title` holds the whole of it.
+
+## Variants and sizes
+
+| Variant | Parts |
+| --- | --- |
+| With a step | Who, doing, step |
+| Without a step | Who, doing |
+
+One size: it sits on the answer's own edge, at the top of the agent turn or the card.
+
+## States
+
+- **Working**: the shimmer runs; the doing words and the step change as the work moves (each step at least 0.55 s on
+  screen, so it can be read).
+- **Done**: the line goes; the answer takes its place.
+- **Long words**: cut with an ellipsis, the step first; the title holds it all.
+- **Reduced motion**: the words stay navy and still; the line still says what is happening.
+- **Dark**: the words and the shimmer's steps are theme tokens.
+
+## Behaviour
+
+- Keyboard and pointer: nothing to interact with.
+- Screen reader: the line is `role="status"`, so each change is said once, politely.
+- Motion: the line settles in (`ws-settle`, 6 px out of a 3 px blur); the shimmer is a background clipped to the
+  words, so the real text never changes.
+
+## Content
+
+- The doing words are a short present participle phrase in sentence case ("Reading your calls"), never a technical
+  status ("Fetching").
+- The step is a count or a name ("12 of 40", "Follow Up Boss"), never a percentage guess.
+- No em dashes.
+
+## Rules
+
+- A working answer says what it is doing; it never shows a spinner alone.
+- Words on the line stay AA at every frame of the shimmer.
+- One working line per answer.
+
+## Source
+
+**Derived from**: North's status line (style1.css:1471-1475: "North" 600 navy, the verb shimmering navy, coral,
+purple, teal over 1.6 s, the step in #8A8A8A; js@615941, each step 0.55 s). The step's grey and the shimmer's tones
+take their AA steps (D2).
+
+## Markup
+
+```html
+<p class="ws-status-line" role="status" title="Coach: reading your calls, 12 of 40">
+  <b class="ws-status-line__who">Coach</b>
+  <span class="ws-status-line__doing">Reading your calls</span>
+  <span class="ws-status-line__step">12 of 40</span>
+</p>
+```
+
+## Styles
+
+`StatusLine/style.css`; the keyframes are the house's `ws-shimmer` and `ws-settle`. Tokens: `--ws-text-control`,
+`--ws-leading-control`, `--ws-loop-status`, `--ws-ease-steady`, `--ws-word-needs`, `--ws-word-past-half`,
+`--ws-word-positive`, `--color-text-heading`, `--color-text-muted`.