@usableapp/cardds 0.7.37 → 0.7.38

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 > 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.38 — 2026-10-01
+
+### Fixed
+- **`Banner`: its words ran past the band when a line held a word with no break in it** (a link; found in mailpool, Lh 2026-10-01) — the body's column grew as wide as that word. The column is now held to the band and such a word breaks where it must. Nothing to change in a screen.
+
+- **`Sheet`: the body's words ran under the foot's button at a large text size** (found in timebank, Lh 2026-10-01). The room a sheet kept for its foot was a fixed sum (the button's token height), but a button grows with the member's text size, and a line may stand over it. The Sheet now measures its foot's rows and keeps that much room (`--sheet-foot-h`, its own data — not a knob); the strip's ground covers all of it. Nothing to change in a screen; a `Text` put in a `CardFoot` over the button is counted too.
+
+### Added
+- **`Spinner` — "working on it"** (Lh 2026-10-01, asked by mailpool): a ring that turns, for a wait of unknown length (a known share is a `Progress`). `<Spinner label="…" />` alone (the label is read out), or `<Spinner>words</Spinner>` with a caption-sized line beside it; `size` = an Icon's (`xs` · `md` · `lg`); `role="status"`. In a row's `end`, a card, a sheet's body, an `EmptyState`'s `icon`. Still when motion is reduced. Knob `--spinner-ink`. Before, the only turning ring was inside `FormNote busy`, not exported. A whole screen that is not known yet still shows nothing (`Screen ready`), not a spinner.
+
 ## 0.7.37 — 2026-10-01
 
 ### Fixed

package/css/layover.css

@@ -176,7 +176,7 @@
      <div class="banner__body">…</div></details>
    A light tint (not a card tone) with a slightly darker rule above and below, edge to edge of its card or screen (Lh 2026-09-24). */
 .banner {
-  display: grid;
+  display: grid; grid-template-columns: minmax(0, 1fr);
   background: var(--banner-bg, var(--ink-tint));
   color: var(--banner-ink, inherit);
   border-block: var(--border-w) solid var(--banner-border, var(--hairline));
@@ -192,7 +192,9 @@
 .banner__summary::-webkit-details-marker { display: none; }
 .banner__summary .icon { transition: rotate var(--motion-quick) ease; }
 .banner[open] .banner__summary .icon { rotate: 180deg; }
-.banner__body { display: grid; gap: var(--banner-body-gap, var(--sp-1)); padding-bottom: var(--sp-4); }
+/* the band's words never run past it: one column that cannot be wider than the band (a grid track is as wide as its longest
+   word otherwise), and a word with no break in it — a link — breaks where it must (mailpool, Lh 2026-10-01) */
+.banner__body { display: grid; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; gap: var(--banner-body-gap, var(--sp-1)); padding-bottom: var(--sp-4); }
 .banner::details-content { width: 100%; }
 @supports (interpolate-size: allow-keywords) {
   @media (prefers-reduced-motion: no-preference) {

package/css/numbers.css

@@ -242,6 +242,14 @@
 .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); }
 
+/* ---- spinner: "working on it", a wait of unknown length (Lh 2026-10-01) ----
+   <span class="spinner" role="status"><svg class="icon">…loader-circle…</svg>Loading…</span>
+   The ring turns; words beside it are optional and take the caption's look. Still when motion is reduced. */
+.spinner { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); vertical-align: middle; font: var(--type-caption); color: var(--spinner-ink, currentColor); }
+.spinner > .icon { flex: none; }
+@media (prefers-reduced-motion: no-preference) { .spinner > .icon { animation: spinner-turn 0.9s linear infinite; } }
+@keyframes spinner-turn { to { rotate: 1turn; } }
+
 /* ---- 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

package/css/sheet.css

@@ -81,7 +81,7 @@
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
   box-shadow: var(--sheet-shadow, var(--shadow-sheet));
-  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad) + var(--_safe-b-open)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
+  --_foot: calc(var(--card-gap) + var(--sheet-foot-h, var(--btn-h)) + var(--card-pad) + var(--_safe-b-open)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -148,7 +148,7 @@
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
 /* …and the link row under the button, when there is one (its line + the gap over it) */
-.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) + var(--card-pad) + var(--_safe-b-open)); }
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--sheet-foot-h, calc(var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)))) + var(--card-pad) + var(--_safe-b-open)); } /* --sheet-foot-h: the foot's rows as the Sheet measured them (a button grows with the text size) */
 .sheet > .card__foot {
   position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
   align-items: end;

package/dist/cardds.css

@@ -1374,7 +1374,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
   box-shadow: var(--sheet-shadow, var(--shadow-sheet));
-  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad) + var(--_safe-b-open)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
+  --_foot: calc(var(--card-gap) + var(--sheet-foot-h, var(--btn-h)) + var(--card-pad) + var(--_safe-b-open)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -1441,7 +1441,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
 /* …and the link row under the button, when there is one (its line + the gap over it) */
-.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) + var(--card-pad) + var(--_safe-b-open)); }
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--sheet-foot-h, calc(var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)))) + var(--card-pad) + var(--_safe-b-open)); } /* --sheet-foot-h: the foot's rows as the Sheet measured them (a button grows with the text size) */
 .sheet > .card__foot {
   position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
   align-items: end;
@@ -2678,6 +2678,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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); }
 
+/* ---- spinner: "working on it", a wait of unknown length (Lh 2026-10-01) ----
+   <span class="spinner" role="status"><svg class="icon">…loader-circle…</svg>Loading…</span>
+   The ring turns; words beside it are optional and take the caption's look. Still when motion is reduced. */
+.spinner { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); vertical-align: middle; font: var(--type-caption); color: var(--spinner-ink, currentColor); }
+.spinner > .icon { flex: none; }
+@media (prefers-reduced-motion: no-preference) { .spinner > .icon { animation: spinner-turn 0.9s linear infinite; } }
+@keyframes spinner-turn { to { rotate: 1turn; } }
+
 /* ---- 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
@@ -3770,7 +3778,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
      <div class="banner__body">…</div></details>
    A light tint (not a card tone) with a slightly darker rule above and below, edge to edge of its card or screen (Lh 2026-09-24). */
 .banner {
-  display: grid;
+  display: grid; grid-template-columns: minmax(0, 1fr);
   background: var(--banner-bg, var(--ink-tint));
   color: var(--banner-ink, inherit);
   border-block: var(--border-w) solid var(--banner-border, var(--hairline));
@@ -3786,7 +3794,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .banner__summary::-webkit-details-marker { display: none; }
 .banner__summary .icon { transition: rotate var(--motion-quick) ease; }
 .banner[open] .banner__summary .icon { rotate: 180deg; }
-.banner__body { display: grid; gap: var(--banner-body-gap, var(--sp-1)); padding-bottom: var(--sp-4); }
+/* the band's words never run past it: one column that cannot be wider than the band (a grid track is as wide as its longest
+   word otherwise), and a word with no break in it — a link — breaks where it must (mailpool, Lh 2026-10-01) */
+.banner__body { display: grid; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; gap: var(--banner-body-gap, var(--sp-1)); padding-bottom: var(--sp-4); }
 .banner::details-content { width: 100%; }
 @supports (interpolate-size: allow-keywords) {
   @media (prefers-reduced-motion: no-preference) {

package/dist/index.d.ts

@@ -56,6 +56,7 @@ export * from './choice/Mood.js';
 export * from './choice/Slider.js';
 export * from './numbers/Ring.js';
 export * from './numbers/Progress.js';
+export * from './numbers/Spinner.js';
 export * from './numbers/Track.js';
 export * from './numbers/Band.js';
 export * from './numbers/DotGrid.js';

package/dist/index.js

@@ -60,6 +60,7 @@ export * from './choice/Mood.js';
 export * from './choice/Slider.js';
 export * from './numbers/Ring.js';
 export * from './numbers/Progress.js';
+export * from './numbers/Spinner.js';
 export * from './numbers/Track.js';
 export * from './numbers/Band.js';
 export * from './numbers/DotGrid.js';

package/dist/numbers/Spinner.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, ReactNode } from 'react';
+export interface SpinnerProps extends Omit<ComponentProps<'span'>, 'children'> {
+    /** the ring's size, an Icon's: xs = in a caption or a row's meta · md (default) · lg = an EmptyState's `icon` */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** what is being waited for, READ OUT (not shown) — give it when there are no words beside the ring */
+    label?: string;
+    /** words shown beside the ring ("กำลังโหลด…"): the line says it, the ring only turns */
+    children?: ReactNode;
+}
+/** Spinner — "working on it": a ring that turns, alone or with a line of words beside it. For a wait of unknown length — a known
+ *  share is a `Progress`. `role="status"`: the words (or `label`) are read out when it appears. In a row's `end`, a card, a
+ *  sheet's body, an `EmptyState`'s `icon`; a whole SCREEN that is not known yet shows nothing instead (`Screen ready`). */
+export declare function Spinner({ size, label, className, children, ...rest }: SpinnerProps): import("react").JSX.Element;

package/dist/numbers/Spinner.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+import { Icon } from '../type/Icon.js';
+/** Spinner — "working on it": a ring that turns, alone or with a line of words beside it. For a wait of unknown length — a known
+ *  share is a `Progress`. `role="status"`: the words (or `label`) are read out when it appears. In a row's `end`, a card, a
+ *  sheet's body, an `EmptyState`'s `icon`; a whole SCREEN that is not known yet shows nothing instead (`Screen ready`). */
+export function Spinner({ size = 'md', label, className, children, ...rest }) {
+    return (_jsxs("span", { className: cx('spinner', className), role: "status", "aria-label": children == null ? label : undefined, ...rest, children: [_jsx(Icon, { name: "loader-circle", size: size }), children] }));
+}

package/dist/sheets/Sheet.js

@@ -173,6 +173,26 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         const stop = watchSize([head], publish);
         return () => { stop(); box.style.removeProperty('--sheet-peek'); };
     }, []);
+    /* the FOOT's room follows what the foot really holds (timebank, Lh 2026-10-01): a button grows with the member's text size, a
+       line may stand over it (an error) — the CSS strip was a fixed sum (--btn-h), so the body's words ran under the button. The
+       sheet measures its foot's rows and publishes --sheet-foot-h; the strip, its ground and the body's stop all read it. */
+    useEffect(() => {
+        const el = ref.current, foot = el?.querySelector(':scope > .card__foot');
+        if (!el || !foot) {
+            el?.style.removeProperty('--sheet-foot-h');
+            return;
+        }
+        const publish = () => {
+            const rows = [...foot.children].map((c) => c.getBoundingClientRect()).filter((r) => r.height > 0);
+            if (!rows.length)
+                return el.style.removeProperty('--sheet-foot-h');
+            el.style.setProperty('--sheet-foot-h', `${Math.max(...rows.map((r) => r.bottom)) - Math.min(...rows.map((r) => r.top))}px`);
+        };
+        const stop = watchSize([...foot.children], publish);
+        const mo = new MutationObserver(publish);
+        mo.observe(foot, { childList: true });
+        return () => { stop(); mo.disconnect(); };
+    }); // every render: the foot's rows are the app's, they come and go
     const focus = (e) => {
         onFocus?.(e);
         if (current !== 'peek' || e.target.closest('.sheet__handle'))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.37",
+  "version": "0.7.38",
   "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.",