@usableapp/cardds 0.7.55 → 0.7.56

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.56 — 2026-10-06
+
+### Changed
+- **A `paper` sheet keeps 24px of white above its first field.** The head stays the sheet's colour. The gap under the head stays that colour (`--card-gap`). The body's top padding is `--sp-6`, so a field no longer sits on the colour seam. A sheet without `paper` is unchanged. Nothing to change in a screen.
+
 ## 0.7.55 — 2026-10-06
 
 ### Fixed

package/css/sheet.css

@@ -199,13 +199,18 @@
   cursor: grab;
 }
 /* paper: the head keeps the sheet's own colour, the content is white (Lh 2026-10-05).
-   The body and the foot read as paper; the handle and the head stay on the card. */
+   The body and the foot read as paper; the handle and the head stay on the card.
+   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. */
 .sheet--paper > .sheet__body {
   --card-bg: var(--color-paper, #fff);
   --card-ink: var(--color-ink);
   --card-muted: var(--_muted-on-paper);
   background: var(--card-bg);
   color: var(--card-ink);
+  padding-top: var(--sp-6);
 }
 .sheet--paper > .card__foot { --card-bg: var(--color-paper, #fff); color: var(--color-ink); }
 .sheet__handle--dots {

package/dist/cardds.css

@@ -1595,13 +1595,18 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   cursor: grab;
 }
 /* paper: the head keeps the sheet's own colour, the content is white (Lh 2026-10-05).
-   The body and the foot read as paper; the handle and the head stay on the card. */
+   The body and the foot read as paper; the handle and the head stay on the card.
+   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. */
 .sheet--paper > .sheet__body {
   --card-bg: var(--color-paper, #fff);
   --card-ink: var(--color-ink);
   --card-muted: var(--_muted-on-paper);
   background: var(--card-bg);
   color: var(--card-ink);
+  padding-top: var(--sp-6);
 }
 .sheet--paper > .card__foot { --card-bg: var(--color-paper, #fff); color: var(--color-ink); }
 .sheet__handle--dots {

package/package.json

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