@usableapp/cardds 0.7.10 → 0.7.11

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 > 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.11 — 2026-09-25
+
+### Added
+- `SheetSteps numbered`: each step's number in a disc before its title, every disc the brand colour (`--accent` /
+  `--on-accent`). Default off — titles only, as before. Knobs `--sheet-step-num-size` · `--sheet-step-num-font` ·
+  `--sheet-step-num-bg` · `--sheet-step-num-ink`. Story `SheetSteps · Numbered`.
+
+### Changed
+- The rule over each step is thinner: 2px (`--rule-w`) → 1px. Knob `--sheet-step-border-w`.
+
 ## 0.7.10 — 2026-09-25
 
 ### Fixed

package/css/sheet.css

@@ -388,7 +388,7 @@
 .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(--rule-w) solid var(--sheet-step-border, var(--hairline));
+  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;
 }
@@ -398,6 +398,11 @@
 .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__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 */
+  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));
+}
 .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); }

package/dist/cardds.css

@@ -1576,7 +1576,7 @@ 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(--rule-w) solid var(--sheet-step-border, var(--hairline));
+  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;
 }
@@ -1586,6 +1586,11 @@ button { font: inherit; cursor: pointer; }
 .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__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 */
+  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));
+}
 .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); }

package/dist/sheets/SheetSteps.d.ts

@@ -22,6 +22,8 @@ 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. */
+    numbered?: boolean;
 }
 /**
  * SheetSteps — one task taken in steps INSIDE one sheet (phone · code · PIN · PIN again · face · notices). The done steps pile up
@@ -30,7 +32,7 @@ export interface SheetStepsProps extends ComponentProps<'div'> {
  * steps on the last one. Goes in a `SheetBody`.
  * The sheet may be dragged down to peek and back — the body keeps where it was scrolled.
  */
-export declare function SheetSteps({ at, reached, defaultAt, onAtChange, reversible, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }: SheetStepsProps): import("react").JSX.Element;
+export declare function SheetSteps({ at, reached, defaultAt, onAtChange, reversible, numbered, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }: SheetStepsProps): import("react").JSX.Element;
 export interface SheetStepProps extends Omit<ComponentProps<'li'>, 'title'> {
     /** the step's name — always shown: over the open step, on the folded line of a done one */
     title: ReactNode;

package/dist/sheets/SheetSteps.js

@@ -16,7 +16,7 @@ const StepCtx = createContext(null);
  * steps on the last one. Goes in a `SheetBody`.
  * The sheet may be dragged down to peek and back — the body keeps where it was scrolled.
  */
-export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible = false, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }) {
+export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible = false, numbered = false, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }) {
     const [inner, setInner] = useState(defaultAt);
     const current = at ?? inner;
     const steps = Children.toArray(children).filter(isValidElement);
@@ -185,7 +185,7 @@ export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible
         else if (dy < 0 && ref.current?.querySelector('.sheet-step--now[data-skippable]'))
             go(to, 'skip'); // forward only, and only past a step that may be skipped
     };
-    return (_jsxs("div", { ref: ref, className: cx('sheet-steps', !reversible && 'sheet-steps--locked', className), style: style, onFocus: focusIn, onBlur: focusOut, onPointerDown: down, onPointerUp: up, onPointerCancel: (e) => { onPointerCancel?.(e); press.current = null; }, ...rest, children: [_jsx("input", { ref: holderRef, className: "sheet-steps__holder", "aria-hidden": true, tabIndex: -1, autoComplete: "off", onInput: (e) => { e.currentTarget.value = ''; } }), _jsx("ol", { className: "sheet-steps__track", children: steps.map((step, i) => (_jsx(StepCtx.Provider, { value: { i, at: current, furthest: reach, count, reversible, go }, children: step }, step.key ?? i))) }), finish != null && ( // always in sight; it takes taps only once every step is done (or skipped)
+    return (_jsxs("div", { ref: ref, className: cx('sheet-steps', !reversible && 'sheet-steps--locked', className), style: style, onFocus: focusIn, onBlur: focusOut, onPointerDown: down, onPointerUp: up, onPointerCancel: (e) => { onPointerCancel?.(e); press.current = null; }, ...rest, children: [_jsx("input", { ref: holderRef, className: "sheet-steps__holder", "aria-hidden": true, tabIndex: -1, autoComplete: "off", onInput: (e) => { e.currentTarget.value = ''; } }), _jsx("ol", { className: "sheet-steps__track", children: steps.map((step, i) => (_jsx(StepCtx.Provider, { value: { numbered, i, at: current, furthest: reach, count, reversible, go }, children: step }, step.key ?? i))) }), finish != null && ( // always in sight; it takes taps only once every step is done (or skipped)
             _jsx("div", { className: "sheet-steps__finish", children: isValidElement(finish) ? cloneElement(finish, { disabled: reach < count || finish.props.disabled }) : finish }))] }));
 }
 /** SheetStep — one step of a SheetSteps: its title, then what the member does (a Field, a Pin, a Toggle, the step's own Btn). */
@@ -193,7 +193,7 @@ export function SheetStep({ title, summary, skippable, skipLabel = 'Skip', error
     const ctx = useContext(StepCtx);
     if (!ctx)
         throw new Error('SheetStep goes inside a SheetSteps');
-    const { i, at, furthest, count, reversible, go } = ctx;
+    const { numbered, i, at, furthest, count, reversible, go } = ctx;
     const phase = i === at ? 'now' : i < furthest ? 'done' : 'next';
     const off = phase !== 'now';
     /* the step is the FORM GROUP of the format checks inside it (Field format/digits/required, Pin match): the words of the first
@@ -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: [_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 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') }))] }));
 }

package/package.json

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