@usableapp/cardds 0.7.38 → 0.7.40

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.7.40 — 2026-10-01
+
+### Changed
+- **`--screen-w`: 30rem → 34.375rem (550px)** (Lh 2026-10-01). A screen 540 wide (a phone set to a small display size, a fold's outer screen) showed a 30px strip each side; it now fills edge to edge. A window wider than 550px is still held to a centred column. Check a full-width picture and a wide button on your widest device; a project that sets `--screen-w` itself is not touched.
+
+## 0.7.39 — 2026-10-01
+
+### Fixed
+- **`Sheet`: its foot arrives and leaves WITH the sheet, solid the whole way** (Lh 2026-10-01, seen on timebank's agreement page). Before, while a sheet slid up or down (away / peek ↔ up) its foot stood still on the screen's bottom edge and FADED in or out — for a third of a second the body's words slid through that strip behind a half-transparent button; two sheets swapping showed two faded feet over each other. Now at peek and away the foot stands on the sheet's own bottom edge and rides with it, never transparent; between half · 3q · full it still stays on the box's edge as before. Nothing to change in a screen.
+
 ## 0.7.38 — 2026-10-01
 
 ### Fixed

package/css/sheet.css

@@ -157,12 +157,15 @@
   background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
   pointer-events: none;
   translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
-  transition: translate var(--motion-sheet) ease, opacity var(--motion-sheet) ease, visibility 0s;
+  transition: translate var(--motion-sheet) ease, visibility 0s;
 }
 .sheet > .card__foot > * { pointer-events: auto; }
 .sheet:has(> .card__foot) > .sheet__body { margin-bottom: calc(var(--_foot) - var(--card-pad)); } /* the body stops above the strip (the card's own padding is the rest) */
 .sheet.is-dragging > .card__foot { transition: none; }
-:is(.sheet--peek, .sheet--away) > .card__foot { opacity: 0; visibility: hidden; transition: translate var(--motion-sheet) ease, opacity var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
+/* at peek and away the foot is NOT held on the box's edge: it stands on the sheet's own bottom edge (no counter-slide), so it
+   LEAVES AND ARRIVES WITH ITS SHEET — solid the whole way, hidden only once the slide is over. It used to stay in place and
+   fade: the body slid through the strip behind a half-transparent button (timebank, Lh 2026-10-01: "ตัวหนังสือลอดใต้ปุ่ม"). */
+:is(.sheet--peek, .sheet--away) > .card__foot { translate: 0 0; visibility: hidden; transition: translate var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
 /* that padding can be taller than the body's own box (a short box: a small phone with the keyboard up) and a
    box is never smaller than its padding — so the pinned parts must not give way to it: the body runs past
    the sheet's clipped edge instead, where nothing shows anyway. At peek and away no part of the body shows. */

package/css/tokens.css

@@ -12,9 +12,9 @@
 
 :root {
   /* ---- layout ---- */
-  --screen-w: 30rem;      /* 480: the column's CAP — .screen, .action-bar, .sheet-stage. A phone never reaches it (the widest are ~450 CSS px):
-                             on a phone the screen is the device, edge to edge; the cap only keeps a tablet / desktop window to a phone-sized
-                             column. Was 25rem: a 412px phone showed a strip each side (Lh 2026-10-01) */
+  --screen-w: 34.375rem;  /* 550: the column's CAP — .screen, .action-bar, .sheet-stage. On a phone the screen is the device, edge to edge —
+                             also a phone set to a small display size, a fold's outer screen (540 was seen, Lh 2026-10-01); the cap only keeps
+                             a tablet / desktop window to a phone-sized column. Was 25rem (a 412px phone showed a strip each side), then 30rem */
   --screen-centre: 40%;   /* the human centre of a screen: the middle of its top four fifths — the bottom fifth is the thumb's (Lh, 2026-09-10). .card--centre sits here */
 
   /* ---- the four bases: what a project retunes (Lh, 2026-09-20) ----

package/dist/cardds.css

@@ -53,9 +53,9 @@
 
 :root {
   /* ---- layout ---- */
-  --screen-w: 30rem;      /* 480: the column's CAP — .screen, .action-bar, .sheet-stage. A phone never reaches it (the widest are ~450 CSS px):
-                             on a phone the screen is the device, edge to edge; the cap only keeps a tablet / desktop window to a phone-sized
-                             column. Was 25rem: a 412px phone showed a strip each side (Lh 2026-10-01) */
+  --screen-w: 34.375rem;  /* 550: the column's CAP — .screen, .action-bar, .sheet-stage. On a phone the screen is the device, edge to edge —
+                             also a phone set to a small display size, a fold's outer screen (540 was seen, Lh 2026-10-01); the cap only keeps
+                             a tablet / desktop window to a phone-sized column. Was 25rem (a 412px phone showed a strip each side), then 30rem */
   --screen-centre: 40%;   /* the human centre of a screen: the middle of its top four fifths — the bottom fifth is the thumb's (Lh, 2026-09-10). .card--centre sits here */
 
   /* ---- the four bases: what a project retunes (Lh, 2026-09-20) ----
@@ -1450,12 +1450,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
   pointer-events: none;
   translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
-  transition: translate var(--motion-sheet) ease, opacity var(--motion-sheet) ease, visibility 0s;
+  transition: translate var(--motion-sheet) ease, visibility 0s;
 }
 .sheet > .card__foot > * { pointer-events: auto; }
 .sheet:has(> .card__foot) > .sheet__body { margin-bottom: calc(var(--_foot) - var(--card-pad)); } /* the body stops above the strip (the card's own padding is the rest) */
 .sheet.is-dragging > .card__foot { transition: none; }
-:is(.sheet--peek, .sheet--away) > .card__foot { opacity: 0; visibility: hidden; transition: translate var(--motion-sheet) ease, opacity var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
+/* at peek and away the foot is NOT held on the box's edge: it stands on the sheet's own bottom edge (no counter-slide), so it
+   LEAVES AND ARRIVES WITH ITS SHEET — solid the whole way, hidden only once the slide is over. It used to stay in place and
+   fade: the body slid through the strip behind a half-transparent button (timebank, Lh 2026-10-01: "ตัวหนังสือลอดใต้ปุ่ม"). */
+:is(.sheet--peek, .sheet--away) > .card__foot { translate: 0 0; visibility: hidden; transition: translate var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
 /* that padding can be taller than the body's own box (a short box: a small phone with the keyboard up) and a
    box is never smaller than its padding — so the pinned parts must not give way to it: the body runs past
    the sheet's clipped edge instead, where nothing shows anyway. At peek and away no part of the body shows. */

package/dist/scaffold/Screen.d.ts

@@ -20,7 +20,7 @@ export interface ScreenProps extends ComponentProps<'div'> {
  * Screen — the mobile screen in THREE parts: **top** and **content** (the children) in one flex column, the content down to the
  * screen's foot; **bottom** a LAYER over it there (Lh 2026-09-23). Top = `TopBar` / `AppBar`, or `top="lead"` (no bar, the words start
  * 15% down). Content = a box of components one after another — a `Step` (`Pages` of `Page`s / a `Page` [+ `Sheet`]), a `Centre`, a
- * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 30rem wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
+ * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 34.375rem (550px) wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
  * ONE OUTCOME, DRAWN ONCE (Lh 2026-10-01): a screen that can come out more than one way is not drawn until the app knows which —
  * `ready={false}` until then.
  * The slots set the order; children laid by hand in the same order still work.

package/dist/scaffold/Screen.js

@@ -5,7 +5,7 @@ import { cx } from '../cx.js';
  * Screen — the mobile screen in THREE parts: **top** and **content** (the children) in one flex column, the content down to the
  * screen's foot; **bottom** a LAYER over it there (Lh 2026-09-23). Top = `TopBar` / `AppBar`, or `top="lead"` (no bar, the words start
  * 15% down). Content = a box of components one after another — a `Step` (`Pages` of `Page`s / a `Page` [+ `Sheet`]), a `Centre`, a
- * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 30rem wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
+ * `SheetStack`… Bottom = an `ActionBar` (the walk's `PagerAt` its first row) or a `FloatBar`, covering the content's foot on purpose. Max 34.375rem (550px) wide, the standard inset, no vertical padding. A plain Screen (no `fill`) scrolls.
  * ONE OUTCOME, DRAWN ONCE (Lh 2026-10-01): a screen that can come out more than one way is not drawn until the app knows which —
  * `ready={false}` until then.
  * The slots set the order; children laid by hand in the same order still work.

package/package.json

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