@usableapp/cardds 0.7.26 → 0.7.28

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 > 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
+- `StackSheet` (so `Home`): the open sheet's back button (chevron down) is HIDDEN for now — Lh 2026-09-29: not used in real work yet. A tap on the open sheet's title still folds it. `backAt="end"` (or `"start"`) brings it back; `Home backAt` passes it through. New value `backAt="none"` = the default.
+
 ## 0.7.26 — 2026-09-29
 
 ### Fixed (`cardds check` / ESLint — two holes mailpool found, 2026-09-29)

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/dist/sheets/StackSheet.d.ts

@@ -26,8 +26,9 @@ export interface StackSheetProps extends Omit<ComponentProps<'article'>, 'title'
     foot?: ReactNode;
     /** the back button's label (shown once the sheet is open) */
     backLabel?: string;
-    /** where the back button stands: `end` (default — after the tabs, chevron DOWN: the sheet folds down, Lh 2026-09-29) or `start` (before the title, chevron left) */
-    backAt?: 'start' | 'end';
+    /** where the back button stands: `none` (default — hidden for now, Lh 2026-09-29: not used in real work yet; a tap on the open sheet's title folds it) ·
+     *  `end` (after the tabs, chevron DOWN: the sheet folds down) · `start` (before the title, chevron left) */
+    backAt?: 'none' | 'start' | 'end';
 }
 /**
  * StackSheet — ONE sheet of a `SheetStack`, in the one sheet shape: SHEET HEAD (back · title · tabs or an icon) pinned at the top ·

package/dist/sheets/StackSheet.js

@@ -17,7 +17,7 @@ import { Badge } from '../numbers/Badge.js';
  * a count shows as a small circle over its icon. The body is the app's: render the page of the chosen tab (and nothing while the sheet
  * is closed — see `Home`). A direct child of `SheetStack`.
  */
-export function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel = 'Back', backAt = 'end', className, children, ...rest }) {
+export function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel = 'Back', backAt = 'none', className, children, ...rest }) {
     const [tab, pick] = useControlled(tabProp, defaultTab ?? tabs?.[0]?.id, onTabChange);
     // a title longer than its room does not wrap: it runs sideways, like a song title in a short slot — the room it overflows by
     // is measured here (the tabs may grow with the text size) and handed to the CSS as --_over

package/dist/templates/Home.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentProps, type ReactNode } from 'react';
 import type { Tone } from '../cards/Card.js';
 import { Screen } from '../scaffold/Screen.js';
-import { type StackSheetTab } from '../sheets/StackSheet.js';
+import { type StackSheetTab, type StackSheetProps } from '../sheets/StackSheet.js';
 export interface HomeSheet {
     /** the sheet head's title — an h2 (the page's one h1 is in `base`) */
     title: ReactNode;
@@ -36,6 +36,8 @@ export interface HomeProps extends Omit<ComponentProps<typeof Screen>, 'children
     keep?: boolean;
     /** the open sheet's back button label */
     backLabel?: string;
+    /** the open sheet's back button — see `StackSheet backAt` (default `none`: hidden for now) */
+    backAt?: StackSheetProps['backAt'];
     /** layers over the screen (a SheetStage over + Modal) */
     children?: ReactNode;
 }
@@ -46,4 +48,4 @@ export interface HomeProps extends Omit<ComponentProps<typeof Screen>, 'children
  * at the bottom). A tap on a head brings that sheet up to fill everything under the top. Only the open sheet's body is rendered — three
  * sections on one home never cost three pages (`keep` holds a body once opened).
  */
-export declare function Home({ top, title, sheets, open: openProp, defaultOpen, onOpenChange, base, keep, backLabel, children, ...rest }: HomeProps): import("react").JSX.Element;
+export declare function Home({ top, title, sheets, open: openProp, defaultOpen, onOpenChange, base, keep, backLabel, backAt, children, ...rest }: HomeProps): import("react").JSX.Element;

package/dist/templates/Home.js

@@ -14,7 +14,7 @@ const LEAVE = 800; // ms: a closing sheet keeps its body until it has slid home
  * at the bottom). A tap on a head brings that sheet up to fill everything under the top. Only the open sheet's body is rendered — three
  * sections on one home never cost three pages (`keep` holds a body once opened).
  */
-export function Home({ top, title, sheets, open: openProp, defaultOpen = null, onOpenChange, base, keep, backLabel = 'Back', children, ...rest }) {
+export function Home({ top, title, sheets, open: openProp, defaultOpen = null, onOpenChange, base, keep, backLabel = 'Back', backAt, children, ...rest }) {
     const [open, change] = useControlled(openProp, defaultOpen, onOpenChange);
     const [leaving, setLeaving] = useState(null);
     const [seen, setSeen] = useState(() => new Set(open != null ? [open] : []));
@@ -34,5 +34,5 @@ export function Home({ top, title, sheets, open: openProp, defaultOpen = null, o
     }, [leaving]);
     const [tabs, setTabs] = useState(() => Object.fromEntries(sheets.map((x, i) => [i, x.defaultTab ?? x.tabs?.[0]?.id])));
     const shows = (i) => i === open || i === leaving || (keep && seen.has(i));
-    return (_jsxs(Screen, { fill: true, top: top, ...rest, children: [_jsx(Text, { level: "h1", as: "h1", sr: true, children: title }), _jsx(SheetStack, { closed: true, open: open, onOpenChange: change, base: base, children: sheets.map((s, i) => (_jsx(StackSheet, { tone: s.tone ?? TONES[i], title: s.title, icon: s.icon, tabs: s.tabs, tab: tabs[i], onTabChange: (t) => setTabs((v) => ({ ...v, [i]: t })), backLabel: backLabel, foot: typeof s.foot === 'function' ? s.foot(tabs[i]) : s.foot, children: shows(i) ? (typeof s.body === 'function' ? s.body(tabs[i]) : s.body) : null }, i))) }), children] }));
+    return (_jsxs(Screen, { fill: true, top: top, ...rest, children: [_jsx(Text, { level: "h1", as: "h1", sr: true, children: title }), _jsx(SheetStack, { closed: true, open: open, onOpenChange: change, base: base, children: sheets.map((s, i) => (_jsx(StackSheet, { tone: s.tone ?? TONES[i], title: s.title, icon: s.icon, tabs: s.tabs, tab: tabs[i], onTabChange: (t) => setTabs((v) => ({ ...v, [i]: t })), backLabel: backLabel, backAt: backAt, foot: typeof s.foot === 'function' ? s.foot(tabs[i]) : s.foot, children: shows(i) ? (typeof s.body === 'function' ? s.body(tabs[i]) : s.body) : null }, i))) }), children] }));
 }

package/package.json

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