@usableapp/cardds 0.7.8 → 0.7.10

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 > 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.10 — 2026-09-25
+
+### Fixed
+- A fill screen's bottom layer (a Walkthrough's dots · controls · CTA) has room above its first row: `padding-top`
+  `--sp-3` (knob `--action-bar-fill-pad-top`; was 0 — the dots touched the words scrolling under the layer).
+
+## 0.7.9 — 2026-09-25
+
+### Changed
+- A `Screen` reads like a native app: words are no longer highlighted by a long press or a drag, no Copy / Web search
+  callout. Fields (input, textarea, contenteditable) stay selectable. The open sheet of a stack is not selectable any more
+  either (it was). `Text selectable` opens the few words a member may copy (a code, an address). Knob `--screen-select: text`
+  = the old way everywhere. Story `Text · Selectable`.
+
+### Added
+- `slideScreen(update, 'next' | 'back')` + `installScreenSlide()` — one screen to the next slides WHOLE (top · content ·
+  bottom), the way a walk's pages do; the default for every route change (Lh 2026-09-25). Before: a route change just
+  swapped the screen. Wrap every navigate in `slideScreen`; call `installScreenSlide()` once at start for the back button.
+  `data-slide="off"` on a Screen opts it out. Story `Step · WalksOn`.
+- `Pin secret` — a PIN: a dot per typed digit (`-webkit-text-security`), the number pad kept, no SMS autofill. An OTP stays
+  in sight (no `secret`). Story `Pin · Secret`; the PIN steps of the SheetSteps stories use it.
+
 ## 0.7.8 — 2026-09-25
 
 ### Changed

package/README.md

@@ -322,6 +322,8 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 - **Page that moves** (Lh 2026-09-20) — two ways, never both on one screen:
   - *Pages of words:* `.step > .pages > .page` (one `aria-current="step"`, the rest `inert`) — every page
     one height, the round pager turns them (`slideTo()`), the words slide like a page. No sheet there.
+    ONE SCREEN TO THE NEXT (a route change) slides the WHOLE screen the same way: `slideScreen(() => navigate(to), 'next' | 'back')`,
+    and `installScreenSlide()` once at app start for the back button (story `Step · WalksOn`). `data-slide="off"` on a Screen = no slide.
   - *Sheets the app calls:* the base offers WAYS IN — sign in · new phone · join — as buttons (`.cta-pack`); each
     way has a sheet that holds its WHOLE form and its own submit on its foot, starting `.sheet--away` (not on the
     screen: slid out, hidden once gone, `inert`). **The wiring is the app's, not cardds's**: a `useState` of which

package/css/base.css

@@ -107,6 +107,11 @@ button { font: inherit; cursor: pointer; }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.
    The 1px is the one the platform needs to keep it in the accessibility tree, not a length of the design. */
+/* a screen reads like a native app (Lh 2026-09-25): words are not highlighted by a long press or a drag, no copy / web-search
+   callout — only what is typed into, and words marked selectable (`Text selectable` → .t-select: a code, an address).
+   Knob --screen-select: `text` = the web page's old way everywhere. */
+.screen { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); -webkit-touch-callout: none; }
+.screen :is(input, textarea, [contenteditable="true"]), .screen .t-select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
 .t-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 
 /* ---- base content: words straight on the base, no card around them — an

package/css/card.css

@@ -240,7 +240,8 @@
      <section class="page" inert>…</section>
    </div></section> <div class="action-bar action-bar--pager">← →</div> */
 ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
-::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) {
+::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
+::view-transition-old(screen-out), ::view-transition-new(screen-in) { /* screen-*: slideScreen — one whole screen to the next (Lh 2026-09-25) */
   animation-duration: var(--motion-slide);
   animation-timing-function: ease-out;
   mix-blend-mode: normal;
@@ -249,12 +250,17 @@
 :root[data-slide="next"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-right; }
 :root[data-slide="back"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-right; }
 :root[data-slide="back"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-left; }
+:root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
+:root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(screen-in) { animation-name: centre-card-in-left; }
 @keyframes centre-card-out-left  { to   { translate: -100% 0; opacity: 0; } }
 @keyframes centre-card-out-right { to   { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-right  { from { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-left   { from { translate: -100% 0; opacity: 0; } }
 @media (prefers-reduced-motion: reduce) {
-  ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) { animation: none; }
+  ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
+  ::view-transition-old(screen-out), ::view-transition-new(screen-in) { animation: none; }
 }
 /* the page dots under the card sit centred under it — the indicator belongs
    with the page that changes, never in the bar (Lh, 2026-09-12) */

package/css/choice.css

@@ -210,6 +210,7 @@
    edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
    is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
 .pin__cell { caret-color: transparent; }
+.pin--secret .pin__cell { -webkit-text-security: disc; text-security: disc; } /* a PIN: a dot per digit, the number pad kept (Lh 2026-09-25) */
 .pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
 .pin__cell:focus:placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);

package/css/stack.css

@@ -328,4 +328,4 @@
 /* a stacked sheet is a control until it is open — tapped, never read into: no text selection (a drag, a double tap, a long press),
    no grey flash, no iOS callout; its head stays one when open. Only the OPEN sheet's body is text to select (Lh 2026-09-23) */
 .sheet-stack--tap > .card, .sheet-stack > .card > .card__head { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
-.sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
+.sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); } /* the open sheet reads as the rest of the screen: not selectable (Lh 2026-09-25; it was text) */

package/css/step.css

@@ -120,7 +120,9 @@
   position: absolute; inset-inline: 0; top: auto; bottom: var(--kb, 0rem);
   max-width: none;
   margin: 0;
-  padding-top: 0;
+  /* room between its top edge and its first row (the walk's dots): since it has a ground, a 0 here put the dots against the words
+     running under it (Lh 2026-09-25) — the bar's own top padding */
+  padding-top: var(--action-bar-fill-pad-top, var(--sp-3));
   /* its GROUND (Lh 2026-09-24, timebank card 141 — was "no ground of its own"): words that run under the layer mid-scroll
      showed through the dots, the controls and the buttons. The layer lies on the screen's own surface now; a project sets
      another (or `transparent`, the old see-through) with the knob */

package/dist/cardds.css

@@ -488,6 +488,11 @@ button { font: inherit; cursor: pointer; }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.
    The 1px is the one the platform needs to keep it in the accessibility tree, not a length of the design. */
+/* a screen reads like a native app (Lh 2026-09-25): words are not highlighted by a long press or a drag, no copy / web-search
+   callout — only what is typed into, and words marked selectable (`Text selectable` → .t-select: a code, an address).
+   Knob --screen-select: `text` = the web page's old way everywhere. */
+.screen { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); -webkit-touch-callout: none; }
+.screen :is(input, textarea, [contenteditable="true"]), .screen .t-select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
 .t-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 
 /* ---- base content: words straight on the base, no card around them — an
@@ -773,7 +778,8 @@ button { font: inherit; cursor: pointer; }
      <section class="page" inert>…</section>
    </div></section> <div class="action-bar action-bar--pager">← →</div> */
 ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
-::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) {
+::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
+::view-transition-old(screen-out), ::view-transition-new(screen-in) { /* screen-*: slideScreen — one whole screen to the next (Lh 2026-09-25) */
   animation-duration: var(--motion-slide);
   animation-timing-function: ease-out;
   mix-blend-mode: normal;
@@ -782,12 +788,17 @@ button { font: inherit; cursor: pointer; }
 :root[data-slide="next"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-right; }
 :root[data-slide="back"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-right; }
 :root[data-slide="back"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-left; }
+:root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
+:root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(screen-in) { animation-name: centre-card-in-left; }
 @keyframes centre-card-out-left  { to   { translate: -100% 0; opacity: 0; } }
 @keyframes centre-card-out-right { to   { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-right  { from { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-left   { from { translate: -100% 0; opacity: 0; } }
 @media (prefers-reduced-motion: reduce) {
-  ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) { animation: none; }
+  ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
+  ::view-transition-old(screen-out), ::view-transition-new(screen-in) { animation: none; }
 }
 /* the page dots under the card sit centred under it — the indicator belongs
    with the page that changes, never in the bar (Lh, 2026-09-12) */
@@ -1172,7 +1183,7 @@ button { font: inherit; cursor: pointer; }
 /* a stacked sheet is a control until it is open — tapped, never read into: no text selection (a drag, a double tap, a long press),
    no grey flash, no iOS callout; its head stays one when open. Only the OPEN sheet's body is text to select (Lh 2026-09-23) */
 .sheet-stack--tap > .card, .sheet-stack > .card > .card__head { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
-.sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
+.sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); } /* the open sheet reads as the rest of the screen: not selectable (Lh 2026-09-25; it was text) */
 
 /* ---- css/sheet.css — sheet single: .sheet — one card as a bottom sheet, peek / half / full ---- */
 /* ============================================================
@@ -1712,7 +1723,9 @@ button { font: inherit; cursor: pointer; }
   position: absolute; inset-inline: 0; top: auto; bottom: var(--kb, 0rem);
   max-width: none;
   margin: 0;
-  padding-top: 0;
+  /* room between its top edge and its first row (the walk's dots): since it has a ground, a 0 here put the dots against the words
+     running under it (Lh 2026-09-25) — the bar's own top padding */
+  padding-top: var(--action-bar-fill-pad-top, var(--sp-3));
   /* its GROUND (Lh 2026-09-24, timebank card 141 — was "no ground of its own"): words that run under the layer mid-scroll
      showed through the dots, the controls and the buttons. The layer lies on the screen's own surface now; a project sets
      another (or `transparent`, the old see-through) with the knob */
@@ -2809,6 +2822,7 @@ button { font: inherit; cursor: pointer; }
    edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
    is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
 .pin__cell { caret-color: transparent; }
+.pin--secret .pin__cell { -webkit-text-security: disc; text-security: disc; } /* a PIN: a dot per digit, the number pad kept (Lh 2026-09-25) */
 .pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
 .pin__cell:focus:placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);

package/dist/forms/Pin.d.ts

@@ -22,6 +22,9 @@ export interface PinProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defa
     match?: string;
     /** the words when a check fails: the code does not match, or the step's button was pressed with cells still empty */
     formatError?: ReactNode;
+    /** a SECRET code (a PIN, not an OTP): each typed digit shows as a dot — `-webkit-text-security`, so the keyboard stays the
+     *  number pad (a password field brings a full keyboard on some phones); no SMS autofill, no password manager (Lh 2026-09-25) */
+    secret?: boolean;
     /** focus the first empty cell on mount */
     autoFocus?: boolean;
 }
@@ -31,4 +34,4 @@ export interface PinProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defa
  * 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 declare function Pin({ length, value, defaultValue, label, onChange, autoFocus, error, match, formatError, className, onAnimationEnd, ...rest }: PinProps): import("react").JSX.Element;
+export declare function Pin({ length, value, defaultValue, label, onChange, autoFocus, error, match, formatError, secret, className, onAnimationEnd, ...rest }: PinProps): import("react").JSX.Element;

package/dist/forms/Pin.js

@@ -9,7 +9,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, className, onAnimationEnd, ...rest }) {
+export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onChange, autoFocus, error, match, formatError, secret, className, onAnimationEnd, ...rest }) {
     const ref = useRef(null);
     const [inner, setInner] = useState(defaultValue);
     const code = (value ?? inner).replace(/\D/g, '').slice(0, length);
@@ -146,10 +146,10 @@ export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onC
             cell(i + 1)?.focus();
         }
     };
-    return (_jsx("div", { ref: ref, className: cx('pin', wrong && 'pin--error', shake && 'pin--shake', className), ...rest, onAnimationEnd: (e) => { if (e.animationName === 'pin-shake')
+    return (_jsx("div", { ref: ref, className: cx('pin', secret && 'pin--secret', wrong && 'pin--error', shake && 'pin--shake', className), ...rest, onAnimationEnd: (e) => { if (e.animationName === 'pin-shake')
             setShake(false); onAnimationEnd?.(e); }, children: Array.from({ length }, (_, i) => (
         // no maxLength: the browser would cut a pasted code before this ever saw it. A cell holds one digit — typing into a full one
         // replaces it, so its digit is selected whenever the cell takes the focus
-        _jsx("input", { className: "pin__cell", inputMode: "numeric", pattern: "[0-9]*", placeholder: " ", value: code[i] ?? '', "aria-label": `${label} ${i + 1}`, "aria-invalid": wrong || undefined, autoComplete: i === 0 ? 'one-time-code' : 'off', onChange: input(i), onPaste: paste, onKeyDown: key(i), onFocus: (e) => { if (!restart.current)
+        _jsx("input", { className: "pin__cell", inputMode: "numeric", pattern: "[0-9]*", placeholder: " ", value: code[i] ?? '', "aria-label": `${label} ${i + 1}`, "aria-invalid": wrong || undefined, autoComplete: i === 0 && !secret ? 'one-time-code' : 'off', onChange: input(i), onPaste: paste, onKeyDown: key(i), onFocus: (e) => { if (!restart.current)
                 e.currentTarget.select(); } }, i))) }));
 }

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './scaffold/FilterRow.js';
 export * from './scaffold/Page.js';
 export * from './scaffold/EmptyState.js';
 export * from './scaffold/Centre.js';
+export * from './scaffold/slideScreen.js';
 export * from './cards/Card.js';
 export * from './cards/CardHead.js';
 export * from './cards/CardFoot.js';

package/dist/index.js

@@ -18,6 +18,7 @@ export * from './scaffold/FilterRow.js';
 export * from './scaffold/Page.js';
 export * from './scaffold/EmptyState.js';
 export * from './scaffold/Centre.js';
+export * from './scaffold/slideScreen.js';
 export * from './cards/Card.js';
 export * from './cards/CardHead.js';
 export * from './cards/CardFoot.js';

package/dist/scaffold/slideScreen.d.ts

@@ -0,0 +1,15 @@
+import type { SlideDirection } from './Centre.js';
+/**
+ * slideScreen — go to the NEXT SCREEN (a route change) with the whole screen sliding, as a walk's pages do. Wrap the app's
+ * navigate in it: `slideScreen(() => navigate('/download'))` — `back` for a way back: `slideScreen(() => navigate(-1), 'back')`.
+ * The update may render at once or later (a route's chunk loading): the slide waits for the new Screen (at most 0.8 s).
+ * A Screen with `data-slide="off"` (or none at all) is not slid. `scope`: where the one Screen is (default the document — an
+ * app has one). Without view transitions (the browser floor) it just runs the update.
+ */
+export declare function slideScreen(update: () => unknown, direction?: SlideDirection, scope?: ParentNode): void;
+/**
+ * installScreenSlide — call ONCE when the app starts: the phone's / browser's BACK (and forward) buttons slide the screen too,
+ * the way `back` (and `next`) does. It listens to `popstate` before the router renders; the direction is read from the history
+ * entry's index (`history.state.idx`, which React Router keeps; without it: back). Returns the uninstall.
+ */
+export declare function installScreenSlide(): () => void;

package/dist/scaffold/slideScreen.js

@@ -0,0 +1,65 @@
+/* ONE SCREEN TO THE NEXT (Lh 2026-09-25): the whole screen slides — top, content, bottom — the way a walk's pages do (`next`: the
+   old one out to the left, the new one in from the right; `back`: the reverse; `--motion-slide`, card.css). It is a view
+   transition named for the move only: the leaving `.screen` is `screen-out`, the arriving one `screen-in`. */
+const screenIn = (scope) => scope.querySelector('.screen:not(.screen .screen)');
+/** wait until the screen in `scope` CHANGED — another element, or new content in the same one (React may keep the element when
+    both routes render a Screen in the same place) — a route rendered, sync or not; at most `ms` */
+function newScreen(scope, old, ms = 800) {
+    return new Promise((done) => {
+        const now = screenIn(scope);
+        if (now !== old)
+            return done(now);
+        const root = scope instanceof Document ? scope.documentElement : scope;
+        const mo = new MutationObserver(() => { mo.disconnect(); clearTimeout(t); done(screenIn(scope)); });
+        mo.observe(root, { childList: true, subtree: true });
+        const t = setTimeout(() => { mo.disconnect(); done(screenIn(scope)); }, ms);
+    });
+}
+let running = false;
+/**
+ * slideScreen — go to the NEXT SCREEN (a route change) with the whole screen sliding, as a walk's pages do. Wrap the app's
+ * navigate in it: `slideScreen(() => navigate('/download'))` — `back` for a way back: `slideScreen(() => navigate(-1), 'back')`.
+ * The update may render at once or later (a route's chunk loading): the slide waits for the new Screen (at most 0.8 s).
+ * A Screen with `data-slide="off"` (or none at all) is not slid. `scope`: where the one Screen is (default the document — an
+ * app has one). Without view transitions (the browser floor) it just runs the update.
+ */
+export function slideScreen(update, direction = 'next', scope = document) {
+    const root = document.documentElement;
+    const before = screenIn(scope);
+    if (typeof document.startViewTransition !== 'function' || running || !before || before.dataset.slide === 'off') {
+        update();
+        return;
+    }
+    running = true;
+    before.style.viewTransitionName = 'screen-out';
+    root.dataset.slide = direction;
+    let after = null;
+    const t = document.startViewTransition(async () => {
+        await update();
+        after = await newScreen(scope, before);
+        before.style.viewTransitionName = '';
+        if (after && after.dataset.slide !== 'off')
+            after.style.viewTransitionName = 'screen-in'; // the same element too: out, then in
+    });
+    void t.finished.finally(() => { running = false; delete root.dataset.slide; if (after)
+        after.style.viewTransitionName = ''; });
+}
+/**
+ * installScreenSlide — call ONCE when the app starts: the phone's / browser's BACK (and forward) buttons slide the screen too,
+ * the way `back` (and `next`) does. It listens to `popstate` before the router renders; the direction is read from the history
+ * entry's index (`history.state.idx`, which React Router keeps; without it: back). Returns the uninstall.
+ */
+export function installScreenSlide() {
+    let idx = history.state?.idx;
+    const push = history.pushState.bind(history), replace = history.replaceState.bind(history);
+    history.pushState = (...a) => { push(...a); idx = history.state?.idx; };
+    history.replaceState = (...a) => { replace(...a); idx = history.state?.idx; };
+    const pop = () => {
+        const to = history.state?.idx;
+        const dir = to != null && idx != null && to > idx ? 'next' : 'back';
+        idx = to;
+        slideScreen(() => undefined, dir); // the router renders on its own, right after this: the slide waits for its new Screen
+    };
+    addEventListener('popstate', pop, { capture: true });
+    return () => { removeEventListener('popstate', pop, { capture: true }); history.pushState = push; history.replaceState = replace; };
+}

package/dist/type/Text.d.ts

@@ -17,6 +17,9 @@ export interface TextProps extends React.HTMLAttributes<HTMLElement> {
     /** the element; defaults per level (h2 for display/h1/h2, p for title/body/stat, span for the rest) */
     /** READ, NOT SHOWN: the words stay in the page for a screen reader (a page's h1 that the design does not show), and take no room */
     sr?: boolean;
+    /** the member may select and copy these words (a code, an address, a reference number) — everything else in a Screen is not
+     *  selectable, like a native app (Lh 2026-09-25) */
+    selectable?: boolean;
     as?: 'h1' | 'h2' | 'h3' | 'p' | 'span' | 'strong' | 'div';
 }
 /**
@@ -24,7 +27,7 @@ export interface TextProps extends React.HTMLAttributes<HTMLElement> {
  * Headings inside a card head are h2 by default; a screen title in a TopBar is h1.
  * Everything scales from the root font-size, so there are no pixel sizes to pick.
  */
-export declare function Text({ level, xl, mono, muted, caps, grow, sr, as, className, ...rest }: TextProps): import("react").DetailedReactHTMLElement<{
+export declare function Text({ level, xl, mono, muted, caps, grow, sr, selectable, as, className, ...rest }: TextProps): import("react").DetailedReactHTMLElement<{
     /** the element it renders (React 19 passes `ref` as a prop) */
     ref?: React.Ref<HTMLElement>;
     defaultChecked?: boolean | undefined;

package/dist/type/Text.js

@@ -8,9 +8,9 @@ const DEFAULT_AS = {
  * Headings inside a card head are h2 by default; a screen title in a TopBar is h1.
  * Everything scales from the root font-size, so there are no pixel sizes to pick.
  */
-export function Text({ level, xl, mono, muted, caps, grow, sr, as, className, ...rest }) {
+export function Text({ level, xl, mono, muted, caps, grow, sr, selectable, as, className, ...rest }) {
     return createElement(as ?? DEFAULT_AS[level] ?? 'span', {
-        className: cx(`t-${level}`, level === 'stat' && xl && 't-stat--xl', level === 'stat' && mono && 't-stat--mono', muted && 't-muted', caps && 't-caps', grow && 'grow', sr && 't-sr', className),
+        className: cx(`t-${level}`, level === 'stat' && xl && 't-stat--xl', level === 'stat' && mono && 't-stat--mono', muted && 't-muted', caps && 't-caps', grow && 'grow', sr && 't-sr', selectable && 't-select', className),
         ...rest,
     });
 }

package/package.json

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