@usableapp/cardds 0.7.73 → 0.7.75

package/dist/choice/Calendar.d.ts

@@ -16,9 +16,9 @@ export interface CalendarProps extends Omit<ComponentProps<'div'>, 'title' | 'on
     onPrev?: () => void;
     /** the next-month button was tapped: the app turns the month, as with `onPrev` */
     onNext?: () => void;
-    /** the previous button's accessible name (default "Previous", by `<html lang>`) */
+    /** the previous button's accessible name — cardds names it in the page's language (`<html lang>`); pass it only for different words */
     prevLabel?: string;
-    /** the next button's accessible name (default "Next", by `<html lang>`) */
+    /** the next button's accessible name — cardds names it in the page's language (`<html lang>`); pass it only for different words */
     nextLabel?: string;
     /** softly marked days */
     marks?: number[];

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export * from './scaffold/Screen.js';
 export * from './scaffold/AppBar.js';
 export * from './scaffold/TopBar.js';
 export * from './scaffold/ActionBar.js';
-export * from './scaffold/PagerAt.js';
+export * from './scaffold/Pager.js';
 export * from './scaffold/Panes.js';
 export * from './scaffold/FloatBar.js';
 export * from './scaffold/FilterRow.js';
@@ -34,18 +34,18 @@ export * from './sheets/SheetBody.js';
 export * from './sheets/SheetStage.js';
 export * from './sheets/Step.js';
 export * from './sheets/SheetSteps.js';
-export * from './sheets/Drawer.js';
+export * from './sheets/Modal.js';
 export * from './actions/Btn.js';
 export * from './actions/IconBtn.js';
 export * from './actions/IconBtnGroup.js';
 export * from './actions/Chip.js';
 export * from './actions/Dot.js';
 export * from './actions/Dropdown.js';
-export * from './actions/Segment.js';
+export * from './actions/BtnGroup.js';
 export * from './actions/Fab.js';
 export * from './actions/BtnRow.js';
 export * from './actions/Link.js';
-export * from './actions/WaitLink.js';
+export * from './actions/Countdown.js';
 export * from './forms/Field.js';
 export * from './forms/FileBtn.js';
 export * from './forms/AddRow.js';
@@ -60,7 +60,7 @@ export * from './numbers/Ring.js';
 export * from './numbers/Progress.js';
 export * from './numbers/Spinner.js';
 export * from './numbers/Track.js';
-export * from './numbers/Band.js';
+export * from './numbers/NumberBand.js';
 export * from './numbers/DotGrid.js';
 export * from './numbers/Picker.js';
 export * from './numbers/Badge.js';
@@ -95,11 +95,11 @@ export * from './layover/Banner.js';
 export * from './layover/Callout.js';
 export * from './layover/Snackbar.js';
 export * from './journey/Route.js';
-export * from './journey/TileBadge.js';
+export * from './journey/JourneyBadge.js';
 export * from './journey/NoteRow.js';
 export * from './templates/Walkthrough.js';
 export * from './templates/Home.js';
 export * from './sheets/StackSheet.js';
 export * from './templates/CallSheet.js';
 export * from './templates/Splash.js';
-export * from './actions/ActionNote.js';
+export * from './actions/BarNote.js';

package/dist/index.js

@@ -15,7 +15,7 @@ export * from './scaffold/Screen.js';
 export * from './scaffold/AppBar.js';
 export * from './scaffold/TopBar.js';
 export * from './scaffold/ActionBar.js';
-export * from './scaffold/PagerAt.js';
+export * from './scaffold/Pager.js';
 export * from './scaffold/Panes.js';
 export * from './scaffold/FloatBar.js';
 export * from './scaffold/FilterRow.js';
@@ -38,18 +38,18 @@ export * from './sheets/SheetBody.js';
 export * from './sheets/SheetStage.js';
 export * from './sheets/Step.js';
 export * from './sheets/SheetSteps.js';
-export * from './sheets/Drawer.js';
+export * from './sheets/Modal.js';
 export * from './actions/Btn.js';
 export * from './actions/IconBtn.js';
 export * from './actions/IconBtnGroup.js';
 export * from './actions/Chip.js';
 export * from './actions/Dot.js';
 export * from './actions/Dropdown.js';
-export * from './actions/Segment.js';
+export * from './actions/BtnGroup.js';
 export * from './actions/Fab.js';
 export * from './actions/BtnRow.js';
 export * from './actions/Link.js';
-export * from './actions/WaitLink.js';
+export * from './actions/Countdown.js';
 export * from './forms/Field.js';
 export * from './forms/FileBtn.js';
 export * from './forms/AddRow.js';
@@ -64,7 +64,7 @@ export * from './numbers/Ring.js';
 export * from './numbers/Progress.js';
 export * from './numbers/Spinner.js';
 export * from './numbers/Track.js';
-export * from './numbers/Band.js';
+export * from './numbers/NumberBand.js';
 export * from './numbers/DotGrid.js';
 export * from './numbers/Picker.js';
 export * from './numbers/Badge.js';
@@ -99,11 +99,11 @@ export * from './layover/Banner.js';
 export * from './layover/Callout.js';
 export * from './layover/Snackbar.js';
 export * from './journey/Route.js';
-export * from './journey/TileBadge.js';
+export * from './journey/JourneyBadge.js';
 export * from './journey/NoteRow.js';
 export * from './templates/Walkthrough.js';
 export * from './templates/Home.js';
 export * from './sheets/StackSheet.js';
 export * from './templates/CallSheet.js';
 export * from './templates/Splash.js';
-export * from './actions/ActionNote.js';
+export * from './actions/BarNote.js';

package/dist/journey/{TileBadge.d.ts → JourneyBadge.d.ts}

@@ -1,5 +1,5 @@
 import type { ComponentProps, ReactNode } from 'react';
-export interface TileBadgeProps extends ComponentProps<'span'> {
+export interface JourneyBadgeProps extends ComponentProps<'span'> {
     /** the small label above ("Gate") */
     label: ReactNode;
     /** the big value ("21") */
@@ -11,5 +11,5 @@ export interface TileBadgeProps extends ComponentProps<'span'> {
     /** pinned to a CardMedia's corner (rating, price) */
     corner?: boolean;
 }
-/** TileBadge — a tiny label over a big value: gate, seat, date, rating. */
-export declare function TileBadge({ label, value, sub, plain, corner, className, ...rest }: TileBadgeProps): import("react").JSX.Element;
+/** JourneyBadge — a tiny label over a big value: gate, seat, date, rating. */
+export declare function JourneyBadge({ label, value, sub, plain, corner, className, ...rest }: JourneyBadgeProps): import("react").JSX.Element;

package/dist/journey/{TileBadge.js → JourneyBadge.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** TileBadge — a tiny label over a big value: gate, seat, date, rating. */
-export function TileBadge({ label, value, sub, plain, corner, className, ...rest }) {
+/** JourneyBadge — a tiny label over a big value: gate, seat, date, rating. */
+export function JourneyBadge({ label, value, sub, plain, corner, className, ...rest }) {
     return (_jsxs("span", { className: cx('tile-badge', plain && 'tile-badge--plain', corner && 'tile-badge--corner', className), ...rest, children: [_jsx("span", { className: "tile-badge__label", children: label }), _jsx("span", { className: "tile-badge__value", children: value }), sub != null && _jsx("span", { className: "tile-badge__label", children: sub })] }));
 }

package/dist/numbers/NumberBand.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { Tone } from '../cards/Card.js';
+export interface NumberBandProps extends ComponentProps<'article'> {
+    /** the two-line label (use a `<br />` to break it) */
+    label: ReactNode;
+    /** the giant number; wrap a unit in `<small>` */
+    num: ReactNode;
+    /** the footnote under the label */
+    foot?: ReactNode;
+    /** the paper — see `Tone` */
+    tone?: Tone;
+}
+/** NumberBand — a data card: 2-line label · giant number · footnote. Stack several in a NumberBandStack for one boundary with hairlines. */
+export declare function NumberBand({ label, num, foot, tone, className, ...rest }: NumberBandProps): import("react").JSX.Element;
+export interface NumberBandStackProps extends ComponentProps<'div'> {
+}
+/** NumberBandStack — several NumberBands as ONE card boundary, a hairline between each. */
+export declare function NumberBandStack({ className, ...rest }: NumberBandStackProps): import("react").JSX.Element;

package/dist/numbers/{Band.js → NumberBand.js}

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** Band — a data card: 2-line label · giant number · footnote. Stack several in a BandStack for one boundary with hairlines. */
-export function Band({ label, num, foot, tone, className, ...rest }) {
+/** NumberBand — a data card: 2-line label · giant number · footnote. Stack several in a NumberBandStack for one boundary with hairlines. */
+export function NumberBand({ label, num, foot, tone, className, ...rest }) {
     return (_jsxs("article", { className: cx('card card--band', tone && tone !== 1 && `card--${tone}`, className), ...rest, children: [_jsx("span", { className: "band__label", children: label }), _jsx("span", { className: "band__num", children: num }), foot != null && _jsx("span", { className: "band__foot", children: foot })] }));
 }
-/** BandStack — several Bands as ONE card boundary, a hairline between each. */
-export function BandStack({ className, ...rest }) {
+/** NumberBandStack — several NumberBands as ONE card boundary, a hairline between each. */
+export function NumberBandStack({ className, ...rest }) {
     return _jsx("div", { className: cx('band-stack', className), ...rest });
 }

package/dist/post/PostLetter.d.ts

@@ -32,15 +32,15 @@ export interface PostLetterProps extends ComponentProps<'div'> {
     sign?: ReactNode;
     /** one line under the card: the trip it made */
     journey?: ReactNode;
-    /** the tab's words while the picture is in front (default: cardds's own, by `<html lang>`) */
+    /** the tab's words while the picture is in front — cardds names it in the page's language (`<html lang>`); pass it only for different words */
     backLabel?: string;
-    /** the tab's words while the back is in front */
+    /** the tab's words while the back is in front — named by cardds like `backLabel`; pass it only for different words */
     pictureLabel?: string;
-    /** the play control's name while the note is paused (default "Play", by `<html lang>`) */
+    /** the play control's name while the note is paused — named by cardds in the page's language (`<html lang>`); pass it only for different words */
     playLabel?: string;
-    /** the play control's name while the note plays (default "Pause", by `<html lang>`) */
+    /** the play control's name while the note plays — named by cardds like `playLabel`; pass it only for different words */
     pauseLabel?: string;
-    /** the small word before the name (default "To", by `<html lang>`) */
+    /** the small word before the name — named by cardds in the page's language (`<html lang>`); pass it only for different words */
     toLabel?: ReactNode;
 }
 /**

package/dist/scaffold/ActionBar.d.ts

@@ -9,13 +9,13 @@ export interface ActionBarProps extends ComponentProps<'div'> {
  * 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. The PagerAt dots may be the bar's first row (a Walkthrough).
+ * `pager`: the pager bar — Back + Next as peers, buttons only. The `Pager` (the dots that say where the walk is) is a different thing: it may be the bar's first row (a Walkthrough).
  * `tiers`: an ActionBarTier with a control (a Slider) above the button tier.
  * In a `Screen fill` it is a layer over the content's foot; on a scrolling Screen a sticky last row.
  */
 export declare function ActionBar({ variant, inline, className, style, ...rest }: ActionBarProps): import("react").JSX.Element;
 export interface ActionBarTierProps extends ComponentProps<'div'> {
-    /** the tier that holds the round pager (two IconBtns at the edges) */
+    /** the tier that holds the round pager bar (two IconBtns at the edges) */
     pager?: boolean;
 }
 /** ActionBarTier — one row inside an `ActionBar variant="tiers"`: a control row, or the pager row. */

package/dist/scaffold/ActionBar.js

@@ -4,7 +4,7 @@ import { cx } from '../cx.js';
  * 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. The PagerAt dots may be the bar's first row (a Walkthrough).
+ * `pager`: the pager bar — Back + Next as peers, buttons only. The `Pager` (the dots that say where the walk is) is a different thing: it may be the bar's first row (a Walkthrough).
  * `tiers`: an ActionBarTier with a control (a Slider) above the button tier.
  * In a `Screen fill` it is a layer over the content's foot; on a scrolling Screen a sticky last row.
  */

package/dist/scaffold/Centre.d.ts

@@ -3,7 +3,7 @@ export interface CentreProps extends ComponentProps<'div'> {
 }
 /**
  * Centre — the centred group: ONE thing to read at the human centre of the screen, when that thing is not a lone
- * card: an EmptyState; a Card with its quiet second Btn and the PagerAt under it.
+ * card: an EmptyState; a Card with its quiet second Btn and the Pager under it.
  * On a plain `Screen` (the usual case, Lh 2026-09-12) it is in flow: the column is one phone tall, the group takes
  * the room after the TopBar and centres a short card; a long card makes the page longer and scrolls up under the
  * bar — nothing is capped, nothing shrinks. On a `Screen fill` it floats at 40% down (`--screen-centre`), capped
@@ -17,8 +17,8 @@ export interface PagesProps extends ComponentProps<'div'> {
  * Pages — the pages of a walk, all one height: every page is rendered, stacked in one cell as tall as the
  * tallest at any text size. Give the current one `aria-current="step"` and every other one `inert`
  * (hidden in place, out of the tab order). Turn with slideTo().
- * Pages of cards: `Card`s, inside a Centre, above the PagerAt. Pages of words: `Page`s, as a Step's
- * reading block (no Sheet on that screen — a pager never works beside one), the round pager in the ActionBar.
+ * Pages of cards: `Card`s, inside a Centre, above the Pager. Pages of words: `Page`s, as a Step's
+ * reading block (no Sheet on that screen — a pager bar never works beside one), the round pager bar in the ActionBar.
  */
 export declare function Pages({ className, ...rest }: PagesProps): import("react").JSX.Element;
 /** the direction a Centre's card slides: `next` — out to the left, the new one in from the right; `back` — the reverse */

package/dist/scaffold/Centre.js

@@ -3,7 +3,7 @@ import { flushSync } from 'react-dom';
 import { cx } from '../cx.js';
 /**
  * Centre — the centred group: ONE thing to read at the human centre of the screen, when that thing is not a lone
- * card: an EmptyState; a Card with its quiet second Btn and the PagerAt under it.
+ * card: an EmptyState; a Card with its quiet second Btn and the Pager under it.
  * On a plain `Screen` (the usual case, Lh 2026-09-12) it is in flow: the column is one phone tall, the group takes
  * the room after the TopBar and centres a short card; a long card makes the page longer and scrolls up under the
  * bar — nothing is capped, nothing shrinks. On a `Screen fill` it floats at 40% down (`--screen-centre`), capped
@@ -17,8 +17,8 @@ export function Centre({ className, ...rest }) {
  * Pages — the pages of a walk, all one height: every page is rendered, stacked in one cell as tall as the
  * tallest at any text size. Give the current one `aria-current="step"` and every other one `inert`
  * (hidden in place, out of the tab order). Turn with slideTo().
- * Pages of cards: `Card`s, inside a Centre, above the PagerAt. Pages of words: `Page`s, as a Step's
- * reading block (no Sheet on that screen — a pager never works beside one), the round pager in the ActionBar.
+ * Pages of cards: `Card`s, inside a Centre, above the Pager. Pages of words: `Page`s, as a Step's
+ * reading block (no Sheet on that screen — a pager bar never works beside one), the round pager bar in the ActionBar.
  */
 export function Pages({ className, ...rest }) {
     return _jsx("div", { className: cx('pages', className), ...rest });

package/dist/scaffold/Page.d.ts

@@ -6,7 +6,7 @@ export interface PageProps extends ComponentProps<'section'> {
 /**
  * Page — ONE page of words in the content: a picture (optional, first — it stays put while the words scroll), a heading, the words,
  * maybe a CtaPack. A component INSIDE the content box, never the box itself (Lh 2026-09-23): several Pages in a `Pages` = a walk the
- * pager turns (slideTo); a single one sits in the content (a Step) directly. Was BaseContent until 2026-09-23 — "words on the base" meant
+ * pager bar turns (slideTo); a single one sits in the content (a Step) directly. Was BaseContent until 2026-09-23 — "words on the base" meant
  * a still, one-scaffold screen, which is gone.
  */
 export declare function Page({ bleed, className, ...rest }: PageProps): import("react").JSX.Element;

package/dist/scaffold/Page.js

@@ -3,7 +3,7 @@ import { cx } from '../cx.js';
 /**
  * Page — ONE page of words in the content: a picture (optional, first — it stays put while the words scroll), a heading, the words,
  * maybe a CtaPack. A component INSIDE the content box, never the box itself (Lh 2026-09-23): several Pages in a `Pages` = a walk the
- * pager turns (slideTo); a single one sits in the content (a Step) directly. Was BaseContent until 2026-09-23 — "words on the base" meant
+ * pager bar turns (slideTo); a single one sits in the content (a Step) directly. Was BaseContent until 2026-09-23 — "words on the base" meant
  * a still, one-scaffold screen, which is gone.
  */
 export function Page({ bleed, className, ...rest }) {

package/dist/scaffold/Pager.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+export interface PagerProps extends Omit<ComponentProps<'span'>, 'children'> {
+    /** the current page, 1-based */
+    at: number;
+    /** how many pages */
+    of: number;
+    /** accessible name; defaults to "Page {at} of {of}" */
+    label?: string;
+}
+/** Pager — the "where am I" dots: one accent dot at the current page. Under the card that changes (a child of Centre), or a Step's child after its Pages — pinned to the base's foot. One per walk, never inside a page; in a Walkthrough it is the bottom layer's first row (an ActionBar child, centred). */
+export declare function Pager({ at, of, label, className, ...rest }: PagerProps): import("react").JSX.Element;

package/dist/scaffold/Pager.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/** Pager — the "where am I" dots: one accent dot at the current page. Under the card that changes (a child of Centre), or a Step's child after its Pages — pinned to the base's foot. One per walk, never inside a page; in a Walkthrough it is the bottom layer's first row (an ActionBar child, centred). */
+export function Pager({ at, of, label, className, ...rest }) {
+    return (_jsx("span", { className: cx('pager__at', className), role: "img", "aria-label": label ?? `Page ${at} of ${of}`, ...rest, children: Array.from({ length: of }, (_, i) => _jsx("i", { className: i + 1 === at ? 'is-at' : undefined }, i)) }));
+}

package/dist/scaffold/Panes.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentProps } from 'react';
 export interface PanesProps extends Omit<ComponentProps<'div'>, 'onChange'> {
-    /** CONTROLLED: the pane in sight (0-based). The app owns it — pair it with `onAtChange`; a `Segment` beside it sets the same number. */
+    /** CONTROLLED: the pane in sight (0-based). The app owns it — pair it with `onAtChange`; a `BtnGroup` beside it sets the same number. */
     at?: number;
     /** UNCONTROLLED: the pane it starts on (default 0) */
     defaultAt?: number;
@@ -14,7 +14,7 @@ export interface PanesProps extends Omit<ComponentProps<'div'>, 'onChange'> {
 /**
  * Panes — a few panes side by side INSIDE a card or a sheet, one in sight: the member swipes left / right to the next, the dots
  * under them say where (Lh 2026-10-02). Children are `Pane`s. It holds a number, controlled like an input: `at` + `onAtChange`, or
- * `defaultAt` — so a `Segment` over it (the app's wiring) names the panes and moves to one by a tap; the swipe is never the only way.
+ * `defaultAt` — so a `BtnGroup` over it (the app's wiring) names the panes and moves to one by a tap; the swipe is never the only way.
  * Not a walk: pages of words on the base are `Pages`. The panes out of sight are `inert`.
  */
 export declare function Panes({ at, defaultAt, onAtChange, dots, label, className, children, ...rest }: PanesProps): import("react").JSX.Element;

package/dist/scaffold/Panes.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useEffect, useLayoutEffect, useRef } from 'react';
 import { reducedMotion, useControlled, watchSize } from '../state.js';
 import { cx } from '../cx.js';
-import { PagerAt } from './PagerAt.js';
+import { Pager } from './Pager.js';
 /**
  * Panes — a few panes side by side INSIDE a card or a sheet, one in sight: the member swipes left / right to the next, the dots
  * under them say where (Lh 2026-10-02). Children are `Pane`s. It holds a number, controlled like an input: `at` + `onAtChange`, or
- * `defaultAt` — so a `Segment` over it (the app's wiring) names the panes and moves to one by a tap; the swipe is never the only way.
+ * `defaultAt` — so a `BtnGroup` over it (the app's wiring) names the panes and moves to one by a tap; the swipe is never the only way.
  * Not a walk: pages of words on the base are `Pages`. The panes out of sight are `inert`.
  */
 export function Panes({ at, defaultAt = 0, onAtChange, dots = true, label, className, children, ...rest }) {
@@ -37,7 +37,7 @@ export function Panes({ at, defaultAt = 0, onAtChange, dots = true, label, class
                 request(Math.min(panes.length - 1, Math.max(0, Math.round(r.scrollLeft / r.clientWidth))));
         }, 120);
     };
-    return (_jsxs("div", { className: cx('panes', className), role: "group", "aria-label": label, ...rest, children: [_jsx("div", { className: "panes__rail", ref: rail, onScroll: scrolled, children: panes.map((p, i) => cloneElement(p, { inert: i !== current || undefined })) }), dots && panes.length > 1 && _jsx(PagerAt, { at: current + 1, of: panes.length })] }));
+    return (_jsxs("div", { className: cx('panes', className), role: "group", "aria-label": label, ...rest, children: [_jsx("div", { className: "panes__rail", ref: rail, onScroll: scrolled, children: panes.map((p, i) => cloneElement(p, { inert: i !== current || undefined })) }), dots && panes.length > 1 && _jsx(Pager, { at: current + 1, of: panes.length })] }));
 }
 /** Pane — one pane of a `Panes`: components one after another, as in a card. */
 export function Pane({ className, ...rest }) {

package/dist/scaffold/Screen.d.ts

@@ -21,7 +21,7 @@ export interface ScreenProps extends ComponentProps<'div'> {
  * Screen — the mobile screen in THREE parts: **top** and **content** (the children) in one flex column, the content down to the
  * screen's foot; **bottom** a LAYER over it there (Lh 2026-09-23). Top = `TopBar` / `AppBar`, or `top="lead"` (no bar, the words start
  * 15% down). Content = a box of components one after another — a `Step` (`Pages` of `Page`s / a `Page` [+ `Sheet`]), a `Centre`, a
- * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 34.375rem (550px) wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
+ * `SheetStack`… Bottom = an `ActionBar` (the walk's `Pager` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 34.375rem (550px) wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
  * ONE OUTCOME, DRAWN ONCE (Lh 2026-10-01): a screen that can come out more than one way is not drawn until the app knows which —
  * `ready={false}` until then.
  * The slots set the order; children laid by hand in the same order still work.

package/dist/scaffold/Screen.js

@@ -5,7 +5,7 @@ import { cx } from '../cx.js';
  * Screen — the mobile screen in THREE parts: **top** and **content** (the children) in one flex column, the content down to the
  * screen's foot; **bottom** a LAYER over it there (Lh 2026-09-23). Top = `TopBar` / `AppBar`, or `top="lead"` (no bar, the words start
  * 15% down). Content = a box of components one after another — a `Step` (`Pages` of `Page`s / a `Page` [+ `Sheet`]), a `Centre`, a
- * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 34.375rem (550px) wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
+ * `SheetStack`… Bottom = an `ActionBar` (the walk's `Pager` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 34.375rem (550px) wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
  * ONE OUTCOME, DRAWN ONCE (Lh 2026-10-01): a screen that can come out more than one way is not drawn until the app knows which —
  * `ready={false}` until then.
  * The slots set the order; children laid by hand in the same order still work.

package/dist/sheets/{Drawer.d.ts → Modal.d.ts}

@@ -10,30 +10,30 @@ export interface ModalProps extends ComponentProps<'article'> {
     onDismiss?: (reason: 'scrim' | 'escape') => void;
 }
 /**
- * Modal — the ask: ONE card at the centre of a `SheetStage dim`, two parts — a `Lift` (the thing being asked about, light, scrolls
- * when tall) and a `Drawer` (the dark end that asks). No border. Two beats on appearing: drops in from above, then the drawer comes
- * out below while the lift moves up.
+ * Modal — the ask: ONE card at the centre of a `SheetStage dim`, two parts — a `ModalBody` (the thing being asked about, light, scrolls
+ * when tall) and a `ModalAsk` (the dark end that asks). No border. Two beats on appearing: drops in from above, then the ModalAsk comes
+ * out below while the ModalBody moves up.
  * A COMPONENT, not a wiring: it does not know its buttons. They are plain `IconBtn`s / `Btn`s with the app's `onClick` — the app
  * records the answer and sets `open={false}`; the modal's one behaviour is how it leaves. `onDismiss` asks to leave unanswered (a tap on
- * the scrim, Esc).
+ * the scrim, Esc). When it has arrived, cardds puts the cursor in the field marked `data-autofocus`, else the first field, else the question — write no focus code.
  */
 export declare function Modal({ open, onClosed, onDismiss, className, ...rest }: ModalProps): import("react").JSX.Element;
-export interface LiftProps extends ComponentProps<'div'> {
+export interface ModalBodyProps extends ComponentProps<'div'> {
 }
-/** Lift — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
-export declare function Lift({ className, ...rest }: LiftProps): import("react").JSX.Element;
-export interface DrawerProps extends Omit<ComponentProps<'div'>, 'title'> {
+/** ModalBody — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
+export declare function ModalBody({ className, ...rest }: ModalBodyProps): import("react").JSX.Element;
+export interface ModalAskProps extends Omit<ComponentProps<'div'>, 'title'> {
     /** the question */
     title: ReactNode;
     /** the fine print under it */
     caption?: ReactNode;
-    /** a LIGHT drawer: the card's paper and dark words instead of the dark end (Lh 2026-09-29) — same layout, same trio; the one solid button turns dark */
+    /** a LIGHT ModalAsk: the card's paper and dark words instead of the dark end (Lh 2026-09-29) — same layout, same trio; the one solid button turns dark */
     light?: boolean;
 }
-/** Drawer — the dark end of a `Modal` (`light` = paper and dark words): the question, its fine print, and a `BtnTrio` (or two buttons) — plain buttons
- *  with the app's `onClick`; the Drawer does nothing with them. A `Modal` holding ONLY a Drawer (no `Lift`) is the CONFIRM: a question with nothing
- *  to show above it — the Drawer is the whole card and comes in with it in one beat. */
-export declare function Drawer({ title, caption, light, className, children, ...rest }: DrawerProps): import("react").JSX.Element;
+/** ModalAsk — the dark end of a `Modal` (`light` = paper and dark words): the question, its fine print, and a `BtnTrio` (or two buttons) — plain buttons
+ *  with the app's `onClick`; the ModalAsk does nothing with them. A `Modal` holding ONLY a ModalAsk (no `ModalBody`) is the CONFIRM: a question with nothing
+ *  to show above it — the ModalAsk is the whole card and comes in with it in one beat. */
+export declare function ModalAsk({ title, caption, light, className, children, ...rest }: ModalAskProps): import("react").JSX.Element;
 export interface BtnTrioProps extends ComponentProps<'div'> {
 }
 /** BtnTrio — three round buttons with dotted connectors between them (× · ? · ✓); the middle one inverted. */

package/dist/sheets/{Drawer.js → Modal.js}

@@ -3,12 +3,12 @@ import { Children, Fragment, useEffect, useRef } from 'react';
 import { focusWhenActive, useLatest } from '../state.js';
 import { cx } from '../cx.js';
 /**
- * Modal — the ask: ONE card at the centre of a `SheetStage dim`, two parts — a `Lift` (the thing being asked about, light, scrolls
- * when tall) and a `Drawer` (the dark end that asks). No border. Two beats on appearing: drops in from above, then the drawer comes
- * out below while the lift moves up.
+ * Modal — the ask: ONE card at the centre of a `SheetStage dim`, two parts — a `ModalBody` (the thing being asked about, light, scrolls
+ * when tall) and a `ModalAsk` (the dark end that asks). No border. Two beats on appearing: drops in from above, then the ModalAsk comes
+ * out below while the ModalBody moves up.
  * A COMPONENT, not a wiring: it does not know its buttons. They are plain `IconBtn`s / `Btn`s with the app's `onClick` — the app
  * records the answer and sets `open={false}`; the modal's one behaviour is how it leaves. `onDismiss` asks to leave unanswered (a tap on
- * the scrim, Esc).
+ * the scrim, Esc). When it has arrived, cardds puts the cursor in the field marked `data-autofocus`, else the first field, else the question — write no focus code.
  */
 export function Modal({ open = true, onClosed, onDismiss, className, ...rest }) {
     const ref = useRef(null);
@@ -54,14 +54,14 @@ export function Modal({ open = true, onClosed, onDismiss, className, ...rest })
     }, [has, open]);
     return _jsx("article", { ref: ref, className: cx('card modal', className), ...rest });
 }
-/** Lift — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
-export function Lift({ className, ...rest }) {
+/** ModalBody — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
+export function ModalBody({ className, ...rest }) {
     return _jsx("div", { className: cx('modal__lift', className), ...rest });
 }
-/** Drawer — the dark end of a `Modal` (`light` = paper and dark words): the question, its fine print, and a `BtnTrio` (or two buttons) — plain buttons
- *  with the app's `onClick`; the Drawer does nothing with them. A `Modal` holding ONLY a Drawer (no `Lift`) is the CONFIRM: a question with nothing
- *  to show above it — the Drawer is the whole card and comes in with it in one beat. */
-export function Drawer({ title, caption, light, className, children, ...rest }) {
+/** ModalAsk — the dark end of a `Modal` (`light` = paper and dark words): the question, its fine print, and a `BtnTrio` (or two buttons) — plain buttons
+ *  with the app's `onClick`; the ModalAsk does nothing with them. A `Modal` holding ONLY a ModalAsk (no `ModalBody`) is the CONFIRM: a question with nothing
+ *  to show above it — the ModalAsk is the whole card and comes in with it in one beat. */
+export function ModalAsk({ title, caption, light, className, children, ...rest }) {
     return (_jsxs("div", { className: cx('modal__drawer', light && 'modal__drawer--light', className), ...rest, children: [_jsx("h2", { className: "t-h2", tabIndex: -1, children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));
 }
 /** BtnTrio — three round buttons with dotted connectors between them (× · ? · ✓); the middle one inverted. */

package/dist/sheets/Sheet.d.ts

@@ -19,7 +19,7 @@ export interface SheetProps extends Omit<ComponentProps<'article'>, 'onChange'>
     onSettled?: (state: SheetState) => void;
     /** the states a drag snaps to and a reveal may climb through — "peek half full", or an array (default all four) */
     states?: string | readonly Resting[];
-    /** the grab handle; `false` for a sheet with no handle, a string sets its accessible name */
+    /** the grab handle; `false` for a sheet with no handle. cardds names it in the page's language (`<html lang>`) — a string is for different words only */
     handle?: boolean | string;
     /** the grab mark. `line` (default) or `dots`: both sit in the card's top padding, the same distance from the edge, so the title does not move */
     mark?: 'line' | 'dots';
@@ -50,5 +50,6 @@ export interface SheetProps extends Omit<ComponentProps<'article'>, 'onChange'>
  * fixed habit of every sheet. A sheet asked up in the same box meanwhile waits for it: "one left, another came", never two sheets
  * crossing and never one continuous move, whatever the app's wiring (both states set in one render, or the next raised from the
  * first's `onSettled`) — the app adds no timer.
+ * The CURSOR is cardds's too: once it has come up it waits in the field marked `data-autofocus`, else the first field, else the heading — write no `autoFocus` or `.focus()` for it.
  */
 export declare function Sheet({ state, defaultState, onStateChange, onSettled, states, handle, mark, refreshing, tone, paper, className, children, onFocus, ...rest }: SheetProps): import("react").JSX.Element;

package/dist/sheets/Sheet.js

@@ -37,6 +37,7 @@ function markLong(node, long) {
  * fixed habit of every sheet. A sheet asked up in the same box meanwhile waits for it: "one left, another came", never two sheets
  * crossing and never one continuous move, whatever the app's wiring (both states set in one render, or the next raised from the
  * first's `onSettled`) — the app adds no timer.
+ * The CURSOR is cardds's too: once it has come up it waits in the field marked `data-autofocus`, else the first field, else the heading — write no `autoFocus` or `.focus()` for it.
  */
 export function Sheet({ state, defaultState = 'half', onStateChange, onSettled, states, handle = true, mark = 'line', refreshing, tone, paper, className, children, onFocus, ...rest }) {
     const [current, request] = useControlled(state, defaultState, onStateChange);

package/dist/sheets/SheetStack.d.ts

@@ -38,5 +38,6 @@ export interface SheetStackProps extends ComponentProps<'div'> {
  * the phone's back button can open and close a section. WHAT the sheet does with that, and with `refreshing`, lives on the card (`stack`):
  * the place classes, the grip, the pull. The stack only says which index. Sheets are rigid — the open 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); never a size.
+ * The CURSOR is cardds's: a sheet that opens takes it in the field marked `data-autofocus`, else the first field, else the heading — write no `autoFocus` or `.focus()` for it.
  */
 export declare function SheetStack({ mode, open, defaultOpen, onOpenChange, onRefresh, refreshing, mark, fanned, closed, rise, base, className, children, onClickCapture, onPointerDownCapture, ref: passed, ...rest }: SheetStackProps): import("react").JSX.Element;

package/dist/sheets/SheetStack.js

@@ -55,6 +55,7 @@ function stamp(child, place) {
  * the phone's back button can open and close a section. WHAT the sheet does with that, and with `refreshing`, lives on the card (`stack`):
  * the place classes, the grip, the pull. The stack only says which index. Sheets are rigid — the open 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); never a size.
+ * The CURSOR is cardds's: a sheet that opens takes it in the field marked `data-autofocus`, else the first field, else the heading — write no `autoFocus` or `.focus()` for it.
  */
 export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChange, onRefresh, refreshing = null, mark = 'dots', fanned, closed, rise = 'under', base, className, children, onClickCapture, onPointerDownCapture, ref: passed, ...rest }) {
     const [current, request] = useControlled(open, defaultOpen, onOpenChange);

package/dist/sheets/SheetSteps.d.ts

@@ -40,7 +40,7 @@ export interface SheetStepProps extends Omit<ComponentProps<'li'>, 'title'> {
     summary?: ReactNode;
     /** the member may pass this step without doing it: a small link at its end moves on (reason `skip`) */
     skippable?: boolean;
-    /** the skip link's words (default "Skip") */
+    /** the skip link's words — cardds names it in the page's language (`<html lang>`); pass it only for different words */
     skipLabel?: ReactNode;
     /** what went wrong, in words — one line UNDER the step's button (an alert icon, `--signal-error`, read out at once): the number
      *  is not a phone number, no signal, the code could not be sent, the two PINs differ. The step stays where it is; to send the
@@ -50,5 +50,5 @@ export interface SheetStepProps extends Omit<ComponentProps<'li'>, 'title'> {
      *  step's buttons take no taps meanwhile. The app moves `at` when the answer is good, or sets `error`. */
     busy?: ReactNode;
 }
-/** SheetStep — one step of a SheetSteps: its title, then what the member does (a Field, a Pin, a Toggle, the step's own Btn). */
+/** SheetStep — one step of a SheetSteps: its title, then what the member does (a Field, a Pin, a Toggle, the step's own Btn). When it opens, cardds puts the cursor in the field marked `data-autofocus`, else the first field, else the title — write no focus code. */
 export declare function SheetStep({ title, summary, skippable, skipLabel, error, busy, className, children, ...rest }: SheetStepProps): import("react").JSX.Element;

package/dist/sheets/SheetSteps.js

@@ -201,7 +201,7 @@ function useStepChecks(off, park) {
     };
     return { note, group, press };
 }
-/** SheetStep — one step of a SheetSteps: its title, then what the member does (a Field, a Pin, a Toggle, the step's own Btn). */
+/** SheetStep — one step of a SheetSteps: its title, then what the member does (a Field, a Pin, a Toggle, the step's own Btn). When it opens, cardds puts the cursor in the field marked `data-autofocus`, else the first field, else the title — write no focus code. */
 export function SheetStep({ title, summary, skippable, skipLabel = word('skip'), error, busy, className, children, ...rest }) {
     const ctx = useContext(StepCtx);
     if (!ctx)

package/dist/sheets/StackSheet.d.ts

@@ -29,7 +29,7 @@ export interface StackSheetProps extends Omit<ComponentProps<'article'>, 'title'
     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) */
+    /** the back button's label (shown once the sheet is open) — cardds names it in the page's language (`<html lang>`); pass it only for different words */
     backLabel?: string;
     /** where the back button stands: `none` (default — hidden for now, Lh 2026-09-29: not used in real work yet; a tap on the open sheet's title folds it) ·
      *  `end` (after the tabs, chevron DOWN: the sheet folds down) · `start` (before the title, chevron left) */
@@ -42,6 +42,6 @@ export interface StackSheetProps extends Omit<ComponentProps<'article'>, 'title'
  * SHEET BODY (the children; scrolls) · SHEET FOOT (`foot`, the CTA) at the bottom. Its tabs are icon buttons. The chosen one is filled
  * only while this sheet is open — a closed home shows every icon plain; the disc fades in with the rise and out with the fold.
  * 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`.
+ * is closed — see `Home`). A direct child of `SheetStack`. Once open, cardds puts the cursor in the field marked `data-autofocus`, else the first field, else the heading — write no focus code.
  */
 export declare function StackSheet({ title, tone, paper, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel, backAt, stack, className, children, ...rest }: StackSheetProps): import("react").JSX.Element;

package/dist/sheets/StackSheet.js

@@ -17,7 +17,7 @@ import { word } from '../words.js';
  * SHEET BODY (the children; scrolls) · SHEET FOOT (`foot`, the CTA) at the bottom. Its tabs are icon buttons. The chosen one is filled
  * only while this sheet is open — a closed home shows every icon plain; the disc fades in with the rise and out with the fold.
  * 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`.
+ * is closed — see `Home`). A direct child of `SheetStack`. Once open, cardds puts the cursor in the field marked `data-autofocus`, else the first field, else the heading — write no focus code.
  */
 export function StackSheet({ title, tone, paper, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel = word('back'), backAt = 'none', stack, className, children, ...rest }) {
     const [tab, pick] = useControlled(tabProp, defaultTab ?? tabs?.[0]?.id, onTabChange);

package/dist/templates/CallSheet.d.ts

@@ -10,7 +10,7 @@ export interface CallSheetSheet {
     foot?: ReactNode;
     /** a small link UNDER that button (a `Link sm`, e.g. details for developers) */
     footLink?: ReactNode;
-    /** this sheet's handle — its accessible name (a string), or `false` for none; overrides the CallSheet's `handle` */
+    /** this sheet's handle: `false` for none, a string only for words different from cardds's own (named in the page's language, `<html lang>`); overrides the CallSheet's `handle` */
     handle?: SheetProps['handle'];
 }
 /** one way in: its button and the sheet it calls */
@@ -45,7 +45,7 @@ export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'chi
     onOpenChange?: (open: boolean, way: number | null) => void;
     /** the sheets' resting states once up (default "peek full") */
     states?: string;
-    /** every sheet's handle: its accessible name in the app's language (a string — default "Resize"), or `false` for none. A sheet's own `handle` wins */
+    /** every sheet's handle: `false` for none; cardds names it in the page's language (`<html lang>`), so pass a string only for different words. A sheet's own `handle` wins */
     handle?: SheetProps['handle'];
     /** layers over the screen */
     children?: ReactNode;