@multiplatform.one/forms 7.71.0 → 7.73.0

package/src/fields/Select/index.tsx

@@ -52,6 +52,8 @@ import {
 import { ScrollArrow } from "../../shared/floatingList";
 import {
   FloatingPanel,
+  TriggerEchoRow,
+  placeEchoOverTrigger,
   useFloatingPanel,
   panelViewportPadding,
   useViewportGtSm,
@@ -59,6 +61,7 @@ import {
 import { pickerCompactFace, resolveCompactFace } from "../../FloatingPanel/compactFace";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal";
 import { fixedContainingBlockOrigin } from "../../FloatingPanel/containingBlock";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { useInsideOverlay, useOverlayZIndex } from "../../shared/overlayStack";
 import { useDragScroll } from "../../shared/useDragScroll";
 import { useIsInTableCell } from "../../shared/tableCellContext";
@@ -131,6 +134,12 @@ export interface SelectProps {
    * `multiple` is set, and on Android (the catalog sheet stays). Default false.
    */
   native?: boolean;
+  /**
+   * How wide the open list is (LC-112, FZ-8438 r3): `"content"`, `"trigger"`,
+   * `"screen"` or a fixed width. Unset keeps the default: at least the field's
+   * width on the web, the native pull-down's floor on a phone menu.
+   */
+  panelWidth?: PanelWidth;
 }
 
 // ── Lightweight item row (replaces heavy ListItem-based DropdownItem) ──
@@ -511,6 +520,7 @@ interface FloatingSelectCoreProps {
   selectedOrder?: SelectedOrder;
   dismissible?: boolean;
   native?: boolean;
+  panelWidth?: PanelWidth;
 }
 function FloatingSelectCore({
   options,
@@ -527,6 +537,7 @@ function FloatingSelectCore({
   multiple,
   selectedOrder,
   dismissible,
+  panelWidth,
 }: FloatingSelectCoreProps) {
   const overlayZIndex = useOverlayZIndex("dropdown");
   const { style: elevatedSurfaceStyle, ...elevatedSurfaceProps } = knobProps.elevatedSurface;
@@ -608,6 +619,10 @@ function FloatingSelectCore({
   const growUpOnlyRef = useRef(false);
   const growDownOnlyRef = useRef(false);
   const lastScrollTopRef = useRef(0);
+  // LC-112 drop-up (FZ-8438 r3): a field too low for its list opens upward,
+  // the panel's bottom edge on the field's, the echo its last row.
+  const dropUpRef = useRef(false);
+  const [dropUp, setDropUp] = useState(false);
 
   const repositionRef = useRef<(() => void) | null>(null);
 
@@ -627,7 +642,9 @@ function FloatingSelectCore({
       growDownOnlyRef.current = false;
       lastScrollTopRef.current = 0;
       programmaticScrollRef.current = 0;
+      dropUpRef.current = false;
     },
+    panelWidth,
   });
 
   const { scrollRef: dragScrollRef, dragProps } = useDragScroll({
@@ -700,6 +717,10 @@ function FloatingSelectCore({
 
     const triggerBounds = trigger.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
+    // The math runs in viewport coordinates; a panel hosted in a transformed
+    // sheet lays out against that sheet, so the written top is offset by it
+    // (FZ-8438: an iPad Select inside a SheetModal opened far below its field).
+    const originTop = fixedContainingBlockOrigin(dropdownElement).top;
     const computedStyle = getComputedStyle(dropdownElement);
     const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;
     const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;
@@ -707,26 +728,27 @@ function FloatingSelectCore({
     const scrollContentHeight = dropdownElement.scrollHeight;
     const totalContentHeight = scrollContentHeight + totalBorderWidth;
 
-    // Cover-alignment (OVERLAY_ANCHOR_GAP rule): the panel's border-box top
-    // coincides with the trigger's border-box top EXACTLY, so frame, corner
-    // arc and row text all line up (panel border draws over trigger border;
-    // row content = panel.top + border + offsetTop lands on the trigger's
-    // content edge). Subtracting the border here shifted the whole panel 1px
-    // up and made the corner arcs visibly diverge from the trigger's.
-    let idealTop: number;
-    if (selectedIndex >= 0) {
-      idealTop = triggerBounds.top - selectedItem.offsetTop;
-    } else if (panel.placement.startsWith("top")) {
-      idealTop = triggerBounds.bottom - totalContentHeight;
-    } else {
-      idealTop = triggerBounds.top - (selectedItem.offsetTop ?? 0);
+    // LC-112 seamless cover (FZ-8438): the panel's top edge is the trigger's,
+    // the trigger echoed as its first row, the list below it. A field too low
+    // for its list, with more room above it, opens upward instead: the
+    // panel's bottom edge on the field's bottom edge and the echo its last
+    // row, so the echo still sits on the field (FZ-8438 r3).
+    const firstPlacement = pinnedTopRef.current === 0 && pinnedHeightRef.current === 0;
+    const roomBelow = viewportHeight - panelViewportPadding - triggerBounds.top;
+    const roomAbove = triggerBounds.bottom - panelViewportPadding;
+    if (firstPlacement) {
+      dropUpRef.current = totalContentHeight > roomBelow && roomAbove > roomBelow;
+      setDropUp(dropUpRef.current);
     }
-    const idealBottom = idealTop + totalContentHeight;
+    const idealTop = dropUpRef.current
+      ? triggerBounds.bottom - totalContentHeight
+      : triggerBounds.top;
+    const idealBottom = dropUpRef.current ? triggerBounds.bottom : idealTop + totalContentHeight;
     const pinnedTop = Math.max(panelViewportPadding, idealTop);
     const pinnedBottom = Math.min(viewportHeight - panelViewportPadding, idealBottom);
     const pinnedHeight = Math.max(120, pinnedBottom - pinnedTop);
 
-    if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
+    if (firstPlacement) {
       pinnedTopRef.current = pinnedTop;
       pinnedHeightRef.current = pinnedHeight;
     }
@@ -735,7 +757,10 @@ function FloatingSelectCore({
     let height = pinnedHeightRef.current;
 
     if (grownRef.current) {
-      const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
+      // A drop-up keeps its echo on the field: it grows upward only.
+      const canGrowDown = dropUpRef.current
+        ? 0
+        : Math.max(0, viewportHeight - panelViewportPadding - (top + height));
       height += canGrowDown;
       const canGrowUp = Math.max(0, top - panelViewportPadding);
       top -= canGrowUp;
@@ -747,7 +772,7 @@ function FloatingSelectCore({
       top -= canGrowUp;
       height += canGrowUp;
     }
-    if (growDownOnlyRef.current) {
+    if (growDownOnlyRef.current && !dropUpRef.current) {
       const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
       height += canGrowDown;
     }
@@ -773,43 +798,59 @@ function FloatingSelectCore({
 
     if (
       !cachedOverlayStyle ||
-      cachedOverlayStyle.top !== top ||
+      cachedOverlayStyle.top !== top - originTop ||
       cachedOverlayStyle.maxHeight !== height
     ) {
-      dropdownElement.style.top = `${top}px`;
+      dropdownElement.style.top = `${top - originTop}px`;
       dropdownElement.style.maxHeight = `${height}px`;
       dropdownElement.style.height = "";
-      overlayStyle.current = { top, maxHeight: height };
+      overlayStyle.current = { top: top - originTop, maxHeight: height };
       void dropdownElement.offsetHeight;
     }
 
-    if (!grownRef.current && !growUpOnlyRef.current && !growDownOnlyRef.current) {
-      const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
-      if (selectedIndex >= 0) {
-        // Row-over-trigger: row y (top + border + offsetTop − scroll) must
-        // land on the trigger's content edge (trigger.top + border).
-        const neededScroll = top + selectedItem.offsetTop - triggerBounds.top;
-        const clampedScrollTop = Math.max(0, Math.min(neededScroll, maxScrollTop));
-        if (Math.abs(dropdownElement.scrollTop - clampedScrollTop) > 0.5) {
+    if (
+      isInitial &&
+      selectedIndex >= 0 &&
+      !grownRef.current &&
+      !growUpOnlyRef.current &&
+      !growDownOnlyRef.current
+    ) {
+      // The selected row starts in view, just under the sticky echo row (or
+      // just above it in a drop-up, where the echo is the last row).
+      const echoHeight = triggerBounds.height;
+      const rowBottom = selectedItem.offsetTop + selectedItem.offsetHeight;
+      if (dropUpRef.current) {
+        const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
+        const wanted = rowBottom - (dropdownElement.clientHeight - echoHeight);
+        if (wanted > 0) {
           programmaticScrollRef.current++;
-          dropdownElement.scrollTop = clampedScrollTop;
-        }
-        if (Math.abs(neededScroll - clampedScrollTop) > 0.5) {
-          const scrollDeficit = neededScroll - clampedScrollTop;
-          top -= scrollDeficit;
-          top = Math.max(panelViewportPadding, top);
-          const remainingContentHeight = totalContentHeight - clampedScrollTop;
-          const adjustedMaxHeight = Math.min(
-            remainingContentHeight,
-            viewportHeight - top - panelViewportPadding,
-          );
-          dropdownElement.style.top = `${top}px`;
-          dropdownElement.style.maxHeight = `${adjustedMaxHeight}px`;
-          overlayStyle.current = { top, maxHeight: adjustedMaxHeight };
+          dropdownElement.scrollTop = Math.min(wanted, maxScrollTop);
         }
+      } else if (rowBottom > dropdownElement.clientHeight) {
+        const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
+        programmaticScrollRef.current++;
+        dropdownElement.scrollTop = Math.max(
+          0,
+          Math.min(selectedItem.offsetTop - echoHeight, maxScrollTop),
+        );
       }
     }
 
+    // A screen-wide or fixed-width list slides inside the margins; its echo
+    // stays on the field (LC-112 r3). The scale origin is the left edge, so
+    // the client rect's left is the layout left.
+    placeEchoOverTrigger(
+      dropdownElement,
+      {
+        triggerLeft: triggerBounds.left,
+        triggerRight: triggerBounds.right,
+        panelLeft: dropdownElement.getBoundingClientRect().left,
+        panelWidth: dropdownElement.offsetWidth,
+        rtl: getComputedStyle(trigger).direction === "rtl",
+      },
+      { stretch: panelWidth !== undefined },
+    );
+
     panel.initializingRef.current = false;
 
     void dropdownElement.offsetHeight;
@@ -837,7 +878,7 @@ function FloatingSelectCore({
   useLayoutEffect(() => {
     if (!open || !panel.mounted) return;
     repositionOverlay();
-  }, [open, panel.mounted, selectedIndex, repositionOverlay, panel.y]);
+  }, [open, panel.mounted, selectedIndex, repositionOverlay, panel.x, panel.y]);
 
   const onMatch = useCallback(
     (index: number) => {
@@ -1163,7 +1204,8 @@ function FloatingSelectCore({
                   opacity: panel.visible ? 1 : 0,
                   transform: panel.visible ? "scale(1)" : "scale(0.96)",
                   transition: panel.panelTransition,
-                  transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
+                  transformOrigin:
+                    dropUp || panel.placement.startsWith("top") ? "bottom left" : "top left",
                   ...dragProps.style,
                 },
                 onPointerDown: dragProps.onPointerDown,
@@ -1204,12 +1246,27 @@ function FloatingSelectCore({
               borderRadius={panel.dropdownRadius}
               data-testid="select-dropdown"
               paddingVertical={0}
+              paddingBottom={panel.coverCornerInset || 0}
             >
+              {!beside && (
+                <TriggerEchoRow
+                  sourceRef={panel.triggerRef}
+                  source={selectedOption?.label ?? placeholder}
+                  onPress={() => setOpen(false)}
+                  presentational
+                  edge={dropUp ? "bottom" : "top"}
+                />
+              )}
               <ScrollArrow
                 direction="up"
                 scrollRef={panel.refs.floating}
                 visible={panel.arrowUp}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
+                topOffset={
+                  dropUp || beside
+                    ? 0
+                    : (panel.triggerRef.current?.getBoundingClientRect().height ?? 0)
+                }
               />
               {groupLabel && (
                 <GroupHeader color={textColor} paddingHorizontal={knobProps.panelPadding.padding}>
@@ -1260,6 +1317,9 @@ function FloatingSelectCore({
                 scrollRef={panel.refs.floating}
                 visible={panel.arrowDown}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
+                bottomOffset={
+                  dropUp ? (panel.triggerRef.current?.getBoundingClientRect().height ?? 0) : 0
+                }
               />
             </YStack>
           </FloatingFocusManager>
@@ -1287,6 +1347,7 @@ function NativeSelectCore({
   selectedOrder,
   dismissible,
   native,
+  panelWidth,
 }: FloatingSelectCoreProps) {
   const insideOverlay = useInsideOverlay();
   const compactFace = pickerCompactFace(options.length);
@@ -1591,6 +1652,7 @@ function NativeSelectCore({
       // A short list opens as a menu over its trigger; a long one keeps its
       // sheet at page level and opens as a menu inside another overlay (FZ-7830).
       compactFace={compactFace}
+      panelWidth={panelWidth}
       {...(asMenu && insideOverlay && opensBesideTrigger(options.length)
         ? { anchorMode: "attach" as const, triggerEcho: false }
         : null)}
@@ -1740,6 +1802,7 @@ export function Select({
   dismissible,
   skeleton,
   native,
+  panelWidth,
   "aria-label": ariaLabel,
   ...rest
 }: SelectProps) {
@@ -1781,7 +1844,7 @@ export function Select({
     !inline &&
     !inTableCell &&
     Boolean(rowLabel) &&
-    shouldPushChoices({ inSheet: Boolean(sheetNavigation), multiple, options });
+    shouldPushChoices({ inSheet: Boolean(sheetNavigation), multiple, options, panelWidth });
   // DG-CTRL-01 / DG-CTRL-05 — short single-select lists prefer RadioGroup,
   // which the inline face already is.
   if (!inline) {
@@ -1920,6 +1983,7 @@ export function Select({
         selectedOrder={selectedOrder}
         dismissible={dismissible}
         native={native}
+        panelWidth={panelWidth}
       />
     );
   };

package/src/fields/Select/shouldInlineChoices.spec.ts

@@ -37,6 +37,19 @@ describe("shouldPushChoices and opensBesideTrigger (LC-262, FZ-7830 round 3)", (
     expect(shouldPushChoices({ inSheet: true, multiple: true, options: withIcons(8) })).toBe(false);
   });
 
+  it("never pushes a list whose panel width is trigger or screen: it covers its trigger (FZ-8438)", () => {
+    expect(shouldPushChoices({ inSheet: true, options: withIcons(8), panelWidth: "trigger" })).toBe(
+      false,
+    );
+    expect(shouldPushChoices({ inSheet: true, options: withIcons(8), panelWidth: "screen" })).toBe(
+      false,
+    );
+    expect(shouldPushChoices({ inSheet: true, options: withIcons(8), panelWidth: "content" })).toBe(
+      true,
+    );
+    expect(shouldPushChoices({ inSheet: true, options: withIcons(8), panelWidth: 300 })).toBe(true);
+  });
+
   it("opens a list of five or fewer beside its field", () => {
     expect(opensBesideTrigger(5)).toBe(true);
     expect(opensBesideTrigger(6)).toBe(false);

package/src/fields/Select/shouldInlineChoices.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 
 /** The most options a Select inside a sheet lays out inline (LC-262). */
 export const INLINE_CHOICES_MAX = 5;
@@ -25,17 +26,22 @@ export function shouldInlineChoices({
  * A single-choice Select inside a sheet with more options than the inline
  * list holds pushes its checkmark list onto the sheet's navigation stack from
  * a Settings row (LC-262, FZ-7830 round 3), instead of a menu over the field.
+ * An explicit `"trigger"` or `"screen"` panel width asks for a cover over the
+ * trigger (LC-112, FZ-8438 r3), so that Select is never pushed.
  */
 export function shouldPushChoices({
   inSheet,
   multiple,
   options,
+  panelWidth,
 }: {
   inSheet: boolean;
   multiple?: boolean;
   options: ReadonlyArray<unknown> | undefined;
+  panelWidth?: PanelWidth;
 }): boolean {
   if (!inSheet || multiple || !options?.length) return false;
+  if (panelWidth === "trigger" || panelWidth === "screen") return false;
   return options.length > INLINE_CHOICES_MAX;
 }
 

package/src/fields/TimePicker/catalog.tsx

@@ -5,6 +5,7 @@ import { isWeb } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel } from "../../FloatingPanel";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { Input as InputParts } from "../../InputParts";
 import { t } from "../../shared/t";
 import {
@@ -14,12 +15,6 @@ import {
   useResolvedValidators,
 } from "../../shared/utils";
 import type { AnyFormApi } from "../../types";
-import {
-  fromTimeInputValue,
-  toTimeInputValue,
-  TouchWebPickerInput,
-  useCoarsePointer,
-} from "../../shared/touchWebPicker";
 import {
   TimePanel,
   TimePickerClearButton,
@@ -62,6 +57,11 @@ export interface TimePickerProps {
   skeleton?: boolean;
   /** Native only. Omit for the OS time wheel; `false` keeps the catalog panel. */
   native?: boolean;
+  /**
+   * How wide the open wheels are (LC-112, FZ-8438 r3): `"content"`,
+   * `"trigger"`, `"screen"` or a fixed width. Unset: at least the field.
+   */
+  panelWidth?: PanelWidth;
 }
 
 export function TimePicker({
@@ -87,13 +87,13 @@ export function TimePicker({
   placeholder = t("Select time"),
   clockIcon,
   skeleton,
+  panelWidth,
 }: TimePickerProps) {
   const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const touchWeb = useCoarsePointer();
   const [open, setOpen] = useState(false);
   const [internalValue, setInternalValue] = useState<string>(() => valueProp ?? defaultValue ?? "");
   useEffect(() => {
@@ -174,32 +174,6 @@ export function TimePicker({
     if (readOnly) {
       return renderTrigger(triggerValue, hasError, undefined, true);
     }
-    if (touchWeb) {
-      return (
-        <TimePickerInputTrigger
-          value={triggerValue}
-          placeholder={placeholder}
-          disabled={disabled}
-          clockIcon={clockIcon}
-          onOpen={() => {}}
-          onClear={() => handleClear(fieldChange)}
-          touchInput={
-            <TouchWebPickerInput
-              kind="time"
-              id={id}
-              value={toTimeInputValue(fieldValue ?? value, showSeconds)}
-              showSeconds={showSeconds}
-              disabled={disabled}
-              required={required}
-              invalid={hasError}
-              aria-label={label ? undefined : t("Time")}
-              onValue={(next) => handleChange(fromTimeInputValue(next, showSeconds), fieldChange)}
-              onBlur={blurHandler}
-            />
-          }
-        />
-      );
-    }
     return (
       <FloatingPanel
         open={open}
@@ -210,7 +184,12 @@ export function TimePicker({
         disabled={disabled}
         sizing="grow"
         widthMode="at-least-trigger"
+        panelWidth={panelWidth}
         contentPadding="none"
+        // LC-112 seamless cover (FZ-8438): touch and narrow web open the same
+        // wheels over the field, never the browser's own popover; a field too
+        // low for the panel takes MPO's bottom sheet (LC-105 collision).
+        compactFace={isWeb ? "menu" : undefined}
         triggerA11y={{
           label: (typeof label === "string" && label) || t("Time"),
           value: triggerValue || placeholder,

package/src/fields/TimePicker/index.native.tsx

@@ -49,6 +49,8 @@ export type TimePickerProps = {
   clockIcon?: import("react").ReactNode;
   skeleton?: boolean;
   native?: boolean;
+  /** How wide the catalog picker opens (`native={false}`), LC-112. */
+  panelWidth?: import("../../FloatingPanel/panelWidth").PanelWidth;
 };
 
 export type { TimeFormat } from "./parts";

package/src/fields/TimePicker/parts.tsx

@@ -124,8 +124,6 @@ interface TimePickerInputTriggerProps {
   "aria-readonly"?: boolean;
   /** FZ-7853: same shell, no clear action, nothing opens. */
   readOnly?: boolean;
-  /** Touch web (LC-266): the browser's time input, laid over the box; it owns tap, focus and name. */
-  touchInput?: ReactNode;
 }
 
 export function TimePickerInputTrigger({
@@ -141,9 +139,8 @@ export function TimePickerInputTrigger({
   "aria-invalid": ariaInvalid,
   "aria-readonly": ariaReadonly,
   readOnly,
-  touchInput,
 }: TimePickerInputTriggerProps) {
-  const interactive = !disabled && !readOnly && !touchInput;
+  const interactive = !disabled && !readOnly;
   return (
     <View
       flexDirection="row"
@@ -160,11 +157,9 @@ export function TimePickerInputTrigger({
         flex={1}
         minWidth={0}
         elevation={undefined}
-        position={touchInput ? "relative" : undefined}
         onPress={isWeb && interactive ? onOpen : undefined}
         {...(disabled ? { opacity: 0.5, pointerEvents: "none" as const } : undefined)}
       >
-        {touchInput}
         <InputParts.Section data-testid="time-picker-glyph">
           <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
             {clockIcon ?? <ClockIcon />}
@@ -174,17 +169,15 @@ export function TimePickerInputTrigger({
           <InputParts.Area
             readOnly
             {...(readOnly ? undefined : { pointerEvents: "none" as const })}
-            id={touchInput ? undefined : id}
+            id={id}
             value={value}
             placeholder={placeholder}
             disabled={disabled}
             color={formCommonColors.text}
             placeholderTextColor={formCommonColors.muted}
-            tabIndex={touchInput ? -1 : undefined}
-            aria-hidden={touchInput ? true : undefined}
-            aria-label={touchInput ? undefined : ariaLabel}
-            aria-required={touchInput ? undefined : ariaRequired}
-            aria-invalid={touchInput ? undefined : ariaInvalid}
+            aria-label={ariaLabel}
+            aria-required={ariaRequired}
+            aria-invalid={ariaInvalid}
             aria-readonly={readOnly || ariaReadonly || undefined}
             onKeyPress={
               !interactive
@@ -205,14 +198,7 @@ export function TimePickerInputTrigger({
         </InputParts.Section>
         {value && isWeb && !readOnly ? (
           <InputParts.Section>
-            {touchInput ? (
-              // Above the touch input, so Clear stays reachable on the box.
-              <View zIndex={2}>
-                <TimePickerClearButton onClear={onClear} disabled={disabled} />
-              </View>
-            ) : (
-              <TimePickerClearButton onClear={onClear} disabled={disabled} />
-            )}
+            <TimePickerClearButton onClear={onClear} disabled={disabled} />
           </InputParts.Section>
         ) : null}
       </InputParts.Box>

package/src/index.ts

@@ -307,6 +307,7 @@ export {
   panelTransition,
   panelViewportPadding,
 } from "./FloatingPanel";
+export { PanelHeader } from "./FloatingPanel/PanelHeader";
 export { PanelPortal } from "./FloatingPanel/PanelPortal";
 export type { PanelPortalProps } from "./FloatingPanel/PanelPortal";
 export { containsAcrossPanels } from "./shared/panelPortal";
@@ -316,6 +317,8 @@ export type {
   UseFloatingPanelOptions,
   UseFloatingPanelReturn,
 } from "./FloatingPanel";
+export type { PanelWidth } from "./FloatingPanel/panelWidth";
+export type { IconEcho } from "./FloatingPanel/iconEcho";
 
 // ── Adaptive Popup (Dialog / Drawer on desktop, Sheet on mobile) ─
 export { AdaptivePopup, pickAdaptivePopupFace } from "./AdaptivePopup";

package/src/shared/floatingList.tsx

@@ -1,5 +1,5 @@
 import { transitionProps } from "@multiplatform.one/theme";
-import { type RefObject, useCallback, useEffect, useRef } from "react";
+import { type RefObject, useCallback, useEffect, useRef, useState } from "react";
 import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { View } from "tamagui";
@@ -33,11 +33,17 @@ export function ScrollArrow({
   scrollRef,
   visible,
   arrowScrollDirRef,
+  topOffset = 0,
+  bottomOffset = 0,
 }: {
   direction: "up" | "down";
   scrollRef: RefObject<HTMLElement | null>;
   visible: boolean;
   arrowScrollDirRef: RefObject<"up" | "down" | null>;
+  /** Below a sticky echo row (LC-112 seamless cover), the up arrow sits under it. */
+  topOffset?: number;
+  /** Above a sticky echo row at the bottom (a drop-up), the down arrow sits over it. */
+  bottomOffset?: number;
 }) {
   const isUp = direction === "up";
   const animationFrameRef = useRef(0);
@@ -137,6 +143,14 @@ export function ScrollArrow({
     [handlePointerLeave],
   );
 
+  const [panelFill, setPanelFill] = useState("var(--background)");
+  useEffect(() => {
+    if (!visible || typeof getComputedStyle !== "function") return;
+    const el = scrollRef.current;
+    const fill = el ? getComputedStyle(el).backgroundColor : "";
+    if (fill && fill !== "transparent" && fill !== "rgba(0, 0, 0, 0)") setPanelFill(fill);
+  }, [visible, scrollRef]);
+
   const Icon = isUp ? CaretUpIcon : CaretDownIcon;
   const { knobProps } = useResolvedKnobs();
   const iconSize = knobProps.controlIcon.width;
@@ -144,8 +158,8 @@ export function ScrollArrow({
   return (
     <View
       position="sticky"
-      top={isUp ? 0 : undefined}
-      bottom={isUp ? undefined : 0}
+      top={isUp ? topOffset : undefined}
+      bottom={isUp ? undefined : bottomOffset}
       height={0}
       zIndex={2}
     >
@@ -165,10 +179,12 @@ export function ScrollArrow({
         pointerEvents={visible ? "auto" : "none"}
         opacity={visible ? 1 : 0}
         {...transitionProps(knobProps.motion.control)}
+        // The fade is the panel's own fill: an elevated dark panel is a step
+        // above the theme ground, and a ground-coloured fade read as a band.
         style={{
           background: isUp
-            ? "linear-gradient(to bottom, var(--background) 40%, transparent)"
-            : "linear-gradient(to top, var(--background) 40%, transparent)",
+            ? `linear-gradient(to bottom, ${panelFill} 40%, transparent)`
+            : `linear-gradient(to top, ${panelFill} 40%, transparent)`,
         }}
         onPointerEnter={visible ? handlePointerEnter : undefined}
         onPointerLeave={handlePointerLeave}

package/types/Button/circleGlyph.d.ts

@@ -0,0 +1,7 @@
+/**
+ * LC-176: a glyph on a circle the caller asked for (`circular`, `outlined`)
+ * fills this share of the circle, the iOS Settings and Contacts leading-icon
+ * ratio, never a small glyph lost in a big plate.
+ */
+export declare const ICON_BUTTON_CIRCLE_GLYPH_RATIO = 0.58;
+//# sourceMappingURL=circleGlyph.d.ts.map

package/types/Button/circleGlyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circleGlyph.d.ts","sourceRoot":"","sources":["../../src/Button/circleGlyph.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,OAAO,CAAC"}

package/types/Button/index.d.ts

@@ -3,6 +3,8 @@ import { type RecipeFamilyName, type SizeRecipe } from "@multiplatform.one/theme
 import { type ButtonProps as TamaguiButtonProps } from "tamagui";
 import type { AnyFormApi } from "../types";
 import type { SizeTokens } from "@tamagui/web";
+import { ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "./circleGlyph";
+export { ICON_BUTTON_CIRCLE_GLYPH_RATIO };
 /**
  * Coordinated size recipe (Polaris slim/medium/large, Primer s/m/l, Linear
  * 28/32/40, Spectrum S/M, M3 XS/S). Height, pad, type, icon, gap and radius
@@ -171,12 +173,6 @@ export declare const ICON_BUTTON_NEUTRAL_GLYPH_PX = 24;
  * target.
  */
 export declare function iconButtonGlyphPx(rowLinePx: number | undefined): number;
-/**
- * LC-176: a glyph on a circle the caller asked for (`circular`, `outlined`)
- * fills this share of the circle, the iOS Settings and Contacts leading-icon
- * ratio, never a small glyph lost in a big plate.
- */
-export declare const ICON_BUTTON_CIRCLE_GLYPH_RATIO = 0.58;
 export declare function Button({ children, action, form: formProp, loading, accent, error, warning, success, skeleton, outlined, disabled, theme, onPress, onKeyDown, tabIndex, icon, iconAfter, selected, nested, circular: circularProp, chromeless, edge, accentInk, plate, inline, glyphWeight, verb, noun, actionRole, disabledReason, disabledReasonPlacement, sizeRecipeEscape, recipeFamily, height: heightProp, paddingHorizontal: paddingHorizontalProp, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Button {
     var Icon: (props: {