@felloinnovations/brand-kit 0.5.1 → 0.5.3

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 under the shimmer (`__ghost ws-shimmer`), the heads shown at
-  once; still under reduced motion.
+  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 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/PlanTimeline/README.md

@@ -0,0 +1,144 @@
+A plan's phases and tasks as bars across its dates: a row a phase (its tasks one step in), each bar from its start to
+its end on one scale, the phase in hand navy, milestones as diamonds and today one line through every row.
+
+## Use it when
+
+- Work is planned over a window and the question is "what runs when, and where are we now": a campaign's phases, a
+  launch, a rollout with its gates.
+- Phases overlap or run back to back and their lengths matter, not only their order.
+
+## Not for
+
+- Steps in order with no dates: use `Stepper` (`--across` for a thing's stages).
+- One thing's dated milestones with the time between them: use `Stepper --milestones`.
+- Things that fall on a day (posts, sends, touches): use `Calendar`.
+- What happened, in order: use `Timeline`.
+
+## Anatomy
+
+- The region (`ws-plan-timeline`, `role="region"`, `tabindex="0"`, named for the plan and today): it sets `--days`, the
+  window's length in days, and scrolls sideways inside itself when the plan is wider than its box. 4 px of room above,
+  below and at the far end (pulled back by a margin) for a focus ring; none at the start, where the names stick.
+- The plot (`__plot`): the names' column (160, 120 under 40rem of the region) and the window, never narrower than 8 px
+  a day, so a long plan scrolls rather than squeezing its bars.
+- The scale (`__scale`, `aria-hidden`): 24 tall, a tick (`__tick`, `--at` its day) at each month's (or week's) first
+  day: a 0.5 px line and the name, 11 / 13 medium muted.
+- A row (`__row`, in an `ol`): a 0.5 px line above it. Its name (`__name`), stuck at the left on the card's cream: the
+  phase (`__title`, 13 / 18 medium navy; semibold for the row in hand) and its dates under it (`__when`, 12 / 16
+  muted; `--late` in needs-you words, "Was due Nov 6"). Names and dates wrap rather than cut.
+- A task row (`--task`): one step in (16), its name in the body words, its bar 16 tall.
+- The track (`__track`): at least 40 tall. A bar (`__bar`, a link when it opens the phase): `--start` (days from the
+  window's first day) and `--span` (days), 24 tall, 4 px corners, at least 24 wide. Its state, in a `ws-sr` span too:
+  done (`--done`, teal), in hand (`aria-current="step"`, navy), late (`--late`, salmon), to come (`--wait`, the track
+  with a 0.5 px edge).
+- A milestone (`__milestone`, `--at` its day, `role="img"` with its name and date in `aria-label` and `title`): a 10 px
+  diamond, cream inside a navy edge; reached (`--done`) teal. It opens nothing: its phase's bar does.
+- Today (`__now`, `--at` its day, `aria-hidden`): "Today" over the window, 11 px semibold, and one 1 px line through every
+  row, in the salmon's AA step (`--ws-word-needs`). Left out when today is outside the window; the region's name
+  carries the date.
+
+## Variants and sizes
+
+| State | Class | Bar |
+| --- | --- | --- |
+| Done | `__bar--done` | teal (`--ws-chart-finished`) |
+| In hand | `aria-current="step"` | navy (`--color-text-heading`); its row's name semibold |
+| Late | `__bar--late` | salmon (`--ws-chart-under-half`); say it under the name in `__when--late` |
+| To come | `__bar--wait` | the track (`--ws-track`) on a 0.5 px edge |
+
+A tone token passed as `--tone` on a bar wins (a category of work rather than a state); it follows the palette, never a
+hex. A short plan (two to six weeks) takes a tick per week; a quarter, a tick per month.
+
+## States
+
+- **Hover** (a bar that opens): a wash over its fill; never a lift.
+- **Focus**: the house ring round the bar; a bar reached by Tab scrolls clear of the stuck names
+  (`scroll-padding-inline-start`). The region's own ring is drawn inside, and the far-edge fade drops while it has focus.
+- **Scrolling** (a phone): the plan opens on today (`scroll-initial-target` on `__now`), the names stay put, the far
+  edge fades while days are hidden past it.
+- **Loading**: the scale drawn; `ws-skeleton ws-skeleton--line` in each name and `ws-shimmer` on the bars where they
+  will land.
+- **Empty**: a plan with no phases is an `EmptyState` in the card, never an empty scale.
+- **Touch**: a bar's target is 40 tall (its `::after`), a task's 16 px bar too.
+- **Dark and the navy ground**: from the tokens.
+
+## Behaviour
+
+- No script in the kit: the app works out each bar's `--start` and `--span` and each tick's and milestone's `--at`
+  (days from the window's first day) and renders them.
+- Keyboard: the region takes focus so the keyboard can scroll it; bars are links in document order, row after row.
+- Screen reader: the region's name says the plan and today; a row reads its name and dates, then its bar's state
+  ("Pre-launch, in hand"); a milestone reads its name, date and whether it was passed. The scale and today's line are
+  `aria-hidden`.
+- The names' column narrows under 40rem of the region (a container query, `ws-plan-timeline`).
+
+## Content
+
+- A phase's name is the plan's own word ("Pre-launch", "Retro"), sentence case; dates short ("Oct 20 to Nov 16",
+  "Nov 2 to 12").
+- A late phase says how in words under its name ("Was due Nov 6", "4 days late"), never with colour alone.
+- A milestone's label names it and its date ("Gate 2, Oct 20, passed", "Launch day, Nov 17").
+- No em dashes.
+
+## Props
+
+| Name | Type | Meaning |
+| --- | --- | --- |
+| `start`, `end` | `string` | The window, `YYYY-MM-DD`; `--days` is the days between them |
+| `rows` | `{ id, name, when, start, end, state: "done" \| "current" \| "late" \| "wait", task?, href?, lateNote?, tone? }[]` | Phases and their tasks, in order (a task straight after its phase) |
+| `milestones` | `{ row, date, label, done? }[]` | Diamonds, each on its row |
+| `ticks` | `{ date, label }[]` | Months, or weeks for a short plan |
+| `today` | `string` | `YYYY-MM-DD`; the line is drawn only inside the window |
+
+## Rules
+
+- **One scale for every row**: a bar's place and length are its dates, never squeezed to fit a label.
+- **The phase in hand is the one navy bar** (its tasks in hand may share it); done is teal, late salmon, to come the
+  track. A state is never colour alone: its words are in the bar's `ws-sr` and, when late, under the name.
+- **Today is one fine line**, never a band or a wash over the window.
+- **Names stay on screen**: the plan scrolls, its names do not.
+- **Hover is a tint**; nothing lifts.
+
+## Source
+
+- **Derived from**: `Stepper`'s states (done teal, in hand navy, a stall in needs-you words), `KanbanBoard`'s sideways
+  scroll with its far-edge fade and stuck head, today's mark in the needs step (`DateInput`, `StreakCalendar`), Seth's
+  0.5 px lines.
+- **Precedent**: 0.5.3 (Nov 2026), from the field: three Marketing OS screens (a campaign's phases, the overview's
+  launch timeline and the plays by date) drew a plan across its window by hand for want of one (issue #24).
+
+## Markup
+
+```html
+<div class="ws-plan-timeline" style="--days: 91;" role="region" aria-label="Portal launch plan by date, today Nov 10" tabindex="0">
+  <div class="ws-plan-timeline__plot">
+    <div class="ws-plan-timeline__scale" aria-hidden="true">
+      <span class="ws-plan-timeline__tick" style="--at: 0;">Sep</span>
+      <span class="ws-plan-timeline__tick" style="--at: 30;">Oct</span>
+      <span class="ws-plan-timeline__tick" style="--at: 61;">Nov</span>
+    </div>
+    <ol class="ws-plan-timeline__rows">
+      <li class="ws-plan-timeline__row">
+        <span class="ws-plan-timeline__name"><span class="ws-plan-timeline__title">Pre-launch</span><span class="ws-plan-timeline__when">Oct 20 to Nov 16</span></span>
+        <span class="ws-plan-timeline__track">
+          <a class="ws-plan-timeline__bar" href="#" aria-current="step" style="--start: 49; --span: 28;"><span class="ws-sr">Pre-launch, in hand</span></a>
+          <span class="ws-plan-timeline__milestone" style="--at: 77;" role="img" aria-label="Launch day, Nov 17" title="Launch day, Nov 17"></span>
+        </span>
+      </li>
+      <li class="ws-plan-timeline__row ws-plan-timeline__row--task">
+        <span class="ws-plan-timeline__name"><span class="ws-plan-timeline__title">Landing page</span><span class="ws-plan-timeline__when ws-plan-timeline__when--late">Was due Nov 6</span></span>
+        <span class="ws-plan-timeline__track">
+          <a class="ws-plan-timeline__bar ws-plan-timeline__bar--late" href="#" style="--start: 56; --span: 11;"><span class="ws-sr">Landing page, 4 days late</span></a>
+        </span>
+      </li>
+    </ol>
+    <span class="ws-plan-timeline__now" style="--at: 70;" aria-hidden="true"><span>Today</span></span>
+  </div>
+</div>
+```
+
+## Styles
+
+`design-system/components/PlanTimeline/style.css`, in `bundle.css` and `fello.css` as `.ws-plan-timeline`. Every value
+is a token; the bar tones follow the palette. The far-edge fade uses a scroll-driven animation (`ws-scroll-edges`)
+where the browser has one.