@multiplatform.one/forms 7.77.0 → 7.77.2

package/src/fields/Select/Select.stories.tsx

@@ -539,3 +539,77 @@ export const PhoneLists: Story = {
     </YStack>
   ),
 };
+
+const cityOptions: SelectOption[] = [
+  "Honolulu",
+  "Anchorage",
+  "Los Angeles",
+  "Denver",
+  "Chicago",
+  "New York",
+  "Halifax",
+  "St. John's",
+  "São Paulo",
+  "Buenos Aires",
+  "Nuuk",
+  "Azores",
+  "Reykjavik",
+  "London",
+  "Lisbon",
+  "Paris",
+  "Berlin",
+  "Rome",
+  "Helsinki",
+  "Athens",
+  "Cairo",
+  "Istanbul",
+  "Moscow",
+  "Dubai",
+  "Karachi",
+  "Kolkata",
+  "Kathmandu",
+  "Dhaka",
+  "Bangkok",
+  "Jakarta",
+  "Singapore",
+  "Shanghai",
+  "Seoul",
+  "Tokyo",
+  "Adelaide",
+  "Sydney",
+  "Nouméa",
+  "Auckland",
+  "Chatham",
+  "Kiritimati",
+].map((label) => ({ value: label.toLowerCase(), label }));
+
+/**
+ * LC-112 cover and scroll (FZ-8463, Clay's pick on rv_485ae88062c1a2eb): a
+ * list that doesn't fit below its field covers the field and grows toward
+ * the side with more room, to the safe screen edge, then scrolls with the
+ * checked row on the field. `spaceAbove` moves the field: 880 sits it low on
+ * an iPad, 0 high, 440 mid. `count` trims the list (seven or fewer opens a
+ * menu at phone width, where a longer one opens its sheet).
+ */
+export const LowOnPage: StoryObj<{ spaceAbove: number; count: number }> = {
+  args: { spaceAbove: 880, count: cityOptions.length },
+  argTypes: {
+    spaceAbove: { control: { type: "number", min: 0, step: 40 } },
+    count: { control: { type: "number", min: 1, max: cityOptions.length } },
+  },
+  render: ({ spaceAbove, count }) => {
+    const options = cityOptions.slice(0, count);
+    return (
+      <YStack padding="$4" gap="$4">
+        <Paragraph>Account settings</Paragraph>
+        <Select label="Role" options={roleOptions} defaultValue={roleOptions[0].value} />
+        <YStack height={spaceAbove} />
+        <Select
+          label="Time zone"
+          options={options}
+          defaultValue={options[Math.floor(options.length / 2)]?.value}
+        />
+      </YStack>
+    );
+  },
+};

package/src/fields/Select/index.tsx

@@ -630,10 +630,14 @@ 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);
+  // 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;
 
   const repositionRef = useRef<(() => void) | null>(null);
 
@@ -653,7 +657,10 @@ function FloatingSelectCore({
       growDownOnlyRef.current = false;
       lastScrollTopRef.current = 0;
       programmaticScrollRef.current = 0;
-      dropUpRef.current = false;
+      coverScrollRef.current = false;
+      growsUpRef.current = false;
+      coverTrimRef.current = 0;
+      setCoverScroll(false);
     },
     panelWidth,
   });
@@ -740,21 +747,97 @@ function FloatingSelectCore({
     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 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).
+    // 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 roomBelow = viewportHeight - panelViewportPadding - triggerBounds.top;
-    const roomAbove = triggerBounds.bottom - panelViewportPadding;
-    if (firstPlacement) {
-      dropUpRef.current = totalContentHeight > roomBelow && roomAbove > roomBelow;
-      setDropUp(dropUpRef.current);
+    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);
     }
-    const idealTop = dropUpRef.current
-      ? triggerBounds.bottom - totalContentHeight
-      : triggerBounds.top;
-    const idealBottom = dropUpRef.current ? triggerBounds.bottom : idealTop + totalContentHeight;
+
+    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);
+      });
+      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);
@@ -768,10 +851,7 @@ function FloatingSelectCore({
     let height = pinnedHeightRef.current;
 
     if (grownRef.current) {
-      // 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));
+      const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
       height += canGrowDown;
       const canGrowUp = Math.max(0, top - panelViewportPadding);
       top -= canGrowUp;
@@ -783,7 +863,7 @@ function FloatingSelectCore({
       top -= canGrowUp;
       height += canGrowUp;
     }
-    if (growDownOnlyRef.current && !dropUpRef.current) {
+    if (growDownOnlyRef.current) {
       const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
       height += canGrowDown;
     }
@@ -826,18 +906,9 @@ function FloatingSelectCore({
       !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;
+      // The selected row starts in view, just under the sticky echo row.
       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 = Math.min(wanted, maxScrollTop);
-        }
-      } else if (rowBottom > dropdownElement.clientHeight) {
+      if (rowBottom > dropdownElement.clientHeight) {
         const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
         programmaticScrollRef.current++;
         dropdownElement.scrollTop = Math.max(
@@ -882,6 +953,8 @@ function FloatingSelectCore({
     panel.panelTransition,
     options.length,
     beside,
+    coverScroll,
+    panelWidth,
   ]);
 
   repositionRef.current = repositionOverlay;
@@ -1218,7 +1291,9 @@ function FloatingSelectCore({
                   transform: panel.visible ? "scale(1)" : "scale(0.96)",
                   transition: panel.panelTransition,
                   transformOrigin:
-                    dropUp || panel.placement.startsWith("top") ? "bottom left" : "top left",
+                    (coverScroll && growsUpRef.current) || panel.placement.startsWith("top")
+                      ? "bottom left"
+                      : "top left",
                   ...dragProps.style,
                 },
                 onPointerDown: dragProps.onPointerDown,
@@ -1261,24 +1336,21 @@ function FloatingSelectCore({
               paddingVertical={0}
               paddingBottom={panel.coverCornerInset || 0}
             >
-              {!beside && (
+              {echoed ? (
                 <TriggerEchoRow
                   sourceRef={panel.triggerRef}
                   source={selectedOption?.label ?? placeholder}
                   onPress={() => setOpen(false)}
                   presentational
-                  edge={dropUp ? "bottom" : "top"}
                 />
-              )}
+              ) : null}
               <ScrollArrow
                 direction="up"
                 scrollRef={panel.refs.floating}
                 visible={panel.arrowUp}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
                 topOffset={
-                  dropUp || beside
-                    ? 0
-                    : (panel.triggerRef.current?.getBoundingClientRect().height ?? 0)
+                  echoed ? (panel.triggerRef.current?.getBoundingClientRect().height ?? 0) : 0
                 }
               />
               {groupLabel && (
@@ -1330,9 +1402,6 @@ function FloatingSelectCore({
                 scrollRef={panel.refs.floating}
                 visible={panel.arrowDown}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
-                bottomOffset={
-                  dropUp ? (panel.triggerRef.current?.getBoundingClientRect().height ?? 0) : 0
-                }
               />
             </YStack>
           </FloatingFocusManager>

package/src/fields/nativeDateTime/OsDateTimeSheet.countdown.native.spec.tsx

@@ -0,0 +1,121 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { OsDateTimeSheet } from "./OsDateTimeSheet";
+import { DATE_PICKER_WHEEL_HEIGHT } from "./sheetKeyboard";
+
+const os = vi.hoisted(() => ({ name: "ios" as "ios" | "android" }));
+const seen = vi.hoisted(() => ({ props: [] as Record<string, unknown>[] }));
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+}));
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => {
+  const actual = (await importOriginal()) as Record<string, unknown>;
+  const real = actual.platform as Record<string, unknown>;
+  return {
+    ...actual,
+    platform: new Proxy(
+      {},
+      {
+        get(_target, prop) {
+          if (prop === "isIos") return os.name === "ios";
+          if (prop === "isAndroid") return os.name === "android";
+          return real[prop as string];
+        },
+      },
+    ),
+  };
+});
+
+vi.mock("./dateTimePickerLoader", () => ({
+  loadDateTimePicker: () => (props: Record<string, unknown>) => {
+    seen.props.push(props);
+    return <div data-testid="os-picker" />;
+  },
+}));
+
+const at = (h: number, m: number) => {
+  const d = new Date(2026, 9, 29);
+  d.setHours(h, m, 0, 0);
+  return d;
+};
+
+describe("OsDateTimeSheet countdown (FZ-8111)", () => {
+  it("opens the iOS countdown-timer wheel in the app's scheme", () => {
+    os.name = "ios";
+    seen.props = [];
+    renderWithProviders(
+      <OsDateTimeSheet
+        open
+        mode="countdown"
+        value={at(1, 2)}
+        onCancel={vi.fn()}
+        onConfirm={vi.fn()}
+      />,
+    );
+    const props = seen.props.at(-1)!;
+    expect(props.mode).toBe("countdown");
+    expect(props.display).toBe("spinner");
+    expect(props.themeVariant).toBe("light");
+    expect((props.value as Date).getHours()).toBe(1);
+    expect((props.value as Date).getMinutes()).toBe(2);
+    expect((props.style as { height: number }).height).toBe(DATE_PICKER_WHEEL_HEIGHT);
+  });
+
+  it("confirms the wheel's hours and minutes", () => {
+    os.name = "ios";
+    seen.props = [];
+    const onConfirm = vi.fn();
+    const onCancel = vi.fn();
+    const result = renderWithProviders(
+      <OsDateTimeSheet
+        open
+        mode="countdown"
+        value={at(1, 2)}
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+      />,
+    );
+    fireEvent.click(result.getByRole("button", { name: "Done" }));
+    expect(onConfirm).toHaveBeenCalledOnce();
+    const picked = onConfirm.mock.calls[0]![0] as Date;
+    expect([picked.getHours(), picked.getMinutes()]).toEqual([1, 2]);
+    fireEvent.click(result.getByRole("button", { name: "Cancel" }));
+    expect(onCancel).toHaveBeenCalledOnce();
+  });
+
+  it("opens Android's 24-hour spinner, never the AM/PM clock dial", () => {
+    os.name = "android";
+    seen.props = [];
+    renderWithProviders(
+      <OsDateTimeSheet
+        open
+        mode="countdown"
+        value={at(2, 30)}
+        onCancel={vi.fn()}
+        onConfirm={vi.fn()}
+      />,
+    );
+    const props = seen.props.at(-1)!;
+    expect(props.mode).toBe("time");
+    expect(props.display).toBe("spinner");
+    expect(props.is24Hour).toBe(true);
+    os.name = "ios";
+  });
+
+  it("leaves the Android date dialog as it was", () => {
+    os.name = "android";
+    seen.props = [];
+    renderWithProviders(
+      <OsDateTimeSheet open mode="date" value={at(0, 0)} onCancel={vi.fn()} onConfirm={vi.fn()} />,
+    );
+    const props = seen.props.at(-1)!;
+    expect(props.mode).toBe("date");
+    expect(props.display).toBe("default");
+    expect(props.is24Hour).toBeUndefined();
+    os.name = "ios";
+  });
+});

package/src/fields/nativeDateTime/OsDateTimeSheet.spec.ts

@@ -9,4 +9,8 @@ describe("osDateTimeIosDisplay", () => {
   it("keeps the time wheel", () => {
     expect(osDateTimeIosDisplay("time")).toBe("spinner");
   });
+
+  it("keeps the wheel for a countdown (FZ-8111)", () => {
+    expect(osDateTimeIosDisplay("countdown")).toBe("spinner");
+  });
 });

package/src/fields/nativeDateTime/OsDateTimeSheet.tsx

@@ -33,7 +33,7 @@ import { osDateTimeIosDisplay } from "./osDateTimeIosDisplay";
 import { datePickerHeight, dateSheetBottomPadding, dateSheetMaxHeight } from "./sheetKeyboard";
 import { useKeyboardInset } from "../../shared/useKeyboardInset";
 
-export type OsDateTimeMode = "date" | "time" | "datetime";
+export type OsDateTimeMode = "date" | "time" | "datetime" | "countdown";
 
 export type OsDateTimeSheetProps = {
   open: boolean;
@@ -74,8 +74,12 @@ export function OsDateTimeSheet({
   const maxHeight = dateSheetMaxHeight(windowHeight, keyboardInset, topInset);
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [temp, setTemp] = useState(value);
-  const pickerMode: "date" | "time" =
-    mode === "time" || (mode === "datetime" && showTimePicker) ? "time" : "date";
+  const pickerMode: "date" | "time" | "countdown" =
+    mode === "countdown"
+      ? "countdown"
+      : mode === "time" || (mode === "datetime" && showTimePicker)
+        ? "time"
+        : "date";
   const iosDisplay = osDateTimeIosDisplay(pickerMode);
 
   const reset = useCallback(() => {
@@ -182,11 +186,12 @@ export function OsDateTimeSheet({
     return (
       <DateTimePicker
         value={temp}
-        mode={pickerMode}
-        display="default"
+        mode={pickerMode === "countdown" ? "time" : pickerMode}
+        display={pickerMode === "countdown" ? "spinner" : "default"}
+        is24Hour={pickerMode === "countdown" ? true : undefined}
         onChange={handleAndroidChange}
-        minimumDate={mode !== "time" ? minDate : undefined}
-        maximumDate={mode !== "time" ? maxDate : undefined}
+        minimumDate={mode === "date" || mode === "datetime" ? minDate : undefined}
+        maximumDate={mode === "date" || mode === "datetime" ? maxDate : undefined}
       />
     );
   }
@@ -242,8 +247,8 @@ export function OsDateTimeSheet({
                 themeVariant={themeVariant}
                 accentColor={accentColor}
                 onChange={handleIOSChange}
-                minimumDate={mode !== "time" ? minDate : undefined}
-                maximumDate={mode !== "time" ? maxDate : undefined}
+                minimumDate={mode === "date" || mode === "datetime" ? minDate : undefined}
+                maximumDate={mode === "date" || mode === "datetime" ? maxDate : undefined}
                 style={{ width: "100%", height: datePickerHeight(pickerMode, maxHeight) }}
               />
             </YStack>

package/src/fields/nativeDateTime/osDateTimeIosDisplay.ts

@@ -1,4 +1,4 @@
-/** iOS date is the inline calendar; time keeps the wheel users expect. */
-export function osDateTimeIosDisplay(mode: "date" | "time"): "inline" | "spinner" {
-  return mode === "time" ? "spinner" : "inline";
+/** iOS date is the inline calendar; time and countdown keep the wheel users expect. */
+export function osDateTimeIosDisplay(mode: "date" | "time" | "countdown"): "inline" | "spinner" {
+  return mode === "date" ? "inline" : "spinner";
 }

package/src/fields/nativeDateTime/sheetKeyboard.spec.ts

@@ -10,6 +10,7 @@ import {
   dateSheetBottomPadding,
   dateSheetMaxHeight,
   DATE_PICKER_CALENDAR_HEIGHT,
+  DATE_PICKER_WHEEL_HEIGHT,
   DATE_SHEET_BACKDROP_STRIP,
   DATE_SHEET_MIN_HEIGHT,
 } from "./sheetKeyboard";
@@ -49,6 +50,11 @@ describe("datePickerHeight", () => {
     expect(height).toBeLessThan(DATE_PICKER_CALENDAR_HEIGHT);
     expect(height).toBeLessThanOrEqual(maxHeight);
   });
+
+  it("gives the countdown the wheel height, not the calendar's (FZ-8111)", () => {
+    expect(datePickerHeight("countdown", 700)).toBe(DATE_PICKER_WHEEL_HEIGHT);
+    expect(datePickerHeight("countdown", 700)).toBe(datePickerHeight("time", 700));
+  });
 });
 
 describe("dateSheetBottomPadding", () => {

package/src/fields/nativeDateTime/sheetKeyboard.ts

@@ -39,7 +39,7 @@ export function dateSheetBottomPadding(keyboardInset: number, isIos: boolean): n
   return isIos ? 24 : 16;
 }
 
-export function datePickerHeight(mode: "date" | "time", maxHeight: number): number {
-  const preferred = mode === "time" ? DATE_PICKER_WHEEL_HEIGHT : DATE_PICKER_CALENDAR_HEIGHT;
+export function datePickerHeight(mode: "date" | "time" | "countdown", maxHeight: number): number {
+  const preferred = mode === "date" ? DATE_PICKER_CALENDAR_HEIGHT : DATE_PICKER_WHEEL_HEIGHT;
   return Math.min(preferred, Math.max(minPickerHeight, maxHeight - DATE_SHEET_CHROME));
 }

package/src/shared/floatingList.tsx

@@ -34,7 +34,6 @@ export function ScrollArrow({
   visible,
   arrowScrollDirRef,
   topOffset = 0,
-  bottomOffset = 0,
 }: {
   direction: "up" | "down";
   scrollRef: RefObject<HTMLElement | null>;
@@ -42,8 +41,6 @@ export function ScrollArrow({
   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);
@@ -159,7 +156,7 @@ export function ScrollArrow({
     <View
       position="sticky"
       top={isUp ? topOffset : undefined}
-      bottom={isUp ? undefined : bottomOffset}
+      bottom={isUp ? undefined : 0}
       height={0}
       zIndex={2}
     >

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

@@ -1 +1 @@
-{"version":3,"file":"IconButtonGroup.d.ts","sourceRoot":"","sources":["../../src/Button/IconButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAMvE;;;GAGG;AACH,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAE7C,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CA0GjF"}
+{"version":3,"file":"IconButtonGroup.d.ts","sourceRoot":"","sources":["../../src/Button/IconButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAWvE;;;GAGG;AACH,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAQ7C,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CAkIjF"}

package/types/Button/circleGlyph.d.ts

@@ -4,4 +4,16 @@
  * ratio, never a small glyph lost in a big plate.
  */
 export declare const ICON_BUTTON_CIRCLE_GLYPH_RATIO = 0.58;
+/**
+ * LC-176: Phosphor bold's stem is 0.12 of its ink, an SF Symbols bold plus's
+ * 0.18 (measured at 17 and 24pt). An outline stroke this wide, in the 256-unit
+ * grid, brings a bold glyph to SF semibold-bold (0.154); a wider one closes
+ * Phosphor bold's 16-unit counters (the trash lid, copy's overlap).
+ */
+export declare const GLYPH_BOLD_STROKE_UNITS = 8;
+export declare function boldStroke(weight: "regular" | "bold", color?: string): {
+    stroke: string;
+    strokeWidth: number;
+    strokeLinejoin: "round";
+} | undefined;
 //# sourceMappingURL=circleGlyph.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"circleGlyph.d.ts","sourceRoot":"","sources":["../../src/Button/circleGlyph.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,OAAO,CAAC"}
+{"version":3,"file":"circleGlyph.d.ts","sourceRoot":"","sources":["../../src/Button/circleGlyph.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,OAAO,CAAC;AAEnD;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,EAAE,KAAK,SAAiB;;;;cAQ5E"}

package/types/Button/iconButtonGroupContext.d.ts

@@ -14,4 +14,23 @@ export declare function useIconButtonGroupGround(): IconButtonGroupGround;
  */
 export declare const IconButtonGroupRegistry: import("react").Context<(() => () => void) | null>;
 export declare function useIconButtonGroupMember(iconOnly: boolean): void;
+/**
+ * The window frame and corner radius of the plate an `IconButtonGroup` paints
+ * (a native Liquid Glass capsule). Native has no DOM to walk, so a panel
+ * opening from a grouped button reads the plate it covers here (LC-112,
+ * FZ-8550).
+ */
+export interface IconButtonGroupPlate {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+}
+export interface IconButtonGroupSurface {
+    /** Answers once: the plate, or null when it cannot be measured. */
+    measure(callback: (plate: IconButtonGroupPlate | null) => void): void;
+}
+export declare const IconButtonGroupSurfaceContext: import("react").Context<IconButtonGroupSurface | null>;
+export declare function useIconButtonGroupSurface(): IconButtonGroupSurface | null;
 //# sourceMappingURL=iconButtonGroupContext.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"iconButtonGroupContext.d.ts","sourceRoot":"","sources":["../../src/Button/iconButtonGroupContext.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAE7D,eAAO,MAAM,sBAAsB,gDAA6C,CAAC;AAEjF,wBAAgB,wBAAwB,IAAI,qBAAqB,CAEhE;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,iCAAwB,MAAM,IAAI,SAAe,CAAC;AAEtF,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAMhE"}
+{"version":3,"file":"iconButtonGroupContext.d.ts","sourceRoot":"","sources":["../../src/Button/iconButtonGroupContext.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAE7D,eAAO,MAAM,sBAAsB,gDAA6C,CAAC;AAEjF,wBAAgB,wBAAwB,IAAI,qBAAqB,CAEhE;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,iCAAwB,MAAM,IAAI,SAAe,CAAC;AAEtF,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAMhE;AAED;;;;;GAKG;AACH,MAAM,WAAW,oBAAoB;IACnC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI,CAAC;CACvE;AAED,eAAO,MAAM,6BAA6B,wDAAqD,CAAC;AAEhG,wBAAgB,yBAAyB,IAAI,sBAAsB,GAAG,IAAI,CAEzE"}

package/types/Button/index.d.ts

@@ -3,8 +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 };
+import { GLYPH_BOLD_STROKE_UNITS, ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "./circleGlyph";
+export { GLYPH_BOLD_STROKE_UNITS, 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
@@ -173,13 +173,6 @@ export declare const ICON_BUTTON_NEUTRAL_GLYPH_PX = 24;
  * target.
  */
 export declare function iconButtonGlyphPx(rowLinePx: number | undefined): number;
-/**
- * LC-176: Phosphor bold's stem is 0.12 of its ink, an SF Symbols bold plus's
- * 0.18 (measured at 17 and 24pt). An outline stroke this wide, in the 256-unit
- * grid, brings a bold glyph to SF semibold-bold (0.154); a wider one closes
- * Phosphor bold's 16-unit counters (the trash lid, copy's overlap).
- */
-export declare const GLYPH_BOLD_STROKE_UNITS = 8;
 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: {