@usableapp/cardds 0.2.0 → 0.2.1

package/README.md

@@ -1,13 +1,17 @@
 # cardds
 
+> **For:** people and AI alike — this is the reference, the one place a rule of the system is written.
+> The other docs only point here: `CLAUDE.md` (AI working IN this repo — decisions and gotchas),
+> `docs/guides/building-with-cardds.md` (AI composing screens in React; shipped to Claude Design),
+> the `/cardds` skill (AI in another project — install + contract). To LOOK at the system: `npm run dev`.
+
 Card-first mobile design system, **React-first**: `src/` is the component
 library — one thin component per pattern, emitting exactly the markup the 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. 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).
+class names rather than components. The demo is the gallery (`npm run dev`):
+every component's stories, live, searchable.
 
 Repo: **https://github.com/everysundays/cardds** (private — this is the
 source of truth; every consuming project vendors a copy from here, never
@@ -25,29 +29,28 @@ licences (`fonts/LICENSES.md`).
 npm install
 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 test             # Playwright: the step/sheet/centre geometry on tests/fixtures/, the app's screens and the four handoff upgrades
+npm test             # Playwright: the tokens and the step/sheet/centre geometry on tests/fixtures/, the gallery's stories and behaviours
 ```
 
 ```tsx
-import { Screen, TopBar, Step, BaseContent, Sheet, SheetBody, CardHead, Field, Pin, ActionBar, Btn } from 'cardds';
-import 'cardds/dist/cardds.css';   // or cardds/cardds.css with the css/ folder beside it
+import { Screen, TopBar, Step, BaseContent, Sheet, SheetBody, CardHead, Field, Pin, ActionBar, Btn } from '@usableapp/cardds';
+import '@usableapp/cardds/dist/cardds.css';
+import './theme.css';   // the project's own look, after the system's — see "A project's theme"
 ```
 
 `src/index.ts` imports `cardds.js` for its side effects, so a React host gets
 the behaviours for free: the `.sheet` handle (tap, drag, keyboard) with the
 focus and on-screen-keyboard raises, `.sheet-stack--tap` opening and closing,
 the `.pin` auto-advance (a digit moves on, Backspace moves back, a paste fills
-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`
+the code), the modal's close, 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 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.)
+**The gallery** (`gallery/`, `npm run dev` → http://localhost:5174): Vite + React Router, `cardds`
+aliased to `src/`, so the gallery and the package share one truth with no build between them.
+`/` every story of every component, `/:Name` one component — each `.design-sync/previews/<Name>.tsx`
+story live in a 375×812 phone cell, grouped by `src/<group>/`, searchable; switches for the palette
+(`own` = a colour well per colour base), inspect (box outlines + dimensions), text size, and a slider
+per size base. Nothing is hand-listed: add a preview file or a story and it shows.
 
 **CSS only** (no React, no build):
 
@@ -62,12 +65,7 @@ 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.
 
-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.
+`tests/fixtures/*.html` are the pages the geometry tests measure — not a demo. Nothing here is verified by eye.
 
 ### In another project
 
@@ -83,7 +81,6 @@ import { Card, CardHead, Btn } from '@usableapp/cardds';
 import '@usableapp/cardds/dist/cardds.css';   // the CSS, fonts resolve from the package
 ```
 
-Browse what exists at `npm run dev` → `/gallery` in this repo (every component, every story, searchable).
 
 **CSS only:** there's no build and no dependencies, so installing is cloning once, then
 copying the static files into your project — never edit the clone, never
@@ -113,13 +110,9 @@ on GitHub) — set that up as an SSH host alias if you already use a different
 account for `git@github.com` day to day, the way this machine's `~/.ssh/config`
 does it for other `everysundays` repos.
 
-**Recording what you copied matters.** A vendored copy with no record of which
-commit it came from can't be told apart from a fork. timebank's
-`scripts/cardds-vendor.mjs` is the reference: `npm run cardds:sync` copies the
-files above from a local checkout (`CARDDS_SRC`, default `~/Sites/cardds`) and
-writes `VENDORED.json` — commit hash, date, a sha256 per file — so
-`npm run check:cardds` can catch a hand edit or a stale copy. `git pull` that
-checkout before syncing to pick up what's been pushed here.
+**Record what you copied.** A vendored copy with no record of the commit it came
+from can't be told apart from a fork: write the commit hash (and a sha256 per
+file) beside the copy, so a hand edit or a stale copy can be caught.
 
 Working with Claude in another project? The `/cardds` skill
 (`~/.claude/skills/cardds/`) carries the install and the contract, and points
@@ -204,9 +197,10 @@ whose markup has rules, because the sheet's box is the step itself:
       …cardds controls (.field / .pin / .composer / .rows + .check / .segment /
       .chip-grid), or small content cards (.card--sm)…
     </div>
+    <div class="card__foot"><button class="btn btn--primary btn--block">…the one button that finishes the sheet…</button></div>
   </article>
 </section>
-<div class="action-bar">…one wide button…</div>
+<!-- no .action-bar: a bar is the base's, never in front of a sheet -->
 ```
 
 - **`.step` needs a bounded column**: a direct child of `.screen--fill`, or
@@ -239,9 +233,13 @@ whose markup has rules, because the sheet's box is the step itself:
 - **The bar is outside the step**, after it. `.step` reads the bar's room
   from `--bar-reserve`; any parent that hosts the `.action-bar` counts
   (`<body>`, an app shell, a demo frame).
-- **A sheet inside a step never carries the step's action.** The bar is the
-  one move. A sheet gets its own buttons only on a screen that has no bar —
-  the map sheet in `sheet.html`, whose "Directions" is that screen's move.
+- **Layers: the base, the sheet over it, the top bar** (Lh 2026-09-20). The `.action-bar` belongs to the
+  BASE — the move of a page of words (a pager, or one wide button). It is never in front of a sheet. A
+  screen with a sheet finishes ON the sheet: a `.card__foot`, the sheet's last child — ONE row, the page's
+  conclusion. The foot stands on the screen's bottom edge at half, 3q and full alike (a layer as tall as
+  the sheet, slid up by the share the sheet slid down — `sheet.css`), and is gone at peek. Nothing inside
+  the sheet's body commits on its own (a `Composer` there takes no `send`). A bar written beside a sheet anyway
+  stands down — no pointer (`actions.css`), `inert` (`cardds.js`): a net for a mistake, not a layout.
 - **Never write a sheet's height, and never a `.sheet-stage` inside a step.**
   State is a class (`sheet--peek` / `--half` / `--full`); the sheet is always
   the step's full height and only slides. `carddsSheetSet(sheet, state)` is
@@ -290,6 +288,23 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 - **The round pager** is `.action-bar--pager` (or an `.action-bar__tier--pager`)
   holding two `.icon-btn`s and nothing else: they stand at the two edges. The
   step that commits still goes back to one wide button (rule 3).
+- **BaseContent that moves** (Lh 2026-09-20) — two ways, never both on one screen:
+  - *Pages of words:* `.step > .pages > .base-content` (one `aria-current="step"`, the rest `inert`) — every page
+    one height, the round pager turns them (`slideTo()`), the words slide like a page. No sheet there.
+  - *Called sheets:* the base offers WAYS IN — sign in · new phone · join — as buttons (`.cta-pack`), each naming a
+    sheet: `<button aria-controls="signin">` … `<article id="signin" class="card sheet sheet--away" inert
+    data-sheet-states="peek full">`. Each sheet holds that way's WHOLE form and its own submit on its foot, leading
+    to the next page; the base carries no control and the screen no bar. `.sheet--away` = not on the screen (slid
+    out, hidden once gone). Nothing waits at peek. A tap raises its sheet to full and sends any other away; the
+    handle takes it down to peek and never further — the words and the other buttons are back in reach (the step
+    publishes `--sheet-room`, the peek strip, so they scroll clear of it); the same button raises it from peek to full.
+    **Never a form taken apart** — one sheet per field, a "send" left on the base: a form lives whole in ONE sheet.
+    Fixture `tests/fixtures/calls.html`, tests `tests/calls.spec.js`, stories `Step · Walks` / `Step · Calls`.
+- **A pager turns pages of words, never a screen with a sheet** (Lh 2026-09-20). A
+  sheet means this screen has work that cannot be walked past: no ← →, no bar at all — the sheet's
+  own foot finishes it. Should a pager meet a sheet anyway it stands
+  down while the sheet is on the screen, a peeking one included: dimmed, no pointer
+  (`actions.css`), `inert` (`cardds.js`).
 
 ## Files
 

package/cardds.js

@@ -207,16 +207,19 @@ function carddsSheetStates(sheet) {
 }
 
 function carddsSheetState(sheet) {
+  if (sheet.classList.contains('sheet--away')) return 'away'; // a called sheet not on the screen — a state to set, never one to snap or tap to
   return CARDDS_SHEET_STATES.find(s => sheet.classList.contains('sheet--' + s)) ?? 'half'; // the CSS default
 }
 
 function carddsSheetSet(sheet, state) {
-  if (!CARDDS_SHEET_STATES.includes(state)) return;
+  if (state !== 'away' && !CARDDS_SHEET_STATES.includes(state)) return;
   const was = carddsSheetState(sheet);
-  CARDDS_SHEET_STATES.forEach(s => sheet.classList.toggle('sheet--' + s, s === state));
+  [...CARDDS_SHEET_STATES, 'away'].forEach(s => sheet.classList.toggle('sheet--' + s, s === state));
+  sheet.inert = state === 'away';
   /* 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;
+  const rests = s => s !== 'peek' && s !== 'away';
+  const home = rests(state) ? state : rests(was) ? was : null;
   if (home) sheet.dataset.sheetHome = home;
   if (was !== state) sheet.dispatchEvent(new CustomEvent('cardds:sheet', { bubbles: true, detail: { state } }));
 }
@@ -375,7 +378,9 @@ function carddsSheetReveal(el, atLeast) {
   const box = sheet.parentElement.getBoundingClientRect(); // the box that clips it: .step or .sheet-stage
   const vv = window.visualViewport;
   const cut = vv ? Math.min(box.bottom, vv.offsetTop + vv.height) : box.bottom;
-  const need = el.getBoundingClientRect().height;
+  const foot = sheet.querySelector(':scope > .card__foot'); // the sheet's own button stands on the cut (sheet.css): the control has to clear it too
+  const button = foot?.firstElementChild; // the foot is a layer as tall as the sheet: what the control must clear is its strip
+  const need = (el.closest('.field') ?? el).getBoundingClientRect().height + (button ? box.bottom - button.getBoundingClientRect().top : 0); // from the button's top to the box's bottom edge, where it stands
   let to = states[states.length - 1];
   for (let i = from; i < states.length; i++) {
     if (cut - (restTop + stops[states[i]] + bodyTop) >= need) { to = states[i]; break; }
@@ -414,3 +419,56 @@ document.addEventListener('click', e => {
     stage.dispatchEvent(new CustomEvent('cardds:modal', { bubbles: true, detail: { answer: btn.dataset.answer ?? null } }));
   });
 });
+
+/* ---- called sheets (sheet.css): a button in a step's words names a sheet with aria-controls ----
+   (The base offers ways in — sign in · new phone · join — each sheet holds that way's whole form and
+   its own submit on its foot.) A tap on it sends every other sheet of that step away and raises its own to the top state it snaps
+   to (full) — from away, and from peek alike. The step then publishes --sheet-room, the strip the
+   sheet keeps at peek, so the words can scroll their buttons clear of it (step.css); the buttons say
+   aria-expanded. */
+function carddsSheetCall(sheet) {
+  const step = sheet.parentElement;
+  step.querySelectorAll(':scope > .sheet').forEach(s => { if (s !== sheet && carddsSheetState(s) !== 'away') carddsSheetSet(s, 'away'); });
+  const states = carddsSheetStates(sheet);
+  const top = states.includes('full') ? 'full' : states[states.length - 1];
+  const was = carddsSheetState(sheet);
+  if (was !== top) carddsSheetSet(sheet, top);
+  if (was === 'away') sheet.querySelector(':scope > .sheet__handle')?.focus({ preventScroll: true });
+}
+function carddsStepSync(step) {
+  const callers = [...step.querySelectorAll('[aria-controls]')].filter(b => document.getElementById(b.getAttribute('aria-controls'))?.matches('.step > .sheet'));
+  if (!callers.length) return; // a plain step: one sheet, nothing calls it, nothing to publish
+  const on = [...step.querySelectorAll(':scope > .sheet')].find(s => carddsSheetState(s) !== 'away');
+  if (on) step.style.setProperty('--sheet-room', getComputedStyle(on).getPropertyValue('--sheet-peek')); // registered: reads back in px
+  else step.style.removeProperty('--sheet-room');
+  callers.forEach(b => b.setAttribute('aria-expanded', String(carddsSheetState(document.getElementById(b.getAttribute('aria-controls'))) !== 'away')));
+}
+document.addEventListener('click', e => {
+  const caller = e.target.closest('[aria-controls]');
+  const sheet = caller && document.getElementById(caller.getAttribute('aria-controls'));
+  if (sheet && sheet.matches('.step > .sheet')) carddsSheetCall(sheet);
+});
+document.addEventListener('cardds:sheet', e => { const step = e.target.closest?.('.step'); if (step) carddsStepSync(step); });
+
+/* ---- bar guard: a bar is the base's, never in front of a sheet (actions.css, Lh 2026-09-20) ----
+   A sheet on the screen covers the bar and CSS takes the pointer away; `inert` takes the keyboard and
+   the accessibility tree too. Re-checked when a sheet changes state and when the page changes. */
+function carddsPagerGuard() {
+  document.querySelectorAll('.action-bar').forEach((bar) => {
+    const host = bar.parentElement;
+    bar.inert = !!(host && host.querySelector('.step > .sheet:not(.sheet--away)'));
+  });
+}
+if (typeof document !== 'undefined') {
+  document.addEventListener('cardds:sheet', carddsPagerGuard);
+  const start = () => {
+    carddsPagerGuard();
+    let queued = false;
+    new MutationObserver(() => {
+      if (queued) return;
+      queued = true;
+      requestAnimationFrame(() => { queued = false; carddsPagerGuard(); });
+    }).observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });
+  };
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start); else start();
+}

package/css/actions.css

@@ -239,6 +239,14 @@
      <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
    </div>   — or the same two in an .action-bar__tier--pager under a control  */
 .action-bar--pager { align-items: center; }
+/* The bar belongs to the BASE (Lh, 2026-09-20): it is the move of a page of words — a pager turning
+   them, or one wide button. It is never in front of a sheet: a sheet that is on the screen covers it
+   (step.css, "layers"), a peeking one included, and the button that finishes a sheet is the sheet's own
+   foot (sheet.css). So a pager never works beside a sheet — that screen has work that cannot be walked
+   past — and neither does any other bar: while a sheet is on (only .sheet--away, a sheet not called yet,
+   is not), the bar takes no pointer here and cardds.js makes it inert, so the keyboard cannot reach what
+   the eye cannot see. */
+:has(.step > .sheet:not(.sheet--away)) > .action-bar { pointer-events: none; }
 /* the page dots: under the card in a .screen__centre group; tight gaps */
 .pager__at { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: var(--sp-1); }
 .pager__at > * {

package/css/card.css

@@ -209,7 +209,7 @@
    and updates inside it; a browser without them (the floor: Chrome 105 / iOS 16)
    simply switches. Only the card is named; the rest of the page must not
    cross-fade. */
-.screen__centre > .card, .pages > .card[aria-current] { view-transition-name: centre-card; }
+.screen__centre > .card, .pages > [aria-current] { view-transition-name: centre-card; }
 
 /* ---- pages: the cards of a walk, all one height ----
    A sequence the member walks (an introduction) reads steadier when every card
@@ -223,8 +223,14 @@
      <article class="card" inert>…</article>
    </div><div class="pager__at">…</div></div> */
 .pages { display: grid; }
-.pages > .card { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
-.pages > .card[inert] { visibility: hidden; }
+.pages > :is(.card, .base-content) { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
+.pages > [inert] { visibility: hidden; }
+/* pages of WORDS (Lh, 2026-09-20): the same walk with .base-content pages, on the base — in a .step the
+   .pages is the reading block (step.css), the round pager in the bar turns it, the same slideTo().
+   <section class="step"><div class="pages">
+     <section class="base-content" aria-current="step">…</section>
+     <section class="base-content" inert>…</section>
+   </div></section> <div class="action-bar action-bar--pager">← →</div> */
 ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
 ::view-transition-old(centre-card), ::view-transition-new(centre-card) {
   animation-duration: var(--motion-slide);

package/css/sheet.css

@@ -88,6 +88,19 @@
 .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)); }
+/* ---- called sheets (Lh, 2026-09-20): a .step whose .base-content has buttons that each CALL a sheet ----
+   .sheet--away = not on the screen: slid all the way out (translate, like every state — the material never
+   changes), and hidden once it has left so its shadow does not lie on the step's bottom edge; write it
+   with `inert`. A button names its sheet — <button aria-controls="when"> … <article id="when" class="card
+   sheet sheet--away" inert data-sheet-states="peek full"> — and cardds.js does the rest: a tap slides that
+   sheet up to full and sends any other one away; the handle takes it down to peek, never further, so the
+   words and the other buttons are back in reach; the same button again raises it from peek to full.
+   Nothing waits at peek before the first call. No bar on such a screen (actions.css).
+   WHAT IT IS FOR: the base offers WAYS IN — sign in · new phone · join — and each button calls a sheet
+   that holds that way's WHOLE form, its submit on the sheet's foot, leading to the next page. The base
+   carries no control. It is NOT for a form taken apart — one sheet per field, a "send" left on the base:
+   a form lives whole in one sheet. */
+.sheet--away { --_y: 100%; --_cover: var(--_box); visibility: hidden; transition: translate var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
 .sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */
 
 /* the body — everything under the head, the one thing in a sheet that
@@ -113,6 +126,31 @@
      cut is a share of the SHEET's height, not of the body's. */
   scroll-padding-bottom: var(--_cover);
 }
+/* ---- the sheet's foot: the button that FINISHES the sheet, on the sheet (Lh, 2026-09-20) ----
+   A screen with a sheet has no bar in front of it: the button that completes what the sheet asks — the
+   page's conclusion — is a .card__foot, the sheet's last child, on the sheet's own material. The sheet is
+   full height at every state, so its real bottom edge is under the cut unless it stands at full. So the
+   foot is a layer as tall as the sheet, its buttons at its bottom, slid UP by the very share the sheet
+   slid down (--_y, + the drag): the two cancel, and the buttons stand on the box's bottom edge at half,
+   3q and full alike while the sheet slides behind them. A percentage of the same height on both — not a
+   length — so a box that resizes (the keyboard) moves them as one, with nothing to catch up. The layer
+   takes no taps, its buttons do; the strip behind them is the sheet's ground, --_foot tall, and the body
+   stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
+   One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
+.sheet { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); }
+.sheet > .card__foot {
+  position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
+  align-items: end;
+  padding: 0 var(--card-pad) var(--card-pad);
+  background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
+  pointer-events: none;
+  translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
+  transition: translate var(--motion-sheet) ease, opacity var(--motion-sheet) ease, visibility 0s;
+}
+.sheet > .card__foot > * { pointer-events: auto; }
+.sheet:has(> .card__foot) > .sheet__body { margin-bottom: calc(var(--_foot) - var(--card-pad)); } /* the body stops above the strip (the card's own padding is the rest) */
+.sheet.is-dragging > .card__foot { transition: none; }
+:is(.sheet--peek, .sheet--away) > .card__foot { opacity: 0; visibility: hidden; transition: translate var(--motion-sheet) ease, opacity var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
 .sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
 .sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: var(--card-pad); }
 

package/css/step.css

@@ -1,14 +1,16 @@
 /* ============================================================
    cardds/step.css — .step: one screen, one task.
    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.
+   step asks for it (a sheet, sheet.css). The move: a page of words has
+   an .action-bar (actions.css) OUTSIDE the step, below it — the base's;
+   a step with a sheet has none: the sheet's own .card__foot finishes it
+   (see "LAYERS" below).
 
    <section class="step">
      <section class="base-content">…the words…</section>               ← first
-     <article class="card sheet sheet--half">…the controls…</article>  ← last, optional
+     <article class="card sheet sheet--half">…the controls… <div class="card__foot">…</div></article>  ← last, optional
    </section>
-   <div class="action-bar">…</div>
+   <div class="action-bar">…</div>   ← only when there is no sheet
 
    The step is the box the sheet slides in. It fills the screen
    column between the top bar's reserve (.screen already pads for
@@ -58,6 +60,10 @@
    bar. Any parent that hosts the bar counts — <body>, an app shell, a demo
    frame — the bar is fixed to the viewport wherever it sits. */
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
+/* LAYERS (Lh, 2026-09-20): the base, then the sheet over it, then the top bar. A bar is the BASE's — the
+   move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .card__foot
+   (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. Should a bar be written
+   beside a sheet anyway it stands down (actions.css + cardds.js) — a net for a mistake, not a layout. */
 
 /* the reading block: a .base-content (base.css) — the same words-on-the-base
    block as anywhere else (it was .step__card, and a .card before 2026-09-16;
@@ -67,14 +73,23 @@
    gets 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 > .base-content {
+.step > .base-content, .step > .pages > .base-content {
   --card-pad: 0rem;              /* published for .bleed: nothing to cancel */
   --card-gap: var(--sp-4);
   gap: var(--card-gap);
   padding-block: 0;              /* --_lead carries the top; the bar's room is the step's */
   align-content: start;
   color: var(--on-surface);
+}
+/* the reading block is the .base-content — or the .pages that holds several of them, a walk of words
+   (card.css). --sheet-room: the strip a CALLED sheet keeps at peek (sheet.css, "called sheets"), published
+   on the step by cardds.js while one is on the screen, so the buttons under it can scroll clear of it;
+   nothing without one. */
+.step > :is(.base-content, .pages) {
+  padding-bottom: var(--sheet-room, 0rem);
   flex: 0 1 auto;
+}
+.step > :is(.base-content, .pages) {
   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 */
   overflow-y: auto;

package/dist/cardds.css

@@ -724,7 +724,7 @@ button { font: inherit; cursor: pointer; }
    and updates inside it; a browser without them (the floor: Chrome 105 / iOS 16)
    simply switches. Only the card is named; the rest of the page must not
    cross-fade. */
-.screen__centre > .card, .pages > .card[aria-current] { view-transition-name: centre-card; }
+.screen__centre > .card, .pages > [aria-current] { view-transition-name: centre-card; }
 
 /* ---- pages: the cards of a walk, all one height ----
    A sequence the member walks (an introduction) reads steadier when every card
@@ -738,8 +738,14 @@ button { font: inherit; cursor: pointer; }
      <article class="card" inert>…</article>
    </div><div class="pager__at">…</div></div> */
 .pages { display: grid; }
-.pages > .card { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
-.pages > .card[inert] { visibility: hidden; }
+.pages > :is(.card, .base-content) { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
+.pages > [inert] { visibility: hidden; }
+/* pages of WORDS (Lh, 2026-09-20): the same walk with .base-content pages, on the base — in a .step the
+   .pages is the reading block (step.css), the round pager in the bar turns it, the same slideTo().
+   <section class="step"><div class="pages">
+     <section class="base-content" aria-current="step">…</section>
+     <section class="base-content" inert>…</section>
+   </div></section> <div class="action-bar action-bar--pager">← →</div> */
 ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
 ::view-transition-old(centre-card), ::view-transition-new(centre-card) {
   animation-duration: var(--motion-slide);
@@ -1159,6 +1165,19 @@ button { font: inherit; cursor: pointer; }
 .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)); }
+/* ---- called sheets (Lh, 2026-09-20): a .step whose .base-content has buttons that each CALL a sheet ----
+   .sheet--away = not on the screen: slid all the way out (translate, like every state — the material never
+   changes), and hidden once it has left so its shadow does not lie on the step's bottom edge; write it
+   with `inert`. A button names its sheet — <button aria-controls="when"> … <article id="when" class="card
+   sheet sheet--away" inert data-sheet-states="peek full"> — and cardds.js does the rest: a tap slides that
+   sheet up to full and sends any other one away; the handle takes it down to peek, never further, so the
+   words and the other buttons are back in reach; the same button again raises it from peek to full.
+   Nothing waits at peek before the first call. No bar on such a screen (actions.css).
+   WHAT IT IS FOR: the base offers WAYS IN — sign in · new phone · join — and each button calls a sheet
+   that holds that way's WHOLE form, its submit on the sheet's foot, leading to the next page. The base
+   carries no control. It is NOT for a form taken apart — one sheet per field, a "send" left on the base:
+   a form lives whole in one sheet. */
+.sheet--away { --_y: 100%; --_cover: var(--_box); visibility: hidden; transition: translate var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
 .sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */
 
 /* the body — everything under the head, the one thing in a sheet that
@@ -1184,6 +1203,31 @@ button { font: inherit; cursor: pointer; }
      cut is a share of the SHEET's height, not of the body's. */
   scroll-padding-bottom: var(--_cover);
 }
+/* ---- the sheet's foot: the button that FINISHES the sheet, on the sheet (Lh, 2026-09-20) ----
+   A screen with a sheet has no bar in front of it: the button that completes what the sheet asks — the
+   page's conclusion — is a .card__foot, the sheet's last child, on the sheet's own material. The sheet is
+   full height at every state, so its real bottom edge is under the cut unless it stands at full. So the
+   foot is a layer as tall as the sheet, its buttons at its bottom, slid UP by the very share the sheet
+   slid down (--_y, + the drag): the two cancel, and the buttons stand on the box's bottom edge at half,
+   3q and full alike while the sheet slides behind them. A percentage of the same height on both — not a
+   length — so a box that resizes (the keyboard) moves them as one, with nothing to catch up. The layer
+   takes no taps, its buttons do; the strip behind them is the sheet's ground, --_foot tall, and the body
+   stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
+   One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
+.sheet { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); }
+.sheet > .card__foot {
+  position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
+  align-items: end;
+  padding: 0 var(--card-pad) var(--card-pad);
+  background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
+  pointer-events: none;
+  translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
+  transition: translate var(--motion-sheet) ease, opacity var(--motion-sheet) ease, visibility 0s;
+}
+.sheet > .card__foot > * { pointer-events: auto; }
+.sheet:has(> .card__foot) > .sheet__body { margin-bottom: calc(var(--_foot) - var(--card-pad)); } /* the body stops above the strip (the card's own padding is the rest) */
+.sheet.is-dragging > .card__foot { transition: none; }
+:is(.sheet--peek, .sheet--away) > .card__foot { opacity: 0; visibility: hidden; transition: translate var(--motion-sheet) ease, opacity var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
 .sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
 .sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: var(--card-pad); }
 
@@ -1375,14 +1419,16 @@ button { font: inherit; cursor: pointer; }
 /* ============================================================
    cardds/step.css — .step: one screen, one task.
    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.
+   step asks for it (a sheet, sheet.css). The move: a page of words has
+   an .action-bar (actions.css) OUTSIDE the step, below it — the base's;
+   a step with a sheet has none: the sheet's own .card__foot finishes it
+   (see "LAYERS" below).
 
    <section class="step">
      <section class="base-content">…the words…</section>               ← first
-     <article class="card sheet sheet--half">…the controls…</article>  ← last, optional
+     <article class="card sheet sheet--half">…the controls… <div class="card__foot">…</div></article>  ← last, optional
    </section>
-   <div class="action-bar">…</div>
+   <div class="action-bar">…</div>   ← only when there is no sheet
 
    The step is the box the sheet slides in. It fills the screen
    column between the top bar's reserve (.screen already pads for
@@ -1432,6 +1478,10 @@ button { font: inherit; cursor: pointer; }
    bar. Any parent that hosts the bar counts — <body>, an app shell, a demo
    frame — the bar is fixed to the viewport wherever it sits. */
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
+/* LAYERS (Lh, 2026-09-20): the base, then the sheet over it, then the top bar. A bar is the BASE's — the
+   move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .card__foot
+   (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. Should a bar be written
+   beside a sheet anyway it stands down (actions.css + cardds.js) — a net for a mistake, not a layout. */
 
 /* the reading block: a .base-content (base.css) — the same words-on-the-base
    block as anywhere else (it was .step__card, and a .card before 2026-09-16;
@@ -1441,14 +1491,23 @@ button { font: inherit; cursor: pointer; }
    gets 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 > .base-content {
+.step > .base-content, .step > .pages > .base-content {
   --card-pad: 0rem;              /* published for .bleed: nothing to cancel */
   --card-gap: var(--sp-4);
   gap: var(--card-gap);
   padding-block: 0;              /* --_lead carries the top; the bar's room is the step's */
   align-content: start;
   color: var(--on-surface);
+}
+/* the reading block is the .base-content — or the .pages that holds several of them, a walk of words
+   (card.css). --sheet-room: the strip a CALLED sheet keeps at peek (sheet.css, "called sheets"), published
+   on the step by cardds.js while one is on the screen, so the buttons under it can scroll clear of it;
+   nothing without one. */
+.step > :is(.base-content, .pages) {
+  padding-bottom: var(--sheet-room, 0rem);
   flex: 0 1 auto;
+}
+.step > :is(.base-content, .pages) {
   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 */
   overflow-y: auto;
@@ -1820,6 +1879,14 @@ button { font: inherit; cursor: pointer; }
      <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
    </div>   — or the same two in an .action-bar__tier--pager under a control  */
 .action-bar--pager { align-items: center; }
+/* The bar belongs to the BASE (Lh, 2026-09-20): it is the move of a page of words — a pager turning
+   them, or one wide button. It is never in front of a sheet: a sheet that is on the screen covers it
+   (step.css, "layers"), a peeking one included, and the button that finishes a sheet is the sheet's own
+   foot (sheet.css). So a pager never works beside a sheet — that screen has work that cannot be walked
+   past — and neither does any other bar: while a sheet is on (only .sheet--away, a sheet not called yet,
+   is not), the bar takes no pointer here and cardds.js makes it inert, so the keyboard cannot reach what
+   the eye cannot see. */
+:has(.step > .sheet:not(.sheet--away)) > .action-bar { pointer-events: none; }
 /* the page dots: under the card in a .screen__centre group; tight gaps */
 .pager__at { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: var(--sp-1); }
 .pager__at > * {

package/dist/scaffold/BaseContent.d.ts

@@ -5,10 +5,13 @@ export interface BaseContentProps extends ComponentPropsWithoutRef<'section'> {
  * BaseContent — words straight on the base, no card around them: an overline, a heading, a paragraph,
  * maybe a CtaPack. Content has three homes (Card · Sheet · the base); this is the third one, named.
  * Was Section (and, inside a Step, StepCard) until 2026-09-16 — one block, one name.
- * In a Step it is the reading block (first child; the buttons go to the ActionBar, not a CtaPack).
+ * In a Step it is the reading block (first child; the step's MOVE goes to the ActionBar, never here). It can move two ways
+ * (Lh 2026-09-20): several of them in a `Pages` = a walk of words the round pager turns (slideTo); or a CtaPack of CALLERS —
+ * `Btn aria-controls={a Sheet's id}` — WAYS IN (sign in · new phone · join), each calling a `Sheet state="away"` that holds that way's
+ * whole form and its submit. The base itself carries no control; a form is never taken apart across it. Never both: a pager never works beside a sheet.
  */
 export declare function BaseContent({ className, ...rest }: BaseContentProps): import("react").JSX.Element;
 export interface CtaPackProps extends ComponentPropsWithoutRef<'div'> {
 }
-/** CtaPack — the buttons under a BaseContent's words, wrapping on one line. Outside a Step only: a Step's move is its ActionBar. */
+/** CtaPack — the buttons under a BaseContent's words, wrapping on one line. In a Step it holds CALLERS only (buttons that call a sheet, `aria-controls`) — the Step's move is its ActionBar. */
 export declare function CtaPack({ className, ...rest }: CtaPackProps): import("react").JSX.Element;

package/dist/scaffold/BaseContent.js

@@ -4,12 +4,15 @@ import { cx } from '../cx.js';
  * BaseContent — words straight on the base, no card around them: an overline, a heading, a paragraph,
  * maybe a CtaPack. Content has three homes (Card · Sheet · the base); this is the third one, named.
  * Was Section (and, inside a Step, StepCard) until 2026-09-16 — one block, one name.
- * In a Step it is the reading block (first child; the buttons go to the ActionBar, not a CtaPack).
+ * In a Step it is the reading block (first child; the step's MOVE goes to the ActionBar, never here). It can move two ways
+ * (Lh 2026-09-20): several of them in a `Pages` = a walk of words the round pager turns (slideTo); or a CtaPack of CALLERS —
+ * `Btn aria-controls={a Sheet's id}` — WAYS IN (sign in · new phone · join), each calling a `Sheet state="away"` that holds that way's
+ * whole form and its submit. The base itself carries no control; a form is never taken apart across it. Never both: a pager never works beside a sheet.
  */
 export function BaseContent({ className, ...rest }) {
     return _jsx("section", { className: cx('base-content', className), ...rest });
 }
-/** CtaPack — the buttons under a BaseContent's words, wrapping on one line. Outside a Step only: a Step's move is its ActionBar. */
+/** CtaPack — the buttons under a BaseContent's words, wrapping on one line. In a Step it holds CALLERS only (buttons that call a sheet, `aria-controls`) — the Step's move is its ActionBar. */
 export function CtaPack({ className, ...rest }) {
     return _jsx("div", { className: cx('cta-pack', className), ...rest });
 }

package/dist/scaffold/Centre.d.ts

@@ -14,9 +14,11 @@ export declare function Centre({ className, ...rest }: CentreProps): import("rea
 export interface PagesProps extends ComponentPropsWithoutRef<'div'> {
 }
 /**
- * Pages — the cards of a walk, all one height: every Card is rendered, stacked in one cell as tall as the
+ * Pages — the pages of a walk, all one height: every page is rendered, stacked in one cell as tall as the
  * tallest at any text size. Give the current one `aria-current="step"` and every other one `inert`
- * (hidden in place, out of the tab order). Goes inside a Centre, above the PagerAt; turn with slideTo().
+ * (hidden in place, out of the tab order). Turn with slideTo().
+ * Pages of cards: `Card`s, inside a Centre, above the PagerAt. Pages of words: `BaseContent`s, as a Step's
+ * reading block (no Sheet on that screen — a pager never works beside one), the round pager in the ActionBar.
  */
 export declare function Pages({ className, ...rest }: PagesProps): import("react").JSX.Element;
 /** the direction a Centre's card slides: `next` — out to the left, the new one in from the right; `back` — the reverse */

package/dist/scaffold/Centre.js

@@ -14,9 +14,11 @@ export function Centre({ className, ...rest }) {
     return _jsx("div", { className: cx('screen__centre', className), ...rest });
 }
 /**
- * Pages — the cards of a walk, all one height: every Card is rendered, stacked in one cell as tall as the
+ * Pages — the pages of a walk, all one height: every page is rendered, stacked in one cell as tall as the
  * tallest at any text size. Give the current one `aria-current="step"` and every other one `inert`
- * (hidden in place, out of the tab order). Goes inside a Centre, above the PagerAt; turn with slideTo().
+ * (hidden in place, out of the tab order). Turn with slideTo().
+ * Pages of cards: `Card`s, inside a Centre, above the PagerAt. Pages of words: `BaseContent`s, as a Step's
+ * reading block (no Sheet on that screen — a pager never works beside one), the round pager in the ActionBar.
  */
 export function Pages({ className, ...rest }) {
     return _jsx("div", { className: cx('pages', className), ...rest });

package/dist/sheets/Sheet.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
-export type SheetState = 'peek' | 'half' | '3q' | 'full';
+export type SheetState = 'peek' | 'half' | '3q' | 'full' | 'away';
 export interface SheetProps extends ComponentPropsWithoutRef<'article'> {
-    /** how far the sheet slid: `peek` (handle + title row) · `half` (default) · `3q` (three quarters showing) · `full` (its top edge at the top bar) — a class, never a height. A tap on the handle toggles between this state and peek; a drag snaps to any of `states` */
+    /** how far the sheet slid: `peek` (handle + title row) · `half` (default) · `3q` (three quarters showing) · `full` (its top edge at the top bar) — a class, never a height. `away` = a CALLED sheet not on the screen yet (slid out, inert): a `Btn aria-controls={its id}` in the Step's BaseContent calls it up to full and sends any other away. A tap on the handle toggles between this state and peek; a drag snaps to any of `states` */
     state?: SheetState;
     /** floats above a footnote strip on a dim stage (bottom corners and border back) */
     raised?: boolean;
@@ -15,7 +15,10 @@ export interface SheetProps extends ComponentPropsWithoutRef<'article'> {
  * content cards). Always the full height of its box — a Step or a SheetStage — a state is only how far it slid.
  * Shape: handle · head (a CardHead, a SheetHead — or ONE label Row carrying a Check/Toggle, when the sheet's
  * whole ask is that switch and peek must show it) · SheetBody (the only part that scrolls). Written top-down.
- * Inside a Step it never carries the step's action (the ActionBar is the one move); its own buttons only on a
- * screen with no bar (the map sheet). This is the single sheet; the menu of stacked sheets is `SheetStack`.
+ * It FINISHES on itself: a `CardFoot` as its last child holds the one button that completes it — standing at the bottom at
+ * half / 3q / full, gone at peek. Never an ActionBar in front of a sheet (a bar is the base's). Nothing in the body commits
+ * on its own. Older note — its own buttons only on a
+ * screen with no bar (the map sheet). Called sheets: several `Sheet state="away" states="peek full"` in one Step, each with an `id` a
+ * button names — one on the screen at a time; never beside a pager. This is the single sheet; the menu of stacked sheets is `SheetStack`.
  */
 export declare function Sheet({ state, raised, handle, states, className, children, ...rest }: SheetProps): import("react").JSX.Element;

package/dist/sheets/Sheet.js

@@ -5,9 +5,12 @@ import { cx } from '../cx.js';
  * content cards). Always the full height of its box — a Step or a SheetStage — a state is only how far it slid.
  * Shape: handle · head (a CardHead, a SheetHead — or ONE label Row carrying a Check/Toggle, when the sheet's
  * whole ask is that switch and peek must show it) · SheetBody (the only part that scrolls). Written top-down.
- * Inside a Step it never carries the step's action (the ActionBar is the one move); its own buttons only on a
- * screen with no bar (the map sheet). This is the single sheet; the menu of stacked sheets is `SheetStack`.
+ * It FINISHES on itself: a `CardFoot` as its last child holds the one button that completes it — standing at the bottom at
+ * half / 3q / full, gone at peek. Never an ActionBar in front of a sheet (a bar is the base's). Nothing in the body commits
+ * on its own. Older note — its own buttons only on a
+ * screen with no bar (the map sheet). Called sheets: several `Sheet state="away" states="peek full"` in one Step, each with an `id` a
+ * button names — one on the screen at a time; never beside a pager. This is the single sheet; the menu of stacked sheets is `SheetStack`.
  */
 export function Sheet({ state = 'half', raised, handle = true, states, className, children, ...rest }) {
-    return (_jsxs("article", { className: cx('card sheet', `sheet--${state}`, raised && 'sheet--raised', className), "data-sheet-states": states, ...rest, children: [handle !== false && _jsx("button", { className: "sheet__handle", type: "button", "aria-label": typeof handle === 'string' ? handle : 'Resize' }), children] }));
+    return (_jsxs("article", { className: cx('card sheet', `sheet--${state}`, raised && 'sheet--raised', className), "data-sheet-states": states, inert: state === 'away' || undefined, ...rest, children: [handle !== false && _jsx("button", { className: "sheet__handle", type: "button", "aria-label": typeof handle === 'string' ? handle : 'Resize' }), children] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",
@@ -13,7 +13,6 @@
     "build": "node scripts/build-icons.mjs && tsc -p tsconfig.json && node scripts/flatten-css.mjs",
     "test": "playwright test",
     "validate:inbox": "node scripts/validate-inbox.mjs",
-    "mcp:verify": "cd mcp-server && npm run verify && npm run verify:http",
     "prepack": "npm run build"
   },
   "devDependencies": {