@usableapp/cardds 0.7.74 → 0.7.75

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 > 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

package/README.md

@@ -239,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.
@@ -339,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
@@ -404,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
@@ -449,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
@@ -700,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/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 */

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 */

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 });
 }