@usableapp/cardds 0.7.100 → 0.7.102

package/dist/cardds.css

@@ -322,8 +322,8 @@
    surface turns everything on it to ondark with no rule per piece. A piece with no fill that stands in for a surface (a stat
    tile) takes its ground's side: `--dark: inherit`. inkGrounds() measures it; docs/reference.md "Ink follows its ground" */
 :where(body, [data-palette], [data-mode], .card, .tile, .modal__drawer, .postcard__front, .postcard__back, .sticky, .post-paper,
-  .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .sheet--paper > .sheet__body,
-  .postcard__band, .track__step, .toggle, .chip) {
+  .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .map__pin, .sheet--paper > .sheet__body,
+  .postcard__band, .track__step, .toggle, .chip, .card__face, .card--bands > :is(.card__head, .card__foot), .card--bands > .card__face > :is(.card__head, .card__foot)) {
   --card-ink: color-mix(in srgb, var(--ink-ondark) calc(var(--dark) * 100%), var(--ink-onlight));
   --card-muted: color-mix(in srgb, var(--ink-ondark-muted) calc(var(--dark) * 100%), var(--ink-onlight-muted));
   --on-accent: color-mix(in srgb, var(--ink-ondark) calc(var(--accent-dark) * 100%), var(--ink-onlight));
@@ -571,6 +571,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .icon--sm { width: var(--icon-sm-size, var(--icon-sm)); height: var(--icon-sm-size, var(--icon-sm)); }
 .icon--xs { width: var(--icon-xs-size, var(--icon-xs)); height: var(--icon-xs-size, var(--icon-xs)); } /* inside captions, chips, links */
 .icon--lg { width: var(--icon-lg-size, var(--icon-lg)); height: var(--icon-lg-size, var(--icon-lg)); } /* empty states */
+/* an icon among words sits ON the line: `img, svg { display: block }` above would put it on a line of its own. Only a direct child of a
+   type level is running text; an icon in a button, chip, link or row is a flex/grid item and never matches. */
+:is(.t-display, .t-h1, .t-h2, .t-title, .t-body, .t-label, .t-caption) > .icon { display: inline-block; vertical-align: middle; }
 
 /* mobile screen column — the standard horizontal inset, and nothing vertical.
    Top is zero on purpose: room there is only ever a RESERVE for something
@@ -703,6 +706,23 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* inside a card (a card's own "nothing yet"): the card's ink */
 .card .empty-state { color: var(--card-ink); padding-block: var(--sp-6); }
 
+/* ---- the turn: one flip mechanic for everything with two faces (a Postcard, a Card's `back`).
+   The faces share one grid cell and turn on Y at --motion-flip; where motion is off they swap at once.
+   The owner sets the box's size and the faces' look; .is-flipped on .flip shows the back. */
+.flip { perspective: 60rem; display: grid; }
+.flip__face {
+  grid-area: 1 / 1;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transition: transform var(--motion-flip) ease-in-out;
+}
+.flip__face--back { transform: rotateY(180deg); }
+.flip.is-flipped > .flip__face--front { transform: rotateY(-180deg); }
+.flip.is-flipped > .flip__face--back { transform: rotateY(0); }
+@media (prefers-reduced-motion: reduce) {
+  .flip__face { transition: none; }
+}
+
 /* ---- css/card.css — card boundary + list variants ---- */
 /* ============================================================
    cardds/card.css — the card boundary + list variants
@@ -802,6 +822,56 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .card__head:has(> .stamp) > :is(.t-caption, .t-body) { grid-column: 1; grid-row: 2; align-self: start; }
 .card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
 
+/* a JourneyBadge at the edge of the card's own first head (the date box in the top-left or top-right corner) keeps its corner concentric
+   with the card's: the card's corner (--r-card) less the room the padding leaves round it. journey.css reads it behind the theme's --tile-badge-radius,
+   so a theme that sets that knob still wins. */
+.card > .card__head:first-child > .tile-badge:is(:first-child, :last-child) { --_badge-radius: calc(var(--r-card) - var(--card-pad)); }
+
+/* ---- paper bands: the two-tone card (`Card paper="bands"`, Lh 2026-10-19): the head and the foot are white paper bands edge to
+   edge over the card's padding, no hairline; the middle between them keeps the card's tone, lightened (--card-middle-bg). The card
+   clips, so the bands keep its corners. A two-faced card (below) carries the look on each face. */
+:is(.card--bands, .card--bands > .card__face) {
+  background: var(--card-middle-bg, color-mix(in srgb, var(--card-bg) 35%, var(--card-1-bg)));
+  --dark: var(--card-1-dark); /* the middle is mostly paper: its words take the paper's side */
+  overflow: hidden;
+}
+:is(.card--bands, .card--bands > .card__face) > :is(.card__head, .card__foot) {
+  --card-bg: var(--card-1-bg);
+  --dark: var(--card-1-dark);
+  background: var(--card-bg);
+  color: var(--card-ink);
+  margin-inline: calc(-1 * var(--card-pad));
+  padding-inline: var(--card-pad);
+}
+:is(.card--bands, .card--bands > .card__face) > .card__head { margin-top: calc(-1 * var(--card-pad)); padding-block: var(--card-pad); }
+:is(.card--bands, .card--bands > .card__face) > .card__foot { margin-bottom: calc(-1 * var(--card-pad)); padding-block: var(--sp-3); } /* the foot band is slim */
+
+/* ---- 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
+   faces; the middle is one fixed height (--card-middle-h, the theme's call), so the card never changes height as it turns. The hidden
+   face is inert. Each face holds an unseen turn button: the keyboard's way to turn it; its ring is drawn on the face. */
+.card--turns { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
+.card__face {
+  display: grid;
+  align-content: start;
+  gap: var(--card-gap);
+  min-width: 0;
+  padding: var(--card-pad);
+  background: var(--card-bg);
+  border: var(--border-w) solid var(--card-border);
+  border-radius: inherit;
+  overflow: hidden;
+  position: relative;
+}
+.card__face > * { min-width: 0; }
+.card__middle { display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, 18.75rem); overflow: hidden; }
+.card__turn { position: absolute; inset: 0; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
+.card__face:has(> .card__turn:focus-visible) { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
+/* a head's ChipRow takes a line of its own under the title: at most two lines of chips, a chip's words cut with an ellipsis */
+.card__head > .chip-row { flex: 1 1 100%; order: 2; max-height: calc(2 * (var(--fs-sm) * 1.5 + 2 * var(--chip-sm-pad-y, var(--sp-0)) + 2 * var(--border-w)) + var(--sp-2)); overflow: hidden; }
+.card__head > .chip-row > .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
+.card__head > .chip-row > .chip > .icon { display: inline-block; vertical-align: -0.15em; margin-inline-end: var(--chip-sm-gap, var(--sp-1)); }
+
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
    a tile grid: the TRACK reaches the edges so it reads as scrollable, while
@@ -1008,6 +1078,49 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .card--row .card__body { flex: 1; display: grid; gap: var(--sp-0); }
 
+/* ---- a short window of past entries (`CardList show`, Lh 2026-10-19): the list scrolls IN ITSELF, a few rows in sight and the next one cut
+   in half to say there is more. The height is counted in rows by the component (`--_card-list-h`, px: rows wrap to any height); the room
+   round the rows (`--card-list-window-pad`) keeps a picked row's focus ring and a card's shadow inside the scroll box, and the margin gives
+   that room back so the rows stand where an ordinary list's would. ---- */
+.card-list--window {
+  --_pad: var(--card-list-window-pad, var(--sp-2));
+  max-height: var(--_card-list-h, none);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  padding: var(--_pad);
+  margin: calc(-1 * var(--_pad));
+}
+
+/* ---- the cross that takes a row off the list (`Card row onRemove`): small, at the row's top right corner, inside it ----
+   <label class="card card--row"><input type="radio">…<div class="card__body">…</div><button class="card__remove" aria-label="Remove"><svg class="icon">x</svg></button></label>
+   Smaller than any button (a ring half a thing's size, `--tap-base` / 2 = 24) and it grows with the size of things; the touch target is an
+   unseen ring round it, never under --tap-floor (44). It stands in the row's flow, so the title wraps before it, tucked into the corner
+   by the row's own padding; it sits over the row's radio (which covers the whole card), so a touch on it removes and never picks. */
+.card__remove {
+  --_size: var(--card-remove-size, calc(var(--tap-base) / 2));
+  position: relative;
+  z-index: 1;
+  flex: none;
+  align-self: flex-start;
+  display: grid;
+  place-items: center;
+  width: var(--_size);
+  height: var(--_size);
+  margin-block-start: calc(var(--card-remove-inset, var(--sp-2)) - var(--card-row-pad, var(--sp-4)));
+  margin-inline-end: calc(var(--card-remove-inset, var(--sp-2)) - var(--card-row-pad, var(--sp-4)));
+  padding: 0;
+  border: var(--border-w) solid currentColor;
+  border-radius: 50%;
+  background: var(--card-remove-bg, transparent);
+  color: var(--card-remove-ink, currentColor);
+  font: inherit;
+  cursor: pointer;
+}
+.card__remove::after { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: max(var(--tap-floor), var(--_size)); aspect-ratio: 1; border-radius: 50%; }
+.card__remove > .icon { width: 62%; height: 62%; }
+.card__remove:focus-visible { outline: var(--focus); outline-offset: var(--sp-0); }
+
 /* leading thumb/icon in a row */
 .card__thumb {
   width: var(--card-thumb-size, var(--tap-sm)); height: var(--card-thumb-size, var(--tap-sm));
@@ -1975,7 +2088,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    wireframe's street pattern, so a map is never a hole. The ring marks the
    rough area the member is choosing: fixed at the box's centre, so dragging
    the map underneath is what moves it (the centre IS the choice), never a
-   pin to place. The hint rides at the top, under the bar's line. */
+   pin to place. The hint rides at the top, under the bar's line.
+   For a MEETING place (Lh 2026-10-19) the centre mark is a pin instead of the ring: `.map__pin`, below the ring's rule,
+   its tip on the point the ring's centre sits. */
 .map {
   position: absolute;
   inset: 0;
@@ -2003,6 +2118,24 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   pointer-events: none;
   z-index: 1; /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
 }
+.map__pin { /* mark="pin": an exact point — the pin's TIP is where the ring's centre sits, so the engine reads the element's bottom-centre */
+  position: absolute;
+  left: 50%;
+  top: var(--_band-centre);
+  width: var(--map-pin-size, var(--tap));
+  height: var(--map-pin-size, var(--tap));
+  translate: -50% -100%;
+  /* ink follows its ground: the pin stands on the map's own tone-2 fill, not on the sheet round it — in a dark sheet the inherited
+     --accent is the card's ondark ink, cream on clay's orange map (2.8:1); so the pin takes the tone's side and its ink (tokens.css) */
+  --dark: var(--card-2-dark);
+  color: var(--map-pin-ink, var(--card-ink));
+  filter: drop-shadow(var(--map-pin-drop, var(--shadow-float)));
+  pointer-events: none;
+  z-index: 1;
+}
+/* the lucide tip stops 2.2 of 24 short of the box's bottom: lowered so the tip IS the bottom-centre; filled with the surface so the
+   street pattern never shows through the pin's body */
+.map__pin > .icon { width: 100%; height: 100%; translate: 0 9%; fill: var(--surface); }
 .map__credit { /* the tile provider's credit — required by OSM; a caption, not the engine's own control */
   position: absolute;
   right: var(--sp-2);
@@ -2388,6 +2521,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    cardds/forms.css — inputs + inline form actions
    .field: flat outlined input, the label IS the placeholder.
    Markup: <label class="field"><svg?/><input placeholder="Passport Number"></label>
+   Several lines (Field rows): <label class="field field--rows"><svg?/><textarea rows="4" placeholder="…"></textarea></label>
    ============================================================ */
 
 .field {
@@ -2405,17 +2539,28 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 
 .field input,
-.field select {
+.field select,
+.field textarea,
+.field--rows {
+  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. .field--rows too, so 1lh is the textarea's line for its icon */
+}
+.field input,
+.field select,
+.field textarea {
   border: 0;
   background: transparent;
   color: inherit;
-  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: 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; font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
+.field input::placeholder,
+.field textarea::placeholder { color: inherit; opacity: 0.55; font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
+/* several lines in the same frame (Field rows): the textarea is as tall as its `rows` × line, the frame grows round it, the icon and the action stay at the top (Lh 2026-10-19) */
+.field--rows { align-items: flex-start; padding-block: var(--field-rows-pad-y, var(--sp-3)); }
+.field textarea { flex: 1; resize: none; display: block; }
+.field--rows > .icon { margin-top: calc((1lh - var(--icon-sm)) / 2); } /* centred on the first line */
 /* 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, [data-cursor]) { border-color: var(--field-active-border, currentColor); } /* [data-cursor]: SheetSteps holds the phone's keyboard for this field */
 
@@ -2504,7 +2649,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   justify-items: center;
   gap: var(--tile-badge-gap, var(--sp-0));
   padding: var(--tile-badge-pad-y, var(--sp-1)) var(--tile-badge-pad-x, var(--sp-2));
-  border-radius: var(--tile-badge-radius, var(--r-badge));
+  border-radius: var(--tile-badge-radius, var(--_badge-radius, var(--r-badge)));  /* --_badge-radius: card.css, a badge in a card's corner */
   background: var(--tile-badge-bg, var(--card-3-bg));
   --dark: var(--card-3-dark);
   color: var(--tile-badge-ink, var(--card-ink));
@@ -2518,6 +2663,28 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .tile-badge--plain { background: transparent; --dark: inherit; color: inherit; padding: 0; min-width: var(--tile-badge-plain-min-w, var(--tap-sm)); }
 .tile-badge--plain .tile-badge__value { font: 800 var(--fs-h1)/1 var(--font-display); }
 
+/* stretch: a date in a head (Lh 2026-10-19) — as tall as the title block beside it and no taller (the head stretches it; size
+   containment keeps its own words from adding height). Its height picks the form: short (a one-line title) = two lines, the day name
+   over the number and the month on one line; tall (a two-line title) = three lines, day · number · month. */
+.tile-badge--stretch {
+  align-self: stretch;
+  container-type: size;
+  inline-size: calc(var(--fs-lg) * 3.25);
+  grid-template-columns: auto auto;
+  align-content: center;
+  justify-content: center;
+  align-items: baseline;
+  column-gap: var(--sp-1);
+  row-gap: 0;
+  padding-block: var(--sp-3);
+  line-height: var(--tile-badge-line, 0.95);
+}
+.tile-badge--stretch > * { line-height: inherit; }
+.tile-badge--stretch > :first-child { grid-column: 1 / -1; }
+@container (min-height: 5.5rem) {
+  .tile-badge--stretch > * { grid-column: 1 / -1; }
+}
+
 /* 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); }
 
@@ -3493,6 +3660,28 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .calendar__day--mark2 { background: var(--calendar-day-mark2-bg, color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--calendar-day-mark2-ink, inherit); box-shadow: var(--calendar-day-mark2-shadow, inset 0 0 0 var(--border-w) var(--accent)); }
 .calendar__day[aria-selected="true"] { background: var(--calendar-day-selected-bg, var(--accent)); color: var(--calendar-day-selected-ink, var(--on-accent)); font-weight: 700; }
 .calendar__day:disabled { opacity: 0.3; }
+.calendar__day[aria-current="date"] { text-decoration: underline; text-underline-offset: 0.2em; }
+
+/* ---- 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>
+   --_weeks-h (head + `show` rows) and --_weeks-lead (the head and the gap under it, where a row snaps) are measured by src/choice/CalendarWeeks.tsx; the cells and every --calendar-* knob are Calendar's */
+.calendar--weeks {
+  position: relative;
+  max-height: var(--_weeks-h, none);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-snap-type: y mandatory;
+  scroll-padding-block-start: var(--_weeks-lead, 0px);
+  overflow-anchor: none; /* a pick rerenders the rows; the browser must not shift the scroll to keep an anchor */
+  scrollbar-width: none;
+}
+.calendar--weeks::-webkit-scrollbar { display: none; }
+.calendar__weeks-head { position: sticky; inset-block-start: 0; z-index: 1; display: grid; gap: var(--calendar-head-gap, var(--sp-2)); background: var(--calendar-weeks-head-bg, var(--card-bg)); }
+.calendar__label { font: var(--calendar-label-font, var(--type-label)); color: var(--calendar-label-ink, inherit); justify-self: start; }
+button.calendar__label { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--sp-1); }
+button.calendar__label:focus-visible { outline: var(--focus); outline-offset: var(--sp-0); }
+.calendar__week { scroll-snap-align: start; }
 
 /* ---- mood: five dots in a pill, the picked one grows ----
    <fieldset class="mood"><label class="mood__opt"><input type="radio" name="mood"><span class="mood__dot"></span></label>×5</fieldset> */
@@ -5118,8 +5307,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    liked it, a voice note, a reply live OUTSIDE the postcard, in a Row under it. */
 .postcard {
   position: relative;
+  display: block; /* its faces lie absolute over the box (.flip's grid cell is not used) */
   min-height: var(--postcard-min-h, var(--_cover-min-h));
-  perspective: 60rem;
   border-radius: var(--postcard-radius, var(--r-card));
   isolation: isolate;
 }
@@ -5132,9 +5321,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   border-radius: inherit;
   overflow: hidden;
   isolation: isolate;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  transition: transform var(--motion-flip) ease-in-out;
   box-shadow: var(--postcard-face-shadow, var(--shadow-float));
 }
 /* the turn: the button that fills the face, under the band */
@@ -5174,7 +5360,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   background: var(--postcard-back-bg, var(--card-2-bg));
   --dark: var(--card-2-dark);
   color: var(--postcard-back-ink, var(--card-ink));
-  transform: rotateY(180deg);
 }
 .postcard__back .postcard__turn { align-content: start; padding-top: var(--postcard-back-top, 20%); gap: var(--postcard-back-gap, var(--sp-5)); } /* the name a fifth down the paper, the words after it */
 .postcard__caption { margin: 0; font: var(--postcard-caption-font, var(--type-title)); text-wrap: pretty; }
@@ -5193,16 +5378,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .postcard__words { display: grid; gap: var(--postcard-words-gap, var(--sp-1)); flex: 1; min-width: 0; pointer-events: none; }
 .postcard__front .postcard__band { --accent: var(--postcard-front-ink, var(--card-ink)); --accent-dark: calc(1 - var(--dark)); }
 .postcard__band .icon-btn[aria-pressed="true"] .icon { fill: currentColor; }
-.postcard.is-flipped > .postcard__front { transform: rotateY(-180deg); }
-.postcard.is-flipped > .postcard__back { transform: rotateY(0); }
 /* a voice note on the back: no words to read — its timeline (a Progress), its length and the control to hear it
    under them, at the middle over the turn, on the face's inset; the app plays and keeps the time */
 .postcard__voice { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: var(--postcard-voice-gap, var(--sp-3)); padding: var(--postcard-face-pad, var(--card-pad-rest)); pointer-events: none; }
 .postcard__voice > * { pointer-events: auto; }
 .postcard__voice > .progress { justify-self: stretch; pointer-events: none; }
-@media (prefers-reduced-motion: reduce) {
-  .postcard__face { transition: none; }
-}
 
 /* ---- css/layover.css — ask drawer, popover menu, banner, float bar, callout ---- */
 /* ============================================================

package/dist/cards/Card.d.ts

@@ -2,13 +2,17 @@ import { type ComponentProps, type MouseEvent, type ReactNode } from 'react';
 import { type CardHeadProps } from './CardHead.js';
 import { type StackPlace } from '../sheets/stackCard.js';
 export type { StackPlace };
+/** which side of a two-faced card shows */
+export type CardFace = 'front' | 'back';
 /** a card's paper: 1 (default, light) · 2 (tinted) · 3 (dark / accent — controls invert) · 4 · 5 (more colours, from the palette) */
 export type Tone = 1 | 2 | 3 | 4 | 5;
 export interface CardProps extends ComponentProps<'article'> {
     /** the tone slot — see `Tone` */
     tone?: Tone;
-    /** the content is white paper and the head keeps the card's colour. The same look as `Sheet paper`. Omit it and the content matches the head */
-    paper?: boolean;
+    /** `true`: the content is white paper and the head keeps the card's colour (the look of `Sheet paper`). `'bands'`: the opposite, two-tone —
+     *  the head and the foot are white paper bands edge to edge, the middle between them keeps the card's tone, lightened (knob `--card-middle-bg`).
+     *  Omit it and the content matches the head */
+    paper?: boolean | 'bands';
     /** compact: a small card inside a card or a sheet body (a note, a promo) */
     sm?: boolean;
     /** a list row that is its own card: thumb · body · end, in a CardList. Its corner is the big card's PROPORTION, not its size (`--r-card-row`, 13; knob `--card-row-radius`).
@@ -49,6 +53,28 @@ export interface CardProps extends ComponentProps<'article'> {
     leave?: boolean;
     /** a card that was asked to `leave` HAS left (its motion ended; at once where motion is off, or when it has no motion) — the app does what follows: changes the page, closes. Once per leave */
     onLeft?: () => void;
+    /** a `row` card the member can take off its list: a small cross at the row's top right corner (smaller than a button, growing with the size of
+     *  things; its touch target stays 44). A touch on it calls this and never picks the row. The app takes the row out of its own list. Knobs
+     *  `--card-remove-size` · `--card-remove-inset` · `--card-remove-ink` · `--card-remove-bg` */
+    onRemove?: () => void;
+    /** THE BACK — the card has two faces and the member turns the WHOLE card over: a tap anywhere on it that is not on a control asks for the other
+     *  face. The head and the foot (`heading`/`caption`/`end` or a CardHead child, `foot`) are given once and drawn on BOTH faces, so they read the same
+     *  either way; the children are the front's middle, `back` the back's. The middle is one fixed height on both faces (knob `--card-middle-h`), so the
+     *  card never changes height when it turns. The hidden face is `inert`; an `id` in the head or the foot would be drawn twice, so give it none.
+     *  Not on a `row`, `sm` or `stack` card */
+    back?: ReactNode;
+    /** CONTROLLED: the face that shows — pair it with `onFaceChange`. The app owns it */
+    face?: CardFace;
+    /** UNCONTROLLED: the face it starts on (default `'front'`) */
+    defaultFace?: CardFace;
+    /** a tap asked for the other face */
+    onFaceChange?: (face: CardFace) => void;
+    /** the spoken name of the front's hidden turn-over button (default: the words' `turnToBack`) */
+    toBackLabel?: string;
+    /** the spoken name of the back's hidden turn-over button (default: the words' `turnToFront`) */
+    toFrontLabel?: string;
+    /** the cross's spoken name (default: the words' `remove`) — name what goes: "Remove 'buy medicine'" */
+    removeLabel?: string;
 }
 /**
  * Card — ONE boundary: head · content · foot. Cards are content the system offers (the words, the thing to read).
@@ -58,8 +84,10 @@ export interface CardProps extends ComponentProps<'article'> {
  * A page with one feature and one CTA may be a single card. Keep everything big.
  * PRESSED WHOLE: a card whose ONLY control is its foot's button, or a row card's end button, is pressed anywhere — a touch off the
  * button runs that button's own action once, and the card dims under the finger. The app writes nothing; any other card is only read.
+ * TWO FACES (`back`): the whole card turns over on a tap off a control (the flip mechanic it shares with Postcard); the head and the foot
+ * read the same on both faces, the middle is one fixed height. `paper="bands"`: white head and foot bands edge to edge, the tint between.
  */
-export declare function Card({ tone, paper, sm, row, cover, fold, centre, band, as, heading, caption, end, level, foot, footLink, stack, leave, onLeft, className, style, children, onClick, ref, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
+export declare function Card({ tone, paper, sm, row, cover, fold, centre, band, as, heading, caption, end, level, foot, footLink, stack, leave, onLeft, onRemove, removeLabel, back, face, defaultFace, onFaceChange, toBackLabel, toFrontLabel, className, style, children, onClick, ref, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
     onClick: (e: MouseEvent<HTMLElement>) => void;
     inert?: boolean | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;

package/dist/cards/Card.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Children, createElement, isValidElement, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { cx } from '../cx.js';
-import { useLatest, warnOnce } from '../state.js';
+import { useControlled, useLatest, warnOnce } from '../state.js';
 import { CardHead } from './CardHead.js';
 import { CardFoot } from './CardFoot.js';
-import { goControl } from './cardGo.js';
+import { goControl, onControl } from './cardGo.js';
+import { Icon } from '../type/Icon.js';
+import { word } from '../words.js';
 import { StackHeadCtx, StackPullCtx, ownHead, stackPaint, useStackCard } from '../sheets/stackCard.js';
 /**
  * Card — ONE boundary: head · content · foot. Cards are content the system offers (the words, the thing to read).
@@ -14,8 +16,17 @@ import { StackHeadCtx, StackPullCtx, ownHead, stackPaint, useStackCard } from '.
  * A page with one feature and one CTA may be a single card. Keep everything big.
  * PRESSED WHOLE: a card whose ONLY control is its foot's button, or a row card's end button, is pressed anywhere — a touch off the
  * button runs that button's own action once, and the card dims under the finger. The app writes nothing; any other card is only read.
+ * TWO FACES (`back`): the whole card turns over on a tap off a control (the flip mechanic it shares with Postcard); the head and the foot
+ * read the same on both faces, the middle is one fixed height. `paper="bands"`: white head and foot bands edge to edge, the tint between.
  */
-export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'article', heading, caption, end, level, foot, footLink, stack, leave, onLeft, className, style, children, onClick, ref, ...rest }) {
+export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'article', heading, caption, end, level, foot, footLink, stack, leave, onLeft, onRemove, removeLabel, back, face, defaultFace = 'front', onFaceChange, toBackLabel, toFrontLabel, className, style, children, onClick, ref, ...rest }) {
+    if (onRemove && !row)
+        warnOnce('card-remove-row', 'cardds Card: `onRemove` draws its cross on a `row` card only');
+    if (back != null && (row || sm || stack))
+        warnOnce('card-back-kind', 'cardds Card: `back` turns a whole card — not a `row`, `sm` or `stack` card; the back is ignored');
+    const turns = back != null && !row && !sm && !stack;
+    const [shown, ask] = useControlled(face, defaultFace, onFaceChange);
+    const flipped = turns && shown === 'back';
     const head = heading != null || caption != null || end != null;
     const tail = foot != null || footLink != null;
     if (head || tail) {
@@ -51,7 +62,7 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
         return () => { live = false; };
     }, [away]);
     const [go, setGo] = useState(false);
-    useLayoutEffect(() => { setGo(own.current != null && goControl(own.current) != null); }); // every render: what the card holds is its children's
+    useLayoutEffect(() => { setGo(!turns && own.current != null && goControl(own.current) != null); }); // every render: what the card holds is its children's
     const pressing = useRef(false);
     const click = (e) => {
         if (pressing.current)
@@ -59,6 +70,11 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
         onClick?.(e);
         const target = e.target;
         const card = own.current;
+        if (turns) {
+            if (!e.defaultPrevented && card && !onControl(card, target))
+                ask(flipped ? 'front' : 'back');
+            return;
+        }
         if (!e.defaultPrevented && card?.contains(target)) {
             const control = goControl(card);
             if (control && !control.contains(target)) {
@@ -90,13 +106,22 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
     const props = {
         ...rest,
         ref: setRef,
-        className: cx('card', tone && tone !== 1 && `card--${tone}`, paper && 'sheet--paper', sm && 'card--sm', row && 'card--row', cover && 'card--cover', fold && 'card--fold', centre && 'card--centre', band && 'card--band', go && 'card--go', leaver && 'card--leaver', away && 'card--away', painted.className, className),
+        className: cx('card', tone && tone !== 1 && `card--${tone}`, paper === true && 'sheet--paper', paper === 'bands' && 'card--bands', turns && 'card--turns flip', flipped && 'is-flipped', sm && 'card--sm', row && 'card--row', cover && 'card--cover', fold && 'card--fold', centre && 'card--centre', band && 'card--band', go && 'card--go', leaver && 'card--leaver', away && 'card--away', painted.className, className),
         style: painted.style || style ? { ...painted.style, ...style } : undefined,
         ...(stack ? { 'aria-busy': painted.busy } : {}),
         ...(away ? { inert: true } : {}),
         onClick: click,
     };
+    const cross = row && onRemove ? (_jsx("button", { type: "button", className: "card__remove", "aria-label": removeLabel ?? word('remove'), onClick: (e) => { e.preventDefault(); e.stopPropagation(); onRemove(); }, children: _jsx(Icon, { name: "x" }) }, "remove")) : null;
+    if (turns) {
+        const kids = Children.toArray(children);
+        const ownHeadKid = kids.find((c) => isValidElement(c) && c.type === CardHead);
+        const ownFootKid = kids.find((c) => isValidElement(c) && c.type === CardFoot);
+        const front = kids.filter((c) => c !== ownHeadKid && c !== ownFootKid);
+        const side = (which, middle) => (_jsxs("div", { className: cx('card__face flip__face', `flip__face--${which}`), ...((which === 'back') !== flipped ? { inert: true } : {}), children: [_jsx("button", { type: "button", className: "card__turn", "aria-label": which === 'front' ? toBackLabel ?? word('turnToBack') : toFrontLabel ?? word('turnToFront'), onClick: () => ask(which === 'front' ? 'back' : 'front') }), head ? _jsx(CardHead, { heading: heading, caption: caption, end: end, level: level }) : ownHeadKid, _jsx("div", { className: "card__middle", children: which === 'front' ? front : middle }), tail ? _jsx(CardFoot, { link: footLink, children: foot }) : ownFootKid] }, which));
+        return createElement(as, props, inner(_jsxs(_Fragment, { children: [side('front', null), side('back', back)] })));
+    }
     if (!head && !tail)
-        return createElement(as, props, inner(children));
-    return createElement(as, props, inner(_jsxs(_Fragment, { children: [head && _jsx(CardHead, { heading: heading, caption: caption, end: end, level: level }, "head"), Children.toArray(children), tail && _jsx(CardFoot, { link: footLink, children: foot }, "foot")] })));
+        return createElement(as, props, inner(_jsxs(_Fragment, { children: [children, cross] })));
+    return createElement(as, props, inner(_jsxs(_Fragment, { children: [head && _jsx(CardHead, { heading: heading, caption: caption, end: end, level: level }, "head"), Children.toArray(children), tail && _jsx(CardFoot, { link: footLink, children: foot }, "foot"), cross] })));
 }

package/dist/cards/CardParts.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+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. */
@@ -16,10 +16,16 @@ export interface CardEndProps extends ComponentProps<'div'> {
 /** CardEnd — the trailing value + caption, right-aligned (in a head or a row card). */
 export declare function CardEnd({ className, ...rest }: CardEndProps): 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
+     *  saying there is more. The list measures its own rows (they wrap to any height) and keeps the window right when they change. Leave it out and the
+     *  list is as long as its rows and scrolls with what holds it */
+    show?: number;
 }
 /** CardList — a stack of `Card row`s, each its own boundary: a list of things to open or to pick (past requests to reuse). It stands on the base or straight in a sheet's
- *  body and scrolls with it; never inside a card (a card never wraps a card — `cardds check` rule `card-in-card`). Rows inside a card are `Rows`. */
-export declare function CardList({ className, ...rest }: CardListProps): import("react").JSX.Element;
+ *  body and scrolls with it; never inside a card (a card never wraps a card — `cardds check` rule `card-in-card`). Rows inside a card are `Rows`.
+ *  A SHORT WINDOW of past entries under a form (`show={2.5}`): the list scrolls in itself, a few rows in sight; each row a `Card row as="label"` round a radio
+ *  (pick one) with `onRemove` for its corner cross (take it off the list) — the app owns the list, the picked one and what a removal does. */
+export declare function CardList({ show, className, style, ref, ...rest }: CardListProps): import("react").JSX.Element;
 export interface IconRowProps extends ComponentProps<'span'> {
 }
 /** IconRow — a trailing cluster of Icons in a card or stack head. */

package/dist/cards/CardParts.js

@@ -1,4 +1,5 @@
 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. */
 export function CardMedia({ className, ...rest }) {
@@ -17,9 +18,46 @@ export function CardEnd({ className, ...rest }) {
     return _jsx("div", { className: cx('card__end', className), ...rest });
 }
 /** CardList — a stack of `Card row`s, each its own boundary: a list of things to open or to pick (past requests to reuse). It stands on the base or straight in a sheet's
- *  body and scrolls with it; never inside a card (a card never wraps a card — `cardds check` rule `card-in-card`). Rows inside a card are `Rows`. */
-export function CardList({ className, ...rest }) {
-    return _jsx("div", { className: cx('card-list', className), ...rest });
+ *  body and scrolls with it; never inside a card (a card never wraps a card — `cardds check` rule `card-in-card`). Rows inside a card are `Rows`.
+ *  A SHORT WINDOW of past entries under a form (`show={2.5}`): the list scrolls in itself, a few rows in sight; each row a `Card row as="label"` round a radio
+ *  (pick one) with `onRemove` for its corner cross (take it off the list) — the app owns the list, the picked one and what a removal does. */
+export function CardList({ show, className, style, ref, ...rest }) {
+    const own = useRef(null);
+    useLayoutEffect(() => {
+        const list = own.current;
+        if (!list || show == null)
+            return;
+        const fit = () => {
+            const rows = [...list.children];
+            const whole = Math.floor(show);
+            const cut = rows[whole];
+            if (!cut) {
+                list.style.removeProperty('--_card-list-h');
+                return;
+            }
+            const box = cut.getBoundingClientRect();
+            const at = box.top - list.getBoundingClientRect().top + list.scrollTop; // from the list's top edge, wherever it is scrolled
+            list.style.setProperty('--_card-list-h', `${at + (show - whole) * box.height}px`);
+        };
+        fit();
+        const watch = new ResizeObserver(fit);
+        watch.observe(list);
+        for (const row of list.children)
+            watch.observe(row);
+        const rows = new MutationObserver(() => { for (const row of list.children)
+            watch.observe(row); fit(); });
+        rows.observe(list, { childList: true });
+        return () => { watch.disconnect(); rows.disconnect(); };
+    }, [show]);
+    const setRef = (node) => {
+        own.current = node;
+        const passed = ref;
+        if (typeof passed === 'function')
+            passed(node);
+        else if (passed)
+            passed.current = node;
+    };
+    return _jsx("div", { ref: setRef, className: cx('card-list', show != null && 'card-list--window', className), style: style, ...rest });
 }
 /** IconRow — a trailing cluster of Icons in a card or stack head. */
 export function IconRow({ className, ...rest }) {

package/dist/cards/cardGo.d.ts

@@ -1,2 +1,4 @@
 /** the control this card presses when it is touched off that control, or null: the card is only read */
 export declare function goControl(card: HTMLElement): HTMLElement | null;
+/** the press landed on something the member presses inside this card (a Card with a `back` turns only when it did not) */
+export declare function onControl(card: HTMLElement, target: Element): boolean;

package/dist/cards/cardGo.js

@@ -24,6 +24,11 @@ export function goControl(card) {
         return null;
     const foot = control.parentElement;
     const inFoot = foot?.matches('.card__foot') && foot.parentElement?.closest('.card') === card; // the card's OWN foot, also when a part of the card holds it (a FeedCard's region)
-    const atRowEnd = card.matches('.card--row') && card.lastElementChild === control;
+    const atRowEnd = card.matches('.card--row') && card.lastElementChild === control && !control.matches('.card__remove'); // a row's cross takes it off its list: never pressed by a touch elsewhere
     return inFoot || atRowEnd ? control : null;
 }
+/** the press landed on something the member presses inside this card (a Card with a `back` turns only when it did not) */
+export function onControl(card, target) {
+    const control = target.closest(CONTROLS);
+    return control != null && control !== card && card.contains(control);
+}