@usableapp/cardds 0.7.32 → 0.7.33

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 > 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.33 — 2026-10-01
+
+### Changed
+- **A StackSheet tab's count grows with the text** (Lh 2026-10-01): the red circle was a fixed 20px while its number followed `--fs-base` — at a large text size the number ran over it. The circle is now cut from its own number's size (20px at the default, 32px at 160%); a long count ("10", "99+") makes it a capsule. The number sits on the circle's middle (it sat low), and the circle stands 8px out of the tab's corner instead of 4 — beside the icon, not on the disc's edge. Nothing to change in a screen.
+- **A screen fills the phone, edge to edge** (Lh 2026-10-01): the column's cap `--screen-w` is `30rem` (480px), was `25rem` (400) — a phone 412–448px wide showed a strip of bare ground each side of the screen, its bars and its sheets. No phone reaches the cap now; it only keeps a tablet / desktop window to a phone-sized column. Nothing to change in a screen; a project that set `--screen-w` itself keeps its value.
+### Added
+- Knobs `--stack-sheet-count-pad-x` (the room beside the number), `--stack-sheet-count-lift` (the room under it — retune for another font), `--stack-sheet-count-out` (how far it stands out of the corner). `--stack-sheet-count-h` as before; its default is `1.175em`, was `1.25rem`.
+
 ## 0.7.32 — 2026-09-29
 
 ### Changed

package/README.md

@@ -650,7 +650,7 @@ Every length token resolves to rem — a multiplier × one of four rem bases
 (`--sp-4` = `--sp-base` × 4 = 1rem, `--tap` = `--tap-base` = 3rem, `--r-card` =
 `--r-base` × 2, `--fs-h1` = `--fs-base` × 1.2; see "A project's theme") — so the
 whole system scales with the root font size. `base.css` keeps it at `100%` (the browser's setting, 16px by
-default) and steps narrow phones (≤360px) to `93.75%`, which keeps the 25rem
+default) and steps narrow phones (≤360px) to `93.75%`, which keeps the
 column, its 48px taps and its type in proportion on 320–360 screens. Only
 `--border-w`, `--rule-w` and the focus ring stay in px, so edges stay crisp.
 An app with its own text-size setting calls `setTextScale(percent)`, which writes

package/css/stack.css

@@ -292,11 +292,14 @@
 .stack-sheet__tab { position: relative; }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;
-  top: calc(-1 * var(--sp-1));
-  right: calc(-1 * var(--sp-1));
-  min-width: var(--stack-sheet-count-h, 1.25rem);
-  height: var(--stack-sheet-count-h, 1.25rem);
-  padding: 0 var(--sp-1);
+  top: calc(-1 * var(--stack-sheet-count-out, var(--sp-2))); /* how far it stands OUT of the tab's corner, up and to the right: at sp-1 it
+     sat exactly on the chosen tab's disc edge — it reads as a mark beside the icon, not part of the disc (Lh 2026-10-01) */
+  right: calc(-1 * var(--stack-sheet-count-out, var(--sp-2)));
+  min-width: var(--stack-sheet-count-h, 1.175em); /* em, not rem (Lh 2026-10-01): the circle is cut from ITS OWN number's size — at a
+     large text size the number grew and a 20px circle did not; 1.175em of a 17px caption = the 20px it always was */
+  height: var(--stack-sheet-count-h, 1.175em);
+  padding: 0 var(--stack-sheet-count-pad-x, 0.25em) var(--stack-sheet-count-lift, 0.1em); /* "99+" keeps its room at every text size;
+     the room UNDER the number lifts it onto the circle's middle: a digit has no descender, so a centred line box sets it low (Lh 2026-10-01) */
   font: var(--type-caption);
   line-height: 1;
   pointer-events: none;

package/css/tokens.css

@@ -12,7 +12,9 @@
 
 :root {
   /* ---- layout ---- */
-  --screen-w: 25rem;      /* 400: mobile column — .screen, .action-bar, .sheet-stage */
+  --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-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,7 +53,9 @@
 
 :root {
   /* ---- layout ---- */
-  --screen-w: 25rem;      /* 400: mobile column — .screen, .action-bar, .sheet-stage */
+  --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-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) ----
@@ -1249,11 +1251,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .stack-sheet__tab { position: relative; }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;
-  top: calc(-1 * var(--sp-1));
-  right: calc(-1 * var(--sp-1));
-  min-width: var(--stack-sheet-count-h, 1.25rem);
-  height: var(--stack-sheet-count-h, 1.25rem);
-  padding: 0 var(--sp-1);
+  top: calc(-1 * var(--stack-sheet-count-out, var(--sp-2))); /* how far it stands OUT of the tab's corner, up and to the right: at sp-1 it
+     sat exactly on the chosen tab's disc edge — it reads as a mark beside the icon, not part of the disc (Lh 2026-10-01) */
+  right: calc(-1 * var(--stack-sheet-count-out, var(--sp-2)));
+  min-width: var(--stack-sheet-count-h, 1.175em); /* em, not rem (Lh 2026-10-01): the circle is cut from ITS OWN number's size — at a
+     large text size the number grew and a 20px circle did not; 1.175em of a 17px caption = the 20px it always was */
+  height: var(--stack-sheet-count-h, 1.175em);
+  padding: 0 var(--stack-sheet-count-pad-x, 0.25em) var(--stack-sheet-count-lift, 0.1em); /* "99+" keeps its room at every text size;
+     the room UNDER the number lifts it onto the circle's middle: a digit has no descender, so a centred line box sets it low (Lh 2026-10-01) */
   font: var(--type-caption);
   line-height: 1;
   pointer-events: none;

package/package.json

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