@usableapp/cardds 0.1.7 → 0.2.1

package/dist/cardds.css

@@ -56,56 +56,69 @@
   --screen-w: 25rem;      /* 400: mobile column — .screen, .action-bar, .sheet-stage */
   --screen-centre: 40%;   /* the human centre of a screen: the middle of its top four fifths — the bottom fifth is the thumb's (Lh, 2026-09-10). .card--centre sits here */
 
-  /* ---- spacing (4pt grid) ---- */
-  --sp-0: 0.125rem;  /* 2  hairline gaps (title→meta) */
-  --sp-1: 0.25rem;   /* 4 */
-  --sp-2: 0.5rem;    /* 8 */
-  --sp-3: 0.75rem;   /* 12 */
-  --sp-4: 1rem;      /* 16 */
-  --sp-5: 1.25rem;   /* 20 */
-  --sp-6: 1.5rem;    /* 24 */
-  --sp-8: 2rem;      /* 32 */
-  --sp-10: 2.5rem;   /* 40 */
-  --sp-12: 3rem;     /* 48 */
+  /* ---- the four bases: what a project retunes (Lh, 2026-09-20) ----
+     Every size token below is multiplier × its family's base. A project sets a BASE
+     and never a multiplier, so the proportions of the system hold at any size.
+     The px in the comments are at these defaults (1rem = 16px). */
+  --sp-base: 0.25rem;  /* 4  spacing: --sp-N = base × N */
+  --fs-base: 1rem;     /* 16 type: --fs-* */
+  --r-base: 1rem;      /* 16 radius: --r-* (--r-chip stays fully round) */
+  --tap-base: 3rem;    /* 48 the size of THINGS: touch targets and control heights (--tap*, --btn-h, --chip-h, --bar-h,
+                          --header-h, --fab), icons, avatars, dots, the ring and the tiles. --sp-base is the room BETWEEN things.
+                          Text-holders follow the type instead: --badge and --icon-xs (inline with captions) are on --fs-base.
+                          Not on a base: --screen-w (the column), borders / rules / focus (px, crisp), shadows, motion. */
+
+  /* ---- spacing (4pt grid): the number in the name is the multiplier ---- */
+  --sp-0: calc(var(--sp-base) * 0.5);  /* 2  hairline gaps (title→meta) */
+  --sp-1: var(--sp-base);              /* 4 */
+  --sp-2: calc(var(--sp-base) * 2);    /* 8 */
+  --sp-3: calc(var(--sp-base) * 3);    /* 12 */
+  --sp-4: calc(var(--sp-base) * 4);    /* 16 */
+  --sp-5: calc(var(--sp-base) * 5);    /* 20 */
+  --sp-6: calc(var(--sp-base) * 6);    /* 24 */
+  --sp-8: calc(var(--sp-base) * 8);    /* 32 */
+  --sp-10: calc(var(--sp-base) * 10);  /* 40 */
+  --sp-12: calc(var(--sp-base) * 12);  /* 48 */
 
   /* ---- touch & control sizes ---- */
-  --tap: 3rem;        /* 48 primary touch target */
-  --tap-sm: 2.75rem;  /* 44 minimum touch target (Apple HIG floor) */
-  --tap-lg: 3.5rem;   /* 56 hero controls: track steps, send, field with action */
-  --btn-h: 3.25rem;   /* 52 button height */
-  --btn-xl-h: 5.5rem; /* 88 the one giant CTA */
-  --chip-h: 2.375rem; /* 38 chip height */
-  --bar-h: 4rem;      /* 64 float bar, day cell, deck actions */
-  --header-h: 3.75rem;/* 60 top bar — .topbar and .appbar alike */
+  --tap-floor: 2.75rem; /* 44 the HIG floor — no --tap-base takes a touch target under it */
+  --tap: max(var(--tap-floor), var(--tap-base));                       /* 48 primary touch target */
+  --tap-sm: max(var(--tap-floor), calc(var(--tap-base) * 11 / 12));    /* 44 minimum touch target */
+  --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: track steps, send, field with action */
+  --btn-h: calc(var(--tap-base) * 13 / 12);   /* 52 button height */
+  --btn-xl-h: calc(var(--tap-base) * 11 / 6); /* 88 the one giant CTA */
+  --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */
+  --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell, deck actions */
+  --header-h: calc(var(--tap-base) * 5 / 4);  /* 60 top bar — .topbar and .appbar alike */
   --screen-pad: var(--sp-4); /* 16 the screen's inset — .sheet-stack cancels it */
-  --map-ring: 10rem;    /* the rough-area ring on a map (sheet.css .map__ring) — a neighbourhood, not a house */
-  --fab: 4.5rem;      /* 72 square floating action */
-  --badge: 1.625rem;  /* 26 count badge */
-  --dot: 0.625rem;    /* 10 signal dot */
-  --dot-xs: 0.375rem; /* 6  marker dot */
+  --map-ring: calc(var(--tap-base) * 10 / 3);    /* the rough-area ring on a map (sheet.css .map__ring) — a neighbourhood, not a house */
+  --fab: calc(var(--tap-base) * 3 / 2); /* 72 square floating action */
+  --badge: calc(var(--fs-base) * 1.625);  /* 26 count badge */
+  --dot: calc(var(--tap-base) * 5 / 24);    /* 10 signal dot */
+  --dot-xs: calc(var(--tap-base) / 8); /* 6  marker dot */
 
   /* ---- icons (icons.svg sprite, Lucide) ---- */
-  --icon: 1.75rem;    /* 28 default */
-  --icon-sm: 1.75rem; /* one size everywhere; retune if small contexts appear */
-  --icon-lg: 2rem;    /* 32 empty states */
-  --icon-xs: 1rem;    /* 16 inline with captions/chips only (row meta, link arrows) */
+  --icon: calc(var(--tap-base) * 7 / 12);    /* 28 default */
+  --icon-sm: calc(var(--tap-base) * 7 / 12); /* one size everywhere; retune if small contexts appear */
+  --icon-lg: calc(var(--tap-base) * 2 / 3);    /* 32 empty states */
+  --icon-xs: var(--fs-base);    /* 16 inline with captions/chips only (row meta, link arrows) */
 
   /* ---- people & big elements ---- */
-  --avatar-sm: 2.5rem;  /* 40 row lead */
-  --avatar: 3.5rem;     /* 56 card head, person row */
-  --avatar-lg: 5rem;    /* 80 chooser row */
-  --avatar-xl: 6rem;    /* 96 sheet head icon ring */
-  --ring: 11rem;        /* 176 .ring gauge diameter */
-  --ring-w: 1.375rem;   /* 22 .ring stroke */
-  --tile-min: 7.5rem;   /* 120 .tile-grid column floor */
-  --tile-h: 8.25rem;    /* 132 tile / band height */
+  --avatar-sm: calc(var(--tap-base) * 5 / 6);  /* 40 row lead */
+  --avatar: calc(var(--tap-base) * 7 / 6);     /* 56 card head, person row */
+  --avatar-lg: calc(var(--tap-base) * 5 / 3);    /* 80 chooser row */
+  --avatar-xl: calc(var(--tap-base) * 2);    /* 96 sheet head icon ring */
+  --ring: calc(var(--tap-base) * 11 / 3);        /* 176 .ring gauge diameter */
+  --ring-w: calc(var(--tap-base) * 11 / 24);   /* 22 .ring stroke */
+  --tile-min: calc(var(--tap-base) * 5 / 2);   /* 120 .tile-grid column floor */
+  --tile-h: calc(var(--tap-base) * 11 / 4);    /* 132 tile / band height */
 
   /* ---- radius ---- */
   --r-chip: 999px;        /* pills, chips, buttons — always fully round */
-  --r-card: 2rem;         /* 32 the one card radius: every card, row, tile, menu, sheet, fab */
-  --r-media: 1rem;        /* 16 images inside cards */
-  --r-control: 0.875rem;  /* 14 fields, thumbs, menu rows */
-  --r-badge: 0.625rem;    /* 10 tile badge, bars */
+  --r-card: calc(var(--r-base) * 2);         /* 32 the one card radius: every card, row, tile, menu, sheet, fab */
+  --r-media: var(--r-base);        /* 16 images inside cards */
+  --r-control: calc(var(--r-base) * 0.875);  /* 14 fields, thumbs, menu rows */
+  --r-badge: calc(var(--r-base) * 0.625);    /* 10 tile badge, bars */
 
   /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
   --border-w: 1.5px;
@@ -126,22 +139,22 @@
   --font-display: "FC Pride", var(--font-ui); /* the character face for headings and big numbers (fonts.css) */
   --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
 
-  --fs-xs: 0.6875rem;      /* 11 overline */
-  --fs-caption: 0.75rem;   /* 12 */
-  --fs-label: 0.8125rem;   /* 13 */
-  --fs-sm: 0.875rem;       /* 14 chips, segments */
-  --fs-body: 0.9375rem;    /* 15 */
-  --fs-md: 1rem;           /* 16 buttons */
-  --fs-title: 1.0625rem;   /* 17 */
-  --fs-lg: 1.25rem;        /* 20 day numbers, tile values */
-  --fs-h2: 1.375rem;       /* 22 */
-  --fs-2xl: 1.5rem;        /* 24 composer, small ring */
-  --fs-h1: 1.75rem;        /* 28 */
-  --fs-3xl: 2rem;          /* 32 xl button */
-  --fs-display: clamp(2.125rem, 9vw, 2.625rem); /* 34–42 */
-  --fs-stat: clamp(1.875rem, 8vw, 2.375rem);    /* 30–38 big numbers */
-  --fs-hero: 3.5rem;                            /* 56 the one number on a sheet */
-  --fs-giant: clamp(3rem, 15vw, 4rem);          /* 48–64 data bands */
+  --fs-xs: calc(var(--fs-base) * 0.6875);      /* 11 overline */
+  --fs-caption: calc(var(--fs-base) * 0.75);   /* 12 */
+  --fs-label: calc(var(--fs-base) * 0.8125);   /* 13 */
+  --fs-sm: calc(var(--fs-base) * 0.875);       /* 14 chips, segments */
+  --fs-body: calc(var(--fs-base) * 0.9375);    /* 15 */
+  --fs-md: var(--fs-base);           /* 16 buttons */
+  --fs-title: calc(var(--fs-base) * 1.0625);   /* 17 */
+  --fs-lg: calc(var(--fs-base) * 1.25);        /* 20 day numbers, tile values */
+  --fs-h2: calc(var(--fs-base) * 1.375);       /* 22 */
+  --fs-2xl: calc(var(--fs-base) * 1.5);        /* 24 composer, small ring */
+  --fs-h1: calc(var(--fs-base) * 1.75);        /* 28 */
+  --fs-3xl: calc(var(--fs-base) * 2);          /* 32 xl button */
+  --fs-display: clamp(calc(var(--fs-base) * 2.125), 9vw, calc(var(--fs-base) * 2.625)); /* 34–42 */
+  --fs-stat: clamp(calc(var(--fs-base) * 1.875), 8vw, calc(var(--fs-base) * 2.375));    /* 30–38 big numbers */
+  --fs-hero: calc(var(--fs-base) * 3.5);                            /* 56 the one number on a sheet */
+  --fs-giant: clamp(calc(var(--fs-base) * 3), 15vw, calc(var(--fs-base) * 4));          /* 48–64 data bands */
 
   /* level      weight size / line-height family */
   --type-display: 800 var(--fs-display) / 1.15 var(--font-display); /* leading: Thai marks stack to 1.1em up and 0.3em down in FC Pride — 1.02 clipped them (2026-09-10) */
@@ -161,35 +174,53 @@
   /* ============================================================
      COLOR ROLES — wireframe defaults (grayscale).
      palette.css overrides these under [data-palette="…"].
+
+     THE FIVE COLOUR BASES (Lh, 2026-09-20) — a project's own colours, the
+     same idea as the size bases: set a base, the roles follow.
+       --color-surface   the app's ground
+       --color-ink       the words
+       --color-paper     the plain card, neutral buttons and fields
+       --color-brand     the primary action, the strong card, the signal dot
+       --color-on-brand  the words on the brand
+     They have NO default: unset, every role below is its exact wireframe
+     value. That is what the fallbacks are for — a private mix (--_*) that
+     reads an unset base is invalid, so var(--_x, #grey) lands on the grey.
+     Set, the roles derive: tone 2 = the brand washed into the surface, the
+     muted inks = the ink washed into their ground. A role set directly
+     (a palette, or a project's theme.css) always wins over its derivation.
      ============================================================ */
+  --_muted-on-surface: color-mix(in srgb, var(--color-ink) 66%, var(--color-surface, #f2f2f0));
+  --_muted-on-paper: color-mix(in srgb, var(--color-ink) 66%, var(--color-paper, #ffffff));
+  --_tone-2: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface, #f2f2f0));
+  --_muted-on-tone-2: color-mix(in srgb, var(--color-ink, #141414) 72%, var(--_tone-2));
 
   /* app background ("earth-toned surface or shiny color, up to the app") */
-  --surface: #f2f2f0;
-  --on-surface: #141414;
-  --on-surface-muted: #6b6b6b;
+  --surface: var(--color-surface, #f2f2f0);
+  --on-surface: var(--color-ink, #141414);
+  --on-surface-muted: var(--_muted-on-surface, #6b6b6b);
 
   /* card boundaries — 3 slots so stacked/adjacent cards can differ */
-  --card-1-bg: #ffffff;  --card-1-ink: #141414;
-  --card-2-bg: #e6e6e3;  --card-2-ink: #141414;
-  --card-3-bg: #141414;  --card-3-ink: #ffffff;
+  --card-1-bg: var(--color-paper, #ffffff);  --card-1-ink: var(--color-ink, #141414);
+  --card-2-bg: var(--_tone-2, #e6e6e3);  --card-2-ink: var(--color-ink, #141414);
+  --card-3-bg: var(--color-brand, #141414);  --card-3-ink: var(--color-on-brand, #ffffff);
 
   --card-border: #141414;      /* wireframe: visible outline; palettes may set transparent */
-  --card-muted: #6b6b6b;       /* secondary text inside cards (the default, tone-1 card) */
-  --card-2-muted: #5f5f5f;     /* the same text on the tone-2 card — 5.1:1 on its grey (#6b6b6b is 4.3:1, under AA);
+  --card-muted: var(--_muted-on-paper, #6b6b6b);       /* secondary text inside cards (the default, tone-1 card) */
+  --card-2-muted: var(--_muted-on-tone-2, #5f5f5f);     /* the same text on the tone-2 card — 5.1:1 on its grey (#6b6b6b is 4.3:1, under AA);
                                   a palette whose tone-2 ground is strong
                                   sets this to its tone-2 ink — a muted shade cannot reach AA there (clay) */
 
   /* actions */
-  --accent: #141414;           /* primary CTA fill */
-  --on-accent: #ffffff;
-  --action-bg: #ffffff;        /* neutral buttons/chips/inputs */
-  --action-ink: #141414;
+  --accent: var(--color-brand, #141414);           /* primary CTA fill */
+  --on-accent: var(--color-on-brand, #ffffff);
+  --action-bg: var(--color-paper, #ffffff);        /* neutral buttons/chips/inputs */
+  --action-ink: var(--color-ink, #141414);
   --action-border: #141414;
 
   /* signals (chip dots, deltas) */
   --pos: #8a8a8a;
   --neg: #3d3d3d;
-  --dot-a: #141414;
+  --dot-a: var(--color-brand, #141414);
   --dot-b: #8a8a8a;
 
   /* derived tints — read the element's own ink, so they work on any slot */
@@ -330,6 +361,11 @@
 
 /* Colored palettes trade wireframe outlines for soft elevation. */
 [data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
+/* COLOURED MODE is the attribute, whatever its value: a project with colours of its own (the five
+   --color-* bases, or roles, in its theme.css) writes <html data-palette="own"> — no block here matches
+   "own", so only the three generic rules apply: the card's shadow, the soft outline, the field's soft
+   edge (forms.css); and the two wireframe borders step back, as in every stock palette. */
+[data-palette] { --card-border: transparent; --action-border: transparent; }
 /* …but controls keep a faint edge so they still read as controls */
 [data-palette] { --outline: color-mix(in srgb, currentColor 25%, transparent); }
 
@@ -688,7 +724,7 @@ button { font: inherit; cursor: pointer; }
    and updates inside it; a browser without them (the floor: Chrome 105 / iOS 16)
    simply switches. Only the card is named; the rest of the page must not
    cross-fade. */
-.screen__centre > .card, .pages > .card[aria-current] { view-transition-name: centre-card; }
+.screen__centre > .card, .pages > [aria-current] { view-transition-name: centre-card; }
 
 /* ---- pages: the cards of a walk, all one height ----
    A sequence the member walks (an introduction) reads steadier when every card
@@ -702,8 +738,14 @@ button { font: inherit; cursor: pointer; }
      <article class="card" inert>…</article>
    </div><div class="pager__at">…</div></div> */
 .pages { display: grid; }
-.pages > .card { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
-.pages > .card[inert] { visibility: hidden; }
+.pages > :is(.card, .base-content) { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
+.pages > [inert] { visibility: hidden; }
+/* pages of WORDS (Lh, 2026-09-20): the same walk with .base-content pages, on the base — in a .step the
+   .pages is the reading block (step.css), the round pager in the bar turns it, the same slideTo().
+   <section class="step"><div class="pages">
+     <section class="base-content" aria-current="step">…</section>
+     <section class="base-content" inert>…</section>
+   </div></section> <div class="action-bar action-bar--pager">← →</div> */
 ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
 ::view-transition-old(centre-card), ::view-transition-new(centre-card) {
   animation-duration: var(--motion-slide);
@@ -1123,6 +1165,19 @@ button { font: inherit; cursor: pointer; }
 .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)); }
+/* ---- called sheets (Lh, 2026-09-20): a .step whose .base-content has buttons that each CALL a sheet ----
+   .sheet--away = not on the screen: slid all the way out (translate, like every state — the material never
+   changes), and hidden once it has left so its shadow does not lie on the step's bottom edge; write it
+   with `inert`. A button names its sheet — <button aria-controls="when"> … <article id="when" class="card
+   sheet sheet--away" inert data-sheet-states="peek full"> — and cardds.js does the rest: a tap slides that
+   sheet up to full and sends any other one away; the handle takes it down to peek, never further, so the
+   words and the other buttons are back in reach; the same button again raises it from peek to full.
+   Nothing waits at peek before the first call. No bar on such a screen (actions.css).
+   WHAT IT IS FOR: the base offers WAYS IN — sign in · new phone · join — and each button calls a sheet
+   that holds that way's WHOLE form, its submit on the sheet's foot, leading to the next page. The base
+   carries no control. It is NOT for a form taken apart — one sheet per field, a "send" left on the base:
+   a form lives whole in one sheet. */
+.sheet--away { --_y: 100%; --_cover: var(--_box); visibility: hidden; transition: translate var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
 .sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */
 
 /* the body — everything under the head, the one thing in a sheet that
@@ -1148,6 +1203,31 @@ button { font: inherit; cursor: pointer; }
      cut is a share of the SHEET's height, not of the body's. */
   scroll-padding-bottom: var(--_cover);
 }
+/* ---- the sheet's foot: the button that FINISHES the sheet, on the sheet (Lh, 2026-09-20) ----
+   A screen with a sheet has no bar in front of it: the button that completes what the sheet asks — the
+   page's conclusion — is a .card__foot, the sheet's last child, on the sheet's own material. The sheet is
+   full height at every state, so its real bottom edge is under the cut unless it stands at full. So the
+   foot is a layer as tall as the sheet, its buttons at its bottom, slid UP by the very share the sheet
+   slid down (--_y, + the drag): the two cancel, and the buttons stand on the box's bottom edge at half,
+   3q and full alike while the sheet slides behind them. A percentage of the same height on both — not a
+   length — so a box that resizes (the keyboard) moves them as one, with nothing to catch up. The layer
+   takes no taps, its buttons do; the strip behind them is the sheet's ground, --_foot tall, and the body
+   stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
+   One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
+.sheet { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); }
+.sheet > .card__foot {
+  position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
+  align-items: end;
+  padding: 0 var(--card-pad) var(--card-pad);
+  background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
+  pointer-events: none;
+  translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
+  transition: translate var(--motion-sheet) ease, opacity var(--motion-sheet) ease, visibility 0s;
+}
+.sheet > .card__foot > * { pointer-events: auto; }
+.sheet:has(> .card__foot) > .sheet__body { margin-bottom: calc(var(--_foot) - var(--card-pad)); } /* the body stops above the strip (the card's own padding is the rest) */
+.sheet.is-dragging > .card__foot { transition: none; }
+:is(.sheet--peek, .sheet--away) > .card__foot { opacity: 0; visibility: hidden; transition: translate var(--motion-sheet) ease, opacity var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
 .sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
 .sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: var(--card-pad); }
 
@@ -1339,14 +1419,16 @@ button { font: inherit; cursor: pointer; }
 /* ============================================================
    cardds/step.css — .step: one screen, one task.
    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.
+   step asks for it (a sheet, sheet.css). The move: a page of words has
+   an .action-bar (actions.css) OUTSIDE the step, below it — the base's;
+   a step with a sheet has none: the sheet's own .card__foot finishes it
+   (see "LAYERS" below).
 
    <section class="step">
      <section class="base-content">…the words…</section>               ← first
-     <article class="card sheet sheet--half">…the controls…</article>  ← last, optional
+     <article class="card sheet sheet--half">…the controls… <div class="card__foot">…</div></article>  ← last, optional
    </section>
-   <div class="action-bar">…</div>
+   <div class="action-bar">…</div>   ← only when there is no sheet
 
    The step is the box the sheet slides in. It fills the screen
    column between the top bar's reserve (.screen already pads for
@@ -1396,6 +1478,10 @@ button { font: inherit; cursor: pointer; }
    bar. Any parent that hosts the bar counts — <body>, an app shell, a demo
    frame — the bar is fixed to the viewport wherever it sits. */
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
+/* LAYERS (Lh, 2026-09-20): the base, then the sheet over it, then the top bar. A bar is the BASE's — the
+   move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .card__foot
+   (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. Should a bar be written
+   beside a sheet anyway it stands down (actions.css + cardds.js) — a net for a mistake, not a layout. */
 
 /* 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;
@@ -1405,14 +1491,23 @@ button { font: inherit; cursor: pointer; }
    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 {
+.step > .base-content, .step > .pages > .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);
+}
+/* the reading block is the .base-content — or the .pages that holds several of them, a walk of words
+   (card.css). --sheet-room: the strip a CALLED sheet keeps at peek (sheet.css, "called sheets"), published
+   on the step by cardds.js while one is on the screen, so the buttons under it can scroll clear of it;
+   nothing without one. */
+.step > :is(.base-content, .pages) {
+  padding-bottom: var(--sheet-room, 0rem);
   flex: 0 1 auto;
+}
+.step > :is(.base-content, .pages) {
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */
   overflow-y: auto;
@@ -1784,6 +1879,14 @@ button { font: inherit; cursor: pointer; }
      <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; }
+/* The bar belongs to the BASE (Lh, 2026-09-20): it is the move of a page of words — a pager turning
+   them, or one wide button. It is never in front of a sheet: a sheet that is on the screen covers it
+   (step.css, "layers"), a peeking one included, and the button that finishes a sheet is the sheet's own
+   foot (sheet.css). So a pager never works beside a sheet — that screen has work that cannot be walked
+   past — and neither does any other bar: while a sheet is on (only .sheet--away, a sheet not called yet,
+   is not), the bar takes no pointer here and cardds.js makes it inert, so the keyboard cannot reach what
+   the eye cannot see. */
+:has(.step > .sheet:not(.sheet--away)) > .action-bar { pointer-events: none; }
 /* 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 > * {
@@ -2547,6 +2650,56 @@ button { font: inherit; cursor: pointer; }
 .kv-cell__key { font: var(--type-caption); color: var(--card-muted); }
 .card--3 .kv-cell__key { color: inherit; opacity: 0.7; }
 
+/* ---- bubble: a chat message — theirs on the left, mine on the right (Lh 2026-09-18, replaces the chip's tail) ----
+   No tail: a rounded block whose corner nearest the sender is square-ish
+   (bottom-left for theirs, bottom-right for mine), the way messaging apps
+   draw it. Under it a caption line (time · a tick), beside it small round
+   actions (a heart, more). A .thread stacks them.
+   <div class="thread">
+     <div class="bubble"><p class="bubble__body">…</p><span class="bubble__actions">…icon-btns…</span><span class="bubble__meta">Dec 4 · 8:15</span></div>
+     <div class="bubble bubble--right">…</div>
+   </div> */
+.thread { display: grid; gap: var(--sp-4); }
+/* two columns: the message (max-content, but it gives way — minmax(0) — so a long one shrinks
+   and wraps while the actions stay beside it) and the actions; the meta on a second row under the message */
+.bubble {
+  display: grid;
+  grid-template-columns: minmax(0, max-content) auto;
+  justify-content: start;
+  align-items: center;
+  gap: var(--sp-1) var(--sp-3);
+  max-width: 88%;
+  margin-right: auto;            /* theirs: hugs the left */
+}
+.bubble--right { grid-template-columns: auto minmax(0, max-content); justify-content: end; margin-right: 0; margin-left: auto; } /* mine: hugs the right, the actions on its left */
+.bubble__body, .bubble__meta { grid-column: 1; }
+.bubble__actions { grid-column: 2; grid-row: 1; }
+.bubble--right > :is(.bubble__body, .bubble__meta) { grid-column: 2; }
+.bubble--right > .bubble__actions { grid-column: 1; }
+.bubble__body {
+  margin: 0;
+  min-width: 0;
+  padding: var(--sp-3) var(--sp-4);
+  border-radius: var(--r-card);
+  border-bottom-left-radius: var(--r-control);
+  background: var(--card-2-bg);
+  color: var(--card-2-ink);
+  font: var(--type-body);
+  overflow-wrap: anywhere;
+}
+.bubble--right > .bubble__body {
+  border-bottom-left-radius: var(--r-card);
+  border-bottom-right-radius: var(--r-control);
+  background: var(--accent);
+  color: var(--on-accent);
+  text-align: right;
+}
+.bubble__actions { display: flex; gap: var(--sp-1); flex: none; opacity: 0.7; }
+.bubble__meta { display: flex; align-items: center; gap: var(--sp-1); font: var(--type-caption); color: var(--on-surface-muted); }
+.bubble--right > .bubble__meta { justify-self: end; }
+.bubble__meta > .icon { color: var(--accent); }
+.card--3 .bubble__meta { color: inherit; opacity: 0.7; }
+
 /* ---- timeline: a hairline with date chips, entries to the right ----
    <ol class="timeline"><li class="timeline__item"><span class="timeline__mark">Wed 14</span><p class="t-body">…</p></li>…</ol> */
 .timeline {
@@ -3119,22 +3272,6 @@ button { font: inherit; cursor: pointer; }
 }
 .callout__title { font: var(--type-title); }
 .callout__sub { font: var(--type-caption); opacity: 0.7; }
-/* speech chip: a chip with the same tail (mascot / greeting) */
-.chip--bubble { position: relative; }
-.chip--bubble::after {
-  content: "";
-  position: absolute;
-  left: var(--sp-4);
-  bottom: calc(-1 * var(--sp-2) + var(--border-w));
-  width: var(--sp-3);
-  height: var(--sp-3);
-  rotate: 45deg;
-  background: inherit;
-  border: inherit;
-  border-top: 0;
-  border-left: 0;
-}
-
 /* ---- deck: swipe cards; the last child is on top ----
    <div class="deck"><article class="card">…</article><article class="card">…</article><article class="card card--fold">front</article></div>
    <div class="deck__actions"><button class="icon-btn">×</button><button class="icon-btn icon-btn--invert">✓</button></div> */

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export * from './lists/Row.js';
 export * from './lists/Kv.js';
 export * from './lists/Timeline.js';
 export * from './lists/Legend.js';
+export * from './lists/Bubble.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';
 export * from './media/MapArea.js';

package/dist/index.js

@@ -62,6 +62,7 @@ export * from './lists/Row.js';
 export * from './lists/Kv.js';
 export * from './lists/Timeline.js';
 export * from './lists/Legend.js';
+export * from './lists/Bubble.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';
 export * from './media/MapArea.js';

package/dist/lists/Bubble.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface ThreadProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Thread — a stack of Bubbles: a conversation. */
+export declare function Thread({ className, ...rest }: ThreadProps): import("react").JSX.Element;
+export interface BubbleProps extends ComponentPropsWithoutRef<'div'> {
+    /** whose: theirs on the left (default), mine on the right */
+    side?: 'left' | 'right';
+    /** the caption under the message — a time, a tick (an Icon) */
+    meta?: ReactNode;
+    /** small round buttons beside the message (a heart, more) */
+    actions?: ReactNode;
+}
+/**
+ * Bubble — a chat message: a rounded block, its corner nearest the sender squared (bottom-left for theirs, bottom-right
+ * for mine), no tail. `meta` sits under it on the sender's side, `actions` beside it. Stack them in a Thread.
+ */
+export declare function Bubble({ side, meta, actions, className, children, ...rest }: BubbleProps): import("react").JSX.Element;

package/dist/lists/Bubble.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/** Thread — a stack of Bubbles: a conversation. */
+export function Thread({ className, ...rest }) {
+    return _jsx("div", { className: cx('thread', className), ...rest });
+}
+/**
+ * Bubble — a chat message: a rounded block, its corner nearest the sender squared (bottom-left for theirs, bottom-right
+ * for mine), no tail. `meta` sits under it on the sender's side, `actions` beside it. Stack them in a Thread.
+ */
+export function Bubble({ side = 'left', meta, actions, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('bubble', side === 'right' && 'bubble--right', className), ...rest, children: [_jsx("p", { className: "bubble__body", children: children }), actions != null && _jsx("span", { className: "bubble__actions", children: actions }), meta != null && _jsx("span", { className: "bubble__meta", children: meta })] }));
+}

package/dist/scaffold/BaseContent.d.ts

@@ -5,10 +5,13 @@ 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).
+ * In a Step it is the reading block (first child; the step's MOVE goes to the ActionBar, never here). It can move two ways
+ * (Lh 2026-09-20): several of them in a `Pages` = a walk of words the round pager turns (slideTo); or a CtaPack of CALLERS —
+ * `Btn aria-controls={a Sheet's id}` — WAYS IN (sign in · new phone · join), each calling a `Sheet state="away"` that holds that way's
+ * whole form and its submit. The base itself carries no control; a form is never taken apart across it. Never both: a pager never works beside a sheet.
  */
 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. */
+/** CtaPack — the buttons under a BaseContent's words, wrapping on one line. In a Step it holds CALLERS only (buttons that call a sheet, `aria-controls`) — the Step's move is its ActionBar. */
 export declare function CtaPack({ className, ...rest }: CtaPackProps): import("react").JSX.Element;

package/dist/scaffold/BaseContent.js

@@ -4,12 +4,15 @@ 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).
+ * In a Step it is the reading block (first child; the step's MOVE goes to the ActionBar, never here). It can move two ways
+ * (Lh 2026-09-20): several of them in a `Pages` = a walk of words the round pager turns (slideTo); or a CtaPack of CALLERS —
+ * `Btn aria-controls={a Sheet's id}` — WAYS IN (sign in · new phone · join), each calling a `Sheet state="away"` that holds that way's
+ * whole form and its submit. The base itself carries no control; a form is never taken apart across it. Never both: a pager never works beside a sheet.
  */
 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. */
+/** CtaPack — the buttons under a BaseContent's words, wrapping on one line. In a Step it holds CALLERS only (buttons that call a sheet, `aria-controls`) — the Step's move is its ActionBar. */
 export function CtaPack({ className, ...rest }) {
     return _jsx("div", { className: cx('cta-pack', className), ...rest });
 }

package/dist/scaffold/Centre.d.ts

@@ -14,9 +14,11 @@ export declare function Centre({ className, ...rest }: CentreProps): import("rea
 export interface PagesProps extends ComponentPropsWithoutRef<'div'> {
 }
 /**
- * Pages — the cards of a walk, all one height: every Card is rendered, stacked in one cell as tall as the
+ * Pages — the pages of a walk, all one height: every page is rendered, stacked in one cell as tall as the
  * tallest at any text size. Give the current one `aria-current="step"` and every other one `inert`
- * (hidden in place, out of the tab order). Goes inside a Centre, above the PagerAt; turn with slideTo().
+ * (hidden in place, out of the tab order). Turn with slideTo().
+ * Pages of cards: `Card`s, inside a Centre, above the PagerAt. Pages of words: `BaseContent`s, as a Step's
+ * reading block (no Sheet on that screen — a pager never works beside one), the round pager in the ActionBar.
  */
 export declare function Pages({ className, ...rest }: PagesProps): import("react").JSX.Element;
 /** the direction a Centre's card slides: `next` — out to the left, the new one in from the right; `back` — the reverse */

package/dist/scaffold/Centre.js

@@ -14,9 +14,11 @@ export function Centre({ className, ...rest }) {
     return _jsx("div", { className: cx('screen__centre', className), ...rest });
 }
 /**
- * Pages — the cards of a walk, all one height: every Card is rendered, stacked in one cell as tall as the
+ * Pages — the pages of a walk, all one height: every page is rendered, stacked in one cell as tall as the
  * tallest at any text size. Give the current one `aria-current="step"` and every other one `inert`
- * (hidden in place, out of the tab order). Goes inside a Centre, above the PagerAt; turn with slideTo().
+ * (hidden in place, out of the tab order). Turn with slideTo().
+ * Pages of cards: `Card`s, inside a Centre, above the PagerAt. Pages of words: `BaseContent`s, as a Step's
+ * reading block (no Sheet on that screen — a pager never works beside one), the round pager in the ActionBar.
  */
 export function Pages({ className, ...rest }) {
     return _jsx("div", { className: cx('pages', className), ...rest });

package/dist/sheets/Sheet.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
-export type SheetState = 'peek' | 'half' | '3q' | 'full';
+export type SheetState = 'peek' | 'half' | '3q' | 'full' | 'away';
 export interface SheetProps extends ComponentPropsWithoutRef<'article'> {
-    /** 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` */
+    /** 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. `away` = a CALLED sheet not on the screen yet (slid out, inert): a `Btn aria-controls={its id}` in the Step's BaseContent calls it up to full and sends any other away. 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;
@@ -15,7 +15,10 @@ export interface SheetProps extends ComponentPropsWithoutRef<'article'> {
  * content cards). Always the full height of its box — a Step or a SheetStage — a state is only how far it slid.
  * Shape: handle · head (a CardHead, a SheetHead — or ONE label Row carrying a Check/Toggle, when the sheet's
  * whole ask is that switch and peek must show it) · SheetBody (the only part that scrolls). Written top-down.
- * Inside a Step it never carries the step's action (the ActionBar is the one move); its own buttons only on a
- * screen with no bar (the map sheet). This is the single sheet; the menu of stacked sheets is `SheetStack`.
+ * It FINISHES on itself: a `CardFoot` as its last child holds the one button that completes it — standing at the bottom at
+ * half / 3q / full, gone at peek. Never an ActionBar in front of a sheet (a bar is the base's). Nothing in the body commits
+ * on its own. Older note — its own buttons only on a
+ * screen with no bar (the map sheet). Called sheets: several `Sheet state="away" states="peek full"` in one Step, each with an `id` a
+ * button names — one on the screen at a time; never beside a pager. This is the single sheet; the menu of stacked sheets is `SheetStack`.
  */
 export declare function Sheet({ state, raised, handle, states, className, children, ...rest }: SheetProps): import("react").JSX.Element;