@usableapp/cardds 0.6.3 → 0.6.4

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.6.4 — 2026-09-23
+
+- **Fold card: the corner is cut** (Lh 2026-09-23): the triangle under the flap shows what is behind the card, instead of the card's own colour, which read as a second card underneath. Nothing to change in an app.
+- README: the minimum browsers (Safari/iOS 18.3, Chrome 114, Firefox 128 — early 2025) and which phones that means.
+- Gallery only: Settings fold away; the palette is one button that turns through them; on a small screen the settings and the component list are a drawer; the search finds a story by the words in it.
+
 ## 0.6.3 — 2026-09-23
 
 - **The picture is not shrunk** (Lh 2026-09-23): the 40% cap from 0.6.2 and its knob `--step-media-share` are gone. The sticky picture is `--base-content-media-h` tall, always. For 230px: `:root { --base-content-media-h: 14.375rem; }`.

package/README.md

@@ -74,6 +74,17 @@ import '@usableapp/cardds/dist/cardds.css';   // the CSS, fonts resolve from the
 ```
 
 
+**Browsers** (checked 2026-09-23): works on browsers from **early 2025** on.
+
+| Browser | Minimum | Released | Phones |
+|---|---|---|---|
+| Safari / iOS | 18.3 | Jan 2025 | iPhone XS / XR (2018) and newer, updated |
+| Chrome | 114 | May 2023 | most Android phones with Chrome kept up to date |
+| Firefox | 128 | Jul 2024 | — |
+
+Older than that: menus and dropdowns don't open. On browsers between the minimum and
+the newest, a menu opens in the middle of the screen instead of under its button.
+
 Working with Claude in another project? The `/cardds` skill
 (`~/.claude/skills/cardds/`) carries the install and the contract, and points
 back here. It is deliberately thin — **this repo stays the source of truth**,

package/css/media.css

@@ -121,6 +121,12 @@
   background-repeat: no-repeat;
   background-position: bottom right;
   background-size: var(--sp-8) var(--sp-8);
+  background-origin: border-box;  /* the flap sits on the true corner, not inside the (transparent) border */
+  /* the corner is CUT: the triangle under the flap shows what is behind the card. Painted in the card's own colour it
+     read as the square corner of a second card underneath (Lh 2026-09-23). The polygon reaches 3rem past the other
+     edges so a coloured palette's shadow is not clipped there. */
+  clip-path: polygon(-3rem -3rem, calc(100% + 3rem) -3rem, calc(100% + 3rem) calc(100% - var(--sp-8) - 3rem),
+                     calc(100% - var(--sp-8) - 3rem) calc(100% + 3rem), -3rem calc(100% + 3rem));
 }
 
 /* ---- wave: audio waveform stand-in for voice rows ----

package/dist/cardds.css

@@ -2998,6 +2998,12 @@ button { font: inherit; cursor: pointer; }
   background-repeat: no-repeat;
   background-position: bottom right;
   background-size: var(--sp-8) var(--sp-8);
+  background-origin: border-box;  /* the flap sits on the true corner, not inside the (transparent) border */
+  /* the corner is CUT: the triangle under the flap shows what is behind the card. Painted in the card's own colour it
+     read as the square corner of a second card underneath (Lh 2026-09-23). The polygon reaches 3rem past the other
+     edges so a coloured palette's shadow is not clipped there. */
+  clip-path: polygon(-3rem -3rem, calc(100% + 3rem) -3rem, calc(100% + 3rem) calc(100% - var(--sp-8) - 3rem),
+                     calc(100% - var(--sp-8) - 3rem) calc(100% + 3rem), -3rem calc(100% + 3rem));
 }
 
 /* ---- wave: audio waveform stand-in for voice rows ----

package/package.json

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