@felloinnovations/brand-kit 0.4.0 → 0.5.1

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

@@ -12,7 +12,8 @@
   <div class="ws-cluster ws-cluster--component ws-cluster--start">
 
     <div class="ws-stack">
-      <span class="ws-muted">Field alone: native, dressed as the system's field</span>
+      <span class="ws-muted">Field alone: native, dressed as the system's field; then in error</span>
+      <div class="ws-stack ws-stack--component">
       <label class="ws-field">
         <span class="ws-label">Call date</span>
         <span class="ws-date-input">
@@ -22,6 +23,20 @@
           </svg>
         </span>
       </label>
+      <div class="ws-field">
+        <label class="ws-label" for="di-err">Close date</label>
+        <span class="ws-date-input">
+          <input class="ws-input" id="di-err" type="date" value="2026-10-02" aria-invalid="true" aria-describedby="di-err-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="di-err-msg">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2.3 14.6 13.5H1.4L8 2.3Z"/><path d="M8 6.4v3"/><path d="M8 11.5v.05"/></svg>
+          Pick a day after the offer was sent
+        </p>
+      </div>
+      </div>
     </div>
 
     <div class="ws-stack">
@@ -34,16 +49,16 @@
         </div>
         <div class="ws-date-input__grid">
           <span class="ws-date-input__letter">M</span><span class="ws-date-input__letter">T</span><span class="ws-date-input__letter">W</span><span class="ws-date-input__letter">T</span><span class="ws-date-input__letter">F</span><span class="ws-date-input__letter">S</span><span class="ws-date-input__letter">S</span>
-          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled">28</button>
-          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled">29</button>
-          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled">30</button>
+          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled" aria-disabled="true">28</button>
+          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled" aria-disabled="true">29</button>
+          <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">1</button><button type="button" class="ws-date-input__cell">2</button><button type="button" class="ws-date-input__cell">3</button><button type="button" class="ws-date-input__cell">4</button>
           <button type="button" class="ws-date-input__cell">5</button><button type="button" class="ws-date-input__cell">6</button><button type="button" class="ws-date-input__cell">7</button><button type="button" class="ws-date-input__cell">8</button><button type="button" class="ws-date-input__cell">9</button><button type="button" class="ws-date-input__cell">10</button><button type="button" class="ws-date-input__cell">11</button>
           <button type="button" class="ws-date-input__cell">12</button><button type="button" class="ws-date-input__cell">13</button><button type="button" class="ws-date-input__cell">14</button><button type="button" class="ws-date-input__cell">15</button><button type="button" class="ws-date-input__cell">16</button><button type="button" class="ws-date-input__cell">17</button><button type="button" class="ws-date-input__cell">18</button>
           <button type="button" class="ws-date-input__cell">19</button><button type="button" class="ws-date-input__cell">20</button><button type="button" class="ws-date-input__cell">21</button>
-          <button type="button" class="ws-date-input__cell ws-date-input__cell--chosen" aria-current="date" aria-selected="true">22</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">23</button><button type="button" class="ws-date-input__cell">24</button><button type="button" class="ws-date-input__cell">25</button>
-          <button type="button" class="ws-date-input__cell ws-date-input__cell--today" aria-label="Today, Oct 26">26</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">27</button><button type="button" class="ws-date-input__cell">28</button><button type="button" class="ws-date-input__cell">29</button><button type="button" class="ws-date-input__cell">30</button><button type="button" class="ws-date-input__cell">31</button>
           <button type="button" class="ws-date-input__cell ws-date-input__cell--muted">1</button>
         </div>
@@ -60,20 +75,20 @@
         </div>
         <div class="ws-date-input__grid">
           <span class="ws-date-input__letter">M</span><span class="ws-date-input__letter">T</span><span class="ws-date-input__letter">W</span><span class="ws-date-input__letter">T</span><span class="ws-date-input__letter">F</span><span class="ws-date-input__letter">S</span><span class="ws-date-input__letter">S</span>
-          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled">28</button>
-          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled">29</button>
-          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled">30</button>
+          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled" aria-disabled="true">28</button>
+          <button type="button" class="ws-date-input__cell ws-date-input__cell--muted ws-date-input__cell--disabled" aria-disabled="true">29</button>
+          <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">1</button><button type="button" class="ws-date-input__cell">2</button><button type="button" class="ws-date-input__cell">3</button><button type="button" class="ws-date-input__cell">4</button>
           <button type="button" class="ws-date-input__cell">5</button><button type="button" class="ws-date-input__cell">6</button><button type="button" class="ws-date-input__cell">7</button><button type="button" class="ws-date-input__cell">8</button><button type="button" class="ws-date-input__cell">9</button><button type="button" class="ws-date-input__cell">10</button><button type="button" class="ws-date-input__cell">11</button>
-          <button type="button" class="ws-date-input__cell ws-date-input__cell--range-start" aria-selected="true">12</button>
+          <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">15</button>
           <button type="button" class="ws-date-input__cell ws-date-input__cell--range">16</button>
           <button type="button" class="ws-date-input__cell ws-date-input__cell--range">17</button>
-          <button type="button" class="ws-date-input__cell ws-date-input__cell--range-end" aria-selected="true">18</button>
+          <button type="button" class="ws-date-input__cell ws-date-input__cell--range-end" aria-pressed="true">18</button>
           <button type="button" class="ws-date-input__cell">19</button><button type="button" class="ws-date-input__cell">20</button><button type="button" class="ws-date-input__cell">21</button><button type="button" class="ws-date-input__cell">22</button><button type="button" class="ws-date-input__cell">23</button><button type="button" class="ws-date-input__cell">24</button><button type="button" class="ws-date-input__cell">25</button>
-          <button type="button" class="ws-date-input__cell ws-date-input__cell--today" aria-label="Today, Oct 26">26</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">27</button><button type="button" class="ws-date-input__cell">28</button><button type="button" class="ws-date-input__cell">29</button><button type="button" class="ws-date-input__cell">30</button><button type="button" class="ws-date-input__cell">31</button>
           <button type="button" class="ws-date-input__cell ws-date-input__cell--muted">1</button>
         </div>

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

@@ -0,0 +1,38 @@
+/* ---- DateInput: the native date field with a calendar mark, and a month grid in a menu for picking by eye. Days abut
+   across a row (2 px between weeks), so a range reads as one band; the chosen day is the navy act. On touch the grid
+   fills its column and loses its gaps, so a day is 40 tall and as wide as seven fit (40 or more from a 280 px column). ---- */
+.ws-date-input { position: relative; display: flex; min-width: 0; }
+.ws-date-input .ws-input { padding-right: var(--space-xl); }
+/* The native picker's own mark stays where it is and still opens the sheet; only the kit's mark shows. */
+.ws-date-input .ws-input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
+.ws-date-input__icon { position: absolute; right: var(--space-xs); top: 50%; width: var(--ws-icon); height: var(--ws-icon); transform: translateY(-50%); color: var(--ws-field-mark, var(--color-text-heading)); pointer-events: none; }
+/* The picker is a menu: it grows from its top left, under the field's left edge (written on .ws-menu so it outweighs
+   Menu's corner). */
+.ws-date-input__picker { width: calc(var(--space-9xl) + var(--space-4xl) - var(--space-xxs)); max-width: 100%; padding: var(--space-xxs); }
+.ws-menu.ws-date-input__picker { transform-origin: top left; }
+.ws-date-input__head { display: flex; align-items: center; justify-content: space-between; height: var(--ws-control-h); padding: 0 var(--space-xxs); }
+.ws-date-input__month { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
+.ws-date-input__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3xs) 0; padding: var(--space-xxs); }
+.ws-date-input__letter { text-align: center; font-size: var(--ws-text-micro); line-height: var(--space-md); color: var(--color-text-muted); }
+.ws-date-input__cell { position: relative; display: flex; align-items: center; justify-content: center; height: var(--ws-control-h); padding: 0; border: 0; border-radius: var(--ws-radius-control); background: none; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-heading); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-date-input__cell:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+/* A navy day keeps a visible focus: the ring in its numeral colour, 2 px further in (a navy ring on navy vanishes). */
+.ws-date-input__cell:is(.ws-date-input__cell--chosen, .ws-date-input__cell--range-start, .ws-date-input__cell--range-end):focus-visible { outline-color: var(--ws-on-act); outline-offset: calc(var(--ws-focus-width) * -2); }
+@media (hover: hover) { .ws-date-input__cell:not(.ws-date-input__cell--disabled, .ws-date-input__cell--chosen, .ws-date-input__cell--range-start, .ws-date-input__cell--range-end):hover { background-color: var(--ws-hover); } }
+.ws-date-input__cell--muted { color: var(--color-text-muted); }
+/* Today: a 1 px ring in the salmon's AA step (the salmon itself is 2.6:1 on the cream, under the 3:1 a mark asks). */
+.ws-date-input__cell--today { box-shadow: inset 0 0 0 var(--ws-line) var(--ws-word-needs); }
+.ws-date-input__cell--chosen { background: var(--color-text-heading); color: var(--ws-on-act); }
+.ws-date-input__cell--disabled { opacity: 0.4; cursor: default; }
+.ws-date-input__cell--range { background: var(--ws-surface-sunk); border-radius: 0; }
+.ws-date-input__cell--range-start { background: var(--color-text-heading); color: var(--ws-on-act); border-radius: var(--ws-radius-control) 0 0 var(--ws-radius-control); }
+.ws-date-input__cell--range-end { background: var(--color-text-heading); color: var(--ws-on-act); border-radius: 0 var(--ws-radius-control) var(--ws-radius-control) 0; }
+/* Touch: the grid and the head lose their padding so the days fill the picker and the month buttons sit on the outer
+   days' edges. Those buttons are 40 px boxes there (a 40 px head), so their target is their box: a 24 px button's hit
+   area spilled 8 px past it, out of the picker, and let a finger drag the calendar sideways. */
+@media (pointer: coarse) {
+  .ws-date-input__picker { width: min(100%, calc(var(--ws-touch) * 8)); }
+  .ws-date-input__grid, .ws-date-input__head { padding: 0; }
+  .ws-date-input__head { height: var(--ws-touch); }
+  .ws-date-input__head > .ws-icon-btn { width: var(--ws-touch); height: var(--ws-touch); }
+}

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

@@ -1,68 +1,101 @@
-A modal, built on the browser's own `<dialog>`: a small question in the centre of the screen, or a drawer sliding from an edge.
+A modal, built on the browser's own `<dialog>`: a short task in the centre of the screen, or a drawer from the right edge.
 
 ## Use it when
 
-- A short task needs the person's full attention before they can go back to what they were doing (confirm, assign, name something).
+- A short task needs the person's full attention before they go back (confirm, assign, name something).
 - A focused piece of content belongs over the page rather than beside it, and should trap focus and close on Escape.
-- A drawer reads naturally from a screen's edge (`from="right"` or `"left"`) rather than floating in the centre.
+- A drawer reads naturally from the screen's edge (`ws-dialog--drawer`) rather than floating in the centre.
 
 ## Not for
 
-- A thing opened from the chat that the person still needs the page beside (a lead, a draft, a chart): use `Panel`.
+- A thing opened from the chat that the person still needs the page beside (a lead, a draft, a check): use `Panel`.
 - A menu of short actions near a button: use `Menu`.
-- A brief, dismissible confirmation of something that already happened: use a toast (the kit's `Toaster`).
-- A name shown on hover: use `Tooltip` (`Tip`).
+- A short note or a one-field form beside its control: use `Popover`.
+- A receipt for something that already happened: use `Toast`.
 
 ## Anatomy
 
-- The dialog itself: the native `<dialog>` element, the card's cream (`--color-bg-page`) at `--ws-radius-card` (8 px, drawn here larger for a dialog or drawer at `--ws-radius-panel`, 16 px where the dialog is the whole floating thing), `--ws-shadow-lift` as the one lift a dialog keeps, since the product is otherwise flat.
-- `DialogHead`: a 20 px padded header, a 22 px navy title (`ws-title`) and one 14 px sentence under it, an optional aside (usually the close button) top right.
-- Content: the dialog's own body, padded 20 px at the sides.
-- `DialogFoot`: the footer band (`ws-band`), 28 px at the sides, an optional note on the left, its buttons on the right with the one primary last, each a large (36 px) button.
-- Behind it: a navy scrim at 35% (`--ws-scrim`), drawn on the native dialog's `::backdrop`.
+- The pane: the native `<dialog>`, `--ws-raised` ground inside a 1 px `--ws-tray` rim (`--ws-rim`), 12 px corners
+  (`--ws-radius-drawer`, 11 inside), and one lift, `--ws-shadow-float`, because it sits over a scrim. Up to 42rem wide,
+  `calc(100% - 32px)` on a narrow screen, never taller than the window less 32.
+- One inset: the head, the content and the foot all sit 28 in from the sides (`--ws-band-inset`), so the title, a field
+  and the foot's note share one edge.
+- Head (`.ws-head`): 20 above, 16 below (20 when the foot follows it, as in a confirm). The 22 / 28 title (`ws-title`), at most one 14 / 20 line under it, 4 apart.
+  The close is Seth's 32 px square on the tray (`ws-dialog__close`, 6 px corners, navy 16 px x), centred on the title's
+  first line, 12 from the title block (40 px on touch, centred the same way). The head never wraps: a long title
+  wraps beside the close, which stays top right at any width.
+- Content (`ws-dialog__content`): its parts 16 apart, 4 on top (room for a first field's focus ring), 20 at the foot.
+  A plate or a well in it sits half a step above the pane (`--ws-surface-sunk` is set from raised to press here), so it
+  still shows in dark.
+  It scrolls on its own when the dialog meets the window's height; focused as a keyboard scroller, its ring is drawn
+  inside it.
+- Foot (`.ws-band`): the darker cream band, 16 / 28 inside, at least 80 tall, its bottom corners rounded to the rim.
+  An optional note on the left (`ws-band__words`), the acts in one group on the right (`ws-dialog__acts`, 8 apart),
+  the one primary last.
+- Behind it: a navy scrim at 35% (`--ws-scrim`) on the dialog's `::backdrop`.
 
 ## Variants and sizes
 
-| `from` | Behaviour |
+| Class | Behaviour |
 | --- | --- |
-| `center` (default) | A dialog: rises 6 px and grows from 98% as it opens |
-| `right` | A drawer sliding in from the right edge |
-| `left` | A drawer sliding in from the left edge |
+| `ws-dialog` | In the centre: rises 14 px out of .98 as the scrim fades in |
+| `ws-dialog--drawer` | 440 wide (`--ws-thing-width`), floating 12 in from the window's top, right and bottom edges with 12 px corners; slides in from the right |
+| `ws-dialog--drawer ws-dialog--drawer-start` | The same from the left edge |
 
 ## States
 
-- **Closed**: not rendered to the eye; the dialog element is not open.
-- **Opening**: the scrim fades in; a centre dialog rises and grows, a drawer slides from its edge.
-- **Open**: focus is trapped inside it; Escape and a click on the scrim both close it.
-- **Closing**: it keeps showing what it last showed (frozen, not re-rendered with the closed state) for `--ws-duration-gentle` (200 ms) while it leaves, faster than it arrived.
-- **Error** (inside its content): a field shows its own error state (`aria-invalid`, `ws-field-msg--error`); the dialog itself has no error state of its own.
-- **Narrow**: on a small screen the dialog's width is `calc(100% - var(--space-xl))`, so it never touches the screen's edges; a drawer always takes the full height of the screen.
+- **Closed**: not shown; the dialog element is not open.
+- **Opening** (North's window, js@540954): the scrim fades in over `--ws-duration-hover` (.2 s); a centre dialog grows
+  14 px up out of .98 (`--ws-open-scale-pane`) on the settle spring (`--ws-spring-settle`, .32 / .1); a drawer slides
+  in from its edge over `--ws-duration-grow` (.55 s) on `--ws-ease-grow` (North's "Card grows open"). Then its details
+  settle in after it, as an opened tile's do: the head, the content and the foot each rise 6 px out of a 3 px blur
+  (`ws-settle`) over `--ws-duration-settle` on `--ws-ease-soft`, .08 s after the pane (`--ws-dialog-after`) and 22 ms
+  apart (`--ws-stagger-detail`, where the browser counts siblings; together elsewhere).
+- **Open**: focus is trapped inside; Escape and a click on the scrim both close it (`closedby="any"`).
+- **Closing**: it fades and drops 8 px to .98 over `--ws-duration-exit` (120 ms); a drawer slides back over
+  `--ws-duration-shrink` (.4 s) on `--ws-ease-grow` (North's "Card closes back into place"). Both leave faster than
+  they came.
+- **Tall content**: the head and the foot stay; the content scrolls between them (K4).
+- **Short window or phone** (under 40rem tall or wide): the whole pane scrolls as one and only the head stays, so the
+  content gets the screen and the close stays in reach (K6); the foot comes at the end of the content. A drawer's foot
+  still sits at its bottom when the content is short.
+- **Error**: a field shows its own error (`aria-invalid`, `ws-field-msg--error`); the dialog has no error state of its own.
+- **Phone** (under 40rem wide): a centre dialog keeps 16 from each edge and its acts fill the width in equal halves;
+  where a half would be under 160 or a label would break, they stack full width, the primary at the bottom (Seth's
+  pane foot, as `ws-btn-split`). A drawer is the whole screen, no rim, no corners (K5).
 
 ## Behaviour
 
-- Keyboard: the native `<dialog>` traps focus and closes on Escape by itself; focus returns to what opened it when it closes.
-- Pointer: a click on the scrim (outside the dialog's own content) closes it, the same as Escape.
-- Touch: the same close behaviours apply; buttons in the foot are 36 px (`large`), above the touch floor.
-- Motion: a centre dialog rises 6 px and grows from 98%; a drawer slides from its edge; the scrim fades in, all on `--ws-ease-soft`. Leaving is faster (`--ws-duration-instant`, 120 ms) than arriving.
-- Reduced motion: opening and closing cross-fade instead of moving.
+- Keyboard: `showModal()` traps focus and closes on Escape by itself; focus goes back to what opened it.
+- Pointer: a click on the scrim (outside the pane) closes it, the same as Escape. That is `closedby="any"` on the
+  `<dialog>`; a browser that does not know it needs the app to close the dialog on a click whose target is the dialog
+  element itself (the scrim).
+- Touch: the close and the acts are 40 tall.
+- Motion: the browser's own `[open]` change with `@starting-style`, `overlay` and `display` kept for the exit, so no
+  script is needed. North's numbers: rise 14, exit 8, scale .98.
+- Reduced motion: it appears and goes at once; so does a browser without `@starting-style`.
+- The preview's last stack is live: open the dialog and the drawer.
+- Menus inside it open in the top layer (see `Menu`), so the pane never cuts them.
 
 ## Content
 
-- The title says what the dialog is for in a few words, sentence case, no em dash.
-- One sentence under the title says what it means or what will happen.
-- The footer's note (if any) says something the person should know before acting, not a repeat of the title.
-- The one primary button is last and is the only solid navy button in the dialog; every other button is secondary (cream, fine edge) or a text action.
+- The title says what the dialog is for in a few words, sentence case.
+- One line under the title, at most: what it means or what will happen.
+- The head holds the title, that line, the close and at most two icon acts. Facts, chips and buttons go in the content.
+- The foot holds one row: a note, then at most two acts, the one primary last.
 
 ## Props
 
+The reference implementation's React pieces (the kit ships the CSS; these names are how the product wraps it).
+
 **`Dialog`**
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `open` | boolean | Drives whether it is open. |
-| `onClose` | `() => void` | Hears every way it closes: Escape, the scrim, a choice made inside. |
-| `label` | string | Its accessible name. |
-| `from` | `"center"` \| `"right"` \| `"left"` | Where it comes from. Default `center`. |
+| `open` | boolean | Drives whether it is open (`showModal()` and `close()`). |
+| `onClose` | `() => void` | Hears every way it closes: Escape, the scrim, the close, a choice made inside. |
+| `label` | string | Its accessible name, when no title is wired with `aria-labelledby`. |
+| `from` | `"center"` \| `"right"` \| `"left"` | Where it comes from: `ws-dialog`, `--drawer`, `--drawer --drawer-start`. Default `center`. |
 | `className` | string | Extra layout classes. |
 | `children` | `ReactNode` | Its content. |
 
@@ -72,25 +105,60 @@ A modal, built on the browser's own `<dialog>`: a small question in the centre o
 | --- | --- | --- |
 | `title` | `ReactNode` | The 22 px title. |
 | `line` | `ReactNode` | The one sentence under it. |
-| `aside` | `ReactNode` | Sits top right, usually the close button. |
+| `aside` | `ReactNode` | Top right: the close, and at most two icon acts. |
 | `titleId` | string | For `aria-labelledby`. |
 
 **`DialogFoot`**
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `note` | `ReactNode` | A line on the left, before the buttons. |
-| `children` | `ReactNode` | The buttons, the one primary last. |
+| `note` | `ReactNode` | A line on the left, before the acts. |
+| `children` | `ReactNode` | The acts, inside `ws-dialog__acts`, the one primary last. |
 
 ## Rules
 
-- Never `outline-none` without the focus ring: a dialog's edge or ring carries the focus state, never hidden outright.
-- One navy primary button per dialog, last in the footer; every other act is secondary or a text action (the system's rule).
-- A dialog's head and foot follow the chart cards' language exactly: `DialogHead` mirrors a card's head (`.ws-head`, see `Card`), `DialogFoot` mirrors its band (`.ws-band`) (14 Oct 2026, the chart cards' own design board).
-- No side popups: the system's dialogs open in place, never stacked over one another.
+- One navy primary act per dialog, last in the foot; every other act is secondary or a text act.
+- The close is the 32 px tray square with an x (Seth, 301:2021), centred on the title's first line.
+- Never `overflow: hidden` on the pane: the foot rounds its own corners, and a menu inside must not be cut.
+- No dialog over a dialog.
 
 ## Source
 
-**Derived from**: the native `<dialog>` element, the card's cream surface and radius tokens, and the chart card's
-own header and footer-band language (`DialogHead` mirrors a card's head, `DialogFoot` its band; see `Card`).
-**Precedent**: the first product built on the system.
+**Derived from**: Seth's check drawer (Figma 301:2011: the tray rim, 12 / 11 corners, 28 px sides, the square close),
+North's window motion (js@540954), Revenue OS K4, K5 and K6, and the geometry check (the close dropping under a short
+title at 320, the foot's labels breaking in halves on a phone). **Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<dialog class="ws-dialog" aria-labelledby="assign-title" closedby="any">
+  <header class="ws-head">
+    <div>
+      <h2 id="assign-title" class="ws-title">Assign this call</h2>
+      <p class="ws-body">Choose who calls them next.</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>
+  <div class="ws-dialog__content">
+    <label class="ws-field">
+      <span class="ws-label">Team member</span>
+      <input class="ws-input" value="Priya Nair">
+    </label>
+  </div>
+  <footer class="ws-band">
+    <div class="ws-band__words"><p class="ws-band__how">Dana sees this in her chat.</p></div>
+    <div class="ws-dialog__acts">
+      <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Cancel</button>
+      <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Assign</button>
+    </div>
+  </footer>
+</dialog>
+<!-- open it: document.querySelector('.ws-dialog').showModal(); a drawer adds ws-dialog--drawer -->
+```
+
+## Styles
+
+`Dialog/style.css`, built into `bundle.css` and `fello.css`. Tokens only, so it turns dark with the page. The head and
+the foot are the house `.ws-head` and `.ws-band`; this file sets their inset inside a dialog.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Overlays" height=452 -->
+<!-- @dsCard group="Overlays" height=960 -->
 <!doctype html>
 <html>
 <head>
@@ -10,16 +10,16 @@
 <body>
 <div class="ws-stage">
 
-  <div class="ws-stack">
-    <span class="ws-muted">Dialog: rises from the centre over a 35% navy scrim, 16 px corners</span>
-    <div style="display: grid; place-items: center; width: 640px; max-width: 100%; height: 380px; 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: 392px; max-width: 100%; justify-items: center;"><div class="ws-dialog" role="dialog" aria-modal="true" aria-labelledby="dlg-title">
+  <div class="ws-stack" style="width: 560px;">
+    <span class="ws-muted">Dialog: a title line, one field, a note and two acts in the foot</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="dialog" aria-modal="true" aria-labelledby="dlg-title" style="max-width: 420px;">
         <header class="ws-head">
           <div>
             <h2 id="dlg-title" class="ws-title">Assign this call</h2>
-            <p class="ws-body" style="margin-top: var(--space-xxs);">Choose who calls them next.</p>
+            <p class="ws-body">Choose who calls them next.</p>
           </div>
-          <button type="button" class="ws-icon-btn" aria-label="Close">
+          <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>
@@ -30,38 +30,161 @@
           </label>
         </div>
         <footer class="ws-band">
-          <p class="ws-meta" style="margin-right: auto;">Dana sees this in her chat.</p>
-          <button type="button" class="ws-btn ws-btn--secondary">Cancel</button>
-          <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Assign</button>
+          <div class="ws-band__words"><p class="ws-band__how">Dana sees this in her chat.</p></div>
+          <div class="ws-dialog__acts">
+            <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Cancel</button>
+            <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Assign</button>
+          </div>
         </footer>
-      </div></div>
+      </div>
     </div>
   </div>
 
-  <div class="ws-stack">
-    <span class="ws-muted">Drawer: slides in from the right, 440 px wide, full height</span>
-    <div style="display: flex; width: 480px; max-width: 100%; height: 380px; overflow: hidden; border-radius: var(--ws-radius-panel); background: linear-gradient(var(--ws-scrim), var(--ws-scrim)), var(--ws-page);">
+  <div class="ws-stack" style="width: 560px;">
+    <span class="ws-muted">A long title wraps; a field that was refused shows its own error</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="dialog" aria-modal="true" aria-labelledby="dlg-long" style="max-width: 420px;">
+        <header class="ws-head">
+          <div>
+            <h2 id="dlg-long" class="ws-title">Move every open lead from Dana's list to the new team</h2>
+          </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>
+        <div class="ws-dialog__content">
+          <label class="ws-field">
+            <span class="ws-label">New team</span>
+            <input class="ws-input" value="North side" aria-invalid="true" aria-describedby="dlg-err" readonly>
+            <span id="dlg-err" class="ws-field-msg ws-field-msg--error">
+              <svg viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="currentColor"/><path d="M6 3.5v3M6 8.5v.01" stroke="currentColor" stroke-linecap="round"/></svg>
+              That team is full. Pick another, or add a seat first.
+            </span>
+          </label>
+        </div>
+        <footer class="ws-band">
+          <div class="ws-dialog__acts">
+            <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Cancel</button>
+            <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Move 14 leads</button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 560px;">
+    <span class="ws-muted">Tall content scrolls between the head and the foot (drawn here as if the window were short); on a phone the whole pane scrolls under its head</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="dialog" aria-modal="true" aria-labelledby="dlg-tall" style="max-width: 420px; max-height: 320px;">
+        <header class="ws-head">
+          <div>
+            <h2 id="dlg-tall" class="ws-title">What changes on Monday</h2>
+          </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>
+        <div class="ws-dialog__content" tabindex="0" aria-label="What changes">
+          <p class="ws-body">Calls are shared out by who answered fastest last month, not by who is free first.</p>
+          <p class="ws-body">Leads with no reply in nine days move to the team list, so someone new can try them.</p>
+          <p class="ws-body">Scores reset on the first of each month. The old month stays in your history.</p>
+          <p class="ws-body">Your chat sends one summary each evening instead of a message per call.</p>
+        </div>
+        <footer class="ws-band">
+          <div class="ws-dialog__acts">
+            <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Got it</button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 560px;">
+    <span class="ws-muted">Drawer: 440 wide, 12 in from the window's edges; the whole screen on a phone</span>
+    <div style="display: flex; height: 520px; border-radius: var(--ws-radius-panel); background: linear-gradient(var(--ws-scrim), var(--ws-scrim)), var(--ws-page);">
       <div class="ws-dialog ws-dialog--drawer" role="dialog" aria-modal="true" aria-labelledby="drw-title">
         <header class="ws-head">
           <div>
             <h2 id="drw-title" class="ws-title">Priya Nair</h2>
-            <p class="ws-body" style="margin-top: var(--space-xxs);">A complicated sale, cold call.</p>
+            <p class="ws-body">A complicated sale, cold call.</p>
           </div>
-          <button type="button" class="ws-icon-btn" aria-label="Close">
+          <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>
         <div class="ws-dialog__content">
           <p class="ws-body">Twelve years in the neighbourhood, referred by two agents on the team.</p>
+          <div class="ws-plate">
+            <p class="ws-meta">Stage</p>
+            <p class="ws-row-name">Qualified</p>
+          </div>
         </div>
         <footer class="ws-band">
-          <button type="button" class="ws-btn ws-btn--secondary">Not now</button>
-          <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Start</button>
+          <div class="ws-dialog__acts">
+            <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg">Not now</button>
+            <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Start the call</button>
+          </div>
         </footer>
       </div>
     </div>
   </div>
 
+  <div class="ws-stack" style="width: 560px;" data-live>
+    <span class="ws-muted">Live: open either. The dialog grows 14 px up out of .98 on the settle spring as the scrim fades in, then its head, content and foot settle in after it; the drawer slides in over .55 s on the grow curve and back over .4 s. Each leaves faster than it came</span>
+    <div class="ws-cluster">
+      <button type="button" class="ws-btn ws-btn--secondary" onclick="document.getElementById('dlg-live').showModal()">Open the dialog</button>
+      <button type="button" class="ws-btn ws-btn--secondary" onclick="document.getElementById('drw-live').showModal()">Open the drawer</button>
+    </div>
+    <dialog id="dlg-live" class="ws-dialog" aria-labelledby="dlg-live-title" closedby="any" style="max-width: 420px;">
+      <header class="ws-head">
+        <div>
+          <h2 id="dlg-live-title" class="ws-title">Assign this call</h2>
+          <p class="ws-body">Choose who calls them next.</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>
+      <div class="ws-dialog__content">
+        <label class="ws-field">
+          <span class="ws-label">Team member</span>
+          <input class="ws-input" value="Priya Nair" readonly>
+        </label>
+      </div>
+      <footer class="ws-band">
+        <div class="ws-band__words"><p class="ws-band__how">Dana sees this in her chat.</p></div>
+        <div class="ws-dialog__acts">
+          <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg" onclick="this.closest('dialog').close()">Cancel</button>
+          <button type="button" class="ws-btn ws-btn--primary ws-btn--lg" onclick="this.closest('dialog').close()">Assign</button>
+        </div>
+      </footer>
+    </dialog>
+    <dialog id="drw-live" class="ws-dialog ws-dialog--drawer" aria-labelledby="drw-live-title" closedby="any">
+      <header class="ws-head">
+        <div>
+          <h2 id="drw-live-title" class="ws-title">Priya Nair</h2>
+          <p class="ws-body">A complicated sale, cold call.</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>
+      <div class="ws-dialog__content">
+        <p class="ws-body">Twelve years in the neighbourhood, referred by two agents on the team.</p>
+        <div class="ws-plate">
+          <p class="ws-meta">Stage</p>
+          <p class="ws-row-name">Qualified</p>
+        </div>
+      </div>
+      <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()">Not now</button>
+          <button type="button" class="ws-btn ws-btn--primary ws-btn--lg" onclick="this.closest('dialog').close()">Start the call</button>
+        </div>
+      </footer>
+    </dialog>
+  </div>
+
 </div>
 </body>
 </html>