@felloinnovations/brand-kit 0.5.0 → 0.5.3

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

@@ -0,0 +1,34 @@
+/* ---- InlineEdit: words that become a field in place. The rest state is a button holding the words, the editing state
+   an input or a textarea; both are __value, so they share one box (4 / 8 inside, pulled back 8 at the sides so the words
+   stay on the content edge) and the words' own type (the wrapper wears ws-section, ws-title or ws-body), and nothing jumps when
+   one turns into the other. At rest: no ground, a navy wash under the pointer, a pencil mark that shows on hover and
+   focus (always on touch, where there is no hover). Editing: the field's white ground, its fine edge and the focus
+   ring, the words keeping their own colour and weight. ---- */
+.ws-inline-edit { display: grid; gap: var(--space-3xs); min-width: 0; }
+.ws-inline-edit__value { display: block; box-sizing: border-box; width: calc(100% + var(--space-xs) * 2); min-width: 0; margin: 0 calc(var(--space-xs) * -1); padding: var(--space-xxs) var(--space-xs); border: 0; border-radius: var(--ws-radius-control); background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: start; text-wrap: inherit; overflow-wrap: anywhere; }
+button.ws-inline-edit__value { cursor: text; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) { button.ws-inline-edit__value:hover { background: var(--ws-hover); } }
+button.ws-inline-edit__value:active { background: var(--ws-hover-strong); }
+/* No value yet: the placeholder's words, still the target. */
+.ws-inline-edit__value[data-empty] { color: var(--color-text-placeholder); }
+/* The pencil after the words (a ws-icon at the words' size, 16 at most, so it sits on their line): a hint, never the only
+   target (the whole box is). */
+.ws-inline-edit__mark { width: min(1em, var(--ws-icon)); height: min(1em, var(--ws-icon)); margin-inline-start: var(--space-xxs); color: var(--color-text-muted); opacity: 0; transition: opacity var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) { button.ws-inline-edit__value:hover .ws-inline-edit__mark { opacity: 1; } }
+button.ws-inline-edit__value:focus-visible .ws-inline-edit__mark { opacity: 1; }
+@media (pointer: coarse) { .ws-inline-edit__mark { opacity: 1; } }
+/* Editing: the same box as a field. A textarea grows with its words where the browser can (field-sizing). */
+.ws-inline-edit__value:is(input, textarea) { background: var(--ws-field); box-shadow: var(--ws-shadow-hairline-in); }
+/* The ring is drawn inside the box, so it never crosses a label or a line 4 above or below. */
+.ws-inline-edit__value:focus-visible, .ws-inline-edit__value--typing { outline-offset: calc(var(--ws-focus-width) * -1); }
+textarea.ws-inline-edit__value { resize: none; field-sizing: content; }
+.ws-inline-edit__value:is(input, textarea)::placeholder { color: var(--color-text-placeholder); }
+.ws-inline-edit__value:is(input, textarea)[aria-invalid="true"] { box-shadow: inset 0 0 0 var(--ws-line) var(--ws-word-needs); }
+/* Touch: the box is 40 tall at least, at rest and editing alike (so it still does not jump), and the editing words are
+   16 at least: a field under 16 px makes iOS zoom the page. */
+@media (pointer: coarse) {
+  .ws-inline-edit__value { min-height: var(--ws-touch); }
+  .ws-inline-edit__value:is(input, textarea) { font-size: max(1em, var(--ws-text-value)); }
+}
+/* The editing state drawn still, for a preview or a mockup: the focus ring a real focus draws. */
+.ws-inline-edit__value--typing { outline: var(--ws-focus-width) solid var(--ws-focus-color); }

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

@@ -6,6 +6,8 @@ edge while typing.
 - One line of text, a number, an email or a phone number needs typing: a lead's email, a listing's address.
 - A page or panel needs a search box (the kit has no dedicated search field: `Input` with `type="search"` and its icon).
 - A form field needs a label above it and, below it, a hint or an error.
+- Someone sets a colour (an organisation's brand colours, a palette): the colour field, a swatch that opens the
+  browser's picker beside its hex.
 
 ## Not for
 
@@ -21,6 +23,9 @@ edge while typing.
 - Label: 12px medium, `--color-text-body`, above the field.
 - Words typed: 14 / 20, `--ws-field-ink`; placeholder `--color-text-placeholder` (#6E6E6E).
 - Search (`ws-search`): 36 tall (40 on touch), the 16 px glass 8 px in at the left, the words 32 in.
+- Colour field (`ws-colour-field`): a swatch (`__swatch`, a native `<input type="color">`) square at the field's height
+  (32, 40 on touch), 4 px corners, the 0.5 px card edge drawn on the swatch so a white or cream colour still shows its
+  edge; 8 apart (`--space-xs`), the hex in a plain `ws-input` beside it, tabular figures.
 - Message below: 12px, `--color-text-muted` for a hint, `--ws-word-needs` for an error, with a warning icon before it.
 
 ## Variants and sizes
@@ -29,6 +34,7 @@ edge while typing.
 | --- | --- | --- |
 | Default | 32px, as above | every field on a card or a form |
 | Search | 36px (`--ws-control-h-md`), 4px corners, a hairline, a search icon inside at the left | a page's or a panel's search box (the system's rule) |
+| Colour | a swatch square beside the hex field | a colour someone sets (brand colours, a palette) |
 
 ## States
 
@@ -53,6 +59,12 @@ edge while typing.
 
 - Keyboard: a native `<input>`; Tab moves to and from it like any field; typing and browser autofill work unmodified.
 - Pointer / touch: clicking or tapping anywhere in the box focuses it; the touch floor is 40px.
+- Colour field: the swatch opens the browser's own picker (keyboard and screen readers come with it); picking writes
+  the hex into the field, and typing a valid hex (`#` and six characters, any case) moves the swatch. An invalid hex
+  marks the field (`aria-invalid`, the error message under the pair, "Needs six characters after the #, like
+  #FEFBF9") and leaves the swatch on the last good colour. The swatch takes an `aria-label` naming the colour
+  ("Primary colour, pick from the palette"); the visible label belongs to the hex field. The swatch's fill is the
+  chosen colour itself, the one colour on a kit screen no token sets.
 - Motion: the edge over the hover beat (200 ms) on `--ws-ease-soft`; an error message rises in (`ws-arrive`); still
   under reduced motion.
 
@@ -103,9 +115,16 @@ edge while typing.
   <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="7" cy="7" r="4.5"/><path d="M13 13l-2.8-2.8"/></svg>
   <input class="ws-input ws-search" type="search" placeholder="Search" aria-label="Search leads">
 </span>
+<div class="ws-field">
+  <label class="ws-label" for="primary">Primary colour</label>
+  <span class="ws-colour-field">
+    <input class="ws-colour-field__swatch" type="color" value="#093555" aria-label="Primary colour, pick from the palette">
+    <input class="ws-input" id="primary" value="#093555" spellcheck="false" autocomplete="off" maxlength="7">
+  </span>
+</div>
 ```
 
 ## Styles
 
 `design-system/components/Input/style.css`: `ws-input` (and `--typing`, the focus drawn still), `ws-search-wrap`,
-`ws-search`. `ws-field`, `ws-label` and `ws-field-msg` are the house's (`_house.css`, Fields).
+`ws-search`, `ws-colour-field` and its `__swatch`. `ws-field`, `ws-label` and `ws-field-msg` are the house's (`_house.css`, Fields).

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

@@ -47,6 +47,30 @@
       <input class="ws-input" id="i-dis" value="FEL-00412" disabled>
     </div>
 
+    <div class="ws-field">
+      <span class="ws-muted">Colour field: the swatch opens the picker, the hex beside it</span>
+      <label class="ws-label" for="i-colour">Primary colour</label>
+      <span class="ws-colour-field">
+        <input class="ws-colour-field__swatch" type="color" value="#093555" aria-label="Primary colour, pick from the palette">
+        <input class="ws-input" id="i-colour" value="#093555" spellcheck="false" autocomplete="off" inputmode="text" maxlength="7">
+      </span>
+    </div>
+
+    <div class="ws-field">
+      <span class="ws-muted">Colour field, a light colour (the swatch keeps its edge) and an invalid hex</span>
+      <label class="ws-label" for="i-colour-bad">Page colour</label>
+      <span class="ws-colour-field">
+        <input class="ws-colour-field__swatch" type="color" value="#fefbf9" aria-label="Page colour, pick from the palette">
+        <input class="ws-input" id="i-colour-bad" value="#FEFBF" spellcheck="false" autocomplete="off" maxlength="7" aria-invalid="true" aria-describedby="i-colour-bad-msg">
+      </span>
+      <p class="ws-field-msg ws-field-msg--error" id="i-colour-bad-msg">
+        <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="M8 2.3 14.6 13.5H1.4L8 2.3Z"/><path d="M8 6.4v3"/><path d="M8 11.5v.05"/>
+        </svg>
+        Needs six characters after the #, like #FEFBF9
+      </p>
+    </div>
+
     <div class="ws-field">
       <span class="ws-muted">Search box (36px, 4px corners)</span>
       <label class="ws-label" for="i-search">Search leads</label>

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

@@ -18,6 +18,18 @@
 .ws-search-wrap { position: relative; display: flex; min-width: 0; }
 .ws-search-wrap svg { position: absolute; left: var(--space-xs); top: 50%; width: var(--ws-icon); height: var(--ws-icon); transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
 .ws-search { height: var(--ws-control-h-md); padding: 0 var(--space-sm) 0 var(--space-xl); }
+/* The colour field (#29): a swatch that opens the browser's colour picker (a native <input type="color">) and the hex
+   field beside it, 8 apart. The swatch is a square the field's height, its 4 px corners and 0.5 px edge drawn inside, so
+   a white or cream colour still shows its edge; its fill is the input's own value, the one colour the kit paints that
+   no token sets. An invalid hex marks the field and leaves the swatch on the last good colour. */
+.ws-colour-field { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
+.ws-colour-field__swatch { flex-shrink: 0; width: var(--ws-control-h); height: var(--ws-control-h); padding: 0; border: 0; border-radius: var(--ws-radius-control); background: none; cursor: pointer; }
+.ws-colour-field__swatch::-webkit-color-swatch-wrapper { padding: 0; }
+/* The edge sits on the swatch itself: the browser paints the colour over anything drawn on the input's own box. */
+.ws-colour-field__swatch::-webkit-color-swatch { border: var(--ws-hairline) solid var(--ws-edge-card); border-radius: inherit; }
+.ws-colour-field__swatch::-moz-color-swatch { border: var(--ws-hairline) solid var(--ws-edge-card); border-radius: inherit; }
+.ws-colour-field__swatch:disabled { cursor: not-allowed; opacity: 0.5; }
+.ws-colour-field .ws-input { font-variant-numeric: tabular-nums; }
 /* Touch: 40 tall (the house's touch height, restated after the field's own so it still wins), the words 16 so a phone
    does not zoom the page into the field when it takes focus (iOS zooms any field under 16 px). */
-@media (pointer: coarse) { .ws-input, .ws-search { height: var(--ws-touch); font-size: var(--ws-text-value); } }
+@media (pointer: coarse) { .ws-input, .ws-search { height: var(--ws-touch); font-size: var(--ws-text-value); } .ws-colour-field__swatch { width: var(--ws-touch); height: var(--ws-touch); } }

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

@@ -24,7 +24,29 @@ Columns of cards for a pipeline: a stage per column, a card per thing moving thr
 - A column head: at least 32 tall, the stage in 13 / 18 medium navy (`__title`), its count beside it in muted figures
   (`__count`), sentence case, flush with the cards' edge.
 - A card: `ws-card` (a link or a button when it opens the thing), 12 inside, a 28 px `Avatar` and the name (14 / 20
-  medium navy) 8 apart, a 13 / 18 muted meta line 4 under.
+  medium navy) 8 apart, a 13 / 18 muted meta line 4 under. That is the person card: a lead, an applicant.
+- The standard card (a ticket, an onboarding, a deal: anything with a kind, a figure, an owner and acts): one anatomy
+  for every board, its slots in this order, 4 apart (8 before the chips and the foot), each left out when it has nothing
+  to say, never shown blank and never reordered:
+  1. The head (`__card-head`, 18 tall): the kind and its figure on the left (`__kind`, 13 / 18 medium muted words, the
+     figure in a `strong`, semibold navy tabular: "Expansion **$28K**"), the time in stage on the right (`__age`, 13 / 18
+     muted tabular figures: "4d", "6h").
+  2. The title (`a.__open`, 14 / 20 medium navy, two lines at most, whole in its `title`): the card's link. Its cover
+     (`::after`) spans the card, so the whole card opens the thing and the focus ring is drawn round the card, 2 px out.
+     Never underlined, at rest, under the pointer or anywhere else.
+  3. The meta (`__meta`): whose it is and the last thing that happened, one short line ("Harbor Lane Realty, last
+     activity Nov 2").
+  4. The chips (`__chips`, `Chip`s 4 apart, three at most): a status ("Deferred", sunk), a milestone ("TTV1 15d", live),
+     a blocker that needs the person ("No meeting booked", needs).
+  5. The foot (`__card-foot`, 28 tall): the people on the left, a 28 px `Avatar` and the owner's name (`__name`, 13 / 18
+     body) or an `AvatarStack` for a team; on the right (`__card-end`), a tally (`__tally`: a 12 px icon and muted
+     tabular figures, "1/6", its meaning in words for a screen reader) and one `IconButton` `small`, the card's act
+     ("Move to Implementing").
+  6. An act under it (`__card-act`): one `Button` `well` `small`, full width, only when the stage waits on the person
+     for an act the board cannot show by moving the card ("Hand over", "Approve"). Never navy: a board holds many
+     cards, and a page has one navy button.
+  The card is an `article` (it holds acts, so it cannot be a link): the acts sit above the title's cover, so a press on
+  one is the act, not the card.
 - A held card (`__card--dragging`, with `aria-grabbed="true"`; the app sets both while a card is held): North's
   floating shadow (`--ws-shadow-pop`, with the dark rim) and a 1 degree tilt; the only thing on the board that floats.
 - The column under a held card (`__column--over`, set by the app while the card is over it): one step darker
@@ -37,6 +59,8 @@ Columns of cards for a pipeline: a stage per column, a card per thing moving thr
 | Variant | What changes |
 | --- | --- |
 | Default | Columns as tall as their cards; the board as tall as its tallest column |
+| Person card | `a.ws-card.__card`: a face, a name and a meta line; the whole card is the link |
+| Standard card | `article.ws-card.__card` with the six slots above; the title is the link and covers the card. Every board in an app uses it, so a ticket board and an onboarding board read alike |
 | `--fill` | The board takes the rest of a height-bound column (`flex: 1; min-height: 0`); every column runs the full height and scrolls on its own, its head stuck at the very top (over the column's 8 px padding, so no card shows above it; the title sits where the plain board's does), so the sideways bar sits at the window's foot (K16). A column that holds more than it shows fades its last 24 px into its ground, lifting at the end; a card reached by Tab scrolls clear of the stuck head |
 | Phone | The same row of 280 columns, the next one peeking in, snapping a stage at a time |
 
@@ -49,10 +73,15 @@ Columns of cards for a pipeline: a stage per column, a card per thing moving thr
   darkens a step. The app adds and removes both classes; the kit only draws them.
 - **Dropped**: the card glides to its new place and the cards it leaves close up, never teleports (North's "List rows
   reorder", `springs.reorder` .4 / 0): wrap the move in `reorder()` (below).
+- **Stalled** (a standard card past its stage's time): the time in stage takes the needs words (`--ws-word-needs`,
+  medium) and the 12 px pause mark before it, with "stalled" in words for a screen reader and in its `title` ("54 days
+  in this stage, stalled"). Nothing else on the card changes: no coloured rail, no tinted card.
+- **Needs you** (something blocks the card and it is the person's to fix): a `needs` chip saying what ("No meeting
+  booked", "Due Nov 12"), first in the chips. A card the stage waits on adds the well act under the foot.
 - **Empty**: the column keeps its full width, its head and its count; a muted sentence in place of cards. It never
   hides, which would reflow every column beside it mid-task.
-- **Loading**: ghost cards the height of a card in the chart colours' sweep (`__ghost ws-shimmer`), the heads shown at
-  once; still under reduced motion.
+- **Loading**: ghost cards the height of a card under the shimmer (`__ghost ws-shimmer`), the heads shown at
+  once; still under reduced motion. A board of standard cards takes the taller ghost (`__ghost--card`).
 - **Scrolled**: the far-edge fade while stages are hidden, gone at the end; in `--fill`, a column's foot fades while cards
   are hidden below it, gone at its end.
 - **Touch**: a card is one target (its whole box); dragging on touch needs a press-and-hold, not drawn here.
@@ -80,6 +109,10 @@ Columns of cards for a pipeline: a stage per column, a card per thing moving thr
 - A stage name is the pipeline's own word for it, sentence case, one or two words ("Offer made", not "Stage 2").
 - A card's meta line says the one thing worth knowing at a glance (time in stage, who is waited on), never the whole
   record.
+- A standard card's kind is one sentence-case word ("New", "Expansion", "Dispute"), never an uppercase eyebrow; its
+  figure is short ("$28K", "$1,321"). Time in stage is a bare figure and a unit ("54d", "6h"), its meaning in the
+  `title`.
+- A chip is a fact, two or three words; a tally is a bare figure ("1/6") that says what it counts to a screen reader.
 - No em dashes; the count is a bare number.
 
 ## Props
@@ -87,7 +120,8 @@ Columns of cards for a pipeline: a stage per column, a card per thing moving thr
 | Name | Type | Meaning |
 | --- | --- | --- |
 | `columns` | `{ stage, label, count, cards: CardItem[] }[]` | The board's stages, in order |
-| `CardItem` | `{ id, name, initials, meta, href? }` | One card's content |
+| `CardItem` | `{ id, name, initials, meta, href? }` | One person card's content |
+| `BoardCard` | `{ id, kind?, figure?, age?, stalled?, title, href, meta?, chips?: { label, tone }[], people: { name, initials }[], tally?: { value, label }, act?: { label, onClick }, stageAct?: { label, onClick } }` | One standard card: `act` is the foot's icon act, `stageAct` the well button under it |
 | `onMove` | `(cardId, toStage) => void` | Called when a card changes column |
 | `draggingId` | `string \| null` | Which card, if any, is currently lifted |
 | `fill` | `boolean` | The board page form (`--fill`) |
@@ -101,6 +135,12 @@ Columns of cards for a pipeline: a stage per column, a card per thing moving thr
 - **A board page shows its sideways bar** (K16): when the board is the page, use `--fill` so the bar is never below the
   fold, and each stage scrolls on its own.
 - **The head is sentence case** (D6): 13 / 18 medium, no uppercase eyebrow.
+- **One card anatomy per app.** Every board with kinds, figures and owners uses the standard card, its slots in their
+  order; a board never draws its own card.
+- **Never** a coloured rail down a card's edge, a hue per column or per stage (a stage's dot, a tinted column), an
+  underlined title, a navy button on a card, or more than one act in the foot. Urgency is words: the stalled time, a
+  needs chip. Not a salmon rail for critical and a grey one for the rest, not a purple dot on one stage, not one card's
+  title in mid blue with an underline, not a navy "Hand over" on every card in the column.
 
 ## Source
 
@@ -108,7 +148,9 @@ Columns of cards for a pipeline: a stage per column, a card per thing moving thr
   flat-except-dragged rules; North's floating shadow family and its edge fade; the K16 audit (Revenue OS: a 6-stage
   board 638 px tall with its sideways bar at y 1,107 in a 900 px window).
 - **Precedent**: an intentional addition decided from the system, 26 Oct 2026, generalised from the first product's
-  pipeline board; `--fill` added in 0.5.0 (4 Nov 2026).
+  pipeline board; `--fill` added in 0.5.0 (4 Nov 2026). The standard card (0.5.2, 10 Nov 2026) from the field: an app's
+  ticket board and onboarding board each drew their own card (rails per column, a stage hue, one title underlined), so
+  the two boards did not match.
 
 ## Markup
 
@@ -132,6 +174,28 @@ Columns of cards for a pipeline: a stage per column, a card per thing moving thr
 </div>
 ```
 
+The standard card (in a column, in place of the person card):
+
+```html
+<article class="ws-card ws-kanban-board__card">
+  <div class="ws-kanban-board__card-head">
+    <span class="ws-kanban-board__kind">Expansion <strong>$28K</strong></span>
+    <span class="ws-kanban-board__age ws-kanban-board__age--stalled" title="40 days in this stage, stalled"><svg viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"><rect x="3" y="2.5" width="2" height="7" rx="0.5"/><rect x="7" y="2.5" width="2" height="7" rx="0.5"/></svg>40d<span class="ws-sr"> in this stage, stalled</span></span>
+  </div>
+  <a class="ws-kanban-board__open" href="#mesa" title="Mesa Group, Felix expansion">Mesa Group, Felix expansion</a>
+  <span class="ws-kanban-board__meta">Signed Sep 11</span>
+  <div class="ws-kanban-board__chips"><span class="ws-chip ws-chip--live"><span class="ws-chip__label">TTV1 15d</span></span></div>
+  <div class="ws-kanban-board__card-foot">
+    <span class="ws-avatar-stack" role="img" aria-label="Hal Dorn and Ella Sim"><span class="ws-avatar ws-avatar--sm">HD</span><span class="ws-avatar ws-avatar--sm">ES</span></span>
+    <span class="ws-kanban-board__card-end">
+      <span class="ws-kanban-board__tally" title="1 of 6 tasks done"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 6.5l2.25 2.25L9.5 3.5"/></svg>1/6<span class="ws-sr"> tasks done</span></span>
+      <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Move to Graduated" title="Move to Graduated"><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="M3 8h10M9 4l4 4-4 4"/></svg></button>
+    </span>
+  </div>
+  <button type="button" class="ws-btn ws-btn--well ws-btn--sm ws-kanban-board__card-act">Hand over</button>
+</article>
+```
+
 ## Styles
 
 `design-system/components/KanbanBoard/style.css`, in `bundle.css` and `fello.css`. Dark and the navy ground come from

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

@@ -74,6 +74,135 @@
     </div>
   </div>
 
+  <div class="ws-stack">
+    <span class="ws-muted">The standard card, one anatomy for every board: the kind and its figure with the time in stage, the title (two lines, the card's link), the meta, the chips, the foot (people, a tally, one icon act), one well act under it when the card waits on the person. A stall is the needs words and the pause mark, never a coloured rail. Tickets</span>
+    <div class="ws-kanban-board" role="region" aria-label="Ticket stages" tabindex="0">
+
+      <section class="ws-kanban-board__column" aria-labelledby="kt-new">
+        <div class="ws-kanban-board__head"><h3 class="ws-kanban-board__title" id="kt-new">New <span class="ws-kanban-board__count">70</span></h3></div>
+        <article class="ws-card ws-kanban-board__card">
+          <div class="ws-kanban-board__card-head">
+            <span class="ws-kanban-board__kind">Dispute <strong>$1,321</strong></span>
+            <span class="ws-kanban-board__age ws-kanban-board__age--stalled" title="Quiet for 7 days"><svg viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"><rect x="3" y="2.5" width="2" height="7" rx="0.5"/><rect x="7" y="2.5" width="2" height="7" rx="0.5"/></svg>7d<span class="ws-sr"> quiet, stalled</span></span>
+          </div>
+          <a class="ws-kanban-board__open" href="#t1" title="Dispute raised on the October invoice by the team's broker">Dispute raised on the October invoice by the team's broker</a>
+          <span class="ws-kanban-board__meta">Harbor Lane Realty, last activity Nov 2</span>
+          <div class="ws-kanban-board__chips"><span class="ws-chip ws-chip--needs"><span class="ws-chip__label">Critical</span></span><span class="ws-chip ws-chip--needs"><span class="ws-chip__label">Due Nov 12</span></span></div>
+          <div class="ws-kanban-board__card-foot">
+            <span class="ws-kanban-board__who"><span class="ws-avatar ws-avatar--sm" aria-hidden="true">VC</span><span class="ws-kanban-board__name" title="Vasu Chandran">Vasu Chandran</span></span>
+            <span class="ws-kanban-board__card-end">
+              <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Move to In progress" title="Move to In progress"><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="M3 8h10M9 4l4 4-4 4"/></svg></button>
+            </span>
+          </div>
+        </article>
+        <article class="ws-card ws-kanban-board__card">
+          <div class="ws-kanban-board__card-head">
+            <span class="ws-kanban-board__kind">Churn <strong>$4.2K</strong></span>
+            <span class="ws-kanban-board__age" title="6 hours in this stage">6h</span>
+          </div>
+          <a class="ws-kanban-board__open" href="#t2" title="Wants to cancel after the price change">Wants to cancel after the price change</a>
+          <span class="ws-kanban-board__meta">Oakridge Homes Group, last activity today</span>
+          <div class="ws-kanban-board__card-foot">
+            <span class="ws-kanban-board__who"><span class="ws-avatar ws-avatar--sm" aria-hidden="true">AY</span><span class="ws-kanban-board__name" title="Ayan Roy">Ayan Roy</span></span>
+            <span class="ws-kanban-board__card-end">
+              <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Move to In progress" title="Move to In progress"><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="M3 8h10M9 4l4 4-4 4"/></svg></button>
+            </span>
+          </div>
+        </article>
+      </section>
+
+      <section class="ws-kanban-board__column" aria-labelledby="kt-progress">
+        <div class="ws-kanban-board__head"><h3 class="ws-kanban-board__title" id="kt-progress">In progress <span class="ws-kanban-board__count">339</span></h3></div>
+        <article class="ws-card ws-kanban-board__card">
+          <div class="ws-kanban-board__card-head">
+            <span class="ws-kanban-board__kind">Integration</span>
+            <span class="ws-kanban-board__age" title="4 days in this stage">4d</span>
+          </div>
+          <a class="ws-kanban-board__open" href="#t3" title="Leads stop syncing to the CRM after the second login">Leads stop syncing to the CRM after the second login</a>
+          <span class="ws-kanban-board__meta">The Connors Team, last activity Nov 5</span>
+          <div class="ws-kanban-board__chips"><span class="ws-chip ws-chip--sunk"><span class="ws-chip__label">Deferred</span></span><span class="ws-chip"><span class="ws-chip__label">Integration setup</span></span></div>
+          <div class="ws-kanban-board__card-foot">
+            <span class="ws-kanban-board__who"><span class="ws-avatar ws-avatar--sm" aria-hidden="true">TM</span><span class="ws-kanban-board__name" title="Tamara Mendes-Okonkwo">Tamara Mendes-Okonkwo</span></span>
+            <span class="ws-kanban-board__card-end">
+              <span class="ws-kanban-board__tally" title="2 replies"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="1.5" y="2.5" width="9" height="7" rx="1"/><path d="M2 3.5l4 3 4-3"/></svg>2<span class="ws-sr"> replies</span></span>
+              <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Move to Waiting on customer" title="Move to Waiting on customer"><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="M3 8h10M9 4l4 4-4 4"/></svg></button>
+            </span>
+          </div>
+        </article>
+      </section>
+
+      <section class="ws-kanban-board__column" aria-labelledby="kt-wait" aria-busy="true">
+        <div class="ws-kanban-board__head"><h3 class="ws-kanban-board__title" id="kt-wait">Waiting on customer</h3></div>
+        <div class="ws-kanban-board__ghost ws-kanban-board__ghost--card ws-shimmer"></div>
+      </section>
+
+    </div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">The same card on an onboarding board: the kind and the deal's figure, the stall, milestones as chips, the team as a stack, tasks as a tally, and the one act this stage waits on (Hand over) as a well button</span>
+    <div class="ws-kanban-board" role="region" aria-label="Onboarding stages" tabindex="0">
+
+      <section class="ws-kanban-board__column" aria-labelledby="ko-sched">
+        <div class="ws-kanban-board__head"><h3 class="ws-kanban-board__title" id="ko-sched">Scheduling <span class="ws-kanban-board__count">15</span></h3></div>
+        <article class="ws-card ws-kanban-board__card">
+          <div class="ws-kanban-board__card-head">
+            <span class="ws-kanban-board__kind">New <strong>$26K</strong></span>
+            <span class="ws-kanban-board__age ws-kanban-board__age--stalled" title="54 days in this stage, stalled"><svg viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"><rect x="3" y="2.5" width="2" height="7" rx="0.5"/><rect x="7" y="2.5" width="2" height="7" rx="0.5"/></svg>54d<span class="ws-sr"> in this stage, stalled</span></span>
+          </div>
+          <a class="ws-kanban-board__open" href="#o1" title="Bayview Real Estate Team, Felix expansion with a long name that wraps">Bayview Real Estate Team, Felix expansion with a long name that wraps</a>
+          <div class="ws-kanban-board__chips"><span class="ws-chip ws-chip--needs"><span class="ws-chip__label">No meeting booked</span></span></div>
+          <div class="ws-kanban-board__card-foot">
+            <span class="ws-avatar-stack" role="img" aria-label="Tara Vale and Josh Smith"><span class="ws-avatar ws-avatar--sm">TV</span><span class="ws-avatar ws-avatar--sm">JS</span></span>
+            <span class="ws-kanban-board__card-end">
+              <span class="ws-kanban-board__tally" title="0 of 1 messages sent"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="1.5" y="2.5" width="9" height="7" rx="1"/><path d="M2 3.5l4 3 4-3"/></svg>0/1<span class="ws-sr"> messages sent</span></span>
+              <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Move to Implementing" title="Move to Implementing"><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="M3 8h10M9 4l4 4-4 4"/></svg></button>
+            </span>
+          </div>
+        </article>
+      </section>
+
+      <section class="ws-kanban-board__column" aria-labelledby="ko-opt">
+        <div class="ws-kanban-board__head"><h3 class="ws-kanban-board__title" id="ko-opt">Optimizing <span class="ws-kanban-board__count">66</span></h3></div>
+        <article class="ws-card ws-kanban-board__card">
+          <div class="ws-kanban-board__card-head">
+            <span class="ws-kanban-board__kind">New <strong>$39K</strong></span>
+            <span class="ws-kanban-board__age" title="27 days in this stage">27d</span>
+          </div>
+          <a class="ws-kanban-board__open" href="#o2" title="Linden Indy Realty, onboarding">Linden Indy Realty, onboarding</a>
+          <div class="ws-kanban-board__chips"><span class="ws-chip ws-chip--live"><span class="ws-chip__label">TTV1 15d</span></span></div>
+          <div class="ws-kanban-board__card-foot">
+            <span class="ws-avatar-stack" role="img" aria-label="Mia Lund and Ravi Bose"><span class="ws-avatar ws-avatar--sm">ML</span><span class="ws-avatar ws-avatar--sm">RB</span></span>
+            <span class="ws-kanban-board__card-end">
+              <span class="ws-kanban-board__tally" title="3 of 4 tasks done"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 6.5l2.25 2.25L9.5 3.5"/></svg>3/4<span class="ws-sr"> tasks done</span></span>
+              <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Move to Review and handoff" title="Move to Review and handoff"><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="M3 8h10M9 4l4 4-4 4"/></svg></button>
+            </span>
+          </div>
+        </article>
+      </section>
+
+      <section class="ws-kanban-board__column" aria-labelledby="ko-review">
+        <div class="ws-kanban-board__head"><h3 class="ws-kanban-board__title" id="ko-review">Review and handoff <span class="ws-kanban-board__count">9</span></h3></div>
+        <article class="ws-card ws-kanban-board__card">
+          <div class="ws-kanban-board__card-head">
+            <span class="ws-kanban-board__kind">Expansion <strong>$28K</strong></span>
+            <span class="ws-kanban-board__age ws-kanban-board__age--stalled" title="40 days in this stage, stalled"><svg viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"><rect x="3" y="2.5" width="2" height="7" rx="0.5"/><rect x="7" y="2.5" width="2" height="7" rx="0.5"/></svg>40d<span class="ws-sr"> in this stage, stalled</span></span>
+          </div>
+          <a class="ws-kanban-board__open" href="#o3" title="Mesa Group, Felix expansion">Mesa Group, Felix expansion</a>
+          <div class="ws-kanban-board__chips"><span class="ws-chip ws-chip--live"><span class="ws-chip__label">TTV1 15d</span></span><span class="ws-chip ws-chip--live"><span class="ws-chip__label">TTV2 26d</span></span></div>
+          <div class="ws-kanban-board__card-foot">
+            <span class="ws-avatar-stack" role="img" aria-label="Hal Dorn, Ella Sim and Josh Smith"><span class="ws-avatar ws-avatar--sm">HD</span><span class="ws-avatar ws-avatar--sm">ES</span><span class="ws-avatar ws-avatar--sm">JS</span></span>
+            <span class="ws-kanban-board__card-end">
+              <span class="ws-kanban-board__tally" title="1 of 12 tasks done"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 6.5l2.25 2.25L9.5 3.5"/></svg>1/12<span class="ws-sr"> tasks done</span></span>
+            </span>
+          </div>
+          <button type="button" class="ws-btn ws-btn--well ws-btn--sm ws-kanban-board__card-act">Hand over</button>
+        </article>
+      </section>
+
+    </div>
+  </div>
+
   <div class="ws-stack">
     <span class="ws-muted">--fill, a board page: the board takes the rest of a height-bound column, each stage scrolls on its own with its head stuck, so the sideways bar stays on screen (shown here in a 320 px frame)</span>
     <div style="height: 320px; display: flex; flex-direction: column;">

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

@@ -29,9 +29,40 @@
 .ws-kanban-board__card--dragging { box-shadow: var(--ws-shadow-pop); transform: rotate(-1deg); }
 .ws-kanban-board__who { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
 .ws-kanban-board__meta { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-muted); }
+/* The standard card: one anatomy for every board (a ticket, an onboarding, a deal), its slots in a fixed order: the head
+   (the kind and its figure, the time in stage), the title, the meta, the chips, the foot (people, a tally, one act), an
+   optional act under it. A card with acts is an article: its title is the link and covers the whole card (__open), the
+   acts sit above that cover. */
+.ws-kanban-board__card { position: relative; }
+.ws-kanban-board__card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-width: 0; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); }
+.ws-kanban-board__kind { min-width: 0; overflow: hidden; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
+.ws-kanban-board__kind > strong { font-weight: 600; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+/* Time in stage, muted; a stall takes the needs words and the pause mark, never a coloured rail. */
+.ws-kanban-board__age { display: inline-flex; flex: none; align-items: center; gap: var(--space-xxs); margin-left: auto; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ws-kanban-board__age > svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+.ws-kanban-board__age--stalled { font-weight: 500; color: var(--ws-word-needs); }
+/* The title: 14 / 20 medium navy, two lines at most (whole in its title), never underlined. Its cover is the card's
+   target and carries the focus ring, 2 px out as an a.ws-card's does. */
+.ws-kanban-board__open { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--ws-text-body); line-height: var(--ws-leading-row); font-weight: 500; color: var(--color-text-heading); text-decoration: none; overflow-wrap: anywhere; }
+.ws-kanban-board__open::after { content: ""; position: absolute; inset: calc(var(--ws-rim) * -1); border-radius: var(--ws-radius-card); }
+.ws-kanban-board__open:focus-visible { outline: 0; }
+.ws-kanban-board__open:focus-visible::after { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+.ws-kanban-board__chips { display: flex; flex-wrap: wrap; gap: var(--space-xxs); min-width: 0; margin-top: var(--space-xxs); }
+.ws-kanban-board__chips > .ws-chip { max-width: 100%; }
+.ws-kanban-board__card-foot { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; min-height: var(--ws-control-h-sm); margin-top: var(--space-xxs); }
+.ws-kanban-board__card-foot > .ws-kanban-board__who { flex: 1; }
+.ws-kanban-board__name { min-width: 0; overflow: hidden; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-body); white-space: nowrap; text-overflow: ellipsis; }
+.ws-kanban-board__card-end { display: flex; flex: none; align-items: center; gap: var(--space-xs); margin-left: auto; }
+.ws-kanban-board__tally { display: inline-flex; align-items: center; gap: var(--space-xxs); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ws-kanban-board__tally > svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+/* Acts sit above the title's cover, so a press on one is the act, not the card. */
+.ws-kanban-board__card :is(.ws-icon-btn, .ws-btn) { position: relative; z-index: 1; }
+.ws-kanban-board__card-act { width: 100%; margin-top: var(--space-xxs); }
 .ws-kanban-board__empty { padding: var(--space-md) var(--space-xs); text-align: center; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-muted); }
-/* Loading: a ghost the height of a card, in the chart colours' sweep (add ws-shimmer). */
+/* Loading: a ghost the height of a card under the shimmer (add ws-shimmer). */
 .ws-kanban-board__ghost { display: block; height: calc(var(--ws-card-padding) * 2 + var(--ws-control-h-sm) + var(--space-xxs) + var(--ws-leading-control)); border-radius: var(--ws-radius-card); background: var(--ws-track); }
+/* The standard card's ghost: the height of a head, two title lines, a meta line and the foot. */
+.ws-kanban-board__ghost--card { height: calc(var(--ws-card-padding) * 2 + var(--ws-leading-control) * 2 + var(--ws-leading-row) * 2 + var(--ws-control-h-sm) + var(--space-xxs) * 4); }
 .ws-kanban-board__ghost.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
 /* A board page (K16): the board takes the rest of a height-bound column (the shell's body, a fill page), every column
    runs its full height and scrolls on its own with its head stuck, so the sideways bar is always on screen. */

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

@@ -175,7 +175,7 @@
   </div>
 
   <div class="ws-stack" style="width: 640px;">
-    <span class="ws-muted">Loading: the list's rows and the detail as ghosts in the chart colours' sweep (under 48rem the pair stacks, list first)</span>
+    <span class="ws-muted">Loading: the list's rows and the detail as ghosts under the shimmer (under 48rem the pair stacks, list first)</span>
     <div class="ws-list-detail" aria-busy="true">
       <div class="ws-list-detail__grid">
         <section class="ws-list-detail__list" aria-label="Reviews, loading">

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

@@ -55,7 +55,7 @@ answers grid (305:2341): which AI assistants named you, for each of the question
   and the foot stay; the hovered row does not change. The whole question shows in the note.
 - **Focus** (keyboard, or a tap that focuses the question): the same dim and the same note. A page script may set
   `aria-expanded="true"` on the question to keep the note open after a tap where the browser does not focus buttons.
-- **Loading**: every cell a ghost in the chart colours' sweep (`__cell ws-shimmer`), the questions and sources shown at
+- **Loading**: every cell a ghost under the shimmer (`__cell ws-shimmer`), the questions and sources shown at
   once; still under reduced motion.
 - **Narrow**: source names drop to their marks in 32 px columns (a screen reader still hears each source through the
   head's label), and the foot's line drops under its title.

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

@@ -62,7 +62,7 @@
   </div>
 
   <div class="ws-stack" style="width: 420px;">
-    <span class="ws-muted">Loading: every cell a ghost in the chart colours' sweep, the questions and sources shown at once</span>
+    <span class="ws-muted">Loading: every cell a ghost under the shimmer, the questions and sources shown at once</span>
     <div class="ws-matrix" aria-busy="true">
       <div class="ws-matrix__table" role="table" aria-label="Which AI assistants named you, checking">
         <div class="ws-matrix__head" role="rowgroup">

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

@@ -71,14 +71,14 @@ Coverage, 206 behaviours (the page counts them in its head):
 | 6. Focus | 7 | 4 | 2 | 0 | 1 |
 | 7. Open and close | 23 | 10 | 5 | 2 | 6 |
 | 8. Panels docking | 12 | 6 | 1 | 1 | 4 |
-| 9. Loading, working and loops | 11 | 5 | 2 | 0 | 4 |
+| 9. Loading, working and loops | 11 | 3 | 3 | 0 | 5 |
 | 10. Number and chart build-ins | 13 | 5 | 2 | 0 | 6 |
 | 11. Tooltips and hover cards | 6 | 2 | 4 | 0 | 0 |
 | 12. Stagger | 11 | 6 | 2 | 1 | 2 |
 | 13. Reduced motion | 4 | 4 | 0 | 0 | 0 |
 | 14. What never moves | 10 | 6 | 3 | 0 | 1 |
 | 17. Interaction states | 13 | 7 | 2 | 1 | 3 |
-| All | 206 | 115 | 45 | 5 | 41 |
+| All | 206 | 113 | 46 | 5 | 42 |
 
 ## States
 

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

@@ -36,7 +36,7 @@
           <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">11</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Sort the list</span><span class="ws-meta">Pick an order: the rows glide to their new places.</span></span></li>
           <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">12</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Press any button</span><span class="ws-meta">It gives under your finger and springs back.</span></span></li>
           <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">13</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Point at a health square</span><span class="ws-meta">After a breath it grows open in place.</span></span></li>
-          <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">14</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Refresh the sources</span><span class="ws-meta">A shimmer in the chart colours, then each line settles in.</span></span></li>
+          <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">14</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Refresh the sources</span><span class="ws-meta">A shimmer, one quiet grey, then each line settles in.</span></span></li>
           <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">15</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Replay the arrival</span><span class="ws-meta">The cards rise in, the columns grow in one after another and the goals fill.</span></span></li>
         </ol>
         <p class="ws-muted" data-reduced-readout></p>
@@ -270,7 +270,7 @@
       <div class="ws-stack" style="gap: var(--ws-gap-group); padding-top: var(--ws-gap-component);">
     <div class="ws-stack">
       <p class="ws-body">Each row is one of North's behaviours by Seth's own label (north-motion.md), North's values, a live kit demo to hover, press or play, the kit token or class to build with, and how close the kit is. 206 behaviours: 115 exact, 45 close, 5 through a small JS helper, 41 not in the kit yet.</p>
-      <span class="ws-cluster"><span class="ws-chip ws-chip--live" style="min-width: var(--space-6xl); justify-content: center;">Exact 115</span><span class="ws-chip ws-chip--middle" style="min-width: var(--space-6xl); justify-content: center;">Close 45</span><span class="ws-chip ws-chip--accent" style="min-width: var(--space-6xl); justify-content: center;">JS helper 5</span><span class="ws-chip" style="min-width: var(--space-6xl); justify-content: center;">Not yet 41</span></span>
+      <span class="ws-cluster"><span class="ws-chip ws-chip--live" style="min-width: var(--space-6xl); justify-content: center;">Exact 113</span><span class="ws-chip ws-chip--middle" style="min-width: var(--space-6xl); justify-content: center;">Close 46</span><span class="ws-chip ws-chip--accent" style="min-width: var(--space-6xl); justify-content: center;">JS helper 5</span><span class="ws-chip" style="min-width: var(--space-6xl); justify-content: center;">Not yet 42</span></span>
       <p class="ws-muted">Slow motion (in Try it) is this page's own: it multiplies every duration, delay and stagger token by --ws-motion-slow (4), so a spring's shape shows. Reduced motion: with prefers-reduced-motion set, every row here is still (instant state changes, no springs, no view transitions, shimmers stop on their ghost), and Slow motion has nothing to slow. A browser without a feature (linear(), anchor positioning, @starting-style, interpolate-size, view transitions) shows the change at once, never a broken layout.</p>
     </div>
 
@@ -1436,21 +1436,21 @@
 
   <section class="ws-stack" aria-labelledby="mo-loading">
     <h2 class="ws-section" id="mo-loading">9. Loading, working and loops</h2>
-    <p class="ws-muted">Every working signal says in words what it is doing; the shimmer passes in the chart colours over ghost shapes.</p>
+    <p class="ws-muted">Every working signal says in words what it is doing; the shimmer passes over ghost shapes in one quiet grey.</p>
     <div class="ws-board">
       <article class="ws-card" aria-label="Shimmer in chart colours"><div class="ws-head">
         <div class="ws-stack ws-stack--tight">
-          <span class="ws-cluster"><span class="ws-chip ws-chip--live" style="min-width: var(--space-6xl); justify-content: center;">Exact</span><span class="ws-row-name">Shimmer in chart colours</span></span>
+          <span class="ws-cluster"><span class="ws-chip ws-chip--middle" style="min-width: var(--space-6xl); justify-content: center;">Close</span><span class="ws-row-name">Shimmer in chart colours</span></span>
           <span class="ws-meta">North: text and blocks: a 100deg band of #f6ddd8, #e4dcf3, #d6eaea over #ece8e4, 300% wide, 1.8 s shimmer, infinite (css:1458)</span>
-          <span class="ws-meta">Kit: .ws-skeleton, .ws-shimmer: --ws-shimmer over --ws-loop-shimmer on --ws-ease-shimmer; still ghost under reduced motion</span>
+          <span class="ws-meta">Kit: .ws-skeleton, .ws-shimmer: --ws-shimmer over --ws-loop-shimmer on --ws-ease-shimmer, North's band, width and beat in one quiet grey: the ghost #e3dfdb with a lighter pass #f6f3f0, no chart hues (Amit, 10 Nov 2026); still ghost under reduced motion</span>
         </div>
         <div class="ws-cluster"><span class="ws-stack" style="width: var(--space-9xl);" aria-hidden="true"><span class="ws-skeleton ws-skeleton--title" style="width: 60%;"></span><span class="ws-skeleton ws-skeleton--line"></span><span class="ws-skeleton ws-skeleton--line" style="width: 66%;"></span></span></div>
       </div></article>
       <article class="ws-card" aria-label="Empty chart shapes take the colour band"><div class="ws-head">
         <div class="ws-stack ws-stack--tight">
-          <span class="ws-cluster"><span class="ws-chip ws-chip--live" style="min-width: var(--space-6xl); justify-content: center;">Exact</span><span class="ws-row-name">Empty chart shapes take the colour band</span></span>
+          <span class="ws-cluster"><span class="ws-chip" style="min-width: var(--space-6xl); justify-content: center;">Not yet</span><span class="ws-row-name">Empty chart shapes take the colour band</span></span>
           <span class="ws-meta">North: #e3dfdb shapes, a coral, purple, teal band at mix-blend color, .85, the same 1.8 s</span>
-          <span class="ws-meta">Kit: .ws-skeleton__chart</span>
+          <span class="ws-meta">Kit: not taken: loaders are one neutral tone (Amit, 10 Nov 2026); .ws-skeleton__chart's bars are ghosts under the same shimmer</span>
         </div>
         <div class="ws-cluster"><span class="ws-skeleton__chart" style="width: var(--space-9xl);" aria-hidden="true"><i style="height: 35%;"></i><i style="height: 60%;"></i><i style="height: 45%;"></i><i style="height: 75%;"></i><i style="height: 55%;"></i><i style="height: 90%;"></i><i style="height: 70%;"></i><i style="height: 50%;"></i></span></div>
       </div></article>
@@ -2514,7 +2514,7 @@
     veil.addEventListener('click', closeChat);
     chat.addEventListener('keydown', (e) => { if (e.key === 'Escape' && mode === 'bar') closeChat(); });
 
-    /* 14: the sources load: a shimmer in the chart colours, then each line settles in, top to bottom. */
+    /* 14: the sources load: the shimmer, one quiet grey, then each line settles in, top to bottom. */
     const sources = play.querySelector('[data-play-sources]'), sourcesView = sources.querySelector('[data-sources-view]');
     let loading = 0;
     const load = () => {