@usableapp/cardds 0.6.10 → 0.6.11

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 > 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.11 — 2026-09-23
+
+### A small link under a foot's buttons: `CardFoot link` (new, like an ActionBar's `ctaLink`)
+- `CardFoot` has a new `link` slot: a `Link sm` on its own short row under the buttons, centred. It never shares the buttons'
+  line, and a sheet's foot strip grows by that row.
+- `CallSheet` passes it as `sheet.footLink`.
+- A `Link` put straight in a `CardFoot` is misuse: it takes a button's share and squeezes the button.
+
+### EmptyState, redone for the new anatomy
+- `Screen top={TopBar} › Step › EmptyState`. It is a component in the content and no longer sits in a `Centre` over the
+  screen.
+- Alone in a Step, it stands at the content's human centre (about 40% down).
+- The TopBar names the page; the EmptyState heading says what is (not) there.
+
 ## 0.6.10 — 2026-09-23
 
 ### New template: `CallSheet` (layout-3)

package/css/card.css

@@ -121,6 +121,10 @@
 .card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; }
 .card__foot > .btn { flex: 1 1 0; min-width: 0; }
 .card__foot:has(> :nth-child(3)) > .btn { padding-inline: var(--sp-2); }
+/* a small link under the buttons (CardFoot link — Lh 2026-09-23, as the ActionBar's ctaLink): the row wraps, the link takes a
+   whole short row of its own, centred — it never shares the buttons' line */
+.card__foot--link { flex-wrap: wrap; align-content: end; row-gap: var(--card-foot-link-gap, var(--sp-1)); }
+.card__foot-link { flex: 1 0 100%; display: flex; justify-content: center; }
 
 /* media placeholder for wireframes — currentColor so it survives any palette */
 .ph {

package/css/sheet.css

@@ -147,9 +147,12 @@
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
 .sheet { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); }
+/* …and the link row under the button, when there is one (its line + the gap over it) */
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + calc(var(--tap-base) * 7 / 12) + var(--card-pad)); }
 .sheet > .card__foot {
   position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
   align-items: end;
+  align-content: end;
   padding: 0 var(--card-pad) var(--card-pad);
   background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
   pointer-events: none;

package/css/step.css

@@ -158,3 +158,8 @@
   border-top: 0;
   object-fit: cover;
 }
+/* an EMPTY STATE is a component in the content box too (Lh 2026-09-23 — it no longer floats in a Centre over the screen): alone in a
+   Step it stands at the human centre of the content, 40% down (two parts of room above it, three below) */
+.step:has(> .empty-state)::before { content: ""; flex: 2 1 0; }
+.step:has(> .empty-state)::after { content: ""; flex: 3 1 0; }
+.step > .empty-state { flex: none; }

package/dist/cardds.css

@@ -653,6 +653,10 @@ button { font: inherit; cursor: pointer; }
 .card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; }
 .card__foot > .btn { flex: 1 1 0; min-width: 0; }
 .card__foot:has(> :nth-child(3)) > .btn { padding-inline: var(--sp-2); }
+/* a small link under the buttons (CardFoot link — Lh 2026-09-23, as the ActionBar's ctaLink): the row wraps, the link takes a
+   whole short row of its own, centred — it never shares the buttons' line */
+.card__foot--link { flex-wrap: wrap; align-content: end; row-gap: var(--card-foot-link-gap, var(--sp-1)); }
+.card__foot-link { flex: 1 0 100%; display: flex; justify-content: center; }
 
 /* media placeholder for wireframes — currentColor so it survives any palette */
 .ph {
@@ -1301,9 +1305,12 @@ button { font: inherit; cursor: pointer; }
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
 .sheet { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); }
+/* …and the link row under the button, when there is one (its line + the gap over it) */
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + calc(var(--tap-base) * 7 / 12) + var(--card-pad)); }
 .sheet > .card__foot {
   position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
   align-items: end;
+  align-content: end;
   padding: 0 var(--card-pad) var(--card-pad);
   background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
   pointer-events: none;
@@ -1684,6 +1691,11 @@ button { font: inherit; cursor: pointer; }
   border-top: 0;
   object-fit: cover;
 }
+/* an EMPTY STATE is a component in the content box too (Lh 2026-09-23 — it no longer floats in a Centre over the screen): alone in a
+   Step it stands at the human centre of the content, 40% down (two parts of room above it, three below) */
+.step:has(> .empty-state)::before { content: ""; flex: 2 1 0; }
+.step:has(> .empty-state)::after { content: ""; flex: 3 1 0; }
+.step > .empty-state { flex: none; }
 
 /* ---- css/forms.css — outlined fields, add-row ---- */
 /* ============================================================

package/dist/cards/CardFoot.d.ts

@@ -1,5 +1,9 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 export interface CardFootProps extends ComponentProps<'div'> {
+    /** a SMALL LINK under the buttons, centred on its own short row (a `Link sm` — "details for developers") — the same as an
+     *  ActionBar's ctaLink (Lh 2026-09-23). It never takes a share of the buttons' line */
+    link?: ReactNode;
 }
-/** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only. */
-export declare function CardFoot({ className, ...rest }: CardFootProps): import("react").JSX.Element;
+/** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
+ *  link goes in `link`, under it. */
+export declare function CardFoot({ link, className, children, ...rest }: CardFootProps): import("react").JSX.Element;

package/dist/cards/CardFoot.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only. */
-export function CardFoot({ className, ...rest }) {
-    return _jsx("div", { className: cx('card__foot', className), ...rest });
+/** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
+ *  link goes in `link`, under it. */
+export function CardFoot({ link, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('card__foot', link != null && 'card__foot--link', className), ...rest, children: [children, link != null && _jsx("div", { className: "card__foot-link", children: link })] }));
 }

package/dist/scaffold/EmptyState.d.ts

@@ -9,6 +9,6 @@ export interface EmptyStateProps extends Omit<ComponentProps<'div'>, 'title'> {
     /** the heading's level: h2 on a surface (default) · h3 inside a card's section, under its h3 heading */
     level?: 'h2' | 'h3';
 }
-/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. On the surface (always in a `Centre`)
+/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. A component in the content: alone in a `Step` it stands at the content's human centre, 40% down (Lh 2026-09-23 — no longer a `Centre` over the screen)
  *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in; full ink throughout, never muted (Lh 2026-09-16). */
 export declare function EmptyState({ icon, title, action, level, className, children, ...rest }: EmptyStateProps): import("react").JSX.Element;

package/dist/scaffold/EmptyState.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. On the surface (always in a `Centre`)
+/** EmptyState — centred: a large icon, a heading, a line of body text, an optional CTA. A component in the content: alone in a `Step` it stands at the content's human centre, 40% down (Lh 2026-09-23 — no longer a `Centre` over the screen)
  *  or inside a card's section ("nothing here yet" under a heading) — the ink follows the card it sits in; full ink throughout, never muted (Lh 2026-09-16). */
 export function EmptyState({ icon, title, action, level = 'h2', className, children, ...rest }) {
     const H = level;

package/dist/templates/CallSheet.d.ts

@@ -7,6 +7,8 @@ export interface CallSheetSheet {
     body: ReactNode | (() => ReactNode);
     /** the sheet foot: the one button that finishes the sheet */
     foot?: ReactNode;
+    /** a small link UNDER that button (a `Link sm`, e.g. details for developers) */
+    footLink?: ReactNode;
 }
 export interface CallSheetProps extends Omit<ComponentProps<typeof Screen>, 'children' | 'fill' | 'top' | 'bottom' | 'title'> {
     /** a picture above the words (optional) */

package/dist/templates/CallSheet.js

@@ -23,5 +23,5 @@ export function CallSheet({ media, heading, body, action, sheet, open: openProp,
     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);
                         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 && _jsx(CardFoot, { children: sheet.foot })] })] }), children] }));
+                            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] }));
 }

package/package.json

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