@jsenv/navi 0.29.474 → 0.29.476

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.
@@ -124,15 +124,31 @@ screen has not asked for it to swap places with whatever it flew over.
124
124
  | Attribute | Meaning |
125
125
  | -------------------------------------------------------- | -------------------------------------- |
126
126
  | `data-drag-axis="x"\|"y"\|"xy"` | which axes the drag walks |
127
+ | `data-reorder-flow="column"\|"row"\|"wrap"` | how the items of a list are laid out |
127
128
  | `data-drag-delay` `data-drag-slop` `data-drag-threshold` | when the press becomes a grab |
128
129
  | `data-drag-on-contact` | a finger may drag by travelling too |
129
130
  | `data-drag-free` | it may leave its scroll area |
130
131
  | `data-toss-distance` `data-toss-speed` | how far and how fast counts as a throw |
131
132
  | `data-drop-container` | where the places are looked for |
132
133
 
133
- `data-drag-axis` is `y` for a `reorder` with no `land`, `toss` or `leave` beside
134
- it — it walks the list; a list that runs sideways says `x` — and `xy` for
135
- everything else, which goes wherever the hand takes it.
134
+ **How the items of a list are laid out**, `data-reorder-flow` on the list or
135
+ any ancestor: `column`, one under the other; `row`, side by side on one line;
136
+ `wrap`, side by side over as many lines as it takes — inline-blocks, a
137
+ `flex-wrap`, a grid. A row runs in the writing direction of its list. Said
138
+ nothing, it is read from where the items stand: one level with the next makes a
139
+ row, and which of the two is on the left says which way it runs.
140
+
141
+ It decides which side of an item the copy goes. Down a column, by how far down
142
+ the copy is. Along a row, wrapped or not, by how far across its middle is,
143
+ whatever the widths of the two: let go over the far half of an item, it goes
144
+ after it. How high it is only says which line: beside the items, above or below
145
+ them, it goes on the nearest line where its middle is, the way a click puts the
146
+ caret in a text.
147
+
148
+ `data-drag-axis` follows it for a `reorder` with no `land`, `toss` or `leave`
149
+ beside it — the copy walks the list: `y` down a column (also when nothing is
150
+ said), `x` along a row, `xy` for a row that wraps, its copy changing line — and
151
+ is `xy` for everything else, which goes wherever the hand takes it.
136
152
 
137
153
  ### While it is being moved: `moving`
138
154
 
@@ -336,7 +352,10 @@ it.
336
352
  The drop hint follows what a place is: a line drawn in the gap for `reorder`, the
337
353
  place itself lit up for `land`. Both are drawn among the places — the parent, or
338
354
  the `data-drop-container` — so the variables dressing them are set on the list,
339
- the board or the surface and reach them by inheritance:
355
+ the board or the surface and reach them by inheritance. Along a row the line
356
+ stands upright, as tall as the item, and each margin keeps its axis:
357
+ `--drop-hint-margin-y` takes it into the gap down a list, `--drop-hint-margin-x`
358
+ along a row, and the other one shortens it.
340
359
 
341
360
  | Variable | Dresses |
342
361
  | ------------------------------------------------------------------------------------------ | ----------------------- |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jsenv/navi",
3
- "version": "0.29.474",
3
+ "version": "0.29.476",
4
4
  "type": "module",
5
5
  "description": "Library of components including navigation to create frontend applications",
6
6
  "repository": {
@@ -34,7 +34,7 @@
34
34
  "preact": "^11.0.0-rc.2"
35
35
  },
36
36
  "dependencies": {
37
- "@jsenv/dom": "0.17.92",
37
+ "@jsenv/dom": "0.17.94",
38
38
  "@jsenv/humanize": "1.8.7",
39
39
  "@jsenv/validity": "0.4.5"
40
40
  },