@usableapp/cardds 0.7.27 → 0.7.28

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 > 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.28 — 2026-09-29
+
+### Added
+- **The CONFIRM** (Lh 2026-09-29, from timebank's log-out): a `Modal` holding ONLY a `Drawer` (no `Lift`) — a question with nothing to show above it. The Drawer is then the whole card: as tall as its words (not the fixed `--drawer-h` band), one beat in (no second beat for the drawer). Knob `--modal-confirm-pad-y`. Gallery: `Modal · Confirm`.
+- `Drawer light`: the card's paper and dark words instead of the dark end — same layout, same `BtnTrio`; the one solid (`invert`) button turns dark. Knobs `--modal-drawer-light-bg` · `--modal-drawer-light-ink`. Gallery: `Modal · ConfirmLight`.
+
 ## 0.7.27 — 2026-09-29
 
 ### Changed

package/css/layover.css

@@ -73,6 +73,14 @@
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
+.modal__drawer--light {        /* light: the card's paper, dark words (Lh 2026-09-29) — the one solid button turns dark */
+  background: var(--modal-drawer-light-bg, var(--card-bg));
+  color: var(--modal-drawer-light-ink, var(--card-ink));
+  --accent: var(--card-ink);
+  --on-accent: var(--card-bg);
+}
+/* the CONFIRM: a Modal with no Lift — the drawer IS the card, as tall as its words (no fixed band, no second beat) */
+.modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
 .modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
 .modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }

package/dist/cardds.css

@@ -3643,6 +3643,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
+.modal__drawer--light {        /* light: the card's paper, dark words (Lh 2026-09-29) — the one solid button turns dark */
+  background: var(--modal-drawer-light-bg, var(--card-bg));
+  color: var(--modal-drawer-light-ink, var(--card-ink));
+  --accent: var(--card-ink);
+  --on-accent: var(--card-bg);
+}
+/* the CONFIRM: a Modal with no Lift — the drawer IS the card, as tall as its words (no fixed band, no second beat) */
+.modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
 .modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
 .modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }

package/dist/sheets/Drawer.d.ts

@@ -27,9 +27,13 @@ export interface DrawerProps extends Omit<ComponentProps<'div'>, 'title'> {
     title: ReactNode;
     /** the fine print under it */
     caption?: ReactNode;
+    /** a LIGHT drawer: the card's paper and dark words instead of the dark end (Lh 2026-09-29) — same layout, same trio; the one solid button turns dark */
+    light?: boolean;
 }
-/** Drawer — the dark end of a `Modal`: the question, its fine print, and a `BtnTrio` (or two buttons) — plain buttons with the app's `onClick`; the Drawer does nothing with them. */
-export declare function Drawer({ title, caption, className, children, ...rest }: DrawerProps): import("react").JSX.Element;
+/** Drawer — the dark end of a `Modal` (`light` = paper and dark words): the question, its fine print, and a `BtnTrio` (or two buttons) — plain buttons
+ *  with the app's `onClick`; the Drawer does nothing with them. A `Modal` holding ONLY a Drawer (no `Lift`) is the CONFIRM: a question with nothing
+ *  to show above it — the Drawer is the whole card and comes in with it in one beat. */
+export declare function Drawer({ title, caption, light, className, children, ...rest }: DrawerProps): import("react").JSX.Element;
 export interface BtnTrioProps extends ComponentProps<'div'> {
 }
 /** BtnTrio — three round buttons with dotted connectors between them (× · ? · ✓); the middle one inverted. */

package/dist/sheets/Drawer.js

@@ -48,9 +48,11 @@ export function Modal({ open = true, onClosed, onDismiss, className, ...rest })
 export function Lift({ className, ...rest }) {
     return _jsx("div", { className: cx('modal__lift', className), ...rest });
 }
-/** Drawer — the dark end of a `Modal`: the question, its fine print, and a `BtnTrio` (or two buttons) — plain buttons with the app's `onClick`; the Drawer does nothing with them. */
-export function Drawer({ title, caption, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('modal__drawer', className), ...rest, children: [_jsx("h2", { className: "t-h2", children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));
+/** Drawer — the dark end of a `Modal` (`light` = paper and dark words): the question, its fine print, and a `BtnTrio` (or two buttons) — plain buttons
+ *  with the app's `onClick`; the Drawer does nothing with them. A `Modal` holding ONLY a Drawer (no `Lift`) is the CONFIRM: a question with nothing
+ *  to show above it — the Drawer is the whole card and comes in with it in one beat. */
+export function Drawer({ title, caption, light, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('modal__drawer', light && 'modal__drawer--light', className), ...rest, children: [_jsx("h2", { className: "t-h2", children: title }), caption != null && _jsx("p", { className: "t-caption", children: caption }), children] }));
 }
 /** BtnTrio — three round buttons with dotted connectors between them (× · ? · ✓); the middle one inverted. */
 export function BtnTrio({ className, children, ...rest }) {

package/package.json

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