@felloinnovations/brand-kit 0.4.0 → 0.5.1

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

@@ -0,0 +1,23 @@
+/* ---- Meter: a count on a thin 4 px track (a running job, a seat's share), the words beside or above it ---- */
+.ws-meter { display: flex; align-items: center; gap: var(--space-xs); }
+.ws-meter__track { flex: 1; min-width: var(--space-4xl); height: var(--space-xxs); overflow: hidden; border-radius: var(--ws-radius-chip); background: var(--ws-track); }
+.ws-meter__fill { display: block; height: 100%; border-radius: var(--ws-radius-chip); background: var(--ws-agent-tally); }
+@media (prefers-reduced-motion: no-preference) { .ws-meter__fill { transition: width var(--ws-duration-fill) var(--ws-ease-settle); } }
+.ws-meter__fill--done { background: var(--color-stat-positive); }
+.ws-meter__words { flex-shrink: 0; font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
+.ws-meter--pill .ws-meter__track, .ws-meter--pill .ws-meter__fill { height: var(--space-sm); border-radius: var(--radius-full); }
+/* The running card: the step and its clock, then the meter. */
+.ws-meter__card { display: flex; flex-direction: column; gap: var(--space-xxs); padding: var(--ws-card-padding); }
+.ws-meter__step { font-size: var(--ws-text-body); line-height: var(--ws-leading-row); color: var(--color-text-interactive); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.ws-meter__step--done { color: var(--color-text-muted); }
+/* Rows (Seth's "Seats Felix absorbs"): the name and its value on a line, the track under it, a small caption under that.
+   Rows are joined by 0.5 px dividers, full width, none above the first; 8 above and below, 14 at the sides. */
+.ws-meter__rows { display: flex; flex-direction: column; }
+.ws-meter__row { display: flex; flex-direction: column; gap: var(--space-xxs); padding: var(--space-xs) var(--space-sm-plus); }
+.ws-meter__row + .ws-meter__row { border-top: var(--ws-divider); }
+.ws-meter__line { display: flex; align-items: baseline; gap: var(--space-xs); }
+.ws-meter__name { flex: 1; min-width: 0; 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-heading); }
+.ws-meter__value { flex-shrink: 0; font-size: var(--ws-text-dense); font-weight: 600; line-height: var(--space-md); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+.ws-meter__value--quiet { font-weight: 500; color: var(--color-text-muted); }
+.ws-meter__row .ws-meter__track { flex: none; min-width: 0; }
+.ws-meter__caption { font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); color: var(--color-text-muted); }

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

@@ -0,0 +1,237 @@
+North's key metric: a rimmed tile with a label, a figure, a pace bar or a mini chart (columns, or a line with dots)
+and a foot, that opens across its row into its chart.
+
+**Use it when**
+
+- A dashboard leads with a few key metrics, each with a goal and a story behind it (revenue, calls, deals, reply time).
+- The reader should see all of them closed, then open one to see what moved it, without leaving the page.
+
+**Not for**
+
+- A page's few plain numbers with no chart behind them: use `StatTiles`.
+- A report's one score: use `ScoreHero`.
+- A card that holds its chart from the start: use a chart card (`Card` with a chart).
+
+**Anatomy (closed)**
+
+- The set (`.ws-metric-tiles`) measures itself: one across under 30rem, two from 30rem, four from 60rem with
+  `__grid--4`. Tiles 16 apart.
+- Tile: one `<button>`. The tray rim (1 px of `--ws-tray` through padding, 8 outside, 7 inside), the cream surface 16
+  inside, 12 between its parts.
+- Head: label 13/18 medium in `--color-text-body` (one line, a `title` when it can truncate) and a 16 px go arrow that
+  rests 4 px back with a hovering pointer (on touch it sits on the content edge).
+- Figure: 40/48 regular, -3%, navy, tabular, never wraps.
+- Bar: a `PaceBar` (24 slot), or a preview chart in `__preview` (24 tall) shown greyed until it wakes, or a mini
+  chart (`__cols` or `__line`, below).
+- Foot on the tray: 32 tall, 16 at the sides, 12/16 words in `--color-text-body`, the figure `<b>` semibold navy;
+  the words give way, the figure never does.
+- `--dense` (North's KPI rail): 12 / 14 inside, 4 apart, a 12 px label and a 28/32 figure.
+
+**Mini charts (closed)**
+
+North's Home tiles carry a small chart of the periods behind the figure, in the bar's place. Two kinds, either one:
+
+- **Column strip** (`__cols`, one `__col` a period, oldest first): columns 8 apart, stopping 12 short of the right edge,
+  2 px top corners, each `--v` tall (its share of the chart's range, `lo` to `hi`), on a 1 px baseline that runs the
+  full width. The period in progress is the last column, `__col--now`, lighter. `--step` on the strip (a share of the
+  height, say `33.33%` for a scale line every third) cuts every column with a fine line in the ground's colour at each
+  step, North's scale lines through the bars. A zero is a 1 px stub on the baseline, never left out.
+- **Line with dots** (`__line`, an inline `<svg>`): one `<line pathLength="1">` a step and one `<circle>` a point, the
+  coordinates in percent of the plot (x from 0% to 100%, y from the top), the points 4 in from the left and 12 short of
+  the right, over a 0.5 px mid rule the full width. Dots 5 px with a 1.5 px ring in the ground's colour; the last
+  (`__now`, it marks now) 9 px. The line is 1.25 px.
+- Both are 36 tall and reach up into the 12 above them, so the baseline sits where a PaceBar's 24 slot ends and a tile
+  with a chart is as tall as one with a bar.
+- **Grey at rest, woken on hover or focus.** The marks are the heading navy at 20% over the ground whatever their
+  tone, so every tile rests the same grey, as North's do (the period in progress 11%; the baseline and mid rule
+  `--ws-chart-foot`); under the pointer or the focus they turn to the tone (the period
+  in progress 55%; the baseline `--ws-edge-card`, the mid rule `--ws-edge-slot`) over 400 ms (`--ws-duration-shrink`).
+  `--tone` on the chart picks the woken tone, navy (`--color-text-heading`) by default; North's retention line is teal
+  (`--ws-chart-finished`) and a figure behind its pace is alert red (`--ws-chart-alert`). Marks keep the exact tone; the words around them are navy (D2).
+- The chart is `aria-hidden`: the tile's `aria-label` says what it shows in words ("up every month from $5.1M in May").
+- No history yet (a first month): no chart, never a greyed one or an invented one.
+
+**Anatomy (open)**
+
+- `--open` on the tile (a `<section role="dialog">` once open): it takes the whole row, 12 outside and 11 inside
+  (`--ws-radius-drawer`); its siblings are gone (`display: none`); at least 376 tall (two closed rows and their gap).
+- Main (20 24 8 28): the label at 20/24 with a dotted underline (a description opens from it), the figure at 52/56 in
+  its status word colour (`style="--tone-word: ..."`), the chart (`__chart`, or `__chart--segs`: rows of a name, a
+  figure and a share over a PaceBar, 24 apart), the key centred under it (8 px swatches, 12/16 medium).
+- Side column, 420 wide behind a 0.5 px rule: tools (the period and the close, an icon button), then sections 12 / 14
+  / 12 / 24 split by full-width 0.5 px rules: what moved it (8 px dot, name, figure in a right column), a line, the
+  acts (a pair that shares the row in equal halves, the primary last, as Seth's pane pair; each takes the row when
+  the two do not fit side by side).
+- Foot on the tray, 40 tall, 28 at the sides.
+- Parts: `.ws-metric-tile__main` (the chart column: head, value, chart, key), `.ws-metric-tile__chart--segs` of
+  `.ws-metric-tile__seg` (each a `.ws-metric-tile__seg-line`, name, figure and `<em>` share, over a PaceBar),
+  `.ws-metric-tile__key` (`<i>` swatches with `--tone`), `.ws-metric-tile__side` (the side column),
+  `.ws-metric-tile__tools` (the period and the close), `.ws-metric-tile__section` (split by 0.5 px rules; `--grow`
+  takes the spare height), `.ws-metric-tile__section-title` (13/18 medium navy), `.ws-metric-tile__mover` (an `<i>`
+  dot, a `<b>` name, an `<em>` figure) and `.ws-metric-tile__acts` (the pair of buttons).
+- Under 60rem the side column moves under the chart; under 30rem everything inside is 16 from the edge.
+
+**States**
+
+- Rest, hover (the rim darkens to `--ws-well-hover` over 200 ms, the arrow steps forward, a preview wakes to its
+  colours over 400 ms), focus (the same, plus the 2 px navy ring), selected (`--selected`: the darker rim and a 2 px
+  navy tab 8 under the tile, 16 in from each side), open.
+- Loading: put `ws-shimmer` ghosts where the figure and the bar go.
+- Long label: one line, an ellipsis and its `title`. Long foot words: an ellipsis; the figure stays whole.
+- Zero: every column a 1 px stub, or the line on the floor of the plot, and a 0 in the figure.
+- Building in (`--draw` on the tile, North's Home intro, "Metric + goal bars fill"): the chart draws over the card's
+  share of the page fill, `--ws-duration-fill-page` (1700 ms) x 0.79, so 1343 ms. Column `i` of `--n` starts at
+  `i / (n - 1)` of the first half and rises from the baseline over the other half on `--ws-ease-settle` (North's
+  stagger, share 0.5). The line draws left to right at an even pace over the first three quarters, step `i` after step
+  `i - 1`, and each dot pops (`ws-bloom` on `--ws-ease-pop`) as the line reaches it, the end dot last. Then the foot's
+  figure rises in (`ws-rise`, 320 ms). Set `--n` on the chart and `--i` on each column, step and dot. Inside a
+  `.ws-build` card all of it starts at the card's `--ws-build-at`, when the card scrolls into view, once (Motion,
+  Build-in).
+- Hover while building: the tint and the arrow as at rest; the marks wake to their tone where they have drawn.
+- Reduced motion: everything changes at once; the chart shows its final drawing.
+
+**Behaviour**
+
+- Opening is the app's job, in this order (North): measure the tile's slot, set `--open`, and animate from the slot's
+  box to the row's over 550 ms on `--ws-ease-grow` (`--ws-duration-grow`), corners 8 to 12. Fade the other tiles out
+  over 200 ms first (`--ws-duration-hover`), then hide them. After 80 ms the details settle in (`ws-settle` with
+  `--ws-i`, 22 ms apart) and the chart draws (900 ms, `--ws-duration-draw`).
+- Closing: 400 ms on the same curve (`--ws-duration-shrink`); the details leave in 120 ms (`--ws-duration-exit`).
+- Escape closes; focus moves to the close act on open and back to the tile on close. The open tile is
+  `role="dialog"` with `aria-label` (the metric's name).
+- A closed tile's `aria-label` reads the whole tile ("Revenue this month, $412K, behind pace by $38K. Open").
+- In React, use `springs` and `eases` from `@felloinnovations/brand-kit/tokens` inside `<MotionConfig reducedMotion="user">`.
+
+**Rules**
+
+- Four key metrics at most in a set; each has a goal, or it is a `StatTiles` tile.
+- One tile open at a time.
+- Words in a tone take the AA step (`--ws-word-past-half`, `--ws-word-needs-work`, `--ws-word-positive`).
+
+**Source**
+
+**Derived from**: North's Home key metrics and scoreboard tiles (`.mcard`, `.scard`, `.mtile`, the opened `.mopen`),
+built from Seth's base values (16 / 12 / 40, foot 32) rather than the 1.09 scaled ones (17.5 / 13.12 / 43.74); the open
+and close timing from North's motion config. The slot height (189 in North) is not fixed here: a tile is as tall as
+its content. The mini charts are North's Home previews (`HD` and its drawing in app.js: columns 8 apart, 12 short of
+the right, 2 px corners, 0.75 px scale cuts, the month to date lighter; the line 1.25 px, dots 2.5 and 4.5 radius with
+a 1.5 px paper ring; the rest palette a navy wash, woken over 0.4 s), 40 tall at North's 1.09 scale and so 36 here
+(D3); their draw is North's intro ("Metric + goal bars fill", 1.7 s, cards 0.21 apart, marks 0.5).
+
+**Tokens**: `--ws-duration-fill-page` (the draw), `--ws-ease-settle` (each column), `--ws-ease-steady` (the line),
+`--ws-ease-pop` (each dot), `--ws-duration-settle` (a dot, the foot's figure), `--ws-duration-shrink` (waking),
+`--ws-chart-foot`, `--ws-edge-card`, `--ws-edge-slot`, `--ws-radius-chip`, `--ws-hairline`, `--ws-line`.
+
+**Markup**
+
+```html
+<div class="ws-metric-tiles">
+  <div class="ws-metric-tiles__grid ws-metric-tiles__grid--4">
+    <button type="button" class="ws-metric-tile" aria-label="Calls this week, 312, ahead of pace by 24. Open">
+      <span class="ws-metric-tile__surface">
+        <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Calls this week</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" aria-hidden="true">...</svg></span>
+        <span class="ws-metric-tile__value">312</span>
+        <span class="ws-pace-bar" style="--value: 78%; --pace: 72%; --tone: var(--ws-chart-finished);" aria-hidden="true">
+          <span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__dot"></span>
+        </span>
+      </span>
+      <span class="ws-metric-tile__foot"><span>Ahead of pace by</span><b>24</b></span>
+    </button>
+  </div>
+</div>
+```
+
+With a mini chart, building in on a dashboard (`.ws-build` on the page or section, the tile its card): a column strip
+(six periods, a scale line every third, the last in progress), then a line with dots in teal:
+
+```html
+<div class="ws-metric-tiles ws-build">
+  <div class="ws-metric-tiles__grid ws-metric-tiles__grid--4">
+    <button type="button" class="ws-metric-tile ws-metric-tile--draw ws-build__card" style="--ws-i: 0;" aria-label="Recurring revenue, $12.99M, up every month from $5.1M in May; 100% of pace, $12.99M of $13.06M. Open">
+      <span class="ws-metric-tile__surface">
+        <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Recurring revenue</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" aria-hidden="true">...</svg></span>
+        <span class="ws-metric-tile__value">$12.99M</span>
+        <span class="ws-metric-tile__cols" style="--n: 6; --step: 33.33%;" aria-hidden="true">
+          <span class="ws-metric-tile__col" style="--v: 34%; --i: 0;"></span>
+          <span class="ws-metric-tile__col" style="--v: 42.67%; --i: 1;"></span>
+          <span class="ws-metric-tile__col" style="--v: 52.67%; --i: 2;"></span>
+          <span class="ws-metric-tile__col" style="--v: 62.8%; --i: 3;"></span>
+          <span class="ws-metric-tile__col" style="--v: 77%; --i: 4;"></span>
+          <span class="ws-metric-tile__col ws-metric-tile__col--now" style="--v: 86.6%; --i: 5;"></span>
+        </span>
+      </span>
+      <span class="ws-metric-tile__foot"><span>Pace $12.99M of $13.06M</span><b>100%</b></span>
+    </button>
+    <button type="button" class="ws-metric-tile ws-metric-tile--draw ws-build__card" style="--ws-i: 1;" aria-label="Net revenue retention, 99.9%, between 99.1% and 100.7% since May; 100% of the 100.0% target. Open">
+      <span class="ws-metric-tile__surface">
+        <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Net revenue retention</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" aria-hidden="true">...</svg></span>
+        <span class="ws-metric-tile__value">99.9%</span>
+        <span class="ws-metric-tile__line" style="--n: 6; --tone: var(--ws-chart-finished);" aria-hidden="true"><svg>
+          <line pathLength="1" x1="0%" y1="76.67%" x2="20%" y2="53.33%" style="--i: 0;"/>
+          <line pathLength="1" x1="20%" y1="53.33%" x2="40%" y2="40%" style="--i: 1;"/>
+          <line pathLength="1" x1="40%" y1="40%" x2="60%" y2="66.67%" style="--i: 2;"/>
+          <line pathLength="1" x1="60%" y1="66.67%" x2="80%" y2="23.33%" style="--i: 3;"/>
+          <line pathLength="1" x1="80%" y1="23.33%" x2="100%" y2="50%" style="--i: 4;"/>
+          <circle cx="0%" cy="76.67%" style="--i: 0;"/><circle cx="20%" cy="53.33%" style="--i: 1;"/>
+          <circle cx="40%" cy="40%" style="--i: 2;"/><circle cx="60%" cy="66.67%" style="--i: 3;"/>
+          <circle cx="80%" cy="23.33%" style="--i: 4;"/><circle class="ws-metric-tile__now" cx="100%" cy="50%" style="--i: 5;"/>
+        </svg></span>
+      </span>
+      <span class="ws-metric-tile__foot"><span>Target 100.0%</span><b>100%</b></span>
+    </button>
+  </div>
+</div>
+```
+
+A column's `--v` is `(value - lo) / (hi - lo)`; a point's `cy` is `(hi - value) / (hi - lo)`. Pick `lo` and `hi` a little
+outside the run (North: 0 to 15 for 5.1 to 12.99) so no mark touches the plot's edge, and `--step` so a strip shows at
+most two scale lines.
+
+Open (the app swaps the tile's `<button>` for this `<section>` in the same slot; the other tiles in the grid hide):
+
+```html
+<section class="ws-metric-tile ws-metric-tile--open" role="dialog" aria-label="Revenue this month" style="--tone-word: var(--ws-word-past-half);">
+  <div class="ws-metric-tile__surface">
+    <div class="ws-metric-tile__main">
+      <div class="ws-metric-tile__head ws-settle" style="--ws-i: 0;"><span class="ws-metric-tile__label">Revenue this month</span></div>
+      <span class="ws-metric-tile__value ws-settle" style="--ws-i: 1;">$412K</span>
+      <div class="ws-metric-tile__chart ws-metric-tile__chart--segs">
+        <div class="ws-metric-tile__seg ws-settle" style="--ws-i: 2;">
+          <div class="ws-metric-tile__seg-line"><span title="Priya Nair">Priya Nair</span><b>$148K</b><em>92%</em></div>
+          <div class="ws-pace-bar ws-pace-bar--draw" style="--value: 74%; --pace: 66%; --tone: var(--ws-chart-finished);" role="img" aria-label="Priya Nair, 92% of pace">
+            <span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__dot"></span>
+          </div>
+        </div>
+        <!-- one __seg a part -->
+      </div>
+      <div class="ws-metric-tile__key ws-settle" style="--ws-i: 5;" aria-hidden="true">
+        <span><i style="--tone: var(--ws-chart-finished);"></i>On pace</span>
+        <span><i style="--tone: var(--ws-chart-needs-work);"></i>Off pace</span>
+      </div>
+    </div>
+    <aside class="ws-metric-tile__side">
+      <div class="ws-metric-tile__tools">
+        <span>This month, to Nov 4</span>
+        <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Close"><svg viewBox="0 0 16 16" aria-hidden="true">...</svg></button>
+      </div>
+      <div class="ws-metric-tile__section ws-settle" style="--ws-i: 2;">
+        <h4 class="ws-metric-tile__section-title">What moved it</h4>
+        <div class="ws-metric-tile__mover"><i style="--tone: var(--ws-chart-finished);"></i><b title="Two listings closed early">Two listings closed early</b><em>+$52K</em></div>
+      </div>
+      <div class="ws-metric-tile__section ws-metric-tile__section--grow ws-settle" style="--ws-i: 3;">
+        <p class="ws-body">Behind pace by $38K with 26 days to go.</p>
+      </div>
+      <div class="ws-metric-tile__section ws-settle" style="--ws-i: 4;">
+        <div class="ws-metric-tile__acts">
+          <button type="button" class="ws-btn ws-btn--secondary">Open the report</button>
+          <button type="button" class="ws-btn ws-btn--primary">Ask about this</button>
+        </div>
+      </div>
+    </aside>
+  </div>
+  <div class="ws-metric-tile__foot"><span>Behind pace by</span><b>$38K</b></div>
+</section>
+```
+
+**Styles**: `MetricTile/style.css` (with `PaceBar/style.css`), in `bundle.css` and `fello.css` as `.ws-metric-tile`.
+Every value is a token.

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

@@ -0,0 +1,241 @@
+<!-- @dsCard group="Charts" height=1720 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>MetricTile</title>
+<link rel="stylesheet" href="../../tokens.css">
+<link rel="stylesheet" href="../bundle.css">
+</head>
+<body>
+<div class="ws-stage ws-stage--column">
+
+  <div class="ws-stack" style="max-width: 1194px;">
+    <div class="ws-cluster"><span class="ws-muted">Mini charts building in (a .ws-build): each tile rises in 70 ms after the one before; its columns grow from the baseline one after another, the line draws left to right and its dots pop, then the foot's figure. Grey until the pointer or the focus wakes it to its tone</span><button type="button" class="ws-btn ws-btn--secondary ws-btn--sm" data-replay="mt-build" aria-label="Replay the build-in">Replay</button></div>
+    <div class="ws-metric-tiles ws-build" id="mt-build">
+      <div class="ws-metric-tiles__grid ws-metric-tiles__grid--4">
+        <button type="button" class="ws-metric-tile ws-metric-tile--draw ws-build__card" style="--ws-i: 0;" aria-label="Recurring revenue, $12.99M, up every month from $5.1M in May; 100% of pace, $12.99M of $13.06M. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Recurring revenue</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">$12.99M</span>
+            <span class="ws-metric-tile__cols" style="--n: 6; --step: 33.33%;" aria-hidden="true"><span class="ws-metric-tile__col" style="--v: 34%; --i: 0;"></span><span class="ws-metric-tile__col" style="--v: 42.67%; --i: 1;"></span><span class="ws-metric-tile__col" style="--v: 52.67%; --i: 2;"></span><span class="ws-metric-tile__col" style="--v: 62.8%; --i: 3;"></span><span class="ws-metric-tile__col" style="--v: 77%; --i: 4;"></span><span class="ws-metric-tile__col ws-metric-tile__col--now" style="--v: 86.6%; --i: 5;"></span></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>Pace $12.99M of $13.06M</span><b>100%</b></span>
+        </button>
+        <button type="button" class="ws-metric-tile ws-metric-tile--draw ws-build__card" style="--ws-i: 1;" aria-label="Total revenue, $35.75M, up every month from $29.5M in May; 89% of the $40.03M plan. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Total revenue</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">$35.75M</span>
+            <span class="ws-metric-tile__cols" style="--n: 6; --step: 41.67%;" aria-hidden="true"><span class="ws-metric-tile__col" style="--v: 37.5%; --i: 0;"></span><span class="ws-metric-tile__col" style="--v: 46.67%; --i: 1;"></span><span class="ws-metric-tile__col" style="--v: 52.5%; --i: 2;"></span><span class="ws-metric-tile__col" style="--v: 58.83%; --i: 3;"></span><span class="ws-metric-tile__col" style="--v: 76.25%; --i: 4;"></span><span class="ws-metric-tile__col ws-metric-tile__col--now" style="--v: 89.58%; --i: 5;"></span></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>Of the $40.03M plan</span><b>89%</b></span>
+        </button>
+        <button type="button" class="ws-metric-tile ws-metric-tile--draw ws-build__card" style="--ws-i: 2;" aria-label="Net revenue retention, 99.9%, between 99.1% and 100.7% since May; 100% of the 100.0% target. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Net revenue retention</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">99.9%</span>
+            <span class="ws-metric-tile__line" style="--n: 6; --tone: var(--ws-chart-finished);" aria-hidden="true"><svg><line pathLength="1" x1="0%" y1="76.67%" x2="20%" y2="53.33%" style="--i: 0;"/><line pathLength="1" x1="20%" y1="53.33%" x2="40%" y2="40%" style="--i: 1;"/><line pathLength="1" x1="40%" y1="40%" x2="60%" y2="66.67%" style="--i: 2;"/><line pathLength="1" x1="60%" y1="66.67%" x2="80%" y2="23.33%" style="--i: 3;"/><line pathLength="1" x1="80%" y1="23.33%" x2="100%" y2="50%" style="--i: 4;"/><circle cx="0%" cy="76.67%" style="--i: 0;"/><circle cx="20%" cy="53.33%" style="--i: 1;"/><circle cx="40%" cy="40%" style="--i: 2;"/><circle cx="60%" cy="66.67%" style="--i: 3;"/><circle cx="80%" cy="23.33%" style="--i: 4;"/><circle class="ws-metric-tile__now" cx="100%" cy="50%" style="--i: 5;"/></svg></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>Target 100.0%</span><b>100%</b></span>
+        </button>
+        <button type="button" class="ws-metric-tile ws-metric-tile--draw ws-build__card" style="--ws-i: 3;" aria-label="Net new revenue, $1.55M this month, after $2.03M in July and $1.32M in August; 87% of pace, $1.78M of $1.87M. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Net new revenue</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">$1.55M</span>
+            <span class="ws-metric-tile__cols" style="--n: 6; --step: 43.48%; --tone: var(--ws-chart-alert);" aria-hidden="true"><span class="ws-metric-tile__col" style="--v: 70.43%; --i: 0;"></span><span class="ws-metric-tile__col" style="--v: 81.74%; --i: 1;"></span><span class="ws-metric-tile__col" style="--v: 88.26%; --i: 2;"></span><span class="ws-metric-tile__col" style="--v: 57.39%; --i: 3;"></span><span class="ws-metric-tile__col" style="--v: 76.52%; --i: 4;"></span><span class="ws-metric-tile__col ws-metric-tile__col--now" style="--v: 67.39%; --i: 5;"></span></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>Pace $1.78M of $1.87M</span><b>87%</b></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1194px;">
+    <span class="ws-muted">At rest: a long label and long foot words give way to an ellipsis; nothing counted is a 1 px stub a period (columns) or a line on the floor (the line); no history yet is no chart, never a greyed one</span>
+    <div class="ws-metric-tiles">
+      <div class="ws-metric-tiles__grid ws-metric-tiles__grid--4">
+        <button type="button" class="ws-metric-tile" aria-label="Average revenue per active account this quarter, $4,120, up from $3,200 in the first month; 96% of pace. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label" title="Average revenue per active account this quarter">Average revenue per active account this quarter</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">$4,120</span>
+            <span class="ws-metric-tile__cols" style="--n: 4; --step: 40%;" aria-hidden="true"><span class="ws-metric-tile__col" style="--v: 64%; --i: 0;"></span><span class="ws-metric-tile__col" style="--v: 70%; --i: 1;"></span><span class="ws-metric-tile__col" style="--v: 78%; --i: 2;"></span><span class="ws-metric-tile__col ws-metric-tile__col--now" style="--v: 82.4%; --i: 3;"></span></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span title="Behind the quarter’s pace by a little under two hundred dollars">Behind the quarter’s pace by a little under two hundred dollars</span><b>96%</b></span>
+        </button>
+        <button type="button" class="ws-metric-tile" aria-label="New accounts this week, 0, none on any day yet; 0% of the 12 planned. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">New accounts this week</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">0</span>
+            <span class="ws-metric-tile__cols" style="--n: 7;" aria-hidden="true"><span class="ws-metric-tile__col" style="--v: 0%; --i: 0;"></span><span class="ws-metric-tile__col" style="--v: 0%; --i: 1;"></span><span class="ws-metric-tile__col" style="--v: 0%; --i: 2;"></span><span class="ws-metric-tile__col" style="--v: 0%; --i: 3;"></span><span class="ws-metric-tile__col" style="--v: 0%; --i: 4;"></span><span class="ws-metric-tile__col" style="--v: 0%; --i: 5;"></span><span class="ws-metric-tile__col ws-metric-tile__col--now" style="--v: 0%; --i: 6;"></span></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>Of the 12 planned this week</span><b>0%</b></span>
+        </button>
+        <button type="button" class="ws-metric-tile" aria-label="Reply rate, 0%, no replies in five weeks; 0% of the 25% target. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Reply rate</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">0%</span>
+            <span class="ws-metric-tile__line" style="--n: 5;" aria-hidden="true"><svg><line pathLength="1" x1="0%" y1="100%" x2="25%" y2="100%" style="--i: 0;"/><line pathLength="1" x1="25%" y1="100%" x2="50%" y2="100%" style="--i: 1;"/><line pathLength="1" x1="50%" y1="100%" x2="75%" y2="100%" style="--i: 2;"/><line pathLength="1" x1="75%" y1="100%" x2="100%" y2="100%" style="--i: 3;"/><circle cx="0%" cy="100%" style="--i: 0;"/><circle cx="25%" cy="100%" style="--i: 1;"/><circle cx="50%" cy="100%" style="--i: 2;"/><circle cx="75%" cy="100%" style="--i: 3;"/><circle class="ws-metric-tile__now" cx="100%" cy="100%" style="--i: 4;"/></svg></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>Target 25%</span><b>0%</b></span>
+        </button>
+        <button type="button" class="ws-metric-tile" aria-label="Referrals, 3, the first month so no trend yet. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Referrals</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">3</span>
+            
+          </span>
+          <span class="ws-metric-tile__foot"><span>First month, no trend yet</span><b>3</b></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1194px;">
+    <span class="ws-muted">Closed, four across: label and go arrow, the figure, a PaceBar or a greyed preview, the foot on the tray</span>
+    <div class="ws-metric-tiles">
+      <div class="ws-metric-tiles__grid ws-metric-tiles__grid--4">
+        <button type="button" class="ws-metric-tile ws-settle" style="--ws-i: 0;" aria-label="Revenue this month, $412K, behind pace by $38K. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Revenue this month</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">$412K</span>
+            <span class="ws-pace-bar" style="--value: 58%; --pace: 66%; --tone: var(--ws-chart-past-half);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__gap"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span><span class="ws-pace-bar__dot"></span></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>Behind pace by</span><b>$38K</b></span>
+        </button>
+        <button type="button" class="ws-metric-tile ws-settle" style="--ws-i: 1;" aria-label="Calls this week, 312, ahead of pace by 24. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Calls this week</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">312</span>
+            <span class="ws-pace-bar" style="--value: 78%; --pace: 72%; --tone: var(--ws-chart-finished);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span><span class="ws-pace-bar__dot"></span></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>Ahead of pace by</span><b>24</b></span>
+        </button>
+        <button type="button" class="ws-metric-tile ws-settle" style="--ws-i: 2;" aria-label="Deals closed, 9, 2 more than last month. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Deals closed</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">9</span>
+            <span class="ws-metric-tile__preview" aria-hidden="true"><span class="ws-tick-strip ws-tick-strip--bar" style="--n: 12; --tone: var(--ws-chart-finished);"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></span></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>More than last month</span><b>2</b></span>
+        </button>
+        <button type="button" class="ws-metric-tile ws-settle" style="--ws-i: 3;" aria-label="Average time to first reply, 4 minutes 12 seconds, slower by 38 seconds. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label" title="Average time to first reply on new leads">Average time to first reply on new leads</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">4m 12s</span>
+            <span class="ws-pace-bar" style="--value: 30%; --pace: 70%; --tone: var(--ws-chart-needs-work);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__gap"></span><span class="ws-pace-bar__dot"></span></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>Slower than the 3 minute goal by</span><b>1m 12s</b></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1194px;">
+    <span class="ws-muted">Open: the tile takes the row; the chart beside a side column (under it below 60rem); details settle in</span>
+    <div class="ws-metric-tiles">
+      <div class="ws-metric-tiles__grid ws-metric-tiles__grid--4">
+        <button type="button" class="ws-metric-tile">hidden while one is open</button>
+        <section class="ws-metric-tile ws-metric-tile--open" role="dialog" aria-label="Revenue this month" style="--tone-word: var(--ws-word-past-half);">
+          <div class="ws-metric-tile__surface">
+            <div class="ws-metric-tile__main">
+              <div class="ws-metric-tile__head ws-settle" style="--ws-i: 0;">
+                <span class="ws-metric-tile__label">Revenue this month</span>
+              </div>
+              <span class="ws-metric-tile__value ws-settle" style="--ws-i: 1;">$412K</span>
+              <div class="ws-metric-tile__chart ws-metric-tile__chart--segs">
+                <div class="ws-metric-tile__seg ws-settle" style="--ws-i: 2;">
+                  <div class="ws-metric-tile__seg-line"><span title="Priya Nair">Priya Nair</span><b>$148K</b><em>92%</em></div>
+                  <div class="ws-pace-bar ws-pace-bar--draw" style="--value: 74%; --pace: 66%; --tone: var(--ws-chart-finished);" role="img" aria-label="Priya Nair, 92% of pace"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span><span class="ws-pace-bar__dot"></span></div>
+                </div>
+                <div class="ws-metric-tile__seg ws-settle" style="--ws-i: 3;">
+                  <div class="ws-metric-tile__seg-line"><span title="Marcus Bell">Marcus Bell</span><b>$121K</b><em>81%</em></div>
+                  <div class="ws-pace-bar ws-pace-bar--draw" style="--value: 54%; --pace: 66%; --tone: var(--ws-chart-past-half);" role="img" aria-label="Marcus Bell, 81% of pace"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__gap"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span><span class="ws-pace-bar__dot"></span></div>
+                </div>
+                <div class="ws-metric-tile__seg ws-settle" style="--ws-i: 4;">
+                  <div class="ws-metric-tile__seg-line"><span title="Dana Whitfield, the newest on the team this quarter">Dana Whitfield, the newest on the team this quarter</span><b>$84K</b><em>61%</em></div>
+                  <div class="ws-pace-bar ws-pace-bar--draw" style="--value: 40%; --pace: 66%; --tone: var(--ws-chart-needs-work);" role="img" aria-label="Dana Whitfield, 61% of pace"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__gap"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span><span class="ws-pace-bar__dot"></span></div>
+                </div>
+              </div>
+              <div class="ws-metric-tile__key ws-settle" style="--ws-i: 5;" aria-hidden="true">
+                <span><i style="--tone: var(--ws-chart-finished);"></i>On pace</span>
+                <span><i style="--tone: var(--ws-chart-past-half);"></i>Behind</span>
+                <span><i style="--tone: var(--ws-chart-needs-work);"></i>Off pace</span>
+              </div>
+            </div>
+            <aside class="ws-metric-tile__side">
+              <div class="ws-metric-tile__tools">
+                <span>This month, to Nov 4</span>
+                <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Close"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>
+              </div>
+              <div class="ws-metric-tile__section ws-settle" style="--ws-i: 2;">
+                <h4 class="ws-metric-tile__section-title">What moved it</h4>
+                <div class="ws-metric-tile__mover"><i style="--tone: var(--ws-chart-finished);"></i><b title="Two listings closed early">Two listings closed early</b><em>+$52K</em></div>
+                <div class="ws-metric-tile__mover"><i style="--tone: var(--ws-chart-needs-work);"></i><b title="A buyer walked away at inspection on Elm Street">A buyer walked away at inspection on Elm Street</b><em>&minus;$31K</em></div>
+              </div>
+              <div class="ws-metric-tile__section ws-metric-tile__section--grow ws-settle" style="--ws-i: 3;">
+                <p class="ws-body">Behind pace by $38K with 26 days to go. Dana's three open deals would close the gap.</p>
+              </div>
+              <div class="ws-metric-tile__section ws-settle" style="--ws-i: 4;">
+                <div class="ws-metric-tile__acts">
+                  <button type="button" class="ws-btn ws-btn--secondary">Open the report</button>
+                  <button type="button" class="ws-btn ws-btn--primary">Ask about this</button>
+                </div>
+              </div>
+            </aside>
+          </div>
+          <div class="ws-metric-tile__foot"><span>Behind pace by</span><b>$38K</b></div>
+        </section>
+        <button type="button" class="ws-metric-tile">hidden while one is open</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 760px;">
+    <span class="ws-muted">Two across, one selected (the darker rim and the navy tab under it)</span>
+    <div class="ws-metric-tiles">
+      <div class="ws-metric-tiles__grid">
+        <button type="button" class="ws-metric-tile ws-metric-tile--selected" aria-pressed="true" aria-label="Sales, 64% of pace">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Sales</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">64%</span>
+            <span class="ws-pace-bar" style="--value: 64%; --pace: 70%; --tone: var(--ws-chart-past-half);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__gap"></span><span class="ws-pace-bar__dot"></span></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>Of pace</span><b>64%</b></span>
+        </button>
+        <button type="button" class="ws-metric-tile" aria-pressed="false" aria-label="Recruiting, 88% of pace">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Recruiting</span><svg class="ws-metric-tile__go" viewBox="0 0 16 16" 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></span>
+            <span class="ws-metric-tile__value">88%</span>
+            <span class="ws-pace-bar" style="--value: 88%; --pace: 70%; --tone: var(--ws-chart-finished);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__dot"></span></span>
+          </span>
+          <span class="ws-metric-tile__foot"><span>Of pace</span><b>88%</b></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 300px; max-width: 100%;">
+    <span class="ws-muted">Dense (North's KPI rail): 12 / 14 inside, a 28 px figure</span>
+    <div class="ws-metric-tiles">
+      <div class="ws-metric-tiles__grid">
+        <button type="button" class="ws-metric-tile ws-metric-tile--dense" aria-label="New leads, 48, 92% of pace">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">New leads</span></span>
+            <span class="ws-metric-tile__value">48</span>
+            <span class="ws-pace-bar" style="--value: 64%; --pace: 70%; --tone: var(--ws-chart-finished);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__gap"></span><span class="ws-pace-bar__dot"></span></span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+</div>
+<script>
+  /* Replay: a fresh copy of the build runs its build-in again (the app never needs this; a page builds in once). */
+  for (const b of document.querySelectorAll('[data-replay]')) b.addEventListener('click', () => {
+    const el = document.getElementById(b.dataset.replay);
+    el.replaceWith(el.cloneNode(true));
+  });
+</script>
+</body>
+</html>