@jsenv/navi 0.29.101 → 0.29.102
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/dist/jsenv_navi.js +343 -33
- package/dist/jsenv_navi.js.map +18 -15
- package/docs/control_group.md +14 -9
- package/docs/interactions.md +14 -0
- package/docs/z_index.md +8 -8
- package/package.json +1 -1
package/docs/control_group.md
CHANGED
|
@@ -47,14 +47,19 @@ Live examples: `src/control/demos/15_group_demo.html`.
|
|
|
47
47
|
last one loses it on the other side, and any member in between loses all
|
|
48
48
|
four. A single member keeps its own radius — a group of one looks like the
|
|
49
49
|
control alone. The ask is made twice, in two forms — see below.
|
|
50
|
-
- **Overlap order**: the member under the pointer,
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
50
|
+
- **Overlap order**: the member under the pointer, the member showing a focus
|
|
51
|
+
ring, and the member holding something open (`aria-expanded="true"`) paint
|
|
52
|
+
above their neighbours (`position: relative` plus
|
|
53
|
+
`--navi-z-index-control-hovered` / `-focused` / `-expanded`). Without it the
|
|
54
|
+
border color change and the focus ring of the active member would be sliced
|
|
55
|
+
by whichever neighbour is painted after it. The focused member is matched
|
|
56
|
+
whether it wears `data-focus-visible` itself or merely contains it — a
|
|
57
|
+
control that wraps a real input (`Picker`, `Spin`) draws the ring on its own
|
|
58
|
+
frame while the keyboard is held inside; the expanded member is matched the
|
|
59
|
+
same way, since it can be wrapped in an enrobage. Expanded ranks highest: a
|
|
60
|
+
`Picker` opened by a click shows no focus ring, hands the focus to its popup
|
|
61
|
+
and lets the pointer travel to a neighbour, yet its border keeps saying it is
|
|
62
|
+
the one open. There is deliberately no `isolation: isolate` — see
|
|
58
63
|
[z_index.md](./z_index.md).
|
|
59
64
|
|
|
60
65
|
Nothing else: a group does not restyle its members, does not impose a size,
|
|
@@ -113,7 +118,7 @@ opened it. `Popover` and `Dialog` stop it too, at their own root: nothing a
|
|
|
113
118
|
popup holds is at a seam.
|
|
114
119
|
|
|
115
120
|
Reference: `.navi_button_content` in `button_ui.jsx` (a button reads then
|
|
116
|
-
stops), `.
|
|
121
|
+
stops), `.navi_picker_box`, `.navi_input_slot`, `.navi_popover`,
|
|
117
122
|
`.navi_dialog`.
|
|
118
123
|
|
|
119
124
|
A control that declares its radius on an inner element instead is invisible to
|
package/docs/interactions.md
CHANGED
|
@@ -105,6 +105,20 @@ interaction happened, and nothing runs. A `Box` with no control anywhere near it
|
|
|
105
105
|
still answers a callback; only `"request_action"` has nothing to ask, and says so
|
|
106
106
|
in dev.
|
|
107
107
|
|
|
108
|
+
The one thing the gate weighs besides the control's state is what the
|
|
109
|
+
interaction would do to it. Everything writes unless it says otherwise; an
|
|
110
|
+
interaction that only shows what is already there declares `intent: "read"`, and
|
|
111
|
+
a control held read-only lets that one through. That is how a read-only
|
|
112
|
+
`<Picker>` still opens: the popup is where its answer is really drawn, so it
|
|
113
|
+
opens and everything inside it is held read-only in turn. Disabled and busy go
|
|
114
|
+
on refusing either way — one is out of service, the other is mid-operation, and
|
|
115
|
+
neither has anything to show.
|
|
116
|
+
|
|
117
|
+
Which controls let a read through is theirs to say, not the caller's: a picker
|
|
118
|
+
with no popup of its own opens the browser's, which cannot be held read-only, so
|
|
119
|
+
that one refuses. `openWhileReadOnly={false}` is how a caller says the popup is
|
|
120
|
+
a form with nothing to read.
|
|
121
|
+
|
|
108
122
|
## What a swipe draws, and what it leaves to you
|
|
109
123
|
|
|
110
124
|
navi makes the element follow the finger — there is nothing to decide about
|
package/docs/z_index.md
CHANGED
|
@@ -74,14 +74,14 @@ file is the overview, this table is its summary. Bands are a decade apart so
|
|
|
74
74
|
one can grow without reaching the next, and so a value seen in devtools says
|
|
75
75
|
which band it came from.
|
|
76
76
|
|
|
77
|
-
| Band | Token
|
|
78
|
-
| ----------------------------------------------------------------------------------------------------------------------------------- |
|
|
79
|
-
| Top layer (`Dialog`/`Popover` with `layer="top"`) | —
|
|
80
|
-
| `Dialog`/`Popover` with `layer="local"`, their backdrop, callouts | `--navi-z-index-popup`, `--navi-z-index-callout`
|
|
81
|
-
| `FixedBar` | `--navi-z-index-bar`
|
|
82
|
-
| Sticky while something scrolls under: `List` header/footer/group labels, `SidePanel` head/foot, `Box` header/footer, `<Box sticky>` | `--navi-z-index-sticky`
|
|
83
|
-
| A `Group` member under the pointer, then the one holding focus
|
|
84
|
-
| `Table` sticky cells, drag, resize | `src/control/table/z_indexes.js`
|
|
77
|
+
| Band | Token | Value |
|
|
78
|
+
| ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ---------------------------- |
|
|
79
|
+
| Top layer (`Dialog`/`Popover` with `layer="top"`) | — | above everything |
|
|
80
|
+
| `Dialog`/`Popover` with `layer="local"`, their backdrop, callouts | `--navi-z-index-popup`, `--navi-z-index-callout` | 1000 `+ stack order` |
|
|
81
|
+
| `FixedBar` | `--navi-z-index-bar` | 100 |
|
|
82
|
+
| Sticky while something scrolls under: `List` header/footer/group labels, `SidePanel` head/foot, `Box` header/footer, `<Box sticky>` | `--navi-z-index-sticky` | 10 |
|
|
83
|
+
| A `Group` member under the pointer, then the one holding focus, then the one holding a popup open | `--navi-z-index-control-hovered`, `--navi-z-index-control-focused`, `--navi-z-index-control-expanded` | 1, 2, 3 |
|
|
84
|
+
| `Table` sticky cells, drag, resize | `src/control/table/z_indexes.js` | 1–7, derived from each other |
|
|
85
85
|
|
|
86
86
|
What to read from it:
|
|
87
87
|
|