@usableapp/cardds 0.7.15 → 0.7.16

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 > 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.16 — 2026-09-25
+
+Refactor + additions. Same props, same markup, same computed style on every story.
+
+### Added
+- `setTextScale(percent, root?)` — the member's text size as a share of the theme's `--fs-base` (100 = the theme's own). It reads the base from the CSS, so an app no longer copies `1.375rem`. Keeping the choice (localStorage…) stays the app's.
+
+- PRESS: every control (Btn, IconBtn, Fab, Link, a/button Chip, ChipPick, Tile as button/link/pick, Day, SegmentItem, Calendar day, FloatBarItem, AvatarPickItem, AddRow, Picker item, StackBack, Dropdown, AppBar brand, MenuItem) gives under the finger (`--press-scale` 0.96, `--motion-press` 0.12s, off under reduced motion) and shows a focus ring; a choice's fill fades in. Zero specificity (`:where`), so a component's own rule wins.
+- `Rows heading` takes an ELEMENT too: `<Rows heading={<Text level="title" as="h3">…</Text>}>` — that h3 is the group's name (role=group, aria-labelledby). Words still give the small label. Drop a hand-written `role="group" aria-label`.
+- Token `--dim` (0.7): the one share secondary words fade to on the dark card, a drawer, a tile's sub line (was 14 hand-typed `opacity: 0.7`). A theme sets it once.
+- `TrackStep num` — the step's number in the round instead of an Icon (the `.track__dot` look existed in CSS with no way in; story Track · Numbered).
+- `AvatarPickItem selected` (aria-pressed; the picked person's avatar fills with the accent).
+
+### Removed (breaking for anyone using them)
+- `Deck` and `DeckActions` (the swipe deck), the `.deck*` CSS and the `--deck-*` knobs — Lh 2026-09-26: no use case. Nothing replaces them; a card to pick from = `Card` + its own buttons.
+
+### Changed (may touch a screen)
+- `Mood` is controlled like every other control: `value` + `onChange(value)` or `defaultValue`. Before: `value` was only the starting dot and `onChange` got the input event. Move a starting value to `defaultValue`; read the number from `onChange`.
+- INFORMATION never looks tappable: `.tile` (a plain div) and `Avatar add` no longer set `cursor: pointer`.
+- Stories: Segment, DayStrip, FloatBar (buttons), AvatarPick answer a tap; the Chip filter row is `ChipPick`s (plain `Chip on` is a label, not a choice).
+
+### Changed (internal)
+- Every controlled/uncontrolled state (`value`+`onChange` or `defaultValue`, and the same for `state`, `open`, `at`, `tab`, `selected`, `flipped`) now runs on one internal hook, `useControlled`, instead of 12 hand copies.
+- Dev warnings (Icon, TopBar, Screen) share one `warnOnce`.
+- CSS: dead selectors removed (`.dropdown__trigger`, `.menu__item.is-on`, `.float-bar__item.is-on`), one overridden stack-head rule dropped, split rules merged. Two raw `0px` in the SheetSteps CSS → `0rem`.
+
 ## 0.7.15 — 2026-09-25
 
 ### Removed (breaking for anyone using them)

package/README.md

@@ -307,11 +307,9 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   above the centre (2 × (40% − the title bar)): a card taller than that is
   not a centred card — it is a plain scrolling `.screen` (the detail view).
 - **A small group at the same centre** — an empty state; a card with its quiet
-  second button and the pager dots under it; a deck with its two round
-  buttons — is `.screen__centre` (React: `Centre`), a block in the fill
+  second button and the pager dots under it — is `.screen__centre` (React: `Centre`), a block in the fill
   screen after the topbar. Same placement and cap; it runs edge to edge with
-  the inset as padding, so a deck's fanned cards may overhang and clip at the
-  screen's edges (the fold visual, not a bug), and stacks its children at the
+  the inset as padding, and stacks its children at the
   screen's gap. Never hand-lay `top: 40%` on a screen.
 - **The bar is the screen's bottom.** Plain `.action-bar` for one move; with a
   control that belongs to the screen (a slider), `.action-bar--tiers` stacks a
@@ -588,8 +586,8 @@ Rules:
   theme's values are the project's call. The derivations are only starting points;
   any role can be set outright.
 - The member's text-size setting is the same `--fs-base`, written on `<html>`
-  by the app at run time (2.2rem = 160%): the words grow, the things keep their
-  size. (`--text-scale`, which multiplied the root and zoomed the UI too, is gone.)
+  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.)
 
 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.
@@ -619,8 +617,8 @@ whole system still resizes from one number: the root font size. `base.css` keeps
 default) and steps narrow phones (≤360px) to `93.75%`, which keeps the 25rem
 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 writes `--fs-base` on `<html>` (the type
-base, 1.375rem = 100%; 2.2rem = 160%): only the type and its holders (the count
+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.
 Components never write a raw length: spacing from `--sp-*`, control sizes from
 `--tap`, `--tap-lg`, `--btn-h`, `--bar-h`, `--header-h`, `--fab`, `--badge`, container

package/css/actions.css

@@ -72,7 +72,7 @@
   border-radius: var(--appbar-who-radius, var(--r-chip));
   -webkit-tap-highlight-color: transparent;
 }
-.appbar__who:focus-visible { outline: var(--focus); outline-offset: 2px; }
+.appbar__who:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 .appbar__title, .appbar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } /* clipped lines: room for Thai marks */
 .appbar__title { font: var(--type-label); }
 .appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
@@ -333,3 +333,26 @@
 .card .action-note { color: var(--action-note-ink, var(--card-muted)); }
 .action-note__words { display: block; } /* ONE run of words: an icon inside sits in the line, the spaces around it kept */
 .action-note__words > .icon { display: inline-block; vertical-align: -0.2em; width: 1.25em; height: 1.25em; margin-inline: 0.15em; color: var(--action-note-icon-ink, inherit); } /* a project may colour the icon apart from the words — e.g. the system blue of the control it points at (Lh 2026-09-24) */
+
+/* PRESS (Lh 2026-09-25): every CONTROL answers a tap — it gives under the finger and springs back, its choice fill fades in;
+   INFORMATION never does (no pointer, no press). One list, zero specificity: a component's own rule always wins. */
+:where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item,
+  .calendar__day, .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item) {
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: scale var(--motion-press) ease-out;
+}
+/* a CHOICE's fill fades in as it is picked (a button's colour never changes on a tap, so it does not fade) */
+:where(.chip--pick, .tile--pick, .day, .segment__item, .calendar__day, .float-bar__item, .menu__item) {
+  transition: scale var(--motion-press) ease-out, background-color var(--motion-press) ease-out, color var(--motion-press) ease-out, border-color var(--motion-press) ease-out;
+}
+:where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item,
+  .calendar__day, .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item):active:not(:disabled, [aria-disabled="true"]) {
+  scale: var(--press-scale);
+}
+:where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, a.tile, button.tile, .day, .segment__item, .calendar__day, .float-bar__item,
+  .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+@media (prefers-reduced-motion: reduce) {
+  :where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item,
+    .calendar__day, .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item):active { scale: none; }
+}

package/css/base.css

@@ -9,7 +9,7 @@
    the member wants to copy), and inputs are untouched. Native buttons and
    links are matched by element; the rest by the class that makes them one */
 button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--pick,
-.segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .dropdown__trigger, .track__step, .pager__at {
+.segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .track__step, .pager__at {
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
@@ -102,7 +102,7 @@ button { font: inherit; cursor: pointer; }
 
 .t-muted { color: var(--on-surface-muted); }
 .card .t-muted { color: var(--card-muted); } /* muted follows the card's ink, not the surface's */
-.card--3 .t-muted { color: inherit; opacity: 0.7; } /* card-muted is tuned for light cards; dim instead on the dark slot */
+.card--3 .t-muted { color: inherit; opacity: var(--dim); } /* card-muted is tuned for light cards; dim instead on the dark slot */
 .t-caps  { text-transform: uppercase; }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.

package/css/card.css

@@ -161,8 +161,7 @@
      one is there, and the screen's gap), or twice the room below it (the
      bar's reserve) — whichever is less. --_lead is the title bar's height
      only on a screen that HAS one: without a .topbar/.appbar before it the
-     block keeps that room (a deck and its two buttons, a card and its pager
-     under it, need it on a short phone; Lh, 2026-09-11). */
+     block keeps that room (a card and its pager under it needs it on a short phone; Lh, 2026-09-11). */
   --_lead: 0rem;
   max-height: calc(2 * min(var(--screen-centre) - var(--_lead) - var(--screen-gap), 100% - var(--screen-centre) - var(--bar-reserve)));
   overflow-y: auto;
@@ -173,9 +172,8 @@
 
 /* ---- centred block: the same place, for one thing to read that is not a
    lone card — an empty state, a card with its quiet second button and the
-   pager under it, a deck with its two round buttons. The block runs edge to
-   edge and keeps the screen's inset as padding, so a deck's fanned cards can
-   overhang and clip at the screen's edges (correct — the fold visual), and
+   pager under it. The block runs edge to
+   edge and keeps the screen's inset as padding, and
    its children stack at the screen's own rhythm (Lh, 2026-09-11):
    <div class="screen screen--fill"><header class="topbar">…</header>
      <div class="screen__centre"><article class="card">…</article><button class="btn btn--quiet btn--block">…</button></div>
@@ -248,14 +246,10 @@
   animation-timing-function: ease-out;
   mix-blend-mode: normal;
 }
-:root[data-slide="next"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-left; }
-:root[data-slide="next"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-right; }
-:root[data-slide="back"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-right; }
-:root[data-slide="back"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-left; }
-:root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
-:root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
-:root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
-:root[data-slide="back"]::view-transition-new(screen-in) { animation-name: centre-card-in-left; }
+:root[data-slide="next"]::view-transition-old(centre-card-out), :root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
+:root[data-slide="next"]::view-transition-new(centre-card-in), :root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(centre-card-out), :root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(centre-card-in), :root[data-slide="back"]::view-transition-new(screen-in) { animation-name: centre-card-in-left; }
 @keyframes centre-card-out-left  { to   { translate: -100% 0; opacity: 0; } }
 @keyframes centre-card-out-right { to   { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-right  { from { translate:  100% 0; opacity: 0; } }

package/css/choice.css

@@ -139,7 +139,7 @@
 .calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--calendar-head-gap, var(--sp-2)); }
 .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--calendar-grid-gap, var(--sp-1)); justify-items: center; }
 .calendar__wd { font: var(--calendar-wd-font, var(--type-caption)); color: var(--calendar-wd-ink, var(--card-muted)); padding-block: var(--calendar-wd-pad-y, var(--sp-2)); }
-.card--3 .calendar__wd { color: inherit; opacity: 0.7; }
+.card--3 .calendar__wd { color: inherit; opacity: var(--dim); }
 .calendar__day {
   width: 100%;
   max-width: var(--calendar-day-max-w, var(--tap));
@@ -242,7 +242,7 @@
 .composer__input::placeholder { color: inherit; opacity: 0.4; }
 .composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--composer-bar-gap, var(--sp-3)); }
 .composer__hint { font: var(--composer-hint-font, var(--type-caption)); color: var(--composer-hint-ink, var(--card-muted)); }
-.card--3 .composer__hint { color: inherit; opacity: 0.7; }
+.card--3 .composer__hint { color: inherit; opacity: var(--dim); }
 
 /* ---- slider: one value along a track, a thumb-size knob ----
    <label class="slider"><span class="slider__label">ขนาดตัวหนังสือ</span><input class="slider__range" type="range" min="100" max="160" step="15" aria-label="ขนาดตัวหนังสือ"></label>

package/css/journey.css

@@ -26,7 +26,7 @@
 .route__point--end .route__code::after { content: none; }
 .route__time { font: var(--route-time-font, var(--type-body)); font-variant-numeric: tabular-nums; }
 .route__place { font: var(--route-place-font, var(--type-caption)); color: var(--route-place-ink, var(--card-muted)); }
-.card--3 .route__place { color: inherit; opacity: 0.7; }
+.card--3 .route__place { color: inherit; opacity: var(--dim); }
 
 .route__via { grid-column: 2; grid-row: 2; align-self: center; display: flex; align-items: center; opacity: 0.65; font-size: var(--route-via-font-size, var(--fs-body)); }
 
@@ -40,7 +40,7 @@
   background: var(--tile-badge-bg, var(--card-3-bg));
   color: var(--tile-badge-ink, var(--card-3-ink));
 }
-.tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); opacity: 0.7; }
+.tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); opacity: var(--dim); }
 .tile-badge__value { font: 800 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
 
 /* plain: no fill — a date box beside a title (Jun / 18) */
@@ -58,4 +58,4 @@
   font: var(--note-row-font, var(--type-caption));
   color: var(--note-row-ink, var(--card-muted));
 }
-.card--3 .note-row { color: inherit; opacity: 0.7; }
+.card--3 .note-row { color: inherit; opacity: var(--dim); }

package/css/layover.css

@@ -1,7 +1,7 @@
 /* ============================================================
    cardds/layover.css — cards that lay OVER other content:
    Modal (ask) · popover menu · expanding banner · float bar ·
-   callout · swipe deck. The sheet (peek / half / full / page)
+   callout. The sheet (peek / half / full / page)
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
@@ -72,7 +72,7 @@
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
-.modal__drawer .t-caption { opacity: 0.7; }
+.modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
 .modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
 @media (prefers-reduced-motion: no-preference) {
@@ -144,7 +144,7 @@
   cursor: pointer;
 }
 .menu__item:hover, .menu__item:focus-visible { background: var(--ink-tint); outline: none; }
-.menu__item[aria-current], .menu__item.is-on { background: var(--accent); color: var(--on-accent); }
+.menu__item[aria-current] { background: var(--accent); color: var(--on-accent); }
 @supports (anchor-name: --a) {
   .menu[popover] {
     position-area: block-end span-inline-end;
@@ -255,8 +255,7 @@
 }
 /* aria-current="false" is the correct way to mark the OTHER tabs, so the
    bare attribute selector lights every one of them up */
-.float-bar__item[aria-current]:not([aria-current="false"]),
-.float-bar__item.is-on { background: var(--accent); color: var(--on-accent); opacity: 1; }
+.float-bar__item[aria-current]:not([aria-current="false"]) { background: var(--accent); color: var(--on-accent); opacity: 1; }
 .float-bar > .icon-btn { width: var(--bar-h); height: var(--bar-h); box-shadow: var(--shadow-float); }
 
 /* ---- callout: a small card with a tail — over a map, a media, a mascot ----
@@ -290,18 +289,7 @@
   border-left: 0;
 }
 .callout__title { font: var(--callout-title-font, var(--type-title)); }
-.callout__sub { font: var(--callout-sub-font, var(--type-caption)); opacity: 0.7; }
-/* ---- deck: swipe cards; the last child is on top ----
-   <div class="deck"><article class="card">…</article><article class="card">…</article><article class="card card--fold">front</article></div>
-   <div class="deck__actions"><button class="icon-btn">×</button><button class="icon-btn icon-btn--invert">✓</button></div> */
-.deck { display: grid; place-items: center; padding: var(--deck-pad-top, var(--sp-4)) var(--deck-pad-x, var(--sp-4)) var(--deck-pad-bottom, var(--sp-6)); }
-.deck > .card { grid-area: 1 / 1; width: min(100%, 20rem); min-height: 12.5rem; transition: rotate 0.3s ease, translate 0.3s ease; }
-.deck > .card:nth-last-child(2) { rotate: -4deg; translate: calc(-1 * var(--sp-2)) var(--sp-2); opacity: 0.85; }
-.deck > .card:nth-last-child(3) { rotate: 5deg; translate: var(--sp-3) var(--sp-4); opacity: 0.6; }
-.deck > .card:nth-last-child(n + 4) { display: none; }
-.deck__actions { display: flex; justify-content: center; gap: var(--deck-actions-gap, var(--sp-8)); }
-.deck__actions > .icon-btn { width: var(--bar-h); height: var(--bar-h); }
-
+.callout__sub { font: var(--callout-sub-font, var(--type-caption)); opacity: var(--dim); }
 /* ---- splash: the app's mark at the human centre while it boots (Lh 2026-09-24) ----
    <section class="screen screen--fill splash"><div class="splash__group"><div class="splash__mark">{the app's lottie/img}</div>
      <p class="splash__text">…</p></div></section>

package/css/media.css

@@ -53,7 +53,7 @@
 .quote__text { margin: 0; font: var(--quote-text-font, var(--type-h1)); letter-spacing: var(--track-h1); text-wrap: balance; }
 .quote--sm .quote__text { font: var(--type-h2); letter-spacing: var(--track-h2); }
 .quote__by { font: var(--quote-by-font, var(--type-caption)); color: var(--quote-by-ink, var(--card-muted)); }
-.card--3 .quote__by { color: inherit; opacity: 0.7; }
+.card--3 .quote__by { color: inherit; opacity: var(--dim); }
 
 /* ---- tile grid: big square tiles — icon top, label bottom ----
    <div class="tile-grid"><button class="tile"><svg class="icon"/><span class="tile__label">Light</span></button>
@@ -79,11 +79,10 @@
   font: inherit;
   text-align: left;
   position: relative;
-  cursor: pointer;
 }
 .tile__label { font: var(--tile-label-font, var(--type-title)); }
 .tile__value { font: var(--tile-value-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
-.tile__sub { font: var(--tile-sub-font, var(--type-caption)); opacity: 0.7; }
+.tile__sub { font: var(--tile-sub-font, var(--type-caption)); opacity: var(--dim); }
 .tile__text { display: grid; gap: var(--tile-text-gap, var(--sp-0)); }
 .tile--on { background: var(--tile-on-bg, var(--accent)); color: var(--tile-on-ink, var(--on-accent)); border-color: transparent; }
 .tile--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
@@ -91,7 +90,7 @@
 .tile--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 .tile--wide { grid-column: 1 / -1; }
 /* stat: READ, not pressed — no frame of its own inside a card (a frame says "tap me"): icon · value · words on the card's ground */
-.tile--stat { border-color: transparent; background: none; padding-inline: 0; cursor: default; }
+.tile--stat { border-color: transparent; background: none; padding-inline: 0; }
 .tile--stat { min-height: var(--tile-stat-min-h, var(--avatar-xl)); gap: var(--tile-stat-gap, var(--sp-3)); grid-template-columns: auto 1fr; align-items: center; }
 /* upload: dashed, centred plus + label */
 .tile--upload {
@@ -115,7 +114,7 @@
    the corner read as a notch with a line through it rather than a lifted flap.
    The COLOUR goes transparent rather than the border going to 0, so the box
    keeps its geometry and a fold card still measures the same as the cards
-   beside it in a deck. */
+   beside it. */
 .card--fold {
   border-color: transparent;
   border-bottom-right-radius: 0;

package/css/numbers.css

@@ -33,7 +33,7 @@
 }
 .ring__value { font: var(--ring-value-font, var(--type-stat)); letter-spacing: var(--track-display); }
 .ring__label { font: var(--ring-label-font, var(--type-caption)); color: var(--ring-label-ink, var(--card-muted)); }
-.card--3 .ring__label { color: inherit; opacity: 0.7; }
+.card--3 .ring__label { color: inherit; opacity: var(--dim); }
 .ring--sm { --_size: var(--avatar-xl); --_w: var(--sp-3); }
 .ring--sm .ring__value { font: 800 var(--fs-2xl)/1 var(--font-display); }
 .ring--xs { --_size: var(--tap-sm); --_w: var(--dot-xs); } /* inline counter (step 3 of 5) */
@@ -86,6 +86,7 @@
   background: color-mix(in srgb, var(--_ink) 30%, transparent);
   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.is-done > .icon,
 .track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
 
@@ -107,7 +108,7 @@
 }
 .band__num small { font-size: 0.5em; font-weight: 700; margin-right: 0.1em; } /* unit or % */
 .band__foot { grid-area: foot; font: var(--band-foot-font, var(--type-caption)); color: var(--band-foot-ink, var(--card-muted)); }
-.card--3 .band__foot { color: inherit; opacity: 0.7; }
+.card--3 .band__foot { color: inherit; opacity: var(--dim); }
 /* band stack: ONE card boundary; bands are frameless inside it, a hairline
    between each. Bands may still carry slot tints (card--2 / card--3). */
 .band-stack {
@@ -206,7 +207,7 @@
 }
 .picker::after { left: auto; right: calc(100% / 3); }
 .picker__unit { font: var(--picker-unit-font, var(--type-caption)); color: var(--picker-unit-ink, var(--card-muted)); }
-.card--3 .picker__unit { color: inherit; opacity: 0.7; }
+.card--3 .picker__unit { color: inherit; opacity: var(--dim); }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
   .picker__item { opacity: 0.3; animation: picker-focus linear both; animation-timeline: view(x); }

package/css/people.css

@@ -31,7 +31,7 @@
 .avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
 /* outline avatar: no fill, an edge — icons in a ring, "add" slots */
 .avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
-.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); cursor: pointer; }
+.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); }
 /* accent avatar: the "+7" tail, the selected person */
 .avatar--on { background: var(--avatar-on-bg, var(--accent)); color: var(--avatar-on-ink, var(--on-accent)); }
 /* halo: faint concentric rings behind a hero avatar (decorative) */
@@ -76,4 +76,5 @@
 }
 .avatar-pick__name { font: var(--avatar-pick-name-font, var(--type-label)); font-size: var(--avatar-pick-name-font-size, var(--fs-sm)); }
 .avatar-pick__role { font: var(--avatar-pick-role-font, var(--type-caption)); color: var(--avatar-pick-role-ink, var(--card-muted)); margin-top: calc(-1 * var(--sp-1)); }
-.card--3 .avatar-pick__role { color: inherit; opacity: 0.7; }
+.avatar-pick__item[aria-pressed="true"] > .avatar { background: var(--avatar-pick-on-bg, var(--accent)); color: var(--avatar-pick-on-ink, var(--on-accent)); border-color: transparent; } /* the picked person */
+.card--3 .avatar-pick__role { color: inherit; opacity: var(--dim); }

package/css/sheet.css

@@ -380,9 +380,8 @@
    bottom of the body, each its title line. Every step has a thin rule on top. A step opens and folds as a 1fr ↔ 0fr grid row, so the pile rises and
    falls — no height is written. Nothing fades: done and next read at full ink. */
 .sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
-.sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; }
+.sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; position: relative; }
 .sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 1rem; } /* holds the cursor (and the phone's keyboard) while a step folds; font 1rem = the browser's own size, so iOS does not zoom to it */
-.sheet-steps { position: relative; }
 .sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
 
 .sheet-step {
@@ -400,23 +399,22 @@
   display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
   padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
   background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
-  border-top: var(--sheet-step-border-w, 0px) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
+  border-top: var(--sheet-step-border-w, 0rem) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
 }
-.sheet-step__summary { color: inherit; opacity: 0.8; }
 .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;
   background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
-.sheet-step__summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sheet-step__summary { color: inherit; opacity: 0.8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__check { margin-inline-start: auto; }
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
 .sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); }
 .sheet-step__inner > * { min-width: 0; }
 .sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
 .sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }
-.sheet-step__go { position: absolute; inset: min(0px, (var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.sheet-step__go { position: absolute; inset: min(0rem, (var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 /* the last step's finish, when the app gives one: under the steps */
 .sheet-steps__finish { display: grid; padding-top: var(--card-gap); }
 @media (prefers-reduced-motion: reduce) { .sheet-step { transition: none; } }

package/css/stack.css

@@ -243,9 +243,6 @@
   padding-left: 0;
   transition: padding-left 0.35s ease;
 }
-.sheet-stack--tap > .card.is-open > .card__head {
-  padding-left: calc(var(--tap-sm) + var(--sp-3));
-}
 .sheet-stack--tap .sheet-stack__back {
   position: absolute;
   left: 0;
@@ -254,6 +251,12 @@
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.35s ease, visibility 0.35s;
+  /* SMALL (see "the back button, SMALL" below) */
+  width: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
+  height: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
 }
 .sheet-stack--tap > .card.is-open .sheet-stack__back {
   opacity: 1;
@@ -313,13 +316,6 @@
    tappable"): a SMALL DISC — its ring kept, 32px instead of 44, the chevron in it at 20 — so the head gives it 32px + a gap
    (was 56px). Its tap target stays 44px: an invisible ::after around the disc. ---- */
 .sheet-stack--tap > .card.is-open > .card__head { padding-left: var(--stack-back-room, calc(var(--stack-back-size, calc(var(--tap-base) * 2 / 3)) + var(--sp-2))); }
-.sheet-stack--tap .sheet-stack__back {
-  width: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
-  height: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-}
 .sheet-stack--tap .sheet-stack__back > .icon { width: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); height: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); flex: none; } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
 .sheet-stack--tap .sheet-stack__back::after { content: ""; position: absolute; inset: calc((var(--stack-back-size, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2); }
 

package/css/step.css

@@ -90,8 +90,6 @@
 .step:has(> .sheet--peek) > :is(.page, .pages) { padding-bottom: var(--sheet-peek); }
 .step > :is(.page, .pages) {
   flex: 0 1 auto;
-}
-.step > :is(.page, .pages) {
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */
   overflow-y: auto;
@@ -103,12 +101,12 @@
    padding above AND below — so the words begin near the middle and, when a big text size runs them long, scroll up clear.
    The walk shows no scrollbar. */
 .step > .pages { margin: 0; scrollbar-width: none; touch-action: pan-y; } /* pan-y: the walk scrolls itself up and down; a sideways swipe is the Walkthrough's (it turns the page) */ /* the scrolling box is the whole content: from the step's top edge, edge to edge — no margin (Lh 2026-09-23) */
-.step > .pages > .page { padding-inline: var(--screen-pad); } /* the words keep the inset INSIDE it */
-.step > .pages > .page { margin-top: var(--_lead, 0rem); } /* the lead is each PAGE's margin (15% with no top, the screen's gap under a bar): the words start there and scroll up to the box's edge */
-.step > .pages::-webkit-scrollbar { display: none; }
 .step > .pages > .page {
+  padding-inline: var(--screen-pad); /* the words keep the inset INSIDE it */
+  margin-top: var(--_lead, 0rem); /* the lead is each PAGE's margin (15% with no top, the screen's gap under a bar): the words start there and scroll up to the box's edge */
   padding-bottom: var(--bottom-h, 0rem); /* exactly the bottom layer (measured by Screen): a page scrolls ONLY when the layer would cover its words, and then just far enough to clear them — at 100% nothing scrolls (Lh 2026-09-23) */
 }
+.step > .pages::-webkit-scrollbar { display: none; }
 
 /* ============================================================
    TOP + CONTENT in one flex column; BOTTOM is a LAYER over them (Lh 2026-09-23, second call — replaces "the bar is a row"):

package/css/theme.template.css

@@ -48,5 +48,6 @@
      --card-1-bg --card-1-ink  --card-2-bg --card-2-ink  --card-3-bg --card-3-ink   (three card tones)
      --card-border  --card-muted  --card-2-muted
      --accent --on-accent  --action-bg --action-ink --action-border
-     --pos --neg  --dot-a --dot-b */
+     --pos --neg  --dot-a --dot-b
+     --dim (0.7: how far secondary words fade on a dark card, a drawer, a tile's sub line — one share for all) */
 }

package/css/tokens.css

@@ -48,7 +48,7 @@
   --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 */
-  --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell, deck actions */
+  --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell */
   --header-h: calc(var(--tap-base) * 5 / 4);  /* 60 top bar — .topbar and .appbar alike */
   --card-pad-rest: var(--sp-5);  /* 20 a card's padding before any variant — .card publishes it as --card-pad; the sheet's peek strip is built from it where no card is in scope */
   --card-gap-rest: var(--sp-4);  /* 16 …and its gap */
@@ -95,6 +95,9 @@
   --motion-sheet: 0.35s;
   --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 */
+  --dim: 0.7; /* secondary words dimmed on a ground whose muted ink does not fit (the dark card --3, a drawer, a tile's sub line): ONE share for all */
+  --motion-press: 0.12s; /* a control giving under the finger and springing back (actions.css PRESS) */
+  --press-scale: 0.96;   /* how far it gives — a share of its size */
 
   /* ---- typography: one scale, rem so it follows the root ---- */
   --font-ui: "PK Nonthaburi", -apple-system, system-ui, sans-serif; /* fonts.css ships it; the rest is the fallback while it loads */

package/dist/actions/Dropdown.js

@@ -1,15 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, createContext, isValidElement, useContext, useRef, useState } from 'react';
+import { Children, createContext, isValidElement, useContext, useRef } from 'react';
+import { useControlled } from '../state.js';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 /* what a Menu tells its items: the value it holds (so the matching item marks itself current) and how to pick one */
 const MenuContext = createContext(null);
 /* a menu's value is controlled (`value` + `onChange`) or its own (`defaultValue`) — like an input */
 function useValue(value, defaultValue, onChange) {
-    const [inner, setInner] = useState(defaultValue);
-    const current = value ?? inner;
-    const pick = (next) => { if (value === undefined)
-        setInner(next); if (next !== current)
+    const [current, setOwn] = useControlled(value, defaultValue);
+    const pick = (next) => { setOwn(next); if (next !== current)
         onChange?.(next); };
     return [current, pick];
 }