@usableapp/cardds 0.7.41 → 0.7.43

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 > 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.43 — 2026-10-02
+
+### Added
+- **`Snackbar` — a quick good-news line over the screen** (Lh 2026-10-02): something went well, said in passing; a warning or a question stays a `Modal`. A child of the `Screen`: `<Snackbar icon="check" onClosed={…}>ส่งคำขอแล้ว</Snackbar>` slides in from the top, stays `duration` (4000 ms; 0 = until the app closes it), slides out and calls `onClosed` — unmount it there. `open` + `onOpenChange(open, 'timeout' | 'tap')` or `defaultOpen`; `caption` = a second small line; `bottom` = at the foot, above the bottom layer; `onTap` = it can be tapped (open the notification it tells about). One at a time — the queue and the notification list are the app's. Knobs `--snackbar-*` (docs/knobs.md). Stories `Snackbar · Success` · `Controlled` · `Bottom` · `LongWords`.
+
+## 0.7.42 — 2026-10-02
+
+### Added
+- **`CallSheet ways`: a way with no `action`** — a sheet with no button on the page, called by the sheet before it (the app sets `open` to its index from that sheet's foot): a form in several sheets, one after another. Before, every way drew a button. The first way WITH an action is the primary button. Story `CallSheet · Follows`.
+
 ## 0.7.41 — 2026-10-02
 
 ### Added

package/README.md

@@ -306,6 +306,11 @@ whose markup has rules, because the sheet's box is the step itself:
   opened, a `SheetStack` sheet opened, a `Modal` arrived. Once it has settled: the field marked `data-autofocus`, else its
   first field, else its heading (a step's title, a modal's question) or, for a sheet come onto the screen, its handle. A field
   that already has the cursor keeps it. One mechanic for all of them (`focusWhenActive`, src/state.ts); an app writes no focus code.
+- **Good news is a `Snackbar`, a warning or a question is a `Modal`** (Lh 2026-10-02): a `Snackbar` is a quick line over the
+  screen — something went well, said in passing. A child of the `Screen`; it slides in from the top (or `bottom`, above the
+  bottom layer), stays `duration` (4 s), slides out, never takes the cursor, never stops the member. `open` +
+  `onOpenChange(open, reason)` or `defaultOpen`; unmount it in `onClosed`. One at a time: the queue and the notification
+  list are the app's — the app shows its newest notification in it, `onTap` opens that notification.
 - **cardds names its own controls, in the page's language** (Lh 2026-09-29): a handle, a back button, a Pin's cells… read
   their name from `src/words.ts` by `<html lang>` (en, th ship; `setWords(lang, {…})` adds one). An app passes no label that
   only repeats these words; a prop still wins.

package/css/actions.css

@@ -359,7 +359,7 @@
    pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here. */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item) {
+  a.avatar, button.avatar, .menu__item, button.snackbar__body) {
   cursor: pointer;
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
@@ -378,7 +378,7 @@
 }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
+  a.avatar, button.avatar, .menu__item, button.snackbar__body):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
 /* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back) must not turn see-through:
@@ -388,17 +388,17 @@
 /* the focus ring: on the control, or on the label that wraps a hidden input (chip, tile, file button, a row that is a label) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item):focus-visible,
+  a.avatar, button.avatar, .menu__item, button.snackbar__body):focus-visible,
 :where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn, label.row):has(:disabled) { cursor: default; }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item):not(.link):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body):not(.link):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn):has(:disabled) { opacity: var(--off); }
 .sheet-stack--tap > .card > .card__head > :is(h1, h2, h3):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); } /* the keyboard's way into a stack sheet */
 @media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } } /* the give goes; the dim, the shade and the focus ring stay */

package/css/layover.css

@@ -308,3 +308,38 @@
 .splash__mark > * { display: block; width: 100%; height: auto; }
 .splash__text { margin: 0; font: var(--type-body); color: var(--splash-text-ink, var(--on-surface-muted)); }
 @media (prefers-reduced-motion: reduce) { .splash { transition: none; } }
+/* ---- snackbar: a quick good-news line over the screen — slides in, stays a moment, slides out (Lh 2026-10-02) ----
+   <div class="snackbar snackbar--open" role="status"><div class="snackbar__body"><svg class="icon"/>
+     <span class="snackbar__words"><span class="snackbar__text">…</span><span class="snackbar__caption">…</span></span></div></div>
+   A LAYER of the screen (its child), over the top bar; --bottom = at the foot, above the screen's bottom layer (--bottom-h).
+   Rigid like a sheet: `translate` only. `button.snackbar__body` = it can be tapped. Never a warning — that is a Modal. */
+.snackbar {
+  --_out: -1;
+  position: fixed; inset-inline: 0; top: calc(var(--sp-3) + var(--safe-top));
+  max-width: var(--screen-w); margin-inline: auto; padding-inline: var(--screen-pad, var(--sp-4));
+  display: grid; justify-items: center;
+  z-index: calc(var(--z-top) + 1);
+  pointer-events: none; visibility: hidden;
+  translate: 0 calc(var(--_out) * (100% + var(--sp-8) + var(--safe-top)));
+  transition: translate var(--motion-sheet) ease, visibility 0s var(--motion-sheet);
+}
+.screen--fill > .snackbar, .sheet-stage > .snackbar { position: absolute; }
+.snackbar--bottom { --_out: 1; top: auto; bottom: calc(var(--sp-3) + var(--bottom-h, 0px) + max(var(--safe-bottom), var(--kb, 0px))); }
+.snackbar--open { translate: 0; visibility: visible; transition-delay: 0s; }
+.snackbar__body {
+  display: flex; align-items: center; gap: var(--snackbar-gap, var(--sp-3));
+  max-width: 100%; min-height: var(--snackbar-min-h, var(--tap));
+  padding: var(--snackbar-pad-y, var(--sp-2)) var(--snackbar-pad-x, var(--sp-5));
+  border: var(--border-w) solid var(--snackbar-border, var(--action-border));
+  border-radius: var(--snackbar-radius, var(--r-card));
+  background: var(--snackbar-bg, var(--action-bg));
+  color: var(--snackbar-ink, var(--action-ink));
+  box-shadow: var(--snackbar-shadow, var(--shadow-float));
+  font: inherit; text-align: start;
+  pointer-events: auto;
+}
+.snackbar__body > .icon { flex: none; }
+.snackbar__words { display: grid; min-width: 0; overflow-wrap: anywhere; }
+.snackbar__text { font: var(--snackbar-text-font, var(--type-body)); }
+.snackbar__caption { font: var(--snackbar-caption-font, var(--type-caption)); opacity: var(--dim); }
+@media (prefers-reduced-motion: reduce) { .snackbar { transition: none; } }

package/dist/cardds.css

@@ -2414,7 +2414,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here. */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item) {
+  a.avatar, button.avatar, .menu__item, button.snackbar__body) {
   cursor: pointer;
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
@@ -2433,7 +2433,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
+  a.avatar, button.avatar, .menu__item, button.snackbar__body):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
 /* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back) must not turn see-through:
@@ -2443,17 +2443,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* the focus ring: on the control, or on the label that wraps a hidden input (chip, tile, file button, a row that is a label) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item):focus-visible,
+  a.avatar, button.avatar, .menu__item, button.snackbar__body):focus-visible,
 :where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn, label.row):has(:disabled) { cursor: default; }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item):not(.link):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body):not(.link):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn):has(:disabled) { opacity: var(--off); }
 .sheet-stack--tap > .card > .card__head > :is(h1, h2, h3):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); } /* the keyboard's way into a stack sheet */
 @media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } } /* the give goes; the dim, the shade and the focus ring stay */
@@ -3935,4 +3935,39 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .splash__mark > * { display: block; width: 100%; height: auto; }
 .splash__text { margin: 0; font: var(--type-body); color: var(--splash-text-ink, var(--on-surface-muted)); }
 @media (prefers-reduced-motion: reduce) { .splash { transition: none; } }
+/* ---- snackbar: a quick good-news line over the screen — slides in, stays a moment, slides out (Lh 2026-10-02) ----
+   <div class="snackbar snackbar--open" role="status"><div class="snackbar__body"><svg class="icon"/>
+     <span class="snackbar__words"><span class="snackbar__text">…</span><span class="snackbar__caption">…</span></span></div></div>
+   A LAYER of the screen (its child), over the top bar; --bottom = at the foot, above the screen's bottom layer (--bottom-h).
+   Rigid like a sheet: `translate` only. `button.snackbar__body` = it can be tapped. Never a warning — that is a Modal. */
+.snackbar {
+  --_out: -1;
+  position: fixed; inset-inline: 0; top: calc(var(--sp-3) + var(--safe-top));
+  max-width: var(--screen-w); margin-inline: auto; padding-inline: var(--screen-pad, var(--sp-4));
+  display: grid; justify-items: center;
+  z-index: calc(var(--z-top) + 1);
+  pointer-events: none; visibility: hidden;
+  translate: 0 calc(var(--_out) * (100% + var(--sp-8) + var(--safe-top)));
+  transition: translate var(--motion-sheet) ease, visibility 0s var(--motion-sheet);
+}
+.screen--fill > .snackbar, .sheet-stage > .snackbar { position: absolute; }
+.snackbar--bottom { --_out: 1; top: auto; bottom: calc(var(--sp-3) + var(--bottom-h, 0px) + max(var(--safe-bottom), var(--kb, 0px))); }
+.snackbar--open { translate: 0; visibility: visible; transition-delay: 0s; }
+.snackbar__body {
+  display: flex; align-items: center; gap: var(--snackbar-gap, var(--sp-3));
+  max-width: 100%; min-height: var(--snackbar-min-h, var(--tap));
+  padding: var(--snackbar-pad-y, var(--sp-2)) var(--snackbar-pad-x, var(--sp-5));
+  border: var(--border-w) solid var(--snackbar-border, var(--action-border));
+  border-radius: var(--snackbar-radius, var(--r-card));
+  background: var(--snackbar-bg, var(--action-bg));
+  color: var(--snackbar-ink, var(--action-ink));
+  box-shadow: var(--snackbar-shadow, var(--shadow-float));
+  font: inherit; text-align: start;
+  pointer-events: auto;
+}
+.snackbar__body > .icon { flex: none; }
+.snackbar__words { display: grid; min-width: 0; overflow-wrap: anywhere; }
+.snackbar__text { font: var(--snackbar-text-font, var(--type-body)); }
+.snackbar__caption { font: var(--snackbar-caption-font, var(--type-caption)); opacity: var(--dim); }
+@media (prefers-reduced-motion: reduce) { .snackbar { transition: none; } }
 

package/dist/index.d.ts

@@ -79,6 +79,7 @@ export * from './media/Tile.js';
 export * from './media/Mosaic.js';
 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/NoteRow.js';

package/dist/index.js

@@ -83,6 +83,7 @@ export * from './media/Tile.js';
 export * from './media/Mosaic.js';
 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/NoteRow.js';

package/dist/layover/Snackbar.d.ts

@@ -0,0 +1,30 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { IconName } from '../type/icons.js';
+export type SnackbarReason = 'timeout' | 'tap';
+export interface SnackbarProps extends Omit<ComponentProps<'div'>, 'onClick'> {
+    /** CONTROLLED: in sight — with `onOpenChange`; or `defaultOpen` */
+    open?: boolean;
+    /** UNCONTROLLED: starts in sight (default true — mounting it is showing it) */
+    defaultOpen?: boolean;
+    /** it asks to leave: its time is up (`timeout`) or it was tapped (`tap`) */
+    onOpenChange?: (open: boolean, reason: SnackbarReason) => void;
+    /** how long it stays, in ms (default 4000); 0 = until the app closes it */
+    duration?: number;
+    /** a glyph before the words */
+    icon?: IconName;
+    /** a second, smaller line under the words */
+    caption?: ReactNode;
+    /** at the screen's foot, above its bottom layer, instead of the top */
+    bottom?: boolean;
+    /** the member tapped it (the app opens what it tells about — its notification); it then asks to leave */
+    onTap?: () => void;
+    /** it has slid out: the app unmounts it now, or shows the next one */
+    onClosed?: () => void;
+}
+/**
+ * Snackbar — a quick GOOD-NEWS line laid over the screen: something went well, said in passing. It slides in from the screen's top
+ * (or `bottom`), stays `duration`, slides out, never takes the cursor and never stops the member. Not for a warning or a question —
+ * that is a `Modal`. A child of the `Screen`. Controlled like an input: `open` + `onOpenChange(open, reason)`, or `defaultOpen`;
+ * ONE at a time — the queue is the app's (what it shows is the app's own notification, kept in the app's list; a tap = `onTap`).
+ */
+export declare function Snackbar({ open, defaultOpen, onOpenChange, duration, icon, caption, bottom, onTap, onClosed, className, children, ...rest }: SnackbarProps): import("react").JSX.Element;

package/dist/layover/Snackbar.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
+import { reducedMotion, useControlled, useLatest } from '../state.js';
+/**
+ * Snackbar — a quick GOOD-NEWS line laid over the screen: something went well, said in passing. It slides in from the screen's top
+ * (or `bottom`), stays `duration`, slides out, never takes the cursor and never stops the member. Not for a warning or a question —
+ * that is a `Modal`. A child of the `Screen`. Controlled like an input: `open` + `onOpenChange(open, reason)`, or `defaultOpen`;
+ * ONE at a time — the queue is the app's (what it shows is the app's own notification, kept in the app's list; a tap = `onTap`).
+ */
+export function Snackbar({ open, defaultOpen = true, onOpenChange, duration = 4000, icon, caption, bottom, onTap, onClosed, className, children, ...rest }) {
+    const [shown, request] = useControlled(open, defaultOpen, onOpenChange);
+    const [entered, setEntered] = useState(false); // its first frame is out of sight, so one mounted open slides in
+    const closed = useLatest(onClosed);
+    const up = shown && entered;
+    useEffect(() => { const f = requestAnimationFrame(() => setEntered(true)); return () => cancelAnimationFrame(f); }, []);
+    useEffect(() => {
+        if (!up || !duration)
+            return;
+        const t = setTimeout(() => request(false, 'timeout'), duration);
+        return () => clearTimeout(t);
+    }, [up, duration, request]);
+    useEffect(() => {
+        if (shown || !entered)
+            return;
+        const ms = reducedMotion() ? 0 : parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--motion-sheet')) * 1000 || 350;
+        const t = setTimeout(() => closed.current?.(), ms);
+        return () => clearTimeout(t);
+    }, [shown, entered]);
+    const words = (_jsxs(_Fragment, { children: [icon && _jsx(Icon, { name: icon }), _jsxs("span", { className: "snackbar__words", children: [_jsx("span", { className: "snackbar__text", children: children }), caption != null && _jsx("span", { className: "snackbar__caption", children: caption })] })] }));
+    return (_jsx("div", { className: cx('snackbar', bottom && 'snackbar--bottom', up && 'snackbar--open', className), role: "status", "aria-live": "polite", inert: !up, ...rest, children: onTap
+            ? _jsx("button", { type: "button", className: "snackbar__body", onClick: () => { onTap(); request(false, 'tap'); }, children: words })
+            : _jsx("div", { className: "snackbar__body", children: words }) }));
+}

package/dist/templates/CallSheet.d.ts

@@ -15,8 +15,9 @@ export interface CallSheetSheet {
 }
 /** one way in: its button and the sheet it calls */
 export interface CallSheetWay {
-    /** the button's words */
-    action: ReactNode;
+    /** the button's words. NONE = a sheet with no button on the page: the sheet BEFORE it calls it (the app sets `open` to its
+     *  index from that sheet's foot) — a form in several sheets, one after another */
+    action?: ReactNode;
     /** what that button brings up */
     sheet: CallSheetSheet;
 }

package/dist/templates/CallSheet.js

@@ -21,6 +21,7 @@ export function CallSheet({ media, heading, body, action, sheet, ways, open: ope
     const list = ways ?? (sheet ? [{ action, sheet }] : []);
     const [on, set] = useControlled(openProp === undefined ? undefined : index(openProp), index(defaultOpen), onOpenChange && ((next) => onOpenChange(next !== null, next)));
     const [at, setAt] = useState('full');
+    const first = list.findIndex((w) => w.action != null); // the first way WITH a button is the primary one
     // a sheet on its way out keeps its body until it has slid away — an emptied sheet sliding down read as a broken one
     const [leaving, setLeaving] = useState(null), [was, setWas] = useState(on);
     if (was !== on) {
@@ -28,7 +29,7 @@ export function CallSheet({ media, heading, body, action, sheet, ways, open: ope
         if (was !== null)
             setLeaving(was);
     }
-    return (_jsxs(Screen, { fill: true, ...rest, children: [_jsxs(Step, { children: [_jsxs(Page, { children: [media, _jsx(CardHead, { level: "h1", heading: heading }), typeof body === 'string' ? _jsx(Text, { level: "body", children: body }) : body, _jsx(CtaPack, { children: list.map((w, i) => (_jsx(Btn, { primary: i === 0, quiet: i > 0, "aria-expanded": on === i, onClick: () => { setAt('full'); set(i); }, children: w.action }, i))) })] }), list.map(({ sheet: sh }, i) => (_jsxs(Sheet, { state: on === i ? at : 'away', onStateChange: (s) => { if (s === 'away')
+    return (_jsxs(Screen, { fill: true, ...rest, children: [_jsxs(Step, { children: [_jsxs(Page, { children: [media, _jsx(CardHead, { level: "h1", heading: heading }), typeof body === 'string' ? _jsx(Text, { level: "body", children: body }) : body, _jsx(CtaPack, { children: list.map((w, i) => w.action == null ? null : (_jsx(Btn, { primary: i === first, quiet: i !== first, "aria-expanded": on === i, onClick: () => { setAt('full'); set(i); }, children: w.action }, i))) })] }), list.map(({ sheet: sh }, i) => (_jsxs(Sheet, { state: on === i ? at : 'away', onStateChange: (s) => { if (s === 'away')
                             set(null);
                         else
                             setAt(s); }, onSettled: (s) => { if (s === 'away' && leaving === i)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.41",
+  "version": "0.7.43",
   "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.",