@usableapp/cardds 0.7.105 → 0.7.107

package/dist/cards/Card.d.ts

@@ -1,5 +1,4 @@
 import { type ComponentProps, type MouseEvent, type ReactNode } from 'react';
-import { type CardHeadProps } from './CardHead.js';
 import { type StackPlace } from '../sheets/stackCard.js';
 export type { StackPlace };
 /** which side of a two-faced card shows */
@@ -15,7 +14,7 @@ export interface CardProps extends ComponentProps<'article'> {
     paper?: boolean | 'bands';
     /** compact: a small card inside a card or a sheet body (a note, a promo) */
     sm?: boolean;
-    /** a list row that is its own card: thumb · body · end, in a CardList. Its corner is the big card's PROPORTION, not its size (`--r-card-row`, 13; knob `--card-row-radius`).
+    /** a list row that is its own card: the line itself, `Lead` · `Words` · `End` (or a control) as its children, in a CardList. Its corner is the big card's PROPORTION, not its size (`--r-card-row`, 13; knob `--card-row-radius`).
      *  Pickable: `as="label"` round a radio (`<input type="radio">`, unseen, over the whole card) and the app gives the picked one its `tone` */
     row?: boolean;
     /** the image IS the card: a Placeholder or img first, text over a scrim */
@@ -30,21 +29,6 @@ export interface CardProps extends ComponentProps<'article'> {
     as?: 'article' | 'div' | 'a' | 'label' | 'section' | 'li';
     /** the link's target, for `as="a"` */
     href?: string;
-    /** THE HEAD, filled in place: the heading (wraps freely) — the card writes its CardHead first. For a head of your own shape
-     *  (a chip before the words, a tile badge) write `<CardHead>` as the first child instead, and leave these out */
-    heading?: ReactNode;
-    /** the muted line under the heading */
-    caption?: ReactNode;
-    /** the head's far-right thing: a Chip, an IconBtn, a Badge, a small Ring */
-    end?: ReactNode;
-    /** the heading's level (h2 default; h1 for the one-feature page) */
-    level?: CardHeadProps['level'];
-    /** THE FOOT, filled in place: its Btns (≤4, one line) — the card writes its CardFoot last */
-    foot?: ReactNode;
-    /** the small Link under the foot's buttons (CardFoot `link`) */
-    footLink?: ReactNode;
-    /** the foot is a few big ROUND buttons (CardFoot `round`): `foot` holds `IconBtn`s, stood as one centred group a fixed gap apart */
-    footRound?: boolean;
     /** set by `SheetStack` from the app's `open` and `refreshing`. The card renders its place, its grip and its pull. Leave it unset on any other card */
     stack?: StackPlace;
     /** THE CARD LEAVES — the card floats away: up and out with a small turn, as one piece with all it holds (a stamp that has just landed on it goes with it).
@@ -60,7 +44,7 @@ export interface CardProps extends ComponentProps<'article'> {
      *  `--card-remove-size` · `--card-remove-inset` · `--card-remove-ink` · `--card-remove-bg` */
     onRemove?: () => void;
     /** THE BACK — the card has two faces and the member turns the WHOLE card over: a tap anywhere on it that is not on a control asks for the other
-     *  face. The head and the foot (`heading`/`caption`/`end` or a CardHead child, `foot`) are given once and drawn on BOTH faces, so they read the same
+     *  face. The head and the foot (a `Head` child, a `Foot` child) are given once and drawn on BOTH faces, so they read the same
      *  either way; the children are the front's middle, `back` the back's. The card is as tall as its taller face and each face fills it, the middle taking
      *  what is left, so the card never changes height when it turns (knob `--card-middle-h` fixes the middle's height instead). The hidden face is `inert`; an `id` in the head or the foot would be drawn twice, so give it none.
      *  Not on a `row`, `sm` or `stack` card */
@@ -80,16 +64,16 @@ export interface CardProps extends ComponentProps<'article'> {
 }
 /**
  * Card — ONE boundary: head · content · foot. Cards are content the system offers (the words, the thing to read).
- * The head and the foot are SLOTS: `heading` · `caption` · `end` (the card writes its CardHead first) and `foot` · `footLink`
- * (its CardFoot last); the children are the content between them (frameless rows, kv, a ring, a paragraph — never a second card
- * boundary). The order is the card's, never the writer's. A head of its own shape: write `<CardHead>` as the first child instead.
+ * The head is the first child, a `Head`; the foot is the last, a `Foot`. The children between them are the content
+ * (frameless rows, kv, a ring, a paragraph — never a second card boundary). The card finds its `Head` and its `Foot` by their type, so a component
+ * of your own that wraps one is not found: write the `Head` and the `Foot` in the card.
  * A page with one feature and one CTA may be a single card. Keep everything big.
  * PRESSED WHOLE: a card whose ONLY control is its foot's button, or a row card's end button, is pressed anywhere — a touch off the
  * button runs that button's own action once, and the card dims under the finger. The app writes nothing; any other card is only read.
  * TWO FACES (`back`): the whole card turns over on a tap off a control (the flip mechanic it shares with Postcard); the head and the foot
  * read the same on both faces, the middle is one fixed height. `paper="bands"`: paper head and foot bands edge to edge, the tint between.
  */
-export declare function Card({ tone, paper, sm, row, cover, fold, centre, band, as, heading, caption, end, level, foot, footLink, footRound, stack, leave, onLeft, onRemove, removeLabel, back, face, defaultFace, onFaceChange, toBackLabel, toFrontLabel, className, style, children, onClick, ref, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
+export declare function Card({ tone, paper, sm, row, cover, fold, centre, band, as, stack, leave, onLeft, onRemove, removeLabel, back, face, defaultFace, onFaceChange, toBackLabel, toFrontLabel, className, style, children, onClick, ref, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
     onClick: (e: MouseEvent<HTMLElement>) => void;
     inert?: boolean | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;

package/dist/cards/Card.js

@@ -2,24 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Children, createElement, isValidElement, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { cx } from '../cx.js';
 import { useControlled, useLatest, warnOnce } from '../state.js';
-import { CardHead } from './CardHead.js';
-import { CardFoot } from './CardFoot.js';
+import { Head } from '../parts/Head.js';
+import { Foot } from '../parts/Foot.js';
 import { goControl, onControl } from './cardGo.js';
 import { Icon } from '../type/Icon.js';
 import { word } from '../words.js';
 import { StackHeadCtx, StackPullCtx, ownHead, stackPaint, useStackCard } from '../sheets/stackCard.js';
 /**
  * Card — ONE boundary: head · content · foot. Cards are content the system offers (the words, the thing to read).
- * The head and the foot are SLOTS: `heading` · `caption` · `end` (the card writes its CardHead first) and `foot` · `footLink`
- * (its CardFoot last); the children are the content between them (frameless rows, kv, a ring, a paragraph — never a second card
- * boundary). The order is the card's, never the writer's. A head of its own shape: write `<CardHead>` as the first child instead.
+ * The head is the first child, a `Head`; the foot is the last, a `Foot`. The children between them are the content
+ * (frameless rows, kv, a ring, a paragraph — never a second card boundary). The card finds its `Head` and its `Foot` by their type, so a component
+ * of your own that wraps one is not found: write the `Head` and the `Foot` in the card.
  * A page with one feature and one CTA may be a single card. Keep everything big.
  * PRESSED WHOLE: a card whose ONLY control is its foot's button, or a row card's end button, is pressed anywhere — a touch off the
  * button runs that button's own action once, and the card dims under the finger. The app writes nothing; any other card is only read.
  * TWO FACES (`back`): the whole card turns over on a tap off a control (the flip mechanic it shares with Postcard); the head and the foot
  * read the same on both faces, the middle is one fixed height. `paper="bands"`: paper head and foot bands edge to edge, the tint between.
  */
-export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'article', heading, caption, end, level, foot, footLink, footRound, stack, leave, onLeft, onRemove, removeLabel, back, face, defaultFace = 'front', onFaceChange, toBackLabel, toFrontLabel, className, style, children, onClick, ref, ...rest }) {
+export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'article', stack, leave, onLeft, onRemove, removeLabel, back, face, defaultFace = 'front', onFaceChange, toBackLabel, toFrontLabel, className, style, children, onClick, ref, ...rest }) {
     if (onRemove && !row)
         warnOnce('card-remove-row', 'cardds Card: `onRemove` draws its cross on a `row` card only');
     if (back != null && (row || sm || stack))
@@ -27,15 +27,6 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
     const turns = back != null && !row && !sm && !stack;
     const [shown, ask] = useControlled(face, defaultFace, onFaceChange);
     const flipped = turns && shown === 'back';
-    const head = heading != null || caption != null || end != null;
-    const tail = foot != null || footLink != null;
-    if (head || tail) {
-        const parts = Children.toArray(children).filter(isValidElement); // dev hint only
-        if (head && parts.some((c) => c.type === CardHead))
-            warnOnce('card-head-twice', 'cardds Card: `heading`/`caption`/`end` AND a <CardHead> child — one head per card; use one way');
-        if (tail && parts.some((c) => c.type === CardFoot))
-            warnOnce('card-foot-twice', 'cardds Card: `foot`/`footLink` AND a <CardFoot> child — one foot per card; use one way');
-    }
     const own = useRef(null);
     const swallow = useRef(false);
     const pulling = useStackCard(own, stack, swallow);
@@ -95,7 +86,7 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
             stack.onClose();
             return;
         }
-        if (head && stack.open && target.closest('.card__head > :is(h1, h2, h3)')) {
+        if (head && stack.open && target.closest('.head > :is(h1, h2, h3)')) {
             stack.onClose();
             return;
         } // the title folds it; the back stays the keyboard's way
@@ -115,13 +106,11 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
     const cross = row && onRemove ? (_jsx("button", { type: "button", className: "card__remove", "aria-label": removeLabel ?? word('remove'), onClick: (e) => { e.preventDefault(); e.stopPropagation(); onRemove(); }, children: _jsx(Icon, { name: "x" }) }, "remove")) : null;
     if (turns) {
         const kids = Children.toArray(children);
-        const ownHeadKid = kids.find((c) => isValidElement(c) && c.type === CardHead);
-        const ownFootKid = kids.find((c) => isValidElement(c) && c.type === CardFoot);
+        const ownHeadKid = kids.find((c) => isValidElement(c) && c.type === Head);
+        const ownFootKid = kids.find((c) => isValidElement(c) && c.type === Foot);
         const front = kids.filter((c) => c !== ownHeadKid && c !== ownFootKid);
-        const side = (which, middle) => (_jsxs("div", { className: cx('card__face flip__face', `flip__face--${which}`), ...((which === 'back') !== flipped ? { inert: true } : {}), children: [_jsx("button", { type: "button", className: "card__turn", "aria-label": which === 'front' ? toBackLabel ?? word('turnToBack') : toFrontLabel ?? word('turnToFront'), onClick: () => ask(which === 'front' ? 'back' : 'front') }), head ? _jsx(CardHead, { heading: heading, caption: caption, end: end, level: level }) : ownHeadKid, _jsx("div", { className: "card__middle", children: which === 'front' ? front : middle }), tail ? _jsx(CardFoot, { link: footLink, round: footRound, children: foot }) : ownFootKid] }, which));
+        const side = (which, middle) => (_jsxs("div", { className: cx('card__face flip__face', `flip__face--${which}`), ...((which === 'back') !== flipped ? { inert: true } : {}), children: [_jsx("button", { type: "button", className: "card__turn", "aria-label": which === 'front' ? toBackLabel ?? word('turnToBack') : toFrontLabel ?? word('turnToFront'), onClick: () => ask(which === 'front' ? 'back' : 'front') }), ownHeadKid, _jsx("div", { className: "card__middle", children: which === 'front' ? front : middle }), ownFootKid] }, which));
         return createElement(as, props, inner(_jsxs(_Fragment, { children: [side('front', null), side('back', back)] })));
     }
-    if (!head && !tail)
-        return createElement(as, props, inner(_jsxs(_Fragment, { children: [children, cross] })));
-    return createElement(as, props, inner(_jsxs(_Fragment, { children: [head && _jsx(CardHead, { heading: heading, caption: caption, end: end, level: level }, "head"), Children.toArray(children), tail && _jsx(CardFoot, { link: footLink, round: footRound, children: foot }, "foot"), cross] })));
+    return createElement(as, props, inner(_jsxs(_Fragment, { children: [children, cross] })));
 }

package/dist/cards/CardFeed.d.ts

@@ -36,7 +36,7 @@ export interface FeedCardProps extends Omit<ComponentProps<'article'>, 'id' | 'r
     heading: ReactNode;
     /** the muted line under the heading, shown in both sizes */
     caption?: ReactNode;
-    /** the card's thumb at the head's start: an icon by name in the outlined square, drawn in both sizes. Ignored when `lead` is given */
+    /** the card's lead at the head's start: an icon by name in the outlined square (a `Lead`), drawn in both sizes. Ignored when `lead` is given */
     icon?: IconName;
     /** anything at the head's start in place of the icon, drawn in both sizes: a `Stamp` (the small one, 48 × 60, the icon's square is not drawn), an `Avatar`. Wins over `icon` */
     lead?: ReactNode;

package/dist/cards/CardFeed.js

@@ -3,9 +3,9 @@ import { Children, createContext, isValidElement, useContext, useEffect, useId,
 import { cx } from '../cx.js';
 import { glide, reducedMotion, setRefs, sheetMs, stopMoves, useControlled, warnOnce } from '../state.js';
 import { Card } from './Card.js';
-import { CardHead } from './CardHead.js';
-import { CardFoot } from './CardFoot.js';
-import { CardThumb } from './CardParts.js';
+import { Head } from '../parts/Head.js';
+import { Foot } from '../parts/Foot.js';
+import { Lead } from '../parts/Lead.js';
 import { Icon } from '../type/Icon.js';
 import { Text } from '../type/Text.js';
 const FeedCtx = createContext(null);
@@ -105,7 +105,7 @@ export function FeedCard({ id, heading, caption, icon, lead, tone, foot, classNa
     useLayoutEffect(() => {
         // grown from the keyboard: the card stopped being a control under the cursor, so the cursor goes on to its button
         if (!small && byKey.current)
-            own.current?.querySelector('.card__foot :is(button, a[href])')?.focus({ preventScroll: true });
+            own.current?.querySelector('.foot :is(button, a[href])')?.focus({ preventScroll: true });
         byKey.current = false;
     }, [small]);
     const setRef = (node) => {
@@ -119,5 +119,5 @@ export function FeedCard({ id, heading, caption, icon, lead, tone, foot, classNa
             byKey.current = e.detail === 0;
             feed.grow(id);
         } }, onKeyDown: (e) => { onKeyDown?.(e); if (small && !e.defaultPrevented)
-            onSmallKey(e); }, children: [_jsxs(CardHead, { className: "feed-card__head", children: [lead != null ? _jsx("span", { className: "feed-card__lead", children: lead }) : icon && _jsx(CardThumb, { children: _jsx(Icon, { name: icon, size: "sm" }) }), _jsx(Text, { level: "h2", id: name, children: heading }), caption != null && _jsx(Text, { level: "caption", muted: true, children: caption })] }), _jsx("div", { className: "feed-card__more", inert: small, children: _jsxs("div", { className: "feed-card__rest", children: [children, foot != null && _jsx(CardFoot, { children: foot })] }) })] }));
+            onSmallKey(e); }, children: [_jsxs(Head, { children: [lead != null ? _jsx("span", { className: "feed-card__lead", children: lead }) : icon && _jsx(Lead, { children: _jsx(Icon, { name: icon, size: "sm" }) }), _jsx(Text, { level: "h2", id: name, children: heading }), caption != null && _jsx(Text, { level: "caption", muted: true, children: caption })] }), _jsx("div", { className: "feed-card__more", inert: small, children: _jsxs("div", { className: "feed-card__rest", children: [children, foot != null && _jsx(Foot, { children: foot })] }) })] }));
 }

package/dist/cards/CardParts.d.ts

@@ -3,18 +3,6 @@ export interface CardMediaProps extends ComponentProps<'div'> {
 }
 /** CardMedia — rounded media inside a card (a Placeholder or img); a corner JourneyBadge pins to it. */
 export declare function CardMedia({ className, ...rest }: CardMediaProps): import("react").JSX.Element;
-export interface CardBodyProps extends ComponentProps<'div'> {
-}
-/** CardBody — the flexible middle of a `Card row`: a title over a caption. */
-export declare function CardBody({ className, ...rest }: CardBodyProps): import("react").JSX.Element;
-export interface CardThumbProps extends ComponentProps<'span'> {
-}
-/** CardThumb — the small outlined square leading a `Card row` (a number, an initial, an icon). */
-export declare function CardThumb({ className, ...rest }: CardThumbProps): import("react").JSX.Element;
-export interface CardEndProps extends ComponentProps<'div'> {
-}
-/** CardEnd — the trailing value + caption, right-aligned (in a head or a row card). */
-export declare function CardEnd({ className, ...rest }: CardEndProps): import("react").JSX.Element;
 export interface CardListProps extends ComponentProps<'div'> {
     /** how many rows show before the list scrolls IN ITSELF, counted in rows, not a height: `2.5` = two whole rows and half of the third, the cut row
      *  saying there is more. The list measures its own rows (they wrap to any height) and keeps the window right when they change. Leave it out and the

package/dist/cards/CardParts.js

@@ -5,18 +5,6 @@ import { cx } from '../cx.js';
 export function CardMedia({ className, ...rest }) {
     return _jsx("div", { className: cx('card__media', className), ...rest });
 }
-/** CardBody — the flexible middle of a `Card row`: a title over a caption. */
-export function CardBody({ className, ...rest }) {
-    return _jsx("div", { className: cx('card__body', className), ...rest });
-}
-/** CardThumb — the small outlined square leading a `Card row` (a number, an initial, an icon). */
-export function CardThumb({ className, ...rest }) {
-    return _jsx("span", { className: cx('card__thumb', className), ...rest });
-}
-/** CardEnd — the trailing value + caption, right-aligned (in a head or a row card). */
-export function CardEnd({ className, ...rest }) {
-    return _jsx("div", { className: cx('card__end', className), ...rest });
-}
 /** CardList — a stack of `Card row`s, each its own boundary: a list of things to open or to pick (past requests to reuse). It stands on the base or straight in a sheet's
  *  body and scrolls with it; never inside a card (a card never wraps a card — `cardds check` rule `card-in-card`). Rows inside a card are `Rows`.
  *  A SHORT WINDOW of past entries under a form (`show={2.5}`): the list scrolls in itself, a few rows in sight; each row a `Card row as="label"` round a radio

package/dist/cards/cardGo.js

@@ -23,7 +23,7 @@ export function goControl(card) {
     if (control.matches(':disabled, [aria-disabled="true"]'))
         return null;
     const foot = control.parentElement;
-    const inFoot = foot?.matches('.card__foot') && foot.parentElement?.closest('.card') === card; // the card's OWN foot, also when a part of the card holds it (a FeedCard's region)
+    const inFoot = foot?.matches('.foot') && foot.parentElement?.closest('.card') === card; // the card's OWN foot, also when a part of the card holds it (a FeedCard's region)
     const atRowEnd = card.matches('.card--row') && card.lastElementChild === control && !control.matches('.card__remove'); // a row's cross takes it off its list: never pressed by a touch elsewhere
     return inFoot || atRowEnd ? control : null;
 }

package/dist/cards/cardGrounds.js

@@ -58,8 +58,8 @@ export function cardGrounds(root = document.body) {
     probe.style.cssText = 'position:absolute;inset-inline-start:-200vw;inset-block-start:0;inline-size:20rem;';
     const grounds = [
         { ground: 'screen', html: '', end: '', token: '--surface' },
-        { ground: 'sheet', html: '<article class="card sheet"><div class="sheet__body">', end: '</div></article>', token: '--card-1-bg' },
-        { ground: 'paper sheet', html: '<article class="card sheet sheet--paper"><div class="sheet__body">', end: '</div></article>', token: '--color-paper' },
+        { ground: 'sheet', html: '<article class="card sheet"><div class="body">', end: '</div></article>', token: '--card-1-bg' },
+        { ground: 'paper sheet', html: '<article class="card sheet sheet--paper"><div class="body">', end: '</div></article>', token: '--color-paper' },
     ];
     const tones = [1, 2, 3, 4, 5];
     probe.innerHTML = grounds.map((g) => `<div>${g.html}${tones.map((t) => `<div class="card${t > 1 ? ` card--${t}` : ''}"></div>`).join('')}${g.end}</div>`).join('');