@usableapp/cardds 0.7.103 → 0.7.104

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) */
@@ -85,7 +85,7 @@ 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<{
     onClick: (e: MouseEvent<HTMLElement>) => void;

package/dist/cards/Card.js

@@ -17,7 +17,7 @@ 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 }) {
     if (onRemove && !row)

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;