@usableapp/cardds 0.7.62 → 0.7.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
  > 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.
4
4
 
5
+ ## 0.7.63 — 2026-10-06
6
+
7
+ ### Added
8
+ - **The cursor standby has a switch: `data-standby="off"`** (Lh 2026-10-06) — the default does not move: a sheet come up, a step opened, a stack sheet opened or a `Modal` arrived still has its field waiting with the cursor, and an app writes no focus code. New: put `data-standby="off"` on any box around the part and no field is given the cursor — the part's heading or handle still is, so the keyboard does not come. Omit it and nothing changes. To choose another field than the first, as before: `<Field data-autofocus … />`.
9
+
10
+ ### Changed
11
+ - **The grab line is 2px again** (Lh 2026-10-06) — `--hairline-w` 1px → 2px: the line of a `Sheet` and of a stack with `mark="line"`. Before (0.7.61–0.7.62): 1px. You change nothing; a theme that wants the thin line sets `--hairline-w: 1px`.
12
+
5
13
  ## 0.7.62 — 2026-10-06
6
14
 
7
15
  ### Added
package/README.md CHANGED
@@ -325,6 +325,8 @@ whose markup has rules, because the sheet's box is the step itself:
325
325
  opened, a `SheetStack` sheet opened, a `Modal` arrived. Once it has settled: the field marked `data-autofocus`, else its
326
326
  first field, else its heading (a step's title, a modal's question) or, for a sheet come onto the screen, its handle. A field
327
327
  that already has the cursor keeps it. One mechanic for all of them (`focusWhenActive`, src/state.ts); an app writes no focus code.
328
+ Another field than the first: `<Field data-autofocus … />`. Off: `data-standby="off"` on any box around the part — no field
329
+ is given the cursor (the heading or the handle still is). The gallery sets it on its stories; its Cursor button (C) turns it on.
328
330
  - **The signal set — four colours, four meanings, everywhere** (Lh 2026-10-02): `--signal-ok` green (it went right) ·
329
331
  `--signal-warn` yellow (look out) · `--signal-error` red (it went wrong) · `--signal-info` blue (for your information).
330
332
  The wireframe has them too. A theme may retune a shade, never a meaning. Each is dark enough for words and edges;
package/css/tokens.css CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
  /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
88
88
  --border-w: 1.5px;
89
- --hairline-w: 1px; /* the thinnest mark: a sheet's grab line (Lh 2026-10-06) */
89
+ --hairline-w: 2px; /* the thinnest mark: a sheet's grab line (Lh 2026-10-06: 1px, then 2px the same day) */
90
90
  --rule-w: 2px; /* dotted connectors, picker rules */
91
91
  --scroll-w: 1px; /* the scrollbar of a .bleed track: a hairline of ink */
92
92
  --focus: 2px solid currentColor; /* :focus-visible ring */
package/dist/cardds.css CHANGED
@@ -127,7 +127,7 @@
127
127
 
128
128
  /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
129
129
  --border-w: 1.5px;
130
- --hairline-w: 1px; /* the thinnest mark: a sheet's grab line (Lh 2026-10-06) */
130
+ --hairline-w: 2px; /* the thinnest mark: a sheet's grab line (Lh 2026-10-06: 1px, then 2px the same day) */
131
131
  --rule-w: 2px; /* dotted connectors, picker rules */
132
132
  --scroll-w: 1px; /* the scrollbar of a .bleed track: a hairline of ink */
133
133
  --focus: 2px solid currentColor; /* :focus-visible ring */
package/dist/state.d.ts CHANGED
@@ -23,7 +23,7 @@ export declare const warnOnce: (key: string, text: string) => void;
23
23
  export declare const reducedMotion: () => boolean;
24
24
  /** give `box` the cursor once it has settled: after its own `translate` transition (600ms at most), or after `wait` ms. It lands on the field
25
25
  * marked `data-autofocus`, else the first field inside `scope` (a selector under `box`; default: all of it), else `fallback`. A field in
26
- * `box` that already has the cursor keeps it. Nothing moves the page (`preventScroll`). Returns the cancel — `true` when it had already
26
+ * `box` that already has the cursor keeps it. Inside `[data-standby="off"]` no field is looked for: `fallback` only. Nothing moves the page (`preventScroll`). Returns the cancel — `true` when it had already
27
27
  * landed (so a component can tell a move cut short from a finished one). */
28
28
  export declare function focusWhenActive(box: HTMLElement | null | undefined, { scope, fallback, wait, then }?: {
29
29
  scope?: string;
package/dist/state.js CHANGED
@@ -56,11 +56,13 @@ export const warnOnce = (key, text) => { if (!warned.has(key)) {
56
56
  /** the member asked for less motion (false where there is no window, e.g. a server render) */
57
57
  export const reducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
58
58
  /* THE RULE (Lh 2026-09-29): a part of the screen that has just become ACTIVE — a sheet come up, a step opened, a stack sheet opened, a
59
- modal asking — has its field waiting with the cursor. ONE mechanic for every such part; the component only says WHEN it became active. */
59
+ modal asking — has its field waiting with the cursor. ONE mechanic for every such part; the component only says WHEN it became active.
60
+ THE SWITCH (Lh 2026-10-06): under `data-standby="off"` (on any box around the part) no field is given the cursor — the part's
61
+ `fallback` still is. The gallery sets it: a page of many stories, each with a sheet up, is not one screen a member is typing in. */
60
62
  const FIELD = 'input:not([type=checkbox], [type=radio], [type=hidden], [disabled], [tabindex="-1"]), textarea:not([disabled]), select:not([disabled]), [contenteditable="true"]';
61
63
  /** give `box` the cursor once it has settled: after its own `translate` transition (600ms at most), or after `wait` ms. It lands on the field
62
64
  * marked `data-autofocus`, else the first field inside `scope` (a selector under `box`; default: all of it), else `fallback`. A field in
63
- * `box` that already has the cursor keeps it. Nothing moves the page (`preventScroll`). Returns the cancel — `true` when it had already
65
+ * `box` that already has the cursor keeps it. Inside `[data-standby="off"]` no field is looked for: `fallback` only. Nothing moves the page (`preventScroll`). Returns the cancel — `true` when it had already
64
66
  * landed (so a component can tell a move cut short from a finished one). */
65
67
  export function focusWhenActive(box, { scope, fallback, wait = 'translate', then } = {}) {
66
68
  if (!box)
@@ -74,8 +76,8 @@ export function focusWhenActive(box, { scope, fallback, wait = 'translate', then
74
76
  const at = document.activeElement;
75
77
  if (!(at instanceof HTMLElement && box.contains(at) && at.matches(FIELD))) {
76
78
  const root = scope ? box.querySelector(scope) : box;
77
- const target = box.querySelector('[data-autofocus]:not([inert] *)')
78
- ?? root?.querySelector(`:is(${FIELD}):not([inert] *)`) ?? fallback?.();
79
+ const target = (box.closest('[data-standby="off"]') ? null : box.querySelector('[data-autofocus]:not([inert] *)')
80
+ ?? root?.querySelector(`:is(${FIELD}):not([inert] *)`)) ?? fallback?.();
79
81
  target?.focus({ preventScroll: true });
80
82
  }
81
83
  then?.();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usableapp/cardds",
3
- "version": "0.7.62",
3
+ "version": "0.7.63",
4
4
  "license": "UNLICENSED",
5
5
  "type": "module",
6
6
  "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.",