@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,141 @@
+A rimmed list of checks, each row a name, a strip of ticks for its score, the score, a status and a chevron that opens
+it; or a list of fixes, each row a box to tick, the fix and its effort, its act, and a chevron that opens it in place.
+Seth's checks list (301:1728) and Fixes checklist (308:2466).
+
+## Use it when
+
+- A report breaks one score into a few checks and each check opens its detail (an audit's "Your AI visibility checks").
+- A short list of fixes is worked through and ticked off, each with one act and a few steps behind it.
+
+## Not for
+
+- Records with many columns: use `Table`.
+- A ranking of people: use `Leaderboard`.
+- Next acts with a reason each, in a card: use `ActionList`.
+- A grid of yes-or-no answers: use `Matrix`.
+
+## Anatomy
+
+- A rim (`ul.ws-check-row`): the tray grey (`--ws-tray`), 1 px of it round the rows (`--ws-rim`), 8 px corners outside,
+  7 inside (`--ws-radius-card-inner`) on the first and last row. Rows cream, joined by 0.5 px lines (`--ws-edge`),
+  full width, drawn inside the top of the row (an inset line, not a border), so a row's height includes its line as in
+  Seth's frames. No outline, no shadow.
+- Every row is at least 56 (`--ws-check-row-h`), with an act or without, so lists line up (Seth's rows ran 46 to 70).
+- A check row (`__row`, a button with `aria-expanded`, or a link): 12 above and below, 20 in, 16 out, parts 24 apart, on
+  one grid every row shares:
+
+| Part | Width | Type |
+| --- | --- | --- |
+| Name (`__name`) | 150 | 15 / 20 medium navy, wraps |
+| Ticks (`__ticks`) | the rest | 40 ticks, 32 tall, 3 apart, 1 px corners |
+| Score (`__score`) | 56, right | 28 / 32 regular navy, tabular |
+| Status (`__status`) | 112, right | 13 / 18 medium body grey (`--quiet` muted) |
+| Chevron (`__chev`) | 16 | navy, 1.5 stroke |
+
+- The ticks: lit ticks (`b`) in the row's rating tone (D10): strong teal (`--ws-rating-strong`, the default),
+  getting there mid blue (`--middle`), needs work pink (`--needs-work`); the rest (`i`) the empty track. Lit is
+  `round(score / 100 x 40)`.
+- Not checked: every tick empty, a short muted rule in place of the score (`__none`, 20 wide, its words for a screen
+  reader), the status "Could not check" muted; the chevron stays (it still opens).
+- A fix row (`li.ws-check-row__fix` holding `__line`): the box (an 18 wide column, the skinned `Checkbox`, a 24 target,
+  40 on touch), the fix (`__open`, a button whose hit area covers the line): the title 15 / 22 medium navy and the
+  effort 13 / 18 muted 8 after it on the baseline, or a done line under it (`__meta`, 13 / 18 medium in the positive
+  word, 6 below); its act (Seth's grey act: a medium `Button --well`, 32 tall, 12 at the sides, no edge; `--primary`
+  on the open row) and a 16 px chevron; parts 16 apart, 12 above and below, 20 in, 16 out.
+- Every part of a fix row sits on the title's first line: the box and the chevron centre on it and the act is centred
+  on it, so a done row's box stays beside its title, not mid-way down the two lines (Seth's 308:2466 centred it on the
+  block). A one-line row's line sits mid-row.
+- The open fix's panel (`__detail`): cream, 6 px corners, 24 inside, its left edge on the title's (20 + 18 + 16 = 54; Seth's
+  frame drew it 4 px off at 58), 16 from the right and below.
+
+## Variants and sizes
+
+| Part | Value |
+| --- | --- |
+| Row | 56 at least, 12 / 16 / 12 / 20 inside |
+| Check columns | 150, the rest, 56, 112, 16; 24 apart |
+| Ticks | 40, 32 tall, 3 apart |
+| Fix columns | 18, the rest, the act (32, `--well`), 16; 16 apart; all on the title's first line |
+| Panel | 54 in, 24 inside, 6 px corners |
+| Narrow (under 40rem) | check: name and status over the ticks, the score beside them; fix: the act under the words, the box and the chevron on the title's first line |
+
+## States
+
+- **Default**: cream.
+- **Hover**: North's faint navy wash (`--ws-hover-faint`) laid over the cream (a background image, so the grey rim never
+  shows through), nothing moves (not drawn by Seth); never on an open or a current row, which keep their sunk ground.
+- **Open** (`aria-expanded="true"`): the sunk cream (`--ws-surface-sunk`); a check's status turns navy; a fix's title
+  turns semibold at the same size, its act turns primary, its chevron points up and its panel shows.
+- **Focus**: the 2 px navy ring drawn inside the row.
+- **Not checked**: as above.
+- **Done** (a fix, `--done`): the box ticked, the title muted, the done line under it in the positive word.
+- **Loading**: the name and the ticks as ghosts in the chart colours' sweep (`__ghost ws-shimmer`, `__ticks ws-shimmer`);
+  still under reduced motion.
+- **Long name**: wraps within its 150; the row grows, every column still lines up.
+
+## Behaviour
+
+- Keyboard: a check row is one button (it opens the check's drawer, `aria-expanded` saying so); a fix row's box, its
+  open button and its act are three stops, in that order.
+- Pointer: clicking anywhere on a fix row's line opens it, except on the box and the act, which do their own thing.
+- Motion: the lit ticks grow up from their base on arrival, 700 ms on `--ws-ease-settle`, left to right 4 ms a tick
+  (`--ws-ripple`, where the browser can count siblings; elsewhere together). A fix opens in place on North's fold
+  ("Sidebar sections open / close", the fold spring .32 / 0): its panel (`__detail`, wearing the house's `ws-unfold`,
+  shown and hidden by `hidden`) grows from nothing to its height with its padding and margin and fades in, and the
+  chevron turns 180 on the same spring (`--ws-spring-fold` over `--ws-spring-fold-duration`); closing runs it back.
+  Without `@starting-style` or `interpolate-size` the panel opens at once. Under reduced motion nothing moves.
+
+## Content
+
+- A check's name is one or two words ("Local search"); its status a count of fixes ("2 fixes") or a plain state
+  ("Nothing to fix", "Could not check").
+- A fix starts with a verb ("Speed up the homepage on phones"); its effort says how long ("A few days").
+- No em dashes; the not-checked mark is a drawn rule, not a dash.
+
+## Rules
+
+- **One grid for every check row**, so the scores stack in one right-aligned column (Seth: name 150, score 56 right,
+  status 112 right).
+- **One minimum height for every row** in a list, act or no act.
+- **A selected or open state never changes size**: weight and ground change, line heights do not.
+- **Words pass AA on their ground** (D2): Seth's #7F7F7F and #8A8A8A words take `--color-text-muted`; the teal done line
+  takes `--ws-word-positive`. The tick tones are marks and keep Seth's hue.
+
+## Source
+
+**Derived from**: Seth's Grow audit report (301:1630: the checks list 301:1725 to 2010) and Fixes checklist (308:2466:
+the fix rows and the open fix), on the kit's rim (D5), rating tones (D10) and North's tick ripple (D7). The tick strip
+is the same shape as `TickStrip` (40 ticks, 32 tall, 3 apart) and can be swapped for it. **Precedent**: new in 0.5.0
+(4 Nov 2026).
+
+## Markup
+
+```html
+<ul class="ws-check-row" aria-label="Your AI visibility checks">
+  <li><button type="button" class="ws-check-row__row" aria-expanded="false">
+    <span class="ws-check-row__name">Website</span>
+    <span class="ws-check-row__ticks" aria-hidden="true"><b></b><b></b><b></b><i></i><!-- 40 in all: round(score / 100 x 40) b, the rest i --></span>
+    <span class="ws-check-row__score">75</span>
+    <span class="ws-check-row__status">2 fixes</span>
+    <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
+  </button></li>
+</ul>
+
+<ul class="ws-check-row" aria-label="Website fixes">
+  <li class="ws-check-row__fix">
+    <div class="ws-check-row__line">
+      <label class="ws-check"><input type="checkbox" aria-label="Done: Speed up the homepage on phones"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span></label>
+      <button type="button" class="ws-check-row__open" aria-expanded="false" aria-controls="fix-1"><span class="ws-check-row__title">Speed up the homepage on phones</span><span class="ws-check-row__effort">A few days</span></button>
+      <button type="button" class="ws-btn ws-btn--well ws-check-row__act">Send to my web person</button>
+      <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
+    </div>
+    <div class="ws-check-row__detail ws-unfold" id="fix-1" hidden><p class="ws-body">Your homepage takes 6.2 seconds to show on a phone.</p></div>
+  </li>
+</ul>
+```
+
+## Styles
+
+`design-system/components/CheckRow/style.css`, in `bundle.css` and `fello.css`. Dark and the navy ground come from the
+tokens (`--ws-tray`, `--ws-edge`, `--ws-track`, `--ws-rating-*`, `--ws-surface-sunk`). The rim is a size container
+named `ws-check-row`.

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

@@ -0,0 +1,140 @@
+<!-- @dsCard group="Data" height=980 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CheckRow</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">
+    <span class="ws-muted">Check rows (Seth 301:1728): one grid for every row, so names, ticks, scores and statuses line up; the open row is sunk with its status in navy; a check that could not run keeps its row and its chevron; ticks in the rating's tone (strong teal, getting there mid blue, needs work pink)</span>
+    <h3 class="ws-section">Your AI visibility checks</h3>
+    <ul class="ws-check-row" aria-label="Your AI visibility checks">
+      <li><button type="button" class="ws-check-row__row" aria-expanded="true" aria-label="Local search, score 39 of 100, needs work, 2 fixes">
+        <span class="ws-check-row__name">Local search</span>
+        <span class="ws-check-row__ticks ws-check-row__ticks--needs-work" aria-hidden="true"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
+        <span class="ws-check-row__score">39</span>
+        <span class="ws-check-row__status">2 fixes</span>
+        <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
+      </button></li>
+      <li><button type="button" class="ws-check-row__row" aria-expanded="false" aria-label="Website, score 75 of 100, strong, 2 fixes">
+        <span class="ws-check-row__name">Website</span>
+        <span class="ws-check-row__ticks" aria-hidden="true"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
+        <span class="ws-check-row__score">75</span>
+        <span class="ws-check-row__status">2 fixes</span>
+        <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
+      </button></li>
+      <li><button type="button" class="ws-check-row__row" aria-expanded="false" aria-label="Social, score 55 of 100, getting there, 1 fix">
+        <span class="ws-check-row__name">Social</span>
+        <span class="ws-check-row__ticks ws-check-row__ticks--middle" aria-hidden="true"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
+        <span class="ws-check-row__score">55</span>
+        <span class="ws-check-row__status">1 fix</span>
+        <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
+      </button></li>
+      <li><button type="button" class="ws-check-row__row" aria-expanded="false" aria-label="Zillow, score 100 of 100, strong, Nothing to fix">
+        <span class="ws-check-row__name">Zillow</span>
+        <span class="ws-check-row__ticks" aria-hidden="true"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></span>
+        <span class="ws-check-row__score">100</span>
+        <span class="ws-check-row__status ws-check-row__status--quiet">Nothing to fix</span>
+        <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
+      </button></li>
+      <li><button type="button" class="ws-check-row__row" aria-expanded="false" aria-label="Google Business Profile, not checked, Could not check">
+        <span class="ws-check-row__name">Google Business Profile</span>
+        <span class="ws-check-row__ticks" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
+        <span class="ws-check-row__score"><span class="ws-check-row__none" aria-hidden="true"></span><span class="ws-sr">Not checked</span></span>
+        <span class="ws-check-row__status ws-check-row__status--quiet">Could not check</span>
+        <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
+      </button></li>
+      <li><button type="button" class="ws-check-row__row" aria-expanded="false" aria-label="AI answers, not checked, Could not check">
+        <span class="ws-check-row__name">AI answers</span>
+        <span class="ws-check-row__ticks" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
+        <span class="ws-check-row__score"><span class="ws-check-row__none" aria-hidden="true"></span><span class="ws-sr">Not checked</span></span>
+        <span class="ws-check-row__status ws-check-row__status--quiet">Could not check</span>
+        <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8"/></svg>
+      </button></li>
+    </ul>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">Fix rows (Seth 308:2466): every row 56 at least, with an act or without; the open fix is sunk, its act primary, its panel on the title's edge; a done fix keeps its row, its title muted and a line under it</span>
+    <div class="ws-stack ws-stack--group">
+      <div class="ws-stack">
+        <h3 class="ws-section">Website <span class="ws-muted">0 of 2 done</span></h3>
+        <ul class="ws-check-row" aria-label="Website fixes">
+          <li class="ws-check-row__fix">
+            <div class="ws-check-row__line">
+              <label class="ws-check"><input type="checkbox" aria-label="Done: Speed up the homepage on phones"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span></label>
+              <button type="button" class="ws-check-row__open" aria-expanded="false" aria-controls="fx-1"><span class="ws-check-row__title">Speed up the homepage on phones</span><span class="ws-check-row__effort">A few days</span></button>
+              <button type="button" class="ws-btn ws-btn--well ws-check-row__act">Send to my web person</button>
+              <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
+            </div>
+            <div class="ws-check-row__detail ws-unfold" id="fx-1" hidden><p class="ws-body">Your homepage takes 6.2 seconds to show on a phone.</p></div>
+          </li>
+          <li class="ws-check-row__fix">
+            <div class="ws-check-row__line">
+              <label class="ws-check"><input type="checkbox" aria-label="Done: Run an accessibility check and fix the flagged issues"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span></label>
+              <button type="button" class="ws-check-row__open" aria-expanded="true" aria-controls="fx-2"><span class="ws-check-row__title">Run an accessibility check and fix the flagged issues</span><span class="ws-check-row__effort">An hour or two</span></button>
+              <button type="button" class="ws-btn ws-btn--primary ws-check-row__act">Send to my web person</button>
+              <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
+            </div>
+            <div class="ws-check-row__detail ws-unfold" id="fx-2"><p class="ws-body">Buyers and sellers using assistive technology need to read your content and use your tools too. Grow checks for 90 or more.</p></div>
+          </li>
+        </ul>
+      </div>
+      <div class="ws-stack">
+        <h3 class="ws-section">Social <span class="ws-muted">1 of 2 done</span></h3>
+        <ul class="ws-check-row" aria-label="Social fixes">
+          <li class="ws-check-row__fix ws-check-row__fix--done">
+            <div class="ws-check-row__line">
+              <label class="ws-check"><input type="checkbox" checked aria-label="Done: Reply to comments on your posts within a day"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span></label>
+              <button type="button" class="ws-check-row__open" aria-expanded="false"><span class="ws-check-row__title">Reply to comments on your posts within a day</span><span class="ws-check-row__meta">Done today, Grow checks it again Nov 9</span></button>
+              
+              <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
+            </div>
+          </li>
+          <li class="ws-check-row__fix">
+            <div class="ws-check-row__line">
+              <label class="ws-check"><input type="checkbox" aria-label="Done: Cross-promote your Instagram on your other channels"><span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span></label>
+              <button type="button" class="ws-check-row__open" aria-expanded="false"><span class="ws-check-row__title">Cross-promote your Instagram on your other channels</span><span class="ws-check-row__effort">An hour or two</span></button>
+              
+              <svg class="ws-check-row__chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 560px;">
+    <span class="ws-muted">Loading: the rows' places as ghosts in the chart colours' sweep</span>
+    <ul class="ws-check-row" aria-busy="true" aria-label="Checks, loading">
+      <li><div class="ws-check-row__row" aria-hidden="true">
+        <span class="ws-check-row__name"><span class="ws-check-row__ghost ws-shimmer" style="width: 70%;"></span></span>
+        <span class="ws-check-row__ticks ws-shimmer"></span>
+      </div></li>
+      <li><div class="ws-check-row__row" aria-hidden="true">
+        <span class="ws-check-row__name"><span class="ws-check-row__ghost ws-shimmer" style="width: 70%;"></span></span>
+        <span class="ws-check-row__ticks ws-shimmer"></span>
+      </div></li>
+    </ul>
+  </div>
+
+</div>
+<script>
+  // Open and close a fix the way an app does (aria-expanded on its open button, hidden on its panel, its act primary
+  // while open), so the fold shows here: the panel grows open and the chevron turns on the fold spring.
+  for (const b of document.querySelectorAll('.ws-check-row__open[aria-controls]')) b.addEventListener('click', () => {
+    const open = b.getAttribute('aria-expanded') !== 'true';
+    b.setAttribute('aria-expanded', String(open));
+    document.getElementById(b.getAttribute('aria-controls')).hidden = !open;
+    const act = b.parentElement.querySelector('.ws-check-row__act');
+    act?.classList.toggle('ws-btn--primary', open);
+    act?.classList.toggle('ws-btn--well', !open);
+  });
+</script>
+</body>
+</html>

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

@@ -0,0 +1,88 @@
+/* ---- CheckRow: Seth's rimmed list of check rows (301:1728) and fix rows (308:2466). A check row is one grid every row
+   shares (name 150, ticks the rest, score 56 right, status 112 right, chevron 16, 24 apart, 56 tall), so the scores
+   stack in one column. A fix row is a box, the fix and its effort, its act and a chevron; it opens in place onto a
+   cream panel on the title's edge. Every row takes the same 56 px minimum, so lists with and without acts line up. ---- */
+.ws-check-row { --ws-check-row-name: calc(var(--space-9xl) * 0.75); --ws-check-row-score: calc(var(--space-3xl) + var(--space-xs)); --ws-check-row-status: calc(var(--space-6xl) + var(--space-md)); --ws-check-row-box: calc(var(--space-md) + var(--space-3xs)); --ws-check-row-h: calc(var(--space-3xl) + var(--space-xs)); --ws-check-row-tone: var(--ws-rating-strong); container: ws-check-row / inline-size; display: flex; flex-direction: column; padding: var(--ws-rim); border-radius: var(--ws-radius-card); background: var(--ws-tray); }
+/* Cream rows joined by 0.5 px lines, full width, drawn inside the row's top (Seth's 56 includes its line, so a border
+   would add 0.5 a row); an open check row's sunk ground covers its li, so it draws the line too. The rim's inner corners
+   on the first and last. */
+.ws-check-row > li { background: var(--color-bg-page); }
+.ws-check-row > li + li, .ws-check-row > li + li > .ws-check-row__row:is([aria-expanded="true"], [aria-current="true"]) { box-shadow: inset 0 var(--ws-hairline) 0 var(--ws-edge); }
+.ws-check-row > li:first-child { border-top-left-radius: var(--ws-radius-card-inner); border-top-right-radius: var(--ws-radius-card-inner); }
+.ws-check-row > li:last-child { border-bottom-left-radius: var(--ws-radius-card-inner); border-bottom-right-radius: var(--ws-radius-card-inner); }
+
+/* A check row: the whole row opens its check (a button with aria-expanded, or a link). */
+.ws-check-row__row { display: grid; grid-template-columns: var(--ws-check-row-name) minmax(0, 1fr) var(--ws-check-row-score) var(--ws-check-row-status) var(--ws-icon); grid-template-areas: "name ticks score status chev"; align-items: center; gap: var(--space-lg); width: 100%; min-height: var(--ws-check-row-h); padding: var(--space-sm) var(--space-md) var(--space-sm) var(--ws-card-inset); border: 0; border-radius: inherit; background: transparent; text-align: left; text-decoration: none; color: inherit; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-check-row__row:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+@media (hover: hover) { .ws-check-row__row:not([aria-expanded="true"], [aria-current="true"]):hover { background-color: var(--ws-hover-faint); } }
+/* Open (its drawer showing): the sunk cream, the status in navy. Nothing else moves. */
+.ws-check-row__row[aria-expanded="true"], .ws-check-row__row[aria-current="true"] { background-color: var(--ws-surface-sunk); }
+.ws-check-row__name { grid-area: name; min-width: 0; font-size: var(--ws-text-section); line-height: var(--ws-leading-row); font-weight: 500; color: var(--color-text-heading); }
+/* The ticks: 40 equal ticks across the column, 32 tall, 3 apart, 1 px corners; lit ones (b) in the row's rating tone,
+   the rest (i) the empty track. Strong teal, middle mid blue, needs work pink (D10). */
+.ws-check-row__ticks { grid-area: ticks; display: flex; gap: var(--ws-halo); height: var(--space-xl); min-width: 0; }
+.ws-check-row__ticks > * { flex: 1 0 0; min-width: var(--ws-line); border-radius: var(--ws-radius-bar); background: var(--ws-track); }
+.ws-check-row__ticks > b { background: var(--ws-check-row-tone); }
+.ws-check-row__ticks--middle { --ws-check-row-tone: var(--ws-rating-middle); }
+.ws-check-row__ticks--needs-work { --ws-check-row-tone: var(--ws-rating-needs-work); }
+.ws-check-row__score { grid-area: score; text-align: right; font-size: var(--ws-text-figure-row); line-height: var(--ws-leading-figure-row); font-weight: 400; color: var(--color-text-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* Not checked: a short rule in place of the figure (its words for a screen reader), on the figures' right edge. */
+.ws-check-row__none { display: block; width: calc(var(--space-md) + var(--space-xxs)); height: var(--ws-chart-line); margin-left: auto; border-radius: var(--ws-radius-bar); background: var(--ws-mark-muted); }
+.ws-check-row__status { grid-area: status; text-align: right; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-body); }
+.ws-check-row__status--quiet { color: var(--color-text-muted); }
+.ws-check-row__row[aria-expanded="true"] .ws-check-row__status, .ws-check-row__row[aria-current="true"] .ws-check-row__status { color: var(--color-text-heading); }
+.ws-check-row__chev { grid-area: chev; width: var(--ws-icon); height: var(--ws-icon); color: var(--color-text-heading); }
+/* Arrival: the lit ticks grow up from their base, left to right, North's 4 ms ripple a tick (where the browser can count
+   siblings; elsewhere they grow together). */
+@media (prefers-reduced-motion: no-preference) {
+  .ws-check-row__line > .ws-check-row__chev { transition: transform var(--ws-spring-fold-duration) var(--ws-spring-fold); }
+  .ws-check-row__ticks > b { transform-origin: bottom; animation: ws-grow-up var(--ws-duration-fill) var(--ws-ease-settle) backwards; animation-delay: calc(sibling-index() * var(--ws-ripple)); }
+}
+/* Loading: the name and the ticks as ghosts in the chart colours' sweep (add ws-shimmer). */
+.ws-check-row__ghost { display: block; height: calc(var(--space-xs) + var(--space-3xs)); border-radius: var(--ws-radius-bar); background: var(--ws-track); }
+.ws-check-row__ghost.ws-shimmer, .ws-check-row__ticks.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
+
+/* A fix row: the box (outside the open target), the fix and its effort, its act, the chevron. The open button's hit area
+   covers the whole line; the box and the act sit above it. Every part sits on the title's first line (22), however many
+   lines the words run to (a done line under the title, a long fix): the box and the chevron are that line's height, the
+   act is centred on it (its margins trim it to the line), and a one-line row's line sits mid-row. */
+.ws-check-row__fix { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-check-row__line { position: relative; display: grid; border-radius: inherit; grid-template-columns: var(--ws-check-row-box) minmax(0, 1fr) auto var(--ws-icon); grid-template-areas: "box words act chev"; align-items: start; align-content: center; column-gap: var(--space-md); min-height: var(--ws-check-row-h); padding: var(--space-sm) var(--space-md) var(--space-sm) var(--ws-card-inset); }
+.ws-check-row__line > .ws-check { grid-area: box; position: relative; z-index: 1; align-items: center; justify-content: center; width: var(--ws-check-row-box); height: var(--ws-leading-section); padding: 0; }
+.ws-check-row__line > .ws-check-row__chev { height: var(--ws-leading-section); }
+/* Its target: 24 square (the box column is 18, the line 22), 40 on touch, drawn as a hit area so nothing moves. */
+.ws-check-row__line > .ws-check::after { content: ""; position: absolute; inset: calc((100% - var(--space-lg)) / 2); }
+@media (pointer: coarse) { .ws-check-row__line > .ws-check::after { inset: calc((100% - var(--ws-touch)) / 2); } }
+.ws-check-row__line .ws-check__box { margin-top: 0; }
+.ws-check-row__open { grid-area: words; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xxs-plus) var(--space-xs); min-width: 0; padding: 0; border: 0; border-radius: inherit; background: none; text-align: left; color: inherit; cursor: pointer; }
+.ws-check-row__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
+.ws-check-row__open:focus-visible { outline: 0; }
+.ws-check-row__open:focus-visible::after { box-shadow: var(--ws-focus-inset); }
+.ws-check-row__title { font-size: var(--ws-text-section); line-height: var(--ws-leading-section); font-weight: 500; color: var(--color-text-heading); }
+.ws-check-row__effort { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 400; color: var(--color-text-muted); }
+.ws-check-row__meta { flex-basis: 100%; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--ws-word-positive); }
+/* The act (Seth's 32 well, primary when open; 40 on touch) is trimmed to the title's line, so it centres on it. */
+.ws-check-row__act { --ws-check-row-act: var(--ws-control-h); grid-area: act; position: relative; z-index: 1; margin-block: calc((var(--ws-leading-section) - var(--ws-check-row-act)) / 2); }
+.ws-check-row__act.ws-btn--sm { --ws-check-row-act: var(--ws-control-h-sm); }
+@media (pointer: coarse) { .ws-check-row .ws-check-row__act { --ws-check-row-act: var(--ws-touch); } }
+/* Hover: the faint wash laid over the cream (a background-color would replace the cream and let the grey rim through). */
+@media (hover: hover) { .ws-check-row__fix:not(:has(> .ws-check-row__line [aria-expanded="true"])):hover { background-image: linear-gradient(var(--ws-hover-faint), var(--ws-hover-faint)); } }
+/* Open: the row sunk, its title semibold (the size never changes), the chevron up, the panel under it. */
+.ws-check-row__fix:has(> .ws-check-row__line [aria-expanded="true"]) { background-color: var(--ws-surface-sunk); }
+.ws-check-row__open[aria-expanded="true"] .ws-check-row__title { font-weight: 600; }
+.ws-check-row__line:has([aria-expanded="true"]) > .ws-check-row__chev { transform: rotate(180deg); }
+/* Done: the title muted, the line under it in the positive word. */
+.ws-check-row__fix--done .ws-check-row__title { color: var(--color-text-muted); }
+/* The panel: cream, 6 px corners, 24 inside, its left edge on the title's (20 + the box + 16), 16 from the right and below. */
+.ws-check-row__detail { margin: 0 var(--space-md) var(--space-md) calc(var(--ws-card-inset) + var(--ws-check-row-box) + var(--space-md)); padding: var(--space-lg); border-radius: var(--ws-radius-row); background: var(--color-bg-page); }
+.ws-check-row__detail[hidden] { display: none; }
+
+/* Narrow: a check row stacks the name and status over the ticks, the score beside them; a fix row's act drops under its words. */
+@container ws-check-row (max-width: 40rem) {
+  .ws-check-row__row { grid-template-columns: minmax(0, 1fr) auto var(--ws-icon); grid-template-areas: "name score chev" "status score chev" "ticks ticks ticks"; gap: var(--space-xxs) var(--space-sm); }
+  .ws-check-row__status { text-align: left; }
+  .ws-check-row__ticks { margin-top: var(--space-xs); }
+  .ws-check-row__line { grid-template-columns: var(--ws-check-row-box) minmax(0, 1fr) var(--ws-icon); grid-template-areas: "box words chev" ". act ."; }
+  .ws-check-row__act { justify-self: start; margin-block: var(--space-xs) 0; }
+  .ws-check-row__detail { margin-left: var(--space-md); }
+}

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

@@ -15,12 +15,21 @@ A real native checkbox under a skin, drawn with a navy tick when chosen, its lab
 
 ## Anatomy
 
-- Box: 16px (`--ws-icon`) square, `--radius-xs` (2px, the designer's ladder step for "a chip, a short bar, a tick") corners,
-  1px (`--ws-line`) edge in `--ws-edge-card` at rest.
-- Chosen: the box fills `--color-text-heading` (navy), the edge turns navy too, and a white tick draws inside.
-- Label: 14px medium, `--color-text-heading`, beside the box; a description line below it in `.ws-muted` (`--color-text-muted`) (12px,
-  `--color-text-muted`).
-- The whole row, box and label and description together, is the tap target, not an 18px square alone.
+- Box: Seth's action box, 18 px square, 4 px corners (`--ws-radius-control`), a 1.5 px navy edge at rest (12:1 on the
+  cream, past the 3:1 a control asks), drawn inside so the box is exactly 18.
+- Chosen: the box fills navy and a 12 px cream tick (stroke 1.75, round caps) sits in its middle. Some chosen (a select
+  all): a cream dash instead of the tick.
+- Label: 14 / 20 medium navy, 10 px from the box (`--space-xs-plus`); a description below it in `.ws-muted`, 2 apart.
+  The box sits on the label's first line (1 px down).
+- `--quiet`: Seth's status box (select all, replied), its edge the muted grey: his #D3D3D3 is 1.45:1, under the 3:1 a
+  control asks, so the AA step is used.
+- `--sm`: Tally's 16 px box with a 12 / 16 label, 8 from it, for a dense row.
+- `--step`: a checklist step (Seth's Steps, 308): the label 14 / 20 regular, and muted (`--color-text-muted`) once its
+  box is ticked. Steps sit 12 apart: put them in a `ws-stack--loose`.
+- `--control`: Seth's control words (313, "Mark as replied"): the label 13 / 18 medium on an 18 px line.
+- The row is its label's line (20 tall, no padding), as wide as its words and no wider, so a click far right of the
+  words does nothing in a column. The whole row, box and label and description together, is the target, at least
+  24 tall through a hit area that moves nothing.
 
 ## Variants and sizes
 
@@ -28,36 +37,42 @@ A real native checkbox under a skin, drawn with a navy tick when chosen, its lab
 | --- | --- | --- |
 | Plain | label only | a short setting ("Send a copy to the team channel") |
 | With description | label plus a muted line under it | a setting that needs one more sentence to be clear |
+| `--quiet` | the box's edge in the muted grey | a status or a select all beside rows of action boxes (Seth's Review inbox) |
+| `--sm` | a 16 px box, a 12 / 16 label | a dense row of chart controls (Tally's "Cancelled") |
+| `--step` | a 14 / 20 regular label, muted once done | a checklist's steps, 12 apart (`ws-stack--loose`) |
+| `--control` | a 13 / 18 medium label | a status act in a row ("Mark as replied") |
 
-There is one size.
+Sizes: 18 (the default) and 16 (`--sm`).
 
 ## States
 
-- **Default (not chosen):** the cream box with the fine grey edge.
-- **Hover:** the row may take a faint sunk tint where it sits in a list; the box itself does not change at rest.
-- **Focus:** the kit's focus halo (`--shadow-focus-ring`) around the box, from the native input's own focus, not a
-  hand-rolled one.
+- **Default (not chosen):** the cream box with its navy edge.
+- **Hover (a mouse only):** the box takes the navy wash while it is not chosen.
+- **Focus:** the kit's ring, 2 px navy, 2 px out, round the box, from the native input's own focus.
 - **Pressed:** the native input's own press; nothing is drawn for it beyond what the browser gives.
-- **Selected (chosen):** navy fill, navy edge, white tick. **The system's rule is navy, not the kit's salmon tick**: the kit
-  draws its chosen state in salmon, which the system reports as a gap and overrides.
+- **Pictured states (a preview or a mockup):** `is-hover` on the label draws the wash, `is-focus` the ring round the box.
+- **Done (a step):** with `--step`, a ticked step's label turns muted, so what is left reads first.
+- **Selected (chosen):** navy fill, the cream tick popping in (the small-mark overshoot, `--ws-ease-pop`). Navy, never
+  the kit's salmon tick.
+- **Some chosen:** `input.indeterminate = true` draws the cream dash.
 - **Pending / loading:** not applicable; a checkbox has no network state of its own.
 - **Disabled:** 50% opacity on the whole row, pointer events off; a disabled, chosen box still shows its tick so the
   state stays legible.
-- **Error:** not a state the kit's `Checkbox` defines; a group needing one draws its own message below, as a field does.
+- **Error:** a box that must be ticked (a consent) takes the salmon's AA step as its edge (`aria-invalid="true"`) and a
+  message below its label that says what to do.
 - **Empty:** not applicable; a checkbox is always one of two states.
-- **Long label:** the label wraps onto a second line; the box stays aligned to the first line's cap height
-  (`margin-top`), not centred against the wrapped block.
+- **Long label:** the label wraps; the box stays on the first line, not centred against the wrapped block.
 - **Narrow:** the row shrinks with its column; only the label wraps, never the box.
-- **Touch:** the whole label, not the 16px box, is the tap target, which clears the 40px floor in a list row's own
-  height.
+- **Touch:** one line is a 40 px row (the house's floor), the box still on the label's first line.
+- **Dark:** the navy edge and fill become the light ink, the tick the dark act words.
 
 ## Behaviour
 
 - Keyboard: a native `<input type="checkbox">`; Tab reaches it, Space toggles it.
 - Pointer / touch: clicking or tapping anywhere in the label toggles it, since the label is part of the control.
-- Touch: the row (not just the box) is the target, so phones never need an 18px precision tap.
-- Motion: the fill and edge colour transition over `--ws-duration-instant` on `--ws-ease-soft`; nothing moves under
-  `prefers-reduced-motion: reduce`.
+- Touch: the row (not just the box) is the target, so phones never need an 18 px precision tap.
+- Motion: the fill over the hover beat; the tick pops in over the settle beat on `--ws-ease-pop`; still under reduced
+  motion.
 
 ## Content
 
@@ -88,4 +103,25 @@ There is one size.
 
 **Derived from**: the kit's own `Checkbox` contract and its native-input-under-a-skin reasoning, with the tick
 overridden to navy instead of the kit's salmon (a reported gap, 21 Oct 2026; the same gap applies to `Radio`).
-**Precedent**: the first product built on the system.
+**Precedent**: the first product built on the system. 0.5.0: Seth's action box (Fixes 308:2509, 308:2594; Review inbox
+313:2746, 313:2960; Tally 319:3468): 18 px, 4 px corners, a 1.5 px navy edge, a 12 px cream tick with a 1.75 stroke;
+his status box, taken to 3:1.
+
+## Markup
+
+```html
+<label class="ws-check">
+  <input type="checkbox">
+  <span class="ws-check__box" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.25L4.75 8.5L9.5 3.75"/></svg></span>
+  <span class="ws-check__words">
+    <span class="ws-check__label">Include last month's calls</span>
+    <span class="ws-muted">Adds September's cold calls to this report</span>
+  </span>
+</label>
+```
+
+## Styles
+
+`design-system/components/Checkbox/style.css`: `ws-check` with `--quiet`, `--sm`, `--step`, `--control`, the pictured
+states `is-hover` and `is-focus`, and `ws-check--disabled` (0.4.0's disabled class, still honoured; a disabled input
+does the same on its own); `__box`, `__words`, `__label`.