@usableapp/cardds 0.7.45 → 0.7.46

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 > 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.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/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/dist/cardds.css

@@ -1737,8 +1737,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; }

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/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.46",
   "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.",