@usableapp/cardds 0.6.6 → 0.6.7

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 > 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.7 — 2026-09-23
+
+### A walk scrolls as one run (Lh 2026-09-23 — answers timebank #138)
+- **`Walkthrough` has no top.** Its `Pages` start at the top edge of the step; each `Page` starts `--screen-lead` (15%) down, as
+  a **margin**. The words begin near the middle of the screen and, when they run long, scroll up to the top edge.
+- **The picture is no longer pinned.** The picture, the heading and the words scroll up together as one run; the sticky picture
+  from 0.6.2 is gone.
+- **Every last word can scroll clear of the bottom layer.** Each walk page ends with the lead + the bottom layer's height as
+  padding. `Screen` measures its bottom layer and publishes the height as `--bottom-h` on the screen.
+- A walk shows no scrollbar.
+- In a Step under a bar, the page's top margin is the screen's gap, not the 15% (it reads `--_lead`, as before).
+
 ## 0.6.6 — 2026-09-23
 
 ### BOTTOM is a layer (Lh 2026-09-23, replaces 0.6.5's "the bar is a row")

package/css/step.css

@@ -103,15 +103,15 @@
   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; its height is
-   --base-content-media-h as everywhere, never shrunk (Lh 2026-09-23: a fixed height, no scaling). */
-.step > .page > :is(img, .ph):first-child,
-.step > .pages > .page > :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 */
+/* a WALK (Pages of Page) — Lh 2026-09-23, third call: no top; the picture and the words are ONE run that scrolls up together
+   (the picture is never pinned). Each page starts at the screen's lead and ends with the same room under it — the lead as
+   padding above AND below — so the words begin near the middle and, when a big text size runs them long, scroll up clear.
+   The walk shows no scrollbar. */
+.step > .pages { margin-top: 0; scrollbar-width: none; } /* the scrolling box starts at the step's top edge (Lh 2026-09-23) */
+.step > .pages > .page { margin-top: var(--_lead, 0rem); } /* the lead is each PAGE's margin (15% with no top, the screen's gap under a bar): the words start there and scroll up to the box's edge */
+.step > .pages::-webkit-scrollbar { display: none; }
+.step > .pages > .page {
+  padding-bottom: calc(var(--screen-lead, 15cqh) + var(--bottom-h, 0rem)); /* + the bottom layer, measured by Screen: the last word scrolls clear of it */
 }
 
 /* ============================================================

package/dist/cardds.css

@@ -1629,15 +1629,15 @@ 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; its height is
-   --base-content-media-h as everywhere, never shrunk (Lh 2026-09-23: a fixed height, no scaling). */
-.step > .page > :is(img, .ph):first-child,
-.step > .pages > .page > :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 */
+/* a WALK (Pages of Page) — Lh 2026-09-23, third call: no top; the picture and the words are ONE run that scrolls up together
+   (the picture is never pinned). Each page starts at the screen's lead and ends with the same room under it — the lead as
+   padding above AND below — so the words begin near the middle and, when a big text size runs them long, scroll up clear.
+   The walk shows no scrollbar. */
+.step > .pages { margin-top: 0; scrollbar-width: none; } /* the scrolling box starts at the step's top edge (Lh 2026-09-23) */
+.step > .pages > .page { margin-top: var(--_lead, 0rem); } /* the lead is each PAGE's margin (15% with no top, the screen's gap under a bar): the words start there and scroll up to the box's edge */
+.step > .pages::-webkit-scrollbar { display: none; }
+.step > .pages > .page {
+  padding-bottom: calc(var(--screen-lead, 15cqh) + var(--bottom-h, 0rem)); /* + the bottom layer, measured by Screen: the last word scrolls clear of it */
 }
 
 /* ============================================================

package/dist/scaffold/Screen.js

@@ -17,6 +17,18 @@ export function Screen({ fill, palette, as = 'div', top, bottom, className, chil
         warnedSheetBar = true;
         console.warn('cardds Screen: a bottom bar on a screen with a Sheet — the sheet finishes on its own foot (CardFoot); drop the bar.');
     });
+    /* the BOTTOM layer's height, published on the screen as --bottom-h (Lh 2026-09-23): the walk's pages end with that much room
+       more, so every last word scrolls up clear of the layer. Measured, because the layer is as tall as its rows and the text size. */
+    useEffect(() => {
+        const el = own.current, bar = el?.querySelector(':scope > .action-bar');
+        if (!el || !bar) {
+            el?.style.removeProperty('--bottom-h');
+            return;
+        }
+        const ro = new ResizeObserver(() => el.style.setProperty('--bottom-h', `${bar.offsetHeight}px`));
+        ro.observe(bar);
+        return () => ro.disconnect();
+    }, [bottom]);
     const setRef = (node) => {
         own.current = node;
         if (typeof ref === 'function')

package/dist/templates/Walkthrough.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentProps, type ReactNode } from 'react';
 import { Screen } from '../scaffold/Screen.js';
 export interface WalkthroughPage {
-    /** the picture that opens the page — stays put while the words scroll */
+    /** the picture that opens the page — it scrolls up with the words (one run) */
     media: ReactNode;
     /** the page's one heading (h1, no top bar on this screen) */
     heading: ReactNode;
@@ -34,7 +34,7 @@ export interface WalkthroughProps extends Omit<ComponentProps<typeof Screen>, 'c
     nextLabel?: string;
 }
 /**
- * Walkthrough — TEMPLATE, a `Screen` with its three parts filled — top: `lead` · content: `Pages` (down to the screen's foot) · bottom: a LAYER over it — the dots, then the `ActionBar` rows.
+ * Walkthrough — TEMPLATE, a `Screen` with its three parts filled — no top · content: `Pages` (down to the screen's foot; each Page padded by the lead above and below, the whole run scrolls) · bottom: a LAYER over it — the dots, then the `ActionBar` rows.
  * A walk of pages that tell (onboarding, an introduction). Each page = a picture, a heading,
  * the words; the dots at the foot; one row of calls to action at the bottom. No top bar. Fixed: the order, the picture
  * first and fixed while the words scroll, one CTA row. Yours: the pages, the row, the state.

package/dist/templates/Walkthrough.js

@@ -10,7 +10,7 @@ import { CardHead } from '../cards/CardHead.js';
 import { Text } from '../type/Text.js';
 import { IconBtn } from '../actions/IconBtn.js';
 /**
- * Walkthrough — TEMPLATE, a `Screen` with its three parts filled — top: `lead` · content: `Pages` (down to the screen's foot) · bottom: a LAYER over it — the dots, then the `ActionBar` rows.
+ * Walkthrough — TEMPLATE, a `Screen` with its three parts filled — no top · content: `Pages` (down to the screen's foot; each Page padded by the lead above and below, the whole run scrolls) · bottom: a LAYER over it — the dots, then the `ActionBar` rows.
  * A walk of pages that tell (onboarding, an introduction). Each page = a picture, a heading,
  * the words; the dots at the foot; one row of calls to action at the bottom. No top bar. Fixed: the order, the picture
  * first and fixed while the words scroll, one CTA row. Yours: the pages, the row, the state.
@@ -31,5 +31,5 @@ export function Walkthrough({ pages, at: atProp, defaultAt = 0, onAtChange, cta,
     const pager = (_jsxs(_Fragment, { children: [_jsx(IconBtn, { icon: "arrow-left", label: backLabel, disabled: at === 0, onClick: () => go(at - 1) }), _jsx(IconBtn, { invert: true, icon: "arrow-right", label: nextLabel, disabled: at === count - 1, onClick: () => go(at + 1) })] }));
     const dots = count > 1 ? _jsx(PagerAt, { at: at + 1, of: count }) : null;
     const bottom = dots || controls.length || ctaLink != null ? (_jsxs(ActionBar, { variant: "tiers", children: [dots, controls.map((c, i) => _jsx(ActionBarTier, { children: c }, i)), _jsx(ActionBarTier, { pager: true, children: custom ? row : pager }), ctaLink != null && _jsx(ActionBarTier, { className: "action-bar__tier--link", children: ctaLink })] })) : (_jsx(ActionBar, { variant: "pager", children: custom ? row : pager }));
-    return (_jsxs(Screen, { fill: true, top: "lead", bottom: bottom, ...rest, children: [_jsx(Step, { ref: step, children: _jsx(Pages, { children: pages.map((p, i) => (_jsxs(Page, { "aria-current": i === at ? 'step' : undefined, inert: i !== at || undefined, children: [p.media, _jsx(CardHead, { level: "h1", heading: p.heading }), typeof p.body === 'string' ? _jsx(Text, { level: "body", children: p.body }) : p.body] }, i))) }) }), children] }));
+    return (_jsxs(Screen, { fill: true, bottom: bottom, ...rest, children: [_jsx(Step, { ref: step, children: _jsx(Pages, { children: pages.map((p, i) => (_jsxs(Page, { "aria-current": i === at ? 'step' : undefined, inert: i !== at || undefined, children: [p.media, _jsx(CardHead, { level: "h1", heading: p.heading }), typeof p.body === 'string' ? _jsx(Text, { level: "body", children: p.body }) : p.body] }, i))) }) }), children] }));
 }

package/package.json

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