@usableapp/cardds 0.6.2 → 0.6.4

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.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; }`.
+
 ## 0.6.2 — 2026-09-23
 
 - **The picture stays put, only the words scroll** (Lh 2026-09-23): in a `Step`, a `BaseContent` whose FIRST child is a picture (`img` / `Placeholder`) keeps it sticky at the top of the reading block, and the heading and words scroll under it. The picture is capped at 40% of the step's height (`min(--base-content-media-h, --step-media-share)`, new knob `--step-media-share`, default `40cqh`), so on a short phone or at a large text size the picture gives way, never the words. Nothing to change in an app.

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/css/step.css

@@ -104,16 +104,12 @@
 }
 
 /* a picture that opens the words stays put, only the words scroll under it (Lh 2026-09-23, timebank's walk at large text:
-   the picture scrolled away with the words). Sticky at the top of the reading block's scroller, on the base's ground so the
-   words pass under it; capped at a share of the STEP (a size container) so the words always keep more than half the column —
-   the picture gives way on a short phone or at a big text size, never the words. */
+   the picture scrolled away with the words). Sticky at the top of the reading block's scroller; its height is
+   --base-content-media-h as everywhere, never shrunk (Lh 2026-09-23: a fixed height, no scaling). */
 .step > .base-content > :is(img, .ph):first-child,
 .step > .pages > .base-content > :is(img, .ph):first-child {
   position: sticky;
   top: 0;
   z-index: 1;
   background-color: var(--surface); /* the words pass UNDER it, never through a transparent picture */
-  max-height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh));
 }
-.step > .base-content > .ph:first-child,
-.step > .pages > .base-content > .ph:first-child { height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh)); }

package/dist/cardds.css

@@ -1564,19 +1564,15 @@ button { font: inherit; cursor: pointer; }
 }
 
 /* a picture that opens the words stays put, only the words scroll under it (Lh 2026-09-23, timebank's walk at large text:
-   the picture scrolled away with the words). Sticky at the top of the reading block's scroller, on the base's ground so the
-   words pass under it; capped at a share of the STEP (a size container) so the words always keep more than half the column —
-   the picture gives way on a short phone or at a big text size, never the words. */
+   the picture scrolled away with the words). Sticky at the top of the reading block's scroller; its height is
+   --base-content-media-h as everywhere, never shrunk (Lh 2026-09-23: a fixed height, no scaling). */
 .step > .base-content > :is(img, .ph):first-child,
 .step > .pages > .base-content > :is(img, .ph):first-child {
   position: sticky;
   top: 0;
   z-index: 1;
   background-color: var(--surface); /* the words pass UNDER it, never through a transparent picture */
-  max-height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh));
 }
-.step > .base-content > .ph:first-child,
-.step > .pages > .base-content > .ph:first-child { height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh)); }
 
 /* ---- css/forms.css — outlined fields, add-row ---- */
 /* ============================================================
@@ -3002,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.2",
+  "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.",