@usableapp/cardds 0.7.63 → 0.7.64

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 > 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.64 — 2026-10-06
+
+### Added
+- **Sticky notes** (Lh 2026-10-06) — a new family, nothing existing moves. `Sticky` is a paper note: a flat pastel block, straight, no pattern, its bottom-right corner folded, a soft shadow. `tone` picks one of nine papers (`STICKY_TONES`: cotton · blush · tea-leaf · custard · salmon · iceberg · cocoa · apricot · water; default custard); a theme retunes a paper with `--sticky-<tone>-bg`. `flat` drops the fold, `square` makes the 1:1 note you write on, `head` and `foot` are the small lines above and under the words, `corner` stands a control (an `IconBtn`) on the bottom-right corner.
+- **`Sticky date` + `StickyDate`** — the day big, the month under it, at the note's top-right: `<Sticky date={<StickyDate day="14" month="ก.พ." />}>`. cardds does not format dates: you pass the words. A picture in `head` beside a date is a small square (`--sticky-pic-size`).
+- **`Sticky tilt`** — `"left"` | `"right"` turns the note 5° (`--sticky-tilt`). A note is straight everywhere else: this is for the one note a start screen hands over (gallery `StickyWelcome`).
+- **`StickyField`** (a bare textarea on a note, `label` names it) · **`StickyPick`** (the tone chooser, `value` + `onChange`) · **`StickyThread`** + **`StickyPost`** (notes as a chat or a feed: `who` · `name` · `time` above the notes, `side="right"` for mine, `rail` draws the dotted line under the avatars).
+
+### Fixed
+- **`Callout`: the tail joins the card cleanly** — its two strokes ended past the card's border as small nubs. The tail is about 2px shorter. Nothing to change in a screen.
+
 ## 0.7.63 — 2026-10-06
 
 ### Added

package/cardds.css

@@ -14,6 +14,7 @@
 @import url("css/people.css");   /* avatar, avatar stack, chooser row */
 @import url("css/choice.css");   /* check, toggle, chip grid, days, calendar, mood, pin, composer */
 @import url("css/lists.css");    /* row, rows, key-value, kv grid, timeline, legend, link */
+@import url("css/sticky.css");   /* sticky note, its field, tone chooser, thread of posts, pile */
 @import url("css/media.css");    /* cover card, quote, tile grid, fold, mosaic, wave */
 @import url("css/layover.css");  /* ask drawer, popover menu, banner, float bar, callout */
 @import url("css/finish.css");   /* light, shadow, edges — only under data-finish="lit" */

package/css/layover.css

@@ -279,11 +279,14 @@
   content: "";
   position: absolute;
   left: 50%;
-  bottom: calc(-1 * var(--sp-2));
+  bottom: 0;
   width: var(--sp-3);
   height: var(--sp-3);
-  translate: -50% 0;
+  /* centred on the card's padding edge and cut to its lower half, so the tail's
+     strokes end flush on the card's border instead of poking past it */
+  translate: -50% 50%;
   rotate: 45deg;
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
   background: inherit;
   border: inherit;
   border-top: 0;

package/css/sticky.css

@@ -0,0 +1,187 @@
+/* cardds — sticky notes: the paper note, the field written on it, the tone chooser, a thread of posts.
+   A note is its own paper: it brings its colour and its ink, whatever card or palette it lies on. */
+
+/* ---- sticky: a paper note — a flat pastel block, straight, the bottom-right corner folded over ----
+   Straight unless asked (--tilt-left / --tilt-right: the one note of a start screen), never patterned. The corner is CUT on the diagonal and a flap of a darker shade lies over it.
+   <div class="sticky sticky--custard">
+     <div class="sticky__paper">
+       <div class="sticky__head">12 Oct</div><div class="sticky__body">…</div><div class="sticky__foot">From Noi</div>
+       <span class="sticky__fold"></span>
+     </div>
+   </div>
+   Two boxes on purpose: the OUTER one holds the tone and the shadow, the PAPER is the one that is cut — a clip-path
+   on the outer box would cut its own shadow off. The outer box's ground is kept out of the cut corner by painting
+   only its content box, which stops one fold short of the right and bottom edges; the paper's negative margins run
+   back out to the full size. The paper takes the tone by `inherit`. */
+.sticky {
+  color: var(--sticky-ink, #141414);
+  --_muted: color-mix(in srgb, currentColor 62%, transparent); /* muted words: the ink sunk into the paper (currentColor is read where it is used: there it is still the note's ink) */
+  padding-inline-end: var(--sticky-fold, var(--sp-6)); /* the knob, read by a real property first (the knob test probes that one); --_fold hands the same value to the paper and the flap */
+  --_fold: var(--sticky-fold, var(--sp-6));
+  --_min: calc(var(--tap) * 3);
+  --_cap: calc(var(--tap) * 7);
+  position: relative;
+  display: grid;
+  box-sizing: border-box;
+  width: fit-content;                              /* hugs its words… */
+  min-width: var(--sticky-min-w, var(--_min));     /* …but a word alone is still a note */
+  max-width: var(--sticky-max-w, 100%);
+  padding: 0 var(--_fold) var(--_fold) 0; /* = the line above, written whole */
+  background-clip: content-box;
+  filter: drop-shadow(var(--sticky-drop, 0 var(--sp-1) var(--sp-2) rgb(0 0 0 / 0.16))); /* drop-shadow follows the cut; a box-shadow would draw the square */
+}
+/* the tones — the names in src/sticky/tones.ts. A swatch of the chooser wears the same class. */
+.sticky--cotton   { background-color: var(--sticky-cotton-bg, #f3efe2); }
+.sticky--blush    { background-color: var(--sticky-blush-bg, #f6d5da); }
+.sticky--tea-leaf { background-color: var(--sticky-tea-leaf-bg, #d5e8c5); }
+.sticky--custard  { background-color: var(--sticky-custard-bg, #f6e9a0); }
+.sticky--salmon   { background-color: var(--sticky-salmon-bg, #f3c7b3); }
+.sticky--iceberg  { background-color: var(--sticky-iceberg-bg, #cfe0ee); }
+.sticky--cocoa    { background-color: var(--sticky-cocoa-bg, #dccbbd); }
+.sticky--apricot  { background-color: var(--sticky-apricot-bg, #f6d49a); }
+.sticky--water    { background-color: var(--sticky-water-bg, #bcd6f3); }
+
+.sticky__paper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sticky-gap, var(--sp-3));
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0 calc(-1 * var(--_fold)) calc(-1 * var(--_fold)) 0;
+  padding: var(--sticky-pad-y, var(--sp-4)) var(--sticky-pad-x, var(--sp-4));
+  border-radius: var(--sticky-radius, var(--sp-1));
+  background-color: inherit;
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_fold)), calc(100% - var(--_fold)) 100%, 0 100%);
+}
+.sticky__head { display: flex; align-items: center; gap: var(--sticky-head-gap, var(--sp-2)); font: var(--sticky-head-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); }
+.sticky__head > .ph { flex: 1 1 0; min-width: 0; } /* a picture in the head takes the note's width */
+.sticky__head:has(> .sticky-date) { align-items: start; }
+.sticky__head:has(> .sticky-date) > .ph { flex: none; width: var(--sticky-pic-size, calc(var(--tap) * 1.5)); min-height: 0; aspect-ratio: 1; } /* beside a date the picture is a small square at the start */
+.sticky__body { flex: 1 1 auto; min-width: 0; font: var(--sticky-font, var(--type-title)); overflow-wrap: anywhere; }
+.sticky__foot { font: var(--sticky-foot-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); padding-inline-end: var(--_fold); } /* the line stops before the fold */
+/* the flap: a square in the corner — the paper's cut takes its outer half, what is left is the triangle lying on the note */
+.sticky__fold {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: var(--_fold);
+  height: var(--_fold);
+  border-top-left-radius: var(--sp-1);
+  background-color: var(--sticky-fold-bg, color-mix(in srgb, currentColor 14%, transparent)); /* a darker shade of whatever the paper is */
+  box-shadow: calc(-1 * var(--sp-0)) calc(-1 * var(--sp-0)) var(--sp-1) rgb(0 0 0 / 0.08);
+}
+.sticky--flat > .sticky__paper { clip-path: none; }
+.sticky--flat > .sticky__paper > .sticky__foot { padding-inline-end: 0; }
+
+/* --tilt: the note turned a little on its middle. Straight is the rule; this is for the one note a start screen hands over. */
+.sticky--tilt-left, .sticky--tilt-right { margin-block: var(--sp-4); } /* the turned corners and the shadow need room: a box that scrolls (a centre) would cut them */
+.sticky--tilt-left { rotate: calc(-1 * var(--sticky-tilt, 5deg)); }
+.sticky--tilt-right { rotate: var(--sticky-tilt, 5deg); }
+
+/* ---- sticky date: the day, big, the month under it — at the end of the note's head (its top-right corner) ----
+   <div class="sticky__head">…<time class="sticky-date" datetime="2026-02-14"><span class="sticky-date__day">14</span><span class="sticky-date__month">ก.พ.</span></time></div> */
+.sticky-date { display: grid; justify-items: end; margin-inline-start: auto; text-align: end; color: var(--sticky-ink, #141414); }
+.sticky-date__day { font: var(--sticky-date-day-font, var(--type-stat)); }
+.sticky-date__month { font: var(--sticky-date-month-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); }
+
+/* --square: the note to write on — 1:1, as wide as its column up to a cap, in the middle */
+.sticky--square { width: 100%; max-width: var(--sticky-square-max-w, var(--_cap)); aspect-ratio: 1; margin-inline: auto; }
+
+/* --corner: a control stands ON the bottom-right corner, half outside. The paper is notched round it (a mask, so the
+   shadow follows the notch and no ground colour is needed); the note has no fold. */
+.sticky__corner {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  translate: 50% 50%;
+  display: grid;
+  place-items: center;
+  width: var(--sticky-corner-size, var(--tap-sm));
+  aspect-ratio: 1;
+}
+/* the half of the control that stands outside is the note's own room: it never runs past the column, nor onto what follows */
+.sticky--corner {
+  --_corner: var(--sticky-corner-size, var(--tap-sm)); /* the same default as .sticky__corner above: the paper's notch needs it too */
+  max-width: calc(var(--sticky-max-w, 100%) - var(--_corner) / 2);
+  margin: 0 calc(var(--_corner) / 2) calc(var(--_corner) / 2) 0;
+}
+.sticky--corner > .sticky__paper {
+  --_notch: calc(var(--_corner) / 2 + var(--sp-1));
+  clip-path: none;
+  -webkit-mask: radial-gradient(circle at 100% 100%, transparent calc(var(--_notch) - var(--border-w)), #000 var(--_notch));
+  mask: radial-gradient(circle at 100% 100%, transparent calc(var(--_notch) - var(--border-w)), #000 var(--_notch));
+}
+
+/* ---- sticky field: the words written ON a note — a bare textarea in the note's type and ink, filling it ----
+   <div class="sticky__body"><textarea class="sticky-field" aria-label="Note" placeholder="Add text to this note"></textarea></div> */
+.sticky__body:has(> .sticky-field) { display: grid; }
+.sticky-field {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--sticky-field-min-h, var(--_min));
+  resize: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none; /* the caret is the focus mark, as in the composer */
+}
+.sticky-field::placeholder { color: var(--sticky-muted-ink, var(--_muted)); opacity: 1; }
+
+/* ---- sticky pick: the tone chooser — round swatches at tap size, the chosen one ringed ----
+   <div class="sticky-pick" role="radiogroup" aria-label="Note colour">
+     <label class="sticky-pick__swatch sticky--blush"><input type="radio" name="…" aria-label="blush"></label>…
+   </div> */
+.sticky-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sticky-pick-gap, var(--sp-3)); }
+.sticky-pick__swatch {
+  position: relative;
+  flex: none;
+  width: var(--sticky-pick-size, var(--tap));
+  aspect-ratio: 1;
+  border-radius: var(--r-chip);
+  color: var(--sticky-pick-on-ink, var(--on-surface)); /* the ring's colour */
+  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; }
+.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); }
+
+/* ---- sticky thread: a chat or a feed told in notes ----
+   <div class="sticky-thread sticky-thread--rail">
+     <div class="sticky-post">
+       <span class="sticky-post__who"><span class="avatar">…</span></span>
+       <div class="sticky-post__head"><span class="sticky-post__name">Noi</span><span class="sticky-post__time">8:15</span></div>
+       <span class="sticky-post__rail"></span>
+       <div class="sticky-post__notes"><div class="sticky">…</div></div>
+     </div>
+     <div class="sticky-post sticky-post--right">…</div>
+   </div>
+   Two columns: the avatar, then everything else — so the notes start under the NAME. --right swaps the columns. */
+.sticky-thread { display: grid; gap: var(--sticky-thread-gap, var(--sp-6)); --_thread-gap: var(--sticky-thread-gap, var(--sp-6)); } /* --_thread-gap: the same value, for the rail to run through */
+.sticky-post {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: var(--sticky-post-col-gap, var(--sp-3));
+  row-gap: var(--sticky-post-row-gap, var(--sp-2));
+}
+.sticky-post:not(:has(> .sticky-post__who)) { column-gap: 0; } /* nobody pictured: no empty column's gap */
+.sticky-post__who { grid-area: 1 / 1; display: grid; }
+.sticky-post__head { grid-area: 1 / 2; display: flex; align-items: baseline; gap: var(--sticky-post-head-gap, var(--sp-2)); min-width: 0; }
+.sticky-post__name { min-width: 0; font: var(--sticky-post-name-font, var(--type-label)); overflow-wrap: anywhere; }
+.sticky-post__time { margin-inline-start: auto; font: var(--sticky-post-time-font, var(--type-caption)); color: var(--sticky-post-time-ink, var(--on-surface-muted)); white-space: nowrap; }
+.sticky-post__notes { grid-area: 2 / 2; display: grid; justify-items: start; gap: var(--sticky-post-notes-gap, var(--sp-3)); min-width: 0; }
+.sticky-post__notes > .sticky { max-width: var(--sticky-post-max-w, 85%); } /* a note leaves the far side open, as a bubble does */
+.sticky-post__rail { display: none; grid-area: 2 / 1; justify-self: center; align-self: stretch; color: var(--sticky-thread-rail-ink, var(--on-surface-muted)); border-inline-start: var(--rule-w) dotted currentColor; margin-block-end: calc(-1 * var(--_thread-gap)); } /* runs on through the gap to the next avatar */
+.sticky-thread--rail > .sticky-post:not(:last-child) > .sticky-post__rail { display: block; }
+.sticky-post--right { grid-template-columns: minmax(0, 1fr) auto; }
+.sticky-post--right > .sticky-post__who { grid-column: 2; }
+.sticky-post--right > .sticky-post__head { grid-column: 1; flex-direction: row-reverse; }
+.sticky-post--right > .sticky-post__head > .sticky-post__time { margin-inline: 0 auto; }
+.sticky-post--right > .sticky-post__notes { grid-column: 1; justify-items: end; }
+.sticky-post--right > .sticky-post__rail { grid-column: 2; }

package/dist/cardds.css

@@ -3597,6 +3597,195 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .bullets__pic.ph { border-radius: var(--bullets-pic-radius, 0rem); }
 .bullets__text { flex: 1; min-width: 0; }
 
+/* ---- css/sticky.css — sticky note, its field, tone chooser, thread of posts, pile ---- */
+/* cardds — sticky notes: the paper note, the field written on it, the tone chooser, a thread of posts.
+   A note is its own paper: it brings its colour and its ink, whatever card or palette it lies on. */
+
+/* ---- sticky: a paper note — a flat pastel block, straight, the bottom-right corner folded over ----
+   Straight unless asked (--tilt-left / --tilt-right: the one note of a start screen), never patterned. The corner is CUT on the diagonal and a flap of a darker shade lies over it.
+   <div class="sticky sticky--custard">
+     <div class="sticky__paper">
+       <div class="sticky__head">12 Oct</div><div class="sticky__body">…</div><div class="sticky__foot">From Noi</div>
+       <span class="sticky__fold"></span>
+     </div>
+   </div>
+   Two boxes on purpose: the OUTER one holds the tone and the shadow, the PAPER is the one that is cut — a clip-path
+   on the outer box would cut its own shadow off. The outer box's ground is kept out of the cut corner by painting
+   only its content box, which stops one fold short of the right and bottom edges; the paper's negative margins run
+   back out to the full size. The paper takes the tone by `inherit`. */
+.sticky {
+  color: var(--sticky-ink, #141414);
+  --_muted: color-mix(in srgb, currentColor 62%, transparent); /* muted words: the ink sunk into the paper (currentColor is read where it is used: there it is still the note's ink) */
+  padding-inline-end: var(--sticky-fold, var(--sp-6)); /* the knob, read by a real property first (the knob test probes that one); --_fold hands the same value to the paper and the flap */
+  --_fold: var(--sticky-fold, var(--sp-6));
+  --_min: calc(var(--tap) * 3);
+  --_cap: calc(var(--tap) * 7);
+  position: relative;
+  display: grid;
+  box-sizing: border-box;
+  width: fit-content;                              /* hugs its words… */
+  min-width: var(--sticky-min-w, var(--_min));     /* …but a word alone is still a note */
+  max-width: var(--sticky-max-w, 100%);
+  padding: 0 var(--_fold) var(--_fold) 0; /* = the line above, written whole */
+  background-clip: content-box;
+  filter: drop-shadow(var(--sticky-drop, 0 var(--sp-1) var(--sp-2) rgb(0 0 0 / 0.16))); /* drop-shadow follows the cut; a box-shadow would draw the square */
+}
+/* the tones — the names in src/sticky/tones.ts. A swatch of the chooser wears the same class. */
+.sticky--cotton   { background-color: var(--sticky-cotton-bg, #f3efe2); }
+.sticky--blush    { background-color: var(--sticky-blush-bg, #f6d5da); }
+.sticky--tea-leaf { background-color: var(--sticky-tea-leaf-bg, #d5e8c5); }
+.sticky--custard  { background-color: var(--sticky-custard-bg, #f6e9a0); }
+.sticky--salmon   { background-color: var(--sticky-salmon-bg, #f3c7b3); }
+.sticky--iceberg  { background-color: var(--sticky-iceberg-bg, #cfe0ee); }
+.sticky--cocoa    { background-color: var(--sticky-cocoa-bg, #dccbbd); }
+.sticky--apricot  { background-color: var(--sticky-apricot-bg, #f6d49a); }
+.sticky--water    { background-color: var(--sticky-water-bg, #bcd6f3); }
+
+.sticky__paper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sticky-gap, var(--sp-3));
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0 calc(-1 * var(--_fold)) calc(-1 * var(--_fold)) 0;
+  padding: var(--sticky-pad-y, var(--sp-4)) var(--sticky-pad-x, var(--sp-4));
+  border-radius: var(--sticky-radius, var(--sp-1));
+  background-color: inherit;
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_fold)), calc(100% - var(--_fold)) 100%, 0 100%);
+}
+.sticky__head { display: flex; align-items: center; gap: var(--sticky-head-gap, var(--sp-2)); font: var(--sticky-head-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); }
+.sticky__head > .ph { flex: 1 1 0; min-width: 0; } /* a picture in the head takes the note's width */
+.sticky__head:has(> .sticky-date) { align-items: start; }
+.sticky__head:has(> .sticky-date) > .ph { flex: none; width: var(--sticky-pic-size, calc(var(--tap) * 1.5)); min-height: 0; aspect-ratio: 1; } /* beside a date the picture is a small square at the start */
+.sticky__body { flex: 1 1 auto; min-width: 0; font: var(--sticky-font, var(--type-title)); overflow-wrap: anywhere; }
+.sticky__foot { font: var(--sticky-foot-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); padding-inline-end: var(--_fold); } /* the line stops before the fold */
+/* the flap: a square in the corner — the paper's cut takes its outer half, what is left is the triangle lying on the note */
+.sticky__fold {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: var(--_fold);
+  height: var(--_fold);
+  border-top-left-radius: var(--sp-1);
+  background-color: var(--sticky-fold-bg, color-mix(in srgb, currentColor 14%, transparent)); /* a darker shade of whatever the paper is */
+  box-shadow: calc(-1 * var(--sp-0)) calc(-1 * var(--sp-0)) var(--sp-1) rgb(0 0 0 / 0.08);
+}
+.sticky--flat > .sticky__paper { clip-path: none; }
+.sticky--flat > .sticky__paper > .sticky__foot { padding-inline-end: 0; }
+
+/* --tilt: the note turned a little on its middle. Straight is the rule; this is for the one note a start screen hands over. */
+.sticky--tilt-left, .sticky--tilt-right { margin-block: var(--sp-4); } /* the turned corners and the shadow need room: a box that scrolls (a centre) would cut them */
+.sticky--tilt-left { rotate: calc(-1 * var(--sticky-tilt, 5deg)); }
+.sticky--tilt-right { rotate: var(--sticky-tilt, 5deg); }
+
+/* ---- sticky date: the day, big, the month under it — at the end of the note's head (its top-right corner) ----
+   <div class="sticky__head">…<time class="sticky-date" datetime="2026-02-14"><span class="sticky-date__day">14</span><span class="sticky-date__month">ก.พ.</span></time></div> */
+.sticky-date { display: grid; justify-items: end; margin-inline-start: auto; text-align: end; color: var(--sticky-ink, #141414); }
+.sticky-date__day { font: var(--sticky-date-day-font, var(--type-stat)); }
+.sticky-date__month { font: var(--sticky-date-month-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); }
+
+/* --square: the note to write on — 1:1, as wide as its column up to a cap, in the middle */
+.sticky--square { width: 100%; max-width: var(--sticky-square-max-w, var(--_cap)); aspect-ratio: 1; margin-inline: auto; }
+
+/* --corner: a control stands ON the bottom-right corner, half outside. The paper is notched round it (a mask, so the
+   shadow follows the notch and no ground colour is needed); the note has no fold. */
+.sticky__corner {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  translate: 50% 50%;
+  display: grid;
+  place-items: center;
+  width: var(--sticky-corner-size, var(--tap-sm));
+  aspect-ratio: 1;
+}
+/* the half of the control that stands outside is the note's own room: it never runs past the column, nor onto what follows */
+.sticky--corner {
+  --_corner: var(--sticky-corner-size, var(--tap-sm)); /* the same default as .sticky__corner above: the paper's notch needs it too */
+  max-width: calc(var(--sticky-max-w, 100%) - var(--_corner) / 2);
+  margin: 0 calc(var(--_corner) / 2) calc(var(--_corner) / 2) 0;
+}
+.sticky--corner > .sticky__paper {
+  --_notch: calc(var(--_corner) / 2 + var(--sp-1));
+  clip-path: none;
+  -webkit-mask: radial-gradient(circle at 100% 100%, transparent calc(var(--_notch) - var(--border-w)), #000 var(--_notch));
+  mask: radial-gradient(circle at 100% 100%, transparent calc(var(--_notch) - var(--border-w)), #000 var(--_notch));
+}
+
+/* ---- sticky field: the words written ON a note — a bare textarea in the note's type and ink, filling it ----
+   <div class="sticky__body"><textarea class="sticky-field" aria-label="Note" placeholder="Add text to this note"></textarea></div> */
+.sticky__body:has(> .sticky-field) { display: grid; }
+.sticky-field {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--sticky-field-min-h, var(--_min));
+  resize: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none; /* the caret is the focus mark, as in the composer */
+}
+.sticky-field::placeholder { color: var(--sticky-muted-ink, var(--_muted)); opacity: 1; }
+
+/* ---- sticky pick: the tone chooser — round swatches at tap size, the chosen one ringed ----
+   <div class="sticky-pick" role="radiogroup" aria-label="Note colour">
+     <label class="sticky-pick__swatch sticky--blush"><input type="radio" name="…" aria-label="blush"></label>…
+   </div> */
+.sticky-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sticky-pick-gap, var(--sp-3)); }
+.sticky-pick__swatch {
+  position: relative;
+  flex: none;
+  width: var(--sticky-pick-size, var(--tap));
+  aspect-ratio: 1;
+  border-radius: var(--r-chip);
+  color: var(--sticky-pick-on-ink, var(--on-surface)); /* the ring's colour */
+  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; }
+.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); }
+
+/* ---- sticky thread: a chat or a feed told in notes ----
+   <div class="sticky-thread sticky-thread--rail">
+     <div class="sticky-post">
+       <span class="sticky-post__who"><span class="avatar">…</span></span>
+       <div class="sticky-post__head"><span class="sticky-post__name">Noi</span><span class="sticky-post__time">8:15</span></div>
+       <span class="sticky-post__rail"></span>
+       <div class="sticky-post__notes"><div class="sticky">…</div></div>
+     </div>
+     <div class="sticky-post sticky-post--right">…</div>
+   </div>
+   Two columns: the avatar, then everything else — so the notes start under the NAME. --right swaps the columns. */
+.sticky-thread { display: grid; gap: var(--sticky-thread-gap, var(--sp-6)); --_thread-gap: var(--sticky-thread-gap, var(--sp-6)); } /* --_thread-gap: the same value, for the rail to run through */
+.sticky-post {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: var(--sticky-post-col-gap, var(--sp-3));
+  row-gap: var(--sticky-post-row-gap, var(--sp-2));
+}
+.sticky-post:not(:has(> .sticky-post__who)) { column-gap: 0; } /* nobody pictured: no empty column's gap */
+.sticky-post__who { grid-area: 1 / 1; display: grid; }
+.sticky-post__head { grid-area: 1 / 2; display: flex; align-items: baseline; gap: var(--sticky-post-head-gap, var(--sp-2)); min-width: 0; }
+.sticky-post__name { min-width: 0; font: var(--sticky-post-name-font, var(--type-label)); overflow-wrap: anywhere; }
+.sticky-post__time { margin-inline-start: auto; font: var(--sticky-post-time-font, var(--type-caption)); color: var(--sticky-post-time-ink, var(--on-surface-muted)); white-space: nowrap; }
+.sticky-post__notes { grid-area: 2 / 2; display: grid; justify-items: start; gap: var(--sticky-post-notes-gap, var(--sp-3)); min-width: 0; }
+.sticky-post__notes > .sticky { max-width: var(--sticky-post-max-w, 85%); } /* a note leaves the far side open, as a bubble does */
+.sticky-post__rail { display: none; grid-area: 2 / 1; justify-self: center; align-self: stretch; color: var(--sticky-thread-rail-ink, var(--on-surface-muted)); border-inline-start: var(--rule-w) dotted currentColor; margin-block-end: calc(-1 * var(--_thread-gap)); } /* runs on through the gap to the next avatar */
+.sticky-thread--rail > .sticky-post:not(:last-child) > .sticky-post__rail { display: block; }
+.sticky-post--right { grid-template-columns: minmax(0, 1fr) auto; }
+.sticky-post--right > .sticky-post__who { grid-column: 2; }
+.sticky-post--right > .sticky-post__head { grid-column: 1; flex-direction: row-reverse; }
+.sticky-post--right > .sticky-post__head > .sticky-post__time { margin-inline: 0 auto; }
+.sticky-post--right > .sticky-post__notes { grid-column: 1; justify-items: end; }
+.sticky-post--right > .sticky-post__rail { grid-column: 2; }
+
 /* ---- css/media.css — cover card, quote, tile grid, fold, mosaic, wave ---- */
 /* ============================================================
    cardds/media.css — media & display inside cards:
@@ -4161,11 +4350,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   content: "";
   position: absolute;
   left: 50%;
-  bottom: calc(-1 * var(--sp-2));
+  bottom: 0;
   width: var(--sp-3);
   height: var(--sp-3);
-  translate: -50% 0;
+  /* centred on the card's padding edge and cut to its lower half, so the tail's
+     strokes end flush on the card's border instead of poking past it */
+  translate: -50% 50%;
   rotate: 45deg;
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
   background: inherit;
   border: inherit;
   border-top: 0;

package/dist/index.d.ts

@@ -72,6 +72,12 @@ export * from './lists/Timeline.js';
 export * from './lists/Legend.js';
 export * from './lists/Bullets.js';
 export * from './lists/Bubble.js';
+export * from './sticky/tones.js';
+export * from './sticky/Sticky.js';
+export * from './sticky/StickyDate.js';
+export * from './sticky/StickyField.js';
+export * from './sticky/StickyPick.js';
+export * from './sticky/StickyThread.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';
 export * from './media/MapArea.js';

package/dist/index.js

@@ -76,6 +76,12 @@ export * from './lists/Timeline.js';
 export * from './lists/Legend.js';
 export * from './lists/Bullets.js';
 export * from './lists/Bubble.js';
+export * from './sticky/tones.js';
+export * from './sticky/Sticky.js';
+export * from './sticky/StickyDate.js';
+export * from './sticky/StickyField.js';
+export * from './sticky/StickyPick.js';
+export * from './sticky/StickyThread.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';
 export * from './media/MapArea.js';

package/dist/sticky/Sticky.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { StickyTone } from './tones.js';
+export interface StickyProps extends ComponentProps<'div'> {
+    /** the paper's colour — one of STICKY_TONES (default custard) */
+    tone?: StickyTone;
+    /** no folded corner */
+    flat?: boolean;
+    /** 1:1, filling its column up to a cap (the write screen); otherwise the note hugs its words */
+    square?: boolean;
+    /** a row at the top of the note — a date, a small picture, a label */
+    head?: ReactNode;
+    /** a StickyDate at the end of the head — the note's top-right corner */
+    date?: ReactNode;
+    /** turned a little on its middle (the one note of a start screen); a note is straight otherwise */
+    tilt?: 'left' | 'right';
+    /** a small muted line at the bottom ("From …") */
+    foot?: ReactNode;
+    /** a control (an IconBtn) standing on the bottom-right corner, half outside the note; the note then has no fold */
+    corner?: ReactNode;
+}
+/**
+ * Sticky — a paper note: a flat pastel block, straight, its bottom-right corner folded over, a soft shadow under it.
+ * The outer box holds the tone and the shadow; the paper inside is the part that is cut (a clip would cut the shadow too).
+ */
+export declare function Sticky({ tone, flat, square, head, date, tilt, foot, corner, className, children, ...rest }: StickyProps): import("react").JSX.Element;

package/dist/sticky/Sticky.js

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/**
+ * Sticky — a paper note: a flat pastel block, straight, its bottom-right corner folded over, a soft shadow under it.
+ * The outer box holds the tone and the shadow; the paper inside is the part that is cut (a clip would cut the shadow too).
+ */
+export function Sticky({ tone = 'custard', flat, square, head, date, tilt, foot, corner, className, children, ...rest }) {
+    const notched = corner != null;
+    return (_jsxs("div", { className: cx('sticky', `sticky--${tone}`, flat && 'sticky--flat', square && 'sticky--square', notched && 'sticky--corner', tilt && `sticky--tilt-${tilt}`, className), ...rest, children: [_jsxs("div", { className: "sticky__paper", children: [(head != null || date != null) && _jsxs("div", { className: "sticky__head", children: [head, date] }), _jsx("div", { className: "sticky__body", children: children }), foot != null && _jsx("div", { className: "sticky__foot", children: foot }), !flat && !notched && _jsx("span", { className: "sticky__fold", "aria-hidden": "true" })] }), notched && _jsx("div", { className: "sticky__corner", children: corner })] }));
+}

package/dist/sticky/StickyDate.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps, ReactNode } from 'react';
+export interface StickyDateProps extends ComponentProps<'time'> {
+    /** the day of the month, shown big */
+    day: ReactNode;
+    /** the month, short, under the day — the app's own words ("ก.พ.", "Feb") */
+    month: ReactNode;
+}
+/** StickyDate — a date for a Sticky's `date`: the day big, the month under it, at the note's top-right corner. */
+export declare function StickyDate({ day, month, className, ...rest }: StickyDateProps): import("react").JSX.Element;

package/dist/sticky/StickyDate.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/** StickyDate — a date for a Sticky's `date`: the day big, the month under it, at the note's top-right corner. */
+export function StickyDate({ day, month, className, ...rest }) {
+    return (_jsxs("time", { className: cx('sticky-date', className), ...rest, children: [_jsx("span", { className: "sticky-date__day", children: day }), _jsx("span", { className: "sticky-date__month", children: month })] }));
+}

package/dist/sticky/StickyField.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react';
+export interface StickyFieldProps extends ComponentProps<'textarea'> {
+    /** what is being written — the field's accessible name (it has no visible label) */
+    label: string;
+}
+/** StickyField — the words written ON a Sticky: a bare textarea in the note's own type and ink, filling the note. */
+export declare function StickyField({ label, className, ...rest }: StickyFieldProps): import("react").JSX.Element;

package/dist/sticky/StickyField.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/** StickyField — the words written ON a Sticky: a bare textarea in the note's own type and ink, filling the note. */
+export function StickyField({ label, className, ...rest }) {
+    return _jsx("textarea", { className: cx('sticky-field', className), "aria-label": label, ...rest });
+}

package/dist/sticky/StickyPick.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react';
+import type { StickyTone } from './tones.js';
+export interface StickyPickProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /** CONTROLLED: the chosen tone — with `onChange` */
+    value: StickyTone;
+    /** the tone the member tapped */
+    onChange?: (tone: StickyTone) => void;
+    /** the tones on offer, in order (default: all of STICKY_TONES) */
+    tones?: readonly StickyTone[];
+    /** the group's accessible name */
+    label: string;
+}
+/** StickyPick — the tone chooser: a row of round swatches at tap size, the chosen one ringed. Native radios: the arrows move the choice. */
+export declare function StickyPick({ value, onChange, tones, label, className, ...rest }: StickyPickProps): import("react").JSX.Element;

package/dist/sticky/StickyPick.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cx } from '../cx.js';
+import { STICKY_TONES } from './tones.js';
+/** StickyPick — the tone chooser: a row of round swatches at tap size, the chosen one ringed. Native radios: the arrows move the choice. */
+export function StickyPick({ value, onChange, tones = STICKY_TONES, label, className, ...rest }) {
+    const name = useId();
+    return (_jsx("div", { className: cx('sticky-pick', className), role: "radiogroup", "aria-label": label, ...rest, children: tones.map((tone) => (_jsx("label", { className: cx('sticky-pick__swatch', `sticky--${tone}`), children: _jsx("input", { type: "radio", name: name, value: tone, "aria-label": tone, checked: tone === value, onChange: () => onChange?.(tone) }) }, tone))) }));
+}

package/dist/sticky/StickyThread.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps, ReactNode } from 'react';
+export interface StickyThreadProps extends ComponentProps<'div'> {
+    /** a dotted line running down under the avatars, post to post (a feed) */
+    rail?: boolean;
+}
+/** StickyThread — a stack of StickyPosts: a chat or a feed told in notes. */
+export declare function StickyThread({ rail, className, ...rest }: StickyThreadProps): import("react").JSX.Element;
+export interface StickyPostProps extends ComponentProps<'div'> {
+    /** who wrote it (an Avatar) */
+    who?: ReactNode;
+    /** their name, beside the avatar */
+    name?: ReactNode;
+    /** when, at the far end of the head row */
+    time?: ReactNode;
+    /** whose: theirs on the left (default), mine on the right */
+    side?: 'left' | 'right';
+}
+/**
+ * StickyPost — one person's turn: a head row (avatar · name · time at the far end) and, under the name, their Sticky notes.
+ * `side="right"` mirrors it. The rail mark is always there; only a `StickyThread rail` draws it.
+ */
+export declare function StickyPost({ who, name, time, side, className, children, ...rest }: StickyPostProps): import("react").JSX.Element;

package/dist/sticky/StickyThread.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/** StickyThread — a stack of StickyPosts: a chat or a feed told in notes. */
+export function StickyThread({ rail, className, ...rest }) {
+    return _jsx("div", { className: cx('sticky-thread', rail && 'sticky-thread--rail', className), ...rest });
+}
+/**
+ * StickyPost — one person's turn: a head row (avatar · name · time at the far end) and, under the name, their Sticky notes.
+ * `side="right"` mirrors it. The rail mark is always there; only a `StickyThread rail` draws it.
+ */
+export function StickyPost({ who, name, time, side = 'left', className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('sticky-post', side === 'right' && 'sticky-post--right', className), ...rest, children: [who != null && _jsx("span", { className: "sticky-post__who", children: who }), _jsxs("div", { className: "sticky-post__head", children: [name != null && _jsx("span", { className: "sticky-post__name", children: name }), time != null && _jsx("span", { className: "sticky-post__time", children: time })] }), _jsx("span", { className: "sticky-post__rail", "aria-hidden": "true" }), _jsx("div", { className: "sticky-post__notes", children: children })] }));
+}

package/dist/sticky/tones.d.ts

@@ -0,0 +1,2 @@
+export declare const STICKY_TONES: readonly ["cotton", "blush", "tea-leaf", "custard", "salmon", "iceberg", "cocoa", "apricot", "water"];
+export type StickyTone = (typeof STICKY_TONES)[number];

package/dist/sticky/tones.js

@@ -0,0 +1,2 @@
+/* the sticky notes' stock tones — the one list. css/sticky.css has a `.sticky--<tone>` class per name; nothing else knows a tone. */
+export const STICKY_TONES = ['cotton', 'blush', 'tea-leaf', 'custard', 'salmon', 'iceberg', 'cocoa', 'apricot', 'water'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.63",
+  "version": "0.7.64",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",