@usableapp/cardds 0.7.52 → 0.7.54

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 > 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.54 — 2026-10-06
+
+### Changed
+- **A stacked sheet renders its own place.** `SheetStack` still takes `open` and `refreshing` as indexes: which sheet is open, and whether its data is in, stay yours. The card renders what those mean (`is-open`, `is-before`, `is-after`, `is-loading`, the grip, the pull). Nothing to change in a screen that already passes those two. Do not stamp those classes onto the card after it has rendered.
+- **The open step's cursor mark comes from the field.** `Field`, `Pin` (its first cell), `Composer`, `FileBtn`, and `Slider` render `data-autofocus`, and `data-cursor` while the steps' holder is parked. A raw `<input>` written by hand in a step does not get the mark. Nothing to change when the step's first control is one of those.
+- **`Slider` publishes `--slider-at` from the value it renders.** Nothing to change in a screen.
+
+## 0.7.53 — 2026-10-05
+
+### Fixed
+- **`SheetStack` / `Home`: the pull down that asks `onRefresh` works with a finger** (Lh 2026-10-05). In 0.7.51 it only worked with a mouse: on a phone the browser took the touch for its own scroll and the content only jerked. A pull down from the top of the open content now follows the finger and asks; any other move still scrolls. Nothing to change in a screen.
+
+### Added
+- **`SheetStack` and `Home` take `refreshing`** — the index of the sheet you are reloading, or `null`. Set it in `onRefresh`, clear it when your data is in: `onRefresh={(i) => { setRefreshing(i); load(i).finally(() => setRefreshing(null)); }}` with `refreshing={refreshing}`. While it is the open sheet, its grip dots (below) fade up and down, the card is `aria-busy`, and a pull there does not ask again. Without `refreshing` nothing shows that a reload is running. Reload the pulled sheet alone or everything — that is yours; the stack does not fetch.
+
+### Changed
+- **Every sheet of a tap stack wears a grip: four small grey dots at the middle of its top edge** (Lh 2026-10-05) — a sign that the card slides up and down. A mark, not a control; nothing is added to the markup. Every `SheetStack` (tap mode) and `Home` shows it after the update — nothing to change in a screen, and there is no knob for it yet: if your screen needs it tuned or off, report it.
+
 ## 0.7.52 — 2026-10-05
 
 ### Changed

package/README.md

@@ -181,12 +181,14 @@ the card is the material, the sheet is what it is in the stack.
   A tap, or a pull up, opens any sheet over it. The open title or its back
   button, tapped or pulled down, drops it home. A pull down in the open
   content, already at the top, asks `onRefresh` — omit it and that pull only
-  scrolls. A tab in the head stays a click.
+  scrolls. A tab in the head stays a click. Every sheet wears a grip — four
+  small dots at the middle of its top edge, a mark that it slides, not a
+  control.
 - **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 `.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.** `SheetStack` holds which sheet is open (`open` + `onOpenChange`, or `defaultOpen`). A pull down in the open content asks `onRefresh(index)`. The stack does not fetch.
+- **No ids, no wiring.** `SheetStack` holds which sheet is open (`open` + `onOpenChange`, or `defaultOpen`). A pull down in the open content asks `onRefresh(index)`. The stack does not fetch: the app reloads (that sheet alone, or more — its call) and says so with `refreshing` (that index, then `null` when the data is in) — that sheet's grip dots dissolve white to black meanwhile, and a pull there does not ask again.
 - **`.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.
@@ -218,8 +220,9 @@ of `Screen`:
 - **Checked:** `validateScreen` (`scripts/validate.mjs`, run on every story and template by
   `tests/composition.spec.js`) fails a bar after `</Screen>` or a pinned bar, warns on a Sheet + ActionBar.
 - **Templates** are `Screen`s with the three parts filled (`Walkthrough` = top `lead` · content `Pages` · bottom
-  `ActionBar`); the gallery draws those parts on a template's page. The gallery's nav groups the components by
-  the part they fill: *top* · *content* · *bottom*.
+  `ActionBar`); the gallery draws those parts on a template's page. The gallery's nav groups a screen's
+  *top* and *bottom*, then each frame with the pieces that fill it: *card* (Card, its head, body and foot),
+  *sheet*, *stack*, *step*. A piece that also fits another frame says so on its page.
 
 ## Step markup
 
@@ -269,7 +272,10 @@ whose markup has rules, because the sheet's box is the step itself:
   **handle · head · body**: the handle, then a `.card__head` title row (that
   row is what `peek` shows — heading left, the contextual thing right), then
   `.sheet__body` with what the member acts on. The handle and the head are
-  pinned; the body is the one thing that scrolls, to the card's own edges. A
+  pinned; the body is the one thing that scrolls, to the card's own edges. The
+  handle is a line, or four dots (`mark="dots"`): both sit in the card's top
+  padding, the same distance from the edge, so the title stays put. `paper` makes
+  the content white while the head keeps the sheet's colour (`tone`, as a card). A
   sheet with no head (the dim page sheet) is a body alone.
 - **The step follows its top bar directly, and touches it.** `full` means
   the sheet's top edge at the bar's bottom edge — nothing above it but the
@@ -530,9 +536,13 @@ Live: every screen in the gallery (`npm run dev`).
    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; `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.
+   a stack renders correctly with no script. The app owns which index is
+   open and whether that sheet's data is in. The card renders what those
+   mean (`is-open`, `is-before`, `is-after`, `is-loading`, the grip, the
+   pull) from the `stack` prop `SheetStack` passes it. Don't reintroduce
+   height, `display` or z-index switching here — every past bug in this
+   animation came from exactly that. Don't stamp those classes onto the
+   card after it has rendered.
 7. **Everything shrinks to 320px.** `.screen > *`, `.card` and `.card > *`
    carry `min-width: 0`, so no child's min-content (an input, a fixed row)
    can widen a card's grid track past its padding; topbar titles ellipsize;
@@ -627,7 +637,7 @@ That file is where a project's look lives. Bases and roles:
 |---|---|---|
 | 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` (1.375rem = 22 — the body) | every `--fs-*`, `--badge`, `--icon-xs` |
-| corners | `--r-base` (1rem = 16) | every `--r-*`; `0` = square. `--r-chip` stays fully round |
+| corners | `--r-base` (1.3rem = 20.8) | 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` | |
 | colour | `--color-surface`, `--color-ink`, `--color-paper`, `--color-brand`, `--color-on-brand` — no default: unset = the wireframe | every role: surface / words, the three card tones (paper · the brand washed 14% into the surface · the brand), the muted inks (the ink washed into their ground), accent, neutral actions, `--dot-a` |

package/css/sheet.css

@@ -46,10 +46,10 @@
    ============================================================ */
 
 .sheet {
-  /* the strip a peeked sheet shows: the card's own top padding, the handle,
-     the gap, one title row (--tap — the head rule below makes every head at
-     least that tall) and the gap under it, so the cut lands exactly where
-     the first control starts and nothing of it leaks through. Published
+  /* the strip a peeked sheet shows: the card's own top padding (the handle
+     sits inside it), one title row (--tap — the head rule below makes every
+     head at least that tall) and the gap under it, so the cut lands exactly
+     where the first control starts and nothing of it leaks through. Published
      (and registered in tokens.css) so a sheet whose head is taller can
      retune it: .my-sheet { --sheet-peek: … } */
   --sheet-half: 0.5;              /* a share of the sheet's own height */
@@ -90,7 +90,7 @@
 /* --sheet-peek is declared on the BOX the sheet slides in, not on the sheet: the words behind a peeked sheet
    have to read it too (step.css keeps that much room under them), and a token only flows down. The sheet
    inherits it. A sheet whose head is taller retunes it on the box. */
-:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--sheet-head-h) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it */
+:is(.step, .sheet-stage) { --_handle: var(--sp-0); --sheet-peek: calc(var(--card-pad-rest) + var(--sheet-head-h) + var(--card-gap-rest) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it. The handle sits IN the card's top padding, so the strip is that padding, the title row and the gap under it */
 /* the head's floor: a tap, or an h2 line with its Thai-mark padding when the type is bigger than that (a large text-size
    setting on a narrow phone) — the strip and the head read the same number, so the title row is always inside the strip */
 :root { --sheet-head-h: max(var(--tap), calc(var(--fs-h2) * 1.25 + var(--sp-2))); }
@@ -174,25 +174,55 @@
 .sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
 .sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover) + var(--_safe-b-open)); }
 
-/* grab handle — first child of the sheet. Drawn as a small bar, but it is
-   the thumb's grab area for the whole strip above the title: a pseudo widens
-   its hit box to --tap tall and wider than the bar without changing the
-   picture. touch-action: none hands a touch drag to the Sheet component instead of to
-   the scroller behind it. */
+/* grab handle — first child of the sheet, but it does not take a row: it sits in the
+   card's top padding, the same air as a stack sheet's four dots (stack.css --_grip-y),
+   so a line and the dots leave the title in the same place (Lh 2026-10-05). The line
+   is the default; .sheet__handle--dots is the four dots. Either way it is the thumb's
+   grab: a pseudo widens its hit box to --tap tall and wider than the mark.
+   touch-action: none hands a touch drag to the Sheet component instead of to the scroller. */
 .sheet__handle {
-  position: relative;
+  position: absolute;
+  z-index: 1;
+  top: calc((var(--card-pad) - var(--sp-1)) / 2); /* the dots' top: (pad − 4) / 2. The line starts there too */
+  left: 50%;
+  translate: -50% 0;
   border: 0;
-  color: inherit; /* a <button> has its own UA colour; the bar is the card's ink */
+  color: inherit; /* a <button> has its own UA colour; the mark is the card's ink */
   background: currentColor;
   opacity: 0.3;
-  width: var(--tap-sm);
+  width: calc(var(--sp-base) * 18); /* 72: the line. The grab is the ::before, not this width */
   height: var(--_handle);
   border-radius: var(--sheet-handle-radius, var(--r-chip));
-  margin: 0 auto;
+  margin: 0;
   padding: 0;
   touch-action: none;
   cursor: grab;
 }
+/* paper: the head keeps the sheet's own colour, the content is white (Lh 2026-10-05).
+   The body and the foot read as paper; the handle and the head stay on the card. */
+.sheet--paper > .sheet__body {
+  --card-bg: var(--color-paper, #fff);
+  --card-ink: var(--color-ink);
+  --card-muted: var(--_muted-on-paper);
+  background: var(--card-bg);
+  color: var(--card-ink);
+}
+.sheet--paper > .card__foot { --card-bg: var(--color-paper, #fff); color: var(--color-ink); }
+.sheet__handle--dots {
+  --_dot: var(--sp-1);
+  --_step: calc(var(--_dot) * 2.5);
+  --_ink: color-mix(in srgb, currentColor 35%, transparent);
+  --_img: radial-gradient(circle closest-side, var(--_ink) 85%, transparent);
+  width: calc(3 * var(--_step) + var(--_dot));
+  height: var(--_dot);
+  opacity: 1;
+  border-radius: 0;
+  background-color: transparent;
+  background-image: var(--_img), var(--_img), var(--_img), var(--_img);
+  background-repeat: no-repeat;
+  background-size: var(--_dot) var(--_dot);
+  background-position: 0 0, var(--_step) 0, calc(2 * var(--_step)) 0, calc(3 * var(--_step)) 0;
+}
 .sheet__handle::before {
   content: "";
   position: absolute;

package/css/stack.css

@@ -162,7 +162,7 @@
   overflow: clip;
   transition: translate var(--motion-sheet) ease; /* the only animated property here */
   transition-delay: calc(var(--stagger, 0) * 70ms); /* 0 for everything
-    except a staggered is-before card, set in JS as it tucks or un-tucks */
+    except a staggered is-before card: the card renders --stagger as it tucks or un-tucks */
   --_back-size: var(--stack-back-size, calc(var(--tap-base) * 2 / 3)); /* read once, shared by the back button and the head's padding below */
 }
 .sheet-stack--tap > .card.is-open {
@@ -183,6 +183,34 @@
 }
 .sheet-stack > .card > .sheet__body.is-refreshing,
 .sheet-stack--tap > .card.is-open.is-refreshing:not(:has(> .sheet__body)) { transition: none; }
+/* the GRIP (Lh 2026-10-05): four small dots at the middle of every sheet's top edge — a sign that this card
+   slides up and down. A mark, not a control: nothing to press, nothing added to the sheet (the card's own background, in the
+   room above its head). The card renders `.stack-card` when it is a sheet of a tap stack, so the dots are its own.
+   At rest they are the card's own ink, faint. Only while THAT sheet reloads (`.is-loading`, from its `refreshing` prop,
+   and only while it is open) they dissolve white → black, so a light card and a dark one each get a moment the dots stand out.
+   Nothing travels. --_grip is the mix, 0 white → 1 black, private. */
+@property --_grip { syntax: "<number>"; inherits: false; initial-value: 0; }
+.stack-card {
+  --_grip-dot: var(--sp-1);
+  --_grip-step: calc(var(--sp-1) * 2.5);
+  --_grip-y: calc((var(--card-pad) - var(--_grip-dot)) / 2);
+  --_grip-ink: color-mix(in srgb, currentColor 35%, transparent);
+  --_grip-img: radial-gradient(circle closest-side, var(--_grip-ink) 85%, transparent);
+  background-image: var(--_grip-img), var(--_grip-img), var(--_grip-img), var(--_grip-img);
+  background-repeat: no-repeat;
+  background-size: var(--_grip-dot) var(--_grip-dot);
+  background-position:
+    calc(50% - 1.5 * var(--_grip-step)) var(--_grip-y), calc(50% - 0.5 * var(--_grip-step)) var(--_grip-y),
+    calc(50% + 0.5 * var(--_grip-step)) var(--_grip-y), calc(50% + 1.5 * var(--_grip-step)) var(--_grip-y);
+}
+.stack-card.is-open.is-loading {
+  --_grip-ink: color-mix(in srgb, black calc(var(--_grip) * 100%), white);
+  animation: stack-grip-dissolve 0.4s ease-in-out infinite alternate;
+}
+@keyframes stack-grip-dissolve { from { --_grip: 0; } to { --_grip: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .stack-card.is-open.is-loading { animation: none; --_grip-ink: currentColor; }
+}
 /* the front sheet — the one open on arrival — never travels up (it is not
    tappable), so its resting offset would leave its last n steps below the
    screen forever, unreachable by any scroll (timebank home, 2026-09-13). It

package/css/theme.template.css

@@ -24,7 +24,7 @@
   /* ---- size: four bases, the multipliers stay the system's ---- */
   --sp-base: 0.25rem;  /* 4  the room BETWEEN things: every --sp-N = base × N, so paddings and gaps */
   --fs-base: 1.375rem; /* 22 the type — the body size; every --fs-* is a multiplier of it (17 · 22 · 26 · 32 · 40 · 55 · 64), the count badge, the inline icon */
-  --r-base: 1rem;      /* 16 the corners: every --r-* (0 = square; chips and buttons stay fully round) */
+  --r-base: 1.3rem;    /* 20.8 the corners: every --r-* (0 = square; chips and buttons stay fully round) */
   --tap-base: 3rem;    /* 48 the size of THINGS: touch targets, control heights, icons, avatars, ring, tiles
                              (a touch target never goes under 44px, whatever this says) */
   /* a member's text-size setting is this same --fs-base, written on <html> by the app at run time (1.375rem = 100%, 2.2rem = 160%) — the words grow, the things keep their size */

package/css/tokens.css

@@ -24,7 +24,7 @@
   --sp-base: 0.25rem;  /* 4  spacing: --sp-N = base × N */
   --fs-base: 1.375rem; /* 22 type: the BODY is the base (Lh 2026-09-22) — every --fs-* is a multiplier of it; nothing under 0.68 (15, minor links — was 0.775/17 until 2026-09-23). A new size is Lh's call only.
                           Also the member's text-size setting: the app writes it on <html> at run time (2.2rem = 160%) — words grow, things don't */
-  --r-base: 1rem;      /* 16 radius: --r-* (--r-chip stays fully round) */
+  --r-base: 1.3rem;    /* 20.8 radius, 130% of 1rem (Lh 2026-10-05): --r-* (--r-chip stays fully round) */
   --tap-base: 3rem;    /* 48 the size of THINGS: touch targets and control heights (--tap*, --btn-h, --chip-h, --bar-h,
                           --header-h, --fab), icons, avatars, dots, the ring and the tiles. --sp-base is the room BETWEEN things.
                           Text-holders follow the type instead: --badge and --icon-xs (inline with captions) are on --fs-base.
@@ -79,10 +79,10 @@
 
   /* ---- radius ---- */
   --r-chip: 999px;        /* pills, chips, buttons — always fully round */
-  --r-card: calc(var(--r-base) * 2);         /* 32 the one card radius: every card, row, tile, menu, sheet, fab */
-  --r-media: var(--r-base);        /* 16 images inside cards */
-  --r-control: calc(var(--r-base) * 0.875);  /* 14 fields, thumbs, menu rows */
-  --r-badge: calc(var(--r-base) * 0.625);    /* 10 tile badge, bars */
+  --r-card: calc(var(--r-base) * 2);         /* 41.6 the one card radius: every card, row, tile, menu, sheet, fab */
+  --r-media: var(--r-base);        /* 20.8 images inside cards */
+  --r-control: calc(var(--r-base) * 0.875);  /* 18.2 fields, thumbs, menu rows */
+  --r-badge: calc(var(--r-base) * 0.625);    /* 13 tile badge, bars */
 
   /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
   --border-w: 1.5px;

package/dist/cardds.css

@@ -65,7 +65,7 @@
   --sp-base: 0.25rem;  /* 4  spacing: --sp-N = base × N */
   --fs-base: 1.375rem; /* 22 type: the BODY is the base (Lh 2026-09-22) — every --fs-* is a multiplier of it; nothing under 0.68 (15, minor links — was 0.775/17 until 2026-09-23). A new size is Lh's call only.
                           Also the member's text-size setting: the app writes it on <html> at run time (2.2rem = 160%) — words grow, things don't */
-  --r-base: 1rem;      /* 16 radius: --r-* (--r-chip stays fully round) */
+  --r-base: 1.3rem;    /* 20.8 radius, 130% of 1rem (Lh 2026-10-05): --r-* (--r-chip stays fully round) */
   --tap-base: 3rem;    /* 48 the size of THINGS: touch targets and control heights (--tap*, --btn-h, --chip-h, --bar-h,
                           --header-h, --fab), icons, avatars, dots, the ring and the tiles. --sp-base is the room BETWEEN things.
                           Text-holders follow the type instead: --badge and --icon-xs (inline with captions) are on --fs-base.
@@ -120,10 +120,10 @@
 
   /* ---- radius ---- */
   --r-chip: 999px;        /* pills, chips, buttons — always fully round */
-  --r-card: calc(var(--r-base) * 2);         /* 32 the one card radius: every card, row, tile, menu, sheet, fab */
-  --r-media: var(--r-base);        /* 16 images inside cards */
-  --r-control: calc(var(--r-base) * 0.875);  /* 14 fields, thumbs, menu rows */
-  --r-badge: calc(var(--r-base) * 0.625);    /* 10 tile badge, bars */
+  --r-card: calc(var(--r-base) * 2);         /* 41.6 the one card radius: every card, row, tile, menu, sheet, fab */
+  --r-media: var(--r-base);        /* 20.8 images inside cards */
+  --r-control: calc(var(--r-base) * 0.875);  /* 18.2 fields, thumbs, menu rows */
+  --r-badge: calc(var(--r-base) * 0.625);    /* 13 tile badge, bars */
 
   /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
   --border-w: 1.5px;
@@ -1163,7 +1163,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   overflow: clip;
   transition: translate var(--motion-sheet) ease; /* the only animated property here */
   transition-delay: calc(var(--stagger, 0) * 70ms); /* 0 for everything
-    except a staggered is-before card, set in JS as it tucks or un-tucks */
+    except a staggered is-before card: the card renders --stagger as it tucks or un-tucks */
   --_back-size: var(--stack-back-size, calc(var(--tap-base) * 2 / 3)); /* read once, shared by the back button and the head's padding below */
 }
 .sheet-stack--tap > .card.is-open {
@@ -1184,6 +1184,34 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .sheet-stack > .card > .sheet__body.is-refreshing,
 .sheet-stack--tap > .card.is-open.is-refreshing:not(:has(> .sheet__body)) { transition: none; }
+/* the GRIP (Lh 2026-10-05): four small dots at the middle of every sheet's top edge — a sign that this card
+   slides up and down. A mark, not a control: nothing to press, nothing added to the sheet (the card's own background, in the
+   room above its head). The card renders `.stack-card` when it is a sheet of a tap stack, so the dots are its own.
+   At rest they are the card's own ink, faint. Only while THAT sheet reloads (`.is-loading`, from its `refreshing` prop,
+   and only while it is open) they dissolve white → black, so a light card and a dark one each get a moment the dots stand out.
+   Nothing travels. --_grip is the mix, 0 white → 1 black, private. */
+@property --_grip { syntax: "<number>"; inherits: false; initial-value: 0; }
+.stack-card {
+  --_grip-dot: var(--sp-1);
+  --_grip-step: calc(var(--sp-1) * 2.5);
+  --_grip-y: calc((var(--card-pad) - var(--_grip-dot)) / 2);
+  --_grip-ink: color-mix(in srgb, currentColor 35%, transparent);
+  --_grip-img: radial-gradient(circle closest-side, var(--_grip-ink) 85%, transparent);
+  background-image: var(--_grip-img), var(--_grip-img), var(--_grip-img), var(--_grip-img);
+  background-repeat: no-repeat;
+  background-size: var(--_grip-dot) var(--_grip-dot);
+  background-position:
+    calc(50% - 1.5 * var(--_grip-step)) var(--_grip-y), calc(50% - 0.5 * var(--_grip-step)) var(--_grip-y),
+    calc(50% + 0.5 * var(--_grip-step)) var(--_grip-y), calc(50% + 1.5 * var(--_grip-step)) var(--_grip-y);
+}
+.stack-card.is-open.is-loading {
+  --_grip-ink: color-mix(in srgb, black calc(var(--_grip) * 100%), white);
+  animation: stack-grip-dissolve 0.4s ease-in-out infinite alternate;
+}
+@keyframes stack-grip-dissolve { from { --_grip: 0; } to { --_grip: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .stack-card.is-open.is-loading { animation: none; --_grip-ink: currentColor; }
+}
 /* the front sheet — the one open on arrival — never travels up (it is not
    tappable), so its resting offset would leave its last n steps below the
    screen forever, unreachable by any scroll (timebank home, 2026-09-13). It
@@ -1414,10 +1442,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    ============================================================ */
 
 .sheet {
-  /* the strip a peeked sheet shows: the card's own top padding, the handle,
-     the gap, one title row (--tap — the head rule below makes every head at
-     least that tall) and the gap under it, so the cut lands exactly where
-     the first control starts and nothing of it leaks through. Published
+  /* the strip a peeked sheet shows: the card's own top padding (the handle
+     sits inside it), one title row (--tap — the head rule below makes every
+     head at least that tall) and the gap under it, so the cut lands exactly
+     where the first control starts and nothing of it leaks through. Published
      (and registered in tokens.css) so a sheet whose head is taller can
      retune it: .my-sheet { --sheet-peek: … } */
   --sheet-half: 0.5;              /* a share of the sheet's own height */
@@ -1458,7 +1486,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* --sheet-peek is declared on the BOX the sheet slides in, not on the sheet: the words behind a peeked sheet
    have to read it too (step.css keeps that much room under them), and a token only flows down. The sheet
    inherits it. A sheet whose head is taller retunes it on the box. */
-:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--sheet-head-h) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it */
+:is(.step, .sheet-stage) { --_handle: var(--sp-0); --sheet-peek: calc(var(--card-pad-rest) + var(--sheet-head-h) + var(--card-gap-rest) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it. The handle sits IN the card's top padding, so the strip is that padding, the title row and the gap under it */
 /* the head's floor: a tap, or an h2 line with its Thai-mark padding when the type is bigger than that (a large text-size
    setting on a narrow phone) — the strip and the head read the same number, so the title row is always inside the strip */
 :root { --sheet-head-h: max(var(--tap), calc(var(--fs-h2) * 1.25 + var(--sp-2))); }
@@ -1542,25 +1570,55 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
 .sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover) + var(--_safe-b-open)); }
 
-/* grab handle — first child of the sheet. Drawn as a small bar, but it is
-   the thumb's grab area for the whole strip above the title: a pseudo widens
-   its hit box to --tap tall and wider than the bar without changing the
-   picture. touch-action: none hands a touch drag to the Sheet component instead of to
-   the scroller behind it. */
+/* grab handle — first child of the sheet, but it does not take a row: it sits in the
+   card's top padding, the same air as a stack sheet's four dots (stack.css --_grip-y),
+   so a line and the dots leave the title in the same place (Lh 2026-10-05). The line
+   is the default; .sheet__handle--dots is the four dots. Either way it is the thumb's
+   grab: a pseudo widens its hit box to --tap tall and wider than the mark.
+   touch-action: none hands a touch drag to the Sheet component instead of to the scroller. */
 .sheet__handle {
-  position: relative;
+  position: absolute;
+  z-index: 1;
+  top: calc((var(--card-pad) - var(--sp-1)) / 2); /* the dots' top: (pad − 4) / 2. The line starts there too */
+  left: 50%;
+  translate: -50% 0;
   border: 0;
-  color: inherit; /* a <button> has its own UA colour; the bar is the card's ink */
+  color: inherit; /* a <button> has its own UA colour; the mark is the card's ink */
   background: currentColor;
   opacity: 0.3;
-  width: var(--tap-sm);
+  width: calc(var(--sp-base) * 18); /* 72: the line. The grab is the ::before, not this width */
   height: var(--_handle);
   border-radius: var(--sheet-handle-radius, var(--r-chip));
-  margin: 0 auto;
+  margin: 0;
   padding: 0;
   touch-action: none;
   cursor: grab;
 }
+/* paper: the head keeps the sheet's own colour, the content is white (Lh 2026-10-05).
+   The body and the foot read as paper; the handle and the head stay on the card. */
+.sheet--paper > .sheet__body {
+  --card-bg: var(--color-paper, #fff);
+  --card-ink: var(--color-ink);
+  --card-muted: var(--_muted-on-paper);
+  background: var(--card-bg);
+  color: var(--card-ink);
+}
+.sheet--paper > .card__foot { --card-bg: var(--color-paper, #fff); color: var(--color-ink); }
+.sheet__handle--dots {
+  --_dot: var(--sp-1);
+  --_step: calc(var(--_dot) * 2.5);
+  --_ink: color-mix(in srgb, currentColor 35%, transparent);
+  --_img: radial-gradient(circle closest-side, var(--_ink) 85%, transparent);
+  width: calc(3 * var(--_step) + var(--_dot));
+  height: var(--_dot);
+  opacity: 1;
+  border-radius: 0;
+  background-color: transparent;
+  background-image: var(--_img), var(--_img), var(--_img), var(--_img);
+  background-repeat: no-repeat;
+  background-size: var(--_dot) var(--_dot);
+  background-position: 0 0, var(--_step) 0, calc(2 * var(--_step)) 0, calc(3 * var(--_step)) 0;
+}
 .sheet__handle::before {
   content: "";
   position: absolute;