@usableapp/cardds 0.6.4 → 0.6.6

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 > 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)
+- **`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

@@ -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"
 ```
@@ -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,36 @@ 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` · `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
+<Screen fill top="lead" bottom={<ActionBar variant="pager">…</ActionBar>}>
+  <Step><Pages>…</Pages><PagerAt at={1} of={3} /></Step>
+</Screen>
+```
+
+- **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
+  `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
@@ -151,16 +195,16 @@ 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>
 </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">
-  <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>
@@ -184,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
@@ -201,9 +245,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,15 +304,14 @@ 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).
-- **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
@@ -282,8 +326,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
@@ -322,9 +366,9 @@ 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
-  `.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.
+  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
   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
@@ -349,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
@@ -374,6 +418,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; 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 */
+: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,26 +105,29 @@ 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
    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/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/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:
@@ -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(> .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
@@ -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

@@ -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
@@ -57,20 +57,23 @@
 /* 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) */
+
 /* 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
@@ -78,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);
@@ -86,17 +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 { margin-top: auto; align-self: center; padding-block: var(--sp-3); flex: none; }
-.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;
@@ -106,10 +106,40 @@
 /* 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;
   background-color: var(--surface); /* the words pass UNDER it, never through a transparent picture */
 }
+
+/* ============================================================
+   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: absolute; inset-inline: 0; top: auto; bottom: var(--kb, 0rem);
+  max-width: none;
+  margin: 0;
+  padding-top: 0; /* no ground of its own, never a solid strip */
+}
+.screen--fill:has(> .action-bar) > .step { margin-bottom: 0; }
+/* 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 {
+  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; }
+/* …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/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>;

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;