@usableapp/cardds 0.7.1 → 0.7.2

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 > 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.2 — 2026-09-24
+
+### `Banner` is one light band (breaking)
+- Before: `summary` was a `Chip on` (with its chevron Icon) that opened a `card--3` body under it; `tone` 2 | 3.
+  After: ONE band — a light tint (`--ink-tint`), a hairline above and below, edge to edge of its card or screen; the
+  summary line and the body share it. `summary` = words (the chevron is the Banner's own); `tone` is gone. Fix:
+  `<Banner summary={<Chip on>Save 2 h… <Icon …/></Chip>}>` → `<Banner summary="Save 2 h…">`. Knobs `--banner-bg`,
+  `--banner-border`, `--banner-summary-pad-y`, `--banner-summary-font`. A read-only note inside a sheet or card is a
+  `Banner`, not a `Card sm`.
+
+### New
+- `Splash` (template): the app's own mark (its Lottie player, an img — cardds plays nothing) + one `text` line, the group's
+  middle on `--screen-centre`; `done` (the app is ready) · `min` (ms at least) · `onLeft` (after the fade; unmount then);
+  reduced motion = no fade. Knobs `--splash-mark-w`, `--splash-mark-x` / `-y` (nudge a lottie's drawing onto the line),
+  `--splash-at`, `--splash-bg`, `--splash-text-ink`, `--splash-gap`.
+- `Rows heading` — a list grouped (Today · This week), not spaced out. Knobs `--rows-head-ink`, `--rows-group-gap`.
+- `Chip muted`, `Dropdown muted` — an untouched default reads quiet; drop `muted` once the member picks.
+- README rules 11–14: a screen is scanned, not read — edges, show don't explain, quiet defaults, a frame says "tap me"
+  (inside a card only a control has an edge; a count is `Text caption muted`, never a `Chip`).
+
+### Fixed
+- `Modal` with no `Drawer` stretched to the whole stage in Safari 18 (iOS 18.6): it is centred by `top: 50%` +
+  `translate: -50%` now.
+- `Tile stat` has no frame (it is read, not pressed).
+- `StackSheet` head: tabs 8px apart (`--stack-sheet-tabs-gap`), the title on the discs' middle
+  (`--stack-sheet-title-shift`), ONE line always — a title that does not fit runs sideways, one way, and starts again
+  (`--stack-sheet-run-time`); reduced motion = an ellipsis.
+
 ## 0.7.1 — 2026-09-24
 
 ### The bar fixed from outside is gone

package/README.md

@@ -497,6 +497,34 @@ Demo: the *skeleton* block at the top of `elements.html`.
     `--on-accent` to its own ink and bg, so every accent consumer (buttons,
     checks, toggles, rings, selected days) inverts without extra rules.
 
+**A screen is scanned, not read** (Lh 2026-09-24) — a member arrives with one
+question and hunts for its answer. Rules 11–13 serve that:
+
+11. **Everything holds to edges.** Every element touches at least two edges —
+    the card's, the column's, or a line made by the thing above it (a row, the
+    avatar + name line). Words to READ are aligned start, values end (the
+    receipt: items left, prices right; `.card__head`, `.kv`, `.row`); centred
+    only what is not read — dots, a lone number, an icon, a mark. Empty room is
+    not filled with more content; a new edge is made instead (line the buttons
+    up with the avatar).
+12. **Show, don't explain.** Where a known picture carries it — an avatar for a
+    person, an icon, a `Ring`/`Track`/`Band`, a `Chip` for a category — use it
+    instead of words. Never add a label, a caption line, a comparison or a
+    tooltip to explain what the picture already says (the retired overline was
+    that mistake). Long lists are differentiated, not spaced out: group them
+    (`Rows heading` per group), put the avatar where a person is named.
+13. **Emphasis is the difference from the neighbours.** An untouched default
+    is quiet (grey, thin border, no fill — `Chip muted`, `Dropdown muted`);
+    only what the member changed, or the one thing asked of them, takes the
+    accent. To make one thing stand out, calm what surrounds it — never
+    bolder, never a second colour.
+14. **A frame says "tap me".** Inside a card, only a control draws its own
+    edge (a chip, a field, a pick tile, a small `Card sm` to pick). What is
+    only READ never gets a frame — no card in a card: a stat tile stands on
+    the card's ground, a note is a `Banner` (a light band, a rule above and
+    below, edge to edge), a count is words (`Text caption muted`), never a
+    chip. A chip or tile that looks pressable and is not lies.
+
 ## A project's theme
 
 A project retunes cardds from ONE file of its own, and nothing else. Copy

package/css/actions.css

@@ -158,6 +158,8 @@
    letters' own middle, in em so it follows the text size (Lh 2026-09-22: "ตัวหนังสือกับไฟเสมอกัน") */
 .dot--b { background: var(--dot-b); }
 .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)); }
 /* dark-slot inversion lives in card.css (.card--3 :is(...)) */
 
 .chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@@ -187,6 +189,8 @@
   text-align: left;
   cursor: pointer;
 }
+/* muted: the value is still the default (README 13) */
+.dropdown--muted .dropdown__btn { color: var(--dropdown-muted-ink, var(--card-muted)); }
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dropdown__btn > .icon { transition: rotate 0.2s ease; }
 .dropdown:has(.menu:popover-open) .dropdown__btn > .icon { rotate: 180deg; }

package/css/layover.css

@@ -31,12 +31,11 @@
    Reduced motion: the finished state, no beats; closing fires at once. */
 .modal {
   --drawer-h: 14rem;
-  position: absolute;             /* at the stage's centre, and kept there as it grows: absolute + margin auto re-centres on every height */
-  inset: 0;
-  margin: auto;
-  height: auto;
-  align-self: center;             /* inset 0 alone would stretch it to the stage: centre self-alignment gives it its own height, the margins
-                                     share the rest. NOT `height: fit-content` — WebKit/Safari sizes it wrong (Lh 2026-09-24, iOS 18.6) */
+  position: absolute;             /* at the stage's centre, and kept there as it grows: its middle is pinned at 50% and */
+  top: 50%;                       /* translate -50% of its OWN height re-centres it on every height. NOT inset 0 + margin auto + */
+  inset-inline: 0;                /* align-self: center — Safari 18 ignores align-self on an absolute box in a block container, */
+  margin-inline: auto;            /* so the card stretched to the whole stage (iOS 18.6, Lh 2026-09-24); nor height: fit-content */
+  translate: 0 -50%;
   width: calc(100% - 2 * var(--screen-pad));
   z-index: 2;                     /* over the dim stage's scrim (z 1) */
   max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) */
@@ -80,8 +79,8 @@
   .modal { animation: modal-drop calc(2 * var(--motion-sheet)) ease both; }
   .modal__drawer { animation: modal-open calc(2 * var(--motion-sheet)) ease both; }
   @keyframes modal-drop {
-    0%        { translate: 0 -100cqh; }   /* above the stage */
-    50%, 100% { translate: 0 0; }         /* 1. at the centre — and it stays: beat 2 is the drawer's */
+    0%        { translate: 0 calc(-50% - 100cqh); }   /* above the stage */
+    50%, 100% { translate: 0 -50%; }       /* 1. at the centre — and it stays: beat 2 is the drawer's */
   }
   @keyframes modal-open {
     0%, 50%   { height: 0; padding-block: 0; }                       /* inside the card */
@@ -166,16 +165,29 @@
   @starting-style { .menu:popover-open { opacity: 0; translate: 0 calc(-1 * var(--sp-2)); } }
 }
 
-/* ---- banner: a chip that opens into a tinted card, no JS ----
-   <details class="banner"><summary class="chip chip--on">Save $30 on orders over $70 <svg class="icon icon--xs"/></summary>
-     <div class="card card--3 banner__body">…</div></details> */
-.banner { display: grid; gap: var(--banner-gap, var(--sp-2)); justify-items: start; }
-.banner > summary { list-style: none; cursor: pointer; }
-.banner > summary::-webkit-details-marker { display: none; }
-.banner > summary .icon { transition: rotate 0.2s ease; }
-.banner[open] > summary .icon { rotate: 180deg; }
-.banner__body { width: 100%; padding: var(--banner-body-pad-y, var(--sp-4)) var(--banner-body-pad-x, var(--sp-5)); --card-gap: var(--sp-1); }
-.banner::details-content { width: 100%; } /* Chromium wraps the content in this pseudo; justify-items: start shrink-wrapped it, so the body never reached the width */
+/* ---- banner: ONE band — the line that opens it and the body share one ground (Lh 2026-09-24: "ปุ่มกับเนื้อหาใช้พื้นที่เดียวกัน") ----
+   <details class="banner"><summary class="banner__summary">Save 2 h… <svg class="icon icon--xs"/></summary>
+     <div class="banner__body">…</div></details>
+   A light tint (not a card tone) with a slightly darker rule above and below, edge to edge of its card or screen (Lh 2026-09-24). */
+.banner {
+  display: grid;
+  background: var(--banner-bg, var(--ink-tint));
+  color: var(--banner-ink, inherit);
+  border-block: var(--border-w) solid var(--banner-border, var(--hairline));
+  /* a band edge to edge of what holds it — the card's or the screen's inset; no radius, no side border: a band, not a card */
+  margin-inline: calc(-1 * var(--card-pad, var(--screen-pad)));
+  padding-inline: var(--card-pad, var(--screen-pad));
+}
+.banner__summary {
+  list-style: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
+  padding-block: var(--banner-summary-pad-y, calc(var(--sp-base) * 1.5)); font: var(--banner-summary-font, var(--type-caption)); font-weight: 400;
+}
+.banner__summary::-webkit-details-marker { display: none; }
+.banner__summary .icon { transition: rotate 0.2s ease; }
+.banner[open] .banner__summary .icon { rotate: 180deg; }
+.banner__body { display: grid; gap: var(--banner-body-gap, var(--sp-1)); padding-bottom: var(--sp-4); }
+.banner::details-content { width: 100%; }
 @supports (interpolate-size: allow-keywords) {
   @media (prefers-reduced-motion: no-preference) {
     .banner { interpolate-size: allow-keywords; }
@@ -289,3 +301,21 @@
 .deck > .card:nth-last-child(n + 4) { display: none; }
 .deck__actions { display: flex; justify-content: center; gap: var(--deck-actions-gap, var(--sp-8)); }
 .deck__actions > .icon-btn { width: var(--bar-h); height: var(--bar-h); }
+
+/* ---- splash: the app's mark at the human centre while it boots (Lh 2026-09-24) ----
+   <section class="screen screen--fill splash"><div class="splash__group"><div class="splash__mark">{the app's lottie/img}</div>
+     <p class="splash__text">…</p></div></section>
+   The group's MIDDLE is on --screen-centre (40% down), the same line a centred card uses. The mark is the app's own content —
+   a lottie box often carries empty room around its drawing — the app sets the knobs below, cardds does not guess it. */
+.splash { position: relative; background: var(--splash-bg, var(--surface)); transition: opacity var(--motion-sheet) ease; }
+.splash--leaving { opacity: 0; }
+.splash__group {
+  position: absolute; inset-inline: var(--screen-pad); top: var(--splash-at, var(--screen-centre)); translate: 0 -50%;
+  display: grid; justify-items: center; gap: var(--splash-gap, var(--sp-4)); text-align: center;
+}
+.splash__mark { width: var(--splash-mark-w, 60%); max-width: 100%; translate: var(--splash-mark-x, 0) var(--splash-mark-y, 0); }
+/* each app's lottie is its own size and carries its own empty room: --splash-mark-w sizes the box, --splash-mark-x / -y nudge the
+   drawing onto the centre line (the line under it does not move), --splash-at moves the whole group (default the 40% line) */
+.splash__mark > * { display: block; width: 100%; height: auto; }
+.splash__text { margin: 0; font: var(--type-body); color: var(--splash-text-ink, var(--on-surface-muted)); }
+@media (prefers-reduced-motion: reduce) { .splash { transition: none; } }

package/css/lists.css

@@ -67,6 +67,9 @@
 /* rows: a list of rows separated by hairlines */
 .rows { display: grid; --rows-gap: var(--sp-4); row-gap: var(--rows-gap); }
 .rows:has(> .row--lg) { --rows-gap: var(--sp-6); }
+/* the group's name: a label on the rows' start edge; two groups one after another read apart by it, not by space */
+.rows__head { font: var(--type-label); color: var(--rows-head-ink, var(--card-muted)); }
+.rows + .rows { margin-top: var(--rows-group-gap, var(--sp-6)); }
 /* the hairline between rows sits in the middle of the gap — drawn, not spaced:
    no padding, no spacer element */
 .rows > .row + .row { position: relative; }

package/css/media.css

@@ -90,6 +90,8 @@
 .tile--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 .tile--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 .tile--wide { grid-column: 1 / -1; }
+/* stat: READ, not pressed — no frame of its own inside a card (a frame says "tap me"): icon · value · words on the card's ground */
+.tile--stat { border-color: transparent; background: none; padding-inline: 0; cursor: default; }
 .tile--stat { min-height: var(--tile-stat-min-h, var(--avatar-xl)); gap: var(--tile-stat-gap, var(--sp-3)); grid-template-columns: auto 1fr; align-items: center; }
 /* upload: dashed, centred plus + label */
 .tile--upload {

package/css/stack.css

@@ -271,7 +271,25 @@
 
 /* ---- StackSheet's tabs (Lh 2026-09-23): the head's end is a row of small icon buttons, the sheet's pages — the chosen one
    filled (.icon-btn--invert); a count is a small circle over the icon's top right corner ---- */
-.stack-sheet__tabs { display: flex; gap: var(--stack-sheet-tabs-gap, 0rem); flex: none; } /* no gap: each tab is a 40px target already, and an open head (back · title · tabs) must fit one line — Lh 2026-09-23 */
+.stack-sheet__tabs { display: flex; gap: var(--stack-sheet-tabs-gap, var(--sp-2)); flex: none; } /* room between the tabs: with none, the chosen tab's disc touched its neighbour's (Lh 2026-09-24) */
+/* the head is ONE line, always (Lh 2026-09-24): the tabs keep their size, the TITLE gives — it never wraps, it runs sideways
+   (StackSheet measures --_over, the width it overflows by, and sets .is-long), one way: it waits, runs to the end, waits, and starts again from the first letter — like a song title */
+.stack-sheet > .card__head { flex-wrap: nowrap; }
+.stack-sheet__title {
+  flex: 1; min-width: 0; overflow-x: clip; overflow-y: visible; white-space: nowrap; overflow-wrap: normal; /* clip SIDEWAYS only:
+     hidden clipped the Thai tone marks above a line-height-1 line (เพื่อน lost its ไม้เอก — Lh 2026-09-24) */
+  translate: 0 var(--stack-sheet-title-shift, -0.1em); /* FC Pride's line box carries more room above its letters than below: the
+     letters sat ~0.1em under the middle of the back disc and the tabs — lifted onto it (Lh 2026-09-24) */
+}
+.stack-sheet__run { display: inline-block; }
+.stack-sheet__title.is-long .stack-sheet__run {
+  animation: stack-sheet-run var(--stack-sheet-run-time, var(--_run, 6s)) ease-in-out infinite; /* ONE way: start → end, then back to the start at once (Lh 2026-09-24) */ /* --_run: from the overflow, 30px a second + the pauses */
+}
+@keyframes stack-sheet-run { 0%, 20% { translate: 0; } 85%, 100% { translate: calc(-1 * var(--_over)); } }
+@media (prefers-reduced-motion: reduce) {
+  .stack-sheet__title.is-long .stack-sheet__run { animation: none; display: inline; } /* inline: an ellipsis cannot cut an inline-block */
+  .stack-sheet__title.is-long { text-overflow: ellipsis; }
+}
 .stack-sheet__tab { position: relative; }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;

package/dist/actions/Chip.d.ts

@@ -2,6 +2,8 @@ import { type ComponentProps, type ReactNode } from 'react';
 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';
     /** the element: span (default), a link, or a button */
@@ -10,7 +12,7 @@ export interface ChipProps extends ComponentProps<'span'> {
     children?: ReactNode;
 }
 /** 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 declare function Chip({ on, dot, as, href, className, children, ...rest }: ChipProps): import("react").DetailedReactHTMLElement<{
+export declare function Chip({ on, muted, dot, as, href, className, children, ...rest }: ChipProps): import("react").DetailedReactHTMLElement<{
     ref?: import("react").Ref<HTMLSpanElement> | undefined;
     key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined;

package/dist/actions/Chip.js

@@ -3,9 +3,9 @@ import { createElement } from 'react';
 import { cx } from '../cx.js';
 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, dot, as, href, className, children, ...rest }) {
+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', 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' }), 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/Dropdown.d.ts

@@ -13,6 +13,8 @@ export interface DropdownProps extends Omit<ComponentProps<'div'>, 'onChange' |
     label?: ReactNode;
     /** right-aligned trigger: the panel grows leftwards (in TopBar actions) */
     end?: boolean;
+    /** quiet: the value is still the default — muted words; drop it once the member picks (README rule 13) */
+    muted?: boolean;
     /** MenuItems, each with a `value` */
     children?: ReactNode;
 }
@@ -22,7 +24,7 @@ export interface DropdownProps extends Omit<ComponentProps<'div'>, 'onChange' |
  * input: `value` + `onChange`, or `defaultValue`. Children are MenuItems with a `value`; the chosen one is marked and names the pill.
  * In a FilterRow dropdowns share the width.
  */
-export declare function Dropdown({ id, value, defaultValue, onChange, label, end, className, children, ...rest }: DropdownProps): import("react").JSX.Element;
+export declare function Dropdown({ id, value, defaultValue, onChange, label, end, muted, className, children, ...rest }: DropdownProps): import("react").JSX.Element;
 export interface MenuProps extends Omit<ComponentProps<'div'>, 'popover' | 'onChange' | 'defaultValue'> {
     /** render as a popover panel: give it an `id`, and ANY button opens it with the platform's own `popoverTarget={id}` — the Menu does
      *  not know which. Omit for an inline menu card */

package/dist/actions/Dropdown.js

@@ -19,10 +19,10 @@ function useValue(value, defaultValue, onChange) {
  * input: `value` + `onChange`, or `defaultValue`. Children are MenuItems with a `value`; the chosen one is marked and names the pill.
  * In a FilterRow dropdowns share the width.
  */
-export function Dropdown({ id, value, defaultValue, onChange, label, end, className, children, ...rest }) {
+export function Dropdown({ id, value, defaultValue, onChange, label, end, muted, className, children, ...rest }) {
     const [current, pick] = useValue(value, defaultValue, onChange);
     const chosen = Children.toArray(children).find((c) => isValidElement(c) && c.props.value === current);
-    return (_jsxs("div", { className: cx('dropdown', end && 'dropdown--end', className), "data-value": current, ...rest, children: [_jsxs("button", { type: "button", className: "dropdown__btn", popoverTarget: id, children: [_jsx("span", { className: "dropdown__label", children: label ?? (isValidElement(chosen) ? chosen.props.children : null) }), _jsx(Icon, { name: "chevron-down", size: "xs" })] }), _jsx(Menu, { popover: true, id: id, value: current, onChange: pick, children: children })] }));
+    return (_jsxs("div", { className: cx('dropdown', end && 'dropdown--end', muted && 'dropdown--muted', className), "data-value": current, ...rest, children: [_jsxs("button", { type: "button", className: "dropdown__btn", popoverTarget: id, children: [_jsx("span", { className: "dropdown__label", children: label ?? (isValidElement(chosen) ? chosen.props.children : null) }), _jsx(Icon, { name: "chevron-down", size: "xs" })] }), _jsx(Menu, { popover: true, id: id, value: current, onChange: pick, children: children })] }));
 }
 /**
  * Menu — a card of MenuItems: a popover, or inline rows of icon + label. A COMPONENT on its own — what opens a popover Menu is any

package/dist/cardds.css

@@ -1114,7 +1114,25 @@ button { font: inherit; cursor: pointer; }
 
 /* ---- StackSheet's tabs (Lh 2026-09-23): the head's end is a row of small icon buttons, the sheet's pages — the chosen one
    filled (.icon-btn--invert); a count is a small circle over the icon's top right corner ---- */
-.stack-sheet__tabs { display: flex; gap: var(--stack-sheet-tabs-gap, 0rem); flex: none; } /* no gap: each tab is a 40px target already, and an open head (back · title · tabs) must fit one line — Lh 2026-09-23 */
+.stack-sheet__tabs { display: flex; gap: var(--stack-sheet-tabs-gap, var(--sp-2)); flex: none; } /* room between the tabs: with none, the chosen tab's disc touched its neighbour's (Lh 2026-09-24) */
+/* the head is ONE line, always (Lh 2026-09-24): the tabs keep their size, the TITLE gives — it never wraps, it runs sideways
+   (StackSheet measures --_over, the width it overflows by, and sets .is-long), one way: it waits, runs to the end, waits, and starts again from the first letter — like a song title */
+.stack-sheet > .card__head { flex-wrap: nowrap; }
+.stack-sheet__title {
+  flex: 1; min-width: 0; overflow-x: clip; overflow-y: visible; white-space: nowrap; overflow-wrap: normal; /* clip SIDEWAYS only:
+     hidden clipped the Thai tone marks above a line-height-1 line (เพื่อน lost its ไม้เอก — Lh 2026-09-24) */
+  translate: 0 var(--stack-sheet-title-shift, -0.1em); /* FC Pride's line box carries more room above its letters than below: the
+     letters sat ~0.1em under the middle of the back disc and the tabs — lifted onto it (Lh 2026-09-24) */
+}
+.stack-sheet__run { display: inline-block; }
+.stack-sheet__title.is-long .stack-sheet__run {
+  animation: stack-sheet-run var(--stack-sheet-run-time, var(--_run, 6s)) ease-in-out infinite; /* ONE way: start → end, then back to the start at once (Lh 2026-09-24) */ /* --_run: from the overflow, 30px a second + the pauses */
+}
+@keyframes stack-sheet-run { 0%, 20% { translate: 0; } 85%, 100% { translate: calc(-1 * var(--_over)); } }
+@media (prefers-reduced-motion: reduce) {
+  .stack-sheet__title.is-long .stack-sheet__run { animation: none; display: inline; } /* inline: an ellipsis cannot cut an inline-block */
+  .stack-sheet__title.is-long { text-overflow: ellipsis; }
+}
 .stack-sheet__tab { position: relative; }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;
@@ -1984,6 +2002,8 @@ button { font: inherit; cursor: pointer; }
    letters' own middle, in em so it follows the text size (Lh 2026-09-22: "ตัวหนังสือกับไฟเสมอกัน") */
 .dot--b { background: var(--dot-b); }
 .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)); }
 /* dark-slot inversion lives in card.css (.card--3 :is(...)) */
 
 .chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@@ -2013,6 +2033,8 @@ button { font: inherit; cursor: pointer; }
   text-align: left;
   cursor: pointer;
 }
+/* muted: the value is still the default (README 13) */
+.dropdown--muted .dropdown__btn { color: var(--dropdown-muted-ink, var(--card-muted)); }
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dropdown__btn > .icon { transition: rotate 0.2s ease; }
 .dropdown:has(.menu:popover-open) .dropdown__btn > .icon { rotate: 180deg; }
@@ -2900,6 +2922,9 @@ button { font: inherit; cursor: pointer; }
 /* rows: a list of rows separated by hairlines */
 .rows { display: grid; --rows-gap: var(--sp-4); row-gap: var(--rows-gap); }
 .rows:has(> .row--lg) { --rows-gap: var(--sp-6); }
+/* the group's name: a label on the rows' start edge; two groups one after another read apart by it, not by space */
+.rows__head { font: var(--type-label); color: var(--rows-head-ink, var(--card-muted)); }
+.rows + .rows { margin-top: var(--rows-group-gap, var(--sp-6)); }
 /* the hairline between rows sits in the middle of the gap — drawn, not spaced:
    no padding, no spacer element */
 .rows > .row + .row { position: relative; }
@@ -3131,6 +3156,8 @@ button { font: inherit; cursor: pointer; }
 .tile--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 .tile--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 .tile--wide { grid-column: 1 / -1; }
+/* stat: READ, not pressed — no frame of its own inside a card (a frame says "tap me"): icon · value · words on the card's ground */
+.tile--stat { border-color: transparent; background: none; padding-inline: 0; cursor: default; }
 .tile--stat { min-height: var(--tile-stat-min-h, var(--avatar-xl)); gap: var(--tile-stat-gap, var(--sp-3)); grid-template-columns: auto 1fr; align-items: center; }
 /* upload: dashed, centred plus + label */
 .tile--upload {
@@ -3359,12 +3386,11 @@ button { font: inherit; cursor: pointer; }
    Reduced motion: the finished state, no beats; closing fires at once. */
 .modal {
   --drawer-h: 14rem;
-  position: absolute;             /* at the stage's centre, and kept there as it grows: absolute + margin auto re-centres on every height */
-  inset: 0;
-  margin: auto;
-  height: auto;
-  align-self: center;             /* inset 0 alone would stretch it to the stage: centre self-alignment gives it its own height, the margins
-                                     share the rest. NOT `height: fit-content` — WebKit/Safari sizes it wrong (Lh 2026-09-24, iOS 18.6) */
+  position: absolute;             /* at the stage's centre, and kept there as it grows: its middle is pinned at 50% and */
+  top: 50%;                       /* translate -50% of its OWN height re-centres it on every height. NOT inset 0 + margin auto + */
+  inset-inline: 0;                /* align-self: center — Safari 18 ignores align-self on an absolute box in a block container, */
+  margin-inline: auto;            /* so the card stretched to the whole stage (iOS 18.6, Lh 2026-09-24); nor height: fit-content */
+  translate: 0 -50%;
   width: calc(100% - 2 * var(--screen-pad));
   z-index: 2;                     /* over the dim stage's scrim (z 1) */
   max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) */
@@ -3408,8 +3434,8 @@ button { font: inherit; cursor: pointer; }
   .modal { animation: modal-drop calc(2 * var(--motion-sheet)) ease both; }
   .modal__drawer { animation: modal-open calc(2 * var(--motion-sheet)) ease both; }
   @keyframes modal-drop {
-    0%        { translate: 0 -100cqh; }   /* above the stage */
-    50%, 100% { translate: 0 0; }         /* 1. at the centre — and it stays: beat 2 is the drawer's */
+    0%        { translate: 0 calc(-50% - 100cqh); }   /* above the stage */
+    50%, 100% { translate: 0 -50%; }       /* 1. at the centre — and it stays: beat 2 is the drawer's */
   }
   @keyframes modal-open {
     0%, 50%   { height: 0; padding-block: 0; }                       /* inside the card */
@@ -3494,16 +3520,29 @@ button { font: inherit; cursor: pointer; }
   @starting-style { .menu:popover-open { opacity: 0; translate: 0 calc(-1 * var(--sp-2)); } }
 }
 
-/* ---- banner: a chip that opens into a tinted card, no JS ----
-   <details class="banner"><summary class="chip chip--on">Save $30 on orders over $70 <svg class="icon icon--xs"/></summary>
-     <div class="card card--3 banner__body">…</div></details> */
-.banner { display: grid; gap: var(--banner-gap, var(--sp-2)); justify-items: start; }
-.banner > summary { list-style: none; cursor: pointer; }
-.banner > summary::-webkit-details-marker { display: none; }
-.banner > summary .icon { transition: rotate 0.2s ease; }
-.banner[open] > summary .icon { rotate: 180deg; }
-.banner__body { width: 100%; padding: var(--banner-body-pad-y, var(--sp-4)) var(--banner-body-pad-x, var(--sp-5)); --card-gap: var(--sp-1); }
-.banner::details-content { width: 100%; } /* Chromium wraps the content in this pseudo; justify-items: start shrink-wrapped it, so the body never reached the width */
+/* ---- banner: ONE band — the line that opens it and the body share one ground (Lh 2026-09-24: "ปุ่มกับเนื้อหาใช้พื้นที่เดียวกัน") ----
+   <details class="banner"><summary class="banner__summary">Save 2 h… <svg class="icon icon--xs"/></summary>
+     <div class="banner__body">…</div></details>
+   A light tint (not a card tone) with a slightly darker rule above and below, edge to edge of its card or screen (Lh 2026-09-24). */
+.banner {
+  display: grid;
+  background: var(--banner-bg, var(--ink-tint));
+  color: var(--banner-ink, inherit);
+  border-block: var(--border-w) solid var(--banner-border, var(--hairline));
+  /* a band edge to edge of what holds it — the card's or the screen's inset; no radius, no side border: a band, not a card */
+  margin-inline: calc(-1 * var(--card-pad, var(--screen-pad)));
+  padding-inline: var(--card-pad, var(--screen-pad));
+}
+.banner__summary {
+  list-style: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
+  padding-block: var(--banner-summary-pad-y, calc(var(--sp-base) * 1.5)); font: var(--banner-summary-font, var(--type-caption)); font-weight: 400;
+}
+.banner__summary::-webkit-details-marker { display: none; }
+.banner__summary .icon { transition: rotate 0.2s ease; }
+.banner[open] .banner__summary .icon { rotate: 180deg; }
+.banner__body { display: grid; gap: var(--banner-body-gap, var(--sp-1)); padding-bottom: var(--sp-4); }
+.banner::details-content { width: 100%; }
 @supports (interpolate-size: allow-keywords) {
   @media (prefers-reduced-motion: no-preference) {
     .banner { interpolate-size: allow-keywords; }
@@ -3618,3 +3657,21 @@ button { font: inherit; cursor: pointer; }
 .deck__actions { display: flex; justify-content: center; gap: var(--deck-actions-gap, var(--sp-8)); }
 .deck__actions > .icon-btn { width: var(--bar-h); height: var(--bar-h); }
 
+/* ---- splash: the app's mark at the human centre while it boots (Lh 2026-09-24) ----
+   <section class="screen screen--fill splash"><div class="splash__group"><div class="splash__mark">{the app's lottie/img}</div>
+     <p class="splash__text">…</p></div></section>
+   The group's MIDDLE is on --screen-centre (40% down), the same line a centred card uses. The mark is the app's own content —
+   a lottie box often carries empty room around its drawing — the app sets the knobs below, cardds does not guess it. */
+.splash { position: relative; background: var(--splash-bg, var(--surface)); transition: opacity var(--motion-sheet) ease; }
+.splash--leaving { opacity: 0; }
+.splash__group {
+  position: absolute; inset-inline: var(--screen-pad); top: var(--splash-at, var(--screen-centre)); translate: 0 -50%;
+  display: grid; justify-items: center; gap: var(--splash-gap, var(--sp-4)); text-align: center;
+}
+.splash__mark { width: var(--splash-mark-w, 60%); max-width: 100%; translate: var(--splash-mark-x, 0) var(--splash-mark-y, 0); }
+/* each app's lottie is its own size and carries its own empty room: --splash-mark-w sizes the box, --splash-mark-x / -y nudge the
+   drawing onto the centre line (the line under it does not move), --splash-at moves the whole group (default the 40% line) */
+.splash__mark > * { display: block; width: 100%; height: auto; }
+.splash__text { margin: 0; font: var(--type-body); color: var(--splash-text-ink, var(--on-surface-muted)); }
+@media (prefers-reduced-motion: reduce) { .splash { transition: none; } }
+

package/dist/index.d.ts

@@ -77,4 +77,5 @@ export * from './templates/Walkthrough.js';
 export * from './templates/Home.js';
 export * from './sheets/StackSheet.js';
 export * from './templates/CallSheet.js';
+export * from './templates/Splash.js';
 export * from './actions/ActionNote.js';

package/dist/index.js

@@ -81,4 +81,5 @@ export * from './templates/Walkthrough.js';
 export * from './templates/Home.js';
 export * from './sheets/StackSheet.js';
 export * from './templates/CallSheet.js';
+export * from './templates/Splash.js';
 export * from './actions/ActionNote.js';

package/dist/layover/Banner.d.ts

@@ -1,9 +1,8 @@
 import type { ComponentProps, ReactNode } from 'react';
-export interface BannerProps extends ComponentProps<'details'> {
-    /** the chip that opens it (a `Chip on` with a chevron Icon xs) */
+export interface BannerProps extends Omit<ComponentProps<'details'>, 'summary'> {
+    /** the line that opens it — words (and an inline Icon); the chevron is the Banner's own */
     summary: ReactNode;
-    /** the tone of the opened card */
-    tone?: 1 | 2 | 3;
 }
-/** Banner — a chip that expands into a tinted card, no JS (a native details). */
-export declare function Banner({ summary, tone, className, children, ...rest }: BannerProps): import("react").JSX.Element;
+/** Banner — ONE band: the line that opens it and what it opens share the same ground, so they read as one piece (Lh 2026-09-24).
+ *  A light tint with a darker rule above and below, edge to edge of its card or screen — a band, never a card in a card. A native details, no JS. */
+export declare function Banner({ summary, className, children, ...rest }: BannerProps): import("react").JSX.Element;

package/dist/layover/Banner.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** Banner — a chip that expands into a tinted card, no JS (a native details). */
-export function Banner({ summary, tone = 3, className, children, ...rest }) {
-    return (_jsxs("details", { className: cx('banner', className), ...rest, children: [_jsx("summary", { children: summary }), _jsx("div", { className: cx('card banner__body', tone !== 1 && `card--${tone}`), children: children })] }));
+import { Icon } from '../type/Icon.js';
+/** Banner — ONE band: the line that opens it and what it opens share the same ground, so they read as one piece (Lh 2026-09-24).
+ *  A light tint with a darker rule above and below, edge to edge of its card or screen — a band, never a card in a card. A native details, no JS. */
+export function Banner({ summary, className, children, ...rest }) {
+    return (_jsxs("details", { className: cx('banner', className), ...rest, children: [_jsxs("summary", { className: "banner__summary", children: [summary, _jsx(Icon, { name: "chevron-down", size: "xs" })] }), _jsx("div", { className: "banner__body", children: children })] }));
 }

package/dist/lists/Row.d.ts

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

package/dist/lists/Row.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement } from 'react';
+import { createElement, useId } from 'react';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 /**
@@ -18,7 +18,9 @@ export function Row({ lead, leadIcon, title, meta, body, end, endValue, endCapti
             e.currentTarget.open = open; if (is !== (open ?? !is))
             onOpenChange?.(is); }, children: [row, _jsx("div", { className: "row-expand__more", children: more })] }));
 }
-/** Rows — a list of Rows separated by hairlines. */
-export function Rows({ className, ...rest }) {
-    return _jsx("div", { className: cx('rows', className), ...rest });
+/** Rows — a list of Rows separated by hairlines; `heading` names the group (a `role="group"` labelled by it). */
+export function Rows({ heading, className, children, ...rest }) {
+    const id = useId();
+    const named = heading != null;
+    return (_jsxs("div", { className: cx('rows', className), role: named ? 'group' : undefined, "aria-labelledby": named ? id : undefined, ...rest, children: [named && _jsx("span", { className: "rows__head", id: id, children: heading }), children] }));
 }

package/dist/sheets/StackSheet.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { cx } from '../cx.js';
 import { Card } from '../cards/Card.js';
 import { CardHead } from '../cards/CardHead.js';
@@ -20,5 +20,24 @@ export function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab,
     const tab = tabProp ?? own;
     const pick = (id) => { if (tabProp === undefined)
         setOwn(id); onTabChange?.(id); };
-    return (_jsxs(Card, { tone: tone, className: cx('stack-sheet', className), ...rest, children: [_jsxs(CardHead, { children: [_jsx(StackBack, { label: backLabel }), _jsx(Text, { level: "h2", children: title }), tabs?.length ? (_jsx("span", { className: "stack-sheet__tabs", role: "tablist", children: tabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": t.id === tab, "aria-label": t.label, className: cx('icon-btn icon-btn--sm stack-sheet__tab', t.id === tab && 'icon-btn--invert'), onClick: () => pick(t.id), children: [_jsx(Icon, { name: t.icon }), t.count ? _jsx(Badge, { className: "stack-sheet__count", children: t.count > 99 ? '99+' : t.count }) : null] }, t.id))) })) : icon] }), _jsx(SheetBody, { role: tabs?.length ? 'tabpanel' : undefined, children: children }), foot != null && _jsx(CardFoot, { children: foot })] }));
+    // a title longer than its room does not wrap: it runs sideways, like a song title in a short slot — the room it overflows by
+    // is measured here (the tabs may grow with the text size) and handed to the CSS as --_over
+    const titleRef = useRef(null);
+    useEffect(() => {
+        const h = titleRef.current, run = h?.firstElementChild;
+        if (!h || !run || typeof ResizeObserver === 'undefined')
+            return;
+        const measure = () => {
+            const over = Math.max(0, Math.ceil(run.scrollWidth - h.clientWidth));
+            h.style.setProperty('--_over', `${over}px`);
+            h.style.setProperty('--_run', `${(over / 30 + 3).toFixed(1)}s`);
+            h.classList.toggle('is-long', over > 0);
+        };
+        const ro = new ResizeObserver(measure);
+        ro.observe(h);
+        ro.observe(run);
+        measure();
+        return () => ro.disconnect();
+    }, [title]);
+    return (_jsxs(Card, { tone: tone, className: cx('stack-sheet', className), ...rest, children: [_jsxs(CardHead, { children: [_jsx(StackBack, { label: backLabel }), _jsx(Text, { level: "h2", ref: titleRef, className: "stack-sheet__title", children: _jsx("span", { className: "stack-sheet__run", children: title }) }), tabs?.length ? (_jsx("span", { className: "stack-sheet__tabs", role: "tablist", children: tabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": t.id === tab, "aria-label": t.label, className: cx('icon-btn icon-btn--sm stack-sheet__tab', t.id === tab && 'icon-btn--invert'), onClick: () => pick(t.id), children: [_jsx(Icon, { name: t.icon }), t.count ? _jsx(Badge, { className: "stack-sheet__count", children: t.count > 99 ? '99+' : t.count }) : null] }, t.id))) })) : icon] }), _jsx(SheetBody, { role: tabs?.length ? 'tabpanel' : undefined, children: children }), foot != null && _jsx(CardFoot, { children: foot })] }));
 }

package/dist/templates/Splash.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { Screen } from '../scaffold/Screen.js';
+export interface SplashProps extends Omit<ComponentProps<typeof Screen>, 'children' | 'fill' | 'top' | 'bottom'> {
+    /** the app's mark — ITS OWN content: a Lottie player, an <img>, an SVG. cardds places it; it never plays anything itself */
+    mark: ReactNode;
+    /** one line under the mark (optional) */
+    text?: ReactNode;
+    /** the app is ready: the splash fades out (after `min`), then calls `onLeft` */
+    done?: boolean;
+    /** the least time it stays up, in ms, counted from when it appeared (default 0) — so a fast boot does not flash it */
+    min?: number;
+    /** it has faded out: the app unmounts it now */
+    onLeft?: () => void;
+}
+/**
+ * Splash — the screen an app shows while it boots: the app's mark (and a line) at the human centre, `--screen-centre` (40%) down,
+ * nothing else. A TEMPLATE: cardds does the place, the line, the timing and the fade; the mark is the app's (a Lottie it loads and
+ * plays, or a still) — cardds has no animation library. The app says when it is ready (`done`); `min` keeps a fast boot from
+ * flashing it. Each lottie is its own size: knobs `--splash-mark-w` (the box's width), `--splash-mark-x` / `--splash-mark-y` (nudge the
+ * drawing onto the line), `--splash-at` (the group's line, default --screen-centre) — in the app's theme.css or `style`. `onLeft` fires after the fade (at once under prefers-reduced-motion — the app should give its mark a still frame there too).
+ */
+export declare function Splash({ mark, text, done, min, onLeft, className, ...rest }: SplashProps): import("react").JSX.Element;

package/dist/templates/Splash.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Screen } from '../scaffold/Screen.js';
+import { cx } from '../cx.js';
+/**
+ * Splash — the screen an app shows while it boots: the app's mark (and a line) at the human centre, `--screen-centre` (40%) down,
+ * nothing else. A TEMPLATE: cardds does the place, the line, the timing and the fade; the mark is the app's (a Lottie it loads and
+ * plays, or a still) — cardds has no animation library. The app says when it is ready (`done`); `min` keeps a fast boot from
+ * flashing it. Each lottie is its own size: knobs `--splash-mark-w` (the box's width), `--splash-mark-x` / `--splash-mark-y` (nudge the
+ * drawing onto the line), `--splash-at` (the group's line, default --screen-centre) — in the app's theme.css or `style`. `onLeft` fires after the fade (at once under prefers-reduced-motion — the app should give its mark a still frame there too).
+ */
+export function Splash({ mark, text, done, min = 0, onLeft, className, ...rest }) {
+    const born = useRef(Date.now());
+    const [leaving, setLeaving] = useState(false);
+    const left = useRef(onLeft);
+    left.current = onLeft;
+    useEffect(() => {
+        if (!done)
+            return;
+        const t = setTimeout(() => setLeaving(true), Math.max(0, min - (Date.now() - born.current)));
+        return () => clearTimeout(t);
+    }, [done, min]);
+    useEffect(() => {
+        if (!leaving)
+            return;
+        const still = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+        const ms = still ? 0 : parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--motion-sheet')) * 1000 || 350;
+        const t = setTimeout(() => left.current?.(), ms);
+        return () => clearTimeout(t);
+    }, [leaving]);
+    return (_jsx(Screen, { fill: true, className: cx('splash', leaving && 'splash--leaving', className), role: "status", "aria-busy": !leaving, ...rest, children: _jsxs("div", { className: "splash__group", children: [_jsx("div", { className: "splash__mark", children: mark }), text != null && _jsx("p", { className: "splash__text", children: text })] }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "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.",