@usableapp/cardds 0.6.15 → 0.6.16

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

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; }

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/dist/cardds.css

@@ -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; }
@@ -3467,6 +3468,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 +3507,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/package.json

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