@usableapp/cardds 0.7.31 → 0.7.33

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 > 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.33 — 2026-10-01
+
+### Changed
+- **A StackSheet tab's count grows with the text** (Lh 2026-10-01): the red circle was a fixed 20px while its number followed `--fs-base` — at a large text size the number ran over it. The circle is now cut from its own number's size (20px at the default, 32px at 160%); a long count ("10", "99+") makes it a capsule. The number sits on the circle's middle (it sat low), and the circle stands 8px out of the tab's corner instead of 4 — beside the icon, not on the disc's edge. Nothing to change in a screen.
+- **A screen fills the phone, edge to edge** (Lh 2026-10-01): the column's cap `--screen-w` is `30rem` (480px), was `25rem` (400) — a phone 412–448px wide showed a strip of bare ground each side of the screen, its bars and its sheets. No phone reaches the cap now; it only keeps a tablet / desktop window to a phone-sized column. Nothing to change in a screen; a project that set `--screen-w` itself keeps its value.
+### Added
+- Knobs `--stack-sheet-count-pad-x` (the room beside the number), `--stack-sheet-count-lift` (the room under it — retune for another font), `--stack-sheet-count-out` (how far it stands out of the corner). `--stack-sheet-count-h` as before; its default is `1.175em`, was `1.25rem`.
+
+## 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

package/README.md

@@ -306,6 +306,9 @@ whose markup has rules, because the sheet's box is the step itself:
   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
 
@@ -647,7 +650,7 @@ Every length token resolves to rem — a multiplier × one of four rem bases
 (`--sp-4` = `--sp-base` × 4 = 1rem, `--tap` = `--tap-base` = 3rem, `--r-card` =
 `--r-base` × 2, `--fs-h1` = `--fs-base` × 1.2; see "A project's theme") — so the
 whole system scales with the root font size. `base.css` keeps it at `100%` (the browser's setting, 16px by
-default) and steps narrow phones (≤360px) to `93.75%`, which keeps the 25rem
+default) and steps narrow phones (≤360px) to `93.75%`, which keeps the
 column, its 48px taps and its type in proportion on 320–360 screens. Only
 `--border-w`, `--rule-w` and the focus ring stay in px, so edges stay crisp.
 An app with its own text-size setting calls `setTextScale(percent)`, which writes

package/css/stack.css

@@ -292,11 +292,14 @@
 .stack-sheet__tab { position: relative; }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;
-  top: calc(-1 * var(--sp-1));
-  right: calc(-1 * var(--sp-1));
-  min-width: var(--stack-sheet-count-h, 1.25rem);
-  height: var(--stack-sheet-count-h, 1.25rem);
-  padding: 0 var(--sp-1);
+  top: calc(-1 * var(--stack-sheet-count-out, var(--sp-2))); /* how far it stands OUT of the tab's corner, up and to the right: at sp-1 it
+     sat exactly on the chosen tab's disc edge — it reads as a mark beside the icon, not part of the disc (Lh 2026-10-01) */
+  right: calc(-1 * var(--stack-sheet-count-out, var(--sp-2)));
+  min-width: var(--stack-sheet-count-h, 1.175em); /* em, not rem (Lh 2026-10-01): the circle is cut from ITS OWN number's size — at a
+     large text size the number grew and a 20px circle did not; 1.175em of a 17px caption = the 20px it always was */
+  height: var(--stack-sheet-count-h, 1.175em);
+  padding: 0 var(--stack-sheet-count-pad-x, 0.25em) var(--stack-sheet-count-lift, 0.1em); /* "99+" keeps its room at every text size;
+     the room UNDER the number lifts it onto the circle's middle: a digit has no descender, so a centred line box sets it low (Lh 2026-10-01) */
   font: var(--type-caption);
   line-height: 1;
   pointer-events: none;

package/css/tokens.css

@@ -12,7 +12,9 @@
 
 :root {
   /* ---- layout ---- */
-  --screen-w: 25rem;      /* 400: mobile column — .screen, .action-bar, .sheet-stage */
+  --screen-w: 30rem;      /* 480: the column's CAP — .screen, .action-bar, .sheet-stage. A phone never reaches it (the widest are ~450 CSS px):
+                             on a phone the screen is the device, edge to edge; the cap only keeps a tablet / desktop window to a phone-sized
+                             column. Was 25rem: a 412px phone showed a strip each side (Lh 2026-10-01) */
   --screen-centre: 40%;   /* the human centre of a screen: the middle of its top four fifths — the bottom fifth is the thumb's (Lh, 2026-09-10). .card--centre sits here */
 
   /* ---- the four bases: what a project retunes (Lh, 2026-09-20) ----

package/dist/cardds.css

@@ -53,7 +53,9 @@
 
 :root {
   /* ---- layout ---- */
-  --screen-w: 25rem;      /* 400: mobile column — .screen, .action-bar, .sheet-stage */
+  --screen-w: 30rem;      /* 480: the column's CAP — .screen, .action-bar, .sheet-stage. A phone never reaches it (the widest are ~450 CSS px):
+                             on a phone the screen is the device, edge to edge; the cap only keeps a tablet / desktop window to a phone-sized
+                             column. Was 25rem: a 412px phone showed a strip each side (Lh 2026-10-01) */
   --screen-centre: 40%;   /* the human centre of a screen: the middle of its top four fifths — the bottom fifth is the thumb's (Lh, 2026-09-10). .card--centre sits here */
 
   /* ---- the four bases: what a project retunes (Lh, 2026-09-20) ----
@@ -1249,11 +1251,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .stack-sheet__tab { position: relative; }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;
-  top: calc(-1 * var(--sp-1));
-  right: calc(-1 * var(--sp-1));
-  min-width: var(--stack-sheet-count-h, 1.25rem);
-  height: var(--stack-sheet-count-h, 1.25rem);
-  padding: 0 var(--sp-1);
+  top: calc(-1 * var(--stack-sheet-count-out, var(--sp-2))); /* how far it stands OUT of the tab's corner, up and to the right: at sp-1 it
+     sat exactly on the chosen tab's disc edge — it reads as a mark beside the icon, not part of the disc (Lh 2026-10-01) */
+  right: calc(-1 * var(--stack-sheet-count-out, var(--sp-2)));
+  min-width: var(--stack-sheet-count-h, 1.175em); /* em, not rem (Lh 2026-10-01): the circle is cut from ITS OWN number's size — at a
+     large text size the number grew and a 20px circle did not; 1.175em of a 17px caption = the 20px it always was */
+  height: var(--stack-sheet-count-h, 1.175em);
+  padding: 0 var(--stack-sheet-count-pad-x, 0.25em) var(--stack-sheet-count-lift, 0.1em); /* "99+" keeps its room at every text size;
+     the room UNDER the number lifts it onto the circle's middle: a digit has no descender, so a centred line box sets it low (Lh 2026-10-01) */
   font: var(--type-caption);
   line-height: 1;
   pointer-events: none;

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/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/Sheet.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 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
@@ -225,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/SheetSteps.js

@@ -6,6 +6,7 @@ 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
@@ -183,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/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.31",
+  "version": "0.7.33",
   "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.",