@solidrt/components 0.0.72 → 0.0.74

package/AGENTS.md

@@ -96,10 +96,10 @@ One bullet per module, generated from the first paragraph of its docs/ file.
 - `ProgressBar` - A horizontal progress bar: determinate when given a `value` in `[0, 1]` (the fill grows from the left, gliding to each new value - the `fill` transition entry retimes it), indeterminate when `value` is undefined (a short segment slides back and forth, driven by core `onFrame`). Track is `surfaceAlt`, fill is `primary`; override via `style.backgroundColor` (track) and `style.color` (fill), and box the track with `borderColor`/`borderWidth`. The ends follow `radius.full` through `pill`, and the fill glows with the theme's accent glow.
 - `Portal` - Renders its child somewhere other than its lexical position: by default at the window root, so overlays (modals, menus, tooltips) escape the clipping and stacking of their surrounding layout; `mount` targets another node captured from a `ref` instead. A thin JSX wrapper over core `createPortal`. The child should be a single element with `position="absolute"`, since it is inserted into the window's flex root. Portals cannot mount during the app's initial render, so gate them behind a signal that starts false.
 - `Modal` - A centered overlay rendered at the window root via core `createPortal`: it fills the window with a dimming backdrop (theme `scrim`; override via `backdropColor`, `"transparent"` for no dim) and centers `children` on top, the whole overlay fading in at mount and out on removal (an exiting modal takes no hits). Control visibility by mounting/unmounting it, e.g. `<Show when={open()}>`; the gating signal must start false since portals cannot mount during the initial render. Pressing the backdrop, Escape and the platform's back call `onClose` (unless `dismissable` is false, which keeps the modal up and still stops a back from reaching the screen beneath), pressing the content does not, and while mounted the modal traps `createFocusNav` inside itself.
-- `Tooltip` - A hover-only affordance: under the `desktop`/`hybrid` interaction policies, resting a mouse pointer on the wrapped content shows a bubble near it after `delay` (default 500ms). Under the `touch` policy it never shows, so tooltip content must stay non-essential. The bubble is portal-mounted at the window root, clamped to the window edges, takes no pointer events, fades in and out, hides on leave and on press, and glows with the theme's overlay glow. A string/number `content` renders as themed body text; anything else as-is. `placement` picks the side (`"top"`, the default, or `"bottom"`).
-- `Select` - A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (flipping above when there is no room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside, Escape and the platform's back close without a change. `placeholder` shows in the trigger while nothing is selected. Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The option list is not scrollable yet, so keep it short. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
+- `Tooltip` - A hover-only affordance: under the `desktop`/`hybrid` interaction policies, resting a mouse pointer on the wrapped content shows a bubble near it after `delay` (default 500ms). Under the `touch` policy it never shows, so tooltip content must stay non-essential. The bubble is portal-mounted at the window root, clamped to the window edges, takes no pointer events, fades in and out, hides on leave and on press, and glows with the theme's overlay glow. A string/number `content` renders as themed body text; anything else as-is. `placement` picks the preferred side (`"top"`, the default, or `"bottom"`); the other side is taken when only it has the room.
+- `Select` - A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (above it when only that side has the room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside, Escape and the platform's back close without a change. `placeholder` shows in the trigger while nothing is selected. A list taller than the room it has scrolls, opening with the selected option in view, and while open the options are the focus navigation's scope (as a Modal's content is). Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
 - `SegmentedControl` - A single-choice row of equal-width segments joined flush: only the control's outermost corners are rounded, hairline dividers separate the segments, and the active segment is one `primary` indicator that springs between segments on a selection change - the `indicator` transition entry retimes it. Hovered segments tint with the theme `overlayHover` under non-touch interaction policies. `options` is an `Option[]`; controlled via `value`/`onChange`, or uncontrolled via `defaultValue`. Override the inactive fill via `style.backgroundColor` and the outer radius via `style.borderRadius`, and box the control with `borderColor`/`borderWidth`. The indicator glows with the theme's accent glow.
-- `ContextMenu` - Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer that flips up near the bottom edge. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside, Escape and the platform's back close without selecting.
+- `ContextMenu` - Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer, on the side of it with room. A list taller than the room it has scrolls. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside, Escape and the platform's back close without selecting.
 - `NavShell` - An app shell that arranges primary navigation around the content per `policy.navigation`: bottom tabs under it (`bottomTabs`), a narrow rail (`rail`), or a wide sidebar (`sidebar`) beside it. The content is a single stable node; switching arrangement only flips the shell's flex direction and remounts the stateless nav strip, so page state survives a resize across a breakpoint. `items` is a `NavItem[]` (`{ value, label, icon? }`; the icon renders above the label in tabs/rail, beside it in the sidebar); controlled via `value`/`onChange`, or uncontrolled via `defaultValue`. Safe areas are the caller's concern: wrap the shell in `SafeArea`. With `@solidrt/router` the shell is the tabs route's component, `value`/`onChange` wired to `useTabs()` (`active()`/`select(path)`) and `<Outlet />` as the content; the router then keeps a stack per tab and the tabs mounted.
 - `SplitView` - A list-detail container driven by `policy.layout`: `twoPane` shows the `list` pane (width `listWidth`, default `theme.size.splitViewList`) beside the `detail` pane, `singlePane` shows one at a time per `showDetail`. Keep pane state (selection, scroll) in the app, not in the panes: crossing a breakpoint re-arranges and can remount them. It draws no chrome and adds no padding; a back affordance in the single-pane detail is the app's to render (fork on `policy.layout`).
 - `QrCode` - Renders a QR code for `data` out of primitives: same-color modules in a row collapse into one box, drawn on a light quiet-zone panel; the grid recomputes only when `data` or `level` changes. It paints black on white by default (not the theme) so it stays scannable through a theme switch; override `color`/`background` only if the contrast still holds. `moduleSize` (default 6) is pixels per module, `margin` (default 16) the quiet zone (keep it non-zero), `level` the error correction (`L`/`M`/`Q`/`H`, default `M`: higher tolerates more damage but caps data length sooner), `radius` the panel's corner radius.

package/README.md

@@ -361,7 +361,7 @@ import { For } from "@solidrt/core"
 </ScrollView>
 ```
 
-`scrollRef` hands out the scroll handle from `createScroll`: `offset()` and `range()` (the largest reachable offset, refreshed each layout) are reactive; `scrollTo({ x, y, behavior })` and `scrollBy({ x, y, behavior })` clamp to the range, an omitted axis stays put, and `behavior: "instant"` writes without the spring (the web's word; `"auto"` and `"smooth"` are the default motion). Scroll policies are written against it in the app. A transcript that opens at its newest message and then follows growth, without yanking a reader who has scrolled back:
+`scrollRef` hands out the scroll handle from `createScroll`: `offset()` and `range()` (the largest reachable offset, refreshed each layout) are reactive; `scrollTo({ x, y, behavior })` and `scrollBy({ x, y, behavior })` clamp to the range, an omitted axis stays put, and `behavior: "instant"` writes without the spring (the web's word; `"auto"` and `"smooth"` are the default motion). Scroll policies are written against it in the app. The focus navigation needs none: a control it focuses inside the view is scrolled into view by the view itself (see `createFocusNav`). A transcript that opens at its newest message and then follows growth, without yanking a reader who has scrolled back:
 
 ```tsx
 let [scroll, setScroll] = createSignal<Scroll>()
@@ -521,9 +521,11 @@ return <Window {...input.handlers}>...</Window>
 
 When the focused control disappears (an action replacing it, a screen change), focus lands on the nearest candidate to where it sat as soon as the successor is laid out - the ring follows a Disconnect button into the Connect button that replaces it. A deliberate blur (tapping outside, dismissing the keyboard) stays blurred; the next press resumes at the nearest candidate.
 
-An open `Modal` traps navigation inside itself with no extra wiring (topmost wins when stacked); pass `scope: () => nodeOrNull` to trap into some other subtree instead. `move`/`tab`/`activate` are exposed for custom triggers.
+An open `Modal`, `Select` or its sheet traps navigation inside itself with no extra wiring (topmost wins when stacked); pass `scope: () => nodeOrNull` to trap into some other subtree instead. `move`/`tab`/`activate` are exposed for custom triggers.
 
-API: `createFocusNav`, `registerNavAction`, `uiActions`, `uiBindings`, `FocusNavOptions`, `UiActions`, `UiDevices` - typed and commented in [src/focus-nav.ts](./src/focus-nav.ts).
+A candidate the nav focuses is brought into view: every `ScrollView` above it scrolls by the amount its box overshoots the viewport, with the view's own motion, so a list longer than its box can be walked blind. A custom scroller built on `createScroll` joins in with `registerScrollViewport(viewportNodeId, scroll)`.
+
+API: `createFocusNav`, `registerNavAction`, `registerScrollViewport`, `uiActions`, `uiBindings`, `FocusNavOptions`, `UiActions`, `UiDevices` - typed and commented in [src/focus-nav.ts](./src/focus-nav.ts).
 
 ### Switch
 
@@ -727,7 +729,7 @@ API: `Modal`, `ModalProps` - typed and commented in [src/modal.tsx](./src/modal.
 
 ### Tooltip
 
-A hover-only affordance: under the `desktop`/`hybrid` interaction policies, resting a mouse pointer on the wrapped content shows a bubble near it after `delay` (default 500ms). Under the `touch` policy it never shows, so tooltip content must stay non-essential. The bubble is portal-mounted at the window root, clamped to the window edges, takes no pointer events, fades in and out, hides on leave and on press, and glows with the theme's overlay glow. A string/number `content` renders as themed body text; anything else as-is. `placement` picks the side (`"top"`, the default, or `"bottom"`).
+A hover-only affordance: under the `desktop`/`hybrid` interaction policies, resting a mouse pointer on the wrapped content shows a bubble near it after `delay` (default 500ms). Under the `touch` policy it never shows, so tooltip content must stay non-essential. The bubble is portal-mounted at the window root, clamped to the window edges, takes no pointer events, fades in and out, hides on leave and on press, and glows with the theme's overlay glow. A string/number `content` renders as themed body text; anything else as-is. `placement` picks the preferred side (`"top"`, the default, or `"bottom"`); the other side is taken when only it has the room.
 
 ```jsx
 import { Tooltip, Button } from "@solidrt/components"
@@ -741,7 +743,7 @@ API: `Tooltip`, `TooltipProps` - typed and commented in [src/tooltip.tsx](./src/
 
 ### Select
 
-A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (flipping above when there is no room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside, Escape and the platform's back close without a change. `placeholder` shows in the trigger while nothing is selected. Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The option list is not scrollable yet, so keep it short. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
+A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (above it when only that side has the room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside, Escape and the platform's back close without a change. `placeholder` shows in the trigger while nothing is selected. A list taller than the room it has scrolls, opening with the selected option in view, and while open the options are the focus navigation's scope (as a Modal's content is). Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
 
 ```jsx
 import { Select } from "@solidrt/components"
@@ -775,7 +777,7 @@ API: `SegmentedControl`, `SegmentedControlProps` - typed and commented in [src/s
 
 ### ContextMenu
 
-Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer that flips up near the bottom edge. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside, Escape and the platform's back close without selecting.
+Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer, on the side of it with room. A list taller than the room it has scrolls. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside, Escape and the platform's back close without selecting.
 
 ```jsx
 import { ContextMenu } from "@solidrt/components"

package/docs/context-menu.md

@@ -1,6 +1,6 @@
 # ContextMenu
 
-Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer that flips up near the bottom edge. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside, Escape and the platform's back close without selecting.
+Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer, on the side of it with room. A list taller than the room it has scrolls. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside, Escape and the platform's back close without selecting.
 
 ```jsx
 import { ContextMenu } from "@solidrt/components"

package/docs/focus-nav.md

@@ -28,4 +28,6 @@ return <Window {...input.handlers}>...</Window>
 
 When the focused control disappears (an action replacing it, a screen change), focus lands on the nearest candidate to where it sat as soon as the successor is laid out - the ring follows a Disconnect button into the Connect button that replaces it. A deliberate blur (tapping outside, dismissing the keyboard) stays blurred; the next press resumes at the nearest candidate.
 
-An open `Modal` traps navigation inside itself with no extra wiring (topmost wins when stacked); pass `scope: () => nodeOrNull` to trap into some other subtree instead. `move`/`tab`/`activate` are exposed for custom triggers.
+An open `Modal`, `Select` or its sheet traps navigation inside itself with no extra wiring (topmost wins when stacked); pass `scope: () => nodeOrNull` to trap into some other subtree instead. `move`/`tab`/`activate` are exposed for custom triggers.
+
+A candidate the nav focuses is brought into view: every `ScrollView` above it scrolls by the amount its box overshoots the viewport, with the view's own motion, so a list longer than its box can be walked blind. A custom scroller built on `createScroll` joins in with `registerScrollViewport(viewportNodeId, scroll)`.

package/docs/scroll-view.md

@@ -11,7 +11,7 @@ import { For } from "@solidrt/core"
 </ScrollView>
 ```
 
-`scrollRef` hands out the scroll handle from `createScroll`: `offset()` and `range()` (the largest reachable offset, refreshed each layout) are reactive; `scrollTo({ x, y, behavior })` and `scrollBy({ x, y, behavior })` clamp to the range, an omitted axis stays put, and `behavior: "instant"` writes without the spring (the web's word; `"auto"` and `"smooth"` are the default motion). Scroll policies are written against it in the app. A transcript that opens at its newest message and then follows growth, without yanking a reader who has scrolled back:
+`scrollRef` hands out the scroll handle from `createScroll`: `offset()` and `range()` (the largest reachable offset, refreshed each layout) are reactive; `scrollTo({ x, y, behavior })` and `scrollBy({ x, y, behavior })` clamp to the range, an omitted axis stays put, and `behavior: "instant"` writes without the spring (the web's word; `"auto"` and `"smooth"` are the default motion). Scroll policies are written against it in the app. The focus navigation needs none: a control it focuses inside the view is scrolled into view by the view itself (see `createFocusNav`). A transcript that opens at its newest message and then follows growth, without yanking a reader who has scrolled back:
 
 ```tsx
 let [scroll, setScroll] = createSignal<Scroll>()

package/docs/select.md

@@ -1,6 +1,6 @@
 # Select
 
-A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (flipping above when there is no room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside, Escape and the platform's back close without a change. `placeholder` shows in the trigger while nothing is selected. Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The option list is not scrollable yet, so keep it short. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
+A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (above it when only that side has the room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside, Escape and the platform's back close without a change. `placeholder` shows in the trigger while nothing is selected. A list taller than the room it has scrolls, opening with the selected option in view, and while open the options are the focus navigation's scope (as a Modal's content is). Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
 
 ```jsx
 import { Select } from "@solidrt/components"

package/docs/tooltip.md

@@ -1,6 +1,6 @@
 # Tooltip
 
-A hover-only affordance: under the `desktop`/`hybrid` interaction policies, resting a mouse pointer on the wrapped content shows a bubble near it after `delay` (default 500ms). Under the `touch` policy it never shows, so tooltip content must stay non-essential. The bubble is portal-mounted at the window root, clamped to the window edges, takes no pointer events, fades in and out, hides on leave and on press, and glows with the theme's overlay glow. A string/number `content` renders as themed body text; anything else as-is. `placement` picks the side (`"top"`, the default, or `"bottom"`).
+A hover-only affordance: under the `desktop`/`hybrid` interaction policies, resting a mouse pointer on the wrapped content shows a bubble near it after `delay` (default 500ms). Under the `touch` policy it never shows, so tooltip content must stay non-essential. The bubble is portal-mounted at the window root, clamped to the window edges, takes no pointer events, fades in and out, hides on leave and on press, and glows with the theme's overlay glow. A string/number `content` renders as themed body text; anything else as-is. `placement` picks the preferred side (`"top"`, the default, or `"bottom"`); the other side is taken when only it has the room.
 
 ```jsx
 import { Tooltip, Button } from "@solidrt/components"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -20,10 +20,10 @@
     "qrcode-generator": "^2.0.4"
   },
   "devDependencies": {
-    "@solidrt/test": "0.0.72"
+    "@solidrt/test": "0.0.74"
   },
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.13",
-    "@solidrt/core": "0.0.72"
+    "@solidjs/signals": "2.0.0-rc.14",
+    "@solidrt/core": "0.0.74"
   }
 }

package/src/context-menu.tsx

@@ -1,13 +1,14 @@
 import { createEffect, createSignal, createLongPress, createPortal, onBack, onLayout, getBoundingBox, Show, For, env } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { createPress } from "./press"
+import { placePopup, PopupList } from "./popup"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
-import { colorFade, popupFade, popupFadeOut, PressFeedback } from "./motion"
+import { colorFade, popupFadeOut, PressFeedback } from "./motion"
 import { Surface } from "./surface"
 
 export interface ContextMenuItem {
@@ -23,8 +24,8 @@ export interface ContextMenuProps extends TransitionProps {
   layout?: LayoutProps
 }
 
-// Minimum distance kept between the menu and the window edges.
-let margin = () => theme.spacing.sm
+// Scrim kept visible above a bottom sheet at its tallest.
+let sheetClearance = () => theme.spacing.xl
 
 /**
  * Secondary actions on the wrapped content. The opening gesture follows the
@@ -33,8 +34,8 @@ let margin = () => theme.spacing.sm
  * pressable inside retracts and never fires, and a scroll that started
  * first keeps it). The presentation forks on the interaction policy: touch
  * gets a bottom sheet over a scrim, desktop/hybrid an anchored menu at the
- * pointer. Pressing outside, Escape and the user's back close without
- * selecting.
+ * pointer, on the side with room. A list taller than the room scrolls.
+ * Pressing outside, Escape and the user's back close without selecting.
  */
 export function ContextMenu(props: ContextMenuProps) {
   let [open, setOpen] = createSignal(false)
@@ -96,23 +97,28 @@ export function ContextMenu(props: ContextMenuProps) {
     )
   }
 
-  // Anchored at the opening pointer position, flipping up when it would run
-  // off the bottom. Same reflow-free placement as Tooltip/Select: portal at
-  // the window root, measured in onLayout, moved with x/y paint transforms.
+  // Anchored at the opening pointer position, on the side with room
+  // (placePopup, a point anchor with no gap). Same reflow-free placement as
+  // Tooltip/Select: portal at the window root, measured in onLayout, moved
+  // with x/y paint transforms. The rows scroll once taller than the room.
   // An overlay face (the sheet sits on a scrim, so it stays flat).
   let Menu = () => {
     let menu: { id: number } | undefined
+    let list: { id: number } | undefined
     let [pos, setPos] = createSignal<{ x: number; y: number } | null>(null)
+    let [listHeight, setListHeight] = createSignal<number | null>(null)
+    // The padding above and below the rows: the menu's height beyond the list's.
+    let chrome = () => 2 * theme.spacing.sm
     onLayout(() => {
       let b = menu && getBoundingBox(menu)
-      if (!b) return
-      let p = point()
-      let x = Math.round(Math.min(Math.max(p.x, margin()), env.windowSize.width - b.width - margin()))
-      let y = Math.round(
-        Math.max(p.y + b.height > env.windowSize.height - margin() ? p.y - b.height : p.y, margin()),
-      )
+      let l = list && getBoundingBox(list)
+      if (!b || !l) return
+      let at = point()
+      let p = placePopup({ x: at.x, y: at.y, width: 0, height: 0 }, { width: b.width, height: l.height + chrome() }, { gap: 0 })
+      let h = Math.min(l.height, p.room - chrome())
+      if (h !== listHeight()) setListHeight(h)
       let cur = pos()
-      if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
+      if (!cur || cur.x !== p.x || cur.y !== p.y) setPos({ x: p.x, y: p.y })
     })
     // The fade is driven by the position write, not a mount-time `from`: the
     // menu parks offscreen until measured, so a `from` would play unseen.
@@ -152,19 +158,43 @@ export function ContextMenu(props: ContextMenuProps) {
               width: theme.components.contextMenu?.borderWidth ?? theme.borderWidth.sm,
             }}
           />
-          <For each={props.items}>
-            {(item: ContextMenuItem) => <ItemRow item={item} padY={space("sm")} />}
-          </For>
+          <PopupList height={listHeight()} listRef={(n) => (list = n)}>
+            <For each={props.items}>
+              {(item: ContextMenuItem) => <ItemRow item={item} padY={space("sm")} />}
+            </For>
+          </PopupList>
         </view>
       </view>,
     )
   }
 
   // Bottom sheet over a scrim; content is a sibling of the scrim (Modal's
-  // trick) so a row press never has the scrim on its hit path.
-  let Sheet = () =>
-    createPortal(
-      <view position="absolute" top={0} left={0} right={0} bottom={0} opacity={1} transition={popupFade()}>
+  // trick) so a row press never has the scrim on its hit path. The rows
+  // scroll once the sheet would reach the clearance under the top safe
+  // area; hidden until measured, as the menu is, so the full-height list
+  // of the measuring frame is never seen.
+  let Sheet = () => {
+    let list: { id: number } | undefined
+    let [listHeight, setListHeight] = createSignal<number | null>(null)
+    // The padding above and below the rows: the sheet's height beyond the list's.
+    let chrome = () => 2 * theme.spacing.md + env.safeArea.bottom
+    onLayout(() => {
+      let l = list && getBoundingBox(list)
+      if (!l) return
+      let room = env.windowSize.height - env.safeArea.top - sheetClearance() - chrome()
+      let h = Math.min(l.height, room)
+      if (h !== listHeight()) setListHeight(h)
+    })
+    return createPortal(
+      <view
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        opacity={listHeight() != null ? 1 : 0}
+        transition={popupFadeOut()}
+      >
         <view position="absolute" top={0} left={0} right={0} bottom={0} onPointerDown={() => setOpen(false)}>
           <d-rect transition={colorFade()} color={theme.color.scrim} />
         </view>
@@ -184,12 +214,15 @@ export function ContextMenu(props: ContextMenuProps) {
             material={theme.components.contextMenu?.material}
             glow={null}
           />
-          <For each={props.items}>
-            {(item: ContextMenuItem) => <ItemRow item={item} padY={Math.round(theme.spacing.md * 1.5)} />}
-          </For>
+          <PopupList height={listHeight()} listRef={(n) => (list = n)}>
+            <For each={props.items}>
+              {(item: ContextMenuItem) => <ItemRow item={item} padY={Math.round(theme.spacing.md * 1.5)} />}
+            </For>
+          </PopupList>
         </view>
       </view>,
     )
+  }
 
   return (
     <view

package/src/focus-nav.ts

@@ -5,6 +5,7 @@ import {
   gamepad,
   getBoundingBoxViewport,
   getFocusables,
+  getLayoutBox,
   focusedNode,
   getNodePath,
   keyboard,
@@ -13,7 +14,7 @@ import {
   setFocus,
   untrack,
 } from "@solidrt/core"
-import type { Binding, GamepadDevice, InputMap, KeyboardDevice, Vec2 } from "@solidrt/core"
+import type { Binding, GamepadDevice, InputMap, KeyboardDevice, Scroll, Vec2 } from "@solidrt/core"
 
 // Focus navigation: the pointer-free control path, so a TV remote, a
 // keyboard, or a gamepad can drive an app. Two movement types over the same
@@ -145,6 +146,47 @@ export function registerNavAction(nodeId: number, action: () => void): () => voi
   }
 }
 
+// Scroll viewports, by node id, with the handle that moves them: ScrollView
+// registers its own. The nav consults them to bring a candidate it focuses
+// into view, so a list longer than its box can be walked blind (a pad or
+// remote has no pointer to scroll with).
+let scrollViewports = new Map<number, Scroll>()
+
+/**
+ * Registers a scroll viewport node and its handle with the focus
+ * navigation; returns the unregister. ScrollView does this for itself, so
+ * a custom scroller built on createScroll needs it only to have the nav
+ * reveal the controls it focuses inside.
+ */
+export function registerScrollViewport(nodeId: number, scroll: Scroll): () => void {
+  scrollViewports.set(nodeId, scroll)
+  return () => {
+    if (scrollViewports.get(nodeId) === scroll) scrollViewports.delete(nodeId)
+  }
+}
+
+// Scrolls every registered viewport above the node, innermost first, by the
+// amount the node's box overshoots the viewport's (window-relative boxes;
+// the delta is scaled back to box pixels through the viewport's untransformed
+// layout box, as ScrollView does for a finger). The viewport's own motion
+// applies: the list springs to the candidate.
+function revealInScrollViews(nodeId: number): void {
+  for (let id of getNodePath(nodeId)) {
+    let scroll = scrollViewports.get(id)
+    if (!scroll) continue
+    let nb = getBoundingBoxViewport({ id: nodeId })
+    let vb = getBoundingBoxViewport({ id })
+    let lb = getLayoutBox({ id })
+    if (!nb || !vb || !lb || vb.width === 0 || vb.height === 0) continue
+    // Past the start wins over past the end: a node taller than the viewport
+    // shows its top.
+    let overshoot = (lo: number, hi: number, vlo: number, vhi: number) => (lo < vlo ? lo - vlo : hi > vhi ? hi - vhi : 0)
+    let dx = overshoot(nb.x, nb.x + nb.width, vb.x, vb.x + vb.width) * (lb.width / vb.width)
+    let dy = overshoot(nb.y, nb.y + nb.height, vb.y, vb.y + vb.height) * (lb.height / vb.height)
+    if (dx !== 0 || dy !== 0) scroll.scrollBy({ x: dx, y: dy })
+  }
+}
+
 // Open modals register their container here, most recent on top; the top of
 // the stack is every nav's default scope, so modals trap navigation with no
 // per-app wiring (see Modal). An explicit `scope` option overrides the stack.
@@ -230,6 +272,7 @@ export function createFocusNav(options?: FocusNavOptions) {
   let focusCandidate = (p: Placed) => {
     lastPos = { x: p.x, y: p.y }
     setFocus(p.id)
+    revealInScrollViews(p.id)
   }
 
   // Entry focus with no history (very first press) or where predictability

package/src/index.ts

@@ -12,7 +12,7 @@ export { Carousel, type CarouselProps } from "./carousel"
 export { Pressable, type PressableProps, type PressState } from "./pressable"
 export { createPress, type PressOptions } from "./press"
 export { Button, type ButtonProps, type ButtonVariant } from "./button"
-export { createFocusNav, registerNavAction, uiActions, uiBindings, type FocusNavOptions, type UiActions, type UiDevices } from "./focus-nav"
+export { createFocusNav, registerNavAction, registerScrollViewport, uiActions, uiBindings, type FocusNavOptions, type UiActions, type UiDevices } from "./focus-nav"
 export { Switch, type SwitchProps } from "./switch"
 export { Checkbox, type CheckboxProps } from "./checkbox"
 export { RadioGroup, Radio, type RadioGroupProps, type RadioProps } from "./radio"

package/src/popup.tsx

@@ -0,0 +1,94 @@
+import { env } from "@solidrt/core"
+import type { BoundingBox, Scroll } from "@solidrt/core"
+import { theme } from "./theme"
+import { ScrollView } from "./scroll-view"
+
+// The anchored popups (Tooltip, Select's dropdown, ContextMenu) share one
+// placement: portal at the window root, parked offscreen until measured in
+// onLayout, then moved with the x/y paint transforms so tracking the anchor
+// never reflows. The math lives here so every popup keeps the same rules:
+// a side is taken only when it has the room, both axes are clamped to the
+// window margin, and a popup taller than any side caps itself to the room
+// the placement reports.
+
+// Distance between an anchor and the popup it opens.
+export let popupGap = () => theme.spacing.sm
+// Minimum distance kept between a popup and the window edges.
+export let popupMargin = () => theme.spacing.sm
+
+export type PopupSide = "top" | "bottom"
+
+export interface Placement {
+  x: number
+  y: number
+  // The side of the anchor the popup sits on.
+  side: PopupSide
+  // Height available on that side, between the anchor (plus gap) and the
+  // window margin. A popup taller than this caps its content to it; `y`
+  // already assumes it does.
+  room: number
+}
+
+export interface PlaceOptions {
+  // Preferred side (default "bottom"). Kept when the popup fits there;
+  // otherwise the other side when it fits, else whichever has more room.
+  side?: PopupSide
+  // Horizontal alignment to the anchor: on its left edge (default) or
+  // centered on it. Clamped to the window either way.
+  align?: "start" | "center"
+  // Distance from the anchor's edge; default popupGap(). A popup anchored
+  // at a point (a context menu at the pointer) passes 0.
+  gap?: number
+}
+
+/**
+ * Where a popup of `size` goes next to `anchor`, both in window
+ * coordinates (getBoundingBox from the window root, inside onLayout).
+ */
+export function placePopup(anchor: BoundingBox, size: { width: number; height: number }, options: PlaceOptions = {}): Placement {
+  let gap = options.gap ?? popupGap()
+  let margin = popupMargin()
+  let window = env.windowSize
+  let roomBelow = window.height - margin - (anchor.y + anchor.height + gap)
+  let roomAbove = anchor.y - gap - margin
+  let preferred = options.side ?? "bottom"
+  let fits = (side: PopupSide) => size.height <= (side === "bottom" ? roomBelow : roomAbove)
+  let other: PopupSide = preferred === "bottom" ? "top" : "bottom"
+  let side: PopupSide = fits(preferred) ? preferred : fits(other) ? other : roomBelow >= roomAbove ? "bottom" : "top"
+  let room = side === "bottom" ? roomBelow : roomAbove
+  let x = options.align === "center" ? anchor.x + anchor.width / 2 - size.width / 2 : anchor.x
+  x = Math.round(Math.min(Math.max(x, margin), window.width - size.width - margin))
+  let y = Math.round(side === "bottom" ? anchor.y + anchor.height + gap : anchor.y - gap - Math.min(size.height, room))
+  return { x, y, side, room }
+}
+
+export interface PopupListProps {
+  // The list's height: its rows' natural height capped to the room, as the
+  // owner measured and resolved it in its onLayout; null before the first
+  // layout.
+  height: number | null
+  // The rows' column, for the owner to measure (its box is the natural
+  // height, whatever the viewport shows).
+  listRef?: (node: { id: number }) => void
+  scrollRef?: (scroll: Scroll) => void
+  children?: any
+}
+
+/**
+ * The rows of a popup: a column that scrolls once taller than the room it
+ * has. A scroll viewport has no natural height (its minimum is 0, so a max
+ * alone collapses it: see createScroll), so the owner measures the column
+ * through `listRef` and sizes the list explicitly. Until measured it stands
+ * at the window height, so the viewport never reads 0 while its popup is
+ * still parked offscreen or hidden.
+ */
+export function PopupList(props: PopupListProps) {
+  let height = () => (props.height == null ? env.windowSize.height : Math.max(0, props.height))
+  return (
+    <ScrollView layout={{ height: height() }} scrollRef={props.scrollRef}>
+      <view ref={props.listRef} flexDirection="column">
+        {props.children}
+      </view>
+    </ScrollView>
+  )
+}

package/src/scroll-view.tsx

@@ -1,7 +1,8 @@
-import { callRef, createPan, createScroll, createSignal, getBoundingBoxViewport, getLayoutBox } from "@solidrt/core"
+import { callRef, createPan, createScroll, createSignal, getBoundingBoxViewport, getLayoutBox, onCleanup } from "@solidrt/core"
 import type { InputProps, LayoutProps, PointerEvent, Scroll, TransitionCurve, TransitionEndEvent, WheelEvent } from "@solidrt/core"
 import type { StyleProps, TransitionProps, TransitionScrollProp, TransitionStyleProp, TransitionViewProp } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
+import { registerScrollViewport } from "./focus-nav"
 
 export interface ScrollViewProps
   extends InputProps,
@@ -73,6 +74,10 @@ export function ScrollView(props: ScrollViewProps) {
     { axis: props.horizontal ? "horizontal" : "vertical" },
   )
   callRef(() => props.scrollRef, scroll)
+  // The focus navigation brings a control it focuses in the viewport into
+  // view; registered from the viewport's ref, released with the component.
+  let unregister: (() => void) | undefined
+  onCleanup(() => unregister?.())
 
   // Content follows the finger: it moves opposite to scroll offsets, which
   // grow toward the bottom/right. The lift's velocity (parent-frame px/s,
@@ -208,7 +213,10 @@ export function ScrollView(props: ScrollViewProps) {
           an instant write needs the withdrawn declaration to land before the
           value in the same flush, or the value starts a spring anyway. */}
       <view
-        ref={(n: { id: number }) => (viewport = n)}
+        ref={(n: { id: number }) => {
+          viewport = n
+          unregister = registerScrollViewport(n.id, scroll)
+        }}
         flex={1}
         overflow="hidden"
         clipRadius={props.style?.borderRadius}

package/src/select.tsx

@@ -1,6 +1,8 @@
-import { createEffect, createSignal, createPortal, onBack, onLayout, getBoundingBox, Show, For, env } from "@solidrt/core"
-import type { LayoutProps } from "@solidrt/core"
+import { createEffect, createSignal, createPortal, onBack, onCleanup, onLayout, getBoundingBox, Show, For, env, untrack } from "@solidrt/core"
+import type { BoundingBox, LayoutProps, Scroll } from "@solidrt/core"
 import { createPress } from "./press"
+import { pushNavScope } from "./focus-nav"
+import { placePopup, PopupList } from "./popup"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
@@ -8,7 +10,7 @@ import { typeStyle } from "./typography"
 import type { Option, StyleProps, TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
 import { Icon } from "./icon"
-import { colorFade, popupFade, popupFadeOut, PressFeedback, travelMotion } from "./motion"
+import { colorFade, popupFadeOut, PressFeedback, travelMotion } from "./motion"
 import { Surface } from "./surface"
 
 export interface SelectProps<T = unknown> extends TransitionProps {
@@ -24,21 +26,22 @@ export interface SelectProps<T = unknown> extends TransitionProps {
   style?: StyleProps
 }
 
-// Distance between the trigger and the dropdown.
-let gap = () => theme.spacing.sm
-// Minimum distance kept between the dropdown and the window edges.
-let margin = () => theme.spacing.sm
+// Scrim kept visible above a bottom sheet at its tallest.
+let sheetClearance = () => theme.spacing.xl
 
 /**
  * A single-choice picker whose presentation forks on the interaction policy:
- * desktop/hybrid opens an anchored dropdown under the trigger (flipping above
- * when there is no room), touch opens a bottom sheet over a scrim. Same
- * value/onChange contract either way; pressing outside, Escape and the user's
- * back close without a change.
- * The option list is not scrollable yet, so keep it short.
+ * desktop/hybrid opens an anchored dropdown under the trigger (above it when
+ * only that side has the room), touch opens a bottom sheet over a scrim.
+ * Same value/onChange contract either way; pressing outside, Escape and the
+ * user's back close without a change. A list taller than the room scrolls,
+ * opening with the selected option in view, and while open the options are
+ * the focus navigation's scope.
  */
 export function Select<T>(props: SelectProps<T>) {
   let trigger: { id: number } | undefined
+  // The selected option's row while a presentation is open.
+  let selectedRow: { id: number } | undefined
   let [open, setOpen] = createSignal(false)
   // The value overload: as far as TypeScript knows T could be a function,
   // which createSignal would read as a compute; the cast picks the value form.
@@ -73,7 +76,11 @@ export function Select<T>(props: SelectProps<T>) {
     let press = createPress({ onPress: () => choose(p.option.value) })
     return (
       <view
-        ref={press.ref}
+        ref={(n: { id: number }) => {
+          press.ref(n)
+          // A mount-time snapshot: the row that is selected as the list opens.
+          if (p.option.value === untrack(value)) selectedRow = n
+        }}
         repaintBoundary
         flexDirection="row"
         alignItems="center"
@@ -94,30 +101,64 @@ export function Select<T>(props: SelectProps<T>) {
     )
   }
 
-  // Anchored under the trigger, sized at least as wide as it. Positioned like
-  // Tooltip: portal at the window root, pinned at 0,0 and moved with the x/y
-  // paint transforms after measuring, so tracking the anchor never reflows.
-  // Glows with theme.glow.overlay (the sheet sits on a scrim and does not).
+  // Once per opening, once the list has its final size (the scroll range
+  // matches the rows' overflow, so the write is not clamped against a stale
+  // range): the selected row to the middle of the list, without motion.
+  let createReveal = () => {
+    let done = false
+    return (scroll: Scroll | undefined, list: BoundingBox, height: number) => {
+      if (done || !scroll) return
+      let overflow = Math.max(0, list.height - height)
+      if (overflow === 0) {
+        done = true
+        return
+      }
+      if (scroll.range().y !== overflow) return
+      let row = selectedRow && getBoundingBox(selectedRow)
+      done = true
+      if (row) scroll.scrollTo({ y: row.y - list.y - (height - row.height) / 2, behavior: "instant" })
+    }
+  }
+
+  // Anchored under the trigger, sized at least as wide as it, on the side
+  // with room (placePopup): portal at the window root, pinned at 0,0 and
+  // moved with the x/y paint transforms after measuring, so tracking the
+  // anchor never reflows. The rows scroll once taller than the room. Glows
+  // with theme.glow.overlay (the sheet sits on a scrim and does not).
   let Dropdown = () => {
     let menu: { id: number } | undefined
+    let list: { id: number } | undefined
+    let scroll: Scroll | undefined
     let [pos, setPos] = createSignal<{ x: number; y: number } | null>(null)
     let [minWidth, setMinWidth] = createSignal(0)
+    let [listHeight, setListHeight] = createSignal<number | null>(null)
+    let reveal = createReveal()
+    selectedRow = undefined
+    // The padding above and below the rows: the popup's height beyond the list's.
+    let chrome = () => 2 * theme.spacing.sm
     onLayout(() => {
       let a = trigger && getBoundingBox(trigger)
       let b = menu && getBoundingBox(menu)
-      if (!a || !b) return
+      let l = list && getBoundingBox(list)
+      if (!a || !b || !l) return
       if (a.width !== minWidth()) setMinWidth(a.width)
-      let x = Math.round(Math.min(Math.max(a.x, margin()), env.windowSize.width - b.width - margin()))
-      let below = a.y + a.height + gap()
-      let y = Math.round(below + b.height > env.windowSize.height - margin() ? a.y - b.height - gap() : below)
+      let p = placePopup(a, { width: b.width, height: l.height + chrome() })
+      let h = Math.min(l.height, p.room - chrome())
+      if (h !== listHeight()) setListHeight(h)
       let cur = pos()
-      if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
+      if (!cur || cur.x !== p.x || cur.y !== p.y) setPos({ x: p.x, y: p.y })
+      reveal(scroll, l, h)
     })
+    // Open, the options are the focus navigation's scope (as a Modal is), so
+    // a pad or keyboard cannot walk onto the screen behind the dropdown.
+    let popScope: (() => void) | undefined
+    onCleanup(() => popScope?.())
     // The fade is driven by the position write, not a mount-time `from`: the
     // menu parks offscreen until measured, so a `from` would play unseen.
     // The exit fade lives on this root (the node the close unmounts).
     return createPortal(
       <view
+        ref={(n: { id: number }) => (popScope = pushNavScope(n))}
         position="absolute"
         top={0}
         left={0}
@@ -148,19 +189,50 @@ export function Select<T>(props: SelectProps<T>) {
             glow={styled().glow}
             outline={{ color: theme.color.border, width: theme.borderWidth.sm }}
           />
-          <For each={props.options}>
-            {(o: Option<T>) => <OptionRow option={o} padY={space("sm")} />}
-          </For>
+          <PopupList height={listHeight()} listRef={(n) => (list = n)} scrollRef={(s) => (scroll = s)}>
+            <For each={props.options}>
+              {(o: Option<T>) => <OptionRow option={o} padY={space("sm")} />}
+            </For>
+          </PopupList>
         </view>
       </view>,
     )
   }
 
   // Bottom sheet over a scrim; the content is a sibling of the scrim (Modal's
-  // trick) so pressing an option never has the scrim on its hit path.
-  let Sheet = () =>
-    createPortal(
-      <view position="absolute" top={0} left={0} right={0} bottom={0} opacity={1} transition={popupFade()}>
+  // trick) so pressing an option never has the scrim on its hit path. The
+  // rows scroll once the sheet would reach the clearance under the top safe
+  // area; hidden until measured, as the dropdown is, so the full-height
+  // list of the measuring frame is never seen.
+  let Sheet = () => {
+    let list: { id: number } | undefined
+    let scroll: Scroll | undefined
+    let [listHeight, setListHeight] = createSignal<number | null>(null)
+    let reveal = createReveal()
+    selectedRow = undefined
+    // The padding above and below the rows: the sheet's height beyond the list's.
+    let chrome = () => 2 * theme.spacing.md + env.safeArea.bottom
+    onLayout(() => {
+      let l = list && getBoundingBox(list)
+      if (!l) return
+      let room = env.windowSize.height - env.safeArea.top - sheetClearance() - chrome()
+      let h = Math.min(l.height, room)
+      if (h !== listHeight()) setListHeight(h)
+      reveal(scroll, l, h)
+    })
+    let popScope: (() => void) | undefined
+    onCleanup(() => popScope?.())
+    return createPortal(
+      <view
+        ref={(n: { id: number }) => (popScope = pushNavScope(n))}
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        opacity={listHeight() != null ? 1 : 0}
+        transition={popupFadeOut()}
+      >
         <view position="absolute" top={0} left={0} right={0} bottom={0} onPointerDown={() => setOpen(false)}>
           <d-rect transition={colorFade()} color={theme.color.scrim} />
         </view>
@@ -174,12 +246,15 @@ export function Select<T>(props: SelectProps<T>) {
           paddingBottom={theme.spacing.md + env.safeArea.bottom}
         >
           <Surface role="overlay" fill={theme.color.surface} radius={theme.radius.sm} material={styled().material} glow={null} />
-          <For each={props.options}>
-            {(o: Option<T>) => <OptionRow option={o} padY={Math.round(theme.spacing.md * 1.5)} />}
-          </For>
+          <PopupList height={listHeight()} listRef={(n) => (list = n)} scrollRef={(s) => (scroll = s)}>
+            <For each={props.options}>
+              {(o: Option<T>) => <OptionRow option={o} padY={Math.round(theme.spacing.md * 1.5)} />}
+            </For>
+          </PopupList>
         </view>
       </view>,
     )
+  }
 
   let press = createPress({
     onPress: () => {

package/src/tooltip.tsx

@@ -1,5 +1,6 @@
-import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, env, children } from "@solidrt/core"
+import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, children } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
+import { placePopup } from "./popup"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
@@ -17,16 +18,13 @@ export interface TooltipProps extends TransitionProps {
   children?: any
   // Hover delay in milliseconds before showing.
   delay?: number
-  // Which side of the anchor the bubble appears on.
+  // Which side of the anchor the bubble prefers; the other side is taken
+  // when only it has the room.
   placement?: "top" | "bottom"
   layout?: LayoutProps
 }
 
 const DELAY = 500
-// Distance between the anchor and the bubble.
-let gap = () => theme.spacing.sm
-// Minimum distance kept between the bubble and the window edges.
-let margin = () => theme.spacing.sm
 
 /**
  * A hover-only affordance: under desktop/hybrid interaction policies, resting a
@@ -57,8 +55,8 @@ export function Tooltip(props: TooltipProps) {
   // The bubble sits at the window root's origin and is placed with the x/y
   // paint transforms, so repositioning never reflows. Measured after its first
   // layout (parked offscreen until then), then pinned to the anchor's current
-  // box; recomputed each layout so it stays attached when the anchor moves
-  // (scrolling, resizes).
+  // box (placePopup, centered on the anchor); recomputed each layout so it
+  // stays attached when the anchor moves (scrolling, resizes).
   let Bubble = () => {
     let bubble: { id: number } | undefined
     let [pos, setPos] = createSignal<{ x: number; y: number } | null>(null)
@@ -66,11 +64,9 @@ export function Tooltip(props: TooltipProps) {
       let a = anchor && getBoundingBox(anchor)
       let b = bubble && getBoundingBox(bubble)
       if (!a || !b) return
-      let x = a.x + a.width / 2 - b.width / 2
-      x = Math.round(Math.min(Math.max(x, margin()), env.windowSize.width - b.width - margin()))
-      let y = Math.round(props.placement === "bottom" ? a.y + a.height + gap() : a.y - b.height - gap())
+      let p = placePopup(a, b, { side: props.placement ?? "top", align: "center" })
       let cur = pos()
-      if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
+      if (!cur || cur.x !== p.x || cur.y !== p.y) setPos({ x: p.x, y: p.y })
     })
     // Resolved once via children(): the typeof probe and the mount sites must
     // share one build - reading the raw getter again would orphan native nodes.