@usableapp/cardds 0.7.11 → 0.7.12

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 > 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.12 — 2026-09-25
+
+### Changed
+- `SheetSteps`: each step's title line is a THIN quiet bar — 32px (`--tap-base` × 2/3), an ink tint, rounded, 4px apart;
+  the tap stays 44px. Opening a step never makes its bar taller: the step's content shows on the ground under it. Replaces
+  the rule on top (0.7.11's `--sheet-step-border-w` default is now 0). With `numbered`, the number sits in a white disc on the bar
+  (was the brand colour). Knobs `--sheet-steps-row-h` · `--sheet-steps-gap` · `--sheet-step-bar-bg` · `-bar-ink` ·
+  `-bar-radius` · `-bar-pad-x` · `--sheet-step-num-bg` · `-num-ink`.
+- The old ruled look is knobs only (story `SheetSteps · Ruled`): `--sheet-step-bar-bg: transparent; --sheet-step-bar-radius: 0;
+  --sheet-step-bar-pad-x: 0; --sheet-steps-row-h: var(--tap-sm); --sheet-step-border-w: 1.5px; --sheet-steps-gap: 0;
+  --sheet-step-num-bg: var(--ink-tint)`.
+
 ## 0.7.11 — 2026-09-25
 
 ### Added

package/css/sheet.css

@@ -388,7 +388,6 @@
 .sheet-step {
   position: relative; min-width: 0;
   display: grid; grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
-  border-top: var(--sheet-step-border-w, 1px) solid var(--sheet-step-border, var(--hairline)); /* a hair, not a rule: 2px read heavy between short rows (Lh 2026-09-25) */
   flex: 0 0 auto;
   transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
 }
@@ -396,21 +395,28 @@
    in one beat the step that was open folds while the new one unfolds (flex-grow and the 1fr row both ease), the piles slide
    with them, nothing jumps (Lh 2026-09-24) */
 .sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
-.sheet-step__head { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--sheet-steps-row-h, var(--tap-sm)); }
+.sheet-step + .sheet-step { margin-top: var(--sheet-steps-gap, var(--sp-1)); } /* the folded bars read as a pile, a little ground between them (Lh 2026-09-25) */
+.sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the white room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
+  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
+  padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
+  background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
+  border-top: var(--sheet-step-border-w, 0px) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
+}
+.sheet-step__summary { color: inherit; opacity: 0.8; }
 .sheet-step__title { font: var(--sheet-step-title-font, var(--type-label)); margin: 0; flex: 0 1 auto; min-width: 0; outline: none; /* the label size, not a body title: a pile of rows must stay small (Lh 2026-09-24) */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sheet-step__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — every disc the same brand colour, none faded */
+.sheet-step__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — a white disc on the bar, the number in the ink */
   flex: none; display: grid; place-items: center; inline-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2)); block-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2));
   border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); font-variant-numeric: tabular-nums;
-  background: var(--sheet-step-num-bg, var(--accent)); color: var(--sheet-step-num-ink, var(--on-accent));
+  background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
 .sheet-step__summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__check { margin-inline-start: auto; }
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
-.sheet-step__inner { display: grid; gap: var(--card-gap); padding-bottom: var(--card-gap); }
+.sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); }
 .sheet-step__inner > * { min-width: 0; }
 .sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
 .sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }
-.sheet-step__go { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.sheet-step__go { position: absolute; inset: min(0px, (var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 /* the last step's finish, when the app gives one: under the steps */
 .sheet-steps__finish { display: grid; padding-top: var(--card-gap); }
 @media (prefers-reduced-motion: reduce) { .sheet-step { transition: none; } }

package/dist/cardds.css

@@ -1576,7 +1576,6 @@ button { font: inherit; cursor: pointer; }
 .sheet-step {
   position: relative; min-width: 0;
   display: grid; grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
-  border-top: var(--sheet-step-border-w, 1px) solid var(--sheet-step-border, var(--hairline)); /* a hair, not a rule: 2px read heavy between short rows (Lh 2026-09-25) */
   flex: 0 0 auto;
   transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
 }
@@ -1584,21 +1583,28 @@ button { font: inherit; cursor: pointer; }
    in one beat the step that was open folds while the new one unfolds (flex-grow and the 1fr row both ease), the piles slide
    with them, nothing jumps (Lh 2026-09-24) */
 .sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
-.sheet-step__head { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--sheet-steps-row-h, var(--tap-sm)); }
+.sheet-step + .sheet-step { margin-top: var(--sheet-steps-gap, var(--sp-1)); } /* the folded bars read as a pile, a little ground between them (Lh 2026-09-25) */
+.sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the white room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
+  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
+  padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
+  background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
+  border-top: var(--sheet-step-border-w, 0px) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
+}
+.sheet-step__summary { color: inherit; opacity: 0.8; }
 .sheet-step__title { font: var(--sheet-step-title-font, var(--type-label)); margin: 0; flex: 0 1 auto; min-width: 0; outline: none; /* the label size, not a body title: a pile of rows must stay small (Lh 2026-09-24) */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sheet-step__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — every disc the same brand colour, none faded */
+.sheet-step__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — a white disc on the bar, the number in the ink */
   flex: none; display: grid; place-items: center; inline-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2)); block-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2));
   border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); font-variant-numeric: tabular-nums;
-  background: var(--sheet-step-num-bg, var(--accent)); color: var(--sheet-step-num-ink, var(--on-accent));
+  background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
 .sheet-step__summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__check { margin-inline-start: auto; }
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
-.sheet-step__inner { display: grid; gap: var(--card-gap); padding-bottom: var(--card-gap); }
+.sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); }
 .sheet-step__inner > * { min-width: 0; }
 .sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
 .sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }
-.sheet-step__go { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.sheet-step__go { position: absolute; inset: min(0px, (var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 /* the last step's finish, when the app gives one: under the steps */
 .sheet-steps__finish { display: grid; padding-top: var(--card-gap); }
 @media (prefers-reduced-motion: reduce) { .sheet-step { transition: none; } }

package/dist/sheets/SheetSteps.d.ts

@@ -22,7 +22,7 @@ export interface SheetStepsProps extends ComponentProps<'div'> {
     /** true: the member may go back and forth — a tap on a done or next step opens it, an up/down swipe moves one step.
      *  false (default): only forward — the done steps stay in the pile, never opened again (a swipe up passes only a `skippable` step). */
     reversible?: boolean;
-    /** true: each step's number in a disc before its title — all the same brand colour (Lh 2026-09-25). Default: titles only. */
+    /** true: each step's number in a disc before its title — a white disc on the step's bar (Lh 2026-09-25). Default: titles only. */
     numbered?: boolean;
 }
 /**

package/dist/sheets/SheetSteps.js

@@ -238,5 +238,5 @@ export function SheetStep({ title, summary, skippable, skipLabel = 'Skip', error
             bad.focus();
         }
     };
-    return (_jsxs("li", { className: cx('sheet-step', `sheet-step--${phase}`, busy != null && busy !== false && 'sheet-step--busy', className), "aria-current": phase === 'now' ? 'step' : undefined, "aria-busy": busy != null && busy !== false ? true : undefined, "data-skippable": skippable || undefined, ...rest, children: [_jsxs("div", { className: "sheet-step__head", inert: off || undefined, children: [numbered && _jsx("span", { className: "sheet-step__num", "aria-hidden": true, children: i + 1 }), _jsx("h3", { className: "sheet-step__title", tabIndex: -1, children: title }), phase === 'done' && summary != null && _jsx("span", { className: "sheet-step__summary t-caption t-muted", children: summary }), phase === 'done' && _jsx(Icon, { name: "check", size: "xs", className: "sheet-step__check" })] }), _jsx("div", { className: "sheet-step__body", children: _jsxs("div", { className: "sheet-step__inner", inert: off || undefined, onClickCapture: press, onPointerDown: keepCursor, children: [_jsx(CheckContext.Provider, { value: group, children: children }), _jsx(FormNote, { error: error ?? note, busy: busy }), skippable && _jsx(Link, { sm: true, muted: true, className: "sheet-step__skip", onClick: () => go(i + 1, 'skip'), children: skipLabel })] }) }), reversible && off && (_jsx("button", { type: "button", className: "sheet-step__go", "aria-label": typeof title === 'string' ? title : `${i + 1} / ${count}`, onClick: () => go(i, 'tap') }))] }));
+    return (_jsxs("li", { className: cx('sheet-step', `sheet-step--${phase}`, busy != null && busy !== false && 'sheet-step--busy', className), "aria-current": phase === 'now' ? 'step' : undefined, "aria-busy": busy != null && busy !== false ? true : undefined, "data-skippable": skippable || undefined, ...rest, children: [_jsxs("div", { className: "sheet-step__head", inert: off || undefined, children: [numbered && _jsx("span", { className: "sheet-step__num", "aria-hidden": true, children: i + 1 }), _jsx("h3", { className: "sheet-step__title", tabIndex: -1, children: title }), phase === 'done' && summary != null && _jsx("span", { className: "sheet-step__summary t-caption", children: summary }), phase === 'done' && _jsx(Icon, { name: "check", size: "xs", className: "sheet-step__check" })] }), _jsx("div", { className: "sheet-step__body", children: _jsxs("div", { className: "sheet-step__inner", inert: off || undefined, onClickCapture: press, onPointerDown: keepCursor, children: [_jsx(CheckContext.Provider, { value: group, children: children }), _jsx(FormNote, { error: error ?? note, busy: busy }), skippable && _jsx(Link, { sm: true, muted: true, className: "sheet-step__skip", onClick: () => go(i + 1, 'skip'), children: skipLabel })] }) }), reversible && off && (_jsx("button", { type: "button", className: "sheet-step__go", "aria-label": typeof title === 'string' ? title : `${i + 1} / ${count}`, onClick: () => go(i, 'tap') }))] }));
 }

package/package.json

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