@usableapp/cardds 0.1.0 → 0.1.1

package/README.md

@@ -299,7 +299,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 | `css/tokens.css` | spacing, radius, type levels, motion (`--motion-sheet`), the human centre (`--screen-centre`), grayscale role defaults; registers the two sheet tokens (`--sheet-peek`, `--sheet-half`) so script can read them resolved | rarely |
 | `css/palette.css` | **color settings — palettes as role-token overrides** | yes, this one |
 | `css/base.css` | reset, surface, typography classes, `.section` | rarely |
-| `css/card.css` | `.card` + its skeleton (`.card__head` / content / `.card__foot`, heading squeeze), `.card-list`, `.card--row`, `.icon-row`, stats, `.card--centre` (one card at the human centre of a fill screen) and `.screen__centre` (a small group there) | when adding variants |
+| `css/card.css` | `.card` + its skeleton (`.card__head` / content / `.card__foot`), `.card-list`, `.card--row`, `.icon-row`, stats, `.card--centre` (one card at the human centre of a fill screen) and `.screen__centre` (a small group there) | when adding variants |
 | `css/stack.css` | **sheet stack** — `.sheet-stack`: the menu, sheets stacked (heads peek, up to 5; `--tap` tap-to-open, the back button dissolves in; `--closed` nothing open, heads at the bottom, the base above (`.sheet-stack__base`); `--display` the title is the peek, `--fanned` wider peeks); always edge to edge; a stacked sheet is a `.card` | rarely |
 | `css/sheet.css` | **sheet single** — `.sheet`: a card as bottom sheet, full height always, a state is how far it slid: `--peek` / `--half` / `--full` (translate only); handle · head · `.sheet__body` (the head pinned, the body scrolls); `.sheet-stage` (overlay stage: map sheet, a `__hero` — one thing centred in the band a half sheet leaves open, `--dim`, `--raised`, ask drawer) | when adding states |
 | `css/step.css` | `.step` — one screen, one task: `.step__card` (reads) + optional `.sheet` (acts), the bar's room, the keyboard's room | rarely |
@@ -319,7 +319,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 | `docs/handoff/` | the Claude Design handoff spec the app was ported from | reference |
 | `scripts/` | `build-icons.mjs` (icons.svg → `src/type/icons.ts`), `flatten-css.mjs` (`cardds.css` + imports → `dist/cardds.css`) | rarely |
 | `docs/guides/` | `building-with-cardds.md` — the anatomy, the step, the two sheet systems and the vocabulary in React terms; shipped to Claude Design as its guidelines | when the contract changes |
-| `cardds.js` | the behaviours (delegated, class/property toggles only — everything renders without it): dropdown value sync, `.sheet-stack--tap` open/close (tolerates one wrapper per sheet; close reads the tapped sheet), `.pin` auto-advance / Backspace / paste + `cardds:pin`, card-heading squeeze (`--squeeze`), the sheet handle (tap / drag-snap / Enter / Space), the focus and keyboard raises (`--kb`), `cardds:sheet` | rarely |
+| `cardds.js` | the behaviours (delegated, class/property toggles only — everything renders without it): dropdown value sync, `.sheet-stack--tap` open/close (tolerates one wrapper per sheet; close reads the tapped sheet), `.pin` auto-advance / Backspace / paste + `cardds:pin`, the sheet handle (tap / drag-snap / Enter / Space), the focus and keyboard raises (`--kb`), `cardds:sheet` | rarely |
 
 ## Anatomy — base, menus, content, and the card skeleton
 
@@ -333,11 +333,14 @@ Every screen is the same four things, and every card the same three:
   note, help steps) may sit on the base directly.
 - **A card is head · content · foot.**
   - **Head** (`.card__head`): the heading on the left; hints, actions or a
-    more-menu — the contextual info — at the far right. Two lines is the
-    heading's budget; with nothing at the far right it runs all the way
-    across. Hard maximum three lines: when the words need more than two,
-    the type squeezes to fit (`cardds.js` sets `--squeeze`, `card.css`
-    multiplies the level's `--fs-self` by it, and clamps at three).
+    more-menu — the contextual info — at the far right. With nothing at
+    the far right it runs all the way across. The heading wraps freely —
+    no line budget, no squeeze, no clamp (Lh 2026-09-16): a height rule on
+    words only distorts them. The head is FLAT markup — heading, then an
+    optional overline / caption as spans, then the far-right thing; no
+    wrapper element, no `<p>`: the head wraps, the overline takes the row
+    above and the caption the row below (`order`), the gap tokens do the
+    rest (Lh 2026-09-16).
   - **Content**: whatever the card frames — rows, key-values, a gauge, a
     paragraph. Frameless, per rule 9.
   - **Foot** (`.card__foot`): the card's action buttons on one line. One

package/cardds.js

@@ -7,8 +7,10 @@ document.addEventListener('click', e => {
   if (!item) return;
   const menu = item.closest('.menu');
   const dd = menu && menu.closest('.dropdown');
-  menu.querySelectorAll('.menu__item').forEach(i => i.removeAttribute('aria-current'));
-  item.setAttribute('aria-current', 'true');
+  if (!menu.classList.contains('menu--actions')) { /* an actions menu holds no value: nothing stays current */
+    menu.querySelectorAll('.menu__item').forEach(i => i.removeAttribute('aria-current'));
+    item.setAttribute('aria-current', 'true');
+  }
   if (dd) {
     const label = dd.querySelector('.dropdown__label');
     const value = item.dataset.value ?? item.textContent.trim();
@@ -168,113 +170,6 @@ function carddsCloseStack(stack, card) {
   setTimeout(() => before.forEach(c => c.classList.remove('is-before')), CARDDS_STACK_PHASE);
 }
 
-/* ---- card heading squeeze ----
-   A skeleton head's heading has a budget of two lines (card.css, "Skeleton
-   head"). When the words need more, step --squeeze down — the CSS multiplies
-   the level's own size by it — until it fits two lines, or stop at the floor
-   and let the CSS clamp hold it to three.
-
-   Stack heads are skipped: a peek is one line at its own size. stack.css opts
-   those same cards out of the clamp, so the two files agree on what a skeleton
-   head is — change one, change the other.
-
-   What causes a measure:
-   - a ResizeObserver on each heading. A heading only needs a different squeeze
-     when its WIDTH changes, so that is what is watched: window resize, a
-     container that moved, display:none -> shown, all arrive here. Our own
-     font-size change is not a width change, so it does not come back round.
-   - a MutationObserver that only REGISTERS headings added later. It reads
-     added nodes, never the layout, so a host app that re-renders constantly
-     pays a node scan instead of a measuring pass over the page.
-   - document.fonts.ready, once: a font swap changes glyph metrics at an
-     unchanged width, which is the one case the ResizeObserver cannot see.
-   - a "cardds:layout" event, listened for in the CAPTURE phase so it arrives
-     whether or not the app sets bubbles: true. */
-const CARDDS_SQUEEZE_STEPS = [0.94, 0.88, 0.82];
-const CARDDS_HEAD_SEL = '.card__head :is(h1, h2, h3)';
-
-/* a heading in a card's own head — not one in a sheet-stack peek (stack.css).
-   A sheet is read the way the stack reads it (carddsStackCards): a direct
-   child, or one wrapper down — a host that wraps each sheet must not turn its
-   one-line peek into a squeezed skeleton head. */
-function carddsIsSkeletonHead(h) {
-  const card = h.closest('.card__head')?.parentElement;
-  if (!card) return false;
-  const stack = card.parentElement?.closest('.sheet-stack');
-  return !stack || !carddsStackCards(stack).includes(card);
-}
-
-function carddsSqueezeOne(h) {
-  h.style.removeProperty('--squeeze');
-  if (h.getClientRects().length === 0) return; // not rendered — nothing to measure
-  /* line-height is read again at every step: --squeeze scales it too, so a
-     count taken against the unsqueezed value is out by exactly the step */
-  const lines = () => {
-    const lh = parseFloat(getComputedStyle(h).lineHeight);
-    return lh ? Math.round(h.scrollHeight / lh) : 0;
-  };
-  if (lines() <= 2) return;
-  for (const step of CARDDS_SQUEEZE_STEPS) {
-    h.style.setProperty('--squeeze', step);
-    if (lines() <= 2) break;
-  }
-}
-
-function carddsSqueeze(root = document) {
-  root.querySelectorAll(CARDDS_HEAD_SEL).forEach(h => {
-    if (carddsIsSkeletonHead(h)) carddsSqueezeOne(h);
-  });
-}
-
-/* measuring is batched into one frame, and the width we settle at is recorded
-   so the resize our own font-size change causes is recognised, not re-run */
-const carddsHeadWidth = new WeakMap();
-const carddsPending = new Set();
-let carddsRaf = 0;
-
-function carddsFlush() {
-  carddsRaf = 0;
-  const batch = [...carddsPending];
-  carddsPending.clear();
-  batch.forEach(carddsSqueezeOne);
-  batch.forEach(h => carddsHeadWidth.set(h, h.getBoundingClientRect().width));
-}
-
-const carddsHeadResize = new ResizeObserver(entries => {
-  for (const e of entries) {
-    const w = e.target.getBoundingClientRect().width;
-    if (Math.abs((carddsHeadWidth.get(e.target) ?? -1) - w) < 0.5) continue;
-    carddsHeadWidth.set(e.target, w);
-    carddsPending.add(e.target);
-  }
-  if (carddsPending.size && !carddsRaf) carddsRaf = requestAnimationFrame(carddsFlush);
-});
-
-function carddsWatch(root = document) {
-  root.querySelectorAll(CARDDS_HEAD_SEL).forEach(h => {
-    if (carddsIsSkeletonHead(h)) carddsHeadResize.observe(h);
-  });
-}
-
-carddsWatch();
-(document.fonts ? document.fonts.ready : Promise.resolve()).then(() => carddsSqueeze());
-
-new MutationObserver(records => {
-  for (const r of records) {
-    for (const n of r.addedNodes) {
-      if (n.nodeType !== 1) continue;
-      if (n.matches(CARDDS_HEAD_SEL) && carddsIsSkeletonHead(n)) carddsHeadResize.observe(n);
-      else carddsWatch(n);
-    }
-  }
-}).observe(document.documentElement, { childList: true, subtree: true });
-
-document.addEventListener('cardds:layout', e => {
-  const root = e.target instanceof Element ? e.target : document;
-  carddsWatch(root);
-  carddsSqueeze(root);
-}, true);
-
 /* ---- sheet (.sheet, sheet.css): peek / half / full ----
    A sheet is rigid material, like a sheet in the stack (stack.css) — it never changes size, a
    state is only how far it slid — so this, like the stack code, only ever
@@ -471,3 +366,14 @@ function carddsSheetReveal(el, atLeast) {
   carddsSheetSet(sheet, to);
   el.scrollIntoView({ block: 'nearest' });
 }
+
+/* .bleed track: .is-scrolling while it scrolls (and a beat after), so its
+   hairline scrollbar shows only while hovered or moving (card.css). */
+const carddsScrollTimers = new WeakMap();
+document.addEventListener('scroll', e => {
+  const t = e.target;
+  if (!(t instanceof Element) || !t.classList.contains('bleed')) return;
+  t.classList.add('is-scrolling');
+  clearTimeout(carddsScrollTimers.get(t));
+  carddsScrollTimers.set(t, setTimeout(() => t.classList.remove('is-scrolling'), 700));
+}, true);

package/css/actions.css

@@ -139,6 +139,7 @@
 /* dark-slot inversion lives in card.css (.card--3 :is(...)) */
 
 .chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
+.chip-row.bleed { flex-wrap: nowrap; } /* actions.css loads after card.css — the strip stays one line */
 
 /* ---- dropdown: the standard for every select — a pill trigger + .menu popover ----
    <div class="dropdown"><button class="dropdown__btn" popovertarget="f1"><span class="dropdown__label">this week</span><svg class="icon icon--xs"><use href="icons.svg#chevron-down"/></svg></button>
@@ -167,7 +168,7 @@
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dropdown__btn > .icon { transition: rotate 0.2s ease; }
 .dropdown:has(.menu:popover-open) .dropdown__btn > .icon { rotate: 180deg; }
-.dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards */
+.dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards (= .menu--end, layover.css) */
 .filter-row { display: flex; gap: var(--sp-2); }
 .filter-row > .dropdown { flex: 1; min-width: 0; }
 

package/css/base.css

@@ -76,8 +76,7 @@ button { font: inherit; cursor: pointer; }
 .screen--fill > .sheet-stack { flex: 1; min-height: 0; }
 
 /* ---- typography levels ---- */
-/* --fs-self: each level publishes its own size, so a consumer that scales a
-   heading (card.css --squeeze) can multiply it without knowing the level */
+/* --fs-self: each level publishes its own size, for a consumer that scales a level without knowing which */
 .t-display  { font: var(--type-display); letter-spacing: var(--track-display); margin: 0; text-wrap: balance; --fs-self: var(--fs-display); }
 .t-h1       { font: var(--type-h1); letter-spacing: var(--track-h1); margin: 0; --fs-self: var(--fs-h1); }
 .t-h2       { font: var(--type-h2); letter-spacing: var(--track-h2); margin: 0; --fs-self: var(--fs-h2); }

package/css/card.css

@@ -39,10 +39,19 @@
    multi-line title can opt back out with .card__head--top. */
 .card__head {
   display: flex;
+  flex-wrap: wrap;               /* the caption / overline take a line of their own — no wrapper div */
   align-items: center;
   justify-content: space-between;
-  gap: var(--sp-3);
+  column-gap: var(--sp-3);
+  row-gap: var(--sp-0);
 }
+/* flat head markup (Lh 2026-09-16 — no <p>, no wrapper, only padding and gap tokens):
+   <div class="card__head"><span class="t-overline t-muted">…</span><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><button class="icon-btn icon-btn--sm">…</button></div>
+   The heading and the far-right thing share the first row; an overline sits
+   on a row above (order −1), a caption on a row below (order 1), whatever the
+   DOM order — so an author writes the words in reading order. */
+.card__head > :is(.t-overline, .t-caption, .t-body) { flex: 1 1 100%; order: 1; margin: 0; }
+.card__head > .t-overline { order: -1; }
 .card__head--top { align-items: flex-start; }
 
 .card__media { border-radius: var(--r-media); overflow: hidden; position: relative; } /* relative: corner badges */
@@ -62,29 +71,12 @@
 .card__head > :is(h1, h2, h3, div, p):first-child { flex: 1; min-width: 0; }
 
 /* Skeleton head — the heading in a card's OWN head, and only there.
-   Two lines are the budget: cardds.js measures and steps --squeeze down so the
-   type shrinks to fit; the clamp holds a heading that still overflows to three
-   lines, never more. The level's own size comes through --fs-self (base.css),
-   so the multiplier is level-agnostic and a heading without --squeeze renders
-   exactly as before.
-   A STACK head is not a skeleton head — it is a one-line peek at its own size,
-   and "stack headers" below opts it out of the budget, the squeeze and the
-   clamp. cardds.js skips those same cards, so CSS and JS agree on what counts
-   as a skeleton head. Change one, change the other. */
-.card__head :is(h1, h2, h3) {
-  font-size: calc(var(--fs-self, var(--fs-h2)) * var(--squeeze, 1));
-  overflow-wrap: anywhere;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-  /* the clip would take the hair the tight leading leaves outside the line
-     box — a stacked tone mark on top, สระอู below (fonts.css). Padding is
-     inside the clip, the negative margin gives the room back, so the head
-     measures exactly as before. */
-  padding-block: 0.15em;
-  margin-block: -0.15em;
-}
+   The heading wraps freely: no line budget, no squeeze, no clamp (Lh
+   2026-09-16 — a height rule on words only distorts them; content that needs
+   more rows takes more rows). The group that holds overline · heading ·
+   caption is the head's own wrapping row (above) — no wrapper element, no
+   height, only the row gap. */
+.card__head :is(h1, h2, h3) { overflow-wrap: anywhere; }
 
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
@@ -95,11 +87,30 @@
    <div class="avatar-pick bleed">…</div>
    Padding, not item margins: padding is inside the scrollable area, so the
    last item scrolls fully clear of the edge instead of stopping against it.
-   scroll-padding keeps snap points on the content line, not the border edge. */
+   scroll-padding keeps snap points on the content line, not the border edge.
+   The track IS the scroller (nowrap, overflow-x), so no one writes that inline.
+   Its scrollbar is designed, not hidden (Lh 2026-09-16): a --scroll-w line of
+   the track's own ink, and --sp-2 of room under the items so the line sits
+   clear of them and reads as a slider. It shows only while the track is
+   hovered or scrolling (cardds.js sets .is-scrolling for a beat after each
+   scroll event), otherwise the line is transparent — the room stays, so
+   nothing jumps. Chromium/Safari paint it through the ::-webkit-scrollbar
+   parts; Firefox gets its thin bar in the same ink. */
 .bleed {
   margin-inline: calc(-1 * var(--card-pad, 0px));
   padding-inline: var(--card-pad, 0px);
+  padding-block-end: var(--sp-2);
   scroll-padding-inline: var(--card-pad, 0px);
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.bleed::-webkit-scrollbar { height: var(--scroll-w); }
+.bleed::-webkit-scrollbar-track { background: transparent; margin-inline: var(--card-pad, 0px); }
+.bleed::-webkit-scrollbar-thumb { background: transparent; }
+.bleed:is(:hover, .is-scrolling)::-webkit-scrollbar-thumb { background: currentColor; }
+@supports not selector(::-webkit-scrollbar) {
+  .bleed { scrollbar-width: thin; scrollbar-color: transparent transparent; }
+  .bleed:is(:hover, .is-scrolling) { scrollbar-color: currentColor transparent; }
 }
 /* a bleeding child sits over the container's rounded corner, so a strip that
    is genuinely first or last needs the corner clipped for it */

package/css/choice.css

@@ -85,12 +85,10 @@
   -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
 }
 .chip--toggle:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
-.chip--toggle:has(:checked)::after {
-  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
-  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
-}
+/* checked: the same plus turns 45° into an x — one mask, one rotate, no swap (Lh 2026-09-16) */
+.chip--toggle:has(:checked)::after { rotate: 45deg; }
+@media (prefers-reduced-motion: no-preference) { .chip--toggle::after { transition: rotate var(--motion-slide); } }
 .chip--toggle:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
-.chip--toggle:has(:checked) { font-style: italic; } /* the interest-picker flourish; drop if unwanted */
 
 /* ---- chip grid: pick one slot / many options in a grid ----
    <div class="chip-grid"><label class="chip chip--pick"><input type="radio" name="t">9:00</label>…</div> */

package/css/journey.css

@@ -5,30 +5,24 @@
    ============================================================ */
 
 /* ---- route: endpoint · dotted connector (icon in middle) · endpoint ---- */
-.route { display: flex; align-items: center; gap: var(--sp-3); }
+.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--sp-1); } /* line → icon: --sp-1, as the via always had; code → line is the code row's own --sp-3 */
+/* the two endpoints get EQUAL columns whatever their words measure, so the via
+   (the icon alone) sits at the card's centre; each dotted run lives on ITS
+   endpoint's code row and fills that side's leftover — with short names the
+   runs are long and equal, a long place name wraps in its half instead of
+   pushing the plane (Lh 2026-09-16) */
 
 .route__point { display: grid; gap: var(--sp-0); min-width: 0; }
 .route__point--end { text-align: right; }
 
-.route__code { font: var(--type-h2); letter-spacing: var(--track-h2); }
+.route__code { font: var(--type-h2); letter-spacing: var(--track-h2); display: flex; align-items: center; gap: var(--sp-3); }
+.route__code::after, .route__point--end .route__code::before { content: ""; flex: 1; border-top: var(--rule-w) dotted currentColor; opacity: 0.65; }
+.route__point--end .route__code::after { content: none; }
 .route__time { font: var(--type-body); font-variant-numeric: tabular-nums; }
 .route__place { font: var(--type-caption); color: var(--card-muted); }
 .card--3 .route__place { color: inherit; opacity: 0.7; }
 
-.route__via {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--sp-1);
-  opacity: 0.65;
-  font-size: var(--fs-body);
-}
-.route__via::before,
-.route__via::after {
-  content: "";
-  flex: 1;
-  border-top: var(--rule-w) dotted currentColor;
-}
+.route__via { display: flex; align-items: center; opacity: 0.65; font-size: var(--fs-body); }
 
 /* ---- tile badge: tiny label over a big value (gate, seat, zone) ---- */
 .tile-badge {

package/css/layover.css

@@ -55,14 +55,22 @@
    <button class="chip" popovertarget="when">Now ▾</button>
    <div class="menu" id="when" popover><button class="menu__item"><svg class="icon"/>Now</button>…</div>
    Native popover: light dismiss, Esc, top layer. Anchored to the invoker where
-   anchor positioning exists; the fallback is the browser's centred placement. */
+   anchor positioning exists; the fallback is the browser's centred placement.
+   Two kinds (Lh 2026-09-16): a VALUE menu (the dropdown's — the picked item
+   stays current) and an ACTIONS menu, .menu--actions — things to do to the
+   element the button belongs to (a card, a sheet), opened by an .icon-btn:
+   <button class="icon-btn icon-btn--sm" popovertarget="m1" aria-label="More">…</button>
+   <div class="menu menu--actions menu--end" id="m1" popover><button class="menu__item"><svg class="icon"/>Edit</button>…</div>
+   No item stays current there (cardds.js skips the mark). .menu--end = the
+   trigger sits at the far right, so the panel grows leftwards. */
 .menu {
   display: none;              /* explicit closed state — never display on the base rule */
   margin: 0;
   inset: auto;
   border: var(--border-w) solid var(--action-border);
   border-radius: var(--r-card);
-  padding: var(--sp-2);
+  --menu-pad: var(--sp-2);       /* published: a row's radius is concentric with the panel's */
+  padding: var(--menu-pad);
   min-width: 12rem;
   background: var(--action-bg);
   color: var(--action-ink);
@@ -78,7 +86,9 @@
   width: 100%;
   padding: 0 var(--sp-3);
   border: 0;
-  border-radius: var(--r-control);
+  /* concentric with the panel: the card radius minus the panel's padding, so the
+     highlight's curve follows the outer corner (Lh 2026-09-16) */
+  border-radius: calc(var(--r-card) - var(--menu-pad, var(--sp-2)));
   background: transparent;
   color: inherit;
   font: var(--type-title);
@@ -94,6 +104,7 @@
     min-width: max(12rem, anchor-size(width)); /* at least as wide as its trigger */
     position-try-fallbacks: flip-block, flip-inline;
   }
+  .menu--end[popover] { position-area: block-end span-inline-start; }
 }
 @media (prefers-reduced-motion: no-preference) {
   .menu[popover] {

package/css/lists.css

@@ -12,12 +12,14 @@
   display: flex;
   align-items: center;
   gap: var(--sp-3);
-  min-height: var(--tap);
-  padding-block: var(--sp-2);
+  min-height: var(--tap);        /* the tap target's room — the row's only vertical size */
   min-width: 0;
   color: inherit;
   text-decoration: none; /* .row works as <a> too — it is a tap target */
 }
+/* no padding on a row (Lh 2026-09-16): padding is for room, not for spreading.
+   Space BETWEEN rows is .rows' gap; a lone row as card content takes the card's
+   gap. (.row--flush, which zeroed the old padding, is gone — every row is flush.) */
 .row__lead {
   width: var(--tap);
   height: var(--tap);
@@ -28,13 +30,12 @@
   place-items: center;
 }
 .row__body { flex: 1; min-width: 0; display: grid; gap: var(--sp-0); }
-.row__title { font: var(--type-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: 0.12em; margin-block: -0.12em; } /* the clip keeps Thai marks — see card.css */
+.row__title { font: var(--type-title); overflow-wrap: anywhere; } /* wraps freely — no clip, so no padding trick for Thai marks (Lh 2026-09-16, same call as the card heading) */
 .row__meta { font: var(--type-caption); color: var(--card-muted); display: flex; align-items: center; gap: var(--sp-1); }
 .card--3 .row__meta { color: inherit; opacity: 0.7; }
 .row__end { margin-left: auto; text-align: right; display: grid; gap: var(--sp-0); justify-items: end; flex: none; }
-.row--lg { min-height: var(--fab); padding-block: var(--sp-3); } /* menu rows: more air, round arrow at the end */
+.row--lg { min-height: 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); }
-.row--flush { padding-block: 0; } /* a single row as card content: the card's gap is the spacing */
 /* 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
@@ -55,8 +56,17 @@
 }
 
 /* rows: a list of rows separated by hairlines */
-.rows { display: grid; }
-.rows > .row + .row { border-top: var(--border-w) solid var(--hairline); }
+.rows { display: grid; --rows-gap: var(--sp-4); row-gap: var(--rows-gap); }
+.rows:has(> .row--lg) { --rows-gap: var(--sp-6); }
+/* the hairline between rows sits in the middle of the gap — drawn, not spaced:
+   no padding, no spacer element */
+.rows > .row + .row { position: relative; }
+.rows > .row + .row::before {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--rows-gap) / 2) 0 auto;
+  border-top: var(--border-w) solid var(--hairline);
+}
 
 /* ---- kv: label left, value right ----
    <dl class="kv"><div class="kv__row"><dt class="kv__key">Pay with</dt><dd class="kv__val">GHO</dd></div>…</dl> */

package/css/sheet.css

@@ -140,7 +140,7 @@
 /* the head — a title row at least --tap tall, either kind, so the peek strip
    (--sheet-peek) is the same for every sheet:
    - in a step it is a plain card head (card.css): the heading left, the
-     contextual thing at the far right, the two-line budget and the squeeze
+     contextual thing at the far right
    - .sheet__head is the stage sheet's three-column head: a round button,
      the centred title and sub, a round button
    - a label .row with its .check / .toggle may be the head when the sheet's

package/css/stack.css

@@ -94,17 +94,13 @@
   min-height: var(--tap);
 }
 /* NOT a skeleton head: a peek is one line at its own size, and the display
-   stack deliberately runs a second line under the next card. So it opts out of
-   the whole skeleton-head treatment — budget, squeeze and clamp. cardds.js
-   skips the same cards. */
+   stack deliberately runs a second line under the next card. */
 .sheet-stack > .card > .card__head :is(h1, h2, h3) {
   font-size: var(--fs-h1);
   line-height: 1;
   letter-spacing: -0.01em;
   margin-right: auto; /* pins the icon cluster right */
   display: block;
-  -webkit-line-clamp: none;
-  overflow: visible;
   overflow-wrap: normal;
 }
 

package/css/tokens.css

@@ -69,6 +69,7 @@
   /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
   --border-w: 1.5px;
   --rule-w: 2px;                                   /* dotted connectors, picker rules */
+  --scroll-w: 1px;                                 /* the scrollbar of a .bleed track: a hairline of ink */
   --focus: 2px solid currentColor;                 /* :focus-visible ring */
   --shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
   --shadow-float: 0 0.25rem 0.75rem rgb(0 0 0 / 0.14);

package/dist/actions/Chip.d.ts

@@ -317,7 +317,7 @@ export interface ChipPickProps extends Omit<ComponentPropsWithoutRef<'label'>, '
 /** ChipPick — a full-width pick target in a ChipGrid (9:00 · 9:30 · …); the picked one fills with accent. */
 export declare function ChipPick({ type, name, value, checked, defaultChecked, onChange, className, children, ...rest }: ChipPickProps): import("react").JSX.Element;
 export interface ChipRowProps extends ComponentPropsWithoutRef<'div'> {
-    /** run the row to the card's edges as a scrolling strip */
+    /** run the row to the card's edges as a one-line scrolling strip (`.bleed`: nowrap, overflow, the hairline ink scrollbar) */
     bleed?: boolean;
 }
 /** ChipRow — chips on a wrapping line (or a bleeding strip). */

package/dist/actions/Dropdown.d.ts

@@ -19,9 +19,13 @@ export declare function Dropdown({ id, label, end, className, children, ...rest
 export interface MenuProps extends Omit<ComponentPropsWithoutRef<'div'>, 'popover'> {
     /** render as a popover panel (needs an id and an invoker with popoverTarget); omit for an inline menu card */
     popover?: boolean;
+    /** an ACTIONS menu — things to do, not a value to hold: no item stays current */
+    actions?: boolean;
+    /** the trigger sits at the far right: the panel grows leftwards */
+    end?: boolean;
 }
-/** Menu — a card of MenuItems: a popover anchored to its button, or inline rows of icon + label. */
-export declare function Menu({ popover, className, ...rest }: MenuProps): import("react").JSX.Element;
+/** Menu — a card of MenuItems: a popover anchored to its button, or inline rows of icon + label. `actions` for a to-do list (IconBtn's), plain for a value (Dropdown's). */
+export declare function Menu({ popover, actions, end, className, ...rest }: MenuProps): import("react").JSX.Element;
 export interface MenuItemProps extends ComponentPropsWithoutRef<'button'> {
     /** the value cardds.js reports on change */
     value?: string;

package/dist/actions/Dropdown.js

@@ -9,9 +9,9 @@ import { Icon } from '../type/Icon';
 export function Dropdown({ id, label, end, className, children, ...rest }) {
     return (_jsxs("div", { className: cx('dropdown', end && 'dropdown--end', className), ...rest, children: [_jsxs("button", { type: "button", className: "dropdown__btn", popoverTarget: id, children: [_jsx("span", { className: "dropdown__label", children: label }), _jsx(Icon, { name: "chevron-down", size: "xs" })] }), _jsx("div", { className: "menu", id: id, popover: "auto", children: children })] }));
 }
-/** Menu — a card of MenuItems: a popover anchored to its button, or inline rows of icon + label. */
-export function Menu({ popover, className, ...rest }) {
-    return _jsx("div", { className: cx('menu', className), popover: popover ? 'auto' : undefined, ...rest });
+/** Menu — a card of MenuItems: a popover anchored to its button, or inline rows of icon + label. `actions` for a to-do list (IconBtn's), plain for a value (Dropdown's). */
+export function Menu({ popover, actions, end, className, ...rest }) {
+    return _jsx("div", { className: cx('menu', actions && 'menu--actions', end && 'menu--end', className), popover: popover ? 'auto' : undefined, ...rest });
 }
 /** MenuItem — one row in a Menu (48px tall): optional icon, label; the current one is filled. */
 export function MenuItem({ value, current, icon, className, children, ...rest }) {