@usableapp/cardds 0.7.5 → 0.7.6

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 > 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.6 — 2026-09-24
+
+### Changed
+- The bottom layer of a `Screen fill` (the `ActionBar` — a Walkthrough's dots, controls, CTA row and link) now lies on
+  the screen's surface. Before: it had no ground, so long words scrolling under it mid-scroll showed through and could
+  not be read. Knob `--action-bar-bg` (default `var(--surface)`; `transparent` = the old see-through).
+- `SheetSteps`: the cursor holder field's size is `1rem` (was 16px); no raw px left in sheet.css.
+
 ## 0.7.5 — 2026-09-24
 
 ### Errors in a form (new)

package/css/sheet.css

@@ -380,8 +380,8 @@
    bottom of the body, each its title line. Every step has a thin rule on top. A step opens and folds as a 1fr ↔ 0fr grid row, so the pile rises and
    falls — no height is written. Nothing fades: done and next read at full ink. */
 .sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
-.sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0px)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; }
-.sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 16px; } /* holds the cursor (and the phone's keyboard) while a step folds; 16px so iOS never zooms to it */
+.sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; }
+.sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 1rem; } /* holds the cursor (and the phone's keyboard) while a step folds; 1rem (16px at the browser's size) so iOS does not zoom to it */
 .sheet-steps { position: relative; }
 .sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
 

package/css/step.css

@@ -120,7 +120,11 @@
   position: absolute; inset-inline: 0; top: auto; bottom: var(--kb, 0rem);
   max-width: none;
   margin: 0;
-  padding-top: 0; /* no ground of its own, never a solid strip */
+  padding-top: 0;
+  /* its GROUND (Lh 2026-09-24, timebank card 141 — was "no ground of its own"): words that run under the layer mid-scroll
+     showed through the dots, the controls and the buttons. The layer lies on the screen's own surface now; a project sets
+     another (or `transparent`, the old see-through) with the knob */
+  background: var(--action-bar-bg, var(--surface));
 }
 /* the walk's dots are the BOTTOM layer's too (Lh 2026-09-23): a row of the bar, over its buttons, centred */
 .action-bar > .pager__at, .action-bar__tier > .pager__at { align-self: center; }

package/dist/cardds.css

@@ -1557,8 +1557,8 @@ button { font: inherit; cursor: pointer; }
    bottom of the body, each its title line. Every step has a thin rule on top. A step opens and folds as a 1fr ↔ 0fr grid row, so the pile rises and
    falls — no height is written. Nothing fades: done and next read at full ink. */
 .sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
-.sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0px)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; }
-.sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 16px; } /* holds the cursor (and the phone's keyboard) while a step folds; 16px so iOS never zooms to it */
+.sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; }
+.sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 1rem; } /* holds the cursor (and the phone's keyboard) while a step folds; 1rem (16px at the browser's size) so iOS does not zoom to it */
 .sheet-steps { position: relative; }
 .sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
 
@@ -1712,7 +1712,11 @@ button { font: inherit; cursor: pointer; }
   position: absolute; inset-inline: 0; top: auto; bottom: var(--kb, 0rem);
   max-width: none;
   margin: 0;
-  padding-top: 0; /* no ground of its own, never a solid strip */
+  padding-top: 0;
+  /* its GROUND (Lh 2026-09-24, timebank card 141 — was "no ground of its own"): words that run under the layer mid-scroll
+     showed through the dots, the controls and the buttons. The layer lies on the screen's own surface now; a project sets
+     another (or `transparent`, the old see-through) with the knob */
+  background: var(--action-bar-bg, var(--surface));
 }
 /* the walk's dots are the BOTTOM layer's too (Lh 2026-09-23): a row of the bar, over its buttons, centred */
 .action-bar > .pager__at, .action-bar__tier > .pager__at { align-self: center; }

package/package.json

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