@usableapp/cardds 0.7.43 → 0.7.45

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
 
+## 0.7.45 — 2026-10-03
+
+### Changed
+- **`Track` is as tall as the top bar, and a step is a mark, not a control** (Lh 2026-10-03): the pill is `--header-h` tall (60px, was 72) and each step's round is 32px (was 56 — the size of a control, it read as something to press), its glyph 18px, the connector 8px, a `num` at caption size. Nothing to change in a screen: same markup, same props. If your theme sets `--track-pad` or `--track-dot-font`, your value still wins — only the defaults moved (`--track-pad` 8px → 14px, `--track-dot-font` title → caption).
+
+### Added
+- **A `Track` as the screen's top** (Lh 2026-10-03): `<Screen fill top={<Track>…</Track>}>` — the progress of a task in several sheets stands where a bar would, in the screen's inset, and stays in sight over every sheet. A sheet at full stops 16px under it and never touches it — the same 16px it keeps from the screen's sides and from the status bar. Knobs `--track-top-gap` (16px, the room under it) · `--track-top-lead` (16px, the air over it, under the status bar). Stories `Track · OnTop` (numbers) · `OnTopIcons`.
+- **`CallSheet top`**: the template takes the Screen's `top` (before, it had none and could not be given one) — `<CallSheet top={<Track>…</Track>} …>`. Without it nothing changes: no top, the page starts at the lead.
+
+## 0.7.44 — 2026-10-02
+
+### Added
+- **The signal set is the standard** (Lh 2026-10-02): four colours, four meanings, in every project and in the wireframe — `--signal-ok` green (it went right) · `--signal-warn` yellow (look out) · `--signal-error` red (it went wrong) · `--signal-info` blue (for your information). A theme may retune a shade in its `theme.css`, never a meaning. New: `--signal-ok-soft` · `--signal-warn-soft` · `--signal-error-soft` · `--signal-info-soft` — the light ground of each (the signal washed 14% into the surface); it follows the shade you set. Never the colour alone: an icon or words say it too.
+- **`Dot tone`** and **`Chip dot`**: `ok` · `warn` · `error` · `info` — `<Chip dot="ok">พร้อม</Chip>`. `dot="a"` / `"b"` are unchanged. Story `Dot · Tones`.
+
+### Changed
+- **`Snackbar` stands on the ok signal**: its ground is `--signal-ok-soft` with no border (was white with a border), and its glyph is `check` in `--signal-ok` by default — before, no `icon` meant no glyph; now pass `icon={false}` for none. New knob `--snackbar-icon-ink`. A screen that passed `icon="check"` needs no change.
+
 ## 0.7.43 — 2026-10-02
 
 ### Added

package/README.md

@@ -306,6 +306,11 @@ whose markup has rules, because the sheet's box is the step itself:
   opened, a `SheetStack` sheet opened, a `Modal` arrived. Once it has settled: the field marked `data-autofocus`, else its
   first field, else its heading (a step's title, a modal's question) or, for a sheet come onto the screen, its handle. A field
   that already has the cursor keeps it. One mechanic for all of them (`focusWhenActive`, src/state.ts); an app writes no focus code.
+- **The signal set — four colours, four meanings, everywhere** (Lh 2026-10-02): `--signal-ok` green (it went right) ·
+  `--signal-warn` yellow (look out) · `--signal-error` red (it went wrong) · `--signal-info` blue (for your information).
+  The wireframe has them too. A theme may retune a shade, never a meaning. Each is dark enough for words and edges;
+  `--signal-*-soft` is its light ground (the signal washed 14% into the surface). Never the colour alone: an icon or
+  words say it too. Read by: `Field`/`Pin`/`FormNote` error, `Dot tone` / `Chip dot="ok|warn|error|info"`, `Snackbar` (ok).
 - **Good news is a `Snackbar`, a warning or a question is a `Modal`** (Lh 2026-10-02): a `Snackbar` is a quick line over the
   screen — something went well, said in passing. A child of the `Screen`; it slides in from the top (or `bottom`, above the
   bottom layer), stays `duration` (4 s), slides out, never takes the cursor, never stops the member. `open` +
@@ -623,7 +628,7 @@ That file is where a project's look lives. Bases and roles:
 | the size **of** things | `--tap-base` (3rem = 48) | `--tap*`, `--btn-h`, `--chip-h`, `--bar-h`, `--header-h`, `--fab`, `--icon*`, `--avatar*`, `--dot*`, `--ring*`, `--tile-*`. `--tap*` never under `--tap-floor` (44px) |
 | faces | `--font-ui`, `--font-display` | |
 | colour | `--color-surface`, `--color-ink`, `--color-paper`, `--color-brand`, `--color-on-brand` — no default: unset = the wireframe | every role: surface / words, the three card tones (paper · the brand washed 14% into the surface · the brand), the muted inks (the ink washed into their ground), accent, neutral actions, `--dot-a` |
-| colour roles (the escape hatch) | `--surface`, `--on-surface(-muted)`, `--card-{1,2,3}-{bg,ink}`, `--card-border`, `--card-muted`, `--card-2-muted`, `--accent`, `--on-accent`, `--action-{bg,ink,border}`, `--pos`, `--neg`, `--dot-{a,b}` | a role set directly wins over its derivation; the tints derive from the roles |
+| colour roles (the escape hatch) | `--surface`, `--on-surface(-muted)`, `--card-{1,2,3}-{bg,ink}`, `--card-border`, `--card-muted`, `--card-2-muted`, `--accent`, `--on-accent`, `--action-{bg,ink,border}`, `--pos`, `--neg`, `--dot-{a,b}`, `--signal-{ok,warn,error,info}` | a role set directly wins over its derivation; the tints derive from the roles |
 
 Rules:
 

package/cardds.css

@@ -16,3 +16,4 @@
 @import url("css/lists.css");    /* row, rows, key-value, kv grid, timeline, legend, link */
 @import url("css/media.css");    /* cover card, quote, tile grid, fold, mosaic, wave */
 @import url("css/layover.css");  /* ask drawer, popover menu, banner, float bar, callout */
+@import url("css/finish.css");   /* light, shadow, edges — only under data-finish="lit" */

package/css/actions.css

@@ -179,6 +179,11 @@
    The drop: a line box is centred on its ascender room (Thai marks), the letters beside the dot sit lower — the dot rides down to the
    letters' own middle, in em so it follows the text size (Lh 2026-09-22: "ตัวหนังสือกับไฟเสมอกัน") */
 .dot--b { background: var(--dot-b); }
+/* the signal set on a dot (Lh 2026-10-02): the words beside it say what — never the colour alone */
+.dot--ok { background: var(--signal-ok); }
+.dot--warn { background: var(--signal-warn); }
+.dot--error { background: var(--signal-error); }
+.dot--info { background: var(--signal-info); }
 .chip--on { background: var(--chip-on-bg, var(--accent)); color: var(--chip-on-ink, var(--on-accent)); border-color: transparent; }
 /* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (README 13) */
 .chip--muted { color: var(--chip-muted-ink, var(--card-muted)); }

package/css/finish.css

@@ -0,0 +1,77 @@
+/* ============================================================
+   cardds/finish.css — FINISH: light, shadow and edges. A style of its own (Lh 2026-10-02: the plain
+   look read flat, "not finished"), apart from colour: palette.css says WHICH colours, this says how
+   the material is lit. Apply with <html data-finish="lit"> beside any palette (or none, or "own").
+   No attribute = nothing here applies — the flat look, unchanged.
+
+   The light comes from above:
+     - a thing that stands UP (card, sheet, button) has a lit top edge, a hairline ring and a shadow
+       that grows with its height: card 1 · sheet / float 2 — the layers cardds already has;
+     - a thing that is SUNK (a field, a pin cell) has its shadow inside, under its top edge;
+     - information inside a card stays flat: only a container or a control gets an edge.
+   Shadows are mixed from the ink (--on-surface), never plain black, so they sit in the palette.
+   ============================================================ */
+
+[data-finish="lit"] {
+  --_shade: var(--on-surface);
+  --finish-edge: inset 0 1px 0 rgb(255 255 255 / 0.55);                            /* the lit top edge */
+  --finish-ring: 0 0 0 1px color-mix(in srgb, var(--_shade) 7%, transparent);        /* the hairline round a raised thing */
+
+  /* the three shadows every component already reads — layered: one close and crisp, one far and soft */
+  --shadow-card: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 8%, transparent),
+    0 0.375rem 0.75rem -0.125rem color-mix(in srgb, var(--_shade) 8%, transparent),
+    0 1.25rem 2.5rem -0.75rem color-mix(in srgb, var(--_shade) 14%, transparent);
+  --shadow-float: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.5rem 1.25rem -0.25rem color-mix(in srgb, var(--_shade) 22%, transparent);
+  --shadow-sheet: var(--finish-edge), var(--finish-ring),
+    0 -1px 2px color-mix(in srgb, var(--_shade) 6%, transparent),
+    0 -0.75rem 2.5rem color-mix(in srgb, var(--_shade) 18%, transparent);
+
+  /* a control: its own small lift, and the sheen that runs down its face */
+  --finish-control: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.25rem 0.5rem -0.125rem color-mix(in srgb, var(--_shade) 12%, transparent);
+  --finish-control-down: var(--finish-ring), inset 0 1px 2px color-mix(in srgb, var(--_shade) 18%, transparent);
+  --finish-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 60%);
+  --finish-sunk: inset 0 1px 2px color-mix(in srgb, var(--_shade) 14%, transparent), 0 1px 0 rgb(255 255 255 / 0.5);
+
+  /* the shadow is the edge: the wireframe's lines step back (as in every colour palette) */
+  --card-border: transparent;
+  --action-border: transparent;
+  --outline: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+/* ---- raised: cards, sheets, the stack ---- */
+[data-finish="lit"] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
+[data-finish="lit"] .band-stack > .card--band { box-shadow: none; }
+/* a sheet lies on the floor and is lit from above: its shadow falls UP the screen, onto what it covers */
+[data-finish="lit"] .sheet { box-shadow: var(--sheet-shadow, var(--shadow-sheet)); }
+[data-finish="lit"] .modal { box-shadow: var(--modal-shadow, var(--shadow-float)); }
+[data-finish="lit"] .sheet-stack > .card,
+[data-finish="lit"] .sheet-stack > :not(.card, .sheet-stack__base) > .card { box-shadow: var(--shadow-sheet); }
+
+/* ---- controls: a filled button stands up, and goes down under the finger ---- */
+[data-finish="lit"] .btn:not(.btn--quiet),
+[data-finish="lit"] .icon-btn:not(.icon-btn-group > *, .stack-sheet__tab:not(.icon-btn--invert)) {
+  background-image: var(--finish-sheen);
+  box-shadow: var(--finish-control);
+}
+/* the main button throws its own colour */
+[data-finish="lit"] .btn--primary,
+[data-finish="lit"] .icon-btn--invert:not(.icon-btn-group > *) {
+  box-shadow: var(--finish-edge),
+    0 1px 2px color-mix(in srgb, var(--_shade) 20%, transparent),
+    0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);
+}
+[data-finish="lit"] :is(.btn:not(.btn--quiet), .icon-btn:not(.icon-btn-group > *, .stack-sheet__tab:not(.icon-btn--invert))):active:not(:disabled) {
+  background-image: none;
+  box-shadow: var(--finish-control-down);
+}
+[data-finish="lit"] .icon-btn-group { box-shadow: var(--finish-control); }
+[data-finish="lit"] .toggle { box-shadow: var(--finish-sunk); }
+[data-finish="lit"] .toggle::after { box-shadow: 0 1px 2px color-mix(in srgb, var(--_shade) 35%, transparent); }
+
+/* ---- sunk: what the member types into ---- */
+[data-finish="lit"] :is(.field, .pin__cell) { box-shadow: var(--finish-sunk); }

package/css/layover.css

@@ -312,7 +312,7 @@
    <div class="snackbar snackbar--open" role="status"><div class="snackbar__body"><svg class="icon"/>
      <span class="snackbar__words"><span class="snackbar__text">…</span><span class="snackbar__caption">…</span></span></div></div>
    A LAYER of the screen (its child), over the top bar; --bottom = at the foot, above the screen's bottom layer (--bottom-h).
-   Rigid like a sheet: `translate` only. `button.snackbar__body` = it can be tapped. Never a warning — that is a Modal. */
+   Its ground is the OK signal's soft ground (--signal-ok-soft), its glyph the signal itself: the sign that it went right. Rigid like a sheet: `translate` only. `button.snackbar__body` = it can be tapped. Never a warning — that is a Modal. */
 .snackbar {
   --_out: -1;
   position: fixed; inset-inline: 0; top: calc(var(--sp-3) + var(--safe-top));
@@ -330,15 +330,15 @@
   display: flex; align-items: center; gap: var(--snackbar-gap, var(--sp-3));
   max-width: 100%; min-height: var(--snackbar-min-h, var(--tap));
   padding: var(--snackbar-pad-y, var(--sp-2)) var(--snackbar-pad-x, var(--sp-5));
-  border: var(--border-w) solid var(--snackbar-border, var(--action-border));
+  border: var(--border-w) solid var(--snackbar-border, transparent);
   border-radius: var(--snackbar-radius, var(--r-card));
-  background: var(--snackbar-bg, var(--action-bg));
-  color: var(--snackbar-ink, var(--action-ink));
+  background: var(--snackbar-bg, var(--signal-ok-soft));
+  color: var(--snackbar-ink, var(--on-surface));
   box-shadow: var(--snackbar-shadow, var(--shadow-float));
   font: inherit; text-align: start;
   pointer-events: auto;
 }
-.snackbar__body > .icon { flex: none; }
+.snackbar__body > .icon { flex: none; color: var(--snackbar-icon-ink, var(--signal-ok)); }
 .snackbar__words { display: grid; min-width: 0; overflow-wrap: anywhere; }
 .snackbar__text { font: var(--snackbar-text-font, var(--type-body)); }
 .snackbar__caption { font: var(--snackbar-caption-font, var(--type-caption)); opacity: var(--dim); }

package/css/numbers.css

@@ -39,8 +39,12 @@
 .ring--xs .ring__value { font: var(--type-caption); }
 
 /* ---- track: step progress in a pill — done · done · todo ----
-   <ol class="track"><li class="track__step is-done">icon</li> …</ol> */
+   <ol class="track"><li class="track__step is-done">icon</li> …</ol>
+   As tall as the top bar (--header-h), and a step is a MARK, not a control: its round is well under
+   the tap floor, so it reads as progress and never as something to press (Lh 2026-10-03). */
 .track {
+  --_step: calc(var(--tap-base) * 2 / 3); /* 32 the round of one step */
+  --_pad: calc((var(--header-h) - var(--_step)) / 2); /* 14 round + its room = the top bar's height; the end rounds sit concentric in the pill */
   --_bg: var(--card-3-bg);
   --_ink: var(--card-3-ink);
   /* the track lays down its own dark ground, so like the dark card slot it
@@ -51,7 +55,7 @@
   --on-accent: var(--_bg);
   list-style: none;
   margin: 0;
-  padding: var(--track-pad, var(--sp-2));
+  padding: var(--track-pad, var(--_pad));
   display: flex;
   align-items: center;
   border-radius: var(--track-radius, var(--r-chip));
@@ -70,22 +74,22 @@
 .track__step::before {
   content: "";
   flex: 1;
-  height: var(--sp-3);
+  height: var(--sp-2);
   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); }
 .track__step > .icon,
 .track__step > .track__dot {
-  width: var(--tap-lg);
-  height: var(--tap-lg);
+  width: var(--_step);
+  height: var(--_step);
   flex: none;
-  padding: calc((var(--tap-lg) - var(--icon)) / 2);
+  padding: calc(var(--_step) * 7 / 32); /* the glyph = 18 in the 32 round */
   border-radius: 50%;
   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 > .track__dot { display: grid; place-items: center; padding: 0; font: var(--track-dot-font, var(--type-caption)); 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); }
 

package/css/step.css

@@ -141,6 +141,15 @@
    them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
+/* a TRACK as the screen's TOP (Lh 2026-10-03): the walk's progress stands where a bar would, a row of the column, in the screen's
+   inset — and it never touches what comes up under it: the step (and so a sheet at full) starts --track-top-gap below it. That
+   room is the track's own, not the screen's gap; --track-top-lead is the air over it, under the status bar. Both = the screen's side inset (16): the pill
+   stands the same distance from everything around it (Lh 2026-10-03: 8 over was too little, 24 under too much). */
+.screen--fill > .track:first-child {
+  flex: none;
+  margin-top: var(--track-top-lead, var(--sp-4));
+  margin-bottom: calc(var(--track-top-gap, var(--sp-4)) - var(--screen-gap));
+}
 /* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
    the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
 .step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }

package/css/theme.template.css

@@ -49,5 +49,7 @@
      --card-border  --card-muted  --card-2-muted
      --accent --on-accent  --action-bg --action-ink --action-border
      --pos --neg  --dot-a --dot-b
+     --signal-ok --signal-warn --signal-error --signal-info   (the signal set: green · yellow · red · blue — retune the shade,
+       keep the meaning; dark enough for words. --signal-*-soft, the light ground of each, follows by itself)
      --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

@@ -46,7 +46,7 @@
   --tap-floor: 2.75rem; /* 44 the HIG floor — no --tap-base takes a touch target under it */
   --tap: max(var(--tap-floor), var(--tap-base));                       /* 48 primary touch target */
   --tap-sm: max(var(--tap-floor), calc(var(--tap-base) * 11 / 12));    /* 44 minimum touch target */
-  --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: track steps, send, field with action */
+  --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: send, field with action */
   --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 */
@@ -210,12 +210,15 @@
   --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 */
+  /* THE SIGNAL SET (Lh 2026-09-25; the standard, Lh 2026-10-02): ok (green) · warn (yellow) · error (red) · info (blue) — the same four
+     meanings in every project, wireframe included; a theme may retune the shade, never the meaning. Each is dark enough for words and
+     edges and comes with an icon and words, never the colour alone. `--signal-*-soft` (below :root) = its light ground. */
+  --signal-warn: #8a6d00;
   --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 */
+  --signal-error: #c62828;  /* something went wrong — a field's edge, the words that say what */
 
   /* derived tints — read the element's own ink, so they work on any slot */
   --outline: var(--action-border);                                 /* control edges (palette.css softens) */
@@ -244,6 +247,14 @@
    bars take over the page when the app runs edge to edge (viewport-fit=cover: Android Chrome, an iPhone home-screen app).
    PUBLISHED: backgrounds still run to the edge; what the member reads or taps stands clear of them. 0 without cover.
    --_safe-b-open = the bottom inset the keyboard does NOT already cover (a keyboard up hides the gesture bar). */
+/* a signal's SOFT ground: the signal washed 14% into the surface (tone 2's formula) — what a Snackbar stands on. Re-derived where a
+   palette is set, so a palette's own signal shade gives its own soft */
+:root, [data-palette] {
+  --signal-ok-soft: color-mix(in srgb, var(--signal-ok) 14%, var(--surface));
+  --signal-warn-soft: color-mix(in srgb, var(--signal-warn) 14%, var(--surface));
+  --signal-error-soft: color-mix(in srgb, var(--signal-error) 14%, var(--surface));
+  --signal-info-soft: color-mix(in srgb, var(--signal-info) 14%, var(--surface));
+}
 :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
 * { --_safe-b-open: max(0px, var(--safe-bottom) - var(--kb, 0px)); }
 

package/dist/actions/Chip.d.ts

@@ -1,11 +1,12 @@
 import { type ComponentProps, type ReactNode } from 'react';
+import { type DotTone } from './Dot.js';
 export interface ChipProps extends ComponentProps<'span'> {
     /** filled accent: the selected / live state */
     on?: boolean;
     /** quiet: an untouched default value — muted words, the thin edge, nothing to find the eye (README rule 13) */
     muted?: boolean;
-    /** a leading signal dot: `a` (the accent signal) or `b` (the secondary) */
-    dot?: 'a' | 'b';
+    /** a leading signal dot: `a` (the accent signal), `b` (the secondary), or one of the signal set — ok · warn · error · info */
+    dot?: 'a' | 'b' | DotTone;
     /** the element: span (default), a link, or a button */
     as?: 'span' | 'a' | 'button';
     href?: string;

package/dist/actions/Chip.js

@@ -5,7 +5,7 @@ import { Dot } from './Dot.js';
 /** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For a choice use ChipPick (`sign` for the +/× interest picker). */
 export function Chip({ on, muted, dot, as, href, className, children, ...rest }) {
     const el = as ?? (href ? 'a' : 'span');
-    return createElement(el, { href, type: el === 'button' ? 'button' : undefined, className: cx('chip', on && 'chip--on', muted && 'chip--muted', className), ...rest }, dot && _jsx(Dot, { b: dot === 'b' }), children);
+    return createElement(el, { href, type: el === 'button' ? 'button' : undefined, className: cx('chip', on && 'chip--on', muted && 'chip--muted', className), ...rest }, dot && _jsx(Dot, { b: dot === 'b', tone: dot === 'a' || dot === 'b' ? undefined : dot }), children);
 }
 /** ChipPick — a chip that is a choice: full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
  *  interest picker); the picked one fills with accent. A native radio/checkbox inside the label carries the state. */

package/dist/actions/Dot.d.ts

@@ -1,7 +1,10 @@
 import type { ComponentProps } from 'react';
+export type DotTone = 'ok' | 'warn' | 'error' | 'info';
 export interface DotProps extends ComponentProps<'span'> {
     /** the secondary signal colour */
     b?: boolean;
+    /** a signal from the standard set: ok (green) · warn (yellow) · error (red) · info (blue) — the words beside it say what */
+    tone?: DotTone;
 }
 /** Dot — the signal dot in chips, legends and row metas. */
-export declare function Dot({ b, className, ...rest }: DotProps): import("react").JSX.Element;
+export declare function Dot({ b, tone, className, ...rest }: DotProps): import("react").JSX.Element;

package/dist/actions/Dot.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /** Dot — the signal dot in chips, legends and row metas. */
-export function Dot({ b, className, ...rest }) {
-    return _jsx("span", { className: cx('dot', b && 'dot--b', className), ...rest });
+export function Dot({ b, tone, className, ...rest }) {
+    return _jsx("span", { className: cx('dot', b && 'dot--b', tone && `dot--${tone}`, className), ...rest });
 }

package/dist/cardds.css

@@ -87,7 +87,7 @@
   --tap-floor: 2.75rem; /* 44 the HIG floor — no --tap-base takes a touch target under it */
   --tap: max(var(--tap-floor), var(--tap-base));                       /* 48 primary touch target */
   --tap-sm: max(var(--tap-floor), calc(var(--tap-base) * 11 / 12));    /* 44 minimum touch target */
-  --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: track steps, send, field with action */
+  --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: send, field with action */
   --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 */
@@ -251,12 +251,15 @@
   --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 */
+  /* THE SIGNAL SET (Lh 2026-09-25; the standard, Lh 2026-10-02): ok (green) · warn (yellow) · error (red) · info (blue) — the same four
+     meanings in every project, wireframe included; a theme may retune the shade, never the meaning. Each is dark enough for words and
+     edges and comes with an icon and words, never the colour alone. `--signal-*-soft` (below :root) = its light ground. */
+  --signal-warn: #8a6d00;
   --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 */
+  --signal-error: #c62828;  /* something went wrong — a field's edge, the words that say what */
 
   /* derived tints — read the element's own ink, so they work on any slot */
   --outline: var(--action-border);                                 /* control edges (palette.css softens) */
@@ -285,6 +288,14 @@
    bars take over the page when the app runs edge to edge (viewport-fit=cover: Android Chrome, an iPhone home-screen app).
    PUBLISHED: backgrounds still run to the edge; what the member reads or taps stands clear of them. 0 without cover.
    --_safe-b-open = the bottom inset the keyboard does NOT already cover (a keyboard up hides the gesture bar). */
+/* a signal's SOFT ground: the signal washed 14% into the surface (tone 2's formula) — what a Snackbar stands on. Re-derived where a
+   palette is set, so a palette's own signal shade gives its own soft */
+:root, [data-palette] {
+  --signal-ok-soft: color-mix(in srgb, var(--signal-ok) 14%, var(--surface));
+  --signal-warn-soft: color-mix(in srgb, var(--signal-warn) 14%, var(--surface));
+  --signal-error-soft: color-mix(in srgb, var(--signal-error) 14%, var(--surface));
+  --signal-info-soft: color-mix(in srgb, var(--signal-info) 14%, var(--surface));
+}
 :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
 * { --_safe-b-open: max(0px, var(--safe-bottom) - var(--kb, 0px)); }
 
@@ -1888,6 +1899,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
+/* a TRACK as the screen's TOP (Lh 2026-10-03): the walk's progress stands where a bar would, a row of the column, in the screen's
+   inset — and it never touches what comes up under it: the step (and so a sheet at full) starts --track-top-gap below it. That
+   room is the track's own, not the screen's gap; --track-top-lead is the air over it, under the status bar. Both = the screen's side inset (16): the pill
+   stands the same distance from everything around it (Lh 2026-10-03: 8 over was too little, 24 under too much). */
+.screen--fill > .track:first-child {
+  flex: none;
+  margin-top: var(--track-top-lead, var(--sp-4));
+  margin-bottom: calc(var(--track-top-gap, var(--sp-4)) - var(--screen-gap));
+}
 /* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
    the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
 .step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }
@@ -2234,6 +2254,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    The drop: a line box is centred on its ascender room (Thai marks), the letters beside the dot sit lower — the dot rides down to the
    letters' own middle, in em so it follows the text size (Lh 2026-09-22: "ตัวหนังสือกับไฟเสมอกัน") */
 .dot--b { background: var(--dot-b); }
+/* the signal set on a dot (Lh 2026-10-02): the words beside it say what — never the colour alone */
+.dot--ok { background: var(--signal-ok); }
+.dot--warn { background: var(--signal-warn); }
+.dot--error { background: var(--signal-error); }
+.dot--info { background: var(--signal-info); }
 .chip--on { background: var(--chip-on-bg, var(--accent)); color: var(--chip-on-ink, var(--on-accent)); border-color: transparent; }
 /* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (README 13) */
 .chip--muted { color: var(--chip-muted-ink, var(--card-muted)); }
@@ -2500,8 +2525,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .ring--xs .ring__value { font: var(--type-caption); }
 
 /* ---- track: step progress in a pill — done · done · todo ----
-   <ol class="track"><li class="track__step is-done">icon</li> …</ol> */
+   <ol class="track"><li class="track__step is-done">icon</li> …</ol>
+   As tall as the top bar (--header-h), and a step is a MARK, not a control: its round is well under
+   the tap floor, so it reads as progress and never as something to press (Lh 2026-10-03). */
 .track {
+  --_step: calc(var(--tap-base) * 2 / 3); /* 32 the round of one step */
+  --_pad: calc((var(--header-h) - var(--_step)) / 2); /* 14 round + its room = the top bar's height; the end rounds sit concentric in the pill */
   --_bg: var(--card-3-bg);
   --_ink: var(--card-3-ink);
   /* the track lays down its own dark ground, so like the dark card slot it
@@ -2512,7 +2541,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --on-accent: var(--_bg);
   list-style: none;
   margin: 0;
-  padding: var(--track-pad, var(--sp-2));
+  padding: var(--track-pad, var(--_pad));
   display: flex;
   align-items: center;
   border-radius: var(--track-radius, var(--r-chip));
@@ -2531,22 +2560,22 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .track__step::before {
   content: "";
   flex: 1;
-  height: var(--sp-3);
+  height: var(--sp-2);
   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); }
 .track__step > .icon,
 .track__step > .track__dot {
-  width: var(--tap-lg);
-  height: var(--tap-lg);
+  width: var(--_step);
+  height: var(--_step);
   flex: none;
-  padding: calc((var(--tap-lg) - var(--icon)) / 2);
+  padding: calc(var(--_step) * 7 / 32); /* the glyph = 18 in the 32 round */
   border-radius: 50%;
   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 > .track__dot { display: grid; place-items: center; padding: 0; font: var(--track-dot-font, var(--type-caption)); 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); }
 
@@ -3939,7 +3968,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    <div class="snackbar snackbar--open" role="status"><div class="snackbar__body"><svg class="icon"/>
      <span class="snackbar__words"><span class="snackbar__text">…</span><span class="snackbar__caption">…</span></span></div></div>
    A LAYER of the screen (its child), over the top bar; --bottom = at the foot, above the screen's bottom layer (--bottom-h).
-   Rigid like a sheet: `translate` only. `button.snackbar__body` = it can be tapped. Never a warning — that is a Modal. */
+   Its ground is the OK signal's soft ground (--signal-ok-soft), its glyph the signal itself: the sign that it went right. Rigid like a sheet: `translate` only. `button.snackbar__body` = it can be tapped. Never a warning — that is a Modal. */
 .snackbar {
   --_out: -1;
   position: fixed; inset-inline: 0; top: calc(var(--sp-3) + var(--safe-top));
@@ -3957,17 +3986,96 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: flex; align-items: center; gap: var(--snackbar-gap, var(--sp-3));
   max-width: 100%; min-height: var(--snackbar-min-h, var(--tap));
   padding: var(--snackbar-pad-y, var(--sp-2)) var(--snackbar-pad-x, var(--sp-5));
-  border: var(--border-w) solid var(--snackbar-border, var(--action-border));
+  border: var(--border-w) solid var(--snackbar-border, transparent);
   border-radius: var(--snackbar-radius, var(--r-card));
-  background: var(--snackbar-bg, var(--action-bg));
-  color: var(--snackbar-ink, var(--action-ink));
+  background: var(--snackbar-bg, var(--signal-ok-soft));
+  color: var(--snackbar-ink, var(--on-surface));
   box-shadow: var(--snackbar-shadow, var(--shadow-float));
   font: inherit; text-align: start;
   pointer-events: auto;
 }
-.snackbar__body > .icon { flex: none; }
+.snackbar__body > .icon { flex: none; color: var(--snackbar-icon-ink, var(--signal-ok)); }
 .snackbar__words { display: grid; min-width: 0; overflow-wrap: anywhere; }
 .snackbar__text { font: var(--snackbar-text-font, var(--type-body)); }
 .snackbar__caption { font: var(--snackbar-caption-font, var(--type-caption)); opacity: var(--dim); }
 @media (prefers-reduced-motion: reduce) { .snackbar { transition: none; } }
 
+/* ---- css/finish.css — light, shadow, edges — only under data-finish="lit" ---- */
+/* ============================================================
+   cardds/finish.css — FINISH: light, shadow and edges. A style of its own (Lh 2026-10-02: the plain
+   look read flat, "not finished"), apart from colour: palette.css says WHICH colours, this says how
+   the material is lit. Apply with <html data-finish="lit"> beside any palette (or none, or "own").
+   No attribute = nothing here applies — the flat look, unchanged.
+
+   The light comes from above:
+     - a thing that stands UP (card, sheet, button) has a lit top edge, a hairline ring and a shadow
+       that grows with its height: card 1 · sheet / float 2 — the layers cardds already has;
+     - a thing that is SUNK (a field, a pin cell) has its shadow inside, under its top edge;
+     - information inside a card stays flat: only a container or a control gets an edge.
+   Shadows are mixed from the ink (--on-surface), never plain black, so they sit in the palette.
+   ============================================================ */
+
+[data-finish="lit"] {
+  --_shade: var(--on-surface);
+  --finish-edge: inset 0 1px 0 rgb(255 255 255 / 0.55);                            /* the lit top edge */
+  --finish-ring: 0 0 0 1px color-mix(in srgb, var(--_shade) 7%, transparent);        /* the hairline round a raised thing */
+
+  /* the three shadows every component already reads — layered: one close and crisp, one far and soft */
+  --shadow-card: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 8%, transparent),
+    0 0.375rem 0.75rem -0.125rem color-mix(in srgb, var(--_shade) 8%, transparent),
+    0 1.25rem 2.5rem -0.75rem color-mix(in srgb, var(--_shade) 14%, transparent);
+  --shadow-float: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.5rem 1.25rem -0.25rem color-mix(in srgb, var(--_shade) 22%, transparent);
+  --shadow-sheet: var(--finish-edge), var(--finish-ring),
+    0 -1px 2px color-mix(in srgb, var(--_shade) 6%, transparent),
+    0 -0.75rem 2.5rem color-mix(in srgb, var(--_shade) 18%, transparent);
+
+  /* a control: its own small lift, and the sheen that runs down its face */
+  --finish-control: var(--finish-edge), var(--finish-ring),
+    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.25rem 0.5rem -0.125rem color-mix(in srgb, var(--_shade) 12%, transparent);
+  --finish-control-down: var(--finish-ring), inset 0 1px 2px color-mix(in srgb, var(--_shade) 18%, transparent);
+  --finish-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 60%);
+  --finish-sunk: inset 0 1px 2px color-mix(in srgb, var(--_shade) 14%, transparent), 0 1px 0 rgb(255 255 255 / 0.5);
+
+  /* the shadow is the edge: the wireframe's lines step back (as in every colour palette) */
+  --card-border: transparent;
+  --action-border: transparent;
+  --outline: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+/* ---- raised: cards, sheets, the stack ---- */
+[data-finish="lit"] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
+[data-finish="lit"] .band-stack > .card--band { box-shadow: none; }
+/* a sheet lies on the floor and is lit from above: its shadow falls UP the screen, onto what it covers */
+[data-finish="lit"] .sheet { box-shadow: var(--sheet-shadow, var(--shadow-sheet)); }
+[data-finish="lit"] .modal { box-shadow: var(--modal-shadow, var(--shadow-float)); }
+[data-finish="lit"] .sheet-stack > .card,
+[data-finish="lit"] .sheet-stack > :not(.card, .sheet-stack__base) > .card { box-shadow: var(--shadow-sheet); }
+
+/* ---- controls: a filled button stands up, and goes down under the finger ---- */
+[data-finish="lit"] .btn:not(.btn--quiet),
+[data-finish="lit"] .icon-btn:not(.icon-btn-group > *, .stack-sheet__tab:not(.icon-btn--invert)) {
+  background-image: var(--finish-sheen);
+  box-shadow: var(--finish-control);
+}
+/* the main button throws its own colour */
+[data-finish="lit"] .btn--primary,
+[data-finish="lit"] .icon-btn--invert:not(.icon-btn-group > *) {
+  box-shadow: var(--finish-edge),
+    0 1px 2px color-mix(in srgb, var(--_shade) 20%, transparent),
+    0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);
+}
+[data-finish="lit"] :is(.btn:not(.btn--quiet), .icon-btn:not(.icon-btn-group > *, .stack-sheet__tab:not(.icon-btn--invert))):active:not(:disabled) {
+  background-image: none;
+  box-shadow: var(--finish-control-down);
+}
+[data-finish="lit"] .icon-btn-group { box-shadow: var(--finish-control); }
+[data-finish="lit"] .toggle { box-shadow: var(--finish-sunk); }
+[data-finish="lit"] .toggle::after { box-shadow: 0 1px 2px color-mix(in srgb, var(--_shade) 35%, transparent); }
+
+/* ---- sunk: what the member types into ---- */
+[data-finish="lit"] :is(.field, .pin__cell) { box-shadow: var(--finish-sunk); }
+

package/dist/layover/Snackbar.d.ts

@@ -10,8 +10,8 @@ export interface SnackbarProps extends Omit<ComponentProps<'div'>, 'onClick'> {
     onOpenChange?: (open: boolean, reason: SnackbarReason) => void;
     /** how long it stays, in ms (default 4000); 0 = until the app closes it */
     duration?: number;
-    /** a glyph before the words */
-    icon?: IconName;
+    /** the glyph before the words — `check` by default (it went right); `false` = none */
+    icon?: IconName | false;
     /** a second, smaller line under the words */
     caption?: ReactNode;
     /** at the screen's foot, above its bottom layer, instead of the top */
@@ -22,7 +22,7 @@ export interface SnackbarProps extends Omit<ComponentProps<'div'>, 'onClick'> {
     onClosed?: () => void;
 }
 /**
- * Snackbar — a quick GOOD-NEWS line laid over the screen: something went well, said in passing. It slides in from the screen's top
+ * Snackbar — a quick GOOD-NEWS line laid over the screen: something went well, said in passing: a check and the words on the soft tone. It slides in from the screen's top
  * (or `bottom`), stays `duration`, slides out, never takes the cursor and never stops the member. Not for a warning or a question —
  * that is a `Modal`. A child of the `Screen`. Controlled like an input: `open` + `onOpenChange(open, reason)`, or `defaultOpen`;
  * ONE at a time — the queue is the app's (what it shows is the app's own notification, kept in the app's list; a tap = `onTap`).

package/dist/layover/Snackbar.js

@@ -4,12 +4,12 @@ import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 import { reducedMotion, useControlled, useLatest } from '../state.js';
 /**
- * Snackbar — a quick GOOD-NEWS line laid over the screen: something went well, said in passing. It slides in from the screen's top
+ * Snackbar — a quick GOOD-NEWS line laid over the screen: something went well, said in passing: a check and the words on the soft tone. It slides in from the screen's top
  * (or `bottom`), stays `duration`, slides out, never takes the cursor and never stops the member. Not for a warning or a question —
  * that is a `Modal`. A child of the `Screen`. Controlled like an input: `open` + `onOpenChange(open, reason)`, or `defaultOpen`;
  * ONE at a time — the queue is the app's (what it shows is the app's own notification, kept in the app's list; a tap = `onTap`).
  */
-export function Snackbar({ open, defaultOpen = true, onOpenChange, duration = 4000, icon, caption, bottom, onTap, onClosed, className, children, ...rest }) {
+export function Snackbar({ open, defaultOpen = true, onOpenChange, duration = 4000, icon = 'check', caption, bottom, onTap, onClosed, className, children, ...rest }) {
     const [shown, request] = useControlled(open, defaultOpen, onOpenChange);
     const [entered, setEntered] = useState(false); // its first frame is out of sight, so one mounted open slides in
     const closed = useLatest(onClosed);

package/dist/templates/CallSheet.d.ts

@@ -21,10 +21,13 @@ export interface CallSheetWay {
     /** what that button brings up */
     sheet: CallSheetSheet;
 }
-export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'children' | 'fill' | 'top' | 'bottom' | 'title'> {
+export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'children' | 'fill' | 'bottom' | 'title'> {
+    /** TOP (optional, the Screen's own): none by default — the page starts at the lead (15%). A walk in several sheets may stand
+     *  its `Track` here: it stays in sight over every sheet, a full sheet stops under it. */
+    top?: ComponentProps<typeof Screen>['top'];
     /** a picture above the words (optional) */
     media?: ReactNode;
-    /** the page's one heading — its h1 (there is no top) */
+    /** the page's one heading — its h1 */
     heading: ReactNode;
     /** the words: a string is one paragraph */
     body?: ReactNode;
@@ -46,7 +49,7 @@ export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'chi
     children?: ReactNode;
 }
 /**
- * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
+ * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top (or the one given: `top`) · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
  * words · the button, or several — `ways`) and the `Sheet` each button calls · no bottom (a sheet finishes on its own foot). The page
  * starts at the screen's lead (15%). The sheets wait `away`; a button brings its own up full; the handle takes it down to peek.
  * One sheet up at a time — a sheet holds that way's WHOLE form.

package/dist/templates/CallSheet.js

@@ -12,7 +12,7 @@ import { Text } from '../type/Text.js';
 import { Btn } from '../actions/Btn.js';
 const index = (o) => (o === true ? 0 : typeof o === 'number' ? o : null);
 /**
- * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
+ * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top (or the one given: `top`) · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
  * words · the button, or several — `ways`) and the `Sheet` each button calls · no bottom (a sheet finishes on its own foot). The page
  * starts at the screen's lead (15%). The sheets wait `away`; a button brings its own up full; the handle takes it down to peek.
  * One sheet up at a time — a sheet holds that way's WHOLE form.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.43",
+  "version": "0.7.45",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",