@usableapp/cardds 0.6.4 → 0.6.5

package/dist/cardds.css

@@ -484,6 +484,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
@@ -1065,6 +1068,9 @@ button { font: inherit; cursor: pointer; }
   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
@@ -1092,6 +1098,58 @@ button { font: inherit; cursor: pointer; }
   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; }
+
 /* ---- css/sheet.css — sheet single: .sheet — one card as a bottom sheet, peek / half / full ---- */
 /* ============================================================
    cardds/sheet.css — sheet single: one card as a bottom sheet.
@@ -1338,6 +1396,13 @@ button { font: inherit; cursor: pointer; }
    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,
@@ -1517,13 +1582,16 @@ button { font: inherit; cursor: pointer; }
 /* 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
@@ -1555,7 +1623,16 @@ button { font: inherit; cursor: pointer; }
 }
 /* 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 */
@@ -1574,6 +1651,36 @@ button { font: inherit; cursor: pointer; }
   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; }
+
 /* ---- css/forms.css — outlined fields, add-row ---- */
 /* ============================================================
    cardds/forms.css — inputs + inline form actions
@@ -1767,6 +1874,15 @@ button { font: inherit; cursor: pointer; }
 .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); }
@@ -1983,7 +2099,13 @@ 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 */
 :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; }
@@ -2663,6 +2785,17 @@ button { font: inherit; cursor: pointer; }
 }
 .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;
+}
+
 /* ---- css/lists.css — row, rows, key-value, kv grid, timeline, legend, link ---- */
 /* ============================================================
    cardds/lists.css — frameless rows and pairs INSIDE a card:
@@ -3343,6 +3476,9 @@ button { font: inherit; cursor: pointer; }
   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/dist/choice/Check.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 export interface CheckProps extends ComponentProps<'input'> {
     /** 40px instead of 48px */
     sm?: boolean;
@@ -8,7 +8,10 @@ export interface CheckProps extends ComponentProps<'input'> {
 /** Check — the round check circle at a Row's end (48px); the row's label wraps it. */
 export declare function Check({ sm, label, className, ...rest }: CheckProps): import("react").JSX.Element;
 export interface ToggleProps extends ComponentProps<'input'> {
+    /** accessible name, when no words show */
     label?: string;
+    /** WORDS shown before the switch, naming it ("อยู่บ้าน") — the switch and its words are one label, one tap target */
+    text?: ReactNode;
 }
-/** Toggle — the big switch (64×36) at a Row's end. */
-export declare function Toggle({ label, className, ...rest }: ToggleProps): import("react").JSX.Element;
+/** Toggle — the big switch (64×36) at a Row's end; with `text`, a switch that names itself (a bar's own switch — "at home"). */
+export declare function Toggle({ label, text, className, ...rest }: ToggleProps): import("react").JSX.Element;

package/dist/choice/Check.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /** Check — the round check circle at a Row's end (48px); the row's label wraps it. */
 export function Check({ sm, label, className, ...rest }) {
     return _jsx("input", { type: "checkbox", className: cx('check', sm && 'check--sm', className), "aria-label": label, ...rest });
 }
-/** Toggle — the big switch (64×36) at a Row's end. */
-export function Toggle({ label, className, ...rest }) {
-    return _jsx("input", { type: "checkbox", role: "switch", className: cx('toggle', className), "aria-label": label, ...rest });
+/** Toggle — the big switch (64×36) at a Row's end; with `text`, a switch that names itself (a bar's own switch — "at home"). */
+export function Toggle({ label, text, className, ...rest }) {
+    const input = _jsx("input", { type: "checkbox", role: "switch", className: cx('toggle', className), "aria-label": text == null ? label : undefined, ...rest });
+    if (text == null)
+        return input;
+    return _jsxs("label", { className: "toggle-field", children: [_jsx("span", { className: "toggle-field__text", children: text }), input] });
 }

package/dist/index.d.ts

@@ -72,3 +72,6 @@ export * from './layover/Deck.js';
 export * from './journey/Route.js';
 export * from './journey/TileBadge.js';
 export * from './journey/NoteRow.js';
+export * from './templates/Walkthrough.js';
+export * from './templates/Home.js';
+export * from './sheets/StackSheet.js';

package/dist/index.js

@@ -75,3 +75,6 @@ export * from './layover/Deck.js';
 export * from './journey/Route.js';
 export * from './journey/TileBadge.js';
 export * from './journey/NoteRow.js';
+export * from './templates/Walkthrough.js';
+export * from './templates/Home.js';
+export * from './sheets/StackSheet.js';

package/dist/scaffold/ActionBar.d.ts

@@ -6,11 +6,12 @@ export interface ActionBarProps extends ComponentProps<'div'> {
     inline?: boolean;
 }
 /**
- * ActionBar — the screen's ONE move, fixed at the bottom, OUTSIDE the Screen/Step (a sibling after it).
+ * ActionBar — the screen's ONE move: the Screen's `bottom` (`<Screen fill bottom={<ActionBar…>}>`), the last part of its flex
+ * column, as tall as its rows. Never after `</Screen>`, never positioned by hand.
  * Plain: one wide primary Btn (the step that commits). `pager`: Back + Next as peers — buttons only; where you are is the
  * PagerAt under the card in a Centre group, never in the bar (Lh, 2026-09-12).
  * `tiers`: an ActionBarTier with a control (a Slider) above the button tier.
- * The parent hosting the bar reserves its room (`--bar-reserve`); never pad a screen for it by hand.
+ * In a `Screen fill` the content takes the rest; outside one (an app shell) the bar is still fixed and `--bar-reserve` keeps its room.
  */
 export declare function ActionBar({ variant, inline, className, style, ...rest }: ActionBarProps): import("react").JSX.Element;
 export interface ActionBarTierProps extends ComponentProps<'div'> {

package/dist/scaffold/ActionBar.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /**
- * ActionBar — the screen's ONE move, fixed at the bottom, OUTSIDE the Screen/Step (a sibling after it).
+ * ActionBar — the screen's ONE move: the Screen's `bottom` (`<Screen fill bottom={<ActionBar…>}>`), the last part of its flex
+ * column, as tall as its rows. Never after `</Screen>`, never positioned by hand.
  * Plain: one wide primary Btn (the step that commits). `pager`: Back + Next as peers — buttons only; where you are is the
  * PagerAt under the card in a Centre group, never in the bar (Lh, 2026-09-12).
  * `tiers`: an ActionBarTier with a control (a Slider) above the button tier.
- * The parent hosting the bar reserves its room (`--bar-reserve`); never pad a screen for it by hand.
+ * In a `Screen fill` the content takes the rest; outside one (an app shell) the bar is still fixed and `--bar-reserve` keeps its room.
  */
 export function ActionBar({ variant, inline, className, style, ...rest }) {
     return (_jsx("div", { className: cx('action-bar', variant && `action-bar--${variant}`, className), style: inline ? { position: 'static', width: '100%', maxWidth: 'none', paddingInline: 0, ...style } : style, ...rest }));

package/dist/scaffold/AppBar.d.ts

@@ -9,10 +9,13 @@ export interface AppBarProps extends Omit<ComponentProps<'header'>, 'title'> {
     /** the trailing control(s) — an IconBtn with a chevron-down to switch context; on the home bar a labelled
      * switch chip (ChipPick sign, --tap tall here) and the wallet Btn, side by side (Lh 2026-09-13) */
     action?: ReactNode;
+    /** makes the mark + the words ONE button (the member's own name → their menu): its props — `popoverTarget` to open a `Menu`
+     *  (the app places the Menu), or an `onClick`. Needs an accessible name when the words don't say what it opens: `aria-label`. */
+    brandButton?: ComponentProps<'button'>;
 }
 /**
  * AppBar — the app-context bar fixed at the very top: logo · two-line label · switcher.
  * It is fixed, so the Screen it sits in reserves its height (`--header-h`, 60px) automatically.
  * Use a TopBar for a screen title; use both when the app context matters (home).
  */
-export declare function AppBar({ icon, title, sub, action, className, children, ...rest }: AppBarProps): import("react").JSX.Element;
+export declare function AppBar({ icon, title, sub, action, brandButton, className, children, ...rest }: AppBarProps): import("react").JSX.Element;

package/dist/scaffold/AppBar.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /**
  * AppBar — the app-context bar fixed at the very top: logo · two-line label · switcher.
  * It is fixed, so the Screen it sits in reserves its height (`--header-h`, 60px) automatically.
  * Use a TopBar for a screen title; use both when the app context matters (home).
  */
-export function AppBar({ icon, title, sub, action, className, children, ...rest }) {
-    return (_jsxs("header", { className: cx('appbar', className), ...rest, children: [_jsxs("div", { className: "appbar__brand", children: [icon, _jsxs("span", { className: "appbar__text", children: [_jsx("span", { className: "appbar__title", children: title }), sub != null && _jsx("span", { className: "appbar__sub", children: sub })] }), action] }), children] }));
+export function AppBar({ icon, title, sub, action, brandButton, className, children, ...rest }) {
+    const who = (_jsxs(_Fragment, { children: [icon, _jsxs("span", { className: "appbar__text", children: [_jsx("span", { className: "appbar__title", children: title }), sub != null && _jsx("span", { className: "appbar__sub", children: sub })] })] }));
+    return (_jsxs("header", { className: cx('appbar', className), ...rest, children: [_jsxs("div", { className: "appbar__brand", children: [brandButton ? (_jsx("button", { type: "button", ...brandButton, className: cx('appbar__who', brandButton.className), children: who })) : who, action] }), children] }));
 }

package/dist/scaffold/Screen.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps } from 'react';
+import { type ComponentProps, type ReactNode, type Ref } from 'react';
 export type Palette = 'clay' | 'shine' | 'field' | 'roast' | 'hydro';
 export interface ScreenProps extends ComponentProps<'div'> {
     /** exactly one phone height (100dvh), clipped: the box a Step or a SheetStack fills — an app screen, not a scrolling page */
@@ -6,15 +6,20 @@ export interface ScreenProps extends ComponentProps<'div'> {
     /** a colour preset from palette.css; omit for the black-and-white wireframe */
     palette?: Palette;
     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.
+     *  Never with a `Sheet` in the content: a sheet finishes on its own foot (warns once). */
+    bottom?: ReactNode;
 }
 /**
- * Screen — the mobile screen column: max 25rem wide, the standard horizontal inset, NO vertical padding
- * (bars reserve their own room). Every screen is base · top menu · bottom menu · content.
- * `fill` makes it one phone height for a Step or a SheetStack; a plain Screen scrolls.
- * Put an AppBar/TopBar first, the content next, and an ActionBar AFTER the screen (outside it).
+ * 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.
+ * The slots set the order; children laid by hand in the same order still work.
  */
-export declare function Screen({ fill, palette, as, className, ...rest }: ScreenProps): import("react").DetailedReactHTMLElement<{
-    ref?: import("react").Ref<HTMLDivElement> | undefined;
+export declare function Screen({ fill, palette, as, top, bottom, className, children, ref, ...rest }: ScreenProps): import("react").DetailedReactHTMLElement<{
     key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -123,7 +128,6 @@ export declare function Screen({ fill, palette, as, className, ...rest }: Screen
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
     "aria-valuetext"?: string | undefined;
-    children?: import("react").ReactNode | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
@@ -297,4 +301,5 @@ export declare function Screen({ fill, palette, as, className, ...rest }: Screen
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     className: string;
     'data-palette': Palette | undefined;
+    ref: Ref<HTMLDivElement>;
 }, HTMLDivElement>;

package/dist/scaffold/Screen.js

@@ -1,11 +1,28 @@
-import { createElement } from 'react';
+import { createElement, useEffect, useRef } from 'react';
 import { cx } from '../cx.js';
+let warnedSheetBar = false;
 /**
- * Screen — the mobile screen column: max 25rem wide, the standard horizontal inset, NO vertical padding
- * (bars reserve their own room). Every screen is base · top menu · bottom menu · content.
- * `fill` makes it one phone height for a Step or a SheetStack; a plain Screen scrolls.
- * Put an AppBar/TopBar first, the content next, and an ActionBar AFTER the screen (outside it).
+ * 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.
+ * The slots set the order; children laid by hand in the same order still work.
  */
-export function Screen({ fill, palette, as = 'div', className, ...rest }) {
-    return createElement(as, { className: cx('screen', fill && 'screen--fill', className), 'data-palette': palette, ...rest });
+export function Screen({ fill, palette, as = 'div', top, bottom, className, children, ref, ...rest }) {
+    const own = useRef(null);
+    useEffect(() => {
+        const el = own.current;
+        if (warnedSheetBar || !el || !el.querySelector(':scope > .action-bar') || !el.querySelector(':scope > .step > .sheet'))
+            return;
+        warnedSheetBar = true;
+        console.warn('cardds Screen: a bottom bar on a screen with a Sheet — the sheet finishes on its own foot (CardFoot); drop the bar.');
+    });
+    const setRef = (node) => {
+        own.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    return createElement(as, { className: cx('screen', fill && 'screen--fill', top === 'lead' && 'screen--lead', className), 'data-palette': palette, ref: setRef, ...rest }, top !== 'lead' ? top : null, children, bottom);
 }

package/dist/sheets/SheetStack.d.ts

@@ -27,7 +27,7 @@ export interface SheetStackProps extends ComponentProps<'div'> {
  *
  * A COMPONENT, not a wiring: WHICH sheet is open is the app's (`open` + `onOpenChange`, or `defaultOpen`) — so a button anywhere, a route or
  * the phone's back button can open and close a section. Its own behaviour stays inside and only asks: a tap on a peeked head, the open
- * sheet's StackBack. How the sheets MOVE is its own too: sheets are rigid — the tapped one slides up, the ones after it leave below, the ones
+ * sheet's StackBack or its title (folds it). How the sheets MOVE is its own too: sheets are rigid — the tapped one slides up, the ones after it leave below, the ones
  * before tuck under nearest-first; closing reverses in two beats. Only `translate` (stack.css); it sets classes, never a size.
  */
 export declare function SheetStack({ mode, open, defaultOpen, onOpenChange, fanned, closed, base, className, children, onClick, ...rest }: SheetStackProps): import("react").JSX.Element;

package/dist/sheets/SheetStack.js

@@ -19,7 +19,7 @@ const sheetsOf = (stack) => [...stack.children]
  *
  * A COMPONENT, not a wiring: WHICH sheet is open is the app's (`open` + `onOpenChange`, or `defaultOpen`) — so a button anywhere, a route or
  * the phone's back button can open and close a section. Its own behaviour stays inside and only asks: a tap on a peeked head, the open
- * sheet's StackBack. How the sheets MOVE is its own too: sheets are rigid — the tapped one slides up, the ones after it leave below, the ones
+ * sheet's StackBack or its title (folds it). How the sheets MOVE is its own too: sheets are rigid — the tapped one slides up, the ones after it leave below, the ones
  * before tuck under nearest-first; closing reverses in two beats. Only `translate` (stack.css); it sets classes, never a size.
  */
 export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChange, fanned, closed, base, className, children, onClick, ...rest }) {
@@ -79,6 +79,11 @@ export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChang
             request(null);
             return;
         }
+        // the open sheet's TITLE folds it too (Lh 2026-09-23) — a bigger target than the back button; the back stays the keyboard's way
+        if (current != null && at === current && target.closest('.card__head > :is(h1, h2, h3)')) {
+            request(null);
+            return;
+        }
         if (at >= 0 && current == null)
             request(at);
     };

package/dist/sheets/SheetStage.d.ts

@@ -6,6 +6,9 @@ export interface SheetStageProps extends ComponentProps<'div'> {
     hero?: ReactNode;
     /** blur and darken the background (the dim page sheet) */
     dim?: boolean;
+    /** laid OVER the screen it sits in (a Modal a link or button opened): no ground of its own, the page shows through
+     *  (dimmed with `dim`), above the screen's bar */
+    over?: boolean;
     /** a footnote strip at the stage's bottom, on the scrim */
     foot?: ReactNode;
 }
@@ -15,4 +18,4 @@ export interface SheetStageProps extends ComponentProps<'div'> {
  * (`dim` + a `Modal`), the ask (`dim` + a `Modal`, which centres itself — or a Modal on a clean ground, no `dim`). Full stops under the top bar's line.
  * NEVER inside a Step — an app screen where the member acts is a Step.
  */
-export declare function SheetStage({ bg, hero, dim, foot, className, children, ...rest }: SheetStageProps): import("react").JSX.Element;
+export declare function SheetStage({ bg, hero, dim, over, foot, className, children, ...rest }: SheetStageProps): import("react").JSX.Element;

package/dist/sheets/SheetStage.js

@@ -6,6 +6,6 @@ import { cx } from '../cx.js';
  * (`dim` + a `Modal`), the ask (`dim` + a `Modal`, which centres itself — or a Modal on a clean ground, no `dim`). Full stops under the top bar's line.
  * NEVER inside a Step — an app screen where the member acts is a Step.
  */
-export function SheetStage({ bg, hero, dim, foot, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('sheet-stage', dim && 'sheet-stage--dim', className), ...rest, children: [bg != null && _jsx("div", { className: "sheet-stage__bg", children: bg }), hero != null && _jsx("div", { className: "sheet-stage__hero", children: hero }), children, foot != null && _jsx("p", { className: "sheet-stage__foot", children: foot })] }));
+export function SheetStage({ bg, hero, dim, over, foot, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('sheet-stage', dim && 'sheet-stage--dim', over && 'sheet-stage--over', className), ...rest, children: [bg != null && _jsx("div", { className: "sheet-stage__bg", children: bg }), hero != null && _jsx("div", { className: "sheet-stage__hero", children: hero }), children, foot != null && _jsx("p", { className: "sheet-stage__foot", children: foot })] }));
 }

package/dist/sheets/StackBack.d.ts

@@ -3,5 +3,6 @@ export interface StackBackProps extends ComponentProps<'button'> {
     /** accessible name */
     label?: string;
 }
-/** StackBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's CardHead. Hidden until the sheet is open. */
+/** StackBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's CardHead. Hidden until the sheet is open.
+ * A SMALL disc (Lh 2026-09-23): 32px with a chevron — the head keeps its room for the title and the tabs; the 44px tap target stays. */
 export declare function StackBack({ label, className, ...rest }: StackBackProps): import("react").JSX.Element;

package/dist/sheets/StackBack.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
-/** StackBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's CardHead. Hidden until the sheet is open. */
+/** StackBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's CardHead. Hidden until the sheet is open.
+ * A SMALL disc (Lh 2026-09-23): 32px with a chevron — the head keeps its room for the title and the tabs; the 44px tap target stays. */
 export function StackBack({ label = 'Back', className, ...rest }) {
-    return (_jsx("button", { type: "button", className: cx('icon-btn icon-btn--sm sheet-stack__back', className), "aria-label": label, ...rest, children: _jsx(Icon, { name: "arrow-left" }) }));
+    return (_jsx("button", { type: "button", className: cx('icon-btn icon-btn--sm sheet-stack__back', className), "aria-label": label, ...rest, children: _jsx(Icon, { name: "chevron-left" }) }));
 }

package/dist/sheets/StackSheet.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type IconName } from '../type/Icon.js';
+export interface StackSheetTab {
+    id: string;
+    icon: IconName;
+    /** the tab's name, read aloud (the head shows the icon only) */
+    label: string;
+    /** a small count over the icon: what waits there (alerts, new asks); 0 or none = no circle */
+    count?: number;
+}
+export interface StackSheetProps extends Omit<ComponentProps<'article'>, 'title'> {
+    /** the SHEET HEAD's title — an h2 (the page's h1 is its own) */
+    title: ReactNode;
+    /** the paper: 1 light · 2 tinted · 3 dark */
+    tone?: 1 | 2 | 3;
+    /** the head's end when the sheet has no tabs: an Icon, an IconRow */
+    icon?: ReactNode;
+    /** TABS in the head: icon buttons at the end — the sheet's pages. A tap on one in a peeked head opens the sheet on it */
+    tabs?: StackSheetTab[];
+    /** CONTROLLED: the tab shown (its id) — with `onTabChange`; or `defaultTab` (default: the first) */
+    tab?: string;
+    defaultTab?: string;
+    onTabChange?: (tab: string) => void;
+    /** the SHEET FOOT: the CTA at the sheet's bottom (one row) */
+    foot?: ReactNode;
+    /** the back button's label (shown once the sheet is open) */
+    backLabel?: string;
+}
+/**
+ * StackSheet — ONE sheet of a `SheetStack`, in the one sheet shape: SHEET HEAD (back · title · tabs or an icon) pinned at the top ·
+ * SHEET BODY (the children; scrolls) · SHEET FOOT (`foot`, the CTA) at the bottom. Its tabs are icon buttons, the chosen one filled;
+ * a count shows as a small circle over its icon. The body is the app's: render the page of the chosen tab (and nothing while the sheet
+ * is closed — see `Home`). A direct child of `SheetStack`.
+ */
+export declare function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel, className, children, ...rest }: StackSheetProps): import("react").JSX.Element;

package/dist/sheets/StackSheet.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cx } from '../cx.js';
+import { Card } from '../cards/Card.js';
+import { CardHead } from '../cards/CardHead.js';
+import { CardFoot } from '../cards/CardFoot.js';
+import { SheetBody } from './SheetBody.js';
+import { StackBack } from './StackBack.js';
+import { Text } from '../type/Text.js';
+import { Icon } from '../type/Icon.js';
+import { Badge } from '../numbers/Badge.js';
+/**
+ * StackSheet — ONE sheet of a `SheetStack`, in the one sheet shape: SHEET HEAD (back · title · tabs or an icon) pinned at the top ·
+ * SHEET BODY (the children; scrolls) · SHEET FOOT (`foot`, the CTA) at the bottom. Its tabs are icon buttons, the chosen one filled;
+ * a count shows as a small circle over its icon. The body is the app's: render the page of the chosen tab (and nothing while the sheet
+ * is closed — see `Home`). A direct child of `SheetStack`.
+ */
+export function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel = 'Back', className, children, ...rest }) {
+    const [own, setOwn] = useState(defaultTab ?? tabs?.[0]?.id);
+    const tab = tabProp ?? own;
+    const pick = (id) => { if (tabProp === undefined)
+        setOwn(id); onTabChange?.(id); };
+    return (_jsxs(Card, { tone: tone, className: cx('stack-sheet', className), ...rest, children: [_jsxs(CardHead, { children: [_jsx(StackBack, { label: backLabel }), _jsx(Text, { level: "h2", children: title }), tabs?.length ? (_jsx("span", { className: "stack-sheet__tabs", role: "tablist", children: tabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": t.id === tab, "aria-label": t.label, className: cx('icon-btn icon-btn--sm stack-sheet__tab', t.id === tab && 'icon-btn--invert'), onClick: () => pick(t.id), children: [_jsx(Icon, { name: t.icon }), t.count ? _jsx(Badge, { className: "stack-sheet__count", children: t.count > 99 ? '99+' : t.count }) : null] }, t.id))) })) : icon] }), _jsx(SheetBody, { role: tabs?.length ? 'tabpanel' : undefined, children: children }), foot != null && _jsx(CardFoot, { children: foot })] }));
+}

package/dist/sheets/Step.d.ts

@@ -3,8 +3,8 @@ 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
- * (what the member DOES); the ActionBar goes OUTSIDE, after the Step. It fills a `Screen fill` between the top bar
- * and the bar's room, bleeds to the screen's edges (the sheet is full-width), and follows its TopBar/AppBar directly.
+ * (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.
  */
 export declare function Step({ className, ...rest }: StepProps): import("react").JSX.Element;

package/dist/sheets/Step.js

@@ -2,8 +2,8 @@ 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
- * (what the member DOES); the ActionBar goes OUTSIDE, after the Step. It fills a `Screen fill` between the top bar
- * and the bar's room, bleeds to the screen's edges (the sheet is full-width), and follows its TopBar/AppBar directly.
+ * (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.
  */
 export function Step({ className, ...rest }) {