@multiplatform.one/forms 7.71.0 → 7.73.0

package/src/FloatingPanel/pointAnchor.ts

@@ -136,6 +136,10 @@ export interface TriggerPlacement {
   maxHeight: number;
   /** The menu moved off the trigger's top start corner to stay on screen. */
   shifted: boolean;
+  /** An `"auto"` menu took the trigger's top trailing corner instead. */
+  end: boolean;
+  /** A pinned menu opened upward: its bottom edge is the trigger's. */
+  up: boolean;
 }
 
 /**
@@ -151,17 +155,56 @@ export function placeOverTrigger({
   height,
   bounds,
   rtl = false,
+  align = "start",
+  pinned = false,
 }: {
   trigger: TriggerRect;
   width: number;
   height: number;
   bounds: PanelBounds;
   rtl?: boolean;
+  /**
+   * `"auto"` (a menu with no echo row) opens from the trailing top corner when
+   * the leading one would run off the end edge and the trailing one fits.
+   */
+  align?: "start" | "auto";
+  /**
+   * The menu echoes its icon trigger in the button's own spot (LC-112,
+   * FZ-8480), so it never slides off the button vertically: it opens down
+   * from the button's top edge, or up from its bottom edge where there is
+   * more room above, and scrolls what still does not fit.
+   */
+  pinned?: boolean;
 }): TriggerPlacement {
   const room = Math.max(0, bounds.right - bounds.left);
   const w = Math.min(Math.max(width, trigger.width), room);
-  const wantLeft = rtl ? trigger.x + trigger.width - w : trigger.x;
-  const left = Math.max(bounds.left, Math.min(wantLeft, bounds.right - w));
+  const startLeft = rtl ? trigger.x + trigger.width - w : trigger.x;
+  const endLeft = rtl ? trigger.x : trigger.x + trigger.width - w;
+  // Only the free edge has to clear the padded bounds: the aligned edge is
+  // the trigger's own, so a bar button inside the margin keeps its corner.
+  const startFree = rtl ? startLeft >= bounds.left : startLeft + w <= bounds.right;
+  const endFree = rtl ? endLeft + w <= bounds.right : endLeft >= bounds.left;
+  const auto = align === "auto";
+  const end = auto && !startFree && endFree;
+  const wantLeft = end ? endLeft : startLeft;
+  const keep = auto && (end || startFree);
+  const left = keep ? wantLeft : Math.max(bounds.left, Math.min(wantLeft, bounds.right - w));
+  if (pinned) {
+    const triggerBottom = trigger.y + trigger.height;
+    const below = Math.max(0, bounds.bottom - trigger.y);
+    const above = Math.max(0, triggerBottom - bounds.top);
+    const up = height > below && above > below;
+    const top = up ? Math.max(bounds.top, triggerBottom - height) : trigger.y;
+    return {
+      left,
+      top,
+      width: w,
+      maxHeight: up ? above : below,
+      shifted: left !== wantLeft,
+      end,
+      up,
+    };
+  }
   const h = Math.min(height, Math.max(0, bounds.bottom - bounds.top));
   const top = Math.max(bounds.top, Math.min(trigger.y, bounds.bottom - h));
   return {
@@ -170,6 +213,8 @@ export function placeOverTrigger({
     width: w,
     maxHeight: Math.max(0, bounds.bottom - top),
     shifted: left !== wantLeft || top !== trigger.y,
+    end,
+    up: false,
   };
 }
 
@@ -200,5 +245,13 @@ export function placeBesideTrigger({
   const opensUp = height > below && above > below;
   const maxHeight = Math.min(height, opensUp ? above : below);
   const top = opensUp ? trigger.y - maxHeight : trigger.y + trigger.height;
-  return { left, top, width: w, maxHeight, shifted: left !== wantLeft || opensUp };
+  return {
+    left,
+    top,
+    width: w,
+    maxHeight,
+    shifted: left !== wantLeft || opensUp,
+    end: false,
+    up: opensUp,
+  };
 }

package/src/FloatingPanel/useFloatingPanel.spec.tsx

@@ -22,11 +22,13 @@ import { FloatingPanel } from "./index";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset, type Knobs } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it } from "vitest";
+import { type PanelWidth } from "./panelWidth";
 import {
   type PanelWidthMode,
   measureDrawnRadius,
   panelAnchorOffset,
   panelCoverOffset,
+  panelViewportPadding,
   resolvePanelWidthMode,
   useFloatingPanel,
 } from "./useFloatingPanel";
@@ -35,10 +37,14 @@ function Harness({
   open,
   fitContent,
   widthMode,
+  panelWidth,
+  echo,
 }: {
   open: boolean;
   fitContent?: boolean;
   widthMode?: PanelWidthMode;
+  panelWidth?: PanelWidth;
+  echo?: boolean;
 }) {
   const panel = useFloatingPanel({
     open,
@@ -46,6 +52,8 @@ function Harness({
     useAutoUpdate: false,
     fitContent,
     widthMode,
+    panelWidth,
+    echo,
   });
   return (
     <>
@@ -76,7 +84,12 @@ function mockRect(el: HTMLElement, rect: { x: number; y: number; width: number;
 /** Open the panel against a trigger of a known geometry and hand back the
  *  floating element once floating-ui has positioned it. */
 async function openAgainstTrigger(
-  props: { fitContent?: boolean; widthMode?: PanelWidthMode },
+  props: {
+    fitContent?: boolean;
+    widthMode?: PanelWidthMode;
+    panelWidth?: PanelWidth;
+    echo?: boolean;
+  },
   triggerRect: { x: number; y: number; width: number; height: number },
 ) {
   const result = renderWithProviders(<Harness open={false} {...props} />);
@@ -173,6 +186,90 @@ describe("FloatingPanel and DropdownMenu open over their trigger (MPO-38 cover r
   });
 });
 
+describe("FloatingPanel panelWidth setting (LC-112, FZ-8438 r3)", () => {
+  const room = () =>
+    (document.documentElement.clientWidth || window.innerWidth) - 2 * panelViewportPadding;
+
+  it('"content" hugs its rows but never drops below an echoed trigger', async () => {
+    const result = await openAgainstTrigger({ panelWidth: "content" }, trigger);
+    await waitFor(() => {
+      const el = result.getByTestId("anchor-floating");
+      expect(el.style.minWidth).toBe("240px");
+      expect(el.style.width).toBe("");
+      expect(el.style.maxWidth).toBe(`${room()}px`);
+    });
+  });
+
+  it('"content" without an echo (an icon trigger) has no trigger floor', async () => {
+    const result = await openAgainstTrigger({ panelWidth: "content", echo: false }, trigger);
+    await waitFor(() => {
+      const el = result.getByTestId("anchor-floating");
+      expect(el.style.minWidth).toBe("0px");
+      expect(el.style.width).toBe("");
+    });
+  });
+
+  it('"trigger" is exactly the trigger\'s width', async () => {
+    const result = await openAgainstTrigger({ panelWidth: "trigger" }, trigger);
+    await waitFor(() => {
+      const el = result.getByTestId("anchor-floating");
+      expect([el.style.minWidth, el.style.width, el.style.maxWidth]).toEqual([
+        "240px",
+        "240px",
+        "240px",
+      ]);
+    });
+  });
+
+  it('"screen" from a trigger in the page gutter spans the gutters, both sides', async () => {
+    // The trigger sits 16 in: the panel takes that inset at each end, so its
+    // start edge is the trigger's and its rows line up under the echo.
+    const result = await openAgainstTrigger({ panelWidth: "screen" }, trigger);
+    const gutters = (document.documentElement.clientWidth || window.innerWidth) - 2 * trigger.x;
+    await waitFor(() => {
+      const el = result.getByTestId("anchor-floating");
+      expect(el.style.width).toBe(`${gutters}px`);
+      expect(el.style.maxWidth).toBe(`${gutters}px`);
+    });
+  });
+
+  it('"screen" from a trigger deep in the page is the room between the safe margins', async () => {
+    const result = await openAgainstTrigger({ panelWidth: "screen" }, { ...trigger, x: 400 });
+    await waitFor(() => {
+      const el = result.getByTestId("anchor-floating");
+      expect(el.style.width).toBe(`${room()}px`);
+      expect(el.style.maxWidth).toBe(`${room()}px`);
+    });
+  });
+
+  it("a number is a fixed width, wider or narrower than the trigger", async () => {
+    const wide = await openAgainstTrigger({ panelWidth: 320 }, trigger);
+    await waitFor(() => {
+      expect(wide.getByTestId("anchor-floating").style.width).toBe("320px");
+    });
+    wide.unmount();
+    const narrow = await openAgainstTrigger({ panelWidth: 180 }, trigger);
+    await waitFor(() => {
+      const el = narrow.getByTestId("anchor-floating");
+      expect([el.style.minWidth, el.style.width, el.style.maxWidth]).toEqual([
+        "180px",
+        "180px",
+        "180px",
+      ]);
+    });
+  });
+
+  it("wins over widthMode when both are set", async () => {
+    const result = await openAgainstTrigger(
+      { widthMode: "fit-content", panelWidth: "trigger" },
+      trigger,
+    );
+    await waitFor(() => {
+      expect(result.getByTestId("anchor-floating").style.width).toBe("240px");
+    });
+  });
+});
+
 describe("FloatingPanel width modes (MPO-38)", () => {
   it("resolves the deprecated boolean onto the three modes", () => {
     expect(resolvePanelWidthMode(undefined, undefined)).toBe("at-least-trigger");
@@ -441,14 +538,15 @@ describe("FloatingPanel drawn radius (MPO-129)", () => {
 /**
  * CONTAINER-CAP (MPO-56). Part 2b files floating panels under DG-RAD-04: the
  * class value on the panel's own padding is the ceiling, and the trigger's
- * drawn arc (above) only ever lowers it.
+ * drawn arc (above) lowers it. A covering panel takes the arc whole (FZ-8438).
  */
-function RadiusHarness({ open }: { open: boolean }) {
-  const panel = useFloatingPanel({ open, onOpenChange: () => {}, useAutoUpdate: false });
+function RadiusHarness({ open, cover = false }: { open: boolean; cover?: boolean }) {
+  const panel = useFloatingPanel({ open, onOpenChange: () => {}, useAutoUpdate: false, cover });
   return (
     <div
       data-testid="radius-trigger"
       data-radius={String(panel.dropdownRadius)}
+      data-inset={String(panel.coverCornerInset)}
       ref={panel.setReferenceRef}
     />
   );
@@ -513,4 +611,26 @@ describe("FloatingPanel radius is CONTAINER-CAP on its padding (DG-RAD-04, MPO-5
     );
     await waitFor(() => expect(anchor.getAttribute("data-radius")).toBe("18"));
   });
+
+  it("a covering panel takes the trigger's drawn arc exactly, past the cap (LC-112, FZ-8438)", async () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <RadiusHarness open={false} cover />
+      </Preset>,
+    );
+    const anchor = result.getByTestId("radius-trigger");
+    Object.assign(anchor.style, {
+      borderTopLeftRadius: "50px",
+      backgroundColor: "rgb(255, 255, 255)",
+    });
+    mockRect(anchor, { x: 0, y: 0, width: 240, height: 44 });
+    result.rerender(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <RadiusHarness open cover />
+      </Preset>,
+    );
+    await waitFor(() => expect(anchor.getAttribute("data-radius")).toBe("22"));
+    // Past the cap, the bottom insets by the arc's sagitta at 45° so rows clear it.
+    expect(anchor.getAttribute("data-inset")).toBe(String(Math.ceil(22 * (1 - Math.SQRT1_2))));
+  });
 });

package/src/FloatingPanel/useFloatingPanel.ts

@@ -22,6 +22,8 @@ import {
 import { getTokenValue, type TransitionProp } from "tamagui";
 import { clampDropdownRadius, scrollArrowThreshold } from "../shared/floatingList";
 import { containsAcrossPanels } from "../shared/panelPortal";
+import { groupSurfaceOf } from "./paintedBox";
+import { type PanelWidth, panelWidthBox, screenBounds } from "./panelWidth";
 
 // React Native defines a `window` global without DOM event methods, so a bare
 // `typeof window` check is not enough — the floating cores mount this hook on
@@ -43,6 +45,24 @@ function roundToDevicePixel(value: number): number {
 export const panelAnimationDuration = motionDurationMs(motionFor("quick").overlay.transition);
 export const panelGrowDuration = panelAnimationDuration;
 export const panelViewportPadding = 10;
+
+/** The room a `"screen"` panel spans for this trigger (see `screenBounds`). */
+function screenRoom(
+  reference: { getBoundingClientRect(): { left: number; right: number } },
+  viewportWidth: number,
+) {
+  const box = reference.getBoundingClientRect();
+  return screenBounds({
+    triggerLeft: box.left,
+    triggerRight: box.right,
+    boundsLeft: panelViewportPadding,
+    boundsRight: viewportWidth - panelViewportPadding,
+    rtl:
+      typeof Element !== "undefined" &&
+      reference instanceof Element &&
+      getComputedStyle(reference).direction === "rtl",
+  });
+}
 /** Gap between trigger and panel: ZERO for the FloatingPanel family (one
  * source, Axiom 5); `OVERLAY_ANCHOR_GAP` still governs FREE overlays. */
 export const panelAnchorOffset = OVERLAY_ATTACH_GAP;
@@ -127,6 +147,14 @@ export interface UseFloatingPanelOptions {
    */
   freeOverlay?: boolean;
   cover?: boolean;
+  /**
+   * How wide the panel opens (LC-112, FZ-8438 r3): `"content"`, `"trigger"`,
+   * `"screen"` or a fixed width. Wins over `widthMode` when set; unset keeps
+   * `widthMode`'s behaviour, so no consumer changes until it asks.
+   */
+  panelWidth?: PanelWidth;
+  /** The panel's first row echoes the trigger. Default: a covering panel. */
+  echo?: boolean;
 }
 
 /** One place that resolves the deprecated boolean onto the three modes, so
@@ -168,9 +196,15 @@ export interface UseFloatingPanelReturn {
   /**
    * Panel corner radius: CONTAINER-CAP on the panel's own padding (DG-RAD-04),
    * lowered to the trigger's measured drawn radius once open when that arc
-   * is smaller, so the panel never rounds past the control it hangs from.
+   * is smaller. A covering panel (LC-112 seamless cover) takes the trigger's
+   * arc whole, past the cap.
    */
   dropdownRadius: string | number;
+  /**
+   * Bottom inset a covering panel adds when its arc runs past the cap, so the
+   * last row's highlight and the scroll arrow clear the rounded corners.
+   */
+  coverCornerInset: number;
   hasBorder: boolean;
   panelTransition: string;
   knobProps: ReturnType<typeof useResolvedKnobs>["knobProps"];
@@ -202,7 +236,7 @@ function paintsACorner(el: HTMLElement): boolean {
  * top-left corner and actually paints one. Nothing painted → null, so the
  * caller falls back to the clamped token rather than to zero.
  */
-function paintedCornerBox(root: HTMLElement): HTMLElement | null {
+export function paintedCornerBox(root: HTMLElement): HTMLElement | null {
   if (paintsACorner(root)) return root;
   const rootRect = root.getBoundingClientRect();
   for (const el of Array.from(root.querySelectorAll<HTMLElement>("*"))) {
@@ -250,6 +284,8 @@ export function useFloatingPanel({
   fitContent,
   freeOverlay = false,
   cover = true,
+  panelWidth,
+  echo = cover && !freeOverlay,
 }: UseFloatingPanelOptions): UseFloatingPanelReturn {
   const widthMode = resolvePanelWidthMode(widthModeProp, fitContent);
   // An overlay floats over the page: it never inherits a painted ancestor.
@@ -268,10 +304,18 @@ export function useFloatingPanel({
     radiusStop && typeof panelPadPx === "number"
       ? resolveRadiusClass("CONTAINER-CAP", radiusStop, { paddingPx: panelPadPx })
       : undefined;
-  const dropdownRadius =
+  const capped =
     radiusCap === undefined
       ? (measuredRadius ?? clampDropdownRadius(knobProps.borderRadius.borderRadius))
       : Math.min(measuredRadius ?? radiusCap, radiusCap);
+  // LC-112 seamless cover (FZ-8438): a panel laid over its trigger IS the
+  // trigger grown open, so all four corners take the trigger's drawn arc.
+  // The container cap only governs panels that sit beside their trigger.
+  const dropdownRadius = cover && !freeOverlay && measuredRadius != null ? measuredRadius : capped;
+  const coverCornerInset =
+    typeof dropdownRadius === "number" && typeof capped === "number" && dropdownRadius > capped
+      ? Math.ceil(dropdownRadius * (1 - Math.SQRT1_2))
+      : 0;
 
   // ── State ─────────────────────────────────────────────────
 
@@ -321,7 +365,11 @@ export function useFloatingPanel({
   const setupForOpen = useCallback(() => {
     computePlacement();
     if (canUseDom && triggerRef.current) {
-      setMeasuredRadius(freeOverlay ? null : measureDrawnRadius(triggerRef.current));
+      setMeasuredRadius(
+        freeOverlay
+          ? null
+          : measureDrawnRadius(groupSurfaceOf(triggerRef.current) ?? triggerRef.current),
+      );
     }
     onBeforeOpenRef.current?.();
     if (closingTimerRef.current) clearTimeout(closingTimerRef.current);
@@ -381,40 +429,69 @@ export function useFloatingPanel({
     // Horizontal collision handling: panels anchored near the right viewport
     // edge (e.g. a ColorPicker in the last table column) shift back into view
     // instead of clipping. Vertical placement is handled by computePlacement.
-    shift({ padding: panelViewportPadding }),
-    ...(widthMode === "fit-content"
-      ? []
-      : [
+    // A screen-wide panel shifts inside the same room its width was cut to,
+    // so a trigger in the page gutter keeps its start edge.
+    shift(({ elements }) => {
+      if (panelWidth !== "screen") return { padding: panelViewportPadding };
+      const viewportWidth = document.documentElement.clientWidth || window.innerWidth || 0;
+      const room = screenRoom(elements.reference, viewportWidth);
+      return { padding: { left: room.left, right: viewportWidth - room.right } };
+    }),
+    ...(panelWidth !== undefined
+      ? [
           size({
-            apply({
-              rects: {
-                reference: { width },
-              },
-              elements,
-            }) {
-              // MPO-38 width modes. `at-least-trigger` writes only min-width,
-              // so content may still grow the panel wider; `match-trigger`
-              // pins all three so the panel is the trigger's width EXACTLY,
-              // for content narrower AND wider than it.
-              //
-              // Any oversize on an anchored listbox breaks the flush
-              // start-alignment (a wider panel near the viewport edge gets
-              // shift()ed off the trigger's x) and lets trigger decorations
-              // peek around the panel as ghosted edges.
-              const style: Record<string, number> =
-                widthMode === "match-trigger"
-                  ? { minWidth: width, width, maxWidth: width }
-                  : { minWidth: width };
-              Object.assign(floatingStyleRef.current, style);
-              elements.floating.style.minWidth = `${width}px`;
-              if (widthMode === "match-trigger") {
-                elements.floating.style.width = `${width}px`;
-                elements.floating.style.maxWidth = `${width}px`;
-              }
+            apply({ rects: { reference }, elements }) {
+              const viewportWidth = document.documentElement.clientWidth || window.innerWidth || 0;
+              const room =
+                panelWidth === "screen"
+                  ? screenRoom(elements.reference, viewportWidth)
+                  : { left: panelViewportPadding, right: viewportWidth - panelViewportPadding };
+              const box = panelWidthBox(panelWidth, {
+                trigger: reference.width,
+                available: room.right - room.left,
+                echo,
+              });
+              Object.assign(floatingStyleRef.current, box);
+              elements.floating.style.minWidth = `${box.minWidth}px`;
+              elements.floating.style.maxWidth = `${box.maxWidth}px`;
+              elements.floating.style.width = box.width === undefined ? "" : `${box.width}px`;
             },
             padding: panelViewportPadding,
           }),
-        ]),
+        ]
+      : widthMode === "fit-content"
+        ? []
+        : [
+            size({
+              apply({
+                rects: {
+                  reference: { width },
+                },
+                elements,
+              }) {
+                // MPO-38 width modes. `at-least-trigger` writes only min-width,
+                // so content may still grow the panel wider; `match-trigger`
+                // pins all three so the panel is the trigger's width EXACTLY,
+                // for content narrower AND wider than it.
+                //
+                // Any oversize on an anchored listbox breaks the flush
+                // start-alignment (a wider panel near the viewport edge gets
+                // shift()ed off the trigger's x) and lets trigger decorations
+                // peek around the panel as ghosted edges.
+                const style: Record<string, number> =
+                  widthMode === "match-trigger"
+                    ? { minWidth: width, width, maxWidth: width }
+                    : { minWidth: width };
+                Object.assign(floatingStyleRef.current, style);
+                elements.floating.style.minWidth = `${width}px`;
+                if (widthMode === "match-trigger") {
+                  elements.floating.style.width = `${width}px`;
+                  elements.floating.style.maxWidth = `${width}px`;
+                }
+              },
+              padding: panelViewportPadding,
+            }),
+          ]),
   ];
 
   const { x, y, strategy, context, refs, update } = useFloating({
@@ -556,6 +633,7 @@ export function useFloatingPanel({
     setReferenceRef,
     setMounted,
     dropdownRadius,
+    coverCornerInset,
     hasBorder,
     panelTransition: panelTransitionFor(knobProps.motion.overlay.transition),
     knobProps,

package/src/InputParts/index.tsx

@@ -28,6 +28,7 @@ import {
   View,
   XGroup,
   createStyledContext,
+  getTokenValue,
   getVariable,
   isWeb,
   styled,
@@ -61,6 +62,7 @@ import { useControlGroupVertical, useControlGrouped } from "../shared/groupConte
 import { nativeAutoFocus } from "../shared/nativeAutoFocus";
 import { pressSlopProps } from "../shared/pressSlopProps";
 import { useIsInTableCell } from "../shared/tableCellContext";
+import { useInPanelEcho, usePanelTriggerRadiusReporter } from "../FloatingPanel/echoContext";
 import { useFieldA11y, useFieldDescribedBy } from "../fieldLayout";
 
 /**
@@ -498,6 +500,29 @@ const InputGroupImpl = InputGroupFrame.styleable<{
     (props as { width?: unknown }).width == null
       ? { minWidth: 0, maxWidth: "100%" as const }
       : undefined;
+  // LC-112 seamless cover (FZ-8438): a covering panel repeats this frame's
+  // arc at its corners, and an echo of this frame draws no chrome of its own.
+  const inPanelEcho = useInPanelEcho();
+  const reportRadius = usePanelTriggerRadiusReporter();
+  const drawnRadiusToken = sizeTableRadius?.borderRadius ?? knobProps.borderRadius.borderRadius;
+  const drawnRadius =
+    typeof drawnRadiusToken === "number"
+      ? drawnRadiusToken
+      : Number(getTokenValue(drawnRadiusToken as never, "radius"));
+  useEffect(() => {
+    if (reportRadius && !inPanelEcho && !grouped && !inTableCell && Number.isFinite(drawnRadius)) {
+      reportRadius(drawnRadius);
+    }
+  }, [reportRadius, inPanelEcho, grouped, inTableCell, drawnRadius]);
+  const echoChrome = inPanelEcho
+    ? {
+        borderColor: "transparent",
+        backgroundColor: "transparent",
+        elevation: undefined,
+        shadowColor: "transparent",
+        shadowOpacity: 0,
+      }
+    : undefined;
 
   // Chromeless rendering inside table cells
   if (inTableCell) {
@@ -615,6 +640,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
                 hoverStyle: { ...disabledState.surfaceKnobProps },
               }
             : undefined)}
+          {...echoChrome}
           overflow={boxOverflow}
         >
           {children}

package/src/Wheel/NativeWheel.native.tsx

@@ -347,7 +347,7 @@ export function NativeWheel<T = string | number>(props: WheelProps<T>) {
         right={0}
         top={padTop}
         height={itemHeight}
-        backgroundColor="$color4"
+        backgroundColor={layout.selectedFill}
         pointerEvents="none"
         style={layout.highlightStyle as never}
         data-testid="wheel-selection"

package/src/Wheel/Wheel.spec.tsx

@@ -209,6 +209,15 @@ describe("Wheel iOS picker contract", () => {
     expect(style.borderBottomWidth === "0px" || style.borderBottomWidth === "").toBe(true);
   });
 
+  it("does not paint the band with the dark elevated surface colour (FZ-8438)", () => {
+    renderWithProviders(
+      <Wheel items={[1, 2, 3, 4, 5]} value={3} onChange={() => {}} visibleItems={5} />,
+    );
+    const band = screen.getByTestId("wheel-selection");
+    const paint = `${band.className} ${band.getAttribute("style") ?? ""}`;
+    expect(paint).not.toMatch(/_bg-color4|--color4/);
+  });
+
   it("seats the selected row in the highlight band", () => {
     renderWithProviders(
       <Wheel

package/src/Wheel/index.tsx

@@ -154,8 +154,15 @@ function WebWheel<T = string | number>(props: WheelProps<T>) {
     onItemCross,
     "aria-label": ariaLabel,
   } = props;
-  const { knobProps, size, itemHeight, snapDurationMs, highlightStyle, highlightClassName } =
-    useWheelLayout(props);
+  const {
+    knobProps,
+    selectedFill,
+    size,
+    itemHeight,
+    snapDurationMs,
+    highlightStyle,
+    highlightClassName,
+  } = useWheelLayout(props);
   const columnWidth = widthProp ?? defaultColumnWidth;
   ensureWheelFocusStyles();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -672,7 +679,9 @@ function WebWheel<T = string | number>(props: WheelProps<T>) {
       {/* iOS 14+ selection fill — LC-71 selected=fill, never hairline borders */}
       <SelectionIndicator
         className={highlightClassName}
-        backgroundColor="$color4"
+        // FZ-8438: the selection tint (FZ-8355). $color4 is the dark elevated
+        // surface itself, so the band vanished on a dark cover panel.
+        backgroundColor={selectedFill}
         top={paddingItems * itemHeight}
         height={itemHeight}
         style={highlightStyle}

package/src/Wheel/wheelShared.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from "react";
 import { motionDurationMs, sizeTokenStep, useResolvedKnobs } from "@multiplatform.one/theme";
-import type { SizeTokens } from "tamagui";
+import type { ColorTokens, SizeTokens } from "tamagui";
 import { getConfig, getTokens } from "tamagui";
 
 export interface WheelItem<T = string | number> {
@@ -198,7 +198,7 @@ export function useWheelLayout<T>({
   size: sizeProp,
   highlightEdges = "all",
 }: Pick<WheelProps<T>, "visibleItems" | "itemHeight" | "size" | "highlightEdges">) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps, state } = useResolvedKnobs();
   const size = sizeProp ?? wheelFontByStep[sizeTokenStep(knobProps.sizeToken)];
   const bodyFont = (knobProps.body as { fontFamily?: unknown }).fontFamily;
   const itemHeight =
@@ -208,6 +208,10 @@ export function useWheelLayout<T>({
   const radiusToken = knobProps.borderRadius.borderRadius as string | number;
   return {
     knobProps,
+    // The band is the selection tint (LC-131, FZ-8355) from the state recipe;
+    // a preset with no accent tint falls back one step above the elevated
+    // dark surface, so the band still shows on a cover panel (FZ-8438).
+    selectedFill: (state.selected.surfaceKnobProps.backgroundColor ?? "$color5") as ColorTokens,
     size,
     itemHeight,
     frameHeight,

package/src/fields/Combobox/index.tsx

@@ -1502,6 +1502,7 @@ function FloatingComboboxCore({
               {...elevatedSurfaceProps}
               borderRadius={panel.dropdownRadius}
               data-testid="combobox-dropdown"
+              paddingBottom={panel.coverCornerInset || undefined}
             >
               {!hideSearch && (
                 <InputParts size={knobProps.sizeToken}>

package/src/fields/DatePicker/DatePicker.stories.tsx

@@ -131,9 +131,9 @@ export const StateContract: Story = {
 };
 
 /**
- * LC-266 (FZ-8114): on a coarse-pointer browser each field opens the
- * browser's own picker; a fine pointer keeps the MPO calendar and wheels. The
- * lines below show the committed value, which is the same on both paths.
+ * LC-112 seamless cover (FZ-8438): on a coarse-pointer browser each field
+ * opens the same MPO panel as on desktop, one surface over the field with
+ * the calendar or the wheels. The lines below show the committed value.
  */
 export const TouchWeb: Story = {
   render: () => {