@usableapp/cardds 0.7.69 → 0.7.71

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 > 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.71 — 2026-10-08
+
+### Fixed
+- **A popover `Menu` / `Dropdown` on an iPhone was as tall as the screen** (Lh 2026-10-08) — in Safari on iOS 26 an open menu ran from under its button to the foot of the screen, its rows spread out over that height. Before → after: three rows stood 706px tall → 163px, each row its own 48px. Nothing to change in an app: the same markup, the same props. Chrome and Android never showed it.
+
+## 0.7.70 — 2026-10-08
+
+### Added
+- **`Home rise="flood"` / `SheetStack closed rise="flood"`: an opened sheet floods the whole screen, over the top bar** (Lh 2026-10-08) — a tap on a sheet head brings that sheet up over the `AppBar` to fill the screen from its top edge to its bottom. The bar is covered, and hidden from the keyboard and a screen reader, while a sheet is open; it is back at once when the sheet folds. At the screen's top the open sheet's top corners are square; folded, they are round again. Closed, the home looks exactly as before: the bar on top, the `base` under it, the heads at the bottom. `<Home rise="flood" top={…} title="…" sheets={…} base={…} />`. Before: an open sheet always stopped under the top bar; that is still the default (`rise="under"`), so nothing to change in a screen that does not ask for it. Only for a `closed` stack in a `Screen fill` (`Home` always is); on any other stack it warns once and is ignored. In plain markup the class is `sheet-stack--flood`. On a phone running edge to edge the sheet stops at the status bar's line (`--safe-top`), it does not go under it. Gallery: screen · Home, the `Flood` story.
+
 ## 0.7.69 — 2026-10-07
 
 ### Fixed

package/README.md

@@ -188,6 +188,12 @@ the card is the material, the sheet is what it is in the stack.
   mark changes colour the same way. Right after a fold, while the
   pile is still coming back, a tap is answered by where each head RESTS: the
   head that will stand under the finger opens, whatever is passing there.
+  An open sheet stops under the top bar. `rise="flood"` on the `SheetStack` (or
+  `Home`) — `sheet-stack--flood` in markup — lets it rise over the bar and fill
+  the whole screen instead: the stack is then the whole screen, the bar a layer
+  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`.
 - **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

package/css/layover.css

@@ -127,6 +127,7 @@
   --menu-pad: var(--sp-2);       /* published: a row's radius is concentric with the panel's */
   padding: var(--menu-pad);
   min-width: 12rem;
+  align-content: start;       /* rows keep their own height: WebKit stretches a popover grid's rows to the whole room under its anchor (iOS 26.5, 2026-10-08) */
   background: var(--menu-bg, var(--action-bg));
   color: var(--menu-ink, var(--action-ink));
   box-shadow: var(--menu-shadow, var(--shadow-float));

package/css/stack.css

@@ -30,6 +30,7 @@
    </div>
    --closed (with --tap): nothing open on arrival — every sheet peeks at the
    bottom, the headroom above is the base's (block below).
+   --flood (with --closed): an open sheet fills the whole screen, over the top bar.
    Direct children only, five at most (slots are :nth-child below):
    first = the back of the stack, last = the front. README "Sheet stack
    markup". The SheetStack component opens and closes a --tap stack; without it the
@@ -295,6 +296,48 @@
 .sheet-stack__base:has(> .screen__centre:only-child) { align-content: center; }
 .sheet-stack__base > .screen__centre { padding-inline: 0; }
 
+/* ============================================================
+   .sheet-stack--flood — a closed stack whose open sheet FLOODS the screen: it rises over the top bar and fills the whole screen
+   (`rise="flood"`), instead of stopping under it. Only for a --closed --tap stack in a .screen--fill.
+
+   A sheet is rigid: it cannot grow to cover the bar, it only moves by translate. So the stack is made the
+   whole screen instead, and every sheet is screen-height always. The bar leaves the column and becomes a
+   LAYER at the screen's top, under the sheets (they paint at --level 1-5, the bar at 0): closed, the peeks
+   still end at the stack's bottom, --_headroom unchanged; open, the same translate lands the sheet flush
+   at the stack's top, which is now the screen's top, and the bar is what it covers. Nothing resizes, no
+   new state, no script — Screen only measures the bar (--top-h; a bar is a floor, it grows with the text).
+   The screen's safe-top padding stays: a sheet stops at that line, never under the phone's status bar.
+
+   The base must not sit under the bar or take its taps: it starts below the bar (margin, not padding —
+   its box does not overlap the bar) and is shorter by the same amount, so its room is exactly what it was
+   under a bar in the column. That amount is the bar plus the breathing under it today (--sp-2 under an
+   appbar, the screen's gap under a topbar). Covered, the bar is also hidden (visibility), after the sheet
+   has covered it and at once when the sheet folds, so a keyboard and a screen reader do not reach it.
+   ============================================================ */
+.screen--fill:has(> .sheet-stack--flood) { --_bar-gap: var(--sp-2); }
+.screen--fill:has(> .sheet-stack--flood):has(> .topbar:first-child) { --_bar-gap: var(--screen-gap); }
+.screen--fill:has(> .sheet-stack--flood) > :is(.appbar, .topbar):first-child {
+  position: absolute;
+  inset: var(--safe-top) 0 auto;
+  max-width: none;
+  margin: 0;
+  z-index: 0; /* under every sheet (--level 1-5); the base clears it by margin */
+}
+.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));
+}
+.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;
+  transition: visibility 0s linear var(--motion-sheet); /* gone once the sheet has covered it; back at once on a fold (the rule above has no delay) */
+}
+/* at the screen's top the open sheet's top corners are SQUARE (Lh 2026-10-08): round, they left two small pockets of the
+   bar's ground at the glass. They square as the sheet rises and round again as it folds, in the slide's own time. Paint
+   only, the sheet's size is untouched. A pull on the head keeps them square until the finger lets go. */
+.sheet-stack--flood > .card { transition: translate var(--motion-sheet) ease, border-radius var(--motion-sheet) ease; }
+.sheet-stack--flood > .card.is-open { border-top-left-radius: 0; border-top-right-radius: 0; }
+
 /* back button: lives in a slot the header reserves once open, and DISSOLVES
    into it — an opacity fade in place, never a slide in from the left (the
    slide read as a second thing moving while the sheet itself moved; Lh,

package/dist/cardds.css

@@ -1054,6 +1054,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    </div>
    --closed (with --tap): nothing open on arrival — every sheet peeks at the
    bottom, the headroom above is the base's (block below).
+   --flood (with --closed): an open sheet fills the whole screen, over the top bar.
    Direct children only, five at most (slots are :nth-child below):
    first = the back of the stack, last = the front. README "Sheet stack
    markup". The SheetStack component opens and closes a --tap stack; without it the
@@ -1319,6 +1320,48 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-stack__base:has(> .screen__centre:only-child) { align-content: center; }
 .sheet-stack__base > .screen__centre { padding-inline: 0; }
 
+/* ============================================================
+   .sheet-stack--flood — a closed stack whose open sheet FLOODS the screen: it rises over the top bar and fills the whole screen
+   (`rise="flood"`), instead of stopping under it. Only for a --closed --tap stack in a .screen--fill.
+
+   A sheet is rigid: it cannot grow to cover the bar, it only moves by translate. So the stack is made the
+   whole screen instead, and every sheet is screen-height always. The bar leaves the column and becomes a
+   LAYER at the screen's top, under the sheets (they paint at --level 1-5, the bar at 0): closed, the peeks
+   still end at the stack's bottom, --_headroom unchanged; open, the same translate lands the sheet flush
+   at the stack's top, which is now the screen's top, and the bar is what it covers. Nothing resizes, no
+   new state, no script — Screen only measures the bar (--top-h; a bar is a floor, it grows with the text).
+   The screen's safe-top padding stays: a sheet stops at that line, never under the phone's status bar.
+
+   The base must not sit under the bar or take its taps: it starts below the bar (margin, not padding —
+   its box does not overlap the bar) and is shorter by the same amount, so its room is exactly what it was
+   under a bar in the column. That amount is the bar plus the breathing under it today (--sp-2 under an
+   appbar, the screen's gap under a topbar). Covered, the bar is also hidden (visibility), after the sheet
+   has covered it and at once when the sheet folds, so a keyboard and a screen reader do not reach it.
+   ============================================================ */
+.screen--fill:has(> .sheet-stack--flood) { --_bar-gap: var(--sp-2); }
+.screen--fill:has(> .sheet-stack--flood):has(> .topbar:first-child) { --_bar-gap: var(--screen-gap); }
+.screen--fill:has(> .sheet-stack--flood) > :is(.appbar, .topbar):first-child {
+  position: absolute;
+  inset: var(--safe-top) 0 auto;
+  max-width: none;
+  margin: 0;
+  z-index: 0; /* under every sheet (--level 1-5); the base clears it by margin */
+}
+.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));
+}
+.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;
+  transition: visibility 0s linear var(--motion-sheet); /* gone once the sheet has covered it; back at once on a fold (the rule above has no delay) */
+}
+/* at the screen's top the open sheet's top corners are SQUARE (Lh 2026-10-08): round, they left two small pockets of the
+   bar's ground at the glass. They square as the sheet rises and round again as it folds, in the slide's own time. Paint
+   only, the sheet's size is untouched. A pull on the head keeps them square until the finger lets go. */
+.sheet-stack--flood > .card { transition: translate var(--motion-sheet) ease, border-radius var(--motion-sheet) ease; }
+.sheet-stack--flood > .card.is-open { border-top-left-radius: 0; border-top-right-radius: 0; }
+
 /* back button: lives in a slot the header reserves once open, and DISSOLVES
    into it — an opacity fade in place, never a slide in from the left (the
    slide read as a second thing moving while the sheet itself moved; Lh,
@@ -4780,6 +4823,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --menu-pad: var(--sp-2);       /* published: a row's radius is concentric with the panel's */
   padding: var(--menu-pad);
   min-width: 12rem;
+  align-content: start;       /* rows keep their own height: WebKit stretches a popover grid's rows to the whole room under its anchor (iOS 26.5, 2026-10-08) */
   background: var(--menu-bg, var(--action-bg));
   color: var(--menu-ink, var(--action-ink));
   box-shadow: var(--menu-shadow, var(--shadow-float));

package/dist/scaffold/Screen.js

@@ -28,14 +28,16 @@ export function Screen({ fill, palette, as = 'div', top, bottom, ready = true, c
         }
         return watchSize([bar], () => el.style.setProperty('--bottom-h', `${bar.offsetHeight}px`));
     }, [bottom, ready]);
-    /* a TRACK as the top, over a stage: its height published as --top-h — the stage keeps that line free for it (step.css) */
+    /* the TOP's height published as --top-h, a TRACK or a bar: a stage keeps that line free under a track (step.css); a
+       stack that rises over the bar (stack.css, `rise="flood"`) starts its base below it. A bar's height is a floor, not a size (it grows
+       with the text), so it is measured */
     useEffect(() => {
-        const el = own.current, track = el?.querySelector(':scope > .track:first-child');
-        if (!el || !track) {
+        const el = own.current, lead = el?.querySelector(':scope > :is(.track, .appbar, .topbar):first-child');
+        if (!el || !lead) {
             el?.style.removeProperty('--top-h');
             return;
         }
-        return watchSize([track], () => el.style.setProperty('--top-h', `${track.offsetHeight}px`));
+        return watchSize([lead], () => el.style.setProperty('--top-h', `${lead.offsetHeight}px`));
     }, [top, ready]);
     const setRef = (node) => {
         own.current = node;

package/dist/sheets/SheetStack.d.ts

@@ -19,6 +19,8 @@ export interface SheetStackProps extends ComponentProps<'div'> {
     fanned?: boolean;
     /** nothing open on arrival (tap mode): every sheet, the front one too, peeks at the stack's bottom; the room above is the base's (`base`). A tap opens any sheet over it */
     closed?: boolean;
+    /** how an OPEN sheet meets the top bar of a closed stack in a `Screen fill`: `under` (default) stops under the bar · `flood` rises over it and fills the WHOLE screen (from the safe-top line down), the bar covered and hidden while a sheet is open. Only for a `closed` tap stack (warns once otherwise). Nothing resizes: the bar is a layer under the sheets */
+    rise?: 'under' | 'flood';
     /** what the base shows in a closed stack's headroom, behind the sheets, laid out against the peeks (a picture, a greeting) */
     base?: ReactNode;
 }
@@ -29,11 +31,12 @@ export interface SheetStackProps extends ComponentProps<'div'> {
  * with CHILDREN, in this order: `<StackBack />` (tap mode), `<Text level="h2" caps>Shopping</Text>`, an `<IconRow>` of Icons —
  * never the `heading` prop (a stack head is back · h2 · tabs on ONE line — StackSheet builds it). Put it last in a `Screen fill`, it bleeds
  * off the bottom. `closed`: nothing open on arrival — every head peeks at the bottom and the base above shows `base` (a home screen
- * with a picture over the menu); the `base` slot is rendered after the sheets, so it never takes a sheet's slot. This is the sheet STACK; a single bottom sheet is `Sheet`.
+ * with a picture over the menu); the `base` slot is rendered after the sheets, so it never takes a sheet's slot. An open sheet fills everything under the top bar,
+ * or with `rise="flood"` the whole screen, covering the bar. This is the sheet STACK; a single bottom sheet is `Sheet`.
  *
  * A COMPONENT, not a wiring: WHICH sheet is open is the app's (`open` + `onOpenChange`, or `defaultOpen`) — so a button anywhere, a route or
  * the phone's back button can open and close a section. WHAT the sheet does with that, and with `refreshing`, lives on the card (`stack`):
  * the place classes, the grip, the pull. The stack only says which index. Sheets are rigid — the open one slides up, the ones after it leave
  * below, the ones before tuck under nearest-first; closing reverses in two beats. Only `translate` (stack.css); never a size.
  */
-export declare function SheetStack({ mode, open, defaultOpen, onOpenChange, onRefresh, refreshing, mark, fanned, closed, base, className, children, onClickCapture, onPointerDownCapture, ref: passed, ...rest }: SheetStackProps): import("react").JSX.Element;
+export declare function SheetStack({ mode, open, defaultOpen, onOpenChange, onRefresh, refreshing, mark, fanned, closed, rise, base, className, children, onClickCapture, onPointerDownCapture, ref: passed, ...rest }: SheetStackProps): import("react").JSX.Element;

package/dist/sheets/SheetStack.js

@@ -48,14 +48,15 @@ function stamp(child, place) {
  * with CHILDREN, in this order: `<StackBack />` (tap mode), `<Text level="h2" caps>Shopping</Text>`, an `<IconRow>` of Icons —
  * never the `heading` prop (a stack head is back · h2 · tabs on ONE line — StackSheet builds it). Put it last in a `Screen fill`, it bleeds
  * off the bottom. `closed`: nothing open on arrival — every head peeks at the bottom and the base above shows `base` (a home screen
- * with a picture over the menu); the `base` slot is rendered after the sheets, so it never takes a sheet's slot. This is the sheet STACK; a single bottom sheet is `Sheet`.
+ * with a picture over the menu); the `base` slot is rendered after the sheets, so it never takes a sheet's slot. An open sheet fills everything under the top bar,
+ * or with `rise="flood"` the whole screen, covering the bar. This is the sheet STACK; a single bottom sheet is `Sheet`.
  *
  * A COMPONENT, not a wiring: WHICH sheet is open is the app's (`open` + `onOpenChange`, or `defaultOpen`) — so a button anywhere, a route or
  * the phone's back button can open and close a section. WHAT the sheet does with that, and with `refreshing`, lives on the card (`stack`):
  * the place classes, the grip, the pull. The stack only says which index. Sheets are rigid — the open one slides up, the ones after it leave
  * below, the ones before tuck under nearest-first; closing reverses in two beats. Only `translate` (stack.css); never a size.
  */
-export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChange, onRefresh, refreshing = null, mark = 'dots', fanned, closed, base, className, children, onClickCapture, onPointerDownCapture, ref: passed, ...rest }) {
+export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChange, onRefresh, refreshing = null, mark = 'dots', fanned, closed, rise = 'under', base, className, children, onClickCapture, onPointerDownCapture, ref: passed, ...rest }) {
     const [current, request] = useControlled(open, defaultOpen, onOpenChange);
     const prev = useRef(current);
     const [closingFrom, setClosingFrom] = useState(null);
@@ -136,6 +137,9 @@ export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChang
         e.stopPropagation();
         request(i);
     };
+    const flood = rise === 'flood' && !!closed && mode === 'tap';
+    if (rise === 'flood' && !flood)
+        warnOnce('stack-rise', 'cardds SheetStack: rise="flood" needs a closed tap stack (`closed`, mode "tap") — the bar a sheet rises over is the screen\'s, and only a closed stack leaves its base under it. Ignored.');
     const closing = current == null && closingFrom != null;
     const anchor = current ?? closingFrom;
     const items = Children.toArray(children);
@@ -158,5 +162,5 @@ export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChang
         };
         return stamp(child, place);
     }) : items;
-    return (_jsxs("div", { className: cx('sheet-stack', mode !== 'static' && `sheet-stack--${mode}`, fanned && 'sheet-stack--fanned', closed && 'sheet-stack--closed', className), ...rest, ref: setRef, onClickCapture: clickCapture, onPointerDownCapture: pointerDownCapture, children: [stamped, base != null && _jsx("div", { className: "sheet-stack__base", children: base })] }));
+    return (_jsxs("div", { className: cx('sheet-stack', mode !== 'static' && `sheet-stack--${mode}`, fanned && 'sheet-stack--fanned', closed && 'sheet-stack--closed', flood && 'sheet-stack--flood', className), ...rest, ref: setRef, onClickCapture: clickCapture, onPointerDownCapture: pointerDownCapture, children: [stamped, base != null && _jsx("div", { className: "sheet-stack__base", children: base })] }));
 }

package/dist/templates/Home.d.ts

@@ -37,6 +37,8 @@ export interface HomeProps extends Omit<ComponentProps<typeof Screen>, 'children
     refreshing?: number | null;
     /** the grip on every sheet: `dots` (default) or `line` — as `SheetStack mark` */
     mark?: 'dots' | 'line';
+    /** how an open sheet meets the top: `under` (default) stops under the AppBar · `flood` rises over it and fills the WHOLE screen, the bar covered while a sheet is open — as `SheetStack rise` */
+    rise?: 'under' | 'flood';
     /** CONTENT above the sheet heads — one `Page`: a welcome, the news, a picture. It reads
      *  from the top; a sheet coming up covers it */
     base?: ReactNode;
@@ -51,9 +53,9 @@ export interface HomeProps extends Omit<ComponentProps<typeof Screen>, 'children
 }
 /**
  * Home — TEMPLATE, a `Screen` with its parts filled — top: the AppBar · content: the `base` (title, welcome…) over a closed `SheetStack` · no bottom
- * (the stack is content, never the bottom: open, a sheet fills everything under the top).
+ * (the stack is content, never the bottom: open, a sheet fills everything under the top, or with `rise="flood"` the whole screen).
  * Every section is a `StackSheet` of three parts: SHEET HEAD (title + icon tabs, a count over a tab; the back button once open) · SHEET BODY (scrolls) · SHEET FOOT (the CTA,
- * at the bottom). A tap on a head brings that sheet up to fill everything under the top. With a LayerHistory above and no `open` prop, that open sheet is one history entry named `home`. Only the open sheet's body is rendered — three
+ * at the bottom). A tap on a head brings that sheet up to fill everything under the top (`rise="flood"`: the whole screen, over the bar). With a LayerHistory above and no `open` prop, that open sheet is one history entry named `home`. Only the open sheet's body is rendered — three
  * sections on one home never cost three pages (`keep` holds a body once opened).
  */
-export declare function Home({ top, title, sheets, open: openProp, defaultOpen, onOpenChange, onRefresh, refreshing, mark, base, keep, backLabel, backAt, children, ...rest }: HomeProps): import("react").JSX.Element;
+export declare function Home({ top, title, sheets, open: openProp, defaultOpen, onOpenChange, onRefresh, refreshing, mark, rise, base, keep, backLabel, backAt, children, ...rest }: HomeProps): import("react").JSX.Element;

package/dist/templates/Home.js

@@ -11,12 +11,12 @@ const TONES = [2, 3, 1, 2, 3];
 const LEAVE = 800; // ms: a closing sheet keeps its body until it has slid home
 /**
  * Home — TEMPLATE, a `Screen` with its parts filled — top: the AppBar · content: the `base` (title, welcome…) over a closed `SheetStack` · no bottom
- * (the stack is content, never the bottom: open, a sheet fills everything under the top).
+ * (the stack is content, never the bottom: open, a sheet fills everything under the top, or with `rise="flood"` the whole screen).
  * Every section is a `StackSheet` of three parts: SHEET HEAD (title + icon tabs, a count over a tab; the back button once open) · SHEET BODY (scrolls) · SHEET FOOT (the CTA,
- * at the bottom). A tap on a head brings that sheet up to fill everything under the top. With a LayerHistory above and no `open` prop, that open sheet is one history entry named `home`. Only the open sheet's body is rendered — three
+ * at the bottom). A tap on a head brings that sheet up to fill everything under the top (`rise="flood"`: the whole screen, over the bar). With a LayerHistory above and no `open` prop, that open sheet is one history entry named `home`. Only the open sheet's body is rendered — three
  * sections on one home never cost three pages (`keep` holds a body once opened).
  */
-export function Home({ top, title, sheets, open: openProp, defaultOpen = null, onOpenChange, onRefresh, refreshing, mark, base, keep, backLabel = word('back'), backAt, children, ...rest }) {
+export function Home({ top, title, sheets, open: openProp, defaultOpen = null, onOpenChange, onRefresh, refreshing, mark, rise, base, keep, backLabel = word('back'), backAt, children, ...rest }) {
     const layer = useOptionalLayer('home');
     const [local, change] = useControlled(openProp, defaultOpen, onOpenChange);
     // A passed `open` is the parent's. With no LayerHistory the index stays local, so a story without a router still opens sheets.
@@ -50,5 +50,5 @@ export function Home({ top, title, sheets, open: openProp, defaultOpen = null, o
     }, [leaving]);
     const [tabs, setTabs] = useState(() => Object.fromEntries(sheets.map((x, i) => [i, x.defaultTab ?? x.tabs?.[0]?.id])));
     const shows = (i) => i === shown || i === leaving || (keep && seen.has(i));
-    return (_jsxs(Screen, { fill: true, top: top, ...rest, children: [_jsx(Text, { level: "h1", as: "h1", sr: true, children: title }), _jsx(SheetStack, { closed: true, open: shown, onOpenChange: request, onRefresh: onRefresh, refreshing: refreshing, mark: mark, base: base, children: sheets.map((s, i) => (_jsx(StackSheet, { tone: s.tone ?? TONES[i], paper: s.paper, title: s.title, icon: s.icon, tabs: s.tabs, tab: tabs[i], onTabChange: (t) => setTabs((v) => ({ ...v, [i]: t })), backLabel: backLabel, backAt: backAt, foot: typeof s.foot === 'function' ? s.foot(tabs[i]) : s.foot, children: shows(i) ? (typeof s.body === 'function' ? s.body(tabs[i]) : s.body) : null }, i))) }), children] }));
+    return (_jsxs(Screen, { fill: true, top: top, ...rest, children: [_jsx(Text, { level: "h1", as: "h1", sr: true, children: title }), _jsx(SheetStack, { closed: true, open: shown, onOpenChange: request, onRefresh: onRefresh, refreshing: refreshing, mark: mark, rise: rise, base: base, children: sheets.map((s, i) => (_jsx(StackSheet, { tone: s.tone ?? TONES[i], paper: s.paper, title: s.title, icon: s.icon, tabs: s.tabs, tab: tabs[i], onTabChange: (t) => setTabs((v) => ({ ...v, [i]: t })), backLabel: backLabel, backAt: backAt, foot: typeof s.foot === 'function' ? s.foot(tabs[i]) : s.foot, children: shows(i) ? (typeof s.body === 'function' ? s.body(tabs[i]) : s.body) : null }, i))) }), children] }));
 }

package/package.json

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