@usableapp/cardds 0.6.4 → 0.6.5

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 > 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.5 — 2026-09-23
+
+### A screen is top · content · bottom, one flex column (Lh 2026-09-23)
+- **`Screen top` / `bottom`** (new): `top` = `TopBar` / `AppBar` / `"lead"` (no bar, the words 15% down) · children = content · `bottom` = `ActionBar` / `FloatBar`. The browser measures the bar; the content takes the rest.
+- **Before → after:** in a `Screen fill` the `ActionBar` and the `AppBar` are **rows of the screen's column**, not `position: fixed` over it. Put the bar INSIDE the Screen (as `bottom` or its last child). A bar after `</Screen>`, or one given `position` by hand, is now wrong (`validateScreen` in scripts/validate.mjs fails it). A bar outside a fill screen (an app shell) still works the old fixed way.
+- The walk's dots (`PagerAt`) float over the foot of the pages; the pages run down to the bar.
+- `Screen` warns once when a screen has both a `Sheet` and a bar.
+
+### Templates (new)
+- **`Walkthrough`** — top `lead` · content `Pages` (media · heading · body) · bottom `ActionBar` (`controls` rows · the `cta` row — the pager by default, or a function of `{ at, count, go }` · `ctaLink`); children = layers over it.
+- **`Home`** — top `AppBar` · content: `base` over a closed `SheetStack` · no bottom. `title` = the page's h1, read aloud, not shown. Only the open sheet's body is rendered.
+
+### New and changed
+- **`StackSheet`** (new): one sheet of a SheetStack — head (back · title · icon tabs with a count) · body · foot. A tap on a tab of a closed sheet opens it on that tab; a tap on the open sheet's title folds it.
+- **`StackBack`**: a small 32px disc with a chevron (was a 44px disc with an arrow); the tap target is still 44px.
+- A stacked sheet with a `SheetBody` has the one sheet shape (head pinned, body scrolls, foot at the bottom). A closed stack sheet can't be text-selected.
+- **`AppBar brandButton`**: the mark + the name become one button (`popoverTarget` opens a `Menu`).
+- **`Toggle text`**: words shown before the switch, one tap target.
+- **`Text sr`**: read by a screen reader, not shown.
+- **`SheetStage over`**: a stage laid over its screen (a Modal a link opened).
+- Icons `megaphone`, `log-out`.
+
 ## 0.6.4 — 2026-09-23
 
 - **Fold card: the corner is cut** (Lh 2026-09-23): the triangle under the flap shows what is behind the card, instead of the card's own colour, which read as a second card underneath. Nothing to change in an app.

package/README.md

@@ -74,16 +74,30 @@ import '@usableapp/cardds/dist/cardds.css';   // the CSS, fonts resolve from the
 ```
 
 
-**Browsers** (checked 2026-09-23): works on browsers from **early 2025** on.
+**เบราว์เซอร์** (เช็ก 2026-09-23): ใช้ได้กับเบราว์เซอร์ตั้งแต่**ต้นปี 2025** ขึ้นไป
 
-| Browser | Minimum | Released | Phones |
+| เบราว์เซอร์ | ขั้นต่ำ | ออกเมื่อ | เครื่องที่ใช้ได้ |
 |---|---|---|---|
-| Safari / iOS | 18.3 | Jan 2025 | iPhone XS / XR (2018) and newer, updated |
-| Chrome | 114 | May 2023 | most Android phones with Chrome kept up to date |
-| Firefox | 128 | Jul 2024 | — |
+| Safari / iOS | 18.3 | ม.ค. 2025 | iPhone XS / XR (2018) ขึ้นไป ที่อัปเดตแล้ว |
+| Chrome | 114 | พ.ค. 2023 | Android ส่วนใหญ่ที่ Chrome อัปเดตอยู่ |
+| Firefox | 128 | ก.ค. 2024 | — |
 
-Older than that: menus and dropdowns don't open. On browsers between the minimum and
-the newest, a menu opens in the middle of the screen instead of under its button.
+เก่ากว่านี้: เมนูและ dropdown เปิดไม่ได้ ส่วนเบราว์เซอร์ที่ผ่านขั้นต่ำแต่ยังไม่ใช่รุ่นล่าสุด
+เมนูจะขึ้นกลางจอแทนที่จะอยู่ใต้ปุ่ม
+
+สำหรับโปรเจกต์ที่อยากเช็กเบราว์เซอร์ก่อนเริ่ม (เช่นหน้าติดตั้ง): เช็กเฉพาะฟีเจอร์ที่**จำเป็น**
+ตัวอื่น cardds มีตัวสำรองไว้แล้ว ไม่ต้องเช็ก
+
+| จำเป็น: ไม่มีแล้วหน้าจอพัง | วิธีเช็ก |
+|---|---|
+| popover | `'popover' in HTMLElement.prototype` |
+| `@property` | `'registerProperty' in CSS` |
+| `color-mix()` | `CSS.supports('color', 'color-mix(in srgb, red, blue)')` |
+| container queries | `CSS.supports('container-type: size') && CSS.supports('height: 1cqh')` |
+| `:has()` | `CSS.supports('selector(:has(a))')` |
+
+มีตัวสำรองแล้ว ไม่ต้องเช็ก: anchor positioning, view transitions, `@starting-style`, `text-wrap`
+iOS 17–18.2 เช็กผ่าน แต่ยังรองรับไม่เต็ม เมนูอาจแสดงผิดเล็กน้อย
 
 Working with Claude in another project? The `/cardds` skill
 (`~/.claude/skills/cardds/`) carries the install and the contract, and points
@@ -143,6 +157,37 @@ the card is the material, the sheet is what it is in the stack.
   one — the members are sheets and the stack is the menu, not a list of cards.
   Never bring it back, not even as an alias.
 
+## Screen: top · content · bottom
+
+**Every screen is three parts in ONE flex column** (Lh 2026-09-23) — the words used to ask for a screen, and the props
+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` … |
+| **bottom** | `bottom` | `ActionBar` (rows: `controls` · the one `cta` row — the pager ← → or one wide button · a `ctaLink`) · `FloatBar` · nothing |
+
+```tsx
+<Screen fill top="lead" bottom={<ActionBar variant="pager">…</ActionBar>}>
+  <Step><Pages>…</Pages><PagerAt at={1} of={3} /></Step>
+</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).
+- **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
+  `tests/composition.spec.js`) fails a bar after `</Screen>` or a pinned bar, warns on a Sheet + ActionBar.
+- **Templates** are `Screen`s with the three parts filled (`Walkthrough` = top `lead` · content `Pages` · bottom
+  `ActionBar`); the gallery draws those parts on a template's page. The gallery's nav groups the components by
+  the part they fill: *top* · *content* · *bottom*.
+
 ## Step markup
 
 A step is one screen, one task (see *Anatomy*). It is the other component
@@ -156,7 +201,7 @@ whose markup has rules, because the sheet's box is the step itself:
     <p class="t-body">…</p>
   </section>
 </section>
-<div class="action-bar action-bar--pager">…</div>
+<div class="action-bar action-bar--pager">…</div>   <!-- the screen's bottom: inside .screen, after the step -->
 
 <!-- acts: the words + a sheet -->
 <section class="step">
@@ -201,9 +246,10 @@ whose markup has rules, because the sheet's box is the step itself:
   breathing (`--header-gap`), and the card takes that room as its lead. A
   step that follows anything else keeps the screen's gap, and the sheet
   stops under that thing.
-- **The bar is outside the step**, after it. `.step` reads the bar's room
-  from `--bar-reserve`; any parent that hosts the `.action-bar` counts
-  (`<body>`, an app shell, a demo frame).
+- **The bar is after the step, inside the screen** (the screen's bottom — *Screen: top · content · bottom*). In a
+  `.screen--fill` the step and the bar share one flex column and touch; the step takes the rest. (A bar outside a
+  fill screen — an app shell — is still fixed to the viewport and the step reads `--bar-reserve`: the old way,
+  kept until 0.7.0.)
 - **Every sheet has one shape** (Lh 2026-09-21): the handle and the head stay at the top and never scroll · the
   foot's button stands at the bottom — above the keyboard when there is one (`--kb`: a step gives the keyboard
   its room, a stage sheet gives it up itself as `--_lift`) · everything between them scrolls, as far as it
@@ -259,10 +305,9 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   the inset as padding, so a deck's fanned cards may overhang and clip at the
   screen's edges (the fold visual, not a bug), and stacks its children at the
   screen's gap. Never hand-lay `top: 40%` on a screen.
-- **The bar is outside, as always.** Plain `.action-bar` for one move; with a
+- **The bar is the screen's bottom.** Plain `.action-bar` for one move; with a
   control that belongs to the screen (a slider), `.action-bar--tiers` stacks a
-  control tier above the buttons and publishes the taller reserve
-  (`--bar-reserve`) from whatever parent hosts the bar.
+  control tier above the buttons (it publishes the taller `--bar-reserve` the centred card still reads for its cap).
 - **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).
@@ -282,8 +327,8 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 - **A pager turns pages of words, never a screen with a sheet** (Lh 2026-09-20). A
   sheet means this screen has work that cannot be walked past: no ← →, no bar at all — the sheet's
   own foot finishes it. (Guidance — not enforced.)
-- A screen is **base, top menu, bottom menu, content**. The base is the
-  surface; the menus are the chrome above and below (`.topbar` / `.appbar`,
+- A screen is **top · content · bottom** on the base (*Screen: top · content · bottom*). The base is the
+  surface; top and bottom are the chrome above and below (`.topbar` / `.appbar`,
   `.action-bar` / `.float-bar`); content is everything between.
 - Content has three homes: **on the base**, **in a card**, **in a bottom
   sheet**. Content normally comes in cards; static data (a blurb, a legal
@@ -323,8 +368,8 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   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
-  `.sheet` in front of it; the screen's one move is `.action-bar`, outside
-  the step, below it. A step where the member only READS is the card alone.
+  `.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
   the sheet: peek shows its handle and title row, half shows half of it,
   full slides up until its top edge touches the top bar — and at every one
@@ -374,6 +419,8 @@ Demo: the *skeleton* block at the top of `elements.html`.
    room itself, as a bottom margin, reading the same `--bar-reserve`. The
    reserves use the nominal control height, so a bar whose button wraps to two
    lines can still overlap the last line of content.
+   **In a `.screen--fill` none of this applies to a bar in the screen** (2026-09-23): it is the column's last
+   part and the browser measures it — the reserves are the old way for a bar outside a fill screen.
    **Padding is published, not copied.** `.screen` sets `--screen-pad` and
    `--screen-gap`, its appbar reserve sets `--header-gap`, and `.card` sets
    `--card-pad` and `--card-gap`; anything that has to cancel a container's

package/css/actions.css

@@ -64,6 +64,15 @@
 .screen:has(> .appbar) { --header-gap: var(--sp-2); padding-top: calc(var(--header-h) + var(--header-gap)); }
 .appbar__brand { flex: 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
 .appbar__text { display: grid; min-width: 0; flex: 1; } /* pushes trailing button to the right edge */
+/* the mark + the words as ONE button (AppBar brandButton — the member's name opens their menu, Lh 2026-09-23): the same row, a tap target */
+.appbar__who {
+  flex: 1; min-width: 0; min-height: var(--tap);
+  display: flex; align-items: center; gap: var(--sp-2);
+  padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
+  border-radius: var(--appbar-who-radius, var(--r-chip));
+  -webkit-tap-highlight-color: transparent;
+}
+.appbar__who:focus-visible { outline: var(--focus); outline-offset: 2px; }
 .appbar__title, .appbar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } /* clipped lines: room for Thai marks */
 .appbar__title { font: var(--type-label); }
 .appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
@@ -280,7 +289,13 @@
    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 */
 :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 */
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(3)) { --bar-reserve: calc(2 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(4)) { --bar-reserve: calc(3 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(5)) { --bar-reserve: calc(4 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
 
 /* the first round button sits at the left edge, the last at the right; a skip link between them stays centred */
 :is(.action-bar--pager, .action-bar__tier--pager) > .icon-btn:first-child { margin-right: auto; }

package/css/base.css

@@ -105,6 +105,9 @@ button { font: inherit; cursor: pointer; }
 .card--3 .t-muted { color: inherit; opacity: 0.7; } /* card-muted is tuned for light cards; dim instead on the dark slot */
 .t-caps  { text-transform: uppercase; }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
+/* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.
+   The 1px is the one the platform needs to keep it in the accessibility tree, not a length of the design. */
+.t-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 
 /* ---- base content: words straight on the base, no card around them — an
    a heading, a paragraph, maybe a .cta-pack. Was .section until

package/css/choice.css

@@ -303,3 +303,14 @@
   box-shadow: var(--shadow-float);
 }
 .slider__range:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+
+/* ---- a switch that names itself (Toggle text, Lh 2026-09-23 — "อยู่บ้าน" on the home's top): the words, then the switch,
+   one label — the whole of it is the tap target ---- */
+.toggle-field {
+  display: inline-flex; align-items: center; gap: var(--toggle-field-gap, var(--sp-2));
+  min-height: var(--tap);
+  font: var(--toggle-field-font, var(--type-label));
+  cursor: pointer;
+  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
+  flex: none;
+}

package/css/layover.css

@@ -190,6 +190,9 @@
   align-items: center;
   z-index: 30;
 }
+/* in a fill screen (its `bottom`) the float bar floats over the SCREEN's foot, not the window's — it lies over the content
+   (a map, a stack), so it is not a row of the column; the screen is its box (Lh 2026-09-23) */
+.screen--fill > .float-bar { position: absolute; }
 .sheet-stage > .float-bar { position: absolute; padding-inline: var(--sp-4); }
 /* .screen's default bottom padding clears an .action-bar; a .float-bar is
    taller (--bar-h + its own bottom offset), so reserve the difference. Any

package/css/sheet.css

@@ -243,6 +243,13 @@
    that bar — the stage keeps the bar's line free itself (--_top), so the reserve
    would be paid twice and the page would scroll by it */
 .screen > .sheet-stage { margin-inline: calc(-1 * var(--screen-pad)); width: auto; } /* auto: 100% would keep the inset width */
+/* a stage laid OVER its screen (a Modal a link opened, Lh 2026-09-23): the page shows through, the stage covers it and its bar */
+.sheet-stage--over, .screen > .sheet-stage--over {
+  position: absolute; inset: 0; z-index: 40;
+  width: auto; height: auto; max-width: none; margin: 0;
+  background: transparent;
+  --_top: 0rem;
+}
 .appbar + .sheet-stage { margin-top: calc(-1 * (var(--header-h) + var(--header-gap, 0rem))); }
 .sheet-stage__bg { position: absolute; inset: 0; } /* map / previous cards behind */
 /* the hero: ONE thing shown in the band a half sheet leaves open (a postcard being made,

package/css/stack.css

@@ -230,6 +230,9 @@
   gap: var(--card-gap, var(--sp-5));
   overflow: clip;
 }
+/* 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; }
 
 /* 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
@@ -256,3 +259,55 @@
   opacity: 1;
   visibility: visible;
 }
+
+/* ---- a stacked sheet with a SheetBody has the ONE sheet shape (Lh 2026-09-23, the home layout): sheet head
+   pinned at the top · sheet body scrolls, as long as it needs · sheet foot (a CardFoot, the CTA) at the bottom.
+   The card becomes a flex column and stops scrolling itself — only the body does. A sheet with no SheetBody
+   keeps the old way: the whole open card scrolls. ---- */
+.sheet-stack--tap > .card:has(> .sheet__body) { display: flex; flex-direction: column; gap: var(--card-gap); }
+.sheet-stack--tap > .card:has(> .sheet__body).is-open { overflow: clip; }
+.sheet-stack > .card:has(> .sheet__body) > :not(.sheet__body) { flex-shrink: 0; }
+.sheet-stack > .card > .sheet__body { --_cover: 0rem; } /* nothing slid under here: the stack's sheet is always whole */
+
+/* ---- StackSheet's tabs (Lh 2026-09-23): the head's end is a row of small icon buttons, the sheet's pages — the chosen one
+   filled (.icon-btn--invert); a count is a small circle over the icon's top right corner ---- */
+.stack-sheet__tabs { display: flex; gap: var(--stack-sheet-tabs-gap, 0rem); flex: none; } /* no gap: each tab is a 40px target already, and an open head (back · title · tabs) must fit one line — Lh 2026-09-23 */
+.stack-sheet__tab { position: relative; }
+.stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
+  position: absolute;
+  top: calc(-1 * var(--sp-1));
+  right: calc(-1 * var(--sp-1));
+  min-width: var(--stack-sheet-count-h, 1.25rem);
+  height: var(--stack-sheet-count-h, 1.25rem);
+  padding: 0 var(--sp-1);
+  font: var(--type-caption);
+  line-height: 1;
+  pointer-events: none;
+}
+/* a tab not chosen is the icon alone — no ring, no ground (Lh 2026-09-23: "the circle around is not pretty"); the chosen one turns
+   to the opposite colour (.icon-btn--invert). */
+.stack-sheet__tab:not(.icon-btn--invert) { border-color: transparent; background: transparent; box-shadow: none; color: inherit; } /* the sheet's own ink, on any paper */
+/* the last tab's ICON lines up with the inset, not its button's edge: an unchosen tab shows the glyph only, so the button's own
+   margin around it reaches into the card's padding — and an open head (back · title · three tabs) keeps one line (Lh 2026-09-23) */
+.card__head > .stack-sheet__tabs { margin-right: calc(-1 * var(--sp-2)); }
+
+/* ---- the back button, SMALL (Lh 2026-09-23: "give the sheet head more room" — and then "a glyph alone does not read as
+   tappable"): a SMALL DISC — its ring kept, 32px instead of 44, the chevron in it at 20 — so the head gives it 32px + a gap
+   (was 56px). Its tap target stays 44px: an invisible ::after around the disc. ---- */
+.sheet-stack--tap > .card.is-open > .card__head { padding-left: var(--stack-back-room, calc(var(--stack-back-size, calc(var(--tap-base) * 2 / 3)) + var(--sp-2))); }
+.sheet-stack--tap .sheet-stack__back {
+  width: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
+  height: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+}
+.sheet-stack--tap .sheet-stack__back > .icon { width: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); height: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); flex: none; } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
+.sheet-stack--tap .sheet-stack__back::after { content: ""; position: absolute; inset: calc((var(--stack-back-size, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2); }
+
+/* the open sheet's title folds it (SheetStack.tsx): it says so to a pointer */
+.sheet-stack--tap > .card.is-open > .card__head > :is(h1, h2, h3) { cursor: pointer; }
+/* a stacked sheet is a control until it is open — tapped, never read into: no text selection (a drag, a double tap, a long press),
+   no grey flash, no iOS callout; its head stays one when open. Only the OPEN sheet's body is text to select (Lh 2026-09-23) */
+.sheet-stack--tap > .card, .sheet-stack > .card > .card__head { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
+.sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

package/css/step.css

@@ -57,13 +57,16 @@
 /* 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); }
+.screen > .step:first-child, .screen--lead > .step { --_lead: var(--screen-lead, 15cqh); } /* top="lead" says it; a Step first says it too */
 
 /* 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
    bar. Any parent that hosts the bar counts — <body>, an app shell, a demo
    frame — the bar is fixed to the viewport wherever it sits. */
 :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
@@ -95,7 +98,16 @@
 }
 /* the "where am I" dots of a walk are the STEP's, one for all its pages — written after .pages, pinned to the base's foot above the bar's
    room, so a short page never leaves them stranded under its last line (Lh 2026-09-22: the dots belong to the page, not a card, not a paragraph) */
-.step > .pager__at { margin-top: auto; align-self: center; padding-block: var(--sp-3); flex: none; }
+.step > .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) {
   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 */
@@ -113,3 +125,33 @@
   z-index: 1;
   background-color: var(--surface); /* the words pass UNDER it, never through a transparent picture */
 }
+
+/* ============================================================
+   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.
+   (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) */
+  max-width: none;
+  margin-inline: calc(-1 * var(--screen-pad)); /* edge to edge, as the step; the bar's own padding keeps the inset */
+}
+.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 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 {
+  position: relative; inset: auto; top: auto;
+  flex: none;
+  max-width: none;
+  margin-inline: calc(-1 * var(--screen-pad)); /* edge to edge; its own padding is the inset */
+  margin-bottom: calc(var(--sp-2) - var(--screen-gap));
+}
+.screen.screen--fill:has(> .appbar) { padding-top: 0; --header-gap: 0rem; }
+.screen--fill > .appbar + .sheet-stage { margin-top: 0; }

package/dist/actions/Btn.d.ts

@@ -307,6 +307,6 @@ export declare function Btn({ primary, quiet, block, xl, href, className, type,
     onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     href: string | undefined;
-    type: "button" | "reset" | "submit" | undefined;
+    type: "button" | "submit" | "reset" | undefined;
     className: string;
 }, HTMLButtonElement>;

package/dist/actions/IconBtn.d.ts

@@ -306,6 +306,6 @@ export declare function IconBtn({ label, icon, sm, invert, href, className, type
     onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     href: string | undefined;
-    type: "button" | "reset" | "submit" | undefined;
+    type: "button" | "submit" | "reset" | undefined;
     className: string;
 }, HTMLButtonElement>;