@usableapp/cardds 0.7.15 → 0.7.16

package/dist/cardds.css

@@ -89,7 +89,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 */
@@ -136,6 +136,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 */
@@ -439,7 +442,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;
@@ -532,7 +535,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.
@@ -748,8 +751,7 @@ button { font: inherit; cursor: pointer; }
      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;
@@ -760,9 +762,8 @@ button { font: inherit; cursor: pointer; }
 
 /* ---- 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>
@@ -835,14 +836,10 @@ button { font: inherit; cursor: pointer; }
   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; } }
@@ -1149,9 +1146,6 @@ button { font: inherit; cursor: pointer; }
   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;
@@ -1160,6 +1154,12 @@ button { font: inherit; cursor: pointer; }
   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;
@@ -1219,13 +1219,6 @@ button { font: inherit; cursor: pointer; }
    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); }
 
@@ -1619,9 +1612,8 @@ button { font: inherit; cursor: pointer; }
    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 {
@@ -1639,23 +1631,22 @@ button { font: inherit; cursor: pointer; }
   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; } }
@@ -1755,8 +1746,6 @@ button { font: inherit; cursor: pointer; }
 .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;
@@ -1768,12 +1757,12 @@ button { font: inherit; cursor: pointer; }
    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"):
@@ -1944,7 +1933,7 @@ button { font: inherit; cursor: pointer; }
 .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)); }
 
@@ -1958,7 +1947,7 @@ button { font: inherit; cursor: pointer; }
   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) */
@@ -1976,7 +1965,7 @@ button { font: inherit; cursor: pointer; }
   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); }
 
 /* ---- css/actions.css — topbar, chips, buttons, CTA pack ---- */
 /* ============================================================
@@ -2053,7 +2042,7 @@ button { font: inherit; cursor: pointer; }
   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); }
@@ -2315,6 +2304,29 @@ button { font: inherit; cursor: pointer; }
 .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; }
+}
+
 /* ---- css/numbers.css — ring, track, band, dot grid, picker, badge, bars ---- */
 /* ============================================================
    cardds/numbers.css — big numbers inside cards:
@@ -2351,7 +2363,7 @@ button { font: inherit; cursor: pointer; }
 }
 .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) */
@@ -2404,6 +2416,7 @@ button { font: inherit; cursor: pointer; }
   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); }
 
@@ -2425,7 +2438,7 @@ button { font: inherit; cursor: pointer; }
 }
 .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 {
@@ -2524,7 +2537,7 @@ button { font: inherit; cursor: pointer; }
 }
 .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); }
@@ -2625,7 +2638,7 @@ button { font: inherit; cursor: pointer; }
 .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) */
@@ -2670,7 +2683,8 @@ button { font: inherit; cursor: pointer; }
 }
 .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); }
 
 /* ---- css/choice.css — check, toggle, toggle chip, chip grid, days, calendar, mood, pin, composer ---- */
 /* ============================================================
@@ -2814,7 +2828,7 @@ button { font: inherit; cursor: pointer; }
 .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));
@@ -2917,7 +2931,7 @@ button { font: inherit; cursor: pointer; }
 .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>
@@ -3260,7 +3274,7 @@ button { font: inherit; cursor: pointer; }
 .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>
@@ -3286,11 +3300,10 @@ button { font: inherit; cursor: pointer; }
   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; }
@@ -3298,7 +3311,7 @@ button { font: inherit; cursor: pointer; }
 .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 {
@@ -3322,7 +3335,7 @@ button { font: inherit; cursor: pointer; }
    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;
@@ -3499,7 +3512,7 @@ button { font: inherit; cursor: pointer; }
 /* ============================================================
    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.
    ============================================================ */
 
@@ -3570,7 +3583,7 @@ button { font: inherit; cursor: pointer; }
   --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) {
@@ -3642,7 +3655,7 @@ button { font: inherit; cursor: pointer; }
   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;
@@ -3753,8 +3766,7 @@ button { font: inherit; cursor: pointer; }
 }
 /* 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 ----
@@ -3788,18 +3800,7 @@ button { font: inherit; cursor: pointer; }
   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/dist/cards/Card.d.ts

@@ -8,7 +8,7 @@ export interface CardProps extends ComponentProps<'article'> {
     row?: boolean;
     /** the image IS the card: a Placeholder or img first, text over a scrim */
     cover?: boolean;
-    /** a sticky-note corner, no border (swipe decks, quotes) */
+    /** a sticky-note corner, no border (quotes) */
     fold?: boolean;
     /** one card at the human centre of a `Screen fill` (the introduction screens) */
     centre?: boolean;

package/dist/choice/Calendar.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useControlled } from '../state.js';
 import { cx } from '../cx.js';
 import { IconBtn } from '../actions/IconBtn.js';
 /** Calendar — a month grid of 44px round cells: one accent day, optional marks; prev/next in the head. It shows ONE month and knows no dates:
  *  the app owns which month (`title`, `days`, `start` + `onPrev` / `onNext`) and which day (`selected` + `onSelect`, or `defaultSelected`). */
 export function Calendar({ title, days = 30, start = 1, selected, defaultSelected, onSelect, onPrev, onNext, prevLabel = 'Previous', nextLabel = 'Next', marks = [], marks2 = [], disabled = [], weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], nav, className, ...rest }) {
-    const [inner, setInner] = useState(defaultSelected);
-    const day = selected !== undefined ? selected : inner;
-    const pick = (d) => { if (selected === undefined)
-        setInner(d); onSelect?.(d); };
+    const [day, setOwn] = useControlled(selected, defaultSelected);
+    const pick = (d) => { setOwn(d); onSelect?.(d); };
     return (_jsxs("div", { className: cx('calendar', className), ...rest, children: [_jsxs("div", { className: "calendar__head", children: [_jsx("span", { className: "t-title", children: title }), nav ?? (_jsxs("span", { className: "icon-row", children: [_jsx(IconBtn, { sm: true, icon: "chevron-left", label: prevLabel, onClick: onPrev }), _jsx(IconBtn, { sm: true, icon: "chevron-right", label: nextLabel, onClick: onNext })] }))] }), _jsxs("div", { className: "calendar__grid", children: [weekdays.map((d) => _jsx("span", { className: "calendar__wd", children: d }, d)), Array.from({ length: days }, (_, i) => i + 1).map((d) => (_jsx("button", { type: "button", className: cx('calendar__day', marks.includes(d) && 'calendar__day--mark', marks2.includes(d) && 'calendar__day--mark2'), "aria-selected": d === day ? 'true' : undefined, onClick: () => pick(d), disabled: disabled.includes(d), style: d === 1 ? { '--start': start } : undefined, children: d }, d)))] })] }));
 }

package/dist/choice/Mood.d.ts

@@ -1,11 +1,16 @@
 import type { ComponentProps } from 'react';
-export interface MoodProps extends Omit<ComponentProps<'fieldset'>, 'onChange'> {
+type MoodValue = 1 | 2 | 3 | 4 | 5;
+export interface MoodProps extends Omit<ComponentProps<'fieldset'>, 'onChange' | 'defaultValue'> {
     /** the radio group name */
     name?: string;
-    /** the picked dot, 1 (worst) to 5 (best) */
-    value?: 1 | 2 | 3 | 4 | 5;
+    /** CONTROLLED: the picked dot, 1 (worst) to 5 (best) — with `onChange`; or `defaultValue` */
+    value?: MoodValue;
+    /** UNCONTROLLED: the dot picked on arrival; the Mood then keeps its own */
+    defaultValue?: MoodValue;
     label?: string;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** the dot the member tapped */
+    onChange?: (value: MoodValue) => void;
 }
 /** Mood — five dots in a pill from bad to good; the picked one grows. */
-export declare function Mood({ name, value, label, onChange, className, ...rest }: MoodProps): import("react").JSX.Element;
+export declare function Mood({ name, value, defaultValue, label, onChange, className, ...rest }: MoodProps): import("react").JSX.Element;
+export {};

package/dist/choice/Mood.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
+import { useControlled } from '../state.js';
 /** Mood — five dots in a pill from bad to good; the picked one grows. */
-export function Mood({ name = 'mood', value, label = 'Mood', onChange, className, ...rest }) {
-    return (_jsx("fieldset", { className: cx('mood', className), "aria-label": label, ...rest, children: [1, 2, 3, 4, 5].map((n) => (_jsxs("label", { className: "mood__opt", children: [_jsx("input", { type: "radio", name: name, value: n, defaultChecked: n === value, onChange: onChange }), _jsx("span", { className: "mood__dot" })] }, n))) }));
+export function Mood({ name = 'mood', value, defaultValue, label = 'Mood', onChange, className, ...rest }) {
+    const [picked, setOwn] = useControlled(value, defaultValue);
+    return (_jsx("fieldset", { className: cx('mood', className), "aria-label": label, ...rest, children: [1, 2, 3, 4, 5].map((n) => (_jsxs("label", { className: "mood__opt", children: [_jsx("input", { type: "radio", name: name, value: n, checked: n === picked, onChange: () => { setOwn(n); onChange?.(n); } }), _jsx("span", { className: "mood__dot" })] }, n))) }));
 }

package/dist/forms/Pin.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+import { useControlled } from '../state.js';
 import { cx } from '../cx.js';
 import { useCheck } from './check.js';
 const RESET_MS = 900; // a code that does not match: red + shake this long, then the cells empty for a new try
@@ -11,12 +12,12 @@ const RESET_MS = 900; // a code that does not match: red + shake this long, then
  */
 export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onChange, autoFocus, error, match, formatError, secret, className, onAnimationEnd, ...rest }) {
     const ref = useRef(null);
-    const [inner, setInner] = useState(defaultValue);
-    const code = (value ?? inner).replace(/\D/g, '').slice(0, length);
+    const [typed, setOwn] = useControlled(value, defaultValue);
+    const code = typed.replace(/\D/g, '').slice(0, length);
     const cell = (i) => ref.current?.querySelectorAll('.pin__cell')[i];
     /* a miss — a match that failed, or the app's error: shake, red, then the cells empty for a new try on the same step */
-    const latest = useRef({ value, onChange, error });
-    latest.current = { value, onChange, error };
+    const latest = useRef({ setOwn, onChange, error });
+    latest.current = { setOwn, onChange, error };
     const miss = () => {
         restart.current = true;
         setShake(true);
@@ -25,8 +26,7 @@ export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onC
             setBad(false);
             setCleared(latest.current.error);
             restart.current = false;
-            if (latest.current.value === undefined)
-                setInner('');
+            latest.current.setOwn('');
             latest.current.onChange?.('', false);
             cell(0)?.focus();
         }, RESET_MS);
@@ -46,8 +46,7 @@ export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onC
             said.current = true;
             miss();
         }
-        if (value === undefined)
-            setInner(next);
+        setOwn(next);
         if (next !== code)
             onChange?.(next, next.length === length);
     };

package/dist/index.d.ts

@@ -4,6 +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 * from './scaffold/Screen.js';
 export * from './scaffold/AppBar.js';
 export * from './scaffold/TopBar.js';
@@ -72,7 +73,6 @@ export * from './media/Tile.js';
 export * from './media/Mosaic.js';
 export * from './layover/Banner.js';
 export * from './layover/Callout.js';
-export * from './layover/Deck.js';
 export * from './journey/Route.js';
 export * from './journey/TileBadge.js';
 export * from './journey/NoteRow.js';

package/dist/index.js

@@ -8,6 +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 * from './scaffold/Screen.js';
 export * from './scaffold/AppBar.js';
 export * from './scaffold/TopBar.js';
@@ -76,7 +77,6 @@ export * from './media/Tile.js';
 export * from './media/Mosaic.js';
 export * from './layover/Banner.js';
 export * from './layover/Callout.js';
-export * from './layover/Deck.js';
 export * from './journey/Route.js';
 export * from './journey/TileBadge.js';
 export * from './journey/NoteRow.js';

package/dist/lists/Row.d.ts

@@ -41,7 +41,8 @@ export interface RowProps extends Omit<ComponentProps<'div'>, 'title'> {
  */
 export declare function Row({ lead, leadIcon, title, meta, body, end, endValue, endCaption, lg, done, as, href, more, open, defaultOpen, onOpenChange, className, children, ...rest }: RowProps): import("react").JSX.Element;
 export interface RowsProps extends ComponentProps<'div'> {
-    /** the group's name, above its rows (Today · Tomorrow · Later): a long list is GROUPED, not spaced out — several Rows one after another */
+    /** the group's name, above its rows (Today · Tomorrow · Later): a long list is GROUPED, not spaced out — several Rows one after another.
+     *  Words = the small label; an ELEMENT (`<Text level="title" as="h3">`) is used as the heading itself — the group is labelled by it. */
     heading?: ReactNode;
 }
 /** Rows — a list of Rows separated by hairlines; `heading` names the group (a `role="group"` labelled by it). */

package/dist/lists/Row.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, useId } from 'react';
+import { cloneElement, createElement, isValidElement, useId } from 'react';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 /**
@@ -22,5 +22,5 @@ export function Row({ lead, leadIcon, title, meta, body, end, endValue, endCapti
 export function Rows({ heading, className, children, ...rest }) {
     const id = useId();
     const named = heading != null;
-    return (_jsxs("div", { className: cx('rows', className), role: named ? 'group' : undefined, "aria-labelledby": named ? id : undefined, ...rest, children: [named && _jsx("span", { className: "rows__head", id: id, children: heading }), children] }));
+    return (_jsxs("div", { className: cx('rows', className), role: named ? 'group' : undefined, "aria-labelledby": named ? id : undefined, ...rest, children: [named && (isValidElement(heading) ? cloneElement(heading, { id }) : _jsx("span", { className: "rows__head", id: id, children: heading })), children] }));
 }

package/dist/media/Postcard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useControlled } from '../state.js';
 import { cx } from '../cx.js';
 import { IconBtn } from '../actions/IconBtn.js';
 /**
@@ -9,10 +9,8 @@ import { IconBtn } from '../actions/IconBtn.js';
  * Who else liked it, a voice note, a reply go OUTSIDE it — a Row under it (`Row more` expands the list).
  */
 export function Postcard({ photo, alt = '', name, line, caption, voice, flipped, defaultFlipped = false, onFlip, liked, onLike, likeLabel = 'ถูกใจ', frontLabel = 'พลิกดูด้านหลัง', backLabel = 'พลิกดูด้านหน้า', className, ...rest }) {
-    const [inner, setInner] = useState(defaultFlipped);
-    const back = flipped ?? inner;
-    const turn = () => { if (flipped === undefined)
-        setInner(!back); onFlip?.(!back); };
+    const [back, setOwn] = useControlled(flipped, defaultFlipped);
+    const turn = () => { setOwn(!back); onFlip?.(!back); };
     const words = (_jsxs("div", { className: "postcard__words", children: [_jsx("span", { className: "t-h1", children: name }), line != null && _jsx("span", { className: "t-body", children: line })] }));
     return (_jsxs("div", { className: cx('postcard', back && 'is-flipped', className), ...rest, children: [_jsxs("div", { className: "postcard__face postcard__front", children: [_jsx("button", { className: "postcard__turn", type: "button", "aria-label": frontLabel, onClick: turn, children: photo ? _jsx("img", { src: photo, alt: alt }) : alt ? _jsx("div", { className: "ph", role: "img", "aria-label": alt }) : _jsx("div", { className: "ph" }) }), _jsxs("div", { className: "postcard__band", children: [words, (liked !== undefined || onLike) && _jsx(IconBtn, { invert: true, icon: "heart", label: likeLabel, "aria-pressed": !!liked, onClick: () => onLike?.(!liked) })] })] }), _jsxs("div", { className: "postcard__face postcard__back", children: [_jsxs("button", { className: "postcard__turn", type: "button", "aria-label": backLabel, onClick: turn, children: [words, caption != null && _jsx("p", { className: "postcard__caption", children: caption })] }), voice != null && _jsx("div", { className: "postcard__voice", children: voice })] })] }));
 }