@usableapp/cardds 0.7.107 → 0.7.108

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 > 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. Each release section after 0.7.97 carries one `Components:` line, written by `node scripts/components-changed.mjs <previous tag>`: the components the release changed, or `all` when a file changed that any component can read (a token, the build), or `none`; check only the screens that import those.
 
+## 0.7.108 — 2026-10-22
+
+`KvGrid centre` (Lh 2026-10-21, the code on timebank's request card): the one number at the centre of the room it stands in, a turning card's back. A `JourneyBadge corner` on a `CardMedia` is the card's paper, its corner concentric with the media's; a theme's two badge knobs still win. From when to when (timebank, Lh 2026-10-21): the asker says which days and which hours they need, the helper answers within them.
+
+Components: all (css/palette.css: orchard's badge rule now leaves the media corner badge out, a file any component can read; what a consumer sees change is KvGrid, KvCell, JourneyBadge, CardMedia, Card, Calendar, CalendarWeeks and HourGrid (new), and `scripts/codemod-parts.mjs`, the migration tool, under Fixed)
+
+### Added
+- **`KvGrid centre`: one cell at the centre of the room it stands in, a turning card's back** (Lh 2026-10-21, timebank's request card: the six-digit code the helper types, big, mono, selectable, centred in the middle band over its muted caption; the place `Stat centre` held, as `Head centre` is named). Before → after: a lone `KvCell` in a `KvGrid` on a `Card back` stood left-aligned at the top of the middle band, and the only way to centre it was a hand-written grid around a `Text level="stat"` (cardds's own story did that) → `<KvGrid centre>` is as tall as its holder (`min-height: 100%`, not `height`: in a plain card, a grid of auto rows, a percent height resolved short and the cell overflowed it) and stands its cells at the middle of it, each value and caption centred (`.kv-grid--centre`, `align-content` · `text-align` · `justify-items`); on a plain card, which has no height of its own, the grid hugs its cell and only centres across. The value is the consumer's: a code is `<Text level="stat" mono selectable as="span">490734</Text>`. No new knob (`--kv-cell-gap` sets the space between the value and the caption); `.card__middle` untouched, no rule in lists.css writes another piece's properties. A consumer writes `<KvGrid centre>` in a `Card back` and nothing else changes. Stories: `Kv/KvGridCentre` (new); `Card/TurnsCode` and `Card/TurnsLongTitle` draw their back with it in place of an inline-style grid (inline `style` left in stories: 37, each a knob, a story-only layout, a `display: contents` remount wrapper, the palette demo's surface or the type-scale table; the QR back `TURN_BACK` keeps its three). Style snapshot: only those two stories moved (two elements more on each back) and the new one; the other 498 identical. Tests: tests/kv-grid-centre.spec.js (2); 537 → 538 classes (`.kv-grid--centre`), 719 knobs unchanged. The catalog answers "one big code number centred in the middle of a card back" with KvGrid, then KvCell.
+
+  | before | after |
+  | --- | --- |
+  | `back={<div style={{ display: 'grid', justifyItems: 'center', alignContent: 'center', height: '100%' }}><Text level="stat" mono>490734</Text><Text level="caption">…</Text></div>}` | `back={<KvGrid centre><KvCell value={<Text level="stat" mono selectable as="span">490734</Text>} label="…" /></KvGrid>}` |
+- **A run of days on `Calendar` and `CalendarWeeks`: `span` + `onSpanChange`, or `defaultSpan`.** Before → after: a calendar held ONE day (`selected`), so a request for several days was one calendar per day or a field typed by hand → `span={[first, last]}` covers a run: one drag across the days covers them (the first cell under the finger is one end, the last the other, whichever way it went), or a tap on the first day and a tap on the last; the whole run is ONE highlight, the same colour throughout as a finger dragged over words (Lh 2026-10-21: no picked first or last day), a pill that bridges the grid's gaps; a covered cell carries `aria-pressed`. The app is asked once, when the finger lifts or the second tap closes the run; a third tap starts over. A disabled day is never covered: the run stops before it, so the helper's answer stays inside the asked days (the app marks the asked days `soft` and disables the rest; `Calendar/SpanWithin`). On `Calendar` the span is `[day, day]` (numbers, as `selected`); on `CalendarWeeks` it is `[key, key]` and a drag covers along a row while a finger moving up or down still scrolls the box (`touch-action: pan-y`); two taps cover across the weeks. A key on a cell is a tap. `selected` is not read while `span` is given. Knob `--calendar-span-bg` (the highlight, 25% accent by default: the helper's run must read over the asked days' 12% marks). Gallery `Calendar/Span` · `Calendar/SpanWithin` · `CalendarWeeks/Span`.
+- **`HourGrid`: the hours of a day from when to when.** Before → after: an hour was one `ChipPick` in a `ChipGrid` (one slot, no span) or a `Picker` (one value) → `<HourGrid hours={…} label="น." span={[from, to]} onSpanChange={…} />` lays the hours out in Calendar's own 44px round cells, `--hour-grid-cols` to a row (6), a label over them, and covers a run by the same drag or two taps; `selected` + `onSelect` picks one hour instead. It knows no clock: the app builds `hours: { key, num, disabled?, mark?: 'soft' | 'strong' }[]`, as `CalendarWeeks` builds its days. On a sheet, never in a Card. Gallery `HourGrid/Default` · `Within` · `OneHour` · `DaysThenHours` (the when step of an ask: the weeks, then the hours).
+- **A request card's date and time say the span.** Nothing new to import: the card's date box (`JourneyBadge stretch`) takes the run (`label="พฤ–อา" value="18–21" sub="มิ.ย."`) and the clock chip its hours (`09:00–12:00`), the app's words as before. New knob `--tile-badge-stretch-w` (the stretch badge's width, `calc(var(--fs-lg) * 3.25)` as before): two days need more than one, so the app sets it on that badge; a stretch badge's lines no longer break at a dash. Gallery `Card/DateSpanHead` shows the request card so headed.
+- **One mechanic, three holders.** The span is written once (`src/choice/span.ts`, `useSpan`): `Calendar`, `CalendarWeeks` and `HourGrid` number their cells and spread its handlers; the cell is still `calendarDay` (`.calendar__day`), so every `--calendar-day-*` knob reaches the hours too. The grid's columns are now `--_cols` (7 unless the holder says otherwise). `tests/gallery-span.spec.js` holds the drag, the two taps, the clip at a disabled cell, the unbroken highlight and the keyboard.
+
+### Changed
+- **A badge on the corner of a picture is the paper, its corner concentric with the media's** (ruled Lh 2026-10-21, chosen from three screenshots side by side: the distance on a request card is information, and a highlight-filled badge reads as a control). Before → after: a `JourneyBadge corner` on a `CardMedia` took the badge's own look, the dark `--card-3-bg` fill with the badge corner (`--r-badge`, 13 at 375), and under orchard the highlight yellow; the stories that wanted the paper set three properties by hand in `style` (`--tile-badge-bg`, `--dark`, `--tile-badge-radius`), which an app on the package could not → `.card__media > .tile-badge--corner` (journey.css) is `--card-1-bg` with the paper's ink (`--dark: var(--card-1-dark)`) and its corner is `--r-media` less the badge's inset `--sp-3` (8.8 at 375), so the two arcs share a centre; orchard's highlight rule leaves this badge out. A theme's `--tile-badge-bg` and `--tile-badge-radius` still win (read first, as before). Nothing changes for a consumer unless it set those knobs by hand on such a badge, which it may now drop. A badge in a head (`Tile · JourneyBadgeGate`, the date on `Card · Turns`) is unchanged: the head's concentric rule and orchard's highlight hold there. Stories that moved (the style snapshot; only the badge's background, its ink and the ink's border colour, and its radius): `Card · Turns`, `TurnsTwoLineTitle`, `TurnsCode`, `TurnsControlled`, `TurnsRoundFoot` (the radius only, 21.6 → 8.8: they had the paper by hand, with the card's corner less its padding; the inline style is gone), `CardMedia · CardMediaRated`, `Placeholder · Md`, `Mosaic · PhotoCard`, `Tile · JourneyBadgeCorner` (dark fill, white ink, 13 → white paper, onlight ink, 8.8). `Card · PaperBands` and `TurnsLongTitle` have no corner badge and did not move. Inline `style` objects left in the stories: 37 (was 38). Test: `tests/gallery-inline.spec.js` reads the badge's computed background and radius against the resolved tokens, on orchard too, and the head badge's highlight.
+
+### Fixed
+- **On a dark tone's two-tone card the middle's secondary words take the full ink** (the ink gate, 2026-10-22, found by the caption under the code on `Card back`). Before → after: a `Card paper="bands"` on tone 3 or 5 lightens its middle to a mid grey (#adadad, #bbbbbb in wireframe) and declared the paper's side for it, so a muted word there (`Text muted`, a `KvCell` label, a `Words meta`) read at 3.2:1 and 3.8:1, under the 4.5:1 words need → the middle of a tone 3 or 5 bands card declares `--card-muted` as `--card-ink`, so its secondary words are the full ink there; tones 1, 2 and 4 are unchanged, and a theme's `--card-middle-bg` is read as before. Components: Card. The ink gate (tests/ink.spec.js) passes on every palette; no story as written moved.
+- **`npx cardds codemod-parts` moves a `Row`'s retired props, imports a part once, and keeps a conditional foot conditional** (timebank #372 ran 0.7.107's version and found the three). Before → after: (1) a `Row` still on the props 0.7.106 retired (`title`, `meta`, `lead`, `leadIcon`, `body`, `end`, `endValue`, `endCaption`) was left as it was, and `--check` said nothing of it → it is written in parts, in the 0.7.106 table's order (`<Row><Lead icon="gift" /><Words title meta>{body}</Words><End value caption />{end}</Row>`; `lead` and `end` stand bare, as the table says; `lg`, `done`, `as`, `htmlFor`, `href`, `more`, `open`, `defaultOpen`, `onOpenChange` stay on the Row), and `--check` names `Row title`, `Row meta`, `Row lead`, `Row leadIcon`, `Row end`, `Row body`, `Row endValue`, `Row endCaption` per line. (2) `Head`, `Words` and `Foot` were added to an `import type { … } from 'cardds'` as well as to the value import, so a file with both failed with TS2300 → a part goes to the value import only; the type import has its retired type names renamed (`CardFootProps` → `FootProps`, and every use in the file), and a file with only a type import gets a value import after it. (3) `foot={cond ? x : undefined}` became an always-drawn `<Foot>{cond ? x : undefined}</Foot>`, an empty foot when `cond` is false → `{cond ? <Foot>{x}</Foot> : null}` (also `: null`, and `cond && x` → `{cond && <Foot>{x}</Foot>}`); a plain `foot={value}` is still `<Foot>{value}</Foot>`, since the script cannot know whether `value` may be undefined. A consumer that migrated its screens with 0.7.107's version runs `npx cardds codemod-parts --check <files…>` again to find the Rows it left, then the rewrite on those files. tests/codemod-parts.spec.js, fixtures `row-`, `type-import-`, `foot-if-`.
+
 ## 0.7.107 — 2026-10-21
 
 Every outer holds the same rows (Lh 2026-10-21): a `Card`, a `Sheet`, a stack sheet and a `Modal` are the paper and its behaviour, and inside each stand a `Head`, a `Body` and a `Foot`; a line is `Lead` · `Words` · `End`, the parts a `Row` and a `Card row` are both made of. Eleven parts and seven `Card` props are gone with no alias; `npx cardds codemod-parts <files>` moves a screen. Also: `Stat`, `StatRow`, `Delta` and `Tile stat` removed (a number is a `NumberBand` or a `KvCell`); the gallery's nav is one grouping by `src/` folder in a derived order; a scoped playwright run takes ports of its own.

package/css/card.css

@@ -61,6 +61,9 @@
   overflow: hidden;
 }
 .card--bands.card--turns { background: none; overflow: visible; } /* the turning box keeps --dark: the faces' ink is computed from it */
+/* on a dark tone (3, 5) the lightened middle is a mid grey (#adadad, #bbbbbb in wireframe) that no muted ink reads on (3.2:1 and 3.8:1;
+   the ink gate, 2026-10-22, from the caption under a code on a `Card back`): there the middle's secondary words take the full ink */
+:is(.card--bands, .card--bands > .card__face):is(.card--3, .card--5, .card--3 > *, .card--5 > *) { --card-muted: var(--card-ink); }
 
 /* ---- two faces: the WHOLE card turns (`Card back`, Lh 2026-10-19). The article is the turning box (.flip, base.css) and only that;
    each face is the card's paper — head · middle · foot — and both lie in one grid cell. The head and the foot are the same on both

package/css/choice.css

@@ -119,7 +119,7 @@
    <div class="calendar"><div class="calendar__head">…</div><div class="calendar__grid"><span class="calendar__wd">Mo</span>×7 <button class="calendar__day" style="--start: 3">1</button>…</div></div> */
 .calendar { display: grid; gap: var(--calendar-gap, var(--sp-3)); }
 .calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--calendar-head-gap, var(--sp-2)); }
-.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--calendar-grid-gap, var(--sp-1)); justify-items: center; }
+.calendar__grid { display: grid; grid-template-columns: repeat(var(--_cols, 7), 1fr); gap: var(--calendar-grid-gap, var(--sp-1)); justify-items: center; container-type: inline-size; } /* a container: the span band below is measured in its width */
 .calendar__wd { font: var(--calendar-wd-font, var(--type-caption)); color: var(--calendar-wd-ink, var(--card-muted)); padding-block: var(--calendar-wd-pad-y, var(--sp-2)); }
 .calendar__day {
   width: 100%;
@@ -140,6 +140,31 @@
 .calendar__day:disabled { opacity: var(--fade-dim); }
 .calendar__day[aria-current="date"] { text-decoration: underline; text-underline-offset: 0.2em; }
 
+/* ---- span: a run of cells covered by one drag or two taps (Calendar, CalendarWeeks, HourGrid; src/choice/span.ts is the mechanic). The whole
+   run is ONE highlight, as a finger drags over words (Lh 2026-10-21: no picked first or last day, the same colour throughout): each covered
+   cell's own ::before is a slice of the band, a column and a gap wide between so the slices meet across the grid's gaps, the slice at an end
+   stops at its column's edge with the pill's corner; a one-cell run is a pill the column wide. The cells keep their ink. A grid that is a
+   span takes the touch (no scroll starts on it); the weeks' box keeps its vertical scroll, so there a drag covers a row and two taps cover across rows */
+.calendar--span .calendar__grid { touch-action: none; -webkit-user-select: none; user-select: none; }
+.calendar--weeks.calendar--span .calendar__grid { touch-action: pan-y; }
+.calendar__grid { --_col: calc((100cqw - (var(--_cols, 7) - 1) * var(--calendar-grid-gap, var(--sp-1))) / var(--_cols, 7)); --_span-w: calc(var(--_col) + var(--calendar-grid-gap, var(--sp-1))); }
+:is(.calendar__day--span-start, .calendar__day--span-in, .calendar__day--span-end, .calendar__day--span-one) { position: relative; isolation: isolate; }
+.calendar__day--span-start::before, .calendar__day--span-in::before, .calendar__day--span-end::before, .calendar__day--span-one::before { /* flat, not :is(): the knob walk reads each alternative's element */
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: calc(50% - var(--_span-w) / 2);
+  width: var(--_span-w);
+  z-index: var(--z-under);
+  background: var(--calendar-span-bg, color-mix(in srgb, var(--accent) 25%, transparent));
+}
+.calendar__day--span-start::before { inset-inline-start: calc(50% - var(--_col) / 2); width: calc(var(--_span-w) - var(--calendar-grid-gap, var(--sp-1)) / 2); border-start-start-radius: var(--r-chip); border-end-start-radius: var(--r-chip); }
+.calendar__day--span-end::before { width: calc(var(--_span-w) - var(--calendar-grid-gap, var(--sp-1)) / 2); border-start-end-radius: var(--r-chip); border-end-end-radius: var(--r-chip); }
+.calendar__day--span-one::before { inset-inline-start: calc(50% - var(--_col) / 2); width: var(--_col); border-radius: var(--r-chip); }
+/* ---- hour grid: the hours of a day in Calendar's cells, `--hour-grid-cols` to a row, a label over them
+   <div class="calendar hour-grid"><span class="calendar__label">น.</span><div class="calendar__grid"><button class="calendar__day">9</button>…</div></div> */
+.hour-grid > .calendar__grid { --_cols: var(--hour-grid-cols, 6); }
+
 /* ---- calendar weeks: a run of week rows that scrolls week by week, `show` rows in sight; the head sticks at the top of the box
    <div class="calendar calendar--weeks"><div class="calendar__weeks-head"><span class="calendar__label">June 2026</span><div class="calendar__grid">…wd×7</div></div>
    <div class="calendar__grid calendar__week"><button class="calendar__day">…</button>×7</div>…</div>

package/css/journey.css

@@ -58,7 +58,7 @@
   align-self: stretch;
   max-block-size: calc((2 * var(--fs-caption) + var(--fs-lg)) * var(--tile-badge-line, var(--lh-badge)) + 2 * var(--sp-3));
   container-type: size;
-  inline-size: calc(var(--fs-lg) * 3.25);
+  inline-size: var(--tile-badge-stretch-w, calc(var(--fs-lg) * 3.25)); /* a run of days ("18–21") needs more: the app sets the knob on that badge */
   grid-template-columns: auto auto;
   align-content: center;
   justify-content: center;
@@ -67,7 +67,7 @@
   row-gap: 0;
   padding-block: var(--sp-3);
 }
-.tile-badge--stretch > * { line-height: inherit; }
+.tile-badge--stretch > * { line-height: inherit; white-space: nowrap; } /* a value never breaks at its dash */
 .tile-badge--stretch > :first-child { grid-column: 1 / -1; }
 @container (min-height: 3.5rem) { /* just under the three lines' own height, the most the badge grows to */
   .tile-badge--stretch > * { grid-column: 1 / -1; }
@@ -78,6 +78,10 @@
 
 /* corner badge: pin a tile badge on media (rating, price) — .card__media is relative */
 .tile-badge--corner { position: absolute; right: var(--sp-3); bottom: var(--sp-3); }
+/* on a CardMedia (ruled Lh 2026-10-21, three screenshots side by side): the card's paper, its corner concentric with the media's — the media's
+   corner less the inset above. Not the theme's highlight: the distance on a request card is information, and a highlight fill reads as a
+   control. Both knobs still win (palette.css leaves this badge out of orchard's highlight rule for the same reason) */
+.card__media > .tile-badge--corner { --_badge-radius: calc(var(--r-media) - var(--sp-3)); background: var(--tile-badge-bg, var(--card-1-bg)); --dark: var(--card-1-dark); }
 
 /* ---- note row: icon + caption (transit hints, fine print) ---- */
 .note-row {

package/css/lists.css

@@ -75,6 +75,9 @@
    <div class="kv-grid"><div class="kv-cell"><svg class="icon"/><span class="kv-cell__val">15.6 kg</span><span class="kv-cell__key">Weight</span></div>…</div> */
 .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr)); gap: var(--kv-grid-gap, var(--sp-4)); }
 .kv-grid > .kv-cell + .kv-cell { border-left: var(--border-w) solid var(--hairline); padding-left: var(--sp-4); }
+/* `centre` (Lh 2026-10-21, the code on timebank's request card, as `Stat centre` and `Head centre` were): the grid is as tall as its holder, its cells stand in the middle of it, each value and caption centred */
+.kv-grid--centre { min-height: 100%; align-content: center; text-align: center; } /* min-height, not height: in a plain card (a grid of auto rows) a percent height resolved 8px short and the cell overflowed it; a percent min-height is nothing there, and the holder's height on a turning card's face */
+.kv-grid--centre > .kv-cell { justify-items: center; }
 .kv-cell { display: grid; gap: var(--kv-cell-gap, var(--sp-0)); align-content: start; min-width: 0; }
 .kv-cell > .icon { --icon-margin: 0 0 var(--sp-1); }
 .kv-cell__val { font: var(--kv-cell-val-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }

package/css/palette.css

@@ -92,7 +92,7 @@
 /* where the highlights land — written as the component's own rule, its knob still first, so a project's knob wins (a palette never DECLARES a
    knob). Each fill says its side; the words on it follow */
 [data-palette="orchard"] .badge:not(.badge--soft) { background: var(--badge-bg, var(--highlight-1)); color: var(--badge-ink, var(--ink-ondark)); }
-[data-palette="orchard"] .tile-badge:not(.tile-badge--plain) { background: var(--tile-badge-bg, var(--highlight-2)); --dark: 0; }
+[data-palette="orchard"] .tile-badge:not(.tile-badge--plain, .card__media > .tile-badge--corner) { background: var(--tile-badge-bg, var(--highlight-2)); --dark: 0; } /* a badge on a media stays the paper (journey.css) */
 [data-palette="orchard"] .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--highlight-2) 15%, transparent)); }
 /* fields are WHITE boxes on every ground (Lh 2026-09-25): a light ground, so the words typed in them are onlight, even on the moss card */
 [data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: var(--ink-onlight); }

package/dist/cardds.css

@@ -521,7 +521,7 @@
 /* where the highlights land — written as the component's own rule, its knob still first, so a project's knob wins (a palette never DECLARES a
    knob). Each fill says its side; the words on it follow */
 [data-palette="orchard"] .badge:not(.badge--soft) { background: var(--badge-bg, var(--highlight-1)); color: var(--badge-ink, var(--ink-ondark)); }
-[data-palette="orchard"] .tile-badge:not(.tile-badge--plain) { background: var(--tile-badge-bg, var(--highlight-2)); --dark: 0; }
+[data-palette="orchard"] .tile-badge:not(.tile-badge--plain, .card__media > .tile-badge--corner) { background: var(--tile-badge-bg, var(--highlight-2)); --dark: 0; } /* a badge on a media stays the paper (journey.css) */
 [data-palette="orchard"] .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--highlight-2) 15%, transparent)); }
 /* fields are WHITE boxes on every ground (Lh 2026-09-25): a light ground, so the words typed in them are onlight, even on the moss card */
 [data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: var(--ink-onlight); }
@@ -984,6 +984,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   overflow: hidden;
 }
 .card--bands.card--turns { background: none; overflow: visible; } /* the turning box keeps --dark: the faces' ink is computed from it */
+/* on a dark tone (3, 5) the lightened middle is a mid grey (#adadad, #bbbbbb in wireframe) that no muted ink reads on (3.2:1 and 3.8:1;
+   the ink gate, 2026-10-22, from the caption under a code on a `Card back`): there the middle's secondary words take the full ink */
+:is(.card--bands, .card--bands > .card__face):is(.card--3, .card--5, .card--3 > *, .card--5 > *) { --card-muted: var(--card-ink); }
 
 /* ---- two faces: the WHOLE card turns (`Card back`, Lh 2026-10-19). The article is the turning box (.flip, base.css) and only that;
    each face is the card's paper — head · middle · foot — and both lie in one grid cell. The head and the foot are the same on both
@@ -2569,7 +2572,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   align-self: stretch;
   max-block-size: calc((2 * var(--fs-caption) + var(--fs-lg)) * var(--tile-badge-line, var(--lh-badge)) + 2 * var(--sp-3));
   container-type: size;
-  inline-size: calc(var(--fs-lg) * 3.25);
+  inline-size: var(--tile-badge-stretch-w, calc(var(--fs-lg) * 3.25)); /* a run of days ("18–21") needs more: the app sets the knob on that badge */
   grid-template-columns: auto auto;
   align-content: center;
   justify-content: center;
@@ -2578,7 +2581,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   row-gap: 0;
   padding-block: var(--sp-3);
 }
-.tile-badge--stretch > * { line-height: inherit; }
+.tile-badge--stretch > * { line-height: inherit; white-space: nowrap; } /* a value never breaks at its dash */
 .tile-badge--stretch > :first-child { grid-column: 1 / -1; }
 @container (min-height: 3.5rem) { /* just under the three lines' own height, the most the badge grows to */
   .tile-badge--stretch > * { grid-column: 1 / -1; }
@@ -2589,6 +2592,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* corner badge: pin a tile badge on media (rating, price) — .card__media is relative */
 .tile-badge--corner { position: absolute; right: var(--sp-3); bottom: var(--sp-3); }
+/* on a CardMedia (ruled Lh 2026-10-21, three screenshots side by side): the card's paper, its corner concentric with the media's — the media's
+   corner less the inset above. Not the theme's highlight: the distance on a request card is information, and a highlight fill reads as a
+   control. Both knobs still win (palette.css leaves this badge out of orchard's highlight rule for the same reason) */
+.card__media > .tile-badge--corner { --_badge-radius: calc(var(--r-media) - var(--sp-3)); background: var(--tile-badge-bg, var(--card-1-bg)); --dark: var(--card-1-dark); }
 
 /* ---- note row: icon + caption (transit hints, fine print) ---- */
 .note-row {
@@ -3609,7 +3616,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    <div class="calendar"><div class="calendar__head">…</div><div class="calendar__grid"><span class="calendar__wd">Mo</span>×7 <button class="calendar__day" style="--start: 3">1</button>…</div></div> */
 .calendar { display: grid; gap: var(--calendar-gap, var(--sp-3)); }
 .calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--calendar-head-gap, var(--sp-2)); }
-.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--calendar-grid-gap, var(--sp-1)); justify-items: center; }
+.calendar__grid { display: grid; grid-template-columns: repeat(var(--_cols, 7), 1fr); gap: var(--calendar-grid-gap, var(--sp-1)); justify-items: center; container-type: inline-size; } /* a container: the span band below is measured in its width */
 .calendar__wd { font: var(--calendar-wd-font, var(--type-caption)); color: var(--calendar-wd-ink, var(--card-muted)); padding-block: var(--calendar-wd-pad-y, var(--sp-2)); }
 .calendar__day {
   width: 100%;
@@ -3630,6 +3637,31 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .calendar__day:disabled { opacity: var(--fade-dim); }
 .calendar__day[aria-current="date"] { text-decoration: underline; text-underline-offset: 0.2em; }
 
+/* ---- span: a run of cells covered by one drag or two taps (Calendar, CalendarWeeks, HourGrid; src/choice/span.ts is the mechanic). The whole
+   run is ONE highlight, as a finger drags over words (Lh 2026-10-21: no picked first or last day, the same colour throughout): each covered
+   cell's own ::before is a slice of the band, a column and a gap wide between so the slices meet across the grid's gaps, the slice at an end
+   stops at its column's edge with the pill's corner; a one-cell run is a pill the column wide. The cells keep their ink. A grid that is a
+   span takes the touch (no scroll starts on it); the weeks' box keeps its vertical scroll, so there a drag covers a row and two taps cover across rows */
+.calendar--span .calendar__grid { touch-action: none; -webkit-user-select: none; user-select: none; }
+.calendar--weeks.calendar--span .calendar__grid { touch-action: pan-y; }
+.calendar__grid { --_col: calc((100cqw - (var(--_cols, 7) - 1) * var(--calendar-grid-gap, var(--sp-1))) / var(--_cols, 7)); --_span-w: calc(var(--_col) + var(--calendar-grid-gap, var(--sp-1))); }
+:is(.calendar__day--span-start, .calendar__day--span-in, .calendar__day--span-end, .calendar__day--span-one) { position: relative; isolation: isolate; }
+.calendar__day--span-start::before, .calendar__day--span-in::before, .calendar__day--span-end::before, .calendar__day--span-one::before { /* flat, not :is(): the knob walk reads each alternative's element */
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: calc(50% - var(--_span-w) / 2);
+  width: var(--_span-w);
+  z-index: var(--z-under);
+  background: var(--calendar-span-bg, color-mix(in srgb, var(--accent) 25%, transparent));
+}
+.calendar__day--span-start::before { inset-inline-start: calc(50% - var(--_col) / 2); width: calc(var(--_span-w) - var(--calendar-grid-gap, var(--sp-1)) / 2); border-start-start-radius: var(--r-chip); border-end-start-radius: var(--r-chip); }
+.calendar__day--span-end::before { width: calc(var(--_span-w) - var(--calendar-grid-gap, var(--sp-1)) / 2); border-start-end-radius: var(--r-chip); border-end-end-radius: var(--r-chip); }
+.calendar__day--span-one::before { inset-inline-start: calc(50% - var(--_col) / 2); width: var(--_col); border-radius: var(--r-chip); }
+/* ---- hour grid: the hours of a day in Calendar's cells, `--hour-grid-cols` to a row, a label over them
+   <div class="calendar hour-grid"><span class="calendar__label">น.</span><div class="calendar__grid"><button class="calendar__day">9</button>…</div></div> */
+.hour-grid > .calendar__grid { --_cols: var(--hour-grid-cols, 6); }
+
 /* ---- calendar weeks: a run of week rows that scrolls week by week, `show` rows in sight; the head sticks at the top of the box
    <div class="calendar calendar--weeks"><div class="calendar__weeks-head"><span class="calendar__label">June 2026</span><div class="calendar__grid">…wd×7</div></div>
    <div class="calendar__grid calendar__week"><button class="calendar__day">…</button>×7</div>…</div>
@@ -3924,6 +3956,9 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
    <div class="kv-grid"><div class="kv-cell"><svg class="icon"/><span class="kv-cell__val">15.6 kg</span><span class="kv-cell__key">Weight</span></div>…</div> */
 .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr)); gap: var(--kv-grid-gap, var(--sp-4)); }
 .kv-grid > .kv-cell + .kv-cell { border-left: var(--border-w) solid var(--hairline); padding-left: var(--sp-4); }
+/* `centre` (Lh 2026-10-21, the code on timebank's request card, as `Stat centre` and `Head centre` were): the grid is as tall as its holder, its cells stand in the middle of it, each value and caption centred */
+.kv-grid--centre { min-height: 100%; align-content: center; text-align: center; } /* min-height, not height: in a plain card (a grid of auto rows) a percent height resolved 8px short and the cell overflowed it; a percent min-height is nothing there, and the holder's height on a turning card's face */
+.kv-grid--centre > .kv-cell { justify-items: center; }
 .kv-cell { display: grid; gap: var(--kv-cell-gap, var(--sp-0)); align-content: start; min-width: 0; }
 .kv-cell > .icon { --icon-margin: 0 0 var(--sp-1); }
 .kv-cell__val { font: var(--kv-cell-val-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }

package/dist/cards/CardParts.d.ts

@@ -1,7 +1,8 @@
 import { type ComponentProps } from 'react';
 export interface CardMediaProps extends ComponentProps<'div'> {
 }
-/** CardMedia — rounded media inside a card (a Placeholder or img); a corner JourneyBadge pins to it. */
+/** CardMedia — rounded media inside a card (a Placeholder or img); a corner JourneyBadge pins to it: the badge on the corner of a picture is the paper,
+ *  its corner concentric with the media's; a theme's `--tile-badge-bg` / `--tile-badge-radius` still win. Ruled (Lh 2026-10-21). */
 export declare function CardMedia({ className, ...rest }: CardMediaProps): import("react").JSX.Element;
 export interface CardListProps extends ComponentProps<'div'> {
     /** how many rows show before the list scrolls IN ITSELF, counted in rows, not a height: `2.5` = two whole rows and half of the third, the cut row

package/dist/cards/CardParts.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef } from 'react';
 import { cx } from '../cx.js';
-/** CardMedia — rounded media inside a card (a Placeholder or img); a corner JourneyBadge pins to it. */
+/** CardMedia — rounded media inside a card (a Placeholder or img); a corner JourneyBadge pins to it: the badge on the corner of a picture is the paper,
+ *  its corner concentric with the media's; a theme's `--tile-badge-bg` / `--tile-badge-radius` still win. Ruled (Lh 2026-10-21). */
 export function CardMedia({ className, ...rest }) {
     return _jsx("div", { className: cx('card__media', className), ...rest });
 }