@usableapp/cardds 0.1.4 → 0.1.6

package/css/step.css

@@ -1,11 +1,11 @@
 /* ============================================================
    cardds/step.css — .step: one screen, one task.
-   What the member reads (a card), what the member does when the
+   What the member reads (words on the base — not a card, Lh 2026-09-16), what the member does when the
    step asks for it (a sheet, sheet.css), and the screen's one
    move (.action-bar, actions.css) OUTSIDE the step, below it.
 
    <section class="step">
-     <article class="card step__card">…the words…</article>           ← first
+     <section class="base-content">…the words…</section>               ← first
      <article class="card sheet sheet--half">…the controls…</article>  ← last, optional
    </section>
    <div class="action-bar">…</div>
@@ -59,10 +59,21 @@
    frame — the bar is fixed to the viewport wherever it sits. */
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
 
-/* the reading card: a plain card with a flex rule — it hugs its content,
-   and when the column runs out (a short phone, large text) it shrinks and
-   scrolls inside itself instead of pushing the bar or the sheet */
-.step__card {
+/* the reading block: a .base-content (base.css) — the same words-on-the-base
+   block as anywhere else (it was .step__card, and a .card before 2026-09-16;
+   Lh: a step reads like a page, not a card in a page — so it IS the page's
+   block, one name). Here it keeps a card's inner rhythm (a head, --card-gap
+   between things, the tokens .card publishes for the head and .bleed) and
+   gets the flex rule: it hugs its content, and when the column runs out (a
+   short phone, large text) it shrinks and scrolls inside itself instead of
+   pushing the bar or the sheet */
+.step > .base-content {
+  --card-pad: 0rem;              /* published for .bleed: nothing to cancel */
+  --card-gap: var(--sp-4);
+  gap: var(--card-gap);
+  padding-block: 0;              /* --_lead carries the top; the bar's room is the step's */
+  align-content: start;
+  color: var(--on-surface);
   flex: 0 1 auto;
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */

package/css/tokens.css

@@ -176,3 +176,4 @@
    ============================================================ */
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
+@property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }

package/dist/cardds.css

@@ -217,6 +217,7 @@
    ============================================================ */
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
+@property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }
 
 /* ---- css/palette.css — color settings — the file you tune ---- */
 /* ============================================================
@@ -338,6 +339,17 @@
    ============================================================ */
 
 *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+/* a control is a thing you press, not a thing you read: a long press never
+   raises the text-selection bar on it (Lh 2026-09-16). CONTROLS ONLY — words
+   in cards, rows and bodies stay selectable (an address, a code, a number
+   the member wants to copy), and inputs are untouched. Native buttons and
+   links are matched by element; the rest by the class that makes them one */
+button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--toggle, .chip--pick,
+.segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .dropdown__trigger, .track__step, .pager__at {
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
 
 /* the scale: everything is rem, so this one number resizes the whole system.
    100% = the user's text size (16px by default); narrow phones step to 15/16 so
@@ -384,6 +396,7 @@ button { font: inherit; cursor: pointer; }
   padding-inline: var(--screen-pad);
   display: grid;
   gap: var(--screen-gap);
+  align-content: start;      /* a screen taller than its content (a fixed phone) never spreads its rows — the top bar stays at the top, a row keeps its height */
 }
 .screen > * { min-width: 0; } /* content never widens the column past the viewport */
 /* a screen that carries its own palette (data-palette on the element, not on <html>)
@@ -430,15 +443,20 @@ button { font: inherit; cursor: pointer; }
 .t-caps  { text-transform: uppercase; }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 
-/* ---- section: frameless on-surface content + CTA (never a card) ---- */
-.section {
+/* ---- base content: words straight on the base, no card around them — an
+   overline, a heading, a paragraph, maybe a .cta-pack. Was .section until
+   2026-09-16 (Lh: the name said nothing about WHERE it lives; this one does).
+   In a .step it is the reading block and step.css adds the flex/scroll rule ---- */
+.base-content {
   display: grid;
   gap: var(--sp-3);
+  align-content: start;          /* a tall column never stretches the rows — the words hug the top */
   padding-block: var(--sp-4);
 }
-.section > .t-body { color: var(--on-surface-muted); max-width: 34ch; }
-.section .cta-pack {
+.base-content > .t-body { color: var(--on-surface-muted); max-width: 34ch; }
+.base-content .cta-pack {
   display: flex;
+  align-items: start;            /* buttons keep their own height, never the row's */
   gap: var(--sp-2);
   margin-top: var(--sp-2);
   flex-wrap: wrap;
@@ -451,15 +469,12 @@ button { font: inherit; cursor: pointer; }
   text-align: center;
   gap: var(--sp-2);
   padding: var(--sp-12) var(--sp-6);
-  color: var(--on-surface-muted);
+  color: var(--on-surface); /* full ink, icon and words alike: muted read as "disabled" at the middle of an empty screen (Lh 2026-09-16) — muted is for meta, not a sentence */
 }
-.empty-state > :is(h1, h2, h3) { color: var(--on-surface); } /* the heading in full ink, the words muted */
 .empty-state__action { margin-top: var(--sp-2); }
-/* inside a card (a section's "nothing yet"): the card's ink, the way .t-muted and .row__meta follow it */
-.card .empty-state { color: var(--card-muted); padding-block: var(--sp-6); }
-.card .empty-state > :is(h1, h2, h3) { color: var(--card-ink); }
+/* inside a card (a section's "nothing yet"): the card's ink */
+.card .empty-state { color: var(--card-ink); padding-block: var(--sp-6); }
 .card--3 .empty-state { color: inherit; }
-.card--3 .empty-state > :not(:is(h1, h2, h3)) { opacity: 0.7; }
 
 /* ---- css/card.css — card boundary + list variants ---- */
 /* ============================================================
@@ -1020,15 +1035,15 @@ button { font: inherit; cursor: pointer; }
 /* ---- css/sheet.css — sheet single: .sheet — one card as a bottom sheet, peek / half / full ---- */
 /* ============================================================
    cardds/sheet.css — sheet single: one card as a bottom sheet.
-   Three states: .sheet--peek · .sheet--half · .sheet--full
+   Four states: .sheet--peek · .sheet--half · .sheet--3q · .sheet--full
 
    A sheet is rigid material, exactly like a sheet in .sheet-stack--tap
    (stack.css): it is ALWAYS the full height of the box that holds it —
    set once by inset: 0, never written again, never transitioned — and
    a state is nothing but how far that full card has slid up. Peek is
    a full sheet that slid down until only its handle and title show;
-   half is one that slid down by half of itself; full is one that has
-   not slid at all. The box clips whatever slid below its bottom edge,
+   half is one that slid down by half of itself; 3q (three quarters,
+   Lh 2026-09-16) by a quarter; full is one that has not slid at all. The box clips whatever slid below its bottom edge,
    so a sheet at any height is still a card: rounded top, a straight
    cut at the box's edge, its content scrolling inside.
 
@@ -1048,7 +1063,11 @@ button { font: inherit; cursor: pointer; }
    page. Many sheets stacked as the app's menu are the other system,
    .sheet-stack (stack.css): the same material, its own class and file.
 
-   <article class="card sheet sheet--half" data-sheet-states="peek half full">
+   <article class="card sheet sheet--half" data-sheet-states="peek half 3q full">
+   A tap on the handle TOGGLES the sheet between its own state and peek
+   (Lh 2026-09-16) — never a step-by-step climb; a drag snaps to any of
+   the listed states, and the state it lands on becomes the one a tap
+   returns to.
      <button class="sheet__handle" type="button" aria-label="…"></button>
      <div class="card__head"><h2 class="t-h2">…</h2>…</div>
      <div class="sheet__body">…controls, or small content cards…</div>
@@ -1071,6 +1090,7 @@ button { font: inherit; cursor: pointer; }
      retune it: .my-sheet { --sheet-peek: … } */
   --sheet-peek: calc(var(--card-pad) + var(--_handle) + 2 * var(--card-gap) + var(--tap));
   --sheet-half: 0.5;              /* a share of the sheet's own height */
+  --sheet-3q: 0.25;               /* three quarters showing: slid by a quarter */
   /* the sheet's own height, seen from inside it: the box it slides in is the
      size container (.step, .sheet-stage), so 100cqh is that box, less what
      the sheet gives up at its top (--_top) and bottom (--_lift). The sheet
@@ -1101,6 +1121,7 @@ button { font: inherit; cursor: pointer; }
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
+.sheet--3q { --_y: calc(var(--sheet-3q) * 100%); --_cover: calc(var(--sheet-3q) * var(--_box)); }
 .sheet--peek { --_y: calc(100% - var(--sheet-peek)); --_cover: calc(var(--_box) - var(--sheet-peek)); }
 .sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */
 
@@ -1317,12 +1338,12 @@ button { font: inherit; cursor: pointer; }
 /* ---- css/step.css — .step: one screen, one task — card, optional sheet, bar outside ---- */
 /* ============================================================
    cardds/step.css — .step: one screen, one task.
-   What the member reads (a card), what the member does when the
+   What the member reads (words on the base — not a card, Lh 2026-09-16), what the member does when the
    step asks for it (a sheet, sheet.css), and the screen's one
    move (.action-bar, actions.css) OUTSIDE the step, below it.
 
    <section class="step">
-     <article class="card step__card">…the words…</article>           ← first
+     <section class="base-content">…the words…</section>               ← first
      <article class="card sheet sheet--half">…the controls…</article>  ← last, optional
    </section>
    <div class="action-bar">…</div>
@@ -1376,10 +1397,21 @@ button { font: inherit; cursor: pointer; }
    frame — the bar is fixed to the viewport wherever it sits. */
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
 
-/* the reading card: a plain card with a flex rule — it hugs its content,
-   and when the column runs out (a short phone, large text) it shrinks and
-   scrolls inside itself instead of pushing the bar or the sheet */
-.step__card {
+/* the reading block: a .base-content (base.css) — the same words-on-the-base
+   block as anywhere else (it was .step__card, and a .card before 2026-09-16;
+   Lh: a step reads like a page, not a card in a page — so it IS the page's
+   block, one name). Here it keeps a card's inner rhythm (a head, --card-gap
+   between things, the tokens .card publishes for the head and .bleed) and
+   gets the flex rule: it hugs its content, and when the column runs out (a
+   short phone, large text) it shrinks and scrolls inside itself instead of
+   pushing the bar or the sheet */
+.step > .base-content {
+  --card-pad: 0rem;              /* published for .bleed: nothing to cancel */
+  --card-gap: var(--sp-4);
+  gap: var(--card-gap);
+  padding-block: 0;              /* --_lead carries the top; the bar's room is the step's */
+  align-content: start;
+  color: var(--on-surface);
   flex: 0 1 auto;
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */
@@ -1731,35 +1763,27 @@ button { font: inherit; cursor: pointer; }
 .action-bar .btn { flex: 1; box-shadow: var(--shadow-float); }
 .action-bar .icon-btn { width: var(--btn-h); height: var(--btn-h); box-shadow: var(--shadow-float); }
 
-/* ---- pager: previous / next at the two edges of the bar ----
+/* ---- pager: previous / next as two round icon buttons at the two edges ----
    For a sequence you can walk BOTH ways — a three-card feature intro, a step
    flow. Use it instead of the default pack whenever going back is as ordinary
    as going on: a wide CTA beside a small round icon reads as one action plus
    an afterthought, which is wrong when the two are peers.
 
-   Both buttons are the same shape and the same height, so neither wins by
-   being physically bigger; the fill alone leans forward. The bar carries the
-   buttons only: where you are is said by the .pager__at dots UNDER the card
+   The two are the same round shape and size (.icon-btn), one at each edge in
+   thumb reach from either side; the fill (--invert) alone leans forward. They
+   NEVER carry words (Lh 2026-09-16, for good): an arrow is the whole meaning,
+   and a word that isn't a direction ("Get started", "Done") is not a pager
+   button — that step COMMITS and goes back to the plain .action-bar with one
+   wide button. Where you are is said by the .pager__at dots UNDER the card
    that changes (a .screen__centre group, card.css), never in the bar — the
    dots move with what moves (Lh, 2026-09-12). Between the buttons goes a
-   "skip" link or nothing. Keep the last step of a flow on the plain
-   .action-bar: a step that COMMITS deserves one wide button, not a pair.
+   "skip" link or nothing.
 
    <div class="action-bar action-bar--pager">
-     <button class="btn" disabled><svg class="icon icon--xs"><use href="icons.svg#arrow-left"/></svg>Back</button>
-     <button class="btn btn--primary">Next<svg class="icon icon--xs"><use href="icons.svg#arrow-right"/></svg></button>
-   </div>                                                                  */
+     <button class="icon-btn" aria-label="ย้อนกลับ" disabled>…</button>
+     <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
+   </div>   — or the same two in an .action-bar__tier--pager under a control  */
 .action-bar--pager { align-items: center; }
-/* equal share of the bar, and tighter than a lone CTA so two labels plus the
-   indicator still fit a 320px screen */
-.action-bar--pager > .btn {
-  flex: 1 1 0;
-  min-width: 0;
-  padding-inline: var(--sp-3);
-  gap: var(--sp-1);
-  white-space: nowrap;
-  overflow: hidden;
-}
 /* the page dots: under the card in a .screen__centre group; tight gaps */
 .pager__at { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: var(--sp-1); }
 .pager__at > * {
@@ -1787,14 +1811,7 @@ button { font: inherit; cursor: pointer; }
 .action-bar__tier > .btn { flex: 1; }
 :has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
 
-/* ---- round pager: previous / next as two round buttons at the two edges ----
-   The pager with nothing to say between its buttons — no dots, no label — as
-   two equal round icon buttons, one at each edge, in thumb reach from either
-   side. Rule 3 still holds: the step that commits goes back to one wide button.
-   <div class="action-bar action-bar--pager">
-     <button class="icon-btn" aria-label="ย้อนกลับ">…</button>
-     <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
-   </div>   — or the same two in an .action-bar__tier--pager under a control  */
+/* the first round button sits at the left edge, the last at the right; a skip link between them stays centred */
 :is(.action-bar--pager, .action-bar__tier--pager) > .icon-btn:first-child { margin-right: auto; }
 
 /* .screen's default bottom padding is a constant; derive the reserve from the
@@ -2834,49 +2851,94 @@ button { font: inherit; cursor: pointer; }
 /* ---- css/layover.css — ask drawer, popover menu, banner, float bar, callout, deck ---- */
 /* ============================================================
    cardds/layover.css — cards that lay OVER other content:
-   ask drawer · popover menu · expanding banner · float bar ·
+   Modal (ask) · popover menu · expanding banner · float bar ·
    callout · swipe deck. The sheet (peek / half / full / page)
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
-/* ---- ask drawer: the content card lifts, a dark drawer asks ----
+/* ---- ask: the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
    <div class="sheet-stage sheet-stage--ask">
-     <article class="card lift">…page content…</article>
-     <div class="drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
-       <div class="btn-trio"><button class="icon-btn">×</button><span class="btn-trio__dots"></span><button class="icon-btn icon-btn--invert">?</button><span class="btn-trio__dots"></span><button class="icon-btn">✓</button></div>
-     </div></div> */
+     <article class="card modal">
+       <div class="modal__lift">…the card's content (a head, rows, a timeline)…</div>
+       <div class="modal__drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
+         <div class="btn-trio">…</div>
+       </div>
+     </article>
+   </div>
+   .modal is the card — no border (the shadow is its edge on the scrim);
+   .modal__lift the light part that holds the thing being asked about (it
+   scrolls when tall); .modal__drawer the dark end that asks. The ground is
+   the page under a scrim (like --dim). Two beats (2 × --motion-sheet) when
+   the stage appears, and the same two backwards when it closes:
+     1. the card drops in from above the stage to the screen's centre — its
+        drawer still inside it, height 0: nothing of the ask shows yet
+     2. the drawer comes out of the card's bottom edge while the lift moves
+        up, both at once: the card grows from its centre, which never moves
+        (the stage centres it; a growing card keeps its middle where it is)
+   Closing: a click on any button in the drawer plays the same animations in
+   reverse (cardds.js: Animation.reverse() on each — nothing duplicated), then
+   fires "cardds:modal" on the .sheet-stage (bubbles, detail.answer from the
+   button's data-answer) for the app to remove the stage.
+   Reduced motion: the finished state, no beats; closing fires at once. */
 .sheet-stage--ask {
   --drawer-h: 14rem;
-  background: var(--card-3-bg);
-  color: var(--card-3-ink);
+  display: grid;
+  align-content: center;          /* the card at the screen's centre — and kept there as it grows */
+  padding-inline: var(--screen-pad);
 }
-.lift {
-  position: absolute;
-  inset: 0 0 var(--drawer-h) 0;
-  border: 0;
-  border-radius: 0 0 var(--r-card) var(--r-card);
-  overflow: hidden;
-  overscroll-behavior: contain;
+.sheet-stage--ask::after { content: ""; position: absolute; inset: 0; background: var(--scrim); } /* the page dimmed */
+.sheet-stage--ask > .sheet-stage__bg { filter: blur(var(--sp-2)); }
+.modal {
+  position: relative;
+  z-index: 1;                     /* over the scrim */
+  max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) — a % here would be of the grid area, which is the card itself */
+  padding: 0;                     /* the parts pad themselves */
+  border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: clip;
   box-shadow: var(--shadow-sheet);
+}
+.modal__lift {
+  padding: var(--card-pad);
+  display: grid;
+  gap: var(--card-gap);
   align-content: start;
+  min-height: 0;
+  overflow-y: auto;               /* tall content scrolls inside; the drawer stays */
+  overscroll-behavior: contain;
 }
-.drawer {
-  position: absolute;
-  inset-inline: 0;
-  bottom: 0;
+.modal__drawer {
   height: var(--drawer-h);
+  box-sizing: border-box;
   padding: var(--sp-5);
+  overflow: clip;
   display: grid;
   align-content: center;
   justify-items: center;
   gap: var(--sp-1);
   text-align: center;
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
-.drawer .t-caption { opacity: 0.7; }
-.drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
-.drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+.modal__drawer .t-caption { opacity: 0.7; }
+.modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
+.modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+@media (prefers-reduced-motion: no-preference) {
+  .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 */
+  }
+  @keyframes modal-open {
+    0%, 50%   { height: 0; padding-block: 0; }                       /* inside the card */
+    100%      { height: var(--drawer-h); padding-block: var(--sp-5); } /* 2. out below, the lift up, together */
+  }
+}
+
 .btn-trio { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
 .btn-trio__dots {
   width: var(--sp-5);

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export * from './scaffold/ActionBar.js';
 export * from './scaffold/PagerAt.js';
 export * from './scaffold/FloatBar.js';
 export * from './scaffold/FilterRow.js';
-export * from './scaffold/Section.js';
+export * from './scaffold/BaseContent.js';
 export * from './scaffold/EmptyState.js';
 export * from './scaffold/Centre.js';
 export * from './cards/Card.js';

package/dist/index.js

@@ -13,7 +13,7 @@ export * from './scaffold/ActionBar.js';
 export * from './scaffold/PagerAt.js';
 export * from './scaffold/FloatBar.js';
 export * from './scaffold/FilterRow.js';
-export * from './scaffold/Section.js';
+export * from './scaffold/BaseContent.js';
 export * from './scaffold/EmptyState.js';
 export * from './scaffold/Centre.js';
 export * from './cards/Card.js';

package/dist/scaffold/BaseContent.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface BaseContentProps extends ComponentPropsWithoutRef<'section'> {
+}
+/**
+ * BaseContent — words straight on the base, no card around them: an overline, a heading, a paragraph,
+ * maybe a CtaPack. Content has three homes (Card · Sheet · the base); this is the third one, named.
+ * Was Section (and, inside a Step, StepCard) until 2026-09-16 — one block, one name.
+ * In a Step it is the reading block (first child; the buttons go to the ActionBar, not a CtaPack).
+ */
+export declare function BaseContent({ className, ...rest }: BaseContentProps): import("react").JSX.Element;
+export interface CtaPackProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** CtaPack — the buttons under a BaseContent's words, wrapping on one line. Outside a Step only: a Step's move is its ActionBar. */
+export declare function CtaPack({ className, ...rest }: CtaPackProps): import("react").JSX.Element;

package/dist/scaffold/BaseContent.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/**
+ * BaseContent — words straight on the base, no card around them: an overline, a heading, a paragraph,
+ * maybe a CtaPack. Content has three homes (Card · Sheet · the base); this is the third one, named.
+ * Was Section (and, inside a Step, StepCard) until 2026-09-16 — one block, one name.
+ * In a Step it is the reading block (first child; the buttons go to the ActionBar, not a CtaPack).
+ */
+export function BaseContent({ className, ...rest }) {
+    return _jsx("section", { className: cx('base-content', className), ...rest });
+}
+/** CtaPack — the buttons under a BaseContent's words, wrapping on one line. Outside a Step only: a Step's move is its ActionBar. */
+export function CtaPack({ className, ...rest }) {
+    return _jsx("div", { className: cx('cta-pack', className), ...rest });
+}

package/dist/scaffold/EmptyState.d.ts

@@ -9,6 +9,6 @@ export interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<'div'>, '
     /** the heading's level: h2 on a surface (default) · h3 inside a card's section, under its h3 heading */
     level?: 'h2' | 'h3';
 }
-/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. On the surface (in a `Centre`)
- *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in. */
+/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. On the surface (always in a `Centre`)
+ *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in; full ink throughout, never muted (Lh 2026-09-16). */
 export declare function EmptyState({ icon, title, action, level, className, children, ...rest }: EmptyStateProps): import("react").JSX.Element;

package/dist/scaffold/EmptyState.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. On the surface (in a `Centre`)
- *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in. */
+/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. On the surface (always in a `Centre`)
+ *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in; full ink throughout, never muted (Lh 2026-09-16). */
 export function EmptyState({ icon, title, action, level = 'h2', className, children, ...rest }) {
     const H = level;
     return (_jsxs("div", { className: cx('empty-state', className), ...rest, children: [icon, title != null && _jsx(H, { className: "t-h2", children: title }), typeof children === 'string' ? _jsx("p", { className: "t-body", children: children }) : children, action != null && _jsx("div", { className: "empty-state__action", children: action })] }));

package/dist/sheets/Drawer.d.ts

@@ -1,7 +1,11 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-export interface LiftProps extends ComponentPropsWithoutRef<'article'> {
+export interface ModalProps extends ComponentPropsWithoutRef<'article'> {
 }
-/** Lift — the page content card lifted above a Drawer on an `SheetStage ask`. */
+/** Modal — the ask: ONE card at the centre of a `SheetStage ask`, two parts — a `Lift` (the thing being asked about, light, scrolls when tall) and a `Drawer` (the dark end that asks). No border. Two beats on appearing: drops in from above to the centre · the drawer comes out below while the lift moves up. A click on any button in the Drawer plays them backwards and fires `cardds:modal` on the stage (`detail.answer` = the button's `data-answer`) for the app to remove it. */
+export declare function Modal({ className, ...rest }: ModalProps): import("react").JSX.Element;
+export interface LiftProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Lift — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
 export declare function Lift({ className, ...rest }: LiftProps): import("react").JSX.Element;
 export interface DrawerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /** the question */
@@ -9,7 +13,7 @@ export interface DrawerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'titl
     /** the fine print under it */
     caption?: ReactNode;
 }
-/** Drawer — the dark strip at the bottom of an ask stage: a question, a caption, a BtnTrio (no · ask · yes). */
+/** Drawer — the dark end of a `Modal`: the question, its fine print, and a `BtnTrio` (or two buttons); give each button a `data-answer` — any of them closes the modal. */
 export declare function Drawer({ title, caption, className, children, ...rest }: DrawerProps): import("react").JSX.Element;
 export interface BtnTrioProps extends ComponentPropsWithoutRef<'div'> {
 }

package/dist/sheets/Drawer.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, Fragment } from 'react';
 import { cx } from '../cx.js';
-/** Lift — the page content card lifted above a Drawer on an `SheetStage ask`. */
+/** Modal — the ask: ONE card at the centre of a `SheetStage ask`, two parts — a `Lift` (the thing being asked about, light, scrolls when tall) and a `Drawer` (the dark end that asks). No border. Two beats on appearing: drops in from above to the centre · the drawer comes out below while the lift moves up. A click on any button in the Drawer plays them backwards and fires `cardds:modal` on the stage (`detail.answer` = the button's `data-answer`) for the app to remove it. */
+export function Modal({ className, ...rest }) {
+    return _jsx("article", { className: cx('card modal', className), ...rest });
+}
+/** Lift — the light part of a `Modal`: the case, request or item the question is about (a CardHead, rows, a timeline); scrolls inside when tall. */
 export function Lift({ className, ...rest }) {
-    return _jsx("article", { className: cx('card lift', className), ...rest });
+    return _jsx("div", { className: cx('modal__lift', className), ...rest });
 }
-/** Drawer — the dark strip at the bottom of an ask stage: a question, a caption, a BtnTrio (no · ask · yes). */
+/** Drawer — the dark end of a `Modal`: the question, its fine print, and a `BtnTrio` (or two buttons); give each button a `data-answer` — any of them closes the modal. */
 export function Drawer({ title, caption, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('drawer', className), ...rest, children: [_jsx("h2", { className: "t-h2", children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));
+    return (_jsxs("div", { className: cx('modal__drawer', className), ...rest, children: [_jsx("h2", { className: "t-h2", children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));
 }
 /** BtnTrio — three round buttons with dotted connectors between them (× · ? · ✓); the middle one inverted. */
 export function BtnTrio({ className, children, ...rest }) {

package/dist/sheets/Sheet.d.ts

@@ -1,13 +1,13 @@
 import type { ComponentPropsWithoutRef } from 'react';
-export type SheetState = 'peek' | 'half' | 'full';
+export type SheetState = 'peek' | 'half' | '3q' | 'full';
 export interface SheetProps extends ComponentPropsWithoutRef<'article'> {
-    /** how far the sheet slid: `peek` (handle + title row) · `half` (default) · `full` (its top edge at the top bar) — a class, never a height */
+    /** how far the sheet slid: `peek` (handle + title row) · `half` (default) · `3q` (three quarters showing) · `full` (its top edge at the top bar) — a class, never a height. A tap on the handle toggles between this state and peek; a drag snaps to any of `states` */
     state?: SheetState;
     /** floats above a footnote strip on a dim stage (bottom corners and border back) */
     raised?: boolean;
     /** the grab handle (tap / drag / keyboard via cardds.js); `false` for a sheet with no handle, a string sets its accessible name */
     handle?: boolean | string;
-    /** which states the handle cycles through, e.g. "peek half full" (default all three) */
+    /** which states a drag snaps to, e.g. "peek half full" (default all four: peek half 3q full) */
     states?: string;
 }
 /**

package/dist/sheets/SheetStage.d.ts

@@ -6,7 +6,7 @@ export interface SheetStageProps extends ComponentPropsWithoutRef<'div'> {
     hero?: ReactNode;
     /** blur and darken the background (the dim page sheet) */
     dim?: boolean;
-    /** the ask drawer stage: a Lift card over a dark Drawer */
+    /** the ask stage: the page under a scrim, one Modal (Lift + Drawer) at the centre */
     ask?: boolean;
     /** a footnote strip on the scrim under a raised sheet */
     foot?: ReactNode;

package/dist/sheets/Step.d.ts

@@ -2,14 +2,9 @@ import type { ComponentPropsWithoutRef } from 'react';
 export interface StepProps extends ComponentPropsWithoutRef<'section'> {
 }
 /**
- * Step — one screen, one task. Children: a StepCard first (what the member READS), an optional Sheet last
+ * Step — one screen, one task. Children: a BaseContent first (what the member READS — words on the base, not a card), an optional Sheet last
  * (what the member DOES); the ActionBar goes OUTSIDE, after the Step. It fills a `Screen fill` between the top bar
  * and the bar's room, bleeds to the screen's edges (the sheet is full-width), and follows its TopBar/AppBar directly.
- * Reads → StepCard only. Acts → StepCard + Sheet. Never hand-lay a step, never write a sheet height.
+ * Reads → BaseContent only. Acts → BaseContent + Sheet. Never hand-lay a step, never write a sheet height.
  */
 export declare function Step({ className, ...rest }: StepProps): import("react").JSX.Element;
-export interface StepCardProps extends ComponentPropsWithoutRef<'article'> {
-    tone?: 1 | 2 | 3;
-}
-/** StepCard — the reading card of a Step: a normal Card (CardHead · content) that hugs its words and scrolls inside itself when the column runs out. */
-export declare function StepCard({ tone, className, ...rest }: StepCardProps): import("react").JSX.Element;

package/dist/sheets/Step.js

@@ -1,15 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /**
- * Step — one screen, one task. Children: a StepCard first (what the member READS), an optional Sheet last
+ * Step — one screen, one task. Children: a BaseContent first (what the member READS — words on the base, not a card), an optional Sheet last
  * (what the member DOES); the ActionBar goes OUTSIDE, after the Step. It fills a `Screen fill` between the top bar
  * and the bar's room, bleeds to the screen's edges (the sheet is full-width), and follows its TopBar/AppBar directly.
- * Reads → StepCard only. Acts → StepCard + Sheet. Never hand-lay a step, never write a sheet height.
+ * Reads → BaseContent only. Acts → BaseContent + Sheet. Never hand-lay a step, never write a sheet height.
  */
 export function Step({ className, ...rest }) {
     return _jsx("section", { className: cx('step', className), ...rest });
 }
-/** StepCard — the reading card of a Step: a normal Card (CardHead · content) that hugs its words and scrolls inside itself when the column runs out. */
-export function StepCard({ tone, className, ...rest }) {
-    return _jsx("article", { className: cx('card step__card', tone && tone !== 1 && `card--${tone}`, className), ...rest });
-}

package/package.json

@@ -1,18 +1,16 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "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), app/ is the Commons Time Bank PWA built from them, demo/ the CSS spec pages the acceptance tests (tests/) drive.",
+  "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.",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/everysundays/cardds.git"
   },
   "scripts": {
-    "dev": "vite --config app/vite.config.ts",
+    "dev": "vite --config gallery/vite.config.ts",
     "build": "node scripts/build-icons.mjs && tsc -p tsconfig.json && node scripts/flatten-css.mjs",
-    "build:app": "node scripts/build-icons.mjs && vite build --config app/vite.config.ts",
-    "preview:app": "vite preview --config app/vite.config.ts",
     "test": "playwright test",
     "validate:inbox": "node scripts/validate-inbox.mjs",
     "mcp:verify": "cd mcp-server && npm run verify && npm run verify:http",

package/dist/scaffold/Section.d.ts

@@ -1,12 +0,0 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export interface SectionProps extends ComponentPropsWithoutRef<'section'> {
-}
-/**
- * Section — frameless on-surface content + a CTA: an overline, a display heading, a paragraph, a CtaPack.
- * NEVER a card: sections are what the base says; cards are content the system offers.
- */
-export declare function Section({ className, ...rest }: SectionProps): import("react").JSX.Element;
-export interface CtaPackProps extends ComponentPropsWithoutRef<'div'> {
-}
-/** CtaPack — the buttons under a Section's words, wrapping on one line. */
-export declare function CtaPack({ className, ...rest }: CtaPackProps): import("react").JSX.Element;