@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 +8 -0
- package/README.md +2 -0
- package/css/tokens.css +1 -1
- package/dist/cardds.css +1 -1
- package/dist/state.d.ts +1 -1
- package/dist/state.js +6 -4
- package/package.json +1 -1
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:
|
|
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:
|
|
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.
|
|
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.",
|