npm - @usableapp/cardds - Versions diffs - 0.2.1 → 0.2.2 - Mend

@usableapp/cardds 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -49,8 +49,9 @@ inlines the 56 symbols of `icons.svg` at build time, so no sprite file ships.
 aliased to `src/`, so the gallery and the package share one truth with no build between them.
 `/` every story of every component, `/:Name` one component — each `.design-sync/previews/<Name>.tsx`
 story live in a 375×812 phone cell, grouped by `src/<group>/`, searchable; switches for the palette
-(`own` = a colour well per colour base), inspect (box outlines + dimensions), text size, and a slider
-per size base. Nothing is hand-listed: add a preview file or a story and it shows.
+(`own` = a colour well per colour base), inspect (box outlines + dimensions), a mock keyboard (focus a field:
+it comes up over the phone cell and publishes `--kb` there — to SEE what a keyboard leaves of the screen; it
+types nothing), text size, and a slider per size base. Nothing is hand-listed: add a preview file or a story and it shows.
 **CSS only** (no React, no build):
@@ -233,6 +234,11 @@ whose markup has rules, because the sheet's box is the step itself:
 - **The bar is outside the step**, after it. `.step` reads the bar's room
   from `--bar-reserve`; any parent that hosts the `.action-bar` counts
   (`<body>`, an app shell, a demo frame).
+- **Every sheet has one shape** (Lh 2026-09-21): the handle and the head stay at the top and never scroll · the
+  foot's button stands at the bottom — above the keyboard when there is one (`--kb`: a step gives the keyboard
+  its room, a stage sheet gives it up itself as `--_lift`) · everything between them scrolls, as far as it
+  needs to: the body's bottom padding is the part that slid under (`--_cover`), so the last row comes up to
+  the button at half and 3q as it does at full.
 - **Layers: the base, the sheet over it, the top bar** (Lh 2026-09-20). The `.action-bar` belongs to the
   BASE — the move of a page of words (a pager, or one wide button). It is never in front of a sheet. A
   screen with a sheet finishes ON the sheet: a `.card__foot`, the sheet's last child — ONE row, the page's

package/cardds.js CHANGED Viewed

@@ -420,6 +420,10 @@ document.addEventListener('click', e => {
   });
 });
+/* the two calls an app makes are on window: a bundler loads this file as a module, where a top-level
+   function is not a global — and README has always said "call carddsSheetSet(sheet, state)". */
+if (typeof window !== 'undefined') Object.assign(window, { carddsSheetSet, carddsSheetReveal });
 /* ---- called sheets (sheet.css): a button in a step's words names a sheet with aria-controls ----
    (The base offers ways in — sign in · new phone · join — each sheet holds that way's whole form and
    its own submit on its foot.) A tap on it sends every other sheet of that step away and raises its own to the top state it snaps

package/css/sheet.css CHANGED Viewed

@@ -125,6 +125,12 @@
      the cut. A length from the box's container units (--_box), since the
      cut is a share of the SHEET's height, not of the body's. */
   scroll-padding-bottom: var(--_cover);
+  /* …and its content has to be able to LEAVE that part: the same length as bottom padding, so the last row
+     scrolls up to the visible edge at half and 3q as it does at full — everything between the head and the
+     foot can be reached at any state (Lh, 2026-09-21). Padding, not a shorter box: nothing that shows moves
+     when the state changes, only how far the body scrolls; a child that fills the body (a composer) fills
+     the part that shows. */
+  padding-bottom: var(--_cover);
 }
 /* ---- the sheet's foot: the button that FINISHES the sheet, on the sheet (Lh, 2026-09-20) ----
    A screen with a sheet has no bar in front of it: the button that completes what the sheet asks — the
@@ -151,8 +157,13 @@
 .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); }
+/* 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. */
+.sheet > :not(.sheet__body) { flex-shrink: 0; }
+:is(.sheet--peek, .sheet--away) > .sheet__body { padding-bottom: 0; }
 .sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
-.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: var(--card-pad); }
+.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover)); }
 /* grab handle — first child of the sheet. Drawn as a small bar, but it is
    the thumb's grab area for the whole strip above the title: a pseudo widens
@@ -313,6 +324,12 @@
 /* raised: the sheet floats above a footnote strip on the scrim. Its bottom
    edge shows, so it gets its corners and border back; full still stops at
    the top bar's line, because the top edge never moved. */
+/* EVERY sheet has one shape (Lh, 2026-09-21): the handle and the head stay at the top and never scroll · the
+   foot's button stands at the bottom, and ABOVE the keyboard when there is one · everything between them
+   scrolls, as far as it needs to. In a .step the keyboard's room is the step's (--kb, step.css); on a stage
+   the sheet gives it up itself, as --_lift — the same token a raised sheet floats on. */
+.sheet-stage > .sheet { --_lift: var(--kb, 0rem); bottom: var(--_lift); }
+.sheet-stage > .sheet--raised { --_lift: calc(var(--tap-lg) + var(--kb, 0rem)); }
 .sheet--raised { --_lift: var(--tap-lg); bottom: var(--_lift); border-radius: var(--r-card); border-bottom: var(--border-w) solid var(--card-border); }
 .sheet-stage__foot {
   position: absolute;

package/dist/cardds.css CHANGED Viewed

@@ -1202,6 +1202,12 @@ button { font: inherit; cursor: pointer; }
      the cut. A length from the box's container units (--_box), since the
      cut is a share of the SHEET's height, not of the body's. */
   scroll-padding-bottom: var(--_cover);
+  /* …and its content has to be able to LEAVE that part: the same length as bottom padding, so the last row
+     scrolls up to the visible edge at half and 3q as it does at full — everything between the head and the
+     foot can be reached at any state (Lh, 2026-09-21). Padding, not a shorter box: nothing that shows moves
+     when the state changes, only how far the body scrolls; a child that fills the body (a composer) fills
+     the part that shows. */
+  padding-bottom: var(--_cover);
 }
 /* ---- the sheet's foot: the button that FINISHES the sheet, on the sheet (Lh, 2026-09-20) ----
    A screen with a sheet has no bar in front of it: the button that completes what the sheet asks — the
@@ -1228,8 +1234,13 @@ button { font: inherit; cursor: pointer; }
 .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); }
+/* 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. */
+.sheet > :not(.sheet__body) { flex-shrink: 0; }
+:is(.sheet--peek, .sheet--away) > .sheet__body { padding-bottom: 0; }
 .sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
-.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: var(--card-pad); }
+.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover)); }
 /* grab handle — first child of the sheet. Drawn as a small bar, but it is
    the thumb's grab area for the whole strip above the title: a pseudo widens
@@ -1390,6 +1401,12 @@ button { font: inherit; cursor: pointer; }
 /* raised: the sheet floats above a footnote strip on the scrim. Its bottom
    edge shows, so it gets its corners and border back; full still stops at
    the top bar's line, because the top edge never moved. */
+/* EVERY sheet has one shape (Lh, 2026-09-21): the handle and the head stay at the top and never scroll · the
+   foot's button stands at the bottom, and ABOVE the keyboard when there is one · everything between them
+   scrolls, as far as it needs to. In a .step the keyboard's room is the step's (--kb, step.css); on a stage
+   the sheet gives it up itself, as --_lift — the same token a raised sheet floats on. */
+.sheet-stage > .sheet { --_lift: var(--kb, 0rem); bottom: var(--_lift); }
+.sheet-stage > .sheet--raised { --_lift: calc(var(--tap-lg) + var(--kb, 0rem)); }
 .sheet--raised { --_lift: var(--tap-lg); bottom: var(--_lift); border-radius: var(--r-card); border-bottom: var(--border-w) solid var(--card-border); }
 .sheet-stage__foot {
   position: absolute;

package/package.json CHANGED Viewed

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