npm - @usableapp/cardds - Versions diffs - 0.6.16 → 0.7.1 - Mend

@usableapp/cardds 0.6.16 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md +31 -0
package/README.md +7 -14
package/css/actions.css +16 -20
package/css/base.css +5 -5
package/css/lists.css +5 -12
package/css/stack.css +1 -1
package/css/step.css +4 -10
package/dist/cardds.css +31 -48
package/dist/lists/Bubble.d.ts +2 -4
package/dist/lists/Bubble.js +3 -3
package/dist/scaffold/ActionBar.d.ts +2 -2
package/dist/scaffold/ActionBar.js +1 -1
package/dist/scaffold/Page.d.ts +0 -3
package/dist/scaffold/Page.js +0 -9
package/package.json +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,37 @@
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
+## 0.7.1 — 2026-09-24
+### The bar fixed from outside is gone
+- Before: an `ActionBar` written after `</Screen>` (in `<body>` or an app shell) was fixed to the viewport, and the screen
+  / step kept `--bar-reserve` of room for it. After: `.action-bar` is in flow; a bar is always the Screen's `bottom` (its
+  last child) — a layer over the content's foot in a fill screen, a sticky last row on a scrolling one (0.7.0). A bar left
+  outside a Screen now sits wherever it was written. `--bar-reserve` is still published (the centred card's cap reads it);
+  nothing reserves room with it any more. `ActionBar inline` stays, for a bare bar in a preview.
+## 0.7.0 — 2026-09-24
+Breaking — the clean-up promised since 0.6.5. Four renames/removals, one new way.
+### A bar on a scrolling screen goes INSIDE the Screen
+- Before: on a screen that is not `fill` (it scrolls), the `ActionBar` was written after `</Screen>`, fixed to the
+  viewport, and the screen reserved `--bar-reserve` at its bottom. After: write it as `<Screen bottom={<ActionBar>…}>`
+  like on a fill screen. The screen becomes a column at least one phone tall; the bar is its last row, `position: sticky`
+  at the viewport's foot (above the keyboard) — in reach while the words scroll, under them when they end.
+  `validateScreen` already reports a bar after `</Screen>`. Story `ActionBar · OnAScrollingScreen`.
+### `BaseContent` removed
+- Before: `BaseContent` (an alias that warned). After: `Page` — same props, same markup.
+### `--base-content-*` knobs renamed `--page-*` (no fallback)
+- `--base-content-media-h` → `--page-media-h`, and likewise `-gap`, `-pad-y`, `-body-ink`. The old names do nothing now:
+  rename them in your theme.css.
+### `Bubble actions` removed
+- Before: small buttons beside a chat message (`actions`, `.bubble__actions`, knob `--bubble-actions-gap`). After: gone —
+  a Bubble is the message and its `meta`. The bubble is one column now.
 ## 0.6.16 — 2026-09-24
 ### iOS 16.4 supported (was 18.3)

package/README.md CHANGED Viewed

@@ -246,9 +246,10 @@ whose markup has rules, because the sheet's box is the step itself:
   step that follows anything else keeps the screen's gap, and the sheet
   stops under that thing.
 - **The bar is after the step, inside the screen** (the screen's bottom — *Screen: top · content · bottom*). In a
-  `.screen--fill` the step and the bar share one flex column and touch; the step takes the rest. (A bar outside a
-  fill screen — an app shell — is still fixed to the viewport and the step reads `--bar-reserve`: the old way,
-  kept until 0.7.0.)
+  `.screen--fill` the bar is a layer over the content's foot. On a SCROLLING screen (not fill, 0.7.0) the screen is a
+  column at least one phone tall and the bar its last row, `position: sticky` at the viewport's foot (above `--kb`):
+  it stays in reach while the words scroll and sits under them when they end. Either way the bar is written INSIDE
+  the Screen (`bottom`) — a bar after `</Screen>` is an error (`validateScreen`).
 - **Every sheet has one shape** (Lh 2026-09-21): the handle and the head stay at the top and never scroll · the
   foot's button stands at the bottom — above the keyboard when there is one (`--kb`: a step gives the keyboard
   its room, a stage sheet gives it up itself as `--_lift`) · everything between them scrolls, as far as it
@@ -409,17 +410,9 @@ Demo: the *skeleton* block at the top of `elements.html`.
 5. **`.screen` carries the horizontal inset and nothing vertical.** The inset
    is `--screen-pad`; cards and on-surface UI sit flush inside it, with no
    per-component side padding. Top and bottom are zero: vertical room only
-   exists as a reserve for something fixed parked over the screen, so each bar
-   adds its own — `.appbar` the top (`.screen:has(> .appbar)`), `.action-bar`
-   and `.float-bar` the bottom, each from its own height token. Whatever
-   parent hosts the bar counts (`:has(> .action-bar) .screen`): `<body>` or an
-   app shell alike. A page with no bars needs no override, and `.screen--fill`
-   is excluded from the bottom reserves — there a `.step` carries the bar's
-   room itself, as a bottom margin, reading the same `--bar-reserve`. The
-   reserves use the nominal control height, so a bar whose button wraps to two
-   lines can still overlap the last line of content.
-   **In a `.screen--fill` none of this applies to a bar in the screen** (2026-09-23): it is the column's last
-   part and the browser measures it — the reserves are the old way for a bar outside a fill screen.
+   is taken by what is in the column. The bottom bar is always the screen's last child (0.7.1 — the bar fixed to
+   the viewport from outside and its reserves are gone): in a `.screen--fill` a layer over the content's foot, on a
+   scrolling screen a `sticky` last row. `--bar-reserve` stays published only for a `.card--centre`'s cap.
    **Padding is published, not copied.** `.screen` sets `--screen-pad` and
    `--screen-gap`, its appbar reserve sets `--header-gap`, and `.card` sets
    `--card-pad` and `--card-gap`; anything that has to cancel a container's

package/css/actions.css CHANGED Viewed

@@ -216,21 +216,15 @@
   opacity: 1;
 }
-/* ---- bottom CTA pack: fixed action zone under the content ----
-   --bar-reserve is the room the bar needs — its own height plus a breathing
-   gap above it — published here so anything else that must stop clear of it
-   reads this instead of recomputing it. .screen's own reserve below reads
-   it; so does .step (step.css), the box a sheet slides in — one number, so
-   the two can't drift apart.
-   --kb is the on-screen keyboard's height, published on :root by cardds.js
-   from the visual viewport (0 without one, and on a platform that shrinks
-   the layout viewport itself): the bar rides above the keyboard on iOS the
-   way it already does on Android, and .step grows its room by the same. */
+/* ---- bottom CTA pack: the screen's bottom (Screen `bottom`) ----
+   A bar is always INSIDE its .screen, its last child (0.7.1: the bar fixed to the viewport from outside, and the
+   reserves the screen and the step kept for it, are gone). In a .screen--fill it is a layer over the content's foot
+   (step.css); on a scrolling screen a sticky last row (below). --bar-reserve stays published — the bar's nominal
+   height — for the one rule that still needs it without measuring: a .card--centre's cap (card.css).
+   --kb is the on-screen keyboard's height (cardds.js): the bar rides above it. */
 :root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
 .action-bar {
-  position: fixed;
-  inset-inline: 0;
-  bottom: var(--kb, 0);
+  position: relative;
   z-index: 30; /* above .sheet-stack sheets, which paint at --level 1-5 */
   max-width: var(--screen-w);
   margin-inline: auto;
@@ -238,6 +232,15 @@
   display: flex;
   gap: var(--sp-2);
 }
+/* a bar INSIDE a scrolling (not fill) screen (Lh 2026-09-24, 0.7.0): the screen is a column at least one phone tall, the bar its
+   last row — at the foot when the words are short, and sticky to the viewport's foot (above the keyboard) while they scroll;
+   it takes the room it needs in the column, so nothing is added to the content for it */
+.screen:not(.screen--fill):has(> .action-bar:last-child) { display: flex; flex-direction: column; min-height: 100dvh; }
+.screen:not(.screen--fill) > .action-bar:last-child {
+  position: sticky; bottom: var(--kb, 0rem);
+  max-width: none;
+  margin: auto calc(-1 * var(--screen-pad)) 0;
+}
 .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); }
@@ -304,13 +307,6 @@
 :is(.action-bar--pager, .action-bar__tier--pager) > :not(.icon-btn):not(:first-child):not(:last-child) { margin-inline: auto; }
 :is(.action-bar--pager, .action-bar__tier--pager):has(> :nth-child(3)) > .icon-btn:first-child { margin-right: 0; }
-/* .screen's default bottom padding is a constant; derive the reserve from the
-   bar instead, so a taller button (a longer label, a script with more leading)
-   can never end up underneath it. Any parent that hosts the bar counts —
-   <body>, or an app shell (#app > .screen + .action-bar) — since the bar is
-   fixed to the viewport wherever it sits. (.screen--fill reserves nothing:
-   its .step carries the bar's room itself, step.css.) */
-:has(> .action-bar) .screen:not(.screen--fill) { padding-bottom: var(--bar-reserve); }
 /* ---- action note (Lh 2026-09-24): the main button's place, the main button's size, but ON the ground — no fill, no border, no
    rounding — one line of muted words, an inline icon allowed; nothing to press. In a CardFoot or an ActionBar row it takes the

package/css/base.css CHANGED Viewed

@@ -115,18 +115,18 @@ button { font: inherit; cursor: pointer; }
    In a .step it is the reading block and step.css adds the flex/scroll rule ---- */
 .page {
   display: grid;
-  gap: var(--base-content-gap, var(--sp-3));
+  gap: var(--page-gap, var(--sp-3));
   align-content: start;          /* a tall column never stretches the rows — the words hug the top */
-  padding-block: var(--base-content-pad-y, var(--sp-4));
+  padding-block: var(--page-pad-y, var(--sp-4));
 }
-.page > .t-body { color: var(--base-content-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
+.page > .t-body { color: var(--page-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
 /* an illustration among the words (Lh 2026-09-22): capped, so a tall picture never pushes the words under the bar;
    (the walk's dots are NOT here — they are the Step's, after its Pages: step.css, Lh 2026-09-22) */
 /* the page's ONE heading on the base (a screen with no TopBar: CardHead level="h1") reads at the card heading's size —
    h1 is the semantic level, not a bigger face; --fs-h1 is the bar title's size (Lh 2026-09-22) */
 .page > .card__head > .t-h1 { font-size: var(--fs-h2); }
-.page > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
-.page > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
+.page > :is(img, .ph) { max-height: var(--page-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
+.page > .ph { width: 100%; height: var(--page-media-h, 14rem); }
 .page .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */

package/css/lists.css CHANGED Viewed

@@ -98,29 +98,23 @@
 /* ---- 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.
+   draw it. Under it a caption line (time · a tick). 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"><p class="bubble__body">…</p><span class="bubble__meta">Dec 4 · 8:15</span></div>
      <div class="bubble bubble--right">…</div>
    </div> */
 .thread { display: grid; gap: var(--thread-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 */
+/* one column: the message (max-content, but it gives way — minmax(0) — so a long one shrinks and wraps); the meta under it */
 .bubble {
   display: grid;
-  grid-template-columns: minmax(0, max-content) auto;
+  grid-template-columns: minmax(0, max-content);
   justify-content: start;
   align-items: center;
   gap: var(--sp-1) var(--sp-3);
   max-width: var(--bubble-max-w, 75%); /* a message may run to three quarters of the thread (Lh 2026-09-23) */
   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--right { justify-content: end; margin-right: 0; margin-left: auto; } /* mine: hugs the right */
 .bubble__body {
   margin: 0;
   min-width: 0;
@@ -139,7 +133,6 @@
   color: var(--on-accent);
   text-align: right;
 }
-.bubble__actions { display: flex; gap: var(--bubble-actions-gap, var(--sp-1)); flex: none; opacity: 0.7; }
 .bubble__meta { display: flex; align-items: center; gap: var(--bubble-meta-gap, var(--sp-1)); font: var(--bubble-meta-font, var(--type-caption)); color: var(--bubble-meta-ink, var(--on-surface-muted)); }
 .bubble--right > .bubble__meta { justify-self: end; }
 .bubble__meta > .icon { color: var(--accent); }

package/css/stack.css CHANGED Viewed

@@ -230,7 +230,7 @@
   gap: var(--card-gap, var(--sp-5));
   overflow: clip;
 }
-/* a base that is ONE BaseContent is a page's words (a title, a welcome, the news): it reads from the TOP, like any page —
+/* a base that is ONE Page is a page's words (a title, a welcome, the news): it reads from the TOP, like any page —
    loose things (a picture, a line) still sit against the peeks (Lh 2026-09-23, the home) */
 .sheet-stack__base:has(> .page:only-child) { align-content: start; }

package/css/step.css CHANGED Viewed

@@ -10,7 +10,7 @@
      <section class="page">…the words…</section>               ← first
      <article class="card sheet sheet--half">…the controls… <div class="card__foot">…</div></article>  ← last, optional
    </section>
-   <div class="action-bar">…</div>   ← only when there is no sheet
+   <div class="action-bar">…</div>   ← the screen's last child, 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
@@ -59,11 +59,6 @@
    more air and a short one less; a screen with a bar keeps the bar's own room */
 .screen > .step:first-child, .screen--lead > .step { --_lead: var(--screen-lead, 15cqh); } /* top="lead" says it; a Step first says it too */
-/* the bar's room — read from actions.css, never recomputed. Margin, not
-   padding, so the clip cuts at the box edge and nothing shows behind the
-   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)); }
 /* a walk (the dots float on its foot): the reading block runs right to the bar's top edge — the reserve's breathing gap (--sp-6)
    is given back, the dots keep the words clear of the bar (Lh 2026-09-23) */
@@ -119,7 +114,7 @@
    TOP + CONTENT in one flex column; BOTTOM is a LAYER over them (Lh 2026-09-23, second call — replaces "the bar is a row"):
    in a .screen--fill the content runs to the screen's bottom edge, and the bar lies over it at the foot — it covers what is
    under it, on purpose; nothing is added to the content to make room. The keyboard lifts the layer (--kb).
-   (A bar OUTSIDE a fill screen — an app shell, a scrolling screen — is still fixed to the viewport, actions.css.)
+   (On a scrolling screen the bar is a sticky last row instead, actions.css.)
    ============================================================ */
 .screen--fill > .action-bar {
   position: absolute; inset-inline: 0; top: auto; bottom: var(--kb, 0rem);
@@ -127,7 +122,6 @@
   margin: 0;
   padding-top: 0; /* no ground of its own, never a solid strip */
 }
-.screen--fill:has(> .action-bar) > .step { margin-bottom: 0; }
 /* the walk's dots are the BOTTOM layer's too (Lh 2026-09-23): a row of the bar, over its buttons, centred */
 .action-bar > .pager__at, .action-bar__tier > .pager__at { align-self: center; }
 /* the TOP is in the column too (Lh 2026-09-23): an .appbar in a fill screen is its first row, not fixed over it — the screen
@@ -145,13 +139,13 @@
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
 /* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
-   the lead + the picture's own height (--base-content-media-h), square — so the words start where they always did */
+   the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
 .step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }
 .step > .pages > .page > :is(img, .ph):first-child {
   width: calc(100% + 2 * var(--screen-pad)); /* the content's width: the page's inset given back */
   max-width: none;
   margin-inline: calc(-1 * var(--screen-pad));
-  height: calc(var(--_lead, 0rem) + var(--base-content-media-h, 14rem));
+  height: calc(var(--_lead, 0rem) + var(--page-media-h, 14rem));
   max-height: none;
   border-radius: 0;
   border-inline: 0;

package/dist/cardds.css CHANGED Viewed

@@ -495,18 +495,18 @@ button { font: inherit; cursor: pointer; }
    In a .step it is the reading block and step.css adds the flex/scroll rule ---- */
 .page {
   display: grid;
-  gap: var(--base-content-gap, var(--sp-3));
+  gap: var(--page-gap, var(--sp-3));
   align-content: start;          /* a tall column never stretches the rows — the words hug the top */
-  padding-block: var(--base-content-pad-y, var(--sp-4));
+  padding-block: var(--page-pad-y, var(--sp-4));
 }
-.page > .t-body { color: var(--base-content-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
+.page > .t-body { color: var(--page-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
 /* an illustration among the words (Lh 2026-09-22): capped, so a tall picture never pushes the words under the bar;
    (the walk's dots are NOT here — they are the Step's, after its Pages: step.css, Lh 2026-09-22) */
 /* the page's ONE heading on the base (a screen with no TopBar: CardHead level="h1") reads at the card heading's size —
    h1 is the semantic level, not a bigger face; --fs-h1 is the bar title's size (Lh 2026-09-22) */
 .page > .card__head > .t-h1 { font-size: var(--fs-h2); }
-.page > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
-.page > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
+.page > :is(img, .ph) { max-height: var(--page-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
+.page > .ph { width: 100%; height: var(--page-media-h, 14rem); }
 .page .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */
@@ -1073,7 +1073,7 @@ button { font: inherit; cursor: pointer; }
   gap: var(--card-gap, var(--sp-5));
   overflow: clip;
 }
-/* a base that is ONE BaseContent is a page's words (a title, a welcome, the news): it reads from the TOP, like any page —
+/* a base that is ONE Page is a page's words (a title, a welcome, the news): it reads from the TOP, like any page —
    loose things (a picture, a line) still sit against the peeks (Lh 2026-09-23, the home) */
 .sheet-stack__base:has(> .page:only-child) { align-content: start; }
@@ -1543,7 +1543,7 @@ button { font: inherit; cursor: pointer; }
      <section class="page">…the words…</section>               ← first
      <article class="card sheet sheet--half">…the controls… <div class="card__foot">…</div></article>  ← last, optional
    </section>
-   <div class="action-bar">…</div>   ← only when there is no sheet
+   <div class="action-bar">…</div>   ← the screen's last child, 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
@@ -1592,11 +1592,6 @@ button { font: inherit; cursor: pointer; }
    more air and a short one less; a screen with a bar keeps the bar's own room */
 .screen > .step:first-child, .screen--lead > .step { --_lead: var(--screen-lead, 15cqh); } /* top="lead" says it; a Step first says it too */
-/* the bar's room — read from actions.css, never recomputed. Margin, not
-   padding, so the clip cuts at the box edge and nothing shows behind the
-   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)); }
 /* a walk (the dots float on its foot): the reading block runs right to the bar's top edge — the reserve's breathing gap (--sp-6)
    is given back, the dots keep the words clear of the bar (Lh 2026-09-23) */
@@ -1652,7 +1647,7 @@ button { font: inherit; cursor: pointer; }
    TOP + CONTENT in one flex column; BOTTOM is a LAYER over them (Lh 2026-09-23, second call — replaces "the bar is a row"):
    in a .screen--fill the content runs to the screen's bottom edge, and the bar lies over it at the foot — it covers what is
    under it, on purpose; nothing is added to the content to make room. The keyboard lifts the layer (--kb).
-   (A bar OUTSIDE a fill screen — an app shell, a scrolling screen — is still fixed to the viewport, actions.css.)
+   (On a scrolling screen the bar is a sticky last row instead, actions.css.)
    ============================================================ */
 .screen--fill > .action-bar {
   position: absolute; inset-inline: 0; top: auto; bottom: var(--kb, 0rem);
@@ -1660,7 +1655,6 @@ button { font: inherit; cursor: pointer; }
   margin: 0;
   padding-top: 0; /* no ground of its own, never a solid strip */
 }
-.screen--fill:has(> .action-bar) > .step { margin-bottom: 0; }
 /* the walk's dots are the BOTTOM layer's too (Lh 2026-09-23): a row of the bar, over its buttons, centred */
 .action-bar > .pager__at, .action-bar__tier > .pager__at { align-self: center; }
 /* the TOP is in the column too (Lh 2026-09-23): an .appbar in a fill screen is its first row, not fixed over it — the screen
@@ -1678,13 +1672,13 @@ button { font: inherit; cursor: pointer; }
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
 /* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
-   the lead + the picture's own height (--base-content-media-h), square — so the words start where they always did */
+   the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
 .step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }
 .step > .pages > .page > :is(img, .ph):first-child {
   width: calc(100% + 2 * var(--screen-pad)); /* the content's width: the page's inset given back */
   max-width: none;
   margin-inline: calc(-1 * var(--screen-pad));
-  height: calc(var(--_lead, 0rem) + var(--base-content-media-h, 14rem));
+  height: calc(var(--_lead, 0rem) + var(--page-media-h, 14rem));
   max-height: none;
   border-radius: 0;
   border-inline: 0;
@@ -2048,21 +2042,15 @@ button { font: inherit; cursor: pointer; }
   opacity: 1;
 }
-/* ---- bottom CTA pack: fixed action zone under the content ----
-   --bar-reserve is the room the bar needs — its own height plus a breathing
-   gap above it — published here so anything else that must stop clear of it
-   reads this instead of recomputing it. .screen's own reserve below reads
-   it; so does .step (step.css), the box a sheet slides in — one number, so
-   the two can't drift apart.
-   --kb is the on-screen keyboard's height, published on :root by cardds.js
-   from the visual viewport (0 without one, and on a platform that shrinks
-   the layout viewport itself): the bar rides above the keyboard on iOS the
-   way it already does on Android, and .step grows its room by the same. */
+/* ---- bottom CTA pack: the screen's bottom (Screen `bottom`) ----
+   A bar is always INSIDE its .screen, its last child (0.7.1: the bar fixed to the viewport from outside, and the
+   reserves the screen and the step kept for it, are gone). In a .screen--fill it is a layer over the content's foot
+   (step.css); on a scrolling screen a sticky last row (below). --bar-reserve stays published — the bar's nominal
+   height — for the one rule that still needs it without measuring: a .card--centre's cap (card.css).
+   --kb is the on-screen keyboard's height (cardds.js): the bar rides above it. */
 :root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
 .action-bar {
-  position: fixed;
-  inset-inline: 0;
-  bottom: var(--kb, 0);
+  position: relative;
   z-index: 30; /* above .sheet-stack sheets, which paint at --level 1-5 */
   max-width: var(--screen-w);
   margin-inline: auto;
@@ -2070,6 +2058,15 @@ button { font: inherit; cursor: pointer; }
   display: flex;
   gap: var(--sp-2);
 }
+/* a bar INSIDE a scrolling (not fill) screen (Lh 2026-09-24, 0.7.0): the screen is a column at least one phone tall, the bar its
+   last row — at the foot when the words are short, and sticky to the viewport's foot (above the keyboard) while they scroll;
+   it takes the room it needs in the column, so nothing is added to the content for it */
+.screen:not(.screen--fill):has(> .action-bar:last-child) { display: flex; flex-direction: column; min-height: 100dvh; }
+.screen:not(.screen--fill) > .action-bar:last-child {
+  position: sticky; bottom: var(--kb, 0rem);
+  max-width: none;
+  margin: auto calc(-1 * var(--screen-pad)) 0;
+}
 .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); }
@@ -2136,13 +2133,6 @@ button { font: inherit; cursor: pointer; }
 :is(.action-bar--pager, .action-bar__tier--pager) > :not(.icon-btn):not(:first-child):not(:last-child) { margin-inline: auto; }
 :is(.action-bar--pager, .action-bar__tier--pager):has(> :nth-child(3)) > .icon-btn:first-child { margin-right: 0; }
-/* .screen's default bottom padding is a constant; derive the reserve from the
-   bar instead, so a taller button (a longer label, a script with more leading)
-   can never end up underneath it. Any parent that hosts the bar counts —
-   <body>, or an app shell (#app > .screen + .action-bar) — since the bar is
-   fixed to the viewport wherever it sits. (.screen--fill reserves nothing:
-   its .step carries the bar's room itself, step.css.) */
-:has(> .action-bar) .screen:not(.screen--fill) { padding-bottom: var(--bar-reserve); }
 /* ---- action note (Lh 2026-09-24): the main button's place, the main button's size, but ON the ground — no fill, no border, no
    rounding — one line of muted words, an inline icon allowed; nothing to press. In a CardFoot or an ActionBar row it takes the
@@ -2941,29 +2931,23 @@ button { font: inherit; cursor: pointer; }
 /* ---- 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.
+   draw it. Under it a caption line (time · a tick). 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"><p class="bubble__body">…</p><span class="bubble__meta">Dec 4 · 8:15</span></div>
      <div class="bubble bubble--right">…</div>
    </div> */
 .thread { display: grid; gap: var(--thread-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 */
+/* one column: the message (max-content, but it gives way — minmax(0) — so a long one shrinks and wraps); the meta under it */
 .bubble {
   display: grid;
-  grid-template-columns: minmax(0, max-content) auto;
+  grid-template-columns: minmax(0, max-content);
   justify-content: start;
   align-items: center;
   gap: var(--sp-1) var(--sp-3);
   max-width: var(--bubble-max-w, 75%); /* a message may run to three quarters of the thread (Lh 2026-09-23) */
   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--right { justify-content: end; margin-right: 0; margin-left: auto; } /* mine: hugs the right */
 .bubble__body {
   margin: 0;
   min-width: 0;
@@ -2982,7 +2966,6 @@ button { font: inherit; cursor: pointer; }
   color: var(--on-accent);
   text-align: right;
 }
-.bubble__actions { display: flex; gap: var(--bubble-actions-gap, var(--sp-1)); flex: none; opacity: 0.7; }
 .bubble__meta { display: flex; align-items: center; gap: var(--bubble-meta-gap, var(--sp-1)); font: var(--bubble-meta-font, var(--type-caption)); color: var(--bubble-meta-ink, var(--on-surface-muted)); }
 .bubble--right > .bubble__meta { justify-self: end; }
 .bubble__meta > .icon { color: var(--accent); }

package/dist/lists/Bubble.d.ts CHANGED Viewed

@@ -8,11 +8,9 @@ export interface BubbleProps extends ComponentProps<'div'> {
     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.
+ * for mine), no tail. `meta` sits under it on the sender's side. Stack them in a Thread.
  */
-export declare function Bubble({ side, meta, actions, className, children, ...rest }: BubbleProps): import("react").JSX.Element;
+export declare function Bubble({ side, meta, className, children, ...rest }: BubbleProps): import("react").JSX.Element;

package/dist/lists/Bubble.js CHANGED Viewed

@@ -6,8 +6,8 @@ export function 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.
+ * for mine), no tail. `meta` sits under it on the sender's side. 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 })] }));
+export function Bubble({ side = 'left', meta, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('bubble', side === 'right' && 'bubble--right', className), ...rest, children: [_jsx("p", { className: "bubble__body", children: children }), meta != null && _jsx("span", { className: "bubble__meta", children: meta })] }));
 }

package/dist/scaffold/ActionBar.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 export interface ActionBarProps extends ComponentProps<'div'> {
     /** `pager`: previous / next as two equal buttons at the edges (a Link may sit between them; the PagerAt dots never do — they go under the card) · `tiers`: rows stacked — a control tier above the buttons */
     variant?: 'pager' | 'tiers';
-    /** render in flow instead of fixed to the viewport bottom (for a preview or a mock frame); the real bar is fixed */
+    /** a bare bar for a preview: no position, full width, no side padding (a real bar is a Screen's `bottom`) */
     inline?: boolean;
 }
 /**
@@ -11,7 +11,7 @@ export interface ActionBarProps extends ComponentProps<'div'> {
  * Plain: one wide primary Btn (the step that commits). `pager`: Back + Next as peers — buttons only; where you are is the
  * PagerAt under the card in a Centre group, never in the bar (Lh, 2026-09-12).
  * `tiers`: an ActionBarTier with a control (a Slider) above the button tier.
- * In a `Screen fill` the content takes the rest; outside one (an app shell) the bar is still fixed and `--bar-reserve` keeps its room.
+ * In a `Screen fill` it is a layer over the content's foot; on a scrolling Screen a sticky last row.
  */
 export declare function ActionBar({ variant, inline, className, style, ...rest }: ActionBarProps): import("react").JSX.Element;
 export interface ActionBarTierProps extends ComponentProps<'div'> {

package/dist/scaffold/ActionBar.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { cx } from '../cx.js';
  * Plain: one wide primary Btn (the step that commits). `pager`: Back + Next as peers — buttons only; where you are is the
  * PagerAt under the card in a Centre group, never in the bar (Lh, 2026-09-12).
  * `tiers`: an ActionBarTier with a control (a Slider) above the button tier.
- * In a `Screen fill` the content takes the rest; outside one (an app shell) the bar is still fixed and `--bar-reserve` keeps its room.
+ * In a `Screen fill` it is a layer over the content's foot; on a scrolling Screen a sticky last row.
  */
 export function ActionBar({ variant, inline, className, style, ...rest }) {
     return (_jsx("div", { className: cx('action-bar', variant && `action-bar--${variant}`, className), style: inline ? { position: 'static', width: '100%', maxWidth: 'none', paddingInline: 0, ...style } : style, ...rest }));

package/dist/scaffold/Page.d.ts CHANGED Viewed

@@ -8,9 +8,6 @@ export interface PageProps extends ComponentProps<'section'> {
  * a still, one-scaffold screen, which is gone.
  */
 export declare function Page({ className, ...rest }: PageProps): import("react").JSX.Element;
-/** @deprecated renamed `Page` (2026-09-23) — same props, same markup; kept one version for the move */
-export declare function BaseContent(props: PageProps): import("react").JSX.Element;
-export type BaseContentProps = PageProps;
 export interface CtaPackProps extends ComponentProps<'div'> {
 }
 /** CtaPack — the buttons under a Page's words, wrapping on one line. In a Step it holds ways in (each opens a sheet — the app wires that); the Step's own move is never here. */

package/dist/scaffold/Page.js CHANGED Viewed

@@ -9,15 +9,6 @@ import { cx } from '../cx.js';
 export function Page({ className, ...rest }) {
     return _jsx("section", { className: cx('page', className), ...rest });
 }
-let warned = false;
-/** @deprecated renamed `Page` (2026-09-23) — same props, same markup; kept one version for the move */
-export function BaseContent(props) {
-    if (!warned) {
-        warned = true;
-        console.warn('cardds: BaseContent is now Page — rename it (same props).');
-    }
-    return _jsx(Page, { ...props });
-}
 /** CtaPack — the buttons under a Page's words, wrapping on one line. In a Step it holds ways in (each opens a sheet — the app wires that); the Step's own move is never here. */
 export function CtaPack({ className, ...rest }) {
     return _jsx("div", { className: cx('cta-pack', className), ...rest });

package/package.json CHANGED Viewed

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