@usableapp/cardds 0.7.84 → 0.7.86

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 > 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.86 — 2026-10-11
+
+Nothing here breaks an existing screen: every prop is new and optional, and a screen that does not use them draws and behaves as in 0.7.85.
+
+### Added
+- **`StampOn onRemove`: a stuck stamp can be taken off.** When a drag ends or an arrow key moves the stamp, a cross stands on its top right corner for `removeFor` ms (default 3000). A press on the cross, or Delete / Backspace on the focused stamp, calls `onRemove`. The stamp only asks: the app takes the `StampOn` away, as it owns `at`. A stamp with `onRemove` and no `onAtChange` cannot be dragged, so a press on it shows the cross. A new drag hides the cross while the finger holds. The cross is a 24 disc in a 44 × 44 target, centred on the stamp's corner, and stays upright whatever the stamp's `turn`. Its name is `removeLabel`, default cardds's word `remove` ("Remove" / "เอาออก" by the page's language). Knobs: `--stamp-on-remove-size` (`--sp-6`, 24), `--stamp-on-remove-bg` (#141414), `--stamp-on-remove-ink` (#ffffff). A press or a drag on a removable stamp or its cross never reaches a pressable card or pile under it. Without `onRemove` a `StampOn` is as before.
+- **`StampOn main`: a stuck stamp at the stamp's main size.** `--stamp-size`, 96 × 120 (90 × 112.5 on a screen 360 wide), to cover what it lies on. The default stays the small size, `--stamp-sm-size`, 48 × 60 (45 × 56.25 at 360).
+- **`StickyPile`: one to six notes in a pile.** A feed item of its own, with no card frame. Its children are `Sticky` notes, the first on top. Each note under the top one lies 24 right and 8 down from the one above (`--sticky-pile-step-x`, `--sp-6`; `--sticky-pile-step-y`, `--sp-2`), turned by `StickyBoard`'s four angles by its place, so the top note's turn is the same for every count. Only the top note draws its `foot`. Measured at 375: one note 184 × 184, three 232 × 200, six 304 × 224, with `--sticky-pile-pad` (`--sp-2`, 8) of room round the notes. The pile stands in the middle of its column and is never wider than it: a column too narrow shortens the steps. A seventh note is not drawn (a console warning, once). `onClick` makes the whole pile one button under its notes, one Tab stop, with a ring round the pile; it needs `label`, the button's name, and warns once without it. The pile only says it was pressed. A `StampOn` on the top note keeps its drag and its cross; the stamps on the notes under it are inert whatever the app passed. A pile's notes wear their stamp at one size: pass `main` to all or to none.
+- A feed card that holds a `StampOn` is still not pressed whole: a `.stamp-on` counts as a control of the card. Unchanged.
+- **`StampOn onRemove` with `arrive`: no cross until the stamp has landed.** A stamp that is still being struck on is not stuck yet, so it shows no cross, takes no focus and answers no Delete; once `onArrived` fires it is a removable stamp as any other. `main` with `arrive` strikes the 96 × 120 stamp.
+
+## 0.7.85 — 2026-10-11
+
+### Added
+- **`StampOn arrive` + `onArrived`: a stamp that sticks itself** (Lh 2026-10-11) — as the `StampOn` comes onto the screen it is struck onto its place (shown large, pressed down to its size), and `onArrived` tells the app when it has landed; with reduced motion it is there at once and `onArrived` still comes. Nobody picks the stamp or presses to stick it: the app shows it when its own move begins (a send) and does what follows in `onArrived`. The surface is any positioned box, a `Card` and a `Sheet` among them. Knob `--stamp-on-arrive-time`. Story `StampOn · Arrives`.
+- **Story `Home · AskSheet`: a task in one sheet over the home** — `SheetStage over dim` holding a `Sheet`, as the `Home`'s children, over a flooded sheet; two `SheetSteps` inside; the sheet is one layer of the history (`useLayer`). Nothing new in the components: the story shows the composition.
+- **Story `CardFoot · CardFootFourAnswers`: four answers on one card** — one word button and an `IconBtnGroup form` of three picture buttons. Four word buttons on one line do not fit a phone (67 to 79 wide each, the words break). An answer already given is `aria-disabled` with its name changed, so it fades, stays, and is still read.
+
+### Fixed
+- **`ChipRow bleed`: a chip keeps its words on one line** — before → after: a chip of whole sentences shrank to fit the row and its words broke onto three or four lines, so the strip never scrolled → each chip is as wide as its words and the strip scrolls sideways. A row of one-word chips is unchanged. Story `Chip · ChipRowBleedSentences`.
+
 ## 0.7.84 — 2026-10-11
 
 ### Changed — breaking for a screen that draws a `Stamp`

package/README.md

@@ -607,6 +607,16 @@ A sticky note is a square of paper with a few words on it. The family is in `src
   `defaultWriting`. While writing, the note stands at the top, the screen behind is washed pale and takes no touch,
   and `tools` (the paper chooser, the send button) and `tray` (the writer's stamp) stand under it. A touch outside or
   Escape asks to stop. The words, the paper and the stamps on the note are the app's. It is a child of the `Screen`.
+- **`StickyPile`** — one to six notes lying one over another, as the newest notes of a feed do. It is a feed item of
+  its own, with no card frame. The first child is on top, so pass the newest first. Each note under it lies a step
+  right and down (`--sticky-pile-step-x`, 24, and `--sticky-pile-step-y`, 8), turned by the board's four angles by
+  its place, so the top note turns the same whatever the count. Only the top note draws its `foot`. At 375 a pile of
+  one is 184 × 184, of three 232 × 200, of six 304 × 224 (`--sticky-pile-pad`, 8, is the room round the notes for
+  their turn). The pile stands in the middle of its column and is never wider than it: a narrow column shortens the
+  steps. A seventh note is not drawn, and the console says so once. With `onClick` the whole pile is one button, and
+  `label` is its name (required with `onClick`): one Tab stop, a ring round the pile. Where the press goes is the
+  app's. A `StampOn` on the top note keeps its own touch; the stamps on the notes under it are inert. A pile's notes
+  all wear their stamp at one size.
 - **`StickyField`** is the bare textarea on a note. **`StickyPick`** is the paper chooser: `value` + `onChange`,
   `tones` for the ones on offer.
 
@@ -650,7 +660,18 @@ it up. cardds draws the paper; the pictures, their words and which stamp a membe
   `turn` its angle in degrees. With `onAtChange` the member drags it (the arrow keys move it too) and it asks with the
   new place when the finger lets go; without it the stamp is still. The surface is the nearest positioned box:
   `Sticky stuck={…}` is one. The stamp is the small size, 48 × 60 whatever the surface's size (`--stamp-sm-size`), and
-  on a note it may lie over the words.
+  on a note it may lie over the words. With `arrive` the stamp sticks itself: as it comes onto the screen it is struck
+  onto its place, and `onArrived` tells the app when it has landed (at once where motion is off), so the app does what
+  follows. A `Card` and a `Sheet` are positioned boxes, so a `StampOn` written inside one lies on it.
+  `--stamp-on-arrive-time` sets how long the strike takes.
+  `main` makes it the stamp's main size, 96 × 120 (`--stamp-size`; 90 × 112.5 on a screen 360 wide), to cover what
+  it lies on. With `onRemove` the stamp can be taken off: when a drag ends or an arrow key moves it, a cross stands on
+  its top right corner for `removeFor` ms (default 3000). A press on the cross, or Delete / Backspace on the focused
+  stamp, asks, and the app takes the `StampOn` away. A stamp with `onRemove` and no `onAtChange` shows the cross on a
+  press. The cross is a 24 disc (`--stamp-on-remove-size`, `--stamp-on-remove-bg` #141414, `--stamp-on-remove-ink`
+  #ffffff) in a 44 target, centred on the corner and upright whatever the stamp's `turn`. Its name is cardds's word
+  ("Remove" / "เอาออก"), or `removeLabel`. A press or a drag on a removable stamp never reaches what lies under it.
+  A stamp that is still arriving cannot be taken off yet: its cross waits until it has landed.
 
 What an app stores for a stamp: the picture ids (1 to 4, in order), the ground tone, the name, the small line. Making
 one is the app's screen: `ChipPick` checkboxes that each show a picture, the app refuses a fifth, and the app draws

package/css/actions.css

@@ -204,6 +204,7 @@
 
 .chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
 .chip-row.bleed { flex-wrap: nowrap; } /* actions.css loads after card.css — the strip stays one line */
+.chip-row.bleed > .chip { flex: none; white-space: nowrap; } /* a chip of the strip keeps its words on one line at its own width: the strip scrolls, a chip never shrinks to fit it */
 
 /* ---- dropdown: the standard for every select — a pill trigger + .menu popover ----
    <div class="dropdown"><button class="dropdown__btn" popovertarget="f1"><span class="dropdown__label">this week</span><svg class="icon icon--xs"><use href="icons.svg#chevron-down"/></svg></button>
@@ -381,7 +382,7 @@
    button's, the card itself is never focused or disabled. */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach) {
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove) {
   cursor: pointer;
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
@@ -400,9 +401,15 @@
 }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
+/* a pile of notes pressed whole (Lh 2026-10-11): the button lies invisible UNDER the notes, so it is the notes that answer — DIM, as a card does (the group dims as one, the
+   notes do not show through one another); the ring is the button's own, round the whole pile */
+.sticky-pile__press { cursor: pointer; touch-action: manipulation; }
+.sticky-pile__notes:has(> .sticky-pile__press) { transition: opacity var(--motion-press) ease-out; }
+.sticky-pile__notes:has(> .sticky-pile__press:active) { opacity: var(--press-dim); }
+.sticky-pile__press:focus-visible { outline: var(--focus); outline-offset: 0; }
 /* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back, a post letter's sheet over the other) must not turn see-through:
    it darkens a touch instead (--press-shade) */
 :where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn, .post-letter__sheet:not(:has(.icon-btn:active))) { cursor: pointer; touch-action: manipulation; transition: filter var(--motion-press) ease-out; }
@@ -410,17 +417,17 @@
 /* the focus ring: on the control, or on the label that wraps a hidden input (chip, tile, file button, a row that is a label) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):focus-visible,
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):focus-visible,
 :where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .feed-card--small, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn, label.row):has(:disabled) { cursor: default; }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):not(.link):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):not(.link):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn):has(:disabled) { opacity: var(--off); }
 .sheet-stack--tap > .card > .card__head > :is(h1, h2, h3):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); } /* the keyboard's way into a stack sheet */
 @media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } } /* the give goes; the dim, the shade and the focus ring stay */

package/css/stamp.css

@@ -213,8 +213,55 @@
 }
 /* the SMALL stamp: stuck on a surface (a note). 48 × 60 whatever the surface's size. The stamp carries the size and the `.stamp-on` box is as wide as its stamp */
 .stamp-on > .stamp { width: var(--stamp-sm-size, var(--tap)); max-width: none; }
+/* --main: the same stuck stamp at the stamp's MAIN size, 96 × 120 (--stamp-size), to cover what it lies on (the owner's call, 2026-10-11: the home's note).
+   After the rule above, at the same weight: `main` is the one place a stuck stamp reads --stamp-size. */
+.stamp-on--main > .stamp { width: var(--stamp-size, calc(var(--tap) * 2)); }
 .stamp-on--move { will-change: transform; } /* its own layer: Safari left the stamp's shadow behind as a trail along the drag when it was painted with the note (seen on the simulator, 2026-10-07) */
 .stamp-on--move { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; transition: scale var(--motion-press) ease-out; }
 .stamp-on--move:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 .stamp-on.is-held { cursor: grabbing; z-index: 1; scale: 1.06; } /* lifted off the paper while the finger holds it */
 @media (prefers-reduced-motion: reduce) { .stamp-on.is-held { scale: 1; } }
+
+/* ---- the cross that takes a stamp off (`StampOn onRemove`): a small dark disc with an x on the stamp's top right corner ----
+   <div class="stamp-on stamp-on--move">…<button class="stamp-on__remove" aria-label="Remove"><span class="stamp-on__remove-disc"><svg class="icon">x</svg></span></button></div>
+   The button is the touch target — at least --tap-floor (44) square, invisible, centred on the corner — and the disc inside it is what is seen
+   (24). It is NOT turned with the stamp: a hand turns a stamp, a button stays square to the screen, so the cross counter-turns by the stamp's own turn. Like the
+   stamp it brings its ground and its ink (a dark disc, a pale x and a pale ring: seen on any paper and over any picture). */
+.stamp-on__remove-disc {
+  display: grid;
+  place-items: center;
+  width: var(--stamp-on-remove-size, var(--sp-6));
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background-color: var(--stamp-on-remove-bg, #141414);
+  box-shadow: 0 0 0 var(--sp-0) currentColor, 0 var(--sp-0) var(--sp-1) rgb(0 0 0 / 0.35);
+}
+.stamp-on__remove {
+  --_hit: max(var(--tap-floor), var(--stamp-on-remove-size, var(--sp-6)));
+  position: absolute;
+  top: 0;
+  right: 0;
+  translate: 50% -50%;
+  rotate: calc(var(--stamp-on-turn, 0) * -1deg);
+  display: grid;
+  place-items: center;
+  width: var(--_hit);
+  height: var(--_hit);
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: var(--stamp-on-remove-ink, #ffffff);
+  font: inherit;
+  -webkit-tap-highlight-color: transparent;
+}
+.stamp-on__remove-disc > .icon { width: 60%; height: 60%; }
+@media (prefers-reduced-motion: no-preference) { .stamp-on__remove { animation: stamp-on-remove-in var(--motion-press) ease-out; } }
+@keyframes stamp-on-remove-in { from { opacity: 0; scale: 0.6; } }
+
+/* --arrive: the stamp sticks ITSELF (StampOn `arrive`) — struck onto its place: shown large and faint, pressed a little past its
+   size, then at rest. The component reads the animation's name to tell the app it has landed. Knob: --stamp-on-arrive-time */
+@media (prefers-reduced-motion: no-preference) {
+  .stamp-on--arrive { animation: stamp-on-strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; }
+}
+@keyframes stamp-on-strike { from { scale: 2; opacity: 0; } 60% { scale: 0.92; opacity: 1; } }

package/css/sticky.css

@@ -94,7 +94,7 @@
   box-shadow: calc(-1 * var(--sp-0)) calc(-1 * var(--sp-0)) var(--sp-1) rgb(0 0 0 / 0.08);
 }
 /* things stuck ON the note (a stamp, placed by hand): a layer over the whole paper. A tap between them still reaches the words under it.
-   A stamp on a note is the stamp's small size whatever the note's (48 × 60, --stamp-sm-size: stamp.css), and may lie over the words. */
+   A stamp on a note is the stamp's small size whatever the note's (48 × 60, --stamp-sm-size: stamp.css; `StampOn main` is the main size), and may lie over the words. */
 .sticky__stuck { position: absolute; inset: 0; pointer-events: none; }
 .sticky--flat > .sticky__paper { clip-path: none; }
 .sticky--flat > .sticky__paper > .sticky__foot { padding-inline-end: 0; }
@@ -285,6 +285,49 @@
 .sticky-board > :nth-child(4n + 3) { rotate: var(--sticky-board-turn-3, 2.75deg); }
 .sticky-board > :nth-child(4n) { rotate: var(--sticky-board-turn-4, -1.75deg); }
 
+/* ---- sticky pile: one to six notes lying one over another — the newest on top (Lh 2026-10-11) ----
+   <div class="sticky-pile sticky-pile--tap" style="--_n: 3">
+     <div class="sticky-pile__notes">
+       <div class="sticky">…</div><div class="sticky">…</div><div class="sticky">…</div>
+       <button class="sticky-pile__press" aria-label="Three new notes"></button>
+     </div>
+   </div>
+   The FIRST note is on top; each one under it is shifted a step right and down (--sticky-pile-step-x 24, --sticky-pile-step-y 8) so a strip of it peeks
+   out. All lie in ONE grid cell. The turn of each is the board's, by its place among the children (4n + 1 … 4n): the first, the top, is always −3°, whatever the count.
+   The notes under the top one draw no foot. The pile is centred in its column (the root is the column's width and a size container) and never
+   wider than it: the steps are shortened to what the column leaves. --_n is the count, written by the component: data, not a knob.
+   The room round the notes (--sticky-pile-pad) is for the turned corners and the shadow.
+   --tap: the whole pile is the button, a layer UNDER the notes (the last child): the notes let a touch through to it (pointer-events), a stamp on the top note keeps its own.
+   The press look is actions.css's (DIM); the ring is the button's own, round the whole pile. */
+.sticky-pile {
+  --_size: var(--sticky-size, calc(var(--sp-12) * 3.5));
+  --_pad: var(--sticky-pile-pad, var(--sp-2));
+  --_step-x: min(var(--sticky-pile-step-x, var(--sp-6)), (100cqw - var(--_size) - 2 * var(--_pad)) / max(var(--_n) - 1, 1));
+  --_step-y: var(--sticky-pile-step-y, var(--sp-2));
+  container-type: inline-size;
+  display: grid;
+  justify-items: center;
+}
+.sticky-pile__notes {
+  position: relative;
+  display: grid;
+  grid-template: var(--_size) / var(--_size);
+  padding: var(--_pad) calc(var(--_pad) + (var(--_n) - 1) * var(--_step-x)) calc(var(--_pad) + (var(--_n) - 1) * var(--_step-y)) var(--_pad);
+}
+.sticky-pile__notes > .sticky { --_depth: 0; grid-area: 1 / 1; z-index: calc(7 - var(--_depth)); translate: calc(var(--_depth) * var(--_step-x)) calc(var(--_depth) * var(--_step-y)); }
+.sticky-pile__notes > .sticky:nth-child(2) { --_depth: 1; }
+.sticky-pile__notes > .sticky:nth-child(3) { --_depth: 2; }
+.sticky-pile__notes > .sticky:nth-child(4) { --_depth: 3; }
+.sticky-pile__notes > .sticky:nth-child(5) { --_depth: 4; }
+.sticky-pile__notes > .sticky:nth-child(6) { --_depth: 5; }
+.sticky-pile__notes > .sticky:nth-child(n + 2) .sticky__foot { display: none; }
+.sticky-pile__notes > .sticky:nth-child(4n + 1) { rotate: var(--sticky-board-turn-1, -3deg); }
+.sticky-pile__notes > .sticky:nth-child(4n + 2) { rotate: var(--sticky-board-turn-2, 1.5deg); }
+.sticky-pile__notes > .sticky:nth-child(4n + 3) { rotate: var(--sticky-board-turn-3, 2.75deg); }
+.sticky-pile__notes > .sticky:nth-child(4n) { rotate: var(--sticky-board-turn-4, -1.75deg); }
+.sticky-pile__press { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; appearance: none; background: none; -webkit-tap-highlight-color: transparent; }
+.sticky-pile--tap .sticky-pile__notes > .sticky { pointer-events: none; }
+
 /* ---- sticky answer: the note you answer on — it waits at the screen's foot and comes to the top to be written on ----
    <div class="sticky-answer sticky-answer--writing">
      <div class="sticky-answer__scrim"></div>

package/dist/cardds.css

@@ -2633,6 +2633,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 .chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
 .chip-row.bleed { flex-wrap: nowrap; } /* actions.css loads after card.css — the strip stays one line */
+.chip-row.bleed > .chip { flex: none; white-space: nowrap; } /* a chip of the strip keeps its words on one line at its own width: the strip scrolls, a chip never shrinks to fit it */
 
 /* ---- dropdown: the standard for every select — a pill trigger + .menu popover ----
    <div class="dropdown"><button class="dropdown__btn" popovertarget="f1"><span class="dropdown__label">this week</span><svg class="icon icon--xs"><use href="icons.svg#chevron-down"/></svg></button>
@@ -2810,7 +2811,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    button's, the card itself is never focused or disabled. */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach) {
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove) {
   cursor: pointer;
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
@@ -2829,9 +2830,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
+/* a pile of notes pressed whole (Lh 2026-10-11): the button lies invisible UNDER the notes, so it is the notes that answer — DIM, as a card does (the group dims as one, the
+   notes do not show through one another); the ring is the button's own, round the whole pile */
+.sticky-pile__press { cursor: pointer; touch-action: manipulation; }
+.sticky-pile__notes:has(> .sticky-pile__press) { transition: opacity var(--motion-press) ease-out; }
+.sticky-pile__notes:has(> .sticky-pile__press:active) { opacity: var(--press-dim); }
+.sticky-pile__press:focus-visible { outline: var(--focus); outline-offset: 0; }
 /* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back, a post letter's sheet over the other) must not turn see-through:
    it darkens a touch instead (--press-shade) */
 :where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn, .post-letter__sheet:not(:has(.icon-btn:active))) { cursor: pointer; touch-action: manipulation; transition: filter var(--motion-press) ease-out; }
@@ -2839,17 +2846,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* the focus ring: on the control, or on the label that wraps a hidden input (chip, tile, file button, a row that is a label) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):focus-visible,
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):focus-visible,
 :where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .feed-card--small, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn, label.row):has(:disabled) { cursor: default; }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):not(.link):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):not(.link):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn):has(:disabled) { opacity: var(--off); }
 .sheet-stack--tap > .card > .card__head > :is(h1, h2, h3):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); } /* the keyboard's way into a stack sheet */
 @media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } } /* the give goes; the dim, the shade and the focus ring stay */
@@ -3861,7 +3868,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   box-shadow: calc(-1 * var(--sp-0)) calc(-1 * var(--sp-0)) var(--sp-1) rgb(0 0 0 / 0.08);
 }
 /* things stuck ON the note (a stamp, placed by hand): a layer over the whole paper. A tap between them still reaches the words under it.
-   A stamp on a note is the stamp's small size whatever the note's (48 × 60, --stamp-sm-size: stamp.css), and may lie over the words. */
+   A stamp on a note is the stamp's small size whatever the note's (48 × 60, --stamp-sm-size: stamp.css; `StampOn main` is the main size), and may lie over the words. */
 .sticky__stuck { position: absolute; inset: 0; pointer-events: none; }
 .sticky--flat > .sticky__paper { clip-path: none; }
 .sticky--flat > .sticky__paper > .sticky__foot { padding-inline-end: 0; }
@@ -4052,6 +4059,49 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sticky-board > :nth-child(4n + 3) { rotate: var(--sticky-board-turn-3, 2.75deg); }
 .sticky-board > :nth-child(4n) { rotate: var(--sticky-board-turn-4, -1.75deg); }
 
+/* ---- sticky pile: one to six notes lying one over another — the newest on top (Lh 2026-10-11) ----
+   <div class="sticky-pile sticky-pile--tap" style="--_n: 3">
+     <div class="sticky-pile__notes">
+       <div class="sticky">…</div><div class="sticky">…</div><div class="sticky">…</div>
+       <button class="sticky-pile__press" aria-label="Three new notes"></button>
+     </div>
+   </div>
+   The FIRST note is on top; each one under it is shifted a step right and down (--sticky-pile-step-x 24, --sticky-pile-step-y 8) so a strip of it peeks
+   out. All lie in ONE grid cell. The turn of each is the board's, by its place among the children (4n + 1 … 4n): the first, the top, is always −3°, whatever the count.
+   The notes under the top one draw no foot. The pile is centred in its column (the root is the column's width and a size container) and never
+   wider than it: the steps are shortened to what the column leaves. --_n is the count, written by the component: data, not a knob.
+   The room round the notes (--sticky-pile-pad) is for the turned corners and the shadow.
+   --tap: the whole pile is the button, a layer UNDER the notes (the last child): the notes let a touch through to it (pointer-events), a stamp on the top note keeps its own.
+   The press look is actions.css's (DIM); the ring is the button's own, round the whole pile. */
+.sticky-pile {
+  --_size: var(--sticky-size, calc(var(--sp-12) * 3.5));
+  --_pad: var(--sticky-pile-pad, var(--sp-2));
+  --_step-x: min(var(--sticky-pile-step-x, var(--sp-6)), (100cqw - var(--_size) - 2 * var(--_pad)) / max(var(--_n) - 1, 1));
+  --_step-y: var(--sticky-pile-step-y, var(--sp-2));
+  container-type: inline-size;
+  display: grid;
+  justify-items: center;
+}
+.sticky-pile__notes {
+  position: relative;
+  display: grid;
+  grid-template: var(--_size) / var(--_size);
+  padding: var(--_pad) calc(var(--_pad) + (var(--_n) - 1) * var(--_step-x)) calc(var(--_pad) + (var(--_n) - 1) * var(--_step-y)) var(--_pad);
+}
+.sticky-pile__notes > .sticky { --_depth: 0; grid-area: 1 / 1; z-index: calc(7 - var(--_depth)); translate: calc(var(--_depth) * var(--_step-x)) calc(var(--_depth) * var(--_step-y)); }
+.sticky-pile__notes > .sticky:nth-child(2) { --_depth: 1; }
+.sticky-pile__notes > .sticky:nth-child(3) { --_depth: 2; }
+.sticky-pile__notes > .sticky:nth-child(4) { --_depth: 3; }
+.sticky-pile__notes > .sticky:nth-child(5) { --_depth: 4; }
+.sticky-pile__notes > .sticky:nth-child(6) { --_depth: 5; }
+.sticky-pile__notes > .sticky:nth-child(n + 2) .sticky__foot { display: none; }
+.sticky-pile__notes > .sticky:nth-child(4n + 1) { rotate: var(--sticky-board-turn-1, -3deg); }
+.sticky-pile__notes > .sticky:nth-child(4n + 2) { rotate: var(--sticky-board-turn-2, 1.5deg); }
+.sticky-pile__notes > .sticky:nth-child(4n + 3) { rotate: var(--sticky-board-turn-3, 2.75deg); }
+.sticky-pile__notes > .sticky:nth-child(4n) { rotate: var(--sticky-board-turn-4, -1.75deg); }
+.sticky-pile__press { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; appearance: none; background: none; -webkit-tap-highlight-color: transparent; }
+.sticky-pile--tap .sticky-pile__notes > .sticky { pointer-events: none; }
+
 /* ---- sticky answer: the note you answer on — it waits at the screen's foot and comes to the top to be written on ----
    <div class="sticky-answer sticky-answer--writing">
      <div class="sticky-answer__scrim"></div>
@@ -4315,12 +4365,59 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 /* the SMALL stamp: stuck on a surface (a note). 48 × 60 whatever the surface's size. The stamp carries the size and the `.stamp-on` box is as wide as its stamp */
 .stamp-on > .stamp { width: var(--stamp-sm-size, var(--tap)); max-width: none; }
+/* --main: the same stuck stamp at the stamp's MAIN size, 96 × 120 (--stamp-size), to cover what it lies on (the owner's call, 2026-10-11: the home's note).
+   After the rule above, at the same weight: `main` is the one place a stuck stamp reads --stamp-size. */
+.stamp-on--main > .stamp { width: var(--stamp-size, calc(var(--tap) * 2)); }
 .stamp-on--move { will-change: transform; } /* its own layer: Safari left the stamp's shadow behind as a trail along the drag when it was painted with the note (seen on the simulator, 2026-10-07) */
 .stamp-on--move { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; transition: scale var(--motion-press) ease-out; }
 .stamp-on--move:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 .stamp-on.is-held { cursor: grabbing; z-index: 1; scale: 1.06; } /* lifted off the paper while the finger holds it */
 @media (prefers-reduced-motion: reduce) { .stamp-on.is-held { scale: 1; } }
 
+/* ---- the cross that takes a stamp off (`StampOn onRemove`): a small dark disc with an x on the stamp's top right corner ----
+   <div class="stamp-on stamp-on--move">…<button class="stamp-on__remove" aria-label="Remove"><span class="stamp-on__remove-disc"><svg class="icon">x</svg></span></button></div>
+   The button is the touch target — at least --tap-floor (44) square, invisible, centred on the corner — and the disc inside it is what is seen
+   (24). It is NOT turned with the stamp: a hand turns a stamp, a button stays square to the screen, so the cross counter-turns by the stamp's own turn. Like the
+   stamp it brings its ground and its ink (a dark disc, a pale x and a pale ring: seen on any paper and over any picture). */
+.stamp-on__remove-disc {
+  display: grid;
+  place-items: center;
+  width: var(--stamp-on-remove-size, var(--sp-6));
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background-color: var(--stamp-on-remove-bg, #141414);
+  box-shadow: 0 0 0 var(--sp-0) currentColor, 0 var(--sp-0) var(--sp-1) rgb(0 0 0 / 0.35);
+}
+.stamp-on__remove {
+  --_hit: max(var(--tap-floor), var(--stamp-on-remove-size, var(--sp-6)));
+  position: absolute;
+  top: 0;
+  right: 0;
+  translate: 50% -50%;
+  rotate: calc(var(--stamp-on-turn, 0) * -1deg);
+  display: grid;
+  place-items: center;
+  width: var(--_hit);
+  height: var(--_hit);
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: var(--stamp-on-remove-ink, #ffffff);
+  font: inherit;
+  -webkit-tap-highlight-color: transparent;
+}
+.stamp-on__remove-disc > .icon { width: 60%; height: 60%; }
+@media (prefers-reduced-motion: no-preference) { .stamp-on__remove { animation: stamp-on-remove-in var(--motion-press) ease-out; } }
+@keyframes stamp-on-remove-in { from { opacity: 0; scale: 0.6; } }
+
+/* --arrive: the stamp sticks ITSELF (StampOn `arrive`) — struck onto its place: shown large and faint, pressed a little past its
+   size, then at rest. The component reads the animation's name to tell the app it has landed. Knob: --stamp-on-arrive-time */
+@media (prefers-reduced-motion: no-preference) {
+  .stamp-on--arrive { animation: stamp-on-strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; }
+}
+@keyframes stamp-on-strike { from { scale: 2; opacity: 0; } 60% { scale: 0.92; opacity: 1; } }
+
 /* ---- css/post.css — the post: postmark, a postcard read (letter), written (desk), kept (box) ---- */
 /* cardds — the post: a postcard read (post-letter), written (post-desk) and kept (post-box), the postmark, the card stock.
    Not the `Postcard` of media.css (a member's cover card that flips) — nothing here flips, and no class is shared with it.