@usableapp/cardds 0.5.2 → 0.6.1

package/CHANGELOG.md

@@ -2,10 +2,22 @@
 
 > 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.6.1 — 2026-09-22
+
+- **A screen with no bar** (Lh 2026-09-22): a `Step` that is the `Screen`'s first child starts its words 15% of the screen's height down — `--screen-lead` (a knob, `15cqh`; `Screen fill` is a size container, `--_lead` is registered so the share resolves against the screen). Story `Step · NoBar`.
+- **The base's own h1**: `CardHead level="h1"` inside a `BaseContent` reads at the card heading's size (`--fs-h2`) — h1 is the semantic level; `--fs-h1` stays the bar title's size.
+
+## 0.6.0 — 2026-09-22
+
+Also in 0.6.0 (same commit): `slideTo(direction, update, scope?)` names the moving page for the move only — CSS no longer names every walk's current page (two walks on one page aborted the transition); on a base page the picture comes FIRST, then the heading, then the words; `--card-3-muted` is a real colour role (the five tone-3 opacity rules in lists.css read it; default = the wireframe's old look); `--dot-drop` (0.09em) sits a signal dot on the letters' middle.
+
+### The walk's dots are the Step's, not each page's (Lh 2026-09-22) — BREAKING
+Reverses 0.5.2. A walk of `BaseContent` pages now carries **one** `PagerAt`, written after `Pages` — not one inside every page. `.step > .pager__at` sits at the base's foot, above the bar; `.base-content:has(> .pager__at:last-child)` (the 0.5.2 per-page flex-column form) is gone. An app with a `PagerAt` at the end of each page's `BaseContent` should move it to a single `PagerAt` after the `Pages` block instead.
+
 ## 0.5.2 — 2026-09-22
 
 ### Dots at the foot (Lh 2026-09-22)
-A `BaseContent` whose last child is `PagerAt` now sits its dots at the bottom of the reading block, above the bar; the block fills the step for it. Nothing to change in an app.
+A `BaseContent` whose last child is `PagerAt` now sits its dots at the bottom of the reading block, above the bar; the block fills the step for it. Nothing to change in an app. Superseded by 0.6.0 — see above.
 
 ## 0.5.1 — 2026-09-22
 

package/css/base.css

@@ -78,6 +78,7 @@ button { font: inherit; cursor: pointer; }
   height: 100dvh;
   overflow: clip;
   position: relative; /* the box a .card--centre or a .screen__centre floats in (card.css) */
+  container-type: size; /* a share of the SCREEN's height (a no-bar step's lead, step.css) reads it as cqh — a real phone's height, or the gallery's frame */
 }
 /* min-height: 0 — a flex item's floor is its content, and the stack's content
    is its own full-height sheets, so without it the stack grew to the whole
@@ -117,15 +118,12 @@ button { font: inherit; cursor: pointer; }
 }
 .base-content > .t-body { color: var(--base-content-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
 /* 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 */
+   (the walk's dots are NOT here — they are the Step's, after its Pages: step.css, Lh 2026-09-22) */
+/* the page's ONE heading on the base (a screen with no TopBar: CardHead level="h1") reads at the card heading's size —
+   h1 is the semantic level, not a bigger face; --fs-h1 is the bar title's size (Lh 2026-09-22) */
+.base-content > .card__head > .t-h1 { font-size: var(--fs-h2); }
 .base-content > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
 .base-content > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
-.base-content > .pager__at { justify-self: center; }
-/* the dots at the FOOT of the block (Lh 2026-09-22): a block that ends on .pager__at becomes a flex column so the dots
-   ride its bottom edge — the words keep the top, the free room opens between. The block must fill its cell for that:
-   in .pages it is stretched to the cell; a lone .step > .base-content grows for it (step.css). */
-.base-content:has(> .pager__at:last-child) { display: flex; flex-direction: column; }
-.base-content > .pager__at:last-child { margin-top: auto; align-self: center; }
 .base-content .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */

package/css/card.css

@@ -208,7 +208,8 @@
    and updates inside it; a browser without them (the floor: Chrome 105 / iOS 16)
    simply switches. Only the card is named; the rest of the page must not
    cross-fade. */
-.screen__centre > .card, .pages > [aria-current] { view-transition-name: centre-card; }
+/* the name is set by slideTo() on the moving element for the move only (2026-09-22): a static name on every walk's current
+   page made two walks on one page — the gallery — share it, and the browser aborts a transition with a duplicate name */
 
 /* ---- pages: the cards of a walk, all one height ----
    A sequence the member walks (an introduction) reads steadier when every card
@@ -221,7 +222,11 @@
      <article class="card" aria-current="step">…</article>
      <article class="card" inert>…</article>
    </div><div class="pager__at">…</div></div> */
-.pages { display: grid; }
+.pages {
+  display: grid;
+  user-select: none;   /* a walk is dragged, not read-and-selected — without this, a finger crossing the words highlights them instead of turning the page (timebank #59) */
+  touch-action: pan-y;  /* leaves vertical scroll to the browser; horizontal is the app's own drag, never a native pan */
+}
 .pages > :is(.card, .base-content) { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
 .pages > [inert] { visibility: hidden; }
 /* pages of WORDS (Lh, 2026-09-20): the same walk with .base-content pages, on the base — in a .step the

package/css/lists.css

@@ -32,7 +32,7 @@
 .row__body { flex: 1; min-width: 0; display: grid; gap: var(--row-body-gap, var(--sp-0)); }
 .row__title { font: var(--row-title-font, var(--type-title)); overflow-wrap: anywhere; } /* wraps freely — no clip, so no padding trick for Thai marks (Lh 2026-09-16, same call as the card heading) */
 .row__meta { font: var(--row-meta-font, var(--type-caption)); color: var(--row-meta-ink, var(--card-muted)); display: flex; align-items: center; gap: var(--row-meta-gap, var(--sp-1)); }
-.card--3 .row__meta { color: inherit; opacity: 0.7; }
+.card--3 .row__meta { color: var(--card-3-muted); }
 .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); }
@@ -51,7 +51,7 @@
    at --tap-sm, but not an input: nothing to press. */
 .row--done { pointer-events: none; cursor: default; }
 .row--done .row__title { color: var(--card-muted); }
-.card--3 .row--done .row__title { color: inherit; opacity: 0.7; }
+.card--3 .row--done .row__title { color: var(--card-3-muted); }
 .row__done {
   width: var(--row-done-size, var(--tap-sm));
   height: var(--row-done-size, var(--tap-sm));
@@ -93,7 +93,7 @@
 .kv-cell > .icon { margin-bottom: var(--sp-1); }
 .kv-cell__val { font: var(--kv-cell-val-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
 .kv-cell__key { font: var(--kv-cell-key-font, var(--type-caption)); color: var(--kv-cell-key-ink, var(--card-muted)); }
-.card--3 .kv-cell__key { color: inherit; opacity: 0.7; }
+.card--3 .kv-cell__key { color: var(--card-3-muted); }
 
 /* ---- bubble: a chat message — theirs on the left, mine on the right (Lh 2026-09-18, replaces the chip's tail) ----
    No tail: a rounded block whose corner nearest the sender is square-ish
@@ -143,7 +143,7 @@
 .bubble__meta { display: flex; align-items: center; gap: var(--bubble-meta-gap, var(--sp-1)); font: var(--bubble-meta-font, var(--type-caption)); color: var(--bubble-meta-ink, var(--on-surface-muted)); }
 .bubble--right > .bubble__meta { justify-self: end; }
 .bubble__meta > .icon { color: var(--accent); }
-.card--3 .bubble__meta { color: inherit; opacity: 0.7; }
+.card--3 .bubble__meta { color: var(--card-3-muted); }
 
 /* ---- timeline: a hairline with date chips, entries to the right ----
    <ol class="timeline"><li class="timeline__item"><span class="timeline__mark">Wed 14</span><p class="t-body">…</p></li>…</ol> */
@@ -206,4 +206,4 @@
   cursor: pointer;
 }
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
-.card--3 .link--muted { color: inherit; opacity: 0.7; }
+.card--3 .link--muted { color: var(--card-3-muted); }

package/css/media.css

@@ -116,7 +116,7 @@
   border-color: transparent;
   border-bottom-right-radius: 0;
   background-image: linear-gradient(to top left,
-    var(--surface) 0 50%,
+    var(--card-bg) 0 50%,   /* the card's own background, not --surface (the page's) — a mismatch here drew a seam at the flap's edge */
     color-mix(in srgb, currentColor 18%, var(--card-bg)) 50% 100%);
   background-repeat: no-repeat;
   background-position: bottom right;

package/css/step.css

@@ -54,6 +54,10 @@
    that thing. */
 .topbar + .step { margin-top: calc(-1 * var(--screen-gap)); --_lead: var(--screen-gap); }
 .appbar + .step { margin-top: calc(-1 * var(--header-gap)); --_lead: var(--screen-gap); }
+/* no bar at all — the step is the screen's first child (a page whose one heading is the base's own, Lh 2026-09-22):
+   the words start a share of the screen down — --screen-lead, 15% of its height (Lh 2026-09-22), so a tall phone gives
+   more air and a short one less; a screen with a bar keeps the bar's own room */
+.screen > .step:first-child { --_lead: var(--screen-lead, 15cqh); }
 
 /* the bar's room — read from actions.css, never recomputed. Margin, not
    padding, so the clip cuts at the box edge and nothing shows behind the
@@ -89,7 +93,9 @@
 .step > :is(.base-content, .pages) {
   flex: 0 1 auto;
 }
-.step:has(> .base-content > .pager__at:last-child, > .pages > .base-content > .pager__at:last-child) > :is(.base-content, .pages) { flex: 1 1 auto; } /* dots at the foot: the block takes the column (base.css) */
+/* the "where am I" dots of a walk are the STEP's, one for all its pages — written after .pages, pinned to the base's foot above the bar's
+   room, so a short page never leaves them stranded under its last line (Lh 2026-09-22: the dots belong to the page, not a card, not a paragraph) */
+.step > .pager__at { margin-top: auto; align-self: center; padding-block: var(--sp-3); flex: none; }
 .step > :is(.base-content, .pages) {
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */

package/css/tokens.css

@@ -155,6 +155,7 @@
   --_muted-on-paper: color-mix(in srgb, var(--color-ink) 66%, var(--color-paper, #ffffff));
   --_tone-2: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface, #f2f2f0));
   --_muted-on-tone-2: color-mix(in srgb, var(--color-ink, #141414) 72%, var(--_tone-2));
+  --_muted-on-brand: color-mix(in srgb, var(--color-on-brand) 70%, var(--color-brand)); /* the tone-3 card's secondary words: on-brand faded into brand — was opacity 0.7, which no theme could set (timebank #132, 2026-09-22) */
 
   /* app background ("earth-toned surface or shiny color, up to the app") */
   --surface: var(--color-surface, #f2f2f0);
@@ -168,6 +169,7 @@
 
   --card-border: #141414;      /* wireframe: visible outline; palettes may set transparent */
   --card-muted: var(--_muted-on-paper, #6b6b6b);       /* secondary text inside cards (the default, tone-1 card) */
+  --card-3-muted: var(--_muted-on-brand, #b9b9b9);      /* the same text on the tone-3 card — a real colour, like the two above: a theme whose brand is not near-black sets it to reach its contrast (the wireframe's #b9b9b9 = white at 0.7 on #141414, what the opacity gave) */
   --card-2-muted: var(--_muted-on-tone-2, #5f5f5f);     /* the same text on the tone-2 card — 5.1:1 on its grey (#6b6b6b is 4.3:1, under AA);
                                   a palette whose tone-2 ground is strong
                                   sets this to its tone-2 ink — a muted shade cannot reach AA there (clay) */
@@ -209,6 +211,7 @@
    falls back to when its own declaration cannot resolve.
    ============================================================ */
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
-@property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; } /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */
+@property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; }
+@property --_lead { syntax: "<length>"; inherits: true; initial-value: 0px; } /* the room above a step's words: registered so a cqh share (a no-bar step, 15% of the SCREEN) resolves where it is declared — on the step, against the screen — not on the words, against the step */ /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
 @property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }

package/dist/cardds.css

@@ -196,6 +196,7 @@
   --_muted-on-paper: color-mix(in srgb, var(--color-ink) 66%, var(--color-paper, #ffffff));
   --_tone-2: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface, #f2f2f0));
   --_muted-on-tone-2: color-mix(in srgb, var(--color-ink, #141414) 72%, var(--_tone-2));
+  --_muted-on-brand: color-mix(in srgb, var(--color-on-brand) 70%, var(--color-brand)); /* the tone-3 card's secondary words: on-brand faded into brand — was opacity 0.7, which no theme could set (timebank #132, 2026-09-22) */
 
   /* app background ("earth-toned surface or shiny color, up to the app") */
   --surface: var(--color-surface, #f2f2f0);
@@ -209,6 +210,7 @@
 
   --card-border: #141414;      /* wireframe: visible outline; palettes may set transparent */
   --card-muted: var(--_muted-on-paper, #6b6b6b);       /* secondary text inside cards (the default, tone-1 card) */
+  --card-3-muted: var(--_muted-on-brand, #b9b9b9);      /* the same text on the tone-3 card — a real colour, like the two above: a theme whose brand is not near-black sets it to reach its contrast (the wireframe's #b9b9b9 = white at 0.7 on #141414, what the opacity gave) */
   --card-2-muted: var(--_muted-on-tone-2, #5f5f5f);     /* the same text on the tone-2 card — 5.1:1 on its grey (#6b6b6b is 4.3:1, under AA);
                                   a palette whose tone-2 ground is strong
                                   sets this to its tone-2 ink — a muted shade cannot reach AA there (clay) */
@@ -250,7 +252,8 @@
    falls back to when its own declaration cannot resolve.
    ============================================================ */
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
-@property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; } /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */
+@property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; }
+@property --_lead { syntax: "<length>"; inherits: true; initial-value: 0px; } /* the room above a step's words: registered so a cqh share (a no-bar step, 15% of the SCREEN) resolves where it is declared — on the step, against the screen — not on the words, against the step */ /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
 @property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }
 
@@ -454,6 +457,7 @@ button { font: inherit; cursor: pointer; }
   height: 100dvh;
   overflow: clip;
   position: relative; /* the box a .card--centre or a .screen__centre floats in (card.css) */
+  container-type: size; /* a share of the SCREEN's height (a no-bar step's lead, step.css) reads it as cqh — a real phone's height, or the gallery's frame */
 }
 /* min-height: 0 — a flex item's floor is its content, and the stack's content
    is its own full-height sheets, so without it the stack grew to the whole
@@ -493,15 +497,12 @@ button { font: inherit; cursor: pointer; }
 }
 .base-content > .t-body { color: var(--base-content-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
 /* 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 */
+   (the walk's dots are NOT here — they are the Step's, after its Pages: step.css, Lh 2026-09-22) */
+/* the page's ONE heading on the base (a screen with no TopBar: CardHead level="h1") reads at the card heading's size —
+   h1 is the semantic level, not a bigger face; --fs-h1 is the bar title's size (Lh 2026-09-22) */
+.base-content > .card__head > .t-h1 { font-size: var(--fs-h2); }
 .base-content > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
 .base-content > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
-.base-content > .pager__at { justify-self: center; }
-/* the dots at the FOOT of the block (Lh 2026-09-22): a block that ends on .pager__at becomes a flex column so the dots
-   ride its bottom edge — the words keep the top, the free room opens between. The block must fill its cell for that:
-   in .pages it is stretched to the cell; a lone .step > .base-content grows for it (step.css). */
-.base-content:has(> .pager__at:last-child) { display: flex; flex-direction: column; }
-.base-content > .pager__at:last-child { margin-top: auto; align-self: center; }
 .base-content .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */
@@ -735,7 +736,8 @@ button { font: inherit; cursor: pointer; }
    and updates inside it; a browser without them (the floor: Chrome 105 / iOS 16)
    simply switches. Only the card is named; the rest of the page must not
    cross-fade. */
-.screen__centre > .card, .pages > [aria-current] { view-transition-name: centre-card; }
+/* the name is set by slideTo() on the moving element for the move only (2026-09-22): a static name on every walk's current
+   page made two walks on one page — the gallery — share it, and the browser aborts a transition with a duplicate name */
 
 /* ---- pages: the cards of a walk, all one height ----
    A sequence the member walks (an introduction) reads steadier when every card
@@ -748,7 +750,11 @@ button { font: inherit; cursor: pointer; }
      <article class="card" aria-current="step">…</article>
      <article class="card" inert>…</article>
    </div><div class="pager__at">…</div></div> */
-.pages { display: grid; }
+.pages {
+  display: grid;
+  user-select: none;   /* a walk is dragged, not read-and-selected — without this, a finger crossing the words highlights them instead of turning the page (timebank #59) */
+  touch-action: pan-y;  /* leaves vertical scroll to the browser; horizontal is the app's own drag, never a native pan */
+}
 .pages > :is(.card, .base-content) { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
 .pages > [inert] { visibility: hidden; }
 /* pages of WORDS (Lh, 2026-09-20): the same walk with .base-content pages, on the base — in a .step the
@@ -1508,6 +1514,10 @@ button { font: inherit; cursor: pointer; }
    that thing. */
 .topbar + .step { margin-top: calc(-1 * var(--screen-gap)); --_lead: var(--screen-gap); }
 .appbar + .step { margin-top: calc(-1 * var(--header-gap)); --_lead: var(--screen-gap); }
+/* no bar at all — the step is the screen's first child (a page whose one heading is the base's own, Lh 2026-09-22):
+   the words start a share of the screen down — --screen-lead, 15% of its height (Lh 2026-09-22), so a tall phone gives
+   more air and a short one less; a screen with a bar keeps the bar's own room */
+.screen > .step:first-child { --_lead: var(--screen-lead, 15cqh); }
 
 /* the bar's room — read from actions.css, never recomputed. Margin, not
    padding, so the clip cuts at the box edge and nothing shows behind the
@@ -1543,7 +1553,9 @@ button { font: inherit; cursor: pointer; }
 .step > :is(.base-content, .pages) {
   flex: 0 1 auto;
 }
-.step:has(> .base-content > .pager__at:last-child, > .pages > .base-content > .pager__at:last-child) > :is(.base-content, .pages) { flex: 1 1 auto; } /* dots at the foot: the block takes the column (base.css) */
+/* the "where am I" dots of a walk are the STEP's, one for all its pages — written after .pages, pinned to the base's foot above the bar's
+   room, so a short page never leaves them stranded under its last line (Lh 2026-09-22: the dots belong to the page, not a card, not a paragraph) */
+.step > .pager__at { margin-top: auto; align-self: center; padding-block: var(--sp-3); flex: none; }
 .step > :is(.base-content, .pages) {
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */
@@ -2675,7 +2687,7 @@ button { font: inherit; cursor: pointer; }
 .row__body { flex: 1; min-width: 0; display: grid; gap: var(--row-body-gap, var(--sp-0)); }
 .row__title { font: var(--row-title-font, var(--type-title)); overflow-wrap: anywhere; } /* wraps freely — no clip, so no padding trick for Thai marks (Lh 2026-09-16, same call as the card heading) */
 .row__meta { font: var(--row-meta-font, var(--type-caption)); color: var(--row-meta-ink, var(--card-muted)); display: flex; align-items: center; gap: var(--row-meta-gap, var(--sp-1)); }
-.card--3 .row__meta { color: inherit; opacity: 0.7; }
+.card--3 .row__meta { color: var(--card-3-muted); }
 .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); }
@@ -2694,7 +2706,7 @@ button { font: inherit; cursor: pointer; }
    at --tap-sm, but not an input: nothing to press. */
 .row--done { pointer-events: none; cursor: default; }
 .row--done .row__title { color: var(--card-muted); }
-.card--3 .row--done .row__title { color: inherit; opacity: 0.7; }
+.card--3 .row--done .row__title { color: var(--card-3-muted); }
 .row__done {
   width: var(--row-done-size, var(--tap-sm));
   height: var(--row-done-size, var(--tap-sm));
@@ -2736,7 +2748,7 @@ button { font: inherit; cursor: pointer; }
 .kv-cell > .icon { margin-bottom: var(--sp-1); }
 .kv-cell__val { font: var(--kv-cell-val-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
 .kv-cell__key { font: var(--kv-cell-key-font, var(--type-caption)); color: var(--kv-cell-key-ink, var(--card-muted)); }
-.card--3 .kv-cell__key { color: inherit; opacity: 0.7; }
+.card--3 .kv-cell__key { color: var(--card-3-muted); }
 
 /* ---- bubble: a chat message — theirs on the left, mine on the right (Lh 2026-09-18, replaces the chip's tail) ----
    No tail: a rounded block whose corner nearest the sender is square-ish
@@ -2786,7 +2798,7 @@ button { font: inherit; cursor: pointer; }
 .bubble__meta { display: flex; align-items: center; gap: var(--bubble-meta-gap, var(--sp-1)); font: var(--bubble-meta-font, var(--type-caption)); color: var(--bubble-meta-ink, var(--on-surface-muted)); }
 .bubble--right > .bubble__meta { justify-self: end; }
 .bubble__meta > .icon { color: var(--accent); }
-.card--3 .bubble__meta { color: inherit; opacity: 0.7; }
+.card--3 .bubble__meta { color: var(--card-3-muted); }
 
 /* ---- timeline: a hairline with date chips, entries to the right ----
    <ol class="timeline"><li class="timeline__item"><span class="timeline__mark">Wed 14</span><p class="t-body">…</p></li>…</ol> */
@@ -2849,7 +2861,7 @@ button { font: inherit; cursor: pointer; }
   cursor: pointer;
 }
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
-.card--3 .link--muted { color: inherit; opacity: 0.7; }
+.card--3 .link--muted { color: var(--card-3-muted); }
 
 /* ---- css/media.css — cover card, quote, tile grid, fold, mosaic, wave ---- */
 /* ============================================================
@@ -2970,7 +2982,7 @@ button { font: inherit; cursor: pointer; }
   border-color: transparent;
   border-bottom-right-radius: 0;
   background-image: linear-gradient(to top left,
-    var(--surface) 0 50%,
+    var(--card-bg) 0 50%,   /* the card's own background, not --surface (the page's) — a mismatch here drew a seam at the flap's edge */
     color-mix(in srgb, currentColor 18%, var(--card-bg)) 50% 100%);
   background-repeat: no-repeat;
   background-position: bottom right;

package/dist/scaffold/Centre.d.ts

@@ -29,4 +29,4 @@ export type SlideDirection = 'next' | 'back';
  * (card.css, `--motion-slide`); the heading and the dots stay still. Without view transitions (the browser
  * floor) it just runs the update.
  */
-export declare function slideTo(direction: SlideDirection, update: () => void): void;
+export declare function slideTo(direction: SlideDirection, update: () => void, scope?: ParentNode): void;

package/dist/scaffold/Centre.js

@@ -29,15 +29,25 @@ export function Pages({ className, ...rest }) {
  * (card.css, `--motion-slide`); the heading and the dots stay still. Without view transitions (the browser
  * floor) it just runs the update.
  */
-export function slideTo(direction, update) {
+export function slideTo(direction, update, scope = document) {
     const root = document.documentElement;
     if (typeof document.startViewTransition !== 'function') {
         update();
         return;
     }
+    /* the moving thing is NAMED for the transition only while it moves, and only inside `scope` (the walk's Step or Centre —
+       an app has one walk per screen and can leave it out; the gallery shows several on one page, and two elements with the
+       same name abort the transition). CSS names nothing (2026-09-22). */
+    const moving = () => scope.querySelector('.pages > [aria-current], .screen__centre > .card');
+    const name = (el, v) => { if (el)
+        el.style.viewTransitionName = v; };
+    const before = moving();
+    name(before, 'centre-card');
     root.dataset.slide = direction;
-    const transition = document.startViewTransition(() => flushSync(update));
+    let after = null;
+    const transition = document.startViewTransition(() => { flushSync(update); name(before, ''); after = moving(); name(after, 'centre-card'); });
     void transition.finished.finally(() => {
         delete root.dataset.slide;
+        name(after, '');
     });
 }

package/dist/scaffold/PagerAt.d.ts

@@ -7,5 +7,5 @@ export interface PagerAtProps extends Omit<ComponentProps<'span'>, 'children'> {
     /** accessible name; defaults to "Page {at} of {of}" */
     label?: string;
 }
-/** PagerAt — the "where am I" dots, centred under the card that changes (a child of Centre): one accent dot at the current page. Never inside an ActionBar. */
+/** PagerAt — the "where am I" dots: one accent dot at the current page. Under the card that changes (a child of Centre), or a Step's child after its Pages — pinned to the base's foot. One per walk, never inside an ActionBar, never inside a page. */
 export declare function PagerAt({ at, of, label, className, ...rest }: PagerAtProps): import("react").JSX.Element;

package/dist/scaffold/PagerAt.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** PagerAt — the "where am I" dots, centred under the card that changes (a child of Centre): one accent dot at the current page. Never inside an ActionBar. */
+/** PagerAt — the "where am I" dots: one accent dot at the current page. Under the card that changes (a child of Centre), or a Step's child after its Pages — pinned to the base's foot. One per walk, never inside an ActionBar, never inside a page. */
 export function PagerAt({ at, of, label, className, ...rest }) {
     return (_jsx("span", { className: cx('pager__at', className), role: "img", "aria-label": label ?? `Page ${at} of ${of}`, ...rest, children: Array.from({ length: of }, (_, i) => _jsx("i", { className: i + 1 === at ? 'is-at' : undefined }, i)) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",