@usableapp/cardds 0.7.74 → 0.7.75

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/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). 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,9 +3,9 @@ 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). 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.
@@ -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/templates/Walkthrough.d.ts

@@ -23,8 +23,8 @@ export interface WalkthroughProps extends Omit<ComponentProps<typeof Screen>, 'c
     defaultAt?: number;
     /** a page was turned to: its index */
     onAtChange?: (at: number) => void;
-    /** the ONE row of the bottom panel. Omitted: the round pager (back · next). A function gets `{ at, count, go }`,
-     *  e.g. the pager until the last page, then one wide Btn. */
+    /** the ONE row of the bottom panel. Omitted: the round pager bar (back · next). A function gets `{ at, count, go }`,
+     *  e.g. the pager bar until the last page, then one wide Btn. */
     cta?: ReactNode | ((c: WalkthroughCta) => ReactNode);
     /** rows of controls ABOVE the CTA row (a text-size Slider…), one row each, top to bottom — keep them few */
     controls?: ReactNode[];
@@ -32,9 +32,9 @@ export interface WalkthroughProps extends Omit<ComponentProps<typeof Screen>, 'c
     ctaLink?: ReactNode;
     /** layers over the screen: the app's `SheetStage dim` + `Modal` that a link or button opens (the app wires it) */
     children?: ReactNode;
-    /** the pager's back button name — cardds names it in the page's language (`<html lang>`); pass it only for different words */
+    /** the pager bar's back button name — cardds names it in the page's language (`<html lang>`); pass it only for different words */
     backLabel?: string;
-    /** the pager's next button name — cardds names it in the page's language (`<html lang>`); pass it only for different words */
+    /** the pager bar's next button name — cardds names it in the page's language (`<html lang>`); pass it only for different words */
     nextLabel?: string;
 }
 /**

package/dist/templates/Walkthrough.js

@@ -5,7 +5,7 @@ import { Screen } from '../scaffold/Screen.js';
 import { Step } from '../sheets/Step.js';
 import { Page } from '../scaffold/Page.js';
 import { Pages, slideTo } from '../scaffold/Centre.js';
-import { PagerAt } from '../scaffold/PagerAt.js';
+import { Pager } from '../scaffold/Pager.js';
 import { ActionBar, ActionBarTier } from '../scaffold/ActionBar.js';
 import { CardHead } from '../cards/CardHead.js';
 import { Text } from '../type/Text.js';
@@ -50,7 +50,7 @@ export function Walkthrough({ pages, at: atProp, defaultAt = 0, onAtChange, cta,
     const row = typeof cta === 'function' ? cta({ at, count, go }) : cta;
     const custom = row !== undefined && row !== null;
     const pager = (_jsxs(_Fragment, { children: [_jsx(IconBtn, { icon: "arrow-left", label: backLabel, disabled: at === 0, onClick: () => go(at - 1) }), _jsx(IconBtn, { invert: true, icon: "arrow-right", label: nextLabel, disabled: at === count - 1, onClick: () => go(at + 1) })] }));
-    const dots = count > 1 ? _jsx(PagerAt, { at: at + 1, of: count }) : null;
+    const dots = count > 1 ? _jsx(Pager, { at: at + 1, of: count }) : null;
     const bottom = dots || controls.length || ctaLink != null ? (_jsxs(ActionBar, { variant: "tiers", children: [dots, controls.map((c, i) => _jsx(ActionBarTier, { children: c }, i)), _jsx(ActionBarTier, { pager: true, children: custom ? row : pager }), ctaLink != null && _jsx(ActionBarTier, { className: "action-bar__tier--link", children: ctaLink })] })) : (_jsx(ActionBar, { variant: "pager", children: custom ? row : pager }));
     return (_jsxs(Screen, { fill: true, bottom: bottom, ...rest, children: [_jsx(Step, { ref: step, children: _jsx(Pages, { ...swipe, children: pages.map((p, i) => (_jsxs(Page, { "aria-current": i === at ? 'step' : undefined, inert: i !== at || undefined, children: [p.media, _jsx(CardHead, { level: "h1", heading: p.heading }), typeof p.body === 'string' ? _jsx(Text, { level: "body", children: p.body }) : p.body] }, i))) }) }), children] }));
 }

package/lib/mcp.mjs

@@ -14,7 +14,7 @@ const bool = (description) => ({ type: 'boolean', description });
 const TOOLS = [
   {
     name: 'list_components',
-    description: 'The names of every cardds component and what each is FOR, nothing else. represents is what it stands for (person, group, time…) or, for a control that stands for no one thing, the KIND of data it carries (words, number, picture, signal); the word in parentheses after a name in the text is its represents. Every component shows information; shape says how much: "one" (one thing), "group-brief" (a group read at a glance or in a line), "group-detail" (a group read in detail), "—" (a helper function or structure, not something drawn). interact says whether the member can do something with it: false (it only shows or holds), or the kinds, any of pick, act, write, navigate — alone when shape is one (a Btn acts), as a group when shape is a group (a Segment picks among several). Two kinds mean it does both. group is the src folder, not what it is for. Call this once, first, in a session that will build a UI with cardds, to learn what exists; then get_component for the ones you use.',
+    description: 'The names of every cardds component and what each is FOR, nothing else. represents is what it stands for (person, group, time…) or, for a control that stands for no one thing, the KIND of data it carries (words, number, picture, signal); the word in parentheses after a name in the text is its represents. Every component shows information; shape says how much: "one" (one thing), "group-brief" (a group read at a glance or in a line), "group-detail" (a group read in detail), "—" (a helper function or structure, not something drawn). interact says whether the member can do something with it: false (it only shows or holds), or the kinds, any of pick, act, write, navigate — alone when shape is one (a Btn acts), as a group when shape is a group (a BtnGroup picks among several). Two kinds mean it does both. group is the src folder, not what it is for. Call this once, first, in a session that will build a UI with cardds, to learn what exists; then get_component for the ones you use.',
     inputSchema: { type: 'object', properties: {} },
     run: (cat) => catalog.list(cat),
   },

package/lint/rules.mjs

@@ -115,15 +115,16 @@ export function checkSource(source, file, { classes = carddsClasses() } = {}) {
   const findings = [];
   const lines = source.split('\n');
   let text = source.replace(/\/\*[\s\S]*?\*\/|(?<![:'"`\\])\/\/[^\n]*/g, (c) => c.replace(/[^\n]/g, ' ')); // comments out, lines kept
+  const add = (rule, level, idx, message) => {
+    const line = lineOf(text, idx);
+    if (!/cardds-ignore-next-line/.test(lines[line - 2] ?? '')) findings.push({ rule, level, file, line, message }); // `// cardds-ignore-next-line` — a deliberate case (a story that shows the wrong way)
+  };
+
   // a component imported under another name (`Home as HomeScreen`) is still that component: its tags read by the name the rules know. Lines kept
   // (seen 2026-10-08: a prototype's `<HomeScreen backLabel="กลับ">` passed control-name-repeat)
   for (const imp of text.matchAll(/import\s*(?:type\s*)?\{([^}]*)\}\s*from\s*['"][^'"]*cardds[^'"]*['"]/g)) {
     for (const [, name, alias] of imp[1].matchAll(/\b([A-Z]\w*)\s+as\s+([A-Z]\w*)/g)) text = text.replace(new RegExp(`(</?)${alias}\\b`, 'g'), `$1${name}`);
   }
-  const add = (rule, level, idx, message) => {
-    const line = lineOf(text, idx);
-    if (!/cardds-ignore-next-line/.test(lines[line - 2] ?? '')) findings.push({ rule, level, file, line, message }); // `// cardds-ignore-next-line` — a deliberate case (a story that shows the wrong way)
-  };
 
   // 1 · a cardds class written by hand: the look comes without the behaviour — import the component
   for (const m of text.matchAll(/\bclass(?:Name)?(?=\s*=)/g)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.74",
+  "version": "0.7.75",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",

package/dist/actions/Segment.d.ts

@@ -1,11 +0,0 @@
-import type { ComponentProps } from 'react';
-export interface SegmentProps extends ComponentProps<'div'> {
-}
-/** Segment — a tab strip / day picker whose items share the width; children are SegmentItems. */
-export declare function Segment({ className, ...rest }: SegmentProps): import("react").JSX.Element;
-export interface SegmentItemProps extends ComponentProps<'button'> {
-    /** the selected tab (filled) */
-    selected?: boolean;
-}
-/** SegmentItem — one tab in a Segment. */
-export declare function SegmentItem({ selected, className, ...rest }: SegmentItemProps): import("react").JSX.Element;

package/dist/numbers/Band.d.ts

@@ -1,18 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import type { Tone } from '../cards/Card.js';
-export interface BandProps 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;
-}
-/** Band — a data card: 2-line label · giant number · footnote. Stack several in a BandStack for one boundary with hairlines. */
-export declare function Band({ label, num, foot, tone, className, ...rest }: BandProps): import("react").JSX.Element;
-export interface BandStackProps extends ComponentProps<'div'> {
-}
-/** BandStack — several Bands as ONE card boundary, a hairline between each. */
-export declare function BandStack({ className, ...rest }: BandStackProps): import("react").JSX.Element;

package/dist/scaffold/PagerAt.d.ts

@@ -1,11 +0,0 @@
-import type { ComponentProps } from 'react';
-export interface PagerAtProps 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;
-}
-/** PagerAt — 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 PagerAt({ at, of, label, className, ...rest }: PagerAtProps): import("react").JSX.Element;

package/dist/scaffold/PagerAt.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx.js';
-/** PagerAt — 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 PagerAt({ 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)) }));
-}