@felloinnovations/brand-kit 0.4.0 → 0.5.1

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

@@ -0,0 +1,155 @@
+/* ---- TrendLine: a value over periods as a line with its dots and the area under it, or as columns (--bars); the
+   columns collapse into the line's points and back (North's revenue chart and its Bars / Line toggle) ---- */
+/* A plot 224 tall (the grid; 24 of head room above it for a reference's label, the period names under it) beside a
+   40 px value gutter, 12 before the plot. Data is positions: --n (the periods) on the figure, and on each point its
+   place --i (0 to n - 1) and its value --y as a percentage of the plot from the top. The line and its area are one
+   SVG stretched over the plot (viewBox 0 0 100 100, strokes that never scale) and a hatched box clipped to the area
+   (clip-path: polygon(...) in the same percentages); a point is an HTML slot whose ::before is the column and ::after
+   the dot, so nothing is distorted at any width. Point i sits at x = (i + 0.5) / n of the plot. */
+.ws-trend-line { --ws-trend-line-tone: var(--tone, var(--color-text-heading)); --ws-trend-line-h: calc(var(--space-9xl) + var(--space-lg)); --ws-trend-line-dot: var(--space-xs); --ws-trend-line-hit: var(--space-sm); --ws-trend-line-col: 48%; --ws-trend-line-ring: calc(var(--ws-hairline) * 3); --ws-trend-line-room: var(--space-xxs); container: ws-trend-line / inline-size; margin: 0; }
+.ws-trend-line__plot { display: grid; grid-template-columns: var(--ws-trend-line-y, var(--space-2xl)) minmax(0, 1fr); grid-template-rows: var(--ws-trend-line-h) auto; column-gap: var(--space-sm); padding-top: var(--space-lg); }
+.ws-trend-line__y { position: relative; grid-area: 1 / 1; min-width: 0; }
+.ws-trend-line__y > span { position: absolute; right: 0; top: var(--y); translate: 0 -50%; font-size: var(--ws-text-micro); line-height: var(--space-sm-plus); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* The plot: a size container, so a column can cut itself at the grid's lines (100cqh is the plot's height), and its own layer, so the band sits under the marks and over the card. The baseline
+   is its bottom edge, a shade darker than the grid. */
+.ws-trend-line__area { position: relative; isolation: isolate; grid-area: 1 / 2; min-width: 0; container-type: size; border-bottom: var(--ws-hairline) solid var(--ws-edge-card); }
+.ws-trend-line__rule { position: absolute; left: 0; right: 0; top: var(--y); border-top: var(--ws-hairline) solid var(--ws-edge-slot); }
+/* A reference (a plan, a target): a 1 px dotted salmon line across the plot, its words 4 above it at the left, in the
+   salmon's AA word. */
+.ws-trend-line__ref { position: absolute; left: 0; right: 0; top: var(--y); height: var(--ws-line); translate: 0 -50%; background: repeating-linear-gradient(90deg, var(--ws-chart-under-half) 0 var(--ws-line), transparent 0 calc(var(--ws-line) * 3)); transform-origin: left; }
+.ws-trend-line__ref > span { position: absolute; left: 0; bottom: calc(100% + var(--space-xxs)); font-size: var(--ws-text-micro); font-weight: 600; line-height: var(--space-sm-plus); color: var(--ws-word-needs); font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* The line and the area under it, in one box that the draw reveals left to right (4 of room above and below, so a point
+   on the grid's top or bottom keeps its whole stroke). */
+.ws-trend-line__draw { position: absolute; inset: calc(var(--ws-trend-line-room) * -1) 0; clip-path: inset(0); pointer-events: none; }
+.ws-trend-line__hatch, .ws-trend-line__lines { position: absolute; inset: var(--ws-trend-line-room) 0; width: 100%; height: calc(100% - var(--ws-trend-line-room) * 2); }
+/* The area: hairlines every 4, in the line's tone at 45% (North's). A 1x screen cannot draw half a pixel in a gradient
+   (it drops it), so there the line is 1 px at half the strength, the same weight to the eye. */
+.ws-trend-line__hatch { --ws-trend-line-hatch: color-mix(in srgb, var(--ws-trend-line-tone) 45%, transparent); --ws-trend-line-hatch-w: var(--ws-hairline); background: repeating-linear-gradient(90deg, var(--ws-trend-line-hatch) 0 var(--ws-trend-line-hatch-w), transparent 0 var(--space-xxs)); }
+@media (max-resolution: 1.49dppx) { .ws-trend-line__hatch { --ws-trend-line-hatch: color-mix(in srgb, var(--ws-trend-line-tone) 22%, transparent); --ws-trend-line-hatch-w: var(--ws-line); } }
+.ws-trend-line__lines { overflow: visible; }
+.ws-trend-line__lines path { fill: none; stroke: var(--ws-trend-line-tone); stroke-width: var(--ws-chart-line); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
+/* What is still to come (a projection): a dotted 1 px line. */
+.ws-trend-line__lines .ws-trend-line__ahead { stroke-width: var(--ws-line); stroke-dasharray: 0.1 calc(var(--ws-hairline) * 5); }
+/* A point: its period's slot, from 12 above its value (the pointer's room) to the baseline. The column (::before) runs
+   from the value to the baseline, its corners 1 px, cut by the grid's lines (set --ticks on the figure to the number of
+   even steps the grid has; 1 cuts only at the top line); the dot (::after) is 8 on the value, ringed in the ground so the
+   line parts round it. A column is never under 2 px, so a zero still shows. */
+.ws-trend-line__point { --ws-trend-line-mark: var(--ws-trend-line-tone); position: absolute; top: calc(var(--y) - var(--ws-trend-line-hit)); bottom: 0; left: calc(100% * var(--i) / var(--n)); width: calc(100% / var(--n)); }
+.ws-trend-line__point--now { --ws-trend-line-mark: var(--tone-now, var(--ws-chart-navy-light)); }
+.ws-trend-line__point::before { content: ""; position: absolute; left: 50%; top: calc(var(--ws-trend-line-hit) - var(--ws-trend-line-dot) / 2); bottom: 0; width: var(--ws-trend-line-col); translate: -50% 0; background: repeating-linear-gradient(to top, var(--ws-trend-line-mark) 0 calc(100cqh / var(--ticks, 1) - var(--ws-hairline)), transparent 0 calc(100cqh / var(--ticks, 1))); transform-origin: bottom; clip-path: inset(0 max(0px, 50% - var(--ws-trend-line-dot) / 2) max(0px, 100% - var(--ws-trend-line-dot)) round calc(var(--ws-trend-line-dot) / 2)); opacity: 0; }
+.ws-trend-line__point::after { content: ""; position: absolute; left: 50%; top: var(--ws-trend-line-hit); width: var(--ws-trend-line-dot); height: var(--ws-trend-line-dot); box-sizing: border-box; translate: -50% -50%; border-radius: var(--radius-full); background: var(--ws-trend-line-mark); box-shadow: 0 0 0 var(--ws-trend-line-ring) var(--color-bg-page), 0 0 0 var(--space-xxs-plus) transparent; }
+/* A period to come: an outline in dashes, the ground inside; its dot hollow. */
+/* An outline cannot collapse into a dot (a clip cuts its sides away), so a column to come keeps its shape and fades. */
+.ws-trend-line__point--ahead::before { top: var(--ws-trend-line-hit); box-sizing: border-box; border: var(--ws-line) dashed var(--ws-trend-line-tone); border-bottom: 0; background: none; clip-path: inset(0 round var(--ws-radius-bar) var(--ws-radius-bar) 0 0); }
+.ws-trend-line__point--ahead::after { border: var(--ws-line) dashed var(--ws-trend-line-tone); background: var(--color-bg-page); }
+/* Columns (--bars): the column whole, the dot gone into its top. */
+.ws-trend-line--bars .ws-trend-line__point::before { clip-path: inset(min(calc(var(--ws-trend-line-dot) / 2), calc(100% - var(--ws-ring))) 0 0 round var(--ws-radius-bar) var(--ws-radius-bar) 0 0); opacity: 1; }
+.ws-trend-line--bars .ws-trend-line__point--ahead::before { clip-path: inset(0 round var(--ws-radius-bar) var(--ws-radius-bar) 0 0); }
+.ws-trend-line--bars .ws-trend-line__point::after { opacity: 0; scale: 0.4; }
+.ws-trend-line--bars .ws-trend-line__draw { clip-path: inset(0 100% 0 0); }
+
+/* The hover band (North's "Chart column highlight slide", .32 s soft): one box that slides to the period under the
+   pointer or the focus (CSS anchor positioning; the app sets __point--on for a tap or a keyboard mark). Columns: a navy
+   wash the slot wide and the plot tall, the other columns step back to --ws-dim. Line: a dashed guide from the dot to the
+   baseline, and the dot grows (North's r .2 s) inside a faint halo. Without anchor positioning the band is left out;
+   the rest still happens. */
+.ws-trend-line__band { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 0; opacity: 0; pointer-events: none; background: linear-gradient(var(--ws-trend-line-tone), var(--ws-trend-line-tone)) center / var(--ws-hairline) 100% no-repeat; }
+.ws-trend-line--bars .ws-trend-line__band { border-radius: var(--ws-radius-row); background: var(--ws-hover); }
+@supports (anchor-name: --a) {
+  .ws-trend-line__area { anchor-scope: --ws-trend-line-at; }
+  .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on) { anchor-name: --ws-trend-line-at; }
+  .ws-trend-line__band { position-anchor: --ws-trend-line-at; left: anchor(left); right: anchor(right); width: auto; top: calc(anchor(top) + var(--ws-trend-line-hit)); background: repeating-linear-gradient(to bottom, var(--ws-trend-line-tone) 0 var(--ws-ring), transparent 0 calc(var(--ws-ring) * 2)) center / var(--ws-line) 100% no-repeat; }
+  .ws-trend-line--bars .ws-trend-line__band { top: 0; background: var(--ws-hover); }
+  .ws-trend-line__area:has(> .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)) > .ws-trend-line__band { opacity: 1; }
+}
+.ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)::after { transform: scale(1.5); box-shadow: 0 0 0 var(--ws-trend-line-ring) var(--color-bg-page), 0 0 0 var(--space-xxs-plus) color-mix(in srgb, var(--ws-trend-line-mark) 12%, transparent); }
+.ws-trend-line--bars .ws-trend-line__area:has(> .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)) > .ws-trend-line__point:not(:focus-visible, .ws-trend-line__point--on)::before { opacity: var(--ws-dim); }
+@media (hover: hover) {
+  @supports (anchor-name: --a) {
+    .ws-trend-line__point:hover { anchor-name: --ws-trend-line-at; }
+    .ws-trend-line__area:has(> .ws-trend-line__point:hover) > .ws-trend-line__band { opacity: 1; }
+  }
+  .ws-trend-line__point:hover::after { transform: scale(1.5); box-shadow: 0 0 0 var(--ws-trend-line-ring) var(--color-bg-page), 0 0 0 var(--space-xxs-plus) color-mix(in srgb, var(--ws-trend-line-mark) 12%, transparent); }
+  .ws-trend-line--bars .ws-trend-line__area:has(> .ws-trend-line__point:hover) > .ws-trend-line__point:not(:hover)::before { opacity: var(--ws-dim); }
+}
+
+/* The period names: one cell a period, centred on its point, 11 / 14 muted, cut with an ellipsis where a name is wider
+   than its slot (give it a title; the table holds the whole words); the current one (__now) 600 navy. A narrow figure
+   (under 30rem) is 200 tall; with more than six names, every other one and the current one's neighbours give way, and
+   the names that show take two slots. */
+.ws-trend-line__x { grid-area: 2 / 2; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding-top: var(--space-xxs-plus); }
+.ws-trend-line__x > span { min-width: 0; overflow: hidden; font-size: var(--ws-text-micro); line-height: var(--space-sm-plus); color: var(--color-text-muted); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
+.ws-trend-line__x > .ws-trend-line__now { font-weight: 600; color: var(--color-text-heading); }
+/* The key, centred under the plot, 16 apart: a 12 px swatch in the mark's look, 8, 14 / 20 medium words. */
+.ws-trend-line__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xxs) var(--space-md); margin: 0; padding: var(--space-md) 0 0; list-style: none; font-size: var(--ws-text-body); font-weight: 500; line-height: var(--ws-leading-row); color: var(--color-text-body); }
+.ws-trend-line__legend > li { display: inline-flex; align-items: center; gap: var(--space-xs); }
+.ws-trend-line__legend > li::before { content: ""; flex-shrink: 0; box-sizing: border-box; width: var(--space-sm); height: var(--space-sm); border-radius: var(--ws-radius-chip); background: var(--ws-trend-line-tone); }
+.ws-trend-line__legend > .ws-trend-line__key--now::before { background: var(--tone-now, var(--ws-chart-navy-light)); }
+.ws-trend-line__legend > .ws-trend-line__key--ahead::before { border: var(--ws-line) dashed var(--ws-trend-line-tone); background: none; }
+.ws-trend-line__legend > .ws-trend-line__key--ref::before { width: var(--space-md); height: var(--ws-line); border-radius: 0; background: repeating-linear-gradient(90deg, var(--ws-chart-under-half) 0 var(--ws-line), transparent 0 calc(var(--ws-line) * 3)); }
+/* The reading, for a screen reader: a real table of every period and its value (the plot itself is hidden from it), in
+   a box that hides it from the eye (a table never shrinks below its words, so the box holds it). */
+.ws-trend-line__table { position: absolute; width: var(--ws-line); height: var(--ws-line); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+@container ws-trend-line (max-width: 30rem) {
+  .ws-trend-line__plot { grid-template-rows: min(var(--ws-trend-line-h), var(--space-9xl)) auto; }
+  .ws-trend-line__x:has(> :nth-child(7)) > :is(:nth-child(even), :has(+ .ws-trend-line__now), .ws-trend-line__now + *) { visibility: hidden; }
+  .ws-trend-line__x:has(> :nth-child(7)) > .ws-trend-line__now { visibility: visible; }
+  /* a name that shows has its hidden neighbours' halves too: two slots, centred on its own */
+  .ws-trend-line__x:has(> :nth-child(7)) > span { margin-inline: -50%; }
+}
+
+/* --bare: the drawing alone, for a tile's preview (MetricTile __preview, 24 tall): no gutter, names, rules or key; a
+   1 px line, 4 px dots (the current one 6), columns 84% of their slot with 2 px corners. */
+.ws-trend-line--bare { --ws-trend-line-h: var(--space-lg); --ws-trend-line-dot: var(--space-xxs); --ws-trend-line-hit: 0px; --ws-trend-line-col: 84%; --ws-trend-line-ring: var(--ws-hairline); flex: 1; min-width: 0; }
+.ws-trend-line--bare .ws-trend-line__plot { grid-template-columns: minmax(0, 1fr); padding: 0; }
+.ws-trend-line--bare .ws-trend-line__area { grid-column: 1; border-bottom: 0; }
+.ws-trend-line--bare :is(.ws-trend-line__y, .ws-trend-line__x, .ws-trend-line__legend, .ws-trend-line__rule, .ws-trend-line__band) { display: none; }
+.ws-trend-line--bare .ws-trend-line__lines path { stroke-width: var(--ws-line); }
+.ws-trend-line--bare .ws-trend-line__point--now { --ws-trend-line-dot: var(--space-xxs-plus); }
+.ws-trend-line--bare.ws-trend-line--bars .ws-trend-line__point::before { clip-path: inset(min(calc(var(--ws-trend-line-dot) / 2), calc(100% - var(--ws-ring))) 0 0 round var(--ws-radius-chip) var(--ws-radius-chip) 0 0); }
+
+/* Motion (D7, North). Nothing here runs under reduced motion: every part is in its final place at once.
+   The morph (North "Bars to line morph", the morph-chart spring .85 / .06): to the line, every column collapses into its
+   top at once on the spring while the line and its area draw left to right over the draw (900 ms, one linear
+   progress); the dots pop on the columns' remains after the settle (320 ms), when the columns are nearly dots, so the
+   spring's small overshoot (a column shrinks past its dot for a moment) is never seen. Back to columns, the dots go at
+   once, the line undraws right to left over the settle and each column grows back down from its dot on the spring. The same element all the way, so a switch
+   midway picks up from where it is. */
+@media (prefers-reduced-motion: no-preference) {
+  .ws-trend-line__point::before { transition: clip-path var(--ws-spring-morph-chart-duration) var(--ws-spring-morph-chart), opacity var(--ws-duration-hover) var(--ws-ease-soft) var(--ws-duration-settle); }
+  .ws-trend-line__point::after { transition: opacity var(--ws-duration-hover) var(--ws-ease-soft) var(--ws-duration-settle), scale var(--ws-duration-settle) var(--ws-ease-pop) var(--ws-duration-settle), transform var(--ws-duration-hover) var(--ws-ease-soft), box-shadow var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-trend-line__draw { transition: clip-path var(--ws-duration-draw) var(--ws-ease-steady); }
+  .ws-trend-line--bars .ws-trend-line__point::before { transition: clip-path var(--ws-spring-morph-chart-duration) var(--ws-spring-morph-chart), opacity var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-trend-line--bars .ws-trend-line__point::after { transition: opacity var(--ws-duration-exit) var(--ws-ease-exit), scale var(--ws-duration-exit) var(--ws-ease-exit), transform var(--ws-duration-hover) var(--ws-ease-soft), box-shadow var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-trend-line--bars .ws-trend-line__draw { transition: clip-path var(--ws-duration-settle) var(--ws-ease-soft); }
+  .ws-trend-line .ws-trend-line__point--ahead::before { transition: opacity var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-trend-line__band { transition: left var(--ws-duration-settle) var(--ws-ease-soft), right var(--ws-duration-settle) var(--ws-ease-soft), top var(--ws-duration-settle) var(--ws-ease-soft), opacity var(--ws-duration-hover) var(--ws-ease-soft); }
+
+  /* The build-in (D7; 5 Nov 2026, a kit default: a chart builds in when it arrives). On first paint it runs over the
+     draw: each column rises from the baseline over the last 45% of it, column i starting at its share of the first 55%
+     (North's chart marks), the line and its area draw left to right, each dot pops as the line reaches it, the
+     reference runs out from the left; in a .ws-build card it all starts at the card's --ws-build-at. A chart that is
+     below the fold builds as it scrolls in instead: the same moves, driven by the figure's own entry into the view
+     (view(): from its top at the window's foot until 80% of it is in view), and it is whole by then; scrolled back out the bottom and in again, it builds again. Where the browser has
+     no view timeline, a chart below the fold is simply whole when it arrives. Only the parts move; the axis, the grid
+     and the words stand still. */
+  .ws-trend-line__point::before { animation: ws-trend-line-rise calc(var(--ws-duration-draw) * 0.45) var(--ws-ease-settle) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-duration-draw) * 0.55 * var(--i) / max(var(--n) - 1, 1)); }
+  .ws-trend-line__point::after { animation: ws-trend-line-pop var(--ws-duration-settle) var(--ws-ease-pop) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-duration-draw) * (var(--i) + 0.5) / var(--n)); }
+  .ws-trend-line__draw { animation: ws-trend-line-wipe var(--ws-duration-draw) var(--ws-ease-steady) var(--ws-build-at, 0s) backwards; }
+  .ws-trend-line__ref { animation: ws-grow var(--ws-duration-draw) var(--ws-ease-soft) var(--ws-build-at, 0s) backwards; }
+  @supports (animation-timeline: view()) {
+    .ws-trend-line { view-timeline: --ws-trend-line-in block; }
+    .ws-trend-line__point::before { animation: ws-trend-line-rise calc(var(--ws-duration-draw) * 0.45) var(--ws-ease-settle) calc(var(--ws-build-at, 0s) + var(--ws-duration-draw) * 0.55 * var(--i) / max(var(--n) - 1, 1)) backwards, ws-trend-line-rise 1s var(--ws-ease-settle) backwards; animation-timeline: auto, --ws-trend-line-in; animation-range: normal, entry calc(44% * var(--i) / max(var(--n) - 1, 1)) entry calc(44% * var(--i) / max(var(--n) - 1, 1) + 36%); }
+    .ws-trend-line__point::after { animation: ws-trend-line-pop var(--ws-duration-settle) var(--ws-ease-pop) calc(var(--ws-build-at, 0s) + var(--ws-duration-draw) * (var(--i) + 0.5) / var(--n)) backwards, ws-trend-line-pop 1s var(--ws-ease-pop) backwards; animation-timeline: auto, --ws-trend-line-in; animation-range: normal, entry calc(72% * (var(--i) + 0.5) / var(--n)) entry calc(72% * (var(--i) + 0.5) / var(--n) + 8%); }
+    .ws-trend-line__draw { animation: ws-trend-line-wipe var(--ws-duration-draw) var(--ws-ease-steady) var(--ws-build-at, 0s) backwards, ws-trend-line-wipe 1s var(--ws-ease-steady) backwards; animation-timeline: auto, --ws-trend-line-in; animation-range: normal, entry 0% entry 80%; }
+    .ws-trend-line__ref { animation: ws-grow var(--ws-duration-draw) var(--ws-ease-soft) var(--ws-build-at, 0s) backwards, ws-grow 1s var(--ws-ease-soft) backwards; animation-timeline: auto, --ws-trend-line-in; animation-range: normal, entry 0% entry 80%; }
+    /* Inside a dashboard build-in card the card decides when it plays (once, as it lands): drop the scroll-scrubbed
+       copy so the chart never builds a second time when scrolled out and back. */
+    .ws-build__card .ws-trend-line__point::before, .ws-build__card .ws-trend-line__point::after,
+    .ws-build__card .ws-trend-line__draw, .ws-build__card .ws-trend-line__ref { animation-timeline: auto, none; }
+  }
+}
+@keyframes ws-trend-line-rise { from { transform: scaleY(0); } }
+@keyframes ws-trend-line-pop { from { transform: scale(0); } }
+@keyframes ws-trend-line-wipe { from { clip-path: inset(0 100% 0 0); } }

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

@@ -15,39 +15,50 @@ The system's grey well: a plate holding a short list of pressable rows, for ever
 
 ## Anatomy
 
-- The well itself: `--ws-radius-card` (8 px) corners, `--ws-well` ground (`--color-gray-2`, `#ededed`), `--space-xxs` (4 px) padding and the same 4 px gap between rows.
-- Each row (`WellRow`): `--ws-row-h` (48 px) tall at least, `--ws-radius-row` (6 px) corners, the page's cream (`--color-bg-page`) background, 12 px on the left, a touch more on the right, its parts 12 px apart (`--space-sm`).
-- Row words: 14 px medium, navy (`--color-text-heading`).
-- A row may lead with a face or icon before its words, and end with a chevron or other trailing mark.
+- The well itself: `--ws-radius-card` (8 px) corners, `--ws-well` ground (#EDEDED), 2 px padding (`--space-3xs`) and
+  the same 2 px between rows (Seth's well, node 15:708), so the rows' 6 px corners sit concentric in the plate.
+- Each row (`ws-well-row`): 48 px tall at least (`--ws-row-h`), `--ws-radius-row` (6 px) corners, the cream
+  (`--color-bg-page`), 8 px top and bottom, 12 px on the left and 14 px on the right, its parts 12 px apart
+  (`--space-sm`).
+- Row words: 14 px medium, navy (`--color-text-heading`), one line. A long question is cut with an ellipsis and its
+  row carries a `title` with the whole question.
+- A row may lead with a face or icon before its words (a person's face is a `ws-avatar` with their initials or photo,
+  never an empty disc), and end with a 16 px chevron in `--color-text-muted`.
 
 ## Variants and sizes
 
 | State | Row ground |
 | --- | --- |
 | Row, default | The page's cream |
-| Row, hover | White (`--color-white`), the one surface in the system where hover lightens rather than darkens |
+| Row, hover | White (`--color-surface`), the one surface in the system where hover lightens rather than darkens |
 | Row, pressed | `--ws-surface-press`, a step darker than the cream, so a tap answers on a touch screen |
-| Placeholder row (`hidden`) | A muted bar standing in for the words, hidden from assistive tech |
+| Placeholder row (`hidden`) | A shimmer line standing in for the words (`--ws-shimmer`), hidden from assistive tech; not a target, so no pointer and no white hover. Under reduced motion a still ghost line (`--ws-well-hover`) |
 
 ## States
 
 - **Default**: cream rows on the grey well.
-- **Hover**: a row turns white under the pointer, the one place in the system where hover lightens a surface instead of darkening it.
-- **Focus**: the row's inset focus ring (`--ws-focus-inset`), since a row cannot grow an outer ring without affecting its neighbours.
-- **Pressed**: `--ws-surface-press`; rows never scale under a press, they only tint.
-- **Busy**: the well carries `aria-busy`, and rows that are still loading show as placeholders (`hidden`), present for layout but invisible to a screen reader.
-- **Disabled**: not a state a well row carries itself; a row that cannot be used yet is simply not shown.
+- **Hover** (a pointer that hovers only): a row turns white (`--color-surface`), the one place in the system where hover
+  lightens a surface instead of darkening it. A touch screen never shows it, so a tap leaves no stuck white row.
+- **Focus**: the 2 px navy ring drawn inside the row (`--ws-focus-*`), since a row cannot grow an outer ring without
+  touching its neighbours.
+- **Pressed**: `--ws-surface-press` at once; rows never scale under a press, they only tint.
+- **Busy**: the well carries `aria-busy`, and rows still loading show a shimmer line, one quiet grey
+  (`hidden` rows), present for layout and invisible to a screen reader. Under reduced motion the line stands still.
+- **Disabled**: not a state a well row carries; a row that cannot be used yet is not shown.
 - **Empty**: a well with no suggestions is not rendered; there is no empty well.
-- **Long label**: a row's words should stay to one short line; a long question truncates rather than wrapping the row taller.
-- **Touch**: rows meet the 48 px row height, already above the 40 px floor.
+- **Long label**: the words stay on one line and are cut with an ellipsis; the row's `title` holds the whole question
+  (and a screen reader reads it all). Keep prompts short enough that this is rare.
+- **Touch**: rows are 48 px, above the 40 px floor.
+- **Dark**: the plate, the rows and the hover follow the theme.
 
 ## Behaviour
 
 - Keyboard: each interactive row is a real `<button type="button">`, reachable by Tab, activated by Enter or Space.
 - Pointer: hover whitens a row; click fires the row's action at once.
 - Touch: the press tint (`--ws-surface-press`) answers a tap since there is no hover state on touch.
-- Motion: row background changes animate at `--ws-duration-instant` on `--ws-ease-soft`; rows arriving in a list may use `ws-rise` with a stagger on the `li`, set from outside the component via `style`/`className`.
-- Reduced motion: colour transitions are skipped (`motion-reduce:transition-none`); nothing else moves.
+- Motion: the hover tint eases over `--ws-duration-hover` on `--ws-ease-soft`, the press at once; rows arriving in a list
+  may use `ws-settle` with `--ws-i` for a 22 ms stagger, set on the `li`.
+- Reduced motion: every change is instant and the busy shimmer stands still.
 
 ## Content
 
@@ -79,14 +90,45 @@ The system's grey well: a plate holding a short list of pressable rows, for ever
 ## Rules
 
 - "What to ask is a well": every short list of suggested prompts uses `Well`, never a hand-built list of buttons.
-- Never a grey plate holding white rows except here: the well is the one place that pattern is correct, by design (the
-  system calls out "grey plates holding white rows" as a mistake everywhere else, which is exactly what the well
-  itself is).
-- A row never scales on press; only a card or a button does. Rows tint instead (the system's own rule for buttons and
-  controls).
+- The well holds prompts. A list of things to open (checks, fixes, records) is a card's rows (`Card`, Seth's rim list:
+  cream rows joined by 0.5 px dividers inside the 1 px tray rim). Those are the two places the grey holds cream rows.
+- A row never scales on press; rows tint instead.
+- A row whose question may be cut carries a `title` with all of it.
 
 ## Source
 
-**Derived from**: the system's rule that a short list of suggested prompts is always a well, never a hand-built list
-of buttons, and the one deliberate exception to "never a grey plate holding white rows." **Precedent**: the first
+**Derived from**: Seth's well (Ignite surfaces.tsx:265-297, node 15:708: 2 in, 2 apart, rows 8 / 14 / 8 / 12, 12
+between parts) and the system's rule that a short list of suggested prompts is always a well. **Precedent**: the first
 product built on the system.
+
+## Markup
+
+```html
+<ul class="ws-well" aria-label="What to ask">
+  <li>
+    <button type="button" class="ws-well-row">
+      <span class="ws-well-row__words"><span>What should I post this week?</span></span>
+      <svg class="ws-well-row__chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    </button>
+  </li>
+  <li>
+    <button type="button" class="ws-well-row">
+      <span class="ws-avatar ws-avatar--plain" aria-hidden="true">PN</span>
+      <span class="ws-well-row__words"><span>Ask Priya Nair for a review</span></span>
+      <svg class="ws-well-row__chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    </button>
+  </li>
+</ul>
+
+<!-- Busy -->
+<ul class="ws-well" aria-label="What to ask" aria-busy="true">
+  <li aria-hidden="true"><div class="ws-well-row"><span class="ws-well-row__placeholder" style="width: 70%;"></span></div></li>
+</ul>
+```
+
+## Styles
+
+The well and its row are house surfaces (`_house.css`: ground, corners, row height, the white hover); `Well/style.css`
+sets Seth's 2 px insets, the row's padding and gap, the touch hover, the one-line words and the shimmer placeholder.
+Tokens: `--ws-well`, `--space-3xs`, `--ws-row-h`, `--ws-radius-row`, `--color-surface`, `--ws-surface-press`,
+`--ws-shimmer`, `--ws-well-hover` (the still ghost), `--ws-loop-shimmer`, `--ws-ease-shimmer`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Cards" height=284 -->
+<!-- @dsCard group="Cards" height=274 -->
 <!doctype html>
 <html>
 <head>
@@ -8,55 +8,55 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage ws-stage--grey">
+<div class="ws-stage">
 
   <div class="ws-stack" style="width: 340px; max-width: 100%;">
-    <span class="ws-muted">Default: four rows, a chevron at the end</span>
+    <span class="ws-muted">Default: four rows, a chevron at the end; a long question is cut, its title holds it</span>
     <ul class="ws-well" aria-label="What to ask">
       <li>
         <button type="button" class="ws-well-row">
           <span class="ws-well-row__words"><span>What should I post this week?</span></span>
-          <svg class="ws-well-row__chevron" viewBox="0 0 16 16" fill="none"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          <svg class="ws-well-row__chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
         </button>
       </li>
       <li>
         <button type="button" class="ws-well-row">
           <span class="ws-well-row__words"><span>Why did my views drop last week?</span></span>
-          <svg class="ws-well-row__chevron" viewBox="0 0 16 16" fill="none"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          <svg class="ws-well-row__chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
         </button>
       </li>
       <li>
         <button type="button" class="ws-well-row">
-          <span class="ws-avatar ws-avatar--plain" aria-hidden="true"></span>
+          <span class="ws-avatar ws-avatar--plain" aria-hidden="true">PN</span>
           <span class="ws-well-row__words"><span>Ask Priya Nair for a review</span></span>
-          <svg class="ws-well-row__chevron" viewBox="0 0 16 16" fill="none"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          <svg class="ws-well-row__chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
         </button>
       </li>
       <li>
-        <button type="button" class="ws-well-row">
-          <span class="ws-well-row__words"><span>Draft a follow-up for Dana's open house</span></span>
-          <svg class="ws-well-row__chevron" viewBox="0 0 16 16" fill="none"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        <button type="button" class="ws-well-row" title="Draft a follow-up for everyone who came to Dana&rsquo;s open house on Oak Street">
+          <span class="ws-well-row__words"><span>Draft a follow-up for everyone who came to Dana&rsquo;s open house on Oak Street</span></span>
+          <svg class="ws-well-row__chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
         </button>
       </li>
     </ul>
   </div>
 
   <div class="ws-stack" style="width: 340px; max-width: 100%;">
-    <span class="ws-muted">Busy: the well's rows are still being read, placeholders stand in their places</span>
+    <span class="ws-muted">Busy: the rows are still being read, a shimmer line in each place</span>
     <ul class="ws-well" aria-label="What to ask" aria-busy="true">
       <li aria-hidden="true">
         <div class="ws-well-row">
-          <span class="ws-well-row__placeholder ws-working-slow" style="width: 70%;"></span>
+          <span class="ws-well-row__placeholder" style="width: 70%;"></span>
         </div>
       </li>
       <li aria-hidden="true">
         <div class="ws-well-row">
-          <span class="ws-well-row__placeholder ws-working-slow" style="width: 55%;"></span>
+          <span class="ws-well-row__placeholder" style="width: 55%;"></span>
         </div>
       </li>
       <li aria-hidden="true">
         <div class="ws-well-row">
-          <span class="ws-well-row__placeholder ws-working-slow" style="width: 80%;"></span>
+          <span class="ws-well-row__placeholder" style="width: 80%;"></span>
         </div>
       </li>
     </ul>

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

@@ -0,0 +1,22 @@
+/* ---- Well: Seth's grey plate of cream rows to ask, 2 px in and 2 px apart, a chevron at each end ---- */
+/* Seth's well (node 15:708): 2 in and 2 apart (was 4), so the rows' 6 px corners sit concentric in the 8 px plate. */
+.ws-well { padding: var(--space-3xs); gap: var(--space-3xs); }
+/* A row: 48 at least, 8 top and bottom, 12 on the left and 14 on the right, its parts 12 apart. White under the pointer
+   (only where a pointer hovers, so a tap leaves no stuck white row), the press tint at once, the inset ring on focus. */
+.ws-well-row { gap: var(--space-sm); padding: var(--space-xs) var(--space-sm-plus) var(--space-xs) var(--space-sm); }
+.ws-well-row:active { transition-duration: var(--ws-duration-instant); }
+/* A still row (a busy placeholder, no button) is not a target: no pointer, no white under it. */
+.ws-well-row:not(button, a) { cursor: default; }
+.ws-well-row:not(button, a):is(:hover, :active) { background: var(--color-bg-page); }
+@media (hover: none) {
+  .ws-well-row:hover { background: var(--color-bg-page); }
+  .ws-well-row:active { background: var(--ws-surface-press); }
+}
+/* The words: one line; a long question is cut with an ellipsis and its row carries a title with the whole of it. */
+.ws-well-row__words { display: flex; min-width: 0; flex: 1; flex-direction: column; }
+.ws-well-row__words > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ws-well-row__chevron { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); color: var(--color-text-muted); }
+/* Busy: a shimmer line in each row, sized where used; under reduced motion a still ghost in the hover grey, never a
+   frozen frame of the sweep. */
+.ws-well-row__placeholder { height: var(--space-sm); border-radius: var(--ws-radius-chip); background: var(--ws-well-hover); }
+@media (prefers-reduced-motion: no-preference) { .ws-well-row__placeholder { background: var(--ws-shimmer); background-size: 300% 100%; animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; } }