@usableapp/cardds 0.7.16 → 0.7.18

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,7 +237,7 @@
 .sheet-stack--tap .card__head {
   position: relative;
   padding-left: 0;
-  transition: padding-left 0.35s ease;
+  transition: padding-left var(--motion-sheet) ease;
 }
 .sheet-stack--tap .sheet-stack__back {
   position: absolute;
@@ -250,10 +246,10 @@
   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(--stack-back-size, calc(var(--tap-base) * 2 / 3));
-  height: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
+  width: var(--_back-size);
+  height: var(--_back-size);
   min-width: 0;
   min-height: 0;
   padding: 0;
@@ -315,13 +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 > .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
@@ -91,22 +87,25 @@
 .step > :is(.page, .pages) {
   flex: 0 1 auto;
   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.
+   It ends with the bottom layer's room, as a walk's page does: it scrolls only when the layer would cover its words
+   (timebank onboard-04, 2026-09-27 — its last Link lay under the bar; Lh: same rule as the walk) */
+.step > .page { margin: var(--_lead, 0) var(--screen-pad) 0; padding-bottom: var(--bottom-h, 0rem); }
 
 /* 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 { 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) */
 }
-.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/tokens.css

@@ -93,11 +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 it gives — a share of its size */
+  --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 */
@@ -212,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
@@ -224,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

@@ -6,12 +6,7 @@ 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 [current, setOwn] = useControlled(value, defaultValue);
-    const pick = (next) => { setOwn(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 }) });
 }