@multiplatform.one/forms 8.3.0 → 8.5.0

package/src/fields/Switch/Switch.spec.tsx

@@ -499,16 +499,20 @@ describe("Switch thumb and pointer paint", () => {
     expect(paint(track, "_bg-")).toBe("var(--switchTrackOff)");
   });
 
-  it.each([false, true])("grown=%s changes only the outlined ring on hover", (grown) => {
-    const { frame, track } = mount({ grown, outlined: true });
-    expect(track.className).toContain("_bg-transparent");
-    expect(paint(track, "_btc-")).toBe("var(--switchTrackOff)");
-    fireEvent.mouseEnter(frame);
-    expect(track.className).toContain("_bg-transparent");
-    expect(paint(track, "_btc-")).toBe("var(--switchTrackOffHover)");
-    fireEvent.mouseLeave(frame);
-    expect(paint(track, "_btc-")).toBe("var(--switchTrackOff)");
-  });
+  it.each([false, true])(
+    "grown=%s keeps the outlined ring on its 3:1 edge and washes the track on hover (LC-299)",
+    (grown) => {
+      const { frame, track } = mount({ grown, outlined: true });
+      expect(track.className).toContain("_bg-transparent");
+      expect(paint(track, "_btc-")).toBe("var(--switchTrackOffBorder)");
+      fireEvent.mouseEnter(frame);
+      expect(paint(track, "_bg-")).toBe("var(--switchTrackOffHover)");
+      expect(paint(track, "_btc-")).toBe("var(--switchTrackOffBorder)");
+      fireEvent.mouseLeave(frame);
+      expect(track.className).toContain("_bg-transparent");
+      expect(paint(track, "_btc-")).toBe("var(--switchTrackOffBorder)");
+    },
+  );
 
   it("composes the caller's mouse handlers once", () => {
     const onMouseEnter = vi.fn();

package/src/fields/Switch/index.tsx

@@ -198,7 +198,7 @@ const SwitchFrameStyled = styled(View, {
         borderRadius: 1000,
         backgroundColor: formSwitchColors.track.off,
         borderWidth: 0,
-        borderColor: formSwitchColors.track.off,
+        borderColor: formSwitchColors.track.offBorder,
         outlineWidth: 0,
         focusStyle: { outlineWidth: 0 },
         // LC-71: ring is painted from keyboard modality on the track, never
@@ -214,7 +214,7 @@ const SwitchFrameStyled = styled(View, {
       },
       false: {
         backgroundColor: formSwitchColors.track.off,
-        borderColor: formSwitchColors.track.off,
+        borderColor: formSwitchColors.track.offBorder,
       },
     },
 
@@ -406,6 +406,8 @@ function SwitchControl({
     : hovered
       ? formSwitchColors.track.offHover
       : formSwitchColors.track.off;
+  const offFill = outlined && !hovered && !pressed ? "transparent" : offPaint;
+  const offRing = outlined ? undefined : knobProps.trackRing;
   const { thumbInset, thumbSize, travel: dragDistance } = footprint;
   const motion = resolveSwitchMotion(transition);
   const [dragX, setDragX] = useState<number | null>(null);
@@ -562,8 +564,9 @@ function SwitchControl({
               borderColor: formSwitchColors.track.on,
             }
           : {
-              backgroundColor: outlined ? "transparent" : offPaint,
-              borderColor: offPaint,
+              backgroundColor: offFill,
+              borderColor: formSwitchColors.track.offBorder,
+              ...offRing,
             })}
       {...(kbFocus ? { "data-kb-focus": "true" } : undefined)}
       {...(frameClassName ? { className: frameClassName } : undefined)}
@@ -653,10 +656,11 @@ function SwitchControl({
           borderRadius={cellTrack.borderRadius}
           {...radiusResolution}
           borderWidth={cellTrack.borderWidth}
-          borderColor={displayChecked ? formSwitchColors.track.on : offPaint}
-          backgroundColor={
-            displayChecked ? formSwitchColors.track.on : outlined ? "transparent" : offPaint
+          borderColor={
+            displayChecked ? formSwitchColors.track.on : formSwitchColors.track.offBorder
           }
+          backgroundColor={displayChecked ? formSwitchColors.track.on : offFill}
+          {...(displayChecked ? undefined : offRing)}
           {...transitionProps({ ...knobProps.motion.control, transition: motion }, ["borderWidth"])}
           pointerEvents="none"
           className={kbFocus ? SWITCH_KB_RING_CLASS : undefined}

package/src/fields/TimePicker/parts.tsx

@@ -160,11 +160,6 @@ export function TimePickerInputTrigger({
         onPress={isWeb && interactive ? onOpen : undefined}
         {...(disabled ? { opacity: 0.5, pointerEvents: "none" as const } : undefined)}
       >
-        <InputParts.Section data-testid="time-picker-glyph">
-          <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
-            {clockIcon ?? <ClockIcon />}
-          </InputParts.Icon>
-        </InputParts.Section>
         <InputParts.Section>
           <InputParts.Area
             readOnly
@@ -174,7 +169,6 @@ export function TimePickerInputTrigger({
             placeholder={placeholder}
             disabled={disabled}
             color={formCommonColors.text}
-            placeholderTextColor={formCommonColors.muted}
             aria-label={ariaLabel}
             aria-required={ariaRequired}
             aria-invalid={ariaInvalid}
@@ -196,11 +190,17 @@ export function TimePickerInputTrigger({
             }
           />
         </InputParts.Section>
-        {value && isWeb && !readOnly ? (
+        {value && isWeb && !readOnly && !disabled ? (
           <InputParts.Section>
             <TimePickerClearButton onClear={onClear} disabled={disabled} />
           </InputParts.Section>
-        ) : null}
+        ) : (
+          <InputParts.Section data-testid="time-picker-glyph">
+            <InputParts.Icon adornment="trailing" color={formCommonColors.muted}>
+              {clockIcon ?? <ClockIcon />}
+            </InputParts.Icon>
+          </InputParts.Section>
+        )}
       </InputParts.Box>
     </View>
   );

package/src/fields/ToggleGroup/index.tsx

@@ -25,7 +25,12 @@ import {
 } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formButtonColors, formCommonColors, formInputColors } from "../../shared/colorRamps";
+import {
+  formButtonColors,
+  formCommonColors,
+  formControlColors,
+  formInputColors,
+} from "../../shared/colorRamps";
 import { warnBareDisabled } from "../../shared/devWarn";
 import { choiceItemA11y, composeA11yName } from "../../shared/nativeA11y";
 import { loadSystemSegmentedControl } from "../../shared/systemControlModules";
@@ -693,6 +698,7 @@ export function ToggleGroup({
           {...toggleProps}
           {...knobProps.borderRadius}
           {...knobProps.inputSurface}
+          borderColor={formControlColors.edge}
           overflow="hidden"
           backgroundColor={knobProps.outlined ? "transparent" : formInputColors.background.base}
           {...(isWeb

package/src/fields/fieldTriggerSlot.spec.tsx

@@ -0,0 +1,89 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import { createRef } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "../Button";
+import { FileUpload } from "./FileUpload";
+import { ImageField } from "./ImageField";
+import type { FieldPickerHandle } from "./pickerHandle";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function fileInput(container: HTMLElement) {
+  return container.querySelector("input[type='file']") as HTMLInputElement;
+}
+
+function pick(input: HTMLInputElement, file: File) {
+  fireEvent.change(input, { target: { files: [file] } });
+}
+
+describe("LC-290 FIELD-TRIGGER-SLOT", () => {
+  it("FileUpload opens its picker from an imperative open()", () => {
+    const click = vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+    const handle = createRef<FieldPickerHandle>();
+    renderWithProviders(<FileUpload ref={handle} />);
+    act(() => handle.current?.open());
+    expect(click).toHaveBeenCalledTimes(1);
+  });
+
+  it("FileUpload draws a consumer trigger instead of its dropzone, and a pick from it reaches onChange", () => {
+    const click = vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+    const onChange = vi.fn();
+    const { container, getByRole } = renderWithProviders(
+      <FileUpload
+        onChange={onChange}
+        trigger={(open) => (
+          <Button onPress={open} aria-label="Choose from library">
+            Library
+          </Button>
+        )}
+      />,
+    );
+    expect(container.querySelector("[data-file-upload='trigger']")).toBeTruthy();
+    expect(container.textContent).not.toContain("Choose File");
+    fireEvent.click(getByRole("button", { name: "Choose from library" }));
+    expect(click).toHaveBeenCalledTimes(1);
+    pick(fileInput(container), new File(["x"], "receipt.pdf", { type: "application/pdf" }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("FileUpload's open() does nothing while disabled", () => {
+    const click = vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+    const handle = createRef<FieldPickerHandle>();
+    renderWithProviders(<FileUpload ref={handle} disabled />);
+    act(() => handle.current?.open());
+    expect(click).not.toHaveBeenCalled();
+  });
+
+  it("ImageField opens its picker from an imperative open()", () => {
+    const click = vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+    const handle = createRef<FieldPickerHandle>();
+    renderWithProviders(<ImageField ref={handle} label="Avatar" />);
+    act(() => handle.current?.open());
+    expect(click).toHaveBeenCalledTimes(1);
+  });
+
+  it("ImageField draws a consumer trigger instead of its frame, and a pick from it reaches onChange", () => {
+    const click = vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+    const onChange = vi.fn();
+    const { container, getByRole } = renderWithProviders(
+      <ImageField
+        label="Receipt"
+        onChange={onChange}
+        trigger={(open) => (
+          <Button onPress={open} aria-label="Photo library">
+            Library
+          </Button>
+        )}
+      />,
+    );
+    expect(container.querySelector("[data-media-tile]")).toBeNull();
+    fireEvent.click(getByRole("button", { name: "Photo library" }));
+    expect(click).toHaveBeenCalledTimes(1);
+    pick(fileInput(container), new File(["x"], "receipt.png", { type: "image/png" }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+});

package/src/fields/pickerHandle.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+/**
+ * LC-290 FIELD-TRIGGER-SLOT: a picking field (FileUpload, ImageField) opens
+ * from the app's own control. `ref` takes this handle; `open()` runs the same
+ * press the field's own surface runs, through the same validation.
+ */
+export interface FieldPickerHandle {
+  open: () => void;
+}
+
+/** Draws the app's own control in place of the field's surface; call `open` from its press. */
+export type FieldPickerTrigger = (open: () => void) => ReactNode;

package/src/hooks/useHoldCue.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/** LC-197 HOLD-CUE: how far into a hold the press cue starts. */
+export const holdCueStartMs = 150;
+
+/** LC-197: how far a held control shrinks while its long press builds. */
+export const holdCueScale = 0.97;
+
+export function useHoldCue(cueStartMs: number = holdCueStartMs) {
+  const [holding, setHolding] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const clear = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  const stop = useCallback(() => {
+    clear();
+    setHolding(false);
+  }, []);
+  const start = useCallback(() => {
+    clear();
+    timer.current = setTimeout(() => setHolding(true), cueStartMs);
+  }, [cueStartMs]);
+  useEffect(() => clear, []);
+  return { holding, start, stop };
+}

package/src/index.gnome.ts

@@ -48,6 +48,24 @@ export {
   useOverlaySizeClass,
 } from "./shared/overlaySizeClass";
 export type { OverlaySizeClass } from "./shared/overlaySizeClass";
+export {
+  fillSnapPoint,
+  largeDetentRatio,
+  mediumDetent,
+  minSheetHeight,
+  openingDetentIndex,
+  resolveDetentPercents,
+  resolveSheetDetents,
+  resolveWebSnap,
+  sheetDetent,
+  sheetDismissThreshold,
+} from "./shared/sheetDetents";
+export type {
+  DetentSetOptions,
+  ResolveSheetDetentsOptions,
+  ResolveWebSnapOptions,
+  WebSnap,
+} from "./shared/sheetDetents";
 export { pressSlopOutsetProps, pressSlopProps } from "./shared/pressSlopProps";
 export { Skeleton, SkeletonCircle, SkeletonGroup, SkeletonText } from "./Skeleton";
 export type {
@@ -101,6 +119,7 @@ export {
 } from "./shared/utils";
 export { TableCellContext, useIsInTableCell, useTableCellContext } from "./shared/tableCellContext";
 export { useControlGrouped } from "./shared/groupContext";
+export { holdCueScale, holdCueStartMs, useHoldCue } from "./hooks/useHoldCue";
 export { formFieldGap, formReadableMaxWidth, formSectionGap } from "./formSpacing";
 export type {
   AnyFormApi,

package/src/index.ts

@@ -264,6 +264,7 @@ export type { PhotonGeocoderOptions } from "./fields/Geolocation/photonGeocoder"
 
 export { ImageField } from "./fields/ImageField";
 export type { ImageFieldProps } from "./fields/ImageField";
+export type { FieldPickerHandle, FieldPickerTrigger } from "./fields/pickerHandle";
 
 export {
   Icon,
@@ -386,6 +387,7 @@ export {
   focusFieldTarget,
 } from "./hooks/useFocusManagement";
 export type { FocusManagementOptions, FocusManagementReturn } from "./hooks/useFocusManagement";
+export { holdCueScale, holdCueStartMs, useHoldCue } from "./hooks/useHoldCue";
 
 // ── Shared Utilities ──────────────────────────────────────────
 export {
@@ -461,6 +463,24 @@ export {
   useOverlaySizeClass,
 } from "./shared/overlaySizeClass";
 export type { OverlaySizeClass } from "./shared/overlaySizeClass";
+export {
+  fillSnapPoint,
+  largeDetentRatio,
+  mediumDetent,
+  minSheetHeight,
+  openingDetentIndex,
+  resolveDetentPercents,
+  resolveSheetDetents,
+  resolveWebSnap,
+  sheetDetent,
+  sheetDismissThreshold,
+} from "./shared/sheetDetents";
+export type {
+  DetentSetOptions,
+  ResolveSheetDetentsOptions,
+  ResolveWebSnapOptions,
+  WebSnap,
+} from "./shared/sheetDetents";
 
 // ── TanStack Form re-exports ─────────────────────────────────
 export {

package/src/overlayGround.spec.ts

@@ -10,6 +10,7 @@
 import * as themePackage from "@multiplatform.one/theme";
 import {
   controlTierPaint,
+  controlTrackFill,
   createDefaultThemeConfig,
   holdInkFloor,
   measureContrast,
@@ -21,7 +22,7 @@ import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { describe, expect, it } from "vitest";
-import { formControlColors, formSelectedColors, formSwitchColors } from "./shared/colorRamps";
+import { formSelectedColors, formSwitchColors } from "./shared/colorRamps";
 
 /** The card's floor: the console's "a plain Button on an overlay's ground" asks the same. */
 const plateFloor = 1.1;
@@ -141,7 +142,8 @@ describe("FZ-7944: a control on an overlay has a plate distinct from the overlay
 
     it("Slider and Progress tracks read on the ground", () => {
       for (const component of ["Slider", "Progress"]) {
-        const track = resolve(c.scope, formControlColors.background, component);
+        // On an overlay the track takes the elevated fill (FZ-8400).
+        const track = resolve(c.scope, controlTrackFill(true, true), component);
         expect(
           ratio(track, ground),
           `${component} track ${track} on ${ground}`,
@@ -170,7 +172,7 @@ describe("FZ-7944: a control on an overlay has a plate distinct from the overlay
     const knobs = themePackage.defaultPreset.knobs;
     const ground = (scheme: "light" | "dark") =>
       resolveKnobs(knobs, undefined, scheme).knobProps.elevatedSurface.backgroundColor;
-    expect(ground("dark")).toBe("$color4");
+    expect(ground("dark")).toBe("$color5");
     expect(ground("light")).toBe("$background");
     expect(controlTierPaint("tinted", false, true)).toEqual(controlTierPaint("tinted", false));
   });

package/src/shared/OverlayWindow.tsx

@@ -3,8 +3,8 @@ import { OverlayStackProvider } from "./overlayStack";
 
 export interface OverlayWindowProps {
   /** The z the window's own overlay binds; nested overlays stack above it. */
-  zIndex: number;
-  children?: ReactNode;
+  readonly zIndex: number;
+  readonly children?: ReactNode;
 }
 
 /**

package/src/shared/colorRamps.ts

@@ -30,9 +30,9 @@ export const formInputColors = {
     focus: "$color4",
   },
   border: {
-    base: "$borderColor",
-    hover: "$borderColorHover",
-    focus: "$borderColorFocus",
+    base: "$borderColorField",
+    hover: "$borderColorFieldHover",
+    focus: "$borderColorField",
   },
 } as const;
 
@@ -41,6 +41,7 @@ export const formControlColors = {
   border: "$borderColor",
   /** DF-06 / WCAG 1.4.11: the build holds ≥3:1 on page, surface1 and control well. */
   boundary: "$boundaryColor",
+  edge: "$borderColorControl",
   thumb: {
     base: "$color10",
     hover: "$color9",
@@ -49,10 +50,11 @@ export const formControlColors = {
 } as const;
 
 // LC-05: the neutral selection tier, shared with componentColors.selection.
+// Theme keys, so a row on a dark card steps off the card's fill (FZ-8400).
 export const formSelectionColors = {
-  background: "$color4",
-  hover: "$color5",
-  press: "$color5",
+  background: "$selectFill",
+  hover: "$selectPress",
+  press: "$selectPress",
   ink: "$color12",
   ring: "$color8",
 } as const;
@@ -81,6 +83,7 @@ export const formSwitchColors = {
     off: "$switchTrackOff",
     offHover: "$switchTrackOffHover",
     offPress: "$switchTrackOffPress",
+    offBorder: "$switchTrackOffBorder",
   },
   thumb: "$switchThumb",
 } as const;

package/src/shared/controlTrack.ts

@@ -0,0 +1,7 @@
+import { controlTrackFill, isDarkThemeName, useElevatedSurface } from "@multiplatform.one/theme";
+import { useThemeName } from "tamagui";
+
+/** The track fill for this control's ground: a step above an elevated dark overlay. */
+export function useControlTrackFill(): string {
+  return controlTrackFill(isDarkThemeName(useThemeName()), useElevatedSurface());
+}

package/src/shared/nativeOverlayWindow.tsx

@@ -16,7 +16,7 @@ export type { OverlayWindowProps } from "./OverlayWindow";
  * content, and those overlays open inside it. A PortalItem in here aimed at
  * any other app-level host finds no host, since this provider owns none.
  */
-export function OverlayWindow({ zIndex, children }: OverlayWindowProps) {
+export function OverlayWindow({ zIndex, children }: Readonly<OverlayWindowProps>) {
   return (
     <PortalProvider shouldAddRootHost={false}>
       <OverlayStackProvider zIndex={zIndex}>{children}</OverlayStackProvider>

package/src/shared/sheetDetents.spec.ts

@@ -0,0 +1,117 @@
+import { describe, expect, it } from "vitest";
+import {
+  mediumDetent,
+  minSheetHeight,
+  openingDetentIndex,
+  resolveDetentPercents,
+  resolveSheetDetents,
+  resolveWebSnap,
+  sheetDetent,
+  sheetDismissThreshold,
+} from "./sheetDetents";
+
+describe("FZ-455 a sheet takes a set of detents, not one snap point", () => {
+  it("resolves a caller's declared set, largest first, whatever order it was written in", () => {
+    expect(resolveDetentPercents({ detents: [40, 100, 70] })).toEqual([100, 70, 40]);
+  });
+
+  it("clamps a declared detent to full height and drops a non-positive one", () => {
+    expect(resolveDetentPercents({ detents: [140, 55, 0, -10, Number.NaN] })).toEqual([100, 55]);
+  });
+
+  it("lets a declared set own the sheet, so snapPoint does not add to it", () => {
+    expect(resolveDetentPercents({ detents: [100, 45], snapPoint: 85 })).toEqual([100, 45]);
+  });
+
+  it("keeps full height in the set a bare snapPoint implies, so a lowered sheet drags back up", () => {
+    expect(resolveDetentPercents({ snapPoint: 85 })).toEqual([100, 85]);
+  });
+
+  it("puts the half-open rest in a scrollable sheet's set on both twins", () => {
+    expect(resolveDetentPercents({ scrollable: true })).toEqual([
+      sheetDetent.large,
+      sheetDetent.medium,
+    ]);
+    expect(resolveDetentPercents({ scrollable: true, snapPoint: 85 })).toEqual([100, 85, 55]);
+  });
+
+  it("names the HIG detents and keeps the native fraction in step with the percent", () => {
+    expect(sheetDetent).toEqual({ medium: 55, large: 100 });
+    expect(mediumDetent).toBe(0.55);
+  });
+});
+
+describe("FZ-455 the opening detent", () => {
+  it("opens at the detent snapPoint names", () => {
+    expect(openingDetentIndex([100, 85], 85)).toBe(1);
+    expect(openingDetentIndex([100, 70, 40], 40)).toBe(2);
+  });
+
+  it("opens at the largest detent with no snapPoint, or one outside the set", () => {
+    expect(openingDetentIndex([100, 55])).toBe(0);
+    expect(openingDetentIndex([100, 55], 33)).toBe(0);
+  });
+});
+
+describe("FZ-455 the web sheet drags between detents", () => {
+  it("hands the whole set to the Sheet, not the single percent it used to get", () => {
+    const snap = resolveWebSnap({ snapPoint: 85 });
+    expect(snap).toEqual({ snapPointsMode: "percent", snapPoints: [100, 85], defaultPosition: 1 });
+  });
+
+  it("opens at the same percent it opened at before, so no sheet moves on load", () => {
+    for (const snapPoint of [70, 85, 92, 94, 100]) {
+      const snap = resolveWebSnap({ snapPoint });
+      if (snap.snapPointsMode !== "percent") throw new Error("expected percent mode");
+      expect(snap.snapPoints[snap.defaultPosition]).toBe(snapPoint);
+    }
+  });
+
+  it("carries a declared set through, opening at the detent snapPoint names", () => {
+    expect(resolveWebSnap({ detents: [100, 60], snapPoint: 60 })).toEqual({
+      snapPointsMode: "percent",
+      snapPoints: [100, 60],
+      defaultPosition: 1,
+    });
+  });
+
+  it("keeps FZ-7977's content height when nothing declares a detent", () => {
+    expect(resolveWebSnap({})).toEqual({ snapPointsMode: "fit" });
+    expect(resolveWebSnap({ scrollable: true })).toEqual({ snapPointsMode: "fit" });
+  });
+
+  it("keeps a fill sheet's percent rest and makes it draggable", () => {
+    const snap = resolveWebSnap({ fill: true });
+    expect(snap).toEqual({ snapPointsMode: "percent", snapPoints: [100, 60], defaultPosition: 1 });
+  });
+
+  it("gives every percent-mode sheet something to drag between", () => {
+    for (const options of [{ snapPoint: 85 }, { fill: true }, { detents: [80, 40] }]) {
+      const snap = resolveWebSnap(options);
+      if (snap.snapPointsMode !== "percent") throw new Error("expected percent mode");
+      expect(snap.snapPoints.length).toBeGreaterThan(1);
+    }
+  });
+});
+
+describe("FZ-455 native detent heights", () => {
+  it("resolves a declared set into heights, largest first", () => {
+    expect(resolveSheetDetents({ travel: 800, detents: [100, 50] })).toEqual([800, 400]);
+  });
+
+  it("matches the heights the shipped native sheet already rests at", () => {
+    expect(resolveSheetDetents({ travel: 700, snapPoint: 85 })).toEqual([700, 595]);
+    expect(resolveSheetDetents({ travel: 700 })).toEqual([700]);
+    expect(resolveSheetDetents({ travel: 600, scrollable: true })).toEqual([600, 330]);
+  });
+
+  it("drops a detent shorter than the floor, and keeps a short sheet's own height", () => {
+    expect(resolveSheetDetents({ travel: 800, detents: [100, 10] })).toEqual([800]);
+    expect(resolveSheetDetents({ travel: 120, detents: [100] })).toEqual([120]);
+    expect(minSheetHeight).toBe(180);
+  });
+
+  it("keeps the dismiss threshold with the geometry it belongs to", () => {
+    expect(sheetDismissThreshold).toBe(56);
+  });
+});