@usableapp/cardds 0.7.33 → 0.7.35

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 > 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.35 — 2026-10-01
+
+### Fixed
+- **`CallSheet`: a sheet on its way out keeps its body until it has slid away** (Lh 2026-10-01). Before, the body was taken out the moment `open` turned null (or another way was called), so an empty sheet slid down. Nothing to change in a screen.
+
+## 0.7.34 — 2026-10-01
+
+### Changed
+- **A secret `Pin`: each typed digit flashes, then is a dot** (Lh 2026-10-01): the digit is readable for half a second, and turns into a dot at once when the next digit lands. Before, the phone's browser decided: it shows the last typed character of a masked field for a second or more, per field — and a Pin is six fields, so several digits of a PIN stood readable together (Android Chrome). The Pin now draws the dot and times the flash itself; `-webkit-text-security` is no longer used. A pasted code does not flash. Nothing to change in a screen.
+### Added
+- Knobs `--pin-flash-time` (how long a typed digit stays readable, `0.5s`; `0s` = never shown) and `--pin-dot` (the dot's size, `0.24em`).
+
 ## 0.7.33 — 2026-10-01
 
 ### Changed

package/css/choice.css

@@ -198,7 +198,22 @@
     is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
 }
 .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) */
-.pin--secret .pin__cell { -webkit-text-security: disc; text-security: disc; } /* a PIN: a dot per digit, the number pad kept (Lh 2026-09-25) */
+/* a PIN (secret): the cell DRAWS the dot, the character itself is not painted — except for a moment, when it has just been typed
+   (Lh 2026-10-01: "each digit must flash, then go at once"). It was `-webkit-text-security: disc`: a phone's browser then shows
+   the last typed character of a masked field for a second or more ("password echo", Android) — per FIELD, and a Pin is six
+   fields, so several digits stood readable together. Now the timing is the Pin's own: `.is-fresh` (set by Pin on the cell just
+   typed, taken off when the next digit lands) plays `pin-flash`; after it, and in every other cell, the fill is transparent and
+   the dot is the cell's background, in currentColor — a wrong code's red reaches it. */
+.pin--secret .pin__cell:not(:placeholder-shown) {
+  -webkit-text-fill-color: transparent;
+  background-image: radial-gradient(circle closest-side, currentColor 96%, transparent);
+  background-size: var(--pin-dot, 0.24em) var(--pin-dot, 0.24em);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.pin--secret .pin__cell.is-fresh:not(:placeholder-shown) { animation: pin-flash var(--pin-flash-time, 0.5s) steps(1); }
+@keyframes pin-flash { 0% { -webkit-text-fill-color: currentColor; background-size: 0 0; } }
+.pin--secret .pin__cell::selection { background: transparent; } /* its digit is selected when the cell takes the cursor: nothing to show of it */
 .pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
 .pin__cell:focus:placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);

package/dist/cardds.css

@@ -2966,7 +2966,22 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
     is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
 }
 .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) */
-.pin--secret .pin__cell { -webkit-text-security: disc; text-security: disc; } /* a PIN: a dot per digit, the number pad kept (Lh 2026-09-25) */
+/* a PIN (secret): the cell DRAWS the dot, the character itself is not painted — except for a moment, when it has just been typed
+   (Lh 2026-10-01: "each digit must flash, then go at once"). It was `-webkit-text-security: disc`: a phone's browser then shows
+   the last typed character of a masked field for a second or more ("password echo", Android) — per FIELD, and a Pin is six
+   fields, so several digits stood readable together. Now the timing is the Pin's own: `.is-fresh` (set by Pin on the cell just
+   typed, taken off when the next digit lands) plays `pin-flash`; after it, and in every other cell, the fill is transparent and
+   the dot is the cell's background, in currentColor — a wrong code's red reaches it. */
+.pin--secret .pin__cell:not(:placeholder-shown) {
+  -webkit-text-fill-color: transparent;
+  background-image: radial-gradient(circle closest-side, currentColor 96%, transparent);
+  background-size: var(--pin-dot, 0.24em) var(--pin-dot, 0.24em);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.pin--secret .pin__cell.is-fresh:not(:placeholder-shown) { animation: pin-flash var(--pin-flash-time, 0.5s) steps(1); }
+@keyframes pin-flash { 0% { -webkit-text-fill-color: currentColor; background-size: 0 0; } }
+.pin--secret .pin__cell::selection { background: transparent; } /* its digit is selected when the cell takes the cursor: nothing to show of it */
 .pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
 .pin__cell:focus:placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);

package/dist/forms/Pin.d.ts

@@ -22,8 +22,10 @@ export interface PinProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defa
     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;
-    /** a SECRET code (a PIN, not an OTP): each typed digit shows as a dot — `-webkit-text-security`, so the keyboard stays the
-     *  number pad (a password field brings a full keyboard on some phones); no SMS autofill, no password manager (Lh 2026-09-25) */
+    /** a SECRET code (a PIN, not an OTP): each typed digit FLASHES — readable for a moment (`--pin-flash-time`), then a dot, and a
+     *  dot at once when the next digit lands (Lh 2026-10-01). The cell draws the dot itself: the field stays a text field, so the
+     *  keyboard stays the number pad (a password field brings a full keyboard on some phones) and the browser's own reveal of a
+     *  masked field — a second per cell, six cells readable together — has no part in it; no SMS autofill, no password manager */
     secret?: boolean;
     /** focus the first empty cell on mount */
     autoFocus?: boolean;

package/dist/forms/Pin.js

@@ -73,6 +73,7 @@ export function Pin({ length = 6, value, defaultValue = '', label = word('digit'
     const [cleared, setCleared] = useState(undefined); // the app's error whose miss has played out (its cells emptied)
     const wrong = (errOn && error !== cleared) || bad;
     const restart = useRef(false);
+    const [fresh, setFresh] = useState(null); // the cell whose digit was just typed: a secret Pin shows it for a moment
     useEffect(() => {
         if (!errOn) {
             setCleared(undefined);
@@ -103,15 +104,18 @@ export function Pin({ length = 6, value, defaultValue = '', label = word('digit'
             // the cell still held its red digit (not selected, so it stays visible): what came in is the value minus that digit — one
             // typed digit, or a whole pasted / SMS-autofilled code (then it fills every cell, never just the last digit: timebank 142)
             const fresh = digits.length >= length ? digits.slice(-length) : old && digits.length > 1 && digits.startsWith(old) ? digits.slice(old.length) : old && digits.length > 1 && digits.endsWith(old) ? digits.slice(0, -old.length) : digits;
+            setFresh(fresh.length === 1 ? 0 : null);
             set(fresh);
             cell(Math.min(fresh.length, length - 1))?.focus();
             return;
         }
         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) {
+            setFresh(null);
             set(code.slice(0, at) + code.slice(at + 1));
             return;
         }
+        setFresh(digits.length === 1 ? at : null); // one typed digit flashes; a pasted run does not
         set(code.slice(0, at) + digits + code.slice(at + digits.length)); // a paste (or a typed run) spills over the cells that follow
         cell(Math.min(at + digits.length, length - 1))?.focus();
     };
@@ -124,12 +128,14 @@ export function Pin({ length = 6, value, defaultValue = '', label = word('digit'
             return;
         e.preventDefault();
         restart.current = false;
+        setFresh(null);
         set(digits);
         cell(Math.min(digits.length, length - 1))?.focus();
     };
     const key = (i) => (e) => {
         if (e.key === 'Backspace' && !e.currentTarget.value && i > 0) {
             e.preventDefault();
+            setFresh(null);
             set(code.slice(0, i - 1) + code.slice(i));
             cell(i - 1)?.focus();
         }
@@ -143,9 +149,10 @@ export function Pin({ length = 6, value, defaultValue = '', label = word('digit'
         }
     };
     return (_jsx("div", { ref: ref, className: cx('pin', secret && 'pin--secret', wrong && 'pin--error', shake && 'pin--shake', className), ...rest, onAnimationEnd: (e) => { if (e.animationName === 'pin-shake')
-            setShake(false); onAnimationEnd?.(e); }, children: Array.from({ length }, (_, i) => (
+            setShake(false); if (e.animationName === 'pin-flash')
+            setFresh(null); onAnimationEnd?.(e); }, 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}`, "aria-invalid": wrong || undefined, autoComplete: i === 0 && !secret ? 'one-time-code' : 'off', onChange: input(i), onPaste: paste, onKeyDown: key(i), onFocus: (e) => { if (!restart.current)
+        _jsx("input", { className: cx('pin__cell', secret && fresh === i && 'is-fresh'), inputMode: "numeric", pattern: "[0-9]*", placeholder: " ", value: code[i] ?? '', "aria-label": `${label} ${i + 1}`, "aria-invalid": wrong || undefined, autoComplete: i === 0 && !secret ? 'one-time-code' : 'off', onChange: input(i), onPaste: paste, onKeyDown: key(i), onFocus: (e) => { if (!restart.current)
                 e.currentTarget.select(); } }, i))) }));
 }

package/dist/templates/CallSheet.d.ts

@@ -4,7 +4,7 @@ import { type SheetProps } from '../sheets/Sheet.js';
 export interface CallSheetSheet {
     /** the sheet head's title */
     title: ReactNode;
-    /** the sheet body — rendered only while the sheet is up; a function is called then */
+    /** the sheet body — rendered only while the sheet is up (and while it slides away); a function is called then */
     body: ReactNode | (() => ReactNode);
     /** the sheet foot: the one button that finishes the sheet */
     foot?: ReactNode;

package/dist/templates/CallSheet.js

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

package/package.json

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