@usableapp/cardds 0.7.73 → 0.7.75

package/CHANGELOG.md

@@ -2,6 +2,47 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
 
+## 0.7.75 — 2026-10-09
+
+### Changed — ten names say what the component is for (BREAKING: the old names are gone)
+A name that said a shape now says a function (Lh 2026-10-08). The CSS classes and every knob are UNCHANGED, so a project's `theme.css` and its `--segment-*` / `--band-*` / `--wait-link-*` knobs keep working; only the import changes. Nothing of the old names is exported any more — update the import or the build fails (Lh 2026-10-09: a clean cut, no alias).
+
+| was | is | what it is for |
+|---|---|---|
+| `Segment`, `SegmentItem` | `BtnGroup`, `BtnGroupItem` | a panel of buttons, one on at a time (a grouped button; "segment" is kept for a divider of content) |
+| `WaitLink` | `Countdown` | a link that counts down and takes no tap until the time has passed |
+| `PagerAt` | `Pager` | the dots that say where one is in a walk (the bar is still `ActionBar variant="pager"`) |
+| `TileBadge` | `JourneyBadge` | the small badge on a journey's tile |
+| `Band`, `BandStack` | `NumberBand`, `NumberBandStack` | one number as a band; several stacked |
+| `Lift` | `ModalBody` | the part of a Modal that lifts: what is shown above the question |
+| `Drawer` | `ModalAsk` | the question and its answers at the Modal's foot (`ModalAsk light` as before) |
+| `ActionNote` | `BarNote` | words standing where the bar's button would be |
+
+Their Props types follow (`BtnGroupProps`, `ModalAskProps`…). `Centre`, `CtaPack`, `ActionBarTier`, `BtnTrio`, `IconBtnGroup` keep their names.
+
+### Changed — fewer stories, one per prop axis
+Ten gallery stories that differed from a sibling only by a tone, a side or an on/off are folded into that sibling (values of one axis stand side by side in one story): `Mood/Default` (was Picked + Unpicked), `Sticky/Looks` (was Tones + Flat + Tilt), `AvatarPick/Inset` (+ OnDark), `Modal/Confirm` (+ ConfirmLight), `Sheet/Half` (+ Look), `Field/Plain` (+ WithIcon); `StickyWelcome/WelcomeRight`, `SheetStack/ClosedOpened` and `SheetStack/StackBackBackOfStack` are gone. 419 → 409 stories; the catalog's `scaffold` ids change with them. The rendered html of every other story is byte-identical.
+
+## 0.7.74 — 2026-10-08
+
+### Added
+- **The guide: the few rules no checker sees, in one short text** (Lh 2026-10-08) — `npx cardds guide` prints it, and `npx cardds mcp` hands the same text to every session as the server's instructions. It says WHEN cardds applies in the words of the work (a prototype, a poc, a mock-up, ขึ้นหน้า… — a screen, a sheet, a sticky note, a stamp, a postcard), the order (find → scaffold or get → write → check), and five rules: take cardds from outside and never edit it; adjust by theme → knobs → props; every component is controlled like an input; import, never copy markup; mobile only. Before → after: these lived in a personal skill file outside the repo → they ship with the version you installed.
+- **Four more rules in `npx cardds check`** (and the ESLint plugin):
+  - `focus-by-hand` (warning) — an `autoFocus` or a `.focus()` in a file with a `Sheet`, `SheetStep`, `SheetStack`, `Home`, `Modal` or `CallSheet`: cardds places the cursor itself. Remove it; `data-autofocus` on a field picks that field.
+  - `control-name-repeat` (warning) — `handle="…"`, `backLabel="…"`, `nextLabel="…"`, `prevLabel="…"`, `skipLabel="…"` (and `PostLetter`'s) written as a plain string: cardds names these controls in the page's language (`<html lang="th">`). Drop it unless the words differ; another language is `setWords(lang, {…})` once.
+  - `native-select` (error) — a `<select>`: use `Dropdown`.
+  - `raw-value` (warning) — a raw colour or `px` length in a `style` prop: set it in `theme.css`, by a knob, or by a prop. A knob in a style (`'--tile-badge-ink': '#c00'`) is not flagged.
+  A deliberate case keeps `// cardds-ignore-next-line` with its reason, as before. Expect new warnings on the next `npm run cardds:check`.
+- **`--menu-max-h`** — the tallest a popover `Menu` / `Dropdown` panel grows (default 60% of the screen, less its margins).
+
+### Changed
+- **`npx cardds check` reads a component by its real name under an import alias** — `import { Home as HomeScreen }` then `<HomeScreen backLabel="กลับ">` passed every rule that looks for a tag; it is checked now.
+- **`npx cardds scaffold <id>` leaves out a name cardds already gives its control** — the starting file no longer carries `backLabel="กลับ"` / `handle="…"` from the gallery's story. `npx cardds get` still shows the story as written.
+- The JSDoc of `Sheet`, `SheetStep`, `StackSheet`, `SheetStack`, `Modal` says that cardds places the cursor, and each cardds-named control prop says it is named by cardds — what `npx cardds get <Name>` returns.
+
+### Fixed
+- **A long `Menu` / `Dropdown` ran off the foot of the screen** (timebank, 2026-10-08) — twenty items made a panel 979px tall on an 812px screen, the last names out of reach. Before → after: the panel grew with its items → it stops at `--menu-max-h` and scrolls inside. Nothing to change in an app.
+
 ## 0.7.73 — 2026-10-08
 
 ### Added

package/README.md

@@ -149,15 +149,18 @@ npx cardds scaffold <id>        # a whole file from a screen: tsx (the code) or
 npx cardds get <Name> [--html]  # one component: its role, props (a ReactNode prop is a slot) + variations with code
 npx cardds list                 # every name by what it is for: one · group-brief · group-detail, the show-only first, then by what the member can do
 npx cardds check <dir>          # the rules, before a screen is called done
+npx cardds guide                # the few rules no checker sees, in one short text
 ```
 
-All take `--json` (the function's result) and `--root <path>` (a cardds checkout: rebuilt first, so never stale). The same
+`list` · `get` · `find` · `scaffold` take `--json` (the function's result) and `--root <path>` (a cardds checkout: rebuilt first, so never stale). The same
 five answers over MCP — `list_components` · `get_component` · `find_components` · `scaffold_screen` · `check_source`:
 
 ```json
 { "mcpServers": { "cardds": { "command": "npx", "args": ["cardds", "mcp"] } } }
 ```
 
+The MCP server hands a session the same text as `npx cardds guide` as its instructions, when it starts.
+
 A scaffolded tsx may import `./_story` or `./_*Art`: story glue, not in the package — replace or drop it.
 
 ### React adapter — how a component is written
@@ -236,16 +239,16 @@ of `Screen`:
 |---|---|---|
 | **top** | `top` | `TopBar` · `AppBar` · `"lead"` (no bar: the content starts `--screen-lead`, 15% of the screen, down) |
 | **content** | children | a `Step` (`Pages` · `Page` · `Page` + `Sheet`) · `Centre` · `SheetStack` … |
-| **bottom** | `bottom` | `ActionBar` (rows: `controls` · the one `cta` row — the pager ← → or one wide button · a `ctaLink`) · `FloatBar` · nothing |
+| **bottom** | `bottom` | `ActionBar` (rows: `controls` · the one `cta` row — the pager bar ← → or one wide button · a `ctaLink`) · `FloatBar` · nothing |
 
 ```tsx
 <Screen fill top="lead" bottom={<ActionBar variant="pager">…</ActionBar>}>
-  <Step><Pages>…</Pages><PagerAt at={1} of={3} /></Step>
+  <Step><Pages>…</Pages><Pager at={1} of={3} /></Step>
 </Screen>
 ```
 
 - **Top and content are one flex column; the bottom is a LAYER** (Lh 2026-09-23). In `Screen fill` the content runs to the
-  screen's bottom edge; the bottom (`ActionBar`, with the walk's `PagerAt` as its first row) lies over it at the foot and
+  screen's bottom edge; the bottom (`ActionBar`, with the walk's `Pager` as its first row) lies over it at the foot and
   covers what is under it — on purpose, nothing is added to the content to make room. The keyboard lifts the layer (`--kb`).
 - **The bar is INSIDE the screen** — `bottom`, never a sibling after `</Screen>`, never pinned with a hand-set `position`.
   A `FloatBar` in `bottom` floats the same way.
@@ -336,7 +339,7 @@ whose markup has rules, because the sheet's box is the step itself:
   needs to: the body's bottom padding is the part that slid under (`--_cover`), so the last row comes up to
   the button at half and 3q as it does at full.
 - **Layers: the base, the sheet over it, the top bar** (Lh 2026-09-20). The `.action-bar` belongs to the
-  BASE — the move of a page of words (a pager, or one wide button). It is never in front of a sheet. A
+  BASE — the move of a page of words (a pager bar, or one wide button). It is never in front of a sheet. A
   screen with a sheet finishes ON the sheet: a `.card__foot`, the sheet's last child — ONE row, the page's
   conclusion. The foot stands on the screen's bottom edge at half, 3q and full alike (a layer as tall as
   the sheet, slid up by the share the sheet slid down — `sheet.css`), and is gone at peek. Nothing inside
@@ -401,19 +404,19 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   above the centre (2 × (40% − the title bar)): a card taller than that is
   not a centred card — it is a plain scrolling `.screen` (the detail view).
 - **A small group at the same centre** — an empty state; a card with its quiet
-  second button and the pager dots under it — is `.screen__centre` (React: `Centre`), a block in the fill
+  second button and the `Pager` dots under it — is `.screen__centre` (React: `Centre`), a block in the fill
   screen after the topbar. Same placement and cap; it runs edge to edge with
   the inset as padding, and stacks its children at the
   screen's gap. Never hand-lay `top: 40%` on a screen.
 - **The bar is the screen's bottom.** Plain `.action-bar` for one move; with a
   control that belongs to the screen (a slider), `.action-bar--tiers` stacks a
   control tier above the buttons (it publishes the taller `--bar-reserve` the centred card still reads for its cap).
-- **The round pager** is `.action-bar--pager` (or an `.action-bar__tier--pager`)
+- **The round pager bar** is `.action-bar--pager` (or an `.action-bar__tier--pager`)
   holding two `.icon-btn`s and nothing else: they stand at the two edges. The
   step that commits still goes back to one wide button (rule 3).
 - **Page that moves** (Lh 2026-09-20) — two ways, never both on one screen:
   - *Pages of words:* `.step > .pages > .page` (one `aria-current="step"`, the rest `inert`) — every page
-    one height, the round pager turns them (`slideTo()`), the words slide like a page. No sheet there.
+    one height, the round pager bar turns them (`slideTo()`), the words slide like a page. No sheet there.
     ONE SCREEN TO THE NEXT (a route change) slides the WHOLE screen the same way: `slideScreen(() => navigate(to), 'next' | 'back')`,
     and `installScreenSlide()` once at app start for the back button (story `Step · WalksOn`). `data-slide="off"` on a Screen = no slide.
     ONE OUTCOME, DRAWN ONCE (Lh 2026-10-01): a screen that can come out more than one way (signed in or not, a list or
@@ -446,7 +449,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
     it scroll clear.
     **Never a form taken apart** — one sheet per field, a "send" left on the base: a form lives whole in ONE sheet.
     Fixture `tests/fixtures/calls.html`, tests `tests/calls.spec.js`, stories `Step · Walks` / `Step · Calls`.
-- **A pager turns pages of words, never a screen with a sheet** (Lh 2026-09-20). A
+- **A pager bar turns pages of words, never a screen with a sheet** (Lh 2026-09-20). A
   sheet means this screen has work that cannot be walked past: no ← →, no bar at all — the sheet's
   own foot finishes it. (Guidance — not enforced.)
 - A screen is **top · content · bottom** on the base (*Screen: top · content · bottom*). The base is the
@@ -697,7 +700,7 @@ question and hunts for its answer. Rules 11–13 serve that:
     not filled with more content; a new edge is made instead (line the buttons
     up with the avatar).
 12. **Show, don't explain.** Where a known picture carries it — an avatar for a
-    person, an icon, a `Ring`/`Track`/`Band`, a `Chip` for a category — use it
+    person, an icon, a `Ring`/`Track`/`NumberBand`, a `Chip` for a category — use it
     instead of words. Never add a label, a caption line, a comparison or a
     tooltip to explain what the picture already says (the retired overline was
     that mistake). Long lists are differentiated, not spaced out: group them

package/bin/cardds.mjs

@@ -1,12 +1,14 @@
 #!/usr/bin/env node
 // `npx cardds init` — set a project up the ONE way (Lh 2026-09-29): the project's theme.css, the check script, the ESLint rules.
 // `npx cardds check [dir…]` — the rules of lint/rules.mjs over the project's source; exit 1 on an error.
+// `npx cardds guide` — the few rules no checker sees, as text (the MCP server hands the same text over as its instructions).
 // `npx cardds list | get <Name> | find [words…] [--represents a,b] [--shape s] [--interact k|none] | scaffold [id]` — the component catalog (lib/catalog.mjs) for an AI session; `npx cardds mcp` serves the same over MCP.
 import { existsSync, readFileSync, writeFileSync, readdirSync, statSync, mkdirSync, copyFileSync } from 'node:fs';
 import { dirname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { checkSource } from '../lint/rules.mjs';
 import * as catalog from '../lib/catalog.mjs';
+import { GUIDE } from '../lib/guide.mjs';
 
 const PKG = join(dirname(fileURLToPath(import.meta.url)), '..');
 const [cmd, ...args] = process.argv.slice(2);
@@ -123,6 +125,6 @@ function ask(cmd, argv) {
   return 0;
 }
 
-const code = cmd === 'check' ? check(args) : cmd === 'init' ? init() : ['list', 'get', 'find', 'scaffold', 'mcp'].includes(cmd) ? await ask(cmd, args)
-  : (console.log('usage: cardds init | check [dir…] | list | get <Name> [--html] | find [words…] [--represents a,b] [--shape s] [--interact k|none] | scaffold [id] [--html [--css <href>]] | mcp   (list get find scaffold mcp: --root <path> --json)'), cmd ? 2 : 0);
+const code = cmd === 'check' ? check(args) : cmd === 'init' ? init() : cmd === 'guide' ? (process.stdout.write(GUIDE), 0) : ['list', 'get', 'find', 'scaffold', 'mcp'].includes(cmd) ? await ask(cmd, args)
+  : (console.log('usage: cardds init | guide | check [dir…] | list | get <Name> [--html] | find [words…] [--represents a,b] [--shape s] [--interact k|none] | scaffold [id] [--html [--css <href>]] | mcp   (list get find scaffold mcp: --root <path> --json)'), cmd ? 2 : 0);
 process.exitCode = code;  // not process.exit: a big answer piped to a reader is cut off by an exit before it is flushed

package/css/layover.css

@@ -79,7 +79,7 @@
   --accent: var(--card-ink);
   --on-accent: var(--card-bg);
 }
-/* the CONFIRM: a Modal with no Lift — the drawer IS the card, as tall as its words (no fixed band, no second beat) */
+/* the CONFIRM: a Modal with no ModalBody: the ModalAsk IS the card, as tall as its words (no fixed band, no second beat) */
 .modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
 .modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */
@@ -128,6 +128,10 @@
   padding: var(--menu-pad);
   min-width: 12rem;
   align-content: start;       /* rows keep their own height: WebKit stretches a popover grid's rows to the whole room under its anchor (iOS 26.5, 2026-10-08) */
+  --_menu-max: min(60dvh, calc(100dvh - 2 * var(--sp-5)));
+  max-height: var(--menu-max-h, var(--_menu-max)); /* a long list (twenty neighbours) scrolls inside the panel — it ran off the screen's foot, the last names out of reach (timebank, 2026-10-08) */
+  overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--menu-bg, var(--action-bg));
   color: var(--menu-ink, var(--action-ink));
   box-shadow: var(--menu-shadow, var(--shadow-float));

package/css/lists.css

@@ -201,7 +201,7 @@
 .link--sm { position: relative; font-size: var(--link-sm-font-size, var(--fs-2xs)); min-height: var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)); }
 .link--sm::after { content: ""; position: absolute; inset: calc((var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) - var(--tap-sm)) / 2) 0; }
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
-.link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a WaitLink counting down) */
+.link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a Countdown) */
 .link--wait { font-variant-numeric: tabular-nums; } /* the countdown's digits keep their width: the words do not jiggle each second */
 .card--3 .link--muted { color: var(--card-3-muted); }
 

package/dist/actions/{ActionNote.d.ts → BarNote.d.ts}

@@ -1,11 +1,11 @@
 import type { ComponentProps } from 'react';
-export interface ActionNoteProps extends ComponentProps<'div'> {
+export interface BarNoteProps extends ComponentProps<'div'> {
 }
 /**
- * ActionNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
+ * BarNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
  * size (full width, `--btn-h` tall), lying on the ground — no fill, no border, no rounding — holding one line of muted words, an
  * inline `Icon` allowed ("กดที่ <Icon name="share" /> ด้านล่างนี้" — the member does the thing elsewhere). It does nothing on a tap.
  * A member of the BOTTOM: a `CardFoot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
  * it (CardFoot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
  */
-export declare function ActionNote({ className, children, ...rest }: ActionNoteProps): import("react").JSX.Element;
+export declare function BarNote({ className, children, ...rest }: BarNoteProps): import("react").JSX.Element;

package/dist/actions/{ActionNote.js → BarNote.js}

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /**
- * ActionNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
+ * BarNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
  * size (full width, `--btn-h` tall), lying on the ground — no fill, no border, no rounding — holding one line of muted words, an
  * inline `Icon` allowed ("กดที่ <Icon name="share" /> ด้านล่างนี้" — the member does the thing elsewhere). It does nothing on a tap.
  * A member of the BOTTOM: a `CardFoot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
  * it (CardFoot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
  */
-export function ActionNote({ className, children, ...rest }) {
+export function BarNote({ className, children, ...rest }) {
     return _jsx("div", { role: "note", className: cx('action-note', className), ...rest, children: _jsx("span", { className: "action-note__words", children: children }) });
 }

package/dist/actions/BtnGroup.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+export interface BtnGroupProps extends ComponentProps<'div'> {
+}
+/** BtnGroup — a panel of buttons, one on at a time (a tab strip, a day picker): its items share the width; children are BtnGroupItems. */
+export declare function BtnGroup({ className, ...rest }: BtnGroupProps): import("react").JSX.Element;
+export interface BtnGroupItemProps extends ComponentProps<'button'> {
+    /** the selected tab (filled) */
+    selected?: boolean;
+}
+/** BtnGroupItem — one tab in a BtnGroup. */
+export declare function BtnGroupItem({ selected, className, ...rest }: BtnGroupItemProps): import("react").JSX.Element;

package/dist/actions/{Segment.js → BtnGroup.js}

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** Segment — a tab strip / day picker whose items share the width; children are SegmentItems. */
-export function Segment({ className, ...rest }) {
+/** BtnGroup — a panel of buttons, one on at a time (a tab strip, a day picker): its items share the width; children are BtnGroupItems. */
+export function BtnGroup({ className, ...rest }) {
     return _jsx("div", { className: cx('segment', className), role: "tablist", ...rest });
 }
-/** SegmentItem — one tab in a Segment. */
-export function SegmentItem({ selected, className, ...rest }) {
+/** BtnGroupItem — one tab in a BtnGroup. */
+export function BtnGroupItem({ selected, className, ...rest }) {
     return _jsx("button", { type: "button", role: "tab", "aria-selected": selected ? 'true' : undefined, className: cx('segment__item', className), ...rest });
 }

package/dist/actions/{WaitLink.d.ts → Countdown.d.ts}

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import { type LinkProps } from './Link.js';
-export interface WaitLinkProps extends Omit<LinkProps, 'href'> {
+export interface CountdownProps extends Omit<LinkProps, 'href'> {
     /** CONTROLLED: when it may be pressed again (a time in ms, `Date.now()` based). Before that it counts down and takes no taps;
      *  null / past = ready. The APP owns the rule — 30 s, +30 s each time — and sets a new `until` in its onClick. */
     until?: number | null;
@@ -8,7 +8,7 @@ export interface WaitLinkProps extends Omit<LinkProps, 'href'> {
     waiting?: (left: string) => ReactNode;
 }
 /**
- * WaitLink — a Link that waits: "ขอรหัสใหม่ได้ใน 0:27", counting down each second, then "ขอรหัสใหม่" to press (a new OTP, a retry).
+ * Countdown — a Link that waits: "ขอรหัสใหม่ได้ใน 0:27", counting down each second, then "ขอรหัสใหม่" to press (a new OTP, a retry).
  * A link, not a button: it is the step's second way, under its control; in a SheetStep it stands centred on its own row.
  */
-export declare function WaitLink({ until, waiting, children, className, disabled, ...rest }: WaitLinkProps): import("react").JSX.Element;
+export declare function Countdown({ until, waiting, children, className, disabled, ...rest }: CountdownProps): import("react").JSX.Element;

package/dist/actions/{WaitLink.js → Countdown.js}

@@ -3,10 +3,10 @@ import { useEffect, useState } from 'react';
 import { cx } from '../cx.js';
 import { Link } from './Link.js';
 /**
- * WaitLink — a Link that waits: "ขอรหัสใหม่ได้ใน 0:27", counting down each second, then "ขอรหัสใหม่" to press (a new OTP, a retry).
+ * Countdown — a Link that waits: "ขอรหัสใหม่ได้ใน 0:27", counting down each second, then "ขอรหัสใหม่" to press (a new OTP, a retry).
  * A link, not a button: it is the step's second way, under its control; in a SheetStep it stands centred on its own row.
  */
-export function WaitLink({ until, waiting, children, className, disabled, ...rest }) {
+export function Countdown({ until, waiting, children, className, disabled, ...rest }) {
     const [now, setNow] = useState(() => Date.now());
     const left = until != null ? Math.ceil((until - now) / 1000) : 0;
     useEffect(() => {

package/dist/actions/Link.d.ts

@@ -9,12 +9,12 @@ export interface LinkProps extends ComponentProps<'a'> {
     sm?: boolean;
     /** without an href it renders as a button */
     href?: string;
-    /** a button link that takes no taps now (reads inactive: muted) — `WaitLink` while it counts down */
+    /** a button link that takes no taps now (reads inactive: muted) — `Countdown` while it counts down */
     disabled?: boolean;
 }
 /** Link — an inline text action big enough to tap (40px): "See all ↗" in a card head, "Skip" between pager buttons. */
 export declare function Link({ muted, sm, icon, href, className, children, ...rest }: LinkProps): import("react").DetailedReactHTMLElement<{
-    /** a button link that takes no taps now (reads inactive: muted) — `WaitLink` while it counts down */
+    /** a button link that takes no taps now (reads inactive: muted) — `Countdown` while it counts down */
     disabled?: boolean;
     ref?: import("react").Ref<HTMLAnchorElement> | undefined;
     key?: import("react").Key | null | undefined;

package/dist/cardds.css

@@ -3662,7 +3662,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .link--sm { position: relative; font-size: var(--link-sm-font-size, var(--fs-2xs)); min-height: var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)); }
 .link--sm::after { content: ""; position: absolute; inset: calc((var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) - var(--tap-sm)) / 2) 0; }
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
-.link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a WaitLink counting down) */
+.link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a Countdown) */
 .link--wait { font-variant-numeric: tabular-nums; } /* the countdown's digits keep their width: the words do not jiggle each second */
 .card--3 .link--muted { color: var(--card-3-muted); }
 
@@ -4785,7 +4785,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --accent: var(--card-ink);
   --on-accent: var(--card-bg);
 }
-/* the CONFIRM: a Modal with no Lift — the drawer IS the card, as tall as its words (no fixed band, no second beat) */
+/* the CONFIRM: a Modal with no ModalBody: the ModalAsk IS the card, as tall as its words (no fixed band, no second beat) */
 .modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
 .modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */
@@ -4834,6 +4834,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   padding: var(--menu-pad);
   min-width: 12rem;
   align-content: start;       /* rows keep their own height: WebKit stretches a popover grid's rows to the whole room under its anchor (iOS 26.5, 2026-10-08) */
+  --_menu-max: min(60dvh, calc(100dvh - 2 * var(--sp-5)));
+  max-height: var(--menu-max-h, var(--_menu-max)); /* a long list (twenty neighbours) scrolls inside the panel — it ran off the screen's foot, the last names out of reach (timebank, 2026-10-08) */
+  overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--menu-bg, var(--action-bg));
   color: var(--menu-ink, var(--action-ink));
   box-shadow: var(--menu-shadow, var(--shadow-float));

package/dist/cards/Card.d.ts

@@ -19,7 +19,7 @@ export interface CardProps extends ComponentProps<'article'> {
     fold?: boolean;
     /** one card at the human centre of a `Screen fill` (the introduction screens) */
     centre?: boolean;
-    /** a data band: label · giant number · footnote — see Band */
+    /** a data band: label · giant number · footnote — see NumberBand */
     band?: boolean;
     /** the element: article (default), a when it links, label when it wraps an input, div/section */
     as?: 'article' | 'div' | 'a' | 'label' | 'section' | 'li';

package/dist/cards/CardParts.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
 export interface CardMediaProps extends ComponentProps<'div'> {
 }
-/** CardMedia — rounded media inside a card (a Placeholder or img); a corner TileBadge pins to it. */
+/** CardMedia — rounded media inside a card (a Placeholder or img); a corner JourneyBadge pins to it. */
 export declare function CardMedia({ className, ...rest }: CardMediaProps): import("react").JSX.Element;
 export interface CardBodyProps extends ComponentProps<'div'> {
 }

package/dist/cards/CardParts.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** CardMedia — rounded media inside a card (a Placeholder or img); a corner TileBadge pins to it. */
+/** CardMedia — rounded media inside a card (a Placeholder or img); a corner JourneyBadge pins to it. */
 export function CardMedia({ className, ...rest }) {
     return _jsx("div", { className: cx('card__media', className), ...rest });
 }