@oxyhq/bloom 0.69.1 → 0.71.0

package/src/__tests__/dropdown-placement.test.ts

@@ -0,0 +1,90 @@
+import {
+  resolveDropdownPlacement,
+  type DropdownPlacementInput,
+} from '../overlay/dropdown-placement';
+
+const VIEWPORT = { width: 1000, height: 500 };
+const GUTTER = 8;
+
+/** A 200x40 trigger at (400, y), the shape the web `Menu` anchors against. */
+function trigger(y: number) {
+  return { top: y, bottom: y + 40, left: 400, right: 600 };
+}
+
+function place(overrides: Partial<DropdownPlacementInput>): { top: number; left: number } {
+  return resolveDropdownPlacement({
+    anchor: trigger(100),
+    size: { width: 180, height: 100 },
+    viewport: VIEWPORT,
+    offset: 6,
+    gutter: GUTTER,
+    align: 'end',
+    ...overrides,
+  });
+}
+
+describe('resolveDropdownPlacement', () => {
+  describe('vertical', () => {
+    it('sits below the anchor when it fits', () => {
+      // Trigger 100..140, surface 100 tall, offset 6 → 146..246, well inside 500.
+      expect(place({}).top).toBe(146);
+    });
+
+    it('flips above the anchor when there is no room below', () => {
+      // Trigger 420..460: below would end at 566, past 500 - 8. Above starts at
+      // 420 - 6 - 100 = 314, which clears the top gutter.
+      expect(place({ anchor: trigger(420) }).top).toBe(314);
+    });
+
+    it('prefers below when BOTH sides fit — flipping is a fallback, not a preference', () => {
+      expect(place({ anchor: trigger(200), size: { width: 180, height: 100 } }).top).toBe(246);
+    });
+
+    it('clamps into the viewport when neither side fits', () => {
+      // 460 tall against a 500 viewport: nothing fits either side of a
+      // mid-screen trigger, so it pins to 500 - 8 - 460 = 32.
+      expect(place({ anchor: trigger(200), size: { width: 180, height: 460 } }).top).toBe(32);
+    });
+
+    it('pins to the top gutter when the surface is taller than the viewport', () => {
+      // Overflowing the BOTTOM keeps the first rows reachable; the opposite
+      // choice would push the surface's start off-screen and strand every row.
+      expect(place({ anchor: trigger(200), size: { width: 180, height: 900 } }).top).toBe(GUTTER);
+    });
+
+    it('treats a zero-area anchor (a right-click point) as its own edge', () => {
+      const point = { top: 300, bottom: 300, left: 900, right: 900 };
+      expect(place({ anchor: point, offset: 0, align: 'start' }).top).toBe(300);
+      // 300 + 250 = 550 > 500 - 8, so it flips to 300 - 250 = 50.
+      expect(
+        place({ anchor: point, offset: 0, align: 'start', size: { width: 180, height: 250 } }).top,
+      ).toBe(50);
+    });
+  });
+
+  describe('horizontal', () => {
+    it("align 'end' lines the surface's right edge up with the anchor's", () => {
+      expect(place({ size: { width: 180, height: 100 } }).left).toBe(420);
+    });
+
+    it("align 'start' lines the surface's left edge up with the anchor's", () => {
+      expect(place({ align: 'start' }).left).toBe(400);
+    });
+
+    it('clamps a surface that would overflow the right edge', () => {
+      const point = { top: 100, bottom: 100, left: 980, right: 980 };
+      // 980 + 180 would reach 1160; pinned to 1000 - 8 - 180.
+      expect(place({ anchor: point, align: 'start' }).left).toBe(812);
+    });
+
+    it('clamps a surface that would overflow the left edge', () => {
+      const narrow = { top: 100, bottom: 140, left: 0, right: 20 };
+      // Right-aligning to x=20 would start at -160.
+      expect(place({ anchor: narrow }).left).toBe(GUTTER);
+    });
+
+    it('pins to the left gutter when the surface is wider than the viewport', () => {
+      expect(place({ size: { width: 1200, height: 100 } }).left).toBe(GUTTER);
+    });
+  });
+});

package/src/__tests__/optional-peer-imports.test.ts

@@ -343,7 +343,7 @@ describe('optional peers are loaded through Metro’s optional-dependency form',
     expect(notOptional).toEqual([]);
   });
 
-  it('declares every package it loads through a require boundary', () => {
+  it('declares every package it loads at runtime, by import OR require', () => {
     // The inverse direction, and the one that matters: every other assertion in
     // this file starts from `peerDependenciesMeta` and asks whether the code
     // matches it, so by construction none of them can see a package the manifest
@@ -351,26 +351,45 @@ describe('optional peers are loaded through Metro’s optional-dependency form',
     // for exactly that reason — loaded, degraded correctly, and invisible to a
     // consumer, who had no range to install against and no way to learn the
     // integration existed.
+    //
+    // BOTH vectors are scanned. Checking only `require` would leave the more
+    // common one open: a plain `import` of an undeclared package is the ordinary
+    // way one arrives, it resolves fine as long as some transitive dependency
+    // happens to hoist it into `node_modules`, and it disappears the moment that
+    // unrelated package drops it. Verified by mutation in both directions — a
+    // require-only scan passes an undeclared static import.
     const declared = new Set([
       ...Object.keys(PKG.peerDependencies),
       ...Object.keys(PKG.dependencies ?? {}),
     ]);
 
+    /** `react-dom/client` -> `react-dom`, `@scope/pkg/sub` -> `@scope/pkg`. */
+    function packageOf(specifier: string): string | null {
+      if (specifier.startsWith('.') || specifier.startsWith('/')) return null;
+      const parts = specifier.split('/');
+      return specifier.startsWith('@') ? parts.slice(0, 2).join('/') : (parts[0] as string);
+    }
+
     const undeclared = new Set<string>();
     for (const file of files) {
-      for (const { specifier, line } of requireCalls(parse(file))) {
-        if (specifier === null || specifier.startsWith('.')) continue;
-        const pkg = specifier.startsWith('@')
-          ? specifier.split('/').slice(0, 2).join('/')
-          : (specifier.split('/')[0] as string);
-        if (declared.has(pkg)) continue;
-        if (VARIABLE_REQUIRE_ALLOWED.some((entry) => file.endsWith(entry.file))) continue;
+      const source = parse(file);
+      const relative = file.slice(SRC.length + 1);
+
+      const check = (specifier: string | null, line: number, verb: string): void => {
+        // A non-literal specifier names no package to check; the shape rule for
+        // those is the separate `VARIABLE_REQUIRE_ALLOWED` scan below.
+        if (specifier === null) return;
+        const pkg = packageOf(specifier);
+        if (pkg === null || declared.has(pkg)) return;
         undeclared.add(
-          `${file.slice(SRC.length + 1)}:${line}  requires '${pkg}', which appears in neither ` +
-            'dependencies nor peerDependencies — a consumer cannot know the integration exists ' +
-            'or which versions satisfy it',
+          `${relative}:${line}  ${verb} '${pkg}', which appears in neither dependencies nor ` +
+            'peerDependencies — a consumer cannot know the integration exists or which ' +
+            'versions satisfy it',
         );
-      }
+      };
+
+      for (const { specifier, line } of requireCalls(source)) check(specifier, line, 'requires');
+      for (const { specifier, line } of valueImportSpecifiers(source)) check(specifier, line, 'imports');
     }
 
     expect([...undeclared].sort()).toEqual([]);

package/src/context-menu/index.web.tsx

@@ -9,6 +9,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -22,6 +23,10 @@ import { Portal } from '../portal/index.web';
 import { useInteractionState } from '../hooks/useInteractionState';
 import { createOverlayZIndex } from '../styles/z-index';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import {
+  resolveDropdownPlacement,
+  type DropdownPlacement,
+} from '../overlay/dropdown-placement';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { ItemCtx, useItemContext } from './context';
 import type {
@@ -36,6 +41,7 @@ import type {
 } from './types';
 
 const contextMenuZIndex = createOverlayZIndex();
+const VIEWPORT_GUTTER = 8;
 
 // ---------------------------------------------------------------------------
 // Web-specific context (extends base with position)
@@ -156,6 +162,38 @@ export function ContextMenuContent({ children, style }: ContextMenuContentProps)
   const ctx = useWebContextMenuContext();
   const theme = useTheme();
   const { isOpen, close, position } = ctx;
+  // The mounted menu node, as STATE rather than a bare ref: placement has to
+  // measure it, and `Portal` renders null on its first pass (it resolves its
+  // host in its own layout effect), so the node lands one render after the
+  // menu opens. An effect keyed only on `position` would measure nothing.
+  const [menuNode, setMenuNode] = useState<HTMLElement | null>(null);
+  const [placement, setPlacement] = useState<DropdownPlacement | null>(null);
+
+  const attachMenu = useCallback((node: View | null) => {
+    setMenuNode(node as unknown as HTMLElement | null);
+  }, []);
+
+  // The right-click point is a zero-area anchor, so the surface sits below-right
+  // of the cursor when it fits, flips above when it doesn't, and clamps into the
+  // viewport when neither fits. Without this a menu opened near an edge hung off
+  // the fold with its rows unreachable.
+  useLayoutEffect(() => {
+    if (!position || !menuNode || typeof window === 'undefined') {
+      setPlacement(null);
+      return;
+    }
+    const surface = menuNode.getBoundingClientRect();
+    setPlacement(
+      resolveDropdownPlacement({
+        anchor: { top: position.y, bottom: position.y, left: position.x, right: position.x },
+        size: { width: surface.width, height: surface.height },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        offset: 0,
+        gutter: VIEWPORT_GUTTER,
+        align: 'start',
+      }),
+    );
+  }, [position, menuNode]);
 
   useEffect(() => {
     if (!isOpen || typeof document === 'undefined') return;
@@ -179,11 +217,14 @@ export function ContextMenuContent({ children, style }: ContextMenuContentProps)
         accessibilityLabel="Close context menu"
       />
       <View
+        ref={attachMenu}
         style={[
           styles.dropdown,
           {
-            top: position.y,
-            left: position.x,
+            // The raw click point is the pre-measurement anchor; the layout
+            // effect above replaces it before the browser paints.
+            top: placement?.top ?? position.y,
+            left: placement?.left ?? position.x,
             backgroundColor: theme.isDark
               ? theme.colors.backgroundSecondary
               : theme.colors.background,
@@ -358,7 +399,10 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     overflow: 'hidden',
     paddingHorizontal: 10,
-    minHeight: 32,
+    // Matches the native sheet row (`index.tsx`). Bloom's web build is what
+    // renders on touch tablets, where this dropdown — not the sheet — is the
+    // menu, so the row carries the same 44dp target on both platforms.
+    minHeight: 44,
   },
   itemText: {
     flex: 1,

package/src/dialog/SheetShell.tsx

@@ -100,6 +100,11 @@ export function SheetShell({
       detached
       backdropOpacity={0.7}
       style={sheetStyle}
+      // `SheetShell` draws its own PRESSABLE handle below (tap to dismiss);
+      // `BottomSheet`'s built-in one is decorative and defaults to on, so
+      // leaving it enabled painted two pills 2dp apart in every Bloom sheet
+      // menu, select, popover and context menu.
+      showHandle={false}
     >
       <Context.Provider value={context}>
         <SheetHandle onPress={() => close()} />

package/src/menu/index.web.tsx

@@ -18,6 +18,7 @@ import type { DialogControlProps } from '../dialog/types';
 import { Portal } from '../portal/index.web';
 import { createDropdownZIndex } from '../styles/z-index';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { resolveDropdownPlacement } from '../overlay/dropdown-placement';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import {
   MenuContext,
@@ -198,6 +199,22 @@ export function MenuContent({
   const theme = useTheme();
   const context = useMenuContext();
   const [position, setPosition] = useState<ViewStyle | null>(null);
+  // The mounted dropdown node, as STATE rather than a bare ref: positioning has
+  // to measure it, and `Portal` renders null on its first pass (it resolves its
+  // host in its own layout effect), so the node lands one render after
+  // `isOpen` flips. An effect keyed only on `isOpen` would measure nothing.
+  const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);
+
+  const attachDropdown = useCallback(
+    (node: View | null) => {
+      // The shared ref stays in sync — `Menu`'s outside-pointerdown check reads it.
+      if (context.dropdownRef) {
+        context.dropdownRef.current = node;
+      }
+      setDropdownNode(node as unknown as HTMLElement | null);
+    },
+    [context.dropdownRef],
+  );
 
   useLayoutEffect(() => {
     if (!context.isOpen || typeof window === 'undefined') {
@@ -205,27 +222,28 @@ export function MenuContent({
     }
 
     const triggerNode = context.triggerRef?.current as HTMLElement | null;
-    if (!triggerNode?.getBoundingClientRect) {
+    if (!triggerNode?.getBoundingClientRect || !dropdownNode) {
       return;
     }
 
     const updatePosition = () => {
       const rect = triggerNode.getBoundingClientRect();
-      const width = Math.max(180, rect.width);
-      const availableRight = window.innerWidth - VIEWPORT_GUTTER;
-      const left = Math.min(
-        Math.max(VIEWPORT_GUTTER, rect.right - width),
-        Math.max(VIEWPORT_GUTTER, availableRight - width),
-      );
-      const top = Math.min(
-        rect.bottom + MENU_OFFSET,
-        Math.max(VIEWPORT_GUTTER, window.innerHeight - VIEWPORT_GUTTER),
-      );
+      // Measured BEFORE `minWidth` is applied, so the final surface can only be
+      // wider than this — and a wider surface wraps less, so the measured height
+      // is an upper bound. Erring that way flips early in a tie, never late.
+      const surface = dropdownNode.getBoundingClientRect();
+      const width = Math.max(surface.width, rect.width);
 
       setPosition({
         position: WEB_POSITION_FIXED,
-        top,
-        left,
+        ...resolveDropdownPlacement({
+          anchor: rect,
+          size: { width, height: surface.height },
+          viewport: { width: window.innerWidth, height: window.innerHeight },
+          offset: MENU_OFFSET,
+          gutter: VIEWPORT_GUTTER,
+          align: 'end',
+        }),
         right: undefined,
         bottom: undefined,
         minWidth: width,
@@ -240,7 +258,7 @@ export function MenuContent({
       window.removeEventListener('resize', updatePosition);
       window.removeEventListener('scroll', updatePosition, true);
     };
-  }, [context.isOpen, context.triggerRef]);
+  }, [context.isOpen, context.triggerRef, dropdownNode]);
 
   if (!context.isOpen) {
     return null;
@@ -249,7 +267,7 @@ export function MenuContent({
   return (
     <Portal>
       <View
-        ref={context.dropdownRef as React.Ref<View>}
+        ref={attachDropdown}
         style={[
           styles.dropdown,
           {
@@ -390,6 +408,14 @@ const styles = StyleSheet.create({
     zIndex: menuZIndex.root,
   },
   dropdown: {
+    // Fixed from the outset, not only once positioned: the `Portal` root is a
+    // block container, so a static child would stretch to the full viewport
+    // width and the pre-position measurement would under-read the height (less
+    // wrapping at a width the surface never actually has). A fixed box
+    // shrink-wraps to the same width it ends up with.
+    position: WEB_POSITION_FIXED,
+    top: 0,
+    left: 0,
     borderRadius: 8,
     padding: 4,
     borderWidth: 1,
@@ -409,7 +435,10 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     overflow: 'hidden',
     paddingHorizontal: 10,
-    minHeight: 32,
+    // Matches the native sheet row (`index.tsx`). Bloom's web build is what
+    // renders on touch tablets, where this dropdown — not the sheet — is the
+    // menu, so the row carries the same 44dp target on both platforms.
+    minHeight: 44,
   },
   webItemText: {
     flex: 1,

package/src/overlay/dropdown-placement.ts

@@ -0,0 +1,88 @@
+/**
+ * Placement arithmetic for a portaled dropdown surface — shared by the web
+ * `Menu` and `ContextMenu` forks, which anchor differently (a trigger's rect
+ * vs. a right-click point) but need the same fit / flip / clamp decision.
+ *
+ * Internal: deliberately NOT re-exported from `overlay/index.ts`. The web forks
+ * import it directly, the same way `dialog/SheetShell` is shared without
+ * becoming public API.
+ *
+ * Kept as a pure function so the arithmetic is unit-testable on its own — the
+ * DOM half (measuring the surface before positioning it) is the call site's
+ * job and is verified in a browser.
+ */
+
+/** Viewport-relative box the surface is positioned against. A right-click point is a zero-area anchor. */
+export interface DropdownAnchor {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+export interface DropdownPlacementInput {
+  anchor: DropdownAnchor;
+  /** The surface's size, measured at the width it will finally be laid out at. */
+  size: { width: number; height: number };
+  viewport: { width: number; height: number };
+  /** Gap left between the anchor and the surface on the vertical axis. */
+  offset: number;
+  /** Minimum distance kept from every viewport edge. */
+  gutter: number;
+  /**
+   * Which of the surface's horizontal edges lines up with the anchor's matching
+   * edge: `'start'` pins left-to-left (a menu opening rightward from a click),
+   * `'end'` pins right-to-right (a trigger-anchored dropdown).
+   */
+  align: 'start' | 'end';
+}
+
+export interface DropdownPlacement {
+  top: number;
+  left: number;
+}
+
+/**
+ * Clamp into `[min, max]`, resolving an inverted range to `min`.
+ *
+ * The range inverts exactly when the surface is larger than the viewport minus
+ * its gutters. Preferring `min` then pins the surface to the top/left gutter and
+ * lets it overflow the far edge, so its FIRST rows stay reachable — the opposite
+ * choice would push its start off-screen and strand every row.
+ */
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(value, max));
+}
+
+/**
+ * Resolve the viewport-relative `top`/`left` for a dropdown surface.
+ *
+ * Vertical: sit below the anchor when it fits, else flip above it, else clamp
+ * into the viewport. Horizontal: align per `align`, then clamp into the
+ * viewport.
+ */
+export function resolveDropdownPlacement({
+  anchor,
+  size,
+  viewport,
+  offset,
+  gutter,
+  align,
+}: DropdownPlacementInput): DropdownPlacement {
+  const below = anchor.bottom + offset;
+  const above = anchor.top - offset - size.height;
+
+  const fitsBelow = below + size.height <= viewport.height - gutter;
+  const fitsAbove = above >= gutter;
+
+  const top = fitsBelow
+    ? below
+    : fitsAbove
+      ? above
+      : clamp(below, gutter, viewport.height - gutter - size.height);
+
+  const preferredLeft = align === 'end' ? anchor.right - size.width : anchor.left;
+  const left = clamp(preferredLeft, gutter, viewport.width - gutter - size.width);
+
+  return { top, left };
+}

package/src/select/index.web.tsx

@@ -1,5 +1,14 @@
-import React, { createContext, useContext, useId, useMemo, useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -7,6 +16,7 @@ import { Backdrop } from '../overlay';
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { resolveDropdownPlacement } from '../overlay/dropdown-placement';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { RadioIndicator } from '../radio-indicator';
 import { useInteractionState } from '../hooks/useInteractionState';
@@ -30,6 +40,8 @@ import type {
 export { useSelectItemContext };
 
 const selectZIndex = createOverlayZIndex();
+const VIEWPORT_GUTTER = 8;
+const SELECT_OFFSET = 6;
 
 // ---------------------------------------------------------------------------
 // Context
@@ -39,6 +51,8 @@ type SelectContextValue = Pick<SelectProps, 'value' | 'onValueChange' | 'disable
   isOpen: boolean;
   open: () => void;
   close: () => void;
+  /** The trigger element, so `SelectContent` can position itself against it. */
+  triggerRef: React.RefObject<unknown>;
 };
 
 const SelectContext = createContext<SelectContextValue | null>(null);
@@ -58,6 +72,7 @@ function useSelectContext(): SelectContextValue {
 
 export function Select({ children, value, onValueChange, disabled }: SelectProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef<unknown>(null);
 
   const ctx = useMemo<SelectContextValue>(
     () => ({
@@ -67,6 +82,7 @@ export function Select({ children, value, onValueChange, disabled }: SelectProps
       isOpen,
       open: () => setIsOpen(true),
       close: () => setIsOpen(false),
+      triggerRef,
     }),
     [value, onValueChange, disabled, isOpen],
   );
@@ -103,6 +119,7 @@ export function SelectTrigger({ children, label }: SelectTriggerProps) {
         pressed: false,
       },
       props: {
+        ref: ctx.triggerRef,
         onPress: ctx.open,
         onFocus,
         onBlur,
@@ -113,6 +130,7 @@ export function SelectTrigger({ children, label }: SelectTriggerProps) {
 
   return (
     <Pressable
+      ref={ctx.triggerRef as React.Ref<View>}
       onPress={ctx.open}
       onFocus={onFocus}
       onBlur={onBlur}
@@ -184,6 +202,58 @@ export function SelectContent<T>({
 }: SelectContentProps<T>) {
   const ctx = useSelectContext();
   const theme = useTheme();
+  const [position, setPosition] = useState<ViewStyle | null>(null);
+  // The mounted dropdown node, as STATE rather than a bare ref: positioning has
+  // to measure it, and `Portal` renders null on its first pass (it resolves its
+  // host in its own layout effect), so the node lands one render after `isOpen`
+  // flips. An effect keyed only on `isOpen` would measure nothing.
+  const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);
+
+  const attachDropdown = useCallback((node: View | null) => {
+    setDropdownNode(node as unknown as HTMLElement | null);
+  }, []);
+
+  // Anchored to the trigger, left edges aligned, and never off-screen: sit below
+  // when it fits, flip above when it doesn't, clamp when neither. Before this the
+  // dropdown had no `top`/`left` at all, so it rendered at the `Portal` root's
+  // origin — the viewport's top-left corner — however far from its trigger.
+  useLayoutEffect(() => {
+    if (!ctx.isOpen || typeof window === 'undefined') return;
+
+    const triggerNode = ctx.triggerRef.current as HTMLElement | null;
+    if (!triggerNode?.getBoundingClientRect || !dropdownNode) return;
+
+    const updatePosition = () => {
+      const rect = triggerNode.getBoundingClientRect();
+      // Measured BEFORE `minWidth` is applied, so the final surface can only be
+      // wider than this — and a wider surface wraps less, so the measured height
+      // is an upper bound. Erring that way flips early in a tie, never late.
+      const surface = dropdownNode.getBoundingClientRect();
+      const width = Math.max(surface.width, rect.width);
+
+      setPosition({
+        position: WEB_POSITION_FIXED,
+        ...resolveDropdownPlacement({
+          anchor: rect,
+          size: { width, height: surface.height },
+          viewport: { width: window.innerWidth, height: window.innerHeight },
+          offset: SELECT_OFFSET,
+          gutter: VIEWPORT_GUTTER,
+          align: 'start',
+        }),
+        minWidth: width,
+      });
+    };
+
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [ctx.isOpen, ctx.triggerRef, dropdownNode]);
 
   if (!ctx.isOpen) return null;
 
@@ -195,6 +265,7 @@ export function SelectContent<T>({
         accessibilityLabel="Close selection"
       />
       <View
+        ref={attachDropdown}
         accessibilityRole="list"
         accessibilityLabel={label}
         style={[
@@ -206,6 +277,7 @@ export function SelectContent<T>({
             borderColor: theme.colors.borderLight,
             ...bloomShadowStyle('m'),
           },
+          position,
         ]}
       >
         {items.map((item, index) => (
@@ -222,7 +294,7 @@ export function SelectContent<T>({
 // SelectItem
 // ---------------------------------------------------------------------------
 
-export function SelectItem({ ref, value, children, style }: SelectItemProps) {
+export function SelectItem({ ref, value, label, children, style }: SelectItemProps) {
   const theme = useTheme();
   const ctx = useSelectContext();
   const {
@@ -243,6 +315,10 @@ export function SelectItem({ ref, value, children, style }: SelectItemProps) {
     <Pressable
       ref={ref}
       accessibilityRole="radio"
+      // The native fork has always applied this; web declared `label` and then
+      // dropped it, leaving every option a `role="radio"` with no accessible
+      // name for a screen reader to announce.
+      accessibilityLabel={label}
       accessibilityState={{ checked: isSelected }}
       onPress={() => {
         ctx.onValueChange?.(value);
@@ -344,7 +420,14 @@ const styles = StyleSheet.create({
     pointerEvents: 'auto',
   },
   dropdown: {
-    position: 'absolute',
+    // Fixed from the outset, not only once positioned: the `Portal` root is a
+    // block container, so a static child would stretch to the full viewport
+    // width and the pre-position measurement would under-read the height (less
+    // wrapping at a width the surface never actually has). A fixed box
+    // shrink-wraps to the same width it ends up with.
+    position: WEB_POSITION_FIXED,
+    top: 0,
+    left: 0,
     zIndex: selectZIndex.surface,
     borderRadius: 8,
     borderWidth: 1,
@@ -358,7 +441,11 @@ const styles = StyleSheet.create({
   item: {
     position: 'relative',
     flexDirection: 'row',
-    minHeight: 25,
+    // Matches the native sheet row (`index.tsx`) and the web `Menu` row. Bloom's
+    // web build is what renders on touch tablets, where this dropdown — not the
+    // sheet — is the select, so the row carries the same 44dp target on both
+    // platforms.
+    minHeight: 44,
     paddingLeft: 30,
     paddingRight: 8,
     alignItems: 'center',

package/src/select/types.ts

@@ -23,6 +23,12 @@ export type TriggerChildProps = {
     pressed: boolean;
   };
   props: {
+    /**
+     * Attach this to the element the trigger actually renders. On web the
+     * dropdown is positioned against its measured rect; a trigger that drops
+     * it falls back to the viewport's top-left corner.
+     */
+    ref?: React.Ref<unknown>;
     onPress: () => void;
     onFocus: () => void;
     onBlur: () => void;