@jsenv/dom 0.17.6 → 0.17.7

package/dist/jsenv_dom.js

@@ -7856,7 +7856,19 @@ const css$5 = /* css */`
     touch-action: none;
     user-select: none;
   }
+  /* Chrome matches :focus-visible on a programmatic focus, so focusing what the
+     gesture holds draws a ring around an object the user already has under the
+     pointer — a frame blinking for the length of the gesture, saying something
+     the finger knows. The ring stays whole where it earns its place: at the
+     keyboard, outside any gesture.
+     focus({ focusVisible: false }) would say the intent better but does not
+     hold — Chrome's heuristic does not always obey the option (see
+     isMatchingFocusVisible). */
+  [data-drag-focus]:focus-visible {
+    outline: none;
+  }
 `;
+import.meta.css = [css$5, "@jsenv/dom/src/interaction/drag/drag_gesture.js"];
 const createDragGestureController = (options = {}) => {
   const {
     name,
@@ -8017,7 +8029,6 @@ const createDragGestureController = (options = {}) => {
 
       // 2. VISUAL CONTROL: Backdrop for consistent cursor and pointer event blocking
       if (backdrop) {
-        import.meta.css = [css$5, "@jsenv/dom/src/interaction/drag/drag_gesture.js"];
         const backdropElement = document.createElement("div");
         backdropElement.className = "navi_drag_gesture_backdrop";
         backdropElement.ariaHidden = "true";
@@ -8054,10 +8065,12 @@ const createDragGestureController = (options = {}) => {
       // This also ensure any keydown event listened by the currently focused element
       // won't be available during drag
       const elementToFocus = focusableElement || document.body;
+      elementToFocus.setAttribute("data-drag-focus", "");
       elementToFocus.focus({
         preventScroll: true
       });
       addReleaseCallback(() => {
+        elementToFocus.removeAttribute("data-drag-focus");
         // Restore original focus on release
         activeElement.focus({
           preventScroll: true
@@ -8589,18 +8602,47 @@ installImportMetaCssBuild(import.meta);/**
  * starts at the first pixel, without a second threshold to cross.
  */
 
-/* iOS shows its callout (Copy / Look Up) and selects the text under the finger
-   on a long press, and does not always route that through an event that can be
-   refused — see preventContextMenu below for the half that is an event.
-   At module scope, and on the markers rather than on the pressed element: it has
-   to be true before the finger lands. */
+/* At module scope, and on the markers rather than on the pressed element: both
+   rules below have to be true BEFORE the finger lands — a stylesheet, never a
+   line of JS in the pointerdown.
+
+   -webkit-touch-callout: iOS shows its callout (Copy / Look Up) and selects the
+   text under the finger on a long press, and does not always route that through
+   an event that can be refused — see preventContextMenu below for the half that
+   is an event.
+
+   touch-action: a touchmove can only be refused if the region was out of the
+   compositor's fast path when the touch BEGAN (see preventTouchScroll in
+   drag_gesture.js, which does the refusing). Left at `auto`, Chrome has already
+   decided the touch is its own by the time a long press turns into a grab, and
+   every preventDefault from then on is a "Unable to preventDefault inside
+   passive event listener" intervention — on Android, a scroll that runs away
+   with the object. Any explicit value other than `auto` is enough: `pan-y` still
+   lets the page scroll and still makes the refusal effective. */
 const css$4 = /* css */`
   [data-drag-handle],
   [data-drag-source] {
     -webkit-touch-callout: none;
   }
+  [data-drag-handle] {
+    /* A dedicated handle has nothing to share: it takes the gesture on contact. */
+    touch-action: none;
+  }
+  [data-drag-source] {
+    /* A source taken by long press must let the scroll through until the grab —
+       which is exactly what the long press is there to tell apart. Zoom has
+       nothing to do with the gesture and nobody should lose it by resting a
+       finger on a word. */
+    touch-action: pan-y pinch-zoom;
+  }
+  [data-drag-source="x"] {
+    /* The axis is the one thing the caller has to say, being the only one who
+       knows which way what surrounds the source scrolls. */
+    touch-action: pan-x pinch-zoom;
+  }
   [data-drag-ignore] {
     -webkit-touch-callout: default;
+    touch-action: auto;
   }
 `;
 import.meta.css = [css$4, "@jsenv/dom/src/interaction/drag/drag_after_intent.js"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.17.6",
+  "version": "0.17.7",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {