@usableapp/cardds 0.7.3 → 0.7.5

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.5 — 2026-09-24
+
+### Errors in a form (new)
+- `--signal-error` (#c62828) — the ONE colour the wireframe has; always with an icon and words, never the colour alone.
+  A theme may set it.
+- `Field error` — the edge turns red, `aria-invalid`, and the field takes the focus with ALL its text selected (type
+  straight over it). `Pin error` — every cell red (edge + digit), the wrong digits stay in sight, the cursor goes back to
+  the first cell; the next digit starts a new code.
+- `SheetStep error` / `busy` — ONE line under the step's button: an alert icon + words (`role="alert"`), or a turning
+  ring + words ("sending…", the step's buttons take no taps). The words are the app's.
+- FORMAT checks on the client (never content — content errors come from the app through `error`): `Field format="email"
+  | "tel"`, `digits={n}`, `required`; `Pin match={firstPin}`; `formatError="…"` = the app's words. Checked when a field is
+  left and when the step's button is pressed — never while typing; a failing one holds the press back (the app's onClick
+  is not called). A Pin that does not match shows red for 3 s, then the steps go back one (`onAtChange(at, 'mismatch')` —
+  clear both codes there).
+- Icons `circle-alert`, `loader-circle`.
+
+### Changed
+- `Pin` — a typed digit is coloured words (`--pin-cell-filled-ink`, default the accent), no filled pill.
+- `SheetSteps` — an ACCORDION: the old step folds while the new one opens, then the done pile scrolls (smoothly) so
+  2½ done rows show above the open step; a step change never drops a phone's keyboard (the cursor waits in a holder
+  field while the step folds); step titles at the label size (`--sheet-step-title-font`); a step stays ✓ when the
+  member goes back; `finish` is always shown, disabled until every step is done or skipped; the steps never close the
+  sheet — when `at` reaches the count, the app sets its Sheet `away`.
+- `Sheet` — on arrival the cursor goes to a `[data-autofocus]` inside it (SheetSteps marks its open step's first field),
+  else the handle, once the sheet has finished sliding in.
+
+## 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

package/css/choice.css

@@ -205,7 +205,7 @@
   font: var(--pin-cell-font, var(--type-stat));
   font-variant-numeric: tabular-nums;
 }
-.pin__cell:not(:placeholder-shown) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.pin__cell:not(:placeholder-shown) { color: var(--pin-cell-filled-ink, var(--accent)); } /* a typed digit: coloured words on the cell's own ground — no fill (Lh 2026-09-24; was an accent-filled pill) */
 /* the cell the cursor waits in (Lh 2026-09-22): NO outline ring — it sat outside the pill and got cropped by the sheet's
    edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
    is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */

package/css/forms.css

@@ -65,3 +65,15 @@
   line-height: 1;
 }
 .add-row__plus .icon { width: var(--icon-xs); height: var(--icon-xs); }
+
+/* ---- a wrong value, and the line that says so (Lh 2026-09-24) ----
+   --signal-error is the one colour the wireframe has; it never speaks alone — the line carries an icon and words.
+   <p class="form-note form-note--error" role="alert"><svg class="icon icon--xs">…</svg>Not a phone number</p>
+   <p class="form-note form-note--busy" role="status"><svg …/>Sending the code…</p> (the ring turns) */
+.field.field--error, [data-palette] .field.field--error { border-color: var(--field-error-border, var(--signal-error)); }
+.pin.pin--error .pin__cell, .pin.pin--error .pin__cell:focus { border-color: var(--pin-error-border, var(--signal-error)); color: var(--pin-error-ink, var(--signal-error)); } /* ALL the cells, edge and digit — the one the cursor waits in too (Lh 2026-09-24); the wrong digits stay in red until the member types again */
+.form-note { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin: 0; font: var(--form-note-font, var(--type-caption)); color: var(--form-note-ink, var(--card-muted)); text-align: center; }
+.form-note > .icon { flex: none; }
+.form-note--error { color: var(--form-note-error-ink, var(--signal-error)); }
+@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { animation: form-note-turn 0.9s linear infinite; } }
+@keyframes form-note-turn { to { rotate: 1turn; } }

package/css/sheet.css

@@ -371,3 +371,43 @@
   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__holder { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 16px; } /* holds the cursor (and the phone's keyboard) while a step folds; 16px so iOS never zooms to it */
+.sheet-steps { position: relative; }
+.sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
+
+.sheet-step {
+  position: relative; min-width: 0;
+  display: grid; grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
+  border-top: var(--rule-w) solid var(--sheet-step-border, var(--hairline));
+  flex: 0 0 auto;
+  transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
+}
+/* the open step GROWS into the room left, so the steps not done yet wait in a pile at the bottom — and a move is an ACCORDION:
+   in one beat the step that was open folds while the new one unfolds (flex-grow and the 1fr row both ease), the piles slide
+   with them, nothing jumps (Lh 2026-09-24) */
+.sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
+.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 { font: var(--sheet-step-title-font, var(--type-label)); margin: 0; flex: 0 1 auto; min-width: 0; outline: none; /* the label size, not a body title: a pile of rows must stay small (Lh 2026-09-24) */ 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; } }
+/* the step waiting for its answer: its buttons take no taps (the app guards its own handler too) */
+.sheet-step--busy .btn { pointer-events: none; opacity: 0.5; }

package/css/tokens.css

@@ -187,6 +187,7 @@
   --neg: #3d3d3d;
   --dot-a: var(--color-brand, #141414);
   --dot-b: #8a8a8a;
+  --signal-error: #c62828;  /* the ONE colour in the wireframe (Lh 2026-09-24): something went wrong — a field's edge, the words that say what. Always with an icon and words, never the colour alone */
 
   /* derived tints — read the element's own ink, so they work on any slot */
   --outline: var(--action-border);                                 /* control edges (palette.css softens) */

package/dist/cardds.css

@@ -228,6 +228,7 @@
   --neg: #3d3d3d;
   --dot-a: var(--color-brand, #141414);
   --dot-b: #8a8a8a;
+  --signal-error: #c62828;  /* the ONE colour in the wireframe (Lh 2026-09-24): something went wrong — a field's edge, the words that say what. Always with an icon and words, never the colour alone */
 
   /* derived tints — read the element's own ink, so they work on any slot */
   --outline: var(--action-border);                                 /* control edges (palette.css softens) */
@@ -1548,6 +1549,46 @@ 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__holder { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 16px; } /* holds the cursor (and the phone's keyboard) while a step folds; 16px so iOS never zooms to it */
+.sheet-steps { position: relative; }
+.sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
+
+.sheet-step {
+  position: relative; min-width: 0;
+  display: grid; grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
+  border-top: var(--rule-w) solid var(--sheet-step-border, var(--hairline));
+  flex: 0 0 auto;
+  transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
+}
+/* the open step GROWS into the room left, so the steps not done yet wait in a pile at the bottom — and a move is an ACCORDION:
+   in one beat the step that was open folds while the new one unfolds (flex-grow and the 1fr row both ease), the piles slide
+   with them, nothing jumps (Lh 2026-09-24) */
+.sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
+.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 { font: var(--sheet-step-title-font, var(--type-label)); margin: 0; flex: 0 1 auto; min-width: 0; outline: none; /* the label size, not a body title: a pile of rows must stay small (Lh 2026-09-24) */ 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; } }
+/* the step waiting for its answer: its buttons take no taps (the app guards its own handler too) */
+.sheet-step--busy .btn { pointer-events: none; opacity: 0.5; }
+
 /* ---- css/step.css — .step: one screen, one task — card, optional sheet, bar outside ---- */
 /* ============================================================
    cardds/step.css — .step: one screen, one task.
@@ -1778,6 +1819,18 @@ button { font: inherit; cursor: pointer; }
 }
 .add-row__plus .icon { width: var(--icon-xs); height: var(--icon-xs); }
 
+/* ---- a wrong value, and the line that says so (Lh 2026-09-24) ----
+   --signal-error is the one colour the wireframe has; it never speaks alone — the line carries an icon and words.
+   <p class="form-note form-note--error" role="alert"><svg class="icon icon--xs">…</svg>Not a phone number</p>
+   <p class="form-note form-note--busy" role="status"><svg …/>Sending the code…</p> (the ring turns) */
+.field.field--error, [data-palette] .field.field--error { border-color: var(--field-error-border, var(--signal-error)); }
+.pin.pin--error .pin__cell, .pin.pin--error .pin__cell:focus { border-color: var(--pin-error-border, var(--signal-error)); color: var(--pin-error-ink, var(--signal-error)); } /* ALL the cells, edge and digit — the one the cursor waits in too (Lh 2026-09-24); the wrong digits stay in red until the member types again */
+.form-note { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin: 0; font: var(--form-note-font, var(--type-caption)); color: var(--form-note-ink, var(--card-muted)); text-align: center; }
+.form-note > .icon { flex: none; }
+.form-note--error { color: var(--form-note-error-ink, var(--signal-error)); }
+@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { animation: form-note-turn 0.9s linear infinite; } }
+@keyframes form-note-turn { to { rotate: 1turn; } }
+
 /* ---- css/journey.css — route, tile badge, note row ---- */
 /* ============================================================
    cardds/journey.css — trip/status primitives inside cards:
@@ -2742,7 +2795,7 @@ button { font: inherit; cursor: pointer; }
   font: var(--pin-cell-font, var(--type-stat));
   font-variant-numeric: tabular-nums;
 }
-.pin__cell:not(:placeholder-shown) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.pin__cell:not(:placeholder-shown) { color: var(--pin-cell-filled-ink, var(--accent)); } /* a typed digit: coloured words on the cell's own ground — no fill (Lh 2026-09-24; was an accent-filled pill) */
 /* the cell the cursor waits in (Lh 2026-09-22): NO outline ring — it sat outside the pill and got cropped by the sheet's
    edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
    is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */

package/dist/forms/Field.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { type IconName } from '../type/Icon.js';
 export interface FieldProps extends Omit<ComponentProps<'input'>, 'className' | 'style'> {
     /** a leading icon (phone-call, plane, calendar-days) */
@@ -7,6 +7,19 @@ export interface FieldProps extends Omit<ComponentProps<'input'>, 'className' |
     action?: ReactNode;
     /** the accessible name when the placeholder is not enough */
     label?: string;
+    /** the value is wrong: the edge turns `--signal-error`, the input says `aria-invalid`, and the moment it comes (or changes) the
+     *  field takes the focus with ALL its text selected — the member types the right one straight over it. The words saying what
+     *  is wrong are the step's (`SheetStep error`), under its button; any truthy value marks the field. */
+    error?: unknown;
+    /** a FORMAT check on the client (never whether the content is right — that is `error`, from the app): `email`, or `tel`
+     *  (digits, spaces, - + ( ) only). Checked when the member LEAVES the field and when the step's button is pressed, never
+     *  while typing; a wrong one is marked like `error`, and the step's button does not go on until it is fixed. */
+    format?: 'email' | 'tel';
+    /** the exact number of digits it must hold (a phone number: 10) — a format check like `format` */
+    digits?: number;
+    /** the words when the format check fails — shown under the step's button (the app's words: cardds has none). `required`
+     *  (the attribute) makes an empty field fail when the button is pressed. */
+    formatError?: ReactNode;
     className?: string;
     style?: React.CSSProperties;
 }
@@ -14,4 +27,4 @@ export interface FieldProps extends Omit<ComponentProps<'input'>, 'className' |
  * Field — the flat outlined input: the LABEL IS THE PLACEHOLDER. 48px tall (56px with an action inside).
  * Fields belong in a Sheet (what the member acts on), 1–3 per step, never in a reading card.
  */
-export declare function Field({ icon, action, label, className, style, ...input }: FieldProps): import("react").JSX.Element;
+export declare function Field({ icon, action, label, error, format, digits, formatError, className, style, onBlur, onInput, ...input }: FieldProps): import("react").JSX.Element;

package/dist/forms/Field.js

@@ -1,10 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { formatOk, useCheck } from './check.js';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 /**
  * Field — the flat outlined input: the LABEL IS THE PLACEHOLDER. 48px tall (56px with an action inside).
  * Fields belong in a Sheet (what the member acts on), 1–3 per step, never in a reading card.
  */
-export function Field({ icon, action, label, className, style, ...input }) {
-    return (_jsxs("label", { className: cx('field', action != null && 'field--action', className), style: style, children: [icon && _jsx(Icon, { name: icon, size: "sm" }), _jsx("input", { "aria-label": label, ...input }), action] }));
+export function Field({ icon, action, label, error, format, digits, formatError, className, style, onBlur, onInput, ...input }) {
+    const ref = useRef(null);
+    const [bad, setBad] = useState(false); // the format check failed, and has not been fixed since
+    const wrong = (error != null && error !== false && error !== '') || bad;
+    const checked = format != null || digits != null || input.required;
+    const words = formatError ?? ''; // no words given: the field is still marked, the step's line stays empty
+    const verdict = (strict) => {
+        const v = ref.current?.value ?? '';
+        if (!checked || (!v.trim() && !(strict && input.required)))
+            return null; // an untouched empty field fails only when required, on the press
+        return formatOk(v, format, digits) && (v.trim() || !input.required) ? null : words;
+    };
+    const { say } = useCheck((strict) => { const w = verdict(strict); if (w != null)
+        setBad(true); return w; }, () => { ref.current?.focus(); ref.current?.select(); });
+    useEffect(() => {
+        if (wrong) {
+            ref.current?.focus();
+            ref.current?.select();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- when the app's error comes or changes
+    }, [error]);
+    return (_jsxs("label", { className: cx('field', action != null && 'field--action', wrong && 'field--error', className), style: style, children: [icon && _jsx(Icon, { name: icon, size: "sm" }), _jsx("input", { ref: ref, "aria-label": label, "aria-invalid": wrong || undefined, ...input, onBlur: (e) => { onBlur?.(e); if (!checked)
+                    return; const w = verdict(false); setBad(w != null); say(w); }, onInput: (e) => { onInput?.(e); if (bad && verdict(false) == null) {
+                    setBad(false);
+                    say(null);
+                } } }), action] }));
 }

package/dist/forms/FormNote.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+/** the one line that says how a form stands — `error` (an alert icon + words, read out at once) or `busy` (a turning ring +
+ *  words, "sending the code…"). Internal: a SheetStep draws it under its button. */
+export declare function FormNote({ error, busy }: {
+    error?: ReactNode;
+    busy?: ReactNode;
+}): import("react").JSX.Element | null;

package/dist/forms/FormNote.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../type/Icon.js';
+/** the one line that says how a form stands — `error` (an alert icon + words, read out at once) or `busy` (a turning ring +
+ *  words, "sending the code…"). Internal: a SheetStep draws it under its button. */
+export function FormNote({ error, busy }) {
+    if (error != null && error !== false)
+        return _jsxs("p", { className: "form-note form-note--error", role: "alert", children: [_jsx(Icon, { name: "circle-alert", size: "xs" }), error] });
+    if (busy != null && busy !== false)
+        return _jsxs("p", { className: "form-note form-note--busy", role: "status", children: [_jsx(Icon, { name: "loader-circle", size: "xs" }), busy] });
+    return null;
+}

package/dist/forms/Pin.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps } from 'react';
+import { type ReactNode, type ComponentProps } from 'react';
 export interface PinProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defaultValue'> {
     /** how many digits (4 or 6) */
     length?: number;
@@ -10,6 +10,15 @@ export interface PinProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defa
     label?: string;
     /** the code so far, after every change; `complete` once every cell holds a digit */
     onChange?: (code: string, complete: boolean) => void;
+    /** the code is wrong: the digits stay in sight in `--signal-error` (words, no fill) with red edges, the cursor goes back to the
+     *  first cell, and the next digit typed starts a new code. The words are the step's (`SheetStep error`). */
+    error?: unknown;
+    /** a FORMAT check on the client: the code it must equal (the first PIN, when this one confirms it). Once every cell is filled
+     *  and it differs, the Pin turns red with its digits in sight, the step shows `formatError` under it for three seconds and then
+     *  steps BACK one step (`onAtChange(at - 1, 'mismatch')` — the app clears both codes there). */
+    match?: string;
+    /** the words when a check fails: the code does not match, or the step's button was pressed with cells still empty */
+    formatError?: ReactNode;
     /** focus the first empty cell on mount */
     autoFocus?: boolean;
 }
@@ -19,4 +28,4 @@ export interface PinProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defa
  * arrows walk the cells, a pasted code fills them from the one it landed in; only digits stay. The first cell takes the SMS
  * one-time-code autofill. The code is a VALUE, controlled like an input: `value` + `onChange`, or `defaultValue`.
  */
-export declare function Pin({ length, value, defaultValue, label, onChange, autoFocus, className, ...rest }: PinProps): import("react").JSX.Element;
+export declare function Pin({ length, value, defaultValue, label, onChange, autoFocus, error, match, formatError, className, ...rest }: PinProps): import("react").JSX.Element;

package/dist/forms/Pin.js

@@ -1,19 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { cx } from '../cx.js';
+import { useCheck } from './check.js';
 /**
  * Pin — big code entry, one digit per pill; a filled cell turns accent. Lives in a Sheet.
  * Its own behaviour, inside it: typing a digit moves to the next cell, Backspace in an empty cell moves back and clears, the
  * arrows walk the cells, a pasted code fills them from the one it landed in; only digits stay. The first cell takes the SMS
  * one-time-code autofill. The code is a VALUE, controlled like an input: `value` + `onChange`, or `defaultValue`.
  */
-export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onChange, autoFocus, className, ...rest }) {
+export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onChange, autoFocus, error, match, formatError, className, ...rest }) {
     const ref = useRef(null);
     const [inner, setInner] = useState(defaultValue);
     const code = (value ?? inner).replace(/\D/g, '').slice(0, length);
     const cell = (i) => ref.current?.querySelectorAll('.pin__cell')[i];
     const set = (next) => {
         next = next.slice(0, length);
+        if (bad) {
+            setBad(false);
+            say(null);
+        }
+        if (match != null && next.length === length && next !== match) {
+            setBad(true);
+            say(words);
+            back();
+            restart.current = true;
+        }
         if (value === undefined)
             setInner(next);
         if (next !== code)
@@ -24,8 +35,47 @@ export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onC
             cell(Math.min(code.length, length - 1))?.focus();
         // eslint-disable-next-line react-hooks/exhaustive-deps -- on mount only
     }, [autoFocus]);
+    const [bad, setBad] = useState(false); // a format check failed, and nothing was typed since
+    const words = formatError ?? '';
+    const { say, back } = useCheck((strict) => {
+        if (strict && code.length < length) {
+            setBad(true);
+            return words;
+        }
+        if (match != null && code.length === length && code !== match) {
+            setBad(true);
+            return words;
+        }
+        return null;
+    }, () => cell(Math.min(code.length, length - 1))?.focus());
+    const wrong = (error != null && error !== false && error !== '') || bad;
+    const restart = useRef(false);
+    useEffect(() => {
+        if (!wrong)
+            return;
+        restart.current = true; // the wrong code stays in sight (red); the next digit typed starts a new one from the first cell
+        cell(0)?.focus();
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- each new error, once
+    }, [wrong, error]);
+    /* the app emptied the code (a new try: it went back after a mismatch): the red goes with it */
+    useEffect(() => {
+        if (code || !bad)
+            return;
+        setBad(false);
+        say(null);
+        restart.current = false;
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- when the code is emptied from outside
+    }, [code]);
     const input = (i) => (e) => {
         const digits = e.target.value.replace(/\D/g, '');
+        if (restart.current) {
+            restart.current = false;
+            if (digits) {
+                set(digits.slice(-1));
+                cell(1)?.focus();
+            }
+            return;
+        } // a new try
         const at = Math.min(i, code.length); // a code has no gaps: a digit typed further along lands in the first empty cell
         if (!digits) {
             set(code.slice(0, at) + code.slice(at + 1));
@@ -49,8 +99,9 @@ export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onC
             cell(i + 1)?.focus();
         }
     };
-    return (_jsx("div", { ref: ref, className: cx('pin', className), ...rest, children: Array.from({ length }, (_, i) => (
+    return (_jsx("div", { ref: ref, className: cx('pin', wrong && 'pin--error', className), ...rest, children: Array.from({ length }, (_, i) => (
         // no maxLength: the browser would cut a pasted code before this ever saw it. A cell holds one digit — typing into a full one
         // replaces it, so its digit is selected whenever the cell takes the focus
-        _jsx("input", { className: "pin__cell", inputMode: "numeric", pattern: "[0-9]*", placeholder: " ", value: code[i] ?? '', "aria-label": `${label} ${i + 1}`, autoComplete: i === 0 ? 'one-time-code' : 'off', onChange: input(i), onKeyDown: key(i), onFocus: (e) => e.currentTarget.select() }, i))) }));
+        _jsx("input", { className: "pin__cell", inputMode: "numeric", pattern: "[0-9]*", placeholder: " ", value: code[i] ?? '', "aria-label": `${label} ${i + 1}`, "aria-invalid": wrong || undefined, autoComplete: i === 0 ? 'one-time-code' : 'off', onChange: input(i), onKeyDown: key(i), onFocus: (e) => { if (!restart.current)
+                e.currentTarget.select(); } }, i))) }));
 }

package/dist/forms/check.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export type Check = {
+    /** the words when it fails now, else null. `strict` = the button was pressed: an empty control fails too */
+    check: (strict: boolean) => ReactNode | null;
+    /** take the focus, ready to be fixed */
+    focus: () => void;
+};
+export type CheckGroup = {
+    add: (c: Check) => () => void;
+    /** a control's own verdict changed (it was left, or it was fixed): its words, or null */
+    say: (c: Check, words: ReactNode | null) => void;
+    /** a check that can only be failed by going back (the second PIN does not match the first): the group shows the words for a
+     *  moment, then steps back */
+    back: () => void;
+};
+export declare const CheckContext: import("react").Context<CheckGroup | null>;
+/** join the group around (if any) with this control's check; the latest check function is always the one asked */
+export declare function useCheck(check: Check['check'], focus: Check['focus']): {
+    say: (words: ReactNode | null) => void | undefined;
+    back: () => void | undefined;
+};
+/** a Field's format: `email`, `tel` (digits, spaces, - + ( ) only) and/or an exact count of `digits` */
+export declare function formatOk(value: string, format?: 'email' | 'tel', digits?: number): boolean;

package/dist/forms/check.js

@@ -0,0 +1,24 @@
+import { createContext, useContext, useEffect, useRef } from 'react';
+export const CheckContext = createContext(null);
+/** join the group around (if any) with this control's check; the latest check function is always the one asked */
+export function useCheck(check, focus) {
+    const group = useContext(CheckContext);
+    const latest = useRef({ check, focus });
+    latest.current.check = check;
+    latest.current.focus = focus;
+    const self = useRef({ check: (s) => latest.current.check(s), focus: () => latest.current.focus() }).current;
+    useEffect(() => group?.add(self), [group, self]);
+    return { say: (words) => group?.say(self, words), back: () => group?.back() };
+}
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+/** a Field's format: `email`, `tel` (digits, spaces, - + ( ) only) and/or an exact count of `digits` */
+export function formatOk(value, format, digits) {
+    const v = value.trim();
+    if (format === 'email' && !EMAIL.test(v))
+        return false;
+    if (format === 'tel' && !/^[\d\s\-+()]*$/.test(v))
+        return false;
+    if (digits != null && v.replace(/\D/g, '').length !== digits)
+        return false;
+    return true;
+}

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/Sheet.js

@@ -39,8 +39,25 @@ export function Sheet({ state, defaultState = 'half', onStateChange, states, han
     useEffect(() => {
         if (current !== 'peek' && current !== 'away')
             home.current = current;
-        if (was.current === 'away' && current !== 'away')
-            handleRef.current?.focus({ preventScroll: true }); // it just came onto the screen: the keyboard user is on it
+        if (was.current === 'away' && current !== 'away') { // it just came onto the screen: the cursor goes to what is marked to take it first (`data-autofocus` — a SheetSteps marks its open step's first field), else the handle, for the keyboard user
+            // …once it has finished sliding in (Lh 2026-09-24): the keyboard must not come up while the sheet still moves
+            const el = ref.current;
+            let done = false;
+            const land = () => {
+                if (done)
+                    return;
+                done = true;
+                el?.removeEventListener('transitionend', onEnd);
+                const first = el?.querySelector('[data-autofocus]:not([inert] *)');
+                (first ?? handleRef.current)?.focus({ preventScroll: true });
+            };
+            const onEnd = (e) => { if (e.target === el && e.propertyName === 'translate')
+                land(); };
+            el?.addEventListener('transitionend', onEnd);
+            const t = setTimeout(land, 600); // no transition (reduced motion): land anyway
+            was.current = current;
+            return () => { clearTimeout(t); el?.removeEventListener('transitionend', onEnd); };
+        }
         was.current = current;
     }, [current]);
     /* geometry, read once per gesture — never stored: how far it has slid, and where each state rests, in px from its top at full */

package/dist/sheets/SheetSteps.d.ts

@@ -0,0 +1,47 @@
+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, a `mismatch` (a Pin's
+ *  `match` failed: back one step — clear the codes there) */
+export type SheetStepsReason = 'tap' | 'swipe' | 'skip' | 'mismatch';
+export interface SheetStepsProps extends ComponentProps<'div'> {
+    /** optional: a `Btn` that finishes, under the steps — always in sight, `disabled` until EVERY step is done (its work, or
+     *  skipped: `at` has reached `count`). None = the task ends when `at` reaches `count` — the last step's own action, or its skip. */
+    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 —
+     *  the app then closes its Sheet (`state="away"`, a beat after the fold) and says so on the page: the steps never close it themselves. */
+    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;
+    /** what went wrong, in words — one line UNDER the step's button (an alert icon, `--signal-error`, read out at once): the number
+     *  is not a phone number, no signal, the code could not be sent, the two PINs differ. The step stays where it is; to send the
+     *  member back, the app sets `at` (and gives THAT step the error). Mark the wrong control with its own `error` (Field, Pin). */
+    error?: ReactNode;
+    /** the step is waiting for the answer — one line under the button: a turning ring + these words ("sending the code…"); the
+     *  step's buttons take no taps meanwhile. The app moves `at` when the answer is good, or sets `error`. */
+    busy?: 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, error, busy, className, children, ...rest }: SheetStepProps): import("react").JSX.Element;

package/dist/sheets/SheetSteps.js

@@ -0,0 +1,244 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
+import { Link } from '../actions/Link.js';
+import { FormNote } from '../forms/FormNote.js';
+import { CheckContext } from '../forms/check.js';
+const BACK_MS = 3000; // a PIN that does not match: its red digits and words stay this long, then the step goes back
+const MOVE_MS = 350; // = --motion-sheet: the accordion's beat
+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;
+    /* how far the member has come: a step before it was DONE (its work, or skipped) — it stays done when they go back to look */
+    const [furthest, setFurthest] = useState(current);
+    if (current > furthest)
+        setFurthest(current);
+    const reach = Math.max(furthest, current);
+    const ref = useRef(null);
+    const first = useRef(true);
+    const holderRef = useRef(null);
+    const moving = useRef(0); // until then a step change is playing its beats: focus moves do not scroll
+    const shown = useRef(current);
+    if (shown.current !== current) {
+        shown.current = current;
+        moving.current = performance.now() + MOVE_MS + 100;
+    } // from the very render that changes it: the old field's blur and the keyboard's jump come in that same commit
+    const press = useRef(null);
+    const go = (i, reason) => {
+        if (i === current || i < 0 || i > count)
+            return;
+        if (at === undefined)
+            setInner(i);
+        onAtChange?.(i, reason);
+    };
+    /* how far the body is scrolled when a step opens or a field in it takes the keyboard: the TWO latest done rows always show
+       above the open step, and half of the one before — older ones go up out of sight, one row at a time, so what was done never seems to vanish (Lh
+       2026-09-24: moving the pile further startled; with two rows or fewer nothing moves) */
+    const settle = () => {
+        const list = ref.current, body = list?.closest('.sheet__body'), now = list?.querySelector('.sheet-step--now');
+        if (!list || !body || !now)
+            return;
+        const above = [];
+        for (let el = now.previousElementSibling; el; el = el.previousElementSibling)
+            above.unshift(el);
+        const bTop = body.getBoundingClientRect().top, at = (el) => body.scrollTop + el.getBoundingClientRect().top - bTop;
+        const third = above.length > 2 ? above[above.length - 3] : null; // 2½ rows show (Lh 2026-09-24): the two latest whole, the one before cut in half — a sign there is more above
+        let to = third ? at(third) + third.getBoundingClientRect().height / 2 : 0;
+        /* …unless the field with the focus would still be under the cut (a short phone, a big text size): then up as far as it needs —
+           but never past the LATEST done row, which always stays in sight */
+        const focused = document.activeElement instanceof HTMLElement && now.contains(document.activeElement) ? document.activeElement : null;
+        if (focused) {
+            const vv = window.visualViewport;
+            const cut = Math.min(body.getBoundingClientRect().bottom - (parseFloat(getComputedStyle(body).scrollPaddingBottom) || 0), vv ? vv.offsetTop + vv.height : Infinity);
+            const under = (focused.closest('.field, .pin') ?? focused).getBoundingClientRect().bottom + (body.scrollTop - to) - cut; // where its bottom will be once scrolled to `to`
+            const most = above.length ? at(above[above.length - 1]) : 0;
+            if (under > 0)
+                to = Math.min(to + under, Math.max(most, to));
+        }
+        if (Math.abs(to - body.scrollTop) <= 1)
+            return;
+        // the pile SCROLLS there, animated (Lh 2026-09-24) — the browser's own smooth scroll; its frames are not replayed as jumps
+        const smooth = !matchMedia('(prefers-reduced-motion: reduce)').matches;
+        own.current = performance.now() + (smooth ? 700 : 0);
+        body.scrollTo({ top: to, behavior: smooth ? 'smooth' : 'auto' });
+    };
+    /* the step changed, in TWO beats one right after the other: (1) the old step folds while the new one unfolds — nothing else
+       moves; (2) then the pile settles (the two latest done rows in sight), gliding. The cursor goes into the new step at once
+       (so a phone's keyboard stays up) but without scrolling. Not on arrival — the body keeps its scroll. */
+    /* the open step's first field is the one to take the cursor when the sheet comes onto the screen (Sheet reads `data-autofocus`) */
+    useLayoutEffect(() => {
+        ref.current?.querySelectorAll('[data-autofocus]').forEach((el) => el.removeAttribute('data-autofocus'));
+        ref.current?.querySelector('.sheet-step--now .sheet-step__inner :is(input:not([type=checkbox], [type=radio], [type=hidden]), textarea)')?.setAttribute('data-autofocus', '');
+    });
+    useLayoutEffect(() => {
+        if (first.current) {
+            first.current = false;
+            return;
+        }
+        // ONE THING AT A TIME (Lh 2026-09-24 — the old field and the new one fought over the cursor and the pile bounced):
+        // (1) the old field lets go — blur, at once; (2) the fold plays alone; (3) then the cursor goes into the new step and the
+        // pile settles, together, right after the fold. `moving` (set by the render) holds every jump until then.
+        // The cursor waits in a HOLDER while the fold plays — an invisible text field of the steps' own: the phone's keyboard stays up
+        // (a blur would drop it and the next focus bring it back — Lh 2026-09-24), and it takes the keyboard type of the field to come
+        const at = document.activeElement, holder = holderRef.current;
+        const nextField = ref.current?.querySelector('.sheet-step--now .sheet-step__inner :is(input:not([type=checkbox], [type=radio], [type=hidden]), textarea)');
+        if (at instanceof HTMLElement && ref.current?.contains(at)) {
+            if (holder && nextField && at.matches('input, textarea')) {
+                holder.inputMode = nextField.inputMode || 'text';
+                holder.value = '';
+                holder.focus({ preventScroll: true });
+            }
+            else
+                at.blur();
+        }
+        const t = setTimeout(() => {
+            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 });
+            glide.current = performance.now() + 900;
+            settle();
+        }, MOVE_MS);
+        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), own = useRef(0); // own: our smooth scroll is playing — not a jump to replay
+    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 || performance.now() < own.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
+            const hold = Math.max(0, moving.current - 100 - performance.now()); // during a step change: held until the fold is done (beat 2)
+            el.style.transition = `translate ${GLIDE_MS}ms ease-out ${hold}ms`;
+            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), settle the pile — the two latest
+       done rows in sight. 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;
+        if (!target.closest('.sheet-step--now') || !typing(target) || performance.now() < moving.current - 100)
+            return; // a step change settles on its own beat
+        setTimeout(settle, 300); // after the keyboard and the sheet's own climb
+    };
+    const focusOut = (e) => {
+        onBlur?.(e);
+        if (!typing(e.target) || performance.now() < moving.current)
+            return; // the old step's field losing the cursor to the new one
+        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 && to < count)
+            go(to, 'swipe'); // a swipe never passes the last step — only its own action or its skip does
+        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("input", { ref: holderRef, className: "sheet-steps__holder", "aria-hidden": true, tabIndex: -1, autoComplete: "off", onInput: (e) => { e.currentTarget.value = ''; } }), _jsx("ol", { className: "sheet-steps__track", children: steps.map((step, i) => (_jsx(StepCtx.Provider, { value: { i, at: current, furthest: reach, count, reversible, go }, children: step }, step.key ?? i))) }), finish != null && ( // always in sight; it takes taps only once every step is done (or skipped)
+            _jsx("div", { className: "sheet-steps__finish", children: isValidElement(finish) ? cloneElement(finish, { disabled: reach < count || finish.props.disabled }) : 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', error, busy, className, children, ...rest }) {
+    const ctx = useContext(StepCtx);
+    if (!ctx)
+        throw new Error('SheetStep goes inside a SheetSteps');
+    const { i, at, furthest, count, reversible, go } = ctx;
+    const phase = i === at ? 'now' : i < furthest ? 'done' : 'next';
+    const off = phase !== 'now';
+    /* the step is the FORM GROUP of the format checks inside it (Field format/digits/required, Pin match): the words of the first
+       control that fails show under the button; a press on a button of the step checks them all first and holds the press back
+       when one fails (the app's onClick never hears it); a Pin that does not match shows its words for three seconds, then steps back */
+    const goRef = useRef(go);
+    goRef.current = go;
+    const [note, setNote] = useState(null);
+    const checks = useRef(new Map());
+    const first = () => { for (const w of checks.current.values())
+        if (w != null)
+            return w; return null; };
+    const group = useMemo(() => ({
+        add: (c) => { checks.current.set(c, null); return () => { checks.current.delete(c); setNote(first()); }; },
+        say: (c, w) => { checks.current.set(c, w); setNote(first()); },
+        back: () => setTimeout(() => goRef.current(i - 1, 'mismatch'), BACK_MS),
+    }), [i]);
+    useEffect(() => { if (off) {
+        for (const c of checks.current.keys())
+            checks.current.set(c, null);
+        setNote(null);
+    } }, [off]);
+    /* a press on the step's button keeps the cursor where it is: the button still clicks, but the field keeps the focus, so a
+       phone's keyboard does not drop and come back (the pile jumped up and down with it — Lh 2026-09-24) */
+    const keepCursor = (e) => {
+        const at = document.activeElement;
+        if (e.target.closest('.btn') && at instanceof HTMLElement && at.matches('input, textarea') && e.currentTarget.contains(at))
+            e.preventDefault();
+    };
+    const press = (e) => {
+        const btn = e.target.closest('.btn');
+        if (!btn || btn.disabled)
+            return;
+        let bad = null;
+        for (const c of checks.current.keys()) {
+            const w = c.check(true);
+            checks.current.set(c, w);
+            if (w != null && !bad)
+                bad = c;
+        }
+        setNote(first());
+        if (bad) {
+            e.stopPropagation();
+            e.preventDefault();
+            bad.focus();
+        }
+    };
+    return (_jsxs("li", { className: cx('sheet-step', `sheet-step--${phase}`, busy != null && busy !== false && 'sheet-step--busy', className), "aria-current": phase === 'now' ? 'step' : undefined, "aria-busy": busy != null && busy !== false ? true : undefined, "data-skippable": skippable || undefined, ...rest, children: [_jsxs("div", { className: "sheet-step__head", inert: off || undefined, children: [_jsx("h3", { className: "sheet-step__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, onClickCapture: press, onPointerDown: keepCursor, children: [_jsx(CheckContext.Provider, { value: group, children: children }), _jsx(FormNote, { error: error ?? note, busy: busy }), 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/dist/type/icons.d.ts

@@ -1,4 +1,4 @@
-export type IconName = "arrow-left" | "arrow-right" | "arrow-up" | "arrow-up-right" | "bell" | "briefcase" | "calendar-days" | "car" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-help" | "clock" | "droplet" | "ellipsis" | "file-text" | "gift" | "handshake" | "heart" | "hourglass" | "house" | "id-card" | "image" | "layout-grid" | "lightbulb" | "log-out" | "luggage" | "map" | "megaphone" | "menu" | "message-circle" | "mic" | "music" | "package" | "pencil" | "percent" | "phone-call" | "plane" | "play" | "plus" | "search" | "share" | "shopping-bag" | "siren" | "sliders" | "star" | "store" | "sun" | "thermometer" | "ticket" | "trash" | "truck" | "upload" | "user" | "users" | "wallet" | "x";
+export type IconName = "arrow-left" | "arrow-right" | "arrow-up" | "arrow-up-right" | "bell" | "briefcase" | "calendar-days" | "car" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-alert" | "circle-help" | "clock" | "droplet" | "ellipsis" | "file-text" | "gift" | "handshake" | "heart" | "hourglass" | "house" | "id-card" | "image" | "layout-grid" | "lightbulb" | "loader-circle" | "log-out" | "luggage" | "map" | "megaphone" | "menu" | "message-circle" | "mic" | "music" | "package" | "pencil" | "percent" | "phone-call" | "plane" | "play" | "plus" | "search" | "share" | "shopping-bag" | "siren" | "sliders" | "star" | "store" | "sun" | "thermometer" | "ticket" | "trash" | "truck" | "upload" | "user" | "users" | "wallet" | "x";
 export declare const ICON_NAMES: readonly IconName[];
 export declare const ICONS: Record<IconName, {
     attrs: Record<string, string>;

package/dist/type/icons.js

@@ -1,2 +1,2 @@
-export const ICON_NAMES = ["arrow-left", "arrow-right", "arrow-up", "arrow-up-right", "bell", "briefcase", "calendar-days", "car", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-help", "clock", "droplet", "ellipsis", "file-text", "gift", "handshake", "heart", "hourglass", "house", "id-card", "image", "layout-grid", "lightbulb", "log-out", "luggage", "map", "megaphone", "menu", "message-circle", "mic", "music", "package", "pencil", "percent", "phone-call", "plane", "play", "plus", "search", "share", "shopping-bag", "siren", "sliders", "star", "store", "sun", "thermometer", "ticket", "trash", "truck", "upload", "user", "users", "wallet", "x"];
-export const ICONS = { "arrow-left": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m12 19-7-7 7-7\" /><path d=\"M19 12H5\" />" }, "arrow-right": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/>" }, "arrow-up": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m5 12 7-7 7 7\"/><path d=\"M12 19V5\"/>" }, "arrow-up-right": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M7 7h10v10\" /><path d=\"M7 17 17 7\" />" }, "bell": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M10.268 21a2 2 0 0 0 3.464 0\" /><path d=\"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326\" />" }, "briefcase": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\" /><rect width=\"20\" height=\"14\" x=\"2\" y=\"6\" rx=\"2\" />" }, "calendar-days": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M8 2v4\" /><path d=\"M16 2v4\" /><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" /><path d=\"M3 10h18\" /><path d=\"M8 14h.01\" /><path d=\"M12 14h.01\" /><path d=\"M16 14h.01\" /><path d=\"M8 18h.01\" /><path d=\"M12 18h.01\" /><path d=\"M16 18h.01\" />" }, "car": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2\"/><circle cx=\"7\" cy=\"17\" r=\"2\"/><path d=\"M9 17h6\"/><circle cx=\"17\" cy=\"17\" r=\"2\"/>" }, "check": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M20 6 9 17l-5-5\"/>" }, "chevron-down": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m6 9 6 6 6-6\" />" }, "chevron-left": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m15 18-6-6 6-6\"/>" }, "chevron-right": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m9 18 6-6-6-6\"/>" }, "chevron-up": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m18 15-6-6-6 6\"/>" }, "circle-help": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"/><path d=\"M12 17h.01\"/>" }, "clock": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M12 6v6l4 2\" /><circle cx=\"12\" cy=\"12\" r=\"10\" />" }, "droplet": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z\"/>" }, "ellipsis": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/><circle cx=\"5\" cy=\"12\" r=\"1\"/>" }, "file-text": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"M10 9H8\"/><path d=\"M16 13H8\"/><path d=\"M16 17H8\"/>" }, "gift": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<rect x=\"3\" y=\"8\" width=\"18\" height=\"4\" rx=\"1\"/><path d=\"M12 8v13\"/><path d=\"M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7\"/><path d=\"M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5\"/>" }, "handshake": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m11 17 2 2a1 1 0 1 0 3-3\"/><path d=\"m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4\"/><path d=\"m21 3 1 11h-2\"/><path d=\"M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3\"/><path d=\"M3 4h8\"/>" }, "heart": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\" />" }, "hourglass": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M5 22h14\"/><path d=\"M5 2h14\"/><path d=\"M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22\"/><path d=\"M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2\"/>" }, "house": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"/><path d=\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/>" }, "id-card": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M16 10h2\"/><path d=\"M16 14h2\"/><path d=\"M6.17 15a3 3 0 0 1 5.66 0\"/><circle cx=\"9\" cy=\"11\" r=\"2\"/><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"/>" }, "image": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/>" }, "layout-grid": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"/>" }, "lightbulb": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1.3.5 2.6 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"/><path d=\"M9 18h6\"/><path d=\"M10 22h4\"/>" }, "log-out": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\"/>" }, "luggage": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M6 20a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2\" /><path d=\"M8 18V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v14\" /><path d=\"M10 20h4\" /><circle cx=\"16\" cy=\"20\" r=\"2\" /><circle cx=\"8\" cy=\"20\" r=\"2\" />" }, "map": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z\" /><path d=\"M15 5.764v15\" /><path d=\"M9 3.236v15\" />" }, "megaphone": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m3 11 18-5v12L3 14v-3z\"/><path d=\"M11.6 16.8a3 3 0 1 1-5.8-1.6\"/>" }, "menu": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M4 12h16\" /><path d=\"M4 18h16\" /><path d=\"M4 6h16\" />" }, "message-circle": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\"/>" }, "mic": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>" }, "music": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M9 18V5l12-2v13\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><circle cx=\"18\" cy=\"16\" r=\"3\"/>" }, "package": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m7.5 4.27 9 5.15\"/><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"/><path d=\"m3.3 7 8.7 5 8.7-5\"/><path d=\"M12 22V12\"/>" }, "pencil": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/><path d=\"m15 5 4 4\"/>" }, "percent": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<line x1=\"19\" x2=\"5\" y1=\"5\" y2=\"19\" /><circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\" /><circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\" />" }, "phone-call": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M13 2a9 9 0 0 1 9 9\" /><path d=\"M13 6a5 5 0 0 1 5 5\" /><path d=\"M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384\" />" }, "plane": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z\" />" }, "play": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<polygon points=\"6 3 20 12 6 21 6 3\"/>" }, "plus": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M5 12h14\" /><path d=\"M12 5v14\" />" }, "search": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>" }, "share": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"/><polyline points=\"16 6 12 2 8 6\"/><line x1=\"12\" x2=\"12\" y1=\"2\" y2=\"15\"/>" }, "shopping-bag": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M16 10a4 4 0 0 1-8 0\" /><path d=\"M3.103 6.034h17.794\" /><path d=\"M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z\" />" }, "siren": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M7 18v-6a5 5 0 1 1 10 0v6\" /><path d=\"M5 21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2z\" /><path d=\"M21 12h1\" /><path d=\"M18.5 4.5 18 5\" /><path d=\"M2 12h1\" /><path d=\"M12 2v1\" /><path d=\"m4.929 4.929.707.707\" /><path d=\"M12 12v6\" />" }, "sliders": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<line x1=\"21\" x2=\"14\" y1=\"4\" y2=\"4\"/><line x1=\"10\" x2=\"3\" y1=\"4\" y2=\"4\"/><line x1=\"21\" x2=\"12\" y1=\"12\" y2=\"12\"/><line x1=\"8\" x2=\"3\" y1=\"12\" y2=\"12\"/><line x1=\"21\" x2=\"16\" y1=\"20\" y2=\"20\"/><line x1=\"12\" x2=\"3\" y1=\"20\" y2=\"20\"/><line x1=\"14\" x2=\"14\" y1=\"2\" y2=\"6\"/><line x1=\"8\" x2=\"8\" y1=\"10\" y2=\"14\"/><line x1=\"16\" x2=\"16\" y1=\"18\" y2=\"22\"/>" }, "star": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>" }, "store": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\" /><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\" /><path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\" /><path d=\"M2 7h20\" /><path d=\"M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7\" />" }, "sun": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2\"/><path d=\"M12 20v2\"/><path d=\"m4.93 4.93 1.41 1.41\"/><path d=\"m17.66 17.66 1.41 1.41\"/><path d=\"M2 12h2\"/><path d=\"M20 12h2\"/><path d=\"m6.34 17.66-1.41 1.41\"/><path d=\"m19.07 4.93-1.41 1.41\"/>" }, "thermometer": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z\"/>" }, "ticket": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\" /><path d=\"M13 5v2\" /><path d=\"M13 17v2\" /><path d=\"M13 11v2\" />" }, "trash": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/><line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"/><line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"/>" }, "truck": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2\"/><path d=\"M15 18H9\"/><path d=\"M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14\"/><circle cx=\"17\" cy=\"18\" r=\"2\"/><circle cx=\"7\" cy=\"18\" r=\"2\"/>" }, "upload": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"17 8 12 3 7 8\"/><line x1=\"12\" x2=\"12\" y1=\"3\" y2=\"15\"/>" }, "user": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>" }, "users": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/>" }, "wallet": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1\"/><path d=\"M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4\"/>" }, "x": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />" } };
+export const ICON_NAMES = ["arrow-left", "arrow-right", "arrow-up", "arrow-up-right", "bell", "briefcase", "calendar-days", "car", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-alert", "circle-help", "clock", "droplet", "ellipsis", "file-text", "gift", "handshake", "heart", "hourglass", "house", "id-card", "image", "layout-grid", "lightbulb", "loader-circle", "log-out", "luggage", "map", "megaphone", "menu", "message-circle", "mic", "music", "package", "pencil", "percent", "phone-call", "plane", "play", "plus", "search", "share", "shopping-bag", "siren", "sliders", "star", "store", "sun", "thermometer", "ticket", "trash", "truck", "upload", "user", "users", "wallet", "x"];
+export const ICONS = { "arrow-left": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m12 19-7-7 7-7\" /><path d=\"M19 12H5\" />" }, "arrow-right": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/>" }, "arrow-up": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m5 12 7-7 7 7\"/><path d=\"M12 19V5\"/>" }, "arrow-up-right": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M7 7h10v10\" /><path d=\"M7 17 17 7\" />" }, "bell": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M10.268 21a2 2 0 0 0 3.464 0\" /><path d=\"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326\" />" }, "briefcase": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\" /><rect width=\"20\" height=\"14\" x=\"2\" y=\"6\" rx=\"2\" />" }, "calendar-days": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M8 2v4\" /><path d=\"M16 2v4\" /><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" /><path d=\"M3 10h18\" /><path d=\"M8 14h.01\" /><path d=\"M12 14h.01\" /><path d=\"M16 14h.01\" /><path d=\"M8 18h.01\" /><path d=\"M12 18h.01\" /><path d=\"M16 18h.01\" />" }, "car": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2\"/><circle cx=\"7\" cy=\"17\" r=\"2\"/><path d=\"M9 17h6\"/><circle cx=\"17\" cy=\"17\" r=\"2\"/>" }, "check": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M20 6 9 17l-5-5\"/>" }, "chevron-down": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m6 9 6 6 6-6\" />" }, "chevron-left": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m15 18-6-6 6-6\"/>" }, "chevron-right": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m9 18 6-6-6-6\"/>" }, "chevron-up": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m18 15-6-6-6 6\"/>" }, "circle-alert": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<circle cx=\"12\" cy=\"12\" r=\"10\" /><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" /><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" />" }, "circle-help": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"/><path d=\"M12 17h.01\"/>" }, "clock": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M12 6v6l4 2\" /><circle cx=\"12\" cy=\"12\" r=\"10\" />" }, "droplet": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z\"/>" }, "ellipsis": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/><circle cx=\"5\" cy=\"12\" r=\"1\"/>" }, "file-text": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"M10 9H8\"/><path d=\"M16 13H8\"/><path d=\"M16 17H8\"/>" }, "gift": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<rect x=\"3\" y=\"8\" width=\"18\" height=\"4\" rx=\"1\"/><path d=\"M12 8v13\"/><path d=\"M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7\"/><path d=\"M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5\"/>" }, "handshake": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m11 17 2 2a1 1 0 1 0 3-3\"/><path d=\"m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4\"/><path d=\"m21 3 1 11h-2\"/><path d=\"M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3\"/><path d=\"M3 4h8\"/>" }, "heart": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\" />" }, "hourglass": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M5 22h14\"/><path d=\"M5 2h14\"/><path d=\"M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22\"/><path d=\"M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2\"/>" }, "house": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"/><path d=\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/>" }, "id-card": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M16 10h2\"/><path d=\"M16 14h2\"/><path d=\"M6.17 15a3 3 0 0 1 5.66 0\"/><circle cx=\"9\" cy=\"11\" r=\"2\"/><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"/>" }, "image": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/>" }, "layout-grid": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"/>" }, "lightbulb": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1.3.5 2.6 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"/><path d=\"M9 18h6\"/><path d=\"M10 22h4\"/>" }, "loader-circle": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />" }, "log-out": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\"/>" }, "luggage": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M6 20a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2\" /><path d=\"M8 18V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v14\" /><path d=\"M10 20h4\" /><circle cx=\"16\" cy=\"20\" r=\"2\" /><circle cx=\"8\" cy=\"20\" r=\"2\" />" }, "map": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z\" /><path d=\"M15 5.764v15\" /><path d=\"M9 3.236v15\" />" }, "megaphone": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m3 11 18-5v12L3 14v-3z\"/><path d=\"M11.6 16.8a3 3 0 1 1-5.8-1.6\"/>" }, "menu": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M4 12h16\" /><path d=\"M4 18h16\" /><path d=\"M4 6h16\" />" }, "message-circle": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\"/>" }, "mic": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>" }, "music": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M9 18V5l12-2v13\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><circle cx=\"18\" cy=\"16\" r=\"3\"/>" }, "package": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m7.5 4.27 9 5.15\"/><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"/><path d=\"m3.3 7 8.7 5 8.7-5\"/><path d=\"M12 22V12\"/>" }, "pencil": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/><path d=\"m15 5 4 4\"/>" }, "percent": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<line x1=\"19\" x2=\"5\" y1=\"5\" y2=\"19\" /><circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\" /><circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\" />" }, "phone-call": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M13 2a9 9 0 0 1 9 9\" /><path d=\"M13 6a5 5 0 0 1 5 5\" /><path d=\"M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384\" />" }, "plane": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z\" />" }, "play": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<polygon points=\"6 3 20 12 6 21 6 3\"/>" }, "plus": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M5 12h14\" /><path d=\"M12 5v14\" />" }, "search": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>" }, "share": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"/><polyline points=\"16 6 12 2 8 6\"/><line x1=\"12\" x2=\"12\" y1=\"2\" y2=\"15\"/>" }, "shopping-bag": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M16 10a4 4 0 0 1-8 0\" /><path d=\"M3.103 6.034h17.794\" /><path d=\"M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z\" />" }, "siren": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M7 18v-6a5 5 0 1 1 10 0v6\" /><path d=\"M5 21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2z\" /><path d=\"M21 12h1\" /><path d=\"M18.5 4.5 18 5\" /><path d=\"M2 12h1\" /><path d=\"M12 2v1\" /><path d=\"m4.929 4.929.707.707\" /><path d=\"M12 12v6\" />" }, "sliders": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<line x1=\"21\" x2=\"14\" y1=\"4\" y2=\"4\"/><line x1=\"10\" x2=\"3\" y1=\"4\" y2=\"4\"/><line x1=\"21\" x2=\"12\" y1=\"12\" y2=\"12\"/><line x1=\"8\" x2=\"3\" y1=\"12\" y2=\"12\"/><line x1=\"21\" x2=\"16\" y1=\"20\" y2=\"20\"/><line x1=\"12\" x2=\"3\" y1=\"20\" y2=\"20\"/><line x1=\"14\" x2=\"14\" y1=\"2\" y2=\"6\"/><line x1=\"8\" x2=\"8\" y1=\"10\" y2=\"14\"/><line x1=\"16\" x2=\"16\" y1=\"18\" y2=\"22\"/>" }, "star": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>" }, "store": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\" /><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\" /><path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\" /><path d=\"M2 7h20\" /><path d=\"M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7\" />" }, "sun": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2\"/><path d=\"M12 20v2\"/><path d=\"m4.93 4.93 1.41 1.41\"/><path d=\"m17.66 17.66 1.41 1.41\"/><path d=\"M2 12h2\"/><path d=\"M20 12h2\"/><path d=\"m6.34 17.66-1.41 1.41\"/><path d=\"m19.07 4.93-1.41 1.41\"/>" }, "thermometer": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z\"/>" }, "ticket": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\" /><path d=\"M13 5v2\" /><path d=\"M13 17v2\" /><path d=\"M13 11v2\" />" }, "trash": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/><line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"/><line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"/>" }, "truck": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2\"/><path d=\"M15 18H9\"/><path d=\"M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14\"/><circle cx=\"17\" cy=\"18\" r=\"2\"/><circle cx=\"7\" cy=\"18\" r=\"2\"/>" }, "upload": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"17 8 12 3 7 8\"/><line x1=\"12\" x2=\"12\" y1=\"3\" y2=\"15\"/>" }, "user": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>" }, "users": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/>" }, "wallet": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1\"/><path d=\"M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4\"/>" }, "x": { "attrs": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "body": "<path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />" } };

package/icons.svg

@@ -60,4 +60,6 @@
 <symbol id="gift" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></symbol>
 <symbol id="id-card" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 10h2"/><path d="M16 14h2"/><path d="M6.17 15a3 3 0 0 1 5.66 0"/><circle cx="9" cy="11" r="2"/><rect x="2" y="5" width="20" height="14" rx="2"/></symbol>
 <symbol id="handshake" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17 2 2a1 1 0 1 0 3-3"/><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"/><path d="m21 3 1 11h-2"/><path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"/><path d="M3 4h8"/></symbol>
+<symbol id="circle-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /> <line x1="12" x2="12" y1="8" y2="12" /> <line x1="12" x2="12.01" y1="16" y2="16" /></symbol>
+<symbol id="loader-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></symbol>
 </svg>

package/package.json

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