@usableapp/cardds 0.7.86 → 0.7.88

package/dist/cardds.css

@@ -307,6 +307,12 @@
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
 @property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }
 
+/* the ring that turns while waiting: Spinner, FormNote busy */
+@keyframes turn { to { rotate: 1turn; } }
+/* a mark struck onto paper — shown large and faint, pressed a little past its size, then at rest: StampOn `arrive`, the post desk's
+   postmark (Lh 2026-10-12: one strike for both; the postmark used to slide in from up-left, turning). Both read --stamp-on-arrive-time */
+@keyframes strike { from { scale: 2; opacity: 0; } 60% { scale: 0.92; opacity: 1; } }
+
 /* ---- css/palette.css — color settings — the file you tune ---- */
 /* ============================================================
    cardds/palette.css — COLOR SETTINGS. The only file you tune.
@@ -711,6 +717,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    screens. Children shrink to the track; they never size the card. */
 .card > * { min-width: 0; }
 
+/* LEAVE — a card that goes: up and out with a small turn, as one piece (translate and rotate only, so nothing round it moves). The post desk's
+   card once `sent` and a `Card` with `leave` read the same two knobs; the time is --motion-sheet. `.card--leaver` is a card whose app may ask it
+   to go (it holds the transition, so it comes back as it went); `.card--away` is one that has been asked. A knob of the time would read dead:
+   the knob walk switches motion off */
+:is(.card--leaver, .post-desk__card) { transition: translate var(--motion-sheet) ease, rotate var(--motion-sheet) ease; }
+:is(.card--away, .post-desk--sent .post-desk__card) { --_y: calc(var(--leave-rise, 160%) * -1); rotate: var(--leave-turn, -5deg); }
+.card--away { translate: 0 var(--_y); }
+@media (prefers-reduced-motion: reduce) { :is(.card--leaver, .post-desk__card) { transition: none; } }
+
 .card--2 { --card-bg: var(--card-2-bg); --card-ink: var(--card-2-ink); --card-muted: var(--card-2-muted); }
 /* dark/accent slot: accent-toned controls would vanish — the slot re-points
    the accent tokens, so every accent consumer (btn--primary, chip--on,
@@ -898,12 +913,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    actions.css) and scrolls up like any page — nothing is capped, nothing
    shrinks, no scroll box inside a box.
    So on a .screen that is NOT --fill the group is in flow: the column is at
-   least one phone tall, the group takes the room after the top bar and
+   least one phone tall (step.css), the group takes the room after the top bar and
    centres its children in it. The screen's own inset stays the inset.
    <div class="screen"><header class="topbar">…</header>
      <div class="screen__centre"><article class="card">…</article><div class="pager__at">…</div></div>
    </div><div class="action-bar">…</div> */
-.screen:not(.screen--fill):has(> .screen__centre) { min-height: 100dvh; display: flex; flex-direction: column; }
 .screen:not(.screen--fill) > .screen__centre { flex: 1; padding-inline: 0; align-content: center; }
 
 /* ---- the card that changes slides: out one side, the next in from the other ----
@@ -1387,7 +1401,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 /* a card standing in this room is FLAT (Lh 2026-10-09): the room clips at its own edges, and a card's shadow cut there drew a straight
    line under the bar and along the first sheet. Its ground and its radius are what say "card" here. */
-:is([data-palette], [data-finish="lit"]) .sheet-stack__base .card { box-shadow: none; }
+:is([data-palette], [data-finish]) .sheet-stack__base .card { box-shadow: none; }
 
 /* ============================================================
    .sheet-stack--flood — a closed stack whose open sheet FLOODS the screen: it rises over the top bar and fills the whole screen
@@ -2207,6 +2221,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   padding-bottom: var(--bottom-h, 0rem); /* exactly the bottom layer (measured by Screen): a page scrolls ONLY when the layer would cover its words, and then just far enough to clear them — at 100% nothing scrolls (Lh 2026-09-23) */
 }
 
+/* a SCROLLING (not fill) screen becomes a column at least one phone tall when it holds a bottom or a centre:
+   an .action-bar as its last child (Lh 2026-09-24, 0.7.0: the bar is the column's last row — at the foot when the words are short,
+   sticky to the viewport's foot while they scroll; actions.css) or a .screen__centre (Lh 2026-09-12: the group is in flow, takes the
+   room after the top bar and centres its children in it; a long one makes the page longer and runs under the bar; card.css) */
+.screen:not(.screen--fill):has(> .action-bar:last-child, > .screen__centre) { display: flex; flex-direction: column; min-height: 100dvh; }
+
 /* ============================================================
    TOP + CONTENT in one flex column; BOTTOM is a LAYER over them (Lh 2026-09-23, second call — replaces "the bar is a row"):
    in a .screen--fill the content runs to the screen's bottom edge, and the bar lies over it at the foot — it covers what is
@@ -2276,10 +2296,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   object-fit: cover;
 }
 /* an EMPTY STATE is a component in the content box too (Lh 2026-09-23 — it no longer floats in a Centre over the screen): alone in a
-   Step it stands at the human centre of the content, 40% down (two parts of room above it, three below) */
-.step:has(> .empty-state)::before { content: ""; flex: 2 1 0; }
-.step:has(> .empty-state)::after { content: ""; flex: 3 1 0; }
+   Step it stands at the human centre of the content, 40% down (two parts of room above it, three below). --empty-state-at is the share of the
+   free room that stands above it (a theme's 0.2 puts it a fifth down); a sheet's body holds an only EmptyState by the same share, but defaults to 0: at the top, as it always stood */
+.step:has(> .empty-state)::before { content: ""; flex: calc(var(--empty-state-at, 0.4) * 5) 1 0; }
+.step:has(> .empty-state)::after { content: ""; flex: calc(5 - var(--empty-state-at, 0.4) * 5) 1 0; }
 .step > .empty-state { flex: none; }
+.sheet__body:has(> .empty-state:only-child) { display: flex; flex-direction: column; gap: 0; }
+.sheet__body:has(> .empty-state:only-child)::before { content: ""; flex: calc(var(--empty-state-at, 0) * 5) 1 0; }
+.sheet__body:has(> .empty-state:only-child)::after { content: ""; flex: calc(5 - var(--empty-state-at, 0) * 5) 1 0; }
+.sheet__body > .empty-state:only-child { flex: none; }
 
 /* ---- css/forms.css — outlined fields, add-row ---- */
 /* ============================================================
@@ -2362,8 +2387,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .form-note { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin: 0; font: var(--form-note-font, var(--type-caption)); color: var(--form-note-ink, var(--card-muted)); text-align: center; }
 .form-note > .icon { flex: none; }
 .form-note--error { color: var(--form-note-error-ink, var(--signal-error)); }
-@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { animation: form-note-turn 0.9s linear infinite; } }
-@keyframes form-note-turn { to { rotate: 1turn; } }
+@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { animation: turn 0.9s linear infinite; } } /* `turn`: tokens.css */
 
 /* ---- css/journey.css — route, tile badge, note row ---- */
 /* ============================================================
@@ -2702,10 +2726,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: flex;
   gap: var(--sp-2);
 }
-/* a bar INSIDE a scrolling (not fill) screen (Lh 2026-09-24, 0.7.0): the screen is a column at least one phone tall, the bar its
+/* a bar INSIDE a scrolling (not fill) screen (Lh 2026-09-24, 0.7.0): the screen is a column at least one phone tall (step.css), the bar its
    last row — at the foot when the words are short, and sticky to the viewport's foot (above the keyboard) while they scroll;
    it takes the room it needs in the column, so nothing is added to the content for it */
-.screen:not(.screen--fill):has(> .action-bar:last-child) { display: flex; flex-direction: column; min-height: 100dvh; }
 .screen:not(.screen--fill) > .action-bar:last-child {
   position: sticky; bottom: var(--kb, 0rem);
   max-width: none;
@@ -3121,8 +3144,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    The ring turns; words beside it are optional and take the caption's look. Still when motion is reduced. */
 .spinner { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); vertical-align: middle; font: var(--type-caption); color: var(--spinner-ink, currentColor); }
 .spinner > .icon { flex: none; }
-@media (prefers-reduced-motion: no-preference) { .spinner > .icon { animation: spinner-turn 0.9s linear infinite; } }
-@keyframes spinner-turn { to { rotate: 1turn; } }
+@media (prefers-reduced-motion: no-preference) { .spinner > .icon { animation: turn 0.9s linear infinite; } } /* `turn`: tokens.css */
 
 /* ---- progress: one straight line, the done share solid, the rest faint (Lh 2026-09-22) — a voice note's
    timeline, a download, a step count as a line. <div class="progress" role="progressbar" style="--progress-at: 0.4"></div>
@@ -3309,8 +3331,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); }
 .chip--pick { position: relative; } /* the input covers the whole chip, on a row as in a grid */
 /* the hidden input, the same shape wherever a native radio/checkbox drives a picked look:
-   a chip, a mood dot, a tile (media.css) */
-:is(.chip--pick, .mood__opt, .tile--pick) > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
+   a chip, a mood dot, a tile (media.css), a sticky's tone swatch (sticky.css) — the native input lies over its whole box, unseen */
+:is(.chip--pick, .mood__opt, .tile--pick, .sticky-pick__swatch) > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
 :is(.chip--pick, .tile--pick):has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 /* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
 .chip--sign { padding-right: var(--sp-2); }
@@ -3956,7 +3978,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   box-shadow: inset 0 0 0 var(--border-w) var(--ink-tint); /* a pale tone still has an edge on a pale ground */
   cursor: pointer;
 }
-.sticky-pick__swatch > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
+/* its hidden input: the picks' one rule, choice.css */
 .sticky-pick__swatch:has(> :checked) { outline: var(--rule-w) solid currentColor; outline-offset: var(--sp-0); }
 .sticky-pick__swatch:has(> :focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 
@@ -4411,12 +4433,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 @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 */
+/* --arrive: the stamp sticks ITSELF (StampOn `arrive`) — struck onto its place (`strike`: tokens.css). 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; }
+  .stamp-on--arrive { animation: 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.
@@ -4620,10 +4641,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   width: calc(var(--_p) * 2);
   aspect-ratio: 3 / 2;
   translate: var(--_x) var(--_y);
-  transition: translate var(--motion-sheet) ease, rotate var(--motion-sheet) ease;
 }
 .post-desk--address .post-desk__card { --_x: calc(100cqi - var(--_p) * 2); }
-.post-desk--sent .post-desk__card { --_y: -160%; rotate: -5deg; }
+/* sent: the card leaves by card.css LEAVE, as a `Card` with `leave` does */
 .post-desk__half { min-width: 0; min-height: 0; padding: var(--post-desk-pad, var(--sp-5)); display: flex; flex-direction: column; }
 .post-desk__half--address { border-inline-start: var(--rule-w) solid var(--_rule); gap: var(--sp-4); }
 .post-desk__write {
@@ -4655,10 +4675,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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; }
-  .post-desk .postmark { animation: post-desk-strike var(--motion-press) ease-in both; }
+  .post-desk .postmark { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; } /* struck as a StampOn is (`strike`: tokens.css), in the same time */
 }
 @keyframes post-desk-stick { from { translate: 0 calc(-1 * var(--sp-8)); rotate: 14deg; opacity: 0; } }
-@keyframes post-desk-strike { from { translate: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-6)); rotate: -24deg; opacity: 0; } }
 /* the other half's showing edge brings it across: a tap-wide strip out to the screen's edge */
 .post-desk__reach { position: absolute; inset-block: 0; width: var(--tap); border: 0; background: transparent; }
 .post-desk__reach--address { inset-inline-end: calc(-1 * var(--screen-pad)); }
@@ -4693,7 +4712,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .post-desk__note { margin: 0; font: var(--type-caption); color: var(--post-desk-note-ink, var(--on-surface-muted)); min-height: 1.35em; }
 /* what stands where the card was, once it has left */
 .post-desk__gone { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--sp-2); }
-@media (prefers-reduced-motion: reduce) { .post-desk__card { transition: none; } }
 
 /* ============================================================
    post-box — KEEPING many. The cards whole and landscape, standing one behind another; each shows its top edge: who, where,
@@ -5402,19 +5420,37 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- css/finish.css — light, shadow, edges — only under data-finish="lit" ---- */
 /* ============================================================
-   cardds/finish.css — FINISH: light, shadow and edges. A style of its own (Lh 2026-10-02: the plain
-   look read flat, "not finished"), apart from colour: palette.css says WHICH colours, this says how
-   the material is lit. Apply with <html data-finish="lit"> beside any palette (or none, or "own").
-   No attribute = nothing here applies — the flat look, unchanged.
+   cardds/finish.css — FINISH: the finish of a card's paper. A style of its own (Lh 2026-10-02: the plain
+   look read flat, "not finished"), apart from colour: palette.css says WHICH colours, this says what the
+   material is and how it is lit. Apply with <html data-finish="…"> (or on any ancestor) beside any palette,
+   or none, or "own". No attribute = nothing here applies — the flat look, unchanged.
+
+   FINISHES — four values of the one attribute (Lh 2026-10-12, from the timebank home with each injected:
+   four finishes, variations of one concept, never new pieces; teeth · tape · ticket · slab were rejected):
+     lit     = lit from above: a lit top edge, a hairline ring and a layered shadow that grows with height; filled buttons stand up and go down under the finger; fields and pin cells are sunk.
+     print   = printed paper: an ink line in the card's own ink, a hard misregistered offset instead of a blurred shadow, paper grain over the card, a dotted rule under the head as on a printed form; information inside stays flat.
+     sticker = a die-cut sticker: a white cut line round the card, a short hard drop, a slight tilt on a lone card, buttons with a bottom edge that press down.
+     ink     = a poster / comic print: a thick line in the surface's ink round every boundary and control, a hard offset in the same ink.
+   KNOBS (set in a theme, as any knob; docs/knobs.md lists them):
+     print   --print-off (the misregistration: how far the second pass missed) · --print-grain (the grain's opacity; a ::after, so the knob walk cannot probe it)
+     sticker --sticker-cut (the paper left round the print) · --sticker-tilt (a lone card's lean; 0deg for none — a card in a stack or a list never leans)
+     ink     --ink-w (the line) · --ink-off (the offset)
+
+   Information inside a card stays flat under every finish: only a container or a control gets an edge.
+   Colours are mixes of the roles (--on-surface, --card-ink, --accent, currentColor), never plain black,
+   so a finish sits in any palette; the one plain white is the sticker's backing paper and the lit edge's light.
+   ============================================================ */
 
-   The light comes from above:
+/* every finish: the finish IS the edge, so the wireframe's two borders step back (as [data-palette] in palette.css); ink puts its own line there below */
+[data-finish] { --card-border: transparent; --action-border: transparent; }
+
+/* ============================================================
+   lit — the light comes from above:
      - a thing that stands UP (card, sheet, button) has a lit top edge, a hairline ring and a shadow
        that grows with its height: card 1 · sheet / float 2 — the layers cardds already has;
-     - a thing that is SUNK (a field, a pin cell) has its shadow inside, under its top edge;
-     - information inside a card stays flat: only a container or a control gets an edge.
+     - a thing that is SUNK (a field, a pin cell) has its shadow inside, under its top edge.
    Shadows are mixed from the ink (--on-surface), never plain black, so they sit in the palette.
    ============================================================ */
-
 [data-finish="lit"] {
   --_shade: var(--on-surface);
   --finish-edge: inset 0 1px 0 rgb(255 255 255 / 0.55);                            /* the lit top edge */
@@ -5440,9 +5476,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --finish-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 60%);
   --finish-sunk: inset 0 1px 2px color-mix(in srgb, var(--_shade) 14%, transparent), 0 1px 0 rgb(255 255 255 / 0.5);
 
-  /* the shadow is the edge: the wireframe's lines step back (as in every colour palette) */
-  --card-border: transparent;
-  --action-border: transparent;
   --outline: color-mix(in srgb, currentColor 14%, transparent);
 }
 
@@ -5484,3 +5517,74 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* ---- sunk: what the member types into ---- */
 [data-finish="lit"] :is(.field, .pin__cell) { box-shadow: var(--finish-sunk); }
 
+/* ============================================================
+   print — printed paper (riso / zine): the second pass missed by --print-off, so the card's shadow is a
+   hard offset in its own ink; a line in that ink round the card; grain over the whole card; the head
+   underlined by a dotted rule as on a printed form. A lone card's head is a form's head; a stacked
+   sheet's, a row card's, a cover's (controls over a picture) and a folded feed card's (the head is the
+   whole card) have no rule.
+   ============================================================ */
+[data-finish="print"] {
+  --_ink: color-mix(in srgb, currentColor 70%, transparent);
+  --outline: var(--_ink);
+}
+[data-finish="print"] .card {
+  border: var(--border-w) solid var(--_ink);
+  box-shadow: var(--print-off, 3px) var(--print-off, 3px) 0 0 color-mix(in srgb, var(--card-ink) 28%, transparent);
+  isolation: isolate; /* the grain's blend stays inside the card */
+}
+/* the grain: a ::after, not ::before — .card--cover's scrim is its ::before. Over everything in the card (z-index 1, the foot's own level), touches pass through it */
+[data-finish="print"] .card::after {
+  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
+  opacity: var(--print-grain, 0.32); mix-blend-mode: multiply;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+/* a dark card (the brand tone, a cover): multiply would only blacken it, so the grain lightens, fainter */
+[data-finish="print"] :is(.card--3, .card--cover)::after { mix-blend-mode: screen; opacity: calc(var(--print-grain, 0.32) * 0.56); }
+[data-finish="print"] .card:not(.card--row, .card--cover, .feed-card--small, .sheet-stack > *, .sheet-stack > :not(.sheet-stack__base) > *) > .card__head {
+  padding-bottom: var(--sp-2);
+  border-bottom: var(--rule-w) dotted color-mix(in srgb, currentColor 45%, transparent);
+}
+[data-finish="print"] :is(.btn, .chip) {
+  border-color: var(--_ink);
+  box-shadow: 2px 2px 0 0 color-mix(in srgb, currentColor 35%, transparent);
+}
+[data-finish="print"] .btn--primary { box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--card-ink) 60%, transparent); }
+[data-finish="print"] :is(.btn, .chip):active { box-shadow: none; translate: 2px 2px; }
+[data-finish="print"] .card__thumb { border-style: dashed; }
+
+/* ============================================================
+   sticker — a die-cut sticker on a sheet: --sticker-cut of white paper left round the print, a short hard
+   drop under it, a lone card leans by --sticker-tilt (the next one the other way); chunky buttons with a
+   bottom edge that press down. A card in a stack, in a list, in a feed, a sheet or a modal never leans:
+   those are placed by their holder, a lean would cut or cross them.
+   ============================================================ */
+[data-finish="sticker"] { --outline: color-mix(in srgb, currentColor 18%, transparent); }
+[data-finish="sticker"] .card {
+  box-shadow:
+    0 0 0 var(--sticker-cut, 5px) #fff,
+    0 calc(var(--sticker-cut, 5px) + 4px) 0 0 color-mix(in srgb, var(--on-surface) 16%, transparent),
+    0 calc(var(--sticker-cut, 5px) + 12px) 20px -8px color-mix(in srgb, var(--on-surface) 22%, transparent);
+}
+[data-finish="sticker"] .card:not(.sheet, .modal, .card--away, .sheet-stack *, .card-list > *, .card-feed > *) { rotate: var(--sticker-tilt, 0.8deg); }
+[data-finish="sticker"] .card:not(.sheet, .modal, .card--away, .sheet-stack *, .card-list > *, .card-feed > *):nth-of-type(even) { rotate: calc(-1 * var(--sticker-tilt, 0.8deg)); }
+[data-finish="sticker"] .card-list { gap: var(--sp-5); }
+[data-finish="sticker"] .btn {
+  box-shadow: 0 3px 0 0 color-mix(in srgb, currentColor 30%, transparent);
+  border-color: color-mix(in srgb, currentColor 25%, transparent);
+}
+[data-finish="sticker"] .btn--primary { box-shadow: 0 3px 0 0 color-mix(in srgb, var(--btn-primary-bg, var(--accent)) 55%, var(--on-surface)); }
+[data-finish="sticker"] .btn:active { box-shadow: none; translate: 0 3px; }
+[data-finish="sticker"] .chip { box-shadow: 0 0 0 3px #fff; }
+
+/* ============================================================
+   ink — a poster / comic print: --ink-w of the surface's ink round every boundary and control, and a hard
+   offset of --ink-off in the same ink. The two wireframe borders come back as that line.
+   ============================================================ */
+[data-finish="ink"] { --card-border: var(--on-surface); --action-border: var(--on-surface); --outline: currentColor; }
+[data-finish="ink"] .card { border: var(--ink-w, 2.5px) solid var(--on-surface); box-shadow: var(--ink-off, 5px) var(--ink-off, 5px) 0 0 var(--on-surface); }
+[data-finish="ink"] :is(.btn, .chip, .icon-btn:not(.icon-btn-group > *)) { border: var(--ink-w, 2.5px) solid currentColor; box-shadow: 3px 3px 0 0 currentColor; }
+[data-finish="ink"] .btn--primary { border-color: var(--on-surface); box-shadow: 3px 3px 0 0 var(--on-surface); }
+[data-finish="ink"] .toggle { box-shadow: 2px 2px 0 0 var(--on-surface); }
+[data-finish="ink"] .card__thumb { border-width: var(--ink-w, 2.5px); }
+

package/dist/cards/Card.d.ts

@@ -40,6 +40,14 @@ export interface CardProps extends ComponentProps<'article'> {
     footLink?: ReactNode;
     /** set by `SheetStack` from the app's `open` and `refreshing`. The card renders its place, its grip and its pull. Leave it unset on any other card */
     stack?: StackPlace;
+    /** THE CARD LEAVES — the card floats away: up and out with a small turn, as one piece with all it holds (a stamp that has just landed on it goes with it).
+     *  The app sets it when its own move begins (the send went out) and does what follows in `onLeft`; if the send fails the app never sets it and the card
+     *  stays. Set back to false the card stands again where it was. Controlled like an input: the app owns it, the card only moves. A card that has left
+     *  takes no taps and is hidden from assistive tech (`inert`); the room round it does not change, so nothing jumps. A card in a box that clips (a
+     *  scrolling `StackSheet` body clips at its edge) is cut there as it goes. A card that is a `SheetStack` sheet (`stack`) ignores it. Knobs `--leave-rise` · `--leave-turn` */
+    leave?: boolean;
+    /** a card that was asked to `leave` HAS left (its motion ended; at once where motion is off, or when it has no motion) — the app does what follows: changes the page, closes. Once per leave */
+    onLeft?: () => void;
 }
 /**
  * Card — ONE boundary: head · content · foot. Cards are content the system offers (the words, the thing to read).
@@ -50,8 +58,9 @@ export interface CardProps extends ComponentProps<'article'> {
  * PRESSED WHOLE: a card whose ONLY control is its foot's button, or a row card's end button, is pressed anywhere — a touch off the
  * button runs that button's own action once, and the card dims under the finger. The app writes nothing; any other card is only read.
  */
-export declare function Card({ tone, paper, sm, row, cover, fold, centre, band, as, heading, caption, end, level, foot, footLink, stack, className, style, children, onClick, ref, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
+export declare function Card({ tone, paper, sm, row, cover, fold, centre, band, as, heading, caption, end, level, foot, footLink, stack, leave, onLeft, className, style, children, onClick, ref, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
     onClick: (e: MouseEvent<HTMLElement>) => void;
+    inert?: boolean | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
     ref: (node: HTMLElement | null) => void;
     className: string;
@@ -965,7 +974,6 @@ export declare function Card({ tone, paper, sm, row, cover, fold, centre, band,
     popover?: "" | "auto" | "manual" | "hint" | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
     popoverTarget?: string | undefined;
-    inert?: boolean | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;

package/dist/cards/Card.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, createElement, isValidElement, useLayoutEffect, useRef, useState } from 'react';
+import { Children, createElement, isValidElement, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { cx } from '../cx.js';
-import { warnOnce } from '../state.js';
+import { useLatest, warnOnce } from '../state.js';
 import { CardHead } from './CardHead.js';
 import { CardFoot } from './CardFoot.js';
 import { goControl } from './cardGo.js';
@@ -15,7 +15,7 @@ import { StackHeadCtx, StackPullCtx, ownHead, stackPaint, useStackCard } from '.
  * PRESSED WHOLE: a card whose ONLY control is its foot's button, or a row card's end button, is pressed anywhere — a touch off the
  * button runs that button's own action once, and the card dims under the finger. The app writes nothing; any other card is only read.
  */
-export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'article', heading, caption, end, level, foot, footLink, stack, className, style, children, onClick, ref, ...rest }) {
+export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'article', heading, caption, end, level, foot, footLink, stack, leave, onLeft, className, style, children, onClick, ref, ...rest }) {
     const head = heading != null || caption != null || end != null;
     const tail = foot != null || footLink != null;
     if (head || tail) {
@@ -37,6 +37,19 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
         else if (passed)
             passed.current = node;
     };
+    const leaver = leave != null && !stack;
+    const away = leaver && leave;
+    const left = useLatest(onLeft);
+    useEffect(() => {
+        const card = own.current;
+        if (!away || !card)
+            return;
+        let live = true;
+        const moving = card.getAnimations().filter((a) => a instanceof CSSTransition && (a.transitionProperty === 'translate' || a.transitionProperty === 'rotate')); // the leave's own; none where motion is off
+        Promise.all(moving.map((a) => a.finished)).then(() => { if (live)
+            left.current?.(); }, () => { }); // a transition cancelled by `leave` set back rejects
+        return () => { live = false; };
+    }, [away]);
     const [go, setGo] = useState(false);
     useLayoutEffect(() => { setGo(own.current != null && goControl(own.current) != null); }); // every render: what the card holds is its children's
     const pressing = useRef(false);
@@ -77,9 +90,10 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
     const props = {
         ...rest,
         ref: setRef,
-        className: cx('card', tone && tone !== 1 && `card--${tone}`, paper && 'sheet--paper', sm && 'card--sm', row && 'card--row', cover && 'card--cover', fold && 'card--fold', centre && 'card--centre', band && 'card--band', go && 'card--go', painted.className, className),
+        className: cx('card', tone && tone !== 1 && `card--${tone}`, paper && 'sheet--paper', sm && 'card--sm', row && 'card--row', cover && 'card--cover', fold && 'card--fold', centre && 'card--centre', band && 'card--band', go && 'card--go', leaver && 'card--leaver', away && 'card--away', painted.className, className),
         style: painted.style || style ? { ...painted.style, ...style } : undefined,
         ...(stack ? { 'aria-busy': painted.busy } : {}),
+        ...(away ? { inert: true } : {}),
         onClick: click,
     };
     if (!head && !tail)

package/dist/cards/CardFeed.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, createContext, isValidElement, useContext, useId, useLayoutEffect, useRef } from 'react';
 import { cx } from '../cx.js';
-import { reducedMotion, useControlled, warnOnce } from '../state.js';
+import { reducedMotion, setRefs, useControlled, warnOnce } from '../state.js';
 import { Card } from './Card.js';
 import { CardHead } from './CardHead.js';
 import { CardFoot } from './CardFoot.js';
@@ -53,16 +53,9 @@ export function CardFeed({ big: bigProp, defaultBig, onBigChange, className, chi
         }
         tops.current = at;
     });
-    const setRef = (node) => {
-        own.current = node;
-        if (typeof ref === 'function')
-            ref(node);
-        else if (ref)
-            ref.current = node;
-    };
     if (!shown.length)
         return null;
-    return (_jsx(FeedCtx.Provider, { value: { big, grow: (id) => request(id, 'tap') }, children: _jsx("div", { ref: setRef, className: cx('card-feed', className), ...rest, children: shown }) }));
+    return (_jsx(FeedCtx.Provider, { value: { big, grow: (id) => request(id, 'tap') }, children: _jsx("div", { ref: setRefs(own, ref), className: cx('card-feed', className), ...rest, children: shown }) }));
 }
 const onSmallKey = (e) => {
     if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' '))