@usableapp/cardds 0.7.2 → 0.7.4

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.4 — 2026-09-24
+
+### New
+- `SheetSteps` / `SheetStep` — one task taken in steps INSIDE one sheet (phone · code · PIN · PIN again · face · notices),
+  in a `SheetBody`. The done steps pile on top, one short line each (title · `summary` · ✓); the current step is open
+  under them, its form from the top at the form's own spacing; the next steps wait in a pile at the bottom (under the
+  keyboard when it is up). A thin rule over every step. Controlled: `at` + `onAtChange(at, 'tap' | 'swipe' | 'skip')`, or
+  `defaultAt`; the APP moves `at` when a step's work is really done; `at = count` = all done — the last step's own action
+  sends, or pass `finish` (a `Btn`) to stand under the steps on the last one. `reversible` = a tap on a done / next step
+  or an up/down swipe moves; without it only forward. `SheetStep skippable skipLabel="…"` = a small link that moves on.
+  The cursor stands in each new step's first field; with the keyboard up the field's middle is brought to eye level
+  (`--screen-centre` of what shows) and the done pile glides out of the way and back. Knobs `--sheet-steps-row-h`,
+  `--sheet-step-border`. Stories: `/SheetSteps` (Forward · Reversible · Start · Controlled · Finish · Long).
+
+## 0.7.3 — 2026-09-24
+
+### New
+- `Modal onDismiss(reason)` — a tap on the scrim (anywhere outside the card) or Esc asks to leave unanswered
+  (`'scrim' | 'escape'`); the app sets `open={false}` and the modal leaves as usual. Without `onDismiss` the scrim does
+  nothing — a question that must be answered.
+
 ## 0.7.2 — 2026-09-24
 
 ### `Banner` is one light band (breaking)

package/css/sheet.css

@@ -371,3 +371,35 @@
   z-index: 1;
 }
 .sheet-stage--dim .sheet { z-index: 2; }
+
+/* ---- sheet steps: one task in steps inside one sheet (Lh 2026-09-24) ----
+   <div class="sheet-steps"> › <ol class="sheet-steps__track"> of <li class="sheet-step sheet-step--done|now|next">. The done steps
+   PILE UP on top, ALL of them, each folded to one short line (title · summary · ✓) — when the keyboard leaves too little room the
+   body scrolls them up only as far as the field needs; the current step is open under them — its title, then its form at
+   the form's own spacing, from the top (never spread or centred: the keyboard needs the room under it); the next steps wait in a pile at the
+   bottom of the body, each its title line. Every step has a thin rule on top. A step opens and folds as a 1fr ↔ 0fr grid row, so the pile rises and
+   falls — no height is written. Nothing fades: done and next read at full ink. */
+.sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
+.sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0px)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; }
+.sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
+.sheet-step--now + .sheet-step { margin-top: auto; } /* the steps not done yet wait in a pile at the bottom, clear of the one being done */
+.sheet-step {
+  position: relative; min-width: 0;
+  display: grid; grid-template-rows: auto 0fr;
+  border-top: var(--rule-w) solid var(--sheet-step-border, var(--hairline));
+  transition: grid-template-rows var(--motion-sheet) ease;
+}
+.sheet-step--now { grid-template-rows: auto 1fr; }
+.sheet-step__head { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--sheet-steps-row-h, var(--tap-sm)); }
+.sheet-step__title { flex: 0 1 auto; min-width: 0; outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sheet-step__summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sheet-step__check { margin-inline-start: auto; }
+.sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
+.sheet-step__inner { display: grid; gap: var(--card-gap); padding-bottom: var(--card-gap); }
+.sheet-step__inner > * { min-width: 0; }
+.sheet-step__skip { justify-self: center; }
+.sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }
+.sheet-step__go { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+/* the last step's finish, when the app gives one: under the steps */
+.sheet-steps__finish { display: grid; padding-top: var(--card-gap); }
+@media (prefers-reduced-motion: reduce) { .sheet-step { transition: none; } }

package/dist/cardds.css

@@ -1548,6 +1548,38 @@ button { font: inherit; cursor: pointer; }
 }
 .sheet-stage--dim .sheet { z-index: 2; }
 
+/* ---- sheet steps: one task in steps inside one sheet (Lh 2026-09-24) ----
+   <div class="sheet-steps"> › <ol class="sheet-steps__track"> of <li class="sheet-step sheet-step--done|now|next">. The done steps
+   PILE UP on top, ALL of them, each folded to one short line (title · summary · ✓) — when the keyboard leaves too little room the
+   body scrolls them up only as far as the field needs; the current step is open under them — its title, then its form at
+   the form's own spacing, from the top (never spread or centred: the keyboard needs the room under it); the next steps wait in a pile at the
+   bottom of the body, each its title line. Every step has a thin rule on top. A step opens and folds as a 1fr ↔ 0fr grid row, so the pile rises and
+   falls — no height is written. Nothing fades: done and next read at full ink. */
+.sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
+.sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0px)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; }
+.sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
+.sheet-step--now + .sheet-step { margin-top: auto; } /* the steps not done yet wait in a pile at the bottom, clear of the one being done */
+.sheet-step {
+  position: relative; min-width: 0;
+  display: grid; grid-template-rows: auto 0fr;
+  border-top: var(--rule-w) solid var(--sheet-step-border, var(--hairline));
+  transition: grid-template-rows var(--motion-sheet) ease;
+}
+.sheet-step--now { grid-template-rows: auto 1fr; }
+.sheet-step__head { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--sheet-steps-row-h, var(--tap-sm)); }
+.sheet-step__title { flex: 0 1 auto; min-width: 0; outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sheet-step__summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sheet-step__check { margin-inline-start: auto; }
+.sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
+.sheet-step__inner { display: grid; gap: var(--card-gap); padding-bottom: var(--card-gap); }
+.sheet-step__inner > * { min-width: 0; }
+.sheet-step__skip { justify-self: center; }
+.sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }
+.sheet-step__go { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+/* the last step's finish, when the app gives one: under the steps */
+.sheet-steps__finish { display: grid; padding-top: var(--card-gap); }
+@media (prefers-reduced-motion: reduce) { .sheet-step { transition: none; } }
+
 /* ---- css/step.css — .step: one screen, one task — card, optional sheet, bar outside ---- */
 /* ============================================================
    cardds/step.css — .step: one screen, one task.

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export * from './sheets/SheetHead.js';
 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 './actions/Btn.js';
 export * from './actions/IconBtn.js';

package/dist/index.js

@@ -31,6 +31,7 @@ export * from './sheets/SheetHead.js';
 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 './actions/Btn.js';
 export * from './actions/IconBtn.js';

package/dist/sheets/Drawer.d.ts

@@ -5,15 +5,19 @@ export interface ModalProps extends ComponentProps<'article'> {
     open?: boolean;
     /** the leaving has finished (at once, when motion is reduced) — unmount here */
     onClosed?: () => void;
+    /** the member asked to leave WITHOUT answering: a tap on the scrim (anywhere outside the card) or Esc. The modal only asks — the app
+     *  sets `open={false}`. Without it the scrim does nothing (a question that must be answered). */
+    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.
  * 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.
+ * 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).
  */
-export declare function Modal({ open, onClosed, className, ...rest }: ModalProps): import("react").JSX.Element;
+export declare function Modal({ open, onClosed, onDismiss, className, ...rest }: ModalProps): import("react").JSX.Element;
 export interface LiftProps 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. */

package/dist/sheets/Drawer.js

@@ -6,9 +6,10 @@ import { cx } from '../cx.js';
  * 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.
  * 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.
+ * 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).
  */
-export function Modal({ open = true, onClosed, className, ...rest }) {
+export function Modal({ open = true, onClosed, onDismiss, className, ...rest }) {
     const ref = useRef(null);
     const closed = useRef(onClosed);
     closed.current = onClosed;
@@ -27,6 +28,21 @@ export function Modal({ open = true, onClosed, className, ...rest }) {
             closed.current?.(); });
         return () => { live = false; };
     }, [open]);
+    const dismiss = useRef(onDismiss);
+    dismiss.current = onDismiss;
+    const has = onDismiss !== undefined;
+    useEffect(() => {
+        const el = ref.current, stage = el?.parentElement;
+        if (!el || !stage || !has || !open)
+            return;
+        const tap = (e) => { if (!el.contains(e.target))
+            dismiss.current?.('scrim'); }; // the scrim is the stage's own ::after
+        const key = (e) => { if (e.key === 'Escape' && !e.defaultPrevented)
+            dismiss.current?.('escape'); };
+        stage.addEventListener('click', tap);
+        document.addEventListener('keydown', key);
+        return () => { stage.removeEventListener('click', tap); document.removeEventListener('keydown', key); };
+    }, [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. */

package/dist/sheets/SheetSteps.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentProps, ReactNode } from 'react';
+/** what asked for the move: a `tap` on another step, a `swipe` across the steps, the step's `skip` link */
+export type SheetStepsReason = 'tap' | 'swipe' | 'skip';
+export interface SheetStepsProps extends ComponentProps<'div'> {
+    /** optional: what stands under the steps on the LAST step — a `Btn` that finishes. None = the last step's own action sends. */
+    finish?: ReactNode;
+    /** CONTROLLED: the step the member is on (0-based). Steps before it are done, after it are next. The APP moves it — when a step's
+     *  work is really finished (the code checked by the server, the two PINs match), `setAt(at + 1)`; after the last step the app sends. `at = count` = every step done. */
+    at?: number;
+    /** UNCONTROLLED: the step it starts on (default 0) */
+    defaultAt?: number;
+    /** the steps ASK to move — a tap on another step, a swipe, a skip. Controlled: set `at` to it (or don't). */
+    onAtChange?: (at: number, reason: SheetStepsReason) => void;
+    /** true: the member may go back and forth — a tap on a done or next step opens it, an up/down swipe moves one step.
+     *  false (default): only forward — the done steps stay in the pile, never opened again (a swipe up passes only a `skippable` step). */
+    reversible?: boolean;
+}
+/**
+ * SheetSteps — one task taken in steps INSIDE one sheet (phone · code · PIN · PIN again · face · notices). The done steps pile up
+ * on top, each one line (title · summary · ✓); the current step is open under them, its form at the form's own spacing; the next
+ * steps wait below as their titles. A thin rule over every step. The last step's own action sends, or a `finish` stands under the
+ * steps on the last one. Goes in a `SheetBody`.
+ * The sheet may be dragged down to peek and back — the body keeps where it was scrolled.
+ */
+export declare function SheetSteps({ at, defaultAt, onAtChange, reversible, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }: SheetStepsProps): import("react").JSX.Element;
+export interface SheetStepProps extends Omit<ComponentProps<'li'>, 'title'> {
+    /** the step's name — always shown: over the open step, on the folded line of a done one */
+    title: ReactNode;
+    /** the done step's one-line answer ("081-xxx-4567", "set") — shown on its folded line */
+    summary?: ReactNode;
+    /** the member may pass this step without doing it: a small link at its end moves on (reason `skip`) */
+    skippable?: boolean;
+    /** the skip link's words (default "Skip") */
+    skipLabel?: ReactNode;
+}
+/** SheetStep — one step of a SheetSteps: its title, then what the member does (a Field, a Pin, a Toggle, the step's own Btn). */
+export declare function SheetStep({ title, summary, skippable, skipLabel, className, children, ...rest }: SheetStepProps): import("react").JSX.Element;

package/dist/sheets/SheetSteps.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useEffect, useRef, useState } from 'react';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
+import { Link } from '../actions/Link.js';
+const GLIDE_MS = 220; // the pile's slide out of the keyboard's way and back: quick, but the eye follows it
+const SWIPE_REM = 3; // an up/down move longer than this (and mostly up/down) is a swipe
+const StepCtx = createContext(null);
+/**
+ * SheetSteps — one task taken in steps INSIDE one sheet (phone · code · PIN · PIN again · face · notices). The done steps pile up
+ * on top, each one line (title · summary · ✓); the current step is open under them, its form at the form's own spacing; the next
+ * steps wait below as their titles. A thin rule over every step. The last step's own action sends, or a `finish` stands under the
+ * steps on the last one. Goes in a `SheetBody`.
+ * The sheet may be dragged down to peek and back — the body keeps where it was scrolled.
+ */
+export function SheetSteps({ at, defaultAt = 0, onAtChange, reversible = false, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }) {
+    const [inner, setInner] = useState(defaultAt);
+    const current = at ?? inner;
+    const steps = Children.toArray(children).filter(isValidElement);
+    const count = steps.length;
+    const ref = useRef(null);
+    const first = useRef(true);
+    const press = useRef(null);
+    const go = (i, reason) => {
+        if (i === current || i < 0 || i > count)
+            return;
+        if (at === undefined)
+            setInner(i);
+        onAtChange?.(i, reason);
+    };
+    /* the step changed: put the cursor in it, and once the pile has moved, bring the step
+       into view in the body. Not on arrival — the body keeps its scroll. */
+    useEffect(() => {
+        if (first.current) {
+            first.current = false;
+            return;
+        }
+        const now = ref.current?.querySelector('.sheet-step--now');
+        // the cursor stands by: the step's first field takes the focus (the keyboard comes with it); a step with no field — its title,
+        // so a screen reader hears where it is
+        (now?.querySelector('.sheet-step__inner :is(input:not([type=checkbox], [type=radio], [type=hidden]), textarea)') ?? now?.querySelector('.sheet-step__title'))?.focus({ preventScroll: true });
+        const t = setTimeout(() => now?.scrollIntoView({ block: 'nearest', behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' }), 350); // = --motion-sheet
+        return () => clearTimeout(t);
+    }, [current]);
+    /* the keyboard comes and goes: the body's scroll JUMPS (the Sheet's reveal, the browser's own, ours below, the box growing back).
+       For a short while after a field in the steps gains or loses the focus, every such jump is played as a quick slide (FLIP: the steps
+       are set back by the jump, then eased to rest) so the eye can follow the pile moving out of the way and back. */
+    const glide = useRef(0), last = useRef(0);
+    useEffect(() => {
+        const el = ref.current, body = el?.closest('.sheet__body');
+        if (!el || !body)
+            return;
+        last.current = body.scrollTop;
+        const onScroll = () => {
+            const d = body.scrollTop - last.current;
+            last.current = body.scrollTop;
+            if (!d || performance.now() > glide.current || matchMedia('(prefers-reduced-motion: reduce)').matches)
+                return;
+            const from = parseFloat(el.style.translate.split(' ')[1] || '0') || 0;
+            el.style.transition = 'none';
+            el.style.translate = `0 ${from + d}px`;
+            void el.offsetHeight; // the set-back lands before the ease
+            el.style.transition = `translate ${GLIDE_MS}ms ease-out`;
+            el.style.translate = '0 0';
+        };
+        const clean = () => { el.style.removeProperty('transition'); el.style.removeProperty('translate'); };
+        body.addEventListener('scroll', onScroll);
+        el.addEventListener('transitionend', clean);
+        return () => { body.removeEventListener('scroll', onScroll); el.removeEventListener('transitionend', clean); };
+    }, []);
+    /* a field in the current step took the focus: once the keyboard is up (the Sheet has climbed), bring the field to EYE LEVEL — its middle
+       at the human centre (--screen-centre, 40%) of what shows between the sheet's head and the keyboard; the done pile moves up for it
+       (never down past its own top). When the focus
+       leaves the fields (the keyboard goes), the pile comes back down. Both moves glide. */
+    const typing = (t) => t instanceof HTMLElement && t.matches('input:not([type=checkbox], [type=radio], [type=range]), textarea');
+    const focusIn = (e) => {
+        onFocus?.(e);
+        glide.current = performance.now() + 900;
+        const target = e.target, now = target.closest('.sheet-step--now'), body = ref.current?.closest('.sheet__body');
+        if (!now || !body || !typing(target))
+            return;
+        setTimeout(() => {
+            const control = (target.closest('.field, .pin') ?? target).getBoundingClientRect(), vv = window.visualViewport;
+            const cut = Math.min(body.getBoundingClientRect().bottom - (parseFloat(getComputedStyle(body).scrollPaddingBottom) || 0), vv ? vv.offsetTop + vv.height : Infinity);
+            const top = body.getBoundingClientRect().top, eye = top + (cut - top) * ((parseFloat(getComputedStyle(body).getPropertyValue('--screen-centre')) || 40) / 100);
+            const by = Math.max((control.top + control.bottom) / 2 - eye, -body.scrollTop); // the field's middle at eye level — the human centre of what shows between the head and the keyboard
+            if (Math.abs(by) > 1)
+                body.scrollBy({ top: by });
+        }, 300); // after the keyboard and the sheet's own climb
+    };
+    const focusOut = (e) => {
+        onBlur?.(e);
+        if (!typing(e.target))
+            return;
+        glide.current = performance.now() + 900;
+        const body = ref.current?.closest('.sheet__body');
+        setTimeout(() => { if (!typing(document.activeElement) && body)
+            body.scrollTo({ top: 0 }); }, 0); // Tab to the next field keeps it up
+    };
+    /* an up/down swipe turns the wheel one step — unless it started in content that can still scroll that way */
+    const down = (e) => {
+        onPointerDown?.(e);
+        press.current = e.isPrimary && !e.target.closest('input, textarea, select, .pin, .picker, .slider') ? { x: e.clientX, y: e.clientY } : null;
+    };
+    const up = (e) => {
+        onPointerUp?.(e);
+        const p = press.current;
+        press.current = null;
+        if (!p)
+            return;
+        const dx = e.clientX - p.x, dy = e.clientY - p.y;
+        if (Math.abs(dy) < SWIPE_REM * parseFloat(getComputedStyle(document.documentElement).fontSize) || Math.abs(dy) < 2 * Math.abs(dx))
+            return;
+        const body = e.target.closest('.sheet-step__body');
+        if (body && (dy < 0 ? body.scrollTop + body.clientHeight < body.scrollHeight - 1 : body.scrollTop > 0))
+            return; // the content's own scroll
+        const to = current + (dy < 0 ? 1 : -1);
+        if (reversible)
+            go(to, 'swipe');
+        else if (dy < 0 && ref.current?.querySelector('.sheet-step--now[data-skippable]'))
+            go(to, 'skip'); // forward only, and only past a step that may be skipped
+    };
+    return (_jsxs("div", { ref: ref, className: cx('sheet-steps', !reversible && 'sheet-steps--locked', className), style: style, onFocus: focusIn, onBlur: focusOut, onPointerDown: down, onPointerUp: up, onPointerCancel: (e) => { onPointerCancel?.(e); press.current = null; }, ...rest, children: [_jsx("ol", { className: "sheet-steps__track", children: steps.map((step, i) => (_jsx(StepCtx.Provider, { value: { i, at: current, count, reversible, go }, children: step }, step.key ?? i))) }), finish != null && current === count - 1 && _jsx("div", { className: "sheet-steps__finish", children: finish })] }));
+}
+/** SheetStep — one step of a SheetSteps: its title, then what the member does (a Field, a Pin, a Toggle, the step's own Btn). */
+export function SheetStep({ title, summary, skippable, skipLabel = 'Skip', className, children, ...rest }) {
+    const ctx = useContext(StepCtx);
+    if (!ctx)
+        throw new Error('SheetStep goes inside a SheetSteps');
+    const { i, at, count, reversible, go } = ctx;
+    const phase = i < at ? 'done' : i === at ? 'now' : 'next';
+    const off = phase !== 'now';
+    return (_jsxs("li", { className: cx('sheet-step', `sheet-step--${phase}`, className), "aria-current": phase === 'now' ? 'step' : undefined, "data-skippable": skippable || undefined, ...rest, children: [_jsxs("div", { className: "sheet-step__head", inert: off || undefined, children: [_jsx("h3", { className: "sheet-step__title t-title", tabIndex: -1, children: title }), phase === 'done' && summary != null && _jsx("span", { className: "sheet-step__summary t-caption t-muted", children: summary }), phase === 'done' && _jsx(Icon, { name: "check", size: "xs", className: "sheet-step__check" })] }), _jsx("div", { className: "sheet-step__body", children: _jsxs("div", { className: "sheet-step__inner", inert: off || undefined, children: [children, skippable && _jsx(Link, { sm: true, muted: true, className: "sheet-step__skip", onClick: () => go(i + 1, 'skip'), children: skipLabel })] }) }), reversible && off && (_jsx("button", { type: "button", className: "sheet-step__go", "aria-label": typeof title === 'string' ? title : `${i + 1} / ${count}`, onClick: () => go(i, 'tap') }))] }));
+}

package/package.json

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