@usableapp/cardds 0.1.3 → 0.1.5

package/README.md

@@ -2,12 +2,12 @@
 
 Card-first mobile design system, **React-first**: `src/` is the component
 library — one thin component per pattern, emitting exactly the markup the CSS
-documents — and `app/` is the Commons Time Bank PWA built from it (the twelve
-screens of the Claude Design handoff, as real routes). The CSS (`css/*.css`)
+documents. The CSS (`css/*.css`)
 stays the only truth: a component never styles anything, it only picks classes
 from props. The CSS also works alone, with no build, for a host that wants
-class names rather than components; `demo/` keeps the CSS spec pages the
-acceptance tests drive.
+class names rather than components. The demo is `/gallery` (`npm run dev`):
+every component's stories, live, searchable; `tests/fixtures/` holds the
+HTML pages the acceptance tests drive (not a demo — nobody reads them).
 
 Repo: **https://github.com/everysundays/cardds** (private — this is the
 source of truth; every consuming project vendors a copy from here, never
@@ -23,10 +23,9 @@ licences (`fonts/LICENSES.md`).
 
 ```bash
 npm install
-npm run dev          # the app (app/) on http://localhost:5174 — the twelve screens, /screens lists them
+npm run dev          # the gallery on http://localhost:5174 — every story, searchable
 npm run build        # the library: icons → src/type/icons.ts · tsc → dist/ (ESM + .d.ts) · dist/cardds.css (flattened)
-npm run build:app    # the PWA → app/dist (manifest, service worker, icons)
-npm test             # Playwright: the step/sheet/centre geometry on demo/, the app's screens and the four handoff upgrades
+npm test             # Playwright: the step/sheet/centre geometry on tests/fixtures/, the app's screens and the four handoff upgrades
 ```
 
 ```tsx
@@ -42,12 +41,13 @@ the code), a card heading that needs more than two lines squeezing its type
 (see *Anatomy*), and the `.dropdown` writing its picked value back. `Icon`
 inlines the 56 symbols of `icons.svg` at build time, so no sprite file ships.
 
-**The app** (`app/`): Vite + React Router, `cardds` aliased to `src/` so the
-app and the package share one truth with no build between them. Twelve
-screens from `docs/handoff/commons-time-bank-SPEC.md` — welcome, install (the
-real `beforeinstallprompt`), verify phone, home, browse, detail, matches,
-empty, the two menus (sheet stacks), post, profile. `app/README.md` records
-what the port changed against the mockups and why.
+**The gallery** (`gallery/`): Vite + React Router, `cardds` aliased to `src/`
+so the gallery and the package share one truth with no build between them.
+`/` lists every story of every component, `/:Name` one component. (The
+Commons Time Bank app that used to live here — twelve screens from
+`docs/handoff/commons-time-bank-SPEC.md` — was dropped on 2026-09-16; nobody
+looked at it, the gallery is the demo. The type scale is the `Text · Scale`
+story.)
 
 **CSS only** (no React, no build):
 
@@ -62,14 +62,12 @@ popover) but won't update its label, a stack still displays but won't open, a
 sheet renders every state but only moves when a class changes, a pin is six
 plain inputs.
 
-`demo/index.html` is the CSS spec — every component in one page, palette
-switcher top-right. `demo/sheet.html` — the single sheet at phone height: a step
-that reads, a step that acts, the overlay stage; `demo/stack.html` — the sheet
-stack: the menu and the display variant; `demo/elements.html` — in-card
-elements and layovers grown from the timebanking board. Serve the repo root
-(`python3 -m http.server 4174`) and open `/demo/`. These pages are the fixtures
-of `tests/step.spec.js` and `tests/centre.spec.js`; `tests/app.spec.js` drives
-the app. Nothing here is verified by eye.
+The one place to look is `/gallery` (`npm run dev` → `http://localhost:5174/gallery`):
+every `.design-sync/previews/<Name>.tsx` story, live, grouped by `src/<group>/`,
+searchable, in a 375×812 phone cell, with a palette switch and an inspect
+switch (box outlines + dimensions on hover). `tests/fixtures/*.html` (ex
+`demo/`) are the pages `tests/step.spec.js` and `tests/centre.spec.js` measure;
+`tests/gallery.spec.js` drives the gallery. Nothing here is verified by eye.
 
 ### In another project
 
@@ -187,19 +185,19 @@ A step is one screen, one task (see *Anatomy*). It is the other component
 whose markup has rules, because the sheet's box is the step itself:
 
 ```html
-<!-- reads: card only -->
+<!-- reads: the words only -->
 <section class="step">
-  <article class="card step__card">
-    <div class="card__head"><div><span class="t-overline t-muted">ขั้นที่ 2 จาก 4</span><h2 class="t-h2">…</h2></div></div>
+  <article class="step__card">
+    <div class="card__head"><span class="t-overline t-muted">ขั้นที่ 2 จาก 4</span><h2 class="t-h2">…</h2></div>
     <p class="t-body">…</p>
   </article>
 </section>
 <div class="action-bar action-bar--pager">…</div>
 
-<!-- acts: card + sheet -->
+<!-- acts: the words + a sheet -->
 <section class="step">
-  <article class="card step__card">…the words…</article>
-  <article class="card sheet sheet--half" data-sheet-states="peek half full">
+  <article class="step__card">…the words…</article>
+  <article class="card sheet sheet--half" data-sheet-states="peek half 3q full">
     <button class="sheet__handle" type="button" aria-label="ปรับความสูง"></button>
     <div class="card__head"><h2 class="t-h2">…</h2><span class="chip">…</span></div>
     <div class="sheet__body">
@@ -221,8 +219,10 @@ whose markup has rules, because the sheet's box is the step itself:
   card takes the inset back as its side margins — so the card and the bar's
   buttons stand on the inset line, and the sheet runs edge to edge like the
   bar and like a sheet in a `.sheet-stage`.
-- **`.step__card` first, `.sheet` last.** The card carries the step's words
-  and is a normal card: head · content · optional foot. The sheet is
+- **`.step__card` first, `.sheet` last.** The block carries the step's words
+  ON THE BASE — no frame, no area colour (it was a `.card` until 2026-09-16;
+  Lh: a step reads like a page, not a card in a page). It keeps a card's
+  rhythm: a `.card__head`, `--card-gap` between things. The sheet is
   **handle · head · body**: the handle, then a `.card__head` title row (that
   row is what `peek` shows — heading left, the contextual thing right), then
   `.sheet__body` with what the member acts on. The handle and the head are
@@ -311,12 +311,12 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 | `css/choice.css` | `.check`, `.toggle`, `.chip--toggle`, `.chip-grid` + `.chip--pick`, `.day-strip`, `.calendar`, `.mood`, `.pin`, `.composer`, `.slider` | choice controls |
 | `css/lists.css` | `.row` / `.rows` (frameless rows in a card), `.kv`, `.kv-grid`, `.timeline`, `.legend`, `.link` | lists inside cards |
 | `css/media.css` | `.card--cover`, `.quote`, `.tile-grid` + `.tile`, `.card--fold`, `.mosaic`, `.wave` | media & display |
-| `css/layover.css` | `.drawer` (ask), `.menu` (popover), `.banner` (details), `.float-bar`, `.callout`, `.chip--bubble`, `.deck` | cards over content |
+| `css/layover.css` | `.modal` (the ask: `__lift` + `__drawer`, closes on any drawer button → `cardds:modal`), `.menu` (popover), `.banner` (details), `.float-bar`, `.callout`, `.chip--bubble`, `.deck` | cards over content |
 | `icons.svg` | Lucide sprite (ISC), 56 minimal stroke icons | add symbols as needed |
 | `src/` → `dist/` | the React library: `src/<group>/<Name>.tsx`, one thin component per pattern, JSDoc = the rule; built by `npm run build` (tsc) into `dist/` with `.d.ts`; `src/type/icons.ts` is generated from `icons.svg` | when adding a component |
-| `app/` | the Commons Time Bank PWA: `app/src/screens/*.tsx` (the twelve screens), `App.tsx` (the routes), `install.ts` (the install prompt), `public/` (manifest, `sw.js`, icons); `npm run dev` / `build:app` | the product |
-| `demo/` | the CSS spec pages (`index`, `sheet`, `stack`, `elements`) — CSS only, and the fixtures of the geometry tests | when the CSS contract changes |
-| `docs/handoff/` | the Claude Design handoff spec the app was ported from | reference |
+| `gallery/` | the gallery site: `npm run dev` → `/` every story, `/:Name` one component (`gallery/src/Gallery.tsx` globs `.design-sync/previews/`) | the demo |
+| `tests/fixtures/` | the HTML pages (`index`, `sheet`, `stack`, `elements`) the geometry tests measure — ex `demo/`, not a demo | when a geometry test needs a new case |
+| `docs/handoff/` | the Claude Design handoff spec (the Commons Time Bank app built from it was dropped 2026-09-16) | reference |
 | `scripts/` | `build-icons.mjs` (icons.svg → `src/type/icons.ts`), `flatten-css.mjs` (`cardds.css` + imports → `dist/cardds.css`) | rarely |
 | `docs/guides/` | `building-with-cardds.md` — the anatomy, the step, the two sheet systems and the vocabulary in React terms; shipped to Claude Design as its guidelines | when the contract changes |
 | `cardds.js` | the behaviours (delegated, class/property toggles only — everything renders without it): dropdown value sync, `.sheet-stack--tap` open/close (tolerates one wrapper per sheet; close reads the tapped sheet), `.pin` auto-advance / Backspace / paste + `cardds:pin`, the sheet handle (tap / drag-snap / Enter / Space), the focus and keyboard raises (`--kb`), `cardds:sheet` | rarely |
@@ -356,7 +356,7 @@ Every screen is the same four things, and every card the same three:
 - **Two sheet systems, one material.** *Sheet single* (`.sheet`, `sheet.css`)
   is ONE sheet the member acts in, whatever it holds: a short entry in front
   of a step's card, a place on a map, a payment on a dim page — in a `.step`
-  or a `.sheet-stage`, and its state is how far it slid (peek / half / full).
+  or a `.sheet-stage`, and its state is how far it slid (peek / half / 3q / full).
   *Sheet stack* (`.sheet-stack`, `stack.css`) is MANY sheets, each a main
   section of the app, stacked like paper at the middle of the home screen:
   the menu. Heads peek, a tap brings one sheet to the front, back returns it;
@@ -365,8 +365,8 @@ Every screen is the same four things, and every card the same three:
   sheet is `.card.sheet` — and both obey rule 8: rigid, full height, moved
   by `translate` only. (The stack was first named "card stack": wrong, and
   retired.) Demos: `sheet.html`, `stack.html`.
-- **A step is one screen, one task: `.step`.** What the member reads is a
-  card (`.step__card`); what the member does, if the step asks for it, is a
+- **A step is one screen, one task: `.step`.** What the member reads is
+  words on the base (`.step__card` — the name stayed, the frame went); what the member does, if the step asks for it, is a
   `.sheet` in front of it; the screen's one move is `.action-bar`, outside
   the step, below it. A step where the member only READS is the card alone.
   A step where the member ACTS (types, picks, shoots a photo, records) adds
@@ -469,9 +469,12 @@ Demo: the *skeleton* block at the top of `elements.html`.
 8. **A single sheet is rigid material, like a sheet in the stack.** It is always the full
    height of the box that holds it (`inset: 0`, set once, never written
    again) and a state is nothing but how far that full card slid:
-   `sheet--full` slid nowhere, `sheet--half` slid down by `--sheet-half`
-   (50% of itself), `sheet--peek` slid down until only `--sheet-peek` shows —
-   the handle and the title row. `translate` is the only animated property
+   `sheet--full` slid nowhere, `sheet--3q` slid down by `--sheet-3q` (a
+   quarter of itself — three quarters show), `sheet--half` by `--sheet-half`
+   (50%), `sheet--peek` slid down until only `--sheet-peek` shows — the
+   handle and the title row. A tap on the handle toggles between the sheet's
+   own state and peek (never a step-by-step climb, Lh 2026-09-16); a drag
+   snaps to any listed state, and where it lands is what a tap returns to. `translate` is the only animated property
    (`--motion-sheet`), and nothing toggles height, display or z-index for a
    state — the stack's rule, inherited. The box clips whatever slid below its
    bottom edge, so a sheet at any height is still a card: rounded top, a
@@ -484,7 +487,7 @@ Demo: the *skeleton* block at the top of `elements.html`.
    padding. Two boxes hold sheets and the states
    mean the same in both: `.step` (an app screen, the bar outside — Anatomy)
    and `.sheet-stage` (a page-level overlay: a sheet over a map, the dim page
-   sheet `--dim` + `--raised`, the ask drawer `--ask` + `.lift` + `.drawer`).
+   sheet `--dim` + `--raised`, the ask `--ask` + `.modal` = `__lift` + `__drawer`).
    A stage keeps the top bar's line free (`--_top`), so `--full` stops under
    `--header-h` and keeps its corners. Both sheet tokens are published — a
    sheet with a taller head retunes `--sheet-peek` — and registered in

package/cardds.js

@@ -177,8 +177,12 @@ function carddsCloseStack(stack, card) {
    without it; this adds the handle's click and drag, the focus raise, the
    keyboard room, and one event. Delegated: any sheet on the page, no ids.
 
-   - click / Enter / Space on .sheet__handle cycles the states named in
-     data-sheet-states (default "peek half full"), wrapping round
+   - click / Enter / Space on .sheet__handle TOGGLES the sheet between its
+     own state and peek (Lh 2026-09-16 — never a step-by-step climb). "Its
+     own state" is the last non-peek state it rested in (authored, dragged
+     to, or set), kept in data-sheet-home
+   - data-sheet-states (default "peek half 3q full") lists the states a
+     drag snaps to
    - drag on the handle writes the offset to --_drag (the CSS adds it to the
      state's translate) and on release snaps to the nearest state; a move
      shorter than --sp-2 is a tap. The snap is the one place the sheet's
@@ -194,7 +198,7 @@ function carddsCloseStack(stack, card) {
 
    carddsSheetSet(sheet, state) is the one entry point; an app that sets
    the state itself calls it rather than swapping classes, so listeners hear. */
-const CARDDS_SHEET_STATES = ['peek', 'half', 'full'];
+const CARDDS_SHEET_STATES = ['peek', 'half', '3q', 'full'];
 const CARDDS_SHEET_TAP_REM = 0.5; /* = --sp-2: a move shorter than this is a tap, not a drag */
 
 function carddsSheetStates(sheet) {
@@ -210,6 +214,10 @@ function carddsSheetSet(sheet, state) {
   if (!CARDDS_SHEET_STATES.includes(state)) return;
   const was = carddsSheetState(sheet);
   CARDDS_SHEET_STATES.forEach(s => sheet.classList.toggle('sheet--' + s, s === state));
+  /* where a tap from peek returns to: the non-peek state it is going to, or the
+     one it is leaving (an authored state never passed through here before) */
+  const home = state !== 'peek' ? state : was !== 'peek' ? was : null;
+  if (home) sheet.dataset.sheetHome = home;
   if (was !== state) sheet.dispatchEvent(new CustomEvent('cardds:sheet', { bubbles: true, detail: { state } }));
 }
 
@@ -224,10 +232,19 @@ document.addEventListener('click', e => {
   if (handle === carddsSheetSkipClick) { carddsSheetSkipClick = null; return; }
   const sheet = handle.closest('.sheet');
   if (!sheet) return;
-  const states = carddsSheetStates(sheet);
-  carddsSheetSet(sheet, states[(states.indexOf(carddsSheetState(sheet)) + 1) % states.length]);
+  carddsSheetSet(sheet, carddsSheetState(sheet) === 'peek' ? carddsSheetHome(sheet) : 'peek');
 });
 
+/* the state a tap from peek returns to: the last non-peek state it rested in,
+   else the authored one, else the first non-peek state it snaps to */
+function carddsSheetHome(sheet) {
+  const states = carddsSheetStates(sheet);
+  const home = sheet.dataset.sheetHome;
+  if (home && states.includes(home)) return home;
+  const now = carddsSheetState(sheet);
+  return now !== 'peek' ? now : states.find(s => s !== 'peek') ?? 'half';
+}
+
 /* how far the sheet has slid, in px: its rendered top against its resting top
    at full (the box's padding edge + its own offset). Read from geometry, not
    from the computed translate — that keeps percentages and calcs as text. */
@@ -243,6 +260,7 @@ function carddsSheetStops(sheet) {
   return {
     full: 0,
     half: height * (parseFloat(cs.getPropertyValue('--sheet-half')) || 0), // a share of the height
+    '3q': height * (parseFloat(cs.getPropertyValue('--sheet-3q')) || 0),
     peek: height - (parseFloat(cs.getPropertyValue('--sheet-peek')) || 0),  // a length, resolved
   };
 }
@@ -299,18 +317,17 @@ document.addEventListener('pointerup', carddsSheetRelease);
 document.addEventListener('pointercancel', carddsSheetRelease);
 
 /* focus in a peeked sheet: a control under the cut cannot be used, so raise
-   the sheet first — to the state after peek at least, further if that one
-   has no room for the control under the pinned head (a small phone at a
-   large text size). The browser's own reveal scrolled the body against the
+   the sheet first — to its own state (the one a tap returns to) at least,
+   further if that one has no room for the control under the pinned head (a
+   small phone at a large text size). The browser's own reveal scrolled the body against the
    peek strip before this fired; start over from the top and let the reveal,
    with the raised state's scroll-padding, do the least. */
 document.addEventListener('focusin', e => {
   const sheet = e.target.closest?.('.sheet');
   if (!sheet || !sheet.classList.contains('sheet--peek') || e.target.closest('.sheet__handle')) return;
-  const states = carddsSheetStates(sheet);
   const body = sheet.querySelector(':scope > .sheet__body');
   if (body) body.scrollTop = 0;
-  carddsSheetReveal(e.target, states[states.indexOf('peek') + 1] ?? states[states.length - 1]);
+  carddsSheetReveal(e.target, carddsSheetHome(sheet));
 });
 
 /* --kb: the height of the viewport an on-screen keyboard covers. iOS keeps
@@ -377,3 +394,23 @@ document.addEventListener('scroll', e => {
   clearTimeout(carddsScrollTimers.get(t));
   carddsScrollTimers.set(t, setTimeout(() => t.classList.remove('is-scrolling'), 700));
 }, true);
+
+/* ---- Modal (layover.css, .sheet-stage--ask): a click on any button in the
+   drawer closes the modal by playing its open animations backwards —
+   Animation.reverse() on every animation in the card, the same keyframes, no
+   closing keyframes to keep in step — then fires "cardds:modal" on the stage
+   (bubbles, detail.answer = the button's data-answer) so the app removes the
+   stage. Reduced motion (no animations): the event fires at once. */
+document.addEventListener('click', e => {
+  const btn = e.target.closest('.modal__drawer button');
+  if (!btn) return;
+  const stage = btn.closest('.sheet-stage--ask');
+  const modal = btn.closest('.modal');
+  if (!stage || !modal || stage.classList.contains('is-closing')) return;
+  stage.classList.add('is-closing');
+  const anims = modal.getAnimations({ subtree: true });
+  anims.forEach(a => a.reverse());
+  Promise.all(anims.map(a => a.finished)).then(() => {
+    stage.dispatchEvent(new CustomEvent('cardds:modal', { bubbles: true, detail: { answer: btn.dataset.answer ?? null } }));
+  });
+});

package/css/layover.css

@@ -1,48 +1,93 @@
 /* ============================================================
    cardds/layover.css — cards that lay OVER other content:
-   ask drawer · popover menu · expanding banner · float bar ·
+   Modal (ask) · popover menu · expanding banner · float bar ·
    callout · swipe deck. The sheet (peek / half / full / page)
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
-/* ---- ask drawer: the content card lifts, a dark drawer asks ----
+/* ---- ask: the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
    <div class="sheet-stage sheet-stage--ask">
-     <article class="card lift">…page content…</article>
-     <div class="drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
-       <div class="btn-trio"><button class="icon-btn">×</button><span class="btn-trio__dots"></span><button class="icon-btn icon-btn--invert">?</button><span class="btn-trio__dots"></span><button class="icon-btn">✓</button></div>
-     </div></div> */
+     <article class="card modal">
+       <div class="modal__lift">…the card's content (a head, rows, a timeline)…</div>
+       <div class="modal__drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
+         <div class="btn-trio">…</div>
+       </div>
+     </article>
+   </div>
+   .modal is the card — no border (the shadow is its edge on the scrim);
+   .modal__lift the light part that holds the thing being asked about (it
+   scrolls when tall); .modal__drawer the dark end that asks. The ground is
+   the page under a scrim (like --dim). Two beats (2 × --motion-sheet) when
+   the stage appears, and the same two backwards when it closes:
+     1. the card drops in from above the stage to the screen's centre — its
+        drawer still inside it, height 0: nothing of the ask shows yet
+     2. the drawer comes out of the card's bottom edge while the lift moves
+        up, both at once: the card grows from its centre, which never moves
+        (the stage centres it; a growing card keeps its middle where it is)
+   Closing: a click on any button in the drawer plays the same animations in
+   reverse (cardds.js: Animation.reverse() on each — nothing duplicated), then
+   fires "cardds:modal" on the .sheet-stage (bubbles, detail.answer from the
+   button's data-answer) for the app to remove the stage.
+   Reduced motion: the finished state, no beats; closing fires at once. */
 .sheet-stage--ask {
   --drawer-h: 14rem;
-  background: var(--card-3-bg);
-  color: var(--card-3-ink);
+  display: grid;
+  align-content: center;          /* the card at the screen's centre — and kept there as it grows */
+  padding-inline: var(--screen-pad);
 }
-.lift {
-  position: absolute;
-  inset: 0 0 var(--drawer-h) 0;
-  border: 0;
-  border-radius: 0 0 var(--r-card) var(--r-card);
-  overflow: hidden;
-  overscroll-behavior: contain;
+.sheet-stage--ask::after { content: ""; position: absolute; inset: 0; background: var(--scrim); } /* the page dimmed */
+.sheet-stage--ask > .sheet-stage__bg { filter: blur(var(--sp-2)); }
+.modal {
+  position: relative;
+  z-index: 1;                     /* over the scrim */
+  max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) — a % here would be of the grid area, which is the card itself */
+  padding: 0;                     /* the parts pad themselves */
+  border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: clip;
   box-shadow: var(--shadow-sheet);
+}
+.modal__lift {
+  padding: var(--card-pad);
+  display: grid;
+  gap: var(--card-gap);
   align-content: start;
+  min-height: 0;
+  overflow-y: auto;               /* tall content scrolls inside; the drawer stays */
+  overscroll-behavior: contain;
 }
-.drawer {
-  position: absolute;
-  inset-inline: 0;
-  bottom: 0;
+.modal__drawer {
   height: var(--drawer-h);
+  box-sizing: border-box;
   padding: var(--sp-5);
+  overflow: clip;
   display: grid;
   align-content: center;
   justify-items: center;
   gap: var(--sp-1);
   text-align: center;
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
-.drawer .t-caption { opacity: 0.7; }
-.drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
-.drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+.modal__drawer .t-caption { opacity: 0.7; }
+.modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
+.modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+@media (prefers-reduced-motion: no-preference) {
+  .modal { animation: modal-drop calc(2 * var(--motion-sheet)) ease both; }
+  .modal__drawer { animation: modal-open calc(2 * var(--motion-sheet)) ease both; }
+  @keyframes modal-drop {
+    0%        { translate: 0 -100cqh; }   /* above the stage */
+    50%, 100% { translate: 0 0; }         /* 1. at the centre — and it stays: beat 2 is the drawer's */
+  }
+  @keyframes modal-open {
+    0%, 50%   { height: 0; padding-block: 0; }                       /* inside the card */
+    100%      { height: var(--drawer-h); padding-block: var(--sp-5); } /* 2. out below, the lift up, together */
+  }
+}
+
 .btn-trio { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
 .btn-trio__dots {
   width: var(--sp-5);

package/css/sheet.css

@@ -1,14 +1,14 @@
 /* ============================================================
    cardds/sheet.css — sheet single: one card as a bottom sheet.
-   Three states: .sheet--peek · .sheet--half · .sheet--full
+   Four states: .sheet--peek · .sheet--half · .sheet--3q · .sheet--full
 
    A sheet is rigid material, exactly like a sheet in .sheet-stack--tap
    (stack.css): it is ALWAYS the full height of the box that holds it —
    set once by inset: 0, never written again, never transitioned — and
    a state is nothing but how far that full card has slid up. Peek is
    a full sheet that slid down until only its handle and title show;
-   half is one that slid down by half of itself; full is one that has
-   not slid at all. The box clips whatever slid below its bottom edge,
+   half is one that slid down by half of itself; 3q (three quarters,
+   Lh 2026-09-16) by a quarter; full is one that has not slid at all. The box clips whatever slid below its bottom edge,
    so a sheet at any height is still a card: rounded top, a straight
    cut at the box's edge, its content scrolling inside.
 
@@ -28,7 +28,11 @@
    page. Many sheets stacked as the app's menu are the other system,
    .sheet-stack (stack.css): the same material, its own class and file.
 
-   <article class="card sheet sheet--half" data-sheet-states="peek half full">
+   <article class="card sheet sheet--half" data-sheet-states="peek half 3q full">
+   A tap on the handle TOGGLES the sheet between its own state and peek
+   (Lh 2026-09-16) — never a step-by-step climb; a drag snaps to any of
+   the listed states, and the state it lands on becomes the one a tap
+   returns to.
      <button class="sheet__handle" type="button" aria-label="…"></button>
      <div class="card__head"><h2 class="t-h2">…</h2>…</div>
      <div class="sheet__body">…controls, or small content cards…</div>
@@ -51,6 +55,7 @@
      retune it: .my-sheet { --sheet-peek: … } */
   --sheet-peek: calc(var(--card-pad) + var(--_handle) + 2 * var(--card-gap) + var(--tap));
   --sheet-half: 0.5;              /* a share of the sheet's own height */
+  --sheet-3q: 0.25;               /* three quarters showing: slid by a quarter */
   /* the sheet's own height, seen from inside it: the box it slides in is the
      size container (.step, .sheet-stage), so 100cqh is that box, less what
      the sheet gives up at its top (--_top) and bottom (--_lift). The sheet
@@ -81,6 +86,7 @@
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
+.sheet--3q { --_y: calc(var(--sheet-3q) * 100%); --_cover: calc(var(--sheet-3q) * var(--_box)); }
 .sheet--peek { --_y: calc(100% - var(--sheet-peek)); --_cover: calc(var(--_box) - var(--sheet-peek)); }
 .sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */
 

package/css/step.css

@@ -1,11 +1,11 @@
 /* ============================================================
    cardds/step.css — .step: one screen, one task.
-   What the member reads (a card), what the member does when the
+   What the member reads (words on the base — not a card, Lh 2026-09-16), what the member does when the
    step asks for it (a sheet, sheet.css), and the screen's one
    move (.action-bar, actions.css) OUTSIDE the step, below it.
 
    <section class="step">
-     <article class="card step__card">…the words…</article>           ← first
+     <article class="step__card">…the words…</article>                ← first
      <article class="card sheet sheet--half">…the controls…</article>  ← last, optional
    </section>
    <div class="action-bar">…</div>
@@ -59,10 +59,19 @@
    frame — the bar is fixed to the viewport wherever it sits. */
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
 
-/* the reading card: a plain card with a flex rule — it hugs its content,
-   and when the column runs out (a short phone, large text) it shrinks and
-   scrolls inside itself instead of pushing the bar or the sheet */
+/* the reading block: the words on the base — no frame, no area colour (it was
+   a .card until 2026-09-16; Lh: a step reads like a page, not a card in a
+   page). It keeps a card's inner rhythm (a head, --card-gap between things,
+   the tokens .card publishes for the head and .bleed) and the flex rule: it
+   hugs its content, and when the column runs out (a short phone, large text)
+   it shrinks and scrolls inside itself instead of pushing the bar or the sheet */
 .step__card {
+  --card-pad: 0rem;              /* published for .bleed: nothing to cancel */
+  --card-gap: var(--sp-4);
+  display: grid;
+  gap: var(--card-gap);
+  align-content: start;
+  color: var(--on-surface);
   flex: 0 1 auto;
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */

package/css/tokens.css

@@ -176,3 +176,4 @@
    ============================================================ */
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
+@property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }

package/dist/actions/Btn.js

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * Btn — the pill button (48px+ tall). Plain by default; `primary` for the one move; `quiet` on tinted cards.
  * In a CardFoot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.

package/dist/actions/BtnRow.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use CardFoot instead. */
 export function BtnRow({ className, ...rest }) {
     return _jsx("div", { className: cx('btn-row', className), ...rest });

package/dist/actions/Chip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
-import { Dot } from './Dot';
+import { cx } from '../cx.js';
+import { Dot } from './Dot.js';
 /** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For pickers use ChipToggle / ChipPick. */
 export function Chip({ on, dot, bubble, as, href, className, children, ...rest }) {
     const el = as ?? (href ? 'a' : 'span');

package/dist/actions/Dot.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Dot — the signal dot in chips, legends and row metas. */
 export function Dot({ b, className, ...rest }) {
     return _jsx("span", { className: cx('dot', b && 'dot--b', className), ...rest });

package/dist/actions/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface DropdownProps extends ComponentPropsWithoutRef<'div'> {
     /** unique id — the popover menu's id the trigger targets */
     id: string;

package/dist/actions/Dropdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /**
  * Dropdown — THE select: a pill trigger + a Menu popover anchored under it (native popover: light dismiss, Esc).
  * Never a native `<select>`. Children are MenuItems; cardds.js copies the picked item's label into the pill

package/dist/actions/Fab.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface FabProps extends ComponentPropsWithoutRef<'button'> {
     label: string;
     icon?: IconName;

package/dist/actions/Fab.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** Fab — the square floating action at the bottom-right of a stage or screen (above the bar). */
 export function Fab({ label, icon = 'plus', invert = true, className, children, ...rest }) {
     return (_jsx("button", { type: "button", "aria-label": label, className: cx('icon-btn fab', invert && 'icon-btn--invert', className), ...rest, children: children ?? _jsx(Icon, { name: icon }) }));

package/dist/actions/IconBtn.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface IconBtnProps extends ComponentPropsWithoutRef<'button'> {
     /** the accessible name — required, the button has no text */
     label: string;

package/dist/actions/IconBtn.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { Menu } from './Dropdown';
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { Menu } from './Dropdown.js';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move.
  *  With `menu` it gives the member options the way a Dropdown does — an actions Menu (edit, share, remove…) for the card or sheet it sits in. */
 export function IconBtn({ label, icon, sm, invert, href, menu, menuId, menuStart, className, type, children, ...rest }) {

package/dist/actions/Link.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef } from 'react';
-import { type IconName } from '../type/Icon';
+import { type IconName } from '../type/Icon.js';
 export interface LinkProps extends ComponentPropsWithoutRef<'a'> {
     /** muted ink (Skip, "didn't get the code?") */
     muted?: boolean;

package/dist/actions/Link.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { cx } from '../cx';
-import { Icon } from '../type/Icon';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
 /** Link — an inline text action big enough to tap (40px): "See all ↗" in a card head, "Skip" between pager buttons. */
 export function Link({ muted, icon, href, className, children, ...rest }) {
     return createElement(href ? 'a' : 'button', { href, type: href ? undefined : 'button', className: cx('link', muted && 'link--muted', className), ...rest }, children, icon && _jsx(Icon, { name: icon, size: "xs" }));

package/dist/actions/Segment.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** Segment — a tab strip / day picker whose items share the width; children are SegmentItems. */
 export function Segment({ className, ...rest }) {
     return _jsx("div", { className: cx('segment', className), role: "tablist", ...rest });