@usableapp/cardds 0.7.105 → 0.7.107

package/css/stack.css

@@ -18,7 +18,7 @@
 
    <div class="sheet-stack sheet-stack--tap">   (drop --tap for a static stack)
      <article class="card card--2">
-       <div class="card__head">
+       <div class="head">
          <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)
@@ -73,7 +73,7 @@
 
 /* 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. */
-.sheet-stack > .card > .card__head :is(h1, h2, h3) {
+.sheet-stack > .card > .head :is(h1, h2, h3) {
   font-size: var(--fs-h1);
   line-height: var(--lh-solid);
   letter-spacing: var(--track-h2);
@@ -85,7 +85,7 @@
 /* display stack: the giant title IS the peek — line one shows, line two is
    clipped by the next card (recents / library lists) */
 .sheet-stack--display { --stack-step: calc(var(--tap-base) * 13 / 6); }
-.sheet-stack--display > .card > .card__head :is(h1, h2, h3) {
+.sheet-stack--display > .card > .head :is(h1, h2, h3) {
   font: var(--type-display);
   letter-spacing: var(--track-display);
   /* the FIRST line sits on the centre of the peek strip (--stack-step tall,
@@ -99,7 +99,7 @@
    NOT: there, every card is full height and full content always, and a
    peek is simply the strip of it the next card doesn't cover — the way a
    card in a real deck is never a shorter card, just a mostly hidden one. */
-.sheet-stack:not(.sheet-stack--tap) > .card:has(~ .card):not(.is-open) > :not(.card__head) { display: none; }
+.sheet-stack:not(.sheet-stack--tap) > .card:has(~ .card):not(.is-open) > :not(.head) { display: none; }
 
 /* ---- .sheet-stack--tap — tap a peeked sheet open; a back button returns it. How its sheets move (one property: translate) is
    told over their rules, where they sit, in card.css. ---- */
@@ -247,7 +247,7 @@
    slide read as a second thing moving while the sheet itself moved; Lh,
    2026-09-11). Only the sheet travels; the button appears where it is. */
 /* a sheet's OWN head and back: the card is the stack's child or, with one host wrapper, the wrapper's. A card standing in the sheet's body wears its own head */
-:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head > .sheet-stack__back {
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .head > .sheet-stack__back {
   position: absolute;
   left: 0;
   top: 50%;
@@ -262,35 +262,24 @@
   min-height: 0;
   padding: 0;
 }
-.sheet-stack--tap > .card.is-open > .card__head > .sheet-stack__back {
+.sheet-stack--tap > .card.is-open > .head > .sheet-stack__back {
   opacity: 1;
   visibility: visible;
 }
 
-.sheet-stack > .card:has(> .sheet__body) > :not(.sheet__body) { flex-shrink: 0; }
-.sheet-stack > .card > .sheet__body { --_cover: 0rem; } /* nothing slid under here: the stack's sheet is always whole */
-/* a paper stack's foot is paper (card.css paints it): its ink reads the action's side */
-.sheet-stack > .card.sheet--paper > .card__foot { --dark: var(--action-dark); }
+.sheet-stack > .card:has(> .body) > :not(.body) { flex-shrink: 0; }
 
 /* ---- StackSheet's tabs (Lh 2026-09-23): the head's end is a row of small icon buttons, the sheet's pages — the chosen one
    filled (.icon-btn--invert) only while the sheet is open; a count is a small circle over the icon's top right corner ---- */
 .stack-sheet__tabs { display: flex; gap: var(--stack-sheet-tabs-gap, var(--sp-2)); flex: none; } /* room between the tabs: with none, the chosen tab's disc touched its neighbour's (Lh 2026-09-24) */
-/* the head is ONE line, always (Lh 2026-09-24): the tabs keep their size, the TITLE gives — it never wraps, it runs sideways
-   (StackSheet measures --_over, the width it overflows by, and sets .is-long), one way: it waits, runs to the end, waits, and starts again from the first letter — like a song title */
-.stack-sheet__title {
-  flex: 1; min-width: 0; overflow-x: clip; overflow-y: visible; white-space: nowrap; overflow-wrap: normal; /* clip SIDEWAYS only:
-     hidden clipped the Thai tone marks above a line-height-1 line (เพื่อน lost its ไม้เอก — Lh 2026-09-24) */
-  translate: 0 var(--stack-sheet-title-shift, -0.1em); /* FC Pride's line box carries more room above its letters than below: the
-     letters sat ~0.1em under the middle of the back disc and the tabs — lifted onto it (Lh 2026-09-24) */
-}
+/* the title's run (the title's own rules are parts.css's, in a stack sheet) */
 .stack-sheet__run { display: inline-block; }
-.stack-sheet__title.is-long .stack-sheet__run {
+.stack-sheet > .head > .words__title.is-long > .stack-sheet__run {
   animation: stack-sheet-run var(--stack-sheet-run-time, var(--_run, var(--motion-run))) var(--ease-in-out) infinite; /* ONE way: start → end, then back to the start at once (Lh 2026-09-24) */ /* --_run: from the overflow, 30px a second + the pauses */
 }
 @keyframes stack-sheet-run { 0%, 20% { translate: 0; } 85%, 100% { translate: calc(-1 * var(--_over)); } }
 @media (prefers-reduced-motion: reduce) {
-  .stack-sheet__title.is-long .stack-sheet__run { animation: none; display: inline; } /* inline: an ellipsis cannot cut an inline-block */
-  .stack-sheet__title.is-long { text-overflow: ellipsis; }
+  .stack-sheet > .head > .words__title.is-long > .stack-sheet__run { animation: none; display: inline; } /* inline: an ellipsis cannot cut an inline-block */
   .stack-sheet__tab { transition: none; } /* the disc is simply there while open, and gone while closed */
 }
 .stack-sheet__tab {
@@ -324,23 +313,23 @@
 /* a CLOSED sheet shows no chosen disc either (Lh 2026-10-04): arriving on the home, every tab of every sheet is the icon
    alone. The fill fades in with the rise — the tab that was pressed, or the one the sheet opens on — and fades out as the
    sheet folds. The class stays (which page it is); only the paint waits for .is-open. */
-.sheet-stack--tap > .card:not(.is-open) > .card__head .stack-sheet__tab.icon-btn--invert {
+.sheet-stack--tap > .card:not(.is-open) > .head .stack-sheet__tab.icon-btn--invert {
   border-color: transparent; background-color: transparent; box-shadow: none; color: inherit;
 }
 /* the last tab's ICON lines up with the inset, not its button's edge: an unchosen tab shows the glyph only, so the button's own
    margin around it reaches into the card's padding — and an open head (back · title · three tabs) keeps one line (Lh 2026-09-23) */
-.card__head > .stack-sheet__tabs { margin-right: calc(-1 * var(--sp-2)); }
+.head > .stack-sheet__tabs { margin-right: calc(-1 * var(--sp-2)); }
 
 /* AT THE END (Lh 2026-09-29, the home): after the tabs, chevron down — the open sheet folds down. The head's end gives it its room
    while open; the last tab then sits on the inset (no reach into the padding) */
 .sheet-stack--tap .sheet-stack__back--end { left: auto; right: 0; }
-.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) > .stack-sheet__tabs { margin-right: 0; }
+.sheet-stack--tap > .card.is-open > .head:has(> .sheet-stack__back--end) > .stack-sheet__tabs { margin-right: 0; }
 .sheet-stack--tap .sheet-stack__back > .icon { --icon-size: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
 .sheet-stack--tap .sheet-stack__back::after { content: ""; position: absolute; inset: calc((var(--_back-size) - var(--tap-sm)) / 2); }
 
 /* the open sheet's title folds it (SheetStack.tsx): it says so to a pointer */
-.sheet-stack--tap > .card.is-open > .card__head > :is(h1, h2, h3) { cursor: pointer; }
-.sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); } /* the open sheet reads as the rest of the screen: not selectable (Lh 2026-09-25; it was text) */
+.sheet-stack--tap > .card.is-open > .head > :is(h1, h2, h3) { cursor: pointer; }
+.sheet-stack--tap > .card.is-open > :not(.head) { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); } /* the open sheet reads as the rest of the screen: not selectable (Lh 2026-09-25; it was text) */
 
 /* ---- where it sits in what base.css draws (docs/reference.md rule 15) ---- */
 /* min-height: 0 — a flex item's floor is its content, and the stack's content

package/css/stamp.css

@@ -277,7 +277,7 @@
 }
 
 /* ---- where it sits in what card.css draws (docs/reference.md rule 15) ---- */
-.card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
+.head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
 /* ---- where it sits in what people.css draws (docs/reference.md rule 15) ---- */
 /* a stamp in the stack is the stamp's small size (--stamp-sm-size: one rule in stamp.css, 48 × 60), lapped like the heads. Measured 2026-10-11 in a Row's
    lead with a title, a meta line and an end button: at 375 the meta line breaks in two, accepted by Lh (a lap of 16 would hold it; the lap stays 8)

package/css/step.css

@@ -3,12 +3,12 @@
    What the member reads (words on the base — not a card, Lh 2026-09-16), what the member does when the
    step asks for it (a sheet, sheet.css). The move: a page of words has
    an .action-bar (actions.css) OUTSIDE the step, below it — the base's;
-   a step with a sheet has none: the sheet's own .card__foot finishes it
+   a step with a sheet has none: the sheet's own .foot finishes it
    (see "LAYERS" below).
 
    <section class="step">
      <section class="page">…the words…</section>               ← first
-     <article class="card sheet sheet--half">…the controls… <div class="card__foot">…</div></article>  ← last, optional
+     <article class="card sheet sheet--half">…the controls… <div class="foot">…</div></article>  ← last, optional
    </section>
    <div class="action-bar">…</div>   ← the screen's last child, only when there is no sheet
 
@@ -60,7 +60,7 @@
 .screen > .step:first-child, .screen--lead > .step { --_lead: var(--screen-lead, 15cqh); } /* top="lead" says it; a Step first says it too */
 
 /* LAYERS (Lh, 2026-09-20): the base, then the sheet over it, then the top bar. A bar is the BASE's — the
-   move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .card__foot
+   move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .foot
    (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. That is how cardds's
    own screens are composed (the guide); the framework does not police it — a component never changes
    because another one is there. */

package/css/theme.template.css

@@ -49,7 +49,7 @@
      --ink-onlight --ink-onlight-muted  --ink-ondark --ink-ondark-muted
      ---- sides: each ground says only whether it is dark (1) or light (0); its words and glyphs follow ----
      --surface-dark (0)  --card-1-dark (0) --card-2-dark (0) --card-3-dark (1) --card-4-dark (0) --card-5-dark (1)
-     --accent-dark (1, the brand fill)  --action-dark (0, the paper of buttons, chips, fields)  --neg-dark (1, a falling Delta)
+     --accent-dark (1, the brand fill)  --action-dark (0, the paper of buttons, chips, fields)  --neg-dark (1, a falling number)
      A dark mode is these sides turned to 1 with their fills darkened, in a [data-mode="dark"] block of your own: no rule per piece.
      A surface of your own: give it a fill and `--dark: 1` (or 0), and its --card-ink / --card-muted that side's set. */
 

package/css/tokens.css

@@ -248,7 +248,7 @@
   --card-1-dark: 0;  --card-2-dark: 0;  --card-3-dark: 1;  --card-4-dark: 0;  --card-5-dark: 1;
   --accent-dark: 1;   /* the brand fill: a primary button, a picked chip, a picked day */
   --action-dark: 0;   /* the paper fill of neutral controls: a button, a chip, a field, a plain tile */
-  --neg-dark: 1;      /* a falling Delta's fill */
+  --neg-dark: 1;      /* the fill of a falling number (--neg) */
 
   /* app background ("earth-toned surface or shiny color, up to the app") */
   --surface: var(--color-surface, #f2f2f0);
@@ -292,6 +292,7 @@
   --ink-tint: color-mix(in srgb, currentColor 12%, transparent);   /* hover, rails, rests */
   --ink-rail: color-mix(in srgb, currentColor 30%, transparent);   /* todo steps, ghost edges */
   --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent); /* calendar marks */
+  --accent-wash: color-mix(in srgb, var(--accent) 22%, var(--action-bg)); /* the same wash laid on the paper of fields and buttons, opaque: a soft chip reads the same on any card (Chip soft) */
   --accent-mid: color-mix(in srgb, var(--accent) 50%, transparent);
   /* PASTELS (Lh 2026-10-20: a component never brings a colour of its own; every colour is the theme's): the nine pastel papers of a
      sticky note, a note chooser's swatch and a stamp's picture ground (src/sticky/tones.ts names them), and a stamp's paper. Light
@@ -353,11 +354,11 @@
    (card.css, media.css…) and is named in this list, which gives it the inks every piece on it reads: --card-ink (words, icons,
    marks, dots: currentColor), --card-muted (secondary words), the four signals, --on-accent (the ink on the accent fill, whose
    side is --accent-dark) and --accent-ink (the brand as a glyph). A piece with no fill of its own reads only these, so a dark
-   surface turns everything on it to ondark with no rule per piece. A piece with no fill that stands in for a surface (a stat
+   surface turns everything on it to ondark with no rule per piece. A piece with no fill that stands in for a surface (an upload
    tile) takes its ground's side: `--dark: inherit`. inkGrounds() measures it; docs/reference.md "Ink follows its ground" */
 :where(body, [data-palette], [data-mode], .card, .tile, .modal__drawer, .postcard__front, .postcard__back, .sticky, .post-paper,
-  .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .map__pin, .sheet--paper > :is(.sheet__body, .card__foot),
-  .postcard__band, .track__step, .toggle, .chip, .card__face, .card--bands > :is(.card__head, .card__foot), .card--bands > .card__face > :is(.card__head, .card__foot)) {
+  .float-bar__pill, .snackbar__body, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .map__pin, .sheet--paper > :is(.body, .foot),
+  .postcard__band, .track__step, .toggle, .chip, .card__face, .card--bands > :is(.head, .foot), .card--bands > .card__face > :is(.head, .foot)) {
   --card-ink: color-mix(in srgb, var(--ink-ondark) calc(var(--dark) * 100%), var(--ink-onlight));
   --card-muted: color-mix(in srgb, var(--ink-ondark-muted) calc(var(--dark) * 100%), var(--ink-onlight-muted));
   --on-accent: color-mix(in srgb, var(--ink-ondark) calc(var(--accent-dark) * 100%), var(--ink-onlight));

package/dist/actions/BarNote.d.ts

@@ -5,7 +5,7 @@ export interface BarNoteProps extends ComponentProps<'div'> {
  * BarNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
  * size (full width, `--btn-h` tall), lying on the ground — no fill, no border, no rounding — holding one line of muted words, an
  * inline `Icon` allowed ("กดที่ <Icon name="share" /> ด้านล่างนี้" — the member does the thing elsewhere). It does nothing on a tap.
- * A member of the BOTTOM: a `CardFoot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
- * it (CardFoot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
+ * A member of the BOTTOM: a `Foot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
+ * it (Foot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
  */
 export declare function BarNote({ className, children, ...rest }: BarNoteProps): import("react").JSX.Element;

package/dist/actions/BarNote.js

@@ -4,8 +4,8 @@ import { cx } from '../cx.js';
  * BarNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
  * size (full width, `--btn-h` tall), lying on the ground — no fill, no border, no rounding — holding one line of muted words, an
  * inline `Icon` allowed ("กดที่ <Icon name="share" /> ด้านล่างนี้" — the member does the thing elsewhere). It does nothing on a tap.
- * A member of the BOTTOM: a `CardFoot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
- * it (CardFoot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
+ * A member of the BOTTOM: a `Foot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
+ * it (Foot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
  */
 export function BarNote({ className, children, ...rest }) {
     return _jsx("div", { role: "note", className: cx('action-note', className), ...rest, children: _jsx("span", { className: "action-note__words", children: children }) });

package/dist/actions/Btn.d.ts

@@ -7,7 +7,7 @@ export interface BtnProps extends Omit<ComponentProps<'button'>, 'form'> {
     /** full width */
     block?: boolean;
     /** a form's button: sized to its words with wide side padding, centred on its own row — it reads as part of the form above it,
-     *  not a page CTA (Lh 2026-09-25). In a card's foot (`CardFoot`, `Card foot`, `FeedCard foot`) it keeps that size instead of
+     *  not a page CTA (Lh 2026-09-25). In a card's foot (`Foot`, `FeedCard foot`) it keeps that size instead of
      *  filling the row. Replaces the native `form` attribute (a button outside its <form> — not a cardds pattern). */
     form?: boolean;
     /** the one giant call to action in a tinted card ("Taxi!") */
@@ -17,7 +17,7 @@ export interface BtnProps extends Omit<ComponentProps<'button'>, 'form'> {
 }
 /**
  * Btn — the pill button (48px+ tall). Plain by default; `primary` for the one move; `quiet` on tinted cards.
- * In a CardFoot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
+ * In a Foot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
  */
 export declare function Btn({ primary, quiet, block, form, xl, href, className, type, ...rest }: BtnProps): import("react").DetailedReactHTMLElement<{
     translate?: "yes" | "no" | undefined | undefined;

package/dist/actions/Btn.js

@@ -2,7 +2,7 @@ import { createElement } from 'react';
 import { cx } from '../cx.js';
 /**
  * Btn — the pill button (48px+ tall). Plain by default; `primary` for the one move; `quiet` on tinted cards.
- * In a CardFoot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
+ * In a Foot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
  */
 export function Btn({ primary, quiet, block, form, xl, href, className, type, ...rest }) {
     return createElement(href ? 'a' : 'button', {

package/dist/actions/BtnRow.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
 export interface BtnRowProps extends ComponentProps<'div'> {
 }
-/** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use CardFoot instead. */
+/** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use Foot instead. */
 export declare function BtnRow({ className, ...rest }: BtnRowProps): import("react").JSX.Element;

package/dist/actions/BtnRow.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use CardFoot instead. */
+/** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use Foot instead. */
 export function BtnRow({ className, ...rest }) {
     return _jsx("div", { className: cx('btn-row', className), ...rest });
 }

package/dist/actions/Chip.d.ts

@@ -3,6 +3,8 @@ import { type DotTone } from './Dot.js';
 export interface ChipProps extends ComponentProps<'span'> {
     /** filled accent: the selected / live state */
     on?: boolean;
+    /** a soft accent fill, no edge: a status that should be seen but is not the live one (a "new" in a card's head); `on` is the stronger */
+    soft?: boolean;
     /** quiet: an untouched default value — muted words, the thin edge, nothing to find the eye (docs/reference.md rule 13) */
     muted?: boolean;
     /** a leading signal dot: `a` (the accent signal), `b` (the secondary), or one of the signal set — ok · warn · error · info */
@@ -16,8 +18,8 @@ export interface ChipProps extends ComponentProps<'span'> {
     /** the chip's words */
     children?: ReactNode;
 }
-/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `sm` = a small label only; `on` when it is the live one. For a choice use ChipPick (`sign` for the +/× interest picker). */
-export declare function Chip({ on, muted, dot, sm, as, href, className, children, ...rest }: ChipProps): import("react").DetailedReactHTMLElement<{
+/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `sm` = a small label only; `soft` for a status that should be seen, `on` when it is the live one. For a choice use ChipPick (`sign` for the +/× interest picker). */
+export declare function Chip({ on, soft, muted, dot, sm, as, href, className, children, ...rest }: ChipProps): import("react").DetailedReactHTMLElement<{
     ref?: import("react").Ref<HTMLSpanElement> | undefined;
     key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined;
@@ -324,9 +326,11 @@ export declare function ChipPick({ type, sign, name, value, checked, defaultChec
 export interface ChipRowProps extends ComponentProps<'div'> {
     /** run the row to the card's edges as a one-line scrolling strip (`.bleed`: nowrap, overflow, the hairline ink scrollbar) */
     bleed?: boolean;
+    /** the words that LEAD the chips ("Meet at" before a place): set in the chips' own type, at the middle of their height */
+    lead?: ReactNode;
 }
 /** ChipRow — chips on a wrapping line (or a bleeding strip). */
-export declare function ChipRow({ bleed, className, ...rest }: ChipRowProps): import("react").JSX.Element;
+export declare function ChipRow({ bleed, lead, className, children, ...rest }: ChipRowProps): import("react").JSX.Element;
 export interface ChipGridProps extends ComponentProps<'div'> {
 }
 /** ChipGrid — equal-width ChipPicks in a grid (time slots, skills). */

package/dist/actions/Chip.js

@@ -3,10 +3,10 @@ import { createElement } from 'react';
 import { cx } from '../cx.js';
 import { tagged } from '../pressable.js';
 import { Dot } from './Dot.js';
-/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `sm` = a small label only; `on` when it is the live one. For a choice use ChipPick (`sign` for the +/× interest picker). */
-export function Chip({ on, muted, dot, sm, as, href, className, children, ...rest }) {
+/** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `sm` = a small label only; `soft` for a status that should be seen, `on` when it is the live one. For a choice use ChipPick (`sign` for the +/× interest picker). */
+export function Chip({ on, soft, muted, dot, sm, as, href, className, children, ...rest }) {
     const { el, props } = tagged(as, href);
-    return createElement(el, { ...props, className: cx('chip', on && 'chip--on', muted && 'chip--muted', sm && 'chip--sm', className), ...rest }, dot && _jsx(Dot, { b: dot === 'b', tone: dot === 'a' || dot === 'b' ? undefined : dot }), children);
+    return createElement(el, { ...props, className: cx('chip', on && 'chip--on', soft && !on && 'chip--soft', muted && 'chip--muted', sm && 'chip--sm', className), ...rest }, dot && _jsx(Dot, { b: dot === 'b', tone: dot === 'a' || dot === 'b' ? undefined : dot }), children);
 }
 /** ChipPick — a chip that is a choice, on a sheet and never in a Card (the sheet is the paper the member fills in, Lh 2026-10-18): full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
  *  interest picker); the picked one fills with accent. A native radio/checkbox inside the label carries the state. */
@@ -14,8 +14,8 @@ export function ChipPick({ type, sign, name, value, checked, defaultChecked, onC
     return (_jsxs("label", { className: cx('chip chip--pick', sign && 'chip--sign', className), ...rest, children: [_jsx("input", { type: type ?? (sign ? 'checkbox' : 'radio'), name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: onChange }), children] }));
 }
 /** ChipRow — chips on a wrapping line (or a bleeding strip). */
-export function ChipRow({ bleed, className, ...rest }) {
-    return _jsx("div", { className: cx('chip-row', bleed && 'bleed', className), ...rest });
+export function ChipRow({ bleed, lead, className, children, ...rest }) {
+    return _jsxs("div", { className: cx('chip-row', bleed && 'bleed', className), ...rest, children: [lead != null && _jsx("span", { className: "chip-row__lead", children: lead }), children] });
 }
 /** ChipGrid — equal-width ChipPicks in a grid (time slots, skills). */
 export function ChipGrid({ className, ...rest }) {

package/dist/actions/IconBtn.d.ts

@@ -20,7 +20,7 @@ export interface IconBtnProps extends ComponentProps<'button'> {
     href?: string;
 }
 /** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move, `primary` for the
- *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<CardFoot round>`); a short WORD may stand in one
+ *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<Foot round>`); a short WORD may stand in one
  *  as its child (`<IconBtn size="xl" primary label="ช่วยเหลือ">ช่วย</IconBtn>`): it grows with the member's text size up to the circle's share.
  *  It is a button and nothing more: to open a Menu, give it the platform's `popoverTarget={the Menu's id}` and render that `<Menu popover actions id>`
  *  wherever you like — the panel anchors to the button that opened it. To open anything else, `onClick`. */

package/dist/actions/IconBtn.js

@@ -4,7 +4,7 @@ import { cx } from '../cx.js';
 import { warnOnce } from '../state.js';
 import { Icon } from '../type/Icon.js';
 /** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move, `primary` for the
- *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<CardFoot round>`); a short WORD may stand in one
+ *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<Foot round>`); a short WORD may stand in one
  *  as its child (`<IconBtn size="xl" primary label="ช่วยเหลือ">ช่วย</IconBtn>`): it grows with the member's text size up to the circle's share.
  *  It is a button and nothing more: to open a Menu, give it the platform's `popoverTarget={the Menu's id}` and render that `<Menu popover actions id>`
  *  wherever you like — the panel anchors to the button that opened it. To open anything else, `onClick`. */

package/dist/actions/IconBtnGroup.d.ts

@@ -12,7 +12,7 @@ export interface IconBtnGroupProps extends Omit<ComponentProps<'div'>, 'onChange
     defaultValue?: Picked;
     /** asks the app: `one` → the pressed value · `many` → the new list */
     onChange?: (value: Picked) => void;
-    /** the buttons one OVER the other, the panel one button wide — at a `Row`'s `end`, where a panel across would take the words' room */
+    /** the buttons one OVER the other, the panel one button wide — at a `Row`'s end, where a panel across would take the words' room */
     vertical?: boolean;
     /** the panel as wide as its buttons (each one tap wide, or as wide as its word), in the middle of its column the way a `Btn form` is —
      *  in a `Page`, a `Centre`, a `CtaPack`, and in a card's or a sheet's foot, where it keeps that width instead of filling the row.