@usableapp/cardds 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -2,10 +2,15 @@
 
 > 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.0 — 2026-09-22
+
+### 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

@@ -117,15 +117,9 @@ 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) */
 .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

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/step.css

@@ -89,7 +89,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) */

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) */
@@ -493,15 +495,9 @@ 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) */
 .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 +731,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
@@ -1543,7 +1540,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 +2674,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 +2693,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 +2735,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 +2785,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 +2848,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 ---- */
 /* ============================================================

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.0",
   "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.",