@usableapp/cardds 0.7.77 → 0.7.79

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 > 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.79 — 2026-10-10
+
+### Changed
+- **A closed stack's base too short for what rests in it scrolls** (Lh 2026-10-10) — before → after: loose things in `SheetStack base` / `Home base` stood on the heads, so on a short phone a content taller than the room ran out over the room's top, cut, and nothing scrolled (two feed cards at 320×568) → nothing is squeezed, the upper thing shows whole from the room's top, the rest lies under the sheet heads, and the member scrolls the room up until the last thing stands clear of the heads by `--stack-base-gap`. A base that holds its content is unchanged, to the pixel, and still takes no scroll and no pull. One `Page` and one `Centre` in a base are unchanged. Nothing to do in an app; a base no longer needs its own short-phone layout.
+- **`FeedCard foot` takes more than one button** — one button: the big card is pressed whole, as before. Two or more (a question: yes · no): only the buttons act. Small, the card hides them all. Story `CardFeed · Question`.
+
+## 0.7.78 — 2026-10-10
+
+### Added
+- **`CardFeed` + `FeedCard`: a queue of cards, two in sight** (Lh 2026-10-09) — before → after: a home that offers several things in turn had to lay out its own cards and decide by hand which one is open → `<CardFeed>` takes the WHOLE queue as `<FeedCard id heading caption icon tone foot>` children in the app's order and shows the first two, one big (heading, content, its button) and one small (the same card cut down to its head). A touch anywhere on the small one swaps the sizes, neither changes place. When the two cards shown change, what is left slides up, the next comes in as the lower card and the feed asks for the upper one to be big. One card alone is big; with none it draws nothing. The app owns the queue (stop rendering a card and it leaves) and may own the size: `big` + `onBigChange(id, 'tap' | 'queue')`, or `defaultBig`. Nothing to wire for the press: the big card is pressed whole (0.7.76), the small card is itself a button. Knobs `--card-feed-gap` (the card gap), `--feed-card-head-h` (`--tap`).
+- **`Home sheets[n].tab` + `onTabChange`** — before → after: a Home sheet's tab was the Home's own (`defaultTab` only), so nothing outside the stack could bring a sheet up on a chosen tab → give a sheet `tab` and it shows that tab; a tapped tab asks `onTabChange(tab)`. Set `tab` and `open` together to open a sheet on a named tab. A sheet without `tab` behaves as before.
+
+### Changed
+- **The pressed-whole rule reads a card more exactly** — a control inside an `inert` part of a card no longer counts as one of its controls; a card that is itself `role="button"` is never pressed whole; and the card's foot counts as its own when a part of the card holds it (not only as a direct child). No card of the gallery changed class.
+
 ## 0.7.77 — 2026-10-10
 
 ### Added

package/README.md

@@ -209,6 +209,13 @@ the card is the material, the sheet is what it is in the stack.
   last one as between two of them (`--stack-base-gap`); one `Page` reads from
   the top, one `Centre` stands in the middle. A card standing there is flat:
   the base clips at its edges, so a shadow would end in a straight line.
+  A room too short for the loose things in it squeezes nothing: the upper
+  thing shows whole from the room's top, the rest lies under the heads, and
+  the room scrolls up until the last thing stands clear of the heads by
+  `--stack-base-gap`. `SheetStack` measures this and renders `is-long` on the
+  base; only then does the base scroll and run under the first sheet's round
+  corners. A room that holds its content does not scroll, and a finger on it
+  moves nothing.
   A tap, or a pull up, opens any sheet over it. The open title or its back
   button, tapped or pulled down, drops it home. A pull down in the open
   content, already at the top, asks `onRefresh` — omit it and that pull only
@@ -225,6 +232,11 @@ the card is the material, the sheet is what it is in the stack.
   under the sheets (hidden while one is open), nothing resizes. At the screen's
   top the open sheet's top corners are square; folded, they are round again. It needs
   `--closed` in a `Screen fill`.
+- **`Home` takes a sheet's tab from the app.** Each of `Home sheets` keeps its
+  own tab (`defaultTab`, else the first) unless the app gives it `tab` — then
+  that tab shows, and a tapped tab asks `onTabChange(tab)`. Something outside
+  the stack (a card in the base) brings a sheet up on a named tab by setting
+  that sheet's `tab` and the Home's `open` together. Story `Home · Feed`.
 - **Five sheets max.** Slots are declared per `:nth-child` in `stack.css`; a
   sixth would render at slot 0, on top of the first.
 - **Every head needs its own `.sheet-stack__back`** if the stack is `--tap`. It stays
@@ -491,6 +503,26 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
     the one button in the head or in the content, a disabled button, a sheet, a
     stack's sheet, a modal. A card that is itself a link or a label was pressed
     whole already. Story `Card · PressedWhole`.
+  - **A feed is a queue of cards, two in sight** (Lh 2026-10-09). `CardFeed`
+    takes the WHOLE queue as `FeedCard` children, in the app's order, and shows
+    the first two: one BIG (heading, content, its button) and one SMALL (the
+    same card cut down to its head — no content, no button). A touch anywhere
+    on the small one makes it the big one and the other the small one; neither
+    changes place. The small card is itself the button (named by its heading,
+    Enter and Space) and what it does not show cannot be pressed, focused or
+    read; the big card is a plain card, pressed whole by the rule above. When
+    the two cards shown change — a card left the queue, a new one came — what
+    is left slides up, the next comes in as the lower card, and the UPPER card
+    is big, whichever was big before. One card alone is big; no card, nothing
+    is drawn. The queue is the app's: a card leaves when the app stops
+    rendering it. Which card is big is controlled like an input: `big` (a
+    card's `id`) + `onBigChange(id, 'tap' | 'queue')`, or `defaultBig`. A
+    `FeedCard` is `id` · `heading` · `caption` · `icon` (its thumb, in both
+    sizes) · `tone` · `foot` (one `Btn`: the big card is pressed whole; two
+    or more: only the buttons act) · children (the content); its size is
+    the feed's, never a prop. Knobs `--card-feed-gap`, `--feed-card-head-h`.
+    Reduced motion: nothing slides or fades. Stories `CardFeed · Default`,
+    `Home · Feed`.
 - A page with **one feature and one CTA** (an install page, a single
   decision) may be contained in one card: head, the pitch, foot.
 - **A bottom sheet holds what the member acts on** — controls, or small

package/css/actions.css

@@ -362,6 +362,7 @@
    something as wide as its card (a row, a summary line, a card, a step bar, a peeked sheet) fades under the finger (--press-dim)
    instead, because a whole row shrinking reads as the card moving. A choice's fill fades in as it is picked. Disabled = no
    pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here.
+   .feed-card--small (Lh 2026-10-09) = the small card of a CardFeed: the card itself is the button that grows it, so it has the ring too.
    .card--go (Lh 2026-10-09) = a card pressed whole: `Card` renders it while its ONE control is its foot's button or a row card's end
    button (src/cards/cardGo.ts). It is in the DIM pointer and :active lists only — the focus ring and the disabled look stay the
    button's, the card itself is never focused or disabled. */
@@ -372,7 +373,7 @@
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
 }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .toggle-field, .post-box__edge) {
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge) {
   cursor: pointer;
   touch-action: manipulation;
   transition: opacity var(--motion-press) ease-out;
@@ -387,7 +388,7 @@
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
 /* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back, a post letter's sheet over the other) must not turn see-through:
    it darkens a touch instead (--press-shade) */
@@ -398,7 +399,7 @@
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):focus-visible,
 :where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .feed-card--small, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,

package/css/base.css

@@ -70,8 +70,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* scrollbar hidden, scroll kept: the track scrolls by touch/drag, never by a visible bar —
    .bleed (card.css) is the one exception, its bar is designed, not hidden */
-:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick) { scrollbar-width: none; }
-:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick)::-webkit-scrollbar { display: none; }
+:where(html, .sheet-stack--tap > .card, .sheet-stack__base, .step > .pages, .picker__rail, .avatar-pick) { scrollbar-width: none; }
+:where(html, .sheet-stack--tap > .card, .sheet-stack__base, .step > .pages, .picker__rail, .avatar-pick)::-webkit-scrollbar { display: none; }
 
 /* icon from icons.svg sprite: <svg class="icon"><use href="icons.svg#bell"/></svg> */
 .icon { width: var(--icon-size, var(--icon)); height: var(--icon-size, var(--icon)); flex: none; }

package/css/card.css

@@ -309,6 +309,36 @@
   opacity: 0.85;
 }
 
+/* ---- card feed: a queue of cards, two in sight — one big, one small (Lh 2026-10-09) ----
+   <div class="card-feed">
+     <article class="card feed-card"><div class="card__head feed-card__head">thumb · h2 · caption</div>
+       <div class="feed-card__more"><div class="feed-card__rest">content · <div class="card__foot">…</div></div></div></article>
+     <article class="card feed-card feed-card--small" role="button" tabindex="0">… <div class="feed-card__more" inert>…</div></article>
+   </div>
+   ONE markup in both sizes: the head always shows, the rest is a grid row that goes 1fr ↔ 0fr (never a height: Safari 16.4 has no
+   interpolate-size). The card's own row gap is 0 and the rest carries it as its first thing's margin, so a small card ends on its
+   head with nothing under it. The rest is clipped by clip-path while it shows: the clip runs out to the card's edges and a little
+   under the foot, so the button's focus ring is whole. Closed, it is `overflow: clip` as well — a clip-path alone leaves the
+   shut content in the scrollable overflow of whatever holds the feed — and hidden once the row has shut. */
+.card-feed { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--card-feed-gap, var(--card-gap-rest)); }
+.feed-card { row-gap: 0; }
+.feed-card__head { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: var(--feed-card-head-h, var(--tap)); }
+.feed-card__head:has(> .card__thumb) { grid-template-columns: auto minmax(0, 1fr); }
+.feed-card__head:has(> .t-caption) > .card__thumb { grid-row: span 2; }
+.feed-card__more { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
+.feed-card--small > .feed-card__more { grid-template-rows: 0fr; }
+.feed-card__rest {
+  min-height: 0;
+  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--card-gap);
+  clip-path: inset(0 calc(-1 * var(--card-pad)) calc(-1 * var(--sp-2)));
+}
+.feed-card__rest > :first-child { margin-top: var(--card-gap); }
+.feed-card--small .feed-card__rest { overflow: clip; visibility: hidden; }
+@media (prefers-reduced-motion: no-preference) {
+  .feed-card__more { transition: grid-template-rows var(--motion-sheet) ease; }
+  .feed-card--small .feed-card__rest { transition: visibility 0s var(--motion-sheet); }
+}
+
 /* ---- inline stat block (revenue-style) ---- */
 .stat { display: grid; gap: var(--stat-gap, var(--sp-1)); }
 .stat--centre { text-align: center; justify-items: center; } /* the one number of a sheet or a stage, under a centred avatar */

package/css/stack.css

@@ -278,7 +278,8 @@
   grid-area: 1 / 1;
   align-self: start;
   z-index: 0;
-  height: var(--_headroom, 0px);
+  --_under: 0px;
+  height: calc(var(--_headroom, 0px) + var(--_under));
   padding-inline: var(--screen-pad);
   --_gap: var(--card-gap, var(--sp-5));
   display: grid;
@@ -298,7 +299,26 @@
 .sheet-stack__base > .screen__centre { padding-inline: 0; }
 /* loose things rest against the peeks, so the room under the last one is the room between two of them (Lh 2026-10-09: a card's
    bottom edge lay on the first sheet's top edge). A lone Page reads from the top and a lone Centre stands in the middle: neither rests there. */
-.sheet-stack__base:not(:has(> .page:only-child, > .screen__centre:only-child)) { padding-bottom: var(--stack-base-gap, var(--_gap)); }
+.sheet-stack__base:not(:has(> .page:only-child, > .screen__centre:only-child)) {
+  padding-bottom: calc(var(--stack-base-gap, var(--_gap)) + var(--_under));
+  /* the first row takes the free room and its thing stands at that row's end: on the peeks while there is room, from the room's TOP when
+     there is none. `align-content: end` ran a long content out over the top, where no scroll reaches; the `safe` keyword is not relied
+     on, the floor is Safari 16.4. */
+  grid-template-rows: 1fr;
+  align-content: start;
+  align-items: end;
+}
+/* a room too short for what rests in it (Lh 2026-10-10; `is-long`, measured and rendered by SheetStack): nothing is squeezed, the upper
+   thing shows whole, the rest lies under the sheets and the room scrolls up to it. Only then: a room that holds its content keeps
+   touch-action: none, so a finger there pulls nothing. The box runs under the first sheet by its corner's radius, or a straight cut at
+   the sheet's top edge would show ground in the two round corners; the padding grows by the same, so the last thing still scrolls
+   clear of the heads by the gap, and the content box (cqh) is the one it was. */
+.sheet-stack__base.is-long:not(:has(> .page:only-child, > .screen__centre:only-child)) {
+  --_under: var(--card-radius, var(--r-card));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  touch-action: pan-y;
+}
 /* a card standing in this room is FLAT (Lh 2026-10-09): the room clips at its own edges, and a card's shadow cut there drew a straight
    line under the bar and along the first sheet. Its ground and its radius are what say "card" here. */
 :is([data-palette], [data-finish="lit"]) .sheet-stack__base .card { box-shadow: none; }
@@ -333,7 +353,7 @@
 .sheet-stack--flood { --_bar: calc(var(--top-h, var(--header-h)) + var(--_bar-gap)); }
 .sheet-stack--flood > .sheet-stack__base {
   margin-top: var(--_bar);
-  height: calc(var(--_headroom, 0px) - var(--_bar));
+  height: calc(var(--_headroom, 0px) - var(--_bar) + var(--_under));
 }
 .screen--fill:has(> .sheet-stack--flood > .stack-card.is-open, > .sheet-stack--flood > :not(.stack-card) > .stack-card.is-open) > :is(.appbar, .topbar):first-child {
   visibility: hidden;

package/dist/cardds.css

@@ -540,8 +540,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* scrollbar hidden, scroll kept: the track scrolls by touch/drag, never by a visible bar —
    .bleed (card.css) is the one exception, its bar is designed, not hidden */
-:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick) { scrollbar-width: none; }
-:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick)::-webkit-scrollbar { display: none; }
+:where(html, .sheet-stack--tap > .card, .sheet-stack__base, .step > .pages, .picker__rail, .avatar-pick) { scrollbar-width: none; }
+:where(html, .sheet-stack--tap > .card, .sheet-stack__base, .step > .pages, .picker__rail, .avatar-pick)::-webkit-scrollbar { display: none; }
 
 /* icon from icons.svg sprite: <svg class="icon"><use href="icons.svg#bell"/></svg> */
 .icon { width: var(--icon-size, var(--icon)); height: var(--icon-size, var(--icon)); flex: none; }
@@ -995,6 +995,36 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   opacity: 0.85;
 }
 
+/* ---- card feed: a queue of cards, two in sight — one big, one small (Lh 2026-10-09) ----
+   <div class="card-feed">
+     <article class="card feed-card"><div class="card__head feed-card__head">thumb · h2 · caption</div>
+       <div class="feed-card__more"><div class="feed-card__rest">content · <div class="card__foot">…</div></div></div></article>
+     <article class="card feed-card feed-card--small" role="button" tabindex="0">… <div class="feed-card__more" inert>…</div></article>
+   </div>
+   ONE markup in both sizes: the head always shows, the rest is a grid row that goes 1fr ↔ 0fr (never a height: Safari 16.4 has no
+   interpolate-size). The card's own row gap is 0 and the rest carries it as its first thing's margin, so a small card ends on its
+   head with nothing under it. The rest is clipped by clip-path while it shows: the clip runs out to the card's edges and a little
+   under the foot, so the button's focus ring is whole. Closed, it is `overflow: clip` as well — a clip-path alone leaves the
+   shut content in the scrollable overflow of whatever holds the feed — and hidden once the row has shut. */
+.card-feed { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--card-feed-gap, var(--card-gap-rest)); }
+.feed-card { row-gap: 0; }
+.feed-card__head { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: var(--feed-card-head-h, var(--tap)); }
+.feed-card__head:has(> .card__thumb) { grid-template-columns: auto minmax(0, 1fr); }
+.feed-card__head:has(> .t-caption) > .card__thumb { grid-row: span 2; }
+.feed-card__more { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
+.feed-card--small > .feed-card__more { grid-template-rows: 0fr; }
+.feed-card__rest {
+  min-height: 0;
+  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--card-gap);
+  clip-path: inset(0 calc(-1 * var(--card-pad)) calc(-1 * var(--sp-2)));
+}
+.feed-card__rest > :first-child { margin-top: var(--card-gap); }
+.feed-card--small .feed-card__rest { overflow: clip; visibility: hidden; }
+@media (prefers-reduced-motion: no-preference) {
+  .feed-card__more { transition: grid-template-rows var(--motion-sheet) ease; }
+  .feed-card--small .feed-card__rest { transition: visibility 0s var(--motion-sheet); }
+}
+
 /* ---- inline stat block (revenue-style) ---- */
 .stat { display: grid; gap: var(--stat-gap, var(--sp-1)); }
 .stat--centre { text-align: center; justify-items: center; } /* the one number of a sheet or a stage, under a centred avatar */
@@ -1311,7 +1341,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   grid-area: 1 / 1;
   align-self: start;
   z-index: 0;
-  height: var(--_headroom, 0px);
+  --_under: 0px;
+  height: calc(var(--_headroom, 0px) + var(--_under));
   padding-inline: var(--screen-pad);
   --_gap: var(--card-gap, var(--sp-5));
   display: grid;
@@ -1331,7 +1362,26 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-stack__base > .screen__centre { padding-inline: 0; }
 /* loose things rest against the peeks, so the room under the last one is the room between two of them (Lh 2026-10-09: a card's
    bottom edge lay on the first sheet's top edge). A lone Page reads from the top and a lone Centre stands in the middle: neither rests there. */
-.sheet-stack__base:not(:has(> .page:only-child, > .screen__centre:only-child)) { padding-bottom: var(--stack-base-gap, var(--_gap)); }
+.sheet-stack__base:not(:has(> .page:only-child, > .screen__centre:only-child)) {
+  padding-bottom: calc(var(--stack-base-gap, var(--_gap)) + var(--_under));
+  /* the first row takes the free room and its thing stands at that row's end: on the peeks while there is room, from the room's TOP when
+     there is none. `align-content: end` ran a long content out over the top, where no scroll reaches; the `safe` keyword is not relied
+     on, the floor is Safari 16.4. */
+  grid-template-rows: 1fr;
+  align-content: start;
+  align-items: end;
+}
+/* a room too short for what rests in it (Lh 2026-10-10; `is-long`, measured and rendered by SheetStack): nothing is squeezed, the upper
+   thing shows whole, the rest lies under the sheets and the room scrolls up to it. Only then: a room that holds its content keeps
+   touch-action: none, so a finger there pulls nothing. The box runs under the first sheet by its corner's radius, or a straight cut at
+   the sheet's top edge would show ground in the two round corners; the padding grows by the same, so the last thing still scrolls
+   clear of the heads by the gap, and the content box (cqh) is the one it was. */
+.sheet-stack__base.is-long:not(:has(> .page:only-child, > .screen__centre:only-child)) {
+  --_under: var(--card-radius, var(--r-card));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  touch-action: pan-y;
+}
 /* a card standing in this room is FLAT (Lh 2026-10-09): the room clips at its own edges, and a card's shadow cut there drew a straight
    line under the bar and along the first sheet. Its ground and its radius are what say "card" here. */
 :is([data-palette], [data-finish="lit"]) .sheet-stack__base .card { box-shadow: none; }
@@ -1366,7 +1416,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-stack--flood { --_bar: calc(var(--top-h, var(--header-h)) + var(--_bar-gap)); }
 .sheet-stack--flood > .sheet-stack__base {
   margin-top: var(--_bar);
-  height: calc(var(--_headroom, 0px) - var(--_bar));
+  height: calc(var(--_headroom, 0px) - var(--_bar) + var(--_under));
 }
 .screen--fill:has(> .sheet-stack--flood > .stack-card.is-open, > .sheet-stack--flood > :not(.stack-card) > .stack-card.is-open) > :is(.appbar, .topbar):first-child {
   visibility: hidden;
@@ -2737,6 +2787,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    something as wide as its card (a row, a summary line, a card, a step bar, a peeked sheet) fades under the finger (--press-dim)
    instead, because a whole row shrinking reads as the card moving. A choice's fill fades in as it is picked. Disabled = no
    pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here.
+   .feed-card--small (Lh 2026-10-09) = the small card of a CardFeed: the card itself is the button that grows it, so it has the ring too.
    .card--go (Lh 2026-10-09) = a card pressed whole: `Card` renders it while its ONE control is its foot's button or a row card's end
    button (src/cards/cardGo.ts). It is in the DIM pointer and :active lists only — the focus ring and the disabled look stay the
    button's, the card itself is never focused or disabled. */
@@ -2747,7 +2798,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
 }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .toggle-field, .post-box__edge) {
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge) {
   cursor: pointer;
   touch-action: manipulation;
   transition: opacity var(--motion-press) ease-out;
@@ -2762,7 +2813,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
 /* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back, a post letter's sheet over the other) must not turn see-through:
    it darkens a touch instead (--press-shade) */
@@ -2773,7 +2824,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):focus-visible,
 :where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .feed-card--small, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,

package/dist/cards/CardFeed.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type Tone } from './Card.js';
+import { type IconName } from '../type/Icon.js';
+/** why the feed asks for another big card: the member touched the small one · the two cards shown changed */
+export type CardFeedReason = 'tap' | 'queue';
+export interface CardFeedProps extends ComponentProps<'div'> {
+    /** CONTROLLED: the `id` of the card shown big — with `onBigChange`; or `defaultBig`. An id that is not one of the two cards shown reads as the upper one */
+    big?: string;
+    /** UNCONTROLLED: the card big on arrival (default: the upper one); the feed then keeps its own. Pair of `big` */
+    defaultBig?: string;
+    /** the feed asks for another big card: its `id`, and why — `tap` (the member touched the small card) · `queue` (the two cards shown changed: the upper one is asked for) */
+    onBigChange?: (id: string, reason: CardFeedReason) => void;
+    /** the WHOLE queue, in the app's order: one `FeedCard` each, as direct children. The feed draws the first two */
+    children?: ReactNode;
+}
+/**
+ * CardFeed — a QUEUE of cards the system hands the member one after another; at most two are on the screen: one BIG (heading, content,
+ * its button) and one SMALL (the same card cut down to its head). A touch anywhere on the small one makes it the big one and the other
+ * the small one; neither changes place. The queue is the app's: when it changes (a card left, a new one came) what is left slides up,
+ * the next comes in as the lower card, and the feed asks for the UPPER card to be big, whichever was big before. One card alone is big;
+ * no card, nothing is drawn. Which card is big is controlled like an input (`big` + `onBigChange`, or `defaultBig`).
+ */
+export declare function CardFeed({ big: bigProp, defaultBig, onBigChange, className, children, ref, ...rest }: CardFeedProps): import("react").JSX.Element | null;
+export interface FeedCardProps extends Omit<ComponentProps<'article'>, 'id' | 'role' | 'tabIndex'> {
+    /** which card of the queue this is — the app's own id for it, unique in the feed. `CardFeed big` / `onBigChange` speak in these */
+    id: string;
+    /** the card's heading — shown in both sizes; it names the small card */
+    heading: ReactNode;
+    /** the muted line under the heading, shown in both sizes */
+    caption?: ReactNode;
+    /** the card's thumb at the head's start: an icon by name, drawn in both sizes */
+    icon?: IconName;
+    /** the tone slot — see `Tone` */
+    tone?: Tone;
+    /** the card's button, or its buttons — shown only while the card is big. ONE `Btn`: the big card is pressed whole, a touch anywhere on it runs that button. Two or more (a question: yes · no): only the buttons act, a touch elsewhere on the card does nothing */
+    foot?: ReactNode;
+    /** the content — words, a picture, a Stamp. Shown only while the card is big */
+    children?: ReactNode;
+}
+/**
+ * FeedCard — ONE card of a `CardFeed`'s queue, the same markup in both sizes: its head (thumb · heading · caption) always shows, its
+ * content and its button are one part that opens while the card is big. The SIZE IS THE FEED'S, never a prop. Small, the card itself
+ * is the control (a button named by its heading; Enter and Space) and its closed part cannot be pressed, focused or read. Big, it is a
+ * plain card: with one button in its foot it is pressed whole; with two or more only the buttons act.
+ */
+export declare function FeedCard({ id, heading, caption, icon, tone, foot, className, children, onClick, onKeyDown, ref, ...rest }: FeedCardProps): import("react").JSX.Element;

package/dist/cards/CardFeed.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useId, useLayoutEffect, useRef } from 'react';
+import { cx } from '../cx.js';
+import { reducedMotion, useControlled, warnOnce } from '../state.js';
+import { Card } from './Card.js';
+import { CardHead } from './CardHead.js';
+import { CardFoot } from './CardFoot.js';
+import { CardThumb } from './CardParts.js';
+import { Icon } from '../type/Icon.js';
+import { Text } from '../type/Text.js';
+const FeedCtx = createContext(null);
+/**
+ * CardFeed — a QUEUE of cards the system hands the member one after another; at most two are on the screen: one BIG (heading, content,
+ * its button) and one SMALL (the same card cut down to its head). A touch anywhere on the small one makes it the big one and the other
+ * the small one; neither changes place. The queue is the app's: when it changes (a card left, a new one came) what is left slides up,
+ * the next comes in as the lower card, and the feed asks for the UPPER card to be big, whichever was big before. One card alone is big;
+ * no card, nothing is drawn. Which card is big is controlled like an input (`big` + `onBigChange`, or `defaultBig`).
+ */
+export function CardFeed({ big: bigProp, defaultBig, onBigChange, className, children, ref, ...rest }) {
+    const queue = Children.toArray(children).filter((c) => isValidElement(c) && typeof c.props.id === 'string');
+    if (queue.length !== Children.count(children))
+        warnOnce('card-feed-child', 'cardds CardFeed: every child is a <FeedCard id="…"> — a child without a string `id` is not drawn');
+    const shown = queue.slice(0, 2);
+    const ids = shown.map((c) => c.props.id);
+    const [asked, request] = useControlled(bigProp, defaultBig, onBigChange);
+    const big = asked !== undefined && ids.includes(asked) ? asked : ids[0];
+    const own = useRef(null);
+    const tops = useRef(new Map());
+    const was = useRef(null);
+    const key = ids.join('\n');
+    useLayoutEffect(() => {
+        const box = own.current;
+        const cards = box ? [...box.children] : [];
+        const changed = was.current !== null && was.current !== key;
+        was.current = key;
+        if (changed) {
+            if (ids.length)
+                request(ids[0], 'queue');
+            cards.forEach((el) => el.getAnimations().forEach((a) => { if (a.id === 'feed-move')
+                a.cancel(); })); // read the resting places
+        }
+        const at = new Map(cards.map((el) => [el, el.offsetTop]));
+        if (changed && box && !reducedMotion()) {
+            const ms = (parseFloat(getComputedStyle(box).getPropertyValue('--motion-sheet')) || 0.35) * 1000;
+            for (const el of cards) {
+                const from = tops.current.get(el);
+                const move = from === undefined
+                    ? el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: ms, easing: 'ease-out' }) // it came in: no place to come from
+                    : from !== at.get(el) ? el.animate([{ translate: `0 ${from - (at.get(el) ?? 0)}px` }, { translate: '0 0' }], { duration: ms, easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)' }) : null;
+                if (move)
+                    move.id = 'feed-move';
+            }
+        }
+        tops.current = at;
+    });
+    const setRef = (node) => {
+        own.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    if (!shown.length)
+        return null;
+    return (_jsx(FeedCtx.Provider, { value: { big, grow: (id) => request(id, 'tap') }, children: _jsx("div", { ref: setRef, className: cx('card-feed', className), ...rest, children: shown }) }));
+}
+const onSmallKey = (e) => {
+    if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' '))
+        return;
+    e.preventDefault();
+    e.currentTarget.click();
+};
+/**
+ * FeedCard — ONE card of a `CardFeed`'s queue, the same markup in both sizes: its head (thumb · heading · caption) always shows, its
+ * content and its button are one part that opens while the card is big. The SIZE IS THE FEED'S, never a prop. Small, the card itself
+ * is the control (a button named by its heading; Enter and Space) and its closed part cannot be pressed, focused or read. Big, it is a
+ * plain card: with one button in its foot it is pressed whole; with two or more only the buttons act.
+ */
+export function FeedCard({ id, heading, caption, icon, tone, foot, className, children, onClick, onKeyDown, ref, ...rest }) {
+    const feed = useContext(FeedCtx);
+    if (!feed)
+        warnOnce('feed-card-alone', 'cardds FeedCard: outside a <CardFeed> it has nobody to say its size — it is drawn big');
+    const small = feed != null && feed.big !== id;
+    const name = useId();
+    const own = useRef(null);
+    const byKey = useRef(false);
+    useLayoutEffect(() => {
+        // grown from the keyboard: the card stopped being a control under the cursor, so the cursor goes on to its button
+        if (!small && byKey.current)
+            own.current?.querySelector('.card__foot :is(button, a[href])')?.focus({ preventScroll: true });
+        byKey.current = false;
+    }, [small]);
+    const setRef = (node) => {
+        own.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    return (_jsxs(Card, { ref: setRef, tone: tone, className: cx('feed-card', small && 'feed-card--small', className), ...rest, ...(small ? { role: 'button', tabIndex: 0, 'aria-expanded': false, 'aria-labelledby': name } : {}), onClick: (e) => { onClick?.(e); if (small && !e.defaultPrevented) {
+            byKey.current = e.detail === 0;
+            feed.grow(id);
+        } }, onKeyDown: (e) => { onKeyDown?.(e); if (small && !e.defaultPrevented)
+            onSmallKey(e); }, children: [_jsxs(CardHead, { className: "feed-card__head", children: [icon && _jsx(CardThumb, { children: _jsx(Icon, { name: icon, size: "sm" }) }), _jsx(Text, { level: "h2", id: name, children: heading }), caption != null && _jsx(Text, { level: "caption", muted: true, children: caption })] }), _jsx("div", { className: "feed-card__more", inert: small, children: _jsxs("div", { className: "feed-card__rest", children: [children, foot != null && _jsx(CardFoot, { children: foot })] }) })] }));
+}

package/dist/cards/cardGo.js

@@ -8,20 +8,22 @@ const CONTROLS = [
     '[tabindex]:not([tabindex="-1"])', '[contenteditable]',
     '.stamp-on', // dragged
 ].join(', ');
-/** a card that is pressed whole already (a link, a label, a button), or where a touch means something else: a sheet is where the member
- *  acts, a modal asks, a touch on a stack's sheet opens it (`stack-card` is what `Card` renders from its `stack` prop) */
-const NOT_A_GO_CARD = 'a, label, button, .sheet, .modal, .stack-card';
+/** a card that is pressed whole already (a link, a label, a button, a card that is itself the control), or where a touch means
+ *  something else: a sheet is where the member acts, a modal asks, a touch on a stack's sheet opens it (`stack-card` is what `Card`
+ *  renders from its `stack` prop) */
+const NOT_A_GO_CARD = 'a, label, button, [role="button"], .sheet, .modal, .stack-card';
 /** the control this card presses when it is touched off that control, or null: the card is only read */
 export function goControl(card) {
     if (card.matches(NOT_A_GO_CARD))
         return null;
-    const controls = card.querySelectorAll(CONTROLS);
+    const controls = [...card.querySelectorAll(CONTROLS)].filter((c) => !c.closest('[inert]')); // an inert part cannot be pressed, focused or read: nothing in it is a control
     if (controls.length !== 1)
         return null;
     const control = controls[0];
     if (control.matches(':disabled, [aria-disabled="true"]'))
         return null;
-    const inFoot = control.parentElement?.matches('.card__foot') && control.parentElement.parentElement === card;
+    const foot = control.parentElement;
+    const inFoot = foot?.matches('.card__foot') && foot.parentElement?.closest('.card') === card; // the card's OWN foot, also when a part of the card holds it (a FeedCard's region)
     const atRowEnd = card.matches('.card--row') && card.lastElementChild === control;
     return inFoot || atRowEnd ? control : null;
 }