@usableapp/cardds 0.7.80 → 0.7.82

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
 
+## 0.7.82 — 2026-10-10
+
+### Changed
+- **The edge of a `StampPlace` is round dots, close together** (Lh 2026-10-10: the dashes stood too far apart) — before → after: a stroke of 8px dashes with a gap of 12px → 2px round dots with 4px clear between them (a pitch of 6px from one centre to the next), still round at `--stamp-place-radius`, the same colours (`--stamp-place-border`, `--stamp-place-faint-border`, a card's muted ink), the same 4:5 size, the words and icon inside where they were. The ring closes wherever its length ends, so one gap, at the top left, is a little shorter or longer than the rest. A project that set `--stamp-place-dash` and `--stamp-place-gap` for 0.7.77's dashes keeps them, now with round ends (each dash is longer by one dot, each gap shorter by one dot); unset them for dots.
+
+### Added
+- **`--stamp-place-dot`** — how wide each dot of a `StampPlace`'s edge is (default `--rule-w`). The place's clear border, the edge's inset and its corner follow it, so the dots' outer edge stays the box's edge and the words stay where they are.
+
+### Fixed
+- **`docs/knobs.md` listed 13 knobs too few** — a knob whose default is a `calc()` with a `var()` inside (`--btn-form-pad-x`, `--card-head-stamp-w`, `--stack-back-size`…) was missed by `npm run knobs`, so the doc and the knob test never saw it. The script now reads one more level of brackets.
+
+## 0.7.81 — 2026-10-10
+
+### Added
+- **`IconBtnGroup form` and `form labelled`: a small panel of its own width in the middle, with its words** (Lh 2026-10-10, from timebank's make-stamp page: two chevrons walking nine ground colours stretched over the whole column, with no words) — before → after: an `IconBtnGroup` as a child of a `Page`, a `Centre` or a `CtaPack` was always the column's full width, and its `label` was spoken only, so "words + a small control" had to be hand-laid → `form` makes the panel as wide as its buttons (each one tap, `--icon-btn-group-form-min-w`; a button with a word beside its icon is as wide as the word) and stands it in the middle of its column the way a `Btn form` is; a card's or a sheet's foot no longer stretches it. `labelled` (with `form`) SHOWS the `label` as words at the panel's left: one line, centred together, the words in the label's type and plain ink outside the frame, the gap `--icon-btn-group-gap` (default `--sp-3`), the group named by those words. Where the line is too narrow (a long label, 160% text on a 320px phone) the words wrap above the panel and both stay centred. To use it: `<IconBtnGroup form labelled label="เปลี่ยนสีพื้น"><IconBtn icon="chevron-left" label="สีก่อนหน้า" onClick={…} /><IconBtn icon="chevron-right" label="สีถัดไป" onClick={…} /></IconBtnGroup>`; without the words, `<IconBtnGroup form label="…">`. With `labelled` the root is the line that holds the words and the panel (`className`, `style`, `ref` and the knobs go there). `form` with `vertical` keeps `form` and warns; `labelled` without `form` (or without a `label`) warns and draws no words. Without `form` nothing changes. Stories `IconBtnGroup · Form`, `FormInAFoot`, `FormInASheetFoot`, `FormInACentre`, `FormInACtaPack`, `FormLongWords`; `StampScreens · MakeStamp` now walks its ground with it.
+
+### Fixed
+- **A card in a sheet's body folded the sheet when its heading was clicked** (timebank, 2026-10-10) — before → after: a neighbour `Card heading caption foot={<Btn/>}` written inside an open `StackSheet` (or `Home` sheet) ran its button on a click on its heading, and the same click folded the sheet, because the sheet took any heading under it for its own title; a pull down that began on that heading asked for no refresh (`onRefresh`), because any head under the sheet's body was refused; and the stack's head styling reached the nested card's head (`position: relative`, a `padding-left` transition). → only the sheet's own title folds it, its own back button closes it, a pull may begin on a nested card's heading and asks for the refresh, and a nested card's head is the card's as anywhere. A click on the nested card's heading, caption or empty room presses its one button and the sheet stays open. The heads of the cards resting in a closed stack's `base` lose the same `position: relative`; nothing in them was placed by it. Nothing to change in a screen. Story `SheetStack · CardInSheet`.
+
 ## 0.7.80 — 2026-10-10
 
 ### Changed

package/README.md

@@ -487,7 +487,12 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
     paragraph. Frameless, per rule 9.
   - **Foot** (`.card__foot`): the card's action buttons on one line. One
     button takes the width; up to four share it in even parts; from three
-    on they drop their side padding so the labels keep the room.
+    on they drop their side padding so the labels keep the room. A panel of
+    up to four icon buttons (`IconBtnGroup`) takes the foot the same way; with
+    `form` it is as wide as its buttons (one tap each) and stands in the middle,
+    as `Btn form` does — in a foot, a `Page`, a `Centre` or a `CtaPack` — and
+    with `form labelled` its `label` is SHOWN as words at its left, the two
+    centred as one line (Lh 2026-10-10).
   - In React the head and the foot are the card's **slots**:
     `<Card heading caption end foot footLink>` with the content as children —
     the card writes the order (head first, foot last). A head of its own shape
@@ -574,9 +579,11 @@ it up. cardds draws the paper; the pictures, their words and which stamp a membe
   same list and the same `--sticky-<tone>-bg` knobs as a note's paper). `name` is the big line on the picture's foot,
   `words` the small line above it. `tilt` turns it, `onClick` makes the whole stamp a button. It fills its column up to
   `--stamp-max-w`, and every inner length follows its width, so one stamp reads in a tray and in a sheet.
-- **`StampPlace`** — an empty dashed place the size of a stamp: a word inside, `onClick` for "make yours", `faint` for a
-  gap nobody is asked to fill. The edge is a drawn stroke, so its dashes are yours: `--stamp-place-dash` and
-  `--stamp-place-gap` (defaults 8px and 12px), its corner is `--stamp-place-radius`.
+- **`StampPlace`** — an empty place the size of a stamp, its edge a ring of round dots: a word inside, `onClick` for "make
+  yours", `faint` for a gap nobody is asked to fill. The edge is a drawn stroke, so the dots are yours: `--stamp-place-dot`
+  is how wide each is (default `--rule-w`, 2px), `--stamp-place-gap` the distance from one dot's centre to the next
+  (default 6px), and a `--stamp-place-dash` above 0 stretches each dot into a round-ended dash. Its corner is
+  `--stamp-place-radius`. The dots' outer edge is the box's edge whatever their width.
 - **`StampBook`** + **`StampCell`** — the album page: cells three across on an album ground, a `label` under each stamp,
   the free places drawn up to `places`. A cell with `onClick` is a button; `on` marks it pressed. `strip` is one line
   of small stamps that scrolls sideways, the tray a member picks from. A `false` or `null` child holds no place.
@@ -751,7 +758,9 @@ question and hunts for its answer. Rules 11–13 serve that:
     receipt: items left, prices right; `.card__head`, `.kv`, `.row`); centred
     only what is not read — dots, a lone number, an icon, a mark. Empty room is
     not filled with more content; a new edge is made instead (line the buttons
-    up with the avatar).
+    up with the avatar). One exception: a small control with its own words
+    (`IconBtnGroup form labelled`) is one centred line — the words name the
+    control, they are not content to be read.
 12. **Show, don't explain.** Where a known picture carries it — an avatar for a
     person, an icon, a `Ring`/`Track`/`NumberBand`, a `Chip` for a category — use it
     instead of words. Never add a label, a caption line, a comparison or a

package/css/actions.css

@@ -114,6 +114,17 @@
 .icon-btn-group--vertical { flex-direction: column; flex: none; width: var(--tap); }
 .icon-btn-group--vertical > .icon-btn { flex: 1 0 auto; min-height: var(--tap); }
 .icon-btn-group--vertical > .icon-btn + .icon-btn { border-inline-start: 0; border-block-start: var(--border-w) solid var(--icon-btn-group-rule, var(--icon-btn-group-border, var(--outline))); }
+/* --form: the panel as wide as its buttons (each one --tap, or its word if wider), in the middle of its column the way `.btn--form` is, next to the
+   panel across the row (Lh 2026-10-10, from timebank: two chevrons stretched over the whole column to walk nine colours). The container
+   does not stretch it: a foot's `flex: 1 1 0` is undone for it below, as the foot undoes it for `.btn--form` (card.css). */
+.icon-btn-group--form { flex: 0 1 auto; justify-self: center; margin-inline: auto; } /* no align-self: a sheet's foot stands its buttons on the bottom edge by `align-items: end` */
+.icon-btn-group--form > .icon-btn { flex: 0 1 auto; width: auto; min-width: var(--icon-btn-group-form-min-w, var(--tap)); }
+.card__foot > :is(.icon-btn-group--form, .icon-btn-line) { flex: 0 1 auto; }
+/* --labelled: the label's words, then the panel, ONE line in the middle (the words are read, not pressed: no frame, plain ink); too narrow → the words wrap
+   above the panel, both centred */
+.icon-btn-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--icon-btn-group-gap, var(--sp-3)); min-width: 0; justify-self: center; margin-inline: auto; }
+.icon-btn-line__words { font: var(--type-label); text-align: center; min-width: 0; }
+.icon-btn-line > .icon-btn-group--form { margin-inline: 0; }
 .icon-btn-group > .icon-btn[aria-pressed="true"] { background: var(--icon-btn-group-on-bg, var(--accent)); color: var(--icon-btn-group-on-ink, var(--on-accent)); } /* `select`: a pressed button STAYS filled (Lh 2026-09-29) */
 .icon-btn-group > .icon-btn:active:not(:disabled) { scale: 1; opacity: var(--press-dim); } /* a part of one frame DIMS, it never shrinks inside it */
 

package/css/post.css

@@ -230,7 +230,7 @@
 .post-desk__line > span { font: var(--type-caption); color: var(--_muted); }
 .post-desk__line > input { width: 100%; min-width: 0; min-height: var(--tap); border: 0; outline: none; background: transparent; color: inherit; font: var(--type-title); }
 .post-desk__line > input::placeholder { color: var(--_muted); }
-/* the stamp box: empty it is a dashed place to press; pressed, the chosen stamp lies in it */
+/* the stamp box: empty it is a place of dots to press; pressed, the chosen stamp lies in it */
 .post-desk__slot { border: 0; background: transparent; color: inherit; }
 @media (prefers-reduced-motion: no-preference) {
   .post-desk__slot > .stamp { animation: post-desk-stick var(--motion-quick) ease-out both; }

package/css/stack.css

@@ -369,12 +369,13 @@
    into it — an opacity fade in place, never a slide in from the left (the
    slide read as a second thing moving while the sheet itself moved; Lh,
    2026-09-11). Only the sheet travels; the button appears where it is. */
-.sheet-stack--tap .card__head {
+/* a sheet's OWN head and back: the card is the stack's child or, with one host wrapper, the wrapper's. A card standing in the sheet's body wears its own head */
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head {
   position: relative;
   padding-left: 0;
   transition: padding-left var(--motion-sheet) ease;
 }
-.sheet-stack--tap .sheet-stack__back {
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head > .sheet-stack__back {
   position: absolute;
   left: 0;
   top: 50%;
@@ -389,7 +390,7 @@
   min-height: 0;
   padding: 0;
 }
-.sheet-stack--tap > .card.is-open .sheet-stack__back {
+.sheet-stack--tap > .card.is-open > .card__head > .sheet-stack__back {
   opacity: 1;
   visibility: visible;
 }
@@ -512,7 +513,7 @@
 /* AT THE END (Lh 2026-09-29, the home): after the tabs, chevron down — the open sheet folds down. The head's end gives it its room
    while open; the last tab then sits on the inset (no reach into the padding) */
 .sheet-stack--tap .sheet-stack__back--end { left: auto; right: 0; }
-.sheet-stack--tap .card__head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) ease; }
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) ease; }
 .sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) { padding-right: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
 .sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) > .stack-sheet__tabs { margin-right: 0; }
 .sheet-stack--tap .sheet-stack__back > .icon { width: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); height: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); flex: none; } /* 26: the chevron fills the small disc (Lh 2026-09-23) */

package/css/stamp.css

@@ -91,28 +91,32 @@
 
 /* ---- stamp place: an empty place for a stamp — an album's gap, "make yours" ----
    <span class="stamp-place"><svg class="stamp-place__edge" aria-hidden="true"><rect/></svg>สร้าง</span> · <button class="stamp-place">…</button> · <span class="stamp-place stamp-place--faint">…</span>
-   The dashed edge is a <rect> of its own, not a border: a dashed border's dash and gap are the browser's to choose, a stroke's are two
-   knobs (--stamp-place-dash, --stamp-place-gap) and its corners still follow --stamp-place-radius. The element keeps a clear border
-   of the same width so what is inside sits where it did; the svg lies on that border, over it, and takes no part in the layout. */
+   The edge is a row of round dots drawn on a <rect> of its own, not a border: a dashed border's dash and gap are the browser's to choose,
+   a stroke's are knobs and its corners still follow --stamp-place-radius. A dot is a zero-length dash under a round cap, --stamp-place-dot
+   wide; --stamp-place-gap is the distance from one dot's centre to the next, and a --stamp-place-dash above 0 makes round-ended dashes
+   of it. The pattern closes wherever the perimeter ends, so the last gap is shorter or longer than the rest by less than one pitch.
+   The element keeps a clear border of the same width so what is inside sits where it did; the svg lies on that border, over it, and
+   takes no part in the layout. */
 .stamp-place {
   position: relative;
   display: grid;
   place-content: center;
   justify-items: center;
   padding: var(--sp-1);
-  border: var(--rule-w) solid transparent;
+  border: var(--_dot) solid transparent;
   border-radius: var(--stamp-place-radius, var(--sp-2));
   background: none;
   color: var(--stamp-place-ink, var(--on-surface-muted));
   font: var(--stamp-place-font, var(--type-caption));
   text-align: center;
   --_edge: var(--stamp-place-border, var(--on-surface-muted));
+  --_dot: var(--stamp-place-dot, var(--rule-w));
 }
 .stamp-place__edge {
   position: absolute;
-  inset: calc(var(--rule-w) / -2) auto auto calc(var(--rule-w) / -2);
-  width: calc(100% + var(--rule-w));
-  height: calc(100% + var(--rule-w));
+  inset: calc(var(--_dot) / -2) auto auto calc(var(--_dot) / -2);
+  width: calc(100% + var(--_dot));
+  height: calc(100% + var(--_dot));
   max-width: none;                      /* base.css caps every svg at its box */
   overflow: visible;                    /* the stroke is centred on the rect's own edge: half of it falls outside the svg */
   pointer-events: none;
@@ -120,11 +124,12 @@
 .stamp-place__edge > rect {
   width: 100%;
   height: 100%;
-  rx: calc(var(--stamp-place-radius, var(--sp-2)) - var(--rule-w) / 2);   /* the corner of the stroke's middle, so its outer edge is the radius */
+  rx: calc(var(--stamp-place-radius, var(--sp-2)) - var(--_dot) / 2);   /* the corner of the stroke's middle, so its outer edge is the radius */
   fill: none;
   stroke: var(--_edge);
-  stroke-width: var(--rule-w);
-  stroke-dasharray: var(--stamp-place-dash, var(--sp-2)) var(--stamp-place-gap, var(--sp-3));
+  stroke-width: var(--_dot);
+  stroke-linecap: round;
+  stroke-dasharray: var(--stamp-place-dash, 0) var(--stamp-place-gap, calc(var(--sp-0) * 3));
 }
 .card .stamp-place, .post-paper .stamp-place { --_edge: var(--stamp-place-border, var(--card-muted)); color: var(--stamp-place-ink, var(--card-muted)); }
 .stamp-place--faint { --_edge: var(--stamp-place-faint-border, var(--hairline)); }

package/dist/actions/IconBtnGroup.d.ts

@@ -14,11 +14,22 @@ export interface IconBtnGroupProps extends Omit<ComponentProps<'div'>, 'onChange
     onChange?: (value: Picked) => void;
     /** the buttons one OVER the other, the panel one button wide — at a `Row`'s `end`, where a panel across would take the words' room */
     vertical?: boolean;
+    /** the panel as wide as its buttons (each one tap wide, or as wide as its word), in the middle of its column the way a `Btn form` is —
+     *  in a `Page`, a `Centre`, a `CtaPack`, and in a card's or a sheet's foot, where it keeps that width instead of filling the row.
+     *  Without it the panel is the width of what it stands in. Not with `vertical`: that is already one button wide, at a row's end —
+     *  `form` wins and warns */
+    form?: boolean;
+    /** with `form`: SHOW the `label` as words at the panel's left, on one line, the two centred together — plain ink in the label's type,
+     *  outside the frame, and the words are the group's name (`aria-labelledby`). Where the line is too narrow (a big text size on a small
+     *  phone) the words wrap ABOVE the panel and both stay centred */
+    labelled?: boolean;
 }
 /** IconBtnGroup — a panel of up to FOUR icon-only buttons in ONE frame, sharing its width, a rule between them in the frame's
  *  colour (Lh 2026-09-29). Each is an `IconBtn` (its `label` is its spoken name); a WORD may stand beside the icon as its child
  *  (`<IconBtn label="ชาย"><Icon name="man" />ชาย</IconBtn>`) — two named sides of a `Panes`. Plain: each does its own thing on its onClick.
  *  With `select`, a pressed button stays filled (aria-pressed): `one` or `many`. At home in a card's or a sheet's foot;
- *  `vertical` at a row's end. */
-export declare function IconBtnGroup({ label, select, value, defaultValue, onChange, vertical, className, children, ...rest }: IconBtnGroupProps): import("react").JSX.Element;
+ *  `vertical` at a row's end; `form` as a small control of its own in the middle of a `Page` or a `Centre`
+ *  (`<IconBtnGroup form labelled label="เปลี่ยนสีพื้น">` = the words, then the narrow panel, both centred). With `labelled` the root
+ *  is the line holding the words and the panel — `className`, `style` and `ref` go there, the knobs too. */
+export declare function IconBtnGroup({ label, labelled, form, select, value, defaultValue, onChange, vertical, className, children, ...rest }: IconBtnGroupProps): import("react").JSX.Element;
 export {};

package/dist/actions/IconBtnGroup.js

@@ -1,15 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, isValidElement } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useId } from 'react';
 import { cx } from '../cx.js';
 import { useControlled, warnOnce } from '../state.js';
 /** IconBtnGroup — a panel of up to FOUR icon-only buttons in ONE frame, sharing its width, a rule between them in the frame's
  *  colour (Lh 2026-09-29). Each is an `IconBtn` (its `label` is its spoken name); a WORD may stand beside the icon as its child
  *  (`<IconBtn label="ชาย"><Icon name="man" />ชาย</IconBtn>`) — two named sides of a `Panes`. Plain: each does its own thing on its onClick.
  *  With `select`, a pressed button stays filled (aria-pressed): `one` or `many`. At home in a card's or a sheet's foot;
- *  `vertical` at a row's end. */
-export function IconBtnGroup({ label, select, value, defaultValue, onChange, vertical, className, children, ...rest }) {
+ *  `vertical` at a row's end; `form` as a small control of its own in the middle of a `Page` or a `Centre`
+ *  (`<IconBtnGroup form labelled label="เปลี่ยนสีพื้น">` = the words, then the narrow panel, both centred). With `labelled` the root
+ *  is the line holding the words and the panel — `className`, `style` and `ref` go there, the knobs too. */
+export function IconBtnGroup({ label, labelled, form, select, value, defaultValue, onChange, vertical, className, children, ...rest }) {
+    const words = useId();
     if (Children.count(children) > 4)
         warnOnce('icon-btn-group', 'cardds IconBtnGroup: more than 4 buttons — keep 4, put the rest in a Menu behind one of them');
+    if (form && vertical)
+        warnOnce('icon-btn-group-form-vertical', 'cardds IconBtnGroup: `form` and `vertical` together — `vertical` is already one button wide at a row\'s end, `form` is the panel in the middle of its column; `form` is kept, `vertical` ignored');
+    if (labelled && !form)
+        warnOnce('icon-btn-group-labelled', 'cardds IconBtnGroup: `labelled` is for `form` (the words and the narrow panel as one centred line) — without `form` the label stays the spoken name only');
+    if (labelled && form && !label)
+        warnOnce('icon-btn-group-labelled-words', 'cardds IconBtnGroup: `labelled` shows the `label` — it has none, so no words are drawn');
+    const line = !!(form && labelled && label);
     const [shown, request] = useControlled(value, defaultValue ?? (select === 'many' ? [] : null), onChange);
     const on = (v) => (Array.isArray(shown) ? shown.includes(v) : shown === v);
     const items = !select ? children : Children.map(children, (c) => {
@@ -32,5 +42,8 @@ export function IconBtnGroup({ label, select, value, defaultValue, onChange, ver
             },
         });
     });
-    return _jsx("div", { role: "group", "aria-label": label, className: cx('icon-btn-group', vertical && 'icon-btn-group--vertical', className), ...rest, children: items });
+    const panel = (_jsx("div", { role: "group", "aria-label": line ? undefined : label, "aria-labelledby": line ? words : undefined, className: cx('icon-btn-group', form && 'icon-btn-group--form', vertical && !form && 'icon-btn-group--vertical', !line && className), ...(line ? {} : rest), children: items }));
+    if (!line)
+        return panel;
+    return _jsxs("div", { className: cx('icon-btn-line', className), ...rest, children: [_jsx("span", { id: words, className: "icon-btn-line__words", children: label }), panel] });
 }

package/dist/cardds.css

@@ -1435,12 +1435,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    into it — an opacity fade in place, never a slide in from the left (the
    slide read as a second thing moving while the sheet itself moved; Lh,
    2026-09-11). Only the sheet travels; the button appears where it is. */
-.sheet-stack--tap .card__head {
+/* a sheet's OWN head and back: the card is the stack's child or, with one host wrapper, the wrapper's. A card standing in the sheet's body wears its own head */
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head {
   position: relative;
   padding-left: 0;
   transition: padding-left var(--motion-sheet) ease;
 }
-.sheet-stack--tap .sheet-stack__back {
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head > .sheet-stack__back {
   position: absolute;
   left: 0;
   top: 50%;
@@ -1455,7 +1456,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   min-height: 0;
   padding: 0;
 }
-.sheet-stack--tap > .card.is-open .sheet-stack__back {
+.sheet-stack--tap > .card.is-open > .card__head > .sheet-stack__back {
   opacity: 1;
   visibility: visible;
 }
@@ -1578,7 +1579,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* AT THE END (Lh 2026-09-29, the home): after the tabs, chevron down — the open sheet folds down. The head's end gives it its room
    while open; the last tab then sits on the inset (no reach into the padding) */
 .sheet-stack--tap .sheet-stack__back--end { left: auto; right: 0; }
-.sheet-stack--tap .card__head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) ease; }
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) ease; }
 .sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) { padding-right: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
 .sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) > .stack-sheet__tabs { margin-right: 0; }
 .sheet-stack--tap .sheet-stack__back > .icon { width: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); height: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); flex: none; } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
@@ -2542,6 +2543,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .icon-btn-group--vertical { flex-direction: column; flex: none; width: var(--tap); }
 .icon-btn-group--vertical > .icon-btn { flex: 1 0 auto; min-height: var(--tap); }
 .icon-btn-group--vertical > .icon-btn + .icon-btn { border-inline-start: 0; border-block-start: var(--border-w) solid var(--icon-btn-group-rule, var(--icon-btn-group-border, var(--outline))); }
+/* --form: the panel as wide as its buttons (each one --tap, or its word if wider), in the middle of its column the way `.btn--form` is, next to the
+   panel across the row (Lh 2026-10-10, from timebank: two chevrons stretched over the whole column to walk nine colours). The container
+   does not stretch it: a foot's `flex: 1 1 0` is undone for it below, as the foot undoes it for `.btn--form` (card.css). */
+.icon-btn-group--form { flex: 0 1 auto; justify-self: center; margin-inline: auto; } /* no align-self: a sheet's foot stands its buttons on the bottom edge by `align-items: end` */
+.icon-btn-group--form > .icon-btn { flex: 0 1 auto; width: auto; min-width: var(--icon-btn-group-form-min-w, var(--tap)); }
+.card__foot > :is(.icon-btn-group--form, .icon-btn-line) { flex: 0 1 auto; }
+/* --labelled: the label's words, then the panel, ONE line in the middle (the words are read, not pressed: no frame, plain ink); too narrow → the words wrap
+   above the panel, both centred */
+.icon-btn-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--icon-btn-group-gap, var(--sp-3)); min-width: 0; justify-self: center; margin-inline: auto; }
+.icon-btn-line__words { font: var(--type-label); text-align: center; min-width: 0; }
+.icon-btn-line > .icon-btn-group--form { margin-inline: 0; }
 .icon-btn-group > .icon-btn[aria-pressed="true"] { background: var(--icon-btn-group-on-bg, var(--accent)); color: var(--icon-btn-group-on-ink, var(--on-accent)); } /* `select`: a pressed button STAYS filled (Lh 2026-09-29) */
 .icon-btn-group > .icon-btn:active:not(:disabled) { scale: 1; opacity: var(--press-dim); } /* a part of one frame DIMS, it never shrinks inside it */
 
@@ -4068,28 +4080,32 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- stamp place: an empty place for a stamp — an album's gap, "make yours" ----
    <span class="stamp-place"><svg class="stamp-place__edge" aria-hidden="true"><rect/></svg>สร้าง</span> · <button class="stamp-place">…</button> · <span class="stamp-place stamp-place--faint">…</span>
-   The dashed edge is a <rect> of its own, not a border: a dashed border's dash and gap are the browser's to choose, a stroke's are two
-   knobs (--stamp-place-dash, --stamp-place-gap) and its corners still follow --stamp-place-radius. The element keeps a clear border
-   of the same width so what is inside sits where it did; the svg lies on that border, over it, and takes no part in the layout. */
+   The edge is a row of round dots drawn on a <rect> of its own, not a border: a dashed border's dash and gap are the browser's to choose,
+   a stroke's are knobs and its corners still follow --stamp-place-radius. A dot is a zero-length dash under a round cap, --stamp-place-dot
+   wide; --stamp-place-gap is the distance from one dot's centre to the next, and a --stamp-place-dash above 0 makes round-ended dashes
+   of it. The pattern closes wherever the perimeter ends, so the last gap is shorter or longer than the rest by less than one pitch.
+   The element keeps a clear border of the same width so what is inside sits where it did; the svg lies on that border, over it, and
+   takes no part in the layout. */
 .stamp-place {
   position: relative;
   display: grid;
   place-content: center;
   justify-items: center;
   padding: var(--sp-1);
-  border: var(--rule-w) solid transparent;
+  border: var(--_dot) solid transparent;
   border-radius: var(--stamp-place-radius, var(--sp-2));
   background: none;
   color: var(--stamp-place-ink, var(--on-surface-muted));
   font: var(--stamp-place-font, var(--type-caption));
   text-align: center;
   --_edge: var(--stamp-place-border, var(--on-surface-muted));
+  --_dot: var(--stamp-place-dot, var(--rule-w));
 }
 .stamp-place__edge {
   position: absolute;
-  inset: calc(var(--rule-w) / -2) auto auto calc(var(--rule-w) / -2);
-  width: calc(100% + var(--rule-w));
-  height: calc(100% + var(--rule-w));
+  inset: calc(var(--_dot) / -2) auto auto calc(var(--_dot) / -2);
+  width: calc(100% + var(--_dot));
+  height: calc(100% + var(--_dot));
   max-width: none;                      /* base.css caps every svg at its box */
   overflow: visible;                    /* the stroke is centred on the rect's own edge: half of it falls outside the svg */
   pointer-events: none;
@@ -4097,11 +4113,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .stamp-place__edge > rect {
   width: 100%;
   height: 100%;
-  rx: calc(var(--stamp-place-radius, var(--sp-2)) - var(--rule-w) / 2);   /* the corner of the stroke's middle, so its outer edge is the radius */
+  rx: calc(var(--stamp-place-radius, var(--sp-2)) - var(--_dot) / 2);   /* the corner of the stroke's middle, so its outer edge is the radius */
   fill: none;
   stroke: var(--_edge);
-  stroke-width: var(--rule-w);
-  stroke-dasharray: var(--stamp-place-dash, var(--sp-2)) var(--stamp-place-gap, var(--sp-3));
+  stroke-width: var(--_dot);
+  stroke-linecap: round;
+  stroke-dasharray: var(--stamp-place-dash, 0) var(--stamp-place-gap, calc(var(--sp-0) * 3));
 }
 .card .stamp-place, .post-paper .stamp-place { --_edge: var(--stamp-place-border, var(--card-muted)); color: var(--stamp-place-ink, var(--card-muted)); }
 .stamp-place--faint { --_edge: var(--stamp-place-faint-border, var(--hairline)); }
@@ -4422,7 +4439,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .post-desk__line > span { font: var(--type-caption); color: var(--_muted); }
 .post-desk__line > input { width: 100%; min-width: 0; min-height: var(--tap); border: 0; outline: none; background: transparent; color: inherit; font: var(--type-title); }
 .post-desk__line > input::placeholder { color: var(--_muted); }
-/* the stamp box: empty it is a dashed place to press; pressed, the chosen stamp lies in it */
+/* the stamp box: empty it is a place of dots to press; pressed, the chosen stamp lies in it */
 .post-desk__slot { border: 0; background: transparent; color: inherit; }
 @media (prefers-reduced-motion: no-preference) {
   .post-desk__slot > .stamp { animation: post-desk-stick var(--motion-quick) ease-out both; }

package/dist/cards/Card.js

@@ -5,7 +5,7 @@ import { warnOnce } from '../state.js';
 import { CardHead } from './CardHead.js';
 import { CardFoot } from './CardFoot.js';
 import { goControl } from './cardGo.js';
-import { StackHeadCtx, StackPullCtx, stackPaint, useStackCard } from '../sheets/stackCard.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).
  * The head and the foot are SLOTS: `heading` · `caption` · `end` (the card writes its CardHead first) and `foot` · `footLink`
@@ -61,11 +61,12 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
         }
         if (!stack || e.defaultPrevented || swallow.current)
             return;
-        if (target.closest('.sheet-stack__back')) {
+        const head = card && ownHead(card, target); // the sheet's own head: a card standing in its body has a heading and a back of its own
+        if (head && target.closest('.sheet-stack__back')) {
             stack.onClose();
             return;
         }
-        if (stack.open && target.closest('.card__head > :is(h1, h2, h3)')) {
+        if (head && stack.open && target.closest('.card__head > :is(h1, h2, h3)')) {
             stack.onClose();
             return;
         } // the title folds it; the back stays the keyboard's way