@felloinnovations/brand-kit 0.4.0 → 0.5.1

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

@@ -0,0 +1,81 @@
+/* ---- Composer: the one chat box (North's): a square-cornered field 52 tall that grows with the words, its tools on the bottom line, a context tab riding on top ---- */
+/* The field: white, the 0.5 px card edge, 4 px corners, 52 at least, 8 inside (16 on the left of the words). It grows
+   with the words and its tools stay on the bottom line. Focus draws the kit's 2 px navy ring on the box's own edge
+   (inside it, so the composer area never has to make room for it). */
+.ws-composer { --ws-composer-line: var(--ws-control-h-md); display: flex; align-items: flex-end; gap: var(--space-3xs); min-height: var(--ws-composer-h); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border-radius: var(--ws-radius-control); background: var(--ws-field); box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card); color: var(--ws-field-ink); }
+.ws-composer:has(.ws-composer__words:focus-visible) { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: calc(var(--ws-focus-width) * -1); }
+.ws-composer__words:focus-visible { outline: none; }
+.ws-composer--live { box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card), var(--ws-ring-selected); }
+/* The lead (the home screen's address line): the app's 20 px face and short name, then a 1 px rule, on the tools' line. */
+.ws-composer__lead { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-xs); height: var(--ws-composer-line); }
+.ws-composer__face { flex-shrink: 0; width: var(--ws-icon-lg); height: var(--ws-icon-lg); }
+.ws-composer__face svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); }
+.ws-composer__name { font-size: var(--ws-text-body); font-weight: 500; color: var(--color-text-heading); white-space: nowrap; }
+.ws-composer__rule { flex-shrink: 0; align-self: flex-end; width: var(--ws-line); height: var(--ws-icon-lg); margin: 0 var(--space-sm) calc((var(--ws-composer-line) - var(--ws-icon-lg)) / 2); background: var(--ws-track); }
+/* The words: 16 / 24, one line 36 tall (6 above and under, centred on the tools' line), growing to 6 lines then scrolling. */
+.ws-composer__words { flex: 1; min-width: 0; min-height: var(--ws-composer-line); max-height: var(--space-8xl); margin: 0; padding: calc((var(--ws-composer-line) - var(--ws-leading-message)) / 2) var(--space-3xs) calc((var(--ws-composer-line) - var(--ws-leading-message)) / 2) 0; border: 0; background: transparent; font-size: var(--ws-text-value); line-height: var(--ws-leading-message); color: var(--ws-field-ink); resize: none; field-sizing: content; overflow-wrap: anywhere; }
+textarea.ws-composer__words { overflow-y: auto; }
+/* A one-line field (an input) cuts its words and its placeholder with an ellipsis, never mid-letter. */
+input.ws-composer__words { text-overflow: ellipsis; }
+.ws-composer__words::placeholder, .ws-composer__words--empty { color: var(--color-text-muted); }
+/* The tools on the right, 2 apart: plus and mic as 36 square tools (a tool that is on turns into the navy round), then
+   the one round navy act, Talk or Send. */
+.ws-composer__trail { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-3xs); }
+.ws-composer__trail > .ws-icon-btn { width: var(--ws-composer-line); height: var(--ws-composer-line); color: var(--color-text-heading); }
+.ws-composer__trail > .ws-icon-btn:not(.ws-icon-btn--primary, [aria-pressed="true"]) { border-radius: var(--ws-radius-control); }
+.ws-composer__trail > .ws-icon-btn:is(.ws-icon-btn--primary, [aria-pressed="true"]) { border-radius: var(--radius-full); color: var(--ws-on-act); }
+.ws-composer__trail > .ws-icon-btn svg { width: var(--ws-icon); height: var(--ws-icon); }
+@media (hover: hover) { .ws-composer__trail > .ws-icon-btn:not(.ws-icon-btn--primary, [aria-pressed="true"]):hover { background: var(--ws-hover-strong); } }
+/* Touch: the tools' line is 40, and the words, the lead and the rule centre on it. */
+@media (pointer: coarse) { .ws-composer { --ws-composer-line: var(--ws-touch); } }
+/* Live: what is heard is one line, cut at the end (give it a title). */
+.ws-composer--live .ws-composer__words { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ws-composer__dot { margin-right: var(--space-xxs); }
+/* The context tab: what the question is about, riding on the field (padding 6 / 6 / 6 / 12, the field's edge on its
+   top and sides only, 4 px top corners, a faint navy tint); the field gives up its top corners. Tabs stack, split by a
+   0.5 px line. */
+.ws-composer__context { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xxs-plus) var(--space-xxs-plus) var(--space-xxs-plus) var(--space-sm); border-radius: var(--ws-radius-control) var(--ws-radius-control) 0 0; box-shadow: inset 0 var(--ws-hairline) 0 var(--ws-edge-card), inset var(--ws-hairline) 0 0 var(--ws-edge-card), inset calc(var(--ws-hairline) * -1) 0 0 var(--ws-edge-card); background: linear-gradient(var(--ws-hover), var(--ws-hover)) var(--ws-field); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-body); }
+.ws-composer__context > svg { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); color: var(--color-text-heading); }
+.ws-composer__context > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ws-composer__context + .ws-composer__context { border-radius: 0; box-shadow: inset 0 var(--ws-hairline) 0 var(--ws-edge-slot), inset var(--ws-hairline) 0 0 var(--ws-edge-card), inset calc(var(--ws-hairline) * -1) 0 0 var(--ws-edge-card); }
+.ws-composer__context + .ws-composer { border-top-left-radius: 0; border-top-right-radius: 0; }
+/* The field look, for a pane (Seth's "Ask Grow"): 40 tall, the tray grey, 8 px corners, 12 inside and 10 between its
+   parts, a 20 px face, 14 / 20 words and a 16 px send arrow. */
+.ws-composer--field { align-items: center; gap: var(--space-xs-plus); min-height: var(--space-2xl); padding: 0 var(--space-xxs) 0 var(--space-sm); border-radius: var(--ws-radius-card); background: var(--ws-tray); box-shadow: none; }
+.ws-composer--field .ws-composer__words { min-height: 0; padding: var(--space-xs-plus) 0; font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); }
+.ws-composer--field { --ws-composer-line: var(--ws-control-h); }
+.ws-composer--field .ws-composer__trail > .ws-icon-btn { background: none; color: var(--color-text-heading); }
+/* Touch: 40 tall and 16 px words (under 16 iOS zooms the page in when the field takes focus), on the same 20 line. */
+@media (pointer: coarse) { .ws-composer--field { --ws-composer-line: var(--ws-touch); } .ws-composer--field .ws-composer__words { font-size: var(--ws-text-value); } }
+/* The navy ground keeps the field white (--ws-field), so on it the words, the tools, the washes, the edges and the
+   focus ring take the field's own navy ink and nothing turns white on white. The pane field sits on the tray, not the
+   white, so its words take the ground's heading. */
+[data-theme="dark"][data-ground="navy"] :is(.ws-composer:not(.ws-composer--field), .ws-composer__context) { --color-text-heading: var(--ws-field-ink); --color-text-body: var(--ws-field-ink); --color-text-muted: var(--color-text-placeholder); --ws-on-act: var(--ws-field); --ws-focus-color: var(--ws-field-ink); --ws-hover: color-mix(in srgb, var(--ws-field-ink) 5%, transparent); --ws-hover-strong: color-mix(in srgb, var(--ws-field-ink) 6%, transparent); --ws-edge-card: color-mix(in srgb, var(--ws-field-ink) 18%, transparent); --ws-edge-slot: var(--ws-edge-card); --ws-track: var(--ws-edge-card); --ws-surface-sunk: color-mix(in srgb, var(--ws-field) 92%, var(--ws-field-ink)); --ws-act-hover: color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act)); --ws-edge-hover: var(--color-text-muted); --ws-shadow-hairline-in: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card); }
+[data-theme="dark"][data-ground="navy"] .ws-composer--field { --ws-field-ink: var(--color-text-heading); }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-ground="navy"] :is(.ws-composer:not(.ws-composer--field), .ws-composer__context) { --color-text-heading: var(--ws-field-ink); --color-text-body: var(--ws-field-ink); --color-text-muted: var(--color-text-placeholder); --ws-on-act: var(--ws-field); --ws-focus-color: var(--ws-field-ink); --ws-hover: color-mix(in srgb, var(--ws-field-ink) 5%, transparent); --ws-hover-strong: color-mix(in srgb, var(--ws-field-ink) 6%, transparent); --ws-edge-card: color-mix(in srgb, var(--ws-field-ink) 18%, transparent); --ws-edge-slot: var(--ws-edge-card); --ws-track: var(--ws-edge-card); --ws-surface-sunk: color-mix(in srgb, var(--ws-field) 92%, var(--ws-field-ink)); --ws-act-hover: color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act)); --ws-edge-hover: var(--color-text-muted); --ws-shadow-hairline-in: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card); }
+  [data-theme="system"][data-ground="navy"] .ws-composer--field { --ws-field-ink: var(--color-text-heading); }
+}
+/* Focus glow (North's "Focus glow", the glow spring .3 / 0, css:2120): while something in the box has focus, from a
+   pointer or a key, a soft drop gathers under it (0 4 16, the shade at 7 %); its edge stays its own and the keyboard
+   ring is still the kit's (D8). The pane field, a live call and the chat bar keep their own look. */
+:where(.ws-composer:not(.ws-composer--field, .ws-composer--live)):focus-within { box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card), 0 var(--space-xxs) var(--space-md) color-mix(in srgb, var(--ws-shade) 7%, transparent); }
+/* The rolling placeholder (North's "Placeholder roll", the roll spring .45 / .05, js@784180): a few questions in a
+   ws-composer__roll laid over the words' first line, the words and the roll sharing one cell (ws-composer__slot). The
+   shown one (data-on, moved on every 3.4 s by rollPlaceholder() from the package) rolls up out of 12 px and a 3 px blur;
+   the one before it rolls on up 12 px into the blur. The words keep the first question as their real placeholder (what
+   a screen reader reads), painted clear; the roll goes once there are words. Without the script, or with reduced motion,
+   the first question holds. The main field only: the pane field keeps its plain placeholder. */
+.ws-composer__slot { display: grid; flex: 1; min-width: 0; }
+.ws-composer__slot > * { grid-area: 1 / 1; }
+.ws-composer__slot > .ws-composer__words { width: 100%; }
+.ws-composer__roll { display: grid; align-self: start; min-width: 0; padding: calc((var(--ws-composer-line) - var(--ws-leading-message)) / 2) var(--space-3xs) 0 0; font-size: var(--ws-text-value); line-height: var(--ws-leading-message); color: var(--color-text-muted); pointer-events: none; }
+.ws-composer__roll > * { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; visibility: hidden; translate: 0 var(--ws-drop); filter: blur(var(--ws-blur-arrive)); }
+.ws-composer__roll > [data-off] { translate: 0 calc(var(--ws-drop) * -1); }
+.ws-composer__roll > [data-on], .ws-composer__roll:not(:has(> [data-on])) > :first-child { opacity: 1; visibility: visible; translate: none; filter: none; }
+.ws-composer__slot:has(> .ws-composer__roll) > .ws-composer__words::placeholder { color: transparent; }
+.ws-composer__words:not(:placeholder-shown) ~ .ws-composer__roll { display: none; }
+@media (prefers-reduced-motion: no-preference) {
+  :where(.ws-composer:not(.ws-composer--field, .ws-composer--live)) { transition: box-shadow var(--ws-spring-glow-duration) var(--ws-spring-glow); }
+  .ws-composer__roll > :is([data-on], [data-off]) { transition: opacity var(--ws-spring-roll-duration) var(--ws-spring-roll), translate var(--ws-spring-roll-duration) var(--ws-spring-roll), filter var(--ws-spring-roll-duration) var(--ws-spring-roll), visibility var(--ws-spring-roll-duration) var(--ws-spring-roll); }
+}

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

@@ -3,87 +3,108 @@ The `Dialog` recipe for the one moment something cannot be undone: name the thin
 ## Use it when
 
 - An action removes something, or removes someone's access to it, and cannot be reversed.
-- An action affects another person, not just the one pressing the button (removing a teammate, deleting a shared
-  draft).
-- The cost of getting it wrong is high enough that a plain button press is not enough on its own.
+- An action affects another person, not just the one pressing the button (removing a teammate, deleting a shared draft).
+- Getting it wrong costs enough that a plain button press is not enough on its own.
 
 ## Not for
 
-- Anything reversible: use the undo alternative (an `Undo` act in a toast, five seconds) instead of a confirm dialog;
-  "undo beats confirm."
-- A short blocking task that is not destructive (assigning something, naming something): use plain `Dialog`.
-- An error: that is a field message or a `Banner`, not a confirmation.
+- Anything reversible: offer Undo in a `Toast` instead; undo beats confirm.
+- A short blocking task that is not destructive (assigning, naming): use plain `Dialog`.
+- An error: that is a field message or a `Banner`.
 
 ## Anatomy
 
-Built directly on `Dialog`'s own anatomy: the native `<dialog>` card, `DialogHead` (a 22 px title, one 14 px sentence),
-`DialogFoot` (the `ws-band` footer, buttons right-aligned, 36 px large), a 35% navy scrim behind it. The one addition is
-a words-only modifier on the destructive button: it keeps the secondary button's cream shell and fine edge, with its
-words recoloured to `--ws-word-needs` instead of navy.
+Built on `Dialog`: the pane in its tray rim, 12 px corners, 28 px sides, the compact head and the foot band, over the
+35% navy scrim. Its `role` is `alertdialog`.
 
-- Title: names the thing and the consequence in one sentence ("Remove Priya Nair from the team?"), stricter than plain
-  `Dialog`'s own examples, which may be more general ("Assign this call").
-- Line: one sentence saying what happens ("Her scores and progress go with her. This cannot be undone.").
-- Foot: two secondary, large (36 px) buttons. The first keeps the thing ("Keep her," context-specific rather than a
-  bare "Cancel"); the second is the destructive act ("Remove"), same cream shell, `--ws-word-needs` words.
+- Title: names the thing and the consequence as a question ("Remove Priya Nair from the team?"), 22 / 28.
+- Line: one sentence saying what happens ("Her scores and progress go with her. This cannot be undone."), 14 / 20,
+  4 under the title, 20 above the foot. Point `aria-describedby` at it.
+- Close: Dialog's 32 px tray square, centred on the title's first line; it stays top right at any width.
+- Foot: two secondary, large acts in `ws-dialog__acts`, 8 apart, on the right. The first keeps the thing ("Keep her");
+  the second is the destructive act ("Remove"), the same cream shell with its words in `--ws-word-needs`
+  (`ws-confirm-dialog__destructive`). On a phone they fill the width in equal halves, stacked full width
+  (keep on top) where a half would be under 160 or a label would break.
 
 ## Variants and sizes
 
 | Variant | Look |
 | --- | --- |
-| Confirm (centre only) | the one form this takes; there is no drawer version, since a confirm is always a short, centred question |
+| Confirm (centre only) | The one form. There is no drawer version: a confirm is always a short question in the centre |
 
 ## States
 
-- **Open:** over its scrim, title, line and both foot buttons visible.
-- **Focus:** trapped inside the dialog; Tab cycles the two buttons.
-- **Closing:** as `Dialog`'s own closing state, frozen for `--ws-duration-instant` while it leaves.
-- **Pending:** the destructive button may show a working dot while the removal runs, refusing a second press, exactly
-  as `Button`'s own pending state.
+- **Open**: over its scrim; title, line and both acts visible.
+- **Focus**: trapped inside; Tab moves between the close and the two acts. Focus starts on the act that keeps the thing.
+- **Hover**: the destructive act keeps its needs-you words; only its ground tints.
+- **Pending**: the destructive act shows the working dot and its present-tense verb ("Deleting"), with `aria-busy` and
+  `aria-disabled`. It stops answering the pointer (no hover tint, no second press); it stays focusable, so the app
+  ignores Enter on it until the work is done.
+- **Closing**: as `Dialog`, it fades and drops 8 px over `--ws-duration-exit`.
 
 ## Behaviour
 
-- Keyboard: Escape closes it and returns focus to what opened it, exactly as `Dialog`.
-- Pointer: a click on the scrim closes it, exactly as `Dialog`.
-- Motion: rises 6 px and grows from 98% on `--ws-duration-settle` on `--ws-ease-soft`, exactly as `Dialog`; leaves faster
-  on `--ws-duration-instant`.
-- Reduced motion: opens and closes with a cross-fade instead of rising and scaling up.
+- Keyboard: Escape closes it and returns focus to what opened it, as `Dialog`. Escape and the close both mean "keep".
+- Pointer: a click on the scrim closes it and keeps the thing (`closedby="any"`), as `Dialog`.
+- Motion: as `Dialog` (it is one): it grows 14 px up out of .98 on the settle spring (`--ws-spring-settle`) as the
+  scrim fades in, its head and foot settling in after it; it leaves faster, over `--ws-duration-exit`.
+- Reduced motion: it appears and goes at once.
+- The preview's last stack is live: press Remove Priya Nair.
 
 ## Content
 
-- The title always names the specific thing and its consequence, never a generic "Are you sure?"
-- The cancel button names what staying means in this case ("Keep her"), not a bare "Cancel," though "Cancel" or "Not
-  now" remain fine when nothing warmer fits.
-- The destructive act is a short, plain verb ("Remove," "Delete").
-- No em dashes, sentence case.
+- The title names the specific thing and its consequence, never "Are you sure?".
+- The keep act says what staying means here ("Keep her", "Keep the draft"); "Cancel" is fine when nothing warmer fits.
+- The destructive act is a short, plain verb ("Remove", "Delete"); pending, its present tense ("Deleting").
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `open` | boolean | drives whether it is open |
-| `onClose` | `() => void` | fires on Escape, the scrim, or choosing "keep" |
-| `title` | string | names the thing and the consequence |
-| `line` | string | says what happens |
-| `keepLabel` | string | the cancel button's words, context-specific |
-| `removeLabel` | string | the destructive button's words |
-| `onConfirm` | `() => void` | fires when the destructive act is pressed |
-| `pending` | boolean | shows the working dot on the destructive act |
+| `open` | boolean | Drives whether it is open. |
+| `onClose` | `() => void` | Fires on Escape, the scrim, the close or the keep act. |
+| `title` | string | Names the thing and the consequence. |
+| `line` | string | Says what happens. |
+| `keepLabel` | string | The keep act's words, specific to the case. |
+| `removeLabel` | string | The destructive act's words. |
+| `onConfirm` | `() => void` | Fires when the destructive act is pressed. |
+| `pending` | boolean | Shows the working dot on the destructive act and refuses a second press. |
 
 ## Rules
 
-- 10-patterns.md's "Confirmation and undo" section: "Confirm only what cannot be undone or affects other people; then
-  name the thing and the consequence in the dialog's title and line, and make the destructive act secondary with
-  needs-you words." Every part of this component follows that line directly.
-- Plain `Dialog`'s own rule is "one navy primary button per dialog... every other act is secondary or a text action."
-  `ConfirmDialog` has no primary button at all: both acts are secondary, and the one that destroys something is marked
-  only by its word colour, never by a navy fill, since a destructive act must never read as the screen's one recommended
-  action.
-- Never a red fill: the destructive act's shell stays the same cream secondary button as "keep," only its words change
-  colour.
+- Confirm only what cannot be undone or affects other people (10-patterns.md, "Confirmation and undo").
+- No navy primary act here: both acts are secondary, and the one that destroys is marked only by its word colour, so a
+  destructive act never reads as the screen's one recommended act.
+- Never a red fill.
 
 ## Source
 
-**Derived from**: `Dialog`'s own anatomy (title, line, footer band) applied directly to the "Confirmation and undo"
-pattern, with the destructive act marked only by its word colour, never a fill; the undo alternative shown alongside
-it is the kit's own `Toast`, not a generic lifted cream card. **Precedent**: the first product built on the system.
+**Derived from**: `Dialog` applied to the "Confirmation and undo" pattern; the undo alternative beside it is the kit's
+own `Toast`. **Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<dialog class="ws-dialog" role="alertdialog" aria-labelledby="remove-title" aria-describedby="remove-line" closedby="any">
+  <header class="ws-head">
+    <div>
+      <h2 id="remove-title" class="ws-title">Remove Priya Nair from the team?</h2>
+      <p id="remove-line" class="ws-body">Her scores and progress go with her. This cannot be undone.</p>
+    </div>
+    <button type="button" class="ws-icon-btn ws-dialog__close" aria-label="Close">
+      <svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+    </button>
+  </header>
+  <footer class="ws-band">
+    <div class="ws-dialog__acts">
+      <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg" autofocus>Keep her</button>
+      <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg ws-confirm-dialog__destructive">Remove</button>
+    </div>
+  </footer>
+</dialog>
+```
+
+## Styles
+
+`ConfirmDialog/style.css` holds one rule, the destructive act's words; the rest is `Dialog/style.css`. Both are in
+`bundle.css` and `fello.css`. Tokens only, so it turns dark with the page.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Overlays" height=352 -->
+<!-- @dsCard group="Overlays" height=450 -->
 <!doctype html>
 <html>
 <head>
@@ -9,42 +9,86 @@
 </head>
 <body>
 <div class="ws-stage ws-stage--grey">
-  <div class="ws-cluster ws-cluster--start" style="gap: var(--space-xl);">
 
-    <div class="ws-stack">
-      <span class="ws-muted">Confirm: cannot be undone, no navy primary, the destructive act in needs-you words</span>
-      <div style="display: grid; place-items: center; width: 360px; height: 280px; overflow: hidden; border-radius: var(--ws-radius-panel); background: linear-gradient(var(--ws-scrim), var(--ws-scrim)), var(--ws-page);">
-        <div style="display: grid; width: 352px; max-width: 100%; justify-items: center;"><div class="ws-dialog" role="dialog" aria-modal="true" aria-labelledby="cd-title">
-          <header class="ws-head">
-            <div>
-              <h2 id="cd-title" class="ws-title">Remove Priya Nair from the team?</h2>
-              <p class="ws-body" style="margin-top: var(--space-xxs);">Her scores and progress go with her. This cannot be undone.</p>
-            </div>
-            <button type="button" class="ws-icon-btn" aria-label="Close">
-              <svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-            </button>
-          </header>
-          <footer class="ws-band">
+  <div class="ws-stack" style="width: 440px;">
+    <span class="ws-muted">Confirm: names the thing and what happens; no navy act, the destructive one in needs-you words</span>
+    <div style="display: grid; place-items: center; padding: var(--space-xl) 0; border-radius: var(--ws-radius-panel); background: linear-gradient(var(--ws-scrim), var(--ws-scrim)), var(--ws-page);">
+      <div class="ws-dialog" role="alertdialog" aria-modal="true" aria-labelledby="cd-title" aria-describedby="cd-line" style="max-width: 384px;">
+        <header class="ws-head">
+          <div>
+            <h2 id="cd-title" class="ws-title">Remove Priya Nair from the team?</h2>
+            <p id="cd-line" class="ws-body">Her scores and progress go with her. This cannot be undone.</p>
+          </div>
+          <button type="button" class="ws-icon-btn ws-dialog__close" aria-label="Close">
+            <svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+          </button>
+        </header>
+        <footer class="ws-band">
+          <div class="ws-dialog__acts">
             <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Keep her</button>
             <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg ws-confirm-dialog__destructive">Remove</button>
-          </footer>
-        </div></div>
+          </div>
+        </footer>
       </div>
     </div>
+  </div>
 
-    <div class="ws-stack">
-      <span class="ws-muted">Undo beats confirm: the reversible alternative as a toast, Toast's own real look</span>
-      <div style="width: 300px; max-width: 100%;">
-        <div class="ws-toast" role="status">
-          <div class="ws-toast__body">
-            <p class="ws-toast__title">Removed Priya Nair from the team</p>
+  <div class="ws-stack" style="width: 440px;">
+    <span class="ws-muted">Pending: the destructive act shows the working dot and takes no second press</span>
+    <div style="display: grid; place-items: center; padding: var(--space-xl) 0; border-radius: var(--ws-radius-panel); background: linear-gradient(var(--ws-scrim), var(--ws-scrim)), var(--ws-page);">
+      <div class="ws-dialog" role="alertdialog" aria-modal="true" aria-labelledby="cd-title-2" aria-describedby="cd-line-2" style="max-width: 384px;">
+        <header class="ws-head">
+          <div>
+            <h2 id="cd-title-2" class="ws-title">Delete the draft to the Whitfield family?</h2>
+            <p id="cd-line-2" class="ws-body">Dana wrote it with you yesterday. Nobody can get it back.</p>
           </div>
-          <button type="button" class="ws-toast__action">Undo</button>
-        </div>
+          <button type="button" class="ws-icon-btn ws-dialog__close" aria-label="Close">
+            <svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+          </button>
+        </header>
+        <footer class="ws-band">
+          <div class="ws-dialog__acts">
+            <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Keep the draft</button>
+            <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg ws-confirm-dialog__destructive" aria-busy="true" aria-disabled="true"><span class="ws-dot ws-working" aria-hidden="true"></span>Deleting</button>
+          </div>
+        </footer>
       </div>
     </div>
+  </div>
 
+  <div class="ws-stack" style="width: 320px;">
+    <span class="ws-muted">Undo beats confirm: the reversible case is a toast with Undo</span>
+    <div class="ws-toast" role="status">
+      <svg class="ws-toast__icon" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <div class="ws-toast__body">
+        <p class="ws-toast__title">Removed Priya Nair from the team</p>
+      </div>
+      <button type="button" class="ws-toast__action">Undo</button>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 320px;" data-live>
+    <span class="ws-muted">Live: press Remove. It moves as every Dialog does: up out of .98 on the settle spring, its parts settling in after it; Escape or either act sends it off faster</span>
+    <button type="button" class="ws-btn ws-btn--secondary ws-confirm-dialog__destructive" style="align-self: flex-start;" onclick="document.getElementById('cd-live').showModal()">Remove Priya Nair</button>
+    <dialog id="cd-live" class="ws-dialog" role="alertdialog" aria-labelledby="cd-live-title" aria-describedby="cd-live-line" closedby="any" style="max-width: 384px;">
+      <header class="ws-head">
+        <div>
+          <h2 id="cd-live-title" class="ws-title">Remove Priya Nair from the team?</h2>
+          <p id="cd-live-line" class="ws-body">Her scores and progress go with her. This cannot be undone.</p>
+        </div>
+        <button type="button" class="ws-icon-btn ws-dialog__close" aria-label="Close" onclick="this.closest('dialog').close()">
+          <svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+        </button>
+      </header>
+      <footer class="ws-band">
+        <div class="ws-dialog__acts">
+          <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg" onclick="this.closest('dialog').close()">Keep her</button>
+          <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg ws-confirm-dialog__destructive" onclick="this.closest('dialog').close()">Remove</button>
+        </div>
+      </footer>
+    </dialog>
   </div>
+
 </div>
 </body>
 </html>

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

@@ -0,0 +1,5 @@
+/* ---- ConfirmDialog: a Dialog that asks before something that cannot be undone; the act in needs-you words ---- */
+/* The words keep their colour on hover and while pending, whatever the secondary button's own hover does. */
+.ws-confirm-dialog__destructive, .ws-confirm-dialog__destructive:hover { color: var(--ws-word-needs); }
+/* Pending (aria-disabled): no hover tint and no second press from a pointer; the app ignores Enter while it is busy. */
+.ws-confirm-dialog__destructive[aria-disabled="true"] { pointer-events: none; }

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

@@ -11,11 +11,11 @@
 <div class="ws-cover">
   <!--
     blocks: brand-navy 360 x 112 (space-9xl + space-8xl), brand-salmon 240 x 112 (space-9xl + space-2xl), ws-chart-past-half 200 x 112 (space-9xl), ws-chart-finished 160 x 112 (space-8xl); a strip of unequal bands across the top, flush, square (the goal strip's order: navy, then salmon to purple to teal).
-    arrangement: the top-band skeleton (the name is wider than 440 px at 64 px), the band 112 px tall, the name a step (space-lg) under it.
+    arrangement: the top-band skeleton (the name is wider than 440 px at 64 px), the band 112 px tall at 960 and scaled with the width below it, the name a step (space-xl) under it and flowing, so a phone keeps every tone and reads every word.
     pattern: the goal strip's ticks: "counts out of a whole are tick rows" and "0.5 px edges, 2 px chips" say precise and modular; forty ticks space-xs wide and space-2xl tall at a space-lg pitch, radius-xs corners, in the ground colour cut out of the blocks, rising from the band's foot.
     scales: widths from space-9xl, space-8xl, space-2xl; tick width space-xs, height space-2xl, pitch space-lg, corners radius-xs; the gap under the band space-lg; the text inset space-2xl.
   -->
-  <svg class="ws-cover__art" viewBox="0 0 960 288" aria-hidden="true">
+  <svg class="ws-cover__art" viewBox="0 0 960 120" aria-hidden="true">
     <rect class="ws-cover__navy" x="0" y="0" width="360" height="112"/>
     <rect class="ws-cover__salmon" x="360" y="0" width="240" height="112"/>
     <rect class="ws-cover__purple" x="600" y="0" width="200" height="112"/>
@@ -24,7 +24,7 @@
       <rect class="ws-cover__tick" x="8" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="32" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="56" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="80" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="104" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="128" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="152" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="176" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="200" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="224" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="248" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="272" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="296" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="320" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="344" y="64" width="8" height="40"/>
       <rect class="ws-cover__tick" x="368" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="392" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="416" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="440" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="464" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="488" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="512" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="536" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="560" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="584" y="64" width="8" height="40"/>
       <rect class="ws-cover__tick" x="608" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="632" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="656" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="680" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="704" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="728" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="752" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="776" y="64" width="8" height="40"/>
-      <rect class="ws-cover__tick" x="808" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="832" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="856" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="880" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="904" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="928" y="64" width="8" height="40"/>
+      <rect class="ws-cover__tick" x="800" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="824" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="848" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="872" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="896" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="920" y="64" width="8" height="40"/><rect class="ws-cover__tick" x="944" y="64" width="8" height="40"/>
     </g>
     <rect class="ws-cover__tint" x="0" y="112" width="960" height="8"/>
   </svg>

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

@@ -0,0 +1,19 @@
+/* ---- Cover: the system's own cover, 960 by 288: the goal strip's four tones cut by ticks, the name a step under it ---- */
+/* The art is a picture: it scales with the cover's width (the band is the SVG's whole viewBox), so a phone sees all four
+   tones. The words flow under it at their own sizes instead of being pinned to 960 px coordinates. */
+.ws-cover { max-width: calc(var(--space-9xl) * 4 + var(--space-8xl)); padding-bottom: var(--space-sm); background: var(--color-bg-page); }
+.ws-cover__art { display: block; width: 100%; height: auto; }
+.ws-cover__navy { fill: var(--color-brand-navy); }
+.ws-cover__salmon { fill: var(--color-brand-salmon); }
+.ws-cover__purple { fill: var(--ws-chart-past-half); }
+.ws-cover__teal { fill: var(--ws-chart-finished); }
+.ws-cover__tint { fill: var(--ws-surface-sunk); }
+.ws-cover__ground { fill: var(--color-bg-page); }
+.ws-cover__tick { rx: var(--ws-radius-chip); }
+.ws-cover__name { margin: var(--space-xl) var(--space-2xl) 0; font-size: var(--font-size-6xl); line-height: 0.95; font-weight: 600; letter-spacing: var(--ws-tracking-title); color: var(--color-text-heading); text-wrap: balance; }
+.ws-cover__line { margin: var(--space-lg) var(--space-2xl) 0; max-width: var(--ws-thing-width); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); color: var(--color-text-muted); }
+/* A phone: the 16 px margin and the name a step down (64 to 40), as Hero does. */
+@media (max-width: 40rem) {
+  .ws-cover__name { margin: var(--space-lg) var(--space-md) 0; font-size: var(--font-size-3xl); line-height: var(--space-3xl); }
+  .ws-cover__line { margin: var(--space-xs) var(--space-md) 0; }
+}

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

@@ -14,8 +14,8 @@ A date field that works on its own, with a popover month grid for picking a day
 
 ## Anatomy
 
-- Field: `Input`'s exact shell (32 px, `--ws-radius-control`, white `--ws-field`, `--ws-shadow-hairline`, mid-blue focus
-  edge), a native `<input type="date">`, with a 16 px calendar line icon at the right, `--color-text-muted`, decorative,
+- Field: `Input`'s exact shell (32 px, `--ws-radius-control`, white `--ws-field`, the inside edge, the kit's focus
+  ring), a native `<input type="date">`, with a 16 px navy calendar line icon at the right, decorative,
   positioned the way `Select`'s own chevron sits.
 - Picker: a `ws-menu` card (cream, `--ws-radius-card`, `--ws-shadow-lift`) holding a month grid.
   - Header: 32 px row (`--ws-control-h`), the month name 14 px medium navy, two `xs` ghost `IconButton`s (24 px) at the
@@ -24,12 +24,19 @@ A date field that works on its own, with a popover month grid for picking a day
   - Day cells: 32 px (`--ws-control-h`), `--ws-radius-control` (4 px) corners. This is a squarer cell than
     `StreakCalendar`'s pill-shaped day cells, because a picker is a month grid for choosing one day, not a strip
     showing a history of days; the two share colour and letter conventions, not cell shape.
-  - Today: a single `--ws-hairline` ring in `--color-brand-salmon`, cream fill, navy numeral, a thinner mark than
-    `StreakCalendar`'s own 3x-hairline today ring, since this spec asks for "a hairline," literally.
-  - Chosen day: solid `--color-text-heading` fill, white numeral, the same `--ws-radius-control` corners.
-  - Range: `--ws-surface-sunk` fill across the cells between two navy, chosen end days.
+  - Today: a 1 px ring in the salmon's AA step (`--ws-word-needs`; the salmon at 0.5 px was 2.6:1, under the 3:1 a
+    mark asks), navy numeral.
+  - Chosen day: solid `--color-text-heading` fill, `--ws-on-act` numeral, the same `--ws-radius-control` corners;
+    `aria-pressed="true"` (today carries `aria-current="date"`).
+  - Range: `--ws-surface-sunk` fill across the cells between two navy, chosen end days; days abut across a row (2 px
+    between weeks), so a range reads as one band.
+  - Numerals: 13 / 18, even.
+  - On touch the grid fills its column (up to 320) and loses its insets, so a day is 40 tall and, from a 280 px column,
+    40 wide; the header is 40 tall and its month buttons are 40 px boxes on the outer days' edges, so their target
+    never spills out of the picker (it never drags sideways).
   - Outside the month: muted numerals, no fill.
-  - Past-disabled: 40% opacity, matching `Button`'s and `IconButton`'s own disabled value.
+  - Past-disabled: 40% opacity, matching `Button`'s and `IconButton`'s own disabled value, and `aria-disabled="true"`
+    so a screen reader says it cannot be chosen.
 
 ## Variants and sizes
 
@@ -45,8 +52,12 @@ There is one size; the field expands to 40 px on a touch screen, where the platf
 - **Field alone:** the native input and its calendar icon, no picker open.
 - **Open picker:** the month grid, including today's ring, a muted out-of-month day and a past-disabled day.
 - **A range:** two navy ends with the sunk fill between them.
-- **Focus:** the field's edge turns mid blue with the focus halo, exactly as `Input`.
-- **Error:** the edge turns salmon with a message below, exactly as `Input`'s error state.
+- **Focus:** the kit's focus ring, 2 px navy, 2 px out, as `Input`'s (a field's edge darkens under the pointer).
+- **Error:** the salmon's AA step as a 1 px edge with a message below, exactly as `Input`'s error state.
+- **Hover (a mouse only):** a day takes the navy wash.
+- **Day focus:** the kit's ring drawn inside the day (the grid is dense); on a navy day the ring is the numeral's colour,
+  2 px further in, so it never vanishes into the fill.
+- **Dark:** the menu, the days and the act take their dark values.
 - **Disabled:** the field is not editable, the icon and picker are inert.
 
 ## Behaviour
@@ -56,7 +67,7 @@ There is one size; the field expands to 40 px on a touch screen, where the platf
   the active cell, Escape closes the picker and returns focus to the field, and the header's buttons (or Page Up/Down)
   move months.
 - Pointer / touch: clicking a day cell chooses it; the field's own calendar icon opens the picker.
-- Motion: the picker opens on `--ws-duration-gentle` on `--ws-ease-soft`, as `Menu`.
+- Motion: the picker opens as `Menu` does, growing from its top left corner, under the field's left edge (D7).
 - Reduced motion: the picker appears without its rise.
 
 ## Content
@@ -81,8 +92,8 @@ There is one size; the field expands to 40 px on a touch screen, where the platf
 - 08-choosing-components.md previously read: "Pick a date or a time | a native input until a picker is built | listed
   as later." This is that picker arriving (26 Oct 2026): the native field stays the whole story on its own, and the
   picker is an enhancement, never a replacement.
-- Today's colour logic (a salmon outline, nothing else about the cell changes) and the muted day-letter row both come
-  from `StreakCalendar`; the cell shape does not, since the two components solve different problems.
+- Today is an outline in the salmon's AA step, nothing else about the cell changes; the muted day-letter row comes from
+  `StreakCalendar`; the cell shape does not, since the two components solve different problems.
 - 40% opacity for a past-disabled day matches `Button`'s and `IconButton`'s own disabled value, not `Checkbox`'s 50%.
 
 ## Source
@@ -90,3 +101,57 @@ There is one size; the field expands to 40 px on a touch screen, where the platf
 **Derived from**: `Input`'s field chrome, `Select`'s chevron-positioning pattern, `StreakCalendar`'s today-marking
 colour and day-letter conventions, and `Menu`'s `ws-menu` panel shell and motion. **Precedent**: an intentional
 addition decided from the system, 26 Oct 2026 (filling the "listed as later" line in 08-choosing-components.md).
+
+## Markup
+
+```html
+<label class="ws-field">
+  <span class="ws-label">Call date</span>
+  <span class="ws-date-input">
+    <input class="ws-input" type="date" value="2026-10-22">
+    <svg class="ws-date-input__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.5" y="3.5" width="11" height="10" rx="1.5"/><path d="M2.5 6.5h11M5 2v3M11 2v3"/></svg>
+  </span>
+</label>
+<div class="ws-menu ws-date-input__picker" role="dialog" aria-label="Choose a date">
+  <div class="ws-date-input__head">
+    <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Previous month">...</button>
+    <span class="ws-date-input__month">October 2026</span>
+    <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Next month">...</button>
+  </div>
+  <div class="ws-date-input__grid">
+    <span class="ws-date-input__letter">M</span> ...
+    <!-- outside the month, and a day that cannot be chosen (past or out of range) -->
+    <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled" aria-disabled="true">30</button>
+    <button type="button" class="ws-date-input__cell ws-date-input__cell--disabled" aria-disabled="true">1</button>
+    ...
+    <button type="button" class="ws-date-input__cell ws-date-input__cell--chosen" aria-pressed="true">22</button>
+    <button type="button" class="ws-date-input__cell ws-date-input__cell--today" aria-current="date">26</button>
+    <button type="button" class="ws-date-input__cell ws-date-input__cell--muted">1</button>
+  </div>
+</div>
+
+<!-- a range: two navy ends, the sunk band between them -->
+<div class="ws-date-input__grid">
+  ...
+  <button type="button" class="ws-date-input__cell ws-date-input__cell--range-start" aria-pressed="true">12</button>
+  <button type="button" class="ws-date-input__cell ws-date-input__cell--range">13</button>
+  <button type="button" class="ws-date-input__cell ws-date-input__cell--range">14</button>
+  <button type="button" class="ws-date-input__cell ws-date-input__cell--range-end" aria-pressed="true">15</button>
+  ...
+</div>
+
+<!-- the field in error -->
+<div class="ws-field">
+  <label class="ws-label" for="close">Close date</label>
+  <span class="ws-date-input">
+    <input class="ws-input" id="close" type="date" aria-invalid="true" aria-describedby="close-msg">
+    <svg class="ws-date-input__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.5" y="3.5" width="11" height="10" rx="1.5"/><path d="M2.5 6.5h11M5 2v3M11 2v3"/></svg>
+  </span>
+  <p class="ws-field-msg ws-field-msg--error" id="close-msg">Pick a day after the offer was sent</p>
+</div>
+```
+
+## Styles
+
+`design-system/components/DateInput/style.css`: `ws-date-input`, `__icon`, `__picker`, `__head`, `__month`, `__grid`,
+`__letter`, `__cell` and its `--muted`, `--today`, `--chosen`, `--disabled`, `--range`, `--range-start`, `--range-end`.