@felloinnovations/brand-kit 0.5.1 → 0.5.3

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

@@ -185,6 +185,86 @@
     </dialog>
   </div>
 
+  <div class="ws-stack" style="width: 560px;" data-live>
+    <span class="ws-muted">Live, mounted by the app (ws-dialog--mounted, as a Radix Dialog renders it): the scrim and the pane are added on open and play the same moves; on close they take data-leaving (Radix: data-state="closed") and go once their animations end</span>
+    <div class="ws-cluster">
+      <button type="button" class="ws-btn ws-btn--secondary" data-mount="mnt-dialog">Mount the dialog</button>
+      <button type="button" class="ws-btn ws-btn--secondary" data-mount="mnt-drawer">Mount the drawer</button>
+    </div>
+    <template id="mnt-dialog">
+      <div class="ws-dialog__scrim" data-unmount></div>
+      <div class="ws-dialog ws-dialog--mounted" role="dialog" aria-modal="true" aria-labelledby="mnt-dialog-title" tabindex="-1" style="max-width: 420px;">
+        <header class="ws-head">
+          <div>
+            <h2 id="mnt-dialog-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" data-unmount>
+            <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-dialog__acts">
+            <button type="button" class="ws-btn ws-btn--secondary ws-btn--lg" data-unmount>Cancel</button>
+            <button type="button" class="ws-btn ws-btn--primary ws-btn--lg" data-unmount>Assign</button>
+          </div>
+        </footer>
+      </div>
+    </template>
+    <template id="mnt-drawer">
+      <div class="ws-dialog__scrim" data-unmount></div>
+      <div class="ws-dialog ws-dialog--drawer ws-dialog--mounted" role="dialog" aria-modal="true" aria-labelledby="mnt-drawer-title" tabindex="-1">
+        <header class="ws-head">
+          <div>
+            <h2 id="mnt-drawer-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" data-unmount>
+            <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>
+        <footer class="ws-band">
+          <div class="ws-dialog__acts">
+            <button type="button" class="ws-btn ws-btn--primary ws-btn--lg" data-unmount>Start the call</button>
+          </div>
+        </footer>
+      </div>
+    </template>
+  </div>
+  <script>
+    (() => {
+      // The app's part: mount both, then on close mark them leaving and remove them once their own animations end
+      // (none under reduced motion, so they go at once). A library such as Radix does this with data-state="closed".
+      let opener = null;
+      const close = (pane) => {
+        const parts = [pane.previousElementSibling, pane];
+        for (const el of parts) el.setAttribute('data-leaving', '');
+        Promise.allSettled(parts.flatMap((el) => el.getAnimations().map((a) => a.finished))).then(() => {
+          for (const el of parts) el.remove();
+          opener?.focus();
+        });
+      };
+      for (const btn of document.querySelectorAll('[data-mount]')) btn.addEventListener('click', () => {
+        opener = btn;
+        const frag = document.getElementById(btn.dataset.mount).content.cloneNode(true);
+        const pane = frag.querySelector('.ws-dialog');
+        frag.querySelectorAll('[data-unmount]').forEach((el) => el.addEventListener('click', () => close(pane)));
+        pane.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(pane); });
+        document.body.append(frag);
+        pane.focus();
+      });
+    })();
+  </script>
+
 </div>
 </body>
 </html>

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

@@ -8,6 +8,12 @@
 .ws-dialog { --ws-dialog-inset: var(--ws-band-inset); display: flex; flex-direction: column; width: calc(100% - var(--space-xl)); max-width: 42rem; /* raw: Ignite's Dialog cap (max-w-2xl); no width token */ max-height: calc(100dvh - var(--space-xl)); padding: 0; overflow: visible; border: var(--ws-rim) solid var(--ws-tray); border-radius: var(--ws-radius-drawer); background: var(--ws-raised); color: var(--color-text-body); box-shadow: var(--ws-shadow-float); }
 dialog.ws-dialog:not([open]) { display: none; }
 .ws-dialog::backdrop { background: var(--ws-scrim); }
+/* Mounted by the app (--mounted: a library such as Radix renders the pane as a div in a portal, for its focus trap or a
+   test runner with no showModal()). The scrim is its own element before the pane (__scrim, Radix's Overlay), the pane
+   fixed over the window and centred by its auto margins (a drawer keeps its own), both on z-modal. No translate of the
+   app's own: the motion moves the pane. Before the drawer's rules, so its height and margins win. */
+.ws-dialog__scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--ws-scrim); }
+.ws-dialog--mounted { position: fixed; inset: 0; z-index: var(--z-modal); height: fit-content; margin: auto; }
 /* The compact head (K6): one title, at most one line under it, the close and at most two icon acts. Facts, chips and
    buttons go in the content. It never wraps (a card's head drops its aside under a short title; here the close stays
    top right and the title wraps beside it). The close is Seth's 32 px tray square, centred on the title's first line
@@ -51,9 +57,20 @@ dialog.ws-dialog:not([open]) { display: none; }
    content and the foot rise 6 px out of a 3 px blur over .32 s soft, .08 s after it and 22 ms apart, as North's opened
    tile's details). It leaves faster and shorter: 8 px down to .98 over .12 s. A drawer slides in from its edge on the
    grow curve over .55 s ("Card grows open") and goes back over .4 s ("Card closes back into place"). Native <dialog>
-   only: @starting-style for the entrance, display and overlay allow-discrete so the exit plays. With reduced motion it
-   simply appears and goes. */
-dialog.ws-dialog { --ws-dialog-after: 80ms; /* raw: North's details wait .08 s (open.content delay) */ }
+   only: @starting-style for the entrance, display and overlay allow-discrete so the exit plays. A mounted pane
+   (--mounted) plays the same as keyframes, below. With reduced motion it simply appears and goes. */
+dialog.ws-dialog, .ws-dialog--mounted { --ws-dialog-after: 80ms; /* raw: North's details wait .08 s (open.content delay) */ }
+/* A mounted pane has no [open] to transition: it plays the same moves as keyframes on mount, and on its way out once the
+   app marks it leaving (Radix sets data-state="closed" on the pane and the scrim and waits for their animations to end
+   before it unmounts them; anything else sets data-leaving and removes them when theirs end, as Menu and Toast do). */
+.ws-dialog--mounted.ws-dialog--drawer { --ws-dialog-edge: calc(100% + var(--ws-stage-inset)); }
+.ws-dialog--mounted.ws-dialog--drawer-start { --ws-dialog-edge: calc(-100% - var(--ws-stage-inset)); }
+@keyframes ws-dialog-in { from { opacity: 0; transform: translateY(var(--space-sm-plus)) scale(var(--ws-open-scale-pane)); } }
+@keyframes ws-dialog-out { to { opacity: 0; transform: translateY(var(--space-xs)) scale(var(--ws-open-scale-pane)); } }
+@keyframes ws-dialog-edge-in { from { transform: translateX(var(--ws-dialog-edge)); } }
+@keyframes ws-dialog-edge-out { to { transform: translateX(var(--ws-dialog-edge)); } }
+@keyframes ws-dialog-fade-in { from { opacity: 0; } }
+@keyframes ws-dialog-fade-out { to { opacity: 0; } }
 @media (prefers-reduced-motion: no-preference) {
   dialog.ws-dialog, dialog.ws-dialog::backdrop { transition: opacity var(--ws-duration-exit) var(--ws-ease-exit), transform var(--ws-duration-exit) var(--ws-ease-exit), overlay var(--ws-duration-exit) var(--ws-ease-exit) allow-discrete, display var(--ws-duration-exit) var(--ws-ease-exit) allow-discrete; }
   dialog.ws-dialog:not([open]) { opacity: 0; transform: translateY(var(--space-xs)) scale(var(--ws-open-scale-pane)); }
@@ -63,6 +80,14 @@ dialog.ws-dialog { --ws-dialog-after: 80ms; /* raw: North's details wait .08 s (
   dialog.ws-dialog--drawer[open] { transition: opacity var(--ws-duration-grow) var(--ws-ease-grow), transform var(--ws-duration-grow) var(--ws-ease-grow), overlay 0s allow-discrete, display 0s allow-discrete; }
   dialog.ws-dialog--drawer:not([open]) { transform: translateX(calc(100% + var(--ws-stage-inset))); transition-duration: var(--ws-duration-shrink); transition-timing-function: var(--ws-ease-grow); }
   dialog.ws-dialog--drawer-start:not([open]) { transform: translateX(calc(-100% - var(--ws-stage-inset))); }
+  .ws-dialog--mounted { animation: ws-dialog-in var(--ws-spring-settle-duration) var(--ws-spring-settle) backwards; }
+  .ws-dialog--mounted.ws-dialog--drawer { animation: ws-dialog-edge-in var(--ws-duration-grow) var(--ws-ease-grow) backwards; }
+  .ws-dialog--mounted:is([data-leaving], [data-state="closed"]) { animation: ws-dialog-out var(--ws-duration-exit) var(--ws-ease-exit) forwards; pointer-events: none; }
+  .ws-dialog--mounted.ws-dialog--drawer:is([data-leaving], [data-state="closed"]) { animation: ws-dialog-edge-out var(--ws-duration-shrink) var(--ws-ease-grow) forwards; }
+  .ws-dialog__scrim { animation: ws-dialog-fade-in var(--ws-duration-hover) var(--ws-ease-soft) backwards; }
+  .ws-dialog__scrim:is([data-leaving], [data-state="closed"]) { animation: ws-dialog-fade-out var(--ws-duration-exit) var(--ws-ease-exit) forwards; }
+  .ws-dialog--mounted:not([data-leaving], [data-state="closed"]) > * { animation: ws-settle var(--ws-duration-settle) var(--ws-ease-soft) var(--ws-dialog-after) backwards; }
+  @supports (animation-delay: calc(sibling-index() * 1ms)) { .ws-dialog--mounted:not([data-leaving], [data-state="closed"]) > * { animation-delay: calc(var(--ws-dialog-after) + (sibling-index() - 1) * var(--ws-stagger-detail)); } }
   dialog.ws-dialog[open] > * { animation: ws-settle var(--ws-duration-settle) var(--ws-ease-soft) var(--ws-dialog-after) backwards; }
   @supports (animation-delay: calc(sibling-index() * 1ms)) { dialog.ws-dialog[open] > * { animation-delay: calc(var(--ws-dialog-after) + (sibling-index() - 1) * var(--ws-stagger-detail)); } }
   @starting-style {

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

@@ -9,7 +9,7 @@ Nothing here yet: the same plain cream card the place would show, with its mark
 ## Not for
 
 - A card whose data genuinely does not exist and never will for this account: leave the card out of the page entirely, do not draw an empty shell for it (the system's rule, "a card whose data does not exist is left out, never faked").
-- A page still loading its data: use `CanvasLoading` or a `Skeleton`, not an empty state (an empty state means "there is an answer, and it is nothing", not "the answer has not arrived yet").
+- A page still loading its data: use `Skeleton` (a whole page: its page ghost), not an empty state (an empty state means "there is an answer, and it is nothing", not "the answer has not arrived yet").
 - An error the person must act on: that is a field or page error, not an empty state.
 
 ## Anatomy

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

@@ -31,6 +31,20 @@ The one disclosure: something folded away until wanted, in three looks, built on
   and line) taking the room and the chevron at the end. The body sits under the words' column, 0 / 16 / 16 / 20, and
   may hold a cream panel (`ws-fold__panel`: 6 px corners, 24 px inside).
 
+- **More in a card fold's head** (card look only):
+  - **Acts** (`ws-fold` on the card, `ws-fold__act` after the `<details>`): one or two buttons beside the summary
+    ("Publish", "Add") that never toggle it. A button may not sit inside a `<summary>` (a control inside a control), so
+    the card is a grid and the details a subgrid of it: the summary takes the first column, the acts the second on the
+    summary's row, centred on its first 44 (the title's band), and the body runs under both. A long title wraps beside
+    the acts, never under them. They show open or folded. At most one primary act on the page; here usually a secondary
+    or a text button.
+  - **An end status**: the summary's note after the title (`ws-muted`, "Autosaved", "3 open"), or a `Badge` for a count.
+    It sits at the far end, before the acts, and drops under a long title when there is no room.
+  - **Folded words** (`ws-fold__peek`, the summary's last part): a line under the title, past the chevron, that shows
+    only while the fold is shut (a strip of variant chips). It is inside the summary, so words and marks only, never an act.
+  - **Tone** (`ws-fold--needs`, `--positive`, `--working` on the card): Banner's three tints for a fold that is a notice
+    ("3 checks failed"). The ground takes the tint, the title and the chevron the tone's words, a hover the navy wash.
+
 ## Variants and sizes
 
 | Look | Chevron | Ground | Use |
@@ -38,6 +52,8 @@ The one disclosure: something folded away until wanted, in three looks, built on
 | `card` (default) | Before the title, right, turns down | A full `Card` | A self-contained block of extra detail |
 | `quiet` | After the words, right, turns down | None | A short reasoning trail beside other content |
 | `row` | At the end, down, turns up | A row of a rim list; open, the sunk cream | A chapter or step inside a list |
+| `card` + `ws-fold` + `ws-fold__act` | As `card` | A full `Card` | A block whose head carries an act that must not toggle it |
+| `card` + `ws-fold--needs` / `--positive` / `--working` | As `card`, in the tone's words | The tone's tint | A fold that is a notice |
 
 ## States
 
@@ -51,6 +67,8 @@ The one disclosure: something folded away until wanted, in three looks, built on
 - **Focus**: the 2 px navy outline; on the card and row summaries it is drawn inside, so the rim and the dividers stay
   clear. Native `<details>` keyboard behaviour is kept.
 - **Controlled**: the page may set `open` itself (a link that opens one chapter).
+- **With acts**: the acts' room tints with the summary under the pointer and ends at the card's corners; pressing an act
+  never opens or closes the fold. A peek hides as the fold opens and comes back as it shuts.
 - **Long label**: the title wraps beside its chevron; a note drops to the far end and under the title when there is no
   room. Nothing is cut off.
 - **Touch**: card and row summaries are at least 40 px (44 and 48), the quiet look 24.
@@ -85,6 +103,9 @@ The one disclosure: something folded away until wanted, in three looks, built on
 | `open` | boolean | How it starts. |
 | `onOpenChange` | `(open: boolean) => void` | The page keeps the open state and hears every change. |
 | `look` | `"card"` \| `"quiet"` \| `"row"` | Which of the three looks to draw. Default `card`. |
+| `acts` | `ReactNode` | Buttons beside the summary that never toggle it (`card` look; `ws-fold__act`). |
+| `peek` | `ReactNode` | Words or marks shown under the title only while folded (`ws-fold__peek`). |
+| `tone` | `"needs"` \| `"positive"` \| `"working"` | A fold that is a notice: the tone's tint and words (`card` look). |
 | `label` | string | The summary's accessible name when its words are a shorthand ("3 steps, 4 s"). |
 | `className` | string | Layout only. |
 | `children` | `ReactNode` | The folded body. |

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Cards" height=340 -->
+<!-- @dsCard group="Cards" height=520 -->
 <!doctype html>
 <html>
 <head>
@@ -49,6 +49,49 @@
     </div>
   </div>
 
+  <div class="ws-stack ws-stack--loose" style="width: 400px;">
+    <div class="ws-stack">
+      <span class="ws-muted">Card look with an act beside the summary (it never toggles the fold), a status at the end, and the variants peeking while it is folded</span>
+      <div class="ws-card ws-fold">
+        <details>
+          <summary class="ws-fold__summary ws-fold__summary--card">
+            <svg class="ws-fold__chevron ws-fold__chevron--right" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            <span class="ws-fold__title">Ad copy for the open house weekend</span>
+            <span class="ws-muted">Autosaved</span>
+            <span class="ws-fold__peek">
+              <span class="ws-chip">Version 1</span>
+              <span class="ws-chip">Version 2</span>
+              <span class="ws-chip">Version 3</span>
+            </span>
+          </summary>
+          <div class="ws-fold__body--card">
+            <p class="ws-body">Three versions, each under 125 characters, the second leading with the price.</p>
+          </div>
+        </details>
+        <div class="ws-fold__act">
+          <button type="button" class="ws-btn ws-btn--secondary ws-btn--sm">Publish</button>
+        </div>
+      </div>
+    </div>
+    <div class="ws-stack">
+      <span class="ws-muted">A fold that is a notice: the needs tone on the whole card, its title and chevron in the tone's words</span>
+      <div class="ws-card ws-fold ws-fold--needs">
+        <details>
+          <summary class="ws-fold__summary ws-fold__summary--card">
+            <svg class="ws-fold__chevron ws-fold__chevron--right" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            <span class="ws-fold__title">3 checks failed</span>
+          </summary>
+          <div class="ws-fold__body--card">
+            <p class="ws-body">The headline runs past 40 characters, the price is missing and the image is under 1080 wide.</p>
+          </div>
+        </details>
+        <div class="ws-fold__act">
+          <button type="button" class="ws-btn ws-btn--text ws-btn--sm">Fix them</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="ws-stack" style="width: 556px;">
     <span class="ws-muted">Row look, in a rim list: the open row and its body sunk, a cream panel inside</span>
     <ul class="ws-fold__list">

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

@@ -4,6 +4,8 @@
 /* Card look: the summary is 44 tall, 4 / 16 (16 all round made it 48 and more); the body 4 / 16 / 16 under it. */
 .ws-fold__summary--card { min-height: calc(var(--space-2xl) + var(--space-xxs)); flex-wrap: wrap; gap: var(--space-xs); border-radius: var(--ws-radius-card-inner); padding: var(--space-xxs) var(--ws-card-padding-lg); }
 .ws-fold__summary--card > .ws-fold__title { flex: 1 1 0; min-width: min(100%, var(--space-8xl)); }
+/* The note or end status keeps to the far end, on the title's line or, with no room, on its own line under it. */
+.ws-fold__summary--card > :not(.ws-fold__chevron, .ws-fold__title, .ws-fold__peek) { margin-left: auto; }
 details[open] > .ws-fold__summary--card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
 .ws-fold__summary--card:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
 .ws-fold__body--card { padding: var(--space-xxs) var(--ws-card-padding-lg) var(--ws-card-padding-lg); }
@@ -46,3 +48,31 @@ details[open] > summary > .ws-fold__chevron--down { transform: rotate(180deg); }
 @media (prefers-reduced-motion: no-preference) {
   .ws-fold__chevron { transition: transform var(--ws-spring-fold-duration) var(--ws-spring-fold); }
 }
+/* A card fold with more in its head (Madan, Marketing OS): acts that must not toggle it, words that show only while it
+   is folded, and a tone for the whole block.
+   Acts (ws-fold, the card around the details, and ws-fold__act after it): a button may not sit inside a summary (one
+   control inside another), so the acts sit beside it in the card's own grid. The details is a subgrid of the card's two
+   columns and rows: the summary takes the first column, the acts the second on the summary's row (filling it, so
+   its tint is whole; the acts centred on the summary's first 44, the title's band, not on a peek under it), the body
+   both columns under them. A long title wraps beside the acts instead of running under them. The acts' room tints with the summary under the pointer. */
+.ws-fold { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
+.ws-fold > details { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; grid-column: 1 / -1; grid-row: 1 / span 2; border-radius: inherit; }
+.ws-fold > details > summary { grid-column: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.ws-fold > details > :not(summary), .ws-fold > details::details-content { grid-column: 1 / -1; }
+.ws-fold__act { display: grid; grid-auto-flow: column; grid-template-rows: calc(var(--space-2xl) + var(--space-xxs)); grid-column: 2; grid-row: 1; align-content: start; align-items: center; gap: var(--space-xs); padding-right: var(--ws-card-padding-lg); border-top-right-radius: var(--ws-radius-card-inner); transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-fold:has(> details:not([open])) > .ws-fold__act { border-bottom-right-radius: var(--ws-radius-card-inner); }
+@media (hover: hover) { .ws-fold:has(> details > summary:hover) > .ws-fold__act { background-color: var(--ws-fold-hover, var(--ws-surface-sunk)); } }
+/* Folded words (ws-fold__peek, the summary's last part): a line under the title, past the chevron, that shows only while
+   the fold is shut (a strip of variant chips). It is inside the summary, so it holds words and marks, never an act. */
+.ws-fold__peek { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: var(--space-xxs); padding: 0 0 var(--space-sm) calc(var(--ws-icon) + var(--space-xs)); }
+details[open] > summary > .ws-fold__peek { display: none; }
+/* Tone (ws-fold--needs, --positive, --working on the card): Banner's three tints and words, for a fold that is a notice
+   (three checks failed, the import finished). The ground takes the tint, the title and the chevron the tone's words; a
+   hover is the navy wash over the tint, not the sunk cream. */
+.ws-fold--needs { --ws-fold-tint: var(--ws-tint-needs); --ws-fold-word: var(--ws-word-needs); }
+.ws-fold--positive { --ws-fold-tint: var(--ws-tint-live); --ws-fold-word: var(--ws-word-positive); }
+.ws-fold--working { --ws-fold-tint: var(--ws-card-tint-blue); --ws-fold-word: var(--color-text-interactive); }
+:is(.ws-fold--needs, .ws-fold--positive, .ws-fold--working) { --ws-fold-hover: var(--ws-hover); background-color: var(--ws-fold-tint); }
+:is(.ws-fold--needs, .ws-fold--positive, .ws-fold--working) .ws-fold__summary :is(.ws-fold__title, .ws-fold__chevron) { color: var(--ws-fold-word); }
+@media (hover: hover) { :is(.ws-fold--needs, .ws-fold--positive, .ws-fold--working) .ws-fold__summary--card:hover { background-color: var(--ws-hover); } }
+:is(.ws-fold--needs, .ws-fold--positive, .ws-fold--working) .ws-fold__summary--card:active { background-color: var(--ws-hover-strong); }

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

@@ -0,0 +1,116 @@
+Words that become a field in place: a value read and edited where it sits (a task's title, a brief's section, a
+milestone's name), the same box and the same type at rest and editing, so nothing jumps.
+
+## Use it when
+
+- One value is edited where it is read, and editing it is the exception, not the job of the screen: a title in a
+  drawer's head, a fact in a brief, a row's name.
+- The person changes one thing at a time and each change saves on its own (Patterns, "One small change").
+
+## Not for
+
+- A form, or several related values saved together: `Input` and `TextArea` with labels, and a Save in the band.
+- A value with a closed set of choices (a stage, an owner): a `Select` or a `Combobox`, opened from the value.
+- Words the person cannot change: plain text, never a button that does nothing.
+- A setting that applies at once: `Switch`.
+
+## Anatomy
+
+- The wrapper (`ws-inline-edit`) wears the value's own type: `ws-title`, `ws-section` or `ws-body`. Everything inside
+  inherits it, so the field is the words' size, weight and colour.
+- The value (`__value`): at rest a `<button>` holding the words; editing, an `<input>` (one line) or a `<textarea>`
+  (several) in its place. Both are the same box: 4 / 8 inside, 4 px corners (`--ws-radius-control`), pulled back 8 at
+  the sides so the words stay on the content edge of everything around them. On touch the box is 40 tall at least, at
+  rest and editing alike.
+- At rest: no ground, no edge; North's navy wash (`--ws-hover`) under the pointer, a step stronger pressed. The words
+  in a hidden prefix name the act for a screen reader (`<span class="ws-sr">Edit the title: </span>`).
+- The pencil (`__mark`, a `ws-icon` at the words' size, 16 at most, muted), 4 after the last word: it shows under the
+  pointer and on focus, and always on touch, where there is no hover. A hint only: the whole box is the target.
+- Editing: the field's white ground (`--ws-field`) and its fine edge (`--ws-shadow-hairline-in`), the focus ring drawn
+  inside the box (so it never crosses a label 4 above), the words in their own colour. A textarea grows with its words
+  (`field-sizing: content`).
+- The save's word under it: the house field message (`ws-field-msg`, `role="status"`): "Saving", then "Saved" for a
+  moment; or the error message (`ws-field-msg--error`) with the warning mark.
+
+## Variants and sizes
+
+| Wrapper | Where | Notes |
+| --- | --- | --- |
+| `ws-inline-edit ws-title` | a drawer's or a page's own title | 22 / 28 semibold navy, one line (`<input>`) |
+| `ws-inline-edit ws-section` | a card's or a task's title | 15 / 22 semibold navy |
+| `ws-inline-edit ws-body` | a fact, a section of a brief, a name in a row | 14 / 20; several lines take a `<textarea>` |
+
+## States
+
+- **Rest**: the words, no ground; the pencil hidden (shown on touch).
+- **Hover** (a pointer only): the navy wash and the pencil. Never a lift or an edge.
+- **Focus** (Tab onto it): the focus ring inside the box and the pencil.
+- **Editing**: the field, focused, its words selected on open so typing replaces them.
+- **Empty**: the placeholder's words at rest (`data-empty`: "Add an owner"), the same target.
+- **Saving**: the value shows the new words at once; "Saving" under it while the save is on its way. Typing again
+  meanwhile keeps the newer words (only the latest save's outcome shows).
+- **Saved**: "Saved" for a moment (2 s), then nothing.
+- **Not saved**: the field stays open with the person's words and the error under it ("Not saved. Try again", or what
+  is wrong: "The campaign needs a name"), `aria-invalid` and `aria-describedby` set together. Nothing typed is lost.
+- **Disabled or read-only**: plain words, no button.
+- **Touch**: the box 40 tall at least; the editing words 16 at least (a phone zooms the page into a field under 16).
+- **Dark**: the wash, the field's ground and its ink take their dark values.
+
+## Behaviour
+
+- Press (click, tap, Enter or Space on the button): the button is replaced by the field with the same words, focused,
+  the words selected.
+- **Enter saves** (in a one-line field; in a textarea Enter is a new line and Cmd or Ctrl Enter saves). **Blur saves.**
+  **Escape cancels**: the words go back to what was saved and nothing is sent.
+- Either way, the field is replaced by the button again and **focus returns to it**, so the keyboard stays where it was.
+- Saving the same words sends nothing. A required value emptied is refused in place, not sent.
+- A textarea where the browser has no `field-sizing` (Firefox, older Safari): set `rows` to the words' line count on
+  open so it does not shrink to two lines.
+- Motion: the wash and the pencil over the hover beat (`--ws-duration-hover`, `--ws-ease-soft`); the swap itself does
+  not animate. Still under reduced motion.
+
+## Content
+
+- The placeholder says what goes there in sentence case ("Add an owner"), never "Click to edit".
+- The hidden prefix names the value ("Edit the title: "), so a screen reader hears what it changes.
+- An error says what to do. No em dashes.
+
+## Rules
+
+- Same box, same type, at rest and editing: the wrapper carries the type, never the field. A field that changes size
+  or weight when it opens is the bug this exists to stop.
+- One value per inline edit, saved on its own. Several values that belong together are a form.
+- Never the only way to reach the value on touch: the pencil is always shown there.
+- Never an underline or a dotted edge at rest to say "editable": the wash and the pencil do it.
+
+## Source
+
+- **Derived from**: Patterns' "Editing a record" (one small change: inline, saves on blur or Enter, Escape reverts,
+  "Saved" for a moment), `Input`'s field ground, edge, focus ring and error, North's wash.
+- **Precedent**: Marketing OS (ContentOS), the task drawer's title and the brief document's fields, about 55 hand-styled
+  inputs (issue #25, Madan, 10 Nov 2026).
+
+## Markup
+
+```html
+<!-- At rest -->
+<div class="ws-inline-edit ws-section">
+  <button type="button" class="ws-inline-edit__value"><span class="ws-sr">Edit the title: </span>Write the spring market email<svg class="ws-icon ws-inline-edit__mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 3.5l2 2L6 12H4v-2l6.5-6.5z"/></svg></button>
+</div>
+
+<!-- Editing (the button replaced in place) -->
+<div class="ws-inline-edit ws-section">
+  <input class="ws-inline-edit__value" type="text" value="Write the spring market email" aria-label="Title">
+</div>
+
+<!-- Several lines, saving -->
+<div class="ws-inline-edit ws-body">
+  <textarea class="ws-inline-edit__value" aria-label="Goal">Book forty demos from the email and the two webinars in March.</textarea>
+  <p class="ws-field-msg" role="status">Saving</p>
+</div>
+```
+
+## Styles
+
+`design-system/components/InlineEdit/style.css`: `ws-inline-edit`, `__value` (and `[data-empty]`, `--typing`, the
+focus drawn still for a mockup), `__mark`. The message is the house's `ws-field-msg`.

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

@@ -0,0 +1,135 @@
+<!-- @dsCard group="Fields" height=640 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>InlineEdit</title>
+<link rel="stylesheet" href="../../tokens.css">
+<link rel="stylesheet" href="../bundle.css">
+</head>
+<body>
+<div class="ws-stage">
+  <div class="ws-stack" style="width: 340px;">
+    <span class="ws-muted">A task's title at rest: plain words, a wash and the pencil under the pointer</span>
+    <div class="ws-card ws-card--pad-md ws-stack">
+      <span class="ws-meta">Task</span>
+      <div class="ws-inline-edit ws-section">
+        <button type="button" class="ws-inline-edit__value"><span class="ws-sr">Edit the title: </span>Write the spring market email<svg class="ws-icon ws-inline-edit__mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 3.5l2 2L6 12H4v-2l6.5-6.5z"/></svg></button>
+      </div>
+      <p class="ws-body">Due Friday. Dana owns the draft.</p>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 340px;">
+    <span class="ws-muted">The same title being edited: the field takes its box and its type, so nothing moves</span>
+    <div class="ws-card ws-card--pad-md ws-stack">
+      <span class="ws-meta">Task</span>
+      <div class="ws-inline-edit ws-section">
+        <input class="ws-inline-edit__value ws-inline-edit__value--typing" type="text" value="Write the spring market email" aria-label="Title">
+      </div>
+      <p class="ws-body">Due Friday. Dana owns the draft.</p>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 340px;">
+    <span class="ws-muted">A brief's section: several lines at rest, then a textarea that grows with its words</span>
+    <div class="ws-card ws-card--pad-md ws-stack ws-stack--loose">
+      <div class="ws-stack ws-stack--tight">
+        <span class="ws-meta">Audience</span>
+        <div class="ws-inline-edit ws-body">
+          <button type="button" class="ws-inline-edit__value"><span class="ws-sr">Edit the audience: </span>Agents in Ohio who closed fewer than five deals last year and still farm a neighbourhood.<svg class="ws-icon ws-inline-edit__mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 3.5l2 2L6 12H4v-2l6.5-6.5z"/></svg></button>
+        </div>
+      </div>
+      <div class="ws-stack ws-stack--tight">
+        <span class="ws-meta">Goal</span>
+        <div class="ws-inline-edit ws-body">
+          <textarea class="ws-inline-edit__value ws-inline-edit__value--typing" aria-label="Goal" rows="2">Book forty demos from the email and the two webinars in March.</textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 340px;">
+    <span class="ws-muted">No value yet, then a save on its way, saved, and refused</span>
+    <div class="ws-card ws-card--pad-md ws-stack ws-stack--loose">
+      <div class="ws-stack ws-stack--tight">
+        <span class="ws-meta">Owner</span>
+        <div class="ws-inline-edit ws-body">
+          <button type="button" class="ws-inline-edit__value" data-empty><span class="ws-sr">Edit the owner: </span>Add an owner<svg class="ws-icon ws-inline-edit__mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 3.5l2 2L6 12H4v-2l6.5-6.5z"/></svg></button>
+        </div>
+      </div>
+      <div class="ws-stack ws-stack--tight">
+        <span class="ws-meta">Channel</span>
+        <div class="ws-inline-edit ws-body">
+          <button type="button" class="ws-inline-edit__value"><span class="ws-sr">Edit the channel: </span>Email and two webinars<svg class="ws-icon ws-inline-edit__mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 3.5l2 2L6 12H4v-2l6.5-6.5z"/></svg></button>
+          <p class="ws-field-msg" role="status">Saving</p>
+        </div>
+      </div>
+      <div class="ws-stack ws-stack--tight">
+        <span class="ws-meta">Budget</span>
+        <div class="ws-inline-edit ws-body">
+          <button type="button" class="ws-inline-edit__value"><span class="ws-sr">Edit the budget: </span>$4,000<svg class="ws-icon ws-inline-edit__mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 3.5l2 2L6 12H4v-2l6.5-6.5z"/></svg></button>
+          <p class="ws-field-msg" role="status">Saved</p>
+        </div>
+      </div>
+      <div class="ws-stack ws-stack--tight">
+        <span class="ws-meta">Campaign name</span>
+        <div class="ws-inline-edit ws-body">
+          <input class="ws-inline-edit__value" type="text" value="" aria-label="Campaign name" aria-invalid="true" aria-describedby="ie-name-msg" placeholder="Spring market">
+          <p class="ws-field-msg ws-field-msg--error" id="ie-name-msg"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="6"/><path d="M8 5v3.5M8 11h.01"/></svg>The campaign needs a name</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 340px;">
+    <span class="ws-muted">Live: press the words, type, Enter saves, Escape puts them back; focus returns to the words</span>
+    <div class="ws-card ws-card--pad-md ws-stack">
+      <span class="ws-meta">Milestone</span>
+      <div class="ws-inline-edit ws-section" id="ie-live">
+        <button type="button" class="ws-inline-edit__value"><span class="ws-sr">Edit the milestone: </span><span data-words>First draft to Nikhil</span><svg class="ws-icon ws-inline-edit__mark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 3.5l2 2L6 12H4v-2l6.5-6.5z"/></svg></button>
+        <p class="ws-field-msg" role="status" data-status></p>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  (() => {
+    // The behaviour an app wires: the button becomes an input with the same words, Enter or blur saves, Escape cancels,
+    // and focus goes back to the button either way.
+    const root = document.getElementById('ie-live');
+    const button = root.querySelector('button');
+    const words = button.querySelector('[data-words]');
+    const status = root.querySelector('[data-status]');
+    button.addEventListener('click', () => {
+      const input = document.createElement('input');
+      input.className = 'ws-inline-edit__value';
+      input.type = 'text';
+      input.value = words.textContent;
+      input.setAttribute('aria-label', 'Milestone');
+      let done = false;
+      const finish = (save) => {
+        if (done) return;
+        done = true;
+        const next = input.value.trim();
+        if (save && next && next !== words.textContent) {
+          words.textContent = next;
+          status.textContent = 'Saved';
+        }
+        input.replaceWith(button);
+        button.focus();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); finish(true); }
+        if (e.key === 'Escape') { e.preventDefault(); finish(false); }
+      });
+      input.addEventListener('blur', () => finish(true));
+      status.textContent = '';
+      button.replaceWith(input);
+      input.focus();
+      input.select();
+    });
+  })();
+</script>
+</body>
+</html>

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

@@ -0,0 +1,34 @@
+/* ---- InlineEdit: words that become a field in place. The rest state is a button holding the words, the editing state
+   an input or a textarea; both are __value, so they share one box (4 / 8 inside, pulled back 8 at the sides so the words
+   stay on the content edge) and the words' own type (the wrapper wears ws-section, ws-title or ws-body), and nothing jumps when
+   one turns into the other. At rest: no ground, a navy wash under the pointer, a pencil mark that shows on hover and
+   focus (always on touch, where there is no hover). Editing: the field's white ground, its fine edge and the focus
+   ring, the words keeping their own colour and weight. ---- */
+.ws-inline-edit { display: grid; gap: var(--space-3xs); min-width: 0; }
+.ws-inline-edit__value { display: block; box-sizing: border-box; width: calc(100% + var(--space-xs) * 2); min-width: 0; margin: 0 calc(var(--space-xs) * -1); padding: var(--space-xxs) var(--space-xs); border: 0; border-radius: var(--ws-radius-control); background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: start; text-wrap: inherit; overflow-wrap: anywhere; }
+button.ws-inline-edit__value { cursor: text; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) { button.ws-inline-edit__value:hover { background: var(--ws-hover); } }
+button.ws-inline-edit__value:active { background: var(--ws-hover-strong); }
+/* No value yet: the placeholder's words, still the target. */
+.ws-inline-edit__value[data-empty] { color: var(--color-text-placeholder); }
+/* The pencil after the words (a ws-icon at the words' size, 16 at most, so it sits on their line): a hint, never the only
+   target (the whole box is). */
+.ws-inline-edit__mark { width: min(1em, var(--ws-icon)); height: min(1em, var(--ws-icon)); margin-inline-start: var(--space-xxs); color: var(--color-text-muted); opacity: 0; transition: opacity var(--ws-duration-hover) var(--ws-ease-soft); }
+@media (hover: hover) { button.ws-inline-edit__value:hover .ws-inline-edit__mark { opacity: 1; } }
+button.ws-inline-edit__value:focus-visible .ws-inline-edit__mark { opacity: 1; }
+@media (pointer: coarse) { .ws-inline-edit__mark { opacity: 1; } }
+/* Editing: the same box as a field. A textarea grows with its words where the browser can (field-sizing). */
+.ws-inline-edit__value:is(input, textarea) { background: var(--ws-field); box-shadow: var(--ws-shadow-hairline-in); }
+/* The ring is drawn inside the box, so it never crosses a label or a line 4 above or below. */
+.ws-inline-edit__value:focus-visible, .ws-inline-edit__value--typing { outline-offset: calc(var(--ws-focus-width) * -1); }
+textarea.ws-inline-edit__value { resize: none; field-sizing: content; }
+.ws-inline-edit__value:is(input, textarea)::placeholder { color: var(--color-text-placeholder); }
+.ws-inline-edit__value:is(input, textarea)[aria-invalid="true"] { box-shadow: inset 0 0 0 var(--ws-line) var(--ws-word-needs); }
+/* Touch: the box is 40 tall at least, at rest and editing alike (so it still does not jump), and the editing words are
+   16 at least: a field under 16 px makes iOS zoom the page. */
+@media (pointer: coarse) {
+  .ws-inline-edit__value { min-height: var(--ws-touch); }
+  .ws-inline-edit__value:is(input, textarea) { font-size: max(1em, var(--ws-text-value)); }
+}
+/* The editing state drawn still, for a preview or a mockup: the focus ring a real focus draws. */
+.ws-inline-edit__value--typing { outline: var(--ws-focus-width) solid var(--ws-focus-color); }