@usableapp/cardds 0.7.103 → 0.7.105

package/dist/cards/Card.d.ts

@@ -9,8 +9,8 @@ export type Tone = 1 | 2 | 3 | 4 | 5;
 export interface CardProps extends ComponentProps<'article'> {
     /** the tone slot — see `Tone` */
     tone?: Tone;
-    /** `true`: the content is white paper and the head keeps the card's colour (the look of `Sheet paper`). `'bands'`: the opposite, two-tone —
-     *  the head and the foot are white paper bands edge to edge, the middle between them keeps the card's tone, lightened (knob `--card-middle-bg`).
+    /** `true`: the content is the theme's paper (`--action-bg`, the ground of its fields) and the head keeps the card's colour (the look of `Sheet paper`). `'bands'`: the opposite, two-tone —
+     *  the head and the foot are paper bands edge to edge, the middle between them keeps the card's tone, lightened (knob `--card-middle-bg`).
      *  Omit it and the content matches the head */
     paper?: boolean | 'bands';
     /** compact: a small card inside a card or a sheet body (a note, a promo) */
@@ -43,6 +43,8 @@ export interface CardProps extends ComponentProps<'article'> {
     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).
@@ -59,8 +61,8 @@ export interface CardProps extends ComponentProps<'article'> {
     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
-     *  either way; the children are the front's middle, `back` the back's. The middle is one fixed height on both faces (knob `--card-middle-h`), so the
-     *  card never changes height when it turns. The hidden face is `inert`; an `id` in the head or the foot would be drawn twice, so give it none.
+     *  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 */
     back?: ReactNode;
     /** CONTROLLED: the face that shows — pair it with `onFaceChange`. The app owns it */
@@ -85,9 +87,9 @@ export interface CardProps extends ComponentProps<'article'> {
  * 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"`: white head and foot bands edge to edge, the tint between.
+ * 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, 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, 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<{
     onClick: (e: MouseEvent<HTMLElement>) => void;
     inert?: boolean | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;

package/dist/cards/Card.js

@@ -17,9 +17,9 @@ import { StackHeadCtx, StackPullCtx, ownHead, stackPaint, useStackCard } from '.
  * 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"`: white head and foot bands edge to edge, the tint between.
+ * 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, 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', 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 }) {
     if (onRemove && !row)
         warnOnce('card-remove-row', 'cardds Card: `onRemove` draws its cross on a `row` card only');
     if (back != null && (row || sm || stack))
@@ -118,10 +118,10 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
         const ownHeadKid = kids.find((c) => isValidElement(c) && c.type === CardHead);
         const ownFootKid = kids.find((c) => isValidElement(c) && c.type === CardFoot);
         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, 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') }), 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));
         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, children: foot }, "foot"), 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] })));
 }

package/dist/cards/CardFeed.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, createContext, isValidElement, useContext, useEffect, useId, useLayoutEffect, useRef } from 'react';
 import { cx } from '../cx.js';
-import { reducedMotion, setRefs, useControlled, warnOnce } from '../state.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';
@@ -45,19 +45,17 @@ export function CardFeed({ big: bigProp, defaultBig, onBigChange, onMore, ahead
         if (changed) {
             if (!kept && ids.length)
                 request(ids[0], 'queue');
-            els.forEach((el) => el.getAnimations().forEach((a) => { if (a.id === 'feed-move')
-                a.cancel(); })); // read the resting places
+            stopMoves(els, 'feed-move'); // read the resting places
         }
         const at = new Map(els.map((el) => [el, el.offsetTop]));
         if (changed && box && !reducedMotion()) {
-            const ms = (parseFloat(getComputedStyle(box).getPropertyValue('--motion-sheet')) || 0.35) * 1000;
+            const cs = getComputedStyle(box), arrive = cs.getPropertyValue('--ease-out').trim() || 'ease-out';
             for (const el of els) {
                 const from = tops.current.get(el);
-                const move = from === undefined
-                    ? el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: ms, easing: 'ease-out' }) // it came in: no place to come from
-                    : from !== at.get(el) ? el.animate([{ translate: `0 ${from - (at.get(el) ?? 0)}px` }, { translate: '0 0' }], { duration: ms, easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)' }) : null;
-                if (move)
-                    move.id = 'feed-move';
+                if (from === undefined)
+                    el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: sheetMs(cs), easing: arrive }).id = 'feed-move'; // it came in: no place to come from
+                else if (from !== at.get(el))
+                    glide(el, from - (at.get(el) ?? 0), cs, 'feed-move');
             }
         }
         tops.current = at;

package/dist/cards/CardFoot.d.ts

@@ -3,8 +3,13 @@ export interface CardFootProps extends ComponentProps<'div'> {
     /** a SMALL LINK under the buttons, centred on its own short row (a `Link sm` — "details for developers") — the same as an
      *  ActionBar's ctaLink (Lh 2026-09-23). It never takes a share of the buttons' line */
     link?: ReactNode;
+    /** a foot of a few ROUND buttons (`IconBtn`, a size `lg` / `xl` for the big ones): they keep their own size instead of sharing the line, and
+     *  stand as ONE group in the middle of the foot, a fixed gap apart (wider than the Btns' — `--card-foot-gap` sets it). The Btn foot is
+     *  unchanged: this is the other foot, for a few big round answers */
+    round?: boolean;
 }
 /** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
  *  link goes in `link`, under it. A `Btn form` keeps its own size here: as wide as its words, centred — for a foot whose one button
- *  should not fill the card. */
-export declare function CardFoot({ link, className, children, ...rest }: CardFootProps): import("react").JSX.Element;
+ *  should not fill the card. With `round` it is the foot of a few round `IconBtn`s (`size="xl"`, one `primary` with a word, the others
+ *  with icons): one centred group, a fixed gap between them. */
+export declare function CardFoot({ link, round, className, children, ...rest }: CardFootProps): import("react").JSX.Element;

package/dist/cards/CardFoot.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
  *  link goes in `link`, under it. A `Btn form` keeps its own size here: as wide as its words, centred — for a foot whose one button
- *  should not fill the card. */
-export function CardFoot({ link, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('card__foot', link != null && 'card__foot--link', className), ...rest, children: [children, link != null && _jsx("div", { className: "card__foot-link", children: link })] }));
+ *  should not fill the card. With `round` it is the foot of a few round `IconBtn`s (`size="xl"`, one `primary` with a word, the others
+ *  with icons): one centred group, a fixed gap between them. */
+export function CardFoot({ link, round, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('card__foot', link != null && 'card__foot--link', round && 'card__foot--round', className), ...rest, children: [children, link != null && _jsx("div", { className: "card__foot-link", children: link })] }));
 }