@astryxdesign/core 0.7.5 → 0.7.6-canary.0135af4

package/dist/DateInput/MonthScroller.js

@@ -53,6 +53,11 @@ const DAY_SIZE = dateInputTouchSizes.daySize;
  * would not merely show a gap, it would re-snap to the nearest mounted one.
  */
 const OVERSCAN = 3;
+
+/** Every listener on the scroller is passive; one options object serves all. */
+const PASSIVE = {
+  passive: true
+};
 const styles = {
   spacer: {
     kVAEAm: "x1n2onr6",
@@ -150,13 +155,59 @@ export function MonthScroller({
   // updater — React runs updaters during render, where another component's
   // setState is illegal.
   const centerRowRef = useRef(centerRow);
+
+  /**
+   * Scroll snapping is off from a re-center until the frame after its
+   * commit. WebKit keeps the position it snapped to as an index into the
+   * container's snap offsets, and re-snaps to that index after a layout: a
+   * re-center that unmounts panes before the snapped one shifts the index,
+   * so the re-snap lands a month further on, and the scroll that makes
+   * re-centers again. One stalled frame right after an arrow (300 ms,
+   * measured) was enough to set the calendar paging on by itself, a month
+   * every few frames. With snapping off across the commit nothing re-snaps,
+   * and switching it back on a frame later snaps to the pane in place.
+   *
+   * Each pause counts itself, so a batch of re-centers that ends on the
+   * center it began from, which commits no new center, still restores
+   * snapping.
+   *
+   * Not while a finger drives the scroll, from its touch until the scroll it
+   * started comes to rest: iOS tracks a snap target for the gesture, and
+   * turning snapping off drops it, so the swipe coasted past the month for
+   * about two seconds and was corrected late (iOS 26.2 simulator, where the
+   * same swipe snaps in about 0.6 s with snapping left on).
+   */
+  const [snapPauses, setSnapPauses] = useState(0);
+  const isFingerScrollRef = useRef(false);
+  const recenter = useCallback((scroller, row) => {
+    if (!isFingerScrollRef.current) {
+      scroller.style.scrollSnapType = 'none';
+      setSnapPauses(count => count + 1);
+    }
+    setCenterRow(row);
+  }, []);
+  // Synchronizes the scroller's snapping with the browser's frame loop: it
+  // comes back on in the frame after the pause's commit, and a restore still
+  // pending at the next pause or at unmount is dropped.
+  useLayoutEffect(() => {
+    const scroller = scrollerRef.current;
+    if (snapPauses === 0 || scroller == null) {
+      return undefined;
+    }
+    const frame = requestAnimationFrame(() => {
+      scroller.style.scrollSnapType = '';
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [snapPauses]);
   // A row to scroll to once its pane is mounted; see scrollToMonth.
   const pendingScrollRef = useRef(null);
 
   /**
    * The row a programmatic scroll is heading for, so its own scroll events
-   * are not reported back as if the user had gone there. Null once a finger
-   * touches the scroller, or once the steered scroll has arrived.
+   * are not reported back as if the user had gone there, and so the settle
+   * correction finishes the steer instead of rounding it back. Null once the
+   * user's own input reaches the scroller (a finger, a wheel or trackpad, a
+   * press, a key), or once the steered scroll has arrived.
    */
   const steeredRowRef = useRef(null);
 
@@ -214,7 +265,12 @@ export function MonthScroller({
       // below); a jump that far is never worth animating either.
       pendingScrollRef.current = row;
       centerRowRef.current = row;
-      setCenterRow(row);
+      // The jump is a steer too. Recording it replaces a steer left behind
+      // by a scroll that moved nothing (the re-assert when the month and
+      // year wheels close), which the settle would otherwise finish,
+      // pulling the scroller back off the jump's month.
+      steeredRowRef.current = row;
+      recenter(scroller, row);
       return;
     }
     steeredRowRef.current = row;
@@ -222,7 +278,7 @@ export function MonthScroller({
       left: scrollOffsetForRow(row, paneSize, isRTL),
       behavior
     });
-  }, [paneSize, minMonthIndex, rowCount, isRTL]);
+  }, [paneSize, minMonthIndex, rowCount, isRTL, recenter]);
 
   // Deliberately un-keyed: it runs after every render, costs a null check, and
   // must fire on whichever render finally mounts the pending row's pane.
@@ -288,8 +344,11 @@ export function MonthScroller({
    * A tail crawling slower than half a pixel a frame has effectively arrived,
    * so treating it as arrived is right anyway.
    *
-   * The correction is at most half a pane by construction, and its own scroll
-   * settles onto the boundary it just aimed at, so it cannot oscillate.
+   * After the user's own scroll the correction goes to the nearest boundary,
+   * at most half a pane away. After a steer it goes on to the steered month,
+   * however early the browser cut the steer short. Either way its own scroll
+   * settles onto the boundary it aimed at, where a steer counts as arrived, so
+   * it cannot oscillate.
    */
   const settleFrameRef = useRef(undefined);
   useEffect(() => () => {
@@ -298,6 +357,8 @@ export function MonthScroller({
     }
   }, []);
   useScrollSettle(scrollerRef, scroller => {
+    // At rest, momentum included: the finger no longer drives the scroll.
+    isFingerScrollRef.current = false;
     if (paneSize === 0) {
       return;
     }
@@ -313,10 +374,20 @@ export function MonthScroller({
       if (Math.abs(scroller.scrollLeft - offsetBefore) >= 0.5) {
         return;
       }
-      const row = rowAtScrollOffset(scroller.scrollLeft, paneSize, rowCount, isRTL);
+      // A steer the browser cut short is finished, not rounded back. WebKit
+      // ends a smooth scroll that a second one retargeted once the first
+      // one's time is up, firing `scrollend` part-way: an arrow tapped late
+      // in the previous arrow's scroll stopped near that month, and rounding
+      // to the nearest pane put the scroller back on it while the title named
+      // the new one.
+      const steered = steeredRowRef.current;
+      const row = steered ?? rowAtScrollOffset(scroller.scrollLeft, paneSize, rowCount, isRTL);
       const target = scrollOffsetForRow(row, paneSize, isRTL);
       // Sub-pixel drift is the browser's own rounding, not a failed snap.
       if (Math.abs(scroller.scrollLeft - target) < 1) {
+        // At rest on its target, a steer has arrived even if no scroll
+        // crossed into its month.
+        steeredRowRef.current = null;
         return;
       }
       scroller.scrollTo({
@@ -363,11 +434,20 @@ export function MonthScroller({
     if (scroller == null || paneSize === 0) {
       return;
     }
-    // A finger on the scroller ends any steering: from here the months it
-    // passes are the user's doing and every one of them is worth reporting.
-    const onTouchStart = () => {
+    // A finger, a wheel or trackpad, a press or a key on the scroller ends any
+    // steering: from here the months it passes are the user's doing, every
+    // one of them is worth reporting, and the settle rounds to the nearest
+    // month instead of finishing a steer. A steer that moved nothing (the
+    // re-assert when the month and year wheels close on the month shown)
+    // would otherwise pull the user's next scroll back to its month.
+    const endSteer = () => {
       steeredRowRef.current = null;
     };
+    // From a touch until its scroll comes to rest (the settle above), the
+    // finger drives the scroll and a re-center leaves snapping on.
+    const onTouchStart = () => {
+      isFingerScrollRef.current = true;
+    };
     const onScroll = () => {
       if (frameRef.current != null) {
         return;
@@ -379,7 +459,7 @@ export function MonthScroller({
           return;
         }
         centerRowRef.current = row;
-        setCenterRow(row);
+        recenter(scroller, row);
         // Report nothing while a steer is in flight. `scrollToMonth` is only
         // ever called by something that already knows the month — a wheel
         // commit, a header arrow, the re-assert when the wheels close — so
@@ -393,9 +473,9 @@ export function MonthScroller({
         // the exact moment reports start being trusted again. The month drifted
         // on the way back to the calendar.
         //
-        // Cleared on arrival, or by a touch below — once a finger is on the
-        // scroller the user owns it, and every month it passes is worth
-        // reporting.
+        // Cleared on arrival, or by the user's input below (a finger, a wheel
+        // or trackpad, a press, a key) — from then the user owns the scroller,
+        // and every month it passes is worth reporting.
         if (steeredRowRef.current != null) {
           if (steeredRowRef.current === row) {
             steeredRowRef.current = null;
@@ -405,21 +485,26 @@ export function MonthScroller({
         onVisibleMonthChangeRef.current(minMonthIndex + row);
       });
     };
-    scroller.addEventListener('scroll', onScroll, {
-      passive: true
-    });
-    scroller.addEventListener('touchstart', onTouchStart, {
-      passive: true
-    });
+    scroller.addEventListener('scroll', onScroll, PASSIVE);
+    // The user's input on the scroller ends a steer: from here, it's theirs.
+    scroller.addEventListener('touchstart', endSteer, PASSIVE);
+    scroller.addEventListener('wheel', endSteer, PASSIVE);
+    scroller.addEventListener('pointerdown', endSteer, PASSIVE);
+    scroller.addEventListener('keydown', endSteer, PASSIVE);
+    scroller.addEventListener('touchstart', onTouchStart, PASSIVE);
     return () => {
-      scroller.removeEventListener('scroll', onScroll);
-      scroller.removeEventListener('touchstart', onTouchStart);
+      scroller.removeEventListener('scroll', onScroll, PASSIVE);
+      scroller.removeEventListener('touchstart', endSteer, PASSIVE);
+      scroller.removeEventListener('wheel', endSteer, PASSIVE);
+      scroller.removeEventListener('pointerdown', endSteer, PASSIVE);
+      scroller.removeEventListener('keydown', endSteer, PASSIVE);
+      scroller.removeEventListener('touchstart', onTouchStart, PASSIVE);
       if (frameRef.current != null) {
         cancelAnimationFrame(frameRef.current);
         frameRef.current = undefined;
       }
     };
-  }, [paneSize, rowCount, minMonthIndex, isRTL]);
+  }, [paneSize, rowCount, minMonthIndex, isRTL, recenter]);
 
   // Move the keyboard focus by whole days and let the scroller follow. Paging
   // by month is PageUp/PageDown; everything else is the APG grid vocabulary.

package/dist/DateInput/TouchDateField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AA6ehD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAswBhB;yBA1yBe,cAAc"}
+{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AA6ehD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAixBhB;yBArzBe,cAAc"}

package/dist/DateInput/TouchDateField.js

@@ -380,7 +380,7 @@ export function TouchDateField({
   // literal renders the same shape here and on the desktop control.
   const displayValue = optimisticValue != null && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue) ? typeof format === 'function' ? format(optimisticValue) : formatSharedDate(plainDateFromISO(optimisticValue), format, locale) : '';
   const fireChange = useCallback(newValue => {
-    if (isBusy) {
+    if (isEffectivelyDisabled) {
       return;
     }
     onChange?.(newValue);
@@ -390,7 +390,7 @@ export function TouchDateField({
         await changeAction(newValue);
       });
     }
-  }, [isBusy, onChange, changeAction, startTransition, setOptimisticValue]);
+  }, [isEffectivelyDisabled, onChange, changeAction, startTransition, setOptimisticValue]);
   const openSheet = useCallback(() => {
     if (!isEffectivelyDisabled) {
       // Always onto the calendar, whatever was showing last time. The wheels
@@ -447,6 +447,11 @@ export function TouchDateField({
    * value is still cleared either way — that half never depends on the range.
    */
   const handleResetInSheet = useCallback(() => {
+    // Disabled: reject the entire reset without closing or moving focus.
+    // Busy-only fields keep month navigation; fireChange blocks the clear.
+    if (isDisabled) {
+      return;
+    }
     fireChange(undefined);
     const currentMonth = monthIndexOf(today);
     if (currentMonth < minMonthIndex || currentMonth > maxMonthIndex) {
@@ -457,7 +462,7 @@ export function TouchDateField({
     }
     setMonthIndex(currentMonth);
     scrollerHandleRef.current?.scrollToMonth(currentMonth, 'smooth');
-  }, [fireChange, today, monthIndex, minMonthIndex, maxMonthIndex]);
+  }, [isDisabled, fireChange, today, monthIndex, minMonthIndex, maxMonthIndex]);
 
   // Selection commits on the tap and leaves the sheet up, so a mistake can be
   // corrected in place and a nearby date reconsidered without reopening.

package/dist/DateInput/Wheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AA8MA,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BAgOZ;yBAtOe,KAAK"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AA8MA,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BAmOZ;yBAzOe,KAAK"}

package/dist/DateInput/Wheel.js

@@ -12,7 +12,7 @@
  * rubber-banding, and the settle animation are the platform's; all this adds
  * is `scroll-snap-align: center` on each option, half a viewport of padding at
  * each end so the first and last option can reach the middle, and a commit
- * when the scrolling stops.
+ * when the scrolling stops and no finger or mouse drag still holds it.
  *
  * The falloff (rows fading and tipping away from the centre) is a CSS
  * scroll-driven animation on a `view()` timeline — the browser interpolates it
@@ -99,6 +99,15 @@ export function Wheel({
   // `selectedIndex` only catches up when the wheel settles.
   const [activeIndex, setActiveIndex] = useState(selectedIndex);
 
+  // A mouse cannot drag a scroll container, so without this the wheel ignores
+  // the one gesture its shape invites. Touch is untouched — it pans natively,
+  // with momentum this could not match. See usePointerDragScroll. The drag it
+  // holds is not rest either: the settle below waits for its release, as it
+  // waits for a finger's (useScrollSettle).
+  const {
+    isDraggingRef
+  } = usePointerDragScroll(scrollerRef, isActive);
+
   // Row height in px, read from layout rather than assumed, so a theme that
   // retunes --date-input-touch-wheel-item-size still lands on the right row.
   const itemBlockSize = useCallback(() => {
@@ -138,7 +147,7 @@ export function Wheel({
     if (option.value !== value) {
       onChange(option.value);
     }
-  }, isActive);
+  }, isActive, isDraggingRef);
 
   // Park the committed row under the band whenever the wheel is shown, or the
   // value is changed from outside (the calendar scrolled to another month).
@@ -210,11 +219,6 @@ export function Wheel({
   useOwnScrollGesture(scrollerRef, 'all', {
     isEnabled: isActive
   });
-
-  // A mouse cannot drag a scroll container, so without this the wheel ignores
-  // the one gesture its shape invites. Touch is untouched — it pans natively,
-  // with momentum this could not match. See usePointerDragScroll.
-  usePointerDragScroll(scrollerRef, isActive);
   const moveBy = useCallback(delta => {
     const next = Math.min(options.length - 1, Math.max(0, activeIndex + delta));
     const option = options[next];

package/dist/DateInput/usePointerDragScroll.d.ts

@@ -3,6 +3,15 @@
  * press of the button itself, and a wheel row is a click target.
  */
 export declare const DRAG_SLOP = 4;
+/** What {@link usePointerDragScroll} reports back about the drag. */
+export type PointerDragScrollState = {
+    /**
+     * True while a mouse drag holds the container: from the press that moved
+     * past {@link DRAG_SLOP} until its release. Pass it to `useScrollSettle`,
+     * which treats a held drag as it treats a finger still down.
+     */
+    isDraggingRef: React.RefObject<boolean>;
+};
 /**
  * Let a mouse drag `ref`'s contents, on a container that already scrolls and
  * snaps for touch.
@@ -11,5 +20,5 @@ export declare const DRAG_SLOP = 4;
  * @param isEnabled - skip while the wheel is hidden; a hidden panel keeps its
  *   layout box, so its listeners would otherwise still be live
  */
-export declare function usePointerDragScroll(ref: React.RefObject<HTMLElement | null>, isEnabled?: boolean): void;
+export declare function usePointerDragScroll(ref: React.RefObject<HTMLElement | null>, isEnabled?: boolean): PointerDragScrollState;
 //# sourceMappingURL=usePointerDragScroll.d.ts.map

package/dist/DateInput/usePointerDragScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePointerDragScroll.d.ts","sourceRoot":"","sources":["../../src/DateInput/usePointerDragScroll.ts"],"names":[],"mappings":"AA+CA;;;GAGG;AACH,eAAO,MAAM,SAAS,IAAI,CAAC;AAK3B;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,SAAS,GAAE,OAAc,GACxB,IAAI,CA8IN"}
+{"version":3,"file":"usePointerDragScroll.d.ts","sourceRoot":"","sources":["../../src/DateInput/usePointerDragScroll.ts"],"names":[],"mappings":"AAwDA;;;GAGG;AACH,eAAO,MAAM,SAAS,IAAI,CAAC;AAK3B,qEAAqE;AACrE,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;;OAIG;IACH,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CACzC,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,SAAS,GAAE,OAAc,GACxB,sBAAsB,CAmJxB"}

package/dist/DateInput/usePointerDragScroll.js

@@ -5,7 +5,8 @@
 /**
  * @file usePointerDragScroll.ts
  * @input A scroll container ref
- * @output Lets a mouse drag the container's contents the way a finger does
+ * @output Lets a mouse drag the container's contents the way a finger does,
+ *   and reports while a drag holds it (`isDraggingRef`)
  * @position Internal behavior hook; consumed by Wheel.tsx
  *
  * ## Why this exists
@@ -38,11 +39,19 @@
  * then jumps a whole one. The drag therefore suspends snapping, and restores
  * it once the release has settled somewhere legal.
  *
+ * ## A held drag is not rest
+ *
+ * Every `scrollTop` the drag assigns is a programmatic scroll, and Chromium
+ * ends each one with a `scrollend` — 14 moves, 14 of them. A settle listening
+ * for `scrollend` alone would commit the row under the band at every step,
+ * with the button still down. `isDraggingRef` tells `useScrollSettle` the
+ * drag is still held, the way a touch that has not ended does.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/DateInput/Wheel.tsx
  * - /packages/core/src/DateInput/DateInputTouch.test.tsx
  */
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 /**
  * Movement below this stays a click. A mouse shifts a pixel or two under the
@@ -53,6 +62,8 @@ export const DRAG_SLOP = 4;
 /** How long to wait for a release's settle before restoring snapping. */
 const SETTLE_FALLBACK_MS = 260;
 
+/** What {@link usePointerDragScroll} reports back about the drag. */
+
 /**
  * Let a mouse drag `ref`'s contents, on a container that already scrolls and
  * snaps for touch.
@@ -62,6 +73,7 @@ const SETTLE_FALLBACK_MS = 260;
  *   layout box, so its listeners would otherwise still be live
  */
 export function usePointerDragScroll(ref, isEnabled = true) {
+  const isDraggingRef = useRef(false);
   useEffect(() => {
     const element = ref.current;
     if (element == null || !isEnabled) {
@@ -70,9 +82,9 @@ export function usePointerDragScroll(ref, isEnabled = true) {
     let pointerId = null;
     let originY = 0;
     let originScrollTop = 0;
-    let isDragging = false;
+    isDraggingRef.current = false;
     // Survives from the drag's end to the click it produces, which is the
-    // whole reason it is not just `isDragging`.
+    // whole reason it is not just `isDraggingRef`.
     let wasDragged = false;
     let restoreTimer;
     const restoreSnap = () => {
@@ -112,7 +124,7 @@ export function usePointerDragScroll(ref, isEnabled = true) {
       pointerId = event.pointerId;
       originY = event.clientY;
       originScrollTop = element.scrollTop;
-      isDragging = false;
+      isDraggingRef.current = false;
       // Not captured yet: a press that never moves has to stay a click on the
       // row under it, and capturing here would retarget that click.
     };
@@ -121,11 +133,11 @@ export function usePointerDragScroll(ref, isEnabled = true) {
         return;
       }
       const delta = event.clientY - originY;
-      if (!isDragging) {
+      if (!isDraggingRef.current) {
         if (Math.abs(delta) < DRAG_SLOP) {
           return;
         }
-        isDragging = true;
+        isDraggingRef.current = true;
         element.setPointerCapture(event.pointerId);
         suspendSnap();
         // Dragging across rows would otherwise select their text, leaving the
@@ -141,10 +153,10 @@ export function usePointerDragScroll(ref, isEnabled = true) {
         return;
       }
       pointerId = null;
-      if (!isDragging) {
+      if (!isDraggingRef.current) {
         return;
       }
-      isDragging = false;
+      isDraggingRef.current = false;
       wasDragged = true;
       element.style.removeProperty('user-select');
       if (element.hasPointerCapture(event.pointerId)) {
@@ -200,9 +212,13 @@ export function usePointerDragScroll(ref, isEnabled = true) {
       element.removeEventListener('click', onClickCapture, {
         capture: true
       });
+      isDraggingRef.current = false;
       restoreSnap();
     };
   }, [ref, isEnabled]);
+  return {
+    isDraggingRef
+  };
 }
 
 /**

package/dist/DateInput/useScrollSettle.d.ts

@@ -21,6 +21,8 @@ export type ScrollSettleState = {
  * @param ref - the scroll container
  * @param onSettle - called with the settled element; may change every render
  * @param isEnabled - skip attaching while false (e.g. a hidden panel)
+ * @param isHeldRef - true while a mouse drag holds the scroller
+ *   (usePointerDragScroll's `isDraggingRef`): not rest, however quiet
  */
-export declare function useScrollSettle(ref: React.RefObject<HTMLElement | null>, onSettle: (element: HTMLElement) => void, isEnabled?: boolean): ScrollSettleState;
+export declare function useScrollSettle(ref: React.RefObject<HTMLElement | null>, onSettle: (element: HTMLElement) => void, isEnabled?: boolean, isHeldRef?: React.RefObject<boolean>): ScrollSettleState;
 //# sourceMappingURL=useScrollSettle.d.ts.map

package/dist/DateInput/useScrollSettle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollSettle.d.ts","sourceRoot":"","sources":["../../src/DateInput/useScrollSettle.ts"],"names":[],"mappings":"AAsDA;;;;;GAKG;AACH,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,4EAA4E;AAC5E,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CACvC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,EACxC,SAAS,GAAE,OAAc,GACxB,iBAAiB,CA+EnB"}
+{"version":3,"file":"useScrollSettle.d.ts","sourceRoot":"","sources":["../../src/DateInput/useScrollSettle.ts"],"names":[],"mappings":"AA0DA;;;;;GAKG;AACH,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,4EAA4E;AAC5E,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CACvC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,EACxC,SAAS,GAAE,OAAc,EACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GACnC,iBAAiB,CAuGnB"}

package/dist/DateInput/useScrollSettle.js

@@ -4,7 +4,8 @@
 
 /**
  * @file useScrollSettle.ts
- * @input A scroll container ref and a settle callback
+ * @input A scroll container ref, a settle callback, and optionally whether a
+ *   mouse drag holds it (usePointerDragScroll's `isDraggingRef`)
  * @output Calls back once, after scrolling (including momentum) stops
  * @position Internal behavior hook; consumed by Wheel.tsx and MonthScroller.tsx
  *
@@ -27,7 +28,10 @@
  *    moment without lifting and the scroll events stop, so the timer fires
  *    and the value commits to whatever is under the band. Chrome hides this
  *    because it has `scrollend`, which does not fire until the touch is
- *    released.
+ *    released. A mouse drag (usePointerDragScroll) is held the same way, and
+ *    there Chrome gives no cover at all: each `scrollTop` the drag assigns
+ *    ends in its own `scrollend`, so the settle waits for the drag's
+ *    `pointerup` as it waits for `touchend`.
  *
  * 2. **Momentum is not rest either.** iOS momentum runs on the UI thread and
  *    keeps going for a second or more after the finger is gone, and its scroll
@@ -41,7 +45,7 @@
  * underneath, and the fresh scroll events start the next premature settle —
  * each one landing a row further along, which is why the month climbed.
  *
- * So: the settle waits for the touch to end, and then for a quiet period
+ * So: the settle waits for the touch or the mouse drag to end, and then for a quiet period
  * measured from the LAST scroll event, which is what makes it outlast
  * momentum however long it runs. {@link useScrollSettle} also reports whether
  * the scroller is at rest, so a caller can refuse to reposition one that is
@@ -67,8 +71,10 @@ export const SCROLL_QUIET_MS = 220;
  * @param ref - the scroll container
  * @param onSettle - called with the settled element; may change every render
  * @param isEnabled - skip attaching while false (e.g. a hidden panel)
+ * @param isHeldRef - true while a mouse drag holds the scroller
+ *   (usePointerDragScroll's `isDraggingRef`): not rest, however quiet
  */
-export function useScrollSettle(ref, onSettle, isEnabled = true) {
+export function useScrollSettle(ref, onSettle, isEnabled = true, isHeldRef) {
   // The callback closes over render-fresh values (the option list, the current
   // value); keeping it in a ref means the listeners attach once instead of
   // re-attaching mid-scroll, which would drop an in-flight settle.
@@ -84,10 +90,17 @@ export function useScrollSettle(ref, onSettle, isEnabled = true) {
     let timer;
     let hasSettled = false;
     let isTouching = false;
+    // Whether a mouse drag held this gesture, so its release re-arms the
+    // settle; a plain click does not.
+    let wasHeld = false;
     const settle = () => {
-      // A finger still on the glass is not rest, however quiet the scroller
-      // has gone. The release re-arms this.
-      if (hasSettled || isTouching) {
+      // A finger still on the glass, or a mouse button still holding a drag,
+      // is not rest, however quiet the scroller has gone. The release re-arms
+      // this.
+      if (isHeldRef?.current) {
+        wasHeld = true;
+      }
+      if (hasSettled || isTouching || isHeldRef?.current) {
         return;
       }
       hasSettled = true;
@@ -106,6 +119,9 @@ export function useScrollSettle(ref, onSettle, isEnabled = true) {
       // the last of it however long it runs.
       hasSettled = false;
       isAtRestRef.current = false;
+      if (isHeldRef?.current) {
+        wasHeld = true;
+      }
       arm();
     };
     const onTouchStart = () => {
@@ -121,6 +137,15 @@ export function useScrollSettle(ref, onSettle, isEnabled = true) {
       // produces no further scroll events at all.
       arm();
     };
+    const onPointerEnd = () => {
+      // The drag's release: its glide to the nearest row re-arms this on its
+      // own, and the timer covers a release already on a row, which scrolls
+      // no further.
+      if (wasHeld) {
+        wasHeld = false;
+        arm();
+      }
+    };
     element.addEventListener('scroll', onScroll, {
       passive: true
     });
@@ -134,6 +159,8 @@ export function useScrollSettle(ref, onSettle, isEnabled = true) {
     element.addEventListener('touchcancel', onTouchEnd, {
       passive: true
     });
+    element.addEventListener('pointerup', onPointerEnd);
+    element.addEventListener('pointercancel', onPointerEnd);
     return () => {
       clearTimeout(timer);
       element.removeEventListener('scroll', onScroll);
@@ -141,8 +168,10 @@ export function useScrollSettle(ref, onSettle, isEnabled = true) {
       element.removeEventListener('touchstart', onTouchStart);
       element.removeEventListener('touchend', onTouchEnd);
       element.removeEventListener('touchcancel', onTouchEnd);
+      element.removeEventListener('pointerup', onPointerEnd);
+      element.removeEventListener('pointercancel', onPointerEnd);
     };
-  }, [ref, isEnabled]);
+  }, [ref, isEnabled, isHeldRef]);
   return {
     isAtRestRef
   };

package/dist/DateRangeInput/DateRangeInput.d.ts

@@ -1,7 +1,8 @@
-import { type InputStatus, type FieldStatusVariant } from '../Field/index.js';
+import { type InputStatus } from '../Field/index.js';
 import { type ISODateString, type DateRange, type DayOfWeek, type DayOfWeekName } from '../Calendar/index.js';
 import { type FieldInputBaseProps } from '../Field/fieldParts.js';
 import type { SizeValue } from '../utils/types.js';
+import type { FieldStatusPlacement } from '../Field/fieldStatusPlacement.js';
 export type { DateRange } from '../Calendar/index.js';
 export interface DateRangePreset {
     label: string;
@@ -150,7 +151,7 @@ export interface DateRangeInputProps extends Omit<FieldInputBaseProps<HTMLButton
      * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
      * @default 'attached'
      */
-    statusVariant?: FieldStatusVariant;
+    statusVariant?: FieldStatusPlacement;
     /**
      * Width of the field. Numbers are treated as pixels, strings are used as-is
      * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they

package/dist/DateRangeInput/DateRangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AA4CA,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAOrB,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAU9C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AAExE,YAAY,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAE3C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,YAAY,EACV,WAAW,IAAI,oBAAoB,EACnC,eAAe,IAAI,wBAAwB,GAC5C,MAAM,UAAU,CAAC;AAuLlB,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,mBAAmB,CAAC,iBAAiB,CAAC,EACtC,UAAU,GAAG,cAAc,CAC5B;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAExB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEjE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAE1B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;IAErC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,cAAkB,EAClB,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,mBAAmB,+BA2WrB;yBA9Ye,cAAc"}