@usableapp/cardds 0.7.30 → 0.7.32

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 > 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.32 — 2026-09-29
+
+### Changed
+- **cardds names its own controls, in the page's language** (Lh 2026-09-29): the words a control reads out when the app gives none — a sheet's handle, a back / next / previous button, Skip, a Pin's cells, Progress, Image, Mood, Photos, Voice note — follow `<html lang>`. `th` ships (`ปรับความสูง`, `กลับ`, `ถัดไป`, `หลักที่`…), anything else is English as before. An app passes NOTHING per component: remove `handle="ปรับความสูง"`, `backLabel="กลับ"`, `label="หลักที่"`… where they only repeated these words. A prop still wins where a screen needs other words.
+### Added
+- `setWords(lang, { … })` — a project in another language adds its set once at app start (missing words fall back to English); `word(key)` reads one.
+- `CallSheet handle` (+ a way's `sheet.handle`): override the sheets' handle name, or `false` for none.
+
+## 0.7.31 — 2026-09-29
+
+### Changed
+- **One rule, one mechanic: a part that becomes active has its field waiting with the cursor** (Lh 2026-09-29). Every component that becomes active now uses the same helper inside cardds (`focusWhenActive`): once the part has settled, the cursor goes to the field marked `data-autofocus`, else its first field, else its heading; a field that already has the cursor keeps it.
+  - `Sheet` (as 0.7.30) and `SheetSteps` (as before) — now on the one mechanic.
+  - `SheetStack` (so `Home`): a sheet opened → the first field in its body has the cursor after the slide. New. A section with no field: nothing moves.
+  - `Modal`: arrived → the cursor is in it (its field, else the `Drawer`'s question — no ring), not left on the button behind the scrim. New.
+  Nothing to change in a screen: remove any focus code of your own for these parts.
+
 ## 0.7.30 — 2026-09-29
 
 ### Changed

package/README.md

@@ -302,6 +302,13 @@ whose markup has rules, because the sheet's box is the step itself:
   A sheet always ARRIVES and LEAVES by sliding: mounted already up, it starts `away` for one frame and slides in. To
   take it off the screen set `state="away"` and unmount it in `onSettled` (`s === 'away'`) — unmounting it while it is up
   only makes it vanish (dev warning). Story: `Sheet · MountedOnDemand`.
+- **A part that becomes active has its field waiting with the cursor** (Lh 2026-09-29) — a `Sheet` come up, a `SheetStep`
+  opened, a `SheetStack` sheet opened, a `Modal` arrived. Once it has settled: the field marked `data-autofocus`, else its
+  first field, else its heading (a step's title, a modal's question) or, for a sheet come onto the screen, its handle. A field
+  that already has the cursor keeps it. One mechanic for all of them (`focusWhenActive`, src/state.ts); an app writes no focus code.
+- **cardds names its own controls, in the page's language** (Lh 2026-09-29): a handle, a back button, a Pin's cells… read
+  their name from `src/words.ts` by `<html lang>` (en, th ship; `setWords(lang, {…})` adds one). An app passes no label that
+  only repeats these words; a prop still wins.
 
 ## Centred card markup
 

package/css/layover.css

@@ -82,6 +82,7 @@
 /* the CONFIRM: a Modal with no Lift — the drawer IS the card, as tall as its words (no fixed band, no second beat) */
 .modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
 .modal__drawer .t-caption { opacity: var(--dim); }
+.modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */
 .modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
 .modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
 @media (prefers-reduced-motion: no-preference) {

package/dist/actions/Btn.d.ts

@@ -19,11 +19,13 @@ export interface BtnProps extends Omit<ComponentProps<'button'>, 'form'> {
  * 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.
  */
 export declare function Btn({ primary, quiet, block, form, xl, href, className, type, ...rest }: BtnProps): import("react").DetailedReactHTMLElement<{
+    translate?: "yes" | "no" | undefined | undefined;
     onChange?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
-    name?: string | undefined | undefined;
     slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    name?: string | undefined | undefined;
     children?: import("react").ReactNode;
     suppressHydrationWarning?: boolean | undefined | undefined;
     color?: string | undefined | undefined;
@@ -266,12 +268,10 @@ export declare function Btn({ primary, quiet, block, form, xl, href, className,
     autoFocus?: boolean | undefined | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     hidden?: boolean | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;
     about?: string | undefined | undefined;
     content?: string | undefined | undefined;
@@ -309,6 +309,6 @@ export declare function Btn({ primary, quiet, block, form, xl, href, className,
     formTarget?: string | undefined | undefined;
     value?: string | number | readonly string[] | undefined;
     href: string | undefined;
-    type: "button" | "submit" | "reset" | undefined;
+    type: "reset" | "submit" | "button" | undefined;
     className: string;
 }, HTMLButtonElement>;

package/dist/actions/IconBtn.d.ts

@@ -306,6 +306,6 @@ export declare function IconBtn({ label, icon, sm, invert, href, className, type
     onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     href: string | undefined;
-    type: "button" | "submit" | "reset" | undefined;
+    type: "reset" | "submit" | "button" | undefined;
     className: string;
 }, HTMLButtonElement>;

package/dist/cardds.css

@@ -3652,6 +3652,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* the CONFIRM: a Modal with no Lift — the drawer IS the card, as tall as its words (no fixed band, no second beat) */
 .modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
 .modal__drawer .t-caption { opacity: var(--dim); }
+.modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */
 .modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
 .modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
 @media (prefers-reduced-motion: no-preference) {

package/dist/cards/Placeholder.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
+import { word } from '../words.js';
 /** Placeholder — the wireframe's crossed box standing in for a photo or illustration (currentColor, survives any palette). */
-export function Placeholder({ size, label = 'Image', className, ...rest }) {
+export function Placeholder({ size, label = word('image'), className, ...rest }) {
     return _jsx("div", { className: cx('ph', size && `ph--${size}`, className), role: "img", "aria-label": label, ...rest });
 }

package/dist/choice/Calendar.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useControlled } from '../state.js';
 import { cx } from '../cx.js';
 import { IconBtn } from '../actions/IconBtn.js';
+import { word } from '../words.js';
 /** Calendar — a month grid of 44px round cells: one accent day, optional marks; prev/next in the head. It shows ONE month and knows no dates:
  *  the app owns which month (`title`, `days`, `start` + `onPrev` / `onNext`) and which day (`selected` + `onSelect`, or `defaultSelected`). */
-export function Calendar({ title, days = 30, start = 1, selected, defaultSelected, onSelect, onPrev, onNext, prevLabel = 'Previous', nextLabel = 'Next', marks = [], marks2 = [], disabled = [], weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], nav, className, ...rest }) {
+export function Calendar({ title, days = 30, start = 1, selected, defaultSelected, onSelect, onPrev, onNext, prevLabel = word('previous'), nextLabel = word('next'), marks = [], marks2 = [], disabled = [], weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], nav, className, ...rest }) {
     const [day, pick] = useControlled(selected, defaultSelected, onSelect);
     return (_jsxs("div", { className: cx('calendar', className), ...rest, children: [_jsxs("div", { className: "calendar__head", children: [_jsx("span", { className: "t-title", children: title }), nav ?? (_jsxs("span", { className: "icon-row", children: [_jsx(IconBtn, { sm: true, icon: "chevron-left", label: prevLabel, onClick: onPrev }), _jsx(IconBtn, { sm: true, icon: "chevron-right", label: nextLabel, onClick: onNext })] }))] }), _jsxs("div", { className: "calendar__grid", children: [weekdays.map((d) => _jsx("span", { className: "calendar__wd", children: d }, d)), Array.from({ length: days }, (_, i) => i + 1).map((d) => (_jsx("button", { type: "button", className: cx('calendar__day', marks.includes(d) && 'calendar__day--mark', marks2.includes(d) && 'calendar__day--mark2'), "aria-selected": d === day ? 'true' : undefined, onClick: () => pick(d), disabled: disabled.includes(d), style: d === 1 ? { '--start': start } : undefined, children: d }, d)))] })] }));
 }

package/dist/choice/Mood.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 import { useControlled } from '../state.js';
+import { word } from '../words.js';
 /** Mood — five dots in a pill from bad to good; the picked one grows. */
-export function Mood({ name = 'mood', value, defaultValue, label = 'Mood', onChange, className, ...rest }) {
+export function Mood({ name = 'mood', value, defaultValue, label = word('mood'), onChange, className, ...rest }) {
     const [picked, pick] = useControlled(value, defaultValue, onChange);
     return (_jsx("fieldset", { className: cx('mood', className), "aria-label": label, ...rest, children: [1, 2, 3, 4, 5].map((n) => (_jsxs("label", { className: "mood__opt", children: [_jsx("input", { type: "radio", name: name, value: n, checked: n === picked, onChange: () => pick(n) }), _jsx("span", { className: "mood__dot" })] }, n))) }));
 }

package/dist/forms/Pin.js

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useControlled, useLatest } from '../state.js';
 import { cx } from '../cx.js';
 import { useCheck } from './check.js';
+import { word } from '../words.js';
 const RESET_MS = 900; // a code that does not match: red + shake this long, then the cells empty for a new try
 /**
  * Pin — big code entry, one digit per pill; a filled cell turns accent. Lives in a Sheet.
@@ -10,7 +11,7 @@ const RESET_MS = 900; // a code that does not match: red + shake this long, then
  * arrows walk the cells, a pasted code fills them from the one it landed in; only digits stay. The first cell takes the SMS
  * one-time-code autofill. The code is a VALUE, controlled like an input: `value` + `onChange`, or `defaultValue`.
  */
-export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onChange, autoFocus, error, match, formatError, secret, className, onAnimationEnd, ...rest }) {
+export function Pin({ length = 6, value, defaultValue = '', label = word('digit'), onChange, autoFocus, error, match, formatError, secret, className, onAnimationEnd, ...rest }) {
     const ref = useRef(null);
     const [typed, request] = useControlled(value, defaultValue, onChange);
     const code = typed.replace(/\D/g, '').slice(0, length);

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './type/Icon.js';
 export { ICON_NAMES } from './type/icons.js';
 export * from './type/Text.js';
 export { setTextScale } from './type/textScale.js';
+export { setWords, word, type WordKey } from './words.js';
 export * from './scaffold/Screen.js';
 export * from './scaffold/AppBar.js';
 export * from './scaffold/TopBar.js';

package/dist/index.js

@@ -9,6 +9,7 @@ export * from './type/Icon.js';
 export { ICON_NAMES } from './type/icons.js';
 export * from './type/Text.js';
 export { setTextScale } from './type/textScale.js';
+export { setWords, word } from './words.js';
 export * from './scaffold/Screen.js';
 export * from './scaffold/AppBar.js';
 export * from './scaffold/TopBar.js';

package/dist/media/Mosaic.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
+import { word } from '../words.js';
 /** Mosaic — one big photo + two small in a card (three Placeholders or imgs). */
-export function Mosaic({ label = 'Photos', className, ...rest }) {
+export function Mosaic({ label = word('photos'), className, ...rest }) {
     return _jsx("div", { className: cx('mosaic', className), role: "img", "aria-label": label, ...rest });
 }
 /* a MOCK voice shape (Lh 2026-09-23): short and tall rounded bars, loud in bursts, quiet between — not a real recording */
 const MOCK = [0.25, 0.45, 0.3, 0.6, 0.4, 0.2, 0.5, 0.85, 0.35, 0.7, 1, 0.55, 0.3, 0.75, 0.9, 0.45, 0.25, 0.6, 0.8, 0.4,
     0.2, 0.5, 0.7, 0.35, 0.95, 0.6, 0.3, 0.45, 0.8, 0.5, 0.25, 0.65, 0.9, 0.4, 0.2, 0.55, 0.75, 0.35, 0.5, 0.3];
 /** Wave — a voice note's waveform: rounded bars, short and tall, filling a Row's body. `levels` draws a real one; without it, a mock-up. */
-export function Wave({ label = 'Voice note', levels = MOCK, className, ...rest }) {
+export function Wave({ label = word('voiceNote'), levels = MOCK, className, ...rest }) {
     return (_jsx("span", { className: cx('wave', className), role: "img", "aria-label": label, ...rest, children: levels.map((v, i) => _jsx("i", { style: { '--wave-at': Math.max(0.12, Math.min(1, v)) } }, i)) }));
 }

package/dist/media/Tile.d.ts

@@ -38,9 +38,11 @@ export interface TileProps extends Omit<ComponentProps<'div'>, 'onChange'> {
 }
 /** Tile — a big square: icon top, label bottom; `pick` toggles, `stat` shows a value, `upload` is the dashed slot. */
 export declare function Tile({ icon, label, value, sub, pick, type, name, checked, defaultChecked, onChange, on, stat, upload, wide, tone, as, className, children, ...rest }: TileProps): import("react").DetailedReactHTMLElement<{
+    translate?: "yes" | "no" | undefined | undefined;
     slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
     color?: string | undefined | undefined;
     id?: string | undefined | undefined;
@@ -281,12 +283,10 @@ export declare function Tile({ icon, label, value, sub, pick, type, name, checke
     autoFocus?: boolean | undefined | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     hidden?: boolean | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;
     about?: string | undefined | undefined;
     content?: string | undefined | undefined;

package/dist/numbers/Track.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
+import { word } from '../words.js';
 /** Track — step progress in a dark pill: done · done · todo; children are TrackSteps holding an Icon each. */
-export function Track({ label = 'Progress', className, ...rest }) {
+export function Track({ label = word('progress'), className, ...rest }) {
     return _jsx("ol", { className: cx('track', className), "aria-label": label, ...rest });
 }
 /** TrackStep — one step of a Track: an Icon (children) or its number (`num`) in a round; lit when done. */

package/dist/sheets/Drawer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, Fragment, useEffect, useRef } from 'react';
-import { useLatest } from '../state.js';
+import { focusWhenActive, useLatest } from '../state.js';
 import { cx } from '../cx.js';
 /**
  * Modal — the ask: ONE card at the centre of a `SheetStage dim`, two parts — a `Lift` (the thing being asked about, light, scrolls
@@ -28,6 +28,16 @@ export function Modal({ open = true, onClosed, onDismiss, className, ...rest })
             closed.current?.(); });
         return () => { live = false; };
     }, [open]);
+    /* it has arrived → the cursor is in it, not left behind the scrim: its field if it holds one, else its question (the one rule of every
+       part that becomes active: focusWhenActive) — once the beats have played */
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !open)
+            return;
+        const beats = Math.max(0, ...el.getAnimations({ subtree: true }).map((a) => Number(a.effect?.getComputedTiming().endTime) || 0));
+        const cancel = focusWhenActive(el, { wait: beats, fallback: () => el.querySelector('.modal__drawer > h2') });
+        return () => { cancel(); };
+    }, [open]);
     const dismiss = useLatest(onDismiss);
     const has = onDismiss !== undefined;
     useEffect(() => {
@@ -52,7 +62,7 @@ export function Lift({ className, ...rest }) {
  *  with the app's `onClick`; the Drawer does nothing with them. A `Modal` holding ONLY a Drawer (no `Lift`) is the CONFIRM: a question with nothing
  *  to show above it — the Drawer is the whole card and comes in with it in one beat. */
 export function Drawer({ title, caption, light, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('modal__drawer', light && 'modal__drawer--light', className), ...rest, children: [_jsx("h2", { className: "t-h2", children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));
+    return (_jsxs("div", { className: cx('modal__drawer', light && 'modal__drawer--light', className), ...rest, children: [_jsx("h2", { className: "t-h2", tabIndex: -1, children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));
 }
 /** BtnTrio — three round buttons with dotted connectors between them (× · ? · ✓); the middle one inverted. */
 export function BtnTrio({ className, children, ...rest }) {

package/dist/sheets/Sheet.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { useControlled, useLatest, warnOnce, watchSize } from '../state.js';
+import { focusWhenActive, useControlled, useLatest, warnOnce, watchSize } from '../state.js';
 import { cx } from '../cx.js';
+import { word } from '../words.js';
 const ORDER = ['peek', 'half', '3q', 'full']; // low → high; `away` is below them all and outside them
 const RANK = { away: 0, peek: 1, half: 2, '3q': 3, full: 4 };
 const TAP_REM = 0.5; // = --sp-2: a move shorter than this is a tap, not a drag
@@ -91,25 +92,8 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         was.current = current;
         if (!rose)
             return;
-        const el = ref.current;
-        let done = false;
-        const land = () => {
-            if (done || !el)
-                return;
-            done = true;
-            el.removeEventListener('transitionend', onEnd);
-            const at = document.activeElement;
-            if (at && el.contains(at) && at !== handleRef.current && at.matches('input, textarea, select, [contenteditable]'))
-                return;
-            const field = el.querySelector('[data-autofocus]:not([inert] *)')
-                ?? el.querySelector(':scope > .sheet__body :is(input:not([type=checkbox], [type=radio], [type=hidden], [disabled]), textarea, select):not([inert] *)');
-            (field ?? (from === 'away' ? handleRef.current : null))?.focus({ preventScroll: true });
-        };
-        const onEnd = (e) => { if (e.target === el && e.propertyName === 'translate')
-            land(); };
-        el?.addEventListener('transitionend', onEnd);
-        const t = setTimeout(land, 600); // no transition (reduced motion): land anyway
-        return () => { clearTimeout(t); el?.removeEventListener('transitionend', onEnd); if (!done)
+        const cancel = focusWhenActive(ref.current, { scope: ':scope > .sheet__body', fallback: () => (from === 'away' ? handleRef.current : null) });
+        return () => { if (!cancel())
             was.current = from; }; // cut short (StrictMode's trial run, or a new state mid-slide): the rise still counts from where it began
     }, [current]);
     /* geometry, read once per gesture — never stored: how far it has slid, and where each state rests, in px from its top at full */
@@ -242,5 +226,5 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         skipClick.current = true;
         requestAnimationFrame(() => { skipClick.current = false; });
     };
-    return (_jsxs("article", { ref: ref, className: cx('card sheet', `sheet--${shown}`, className), inert: current === 'away' || undefined, onFocus: focus, ...rest, children: [handle !== false && (_jsx("button", { ref: handleRef, className: "sheet__handle", type: "button", "aria-label": typeof handle === 'string' ? handle : 'Resize', onClick: tap, onPointerDown: down, onPointerMove: move, onPointerUp: up, onPointerCancel: up })), children] }));
+    return (_jsxs("article", { ref: ref, className: cx('card sheet', `sheet--${shown}`, className), inert: current === 'away' || undefined, onFocus: focus, ...rest, children: [handle !== false && (_jsx("button", { ref: handleRef, className: "sheet__handle", type: "button", "aria-label": typeof handle === 'string' ? handle : word('resize'), onClick: tap, onPointerDown: down, onPointerMove: move, onPointerUp: up, onPointerCancel: up })), children] }));
 }

package/dist/sheets/SheetStack.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef } from 'react';
-import { useControlled } from '../state.js';
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { focusWhenActive, useControlled } from '../state.js';
 import { cx } from '../cx.js';
 const PHASE = 380; // ms before the before-pack un-tucks on close, so the after-pack is clear first
 /* the stack's sheets, in slot order: its direct children — or, where a host wraps each child in one box of its own, the first .card in
@@ -67,6 +67,13 @@ export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChang
         if (!untuck.current)
             sheets.forEach((c) => c.classList.remove('is-open', 'is-before', 'is-after'));
     });
+    /* a sheet opened → its field has the cursor once it has slid up (the one rule of every part that becomes active: focusWhenActive) */
+    useEffect(() => {
+        if (current == null || mode !== 'tap' || !ref.current)
+            return;
+        const cancel = focusWhenActive(sheetsOf(ref.current)[current], { scope: ':scope > .sheet__body' });
+        return () => { cancel(); };
+    }, [current, mode]);
     const click = (e) => {
         onClick?.(e);
         const stack = ref.current;

package/dist/sheets/SheetSteps.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useControlled, reducedMotion } from '../state.js';
+import { focusWhenActive, useControlled, reducedMotion } from '../state.js';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 import { Link } from '../actions/Link.js';
 import { FormNote } from '../forms/FormNote.js';
 import { CheckContext } from '../forms/check.js';
+import { word } from '../words.js';
 const MOVE_MS = 350; // = --motion-sheet: the accordion's beat
 const GLIDE_MS = 220; // the pile's slide out of the keyboard's way and back: quick, but the eye follows it
 const SWIPE_REM = 3; // an up/down move longer than this (and mostly up/down) is a swipe
@@ -102,15 +103,12 @@ export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible
             else
                 at.blur();
         }
-        const t = setTimeout(() => {
-            const now = ref.current?.querySelector('.sheet-step--now');
-            // the cursor stands by: the step's first field takes the focus (the keyboard comes with it); a step with no field — its
-            // title, so a screen reader hears where it is
-            (now?.querySelector('.sheet-step__inner :is(input:not([type=checkbox], [type=radio], [type=hidden]), textarea)') ?? now?.querySelector('.sheet-step__title'))?.focus({ preventScroll: true });
-            glide.current = performance.now() + 900;
-            settle();
-        }, MOVE_MS);
-        return () => clearTimeout(t);
+        // the cursor stands by: the step's first field takes the focus (the keyboard comes with it); a step with no field — its
+        // title, so a screen reader hears where it is (the one rule of every part that becomes active: focusWhenActive)
+        const cancel = focusWhenActive(ref.current, { wait: MOVE_MS, scope: '.sheet-step--now .sheet-step__inner',
+            fallback: () => ref.current?.querySelector('.sheet-step--now .sheet-step__title'),
+            then: () => { glide.current = performance.now() + 900; settle(); } });
+        return () => { cancel(); };
     }, [current]);
     /* the keyboard comes and goes: the body's scroll JUMPS (the Sheet's reveal, the browser's own, ours below, the box growing back).
        For a short while after a field in the steps gains or loses the focus, every such jump is played as a quick slide (FLIP: the steps
@@ -186,7 +184,7 @@ export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible
             _jsx("div", { className: "sheet-steps__finish", children: isValidElement(finish) ? cloneElement(finish, { disabled: reach < count || finish.props.disabled }) : finish }))] }));
 }
 /** SheetStep — one step of a SheetSteps: its title, then what the member does (a Field, a Pin, a Toggle, the step's own Btn). */
-export function SheetStep({ title, summary, skippable, skipLabel = 'Skip', error, busy, className, children, ...rest }) {
+export function SheetStep({ title, summary, skippable, skipLabel = word('skip'), error, busy, className, children, ...rest }) {
     const ctx = useContext(StepCtx);
     if (!ctx)
         throw new Error('SheetStep goes inside a SheetSteps');

package/dist/sheets/StackBack.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 import { IconBtn } from '../actions/IconBtn.js';
+import { word } from '../words.js';
 /** StackBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's CardHead. Hidden until the sheet is open.
  * A SMALL disc (Lh 2026-09-23): 32px with a chevron — the head keeps its room for the title and the tabs; the 44px tap target stays. */
-export function StackBack({ label = 'Back', end, className, ...rest }) {
+export function StackBack({ label = word('back'), end, className, ...rest }) {
     return _jsx(IconBtn, { sm: true, label: label, className: cx('sheet-stack__back', end && 'sheet-stack__back--end', className), ...rest, children: _jsx(Icon, { name: end ? 'chevron-down' : 'chevron-left' }) });
 }

package/dist/sheets/StackSheet.js

@@ -11,13 +11,14 @@ import { StackBack } from './StackBack.js';
 import { Text } from '../type/Text.js';
 import { Icon } from '../type/Icon.js';
 import { Badge } from '../numbers/Badge.js';
+import { word } from '../words.js';
 /**
  * StackSheet — ONE sheet of a `SheetStack`, in the one sheet shape: SHEET HEAD (back · title · tabs or an icon) pinned at the top ·
  * SHEET BODY (the children; scrolls) · SHEET FOOT (`foot`, the CTA) at the bottom. Its tabs are icon buttons, the chosen one filled;
  * a count shows as a small circle over its icon. The body is the app's: render the page of the chosen tab (and nothing while the sheet
  * is closed — see `Home`). A direct child of `SheetStack`.
  */
-export function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel = 'Back', backAt = 'none', className, children, ...rest }) {
+export function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel = word('back'), backAt = 'none', className, children, ...rest }) {
     const [tab, pick] = useControlled(tabProp, defaultTab ?? tabs?.[0]?.id, onTabChange);
     // a title longer than its room does not wrap: it runs sideways, like a song title in a short slot — the room it overflows by
     // is measured here (the tabs may grow with the text size) and handed to the CSS as --_over

package/dist/state.d.ts

@@ -21,4 +21,14 @@ export declare function watchSize(targets: Array<Element | null | undefined>, fn
 export declare const warnOnce: (key: string, text: string) => void;
 /** the member asked for less motion (false where there is no window, e.g. a server render) */
 export declare const reducedMotion: () => boolean;
+/** give `box` the cursor once it has settled: after its own `translate` transition (600ms at most), or after `wait` ms. It lands on the field
+ *  marked `data-autofocus`, else the first field inside `scope` (a selector under `box`; default: all of it), else `fallback`. A field in
+ *  `box` that already has the cursor keeps it. Nothing moves the page (`preventScroll`). Returns the cancel — `true` when it had already
+ *  landed (so a component can tell a move cut short from a finished one). */
+export declare function focusWhenActive(box: HTMLElement | null | undefined, { scope, fallback, wait, then }?: {
+    scope?: string;
+    fallback?: () => HTMLElement | null | undefined;
+    wait?: 'translate' | number;
+    then?: () => void;
+}): () => boolean;
 export {};

package/dist/state.js

@@ -55,3 +55,36 @@ export const warnOnce = (key, text) => { if (!warned.has(key)) {
 } };
 /** the member asked for less motion (false where there is no window, e.g. a server render) */
 export const reducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+/* THE RULE (Lh 2026-09-29): a part of the screen that has just become ACTIVE — a sheet come up, a step opened, a stack sheet opened, a
+   modal asking — has its field waiting with the cursor. ONE mechanic for every such part; the component only says WHEN it became active. */
+const FIELD = 'input:not([type=checkbox], [type=radio], [type=hidden], [disabled], [tabindex="-1"]), textarea:not([disabled]), select:not([disabled]), [contenteditable="true"]';
+/** give `box` the cursor once it has settled: after its own `translate` transition (600ms at most), or after `wait` ms. It lands on the field
+ *  marked `data-autofocus`, else the first field inside `scope` (a selector under `box`; default: all of it), else `fallback`. A field in
+ *  `box` that already has the cursor keeps it. Nothing moves the page (`preventScroll`). Returns the cancel — `true` when it had already
+ *  landed (so a component can tell a move cut short from a finished one). */
+export function focusWhenActive(box, { scope, fallback, wait = 'translate', then } = {}) {
+    if (!box)
+        return () => false;
+    let done = false;
+    const land = () => {
+        if (done)
+            return;
+        done = true;
+        stop();
+        const at = document.activeElement;
+        if (!(at instanceof HTMLElement && box.contains(at) && at.matches(FIELD))) {
+            const root = scope ? box.querySelector(scope) : box;
+            const target = box.querySelector('[data-autofocus]:not([inert] *)')
+                ?? root?.querySelector(`:is(${FIELD}):not([inert] *)`) ?? fallback?.();
+            target?.focus({ preventScroll: true });
+        }
+        then?.();
+    };
+    const onEnd = (e) => { if (e.target === box && e.propertyName === 'translate')
+        land(); };
+    const t = setTimeout(land, wait === 'translate' ? 600 : wait); // no transition (reduced motion) or none came: land anyway
+    if (wait === 'translate')
+        box.addEventListener('transitionend', onEnd);
+    function stop() { clearTimeout(t); box.removeEventListener('transitionend', onEnd); }
+    return () => { const was = done; done = true; stop(); return was; };
+}

package/dist/templates/CallSheet.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentProps, type ReactNode } from 'react';
 import { Screen } from '../scaffold/Screen.js';
+import { type SheetProps } from '../sheets/Sheet.js';
 export interface CallSheetSheet {
     /** the sheet head's title */
     title: ReactNode;
@@ -9,6 +10,8 @@ export interface CallSheetSheet {
     foot?: ReactNode;
     /** a small link UNDER that button (a `Link sm`, e.g. details for developers) */
     footLink?: ReactNode;
+    /** this sheet's handle — its accessible name (a string), or `false` for none; overrides the CallSheet's `handle` */
+    handle?: SheetProps['handle'];
 }
 /** one way in: its button and the sheet it calls */
 export interface CallSheetWay {
@@ -36,6 +39,8 @@ export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'chi
     onOpenChange?: (open: boolean, way: number | null) => void;
     /** the sheets' resting states once up (default "peek full") */
     states?: string;
+    /** every sheet's handle: its accessible name in the app's language (a string — default "Resize"), or `false` for none. A sheet's own `handle` wins */
+    handle?: SheetProps['handle'];
     /** layers over the screen */
     children?: ReactNode;
 }
@@ -45,4 +50,4 @@ export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'chi
  * starts at the screen's lead (15%). The sheets wait `away`; a button brings its own up full; the handle takes it down to peek.
  * One sheet up at a time — a sheet holds that way's WHOLE form.
  */
-export declare function CallSheet({ media, heading, body, action, sheet, ways, open: openProp, defaultOpen, onOpenChange, states, children, ...rest }: CallSheetProps): import("react").JSX.Element;
+export declare function CallSheet({ media, heading, body, action, sheet, ways, open: openProp, defaultOpen, onOpenChange, states, handle, children, ...rest }: CallSheetProps): import("react").JSX.Element;

package/dist/templates/CallSheet.js

@@ -17,12 +17,12 @@ const index = (o) => (o === true ? 0 : typeof o === 'number' ? o : null);
  * starts at the screen's lead (15%). The sheets wait `away`; a button brings its own up full; the handle takes it down to peek.
  * One sheet up at a time — a sheet holds that way's WHOLE form.
  */
-export function CallSheet({ media, heading, body, action, sheet, ways, open: openProp, defaultOpen = null, onOpenChange, states = 'peek full', children, ...rest }) {
+export function CallSheet({ media, heading, body, action, sheet, ways, open: openProp, defaultOpen = null, onOpenChange, states = 'peek full', handle, children, ...rest }) {
     const list = ways ?? (sheet ? [{ action, sheet }] : []);
     const [on, set] = useControlled(openProp === undefined ? undefined : index(openProp), index(defaultOpen), onOpenChange && ((next) => onOpenChange(next !== null, next)));
     const [at, setAt] = useState('full');
     return (_jsxs(Screen, { fill: true, ...rest, children: [_jsxs(Step, { children: [_jsxs(Page, { children: [media, _jsx(CardHead, { level: "h1", heading: heading }), typeof body === 'string' ? _jsx(Text, { level: "body", children: body }) : body, _jsx(CtaPack, { children: list.map((w, i) => (_jsx(Btn, { primary: i === 0, quiet: i > 0, "aria-expanded": on === i, onClick: () => { setAt('full'); set(i); }, children: w.action }, i))) })] }), list.map(({ sheet: sh }, i) => (_jsxs(Sheet, { state: on === i ? at : 'away', onStateChange: (s) => { if (s === 'away')
                             set(null);
                         else
-                            setAt(s); }, states: states, children: [_jsx(CardHead, { heading: sh.title }), _jsx(SheetBody, { children: on === i ? (typeof sh.body === 'function' ? sh.body() : sh.body) : null }), (sh.foot != null || sh.footLink != null) && _jsx(CardFoot, { link: sh.footLink, children: sh.foot })] }, i)))] }), children] }));
+                            setAt(s); }, states: states, handle: sh.handle ?? handle, children: [_jsx(CardHead, { heading: sh.title }), _jsx(SheetBody, { children: on === i ? (typeof sh.body === 'function' ? sh.body() : sh.body) : null }), (sh.foot != null || sh.footLink != null) && _jsx(CardFoot, { link: sh.footLink, children: sh.foot })] }, i)))] }), children] }));
 }

package/dist/templates/Home.js

@@ -5,6 +5,7 @@ import { Screen } from '../scaffold/Screen.js';
 import { SheetStack } from '../sheets/SheetStack.js';
 import { StackSheet } from '../sheets/StackSheet.js';
 import { Text } from '../type/Text.js';
+import { word } from '../words.js';
 const TONES = [2, 3, 1, 2, 3];
 const LEAVE = 800; // ms: a closing sheet keeps its body until it has slid home
 /**
@@ -14,7 +15,7 @@ const LEAVE = 800; // ms: a closing sheet keeps its body until it has slid home
  * at the bottom). A tap on a head brings that sheet up to fill everything under the top. Only the open sheet's body is rendered — three
  * sections on one home never cost three pages (`keep` holds a body once opened).
  */
-export function Home({ top, title, sheets, open: openProp, defaultOpen = null, onOpenChange, base, keep, backLabel = 'Back', backAt, children, ...rest }) {
+export function Home({ top, title, sheets, open: openProp, defaultOpen = null, onOpenChange, base, keep, backLabel = word('back'), backAt, children, ...rest }) {
     const [open, change] = useControlled(openProp, defaultOpen, onOpenChange);
     const [leaving, setLeaving] = useState(null);
     const [seen, setSeen] = useState(() => new Set(open != null ? [open] : []));

package/dist/templates/Walkthrough.js

@@ -10,13 +10,14 @@ import { ActionBar, ActionBarTier } from '../scaffold/ActionBar.js';
 import { CardHead } from '../cards/CardHead.js';
 import { Text } from '../type/Text.js';
 import { IconBtn } from '../actions/IconBtn.js';
+import { word } from '../words.js';
 /**
  * Walkthrough — TEMPLATE, a `Screen` with its three parts filled — no top · content: `Pages` (down to the screen's foot; each Page padded by the lead above and below, the whole run scrolls) · bottom: a LAYER over it — the dots, then the `ActionBar` rows.
  * A walk of pages that tell (onboarding, an introduction). Each page = a picture, a heading,
  * the words; the dots at the foot; one row of calls to action at the bottom. No top bar. Fixed: the order, the picture
  * first and fixed while the words scroll, one CTA row. Yours: the pages, the row, the state.
  */
-export function Walkthrough({ pages, at: atProp, defaultAt = 0, onAtChange, cta, controls = [], ctaLink, children, backLabel = 'Back', nextLabel = 'Next', ...rest }) {
+export function Walkthrough({ pages, at: atProp, defaultAt = 0, onAtChange, cta, controls = [], ctaLink, children, backLabel = word('back'), nextLabel = word('next'), ...rest }) {
     const [at, turn] = useControlled(atProp, defaultAt, onAtChange);
     const step = useRef(null);
     // a new page starts where a page starts — at its lead, not where the last one was scrolled to (Lh 2026-09-23). A LAYOUT effect:

package/dist/words.d.ts

@@ -0,0 +1,7 @@
+export type WordKey = 'resize' | 'back' | 'next' | 'previous' | 'skip' | 'digit' | 'progress' | 'image' | 'mood' | 'photos' | 'voiceNote';
+type Words = Record<WordKey, string>;
+/** add or retune the words for a language (`'lo'`, or `'th'` to change one) — once, at app start. Missing words fall back to English. */
+export declare function setWords(lang: string, words: Partial<Words>): void;
+/** the word for `key` in the page's language (`<html lang>`: "th", "th-TH" → th); English where the page names none cardds knows */
+export declare function word(key: WordKey): string;
+export {};

package/dist/words.js

@@ -0,0 +1,14 @@
+const sets = {
+    en: { resize: 'Resize', back: 'Back', next: 'Next', previous: 'Previous', skip: 'Skip', digit: 'Digit', progress: 'Progress', image: 'Image', mood: 'Mood', photos: 'Photos', voiceNote: 'Voice note' },
+    th: { resize: 'ปรับความสูง', back: 'กลับ', next: 'ถัดไป', previous: 'ก่อนหน้า', skip: 'ข้าม', digit: 'หลักที่', progress: 'ความคืบหน้า', image: 'รูปภาพ', mood: 'อารมณ์', photos: 'รูปภาพ', voiceNote: 'ข้อความเสียง' },
+};
+/** add or retune the words for a language (`'lo'`, or `'th'` to change one) — once, at app start. Missing words fall back to English. */
+export function setWords(lang, words) {
+    const key = lang.toLowerCase();
+    sets[key] = { ...sets.en, ...sets[key], ...words };
+}
+/** the word for `key` in the page's language (`<html lang>`: "th", "th-TH" → th); English where the page names none cardds knows */
+export function word(key) {
+    const lang = typeof document === 'undefined' ? '' : document.documentElement.lang.toLowerCase();
+    return (sets[lang] ?? sets[lang.split('-')[0]] ?? sets.en)[key];
+}

package/package.json

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