@usableapp/cardds 0.7.45 → 0.7.47

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 > 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.47 — 2026-10-03
+
+### Changed
+- **One sheet follows another: the first goes all the way down, the base is seen, then the next comes up** (Lh 2026-10-03). It is the `Sheet`'s own habit now: a sheet asked up while another sheet of the same box (`Step`, `SheetStage`) is leaving waits at `away` until that one has landed, the base shows for `--motion-sheet-rest` (0.2s), then it rises — 0.35s down · 0.2s base · 0.35s up, never two sheets in the box. Before, two sheets set in one render crossed (`CallSheet ways` going from one way to another, `Step · Calls`), and a sheet raised from the first one's `onSettled('away')` started in the very frame the first landed — one continuous move. Nothing to change in a screen: both wirings now play the same, and an app adds no timer of its own (remove one if you had it). `onSettled` of the sheet coming up fires later by the wait. With reduced motion there is no wait. New root token `--motion-sheet-rest`.
+
+### Fixed
+- **`TrackStep num`: the number sits in the middle of its round at every text size** — the round is cut from its own number (`1.877em`, 32px at the default text as before) and the digit is lifted onto the middle, as the SheetSteps' number. Knobs `--track-dot-size` · `--track-dot-lift`. At a large text a NUMBERED track's pill grows with its rounds and is taller than the top bar (160% text: 88px beside a 78px bar); an icon track keeps the bar's height.
+
+## 0.7.46 — 2026-10-03
+
+### Changed
+- **A larger text pulls the controls with it, half as fast** (Lh 2026-10-03): `setTextScale(percent)` now writes `--tap-base` as well as `--fs-base` — 115% text → 107.5% controls · 130% → 115% · 145% → 122.5% · 160% → 130%; at 100% and under, the controls keep the theme's size. Before, only the words grew and outgrew what holds them (a number on its round's bottom edge, a title tight in the top bar). Nothing to change in an app that calls `setTextScale`: buttons, bars, rounds and icons grow by themselves — look at a dense screen at 160%, it has less room for content than before. An app that sets `--fs-base` on `<html>` by hand gets none of this: call `setTextScale`.
+- New export **`controlsFor(percent)`** — the controls' share for a text size, for an app that wants to show or store the pair.
+
+### Fixed
+- **`SheetSteps numbered`: the number sits in the middle of its disc at every text size** — the disc is cut from its own number (`1.408em`, 24px at the default text as before) instead of a fixed 24px, and the digit is lifted onto the middle. Knobs `--sheet-step-num-size` (now listed) · `--sheet-step-num-lift`. If your theme set `--sheet-step-num-size` in rem, it still wins — but then it no longer follows the text.
+
 ## 0.7.45 — 2026-10-03
 
 ### Changed

package/README.md

@@ -653,7 +653,7 @@ Rules:
   any role can be set outright.
 - The member's text-size setting is the same `--fs-base`, written on `<html>`
   at run time by `setTextScale(percent)` (a share of the theme's base; 100 = the
-  theme's own): the words grow, the things keep their size. (`--text-scale`, which multiplied the root and zoomed the UI too, is gone.)
+  theme's own): the words grow, and the things grow HALF as much (`--tap-base`; `controlsFor(percent)` — 130% text → 115% controls, 160% → 130%), so a larger text still fits what holds it. (`--text-scale`, which multiplied the root and zoomed the UI too, is gone.)
 
 Try it live: the gallery's nav (`npm run dev`) has a slider per size base, and
 palette `own` shows a colour well per colour base.
@@ -684,8 +684,8 @@ 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
-`--fs-base` on `<html>` from the theme's base (100% = the theme's; 160% = 2.2rem by default): only the type and its holders (the count
-badge, the inline icon) grow; taps, spacing and radii keep their size.
+`--fs-base` on `<html>` from the theme's base (100% = the theme's; 160% = 2.2rem by default): the type and its holders (the count
+badge, the inline icon) grow, the controls grow half as much (`--tap-base`), spacing and radii keep their size.
 Components never write a raw length: spacing from `--sp-*`, control sizes from
 `--tap`, `--tap-lg`, `--btn-h`, `--bar-h`, `--header-h`, `--fab`, `--badge`, container
 padding from `--screen-pad` / `--card-pad`, radii from

package/css/numbers.css

@@ -89,7 +89,13 @@
   background: var(--ink-rail);
   color: var(--_ink);
 }
-.track__step > .track__dot { display: grid; place-items: center; padding: 0; font: var(--track-dot-font, var(--type-caption)); font-variant-numeric: tabular-nums; } /* a number in the round (TrackStep num) */
+.track__step > .track__dot { /* a number in the round (TrackStep num) */
+  display: grid; place-items: center; box-sizing: border-box;
+  font: var(--track-dot-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
+  width: var(--track-dot-size, 1.877em); height: var(--track-dot-size, 1.877em); /* em, not rem (Lh 2026-10-03, as the SheetSteps' number and the StackSheet's count): the round is cut from ITS OWN
+     number's size — 1.877em of a 17px caption = the 32px of an icon's round; at a larger text it grows with its number, and the pill with it */
+  padding: 0 0 var(--track-dot-lift, 0.1em); /* the room UNDER the number lifts it onto the round's middle: a digit has no descender */
+}
 .track__step.is-done > .icon,
 .track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
 

package/css/sheet.css

@@ -413,8 +413,10 @@
 }
 .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__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — a white disc on the bar, the number in the ink */
-  flex: none; display: grid; place-items: center; inline-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2)); block-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2));
-  border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); font-variant-numeric: tabular-nums;
+  flex: none; display: grid; place-items: center; box-sizing: border-box; inline-size: var(--sheet-step-num-size, 1.408em); block-size: var(--sheet-step-num-size, 1.408em); /* em, not rem (Lh 2026-10-03, as the StackSheet's count): the disc is cut from ITS OWN number's size —
+     at a large text size the number grew and a 24px disc did not, so the digit sat on its bottom edge; 1.408em of a 17px caption = the 24px it always was */
+  padding-bottom: var(--sheet-step-num-lift, 0.1em); /* the room UNDER the number lifts it onto the disc's middle: a digit has no descender, so a centred line box sets it low */
+  border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
   background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
 .sheet-step__summary { color: inherit; opacity: 0.8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/css/tokens.css

@@ -95,6 +95,7 @@
 
   /* ---- motion ---- */
   --motion-sheet: 0.35s;
+  --motion-sheet-rest: 0.2s; /* one sheet follows another: how long the base is seen between the one that left and the one that comes (Sheet.tsx reads it) */
   --motion-quick: 0.2s;  /* a small state flip that isn't a press: a chevron turning, a popover/banner opening */
   --motion-slide: 0.22s; /* a centred card sliding out and the next in (card.css) — quick, a page turn (Lh, 2026-09-12) */
   --motion-flip: 0.45s;  /* a postcard turning over (media.css) — slow enough to read as a card in the hand */

package/dist/cardds.css

@@ -136,6 +136,7 @@
 
   /* ---- motion ---- */
   --motion-sheet: 0.35s;
+  --motion-sheet-rest: 0.2s; /* one sheet follows another: how long the base is seen between the one that left and the one that comes (Sheet.tsx reads it) */
   --motion-quick: 0.2s;  /* a small state flip that isn't a press: a chevron turning, a popover/banner opening */
   --motion-slide: 0.22s; /* a centred card sliding out and the next in (card.css) — quick, a page turn (Lh, 2026-09-12) */
   --motion-flip: 0.45s;  /* a postcard turning over (media.css) — slow enough to read as a card in the hand */
@@ -1737,8 +1738,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .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__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — a white disc on the bar, the number in the ink */
-  flex: none; display: grid; place-items: center; inline-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2)); block-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2));
-  border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); font-variant-numeric: tabular-nums;
+  flex: none; display: grid; place-items: center; box-sizing: border-box; inline-size: var(--sheet-step-num-size, 1.408em); block-size: var(--sheet-step-num-size, 1.408em); /* em, not rem (Lh 2026-10-03, as the StackSheet's count): the disc is cut from ITS OWN number's size —
+     at a large text size the number grew and a 24px disc did not, so the digit sat on its bottom edge; 1.408em of a 17px caption = the 24px it always was */
+  padding-bottom: var(--sheet-step-num-lift, 0.1em); /* the room UNDER the number lifts it onto the disc's middle: a digit has no descender, so a centred line box sets it low */
+  border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
   background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
 .sheet-step__summary { color: inherit; opacity: 0.8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -2575,7 +2578,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   background: var(--ink-rail);
   color: var(--_ink);
 }
-.track__step > .track__dot { display: grid; place-items: center; padding: 0; font: var(--track-dot-font, var(--type-caption)); font-variant-numeric: tabular-nums; } /* a number in the round (TrackStep num) */
+.track__step > .track__dot { /* a number in the round (TrackStep num) */
+  display: grid; place-items: center; box-sizing: border-box;
+  font: var(--track-dot-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
+  width: var(--track-dot-size, 1.877em); height: var(--track-dot-size, 1.877em); /* em, not rem (Lh 2026-10-03, as the SheetSteps' number and the StackSheet's count): the round is cut from ITS OWN
+     number's size — 1.877em of a 17px caption = the 32px of an icon's round; at a larger text it grows with its number, and the pill with it */
+  padding: 0 0 var(--track-dot-lift, 0.1em); /* the room UNDER the number lifts it onto the round's middle: a digit has no descender */
+}
 .track__step.is-done > .icon,
 .track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
 

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { cx } from './cx.js';
 export * from './type/Icon.js';
 export { ICON_NAMES } from './type/icons.js';
 export * from './type/Text.js';
-export { setTextScale } from './type/textScale.js';
+export { setTextScale, controlsFor } from './type/textScale.js';
 export { setWords, word, type WordKey } from './words.js';
 export * from './scaffold/Screen.js';
 export * from './scaffold/AppBar.js';

package/dist/index.js

@@ -8,7 +8,7 @@ export { cx } from './cx.js';
 export * from './type/Icon.js';
 export { ICON_NAMES } from './type/icons.js';
 export * from './type/Text.js';
-export { setTextScale } from './type/textScale.js';
+export { setTextScale, controlsFor } from './type/textScale.js';
 export { setWords, word } from './words.js';
 export * from './scaffold/Screen.js';
 export * from './scaffold/AppBar.js';

package/dist/sheets/Sheet.d.ts

@@ -37,6 +37,11 @@ export interface SheetProps extends Omit<ComponentProps<'article'>, 'onChange'>
  * It ARRIVES and LEAVES by sliding, always: a sheet that mounts already up starts `away` for one frame and slides to its state, so
  * `{open && <Sheet state="full">}` slides in. Leaving is the app's beat: set `away`, and unmount on `onSettled('away')` — unmount it
  * while it is still up and it can only vanish (a dev warning says so).
+ *
+ * ONE FOLLOWS ANOTHER: a sheet that comes up while another sheet of the same box is on its way out waits — the leaving one goes
+ * ALL the way down, the base is seen for a beat (`--motion-sheet-rest`), and only then it rises: "one left, another came", never two
+ * sheets crossing and never one continuous move. It is the Sheet's own habit, whatever the app's wiring (both states set in one
+ * render, or the next raised from the first's `onSettled`) — the app adds no timer.
  */
 export declare function Sheet({ state, defaultState, onStateChange, onSettled, states, handle, className, children, onFocus, ...rest }: SheetProps): import("react").JSX.Element;
 export {};

package/dist/sheets/Sheet.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { focusWhenActive, useControlled, useLatest, warnOnce, watchSize } from '../state.js';
+import { focusWhenActive, reducedMotion, useControlled, useLatest, warnOnce, watchSize } from '../state.js';
 import { cx } from '../cx.js';
 import { word } from '../words.js';
 const ORDER = ['peek', 'half', '3q', 'full']; // low → high; `away` is below them all and outside them
 const RANK = { away: 0, peek: 1, half: 2, '3q': 3, full: 4 };
 const TAP_REM = 0.5; // = --sp-2: a move shorter than this is a tap, not a drag
+/* ONE SHEET FOLLOWS ANOTHER (Lh 2026-10-03): when a box's sheet landed away, per box — a sheet coming up reads it to give the base its beat */
+const landed = new WeakMap();
 const ms = (t) => Math.max(0, ...t.split(',').map((v) => parseFloat(v) * (v.trim().endsWith('ms') ? 1 : 1000) || 0)); // a computed `0.35s, 0s` list → its longest, in ms
 /**
  * Sheet — the SINGLE sheet: one card as a bottom sheet holding what the member ACTS on. Always the full height of its
@@ -22,6 +24,11 @@ const ms = (t) => Math.max(0, ...t.split(',').map((v) => parseFloat(v) * (v.trim
  * It ARRIVES and LEAVES by sliding, always: a sheet that mounts already up starts `away` for one frame and slides to its state, so
  * `{open && <Sheet state="full">}` slides in. Leaving is the app's beat: set `away`, and unmount on `onSettled('away')` — unmount it
  * while it is still up and it can only vanish (a dev warning says so).
+ *
+ * ONE FOLLOWS ANOTHER: a sheet that comes up while another sheet of the same box is on its way out waits — the leaving one goes
+ * ALL the way down, the base is seen for a beat (`--motion-sheet-rest`), and only then it rises: "one left, another came", never two
+ * sheets crossing and never one continuous move. It is the Sheet's own habit, whatever the app's wiring (both states set in one
+ * render, or the next raised from the first's `onSettled`) — the app adds no timer.
  */
 export function Sheet({ state, defaultState = 'half', onStateChange, onSettled, states, handle = true, className, children, onFocus, ...rest }) {
     const [current, request] = useControlled(state, defaultState, onStateChange);
@@ -31,7 +38,9 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
     const was = useRef('away'); // mounted up = it came onto the screen: it rises from away like any arrival
     const skipClick = useRef(false);
     const [entered, setEntered] = useState(false); // false for the first frame: the class says `away`, so a sheet mounted up has somewhere to slide from
-    const shown = entered ? current : 'away';
+    const [held, setHeld] = useState(false); // true while it waits for the sheet before it to land and the base to be seen
+    const shown = entered && !held ? current : 'away';
+    const live = held ? 'away' : current; // where it is as far as its own habits go: a held sheet has not come up yet
     const latest = useLatest({ current, onSettled });
     const drag = useRef(null);
     const allowed = useCallback(() => {
@@ -42,6 +51,47 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         void ref.current?.offsetHeight; // the browser styles the `away` frame first, or there is no transition to run
         setEntered(true);
     }, []);
+    /* ONE FOLLOWS ANOTHER: it is asked up from `away` (or mounted up) while a sibling sheet is still leaving — or landed less than the
+       rest ago: it holds at `away` until that one's slide has ended and the base has been seen for --motion-sheet-rest. Read from the
+       DOM in the commit itself (a leaving sibling already says `away` but still stands in the box), so the order of the two sheets
+       in the tree, and whether the app set both in one render or one after the other, make no difference. */
+    const before = useRef('away');
+    useLayoutEffect(() => {
+        const el = ref.current, box = el?.parentElement, from = before.current;
+        before.current = current;
+        if (!el || !box || from !== 'away' || current === 'away' || reducedMotion()) {
+            setHeld(false);
+            return;
+        }
+        const rest = ms(getComputedStyle(el).getPropertyValue('--motion-sheet-rest') || '0s');
+        const floor = box.getBoundingClientRect().bottom - 1;
+        const leaving = [...box.querySelectorAll(':scope > .sheet--away')].filter((s) => s !== el && s.getBoundingClientRect().top < floor);
+        const since = performance.now() - (landed.get(box) ?? -Infinity);
+        if (!leaving.length && since >= rest) {
+            setHeld(false);
+            return;
+        }
+        setHeld(true);
+        let timer = 0, left = leaving.length;
+        const go = (after) => { timer = window.setTimeout(() => setHeld(false), after); };
+        if (!left) {
+            go(rest - since);
+            return () => clearTimeout(timer);
+        }
+        const stops = leaving.map((s) => {
+            let done = false;
+            const end = () => { if (done)
+                return; done = true; clearTimeout(t); s.removeEventListener('transitionend', onEnd); if (--left === 0)
+                go(rest); };
+            const onEnd = (e) => { if (e.target === s && e.propertyName === 'translate')
+                end(); };
+            const cs = getComputedStyle(s);
+            s.addEventListener('transitionend', onEnd);
+            const t = setTimeout(end, ms(cs.transitionDuration) + ms(cs.transitionDelay) + 100);
+            return () => { done = true; clearTimeout(t); s.removeEventListener('transitionend', onEnd); };
+        });
+        return () => { stops.forEach((stop) => stop()); clearTimeout(timer); };
+    }, [current]);
     /* it has finished moving: the transition ended (or at once where there is none) — say so once per move; a move cut short by another says nothing */
     const last = useRef(shown);
     useEffect(() => {
@@ -57,6 +107,8 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
             done = true;
             clearTimeout(t);
             el.removeEventListener('transitionend', onEnd);
+            if (shown === 'away' && el.parentElement)
+                landed.set(el.parentElement, performance.now()); // the sheet after it counts its rest from here
             latest.current.onSettled?.(latest.current.current);
         };
         const onEnd = (e) => { if (e.target === el && e.propertyName === 'translate')
@@ -85,17 +137,17 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
        field), else the body's first field; with no field, a sheet that came onto the screen gives it to its handle. A field that already
        has the cursor keeps it. */
     useEffect(() => {
-        if (current !== 'peek' && current !== 'away')
-            home.current = current;
-        const rose = current !== 'peek' && current !== 'away' && RANK[current] > RANK[was.current];
+        if (live !== 'peek' && live !== 'away')
+            home.current = live;
+        const rose = live !== 'peek' && live !== 'away' && RANK[live] > RANK[was.current];
         const from = was.current;
-        was.current = current;
+        was.current = live;
         if (!rose)
             return;
         const cancel = focusWhenActive(ref.current, { scope: ':scope > .sheet__body', fallback: () => (from === 'away' ? handleRef.current : null) });
         return () => { if (!cancel())
             was.current = from; }; // cut short (StrictMode's trial run, or a new state mid-slide): the rise still counts from where it began
-    }, [current]);
+    }, [live]);
     /* geometry, read once per gesture — never stored: how far it has slid, and where each state rests, in px from its top at full */
     const slid = (el) => {
         const box = (el.offsetParent ?? el.parentElement);
@@ -246,5 +298,5 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         skipClick.current = true;
         requestAnimationFrame(() => { skipClick.current = false; });
     };
-    return (_jsxs("article", { ref: ref, className: cx('card sheet', `sheet--${shown}`, className), inert: current === 'away' || undefined, onFocus: focus, ...rest, children: [handle !== false && (_jsx("button", { ref: handleRef, className: "sheet__handle", type: "button", "aria-label": typeof handle === 'string' ? handle : word('resize'), onClick: tap, onPointerDown: down, onPointerMove: move, onPointerUp: up, onPointerCancel: up })), children] }));
+    return (_jsxs("article", { ref: ref, className: cx('card sheet', `sheet--${shown}`, className), inert: current === 'away' || held || undefined, onFocus: focus, ...rest, children: [handle !== false && (_jsx("button", { ref: handleRef, className: "sheet__handle", type: "button", "aria-label": typeof handle === 'string' ? handle : word('resize'), onClick: tap, onPointerDown: down, onPointerMove: move, onPointerUp: up, onPointerCancel: up })), children] }));
 }

package/dist/type/textScale.d.ts

@@ -1,6 +1,14 @@
 /**
- * The member's text size: `--fs-base` on <html> as a share of the theme's own base (100 = as the theme set it).
- * Words grow, things keep their size. The base is read from the CSS (cardds's default or the project's theme.css) — never
- * copied into app code. Keeping the choice (localStorage, an account) is the app's.
+ * How much the CONTROLS grow for a text size (both a %, 100 = as the theme set it): half as fast as the words. A text-holder of
+ * a fixed size (a round with a number, a button, the top bar) is drawn for the theme's text — at a larger text the words outgrew
+ * it; growing the things at the same rate would zoom the whole UI and leave no room for content (Lh 2026-10-03, pairs set by
+ * measuring the gallery: 115 → 107.5 · 130 → 115 · 145 → 122.5 · 160 → 130). A smaller text never shrinks a control.
+ */
+export declare const controlsFor: (percent: number) => number;
+/**
+ * The member's text size: `--fs-base` on <html> as a share of the theme's own base (100 = as the theme set it), and with it
+ * `--tap-base` — the things grow half as much as the words (`controlsFor`), so a larger text still fits what holds it.
+ * The bases are read from the CSS (cardds's default or the project's theme.css) — never copied into app code. Keeping the choice
+ * (localStorage, an account) is the app's.
  */
 export declare function setTextScale(percent: number, root?: HTMLElement): void;

package/dist/type/textScale.js

@@ -1,12 +1,25 @@
 /**
- * The member's text size: `--fs-base` on <html> as a share of the theme's own base (100 = as the theme set it).
- * Words grow, things keep their size. The base is read from the CSS (cardds's default or the project's theme.css) — never
- * copied into app code. Keeping the choice (localStorage, an account) is the app's.
+ * How much the CONTROLS grow for a text size (both a %, 100 = as the theme set it): half as fast as the words. A text-holder of
+ * a fixed size (a round with a number, a button, the top bar) is drawn for the theme's text — at a larger text the words outgrew
+ * it; growing the things at the same rate would zoom the whole UI and leave no room for content (Lh 2026-10-03, pairs set by
+ * measuring the gallery: 115 → 107.5 · 130 → 115 · 145 → 122.5 · 160 → 130). A smaller text never shrinks a control.
+ */
+export const controlsFor = (percent) => 100 + Math.max(0, percent - 100) / 2;
+/**
+ * The member's text size: `--fs-base` on <html> as a share of the theme's own base (100 = as the theme set it), and with it
+ * `--tap-base` — the things grow half as much as the words (`controlsFor`), so a larger text still fits what holds it.
+ * The bases are read from the CSS (cardds's default or the project's theme.css) — never copied into app code. Keeping the choice
+ * (localStorage, an account) is the app's.
  */
 export function setTextScale(percent, root = document.documentElement) {
     root.style.removeProperty('--fs-base');
+    root.style.removeProperty('--tap-base');
     if (percent === 100)
         return;
-    const base = parseFloat(getComputedStyle(root).getPropertyValue('--fs-base')) || 1.375; // rem
-    root.style.setProperty('--fs-base', `${(base * percent) / 100}rem`);
+    const cs = getComputedStyle(root);
+    const fs = parseFloat(cs.getPropertyValue('--fs-base')) || 1.375, tap = parseFloat(cs.getPropertyValue('--tap-base')) || 3; // rem
+    root.style.setProperty('--fs-base', `${(fs * percent) / 100}rem`);
+    const controls = controlsFor(percent);
+    if (controls !== 100)
+        root.style.setProperty('--tap-base', `${(tap * controls) / 100}rem`);
 }

package/package.json

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