@usableapp/cardds 0.1.5 → 0.1.6

package/README.md

@@ -29,7 +29,7 @@ npm test             # Playwright: the step/sheet/centre geometry on tests/fixtu
 ```
 
 ```tsx
-import { Screen, TopBar, Step, StepCard, Sheet, SheetBody, CardHead, Field, Pin, ActionBar, Btn } from 'cardds';
+import { Screen, TopBar, Step, BaseContent, Sheet, SheetBody, CardHead, Field, Pin, ActionBar, Btn } from 'cardds';
 import 'cardds/dist/cardds.css';   // or cardds/cardds.css with the css/ folder beside it
 ```
 
@@ -187,16 +187,16 @@ whose markup has rules, because the sheet's box is the step itself:
 ```html
 <!-- reads: the words only -->
 <section class="step">
-  <article class="step__card">
+  <section class="base-content">
     <div class="card__head"><span class="t-overline t-muted">ขั้นที่ 2 จาก 4</span><h2 class="t-h2">…</h2></div>
     <p class="t-body">…</p>
-  </article>
+  </section>
 </section>
 <div class="action-bar action-bar--pager">…</div>
 
 <!-- acts: the words + a sheet -->
 <section class="step">
-  <article class="step__card">…the words…</article>
+  <section class="base-content">…the words…</section>
   <article class="card sheet sheet--half" data-sheet-states="peek half 3q full">
     <button class="sheet__handle" type="button" aria-label="ปรับความสูง"></button>
     <div class="card__head"><h2 class="t-h2">…</h2><span class="chip">…</span></div>
@@ -219,7 +219,7 @@ whose markup has rules, because the sheet's box is the step itself:
   card takes the inset back as its side margins — so the card and the bar's
   buttons stand on the inset line, and the sheet runs edge to edge like the
   bar and like a sheet in a `.sheet-stage`.
-- **`.step__card` first, `.sheet` last.** The block carries the step's words
+- **`.base-content` first, `.sheet` last.** The block carries the step's words
   ON THE BASE — no frame, no area colour (it was a `.card` until 2026-09-16;
   Lh: a step reads like a page, not a card in a page). It keeps a card's
   rhythm: a `.card__head`, `--card-gap` between things. The sheet is
@@ -298,14 +298,14 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 | `css/fonts.css` + `fonts/` | the two `@font-face`s: PK Nonthaburi (body, `--font-ui`), FC Pride (display, `--font-display`); the font files and their licences | when swapping a face |
 | `css/tokens.css` | spacing, radius, type levels, motion (`--motion-sheet`), the human centre (`--screen-centre`), grayscale role defaults; registers the two sheet tokens (`--sheet-peek`, `--sheet-half`) so script can read them resolved | rarely |
 | `css/palette.css` | **color settings — palettes as role-token overrides** | yes, this one |
-| `css/base.css` | reset, surface, typography classes, `.section` | rarely |
+| `css/base.css` | reset, surface, typography classes, `.base-content` | rarely |
 | `css/card.css` | `.card` + its skeleton (`.card__head` / content / `.card__foot`), `.card-list`, `.card--row`, `.icon-row`, stats, `.card--centre` (one card at the human centre of a fill screen) and `.screen__centre` (a small group there) | when adding variants |
 | `css/stack.css` | **sheet stack** — `.sheet-stack`: the menu, sheets stacked (heads peek, up to 5; `--tap` tap-to-open, the back button dissolves in; `--closed` nothing open, heads at the bottom, the base above (`.sheet-stack__base`); `--display` the title is the peek, `--fanned` wider peeks); always edge to edge; a stacked sheet is a `.card` | rarely |
 | `css/sheet.css` | **sheet single** — `.sheet`: a card as bottom sheet, full height always, a state is how far it slid: `--peek` / `--half` / `--full` (translate only); handle · head · `.sheet__body` (the head pinned, the body scrolls); `.sheet-stage` (overlay stage: map sheet, a `__hero` — one thing centred in the band a half sheet leaves open, `--dim`, `--raised`, ask drawer) | when adding states |
-| `css/step.css` | `.step` — one screen, one task: `.step__card` (reads) + optional `.sheet` (acts), the bar's room, the keyboard's room | rarely |
+| `css/step.css` | `.step` — one screen, one task: `.base-content` (reads) + optional `.sheet` (acts), the bar's room, the keyboard's room | rarely |
 | `css/forms.css` | `.field` (outlined input, label = placeholder), `.add-row` | when adding controls |
 | `css/journey.css` | `.route`, `.tile-badge`, `.note-row` — trip/status primitives | when adding variants |
-| `css/actions.css` | topbar, chips, buttons (`.btn--xl`), `.dropdown` (the standard select: pill + `.menu` popover), `.action-bar` (+ `--pager` for previous/next, as labels or as two round buttons; `--tiers` for a control row above the buttons), `.fab` | when adding actions |
+| `css/actions.css` | topbar, chips, buttons (`.btn--xl`), `.dropdown` (the standard select: pill + `.menu` popover), `.action-bar` (+ `--pager` for previous/next, two round icon buttons, never labels; `--tiers` for a control row above the buttons), `.fab` | when adding actions |
 | `css/numbers.css` | `.ring` gauge, `.track` steps, `.card--band` + `.band-stack`, `.dotgrid`, `.picker`, `.badge`, `.bars` | big numbers |
 | `css/people.css` | `.avatar` (sm/lg/xl, outline, add, on, halo), `.avatar-stack`, `.avatar-pick` | people |
 | `css/choice.css` | `.check`, `.toggle`, `.chip--toggle`, `.chip-grid` + `.chip--pick`, `.day-strip`, `.calendar`, `.mood`, `.pin`, `.composer`, `.slider` | choice controls |
@@ -366,7 +366,7 @@ Every screen is the same four things, and every card the same three:
   by `translate` only. (The stack was first named "card stack": wrong, and
   retired.) Demos: `sheet.html`, `stack.html`.
 - **A step is one screen, one task: `.step`.** What the member reads is
-  words on the base (`.step__card` — the name stayed, the frame went); what the member does, if the step asks for it, is a
+  words on the base (`.base-content` — the same block as anywhere on the base; it was `.step__card` until 2026-09-16); what the member does, if the step asks for it, is a
   `.sheet` in front of it; the screen's one move is `.action-bar`, outside
   the step, below it. A step where the member only READS is the card alone.
   A step where the member ACTS (types, picks, shoots a photo, records) adds
@@ -393,7 +393,7 @@ Demo: the *skeleton* block at the top of `elements.html`.
 1. **One card = one boundary.** A card frames one thing: a category, a stat
    group, a list row. Tone slots: `.card` (card-1), `.card--2`, `.card--3`.
 2. **Sections are not cards.** Page sections = frameless on-surface content
-   (`.section`) + a lone/packed CTA (`.cta-pack`).
+   (`.base-content`) + a lone/packed CTA (`.cta-pack`).
 3. **Surrounding UI is separate.** `.topbar`, `.filter-row`, `.chip-row`,
    `.action-bar` live outside cards, above/below. The bottom bar has two
    arrangements and they mean different things: the default pack (one wide

package/css/actions.css

@@ -218,35 +218,27 @@
 .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 > * {
@@ -274,14 +266,7 @@
 .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

package/css/base.css

@@ -3,6 +3,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
@@ -49,6 +60,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>)
@@ -95,15 +107,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;
@@ -116,12 +133,9 @@ 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; }

package/css/step.css

@@ -5,7 +5,7 @@
    move (.action-bar, actions.css) OUTSIDE the step, below it.
 
    <section class="step">
-     <article class="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,17 +59,19 @@
    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 block: the words on the base — no frame, no area colour (it was
-   a .card until 2026-09-16; Lh: a step reads like a page, not a card in a
-   page). It keeps a card's inner rhythm (a head, --card-gap between things,
-   the tokens .card publishes for the head and .bleed) and 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__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);
-  display: grid;
   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;

package/dist/cardds.css

@@ -339,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
@@ -385,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>)
@@ -431,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;
@@ -452,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 ---- */
 /* ============================================================
@@ -1329,7 +1343,7 @@ button { font: inherit; cursor: pointer; }
    move (.action-bar, actions.css) OUTSIDE the step, below it.
 
    <section class="step">
-     <article class="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>
@@ -1383,17 +1397,19 @@ 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 block: the words on the base — no frame, no area colour (it was
-   a .card until 2026-09-16; Lh: a step reads like a page, not a card in a
-   page). It keeps a card's inner rhythm (a head, --card-gap between things,
-   the tokens .card publishes for the head and .bleed) and 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__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);
-  display: grid;
   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;
@@ -1747,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 > * {
@@ -1803,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

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/Step.d.ts

@@ -2,13 +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 — words on the base, not a card), 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'> {
-}
-/** StepCard — the reading block of a Step: the words on the base, no frame, no area colour (a CardHead · content, with a card's rhythm); it hugs its words and scrolls inside itself when the column runs out. */
-export declare function StepCard({ 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 — words on the base, not a card), 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 block of a Step: the words on the base, no frame, no area colour (a CardHead · content, with a card's rhythm); it hugs its words and scrolls inside itself when the column runs out. */
-export function StepCard({ className, ...rest }) {
-    return _jsx("article", { className: cx('step__card', className), ...rest });
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.1.5",
+  "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); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",

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;

package/dist/scaffold/Section.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx.js';
-/**
- * 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 function Section({ className, ...rest }) {
-    return _jsx("section", { className: cx('section', className), ...rest });
-}
-/** CtaPack — the buttons under a Section's words, wrapping on one line. */
-export function CtaPack({ className, ...rest }) {
-    return _jsx("div", { className: cx('cta-pack', className), ...rest });
-}