@usableapp/cardds 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -2,7 +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.
 
-## Unreleased
+## 0.5.2 — 2026-09-22
+
+### Dots at the foot (Lh 2026-09-22)
+A `BaseContent` whose last child is `PagerAt` now sits its dots at the bottom of the reading block, above the bar; the block fills the step for it. Nothing to change in an app.
+
+## 0.5.1 — 2026-09-22
 
 ### Field type 26px, 56px tall (Lh 2026-09-22)
 `--field-min-h` default is `--tap-lg` (56, was `--tap` 48) — every field stands as tall as the action field already did.

package/css/base.css

@@ -118,9 +118,14 @@ button { font: inherit; cursor: pointer; }
 .base-content > .t-body { color: var(--base-content-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
 /* an illustration among the words (Lh 2026-09-22): capped, so a tall picture never pushes the words under the bar;
    the "where am I" dots under the words, centred — the same dots the centred card has under it */
-.base-content > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
+.base-content > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
 .base-content > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
 .base-content > .pager__at { justify-self: center; }
+/* the dots at the FOOT of the block (Lh 2026-09-22): a block that ends on .pager__at becomes a flex column so the dots
+   ride its bottom edge — the words keep the top, the free room opens between. The block must fill its cell for that:
+   in .pages it is stretched to the cell; a lone .step > .base-content grows for it (step.css). */
+.base-content:has(> .pager__at:last-child) { display: flex; flex-direction: column; }
+.base-content > .pager__at:last-child { margin-top: auto; align-self: center; }
 .base-content .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */

package/css/step.css

@@ -89,6 +89,7 @@
 .step > :is(.base-content, .pages) {
   flex: 0 1 auto;
 }
+.step:has(> .base-content > .pager__at:last-child, > .pages > .base-content > .pager__at:last-child) > :is(.base-content, .pages) { flex: 1 1 auto; } /* dots at the foot: the block takes the column (base.css) */
 .step > :is(.base-content, .pages) {
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */

package/dist/cardds.css

@@ -494,9 +494,14 @@ button { font: inherit; cursor: pointer; }
 .base-content > .t-body { color: var(--base-content-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
 /* an illustration among the words (Lh 2026-09-22): capped, so a tall picture never pushes the words under the bar;
    the "where am I" dots under the words, centred — the same dots the centred card has under it */
-.base-content > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
+.base-content > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
 .base-content > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
 .base-content > .pager__at { justify-self: center; }
+/* the dots at the FOOT of the block (Lh 2026-09-22): a block that ends on .pager__at becomes a flex column so the dots
+   ride its bottom edge — the words keep the top, the free room opens between. The block must fill its cell for that:
+   in .pages it is stretched to the cell; a lone .step > .base-content grows for it (step.css). */
+.base-content:has(> .pager__at:last-child) { display: flex; flex-direction: column; }
+.base-content > .pager__at:last-child { margin-top: auto; align-self: center; }
 .base-content .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */
@@ -1538,6 +1543,7 @@ button { font: inherit; cursor: pointer; }
 .step > :is(.base-content, .pages) {
   flex: 0 1 auto;
 }
+.step:has(> .base-content > .pager__at:last-child, > .pages > .base-content > .pager__at:last-child) > :is(.base-content, .pages) { flex: 1 1 auto; } /* dots at the foot: the block takes the column (base.css) */
 .step > :is(.base-content, .pages) {
   min-height: 0;
   margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */

package/package.json

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