@usableapp/cardds 0.7.32 → 0.7.34

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 > 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.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
+- **A StackSheet tab's count grows with the text** (Lh 2026-10-01): the red circle was a fixed 20px while its number followed `--fs-base` — at a large text size the number ran over it. The circle is now cut from its own number's size (20px at the default, 32px at 160%); a long count ("10", "99+") makes it a capsule. The number sits on the circle's middle (it sat low), and the circle stands 8px out of the tab's corner instead of 4 — beside the icon, not on the disc's edge. Nothing to change in a screen.
+- **A screen fills the phone, edge to edge** (Lh 2026-10-01): the column's cap `--screen-w` is `30rem` (480px), was `25rem` (400) — a phone 412–448px wide showed a strip of bare ground each side of the screen, its bars and its sheets. No phone reaches the cap now; it only keeps a tablet / desktop window to a phone-sized column. Nothing to change in a screen; a project that set `--screen-w` itself keeps its value.
+### Added
+- Knobs `--stack-sheet-count-pad-x` (the room beside the number), `--stack-sheet-count-lift` (the room under it — retune for another font), `--stack-sheet-count-out` (how far it stands out of the corner). `--stack-sheet-count-h` as before; its default is `1.175em`, was `1.25rem`.
+
 ## 0.7.32 — 2026-09-29
 
 ### Changed

package/README.md

@@ -650,7 +650,7 @@ Every length token resolves to rem — a multiplier × one of four rem bases
 (`--sp-4` = `--sp-base` × 4 = 1rem, `--tap` = `--tap-base` = 3rem, `--r-card` =
 `--r-base` × 2, `--fs-h1` = `--fs-base` × 1.2; see "A project's theme") — so the
 whole system scales with the root font size. `base.css` keeps it at `100%` (the browser's setting, 16px by
-default) and steps narrow phones (≤360px) to `93.75%`, which keeps the 25rem
+default) and steps narrow phones (≤360px) to `93.75%`, which keeps the
 column, its 48px taps and its type in proportion on 320–360 screens. Only
 `--border-w`, `--rule-w` and the focus ring stay in px, so edges stay crisp.
 An app with its own text-size setting calls `setTextScale(percent)`, which writes

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/css/stack.css

@@ -292,11 +292,14 @@
 .stack-sheet__tab { position: relative; }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;
-  top: calc(-1 * var(--sp-1));
-  right: calc(-1 * var(--sp-1));
-  min-width: var(--stack-sheet-count-h, 1.25rem);
-  height: var(--stack-sheet-count-h, 1.25rem);
-  padding: 0 var(--sp-1);
+  top: calc(-1 * var(--stack-sheet-count-out, var(--sp-2))); /* how far it stands OUT of the tab's corner, up and to the right: at sp-1 it
+     sat exactly on the chosen tab's disc edge — it reads as a mark beside the icon, not part of the disc (Lh 2026-10-01) */
+  right: calc(-1 * var(--stack-sheet-count-out, var(--sp-2)));
+  min-width: var(--stack-sheet-count-h, 1.175em); /* em, not rem (Lh 2026-10-01): the circle is cut from ITS OWN number's size — at a
+     large text size the number grew and a 20px circle did not; 1.175em of a 17px caption = the 20px it always was */
+  height: var(--stack-sheet-count-h, 1.175em);
+  padding: 0 var(--stack-sheet-count-pad-x, 0.25em) var(--stack-sheet-count-lift, 0.1em); /* "99+" keeps its room at every text size;
+     the room UNDER the number lifts it onto the circle's middle: a digit has no descender, so a centred line box sets it low (Lh 2026-10-01) */
   font: var(--type-caption);
   line-height: 1;
   pointer-events: none;

package/css/tokens.css

@@ -12,7 +12,9 @@
 
 :root {
   /* ---- layout ---- */
-  --screen-w: 25rem;      /* 400: mobile column — .screen, .action-bar, .sheet-stage */
+  --screen-w: 30rem;      /* 480: the column's CAP — .screen, .action-bar, .sheet-stage. A phone never reaches it (the widest are ~450 CSS px):
+                             on a phone the screen is the device, edge to edge; the cap only keeps a tablet / desktop window to a phone-sized
+                             column. Was 25rem: a 412px phone showed a strip each side (Lh 2026-10-01) */
   --screen-centre: 40%;   /* the human centre of a screen: the middle of its top four fifths — the bottom fifth is the thumb's (Lh, 2026-09-10). .card--centre sits here */
 
   /* ---- the four bases: what a project retunes (Lh, 2026-09-20) ----

package/dist/cardds.css

@@ -53,7 +53,9 @@
 
 :root {
   /* ---- layout ---- */
-  --screen-w: 25rem;      /* 400: mobile column — .screen, .action-bar, .sheet-stage */
+  --screen-w: 30rem;      /* 480: the column's CAP — .screen, .action-bar, .sheet-stage. A phone never reaches it (the widest are ~450 CSS px):
+                             on a phone the screen is the device, edge to edge; the cap only keeps a tablet / desktop window to a phone-sized
+                             column. Was 25rem: a 412px phone showed a strip each side (Lh 2026-10-01) */
   --screen-centre: 40%;   /* the human centre of a screen: the middle of its top four fifths — the bottom fifth is the thumb's (Lh, 2026-09-10). .card--centre sits here */
 
   /* ---- the four bases: what a project retunes (Lh, 2026-09-20) ----
@@ -1249,11 +1251,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .stack-sheet__tab { position: relative; }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;
-  top: calc(-1 * var(--sp-1));
-  right: calc(-1 * var(--sp-1));
-  min-width: var(--stack-sheet-count-h, 1.25rem);
-  height: var(--stack-sheet-count-h, 1.25rem);
-  padding: 0 var(--sp-1);
+  top: calc(-1 * var(--stack-sheet-count-out, var(--sp-2))); /* how far it stands OUT of the tab's corner, up and to the right: at sp-1 it
+     sat exactly on the chosen tab's disc edge — it reads as a mark beside the icon, not part of the disc (Lh 2026-10-01) */
+  right: calc(-1 * var(--stack-sheet-count-out, var(--sp-2)));
+  min-width: var(--stack-sheet-count-h, 1.175em); /* em, not rem (Lh 2026-10-01): the circle is cut from ITS OWN number's size — at a
+     large text size the number grew and a 20px circle did not; 1.175em of a 17px caption = the 20px it always was */
+  height: var(--stack-sheet-count-h, 1.175em);
+  padding: 0 var(--stack-sheet-count-pad-x, 0.25em) var(--stack-sheet-count-lift, 0.1em); /* "99+" keeps its room at every text size;
+     the room UNDER the number lifts it onto the circle's middle: a digit has no descender, so a centred line box sets it low (Lh 2026-10-01) */
   font: var(--type-caption);
   line-height: 1;
   pointer-events: none;
@@ -2961,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/package.json

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