@excom/gesture-handler 0.1.0
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/.rush/temp/chunked-rush-logs/gesture-handler.apply-exports.chunks.jsonl +1 -0
- package/.rush/temp/chunked-rush-logs/gesture-handler.build_docs.chunks.jsonl +1 -0
- package/.rush/temp/chunked-rush-logs/gesture-handler.build_package-metas.chunks.jsonl +1 -0
- package/.rush/temp/operation/apply-exports/all.log +1 -0
- package/.rush/temp/operation/apply-exports/log-chunks.jsonl +1 -0
- package/.rush/temp/operation/apply-exports/state.json +3 -0
- package/.rush/temp/operation/build_docs/all.log +1 -0
- package/.rush/temp/operation/build_docs/log-chunks.jsonl +1 -0
- package/.rush/temp/operation/build_docs/state.json +3 -0
- package/.rush/temp/operation/build_package-metas/all.log +1 -0
- package/.rush/temp/operation/build_package-metas/log-chunks.jsonl +1 -0
- package/.rush/temp/operation/build_package-metas/state.json +3 -0
- package/.rush/temp/shrinkwrap-deps.json +3 -0
- package/config/rig.json +6 -0
- package/gesture-handler.ts +1211 -0
- package/index.css +5 -0
- package/index.ts +29 -0
- package/package.json +52 -0
- package/rush-logs/gesture-handler.apply-exports.cache.log +1 -0
- package/rush-logs/gesture-handler.apply-exports.log +1 -0
- package/rush-logs/gesture-handler.build_docs.cache.log +1 -0
- package/rush-logs/gesture-handler.build_docs.log +1 -0
- package/rush-logs/gesture-handler.build_package-metas.cache.log +1 -0
- package/rush-logs/gesture-handler.build_package-metas.log +1 -0
- package/src/gesture-handler.css +207 -0
- package/support/custom-elements.json +989 -0
- package/support/demos/carousel.html +44 -0
- package/support/demos/pinch.html +10 -0
- package/support/demos/sheet.html +50 -0
- package/support/demos/swipe.html +24 -0
- package/support/dist-docs/gesture-handler.md +339 -0
- package/support/docs/README.md +92 -0
- package/support/package-meta.json +489 -0
- package/support/tests/carousel.view.test.ts +67 -0
- package/support/tests/gesture-handler.test.ts +625 -0
- package/support/tests/pointer-utils.ts +62 -0
- package/support/tests/sheet.view.test.ts +112 -0
- package/support/tests/swipe.view.test.ts +44 -0
- package/tsconfig.json +5 -0
|
@@ -0,0 +1,989 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"modules": [
|
|
4
|
+
{
|
|
5
|
+
"kind": "javascript-module",
|
|
6
|
+
"path": "gesture-handler.ts",
|
|
7
|
+
"declarations": [
|
|
8
|
+
{
|
|
9
|
+
"kind": "class",
|
|
10
|
+
"name": "GestureHandler",
|
|
11
|
+
"customElement": true,
|
|
12
|
+
"tagName": "gesture-handler",
|
|
13
|
+
"summary": "Swipe / pan / pinch / tap recognition as events + CSS variables.",
|
|
14
|
+
"description": "One gesture frame, written every frame as `--gesture-<kebab key>` on the element (`dx` → `--gesture-dx`). Everything derivable from these (`--gesture-distance`, `-angle`, `-progress-px`, `-x-ratio`, `-y-ratio`) is a CSS declaration, not a JS write.",
|
|
15
|
+
"attributes": [
|
|
16
|
+
{
|
|
17
|
+
"name": "gesture-types",
|
|
18
|
+
"type": {
|
|
19
|
+
"text": "tokenlist"
|
|
20
|
+
},
|
|
21
|
+
"description": "Gestures to recognize. `pan-x` / `pan-y` one axis (other stays native scroll); `pan` both; `pinch` / `rotate` need two fingers; `swipe` velocity on release; `tap` / `double-tap` / `long-press` fire events.",
|
|
22
|
+
"fieldName": "gestureTypes",
|
|
23
|
+
"default": "pan",
|
|
24
|
+
"values": [
|
|
25
|
+
"pan",
|
|
26
|
+
"pan-x",
|
|
27
|
+
"pan-y",
|
|
28
|
+
"pinch",
|
|
29
|
+
"rotate",
|
|
30
|
+
"swipe",
|
|
31
|
+
"tap",
|
|
32
|
+
"double-tap",
|
|
33
|
+
"long-press"
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "from-ref",
|
|
38
|
+
"type": {
|
|
39
|
+
"text": "string"
|
|
40
|
+
},
|
|
41
|
+
"description": "Only start when pointerdown is inside this descendant (`:scope`-relative selector) — a drag handle, the sheet itself. Combined with `from-edge`, either qualifies.",
|
|
42
|
+
"fieldName": "fromRef",
|
|
43
|
+
"values": [
|
|
44
|
+
"<CSS Selector>"
|
|
45
|
+
]
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "from-edge",
|
|
49
|
+
"type": {
|
|
50
|
+
"text": "tokenlist"
|
|
51
|
+
},
|
|
52
|
+
"description": "Only start within `edge-px` of these edges — edge swipes (back nav, pulling a closed sheet up).",
|
|
53
|
+
"fieldName": "fromEdge",
|
|
54
|
+
"values": [
|
|
55
|
+
"left",
|
|
56
|
+
"right",
|
|
57
|
+
"top",
|
|
58
|
+
"bottom"
|
|
59
|
+
]
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"name": "edge-px",
|
|
63
|
+
"type": {
|
|
64
|
+
"text": "number"
|
|
65
|
+
},
|
|
66
|
+
"description": "Width of `from-edge` start zone (px).",
|
|
67
|
+
"fieldName": "edgePx",
|
|
68
|
+
"default": 40
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"name": "handoff-ref",
|
|
72
|
+
"type": {
|
|
73
|
+
"text": "string"
|
|
74
|
+
},
|
|
75
|
+
"description": "Scroll containers that hand overscroll to the gesture (`:scope`-relative selector, comma list matches several) — e.g. a sheet closed by pulling its own content down. Pointerdown inside one scrolls natively; gesture takes over only when first move runs along `progress-axis`, container is at that scroll limit, and `progress-offset` still has room that way. Additive to `from-ref` / `from-edge`.",
|
|
76
|
+
"fieldName": "handoffRef",
|
|
77
|
+
"values": [
|
|
78
|
+
"<CSS Selector>"
|
|
79
|
+
]
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"name": "pointer-types",
|
|
83
|
+
"type": {
|
|
84
|
+
"text": "tokenlist"
|
|
85
|
+
},
|
|
86
|
+
"description": "Pointer types that can start a gesture. Add `mouse` for desktop drag.",
|
|
87
|
+
"fieldName": "pointerTypes",
|
|
88
|
+
"default": "touch pen",
|
|
89
|
+
"values": [
|
|
90
|
+
"touch",
|
|
91
|
+
"pen",
|
|
92
|
+
"mouse"
|
|
93
|
+
]
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"name": "max-pointers",
|
|
97
|
+
"type": {
|
|
98
|
+
"text": "number"
|
|
99
|
+
},
|
|
100
|
+
"description": "Extra pointers beyond this many are ignored. Unset = `2` when `pinch` / `rotate` listed, else `1`.",
|
|
101
|
+
"fieldName": "maxPointers"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"name": "threshold-px",
|
|
105
|
+
"type": {
|
|
106
|
+
"text": "number"
|
|
107
|
+
},
|
|
108
|
+
"description": "Movement (px) before a pan is recognized. Taps / native scroll stay untouched below it.",
|
|
109
|
+
"fieldName": "thresholdPx",
|
|
110
|
+
"default": 8
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"name": "lock-axis",
|
|
114
|
+
"type": {
|
|
115
|
+
"text": "boolean"
|
|
116
|
+
},
|
|
117
|
+
"description": "A free `pan` locks to its dominant axis once recognized (`gesture-type` becomes `pan-x` / `pan-y`).",
|
|
118
|
+
"fieldName": "lockAxis"
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"name": "arm-after",
|
|
122
|
+
"type": {
|
|
123
|
+
"text": "string"
|
|
124
|
+
},
|
|
125
|
+
"description": "Pans only arm after this gesture — `long-press` for hold-then-drag.",
|
|
126
|
+
"fieldName": "armAfter",
|
|
127
|
+
"values": [
|
|
128
|
+
"long-press"
|
|
129
|
+
]
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"name": "long-press-ms",
|
|
133
|
+
"type": {
|
|
134
|
+
"text": "number"
|
|
135
|
+
},
|
|
136
|
+
"description": "Hold time (ms) for `long-press`; also tap time limit.",
|
|
137
|
+
"fieldName": "longPressMs",
|
|
138
|
+
"default": 500
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"name": "double-tap-ms",
|
|
142
|
+
"type": {
|
|
143
|
+
"text": "number"
|
|
144
|
+
},
|
|
145
|
+
"description": "Max gap (ms) between taps for `double-tap`.",
|
|
146
|
+
"fieldName": "doubleTapMs",
|
|
147
|
+
"default": 300
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"name": "swipe-min-velocity",
|
|
151
|
+
"type": {
|
|
152
|
+
"text": "number"
|
|
153
|
+
},
|
|
154
|
+
"description": "Release velocity (px/ms) that counts as a swipe.",
|
|
155
|
+
"fieldName": "swipeMinVelocity",
|
|
156
|
+
"default": 0.5
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"name": "swipe-directions",
|
|
160
|
+
"type": {
|
|
161
|
+
"text": "tokenlist"
|
|
162
|
+
},
|
|
163
|
+
"description": "Swipe directions to report. Unset = all four.",
|
|
164
|
+
"fieldName": "swipeDirections",
|
|
165
|
+
"values": [
|
|
166
|
+
"left",
|
|
167
|
+
"right",
|
|
168
|
+
"up",
|
|
169
|
+
"down"
|
|
170
|
+
]
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
"name": "progress-axis",
|
|
174
|
+
"type": {
|
|
175
|
+
"text": "string"
|
|
176
|
+
},
|
|
177
|
+
"description": "Direction `--gesture-progress` grows. Unset = `down` for a `pan-y`-only element, else `right`.",
|
|
178
|
+
"fieldName": "progressAxis",
|
|
179
|
+
"values": [
|
|
180
|
+
"up",
|
|
181
|
+
"down",
|
|
182
|
+
"left",
|
|
183
|
+
"right"
|
|
184
|
+
]
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"name": "range-ref",
|
|
188
|
+
"type": {
|
|
189
|
+
"text": "string"
|
|
190
|
+
},
|
|
191
|
+
"description": "Element whose size along `progress-axis` is the range of `progress` `0`..`1` (`:scope`-relative, read once per gesture) — sheet being dragged, slide being swiped.",
|
|
192
|
+
"fieldName": "rangeRef",
|
|
193
|
+
"values": [
|
|
194
|
+
"<CSS Selector>"
|
|
195
|
+
]
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"name": "range-px",
|
|
199
|
+
"type": {
|
|
200
|
+
"text": "number"
|
|
201
|
+
},
|
|
202
|
+
"description": "Literal range (px) instead of `range-ref`.",
|
|
203
|
+
"fieldName": "rangePx"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"name": "progress-min",
|
|
207
|
+
"type": {
|
|
208
|
+
"text": "number"
|
|
209
|
+
},
|
|
210
|
+
"description": "Lower bound of `progress`.",
|
|
211
|
+
"fieldName": "progressMin",
|
|
212
|
+
"default": 0
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"name": "progress-max",
|
|
216
|
+
"type": {
|
|
217
|
+
"text": "number"
|
|
218
|
+
},
|
|
219
|
+
"description": "Upper bound of `progress`.",
|
|
220
|
+
"fieldName": "progressMax",
|
|
221
|
+
"default": 1
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
"name": "progress-offset",
|
|
225
|
+
"type": {
|
|
226
|
+
"text": "number"
|
|
227
|
+
},
|
|
228
|
+
"description": "Progress the gesture starts from. Set from a rule that reads the driven element's state (`1` while a sheet is open) so dragging it closed starts full.",
|
|
229
|
+
"fieldName": "progressOffset",
|
|
230
|
+
"default": 0
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"name": "overshoot-resistance",
|
|
234
|
+
"type": {
|
|
235
|
+
"text": "number"
|
|
236
|
+
},
|
|
237
|
+
"description": "Rubber-band past `progress-min` / `progress-max`: `0` clamps, `0.3` overshoots at a third of travel.",
|
|
238
|
+
"fieldName": "overshootResistance",
|
|
239
|
+
"default": 0
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"name": "snap-points",
|
|
243
|
+
"type": {
|
|
244
|
+
"text": "tokenlist"
|
|
245
|
+
},
|
|
246
|
+
"description": "Progress values to settle on after release (`0 0.5 1`). Target picked from position, fling velocity and swipe direction, reported as `detail.snap` on `-end`, settled on by the default action (a CSS transition, `--gesture-snap-duration` / `--gesture-snap-ease`).",
|
|
247
|
+
"fieldName": "snapPoints",
|
|
248
|
+
"values": [
|
|
249
|
+
"<number>…"
|
|
250
|
+
]
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
"name": "should-emit-move",
|
|
254
|
+
"type": {
|
|
255
|
+
"text": "boolean"
|
|
256
|
+
},
|
|
257
|
+
"description": "Fire `gesture-handler-move` every frame. Off by default; `--gesture-*` is enough for CSS.",
|
|
258
|
+
"fieldName": "shouldEmitMove"
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"name": "is-disabled",
|
|
262
|
+
"type": {
|
|
263
|
+
"text": "boolean"
|
|
264
|
+
},
|
|
265
|
+
"description": "Ignore new pointers; a gesture in progress is cancelled. State-driven veto.",
|
|
266
|
+
"fieldName": "isDisabled"
|
|
267
|
+
},
|
|
268
|
+
{
|
|
269
|
+
"name": "is-active",
|
|
270
|
+
"type": {
|
|
271
|
+
"text": "boolean"
|
|
272
|
+
},
|
|
273
|
+
"description": "A pointer is down on the surface. Set from first pointer until release, so it also covers taps and pre-threshold phase.",
|
|
274
|
+
"fieldName": "isActive"
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
"name": "gesture-type",
|
|
278
|
+
"type": {
|
|
279
|
+
"text": "string"
|
|
280
|
+
},
|
|
281
|
+
"description": "Recognized gesture in progress, unset before recognition and after release.",
|
|
282
|
+
"fieldName": "gestureType",
|
|
283
|
+
"values": [
|
|
284
|
+
"pan",
|
|
285
|
+
"pan-x",
|
|
286
|
+
"pan-y",
|
|
287
|
+
"pinch",
|
|
288
|
+
"rotate"
|
|
289
|
+
]
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
"name": "pointer-count",
|
|
293
|
+
"type": {
|
|
294
|
+
"text": "number"
|
|
295
|
+
},
|
|
296
|
+
"description": "Pointers currently down.",
|
|
297
|
+
"fieldName": "pointerCount"
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"name": "gesture-direction",
|
|
301
|
+
"type": {
|
|
302
|
+
"text": "string"
|
|
303
|
+
},
|
|
304
|
+
"description": "Dominant travel direction of gesture in progress.",
|
|
305
|
+
"fieldName": "gestureDirection",
|
|
306
|
+
"values": [
|
|
307
|
+
"left",
|
|
308
|
+
"right",
|
|
309
|
+
"up",
|
|
310
|
+
"down"
|
|
311
|
+
]
|
|
312
|
+
},
|
|
313
|
+
{
|
|
314
|
+
"name": "last-gesture",
|
|
315
|
+
"type": {
|
|
316
|
+
"text": "string"
|
|
317
|
+
},
|
|
318
|
+
"description": "What last gesture turned out to be — style a \"just swiped\" state from it.",
|
|
319
|
+
"fieldName": "lastGesture",
|
|
320
|
+
"values": [
|
|
321
|
+
"pan",
|
|
322
|
+
"pan-x",
|
|
323
|
+
"pan-y",
|
|
324
|
+
"pinch",
|
|
325
|
+
"rotate",
|
|
326
|
+
"swipe-left",
|
|
327
|
+
"swipe-right",
|
|
328
|
+
"swipe-up",
|
|
329
|
+
"swipe-down",
|
|
330
|
+
"tap",
|
|
331
|
+
"double-tap",
|
|
332
|
+
"long-press"
|
|
333
|
+
]
|
|
334
|
+
}
|
|
335
|
+
],
|
|
336
|
+
"members": [
|
|
337
|
+
{
|
|
338
|
+
"kind": "field",
|
|
339
|
+
"name": "gestureTypes",
|
|
340
|
+
"type": {
|
|
341
|
+
"text": "tokenlist"
|
|
342
|
+
},
|
|
343
|
+
"privacy": "public",
|
|
344
|
+
"readonly": false,
|
|
345
|
+
"description": "Gestures to recognize. `pan-x` / `pan-y` one axis (other stays native scroll); `pan` both; `pinch` / `rotate` need two fingers; `swipe` velocity on release; `tap` / `double-tap` / `long-press` fire events.",
|
|
346
|
+
"default": "pan",
|
|
347
|
+
"_neutron": {
|
|
348
|
+
"surface": "option"
|
|
349
|
+
}
|
|
350
|
+
},
|
|
351
|
+
{
|
|
352
|
+
"kind": "field",
|
|
353
|
+
"name": "fromRef",
|
|
354
|
+
"type": {
|
|
355
|
+
"text": "string"
|
|
356
|
+
},
|
|
357
|
+
"privacy": "public",
|
|
358
|
+
"readonly": false,
|
|
359
|
+
"description": "Only start when pointerdown is inside this descendant (`:scope`-relative selector) — a drag handle, the sheet itself. Combined with `from-edge`, either qualifies.",
|
|
360
|
+
"_neutron": {
|
|
361
|
+
"surface": "option"
|
|
362
|
+
}
|
|
363
|
+
},
|
|
364
|
+
{
|
|
365
|
+
"kind": "field",
|
|
366
|
+
"name": "fromEdge",
|
|
367
|
+
"type": {
|
|
368
|
+
"text": "tokenlist"
|
|
369
|
+
},
|
|
370
|
+
"privacy": "public",
|
|
371
|
+
"readonly": false,
|
|
372
|
+
"description": "Only start within `edge-px` of these edges — edge swipes (back nav, pulling a closed sheet up).",
|
|
373
|
+
"_neutron": {
|
|
374
|
+
"surface": "option"
|
|
375
|
+
}
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"kind": "field",
|
|
379
|
+
"name": "edgePx",
|
|
380
|
+
"type": {
|
|
381
|
+
"text": "number"
|
|
382
|
+
},
|
|
383
|
+
"privacy": "public",
|
|
384
|
+
"readonly": false,
|
|
385
|
+
"description": "Width of `from-edge` start zone (px).",
|
|
386
|
+
"default": 40,
|
|
387
|
+
"_neutron": {
|
|
388
|
+
"surface": "option"
|
|
389
|
+
}
|
|
390
|
+
},
|
|
391
|
+
{
|
|
392
|
+
"kind": "field",
|
|
393
|
+
"name": "handoffRef",
|
|
394
|
+
"type": {
|
|
395
|
+
"text": "string"
|
|
396
|
+
},
|
|
397
|
+
"privacy": "public",
|
|
398
|
+
"readonly": false,
|
|
399
|
+
"description": "Scroll containers that hand overscroll to the gesture (`:scope`-relative selector, comma list matches several) — e.g. a sheet closed by pulling its own content down. Pointerdown inside one scrolls natively; gesture takes over only when first move runs along `progress-axis`, container is at that scroll limit, and `progress-offset` still has room that way. Additive to `from-ref` / `from-edge`.",
|
|
400
|
+
"_neutron": {
|
|
401
|
+
"surface": "option"
|
|
402
|
+
}
|
|
403
|
+
},
|
|
404
|
+
{
|
|
405
|
+
"kind": "field",
|
|
406
|
+
"name": "pointerTypes",
|
|
407
|
+
"type": {
|
|
408
|
+
"text": "tokenlist"
|
|
409
|
+
},
|
|
410
|
+
"privacy": "public",
|
|
411
|
+
"readonly": false,
|
|
412
|
+
"description": "Pointer types that can start a gesture. Add `mouse` for desktop drag.",
|
|
413
|
+
"default": "touch pen",
|
|
414
|
+
"_neutron": {
|
|
415
|
+
"surface": "option"
|
|
416
|
+
}
|
|
417
|
+
},
|
|
418
|
+
{
|
|
419
|
+
"kind": "field",
|
|
420
|
+
"name": "maxPointers",
|
|
421
|
+
"type": {
|
|
422
|
+
"text": "number"
|
|
423
|
+
},
|
|
424
|
+
"privacy": "public",
|
|
425
|
+
"readonly": false,
|
|
426
|
+
"description": "Extra pointers beyond this many are ignored. Unset = `2` when `pinch` / `rotate` listed, else `1`.",
|
|
427
|
+
"_neutron": {
|
|
428
|
+
"surface": "option"
|
|
429
|
+
}
|
|
430
|
+
},
|
|
431
|
+
{
|
|
432
|
+
"kind": "field",
|
|
433
|
+
"name": "thresholdPx",
|
|
434
|
+
"type": {
|
|
435
|
+
"text": "number"
|
|
436
|
+
},
|
|
437
|
+
"privacy": "public",
|
|
438
|
+
"readonly": false,
|
|
439
|
+
"description": "Movement (px) before a pan is recognized. Taps / native scroll stay untouched below it.",
|
|
440
|
+
"default": 8,
|
|
441
|
+
"_neutron": {
|
|
442
|
+
"surface": "option"
|
|
443
|
+
}
|
|
444
|
+
},
|
|
445
|
+
{
|
|
446
|
+
"kind": "field",
|
|
447
|
+
"name": "lockAxis",
|
|
448
|
+
"type": {
|
|
449
|
+
"text": "boolean"
|
|
450
|
+
},
|
|
451
|
+
"privacy": "public",
|
|
452
|
+
"readonly": false,
|
|
453
|
+
"description": "A free `pan` locks to its dominant axis once recognized (`gesture-type` becomes `pan-x` / `pan-y`).",
|
|
454
|
+
"_neutron": {
|
|
455
|
+
"surface": "option"
|
|
456
|
+
}
|
|
457
|
+
},
|
|
458
|
+
{
|
|
459
|
+
"kind": "field",
|
|
460
|
+
"name": "armAfter",
|
|
461
|
+
"type": {
|
|
462
|
+
"text": "string"
|
|
463
|
+
},
|
|
464
|
+
"privacy": "public",
|
|
465
|
+
"readonly": false,
|
|
466
|
+
"description": "Pans only arm after this gesture — `long-press` for hold-then-drag.",
|
|
467
|
+
"_neutron": {
|
|
468
|
+
"surface": "option"
|
|
469
|
+
}
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
"kind": "field",
|
|
473
|
+
"name": "longPressMs",
|
|
474
|
+
"type": {
|
|
475
|
+
"text": "number"
|
|
476
|
+
},
|
|
477
|
+
"privacy": "public",
|
|
478
|
+
"readonly": false,
|
|
479
|
+
"description": "Hold time (ms) for `long-press`; also tap time limit.",
|
|
480
|
+
"default": 500,
|
|
481
|
+
"_neutron": {
|
|
482
|
+
"surface": "option"
|
|
483
|
+
}
|
|
484
|
+
},
|
|
485
|
+
{
|
|
486
|
+
"kind": "field",
|
|
487
|
+
"name": "doubleTapMs",
|
|
488
|
+
"type": {
|
|
489
|
+
"text": "number"
|
|
490
|
+
},
|
|
491
|
+
"privacy": "public",
|
|
492
|
+
"readonly": false,
|
|
493
|
+
"description": "Max gap (ms) between taps for `double-tap`.",
|
|
494
|
+
"default": 300,
|
|
495
|
+
"_neutron": {
|
|
496
|
+
"surface": "option"
|
|
497
|
+
}
|
|
498
|
+
},
|
|
499
|
+
{
|
|
500
|
+
"kind": "field",
|
|
501
|
+
"name": "swipeMinVelocity",
|
|
502
|
+
"type": {
|
|
503
|
+
"text": "number"
|
|
504
|
+
},
|
|
505
|
+
"privacy": "public",
|
|
506
|
+
"readonly": false,
|
|
507
|
+
"description": "Release velocity (px/ms) that counts as a swipe.",
|
|
508
|
+
"default": 0.5,
|
|
509
|
+
"_neutron": {
|
|
510
|
+
"surface": "option"
|
|
511
|
+
}
|
|
512
|
+
},
|
|
513
|
+
{
|
|
514
|
+
"kind": "field",
|
|
515
|
+
"name": "swipeDirections",
|
|
516
|
+
"type": {
|
|
517
|
+
"text": "tokenlist"
|
|
518
|
+
},
|
|
519
|
+
"privacy": "public",
|
|
520
|
+
"readonly": false,
|
|
521
|
+
"description": "Swipe directions to report. Unset = all four.",
|
|
522
|
+
"_neutron": {
|
|
523
|
+
"surface": "option"
|
|
524
|
+
}
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
"kind": "field",
|
|
528
|
+
"name": "progressAxis",
|
|
529
|
+
"type": {
|
|
530
|
+
"text": "string"
|
|
531
|
+
},
|
|
532
|
+
"privacy": "public",
|
|
533
|
+
"readonly": false,
|
|
534
|
+
"description": "Direction `--gesture-progress` grows. Unset = `down` for a `pan-y`-only element, else `right`.",
|
|
535
|
+
"_neutron": {
|
|
536
|
+
"surface": "option"
|
|
537
|
+
}
|
|
538
|
+
},
|
|
539
|
+
{
|
|
540
|
+
"kind": "field",
|
|
541
|
+
"name": "rangeRef",
|
|
542
|
+
"type": {
|
|
543
|
+
"text": "string"
|
|
544
|
+
},
|
|
545
|
+
"privacy": "public",
|
|
546
|
+
"readonly": false,
|
|
547
|
+
"description": "Element whose size along `progress-axis` is the range of `progress` `0`..`1` (`:scope`-relative, read once per gesture) — sheet being dragged, slide being swiped.",
|
|
548
|
+
"_neutron": {
|
|
549
|
+
"surface": "option"
|
|
550
|
+
}
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
"kind": "field",
|
|
554
|
+
"name": "rangePx",
|
|
555
|
+
"type": {
|
|
556
|
+
"text": "number"
|
|
557
|
+
},
|
|
558
|
+
"privacy": "public",
|
|
559
|
+
"readonly": false,
|
|
560
|
+
"description": "Literal range (px) instead of `range-ref`.",
|
|
561
|
+
"_neutron": {
|
|
562
|
+
"surface": "option"
|
|
563
|
+
}
|
|
564
|
+
},
|
|
565
|
+
{
|
|
566
|
+
"kind": "field",
|
|
567
|
+
"name": "progressMin",
|
|
568
|
+
"type": {
|
|
569
|
+
"text": "number"
|
|
570
|
+
},
|
|
571
|
+
"privacy": "public",
|
|
572
|
+
"readonly": false,
|
|
573
|
+
"description": "Lower bound of `progress`.",
|
|
574
|
+
"default": 0,
|
|
575
|
+
"_neutron": {
|
|
576
|
+
"surface": "option"
|
|
577
|
+
}
|
|
578
|
+
},
|
|
579
|
+
{
|
|
580
|
+
"kind": "field",
|
|
581
|
+
"name": "progressMax",
|
|
582
|
+
"type": {
|
|
583
|
+
"text": "number"
|
|
584
|
+
},
|
|
585
|
+
"privacy": "public",
|
|
586
|
+
"readonly": false,
|
|
587
|
+
"description": "Upper bound of `progress`.",
|
|
588
|
+
"default": 1,
|
|
589
|
+
"_neutron": {
|
|
590
|
+
"surface": "option"
|
|
591
|
+
}
|
|
592
|
+
},
|
|
593
|
+
{
|
|
594
|
+
"kind": "field",
|
|
595
|
+
"name": "progressOffset",
|
|
596
|
+
"type": {
|
|
597
|
+
"text": "number"
|
|
598
|
+
},
|
|
599
|
+
"privacy": "public",
|
|
600
|
+
"readonly": false,
|
|
601
|
+
"description": "Progress the gesture starts from. Set from a rule that reads the driven element's state (`1` while a sheet is open) so dragging it closed starts full.",
|
|
602
|
+
"default": 0,
|
|
603
|
+
"_neutron": {
|
|
604
|
+
"surface": "option"
|
|
605
|
+
}
|
|
606
|
+
},
|
|
607
|
+
{
|
|
608
|
+
"kind": "field",
|
|
609
|
+
"name": "overshootResistance",
|
|
610
|
+
"type": {
|
|
611
|
+
"text": "number"
|
|
612
|
+
},
|
|
613
|
+
"privacy": "public",
|
|
614
|
+
"readonly": false,
|
|
615
|
+
"description": "Rubber-band past `progress-min` / `progress-max`: `0` clamps, `0.3` overshoots at a third of travel.",
|
|
616
|
+
"default": 0,
|
|
617
|
+
"_neutron": {
|
|
618
|
+
"surface": "option"
|
|
619
|
+
}
|
|
620
|
+
},
|
|
621
|
+
{
|
|
622
|
+
"kind": "field",
|
|
623
|
+
"name": "snapPoints",
|
|
624
|
+
"type": {
|
|
625
|
+
"text": "tokenlist"
|
|
626
|
+
},
|
|
627
|
+
"privacy": "public",
|
|
628
|
+
"readonly": false,
|
|
629
|
+
"description": "Progress values to settle on after release (`0 0.5 1`). Target picked from position, fling velocity and swipe direction, reported as `detail.snap` on `-end`, settled on by the default action (a CSS transition, `--gesture-snap-duration` / `--gesture-snap-ease`).",
|
|
630
|
+
"_neutron": {
|
|
631
|
+
"surface": "option"
|
|
632
|
+
}
|
|
633
|
+
},
|
|
634
|
+
{
|
|
635
|
+
"kind": "field",
|
|
636
|
+
"name": "shouldEmitMove",
|
|
637
|
+
"type": {
|
|
638
|
+
"text": "boolean"
|
|
639
|
+
},
|
|
640
|
+
"privacy": "public",
|
|
641
|
+
"readonly": false,
|
|
642
|
+
"description": "Fire `gesture-handler-move` every frame. Off by default; `--gesture-*` is enough for CSS.",
|
|
643
|
+
"_neutron": {
|
|
644
|
+
"surface": "option"
|
|
645
|
+
}
|
|
646
|
+
},
|
|
647
|
+
{
|
|
648
|
+
"kind": "field",
|
|
649
|
+
"name": "isDisabled",
|
|
650
|
+
"type": {
|
|
651
|
+
"text": "boolean"
|
|
652
|
+
},
|
|
653
|
+
"privacy": "public",
|
|
654
|
+
"readonly": false,
|
|
655
|
+
"description": "Ignore new pointers; a gesture in progress is cancelled. State-driven veto.",
|
|
656
|
+
"_neutron": {
|
|
657
|
+
"surface": "hybrid"
|
|
658
|
+
}
|
|
659
|
+
},
|
|
660
|
+
{
|
|
661
|
+
"kind": "field",
|
|
662
|
+
"name": "isActive",
|
|
663
|
+
"type": {
|
|
664
|
+
"text": "boolean"
|
|
665
|
+
},
|
|
666
|
+
"privacy": "public",
|
|
667
|
+
"readonly": true,
|
|
668
|
+
"description": "A pointer is down on the surface. Set from first pointer until release, so it also covers taps and pre-threshold phase.",
|
|
669
|
+
"_neutron": {
|
|
670
|
+
"surface": "state"
|
|
671
|
+
}
|
|
672
|
+
},
|
|
673
|
+
{
|
|
674
|
+
"kind": "field",
|
|
675
|
+
"name": "gestureType",
|
|
676
|
+
"type": {
|
|
677
|
+
"text": "string"
|
|
678
|
+
},
|
|
679
|
+
"privacy": "public",
|
|
680
|
+
"readonly": true,
|
|
681
|
+
"description": "Recognized gesture in progress, unset before recognition and after release.",
|
|
682
|
+
"_neutron": {
|
|
683
|
+
"surface": "state"
|
|
684
|
+
}
|
|
685
|
+
},
|
|
686
|
+
{
|
|
687
|
+
"kind": "field",
|
|
688
|
+
"name": "pointerCount",
|
|
689
|
+
"type": {
|
|
690
|
+
"text": "number"
|
|
691
|
+
},
|
|
692
|
+
"privacy": "public",
|
|
693
|
+
"readonly": true,
|
|
694
|
+
"description": "Pointers currently down.",
|
|
695
|
+
"_neutron": {
|
|
696
|
+
"surface": "state"
|
|
697
|
+
}
|
|
698
|
+
},
|
|
699
|
+
{
|
|
700
|
+
"kind": "field",
|
|
701
|
+
"name": "gestureDirection",
|
|
702
|
+
"type": {
|
|
703
|
+
"text": "string"
|
|
704
|
+
},
|
|
705
|
+
"privacy": "public",
|
|
706
|
+
"readonly": true,
|
|
707
|
+
"description": "Dominant travel direction of gesture in progress.",
|
|
708
|
+
"_neutron": {
|
|
709
|
+
"surface": "state"
|
|
710
|
+
}
|
|
711
|
+
},
|
|
712
|
+
{
|
|
713
|
+
"kind": "field",
|
|
714
|
+
"name": "lastGesture",
|
|
715
|
+
"type": {
|
|
716
|
+
"text": "string"
|
|
717
|
+
},
|
|
718
|
+
"privacy": "public",
|
|
719
|
+
"readonly": true,
|
|
720
|
+
"description": "What last gesture turned out to be — style a \"just swiped\" state from it.",
|
|
721
|
+
"_neutron": {
|
|
722
|
+
"surface": "state"
|
|
723
|
+
}
|
|
724
|
+
},
|
|
725
|
+
{
|
|
726
|
+
"kind": "field",
|
|
727
|
+
"name": "provision",
|
|
728
|
+
"type": {
|
|
729
|
+
"text": "GestureHandlerProvision",
|
|
730
|
+
"expanded": "{ x: number; y: number; dx: number; dy: number; vx: number; vy: number; progress: number; scale: number; rotate: number; pointers: number; } & { type: | \"pan\" | \"pan-x\" | \"pan-y\" | \"pinch\" | \"rotate\" | \"swipe\" | \"tap\" | \"double-tap\" | \"long-press\" | null; pointerType: string; distance: number; rangePx: number; durationMs: number; snap: number | null; swipe: \"left\" | \"right\" | \"up\" | \"down\" | null; }"
|
|
731
|
+
},
|
|
732
|
+
"privacy": "public",
|
|
733
|
+
"readonly": false,
|
|
734
|
+
"description": "Last `-start` / `-end` / `-cancel` snapshot (`type`, travel, velocity, progress, `snap`, `swipe`, …). Not an attribute; per-frame values live in `--gesture-*`.",
|
|
735
|
+
"_neutron": {
|
|
736
|
+
"surface": "option"
|
|
737
|
+
}
|
|
738
|
+
}
|
|
739
|
+
],
|
|
740
|
+
"events": [
|
|
741
|
+
{
|
|
742
|
+
"name": "gesture-handler-start",
|
|
743
|
+
"description": "Gesture recognized: pan passed `threshold-px` (after `arm-after` if set), or a second finger for `pinch` / `rotate`. After `gesture-type` + `provision` set. `detail` = provision. Not cancelable — gate with `is-disabled`.",
|
|
744
|
+
"type": {
|
|
745
|
+
"text": "GestureHandlerStartEvent",
|
|
746
|
+
"expanded": "CustomEvent & { type: \"gesture-handler-start\"; detail: { x: number; y: number; dx: number; dy: number; vx: number; vy: number; progress: number; scale: number; rotate: number; pointers: number; } & { type: | \"pan\" | \"pan-x\" | \"pan-y\" | \"pinch\" | \"rotate\" | \"swipe\" | \"tap\" | \"double-tap\" | \"long-press\" | null; pointerType: string; distance: number; rangePx: number; durationMs: number; snap: number | null; swipe: \"left\" | \"right\" | \"up\" | \"down\" | null; }; bubbles: true; cancelable: true; composed: true }"
|
|
747
|
+
}
|
|
748
|
+
},
|
|
749
|
+
{
|
|
750
|
+
"name": "gesture-handler-move",
|
|
751
|
+
"description": "Once per frame while a recognized gesture moves, only with `should-emit-move`. `detail` = provision. `--gesture-*` always updates, event or not.",
|
|
752
|
+
"type": {
|
|
753
|
+
"text": "GestureHandlerMoveEvent",
|
|
754
|
+
"expanded": "CustomEvent & { type: \"gesture-handler-move\"; detail: { x: number; y: number; dx: number; dy: number; vx: number; vy: number; progress: number; scale: number; rotate: number; pointers: number; } & { type: | \"pan\" | \"pan-x\" | \"pan-y\" | \"pinch\" | \"rotate\" | \"swipe\" | \"tap\" | \"double-tap\" | \"long-press\" | null; pointerType: string; distance: number; rangePx: number; durationMs: number; snap: number | null; swipe: \"left\" | \"right\" | \"up\" | \"down\" | null; }; bubbles: true; cancelable: true; composed: true }"
|
|
755
|
+
}
|
|
756
|
+
},
|
|
757
|
+
{
|
|
758
|
+
"name": "gesture-handler-end",
|
|
759
|
+
"description": "Last pointer up after a recognized gesture. After `is-active` unset, `last-gesture` + `provision` set, and after `gesture-handler-swipe` if one was recognized. `detail.snap` = `snap-points` target from position / velocity / swipe (`null` without `snap-points`); `detail.swipe` = swipe direction. Default action: write `--gesture-progress` = `detail.snap`, which settles with a CSS transition (`--gesture-snap-duration` / `--gesture-snap-ease`), then `gesture-handler-snap`. `preventDefault()` leaves values where the finger left them. Persist until next gesture.",
|
|
760
|
+
"type": {
|
|
761
|
+
"text": "GestureHandlerEndEvent",
|
|
762
|
+
"expanded": "CustomEvent & { type: \"gesture-handler-end\"; detail: { x: number; y: number; dx: number; dy: number; vx: number; vy: number; progress: number; scale: number; rotate: number; pointers: number; } & { type: | \"pan\" | \"pan-x\" | \"pan-y\" | \"pinch\" | \"rotate\" | \"swipe\" | \"tap\" | \"double-tap\" | \"long-press\" | null; pointerType: string; distance: number; rangePx: number; durationMs: number; snap: number | null; swipe: \"left\" | \"right\" | \"up\" | \"down\" | null; }; bubbles: true; cancelable: true; composed: true }"
|
|
763
|
+
}
|
|
764
|
+
},
|
|
765
|
+
{
|
|
766
|
+
"name": "gesture-handler-snap",
|
|
767
|
+
"description": "The settle transition reached the snap point (at once when there is nothing to animate; never when a new gesture interrupts it). `detail` = `{ value, index }` into `snap-points`. Commit here when consumer CSS follows `--gesture-progress` until the end.",
|
|
768
|
+
"type": {
|
|
769
|
+
"text": "GestureHandlerSnapEvent",
|
|
770
|
+
"expanded": "CustomEvent & { type: \"gesture-handler-snap\"; detail: { value: number; index: number }; bubbles: true; cancelable: true; composed: true }"
|
|
771
|
+
}
|
|
772
|
+
},
|
|
773
|
+
{
|
|
774
|
+
"name": "gesture-handler-cancel",
|
|
775
|
+
"description": "Recognized gesture cut short: browser took pointer (`pointercancel`, usually native scroll), `is-disabled` set, or element left the document. `detail` = provision. No `-end`, no glide.",
|
|
776
|
+
"type": {
|
|
777
|
+
"text": "GestureHandlerCancelEvent",
|
|
778
|
+
"expanded": "CustomEvent & { type: \"gesture-handler-cancel\"; detail: { x: number; y: number; dx: number; dy: number; vx: number; vy: number; progress: number; scale: number; rotate: number; pointers: number; } & { type: | \"pan\" | \"pan-x\" | \"pan-y\" | \"pinch\" | \"rotate\" | \"swipe\" | \"tap\" | \"double-tap\" | \"long-press\" | null; pointerType: string; distance: number; rangePx: number; durationMs: number; snap: number | null; swipe: \"left\" | \"right\" | \"up\" | \"down\" | null; }; bubbles: true; cancelable: true; composed: true }"
|
|
779
|
+
}
|
|
780
|
+
},
|
|
781
|
+
{
|
|
782
|
+
"name": "gesture-handler-swipe",
|
|
783
|
+
"description": "On release, velocity along dominant axis ≥ `swipe-min-velocity` and direction allowed by `swipe-directions`. `detail` = `{ direction, velocity }` (px/ms). Direction twin fires next (`gesture-handler-swipe-left` / `-right` / `-up` / `-down`).",
|
|
784
|
+
"type": {
|
|
785
|
+
"text": "GestureHandlerSwipeEvent",
|
|
786
|
+
"expanded": "CustomEvent & { type: \"gesture-handler-swipe\" | `gesture-handler-swipe-${\"left\" | \"right\" | \"up\" | \"down\"}`; detail: { direction: \"left\" | \"right\" | \"up\" | \"down\"; velocity: number }; bubbles: true; cancelable: true; composed: true }"
|
|
787
|
+
}
|
|
788
|
+
},
|
|
789
|
+
{
|
|
790
|
+
"name": "gesture-handler-tap",
|
|
791
|
+
"description": "Down and up without moving past `threshold-px`, within `long-press-ms`. `detail` = `{ x, y }` relative to the element.",
|
|
792
|
+
"type": {
|
|
793
|
+
"text": "GestureHandlerPointEvent",
|
|
794
|
+
"expanded": "CustomEvent & { type: | \"gesture-handler-tap\" | \"gesture-handler-double-tap\" | \"gesture-handler-long-press\"; detail: { x: number; y: number }; bubbles: true; cancelable: true; composed: true }"
|
|
795
|
+
}
|
|
796
|
+
},
|
|
797
|
+
{
|
|
798
|
+
"name": "gesture-handler-double-tap",
|
|
799
|
+
"description": "Second tap within `double-tap-ms` of the previous (after its `gesture-handler-tap`). `detail` = `{ x, y }`. Pair consumed; a third tap starts over.",
|
|
800
|
+
"type": {
|
|
801
|
+
"text": "GestureHandlerPointEvent",
|
|
802
|
+
"expanded": "CustomEvent & { type: | \"gesture-handler-tap\" | \"gesture-handler-double-tap\" | \"gesture-handler-long-press\"; detail: { x: number; y: number }; bubbles: true; cancelable: true; composed: true }"
|
|
803
|
+
}
|
|
804
|
+
},
|
|
805
|
+
{
|
|
806
|
+
"name": "gesture-handler-long-press",
|
|
807
|
+
"description": "Pointer stayed down without moving for `long-press-ms`. `detail` = `{ x, y }`.",
|
|
808
|
+
"type": {
|
|
809
|
+
"text": "GestureHandlerPointEvent",
|
|
810
|
+
"expanded": "CustomEvent & { type: | \"gesture-handler-tap\" | \"gesture-handler-double-tap\" | \"gesture-handler-long-press\"; detail: { x: number; y: number }; bubbles: true; cancelable: true; composed: true }"
|
|
811
|
+
}
|
|
812
|
+
}
|
|
813
|
+
],
|
|
814
|
+
"_neutron": {
|
|
815
|
+
"provisions": [
|
|
816
|
+
{
|
|
817
|
+
"name": "provision",
|
|
818
|
+
"type": {
|
|
819
|
+
"text": "GestureHandlerProvision",
|
|
820
|
+
"expanded": "{ x: number; y: number; dx: number; dy: number; vx: number; vy: number; progress: number; scale: number; rotate: number; pointers: number; } & { type: | \"pan\" | \"pan-x\" | \"pan-y\" | \"pinch\" | \"rotate\" | \"swipe\" | \"tap\" | \"double-tap\" | \"long-press\" | null; pointerType: string; distance: number; rangePx: number; durationMs: number; snap: number | null; swipe: \"left\" | \"right\" | \"up\" | \"down\" | null; }"
|
|
821
|
+
},
|
|
822
|
+
"description": "Last `-start` / `-end` / `-cancel` snapshot (`type`, travel, velocity, progress, `snap`, `swipe`, …). Not an attribute; per-frame values live in `--gesture-*`.",
|
|
823
|
+
"fieldName": "provision"
|
|
824
|
+
}
|
|
825
|
+
],
|
|
826
|
+
"cssAliases": [
|
|
827
|
+
{
|
|
828
|
+
"name": ":--gesture-handler",
|
|
829
|
+
"selectors": [
|
|
830
|
+
"gesture-handler",
|
|
831
|
+
".tag-gesture-handler"
|
|
832
|
+
],
|
|
833
|
+
"kind": "element"
|
|
834
|
+
},
|
|
835
|
+
{
|
|
836
|
+
"name": ":--gesture-handler--is-active",
|
|
837
|
+
"selectors": [
|
|
838
|
+
"[is-active]",
|
|
839
|
+
"[data-active]"
|
|
840
|
+
],
|
|
841
|
+
"kind": "state"
|
|
842
|
+
}
|
|
843
|
+
]
|
|
844
|
+
},
|
|
845
|
+
"cssProperties": [
|
|
846
|
+
{
|
|
847
|
+
"name": "--gesture-x",
|
|
848
|
+
"description": "Pointer centroid inside the element (px), horizontal — spotlight / parallax effects. Written every frame of a gesture; this is the resting value.",
|
|
849
|
+
"syntax": "<length>",
|
|
850
|
+
"default": "0px"
|
|
851
|
+
},
|
|
852
|
+
{
|
|
853
|
+
"name": "--gesture-y",
|
|
854
|
+
"description": "Pointer centroid inside the element (px), vertical.",
|
|
855
|
+
"syntax": "<length>",
|
|
856
|
+
"default": "0px"
|
|
857
|
+
},
|
|
858
|
+
{
|
|
859
|
+
"name": "--gesture-dx",
|
|
860
|
+
"description": "Horizontal travel since the gesture started (px) — drag-to-move, swipe-to-dismiss.",
|
|
861
|
+
"syntax": "<length>",
|
|
862
|
+
"default": "0px"
|
|
863
|
+
},
|
|
864
|
+
{
|
|
865
|
+
"name": "--gesture-dy",
|
|
866
|
+
"description": "Vertical travel since the gesture started (px).",
|
|
867
|
+
"syntax": "<length>",
|
|
868
|
+
"default": "0px"
|
|
869
|
+
},
|
|
870
|
+
{
|
|
871
|
+
"name": "--gesture-vx",
|
|
872
|
+
"description": "Horizontal velocity over the last ~100 ms (px/ms).",
|
|
873
|
+
"syntax": "<number>",
|
|
874
|
+
"default": "0"
|
|
875
|
+
},
|
|
876
|
+
{
|
|
877
|
+
"name": "--gesture-vy",
|
|
878
|
+
"description": "Vertical velocity over the last ~100 ms (px/ms).",
|
|
879
|
+
"syntax": "<number>",
|
|
880
|
+
"default": "0"
|
|
881
|
+
},
|
|
882
|
+
{
|
|
883
|
+
"name": "--gesture-progress",
|
|
884
|
+
"description": "Travel along `progress-axis` as a fraction of the range, clamped to `progress-min`..`progress-max` — the value a scrubbable sheet, carousel or slider follows. Persists after release until the next gesture.",
|
|
885
|
+
"syntax": "<number>",
|
|
886
|
+
"default": "0"
|
|
887
|
+
},
|
|
888
|
+
{
|
|
889
|
+
"name": "--gesture-range-px",
|
|
890
|
+
"description": "The measured range (`range-ref` size along the axis, or `range-px`). Written once, when the gesture starts.",
|
|
891
|
+
"syntax": "<length>",
|
|
892
|
+
"default": "0px"
|
|
893
|
+
},
|
|
894
|
+
{
|
|
895
|
+
"name": "--gesture-width",
|
|
896
|
+
"description": "The element's own width, measured when the gesture starts.",
|
|
897
|
+
"syntax": "<length>",
|
|
898
|
+
"default": "0px"
|
|
899
|
+
},
|
|
900
|
+
{
|
|
901
|
+
"name": "--gesture-height",
|
|
902
|
+
"description": "The element's own height, measured when the gesture starts.",
|
|
903
|
+
"syntax": "<length>",
|
|
904
|
+
"default": "0px"
|
|
905
|
+
},
|
|
906
|
+
{
|
|
907
|
+
"name": "--gesture-scale",
|
|
908
|
+
"description": "Two-finger pinch ratio (`1` = unchanged) — pinch-to-zoom.",
|
|
909
|
+
"syntax": "<number>",
|
|
910
|
+
"default": "1"
|
|
911
|
+
},
|
|
912
|
+
{
|
|
913
|
+
"name": "--gesture-rotate",
|
|
914
|
+
"description": "Two-finger rotation — rotate-to-adjust.",
|
|
915
|
+
"syntax": "<angle>",
|
|
916
|
+
"default": "0deg"
|
|
917
|
+
},
|
|
918
|
+
{
|
|
919
|
+
"name": "--gesture-pointers",
|
|
920
|
+
"description": "Pointers currently down.",
|
|
921
|
+
"syntax": "<integer>",
|
|
922
|
+
"default": "0"
|
|
923
|
+
},
|
|
924
|
+
{
|
|
925
|
+
"name": "--gesture-distance",
|
|
926
|
+
"description": "Length of the travel (px). Computed from `--gesture-dx` / `--gesture-dy`.",
|
|
927
|
+
"syntax": "<length>",
|
|
928
|
+
"default": "hypot(var(--gesture-dx), var(--gesture-dy))"
|
|
929
|
+
},
|
|
930
|
+
{
|
|
931
|
+
"name": "--gesture-angle",
|
|
932
|
+
"description": "Direction of the travel: `0deg` right, `90deg` down. Computed from `--gesture-dx` / `--gesture-dy`.",
|
|
933
|
+
"syntax": "<angle>",
|
|
934
|
+
"default": "atan2(var(--gesture-dy), var(--gesture-dx))"
|
|
935
|
+
},
|
|
936
|
+
{
|
|
937
|
+
"name": "--gesture-progress-px",
|
|
938
|
+
"description": "`--gesture-progress` in px. Computed from `--gesture-progress` and `--gesture-range-px`.",
|
|
939
|
+
"syntax": "<length>",
|
|
940
|
+
"default": "calc(var(--gesture-progress) * var(--gesture-range-px))"
|
|
941
|
+
},
|
|
942
|
+
{
|
|
943
|
+
"name": "--gesture-x-ratio",
|
|
944
|
+
"description": "`--gesture-x` as a 0..1 fraction of the element's width. Computed from `--gesture-x` and `--gesture-width`.",
|
|
945
|
+
"syntax": "<number>",
|
|
946
|
+
"default": "tan(atan2(var(--gesture-x), var(--gesture-width)))"
|
|
947
|
+
},
|
|
948
|
+
{
|
|
949
|
+
"name": "--gesture-y-ratio",
|
|
950
|
+
"description": "`--gesture-y` as a 0..1 fraction of the element's height. Computed from `--gesture-y` and `--gesture-height`.",
|
|
951
|
+
"syntax": "<number>",
|
|
952
|
+
"default": "tan(atan2(var(--gesture-y), var(--gesture-height)))"
|
|
953
|
+
},
|
|
954
|
+
{
|
|
955
|
+
"name": "--gesture-snap-duration",
|
|
956
|
+
"description": "How long `--gesture-progress` takes to settle on its snap point after release.",
|
|
957
|
+
"syntax": "<time>",
|
|
958
|
+
"default": "200ms"
|
|
959
|
+
},
|
|
960
|
+
{
|
|
961
|
+
"name": "--gesture-snap-ease",
|
|
962
|
+
"description": "Easing of that settle.",
|
|
963
|
+
"syntax": "<easing-function>",
|
|
964
|
+
"default": "ease-out"
|
|
965
|
+
}
|
|
966
|
+
]
|
|
967
|
+
}
|
|
968
|
+
],
|
|
969
|
+
"exports": [
|
|
970
|
+
{
|
|
971
|
+
"kind": "js",
|
|
972
|
+
"name": "GestureHandler",
|
|
973
|
+
"declaration": {
|
|
974
|
+
"name": "GestureHandler",
|
|
975
|
+
"module": "gesture-handler.ts"
|
|
976
|
+
}
|
|
977
|
+
},
|
|
978
|
+
{
|
|
979
|
+
"kind": "custom-element-definition",
|
|
980
|
+
"name": "gesture-handler",
|
|
981
|
+
"declaration": {
|
|
982
|
+
"name": "GestureHandler",
|
|
983
|
+
"module": "gesture-handler.ts"
|
|
984
|
+
}
|
|
985
|
+
}
|
|
986
|
+
]
|
|
987
|
+
}
|
|
988
|
+
]
|
|
989
|
+
}
|