@felloinnovations/brand-kit 0.4.0 → 0.5.1

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

@@ -0,0 +1,164 @@
+A value over periods against an axis, as a line with its dots and the hatched area under it, or as columns that collapse into the line's points and back.
+
+**Use it when**
+
+- One number moves month to month or week to week (ending ARR, calls answered, bookings) and the reader needs its level
+  against an axis, not only its shape.
+- The same run reads two ways: columns to compare periods, a line to see the trend. A Bars / Line switch over the card
+  shows both, from the same data, with no reload: the columns collapse into the line's points.
+- A tile needs a small preview of that run (`--bare`, inside `MetricTile`'s `__preview`).
+
+**Not for**
+
+- A day-by-day trend with one moment that explains it: use `TrendBars`.
+- A bill or a rate that steps against a reference, the gap hatched: use `StepLine`.
+- Parts of one whole: use `ShareBar`. A goal's share: `GoalTicks` or `PaceBar`.
+- Two series or more: one TrendLine draws one series (and one reference). Put the second in its own card.
+
+**Anatomy**
+
+- Plot: 224 tall (`--ws-trend-line-h`, the grid), 24 of head room above it for a reference's words; across, a 40 px
+  value gutter (`--ws-trend-line-y` for longer figures), 12, the plot. The period names sit 6 under it.
+- Data is positions: `--n` (how many periods) on the figure; on each point its place `--i` (0 to n - 1) and its value
+  `--y`, as a percentage of the plot from the top (100% is the baseline). Point i stands at x = (i + 0.5) / n.
+- Grid: value rules (`__rule`, `--y`), 0.5 px `--ws-edge-slot`; the baseline is the plot's own bottom edge, 0.5 px
+  `--ws-edge-card`. Value labels 11/14 muted, right-aligned, centred on their rules. Set `--ticks` on the figure to the
+  number of even steps (5 for 0, 10, 20, 30, 40, 50) and each column is cut by a 0.5 px line where a rule crosses it
+  (North's paper cuts); without it, only the top line cuts.
+- A reference (`__ref`, `--y`): a 1 px salmon dotted line across the plot (`--ws-chart-under-half`), its words 4 above
+  it at the left, 11/14 semibold in the salmon's AA word (`--ws-word-needs`): "Plan $40.03M".
+- The line and its area: one box (`__draw`) holding the hatch and the SVG. The SVG is stretched over the plot
+  (`viewBox="0 0 100 100"`, `preserveAspectRatio="none"`) with strokes that never scale: the line 1.5 navy, round joins;
+  what is still to come (`__ahead`) a dotted 1 px line. The hatch (`__hatch`) is a box clipped to the area under the
+  line (`clip-path: polygon(...)` in the same percentages): hairlines every 4 in the line's tone at 45% (1 px at 22% on
+  a 1x screen, which cannot draw half a pixel).
+- A point (`__point`) is its period's slot, the slot wide, from 12 above its value to the baseline: the pointer's room.
+  Its column (`::before`) is 48% of the slot, 1 px corners at the top, from the value down; never under 2 px, so a zero
+  still shows. Its dot (`::after`) is 8 on the value, ringed 1.5 in the ground so the line parts round it.
+- Tones: `--tone` on the figure (navy by default) for the line, columns and dots; the period in progress (`--now`)
+  takes `--tone-now` (the second navy, `--ws-chart-navy-light`, by default); a period to come (`--ahead`) is a dashed
+  outline column and a hollow dashed dot.
+- Period names (`__x`, a `<span>` each): 11/14 muted, centred on their point, cut with an ellipsis in their slot (give
+  each a `title`); the current one (`__now`) 600 navy.
+- Key (`__legend`, optional): centred, 16 apart, 16 above; a 12 px swatch in the mark's look (`__key--now`,
+  `__key--ahead`, `__key--ref` for the dotted line), 8, 14/20 medium body grey.
+- The reading (`__table`): a real `<table>` of every period and its value, with a caption, hidden from the eye inside
+  the `__table` box. The plot is `aria-hidden`.
+
+**Parts and modifiers**
+
+- `.ws-trend-line--bars`: columns. Without it, the line. Toggling it is the morph.
+- `.ws-trend-line--bare`: the drawing alone for a tile (no gutter, names, rules, key or band; 24 tall; a 1 px line,
+  4 px dots and a 6 px current dot; columns 84% of their slot with 2 px corners). Write it in `<span>`s inside a tile's
+  button, with no table: the tile's own label says it.
+- `__point--now`, `__point--ahead`: the period in progress; a period to come.
+- `__point--on`: the point held open (a tap, or the keyboard's mark when the app moves one); it looks hovered.
+- `__band`: the hover band, last in the plot. `__now`: the current period's name.
+
+**States**
+
+- Resting, line: the line, its hatched area, a dot a period. Resting, columns: the columns and their cuts.
+- Building in (a kit default, 5 Nov 2026): on first paint the chart draws over `--ws-duration-draw` (900 ms). Each
+  column rises from the baseline over the last 45% of it, column i starting at i / (n - 1) of the first 55% on
+  `--ws-ease-settle`; the line and its area are revealed left to right as one progress (`--ws-ease-steady`) and each
+  dot pops on `--ws-ease-pop` as the line reaches it; the reference runs out from the left. In a `.ws-build`
+  card it all starts when its card lands (`--ws-build-at`, Motion's Build-in). A chart below the fold
+  builds as it scrolls in instead, the same moves driven by its own entry into the view (`animation-timeline`, a view
+  timeline: from its top at the window's foot until 80% of it is in), so it is whole by then; scrolled back out the
+  bottom and in again, it builds again. Without view timelines, a chart below the fold is simply whole when it arrives.
+- Switching (Bars / Line, North's "Bars to line morph"): to the line, every column collapses into its top at once on
+  `--ws-spring-morph-chart` (.85 / .06) while the line and its area draw left to right over the draw, and the dots pop
+  on the columns' remains after `--ws-duration-settle`; a column to come fades instead (an outline cannot collapse).
+  Back to columns, the dots go over `--ws-duration-exit`, the line undraws right to left over the settle and each
+  column grows back down from its dot on the spring. The same elements all the way: a switch midway picks up from
+  where it is.
+- Hover or focus (`__point--on` for a tap): the band slides to the period over `--ws-duration-settle` on
+  `--ws-ease-soft` (North's "Chart column highlight slide"). Columns: the band is a navy wash the slot wide and the plot
+  tall, the other columns step back to `--ws-dim` over the hover. Line: the band is a dashed guide from the dot to the
+  baseline, and the dot grows to 1.5 inside a faint halo over `--ws-duration-hover` (North's `r .2s`). The band rides
+  CSS anchor positioning: without it the band is left out and the rest still happens. A `HoverCard`
+  (`--above --follow`) reads the point.
+- Narrow (the figure under 30rem): the plot is 200 tall; with more than six names, every other one and the current
+  one's neighbours give way and the rest take two slots.
+- Zero: every column a 2 px stub on the baseline, every dot on it. One period: a dot (or a column) and no line.
+- Empty (no data yet): the card is left out, as for every chart. Loading: a `ws-shimmer` block the plot's size,
+  `aria-busy="true"`.
+- Reduced motion: nothing moves. The chart is whole at once, the switch and the band change at once.
+
+**Behaviour**
+
+- Pointer: pointing at a period's slot shows its band and its reading; the `HoverCard` follows from period to period
+  on the follow spring and goes 180 ms after the pointer leaves the plot (`--ws-hover-grace`).
+- Touch: a tap on a period sets `__point--on` and shows its card; a tap elsewhere clears it.
+- Keyboard: the chart is read, not operated; its table is the reading. An app that opens a period from its point makes
+  each point focusable (`tabindex="0"`, `role="img"` with its words) and drops `aria-hidden` from the plot: focus then
+  shows the band, the grown dot and the house focus ring round the slot.
+- The switch is a `Segmented` (radios, or buttons with `aria-pressed`) that sets `--bars` on its chart: one line in
+  the app. Its thumb slides as it always does.
+
+**Content**
+
+- The card's title says the answer ("ARR is on pace for the $40.03M plan"); its sentence names what is to come.
+- Value labels are short ($40M, 1.5K): a long figure widens the gutter (`--ws-trend-line-y`), never wraps.
+- A period name is short (Jan, Oct 6, Q4); the table holds the whole words ("October, month to date").
+
+**Rules**
+
+- **One series, one optional reference.** Two lines are two cards.
+- **Columns start at zero.** A chart with the switch, or any columns, has its baseline at 0; a line alone may start
+  above zero only without the hatch (an area claims a whole).
+- **The same data in both modes**: the switch changes the drawing, never the numbers.
+- **Marks keep the exact tone; words take the AA step** (D2): the reference is salmon, its words `--ws-word-needs`.
+- **Never a value only on hover**: the axis reads every period; the card's sentence names the one that matters.
+- **Source**: Seth's North, its revenue chart (the ARR card: plan line, month to date, projected, the Bars / Line
+  toggle, its morph and hover) and the NRR tile's line. Built for 0.5.0 on Amit's ask (5 Nov 2026): "there are four
+  charts, and they look really nice... I don't see any of those in our kit." Overturns 09-charts' "a free line chart:
+  make it thin bars" for a value over periods with an axis.
+
+**Markup**
+
+```html
+<figure class="ws-trend-line ws-trend-line--bars" style="--n: 4; --ticks: 3;" aria-labelledby="calls-t">
+  <div class="ws-trend-line__plot" aria-hidden="true">
+    <div class="ws-trend-line__y"><span style="--y: 0%;">30</span><span style="--y: 33.33%;">20</span><span style="--y: 66.67%;">10</span><span style="--y: 100%;">0</span></div>
+    <div class="ws-trend-line__area">
+      <span class="ws-trend-line__rule" style="--y: 0%;"></span><span class="ws-trend-line__rule" style="--y: 33.33%;"></span><span class="ws-trend-line__rule" style="--y: 66.67%;"></span>
+      <span class="ws-trend-line__draw">
+        <span class="ws-trend-line__hatch" style="clip-path: polygon(12.5% 40%, 37.5% 20%, 62.5% 50%, 87.5% 13.33%, 87.5% 100%, 12.5% 100%);"></span>
+        <svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M12.5 40 L37.5 20 L62.5 50 L87.5 13.33"/></svg>
+      </span>
+      <span class="ws-trend-line__point" style="--i: 0; --y: 40%;"></span>
+      <span class="ws-trend-line__point" style="--i: 1; --y: 20%;"></span>
+      <span class="ws-trend-line__point" style="--i: 2; --y: 50%;"></span>
+      <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 3; --y: 13.33%;"></span>
+      <span class="ws-trend-line__band"></span>
+    </div>
+    <div class="ws-trend-line__x"><span title="Week of 29 September">29 Sep</span><span title="Week of 6 October">6 Oct</span><span title="Week of 13 October">13 Oct</span><span class="ws-trend-line__now" title="Week of 20 October">20 Oct</span></div>
+  </div>
+  <div class="ws-trend-line__table"><table>
+    <caption>Calls by week</caption>
+    <thead><tr><th scope="col">Week</th><th scope="col">Calls</th></tr></thead>
+    <tbody><tr><th scope="row">Week of 29 September</th><td>18 calls</td></tr><!-- a row a period --></tbody>
+  </table></div>
+</figure>
+```
+
+A reference goes after the rules: `<span class="ws-trend-line__ref" style="--y: 19.94%;"><span>Plan $40.03M</span></span>`.
+What is to come: `__point--ahead` on its points, and a second path `<path class="ws-trend-line__ahead" d="...">` from
+the last real point on. The switch, in the card's head:
+
+```html
+<div class="ws-segmented" role="radiogroup" aria-label="Show as">
+  <label class="ws-segmented__item"><input type="radio" name="calls-mode" value="bars" checked>Bars</label>
+  <label class="ws-segmented__item"><input type="radio" name="calls-mode" value="line">Line</label>
+</div>
+<!-- the app: group.onchange = (e) => chart.classList.toggle('ws-trend-line--bars', e.target.value === 'bars') -->
+```
+
+**Styles**: `TrendLine/style.css`, in `bundle.css` and `fello.css` as `.ws-trend-line`. Every value is a token or a calc
+on tokens, except North's own numbers: the dotted line's 0.1 dash (a round cap's dot), the column's 48% of its slot,
+the hatch at 45%, the hovered dot's 1.5 and its halo at 12%, and the build's 55 / 45 share. Tokens: `--ws-duration-draw`,
+`--ws-duration-settle`, `--ws-duration-hover`, `--ws-duration-exit`, `--ws-ease-settle`, `--ws-ease-steady`,
+`--ws-ease-pop`, `--ws-ease-soft`, `--ws-ease-exit`, `--ws-spring-morph-chart` and its duration, `--ws-dim`,
+`--ws-hover`, `--ws-chart-line`, `--ws-chart-navy-light`, `--ws-chart-under-half`, `--ws-word-needs`, `--ws-edge-slot`,
+`--ws-edge-card`.

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

@@ -0,0 +1,373 @@
+<!-- @dsCard group="Charts" height=2320 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>TrendLine</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;">
+    <span class="ws-muted">Columns with the switch: Line collapses each column into its point while the line draws; Bars grows them back. Point along it for the reading.</span>
+    <section class="ws-card ws-card--compound" aria-labelledby="tl-arr-t">
+      <header class="ws-head">
+        <div>
+          <h3 class="ws-title" id="tl-arr-t">ARR is on pace for the $40.03M plan</h3>
+          <p class="ws-body">Ending ARR by month. October is month to date; November and December are projected.</p>
+        </div>
+        <div class="ws-cluster"><button type="button" class="ws-btn ws-btn--secondary ws-btn--sm" data-replay="tl-arr" aria-label="Replay the build-in">Replay</button><div class="ws-segmented" role="radiogroup" aria-label="Show as" data-trend-mode="tl-arr"><label class="ws-segmented__item"><input type="radio" name="tl-arr-mode" value="bars" checked>Bars</label><label class="ws-segmented__item"><input type="radio" name="tl-arr-mode" value="line">Line</label></div></div>
+      </header>
+      <div class="ws-card__body">
+        <figure class="ws-trend-line ws-trend-line--bars" id="tl-arr" style="--n: 12; --ticks: 5;" aria-labelledby="tl-arr-t" data-trend-live>
+          <div class="ws-trend-line__plot" aria-hidden="true">
+            <div class="ws-trend-line__y"><span style="--y: 0%;">$50M</span><span style="--y: 20%;">$40M</span><span style="--y: 40%;">$30M</span><span style="--y: 60%;">$20M</span><span style="--y: 80%;">$10M</span><span style="--y: 100%;">$0M</span></div>
+            <div class="ws-trend-line__area">
+              <span class="ws-trend-line__rule" style="--y: 0%;"></span><span class="ws-trend-line__rule" style="--y: 20%;"></span><span class="ws-trend-line__rule" style="--y: 40%;"></span><span class="ws-trend-line__rule" style="--y: 60%;"></span><span class="ws-trend-line__rule" style="--y: 80%;"></span>
+              <span class="ws-trend-line__ref" style="--y: 19.94%;"><span>Plan $40.03M</span></span>
+              <span class="ws-trend-line__draw">
+                <span class="ws-trend-line__hatch" style="clip-path: polygon(4.17% 50%, 12.5% 48.2%, 20.83% 46.4%, 29.17% 43.8%, 37.5% 41%, 45.83% 38.8%, 54.17% 37.4%, 62.5% 35.88%, 70.83% 31.6%, 79.17% 28.5%, 79.17% 100%, 4.17% 100%);"></span>
+                <svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M4.17 50 L12.5 48.2 L20.83 46.4 L29.17 43.8 L37.5 41 L45.83 38.8 L54.17 37.4 L62.5 35.88 L70.83 31.6 L79.17 28.5"/><path class="ws-trend-line__ahead" d="M79.17 28.5 L87.5 24.2 L95.83 19.94"/></svg>
+              </span>
+              <span class="ws-trend-line__point" style="--i: 0; --y: 50%;"></span>
+              <span class="ws-trend-line__point" style="--i: 1; --y: 48.2%;"></span>
+              <span class="ws-trend-line__point" style="--i: 2; --y: 46.4%;"></span>
+              <span class="ws-trend-line__point" style="--i: 3; --y: 43.8%;"></span>
+              <span class="ws-trend-line__point" style="--i: 4; --y: 41%;"></span>
+              <span class="ws-trend-line__point" style="--i: 5; --y: 38.8%;"></span>
+              <span class="ws-trend-line__point" style="--i: 6; --y: 37.4%;"></span>
+              <span class="ws-trend-line__point" style="--i: 7; --y: 35.88%;"></span>
+              <span class="ws-trend-line__point" style="--i: 8; --y: 31.6%;"></span>
+              <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 9; --y: 28.5%;"></span>
+              <span class="ws-trend-line__point ws-trend-line__point--ahead" style="--i: 10; --y: 24.2%;"></span>
+              <span class="ws-trend-line__point ws-trend-line__point--ahead" style="--i: 11; --y: 19.94%;"></span>
+              <span class="ws-trend-line__band"></span>
+            </div>
+            <div class="ws-trend-line__x"><span title="January">Jan</span><span title="February">Feb</span><span title="March">Mar</span><span title="April">Apr</span><span title="May">May</span><span title="June">Jun</span><span title="July">Jul</span><span title="August">Aug</span><span title="September">Sep</span><span class="ws-trend-line__now" title="October, month to date">Oct</span><span title="November, projected">Nov</span><span title="December, projected">Dec</span></div>
+          </div>
+          <ul class="ws-trend-line__legend" aria-hidden="true"><li>Ending ARR</li><li class="ws-trend-line__key--now">Month to date</li><li class="ws-trend-line__key--ahead">Projected</li><li class="ws-trend-line__key--ref">Plan</li></ul>
+          <div class="ws-trend-line__table"><table>
+            <caption>Ending ARR by month, against the $40.03M plan</caption>
+            <thead><tr><th scope="col">Month</th><th scope="col">Ending ARR</th></tr></thead>
+            <tbody><tr><th scope="row">January</th><td>$25.00M</td></tr><tr><th scope="row">February</th><td>$25.90M</td></tr><tr><th scope="row">March</th><td>$26.80M</td></tr><tr><th scope="row">April</th><td>$28.10M</td></tr><tr><th scope="row">May</th><td>$29.50M</td></tr><tr><th scope="row">June</th><td>$30.60M</td></tr><tr><th scope="row">July</th><td>$31.30M</td></tr><tr><th scope="row">August</th><td>$32.06M</td></tr><tr><th scope="row">September</th><td>$34.20M</td></tr><tr><th scope="row">October, month to date</th><td>$35.75M</td></tr><tr><th scope="row">November, projected</th><td>$37.90M</td></tr><tr><th scope="row">December, projected</th><td>$40.03M</td></tr></tbody>
+          </table></div>
+        </figure>
+      </div>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1194px;">
+    <span class="ws-muted">A line (the default): the line and the hatched area under it, a dot a week, the current week in the second navy</span>
+    <section class="ws-card ws-card--compound" aria-labelledby="tl-calls-t">
+      <header class="ws-head">
+        <div>
+          <h3 class="ws-title" id="tl-calls-t">Calls answered doubled in eight weeks</h3>
+          <p class="ws-body">From 14 in the week of Sep 8 to 31 so far this week.</p>
+        </div>
+        <div class="ws-cluster"><button type="button" class="ws-btn ws-btn--secondary ws-btn--sm" data-replay="tl-calls" aria-label="Replay the draw">Replay</button></div>
+      </header>
+      <div class="ws-card__body">
+        <figure class="ws-trend-line" id="tl-calls" style="--n: 8; --ticks: 4;" aria-labelledby="tl-calls-t" data-trend-live>
+          <div class="ws-trend-line__plot" aria-hidden="true">
+            <div class="ws-trend-line__y"><span style="--y: 0%;">40</span><span style="--y: 25%;">30</span><span style="--y: 50%;">20</span><span style="--y: 75%;">10</span><span style="--y: 100%;">0</span></div>
+            <div class="ws-trend-line__area">
+              <span class="ws-trend-line__rule" style="--y: 0%;"></span><span class="ws-trend-line__rule" style="--y: 25%;"></span><span class="ws-trend-line__rule" style="--y: 50%;"></span><span class="ws-trend-line__rule" style="--y: 75%;"></span>
+              <span class="ws-trend-line__draw">
+                <span class="ws-trend-line__hatch" style="clip-path: polygon(6.25% 65%, 18.75% 52.5%, 31.25% 57.5%, 43.75% 45%, 56.25% 47.5%, 68.75% 32.5%, 81.25% 35%, 93.75% 22.5%, 93.75% 100%, 6.25% 100%);"></span>
+                <svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M6.25 65 L18.75 52.5 L31.25 57.5 L43.75 45 L56.25 47.5 L68.75 32.5 L81.25 35 L93.75 22.5"/></svg>
+              </span>
+              <span class="ws-trend-line__point" style="--i: 0; --y: 65%;"></span>
+              <span class="ws-trend-line__point" style="--i: 1; --y: 52.5%;"></span>
+              <span class="ws-trend-line__point" style="--i: 2; --y: 57.5%;"></span>
+              <span class="ws-trend-line__point" style="--i: 3; --y: 45%;"></span>
+              <span class="ws-trend-line__point" style="--i: 4; --y: 47.5%;"></span>
+              <span class="ws-trend-line__point" style="--i: 5; --y: 32.5%;"></span>
+              <span class="ws-trend-line__point" style="--i: 6; --y: 35%;"></span>
+              <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 7; --y: 22.5%;"></span>
+              <span class="ws-trend-line__band"></span>
+            </div>
+            <div class="ws-trend-line__x"><span title="Week of Sep 8">Sep 8</span><span title="Week of Sep 15">Sep 15</span><span title="Week of Sep 22">Sep 22</span><span title="Week of Sep 29">Sep 29</span><span title="Week of Oct 6">Oct 6</span><span title="Week of Oct 13">Oct 13</span><span title="Week of Oct 20">Oct 20</span><span class="ws-trend-line__now" title="Week of Oct 27">Oct 27</span></div>
+          </div>
+          <div class="ws-trend-line__table"><table>
+            <caption>Calls answered by week</caption>
+            <thead><tr><th scope="col">Week</th><th scope="col">Calls answered</th></tr></thead>
+            <tbody><tr><th scope="row">Week of Sep 8</th><td>14 calls</td></tr><tr><th scope="row">Week of Sep 15</th><td>19 calls</td></tr><tr><th scope="row">Week of Sep 22</th><td>17 calls</td></tr><tr><th scope="row">Week of Sep 29</th><td>22 calls</td></tr><tr><th scope="row">Week of Oct 6</th><td>21 calls</td></tr><tr><th scope="row">Week of Oct 13</th><td>27 calls</td></tr><tr><th scope="row">Week of Oct 20</th><td>26 calls</td></tr><tr><th scope="row">Week of Oct 27</th><td>31 calls</td></tr></tbody>
+          </table></div>
+        </figure>
+      </div>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1194px;">
+    <span class="ws-muted">Hover, held (__point--on): the band behind the column and the rest stepped back; on the line, the guide to the baseline and the grown dot</span>
+    <div class="ws-board">
+      <section class="ws-card ws-card--compound" aria-labelledby="tl-hb-t">
+        <header class="ws-head"><div><h3 class="ws-title" id="tl-hb-t">August added $760K</h3></div></header>
+        <div class="ws-card__body">
+          <figure class="ws-trend-line ws-trend-line--bars" id="tl-hb" style="--n: 12; --ticks: 5;" aria-labelledby="tl-hb-t">
+            <div class="ws-trend-line__plot" aria-hidden="true">
+              <div class="ws-trend-line__y"><span style="--y: 0%;">$50M</span><span style="--y: 20%;">$40M</span><span style="--y: 40%;">$30M</span><span style="--y: 60%;">$20M</span><span style="--y: 80%;">$10M</span><span style="--y: 100%;">$0M</span></div>
+              <div class="ws-trend-line__area">
+                <span class="ws-trend-line__rule" style="--y: 0%;"></span><span class="ws-trend-line__rule" style="--y: 20%;"></span><span class="ws-trend-line__rule" style="--y: 40%;"></span><span class="ws-trend-line__rule" style="--y: 60%;"></span><span class="ws-trend-line__rule" style="--y: 80%;"></span>
+                <span class="ws-trend-line__ref" style="--y: 19.94%;"><span>Plan $40.03M</span></span>
+                <span class="ws-trend-line__draw">
+                  <span class="ws-trend-line__hatch" style="clip-path: polygon(4.17% 50%, 12.5% 48.2%, 20.83% 46.4%, 29.17% 43.8%, 37.5% 41%, 45.83% 38.8%, 54.17% 37.4%, 62.5% 35.88%, 70.83% 31.6%, 79.17% 28.5%, 79.17% 100%, 4.17% 100%);"></span>
+                  <svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M4.17 50 L12.5 48.2 L20.83 46.4 L29.17 43.8 L37.5 41 L45.83 38.8 L54.17 37.4 L62.5 35.88 L70.83 31.6 L79.17 28.5"/><path class="ws-trend-line__ahead" d="M79.17 28.5 L87.5 24.2 L95.83 19.94"/></svg>
+                </span>
+                <span class="ws-trend-line__point" style="--i: 0; --y: 50%;"></span>
+                <span class="ws-trend-line__point" style="--i: 1; --y: 48.2%;"></span>
+                <span class="ws-trend-line__point" style="--i: 2; --y: 46.4%;"></span>
+                <span class="ws-trend-line__point" style="--i: 3; --y: 43.8%;"></span>
+                <span class="ws-trend-line__point" style="--i: 4; --y: 41%;"></span>
+                <span class="ws-trend-line__point" style="--i: 5; --y: 38.8%;"></span>
+                <span class="ws-trend-line__point" style="--i: 6; --y: 37.4%;"></span>
+                <span class="ws-trend-line__point ws-trend-line__point--on" style="--i: 7; --y: 35.88%;"></span>
+                <span class="ws-trend-line__point" style="--i: 8; --y: 31.6%;"></span>
+                <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 9; --y: 28.5%;"></span>
+                <span class="ws-trend-line__point ws-trend-line__point--ahead" style="--i: 10; --y: 24.2%;"></span>
+                <span class="ws-trend-line__point ws-trend-line__point--ahead" style="--i: 11; --y: 19.94%;"></span>
+                <span class="ws-trend-line__band"></span>
+                <div class="ws-hover-card ws-hover-card--above" role="tooltip" style="left: 62.5%; top: 35.88%;"><span class="ws-hover-card__eyebrow"><span class="ws-hover-card__swatch" style="--ws-hover-card-swatch: var(--color-text-heading);"></span><span>August</span></span><span class="ws-hover-card__title">$32.06M</span><span class="ws-hover-card__row"><span class="ws-hover-card__label">Net new</span><span class="ws-hover-card__value">+$760K</span></span></div>
+              </div>
+              <div class="ws-trend-line__x"><span title="January">Jan</span><span title="February">Feb</span><span title="March">Mar</span><span title="April">Apr</span><span title="May">May</span><span title="June">Jun</span><span title="July">Jul</span><span title="August">Aug</span><span title="September">Sep</span><span class="ws-trend-line__now" title="October, month to date">Oct</span><span title="November, projected">Nov</span><span title="December, projected">Dec</span></div>
+            </div>
+            <div class="ws-trend-line__table"><table>
+              <caption>Ending ARR by month, against the $40.03M plan</caption>
+              <thead><tr><th scope="col">Month</th><th scope="col">Ending ARR</th></tr></thead>
+              <tbody><tr><th scope="row">January</th><td>$25.00M</td></tr><tr><th scope="row">February</th><td>$25.90M</td></tr><tr><th scope="row">March</th><td>$26.80M</td></tr><tr><th scope="row">April</th><td>$28.10M</td></tr><tr><th scope="row">May</th><td>$29.50M</td></tr><tr><th scope="row">June</th><td>$30.60M</td></tr><tr><th scope="row">July</th><td>$31.30M</td></tr><tr><th scope="row">August</th><td>$32.06M</td></tr><tr><th scope="row">September</th><td>$34.20M</td></tr><tr><th scope="row">October, month to date</th><td>$35.75M</td></tr><tr><th scope="row">November, projected</th><td>$37.90M</td></tr><tr><th scope="row">December, projected</th><td>$40.03M</td></tr></tbody>
+            </table></div>
+          </figure>
+        </div>
+      </section>
+      <section class="ws-card ws-card--compound" aria-labelledby="tl-hl-t">
+        <header class="ws-head"><div><h3 class="ws-title" id="tl-hl-t">The week of Oct 13 took 27 calls</h3></div></header>
+        <div class="ws-card__body">
+          <figure class="ws-trend-line" id="tl-hl" style="--n: 8; --ticks: 4;" aria-labelledby="tl-hl-t">
+            <div class="ws-trend-line__plot" aria-hidden="true">
+              <div class="ws-trend-line__y"><span style="--y: 0%;">40</span><span style="--y: 25%;">30</span><span style="--y: 50%;">20</span><span style="--y: 75%;">10</span><span style="--y: 100%;">0</span></div>
+              <div class="ws-trend-line__area">
+                <span class="ws-trend-line__rule" style="--y: 0%;"></span><span class="ws-trend-line__rule" style="--y: 25%;"></span><span class="ws-trend-line__rule" style="--y: 50%;"></span><span class="ws-trend-line__rule" style="--y: 75%;"></span>
+                <span class="ws-trend-line__draw">
+                  <span class="ws-trend-line__hatch" style="clip-path: polygon(6.25% 65%, 18.75% 52.5%, 31.25% 57.5%, 43.75% 45%, 56.25% 47.5%, 68.75% 32.5%, 81.25% 35%, 93.75% 22.5%, 93.75% 100%, 6.25% 100%);"></span>
+                  <svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M6.25 65 L18.75 52.5 L31.25 57.5 L43.75 45 L56.25 47.5 L68.75 32.5 L81.25 35 L93.75 22.5"/></svg>
+                </span>
+                <span class="ws-trend-line__point" style="--i: 0; --y: 65%;"></span>
+                <span class="ws-trend-line__point" style="--i: 1; --y: 52.5%;"></span>
+                <span class="ws-trend-line__point" style="--i: 2; --y: 57.5%;"></span>
+                <span class="ws-trend-line__point" style="--i: 3; --y: 45%;"></span>
+                <span class="ws-trend-line__point" style="--i: 4; --y: 47.5%;"></span>
+                <span class="ws-trend-line__point ws-trend-line__point--on" style="--i: 5; --y: 32.5%;"></span>
+                <span class="ws-trend-line__point" style="--i: 6; --y: 35%;"></span>
+                <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 7; --y: 22.5%;"></span>
+                <span class="ws-trend-line__band"></span>
+                <div class="ws-hover-card ws-hover-card--above" role="tooltip" style="left: 68.75%; top: calc(32.5% - var(--ws-trend-line-dot));"><span class="ws-hover-card__eyebrow"><span class="ws-hover-card__swatch" style="--ws-hover-card-swatch: var(--color-text-heading);"></span><span>Week of Oct 13</span></span><span class="ws-hover-card__title">27 calls</span><span class="ws-hover-card__row"><span class="ws-hover-card__label">On the week before</span><span class="ws-hover-card__value">+6</span></span></div>
+              </div>
+              <div class="ws-trend-line__x"><span title="Week of Sep 8">Sep 8</span><span title="Week of Sep 15">Sep 15</span><span title="Week of Sep 22">Sep 22</span><span title="Week of Sep 29">Sep 29</span><span title="Week of Oct 6">Oct 6</span><span title="Week of Oct 13">Oct 13</span><span title="Week of Oct 20">Oct 20</span><span class="ws-trend-line__now" title="Week of Oct 27">Oct 27</span></div>
+            </div>
+            <div class="ws-trend-line__table"><table>
+              <caption>Calls answered by week</caption>
+              <thead><tr><th scope="col">Week</th><th scope="col">Calls answered</th></tr></thead>
+              <tbody><tr><th scope="row">Week of Sep 8</th><td>14 calls</td></tr><tr><th scope="row">Week of Sep 15</th><td>19 calls</td></tr><tr><th scope="row">Week of Sep 22</th><td>17 calls</td></tr><tr><th scope="row">Week of Sep 29</th><td>22 calls</td></tr><tr><th scope="row">Week of Oct 6</th><td>21 calls</td></tr><tr><th scope="row">Week of Oct 13</th><td>27 calls</td></tr><tr><th scope="row">Week of Oct 20</th><td>26 calls</td></tr><tr><th scope="row">Week of Oct 27</th><td>31 calls</td></tr></tbody>
+            </table></div>
+          </figure>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1194px;">
+    <span class="ws-muted">Long labels: period names cut with an ellipsis in their slot (their whole words in the table), a wider gutter for long figures (--ws-trend-line-y)</span>
+    <div class="ws-board">
+      <section class="ws-card ws-card--compound" aria-labelledby="tl-q-t">
+        <header class="ws-head"><div><h3 class="ws-title" id="tl-q-t">Bookings dipped in the fourth quarter</h3></div><div class="ws-segmented" role="radiogroup" aria-label="Show as" data-trend-mode="tl-q"><label class="ws-segmented__item"><input type="radio" name="tl-q-mode" value="bars">Bars</label><label class="ws-segmented__item"><input type="radio" name="tl-q-mode" value="line" checked>Line</label></div></header>
+        <div class="ws-card__body">
+          <figure class="ws-trend-line" id="tl-q" style="--n: 4; --ticks: 3; --ws-trend-line-y: var(--space-3xl);" aria-labelledby="tl-q-t" data-trend-live>
+            <div class="ws-trend-line__plot" aria-hidden="true">
+              <div class="ws-trend-line__y"><span style="--y: 0%;">$1,500K</span><span style="--y: 33.33%;">$1,000K</span><span style="--y: 66.67%;">$500K</span><span style="--y: 100%;">$0K</span></div>
+              <div class="ws-trend-line__area">
+                <span class="ws-trend-line__rule" style="--y: 0%;"></span><span class="ws-trend-line__rule" style="--y: 33.33%;"></span><span class="ws-trend-line__rule" style="--y: 66.67%;"></span>
+                <span class="ws-trend-line__draw">
+                  <span class="ws-trend-line__hatch" style="clip-path: polygon(12.5% 45.33%, 37.5% 30.67%, 62.5% 16.67%, 87.5% 21.33%, 87.5% 100%, 12.5% 100%);"></span>
+                  <svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M12.5 45.33 L37.5 30.67 L62.5 16.67 L87.5 21.33"/></svg>
+                </span>
+                <span class="ws-trend-line__point" style="--i: 0; --y: 45.33%;"></span>
+                <span class="ws-trend-line__point" style="--i: 1; --y: 30.67%;"></span>
+                <span class="ws-trend-line__point" style="--i: 2; --y: 16.67%;"></span>
+                <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 3; --y: 21.33%;"></span>
+                <span class="ws-trend-line__band"></span>
+              </div>
+              <div class="ws-trend-line__x"><span title="First quarter 2026">First quarter 2026</span><span title="Second quarter 2026">Second quarter 2026</span><span title="Third quarter 2026">Third quarter 2026</span><span class="ws-trend-line__now" title="Fourth quarter 2026">Fourth quarter 2026</span></div>
+            </div>
+            <div class="ws-trend-line__table"><table>
+              <caption>Bookings by quarter</caption>
+              <thead><tr><th scope="col">Quarter</th><th scope="col">Bookings</th></tr></thead>
+              <tbody><tr><th scope="row">First quarter 2026</th><td>$820K</td></tr><tr><th scope="row">Second quarter 2026</th><td>$1,040K</td></tr><tr><th scope="row">Third quarter 2026</th><td>$1,250K</td></tr><tr><th scope="row">Fourth quarter 2026</th><td>$1,180K</td></tr></tbody>
+            </table></div>
+          </figure>
+        </div>
+      </section>
+      <section class="ws-card ws-card--compound" aria-labelledby="tl-z-t">
+        <header class="ws-head"><div><h3 class="ws-title" id="tl-z-t">No replies yet this week</h3></div><div class="ws-segmented" role="radiogroup" aria-label="Show as" data-trend-mode="tl-z"><label class="ws-segmented__item"><input type="radio" name="tl-z-mode" value="bars" checked>Bars</label><label class="ws-segmented__item"><input type="radio" name="tl-z-mode" value="line">Line</label></div></header>
+        <div class="ws-card__body">
+          <figure class="ws-trend-line ws-trend-line--bars" id="tl-z" style="--n: 5; --ticks: 2;" aria-labelledby="tl-z-t" data-trend-live>
+            <div class="ws-trend-line__plot" aria-hidden="true">
+              <div class="ws-trend-line__y"><span style="--y: 0%;">10</span><span style="--y: 50%;">5</span><span style="--y: 100%;">0</span></div>
+              <div class="ws-trend-line__area">
+                <span class="ws-trend-line__rule" style="--y: 0%;"></span><span class="ws-trend-line__rule" style="--y: 50%;"></span>
+                <span class="ws-trend-line__draw">
+                  <span class="ws-trend-line__hatch" style="clip-path: polygon(10% 100%, 30% 100%, 50% 100%, 70% 100%, 90% 100%, 90% 100%, 10% 100%);"></span>
+                  <svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M10 100 L30 100 L50 100 L70 100 L90 100"/></svg>
+                </span>
+                <span class="ws-trend-line__point" style="--i: 0; --y: 100%;"></span>
+                <span class="ws-trend-line__point" style="--i: 1; --y: 100%;"></span>
+                <span class="ws-trend-line__point" style="--i: 2; --y: 100%;"></span>
+                <span class="ws-trend-line__point" style="--i: 3; --y: 100%;"></span>
+                <span class="ws-trend-line__point" style="--i: 4; --y: 100%;"></span>
+                <span class="ws-trend-line__band"></span>
+              </div>
+              <div class="ws-trend-line__x"><span title="Mon">Mon</span><span title="Tue">Tue</span><span title="Wed">Wed</span><span title="Thu">Thu</span><span title="Fri">Fri</span></div>
+            </div>
+            <div class="ws-trend-line__table"><table>
+              <caption>Replies by day this week</caption>
+              <thead><tr><th scope="col">Day</th><th scope="col">Replies</th></tr></thead>
+              <tbody><tr><th scope="row">Mon</th><td>0 replies</td></tr><tr><th scope="row">Tue</th><td>0 replies</td></tr><tr><th scope="row">Wed</th><td>0 replies</td></tr><tr><th scope="row">Thu</th><td>0 replies</td></tr><tr><th scope="row">Fri</th><td>0 replies</td></tr></tbody>
+            </table></div>
+          </figure>
+        </div>
+      </section>
+      <section class="ws-card ws-card--compound" aria-labelledby="tl-f-t">
+        <header class="ws-head"><div><h3 class="ws-title" id="tl-f-t">12 sign-ups in the first week</h3></div></header>
+        <div class="ws-card__body">
+          <figure class="ws-trend-line" id="tl-f" style="--n: 1; --ticks: 2;" aria-labelledby="tl-f-t" data-trend-live>
+            <div class="ws-trend-line__plot" aria-hidden="true">
+              <div class="ws-trend-line__y"><span style="--y: 0%;">20</span><span style="--y: 50%;">10</span><span style="--y: 100%;">0</span></div>
+              <div class="ws-trend-line__area">
+                <span class="ws-trend-line__rule" style="--y: 0%;"></span><span class="ws-trend-line__rule" style="--y: 50%;"></span>
+                <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 0; --y: 40%;"></span>
+                <span class="ws-trend-line__band"></span>
+              </div>
+              <div class="ws-trend-line__x"><span class="ws-trend-line__now" title="Week 1">Week 1</span></div>
+            </div>
+            <div class="ws-trend-line__table"><table>
+              <caption>Sign-ups by week</caption>
+              <thead><tr><th scope="col">Week</th><th scope="col">Sign-ups</th></tr></thead>
+              <tbody><tr><th scope="row">Week 1</th><td>12 sign-ups</td></tr></tbody>
+            </table></div>
+          </figure>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1194px;">
+    <span class="ws-muted">In a tile (--bare): the line or the columns alone in a MetricTile's preview, greyed until the tile wakes</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="Net revenue retention, 99.9%, on 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__preview" aria-hidden="true"><span class="ws-trend-line ws-trend-line--bare" style="--n: 6;" aria-hidden="true">
+          <span class="ws-trend-line__plot">
+            <span class="ws-trend-line__area">
+              <span class="ws-trend-line__draw">
+                <svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M8.33 63.33 L25 53.33 L41.67 40 L58.33 60 L75 23.33 L91.67 36.67"/></svg>
+              </span>
+              <span class="ws-trend-line__point" style="--i: 0; --y: 63.33%;"></span>
+              <span class="ws-trend-line__point" style="--i: 1; --y: 53.33%;"></span>
+              <span class="ws-trend-line__point" style="--i: 2; --y: 40%;"></span>
+              <span class="ws-trend-line__point" style="--i: 3; --y: 60%;"></span>
+              <span class="ws-trend-line__point" style="--i: 4; --y: 23.33%;"></span>
+              <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 5; --y: 36.67%;"></span>
+            </span>
+          </span>
+        </span></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" aria-label="Net new ARR, $1.55M, 87% of pace. Open">
+          <span class="ws-metric-tile__surface">
+            <span class="ws-metric-tile__head"><span class="ws-metric-tile__label">Net new ARR</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__preview" aria-hidden="true"><span class="ws-trend-line ws-trend-line--bars ws-trend-line--bare" style="--n: 6;" aria-hidden="true">
+          <span class="ws-trend-line__plot">
+            <span class="ws-trend-line__area">
+              <span class="ws-trend-line__draw">
+                <span class="ws-trend-line__hatch" style="clip-path: polygon(8.33% 19.33%, 25% 12%, 41.67% 6.67%, 58.33% 28%, 75% 13.33%, 91.67% 40%, 91.67% 100%, 8.33% 100%);"></span>
+                <svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M8.33 19.33 L25 12 L41.67 6.67 L58.33 28 L75 13.33 L91.67 40"/></svg>
+              </span>
+              <span class="ws-trend-line__point" style="--i: 0; --y: 19.33%;"></span>
+              <span class="ws-trend-line__point" style="--i: 1; --y: 12%;"></span>
+              <span class="ws-trend-line__point" style="--i: 2; --y: 6.67%;"></span>
+              <span class="ws-trend-line__point" style="--i: 3; --y: 28%;"></span>
+              <span class="ws-trend-line__point" style="--i: 4; --y: 13.33%;"></span>
+              <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 5; --y: 40%;"></span>
+            </span>
+          </span>
+        </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>
+<script>
+  /* The preview's live parts. Bars / Line: the switch sets --bars on its chart. Replay: a fresh copy of the chart runs
+     its build-in again. The reading: pointing at a period (or a tap) places a HoverCard over its point from the
+     chart's own table; it pops on the pop spring, follows on the follow spring and goes 180 ms after the pointer leaves. */
+  const $$ = (s, el = document) => [...el.querySelectorAll(s)];
+  for (const group of $$('[data-trend-mode]')) group.addEventListener('change', (e) => {
+    document.getElementById(group.dataset.trendMode).classList.toggle('ws-trend-line--bars', e.target.value === 'bars');
+  });
+  const live = (fig) => {
+    const area = fig.querySelector('.ws-trend-line__area'), rows = $$('tbody tr', fig), n = rows.length;
+    let card = null, leave = 0;
+    const show = (pt) => {
+      clearTimeout(leave);
+      const i = Number(pt.style.getPropertyValue('--i')), x = ((i + 0.5) / n) * 100;
+      for (const p of $$('.ws-trend-line__point--on', area)) if (p !== pt) p.classList.remove('ws-trend-line__point--on');
+      if (!card || card.hasAttribute('data-leaving')) {
+        card?.remove();
+        card = document.createElement('div');
+        card.className = 'ws-hover-card ws-hover-card--above ws-hover-card--follow';
+        card.setAttribute('role', 'tooltip');
+        card.innerHTML = '<span class="ws-hover-card__eyebrow"><span class="ws-hover-card__swatch" style="--ws-hover-card-swatch: var(--color-text-heading);"></span><span></span></span><span class="ws-hover-card__title"></span>';
+        area.append(card);
+      }
+      card.style.left = x + '%';
+      card.style.top = 'calc(' + pt.style.getPropertyValue('--y') + ' - ' + (fig.classList.contains('ws-trend-line--bars') ? '0px' : 'var(--ws-trend-line-dot)') + ')';
+      card.classList.toggle('ws-hover-card--start', x < 25);
+      card.classList.toggle('ws-hover-card--end', x > 75);
+      card.querySelector('.ws-hover-card__eyebrow > span:last-child').textContent = rows[i].querySelector('th').textContent;
+      card.querySelector('.ws-hover-card__title').textContent = rows[i].querySelector('td').textContent;
+    };
+    const hide = () => {
+      clearTimeout(leave);
+      leave = setTimeout(() => {
+        const c = card;
+        card = null;
+        c?.setAttribute('data-leaving', '');
+        setTimeout(() => c?.remove(), 120);
+        for (const p of $$('.ws-trend-line__point--on', area)) p.classList.remove('ws-trend-line__point--on');
+      }, 180);
+    };
+    for (const pt of $$('.ws-trend-line__point', area)) {
+      pt.addEventListener('pointerenter', (e) => { if (e.pointerType === 'mouse') show(pt); });
+      pt.addEventListener('click', () => { pt.classList.add('ws-trend-line__point--on'); show(pt); });
+    }
+    area.addEventListener('pointerleave', (e) => { if (e.pointerType === 'mouse') hide(); });
+    document.addEventListener('pointerdown', (e) => { if (e.pointerType !== 'mouse' && card && !area.contains(e.target)) hide(); });
+  };
+  for (const fig of $$('[data-trend-live]')) live(fig);
+  for (const b of $$('[data-replay]')) b.addEventListener('click', () => {
+    const fig = document.getElementById(b.dataset.replay), copy = fig.cloneNode(true);
+    fig.replaceWith(copy);
+    if (copy.hasAttribute('data-trend-live')) live(copy);
+  });
+</script>
+</body>
+</html>