@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,12 @@
+/* ---- Testimonial: the kit's quote card, the words then the person; two or three to a row ---- */
+/* A grid of columns at least 280 px wide: a third card that wraps keeps its column's width instead of spanning the row. */
+.ws-testimonial-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-9xl) + var(--space-5xl))), 1fr)); gap: var(--layout-col-gap); }
+.ws-testimonial-row > * { min-width: 0; }
+/* A figure: the quote is a blockquote and the person its caption. The person sits at the foot, so a row of cards lines up. */
+.ws-testimonial { display: flex; flex-direction: column; margin: 0; border-radius: var(--ws-radius-control); border: var(--ws-line) solid var(--color-border-default); background: var(--color-surface); padding: var(--space-lg); }
+.ws-testimonial__quote { margin: 0; font-size: var(--font-size-md); line-height: var(--space-lg); color: var(--color-text-primary); }
+.ws-testimonial__who { margin-top: auto; padding-top: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); }
+.ws-testimonial__avatar { width: var(--ws-control-h-md); height: var(--ws-control-h-md); border-radius: var(--radius-full); background: var(--ws-surface-sunk); color: var(--color-text-heading); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-2xs); font-weight: 600; flex-shrink: 0; }
+.ws-testimonial__person { min-width: 0; }
+.ws-testimonial__name { font-size: var(--font-size-sm); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
+.ws-testimonial__role { font-size: var(--font-size-2xs); line-height: var(--space-md); color: var(--color-text-muted); }

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

@@ -13,11 +13,11 @@ Several lines of typed text, drawn exactly as `Input` is: white ground, the fine
 
 ## Anatomy
 
-- Box: `--ws-radius-control` (4px) corners, white ground (`--ws-field`), the fine hairline edge, at least 72px tall
+- Box: `--ws-radius-control` (4px) corners, white ground (`--ws-field`), the 0.5 px card edge (`--ws-edge-card`) drawn inside, so a scroller never clips it, at least 72px tall
   (3 rows by default).
 - Sides: 12px (`--space-sm`) horizontal, 8px (`--space-xs`) vertical.
 - Label: 12px medium, `--color-text-body`, above the field.
-- Words: 14px, `--color-gray-8`, 20px line height; placeholder `--color-gray-5`.
+- Words: 14 / 20, `--ws-field-ink`; placeholder `--color-text-placeholder` (AA on white).
 - Message below: as `Input`'s.
 - Resize: vertical only, so it never grows wider than its column.
 
@@ -32,24 +32,25 @@ There is one size; `rows` sets the starting height.
 ## States
 
 - **Default (rest):** white ground, fine grey edge, 3 rows tall.
-- **Typing (focus):** the edge turns mid blue and the kit's focus halo shows, exactly as `Input`'s, so focus never reads
-  as an error.
-- **Error:** the edge turns salmon and a message rises in below (`ws-arrive`) with a warning icon, in `--ws-word-needs`.
-- **Disabled:** not editable; shown at reduced emphasis, the existing words still visible.
-- **With placeholder:** grey-5 placeholder, never the field's only label.
+- **Hover (a mouse only):** the edge darkens (#AAA49D, North's outlined controls).
+- **Typing (focus):** the kit's focus ring, 2 px navy, 2 px out, over the field's own ground; it never reads as an error
+  (the error is the salmon's step, the ring is navy).
+- **Error:** a 1 px edge in the salmon's AA step and a message rises in below (`ws-arrive`), as `Input`'s.
+- **Disabled:** the sunk cream ground with muted words, no resize; the existing words still visible.
+- **With placeholder:** the AA placeholder grey, never the field's only label.
 - **Empty:** the rest state with the placeholder, if given.
 - **Long label:** the field's own label wraps; the typed words wrap and the box grows (or scrolls, by drag) rather than
   clip.
 - **Narrow:** always `width: 100%` of its column; only the height is resizable, by the person dragging its corner.
 - **Touch:** the field keeps its padding; there is no separate touch height since its content, not a fixed control
-  height, decides its size.
+  height, decides its size. Its words grow to 16 / 24, so a phone does not zoom the page into it on focus.
+- **Dark:** as `Input`'s.
 
 ## Behaviour
 
 - Keyboard: a native `<textarea>`; Tab moves to and from it, Enter inserts a new line (it does not submit a form).
 - Pointer / touch: a drag handle at the bottom-right corner resizes the height (`resize: vertical`).
-- Motion: border colour, background and shadow transition over `--ws-duration-instant` on `--ws-ease-soft`; an error
-  message rises in over `--ws-duration-gentle`; nothing animates under `prefers-reduced-motion: reduce`.
+- Motion: the edge over the hover beat on `--ws-ease-soft`; an error message rises in; still under reduced motion.
 
 ## Content
 
@@ -80,4 +81,19 @@ There is one size; `rows` sets the starting height.
 ## Source
 
 **Derived from**: the system's rule that a field without a kit equivalent is drawn to match `Input` exactly, including
-its mid-blue (never salmon) focus ring (21 Oct 2026). **Precedent**: the first product built on the system.
+its focus ring, never salmon (21 Oct 2026); 0.5.0 takes `Input`'s inside edge, hover and navy ring. **Precedent**: the first
+product built on the system.
+
+## Markup
+
+```html
+<div class="ws-field">
+  <label class="ws-label" for="opener">Opener for Nellie</label>
+  <textarea class="ws-textarea" id="opener" rows="3" aria-describedby="opener-msg"></textarea>
+  <p class="ws-field-msg" id="opener-msg">Shown to the lead as a text</p>
+</div>
+```
+
+## Styles
+
+`design-system/components/TextArea/style.css`: `ws-textarea` (and `--typing`).

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

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="ws-stage">
-  <div style="display: grid; grid-template-columns: repeat(2, minmax(var(--space-9xl), 1fr)); gap: var(--ws-gap-component); width: 100%;">
+  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--ws-gap-component); width: 100%;">
 
     <div class="ws-field">
       <span class="ws-muted">Rest, with a hint</span>
@@ -19,11 +19,17 @@
     </div>
 
     <div class="ws-field">
-      <span class="ws-muted">Typing (focus), with placeholder</span>
+      <span class="ws-muted">Typing (focus)</span>
       <label class="ws-label" for="t-focus">Notes on this call</label>
       <textarea class="ws-textarea ws-textarea--typing" id="t-focus" rows="3" placeholder="What stood out, and what to try next time" autofocus>She asks five direct questions, then</textarea>
     </div>
 
+    <div class="ws-field">
+      <span class="ws-muted">Empty: only the placeholder shows</span>
+      <label class="ws-label" for="t-empty">Notes for next time</label>
+      <textarea class="ws-textarea" id="t-empty" rows="3" placeholder="What stood out, and what to try next time"></textarea>
+    </div>
+
     <div class="ws-field">
       <span class="ws-muted">Error, rising in</span>
       <label class="ws-label" for="t-err">Reason for the hold</label>

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

@@ -0,0 +1,12 @@
+/* ---- TextArea: the house's multi-line field, restated (0.5.0) so the house's Fields copy can go: Input's ground, edge,
+   hover, focus ring and error, 8 / 12 inside, 14 / 20 words, at least 72 tall, resized by height only. ---- */
+.ws-textarea { display: block; width: 100%; min-width: 0; min-height: calc(var(--space-4xl) + var(--space-xs)); padding: var(--space-xs) var(--space-sm); border: 0; border-radius: var(--ws-radius-control); background: var(--ws-field); box-shadow: var(--ws-shadow-hairline-in); color: var(--ws-field-ink); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); resize: vertical; transition: box-shadow var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) { .ws-textarea:not(:disabled, [aria-invalid="true"]):hover { box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-hover); } }
+.ws-textarea::placeholder { color: var(--color-text-placeholder); }
+.ws-textarea:focus-visible { background: var(--ws-field); }
+.ws-textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 var(--ws-line) var(--ws-word-needs); }
+.ws-textarea:disabled { background: var(--ws-surface-sunk); color: var(--color-text-muted); cursor: not-allowed; resize: none; }
+/* The typing state drawn still: the focus ring a real focus draws. */
+.ws-textarea--typing { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+/* Touch: 16 / 24 words, so a phone does not zoom the page into the field (iOS zooms any field under 16 px). */
+@media (pointer: coarse) { .ws-textarea { font-size: var(--ws-text-value); line-height: var(--space-lg); } }

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

@@ -0,0 +1,116 @@
+The person's pick of System, Light or Dark, at the foot of the app's nav, kept in their browser and set before the page
+paints.
+
+## Use it when
+
+- An app offers the dark theme (D12: dark is opt-in) and a person may want it fixed, or following their computer.
+
+## Not for
+
+- A page or an artifact that only follows the computer: set `<html data-theme="system">` and offer no switch.
+- A per-card or per-chart look: the theme is the whole app's.
+
+## Anatomy
+
+- The word "Theme" (12 / 16 muted, `ws-theme-switch__label`) at the left, the switch at the right, 8 apart, 8 / 8 / 4
+  inside (it sits at the foot of the nav).
+- The switch: a `Segmented --sm` of three icon radios, each 28 by 24 with a 16 px icon: System (a screen), Light (a sun),
+  Dark (a moon). The chosen one is the navy act with its words colour (`--ws-on-act`).
+- The group is `role="radiogroup"` named by the word; each item is a native radio with an `aria-label` and a `title`.
+
+## Variants and sizes
+
+One size (`Segmented --sm`).
+
+## States
+
+- **System (the default):** follows the computer, and changes with it.
+- **Light / Dark:** fixed until changed.
+- **Hover (a mouse only):** an item takes the navy wash.
+- **Focus:** the kit's ring drawn inside the item.
+- **Switching:** for two frames every transition is off (`ws-theme-switching` on `<html>`), so every surface turns at
+  once instead of each on its own beat.
+- **No storage (a private window):** the pick holds for this page only.
+- **Touch:** each item is a 40 px target.
+- **Dark:** the switch itself takes the dark values like everything else.
+
+## Behaviour
+
+- Native radios: Tab reaches the group, the arrow keys move the pick.
+- A script in `<head>`, before the page paints, reads the pick from `localStorage` (`fello-theme`), sets
+  `<html data-theme="system|light|dark">` and the browser bar's colour (`<meta name="theme-color">` from the page's
+  `--ws-page`), and listens to the computer while on System. Picking System removes the key. Storage is wrapped in
+  try/catch. Another tab's pick follows through the `storage` event.
+
+## Content
+
+- The word is "Theme"; the items' names are "System", "Light", "Dark".
+- No em dashes.
+
+## Props
+
+| Name | Type | Meaning |
+| --- | --- | --- |
+| `storageKey` | `string` | the `localStorage` key, default `fello-theme` |
+
+## Rules
+
+- Dark is opt-in: an app that renders no switch and sets no `data-theme` stays light.
+- The head script runs before paint, so a page never flashes the wrong theme.
+- System is the default and removes the stored pick.
+
+## Source
+
+**Derived from**: gtm-ai-impact's switch (public/ds-dark.css:181-188, public/theme.js:1-85): the three icon items at the
+foot of the nav, the two-frame `ws-theme-switching`, the try/catch, the theme-color meta; drawn here with native radios
+(the arrow keys come free) and the kit's `data-theme="system"`, so the CSS follows the computer without the script.
+
+## Markup
+
+```html
+<!-- In <head>, after the stylesheet: sets the theme before the page paints. -->
+<script>
+(function () {
+  var KEY = 'fello-theme', root = document.documentElement, mq = matchMedia('(prefers-color-scheme: dark)');
+  function stored() { try { var v = localStorage.getItem(KEY); return v === 'light' || v === 'dark' ? v : 'system'; } catch (e) { return 'system'; } }
+  function paintMeta() {
+    var meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) meta.content = getComputedStyle(root).getPropertyValue('--ws-page').trim();
+  }
+  function apply(pick, animate) {
+    if (animate) root.classList.add('ws-theme-switching');
+    root.dataset.theme = pick;
+    paintMeta();
+    if (animate) requestAnimationFrame(function () { requestAnimationFrame(function () { root.classList.remove('ws-theme-switching'); }); });
+    document.querySelectorAll('input[name="ws-theme"]').forEach(function (r) { r.checked = r.value === pick; });
+  }
+  apply(stored(), false);
+  mq.addEventListener('change', function () { if (stored() === 'system') paintMeta(); });
+  addEventListener('storage', function (e) { if (e.key === KEY) apply(stored(), true); });
+  document.addEventListener('DOMContentLoaded', function () {
+    apply(stored(), false);
+    document.addEventListener('change', function (e) {
+      var r = e.target;
+      if (r.name !== 'ws-theme') return;
+      try { r.value === 'system' ? localStorage.removeItem(KEY) : localStorage.setItem(KEY, r.value); } catch (err) {}
+      apply(r.value, true);
+    });
+  });
+})();
+</script>
+
+<!-- At the foot of the nav. -->
+<div class="ws-theme-switch" role="radiogroup" aria-labelledby="theme-label">
+  <span class="ws-theme-switch__label" id="theme-label">Theme</span>
+  <span class="ws-segmented ws-segmented--sm">
+    <label class="ws-segmented__item ws-segmented__item--icon" title="System"><input type="radio" name="ws-theme" value="system" aria-label="System" checked><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="12" height="8" rx="1"/><path d="M6 14h4M8 11v3"/></svg></label>
+    <label class="ws-segmented__item ws-segmented__item--icon" title="Light"><input type="radio" name="ws-theme" value="light" aria-label="Light"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="2.5"/><path d="M8 1.5v1.5M8 13v1.5M14.5 8H13M3 8H1.5M12.6 3.4l-1 1M4.4 11.6l-1 1M12.6 12.6l-1-1M4.4 4.4l-1-1"/></svg></label>
+    <label class="ws-segmented__item ws-segmented__item--icon" title="Dark"><input type="radio" name="ws-theme" value="dark" aria-label="Dark"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.5 9.5A5.5 5.5 0 1 1 6.5 2.5a4.5 4.5 0 0 0 7 7Z"/></svg></label>
+  </span>
+</div>
+```
+
+## Styles
+
+`design-system/components/ThemeSwitch/style.css`: `ws-theme-switch` and `__label`; the switch is `Segmented`'s `--sm`
+with `__item--icon` items holding native radios. `ws-theme-switching` is the house's.

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

@@ -0,0 +1,57 @@
+<!-- @dsCard group="Navigation" height=250 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>ThemeSwitch</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="width: 232px; max-width: 100%;">
+    <span class="ws-muted">At the foot of the nav: System chosen, so the page follows the computer</span>
+    <div class="ws-theme-switch" role="radiogroup" aria-labelledby="theme-label">
+      <span class="ws-theme-switch__label" id="theme-label">Theme</span>
+      <span class="ws-segmented ws-segmented--sm">
+        <label class="ws-segmented__item ws-segmented__item--icon" title="System">
+          <input type="radio" name="ws-theme" value="system" aria-label="System" checked>
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="12" height="8" rx="1"/><path d="M6 14h4M8 11v3"/></svg>
+        </label>
+        <label class="ws-segmented__item ws-segmented__item--icon" title="Light">
+          <input type="radio" name="ws-theme" value="light" aria-label="Light">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="2.5"/><path d="M8 1.5v1.5M8 13v1.5M14.5 8H13M3 8H1.5M12.6 3.4l-1 1M4.4 11.6l-1 1M12.6 12.6l-1-1M4.4 4.4l-1-1"/></svg>
+        </label>
+        <label class="ws-segmented__item ws-segmented__item--icon" title="Dark">
+          <input type="radio" name="ws-theme" value="dark" aria-label="Dark">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.5 9.5A5.5 5.5 0 1 1 6.5 2.5a4.5 4.5 0 0 0 7 7Z"/></svg>
+        </label>
+      </span>
+    </div>
+  </div>
+
+  <p class="ws-meta" style="max-width: 420px;">Pick Light or Dark here to see the preview change; System follows the computer, and the choice is kept in this browser.</p>
+
+</div>
+<script>
+/* The switch's wiring (the head script in the README sets the theme before paint; this preview has no head script, so it
+   only keeps the radios and the page in step). */
+(function () {
+  var KEY = 'fello-theme', root = document.documentElement;
+  function stored() { try { var v = localStorage.getItem(KEY); return v === 'light' || v === 'dark' ? v : 'system'; } catch (e) { return 'system'; } }
+  var pick = stored();
+  root.dataset.theme = pick; // 'system' too: a page that sets nothing stays light (D12)
+  document.querySelectorAll('input[name="ws-theme"]').forEach(function (r) {
+    r.checked = r.value === pick;
+    r.addEventListener('change', function () {
+      try { r.value === 'system' ? localStorage.removeItem(KEY) : localStorage.setItem(KEY, r.value); } catch (e) {}
+      root.classList.add('ws-theme-switching');
+      root.dataset.theme = r.value;
+      requestAnimationFrame(function () { requestAnimationFrame(function () { root.classList.remove('ws-theme-switching'); }); });
+    });
+  });
+})();
+</script>
+</body>
+</html>

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

@@ -0,0 +1,6 @@
+/* ---- ThemeSwitch: System, Light or Dark (D12), from gtm-ai-impact's switch (ds-dark.css:181-188): the word "Theme" in
+   the muted words and a small Segmented of three icon radios (System, Light, Dark), the chosen one the navy act. It
+   sits at the foot of the app's nav. The head script in its README sets <html data-theme> before the page paints. ---- */
+.ws-theme-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-width: 0; padding: var(--space-xs) var(--space-xs) var(--space-xxs); }
+.ws-theme-switch__label { font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
+.ws-theme-switch > .ws-segmented { flex-shrink: 0; }

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

@@ -1,67 +1,83 @@
-One row of ticks for a count out of a small whole, each done tick carrying its stretch of the cards' one salmon-to-teal gradient.
+One row of fixed-size ticks for a count out of a small whole: the done ticks in one tone, or each its stretch of the gradient.
 
 **Use it when**
 
 - A list has a count out of a whole beside it: issues done, pieces used, goals met, a chapter's steps.
-- The count sits inside a row (a `GoalTicks` breakdown row, a course's chapter, a list card) rather than standing as a card's own headline figure.
-- Several of these rows sit together and should read as one family, each carrying a different stretch of the same gradient (`tickSpan`).
+- The count sits inside a row (a `GoalTicks` breakdown row, a stat tile, a list card) rather than standing as a card's
+  own headline figure.
+- A small count should read one tick a unit ("10 need a reply").
 
 **Not for**
 
+- A share that fills the width (a score, 40 or 50 ticks): use `TickStrip`.
 - A card's one big number and its own strip: use `GoalTicks`.
 - Comparing rows against each other by length: use `GoalBars`.
 - An ordered sequence of steps: use `Stepper`.
-- A ring or an arc share: use `Ring`.
 
 **Anatomy**
 
-- Up to 14 ticks (`MAX_ROW_TICKS`), each `calc(--space-xs + --space-xxs/4)` wide (10 px) and `calc(--space-md + --space-xxs/2)` tall (18 px), `--radius-xs` (2 px) corners, `--space-xxs` (4 px) apart.
-- A done tick's colour comes from `along(p)`: a `color-mix` between `--ws-chart-under-half` (salmon) and `--ws-chart-past-half` (purple) for the first half of its span, and between `--ws-chart-past-half` and `--ws-chart-finished` (teal) for the second half.
-- An empty tick is `--color-bg-page` with a 1 px `--ws-edge-slot` inset edge, the same look as `GoalTicks`' own empty ticks.
-- `span` (`[from, to]`, each 0 to 1) picks the stretch of the one gradient this row carries; `tickSpan(n)` hands back the nth of a small set of rows' stretch, as `GoalTicks`' three rows use it.
+- Up to 14 ticks (20 in `--fine` and `--tall`), one a unit, 1 px corners (`--ws-radius-bar`).
+- A done tick is `--tone` (set on the row; teal `--ws-chart-finished` by default), or carries its own colour inline
+  for the gradient stretch (a `color-mix` along salmon, purple, teal, so a set of rows reads as one run).
+- An empty tick is the plain track (`--ws-track`), no edge (Seth).
+- The row shrinks with its column: each tick gives way down to 2 px, so a narrow tile never cuts a tick and a narrow row
+  never squeezes its label.
 
-**Variants and sizes**
+| Size | Tick | Gap | Seth's use |
+| --- | --- | --- | --- |
+| default | 10 x 18 | 4 | a goal's breakdown, a tile's count |
+| `--fine` | 6 x 18 | 2 | a first-open card's small counts |
+| `--tall` | 10 x 28 | 3 | "Need a reply" beside a 32 px figure, in the alert tone |
 
-| Variant | What changes |
-| --- | --- |
-| `span` default `[0, 1]` | The row runs the full gradient, salmon to teal |
-| `span = tickSpan(0\|1\|2)` | A narrower stretch, so several rows read as one continuous run across them |
-| `of` above 14 | Scales: the done count is drawn as its share of 14 slots, not drawn one tick a unit |
+- The line (`.ws-tick-row__line`): a 96 px label (14/20 navy), 12, the row, 12, the count (16/20 semibold, tabular).
+  The count takes the rest of the line and wraps there, so a sentence after the figure ("2.9 of 4 · bar 2.7, steady")
+  never squeezes the ticks or runs off the card; the ticks give way only when the count's longest word no longer fits.
+  Join the figure with no-break spaces (`3 of 5`) so it stays on one line.
 
 **States**
 
-- Default: ticks rise from their foot (`ws-grow-up`) in order, each delayed by its share of `--ws-sweep`.
-- Empty: `value` is 0, every tick the empty cream; a real zero, never hidden.
-- Full: `value` equals `of`, every tick lit through to the span's end colour.
-- Disabled / error / hover / focus / pressed / selected: do not apply; the row is decorative, not a control.
-- Reduced motion: every tick is simply in place, no rise.
+- Default: the done ticks in their tone, the rest the track.
+- Draw (`--draw`): ticks rise from their foot one after another over the card's 900 ms draw, each on
+  `--ws-ease-settle`. Set `--i` on each tick and `--n` on the row.
+- Empty: `value` is 0, every tick the track; a real zero, never hidden.
+- Full: every tick lit.
+- Reduced motion: every tick in place, no rise.
+- Hover, focus, pressed, selected, disabled: do not apply; the row is a picture, not a control.
 
 **Behaviour**
 
-- Entirely decorative (`aria-hidden`): say the figure in words beside it ("3 of 5", "4 of 6") for a screen reader, since the ticks carry no `aria-label` of their own.
-- Motion: `ws-grow-up`, scaling up from the foot, each tick delayed by `sweepDelay(i, n)` so the row fills first to last over `--ws-sweep`; still with reduced motion.
+- Always `aria-hidden="true"`: say the count in words beside it ("3 of 5", "10") for a screen reader.
 - No pointer or keyboard behaviour.
 
 **Content**
 
-- Say the count in words beside the row ("3 of 5 met", "14"), never let the ticks alone carry the number.
-- Keep the row's own label short; it sits to the ticks' left in a list, not wrapped.
-
-**Props**
-
-| Name | Type | Meaning |
-| --- | --- | --- |
-| `value` | `number` | Units done |
-| `of` | `number` | The whole the row counts against |
-| `span` | `[number, number]` | Which stretch of the one gradient this row's done ticks carry (default `[0, 1]`) |
+- Say the count in words beside the row ("3 of 5 met", "14"); the ticks never carry the number alone.
+- Keep the label short; it sits to the left of the ticks, not wrapped.
 
 **Rules**
 
-- Counts out of a whole are tick rows; a score is the goal card, comparisons are goal bars.
-- Marks keep the system's exact colours; this row never needs the AA step itself because it draws no words, but anything placed beside it does.
-- Never an axis or a grid where a short row of ticks says it plainer.
+- Counts out of a small whole are tick rows; a score that fills the width is a tick strip; a goal is the goal card.
+- Marks keep the system's exact colours. The row draws no words, but anything beside it takes the AA word step.
+- One tone a row, or one stretch of the gradient; never both in a row.
 
 **Source**
 
-**Derived from**: the system's data-tone gradient, split across a small set of rows with `tickSpan` so several rows
-read as one continuous run. **Precedent**: the first product built on the system.
+**Derived from**: the system's data-tone gradient; the solid tone, the fine and tall sizes, the 1 px corners and the
+plain empty tick from Seth's first open (282:892) and Review inbox (313:2711), issue #7. **Precedent**: Ignite's
+`TickRow` (`fine`, `tall`, `color`).
+
+**Markup**
+
+```html
+<div class="ws-tick-row__line">
+  <span class="ws-tick-row__label">Goals met</span>
+  <span class="ws-tick-row" aria-hidden="true">
+    <span class="ws-tick-row__tick"></span>
+    <span class="ws-tick-row__tick"></span>
+    <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
+  </span>
+  <span class="ws-tick-row__count">2&nbsp;<span class="ws-muted">of&nbsp;3</span></span>
+</div>
+```
+
+**Styles**: `TickRow/style.css`, in `bundle.css` and `fello.css` as `.ws-tick-row`. Every value is a token.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Progress" height=152 -->
+<!-- @dsCard group="Progress" height=560 -->
 <!doctype html>
 <html>
 <head>
@@ -8,86 +8,109 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage">
+<div class="ws-stage ws-stage--column">
 
   <div class="ws-stack">
-    <span class="ws-muted">A count out of a whole, the default span: "3 of 5 met"</span>
+    <span class="ws-muted">Default: one solid tone, a tick a unit, drawn in on first paint ("3 of 5 met")</span>
     <div class="ws-tick-row__line">
       <span class="ws-tick-row__label">Goals met</span>
-      <span class="ws-tick-row" aria-hidden="true">
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 0%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 0 / 2);"></span>
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 100%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 1 / 2);"></span>
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-finished) 100%, var(--ws-chart-past-half)); animation-delay: calc(var(--ws-sweep) * 2 / 2);"></span>
+      <span class="ws-tick-row ws-tick-row--draw" style="--n: 5;" aria-hidden="true">
+        <span class="ws-tick-row__tick" style="--i: 0;"></span>
+        <span class="ws-tick-row__tick" style="--i: 1;"></span>
+        <span class="ws-tick-row__tick" style="--i: 2;"></span>
         <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
         <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
       </span>
-      <span class="ws-tick-row__count">3 <span class="ws-muted">of 5</span></span>
+      <span class="ws-tick-row__count">3&nbsp;<span class="ws-muted">of&nbsp;5</span></span>
     </div>
   </div>
 
   <div class="ws-stack">
-    <span class="ws-muted">The first of a set of rows (`tickSpan(0)`): salmon toward violet</span>
+    <span class="ws-muted">Tall, in the alert tone: Seth's "Need a reply" (10 x 28, 3 apart)</span>
     <div class="ws-tick-row__line">
-      <span class="ws-tick-row__label">Cold calls</span>
-      <span class="ws-tick-row" aria-hidden="true">
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 0%, var(--ws-chart-under-half));"></span>
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 23%, var(--ws-chart-under-half));"></span>
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 45%, var(--ws-chart-under-half));"></span>
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 68%, var(--ws-chart-under-half));"></span>
-        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
-        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
+      <span class="ws-tick-row__label">Need a reply</span>
+      <span class="ws-tick-row ws-tick-row--tall" style="--tone: var(--ws-chart-alert);" aria-hidden="true">
+        <span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span>
+        <span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span>
       </span>
-      <span class="ws-tick-row__count">4 <span class="ws-muted">of 6</span></span>
+      <span class="ws-tick-row__count">10</span>
     </div>
   </div>
 
   <div class="ws-stack">
-    <span class="ws-muted">The second (`tickSpan(1)`): violet toward blue</span>
+    <span class="ws-muted">Fine (6 x 18, 2 apart), in purple: 12 of 20 seats used</span>
     <div class="ws-tick-row__line">
-      <span class="ws-tick-row__label">Live transfers</span>
-      <span class="ws-tick-row" aria-hidden="true">
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 73%, var(--ws-chart-under-half));"></span>
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 84%, var(--ws-chart-under-half));"></span>
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 96%, var(--ws-chart-under-half));"></span>
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-finished) 7%, var(--ws-chart-past-half));"></span>
-        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
-        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
+      <span class="ws-tick-row__label">Seats used</span>
+      <span class="ws-tick-row ws-tick-row--fine" style="--tone: var(--ws-chart-past-half);" aria-hidden="true">
+        <span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span>
+        <span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span>
+        <span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span>
+        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
+        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
       </span>
-      <span class="ws-tick-row__count">4 <span class="ws-muted">of 6</span></span>
+      <span class="ws-tick-row__count">12&nbsp;<span class="ws-muted">of&nbsp;20</span></span>
     </div>
   </div>
 
   <div class="ws-stack">
-    <span class="ws-muted">The third (`tickSpan(2)`): deep blue</span>
+    <span class="ws-muted">The gradient stretch: a set of rows that read as one run (each tick carries its own colour)</span>
+    <div class="ws-tick-row__line">
+      <span class="ws-tick-row__label">Cold calls</span>
+      <span class="ws-tick-row" aria-hidden="true">
+        <span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 0%, var(--ws-chart-under-half));"></span>
+        <span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 23%, var(--ws-chart-under-half));"></span>
+        <span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 45%, var(--ws-chart-under-half));"></span>
+        <span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 68%, var(--ws-chart-under-half));"></span>
+        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
+        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
+      </span>
+      <span class="ws-tick-row__count">4&nbsp;<span class="ws-muted">of&nbsp;6</span></span>
+    </div>
     <div class="ws-tick-row__line">
       <span class="ws-tick-row__label">Follow-ups</span>
       <span class="ws-tick-row" aria-hidden="true">
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-finished) 13%, var(--ws-chart-past-half));"></span>
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-finished) 18%, var(--ws-chart-past-half));"></span>
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-finished) 22%, var(--ws-chart-past-half));"></span>
-        <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-finished) 27%, var(--ws-chart-past-half));"></span>
+        <span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-finished) 13%, var(--ws-chart-past-half));"></span>
+        <span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-finished) 40%, var(--ws-chart-past-half));"></span>
+        <span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-finished) 70%, var(--ws-chart-past-half));"></span>
+        <span class="ws-tick-row__tick" style="background: var(--ws-chart-finished);"></span>
         <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
         <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
       </span>
-      <span class="ws-tick-row__count">4 <span class="ws-muted">of 6</span></span>
+      <span class="ws-tick-row__count">4&nbsp;<span class="ws-muted">of&nbsp;6</span></span>
     </div>
   </div>
 
   <div class="ws-stack">
-    <span class="ws-muted">Empty: nothing done yet</span>
+    <span class="ws-muted">Empty: nothing done yet, a real zero, never hidden</span>
     <div class="ws-tick-row__line">
       <span class="ws-tick-row__label">Nudges sent</span>
       <span class="ws-tick-row" aria-hidden="true">
-        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
-        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
-        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
-        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
-        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
+        <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
+      </span>
+      <span class="ws-tick-row__count">0&nbsp;<span class="ws-muted">of&nbsp;5</span></span>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 340px; max-width: 100%;">
+    <span class="ws-muted">A long count: the words wrap beside the row, the ticks keep their size</span>
+    <div class="ws-tick-row__line">
+      <span class="ws-tick-row__label">Follow-ups</span>
+      <span class="ws-tick-row" aria-hidden="true">
+        <span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
       </span>
-      <span class="ws-tick-row__count">0 <span class="ws-muted">of 5</span></span>
+      <span class="ws-tick-row__count">2.9&nbsp;<span class="ws-muted">of&nbsp;4 &middot; bar 2.7, at or above the bar &middot; steady</span></span>
     </div>
   </div>
 
+  <div class="ws-stack" style="width: 120px; max-width: 100%;">
+    <span class="ws-muted">A 120 px column: 14 ticks give way instead of being cut</span>
+    <span class="ws-tick-row" aria-hidden="true">
+      <span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span>
+      <span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span><span class="ws-tick-row__tick"></span>
+      <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
+    </span>
+  </div>
+
 </div>
 </body>
 </html>