@usableapp/cardds 0.7.78 → 0.7.79

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 > 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

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
@@ -511,7 +518,8 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
     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`) · children (the content); its size is
+    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`.

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/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; }
@@ -1341,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;
@@ -1361,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; }
@@ -1396,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;

package/dist/cards/CardFeed.d.ts

@@ -32,7 +32,7 @@ export interface FeedCardProps extends Omit<ComponentProps<'article'>, 'id' | 'r
     icon?: IconName;
     /** the tone slot — see `Tone` */
     tone?: Tone;
-    /** the card's button (one `Btn`) — shown only while the card is big, and then the card is pressed whole: a touch anywhere on it runs this button */
+    /** 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;
@@ -41,6 +41,6 @@ export interface FeedCardProps extends Omit<ComponentProps<'article'>, 'id' | 'r
  * 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: its one control is its foot's button, so it is pressed whole.
+ * 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

@@ -74,7 +74,7 @@ const onSmallKey = (e) => {
  * 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: its one control is its foot's button, so it is pressed whole.
+ * 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);