motion-v 1.7.6 → 1.8.0

package/dist/cjs/index.js

@@ -1,4 +1,5 @@
 "use strict";
+var _a;
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const motionDom = require("motion-dom");
 const vue = require("vue");
@@ -36,7 +37,7 @@ exports.warning = () => {
 };
 exports.invariant = () => {
 };
-if (process.env.NODE_ENV !== "production") {
+if (typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) !== "production") {
   exports.warning = (check, message, errorCode) => {
     if (!check && typeof console !== "undefined") {
       console.warn(formatErrorMessage(message, errorCode));
@@ -916,7 +917,7 @@ class VisualElement {
     }
   }
   mount(instance) {
-    var _a;
+    var _a2;
     this.current = instance;
     visualElementStore.set(instance, this);
     if (this.projection && !this.projection.instance) {
@@ -926,25 +927,31 @@ class VisualElement {
       this.removeFromVariantTree = this.parent.addVariantChild(this);
     }
     this.values.forEach((value, key) => this.bindToMotionValue(key, value));
-    if (!hasReducedMotionListener.current) {
-      initPrefersReducedMotion();
+    if (this.reducedMotionConfig === "never") {
+      this.shouldReduceMotion = false;
+    } else if (this.reducedMotionConfig === "always") {
+      this.shouldReduceMotion = true;
+    } else {
+      if (!hasReducedMotionListener.current) {
+        initPrefersReducedMotion();
+      }
+      this.shouldReduceMotion = prefersReducedMotion.current;
     }
-    this.shouldReduceMotion = this.reducedMotionConfig === "never" ? false : this.reducedMotionConfig === "always" ? true : prefersReducedMotion.current;
     if (process.env.NODE_ENV !== "production") {
       warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
     }
-    (_a = this.parent) == null ? void 0 : _a.addChild(this);
+    (_a2 = this.parent) == null ? void 0 : _a2.addChild(this);
     this.update(this.props, this.presenceContext);
   }
   unmount() {
-    var _a;
+    var _a2;
     this.projection && this.projection.unmount();
     motionDom.cancelFrame(this.notifyUpdate);
     motionDom.cancelFrame(this.render);
     this.valueSubscriptions.forEach((remove) => remove());
     this.valueSubscriptions.clear();
     this.removeFromVariantTree && this.removeFromVariantTree();
-    (_a = this.parent) == null ? void 0 : _a.removeChild(this);
+    (_a2 = this.parent) == null ? void 0 : _a2.removeChild(this);
     for (const key in this.events) {
       this.events[key].clear();
     }
@@ -1170,11 +1177,11 @@ class VisualElement {
    * props.
    */
   getBaseTarget(key) {
-    var _a;
+    var _a2;
     const { initial } = this.props;
     let valueFromInitial;
     if (typeof initial === "string" || typeof initial === "object") {
-      const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) == null ? void 0 : _a.custom);
+      const variant = resolveVariantFromProps(this.props, initial, (_a2 = this.presenceContext) == null ? void 0 : _a2.custom);
       if (variant) {
         valueFromInitial = variant[key];
       }
@@ -1387,11 +1394,11 @@ function isForcedMotionValue(key, { layout, layoutId }) {
   return motionDom.transformProps.has(key) || key.startsWith("origin") || (layout || layoutId !== void 0) && (!!scaleCorrectors[key] || key === "opacity");
 }
 function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-  var _a;
+  var _a2;
   const { style: style2 } = props;
   const newValues = {};
   for (const key in style2) {
-    if (motionDom.isMotionValue(style2[key]) || prevProps.style && motionDom.isMotionValue(prevProps.style[key]) || isForcedMotionValue(key, props) || ((_a = visualElement == null ? void 0 : visualElement.getValue(key)) == null ? void 0 : _a.liveStyle) !== void 0) {
+    if (motionDom.isMotionValue(style2[key]) || prevProps.style && motionDom.isMotionValue(prevProps.style[key]) || isForcedMotionValue(key, props) || ((_a2 = visualElement == null ? void 0 : visualElement.getValue(key)) == null ? void 0 : _a2.liveStyle) !== void 0) {
       newValues[key] = style2[key];
     }
   }
@@ -1407,9 +1414,9 @@ class HTMLVisualElement extends DOMVisualElement {
     this.renderInstance = renderHTML;
   }
   readValueFromInstance(instance, key) {
-    var _a;
+    var _a2;
     if (motionDom.transformProps.has(key)) {
-      return ((_a = this.projection) == null ? void 0 : _a.isProjecting) ? motionDom.defaultTransformValue(key) : motionDom.readTransformValue(instance, key);
+      return ((_a2 = this.projection) == null ? void 0 : _a2.isProjecting) ? motionDom.defaultTransformValue(key) : motionDom.readTransformValue(instance, key);
     } else {
       const computedStyle = getComputedStyle$1(instance);
       const value = (motionDom.isCSSVariableName(key) ? computedStyle.getPropertyValue(key) : computedStyle[key]) || 0;
@@ -1478,6 +1485,12 @@ function buildSVGPath$1(attrs, length, spacing = 1, offset = 0, useDashCase = tr
   const pathSpacing = motionDom.px.transform(spacing);
   attrs[keys2.array] = `${pathLength} ${pathSpacing}`;
 }
+const cssMotionPathProperties = [
+  "offsetDistance",
+  "offsetPath",
+  "offsetRotate",
+  "offsetAnchor"
+];
 function buildSVGAttrs(state, {
   attrX,
   attrY,
@@ -1510,6 +1523,12 @@ function buildSVGAttrs(state, {
     style2.transformBox = (styleProp == null ? void 0 : styleProp.transformBox) ?? "fill-box";
     delete attrs.transformBox;
   }
+  for (const key of cssMotionPathProperties) {
+    if (attrs[key] !== void 0) {
+      style2[key] = attrs[key];
+      delete attrs[key];
+    }
+  }
   if (attrX !== void 0)
     attrs.x = attrX;
   if (attrY !== void 0)
@@ -2015,7 +2034,7 @@ function scrollInfo(onScroll, { container = document.scrollingElement, ...option
   const listener = scrollListeners.get(container);
   motionDom.frame.read(listener, false, true);
   return () => {
-    var _a;
+    var _a2;
     motionDom.cancelFrame(listener);
     const currentHandlers = onScrollHandlers.get(container);
     if (!currentHandlers)
@@ -2027,7 +2046,7 @@ function scrollInfo(onScroll, { container = document.scrollingElement, ...option
     scrollListeners.delete(container);
     if (scrollListener) {
       getEventTarget(container).removeEventListener("scroll", scrollListener);
-      (_a = resizeListeners.get(container)) == null ? void 0 : _a();
+      (_a2 = resizeListeners.get(container)) == null ? void 0 : _a2();
       window.removeEventListener("resize", scrollListener);
     }
   };
@@ -2722,13 +2741,21 @@ function calcOrigin(source, target) {
 function isHTMLElement(value) {
   return typeof value === "object" && value !== null && "nodeType" in value;
 }
+const overflowStyles$1 = /* @__PURE__ */ new Set(["auto", "scroll"]);
 class PanSession {
-  constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false } = {}) {
+  constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, element } = {}) {
     this.startEvent = null;
     this.lastMoveEvent = null;
     this.lastMoveEventInfo = null;
     this.handlers = {};
     this.contextWindow = window;
+    this.scrollPositions = /* @__PURE__ */ new Map();
+    this.onElementScroll = (event2) => {
+      this.handleScroll(event2.target);
+    };
+    this.onWindowScroll = () => {
+      this.handleScroll(window);
+    };
     this.updatePoint = () => {
       if (!(this.lastMoveEvent && this.lastMoveEventInfo))
         return;
@@ -2755,8 +2782,9 @@ class PanSession {
     this.handlePointerUp = (event2, info2) => {
       this.end();
       const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
-      if (this.dragSnapToOrigin)
+      if (this.dragSnapToOrigin || !this.startEvent) {
         resumeAnimation && resumeAnimation();
+      }
       if (!(this.lastMoveEvent && this.lastMoveEventInfo))
         return;
       const panInfo = getPanInfo(
@@ -2798,12 +2826,93 @@ class PanSession {
         this.handlePointerUp
       )
     );
+    if (element) {
+      this.startScrollTracking(element);
+    }
+  }
+  /**
+   * Check if element has scrollable overflow
+   */
+  isScrollable(node) {
+    const style2 = window.getComputedStyle(node);
+    return style2.overflow === "auto" || style2.overflow === "scroll" || style2.overflowX === "auto" || style2.overflowX === "scroll" || style2.overflowY === "auto" || style2.overflowY === "scroll";
+  }
+  /**
+   * Start tracking scroll on ancestors and window.
+   */
+  /**
+   * Start tracking scroll on ancestors and window.
+   */
+  startScrollTracking(element) {
+    let current = element.parentElement;
+    while (current) {
+      const style2 = getComputedStyle(current);
+      if (overflowStyles$1.has(style2.overflowX) || overflowStyles$1.has(style2.overflowY)) {
+        this.scrollPositions.set(current, {
+          x: current.scrollLeft,
+          y: current.scrollTop
+        });
+      }
+      current = current.parentElement;
+    }
+    this.scrollPositions.set(window, {
+      x: window.scrollX,
+      y: window.scrollY
+    });
+    window.addEventListener("scroll", this.onElementScroll, {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("scroll", this.onWindowScroll, {
+      passive: true
+    });
+    this.removeScrollListeners = () => {
+      window.removeEventListener("scroll", this.onElementScroll, {
+        capture: true
+      });
+      window.removeEventListener("scroll", this.onWindowScroll);
+    };
+  }
+  /**
+   * Handle scroll compensation during drag.
+   *
+   * For element scroll: adjusts history origin since pageX/pageY doesn't change.
+   * For window scroll: adjusts lastMoveEventInfo since pageX/pageY would change.
+   */
+  handleScroll(target) {
+    const initial = this.scrollPositions.get(target);
+    if (!initial)
+      return;
+    const isWindow = target === window;
+    const current = isWindow ? { x: window.scrollX, y: window.scrollY } : {
+      x: target.scrollLeft,
+      y: target.scrollTop
+    };
+    const delta = { x: current.x - initial.x, y: current.y - initial.y };
+    if (delta.x === 0 && delta.y === 0)
+      return;
+    if (isWindow) {
+      if (this.lastMoveEventInfo) {
+        this.lastMoveEventInfo.point.x += delta.x;
+        this.lastMoveEventInfo.point.y += delta.y;
+      }
+    } else {
+      if (this.history.length > 0) {
+        this.history[0].x -= delta.x;
+        this.history[0].y -= delta.y;
+      }
+    }
+    this.scrollPositions.set(target, current);
+    motionDom.frame.update(this.updatePoint, true);
   }
   updateHandlers(handlers) {
     this.handlers = handlers;
   }
   end() {
+    var _a2;
     this.removeListeners && this.removeListeners();
+    (_a2 = this.removeScrollListeners) == null ? void 0 : _a2.call(this);
+    this.scrollPositions.clear();
     motionDom.cancelFrame(this.updatePoint);
   }
 }
@@ -2926,8 +3035,8 @@ function measurePageBox(element, rootProjectionNode2, transformPagePoint) {
   return viewportBox;
 }
 function isPresent(visualElement) {
-  var _a;
-  return (_a = visualElement.projection) == null ? void 0 : _a.isPresent;
+  var _a2;
+  return (_a2 = visualElement.projection) == null ? void 0 : _a2.isPresent;
 }
 const elementDragControls = /* @__PURE__ */ new WeakMap();
 class VisualElementDragControls {
@@ -2943,13 +3052,17 @@ class VisualElementDragControls {
   }
   start(originEvent, { snapToCursor = false } = {}) {
     const onSessionStart = (event) => {
-      const { dragSnapToOrigin: dragSnapToOrigin2 } = this.getProps();
-      dragSnapToOrigin2 ? this.pauseAnimation() : this.stopAnimation();
+      if (snapToCursor) {
+        this.stopAnimation();
+      } else {
+        this.pauseAnimation();
+      }
       if (snapToCursor) {
         this.snapToCursor(extractEventInfo(event, "page").point);
       }
     };
     const onStart = (event, info) => {
+      this.stopAnimation();
       const { drag, dragPropagation, onDragStart } = this.getProps();
       if (drag && !dragPropagation) {
         if (this.openGlobalLock)
@@ -3011,8 +3124,8 @@ class VisualElementDragControls {
     const onSessionEnd = (event, info) => this.stop(event, info);
     const resumeAnimation = () => eachAxis$1(
       (axis) => {
-        var _a;
-        return this.getAnimationState(axis) === "paused" && ((_a = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a.play());
+        var _a2;
+        return this.getAnimationState(axis) === "paused" && ((_a2 = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a2.play());
       }
     );
     const { dragSnapToOrigin } = this.getProps();
@@ -3028,7 +3141,8 @@ class VisualElementDragControls {
       {
         transformPagePoint: this.visualElement.getTransformPagePoint(),
         dragSnapToOrigin,
-        contextWindow: getContextWindow(this.visualElement)
+        contextWindow: getContextWindow(this.visualElement),
+        element: this.visualElement.current
       }
     );
   }
@@ -3076,9 +3190,9 @@ class VisualElementDragControls {
     axisValue.set(next);
   }
   resolveConstraints() {
-    var _a;
+    var _a2;
     const { dragConstraints, dragElastic } = this.getProps();
-    const layout = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(false) : (_a = this.visualElement.projection) == null ? void 0 : _a.layout;
+    const layout = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(false) : (_a2 = this.visualElement.projection) == null ? void 0 : _a2.layout;
     const prevConstraints = this.constraints;
     if (dragConstraints && isHTMLElement(dragConstraints)) {
       if (!this.constraints) {
@@ -3193,13 +3307,13 @@ class VisualElementDragControls {
   }
   pauseAnimation() {
     eachAxis$1((axis) => {
-      var _a;
-      return (_a = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a.pause();
+      var _a2;
+      return (_a2 = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a2.pause();
     });
   }
   getAnimationState(axis) {
-    var _a;
-    return (_a = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a.state;
+    var _a2;
+    return (_a2 = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a2.state;
   }
   /**
    * Drag works differently depending on which props are provided.
@@ -3415,16 +3529,16 @@ class LayoutFeature extends Feature {
     this.didUpdate();
   }
   didUpdate() {
-    var _a, _b;
+    var _a2, _b;
     if (!hasLayoutUpdate)
       return;
     if (this.state.options.layout || this.state.options.layoutId || this.state.options.drag) {
       hasLayoutUpdate = false;
-      (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
+      (_b = (_a2 = this.state.visualElement.projection) == null ? void 0 : _a2.root) == null ? void 0 : _b.didUpdate();
     }
   }
   mount() {
-    var _a;
+    var _a2;
     const options = this.state.options;
     const layoutGroup = this.state.options.layoutGroup;
     if (options.layout || options.layoutId) {
@@ -3436,7 +3550,7 @@ class LayoutFeature extends Feature {
           stack.prevLead.willUpdate();
           hasLayoutUpdate = true;
         }
-        (_a = layoutGroup == null ? void 0 : layoutGroup.group) == null ? void 0 : _a.add(projection);
+        (_a2 = layoutGroup == null ? void 0 : layoutGroup.group) == null ? void 0 : _a2.add(projection);
       }
       globalProjectionState.hasEverUpdated = true;
     }
@@ -3566,8 +3680,8 @@ class FeatureManager {
   }
   beforeMount() {
     this.features.forEach((feature) => {
-      var _a;
-      return (_a = feature.beforeMount) == null ? void 0 : _a.call(feature);
+      var _a2;
+      return (_a2 = feature.beforeMount) == null ? void 0 : _a2.call(feature);
     });
   }
   unmount(unMountChildren = false) {
@@ -3575,14 +3689,14 @@ class FeatureManager {
   }
   update() {
     this.features.forEach((feature) => {
-      var _a;
-      return (_a = feature.update) == null ? void 0 : _a.call(feature);
+      var _a2;
+      return (_a2 = feature.update) == null ? void 0 : _a2.call(feature);
     });
   }
   beforeUpdate(options) {
     this.features.forEach((feature) => {
-      var _a;
-      return (_a = feature.beforeUpdate) == null ? void 0 : _a.call(feature, options);
+      var _a2;
+      return (_a2 = feature.beforeUpdate) == null ? void 0 : _a2.call(feature, options);
     });
   }
   beforeUnmount() {
@@ -3671,7 +3785,7 @@ const style = {
   }
 };
 function createStyles(keyframes) {
-  var _a;
+  var _a2;
   const initialKeyframes = {};
   const transforms2 = [];
   for (let key in keyframes) {
@@ -3685,7 +3799,7 @@ function createStyles(keyframes) {
     let initialKeyframe = Array.isArray(value) ? value[0] : value;
     const definition = transformDefinitions.get(key);
     if (definition) {
-      initialKeyframe = isNumber(value) ? (_a = definition.toDefaultUnit) == null ? void 0 : _a.call(definition, value) : value;
+      initialKeyframe = isNumber(value) ? (_a2 = definition.toDefaultUnit) == null ? void 0 : _a2.call(definition, value) : value;
       transforms2.push([key, initialKeyframe]);
     } else {
       initialKeyframes[key] = initialKeyframe;
@@ -3791,7 +3905,7 @@ function calcChildStagger(children, child, delayChildren, staggerChildren = 0, s
 const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
 class AnimationFeature extends Feature {
   constructor(state) {
-    var _a, _b;
+    var _a2, _b;
     super(state);
     this.animateUpdates = ({
       controlActiveState,
@@ -3823,7 +3937,7 @@ class AnimationFeature extends Feature {
     };
     this.state.visualElement = createVisualElement(this.state.options.as, {
       presenceContext: null,
-      parent: (_a = this.state.parent) == null ? void 0 : _a.visualElement,
+      parent: (_a2 = this.state.parent) == null ? void 0 : _a2.visualElement,
       props: {
         ...this.state.options,
         whileTap: this.state.options.whilePress
@@ -3864,19 +3978,19 @@ class AnimationFeature extends Feature {
     const animationTarget2 = { ...this.state.target };
     const element = this.state.element;
     const finishAnimation2 = (animationPromise) => {
-      var _a, _b;
+      var _a2, _b;
       if (isExit) {
         this.state.isExiting = true;
       }
       element.dispatchEvent(motionEvent("motionstart", animationTarget2));
-      (_b = (_a = this.state.options).onAnimationStart) == null ? void 0 : _b.call(_a, animationTarget2);
+      (_b = (_a2 = this.state.options).onAnimationStart) == null ? void 0 : _b.call(_a2, animationTarget2);
       animationPromise.then(() => {
-        var _a2, _b2;
+        var _a3, _b2;
         if (isExit) {
           this.state.isExiting = false;
         }
         element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
-        (_b2 = (_a2 = this.state.options).onAnimationComplete) == null ? void 0 : _b2.call(_a2, animationTarget2);
+        (_b2 = (_a3 = this.state.options).onAnimationComplete) == null ? void 0 : _b2.call(_a3, animationTarget2);
       }).catch(noop);
     };
     const getAnimationPromise = () => {
@@ -3890,9 +4004,9 @@ class AnimationFeature extends Feature {
    * Setup child animations
    */
   setupChildAnimations(transition, controlActiveState) {
-    var _a;
+    var _a2;
     const visualElement = this.state.visualElement;
-    if (!((_a = visualElement.variantChildren) == null ? void 0 : _a.size) || !controlActiveState)
+    if (!((_a2 = visualElement.variantChildren) == null ? void 0 : _a2.size) || !controlActiveState)
       return { getChildAnimations: () => Promise.resolve() };
     const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
     const numChildren = visualElement.variantChildren.size;
@@ -3914,19 +4028,19 @@ class AnimationFeature extends Feature {
   createAnimationFactories(prevTarget, animationOptions, controlDelay) {
     const factories = [];
     Object.keys(this.state.target).forEach((key) => {
-      var _a;
+      var _a2;
       if (!hasChanged(prevTarget[key], this.state.target[key]))
         return;
-      (_a = this.state.baseTarget)[key] ?? (_a[key] = style.get(this.state.element, key));
+      (_a2 = this.state.baseTarget)[key] ?? (_a2[key] = style.get(this.state.element, key));
       const keyValue = this.state.target[key] === "none" && core.isDef(transformResetValue[key]) ? transformResetValue[key] : this.state.target[key];
       factories.push(() => {
-        var _a2;
+        var _a3;
         return animate(
           this.state.element,
           { [key]: keyValue },
           {
             ...(animationOptions == null ? void 0 : animationOptions[key]) || animationOptions,
-            delay: (((_a2 = animationOptions == null ? void 0 : animationOptions[key]) == null ? void 0 : _a2.delay) || (animationOptions == null ? void 0 : animationOptions.delay) || 0) + controlDelay
+            delay: (((_a3 = animationOptions == null ? void 0 : animationOptions[key]) == null ? void 0 : _a3.delay) || (animationOptions == null ? void 0 : animationOptions.delay) || 0) + controlDelay
           }
         );
       });
@@ -3973,7 +4087,7 @@ class AnimationFeature extends Feature {
    * Subscribe any provided AnimationControls to the component's VisualElement
    */
   mount() {
-    var _a, _b;
+    var _a2, _b;
     const { element } = this.state;
     mountedStates.set(element, this.state);
     if (!visualElementStore.get(element)) {
@@ -3985,7 +4099,7 @@ class AnimationFeature extends Feature {
     const visualElement = this.state.visualElement;
     const parentVisualElement = visualElement.parent;
     visualElement.enteringChildren = void 0;
-    if (((_a = this.state.parent) == null ? void 0 : _a.isMounted()) && !visualElement.isControllingVariants && ((_b = parentVisualElement == null ? void 0 : parentVisualElement.enteringChildren) == null ? void 0 : _b.has(visualElement))) {
+    if (((_a2 = this.state.parent) == null ? void 0 : _a2.isMounted()) && !visualElement.isControllingVariants && ((_b = parentVisualElement == null ? void 0 : parentVisualElement.enteringChildren) == null ? void 0 : _b.has(visualElement))) {
       const { delayChildren } = this.state.parent.finalTransition || {};
       this.animateUpdates({
         controlActiveState: this.state.parent.activeStates,
@@ -4001,8 +4115,8 @@ class AnimationFeature extends Feature {
     }
   }
   unmount() {
-    var _a;
-    (_a = this.unmountControls) == null ? void 0 : _a.call(this);
+    var _a2;
+    (_a2 = this.unmountControls) == null ? void 0 : _a2.call(this);
   }
 }
 class FocusGesture extends Feature {
@@ -4737,12 +4851,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       };
     }
     measurePageBox() {
-      var _a;
+      var _a2;
       const { visualElement } = this.options;
       if (!visualElement)
         return createBox$1();
       const box = visualElement.measureViewportBox();
-      const wasInScrollRoot = ((_a = this.scroll) == null ? void 0 : _a.wasRoot) || this.path.some(checkNodeWasScrollRoot);
+      const wasInScrollRoot = ((_a2 = this.scroll) == null ? void 0 : _a2.wasRoot) || this.path.some(checkNodeWasScrollRoot);
       if (!wasInScrollRoot) {
         const { scroll: scroll2 } = this.root;
         if (scroll2) {
@@ -4753,10 +4867,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       return box;
     }
     removeElementScroll(box) {
-      var _a;
+      var _a2;
       const boxWithoutScroll = createBox$1();
       copyBoxInto(boxWithoutScroll, box);
-      if ((_a = this.scroll) == null ? void 0 : _a.wasRoot) {
+      if ((_a2 = this.scroll) == null ? void 0 : _a2.wasRoot) {
         return boxWithoutScroll;
       }
       for (let i = 0; i < this.path.length; i++) {
@@ -4841,13 +4955,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
     }
     resolveTargetDelta(forceRecalculation = false) {
-      var _a;
+      var _a2;
       const lead = this.getLead();
       this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);
       this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);
       this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
       const isShared = Boolean(this.resumingFrom) || this !== lead;
-      const canSkip = !(forceRecalculation || isShared && this.isSharedProjectionDirty || this.isProjectionDirty || ((_a = this.parent) == null ? void 0 : _a.isProjectionDirty) || this.attemptToResolveRelativeTarget || this.root.updateBlockedByResize);
+      const canSkip = !(forceRecalculation || isShared && this.isSharedProjectionDirty || this.isProjectionDirty || ((_a2 = this.parent) == null ? void 0 : _a2.isProjectionDirty) || this.attemptToResolveRelativeTarget || this.root.updateBlockedByResize);
       if (canSkip)
         return;
       const { layout, layoutId } = this.options;
@@ -4922,11 +5036,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.relativeParent = this.relativeTarget = void 0;
     }
     calcProjection() {
-      var _a;
+      var _a2;
       const lead = this.getLead();
       const isShared = Boolean(this.resumingFrom) || this !== lead;
       let canSkip = true;
-      if (this.isProjectionDirty || ((_a = this.parent) == null ? void 0 : _a.isProjectionDirty)) {
+      if (this.isProjectionDirty || ((_a2 = this.parent) == null ? void 0 : _a2.isProjectionDirty)) {
         canSkip = false;
       }
       if (isShared && (this.isSharedProjectionDirty || this.isTransformDirty)) {
@@ -4983,8 +5097,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.isVisible = true;
     }
     scheduleRender(notifyAll = true) {
-      var _a;
-      (_a = this.options.visualElement) == null ? void 0 : _a.scheduleRender();
+      var _a2;
+      (_a2 = this.options.visualElement) == null ? void 0 : _a2.scheduleRender();
       if (notifyAll) {
         const stack = this.getStack();
         stack && stack.scheduleRender();
@@ -5042,9 +5156,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.mixTargetDelta(this.options.layoutRoot ? 1e3 : 0);
     }
     startAnimation(options) {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       this.notifyListeners("animationStart");
-      (_a = this.currentAnimation) == null ? void 0 : _a.stop();
+      (_a2 = this.currentAnimation) == null ? void 0 : _a2.stop();
       (_c = (_b = this.resumingFrom) == null ? void 0 : _b.currentAnimation) == null ? void 0 : _c.stop();
       if (this.pendingAnimation) {
         motionDom.cancelFrame(this.pendingAnimation);
@@ -5129,14 +5243,14 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       return stack ? stack.lead === this : true;
     }
     getLead() {
-      var _a;
+      var _a2;
       const { layoutId } = this.options;
-      return layoutId ? ((_a = this.getStack()) == null ? void 0 : _a.lead) || this : this;
+      return layoutId ? ((_a2 = this.getStack()) == null ? void 0 : _a2.lead) || this : this;
     }
     getPrevLead() {
-      var _a;
+      var _a2;
       const { layoutId } = this.options;
-      return layoutId ? (_a = this.getStack()) == null ? void 0 : _a.prevLead : void 0;
+      return layoutId ? (_a2 = this.getStack()) == null ? void 0 : _a2.prevLead : void 0;
     }
     getStack() {
       const { layoutId } = this.options;
@@ -5261,8 +5375,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     // Only run on root
     resetTree() {
       this.root.nodes.forEach((node) => {
-        var _a;
-        return (_a = node.currentAnimation) == null ? void 0 : _a.stop();
+        var _a2;
+        return (_a2 = node.currentAnimation) == null ? void 0 : _a2.stop();
       });
       this.root.nodes.forEach(clearMeasurements);
       this.root.sharedNodes.clear();
@@ -5273,8 +5387,8 @@ function updateLayout(node) {
   node.updateLayout();
 }
 function notifyLayoutUpdate(node) {
-  var _a;
-  const snapshot = ((_a = node.resumeFrom) == null ? void 0 : _a.snapshot) || node.snapshot;
+  var _a2;
+  const snapshot = ((_a2 = node.resumeFrom) == null ? void 0 : _a2.snapshot) || node.snapshot;
   if (node.isLead() && node.layout && snapshot && node.hasListeners("didUpdate")) {
     const { layoutBox: layout, measuredBox: measuredLayout } = node.layout;
     const { animationType } = node.options;
@@ -5424,8 +5538,8 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout) {
   return animationType === "position" || animationType === "preserve-aspect" && !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2);
 }
 function checkNodeWasScrollRoot(node) {
-  var _a;
-  return node !== node.root && ((_a = node.scroll) == null ? void 0 : _a.wasRoot);
+  var _a2;
+  return node !== node.root && ((_a2 = node.scroll) == null ? void 0 : _a2.wasRoot);
 }
 function addDomEvent(target, eventName, handler, options = { passive: true }) {
   target.addEventListener(eventName, handler, options);
@@ -5497,8 +5611,8 @@ class ProjectionFeature extends Feature {
       layoutScroll: options.layoutScroll,
       crossfade: options.crossfade,
       onExitComplete: () => {
-        var _a;
-        if (!((_a = this.state.visualElement.projection) == null ? void 0 : _a.isPresent)) {
+        var _a2;
+        if (!((_a2 = this.state.visualElement.projection) == null ? void 0 : _a2.isPresent)) {
           this.state.element.dispatchEvent(motionEvent("motioncomplete", this.state.target, true));
         }
       }
@@ -5508,8 +5622,8 @@ class ProjectionFeature extends Feature {
     this.setOptions();
   }
   mount() {
-    var _a;
-    (_a = this.state.visualElement.projection) == null ? void 0 : _a.mount(this.state.element);
+    var _a2;
+    (_a2 = this.state.visualElement.projection) == null ? void 0 : _a2.mount(this.state.element);
   }
 }
 const domMax = [
@@ -5537,7 +5651,7 @@ const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
 class MotionState {
   constructor(options, parent) {
-    var _a;
+    var _a2;
     this.element = null;
     this.isExiting = false;
     this.children = /* @__PURE__ */ new Set();
@@ -5551,7 +5665,7 @@ class MotionState {
     this.id = `motion-state-${id++}`;
     this.options = options;
     this.parent = parent;
-    (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.add(this);
+    (_a2 = parent == null ? void 0 : parent.children) == null ? void 0 : _a2.add(this);
     const initial = options.initial === void 0 && options.variants ? this.context.initial : options.initial;
     const initialVariantSource = initial === false ? ["initial", "animate"] : ["initial"];
     this.initTarget(initialVariantSource);
@@ -5563,8 +5677,8 @@ class MotionState {
     if (!this._context) {
       const handler = {
         get: (target, prop) => {
-          var _a;
-          return isVariantLabels(this.options[prop]) ? this.options[prop] : (_a = this.parent) == null ? void 0 : _a.context[prop];
+          var _a2;
+          return isVariantLabels(this.options[prop]) ? this.options[prop] : (_a2 = this.parent) == null ? void 0 : _a2.context[prop];
         }
       };
       this._context = new Proxy({}, handler);
@@ -5573,8 +5687,8 @@ class MotionState {
   }
   // Initialize animation target values
   initTarget(initialVariantSource) {
-    var _a;
-    const custom = this.options.custom ?? ((_a = this.options.animatePresenceContext) == null ? void 0 : _a.custom);
+    var _a2;
+    const custom = this.options.custom ?? ((_a2 = this.options.animatePresenceContext) == null ? void 0 : _a2.custom);
     this.baseTarget = initialVariantSource.reduce((acc, variant) => {
       return {
         ...acc,
@@ -5585,9 +5699,9 @@ class MotionState {
   }
   // Update visual element with new options
   updateOptions(options) {
-    var _a;
+    var _a2;
     this.options = options;
-    (_a = this.visualElement) == null ? void 0 : _a.update({
+    (_a2 = this.visualElement) == null ? void 0 : _a2.update({
       ...this.options,
       whileTap: this.options.whilePress
     }, null);
@@ -5598,7 +5712,7 @@ class MotionState {
   }
   // Mount motion state to DOM element, handles parent-child relationships
   mount(element, options, notAnimate = false) {
-    var _a;
+    var _a2;
     heyListen.invariant(
       Boolean(element),
       "Animation state must be mounted with valid Element"
@@ -5607,14 +5721,14 @@ class MotionState {
     this.updateOptions(options);
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
-      (_a = this.startAnimation) == null ? void 0 : _a.call(this);
+      (_a2 = this.startAnimation) == null ? void 0 : _a2.call(this);
     }
   }
   clearAnimation() {
-    var _a, _b;
+    var _a2, _b;
     this.currentProcess && motionDom.cancelFrame(this.currentProcess);
     this.currentProcess = null;
-    (_b = (_a = this.visualElement) == null ? void 0 : _a.variantChildren) == null ? void 0 : _b.forEach((child) => {
+    (_b = (_a2 = this.visualElement) == null ? void 0 : _a2.variantChildren) == null ? void 0 : _b.forEach((child) => {
       child.state.clearAnimation();
     });
   }
@@ -5632,11 +5746,11 @@ class MotionState {
   }
   unmount(unMountChildren = false) {
     const unmountState = () => {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       if (unMountChildren) {
         Array.from(this.children).forEach(this.unmountChild);
       }
-      (_b = (_a = this.parent) == null ? void 0 : _a.children) == null ? void 0 : _b.delete(this);
+      (_b = (_a2 = this.parent) == null ? void 0 : _a2.children) == null ? void 0 : _b.delete(this);
       mountedStates.delete(this.element);
       this.featureManager.unmount(unMountChildren);
       (_c = this.visualElement) == null ? void 0 : _c.unmount();
@@ -5659,11 +5773,11 @@ class MotionState {
   }
   // Set animation state active status and propagate to children
   setActive(name, isActive, isAnimate = true) {
-    var _a;
+    var _a2;
     if (!this.element || this.activeStates[name] === isActive)
       return;
     this.activeStates[name] = isActive;
-    (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
+    (_a2 = this.visualElement.variantChildren) == null ? void 0 : _a2.forEach((child) => {
       child.state.setActive(name, isActive, false);
     });
     if (isAnimate) {
@@ -5681,7 +5795,7 @@ class MotionState {
   }
 }
 function useMotionState(props) {
-  var _a;
+  var _a2;
   const parentState = injectMotion(null);
   const layoutGroup = injectLayoutGroup({});
   const config = useMotionConfig();
@@ -5690,7 +5804,7 @@ function useMotionState(props) {
     features: vue.ref([]),
     strict: false
   });
-  if (process.env.NODE_ENV !== "production" && ((_a = props.features) == null ? void 0 : _a.length) && lazyMotionContext.strict) {
+  if (process.env.NODE_ENV !== "production" && ((_a2 = props.features) == null ? void 0 : _a2.length) && lazyMotionContext.strict) {
     const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
     props.ignoreStrict ? heyListen.warning(false, strictMessage) : heyListen.invariant(false, strictMessage);
   }
@@ -5725,7 +5839,7 @@ function useMotionState(props) {
   );
   provideMotion(state);
   function getAttrs() {
-    var _a2;
+    var _a3;
     const isSVG = state.type === "svg";
     const attrsProps = { ...attrs };
     Object.keys(attrs).forEach((key) => {
@@ -5734,7 +5848,7 @@ function useMotionState(props) {
     });
     let styleProps = {
       ...props.style,
-      ...isSVG ? {} : ((_a2 = state.visualElement) == null ? void 0 : _a2.latestValues) || state.baseTarget
+      ...isSVG ? {} : ((_a3 = state.visualElement) == null ? void 0 : _a3.latestValues) || state.baseTarget
     };
     if (isSVG) {
       const { attrs: attrs2, style: style22 } = convertSvgStyleToAttributes({
@@ -5880,8 +5994,8 @@ const MotionComponentProps = {
   "onPanEnd": { type: Function }
 };
 function checkMotionIsHidden(instance) {
-  var _a;
-  const isHidden = ((_a = getMotionElement(instance.$el)) == null ? void 0 : _a.style.display) === "none";
+  var _a2;
+  const isHidden = ((_a2 = getMotionElement(instance.$el)) == null ? void 0 : _a2.style.display) === "none";
   const hasTransition = instance.$.vnode.transition;
   return hasTransition && isHidden;
 }
@@ -5901,7 +6015,7 @@ function renderSlotFragments(fragments) {
 }
 const SELF_CLOSING_TAGS = ["area", "img", "input"];
 function handlePrimitiveAndSlot(asTag, allAttrs, slots) {
-  var _a, _b;
+  var _a2, _b;
   if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag)) {
     return vue.h(asTag, allAttrs);
   }
@@ -5913,7 +6027,7 @@ function handlePrimitiveAndSlot(asTag, allAttrs, slots) {
     if (firstNonCommentChildrenIndex === -1)
       return childrens;
     const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex];
-    (_a = firstNonCommentChildren.props) == null ? true : delete _a.ref;
+    (_a2 = firstNonCommentChildren.props) == null ? true : delete _a2.ref;
     const mergedProps = firstNonCommentChildren.props ? vue.mergeProps(allAttrs, firstNonCommentChildren.props) : allAttrs;
     if (allAttrs.class && ((_b = firstNonCommentChildren.props) == null ? void 0 : _b.class))
       delete firstNonCommentChildren.props.class;
@@ -5932,10 +6046,10 @@ function handlePrimitiveAndSlot(asTag, allAttrs, slots) {
   return null;
 }
 function createMotionComponent(component, options = {}) {
-  var _a;
+  var _a2;
   const isString = typeof component === "string";
   const name = isString ? component : component.name || "";
-  const componentCache = ((_a = options.features) == null ? void 0 : _a.length) > 0 ? componentMaxCache : componentMiniCache;
+  const componentCache = ((_a2 = options.features) == null ? void 0 : _a2.length) > 0 ? componentMaxCache : componentMiniCache;
   if (isString && (componentCache == null ? void 0 : componentCache.has(component))) {
     return componentCache.get(component);
   }
@@ -6107,21 +6221,21 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       exitDom.clear();
     });
     function exit(el, done) {
-      var _a;
+      var _a2;
       const motionEl = findMotionElement(el);
       const state = mountedStates.get(motionEl);
       if (!state) {
         done();
         if (exitDom.size === 0) {
-          (_a = props.onExitComplete) == null ? void 0 : _a.call(props);
+          (_a2 = props.onExitComplete) == null ? void 0 : _a2.call(props);
         }
         return;
       }
       const doneCallback = function(e) {
-        var _a2, _b, _c, _d;
+        var _a3, _b, _c, _d;
         if (!motionEl.isConnected)
           return;
-        if ((_a2 = e == null ? void 0 : e.detail) == null ? void 0 : _a2.isExit) {
+        if ((_a3 = e == null ? void 0 : e.detail) == null ? void 0 : _a3.isExit) {
           const projection = state.visualElement.projection;
           if (((_b = state.options) == null ? void 0 : _b.layoutId) && ((_c = projection.currentAnimation) == null ? void 0 : _c.state) === "running" && !state.options.exit) {
             return;
@@ -6305,7 +6419,9 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     vue.onBeforeUpdate(() => {
       order2 = [];
     });
+    const groupRef = useDomRef();
     reorderContextProvider({
+      groupRef,
       axis,
       registerItem: (value, layout) => {
         const idx = order2.findIndex((entry) => value === entry.value);
@@ -6317,13 +6433,13 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         order2.sort(compareMin);
       },
       updateOrder: (item, offset, velocity) => {
-        var _a;
+        var _a2;
         if (isReordering)
           return;
         const newOrder = checkReorder(order2, item, offset, velocity);
         if (order2 !== newOrder) {
           isReordering = true;
-          (_a = props["onUpdate:values"]) == null ? void 0 : _a.call(
+          (_a2 = props["onUpdate:values"]) == null ? void 0 : _a2.call(
             props,
             newOrder.map(getValue).filter((value) => props.values.includes(value))
           );
@@ -6335,11 +6451,18 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       const { axis: axis2, values, "onUpdate:values": onUpdateValues, ...rest } = props;
       return {
         ...attrs,
-        ...rest
+        ...rest,
+        style: {
+          overflowAnchor: "none",
+          ...rest.style
+        }
       };
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(Motion), vue.normalizeProps(vue.guardReactiveProps(bindProps())), {
+      return vue.openBlock(), vue.createBlock(vue.unref(Motion), vue.mergeProps(bindProps(), {
+        ref_key: "groupRef",
+        ref: groupRef
+      }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default"),
           vue.createTextVNode(" " + vue.toDisplayString(warning()), 1)
@@ -6549,6 +6672,101 @@ function useVelocity(value) {
   });
   return velocity;
 }
+const threshold = 50;
+const maxSpeed = 25;
+const overflowStyles = /* @__PURE__ */ new Set(["auto", "scroll"]);
+const initialScrollLimits = /* @__PURE__ */ new WeakMap();
+const activeScrollEdge = /* @__PURE__ */ new WeakMap();
+let currentGroupElement = null;
+function resetAutoScrollState() {
+  if (currentGroupElement) {
+    const scrollableAncestor = findScrollableAncestor(
+      currentGroupElement,
+      "y"
+    );
+    if (scrollableAncestor) {
+      activeScrollEdge.delete(scrollableAncestor);
+      initialScrollLimits.delete(scrollableAncestor);
+    }
+    const scrollableAncestorX = findScrollableAncestor(
+      currentGroupElement,
+      "x"
+    );
+    if (scrollableAncestorX && scrollableAncestorX !== scrollableAncestor) {
+      activeScrollEdge.delete(scrollableAncestorX);
+      initialScrollLimits.delete(scrollableAncestorX);
+    }
+    currentGroupElement = null;
+  }
+}
+function isScrollableElement(element, axis) {
+  const style2 = getComputedStyle(element);
+  const overflow = axis === "x" ? style2.overflowX : style2.overflowY;
+  return overflowStyles.has(overflow);
+}
+function findScrollableAncestor(element, axis) {
+  let current = element == null ? void 0 : element.parentElement;
+  while (current) {
+    if (isScrollableElement(current, axis)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function getScrollAmount(pointerPosition, scrollElement, axis) {
+  const rect = scrollElement.getBoundingClientRect();
+  const start = axis === "x" ? rect.left : rect.top;
+  const end = axis === "x" ? rect.right : rect.bottom;
+  const distanceFromStart = pointerPosition - start;
+  const distanceFromEnd = end - pointerPosition;
+  if (distanceFromStart < threshold) {
+    const intensity = 1 - distanceFromStart / threshold;
+    return { amount: -maxSpeed * intensity * intensity, edge: "start" };
+  } else if (distanceFromEnd < threshold) {
+    const intensity = 1 - distanceFromEnd / threshold;
+    return { amount: maxSpeed * intensity * intensity, edge: "end" };
+  }
+  return { amount: 0, edge: null };
+}
+function autoScrollIfNeeded(groupElement, pointerPosition, axis, velocity) {
+  if (!groupElement)
+    return;
+  currentGroupElement = groupElement;
+  const scrollableAncestor = findScrollableAncestor(groupElement, axis);
+  if (!scrollableAncestor)
+    return;
+  const { amount: scrollAmount, edge } = getScrollAmount(
+    pointerPosition,
+    scrollableAncestor,
+    axis
+  );
+  if (edge === null) {
+    activeScrollEdge.delete(scrollableAncestor);
+    initialScrollLimits.delete(scrollableAncestor);
+    return;
+  }
+  const currentActiveEdge = activeScrollEdge.get(scrollableAncestor);
+  if (currentActiveEdge !== edge) {
+    const shouldStart = edge === "start" && velocity < 0 || edge === "end" && velocity > 0;
+    if (!shouldStart)
+      return;
+    activeScrollEdge.set(scrollableAncestor, edge);
+    const maxScroll = axis === "x" ? scrollableAncestor.scrollWidth - scrollableAncestor.clientWidth : scrollableAncestor.scrollHeight - scrollableAncestor.clientHeight;
+    initialScrollLimits.set(scrollableAncestor, maxScroll);
+  }
+  if (scrollAmount > 0) {
+    const initialLimit = initialScrollLimits.get(scrollableAncestor);
+    const currentScroll = axis === "x" ? scrollableAncestor.scrollLeft : scrollableAncestor.scrollTop;
+    if (currentScroll >= initialLimit)
+      return;
+  }
+  if (axis === "x") {
+    scrollableAncestor.scrollLeft += scrollAmount;
+  } else {
+    scrollableAncestor.scrollTop += scrollAmount;
+  }
+}
 const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "ReorderItem",
@@ -6626,19 +6844,19 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     onBlur: {}
   },
   setup(__props) {
-    var _a, _b;
+    var _a2, _b;
     const props = __props;
     const { style: style2 } = vue.toRefs(props);
     const context = useReorderContext(null);
     const point2 = {
-      x: useDefaultMotionValue((_a = style2.value) == null ? void 0 : _a.x),
+      x: useDefaultMotionValue((_a2 = style2.value) == null ? void 0 : _a2.x),
       y: useDefaultMotionValue((_b = style2.value) == null ? void 0 : _b.y)
     };
     const zIndex = useTransform([point2.x, point2.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
     function warning() {
       heyListen.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
     }
-    const { axis, registerItem, updateOrder } = context || {};
+    const { axis, registerItem, updateOrder, groupRef } = context || {};
     const attrs = vue.useAttrs();
     function bindProps() {
       const { value, ...rest } = props;
@@ -6660,21 +6878,36 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       return axis.value;
     });
     const isDragging = vue.ref(false);
+    function handleDrag(event, gesturePoint) {
+      const { velocity, point: pointerPoint } = gesturePoint;
+      const offset = point2[axis.value].get();
+      updateOrder(props.value, offset, velocity[axis.value]);
+      autoScrollIfNeeded(
+        groupRef.value,
+        pointerPoint[axis.value],
+        axis.value,
+        velocity[axis.value]
+      );
+      props.onDrag && props.onDrag(event, gesturePoint);
+    }
+    function handleDragEnd(event, gesturePoint) {
+      isDragging.value = false;
+      resetAutoScrollState();
+      props.onDragEnd && props.onDragEnd(event, gesturePoint);
+    }
+    function handleDragStart(event, gesturePoint) {
+      var _a3;
+      isDragging.value = true;
+      (_a3 = props.onDragStart) == null ? void 0 : _a3.call(props, event, gesturePoint);
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(Motion), vue.mergeProps(bindProps(), {
         drag: drag.value,
         "drag-snap-to-origin": true,
-        onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {
-          const { velocity } = gesturePoint;
-          velocity[vue.unref(axis)] && vue.unref(updateOrder)(_ctx.value, point2[vue.unref(axis)].get(), velocity[vue.unref(axis)]);
-          !isDragging.value && (isDragging.value = true);
-          _ctx.onDrag && _ctx.onDrag(event, gesturePoint);
-        }),
-        onDragEnd: _cache[1] || (_cache[1] = (event, gesturePoint) => {
-          isDragging.value = false;
-          _ctx.onDragEnd && _ctx.onDragEnd(event, gesturePoint);
-        }),
-        onLayoutMeasure: _cache[2] || (_cache[2] = (measured) => vue.unref(registerItem)(_ctx.value, measured))
+        onDrag: handleDrag,
+        onDragEnd: handleDragEnd,
+        onDragStart: handleDragStart,
+        onLayoutMeasure: _cache[0] || (_cache[0] = (measured) => vue.unref(registerItem)(_ctx.value, measured))
       }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default", { isDragging: isDragging.value }),
@@ -6738,8 +6971,8 @@ const LazyMotion = vue.defineComponent({
       strict: props.strict
     });
     return () => {
-      var _a;
-      return (_a = slots.default) == null ? void 0 : _a.call(slots);
+      var _a2;
+      return (_a2 = slots.default) == null ? void 0 : _a2.call(slots);
     };
   }
 });