@usableapp/cardds 0.6.15 → 0.7.0

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 > 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.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)
+- Before: on iOS 16 no Menu or Dropdown opened (the popover API arrived in Safari 17). After: cardds ships
+  `@oddbird/popover-polyfill` (a dependency, loaded by the package, active only where popover is missing) and CSS for the
+  polyfill's open state. The floor is **iOS 16.4**: under it `@property` / `color-mix()` are missing and the sheet's room
+  and the derived colours go wrong.
+- A project that checks the browser before starting: DROP the `'popover' in HTMLElement.prototype` check — it fails on
+  iOS 16.4–16.x, which now works. Keep `@property`, `color-mix()`, container queries, `:has()` (README "เบราว์เซอร์").
+
 ## 0.6.15 — 2026-09-24
 
 - **`ActionNote` icon colour:** new knob `--action-note-icon-ink` (default: the words' muted ink). A project can colour the

package/README.md

@@ -74,15 +74,16 @@ import '@usableapp/cardds/dist/cardds.css';   // the CSS, fonts resolve from the
 ```
 
 
-**เบราว์เซอร์** (เช็ก 2026-09-23): ใช้ได้กับเบราว์เซอร์ตั้งแต่**ต้นปี 2025** ขึ้นไป
+**เบราว์เซอร์** (เช็ก 2026-09-24): iPhone ตั้งแต่ **iOS 16.4** (มี.ค. 2023) ขึ้นไป
 
 | เบราว์เซอร์ | ขั้นต่ำ | ออกเมื่อ | เครื่องที่ใช้ได้ |
 |---|---|---|---|
-| Safari / iOS | 18.3 | ม.ค. 2025 | iPhone XS / XR (2018) ขึ้นไป ที่อัปเดตแล้ว |
+| Safari / iOS | 16.4 | มี.ค. 2023 | iPhone 8 / X (2017) ขึ้นไป ที่อัปเดตแล้ว |
 | Chrome | 114 | พ.ค. 2023 | Android ส่วนใหญ่ที่ Chrome อัปเดตอยู่ |
 | Firefox | 128 | ก.ค. 2024 | — |
 
-เก่ากว่านี้: เมนูและ dropdown เปิดไม่ได้ ส่วนเบราว์เซอร์ที่ผ่านขั้นต่ำแต่ยังไม่ใช่รุ่นล่าสุด
+iOS 16.4–16.x ไม่มี popover ในตัว — cardds ใส่ `@oddbird/popover-polyfill` มาให้ (ทำงานเฉพาะเครื่องที่ไม่มี)
+เก่ากว่า 16.4: ระยะของ sheet และสีเพี้ยน (`@property`, `color-mix()`) ส่วนเบราว์เซอร์ที่ผ่านขั้นต่ำแต่ยังไม่ใช่รุ่นล่าสุด
 เมนูจะขึ้นกลางจอแทนที่จะอยู่ใต้ปุ่ม
 
 สำหรับโปรเจกต์ที่อยากเช็กเบราว์เซอร์ก่อนเริ่ม (เช่นหน้าติดตั้ง): เช็กเฉพาะฟีเจอร์ที่**จำเป็น**
@@ -90,14 +91,13 @@ import '@usableapp/cardds/dist/cardds.css';   // the CSS, fonts resolve from the
 
 | จำเป็น: ไม่มีแล้วหน้าจอพัง | วิธีเช็ก |
 |---|---|
-| popover | `'popover' in HTMLElement.prototype` |
 | `@property` | `'registerProperty' in CSS` |
 | `color-mix()` | `CSS.supports('color', 'color-mix(in srgb, red, blue)')` |
 | container queries | `CSS.supports('container-type: size') && CSS.supports('height: 1cqh')` |
 | `:has()` | `CSS.supports('selector(:has(a))')` |
 
-มีตัวสำรองแล้ว ไม่ต้องเช็ก: anchor positioning, view transitions, `@starting-style`, `text-wrap`
-iOS 17–18.2 เช็กผ่าน แต่ยังรองรับไม่เต็ม เมนูอาจแสดงผิดเล็กน้อย
+มีตัวสำรองแล้ว ไม่ต้องเช็ก: popover (polyfill), anchor positioning, view transitions, `@starting-style`, `text-wrap`
+iOS 16.4–18.2 เช็กผ่าน แต่ยังรองรับไม่เต็ม เมนูขึ้นกลางจอแทนใต้ปุ่ม
 
 Working with Claude in another project? The `/cardds` skill
 (`~/.claude/skills/cardds/`) carries the install and the contract, and points
@@ -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

package/css/actions.css

@@ -190,6 +190,7 @@
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dropdown__btn > .icon { transition: rotate 0.2s ease; }
 .dropdown:has(.menu:popover-open) .dropdown__btn > .icon { rotate: 180deg; }
+.dropdown:has(.menu.\:popover-open) .dropdown__btn > .icon { rotate: 180deg; } /* the polyfill's open (layover.css) */
 .dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards (= .menu--end, layover.css) */
 .filter-row { display: flex; gap: var(--sp-2); }
 .filter-row > .dropdown { flex: 1; min-width: 0; }
@@ -237,6 +238,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) { display: flex; flex-direction: column; min-height: 100dvh; }
+.screen:not(.screen--fill) > .action-bar {
+  position: sticky; inset-inline: auto; 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); }
 

package/css/base.css

@@ -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/layover.css

@@ -123,6 +123,9 @@
   box-shadow: var(--menu-shadow, var(--shadow-float));
 }
 .menu:popover-open { display: grid; }
+/* iOS 16.4–16.x has no popover: @oddbird/popover-polyfill (src/index.ts) marks an open one with the
+   class `:popover-open`. Its own rule — an unknown pseudo-class would drop the whole selector list. */
+.menu.\:popover-open { display: grid; }
 .menu:not([popover]) { display: grid; position: relative; } /* inline usage (no attribute) */
 .menu__item {
   display: flex;
@@ -159,6 +162,7 @@
     transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete, opacity 0.2s, translate 0.2s;
   }
   .menu:popover-open { opacity: 1; translate: 0 0; }
+  .menu.\:popover-open { opacity: 1; translate: 0 0; }
   @starting-style { .menu:popover-open { opacity: 0; translate: 0 calc(-1 * var(--sp-2)); } }
 }
 

package/css/lists.css

@@ -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

@@ -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

@@ -145,13 +145,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

@@ -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; }
 
@@ -1678,13 +1678,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;
@@ -2022,6 +2022,7 @@ button { font: inherit; cursor: pointer; }
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dropdown__btn > .icon { transition: rotate 0.2s ease; }
 .dropdown:has(.menu:popover-open) .dropdown__btn > .icon { rotate: 180deg; }
+.dropdown:has(.menu.\:popover-open) .dropdown__btn > .icon { rotate: 180deg; } /* the polyfill's open (layover.css) */
 .dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards (= .menu--end, layover.css) */
 .filter-row { display: flex; gap: var(--sp-2); }
 .filter-row > .dropdown { flex: 1; min-width: 0; }
@@ -2069,6 +2070,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) { display: flex; flex-direction: column; min-height: 100dvh; }
+.screen:not(.screen--fill) > .action-bar {
+  position: sticky; inset-inline: auto; 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); }
 
@@ -2940,29 +2950,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;
@@ -2981,7 +2985,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); }
@@ -3467,6 +3470,9 @@ button { font: inherit; cursor: pointer; }
   box-shadow: var(--menu-shadow, var(--shadow-float));
 }
 .menu:popover-open { display: grid; }
+/* iOS 16.4–16.x has no popover: @oddbird/popover-polyfill (src/index.ts) marks an open one with the
+   class `:popover-open`. Its own rule — an unknown pseudo-class would drop the whole selector list. */
+.menu.\:popover-open { display: grid; }
 .menu:not([popover]) { display: grid; position: relative; } /* inline usage (no attribute) */
 .menu__item {
   display: flex;
@@ -3503,6 +3509,7 @@ button { font: inherit; cursor: pointer; }
     transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete, opacity 0.2s, translate 0.2s;
   }
   .menu:popover-open { opacity: 1; translate: 0 0; }
+  .menu.\:popover-open { opacity: 1; translate: 0 0; }
   @starting-style { .menu:popover-open { opacity: 0; translate: 0 calc(-1 * var(--sp-2)); } }
 }
 

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import '../cardds.js';
+import '@oddbird/popover-polyfill';
 export { cx } from './cx.js';
 export * from './type/Icon.js';
 export { ICON_NAMES } from './type/icons.js';

package/dist/index.js

@@ -2,6 +2,8 @@
 // markup contract the CSS documents, nothing more. cardds.js rides along for
 // the behaviours (sheet handle, stack open/close, dropdown value sync).
 import '../cardds.js';
+// Popover for Safari/iOS 16.4–16.x (native from 17): applies itself only where the platform lacks it.
+import '@oddbird/popover-polyfill';
 export { cx } from './cx.js';
 export * from './type/Icon.js';
 export { ICON_NAMES } from './type/icons.js';

package/dist/lists/Bubble.d.ts

@@ -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

@@ -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/Page.d.ts

@@ -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

@@ -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

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.6.15",
+  "version": "0.7.0",
   "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.",
@@ -57,5 +57,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@oddbird/popover-polyfill": "^0.7.2"
   }
 }