@usableapp/cardds 0.7.14 → 0.7.16

package/css/step.css

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

package/css/theme.template.css

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

package/css/tokens.css

@@ -48,7 +48,7 @@
   --btn-h: calc(var(--tap-base) * 13 / 12);   /* 52 button height */
   --btn-xl-h: calc(var(--tap-base) * 11 / 6); /* 88 the one giant CTA */
   --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */
-  --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell, deck actions */
+  --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell */
   --header-h: calc(var(--tap-base) * 5 / 4);  /* 60 top bar — .topbar and .appbar alike */
   --card-pad-rest: var(--sp-5);  /* 20 a card's padding before any variant — .card publishes it as --card-pad; the sheet's peek strip is built from it where no card is in scope */
   --card-gap-rest: var(--sp-4);  /* 16 …and its gap */
@@ -95,6 +95,9 @@
   --motion-sheet: 0.35s;
   --motion-slide: 0.22s; /* a centred card sliding out and the next in (card.css) — quick, a page turn (Lh, 2026-09-12) */
   --motion-flip: 0.45s;  /* a postcard turning over (media.css) — slow enough to read as a card in the hand */
+  --dim: 0.7; /* secondary words dimmed on a ground whose muted ink does not fit (the dark card --3, a drawer, a tile's sub line): ONE share for all */
+  --motion-press: 0.12s; /* a control giving under the finger and springing back (actions.css PRESS) */
+  --press-scale: 0.96;   /* how far it gives — a share of its size */
 
   /* ---- typography: one scale, rem so it follows the root ---- */
   --font-ui: "PK Nonthaburi", -apple-system, system-ui, sans-serif; /* fonts.css ships it; the rest is the fallback while it loads */
@@ -167,6 +170,9 @@
   --card-1-bg: var(--color-paper, #ffffff);  --card-1-ink: var(--color-ink, #141414);
   --card-2-bg: var(--_tone-2, #e6e6e3);  --card-2-ink: var(--color-ink, #141414);
   --card-3-bg: var(--color-brand, #141414);  --card-3-ink: var(--color-on-brand, #ffffff);
+  /* tones 4 · 5 (Lh 2026-09-25): more card colours for a palette that has them — the wireframe keeps them grey */
+  --card-4-bg: #d4d4d0;  --card-4-ink: var(--color-ink, #141414);  --card-4-muted: #555555;
+  --card-5-bg: #3d3d3d;  --card-5-ink: #ffffff;                    --card-5-muted: #c4c4c4;
 
   --card-border: #141414;      /* wireframe: visible outline; palettes may set transparent */
   --card-muted: var(--_muted-on-paper, #6b6b6b);       /* secondary text inside cards (the default, tone-1 card) */
@@ -187,6 +193,11 @@
   --neg: #3d3d3d;
   --dot-a: var(--color-brand, #141414);
   --dot-b: #8a8a8a;
+  --signal-warn: #8a6d00;   /* the full signal set (Lh 2026-09-25): error · warn · ok · info — each with an icon and words */
+  --signal-ok: #2e7d32;
+  --signal-info: #2f5f9e;
+  /* highlights (Lh 2026-09-25): four atmosphere colours a palette may set for decoration — a count, a mark, a chart dot; the wireframe keeps them grey */
+  --highlight-1: #3d3d3d;  --highlight-2: #8a8a8a;  --highlight-3: #5f5f5f;  --highlight-4: #b0b0b0;
   --signal-error: #c62828;  /* the ONE colour in the wireframe (Lh 2026-09-24): something went wrong — a field's edge, the words that say what. Always with an icon and words, never the colour alone */
 
   /* derived tints — read the element's own ink, so they work on any slot */

package/dist/actions/Dropdown.js

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