@usableapp/cardds 0.6.12 → 0.6.14

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 > 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.14 — 2026-09-24
+
+### ActionNote (new, the bottom)
+- The main button's place and size, but lying on the ground: no fill, no border, no rounding. It holds one line of muted
+  words, and an inline `Icon` is allowed. Nothing to press.
+- For when there is nothing to press here. Example (iPhone install):
+  `<ActionNote>กดที่ <Icon name="share" /> ด้านล่างนี้</ActionNote>`, pointing at Safari's own share button.
+- Put it in a `CardFoot` (so a `CallSheet`'s `sheet.foot`) or an `ActionBar`, in place of the button, never beside one.
+  A `link` / `ctaLink` still goes under it.
+- One fixed shape, never styled per use.
+
+### Modal in Safari (iOS 18) — fixed
+- Before: in Safari/WebKit the Modal stretched to the whole stage and its dark drawer (the question + buttons) was pushed out of
+  sight; Chrome was right. After: the same in both — the card its own height at the centre, the drawer shown.
+- CSS only, nothing to change in a project: `.modal` is a flex column (was a grid of `minmax(0, 1fr) auto`, which WebKit sized
+  to 0) and takes its own height by `align-self: center` (was `height: fit-content`).
+
+- Tests can run in WebKit: `CARDDS_BROWSER=webkit npm test` (the 131% text-size cases are Chrome-only — they use CDP).
+
+## 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/actions.css

@@ -310,3 +310,24 @@
    fixed to the viewport wherever it sits. (.screen--fill reserves nothing:
    its .step carries the bar's room itself, step.css.) */
 :has(> .action-bar) .screen:not(.screen--fill) { padding-bottom: var(--bar-reserve); }
+
+/* ---- action note (Lh 2026-09-24): the main button's place, the main button's size, but ON the ground — no fill, no border, no
+   rounding — one line of muted words, an inline icon allowed; nothing to press. In a CardFoot or an ActionBar row it takes the
+   button's share (the whole width), so a foot or a bar keeps its height whether it holds a button or the note. ---- */
+.action-note {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: var(--btn-h);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--action-note-gap, var(--sp-1));
+  padding-inline: var(--sp-2);
+  font: var(--action-note-font, var(--type-body));
+  color: var(--action-note-ink, var(--on-surface-muted));
+  text-align: center;
+  cursor: default;
+}
+.card .action-note { color: var(--action-note-ink, var(--card-muted)); }
+.action-note__words { display: block; } /* ONE run of words: an icon inside sits in the line, the spaces around it kept */
+.action-note__words > .icon { display: inline-block; vertical-align: -0.2em; width: 1.25em; height: 1.25em; margin-inline: 0.15em; color: inherit; }

package/css/layover.css

@@ -34,14 +34,16 @@
   position: absolute;             /* at the stage's centre, and kept there as it grows: absolute + margin auto re-centres on every height */
   inset: 0;
   margin: auto;
-  height: fit-content;            /* inset 0 alone would stretch it to the stage: its own height, then the margins share the rest */
+  height: auto;
+  align-self: center;             /* inset 0 alone would stretch it to the stage: centre self-alignment gives it its own height, the margins
+                                     share the rest. NOT `height: fit-content` — WebKit/Safari sizes it wrong (Lh 2026-09-24, iOS 18.6) */
   width: calc(100% - 2 * var(--screen-pad));
   z-index: 2;                     /* over the dim stage's scrim (z 1) */
   max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) */
   padding: 0;                     /* the parts pad themselves */
   border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
+  display: flex;                  /* a column: the lift shrinks (and scrolls) under max-height, the drawer keeps its height. NOT a grid */
+  flex-direction: column;         /* of minmax(0, 1fr) + auto — WebKit/Safari sizes that 1fr row to 0 (Lh 2026-09-24, iOS 18.6) */
   overflow: clip;
   box-shadow: var(--modal-shadow, var(--shadow-sheet));
 }
@@ -50,11 +52,13 @@
   display: grid;
   gap: var(--card-gap);
   align-content: start;
+  flex: 0 1 auto;
   min-height: 0;
   overflow-y: auto;               /* tall content scrolls inside; the drawer stays */
   overscroll-behavior: contain;
 }
 .modal__drawer {
+  flex-shrink: 0;
   height: var(--drawer-h);
   box-sizing: border-box;
   padding: var(--modal-drawer-pad, var(--sp-5));

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/actions/ActionNote.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+export interface ActionNoteProps extends ComponentProps<'div'> {
+}
+/**
+ * ActionNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
+ * size (full width, `--btn-h` tall), lying on the ground — no fill, no border, no rounding — holding one line of muted words, an
+ * inline `Icon` allowed ("กดที่ <Icon name="share" /> ด้านล่างนี้" — the member does the thing elsewhere). It does nothing on a tap.
+ * A member of the BOTTOM: a `CardFoot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
+ * it (CardFoot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
+ */
+export declare function ActionNote({ className, children, ...rest }: ActionNoteProps): import("react").JSX.Element;

package/dist/actions/ActionNote.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../cx.js';
+/**
+ * ActionNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
+ * size (full width, `--btn-h` tall), lying on the ground — no fill, no border, no rounding — holding one line of muted words, an
+ * inline `Icon` allowed ("กดที่ <Icon name="share" /> ด้านล่างนี้" — the member does the thing elsewhere). It does nothing on a tap.
+ * A member of the BOTTOM: a `CardFoot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
+ * it (CardFoot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
+ */
+export function ActionNote({ className, children, ...rest }) {
+    return _jsx("div", { role: "note", className: cx('action-note', className), ...rest, children: _jsx("span", { className: "action-note__words", children: children }) });
+}

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) */
 }
 
 /* ============================================================
@@ -2143,6 +2143,27 @@ button { font: inherit; cursor: pointer; }
    its .step carries the bar's room itself, step.css.) */
 :has(> .action-bar) .screen:not(.screen--fill) { padding-bottom: var(--bar-reserve); }
 
+/* ---- action note (Lh 2026-09-24): the main button's place, the main button's size, but ON the ground — no fill, no border, no
+   rounding — one line of muted words, an inline icon allowed; nothing to press. In a CardFoot or an ActionBar row it takes the
+   button's share (the whole width), so a foot or a bar keeps its height whether it holds a button or the note. ---- */
+.action-note {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: var(--btn-h);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--action-note-gap, var(--sp-1));
+  padding-inline: var(--sp-2);
+  font: var(--action-note-font, var(--type-body));
+  color: var(--action-note-ink, var(--on-surface-muted));
+  text-align: center;
+  cursor: default;
+}
+.card .action-note { color: var(--action-note-ink, var(--card-muted)); }
+.action-note__words { display: block; } /* ONE run of words: an icon inside sits in the line, the spaces around it kept */
+.action-note__words > .icon { display: inline-block; vertical-align: -0.2em; width: 1.25em; height: 1.25em; margin-inline: 0.15em; color: inherit; }
+
 /* ---- css/numbers.css — ring, track, band, dot grid, picker, badge, bars ---- */
 /* ============================================================
    cardds/numbers.css — big numbers inside cards:
@@ -3357,14 +3378,16 @@ button { font: inherit; cursor: pointer; }
   position: absolute;             /* at the stage's centre, and kept there as it grows: absolute + margin auto re-centres on every height */
   inset: 0;
   margin: auto;
-  height: fit-content;            /* inset 0 alone would stretch it to the stage: its own height, then the margins share the rest */
+  height: auto;
+  align-self: center;             /* inset 0 alone would stretch it to the stage: centre self-alignment gives it its own height, the margins
+                                     share the rest. NOT `height: fit-content` — WebKit/Safari sizes it wrong (Lh 2026-09-24, iOS 18.6) */
   width: calc(100% - 2 * var(--screen-pad));
   z-index: 2;                     /* over the dim stage's scrim (z 1) */
   max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) */
   padding: 0;                     /* the parts pad themselves */
   border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
+  display: flex;                  /* a column: the lift shrinks (and scrolls) under max-height, the drawer keeps its height. NOT a grid */
+  flex-direction: column;         /* of minmax(0, 1fr) + auto — WebKit/Safari sizes that 1fr row to 0 (Lh 2026-09-24, iOS 18.6) */
   overflow: clip;
   box-shadow: var(--modal-shadow, var(--shadow-sheet));
 }
@@ -3373,11 +3396,13 @@ button { font: inherit; cursor: pointer; }
   display: grid;
   gap: var(--card-gap);
   align-content: start;
+  flex: 0 1 auto;
   min-height: 0;
   overflow-y: auto;               /* tall content scrolls inside; the drawer stays */
   overscroll-behavior: contain;
 }
 .modal__drawer {
+  flex-shrink: 0;
   height: var(--drawer-h);
   box-sizing: border-box;
   padding: var(--modal-drawer-pad, var(--sp-5));

package/dist/index.d.ts

@@ -76,3 +76,4 @@ export * from './templates/Walkthrough.js';
 export * from './templates/Home.js';
 export * from './sheets/StackSheet.js';
 export * from './templates/CallSheet.js';
+export * from './actions/ActionNote.js';

package/dist/index.js

@@ -79,3 +79,4 @@ export * from './templates/Walkthrough.js';
 export * from './templates/Home.js';
 export * from './sheets/StackSheet.js';
 export * from './templates/CallSheet.js';
+export * from './actions/ActionNote.js';

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.14",
   "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.",