@usableapp/cardds 0.7.44 → 0.7.46

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 > 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
+- **`Track` is as tall as the top bar, and a step is a mark, not a control** (Lh 2026-10-03): the pill is `--header-h` tall (60px, was 72) and each step's round is 32px (was 56 — the size of a control, it read as something to press), its glyph 18px, the connector 8px, a `num` at caption size. Nothing to change in a screen: same markup, same props. If your theme sets `--track-pad` or `--track-dot-font`, your value still wins — only the defaults moved (`--track-pad` 8px → 14px, `--track-dot-font` title → caption).
+
+### Added
+- **A `Track` as the screen's top** (Lh 2026-10-03): `<Screen fill top={<Track>…</Track>}>` — the progress of a task in several sheets stands where a bar would, in the screen's inset, and stays in sight over every sheet. A sheet at full stops 16px under it and never touches it — the same 16px it keeps from the screen's sides and from the status bar. Knobs `--track-top-gap` (16px, the room under it) · `--track-top-lead` (16px, the air over it, under the status bar). Stories `Track · OnTop` (numbers) · `OnTopIcons`.
+- **`CallSheet top`**: the template takes the Screen's `top` (before, it had none and could not be given one) — `<CallSheet top={<Track>…</Track>} …>`. Without it nothing changes: no top, the page starts at the lead.
+
 ## 0.7.44 — 2026-10-02
 
 ### Added

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

@@ -16,3 +16,4 @@
 @import url("css/lists.css");    /* row, rows, key-value, kv grid, timeline, legend, link */
 @import url("css/media.css");    /* cover card, quote, tile grid, fold, mosaic, wave */
 @import url("css/layover.css");  /* ask drawer, popover menu, banner, float bar, callout */
+@import url("css/finish.css");   /* light, shadow, edges — only under data-finish="lit" */

package/css/finish.css

@@ -0,0 +1,77 @@
+/* ============================================================
+   cardds/finish.css — FINISH: light, shadow and edges. A style of its own (Lh 2026-10-02: the plain
+   look read flat, "not finished"), apart from colour: palette.css says WHICH colours, this says how
+   the material is lit. Apply with <html data-finish="lit"> beside any palette (or none, or "own").
+   No attribute = nothing here applies — the flat look, unchanged.
+
+   The light comes from above:
+     - a thing that stands UP (card, sheet, button) has a lit top edge, a hairline ring and a shadow
+       that grows with its height: card 1 · sheet / float 2 — the layers cardds already has;
+     - a thing that is SUNK (a field, a pin cell) has its shadow inside, under its top edge;
+     - information inside a card stays flat: only a container or a control gets an edge.
+   Shadows are mixed from the ink (--on-surface), never plain black, so they sit in the palette.
+   ============================================================ */
+
+[data-finish="lit"] {
+  --_shade: var(--on-surface);
+  --finish-edge: inset 0 1px 0 rgb(255 255 255 / 0.55);                            /* the lit top edge */
+  --finish-ring: 0 0 0 1px color-mix(in srgb, var(--_shade) 7%, transparent);        /* the hairline round a raised thing */
+
+  /* the three shadows every component already reads — layered: one close and crisp, one far and soft */
+  --shadow-card: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 8%, transparent),
+    0 0.375rem 0.75rem -0.125rem color-mix(in srgb, var(--_shade) 8%, transparent),
+    0 1.25rem 2.5rem -0.75rem color-mix(in srgb, var(--_shade) 14%, transparent);
+  --shadow-float: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.5rem 1.25rem -0.25rem color-mix(in srgb, var(--_shade) 22%, transparent);
+  --shadow-sheet: var(--finish-edge), var(--finish-ring),
+    0 -1px 2px color-mix(in srgb, var(--_shade) 6%, transparent),
+    0 -0.75rem 2.5rem color-mix(in srgb, var(--_shade) 18%, transparent);
+
+  /* a control: its own small lift, and the sheen that runs down its face */
+  --finish-control: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.25rem 0.5rem -0.125rem color-mix(in srgb, var(--_shade) 12%, transparent);
+  --finish-control-down: var(--finish-ring), inset 0 1px 2px color-mix(in srgb, var(--_shade) 18%, transparent);
+  --finish-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 60%);
+  --finish-sunk: inset 0 1px 2px color-mix(in srgb, var(--_shade) 14%, transparent), 0 1px 0 rgb(255 255 255 / 0.5);
+
+  /* the shadow is the edge: the wireframe's lines step back (as in every colour palette) */
+  --card-border: transparent;
+  --action-border: transparent;
+  --outline: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+/* ---- raised: cards, sheets, the stack ---- */
+[data-finish="lit"] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
+[data-finish="lit"] .band-stack > .card--band { box-shadow: none; }
+/* a sheet lies on the floor and is lit from above: its shadow falls UP the screen, onto what it covers */
+[data-finish="lit"] .sheet { box-shadow: var(--sheet-shadow, var(--shadow-sheet)); }
+[data-finish="lit"] .modal { box-shadow: var(--modal-shadow, var(--shadow-float)); }
+[data-finish="lit"] .sheet-stack > .card,
+[data-finish="lit"] .sheet-stack > :not(.card, .sheet-stack__base) > .card { box-shadow: var(--shadow-sheet); }
+
+/* ---- controls: a filled button stands up, and goes down under the finger ---- */
+[data-finish="lit"] .btn:not(.btn--quiet),
+[data-finish="lit"] .icon-btn:not(.icon-btn-group > *, .stack-sheet__tab:not(.icon-btn--invert)) {
+  background-image: var(--finish-sheen);
+  box-shadow: var(--finish-control);
+}
+/* the main button throws its own colour */
+[data-finish="lit"] .btn--primary,
+[data-finish="lit"] .icon-btn--invert:not(.icon-btn-group > *) {
+  box-shadow: var(--finish-edge),
+    0 1px 2px color-mix(in srgb, var(--_shade) 20%, transparent),
+    0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);
+}
+[data-finish="lit"] :is(.btn:not(.btn--quiet), .icon-btn:not(.icon-btn-group > *, .stack-sheet__tab:not(.icon-btn--invert))):active:not(:disabled) {
+  background-image: none;
+  box-shadow: var(--finish-control-down);
+}
+[data-finish="lit"] .icon-btn-group { box-shadow: var(--finish-control); }
+[data-finish="lit"] .toggle { box-shadow: var(--finish-sunk); }
+[data-finish="lit"] .toggle::after { box-shadow: 0 1px 2px color-mix(in srgb, var(--_shade) 35%, transparent); }
+
+/* ---- sunk: what the member types into ---- */
+[data-finish="lit"] :is(.field, .pin__cell) { box-shadow: var(--finish-sunk); }

package/css/numbers.css

@@ -39,8 +39,12 @@
 .ring--xs .ring__value { font: var(--type-caption); }
 
 /* ---- track: step progress in a pill — done · done · todo ----
-   <ol class="track"><li class="track__step is-done">icon</li> …</ol> */
+   <ol class="track"><li class="track__step is-done">icon</li> …</ol>
+   As tall as the top bar (--header-h), and a step is a MARK, not a control: its round is well under
+   the tap floor, so it reads as progress and never as something to press (Lh 2026-10-03). */
 .track {
+  --_step: calc(var(--tap-base) * 2 / 3); /* 32 the round of one step */
+  --_pad: calc((var(--header-h) - var(--_step)) / 2); /* 14 round + its room = the top bar's height; the end rounds sit concentric in the pill */
   --_bg: var(--card-3-bg);
   --_ink: var(--card-3-ink);
   /* the track lays down its own dark ground, so like the dark card slot it
@@ -51,7 +55,7 @@
   --on-accent: var(--_bg);
   list-style: none;
   margin: 0;
-  padding: var(--track-pad, var(--sp-2));
+  padding: var(--track-pad, var(--_pad));
   display: flex;
   align-items: center;
   border-radius: var(--track-radius, var(--r-chip));
@@ -70,22 +74,22 @@
 .track__step::before {
   content: "";
   flex: 1;
-  height: var(--sp-3);
+  height: var(--sp-2);
   background: var(--ink-rail); /* the track's own ink at 30% — identical to color-mix(in srgb, var(--_ink) 30%, transparent): --ink-rail already reads currentColor, and .track sets color to --_ink */
 }
 .track__step:first-child::before { display: none; }
 .track__step.is-done::before { background: var(--accent); }
 .track__step > .icon,
 .track__step > .track__dot {
-  width: var(--tap-lg);
-  height: var(--tap-lg);
+  width: var(--_step);
+  height: var(--_step);
   flex: none;
-  padding: calc((var(--tap-lg) - var(--icon)) / 2);
+  padding: calc(var(--_step) * 7 / 32); /* the glyph = 18 in the 32 round */
   border-radius: 50%;
   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-title)); font-variant-numeric: tabular-nums; } /* a number in the round (TrackStep num) */
+.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.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/step.css

@@ -141,6 +141,15 @@
    them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
+/* a TRACK as the screen's TOP (Lh 2026-10-03): the walk's progress stands where a bar would, a row of the column, in the screen's
+   inset — and it never touches what comes up under it: the step (and so a sheet at full) starts --track-top-gap below it. That
+   room is the track's own, not the screen's gap; --track-top-lead is the air over it, under the status bar. Both = the screen's side inset (16): the pill
+   stands the same distance from everything around it (Lh 2026-10-03: 8 over was too little, 24 under too much). */
+.screen--fill > .track:first-child {
+  flex: none;
+  margin-top: var(--track-top-lead, var(--sp-4));
+  margin-bottom: calc(var(--track-top-gap, var(--sp-4)) - var(--screen-gap));
+}
 /* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
    the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
 .step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }

package/css/tokens.css

@@ -46,7 +46,7 @@
   --tap-floor: 2.75rem; /* 44 the HIG floor — no --tap-base takes a touch target under it */
   --tap: max(var(--tap-floor), var(--tap-base));                       /* 48 primary touch target */
   --tap-sm: max(var(--tap-floor), calc(var(--tap-base) * 11 / 12));    /* 44 minimum touch target */
-  --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: track steps, send, field with action */
+  --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: send, field with action */
   --btn-h: calc(var(--tap-base) * 13 / 12);   /* 52 button height */
   --btn-xl-h: calc(var(--tap-base) * 11 / 6); /* 88 the one giant CTA */
   --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */

package/dist/cardds.css

@@ -87,7 +87,7 @@
   --tap-floor: 2.75rem; /* 44 the HIG floor — no --tap-base takes a touch target under it */
   --tap: max(var(--tap-floor), var(--tap-base));                       /* 48 primary touch target */
   --tap-sm: max(var(--tap-floor), calc(var(--tap-base) * 11 / 12));    /* 44 minimum touch target */
-  --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: track steps, send, field with action */
+  --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: send, field with action */
   --btn-h: calc(var(--tap-base) * 13 / 12);   /* 52 button height */
   --btn-xl-h: calc(var(--tap-base) * 11 / 6); /* 88 the one giant CTA */
   --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */
@@ -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; }
@@ -1899,6 +1901,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
+/* a TRACK as the screen's TOP (Lh 2026-10-03): the walk's progress stands where a bar would, a row of the column, in the screen's
+   inset — and it never touches what comes up under it: the step (and so a sheet at full) starts --track-top-gap below it. That
+   room is the track's own, not the screen's gap; --track-top-lead is the air over it, under the status bar. Both = the screen's side inset (16): the pill
+   stands the same distance from everything around it (Lh 2026-10-03: 8 over was too little, 24 under too much). */
+.screen--fill > .track:first-child {
+  flex: none;
+  margin-top: var(--track-top-lead, var(--sp-4));
+  margin-bottom: calc(var(--track-top-gap, var(--sp-4)) - var(--screen-gap));
+}
 /* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
    the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
 .step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }
@@ -2516,8 +2527,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .ring--xs .ring__value { font: var(--type-caption); }
 
 /* ---- track: step progress in a pill — done · done · todo ----
-   <ol class="track"><li class="track__step is-done">icon</li> …</ol> */
+   <ol class="track"><li class="track__step is-done">icon</li> …</ol>
+   As tall as the top bar (--header-h), and a step is a MARK, not a control: its round is well under
+   the tap floor, so it reads as progress and never as something to press (Lh 2026-10-03). */
 .track {
+  --_step: calc(var(--tap-base) * 2 / 3); /* 32 the round of one step */
+  --_pad: calc((var(--header-h) - var(--_step)) / 2); /* 14 round + its room = the top bar's height; the end rounds sit concentric in the pill */
   --_bg: var(--card-3-bg);
   --_ink: var(--card-3-ink);
   /* the track lays down its own dark ground, so like the dark card slot it
@@ -2528,7 +2543,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --on-accent: var(--_bg);
   list-style: none;
   margin: 0;
-  padding: var(--track-pad, var(--sp-2));
+  padding: var(--track-pad, var(--_pad));
   display: flex;
   align-items: center;
   border-radius: var(--track-radius, var(--r-chip));
@@ -2547,22 +2562,22 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .track__step::before {
   content: "";
   flex: 1;
-  height: var(--sp-3);
+  height: var(--sp-2);
   background: var(--ink-rail); /* the track's own ink at 30% — identical to color-mix(in srgb, var(--_ink) 30%, transparent): --ink-rail already reads currentColor, and .track sets color to --_ink */
 }
 .track__step:first-child::before { display: none; }
 .track__step.is-done::before { background: var(--accent); }
 .track__step > .icon,
 .track__step > .track__dot {
-  width: var(--tap-lg);
-  height: var(--tap-lg);
+  width: var(--_step);
+  height: var(--_step);
   flex: none;
-  padding: calc((var(--tap-lg) - var(--icon)) / 2);
+  padding: calc(var(--_step) * 7 / 32); /* the glyph = 18 in the 32 round */
   border-radius: 50%;
   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-title)); font-variant-numeric: tabular-nums; } /* a number in the round (TrackStep num) */
+.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.is-done > .icon,
 .track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
 
@@ -3987,3 +4002,82 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .snackbar__caption { font: var(--snackbar-caption-font, var(--type-caption)); opacity: var(--dim); }
 @media (prefers-reduced-motion: reduce) { .snackbar { transition: none; } }
 
+/* ---- css/finish.css — light, shadow, edges — only under data-finish="lit" ---- */
+/* ============================================================
+   cardds/finish.css — FINISH: light, shadow and edges. A style of its own (Lh 2026-10-02: the plain
+   look read flat, "not finished"), apart from colour: palette.css says WHICH colours, this says how
+   the material is lit. Apply with <html data-finish="lit"> beside any palette (or none, or "own").
+   No attribute = nothing here applies — the flat look, unchanged.
+
+   The light comes from above:
+     - a thing that stands UP (card, sheet, button) has a lit top edge, a hairline ring and a shadow
+       that grows with its height: card 1 · sheet / float 2 — the layers cardds already has;
+     - a thing that is SUNK (a field, a pin cell) has its shadow inside, under its top edge;
+     - information inside a card stays flat: only a container or a control gets an edge.
+   Shadows are mixed from the ink (--on-surface), never plain black, so they sit in the palette.
+   ============================================================ */
+
+[data-finish="lit"] {
+  --_shade: var(--on-surface);
+  --finish-edge: inset 0 1px 0 rgb(255 255 255 / 0.55);                            /* the lit top edge */
+  --finish-ring: 0 0 0 1px color-mix(in srgb, var(--_shade) 7%, transparent);        /* the hairline round a raised thing */
+
+  /* the three shadows every component already reads — layered: one close and crisp, one far and soft */
+  --shadow-card: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 8%, transparent),
+    0 0.375rem 0.75rem -0.125rem color-mix(in srgb, var(--_shade) 8%, transparent),
+    0 1.25rem 2.5rem -0.75rem color-mix(in srgb, var(--_shade) 14%, transparent);
+  --shadow-float: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.5rem 1.25rem -0.25rem color-mix(in srgb, var(--_shade) 22%, transparent);
+  --shadow-sheet: var(--finish-edge), var(--finish-ring),
+    0 -1px 2px color-mix(in srgb, var(--_shade) 6%, transparent),
+    0 -0.75rem 2.5rem color-mix(in srgb, var(--_shade) 18%, transparent);
+
+  /* a control: its own small lift, and the sheen that runs down its face */
+  --finish-control: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.25rem 0.5rem -0.125rem color-mix(in srgb, var(--_shade) 12%, transparent);
+  --finish-control-down: var(--finish-ring), inset 0 1px 2px color-mix(in srgb, var(--_shade) 18%, transparent);
+  --finish-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 60%);
+  --finish-sunk: inset 0 1px 2px color-mix(in srgb, var(--_shade) 14%, transparent), 0 1px 0 rgb(255 255 255 / 0.5);
+
+  /* the shadow is the edge: the wireframe's lines step back (as in every colour palette) */
+  --card-border: transparent;
+  --action-border: transparent;
+  --outline: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+/* ---- raised: cards, sheets, the stack ---- */
+[data-finish="lit"] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
+[data-finish="lit"] .band-stack > .card--band { box-shadow: none; }
+/* a sheet lies on the floor and is lit from above: its shadow falls UP the screen, onto what it covers */
+[data-finish="lit"] .sheet { box-shadow: var(--sheet-shadow, var(--shadow-sheet)); }
+[data-finish="lit"] .modal { box-shadow: var(--modal-shadow, var(--shadow-float)); }
+[data-finish="lit"] .sheet-stack > .card,
+[data-finish="lit"] .sheet-stack > :not(.card, .sheet-stack__base) > .card { box-shadow: var(--shadow-sheet); }
+
+/* ---- controls: a filled button stands up, and goes down under the finger ---- */
+[data-finish="lit"] .btn:not(.btn--quiet),
+[data-finish="lit"] .icon-btn:not(.icon-btn-group > *, .stack-sheet__tab:not(.icon-btn--invert)) {
+  background-image: var(--finish-sheen);
+  box-shadow: var(--finish-control);
+}
+/* the main button throws its own colour */
+[data-finish="lit"] .btn--primary,
+[data-finish="lit"] .icon-btn--invert:not(.icon-btn-group > *) {
+  box-shadow: var(--finish-edge),
+    0 1px 2px color-mix(in srgb, var(--_shade) 20%, transparent),
+    0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);
+}
+[data-finish="lit"] :is(.btn:not(.btn--quiet), .icon-btn:not(.icon-btn-group > *, .stack-sheet__tab:not(.icon-btn--invert))):active:not(:disabled) {
+  background-image: none;
+  box-shadow: var(--finish-control-down);
+}
+[data-finish="lit"] .icon-btn-group { box-shadow: var(--finish-control); }
+[data-finish="lit"] .toggle { box-shadow: var(--finish-sunk); }
+[data-finish="lit"] .toggle::after { box-shadow: 0 1px 2px color-mix(in srgb, var(--_shade) 35%, transparent); }
+
+/* ---- sunk: what the member types into ---- */
+[data-finish="lit"] :is(.field, .pin__cell) { box-shadow: var(--finish-sunk); }
+

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/templates/CallSheet.d.ts

@@ -21,10 +21,13 @@ export interface CallSheetWay {
     /** what that button brings up */
     sheet: CallSheetSheet;
 }
-export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'children' | 'fill' | 'top' | 'bottom' | 'title'> {
+export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'children' | 'fill' | 'bottom' | 'title'> {
+    /** TOP (optional, the Screen's own): none by default — the page starts at the lead (15%). A walk in several sheets may stand
+     *  its `Track` here: it stays in sight over every sheet, a full sheet stops under it. */
+    top?: ComponentProps<typeof Screen>['top'];
     /** a picture above the words (optional) */
     media?: ReactNode;
-    /** the page's one heading — its h1 (there is no top) */
+    /** the page's one heading — its h1 */
     heading: ReactNode;
     /** the words: a string is one paragraph */
     body?: ReactNode;
@@ -46,7 +49,7 @@ export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'chi
     children?: ReactNode;
 }
 /**
- * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
+ * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top (or the one given: `top`) · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
  * words · the button, or several — `ways`) and the `Sheet` each button calls · no bottom (a sheet finishes on its own foot). The page
  * starts at the screen's lead (15%). The sheets wait `away`; a button brings its own up full; the handle takes it down to peek.
  * One sheet up at a time — a sheet holds that way's WHOLE form.

package/dist/templates/CallSheet.js

@@ -12,7 +12,7 @@ import { Text } from '../type/Text.js';
 import { Btn } from '../actions/Btn.js';
 const index = (o) => (o === true ? 0 : typeof o === 'number' ? o : null);
 /**
- * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
+ * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top (or the one given: `top`) · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
  * words · the button, or several — `ways`) and the `Sheet` each button calls · no bottom (a sheet finishes on its own foot). The page
  * starts at the screen's lead (15%). The sheets wait `away`; a button brings its own up full; the handle takes it down to peek.
  * One sheet up at a time — a sheet holds that way's WHOLE form.

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.44",
+  "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.",