@usableapp/cardds 0.6.5 → 0.6.6

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 > 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.6 — 2026-09-23
+
+### BOTTOM is a layer (Lh 2026-09-23, replaces 0.6.5's "the bar is a row")
+- In a `Screen fill`, top + content are one flex column and **the content runs to the screen's bottom edge**. The bottom
+  (`ActionBar`) is a **layer over the content's foot** — it covers what is under it, on purpose. Nothing is added to the
+  content to make room.
+- **The walk's `PagerAt` is the bottom layer's first row**: a direct child of the `ActionBar`, before its tiers, centred.
+  It is no longer a child of the `Step`. (The 2026-09-16 rule "the dots never in the bar" is retired.)
+- `ActionBar` in a fill screen has no top padding.
+
+### `BaseContent` → `Page`
+- The content is a box. What is in it is always components one after another. A page of words (picture · heading · words ·
+  a CtaPack) is **`Page`** (class `.page`, was `.base-content`), and a walk is `Pages` of `Page`s.
+- `BaseContent` still works for this version as an alias of `Page`; it warns once in the console. Rename it.
+- The knobs keep their names for now (`--base-content-media-h`, `--base-content-gap`, …).
+
+### Fixes and small additions
+- A `Step` under an `AppBar` touches it again, so a full sheet stops on the bar's bottom edge (0.6.5 left an 8px strip — timebank #137).
+- `Link sm`: a minor link at a new size `--fs-2xs` (15px) on a 28px line; its tap target stays 44px. A `ctaLink` row is as tall as that line.
+
 ## 0.6.5 — 2026-09-23
 
 ### A screen is top · content · bottom, one flex column (Lh 2026-09-23)

package/README.md

@@ -37,7 +37,7 @@ npm test             # Playwright: the tokens and the step/sheet/centre geometry
 ```
 
 ```tsx
-import { Screen, TopBar, Step, BaseContent, Sheet, SheetBody, CardHead, Field, Pin, ActionBar, Btn } from '@usableapp/cardds';
+import { Screen, TopBar, Step, Page, Sheet, SheetBody, CardHead, Field, Pin, ActionBar, Btn } from '@usableapp/cardds';
 import '@usableapp/cardds/dist/cardds.css';
 import './theme.css';   // the project's own look, after the system's — see "A project's theme"
 ```
@@ -165,7 +165,7 @@ of `Screen`:
 | Part | Prop | What fills it |
 |---|---|---|
 | **top** | `top` | `TopBar` · `AppBar` · `"lead"` (no bar: the content starts `--screen-lead`, 15% of the screen, down) |
-| **content** | children | a `Step` (`Pages` · `BaseContent` · `BaseContent` + `Sheet`) · `Centre` · `SheetStack` … |
+| **content** | children | a `Step` (`Pages` · `Page` · `Page` + `Sheet`) · `Centre` · `SheetStack` … |
 | **bottom** | `bottom` | `ActionBar` (rows: `controls` · the one `cta` row — the pager ← → or one wide button · a `ctaLink`) · `FloatBar` · nothing |
 
 ```tsx
@@ -174,12 +174,11 @@ of `Screen`:
 </Screen>
 ```
 
-- **The browser measures, nobody computes.** In `Screen fill` the content takes all the height the top and the bottom
-  leave (`flex: 1`); the bottom is as tall as its rows. A one-row bar gives its room straight back to the content.
-  No `--bar-reserve` arithmetic for a bar in the screen.
-- **The bar is INSIDE the screen, its last part** — `bottom`, never a sibling after `</Screen>`, never pinned with a
-  hand-set `position`. The keyboard lifts the column's end (`--kb`). A `FloatBar` in `bottom` floats over the
-  content at the screen's foot (it lies over a map or a stack — not a row).
+- **Top and content are one flex column; the bottom is a LAYER** (Lh 2026-09-23). In `Screen fill` the content runs to the
+  screen's bottom edge; the bottom (`ActionBar`, with the walk's `PagerAt` as its first row) lies over it at the foot and
+  covers what is under it — on purpose, nothing is added to the content to make room. The keyboard lifts the layer (`--kb`).
+- **The bar is INSIDE the screen** — `bottom`, never a sibling after `</Screen>`, never pinned with a hand-set `position`.
+  A `FloatBar` in `bottom` floats the same way.
 - **A screen with a `Sheet` has no bottom.** The sheet finishes on its own `CardFoot`; `Screen` warns once when both
   are there.
 - **Checked:** `validateScreen` (`scripts/validate.mjs`, run on every story and template by
@@ -196,7 +195,7 @@ whose markup has rules, because the sheet's box is the step itself:
 ```html
 <!-- reads: the words only -->
 <section class="step">
-  <section class="base-content">
+  <section class="page">
     <div class="card__head"><h2 class="t-h2">…</h2></div>
     <p class="t-body">…</p>
   </section>
@@ -205,7 +204,7 @@ whose markup has rules, because the sheet's box is the step itself:
 
 <!-- acts: the words + a sheet -->
 <section class="step">
-  <section class="base-content">…the words…</section>
+  <section class="page">…the words…</section>
   <article class="card sheet sheet--half">
     <button class="sheet__handle" type="button" aria-label="ปรับความสูง"></button>
     <div class="card__head"><h2 class="t-h2">…</h2><span class="chip">…</span></div>
@@ -229,7 +228,7 @@ whose markup has rules, because the sheet's box is the step itself:
   card takes the inset back as its side margins — so the card and the bar's
   buttons stand on the inset line, and the sheet runs edge to edge like the
   bar and like a sheet in a `.sheet-stage`.
-- **`.base-content` first, `.sheet` last.** The block carries the step's words
+- **`.page` first, `.sheet` last.** The block carries the step's words
   ON THE BASE — no frame, no area colour (it was a `.card` until 2026-09-16;
   Lh: a step reads like a page, not a card in a page). It keeps a card's
   rhythm: a `.card__head`, `--card-gap` between things. The sheet is
@@ -311,8 +310,8 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 - **The round pager** is `.action-bar--pager` (or an `.action-bar__tier--pager`)
   holding two `.icon-btn`s and nothing else: they stand at the two edges. The
   step that commits still goes back to one wide button (rule 3).
-- **BaseContent that moves** (Lh 2026-09-20) — two ways, never both on one screen:
-  - *Pages of words:* `.step > .pages > .base-content` (one `aria-current="step"`, the rest `inert`) — every page
+- **Page that moves** (Lh 2026-09-20) — two ways, never both on one screen:
+  - *Pages of words:* `.step > .pages > .page` (one `aria-current="step"`, the rest `inert`) — every page
     one height, the round pager turns them (`slideTo()`), the words slide like a page. No sheet there.
   - *Sheets the app calls:* the base offers WAYS IN — sign in · new phone · join — as buttons (`.cta-pack`); each
     way has a sheet that holds its WHOLE form and its own submit on its foot, starting `.sheet--away` (not on the
@@ -367,7 +366,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   by `translate` only. (The stack was first named "card stack": wrong, and
   retired.) Demos: `sheet.html`, `stack.html`.
 - **A step is one screen, one task: `.step`.** What the member reads is
-  words on the base (`.base-content` — the same block as anywhere on the base; it was `.step__card` until 2026-09-16); what the member does, if the step asks for it, is a
+  words on the base (`.page` — the same block as anywhere on the base; it was `.step__card` until 2026-09-16); what the member does, if the step asks for it, is a
   `.sheet` in front of it; the screen's one move is `.action-bar`, the screen's
   bottom, after the step. A step where the member only READS is the card alone.
   A step where the member ACTS (types, picks, shoots a photo, records) adds
@@ -394,7 +393,7 @@ Demo: the *skeleton* block at the top of `elements.html`.
 1. **One card = one boundary.** A card frames one thing: a category, a stat
    group, a list row. Tone slots: `.card` (card-1), `.card--2`, `.card--3`.
 2. **Sections are not cards.** Page sections = frameless on-surface content
-   (`.base-content`) + a lone/packed CTA (`.cta-pack`).
+   (`.page`) + a lone/packed CTA (`.cta-pack`).
 3. **Surrounding UI is separate.** `.topbar`, `.filter-row`, `.chip-row`,
    `.action-bar` live outside cards, above/below. The bottom bar has two
    arrangements and they mean different things: the default pack (one wide

package/css/actions.css

@@ -289,7 +289,7 @@
    shadow and read on their own (Lh, 2026-09-12; replaces the 09-11 fade) */
 .action-bar__tier { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
 .action-bar__tier > .btn { flex: 1; }
-.action-bar__tier--link { justify-content: center; } /* a Link under the buttons, e.g. "details" that opens a Modal */
+.action-bar__tier--link { justify-content: center; min-height: 0; } /* a Link under the buttons, e.g. "details" that opens a Modal — its row as tall as a small link, not a tap (Lh 2026-09-23) */
 :has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
 /* more rows (Lh 2026-09-23: a bar may hold several rows of controls — keeping it short is the designer's job): each row past two
    adds a tap-tall row and its gap to the reserve, so the words above never run under the bar */

package/css/base.css

@@ -113,21 +113,21 @@ button { font: inherit; cursor: pointer; }
    a heading, a paragraph, maybe a .cta-pack. Was .section until
    2026-09-16 (Lh: the name said nothing about WHERE it lives; this one does).
    In a .step it is the reading block and step.css adds the flex/scroll rule ---- */
-.base-content {
+.page {
   display: grid;
   gap: var(--base-content-gap, var(--sp-3));
   align-content: start;          /* a tall column never stretches the rows — the words hug the top */
   padding-block: var(--base-content-pad-y, var(--sp-4));
 }
-.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) */
+.page > .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 {
+.page > .card__head > .t-h1 { font-size: var(--fs-h2); }
+.page > :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 */
+.page > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
+.page .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */
   gap: var(--sp-2);

package/css/card.css

@@ -227,13 +227,13 @@
   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 > :is(.card, .page) { 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
+/* pages of WORDS (Lh, 2026-09-20): the same walk with .page pages, on the base — in a .step the
    .pages is the reading block (step.css), the round pager in the bar turns it, the same slideTo().
    <section class="step"><div class="pages">
-     <section class="base-content" aria-current="step">…</section>
-     <section class="base-content" inert>…</section>
+     <section class="page" aria-current="step">…</section>
+     <section class="page" inert>…</section>
    </div></section> <div class="action-bar action-bar--pager">← →</div> */
 ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
 ::view-transition-old(centre-card), ::view-transition-new(centre-card) {

package/css/lists.css

@@ -205,5 +205,9 @@
   padding: 0;
   cursor: pointer;
 }
+/* a SMALL link (Lh 2026-09-23): a thing tapped rarely — "details", a ctaLink — at the minor-link size (15) and 28px of height;
+   its 44px tap target stays, an invisible ::after around it */
+.link--sm { position: relative; font-size: var(--link-sm-font-size, var(--fs-2xs)); min-height: var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)); }
+.link--sm::after { content: ""; position: absolute; inset: calc((var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) - var(--tap-sm)) / 2) 0; }
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
 .card--3 .link--muted { color: var(--card-3-muted); }

package/css/sheet.css

@@ -94,7 +94,7 @@
    setting on a narrow phone) — the strip and the head read the same number, so the title row is always inside the strip */
 :root { --sheet-head-h: max(var(--tap), calc(var(--fs-h2) * 1.25 + var(--sp-2))); }
 
-/* ---- called sheets (Lh, 2026-09-20): a .step whose .base-content has buttons that each CALL a sheet ----
+/* ---- called sheets (Lh, 2026-09-20): a .step whose .page has buttons that each CALL a sheet ----
    .sheet--away = not on the screen: slid all the way out (translate, like every state — the material never
    changes), and hidden once it has left so its shadow does not lie on the step's bottom edge; write it
    with `inert` (the React Sheet does). WHO brings it onto the screen is the app's business — a button, a route:

package/css/stack.css

@@ -232,7 +232,7 @@
 }
 /* a base that is ONE BaseContent is a page's words (a title, a welcome, the news): it reads from the TOP, like any page —
    loose things (a picture, a line) still sit against the peeks (Lh 2026-09-23, the home) */
-.sheet-stack__base:has(> .base-content:only-child) { align-content: start; }
+.sheet-stack__base:has(> .page:only-child) { align-content: start; }
 
 /* back button: lives in a slot the header reserves once open, and DISSOLVES
    into it — an opacity fade in place, never a slide in from the left (the

package/css/step.css

@@ -7,7 +7,7 @@
    (see "LAYERS" below).
 
    <section class="step">
-     <section class="base-content">…the words…</section>               ← first
+     <section class="page">…the words…</section>               ← first
      <article class="card sheet sheet--half">…the controls… <div class="card__foot">…</div></article>  ← last, optional
    </section>
    <div class="action-bar">…</div>   ← only when there is no sheet
@@ -66,14 +66,14 @@
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
 /* a walk (the dots float on its foot): the reading block runs right to the bar's top edge — the reserve's breathing gap (--sp-6)
    is given back, the dots keep the words clear of the bar (Lh 2026-09-23) */
-:has(> .action-bar) .step:has(> .pager__at) { margin-bottom: calc(var(--bar-reserve) - var(--sp-6) + var(--kb, 0rem)); }
+
 /* LAYERS (Lh, 2026-09-20): the base, then the sheet over it, then the top bar. A bar is the BASE's — the
    move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .card__foot
    (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. That is how cardds's
    own screens are composed (the guide); the framework does not police it — a component never changes
    because another one is there. */
 
-/* the reading block: a .base-content (base.css) — the same words-on-the-base
+/* the reading block: a .page (base.css) — the same words-on-the-base
    block as anywhere else (it was .step__card, and a .card before 2026-09-16;
    Lh: a step reads like a page, not a card in a page — so it IS the page's
    block, one name). Here it keeps a card's inner rhythm (a head, --card-gap
@@ -81,7 +81,7 @@
    gets the flex rule: it hugs its content, and when the column runs out (a
    short phone, large text) it shrinks and scrolls inside itself instead of
    pushing the bar or the sheet */
-.step > .base-content, .step > .pages > .base-content {
+.step > .page, .step > .pages > .page {
   --card-pad: 0rem;              /* published for .bleed: nothing to cancel */
   --card-gap: var(--sp-4);
   gap: var(--card-gap);
@@ -89,26 +89,14 @@
   align-content: start;
   color: var(--on-surface);
 }
-/* the reading block is the .base-content — or the .pages that holds several of them, a walk of words
+/* the reading block is the .page — or the .pages that holds several of them, a walk of words
    (card.css). Behind a PEEKED sheet the words keep the strip's room under them, so whatever is down there
    (the buttons that call the other sheets) scrolls clear of it — CSS alone: the box declares --sheet-peek. */
-.step:has(> .sheet--peek) > :is(.base-content, .pages) { padding-bottom: var(--sheet-peek); }
-.step > :is(.base-content, .pages) {
+.step:has(> .sheet--peek) > :is(.page, .pages) { padding-bottom: var(--sheet-peek); }
+.step > :is(.page, .pages) {
   flex: 0 1 auto;
 }
-/* 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 {
-  /* it FLOATS over the reading block's foot (Lh 2026-09-23: the strip it took under the words was wasted room) — the pages
-     run down to the bar, the dots sit on their bottom edge, centred, on the base's ground so a line passing under stays clear of them */
-  position: absolute; bottom: 0; left: 50%; translate: -50% 0; z-index: 2;
-  padding: var(--sp-3) var(--sp-2);
-  border-radius: var(--r-chip);
-  background: var(--surface);
-}
-/* the reading block fills the step, and keeps the dots' height free at the end of its scroll so the last line clears them */
-.step:has(> .pager__at) > :is(.base-content, .pages) { flex: 1 1 auto; padding-bottom: calc(var(--dot) + 2 * var(--sp-3)); }
-.step > :is(.base-content, .pages) {
+.step > :is(.page, .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 */
   overflow-y: auto;
@@ -118,8 +106,8 @@
 /* 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 > .base-content > :is(img, .ph):first-child,
-.step > .pages > .base-content > :is(img, .ph):first-child {
+.step > .page > :is(img, .ph):first-child,
+.step > .pages > .page > :is(img, .ph):first-child {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -127,23 +115,20 @@
 }
 
 /* ============================================================
-   ONE FLEX COLUMN (Lh 2026-09-23: every part of a screen is laid by flex). In a .screen--fill the bar is IN the
-   column, after the step: the step takes what is left (flex: 1), the bar takes what its rows need — measured by the
-   browser, no --bar-reserve arithmetic, so a one-row bar gives its room straight back to the pages. The keyboard lifts
-   the column's end: the screen pads its bottom by --kb, the bar rides on it.
+   TOP + CONTENT in one flex column; BOTTOM is a LAYER over them (Lh 2026-09-23, second call — replaces "the bar is a row"):
+   in a .screen--fill the content runs to the screen's bottom edge, and the bar lies over it at the foot — it covers what is
+   under it, on purpose; nothing is added to the content to make room. The keyboard lifts the layer (--kb).
    (A bar OUTSIDE a fill screen — an app shell, a scrolling screen — is still fixed to the viewport, actions.css.)
    ============================================================ */
 .screen--fill > .action-bar {
-  position: relative; inset: auto; bottom: auto;
-  flex: none;
-  margin-top: auto; /* the column's end, even on a screen with nothing that grows (a centred card is absolute) */
+  position: absolute; inset-inline: 0; top: auto; bottom: var(--kb, 0rem);
   max-width: none;
-  margin-inline: calc(-1 * var(--screen-pad)); /* edge to edge, as the step; the bar's own padding keeps the inset */
+  margin: 0;
+  padding-top: 0; /* no ground of its own, never a solid strip */
 }
-.screen--fill:has(> .action-bar) { padding-bottom: var(--kb, 0rem); }
 .screen--fill:has(> .action-bar) > .step { margin-bottom: 0; }
-/* the step and its bar touch: the screen's gap between two stacked things is not for these two (the bar's own padding is its room) */
-.screen--fill:has(> .step) > .action-bar { margin-top: calc(-1 * var(--screen-gap)); }
+/* the walk's dots are the BOTTOM layer's too (Lh 2026-09-23): a row of the bar, over its buttons, centred */
+.action-bar > .pager__at, .action-bar__tier > .pager__at { align-self: center; }
 /* the TOP is in the column too (Lh 2026-09-23): an .appbar in a fill screen is its first row, not fixed over it — the screen
    reserves nothing for it; the breathing under it stays the one it had (--sp-2), not the screen's gap */
 .screen--fill > .appbar {
@@ -154,4 +139,7 @@
   margin-bottom: calc(var(--sp-2) - var(--screen-gap));
 }
 .screen.screen--fill:has(> .appbar) { padding-top: 0; --header-gap: 0rem; }
+/* …and a STEP touches it, as it touches a TopBar: a full sheet's top edge on the bar's bottom edge (0.6.5 left 8px of base between
+   them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
+.screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }

package/css/tokens.css

@@ -20,7 +20,7 @@
      and never a multiplier, so the proportions of the system hold at any size.
      The px in the comments are at these defaults (1rem = 16px). */
   --sp-base: 0.25rem;  /* 4  spacing: --sp-N = base × N */
-  --fs-base: 1.375rem; /* 22 type: the BODY is the base (Lh 2026-09-22) — every --fs-* is a multiplier of it; nothing under 0.775 (17).
+  --fs-base: 1.375rem; /* 22 type: the BODY is the base (Lh 2026-09-22) — every --fs-* is a multiplier of it; nothing under 0.68 (15, minor links — was 0.775/17 until 2026-09-23). A new size is Lh's call only.
                           Also the member's text-size setting: the app writes it on <html> at run time (2.2rem = 160%) — words grow, things don't */
   --r-base: 1rem;      /* 16 radius: --r-* (--r-chip stays fully round) */
   --tap-base: 3rem;    /* 48 the size of THINGS: touch targets and control heights (--tap*, --btn-h, --chip-h, --bar-h,
@@ -103,6 +103,7 @@
 
   /* THE SCALE (Lh 2026-09-22): 7 sizes for 16 jobs — a size is a job's fit, not a rung; jobs share sizes.
      Nothing that reads is under 17 (the smallest ui: chips). No clamp/vw: a size is one number. */
+  --fs-2xs: calc(var(--fs-base) * 0.68);       /* 15 minor links — a ctaLink, a "details" (Lh 2026-09-23: added by Lh; ONLY Lh adds a size) */
   --fs-xs: calc(var(--fs-base) * 0.775);       /* 17 the smallest ui words: ring xs, a tile-badge label */
   --fs-caption: calc(var(--fs-base) * 0.775);  /* 17 */
   --fs-label: calc(var(--fs-base) * 0.775);    /* 17 chips, buttons' small words */

package/dist/actions/Link.d.ts

@@ -5,11 +5,13 @@ export interface LinkProps extends ComponentProps<'a'> {
     muted?: boolean;
     /** a trailing xs icon (arrow-up-right for "See all") */
     icon?: IconName;
+    /** SMALL: the minor-link size (15) and a 28px line, for what is tapped rarely (details, a ctaLink); the tap target stays 44px */
+    sm?: boolean;
     /** without an href it renders as a button */
     href?: string;
 }
 /** Link — an inline text action big enough to tap (40px): "See all ↗" in a card head, "Skip" between pager buttons. */
-export declare function Link({ muted, icon, href, className, children, ...rest }: LinkProps): import("react").DetailedReactHTMLElement<{
+export declare function Link({ muted, sm, icon, href, className, children, ...rest }: LinkProps): import("react").DetailedReactHTMLElement<{
     ref?: import("react").Ref<HTMLAnchorElement> | undefined;
     key?: import("react").Key | null | undefined;
     download?: any;

package/dist/actions/Link.js

@@ -3,6 +3,6 @@ import { createElement } from 'react';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 /** Link — an inline text action big enough to tap (40px): "See all ↗" in a card head, "Skip" between pager buttons. */
-export function Link({ muted, icon, href, className, children, ...rest }) {
-    return createElement(href ? 'a' : 'button', { href, type: href ? undefined : 'button', className: cx('link', muted && 'link--muted', className), ...rest }, children, icon && _jsx(Icon, { name: icon, size: "xs" }));
+export function Link({ muted, sm, icon, href, className, children, ...rest }) {
+    return createElement(href ? 'a' : 'button', { href, type: href ? undefined : 'button', className: cx('link', muted && 'link--muted', sm && 'link--sm', className), ...rest }, children, icon && _jsx(Icon, { name: icon, size: "xs" }));
 }

package/dist/cardds.css

@@ -61,7 +61,7 @@
      and never a multiplier, so the proportions of the system hold at any size.
      The px in the comments are at these defaults (1rem = 16px). */
   --sp-base: 0.25rem;  /* 4  spacing: --sp-N = base × N */
-  --fs-base: 1.375rem; /* 22 type: the BODY is the base (Lh 2026-09-22) — every --fs-* is a multiplier of it; nothing under 0.775 (17).
+  --fs-base: 1.375rem; /* 22 type: the BODY is the base (Lh 2026-09-22) — every --fs-* is a multiplier of it; nothing under 0.68 (15, minor links — was 0.775/17 until 2026-09-23). A new size is Lh's call only.
                           Also the member's text-size setting: the app writes it on <html> at run time (2.2rem = 160%) — words grow, things don't */
   --r-base: 1rem;      /* 16 radius: --r-* (--r-chip stays fully round) */
   --tap-base: 3rem;    /* 48 the size of THINGS: touch targets and control heights (--tap*, --btn-h, --chip-h, --bar-h,
@@ -144,6 +144,7 @@
 
   /* THE SCALE (Lh 2026-09-22): 7 sizes for 16 jobs — a size is a job's fit, not a rung; jobs share sizes.
      Nothing that reads is under 17 (the smallest ui: chips). No clamp/vw: a size is one number. */
+  --fs-2xs: calc(var(--fs-base) * 0.68);       /* 15 minor links — a ctaLink, a "details" (Lh 2026-09-23: added by Lh; ONLY Lh adds a size) */
   --fs-xs: calc(var(--fs-base) * 0.775);       /* 17 the smallest ui words: ring xs, a tile-badge label */
   --fs-caption: calc(var(--fs-base) * 0.775);  /* 17 */
   --fs-label: calc(var(--fs-base) * 0.775);    /* 17 chips, buttons' small words */
@@ -492,21 +493,21 @@ button { font: inherit; cursor: pointer; }
    a heading, a paragraph, maybe a .cta-pack. Was .section until
    2026-09-16 (Lh: the name said nothing about WHERE it lives; this one does).
    In a .step it is the reading block and step.css adds the flex/scroll rule ---- */
-.base-content {
+.page {
   display: grid;
   gap: var(--base-content-gap, var(--sp-3));
   align-content: start;          /* a tall column never stretches the rows — the words hug the top */
   padding-block: var(--base-content-pad-y, var(--sp-4));
 }
-.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) */
+.page > .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 {
+.page > .card__head > .t-h1 { font-size: var(--fs-h2); }
+.page > :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 */
+.page > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
+.page .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */
   gap: var(--sp-2);
@@ -758,13 +759,13 @@ button { font: inherit; cursor: pointer; }
   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 > :is(.card, .page) { 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
+/* pages of WORDS (Lh, 2026-09-20): the same walk with .page pages, on the base — in a .step the
    .pages is the reading block (step.css), the round pager in the bar turns it, the same slideTo().
    <section class="step"><div class="pages">
-     <section class="base-content" aria-current="step">…</section>
-     <section class="base-content" inert>…</section>
+     <section class="page" aria-current="step">…</section>
+     <section class="page" inert>…</section>
    </div></section> <div class="action-bar action-bar--pager">← →</div> */
 ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
 ::view-transition-old(centre-card), ::view-transition-new(centre-card) {
@@ -1070,7 +1071,7 @@ button { font: inherit; cursor: pointer; }
 }
 /* a base that is ONE BaseContent is a page's words (a title, a welcome, the news): it reads from the TOP, like any page —
    loose things (a picture, a line) still sit against the peeks (Lh 2026-09-23, the home) */
-.sheet-stack__base:has(> .base-content:only-child) { align-content: start; }
+.sheet-stack__base:has(> .page:only-child) { align-content: start; }
 
 /* back button: lives in a slot the header reserves once open, and DISSOLVES
    into it — an opacity fade in place, never a slide in from the left (the
@@ -1247,7 +1248,7 @@ button { font: inherit; cursor: pointer; }
    setting on a narrow phone) — the strip and the head read the same number, so the title row is always inside the strip */
 :root { --sheet-head-h: max(var(--tap), calc(var(--fs-h2) * 1.25 + var(--sp-2))); }
 
-/* ---- called sheets (Lh, 2026-09-20): a .step whose .base-content has buttons that each CALL a sheet ----
+/* ---- called sheets (Lh, 2026-09-20): a .step whose .page has buttons that each CALL a sheet ----
    .sheet--away = not on the screen: slid all the way out (translate, like every state — the material never
    changes), and hidden once it has left so its shadow does not lie on the step's bottom edge; write it
    with `inert` (the React Sheet does). WHO brings it onto the screen is the app's business — a button, a route:
@@ -1532,7 +1533,7 @@ button { font: inherit; cursor: pointer; }
    (see "LAYERS" below).
 
    <section class="step">
-     <section class="base-content">…the words…</section>               ← first
+     <section class="page">…the words…</section>               ← first
      <article class="card sheet sheet--half">…the controls… <div class="card__foot">…</div></article>  ← last, optional
    </section>
    <div class="action-bar">…</div>   ← only when there is no sheet
@@ -1591,14 +1592,14 @@ button { font: inherit; cursor: pointer; }
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
 /* a walk (the dots float on its foot): the reading block runs right to the bar's top edge — the reserve's breathing gap (--sp-6)
    is given back, the dots keep the words clear of the bar (Lh 2026-09-23) */
-:has(> .action-bar) .step:has(> .pager__at) { margin-bottom: calc(var(--bar-reserve) - var(--sp-6) + var(--kb, 0rem)); }
+
 /* LAYERS (Lh, 2026-09-20): the base, then the sheet over it, then the top bar. A bar is the BASE's — the
    move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .card__foot
    (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. That is how cardds's
    own screens are composed (the guide); the framework does not police it — a component never changes
    because another one is there. */
 
-/* the reading block: a .base-content (base.css) — the same words-on-the-base
+/* the reading block: a .page (base.css) — the same words-on-the-base
    block as anywhere else (it was .step__card, and a .card before 2026-09-16;
    Lh: a step reads like a page, not a card in a page — so it IS the page's
    block, one name). Here it keeps a card's inner rhythm (a head, --card-gap
@@ -1606,7 +1607,7 @@ button { font: inherit; cursor: pointer; }
    gets the flex rule: it hugs its content, and when the column runs out (a
    short phone, large text) it shrinks and scrolls inside itself instead of
    pushing the bar or the sheet */
-.step > .base-content, .step > .pages > .base-content {
+.step > .page, .step > .pages > .page {
   --card-pad: 0rem;              /* published for .bleed: nothing to cancel */
   --card-gap: var(--sp-4);
   gap: var(--card-gap);
@@ -1614,26 +1615,14 @@ button { font: inherit; cursor: pointer; }
   align-content: start;
   color: var(--on-surface);
 }
-/* the reading block is the .base-content — or the .pages that holds several of them, a walk of words
+/* the reading block is the .page — or the .pages that holds several of them, a walk of words
    (card.css). Behind a PEEKED sheet the words keep the strip's room under them, so whatever is down there
    (the buttons that call the other sheets) scrolls clear of it — CSS alone: the box declares --sheet-peek. */
-.step:has(> .sheet--peek) > :is(.base-content, .pages) { padding-bottom: var(--sheet-peek); }
-.step > :is(.base-content, .pages) {
+.step:has(> .sheet--peek) > :is(.page, .pages) { padding-bottom: var(--sheet-peek); }
+.step > :is(.page, .pages) {
   flex: 0 1 auto;
 }
-/* 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 {
-  /* it FLOATS over the reading block's foot (Lh 2026-09-23: the strip it took under the words was wasted room) — the pages
-     run down to the bar, the dots sit on their bottom edge, centred, on the base's ground so a line passing under stays clear of them */
-  position: absolute; bottom: 0; left: 50%; translate: -50% 0; z-index: 2;
-  padding: var(--sp-3) var(--sp-2);
-  border-radius: var(--r-chip);
-  background: var(--surface);
-}
-/* the reading block fills the step, and keeps the dots' height free at the end of its scroll so the last line clears them */
-.step:has(> .pager__at) > :is(.base-content, .pages) { flex: 1 1 auto; padding-bottom: calc(var(--dot) + 2 * var(--sp-3)); }
-.step > :is(.base-content, .pages) {
+.step > :is(.page, .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 */
   overflow-y: auto;
@@ -1643,8 +1632,8 @@ button { font: inherit; cursor: pointer; }
 /* 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 > .base-content > :is(img, .ph):first-child,
-.step > .pages > .base-content > :is(img, .ph):first-child {
+.step > .page > :is(img, .ph):first-child,
+.step > .pages > .page > :is(img, .ph):first-child {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -1652,23 +1641,20 @@ button { font: inherit; cursor: pointer; }
 }
 
 /* ============================================================
-   ONE FLEX COLUMN (Lh 2026-09-23: every part of a screen is laid by flex). In a .screen--fill the bar is IN the
-   column, after the step: the step takes what is left (flex: 1), the bar takes what its rows need — measured by the
-   browser, no --bar-reserve arithmetic, so a one-row bar gives its room straight back to the pages. The keyboard lifts
-   the column's end: the screen pads its bottom by --kb, the bar rides on it.
+   TOP + CONTENT in one flex column; BOTTOM is a LAYER over them (Lh 2026-09-23, second call — replaces "the bar is a row"):
+   in a .screen--fill the content runs to the screen's bottom edge, and the bar lies over it at the foot — it covers what is
+   under it, on purpose; nothing is added to the content to make room. The keyboard lifts the layer (--kb).
    (A bar OUTSIDE a fill screen — an app shell, a scrolling screen — is still fixed to the viewport, actions.css.)
    ============================================================ */
 .screen--fill > .action-bar {
-  position: relative; inset: auto; bottom: auto;
-  flex: none;
-  margin-top: auto; /* the column's end, even on a screen with nothing that grows (a centred card is absolute) */
+  position: absolute; inset-inline: 0; top: auto; bottom: var(--kb, 0rem);
   max-width: none;
-  margin-inline: calc(-1 * var(--screen-pad)); /* edge to edge, as the step; the bar's own padding keeps the inset */
+  margin: 0;
+  padding-top: 0; /* no ground of its own, never a solid strip */
 }
-.screen--fill:has(> .action-bar) { padding-bottom: var(--kb, 0rem); }
 .screen--fill:has(> .action-bar) > .step { margin-bottom: 0; }
-/* the step and its bar touch: the screen's gap between two stacked things is not for these two (the bar's own padding is its room) */
-.screen--fill:has(> .step) > .action-bar { margin-top: calc(-1 * var(--screen-gap)); }
+/* the walk's dots are the BOTTOM layer's too (Lh 2026-09-23): a row of the bar, over its buttons, centred */
+.action-bar > .pager__at, .action-bar__tier > .pager__at { align-self: center; }
 /* the TOP is in the column too (Lh 2026-09-23): an .appbar in a fill screen is its first row, not fixed over it — the screen
    reserves nothing for it; the breathing under it stays the one it had (--sp-2), not the screen's gap */
 .screen--fill > .appbar {
@@ -1679,6 +1665,9 @@ button { font: inherit; cursor: pointer; }
   margin-bottom: calc(var(--sp-2) - var(--screen-gap));
 }
 .screen.screen--fill:has(> .appbar) { padding-top: 0; --header-gap: 0rem; }
+/* …and a STEP touches it, as it touches a TopBar: a full sheet's top edge on the bar's bottom edge (0.6.5 left 8px of base between
+   them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
+.screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
 
 /* ---- css/forms.css — outlined fields, add-row ---- */
@@ -2099,7 +2088,7 @@ button { font: inherit; cursor: pointer; }
    shadow and read on their own (Lh, 2026-09-12; replaces the 09-11 fade) */
 .action-bar__tier { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
 .action-bar__tier > .btn { flex: 1; }
-.action-bar__tier--link { justify-content: center; } /* a Link under the buttons, e.g. "details" that opens a Modal */
+.action-bar__tier--link { justify-content: center; min-height: 0; } /* a Link under the buttons, e.g. "details" that opens a Modal — its row as tall as a small link, not a tap (Lh 2026-09-23) */
 :has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
 /* more rows (Lh 2026-09-23: a bar may hold several rows of controls — keeping it short is the designer's job): each row past two
    adds a tap-tall row and its gap to the reserve, so the words above never run under the bar */
@@ -3004,6 +2993,10 @@ button { font: inherit; cursor: pointer; }
   padding: 0;
   cursor: pointer;
 }
+/* a SMALL link (Lh 2026-09-23): a thing tapped rarely — "details", a ctaLink — at the minor-link size (15) and 28px of height;
+   its 44px tap target stays, an invisible ::after around it */
+.link--sm { position: relative; font-size: var(--link-sm-font-size, var(--fs-2xs)); min-height: var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)); }
+.link--sm::after { content: ""; position: absolute; inset: calc((var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) - var(--tap-sm)) / 2) 0; }
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
 .card--3 .link--muted { color: var(--card-3-muted); }
 

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export * from './scaffold/ActionBar.js';
 export * from './scaffold/PagerAt.js';
 export * from './scaffold/FloatBar.js';
 export * from './scaffold/FilterRow.js';
-export * from './scaffold/BaseContent.js';
+export * from './scaffold/Page.js';
 export * from './scaffold/EmptyState.js';
 export * from './scaffold/Centre.js';
 export * from './cards/Card.js';

package/dist/index.js

@@ -13,7 +13,7 @@ export * from './scaffold/ActionBar.js';
 export * from './scaffold/PagerAt.js';
 export * from './scaffold/FloatBar.js';
 export * from './scaffold/FilterRow.js';
-export * from './scaffold/BaseContent.js';
+export * from './scaffold/Page.js';
 export * from './scaffold/EmptyState.js';
 export * from './scaffold/Centre.js';
 export * from './cards/Card.js';

package/dist/scaffold/Centre.d.ts

@@ -17,7 +17,7 @@ export interface PagesProps extends ComponentProps<'div'> {
  * Pages — the pages of a walk, all one height: every page is rendered, stacked in one cell as tall as the
  * tallest at any text size. Give the current one `aria-current="step"` and every other one `inert`
  * (hidden in place, out of the tab order). Turn with slideTo().
- * Pages of cards: `Card`s, inside a Centre, above the PagerAt. Pages of words: `BaseContent`s, as a Step's
+ * Pages of cards: `Card`s, inside a Centre, above the PagerAt. Pages of words: `Page`s, as a Step's
  * reading block (no Sheet on that screen — a pager never works beside one), the round pager in the ActionBar.
  */
 export declare function Pages({ className, ...rest }: PagesProps): import("react").JSX.Element;

package/dist/scaffold/Centre.js

@@ -17,7 +17,7 @@ export function Centre({ className, ...rest }) {
  * Pages — the pages of a walk, all one height: every page is rendered, stacked in one cell as tall as the
  * tallest at any text size. Give the current one `aria-current="step"` and every other one `inert`
  * (hidden in place, out of the tab order). Turn with slideTo().
- * Pages of cards: `Card`s, inside a Centre, above the PagerAt. Pages of words: `BaseContent`s, as a Step's
+ * Pages of cards: `Card`s, inside a Centre, above the PagerAt. Pages of words: `Page`s, as a Step's
  * reading block (no Sheet on that screen — a pager never works beside one), the round pager in the ActionBar.
  */
 export function Pages({ className, ...rest }) {

package/dist/scaffold/Page.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+export interface PageProps extends ComponentProps<'section'> {
+}
+/**
+ * Page — ONE page of words in the content: a picture (optional, first — it stays put while the words scroll), a heading, the words,
+ * maybe a CtaPack. A component INSIDE the content box, never the box itself (Lh 2026-09-23): several Pages in a `Pages` = a walk the
+ * pager turns (slideTo); a single one sits in the content (a Step) directly. Was BaseContent until 2026-09-23 — "words on the base" meant
+ * a still, one-scaffold screen, which is gone.
+ */
+export declare function Page({ className, ...rest }: PageProps): import("react").JSX.Element;
+/** @deprecated renamed `Page` (2026-09-23) — same props, same markup; kept one version for the move */
+export declare function BaseContent(props: PageProps): import("react").JSX.Element;
+export type BaseContentProps = PageProps;
+export interface CtaPackProps extends ComponentProps<'div'> {
+}
+/** CtaPack — the buttons under a Page's words, wrapping on one line. In a Step it holds ways in (each opens a sheet — the app wires that); the Step's own move is never here. */
+export declare function CtaPack({ className, ...rest }: CtaPackProps): import("react").JSX.Element;

package/dist/scaffold/Page.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/**
+ * Page — ONE page of words in the content: a picture (optional, first — it stays put while the words scroll), a heading, the words,
+ * maybe a CtaPack. A component INSIDE the content box, never the box itself (Lh 2026-09-23): several Pages in a `Pages` = a walk the
+ * pager turns (slideTo); a single one sits in the content (a Step) directly. Was BaseContent until 2026-09-23 — "words on the base" meant
+ * a still, one-scaffold screen, which is gone.
+ */
+export function Page({ className, ...rest }) {
+    return _jsx("section", { className: cx('page', className), ...rest });
+}
+let warned = false;
+/** @deprecated renamed `Page` (2026-09-23) — same props, same markup; kept one version for the move */
+export function BaseContent(props) {
+    if (!warned) {
+        warned = true;
+        console.warn('cardds: BaseContent is now Page — rename it (same props).');
+    }
+    return _jsx(Page, { ...props });
+}
+/** CtaPack — the buttons under a Page's words, wrapping on one line. In a Step it holds ways in (each opens a sheet — the app wires that); the Step's own move is never here. */
+export function CtaPack({ className, ...rest }) {
+    return _jsx("div", { className: cx('cta-pack', className), ...rest });
+}

package/dist/scaffold/Screen.d.ts

@@ -8,15 +8,15 @@ export interface ScreenProps extends ComponentProps<'div'> {
     as?: 'div' | 'main' | 'section';
     /** TOP: a `TopBar` / `AppBar`, or `"lead"` — no bar, the content starts `--screen-lead` (15% of the screen) down */
     top?: ReactNode | 'lead';
-    /** BOTTOM: an `ActionBar` (or a `FloatBar`) — laid at the end of the screen's flex column, as tall as its rows need.
+    /** BOTTOM: an `ActionBar` (or a `FloatBar`) — a LAYER over the content's foot, as tall as its rows need.
      *  Never with a `Sheet` in the content: a sheet finishes on its own foot (warns once). */
     bottom?: ReactNode;
 }
 /**
- * Screen — the mobile screen, THREE parts in one flex column: **top** · **content** (the children) · **bottom**.
- * Top = `TopBar` / `AppBar`, or `top="lead"` (no bar, the words start 15% down). Content = a `Step` (`Pages` / `BaseContent`
- * [+ `Sheet`]), a `Centre`, a `SheetStack`… Bottom = an `ActionBar` (`FloatBar`), measured by the browser: the content takes
- * all the rest (`fill`). Max 25rem wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
+ * Screen — the mobile screen in THREE parts: **top** and **content** (the children) in one flex column, the content down to the
+ * screen's foot; **bottom** a LAYER over it there (Lh 2026-09-23). Top = `TopBar` / `AppBar`, or `top="lead"` (no bar, the words start
+ * 15% down). Content = a box of components one after another — a `Step` (`Pages` of `Page`s / a `Page` [+ `Sheet`]), a `Centre`, a
+ * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 25rem wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
  * The slots set the order; children laid by hand in the same order still work.
  */
 export declare function Screen({ fill, palette, as, top, bottom, className, children, ref, ...rest }: ScreenProps): import("react").DetailedReactHTMLElement<{

package/dist/scaffold/Screen.js

@@ -2,10 +2,10 @@ import { createElement, useEffect, useRef } from 'react';
 import { cx } from '../cx.js';
 let warnedSheetBar = false;
 /**
- * Screen — the mobile screen, THREE parts in one flex column: **top** · **content** (the children) · **bottom**.
- * Top = `TopBar` / `AppBar`, or `top="lead"` (no bar, the words start 15% down). Content = a `Step` (`Pages` / `BaseContent`
- * [+ `Sheet`]), a `Centre`, a `SheetStack`… Bottom = an `ActionBar` (`FloatBar`), measured by the browser: the content takes
- * all the rest (`fill`). Max 25rem wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
+ * Screen — the mobile screen in THREE parts: **top** and **content** (the children) in one flex column, the content down to the
+ * screen's foot; **bottom** a LAYER over it there (Lh 2026-09-23). Top = `TopBar` / `AppBar`, or `top="lead"` (no bar, the words start
+ * 15% down). Content = a box of components one after another — a `Step` (`Pages` of `Page`s / a `Page` [+ `Sheet`]), a `Centre`, a
+ * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 25rem wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
  * The slots set the order; children laid by hand in the same order still work.
  */
 export function Screen({ fill, palette, as = 'div', top, bottom, className, children, ref, ...rest }) {

package/dist/sheets/Step.d.ts

@@ -2,9 +2,9 @@ import type { ComponentProps } from 'react';
 export interface StepProps extends ComponentProps<'section'> {
 }
 /**
- * Step — one screen, one task. Children: a BaseContent first (what the member READS — words on the base, not a card), an optional Sheet last
+ * Step — one screen, one task. Children: a Page first (what the member READS — words on the base, not a card), an optional Sheet last
  * (what the member DOES); the ActionBar is the Screen's `bottom`, after the Step. It is a `Screen fill`'s content: it takes
  * all the height the top and the bottom leave (one flex column), bleeds to the screen's edges (the sheet is full-width), and follows its TopBar/AppBar directly.
- * Reads → BaseContent only. Acts → BaseContent + Sheet. Never hand-lay a step, never write a sheet height.
+ * Reads → Page only. Acts → Page + Sheet. Never hand-lay a step, never write a sheet height.
  */
 export declare function Step({ className, ...rest }: StepProps): import("react").JSX.Element;

package/dist/sheets/Step.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /**
- * Step — one screen, one task. Children: a BaseContent first (what the member READS — words on the base, not a card), an optional Sheet last
+ * Step — one screen, one task. Children: a Page first (what the member READS — words on the base, not a card), an optional Sheet last
  * (what the member DOES); the ActionBar is the Screen's `bottom`, after the Step. It is a `Screen fill`'s content: it takes
  * all the height the top and the bottom leave (one flex column), bleeds to the screen's edges (the sheet is full-width), and follows its TopBar/AppBar directly.
- * Reads → BaseContent only. Acts → BaseContent + Sheet. Never hand-lay a step, never write a sheet height.
+ * Reads → Page only. Acts → Page + Sheet. Never hand-lay a step, never write a sheet height.
  */
 export function Step({ className, ...rest }) {
     return _jsx("section", { className: cx('step', className), ...rest });

package/dist/templates/Home.d.ts

@@ -28,7 +28,7 @@ export interface HomeProps extends Omit<ComponentProps<typeof Screen>, 'children
     open?: number | null;
     defaultOpen?: number | null;
     onOpenChange?: (open: number | null) => void;
-    /** CONTENT above the sheet heads — one `BaseContent`: a welcome, the news, a picture. It reads
+    /** CONTENT above the sheet heads — one `Page`: a welcome, the news, a picture. It reads
      *  from the top; a sheet coming up covers it */
     base?: ReactNode;
     /** keep a sheet's body mounted after it closes (it opens again at once, scrolled where it was); default: dropped */

package/dist/templates/Walkthrough.d.ts

@@ -25,7 +25,7 @@ export interface WalkthroughProps extends Omit<ComponentProps<typeof Screen>, 'c
     cta?: ReactNode | ((c: WalkthroughCta) => ReactNode);
     /** rows of controls ABOVE the CTA row (a text-size Slider…), one row each, top to bottom — keep them few */
     controls?: ReactNode[];
-    /** a line UNDER the row: a `Link` (e.g. "developer details" that opens a Modal) — centred, one line */
+    /** a line UNDER the row: a `Link sm` (e.g. "developer details" that opens a Modal) — centred, one short line */
     ctaLink?: ReactNode;
     /** layers over the screen: the app's `SheetStage dim` + `Modal` that a link or button opens (the app wires it) */
     children?: 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` · bottom: `ActionBar`.
+ * 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.
  * 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

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useRef, useState } from 'react';
 import { Screen } from '../scaffold/Screen.js';
 import { Step } from '../sheets/Step.js';
-import { BaseContent } from '../scaffold/BaseContent.js';
+import { Page } from '../scaffold/Page.js';
 import { Pages, slideTo } from '../scaffold/Centre.js';
 import { PagerAt } from '../scaffold/PagerAt.js';
 import { ActionBar, ActionBarTier } from '../scaffold/ActionBar.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` · bottom: `ActionBar`.
+ * 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.
  * 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.
@@ -29,6 +29,7 @@ export function Walkthrough({ pages, at: atProp, defaultAt = 0, onAtChange, cta,
     const row = typeof cta === 'function' ? cta({ at, count, go }) : cta;
     const custom = row !== undefined && row !== null;
     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 bottom = controls.length || ctaLink != null ? (_jsxs(ActionBar, { variant: "tiers", children: [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: [_jsxs(Step, { ref: step, children: [_jsx(Pages, { children: pages.map((p, i) => (_jsxs(BaseContent, { "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))) }), count > 1 && _jsx(PagerAt, { at: at + 1, of: count })] }), children] }));
+    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] }));
 }

package/package.json

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

package/dist/scaffold/BaseContent.d.ts

@@ -1,17 +0,0 @@
-import type { ComponentProps } from 'react';
-export interface BaseContentProps extends ComponentProps<'section'> {
-}
-/**
- * BaseContent — words straight on the base, no card around them: a heading, a paragraph,
- * maybe a CtaPack. Content has three homes (Card · Sheet · the base); this is the third one, named.
- * Was Section (and, inside a Step, StepCard) until 2026-09-16 — one block, one name.
- * In a Step it is the reading block (first child; the step's MOVE goes to the ActionBar, never here). It can move two ways
- * (Lh 2026-09-20): several of them in a `Pages` = a walk of words the round pager turns (slideTo); or a CtaPack of WAYS IN
- * (sign in · new phone · join) — plain `Btn`s; what each one opens (a `Sheet` holding that way's whole form) is the APP's wiring, not
- * cardds's. The base itself carries no control; a form is never taken apart across it. Never both: a pager never works beside a sheet.
- */
-export declare function BaseContent({ className, ...rest }: BaseContentProps): import("react").JSX.Element;
-export interface CtaPackProps extends ComponentProps<'div'> {
-}
-/** CtaPack — the buttons under a BaseContent's words, wrapping on one line. In a Step it holds ways in (each opens a sheet — the app wires that); the Step's own move is never here. */
-export declare function CtaPack({ className, ...rest }: CtaPackProps): import("react").JSX.Element;

package/dist/scaffold/BaseContent.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx.js';
-/**
- * BaseContent — words straight on the base, no card around them: a heading, a paragraph,
- * maybe a CtaPack. Content has three homes (Card · Sheet · the base); this is the third one, named.
- * Was Section (and, inside a Step, StepCard) until 2026-09-16 — one block, one name.
- * In a Step it is the reading block (first child; the step's MOVE goes to the ActionBar, never here). It can move two ways
- * (Lh 2026-09-20): several of them in a `Pages` = a walk of words the round pager turns (slideTo); or a CtaPack of WAYS IN
- * (sign in · new phone · join) — plain `Btn`s; what each one opens (a `Sheet` holding that way's whole form) is the APP's wiring, not
- * cardds's. The base itself carries no control; a form is never taken apart across it. Never both: a pager never works beside a sheet.
- */
-export function BaseContent({ className, ...rest }) {
-    return _jsx("section", { className: cx('base-content', className), ...rest });
-}
-/** CtaPack — the buttons under a BaseContent's words, wrapping on one line. In a Step it holds ways in (each opens a sheet — the app wires that); the Step's own move is never here. */
-export function CtaPack({ className, ...rest }) {
-    return _jsx("div", { className: cx('cta-pack', className), ...rest });
-}