@usableapp/cardds 0.6.1 → 0.6.2

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 > 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`.

package/css/step.css

@@ -102,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/dist/cardds.css

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

package/package.json

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