@zag-js/number-input 1.43.0 → 2.0.0-next.1

package/dist/number-input.dom.d.ts

@@ -8,27 +8,29 @@ declare const getInputId: (ctx: Scope) => any;
 declare const getIncrementTriggerId: (ctx: Scope) => any;
 declare const getDecrementTriggerId: (ctx: Scope) => any;
 declare const getScrubberId: (ctx: Scope) => any;
-declare const getCursorId: (ctx: Scope) => string;
+declare const getScrubberCursorId: (ctx: Scope) => any;
 declare const getLabelId: (ctx: Scope) => any;
 declare const getInputEl: (ctx: Scope) => HTMLInputElement | null;
 declare const getIncrementTriggerEl: (ctx: Scope) => HTMLButtonElement | null;
 declare const getDecrementTriggerEl: (ctx: Scope) => HTMLButtonElement | null;
 declare const getScrubberEl: (ctx: Scope) => HTMLElement | null;
-declare const getCursorEl: (ctx: Scope) => HTMLElement | null;
+declare const getScrubberCursorEl: (ctx: Scope) => HTMLElement | null;
 declare const getPressedTriggerEl: (ctx: Scope, hint: HintValue | null) => HTMLButtonElement | null;
-declare const setupVirtualCursor: (ctx: Scope, point: Point | null) => (() => void) | undefined;
-declare const preventTextSelection: (ctx: Scope) => () => void;
-declare const getMousemoveValue: (ctx: Scope, opts: {
+declare const preventTextSelection: (ctx: Scope, direction: "horizontal" | "vertical") => () => void;
+interface MousemoveOpts {
     point: Point | null;
     isRtl: boolean;
     event: MouseEvent;
-}) => {
+    direction: "horizontal" | "vertical";
+    teleportDistance?: number | undefined;
+}
+declare const getMousemoveValue: (ctx: Scope, opts: MousemoveOpts) => {
     hint: string | null;
     point: {
         x: number;
         y: number;
     };
+    delta: number;
 };
-declare const createVirtualCursor: (ctx: Scope, point: Point | null) => void;
 
-export { createVirtualCursor, getCursorEl, getCursorId, getDecrementTriggerEl, getDecrementTriggerId, getIncrementTriggerEl, getIncrementTriggerId, getInputEl, getInputId, getLabelId, getMousemoveValue, getPressedTriggerEl, getRootId, getScrubberEl, getScrubberId, preventTextSelection, setupVirtualCursor };
+export { getDecrementTriggerEl, getDecrementTriggerId, getIncrementTriggerEl, getIncrementTriggerId, getInputEl, getInputId, getLabelId, getMousemoveValue, getPressedTriggerEl, getRootId, getScrubberCursorEl, getScrubberCursorId, getScrubberEl, getScrubberId, preventTextSelection };

package/dist/number-input.dom.js

@@ -20,9 +20,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/number-input.dom.ts
 var number_input_dom_exports = {};
 __export(number_input_dom_exports, {
-  createVirtualCursor: () => createVirtualCursor,
-  getCursorEl: () => getCursorEl,
-  getCursorId: () => getCursorId,
   getDecrementTriggerEl: () => getDecrementTriggerEl,
   getDecrementTriggerId: () => getDecrementTriggerId,
   getIncrementTriggerEl: () => getIncrementTriggerEl,
@@ -33,26 +30,27 @@ __export(number_input_dom_exports, {
   getMousemoveValue: () => getMousemoveValue,
   getPressedTriggerEl: () => getPressedTriggerEl,
   getRootId: () => getRootId,
+  getScrubberCursorEl: () => getScrubberCursorEl,
+  getScrubberCursorId: () => getScrubberCursorId,
   getScrubberEl: () => getScrubberEl,
   getScrubberId: () => getScrubberId,
-  preventTextSelection: () => preventTextSelection,
-  setupVirtualCursor: () => setupVirtualCursor
+  preventTextSelection: () => preventTextSelection
 });
 module.exports = __toCommonJS(number_input_dom_exports);
-var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
-var getRootId = (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`;
-var getInputId = (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`;
-var getIncrementTriggerId = (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`;
-var getDecrementTriggerId = (ctx) => ctx.ids?.decrementTrigger ?? `number-input:${ctx.id}:dec`;
-var getScrubberId = (ctx) => ctx.ids?.scrubber ?? `number-input:${ctx.id}:scrubber`;
-var getCursorId = (ctx) => `number-input:${ctx.id}:cursor`;
-var getLabelId = (ctx) => ctx.ids?.label ?? `number-input:${ctx.id}:label`;
-var getInputEl = (ctx) => ctx.getById(getInputId(ctx));
-var getIncrementTriggerEl = (ctx) => ctx.getById(getIncrementTriggerId(ctx));
-var getDecrementTriggerEl = (ctx) => ctx.getById(getDecrementTriggerId(ctx));
-var getScrubberEl = (ctx) => ctx.getById(getScrubberId(ctx));
-var getCursorEl = (ctx) => ctx.getDoc().getElementById(getCursorId(ctx));
+var import_number_input = require("./number-input.anatomy.js");
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getInputId = (ctx) => ctx.ids?.input ?? `${ctx.id}:input`;
+var getIncrementTriggerId = (ctx) => ctx.ids?.incrementTrigger ?? `${ctx.id}:inc`;
+var getDecrementTriggerId = (ctx) => ctx.ids?.decrementTrigger ?? `${ctx.id}:dec`;
+var getScrubberId = (ctx) => ctx.ids?.scrubber ?? `${ctx.id}:scrubber`;
+var getScrubberCursorId = (ctx) => ctx.ids?.scrubberCursor ?? `${ctx.id}:scrubber-cursor`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getInputEl = (ctx) => ctx.query(ctx.selector(import_number_input.parts.input));
+var getIncrementTriggerEl = (ctx) => ctx.query(ctx.selector(import_number_input.parts.incrementTrigger));
+var getDecrementTriggerEl = (ctx) => ctx.query(ctx.selector(import_number_input.parts.decrementTrigger));
+var getScrubberEl = (ctx) => ctx.query(ctx.selector(import_number_input.parts.scrubber));
+var getScrubberCursorEl = (ctx) => ctx.query(ctx.selector(import_number_input.parts.scrubberCursor));
 var getPressedTriggerEl = (ctx, hint) => {
   let btnEl = null;
   if (hint === "increment") {
@@ -63,20 +61,13 @@ var getPressedTriggerEl = (ctx, hint) => {
   }
   return btnEl;
 };
-var setupVirtualCursor = (ctx, point) => {
-  if ((0, import_dom_query.isSafari)()) return;
-  createVirtualCursor(ctx, point);
-  return () => {
-    getCursorEl(ctx)?.remove();
-  };
-};
-var preventTextSelection = (ctx) => {
+var preventTextSelection = (ctx, direction) => {
   const doc = ctx.getDoc();
   const html = doc.documentElement;
   const body = doc.body;
   body.style.pointerEvents = "none";
   html.style.userSelect = "none";
-  html.style.cursor = "ew-resize";
+  html.style.cursor = direction === "vertical" ? "ns-resize" : "ew-resize";
   return () => {
     body.style.pointerEvents = "";
     html.style.userSelect = "";
@@ -90,49 +81,53 @@ var preventTextSelection = (ctx) => {
   };
 };
 var getMousemoveValue = (ctx, opts) => {
-  const { point, isRtl, event } = opts;
+  const { point, isRtl, event, direction, teleportDistance } = opts;
   const win = ctx.getWin();
   const x = (0, import_utils.roundToDpr)(event.movementX, win.devicePixelRatio);
   const y = (0, import_utils.roundToDpr)(event.movementY, win.devicePixelRatio);
-  let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
-  if (isRtl && hint === "increment") hint = "decrement";
-  if (isRtl && hint === "decrement") hint = "increment";
+  const isVertical = direction === "vertical";
+  const delta = isVertical ? y : x;
+  let hint;
+  if (isVertical) {
+    hint = delta < 0 ? "increment" : delta > 0 ? "decrement" : null;
+  } else {
+    hint = delta > 0 ? "increment" : delta < 0 ? "decrement" : null;
+  }
+  if (!isVertical && isRtl) {
+    if (hint === "increment") hint = "decrement";
+    else if (hint === "decrement") hint = "increment";
+  }
   const newPoint = { x: point.x + x, y: point.y + y };
-  const width = win.innerWidth;
   const half = (0, import_utils.roundToDpr)(7.5, win.devicePixelRatio);
-  newPoint.x = (0, import_utils.wrap)(newPoint.x + half, width) - half;
-  return { hint, point: newPoint };
-};
-var createVirtualCursor = (ctx, point) => {
-  const doc = ctx.getDoc();
-  const el = doc.createElement("div");
-  el.className = "scrubber--cursor";
-  el.id = getCursorId(ctx);
-  Object.assign(el.style, {
-    width: "15px",
-    height: "15px",
-    position: "fixed",
-    pointerEvents: "none",
-    left: "0px",
-    top: "0px",
-    zIndex: import_dom_query.MAX_Z_INDEX,
-    transform: point ? `translate3d(${point.x}px, ${point.y}px, 0px)` : void 0,
-    willChange: "transform"
-  });
-  el.innerHTML = `
-      <svg width="46" height="15" style="left: -15.5px; position: absolute; top: 0; filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1px 1.1px);">
-        <g transform="translate(2 3)">
-          <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z" style="stroke-width: 2px; stroke: white;"></path>
-          <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z"></path>
-        </g>
-      </svg>`;
-  doc.body.appendChild(el);
+  if (teleportDistance != null) {
+    const scrubberEl = getScrubberEl(ctx);
+    if (scrubberEl) {
+      const rect = scrubberEl.getBoundingClientRect();
+      if (isVertical) {
+        const center = rect.top + rect.height / 2;
+        const min = center - teleportDistance / 2;
+        const max = center + teleportDistance / 2;
+        newPoint.y = (0, import_utils.wrap)(newPoint.y + half - min, max - min) + min - half;
+      } else {
+        const center = rect.left + rect.width / 2;
+        const min = center - teleportDistance / 2;
+        const max = center + teleportDistance / 2;
+        newPoint.x = (0, import_utils.wrap)(newPoint.x + half - min, max - min) + min - half;
+      }
+    }
+  } else {
+    if (isVertical) {
+      const height = win.innerHeight;
+      newPoint.y = (0, import_utils.wrap)(newPoint.y + half, height) - half;
+    } else {
+      const width = win.innerWidth;
+      newPoint.x = (0, import_utils.wrap)(newPoint.x + half, width) - half;
+    }
+  }
+  return { hint, point: newPoint, delta };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createVirtualCursor,
-  getCursorEl,
-  getCursorId,
   getDecrementTriggerEl,
   getDecrementTriggerId,
   getIncrementTriggerEl,
@@ -143,8 +138,9 @@ var createVirtualCursor = (ctx, point) => {
   getMousemoveValue,
   getPressedTriggerEl,
   getRootId,
+  getScrubberCursorEl,
+  getScrubberCursorId,
   getScrubberEl,
   getScrubberId,
-  preventTextSelection,
-  setupVirtualCursor
+  preventTextSelection
 });

package/dist/number-input.dom.mjs

@@ -1,18 +1,18 @@
 // src/number-input.dom.ts
-import { isSafari, MAX_Z_INDEX } from "@zag-js/dom-query";
 import { roundToDpr, wrap } from "@zag-js/utils";
-var getRootId = (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`;
-var getInputId = (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`;
-var getIncrementTriggerId = (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`;
-var getDecrementTriggerId = (ctx) => ctx.ids?.decrementTrigger ?? `number-input:${ctx.id}:dec`;
-var getScrubberId = (ctx) => ctx.ids?.scrubber ?? `number-input:${ctx.id}:scrubber`;
-var getCursorId = (ctx) => `number-input:${ctx.id}:cursor`;
-var getLabelId = (ctx) => ctx.ids?.label ?? `number-input:${ctx.id}:label`;
-var getInputEl = (ctx) => ctx.getById(getInputId(ctx));
-var getIncrementTriggerEl = (ctx) => ctx.getById(getIncrementTriggerId(ctx));
-var getDecrementTriggerEl = (ctx) => ctx.getById(getDecrementTriggerId(ctx));
-var getScrubberEl = (ctx) => ctx.getById(getScrubberId(ctx));
-var getCursorEl = (ctx) => ctx.getDoc().getElementById(getCursorId(ctx));
+import { parts } from "./number-input.anatomy.mjs";
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getInputId = (ctx) => ctx.ids?.input ?? `${ctx.id}:input`;
+var getIncrementTriggerId = (ctx) => ctx.ids?.incrementTrigger ?? `${ctx.id}:inc`;
+var getDecrementTriggerId = (ctx) => ctx.ids?.decrementTrigger ?? `${ctx.id}:dec`;
+var getScrubberId = (ctx) => ctx.ids?.scrubber ?? `${ctx.id}:scrubber`;
+var getScrubberCursorId = (ctx) => ctx.ids?.scrubberCursor ?? `${ctx.id}:scrubber-cursor`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getInputEl = (ctx) => ctx.query(ctx.selector(parts.input));
+var getIncrementTriggerEl = (ctx) => ctx.query(ctx.selector(parts.incrementTrigger));
+var getDecrementTriggerEl = (ctx) => ctx.query(ctx.selector(parts.decrementTrigger));
+var getScrubberEl = (ctx) => ctx.query(ctx.selector(parts.scrubber));
+var getScrubberCursorEl = (ctx) => ctx.query(ctx.selector(parts.scrubberCursor));
 var getPressedTriggerEl = (ctx, hint) => {
   let btnEl = null;
   if (hint === "increment") {
@@ -23,20 +23,13 @@ var getPressedTriggerEl = (ctx, hint) => {
   }
   return btnEl;
 };
-var setupVirtualCursor = (ctx, point) => {
-  if (isSafari()) return;
-  createVirtualCursor(ctx, point);
-  return () => {
-    getCursorEl(ctx)?.remove();
-  };
-};
-var preventTextSelection = (ctx) => {
+var preventTextSelection = (ctx, direction) => {
   const doc = ctx.getDoc();
   const html = doc.documentElement;
   const body = doc.body;
   body.style.pointerEvents = "none";
   html.style.userSelect = "none";
-  html.style.cursor = "ew-resize";
+  html.style.cursor = direction === "vertical" ? "ns-resize" : "ew-resize";
   return () => {
     body.style.pointerEvents = "";
     html.style.userSelect = "";
@@ -50,48 +43,52 @@ var preventTextSelection = (ctx) => {
   };
 };
 var getMousemoveValue = (ctx, opts) => {
-  const { point, isRtl, event } = opts;
+  const { point, isRtl, event, direction, teleportDistance } = opts;
   const win = ctx.getWin();
   const x = roundToDpr(event.movementX, win.devicePixelRatio);
   const y = roundToDpr(event.movementY, win.devicePixelRatio);
-  let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
-  if (isRtl && hint === "increment") hint = "decrement";
-  if (isRtl && hint === "decrement") hint = "increment";
+  const isVertical = direction === "vertical";
+  const delta = isVertical ? y : x;
+  let hint;
+  if (isVertical) {
+    hint = delta < 0 ? "increment" : delta > 0 ? "decrement" : null;
+  } else {
+    hint = delta > 0 ? "increment" : delta < 0 ? "decrement" : null;
+  }
+  if (!isVertical && isRtl) {
+    if (hint === "increment") hint = "decrement";
+    else if (hint === "decrement") hint = "increment";
+  }
   const newPoint = { x: point.x + x, y: point.y + y };
-  const width = win.innerWidth;
   const half = roundToDpr(7.5, win.devicePixelRatio);
-  newPoint.x = wrap(newPoint.x + half, width) - half;
-  return { hint, point: newPoint };
-};
-var createVirtualCursor = (ctx, point) => {
-  const doc = ctx.getDoc();
-  const el = doc.createElement("div");
-  el.className = "scrubber--cursor";
-  el.id = getCursorId(ctx);
-  Object.assign(el.style, {
-    width: "15px",
-    height: "15px",
-    position: "fixed",
-    pointerEvents: "none",
-    left: "0px",
-    top: "0px",
-    zIndex: MAX_Z_INDEX,
-    transform: point ? `translate3d(${point.x}px, ${point.y}px, 0px)` : void 0,
-    willChange: "transform"
-  });
-  el.innerHTML = `
-      <svg width="46" height="15" style="left: -15.5px; position: absolute; top: 0; filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1px 1.1px);">
-        <g transform="translate(2 3)">
-          <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z" style="stroke-width: 2px; stroke: white;"></path>
-          <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z"></path>
-        </g>
-      </svg>`;
-  doc.body.appendChild(el);
+  if (teleportDistance != null) {
+    const scrubberEl = getScrubberEl(ctx);
+    if (scrubberEl) {
+      const rect = scrubberEl.getBoundingClientRect();
+      if (isVertical) {
+        const center = rect.top + rect.height / 2;
+        const min = center - teleportDistance / 2;
+        const max = center + teleportDistance / 2;
+        newPoint.y = wrap(newPoint.y + half - min, max - min) + min - half;
+      } else {
+        const center = rect.left + rect.width / 2;
+        const min = center - teleportDistance / 2;
+        const max = center + teleportDistance / 2;
+        newPoint.x = wrap(newPoint.x + half - min, max - min) + min - half;
+      }
+    }
+  } else {
+    if (isVertical) {
+      const height = win.innerHeight;
+      newPoint.y = wrap(newPoint.y + half, height) - half;
+    } else {
+      const width = win.innerWidth;
+      newPoint.x = wrap(newPoint.x + half, width) - half;
+    }
+  }
+  return { hint, point: newPoint, delta };
 };
 export {
-  createVirtualCursor,
-  getCursorEl,
-  getCursorId,
   getDecrementTriggerEl,
   getDecrementTriggerId,
   getIncrementTriggerEl,
@@ -102,8 +99,9 @@ export {
   getMousemoveValue,
   getPressedTriggerEl,
   getRootId,
+  getScrubberCursorEl,
+  getScrubberCursorId,
   getScrubberEl,
   getScrubberId,
-  preventTextSelection,
-  setupVirtualCursor
+  preventTextSelection
 };

package/dist/number-input.machine.js

@@ -57,6 +57,9 @@ var machine = createMachine({
       min: Number.MIN_SAFE_INTEGER,
       max: Number.MAX_SAFE_INTEGER,
       spinOnPress: true,
+      scrubberPixelSensitivity: 2,
+      scrubberDirection: "horizontal",
+      snapOnStep: false,
       ...props,
       largeStep: props.largeStep ?? 10 * step,
       smallStep: props.smallStep ?? step / 10,
@@ -88,7 +91,10 @@ var machine = createMachine({
           return value ? `x:${value.x}, y:${value.y}` : "";
         }
       })),
-      fieldsetDisabled: bindable(() => ({ defaultValue: false }))
+      fieldsetDisabled: bindable(() => ({ defaultValue: false })),
+      cumulativeDelta: bindable(() => ({ defaultValue: 0 })),
+      isPointerLockSupported: bindable(() => ({ defaultValue: false })),
+      visualScale: bindable(() => ({ defaultValue: 1 }))
     };
   },
   computed: {
@@ -123,7 +129,7 @@ var machine = createMachine({
       action(["setVirtualCursorPosition"]);
     });
   },
-  effects: ["trackFormControl"],
+  effects: ["trackFormControl", "detectPointerLock"],
   on: {
     "VALUE.SET": {
       actions: ["setRawValue"]
@@ -246,22 +252,16 @@ var machine = createMachine({
     },
     scrubbing: {
       tags: ["focus"],
-      effects: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
+      effects: ["activatePointerLock", "trackMousemove", "preventTextSelection", "trackVisualViewport"],
+      entry: ["clearCumulativeDelta"],
       on: {
         "SCRUBBER.POINTER_UP": {
           target: "focused",
-          actions: ["focusInput", "clearCursorPoint"]
+          actions: ["focusInput", "clearCursorPoint", "clearCumulativeDelta"]
         },
-        "SCRUBBER.POINTER_MOVE": [
-          {
-            guard: "isIncrementHint",
-            actions: ["increment", "setCursorPoint"]
-          },
-          {
-            guard: "isDecrementHint",
-            actions: ["decrement", "setCursorPoint"]
-          }
-        ]
+        "SCRUBBER.POINTER_MOVE": {
+          actions: ["accumulateDelta", "setCursorPoint"]
+        }
       }
     }
   },
@@ -288,6 +288,9 @@ var machine = createMachine({
         }, 50);
         return () => clearInterval(id);
       },
+      detectPointerLock({ context }) {
+        context.set("isPointerLockSupported", !(0, import_dom_query.isSafari)());
+      },
       trackFormControl({ context, scope }) {
         const inputEl = dom.getInputEl(scope);
         return (0, import_dom_query.trackFormControl)(inputEl, {
@@ -299,12 +302,8 @@ var machine = createMachine({
           }
         });
       },
-      setupVirtualCursor({ context, scope }) {
-        const point = context.get("scrubberCursorPoint");
-        return dom.setupVirtualCursor(scope, point);
-      },
-      preventTextSelection({ scope }) {
-        return dom.preventTextSelection(scope);
+      preventTextSelection({ scope, prop }) {
+        return dom.preventTextSelection(scope, prop("scrubberDirection"));
       },
       trackButtonDisabled({ context, scope, send }) {
         const hint = context.get("hint");
@@ -330,21 +329,39 @@ var machine = createMachine({
         }
         return (0, import_dom_query.addDomEvent)(inputEl, "wheel", onWheel, { passive: false });
       },
+      trackVisualViewport({ scope, context }) {
+        const vV = scope.getWin().visualViewport;
+        if (!vV) return;
+        function onResize() {
+          context.set("visualScale", vV.scale);
+        }
+        onResize();
+        return (0, import_dom_query.addDomEvent)(vV, "resize", onResize);
+      },
       activatePointerLock({ scope }) {
         if ((0, import_dom_query.isSafari)()) return;
-        return (0, import_dom_query.requestPointerLock)(scope.getDoc());
+        const cleanup = (0, import_dom_query.requestPointerLock)(scope.getDoc());
+        return () => {
+          if ((0, import_dom_query.isFirefox)()) {
+            setTimeout(() => cleanup?.(), 20);
+          } else {
+            cleanup?.();
+          }
+        };
       },
-      trackMousemove({ scope, send, context, computed }) {
+      trackMousemove({ scope, send, context, computed, prop }) {
         const doc = scope.getDoc();
         function onMousemove(event) {
           const point = context.get("scrubberCursorPoint");
           const isRtl = computed("isRtl");
-          const value = dom.getMousemoveValue(scope, { point, isRtl, event });
-          if (!value.hint) return;
+          const direction = prop("scrubberDirection");
+          const teleportDistance = prop("scrubberTeleportDistance");
+          const value = dom.getMousemoveValue(scope, { point, isRtl, event, direction, teleportDistance });
           send({
             type: "SCRUBBER.POINTER_MOVE",
             hint: value.hint,
-            point: value.point
+            point: value.point,
+            delta: value.delta
           });
         }
         function onMouseup() {
@@ -363,11 +380,15 @@ var machine = createMachine({
       increment({ context, event, prop, computed }) {
         let nextValue = (0, import_utils.incrementValue)(computed("valueAsNumber"), event.step ?? prop("step"));
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
+        if (prop("snapOnStep"))
+          nextValue = (0, import_utils.snapValueToStep)(nextValue, prop("min"), prop("max"), event.step ?? prop("step"));
         context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
       },
       decrement({ context, event, prop, computed }) {
         let nextValue = (0, import_utils.decrementValue)(computed("valueAsNumber"), event.step ?? prop("step"));
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
+        if (prop("snapOnStep"))
+          nextValue = (0, import_utils.snapValueToStep)(nextValue, prop("min"), prop("max"), event.step ?? prop("step"));
         context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
       },
       setClampedValue({ context, prop, computed }) {
@@ -449,10 +470,31 @@ var machine = createMachine({
         context.set("scrubberCursorPoint", null);
       },
       setVirtualCursorPosition({ context, scope }) {
-        const cursorEl = dom.getCursorEl(scope);
+        const scrubberEl = dom.getScrubberEl(scope);
         const point = context.get("scrubberCursorPoint");
-        if (!cursorEl || !point) return;
-        cursorEl.style.transform = `translate3d(${point.x}px, ${point.y}px, 0px)`;
+        if (!scrubberEl || !point) return;
+        scrubberEl.style.setProperty("--scrubber-x", `${point.x}px`);
+        scrubberEl.style.setProperty("--scrubber-y", `${point.y}px`);
+      },
+      accumulateDelta({ context, event, prop, send }) {
+        const delta = event.delta ?? 0;
+        const newDelta = context.get("cumulativeDelta") + delta;
+        const sensitivity = prop("scrubberPixelSensitivity");
+        if (Math.abs(newDelta) >= sensitivity) {
+          const step = prop("step");
+          const hint = event.hint;
+          if (hint === "increment") {
+            send({ type: "VALUE.INCREMENT", step });
+          } else if (hint === "decrement") {
+            send({ type: "VALUE.DECREMENT", step });
+          }
+          context.set("cumulativeDelta", newDelta % sensitivity);
+        } else {
+          context.set("cumulativeDelta", newDelta);
+        }
+      },
+      clearCumulativeDelta({ context }) {
+        context.set("cumulativeDelta", 0);
       }
     }
   }