@jsenv/navi 0.29.474 → 0.29.475

package/docs/drag_interactions.md

@@ -124,15 +124,29 @@ screen has not asked for it to swap places with whatever it flew over.
 | Attribute                                                | Meaning                                |
 | -------------------------------------------------------- | -------------------------------------- |
 | `data-drag-axis="x"\|"y"\|"xy"`                          | which axes the drag walks              |
+| `data-reorder-flow="column"\|"row"\|"wrap"`              | how the items of a list are laid out   |
 | `data-drag-delay` `data-drag-slop` `data-drag-threshold` | when the press becomes a grab          |
 | `data-drag-on-contact`                                   | a finger may drag by travelling too    |
 | `data-drag-free`                                         | it may leave its scroll area           |
 | `data-toss-distance` `data-toss-speed`                   | how far and how fast counts as a throw |
 | `data-drop-container`                                    | where the places are looked for        |
 
-`data-drag-axis` is `y` for a `reorder` with no `land`, `toss` or `leave` beside
-it — it walks the list; a list that runs sideways says `x` — and `xy` for
-everything else, which goes wherever the hand takes it.
+**How the items of a list are laid out**, `data-reorder-flow` on the list or
+any ancestor: `column`, one under the other; `row`, side by side on one line;
+`wrap`, side by side over as many lines as it takes — inline-blocks, a
+`flex-wrap`, a grid. A row runs in the writing direction of its list. Said
+nothing, it is read from where the items stand: one level with the next makes a
+row, and which of the two is on the left says which way it runs.
+
+It decides which side of an item the copy goes. Down a column, by how far down
+the copy is. Along a row, wrapped or not, by how far across its middle is,
+whatever the widths of the two: let go over the far half of an item, it goes
+after it; how high it is says nothing there.
+
+`data-drag-axis` follows it for a `reorder` with no `land`, `toss` or `leave`
+beside it — the copy walks the list: `y` down a column (also when nothing is
+said), `x` along a row, `xy` for a row that wraps, its copy changing line — and
+is `xy` for everything else, which goes wherever the hand takes it.
 
 ### While it is being moved: `moving`
 
@@ -336,7 +350,10 @@ it.
 The drop hint follows what a place is: a line drawn in the gap for `reorder`, the
 place itself lit up for `land`. Both are drawn among the places — the parent, or
 the `data-drop-container` — so the variables dressing them are set on the list,
-the board or the surface and reach them by inheritance:
+the board or the surface and reach them by inheritance. Along a row the line
+stands upright, as tall as the item, and each margin keeps its axis:
+`--drop-hint-margin-y` takes it into the gap down a list, `--drop-hint-margin-x`
+along a row, and the other one shortens it.
 
 | Variable                                                                                   | Dresses                 |
 | ------------------------------------------------------------------------------------------ | ----------------------- |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.29.474",
+  "version": "0.29.475",
   "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.92",
+    "@jsenv/dom": "0.17.93",
     "@jsenv/humanize": "1.8.7",
     "@jsenv/validity": "0.4.5"
   },