@usableapp/cardds 0.7.16 → 0.7.17

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
 
+## 0.7.17 — 2026-09-27
+
+Second refactor pass (what the first skipped). Most of it is internal; these can touch a screen:
+
+### Changed (may touch a screen)
+- `Banner` is controlled like every disclosure: `open` + `onOpenChange`, or `defaultOpen`. Before: `open` was the native attribute. `<Banner open>` meaning "start open" → `defaultOpen`.
+- A controlled component no longer asks for the value it already shows: tapping the picked day (`Calendar onSelect`), the picked dot (`Mood onChange`) calls nothing.
+- `FileBtn`: its file input is visually hidden instead of `hidden` — Tab reaches it, Enter/Space opens the picker, the button shows the focus ring.
+- `SheetStack` (tap): a head's title takes the keyboard's focus where a tap on it works (every title while none is open; the open one's while one is) — Enter/Space opens or folds.
+- peerDependencies: React `>=19` (components take `ref` as a prop; React 18 never worked).
+
+### Added
+- `Card` SLOTS (Lh 2026-09-27): `heading` · `caption` · `end` · `level` fill its head, `foot` · `footLink` its foot; the children are the content between — the card writes head first, foot last. `<CardHead>`/`<CardFoot>` as children still work (a head of its own shape); both at once warns. `<Card heading="…" foot={<Btn primary>Join</Btn>}>…</Card>` replaces a CardHead + CardFoot pair.
+- Tap answer for every tappable thing (the PRESS block, actions.css): a finger-sized control GIVES (`--press-scale`); a card-wide one — a row as a link/label, a Row `more` line, a Banner line, a card as a link, a Toggle with words — DIMS (`--press-dim` 0.6); a peeked stack sheet and a Postcard SHADE (`--press-shade` 0.93, so nothing behind shows through). New in it: Check, Toggle, Mood, Sheet handle, Avatar as a link/button, the Slider's knob, SheetSteps' step bar. A disabled control has no pointer, no press, and fades to `--off` (0.4); a label whose input is disabled too.
+- Tokens: `--press-dim`, `--press-shade`, `--off`, `--rest` (0.6, an unpicked choice), `--faint` (0.3, far dots, picker items), `--motion-quick` (0.2s: chevrons, the toggle, menus), `--z-bar` / `--z-fab` / `--z-top`.
+
+### Fixed
+- Enter in a SheetSteps field could open a `FileBtn`'s picker (a `label.btn` counted as the step's button).
+- The Toggle's height and knob gap were raw rem — now on `--tap-base` (same at the default).
+- The sheet's foot strip ignored the `--link-sm-min-h` knob; `.sheet-stage > .float-bar` defeated `--float-bar-pad-x`.
+- The Banner opens in 0.2s (was 0.25s — the one value that moved).
+
+### Internal
+- `src/state.ts`: `useControlled(value, initial, onChange)` now returns `[shown, request]` — the no-change guard, the own copy and the ask in one stable function (12 copies gone; the Sheet no longer rebuilt its ResizeObserver every render); `useDisclosure` (Row `more`, Banner); `watchSize` (5 ResizeObserver copies); `useLatest`. `Tone` type exported once. StackBack, Fab and the StackSheet tabs render through `IconBtn`.
+- CSS: `.card--3` muted words one rule; one zero-specificity button reset; one hidden-input rule; one scrollbar-hiding rule; dead `.dotgrid--stars` and float-bar padding rule gone; split rules merged; stale comments (cardds.js doing behaviour, bars outside the screen) rewritten.
+- Tests: `tests/helpers.js` (shared rect/near/tok/settle/story…); PIN + Modal flakes fixed with the page clock and finished animations; the knob probe focuses its own field. Fixtures lost ~500 lines nothing asserted (`stack.html` gone). `scripts/catalog.mjs` lost the dropped MCP server's code; `validate.mjs` accepts `.js` imports and `ComponentProps`. New scripts: `typecheck`, `snapshot:write`, `snapshot:check`.
+
 ## 0.7.16 — 2026-09-25
 
 Refactor + additions. Same props, same markup, same computed style on every story.

package/README.md

@@ -18,8 +18,8 @@ from props. 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
-the other way round).
+source of truth; every consuming project installs the npm package
+`@usableapp/cardds`, never the other way round).
 
 **Wireframe by default** — grayscale with visible outlines. Color is opt-in,
 lives only in one file, applied with one attribute. Two faces ship with it
@@ -42,12 +42,12 @@ 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), 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.
+Every behaviour is the component's own React code — the `Sheet`'s handle (tap, drag,
+keyboard) with the focus and on-screen-keyboard raises, the `SheetStack` opening and
+closing, the `Pin` auto-advance, the `Modal`'s leaving — each controlled like an input
+(`x` + `onXChange`, or `defaultX`). `src/index.ts` imports `cardds.js` for the environment
+only: the keyboard's height (`--kb`) and `.bleed`'s scrollbar. `Icon` inlines the 61
+symbols of `icons.svg` at build time, so no sprite file ships.
 
 **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.
@@ -160,7 +160,7 @@ the card is the material, the sheet is what it is in the stack.
   sixth would render at slot 0, on top of the first.
 - **Every head needs its own `.sheet-stack__back`** if the stack is `--tap`. It stays
   hidden until that sheet is open, then slides into a reserved header slot.
-- **No ids, no wiring.** `cardds.js` finds any `.sheet-stack--tap` on the page.
+- **No ids, no wiring.** `SheetStack` holds which sheet is open (`open` + `onOpenChange`, or `defaultOpen`).
 - **`.card-stack` is gone.** That was this component's first name and the wrong
   one — the members are sheets and the stack is the menu, not a list of cards.
   Never bring it back, not even as an alias.
@@ -355,6 +355,10 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   - **Foot** (`.card__foot`): the card's action buttons on one line. One
     button takes the width; up to four share it in even parts; from three
     on they drop their side padding so the labels keep the room.
+  - In React the head and the foot are the card's **slots**:
+    `<Card heading caption end foot footLink>` with the content as children —
+    the card writes the order (head first, foot last). A head of its own shape
+    is a `<CardHead>` child instead; never both (Lh 2026-09-27).
 - A page with **one feature and one CTA** (an install page, a single
   decision) may be contained in one card: head, the pitch, foot.
 - **A bottom sheet holds what the member acts on** — controls, or small
@@ -373,7 +377,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   same material — a stacked sheet is written as a `.card`, and the single
   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`.
+  retired.) See them live in the gallery: `Sheet`, `SheetStack`.
 - **A step is one screen, one task: `.step`.** What the member reads is
   words on the base (`.page` — the same block as anywhere on the base; it was `.step__card` until 2026-09-16); 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`, the screen's
@@ -385,8 +389,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   slides in: it starts where the top bar ends and ends where the bar's room
   begins. Nobody lays a step out by hand and nobody writes a
   sheet's height. In short: **member acts → card + sheet, member reads →
-  card.** Markup: *Step markup*. Demo: `sheet.html`, `elements.html` #ask,
-  `index.html` "step".
+  card.** Markup: *Step markup*. Live: the gallery's `Step` page.
 
 - **Where the centre is.** To the person holding a phone, the bottom fifth of
   the screen is the thumb's — the bar, the controls — so what is meant to be
@@ -395,7 +398,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   with one card and nothing else to read puts it there (`.card--centre`, the
   introduction screens); a splash puts its mark there.
 
-Demo: the *skeleton* block at the top of `elements.html`.
+Live: every screen in the gallery (`npm run dev`).
 
 ## Rules of the system
 
@@ -461,7 +464,7 @@ Demo: the *skeleton* block at the top of `elements.html`.
    get covered. Closing reverses it in two phases: the after-pack returns
    while the card drops into its slot, then the before-pack slides back up
    from behind. Slots, offsets and paint order are all CSS `:nth-child`, so
-   a stack renders correctly with no script; `cardds.js` only toggles the
+   a stack renders correctly with no script; `SheetStack` only sets the
    state classes. Don't reintroduce height, `display` or z-index switching
    here — every past bug in this animation came from exactly that.
 7. **Everything shrinks to 320px.** `.screen > *`, `.card` and `.card > *`
@@ -488,14 +491,14 @@ Demo: the *skeleton* block at the top of `elements.html`.
    revealed above the cut, not under it. `--sheet-half` is a share of the
    sheet's height (`0.5`), one number serving both the translate and that
    padding. Two boxes hold sheets and the states
-   mean the same in both: `.step` (an app screen, the bar outside — Anatomy)
+   mean the same in both: `.step` (an app screen — Anatomy)
    and `.sheet-stage` (a page-level overlay: a sheet over a map, the dim page
    stage `--dim` + `.modal` = `__lift` + `__drawer` — a sheet always stands on the floor, never raised).
    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
-   `tokens.css`, which is how `cardds.js` reads them to snap a drag. Demo:
-   `sheet.html`, `elements.html`.
+   `tokens.css`, which is how `Sheet` reads them to snap a drag. Live: the
+   gallery's `Sheet` page.
 9. **Elements inside a card are frameless.** Rows, key-values, pickers,
    gauges and tiles never draw a second card boundary; hairlines
    (`--hairline`) separate rows, `--outline` keeps controls legible on
@@ -557,7 +560,7 @@ That file is where a project's look lives. Bases and roles:
 | what | tokens | moves |
 |---|---|---|
 | room **between** things | `--sp-base` (0.25rem = 4) | every `--sp-N` = base × N → paddings, gaps, the screen's inset, the bar's reserve, the sheet's peek |
-| type | `--fs-base` (1rem = 16) | every `--fs-*`, `--badge`, `--icon-xs` |
+| type | `--fs-base` (1.375rem = 22 — the body) | every `--fs-*`, `--badge`, `--icon-xs` |
 | corners | `--r-base` (1rem = 16) | every `--r-*`; `0` = square. `--r-chip` stays fully round |
 | the size **of** things | `--tap-base` (3rem = 48) | `--tap*`, `--btn-h`, `--chip-h`, `--bar-h`, `--header-h`, `--fab`, `--icon*`, `--avatar*`, `--dot*`, `--ring*`, `--tile-*`. `--tap*` never under `--tap-floor` (44px) |
 | faces | `--font-ui`, `--font-display` | |
@@ -612,8 +615,8 @@ Copy any block in `palette.css`, rename, retune:
 
 Every length token resolves to rem — a multiplier × one of four rem bases
 (`--sp-4` = `--sp-base` × 4 = 1rem, `--tap` = `--tap-base` = 3rem, `--r-card` =
-`--r-base` × 2, `--fs-h1` = `--fs-base` × 1.75; see "A project's theme") — so the
-whole system still resizes from one number: the root font size. `base.css` keeps it at `100%` (the user's text-size setting, 16px by
+`--r-base` × 2, `--fs-h1` = `--fs-base` × 1.2; see "A project's theme") — so the
+whole system scales with the root font size. `base.css` keeps it at `100%` (the browser's setting, 16px by
 default) and steps narrow phones (≤360px) to `93.75%`, which keeps the 25rem
 column, its 48px taps and its type in proportion on 320–360 screens. Only
 `--border-w`, `--rule-w` and the focus ring stay in px, so edges stay crisp.

package/cardds.css

@@ -2,7 +2,7 @@
 @import url("css/fonts.css");    /* the two faces: PK Nonthaburi (body), FC Pride (display) */
 @import url("css/tokens.css");   /* structure + wireframe defaults */
 @import url("css/palette.css");  /* color settings — the file you tune */
-@import url("css/base.css");     /* reset, surface, type levels, section */
+@import url("css/base.css");     /* reset, surface, type levels, page */
 @import url("css/card.css");     /* card boundary + list variants */
 @import url("css/stack.css");    /* sheet stack: .sheet-stack — the menu, sheets stacked, heads peek, tap opens */
 @import url("css/sheet.css");    /* sheet single: .sheet — one card as a bottom sheet, peek / half / full */
@@ -12,7 +12,7 @@
 @import url("css/actions.css");  /* topbar, chips, buttons, CTA pack */
 @import url("css/numbers.css");  /* ring, track, band, dot grid, picker, badge, bars */
 @import url("css/people.css");   /* avatar, avatar stack, chooser row */
-@import url("css/choice.css");   /* check, toggle, toggle chip, chip grid, days, calendar, mood, pin, composer */
+@import url("css/choice.css");   /* check, toggle, chip grid, days, calendar, mood, pin, composer */
 @import url("css/lists.css");    /* row, rows, key-value, kv grid, timeline, legend, link */
 @import url("css/media.css");    /* cover card, quote, tile grid, fold, mosaic, wave */
-@import url("css/layover.css");  /* ask drawer, popover menu, banner, float bar, callout, deck */
+@import url("css/layover.css");  /* ask drawer, popover menu, banner, float bar, callout */

package/css/actions.css

@@ -55,12 +55,12 @@
   max-width: var(--screen-w);
   margin-inline: auto;
   padding-inline: var(--appbar-pad-x, var(--screen-pad)); /* fixed + full-bleed: the screen's own inset, so the bar's contents line up with the title bar under it (Lh 2026-09-15) */
-  z-index: 40; /* topmost — card animations never cover it */
+  z-index: var(--z-top); /* topmost — card animations never cover it */
   background: var(--appbar-bg, var(--surface)); /* solid: sliding cards never show through */
 }
 /* fixed, so it covers the top of the screen it sits in — reserve its height
-   there, from the same token, the way the bottom bars reserve theirs. The
-   breathing under it is published: a .step cancels it to touch the bar. */
+   there, from the same header-h token. The breathing under it is published:
+   a .step cancels it to touch the bar. */
 .screen:has(> .appbar) { --header-gap: var(--sp-2); padding-top: calc(var(--header-h) + var(--header-gap)); }
 .appbar__brand { flex: 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
 .appbar__text { display: grid; min-width: 0; flex: 1; } /* pushes trailing button to the right edge */
@@ -68,11 +68,9 @@
 .appbar__who {
   flex: 1; min-width: 0; min-height: var(--tap);
   display: flex; align-items: center; gap: var(--sp-2);
-  padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
+  margin: 0; text-align: start;
   border-radius: var(--appbar-who-radius, var(--r-chip));
-  -webkit-tap-highlight-color: transparent;
 }
-.appbar__who:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 .appbar__title, .appbar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } /* clipped lines: room for Thai marks */
 .appbar__title { font: var(--type-label); }
 .appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
@@ -96,7 +94,7 @@
 .icon-btn--invert { background: var(--icon-btn-invert-bg, var(--accent)); color: var(--icon-btn-invert-ink, var(--on-accent)); border-color: transparent; }
 .icon-btn--sm { width: var(--icon-btn-sm-size, var(--tap-sm)); height: var(--icon-btn-sm-size, var(--tap-sm)); font-size: var(--fs-title); }
 /* fab: the square floating action, bottom-right of a stage or screen */
-.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3)); box-shadow: var(--shadow-float); z-index: 31; }
+.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3)); box-shadow: var(--shadow-float); z-index: var(--z-fab); }
 
 /* ---- buttons ---- */
 .btn {
@@ -129,7 +127,6 @@
 /* disabled keeps the slot — a control that vanishes moves everything else,
    and a pager whose "previous" disappeared on page one would shift the bar
    under the thumb on every page */
-:is(.btn, .icon-btn):disabled { opacity: 0.4; cursor: default; }
 /* a row of buttons sharing the width (twin CTAs inside a card) */
 .btn-row { display: flex; gap: var(--sp-2); }
 .btn-row > .btn { flex: 1; min-width: 0; }
@@ -169,7 +166,7 @@
 /* ---- dropdown: the standard for every select — a pill trigger + .menu popover ----
    <div class="dropdown"><button class="dropdown__btn" popovertarget="f1"><span class="dropdown__label">this week</span><svg class="icon icon--xs"><use href="icons.svg#chevron-down"/></svg></button>
      <div class="menu" id="f1" popover><button class="menu__item" aria-current="true" data-value="week">this week</button>…</div></div>
-   cardds.js copies the picked item into the label and fires "change" on .dropdown.
+   The Dropdown component copies the picked item into the label and reports the change.
    .menu (layover.css) draws the panel; anchor positioning pins it under the trigger. */
 .dropdown { position: relative; min-width: 0; display: inline-grid; }
 .dropdown__btn {
@@ -188,12 +185,11 @@
   font: var(--type-label);
   font-size: var(--fs-body);
   text-align: left;
-  cursor: pointer;
 }
 /* muted: the value is still the default (README 13) */
 .dropdown--muted .dropdown__btn { color: var(--dropdown-muted-ink, var(--card-muted)); }
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dropdown__btn > .icon { transition: rotate 0.2s ease; }
+.dropdown__btn > .icon { transition: rotate var(--motion-quick) ease; }
 .dropdown:has(.menu:popover-open) .dropdown__btn > .icon { rotate: 180deg; }
 .dropdown:has(.menu.\:popover-open) .dropdown__btn > .icon { rotate: 180deg; } /* the polyfill's open (layover.css) */
 .dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards (= .menu--end, layover.css) */
@@ -203,10 +199,7 @@
 /* ---- segment (day picker / tab strip) — items share width, shrink on small screens ---- */
 .segment { display: flex; gap: var(--sp-1); }
 .segment__item {
-  border: 0;
-  background: transparent;
-  color: inherit;
-  opacity: 0.6;
+  opacity: var(--rest);
   border-radius: var(--r-chip);
   padding: var(--sp-2) var(--sp-1);
   font: var(--type-label);
@@ -230,7 +223,7 @@
 :root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
 .action-bar {
   position: relative;
-  z-index: 30; /* above .sheet-stack sheets, which paint at --level 1-5 */
+  z-index: var(--z-bar); /* above .sheet-stack sheets, which paint at --level 1-5 */
   max-width: var(--screen-w);
   margin-inline: auto;
   padding: var(--sp-3) var(--sp-4) var(--sp-5);
@@ -260,10 +253,11 @@
    NEVER carry words (Lh 2026-09-16, for good): an arrow is the whole meaning,
    and a word that isn't a direction ("Get started", "Done") is not a pager
    button — that step COMMITS and goes back to the plain .action-bar with one
-   wide button. Where you are is said by the .pager__at dots UNDER the card
-   that changes (a .screen__centre group, card.css), never in the bar — the
-   dots move with what moves (Lh, 2026-09-12). Between the buttons goes a
-   "skip" link or nothing.
+   wide button. Where you are is said by the .pager__at dots — under the card
+   that changes (a .screen__centre group, card.css) for a card walk, never in
+   that bar (Lh, 2026-09-12); a walk of words instead floats its dots as the
+   bar's own first row (step.css, Lh 2026-09-23) — either way the dots move
+   with what moves. Between the buttons goes a "skip" link or nothing.
 
    <div class="action-bar action-bar--pager">
      <button class="icon-btn" aria-label="ย้อนกลับ" disabled>…</button>
@@ -280,14 +274,14 @@
   height: var(--dot);
   border-radius: 50%;
   background: currentColor;
-  opacity: 0.3;
+  opacity: var(--faint);
 }
 .pager__at > .is-at { background: var(--accent); opacity: 1; }
 /* ---- tiers: a control row above the buttons ----
    A screen whose one move comes with a control — the introduction's text-size
    slider above its pager. Each tier is a row; the bar stacks them, and any
    parent hosting the bar publishes the room for both, the way the plain
-   reserve is published above, so a .screen or a .card--centre stops clear.
+   reserve is published above, so a .card--centre stops clear of it.
    <div class="action-bar action-bar--tiers">
      <div class="action-bar__tier"><label class="slider">…</label></div>
      <div class="action-bar__tier action-bar__tier--pager">…the round pager…</div>
@@ -334,25 +328,53 @@
 .action-note__words { display: block; } /* ONE run of words: an icon inside sits in the line, the spaces around it kept */
 .action-note__words > .icon { display: inline-block; vertical-align: -0.2em; width: 1.25em; height: 1.25em; margin-inline: 0.15em; color: var(--action-note-icon-ink, inherit); } /* a project may colour the icon apart from the words — e.g. the system blue of the control it points at (Lh 2026-09-24) */
 
-/* PRESS (Lh 2026-09-25): every CONTROL answers a tap — it gives under the finger and springs back, its choice fill fades in;
-   INFORMATION never does (no pointer, no press). One list, zero specificity: a component's own rule always wins. */
-:where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item,
-  .calendar__day, .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item) {
+/* PRESS (Lh 2026-09-25; every tappable thing, 2026-09-27): every CONTROL answers a tap, INFORMATION never does (no pointer, no
+   press). Two answers, by size: GIVE — a control the size of a finger shrinks under it (--press-scale) and springs back; DIM —
+   something as wide as its card (a row, a summary line, a card, a step bar, a peeked sheet) fades under the finger (--press-dim)
+   instead, because a whole row shrinking reads as the card moving. A choice's fill fades in as it is picked. Disabled = no
+   pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here. */
+:where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
+  .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
+  a.avatar, button.avatar, .menu__item) {
   cursor: pointer;
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
 }
-/* a CHOICE's fill fades in as it is picked (a button's colour never changes on a tap, so it does not fade) */
-:where(.chip--pick, .tile--pick, .day, .segment__item, .calendar__day, .float-bar__item, .menu__item) {
-  transition: scale var(--motion-press) ease-out, background-color var(--motion-press) ease-out, color var(--motion-press) ease-out, border-color var(--motion-press) ease-out;
-}
-:where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item,
-  .calendar__day, .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item):active:not(:disabled, [aria-disabled="true"]) {
-  scale: var(--press-scale);
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field) {
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: opacity var(--motion-press) ease-out;
 }
-:where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, a.tile, button.tile, .day, .segment__item, .calendar__day, .float-bar__item,
-  .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
-@media (prefers-reduced-motion: reduce) {
-  :where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item,
-    .calendar__day, .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item):active { scale: none; }
+/* a CHOICE's fill fades in as it is picked (a plain button's colour never changes on a tap, so it does not fade) */
+:where(.chip--pick, button.chip, .tile--pick, button.tile, .day, .segment__item, .calendar__day, .float-bar__item, .picker__item, .check,
+  .icon-btn[role="tab"], .avatar-pick__item > .avatar) {
+  transition-property: scale, background-color, color, border-color, opacity;
+  transition-duration: var(--motion-press);
+  transition-timing-function: ease-out;
 }
+:where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
+  .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
+  a.avatar, button.avatar, .menu__item):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
+.sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
+/* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back) must not turn see-through:
+   it darkens a touch instead (--press-shade) */
+:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn) { cursor: pointer; touch-action: manipulation; transition: filter var(--motion-press) ease-out; }
+:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn):active { filter: brightness(var(--press-shade)); }
+/* the focus ring: on the control, or on the label that wraps a hidden input (chip, tile, file button, a row that is a label) */
+:where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
+  .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
+  a.avatar, button.avatar, .menu__item):focus-visible,
+:where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+/* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
+:where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
+  .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
+  a.avatar, button.avatar, .menu__item, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):is(:disabled, [aria-disabled="true"]),
+:where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn, label.row):has(:disabled) { cursor: default; }
+:where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
+  .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
+  a.avatar, button.avatar, .menu__item):not(.link):is(:disabled, [aria-disabled="true"]),
+:where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn):has(:disabled) { opacity: var(--off); }
+.sheet-stack--tap > .card > .card__head > :is(h1, h2, h3):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); } /* the keyboard's way into a stack sheet */
+@media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } } /* the give goes; the dim, the shade and the focus ring stay */

package/css/base.css

@@ -1,5 +1,5 @@
 /* ============================================================
-   cardds/base.css — reset, surface, typography levels, section
+   cardds/base.css — reset, surface, typography levels, page
    ============================================================ */
 
 *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
@@ -21,9 +21,8 @@ button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn
    An app's OWN text-size setting is NOT here (Lh 2026-09-22: --text-scale, which
    multiplied the root, zoomed the UI too — retired): it is --fs-base on <html>,
    the type base, so the words grow and the things keep their size (tokens.css). */
-html { font-size: 100%; scrollbar-width: none; }
+html { font-size: 100%; }
 @media (max-width: 22.5em) { html { font-size: 93.75%; } }
-html::-webkit-scrollbar { display: none; } /* Chromium/Safari */
 
 body {
   margin: 0;
@@ -39,7 +38,30 @@ body {
 [hidden] { display: none !important; }
 
 img, svg { display: block; max-width: 100%; }
-button { font: inherit; cursor: pointer; }
+button { font: inherit; }
+button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
+
+/* zero-specificity reset for controls that draw nothing of their own (2026-09-27 review):
+   a component's own rule always wins, at any specificity, so this never fights it — it only
+   fills in for a selector that never says otherwise. Not everything below shares every
+   property: two exceptions read as they always have — .calendar__day has never set its own
+   padding (the UA button default), and .sheet-step__go has never set its own color (the UA
+   button default too) — giving either one now would be a look change, so neither is here. */
+:where(.appbar__who, .segment__item, .day, .calendar__day, .menu__item, .float-bar__item, .link,
+  .add-row, .avatar-pick__item, .picker__item, .postcard__turn, .sheet-step__go) {
+  border: 0;
+  background: transparent;
+  font: inherit;
+}
+:where(.appbar__who, .segment__item, .day, .calendar__day, .menu__item, .float-bar__item, .link,
+  .add-row, .avatar-pick__item, .picker__item, .postcard__turn) { color: inherit; }
+:where(.appbar__who, .segment__item, .day, .menu__item, .float-bar__item, .link, .add-row,
+  .avatar-pick__item, .picker__item, .postcard__turn, .sheet-step__go) { padding: 0; }
+
+/* scrollbar hidden, scroll kept: the track scrolls by touch/drag, never by a visible bar —
+   .bleed (card.css) is the one exception, its bar is designed, not hidden */
+:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick) { scrollbar-width: none; }
+:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick)::-webkit-scrollbar { display: none; }
 
 /* icon from icons.svg sprite: <svg class="icon"><use href="icons.svg#bell"/></svg> */
 .icon { width: var(--icon-size, var(--icon)); height: var(--icon-size, var(--icon)); flex: none; }
@@ -48,10 +70,16 @@ button { font: inherit; cursor: pointer; }
 .icon--lg { width: var(--icon-lg-size, var(--icon-lg)); height: var(--icon-lg-size, var(--icon-lg)); } /* empty states */
 
 /* mobile screen column — the standard horizontal inset, and nothing vertical.
-   Top and bottom are zero on purpose: vertical room is only ever a RESERVE for
-   something fixed parked over the screen, so each bar adds its own and a page
-   without bars needs no override. .appbar reserves the top (actions.css),
-   .action-bar (actions.css) and .float-bar (layover.css) the bottom. */
+   Top is zero on purpose: room there is only ever a RESERVE for something
+   FIXED parked over the screen — .appbar reserves it (actions.css). A bottom
+   bar is not fixed (0.7.1): it is the Screen's own last child, in flow on a
+   scrolling screen (a sticky row, actions.css) or, in a fill screen, a layer
+   over the content's foot (step.css) — nothing here reserves room for it.
+   It also reads like a native app (Lh 2026-09-25): words are not highlighted
+   by a long press or a drag, no copy / web-search callout — only what is
+   typed into, and words marked selectable (`Text selectable` → .t-select: a
+   code, an address). Knob --screen-select: `text` = the web page's old way
+   everywhere. */
 .screen {
   --screen-gap: var(--sp-5); /* published: a .step cancels it to touch the bar it follows (step.css) */
   max-width: var(--screen-w);
@@ -60,6 +88,7 @@ button { font: inherit; cursor: pointer; }
   display: grid;
   gap: var(--screen-gap);
   align-content: start;      /* a screen taller than its content (a fixed phone) never spreads its rows — the top bar stays at the top, a row keeps its height */
+  -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); -webkit-touch-callout: none;
 }
 .screen > * { min-width: 0; } /* content never widens the column past the viewport */
 /* a screen that carries its own palette (data-palette on the element, not on <html>)
@@ -102,21 +131,18 @@ button { font: inherit; cursor: pointer; }
 
 .t-muted { color: var(--on-surface-muted); }
 .card .t-muted { color: var(--card-muted); } /* muted follows the card's ink, not the surface's */
-.card--3 .t-muted { color: inherit; opacity: var(--dim); } /* card-muted is tuned for light cards; dim instead on the dark slot */
+/* .card--3 .t-muted (dim instead of --card-muted on the dark slot) is declared once in card.css, with the rest of that family */
 .t-caps  { text-transform: uppercase; }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.
    The 1px is the one the platform needs to keep it in the accessibility tree, not a length of the design. */
-/* a screen reads like a native app (Lh 2026-09-25): words are not highlighted by a long press or a drag, no copy / web-search
-   callout — only what is typed into, and words marked selectable (`Text selectable` → .t-select: a code, an address).
-   Knob --screen-select: `text` = the web page's old way everywhere. */
-.screen { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); -webkit-touch-callout: none; }
 .screen :is(input, textarea, [contenteditable="true"]), .screen .t-select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
 .t-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 
-/* ---- base content: words straight on the base, no card around them — an
-   a heading, a paragraph, maybe a .cta-pack. Was .section until
-   2026-09-16 (Lh: the name said nothing about WHERE it lives; this one does).
+/* ---- page: words straight on the base, no card around them — a
+   heading, a paragraph, maybe a .cta-pack. Was .section until 2026-09-16
+   (Lh: the name said nothing about WHERE it lives), then .base-content
+   until 2026-09-23 (Lh: the content is a BOX; what's in it is .page).
    In a .step it is the reading block and step.css adds the flex/scroll rule ---- */
 .page {
   display: grid;
@@ -150,6 +176,6 @@ button { font: inherit; cursor: pointer; }
   color: var(--empty-state-ink, var(--on-surface)); /* full ink, icon and words alike: muted read as "disabled" at the middle of an empty screen (Lh 2026-09-16) — muted is for meta, not a sentence */
 }
 .empty-state__action { margin-top: var(--sp-2); }
-/* inside a card (a section's "nothing yet"): the card's ink */
+/* inside a card (a card's own "nothing yet"): the card's ink */
 .card .empty-state { color: var(--card-ink); padding-block: var(--sp-6); }
 .card--3 .empty-state { color: inherit; }

package/css/card.css

@@ -1,6 +1,7 @@
 /* ============================================================
    cardds/card.css — the card boundary + list variants
-   One card = one boundary. Tone via .card--1/2/3 (role slots).
+   One card = one boundary. The base .card is tone 1; further tones
+   via .card--2/3/4/5 (role slots).
    ============================================================ */
 
 .card {
@@ -25,14 +26,18 @@
 .card > * { min-width: 0; }
 
 .card--2 { --card-bg: var(--card-2-bg); --card-ink: var(--card-2-ink); --card-muted: var(--card-2-muted); }
-.card--3 { --card-bg: var(--card-3-bg); --card-ink: var(--card-3-ink); }
-.card--4 { --card-bg: var(--card-4-bg); --card-ink: var(--card-4-ink); --card-muted: var(--card-4-muted); }
-.card--5 { --card-bg: var(--card-5-bg); --card-ink: var(--card-5-ink); --card-muted: var(--card-5-muted); }
-
 /* dark/accent slot: accent-toned controls would vanish — the slot re-points
    the accent tokens, so every accent consumer (btn--primary, chip--on,
    check, toggle, ring, day…) inverts without per-component rules */
-.card--3 { --accent: var(--card-3-ink); --on-accent: var(--card-3-bg); }
+.card--3 { --card-bg: var(--card-3-bg); --card-ink: var(--card-3-ink); --accent: var(--card-3-ink); --on-accent: var(--card-3-bg); }
+.card--4 { --card-bg: var(--card-4-bg); --card-ink: var(--card-4-ink); --card-muted: var(--card-4-muted); }
+.card--5 { --card-bg: var(--card-5-bg); --card-ink: var(--card-5-ink); --card-muted: var(--card-5-muted); }
+/* the dark slot's captions/hints/footnotes: --card-muted is tuned for a light card, so these dim the full ink
+   instead (one rule, matching specificity to what it replaces — .card--3 <space> <one class>) — merged from
+   base.css/choice.css/media.css/numbers.css/journey.css/people.css (2026-09-27 review). lists.css's .legend
+   differs (opacity 0.8, not --dim) and stays there. */
+.card--3 :is(.t-muted, .calendar__wd, .composer__hint, .quote__by, .ring__label, .band__foot, .picker__unit,
+  .route__place, .note-row, .avatar-pick__role) { color: inherit; opacity: var(--dim); }
 
 /* header row: title left, floating action right — centered, since the
    trailing control (chip/badge/icon-btn/link) is almost always taller than
@@ -135,7 +140,7 @@
     linear-gradient(to top left,  transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
   border: var(--border-w) solid currentColor;
   border-radius: var(--r-media);
-  opacity: 0.4;
+  opacity: var(--off);
   min-height: 10rem;
 }
 .ph--sm { min-height: 7.5rem; }
@@ -191,9 +196,9 @@
    likes when not (Lh, 2026-09-12) ----
    The member sees one content area — whatever is between the top bar and the
    bar — and reads it as a whole page: a short card sits at its middle, a long
-   one simply makes the page longer, runs under the bar (the bar's reserve is
-   already the screen's bottom padding, actions.css) and scrolls up like any
-   page — nothing is capped, nothing shrinks, no scroll box inside a box.
+   one simply makes the page longer, runs under the bar (a sticky last row,
+   actions.css) and scrolls up like any page — nothing is capped, nothing
+   shrinks, no scroll box inside a box.
    So on a .screen that is NOT --fill the group is in flow: the column is at
    least one phone tall, the group takes the room after the top bar and
    centres its children in it. The screen's own inset stays the inset.
@@ -211,9 +216,9 @@
    the React adapter's slideTo() sets data-slide on :root, starts the transition
    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. */
-/* the name is set by slideTo() on the moving element for the move only (2026-09-22): a static name on every walk's current
-   page made two walks on one page — the gallery — share it, and the browser aborts a transition with a duplicate name */
+   cross-fade. The name is set by slideTo() on the moving element for the move only (2026-09-22): a static name on
+   every walk's current page made two walks on one page — the gallery — share it, and the browser aborts a
+   transition with a duplicate name. */
 
 /* ---- pages: the cards of a walk, all one height ----
    A sequence the member walks (an introduction) reads steadier when every card