@multiplatform.one/forms 7.4.1 → 7.5.0

package/src/Wheel/index.tsx

@@ -1,8 +1,12 @@
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { PanResponder, type GestureResponderEvent } from "react-native";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type { GetProps, SizeTokens } from "tamagui";
-import { View, styled, isWeb, Text } from "tamagui";
+import { View, getTokens, isWeb, styled, Text } from "tamagui";
+import { t } from "../shared/t";
+import { fireSelectionHaptic } from "./haptic";
+import { WheelEdgeFade } from "./WheelEdgeFade";
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -11,6 +15,9 @@ export interface WheelItem<T = string | number> {
   label?: string;
 }
 
+/** iOS 14 multi-column highlight joining (CupertinoPicker capStart/capEnd). */
+export type WheelHighlightEdges = "all" | "start" | "end" | "none";
+
 export interface WheelProps<T = string | number> {
   /** Array of items to display */
   items: (T | WheelItem<T>)[];
@@ -22,6 +29,8 @@ export interface WheelProps<T = string | number> {
   visibleItems?: 3 | 5 | 7;
   /** Height of each item */
   itemHeight?: number;
+  /** Column width in px. Items are absolutely positioned, so this is the painted width. */
+  width?: number;
   /** Custom render function for items */
   renderItem?: (item: T, index: number, isSelected: boolean) => ReactNode;
   /** Whether the wheel is disabled */
@@ -33,6 +42,20 @@ export interface WheelProps<T = string | number> {
    * instead of rubber-banding. Uses virtual rows with modulo item indexing.
    */
   loop?: boolean;
+  /**
+   * How the iOS selection fill rounds and insets. `"all"` is a standalone
+   * column; `"start"` / `"end"` / `"none"` join adjacent columns into one band.
+   */
+  highlightEdges?: WheelHighlightEdges;
+  /** Stretch inside a row of columns (time picker). */
+  flex?: number;
+  /**
+   * Fires once each time a different item crosses the centre band (drag,
+   * flick, or snap). Native wires this to a selection haptic.
+   */
+  onItemCross?: (value: T, index: number) => void;
+  /** Accessible name for the picker (web renders role="slider"). */
+  "aria-label"?: string;
 }
 
 // ── iOS Physics Constants ─────────────────────────────────────
@@ -42,6 +65,65 @@ const friction = 0.95; // Apple's PKScrollViewDecelerationFrictionFactor
 const minVelocity = 0.5; // Minimum velocity before snapping
 const momentumMultiplier = 0.8; // Velocity multiplier for momentum feel
 const rubberBandConstant = 0.55; // Apple's rubber-banding constant
+const tapSlopPx = 8;
+
+type WheelPointer = {
+  clientY: number;
+  pointerId: number;
+  locationY?: number;
+};
+
+/**
+ * Flutter CupertinoPicker / UIPickerView cylinder. diameterRatio 1.07 and
+ * squeeze 1.45 are the Cupertino defaults — a shallow drum, not a 70° fan.
+ */
+const diameterRatio = 1.07;
+const squeeze = 1.45;
+const perspectivePx = 400;
+const defaultColumnWidth = 88;
+
+/** Type scale for wheel numerals — iOS UIPickerView is ~21pt at default size. */
+const wheelFontBySize: Record<"small" | "medium" | "large", SizeTokens> = {
+  small: "$6",
+  medium: "$8",
+  large: "$9",
+};
+
+/** Durations for discrete snaps (mirrors theme animationConfig). */
+const transitionDurationsMs: Record<string, number> = {
+  bouncy: 200,
+  lazy: 600,
+  slow: 500,
+  medium: 250,
+  quick: 100,
+  tooltip: 400,
+  snappy: 80,
+  gentle: 450,
+};
+
+// The interactive wrapper is a raw <div>, so the non-removable focus-visible
+// ring (W12 / DG-A11Y-01 / LC-71: 2px solid $outlineColor) has to come from
+// an injected stylesheet — inline styles cannot express :focus-visible.
+// Inset (−2px): the viewport clips overflow to radius (LC-71 clipping arm).
+const WHEEL_FOCUS_STYLE_ID = "mp1-wheel-focus";
+function ensureWheelFocusStyles() {
+  if (!isWeb || typeof document === "undefined") return;
+  if (document.getElementById(WHEEL_FOCUS_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = WHEEL_FOCUS_STYLE_ID;
+  style.textContent =
+    ".mp1-wheel-wrapper:focus-visible { outline: 2px solid var(--outlineColor, rgba(0,0,0,0.5)); outline-offset: -2px; }";
+  document.head.appendChild(style);
+}
+
+const wheelMaskStyle: CSSProperties | undefined = isWeb
+  ? {
+      WebkitMaskImage:
+        "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)",
+      maskImage:
+        "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)",
+    }
+  : undefined;
 
 // ── Styled components ─────────────────────────────────────────
 
@@ -50,7 +132,6 @@ const WheelContainer = styled(View, {
   position: "relative",
   overflow: "hidden",
   userSelect: "none",
-  width: 80, // Default width for wheel column
 });
 
 const WheelItemContainer = styled(View, {
@@ -68,28 +149,9 @@ const SelectionIndicator = styled(View, {
   position: "absolute",
   left: 0,
   right: 0,
-  borderTopWidth: 1,
-  borderBottomWidth: 1,
-  borderColor: "$borderColor",
-  backgroundColor: "$color3",
-  opacity: 0.3,
   pointerEvents: "none",
 });
 
-const FadeOverlay = styled(View, {
-  name: "WheelFadeOverlay",
-  position: "absolute",
-  left: 0,
-  right: 0,
-  pointerEvents: "none",
-  variants: {
-    edge: {
-      top: { top: 0 },
-      bottom: { bottom: 0 },
-    },
-  } as const,
-});
-
 // ── Helper functions ──────────────────────────────────────────
 
 function normalizeItem<T>(item: T | WheelItem<T>): WheelItem<T> {
@@ -151,43 +213,56 @@ function rubberBand(offset: number, dimension: number): number {
   return offset < 0 ? -result : result;
 }
 
-// Calculate 3D transform for wheel effect
+/**
+ * Project a row onto the Cupertino cylinder. Angle 0 sits in the selection
+ * band; off-center rows recede with rotateX + foreshortening (not opacity —
+ * row text stays on the AA $color11 ramp).
+ */
 function getItemTransform(
   index: number,
   scrollOffset: number,
   itemHeight: number,
   containerHeight: number,
 ): { translateY: number; rotateX: number; scale: number; opacity: number } {
-  const centerY = containerHeight / 2;
-  // Rows are laid out so the row at `scrollOffset / itemHeight` sits under the
-  // selection indicator (which is centered at `containerHeight / 2`), hence the
-  // `(containerHeight - itemHeight) / 2` padding shift.
-  const itemCenterY =
-    index * itemHeight + itemHeight / 2 - scrollOffset + (containerHeight - itemHeight) / 2;
-  const distanceFromCenter = itemCenterY - centerY;
-  const normalizedDistance = distanceFromCenter / (containerHeight / 2);
-
-  // Rotation: items rotate on X-axis as they move away from center
-  // Max rotation is about 70 degrees at the edges
-  const rotateX = normalizedDistance * -70;
-
-  // Scale: items get smaller as they rotate away
-  const scale = 1 - Math.abs(normalizedDistance) * 0.3;
-
-  // Opacity: items fade as they move away from center (kept gentle enough that
-  // the rows adjacent to the selection stay readable, ~3:1 contrast)
-  const opacity = 1 - Math.abs(normalizedDistance) * 0.35;
-
-  // Y position adjusted for 3D perspective effect
-  // Items appear to curve back
-  const curveOffset = Math.abs(normalizedDistance) * normalizedDistance * itemHeight * 0.5;
-  const translateY = itemCenterY - itemHeight / 2 + curveOffset;
-
+  const radius = (containerHeight * diameterRatio) / 2;
+  const angle = (index * itemHeight - scrollOffset) / squeeze / Math.max(radius, 1);
+  const clamped = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, angle));
+  const centerTop = (containerHeight - itemHeight) / 2;
+  const translateY = centerTop + radius * Math.sin(clamped);
+  const rotateX = -(clamped * 180) / Math.PI;
+  const scale = Math.max(0.72, Math.min(1, Math.cos(clamped)));
   return {
     translateY,
-    rotateX: Math.max(-85, Math.min(85, rotateX)),
-    scale: Math.max(0.5, Math.min(1, scale)),
-    opacity: Math.max(0.2, Math.min(1, opacity)),
+    rotateX,
+    scale,
+    opacity: 1,
+  };
+}
+
+function tokenPx(token: string | number, scale: "radius" | "space"): number {
+  if (typeof token === "number") return token;
+  const key = String(token).replace(/^\$/, "");
+  const val = (getTokens() as { [k: string]: Record<string, { val?: number }> })[scale]?.[key]?.val;
+  if (typeof val === "number") return val;
+  return scale === "radius" ? 9 : 8;
+}
+
+function highlightBandStyle(
+  edges: WheelHighlightEdges,
+  radiusToken: string | number,
+  pointy: boolean,
+): CSSProperties {
+  const r = pointy ? 0 : tokenPx(radiusToken, "radius");
+  const inset = tokenPx("$2", "space");
+  const capStart = edges === "all" || edges === "start";
+  const capEnd = edges === "all" || edges === "end";
+  return {
+    borderStartStartRadius: capStart ? r : 0,
+    borderStartEndRadius: capEnd ? r : 0,
+    borderEndStartRadius: capStart ? r : 0,
+    borderEndEndRadius: capEnd ? r : 0,
+    marginInlineStart: capStart ? inset : 0,
+    marginInlineEnd: capEnd ? inset : 0,
   };
 }
 
@@ -198,13 +273,30 @@ export function Wheel<T = string | number>({
   value,
   onChange,
   visibleItems = 5,
-  itemHeight = 40,
+  itemHeight: itemHeightProp,
+  width: widthProp,
   renderItem,
   disabled = false,
-  size = "$4",
+  size: sizeProp,
   loop = false,
+  highlightEdges = "all",
+  flex,
+  onItemCross,
+  "aria-label": ariaLabel,
 }: WheelProps<T>) {
   const { knobProps } = useResolvedKnobs();
+  const sizeKnob = (knobProps.size as "small" | "medium" | "large") ?? "medium";
+  const size = sizeProp ?? wheelFontBySize[sizeKnob] ?? "$8";
+  // Row geometry rides nestedControl (density-aware, 32px at medium — iOS
+  // UIPickerView item extent). Explicit itemHeight ejects.
+  const itemHeight = itemHeightProp ?? knobProps.nestedControl.px ?? 32;
+  const columnWidth = widthProp ?? defaultColumnWidth;
+  ensureWheelFocusStyles();
+  // LC-25: discrete snaps (keyboard / controlled value) tween; drag stays 1:1.
+  // knobProps.transition is undefined at animation "none" (which also carries
+  // prefers-reduced-motion) — snaps must JUMP then, not fall back to a tween.
+  const motionTransition = knobProps.transition as string | undefined;
+  const snapDurationMs = motionTransition ? (transitionDurationsMs[motionTransition] ?? 100) : 0;
   const containerRef = useRef<HTMLDivElement>(null);
   const [scrollOffset, setScrollOffset] = useState(0);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -219,10 +311,15 @@ export function Wheel<T = string | number>({
   // Animation state
   const animationRef = useRef<number | null>(null);
   const isAnimatingRef = useRef(false);
+  const hasMountedRef = useRef(false);
+  const selectedIndexRef = useRef(selectedIndex);
+  selectedIndexRef.current = selectedIndex;
 
   // Drag state
   const isDraggingRef = useRef(false);
   const lastYRef = useRef(0);
+  const downYRef = useRef(0);
+  const dragDistanceRef = useRef(0);
   const lastTimeRef = useRef(0);
   const dragVelocitiesRef = useRef<number[]>([]);
 
@@ -231,23 +328,36 @@ export function Wheel<T = string | number>({
   const minOffset = 0;
   const maxOffset = n > 0 ? (n - 1) * itemHeight : 0;
 
-  // Sync from controlled value (loop mode: same canonical offset as after snap)
+  const liveDataIndex =
+    n === 0
+      ? 0
+      : loopEnabled
+        ? modIndex(Math.round(scrollOffset / itemHeight), n)
+        : Math.max(0, Math.min(Math.round(scrollOffset / itemHeight), n - 1));
+
+  const lastCrossIndexRef = useRef<number | null>(null);
+  const onItemCrossRef = useRef(onItemCross);
+  onItemCrossRef.current = onItemCross;
   useEffect(() => {
-    if (value !== undefined) {
-      const index = items.findIndex((item) => getItemValue(item) === value);
-      if (index !== -1) {
-        setSelectedIndex(index);
-        const raw = index * itemHeight;
-        setScrollOffset(loop && n > 1 ? equivalentOffsetNear(0, raw, n, itemHeight) : raw);
-      }
+    if (n === 0) return;
+    if (lastCrossIndexRef.current === null) {
+      lastCrossIndexRef.current = liveDataIndex;
+      return;
     }
-  }, [value, items, itemHeight, loop, n]);
+    if (lastCrossIndexRef.current === liveDataIndex) return;
+    lastCrossIndexRef.current = liveDataIndex;
+    const item = items[liveDataIndex];
+    if (item === undefined) return;
+    onItemCrossRef.current?.(getItemValue(item), liveDataIndex);
+    fireSelectionHaptic();
+  }, [liveDataIndex, items, n]);
 
   const runSnapComplete = useCallback(
     (finalOffset: number, dataIndex: number) => {
       const safeIdx = Math.max(0, Math.min(dataIndex, n - 1));
       const settled =
         loopEnabled && n > 0 ? equivalentOffsetNear(0, finalOffset, n, itemHeight) : finalOffset;
+      scrollOffsetRef.current = settled;
       setScrollOffset(settled);
       setSelectedIndex(safeIdx);
       onChange?.(getItemValue(items[safeIdx]));
@@ -264,13 +374,17 @@ export function Wheel<T = string | number>({
           ? equivalentOffsetNear(startOffset, targetOffset, n, itemHeight)
           : targetOffset;
 
-      if (!animated) {
+      if (!animated || snapDurationMs <= 0) {
         runSnapComplete(goal, dataIndex);
         return;
       }
 
       const distance = goal - startOffset;
-      const duration = 300;
+      if (Math.abs(distance) < 0.5) {
+        runSnapComplete(goal, dataIndex);
+        return;
+      }
+      const duration = snapDurationMs;
       const startTime = performance.now();
 
       const animate = (currentTime: number) => {
@@ -278,6 +392,7 @@ export function Wheel<T = string | number>({
         const progress = Math.min(elapsed / duration, 1);
         const eased = 1 - Math.pow(1 - progress, 3);
         const newOffset = startOffset + distance * eased;
+        scrollOffsetRef.current = newOffset;
         setScrollOffset(newOffset);
 
         if (progress < 1) {
@@ -291,7 +406,7 @@ export function Wheel<T = string | number>({
       if (animationRef.current) cancelAnimationFrame(animationRef.current);
       animationRef.current = requestAnimationFrame(animate);
     },
-    [loopEnabled, n, itemHeight, runSnapComplete],
+    [loopEnabled, n, itemHeight, runSnapComplete, snapDurationMs],
   );
 
   /** Snap selection to a data index (0..n-1). */
@@ -315,6 +430,37 @@ export function Wheel<T = string | number>({
     [n, itemHeight, loopEnabled, animateToOffset],
   );
 
+  // Sync from controlled value — LC-25: discrete jumps animate; drag stays live.
+  useEffect(() => {
+    if (value === undefined) return;
+    const index = items.findIndex((item) => getItemValue(item) === value);
+    if (index === -1) return;
+
+    // First paint: land instantly (no entrance tween from 0).
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      setSelectedIndex(index);
+      const raw = index * itemHeight;
+      const settled = loopEnabled && n > 1 ? equivalentOffsetNear(0, raw, n, itemHeight) : raw;
+      scrollOffsetRef.current = settled;
+      setScrollOffset(settled);
+      return;
+    }
+
+    // Continuous drag owns the offset — don't fight the pointer.
+    if (isDraggingRef.current) {
+      setSelectedIndex(index);
+      return;
+    }
+
+    if (index === selectedIndexRef.current && !isAnimatingRef.current) {
+      // Already settled on this value (e.g. onChange echo) — keep offset.
+      return;
+    }
+
+    snapToIndex(index, true);
+  }, [value, items, itemHeight, loopEnabled, n, snapToIndex]);
+
   /** After free scroll, land on the nearest row (drag / wheel / momentum). */
   const snapToNearestRow = useCallback(
     (animated = true) => {
@@ -332,9 +478,35 @@ export function Wheel<T = string | number>({
     [n, itemHeight, loopEnabled, animateToOffset],
   );
 
-  // Momentum animation (iOS-style deceleration)
+  const hitTestDataIndex = useCallback(
+    (tapY: number): number | null => {
+      if (n === 0) return null;
+      const offset = scrollOffsetRef.current;
+      const centerRow = Math.round(offset / itemHeight);
+      const rowBuffer = paddingItems + 5;
+      let best: { dataIndex: number; dist: number } | null = null;
+      for (let vr = centerRow - rowBuffer; vr <= centerRow + rowBuffer; vr++) {
+        if (!loopEnabled && (vr < 0 || vr >= n)) continue;
+        const dataIndex = loopEnabled ? modIndex(vr, n) : vr;
+        const { translateY } = getItemTransform(vr, offset, itemHeight, containerHeight);
+        const dist = Math.abs(translateY + itemHeight / 2 - tapY);
+        if (!best || dist < best.dist) best = { dataIndex, dist };
+      }
+      if (best && best.dist <= itemHeight) return best.dataIndex;
+      return null;
+    },
+    [n, itemHeight, paddingItems, loopEnabled, containerHeight],
+  );
+
+  // Momentum animation (iOS-style deceleration). LC-68: at animation "none"
+  // / PRM there is no coast — jump to the nearest row (Apple Reduce Motion,
+  // GOV.UK scroll-behavior:auto, Material spatial-motion off).
   const startMomentum = useCallback(
     (initialVelocity: number) => {
+      if (snapDurationMs <= 0) {
+        snapToNearestRow(false);
+        return;
+      }
       let velocity = initialVelocity * momentumMultiplier;
       let offset = scrollOffsetRef.current;
 
@@ -352,12 +524,12 @@ export function Wheel<T = string | number>({
           }
         }
 
+        scrollOffsetRef.current = offset;
         setScrollOffset(offset);
 
         if (Math.abs(velocity) > minVelocity) {
           animationRef.current = requestAnimationFrame(animate);
         } else {
-          scrollOffsetRef.current = offset;
           snapToNearestRow(true);
         }
       };
@@ -366,12 +538,12 @@ export function Wheel<T = string | number>({
       if (animationRef.current) cancelAnimationFrame(animationRef.current);
       animationRef.current = requestAnimationFrame(animate);
     },
-    [loopEnabled, minOffset, maxOffset, containerHeight, itemHeight, snapToNearestRow],
+    [loopEnabled, minOffset, maxOffset, containerHeight, snapToNearestRow, snapDurationMs],
   );
 
   // Handle pointer/mouse down
   const handlePointerDown = useCallback(
-    (e: React.PointerEvent | PointerEvent) => {
+    (e: WheelPointer) => {
       if (disabled) return;
 
       // Stop any ongoing animation
@@ -382,12 +554,14 @@ export function Wheel<T = string | number>({
 
       isDraggingRef.current = true;
       lastYRef.current = e.clientY;
+      downYRef.current = e.clientY;
+      dragDistanceRef.current = 0;
       lastTimeRef.current = performance.now();
       dragVelocitiesRef.current = [];
 
-      // Capture pointer for drag outside element
       if (isWeb && containerRef.current) {
         containerRef.current.setPointerCapture(e.pointerId);
+        containerRef.current.style.cursor = "grabbing";
       }
     },
     [disabled],
@@ -395,13 +569,14 @@ export function Wheel<T = string | number>({
 
   // Handle pointer/mouse move
   const handlePointerMove = useCallback(
-    (e: React.PointerEvent | PointerEvent) => {
+    (e: WheelPointer) => {
       if (!isDraggingRef.current || disabled) return;
 
       const currentY = e.clientY;
       const currentTime = performance.now();
       const deltaY = lastYRef.current - currentY;
       const deltaTime = currentTime - lastTimeRef.current;
+      dragDistanceRef.current += Math.abs(deltaY);
 
       // Calculate velocity
       if (deltaTime > 0) {
@@ -434,14 +609,30 @@ export function Wheel<T = string | number>({
 
   // Handle pointer/mouse up
   const handlePointerUp = useCallback(
-    (e: React.PointerEvent | PointerEvent) => {
+    (e: WheelPointer) => {
       if (!isDraggingRef.current) return;
 
       isDraggingRef.current = false;
 
-      // Release pointer capture
       if (isWeb && containerRef.current) {
-        containerRef.current.releasePointerCapture(e.pointerId);
+        try {
+          containerRef.current.releasePointerCapture(e.pointerId);
+        } catch {
+          // already released
+        }
+        containerRef.current.style.cursor = disabled ? "not-allowed" : "grab";
+      }
+
+      // iOS: a tap on a visible row snaps that row to center.
+      if (dragDistanceRef.current < tapSlopPx) {
+        const localY = e.locationY;
+        const rect = containerRef.current?.getBoundingClientRect();
+        const tapY = typeof localY === "number" ? localY : e.clientY - (rect?.top ?? 0);
+        const tapped = hitTestDataIndex(tapY);
+        if (tapped != null) {
+          snapToIndex(tapped, true);
+          return;
+        }
       }
 
       // Calculate average velocity for momentum
@@ -458,9 +649,54 @@ export function Wheel<T = string | number>({
         snapToNearestRow(true);
       }
     },
-    [snapToNearestRow, startMomentum],
+    [snapToNearestRow, startMomentum, hitTestDataIndex, snapToIndex, disabled],
   );
 
+  const disabledRef = useRef(disabled);
+  disabledRef.current = disabled;
+  const pointerDownRef = useRef(handlePointerDown);
+  pointerDownRef.current = handlePointerDown;
+  const pointerMoveRef = useRef(handlePointerMove);
+  pointerMoveRef.current = handlePointerMove;
+  const pointerUpRef = useRef(handlePointerUp);
+  pointerUpRef.current = handlePointerUp;
+
+  const panResponder = useMemo(() => {
+    if (isWeb) return { panHandlers: {} as Record<string, unknown> };
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: (_, gesture) => Math.abs(gesture.dy) > 1,
+      onPanResponderTerminationRequest: () => false,
+      onShouldBlockNativeResponder: () => true,
+      onPanResponderGrant: (evt: GestureResponderEvent) => {
+        pointerDownRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1,
+        });
+      },
+      onPanResponderMove: (evt: GestureResponderEvent) => {
+        pointerMoveRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1,
+        });
+      },
+      onPanResponderRelease: (evt: GestureResponderEvent) => {
+        pointerUpRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1,
+          locationY: evt.nativeEvent.locationY,
+        });
+      },
+      onPanResponderTerminate: (evt: GestureResponderEvent) => {
+        pointerUpRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1,
+          locationY: evt.nativeEvent.locationY,
+        });
+      },
+    });
+  }, []);
+
   // Handle mouse wheel
   const handleWheel = useCallback(
     (e: React.WheelEvent | WheelEvent) => {
@@ -486,6 +722,7 @@ export function Wheel<T = string | number>({
         }
       }
 
+      scrollOffsetRef.current = newOffset;
       setScrollOffset(newOffset);
 
       if (animationRef.current) cancelAnimationFrame(animationRef.current);
@@ -497,7 +734,7 @@ export function Wheel<T = string | number>({
         }, 100);
       });
     },
-    [disabled, loopEnabled, minOffset, maxOffset, itemHeight, snapToNearestRow],
+    [disabled, loopEnabled, minOffset, maxOffset, snapToNearestRow],
   );
 
   // Handle keyboard
@@ -592,56 +829,86 @@ export function Wheel<T = string | number>({
     });
   }, [n, loopEnabled, scrollOffset, itemHeight, paddingItems, containerHeight]);
 
+  const itemColor = (isSelected: boolean) =>
+    disabled ? "$color10" : isSelected ? "$color12" : "$color11";
+
+  const radiusToken = knobProps.borderRadius.borderRadius as string | number;
+  const highlightStyle = highlightBandStyle(highlightEdges, radiusToken, Boolean(knobProps.pointy));
+  const highlightSmoothClass =
+    "className" in knobProps.borderRadius && typeof knobProps.borderRadius.className === "string"
+      ? knobProps.borderRadius.className
+      : undefined;
+
+  const renderItemNode = (dataIndex: number, isSelected: boolean) => {
+    const item = items[dataIndex];
+    const itemValue = getItemValue(item);
+    if (renderItem) return renderItem(itemValue, dataIndex, isSelected);
+    return (
+      <Text
+        {...knobProps.body}
+        fontSize={size}
+        fontWeight={isSelected && !disabled ? "600" : "400"}
+        color={itemColor(isSelected)}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        maxWidth="100%"
+        paddingHorizontal="$2"
+      >
+        {getItemLabel(item)}
+      </Text>
+    );
+  };
+
   return (
     <WheelContainer
       height={containerHeight}
-      opacity={disabled ? 0.5 : 1}
+      width={flex ? "100%" : columnWidth}
+      minWidth={flex ? 0 : columnWidth}
+      flex={flex}
       {...knobProps.containerRadius}
       data-testid="wheel"
+      data-disabled={disabled ? true : undefined}
+      aria-disabled={disabled || undefined}
+      opacity={1}
     >
-      {/* Selection indicator */}
-      <SelectionIndicator top={paddingItems * itemHeight} height={itemHeight} />
-
-      {/* Fade overlays for 3D depth effect */}
-      <FadeOverlay
-        edge="top"
-        height={paddingItems * itemHeight}
-        {...(isWeb
-          ? {
-              style: {
-                background: "linear-gradient(to bottom, var(--background) 0%, transparent 100%)",
-              } as React.CSSProperties,
-            }
-          : {})}
-      />
-      <FadeOverlay
-        edge="bottom"
-        height={paddingItems * itemHeight}
-        {...(isWeb
-          ? {
-              style: {
-                background: "linear-gradient(to top, var(--background) 0%, transparent 100%)",
-              } as React.CSSProperties,
-            }
-          : {})}
+      {/* iOS 14+ selection fill — LC-71 selected=fill, never hairline borders */}
+      <SelectionIndicator
+        className={highlightSmoothClass}
+        backgroundColor="$color4"
+        top={paddingItems * itemHeight}
+        height={itemHeight}
+        style={highlightStyle}
+        data-testid="wheel-selection"
       />
 
       {/* Interactive container */}
       {isWeb ? (
         <div
           ref={containerRef}
+          className="mp1-wheel-wrapper"
           tabIndex={disabled ? -1 : 0}
+          role="slider"
+          aria-label={ariaLabel ?? t("Value picker")}
+          aria-orientation="vertical"
+          aria-valuemin={0}
+          aria-valuemax={Math.max(0, n - 1)}
+          aria-valuenow={selectedIndex}
+          aria-valuetext={
+            items[selectedIndex] !== undefined ? getItemLabel(items[selectedIndex]) : undefined
+          }
+          aria-disabled={disabled || undefined}
+          data-disabled={disabled ? true : undefined}
           style={{
             width: "100%",
             height: containerHeight,
             position: "relative",
-            perspective: "1000px",
+            perspective: `${perspectivePx}px`,
             perspectiveOrigin: "center center",
             overflow: "hidden",
             userSelect: "none",
             touchAction: "none",
-            cursor: "grab",
-            outline: "none",
+            cursor: disabled ? "not-allowed" : "grab",
+            ...wheelMaskStyle,
           }}
           onPointerDown={handlePointerDown as any}
           onPointerMove={handlePointerMove as any}
@@ -651,9 +918,7 @@ export function Wheel<T = string | number>({
           data-testid="wheel-wrapper"
         >
           {renderRows.map(({ virtualRow, dataIndex }) => {
-            const item = items[dataIndex];
-            const isSelected = dataIndex === selectedIndex;
-            const itemValue = getItemValue(item);
+            const isSelected = dataIndex === liveDataIndex;
             const transform = getItemTransform(
               virtualRow,
               scrollOffset,
@@ -663,14 +928,12 @@ export function Wheel<T = string | number>({
 
             if (Math.abs(transform.rotateX) > 85) return null;
 
-            const rowKey = loopEnabled ? `${dataIndex}-${virtualRow}` : String(itemValue);
-
             return (
               <div
-                key={rowKey}
+                key={`${dataIndex}-${virtualRow}`}
                 data-testid="wheel-item"
                 data-index={dataIndex}
-                data-selected={isSelected}
+                data-selected={isSelected ? true : undefined}
                 aria-hidden={isSelected ? undefined : true}
                 style={{
                   position: "absolute",
@@ -688,18 +951,7 @@ export function Wheel<T = string | number>({
                   backfaceVisibility: "hidden",
                 }}
               >
-                {renderItem ? (
-                  renderItem(itemValue, dataIndex, isSelected)
-                ) : (
-                  <Text
-                    {...knobProps.body}
-                    fontSize={size}
-                    fontWeight={isSelected ? "600" : "400"}
-                    color={isSelected ? "$color12" : "$color11"}
-                  >
-                    {getItemLabel(item)}
-                  </Text>
-                )}
+                {renderItemNode(dataIndex, isSelected)}
               </div>
             );
           })}
@@ -710,15 +962,14 @@ export function Wheel<T = string | number>({
           height={containerHeight}
           position="relative"
           overflow="hidden"
-          onPointerDown={handlePointerDown as any}
-          onPointerMove={handlePointerMove as any}
-          onPointerUp={handlePointerUp as any}
-          onPointerCancel={handlePointerUp as any}
+          cursor={disabled ? "not-allowed" : "grab"}
+          data-testid="wheel-wrapper"
+          data-disabled={disabled ? true : undefined}
+          aria-disabled={disabled || undefined}
+          {...panResponder.panHandlers}
         >
           {renderRows.map(({ virtualRow, dataIndex }) => {
-            const item = items[dataIndex];
-            const isSelected = dataIndex === selectedIndex;
-            const itemValue = getItemValue(item);
+            const isSelected = dataIndex === liveDataIndex;
             const transform = getItemTransform(
               virtualRow,
               scrollOffset,
@@ -728,11 +979,9 @@ export function Wheel<T = string | number>({
 
             if (Math.abs(transform.rotateX) > 85) return null;
 
-            const rowKey = loopEnabled ? `${dataIndex}-${virtualRow}` : String(itemValue);
-
             return (
               <View
-                key={rowKey}
+                key={`${dataIndex}-${virtualRow}`}
                 position="absolute"
                 left={0}
                 right={0}
@@ -743,22 +992,16 @@ export function Wheel<T = string | number>({
                 pointerEvents="none"
                 y={transform.translateY}
                 scale={transform.scale}
+                rotateX={`${transform.rotateX}deg`}
+                data-testid="wheel-item"
+                data-index={dataIndex}
+                data-selected={isSelected ? true : undefined}
               >
-                {renderItem ? (
-                  renderItem(itemValue, dataIndex, isSelected)
-                ) : (
-                  <Text
-                    {...knobProps.body}
-                    fontSize={size}
-                    fontWeight={isSelected ? "600" : "400"}
-                    color={isSelected ? "$color12" : "$color11"}
-                  >
-                    {getItemLabel(item)}
-                  </Text>
-                )}
+                {renderItemNode(dataIndex, isSelected)}
               </View>
             );
           })}
+          <WheelEdgeFade height={paddingItems * itemHeight} />
         </View>
       )}
     </WheelContainer>