@usableapp/cardds 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -2,8 +2,20 @@
 
 > 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.2 — 2026-09-23
+
+- **The picture stays put, only the words scroll** (Lh 2026-09-23): in a `Step`, a `BaseContent` whose FIRST child is a picture (`img` / `Placeholder`) keeps it sticky at the top of the reading block, and the heading and words scroll under it. The picture is capped at 40% of the step's height (`min(--base-content-media-h, --step-media-share)`, new knob `--step-media-share`, default `40cqh`), so on a short phone or at a large text size the picture gives way, never the words. Nothing to change in an app.
+- A larger opening picture is a theme setting, not a code change: `:root { --base-content-media-h: 18.75rem; }` (300px; the 40% cap still applies inside a Step).
+
+## 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.
 

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
@@ -118,6 +119,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 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 .cta-pack {

package/css/card.css

@@ -222,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/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
@@ -98,3 +102,18 @@
   overflow-y: auto;
   overscroll-behavior: contain;
 }
+
+/* a picture that opens the words stays put, only the words scroll under it (Lh 2026-09-23, timebank's walk at large text:
+   the picture scrolled away with the words). Sticky at the top of the reading block's scroller, on the base's ground so the
+   words pass under it; capped at a share of the STEP (a size container) so the words always keep more than half the column —
+   the picture gives way on a short phone or at a big text size, never the words. */
+.step > .base-content > :is(img, .ph):first-child,
+.step > .pages > .base-content > :is(img, .ph):first-child {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--surface); /* the words pass UNDER it, never through a transparent picture */
+  max-height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh));
+}
+.step > .base-content > .ph:first-child,
+.step > .pages > .base-content > .ph:first-child { height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh)); }

package/css/tokens.css

@@ -211,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

@@ -252,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; }
 
@@ -456,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
@@ -496,6 +498,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 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 .cta-pack {
@@ -745,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
@@ -1505,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
@@ -1550,6 +1563,21 @@ button { font: inherit; cursor: pointer; }
   overscroll-behavior: contain;
 }
 
+/* a picture that opens the words stays put, only the words scroll under it (Lh 2026-09-23, timebank's walk at large text:
+   the picture scrolled away with the words). Sticky at the top of the reading block's scroller, on the base's ground so the
+   words pass under it; capped at a share of the STEP (a size container) so the words always keep more than half the column —
+   the picture gives way on a short phone or at a big text size, never the words. */
+.step > .base-content > :is(img, .ph):first-child,
+.step > .pages > .base-content > :is(img, .ph):first-child {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--surface); /* the words pass UNDER it, never through a transparent picture */
+  max-height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh));
+}
+.step > .base-content > .ph:first-child,
+.step > .pages > .base-content > .ph:first-child { height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh)); }
+
 /* ---- css/forms.css — outlined fields, add-row ---- */
 /* ============================================================
    cardds/forms.css — inputs + inline form actions
@@ -2969,7 +2997,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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.",