@usableapp/cardds 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 > 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.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.
+`--field-font` default is `400 var(--fs-lg) / 1.4 var(--font-ui)` (was `--type-body`, 22): the words being typed read a size up, level with the Composer. The field keeps its 48px height. A theme that set `--field-font` is unaffected.
+
+### Field: no browser focus ring; the field's border goes full ink while the cursor is in it (Lh 2026-09-22)
+The inner input drew the browser's own ring as a second box inside the field. Gone. Knob `--field-active-border` (default `currentColor`); coloured palettes keep the 25% border at rest only.
+
+### Pin: the waiting cell shows a caret inside the pill, no focus ring (Lh 2026-09-22)
+The `:focus-visible` outline sat outside the pill and was cropped by the sheet's edge. Gone. The cell the cursor waits in now has a full-ink border and a blinking bar drawn inside it (the native caret is hidden). Knobs `--pin-cell-active-border`, `--pin-caret-w`, `--pin-caret-h`.
+
 ## 0.5.0 — 2026-09-22
 
 ### Words are full ink; muted means inactive (Lh 2026-09-22)

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/choice.css

@@ -204,10 +204,23 @@
   text-align: center;
   font: var(--pin-cell-font, var(--type-stat));
   font-variant-numeric: tabular-nums;
-  caret-color: currentColor;
 }
 .pin__cell:not(:placeholder-shown) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
-.pin__cell:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+/* the cell the cursor waits in (Lh 2026-09-22): NO outline ring — it sat outside the pill and got cropped by the sheet's
+   edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
+   is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
+.pin__cell { caret-color: transparent; }
+.pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
+.pin__cell:focus:placeholder-shown {
+  background-image: linear-gradient(currentColor, currentColor);
+  background-size: var(--pin-caret-w, 2px) var(--pin-caret-h, 1em);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pin__cell:focus:placeholder-shown { animation: pin-caret 1.1s steps(1) infinite; }
+  @keyframes pin-caret { 50% { background-size: 0 0; } }
+}
 
 /* ---- composer: big text area with a bottom bar (icon · hint · send) ----
    <div class="composer"><textarea class="composer__input" placeholder="What do you need?"></textarea>

package/css/forms.css

@@ -13,7 +13,7 @@
   background: var(--field-bg, var(--action-bg));
   color: var(--field-ink, var(--action-ink));
   padding-inline: var(--field-pad-x, var(--sp-4));
-  min-height: var(--field-min-h, var(--tap));
+  min-height: var(--field-min-h, var(--tap-lg)); /* 56, the action field's height, for every field (Lh 2026-09-22: "ใหญ่ดี") */
   min-width: 0;
 }
 
@@ -22,19 +22,22 @@
   border: 0;
   background: transparent;
   color: inherit;
-  font: var(--field-font, var(--type-body));
+  font: var(--field-font, 400 var(--fs-lg) / 1.4 var(--font-ui)); /* 26: the words being typed read a size up from body (Lh 2026-09-22); the Composer already does */
   width: 100%;
   min-width: 0;
-  outline-offset: var(--sp-1);
+  outline: none; /* the browser's ring drew a second box inside the field (Lh 2026-09-22) — the field itself tells focus */
+  caret-color: currentColor;
 }
 .field input::placeholder { color: inherit; opacity: 0.55; }
+/* the field the cursor is in: its own border goes full ink, in every palette (the coloured ones fade it to 25% at rest) */
+.field:has(:focus) { border-color: var(--field-active-border, currentColor); }
 
 /* field with its action inside: date pick, send, go — the button sits flush right */
 .field--action { padding-right: var(--sp-1); min-height: var(--field-action-min-h, var(--tap-lg)); }
 .field--action > .icon-btn { margin-left: auto; }
 
 /* colored palettes drop the visible outline elsewhere — fields keep one */
-[data-palette] .field { border-color: color-mix(in srgb, currentColor 25%, transparent); }
+[data-palette] .field:not(:has(:focus)) { border-color: color-mix(in srgb, currentColor 25%, transparent); }
 
 /* ---- add-row: inline "+ add another" action ---- */
 .add-row {

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 */
@@ -1561,7 +1567,7 @@ button { font: inherit; cursor: pointer; }
   background: var(--field-bg, var(--action-bg));
   color: var(--field-ink, var(--action-ink));
   padding-inline: var(--field-pad-x, var(--sp-4));
-  min-height: var(--field-min-h, var(--tap));
+  min-height: var(--field-min-h, var(--tap-lg)); /* 56, the action field's height, for every field (Lh 2026-09-22: "ใหญ่ดี") */
   min-width: 0;
 }
 
@@ -1570,19 +1576,22 @@ button { font: inherit; cursor: pointer; }
   border: 0;
   background: transparent;
   color: inherit;
-  font: var(--field-font, var(--type-body));
+  font: var(--field-font, 400 var(--fs-lg) / 1.4 var(--font-ui)); /* 26: the words being typed read a size up from body (Lh 2026-09-22); the Composer already does */
   width: 100%;
   min-width: 0;
-  outline-offset: var(--sp-1);
+  outline: none; /* the browser's ring drew a second box inside the field (Lh 2026-09-22) — the field itself tells focus */
+  caret-color: currentColor;
 }
 .field input::placeholder { color: inherit; opacity: 0.55; }
+/* the field the cursor is in: its own border goes full ink, in every palette (the coloured ones fade it to 25% at rest) */
+.field:has(:focus) { border-color: var(--field-active-border, currentColor); }
 
 /* field with its action inside: date pick, send, go — the button sits flush right */
 .field--action { padding-right: var(--sp-1); min-height: var(--field-action-min-h, var(--tap-lg)); }
 .field--action > .icon-btn { margin-left: auto; }
 
 /* colored palettes drop the visible outline elsewhere — fields keep one */
-[data-palette] .field { border-color: color-mix(in srgb, currentColor 25%, transparent); }
+[data-palette] .field:not(:has(:focus)) { border-color: color-mix(in srgb, currentColor 25%, transparent); }
 
 /* ---- add-row: inline "+ add another" action ---- */
 .add-row {
@@ -2531,10 +2540,23 @@ button { font: inherit; cursor: pointer; }
   text-align: center;
   font: var(--pin-cell-font, var(--type-stat));
   font-variant-numeric: tabular-nums;
-  caret-color: currentColor;
 }
 .pin__cell:not(:placeholder-shown) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
-.pin__cell:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+/* the cell the cursor waits in (Lh 2026-09-22): NO outline ring — it sat outside the pill and got cropped by the sheet's
+   edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
+   is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
+.pin__cell { caret-color: transparent; }
+.pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
+.pin__cell:focus:placeholder-shown {
+  background-image: linear-gradient(currentColor, currentColor);
+  background-size: var(--pin-caret-w, 2px) var(--pin-caret-h, 1em);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pin__cell:focus:placeholder-shown { animation: pin-caret 1.1s steps(1) infinite; }
+  @keyframes pin-caret { 50% { background-size: 0 0; } }
+}
 
 /* ---- composer: big text area with a bottom bar (icon · hint · send) ----
    <div class="composer"><textarea class="composer__input" placeholder="What do you need?"></textarea>

package/package.json

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