@usableapp/cardds 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -0,0 +1,95 @@
+# Changelog
+
+> 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.4.2 — 2026-09-22
+
+### Words on the base: a picture and the dots
+Screens that only tell (onboarding, a walk of pages) live on the base — `Step › BaseContent` — never in a `Card centre` on an empty base. Two things the base could not hold well are fixed:
+- an `<img>` (or `Placeholder`) among the words is capped by `--base-content-media-h` (14rem) so a tall picture never pushes the words under the bar.
+- `PagerAt` as the last child of a `BaseContent` is centred under the words (it used to sit left).
+Story: `Step · WalksWithArt` — pages of words with a picture and the dots, a slider in the bar's upper tier, the round pager below.
+
+Where things go on such a screen (answers given to timebank): a `Postcard` shown with the words is a child of `BaseContent` after them (the picture's slot; never wrapped in a Card) · a summary the system hands over (an address, a ticket) stays a `Card centre` · a walk's progress is the `CardHead` overline ("ขั้นที่ 2 จาก 5") or a `Track` as the first child of `BaseContent` — nothing sits between the TopBar and the Step.
+
+## 0.4.1 — 2026-09-22
+
+Breaking renames and removals. No aliases (nobody had installed 0.4.0).
+
+### `CardBack` → `StackBack`
+The back button a tapped stack sheet reveals belongs to the stack, not the card.
+- import: `CardBack` → `StackBack`
+- class (if you styled it): `.card__back` → `.sheet-stack__back`
+- where it goes: unchanged — first child of the open stack sheet's `CardHead`.
+
+### `SheetStage`: `ask` prop removed
+The stage only does the ground; the thing in front places itself.
+- `<SheetStage ask>` → `<SheetStage dim>` — the `Modal` inside centres itself now.
+- A Modal on a clean ground (no scrim) is allowed: `<SheetStage>` with no `dim`.
+- CSS: `.sheet-stage--ask` is gone; `--drawer-h` now lives on `.modal`.
+
+### `Sheet`: `raised` prop removed
+A sheet always stands on the floor and never has a dim behind it.
+- `<SheetStage dim><Sheet raised …>` → that screen is a `Modal`: `<SheetStage dim><Modal><Lift>…</Lift><Drawer>…</Drawer></Modal>`
+- `.sheet--raised`, `--sheet-raised-radius` are gone. `SheetStage foot` (the footnote strip) stays.
+
+### `Postcard` reshaped
+The shape of `Card cover`: the photo fills it, a band at the bottom names it. Not a 3:2 card inside a card any more.
+- props kept: `photo` `alt` `name` `caption` `flipped` `defaultFlipped` `onFlip` `frontLabel` `backLabel`
+- new: `line` (the words under the name, `t-body`) · `liked` + `onLike(liked)` (the member's own heart in the band; no heart without them) · `likeLabel` · `voice` (a voice note instead of words: whatever you put there stands at the middle of the back — the app plays it; see Progress)
+- the band (`name` · `line` · heart) turns WITH the face. The back: `name` a fifth of the way down, `line`, then `caption` (or `voice`).
+- a tap on the photo still turns it. The turn is `.postcard__turn` (a button filling the face); the faces are divs now.
+- Don't wrap a Postcard in a `Card`. Its min-height is the cover's (`--postcard-min-h` 22.5rem); as a `SheetStage hero` it fills the band the sheet leaves open, with the screen's inset at both ends.
+- Who liked it is YOUR data, shown outside the card — see `Row more`.
+
+### `Row`: `more` (new)
+A row that expands: it becomes the summary of a `<details class="row-expand">`, `more` comes out under it.
+- `<Row lead={…} meta="4 คนถูกใจ" end={<Icon name="chevron-down" />} open={open} onOpenChange={setOpen} more={<Rows>…one Row per person…</Rows>} />`
+- `open` + `onOpenChange`, or `defaultOpen`. An `end` chevron turns when open. You fetch the list; the row shows it.
+
+### `Progress` (new)
+One straight line, the done share solid, the rest faint.
+- `<Progress at={0.4} label="0:05 of 0:12" />` — `at` 0–1; you keep the value (a timer, a download).
+- knobs: `--progress-h` · `--progress-radius` · `--progress-done-ink` · `--progress-rest-bg`.
+
+### Stage hero
+`.sheet-stage__hero` is now as tall as the band a half sheet leaves open, less `--screen-pad` at both ends, and what it holds fills it (a child's `min-height` gives way). If your hero relied on its own height, check it.
+
+### Gallery
+One page per thing you name (Card, Sheet, Btn…); inner parts (CardHead, CardBody, SheetBody, MenuItem, BtnRow…) are variations on the parent's page. Nav groups by use. `/Parent/Part` URLs are gone.
+
+## 0.4.0 — 2026-09-21
+
+Knobs, open icons, theme bases, gallery. Nothing removed from the component API.
+- **Knobs**: every component reads its look through `--<component>-<what>` custom properties with the default as fallback (363, listed in `docs/knobs.md`). Set one on `:root` (your `theme.css`) to retune everywhere, on any element to retune what is inside it. Declared nowhere: unset = nothing moved.
+- **Icons are open**: `registerIcons({ name: '<path…/>' })` → usable by name on every component that takes an icon; `<Icon>` draws a one-off from children; an unknown name warns once instead of throwing.
+- **Theme bases** (`css/theme.template.css`): four size bases (`--sp-base` `--fs-base` `--r-base` `--tap-base`) and five colour bases (`--color-surface` `--color-ink` `--color-paper` `--color-brand` `--color-on-brand`) on `:root`. A project sets a base, never a multiplier. `<html data-palette="own">` for own colours.
+- `Stat centre`; the pager places what sits between its two buttons in the middle; every component types its `ref`.
+
+## 0.3.0 — 2026-09-21
+
+**Components only — the app wires them.** The biggest change since 0.1: every component with a state is controlled like an input (`x` + `onXChange`, or `defaultX`), keeps its own behaviour inside, and none knows another. `cardds.js` no longer does anything between components — it is `--kb` (the keyboard's height) and `.bleed`'s scrollbar, 35 lines. If your screen relied on cardds.js to connect two things, the app connects them now.
+
+### Gone
+- `aria-controls` on a button calling a sheet → the app: `useState` of the sheet's state, the button sets it, `<Sheet state onStateChange>`.
+- events `cardds:sheet` · `cardds:pin` · `cardds:modal` · `cardds:flip`, and the Dropdown's native `change` → the components' own `onXChange` callbacks.
+- `window.carddsSheetSet` / `carddsSheetReveal` / `carddsStepSync`, `--sheet-room`, the bar guard → the Sheet does all of it itself.
+- `data-answer` on Modal buttons → plain `onClick`s; `<Modal open onClosed>`.
+- `IconBtn menu` / `menuId` / `menuStart` → any button opens a popover `Menu` with the platform's `popoverTarget={id}`.
+- `SheetStack mode="tap"` + hand-set `is-open` / `is-before` / `is-after` → `open` (index | null) + `onOpenChange`, or `defaultOpen`; the component paints the classes.
+
+### Each component, before → after
+- **Sheet**: `state="half"` alone used to be a starting point the sheet then moved from; now a fixed `state` PINS it (the sheet asks through `onStateChange` and stays if you don't answer). A sheet the member drags or taps the handle of: `defaultState="half"` (it keeps its own), or `state` + `onStateChange` (you keep it). Own behaviour, inside: handle tap ↔ peek, drag-snap to `states`, the raise when a field in a peeked sheet takes focus, the climb when the keyboard comes up. The `away` state (a called sheet, off-screen) is set-only.
+- **SheetStack**: `open` + `onOpenChange` / `defaultOpen`. A peeked head's tap and the back button only ask.
+- **Modal**: `open` + `onClosed` (it plays its opening backwards, then says so; you unmount it). Buttons are yours.
+- **Menu**: `actions` (plain onClicks) or `value` + `onChange`; picking closes it. **Dropdown**: one component like `<select>`, `value` + `onChange`, the pill named by the chosen item.
+- **Pin**: `value` + `onChange(code, complete)` or `defaultValue`; auto-advance, Backspace, arrows, paste inside. Tests that listened for `cardds:pin` type into the cells instead.
+- **Slider**: publishes its own `--slider-at`. **Postcard**: `flipped` + `onFlip` or `defaultFlipped`.
+- **Calendar**: `selected` + `onSelect` or `defaultSelected`; `onPrev` / `onNext`; label props (its buttons had no handlers before).
+- **Picker**: `value` + `onChange` or `defaultValue` — the value IS the item at the rail's centre (it had no way to report one).
+
+Guidance, no longer enforced: "pager or sheet", "a sheet finishes on its foot", "a form lives whole in one sheet".
+
+## 0.2.2 — 2026-09-21
+
+One sheet shape: the head stays pinned, the body scrolls without limit, the foot's button stands at the bottom above the keyboard — at every state, on a step and on a stage. Stage sheets ride `--kb` too. (`carddsSheetSet` / `carddsSheetReveal` on `window` — removed again in 0.3.0.)

package/README.md

@@ -105,7 +105,7 @@ the card is the material, the sheet is what it is in the stack.
 <div class="sheet-stack sheet-stack--tap">   <!-- drop --tap for a static stack -->
   <article class="card card--2">
     <div class="card__head">
-      <button class="icon-btn icon-btn--sm card__back" aria-label="Back">…</button>
+      <button class="icon-btn icon-btn--sm sheet-stack__back" aria-label="Back">…</button>
       <h2 class="t-h2 t-caps">Shopping</h2>
       <span class="icon-row">…</span>       <!-- optional trailing icons -->
     </div>
@@ -125,7 +125,7 @@ the card is the material, the sheet is what it is in the stack.
   A tap opens any sheet over it; back drops it home.
 - **Five sheets max.** Slots are declared per `:nth-child` in `stack.css`; a
   sixth would render at slot 0, on top of the first.
-- **Every head needs its own `.card__back`** if the stack is `--tap`. It stays
+- **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.
 - **`.card-stack` is gone.** That was this component's first name and the wrong
@@ -433,7 +433,7 @@ Demo: the *skeleton* block at the top of `elements.html`.
    padding. Two boxes hold sheets and the states
    mean the same in both: `.step` (an app screen, the bar outside — Anatomy)
    and `.sheet-stage` (a page-level overlay: a sheet over a map, the dim page
-   sheet `--dim` + `--raised`, the ask `--ask` + `.modal` = `__lift` + `__drawer`).
+   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

package/css/base.css

@@ -118,6 +118,11 @@ button { font: inherit; cursor: pointer; }
   padding-block: var(--base-content-pad-y, var(--sp-4));
 }
 .base-content > .t-body { color: var(--on-surface-muted); max-width: 34ch; }
+/* an illustration among the words (Lh 2026-09-22): capped, so a tall picture never pushes the words under the bar;
+   the "where am I" dots under the words, centred — the same dots the centred card has under it */
+.base-content > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; max-width: 100%; object-fit: contain; justify-self: start; }
+.base-content > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
+.base-content > .pager__at { justify-self: center; }
 .base-content .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */

package/css/layover.css

@@ -5,8 +5,8 @@
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
-/* ---- ask: the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
-   <div class="sheet-stage sheet-stage--ask">
+/* ---- the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
+   <div class="sheet-stage sheet-stage--dim">   (dim = the page under a scrim; a Modal on a clean ground is the stage without it — Lh 2026-09-22, `--ask` retired: the stage does the ground, the modal centres itself)
      <article class="card modal">
        <div class="modal__lift">…the card's content (a head, rows, a timeline)…</div>
        <div class="modal__drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
@@ -17,30 +17,27 @@
    .modal is the card — no border (the shadow is its edge on the scrim);
    .modal__lift the light part that holds the thing being asked about (it
    scrolls when tall); .modal__drawer the dark end that asks. The ground is
-   the page under a scrim (like --dim). Two beats (2 × --motion-sheet) when
+   whatever the stage shows (dim it or not). Two beats (2 × --motion-sheet) when
    the stage appears, and the same two backwards when it closes:
      1. the card drops in from above the stage to the screen's centre — its
         drawer still inside it, height 0: nothing of the ask shows yet
      2. the drawer comes out of the card's bottom edge while the lift moves
         up, both at once: the card grows from its centre, which never moves
-        (the stage centres it; a growing card keeps its middle where it is)
+        (the modal centres itself — absolute, margin auto; a growing card keeps its middle where it is)
    Closing: a click on any button in the drawer plays the same animations in
    reverse (cardds.js: Animation.reverse() on each — nothing duplicated), then
    fires "cardds:modal" on the .sheet-stage (bubbles, detail.answer from the
    button's data-answer) for the app to remove the stage.
    Reduced motion: the finished state, no beats; closing fires at once. */
-.sheet-stage--ask {
-  --drawer-h: 14rem;
-  display: grid;
-  align-content: center;          /* the card at the screen's centre — and kept there as it grows */
-  padding-inline: var(--screen-pad);
-}
-.sheet-stage--ask::after { content: ""; position: absolute; inset: 0; background: var(--scrim); } /* the page dimmed */
-.sheet-stage--ask > .sheet-stage__bg { filter: blur(var(--sp-2)); }
 .modal {
-  position: relative;
-  z-index: 1;                     /* over the scrim */
-  max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) — a % here would be of the grid area, which is the card itself */
+  --drawer-h: 14rem;
+  position: absolute;             /* at the stage's centre, and kept there as it grows: absolute + margin auto re-centres on every height */
+  inset: 0;
+  margin: auto;
+  height: fit-content;            /* inset 0 alone would stretch it to the stage: its own height, then the margins share the rest */
+  width: calc(100% - 2 * var(--screen-pad));
+  z-index: 2;                     /* over the dim stage's scrim (z 1) */
+  max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) */
   padding: 0;                     /* the parts pad themselves */
   border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
   display: grid;

package/css/lists.css

@@ -36,6 +36,15 @@
 .row__end { margin-left: auto; text-align: right; display: grid; gap: var(--row-end-gap, var(--sp-0)); justify-items: end; flex: none; }
 .row--lg { min-height: var(--row-lg-min-h, var(--fab)); } /* menu rows: a taller target, round arrow at the end; .rows gives them more air */
 .row--lg .row__title { font: 700 var(--fs-lg)/1.2 var(--font-display); }
+/* a row that EXPANDS (Lh 2026-09-22): the row is a <details>' summary, what it shows comes out under it —
+   who liked a postcard, the rest of a list. An end chevron turns when open. The app owns the list.
+   <details class="row-expand"><summary class="row">…lead · body · end…</summary><div class="row-expand__more">…</div></details> */
+.row-expand { display: block; }
+.row-expand > summary { list-style: none; cursor: pointer; }
+.row-expand > summary::-webkit-details-marker { display: none; }
+.row-expand > summary > .icon:last-child { transition: rotate var(--motion-slide); }
+.row-expand[open] > summary > .icon:last-child { rotate: 180deg; }
+.row-expand__more { padding-top: var(--row-expand-gap, var(--sp-3)); }
 /* a finished item in a checklist (a to-do list, an onboarding "complete your introduction" list):
    the words go muted, a filled tick sits at the end, and the row is no longer a tap target —
    pointer-events off here, aria-disabled from the markup. The tick is the .check's checked look

package/css/media.css

@@ -152,59 +152,75 @@
 .mosaic > .ph { opacity: 0.4; border-width: var(--border-w); }
 .mosaic > img { width: 100%; height: 100%; object-fit: cover; }
 
-/* ---- postcard: a member's introduction, a card in the hand — photo in front,
-   words on the back; tap to turn it over (Lh, 2026-09-12; card #63) ----
+/* ---- postcard: a member's introduction in the shape of a cover card — the photo fills it,
+   the band at the bottom names it; tap the photo to turn it over (Lh 2026-09-12; reshaped 2026-09-22) ----
    <div class="postcard">
-     <button class="postcard__face postcard__front" type="button" aria-label="พลิกดูด้านหลัง">
-       <img src="…" alt=""> — or <div class="ph"></div> —
-       <span class="postcard__label">ป้าแจ๋ว</span>
-     </button>
-     <button class="postcard__face postcard__back" type="button" aria-label="พลิกดูด้านหน้า">
-       <p class="postcard__caption">ชอบชงกาแฟดริปตอนเช้า</p>
-       <span class="postcard__label">ป้าแจ๋ว</span>
-     </button>
+     <div class="postcard__face postcard__front">
+       <button class="postcard__turn" type="button" aria-label="พลิกดูด้านหลัง"><img src="…" alt=""> — or <div class="ph"></div> —</button>
+       <div class="postcard__band">
+         <div class="postcard__words"><span class="t-h1">ป้าแจ๋ว</span><span class="t-body">บ้านสวนผัก</span></div>
+         <button class="icon-btn icon-btn--invert" aria-label="ถูกใจ" aria-pressed="false">♥</button>
+       </div>
+     </div>
+     <div class="postcard__face postcard__back">
+       <button class="postcard__turn" type="button" aria-label="พลิกดูด้านหน้า">
+         <div class="postcard__words">…</div><p class="postcard__caption">ชอบชงกาแฟดริปตอนเช้า</p>
+       </button>
+       <div class="postcard__voice"><div class="progress"></div><span class="t-caption">0:07 / 0:12</span><button class="icon-btn icon-btn--invert" aria-label="ฟัง">▶</button></div>  (a voice note: no caption — the line, its time, the control under them, at the middle)
+     </div>
    </div>
-   Each face is the whole tap target; cardds.js toggles .is-flipped on the
-   postcard (either face, Enter/Space too). A voice note, a like, a reply live
-   OUTSIDE the postcard (a Row under it): a face is a button, and a button
-   holds no button. The faces share one box (a 3:2 landscape card, the media
-   radius); the turn is a Y rotation at --motion-flip, a plain swap under
-   prefers-reduced-motion. Reads ink from the card slot it sits in. */
+   The two faces share one box and turn (a Y rotation at --motion-flip, a plain
+   swap under prefers-reduced-motion). A face is a div: the TURN is the button
+   that fills it (the photo, or the caption), the band lies over its foot and
+   turns with it — words and the heart; the back sets the name a fifth of the way down, the words after it; a
+   button in the band is never inside the turn button. The size is the cover
+   card's (--postcard-min-h = the cover's min-height, the card radius). Who
+   liked it, a voice note, a reply live OUTSIDE the postcard, in a Row under it. */
 .postcard {
   position: relative;
-  aspect-ratio: 3 / 2;
+  min-height: var(--postcard-min-h, 22.5rem);
   perspective: 60rem;
-  border-radius: var(--postcard-radius, var(--r-media));
+  border-radius: var(--postcard-radius, var(--r-card));
+  isolation: isolate;
 }
 .postcard__face {
   position: absolute;
   inset: 0;
   display: grid;
   align-content: end;
-  padding: var(--postcard-face-pad, var(--sp-4));
-  gap: var(--postcard-face-gap, var(--sp-2));
   border: var(--border-w) solid var(--postcard-face-border, var(--card-border));
   border-radius: inherit;
   overflow: hidden;
   isolation: isolate;
-  color: inherit;
-  text-align: left;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   transition: transform var(--motion-flip) ease-in-out;
   box-shadow: var(--postcard-face-shadow, var(--shadow-float));
 }
-.postcard__face:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
-/* the front: the photo (or the wireframe box) fills it, the name reads on a scrim */
+/* the turn: the button that fills the face, under the band */
+.postcard__turn {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  align-content: start;
+  padding: var(--postcard-face-pad, var(--card-pad-rest));
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.postcard__turn:focus-visible { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
+/* the front: the photo (or the wireframe box) fills it; the band reads on a scrim */
 .postcard__front { background: var(--postcard-front-bg, var(--card-3-bg)); color: var(--postcard-front-ink, var(--card-3-ink)); }
-.postcard__front > img,
-.postcard__front > .ph {
+.postcard__front .postcard__turn > img,
+.postcard__front .postcard__turn > .ph {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  z-index: -2;
   border: 0;
   border-radius: 0;
   min-height: 0;
@@ -213,20 +229,40 @@
   content: "";
   position: absolute;
   inset: 0;
-  z-index: -1;
+  z-index: 1;
+  pointer-events: none;
   background: linear-gradient(to top, var(--scrim), transparent 45%);
 }
-/* the back: paper — the words, big enough to read at arm's length */
+/* the back: paper — the caption and the name packed at the middle, big enough to read at arm's length */
 .postcard__back {
   background: var(--postcard-back-bg, var(--card-2-bg));
   color: var(--postcard-back-ink, var(--card-2-ink));
-  align-content: space-between;
   transform: rotateY(180deg);
 }
+.postcard__back .postcard__turn { align-content: start; padding-top: var(--postcard-back-top, 20%); gap: var(--postcard-back-gap, var(--sp-5)); } /* the name a fifth down the paper, the words after it */
 .postcard__caption { margin: 0; font: var(--postcard-caption-font, var(--type-title)); text-wrap: pretty; }
-.postcard__label { font: var(--postcard-label-font, var(--type-overline)); letter-spacing: var(--track-overline); text-transform: uppercase; opacity: 0.85; }
+/* the band: the face's foot — name and line left, the heart right; in flow at the face's end, over the turn.
+   Taps between its words fall through to the turn; its buttons take their own. */
+.postcard__band {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: end;
+  gap: var(--postcard-band-gap, var(--sp-3));
+  padding: var(--postcard-face-pad, var(--card-pad-rest));
+  pointer-events: none;
+}
+.postcard__band > * { pointer-events: auto; }
+.postcard__words { display: grid; gap: var(--postcard-words-gap, var(--sp-1)); flex: 1; min-width: 0; pointer-events: none; }
+.postcard__front .postcard__band { --accent: var(--postcard-front-ink, var(--card-3-ink)); --on-accent: var(--postcard-front-bg, var(--card-3-bg)); }
+.postcard__band .icon-btn[aria-pressed="true"] .icon { fill: currentColor; }
 .postcard.is-flipped > .postcard__front { transform: rotateY(-180deg); }
 .postcard.is-flipped > .postcard__back { transform: rotateY(0); }
+/* a voice note on the back: no words to read — its timeline (a Progress), its length and the control to hear it
+   under them, at the middle over the turn, on the face's inset; the app plays and keeps the time */
+.postcard__voice { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: var(--postcard-voice-gap, var(--sp-3)); padding: var(--postcard-face-pad, var(--card-pad-rest)); pointer-events: none; }
+.postcard__voice > * { pointer-events: auto; }
+.postcard__voice > .progress { justify-self: stretch; pointer-events: none; }
 @media (prefers-reduced-motion: reduce) {
   .postcard__face { transition: none; }
 }

package/css/numbers.css

@@ -256,3 +256,19 @@
 }
 .bar--on::after { background: var(--accent); }
 .bar--on > span { background: var(--accent); color: var(--on-accent); padding: var(--sp-0) var(--sp-2); border-radius: var(--r-chip); }
+
+/* ---- progress: one straight line, the done share solid, the rest faint (Lh 2026-09-22) — a voice note's
+   timeline, a download, a step count as a line. <div class="progress" role="progressbar" style="--progress-at: 0.4"></div>
+   --progress-at is DATA the component writes (0–1), not a knob (scripts/knobs.mjs lists it). The done part is a
+   gradient of the line's ink sized by the share; the rest is the background colour. */
+.progress {
+  display: block;
+  width: 100%;
+  height: var(--progress-h, var(--sp-1));
+  border-radius: var(--progress-radius, var(--r-chip));
+  color: var(--progress-done-ink, inherit);
+  background-color: var(--progress-rest-bg, color-mix(in srgb, currentColor 25%, transparent));
+  background-image: linear-gradient(currentColor, currentColor);
+  background-size: calc(var(--progress-at, 0) * 100%) 100%;
+  background-repeat: no-repeat;
+}

package/css/sheet.css

@@ -250,8 +250,13 @@
   inset-inline: var(--screen-pad);
   top: var(--_band-centre);
   translate: 0 -50%;
-  /* no z-index: it follows the background in DOM order and the sheet, later, covers it at full */
+  /* as tall as the band less the screen's inset at both ends (Lh 2026-09-22: the room under the hero = the room at its sides);
+     what it holds fills it (a postcard's min-height gives way) */
+  height: calc((100cqh - var(--_top, 0rem)) / 2 - 2 * var(--screen-pad));
+  display: grid;
 }
+.sheet-stage > .sheet-stage__hero > * { min-height: 0; } /* outranks a component's own min-height (the postcard's) */
+/* no z-index on the hero: it follows the background in DOM order and the sheet, later, covers it at full */
 
 /* ---- map: the box a map engine draws in, behind a stage sheet ----
    <div class="sheet-stage__bg"><div class="map"><div>…the engine's canvas…</div>
@@ -327,10 +332,9 @@
 /* EVERY sheet has one shape (Lh, 2026-09-21): the handle and the head stay at the top and never scroll · the
    foot's button stands at the bottom, and ABOVE the keyboard when there is one · everything between them
    scrolls, as far as it needs to. In a .step the keyboard's room is the step's (--kb, step.css); on a stage
-   the sheet gives it up itself, as --_lift — the same token a raised sheet floats on. */
+   the sheet gives it up itself, as --_lift. (A sheet ALWAYS stands on the floor — `.sheet--raised`, the one that
+   floated above a footnote strip on a dim stage, was retired 2026-09-22: that is a Modal's job.) */
 .sheet-stage > .sheet { --_lift: var(--kb, 0rem); bottom: var(--_lift); }
-.sheet-stage > .sheet--raised { --_lift: calc(var(--tap-lg) + var(--kb, 0rem)); }
-.sheet--raised { --_lift: var(--tap-lg); bottom: var(--_lift); border-radius: var(--sheet-raised-radius, var(--r-card)); border-bottom: var(--border-w) solid var(--card-border); }
 .sheet-stage__foot {
   position: absolute;
   inset-inline: 0;

package/css/stack.css

@@ -19,7 +19,7 @@
    <div class="sheet-stack sheet-stack--tap">   (drop --tap for a static stack)
      <article class="card card--2">
        <div class="card__head">
-         <button class="icon-btn icon-btn--sm card__back" aria-label="Back">…</button>
+         <button class="icon-btn icon-btn--sm sheet-stack__back" aria-label="Back">…</button>
          <h2 class="t-h2 t-caps">Shopping</h2>
          <span class="icon-row">…</span>              (optional trailing icons)
        </div>
@@ -243,7 +243,7 @@
 .sheet-stack--tap > .card.is-open > .card__head {
   padding-left: calc(var(--tap-sm) + var(--sp-3));
 }
-.sheet-stack--tap .card__back {
+.sheet-stack--tap .sheet-stack__back {
   position: absolute;
   left: 0;
   top: 50%;
@@ -252,7 +252,7 @@
   visibility: hidden;
   transition: opacity 0.35s ease, visibility 0.35s;
 }
-.sheet-stack--tap > .card.is-open .card__back {
+.sheet-stack--tap > .card.is-open .sheet-stack__back {
   opacity: 1;
   visibility: visible;
 }