@usableapp/cardds 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 > 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
+
+### 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/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/dist/cardds.css

@@ -1561,7 +1561,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 +1570,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 +2534,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.1",
   "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.",