@usableapp/cardds 0.7.15 → 0.7.17

package/CHANGELOG.md

@@ -2,6 +2,59 @@
 
 > 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.
+
+### Added
+- `setTextScale(percent, root?)` — the member's text size as a share of the theme's `--fs-base` (100 = the theme's own). It reads the base from the CSS, so an app no longer copies `1.375rem`. Keeping the choice (localStorage…) stays the app's.
+
+- PRESS: every control (Btn, IconBtn, Fab, Link, a/button Chip, ChipPick, Tile as button/link/pick, Day, SegmentItem, Calendar day, FloatBarItem, AvatarPickItem, AddRow, Picker item, StackBack, Dropdown, AppBar brand, MenuItem) gives under the finger (`--press-scale` 0.96, `--motion-press` 0.12s, off under reduced motion) and shows a focus ring; a choice's fill fades in. Zero specificity (`:where`), so a component's own rule wins.
+- `Rows heading` takes an ELEMENT too: `<Rows heading={<Text level="title" as="h3">…</Text>}>` — that h3 is the group's name (role=group, aria-labelledby). Words still give the small label. Drop a hand-written `role="group" aria-label`.
+- Token `--dim` (0.7): the one share secondary words fade to on the dark card, a drawer, a tile's sub line (was 14 hand-typed `opacity: 0.7`). A theme sets it once.
+- `TrackStep num` — the step's number in the round instead of an Icon (the `.track__dot` look existed in CSS with no way in; story Track · Numbered).
+- `AvatarPickItem selected` (aria-pressed; the picked person's avatar fills with the accent).
+
+### Removed (breaking for anyone using them)
+- `Deck` and `DeckActions` (the swipe deck), the `.deck*` CSS and the `--deck-*` knobs — Lh 2026-09-26: no use case. Nothing replaces them; a card to pick from = `Card` + its own buttons.
+
+### Changed (may touch a screen)
+- `Mood` is controlled like every other control: `value` + `onChange(value)` or `defaultValue`. Before: `value` was only the starting dot and `onChange` got the input event. Move a starting value to `defaultValue`; read the number from `onChange`.
+- INFORMATION never looks tappable: `.tile` (a plain div) and `Avatar add` no longer set `cursor: pointer`.
+- Stories: Segment, DayStrip, FloatBar (buttons), AvatarPick answer a tap; the Chip filter row is `ChipPick`s (plain `Chip on` is a label, not a choice).
+
+### Changed (internal)
+- Every controlled/uncontrolled state (`value`+`onChange` or `defaultValue`, and the same for `state`, `open`, `at`, `tab`, `selected`, `flipped`) now runs on one internal hook, `useControlled`, instead of 12 hand copies.
+- Dev warnings (Icon, TopBar, Screen) share one `warnOnce`.
+- CSS: dead selectors removed (`.dropdown__trigger`, `.menu__item.is-on`, `.float-bar__item.is-on`), one overridden stack-head rule dropped, split rules merged. Two raw `0px` in the SheetSteps CSS → `0rem`.
+
 ## 0.7.15 — 2026-09-25
 
 ### Removed (breaking for anyone using them)

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.
@@ -307,11 +307,9 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   above the centre (2 × (40% − the title bar)): a card taller than that is
   not a centred card — it is a plain scrolling `.screen` (the detail view).
 - **A small group at the same centre** — an empty state; a card with its quiet
-  second button and the pager dots under it; a deck with its two round
-  buttons — is `.screen__centre` (React: `Centre`), a block in the fill
+  second button and the pager dots under it — is `.screen__centre` (React: `Centre`), a block in the fill
   screen after the topbar. Same placement and cap; it runs edge to edge with
-  the inset as padding, so a deck's fanned cards may overhang and clip at the
-  screen's edges (the fold visual, not a bug), and stacks its children at the
+  the inset as padding, and stacks its children at the
   screen's gap. Never hand-lay `top: 40%` on a screen.
 - **The bar is the screen's bottom.** Plain `.action-bar` for one move; with a
   control that belongs to the screen (a slider), `.action-bar--tiers` stacks a
@@ -357,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
@@ -375,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
@@ -387,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
@@ -397,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
 
@@ -463,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 > *`
@@ -490,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
@@ -559,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` | |
@@ -588,8 +589,8 @@ Rules:
   theme's values are the project's call. The derivations are only starting points;
   any role can be set outright.
 - The member's text-size setting is the same `--fs-base`, written on `<html>`
-  by the app at run time (2.2rem = 160%): the words grow, the things keep their
-  size. (`--text-scale`, which multiplied the root and zoomed the UI too, is gone.)
+  at run time by `setTextScale(percent)` (a share of the theme's base; 100 = the
+  theme's own): the words grow, the things keep their size. (`--text-scale`, which multiplied the root and zoomed the UI too, is gone.)
 
 Try it live: the gallery's nav (`npm run dev`) has a slider per size base, and
 palette `own` shows a colour well per colour base.
@@ -614,13 +615,13 @@ 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.
-An app with its own text-size setting writes `--fs-base` on `<html>` (the type
-base, 1.375rem = 100%; 2.2rem = 160%): only the type and its holders (the count
+An app with its own text-size setting calls `setTextScale(percent)`, which writes
+`--fs-base` on `<html>` from the theme's base (100% = the theme's; 160% = 2.2rem by default): only the type and its holders (the count
 badge, the inline icon) grow; taps, spacing and radii keep their size.
 Components never write a raw length: spacing from `--sp-*`, control sizes from
 `--tap`, `--tap-lg`, `--btn-h`, `--bar-h`, `--header-h`, `--fab`, `--badge`, container

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: 2px; }
 .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>
@@ -333,3 +327,54 @@
 .card .action-note { color: var(--action-note-ink, var(--card-muted)); }
 .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 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;
+}
+: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;
+}
+/* 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; }
@@ -9,7 +9,7 @@
    the member wants to copy), and inputs are untouched. Native buttons and
    links are matched by element; the rest by the class that makes them one */
 button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--pick,
-.segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .dropdown__trigger, .track__step, .pager__at {
+.segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .track__step, .pager__at {
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
@@ -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: 0.7; } /* 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; }