@felloinnovations/brand-kit 0.5.0 → 0.5.3

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.

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

@@ -0,0 +1,109 @@
+<!-- @dsCard group="Data" height=900 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>PlanTimeline</title>
+<link rel="stylesheet" href="../../tokens.css">
+<link rel="stylesheet" href="../bundle.css">
+</head>
+<body>
+<div class="ws-stage ws-stage--grey ws-stage--column">
+
+  <div class="ws-stack">
+    <span class="ws-muted">A campaign's plan across its window: a phase a row, its tasks one step in, done teal, the phase in hand navy, a late task salmon, the rest to come; gates and launch day as diamonds; today one line through every row</span>
+    <section class="ws-card ws-card--inset ws-stack" aria-labelledby="plan-title">
+      <div class="ws-cluster ws-cluster--between">
+        <h3 class="ws-section" id="plan-title">Portal launch plan</h3>
+        <span class="ws-meta">Sep 1 to Nov 30</span>
+      </div>
+      <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">Plan</span><span class="ws-plan-timeline__when">Sep 1 to 14</span></span>
+              <span class="ws-plan-timeline__track">
+                <a class="ws-plan-timeline__bar ws-plan-timeline__bar--done" href="#plan" style="--start: 0; --span: 14;"><span class="ws-sr">Plan, done</span></a>
+                <span class="ws-plan-timeline__milestone ws-plan-timeline__milestone--done" style="--at: 14;" role="img" aria-label="Gate 1, Sep 15, passed" title="Gate 1, Sep 15, passed"></span>
+              </span>
+            </li>
+            <li class="ws-plan-timeline__row">
+              <span class="ws-plan-timeline__name"><span class="ws-plan-timeline__title">Build</span><span class="ws-plan-timeline__when">Sep 15 to Oct 19</span></span>
+              <span class="ws-plan-timeline__track">
+                <a class="ws-plan-timeline__bar ws-plan-timeline__bar--done" href="#build" style="--start: 14; --span: 35;"><span class="ws-sr">Build, done</span></a>
+                <span class="ws-plan-timeline__milestone ws-plan-timeline__milestone--done" style="--at: 49;" role="img" aria-label="Gate 2, Oct 20, passed" title="Gate 2, Oct 20, passed"></span>
+              </span>
+            </li>
+            <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="#pre-launch" 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">Email sequence</span><span class="ws-plan-timeline__when">Oct 20 to Nov 6</span></span>
+              <span class="ws-plan-timeline__track">
+                <a class="ws-plan-timeline__bar ws-plan-timeline__bar--done" href="#emails" style="--start: 49; --span: 18;"><span class="ws-sr">Email sequence, done</span></a>
+              </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="#landing" style="--start: 56; --span: 11;"><span class="ws-sr">Landing page, 4 days late</span></a>
+              </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">Webinar invites</span><span class="ws-plan-timeline__when">Nov 2 to 12</span></span>
+              <span class="ws-plan-timeline__track">
+                <a class="ws-plan-timeline__bar" href="#invites" aria-current="step" style="--start: 62; --span: 11;"><span class="ws-sr">Webinar invites, in hand</span></a>
+              </span>
+            </li>
+            <li class="ws-plan-timeline__row">
+              <span class="ws-plan-timeline__name"><span class="ws-plan-timeline__title">Launch</span><span class="ws-plan-timeline__when">Nov 17 to 23</span></span>
+              <span class="ws-plan-timeline__track">
+                <a class="ws-plan-timeline__bar ws-plan-timeline__bar--wait" href="#launch" style="--start: 77; --span: 7;"><span class="ws-sr">Launch, to come</span></a>
+              </span>
+            </li>
+            <li class="ws-plan-timeline__row">
+              <span class="ws-plan-timeline__name"><span class="ws-plan-timeline__title">Retro</span><span class="ws-plan-timeline__when">Nov 24 to 30</span></span>
+              <span class="ws-plan-timeline__track">
+                <a class="ws-plan-timeline__bar ws-plan-timeline__bar--wait" href="#retro" style="--start: 84; --span: 7;"><span class="ws-sr">Retro, to come</span></a>
+              </span>
+            </li>
+          </ol>
+          <span class="ws-plan-timeline__now" style="--at: 70;" aria-hidden="true"><span>Today</span></span>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="max-width: 360px;">
+    <span class="ws-muted">Loading: the names and bars as ghosts where they will land, the scale already drawn</span>
+    <section class="ws-card ws-card--inset ws-stack" aria-labelledby="plan-loading" aria-busy="true">
+      <h3 class="ws-section" id="plan-loading">Portal launch plan</h3>
+      <div class="ws-plan-timeline" style="--days: 91;">
+        <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" aria-hidden="true">
+            <li class="ws-plan-timeline__row"><span class="ws-plan-timeline__name"><span class="ws-skeleton ws-skeleton--line" style="width: 64px;"></span></span><span class="ws-plan-timeline__track"><span class="ws-plan-timeline__bar ws-shimmer" style="--start: 0; --span: 14;"></span></span></li>
+            <li class="ws-plan-timeline__row"><span class="ws-plan-timeline__name"><span class="ws-skeleton ws-skeleton--line" style="width: 80px;"></span></span><span class="ws-plan-timeline__track"><span class="ws-plan-timeline__bar ws-shimmer" style="--start: 14; --span: 35;"></span></span></li>
+            <li class="ws-plan-timeline__row"><span class="ws-plan-timeline__name"><span class="ws-skeleton ws-skeleton--line" style="width: 72px;"></span></span><span class="ws-plan-timeline__track"><span class="ws-plan-timeline__bar ws-shimmer" style="--start: 49; --span: 28;"></span></span></li>
+          </ol>
+        </div>
+      </div>
+    </section>
+  </div>
+
+</div>
+</body>
+</html>

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

@@ -0,0 +1,64 @@
+/* ---- PlanTimeline: a plan's phases and tasks as bars across its dates. A row a phase (a task one step in), its name and
+   dates stuck at the left; each bar from its start to its end on one scale (--days in the window, --start and --span in
+   days from its first day); the phase in hand navy, done teal, late salmon, to come on the track; milestones diamonds;
+   today one fine line in the needs step through every row. Past its box (a phone) it scrolls sideways inside itself, the
+   names staying put. ---- */
+.ws-plan-timeline { --ws-plan-timeline-name: var(--space-8xl); --ws-plan-timeline-day: var(--space-xs); container: ws-plan-timeline / inline-size; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) 0; margin: calc(var(--space-xxs) * -1) calc(var(--space-xxs) * -1) calc(var(--space-xxs) * -1) 0; }
+/* 4 px of room above, below and at the far end (pulled back by the margin) so a bar's focus ring is never cut; none at
+   the start, where the names stick. */
+.ws-plan-timeline:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+/* A bar reached by Tab scrolls clear of the stuck names (the wider name column, so it holds on a phone too). */
+.ws-plan-timeline { scroll-padding-inline-start: calc(var(--space-8xl) + var(--space-xxs)); }
+/* The plot: the names' column and the window, never narrower than a day at 8 px, so a long plan scrolls rather than
+   squeezing its bars to slivers. */
+.ws-plan-timeline__plot { position: relative; min-width: calc(var(--ws-plan-timeline-name) + var(--days) * var(--ws-plan-timeline-day)); }
+@container ws-plan-timeline (width < 40rem) { .ws-plan-timeline__plot { --ws-plan-timeline-name: var(--space-7xl); } }
+/* The scale: a tick per month (or week) at its first day, 11 px medium muted, over the window only. Rows and the scale
+   are flex rows, not grids, so the stuck names can travel the whole row (a grid item sticks only inside its cell). */
+.ws-plan-timeline__scale { position: relative; display: flex; height: var(--space-lg); }
+.ws-plan-timeline__tick { position: absolute; top: 0; bottom: 0; left: calc(var(--ws-plan-timeline-name) + (100% - var(--ws-plan-timeline-name)) * var(--at) / var(--days)); display: flex; align-items: center; padding-left: var(--space-xxs); border-left: var(--ws-hairline) solid var(--ws-edge-card); font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
+.ws-plan-timeline__rows { display: flex; flex-direction: column; }
+.ws-plan-timeline__row { display: flex; border-top: var(--ws-hairline) solid var(--ws-edge-card); }
+/* The name and its dates, stuck at the left on the card's cream. */
+.ws-plan-timeline__name { position: sticky; left: 0; z-index: 2; display: flex; flex: 0 0 var(--ws-plan-timeline-name); flex-direction: column; justify-content: center; min-width: 0; padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; background: var(--ws-plan-timeline-ground, var(--color-bg-page)); }
+/* Names and dates wrap rather than cut: the column is narrow on a phone and a plan's names are its whole point. */
+.ws-plan-timeline__title { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-heading); overflow-wrap: anywhere; }
+.ws-plan-timeline__when { font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
+.ws-plan-timeline__row:has([aria-current]) .ws-plan-timeline__title { font-weight: 600; }
+/* A late phase or task says so under its name, in needs-you words. */
+.ws-plan-timeline__when--late { font-weight: 500; color: var(--ws-word-needs); }
+/* A task: one step in under its phase, its name in the body words, its bar thinner. */
+.ws-plan-timeline__row--task .ws-plan-timeline__name { padding-left: var(--space-md); }
+.ws-plan-timeline__row--task .ws-plan-timeline__title { font-weight: 400; color: var(--color-text-body); }
+.ws-plan-timeline__track { position: relative; flex: 1; min-width: 0; min-height: var(--space-2xl); }
+/* A bar: 4 px corners, at least 24 wide so a one-day task is still a target; a link when it opens the phase. */
+.ws-plan-timeline__bar { --ws-plan-timeline-tone: var(--tone, var(--ws-track)); position: absolute; top: 50%; left: calc(var(--start) / var(--days) * 100%); width: max(calc(var(--span) / var(--days) * 100%), var(--space-lg)); height: var(--space-lg); border-radius: var(--ws-radius-control); background-color: var(--ws-plan-timeline-tone); transform: translateY(-50%); }
+.ws-plan-timeline__bar--wait { box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card); }
+.ws-plan-timeline__bar--done { --ws-plan-timeline-tone: var(--tone, var(--ws-chart-finished)); }
+.ws-plan-timeline__bar[aria-current] { --ws-plan-timeline-tone: var(--tone, var(--color-text-heading)); }
+.ws-plan-timeline__bar--late { --ws-plan-timeline-tone: var(--tone, var(--ws-chart-under-half)); }
+.ws-plan-timeline__row--task .ws-plan-timeline__bar { height: var(--space-md); }
+/* Every bar that opens keeps a 24 px target (a task's 16 px bar too), 40 on touch (K10). */
+a.ws-plan-timeline__bar::after { content: ""; position: absolute; inset: calc((100% - var(--ws-plan-timeline-hit, var(--space-lg))) / 2) 0; }
+@media (pointer: coarse) { .ws-plan-timeline { --ws-plan-timeline-hit: var(--ws-touch); } }
+a.ws-plan-timeline__bar { color: var(--color-text-heading); cursor: pointer; }
+@media (hover: hover) { a.ws-plan-timeline__bar:hover { background-image: linear-gradient(var(--ws-hover-strong), var(--ws-hover-strong)); } }
+a.ws-plan-timeline__bar:focus-visible { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: var(--ws-focus-offset); }
+/* A milestone: a 10 px diamond on the day it falls, the cream inside a navy edge until it is reached, teal after. It
+   opens nothing (its phase's bar does); its name and date are in its label and title. */
+.ws-plan-timeline__milestone { position: absolute; z-index: 1; top: 50%; left: calc(var(--at) / var(--days) * 100%); width: var(--space-xs-plus); height: var(--space-xs-plus); border-radius: var(--ws-radius-chip); background: var(--color-bg-page); box-shadow: inset 0 0 0 calc(var(--ws-hairline) * 3) var(--color-text-heading); transform: translate(-50%, -50%) rotate(45deg); }
+.ws-plan-timeline__milestone--done { background: var(--ws-chart-finished); box-shadow: inset 0 0 0 calc(var(--ws-hairline) * 3) var(--color-bg-page); }
+/* Today: its word over the window and one 1 px line down through every row, in the salmon's AA step; under the stuck
+   names when the plan scrolls. Leave it out when today is outside the window. */
+.ws-plan-timeline__now { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--ws-plan-timeline-name) + (100% - var(--ws-plan-timeline-name)) * var(--at) / var(--days)); display: flex; flex-direction: column; align-items: center; font-size: var(--ws-text-micro); line-height: var(--space-lg); font-weight: 600; color: var(--ws-word-needs); transform: translateX(-50%); pointer-events: none; }
+/* On a track that scrolls (a phone) the plan opens on today: the browser scrolls to it once, on load. */
+.ws-plan-timeline__now { scroll-snap-align: center; scroll-initial-target: nearest; }
+.ws-plan-timeline__now > span { padding: 0 var(--space-xxs); background: var(--ws-plan-timeline-ground, var(--color-bg-page)); }
+.ws-plan-timeline__now::after { content: ""; flex: 1; width: var(--ws-line); background: var(--ws-word-needs); }
+/* The names' column over the scale, so a tick scrolled under it hides. */
+.ws-plan-timeline__scale::before { content: ""; position: sticky; z-index: 2; left: 0; flex: 0 0 var(--ws-plan-timeline-name); background: var(--ws-plan-timeline-ground, var(--color-bg-page)); }
+/* The far edge fades while days are hidden past it, lifting at the end; a focused plan drops it (the ring says it scrolls). */
+@supports (animation-timeline: scroll()) {
+  .ws-plan-timeline { mask-image: linear-gradient(90deg, currentColor calc(100% - var(--ws-fade-end)), transparent); animation: ws-scroll-edges linear; animation-timeline: scroll(self inline); }
+  .ws-plan-timeline:focus-visible { mask-image: none; }
+}

package/design-system/components/README.md

@@ -1,11 +1,11 @@
 # Components
 
-The catalog: 103 components by gallery group, one line each, plus `Cover`, the gallery's cover card (a preview only, no README, nothing to build with). Each folder holds `README.md` (when to use it, its parts, states and the markup to copy), `preview.html` (the gallery card) and `style.css` (its styles; `bundle.css` and `fello.css` carry them all). Choosing components maps a need to a name; the line here says what each one is. Generated by scripts/build-skill.mjs from each README's first paragraph: edit those, not this file.
+The catalog: 108 components by gallery group, one line each, plus `Cover`, the gallery's cover card (a preview only, no README, nothing to build with). Each folder holds `README.md` (when to use it, its parts, states and the markup to copy), `preview.html` (the gallery card) and `style.css` (its styles; `bundle.css` and `fello.css` carry them all). Choosing components maps a need to a name; the line here says what each one is. Generated by scripts/build-skill.mjs from each README's first paragraph: edit those, not this file.
 
 ## Actions
 
 - [Button](Button/README.md): The one control for every act on the page: a click that does something, in one of six looks, never a styled `<button>`.
-- [Chip](Chip/README.md): A small fact in a 24 px tag, in one of six tones, a rating tone or the Example mark; its sibling `ChangeChip` says a number went up, down or stayed.
+- [Chip](Chip/README.md): A small fact in a 24 px tag, in one of seven tones, a rating tone or the Example mark; its sibling `ChangeChip` says a number went up, down or stayed.
 - [IconButton](IconButton/README.md): A square button holding one icon and nothing else, for an act that needs no words to be understood.
 - [Segmented](Segmented/README.md): Every switch and tab row on the platform: Seth's grey well with a navy current item, one component so the current item always moves the same way.
 
@@ -16,7 +16,7 @@ The catalog: 103 components by gallery group, one line each, plus `Cover`, the g
 - [Fold](Fold/README.md): The one disclosure: something folded away until wanted, in three looks, built on the browser's native `<details>`.
 - [Morph](Morph/README.md): A thing that changes its place or its size goes there as itself: a card flying to the full screen and back, a figure growing open across its row, the chat moving between its modes. The browser's own view transitions, started by `morph()` from the package, on Seth's curves.
 - [Plate](Plate/README.md): A quiet block set apart inside a card: the cream a shade darker, for a card's facts, a track or an aside.
-- [Skeleton](Skeleton/README.md): A ghost of what is coming, in the shape it will take, with North's shimmer in the chart colours passing over it, so nothing jumps when the real content lands.
+- [Skeleton](Skeleton/README.md): A ghost of what is coming, in the shape it will take, with North's shimmer passing over it in one quiet grey, so nothing jumps when the real content lands.
 - [Well](Well/README.md): The system's grey well: a plate holding a short list of pressable rows, for every "what to ask" list.
 
 ## Charts
@@ -36,7 +36,7 @@ The catalog: 103 components by gallery group, one line each, plus `Cover`, the g
 - [StepLine](StepLine/README.md): A bill or a rate over time as a step line against a dotted reference, the gap between them hatched, its moments named.
 - [StreakCalendar](StreakCalendar/README.md): Eight weeks of activity as rows, Monday to Sunday across: a done day a pill, an empty day a hairline cell, today outlined, days to come dashed.
 - [TrendBars](TrendBars/README.md): A trend over days as thin rising bars, with one day called out as the moment that explains the shape.
-- [TrendLine](TrendLine/README.md): A value over periods against an axis, as a line with its dots and the hatched area under it, or as columns that collapse into the line's points and back.
+- [TrendLine](TrendLine/README.md): A value over periods against an axis, as a line with its dots and the hatched area under it, or as columns that collapse into the line's points and back; up to three series in one unit as lines with a key.
 
 ## Chat
 
@@ -51,13 +51,16 @@ The catalog: 103 components by gallery group, one line each, plus `Cover`, the g
 ## Data
 
 - [ActionList](ActionList/README.md): A card's ranked list of next acts: who or what, the reason in words, and the one act at the right of each row. `--brief` is North's "what changed" list on a page's head: one quiet line each, its acts appearing on the line.
+- [Calendar](Calendar/README.md): Things on dates: a month (or a week) of days, Monday first, each day holding its items as rows that open, the steps and the view switch over it, today ringed; in a narrow column the same markup reads as an agenda.
 - [CheckRow](CheckRow/README.md): A rimmed list of checks, each row a name, a strip of ticks for its score, the score, a status and a chevron that opens it; or a list of fixes, each row a box to tick, the fix and its effort, its act, and a chevron that opens it in place. Seth's checks list (301:1728) and Fixes checklist (308:2466).
 - [KanbanBoard](KanbanBoard/README.md): Columns of cards for a pipeline: a stage per column, a card per thing moving through it, a count beside each stage's name. `--fill` makes it a board page: the rest of the page's height, every stage scrolling on its own, the sideways bar on screen.
 - [Leaderboard](Leaderboard/README.md): A list that ranks people against one number: a rank, a face and a name, a thin bar for the score, the score itself, with the person's own row lit so they find themselves at once. Every row shares one grid, so the bars start and end on the same lines and no number is ever cut.
 - [ListDetail](ListDetail/README.md): A list and the thing picked from it, side by side: the list one column wide, the open item two, on one three-column grid. Seth's Review inbox (313:2671) and North's board (a chart and the list that drives it), with Tally's vendors.
 - [Matrix](Matrix/README.md): A grid of yes-or-no answers: one row per question, one column per source, each cell lit when the answer is yes. Seth's answers grid (305:2341): which AI assistants named you, for each of the questions a buyer might ask.
+- [PlanTimeline](PlanTimeline/README.md): 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.
 - [SideList](SideList/README.md): Short lists with no card of their own: a few groups down a side column, each with a small head and rows joined by fine lines, an act or a value at the right of each row. Its picker form, `__picks`, sits on a card's surface: rows as soft pills, one of them the current one.
 - [Table](Table/README.md): Rows of records inside one card, read down its columns: a head of muted labels, 40 px rows, a first column that stays while the rest scroll, numbers in fixed right-aligned columns, totals in the foot, columns that fold away by priority and a phone fold. This is the whole wide-table pattern; build every records table from it.
+- [TextDiff](TextDiff/README.md): Two versions of a text side by side in one place: what was removed and what was added, by line or inside the words, told apart by a sign, a strike or an underline as well as by colour.
 - [Timeline](Timeline/README.md): A vertical feed of what happened, grouped by day, a coloured dot on a fine line telling what kind of thing each entry was.
 
 ## Desk
@@ -68,7 +71,7 @@ The catalog: 103 components by gallery group, one line each, plus `Cover`, the g
 ## Feedback
 
 - [Badge](Badge/README.md): A small count or mark riding on the corner of a face, an icon or a nav row, saying "there is something here" at a glance.
-- [Banner](Banner/README.md): A full-width notice for a state of the whole page or card, in one of four quiet tones, never a loud one.
+- [Banner](Banner/README.md): A full-width notice for a state of the whole page or card, in one of five quiet tones, never a loud one.
 - [Popover](Popover/README.md): A small lifted card beside its control, for the time a tooltip is too thin and a dialog is too much.
 - [StatusScreen](StatusScreen/README.md): The whole-page word for something that failed: a page that is not there, a server error, or a connection that is not back yet.
 
@@ -76,8 +79,9 @@ The catalog: 103 components by gallery group, one line each, plus `Cover`, the g
 
 - [Checkbox](Checkbox/README.md): A real native checkbox under a skin, drawn with a navy tick when chosen, its label part of the thing you tap.
 - [Combobox](Combobox/README.md): A searchable field for choosing from a long list, matching as you type and offering to create a new value when nothing matches.
-- [DateInput](DateInput/README.md): A date field that works on its own, with a popover month grid for picking a day by eye instead of typing it.
+- [DateInput](DateInput/README.md): A date field that works on its own, with a popover month grid for picking a day by eye instead of typing it; the same shell holds a time of day, and a date with a time.
 - [FileUpload](FileUpload/README.md): A drop zone for one or more files, with a row per file showing its progress, a tick when it lands, or why it was rejected.
+- [InlineEdit](InlineEdit/README.md): Words that become a field in place: a value read and edited where it sits (a task's title, a brief's section, a milestone's name), the same box and the same type at rest and editing, so nothing jumps.
 - [Input](Input/README.md): A single line of typed text, drawn as a field reads as a field on a cream card: white ground, a fine edge, the mid-blue edge while typing.
 - [NumberInput](NumberInput/README.md): A number field with its figures right-aligned and tabular, an optional unit inside it, and small buttons to step the value.
 - [PasswordInput](PasswordInput/README.md): A password field with a visibility toggle and a strength line, so a person can see what they typed and how strong it is.
@@ -138,6 +142,7 @@ The catalog: 103 components by gallery group, one line each, plus `Cover`, the g
 ## People
 
 - [Avatar](Avatar/README.md): A person's own mark: their photo once it loads, or their initials in navy on a neutral disc before and instead; never coloured, never an app's face.
+- [CommentThread](CommentThread/README.md): People commenting on a thing: remarks anchored to a piece of content, with replies, @mentions, an open or resolved state with a count, and a small composer.
 
 ## Progress
 
@@ -146,6 +151,6 @@ The catalog: 103 components by gallery group, one line each, plus `Cover`, the g
 - [PaceBar](PaceBar/README.md): Progress toward a goal on a 14 px track, with a dot where it should be by now. North's bar, used in tiles, lanes and lists.
 - [Ring](Ring/README.md): A circle's own share as one arc, or Seth's split ring: 96 radial ticks in each part's tone, the total in the hole, a key beside.
 - [SegmentedProgress](SegmentedProgress/README.md): Progress split by area and by step: Seth's "1 of 6" figure, a line under it, and one bar of segments with each area named.
-- [Stepper](Stepper/README.md): Ordered steps on a line that fills: done is a tick, the one in hand is ringed, the rest wait their turn.
+- [Stepper](Stepper/README.md): Ordered steps on a line that fills: done is a tick, the one in hand is ringed, the rest wait their turn. Down the page by default; `--across` lays the stages left to right; `--milestones` makes them dated points on one row.
 - [TickRow](TickRow/README.md): One row of fixed-size ticks for a count out of a small whole: the done ticks in one tone, or each its stretch of the gradient.
 - [TickStrip](TickStrip/README.md): A share drawn as equal ticks across the whole width: the done ones in one tone, the rest the plain track. Seth's score strips.

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

@@ -41,8 +41,8 @@ A report's score the way Seth draws it: the 96 px figure, a strip of ticks acros
   once the draw is half way. The figure does not count up (North: headline figures are static).
 - Not checked: an en dash in muted words in place of the figure (`__figure--none`, with `aria-hidden`; the section's
   label says "not checked"), every tick the track, "Could not check" and why.
-- Loading: a ghost the figure's height, the strip as a ghost (`--loading`) and a ghost line, all in the chart colours'
-  sweep; `aria-busy="true"` on the section.
+- Loading: a ghost the figure's height, the strip as a ghost (`--loading`) and a ghost line, all under the shimmer;
+  `aria-busy="true"` on the section.
 - Long sentence: wraps as running text under the rating; the figure never wraps.
 - Reduced motion: no draw, no settle; the ghosts stay still.
 - Hover, focus, pressed: do not apply; it is read, not pressed.

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

@@ -19,7 +19,7 @@
 .ws-score-hero--needs-work { --tone-word: var(--ws-word-needs-work); }
 .ws-score-hero--needs-work .ws-tick-strip { --tone: var(--ws-rating-needs-work); }
 .ws-score-hero--none { --tone-word: var(--color-text-muted); }
-/* Loading: ghost blocks the size of what they stand for, in the chart colours' sweep. */
+/* Loading: ghost blocks the size of what they stand for under the shimmer. */
 .ws-score-hero__ghost { width: calc(var(--space-6xl) * 2); max-width: 100%; height: var(--ws-leading-score); }
 .ws-score-hero__ghost--line { width: min(100%, calc(var(--space-9xl) * 2)); height: var(--ws-leading-section); }
 @container (max-width: 26rem) {

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

@@ -28,7 +28,7 @@ Where a whole goes: one stacked bar of parts in their tones over what stays, a h
 - Draw (`--draw`): each part grows from its left edge in turn, 70 ms apart (`--ws-stagger-part`), over 700 ms on the
   settle curve. Set `--i` on each part.
 - Nothing moves: the bar is all ground; the key says what stays.
-- Loading (`--loading`): the bar as a ghost in the chart colours' sweep.
+- Loading (`--loading`): the bar as a ghost under the shimmer.
 - Narrow: the head and the key wrap; the bar keeps its parts in proportion.
 - Reduced motion: the parts in place, the ghost still.
 - Hover, focus: none; the key carries the words.

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

@@ -16,7 +16,7 @@
 .ws-share-bar__item::before { content: ""; position: absolute; inset-inline-start: 0; top: calc((var(--space-md) - var(--space-xs)) / 2); width: var(--space-xs); height: var(--space-xs); border-radius: var(--ws-radius-chip); background: var(--tone, var(--ws-chart-rest)); }
 /* Seth's key is one tone: the figure keeps the words' weight and colour, only its numerals are tabular. */
 .ws-share-bar__item b { font-weight: inherit; color: inherit; font-variant-numeric: tabular-nums; }
-/* Loading: the bar as a ghost in the chart colours' sweep, the key held back. */
+/* Loading: the bar as a ghost under the shimmer, the key held back. */
 .ws-share-bar--loading .ws-share-bar__bar { background: var(--ws-shimmer); background-size: 300% 100%; }
 @media (prefers-reduced-motion: no-preference) {
   .ws-share-bar--loading .ws-share-bar__bar { animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; }