@felloinnovations/brand-kit 0.5.0 → 0.5.3

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

@@ -25,7 +25,9 @@ a phone fold. This is the whole wide-table pattern; build every records table fr
   and takes the card's corners). A wide table scrolls inside its card, never the page.
 - Every cell: 8 px above and below (`--space-xs`), 12 at the sides (`--space-sm`), one line (`white-space: nowrap`, so
   a squeezed table scrolls instead of breaking every cell to a word a line). A cell that may wrap takes `ws-table__wrap`
-  (at least 200 wide).
+  (at least 200 wide: one long column of words); several short prose columns (a note, a reason, a description) take
+  `ws-table__prose`, which wraps at whatever width the column gets, with no floor, so five columns still fit the card.
+  Put either on the `th` and every `td` of the column.
 - The outer cells sit on the card's 20 px edge (`--ws-card-inset`): the first cell's left and the last cell's right, so
   the table lines up with the card's head, band and pagination.
 - Head: rows at least 40 (`--ws-row-h-dense`), 13 / 18 medium muted labels (`--ws-text-control`, `--color-text-muted`),
@@ -81,7 +83,7 @@ a phone fold. This is the whole wide-table pattern; build every records table fr
   stuck columns leave the sliding ones over 100 px, not a sliver. A name that fits keeps its one line.
 - **Empty, no matches**: the same card, a sentence and the act that clears the filter (`__empty`).
 - **Empty, first use**: the same card, a sentence inviting the first record and the act that adds one.
-- **Loading**: a ghost bar per cell in the chart colours' sweep (`__placeholder ws-shimmer`), the head shown at once;
+- **Loading**: a ghost bar per cell under the shimmer (`__placeholder ws-shimmer`), the head shown at once;
   still under reduced motion.
 - **Touch**: the check target, the More act and the row acts reach 40, the sort button 24.
 
@@ -120,7 +122,7 @@ a phone fold. This is the whole wide-table pattern; build every records table fr
   "Rows vs table"), and it always shows that it scrolls: the shade and the fade.
 - **One content edge per card**: the first and last cells sit on the card's 20 px edge, like its head (K8).
 - **Numbers line up through fixed numeric columns** (North, A4), right-aligned, tabular, the `th` included.
-- **Every row is one line**: a squeezed table scrolls; only a cell marked `__wrap` breaks, and under 30rem the stuck
+- **Every row is one line**: a squeezed table scrolls; only a cell marked `__wrap` or `__prose` breaks, and under 30rem the stuck
   name, which would otherwise leave no room for the columns sliding under it.
 - **A selected row never changes colour alone**: the navy mark travels with the tint.
 - **Row acts are always in the DOM**: hover-to-reveal is cosmetic only.
@@ -173,5 +175,7 @@ columns with no cue, cells 12 in against the card's 20, no vertical padding, no
 
 `design-system/components/Table/style.css`, in `bundle.css` and `fello.css`. Light, dark and the navy ground come from
 the tokens (`--color-bg-page`, `--ws-surface-sunk`, `--ws-hover-faint`, `--ws-divider`); a table on another surface
-sets `--ws-table-ground`. The card is a size container named `ws-table`, so it needs the width of its column (a card in
+sets `--ws-table-ground` to that surface's token, on the `ws-table` element: a white card or panel
+`var(--color-surface)`, a raised panel or menu `var(--ws-raised)`, a plate `var(--ws-surface-sunk)`. A product card
+is the cream already, so it needs nothing. The card is a size container named `ws-table`, so it needs the width of its column (a card in
 a shrink-to-fit row collapses: give it a width). The edge cues use scroll-driven animations where the browser has them.

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

@@ -151,7 +151,7 @@
     </figure>
 
     <div class="ws-stack" style="width: 300px;">
-      <span class="ws-muted">Loading: ghost bars in the chart colours' sweep, the head shown at once</span>
+      <span class="ws-muted">Loading: ghost bars under the shimmer, the head shown at once</span>
       <section class="ws-card ws-table" aria-busy="true" aria-label="Leads, loading">
         <div class="ws-table__scroll">
           <table>
@@ -166,6 +166,21 @@
       </section>
     </div>
 
+    <div class="ws-stack" style="width: min(100%, 560px);">
+      <span class="ws-muted">Short prose columns (__prose): each wraps at the width its column gets, with no 200 px floor; on a phone the rest still scrolls</span>
+      <section class="ws-card ws-table" aria-label="Ads review">
+        <div class="ws-table__scroll">
+          <table>
+            <thead><tr><th scope="col" class="ws-table__name">Ad</th><th scope="col" class="ws-table__prose">Reason</th><th scope="col" class="ws-table__prose">Note</th><th scope="col" class="ws-table__num">Spend</th></tr></thead>
+            <tbody>
+              <tr><td class="ws-table__name">Spring open house</td><td class="ws-table__prose">The image is mostly words</td><td class="ws-table__prose">Swap in the porch photo</td><td class="ws-table__num">$420</td></tr>
+              <tr><td class="ws-table__name">First-time buyers</td><td class="ws-table__prose">Approved</td><td class="ws-table__prose">Runs through Friday</td><td class="ws-table__num">$1,180</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+
     <div class="ws-stack" style="width: 300px;">
       <span class="ws-muted">Empty, no matches: the same card, the act that clears the filter</span>
       <section class="ws-card ws-table" aria-label="Leads, no matches">

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

@@ -19,6 +19,8 @@
 .ws-table tr > :first-child { padding-left: var(--ws-card-inset); }
 .ws-table tr > :last-child { padding-right: var(--ws-card-inset); }
 .ws-table .ws-table__wrap { white-space: normal; min-width: var(--space-9xl); }
+/* A short prose cell (a note, a reason) that wraps at whatever width its column gets, with no floor (#21). */
+.ws-table .ws-table__prose { white-space: normal; text-wrap: pretty; }
 /* Head: 13 / 18 medium muted labels, stuck to the top of the scroller. */
 .ws-table thead th { position: sticky; top: 0; z-index: 2; height: var(--ws-row-h-dense); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-muted); border-bottom: var(--ws-divider); }
 .ws-table thead th[aria-sort="ascending"], .ws-table thead th[aria-sort="descending"] { color: var(--color-text-heading); }
@@ -97,7 +99,7 @@
   .ws-table .ws-table__more { display: inline-flex; }
   .ws-table .ws-table__name { min-width: 40cqi; white-space: normal; }
 }
-/* Loading: a ghost bar in each cell, in the chart colours' sweep (add ws-shimmer), the head shown at once. */
+/* Loading: a ghost bar in each cell under the shimmer (add ws-shimmer), the head shown at once. */
 .ws-table__placeholder { height: calc(var(--space-xs) + var(--space-3xs)); border-radius: var(--ws-radius-bar); background: var(--ws-track); }
 .ws-table__placeholder.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
 /* Empty: the same card, a sentence and the act that clears the filter. */

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

@@ -0,0 +1,96 @@
+Two versions of a text side by side in one place: what was removed and what was added, by line or inside the words,
+told apart by a sign, a strike or an underline as well as by colour.
+
+## Use it when
+
+- A person checks a change to text before accepting it, or looks back at what changed: a prompt before and after an
+  edit, a proposed rewrite of a blog body, a saved version against the current one.
+- The point is the change itself, not either version alone.
+
+## Not for
+
+- A number that went up or down: a `ChangeChip` or the chart's own moment.
+- A list of what someone did and when: `Timeline`.
+- Showing one version: plain text in the card, with "Version of Nov 9" in its meta.
+
+## Anatomy
+
+- **By line** (`ws-diff`): a framed block on the field's white ground (the fine edge drawn inside, 4 px corners), 14 /
+  20 body words, line breaks kept (`pre-wrap`). Each line (`__line`) is a 16 px sign column (`__sign`), 8 apart, then
+  the words; 2 / 12 inside.
+  - A removed line (`<del class="ws-diff__line ws-diff__line--removed">`): the needs tint (`--ws-tint-needs`), its words
+    and its minus sign in the needs word (`--ws-word-needs`). Not struck: the old words stay easy to read.
+  - An added line (`<ins class="ws-diff__line ws-diff__line--added">`): the live tint (`--ws-tint-live`), its words and
+    its plus sign in the positive word (`--ws-word-positive`).
+  - An unchanged line: no ground, no sign, the body's words.
+  - A folded run of unchanged lines (`__skip`): one row on the sunk ground, the whole row the act ("6 unchanged
+    lines"), its words in the text column, navy medium in the meta size, the wash under the pointer, 24 tall (40 on
+    touch). Pressed, the run opens in its place (`aria-expanded`).
+- **Inline** (`ws-diff__del`, `ws-diff__ins` inside a `ws-body` paragraph): removed words on the needs tint, in the
+  needs word, struck through; added words on the live tint, in the positive word, underlined. 2 px corners.
+- Every change says itself to a screen reader: a hidden word first inside each `del` and `ins`
+  (`<span class="ws-sr">Removed: </span>`), because most screen readers do not announce the elements themselves.
+- The card around it says what is compared ("Version of Nov 9 against the current one") and the count ("1 line
+  removed, 2 added") in its meta.
+
+## Variants and sizes
+
+| Variant | Use | Notes |
+| --- | --- | --- |
+| By line (`ws-diff`) | a prompt, a list, a template, any text whose lines matter | unchanged runs of more than 3 lines fold, keeping 1 line of context on each side |
+| Inline (`__del`, `__ins`) | a paragraph rewritten in places | when most words stay; a rewrite of most of it reads better by line |
+
+## States
+
+- **Folded**: unchanged runs behind their `__skip` row; the card's act "Show the whole prompt" opens them all.
+- **Open**: every line shown, the changes still marked.
+- **No changes**: no diff; one line in the card ("No changes since Nov 9").
+- **Long line**: wraps inside its column, under its own words, never under the sign; never a sideways scroll.
+- **Dark**: the tints and the words take their dark values (AA on each tint).
+
+## Behaviour
+
+- Keyboard: each `__skip` row is a button (Enter or Space opens its run); nothing else in a diff is a stop.
+- The diff is computed by the app (by line or by word); the component only draws it. Lines keep their order: a changed
+  line is its removed version, then its added one.
+- Copying a diff copies its words, not its signs (`user-select: none` on the sign).
+- Motion: an opened run rises in (`ws-arrive` on its lines); still under reduced motion.
+
+## Content
+
+- Say what is compared and when ("Version of Nov 9 against the current one"), never "Old" and "New".
+- The count in words: "1 line removed, 2 added", "3 changes".
+
+## Rules
+
+- Never colour alone: a removed line has its minus, an added one its plus; inline, removed is struck and added
+  underlined. An underline inside a diff means added, never a link: a diff holds no links.
+- Removed is the needs tone, added the live tone, both at their AA word steps. Never the alert red, never a raw green.
+- One diff per card, and the card says what it compares.
+
+## Source
+
+- **Derived from**: the kit's needs and live tints and their AA words (Colour), the field's ground and edge (`Input`),
+  `Plate`'s sunk ground for the folded run.
+- **Precedent**: Marketing OS (ContentOS): the prompt diff, the SEO refresh's body changes and the content version
+  history, each hand-built on app-local error and success tints (issue #28, Madan, 10 Nov 2026).
+
+## Markup
+
+```html
+<!-- By line -->
+<div class="ws-diff" role="group" aria-label="Changes to the prompt">
+  <div class="ws-diff__line"><span class="ws-diff__sign" aria-hidden="true"></span><span>You write follow-up emails for real estate agents.</span></div>
+  <button type="button" class="ws-diff__skip" aria-expanded="false"><span>6 unchanged lines</span></button>
+  <del class="ws-diff__line ws-diff__line--removed"><span class="ws-diff__sign" aria-hidden="true">&minus;</span><span><span class="ws-sr">Removed: </span>Keep every email under 200 words.</span></del>
+  <ins class="ws-diff__line ws-diff__line--added"><span class="ws-diff__sign" aria-hidden="true">+</span><span><span class="ws-sr">Added: </span>Keep every email under 120 words.</span></ins>
+</div>
+
+<!-- Inline -->
+<p class="ws-body">Spring is <del class="ws-diff__del"><span class="ws-sr">removed: </span>usually</del> <ins class="ws-diff__ins"><span class="ws-sr">added: </span>still</ins> the busiest season.</p>
+```
+
+## Styles
+
+`design-system/components/TextDiff/style.css`: `ws-diff`, `__line` (`--removed`, `--added`), `__sign`, `__skip`,
+`__del`, `__ins`.

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

@@ -0,0 +1,42 @@
+<!-- @dsCard group="Data" height=620 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>TextDiff</title>
+<link rel="stylesheet" href="../../tokens.css">
+<link rel="stylesheet" href="../bundle.css">
+</head>
+<body>
+<div class="ws-stage">
+  <div class="ws-stack" style="width: 460px;">
+    <span class="ws-muted">By line: a prompt before and after an edit, the unchanged run folded</span>
+    <div class="ws-card ws-card--pad-md ws-stack ws-stack--loose">
+      <div class="ws-stack ws-stack--tight">
+        <h3 class="ws-section">What changes in the prompt</h3>
+        <p class="ws-meta">1 line removed, 2 added</p>
+      </div>
+      <div class="ws-diff" role="group" aria-label="Changes to the prompt">
+        <div class="ws-diff__line"><span class="ws-diff__sign" aria-hidden="true"></span><span>You write follow-up emails for real estate agents.</span></div>
+        <button type="button" class="ws-diff__skip" aria-expanded="false"><span>6 unchanged lines</span></button>
+        <del class="ws-diff__line ws-diff__line--removed"><span class="ws-diff__sign" aria-hidden="true">&minus;</span><span><span class="ws-sr">Removed: </span>Keep every email under 200 words.</span></del>
+        <ins class="ws-diff__line ws-diff__line--added"><span class="ws-diff__sign" aria-hidden="true">+</span><span><span class="ws-sr">Added: </span>Keep every email under 120 words.</span></ins>
+        <ins class="ws-diff__line ws-diff__line--added"><span class="ws-diff__sign" aria-hidden="true">+</span><span><span class="ws-sr">Added: </span>Name the listing in the first line.</span></ins>
+        <div class="ws-diff__line"><span class="ws-diff__sign" aria-hidden="true"></span><span>Sign off with the agent's first name.</span></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 460px;">
+    <span class="ws-muted">Inline: a proposed rewrite of a blog paragraph, removed words struck, added words underlined</span>
+    <div class="ws-card ws-card--pad-md ws-stack ws-stack--loose">
+      <div class="ws-stack ws-stack--tight">
+        <h3 class="ws-section">Suggested rewrite</h3>
+        <p class="ws-meta">Version of Nov 9 against the current one</p>
+      </div>
+      <p class="ws-body">Spring is <del class="ws-diff__del"><span class="ws-sr">removed: </span>usually</del> <ins class="ws-diff__ins"><span class="ws-sr">added: </span>still</ins> the busiest season for listings in Ohio, and buyers who <del class="ws-diff__del"><span class="ws-sr">removed: </span>start looking in January</del> <ins class="ws-diff__ins"><span class="ws-sr">added: </span>get pre-approved by February</ins> close first.</p>
+    </div>
+  </div>
+</div>
+</body>
+</html>

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

@@ -0,0 +1,21 @@
+/* ---- TextDiff: two versions of a text, what was removed and what was added, told apart by more than colour. By line
+   (`ws-diff`): a framed block, each changed line on its tint with a sign in a 16 px gutter (minus removed, plus added),
+   unchanged runs folded behind a quiet act. Inline (`ws-diff__del`, `ws-diff__ins` in running words): removed words on
+   the needs tint and struck, added words on the live tint and underlined. Every change also says itself to a screen
+   reader (a ws-sr word inside the del or the ins). ---- */
+.ws-diff { display: grid; min-width: 0; overflow: clip; border-radius: var(--ws-radius-control); background: var(--ws-field); box-shadow: var(--ws-shadow-hairline-in); color: var(--color-text-body); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); }
+.ws-diff__line { display: grid; grid-template-columns: var(--space-md) minmax(0, 1fr); column-gap: var(--space-xs); padding: var(--space-3xs) var(--space-sm); white-space: pre-wrap; overflow-wrap: anywhere; text-decoration: none; }
+.ws-diff__sign { font-weight: 600; text-align: center; user-select: none; }
+.ws-diff__line--removed { background: var(--ws-tint-needs); color: var(--ws-word-needs); }
+.ws-diff__line--added { background: var(--ws-tint-live); color: var(--ws-word-positive); }
+/* An unchanged run folded: the row itself is the act (it opens the run), on the sunk ground, its words in the text
+   column saying how many lines it holds, the wash under the pointer. */
+.ws-diff__skip { display: grid; grid-template-columns: var(--space-md) minmax(0, 1fr); column-gap: var(--space-xs); width: 100%; min-height: var(--space-lg); padding: var(--space-3xs) var(--space-sm); border: 0; background: var(--ws-surface-sunk); color: var(--color-text-heading); font: inherit; font-size: var(--ws-text-meta); font-weight: 500; text-align: start; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-diff__skip > * { grid-column: 2; }
+@media (pointer: coarse) { .ws-diff__skip { min-height: var(--ws-touch); } }
+@media (hover: hover) { .ws-diff__skip:hover { background-image: linear-gradient(var(--ws-hover), var(--ws-hover)); } }
+.ws-diff__skip:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+/* Inline: changed words inside a sentence. */
+.ws-diff__del, .ws-diff__ins { border-radius: calc(var(--ws-radius-control) / 2); text-decoration-thickness: var(--ws-line); }
+.ws-diff__del { background: var(--ws-tint-needs); color: var(--ws-word-needs); text-decoration-line: line-through; }
+.ws-diff__ins { background: var(--ws-tint-live); color: var(--ws-word-positive); text-decoration-line: underline; text-underline-offset: var(--space-3xs); }

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

@@ -55,7 +55,7 @@ A share drawn as equal ticks across the whole width: the done ones in one tone,
 - Draw (`--draw`): one 900 ms draw (`--ws-duration-draw`); tick i starts at its share of the first 55% and rises from
   its foot on `--ws-ease-settle`. Set `--i` on each lit tick.
 - Not checked or zero: every tick the track; the figure beside it says so in words (a dash, "Could not check").
-- Loading (`--loading`): the ticks as a still ghost with the chart colours' sweep (`--ws-shimmer`, 1.8 s). The ticks
+- Loading (`--loading`): the ticks as a still ghost with the shimmer passing over them (`--ws-shimmer`, 1.8 s). The ticks
   inside are hidden, so the ghost has the strip's exact shape.
 - Hover (`--hover`, opt in): the tick under the pointer grows to 116% from its foot on `--ws-ease-lift`, its two
   neighbours half as much 4 ms later, the rest dim to 30%. Only with a hovering pointer.

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

@@ -46,7 +46,7 @@
   </div>
 
   <div class="ws-stack">
-    <span class="ws-muted">Loading: the ticks as a ghost with the chart colours' sweep (still with reduced motion)</span>
+    <span class="ws-muted">Loading: the ticks as a ghost with the shimmer passing over them (still with reduced motion)</span>
     <div class="ws-tick-strip ws-tick-strip--lg ws-tick-strip--loading" style="--n: 50;" aria-hidden="true"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
   </div>
 

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

@@ -24,7 +24,7 @@
 .ws-tick-strip__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ws-text-micro); line-height: var(--space-sm-plus); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
 .ws-tick-strip__marker { position: absolute; top: 0; left: var(--at, 0%); display: flex; align-items: center; gap: var(--space-xxs-plus); white-space: nowrap; font-size: var(--ws-text-micro); font-weight: 500; line-height: var(--space-sm-plus); color: var(--ws-word-needs); }
 .ws-tick-strip__marker::before { content: ""; width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-full); background: var(--ws-chart-under-half); }
-/* Loading (North): the ticks as a still ghost, the chart colours' sweep passing over them. */
+/* Loading (North): the ticks as a still ghost, the shimmer passing over them. */
 .ws-tick-strip--loading { --pitch: calc((100% + var(--g)) / var(--n)); background: var(--ws-shimmer); background-size: 300% 100%; -webkit-mask-image: repeating-linear-gradient(90deg, var(--ws-mask) 0 calc(var(--pitch) - var(--g)), transparent 0 var(--pitch)); mask-image: repeating-linear-gradient(90deg, var(--ws-mask) 0 calc(var(--pitch) - var(--g)), transparent 0 var(--pitch)); }
 .ws-tick-strip--loading > * { visibility: hidden; }
 @media (prefers-reduced-motion: no-preference) {

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

@@ -7,7 +7,9 @@ A vertical feed of what happened, grouped by day, a coloured dot on a fine line
 
 ## Not for
 
-- A sequence of steps still in progress toward an end: use `Stepper`.
+- A sequence of steps still in progress toward an end: use `Stepper`; a thing's stages across its head: `Stepper --across`.
+- A few dated milestones on one row (signed, first value): use `Stepper --milestones`.
+- A plan's phases across their dates: use `PlanTimeline`. Things that fall on a day (posts, sends): use `Calendar`.
 - A list of records to compare or act on: use `Table` or rows in a `Card`.
 - A single moment worth calling out inside a chart: use `TrendBars`' own labelled moment.
 
@@ -40,7 +42,7 @@ A vertical feed of what happened, grouped by day, a coloured dot on a fine line
 - **An entry that opens something**: the title is a link (`a.ws-timeline__title`, medium), underlined on hover; on
   touch its box grows to 24 without moving anything.
 - **Empty**: the same card, a sentence ("Nothing here yet") in place of the list; never a bare line with no dots.
-- **Loading**: ghost lines where the titles go, in the chart colours' sweep (`__ghost ws-shimmer`), the dots plain grey;
+- **Loading**: ghost lines where the titles go under the shimmer (`__ghost ws-shimmer`), the dots plain grey;
   still under reduced motion.
 - **Long title**: wraps; a history entry is read once and should say the whole thing.
 - **Many entries**: the feed scrolls inside its card past a comfortable length; it is never paginated.

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

@@ -1,4 +1,4 @@
-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.
+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; up to three series in one unit as lines with a key.
 
 **Use it when**
 
@@ -7,13 +7,17 @@ A value over periods against an axis, as a line with its dots and the hatched ar
 - 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`).
+- Two or three series in one unit move over the same periods and the reader compares them (onboardings started,
+  graduated and stalled, by month): one axis, a line each, a key naming them (`__series`).
 
 **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.
+- Series in different units, or one more than four times another (accounts and tickets): never two value axes. Stack
+  two TrendLines in one card on the same periods (Rules).
+- More than three series: a `Table`, or the three that matter and the rest named in the sentence.
 
 **Anatomy**
 
@@ -42,8 +46,16 @@ A value over periods against an axis, as a line with its dots and the hatched ar
   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`.
+- Several series (up to 3): the first is the figure's own `__draw` and points; each other is a `__series` box after
+  them (`display: contents`, so its points still sit on the plot) holding its own `__draw` (the SVG path only, no
+  hatch) and its points, the same `--i` and `--n`. Tones in order: navy, teal (`--ws-chart-finished`), purple
+  (`--ws-chart-past-half`); salmon stays the reference's. `--tone` on a series overrides its tone (a figure that sets
+  its own `--tone` sets one on each series too, since the figure's is inherited). The key names every series:
+  `__key--2` and `__key--3` take the second and third tones (an overridden series' `<li>` carries the same `--tone`).
+  With several series there is no hatch (one area claims a whole; two cover each other) and the period in progress
+  keeps its series' tone: its name (`__now`) and the dotted `__ahead` say it.
+- The reading (`__table`): a real `<table>` of every period and its value (a column a series), with a caption, hidden
+  from the eye inside the `__table` box. The plot is `aria-hidden`.
 
 **Parts and modifiers**
 
@@ -54,6 +66,7 @@ A value over periods against an axis, as a line with its dots and the hatched ar
 - `__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.
+- `__series`: a second or third series, after the first series' points; `__key--2`, `__key--3`: its swatch in the key.
 
 **States**
 
@@ -77,7 +90,9 @@ A value over periods against an axis, as a line with its dots and the hatched ar
   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.
+  (`--above --follow`) reads the point. With several series it reads the period, not the dot: the eyebrow names the
+  period (no swatch), then a row a series in the key's order, each with its swatch and value (`__row`); it sits over
+  the period's highest dot. The guide runs from the hovered dot to the baseline, through the others.
 - 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.
@@ -104,7 +119,12 @@ A value over periods against an axis, as a line with its dots and the hatched ar
 
 **Rules**
 
-- **One series, one optional reference.** Two lines are two cards.
+- **Up to three series in one unit, one optional reference.** One value axis, always: never two.
+- **Different units or scales far apart** (one series more than four times another): two TrendLines stacked in one
+  card on the same periods (`--n`) and the same gutter (`--ws-trend-line-y`), each with its own value labels and a key
+  of one; the period names only under the last (leave the first's `__x` out). One title and one sentence for the pair.
+- **Several series are lines only**: no hatch and no Bars / Line switch (two columns cannot share a slot and still
+  collapse into their dots). A chart that wants columns per period across series is a `Table` or 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.
@@ -143,6 +163,17 @@ A value over periods against an axis, as a line with its dots and the hatched ar
 </figure>
 ```
 
+A second series, after the first series' points (a third is another `__series` after it):
+
+```html
+<span class="ws-trend-line__series">
+  <span class="ws-trend-line__draw"><svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M12.5 70 L37.5 62.5 L62.5 52.5 L87.5 40"/></svg></span>
+  <span class="ws-trend-line__point" style="--i: 0; --y: 70%;"></span><!-- a point a period -->
+</span>
+<!-- the key, after the plot: <ul class="ws-trend-line__legend" aria-hidden="true"><li>Started</li><li class="ws-trend-line__key--2">Graduated</li></ul> -->
+<!-- the table: a column a series, <th scope="col"> named as the key -->
+```
+
 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:
@@ -160,5 +191,5 @@ on tokens, except North's own numbers: the dotted line's 0.1 dash (a round cap's
 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-hover`, `--ws-chart-line`, `--ws-chart-navy-light`, `--ws-chart-finished`, `--ws-chart-past-half`, `--ws-chart-under-half`, `--ws-word-needs`, `--ws-edge-slot`,
 `--ws-edge-card`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" height=2320 -->
+<!-- @dsCard group="Charts" height=3500 -->
 <!doctype html>
 <html>
 <head>
@@ -100,6 +100,126 @@
     </section>
   </div>
 
+  <div class="ws-stack" style="max-width: 1194px;">
+    <span class="ws-muted">Several series (up to three, one unit, one axis): a __series box for each after the first, the tones navy, teal, purple; lines only, no hatch and no Bars / Line switch. Point along it: the reading names every series.</span>
+    <section class="ws-card ws-card--compound" aria-labelledby="tl-s-t">
+      <header class="ws-head">
+        <div>
+          <h3 class="ws-title" id="tl-s-t">More onboardings start than graduate</h3>
+          <p class="ws-body">30 started and 21 graduated so far in November; 12 stalled, the most this year.</p>
+        </div>
+      </header>
+      <div class="ws-card__body">
+        <figure class="ws-trend-line" style="--n: 6; --ticks: 4;" aria-labelledby="tl-s-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"><svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M8.33 45 L25 30 L41.67 37.5 L58.33 22.5 L75 15 L91.67 25"/></svg></span>
+              <span class="ws-trend-line__point" style="--i: 0; --y: 45%;"></span>
+              <span class="ws-trend-line__point" style="--i: 1; --y: 30%;"></span>
+              <span class="ws-trend-line__point" style="--i: 2; --y: 37.5%;"></span>
+              <span class="ws-trend-line__point" style="--i: 3; --y: 22.5%;"></span>
+              <span class="ws-trend-line__point" style="--i: 4; --y: 15%;"></span>
+              <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 5; --y: 25%;"></span>
+              <span class="ws-trend-line__series">
+                <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 70 L25 62.5 L41.67 52.5 L58.33 55 L75 40 L91.67 47.5"/></svg></span>
+                <span class="ws-trend-line__point" style="--i: 0; --y: 70%;"></span>
+                <span class="ws-trend-line__point" style="--i: 1; --y: 62.5%;"></span>
+                <span class="ws-trend-line__point" style="--i: 2; --y: 52.5%;"></span>
+                <span class="ws-trend-line__point" style="--i: 3; --y: 55%;"></span>
+                <span class="ws-trend-line__point" style="--i: 4; --y: 40%;"></span>
+                <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 5; --y: 47.5%;"></span>
+              </span>
+              <span class="ws-trend-line__series">
+                <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 90 L25 85 L41.67 87.5 L58.33 80 L75 77.5 L91.67 70"/></svg></span>
+                <span class="ws-trend-line__point" style="--i: 0; --y: 90%;"></span>
+                <span class="ws-trend-line__point" style="--i: 1; --y: 85%;"></span>
+                <span class="ws-trend-line__point" style="--i: 2; --y: 87.5%;"></span>
+                <span class="ws-trend-line__point" style="--i: 3; --y: 80%;"></span>
+                <span class="ws-trend-line__point" style="--i: 4; --y: 77.5%;"></span>
+                <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 5; --y: 70%;"></span>
+              </span>
+              <span class="ws-trend-line__band"></span>
+            </div>
+            <div class="ws-trend-line__x"><span title="June">Jun</span><span title="July">Jul</span><span title="August">Aug</span><span title="September">Sep</span><span title="October">Oct</span><span class="ws-trend-line__now" title="November, month to date">Nov</span></div>
+          </div>
+          <ul class="ws-trend-line__legend" aria-hidden="true"><li>Started</li><li class="ws-trend-line__key--2">Graduated</li><li class="ws-trend-line__key--3">Stalled</li></ul>
+          <div class="ws-trend-line__table"><table>
+            <caption>Onboardings by month</caption>
+            <thead><tr><th scope="col">Month</th><th scope="col">Started</th><th scope="col">Graduated</th><th scope="col">Stalled</th></tr></thead>
+            <tbody><tr><th scope="row">June</th><td>22</td><td>12</td><td>4</td></tr><tr><th scope="row">July</th><td>28</td><td>15</td><td>6</td></tr><tr><th scope="row">August</th><td>25</td><td>19</td><td>5</td></tr><tr><th scope="row">September</th><td>31</td><td>18</td><td>8</td></tr><tr><th scope="row">October</th><td>34</td><td>24</td><td>9</td></tr><tr><th scope="row">November, month to date</th><td>30</td><td>21</td><td>12</td></tr></tbody>
+          </table></div>
+        </figure>
+      </div>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1194px;">
+    <span class="ws-muted">Units or scales far apart (one series four times the other): never two value axes. Two TrendLines stacked in one card on the same periods, each with its own axis and key; the period names only under the last.</span>
+    <section class="ws-card ws-card--compound" aria-labelledby="tl-p-t">
+      <header class="ws-head">
+        <div>
+          <h3 class="ws-title" id="tl-p-t">Tickets grew faster than accounts</h3>
+          <p class="ws-body">Accounts rose 11% since June; tickets opened rose 28%.</p>
+        </div>
+      </header>
+      <div class="ws-card__body">
+        <figure class="ws-trend-line" style="--n: 6; --ticks: 3;" aria-label="Accounts by month" data-trend-live>
+          <div class="ws-trend-line__plot" aria-hidden="true">
+            <div class="ws-trend-line__y"><span style="--y: 0%;">3K</span><span style="--y: 33.33%;">2K</span><span style="--y: 66.67%;">1K</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(8.33% 19.67%, 25% 17.67%, 41.67% 16%, 58.33% 14%, 75% 12.33%, 91.67% 10.47%, 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.67 L25 17.67 L41.67 16 L58.33 14 L75 12.33 L91.67 10.47"/></svg>
+              </span>
+              <span class="ws-trend-line__point" style="--i: 0; --y: 19.67%;"></span>
+              <span class="ws-trend-line__point" style="--i: 1; --y: 17.67%;"></span>
+              <span class="ws-trend-line__point" style="--i: 2; --y: 16%;"></span>
+              <span class="ws-trend-line__point" style="--i: 3; --y: 14%;"></span>
+              <span class="ws-trend-line__point" style="--i: 4; --y: 12.33%;"></span>
+              <span class="ws-trend-line__point" style="--i: 5; --y: 10.47%;"></span>
+              <span class="ws-trend-line__band"></span>
+            </div>
+          </div>
+          <ul class="ws-trend-line__legend" aria-hidden="true"><li>Accounts</li></ul>
+          <div class="ws-trend-line__table"><table>
+            <caption>Accounts by month</caption>
+            <thead><tr><th scope="col">Month</th><th scope="col">Accounts</th></tr></thead>
+            <tbody><tr><th scope="row">June</th><td>2,410 accounts</td></tr><tr><th scope="row">July</th><td>2,470 accounts</td></tr><tr><th scope="row">August</th><td>2,520 accounts</td></tr><tr><th scope="row">September</th><td>2,580 accounts</td></tr><tr><th scope="row">October</th><td>2,630 accounts</td></tr><tr><th scope="row">November</th><td>2,686 accounts</td></tr></tbody>
+          </table></div>
+        </figure>
+        <figure class="ws-trend-line" style="--n: 6; --ticks: 3; --tone: var(--ws-chart-finished);" aria-label="Tickets opened by month" data-trend-live>
+          <div class="ws-trend-line__plot" aria-hidden="true">
+            <div class="ws-trend-line__y"><span style="--y: 0%;">300</span><span style="--y: 33.33%;">200</span><span style="--y: 66.67%;">100</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(8.33% 40%, 25% 30%, 41.67% 35%, 58.33% 20%, 75% 13.33%, 91.67% 23.33%, 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 40 L25 30 L41.67 35 L58.33 20 L75 13.33 L91.67 23.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: 30%;"></span>
+              <span class="ws-trend-line__point" style="--i: 2; --y: 35%;"></span>
+              <span class="ws-trend-line__point" style="--i: 3; --y: 20%;"></span>
+              <span class="ws-trend-line__point" style="--i: 4; --y: 13.33%;"></span>
+              <span class="ws-trend-line__point" style="--i: 5; --y: 23.33%;"></span>
+              <span class="ws-trend-line__band"></span>
+            </div>
+            <div class="ws-trend-line__x"><span title="June">Jun</span><span title="July">Jul</span><span title="August">Aug</span><span title="September">Sep</span><span title="October">Oct</span><span title="November">Nov</span></div>
+          </div>
+          <ul class="ws-trend-line__legend" aria-hidden="true"><li>Tickets opened</li></ul>
+          <div class="ws-trend-line__table"><table>
+            <caption>Tickets opened by month</caption>
+            <thead><tr><th scope="col">Month</th><th scope="col">Tickets opened</th></tr></thead>
+            <tbody><tr><th scope="row">June</th><td>180 tickets</td></tr><tr><th scope="row">July</th><td>210 tickets</td></tr><tr><th scope="row">August</th><td>195 tickets</td></tr><tr><th scope="row">September</th><td>240 tickets</td></tr><tr><th scope="row">October</th><td>260 tickets</td></tr><tr><th scope="row">November</th><td>230 tickets</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">
@@ -338,12 +458,29 @@
         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);
       }
+      /* Several series: the card sits over the period's highest dot and reads every series, a row each with its
+         swatch in the key's order (navy, teal, purple), from the table's columns. */
+      const tops = $$('.ws-trend-line__point', area).filter((p) => Number(p.style.getPropertyValue('--i')) === i).map((p) => p.style.getPropertyValue('--y').trim());
+      const top = tops.sort((a, b) => parseFloat(a) - parseFloat(b))[0];
       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.style.top = 'calc(' + top + ' - ' + (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 cells = $$('td', rows[i]), title = card.querySelector('.ws-hover-card__title');
+      const tones = ['var(--color-text-heading)', 'var(--ws-chart-finished)', 'var(--ws-chart-past-half)'];
+      $$('.ws-hover-card__row', card).forEach((r) => r.replaceWith());
+      title.hidden = cells.length > 1;
+      card.querySelector('.ws-hover-card__eyebrow > .ws-hover-card__swatch').hidden = cells.length > 1;
+      if (cells.length === 1) title.textContent = cells[0].textContent;
+      else cells.forEach((td, j) => {
+        const row = document.createElement('span');
+        row.className = 'ws-hover-card__row';
+        row.innerHTML = '<span class="ws-hover-card__swatch" style="--ws-hover-card-swatch: ' + tones[j] + ';"></span><span class="ws-hover-card__label"></span><span class="ws-hover-card__value"></span>';
+        row.children[1].textContent = $$('thead th', fig)[j + 1].textContent;
+        row.children[2].textContent = td.textContent;
+        card.append(row);
+      });
     };
     const hide = () => {
       clearTimeout(leave);