@aviala-design/spiral 2.6.0 → 2.6.2

package/dist/index.js

@@ -6005,8 +6005,8 @@ function CascaderField({
 // src/components/date-picker/date-picker.tsx
 import * as PopoverPrimitive4 from "@radix-ui/react-popover";
 import {
-  DirectionArrowLeft as DirectionArrowLeft2,
-  DirectionArrowRight as DirectionArrowRight2,
+  DirectionArrowLeftLight as DirectionArrowLeftLight2,
+  DirectionArrowRightLight as DirectionArrowRightLight2,
   TimeAndDateClock,
   TimeAndDateDate
 } from "@aviala-design/icons";
@@ -6237,7 +6237,70 @@ import {
 // src/lib/sticky-wheel.ts
 var WHEEL_STICKY_AMOUNT = 0.45;
 var WHEEL_SCROLL_END_MS = 100;
-var WHEEL_STEP_THRESHOLD_FACTOR = 0.5 + WHEEL_STICKY_AMOUNT * 0.35;
+var WHEEL_STEP_THRESHOLD_FACTOR = 0.35;
+var WHEEL_ACCUM_IDLE_MS = 140;
+var WHEEL_LOOP_SECTIONS = 3;
+var WHEEL_LOOP_MIDDLE_SECTION = 1;
+function consumeWheelSteps(accum, deltaY, threshold) {
+  if (!(threshold > 0) || !Number.isFinite(deltaY) || deltaY === 0) {
+    return { nextAccum: accum, steps: 0 };
+  }
+  let nextAccum = accum;
+  if (nextAccum !== 0 && Math.sign(nextAccum) !== Math.sign(deltaY)) {
+    nextAccum = 0;
+  }
+  nextAccum += deltaY;
+  const steps = Math.trunc(nextAccum / threshold);
+  if (steps === 0) {
+    return { nextAccum, steps: 0 };
+  }
+  nextAccum -= steps * threshold;
+  return { nextAccum, steps };
+}
+function normalizeWheelIndex(index, length) {
+  if (length <= 0) return 0;
+  return (index % length + length) % length;
+}
+function recenterLoopIndex(rawIndex, length, middleSection = WHEEL_LOOP_MIDDLE_SECTION) {
+  if (length <= 0) return 0;
+  return middleSection * length + normalizeWheelIndex(rawIndex, length);
+}
+function nearestLoopIndex(currentRawIndex, valueIndex, length, sections = WHEEL_LOOP_SECTIONS, preferDelta = 0) {
+  if (length <= 0 || sections <= 0) return 0;
+  const slot = normalizeWheelIndex(valueIndex, length);
+  let best = slot;
+  let bestScore = Number.POSITIVE_INFINITY;
+  for (let section = 0; section < sections; section += 1) {
+    const candidate = section * length + slot;
+    const distance = Math.abs(candidate - currentRawIndex);
+    const directionBias = preferDelta === 0 ? 0 : Math.sign(candidate - currentRawIndex) === Math.sign(preferDelta) ? -0.25 : 0.25;
+    const score = distance + directionBias;
+    if (score < bestScore) {
+      bestScore = score;
+      best = candidate;
+    }
+  }
+  return best;
+}
+function stepLoopRawIndex(currentRawIndex, steps, length, sections = WHEEL_LOOP_SECTIONS, middleSection = WHEEL_LOOP_MIDDLE_SECTION) {
+  if (length <= 0) return { rawIndex: 0, didRecenter: false };
+  const maxIndex = sections * length - 1;
+  let rawIndex = currentRawIndex;
+  let didRecenter = false;
+  const section = Math.floor(rawIndex / length);
+  if (section !== middleSection) {
+    rawIndex = recenterLoopIndex(rawIndex, length, middleSection);
+    didRecenter = true;
+  }
+  const next = rawIndex + steps;
+  if (next < 0 || next > maxIndex) {
+    return {
+      rawIndex: recenterLoopIndex(next, length, middleSection),
+      didRecenter: true
+    };
+  }
+  return { rawIndex: next, didRecenter };
+}
 function stickyRemapProgress(t, amount) {
   const clamped = Math.max(0, Math.min(1, t));
   if (amount <= 0) return clamped;
@@ -6256,14 +6319,11 @@ function stickyRoundIndex(fractionalIndex, stickiness = WHEEL_STICKY_AMOUNT) {
 
 // src/components/date-picker/date-picker-time-wheel.tsx
 import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
-var LOOP_SECTIONS = 3;
-var MIDDLE_SECTION = 1;
+var LOOP_SECTIONS = WHEEL_LOOP_SECTIONS;
+var MIDDLE_SECTION = WHEEL_LOOP_MIDDLE_SECTION;
 function formatWheelValue(value) {
   return String(value).padStart(2, "0");
 }
-function normalizeIndex(index, length) {
-  return (index % length + length) % length;
-}
 function getValueIndex(values, value) {
   const index = values.indexOf(value);
   if (index >= 0) return index;
@@ -6301,17 +6361,28 @@ function DatePickerTimeWheelColumn({
   layoutKey = 0
 }) {
   const scrollRef = useRef8(null);
+  const clipTrackRef = useRef8(null);
   const isUserScrollingRef = useRef8(false);
   const isProgrammaticScrollRef = useRef8(false);
   const smoothTargetValueRef = useRef8(null);
   const scrollEndTimerRef = useRef8(void 0);
   const wheelAccumRef = useRef8(0);
+  const wheelAccumIdleTimerRef = useRef8(void 0);
   const selectedValueRef = useRef8(value);
   selectedValueRef.current = value;
   const repeatedValues = useMemo6(() => {
     if (!loop) return [...values];
     return Array.from({ length: LOOP_SECTIONS }, () => values).flat();
   }, [loop, values]);
+  const readRawIndex2 = useCallback11((container, itemHeight) => {
+    return Math.round(container.scrollTop / itemHeight);
+  }, []);
+  const syncClipTrack = useCallback11(() => {
+    const container = scrollRef.current;
+    const track = clipTrackRef.current;
+    if (!container || !track) return;
+    track.style.transform = `translate3d(0, ${-container.scrollTop}px, 0)`;
+  }, []);
   const scrollToIndex = useCallback11(
     (index, behavior = "auto") => {
       const container = scrollRef.current;
@@ -6320,21 +6391,13 @@ function DatePickerTimeWheelColumn({
       if (itemHeight <= 0) return;
       isProgrammaticScrollRef.current = true;
       container.scrollTo({ top: index * itemHeight, behavior });
-    },
-    []
-  );
-  const scrollToValue = useCallback11(
-    (nextValue, behavior = "smooth") => {
-      if (behavior === "smooth") {
-        smoothTargetValueRef.current = nextValue;
+      if (behavior === "auto") {
+        syncClipTrack();
       } else {
-        smoothTargetValueRef.current = null;
+        requestAnimationFrame(syncClipTrack);
       }
-      const valueIndex = getValueIndex(values, nextValue);
-      const targetIndex = loop ? values.length * MIDDLE_SECTION + valueIndex : valueIndex;
-      scrollToIndex(targetIndex, behavior);
     },
-    [loop, scrollToIndex, values]
+    [syncClipTrack]
   );
   const syncScrollToValue = useCallback11(
     (behavior = "auto") => {
@@ -6347,24 +6410,27 @@ function DatePickerTimeWheelColumn({
       const itemHeight = readItemHeight(container);
       if (itemHeight <= 0) return;
       const valueIndex = getValueIndex(values, selectedValueRef.current);
-      const targetIndex = loop ? values.length * MIDDLE_SECTION + valueIndex : valueIndex;
-      const currentIndex = Math.round(container.scrollTop / itemHeight);
-      const currentValueIndex = loop ? normalizeIndex(currentIndex, values.length) : Math.min(Math.max(currentIndex, 0), values.length - 1);
-      const inMiddleSection = !loop || Math.floor(currentIndex / values.length) === MIDDLE_SECTION;
-      if (currentValueIndex === valueIndex && inMiddleSection) return;
+      const currentIndex = readRawIndex2(container, itemHeight);
+      const currentValueIndex = loop ? normalizeWheelIndex(currentIndex, values.length) : Math.min(Math.max(currentIndex, 0), values.length - 1);
+      if (currentValueIndex === valueIndex) {
+        syncClipTrack();
+        return;
+      }
+      const targetIndex = loop ? nearestLoopIndex(currentIndex, valueIndex, values.length, LOOP_SECTIONS) : valueIndex;
       scrollToIndex(targetIndex, behavior);
     },
-    [loop, scrollToIndex, values]
+    [loop, readRawIndex2, scrollToIndex, syncClipTrack, values]
   );
   const settleScroll = useCallback11(() => {
     const container = scrollRef.current;
-    if (!container || isProgrammaticScrollRef.current) {
-      isProgrammaticScrollRef.current = false;
+    if (!container) return;
+    const wasProgrammatic = isProgrammaticScrollRef.current;
+    isProgrammaticScrollRef.current = false;
+    const itemHeight = readItemHeight(container);
+    if (itemHeight <= 0 || values.length === 0) {
       smoothTargetValueRef.current = null;
       return;
     }
-    const itemHeight = readItemHeight(container);
-    if (itemHeight <= 0 || values.length === 0) return;
     const lastIndex = values.length - 1;
     const maxScroll = Math.max(container.scrollHeight - container.clientHeight, 0);
     const fractionalIndex = container.scrollTop / itemHeight;
@@ -6376,12 +6442,21 @@ function DatePickerTimeWheelColumn({
         rawIndex = 0;
       }
     }
-    const valueIndex = loop ? normalizeIndex(rawIndex, values.length) : Math.min(Math.max(rawIndex, 0), lastIndex);
+    const valueIndex = loop ? normalizeWheelIndex(rawIndex, values.length) : Math.min(Math.max(rawIndex, 0), lastIndex);
     const nextValue = values[valueIndex];
-    const targetIndex = loop ? values.length * MIDDLE_SECTION + valueIndex : valueIndex;
+    const targetIndex = loop ? recenterLoopIndex(rawIndex, values.length, MIDDLE_SECTION) : valueIndex;
     const targetTop = targetIndex * itemHeight;
     const section = loop ? Math.floor(rawIndex / values.length) : MIDDLE_SECTION;
     const needsLoopRecenter = loop && section !== MIDDLE_SECTION;
+    if (wasProgrammatic) {
+      if (needsLoopRecenter) {
+        isProgrammaticScrollRef.current = true;
+        container.scrollTop = targetTop;
+      }
+      smoothTargetValueRef.current = null;
+      syncClipTrack();
+      return;
+    }
     const needsSnap = Math.abs(container.scrollTop - targetTop) > 1;
     if (needsLoopRecenter) {
       isProgrammaticScrollRef.current = true;
@@ -6399,22 +6474,26 @@ function DatePickerTimeWheelColumn({
     }
     isUserScrollingRef.current = false;
     wheelAccumRef.current = 0;
-  }, [loop, onChange, values]);
+    syncClipTrack();
+  }, [loop, onChange, syncClipTrack, values]);
   const handleScroll = useCallback11(() => {
+    syncClipTrack();
     if (isProgrammaticScrollRef.current) return;
     isUserScrollingRef.current = true;
     if (scrollEndTimerRef.current) {
       clearTimeout(scrollEndTimerRef.current);
     }
     scrollEndTimerRef.current = setTimeout(settleScroll, WHEEL_SCROLL_END_MS);
-  }, [settleScroll]);
+  }, [settleScroll, syncClipTrack]);
   useLayoutEffect5(() => {
     syncScrollToValue("auto");
+    syncClipTrack();
     const raf = requestAnimationFrame(() => {
       syncScrollToValue("auto");
+      syncClipTrack();
     });
     return () => cancelAnimationFrame(raf);
-  }, [layoutKey, syncScrollToValue, value]);
+  }, [layoutKey, syncClipTrack, syncScrollToValue, value]);
   useEffect8(() => {
     const container = scrollRef.current;
     if (!container) return;
@@ -6442,23 +6521,48 @@ function DatePickerTimeWheelColumn({
     if (!container) return;
     const onWheel = (event) => {
       event.preventDefault();
-      if (isProgrammaticScrollRef.current || values.length === 0) return;
+      if (values.length === 0) return;
       const itemHeight = readItemHeight(container);
       if (itemHeight <= 0) return;
-      wheelAccumRef.current += event.deltaY;
+      if (wheelAccumIdleTimerRef.current) {
+        clearTimeout(wheelAccumIdleTimerRef.current);
+      }
+      wheelAccumIdleTimerRef.current = setTimeout(() => {
+        wheelAccumRef.current = 0;
+      }, WHEEL_ACCUM_IDLE_MS);
       const threshold = itemHeight * WHEEL_STEP_THRESHOLD_FACTOR;
-      if (Math.abs(wheelAccumRef.current) < threshold) return;
-      const direction = wheelAccumRef.current > 0 ? 1 : -1;
-      wheelAccumRef.current = 0;
-      const currentIndex = getValueIndex(values, selectedValueRef.current);
-      const nextIndex = loop ? normalizeIndex(currentIndex + direction, values.length) : Math.min(Math.max(currentIndex + direction, 0), values.length - 1);
-      if (nextIndex === currentIndex) return;
+      const { nextAccum, steps } = consumeWheelSteps(
+        wheelAccumRef.current,
+        event.deltaY,
+        threshold
+      );
+      wheelAccumRef.current = nextAccum;
+      if (steps === 0) return;
+      const currentRaw = readRawIndex2(container, itemHeight);
+      let targetRaw;
+      if (loop) {
+        if (Math.floor(currentRaw / values.length) !== MIDDLE_SECTION) {
+          isProgrammaticScrollRef.current = true;
+          container.scrollTop = recenterLoopIndex(currentRaw, values.length, MIDDLE_SECTION) * itemHeight;
+        }
+        targetRaw = stepLoopRawIndex(
+          readRawIndex2(container, itemHeight),
+          steps,
+          values.length,
+          LOOP_SECTIONS,
+          MIDDLE_SECTION
+        ).rawIndex;
+      } else {
+        targetRaw = Math.min(Math.max(currentRaw + steps, 0), values.length - 1);
+        if (targetRaw === currentRaw) return;
+      }
       if (scrollEndTimerRef.current) {
         clearTimeout(scrollEndTimerRef.current);
       }
-      const nextValue = values[nextIndex];
+      const nextValue = values[normalizeWheelIndex(targetRaw, values.length)];
       isUserScrollingRef.current = false;
-      scrollToValue(nextValue, "smooth");
+      smoothTargetValueRef.current = nextValue;
+      scrollToIndex(targetRaw, "smooth");
       if (nextValue !== selectedValueRef.current) {
         onChange(nextValue);
       }
@@ -6466,35 +6570,49 @@ function DatePickerTimeWheelColumn({
     container.addEventListener("wheel", onWheel, { passive: false });
     return () => {
       container.removeEventListener("wheel", onWheel);
+      if (wheelAccumIdleTimerRef.current) {
+        clearTimeout(wheelAccumIdleTimerRef.current);
+      }
     };
-  }, [loop, onChange, scrollToValue, values]);
+  }, [loop, onChange, readRawIndex2, scrollToIndex, values]);
   const handleKeyDown = (event) => {
-    const currentIndex = getValueIndex(values, selectedValueRef.current);
-    let nextIndex = null;
+    const container = scrollRef.current;
+    if (!container || values.length === 0) return;
+    const itemHeight = readItemHeight(container);
+    if (itemHeight <= 0) return;
+    const currentRaw = readRawIndex2(container, itemHeight);
+    let targetRaw = null;
+    let preferDelta = 0;
     switch (event.key) {
       case "ArrowUp":
-        nextIndex = loop ? normalizeIndex(currentIndex - 1, values.length) : Math.max(currentIndex - 1, 0);
+        preferDelta = -1;
+        targetRaw = loop ? stepLoopRawIndex(currentRaw, -1, values.length, LOOP_SECTIONS, MIDDLE_SECTION).rawIndex : Math.max(currentRaw - 1, 0);
         break;
       case "ArrowDown":
-        nextIndex = loop ? normalizeIndex(currentIndex + 1, values.length) : Math.min(currentIndex + 1, values.length - 1);
+        preferDelta = 1;
+        targetRaw = loop ? stepLoopRawIndex(currentRaw, 1, values.length, LOOP_SECTIONS, MIDDLE_SECTION).rawIndex : Math.min(currentRaw + 1, values.length - 1);
         break;
       case "Home":
-        nextIndex = 0;
+        targetRaw = loop ? nearestLoopIndex(currentRaw, 0, values.length, LOOP_SECTIONS, -1) : 0;
         break;
       case "End":
-        nextIndex = values.length - 1;
+        targetRaw = loop ? nearestLoopIndex(currentRaw, values.length - 1, values.length, LOOP_SECTIONS, 1) : values.length - 1;
         break;
       default:
         return;
     }
     event.preventDefault();
-    const nextValue = values[nextIndex];
-    scrollToValue(nextValue, "smooth");
+    if (targetRaw === currentRaw && preferDelta === 0) return;
+    const nextValue = values[normalizeWheelIndex(targetRaw, values.length)];
+    isUserScrollingRef.current = false;
+    smoothTargetValueRef.current = nextValue;
+    scrollToIndex(targetRaw, "smooth");
     if (nextValue !== selectedValueRef.current) {
       onChange(nextValue);
     }
   };
-  const selectedOptionId = loop ? `${ariaLabel}-${value}-${values.length * MIDDLE_SECTION + getValueIndex(values, value)}` : `${ariaLabel}-${value}`;
+  const committedIndex = getValueIndex(values, value);
+  const selectedOptionId = loop ? `${ariaLabel}-${value}-${values.length * MIDDLE_SECTION + committedIndex}` : `${ariaLabel}-${value}`;
   return /* @__PURE__ */ jsxs26("div", { className: cn("aviala-datepicker-time__wheel", className), children: [
     /* @__PURE__ */ jsx40("div", { className: "aviala-datepicker-time__wheel-highlight", "aria-hidden": true }),
     /* @__PURE__ */ jsx40(
@@ -6523,15 +6641,15 @@ function DatePickerTimeWheelColumn({
         tabIndex: 0,
         onKeyDown: handleKeyDown,
         children: /* @__PURE__ */ jsx40("ul", { className: "aviala-datepicker-time__wheel-list", children: repeatedValues.map((itemValue, index) => {
-          const isSelected = itemValue === value;
+          const isCommitted = itemValue === value;
           const optionId = loop ? `${ariaLabel}-${itemValue}-${index}` : `${ariaLabel}-${itemValue}`;
           return /* @__PURE__ */ jsx40(
             "li",
             {
-              id: optionId,
+              id: loop && isCommitted && Math.floor(index / values.length) === MIDDLE_SECTION ? selectedOptionId : optionId,
               className: "aviala-datepicker-time__wheel-item",
               role: "option",
-              "aria-selected": isSelected,
+              "aria-selected": isCommitted,
               children: /* @__PURE__ */ jsx40(
                 "button",
                 {
@@ -6540,10 +6658,12 @@ function DatePickerTimeWheelColumn({
                     "aviala-datepicker-time__wheel-option",
                     typographyVariants({ level: "text" })
                   ),
-                  "data-selected": isSelected ? "true" : void 0,
+                  "data-selected": isCommitted ? "true" : void 0,
                   tabIndex: -1,
                   onClick: () => {
-                    scrollToValue(itemValue, "smooth");
+                    isUserScrollingRef.current = false;
+                    smoothTargetValueRef.current = itemValue;
+                    scrollToIndex(index, "smooth");
                     if (itemValue !== selectedValueRef.current) {
                       onChange(itemValue);
                     }
@@ -6556,7 +6676,18 @@ function DatePickerTimeWheelColumn({
           );
         }) })
       }
-    )
+    ),
+    /* @__PURE__ */ jsx40("div", { className: "aviala-datepicker-time__wheel-clip", "aria-hidden": true, children: /* @__PURE__ */ jsx40("div", { ref: clipTrackRef, className: "aviala-datepicker-time__wheel-clip-track", children: repeatedValues.map((itemValue, index) => /* @__PURE__ */ jsx40(
+      "div",
+      {
+        className: cn(
+          "aviala-datepicker-time__wheel-clip-item",
+          typographyVariants({ level: "text" })
+        ),
+        children: formatValue(itemValue)
+      },
+      `clip-${loop ? `${itemValue}-${index}` : itemValue}`
+    )) }) })
   ] });
 }
 
@@ -7292,8 +7423,8 @@ function DatePickerCalendar({ className }) {
   const { code } = useLocale();
   const locale = useLocaleMessages("DatePicker");
   const rtl = useRtl();
-  const PrevIcon = rtl ? DirectionArrowRight2 : DirectionArrowLeft2;
-  const NextIcon = rtl ? DirectionArrowLeft2 : DirectionArrowRight2;
+  const PrevIcon = rtl ? DirectionArrowRightLight2 : DirectionArrowLeftLight2;
+  const NextIcon = rtl ? DirectionArrowLeftLight2 : DirectionArrowRightLight2;
   const {
     mode,
     viewMonth,
@@ -7315,6 +7446,10 @@ function DatePickerCalendar({ className }) {
   const dayGridRef = useRef9(null);
   const pendingDayFocusRef = useRef9(false);
   const [monthSlide, setMonthSlide] = useState13(null);
+  const [prevNavAnimKey, setPrevNavAnimKey] = useState13(0);
+  const [nextNavAnimKey, setNextNavAnimKey] = useState13(0);
+  const [prevNavAnimating, setPrevNavAnimating] = useState13(false);
+  const [nextNavAnimating, setNextNavAnimating] = useState13(false);
   const isMonthPanel = activePanel === "month";
   const isTimePanel = activePanel === "time" && enableTime;
   const targetContentView = isMonthPanel ? "month" : "date";
@@ -7565,8 +7700,23 @@ function DatePickerCalendar({ className }) {
           type: "button",
           className: "aviala-datepicker-calendar__nav aviala-focus-ring",
           "aria-label": isMonthPanel ? locale.previousYear : locale.previousMonth,
-          onClick: () => setViewMonth(addMonths(viewMonth, -stepMonth)),
-          children: /* @__PURE__ */ jsx43(PrevIcon, { level: "text", biggerSize: true, "aria-hidden": true })
+          onClick: () => {
+            if (!prefersReducedMotion2()) {
+              setPrevNavAnimKey((n) => n + 1);
+              setPrevNavAnimating(true);
+            }
+            setViewMonth(addMonths(viewMonth, -stepMonth));
+          },
+          children: /* @__PURE__ */ jsx43("span", { className: "aviala-datepicker-calendar__nav-icon", children: /* @__PURE__ */ jsx43(
+            "span",
+            {
+              className: "aviala-datepicker-calendar__nav-icon-inner",
+              "data-anim": prevNavAnimating ? "prev" : void 0,
+              onAnimationEnd: () => setPrevNavAnimating(false),
+              children: /* @__PURE__ */ jsx43(PrevIcon, { level: "text", biggerSize: true, "aria-hidden": true })
+            },
+            prevNavAnimKey
+          ) })
         }
       ),
       /* @__PURE__ */ jsx43(
@@ -7599,8 +7749,23 @@ function DatePickerCalendar({ className }) {
           type: "button",
           className: "aviala-datepicker-calendar__nav aviala-focus-ring",
           "aria-label": isMonthPanel ? locale.nextYear : locale.nextMonth,
-          onClick: () => setViewMonth(addMonths(viewMonth, stepMonth)),
-          children: /* @__PURE__ */ jsx43(NextIcon, { level: "text", biggerSize: true, "aria-hidden": true })
+          onClick: () => {
+            if (!prefersReducedMotion2()) {
+              setNextNavAnimKey((n) => n + 1);
+              setNextNavAnimating(true);
+            }
+            setViewMonth(addMonths(viewMonth, stepMonth));
+          },
+          children: /* @__PURE__ */ jsx43("span", { className: "aviala-datepicker-calendar__nav-icon", children: /* @__PURE__ */ jsx43(
+            "span",
+            {
+              className: "aviala-datepicker-calendar__nav-icon-inner",
+              "data-anim": nextNavAnimating ? "next" : void 0,
+              onAnimationEnd: () => setNextNavAnimating(false),
+              children: /* @__PURE__ */ jsx43(NextIcon, { level: "text", biggerSize: true, "aria-hidden": true })
+            },
+            nextNavAnimKey
+          ) })
         }
       )
     ] }),
@@ -8957,8 +9122,8 @@ Alert.displayName = "Alert";
 
 // src/components/list.tsx
 import {
-  DirectionArrowLeftLight as DirectionArrowLeftLight2,
-  DirectionArrowRightLight as DirectionArrowRightLight2,
+  DirectionArrowLeftLight as DirectionArrowLeftLight3,
+  DirectionArrowRightLight as DirectionArrowRightLight3,
   GeneralSetting
 } from "@aviala-design/icons";
 import {
@@ -9054,7 +9219,7 @@ var ListItem = forwardRef35(
   }, ref) => {
     const locale = useLocaleMessages("List");
     const rtl = useRtl();
-    const ChevronIcon = rtl ? DirectionArrowLeftLight2 : DirectionArrowRightLight2;
+    const ChevronIcon = rtl ? DirectionArrowLeftLight3 : DirectionArrowRightLight3;
     const isInteractive = interactive ?? (onClick != null || href != null);
     const chevronVisible = showChevron ?? itemType === "action";
     const primaryAction = action ?? /* @__PURE__ */ jsx53(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx53(GeneralSetting, { "aria-hidden": true }), children: actionLabel });
@@ -10462,11 +10627,8 @@ import {
   useRef as useRef16
 } from "react";
 import { jsx as jsx57, jsxs as jsxs42 } from "react/jsx-runtime";
-var LOOP_SECTIONS2 = 3;
-var MIDDLE_SECTION2 = 1;
-function normalizeIndex2(index, length) {
-  return (index % length + length) % length;
-}
+var LOOP_SECTIONS2 = WHEEL_LOOP_SECTIONS;
+var MIDDLE_SECTION2 = WHEEL_LOOP_MIDDLE_SECTION;
 function readMetrics(container) {
   const items = container.querySelectorAll(".aviala-scroll-picker-item");
   const first = items[0];
@@ -10488,6 +10650,9 @@ function scrollTopForIndex(container, metrics, index) {
 function fractionalIndexAtScrollTop(metrics, scrollTop) {
   return (scrollTop - metrics.originTop) / metrics.pitch;
 }
+function readRawIndex(container, metrics) {
+  return Math.round(fractionalIndexAtScrollTop(metrics, container.scrollTop));
+}
 function ScrollPicker({ className, children, ...props }) {
   return /* @__PURE__ */ jsx57("div", { className: cn("aviala-scroll-picker", className), ...props, children });
 }
@@ -10502,11 +10667,13 @@ function ScrollPickerColumn({
   getValueKey
 }) {
   const scrollRef = useRef16(null);
+  const clipTrackRef = useRef16(null);
   const isUserScrollingRef = useRef16(false);
   const isProgrammaticScrollRef = useRef16(false);
   const smoothTargetValueRef = useRef16(null);
   const scrollEndTimerRef = useRef16(void 0);
   const wheelAccumRef = useRef16(0);
+  const wheelAccumIdleTimerRef = useRef16(void 0);
   const selectedValueRef = useRef16(value);
   const reactId = useId5();
   selectedValueRef.current = value;
@@ -10521,36 +10688,43 @@ function ScrollPickerColumn({
     if (!loop) return [...values];
     return Array.from({ length: LOOP_SECTIONS2 }, () => values).flat();
   }, [loop, values]);
-  const scrollToIndex = useCallback19((index, behavior = "auto") => {
+  const syncClipTrack = useCallback19(() => {
     const container = scrollRef.current;
-    if (!container) return;
-    const metrics = readMetrics(container);
-    if (!metrics) return;
-    isProgrammaticScrollRef.current = true;
-    container.scrollTo({ top: scrollTopForIndex(container, metrics, index), behavior });
+    const track = clipTrackRef.current;
+    if (!container || !track) return;
+    const band = container.parentElement?.querySelector(
+      ".aviala-scroll-picker-column__highlight"
+    );
+    const bandHeight = band?.offsetHeight || 26;
+    const offset = container.scrollTop + (container.clientHeight - bandHeight) / 2;
+    track.style.transform = `translate3d(0, ${-offset}px, 0)`;
   }, []);
-  const scrollToValue = useCallback19(
-    (nextValue, behavior = "smooth") => {
-      if (behavior === "smooth") {
-        smoothTargetValueRef.current = nextValue;
+  const scrollToIndex = useCallback19(
+    (index, behavior = "auto") => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const metrics = readMetrics(container);
+      if (!metrics) return;
+      isProgrammaticScrollRef.current = true;
+      container.scrollTo({ top: scrollTopForIndex(container, metrics, index), behavior });
+      if (behavior === "auto") {
+        syncClipTrack();
       } else {
-        smoothTargetValueRef.current = null;
+        requestAnimationFrame(syncClipTrack);
       }
-      const valueIndex = getIndex(nextValue);
-      const targetIndex = loop ? values.length * MIDDLE_SECTION2 + valueIndex : valueIndex;
-      scrollToIndex(targetIndex, behavior);
     },
-    [getIndex, loop, scrollToIndex, values.length]
+    [syncClipTrack]
   );
   const settleScroll = useCallback19(() => {
     const container = scrollRef.current;
-    if (!container || isProgrammaticScrollRef.current) {
-      isProgrammaticScrollRef.current = false;
+    if (!container) return;
+    const wasProgrammatic = isProgrammaticScrollRef.current;
+    isProgrammaticScrollRef.current = false;
+    const metrics = readMetrics(container);
+    if (!metrics || values.length === 0) {
       smoothTargetValueRef.current = null;
       return;
     }
-    const metrics = readMetrics(container);
-    if (!metrics || values.length === 0) return;
     const lastIndex = values.length - 1;
     const maxScroll = Math.max(container.scrollHeight - container.clientHeight, 0);
     let rawIndex = stickyRoundIndex(
@@ -10564,12 +10738,21 @@ function ScrollPickerColumn({
         rawIndex = 0;
       }
     }
-    const valueIndex = loop ? normalizeIndex2(rawIndex, values.length) : Math.min(Math.max(rawIndex, 0), lastIndex);
+    const valueIndex = loop ? normalizeWheelIndex(rawIndex, values.length) : Math.min(Math.max(rawIndex, 0), lastIndex);
     const nextValue = values[valueIndex];
-    const targetIndex = loop ? values.length * MIDDLE_SECTION2 + valueIndex : valueIndex;
+    const targetIndex = loop ? recenterLoopIndex(rawIndex, values.length, MIDDLE_SECTION2) : valueIndex;
     const targetTop = scrollTopForIndex(container, metrics, targetIndex);
     const section = loop ? Math.floor(rawIndex / values.length) : MIDDLE_SECTION2;
     const needsLoopRecenter = loop && section !== MIDDLE_SECTION2;
+    if (wasProgrammatic) {
+      if (needsLoopRecenter) {
+        isProgrammaticScrollRef.current = true;
+        container.scrollTop = targetTop;
+      }
+      smoothTargetValueRef.current = null;
+      syncClipTrack();
+      return;
+    }
     const needsSnap = Math.abs(container.scrollTop - targetTop) > 1;
     if (needsLoopRecenter) {
       isProgrammaticScrollRef.current = true;
@@ -10587,15 +10770,17 @@ function ScrollPickerColumn({
     }
     isUserScrollingRef.current = false;
     wheelAccumRef.current = 0;
-  }, [loop, onChange, values]);
+    syncClipTrack();
+  }, [loop, onChange, syncClipTrack, values]);
   const handleScroll = useCallback19(() => {
+    syncClipTrack();
     if (isProgrammaticScrollRef.current) return;
     isUserScrollingRef.current = true;
     if (scrollEndTimerRef.current) {
       clearTimeout(scrollEndTimerRef.current);
     }
     scrollEndTimerRef.current = setTimeout(settleScroll, WHEEL_SCROLL_END_MS);
-  }, [settleScroll]);
+  }, [settleScroll, syncClipTrack]);
   useLayoutEffect9(() => {
     if (isUserScrollingRef.current) return;
     if (smoothTargetValueRef.current != null && Object.is(smoothTargetValueRef.current, value)) {
@@ -10606,11 +10791,20 @@ function ScrollPickerColumn({
     const metrics = readMetrics(container);
     if (!metrics) return;
     const valueIndex = getIndex(value);
-    const targetIndex = loop ? values.length * MIDDLE_SECTION2 + valueIndex : valueIndex;
+    const currentRaw = readRawIndex(container, metrics);
+    const currentValueIndex = loop ? normalizeWheelIndex(currentRaw, values.length) : Math.min(Math.max(currentRaw, 0), values.length - 1);
+    if (currentValueIndex === valueIndex) {
+      syncClipTrack();
+      return;
+    }
+    const targetIndex = loop ? nearestLoopIndex(currentRaw, valueIndex, values.length, LOOP_SECTIONS2) : valueIndex;
     const targetTop = scrollTopForIndex(container, metrics, targetIndex);
-    if (Math.abs(container.scrollTop - targetTop) <= 1) return;
+    if (Math.abs(container.scrollTop - targetTop) <= 1) {
+      syncClipTrack();
+      return;
+    }
     scrollToIndex(targetIndex, "auto");
-  }, [getIndex, loop, scrollToIndex, value, values.length]);
+  }, [getIndex, loop, scrollToIndex, syncClipTrack, value, values.length]);
   useEffect16(() => {
     const container = scrollRef.current;
     if (!container) return;
@@ -10633,23 +10827,52 @@ function ScrollPickerColumn({
     if (!container) return;
     const onWheel = (event) => {
       event.preventDefault();
-      if (isProgrammaticScrollRef.current || values.length === 0) return;
+      if (values.length === 0) return;
       const metrics = readMetrics(container);
       if (!metrics) return;
-      wheelAccumRef.current += event.deltaY;
+      if (wheelAccumIdleTimerRef.current) {
+        clearTimeout(wheelAccumIdleTimerRef.current);
+      }
+      wheelAccumIdleTimerRef.current = setTimeout(() => {
+        wheelAccumRef.current = 0;
+      }, WHEEL_ACCUM_IDLE_MS);
       const threshold = metrics.pitch * WHEEL_STEP_THRESHOLD_FACTOR;
-      if (Math.abs(wheelAccumRef.current) < threshold) return;
-      const direction = wheelAccumRef.current > 0 ? 1 : -1;
-      wheelAccumRef.current = 0;
-      const currentIndex = getIndex(selectedValueRef.current);
-      const nextIndex = loop ? normalizeIndex2(currentIndex + direction, values.length) : Math.min(Math.max(currentIndex + direction, 0), values.length - 1);
-      if (nextIndex === currentIndex) return;
+      const { nextAccum, steps } = consumeWheelSteps(
+        wheelAccumRef.current,
+        event.deltaY,
+        threshold
+      );
+      wheelAccumRef.current = nextAccum;
+      if (steps === 0) return;
+      const currentRaw = readRawIndex(container, metrics);
+      let targetRaw;
+      if (loop) {
+        if (Math.floor(currentRaw / values.length) !== MIDDLE_SECTION2) {
+          isProgrammaticScrollRef.current = true;
+          container.scrollTop = scrollTopForIndex(
+            container,
+            metrics,
+            recenterLoopIndex(currentRaw, values.length, MIDDLE_SECTION2)
+          );
+        }
+        targetRaw = stepLoopRawIndex(
+          readRawIndex(container, metrics),
+          steps,
+          values.length,
+          LOOP_SECTIONS2,
+          MIDDLE_SECTION2
+        ).rawIndex;
+      } else {
+        targetRaw = Math.min(Math.max(currentRaw + steps, 0), values.length - 1);
+        if (targetRaw === currentRaw) return;
+      }
       if (scrollEndTimerRef.current) {
         clearTimeout(scrollEndTimerRef.current);
       }
-      const nextValue = values[nextIndex];
+      const nextValue = values[normalizeWheelIndex(targetRaw, values.length)];
       isUserScrollingRef.current = false;
-      scrollToValue(nextValue, "smooth");
+      smoothTargetValueRef.current = nextValue;
+      scrollToIndex(targetRaw, "smooth");
       if (!Object.is(nextValue, selectedValueRef.current)) {
         onChange(nextValue);
       }
@@ -10657,30 +10880,39 @@ function ScrollPickerColumn({
     container.addEventListener("wheel", onWheel, { passive: false });
     return () => {
       container.removeEventListener("wheel", onWheel);
+      if (wheelAccumIdleTimerRef.current) {
+        clearTimeout(wheelAccumIdleTimerRef.current);
+      }
     };
-  }, [getIndex, loop, onChange, scrollToValue, values]);
+  }, [loop, onChange, scrollToIndex, values]);
   const handleKeyDown = (event) => {
-    const currentIndex = getIndex(selectedValueRef.current);
-    let nextIndex = null;
+    const container = scrollRef.current;
+    if (!container || values.length === 0) return;
+    const metrics = readMetrics(container);
+    if (!metrics) return;
+    const currentRaw = readRawIndex(container, metrics);
+    let targetRaw = null;
     switch (event.key) {
       case "ArrowUp":
-        nextIndex = loop ? normalizeIndex2(currentIndex - 1, values.length) : Math.max(currentIndex - 1, 0);
+        targetRaw = loop ? stepLoopRawIndex(currentRaw, -1, values.length, LOOP_SECTIONS2, MIDDLE_SECTION2).rawIndex : Math.max(currentRaw - 1, 0);
         break;
       case "ArrowDown":
-        nextIndex = loop ? normalizeIndex2(currentIndex + 1, values.length) : Math.min(currentIndex + 1, values.length - 1);
+        targetRaw = loop ? stepLoopRawIndex(currentRaw, 1, values.length, LOOP_SECTIONS2, MIDDLE_SECTION2).rawIndex : Math.min(currentRaw + 1, values.length - 1);
         break;
       case "Home":
-        nextIndex = 0;
+        targetRaw = loop ? nearestLoopIndex(currentRaw, 0, values.length, LOOP_SECTIONS2, -1) : 0;
         break;
       case "End":
-        nextIndex = values.length - 1;
+        targetRaw = loop ? nearestLoopIndex(currentRaw, values.length - 1, values.length, LOOP_SECTIONS2, 1) : values.length - 1;
         break;
       default:
         return;
     }
     event.preventDefault();
-    const nextValue = values[nextIndex];
-    scrollToValue(nextValue, "smooth");
+    const nextValue = values[normalizeWheelIndex(targetRaw, values.length)];
+    isUserScrollingRef.current = false;
+    smoothTargetValueRef.current = nextValue;
+    scrollToIndex(targetRaw, "smooth");
     if (!Object.is(nextValue, selectedValueRef.current)) {
       onChange(nextValue);
     }
@@ -10700,17 +10932,20 @@ function ScrollPickerColumn({
         tabIndex: 0,
         onKeyDown: handleKeyDown,
         children: /* @__PURE__ */ jsx57("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
-          const isSelected = Object.is(itemValue, value);
-          const valueIndex = loop ? normalizeIndex2(index, values.length) : index;
+          const isCommitted = Object.is(itemValue, value);
+          const valueIndex = loop ? normalizeWheelIndex(index, values.length) : index;
           const optionId = `${reactId}-${loop ? index : valueIndex}`;
           const key = getValueKey?.(itemValue, index) ?? `${String(itemValue)}-${index}`;
+          const useSelectedId = isCommitted && (!loop || Math.floor(index / values.length) === MIDDLE_SECTION2);
           return /* @__PURE__ */ jsx57("li", { className: "contents", children: /* @__PURE__ */ jsx57(
             ScrollPickerItem,
             {
-              id: isSelected ? selectedOptionId : optionId,
-              selected: isSelected,
+              id: useSelectedId ? selectedOptionId : optionId,
+              selected: isCommitted,
               onSelect: () => {
-                scrollToValue(itemValue, "smooth");
+                isUserScrollingRef.current = false;
+                smoothTargetValueRef.current = itemValue;
+                scrollToIndex(index, "smooth");
                 if (!Object.is(itemValue, selectedValueRef.current)) {
                   onChange(itemValue);
                 }
@@ -10720,7 +10955,21 @@ function ScrollPickerColumn({
           ) }, key);
         }) })
       }
-    )
+    ),
+    /* @__PURE__ */ jsx57("div", { className: "aviala-scroll-picker-column__clip", "aria-hidden": true, children: /* @__PURE__ */ jsx57("div", { ref: clipTrackRef, className: "aviala-scroll-picker-column__clip-track", children: /* @__PURE__ */ jsx57("div", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
+      const key = getValueKey?.(itemValue, index) ?? `clip-${String(itemValue)}-${index}`;
+      return /* @__PURE__ */ jsx57(
+        "div",
+        {
+          className: cn(
+            "aviala-scroll-picker-column__clip-item",
+            typographyVariants({ level: "text" })
+          ),
+          children: formatValue ? formatValue(itemValue) : String(itemValue)
+        },
+        key
+      );
+    }) }) }) })
   ] }) });
 }
 function ScrollPickerItem({
@@ -10752,8 +11001,8 @@ function ScrollPickerItem({
 
 // src/components/breadcrumb.tsx
 import {
-  DirectionArrowLeftLight as DirectionArrowLeftLight3,
-  DirectionArrowRightLight as DirectionArrowRightLight3,
+  DirectionArrowLeftLight as DirectionArrowLeftLight4,
+  DirectionArrowRightLight as DirectionArrowRightLight4,
   SymbolMore
 } from "@aviala-design/icons";
 import { cva as cva15 } from "class-variance-authority";
@@ -10879,7 +11128,7 @@ var BreadcrumbEllipsisItem = forwardRef39(
     ...props
   }, ref) => {
     const rtl = useRtl();
-    const ChevronIcon = rtl ? DirectionArrowLeftLight3 : DirectionArrowRightLight3;
+    const ChevronIcon = rtl ? DirectionArrowLeftLight4 : DirectionArrowRightLight4;
     const content = /* @__PURE__ */ jsxs43(Fragment9, { children: [
       /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
       showChevron ? /* @__PURE__ */ jsx58("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx58(ChevronIcon, { width: 14, height: 14, thickness: "Light" }) }) : null
@@ -11115,8 +11364,8 @@ StepsItem.displayName = "StepsItem";
 
 // src/components/pagination.tsx
 import {
-  DirectionArrowLeftLight as DirectionArrowLeftLight4,
-  DirectionArrowRightLight as DirectionArrowRightLight4
+  DirectionArrowLeftLight as DirectionArrowLeftLight5,
+  DirectionArrowRightLight as DirectionArrowRightLight5
 } from "@aviala-design/icons";
 import {
   forwardRef as forwardRef42,
@@ -11175,8 +11424,8 @@ var Pagination = forwardRef42(
   }, ref) => {
     const locale = useLocaleMessages("Pagination");
     const rtl = useRtl();
-    const PrevIcon = rtl ? DirectionArrowRightLight4 : DirectionArrowLeftLight4;
-    const NextIcon = rtl ? DirectionArrowLeftLight4 : DirectionArrowRightLight4;
+    const PrevIcon = rtl ? DirectionArrowRightLight5 : DirectionArrowLeftLight5;
+    const NextIcon = rtl ? DirectionArrowLeftLight5 : DirectionArrowRightLight5;
     const resolvedJumpLabel = jumpLabel ?? locale.jumpTo;
     const resolvedSizeLabel = sizeLabel ?? locale.pageSize;
     const resolvedSizeOptionLabel = sizeOptionLabel ?? ((size) => interpolate(locale.items, { size }));
@@ -11357,8 +11606,8 @@ Pagination.displayName = "Pagination";
 
 // src/components/card.tsx
 import {
-  DirectionArrowLeftLight as DirectionArrowLeftLight5,
-  DirectionArrowRightLight as DirectionArrowRightLight5,
+  DirectionArrowLeftLight as DirectionArrowLeftLight6,
+  DirectionArrowRightLight as DirectionArrowRightLight6,
   GeneralSetting as GeneralSetting2
 } from "@aviala-design/icons";
 import {
@@ -11401,7 +11650,7 @@ var CardHead = forwardRef43(
   }, ref) => {
     const locale = useLocaleMessages("Card");
     const rtl = useRtl();
-    const ChevronIcon = rtl ? DirectionArrowLeftLight5 : DirectionArrowRightLight5;
+    const ChevronIcon = rtl ? DirectionArrowLeftLight6 : DirectionArrowRightLight6;
     const primaryAction = action ?? /* @__PURE__ */ jsx62(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx62(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
@@ -11471,7 +11720,7 @@ var CardBottom = forwardRef43(
   }, ref) => {
     const locale = useLocaleMessages("Card");
     const rtl = useRtl();
-    const ChevronIcon = rtl ? DirectionArrowLeftLight5 : DirectionArrowRightLight5;
+    const ChevronIcon = rtl ? DirectionArrowLeftLight6 : DirectionArrowRightLight6;
     const primaryAction = action ?? /* @__PURE__ */ jsx62(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx62(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;