@usableapp/cardds 0.4.0 → 0.4.2

package/dist/cardds.css

@@ -492,6 +492,11 @@ button { font: inherit; cursor: pointer; }
   padding-block: var(--base-content-pad-y, var(--sp-4));
 }
 .base-content > .t-body { color: var(--on-surface-muted); max-width: 34ch; }
+/* an illustration among the words (Lh 2026-09-22): capped, so a tall picture never pushes the words under the bar;
+   the "where am I" dots under the words, centred — the same dots the centred card has under it */
+.base-content > :is(img, .ph) { max-height: var(--base-content-media-h, 14rem); width: auto; max-width: 100%; object-fit: contain; justify-self: start; }
+.base-content > .ph { width: 100%; height: var(--base-content-media-h, 14rem); }
+.base-content > .pager__at { justify-self: center; }
 .base-content .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */
@@ -839,7 +844,7 @@ button { font: inherit; cursor: pointer; }
    <div class="sheet-stack sheet-stack--tap">   (drop --tap for a static stack)
      <article class="card card--2">
        <div class="card__head">
-         <button class="icon-btn icon-btn--sm card__back" aria-label="Back">…</button>
+         <button class="icon-btn icon-btn--sm sheet-stack__back" aria-label="Back">…</button>
          <h2 class="t-h2 t-caps">Shopping</h2>
          <span class="icon-row">…</span>              (optional trailing icons)
        </div>
@@ -1063,7 +1068,7 @@ button { font: inherit; cursor: pointer; }
 .sheet-stack--tap > .card.is-open > .card__head {
   padding-left: calc(var(--tap-sm) + var(--sp-3));
 }
-.sheet-stack--tap .card__back {
+.sheet-stack--tap .sheet-stack__back {
   position: absolute;
   left: 0;
   top: 50%;
@@ -1072,7 +1077,7 @@ button { font: inherit; cursor: pointer; }
   visibility: hidden;
   transition: opacity 0.35s ease, visibility 0.35s;
 }
-.sheet-stack--tap > .card.is-open .card__back {
+.sheet-stack--tap > .card.is-open .sheet-stack__back {
   opacity: 1;
   visibility: visible;
 }
@@ -1330,8 +1335,13 @@ button { font: inherit; cursor: pointer; }
   inset-inline: var(--screen-pad);
   top: var(--_band-centre);
   translate: 0 -50%;
-  /* no z-index: it follows the background in DOM order and the sheet, later, covers it at full */
+  /* as tall as the band less the screen's inset at both ends (Lh 2026-09-22: the room under the hero = the room at its sides);
+     what it holds fills it (a postcard's min-height gives way) */
+  height: calc((100cqh - var(--_top, 0rem)) / 2 - 2 * var(--screen-pad));
+  display: grid;
 }
+.sheet-stage > .sheet-stage__hero > * { min-height: 0; } /* outranks a component's own min-height (the postcard's) */
+/* no z-index on the hero: it follows the background in DOM order and the sheet, later, covers it at full */
 
 /* ---- map: the box a map engine draws in, behind a stage sheet ----
    <div class="sheet-stage__bg"><div class="map"><div>…the engine's canvas…</div>
@@ -1407,10 +1417,9 @@ button { font: inherit; cursor: pointer; }
 /* EVERY sheet has one shape (Lh, 2026-09-21): the handle and the head stay at the top and never scroll · the
    foot's button stands at the bottom, and ABOVE the keyboard when there is one · everything between them
    scrolls, as far as it needs to. In a .step the keyboard's room is the step's (--kb, step.css); on a stage
-   the sheet gives it up itself, as --_lift — the same token a raised sheet floats on. */
+   the sheet gives it up itself, as --_lift. (A sheet ALWAYS stands on the floor — `.sheet--raised`, the one that
+   floated above a footnote strip on a dim stage, was retired 2026-09-22: that is a Modal's job.) */
 .sheet-stage > .sheet { --_lift: var(--kb, 0rem); bottom: var(--_lift); }
-.sheet-stage > .sheet--raised { --_lift: calc(var(--tap-lg) + var(--kb, 0rem)); }
-.sheet--raised { --_lift: var(--tap-lg); bottom: var(--_lift); border-radius: var(--sheet-raised-radius, var(--r-card)); border-bottom: var(--border-w) solid var(--card-border); }
 .sheet-stage__foot {
   position: absolute;
   inset-inline: 0;
@@ -2211,6 +2220,22 @@ button { font: inherit; cursor: pointer; }
 .bar--on::after { background: var(--accent); }
 .bar--on > span { background: var(--accent); color: var(--on-accent); padding: var(--sp-0) var(--sp-2); border-radius: var(--r-chip); }
 
+/* ---- 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>
+   --progress-at is DATA the component writes (0–1), not a knob (scripts/knobs.mjs lists it). The done part is a
+   gradient of the line's ink sized by the share; the rest is the background colour. */
+.progress {
+  display: block;
+  width: 100%;
+  height: var(--progress-h, var(--sp-1));
+  border-radius: var(--progress-radius, var(--r-chip));
+  color: var(--progress-done-ink, inherit);
+  background-color: var(--progress-rest-bg, color-mix(in srgb, currentColor 25%, transparent));
+  background-image: linear-gradient(currentColor, currentColor);
+  background-size: calc(var(--progress-at, 0) * 100%) 100%;
+  background-repeat: no-repeat;
+}
+
 /* ---- css/people.css — avatar, avatar stack, chooser row ---- */
 /* ============================================================
    cardds/people.css — avatars: single, stacked, chooser row.
@@ -2625,6 +2650,15 @@ button { font: inherit; cursor: pointer; }
 .row__end { margin-left: auto; text-align: right; display: grid; gap: var(--row-end-gap, var(--sp-0)); justify-items: end; flex: none; }
 .row--lg { min-height: var(--row-lg-min-h, var(--fab)); } /* menu rows: a taller target, round arrow at the end; .rows gives them more air */
 .row--lg .row__title { font: 700 var(--fs-lg)/1.2 var(--font-display); }
+/* a row that EXPANDS (Lh 2026-09-22): the row is a <details>' summary, what it shows comes out under it —
+   who liked a postcard, the rest of a list. An end chevron turns when open. The app owns the list.
+   <details class="row-expand"><summary class="row">…lead · body · end…</summary><div class="row-expand__more">…</div></details> */
+.row-expand { display: block; }
+.row-expand > summary { list-style: none; cursor: pointer; }
+.row-expand > summary::-webkit-details-marker { display: none; }
+.row-expand > summary > .icon:last-child { transition: rotate var(--motion-slide); }
+.row-expand[open] > summary > .icon:last-child { rotate: 180deg; }
+.row-expand__more { padding-top: var(--row-expand-gap, var(--sp-3)); }
 /* a finished item in a checklist (a to-do list, an onboarding "complete your introduction" list):
    the words go muted, a filled tick sits at the end, and the row is no longer a tap target —
    pointer-events off here, aria-disabled from the markup. The tick is the .check's checked look
@@ -2945,59 +2979,75 @@ button { font: inherit; cursor: pointer; }
 .mosaic > .ph { opacity: 0.4; border-width: var(--border-w); }
 .mosaic > img { width: 100%; height: 100%; object-fit: cover; }
 
-/* ---- postcard: a member's introduction, a card in the hand — photo in front,
-   words on the back; tap to turn it over (Lh, 2026-09-12; card #63) ----
+/* ---- postcard: a member's introduction in the shape of a cover card — the photo fills it,
+   the band at the bottom names it; tap the photo to turn it over (Lh 2026-09-12; reshaped 2026-09-22) ----
    <div class="postcard">
-     <button class="postcard__face postcard__front" type="button" aria-label="พลิกดูด้านหลัง">
-       <img src="…" alt=""> — or <div class="ph"></div> —
-       <span class="postcard__label">ป้าแจ๋ว</span>
-     </button>
-     <button class="postcard__face postcard__back" type="button" aria-label="พลิกดูด้านหน้า">
-       <p class="postcard__caption">ชอบชงกาแฟดริปตอนเช้า</p>
-       <span class="postcard__label">ป้าแจ๋ว</span>
-     </button>
+     <div class="postcard__face postcard__front">
+       <button class="postcard__turn" type="button" aria-label="พลิกดูด้านหลัง"><img src="…" alt=""> — or <div class="ph"></div> —</button>
+       <div class="postcard__band">
+         <div class="postcard__words"><span class="t-h1">ป้าแจ๋ว</span><span class="t-body">บ้านสวนผัก</span></div>
+         <button class="icon-btn icon-btn--invert" aria-label="ถูกใจ" aria-pressed="false">♥</button>
+       </div>
+     </div>
+     <div class="postcard__face postcard__back">
+       <button class="postcard__turn" type="button" aria-label="พลิกดูด้านหน้า">
+         <div class="postcard__words">…</div><p class="postcard__caption">ชอบชงกาแฟดริปตอนเช้า</p>
+       </button>
+       <div class="postcard__voice"><div class="progress"></div><span class="t-caption">0:07 / 0:12</span><button class="icon-btn icon-btn--invert" aria-label="ฟัง">▶</button></div>  (a voice note: no caption — the line, its time, the control under them, at the middle)
+     </div>
    </div>
-   Each face is the whole tap target; cardds.js toggles .is-flipped on the
-   postcard (either face, Enter/Space too). A voice note, a like, a reply live
-   OUTSIDE the postcard (a Row under it): a face is a button, and a button
-   holds no button. The faces share one box (a 3:2 landscape card, the media
-   radius); the turn is a Y rotation at --motion-flip, a plain swap under
-   prefers-reduced-motion. Reads ink from the card slot it sits in. */
+   The two faces share one box and turn (a Y rotation at --motion-flip, a plain
+   swap under prefers-reduced-motion). A face is a div: the TURN is the button
+   that fills it (the photo, or the caption), the band lies over its foot and
+   turns with it — words and the heart; the back sets the name a fifth of the way down, the words after it; a
+   button in the band is never inside the turn button. The size is the cover
+   card's (--postcard-min-h = the cover's min-height, the card radius). Who
+   liked it, a voice note, a reply live OUTSIDE the postcard, in a Row under it. */
 .postcard {
   position: relative;
-  aspect-ratio: 3 / 2;
+  min-height: var(--postcard-min-h, 22.5rem);
   perspective: 60rem;
-  border-radius: var(--postcard-radius, var(--r-media));
+  border-radius: var(--postcard-radius, var(--r-card));
+  isolation: isolate;
 }
 .postcard__face {
   position: absolute;
   inset: 0;
   display: grid;
   align-content: end;
-  padding: var(--postcard-face-pad, var(--sp-4));
-  gap: var(--postcard-face-gap, var(--sp-2));
   border: var(--border-w) solid var(--postcard-face-border, var(--card-border));
   border-radius: inherit;
   overflow: hidden;
   isolation: isolate;
-  color: inherit;
-  text-align: left;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   transition: transform var(--motion-flip) ease-in-out;
   box-shadow: var(--postcard-face-shadow, var(--shadow-float));
 }
-.postcard__face:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
-/* the front: the photo (or the wireframe box) fills it, the name reads on a scrim */
+/* the turn: the button that fills the face, under the band */
+.postcard__turn {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  align-content: start;
+  padding: var(--postcard-face-pad, var(--card-pad-rest));
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.postcard__turn:focus-visible { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
+/* the front: the photo (or the wireframe box) fills it; the band reads on a scrim */
 .postcard__front { background: var(--postcard-front-bg, var(--card-3-bg)); color: var(--postcard-front-ink, var(--card-3-ink)); }
-.postcard__front > img,
-.postcard__front > .ph {
+.postcard__front .postcard__turn > img,
+.postcard__front .postcard__turn > .ph {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  z-index: -2;
   border: 0;
   border-radius: 0;
   min-height: 0;
@@ -3006,20 +3056,40 @@ button { font: inherit; cursor: pointer; }
   content: "";
   position: absolute;
   inset: 0;
-  z-index: -1;
+  z-index: 1;
+  pointer-events: none;
   background: linear-gradient(to top, var(--scrim), transparent 45%);
 }
-/* the back: paper — the words, big enough to read at arm's length */
+/* the back: paper — the caption and the name packed at the middle, big enough to read at arm's length */
 .postcard__back {
   background: var(--postcard-back-bg, var(--card-2-bg));
   color: var(--postcard-back-ink, var(--card-2-ink));
-  align-content: space-between;
   transform: rotateY(180deg);
 }
+.postcard__back .postcard__turn { align-content: start; padding-top: var(--postcard-back-top, 20%); gap: var(--postcard-back-gap, var(--sp-5)); } /* the name a fifth down the paper, the words after it */
 .postcard__caption { margin: 0; font: var(--postcard-caption-font, var(--type-title)); text-wrap: pretty; }
-.postcard__label { font: var(--postcard-label-font, var(--type-overline)); letter-spacing: var(--track-overline); text-transform: uppercase; opacity: 0.85; }
+/* the band: the face's foot — name and line left, the heart right; in flow at the face's end, over the turn.
+   Taps between its words fall through to the turn; its buttons take their own. */
+.postcard__band {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: end;
+  gap: var(--postcard-band-gap, var(--sp-3));
+  padding: var(--postcard-face-pad, var(--card-pad-rest));
+  pointer-events: none;
+}
+.postcard__band > * { pointer-events: auto; }
+.postcard__words { display: grid; gap: var(--postcard-words-gap, var(--sp-1)); flex: 1; min-width: 0; pointer-events: none; }
+.postcard__front .postcard__band { --accent: var(--postcard-front-ink, var(--card-3-ink)); --on-accent: var(--postcard-front-bg, var(--card-3-bg)); }
+.postcard__band .icon-btn[aria-pressed="true"] .icon { fill: currentColor; }
 .postcard.is-flipped > .postcard__front { transform: rotateY(-180deg); }
 .postcard.is-flipped > .postcard__back { transform: rotateY(0); }
+/* a voice note on the back: no words to read — its timeline (a Progress), its length and the control to hear it
+   under them, at the middle over the turn, on the face's inset; the app plays and keeps the time */
+.postcard__voice { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: var(--postcard-voice-gap, var(--sp-3)); padding: var(--postcard-face-pad, var(--card-pad-rest)); pointer-events: none; }
+.postcard__voice > * { pointer-events: auto; }
+.postcard__voice > .progress { justify-self: stretch; pointer-events: none; }
 @media (prefers-reduced-motion: reduce) {
   .postcard__face { transition: none; }
 }
@@ -3032,8 +3102,8 @@ button { font: inherit; cursor: pointer; }
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
-/* ---- ask: the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
-   <div class="sheet-stage sheet-stage--ask">
+/* ---- the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
+   <div class="sheet-stage sheet-stage--dim">   (dim = the page under a scrim; a Modal on a clean ground is the stage without it — Lh 2026-09-22, `--ask` retired: the stage does the ground, the modal centres itself)
      <article class="card modal">
        <div class="modal__lift">…the card's content (a head, rows, a timeline)…</div>
        <div class="modal__drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
@@ -3044,30 +3114,27 @@ button { font: inherit; cursor: pointer; }
    .modal is the card — no border (the shadow is its edge on the scrim);
    .modal__lift the light part that holds the thing being asked about (it
    scrolls when tall); .modal__drawer the dark end that asks. The ground is
-   the page under a scrim (like --dim). Two beats (2 × --motion-sheet) when
+   whatever the stage shows (dim it or not). Two beats (2 × --motion-sheet) when
    the stage appears, and the same two backwards when it closes:
      1. the card drops in from above the stage to the screen's centre — its
         drawer still inside it, height 0: nothing of the ask shows yet
      2. the drawer comes out of the card's bottom edge while the lift moves
         up, both at once: the card grows from its centre, which never moves
-        (the stage centres it; a growing card keeps its middle where it is)
+        (the modal centres itself — absolute, margin auto; a growing card keeps its middle where it is)
    Closing: a click on any button in the drawer plays the same animations in
    reverse (cardds.js: Animation.reverse() on each — nothing duplicated), then
    fires "cardds:modal" on the .sheet-stage (bubbles, detail.answer from the
    button's data-answer) for the app to remove the stage.
    Reduced motion: the finished state, no beats; closing fires at once. */
-.sheet-stage--ask {
-  --drawer-h: 14rem;
-  display: grid;
-  align-content: center;          /* the card at the screen's centre — and kept there as it grows */
-  padding-inline: var(--screen-pad);
-}
-.sheet-stage--ask::after { content: ""; position: absolute; inset: 0; background: var(--scrim); } /* the page dimmed */
-.sheet-stage--ask > .sheet-stage__bg { filter: blur(var(--sp-2)); }
 .modal {
-  position: relative;
-  z-index: 1;                     /* over the scrim */
-  max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) — a % here would be of the grid area, which is the card itself */
+  --drawer-h: 14rem;
+  position: absolute;             /* at the stage's centre, and kept there as it grows: absolute + margin auto re-centres on every height */
+  inset: 0;
+  margin: auto;
+  height: fit-content;            /* inset 0 alone would stretch it to the stage: its own height, then the margins share the rest */
+  width: calc(100% - 2 * var(--screen-pad));
+  z-index: 2;                     /* over the dim stage's scrim (z 1) */
+  max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) */
   padding: 0;                     /* the parts pad themselves */
   border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
   display: grid;

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export * from './cards/CardParts.js';
 export * from './cards/Stat.js';
 export * from './cards/Placeholder.js';
 export * from './sheets/SheetStack.js';
-export * from './sheets/CardBack.js';
+export * from './sheets/StackBack.js';
 export * from './sheets/Sheet.js';
 export * from './sheets/SheetHead.js';
 export * from './sheets/SheetBody.js';
@@ -47,6 +47,7 @@ export * from './choice/Calendar.js';
 export * from './choice/Mood.js';
 export * from './choice/Slider.js';
 export * from './numbers/Ring.js';
+export * from './numbers/Progress.js';
 export * from './numbers/Track.js';
 export * from './numbers/Band.js';
 export * from './numbers/DotGrid.js';

package/dist/index.js

@@ -23,7 +23,7 @@ export * from './cards/CardParts.js';
 export * from './cards/Stat.js';
 export * from './cards/Placeholder.js';
 export * from './sheets/SheetStack.js';
-export * from './sheets/CardBack.js';
+export * from './sheets/StackBack.js';
 export * from './sheets/Sheet.js';
 export * from './sheets/SheetHead.js';
 export * from './sheets/SheetBody.js';
@@ -50,6 +50,7 @@ export * from './choice/Calendar.js';
 export * from './choice/Mood.js';
 export * from './choice/Slider.js';
 export * from './numbers/Ring.js';
+export * from './numbers/Progress.js';
 export * from './numbers/Track.js';
 export * from './numbers/Band.js';
 export * from './numbers/DotGrid.js';