@jsenv/navi 0.29.387 → 0.29.388

package/docs/testid.md

@@ -85,7 +85,9 @@ found by nothing, while the host is what the user focuses and what
 `getByRole(role, { name })` and `getByLabel()` read.
 
 ```jsx
-<Picker variant="icon" aria-label="Aide" ui={<Icon>…</Icon>} />
+<Picker variant="icon" aria-label="Aide" ui={<Icon>…</Icon>}>
+  …
+</Picker>
 ```
 
 ```html
@@ -122,6 +124,13 @@ error message, a section, a row — put the testid on the surrounding component
 (`<Field data-testid="email-field">`, `<Box data-testid="cart-row">`); anything
 built on `Box` forwards it to its own element.
 
+A selectable `List.Item` is a control too, and the rule holds there with a
+consequence worth knowing: its host is the real checkbox or radio the row
+selects with, an input navi draws invisible (`navi-visually-hidden`) and lays
+under the row's content. A `data-testid` on the item names that input — what
+`toBeChecked()` reads, not what the eye sees. A test that presses the row, or
+waits for it to show, targets what the row draws: a testid on its content.
+
 A picker's popup is the one element the application does not render itself:
 `<Picker>` builds it, so a `data-testid` on the picker names the trigger and
 nothing names the popup. `popupTestId` does:

package/docs/typography.md

@@ -84,7 +84,7 @@ The prop is the same everywhere: a number of lines, cut with an ellipsis.
 - **`Picker`** — its value, `maxLines={1}` by default; `variant="text"` and
   `variant="bare"` draw the caller's own thing and are not clamped, a `Text` in
   their `ui` cuts itself with its own `maxLines`.
-- **`PickerSpin`** (`DaySpin`, `TimeSpin`…) — its value; left out, a long value
+- **`Spin`** (`DaySpin`, `NumberSpin`…) — its value; left out, a long value
   wraps and the box grows.
 - **`Binder`** — its tab labels, `maxLines={1}` by default, `false` lets them
   wrap; overridable per item.
@@ -104,9 +104,8 @@ width must say it too**, or the whole chain grows instead of truncating:
 
 ```jsx
 <Box flex width="300" spacing="s">
+  {/* without minWidth the row just grows */}
   <Box flex expandX minWidth="0">
-    {" "}
-    {/* without minWidth the row just grows */}
     <Text maxLines={1}>…</Text>
   </Box>
 </Box>

package/docs/view_transitions.md

@@ -75,15 +75,6 @@ does not handle a rejection, an unhandled one is what it leaves behind, and
 `.then(done, done)` is the shape that ends it whichever way it went — while a
 `ready` waiter must expect the skip: `ready.then(onPictures, () => {})`.
 
-## See also
-
-- [route_transitions.md](./route_transitions.md) — pages moving against each
-  other on navigation
-- [drag_to_travel.md](./drag_to_travel.md) — a transition held under a finger,
-  and what the main thread cannot read of it
-- [drag_interactions.md](./drag_interactions.md#naming-what-travels) — naming
-  what moves when something is dropped on a place
-
 ## The top layer is painted through the root's picture
 
 A modal `<dialog>`, its `::backdrop`, a popover: the browser paints the top
@@ -137,3 +128,12 @@ Two consequences for the switch itself:
   `display` on: hidden before the call, a stand-in measures as a zero rect and
   lands in the wrong place; and on the capture frame it is displayed while the
   real thing is still there.
+
+## See also
+
+- [route_transitions.md](./route_transitions.md) — pages moving against each
+  other on navigation
+- [drag_to_travel.md](./drag_to_travel.md) — a transition held under a finger,
+  and what the main thread cannot read of it
+- [drag_interactions.md](./drag_interactions.md#naming-what-travels) — naming
+  what moves when something is dropped on a place

package/docs/z_index.md

@@ -77,6 +77,7 @@ which band it came from.
 | Band                                                                                                                                | Token                                                                                                 | Value                        |
 | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ---------------------------- |
 | Top layer (`Dialog`/`Popover` with `layer="top"`)                                                                                   | —                                                                                                     | above everything             |
+| A modal's wall painted into the page for the length of a route transition, standing in for the top layer                            | `--navi-z-index-top-layer`                                                                            | 10000                        |
 | `Dialog`/`Popover` with `layer="local"`, their backdrop, callouts                                                                   | `--navi-z-index-popup`, `--navi-z-index-callout`                                                      | 1000 `+ stack order`         |
 | `FixedBar`                                                                                                                          | `--navi-z-index-bar`                                                                                  | 100                          |
 | Sticky while something scrolls under: `List` header/footer/group labels, `SidePanel` head/foot, `Box` header/footer, `<Box sticky>` | `--navi-z-index-sticky`                                                                               | 10                           |
@@ -103,7 +104,7 @@ What to read from it:
 the second half of that sentence is a condition, not decoration. A `List` group
 label at rest is a block in the flow: nothing passes under it, and painting it
 at 10 there is what slices a focus ring, a badge or a stamp that a neighbouring
-row lets out of its box — including a `Group` member raising itself to 1 or 2.
+row lets out of its box — including a `Group` member raising itself to 1, 2 or 3.
 
 CSS cannot express the condition. There is no `:stuck`, and
 `@container scroll-state(stuck: top)` styles a container's **descendants**, so
@@ -164,7 +165,7 @@ page raised passes in front of it — a `Group` member holding focus is at 2, so
 it is seen crossing a submit bar the box was written to keep last. DOM order
 cannot answer that (2 beats `auto` whatever the order) and `isolation: isolate`
 neither (the common parent holds both, isolating it does not reorder them), so
-before this the app had no move left but a literal of its own.
+without the band the app would have no move left but a literal of its own.
 
 An explicit `zIndex` wins, `zIndex="auto"` included — the way
 `--box-header-z-index` writes the band back at a call site that knows better:
@@ -181,10 +182,10 @@ to paint over its neighbour — otherwise its focus ring is sliced in half by th
 member that comes after it in the DOM. DOM order cannot express "whichever one
 is hovered", so this is a legitimate `z-index`.
 
-`isolation: isolate` on the group would contain those two values, but it would
+`isolation: isolate` on the group would contain those values, but it would
 also contain the popup of a `Picker` held in the group: its 1000 would become
 local, and the popup would be capped inside the group instead of covering the
-page. So the group is deliberately not isolated, and what keeps its 1 and 2
+page. So the group is deliberately not isolated, and what keeps its 1, 2 and 3
 harmless is the scale above them.
 
 ## A card that stacks three layers with no `z-index`
@@ -209,4 +210,4 @@ above everything — DOM order alone, in painting order:
 The only positioning trick here is `position: relative` on the content: a
 positioned element paints above a non-positioned one regardless of order, so
 the content has to be positioned too to stay above the cover link. `isolation`
-is there for what the card's children may do later, not for this file.
+is there for what the card's children may do later, not for this example.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.29.387",
+  "version": "0.29.388",
   "type": "module",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
@@ -34,7 +34,7 @@
     "preact": "^11.0.0-rc.2"
   },
   "dependencies": {
-    "@jsenv/dom": "0.17.71",
+    "@jsenv/dom": "0.17.72",
     "@jsenv/humanize": "1.8.5",
     "@jsenv/validity": "0.4.5"
   },