@usableapp/cardds 0.7.15 → 0.7.17

package/css/numbers.css

@@ -33,7 +33,6 @@
 }
 .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; }
 .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) */
@@ -72,7 +71,7 @@
   content: "";
   flex: 1;
   height: var(--sp-3);
-  background: color-mix(in srgb, var(--_ink) 30%, transparent);
+  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); }
@@ -83,9 +82,10 @@
   flex: none;
   padding: calc((var(--tap-lg) - var(--icon)) / 2);
   border-radius: 50%;
-  background: color-mix(in srgb, var(--_ink) 30%, transparent);
+  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.is-done > .icon,
 .track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
 
@@ -107,7 +107,6 @@
 }
 .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; }
 /* 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 {
@@ -154,14 +153,6 @@
 @supports not (width: round(up, 1px, 1px)) {
   .dotgrid::before { display: none; }
 }
-.dotgrid--stars {
-  background-image: none;
-}
-.dotgrid--stars,
-.dotgrid--stars::before {
-  --_star: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
-}
-
 /* ---- picker: horizontal snap picker, centre value big ----
    <div class="picker"><div class="picker__rail"><button class="picker__item">100</button>…</div><span class="picker__unit">ml</span></div> */
 .picker { display: grid; gap: var(--picker-gap, var(--sp-1)); justify-items: center; position: relative; }
@@ -176,20 +167,15 @@
   grid-auto-columns: 100%;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
-  scrollbar-width: none;
   position: relative;
 }
-.picker__rail::-webkit-scrollbar { display: none; }
 .picker__item {
   scroll-snap-align: center;
-  border: 0;
-  background: transparent;
-  color: inherit;
   padding: var(--picker-item-pad-y, var(--sp-2)) var(--picker-item-pad-x, 0);
   font: var(--picker-item-font, var(--type-stat));
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
-  opacity: 0.3;
+  opacity: var(--faint);
   text-align: center;
 }
 .picker__item[aria-selected="true"] { opacity: 1; }
@@ -206,12 +192,11 @@
 }
 .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; }
 /* 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); }
+  .picker__item { animation: picker-focus linear both; animation-timeline: view(x); } /* opacity: var(--faint) already set above — the animation alone is new here */
   @keyframes picker-focus {
-    0%, 100% { opacity: 0.3; }
+    0%, 100% { opacity: var(--faint); }
     45%, 55% { opacity: 1; }
   }
 }

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) */
@@ -57,10 +57,8 @@
   display: flex;
   gap: var(--avatar-pick-gap, var(--sp-4));
   overflow-x: auto;
-  scroll-snap-type: x proximity;
-  scrollbar-width: none; /* starts at the card's padding edge, like every row */
+  scroll-snap-type: x proximity; /* starts at the card's padding edge, like every row */
 }
-.avatar-pick::-webkit-scrollbar { display: none; }
 .avatar-pick__item {
   scroll-snap-align: start;
   flex: none;
@@ -68,12 +66,8 @@
   display: grid;
   justify-items: center;
   gap: var(--avatar-pick-item-gap, var(--sp-2));
-  border: 0;
-  background: transparent;
-  color: inherit;
-  padding: 0;
   text-align: center;
 }
 .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 */

package/css/sheet.css

@@ -1,6 +1,6 @@
 /* ============================================================
    cardds/sheet.css — sheet single: one card as a bottom sheet.
-   Four states: .sheet--peek · .sheet--half · .sheet--3q · .sheet--full
+   Five states: .sheet--peek · .sheet--half · .sheet--3q · .sheet--full · .sheet--away
 
    A sheet is rigid material, exactly like a sheet in .sheet-stack--tap
    (stack.css): it is ALWAYS the full height of the box that holds it —
@@ -41,8 +41,8 @@
    the body. The handle and the head stay where they are at every
    state; the body is what scrolls — a sheet is a card whose head is
    pinned, not a scrolling column with a title somewhere in it.
-   cardds.js adds the handle's click / drag / keyboard and the focus
-   raise; without it every state still renders.
+   The Sheet component adds the handle's click / drag / keyboard and the
+   focus raise; without it every state still renders.
    ============================================================ */
 
 .sheet {
@@ -70,7 +70,7 @@
   position: absolute;
   inset: 0;
   top: var(--_top, 0);            /* a stage keeps its top bar's line free — see .sheet-stage */
-  translate: 0 calc(var(--_y) + var(--_drag, 0rem)); /* --_drag: cardds.js, only while the handle is held */
+  translate: 0 calc(var(--_y) + var(--_drag, 0rem)); /* --_drag: the Sheet component, only while the handle is held */
   transition: translate var(--motion-sheet) ease;
 
   /* handle · head · body: a column, the body takes what is left and scrolls
@@ -81,6 +81,7 @@
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
   box-shadow: var(--sheet-shadow, var(--shadow-sheet));
+  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -146,9 +147,8 @@
    takes no taps, its buttons do; the strip behind them is the sheet's ground, --_foot tall, and the body
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
-.sheet { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); }
 /* …and the link row under the button, when there is one (its line + the gap over it) */
-.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + calc(var(--tap-base) * 7 / 12) + var(--card-pad)); }
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) + var(--card-pad)); }
 .sheet > .card__foot {
   position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
   align-items: end;
@@ -174,7 +174,7 @@
 /* grab handle — first child of the sheet. Drawn as a small bar, but it is
    the thumb's grab area for the whole strip above the title: a pseudo widens
    its hit box to --tap tall and wider than the bar without changing the
-   picture. touch-action: none hands a touch drag to cardds.js instead of to
+   picture. touch-action: none hands a touch drag to the Sheet component instead of to
    the scroller behind it. */
 .sheet__handle {
   position: relative;
@@ -248,7 +248,7 @@
 .screen > .sheet-stage { margin-inline: calc(-1 * var(--screen-pad)); width: auto; } /* auto: 100% would keep the inset width */
 /* a stage laid OVER its screen (a Modal a link opened, Lh 2026-09-23): the page shows through, the stage covers it and its bar */
 .sheet-stage--over, .screen > .sheet-stage--over {
-  position: absolute; inset: 0; z-index: 40;
+  position: absolute; inset: 0; z-index: var(--z-top);
   width: auto; height: auto; max-width: none; margin: 0;
   background: transparent;
   --_top: 0rem;
@@ -305,7 +305,7 @@
   translate: -50% -50%;
   border-radius: 50%;
   border: var(--border-w) solid var(--map-ring-border, var(--accent));
-  background: var(--map-ring-bg, color-mix(in srgb, var(--accent) 22%, transparent));
+  background: var(--map-ring-bg, var(--accent-soft));
   box-shadow: var(--map-ring-shadow, var(--shadow-float));
   pointer-events: none;
   z-index: 1; /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
@@ -339,9 +339,6 @@
   z-index: 1;
 }
 
-/* raised: the sheet floats above a footnote strip on the scrim. Its bottom
-   edge shows, so it gets its corners and border back; full still stops at
-   the top bar's line, because the top edge never moved. */
 /* EVERY sheet has one shape (Lh, 2026-09-21): the handle and the head stay at the top and never scroll · the
    foot's button stands at the bottom, and ABOVE the keyboard when there is one · everything between them
    scrolls, as far as it needs to. In a .step the keyboard's room is the step's (--kb, step.css); on a stage
@@ -380,9 +377,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 {
@@ -390,6 +386,7 @@
   display: grid; grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
   flex: 0 0 auto;
   transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
+  --_row-h: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* the bar's own floor, read once (__head and __go below share it) */
 }
 /* the open step GROWS into the room left, so the steps not done yet wait in a pile at the bottom — and a move is an ACCORDION:
    in one beat the step that was open folds while the new one unfolds (flex-grow and the 1fr row both ease), the piles slide
@@ -397,26 +394,25 @@
 .sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
 .sheet-step + .sheet-step { margin-top: var(--sheet-steps-gap, var(--sp-1)); } /* the folded bars read as a pile, a little ground between them (Lh 2026-09-25) */
 .sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the white room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
-  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 */
+  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); /* 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(--_row-h) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; cursor: pointer; }
 /* 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

@@ -32,7 +32,7 @@
    bottom, the headroom above is the base's (block below).
    Direct children only, five at most (slots are :nth-child below):
    first = the back of the stack, last = the front. README "Sheet stack
-   markup". cardds.js opens and closes a --tap stack; without it the
+   markup". The SheetStack component opens and closes a --tap stack; without it the
    stack still renders, it just won't open.
    ============================================================ */
 
@@ -45,14 +45,14 @@
    track is being sized), so a long sheet grew the track past the screen and
    every sheet's 100% then resolved against that — the bottom of every open
    sheet sat below the screen, unreachable (timebank home, 2026-09-13). */
-.sheet-stack { display: grid; grid-template-rows: minmax(0, 1fr); --stack-step: 5.5rem; }
-
 /* the stack breaks out of the screen inset, edge to edge, always: the peek
    strips and the opened sheet span the screen's full width whatever the
    viewport (it used to bleed only under a 27em media query — a stack in a
    phone frame on a desktop kept the inset, and read as a narrower card;
-   Lh, 2026-09-11) */
-.sheet-stack { margin-inline: calc(-1 * var(--screen-pad)); }
+   Lh, 2026-09-11). --_n: how many sheets the stack holds, read from the DOM
+   by :has below so the closed geometry needs no script and no per-stack
+   declaration. */
+.sheet-stack { display: grid; grid-template-rows: minmax(0, 1fr); --stack-step: 5.5rem; margin-inline: calc(-1 * var(--screen-pad)); --_n: 1; }
 .sheet-stack > .card {
   grid-area: 1 / 1; /* every card shares the stack's cell; later ones offset down */
   border-bottom-left-radius: 0;
@@ -69,9 +69,6 @@
 .sheet-stack > .card:not(:has(~ .card)) {
   align-self: stretch; /* the front card fills the remaining stack height */
 }
-/* --_n: how many sheets the stack holds, read from the DOM by :has so the
-   closed geometry needs no script and no per-stack declaration */
-.sheet-stack { --_n: 1; }
 .sheet-stack:has(> .card:nth-child(2)) { --_n: 2; }
 .sheet-stack:has(> .card:nth-child(3)) { --_n: 3; }
 .sheet-stack:has(> .card:nth-child(4)) { --_n: 4; }
@@ -118,7 +115,6 @@
 /* fanned stack: a toggle opens the stack wider so every peek shows more */
 .sheet-stack--fanned { --stack-step: 9.5rem; }
 
-.sheet-stack > .card:has(~ .card) { cursor: pointer; }
 /* a peeked card in a plain stack hides its own body. A --tap stack does
    NOT: there, every card is full height and full content always, and a
    peek is simply the strip of it the next card doesn't cover — the way a
@@ -164,9 +160,10 @@
     by n steps (clipped by .screen--fill), so translating it up by exactly
     that much lands it filling the stack precisely. */
   overflow: clip;
-  transition: translate 0.35s ease; /* the only animated property here */
+  transition: translate var(--motion-sheet) ease; /* the only animated property here */
   transition-delay: calc(var(--stagger, 0) * 70ms); /* 0 for everything
     except a staggered is-before card, set in JS as it tucks or un-tucks */
+  --_back-size: var(--stack-back-size, calc(var(--tap-base) * 2 / 3)); /* read once, shared by the back button and the head's padding below */
 }
 .sheet-stack--tap > .card.is-open {
   /* up by its own resting offset — pure movement, nothing resizes */
@@ -188,9 +185,8 @@
   overscroll-behavior: contain;
 }
 /* a scrolling sheet shows no scrollbar (a desktop with a mouse would paint one
-   down the card's edge — Lh 2026-09-15); it still scrolls, like the page itself */
-.sheet-stack--tap > .card { scrollbar-width: none; }
-.sheet-stack--tap > .card::-webkit-scrollbar { display: none; }
+   down the card's edge — Lh 2026-09-15); it still scrolls, like the page itself
+   (the hiding rule is base.css's, shared with every other scrolling track) */
 .sheet-stack--tap > .card.is-before { translate: 0 var(--stack-step); }
 .sheet-stack--tap > .card.is-after { translate: 0 100vh; }
 
@@ -209,7 +205,7 @@
    lands flush at the top. is-before tucks one step below its resting place.
    ============================================================ */
 .sheet-stack--closed { --_headroom: calc(100% - var(--_n) * var(--stack-step)); }
-.sheet-stack--closed > .card { translate: 0 var(--_headroom); cursor: pointer; }
+.sheet-stack--closed > .card { translate: 0 var(--_headroom); }
 .sheet-stack--closed > .card.is-before { translate: 0 calc(var(--_headroom) + var(--stack-step)); }
 .sheet-stack--closed > .card.is-open { translate: 0 calc(-1 * var(--slot, 0) * var(--stack-step)); }
 .sheet-stack--closed > .card.is-after { translate: 0 100vh; }
@@ -241,10 +237,7 @@
 .sheet-stack--tap .card__head {
   position: relative;
   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));
+  transition: padding-left var(--motion-sheet) ease;
 }
 .sheet-stack--tap .sheet-stack__back {
   position: absolute;
@@ -253,7 +246,13 @@
   translate: 0 -50%;
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.35s ease, visibility 0.35s;
+  transition: opacity var(--motion-sheet) ease, visibility var(--motion-sheet);
+  /* SMALL (see "the back button, SMALL" below) */
+  width: var(--_back-size);
+  height: var(--_back-size);
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
 }
 .sheet-stack--tap > .card.is-open .sheet-stack__back {
   opacity: 1;
@@ -312,20 +311,13 @@
 /* ---- the back button, SMALL (Lh 2026-09-23: "give the sheet head more room" — and then "a glyph alone does not read as
    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 > .card.is-open > .card__head { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
 .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); }
+.sheet-stack--tap .sheet-stack__back::after { content: ""; position: absolute; inset: calc((var(--_back-size) - var(--tap-sm)) / 2); }
 
 /* the open sheet's title folds it (SheetStack.tsx): it says so to a pointer */
 .sheet-stack--tap > .card.is-open > .card__head > :is(h1, h2, h3) { cursor: pointer; }
 /* a stacked sheet is a control until it is open — tapped, never read into: no text selection (a drag, a double tap, a long press),
    no grey flash, no iOS callout; its head stays one when open. Only the OPEN sheet's body is text to select (Lh 2026-09-23) */
-.sheet-stack--tap > .card, .sheet-stack > .card > .card__head { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
+.sheet-stack--tap > .card, .sheet-stack > .card > .card__head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
 .sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); } /* the open sheet reads as the rest of the screen: not selectable (Lh 2026-09-25; it was text) */

package/css/step.css

@@ -59,9 +59,6 @@
    more air and a short one less; a screen with a bar keeps the bar's own room */
 .screen > .step:first-child, .screen--lead > .step { --_lead: var(--screen-lead, 15cqh); } /* top="lead" says it; a Step first says it too */
 
-/* a walk (the dots float on its foot): the reading block runs right to the bar's top edge — the reserve's breathing gap (--sp-6)
-   is given back, the dots keep the words clear of the bar (Lh 2026-09-23) */
-
 /* LAYERS (Lh, 2026-09-20): the base, then the sheet over it, then the top bar. A bar is the BASE's — the
    move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .card__foot
    (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. That is how cardds's
@@ -81,8 +78,7 @@
   --card-gap: var(--sp-4);
   gap: var(--card-gap);
   padding-block: 0;              /* --_lead carries the top; the bar's room is the step's */
-  align-content: start;
-  color: var(--on-surface);
+  color: var(--on-surface);      /* align-content: start is .page's own (base.css) — not restated here */
 }
 /* the reading block is the .page — or the .pages that holds several of them, a walk of words
    (card.css). Behind a PEEKED sheet the words keep the strip's room under them, so whatever is down there
@@ -90,23 +86,22 @@
 .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;
   overscroll-behavior: contain;
 }
+/* a lone .page carries the margin a walk's .pages does not (its own .page children do, below) —
+   the screen's gap, moved in here from above the step; the inset, taken back from the bleed */
+.step > .page { margin: var(--_lead, 0) var(--screen-pad) 0; }
 
 /* a WALK (Pages of Page) — Lh 2026-09-23, third call: no top; the picture and the words are ONE run that scrolls up together
    (the picture is never pinned). Each page starts at the screen's lead and ends with the same room under it — the lead as
    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 { 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, the default (Lh 2026-09-23) */
 .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) */
 }
 

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 */
@@ -93,8 +93,26 @@
 
   /* ---- motion ---- */
   --motion-sheet: 0.35s;
+  --motion-quick: 0.2s;  /* a small state flip that isn't a press: a chevron turning, a popover/banner opening */
   --motion-slide: 0.22s; /* a centred card sliding out and the next in (card.css) — quick, a page turn (Lh, 2026-09-12) */
   --motion-flip: 0.45s;  /* a postcard turning over (media.css) — slow enough to read as a card in the hand */
+  --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 */
+  --rest: 0.6;  /* an unpicked choice at rest: .day, .segment__item, .float-bar__item */
+  --faint: 0.3; /* further still: rails, far dots, unselected picker items */
+  --motion-press: 0.12s; /* a control giving under the finger and springing back (actions.css PRESS) */
+  --press-scale: 0.96;   /* how far a finger-sized control gives — a share of its size */
+  --press-dim: 0.6;      /* how far a card-wide one (a row, a summary line, a card) fades under the finger */
+  --press-shade: 0.93;  /* how far something with a thing behind it (a peeked sheet, a postcard) darkens under the finger */
+  --off: 0.4;            /* a disabled control's fade */
+
+  /* ---- z-index: the few layers that stack ABOVE ordinary content, low to high ---- */
+  --z-bar: 30;  /* .action-bar, .float-bar — above .sheet-stack sheets (--level 1-5) */
+  --z-fab: 31;  /* .fab — above the bars it floats near */
+  --z-top: 40;  /* .appbar, a stage laid OVER its screen (.sheet-stage--over) — topmost, card animations never cover it */
+
+  /* ---- shared private sizes (not a knob: two components share the exact same
+     literal by design and must not drift apart) ---- */
+  --_cover-min-h: 22.5rem; /* .card--cover's min-height; --postcard-min-h falls back to it (media.css) */
 
   /* ---- 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 */
@@ -209,7 +227,7 @@
 
 /* ============================================================
    REGISTERED TOKENS — the two sheet lengths are typed, so that
-   cardds.js can read them back RESOLVED: getComputedStyle returns a
+   the Sheet component can read them back RESOLVED: getComputedStyle returns a
    registered <length> in px and a <number> as a number, where an
    unregistered custom property only ever reads back as its text
    ("calc(1.25rem + …)"). Drag-to-snap needs to know where the states
@@ -221,7 +239,7 @@
    falls back to when its own declaration cannot resolve.
    ============================================================ */
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
-@property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; }
-@property --_lead { syntax: "<length>"; inherits: true; initial-value: 0px; } /* the room above a step's words: registered so a cqh share (a no-bar step, 15% of the SCREEN) resolves where it is declared — on the step, against the screen — not on the words, against the step */ /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */
+@property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; } /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */
+@property --_lead { syntax: "<length>"; inherits: true; initial-value: 0px; } /* the room above a step's words: registered so a cqh share (a no-bar step, 15% of the SCREEN) resolves where it is declared — on the step, against the screen — not on the words, against the step */
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
 @property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }

package/dist/actions/Btn.d.ts

@@ -19,6 +19,7 @@ export interface BtnProps extends Omit<ComponentProps<'button'>, 'form'> {
  * In a CardFoot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
  */
 export declare function Btn({ primary, quiet, block, form, xl, href, className, type, ...rest }: BtnProps): import("react").DetailedReactHTMLElement<{
+    onChange?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
     name?: string | undefined | undefined;
     slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -104,7 +105,6 @@ export declare function Btn({ primary, quiet, block, form, xl, href, className,
     onFocusCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
     onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
-    onChange?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
     onChangeCapture?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
     onBeforeInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
     onBeforeInputCapture?: import("react").InputEventHandler<HTMLButtonElement> | undefined;

package/dist/actions/Dropdown.js

@@ -1,18 +1,12 @@
 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)
-        onChange?.(next); };
-    return [current, pick];
-}
+const useValue = (value, defaultValue, onChange) => useControlled(value, defaultValue, onChange);
 /**
  * Dropdown — THE select: a pill trigger + its Menu popover anchored under it (native popover: light dismiss, Esc). Never a native
  * `<select>`. ONE component, like `<select>` is — the pill and the panel are its own anatomy. It holds a VALUE, controlled like an

package/dist/actions/Fab.d.ts

@@ -5,5 +5,5 @@ export interface FabProps extends ComponentProps<'button'> {
     icon?: IconName;
     invert?: boolean;
 }
-/** Fab — the square floating action at the bottom-right of a stage or screen (above the bar). */
+/** Fab — the square floating action at the bottom-right of a stage or screen (above the bar): an IconBtn with the fab's place. */
 export declare function Fab({ label, icon, invert, className, children, ...rest }: FabProps): import("react").JSX.Element;

package/dist/actions/Fab.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
-/** Fab — the square floating action at the bottom-right of a stage or screen (above the bar). */
+import { IconBtn } from './IconBtn.js';
+/** Fab — the square floating action at the bottom-right of a stage or screen (above the bar): an IconBtn with the fab's place. */
 export function Fab({ label, icon = 'plus', invert = true, className, children, ...rest }) {
-    return (_jsx("button", { type: "button", "aria-label": label, className: cx('icon-btn fab', invert && 'icon-btn--invert', className), ...rest, children: children ?? _jsx(Icon, { name: icon }) }));
+    return _jsx(IconBtn, { label: label, invert: invert, className: cx('fab', className), ...rest, children: children ?? _jsx(Icon, { name: icon }) });
 }