@usableapp/cardds 0.7.60 → 0.7.61

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 > 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.61 — 2026-10-06
+
+### Changed
+- **A sheet's grab line is 1px** (Lh 2026-10-06) — it was 2px. On a single `Sheet` (the default mark) and on a stack sheet with `mark="line"`. Same length, same place. The thickness is one root token, `--hairline-w` (1px): set it on `:root` in your `theme.css` to tune it (`2px` gives the old line back). Nothing to change in a screen; a test that measured the handle's height reads 1.
+- **A `paper` stack sheet's head band is slimmer** (Lh 2026-10-06) — the white starts 8px (`--sp-2`) under the head, not a whole `--card-gap` (20px): the coloured band of an open sheet is 77.5px tall at the defaults, it was 89.5. `SheetStack` / `Home` sheets with `paper` only; a single paper `Sheet`, a stack sheet without `paper`, and the peeked heads are unchanged. Nothing to change in a screen; a test that measured where the white body starts under the head must expect 8px.
+
 ## 0.7.60 — 2026-10-06
 
 ### Fixed

package/css/sheet.css

@@ -90,7 +90,7 @@
 /* --sheet-peek is declared on the BOX the sheet slides in, not on the sheet: the words behind a peeked sheet
    have to read it too (step.css keeps that much room under them), and a token only flows down. The sheet
    inherits it. A sheet whose head is taller retunes it on the box. */
-:is(.step, .sheet-stage) { --_handle: var(--sp-0); --sheet-peek: calc(var(--card-pad-rest) + var(--sheet-head-h) + var(--card-gap-rest) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it. The handle sits IN the card's top padding, so the strip is that padding, the title row and the gap under it */
+:is(.step, .sheet-stage) { --_handle: var(--hairline-w); --sheet-peek: calc(var(--card-pad-rest) + var(--sheet-head-h) + var(--card-gap-rest) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it. The handle sits IN the card's top padding, so the strip is that padding, the title row and the gap under it */
 /* the head's floor: a tap, or an h2 line with its Thai-mark padding when the type is bigger than that (a large text-size
    setting on a narrow phone) — the strip and the head read the same number, so the title row is always inside the strip */
 :root { --sheet-head-h: max(var(--tap), calc(var(--fs-h2) * 1.25 + var(--sp-2))); }

package/css/stack.css

@@ -211,14 +211,14 @@
 }
 @keyframes stack-grip-dissolve { from { --_grip: 0; } to { --_grip: 1; } }
 /* the grip as ONE LINE (`mark="line"`, Lh 2026-10-06): the single Sheet's line, at the same place and the same length. It reads the
-   same --_grip-ink, so while its sheet reloads it changes colour exactly as the dots do. As thin as the Sheet's (--sp-0, half a
-   dot), from the dots' top, as the Sheet's line starts there too. A bar and two round ends; the resting
+   same --_grip-ink, so while its sheet reloads it changes colour exactly as the dots do. As thin as the Sheet's (--hairline-w),
+   from the dots' top, as the Sheet's line starts there too. A bar and two round ends; the resting
    ink is mixed into the card's own colour (opaque), so the ends do not show darker where they lie on the bar. */
 .stack-card--line {
   --_grip-w: calc(var(--sp-base) * 18);
   --_grip-ink: color-mix(in srgb, currentColor 30%, var(--card-bg));
   --_grip-bar: linear-gradient(var(--_grip-ink), var(--_grip-ink));
-  --_grip-h: var(--sp-0);
+  --_grip-h: var(--hairline-w);
   --_grip-end: calc((var(--_grip-w) - var(--_grip-h)) / 2);
   background-image: var(--_grip-img), var(--_grip-bar), var(--_grip-img);
   background-size: var(--_grip-h) var(--_grip-h), calc(var(--_grip-w) - var(--_grip-h)) var(--_grip-h), var(--_grip-h) var(--_grip-h);
@@ -335,7 +335,11 @@
    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. */
+/* the head's band is as slim as it can be (Lh 2026-10-06: 20 over · 48 head · 20 under read as a heavy bar): the white starts
+   --sp-2 under the head, not a whole --card-gap. The body is pulled up by the difference — the card's gap is left alone, the
+   stack's step and the body's own rows read it. */
 .sheet-stack > .card.sheet--paper > .sheet__body {
+  margin-top: calc(var(--sp-2) - var(--card-gap));
   padding-top: calc(var(--sp-6) + var(--_refresh, 0px));
   transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
 }

package/css/tokens.css

@@ -86,6 +86,7 @@
 
   /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
   --border-w: 1.5px;
+  --hairline-w: 1px;                               /* the thinnest mark: a sheet's grab line (Lh 2026-10-06) */
   --rule-w: 2px;                                   /* dotted connectors, picker rules */
   --scroll-w: 1px;                                 /* the scrollbar of a .bleed track: a hairline of ink */
   --focus: 2px solid currentColor;                 /* :focus-visible ring */

package/dist/cardds.css

@@ -127,6 +127,7 @@
 
   /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
   --border-w: 1.5px;
+  --hairline-w: 1px;                               /* the thinnest mark: a sheet's grab line (Lh 2026-10-06) */
   --rule-w: 2px;                                   /* dotted connectors, picker rules */
   --scroll-w: 1px;                                 /* the scrollbar of a .bleed track: a hairline of ink */
   --focus: 2px solid currentColor;                 /* :focus-visible ring */
@@ -1212,14 +1213,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 @keyframes stack-grip-dissolve { from { --_grip: 0; } to { --_grip: 1; } }
 /* the grip as ONE LINE (`mark="line"`, Lh 2026-10-06): the single Sheet's line, at the same place and the same length. It reads the
-   same --_grip-ink, so while its sheet reloads it changes colour exactly as the dots do. As thin as the Sheet's (--sp-0, half a
-   dot), from the dots' top, as the Sheet's line starts there too. A bar and two round ends; the resting
+   same --_grip-ink, so while its sheet reloads it changes colour exactly as the dots do. As thin as the Sheet's (--hairline-w),
+   from the dots' top, as the Sheet's line starts there too. A bar and two round ends; the resting
    ink is mixed into the card's own colour (opaque), so the ends do not show darker where they lie on the bar. */
 .stack-card--line {
   --_grip-w: calc(var(--sp-base) * 18);
   --_grip-ink: color-mix(in srgb, currentColor 30%, var(--card-bg));
   --_grip-bar: linear-gradient(var(--_grip-ink), var(--_grip-ink));
-  --_grip-h: var(--sp-0);
+  --_grip-h: var(--hairline-w);
   --_grip-end: calc((var(--_grip-w) - var(--_grip-h)) / 2);
   background-image: var(--_grip-img), var(--_grip-bar), var(--_grip-img);
   background-size: var(--_grip-h) var(--_grip-h), calc(var(--_grip-w) - var(--_grip-h)) var(--_grip-h), var(--_grip-h) var(--_grip-h);
@@ -1336,7 +1337,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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. */
+/* the head's band is as slim as it can be (Lh 2026-10-06: 20 over · 48 head · 20 under read as a heavy bar): the white starts
+   --sp-2 under the head, not a whole --card-gap. The body is pulled up by the difference — the card's gap is left alone, the
+   stack's step and the body's own rows read it. */
 .sheet-stack > .card.sheet--paper > .sheet__body {
+  margin-top: calc(var(--sp-2) - var(--card-gap));
   padding-top: calc(var(--sp-6) + var(--_refresh, 0px));
   transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
 }
@@ -1540,7 +1545,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* --sheet-peek is declared on the BOX the sheet slides in, not on the sheet: the words behind a peeked sheet
    have to read it too (step.css keeps that much room under them), and a token only flows down. The sheet
    inherits it. A sheet whose head is taller retunes it on the box. */
-:is(.step, .sheet-stage) { --_handle: var(--sp-0); --sheet-peek: calc(var(--card-pad-rest) + var(--sheet-head-h) + var(--card-gap-rest) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it. The handle sits IN the card's top padding, so the strip is that padding, the title row and the gap under it */
+:is(.step, .sheet-stage) { --_handle: var(--hairline-w); --sheet-peek: calc(var(--card-pad-rest) + var(--sheet-head-h) + var(--card-gap-rest) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it. The handle sits IN the card's top padding, so the strip is that padding, the title row and the gap under it */
 /* the head's floor: a tap, or an h2 line with its Thai-mark padding when the type is bigger than that (a large text-size
    setting on a narrow phone) — the strip and the head read the same number, so the title row is always inside the strip */
 :root { --sheet-head-h: max(var(--tap), calc(var(--fs-h2) * 1.25 + var(--sp-2))); }

package/package.json

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