@usableapp/cardds 0.6.13 → 0.6.15

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 > 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.15 — 2026-09-24
+
+- **`ActionNote` icon colour:** new knob `--action-note-icon-ink` (default: the words' muted ink). A project can colour the
+  icon apart from the words, e.g. the system blue of the control it points at:
+  `:root { --action-note-icon-ink: #007AFF }` (and `#0A84FF` in dark mode) in its theme.css. cardds carries no platform colour.
+
+## 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)

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: var(--action-note-icon-ink, inherit); } /* a project may colour the icon apart from the words — e.g. the system blue of the control it points at (Lh 2026-09-24) */

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/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

@@ -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: var(--action-note-icon-ink, inherit); } /* a project may colour the icon apart from the words — e.g. the system blue of the control it points at (Lh 2026-09-24) */
+
 /* ---- 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/package.json

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