diff --git a/.changeset/profile-tab-responsiveness.md b/.changeset/profile-tab-responsiveness.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/profile-tab-responsiveness.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/mosaic/bundlewatch.config.json b/packages/mosaic/bundlewatch.config.json
index c4b17c00eb7..8fb82f4a261 100644
--- a/packages/mosaic/bundlewatch.config.json
+++ b/packages/mosaic/bundlewatch.config.json
@@ -1,6 +1,6 @@
 {
   "files": [
     { "path": "./dist/index.js", "maxSize": "125KB" },
-    { "path": "./dist/styles.css", "maxSize": "14KB" }
+    { "path": "./dist/styles.css", "maxSize": "15KB" }
   ]
 }
diff --git a/packages/mosaic/src/components/panel/panel.styles.ts b/packages/mosaic/src/components/panel/panel.styles.ts
index c9e74458738..adc85003f85 100644
--- a/packages/mosaic/src/components/panel/panel.styles.ts
+++ b/packages/mosaic/src/components/panel/panel.styles.ts
@@ -13,10 +13,7 @@ export const styles = stylex.create({
     display: 'block',
   },
 
-  /**
-   * The headline as a button: the heading's own type, inline so the caret can align to its
-   * x-height, with a little room around it for the focus ring.
-   */
+  // Inline so the caret can align to the title's x-height.
   navTrigger: {
     font: 'inherit',
     borderRadius: radiusVars['--cl-radius-md'],
@@ -28,16 +25,10 @@ export const styles = stylex.create({
     display: 'inline',
     textAlign: 'start',
   },
-  /**
-   * Beside the title, `vertical-align: middle`: the caret's midpoint on the baseline plus half the
-   * x-height, which centers it on the lowercase letters rather than the line box. Sized in `em`
-   * through the icon's `inherit` size, so it scales with the heading; coloured through the icon's
-   * own variable rather than `color`, which the icon sets itself.
-   */
+  // `vertical-align: middle` centers the caret on the title's x-height rather than the line box.
   caret: {
     '--_cl-icon-color': colorVars['--cl-color-foreground-secondary'],
-    fontSize: '0.6em',
-    marginInlineStart: '0.25em',
+    marginInlineStart: space['1'],
     verticalAlign: 'middle',
   },
   sections: {
diff --git a/packages/mosaic/src/components/panel/panel.tsx b/packages/mosaic/src/components/panel/panel.tsx
index 2cb11c725ce..174bebb1cd8 100644
--- a/packages/mosaic/src/components/panel/panel.tsx
+++ b/packages/mosaic/src/components/panel/panel.tsx
@@ -2,6 +2,7 @@ import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
 import { useRender } from '../../primitives/utils';
+import { isKeyboardEvent } from '../../primitives/utils/interaction-modality';
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { focusOutline } from '../../utils/focus-outline.styles';
@@ -24,15 +25,7 @@ const Root = React.forwardRef<HTMLDivElement, PanelRootProps>(function PanelRoot
   });
 });
 
-/**
- * A page's headline. Inside a profile that has gone compact the headline IS the way to the other
- * pages: the heading holds a button — the title, and a caret beside it — that opens the navigation
- * sheet. Anywhere else — the wide layout, or a page rendered on its own — it is the heading alone.
- *
- * The caret sits `vertical-align: middle`, which CSS defines as the box's midpoint on the parent's
- * baseline plus half its x-height: optically centered on the lowercase letters rather than on the
- * line box. That needs an inline formatting context, so the button is `display: inline`.
- */
+// In a compact profile the heading holds a button that opens the navigation.
 const Title = React.forwardRef<HTMLDivElement, PanelTitleProps>(function PanelTitle(
   { children, render, xstyle, ...rest },
   ref,
@@ -42,7 +35,6 @@ const Title = React.forwardRef<HTMLDivElement, PanelTitleProps>(function PanelTi
   const registerPageTitle = profile?.registerPageTitle;
   const page = panel?.value;
   const level = useHeadingLevel();
-  // The sheet's return-focus target. A no-op outside a profile's page, where there is no sheet.
   const registerTrigger = React.useCallback(
     (element: HTMLButtonElement | null) => {
       if (page !== undefined) {
@@ -69,7 +61,9 @@ const Title = React.forwardRef<HTMLDivElement, PanelTitleProps>(function PanelTi
               type='button'
               aria-haspopup='dialog'
               aria-expanded={profile.navOpen}
-              onClick={profile.openNav}
+              onClick={event =>
+                profile.navOpen ? profile.closeNav() : profile.openNav(isKeyboardEvent(event.nativeEvent))
+              }
               {...mergeStyleProps(
                 themeProps('profile-nav-trigger'),
                 stylex.props(reset.base, styles.navTrigger, focusOutline.visible),
@@ -78,7 +72,7 @@ const Title = React.forwardRef<HTMLDivElement, PanelTitleProps>(function PanelTi
               {children}
               <Icon
                 name='chevron-down'
-                size='inherit'
+                size='sm'
                 {...mergeStyleProps(themeProps('profile-nav-trigger-caret'), stylex.props(styles.caret))}
               />
             </button>
@@ -105,9 +99,7 @@ const Sections = React.forwardRef<HTMLDivElement, PanelSectionsProps>(function P
 });
 
 /**
- * A page of content, composed through `Panel.Root`, `Panel.Title`, and `Panel.Sections`. The
- * sections sit one heading level below the title. Every part accepts the Mosaic `render` prop and
- * forwards its ref.
+ * A page of content. `Panel.Sections` sit one heading level below `Panel.Title`.
  *
  * ```tsx
  * <Panel.Root>
diff --git a/packages/mosaic/src/components/popover/popover.tsx b/packages/mosaic/src/components/popover/popover.tsx
index 6edaa3c27c7..bcbdcb79603 100644
--- a/packages/mosaic/src/components/popover/popover.tsx
+++ b/packages/mosaic/src/components/popover/popover.tsx
@@ -2,7 +2,7 @@ import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
 import { useAccessibleNameWarning } from '../../hooks/useAccessibleNameWarning';
-import type { PopoverProps as HeadlessPopoverProps } from '../../primitives/popover';
+import type { PopoverFocusTarget, PopoverProps as HeadlessPopoverProps } from '../../primitives/popover';
 import { Popover as Primitive } from '../../primitives/popover';
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
@@ -13,19 +13,12 @@ export type PopoverSize = 'sm' | 'md' | 'lg' | 'anchor';
 
 export type PopoverRootProps = HeadlessPopoverProps;
 
-/**
- * The headless parts type their props (and the `render` callback's argument) against
- * the raw tag props, which carry the non-standard HTML `color` attribute typed
- * `string`. Re-typing them through `MosaicComponentProps` drops it, so a `render`
- * callback can spread straight into a Mosaic component whose own `color` is a narrow
- * variant union.
- */
+// Drops the raw `color: string` attr so a `render` callback can spread into a Mosaic component.
 export type PopoverTriggerProps = MosaicComponentProps<'button'>;
 export type PopoverCloseProps = MosaicComponentProps<'button'>;
 export type PopoverTitleProps = MosaicComponentProps<'h2'>;
 export type PopoverDescriptionProps = MosaicComponentProps<'p'>;
 
-/** The anchor. Renders a `<button>`; `render` swaps in another element. */
 const Trigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(
   { xstyle, ...rest },
   ref,
@@ -38,7 +31,6 @@ const Trigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(functio
   );
 });
 
-/** Dismisses the popover. Renders a `<button>`; `render` swaps in another element. */
 const Close = React.forwardRef<HTMLButtonElement, PopoverCloseProps>(function PopoverClose({ xstyle, ...rest }, ref) {
   return (
     <Primitive.Close
@@ -48,7 +40,6 @@ const Close = React.forwardRef<HTMLButtonElement, PopoverCloseProps>(function Po
   );
 });
 
-/** Names the dialog. Renders an `<h2>` wired to the popup's `aria-labelledby`. */
 const Title = React.forwardRef<HTMLHeadingElement, PopoverTitleProps>(function PopoverTitle({ xstyle, ...rest }, ref) {
   return (
     <Primitive.Title
@@ -58,7 +49,6 @@ const Title = React.forwardRef<HTMLHeadingElement, PopoverTitleProps>(function P
   );
 });
 
-/** Describes the dialog. Renders a `<p>` wired to the popup's `aria-describedby`. */
 const Description = React.forwardRef<HTMLParagraphElement, PopoverDescriptionProps>(function PopoverDescription(
   { xstyle, ...rest },
   ref,
@@ -71,26 +61,6 @@ const Description = React.forwardRef<HTMLParagraphElement, PopoverDescriptionPro
   );
 });
 
-/**
- * Mosaic Popover: a floating box anchored to a trigger, built on the
- * `primitives/popover` primitive. Composed via dot syntax:
- * `Popover.Root`, `Popover.Trigger`, `Popover.Popup`, plus `Popover.Title`,
- * `Popover.Description` and `Popover.Close` for the popup's contents.
- *
- * The popover owns only what it means to float — trigger wiring, ARIA, focus
- * management, positioning, stacking, viewport clamps, and the enter/exit
- * transition. It paints no surface of its own: background, border, radius,
- * shadow and padding come from whatever is rendered inside it (typically a
- * `Card`), so the two never both draw a border.
- *
- * `Popover.Popup` renders the portal and the floating positioner itself —
- * neither is a part a consumer composes, so they stay out of the public API.
- * Each styled part spreads `themeProps` + `stylex.props` through
- * `mergeStyleProps`, so it carries the public `.cl-<slot>` class and StyleX
- * atoms while the headless part keeps its floating behavior, refs, and ARIA
- * wiring.
- */
-
 function Positioner({ children, ...rest }: React.ComponentPropsWithoutRef<typeof Primitive.Positioner>) {
   const [node, setNode] = React.useState<HTMLDivElement | null>(null);
   useAccessibleNameWarning(node, 'Popover');
@@ -107,38 +77,26 @@ function Positioner({ children, ...rest }: React.ComponentPropsWithoutRef<typeof
 }
 
 export interface PopoverPopupProps extends MosaicComponentProps<'div'> {
-  /** Positions against this element instead of the trigger. */
+  /** Positions against this element instead of the trigger; with no trigger, it acts as one. */
   anchor?: HTMLElement | null;
-  /** Width of the floating box. */
+  finalFocus?: PopoverFocusTarget;
   size?: PopoverSize;
-  /**
-   * Names the dialog for assistive technology. Required unless the contents render a
-   * `Popover.Title`, which wires `aria-labelledby` instead.
-   */
+  /** Required unless the contents render a `Popover.Title`. */
   'aria-label'?: string;
-  /** Names the dialog from an existing element. Alternative to `aria-label`. */
   'aria-labelledby'?: string;
 }
 
-/**
- * The floating box. Portals itself out of the tree and positions against
- * `Popover.Trigger`; supply the surface inside it, usually a `Card`.
- */
+// Paints no surface of its own; supply one inside it, usually a `Card`.
 const Popup = React.forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(
-  { anchor, xstyle, size = 'md', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest },
+  { anchor, finalFocus, xstyle, size = 'md', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest },
   ref,
 ) {
   return (
     <Primitive.Portal>
-      {/*
-        The positioner is the `role="dialog"` element, so the accessible name belongs on
-        it rather than on the popup. Spread conditionally: the headless positioner merges
-        these over its own `aria-labelledby` (set once a `Popover.Title` mounts), so
-        passing an explicit `undefined` would delete the Title's label rather than leave
-        it alone.
-      */}
+      {/* Spread conditionally: an explicit `undefined` would drop the `Popover.Title`'s label. */}
       <Positioner
         anchor={anchor}
+        finalFocus={finalFocus}
         {...(ariaLabel == null ? {} : { 'aria-label': ariaLabel })}
         {...(ariaLabelledby == null ? {} : { 'aria-labelledby': ariaLabelledby })}
       >
@@ -155,11 +113,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopoverPopupProps>(function Popov
   );
 });
 
-/**
- * Mosaic `Popover` — a floating box anchored to a trigger. Composed via dot
- * syntax: `Popover.Root`, `Popover.Trigger`, `Popover.Popup`, `Popover.Title`,
- * `Popover.Description`, `Popover.Close`.
- */
+/** A floating box anchored to a trigger. */
 export const Popover = {
   Root: Primitive.Root,
   Trigger,
diff --git a/packages/mosaic/src/components/profile/profile.context.ts b/packages/mosaic/src/components/profile/profile.context.ts
index 10fabe60bb7..018f5a15f6f 100644
--- a/packages/mosaic/src/components/profile/profile.context.ts
+++ b/packages/mosaic/src/components/profile/profile.context.ts
@@ -1,27 +1,20 @@
 import React from 'react';
 
 export interface ProfileContextValue {
-  /** The id `Profile.Title` renders under; the navigation and the sheet point their names at it. */
   titleId: string;
   renderBranding: boolean;
-  /** Below `COMPACT_WIDTH`: the navigation lives in a sheet, opened from a page's title. */
   compact: boolean;
+  navLayout: 'column' | 'popover' | 'sheet';
   navOpen: boolean;
-  openNav: () => void;
+  navOpenedByKeyboard: boolean;
+  openNav: (byKeyboard: boolean) => void;
   closeNav: () => void;
-  /** The selected page, by `value`. */
   value: string;
-  /**
-   * `Panel.Title` registers the control it renders under its page's `value`, the way a tab
-   * registers with the tabs root; the sheet returns focus through `pageTitleFor`.
-   */
   registerPageTitle: (value: string, element: HTMLElement | null) => void;
   pageTitleFor: (value: string) => HTMLElement | null;
-  /** Flush: the page's own content, selected by `elevation='flush'`. */
   inline: boolean;
 }
 
 export const ProfileContext = React.createContext<ProfileContextValue | null>(null);
 
-/** The page a `Panel.Title` is in: the id it renders under, so the panel can be named by it, and the page's `value`. */
 export const ContentPanelContext = React.createContext<{ titleId: string; value: string } | null>(null);
diff --git a/packages/mosaic/src/components/profile/profile.styles.ts b/packages/mosaic/src/components/profile/profile.styles.ts
index f101037c4ff..b1346d34dc3 100644
--- a/packages/mosaic/src/components/profile/profile.styles.ts
+++ b/packages/mosaic/src/components/profile/profile.styles.ts
@@ -11,44 +11,22 @@ import {
 } from '../../tokens.stylex';
 import { scrollAreaRoot, scrollAreaViewport } from '../scroll-area';
 
-/**
- * The compact layout, queried against the nearest container rather than the window: the root
- * itself standalone or inline, so the same surface collapses in a narrow layout slot or an inline
- * dialog alike — and over the page the dialog's viewport, since the root stops being a container
- * there (`rootInDialog`). The popup floats inside an inset, so its content is always narrower than
- * the screen; measured on its own the profile would collapse a step before the dialog filled the
- * screen, and for that stretch stand frameless inside a floating popup. Reading the same box the
- * dialog reads, the two change together. Unnamed on purpose: a name would bind it to one of them.
- * A container cannot query itself, which is why the grid lives on an inner element: the root is
- * the container, the layout inside it is what the query reshapes.
- *
- * `48rem` is the dialog's phone band too (`PHONE` in `dialog.styles.ts`); the two must agree, and
- * a literal in each is what StyleX allows — a value shared through `defineConsts` reaches an
- * at-rule prelude as a placeholder that swingset's bundler does not always resolve.
- */
+// Unnamed so over the page it queries the dialog's viewport; must match `PHONE` in `dialog.styles.ts`.
+// A literal: `defineConsts` in an at-rule prelude breaks the swingset build.
 const compact = '@container (width < 48rem)';
+const phone = '@media (width < 40rem)';
 
-/** How far the content's clip edge — and the scrollbar with it — sits inside the frame's corners. */
 const SCROLL_INSET = space['1.5'];
 
 const NAV_WIDTH = `calc(${space['40']} + ${space['15']})`;
-/** The pages' reading width — see `contentBody`. */
 const CONTENT_MAX_WIDTH = '56rem';
 
 const NAV_GAP = space['0.5'];
 const HALF_GAP = `calc(-1 * ${NAV_GAP} / 2)`;
 
 export const styles = stylex.create({
-  /**
-   * The query container, and the flex column the frame fills. It paints NOTHING and carries no
-   * band of its own — an element is never its own query container, so every compact rule lives on
-   * `layout`, one level inside. It is also the containing block for the dismiss the root carries
-   * inside a dialog. A fixed `width` capped by `max-width`, so a `profile` dialog's popup, which
-   * sizes to its content, takes the full width rather than the width of the current page.
-   */
+  // A fixed width so a content-sized `profile` dialog popup still takes the full width.
   root: {
-    // Centered where the host is wider. The frame runs wide; the content inside is held to a
-    // reading width of its own, see `contentBody`.
     marginInline: 'auto',
     containerName: 'cl-profile',
     containerType: 'inline-size',
@@ -59,15 +37,13 @@ export const styles = stylex.create({
     width: '94.625rem',
   },
 
-  /**
-   * The compact query's answer, for `Profile.Root` to read: `1px` wide, `2px` once the query
-   * matches. Inside the root because an element is never its own query container; out of flow,
-   * unpainted and untouchable, so it costs the layout nothing.
-   */
   sentinel: {
     blockSize: '1px',
     inlineSize: {
-      [compact]: '2px',
+      [compact]: {
+        default: '2px',
+        [phone]: '3px',
+      },
       default: '1px',
     },
     pointerEvents: 'none',
@@ -75,32 +51,14 @@ export const styles = stylex.create({
     visibility: 'hidden',
   },
 
-  /**
-   * Over the page the popup decides the height: the root grows to fill it (the popup is a column
-   * flex) and the frame inside follows. Not inline — an inline dialog is in flow and has no height
-   * of its own to hand down, so the frame keeps its fixed one.
-   */
   rootInDialog: {
-    // Not a container over the page: the compact query then reaches the dialog's viewport, and the
-    // profile collapses exactly when the dialog fills the screen — see `compact`.
+    // Not a container here, so `compact` reaches the dialog's viewport.
     containerType: 'normal',
     flexGrow: 1,
     minHeight: 0,
   },
 
-  /**
-   * The frame: border, radius and background, so the profile looks the same standalone and as the
-   * content of a `profile` dialog — that size paints nothing itself. Compact, the frame goes: the
-   * profile is the page there, flush with whatever holds it — a full-screen popup or an inline host.
-   *
-   * The height is FIXED, not content-driven: switching pages must never resize the surface or shift
-   * the page around it. Standalone and inline it is `45rem` — compact, the viewport's height —
-   * and a host with a definite slot overrides it with one rule. Over the page the popup decides
-   * instead; see `layoutInDialog`.
-   *
-   * The grid inside: a definite row is what lets the content column scroll instead of growing — an
-   * `auto` row sizes to its content and happily exceeds the container.
-   */
+  // A fixed height so switching pages never resizes the surface.
   layout: {
     borderColor: colorVars['--cl-color-border'],
     borderRadius: {
@@ -112,16 +70,13 @@ export const styles = stylex.create({
       [compact]: '0px',
       default: '1px',
     },
-    // `clip` rather than `hidden`: the surface must never become a scroll container itself, or
-    // focusing something in the content column would scroll the whole surface instead of the column.
+    // `clip`, not `hidden`: a scroll container here would scroll the surface instead of the column.
     overflow: 'clip',
     backgroundColor: colorVars['--cl-color-background'],
     blockSize: {
       [compact]: '100dvh',
       default: '45rem',
     },
-    // In a page — standalone or inline — the frame is its border alone, the way a card sits flat in
-    // content. The card's elevation belongs to the overlay; see `layoutInDialog`.
     boxShadow: 'none',
     color: colorVars['--cl-color-foreground'],
     display: 'grid',
@@ -133,10 +88,6 @@ export const styles = stylex.create({
     minHeight: 0,
   },
 
-  /**
-   * Inline, the profile is the page's own content: no frame, no background, no fixed height, and
-   * no scroll region of its own — the page scrolls. Flush with whatever holds it.
-   */
   layoutInline: {
     borderRadius: 0,
     borderWidth: '0px',
@@ -145,11 +96,9 @@ export const styles = stylex.create({
     backgroundColor: 'transparent',
     blockSize: 'auto',
     boxShadow: 'none',
-    // No frame to inset from, so neither column carries padding; a gap holds them apart.
     columnGap: space['10'],
     gridTemplateRows: 'auto',
-    // As wide as the navigation, the gap and the pages' reading column, centered in the host. The
-    // explicit width matters: auto margins on a column-flex item otherwise shrink it to its content.
+    // Explicit width: auto margins otherwise shrink a column-flex item to its content.
     inlineSize: '100%',
     maxWidth: `calc(${NAV_WIDTH} + ${space['10']} + ${CONTENT_MAX_WIDTH})`,
   },
@@ -157,8 +106,6 @@ export const styles = stylex.create({
   layoutInDialog: {
     borderWidth: '0px',
     blockSize: 'auto',
-    // Lifted off the page like a card in a dialog: the card's elevation, none compact, where the
-    // popup is the screen and there is nothing to lift off.
     boxShadow: {
       [compact]: 'none',
       default: shadowVars['--cl-shadow-lg'],
@@ -172,9 +119,7 @@ export const styles = stylex.create({
     borderInlineEndColor: colorVars['--cl-color-border'],
     borderInlineEndStyle: 'solid',
     borderInlineEndWidth: '1px',
-    // Until measured — before hydration — the column renders in place at any width, so compact
-    // CSS hides it rather than stack a tablist over the page. The sheet's copy is portalled out of
-    // the container and never matches.
+    // Hidden in CSS too, so the column never shows on a phone before measuring.
     display: {
       [compact]: 'none',
       default: 'flex',
@@ -184,22 +129,36 @@ export const styles = stylex.create({
     minWidth: 0,
   },
 
-  /**
-   * Nothing to inset from and no pages beside it to edge: inline there is no frame, and in the
-   * sheet the sheet's own content padding frames it.
-   */
   navFlush: {
     padding: 0,
     borderInlineEndWidth: '0px',
   },
 
+  navPopover: {
+    padding: space['1'],
+    borderRadius: radiusVars['--cl-radius-lg'],
+    backgroundColor: colorVars['--cl-color-background'],
+    boxShadow: shadowVars['--cl-shadow-md'],
+    color: colorVars['--cl-color-foreground'],
+    maxHeight: 'var(--cl-available-height)',
+    minWidth: '12.5rem',
+    overflowY: 'auto',
+    width: 'max-content',
+  },
+
+  navSheet: {
+    minBlockSize: 0,
+  },
+
+  navInPopover: {
+    outline: 'none',
+  },
+
   navList: {
     gap: NAV_GAP,
     display: 'flex',
     flexDirection: 'column',
-    // Positioned, and a stacking context of its own, so a consumer can hang marks off it — an
-    // anchor-positioned highlight as `::before` / `::after` at `z-index: -1` lands under the items'
-    // text and above this surface's background. See the Profile docs' customisation example.
+    // Positioned and isolated as hooks for consumer highlight marks at `z-index: -1`.
     isolation: 'isolate',
     position: 'relative',
     minWidth: 0,
@@ -216,6 +175,7 @@ export const styles = stylex.create({
     alignItems: 'center',
     backgroundColor: {
       default: 'transparent',
+      ':focus-visible': colorVars['--cl-color-border-subtle'],
       ':where([data-selected])': colorVars['--cl-color-border-subtle'],
       ':active': colorVars['--cl-color-border-subtle'],
       '@media (hover: hover)': {
@@ -233,17 +193,17 @@ export const styles = stylex.create({
     fontSize: typeScaleVars['--cl-text-sm-size'],
     fontWeight: fontWeightVars['--cl-font-medium'],
     lineHeight: typeScaleVars['--cl-text-sm-leading'],
-    // The containing block for the hit target below, and for nothing else.
     position: 'relative',
     textAlign: 'start',
     whiteSpace: 'nowrap',
+    // Above the neighbors, so the selected item's fill cannot cover the ring.
+    zIndex: { default: null, ':focus-visible': 1 },
     minHeight: {
       default: null,
       '@media (pointer: coarse)': targetVars['--cl-target-coarse'],
     },
     width: '100%',
-    // Spans half the gap to each neighbour, so the pointer never falls between destinations. The
-    // ends stay flush with the list.
+    // Spans half the gap each side so the pointer never falls between items.
     '::before': {
       insetInline: 0,
       content: '""',
@@ -277,13 +237,7 @@ export const styles = stylex.create({
     marginBlockStart: 'auto',
   },
 
-  // The content column is the scroll region — composed from the `ScrollArea` atoms, so the
-  // scrollbar and edge fade land on the column's edge and the padding scrolls with the content.
-  //
-  // The column, not the scroller, carries a little of the block padding: a scroll container clips
-  // at its padding edge, so padding on the scroller would not keep content out of the frame's
-  // rounded corners. Here the clip edge sits inside them, and the scroller gives the same amount
-  // back so the page's own padding reads unchanged.
+  // The clip edge sits inside the frame's corners; the scroller gives the padding back.
   content: {
     paddingBlock: {
       [compact]: 0,
@@ -291,18 +245,15 @@ export const styles = stylex.create({
     },
     minWidth: 0,
   },
-  /** Inline the column is not a scroll region, so it carries no inset for a clip edge. */
   contentInline: {
     paddingBlock: 0,
   },
 
-  /** Inline the pages carry no padding of their own: the headline starts level with the first destination. */
   contentViewportInline: {
     paddingBlock: 0,
     paddingInline: 0,
   },
 
-  /** Inline, the branding closes out the pages' column instead of the navigation's. */
   contentBranding: {
     marginBlockStart: space['8'],
   },
@@ -318,7 +269,6 @@ export const styles = stylex.create({
     },
   },
 
-  /** The pages' column: held to a reading width and centered, however wide the frame runs. */
   contentBody: {
     marginInline: 'auto',
     maxInlineSize: CONTENT_MAX_WIDTH,
@@ -326,5 +276,5 @@ export const styles = stylex.create({
 });
 
 export const contentScroll = scrollAreaRoot;
-// A held gutter: switching to a page that does not scroll must not reflow the one that did.
+// A stable gutter so a page that does not scroll does not reflow the one that did.
 export const contentViewportScroll = scrollAreaViewport('stable');
diff --git a/packages/mosaic/src/components/profile/profile.test.tsx b/packages/mosaic/src/components/profile/profile.test.tsx
index 93c559ca09c..1bb9bf8e0cf 100644
--- a/packages/mosaic/src/components/profile/profile.test.tsx
+++ b/packages/mosaic/src/components/profile/profile.test.tsx
@@ -1,5 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -128,8 +128,6 @@ describe('Profile', () => {
   it('is a labelled navigation of tabs beside the selected page', () => {
     renderSurface();
 
-    // The title is a heading for the page outline and the name of the navigation, but not a
-    // visible headline: those belong to the pages.
     const title = screen.getByRole('heading', { level: 2, name: 'User profile' });
     expect(title).toHaveClass('cl-profile-title', 'cl-visually-hidden');
     expect(screen.getByRole('navigation', { name: 'User profile' })).toHaveAttribute('aria-labelledby', title.id);
@@ -180,7 +178,6 @@ describe('Profile', () => {
     expect(container.firstChild).toHaveClass('cl-profile', 'from-render');
   });
 
-  // The profile is often the content of the host's own `main`, or of a dialog.
   it('claims no main landmark', () => {
     renderSurface();
 
@@ -205,9 +202,6 @@ describe('Profile', () => {
     expect(screen.queryByText(/Secured by/)).not.toBeInTheDocument();
   });
 
-  // The compact layout is a container query against the profile itself, so the profile has to BE
-  // a container — drop that and it never collapses, at any width. The rules it drives live one
-  // level in, on the frame: an element is never its own query container.
   it('is the named container its compact layout queries', () => {
     const probe = stylex.create({ container: { containerName: 'cl-profile', containerType: 'inline-size' } });
     const { container } = renderSurface();
@@ -217,8 +211,6 @@ describe('Profile', () => {
     );
   });
 
-  // Unmeasured — before hydration, or the observer's first callback — the column renders in place
-  // at any width; the compact query must hide it, or a phone shows the tablist over the page.
   it('hides the in-place navigation under the compact query', () => {
     const probe = stylex.create({
       hidden: { display: { default: 'flex', '@container (width < 48rem)': 'none' } },
@@ -269,8 +261,7 @@ describe('Profile', () => {
     });
   });
 
-  // Compact is measured, not styled: which box the tablist renders in is a DOM decision. The
-  // measurement is the root's sentinel — `1px` wide, `2px` once the compact query matches.
+  // The sentinel reports 1px column, 2px popover, 3px sheet.
   describe('compact', () => {
     let observe: ((width: number) => void) | null = null;
     const original = globalThis.ResizeObserver;
@@ -283,6 +274,10 @@ describe('Profile', () => {
           this.callback = callback;
         }
         observe(target: Element) {
+          // The popover's positioning observes its anchor too; only the sentinel reports the layout.
+          if (!target.classList.contains('cl-profile-sentinel')) {
+            return;
+          }
           observe = width => {
             Object.defineProperty(target, 'offsetWidth', { configurable: true, value: width });
             Object.defineProperty(target, 'offsetHeight', { configurable: true, value: 600 });
@@ -303,9 +298,8 @@ describe('Profile', () => {
       const user = userEvent.setup();
       const onValueChange = vi.fn();
       renderSurface({ onValueChange });
-      act(() => observe?.(2));
+      act(() => observe?.(3));
 
-      // Nothing in the column; the headline is the way in, and still a heading.
       expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
       const headline = screen.getByRole('button', { name: 'Account' });
       expect(headline).toHaveAttribute('aria-expanded', 'false');
@@ -323,7 +317,93 @@ describe('Profile', () => {
       await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
     });
 
-    it('hands focus to the headline of the page that is showing once the sheet closes', async () => {
+    it('moves the tablist into a popover under the page title off a phone', async () => {
+      const user = userEvent.setup();
+      const onValueChange = vi.fn();
+      renderSurface({ onValueChange });
+      act(() => observe?.(2));
+
+      expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
+      const headline = screen.getByRole('button', { name: 'Account' });
+      await user.click(headline);
+      const popover = screen.getByRole('dialog', { name: 'User profile' });
+      expect(popover).toHaveClass('cl-popover-positioner');
+      expect(popover).toContainElement(screen.getByRole('tablist'));
+      expect(document.querySelector('.cl-drawer-popup')).not.toBeInTheDocument();
+      expect(headline).toHaveAttribute('aria-expanded', 'true');
+
+      await user.click(screen.getByRole('tab', { name: 'Security' }));
+      expect(onValueChange).toHaveBeenCalledWith('security');
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    });
+
+    it('moves focus to the selected tab when the popover opens from the keyboard', async () => {
+      const user = userEvent.setup();
+      const onValueChange = vi.fn();
+      renderSurface({ onValueChange });
+      act(() => observe?.(2));
+      const headline = screen.getByRole('button', { name: 'Account' });
+
+      // A keyboard-activated button click carries `detail: 0`, which userEvent does not send.
+      fireEvent.click(headline, { detail: 0 });
+      await waitFor(() => expect(screen.getByRole('tab', { name: 'Account' })).toHaveFocus());
+
+      await user.keyboard('{ArrowDown}');
+      expect(screen.getByRole('tab', { name: 'Security' })).toHaveFocus();
+      expect(onValueChange).not.toHaveBeenCalled();
+      await user.keyboard('{Enter}');
+      expect(onValueChange).toHaveBeenCalledWith('security');
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    });
+
+    it('focuses the navigation on a pointer open, and the arrows move into the list', async () => {
+      const user = userEvent.setup();
+      renderSurface();
+      act(() => observe?.(2));
+
+      await user.click(screen.getByRole('button', { name: 'Account' }));
+      const nav = screen.getByRole('navigation', { name: 'User profile' });
+      await waitFor(() => expect(nav).toHaveFocus());
+
+      await user.keyboard('{ArrowDown}');
+      expect(screen.getByRole('tab', { name: 'Account' })).toHaveFocus();
+
+      nav.focus();
+      await user.keyboard('{ArrowUp}');
+      expect(screen.getAllByRole('tab').at(-1)).toHaveFocus();
+    });
+
+    it('returns focus to the page title when the popover is escaped', async () => {
+      const user = userEvent.setup();
+      renderSurface();
+      act(() => observe?.(2));
+      const headline = screen.getByRole('button', { name: 'Account' });
+
+      fireEvent.click(headline, { detail: 0 });
+      await waitFor(() => expect(screen.getByRole('tab', { name: 'Account' })).toHaveFocus());
+      await user.keyboard('{Escape}');
+
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+      expect(headline).toHaveFocus();
+    });
+
+    it('closes the popover when the page title is pressed again', async () => {
+      const user = userEvent.setup();
+      renderSurface();
+      act(() => observe?.(2));
+      const headline = screen.getByRole('button', { name: 'Account' });
+      await user.click(headline);
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+      await user.click(headline);
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+      expect(headline).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it.each([
+      ['sheet', 3],
+      ['popover', 2],
+    ])('hands focus to the headline of the page that is showing once the %s closes', async (_, width) => {
       const user = userEvent.setup();
       function Controlled() {
         const [value, setValue] = React.useState('account');
@@ -353,7 +433,7 @@ describe('Profile', () => {
           <Controlled />
         </MosaicProvider>,
       );
-      act(() => observe?.(2));
+      act(() => observe?.(width));
 
       await user.click(screen.getByRole('button', { name: 'Account' }));
       await user.click(screen.getByRole('tab', { name: 'Security' }));
@@ -362,11 +442,9 @@ describe('Profile', () => {
       await waitFor(() => expect(screen.getByRole('button', { name: 'Security' })).toHaveFocus());
     });
 
-    // The tab a panel is normally named by exists only while the sheet is open, so compact the
-    // panel is named by its own title.
     it('names the visible panel by its title while the tablist is away', () => {
       renderSurface();
-      act(() => observe?.(2));
+      act(() => observe?.(3));
       const panel = screen.getByRole('tabpanel');
       const title = screen.getByRole('heading', { level: 3, name: 'Account' });
       expect(panel).toHaveAttribute('aria-labelledby', title.id);
@@ -376,27 +454,36 @@ describe('Profile', () => {
     it('closes the sheet when the layout widens, and does not bring it back on narrowing', async () => {
       const user = userEvent.setup();
       renderSurface();
-      act(() => observe?.(2));
+      act(() => observe?.(3));
       await user.click(screen.getByRole('button', { name: 'Account' }));
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
       act(() => observe?.(1));
       await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
-      act(() => observe?.(2));
+      act(() => observe?.(3));
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
 
-    it('returns the tablist to the column when the width comes back', () => {
+    it('closes the navigation when it moves between the sheet and the popover', async () => {
+      const user = userEvent.setup();
       renderSurface();
       act(() => observe?.(2));
+      await user.click(screen.getByRole('button', { name: 'Account' }));
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+      act(() => observe?.(3));
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    });
+
+    it('returns the tablist to the column when the width comes back', () => {
+      renderSurface();
+      act(() => observe?.(3));
       expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
       act(() => observe?.(1));
       expect(screen.getByRole('navigation', { name: 'User profile' })).toContainElement(screen.getByRole('tablist'));
     });
   });
 
-  // `flush` is the page-content presentation without a dialog around it: the same look an inline
-  // dialog implies, chosen the way `Card` chooses its elevation.
   it('takes the flush presentation from its elevation prop', () => {
     const probe = stylex.create({ frameless: { borderWidth: '0px', backgroundColor: 'transparent' } });
     const flush = renderSurface({ elevation: 'flush' });
@@ -425,8 +512,6 @@ describe('Profile', () => {
       );
     }
 
-    // Named from inside, the way `Card.Title` names a card dialog — nothing is passed in. And the
-    // dismiss comes from the profile too, the way `Card.Header` carries a card's.
     it('names the dialog and carries its dismiss', () => {
       renderInDialog();
 
@@ -457,15 +542,12 @@ describe('Profile', () => {
       expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
     });
 
-    // The dismiss belongs to the dialog, so a profile that is the page's own content has none.
     it('carries no dismiss standalone', () => {
       renderSurface();
 
       expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument();
     });
 
-    // Switching pages must never resize the surface: standalone it holds a fixed height and
-    // scrolls inside; over the page the popup's height is the one that counts.
     it('holds a fixed height standalone, and hands it to the popup over the page', () => {
       const probe = stylex.create({ fixed: { blockSize: '45rem' }, handed: { blockSize: 'auto' } });
       const fixed = atomsOf(probe.fixed);
@@ -481,8 +563,6 @@ describe('Profile', () => {
       expect(frame()).toEqual(expect.arrayContaining(handed));
     });
 
-    // Flush, the profile is the page's content: no frame, no scroll region of its own, and the
-    // branding closes the pages' column out rather than the navigation's.
     it('is flush and unframed at that elevation, and scrolls with the page', () => {
       const probe = stylex.create({
         frameless: { borderWidth: '0px', overflow: 'visible', backgroundColor: 'transparent', blockSize: 'auto' },
diff --git a/packages/mosaic/src/components/profile/profile.tsx b/packages/mosaic/src/components/profile/profile.tsx
index 2a036515f10..68339371f49 100644
--- a/packages/mosaic/src/components/profile/profile.tsx
+++ b/packages/mosaic/src/components/profile/profile.tsx
@@ -15,19 +15,20 @@ import { Branding } from '../branding';
 import { Dialog, DialogContext, isInDialog } from '../dialog';
 import { Drawer } from '../drawer';
 import { HeadingLevelProvider, useHeadingLevel } from '../heading';
+import { Popover } from '../popover';
 import { VisuallyHidden } from '../visually-hidden';
 import type { ProfileContextValue } from './profile.context';
 import { ContentPanelContext, ProfileContext } from './profile.context';
 import { contentScroll, contentViewportScroll, styles } from './profile.styles';
 
-/**
- * Whether the compact container query matches, read off the sentinel `Profile.Root` renders: `1px`
- * wide, `2px` once the query in `profile.styles.ts` matches. Measured because WHERE the navigation
- * renders is a DOM decision CSS cannot make — one tablist, in the column or in the sheet, never
- * both — and read this way so the breakpoint lives in CSS alone. Unmeasured is wide.
- */
-function isCompact(sentinelWidth: number): boolean {
-  return sentinelWidth >= 2;
+type NavLayout = 'column' | 'popover' | 'sheet';
+
+// The sentinel's width (1/2/3px) carries the CSS breakpoints into JS; unmeasured is wide.
+function navLayoutFor(sentinelWidth: number): NavLayout {
+  if (sentinelWidth >= 3) {
+    return 'sheet';
+  }
+  return sentinelWidth >= 2 ? 'popover' : 'column';
 }
 
 function useProfileContext(part: string): ProfileContextValue {
@@ -41,45 +42,15 @@ function useProfileContext(part: string): ProfileContextValue {
 export type ProfileElevation = 'card' | 'flush';
 
 export interface ProfileRootProps extends Omit<MosaicComponentProps<'div'>, 'children'> {
-  /** The selected page, by the `value` of its `Profile.NavItem` and `Profile.ContentPanel`. */
   value: string;
   onValueChange?: (value: string) => void;
-  /**
-   * Arrow-key direction in the navigation. Vertical, since the navigation is a column; the compact
-   * row is a container query the keyboard model cannot see.
-   *
-   * @default 'vertical'
-   */
   orientation?: TabsProps['orientation'];
   activationMode?: TabsProps['activationMode'];
-  /**
-   * Signs the foot of the navigation with "Secured by Clerk". An instance that has paid the
-   * branding off carries none of it, so a connected surface passes `displayConfig.branded` here.
-   *
-   * @default true
-   */
   renderBranding?: boolean;
-  /**
-   * How the surface sits in its host, the way `Card`'s does. `card` is framed: border, radius, a
-   * fixed height with the pages scrolling inside. `flush` is the page's own content: no frame or
-   * background, the page scrolls, the columns a gap apart. Over the page, in a `profile` dialog,
-   * the popup decides the geometry.
-   *
-   * @default 'card'
-   */
   elevation?: ProfileElevation;
   children: React.ReactNode;
 }
 
-/**
- * A surface you navigate: a column of destinations beside the page each one opens. The account
- * profile and the organization profile are both one of these.
- *
- * Rendered as the content of a `profile` dialog's popup, it fills it and paints it — the dialog
- * positions, the profile paints, the way a `Card` does inside a `card` dialog. Like `Card`, it
- * reads `DialogContext` to name the dialog (through `Profile.Title`) and carry its dismiss, so the
- * composition needs nothing passed in; standalone it carries no dismiss.
- */
 const Root = React.forwardRef<HTMLDivElement, ProfileRootProps>(function ProfileRoot(
   {
     value,
@@ -97,18 +68,17 @@ const Root = React.forwardRef<HTMLDivElement, ProfileRootProps>(function Profile
 ) {
   const dialog = React.useContext(DialogContext);
   const inline = elevation === 'flush';
-  // Inside a dialog the title takes the id the popup points `aria-labelledby` at, so the surface
-  // names the dialog without knowing it is in one — the way `Card.Title` does.
   const generatedTitleId = React.useId();
   const titleId = dialog?.labelId ?? generatedTitleId;
   const [sentinel, setSentinel] = React.useState<HTMLSpanElement | null>(null);
-  const [compact, setCompact] = React.useState(false);
+  const [navLayout, setNavLayout] = React.useState<NavLayout>('column');
   useSafeLayoutEffect(() => {
     if (!sentinel) {
       return;
     }
-    return autoUpdate(sentinel, () => setCompact(isCompact(getDimensions(sentinel).width)));
+    return autoUpdate(sentinel, () => setNavLayout(navLayoutFor(getDimensions(sentinel).width)));
   }, [sentinel]);
+  const compact = navLayout !== 'column';
   const pageTitles = React.useRef(new Map<string, HTMLElement>());
   const registerPageTitle = React.useCallback((page: string, element: HTMLElement | null) => {
     if (element) {
@@ -118,22 +88,29 @@ const Root = React.forwardRef<HTMLDivElement, ProfileRootProps>(function Profile
     }
   }, []);
   const pageTitleFor = React.useCallback((page: string) => pageTitles.current.get(page) ?? null, []);
-  const [navOpen, setNavOpen] = React.useState(false);
-  const openNav = React.useCallback(() => setNavOpen(true), []);
-  const closeNav = React.useCallback(() => setNavOpen(false), []);
-  // Widening past the threshold unmounts the sheet; the state must go with it, or the sheet would
-  // be back the moment the layout narrowed again, unasked.
+  // Scoped to a layout so the replacement sheet or popover never mounts open.
+  const [navOpenIn, setNavOpenIn] = React.useState<NavLayout | null>(null);
+  const navOpen = navOpenIn === navLayout;
+  const [navOpenedByKeyboard, setNavOpenedByKeyboard] = React.useState(false);
+  const openNav = React.useCallback(
+    (byKeyboard: boolean) => {
+      setNavOpenIn(navLayout);
+      setNavOpenedByKeyboard(byKeyboard);
+    },
+    [navLayout],
+  );
+  const closeNav = React.useCallback(() => setNavOpenIn(null), []);
   React.useEffect(() => {
-    if (!compact) {
-      setNavOpen(false);
-    }
-  }, [compact]);
+    setNavOpenIn(null);
+  }, [navLayout]);
   const context = React.useMemo(
     () => ({
       titleId,
       renderBranding,
       compact,
+      navLayout,
       navOpen,
+      navOpenedByKeyboard,
       openNav,
       closeNav,
       value,
@@ -141,7 +118,20 @@ const Root = React.forwardRef<HTMLDivElement, ProfileRootProps>(function Profile
       pageTitleFor,
       inline,
     }),
-    [titleId, renderBranding, compact, navOpen, openNav, closeNav, value, registerPageTitle, pageTitleFor, inline],
+    [
+      titleId,
+      renderBranding,
+      compact,
+      navLayout,
+      navOpen,
+      navOpenedByKeyboard,
+      openNav,
+      closeNav,
+      value,
+      registerPageTitle,
+      pageTitleFor,
+      inline,
+    ],
   );
   const element = useRender({
     defaultTagName: 'div',
@@ -160,9 +150,7 @@ const Root = React.forwardRef<HTMLDivElement, ProfileRootProps>(function Profile
             ref={setSentinel}
             {...mergeStyleProps(themeProps('profile-sentinel'), stylex.props(reset.base, styles.sentinel))}
           />
-          {/* First in the DOM, so it is the first tabbable element and takes the dialog's opening
-              focus — the same reason `Card.Header` renders its dismiss first. Only rendered
-              inside a standard dialog. */}
+          {/* First in the DOM so it takes the dialog's opening focus, as in `Card.Header`. */}
           {isInDialog(dialog) && dialog.role !== 'alertdialog' ? <Dialog.CloseButton /> : null}
           <div
             {...mergeStyleProps(
@@ -186,9 +174,13 @@ const Root = React.forwardRef<HTMLDivElement, ProfileRootProps>(function Profile
     <ProfileContext.Provider value={context}>
       <Tabs.Root
         value={value}
-        onValueChange={onValueChange}
+        onValueChange={next => {
+          onValueChange?.(next);
+          closeNav();
+        }}
         orientation={orientation}
-        activationMode={activationMode}
+        // Compact, arrowing through the list must not switch the page behind it.
+        activationMode={compact ? 'manual' : activationMode}
       >
         {element}
       </Tabs.Root>
@@ -198,12 +190,6 @@ const Root = React.forwardRef<HTMLDivElement, ProfileRootProps>(function Profile
 
 export type ProfileTitleProps = MosaicComponentProps<'h2'>;
 
-/**
- * What the surface is called — "User profile", "Organization" — as a visually hidden heading. The
- * navigation and the compact sheet take their accessible names from it, and inside a dialog it
- * names the dialog too, through the popup's `labelId`: the counterpart of `Card.Title`, for a
- * surface whose visible headings belong to its pages.
- */
 const Title = React.forwardRef<HTMLHeadingElement, ProfileTitleProps>(function ProfileTitle(
   { render, xstyle, ...rest },
   ref,
@@ -215,7 +201,6 @@ const Title = React.forwardRef<HTMLHeadingElement, ProfileTitleProps>(function P
       ref={ref as React.Ref<HTMLSpanElement>}
       render={render ?? <Tag />}
       {...mergeStyleProps(themeProps('profile-title'), stylex.props(xstyle), rest)}
-      // The ids the navigation and the dialog point at, so the caller's cannot displace it.
       id={titleId}
     />
   );
@@ -223,6 +208,15 @@ const Title = React.forwardRef<HTMLHeadingElement, ProfileTitleProps>(function P
 
 export type ProfileNavProps = MosaicComponentProps<'nav'>;
 
+function focusListEdge(event: React.KeyboardEvent<HTMLElement>) {
+  if (event.target !== event.currentTarget || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')) {
+    return;
+  }
+  event.preventDefault();
+  const tabs = event.currentTarget.querySelectorAll<HTMLElement>('[role="tab"]:not([disabled])');
+  (event.key === 'ArrowDown' ? tabs[0] : tabs[tabs.length - 1])?.focus();
+}
+
 function NavBranding() {
   return (
     <div {...mergeStyleProps(themeProps('profile-branding'), stylex.props(reset.base, styles.branding))}>
@@ -232,24 +226,30 @@ function NavBranding() {
 }
 
 /**
- * The navigation: the destinations, and the branding at their foot. Its children are
- * `Profile.NavItem`s; they render inside the tablist, so nothing else belongs among them.
- *
- * Beside the content it is a column. Compact, it renders nothing in place: the tablist moves into
- * a sheet that a page's title opens (`Panel.Title`), and closes on a choice — the branding
- * stays behind, since a sheet is not the surface. One tablist, wherever it lives — two would be
- * two sets of tabs for one set of pages.
+ * Children are `Profile.NavItem`s only; they render inside the tablist. Compact, the tablist moves
+ * into a popover (a sheet on a phone) opened from the page's `Panel.Title`.
  */
 const Nav = React.forwardRef<HTMLElement, ProfileNavProps>(function ProfileNav(
   { children, render, xstyle, ...rest },
   ref,
 ) {
   const profile = useProfileContext('Profile.Nav');
-  const { titleId, renderBranding, compact, navOpen, closeNav, value, pageTitleFor, inline } = profile;
-  // The headline that opened the sheet belongs to the page a choice just left, so the sheet's own
-  // return-focus would land on nothing. The headline of the page now showing is the same control,
-  // on the destination — resolved when focus is restored, by which time `value` is that page's.
+  const {
+    titleId,
+    renderBranding,
+    compact,
+    navLayout,
+    navOpen,
+    navOpenedByKeyboard,
+    closeNav,
+    value,
+    pageTitleFor,
+    inline,
+  } = profile;
+  // The opener's page is hidden after a choice, so focus returns to the new page's title instead.
   const finalFocus = React.useCallback(() => pageTitleFor(value), [pageTitleFor, value]);
+  const navRef = React.useRef<HTMLElement | null>(null);
+  const inPopover = navLayout === 'popover';
   const list = (
     <Tabs.List {...mergeStyleProps(themeProps('profile-nav-list'), stylex.props(reset.base, styles.navList))}>
       {children}
@@ -258,12 +258,20 @@ const Nav = React.forwardRef<HTMLElement, ProfileNavProps>(function ProfileNav(
   const element = useRender({
     defaultTagName: 'nav',
     render,
-    ref,
+    ref: [navRef, ref],
     props: {
       'aria-labelledby': titleId,
+      // A pointer open focuses the nav, and the arrows move into the list, as in `Menu`.
+      ...(inPopover ? { tabIndex: -1, onKeyDown: focusListEdge } : null),
       ...mergeStyleProps(
         themeProps('profile-nav', { compact }),
-        stylex.props(reset.base, styles.nav, (inline || compact) && styles.navFlush, xstyle),
+        stylex.props(
+          reset.base,
+          styles.nav,
+          (inline || compact) && styles.navFlush,
+          inPopover && styles.navInPopover,
+          xstyle,
+        ),
         rest,
       ),
       children: (
@@ -278,18 +286,40 @@ const Nav = React.forwardRef<HTMLElement, ProfileNavProps>(function ProfileNav(
   if (!compact) {
     return element;
   }
+  const onOpenChange = (open: boolean) => {
+    if (!open) {
+      closeNav();
+    }
+  };
+  if (inPopover) {
+    return (
+      <Popover.Root
+        open={navOpen}
+        onOpenChange={onOpenChange}
+        placement='bottom-start'
+        // The title opens the popover itself, so the popover cannot see a keyboard open.
+        initialFocus={navOpenedByKeyboard ? 'first' : navRef}
+      >
+        <Popover.Popup
+          anchor={pageTitleFor(value)}
+          aria-labelledby={titleId}
+          finalFocus={finalFocus}
+          xstyle={styles.navPopover}
+        >
+          {element}
+        </Popover.Popup>
+      </Popover.Root>
+    );
+  }
   return (
     <Drawer.Root
       open={navOpen}
-      onOpenChange={open => {
-        if (!open) {
-          closeNav();
-        }
-      }}
+      onOpenChange={onOpenChange}
     >
       <Drawer.Popup
         aria-labelledby={titleId}
         finalFocus={finalFocus}
+        xstyle={styles.navSheet}
       >
         {element}
       </Drawer.Popup>
@@ -298,9 +328,7 @@ const Nav = React.forwardRef<HTMLElement, ProfileNavProps>(function ProfileNav(
 });
 
 export interface ProfileNavItemProps extends MosaicComponentProps<'button'> {
-  /** Matches the `value` of the `Profile.ContentPanel` this destination opens. */
   value: string;
-  /** Leads the label. Any node, so a page of the consumer's own can bring its own mark. */
   icon?: React.ReactNode;
   badge?: React.ReactNode;
   disabled?: boolean;
@@ -308,7 +336,6 @@ export interface ProfileNavItemProps extends MosaicComponentProps<'button'> {
 
 const navItemBadgeDefaults = { color: 'neutral' } as const;
 
-/** A destination. Selecting it shows the `Profile.ContentPanel` sharing its `value`. */
 const NavItem = React.forwardRef<HTMLButtonElement, ProfileNavItemProps>(function ProfileNavItem(
   { value, icon, badge, disabled, children, render, xstyle, onClick, ...rest },
   ref,
@@ -322,7 +349,6 @@ const NavItem = React.forwardRef<HTMLButtonElement, ProfileNavItemProps>(functio
       render={render}
       onClick={event => {
         onClick?.(event);
-        // A choice in the sheet is the end of the visit; arrowing through the list is not.
         if (compact && !event.defaultPrevented && !disabled) {
           closeNav();
         }
@@ -353,12 +379,7 @@ const NavItem = React.forwardRef<HTMLButtonElement, ProfileNavItemProps>(functio
 
 export type ProfileContentProps = MosaicComponentProps<'div'>;
 
-/**
- * The column the pages render in. Standalone and over the page it is the surface's scroll region
- * — the navigation stays put while a long page scrolls; inline the page itself scrolls and the
- * branding closes the column out. A plain `div`: the profile is often the content of the host's
- * own `main`, or of a dialog, so it claims no landmark.
- */
+// A plain `div`, not `main`: the profile often renders inside the host's `main` or a dialog.
 const Content = React.forwardRef<HTMLDivElement, ProfileContentProps>(function ProfileContent(
   { children, render, xstyle, ...rest },
   ref,
@@ -405,22 +426,11 @@ const Content = React.forwardRef<HTMLDivElement, ProfileContentProps>(function P
 });
 
 export interface ProfileContentPanelProps extends MosaicComponentProps<'div'> {
-  /** Matches the `value` of the `Profile.NavItem` that opens this page. */
   value: string;
-  /**
-   * Keeps the page in the document while another is selected — `inert`, and carrying the tabs
-   * primitive's transition attributes — so a page transition can be styled. Off, an unselected
-   * page is `hidden`. Stack the pages yourself when on: they are all in flow.
-   */
+  /** Keeps unselected pages mounted (`inert`, in flow) so a page transition can be styled. */
   shouldForceMount?: boolean;
 }
 
-/**
- * One destination's content, shown while its `value` is selected and `hidden` otherwise. With
- * `shouldForceMount` it stays in the document and carries the tabs primitive's transition contract
- * — `data-open` / `data-closed`, `data-starting-style` / `data-ending-style`, and
- * `--cl-tab-transition-direction` — so a page transition is a styling change rather than a new part.
- */
 const ContentPanel = React.forwardRef<HTMLDivElement, ProfileContentPanelProps>(function ProfileContentPanel(
   { value, shouldForceMount, xstyle, ...rest },
   ref,
@@ -435,9 +445,7 @@ const ContentPanel = React.forwardRef<HTMLDivElement, ProfileContentPanelProps>(
           ref={ref}
           value={value}
           shouldForceMount={shouldForceMount}
-          // Compact, the tab it would be named by exists only while the sheet is open, so the panel
-          // is named by its own title instead — `Panel.Title` takes this id. Spread only then:
-          // an explicit `undefined` would displace the primitive's own `aria-labelledby`.
+          // Compact, the naming tab is not mounted; an explicit `undefined` would drop the primitive's label.
           {...(compact ? { 'aria-labelledby': titleId } : null)}
           {...mergeStyleProps(themeProps('profile-content-panel', { value }), stylex.props(xstyle), rest)}
         />
@@ -447,9 +455,7 @@ const ContentPanel = React.forwardRef<HTMLDivElement, ProfileContentPanelProps>(
 });
 
 /**
- * A surface you navigate, composed through `Profile.Root`, `Profile.Title`, `Profile.Nav`,
- * `Profile.NavItem`, `Profile.Content`, and `Profile.ContentPanel`. Every part
- * accepts the Mosaic `render` prop and forwards its ref.
+ * A surface you navigate: a column of destinations beside the page each one opens.
  *
  * ```tsx
  * <Profile.Root value={page} onValueChange={setPage}>
diff --git a/packages/mosaic/src/primitives/popover/index.ts b/packages/mosaic/src/primitives/popover/index.ts
index 8a3021d9abe..bcf0ba3fa65 100644
--- a/packages/mosaic/src/primitives/popover/index.ts
+++ b/packages/mosaic/src/primitives/popover/index.ts
@@ -11,3 +11,4 @@ export type {
   PopoverTitleProps,
   PopoverTriggerProps,
 } from './parts';
+export type { FocusTarget as PopoverFocusTarget } from '../hooks/use-focus-target';
diff --git a/packages/mosaic/src/primitives/popover/popover-context.ts b/packages/mosaic/src/primitives/popover/popover-context.ts
index 8603c168f0b..5c75ed5e1de 100644
--- a/packages/mosaic/src/primitives/popover/popover-context.ts
+++ b/packages/mosaic/src/primitives/popover/popover-context.ts
@@ -8,6 +8,7 @@ import type {
 import { createContext, type CSSProperties, useContext } from 'react';
 
 import type { TransitionProps } from '../hooks/use-transition';
+import type { PopoverInitialFocus } from './popover-root';
 
 export interface PopoverContextValue {
   open: boolean;
@@ -21,7 +22,7 @@ export interface PopoverContextValue {
   popupRef: React.RefObject<HTMLDivElement | null>;
   arrowRef: React.MutableRefObject<SVGSVGElement | null>;
   modal: boolean;
-  initialFocus: 'auto' | 'first';
+  initialFocus: PopoverInitialFocus;
   /** Where focus goes when the popup closes, or `null` to leave focus alone. */
   returnFocusRef: React.MutableRefObject<HTMLElement | null>;
   labelId: string;
diff --git a/packages/mosaic/src/primitives/popover/popover-positioner.tsx b/packages/mosaic/src/primitives/popover/popover-positioner.tsx
index 65c6f9f1c1c..250d466c250 100644
--- a/packages/mosaic/src/primitives/popover/popover-positioner.tsx
+++ b/packages/mosaic/src/primitives/popover/popover-positioner.tsx
@@ -3,17 +3,19 @@
 import { FloatingFocusManager } from '@floating-ui/react';
 import React from 'react';
 
+import { type FocusTarget, useFinalFocus } from '../hooks/use-focus-target';
 import { type ComponentProps, type DefaultProps, isKeyboardOpen, mergeProps, useRender } from '../utils';
 import { usePopoverContext } from './popover-context';
 
 export interface PopoverPositionerProps extends ComponentProps<'div'> {
-  /** Positions against this element instead of the trigger. */
+  /** Positions against this element instead of the trigger; with no trigger, it acts as one. */
   anchor?: HTMLElement | null;
+  finalFocus?: FocusTarget;
 }
 
 export const PopoverPositioner = React.forwardRef<HTMLDivElement, PopoverPositionerProps>(
   function PopoverPositioner(props, ref) {
-    const { anchor, render, ...otherProps } = props;
+    const { anchor, finalFocus, render, ...otherProps } = props;
     const {
       mounted,
       floatingContext,
@@ -34,10 +36,16 @@ export const PopoverPositioner = React.forwardRef<HTMLDivElement, PopoverPositio
       if (!anchor) {
         return;
       }
+      if (!refs.domReference.current) {
+        refs.setReference(anchor);
+        return () => refs.setReference(null);
+      }
       refs.setPositionReference(anchor);
       return () => refs.setPositionReference(refs.domReference.current);
     }, [anchor, refs]);
 
+    const resolvedReturnFocus = useFinalFocus(finalFocus, returnFocusRef, floatingContext);
+
     const side = placement.split('-')[0];
 
     const ownProps = {
@@ -53,9 +61,7 @@ export const PopoverPositioner = React.forwardRef<HTMLDivElement, PopoverPositio
       defaultTagName: 'div',
       render,
       enabled: mounted,
-      // floating-ui types `setFloating` as a method signature, but at runtime it's
-      // a stable callback that doesn't use `this`, so the unbound-method check is a
-      // false positive here.
+      // `setFloating` is a stable callback that does not use `this`.
       // eslint-disable-next-line @typescript-eslint/unbound-method
       ref: [refs.setFloating, ref],
       props: mergeProps<'div'>(defaultProps, otherProps),
@@ -69,8 +75,14 @@ export const PopoverPositioner = React.forwardRef<HTMLDivElement, PopoverPositio
       <FloatingFocusManager
         context={floatingContext}
         modal={modal}
-        initialFocus={initialFocus === 'first' || isKeyboardOpen(floatingContext) ? 0 : refs.floating}
-        returnFocus={returnFocusRef}
+        initialFocus={
+          typeof initialFocus === 'object'
+            ? initialFocus
+            : initialFocus === 'first' || isKeyboardOpen(floatingContext)
+              ? 0
+              : refs.floating
+        }
+        returnFocus={resolvedReturnFocus}
       >
         {element}
       </FloatingFocusManager>
diff --git a/packages/mosaic/src/primitives/popover/popover-root.tsx b/packages/mosaic/src/primitives/popover/popover-root.tsx
index cd582626bb1..b4e990d1727 100644
--- a/packages/mosaic/src/primitives/popover/popover-root.tsx
+++ b/packages/mosaic/src/primitives/popover/popover-root.tsx
@@ -17,7 +17,7 @@ import {
   useInteractions,
   useRole,
 } from '@floating-ui/react';
-import { type ReactNode, useCallback, useId, useMemo, useRef, useState } from 'react';
+import { type ReactNode, type RefObject, useCallback, useId, useMemo, useRef, useState } from 'react';
 
 import { useControllableState } from '../hooks/use-controllable-state';
 import { useReturnFocus } from '../hooks/use-return-focus';
@@ -25,6 +25,8 @@ import { useTransition } from '../hooks/use-transition';
 import { cssVars } from '../utils/css-vars';
 import { PopoverContext, type PopoverContextValue } from './popover-context';
 
+export type PopoverInitialFocus = 'auto' | 'first' | RefObject<HTMLElement | null>;
+
 export interface PopoverProps {
   open?: boolean;
   defaultOpen?: boolean;
@@ -41,8 +43,9 @@ export interface PopoverProps {
    *   focus ring on a control the user did not navigate to.
    * - `'first'`: always the first tabbable element. Use it for popups whose content
    *   is meant to be typed into immediately, such as a combobox.
+   * - a ref: that element.
    */
-  initialFocus?: 'auto' | 'first';
+  initialFocus?: PopoverInitialFocus;
   children: ReactNode;
 }
 
diff --git a/packages/mosaic/src/primitives/popover/popover.test.tsx b/packages/mosaic/src/primitives/popover/popover.test.tsx
index e3b9bb89d28..c38edfb7a30 100644
--- a/packages/mosaic/src/primitives/popover/popover.test.tsx
+++ b/packages/mosaic/src/primitives/popover/popover.test.tsx
@@ -1,6 +1,6 @@
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { createRef } from 'react';
+import React, { createRef } from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { axe } from '../test-utils/axe';
@@ -112,6 +112,75 @@ describe('Popover', () => {
     });
   });
 
+  describe('anchor without a trigger', () => {
+    function AnchoredPopover({ finalFocus }: { finalFocus?: () => HTMLElement | null }) {
+      const [open, setOpen] = React.useState(false);
+      const [anchor, setAnchor] = React.useState<HTMLButtonElement | null>(null);
+      return (
+        <>
+          <button
+            ref={setAnchor}
+            type='button'
+            onClick={() => setOpen(o => !o)}
+          >
+            Anchor
+          </button>
+          <button type='button'>Elsewhere</button>
+          <Popover.Root
+            open={open}
+            onOpenChange={setOpen}
+          >
+            <Popover.Portal>
+              <Popover.Positioner
+                anchor={anchor}
+                finalFocus={finalFocus}
+                aria-label='Anchored'
+              >
+                <Popover.Popup>
+                  <button type='button'>Inside</button>
+                  <Popover.Close>Close</Popover.Close>
+                </Popover.Popup>
+              </Popover.Positioner>
+            </Popover.Portal>
+          </Popover.Root>
+        </>
+      );
+    }
+
+    it('treats a press on the anchor as its own, not an outside press', async () => {
+      const user = userEvent.setup();
+      render(<AnchoredPopover />);
+
+      const anchor = screen.getByRole('button', { name: 'Anchor' });
+      await user.click(anchor);
+      expect(screen.getByRole('dialog', { name: 'Anchored' })).toBeInTheDocument();
+
+      await user.click(anchor);
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    });
+
+    it('returns focus to the anchor on close', async () => {
+      const user = userEvent.setup();
+      render(<AnchoredPopover />);
+
+      const anchor = screen.getByRole('button', { name: 'Anchor' });
+      await user.click(anchor);
+      await user.click(screen.getByRole('button', { name: 'Close' }));
+
+      await waitFor(() => expect(anchor).toHaveFocus());
+    });
+
+    it('returns focus where finalFocus points', async () => {
+      const user = userEvent.setup();
+      render(<AnchoredPopover finalFocus={() => screen.getByRole('button', { name: 'Elsewhere' })} />);
+
+      await user.click(screen.getByRole('button', { name: 'Anchor' }));
+      await user.click(screen.getByRole('button', { name: 'Close' }));
+
+      await waitFor(() => expect(screen.getByRole('button', { name: 'Elsewhere' })).toHaveFocus());
+    });
+  });
+
   describe('ARIA attributes', () => {
     it('positioner has aria-labelledby linked to title', () => {
       renderPopover({ defaultOpen: true });
@@ -139,8 +208,6 @@ describe('Popover', () => {
     });
 
     it('keeps positioner aria-labelledby/aria-describedby wired to the correct elements', () => {
-      // The primitive owns the ids on Title and Description (id is omitted from
-      // their public props) — the aria pairing must always resolve correctly.
       renderPopover({ defaultOpen: true });
 
       const title = document.querySelector('[data-testid="popover-title"]');
@@ -154,8 +221,6 @@ describe('Popover', () => {
     });
 
     it('omits aria-labelledby and aria-describedby when no Title or Description is rendered', () => {
-      // Title and Description are optional. When absent, the positioner must not
-      // emit dangling idrefs pointing at elements that were never rendered.
       render(
         <Popover.Root defaultOpen>
           <Popover.Trigger>Open popover</Popover.Trigger>
@@ -247,9 +312,7 @@ describe('Popover', () => {
       expect(positioner).toHaveAttribute('data-side', 'bottom');
     });
 
-    // jsdom reports a zero-sized viewport, which leaves `shift` no room and pins the alignment
-    // axis to its padding whatever the offset asked for. Giving it a viewport is what lets the
-    // offset show up in the transform at all.
+    // jsdom's zero-sized viewport leaves `shift` no room, which would hide the offset.
     async function transformWithViewport(props: Partial<React.ComponentProps<typeof Popover.Root>>) {
       vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(1024);
       vi.spyOn(document.documentElement, 'clientHeight', 'get').mockReturnValue(768);
@@ -279,7 +342,6 @@ describe('Popover', () => {
       renderPopover();
 
       await user.click(screen.getByRole('button', { name: 'Open popover' }));
-      // FloatingFocusManager schedules focus via requestAnimationFrame
       await new Promise(r => requestAnimationFrame(r));
 
       const positioner = document.querySelector('[data-testid="popover-positioner"]');
@@ -299,9 +361,7 @@ describe('Popover', () => {
     it('focuses the first tabbable element when opened with the keyboard', async () => {
       renderPopover();
 
-      // A button handles Enter/Space itself, so keyboard activation reaches the popover
-      // as a click with no pointer behind it. userEvent stamps its synthetic keyboard
-      // click with a pointerType, which browsers do not.
+      // userEvent stamps keyboard clicks with a pointerType; browsers send `detail: 0` and none.
       fireEvent.click(screen.getByRole('button', { name: 'Open popover' }), { detail: 0 });
       await waitFor(() => expect(screen.getByRole('button', { name: 'Close' })).toHaveFocus());
     });
diff --git a/packages/swingset/src/stories/panel.component.mdx b/packages/swingset/src/stories/panel.component.mdx
index fe7fd875c85..089c31457e4 100644
--- a/packages/swingset/src/stories/panel.component.mdx
+++ b/packages/swingset/src/stories/panel.component.mdx
@@ -5,7 +5,7 @@ import * as PanelStories from './panel.component.stories';
 Panel lays out one page of content: a title, and the sections below it. `Panel.Root` stacks its
 children, `Panel.Title` renders the page's heading, and `Panel.Sections` stacks a column of
 [Section](/components/section)s one heading level below the title. Inside a
-[Profile](/components/profile) page that has gone compact, `Panel.Title` opens the navigation sheet.
+[Profile](/components/profile) page that has gone compact, `Panel.Title` opens the navigation.
 
 ## Example
 
diff --git a/packages/swingset/src/stories/profile.component.mdx b/packages/swingset/src/stories/profile.component.mdx
index 6c7ab590943..fef5cc99df4 100644
--- a/packages/swingset/src/stories/profile.component.mdx
+++ b/packages/swingset/src/stories/profile.component.mdx
@@ -58,7 +58,7 @@ height and the pages scrolling inside; `flush` is the page's own content — no
 scrolls, the columns a gap apart, held to a reading width and centered. A
 `NavItem` and a `Page` pair by `value`. `icon` and `badge` take nodes, so a page can supply its own
 leading mark and trailing status. A `Badge` passed to `badge` is `neutral` unless it sets its own `color`. `Title` is a visually hidden heading: it names the navigation, the compact
-sheet, and — inside a dialog — the dialog itself, the way `Card.Title` does.
+popover or sheet, and — inside a dialog — the dialog itself, the way `Card.Title` does.
 
 ## Parts
 
@@ -92,12 +92,11 @@ renders. `Panel.Sections` puts section titles one level below the page title. Se
 
 Below `48rem` of the profile's **own** width — or, over the page, the dialog's viewport's, so the
 profile collapses exactly when the dialog fills the screen — the frame goes: the profile is the page
-there, flush with whatever holds it, and the navigation leaves the column for a sheet: `Panel.Title`
-grows a caret that opens a `Drawer` holding the tablist, and a choice closes it. Where the tablist
-renders is a DOM decision — one tablist, in the column or in the sheet, never both — so the root
-reads the query's answer off a sentinel it renders, `1px` wide and `2px` once the query matches,
-rather than measuring itself: the breakpoint lives in CSS alone. The same surface collapses in a
-narrow layout slot, an inline dialog, or a phone alike.
+there, flush with whatever holds it, and the navigation leaves the column: `Panel.Title` grows a
+caret that opens the tablist, and a choice closes it. On a viewport of `40rem` or more the tablist
+opens in a `Popover` under the title; on a phone, in a `Drawer` as tall as its content. The root
+reads the layout off a sentinel it renders: `1px` wide, `2px` once the query matches, `3px` on a
+phone's viewport as well.
 
 ## Customising the marks