@usableapp/cardds 0.7.80 → 0.7.81

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 > 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.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
@@ -751,7 +756,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/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/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 */
 

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