@usableapp/cardds 0.7.104 → 0.7.105

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 > 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.105 — 2026-10-21
+
+A card foot of big round buttons, and a card drawn as the gallery draws it.
+
+Components: all (a new root token, --tap-xl; the components that change are IconBtn, CardFoot, Card and JourneyBadge)
+
+### Added
+- **Big round buttons, and a foot made of them** (a consumer's ask, approved: a card foot of three big round buttons, one centred group, `IconBtn` only). Before → after: `IconBtn` had two sizes (`sm`, the default 48px) and everything bigger was the knob `--icon-btn-size`, whose icon stayed 28px, with no primary fill and no ceiling for a word at a big text size; a card foot could only share its line between `Btn`s. Now: `IconBtn size="lg"` (56px, `--tap-lg`) and `size="xl"` (68px, the new `--tap-xl`), all on `--tap-base` like the other sizes (knobs `--icon-btn-lg-size`, `--icon-btn-xl-size`; `--icon-btn-size` and `sm` as before); in `lg` and `xl` the icon is a share of the circle (`--icon-btn-icon`, 7 / 12 by default, the share the 48px button's 28px icon has) and a short word child grows with the text size up to `--icon-btn-word-max` of the circle (0.45) and no further; `IconBtn primary` is the primary `Btn`'s fill from the same tokens (`--btn-primary-bg` / `--btn-primary-ink`, orchard's yellow included), beside `invert`, the accent; `CardFoot round` (on a `Card`: `footRound`) is the foot of a few round buttons: each keeps its size, they stand as one group in the middle with a gap of `--sp-6` (`--card-foot-gap` sets it), on a turning two-tone card too. The Btn foot, the default and `sm` buttons, and every story drawn before are unchanged (style snapshot identical). The script answers `all` because the new root token `--tap-xl` is in tokens.css; what a consumer sees change is only `IconBtn`, `CardFoot` and `Card`, and only where the new props are used. Stories: `IconBtn/Rounds`, `IconBtn/Primary`, `IconBtn/WordAndIconKnobs`, `Card/CardFootRound`, `Card/TurnsRoundFoot`.
+
+### Fixed
+- **A card as the gallery draws it, on a phone too: the title stops at three lines, the date keeps its own height, a turning card hugs its faces** (timebank's help card on a phone, 2026-10-21: "ต้นแบบออกแบบไว้ดี แต่งานจริง เละ"). Components: BtnTrio, CallSheet, Card, CardFeed, CardHead, FeedCard, Home, JourneyBadge, Modal, ModalAsk, ModalBody, NumberBand, NumberBandStack, Sheet, SheetStack, StackSheet, Walkthrough (`node scripts/components-changed.mjs`: every piece that draws a card's head, for the three-line title). Nothing for a consumer to change.
+  - **A card's title: three lines at most** (Lh 2026-10-21: "มันควรจะ max สามบรรทัด"; reverses 2026-09-16's "no clamp"). Before → after: the heading in a card's own head wrapped to as many lines as its words took (a request's title ran to five lines on a phone) → it is cut after three lines with an ellipsis. Knob `--card-head-title-lines` (3).
+  - **`JourneyBadge stretch`: no taller than its own three lines.** Before → after: as tall as the title block beside it, so beside a long title the date was a tall block with its words in the middle → as tall as the title block up to its three lines (day · number · month, `--sp-3` above and below), at the head's top. It turns to three lines from 3.5rem of room (was 5.5rem), so a two-line title gets them, as the 2026-10-19 rule said. A one-line title: unchanged (64.7 at 375).
+  - **`Card back`: the card is as tall as its taller face.** Before → after: the middle was one fixed height on both faces (`--card-middle-h`, default 6.25 taps, 275 at 375), so a short front and a short back (a request and its code) stood in a tall empty band → each face fills the card's height and the middle takes what the head and the foot leave, so the card hugs the taller face and still never changes height as it turns. `--card-middle-h` still fixes the middle where a theme sets it; its default is now `auto`. The face is a flex column (was a grid). New story `Card · TurnsLongTitle`; tests/card-turns.spec.js.
+  - What the style snapshot of the 492 stories moved: every heading in a card's head computes `display: flow-root` and `overflow: hidden`, with 0.2em of room over its first line given back by a negative margin (a stacked Thai mark rises over the line's box and the clip would cut it), so the words stand where they stood in all 262 such stories; `Card · LongHeading` and `CardHead · CardHeadTop` are cut to three lines (28 and 55 shorter); `Card · Turns`, `TurnsTwoLineTitle` and `TurnsControlled` are 25 shorter (the middle hugs the taller face, no longer 6.25 taps); the date in `Turns`, `TurnsControlled` and `PaperBands` keeps its size (only its new cap shows), `TurnsTwoLineTitle`'s is 81 (was 128); `SheetStack · Display` moves by 0.02px (its heading's own margin takes the room back).
+
 ## 0.7.104 — 2026-10-21
 
 Every value a component shows comes from a token, so what the gallery shows is what a theme gets (Lh 2026-10-20). Also: the gallery shows every foundation token, the catalog finds a piece by a plain intention, the number pieces are ruled (Stat and Tile stat drop as twins of NumberBand and KvCell), and CSS and JS written twice are written once.

package/css/actions.css

@@ -82,6 +82,14 @@
 }
 .icon-btn--invert { background: var(--icon-btn-invert-bg, var(--accent)); color: var(--icon-btn-invert-ink, var(--on-accent)); border-color: transparent; }
 .icon-btn--sm { width: var(--icon-btn-sm-size, var(--tap-sm)); height: var(--icon-btn-sm-size, var(--tap-sm)); font-size: var(--fs-title); }
+/* the bigger round sizes (`IconBtn size`): lg is the hero control's size (--tap-lg), xl the biggest (--tap-xl), both on --tap-base like every size.
+   What stands inside is a share of the circle (`--_ib`, its side), so it grows with it: the ICON is --icon-btn-icon of the side (7/12, the share of the default 48px
+   button's 28px icon), and a WORD (a string child) keeps to --icon-btn-word-max of the side (0.45: a word of four letters stays inside) — it still
+   grows with the member's text size, to that ceiling and no further. The default and the sm button keep their icon tokens and their word as before. */
+.icon-btn--lg { --_ib: var(--icon-btn-lg-size, var(--tap-lg)); width: var(--_ib); height: var(--_ib); }
+.icon-btn--xl { --_ib: var(--icon-btn-xl-size, var(--tap-xl)); width: var(--_ib); height: var(--_ib); }
+:is(.icon-btn--lg, .icon-btn--xl) { font-size: min(var(--fs-lg), calc(var(--_ib) * var(--icon-btn-word-max, 0.45))); }
+:is(.icon-btn--lg, .icon-btn--xl) > .icon { --icon-size: calc(var(--_ib) * var(--icon-btn-icon, 7 / 12)); --icon-sm-size: var(--icon-size); --icon-lg-size: var(--icon-size); } /* the Icon's own knobs */
 /* ---- icon button group: up to four icon-only commands in ONE frame (Lh 2026-09-29) ----
    <div class="icon-btn-group" role="group"><button class="icon-btn" aria-label="…">…</button>…</div>
    One pill as tall as a button, the buttons share its width, a hairline between them; in a foot it takes the row. */
@@ -139,7 +147,8 @@
   min-height: var(--btn-h);
   text-decoration: none; /* .btn works as <a> too */
 }
-.btn--primary { background: var(--btn-primary-bg, var(--accent)); color: var(--btn-primary-ink, var(--on-accent)); border-color: transparent; }
+/* primary: a Btn and a round IconBtn fill alike, from the same tokens (the palette's primary — orchard's yellow — retunes both) */
+:is(.btn--primary, .icon-btn--primary) { background: var(--btn-primary-bg, var(--accent)); color: var(--btn-primary-ink, var(--on-accent)); border-color: transparent; }
 /* quiet keeps a faint outline so it still reads as a button on colored palettes;
    it is ink on whatever it sits on — inherit, or on the dark slot (card--3) it
    would take the light-card action ink and vanish */

package/css/card.css

@@ -75,12 +75,23 @@
 .card__head > :is(h1, h2, h3, div, p):first-child { flex: 1; min-width: 0; }
 
 /* Skeleton head — the heading in a card's OWN head, and only there.
-   The heading wraps freely: no line budget, no squeeze, no clamp (Lh
-   2026-09-16 — a height rule on words only distorts them; content that needs
-   more rows takes more rows). The group that holds heading ·
+   The heading wraps, no squeeze, up to three lines and cut there with an
+   ellipsis (Lh 2026-10-21: "มันควรจะ max สามบรรทัด" — a request's title ran to
+   four lines on a phone; reverses 2026-09-16's "no clamp"). The count is the knob
+   --card-head-title-lines. The group that holds heading ·
    caption is the head's own wrapping row (above) — no wrapper element, no
    height, only the row gap. */
-.card__head :is(h1, h2, h3) { overflow-wrap: anywhere; }
+.card__head :is(h1, h2, h3) {
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--card-head-title-lines, 3);
+  line-clamp: var(--card-head-title-lines, 3);
+  overflow: hidden;
+  padding-block-start: var(--_mark-room); /* a stacked Thai mark rises over the first line's box: room inside the clip, given back outside */
+  margin-block-start: calc(-1 * var(--_mark-room));
+  --_mark-room: 0.2em;
+}
 
 /* a Stamp in a card's head (`Card end={<Stamp …/>}`): the words stand at the left, the stamp at the right BESIDE BOTH LINES — the heading and the
    caption pair up beside it, not the stamp beside the heading alone with the caption left under it. The stamp is its own size (--stamp-size,
@@ -115,12 +126,14 @@
 
 /* ---- 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
+   faces; the card is as tall as its taller face and each face fills it, the middle taking what the head and the foot leave (2026-10-21,
+   timebank: a fixed middle left a short front a tall empty band), so the card never changes height as it turns; --card-middle-h fixes
+   the middle's height instead, the theme's call. 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;
+  display: flex;
+  flex-direction: column;
   gap: var(--card-gap);
   min-width: 0;
   padding: var(--card-pad);
@@ -131,7 +144,7 @@
   position: relative;
 }
 .card__face > * { min-width: 0; }
-.card__middle { display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, calc(var(--tap-base) * 25 / 4)); overflow: hidden; }
+.card__middle { flex: 1 0 auto; display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, auto); overflow: hidden; }
 .card__turn { position: absolute; inset: 0; width: var(--px); height: var(--px); 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)); }
 .card__head > .chip-row > .chip > .icon { --icon-display: inline-block; --icon-align: -0.15em; --icon-margin: 0 var(--chip-sm-gap, var(--sp-1)) 0 0; }
@@ -183,6 +196,9 @@
    whole short row of its own, centred — it never shares the buttons' line */
 .card__foot--link { flex-wrap: wrap; align-content: end; row-gap: var(--card-foot-link-gap, var(--sp-1)); }
 .card__foot-link { flex: 1 0 100%; display: flex; justify-content: center; }
+/* round (CardFoot round): the foot holds a few round IconBtns, each its own size (they never share the line), as ONE group in the middle with
+   a gap that does not follow the card's width. The gap is wider than the Btns' (a miss between two round targets): --card-foot-gap sets it */
+.card__foot--round { justify-content: center; gap: var(--card-foot-gap, var(--sp-6)); }
 
 /* media placeholder for wireframes — currentColor so it survives any palette */
 .ph {

package/css/finish.css

@@ -76,7 +76,7 @@
 }
 /* the main button throws its own colour */
 [data-finish="lit"] .btn--primary,
-[data-finish="lit"] .icon-btn--invert:not(.icon-btn-group > *) {
+[data-finish="lit"] :is(.icon-btn--invert, .icon-btn--primary):not(.icon-btn-group > *) {
   box-shadow: var(--finish-edge),
     0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 20%, transparent),
     0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);

package/css/journey.css

@@ -51,9 +51,11 @@
 
 /* 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. */
+   over the number and the month on one line; tall (a two-line title) = three lines, day · number · month. It grows no taller than
+   its three lines (2026-10-21, timebank: beside a four-line title it was a tall empty block); held there, it stands at the head's top. */
 .tile-badge--stretch {
   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);
   grid-template-columns: auto auto;
@@ -67,7 +69,7 @@
 }
 .tile-badge--stretch > * { line-height: inherit; }
 .tile-badge--stretch > :first-child { grid-column: 1 / -1; }
-@container (min-height: 5.5rem) {
+@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; }
 }
 

package/css/palette.css

@@ -98,7 +98,7 @@
 [data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: var(--ink-onlight); }
 [data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: var(--ink-onlight); }
 /* the vivid ones, tried on the live parts (Lh 2026-09-25): primary = yellow · a user avatar = fuchsia · ring = sky · a switch on = sky · maple only on small dots (the count, dot a); the chosen stack tab stays moss */
-[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, var(--ink-onlight)); }
+[data-palette="orchard"] :is(.btn--primary, .icon-btn--primary) { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, var(--ink-onlight)); }
 [data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); --dark: 1; }
 [data-palette="orchard"] .ring::before { background: conic-gradient(var(--highlight-3) calc(var(--value) * 1%), var(--ink-tint) 0); }
 [data-palette="orchard"] .toggle:checked { background: var(--highlight-3); --accent-dark: 0; } /* sky is a light ground: its knob is onlight */

package/css/stack.css

@@ -90,7 +90,7 @@
   letter-spacing: var(--track-display);
   /* the FIRST line sits on the centre of the peek strip (--stack-step tall,
      measured from the card's top edge); line two runs under the next card */
-  margin-top: calc((var(--stack-step) - 1lh) / 2 - var(--sp-5));
+  margin-top: calc((var(--stack-step) - 1lh) / 2 - var(--sp-5) - var(--_mark-room)); /* --_mark-room: card.css, the room for the marks over line one */
 }
 /* fanned stack: a toggle opens the stack wider so every peek shows more */
 .sheet-stack--fanned { --stack-step: calc(var(--tap-base) * 19 / 6); }

package/css/tokens.css

@@ -47,6 +47,7 @@
   --tap: max(var(--tap-floor), var(--tap-base));                       /* 48 primary touch target */
   --tap-sm: max(var(--tap-floor), calc(var(--tap-base) * 11 / 12));    /* 44 minimum touch target */
   --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: send, field with action */
+  --tap-xl: max(var(--tap-floor), calc(var(--tap-base) * 17 / 12));    /* 68 the biggest round control: a foot of a few big round buttons (IconBtn xl) */
   --btn-h: calc(var(--tap-base) * 13 / 12);   /* 52 button height */
   --btn-xl-h: calc(var(--tap-base) * 11 / 6); /* 88 the one giant CTA */
   --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */

package/dist/actions/IconBtn.d.ts

@@ -5,17 +5,26 @@ export interface IconBtnProps extends ComponentProps<'button'> {
     label: string;
     /** the icon to show (sized to the button); or pass an Icon as children */
     icon?: IconName;
-    /** 40px, for a card head or a top bar; default 48px */
+    /** 40px, for a card head or a top bar; default 48px (the short form of `size="sm"`) */
     sm?: boolean;
+    /** the round sizes, all on `--tap-base`: `sm` (44) · default (48) · `lg` (56, the hero control) · `xl` (68, the biggest — a card foot of a few big
+     *  round buttons). In `lg` and `xl` the icon is a share of the circle (knob `--icon-btn-icon`) and a word child keeps inside it
+     *  (knob `--icon-btn-word-max`). Each size has its knob: `--icon-btn-lg-size`, `--icon-btn-xl-size` */
+    size?: 'sm' | 'lg' | 'xl';
     /** filled accent (the forward arrow, the send button) */
     invert?: boolean;
+    /** filled with the primary Btn's fill (the palette's primary, `--btn-primary-bg`): the one answer, on a card whose foot is round buttons.
+     *  `invert` is the accent, `primary` the primary — the same fill on the wireframe, two on a palette that gives them two colours */
+    primary?: boolean;
     /** a link styled as a round button */
     href?: string;
 }
-/** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move.
+/** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move, `primary` for the
+ *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<CardFoot round>`); a short WORD may stand in one
+ *  as its child (`<IconBtn size="xl" primary label="ช่วยเหลือ">ช่วย</IconBtn>`): it grows with the member's text size up to the circle's share.
  *  It is a button and nothing more: to open a Menu, give it the platform's `popoverTarget={the Menu's id}` and render that `<Menu popover actions id>`
  *  wherever you like — the panel anchors to the button that opened it. To open anything else, `onClick`. */
-export declare function IconBtn({ label, icon, sm, invert, href, className, type, children, ...rest }: IconBtnProps): import("react").DetailedReactHTMLElement<{
+export declare function IconBtn({ label, icon, sm, size, invert, primary, href, className, type, children, ...rest }: IconBtnProps): import("react").DetailedReactHTMLElement<{
     ref?: import("react").Ref<HTMLButtonElement> | undefined;
     key?: import("react").Key | null | undefined;
     disabled?: boolean | undefined;

package/dist/actions/IconBtn.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement } from 'react';
 import { cx } from '../cx.js';
+import { warnOnce } from '../state.js';
 import { Icon } from '../type/Icon.js';
-/** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move.
+/** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move, `primary` for the
+ *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<CardFoot round>`); a short WORD may stand in one
+ *  as its child (`<IconBtn size="xl" primary label="ช่วยเหลือ">ช่วย</IconBtn>`): it grows with the member's text size up to the circle's share.
  *  It is a button and nothing more: to open a Menu, give it the platform's `popoverTarget={the Menu's id}` and render that `<Menu popover actions id>`
  *  wherever you like — the panel anchors to the button that opened it. To open anything else, `onClick`. */
-export function IconBtn({ label, icon, sm, invert, href, className, type, children, ...rest }) {
-    const btn = createElement(href ? 'a' : 'button', { href, type: href ? undefined : type ?? 'button', 'aria-label': label, className: cx('icon-btn', sm && 'icon-btn--sm', invert && 'icon-btn--invert', className), ...rest }, icon ? _jsx(Icon, { name: icon, size: sm ? 'sm' : 'md' }) : children);
+export function IconBtn({ label, icon, sm, size, invert, primary, href, className, type, children, ...rest }) {
+    if (invert && primary)
+        warnOnce('icon-btn-fill', 'cardds IconBtn: `invert` and `primary` together — two fills for one button; `primary` is drawn');
+    const step = size ?? (sm ? 'sm' : undefined);
+    const btn = createElement(href ? 'a' : 'button', { href, type: href ? undefined : type ?? 'button', 'aria-label': label, className: cx('icon-btn', step && `icon-btn--${step}`, invert && 'icon-btn--invert', primary && 'icon-btn--primary', className), ...rest }, icon ? _jsx(Icon, { name: icon, size: step === 'sm' ? 'sm' : 'md' }) : children);
     return btn;
 }

package/dist/cardds.css

@@ -88,6 +88,7 @@
   --tap: max(var(--tap-floor), var(--tap-base));                       /* 48 primary touch target */
   --tap-sm: max(var(--tap-floor), calc(var(--tap-base) * 11 / 12));    /* 44 minimum touch target */
   --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: send, field with action */
+  --tap-xl: max(var(--tap-floor), calc(var(--tap-base) * 17 / 12));    /* 68 the biggest round control: a foot of a few big round buttons (IconBtn xl) */
   --btn-h: calc(var(--tap-base) * 13 / 12);   /* 52 button height */
   --btn-xl-h: calc(var(--tap-base) * 11 / 6); /* 88 the one giant CTA */
   --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */
@@ -525,7 +526,7 @@
 [data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: var(--ink-onlight); }
 [data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: var(--ink-onlight); }
 /* the vivid ones, tried on the live parts (Lh 2026-09-25): primary = yellow · a user avatar = fuchsia · ring = sky · a switch on = sky · maple only on small dots (the count, dot a); the chosen stack tab stays moss */
-[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, var(--ink-onlight)); }
+[data-palette="orchard"] :is(.btn--primary, .icon-btn--primary) { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, var(--ink-onlight)); }
 [data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); --dark: 1; }
 [data-palette="orchard"] .ring::before { background: conic-gradient(var(--highlight-3) calc(var(--value) * 1%), var(--ink-tint) 0); }
 [data-palette="orchard"] .toggle:checked { background: var(--highlight-3); --accent-dark: 0; } /* sky is a light ground: its knob is onlight */
@@ -999,12 +1000,23 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .card__head > :is(h1, h2, h3, div, p):first-child { flex: 1; min-width: 0; }
 
 /* Skeleton head — the heading in a card's OWN head, and only there.
-   The heading wraps freely: no line budget, no squeeze, no clamp (Lh
-   2026-09-16 — a height rule on words only distorts them; content that needs
-   more rows takes more rows). The group that holds heading ·
+   The heading wraps, no squeeze, up to three lines and cut there with an
+   ellipsis (Lh 2026-10-21: "มันควรจะ max สามบรรทัด" — a request's title ran to
+   four lines on a phone; reverses 2026-09-16's "no clamp"). The count is the knob
+   --card-head-title-lines. The group that holds heading ·
    caption is the head's own wrapping row (above) — no wrapper element, no
    height, only the row gap. */
-.card__head :is(h1, h2, h3) { overflow-wrap: anywhere; }
+.card__head :is(h1, h2, h3) {
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--card-head-title-lines, 3);
+  line-clamp: var(--card-head-title-lines, 3);
+  overflow: hidden;
+  padding-block-start: var(--_mark-room); /* a stacked Thai mark rises over the first line's box: room inside the clip, given back outside */
+  margin-block-start: calc(-1 * var(--_mark-room));
+  --_mark-room: 0.2em;
+}
 
 /* a Stamp in a card's head (`Card end={<Stamp …/>}`): the words stand at the left, the stamp at the right BESIDE BOTH LINES — the heading and the
    caption pair up beside it, not the stamp beside the heading alone with the caption left under it. The stamp is its own size (--stamp-size,
@@ -1039,12 +1051,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- 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
+   faces; the card is as tall as its taller face and each face fills it, the middle taking what the head and the foot leave (2026-10-21,
+   timebank: a fixed middle left a short front a tall empty band), so the card never changes height as it turns; --card-middle-h fixes
+   the middle's height instead, the theme's call. 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;
+  display: flex;
+  flex-direction: column;
   gap: var(--card-gap);
   min-width: 0;
   padding: var(--card-pad);
@@ -1055,7 +1069,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   position: relative;
 }
 .card__face > * { min-width: 0; }
-.card__middle { display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, calc(var(--tap-base) * 25 / 4)); overflow: hidden; }
+.card__middle { flex: 1 0 auto; display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, auto); overflow: hidden; }
 .card__turn { position: absolute; inset: 0; width: var(--px); height: var(--px); 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)); }
 .card__head > .chip-row > .chip > .icon { --icon-display: inline-block; --icon-align: -0.15em; --icon-margin: 0 var(--chip-sm-gap, var(--sp-1)) 0 0; }
@@ -1107,6 +1121,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    whole short row of its own, centred — it never shares the buttons' line */
 .card__foot--link { flex-wrap: wrap; align-content: end; row-gap: var(--card-foot-link-gap, var(--sp-1)); }
 .card__foot-link { flex: 1 0 100%; display: flex; justify-content: center; }
+/* round (CardFoot round): the foot holds a few round IconBtns, each its own size (they never share the line), as ONE group in the middle with
+   a gap that does not follow the card's width. The gap is wider than the Btns' (a miss between two round targets): --card-foot-gap sets it */
+.card__foot--round { justify-content: center; gap: var(--card-foot-gap, var(--sp-6)); }
 
 /* media placeholder for wireframes — currentColor so it survives any palette */
 .ph {
@@ -1721,7 +1738,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   letter-spacing: var(--track-display);
   /* the FIRST line sits on the centre of the peek strip (--stack-step tall,
      measured from the card's top edge); line two runs under the next card */
-  margin-top: calc((var(--stack-step) - 1lh) / 2 - var(--sp-5));
+  margin-top: calc((var(--stack-step) - 1lh) / 2 - var(--sp-5) - var(--_mark-room)); /* --_mark-room: card.css, the room for the marks over line one */
 }
 /* fanned stack: a toggle opens the stack wider so every peek shows more */
 .sheet-stack--fanned { --stack-step: calc(var(--tap-base) * 19 / 6); }
@@ -2830,9 +2847,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* 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. */
+   over the number and the month on one line; tall (a two-line title) = three lines, day · number · month. It grows no taller than
+   its three lines (2026-10-21, timebank: beside a four-line title it was a tall empty block); held there, it stands at the head's top. */
 .tile-badge--stretch {
   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);
   grid-template-columns: auto auto;
@@ -2846,7 +2865,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .tile-badge--stretch > * { line-height: inherit; }
 .tile-badge--stretch > :first-child { grid-column: 1 / -1; }
-@container (min-height: 5.5rem) {
+@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; }
 }
 
@@ -2947,6 +2966,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .icon-btn--invert { background: var(--icon-btn-invert-bg, var(--accent)); color: var(--icon-btn-invert-ink, var(--on-accent)); border-color: transparent; }
 .icon-btn--sm { width: var(--icon-btn-sm-size, var(--tap-sm)); height: var(--icon-btn-sm-size, var(--tap-sm)); font-size: var(--fs-title); }
+/* the bigger round sizes (`IconBtn size`): lg is the hero control's size (--tap-lg), xl the biggest (--tap-xl), both on --tap-base like every size.
+   What stands inside is a share of the circle (`--_ib`, its side), so it grows with it: the ICON is --icon-btn-icon of the side (7/12, the share of the default 48px
+   button's 28px icon), and a WORD (a string child) keeps to --icon-btn-word-max of the side (0.45: a word of four letters stays inside) — it still
+   grows with the member's text size, to that ceiling and no further. The default and the sm button keep their icon tokens and their word as before. */
+.icon-btn--lg { --_ib: var(--icon-btn-lg-size, var(--tap-lg)); width: var(--_ib); height: var(--_ib); }
+.icon-btn--xl { --_ib: var(--icon-btn-xl-size, var(--tap-xl)); width: var(--_ib); height: var(--_ib); }
+:is(.icon-btn--lg, .icon-btn--xl) { font-size: min(var(--fs-lg), calc(var(--_ib) * var(--icon-btn-word-max, 0.45))); }
+:is(.icon-btn--lg, .icon-btn--xl) > .icon { --icon-size: calc(var(--_ib) * var(--icon-btn-icon, 7 / 12)); --icon-sm-size: var(--icon-size); --icon-lg-size: var(--icon-size); } /* the Icon's own knobs */
 /* ---- icon button group: up to four icon-only commands in ONE frame (Lh 2026-09-29) ----
    <div class="icon-btn-group" role="group"><button class="icon-btn" aria-label="…">…</button>…</div>
    One pill as tall as a button, the buttons share its width, a hairline between them; in a foot it takes the row. */
@@ -3004,7 +3031,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   min-height: var(--btn-h);
   text-decoration: none; /* .btn works as <a> too */
 }
-.btn--primary { background: var(--btn-primary-bg, var(--accent)); color: var(--btn-primary-ink, var(--on-accent)); border-color: transparent; }
+/* primary: a Btn and a round IconBtn fill alike, from the same tokens (the palette's primary — orchard's yellow — retunes both) */
+:is(.btn--primary, .icon-btn--primary) { background: var(--btn-primary-bg, var(--accent)); color: var(--btn-primary-ink, var(--on-accent)); border-color: transparent; }
 /* quiet keeps a faint outline so it still reads as a button on colored palettes;
    it is ink on whatever it sits on — inherit, or on the dark slot (card--3) it
    would take the light-card action ink and vanish */
@@ -6012,7 +6040,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 /* the main button throws its own colour */
 [data-finish="lit"] .btn--primary,
-[data-finish="lit"] .icon-btn--invert:not(.icon-btn-group > *) {
+[data-finish="lit"] :is(.icon-btn--invert, .icon-btn--primary):not(.icon-btn-group > *) {
   box-shadow: var(--finish-edge),
     0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 20%, transparent),
     0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);

package/dist/cards/Card.d.ts

@@ -43,6 +43,8 @@ export interface CardProps extends ComponentProps<'article'> {
     foot?: ReactNode;
     /** the small Link under the foot's buttons (CardFoot `link`) */
     footLink?: ReactNode;
+    /** the foot is a few big ROUND buttons (CardFoot `round`): `foot` holds `IconBtn`s, stood as one centred group a fixed gap apart */
+    footRound?: boolean;
     /** set by `SheetStack` from the app's `open` and `refreshing`. The card renders its place, its grip and its pull. Leave it unset on any other card */
     stack?: StackPlace;
     /** THE CARD LEAVES — the card floats away: up and out with a small turn, as one piece with all it holds (a stamp that has just landed on it goes with it).
@@ -59,8 +61,8 @@ export interface CardProps extends ComponentProps<'article'> {
     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.
+     *  either way; the children are the front's middle, `back` the back's. The card is as tall as its taller face and each face fills it, the middle taking
+     *  what is left, so the card never changes height when it turns (knob `--card-middle-h` fixes the middle's height instead). 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 */
@@ -87,7 +89,7 @@ export interface CardProps extends ComponentProps<'article'> {
  * 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"`: paper 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, onRemove, removeLabel, back, face, defaultFace, onFaceChange, toBackLabel, toFrontLabel, 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, footRound, 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

@@ -19,7 +19,7 @@ import { StackHeadCtx, StackPullCtx, ownHead, stackPaint, useStackCard } from '.
  * 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"`: paper 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, onRemove, removeLabel, back, face, defaultFace = 'front', onFaceChange, toBackLabel, toFrontLabel, 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, footRound, 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))
@@ -118,10 +118,10 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
         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));
+        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, round: footRound, 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(_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] })));
+    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, round: footRound, children: foot }, "foot"), cross] })));
 }

package/dist/cards/CardFoot.d.ts

@@ -3,8 +3,13 @@ export interface CardFootProps extends ComponentProps<'div'> {
     /** a SMALL LINK under the buttons, centred on its own short row (a `Link sm` — "details for developers") — the same as an
      *  ActionBar's ctaLink (Lh 2026-09-23). It never takes a share of the buttons' line */
     link?: ReactNode;
+    /** a foot of a few ROUND buttons (`IconBtn`, a size `lg` / `xl` for the big ones): they keep their own size instead of sharing the line, and
+     *  stand as ONE group in the middle of the foot, a fixed gap apart (wider than the Btns' — `--card-foot-gap` sets it). The Btn foot is
+     *  unchanged: this is the other foot, for a few big round answers */
+    round?: boolean;
 }
 /** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
  *  link goes in `link`, under it. A `Btn form` keeps its own size here: as wide as its words, centred — for a foot whose one button
- *  should not fill the card. */
-export declare function CardFoot({ link, className, children, ...rest }: CardFootProps): import("react").JSX.Element;
+ *  should not fill the card. With `round` it is the foot of a few round `IconBtn`s (`size="xl"`, one `primary` with a word, the others
+ *  with icons): one centred group, a fixed gap between them. */
+export declare function CardFoot({ link, round, className, children, ...rest }: CardFootProps): import("react").JSX.Element;

package/dist/cards/CardFoot.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
  *  link goes in `link`, under it. A `Btn form` keeps its own size here: as wide as its words, centred — for a foot whose one button
- *  should not fill the card. */
-export function CardFoot({ link, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('card__foot', link != null && 'card__foot--link', className), ...rest, children: [children, link != null && _jsx("div", { className: "card__foot-link", children: link })] }));
+ *  should not fill the card. With `round` it is the foot of a few round `IconBtn`s (`size="xl"`, one `primary` with a word, the others
+ *  with icons): one centred group, a fixed gap between them. */
+export function CardFoot({ link, round, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('card__foot', link != null && 'card__foot--link', round && 'card__foot--round', className), ...rest, children: [children, link != null && _jsx("div", { className: "card__foot-link", children: link })] }));
 }