@multiplatform.one/forms 7.80.0 → 7.81.1

package/src/fields/Select/index.tsx

@@ -1,7 +1,8 @@
 import { IconSlot, useTouchSurface } from "@multiplatform.one/theme";
+import { CheckGlyph } from "../../shared/CheckGlyph";
 import type { KeyboardEvent, MouseEvent, ReactNode, RefObject, UIEvent } from "react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
-import { CaretDownIcon, CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CaretRightIcon } from "@phosphor-icons/react";
 import {
   useClick,
   useDismiss,
@@ -50,11 +51,14 @@ import {
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
-import { ScrollArrow } from "../../shared/floatingList";
+import {
+  growOnScroll,
+  placeCheckedOnField,
+  ScrollArrow,
+  scrollArrowBand,
+} from "../../shared/floatingList";
 import {
   FloatingPanel,
-  TriggerEchoRow,
-  placeEchoOverTrigger,
   useFloatingPanel,
   panelViewportPadding,
   useViewportGtSm,
@@ -349,8 +353,8 @@ function selectItemRingProps(isActive: boolean, kbNav: boolean) {
  * row. On native the shim can only resolve a token the theme in scope actually
  * carries, and the component sub-themes carry no accent solid at all.
  * Resolve it here, where the value becomes a paint — the same shape as
- * `mutedColor` in Combobox. Keyed off `useMenuRowCheckInk` (`menuRowCheckInk`, ink when hue-less), the selection tint's
- * own ink, so the tick holds 4.5:1 on the chosen row (FZ-8355 r6), degrading
+ * `mutedColor` in Combobox. Keyed off `useMenuRowCheckInk` (the accent, ink when hue-less), so the tick
+ * holds 4.5:1 on the chosen row (FZ-8355 r6, FZ-8557), degrading
  * to `$color` ink rather than black when a narrow sub-theme lacks the key.
  */
 function useSelectedMarkColor(): string {
@@ -506,7 +510,7 @@ const SelectItem = memo(function SelectItem({
       >
         {option.label}
       </Text>
-      {isSelected && <CheckIcon size={14} weight="bold" color={ctx.markColor} />}
+      {isSelected && <CheckGlyph />}
     </SelectRow>
   );
 });
@@ -624,20 +628,13 @@ function FloatingSelectCore({
   }, [options, value, multiple, selectedOrder]);
 
   const programmaticScrollRef = useRef(0);
-  const pinnedTopRef = useRef(0);
-  const pinnedHeightRef = useRef(0);
-  const grownRef = useRef(false);
-  const growUpOnlyRef = useRef(false);
-  const growDownOnlyRef = useRef(false);
   const lastScrollTopRef = useRef(0);
-  // LC-112 cover and scroll (FZ-8463): a list that doesn't fit below its
-  // field covers the field with no echo row and grows toward the side with
-  // more room, then scrolls.
-  const coverScrollRef = useRef(false);
-  const [coverScroll, setCoverScroll] = useState(false);
-  const growsUpRef = useRef(false);
-  const coverTrimRef = useRef(0);
-  const echoed = !beside && !coverScroll;
+  // The panel's box with the checked row on the field (FZ-8557), in the
+  // padding box's viewport coordinates.
+  const onFieldRef = useRef<{ top: number; height: number; scrollTop: number } | null>(null);
+  const opensUpRef = useRef(false);
+  // One band for the layout and the arrows that draw it (FZ-8557).
+  const arrowBand = scrollArrowBand(knobProps.menuRow.minHeight);
 
   const repositionRef = useRef<(() => void) | null>(null);
 
@@ -646,21 +643,13 @@ function FloatingSelectCore({
     onOpenChange: setOpen,
     disabled,
     repositionRef,
-    wheelGrowRef: selectedIndex >= 0 ? grownRef : undefined,
     onBeforeOpen: () => {
       computeSortedOptions();
       overlayStyle.current = null;
-      pinnedTopRef.current = 0;
-      pinnedHeightRef.current = 0;
-      grownRef.current = false;
-      growUpOnlyRef.current = false;
-      growDownOnlyRef.current = false;
       lastScrollTopRef.current = 0;
       programmaticScrollRef.current = 0;
-      coverScrollRef.current = false;
-      growsUpRef.current = false;
-      coverTrimRef.current = 0;
-      setCoverScroll(false);
+      onFieldRef.current = null;
+      opensUpRef.current = false;
     },
     panelWidth,
   });
@@ -728,11 +717,6 @@ function FloatingSelectCore({
     const isInitial = panel.initializingRef.current;
     if (isInitial) dropdownElement.style.transition = "none";
 
-    if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
-      programmaticScrollRef.current++;
-      dropdownElement.scrollTop = 0;
-    }
-
     const triggerBounds = trigger.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
     // The math runs in viewport coordinates; a panel hosted in a transformed
@@ -744,153 +728,46 @@ function FloatingSelectCore({
     const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;
     const totalBorderWidth = borderTopWidth + borderBottomWidth;
     const scrollContentHeight = dropdownElement.scrollHeight;
-    const totalContentHeight = scrollContentHeight + totalBorderWidth;
-
-    // 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 list that
-    // doesn't fit below its field covers the field with no echo row and
-    // grows toward the side with more room: down from the field's top edge,
-    // or up from its bottom edge. Past the safe screen edge it scrolls, and
-    // scrolling grows it to fill the screen (FZ-8463).
-    const firstPlacement = pinnedTopRef.current === 0 && pinnedHeightRef.current === 0;
-    const boundsTop = panelViewportPadding;
-    const boundsBottom = viewportHeight - panelViewportPadding;
-    const echoRow = dropdownElement.querySelector<HTMLElement>("[data-fp-trigger-row]");
-    const echoHeight = echoRow ? triggerBounds.height : 0;
-    const listHeight = totalContentHeight - echoHeight;
-    const roomBelow = boundsBottom - triggerBounds.top;
-    const roomAbove = triggerBounds.bottom - boundsTop;
-    if (firstPlacement && totalContentHeight > roomBelow) {
-      coverScrollRef.current = true;
-      growsUpRef.current = roomAbove > roomBelow;
-      setCoverScroll(true);
-    }
 
-    if (coverScrollRef.current) {
-      const grown = grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current;
-      const room = grown ? boundsBottom - boundsTop : growsUpRef.current ? roomAbove : roomBelow;
-      const trim = grown ? 0 : coverTrimRef.current;
-      const height = Math.max(0, Math.min(listHeight, room - trim));
-      const anchor = growsUpRef.current ? triggerBounds.bottom - height : triggerBounds.top;
-      const top = Math.min(Math.max(anchor, boundsTop), boundsBottom - height);
-      const previousTop = pinnedTopRef.current;
-      if (
-        !overlayStyle.current ||
-        overlayStyle.current.top !== top - originTop ||
-        overlayStyle.current.maxHeight !== height
-      ) {
-        dropdownElement.style.top = `${top - originTop}px`;
-        dropdownElement.style.maxHeight = `${height}px`;
-        dropdownElement.style.height = "";
-        overlayStyle.current = { top: top - originTop, maxHeight: height };
-        void dropdownElement.offsetHeight;
-      }
-      pinnedTopRef.current = top;
-      pinnedHeightRef.current = height;
-      // Rows stay under the pointer while the panel grows upward.
-      if (grown && previousTop > top && dropdownElement.scrollTop > 0) {
-        programmaticScrollRef.current++;
-        dropdownElement.scrollTop = Math.max(0, dropdownElement.scrollTop - (previousTop - top));
-      }
-      if (echoRow) return;
-      const rowHeight = selectedItem.offsetHeight || 1;
-      if (isInitial && selectedIndex >= 0) {
-        // The checked row lands on the field when the list can scroll that
-        // far. Opening down, short of that it stops a whole row short, so the
-        // top row isn't cut in half. Two pixels of rounding are not a row.
-        const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
-        let scrollTop: number;
-        if (growsUpRef.current) {
-          scrollTop = selectedItem.offsetTop + rowHeight - (triggerBounds.bottom - top);
-        } else {
-          const short = Math.max(0, selectedItem.offsetTop - maxScrollTop - 2);
-          scrollTop = selectedItem.offsetTop - Math.ceil(short / rowHeight) * rowHeight;
-        }
-        programmaticScrollRef.current++;
-        dropdownElement.scrollTop = Math.min(maxScrollTop, Math.max(0, scrollTop));
-      }
-      if (isInitial && !grown) {
-        // The far edge ends on a whole row: growing up, the row on the field
-        // isn't cut in half; growing down, no sliver sits at the screen edge.
-        const firstRow = listItemsRef.current[0];
-        const visibleBottom = dropdownElement.scrollTop + dropdownElement.clientHeight;
-        if (firstRow && visibleBottom < dropdownElement.scrollHeight - 2) {
-          const cut = (visibleBottom - firstRow.offsetTop) % rowHeight;
-          if (cut > 3 && cut < rowHeight - 3) {
-            coverTrimRef.current = cut;
-            const trimmedHeight = height - cut;
-            const trimmedTop = growsUpRef.current ? top + cut : top;
-            dropdownElement.style.top = `${trimmedTop - originTop}px`;
-            dropdownElement.style.maxHeight = `${trimmedHeight}px`;
-            overlayStyle.current = { top: trimmedTop - originTop, maxHeight: trimmedHeight };
-            pinnedTopRef.current = trimmedTop;
-            pinnedHeightRef.current = trimmedHeight;
-          }
-        }
-      }
-      panel.initializingRef.current = false;
-      void dropdownElement.offsetHeight;
-      if (isInitial) dropdownElement.style.transition = panel.panelTransition;
-      requestAnimationFrame(() => {
-        if (dropdownElement) panel.updateArrows(dropdownElement);
+    // LC-112 (FZ-8557 r3): a covering Select opens the way a macOS pop-up
+    // does. Its checked row sits on the field (the first row when nothing is
+    // checked), so the value never shows twice. A list that fits the safe
+    // viewport shows whole, slid the least distance to stay on screen; a
+    // taller one clips at the safe edges and scrolls under its arrow bands.
+    // Scrolling grows a panel that stops short of a safe edge toward it,
+    // the rows staying under the pointer.
+    const boundsTop = panelViewportPadding + borderTopWidth;
+    const boundsBottom = viewportHeight - panelViewportPadding - borderBottomWidth;
+    if (!onFieldRef.current) {
+      const fit = placeCheckedOnField({
+        fieldTop: triggerBounds.top,
+        fieldBottom: triggerBounds.bottom,
+        rowTop: selectedItem.offsetTop,
+        rowHeight: selectedItem.offsetHeight || 1,
+        contentHeight: scrollContentHeight,
+        boundsTop,
+        boundsBottom,
+        band: arrowBand,
+      });
+      onFieldRef.current = fit;
+      opensUpRef.current =
+        fit.top + fit.height / 2 < (triggerBounds.top + triggerBounds.bottom) / 2;
+    } else if (!isInitial) {
+      onFieldRef.current = growOnScroll({
+        ...onFieldRef.current,
+        scrollTop: dropdownElement.scrollTop,
+        contentHeight: scrollContentHeight,
+        boundsTop,
+        boundsBottom,
       });
-      return;
-    }
-    const idealTop = triggerBounds.top;
-    const idealBottom = idealTop + totalContentHeight;
-    const pinnedTop = Math.max(panelViewportPadding, idealTop);
-    const pinnedBottom = Math.min(viewportHeight - panelViewportPadding, idealBottom);
-    const pinnedHeight = Math.max(120, pinnedBottom - pinnedTop);
-
-    if (firstPlacement) {
-      pinnedTopRef.current = pinnedTop;
-      pinnedHeightRef.current = pinnedHeight;
-    }
-
-    let top = pinnedTopRef.current;
-    let height = pinnedHeightRef.current;
-
-    if (grownRef.current) {
-      const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
-      height += canGrowDown;
-      const canGrowUp = Math.max(0, top - panelViewportPadding);
-      top -= canGrowUp;
-      height += canGrowUp;
-    }
-
-    if (growUpOnlyRef.current) {
-      const canGrowUp = Math.max(0, top - panelViewportPadding);
-      top -= canGrowUp;
-      height += canGrowUp;
-    }
-    if (growDownOnlyRef.current) {
-      const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
-      height += canGrowDown;
-    }
-
-    height = Math.min(height, viewportHeight - top - panelViewportPadding);
-    height = Math.min(height, totalContentHeight);
-    height = Math.max(120, height);
-
-    // When grown but content is shorter than viewport: anchor dropdown to bottom (gap above), dropup to top (gap below)
-    const availableViewport = viewportHeight - 2 * panelViewportPadding;
-    if (
-      (grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current) &&
-      height < availableViewport
-    ) {
-      if (panel.placement.startsWith("top")) {
-        top = panelViewportPadding;
-      } else {
-        top = viewportHeight - panelViewportPadding - height;
-      }
     }
-
-    const cachedOverlayStyle = overlayStyle.current;
-
+    const placed = onFieldRef.current;
+    const top = placed.top - borderTopWidth;
+    const height = placed.height + totalBorderWidth;
     if (
-      !cachedOverlayStyle ||
-      cachedOverlayStyle.top !== top - originTop ||
-      cachedOverlayStyle.maxHeight !== height
+      !overlayStyle.current ||
+      overlayStyle.current.top !== top - originTop ||
+      overlayStyle.current.maxHeight !== height
     ) {
       dropdownElement.style.top = `${top - originTop}px`;
       dropdownElement.style.maxHeight = `${height}px`;
@@ -898,63 +775,24 @@ function FloatingSelectCore({
       overlayStyle.current = { top: top - originTop, maxHeight: height };
       void dropdownElement.offsetHeight;
     }
-
-    if (
-      isInitial &&
-      selectedIndex >= 0 &&
-      !grownRef.current &&
-      !growUpOnlyRef.current &&
-      !growDownOnlyRef.current
-    ) {
-      // The selected row starts in view, just under the sticky echo row.
-      const rowBottom = selectedItem.offsetTop + selectedItem.offsetHeight;
-      if (rowBottom > dropdownElement.clientHeight) {
-        const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
-        programmaticScrollRef.current++;
-        dropdownElement.scrollTop = Math.max(
-          0,
-          Math.min(selectedItem.offsetTop - echoHeight, maxScrollTop),
-        );
-      }
+    if (Math.abs(dropdownElement.scrollTop - placed.scrollTop) >= 0.5) {
+      programmaticScrollRef.current++;
+      dropdownElement.scrollTop = placed.scrollTop;
     }
-
-    // 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;
     if (isInitial) dropdownElement.style.transition = panel.panelTransition;
     requestAnimationFrame(() => {
-      if (dropdownElement) {
-        panel.updateArrows(dropdownElement);
-        requestAnimationFrame(() => {
-          if (dropdownElement) panel.updateArrows(dropdownElement);
-        });
-      }
+      if (dropdownElement) panel.updateArrows(dropdownElement);
     });
   }, [
     selectedIndex,
     panel.refs,
     panel.updateArrows,
-    panel.placement,
     panel.panelTransition,
     options.length,
     beside,
-    coverScroll,
-    panelWidth,
+    arrowBand,
   ]);
 
   repositionRef.current = repositionOverlay;
@@ -1156,23 +994,10 @@ function FloatingSelectCore({
         return;
       }
       const arrowDir = panel.arrowScrollDirRef.current;
-      if (arrowDir) {
-        panel.arrowScrollDirRef.current = null;
-        lastScrollTopRef.current = el.scrollTop;
-        if (arrowDir === "down") {
-          growUpOnlyRef.current = true;
-        } else {
-          growDownOnlyRef.current = true;
-        }
-        repositionOverlay();
-        return;
-      }
+      if (arrowDir) panel.arrowScrollDirRef.current = null;
       const delta = el.scrollTop - lastScrollTopRef.current;
       lastScrollTopRef.current = el.scrollTop;
-      if (delta !== 0) {
-        grownRef.current = true;
-        repositionOverlay();
-      }
+      if (delta !== 0) repositionOverlay();
     },
     [panel.updateArrows, repositionOverlay],
   );
@@ -1290,10 +1115,7 @@ function FloatingSelectCore({
                   opacity: panel.visible ? 1 : 0,
                   transform: panel.visible ? "scale(1)" : "scale(0.96)",
                   transition: panel.panelTransition,
-                  transformOrigin:
-                    (coverScroll && growsUpRef.current) || panel.placement.startsWith("top")
-                      ? "bottom left"
-                      : "top left",
+                  transformOrigin: opensUpRef.current ? "bottom left" : "top left",
                   ...dragProps.style,
                 },
                 onPointerDown: dragProps.onPointerDown,
@@ -1336,22 +1158,12 @@ function FloatingSelectCore({
               paddingVertical={0}
               paddingBottom={panel.coverCornerInset || 0}
             >
-              {echoed ? (
-                <TriggerEchoRow
-                  sourceRef={panel.triggerRef}
-                  source={selectedOption?.label ?? placeholder}
-                  onPress={() => setOpen(false)}
-                  presentational
-                />
-              ) : null}
               <ScrollArrow
                 direction="up"
                 scrollRef={panel.refs.floating}
                 visible={panel.arrowUp}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
-                topOffset={
-                  echoed ? (panel.triggerRef.current?.getBoundingClientRect().height ?? 0) : 0
-                }
+                band={arrowBand}
               />
               {groupLabel && (
                 <GroupHeader color={textColor} paddingHorizontal={knobProps.panelPadding.padding}>
@@ -1402,6 +1214,7 @@ function FloatingSelectCore({
                 scrollRef={panel.refs.floating}
                 visible={panel.arrowDown}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
+                band={arrowBand}
               />
             </YStack>
           </FloatingFocusManager>
@@ -1434,6 +1247,7 @@ function NativeSelectCore({
   const insideOverlay = useInsideOverlay();
   const compactFace = pickerCompactFace(options.length);
   const asMenu = resolveCompactFace(compactFace, insideOverlay) === "menu";
+  const beside = asMenu && insideOverlay && opensBesideTrigger(options.length);
   const hydrationTouch = useTouchSurface();
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
@@ -1497,6 +1311,13 @@ function NativeSelectCore({
     }
   }, [open, selectedIndex]);
 
+  // LC-112 (FZ-8655): the native pop-up puts this row on the field, measured
+  // fresh each open.
+  const [onFieldRow, setOnFieldRow] = useState<{ top: number; height: number } | null>(null);
+  useEffect(() => {
+    if (!open) setOnFieldRow(null);
+  }, [open]);
+
   const handleSelect = useCallback(
     (optionValue: string) => {
       if (multiple) {
@@ -1629,7 +1450,7 @@ function NativeSelectCore({
             >
               {option.label}
             </Text>
-            {selected && <CheckIcon size={14} weight="bold" color={markColor} />}
+            {selected && <CheckGlyph />}
           </View>
         );
         if (isWeb) return row;
@@ -1641,6 +1462,12 @@ function NativeSelectCore({
             accessibilityRole="button"
             accessibilityLabel={option.label}
             accessibilityState={{ selected }}
+            onLayout={
+              i === Math.max(selectedIndex, 0)
+                ? ({ nativeEvent: { layout } }) =>
+                    setOnFieldRow({ top: layout.y, height: layout.height })
+                : undefined
+            }
           >
             {row}
           </RNPressable>
@@ -1742,9 +1569,11 @@ function NativeSelectCore({
       // sheet at page level and opens as a menu inside another overlay (FZ-7830).
       compactFace={compactFace}
       panelWidth={panelWidth}
-      {...(asMenu && insideOverlay && opensBesideTrigger(options.length)
+      {...(beside
         ? { anchorMode: "attach" as const, triggerEcho: false }
-        : null)}
+        : isWeb || displayOptions.length === 0
+          ? null
+          : { popUp: { row: onFieldRow } })}
       triggerA11y={{
         label: ariaLabel ?? fieldA11y?.label,
         value: triggerValueText,

package/src/fields/nativeDateTime/OsDateTimeSheet.tsx

@@ -21,7 +21,7 @@ import {
 } from "react-native";
 import { platform } from "@multiplatform.one/platform";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import { useResolvedKnobs, Text } from "@multiplatform.one/theme";
+import { useResolvedKnobs, Text, overlayScrim } from "@multiplatform.one/theme";
 import { View, XStack, YStack, useTheme, useThemeName } from "tamagui";
 import { ArrowRightIcon } from "@phosphor-icons/react";
 import { IconButton } from "../../Button";
@@ -159,7 +159,7 @@ export function OsDateTimeSheet({
             right={0}
             bottom={0}
             left={0}
-            backgroundColor="$shadow6"
+            backgroundColor={overlayScrim}
           />
           <YStack
             testID="os-date-time-sheet-unavailable"
@@ -205,7 +205,7 @@ export function OsDateTimeSheet({
       */}
       <RNView style={[styles.modalOverlay, { paddingBottom: keyboardInset }]}>
         <Pressable style={StyleSheet.absoluteFill} onPress={onCancel}>
-          <View pointerEvents="none" flex={1} backgroundColor="$shadow6" />
+          <View pointerEvents="none" flex={1} backgroundColor={overlayScrim} />
         </Pressable>
         <Pressable onPress={(e) => e.stopPropagation()}>
           <YStack

package/src/index.ts

@@ -310,6 +310,8 @@ export { PanelHeader } from "./FloatingPanel/PanelHeader";
 export { PanelPortal } from "./FloatingPanel/PanelPortal";
 export type { PanelPortalProps } from "./FloatingPanel/PanelPortal";
 export { containsAcrossPanels } from "./shared/panelPortal";
+export { CheckGlyph } from "./shared/CheckGlyph";
+export { useInPanelSheet } from "./FloatingPanel/echoContext";
 export type {
   FloatingPanelProps,
   PanelWidthMode,
@@ -317,7 +319,6 @@ export type {
   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/CheckGlyph.tsx

@@ -0,0 +1,12 @@
+import { CheckIcon } from "@phosphor-icons/react";
+import { menuRowCheckGlyph, type MenuRowGlyph, useMenuRowCheckInk } from "@multiplatform.one/theme";
+
+/**
+ * The check on a checked menu or picker row (LC-262, FZ-8557): the theme's
+ * `menuRowCheckGlyph` recipe in the check ink. A row with an icon passes
+ * `menuRowIconGlyph`, so the check takes the icons' stroke (FZ-8557 r3). Components draws the same glyph through its own twin, and a spec keeps the two equal.
+ */
+export function CheckGlyph({ glyph = menuRowCheckGlyph }: { glyph?: MenuRowGlyph }) {
+  const ink = useMenuRowCheckInk();
+  return <CheckIcon size={glyph.size} weight={glyph.weight} color={ink} />;
+}

package/src/shared/checkedOnField.ts

@@ -0,0 +1,116 @@
+export const scrollArrowThreshold = 8;
+
+/**
+ * A scroll arrow's band: half a menu row, opaque in the panel's own fill.
+ * Rows scroll under it, and a row cut at a clipped edge hides under it
+ * (FZ-8557, LC-112).
+ */
+export function scrollArrowBand(rowHeight: number): number {
+  return Math.round(rowHeight / 2);
+}
+
+export interface ArrowBandFit {
+  /** The padding box's top edge, in viewport pixels. */
+  top: number;
+  /** The padding box's visible height. */
+  height: number;
+  scrollTop: number;
+}
+
+export interface CheckedOnFieldInput {
+  /** The field's edges, in viewport pixels: the checked row centres on them. */
+  fieldTop: number;
+  fieldBottom: number;
+  /** The checked row's offset in the scroll content, and its height. */
+  rowTop: number;
+  rowHeight: number;
+  /** The scroll content's full height. */
+  contentHeight: number;
+  /** The safe edges the panel's padding box may reach. */
+  boundsTop: number;
+  boundsBottom: number;
+  band: number;
+  threshold?: number;
+}
+
+const clamp = (value: number, low: number, high: number) => Math.max(low, Math.min(high, value));
+
+/**
+ * A Select covering its field opens the way a macOS pop-up does: its checked
+ * row sits on the field, centred on it, so the value stays where the closed
+ * field drew it (FZ-8557, LC-112).
+ *
+ * A list that fits between the safe edges shows every row with no scrolling,
+ * slid the least distance that keeps it on screen. A taller list keeps the
+ * checked row on the field and clips at the safe edges: a clipped edge sits on
+ * the safe edge, and the rows past it scroll under the opaque arrow band there.
+ * The checked row is never under a band; where one would cover it, the panel
+ * or the list shifts by that much. Returns the padding box.
+ */
+export function placeCheckedOnField(input: CheckedOnFieldInput): ArrowBandFit {
+  const { fieldTop, fieldBottom, rowTop, rowHeight, contentHeight, boundsTop, boundsBottom, band } =
+    input;
+  const threshold = input.threshold ?? scrollArrowThreshold;
+  const target = clamp(
+    (fieldTop + fieldBottom) / 2 - rowHeight / 2,
+    boundsTop,
+    boundsBottom - rowHeight,
+  );
+  if (contentHeight <= boundsBottom - boundsTop) {
+    const top = clamp(target - rowTop, boundsTop, boundsBottom - contentHeight);
+    return { top, height: contentHeight, scrollTop: 0 };
+  }
+  let top = target - rowTop;
+  let scrollTop = 0;
+  if (top < boundsTop) {
+    scrollTop = boundsTop - top;
+    top = boundsTop;
+  }
+  const end = () => top - scrollTop + contentHeight;
+  const bottom = () => Math.min(boundsBottom, end());
+  const checkedTop = () => top - scrollTop + rowTop;
+  // Clear of the down band: the panel's top lifts first, then the list scrolls.
+  if (end() - bottom() > threshold) {
+    const short = checkedTop() + rowHeight - (bottom() - band);
+    if (short > 0) {
+      const lift = scrollTop > 0 ? 0 : Math.min(short, top - boundsTop);
+      top -= lift;
+      scrollTop += short - lift;
+    }
+  }
+  // Clear of the up band: the list drops, never past its start.
+  if (scrollTop > threshold) {
+    const short = top + band - checkedTop();
+    if (short > 0) scrollTop = Math.max(0, scrollTop - short);
+  }
+  // A scroll too small to show an arrow is the panel's own offset instead.
+  if (scrollTop > 0 && scrollTop <= threshold) {
+    top += scrollTop;
+    scrollTop = 0;
+  }
+  return { top, height: bottom() - top, scrollTop };
+}
+
+/**
+ * A scrolled list whose panel stops short of a safe edge grows toward it, the
+ * way a macOS menu does: the edge follows the rows until it meets the safe
+ * edge, and the rows stay where the scroll put them (FZ-8463, FZ-8557). The
+ * panel never shrinks. Takes and returns the padding box.
+ */
+export function growOnScroll({
+  top,
+  height,
+  scrollTop,
+  contentHeight,
+  boundsTop,
+  boundsBottom,
+}: ArrowBandFit & {
+  contentHeight: number;
+  boundsTop: number;
+  boundsBottom: number;
+}): ArrowBandFit {
+  const origin = top - scrollTop;
+  const nextTop = Math.min(top, Math.max(boundsTop, origin));
+  const nextBottom = Math.max(top + height, Math.min(boundsBottom, origin + contentHeight));
+  return { top: nextTop, height: nextBottom - nextTop, scrollTop: nextTop - origin };
+}