@usableapp/cardds 0.7.57 → 0.7.58

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 > 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.58 — 2026-10-06
+
+### Changed
+- **A closed paper sheet in a stack shows the card's colour where the next sheet's round top does not cover it.** The white body used to show in those corners. While the sheet is closed that body is clear. On the way back into the stack the card colour fades in over `--motion-quick`, and the fade ends as the sheet stops. Open, the body is white at once. The first row still sits `--sp-6` down. Nothing to change in a screen.
+
 ## 0.7.57 — 2026-10-06
 
 ### Added

package/README.md

@@ -278,6 +278,8 @@ whose markup has rules, because the sheet's box is the step itself:
   the content white while the head keeps the sheet's colour (`tone`, as a card).
   The same prop on a `StackSheet`, or on a `Card` in a stack: the head keeps the
   tone, the body and the foot are white, and the gap under the head stays the tone.
+  While that sheet is closed, the corners the next sheet does not cover show the
+  card's colour. That colour fades in as the sheet returns, and is done when it stops.
   A sheet with no head (the dim page sheet) is a body alone.
 - **The step follows its top bar directly, and touches it.** `full` means
   the sheet's top edge at the bar's bottom edge — nothing above it but the

package/css/sheet.css

@@ -203,8 +203,8 @@
    The flex gap under the head is outside the body, so it stays the sheet's tint.
    The first field would sit on that colour seam. The white inset is --sp-6 (24px at
    the default spacing), the body's own top padding, and only when the sheet is paper.
-   A plain sheet keeps padding-top 0. A sheet in a stack wears the same class; its padding
-   is the stack's own rule, because a pull adds --_refresh on top of this inset.
+   A plain sheet keeps padding-top 0. A sheet in a stack wears the same class and the same
+   inset: the stack's own gap under the head is the card's colour, so the row still needs this white.
    The ink falls back to the wireframe word colour: an unset --color-ink would otherwise
    inherit a dark card's light ink, and the words would vanish on the white. */
 .sheet--paper > .sheet__body {

package/css/stack.css

@@ -175,12 +175,10 @@
 }
 .sheet-stack--tap > .card.is-open.is-dragging { transition: none; }
 .sheet-stack--tap > .card > .card__head { touch-action: none; }
-/* a pull in the content, already at the top: the words move down, the card stays. --_refresh is the finger, private. */
+/* a pull in the content, already at the top: the words move down, the card stays. --_refresh is the finger, private.
+   A paper body adds its own --sp-6 on top of this (the rule below): the stack's gap under the head is the
+   card's colour, so without the white inset the first row sits on that seam. */
 .sheet-stack > .card > .sheet__body { padding-top: var(--_refresh, 0px); transition: padding-top var(--motion-sheet) ease; }
-/* paper on a stacked sheet is the same class as the single sheet (Lh 2026-10-06). The head keeps the card's
-   colour. The body is white, from the rule in sheet.css, and its top inset is --sp-6. A pull still adds
-   --_refresh: this rule wins on padding, because the pull's rule above is more specific than the single sheet's. */
-.sheet-stack > .card.sheet--paper > .sheet__body { padding-top: calc(var(--sp-6) + var(--_refresh, 0px)); }
 .sheet-stack--tap > .card.is-open:not(:has(> .sheet__body)) {
   padding-top: calc(var(--card-pad) + var(--_refresh, 0px));
   transition: translate var(--motion-sheet) ease, padding-top var(--motion-sheet) ease;
@@ -315,6 +313,29 @@
 .sheet-stack--tap > .card:has(> .sheet__body).is-open { overflow: clip; }
 .sheet-stack > .card:has(> .sheet__body) > :not(.sheet__body) { flex-shrink: 0; }
 .sheet-stack > .card > .sheet__body { --_cover: 0rem; } /* nothing slid under here: the stack's sheet is always whole */
+/* a closed paper sheet's body stays clear (Lh 2026-10-06). The next sheet's round top does not
+   cover the corners, and a white body showed there beside the head. Clear, the card's own colour
+   shows in that pocket. Open, the body is white, and the first row sits --sp-6 down, the same white
+   inset a single paper sheet keeps: the flex gap under the head is the card's colour, so the row
+   would otherwise sit on that seam. A pull adds --_refresh on top of the inset. On the way back
+   into the stack the card colour fades in quickly (--motion-quick) and that fade ends with the
+   sheet's own slide (--motion-sheet, plus the same stagger), so the corner is the head colour
+   at the moment the sheet stops. Rising, the body is white at once. */
+.sheet-stack > .card.sheet--paper > .sheet__body {
+  padding-top: calc(var(--sp-6) + var(--_refresh, 0px));
+  transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
+}
+.sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
+  background-color: transparent;
+  transition:
+    padding-top var(--motion-sheet) ease,
+    background-color var(--motion-quick) ease calc(var(--stagger, 0) * 70ms + var(--motion-sheet) - var(--motion-quick));
+}
+@media (prefers-reduced-motion: reduce) {
+  .sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
+    transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
+  }
+}
 /* a paper stack's foot is white to the card's edges, and it covers the tinted flex gap above it so the
    button does not sit on a colour stripe. The head's gap stays: it is outside this foot. The button stays
    where it was — the padding gives back what the bleed takes. */

package/dist/cardds.css

@@ -1176,12 +1176,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .sheet-stack--tap > .card.is-open.is-dragging { transition: none; }
 .sheet-stack--tap > .card > .card__head { touch-action: none; }
-/* a pull in the content, already at the top: the words move down, the card stays. --_refresh is the finger, private. */
+/* a pull in the content, already at the top: the words move down, the card stays. --_refresh is the finger, private.
+   A paper body adds its own --sp-6 on top of this (the rule below): the stack's gap under the head is the
+   card's colour, so without the white inset the first row sits on that seam. */
 .sheet-stack > .card > .sheet__body { padding-top: var(--_refresh, 0px); transition: padding-top var(--motion-sheet) ease; }
-/* paper on a stacked sheet is the same class as the single sheet (Lh 2026-10-06). The head keeps the card's
-   colour. The body is white, from the rule in sheet.css, and its top inset is --sp-6. A pull still adds
-   --_refresh: this rule wins on padding, because the pull's rule above is more specific than the single sheet's. */
-.sheet-stack > .card.sheet--paper > .sheet__body { padding-top: calc(var(--sp-6) + var(--_refresh, 0px)); }
 .sheet-stack--tap > .card.is-open:not(:has(> .sheet__body)) {
   padding-top: calc(var(--card-pad) + var(--_refresh, 0px));
   transition: translate var(--motion-sheet) ease, padding-top var(--motion-sheet) ease;
@@ -1316,6 +1314,29 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-stack--tap > .card:has(> .sheet__body).is-open { overflow: clip; }
 .sheet-stack > .card:has(> .sheet__body) > :not(.sheet__body) { flex-shrink: 0; }
 .sheet-stack > .card > .sheet__body { --_cover: 0rem; } /* nothing slid under here: the stack's sheet is always whole */
+/* a closed paper sheet's body stays clear (Lh 2026-10-06). The next sheet's round top does not
+   cover the corners, and a white body showed there beside the head. Clear, the card's own colour
+   shows in that pocket. Open, the body is white, and the first row sits --sp-6 down, the same white
+   inset a single paper sheet keeps: the flex gap under the head is the card's colour, so the row
+   would otherwise sit on that seam. A pull adds --_refresh on top of the inset. On the way back
+   into the stack the card colour fades in quickly (--motion-quick) and that fade ends with the
+   sheet's own slide (--motion-sheet, plus the same stagger), so the corner is the head colour
+   at the moment the sheet stops. Rising, the body is white at once. */
+.sheet-stack > .card.sheet--paper > .sheet__body {
+  padding-top: calc(var(--sp-6) + var(--_refresh, 0px));
+  transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
+}
+.sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
+  background-color: transparent;
+  transition:
+    padding-top var(--motion-sheet) ease,
+    background-color var(--motion-quick) ease calc(var(--stagger, 0) * 70ms + var(--motion-sheet) - var(--motion-quick));
+}
+@media (prefers-reduced-motion: reduce) {
+  .sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
+    transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
+  }
+}
 /* a paper stack's foot is white to the card's edges, and it covers the tinted flex gap above it so the
    button does not sit on a colour stripe. The head's gap stays: it is outside this foot. The button stays
    where it was — the padding gives back what the bleed takes. */
@@ -1616,8 +1637,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    The flex gap under the head is outside the body, so it stays the sheet's tint.
    The first field would sit on that colour seam. The white inset is --sp-6 (24px at
    the default spacing), the body's own top padding, and only when the sheet is paper.
-   A plain sheet keeps padding-top 0. A sheet in a stack wears the same class; its padding
-   is the stack's own rule, because a pull adds --_refresh on top of this inset.
+   A plain sheet keeps padding-top 0. A sheet in a stack wears the same class and the same
+   inset: the stack's own gap under the head is the card's colour, so the row still needs this white.
    The ink falls back to the wireframe word colour: an unset --color-ink would otherwise
    inherit a dark card's light ink, and the words would vanish on the white. */
 .sheet--paper > .sheet__body {

package/package.json

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