@multiplatform.one/forms 7.35.0 → 7.37.0

package/src/Wheel/index.tsx

@@ -1,63 +1,23 @@
-import { motionDurationMs } from "@multiplatform.one/theme";
-import type { CSSProperties, ReactNode } from "react";
+import type { CSSProperties } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { PanResponder, type GestureResponderEvent } from "react-native";
-import { sizeTokenStep, useResolvedKnobs } from "@multiplatform.one/theme";
-import type { GetProps, SizeTokens } from "tamagui";
-import { View, getTokens, isWeb, styled, Text } from "tamagui";
+import type { GetProps } from "tamagui";
+import { View, isWeb, styled, Text } from "tamagui";
 import { t } from "../shared/t";
 import { fireSelectionHaptic } from "./haptic";
-import { WheelEdgeFade } from "./WheelEdgeFade";
-
-// ── Types ─────────────────────────────────────────────────────
-
-export interface WheelItem<T = string | number> {
-  value: T;
-  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>)[];
-  /** Currently selected value */
-  value?: T;
-  /** Called when selection changes */
-  onChange?: (value: T) => void;
-  /** Number of visible items (should be odd for center alignment) */
-  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 */
-  disabled?: boolean;
-  /** Size token for text */
-  size?: SizeTokens;
-  /**
-   * When true (and there are at least 2 items), scrolling wraps at the ends
-   * 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;
-}
+import { NativeWheel } from "./NativeWheel";
+import {
+  defaultColumnWidth,
+  drumPose,
+  drumReachRows,
+  getItemLabel,
+  getItemValue,
+  modIndex,
+  nearestRowForDataIndex,
+  useWheelLayout,
+  type WheelProps,
+} from "./wheelShared";
+
+export type { WheelHighlightEdges, WheelItem, WheelProps } from "./wheelShared";
 
 // ── iOS Physics Constants ─────────────────────────────────────
 // Based on Apple's UIScrollView deceleration behavior
@@ -74,22 +34,6 @@ type WheelPointer = {
   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 wheelFontByStep: Record<-1 | 0 | 1, SizeTokens> = {
-  [-1]: "$6",
-  0: "$8",
-  1: "$9",
-};
-
 // 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.
@@ -143,29 +87,6 @@ const SelectionIndicator = styled(View, {
 
 // ── Helper functions ──────────────────────────────────────────
 
-function normalizeItem<T>(item: T | WheelItem<T>): WheelItem<T> {
-  if (typeof item === "object" && item !== null && "value" in item) {
-    return item as WheelItem<T>;
-  }
-  return { value: item as T, label: String(item) };
-}
-
-function getItemLabel<T>(item: T | WheelItem<T>): string {
-  const normalized = normalizeItem(item);
-  return normalized.label ?? String(normalized.value);
-}
-
-function getItemValue<T>(item: T | WheelItem<T>): T {
-  const normalized = normalizeItem(item);
-  return normalized.value;
-}
-
-/** Non-negative modulo (JavaScript % can be negative for negative lhs). */
-function modIndex(row: number, n: number): number {
-  if (n <= 0) return 0;
-  return ((row % n) + n) % n;
-}
-
 /**
  * Scroll offset that shows the same item as `targetOffset` (same row mod n), chosen so its
  * value is closest to `referenceOffset` — shortest motion when animating from `referenceOffset`.
@@ -185,15 +106,6 @@ function equivalentOffsetNear(
   return base + k * span;
 }
 
-/** Shortest steps on the item circle from current row to target data index. */
-function nearestRowForDataIndex(currentRow: number, targetDataIndex: number, n: number): number {
-  const currentMod = modIndex(currentRow, n);
-  let delta = targetDataIndex - currentMod;
-  if (delta > n / 2) delta -= n;
-  if (delta < -n / 2) delta += n;
-  return currentRow + delta;
-}
-
 // Rubber-band effect for over-scrolling (iOS style)
 function rubberBand(offset: number, dimension: number): number {
   const c = rubberBandConstant;
@@ -203,9 +115,9 @@ function rubberBand(offset: number, dimension: number): number {
 }
 
 /**
- * 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).
+ * Project a row onto the UIPickerView drum (wheelShared drumPose). Row opacity
+ * stays 1 on web: the viewport mask fades the edges, so row text keeps the AA
+ * $color11 ramp.
  */
 function getItemTransform(
   index: number,
@@ -213,78 +125,39 @@ function getItemTransform(
   itemHeight: number,
   containerHeight: number,
 ): { translateY: number; rotateX: number; scale: number; opacity: number } {
-  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)));
+  const pose = drumPose(index - scrollOffset / itemHeight, itemHeight, containerHeight);
   return {
-    translateY,
-    rotateX,
-    scale,
+    translateY: (containerHeight - itemHeight) / 2 + pose.offset,
+    rotateX: pose.rotateX,
+    scale: pose.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;
-}
+// ── Wheel Component ───────────────────────────────────────────
 
-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,
-  };
+export function Wheel<T = string | number>(props: WheelProps<T>) {
+  return isWeb ? <WebWheel {...props} /> : <NativeWheel {...props} />;
 }
 
-// ── Wheel Component ───────────────────────────────────────────
-
-export function Wheel<T = string | number>({
-  items,
-  value,
-  onChange,
-  visibleItems = 5,
-  itemHeight: itemHeightProp,
-  width: widthProp,
-  renderItem,
-  disabled = false,
-  size: sizeProp,
-  loop = false,
-  highlightEdges = "all",
-  flex,
-  onItemCross,
-  "aria-label": ariaLabel,
-}: WheelProps<T>) {
-  const { knobProps } = useResolvedKnobs();
-  const size = sizeProp ?? wheelFontByStep[sizeTokenStep(knobProps.sizeToken)];
-  // Row geometry rides nestedControl (density-aware, 32px at medium — iOS
-  // UIPickerView item extent). Explicit itemHeight ejects.
-  const itemHeight = itemHeightProp ?? knobProps.nestedControl.px ?? 32;
+function WebWheel<T = string | number>(props: WheelProps<T>) {
+  const {
+    items,
+    value,
+    onChange,
+    visibleItems = 5,
+    width: widthProp,
+    renderItem,
+    disabled = false,
+    loop = false,
+    flex,
+    onItemCross,
+    "aria-label": ariaLabel,
+  } = props;
+  const { knobProps, size, itemHeight, snapDurationMs, highlightStyle, highlightClassName } =
+    useWheelLayout(props);
   const columnWidth = widthProp ?? defaultColumnWidth;
   ensureWheelFocusStyles();
-  // LC-25: discrete snaps (keyboard / controlled value) tween; drag stays 1:1.
-  // knobProps.motion.control.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.motion.control.transition as string | undefined;
-  const snapDurationMs = motionDurationMs(motionTransition);
   const containerRef = useRef<HTMLDivElement>(null);
   const [scrollOffset, setScrollOffset] = useState(0);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -640,51 +513,6 @@ export function Wheel<T = string | number>({
     [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) => {
@@ -797,36 +625,20 @@ export function Wheel<T = string | number>({
 
   const renderRows = useMemo(() => {
     if (n === 0) return [];
-    if (loopEnabled) {
-      const centerRow = Math.round(scrollOffset / itemHeight);
-      const rowBuffer = paddingItems + 5;
-      const list: { virtualRow: number; dataIndex: number }[] = [];
-      for (let vr = centerRow - rowBuffer; vr <= centerRow + rowBuffer; vr++) {
-        list.push({ virtualRow: vr, dataIndex: modIndex(vr, n) });
-      }
-      return list;
+    const span = Math.ceil(drumReachRows(itemHeight, containerHeight));
+    const centerRow = Math.round(scrollOffset / itemHeight);
+    const first = loopEnabled ? centerRow - span : Math.max(0, centerRow - span);
+    const last = loopEnabled ? centerRow + span : Math.min(n - 1, centerRow + span);
+    const list: { virtualRow: number; dataIndex: number }[] = [];
+    for (let vr = first; vr <= last; vr++) {
+      list.push({ virtualRow: vr, dataIndex: modIndex(vr, n) });
     }
-    const start = Math.max(0, Math.floor(scrollOffset / itemHeight) - paddingItems - 1);
-    const end = Math.min(
-      n - 1,
-      Math.ceil((scrollOffset + containerHeight) / itemHeight) + paddingItems + 1,
-    );
-    return Array.from({ length: end - start + 1 }, (_, i) => {
-      const virtualRow = start + i;
-      return { virtualRow, dataIndex: virtualRow };
-    });
-  }, [n, loopEnabled, scrollOffset, itemHeight, paddingItems, containerHeight]);
+    return list;
+  }, [n, loopEnabled, scrollOffset, itemHeight, 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);
@@ -859,7 +671,7 @@ export function Wheel<T = string | number>({
     >
       {/* iOS 14+ selection fill — LC-71 selected=fill, never hairline borders */}
       <SelectionIndicator
-        className={highlightSmoothClass}
+        className={highlightClassName}
         backgroundColor="$color4"
         top={paddingItems * itemHeight}
         height={itemHeight}
@@ -868,128 +680,74 @@ export function Wheel<T = string | number>({
       />
 
       {/* 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: `${perspectivePx}px`,
-            perspectiveOrigin: "center center",
-            overflow: "hidden",
-            userSelect: "none",
-            touchAction: "none",
-            cursor: disabled ? "not-allowed" : "grab",
-            ...wheelMaskStyle,
-          }}
-          onPointerDown={handlePointerDown as any}
-          onPointerMove={handlePointerMove as any}
-          onPointerUp={handlePointerUp as any}
-          onPointerCancel={handlePointerUp as any}
-          onKeyDown={handleKeyDown as any}
-          data-testid="wheel-wrapper"
-        >
-          {renderRows.map(({ virtualRow, dataIndex }) => {
-            const isSelected = dataIndex === liveDataIndex;
-            const transform = getItemTransform(
-              virtualRow,
-              scrollOffset,
-              itemHeight,
-              containerHeight,
-            );
-
-            if (Math.abs(transform.rotateX) > 85) return null;
-
-            return (
-              <div
-                key={`${dataIndex}-${virtualRow}`}
-                data-testid="wheel-item"
-                data-index={dataIndex}
-                data-selected={isSelected ? true : undefined}
-                aria-hidden={isSelected ? undefined : true}
-                style={{
-                  position: "absolute",
-                  left: 0,
-                  right: 0,
-                  height: itemHeight,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  transform: `translateY(${transform.translateY}px) rotateX(${transform.rotateX}deg) scale(${transform.scale})`,
-                  opacity: transform.opacity,
-                  pointerEvents: "none",
-                  transformOrigin: "center center",
-                  transformStyle: "preserve-3d",
-                  backfaceVisibility: "hidden",
-                }}
-              >
-                {renderItemNode(dataIndex, isSelected)}
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        <View
-          width="100%"
-          height={containerHeight}
-          position="relative"
-          overflow="hidden"
-          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 isSelected = dataIndex === liveDataIndex;
-            const transform = getItemTransform(
-              virtualRow,
-              scrollOffset,
-              itemHeight,
-              containerHeight,
-            );
-
-            if (Math.abs(transform.rotateX) > 85) return null;
-
-            return (
-              <View
-                key={`${dataIndex}-${virtualRow}`}
-                position="absolute"
-                left={0}
-                right={0}
-                height={itemHeight}
-                alignItems="center"
-                justifyContent="center"
-                opacity={transform.opacity}
-                pointerEvents="none"
-                y={transform.translateY}
-                scale={transform.scale}
-                rotateX={`${transform.rotateX}deg`}
-                data-testid="wheel-item"
-                data-index={dataIndex}
-                data-selected={isSelected ? true : undefined}
-              >
-                {renderItemNode(dataIndex, isSelected)}
-              </View>
-            );
-          })}
-          <WheelEdgeFade height={paddingItems * itemHeight} />
-        </View>
-      )}
+      <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: `${containerHeight * 4}px`,
+          perspectiveOrigin: "center center",
+          overflow: "hidden",
+          userSelect: "none",
+          touchAction: "none",
+          cursor: disabled ? "not-allowed" : "grab",
+          ...wheelMaskStyle,
+        }}
+        onPointerDown={handlePointerDown as any}
+        onPointerMove={handlePointerMove as any}
+        onPointerUp={handlePointerUp as any}
+        onPointerCancel={handlePointerUp as any}
+        onKeyDown={handleKeyDown as any}
+        data-testid="wheel-wrapper"
+      >
+        {renderRows.map(({ virtualRow, dataIndex }) => {
+          const isSelected = dataIndex === liveDataIndex;
+          const transform = getItemTransform(virtualRow, scrollOffset, itemHeight, containerHeight);
+
+          if (Math.abs(transform.rotateX) > 85) return null;
+
+          return (
+            <div
+              key={`${dataIndex}-${virtualRow}`}
+              data-testid="wheel-item"
+              data-index={dataIndex}
+              data-selected={isSelected ? true : undefined}
+              aria-hidden={isSelected ? undefined : true}
+              style={{
+                position: "absolute",
+                left: 0,
+                right: 0,
+                height: itemHeight,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transform: `translateY(${transform.translateY}px) rotateX(${transform.rotateX}deg) scale(${transform.scale})`,
+                opacity: transform.opacity,
+                pointerEvents: "none",
+                transformOrigin: "center center",
+                transformStyle: "preserve-3d",
+                backfaceVisibility: "hidden",
+              }}
+            >
+              {renderItemNode(dataIndex, isSelected)}
+            </div>
+          );
+        })}
+      </div>
     </WheelContainer>
   );
 }

package/src/Wheel/wheelShared.spec.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import { drumPose, drumReachRows } from "./wheelShared";
+
+describe("UIPickerView drum geometry", () => {
+  const itemHeight = 40;
+
+  for (const visibleItems of [3, 5, 7]) {
+    const frameHeight = itemHeight * visibleItems;
+
+    it(`never overlaps neighbouring rows (${visibleItems} visible)`, () => {
+      const reach = Math.floor(drumReachRows(itemHeight, frameHeight));
+      for (let d = -reach; d < reach; d++) {
+        const a = drumPose(d, itemHeight, frameHeight);
+        const b = drumPose(d + 1, itemHeight, frameHeight);
+        const halfA = (itemHeight * Math.cos((a.rotateX * Math.PI) / 180) * a.scale) / 2;
+        const halfB = (itemHeight * Math.cos((b.rotateX * Math.PI) / 180) * b.scale) / 2;
+        expect(b.offset - a.offset).toBeGreaterThanOrEqual(halfA + halfB - 1e-6);
+      }
+    });
+
+    it(`puts the frame edge at the drum's 80° line (${visibleItems} visible)`, () => {
+      const reach = drumReachRows(itemHeight, frameHeight);
+      for (let d = -reach; d <= reach; d += 0.25) {
+        const pose = drumPose(d, itemHeight, frameHeight);
+        if (Math.abs(pose.rotateX) > 80) continue;
+        expect(Math.abs(pose.offset)).toBeLessThanOrEqual(frameHeight / 2 + 1e-9);
+      }
+      expect(drumPose(reach + 0.01, itemHeight, frameHeight).opacity).toBe(0);
+    });
+  }
+
+  it("seats the centred row flat, full size and opaque", () => {
+    expect(drumPose(0, itemHeight, 200)).toEqual({ offset: 0, rotateX: -0, scale: 1, opacity: 1 });
+  });
+
+  it("bends, shrinks and fades rows away from the centre", () => {
+    const near = drumPose(1, itemHeight, 200);
+    const far = drumPose(3, itemHeight, 200);
+    expect(far.rotateX).toBeLessThan(near.rotateX);
+    expect(near.rotateX).toBeLessThan(0);
+    expect(far.scale).toBeLessThan(near.scale);
+    expect(far.opacity).toBeLessThan(near.opacity);
+    expect(near.opacity).toBeLessThan(1);
+  });
+
+  it("is symmetric above and below the band", () => {
+    const above = drumPose(-2, itemHeight, 200);
+    const below = drumPose(2, itemHeight, 200);
+    expect(above.offset).toBeCloseTo(-below.offset);
+    expect(above.rotateX).toBeCloseTo(-below.rotateX);
+    expect(above.opacity).toBeCloseTo(below.opacity);
+  });
+});