@usableapp/cardds 0.6.12 → 0.6.13

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.6.13 — 2026-09-24
+
+### `CallSheet ways`: several ways in, each calling its own sheet (new)
+- Before: `CallSheet` took one `action` + one `sheet`. After: it can also take `ways: [{ action, sheet }]`. Each way gets a button
+  sized to its words, and the buttons wrap like a `CtaPack` (the first is primary, the rest quiet). Each button brings up its own
+  sheet (away → full), and only one sheet is up at a time. Each sheet holds that way's WHOLE form, with its submit on `foot`.
+- `open` / `defaultOpen` = the way's index, or `null` for none (`true` = the first). `onOpenChange(open, way)` gets the index as a
+  second argument. `action` + `sheet` still work unchanged.
+- Gallery screen **SignIn**: เข้าใช้งาน with three ways (register · code · face scan).
+
+### `--scrim` is always black
+- Before: the scrim was 50% of `--card-3-bg` (the brand), so a coloured theme dimmed in its brand colour. After: 50% black in
+  every palette (dim stage, the cover and postcard gradients, the gallery drawer). A project can still set `--scrim` in its theme.css.
+
+- Gallery only: Palette and the Layout / Boxes / Keyboard switches sit above Settings, which now holds only the base sliders. The
+  nav widens with the text size. The Page · OneMove story is removed (the Install screen shows it).
+
 ## 0.6.12 — 2026-09-23
 
 - Gallery only (nothing changes in the package's components or CSS):

package/css/tokens.css

@@ -195,7 +195,7 @@
   --ink-rail: color-mix(in srgb, currentColor 30%, transparent);   /* todo steps, ghost edges */
   --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent); /* calendar marks */
   --accent-mid: color-mix(in srgb, var(--accent) 50%, transparent);
-  --scrim: color-mix(in srgb, var(--card-3-bg) 50%, transparent);  /* dim stage, cover gradient */
+  --scrim: color-mix(in srgb, #000 50%, transparent);  /* dim stage, cover gradient — ALWAYS black, never the brand (Lh 2026-09-24) */
 }
 
 /* ============================================================

package/dist/cardds.css

@@ -236,7 +236,7 @@
   --ink-rail: color-mix(in srgb, currentColor 30%, transparent);   /* todo steps, ghost edges */
   --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent); /* calendar marks */
   --accent-mid: color-mix(in srgb, var(--accent) 50%, transparent);
-  --scrim: color-mix(in srgb, var(--card-3-bg) 50%, transparent);  /* dim stage, cover gradient */
+  --scrim: color-mix(in srgb, #000 50%, transparent);  /* dim stage, cover gradient — ALWAYS black, never the brand (Lh 2026-09-24) */
 }
 
 /* ============================================================

package/dist/templates/CallSheet.d.ts

@@ -10,6 +10,13 @@ export interface CallSheetSheet {
     /** a small link UNDER that button (a `Link sm`, e.g. details for developers) */
     footLink?: ReactNode;
 }
+/** one way in: its button and the sheet it calls */
+export interface CallSheetWay {
+    /** the button's words */
+    action: ReactNode;
+    /** what that button brings up */
+    sheet: CallSheetSheet;
+}
 export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'children' | 'fill' | 'top' | 'bottom' | 'title'> {
     /** a picture above the words (optional) */
     media?: ReactNode;
@@ -17,22 +24,25 @@ export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'chi
     heading: ReactNode;
     /** the words: a string is one paragraph */
     body?: ReactNode;
-    /** the button that calls the sheet */
-    action: ReactNode;
-    /** what comes up */
-    sheet: CallSheetSheet;
-    /** CONTROLLED: the sheet is up — with `onOpenChange`; or `defaultOpen` */
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    /** the sheet's resting states once up (default "peek full") */
+    /** ONE way in: the button that calls the sheet (with `sheet`) */
+    action?: ReactNode;
+    /** what that button brings up */
+    sheet?: CallSheetSheet;
+    /** SEVERAL ways in (instead of `action` + `sheet`): one button each, sized to its words, wrapping like a CtaPack (the first primary, the rest quiet), each calling its own sheet */
+    ways?: CallSheetWay[];
+    /** CONTROLLED: which way's sheet is up — an index, or null for none (`true` = the first); with `onOpenChange`; or `defaultOpen` */
+    open?: number | boolean | null;
+    defaultOpen?: number | boolean | null;
+    onOpenChange?: (open: boolean, way: number | null) => void;
+    /** the sheets' resting states once up (default "peek full") */
     states?: string;
     /** layers over the screen */
     children?: ReactNode;
 }
 /**
  * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
- * words · the button) and the `Sheet` that button calls · no bottom (the sheet finishes on its own foot). The page starts at the
- * screen's lead (15%). The sheet waits `away`; the button brings it up full; its handle takes it down to peek.
+ * words · the button, or several — `ways`) and the `Sheet` each button calls · no bottom (a sheet finishes on its own foot). The page
+ * 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, 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, children, ...rest }: CallSheetProps): import("react").JSX.Element;

package/dist/templates/CallSheet.js

@@ -9,19 +9,22 @@ import { CardHead } from '../cards/CardHead.js';
 import { CardFoot } from '../cards/CardFoot.js';
 import { Text } from '../type/Text.js';
 import { Btn } from '../actions/Btn.js';
+const index = (o) => (o === true ? 0 : typeof o === 'number' ? o : null);
 /**
  * CallSheet — TEMPLATE, a `Screen` with its parts filled — no top · content: a `Step` holding ONE `Page` (picture · heading (the h1) ·
- * words · the button) and the `Sheet` that button calls · no bottom (the sheet finishes on its own foot). The page starts at the
- * screen's lead (15%). The sheet waits `away`; the button brings it up full; its handle takes it down to peek.
+ * words · the button, or several — `ways`) and the `Sheet` each button calls · no bottom (a sheet finishes on its own foot). The page
+ * 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, open: openProp, defaultOpen = false, onOpenChange, states = 'peek full', children, ...rest }) {
-    const [own, setOwn] = useState(defaultOpen);
-    const open = openProp ?? own;
+export function CallSheet({ media, heading, body, action, sheet, ways, open: openProp, defaultOpen = null, onOpenChange, states = 'peek full', children, ...rest }) {
+    const list = ways ?? (sheet ? [{ action, sheet }] : []);
+    const [own, setOwn] = useState(index(defaultOpen));
+    const on = openProp === undefined ? own : index(openProp);
     const [at, setAt] = useState('full');
     const set = (next) => { if (openProp === undefined)
-        setOwn(next); onOpenChange?.(next); };
-    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: _jsx(Btn, { primary: true, "aria-expanded": open, onClick: () => { setAt('full'); set(true); }, children: action }) })] }), _jsxs(Sheet, { state: open ? at : 'away', onStateChange: (s) => { if (s === 'away')
-                            set(false);
+        setOwn(next); onOpenChange?.(next !== null, next); };
+    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: sheet.title }), _jsx(SheetBody, { children: open ? (typeof sheet.body === 'function' ? sheet.body() : sheet.body) : null }), (sheet.foot != null || sheet.footLink != null) && _jsx(CardFoot, { link: sheet.footLink, children: sheet.foot })] })] }), children] }));
+                            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] }));
 }

package/package.json

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