@mlola-ui/behavior 1.1.6 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlola-ui/behavior",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "Framework-free behavior for Mlola UI markup: standard DOM, no runtime peers",
   "type": "module",
   "main": "./src/index.js",

package/src/index.js

@@ -22,6 +22,7 @@ import {
   focusTrapIndex,
   percentOf,
   fitTooltip,
+  isSidewaysDrag,
   placeFloating,
   rovingIndex,
   sliderValueForKey,
@@ -456,22 +457,40 @@ const behaviors = {
       return valueFromRatio((event.clientX - box.left) / box.width, bounds());
     };
 
-    let dragging = false;
+    // The whole control row takes the pointer. A mouse or pen sets the value
+    // where it presses; a finger only once it moves sideways, or on a tap, so
+    // scrolling past a slider leaves it alone (the React build does the same).
+    const surface = root.querySelector(".ml-slider") ?? track;
+    let gesture = null;
 
     return [
-      on(track, "pointerdown", (event) => {
-        if (disabled) return;
-        dragging = true;
-        track.setPointerCapture?.(event.pointerId);
-        set(fromPointer(event));
+      on(surface, "pointerdown", (event) => {
+        if (disabled || event.button !== 0) return;
+        const touch = event.pointerType === "touch";
+        gesture = { id: event.pointerId, touch, x: event.clientX, y: event.clientY, active: !touch };
+        if (!touch) {
+          surface.setPointerCapture?.(event.pointerId);
+          set(fromPointer(event));
+        }
         valued.focus();
       }),
-      on(track, "pointermove", (event) => {
-        if (dragging && !disabled) set(fromPointer(event));
+      on(surface, "pointermove", (event) => {
+        if (disabled || !gesture || gesture.id !== event.pointerId) return;
+        if (!gesture.active) {
+          if (!isSidewaysDrag(event.clientX - gesture.x, event.clientY - gesture.y)) return;
+          gesture.active = true;
+          surface.setPointerCapture?.(event.pointerId);
+        }
+        set(fromPointer(event));
+      }),
+      on(surface, "pointerup", (event) => {
+        const ended = gesture;
+        gesture = null;
+        surface.releasePointerCapture?.(event.pointerId);
+        if (!disabled && ended?.touch && !ended.active) set(fromPointer(event));
       }),
-      on(track, "pointerup", (event) => {
-        dragging = false;
-        track.releasePointerCapture?.(event.pointerId);
+      on(surface, "pointercancel", () => {
+        gesture = null;
       }),
       on(valued, "keydown", (event) => {
         if (disabled) return;

package/src/interaction.js

@@ -63,6 +63,16 @@ export function sliderValueForKey(key, current, { min = 0, max = 100, step = 1 }
   return clampToStep(current + delta, { min: low, max: high, step: increment });
 }
 
+/**
+ * Whether a finger that pressed on a horizontal control and moved `dx`, `dy`
+ * pixels is dragging it rather than scrolling the page: it went sideways at
+ * least `threshold` pixels, and more sideways than up or down. Until then the
+ * control changes nothing, so a person scrolling past it does not move it.
+ */
+export function isSidewaysDrag(dx, dy, threshold = 6) {
+  return Math.abs(dx) >= threshold && Math.abs(dx) >= Math.abs(dy);
+}
+
 /**
  * Where a roving-focus key lands. `enabled` reports whether an index may take
  * focus, so disabled entries are stepped over rather than landed on.

package/src/logic.d.ts

@@ -27,6 +27,7 @@ export interface DisclosureOptions {
 export function clampToStep(raw: number, bounds?: Bounds): number;
 export function valueFromRatio(ratio: number, bounds?: Bounds): number;
 export function percentOf(value: number, bounds?: Pick<Bounds, "min" | "max">): number;
+export function isSidewaysDrag(dx: number, dy: number, threshold?: number): boolean;
 export function sliderValueForKey(
   key: string,
   current: number,