diff --git a/.changeset/flat-shadows-report.md b/.changeset/flat-shadows-report.md
new file mode 100644
index 00000000..a845151c
--- /dev/null
+++ b/.changeset/flat-shadows-report.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/friendly-verses-scroll.md b/.changeset/friendly-verses-scroll.md
new file mode 100644
index 00000000..42d2d7f3
--- /dev/null
+++ b/.changeset/friendly-verses-scroll.md
@@ -0,0 +1,5 @@
+---
+'@youversion/platform-react-ui': patch
+---
+
+Keep verse actions open when touch selection moves to another verse, restore focus for initially anchored or conditionally mounted verse actions, and keep reader settings scrollable in constrained popovers. Clarify the Shadow DOM prototype's document-owned font and root-sizing dependencies without expanding its rollout scope.
diff --git a/.changeset/prototype-shadow-dom-isolation.md b/.changeset/prototype-shadow-dom-isolation.md
new file mode 100644
index 00000000..1bd59695
--- /dev/null
+++ b/.changeset/prototype-shadow-dom-isolation.md
@@ -0,0 +1,7 @@
+---
+'@youversion/platform-core': major
+'@youversion/platform-react-hooks': major
+'@youversion/platform-react-ui': major
+---
+
+Prototype automatic Shadow DOM style isolation on `YouVersionAuthButton`, plus a shadow-local native top-layer strategy for isolated Popovers. The spike also constrains Popovers to Radix's available collision height.
diff --git a/.changeset/prove-production-shadow-overlays.md b/.changeset/prove-production-shadow-overlays.md
new file mode 100644
index 00000000..2e0a581b
--- /dev/null
+++ b/.changeset/prove-production-shadow-overlays.md
@@ -0,0 +1,4 @@
+---
+---
+
+Prove nested and concurrent overlays through the production ShadowRootHost seam (YPE-5355).
diff --git a/.changeset/shadow-aware-verse-actions.md b/.changeset/shadow-aware-verse-actions.md
new file mode 100644
index 00000000..cd961cbd
--- /dev/null
+++ b/.changeset/shadow-aware-verse-actions.md
@@ -0,0 +1,5 @@
+---
+'@youversion/platform-react-ui': patch
+---
+
+Keep verse action popovers in their component's shadow-local portal and restore focus after dismissal.
diff --git a/.changeset/tidy-shadows-reset.md b/.changeset/tidy-shadows-reset.md
new file mode 100644
index 00000000..3f033cda
--- /dev/null
+++ b/.changeset/tidy-shadows-reset.md
@@ -0,0 +1,5 @@
+---
+'@youversion/platform-react-ui': patch
+---
+
+Harden Shadow DOM style isolation so text direction is the only intentionally inherited CSS property and host custom properties cannot alter known SDK spacing or radius values. Document-root font sizing still affects the prototype's rem-based dimensions.
diff --git a/.changeset/validate-shadow-dialog.md b/.changeset/validate-shadow-dialog.md
new file mode 100644
index 00000000..28f500ca
--- /dev/null
+++ b/.changeset/validate-shadow-dialog.md
@@ -0,0 +1,5 @@
+---
+'@youversion/platform-react-ui': patch
+---
+
+Validate shadow-local top-layer Dialog behavior, including focus containment and modal background inertness.
diff --git a/docs/adr/0007-prototype-shadow-dom-style-isolation.md b/docs/adr/0007-prototype-shadow-dom-style-isolation.md
new file mode 100644
index 00000000..ea6b77b1
--- /dev/null
+++ b/docs/adr/0007-prototype-shadow-dom-style-isolation.md
@@ -0,0 +1,119 @@
+# ADR 0007: Prototype automatic Shadow DOM style isolation
+
+Status: Proposed (validated experimentally; not approved for production rollout)
+
+Host applications can apply unlayered global CSS, including Tailwind preflight,
+that outranks the UI package's layered styles. Resets, stronger selectors,
+`!important`, cascade layers, and `@scope` remain part of the host document's
+cascade and cannot prevent outside selectors from matching SDK internals. The
+prototype therefore uses Shadow DOM as the browser-enforced style boundary.
+
+## Decision for the prototype
+
+`YouVersionAuthButton` automatically creates an open shadow root and renders its
+existing implementation into it through a React portal. Consumers continue to
+use the same component API; they do not need to discover or enable isolation.
+The SDK's compiled Tailwind component rules are installed inside the root, the light-DOM host
+receives a protected box reset, and an internal wrapper resets inherited visual
+properties.
+
+Writing direction is the only intentional inherited CSS property: both reset
+boundaries explicitly preserve `direction`, while `all: initial` restores
+horizontal writing, mixed text orientation, SDK typography, and other visual
+properties. Vertical host writing modes and inherited host typography are unsupported.
+This is selector and inheritance isolation, not independent document sizing:
+the prototype retains `rem` units, so the owning document's root font size still
+scales SDK text, spacing, and controls. That sizing input is accepted for the
+prototype; it is not reset by a shadow boundary.
+Known ambient custom-property dependencies are closed by using SDK-owned
+`--yv-spacing` and `--yv-radius` values and by defining a local `--spacing`
+compatibility alias for `tw-animate-css`. YPE-5400 owns the full custom-property
+inventory and a compiled-CSS prevention guard.
+
+Constructable stylesheets are cached per owning `Document`, because a sheet from
+the top-level document cannot be adopted into a same-origin iframe's shadow
+root. Environments without constructable stylesheets receive a `<style>` element
+instead. Font loading remains document-owned: `CSSStyleSheet.replaceSync()`
+discards `@import`, so the adopted sheet does not load the Google Fonts import
+from the compiled CSS (and Chromium warns once when the cached sheet is created).
+`YouVersionProvider` installs the document stylesheet and brand-font stylesheet;
+an isolated component still depends on those document-level font registrations.
+The local `<style>` fallback retains the import but is not a substitute for
+document-owned font loading. For iframe consumers, fonts must be loaded in the
+iframe's owning document, not merely in the parent document.
+
+The same infrastructure was exercised as an internal opt-in with
+`BibleVersionPicker` and the shared Dialog and Popover primitives. Floating
+content remains in its component's shadow tree so ID relationships remain
+resolvable. When it must escape a clipping ancestor, a shadow-local portal
+container enters the native top layer using `popover="manual"`.
+
+Modal dialogs require additional shadow-aware focus coordination. Radix's
+document-level tracking sees the shadow host rather than the focused descendant,
+so the isolated Dialog uses composed focus events to contain programmatic focus
+and `tabbable` to own Tab and Shift+Tab traversal. The non-dialog shadow content
+remains inert until both Dialog Overlay and Content have unmounted, after which
+focus is restored to the real opener.
+
+## Considered options
+
+- Stronger selectors, resets, cascade layers, `@scope`, and `!important` reduce
+  collisions but do not create a selector boundary.
+- A shared shadow overlay under `document.body` escapes clipping, but separates
+  triggers and floating content into different tree scopes and breaks resolved
+  ID relationships.
+- A shadow-local inline portal preserves tree scope but remains vulnerable to
+  clipping ancestors.
+- An iframe provides stronger document isolation, but does not compose naturally
+  with React context, refs, events, sizing, focus, or floating content.
+
+The shadow-local native top-layer arrangement is the selected prototype because
+it preserves tree scope and style isolation while escaping ancestor clipping.
+The top-layer strategy requires the native Popover API; it does not silently
+fall back to the clipped inline arrangement.
+
+## Consequences
+
+The React props API remains unchanged, but the rendered DOM structure changes.
+Consumer CSS and ordinary document queries cannot reach component internals.
+Native events observed outside the root are retargeted to the shadow host.
+
+The root currently attaches in `useEffect`, so server output contains an empty
+host, isolated content appears after hydration, and forwarded refs become
+available later. Automatic isolation is therefore a breaking change rather than
+an internal implementation detail.
+
+Shadow DOM does not isolate document-scoped `@font-face` names; the prototype
+accepts that host registrations can collide with SDK family names. It also
+cannot protect a component host from constraints applied to its ancestors. Open
+roots are a CSS boundary, not a security boundary.
+
+## Nested and concurrent overlays
+
+YPE-5355 exercised nested and concurrent overlays through the production
+`ShadowRootHost` seam. Both nesting directions preserve topmost-only Escape
+dismissal and restore focus into the remaining parent overlay. Either
+nested-overlay teardown order also works with the current architecture. Separate
+component shadow roots own distinct portal containers, but do not isolate Radix
+outside interaction: opening a peer popover dismisses the existing peer across
+the same or separate roots. A verse action popover does not restore final focus
+after its nested dialog and then the popover close, and rapid dialog close/reopen
+also loses final focus restoration.
+
+These observations do not select or design production overlay coordination.
+YPE-5356 owns deciding whether and how to support concurrent peers and exact
+final focus restoration. The detailed Chromium evidence and remaining
+validation live in the rollout plan.
+
+Radix's development-only relationship checks can also emit warnings for valid
+IDs inside a shadow root because those checks query the document rather than
+the root.
+
+Only `YouVersionAuthButton` is automatically isolated by this prototype.
+`BibleVersionPicker` and other public exports do not gain automatic isolation
+from the opt-in validation work. The internal `SignInDialog` is validated only
+through an opt-in story. Any wider rollout requires a separate decision and
+change.
+
+The detailed evidence, unresolved audits, and rollout gates live in the
+[Shadow DOM isolation validation and rollout plan](../shadow-dom-isolation-plan.md).
diff --git a/docs/shadow-dom-consumer-compatibility.md b/docs/shadow-dom-consumer-compatibility.md
new file mode 100644
index 00000000..7f356783
--- /dev/null
+++ b/docs/shadow-dom-consumer-compatibility.md
@@ -0,0 +1,90 @@
+# Shadow DOM Consumer Compatibility Contract
+
+## Purpose
+
+This contract records the Chromium evidence for consumer-facing behavior at the
+SDK's Shadow DOM boundary. It is input to YPE-5356's production rollout policy,
+not approval for automatic isolation beyond `YouVersionAuthButton`.
+
+The executable evidence lives in
+`consumer-compatibility.shadow-isolation.stories.tsx`. The existing
+`bible-version-picker.shadow-isolation.stories.tsx` suite supplies additional
+evidence for shadow-aware queries and relationships that stay within one tree
+scope.
+
+## Representative modules
+
+- `YouVersionAuthButton` exercises the current automatic-isolation path and its
+  public event and forwarded-ref props.
+- `Textarea`, rendered through the internal opt-in `ShadowRootHost`, isolates a
+  native form control without adding a production behavior or public wrapper.
+- `BibleVersionPicker`, also rendered through the opt-in host, exercises a
+  composed public module with shadow-local floating content.
+
+These modules validate the shared boundary and specific public interfaces they
+exercise. They do not establish compatibility for every SDK component.
+
+## Compatibility matrix
+
+| Consumer scenario | Classification | Contract and evidence |
+| --- | --- | --- |
+| A light-DOM form natively owns or serializes a control inside an SDK shadow root | Unsupported | `FormsAndExternalRelationshipsStopAtTheTreeScope` verifies that the isolated textarea has no owner form, is absent from `form.elements`, and is absent from `FormData`. A rollout target that needs form participation requires an explicit component API or separately designed form-associated host contract. |
+| A light-DOM `<label for>` labels or focuses a control inside an SDK shadow root | Unsupported | The same story verifies that `label.control` is `null` and clicking the label does not focus the isolated textarea. Put the label and control in the same tree scope or expose an explicit component labeling API. |
+| An internal control resolves light-DOM `aria-labelledby` or `aria-describedby` ID references | Unsupported | The attributes remain present, but Chromium's reflected element arrays are empty across the boundary. Keep referenced nodes in the same tree scope. This DOM evidence is not a substitute for assistive-technology testing. |
+| A native composed event crosses one shadow boundary | Supported with native retargeting | `EventsRefsAndDomQueriesExposeDifferentConsumerViews` clicks an internal label element and verifies that a light-DOM listener receives the shadow host as `event.target`; `composedPath()` begins with the label and includes the internal button and host. Consumers must not assume an external native listener's target is the internal control. |
+| A React handler passed to `YouVersionAuthButton` receives its button event | Supported for this public component | The same story verifies that the consumer `onClick` handler receives the internal originating label as `target` and the internal button as `currentTarget`. Consumers may rely on the button current target, not on every event originating at the button itself. This is component-specific evidence, not a package-wide promise for every event prop. |
+| A forwarded `YouVersionAuthButton` ref exposes the internal button | Supported after mount | The ref resolves to the exact internal `HTMLButtonElement`. It remains `null` through the consumer's first layout effect because the shadow root attaches in a passive effect; consumers must handle callback-ref updates or read object refs after a later commit. |
+| An ordinary document or Storybook-canvas selector finds SDK internals | Unsupported | DOM selector APIs do not cross a shadow boundary. `document.querySelector` and Testing Library queries rooted at the document need explicit open-root traversal. Automation behavior is tool-specific: [Playwright locators pierce open roots by default](https://playwright.dev/docs/locators#locate-in-shadow-dom), except for XPath locators, while closed roots remain inaccessible. |
+| A consumer traverses an open root and queries after attachment | Supported with timing and access constraints | Wait for the host's open `shadowRoot`, then query within it. The contract depends on the prototype's open-root policy and does not make internals a stable semantic API; prefer public refs, roles, and component callbacks where available. |
+| An automatically isolated component is nested inside another open SDK shadow root | Supported for basic rendering, traversal, and composed events | `NestedRootsRequireTraversalAndRetargetAtEveryBoundary` verifies recursive root traversal and target retargeting to the inner host in the outer scope and to the outer host in the document scope. Consumers must traverse every root explicitly. |
+| Nested or concurrent overlays inside shadow roots | Unsupported by this contract | YPE-5355 owns stacking, focus, inertness, dismissal, and restoration. Basic nested-root evidence here does not change that overlay boundary. |
+| Shadow-local ID relationships inside `BibleVersionPicker` | Supported in current Chromium evidence | `TopLayerEscapesClippingAndPreservesSemantics` verifies that the trigger and controlled panel remain in one root and Chromium resolves their `aria-controls` relationship. This does not make cross-scope ID references supported. |
+
+## Consumer risks
+
+Automatic isolation changes rendered DOM even when React props stay the same.
+Consumer selectors and global CSS stop reaching internals; native event targets
+change at every boundary; external form and ID-reference relationships stop
+resolving; and forwarded refs become available later. These are compatibility
+and potentially breaking changes, not internal implementation details.
+
+An open root permits inspection and mutation by same-page JavaScript, so it is
+an automation and styling boundary rather than a security boundary. Selectors
+that depend on internal markup remain fragile even when they traverse the root.
+
+The executable suite currently runs only in Chromium. Firefox, WebKit, and real
+assistive technologies remain unverified. Chromium's reflected ARIA element
+properties demonstrate DOM relationship resolution, not announcements or other
+assistive-technology behavior.
+
+## Input for YPE-5356
+
+The rollout policy should treat automatic isolation as a compatibility change
+and require a component-specific audit before each rollout. In particular, it
+must:
+
+- identify consumers that rely on native outer-form participation, external
+  labels or ARIA ID references, document-rooted queries, synchronous refs, or
+  unretargeted native events;
+- prefer rollout candidates whose public callbacks, refs, and internal labels
+  already avoid those cross-scope dependencies;
+- define consumer automation guidance around roles, public refs, and
+  tool-specific shadow behavior: [Playwright locators pierce open roots by
+  default](https://playwright.dev/docs/locators#locate-in-shadow-dom), while DOM
+  selector APIs need explicit traversal after root attachment and internal
+  rendering;
+- define required Firefox, WebKit, and assistive-technology evidence rather than
+  treating the Chromium results as universal; and
+- preserve YPE-5355's separate ownership of nested and concurrent overlay
+  behavior.
+
+## Follow-up work outside this ticket
+
+No production defect is fixed by this validation ticket. If a selected rollout
+component must participate in an outer native form or consume external labeling
+relationships, create a component-specific implementation ticket for an
+explicit public contract rather than relying on cross-scope browser behavior.
+Cross-browser and assistive-technology validation, consumer-facing rollout
+documentation, and any production implementation belong to YPE-5356 or
+separately authorized follow-up tickets. No new Jira issue is created by this
+document.
diff --git a/docs/shadow-dom-isolation-plan.md b/docs/shadow-dom-isolation-plan.md
new file mode 100644
index 00000000..bdfc0760
--- /dev/null
+++ b/docs/shadow-dom-isolation-plan.md
@@ -0,0 +1,159 @@
+# Shadow DOM Isolation Validation and Rollout Plan
+
+## Why this doc exists
+
+[ADR 0007](adr/0007-prototype-shadow-dom-style-isolation.md) records the durable
+architectural decision behind the Shadow DOM prototype. This document tracks
+the implementation evidence, unresolved audits, and conditions for expanding
+automatic isolation beyond `YouVersionAuthButton`.
+
+This is a working plan, not approval for package-wide rollout.
+
+## Current scope
+
+- `YouVersionAuthButton` creates its Shadow DOM boundary automatically.
+- `BibleVersionPicker` validates shadow-local inline and native top-layer
+  floating content through opt-in stories.
+- The shared Dialog and Popover primitives support opt-in shadow-local portals.
+- `VerseActionPopover` uses the shared portal-state infrastructure while
+  retaining its specialized direct Radix composition.
+- `BibleVersionPicker` and other public exports do not automatically create
+  Shadow DOM boundaries.
+- The internal `SignInDialog` is validated only through an opt-in
+  `ShadowRootHost` story.
+- Nested and concurrent overlays within and across component shadow roots were
+  exercised through the production `ShadowRootHost` seam (YPE-5355). The Shadow
+  DOM ADR records the architectural boundary; the results below record the
+  supported contract and peer-dismissal and final focus-restoration gaps. Runtime
+  changes remain YPE-5356.
+
+## Nested and concurrent overlay evidence
+
+| Scenario | Result | Evidence and limitation |
+| --- | --- | --- |
+| Verse action popover opens the highlights permission dialog | Partially supported | Both render in the shadow-local top layer. The dialog receives focus and the wrapper is inert. A first Escape closes only the dialog and restores focus inside the popover; a second closes the popover. Chromium spike observation found no final focus restoration. Automated evidence covers the stable dismissal, containment, and teardown contract without requiring that known gap to remain. |
+| Dialog contains a popover | Supported | The popover is interactive and receives focus. Escape closes it first and restores its trigger while the dialog remains modal. A second Escape closes the dialog and restores its opener. |
+| Two independent popovers in the same or separate roots | Unsupported as concurrent peers | Chromium spike observation found that opening a popover dismisses an existing peer through Radix outside interaction, including when the peers use separate component shadow roots. Automated evidence covers the stable contract that the new peer receives focus, remains non-modal, tears down cleanly, and that separate roots remain usable after primary teardown. |
+| Rapid dialog close/reopen during exit | Unsupported | The first dialog remains connected in its closed state when it is reopened. The reopened dialog receives focus and the wrapper remains inert. Chromium spike observation found that final dismissal loses the opener; automated evidence requires safe modal release without locking in that focus loss. |
+
+Separate `ShadowRootHost` instances use different portal containers and tear
+those containers down independently. This provides lifecycle isolation, not
+interactive concurrency: pointer interaction in another root dismisses the
+existing peer overlay. Firefox, WebKit, and assistive-technology checks remain
+open.
+
+## Validation matrix
+
+| Area | Evidence today | Status | Remaining work |
+| --- | --- | --- | --- |
+| Host CSS isolation | Hostile-CSS demo and focused Chromium coverage exercise element selectors, direction inheritance, vertical writing and typography resets, hostile custom properties, universal `!important` rules, host attacks, and generated pseudo-content. | Validated for the prototype | Repeat against each component selected for rollout. |
+| Component behavior | Auth button interaction works through the React portal; Strict Mode does not attach the root twice. | Validated for the prototype | Audit component-specific refs, events, and consumer integrations during rollout. |
+| Owner-document handling | Focused coverage mounts into a same-origin iframe and verifies document-compatible stylesheet construction. | Validated for the prototype | Verify stylesheet failure recovery. |
+| Inline floating content | The picker negative control preserves tree-scope relationships but demonstrates clipping beyond a constrained ancestor. | Validated as a negative control | None; clipping is why inline placement is not the selected escaping strategy. |
+| Native top-layer floating content | Picker stories verify clipping escape, hit testing, collision handling, hostile-CSS isolation, and resolved `aria-controls` relationships. | Validated in Chromium | Expand browser and assistive-technology coverage. |
+| Portal lifecycle | Unit and browser coverage exercise lazy creation, exit-animation retention, cleanup, immediate reopen behavior, and the direct-Radix `VerseActionPopover` consumer. | Validated for shared primitives and the known bypass | Repeat the consumer audit when adding another direct overlay primitive. |
+| Dialog relationships | Chromium resolves title and description relationships inside the component tree. | Validated in Chromium | Verify announcements with real assistive technology. |
+| Dialog keyboard containment | Browser coverage exercises initial focus, programmatic escape redirection, forward and reverse traversal, radio-group collapsing, negative `tabindex`, and wraparound. | Validated in Chromium | Expand the browser and assistive-technology matrix. |
+| Dialog modal lifetime | Coverage verifies inert background content while open and through staggered Content and Overlay exit animations. YPE-5355 also exercises both unmount orders for overlapping popover and dialog exits. | Validated for order-independent teardown | YPE-5356 owns peer concurrency across component roots and final focus-restoration gaps. Expand browser and assistive-technology coverage. |
+| Dialog dismissal and restoration | Coverage exercises Escape, backdrop click, full-viewport hit testing, overlay-only focus, and restoration after both modal nodes unmount. | Validated in Chromium | Verify real screen-reader and cross-browser behavior. |
+| Consumer form participation | Chromium coverage verifies that a light-DOM form does not own or serialize a native control inside an SDK shadow root. | Unsupported across tree scopes | Use an explicit component contract if a rollout target requires outer-form participation. |
+| Consumer labels and ARIA ID references | Chromium coverage verifies that external native labels, `aria-labelledby`, and `aria-describedby` relationships do not resolve to controls inside the root. | Unsupported across tree scopes | Keep relationships in one tree scope; verify real assistive technology separately. |
+| Consumer events, refs, and automation | Coverage verifies native retargeting, the auth button's React handler and forwarded ref, open-root queries, and effect-driven attachment timing. | Supported with documented constraints | Repeat for each public component selected for rollout. |
+| Nested shadow roots | Coverage verifies basic rendering, recursive queries, and event retargeting at each boundary. | Supported for the validated basics | Nested and concurrent overlay ownership remains with YPE-5355. |
+
+## Direct overlay inventory
+
+| Location | Classification | Shadow portal requirement |
+| --- | --- | --- |
+| `components/ui/dialog.tsx` | Shared Radix Dialog infrastructure | Already owns shadow-aware portal and modal-focus coordination. |
+| `components/ui/popover.tsx` | Shared Radix Popover infrastructure | Already owns shadow-aware portal state. |
+| `components/verse-action-popover.tsx` | Intentional direct Radix Popover consumer | Uses the shared portal-state seam while retaining its virtual anchor, reader-edge docking, custom pill surface, and verse-selection interaction rules. |
+| `components/verse.tsx` | React portals into existing YVDOM footnote anchors, not floating overlays | No overlay migration required; each target remains in the rendered verse tree. |
+
+No other production direct-overlay bypass was found. The inventory therefore
+produced no equivalent low-risk migration and no materially different case that
+requires follow-up work. Extending the controller already owned by
+`ShadowRootHost` is a candidate seam for added overlay coordination, not an ADR
+decision. YPE-5356 owns whether and how to implement that coordination.
+
+## Blocking production-readiness decisions
+
+- Decide whether isolation is enabled per component instance, per public export,
+  or package-wide.
+- Define SSR, hydration, and first-paint behavior. The current effect-attached
+  root renders an empty host on the server and delays content and forwarded refs.
+- Resolve the YPE-5355 peer-dismissal and final focus-restoration gaps before
+  shipping nested and concurrent overlays (YPE-5356). The decision must consider
+  trigger-time peer dismissal as well as overlay order and restore targets;
+  ADR 0007 records the gaps but does not select a coordination design.
+  Cross-browser and assistive-technology coverage still remain.
+- Complete the package-wide custom-property inventory and prevention guard in
+  YPE-5400. The known `BibleVersionPicker`, `InputGroup`, and `tw-animate-css`
+  dependencies now resolve through locally-defined SDK-owned spacing and radius
+  values, but `all: initial` does not reset unknown custom properties.
+
+## Functional and compatibility audits
+
+- Apply the [Shadow DOM consumer compatibility contract](shadow-dom-consumer-compatibility.md)
+  to every proposed rollout component. Native outer-form participation and
+  external `label`, `aria-labelledby`, and `aria-describedby` relationships are
+  unsupported across tree scopes in the current Chromium evidence.
+- Preserve `direction` as the only intentional inherited CSS property. Vertical
+  writing modes, text orientation, inherited host typography, and undeclared
+  host custom properties are not supported customization inputs. The prototype
+  retains `rem` sizing, which still responds to the owning document's root font
+  size; review that accepted sizing input for each rollout component.
+- Repeat the documented event, ref, nested-root, and shadow-aware automation
+  checks for every public component selected for rollout.
+- Verify stylesheet construction and adoption failure recovery beyond the
+  current feature fallback.
+- Audit realistic component density and the cost of many roots, effects,
+  wrappers, and local portal containers.
+
+## Accepted boundaries and unresolved environment coverage
+
+- Component rules are installed locally, but font loading is document-owned.
+  Constructable stylesheets discard the compiled Google Fonts `@import` and
+  Chromium warns when the per-document cached sheet is created. The `<style>`
+  fallback retains the import; neither path replaces the provider's document
+  stylesheet and brand-font registration. Fonts must be loaded in each owning
+  document, including same-origin iframes.
+- Host `@font-face` registrations are document-scoped and can collide with the
+  public font family names used inside a shadow root. This limitation is
+  accepted for the prototype; avoiding it requires private family names and
+  controlled font declarations.
+- Shadow DOM cannot prevent a host from hiding, clipping, transforming, or
+  constraining the component host or its ancestors.
+- Open shadow roots prevent CSS selector crossover; they do not prevent
+  same-page JavaScript from inspecting or mutating the root.
+- Browser automation currently focuses on Chromium. Firefox and WebKit remain
+  to be evaluated.
+- Chromium DOM relationship reflection is not a substitute for VoiceOver, NVDA,
+  or other real assistive-technology verification.
+
+## Research handoff and completion gate
+
+YPE-5356 is the convergence point for the Shadow DOM research. Its foundational
+evidence comes from YPE-5298, YPE-5310, YPE-5352, and YPE-5353. It must not be
+completed until the final findings from YPE-5354, YPE-5355, YPE-5400, and
+YPE-5436 have been reconciled into the rollout policy and these durable Shadow
+DOM documents. Any conflicts and accepted limitations must be recorded rather
+than left implicit.
+
+Every component rollout ticket produced by YPE-5356 must link back to that
+policy and repeat the compatibility matrix for its selected component. Its gates
+must cover browser and assistive-technology behavior, customization,
+performance, and stylesheet failure recovery in addition to the component's
+forms, labels, ARIA relationships, events, refs, queries, and overlays.
+
+## Rollout sequence
+
+1. Complete YPE-5400's custom-property inventory and prevention guard.
+2. Resolve SSR/hydration in YPE-5354 and overlay ownership in YPE-5355, then
+   reconcile those findings and YPE-5436's consumer contract in YPE-5356.
+3. Select the next public component and add component-specific compatibility,
+   browser, and accessibility coverage before enabling isolation.
+4. Publish consumer guidance for DOM queries, automation, customization, forms,
+   accessibility, and the loss of global CSS styling.
+5. Repeat the validation matrix for each component rather than assuming that the
+   infrastructure proof covers its component-specific behavior.
diff --git a/examples/vite-react/src/App.tsx b/examples/vite-react/src/App.tsx
index 7aa7d508..ed33c609 100644
--- a/examples/vite-react/src/App.tsx
+++ b/examples/vite-react/src/App.tsx
@@ -3,8 +3,9 @@ import { Navbar } from '@/components/navbar';
 import { BibleReaderPage } from '@/pages/BibleReaderPage';
 import { VotdPage } from '@/pages/VotdPage';
 import { BibleCardPage } from '@/pages/BibleCardPage';
+import { HostileCssPage } from '@/pages/HostileCssPage';
 
-export type Page = 'bible-reader' | 'votd' | 'bible-card';
+export type Page = 'bible-reader' | 'votd' | 'bible-card' | 'hostile-css';
 
 function App() {
   const [currentPage, setCurrentPage] = useState<Page>('bible-reader');
@@ -16,6 +17,7 @@ function App() {
         {currentPage === 'bible-reader' && <BibleReaderPage />}
         {currentPage === 'votd' && <VotdPage />}
         {currentPage === 'bible-card' && <BibleCardPage />}
+        {currentPage === 'hostile-css' && <HostileCssPage />}
       </main>
     </div>
   );
diff --git a/examples/vite-react/src/components/navbar.tsx b/examples/vite-react/src/components/navbar.tsx
index a9c9ecb6..9d6ee951 100644
--- a/examples/vite-react/src/components/navbar.tsx
+++ b/examples/vite-react/src/components/navbar.tsx
@@ -10,6 +10,7 @@ const navItems: { label: string; page: Page }[] = [
   { label: 'Bible Reader', page: 'bible-reader' },
   { label: 'Verse of the Day', page: 'votd' },
   { label: 'Bible Card', page: 'bible-card' },
+  { label: 'Hostile CSS', page: 'hostile-css' },
 ];
 
 interface NavbarProps {
diff --git a/examples/vite-react/src/pages/HostileCssPage.tsx b/examples/vite-react/src/pages/HostileCssPage.tsx
new file mode 100644
index 00000000..bc8e150f
--- /dev/null
+++ b/examples/vite-react/src/pages/HostileCssPage.tsx
@@ -0,0 +1,199 @@
+import { useState } from 'react';
+import { YouVersionAuthButton } from '@youversion/platform-react-ui';
+
+interface HostileVector {
+  key: string;
+  label: string;
+  expectation: string;
+  example: string;
+  css: string;
+}
+
+const HOSTILE_VECTORS: HostileVector[] = [
+  {
+    key: 'type-selectors',
+    label: 'Type selectors',
+    expectation: 'The plain button changes; the SDK button should not.',
+    example: 'button { … }',
+    css: `
+.hostile-zone button,
+.hostile-zone [role='button'] {
+  appearance: none !important;
+  background: #b91c1c !important;
+  border: 8px dashed #84cc16 !important;
+  border-radius: 0 !important;
+  color: #fff !important;
+  font: 28px/1 fantasy !important;
+  padding: 28px !important;
+  text-transform: uppercase !important;
+}`,
+  },
+  {
+    key: 'inherited',
+    label: 'Inherited properties',
+    expectation: 'Host text changes; the SDK button should retain its typography.',
+    example: '.hostile-zone { font-family: … }',
+    css: `
+.hostile-zone {
+  color: #d600d6 !important;
+  cursor: crosshair !important;
+  font-family: 'Comic Sans MS', fantasy !important;
+  font-size: 24px !important;
+  font-style: italic !important;
+  letter-spacing: 0.25em !important;
+  line-height: 2.4 !important;
+  text-transform: uppercase !important;
+}`,
+  },
+  {
+    key: 'universal-important',
+    label: 'Universal selector with !important',
+    expectation: 'Every reachable host element changes; shadow internals should not.',
+    example: '* { … !important }',
+    css: `
+.hostile-zone * {
+  color: #d600d6 !important;
+  font-family: 'Comic Sans MS', fantasy !important;
+  letter-spacing: 0.2em !important;
+  text-transform: uppercase !important;
+}`,
+  },
+  {
+    key: 'shadow-host',
+    label: 'Shadow-host box attack',
+    expectation: 'The witness disappears; the SDK host should remain usable.',
+    example: '[data-yv-shadow-host] { display: none !important }',
+    css: `
+.hostile-zone [data-yv-shadow-host],
+.hostile-zone [data-host-box-witness] {
+  display: none !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  transform: scale(0.5) !important;
+}`,
+  },
+  {
+    key: 'host-pseudo-elements',
+    label: 'Shadow-host pseudo-elements',
+    expectation: 'The witness gains generated content; the SDK host should not.',
+    example: '[data-yv-shadow-host]::before { content: … !important }',
+    css: `
+.hostile-zone [data-yv-shadow-host]::before,
+.hostile-zone [data-yv-shadow-host]::after,
+.hostile-zone [data-host-pseudo-witness]::before {
+  content: 'HOSTILE' !important;
+  display: block !important;
+  background: #b91c1c !important;
+  color: #fff !important;
+  padding: 8px !important;
+}`,
+  },
+  {
+    key: 'font-face',
+    label: '@font-face family collision (known limitation)',
+    expectation:
+      'Registers a document-level Inter collision that can reach the shadow tree; the visible result depends on locally installed fonts.',
+    example: "@font-face { font-family: 'Inter'; … }",
+    css: `
+@font-face {
+  font-family: 'Inter';
+  src: local('Comic Sans MS'), local('Chalkboard SE');
+}
+@font-face {
+  font-family: 'Untitled Serif';
+  src: local('Comic Sans MS'), local('Chalkboard SE');
+}`,
+  },
+];
+
+export function HostileCssPage() {
+  const [enabled, setEnabled] = useState<Record<string, boolean>>({
+    'type-selectors': true,
+    inherited: false,
+    'universal-important': false,
+    'shadow-host': false,
+    'host-pseudo-elements': false,
+    'font-face': false,
+  });
+
+  const toggle = (key: string) => {
+    setEnabled((current) => ({ ...current, [key]: !current[key] }));
+  };
+
+  return (
+    <div className="flex flex-col gap-8 p-6 md:p-12">
+      {HOSTILE_VECTORS.filter((vector) => enabled[vector.key]).map((vector) => (
+        <style key={vector.key}>{vector.css}</style>
+      ))}
+
+      <section className="rounded-lg border p-5">
+        <h1 className="text-xl font-semibold">Automatic Shadow DOM isolation POC</h1>
+        <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
+          This branch automatically isolates only <code>YouVersionAuthButton</code>. The plain host
+          controls are positive witnesses: they should look broken when an attack is active, while
+          the SDK button should remain stable. The font-face option demonstrates a known Shadow DOM
+          limitation.
+        </p>
+
+        <fieldset className="mt-5 flex flex-col gap-3">
+          <legend className="mb-2 font-medium">Hostile stylesheet vectors</legend>
+          {HOSTILE_VECTORS.map((vector) => (
+            <div
+              key={vector.key}
+              className="flex flex-col gap-2 rounded-md border p-3 sm:flex-row sm:items-center sm:justify-between"
+            >
+              <label className="flex items-start gap-3 text-sm">
+                <input
+                  className="mt-1"
+                  type="checkbox"
+                  checked={enabled[vector.key] ?? false}
+                  onChange={() => toggle(vector.key)}
+                />
+                <span>
+                  <span className="font-medium">{vector.label}</span>
+                  <span className="block text-muted-foreground">{vector.expectation}</span>
+                </span>
+              </label>
+              <code className="w-fit max-w-full overflow-x-auto whitespace-nowrap rounded bg-muted px-2 py-1 text-xs">
+                {vector.example}
+              </code>
+            </div>
+          ))}
+        </fieldset>
+      </section>
+
+      <div className="grid gap-8 md:grid-cols-2">
+        <section className="flex flex-col gap-5 rounded-lg border border-dashed p-5">
+          <h2 className="text-sm font-semibold">LIGHT DOM — SHOULD BE AFFECTED</h2>
+          <div className="hostile-zone flex flex-col gap-5">
+            <button type="button">Plain host-app button</button>
+            <p>Plain host text for inherited-property attacks.</p>
+            <div data-host-box-witness className="rounded border p-3">
+              Host-box witness — this should disappear during the host attack.
+            </div>
+            <div data-host-pseudo-witness className="rounded border p-3">
+              Pseudo-element witness — generated content should appear above this text.
+            </div>
+            <p style={{ fontFamily: 'Inter, sans-serif' }}>
+              Host text requesting Inter for the font-face collision.
+            </p>
+          </div>
+        </section>
+
+        <section className="flex flex-col gap-5 rounded-lg border p-5">
+          <h2 className="text-sm font-semibold">SDK POC — SHOULD RESIST</h2>
+          <div className="hostile-zone">
+            <YouVersionAuthButton
+              size="short"
+              onAuthError={(error) => console.error('Auth error:', error)}
+            />
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Other SDK components are intentionally absent: automatic isolation has not been rolled
+            out to them on this POC branch.
+          </p>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/AGENTS.md b/packages/ui/AGENTS.md
index ada2ee13..06c4549d 100644
--- a/packages/ui/AGENTS.md
+++ b/packages/ui/AGENTS.md
@@ -38,10 +38,20 @@ export — treat those two as public API and breaking-change territory.
 
 ## STYLING
 **React 19 `<style precedence>`**: The `YouVersionProvider` wrapper (in `src/components/YouVersionProvider.tsx`) renders `<YvStyles />` once, which outputs a `<style href="yv-sdk-styles" precedence="yv-sdk">` element. React handles hoisting to `<head>`, deduplication, SSR streaming, and Suspense integration. Individual components do NOT render `<YvStyles />` — it's centralized in the provider.
+- Shadow DOM exception: `ShadowRootHost` installs the embedded `__YV_STYLES__`
+  inside each component shadow root because document styles cannot cross that
+  boundary. It prefers a cached constructable stylesheet and renders a local
+  `<style>` fallback when adoption is unavailable.
+- Structural shadow selectors, including `:host` and dynamically-created
+  shadow overlay containers, are intentionally centralized in the existing
+  `src/styles/global.css` so they pass through the standard build and embedding
+  path.
 - CSS embedded as `__YV_STYLES__` constant via tsup define
 - Built Tailwind CSS: `dist/tailwind.css` → embedded as JS string at build time
 - Static CSS also available via `import '@youversion/platform-react-ui/styles.css'` for non-React consumers
-- Each component includes a `data-yv-sdk` attribute on its root element for style scoping (consumers don't need to add this)
+- Each component includes `data-yv-sdk` on its styled root. An isolated
+  component's styled root is inside its shadow tree; its light-DOM boundary uses
+  `data-yv-shadow-host` instead.
 - Tailwind CSS classes must be prefixed with `yv:` to prevent class naming collision when someone uses our components in their app. For example, `mt-4` becomes `yv:mt-4`
 - Light/dark mode via CSS variables (`[data-yv-sdk]`)
 - Use semantic theme tokens (`yv:text-muted-foreground`, `yv:bg-destructive`) instead of arbitrary color values
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 43c67395..f1864f16 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -70,13 +70,15 @@ Language tags are BCP 47 (`en`, `es`, `zh-Hans`). Version ids are YouVersion Bib
 
 All component CSS is automatically injected when you wrap your app with `YouVersionProvider` — no extra imports or build steps needed. Under the hood, it uses React 19's [`<style precedence>`](https://react.dev/reference/react-dom/components/style) to hoist styles into `<head>` with built-in deduplication and SSR/Suspense support.
 
+Prototype exception: `YouVersionAuthButton` automatically renders inside an open shadow root, which installs its component styles locally. Fonts still depend on the provider's styles in the owning document, and `rem` sizing still follows that document's root font size. Other public components are not automatically isolated. See the [Shadow DOM ADR](../../docs/adr/0007-prototype-shadow-dom-style-isolation.md) and [consumer compatibility contract](../../docs/shadow-dom-consumer-compatibility.md) for the prototype's DOM, ref, event, and styling limitations.
+
 **Non-React or manual CSS import:**
 
 ```tsx
 import '@youversion/platform-react-ui/styles.css';
 ```
 
-All component classes are prefixed with `yv:` to avoid collisions with your app's styles. Override design tokens with CSS variables on `[data-yv-sdk]` (see [Custom CSS variables](#custom-css-variables)).
+All component classes are prefixed with `yv:` to avoid collisions with your app's styles. For light-DOM components, override design tokens with CSS variables on `[data-yv-sdk]` (see [Custom CSS variables](#custom-css-variables)). Document selectors cannot reach the isolated auth button's internal styled root.
 
 ### Content Security Policy
 
@@ -162,6 +164,8 @@ Individual components accept a `background` prop to override the provider theme
 
 ### Custom CSS variables
 
+These document-level overrides apply to light-DOM components, not to the automatically isolated `YouVersionAuthButton`. The prototype does not expose a public shadow-root token override API.
+
 ```css
 [data-yv-sdk] {
   --yv-primary: #your-primary-color;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7e734547..07581b7c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -49,6 +49,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "1.2.12",
+    "@radix-ui/react-compose-refs": "1.1.2",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-popover": "1.1.15",
     "@radix-ui/react-separator": "1.1.7",
@@ -64,6 +65,7 @@
     "i18next": "^26.0.0",
     "radix-ui": "^1.4.3",
     "react-i18next": "^17.0.0",
+    "tabbable": "6.5.0",
     "tailwind-merge": "3.3.1",
     "tw-animate-css": "1.4.0",
     "xstate": "5.32.4"
diff --git a/packages/ui/src/components/YouVersionAuthButton.shadow-isolation.stories.tsx b/packages/ui/src/components/YouVersionAuthButton.shadow-isolation.stories.tsx
new file mode 100644
index 00000000..95fb05bd
--- /dev/null
+++ b/packages/ui/src/components/YouVersionAuthButton.shadow-isolation.stories.tsx
@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { http, HttpResponse } from 'msw';
+import { createRoot } from 'react-dom/client';
+import { expect, waitFor } from 'storybook/test';
+import { ShadowRootHost } from '../lib/shadow-root-host';
+import { YouVersionAuthButton } from './YouVersionAuthButton';
+
+/**
+ * Focused architectural POC coverage. These stories answer two questions:
+ * whether a literal global `button {}` rule can change an automatically
+ * isolated SDK button, and whether the document-bound constructed stylesheet
+ * works when a shadow host mounts in a same-origin iframe. Package-wide hostile
+ * vectors and component-specific behavior are deliberately deferred.
+ */
+const HOSTILE_CSS = `
+  button {
+    appearance: none !important;
+    background: rgb(185, 28, 28) !important;
+    border: 10px dashed lime !important;
+    color: yellow !important;
+    font: 32px/1 fantasy !important;
+    padding: 40px !important;
+    text-transform: uppercase !important;
+  }
+
+  [data-yv-shadow-host]::before,
+  [data-yv-shadow-host]::after,
+  [data-host-pseudo-control]::before {
+    content: "HOSTILE" !important;
+    display: block !important;
+    background: red !important;
+  }
+`;
+
+const meta = {
+  title: 'Spikes/Automatic Shadow DOM isolation',
+  component: YouVersionAuthButton,
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('*/v1/fonts/1/stylesheet', () =>
+          HttpResponse.text('', { headers: { 'Content-Type': 'text/css' } }),
+        ),
+      ],
+    },
+  },
+} satisfies Meta<typeof YouVersionAuthButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function buttonStyleSnapshot(button: HTMLButtonElement) {
+  const ownerWindow = button.ownerDocument.defaultView;
+  if (!ownerWindow) throw new Error('button owner window not available');
+  const styles = ownerWindow.getComputedStyle(button);
+  return {
+    appearance: styles.appearance,
+    backgroundColor: styles.backgroundColor,
+    borderTopColor: styles.borderTopColor,
+    borderTopStyle: styles.borderTopStyle,
+    borderTopWidth: styles.borderTopWidth,
+    color: styles.color,
+    display: styles.display,
+    fontFamily: styles.fontFamily,
+    fontSize: styles.fontSize,
+    lineHeight: styles.lineHeight,
+    padding: styles.padding,
+    textTransform: styles.textTransform,
+  };
+}
+
+export const HostileGlobalButtonRule: Story = {
+  tags: ['integration'],
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
+      <button type="button" data-testid="host-control" data-host-pseudo-control>
+        Host control
+      </button>
+      <YouVersionAuthButton data-testid="sdk-button" />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const ownerDocument = canvasElement.ownerDocument;
+    const ownerWindow = ownerDocument.defaultView;
+    if (!ownerWindow) throw new Error('story owner window not available');
+
+    const control = await waitFor(() => {
+      const element = canvasElement.querySelector<HTMLButtonElement>(
+        '[data-testid="host-control"]',
+      );
+      if (!element) throw new Error('host control not rendered');
+      return element;
+    });
+    const host = await waitFor(() => {
+      const element = canvasElement.querySelector<HTMLElement>('[data-yv-shadow-host]');
+      if (!element?.shadowRoot) throw new Error('shadow root not attached');
+      return element;
+    });
+    const sdkButton = await waitFor(() => {
+      const element = host.shadowRoot?.querySelector<HTMLButtonElement>(
+        '[data-testid="sdk-button"]',
+      );
+      if (!element) throw new Error('SDK button not rendered');
+      return element;
+    });
+
+    const sdkBaseline = buttonStyleSnapshot(sdkButton);
+    // Guard against a false positive where an unstyled browser-default button
+    // also happens not to equal the hostile values below.
+    void expect(sdkBaseline.display).toBe('flex');
+    void expect(sdkBaseline.fontFamily).toContain('Inter');
+
+    const style = ownerDocument.createElement('style');
+    style.textContent = HOSTILE_CSS;
+
+    try {
+      ownerDocument.head.append(style);
+
+      await waitFor(() => {
+        void expect(ownerWindow.getComputedStyle(control).backgroundColor).toBe('rgb(185, 28, 28)');
+        void expect(ownerWindow.getComputedStyle(control, '::before').content).toBe('"HOSTILE"');
+      });
+
+      void expect(ownerWindow.getComputedStyle(host, '::before').content).toBe('none');
+      void expect(ownerWindow.getComputedStyle(host, '::before').display).toBe('none');
+      void expect(ownerWindow.getComputedStyle(host, '::after').content).toBe('none');
+      void expect(ownerWindow.getComputedStyle(host, '::after').display).toBe('none');
+
+      // The complete relevant style snapshot—not merely a few negative values—
+      // must remain identical to the pre-attack SDK baseline.
+      void expect(buttonStyleSnapshot(sdkButton)).toEqual(sdkBaseline);
+    } finally {
+      style.remove();
+    }
+  },
+};
+
+export const SameOriginIframeDocument: Story = {
+  tags: ['integration'],
+  parameters: { includeAuth: false },
+  render: () => <iframe data-testid="iframe" title="same-origin isolation target" />,
+  play: async ({ canvasElement }) => {
+    const iframe = canvasElement.querySelector<HTMLIFrameElement>('[data-testid="iframe"]');
+    if (!iframe?.contentDocument) throw new Error('same-origin iframe document not available');
+
+    const container = iframe.contentDocument.createElement('div');
+    iframe.contentDocument.body.append(container);
+    const root = createRoot(container);
+
+    try {
+      root.render(
+        <ShadowRootHost>
+          <span data-testid="iframe-content">Isolated</span>
+        </ShadowRootHost>,
+      );
+
+      await waitFor(() => {
+        const host = iframe.contentDocument?.querySelector<HTMLDivElement>('[data-yv-shadow-host]');
+        const shadowRoot = host?.shadowRoot;
+        const content = shadowRoot?.querySelector('[data-testid="iframe-content"]');
+        if (!content) throw new Error('iframe shadow content not mounted');
+        void expect(host?.ownerDocument).toBe(iframe.contentDocument);
+        void expect(shadowRoot?.adoptedStyleSheets).toHaveLength(1);
+      });
+    } finally {
+      root.unmount();
+      container.remove();
+    }
+  },
+};
diff --git a/packages/ui/src/components/YouVersionAuthButton.stories.tsx b/packages/ui/src/components/YouVersionAuthButton.stories.tsx
index ca11c634..1b9b31aa 100644
--- a/packages/ui/src/components/YouVersionAuthButton.stories.tsx
+++ b/packages/ui/src/components/YouVersionAuthButton.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, within, spyOn } from 'storybook/test';
+import { http, HttpResponse } from 'msw';
+import { expect, fn, userEvent, waitFor, spyOn } from 'storybook/test';
 import { YouVersionAuthButton } from './YouVersionAuthButton';
 
 // Store mock reference for interaction test
@@ -10,6 +11,13 @@ const meta = {
   component: YouVersionAuthButton,
   parameters: {
     layout: 'centered',
+    msw: {
+      handlers: [
+        http.get('*/v1/fonts/1/stylesheet', () =>
+          HttpResponse.text('', { headers: { 'Content-Type': 'text/css' } }),
+        ),
+      ],
+    },
   },
   tags: ['autodocs'],
   async beforeEach() {
@@ -74,6 +82,20 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+async function findAuthButton(
+  canvasElement: HTMLElement,
+  name: RegExp,
+): Promise<HTMLButtonElement> {
+  return waitFor(() => {
+    const host = canvasElement.querySelector<HTMLElement>('[data-yv-shadow-host]');
+    const button = Array.from(host?.shadowRoot?.querySelectorAll('button') ?? []).find(
+      (candidate) => name.test(candidate.textContent ?? ''),
+    );
+    if (!button) throw new Error(`auth button matching ${name} not found`);
+    return button;
+  });
+}
+
 export const Default: Story = {};
 
 export const LightOutline: Story = {
@@ -271,10 +293,8 @@ export const InteractionTestWithMockedAuth: Story = {
   },
   tags: ['integration'],
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
     // Wait for the auth provider to load and the button to appear
-    const loginButton = await canvas.findByRole('button', { name: /sign in with youversion/i });
+    const loginButton = await findAuthButton(canvasElement, /sign in with youversion/i);
     await userEvent.click(loginButton);
 
     void expect(signInMock).toHaveBeenCalled();
@@ -288,10 +308,8 @@ export const CustomText: Story = {
   },
   tags: ['integration'],
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
     // Wait for the auth provider to load and the button to appear
-    const loginButton = await canvas.findByRole('button', { name: /custom text/i });
+    const loginButton = await findAuthButton(canvasElement, /custom text/i);
     await userEvent.click(loginButton);
 
     void expect(signInMock).toHaveBeenCalled();
diff --git a/packages/ui/src/components/YouVersionAuthButton.tsx b/packages/ui/src/components/YouVersionAuthButton.tsx
index bd914dd6..971b079a 100644
--- a/packages/ui/src/components/YouVersionAuthButton.tsx
+++ b/packages/ui/src/components/YouVersionAuthButton.tsx
@@ -10,6 +10,7 @@ import { useYVAuth, useTheme } from '@youversion/platform-react-hooks';
 import { Button } from '../components/ui/button';
 import { YouVersionLogo } from './icons/youversion-logo';
 import { cn } from '../lib/utils';
+import { withShadowIsolation } from '../lib/shadow-isolation';
 
 interface SignInAuthProps {
   /**
@@ -109,7 +110,7 @@ export interface YouVersionAuthButtonProps
  * <YouVersionAuthButton scopes={['profile']}/>
  *
  */
-export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersionAuthButtonProps>(
+const YouVersionAuthButtonImpl = React.forwardRef<HTMLButtonElement, YouVersionAuthButtonProps>(
   (
     {
       background,
@@ -206,7 +207,7 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
           data-yv-sdk
           data-yv-theme={theme}
           className={cn(
-            'yv:shadow-none yv:p-3 yv:h-auto yv:w-fit',
+            'yv:font-sans yv:shadow-none yv:p-3 yv:h-auto yv:w-fit',
             // The YV brand button is a neutral surface (white in light, dark in
             // dark) with its own text/logo color set below — pin the background
             // explicitly so it doesn't inherit the `default` variant's
@@ -236,7 +237,7 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
         data-yv-sdk
         data-yv-theme={theme}
         className={cn(
-          'yv:relative yv:shadow-none yv:w-fit',
+          'yv:font-sans yv:relative yv:shadow-none yv:w-fit',
           // Pin the neutral brand surface so the button doesn't inherit the
           // `default` variant's `bg-primary` (see the icon branch above).
           'yv:bg-background yv:hover:bg-background/90',
@@ -259,4 +260,13 @@ export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersi
   },
 );
 
-YouVersionAuthButton.displayName = 'YouVersionAuthButton';
+YouVersionAuthButtonImpl.displayName = 'YouVersionAuthButtonImpl';
+
+/**
+ * Automatically rendered in a Shadow DOM so host-page selectors cannot style
+ * the button's internal DOM. No consumer wrapper or opt-in flag is required.
+ */
+export const YouVersionAuthButton = withShadowIsolation(
+  YouVersionAuthButtonImpl,
+  'YouVersionAuthButton',
+);
diff --git a/packages/ui/src/components/bible-reader.stories.tsx b/packages/ui/src/components/bible-reader.stories.tsx
index c08b8279..94d0e352 100644
--- a/packages/ui/src/components/bible-reader.stories.tsx
+++ b/packages/ui/src/components/bible-reader.stories.tsx
@@ -161,6 +161,114 @@ export const Default: Story = {
   },
 };
 
+export const VerseSelectionReanchoringDismissalAndFocusRestoration: Story = {
+  tags: ['integration'],
+  args: {
+    defaultVersionId: 111,
+    lineSpacing: 1.7,
+    fontFamily: INTER_FONT,
+    showVerseNumbers: true,
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('*/v1/fonts/1/stylesheet', () =>
+          HttpResponse.text('', { headers: { 'Content-Type': 'text/css' } }),
+        ),
+        ...globalHandlers,
+      ],
+    },
+  },
+  render: (args) => (
+    <div className="yv:grid yv:h-screen yv:grid-rows-[auto_1fr] yv:bg-background">
+      <button type="button" data-testid="outside-reader-control" autoFocus>
+        Outside reader
+      </button>
+      <BibleReader.Root {...args}>
+        <BibleReader.Content />
+        <BibleReader.Toolbar />
+      </BibleReader.Root>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const firstVerse = await waitFor(() => {
+      const element = canvasElement.querySelector<HTMLElement>('.yv-v[v="1"]');
+      if (!element) throw new Error('first verse not rendered');
+      return element;
+    });
+    const secondVerse = canvasElement.querySelector<HTMLElement>('.yv-v[v="2"]');
+    const secondVerseLabel = secondVerse?.querySelector<HTMLElement>('.yv-vlbl');
+    const outsideControl = canvasElement.querySelector<HTMLButtonElement>(
+      '[data-testid="outside-reader-control"]',
+    );
+    if (!secondVerse || !secondVerseLabel || !outsideControl)
+      throw new Error('reader interaction controls not rendered');
+
+    const ownerDocument = canvasElement.ownerDocument;
+    await waitFor(() => expect(ownerDocument.activeElement).toBe(outsideControl));
+    await userEvent.click(firstVerse);
+    let dialog = await screen.findByRole('dialog');
+
+    await expect(dialog.getRootNode()).toBe(ownerDocument);
+    await expect(ownerDocument.body).toContainElement(dialog);
+    await waitFor(() => expect(ownerDocument.activeElement).toBe(dialog));
+
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await expect(ownerDocument.activeElement).toBe(outsideControl);
+
+    await userEvent.click(firstVerse);
+    dialog = await screen.findByRole('dialog');
+    const firstDialogRect = dialog.getBoundingClientRect();
+
+    await userEvent.click(secondVerseLabel);
+    await expect(firstVerse).toHaveClass('yv-v-selected');
+    await expect(secondVerse).toHaveClass('yv-v-selected');
+    await expect(dialog).toBeInTheDocument();
+    await waitFor(() => {
+      const reanchoredRect = dialog.getBoundingClientRect();
+      const movedInline = Math.abs(reanchoredRect.left - firstDialogRect.left) > 8;
+      const movedBlock = Math.abs(reanchoredRect.top - firstDialogRect.top) > 8;
+      void expect(movedInline || movedBlock).toBe(true);
+    });
+
+    await userEvent.pointer({ keys: '[MouseLeft>]', target: outsideControl });
+    await waitFor(() => expect(dialog).not.toBeInTheDocument());
+    await expect(firstVerse).not.toHaveClass('yv-v-selected');
+    await expect(secondVerse).not.toHaveClass('yv-v-selected');
+    await userEvent.pointer({ keys: '[/MouseLeft]', target: outsideControl });
+    await expect(ownerDocument.activeElement).toBe(outsideControl);
+
+    // Touch outside events are deferred until click: the original pointerdown's
+    // composed path is already empty when Radix asks whether to dismiss.
+    const touchUser = userEvent.setup({ document: ownerDocument });
+    await touchUser.pointer({ keys: '[TouchA]', target: firstVerse });
+    dialog = await screen.findByRole('dialog');
+    // Radix disables animations until placement completes. Measure after both
+    // so initial positioning or animation cannot count as verse reanchoring.
+    await waitFor(() => expect(dialog.style.animation).not.toBe('none'));
+    await Promise.all(dialog.getAnimations().map((animation) => animation.finished));
+    const touchDialogRect = dialog.getBoundingClientRect();
+    await touchUser.pointer({ keys: '[TouchA]', target: secondVerseLabel });
+    await expect(firstVerse).toHaveClass('yv-v-selected');
+    await expect(secondVerse).toHaveClass('yv-v-selected');
+    await expect(dialog).toHaveAttribute('data-state', 'open');
+    await waitFor(() => {
+      const nextRect = dialog.getBoundingClientRect();
+      const movedInline = Math.abs(nextRect.left - touchDialogRect.left) > 8;
+      const movedBlock = Math.abs(nextRect.top - touchDialogRect.top) > 8;
+      void expect(movedInline || movedBlock).toBe(true);
+    });
+    await touchUser.pointer({ keys: '[TouchA>]', target: outsideControl });
+    await expect(dialog).toHaveAttribute('data-state', 'open');
+    await touchUser.pointer({ keys: '[/TouchA]', target: outsideControl });
+    await waitFor(() => expect(dialog).not.toBeInTheDocument());
+    await expect(firstVerse).not.toHaveClass('yv-v-selected');
+    await expect(secondVerse).not.toHaveClass('yv-v-selected');
+    await expect(ownerDocument.activeElement).toBe(outsideControl);
+  },
+};
+
 /**
  * Dark theme
  */
diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index 3daf30c3..03a9dd3e 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -1259,7 +1259,11 @@ export function BibleThemeSettingsContent({
 }: BibleThemeSettingsContentProps): ReactElement {
   const { t } = useTranslation(undefined, { i18n });
   return (
-    <div data-yv-sdk data-yv-theme={theme} className="yv:flex yv:flex-col yv:gap-4 yv:p-4">
+    <div
+      data-yv-sdk
+      data-yv-theme={theme}
+      className="yv:flex yv:min-h-0 yv:flex-col yv:gap-4 yv:overflow-y-auto yv:p-4"
+    >
       <div className="yv:flex yv:justify-between yv:items-stretch yv:gap-4">
         <div className="yv:flex yv:flex-1">
           <Button
diff --git a/packages/ui/src/components/bible-theme-settings.stories.tsx b/packages/ui/src/components/bible-theme-settings.stories.tsx
new file mode 100644
index 00000000..354d931b
--- /dev/null
+++ b/packages/ui/src/components/bible-theme-settings.stories.tsx
@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { http, HttpResponse } from 'msw';
+import { useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+import i18n from '../i18n';
+import { INTER_FONT, UNTITLED_SERIF_FONT, type FontFamily } from '../lib/verse-html-utils';
+import { BibleThemeSettingsContent } from './bible-reader';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+
+function ConstrainedSettings(): React.ReactNode {
+  const [boundary, setBoundary] = useState<HTMLDivElement | null>(null);
+  const [fontFamily, setFontFamily] = useState<FontFamily>(INTER_FONT);
+  return (
+    <div
+      ref={setBoundary}
+      data-testid="settings-boundary"
+      data-font-family={fontFamily}
+      style={{ position: 'relative', blockSize: 360, inlineSize: 800 }}
+    >
+      <div style={{ position: 'absolute', insetBlockStart: '53%', insetInlineStart: '50%' }}>
+        <Popover>
+          <PopoverTrigger data-testid="settings-trigger">Settings</PopoverTrigger>
+          <PopoverContent heading="Reader settings" collisionBoundary={boundary} sideOffset={16}>
+            <BibleThemeSettingsContent
+              theme="light"
+              fontFamily={fontFamily}
+              fontSize={16}
+              lineSpacing={1.7}
+              onFontSelected={setFontFamily}
+              onFontIncreased={() => undefined}
+              onFontDecreased={() => undefined}
+              onChangeLineSpacing={() => undefined}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Components/BibleReader/Settings',
+  component: ConstrainedSettings,
+  tags: ['integration'],
+  parameters: {
+    layout: 'fullscreen',
+    msw: {
+      handlers: [
+        http.get('*/v1/fonts/1/stylesheet', () =>
+          HttpResponse.text('', { headers: { 'Content-Type': 'text/css' } }),
+        ),
+      ],
+    },
+  },
+} satisfies Meta<typeof ConstrainedSettings>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FontControlsRemainReachableInConstrainedSpace: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(await canvas.findByTestId('settings-trigger'));
+    const ownerDocument = canvasElement.ownerDocument;
+    const dialog = await within(ownerDocument.body).findByRole('dialog');
+    const serifButton = within(dialog).getByRole('button', {
+      name: `${i18n.t('fontLabel')} ${i18n.t('untitledSerifFontName')}`,
+    });
+    // Use the real settings body and Radix collision cap. Unlike a click helper,
+    // hit testing can detect controls rendered but clipped below the panel.
+    const settingsBody = serifButton.closest<HTMLElement>('[data-yv-sdk]');
+    if (!settingsBody) throw new Error('settings body not rendered');
+    await waitFor(() => {
+      void expect(settingsBody.scrollHeight).toBeGreaterThan(settingsBody.clientHeight);
+    });
+    await Promise.all(dialog.getAnimations().map((animation) => animation.finished));
+    const header = within(dialog).getByRole('heading');
+    const headerTop = header.getBoundingClientRect().top;
+    settingsBody.scrollTop = settingsBody.scrollHeight;
+    await waitFor(() => {
+      void expect(settingsBody.scrollTop).toBeGreaterThan(0);
+      const buttonRect = serifButton.getBoundingClientRect();
+      const bodyRect = settingsBody.getBoundingClientRect();
+      void expect(buttonRect.top).toBeGreaterThanOrEqual(bodyRect.top);
+      void expect(buttonRect.bottom).toBeLessThanOrEqual(bodyRect.bottom);
+      const hit = ownerDocument.elementFromPoint(
+        buttonRect.left + buttonRect.width / 2,
+        buttonRect.top + buttonRect.height / 2,
+      );
+      void expect(serifButton.contains(hit)).toBe(true);
+      void expect(header.getBoundingClientRect().top).toBe(headerTop);
+    });
+    await userEvent.click(serifButton);
+    void expect(canvas.getByTestId('settings-boundary')).toHaveAttribute(
+      'data-font-family',
+      UNTITLED_SERIF_FONT,
+    );
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => void expect(dialog).not.toBeInTheDocument());
+    void expect(ownerDocument.activeElement).toBe(canvas.getByTestId('settings-trigger'));
+  },
+};
diff --git a/packages/ui/src/components/bible-version-picker.shadow-isolation.stories.tsx b/packages/ui/src/components/bible-version-picker.shadow-isolation.stories.tsx
new file mode 100644
index 00000000..d44153a7
--- /dev/null
+++ b/packages/ui/src/components/bible-version-picker.shadow-isolation.stories.tsx
@@ -0,0 +1,739 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { YouVersionProvider as HooksYouVersionProvider } from '@youversion/platform-react-hooks';
+import { http, HttpResponse } from 'msw';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { ShadowRootHost } from '../lib/shadow-root-host';
+import { requireShadowRoot } from '../test/dom-stubs';
+import { globalHandlers } from '../test/mocks/handlers';
+import { BibleVersionPicker } from './bible-version-picker';
+
+type PortalStrategy = 'local-inline' | 'local-top-layer';
+
+function IsolatedBibleVersionPicker({
+  side = 'top',
+  portalStrategy = 'local-top-layer',
+}: {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  portalStrategy?: PortalStrategy;
+}): React.ReactNode {
+  const [versionId, setVersionId] = useState(111);
+
+  return (
+    <ShadowRootHost portalStrategy={portalStrategy}>
+      <BibleVersionPicker.Root versionId={versionId} onVersionChange={setVersionId} side={side}>
+        <BibleVersionPicker.Trigger />
+        <BibleVersionPicker.Content />
+      </BibleVersionPicker.Root>
+    </ShadowRootHost>
+  );
+}
+
+function TwoPickersInOneIsland(): React.ReactNode {
+  const [firstVersionId, setFirstVersionId] = useState(111);
+  const [secondVersionId, setSecondVersionId] = useState(111);
+
+  return (
+    <ShadowRootHost portalStrategy="local-top-layer">
+      <div data-testid="first-picker">
+        <BibleVersionPicker.Root versionId={firstVersionId} onVersionChange={setFirstVersionId}>
+          <BibleVersionPicker.Trigger />
+          <BibleVersionPicker.Content />
+        </BibleVersionPicker.Root>
+      </div>
+      <div data-testid="second-picker">
+        <BibleVersionPicker.Root versionId={secondVersionId} onVersionChange={setSecondVersionId}>
+          <BibleVersionPicker.Trigger />
+          <BibleVersionPicker.Content />
+        </BibleVersionPicker.Root>
+      </div>
+    </ShadowRootHost>
+  );
+}
+
+function SameOriginIframeHarness(): React.ReactNode {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const iframeDocument = iframeRef.current?.contentDocument;
+    if (!iframeDocument) return;
+
+    const portalContainer = iframeDocument.createElement('div');
+    portalContainer.style.setProperty('display', 'grid');
+    portalContainer.style.setProperty('min-block-size', '100vh');
+    portalContainer.style.setProperty('place-items', 'center');
+    iframeDocument.body.append(portalContainer);
+    setContainer(portalContainer);
+
+    return () => portalContainer.remove();
+  }, []);
+
+  return (
+    <>
+      <iframe
+        ref={iframeRef}
+        data-testid="iframe"
+        title="same-origin picker target"
+        style={{ inlineSize: 800, blockSize: 600 }}
+      />
+      {container
+        ? createPortal(
+            <HooksYouVersionProvider appKey="123" apiHost="https://api.youversion.com">
+              <IsolatedBibleVersionPicker />
+            </HooksYouVersionProvider>,
+            container,
+          )
+        : null}
+    </>
+  );
+}
+
+const meta = {
+  title: 'Spikes/BibleVersionPicker Shadow DOM isolation',
+  component: IsolatedBibleVersionPicker,
+  tags: ['integration'],
+  parameters: {
+    layout: 'centered',
+    msw: {
+      handlers: [
+        ...globalHandlers,
+        http.get('*/v1/fonts/1/stylesheet', () =>
+          HttpResponse.text('', { headers: { 'Content-Type': 'text/css' } }),
+        ),
+      ],
+    },
+  },
+} satisfies Meta<typeof IsolatedBibleVersionPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+async function getComponentRoot(container: ParentNode): Promise<ShadowRoot> {
+  return waitFor(() => requireShadowRoot(container));
+}
+
+async function waitForElement<ElementType extends Element>(
+  container: ParentNode,
+  selector: string,
+  errorMessage: string,
+): Promise<ElementType> {
+  return waitFor(() => {
+    const element = container.querySelector<ElementType>(selector);
+    if (!element) throw new Error(errorMessage);
+    return element;
+  });
+}
+
+async function getTrigger(root: ShadowRoot): Promise<HTMLElement> {
+  return waitForElement(root, '[data-slot="popover-trigger"]', 'picker trigger not rendered');
+}
+
+async function openPicker(container: ParentNode) {
+  const root = await getComponentRoot(container);
+  const trigger = await getTrigger(root);
+  void expect(root.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
+  await userEvent.click(trigger);
+  const topLayer = await waitForElement<HTMLElement>(
+    root,
+    '[data-yv-shadow-local-overlay]',
+    'local top-layer container not created',
+  );
+  const panel = await waitForElement<HTMLElement>(
+    topLayer,
+    '[data-slot="popover-content"]',
+    'picker panel not rendered in local top layer',
+  );
+  await waitFor(() => void expect(topLayer.matches(':popover-open')).toBe(true));
+  return { root, trigger, topLayer, panel };
+}
+
+function styleSnapshot(element: HTMLElement) {
+  const styles = getComputedStyle(element);
+  return {
+    backgroundColor: styles.backgroundColor,
+    borderRadius: styles.borderRadius,
+    color: styles.color,
+    display: styles.display,
+    fontFamily: styles.fontFamily,
+    fontSize: styles.fontSize,
+    padding: styles.padding,
+  };
+}
+
+function geometrySnapshot(element: HTMLElement) {
+  return {
+    blockSize: element.offsetHeight,
+    inlineSize: element.offsetWidth,
+  };
+}
+
+function typographySnapshot(element: HTMLElement, ownerWindow: Window) {
+  const style = ownerWindow.getComputedStyle(element);
+  return {
+    color: style.color,
+    fontFamily: style.fontFamily,
+    fontSize: style.fontSize,
+    letterSpacing: style.letterSpacing,
+    lineHeight: style.lineHeight,
+    wordSpacing: style.wordSpacing,
+  };
+}
+
+export const TopLayerEscapesClippingAndPreservesSemantics: Story = {
+  render: () => (
+    <div
+      data-testid="clipping-container"
+      style={{ inlineSize: 180, blockSize: 56, overflow: 'hidden', transform: 'translateZ(0)' }}
+    >
+      <IsolatedBibleVersionPicker side="bottom" />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const clippingContainer = await waitForElement<HTMLElement>(
+      canvasElement,
+      '[data-testid="clipping-container"]',
+      'clipping container not rendered',
+    );
+    const { root, trigger, topLayer, panel } = await openPicker(clippingContainer);
+
+    void expect(topLayer.getRootNode()).toBe(root);
+    void expect(panel.getRootNode()).toBe(root);
+    void expect(
+      canvasElement.ownerDocument.body.querySelector('[data-yv-shadow-overlay-host]'),
+    ).toBeNull();
+
+    const clippingRect = clippingContainer.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+    void expect(panelRect.bottom).toBeGreaterThan(clippingRect.bottom + 1);
+    const viewport = canvasElement.ownerDocument.defaultView;
+    if (!viewport) throw new Error('story window not available');
+    void expect(panelRect.top).toBeGreaterThanOrEqual(16);
+    void expect(panelRect.left).toBeGreaterThanOrEqual(16);
+    void expect(panelRect.bottom).toBeLessThanOrEqual(viewport.innerHeight - 16);
+    void expect(panelRect.right).toBeLessThanOrEqual(viewport.innerWidth - 16);
+
+    const sampleX = panelRect.left + panelRect.width / 2;
+    const sampleY = Math.max(panelRect.top + 2, clippingRect.bottom + 2);
+    if (sampleY >= panelRect.bottom) throw new Error('panel did not extend beyond its ancestor');
+    const hit = root.elementFromPoint(sampleX, sampleY);
+    void expect(hit === panel || (hit !== null && panel.contains(hit))).toBe(true);
+
+    // SAFETY: Chromium exposes this reflected-ARIA draft property; the guard below verifies it.
+    const reflectedControls = (
+      trigger as HTMLElement & { ariaControlsElements?: readonly Element[] }
+    ).ariaControlsElements;
+    if (!reflectedControls) throw new Error('Chromium did not expose ariaControlsElements');
+    void expect(trigger.getAttribute('aria-controls')).toBe(panel.id);
+    void expect(reflectedControls).toEqual([panel]);
+  },
+};
+
+export const InlineControlIsClippedByItsAncestor: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gap: 12, inlineSize: 420 }}>
+      <div>
+        <strong style={{ display: 'block', font: '600 14px/1.4 system-ui' }}>
+          Inline portal: intentionally clipped
+        </strong>
+        <span style={{ color: '#666', font: '13px/1.4 system-ui' }}>
+          The menu opens below the trigger, but only the portion inside the dashed frame remains
+          visible.
+        </span>
+      </div>
+      <div
+        data-testid="clipping-container"
+        style={{
+          inlineSize: 420,
+          blockSize: 150,
+          overflow: 'hidden',
+          padding: 16,
+          border: '2px dashed #a3a3a3',
+          borderRadius: 12,
+          transform: 'translateZ(0)',
+        }}
+      >
+        <IsolatedBibleVersionPicker side="bottom" portalStrategy="local-inline" />
+      </div>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const clippingContainer = await waitForElement<HTMLElement>(
+      canvasElement,
+      '[data-testid="clipping-container"]',
+      'clipping container not rendered',
+    );
+    const root = await getComponentRoot(clippingContainer);
+    void expect(root.querySelector('[data-yv-shadow-inline-overlay]')).toBeNull();
+    await userEvent.click(await getTrigger(root));
+    const inlineContainer = await waitForElement<HTMLElement>(
+      root,
+      '[data-yv-shadow-inline-overlay]',
+      'inline portal container not created',
+    );
+    const panel = await waitForElement<HTMLElement>(
+      inlineContainer,
+      '[data-slot="popover-content"]',
+      'inline picker panel not rendered',
+    );
+
+    const clippingRect = clippingContainer.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+    void expect(panelRect.bottom).toBeGreaterThan(clippingRect.bottom + 1);
+    const sampleX = panelRect.left + panelRect.width / 2;
+    const visibleSampleY = Math.max(panelRect.top + 2, clippingRect.top + 2);
+    if (visibleSampleY >= clippingRect.bottom) {
+      throw new Error('panel has no visible area inside its clipping ancestor');
+    }
+    const visibleHit = root.elementFromPoint(sampleX, visibleSampleY);
+    void expect(visibleHit === panel || (visibleHit !== null && panel.contains(visibleHit))).toBe(
+      true,
+    );
+
+    const clippedSampleY = Math.max(panelRect.top + 2, clippingRect.bottom + 2);
+    if (clippedSampleY >= panelRect.bottom) {
+      throw new Error('panel did not extend beyond its clipping ancestor');
+    }
+    const clippedHit = root.elementFromPoint(sampleX, clippedSampleY);
+    void expect(clippedHit === panel || (clippedHit !== null && panel.contains(clippedHit))).toBe(
+      false,
+    );
+  },
+};
+
+export const StylingFocusDismissalAndRapidReopen: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
+      <button type="button" data-testid="outside-control">
+        Outside control
+      </button>
+      <IsolatedBibleVersionPicker />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const outsideControl = canvasElement.querySelector<HTMLButtonElement>(
+      '[data-testid="outside-control"]',
+    );
+    if (!outsideControl) throw new Error('outside control not rendered');
+    const { root, trigger, topLayer, panel } = await openPicker(canvasElement);
+    await waitFor(() => {
+      const focused = root.activeElement;
+      void expect(focused !== null && panel.contains(focused)).toBe(true);
+    });
+
+    const baseline = styleSnapshot(panel);
+    const hostileStyle = canvasElement.ownerDocument.createElement('style');
+    hostileStyle.textContent = `
+      button, input, [role='dialog'] {
+        background: rgb(185, 28, 28) !important;
+        border: 10px dashed lime !important;
+        border-radius: 0 !important;
+        color: yellow !important;
+        font: 32px/1 fantasy !important;
+        padding: 40px !important;
+      }
+    `;
+    try {
+      canvasElement.ownerDocument.head.append(hostileStyle);
+      await waitFor(
+        () =>
+          void expect(getComputedStyle(outsideControl).backgroundColor).toBe('rgb(185, 28, 28)'),
+      );
+      void expect(styleSnapshot(panel)).toEqual(baseline);
+    } finally {
+      hostileStyle.remove();
+    }
+
+    await userEvent.click(outsideControl);
+    await waitFor(() => {
+      void expect(panel).toHaveAttribute('data-state', 'closed');
+      void expect(topLayer).toContainElement(panel);
+      void expect(topLayer.matches(':popover-open')).toBe(true);
+    });
+    await waitFor(() => {
+      void expect(topLayer.querySelector('[data-slot="popover-content"]')).toBeNull();
+      void expect(topLayer.matches(':popover-open')).toBe(false);
+    });
+
+    await userEvent.click(trigger);
+    const reopenedPanel = await waitForElement<HTMLElement>(
+      topLayer,
+      '[data-slot="popover-content"]',
+      'picker panel did not reopen',
+    );
+    await waitFor(() => {
+      const activeElement = root.activeElement;
+      void expect(activeElement !== null && reopenedPanel.contains(activeElement)).toBe(true);
+    });
+
+    const focused = root.activeElement;
+    if (!(focused instanceof HTMLElement)) throw new Error('picker focus not available');
+    focused.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }),
+    );
+    trigger.click();
+    await waitFor(() => {
+      void expect(topLayer.matches(':popover-open')).toBe(true);
+      void expect(topLayer.querySelectorAll('[data-slot="popover-content"]')).toHaveLength(1);
+    });
+
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => {
+      void expect(topLayer.querySelector('[data-slot="popover-content"]')).toBeNull();
+      void expect(topLayer.matches(':popover-open')).toBe(false);
+      void expect(root.activeElement).toBe(trigger);
+    });
+  },
+};
+
+export const DirectionOnlyInheritanceRejectsHostVisualValues: Story = {
+  render: () => (
+    <div
+      data-testid="hostile-inheritance-container"
+      dir="rtl"
+      style={{ display: 'flex', alignItems: 'center', gap: 24 }}
+    >
+      <span data-testid="hostile-inheritance-control">Host control</span>
+      <IsolatedBibleVersionPicker />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const ownerDocument = canvasElement.ownerDocument;
+    const ownerWindow = ownerDocument.defaultView;
+    if (!ownerWindow) throw new Error('story owner window not available');
+
+    const hostControl = canvasElement.querySelector<HTMLElement>(
+      '[data-testid="hostile-inheritance-control"]',
+    );
+    if (!hostControl) throw new Error('hostile inheritance control not rendered');
+
+    const { root, trigger, panel } = await openPicker(canvasElement);
+    const wrapper = root.querySelector<HTMLElement>('[data-yv-shadow-content-wrapper]');
+    const heading = panel.querySelector<HTMLElement>('h2');
+    const inputGroup = panel.querySelector<HTMLElement>('[data-slot="input-group"]');
+    if (!wrapper || !heading || !inputGroup) throw new Error('picker landmarks not rendered');
+
+    const triggerGeometry = geometrySnapshot(trigger);
+    const panelGeometry = geometrySnapshot(panel);
+    const inputGeometry = geometrySnapshot(inputGroup);
+    const headingTypography = typographySnapshot(heading, ownerWindow);
+    void expect(headingTypography.fontFamily).toContain('Inter');
+    void expect(ownerWindow.getComputedStyle(trigger).direction).toBe('rtl');
+    void expect(ownerWindow.getComputedStyle(wrapper).direction).toBe('rtl');
+
+    await userEvent.click(within(panel).getByRole('button', { name: /select language/i }));
+    const languageTabs = await waitForElement<HTMLElement>(
+      panel,
+      '[data-slot="tabs-list"]',
+      'language tabs did not render',
+    );
+    const languageTabsContainer = languageTabs.parentElement;
+    const languageContent = languageTabs.closest<HTMLElement>('[data-yv-sdk]');
+    const languageInputGroup = languageContent?.querySelector<HTMLElement>(
+      '[data-slot="input-group"]',
+    );
+    if (!languageTabsContainer || !languageInputGroup) {
+      throw new Error('language panel geometry landmarks not rendered');
+    }
+    const languageTabsInlineSize = languageTabs.offsetWidth;
+    const languageInputRadius = ownerWindow.getComputedStyle(languageInputGroup).borderRadius;
+    void expect(languageTabsInlineSize).toBe(languageTabsContainer.clientWidth - 32);
+    void expect(languageInputRadius).toBe('30px');
+
+    const hostileStyle = ownerDocument.createElement('style');
+    hostileStyle.textContent = `
+      [data-testid='hostile-inheritance-container'] {
+        --spacing: 6rem;
+        --yv-spacing: 6rem;
+        --radius: 0;
+        --yv-radius: 0;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        color: rgb(185, 28, 28);
+        font-family: fantasy;
+        font-size: 32px;
+        letter-spacing: 0.5em;
+        line-height: 3;
+        word-spacing: 1em;
+      }
+
+      [data-testid='hostile-inheritance-control'] {
+        border-radius: var(--radius);
+      }
+    `;
+
+    try {
+      ownerDocument.head.append(hostileStyle);
+      await waitFor(() => {
+        const controlStyle = ownerWindow.getComputedStyle(hostControl);
+        void expect(controlStyle.writingMode).toBe('vertical-rl');
+        void expect(controlStyle.textOrientation).toBe('upright');
+        void expect(controlStyle.color).toBe('rgb(185, 28, 28)');
+        void expect(controlStyle.fontFamily).toContain('fantasy');
+        void expect(controlStyle.fontSize).toBe('32px');
+        void expect(controlStyle.letterSpacing).toBe('16px');
+        void expect(controlStyle.lineHeight).toBe('96px');
+        void expect(controlStyle.wordSpacing).toBe('32px');
+        void expect(controlStyle.borderRadius).toBe('0px');
+      });
+
+      const wrapperStyle = ownerWindow.getComputedStyle(wrapper);
+      const headingStyle = ownerWindow.getComputedStyle(heading);
+      const panelStyle = ownerWindow.getComputedStyle(panel);
+      void expect(wrapperStyle.direction).toBe('rtl');
+      void expect(wrapperStyle.writingMode).toBe('horizontal-tb');
+      void expect(wrapperStyle.textOrientation).toBe('mixed');
+      void expect(headingStyle.direction).toBe('rtl');
+      void expect(headingStyle.writingMode).toBe('horizontal-tb');
+      void expect(headingStyle.textOrientation).toBe('mixed');
+      void expect(typographySnapshot(heading, ownerWindow)).toEqual(headingTypography);
+      void expect(panelStyle.getPropertyValue('--yv-spacing').trim()).toBe('.25rem');
+      void expect(panelStyle.getPropertyValue('--spacing').trim()).toBe('.25rem');
+      void expect(panelStyle.getPropertyValue('--yv-radius').trim()).toBe('2rem');
+      void expect(languageTabs.offsetWidth).toBe(languageTabsInlineSize);
+      void expect(ownerWindow.getComputedStyle(languageInputGroup).borderRadius).toBe(
+        languageInputRadius,
+      );
+      void expect(geometrySnapshot(trigger)).toEqual(triggerGeometry);
+      void expect(geometrySnapshot(panel)).toEqual(panelGeometry);
+      void expect(geometrySnapshot(inputGroup)).toEqual(inputGeometry);
+    } finally {
+      hostileStyle.remove();
+    }
+  },
+};
+
+export const MultiplePickersCreateIndependentLazyContainers: Story = {
+  render: () => (
+    <div>
+      <div data-testid="first-picker">
+        <IsolatedBibleVersionPicker />
+      </div>
+      <div data-testid="second-picker">
+        <IsolatedBibleVersionPicker />
+      </div>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const first = canvasElement.querySelector<HTMLElement>('[data-testid="first-picker"]');
+    const second = canvasElement.querySelector<HTMLElement>('[data-testid="second-picker"]');
+    if (!first || !second) throw new Error('picker harness not rendered');
+    const firstRoot = await getComponentRoot(first);
+    const secondRoot = await getComponentRoot(second);
+    void expect(firstRoot.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
+    void expect(secondRoot.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
+
+    const firstTrigger = await getTrigger(firstRoot);
+    const secondTrigger = await getTrigger(secondRoot);
+    await userEvent.click(firstTrigger);
+    const firstTopLayer = await waitForElement<HTMLElement>(
+      firstRoot,
+      '[data-yv-shadow-local-overlay]',
+      'first local container not created',
+    );
+    void expect(secondRoot.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
+
+    await userEvent.click(secondTrigger);
+    const secondTopLayer = await waitForElement<HTMLElement>(
+      secondRoot,
+      '[data-yv-shadow-local-overlay]',
+      'second local container not created',
+    );
+    await waitFor(() => {
+      void expect(firstTopLayer.matches(':popover-open')).toBe(false);
+      void expect(secondTopLayer.matches(':popover-open')).toBe(true);
+      void expect(secondTopLayer.querySelectorAll('[data-slot="popover-content"]')).toHaveLength(1);
+    });
+  },
+};
+
+export const MultiplePopoversShareOneIslandContainer: Story = {
+  render: () => <TwoPickersInOneIsland />,
+  play: async ({ canvasElement }) => {
+    const root = await getComponentRoot(canvasElement);
+    const triggers = Array.from(
+      root.querySelectorAll<HTMLElement>('[data-slot="popover-trigger"]'),
+    );
+    void expect(triggers).toHaveLength(2);
+    const [firstTrigger, secondTrigger] = triggers;
+    if (!firstTrigger || !secondTrigger) throw new Error('picker triggers not rendered');
+    void expect(root.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
+
+    await userEvent.click(firstTrigger);
+    const topLayer = await waitForElement<HTMLElement>(
+      root,
+      '[data-yv-shadow-local-overlay]',
+      'shared island container not created',
+    );
+    await waitFor(() => {
+      void expect(firstTrigger).toHaveAttribute('aria-expanded', 'true');
+      void expect(topLayer.querySelectorAll('[data-slot="popover-content"]')).toHaveLength(1);
+    });
+
+    await userEvent.click(secondTrigger);
+    await waitFor(() => {
+      void expect(firstTrigger).toHaveAttribute('aria-expanded', 'false');
+      void expect(secondTrigger).toHaveAttribute('aria-expanded', 'true');
+      void expect(topLayer.matches(':popover-open')).toBe(true);
+      void expect(topLayer.querySelectorAll('[data-slot="popover-content"]')).toHaveLength(1);
+      void expect(root.querySelectorAll('[data-yv-shadow-local-overlay]')).toHaveLength(1);
+    });
+
+    const panel = topLayer.querySelector<HTMLElement>('[data-slot="popover-content"]');
+    if (!panel) throw new Error('second picker panel not rendered');
+    const panelRect = panel.getBoundingClientRect();
+    const viewport = canvasElement.ownerDocument.defaultView;
+    if (!viewport) throw new Error('story window not available');
+    void expect(panelRect.top).toBeGreaterThanOrEqual(16);
+    void expect(panelRect.bottom).toBeLessThanOrEqual(viewport.innerHeight - 16);
+  },
+};
+
+export const PanelTracksAncestorScrollAndVersionListScrollsInternally: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gap: 32 }}>
+      <div
+        data-testid="scroll-ancestor"
+        style={{ inlineSize: 320, blockSize: 220, overflow: 'auto', border: '1px solid #ccc' }}
+      >
+        <div style={{ blockSize: 400 }} />
+        <div data-testid="scroll-picker">
+          <IsolatedBibleVersionPicker side="bottom" />
+        </div>
+        <div style={{ blockSize: 400 }} />
+      </div>
+      <div data-testid="list-picker">
+        <IsolatedBibleVersionPicker side="bottom" />
+      </div>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    // Part 1: the panel repositions when its ancestor scrolls. Radix's
+    // Popper still recalculates position for content living in the native
+    // top-layer container, even though that container itself sits outside
+    // normal document flow.
+    const scrollAncestor = await waitForElement<HTMLElement>(
+      canvasElement,
+      '[data-testid="scroll-ancestor"]',
+      'scroll ancestor not rendered',
+    );
+    scrollAncestor.scrollTop = 350;
+    scrollAncestor.dispatchEvent(new Event('scroll', { bubbles: true }));
+
+    const scrollPickerContainer = canvasElement.querySelector<HTMLElement>(
+      '[data-testid="scroll-picker"]',
+    );
+    if (!scrollPickerContainer) throw new Error('scroll picker container not rendered');
+    const { trigger, panel } = await openPicker(scrollPickerContainer);
+
+    const triggerRectBefore = trigger.getBoundingClientRect();
+    const panelRectBefore = panel.getBoundingClientRect();
+    // The trigger→panel offset, not raw position — collision middleware can
+    // legitimately re-flip/re-offset the panel near viewport edges, so
+    // asserting the two move in exact lockstep would be flaky. The scroll
+    // distance below is kept well clear of any collision-flip threshold.
+    const offsetBefore = panelRectBefore.top - triggerRectBefore.bottom;
+
+    const scrollDelta = 80;
+    scrollAncestor.scrollTop += scrollDelta;
+    scrollAncestor.dispatchEvent(new Event('scroll', { bubbles: true }));
+
+    await waitFor(() => {
+      const triggerRectAfter = trigger.getBoundingClientRect();
+      void expect(
+        Math.abs(triggerRectAfter.top - (triggerRectBefore.top - scrollDelta)),
+      ).toBeLessThan(2);
+    });
+    const triggerRectAfter = trigger.getBoundingClientRect();
+    const panelRectAfter = panel.getBoundingClientRect();
+    const offsetAfter = panelRectAfter.top - triggerRectAfter.bottom;
+    void expect(Math.abs(offsetAfter - offsetBefore)).toBeLessThan(8);
+
+    // Part 2: the version list scrolls internally within the panel. Locate
+    // the scroll region via the unconditional "All Versions" marker's
+    // parent — not the "recently used" section, which only renders given
+    // prior usage state a fresh story never has.
+    const listPickerContainer = canvasElement.querySelector<HTMLElement>(
+      '[data-testid="list-picker"]',
+    );
+    if (!listPickerContainer) throw new Error('list picker container not rendered');
+    const { root: listRoot, panel: listPanel } = await openPicker(listPickerContainer);
+
+    const versionList = await waitForElement<HTMLElement>(
+      listPanel,
+      '[data-testid="version-list"]',
+      'version list not rendered',
+    );
+    const scrollRegion = versionList.parentElement;
+    if (!scrollRegion) throw new Error('version list scroll region not found');
+
+    const items = Array.from(versionList.querySelectorAll<HTMLElement>('[role="listitem"]'));
+    if (items.length < 4) {
+      throw new Error('fixture does not provide enough versions to exercise scrolling');
+    }
+    const lastItem = items[items.length - 1];
+    if (!lastItem) throw new Error('no version items rendered');
+
+    const initialScrollTop = scrollRegion.scrollTop;
+    scrollRegion.scrollTop = scrollRegion.scrollHeight;
+    scrollRegion.dispatchEvent(new Event('scroll', { bubbles: true }));
+
+    await waitFor(() => {
+      void expect(scrollRegion.scrollTop).toBeGreaterThan(initialScrollTop);
+    });
+
+    const lastItemRect = lastItem.getBoundingClientRect();
+    const hit = listRoot.elementFromPoint(
+      lastItemRect.left + lastItemRect.width / 2,
+      lastItemRect.top + lastItemRect.height / 2,
+    );
+    void expect(hit === lastItem || (hit !== null && lastItem.contains(hit))).toBe(true);
+  },
+};
+
+export const SameOriginIframeTopLayerRemainsInteractive: Story = {
+  render: () => <SameOriginIframeHarness />,
+  play: async ({ canvasElement }) => {
+    const iframe = canvasElement.querySelector<HTMLIFrameElement>('[data-testid="iframe"]');
+    if (!iframe?.contentDocument) throw new Error('same-origin iframe document not available');
+    const componentRoot = await getComponentRoot(iframe.contentDocument);
+    const trigger = await getTrigger(componentRoot);
+    await userEvent.click(trigger);
+    const topLayer = await waitForElement<HTMLElement>(
+      componentRoot,
+      '[data-yv-shadow-local-overlay]',
+      'iframe top-layer container not created',
+    );
+    const portalWrapper = await waitFor(() => {
+      const element = topLayer.firstElementChild;
+      // SAFETY: A same-origin iframe exposes its realm's HTMLElement constructor on its Window.
+      const frameWindow = iframe.contentWindow as
+        | (Window & { HTMLElement: typeof HTMLElement })
+        | null;
+      if (!frameWindow || !(element instanceof frameWindow.HTMLElement)) {
+        throw new Error('iframe portal wrapper not rendered in its owner realm');
+      }
+      return element;
+    });
+    const portalWindow = portalWrapper.ownerDocument.defaultView;
+    if (!portalWindow) throw new Error('iframe portal window not available');
+    void expect(portalWindow.getComputedStyle(portalWrapper).pointerEvents).toBe('auto');
+
+    const input = await waitForElement<HTMLInputElement>(
+      topLayer,
+      'input',
+      'iframe picker input not rendered',
+    );
+    await userEvent.click(input);
+    void expect(componentRoot.activeElement).toBe(input);
+
+    const panel = topLayer.querySelector<HTMLElement>('[data-slot="popover-content"]');
+    if (!panel) throw new Error('iframe picker panel not rendered');
+    const panelRect = panel.getBoundingClientRect();
+    const frameWindow = iframe.contentWindow;
+    if (!frameWindow) throw new Error('iframe window not available');
+    void expect(panelRect.top).toBeGreaterThanOrEqual(16);
+    void expect(panelRect.bottom).toBeLessThanOrEqual(frameWindow.innerHeight - 16);
+  },
+};
diff --git a/packages/ui/src/components/bible-version-picker.tsx b/packages/ui/src/components/bible-version-picker.tsx
index ef6f84f9..7e18bbb7 100644
--- a/packages/ui/src/components/bible-version-picker.tsx
+++ b/packages/ui/src/components/bible-version-picker.tsx
@@ -986,7 +986,7 @@ export function BibleLanguagePickerContent({
           value={languageTab}
           onValueChange={setLanguageTab}
         >
-          <TabsList className="yv:mx-4 yv:w-[calc(100%-4*var(--spacing)*2)]">
+          <TabsList className="yv:mx-4 yv:w-[calc(100%-4*var(--yv-spacing)*2)]">
             <TabsTrigger className="yv:p-0" value="suggested">
               {t('suggestedTab')}
             </TabsTrigger>
diff --git a/packages/ui/src/components/consumer-compatibility.shadow-isolation.stories.tsx b/packages/ui/src/components/consumer-compatibility.shadow-isolation.stories.tsx
new file mode 100644
index 00000000..2c6a6b95
--- /dev/null
+++ b/packages/ui/src/components/consumer-compatibility.shadow-isolation.stories.tsx
@@ -0,0 +1,422 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useTheme } from '@youversion/platform-react-hooks';
+import { http, HttpResponse } from 'msw';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { expect, userEvent, waitFor } from 'storybook/test';
+import { ShadowRootHost } from '../lib/shadow-root-host';
+import { Textarea } from './ui/textarea';
+import { YouVersionAuthButton } from './YouVersionAuthButton';
+
+const meta = {
+  title: 'Spikes/Shadow DOM consumer compatibility',
+  tags: ['integration'],
+  parameters: {
+    layout: 'padded',
+    msw: {
+      handlers: [
+        http.get('*/v1/fonts/1/stylesheet', () =>
+          HttpResponse.text('', { headers: { 'Content-Type': 'text/css' } }),
+        ),
+      ],
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function requireElement<ElementType extends Element>(
+  container: ParentNode,
+  selector: string,
+  message: string,
+): ElementType {
+  const element = container.querySelector<ElementType>(selector);
+  if (!element) throw new Error(message);
+  return element;
+}
+
+async function waitForElement<ElementType extends Element>(
+  container: ParentNode,
+  selector: string,
+  message: string,
+): Promise<ElementType> {
+  return waitFor(() => requireElement<ElementType>(container, selector, message));
+}
+
+async function requireShadowHost(container: ParentNode): Promise<HTMLElement> {
+  return waitFor(() => {
+    const host = requireElement<HTMLElement>(
+      container,
+      '[data-yv-shadow-host]',
+      'shadow host not rendered',
+    );
+    if (!host.shadowRoot) throw new Error('shadow root not attached');
+    return host;
+  });
+}
+
+interface NodeEvidenceOutput extends HTMLOutputElement {
+  observedNode?: EventTarget | null;
+}
+
+interface CompatibilityScenarioProps {
+  children: React.ReactNode;
+  classification: string;
+  expectedResult: string;
+  summary: string;
+  title: string;
+}
+
+function CompatibilityScenario({
+  children,
+  classification,
+  expectedResult,
+  summary,
+  title,
+}: CompatibilityScenarioProps): React.ReactNode {
+  const theme = useTheme();
+
+  return (
+    <section
+      className="yv:border-border yv:text-foreground"
+      data-yv-sdk
+      data-yv-theme={theme}
+      style={{
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderRadius: '0.75rem',
+        display: 'grid',
+        fontFamily: 'system-ui, sans-serif',
+        gap: '1.25rem',
+        maxInlineSize: '44rem',
+        padding: '1.5rem',
+      }}
+    >
+      <header style={{ display: 'grid', gap: '0.5rem' }}>
+        <p
+          className="yv:text-muted-foreground"
+          style={{ fontSize: '0.75rem', fontWeight: 700, margin: 0 }}
+        >
+          SHADOW DOM COMPATIBILITY EVIDENCE
+        </p>
+        <h2 style={{ fontSize: '1.25rem', margin: 0 }}>{title}</h2>
+        <p style={{ lineHeight: 1.5, margin: 0 }}>{summary}</p>
+      </header>
+      <aside
+        aria-label="Expected result"
+        className="yv:bg-muted yv:border-muted-foreground"
+        style={{
+          borderInlineStartStyle: 'solid',
+          borderInlineStartWidth: '0.25rem',
+          paddingBlock: '0.75rem',
+          paddingInline: '1rem',
+        }}
+      >
+        <p
+          className="yv:text-muted-foreground"
+          style={{ fontSize: '0.75rem', fontWeight: 700, margin: 0 }}
+        >
+          EXPECTED RESULT
+        </p>
+        <p style={{ fontWeight: 700, margin: 0 }}>{classification}</p>
+        <p style={{ lineHeight: 1.5, marginBlock: '0.25rem 0', marginInline: 0 }}>
+          {expectedResult}
+        </p>
+      </aside>
+      <div
+        className="yv:border-border"
+        style={{
+          borderBlockStartStyle: 'solid',
+          borderBlockStartWidth: '1px',
+          paddingBlockStart: '1.25rem',
+        }}
+      >
+        <p style={{ fontSize: '0.875rem', fontWeight: 700, marginBlock: '0 0.75rem' }}>
+          Rendered example
+        </p>
+        {children}
+      </div>
+    </section>
+  );
+}
+
+function FormRelationshipsHarness(): React.ReactNode {
+  return (
+    <CompatibilityScenario
+      classification="Unsupported across tree scopes"
+      expectedResult="The outer form, label, accessible name, and description cannot establish native relationships with the textarea inside the shadow root."
+      summary="This example places form metadata in the light DOM and a textarea inside an SDK shadow root."
+      title="Forms, labels, and descriptions"
+    >
+      <form data-testid="consumer-form" style={{ display: 'grid', gap: '0.5rem' }}>
+        <label htmlFor="isolated-notes" data-testid="external-label">
+          Notes
+        </label>
+        <span id="external-name">External accessible name</span>
+        <span id="external-description">External accessible description</span>
+        <ShadowRootHost>
+          <Textarea
+            id="isolated-notes"
+            name="notes"
+            defaultValue="consumer value"
+            aria-labelledby="external-name"
+            aria-describedby="external-description"
+          />
+        </ShadowRootHost>
+      </form>
+    </CompatibilityScenario>
+  );
+}
+
+export const FormsAndExternalRelationshipsStopAtTheTreeScope: Story = {
+  name: 'External relationships stop at the shadow boundary',
+  render: () => <FormRelationshipsHarness />,
+  play: async ({ canvasElement }) => {
+    const form = await waitFor(() =>
+      requireElement<HTMLFormElement>(
+        canvasElement,
+        '[data-testid="consumer-form"]',
+        'consumer form not rendered',
+      ),
+    );
+    const label = requireElement<HTMLLabelElement>(
+      canvasElement,
+      '[data-testid="external-label"]',
+      'external label not rendered',
+    );
+    const host = await requireShadowHost(form);
+    const root = host.shadowRoot!;
+    const textarea = await waitForElement<HTMLTextAreaElement>(
+      root,
+      '#isolated-notes',
+      'isolated textarea not rendered',
+    );
+
+    void expect(textarea.form).toBeNull();
+    void expect(form.elements.namedItem('notes')).toBeNull();
+    void expect(new FormData(form).has('notes')).toBe(false);
+
+    void expect(label.control).toBeNull();
+    await userEvent.click(label);
+    void expect(root.activeElement).not.toBe(textarea);
+
+    type ReflectedAriaElement = HTMLElement & {
+      ariaLabelledByElements?: readonly Element[];
+      ariaDescribedByElements?: readonly Element[];
+    };
+    // SAFETY: The optional extension models Chromium properties, and the guards below verify them.
+    const reflectedTextarea = textarea as ReflectedAriaElement;
+    if (!reflectedTextarea.ariaLabelledByElements) {
+      throw new Error('Chromium did not expose ariaLabelledByElements');
+    }
+    if (!reflectedTextarea.ariaDescribedByElements) {
+      throw new Error('Chromium did not expose ariaDescribedByElements');
+    }
+
+    void expect(textarea.getAttribute('aria-labelledby')).toBe('external-name');
+    void expect(textarea.getAttribute('aria-describedby')).toBe('external-description');
+    void expect(reflectedTextarea.ariaLabelledByElements).toEqual([]);
+    void expect(reflectedTextarea.ariaDescribedByElements).toEqual([]);
+  },
+};
+
+function AutomaticButtonHarness(): React.ReactNode {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const firstLayoutRefState = useRef<'pending' | 'null' | 'resolved'>('pending');
+  const forwardedRefEvidence = useRef<NodeEvidenceOutput | null>(null);
+  const consumerTargetEvidence = useRef<NodeEvidenceOutput | null>(null);
+  const consumerCurrentTargetEvidence = useRef<NodeEvidenceOutput | null>(null);
+  const [firstLayoutResult, setFirstLayoutResult] = useState<'pending' | 'null' | 'resolved'>(
+    'pending',
+  );
+
+  useLayoutEffect(() => {
+    if (firstLayoutRefState.current !== 'pending') return;
+
+    const result = buttonRef.current === null ? 'null' : 'resolved';
+    firstLayoutRefState.current = result;
+    setFirstLayoutResult(result);
+  }, []);
+
+  const receiveButtonRef = useCallback((node: HTMLButtonElement | null): void => {
+    buttonRef.current = node;
+    if (forwardedRefEvidence.current) forwardedRefEvidence.current.observedNode = node;
+  }, []);
+
+  return (
+    <CompatibilityScenario
+      classification="Supported with documented constraints"
+      expectedResult="The React click handler and forwarded ref expose the internal button. Native listeners outside the root see the shadow host as the event target. DOM selector APIs need explicit root traversal."
+      summary="This example compares the views exposed to React consumers, native event listeners, refs, and DOM selector APIs."
+      title="Events, refs, and test queries"
+    >
+      <div data-testid="consumer-observer">
+        <YouVersionAuthButton
+          ref={receiveButtonRef}
+          data-testid="isolated-auth-button"
+          mode="signOut"
+          onClick={(event) => {
+            if (consumerTargetEvidence.current) {
+              consumerTargetEvidence.current.observedNode = event.target;
+            }
+            if (consumerCurrentTargetEvidence.current) {
+              consumerCurrentTargetEvidence.current.observedNode = event.currentTarget;
+            }
+          }}
+        />
+        <output hidden data-testid="first-layout-ref-state">
+          {firstLayoutResult}
+        </output>
+        <output hidden ref={forwardedRefEvidence} data-testid="forwarded-ref-evidence" />
+        <output hidden ref={consumerTargetEvidence} data-testid="consumer-target-evidence" />
+        <output
+          hidden
+          ref={consumerCurrentTargetEvidence}
+          data-testid="consumer-current-target-evidence"
+        />
+      </div>
+    </CompatibilityScenario>
+  );
+}
+
+export const EventsRefsAndDomQueriesExposeDifferentConsumerViews: Story = {
+  name: 'Events, refs, and DOM queries expose different views',
+  render: () => <AutomaticButtonHarness />,
+  play: async ({ canvasElement }) => {
+    const observer = await waitFor(() =>
+      requireElement<HTMLElement>(
+        canvasElement,
+        '[data-testid="consumer-observer"]',
+        'consumer observer not rendered',
+      ),
+    );
+    const host = await requireShadowHost(observer);
+    const root = host.shadowRoot!;
+    const button = await waitForElement<HTMLButtonElement>(
+      root,
+      '[data-testid="isolated-auth-button"]',
+      'isolated auth button not rendered',
+    );
+
+    void expect(canvasElement.querySelector('[data-testid="isolated-auth-button"]')).toBeNull();
+    void expect(root.querySelector('[data-testid="isolated-auth-button"]')).toBe(button);
+    const firstLayoutEvidence = requireElement<HTMLOutputElement>(
+      canvasElement,
+      '[data-testid="first-layout-ref-state"]',
+      'first layout ref state not rendered',
+    );
+    const forwardedRefEvidence = requireElement<NodeEvidenceOutput>(
+      canvasElement,
+      '[data-testid="forwarded-ref-evidence"]',
+      'forwarded ref evidence not rendered',
+    );
+    const consumerTargetEvidence = requireElement<NodeEvidenceOutput>(
+      canvasElement,
+      '[data-testid="consumer-target-evidence"]',
+      'consumer target evidence not rendered',
+    );
+    const consumerCurrentTargetEvidence = requireElement<NodeEvidenceOutput>(
+      canvasElement,
+      '[data-testid="consumer-current-target-evidence"]',
+      'consumer current target evidence not rendered',
+    );
+
+    void expect(firstLayoutEvidence).toHaveTextContent('null');
+    void expect(firstLayoutEvidence).toHaveAttribute('hidden');
+    await waitFor(() => void expect(forwardedRefEvidence.observedNode).toBe(button));
+
+    const clickTarget = requireElement<HTMLDivElement>(
+      button,
+      'div',
+      'auth button label click target not rendered',
+    );
+    let outsideTarget: EventTarget | null = null;
+    let outsidePath: EventTarget[] = [];
+    observer.addEventListener(
+      'click',
+      (event) => {
+        outsideTarget = event.target;
+        outsidePath = event.composedPath();
+      },
+      { once: true },
+    );
+
+    await userEvent.click(clickTarget);
+
+    void expect(outsideTarget).toBe(host);
+    void expect(outsidePath[0]).toBe(clickTarget);
+    void expect(outsidePath).toContain(button);
+    void expect(outsidePath).toContain(host);
+    void expect(consumerTargetEvidence.observedNode).toBe(clickTarget);
+    void expect(consumerCurrentTargetEvidence.observedNode).toBe(button);
+  },
+};
+
+function NestedRootsHarness(): React.ReactNode {
+  return (
+    <CompatibilityScenario
+      classification="Supported for the validated basics"
+      expectedResult="The button renders and its composed click crosses both roots. DOM selector APIs must traverse the outer root and then the inner root. Overlay behavior is not part of this evidence."
+      summary="This example places an automatically isolated button inside a second SDK shadow root."
+      title="Nested shadow roots"
+    >
+      <ShadowRootHost>
+        <div data-testid="outer-shadow-observer">
+          <YouVersionAuthButton data-testid="nested-auth-button" mode="signOut" />
+        </div>
+      </ShadowRootHost>
+    </CompatibilityScenario>
+  );
+}
+
+export const NestedRootsRequireTraversalAndRetargetAtEveryBoundary: Story = {
+  name: 'Nested roots require traversal and retargeting at every boundary',
+  render: () => <NestedRootsHarness />,
+  play: async ({ canvasElement }) => {
+    const outerHost = await requireShadowHost(canvasElement);
+    const outerRoot = outerHost.shadowRoot!;
+    const outerObserver = await waitForElement<HTMLElement>(
+      outerRoot,
+      '[data-testid="outer-shadow-observer"]',
+      'outer shadow observer not rendered',
+    );
+    const innerHost = await requireShadowHost(outerObserver);
+    const innerRoot = innerHost.shadowRoot!;
+    const button = await waitForElement<HTMLButtonElement>(
+      innerRoot,
+      '[data-testid="nested-auth-button"]',
+      'nested auth button not rendered',
+    );
+
+    void expect(canvasElement.querySelector('[data-testid="nested-auth-button"]')).toBeNull();
+    void expect(outerRoot.querySelector('[data-testid="nested-auth-button"]')).toBeNull();
+    void expect(innerRoot.querySelector('[data-testid="nested-auth-button"]')).toBe(button);
+
+    let outerScopeTarget: EventTarget | null = null;
+    let documentScopeTarget: EventTarget | null = null;
+    let composedPath: EventTarget[] = [];
+    outerObserver.addEventListener(
+      'click',
+      (event) => {
+        outerScopeTarget = event.target;
+        composedPath = event.composedPath();
+      },
+      { once: true },
+    );
+    canvasElement.addEventListener(
+      'click',
+      (event) => {
+        documentScopeTarget = event.target;
+      },
+      { once: true },
+    );
+
+    await userEvent.click(button);
+
+    void expect(outerScopeTarget).toBe(innerHost);
+    void expect(documentScopeTarget).toBe(outerHost);
+    void expect(composedPath[0]).toBe(button);
+    void expect(composedPath).toContain(innerHost);
+    void expect(composedPath).toContain(outerHost);
+  },
+};
diff --git a/packages/ui/src/components/shadow-overlay-production-seam.shadow-isolation.stories.tsx b/packages/ui/src/components/shadow-overlay-production-seam.shadow-isolation.stories.tsx
new file mode 100644
index 00000000..446a955b
--- /dev/null
+++ b/packages/ui/src/components/shadow-overlay-production-seam.shadow-isolation.stories.tsx
@@ -0,0 +1,776 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { http, HttpResponse } from 'msw';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { expect, userEvent, waitFor } from 'storybook/test';
+import { ShadowRootHost } from '../lib/shadow-root-host';
+import { requireShadowRoot } from '../test/dom-stubs';
+import { HighlightPermissionDialog } from './highlight-permission-dialog';
+import { Dialog, DialogContent, DialogTitle } from './ui/dialog';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+import { VerseActionPopover } from './verse-action-popover';
+
+interface IsolatedProductionOverlaySeamProps {
+  enableRapidReopen?: boolean;
+  manualInstructions?: string;
+}
+
+function IsolatedProductionOverlaySeam({
+  enableRapidReopen = false,
+  manualInstructions,
+}: IsolatedProductionOverlaySeamProps): React.ReactNode {
+  const [primaryMounted, setPrimaryMounted] = useState(true);
+  const [verseOpen, setVerseOpen] = useState(false);
+  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
+  const [permissionOpen, setPermissionOpen] = useState(false);
+  const [notesOpen, setNotesOpen] = useState(false);
+  const [independentOpen, setIndependentOpen] = useState(false);
+  const [secondaryOpen, setSecondaryOpen] = useState(false);
+  const [noteActionCount, setNoteActionCount] = useState(0);
+  const [closeAllRequests, setCloseAllRequests] = useState(0);
+  const [unmountRequests, setUnmountRequests] = useState(0);
+  const rapidTimers = useRef<number[]>([]);
+
+  const clearRapidTimers = useCallback((): void => {
+    for (const timer of rapidTimers.current) window.clearTimeout(timer);
+    rapidTimers.current = [];
+  }, []);
+
+  useEffect(() => clearRapidTimers, [clearRapidTimers]);
+
+  const closeAllOverlays = (): void => {
+    clearRapidTimers();
+    setCloseAllRequests((count) => count + 1);
+    setVerseOpen(false);
+    setPermissionOpen(false);
+    setNotesOpen(false);
+    setIndependentOpen(false);
+    setSecondaryOpen(false);
+  };
+
+  const runRapidCloseReopen = (): void => {
+    clearRapidTimers();
+    setPermissionOpen(true);
+    rapidTimers.current.push(
+      window.setTimeout(() => {
+        setPermissionOpen(false);
+        rapidTimers.current.push(window.setTimeout(() => setPermissionOpen(true), 75));
+      }, 300),
+    );
+  };
+
+  return (
+    <div style={{ display: 'grid', gap: 24 }}>
+      {manualInstructions ? (
+        <p data-testid="manual-instructions" style={{ maxWidth: 560, margin: 0 }}>
+          <strong>Manual workflow:</strong> {manualInstructions}
+        </p>
+      ) : null}
+      <button
+        type="button"
+        data-testid="unmount-primary"
+        onClick={() => {
+          setUnmountRequests((count) => count + 1);
+          setPrimaryMounted(false);
+        }}
+      >
+        Unmount primary island
+      </button>
+      <output data-testid="unmount-requests" data-count={unmountRequests} />
+      <output data-testid="note-action-count" data-count={noteActionCount} />
+      <button type="button" data-testid="close-all-overlays" onClick={closeAllOverlays}>
+        Close all overlays
+      </button>
+      <output data-testid="close-all-requests" data-count={closeAllRequests} />
+
+      {primaryMounted ? (
+        <div data-testid="primary-island">
+          <ShadowRootHost portalStrategy="local-top-layer">
+            <button type="button" data-testid="prior-control">
+              Prior control
+            </button>
+            {enableRapidReopen ? (
+              <button
+                type="button"
+                data-testid="run-rapid-close-reopen"
+                onClick={runRapidCloseReopen}
+              >
+                Run rapid close/reopen
+              </button>
+            ) : null}
+            <span
+              ref={(element) => {
+                element?.setAttribute('v', '1');
+              }}
+              className="yv-v"
+              data-testid="verse-1"
+              onClick={(event) => {
+                setAnchorElement(event.currentTarget);
+                setVerseOpen(true);
+              }}
+            >
+              First verse
+            </span>
+            <button
+              type="button"
+              data-testid="open-permission-dialog"
+              onClick={() => setPermissionOpen(true)}
+            >
+              Open permission dialog
+            </button>
+            <button
+              type="button"
+              data-testid="open-notes-dialog"
+              onClick={() => setNotesOpen(true)}
+            >
+              Open notes dialog
+            </button>
+            <Popover open={independentOpen} onOpenChange={setIndependentOpen}>
+              <PopoverTrigger data-testid="independent-popover-trigger">
+                Independent overlay
+              </PopoverTrigger>
+              <PopoverContent
+                data-testid="independent-popover"
+                showHeader
+                heading="Independent overlay"
+              >
+                Independent panel
+              </PopoverContent>
+            </Popover>
+            <VerseActionPopover
+              open={verseOpen}
+              onOpenChange={setVerseOpen}
+              activeHighlights={new Set()}
+              selectedVerses={verseOpen ? [1] : []}
+              highlightedVerses={{}}
+              anchorElement={anchorElement}
+              onHighlight={() => setPermissionOpen(true)}
+              onClearHighlight={() => undefined}
+              onCopy={() => setVerseOpen(false)}
+              onShare={() => setVerseOpen(false)}
+            />
+            <HighlightPermissionDialog
+              open={permissionOpen}
+              onOpenChange={setPermissionOpen}
+              onConfirm={() => setPermissionOpen(false)}
+              onCancel={() => setPermissionOpen(false)}
+            />
+            <Dialog open={notesOpen} onOpenChange={setNotesOpen}>
+              <DialogContent data-testid="notes-dialog" aria-describedby={undefined}>
+                <DialogTitle>Notes</DialogTitle>
+                <Popover>
+                  <PopoverTrigger data-testid="notes-popover-trigger">Open note</PopoverTrigger>
+                  <PopoverContent data-testid="notes-popover" showHeader heading="Note">
+                    <button
+                      type="button"
+                      data-testid="notes-popover-action"
+                      onClick={() => setNoteActionCount((count) => count + 1)}
+                    >
+                      Keep note
+                    </button>
+                  </PopoverContent>
+                </Popover>
+              </DialogContent>
+            </Dialog>
+          </ShadowRootHost>
+        </div>
+      ) : null}
+
+      <div data-testid="secondary-island">
+        <ShadowRootHost portalStrategy="local-top-layer">
+          <Popover open={secondaryOpen} onOpenChange={setSecondaryOpen}>
+            <PopoverTrigger data-testid="secondary-popover-trigger">Second island</PopoverTrigger>
+            <PopoverContent data-testid="secondary-popover" showHeader heading="Second island">
+              Second island panel
+            </PopoverContent>
+          </Popover>
+        </ShadowRootHost>
+      </div>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Spikes/Nested concurrent overlays production seam',
+  component: IsolatedProductionOverlaySeam,
+  tags: ['integration'],
+  parameters: {
+    layout: 'centered',
+    includeAuth: false,
+    msw: {
+      handlers: [
+        http.get('*/v1/fonts/1/stylesheet', () =>
+          HttpResponse.text('', { headers: { 'Content-Type': 'text/css' } }),
+        ),
+      ],
+    },
+  },
+} satisfies Meta<typeof IsolatedProductionOverlaySeam>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+async function waitForElement<ElementType extends Element>(
+  container: ParentNode,
+  selector: string,
+  message: string,
+): Promise<ElementType> {
+  return waitFor(
+    () => {
+      const element = container.querySelector<ElementType>(selector);
+      if (!element) throw new Error(message);
+      return element;
+    },
+    { timeout: 5_000 },
+  );
+}
+
+function getPermissionDialog(topLayer: HTMLElement): HTMLElement | null {
+  return topLayer.querySelector<HTMLElement>(
+    '[role="dialog"]:not([data-slot="verse-action-popover"]):not([data-testid="notes-dialog"])',
+  );
+}
+
+function expectOverlayAboveAtOverlap(
+  root: ShadowRoot,
+  expectedTop: HTMLElement,
+  underneath: HTMLElement,
+): void {
+  const topRect = expectedTop.getBoundingClientRect();
+  const underneathRect = underneath.getBoundingClientRect();
+  const overlapLeft = Math.max(topRect.left, underneathRect.left);
+  const overlapRight = Math.min(topRect.right, underneathRect.right);
+  const overlapTop = Math.max(topRect.top, underneathRect.top);
+  const overlapBottom = Math.min(topRect.bottom, underneathRect.bottom);
+
+  void expect(overlapRight).toBeGreaterThan(overlapLeft);
+  void expect(overlapBottom).toBeGreaterThan(overlapTop);
+
+  const hit = root.elementFromPoint(
+    overlapLeft + (overlapRight - overlapLeft) / 2,
+    overlapTop + (overlapBottom - overlapTop) / 2,
+  );
+  void expect(hit === expectedTop || (hit !== null && expectedTop.contains(hit))).toBe(true);
+}
+
+function placeOverlayCenterUnderneath(
+  underneath: HTMLElement,
+  expectedTop: HTMLElement,
+): () => void {
+  const positionedElement = underneath.parentElement?.hasAttribute(
+    'data-radix-popper-content-wrapper',
+  )
+    ? underneath.parentElement
+    : underneath;
+  const originalStyle = positionedElement.getAttribute('style');
+  const expectedTopRect = expectedTop.getBoundingClientRect();
+  positionedElement.style.setProperty('position', 'fixed', 'important');
+  positionedElement.style.setProperty('inset', 'auto', 'important');
+  positionedElement.style.setProperty(
+    'left',
+    `${expectedTopRect.left + expectedTopRect.width / 2}px`,
+    'important',
+  );
+  positionedElement.style.setProperty(
+    'top',
+    `${expectedTopRect.top + expectedTopRect.height / 2}px`,
+    'important',
+  );
+  positionedElement.style.setProperty('margin', '0', 'important');
+  positionedElement.style.setProperty('translate', 'none', 'important');
+  positionedElement.style.setProperty('transform', 'translate(-50%, -50%)', 'important');
+
+  return () => {
+    if (originalStyle === null) {
+      positionedElement.removeAttribute('style');
+    } else {
+      positionedElement.setAttribute('style', originalStyle);
+    }
+  };
+}
+
+function installUnequalExitDurations(
+  root: ShadowRoot,
+  durations: { dialog: number; overlay: number; popover: number },
+): HTMLStyleElement {
+  const style = root.ownerDocument.createElement('style');
+  style.textContent = `
+    [role='dialog'][data-state='closed'] { animation-duration: ${durations.dialog}ms !important; }
+    [data-slot='dialog-overlay'][data-state='closed'] { animation-duration: ${durations.overlay}ms !important; }
+    [data-slot='verse-action-popover'][data-state='closed'] { animation-duration: ${durations.popover}ms !important; }
+    [data-slot='popover-content'][data-state='closed'] { animation-duration: ${durations.popover}ms !important; }
+  `;
+  root.append(style);
+  return style;
+}
+
+interface PrimaryHarness {
+  contentWrapper: HTMLElement;
+  primaryIsland: HTMLElement;
+  root: ShadowRoot;
+}
+
+async function getPrimaryHarness(canvasElement: HTMLElement): Promise<PrimaryHarness> {
+  const primaryIsland = await waitForElement<HTMLElement>(
+    canvasElement,
+    '[data-testid="primary-island"]',
+    'primary island not rendered',
+  );
+  const root = await waitFor(() => requireShadowRoot(primaryIsland));
+  const contentWrapper = root.querySelector<HTMLElement>('[data-yv-shadow-content-wrapper]');
+  if (!contentWrapper) throw new Error('shadow content wrapper not rendered');
+  void expect(root.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
+  return { contentWrapper, primaryIsland, root };
+}
+
+async function openVerseActionPopover(
+  root: ShadowRoot,
+  verse: HTMLElement,
+): Promise<{ topLayer: HTMLElement; versePopover: HTMLElement }> {
+  await userEvent.click(verse);
+  const topLayer = await waitForElement<HTMLElement>(
+    root,
+    '[data-yv-shadow-local-overlay]',
+    'shadow-local top layer not created',
+  );
+  const versePopover = await waitForElement<HTMLElement>(
+    topLayer,
+    '[data-slot="verse-action-popover"]',
+    'verse action popover not rendered',
+  );
+  await waitFor(() => void expect(topLayer.matches(':popover-open')).toBe(true));
+  return { topLayer, versePopover };
+}
+
+async function openPermissionDialogFromVerseAction(
+  topLayer: HTMLElement,
+  versePopover: HTMLElement,
+): Promise<HTMLElement> {
+  const swatch = versePopover.querySelector<HTMLButtonElement>('[role="group"] button');
+  if (!swatch) throw new Error('highlight swatch not rendered');
+  await userEvent.click(swatch);
+  return waitFor(() => {
+    const dialog = getPermissionDialog(topLayer);
+    if (!dialog) throw new Error('highlight permission dialog not rendered');
+    return dialog;
+  });
+}
+
+function manualWorkflow(
+  name: string,
+  manualInstructions: string,
+  args: Partial<IsolatedProductionOverlaySeamProps> = {},
+): Story {
+  return {
+    name,
+    tags: ['!test'],
+    args: { ...args, manualInstructions },
+  };
+}
+
+export const PopoverOpensDialog = manualWorkflow(
+  'Popover opens dialog — manual workflow',
+  'Focus Prior control, click First verse, choose a highlight color, then press Escape twice. Focus returns inside the popover after the first Escape; after the second, confirm it does not return to Prior control.',
+);
+export const DialogContainsPopover = manualWorkflow(
+  'Dialog contains popover — manual workflow',
+  'Click Open notes dialog, open its Note popover, then press Escape twice to verify one-level-at-a-time dismissal and focus restoration.',
+);
+export const TwoIndependentOverlays = manualWorkflow(
+  'Two independent overlays — manual workflow',
+  'Open one peer, then another in the same or separate component root to observe outside-interaction dismissal; unmount the primary island and confirm the secondary root can reopen.',
+);
+export const RapidCloseReopenDuringExit = manualWorkflow(
+  'Rapid close/reopen during exit — manual workflow',
+  'Focus Run rapid close/reopen and press Enter once. The dialog opens, closes, and reopens during retained exit presence. Press Escape after it reopens; confirm the page unlocks but focus does not return to the Run button.',
+  { enableRapidReopen: true },
+);
+
+/** YPE-5355 stable regression evidence; unsupported observations remain in the decision docs. */
+export const PopoverOpensDialogEvidence: Story = {
+  tags: ['!dev'],
+  play: async ({ canvasElement, step }) => {
+    const { contentWrapper, root } = await getPrimaryHarness(canvasElement);
+    const priorControl = await waitForElement<HTMLButtonElement>(
+      root,
+      '[data-testid="prior-control"]',
+      'prior focus control not rendered',
+    );
+    const verse = await waitForElement<HTMLElement>(
+      root,
+      '[data-testid="verse-1"]',
+      'verse not rendered',
+    );
+    const closeAllOverlays = await waitForElement<HTMLButtonElement>(
+      canvasElement,
+      '[data-testid="close-all-overlays"]',
+      'close-all control not rendered',
+    );
+    const closeAllRequests = await waitForElement<HTMLOutputElement>(
+      canvasElement,
+      '[data-testid="close-all-requests"]',
+      'close-all request count not rendered',
+    );
+    const exitAnimationStyles: HTMLStyleElement[] = [];
+    let topLayer!: HTMLElement;
+    let versePopover!: HTMLElement;
+
+    try {
+      await step('Open the highlights permission dialog', async () => {
+        priorControl.focus();
+        const opened = await openVerseActionPopover(root, verse);
+        topLayer = opened.topLayer;
+        versePopover = opened.versePopover;
+        const permissionDialog = await openPermissionDialogFromVerseAction(
+          opened.topLayer,
+          opened.versePopover,
+        );
+        void expect(opened.versePopover.getRootNode()).toBe(root);
+        void expect(permissionDialog.getRootNode()).toBe(root);
+        const restorePosition = placeOverlayCenterUnderneath(opened.versePopover, permissionDialog);
+        try {
+          expectOverlayAboveAtOverlap(root, permissionDialog, opened.versePopover);
+        } finally {
+          restorePosition();
+        }
+        await waitFor(() => {
+          const focused = root.activeElement;
+          void expect(focused !== null && permissionDialog.contains(focused)).toBe(true);
+        });
+        void expect(contentWrapper.inert).toBe(true);
+        void expect(opened.versePopover).toHaveAttribute('data-state', 'open');
+      });
+
+      await step('Escape dismisses one nested overlay at a time', async () => {
+        await userEvent.keyboard('{Escape}');
+        await waitFor(() => {
+          void expect(getPermissionDialog(topLayer)).toBeNull();
+          void expect(topLayer.querySelector('[data-slot="verse-action-popover"]')).not.toBeNull();
+          void expect(contentWrapper.inert).toBe(false);
+          const focused = root.activeElement;
+          void expect(focused !== null && versePopover.contains(focused)).toBe(true);
+        });
+        await userEvent.keyboard('{Escape}');
+        await waitFor(() => {
+          void expect(topLayer.querySelector('[data-slot="verse-action-popover"]')).toBeNull();
+          void expect(topLayer.matches(':popover-open')).toBe(false);
+          const focused = root.activeElement;
+          void expect(focused === null || !topLayer.contains(focused)).toBe(true);
+        });
+      });
+
+      await step('Keep modal ownership when the popover exits first', async () => {
+        exitAnimationStyles.push(
+          installUnequalExitDurations(root, {
+            dialog: 400,
+            overlay: 800,
+            popover: 180,
+          }),
+        );
+        const opened = await openVerseActionPopover(root, verse);
+        await openPermissionDialogFromVerseAction(opened.topLayer, opened.versePopover);
+        closeAllOverlays.click();
+        closeAllOverlays.click();
+        await waitFor(
+          () => {
+            void expect(
+              opened.topLayer.querySelector('[data-slot="verse-action-popover"]'),
+            ).toBeNull();
+            void expect(getPermissionDialog(opened.topLayer)).not.toBeNull();
+            void expect(contentWrapper.inert).toBe(true);
+          },
+          { timeout: 2_000 },
+        );
+        await waitFor(
+          () => {
+            void expect(getPermissionDialog(opened.topLayer)).toBeNull();
+            void expect(contentWrapper.inert).toBe(false);
+            void expect(opened.topLayer.matches(':popover-open')).toBe(false);
+          },
+          { timeout: 2_000 },
+        );
+        void expect(closeAllRequests.getAttribute('data-count')).toBe('2');
+      });
+
+      await step('Finish teardown when the dialog exits first', async () => {
+        exitAnimationStyles.at(-1)?.remove();
+        exitAnimationStyles.push(
+          installUnequalExitDurations(root, {
+            dialog: 120,
+            overlay: 160,
+            popover: 800,
+          }),
+        );
+        const opened = await openVerseActionPopover(root, verse);
+        await openPermissionDialogFromVerseAction(opened.topLayer, opened.versePopover);
+        closeAllOverlays.click();
+        await waitFor(
+          () => {
+            void expect(getPermissionDialog(opened.topLayer)).toBeNull();
+            void expect(
+              opened.topLayer.querySelector('[data-slot="verse-action-popover"]'),
+            ).not.toBeNull();
+          },
+          { timeout: 2_000 },
+        );
+        await waitFor(
+          () => {
+            void expect(
+              opened.topLayer.querySelector('[data-slot="verse-action-popover"]'),
+            ).toBeNull();
+            void expect(contentWrapper.inert).toBe(false);
+            void expect(opened.topLayer.matches(':popover-open')).toBe(false);
+          },
+          { timeout: 2_000 },
+        );
+        void expect(closeAllRequests.getAttribute('data-count')).toBe('3');
+      });
+    } finally {
+      for (const style of exitAnimationStyles) style.remove();
+    }
+  },
+};
+
+export const DialogContainsPopoverEvidence: Story = {
+  tags: ['!dev'],
+  play: async ({ canvasElement, step }) => {
+    const { contentWrapper, root } = await getPrimaryHarness(canvasElement);
+    const openNotes = await waitForElement<HTMLButtonElement>(
+      root,
+      '[data-testid="open-notes-dialog"]',
+      'notes opener not rendered',
+    );
+    const noteActionCount = await waitForElement<HTMLOutputElement>(
+      canvasElement,
+      '[data-testid="note-action-count"]',
+      'note action count not rendered',
+    );
+
+    let notesDialog!: HTMLElement;
+    let notesPopover!: HTMLElement;
+    let notesTrigger!: HTMLButtonElement;
+    let topLayer!: HTMLElement;
+    await step('Open a popover inside the dialog', async () => {
+      await userEvent.click(openNotes);
+      topLayer = await waitForElement<HTMLElement>(
+        root,
+        '[data-yv-shadow-local-overlay]',
+        'shadow-local top layer not created',
+      );
+      notesDialog = await waitForElement<HTMLElement>(
+        topLayer,
+        '[data-testid="notes-dialog"]',
+        'notes dialog not rendered',
+      );
+      notesTrigger = await waitForElement<HTMLButtonElement>(
+        notesDialog,
+        '[data-testid="notes-popover-trigger"]',
+        'notes popover trigger not rendered',
+      );
+      await userEvent.click(notesTrigger);
+      notesPopover = await waitForElement<HTMLElement>(
+        topLayer,
+        '[data-testid="notes-popover"]',
+        'notes popover not rendered',
+      );
+      const restorePosition = placeOverlayCenterUnderneath(notesDialog, notesPopover);
+      try {
+        expectOverlayAboveAtOverlap(root, notesPopover, notesDialog);
+      } finally {
+        restorePosition();
+      }
+      const notesAction = await waitForElement<HTMLButtonElement>(
+        notesPopover,
+        '[data-testid="notes-popover-action"]',
+        'notes popover action not rendered',
+      );
+      await userEvent.click(notesAction);
+      await waitFor(() => void expect(noteActionCount.getAttribute('data-count')).toBe('1'));
+      await waitFor(() => {
+        const focused = root.activeElement;
+        void expect(focused !== null && notesPopover.contains(focused)).toBe(true);
+      });
+    });
+
+    await step('Escape closes only the popover and restores its trigger', async () => {
+      await userEvent.keyboard('{Escape}');
+      await waitFor(() => void expect(notesPopover.isConnected).toBe(false));
+      void expect(topLayer).toContainElement(notesDialog);
+      void expect(root.activeElement).toBe(notesTrigger);
+      void expect(contentWrapper.inert).toBe(true);
+    });
+
+    await step('The next Escape closes the dialog and restores its opener', async () => {
+      await userEvent.keyboard('{Escape}');
+      await waitFor(() => void expect(notesDialog.isConnected).toBe(false));
+      await waitFor(() => void expect(contentWrapper.inert).toBe(false));
+      await waitFor(() => void expect(topLayer.matches(':popover-open')).toBe(false));
+      void expect(root.activeElement).toBe(openNotes);
+    });
+  },
+};
+
+/** YPE-5355 stable regression evidence; peer-dismissal observations remain in the docs. */
+export const TwoIndependentOverlaysEvidence: Story = {
+  tags: ['!dev'],
+  play: async ({ canvasElement, step }) => {
+    const { contentWrapper, primaryIsland, root } = await getPrimaryHarness(canvasElement);
+    const verse = await waitForElement<HTMLElement>(
+      root,
+      '[data-testid="verse-1"]',
+      'verse not rendered',
+    );
+    const independentTrigger = await waitForElement<HTMLButtonElement>(
+      root,
+      '[data-testid="independent-popover-trigger"]',
+      'independent popover trigger not rendered',
+    );
+    const closeAllOverlays = await waitForElement<HTMLButtonElement>(
+      canvasElement,
+      '[data-testid="close-all-overlays"]',
+      'close-all control not rendered',
+    );
+
+    await step('Open a second same-root peer and tear down cleanly', async () => {
+      const { topLayer } = await openVerseActionPopover(root, verse);
+      await userEvent.click(independentTrigger);
+      const independentPopover = await waitForElement<HTMLElement>(
+        topLayer,
+        '[data-testid="independent-popover"]',
+        'independent popover not rendered',
+      );
+      await waitFor(() => {
+        const focused = root.activeElement;
+        void expect(focused !== null && independentPopover.contains(focused)).toBe(true);
+      });
+      void expect(contentWrapper.inert).toBe(false);
+      await userEvent.keyboard('{Escape}');
+      await waitFor(() => void expect(independentPopover.isConnected).toBe(false));
+      void expect(root.activeElement).toBe(independentTrigger);
+      closeAllOverlays.click();
+      await waitFor(() => void expect(topLayer.matches(':popover-open')).toBe(false));
+    });
+
+    await step('Keep the secondary root usable through primary teardown', async () => {
+      const secondaryIsland = await waitForElement<HTMLElement>(
+        canvasElement,
+        '[data-testid="secondary-island"]',
+        'secondary island not rendered',
+      );
+      const secondaryRoot = await waitFor(() => requireShadowRoot(secondaryIsland));
+      const secondaryTrigger = await waitForElement<HTMLButtonElement>(
+        secondaryRoot,
+        '[data-testid="secondary-popover-trigger"]',
+        'secondary popover trigger not rendered',
+      );
+      await userEvent.click(secondaryTrigger);
+      const secondaryTopLayer = await waitForElement<HTMLElement>(
+        secondaryRoot,
+        '[data-yv-shadow-local-overlay]',
+        'secondary island top layer not created',
+      );
+      const secondaryPopover = await waitForElement<HTMLElement>(
+        secondaryTopLayer,
+        '[data-testid="secondary-popover"]',
+        'secondary popover not rendered',
+      );
+
+      const opened = await openVerseActionPopover(root, verse);
+      void expect(opened.topLayer).not.toBe(secondaryTopLayer);
+      await openPermissionDialogFromVerseAction(opened.topLayer, opened.versePopover);
+      const unmountPrimary = await waitForElement<HTMLButtonElement>(
+        canvasElement,
+        '[data-testid="unmount-primary"]',
+        'primary island unmount control not rendered',
+      );
+      unmountPrimary.click();
+      await waitFor(() => void expect(primaryIsland.isConnected).toBe(false));
+      closeAllOverlays.click();
+      await waitFor(() => void expect(secondaryPopover.isConnected).toBe(false));
+      await waitFor(() => void expect(secondaryTopLayer.matches(':popover-open')).toBe(false));
+      void expect(secondaryIsland.isConnected).toBe(true);
+
+      await userEvent.click(secondaryTrigger);
+      const reopenedSecondaryPopover = await waitForElement<HTMLElement>(
+        secondaryTopLayer,
+        '[data-testid="secondary-popover"]',
+        'secondary popover did not reopen after primary teardown',
+      );
+      void expect(reopenedSecondaryPopover).toHaveAttribute('data-state', 'open');
+      void expect(secondaryTopLayer.matches(':popover-open')).toBe(true);
+    });
+  },
+};
+
+/** YPE-5355 stable regression evidence; final-focus observations remain in the docs. */
+export const RapidCloseReopenDuringExitEvidence: Story = {
+  tags: ['!dev'],
+  args: { enableRapidReopen: true },
+  play: async ({ canvasElement, step }) => {
+    const { contentWrapper, root } = await getPrimaryHarness(canvasElement);
+    const runRapidCloseReopen = await waitForElement<HTMLButtonElement>(
+      root,
+      '[data-testid="run-rapid-close-reopen"]',
+      'rapid close/reopen control not rendered',
+    );
+    const exitAnimationStyle = installUnequalExitDurations(root, {
+      dialog: 400,
+      overlay: 800,
+      popover: 180,
+    });
+    let firstDialog!: HTMLElement;
+    let topLayer!: HTMLElement;
+
+    try {
+      await step('Start the controlled close/reopen sequence', async () => {
+        await userEvent.click(runRapidCloseReopen);
+        topLayer = await waitForElement<HTMLElement>(
+          root,
+          '[data-yv-shadow-local-overlay]',
+          'shadow-local top layer not created',
+        );
+        firstDialog = await waitFor(() => {
+          const dialog = getPermissionDialog(topLayer);
+          if (!dialog) throw new Error('permission dialog did not open');
+          return dialog;
+        });
+      });
+
+      await step('Retain modal ownership while the dialog starts exiting', async () => {
+        await waitFor(() => void expect(firstDialog).toHaveAttribute('data-state', 'closed'));
+        void expect(firstDialog.isConnected).toBe(true);
+        void expect(topLayer).toContainElement(firstDialog);
+        void expect(contentWrapper.inert).toBe(true);
+      });
+
+      await step('Reopen before the first dialog unmounts', async () => {
+        void expect(firstDialog.isConnected).toBe(true);
+        const reopenedDialog = await waitFor(() => {
+          const dialog = getPermissionDialog(topLayer);
+          if (!dialog || dialog.getAttribute('data-state') === 'closed') {
+            throw new Error('permission dialog did not reopen during exit');
+          }
+          return dialog;
+        });
+        await waitFor(() => {
+          const focused = root.activeElement;
+          void expect(focused !== null && reopenedDialog.contains(focused)).toBe(true);
+          void expect(contentWrapper.inert).toBe(true);
+          void expect(topLayer.matches(':popover-open')).toBe(true);
+        });
+      });
+
+      await step('Release modal ownership after the final close', async () => {
+        await userEvent.keyboard('{Escape}');
+        await waitFor(() => {
+          void expect(getPermissionDialog(topLayer)).toBeNull();
+          void expect(contentWrapper.inert).toBe(false);
+          void expect(topLayer.matches(':popover-open')).toBe(false);
+          const focused = root.activeElement;
+          void expect(focused === null || !topLayer.contains(focused)).toBe(true);
+        });
+      });
+    } finally {
+      exitAnimationStyle.remove();
+    }
+  },
+};
diff --git a/packages/ui/src/components/sign-in-dialog.shadow-isolation.stories.tsx b/packages/ui/src/components/sign-in-dialog.shadow-isolation.stories.tsx
new file mode 100644
index 00000000..2a3353ba
--- /dev/null
+++ b/packages/ui/src/components/sign-in-dialog.shadow-isolation.stories.tsx
@@ -0,0 +1,306 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { http, HttpResponse } from 'msw';
+import { useState } from 'react';
+import { expect, userEvent, waitFor } from 'storybook/test';
+import { ShadowRootHost } from '../lib/shadow-root-host';
+import { requireShadowRoot } from '../test/dom-stubs';
+import { SignInDialog } from './sign-in-dialog';
+
+function SignInDialogHarness(): React.ReactNode {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
+      <button type="button" data-testid="outside-control" onClick={() => setOpen(true)}>
+        Open dialog
+      </button>
+      <div
+        data-testid="clipping-container"
+        style={{ inlineSize: 180, blockSize: 56, overflow: 'hidden', transform: 'translateZ(0)' }}
+      >
+        <ShadowRootHost portalStrategy="local-top-layer">
+          <button type="button" data-testid="inside-control" onClick={() => setOpen(true)}>
+            Inside-island control
+          </button>
+          <SignInDialog
+            open={open}
+            onOpenChange={setOpen}
+            appName="Example Bible App"
+            onConfirm={() => setOpen(false)}
+            onDecline={() => setOpen(false)}
+          />
+        </ShadowRootHost>
+      </div>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Spikes/SignInDialog Shadow DOM isolation',
+  component: SignInDialogHarness,
+  tags: ['integration'],
+  parameters: {
+    layout: 'centered',
+    msw: {
+      handlers: [
+        http.get('*/v1/fonts/1/stylesheet', () =>
+          HttpResponse.text('', { headers: { 'Content-Type': 'text/css' } }),
+        ),
+      ],
+    },
+  },
+} satisfies Meta<typeof SignInDialogHarness>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function styleSnapshot(element: HTMLElement) {
+  const styles = getComputedStyle(element);
+  return {
+    backgroundColor: styles.backgroundColor,
+    borderRadius: styles.borderRadius,
+    color: styles.color,
+    fontFamily: styles.fontFamily,
+    padding: styles.padding,
+    position: styles.position,
+  };
+}
+
+async function expectOutsideFocusRedirectedInto(
+  root: ShadowRoot,
+  outsideControl: HTMLElement,
+  dialog: HTMLElement,
+): Promise<void> {
+  outsideControl.focus();
+  await waitFor(() => {
+    const focused = root.activeElement;
+    void expect(focused !== null && dialog.contains(focused)).toBe(true);
+  });
+  void expect(outsideControl.ownerDocument.activeElement).not.toBe(outsideControl);
+}
+
+export const IsolatesFocusInertnessBackdropAndRestoration: Story = {
+  play: async ({ canvasElement }) => {
+    const { outsideControl, clippingContainer } = await waitFor(() => {
+      const outside = canvasElement.querySelector<HTMLButtonElement>(
+        '[data-testid="outside-control"]',
+      );
+      const clipping = canvasElement.querySelector<HTMLElement>(
+        '[data-testid="clipping-container"]',
+      );
+      if (!outside || !clipping) throw new Error('dialog harness not rendered');
+      return { outsideControl: outside, clippingContainer: clipping };
+    });
+
+    const root = await waitFor(() => requireShadowRoot(canvasElement));
+    const exitAnimationStyle = canvasElement.ownerDocument.createElement('style');
+    exitAnimationStyle.textContent = `
+      [role='dialog'][data-state='closed'] { animation-duration: 400ms !important; }
+      [data-slot='dialog-overlay'][data-state='closed'] { animation-duration: 800ms !important; }
+    `;
+    root.append(exitAnimationStyle);
+    const insideControl = root.querySelector<HTMLButtonElement>('[data-testid="inside-control"]');
+    if (!insideControl) throw new Error('inside-island control not rendered');
+    void expect(root.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
+    insideControl.focus();
+    await userEvent.click(insideControl);
+    const dialog = await waitFor(() => {
+      const element = root.querySelector<HTMLElement>('[role="dialog"]');
+      if (!element) throw new Error('sign-in dialog not rendered in the component shadow root');
+      return element;
+    });
+    const topLayer = root.querySelector<HTMLElement>('[data-yv-shadow-local-overlay]');
+    const contentWrapper = root.querySelector<HTMLElement>('[data-yv-shadow-content-wrapper]');
+    if (!topLayer || !contentWrapper) throw new Error('shadow modal coordination not rendered');
+
+    void expect(dialog.getRootNode()).toBe(root);
+    void expect(topLayer.getRootNode()).toBe(root);
+    void expect(canvasElement.ownerDocument.body.querySelector('[role="dialog"]')).toBeNull();
+    await waitFor(() => void expect(topLayer.matches(':popover-open')).toBe(true));
+
+    const titleId = dialog.getAttribute('aria-labelledby');
+    const descriptionId = dialog.getAttribute('aria-describedby');
+    void expect(titleId).toBeTruthy();
+    void expect(descriptionId).toBeTruthy();
+    const title = root.getElementById(titleId!);
+    const description = root.getElementById(descriptionId!);
+    void expect(title).not.toBeNull();
+    void expect(description).not.toBeNull();
+    // SAFETY: This Chromium-only story checks that both reflected properties exist before use.
+    const reflectedDialog = dialog as HTMLElement & {
+      ariaLabelledByElements?: readonly Element[];
+      ariaDescribedByElements?: readonly Element[];
+    };
+    if (!reflectedDialog.ariaLabelledByElements || !reflectedDialog.ariaDescribedByElements) {
+      throw new Error('Chromium did not expose the dialog ARIA element relationships');
+    }
+    void expect(reflectedDialog.ariaLabelledByElements).toEqual([title]);
+    void expect(reflectedDialog.ariaDescribedByElements).toEqual([description]);
+
+    await waitFor(() => {
+      const focused = root.activeElement;
+      void expect(focused !== null && dialog.contains(focused)).toBe(true);
+    });
+
+    const hiddenWrapper = canvasElement.ownerDocument.createElement('div');
+    hiddenWrapper.style.display = 'none';
+    const hiddenButton = canvasElement.ownerDocument.createElement('button');
+    hiddenButton.textContent = 'Hidden decoy';
+    hiddenWrapper.append(hiddenButton);
+    dialog.append(hiddenWrapper);
+
+    const dialogButtons = Array.from(
+      dialog.querySelectorAll<HTMLButtonElement>('button[data-slot="button"]'),
+    );
+    void expect(dialogButtons).toHaveLength(2);
+    const [confirmButton, declineButton] = dialogButtons;
+    if (!confirmButton || !declineButton) throw new Error('sign-in dialog actions not rendered');
+
+    const negativeTabIndexButton = canvasElement.ownerDocument.createElement('button');
+    negativeTabIndexButton.tabIndex = -2;
+    negativeTabIndexButton.textContent = 'Programmatic-only control';
+    const firstRadio = canvasElement.ownerDocument.createElement('input');
+    firstRadio.type = 'radio';
+    firstRadio.name = 'shadow-dialog-story-choice';
+    firstRadio.checked = true;
+    firstRadio.setAttribute('aria-label', 'First choice');
+    const secondRadio = canvasElement.ownerDocument.createElement('input');
+    secondRadio.type = 'radio';
+    secondRadio.name = 'shadow-dialog-story-choice';
+    secondRadio.setAttribute('aria-label', 'Second choice');
+    confirmButton.after(negativeTabIndexButton, firstRadio, secondRadio);
+
+    confirmButton.focus();
+    await userEvent.tab();
+    void expect(root.activeElement).toBe(firstRadio);
+    await userEvent.tab();
+    void expect(root.activeElement).toBe(declineButton);
+    await userEvent.tab();
+    await waitFor(() => void expect(root.activeElement).toBe(confirmButton));
+    await userEvent.tab({ shift: true });
+    await waitFor(() => void expect(root.activeElement).toBe(declineButton));
+    void expect(root.activeElement).not.toBe(negativeTabIndexButton);
+    void expect(root.activeElement).not.toBe(secondRadio);
+
+    void expect(getComputedStyle(outsideControl).pointerEvents).toBe('none');
+
+    await expectOutsideFocusRedirectedInto(root, outsideControl, dialog);
+
+    void expect(insideControl.closest('[inert]')).not.toBeNull();
+
+    insideControl.focus();
+    void expect(root.activeElement).not.toBe(insideControl);
+
+    const overlay = dialog.previousElementSibling;
+    if (!(overlay instanceof HTMLElement)) throw new Error('dialog overlay not rendered');
+    const overlayRect = overlay.getBoundingClientRect();
+    const dialogRect = dialog.getBoundingClientRect();
+    const clippingRect = clippingContainer.getBoundingClientRect();
+    const viewport = canvasElement.ownerDocument.defaultView;
+    if (!viewport) throw new Error('story window not available');
+    void expect(overlayRect.width).toBeGreaterThanOrEqual(viewport.innerWidth - 1);
+    void expect(overlayRect.height).toBeGreaterThanOrEqual(viewport.innerHeight - 1);
+    const sampleX =
+      clippingRect.right + 4 < viewport.innerWidth ? clippingRect.right + 4 : clippingRect.left - 4;
+    const sampleY = Math.min(viewport.innerHeight - 4, Math.max(4, clippingRect.top + 4));
+    const escapedHit = root.elementFromPoint(sampleX, sampleY);
+    void expect(
+      escapedHit === overlay || (escapedHit !== null && overlay.contains(escapedHit)),
+    ).toBe(true);
+    void expect(dialogRect.bottom).toBeGreaterThan(clippingRect.bottom + 1);
+    const dialogSampleX = dialogRect.left + dialogRect.width / 2;
+    const dialogSampleY = Math.max(dialogRect.top + 2, clippingRect.bottom + 2);
+    if (dialogSampleY >= dialogRect.bottom) {
+      throw new Error('dialog did not extend beyond its clipping ancestor');
+    }
+    const dialogHit = root.elementFromPoint(dialogSampleX, dialogSampleY);
+    void expect(dialogHit === dialog || (dialogHit !== null && dialog.contains(dialogHit))).toBe(
+      true,
+    );
+
+    const dialogStyles = styleSnapshot(dialog);
+    const overlayStyles = styleSnapshot(overlay);
+    const hostileStyle = canvasElement.ownerDocument.createElement('style');
+    hostileStyle.textContent = `
+      button, [role='dialog'], [data-state='open'] {
+        background: rgb(185, 28, 28) !important;
+        border: 10px dashed lime !important;
+        border-radius: 0 !important;
+        color: yellow !important;
+        font: 32px/1 fantasy !important;
+        padding: 40px !important;
+        position: static !important;
+      }
+    `;
+    try {
+      canvasElement.ownerDocument.head.append(hostileStyle);
+      await waitFor(
+        () =>
+          void expect(getComputedStyle(outsideControl).backgroundColor).toBe('rgb(185, 28, 28)'),
+      );
+      void expect(styleSnapshot(dialog)).toEqual(dialogStyles);
+      void expect(styleSnapshot(overlay)).toEqual(overlayStyles);
+    } finally {
+      hostileStyle.remove();
+    }
+
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => {
+      void expect(dialog).toHaveAttribute('data-state', 'closed');
+      void expect(topLayer).toContainElement(dialog);
+      void expect(contentWrapper.inert).toBe(true);
+      void expect(getComputedStyle(outsideControl).pointerEvents).toBe('none');
+      void expect(topLayer.matches(':popover-open')).toBe(true);
+    });
+    await expectOutsideFocusRedirectedInto(root, outsideControl, dialog);
+    await waitFor(() => {
+      void expect(topLayer.querySelector('[role="dialog"]')).toBeNull();
+      void expect(topLayer.querySelector('[data-slot="dialog-overlay"]')).not.toBeNull();
+      void expect(contentWrapper.inert).toBe(true);
+      void expect(root.activeElement).toBe(overlay);
+    });
+    await waitFor(() => {
+      void expect(topLayer.childElementCount).toBe(0);
+      void expect(topLayer.matches(':popover-open')).toBe(false);
+      void expect(contentWrapper.inert).toBe(false);
+      void expect(root.activeElement).toBe(insideControl);
+    });
+
+    await userEvent.click(outsideControl);
+    const reopenedDialog = await waitFor(() => {
+      const element = root.querySelector<HTMLElement>('[role="dialog"]');
+      if (!element) throw new Error('dialog did not reopen');
+      return element;
+    });
+    const reopenedOverlay = reopenedDialog.previousElementSibling;
+    if (!(reopenedOverlay instanceof HTMLElement)) {
+      throw new Error('reopened dialog overlay not rendered');
+    }
+    await userEvent.click(reopenedOverlay);
+    await waitFor(() => {
+      void expect(reopenedDialog).toHaveAttribute('data-state', 'closed');
+      void expect(contentWrapper.inert).toBe(true);
+      void expect(getComputedStyle(outsideControl).pointerEvents).toBe('none');
+      void expect(topLayer.matches(':popover-open')).toBe(true);
+    });
+    await expectOutsideFocusRedirectedInto(root, outsideControl, reopenedDialog);
+    await waitFor(() => {
+      void expect(topLayer.querySelector('[role="dialog"]')).toBeNull();
+      void expect(topLayer.querySelector('[data-slot="dialog-overlay"]')).not.toBeNull();
+      void expect(contentWrapper.inert).toBe(true);
+      void expect(root.activeElement).toBe(reopenedOverlay);
+    });
+    outsideControl.focus();
+    await waitFor(() => {
+      void expect(canvasElement.ownerDocument.activeElement).not.toBe(outsideControl);
+      void expect(root.activeElement).toBe(reopenedOverlay);
+    });
+    await waitFor(() => {
+      void expect(topLayer.childElementCount).toBe(0);
+      void expect(topLayer.matches(':popover-open')).toBe(false);
+      void expect(contentWrapper.inert).toBe(false);
+      void expect(canvasElement.ownerDocument.activeElement).toBe(outsideControl);
+    });
+    exitAnimationStyle.remove();
+  },
+};
diff --git a/packages/ui/src/components/ui/dialog.test.tsx b/packages/ui/src/components/ui/dialog.test.tsx
new file mode 100644
index 00000000..a58b0826
--- /dev/null
+++ b/packages/ui/src/components/ui/dialog.test.tsx
@@ -0,0 +1,112 @@
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { ShadowRootHost } from '@/lib/shadow-root-host';
+import { requireShadowRoot } from '@/test/dom-stubs';
+import { Dialog, DialogContent, DialogTitle } from './dialog';
+
+describe('Dialog shadow portal coordination', () => {
+  it('preserves light-DOM state and ref behavior without changing overlay focusability', async () => {
+    const cleanup = vi.fn();
+    const contentRef = vi.fn((node: HTMLDivElement | null): (() => void) | undefined =>
+      node ? cleanup : undefined,
+    );
+    const defaultOpenRender = render(
+      <Dialog defaultOpen>
+        <DialogContent ref={contentRef}>
+          <DialogTitle>Uncontrolled title</DialogTitle>
+          <button type="button">Inside</button>
+        </DialogContent>
+      </Dialog>,
+    );
+    const lightDomDialog = await waitFor(() => {
+      const element = document.body.querySelector('[role="dialog"]');
+      if (!element) throw new Error('light-DOM dialog not rendered');
+      return element;
+    });
+    expect(lightDomDialog.previousElementSibling).not.toHaveAttribute('tabindex');
+    expect(contentRef).toHaveBeenCalledWith(expect.any(HTMLDivElement));
+
+    cleanup.mockClear();
+    defaultOpenRender.unmount();
+    expect(cleanup).toHaveBeenCalledOnce();
+
+    const onOpenChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Dialog open onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogTitle>Controlled title</DialogTitle>
+          <button type="button">Inside</button>
+        </DialogContent>
+      </Dialog>,
+    );
+    await user.keyboard('{Escape}');
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(document.body.querySelector('[role="dialog"]')).not.toBeNull();
+  });
+
+  it('coordinates placement, inertness, and focus containment inside a shadow root', async () => {
+    const { container, rerender } = render(
+      <>
+        <button type="button" data-testid="outside">
+          Outside
+        </button>
+        <ShadowRootHost portalStrategy="local-inline">
+          <button type="button">Background</button>
+          <Dialog open>
+            <DialogContent>
+              <DialogTitle>Title</DialogTitle>
+              <button type="button">Inside</button>
+            </DialogContent>
+          </Dialog>
+        </ShadowRootHost>
+      </>,
+    );
+
+    const shadowRoot = requireShadowRoot(container);
+    const wrapper = shadowRoot.querySelector<HTMLElement>('[data-yv-shadow-content-wrapper]');
+    expect(wrapper).not.toBeNull();
+    const dialog = await waitFor(() => {
+      const element = shadowRoot.querySelector<HTMLElement>('[role="dialog"]');
+      if (!element) throw new Error('shadow dialog not rendered');
+      expect(wrapper?.inert).toBe(true);
+      return element;
+    });
+    expect(document.body.querySelector('[role="dialog"]')).toBeNull();
+    expect(dialog.previousElementSibling).toHaveAttribute('tabindex', '-1');
+
+    const outside = container.querySelector<HTMLButtonElement>('[data-testid="outside"]');
+    expect(outside).not.toBeNull();
+    outside?.focus();
+
+    await waitFor(() => {
+      const focused = shadowRoot.activeElement;
+      expect(focused !== null && dialog.contains(focused)).toBe(true);
+    });
+    expect(document.activeElement).not.toBe(outside);
+
+    rerender(
+      <>
+        <button type="button" data-testid="outside">
+          Outside
+        </button>
+        <ShadowRootHost portalStrategy="local-inline">
+          <button type="button">Background</button>
+          <Dialog open={false}>
+            <DialogContent>
+              <DialogTitle>Title</DialogTitle>
+              <button type="button">Inside</button>
+            </DialogContent>
+          </Dialog>
+        </ShadowRootHost>
+      </>,
+    );
+
+    await waitFor(() => {
+      expect(shadowRoot.querySelector('[role="dialog"]')).toBeNull();
+    });
+    expect(wrapper?.inert).toBe(false);
+  });
+});
diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
index 82c442bf..80e2d5e3 100644
--- a/packages/ui/src/components/ui/dialog.tsx
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -1,9 +1,59 @@
 import * as React from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
-import { cn } from '../../lib/utils';
+import { cn } from '@/lib/utils';
+import { useShadowDialogFocus } from './use-shadow-dialog-focus';
+import { useShadowPortalState } from './use-shadow-portal-state';
+
+interface DialogPortalState {
+  awaitingPortalTarget: boolean;
+  container: HTMLElement | undefined;
+  modal: boolean;
+  open: boolean;
+}
+
+const DialogPortalContext = React.createContext<DialogPortalState>({
+  awaitingPortalTarget: false,
+  container: undefined,
+  modal: true,
+  open: false,
+});
+
+function Dialog({
+  open,
+  defaultOpen,
+  modal = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>): React.ReactNode {
+  const portal = useShadowPortalState({
+    open,
+    defaultOpen,
+    onOpenChange: (value) => props.onOpenChange?.(value),
+  });
+  const portalState = React.useMemo<DialogPortalState>(
+    () => ({
+      awaitingPortalTarget: portal.awaitingPortalTarget,
+      container: portal.container,
+      modal,
+      open: portal.open,
+    }),
+    [modal, portal.awaitingPortalTarget, portal.container, portal.open],
+  );
+
+  return (
+    <DialogPortalContext.Provider value={portalState}>
+      <DialogPrimitive.Root
+        data-slot="dialog"
+        modal={modal}
+        {...props}
+        open={portal.open}
+        onOpenChange={portal.onOpenChange}
+      />
+    </DialogPortalContext.Provider>
+  );
+}
 
-const Dialog = DialogPrimitive.Root;
 const DialogTitle = DialogPrimitive.Title;
 const DialogDescription = DialogPrimitive.Description;
 
@@ -22,11 +72,30 @@ function DialogContent({
   className,
   theme = 'light',
   children,
+  onCloseAutoFocus,
+  ref,
   ...props
-}: DialogContentProps): React.ReactElement {
+}: DialogContentProps): React.ReactNode {
+  const portal = React.useContext(DialogPortalContext);
+  const [overlayNode, setOverlayNode] = React.useState<HTMLDivElement | null>(null);
+  const [contentNode, setContentNode] = React.useState<HTMLDivElement | null>(null);
+  const contentRef = useComposedRefs(ref, setContentNode);
+  const shadowFocus = useShadowDialogFocus({
+    container: portal.container,
+    content: contentNode,
+    modal: portal.modal,
+    open: portal.open,
+    overlay: overlayNode,
+  });
+
+  if (portal.awaitingPortalTarget) return null;
+
   return (
-    <DialogPrimitive.Portal>
+    <DialogPrimitive.Portal container={portal.container}>
       <DialogPrimitive.Overlay
+        ref={setOverlayNode}
+        data-slot="dialog-overlay"
+        tabIndex={portal.container ? -1 : undefined}
         className={cn(
           'yv:fixed yv:inset-0 yv:z-50 yv:bg-black/50',
           'yv:data-[state=open]:animate-in yv:data-[state=closed]:animate-out',
@@ -34,8 +103,13 @@ function DialogContent({
         )}
       />
       <DialogPrimitive.Content
+        ref={contentRef}
         data-yv-sdk
         data-yv-theme={theme}
+        onCloseAutoFocus={(event) => {
+          onCloseAutoFocus?.(event);
+          shadowFocus.onCloseAutoFocus(event);
+        }}
         className={cn(
           'yv:fixed yv:left-1/2 yv:top-1/2 yv:z-50 yv:-translate-x-1/2 yv:-translate-y-1/2',
           'yv:w-[calc(100vw-2rem)] yv:max-w-sm',
diff --git a/packages/ui/src/components/ui/input-group.test.tsx b/packages/ui/src/components/ui/input-group.test.tsx
new file mode 100644
index 00000000..ffaf8bd3
--- /dev/null
+++ b/packages/ui/src/components/ui/input-group.test.tsx
@@ -0,0 +1,18 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { InputGroup, InputGroupAddon } from './input-group';
+
+it('uses --yv-radius for kbd rounding, not --radius', () => {
+  const { container } = render(
+    <InputGroup>
+      <InputGroupAddon />
+    </InputGroup>,
+  );
+  const addon = container.querySelector('[data-slot="input-group-addon"]');
+
+  expect(addon).toHaveClass('yv:[&>kbd]:rounded-[calc(var(--yv-radius)-5px)]');
+  expect(addon).not.toHaveClass('yv:[&>kbd]:rounded-[calc(var(--radius)-5px)]');
+});
diff --git a/packages/ui/src/components/ui/input-group.tsx b/packages/ui/src/components/ui/input-group.tsx
index c584fc18..77847d67 100644
--- a/packages/ui/src/components/ui/input-group.tsx
+++ b/packages/ui/src/components/ui/input-group.tsx
@@ -33,7 +33,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>): React
 }
 
 const inputGroupAddonVariants = cva(
-  'yv:text-muted-foreground yv:flex yv:h-auto yv:cursor-text yv:items-center yv:justify-center yv:gap-2 yv:py-1.5 yv:text-sm yv:font-medium yv:select-none yv:[&>svg:not([class*=size-])]:size-4 yv:[&>kbd]:rounded-[calc(var(--radius)-5px)] yv:group-data-[disabled=true]/input-group:opacity-50',
+  'yv:text-muted-foreground yv:flex yv:h-auto yv:cursor-text yv:items-center yv:justify-center yv:gap-2 yv:py-1.5 yv:text-sm yv:font-medium yv:select-none yv:[&>svg:not([class*=size-])]:size-4 yv:[&>kbd]:rounded-[calc(var(--yv-radius)-5px)] yv:group-data-[disabled=true]/input-group:opacity-50',
   {
     variants: {
       align: {
diff --git a/packages/ui/src/components/ui/popover.test.tsx b/packages/ui/src/components/ui/popover.test.tsx
new file mode 100644
index 00000000..c97fb5c6
--- /dev/null
+++ b/packages/ui/src/components/ui/popover.test.tsx
@@ -0,0 +1,127 @@
+import type { ReactNode } from 'react';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { ShadowRootHost } from '@/lib/shadow-root-host';
+import { requireShadowRoot } from '@/test/dom-stubs';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+function OpenPopover(): ReactNode {
+  return (
+    <Popover open>
+      <PopoverTrigger>Open</PopoverTrigger>
+      <PopoverContent showHeader={false}>Panel</PopoverContent>
+    </Popover>
+  );
+}
+
+describe('Popover portal placement and shadow coordination', () => {
+  it('renders initially open controlled and uncontrolled content in their shadow roots', async () => {
+    const defaultOpenRender = render(
+      <ShadowRootHost portalStrategy="local-inline">
+        <Popover defaultOpen>
+          <PopoverTrigger>Open</PopoverTrigger>
+          <PopoverContent showHeader={false}>Panel</PopoverContent>
+        </Popover>
+      </ShadowRootHost>,
+    );
+
+    const defaultOpenRoot = requireShadowRoot(defaultOpenRender.container);
+
+    await waitFor(() => {
+      expect(defaultOpenRoot.querySelector('[data-slot="popover-content"]')).toHaveTextContent(
+        'Panel',
+      );
+    });
+    expect(document.body.querySelector('[data-slot="popover-content"]')).toBeNull();
+    defaultOpenRender.unmount();
+
+    const controlledOpenRender = render(
+      <ShadowRootHost portalStrategy="local-inline">
+        <OpenPopover />
+      </ShadowRootHost>,
+    );
+
+    const controlledOpenRoot = requireShadowRoot(controlledOpenRender.container);
+    await waitFor(() => {
+      expect(controlledOpenRoot.querySelector('[data-slot="popover-content"]')).toHaveTextContent(
+        'Panel',
+      );
+    });
+    expect(document.body.querySelector('[data-slot="popover-content"]')).toBeNull();
+  });
+
+  it('does not prepare a portal when a controlled owner rejects an open request', async () => {
+    const onOpenChange = vi.fn();
+    const user = userEvent.setup();
+    const { container } = render(
+      <ShadowRootHost portalStrategy="local-inline">
+        <Popover open={false} onOpenChange={onOpenChange}>
+          <PopoverTrigger>Open</PopoverTrigger>
+          <PopoverContent showHeader={false}>Panel</PopoverContent>
+        </Popover>
+      </ShadowRootHost>,
+    );
+
+    const shadowRoot = requireShadowRoot(container);
+    const trigger = shadowRoot.querySelector<HTMLButtonElement>('button');
+    expect(trigger).not.toBeNull();
+
+    await user.click(trigger!);
+
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(shadowRoot.querySelector('[data-yv-shadow-inline-overlay]')).toBeNull();
+    expect(document.body.querySelector('[data-slot="popover-content"]')).toBeNull();
+  });
+
+  it('keeps the local portal registered when a controlled owner rejects a close request', async () => {
+    const onOpenChange = vi.fn();
+    const user = userEvent.setup();
+    const { container } = render(
+      <ShadowRootHost portalStrategy="local-inline">
+        <Popover open onOpenChange={onOpenChange}>
+          <PopoverTrigger>Toggle</PopoverTrigger>
+          <PopoverContent showHeader={false}>Panel</PopoverContent>
+        </Popover>
+      </ShadowRootHost>,
+    );
+
+    const shadowRoot = requireShadowRoot(container);
+    await waitFor(() => {
+      expect(shadowRoot.querySelector('[data-slot="popover-content"]')).toHaveTextContent('Panel');
+    });
+
+    await user.click(shadowRoot.querySelector<HTMLButtonElement>('button')!);
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(shadowRoot.querySelector('[data-yv-shadow-inline-overlay]')).toContainElement(
+      shadowRoot.querySelector('[data-slot="popover-content"]'),
+    );
+    expect(document.body.querySelector('[data-slot="popover-content"]')).toBeNull();
+  });
+
+  it('uses the document portal when no local strategy is enabled', async () => {
+    const documentRender = render(<OpenPopover />);
+    const documentContent = await waitFor(() => {
+      const element = document.querySelector('[data-slot="popover-content"]');
+      if (!element) throw new Error('document popover content not rendered');
+      return element;
+    });
+    expect(documentContent.getRootNode()).toBe(document);
+    documentRender.unmount();
+
+    const fallbackRender = render(
+      <ShadowRootHost>
+        <OpenPopover />
+      </ShadowRootHost>,
+    );
+    const fallbackRoot = requireShadowRoot(fallbackRender.container);
+    const fallbackContent = await waitFor(() => {
+      const element = document.querySelector('[data-slot="popover-content"]');
+      if (!element) throw new Error('fallback popover content not rendered');
+      return element;
+    });
+    expect(fallbackContent.getRootNode()).toBe(document);
+    expect(fallbackRoot.querySelector('[data-slot="popover-content"]')).toBeNull();
+  });
+});
diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
index bfe3817b..59212b5c 100644
--- a/packages/ui/src/components/ui/popover.tsx
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -3,14 +3,50 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { useTranslation } from 'react-i18next';
 import i18n from '@/i18n';
 import { Button } from './button';
+import { useShadowPortalState } from './use-shadow-portal-state';
 import { XIcon } from '../icons/x';
 
 import { cn } from '@/lib/utils';
 
+interface PopoverPortalState {
+  awaitingPortalTarget: boolean;
+  container: HTMLElement | undefined;
+}
+
+const PopoverPortalContext = React.createContext<PopoverPortalState>({
+  awaitingPortalTarget: false,
+  container: undefined,
+});
+
 function Popover({
+  open,
+  defaultOpen,
+  onOpenChange,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.ReactNode {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+  const portal = useShadowPortalState({
+    open,
+    defaultOpen,
+    onOpenChange,
+  });
+  const portalState = React.useMemo<PopoverPortalState>(
+    () => ({
+      awaitingPortalTarget: portal.awaitingPortalTarget,
+      container: portal.container,
+    }),
+    [portal.awaitingPortalTarget, portal.container],
+  );
+
+  return (
+    <PopoverPortalContext.Provider value={portalState}>
+      <PopoverPrimitive.Root
+        data-slot="popover"
+        open={portal.open}
+        onOpenChange={portal.onOpenChange}
+        {...props}
+      />
+    </PopoverPortalContext.Provider>
+  );
 }
 
 function PopoverTrigger({
@@ -38,9 +74,12 @@ function PopoverContent({
   theme?: 'light' | 'dark';
 }): React.ReactNode {
   const { t } = useTranslation(undefined, { i18n });
+  const portal = React.useContext(PopoverPortalContext);
+
+  if (portal.awaitingPortalTarget) return null;
 
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal container={portal.container}>
       <PopoverPrimitive.Content
         data-slot="popover-content"
         data-yv-sdk
@@ -49,7 +88,7 @@ function PopoverContent({
         sideOffset={sideOffset}
         collisionPadding={16}
         className={cn(
-          'yv:bg-popover yv:text-popover-foreground yv:data-[state=open]:animate-in yv:data-[state=closed]:animate-out yv:data-[state=closed]:fade-out-0 yv:data-[state=open]:fade-in-0 yv:data-[state=closed]:zoom-out-95 yv:data-[state=open]:zoom-in-95 yv:data-[side=bottom]:slide-in-from-top-2 yv:data-[side=left]:slide-in-from-right-2 yv:data-[side=right]:slide-in-from-left-2 yv:data-[side=top]:slide-in-from-bottom-2 yv:z-50 yv:origin-(--radix-popover-content-transform-origin) yv:outline-hidden yv:grid yv:grid-rows-[auto_1fr_auto] yv:p-0 yv:h-full yv:max-h-[66svh] yv:max-sm:max-w-[calc(100vw-2rem)] yv:w-sm yv:sm:max-w-sm yv:overflow-hidden yv:rounded-2xl yv:border-0 yv:shadow-lg',
+          'yv:bg-popover yv:text-popover-foreground yv:data-[state=open]:animate-in yv:data-[state=closed]:animate-out yv:data-[state=closed]:fade-out-0 yv:data-[state=open]:fade-in-0 yv:data-[state=closed]:zoom-out-95 yv:data-[state=open]:zoom-in-95 yv:data-[side=bottom]:slide-in-from-top-2 yv:data-[side=left]:slide-in-from-right-2 yv:data-[side=right]:slide-in-from-left-2 yv:data-[side=top]:slide-in-from-bottom-2 yv:z-50 yv:origin-(--radix-popover-content-transform-origin) yv:outline-hidden yv:grid yv:grid-rows-[auto_1fr_auto] yv:p-0 yv:h-full yv:max-h-[min(66svh,var(--radix-popover-content-available-height))] yv:max-sm:max-w-[calc(100vw-2rem)] yv:w-sm yv:sm:max-w-sm yv:overflow-hidden yv:rounded-2xl yv:border-0 yv:shadow-lg',
           className,
         )}
         {...props}
diff --git a/packages/ui/src/components/ui/use-shadow-dialog-focus.ts b/packages/ui/src/components/ui/use-shadow-dialog-focus.ts
new file mode 100644
index 00000000..57d7711c
--- /dev/null
+++ b/packages/ui/src/components/ui/use-shadow-dialog-focus.ts
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { tabbable } from 'tabbable';
+
+import {
+  getOwnShadowRoot,
+  isElementFromOwnerDocument,
+  useShadowModalPresence,
+} from '@/lib/shadow-root-host';
+
+interface ShadowDialogFocusOptions {
+  container: HTMLElement | undefined;
+  content: HTMLElement | null;
+  modal: boolean;
+  open: boolean;
+  overlay: HTMLElement | null;
+}
+
+interface ShadowDialogFocus {
+  onCloseAutoFocus: (event: Event) => void;
+}
+
+function useShadowDialogFocusContainment(
+  active: boolean,
+  content: HTMLElement | null,
+  overlay: HTMLElement | null,
+): void {
+  const lastFocusedElementRef = React.useRef<Element | null>(null);
+  const hadContentRef = React.useRef(false);
+
+  React.useLayoutEffect(() => {
+    const hadContent = hadContentRef.current;
+    if (!active) {
+      hadContentRef.current = false;
+      return;
+    }
+    if (content) hadContentRef.current = true;
+
+    const containmentTarget = content ?? overlay;
+    if (!containmentTarget || !getOwnShadowRoot(containmentTarget)) return;
+
+    if (!content && hadContent) containmentTarget.focus();
+
+    const redirectFocus = (): void => {
+      const remembered = lastFocusedElementRef.current;
+      if (
+        content &&
+        isElementFromOwnerDocument(remembered, content, 'HTMLElement') &&
+        remembered.isConnected &&
+        content.contains(remembered)
+      ) {
+        remembered.focus();
+        return;
+      }
+
+      containmentTarget.focus();
+    };
+
+    const handleFocusIn = (event: FocusEvent): void => {
+      const [realTarget] = event.composedPath();
+      if (!isElementFromOwnerDocument(realTarget, containmentTarget, 'Element')) return;
+
+      if (content?.contains(realTarget)) {
+        lastFocusedElementRef.current = realTarget;
+        return;
+      }
+      if (!content && realTarget === overlay) return;
+
+      redirectFocus();
+    };
+
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (event.key !== 'Tab' || event.defaultPrevented || !content) return;
+
+      const candidates = tabbable(content, { getShadowRoot: true });
+      if (candidates.length === 0) {
+        event.preventDefault();
+        content.focus();
+        return;
+      }
+
+      const [realTarget] = event.composedPath();
+      const currentIndex = candidates.findIndex((candidate) => candidate === realTarget);
+      let nextIndex = 0;
+      if (event.shiftKey) {
+        nextIndex = currentIndex <= 0 ? candidates.length - 1 : currentIndex - 1;
+      } else if (currentIndex !== -1 && currentIndex !== candidates.length - 1) {
+        nextIndex = currentIndex + 1;
+      }
+
+      event.preventDefault();
+      candidates[nextIndex]?.focus();
+    };
+
+    const ownerDocument = containmentTarget.ownerDocument;
+    ownerDocument.addEventListener('focusin', handleFocusIn);
+    content?.addEventListener('keydown', handleKeyDown);
+    return () => {
+      ownerDocument.removeEventListener('focusin', handleFocusIn);
+      content?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [active, content, overlay]);
+}
+
+/** @internal Owns the Shadow DOM-specific modal focus lifecycle for Dialog. */
+export function useShadowDialogFocus({
+  container,
+  content,
+  modal,
+  open,
+  overlay,
+}: ShadowDialogFocusOptions): ShadowDialogFocus {
+  const modalPresent = modal && (overlay !== null || content !== null);
+  useShadowDialogFocusContainment(modalPresent, content, overlay);
+  const restoreFocusWhenModalReleased = useShadowModalPresence(modalPresent);
+  const restoreFocusRef = React.useRef<HTMLElement | null>(null);
+  const capturedRestoreFocusRef = React.useRef(false);
+
+  React.useLayoutEffect(() => {
+    if (!open) {
+      capturedRestoreFocusRef.current = false;
+      return;
+    }
+    if (!container || capturedRestoreFocusRef.current) return;
+
+    const shadowRoot = getOwnShadowRoot(container);
+    const activeElement = shadowRoot
+      ? (shadowRoot.activeElement ?? container.ownerDocument.activeElement)
+      : container.ownerDocument.activeElement;
+    if (isElementFromOwnerDocument(activeElement, container, 'HTMLElement')) {
+      restoreFocusRef.current = activeElement;
+    }
+    capturedRestoreFocusRef.current = true;
+  }, [container, open]);
+
+  const onCloseAutoFocus = React.useCallback(
+    (event: Event): void => {
+      if (event.defaultPrevented || container === undefined) return;
+
+      event.preventDefault();
+      const restoreFocusTo = restoreFocusRef.current;
+      restoreFocusRef.current = null;
+      if (restoreFocusTo && restoreFocusWhenModalReleased) {
+        restoreFocusWhenModalReleased(restoreFocusTo);
+      }
+    },
+    [container, restoreFocusWhenModalReleased],
+  );
+
+  return { onCloseAutoFocus };
+}
diff --git a/packages/ui/src/components/ui/use-shadow-portal-state.ts b/packages/ui/src/components/ui/use-shadow-portal-state.ts
new file mode 100644
index 00000000..02a42d01
--- /dev/null
+++ b/packages/ui/src/components/ui/use-shadow-portal-state.ts
@@ -0,0 +1,36 @@
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useShadowPortalTarget } from '@/lib/shadow-root-host';
+
+interface ShadowPortalStateOptions {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+interface ShadowPortalState {
+  container: HTMLElement | undefined;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  awaitingPortalTarget: boolean;
+}
+
+/** @internal Keeps a Radix primitive's open state synchronized with its shadow portal. */
+export function useShadowPortalState({
+  open,
+  defaultOpen,
+  onOpenChange,
+}: ShadowPortalStateOptions): ShadowPortalState {
+  const [actualOpen, setActualOpen] = useControllableState({
+    prop: open,
+    defaultProp: defaultOpen ?? false,
+    onChange: onOpenChange,
+  });
+  const portalTarget = useShadowPortalTarget(actualOpen);
+
+  return {
+    container: portalTarget ?? undefined,
+    open: actualOpen,
+    onOpenChange: setActualOpen,
+    awaitingPortalTarget: actualOpen && portalTarget === null,
+  };
+}
diff --git a/packages/ui/src/components/verse-action-popover.shadow-isolation.stories.tsx b/packages/ui/src/components/verse-action-popover.shadow-isolation.stories.tsx
new file mode 100644
index 00000000..fedc9146
--- /dev/null
+++ b/packages/ui/src/components/verse-action-popover.shadow-isolation.stories.tsx
@@ -0,0 +1,341 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { http, HttpResponse } from 'msw';
+import { useRef, useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+import i18n from '../i18n';
+import { ShadowRootHost } from '../lib/shadow-root-host';
+import { requireShadowRoot } from '../test/dom-stubs';
+import { VerseActionPopover } from './verse-action-popover';
+
+function IsolatedVerseActionPopover(): React.ReactNode {
+  const [open, setOpen] = useState(false);
+  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
+  const [readerScrollRoot, setReaderScrollRoot] = useState<HTMLDivElement | null>(null);
+  const [selectedVerses, setSelectedVerses] = useState<number[]>([]);
+  const [closeRequests, setCloseRequests] = useState(0);
+  const rejectNextCloseRef = useRef(false);
+  const deferNextCloseRef = useRef(false);
+
+  const selectVerse = (verse: number, element: HTMLElement): void => {
+    setAnchorElement(element);
+    setSelectedVerses((selected) => (selected.includes(verse) ? selected : [...selected, verse]));
+    setOpen(true);
+  };
+
+  const closeAndClearSelection = (): void => {
+    setOpen(false);
+    setAnchorElement(null);
+    setSelectedVerses([]);
+  };
+
+  return (
+    <div style={{ display: 'grid', gap: 24 }}>
+      <button type="button" data-testid="outside-control">
+        Outside control
+      </button>
+      <button
+        type="button"
+        data-testid="rejected-outside-control"
+        onPointerDown={() => {
+          rejectNextCloseRef.current = true;
+        }}
+      >
+        Reject outside close
+      </button>
+      <button
+        type="button"
+        data-testid="delayed-outside-control"
+        onPointerDown={() => {
+          deferNextCloseRef.current = true;
+        }}
+      >
+        Delay outside close
+      </button>
+      <div
+        data-testid="clipping-container"
+        style={{ inlineSize: 800, blockSize: 72, overflow: 'hidden' }}
+      >
+        <ShadowRootHost portalStrategy="local-top-layer">
+          <div
+            ref={setReaderScrollRoot}
+            data-testid="reader-scroll-root"
+            style={{ blockSize: 64, overflowBlock: 'auto' }}
+          >
+            <div style={{ display: 'grid', gap: 8 }}>
+              <button type="button" data-testid="prior-control">
+                Prior control
+              </button>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <span
+                  ref={(element) => {
+                    element?.setAttribute('v', '1');
+                  }}
+                  className={selectedVerses.includes(1) ? 'yv-v yv-v-selected' : 'yv-v'}
+                  data-testid="verse-1"
+                  onClick={(event) => selectVerse(1, event.currentTarget)}
+                >
+                  First verse
+                </span>
+                <span
+                  ref={(element) => {
+                    element?.setAttribute('v', '2');
+                  }}
+                  className={selectedVerses.includes(2) ? 'yv-v yv-v-selected' : 'yv-v'}
+                  data-testid="verse-2"
+                  onClick={(event) => selectVerse(2, event.currentTarget)}
+                >
+                  Second verse
+                </span>
+              </div>
+              <output data-testid="close-requests" data-count={closeRequests} />
+              <div aria-hidden="true" style={{ blockSize: 280 }} />
+            </div>
+          </div>
+          <VerseActionPopover
+            open={open}
+            onOpenChange={(nextOpen) => {
+              if (!nextOpen) setCloseRequests((count) => count + 1);
+              if (!nextOpen && rejectNextCloseRef.current) {
+                rejectNextCloseRef.current = false;
+                return;
+              }
+              if (!nextOpen && deferNextCloseRef.current) {
+                deferNextCloseRef.current = false;
+                setTimeout(closeAndClearSelection, 25);
+                return;
+              }
+              if (nextOpen) setOpen(true);
+              else closeAndClearSelection();
+            }}
+            activeHighlights={new Set()}
+            selectedVerses={selectedVerses}
+            highlightedVerses={{}}
+            anchorElement={anchorElement}
+            scrollRoot={readerScrollRoot}
+            onHighlight={closeAndClearSelection}
+            onClearHighlight={closeAndClearSelection}
+            onCopy={closeAndClearSelection}
+            onShare={closeAndClearSelection}
+          />
+        </ShadowRootHost>
+      </div>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Spikes/VerseActionPopover Shadow DOM isolation',
+  component: IsolatedVerseActionPopover,
+  tags: ['integration'],
+  parameters: {
+    layout: 'centered',
+    msw: {
+      handlers: [
+        http.get('*/v1/fonts/1/stylesheet', () =>
+          HttpResponse.text('', { headers: { 'Content-Type': 'text/css' } }),
+        ),
+      ],
+    },
+  },
+} satisfies Meta<typeof IsolatedVerseActionPopover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+async function waitForElement<ElementType extends Element>(
+  container: ParentNode,
+  selector: string,
+  message: string,
+): Promise<ElementType> {
+  return waitFor(() => {
+    const element = container.querySelector<ElementType>(selector);
+    if (!element) throw new Error(message);
+    return element;
+  });
+}
+
+async function waitForClosed(topLayer: HTMLElement): Promise<void> {
+  await waitFor(() => {
+    void expect(topLayer.querySelector('[role="dialog"]')).toBeNull();
+    void expect(topLayer.matches(':popover-open')).toBe(false);
+  });
+}
+
+function getCopyButton(dialog: HTMLElement): HTMLButtonElement {
+  return within(dialog).getByRole('button', { name: i18n.t('copy') });
+}
+
+export const PortalPlacementDockingReanchoringAndFocusRestoration: Story = {
+  play: async ({ canvasElement }) => {
+    const shadowRoot = await waitFor(() => requireShadowRoot(canvasElement));
+    const priorControl = await waitForElement<HTMLButtonElement>(
+      shadowRoot,
+      '[data-testid="prior-control"]',
+      'prior focus control not rendered',
+    );
+    const firstVerse = await waitForElement<HTMLElement>(
+      shadowRoot,
+      '[data-testid="verse-1"]',
+      'first verse not rendered',
+    );
+    const secondVerse = await waitForElement<HTMLElement>(
+      shadowRoot,
+      '[data-testid="verse-2"]',
+      'second verse not rendered',
+    );
+    const clippingContainer = canvasElement.querySelector<HTMLElement>(
+      '[data-testid="clipping-container"]',
+    );
+    const readerScrollRoot = await waitForElement<HTMLElement>(
+      shadowRoot,
+      '[data-testid="reader-scroll-root"]',
+      'reader scroll root not rendered',
+    );
+    const outsideControl = canvasElement.querySelector<HTMLButtonElement>(
+      '[data-testid="outside-control"]',
+    );
+    const rejectedOutsideControl = canvasElement.querySelector<HTMLButtonElement>(
+      '[data-testid="rejected-outside-control"]',
+    );
+    const delayedOutsideControl = canvasElement.querySelector<HTMLButtonElement>(
+      '[data-testid="delayed-outside-control"]',
+    );
+    if (!clippingContainer || !outsideControl || !rejectedOutsideControl || !delayedOutsideControl)
+      throw new Error('light DOM controls not rendered');
+
+    priorControl.focus();
+    await userEvent.click(firstVerse);
+    const topLayer = await waitForElement<HTMLElement>(
+      shadowRoot,
+      '[data-yv-shadow-local-overlay]',
+      'shadow-local top layer not created',
+    );
+    let dialog = await waitForElement<HTMLElement>(
+      topLayer,
+      '[role="dialog"]',
+      'verse action popover not rendered',
+    );
+
+    await waitFor(() => void expect(topLayer.matches(':popover-open')).toBe(true));
+    void expect(topLayer.getRootNode()).toBe(shadowRoot);
+    void expect(dialog.getRootNode()).toBe(shadowRoot);
+    void expect(canvasElement.ownerDocument.body.querySelector('[role="dialog"]')).toBeNull();
+    void expect(dialog).toHaveAccessibleName(/.+/);
+    void expect(dialog.querySelector('[role="group"]')).toHaveAccessibleName(/.+/);
+    await waitFor(() => void expect(shadowRoot.activeElement).toBe(dialog));
+
+    const clippingRect = clippingContainer.getBoundingClientRect();
+    const firstDialogRect = dialog.getBoundingClientRect();
+    const escapesAbove = firstDialogRect.top < clippingRect.top - 1;
+    const escapesBelow = firstDialogRect.bottom > clippingRect.bottom + 1;
+    void expect(escapesAbove || escapesBelow).toBe(true);
+    const sampleX = firstDialogRect.left + firstDialogRect.width / 2;
+    const sampleY = escapesBelow
+      ? Math.max(firstDialogRect.top + 2, clippingRect.bottom + 2)
+      : Math.min(firstDialogRect.bottom - 2, clippingRect.top - 2);
+    if (sampleY <= firstDialogRect.top || sampleY >= firstDialogRect.bottom)
+      throw new Error('popover did not escape clipping bounds');
+    const hit = shadowRoot.elementFromPoint(sampleX, sampleY);
+    void expect(hit === dialog || (hit !== null && dialog.contains(hit))).toBe(true);
+
+    readerScrollRoot.scrollTop = readerScrollRoot.scrollHeight;
+    await waitFor(() => {
+      const readerRect = readerScrollRoot.getBoundingClientRect();
+      const dockedRect = dialog.getBoundingClientRect();
+      void expect(Math.abs(dockedRect.top - (readerRect.top + 24))).toBeLessThan(12);
+      void expect(
+        Math.abs(dockedRect.left + dockedRect.width / 2 - (readerRect.left + readerRect.width / 2)),
+      ).toBeLessThan(2);
+    });
+    readerScrollRoot.scrollTop = 0;
+    await waitFor(() => {
+      const returnedRect = dialog.getBoundingClientRect();
+      void expect(Math.abs(returnedRect.left - firstDialogRect.left)).toBeLessThan(8);
+      void expect(Math.abs(returnedRect.top - firstDialogRect.top)).toBeLessThan(12);
+    });
+
+    await userEvent.click(secondVerse);
+    await waitFor(() => {
+      const nextRect = dialog.getBoundingClientRect();
+      void expect(nextRect.left).toBeGreaterThan(firstDialogRect.left + 20);
+    });
+    void expect(
+      shadowRoot.querySelector('[data-testid="close-requests"]')?.getAttribute('data-count'),
+    ).toBe('0');
+    void expect(topLayer).toContainElement(dialog);
+
+    await userEvent.keyboard('{Escape}');
+    await waitForClosed(topLayer);
+    void expect(shadowRoot.activeElement).toBe(priorControl);
+
+    priorControl.focus();
+    await userEvent.click(firstVerse);
+    dialog = await waitForElement(topLayer, '[role="dialog"]', 'popover did not reopen');
+    await userEvent.click(getCopyButton(dialog));
+    await waitForClosed(topLayer);
+    void expect(shadowRoot.activeElement).toBe(priorControl);
+
+    priorControl.focus();
+    await userEvent.click(firstVerse);
+    dialog = await waitForElement(
+      topLayer,
+      '[role="dialog"]',
+      'popover did not reopen for rejected outside close',
+    );
+    const closeRequestOutput = shadowRoot.querySelector<HTMLOutputElement>(
+      '[data-testid="close-requests"]',
+    );
+    if (!closeRequestOutput) throw new Error('close request output missing');
+    const closeRequestsBeforeRejection = Number(closeRequestOutput.getAttribute('data-count'));
+    await userEvent.click(rejectedOutsideControl);
+    await waitFor(
+      () =>
+        void expect(Number(closeRequestOutput.getAttribute('data-count'))).toBe(
+          closeRequestsBeforeRejection + 1,
+        ),
+    );
+    void expect(topLayer).toContainElement(dialog);
+    void expect(canvasElement.ownerDocument.activeElement).toBe(rejectedOutsideControl);
+    await userEvent.click(getCopyButton(dialog));
+    await waitForClosed(topLayer);
+    void expect(shadowRoot.activeElement).toBe(priorControl);
+
+    priorControl.focus();
+    await userEvent.click(firstVerse);
+    await waitForElement(topLayer, '[role="dialog"]', 'popover did not reopen for delayed close');
+    await userEvent.click(delayedOutsideControl);
+    await waitForClosed(topLayer);
+    void expect(canvasElement.ownerDocument.activeElement).toBe(delayedOutsideControl);
+
+    priorControl.focus();
+    await userEvent.click(firstVerse);
+    await waitForElement(topLayer, '[role="dialog"]', 'popover did not reopen for outside click');
+    await userEvent.click(outsideControl);
+    await waitForClosed(topLayer);
+    void expect(canvasElement.ownerDocument.activeElement).toBe(outsideControl);
+
+    const closeRequestsBeforeTouch = Number(closeRequestOutput.getAttribute('data-count'));
+    const touchUser = userEvent.setup({ document: canvasElement.ownerDocument });
+    await touchUser.pointer({ keys: '[TouchA]', target: firstVerse });
+    dialog = await waitForElement(topLayer, '[role="dialog"]', 'popover did not open for touch');
+    const touchDialogRect = dialog.getBoundingClientRect();
+    await touchUser.pointer({ keys: '[TouchA]', target: secondVerse });
+    void expect(firstVerse).toHaveClass('yv-v-selected');
+    void expect(secondVerse).toHaveClass('yv-v-selected');
+    void expect(dialog).toHaveAttribute('data-state', 'open');
+    void expect(Number(closeRequestOutput.getAttribute('data-count'))).toBe(
+      closeRequestsBeforeTouch,
+    );
+    await waitFor(() => {
+      void expect(dialog.getBoundingClientRect().left).toBeGreaterThan(touchDialogRect.left + 20);
+    });
+    await touchUser.pointer({ keys: '[TouchA>]', target: outsideControl });
+    void expect(dialog).toHaveAttribute('data-state', 'open');
+    await touchUser.pointer({ keys: '[/TouchA]', target: outsideControl });
+    await waitForClosed(topLayer);
+    void expect(Number(closeRequestOutput.getAttribute('data-count'))).toBe(
+      closeRequestsBeforeTouch + 1,
+    );
+    void expect(canvasElement.ownerDocument.activeElement).toBe(outsideControl);
+  },
+};
diff --git a/packages/ui/src/components/verse-action-popover.test.tsx b/packages/ui/src/components/verse-action-popover.test.tsx
index eaa936a0..bf61de1f 100644
--- a/packages/ui/src/components/verse-action-popover.test.tsx
+++ b/packages/ui/src/components/verse-action-popover.test.tsx
@@ -1,5 +1,9 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { act, render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useRef, useState } from 'react';
+import { ShadowRootHost } from '@/lib/shadow-root-host';
+import { requireShadowRoot } from '@/test/dom-stubs';
 import { fillFor } from '@/test/highlights-test-utils';
 import {
   VerseActionPopover,
@@ -8,8 +12,8 @@ import {
   type HighlightColor,
 } from './verse-action-popover';
 
-describe('VerseActionPopover', () => {
-  const defaultProps = {
+function createDefaultProps() {
+  return {
     open: true,
     onOpenChange: vi.fn(),
     activeHighlights: new Set<string>(),
@@ -21,14 +25,79 @@ describe('VerseActionPopover', () => {
     onCopy: vi.fn(),
     onShare: vi.fn(),
   };
+}
+
+function FocusRestorationScenario({
+  anchorElement,
+  mountWhenOpen = false,
+}: {
+  anchorElement?: HTMLElement;
+  mountWhenOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Prior control
+      </button>
+      {(!mountWhenOpen || open) && (
+        <VerseActionPopover
+          {...createDefaultProps()}
+          anchorElement={anchorElement}
+          open={open}
+          onOpenChange={setOpen}
+          onCopy={() => setOpen(false)}
+        />
+      )}
+    </>
+  );
+}
+
+function ControlledCloseScenario() {
+  const [open, setOpen] = useState(false);
+  const [closeRequests, setCloseRequests] = useState(0);
+  const rejectNextCloseRef = useRef(false);
+  const deferNextCloseRef = useRef(false);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Prior control
+      </button>
+      <button type="button" onPointerDown={() => (rejectNextCloseRef.current = true)}>
+        Reject outside close
+      </button>
+      <button type="button" onPointerDown={() => (deferNextCloseRef.current = true)}>
+        Delay outside close
+      </button>
+      <output data-testid="close-requests">{closeRequests}</output>
+      <VerseActionPopover
+        {...createDefaultProps()}
+        open={open}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) setCloseRequests((count) => count + 1);
+          if (!nextOpen && rejectNextCloseRef.current) {
+            rejectNextCloseRef.current = false;
+            return;
+          }
+          if (!nextOpen && deferNextCloseRef.current) {
+            deferNextCloseRef.current = false;
+            setTimeout(() => setOpen(false), 25);
+            return;
+          }
+          setOpen(nextOpen);
+        }}
+        onCopy={() => setOpen(false)}
+      />
+    </>
+  );
+}
 
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
+describe('VerseActionPopover', () => {
   describe('AC1: Basic popover display', () => {
     it('should display 6 color circles when verse selected', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
 
       const colorButtons = screen
         .getAllByRole('button')
@@ -38,7 +107,7 @@ describe('VerseActionPopover', () => {
     });
 
     it('should render the six apply colors', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
 
       const applyButtons = screen
         .getAllByRole('button')
@@ -59,7 +128,7 @@ describe('VerseActionPopover', () => {
     // redirect initial focus to the (non-tabbable) content element instead, so
     // the ring only appears once the user actually Tabs to a swatch.
     it('moves initial focus to the popover content, not the first swatch', async () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
 
       const dialog = screen.getByRole('dialog');
       const firstSwatch = screen
@@ -76,7 +145,7 @@ describe('VerseActionPopover', () => {
   describe('AC2: Apply highlight', () => {
     it('should call onHighlight when color circle clicked', () => {
       const onHighlight = vi.fn();
-      render(<VerseActionPopover {...defaultProps} onHighlight={onHighlight} />);
+      render(<VerseActionPopover {...createDefaultProps()} onHighlight={onHighlight} />);
 
       const firstColorButton = screen
         .getAllByRole('button')
@@ -87,7 +156,7 @@ describe('VerseActionPopover', () => {
     });
 
     it('should render popover with color buttons', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
 
       const dialog = screen.getByRole('dialog');
       expect(dialog).toBeTruthy();
@@ -102,14 +171,14 @@ describe('VerseActionPopover', () => {
 
   describe('AC3: Copy action', () => {
     it('should display copy button', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
       const copyButton = screen.getByText('Copy');
       expect(copyButton).toBeTruthy();
     });
 
     it('should call onCopy when copy button clicked', () => {
       const onCopy = vi.fn();
-      render(<VerseActionPopover {...defaultProps} onCopy={onCopy} />);
+      render(<VerseActionPopover {...createDefaultProps()} onCopy={onCopy} />);
 
       const copyButton = screen.getByText('Copy');
       fireEvent.click(copyButton);
@@ -119,14 +188,14 @@ describe('VerseActionPopover', () => {
 
   describe('AC4: Share action', () => {
     it('should display share button', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
       const shareButton = screen.getByText('Share');
       expect(shareButton).toBeTruthy();
     });
 
     it('should call onShare when share button clicked', () => {
       const onShare = vi.fn();
-      render(<VerseActionPopover {...defaultProps} onShare={onShare} />);
+      render(<VerseActionPopover {...createDefaultProps()} onShare={onShare} />);
 
       const shareButton = screen.getByText('Share');
       fireEvent.click(shareButton);
@@ -142,7 +211,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -170,7 +239,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -197,7 +266,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -226,7 +295,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -254,7 +323,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -275,7 +344,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -308,7 +377,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -325,23 +394,16 @@ describe('VerseActionPopover', () => {
 
   describe('Popover visibility', () => {
     it('should not render content when open is false', () => {
-      render(<VerseActionPopover {...defaultProps} open={false} />);
+      render(<VerseActionPopover {...createDefaultProps()} open={false} />);
 
       expect(screen.queryByRole('dialog')).toBeNull();
     });
 
     it('should render content when open is true', () => {
-      render(<VerseActionPopover {...defaultProps} open={true} />);
+      render(<VerseActionPopover {...createDefaultProps()} open={true} />);
 
       expect(screen.getByRole('dialog')).toBeTruthy();
     });
-
-    it('should use Radix popover with portal', () => {
-      render(<VerseActionPopover {...defaultProps} />);
-
-      const dialog = screen.getByRole('dialog');
-      expect(dialog).toBeTruthy();
-    });
   });
 
   describe('Accessibility', () => {
@@ -352,7 +414,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -373,7 +435,7 @@ describe('VerseActionPopover', () => {
     });
 
     it('should have dialog role with aria-label', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
 
       const dialog = screen.getByRole('dialog');
       expect(dialog).toBeTruthy();
@@ -381,7 +443,7 @@ describe('VerseActionPopover', () => {
     });
 
     it('should have semantic color group', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
 
       const colorGroup = screen.getByRole('group', { name: 'Highlight colors' });
       expect(colorGroup).toBeTruthy();
@@ -390,21 +452,21 @@ describe('VerseActionPopover', () => {
 
   describe('Styling', () => {
     it('should have data-yv-sdk attribute for scoping', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
 
       const dialog = screen.getByRole('dialog');
       expect(dialog.getAttribute('data-yv-sdk')).not.toBeNull();
     });
 
     it('should apply theme attribute', () => {
-      render(<VerseActionPopover {...defaultProps} theme="dark" />);
+      render(<VerseActionPopover {...createDefaultProps()} theme="dark" />);
 
       const dialog = screen.getByRole('dialog');
       expect(dialog.getAttribute('data-yv-theme')).toBe('dark');
     });
 
     it('should default to light theme', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
 
       const dialog = screen.getByRole('dialog');
       expect(dialog.getAttribute('data-yv-theme')).toBe('light');
@@ -416,7 +478,7 @@ describe('VerseActionPopover', () => {
       const custom = 'aabbcc';
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={new Set([custom])}
           selectedVerses={[1]}
           highlightedVerses={{ 1: custom }}
@@ -431,7 +493,7 @@ describe('VerseActionPopover', () => {
     it('shows leftover fffe00 as a remove swatch, not an apply swatch', () => {
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={new Set(['fffe00'])}
           selectedVerses={[1]}
           highlightedVerses={{ 1: 'fffe00' }}
@@ -449,7 +511,7 @@ describe('VerseActionPopover', () => {
     it('should handle empty active highlights', () => {
       const activeHighlights = new Set<HighlightColor>();
 
-      render(<VerseActionPopover {...defaultProps} activeHighlights={activeHighlights} />);
+      render(<VerseActionPopover {...createDefaultProps()} activeHighlights={activeHighlights} />);
 
       const applyButtons = screen
         .getAllByRole('button')
@@ -473,7 +535,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -508,7 +570,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -549,7 +611,7 @@ describe('VerseActionPopover', () => {
     it('renders a checkmark (not an X) on the active/remove swatch', () => {
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={new Set<HighlightColor>([HIGHLIGHT_COLORS[0]])}
           selectedVerses={[1]}
           highlightedVerses={{ 1: HIGHLIGHT_COLORS[0] }}
@@ -562,7 +624,7 @@ describe('VerseActionPopover', () => {
     });
 
     it('apply swatches render no icon', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
       applyButtons().forEach((btn) => {
         expect(btn.querySelector('svg')).toBeNull();
       });
@@ -576,29 +638,29 @@ describe('VerseActionPopover', () => {
     }
 
     it('paints drawer dots with the unmixed stored hex in light mode', () => {
-      render(<VerseActionPopover {...defaultProps} theme="light" />);
+      render(<VerseActionPopover {...createDefaultProps()} theme="light" />);
       expect(firstApplySwatch().style.backgroundColor).toBe(fillFor(HIGHLIGHT_COLORS[0], 'card'));
     });
 
     it('paints drawer dots with the dark mix against the card surface', () => {
-      render(<VerseActionPopover {...defaultProps} theme="dark" />);
+      render(<VerseActionPopover {...createDefaultProps()} theme="dark" />);
       expect(firstApplySwatch().style.backgroundColor).toBe(fillFor(HIGHLIGHT_COLORS[0], 'card'));
       expect(firstApplySwatch().style.backgroundColor).toContain('var(--yv-card)');
     });
 
     it('uses a dark inner stroke in light mode and a light one in dark mode', () => {
-      const { unmount } = render(<VerseActionPopover {...defaultProps} theme="light" />);
+      const { unmount } = render(<VerseActionPopover {...createDefaultProps()} theme="light" />);
       expect(firstApplySwatch().style.border).toContain('rgba(18, 18, 18, 0.2)');
       unmount();
 
-      render(<VerseActionPopover {...defaultProps} theme="dark" />);
+      render(<VerseActionPopover {...createDefaultProps()} theme="dark" />);
       expect(firstApplySwatch().style.border).toContain('rgba(255, 255, 255, 0.2)');
     });
 
     it('keeps the active-swatch checkmark legible on the dimmed dark-mode fill', () => {
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           theme="dark"
           activeHighlights={new Set<HighlightColor>([HIGHLIGHT_COLORS[0]])}
           selectedVerses={[1]}
@@ -612,7 +674,7 @@ describe('VerseActionPopover', () => {
     it('keeps the light-mode checkmark in the Text/Everdark color', () => {
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           theme="light"
           activeHighlights={new Set<HighlightColor>([HIGHLIGHT_COLORS[0]])}
           selectedVerses={[1]}
@@ -627,7 +689,7 @@ describe('VerseActionPopover', () => {
       const custom = '000000';
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           theme="light"
           activeHighlights={new Set([custom])}
           selectedVerses={[1]}
@@ -645,7 +707,7 @@ describe('VerseActionPopover', () => {
     // way to reach it. The pill is now capped to the viewport and the swatch row
     // scrolls horizontally inside it.
     it('caps the popover content to the min of the Radix available width and the live viewport', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
       const dialog = screen.getByRole('dialog');
       // The `min(..., calc(100vw-24px))` term is what keeps the cap honest when
       // the viewport shrinks under an open popover — Radix's own var goes stale
@@ -656,7 +718,7 @@ describe('VerseActionPopover', () => {
     });
 
     it('makes the swatch row horizontally scrollable with a hidden scrollbar', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
       const swatchRow = screen.getByRole('group', { name: 'Highlight colors' });
       expect(swatchRow.className).toContain('yv:overflow-x-auto');
       expect(swatchRow.className).toContain('yv:scrollbar-hide');
@@ -666,7 +728,7 @@ describe('VerseActionPopover', () => {
     });
 
     it('keeps swatches from squishing when the row is capped', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
       const applyButton = screen
         .getAllByRole('button')
         .find((btn) => btn.getAttribute('aria-label')?.includes('Apply'))!;
@@ -684,7 +746,7 @@ describe('VerseActionPopover', () => {
     it('engages the edge-fade mask on scroll once the row overflows', () => {
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={new Set<HighlightColor>(HIGHLIGHT_COLORS)}
           selectedVerses={[1, 2, 3, 4, 5]}
           highlightedVerses={{
@@ -765,7 +827,7 @@ describe('VerseActionPopover', () => {
     it('hides the color row and remove circles but keeps Copy / Share', () => {
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           highlightsEnabled={false}
           activeHighlights={new Set<HighlightColor>([HIGHLIGHT_COLORS[0]])}
           selectedVerses={[1]}
@@ -784,3 +846,194 @@ describe('VerseActionPopover', () => {
     });
   });
 });
+
+it('keeps isolated content in its shadow tree and preserves the document portal otherwise', async () => {
+  const isolatedRender = render(
+    <ShadowRootHost portalStrategy="local-inline">
+      <VerseActionPopover {...createDefaultProps()} />
+    </ShadowRootHost>,
+  );
+  const shadowRoot = requireShadowRoot(isolatedRender.container);
+
+  const isolatedDialog = await waitFor(() => {
+    const element = shadowRoot.querySelector<HTMLElement>('[role="dialog"]');
+    if (!element) throw new Error('isolated verse action popover not rendered');
+    return element;
+  });
+  expect(isolatedDialog.getRootNode()).toBe(shadowRoot);
+  expect(shadowRoot.querySelector('[data-yv-shadow-inline-overlay]')).toContainElement(
+    isolatedDialog,
+  );
+  expect(document.body.querySelector('[role="dialog"]')).toBeNull();
+  isolatedRender.unmount();
+
+  const documentRender = render(<VerseActionPopover {...createDefaultProps()} />);
+  const documentDialog = screen.getByRole('dialog');
+  expect(documentDialog.getRootNode()).toBe(document);
+  expect(document.body).toContainElement(documentDialog);
+  expect(documentRender.container).not.toContainElement(documentDialog);
+});
+
+it('restores document focus after Escape and an action closes the popover', async () => {
+  render(<FocusRestorationScenario />);
+  const priorControl = screen.getByRole('button', { name: 'Prior control' });
+
+  priorControl.focus();
+  fireEvent.click(priorControl);
+  let dialog = await screen.findByRole('dialog');
+  await waitFor(() => expect(document.activeElement).toBe(dialog));
+
+  fireEvent.keyDown(dialog, { key: 'Escape' });
+  await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  expect(document.activeElement).toBe(priorControl);
+
+  fireEvent.click(priorControl);
+  dialog = await screen.findByRole('dialog');
+  fireEvent.pointerDown(screen.getByRole('button', { name: 'Copy' }));
+  fireEvent.click(screen.getByRole('button', { name: 'Copy' }));
+  await waitFor(() => expect(dialog).not.toBeInTheDocument());
+  expect(document.activeElement).toBe(priorControl);
+});
+
+it.each([false, true])(
+  'restores focus with an existing virtual anchor (mount only when open: %s)',
+  async (mountWhenOpen) => {
+    const anchorElement = document.createElement('span');
+    document.body.append(anchorElement);
+    const user = userEvent.setup();
+    const view = render(
+      <FocusRestorationScenario anchorElement={anchorElement} mountWhenOpen={mountWhenOpen} />,
+    );
+    try {
+      const priorControl = screen.getByRole('button', { name: 'Prior control' });
+      await user.click(priorControl);
+      const dialog = await screen.findByRole('dialog');
+      await waitFor(() => expect(document.activeElement).toBe(dialog));
+      await user.click(screen.getByRole('button', { name: 'Copy' }));
+      await waitFor(() => expect(dialog).not.toBeInTheDocument());
+      await waitFor(() => expect(document.activeElement).toBe(priorControl));
+
+      await user.click(priorControl);
+      await screen.findByRole('dialog');
+      await user.keyboard('{Escape}');
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+      await waitFor(() => expect(document.activeElement).toBe(priorControl));
+    } finally {
+      view.unmount();
+      anchorElement.remove();
+    }
+  },
+);
+
+it('restores shadow focus after Escape and an action closes the popover', async () => {
+  const isolatedRender = render(
+    <ShadowRootHost portalStrategy="local-inline">
+      <FocusRestorationScenario />
+    </ShadowRootHost>,
+  );
+  const shadowRoot = requireShadowRoot(isolatedRender.container);
+  const priorControl = await waitFor(() => {
+    const element = shadowRoot.querySelector<HTMLButtonElement>('button');
+    if (!element) throw new Error('prior focus control not rendered');
+    return element;
+  });
+
+  priorControl.focus();
+  fireEvent.click(priorControl);
+  let dialog = await waitFor(() => {
+    const element = shadowRoot.querySelector<HTMLElement>('[role="dialog"]');
+    if (!element) throw new Error('isolated verse action popover not rendered');
+    return element;
+  });
+  await waitFor(() => expect(shadowRoot.activeElement).toBe(dialog));
+
+  fireEvent.keyDown(dialog, { key: 'Escape' });
+  await waitFor(() => expect(shadowRoot.querySelector('[role="dialog"]')).toBeNull());
+  expect(shadowRoot.activeElement).toBe(priorControl);
+
+  fireEvent.click(priorControl);
+  dialog = await waitFor(() => {
+    const element = shadowRoot.querySelector<HTMLElement>('[role="dialog"]');
+    if (!element) throw new Error('isolated verse action popover did not reopen');
+    return element;
+  });
+  const copyButton = Array.from(dialog.querySelectorAll('button')).find(
+    (button) => button.textContent === 'Copy',
+  );
+  if (!copyButton) throw new Error('copy action not rendered');
+  fireEvent.pointerDown(copyButton);
+  fireEvent.click(copyButton);
+  await waitFor(() => expect(shadowRoot.querySelector('[role="dialog"]')).toBeNull());
+  expect(shadowRoot.activeElement).toBe(priorControl);
+});
+
+it('preserves document focus through rejected and delayed outside closes', async () => {
+  const user = userEvent.setup();
+  render(<ControlledCloseScenario />);
+  const priorControl = screen.getByRole('button', { name: 'Prior control' });
+  const rejectedOutsideControl = screen.getByRole('button', { name: 'Reject outside close' });
+  const delayedOutsideControl = screen.getByRole('button', { name: 'Delay outside close' });
+
+  await user.click(priorControl);
+  let dialog = await screen.findByRole('dialog');
+  await user.click(rejectedOutsideControl);
+  await waitFor(() => expect(screen.getByTestId('close-requests')).toHaveTextContent('1'));
+  expect(dialog).toBeInTheDocument();
+  expect(document.activeElement).toBe(rejectedOutsideControl);
+
+  await user.click(screen.getByRole('button', { name: 'Copy' }));
+  await waitFor(() => expect(dialog).not.toBeInTheDocument());
+  expect(document.activeElement).toBe(priorControl);
+
+  await user.click(priorControl);
+  dialog = await screen.findByRole('dialog');
+  await user.click(delayedOutsideControl);
+  await waitFor(() => expect(dialog).not.toBeInTheDocument());
+  expect(document.activeElement).toBe(delayedOutsideControl);
+});
+
+it('restores document focus without retaining another popover as its target', async () => {
+  let setFirstOpen = (_open: boolean): void => undefined;
+  let setSecondOpen = (_open: boolean): void => undefined;
+
+  function TwoPopovers() {
+    const [firstOpen, updateFirstOpen] = useState(false);
+    const [secondOpen, updateSecondOpen] = useState(false);
+    setFirstOpen = updateFirstOpen;
+    setSecondOpen = updateSecondOpen;
+
+    return (
+      <>
+        <button type="button">Prior control</button>
+        <VerseActionPopover
+          {...createDefaultProps()}
+          open={firstOpen}
+          onOpenChange={(nextOpen) => {
+            if (nextOpen) updateFirstOpen(true);
+          }}
+        />
+        <VerseActionPopover
+          {...createDefaultProps()}
+          open={secondOpen}
+          onOpenChange={updateSecondOpen}
+        />
+      </>
+    );
+  }
+
+  render(<TwoPopovers />);
+  const priorControl = screen.getByRole('button', { name: 'Prior control' });
+  priorControl.focus();
+
+  act(() => setFirstOpen(true));
+  await waitFor(() => expect(screen.getAllByRole('dialog')).toHaveLength(1));
+  act(() => setSecondOpen(true));
+  await waitFor(() => expect(screen.getAllByRole('dialog')).toHaveLength(2));
+
+  act(() => setFirstOpen(false));
+  await waitFor(() => expect(screen.getAllByRole('dialog')).toHaveLength(1));
+  act(() => setSecondOpen(false));
+
+  await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  expect(document.activeElement).toBe(priorControl);
+});
diff --git a/packages/ui/src/components/verse-action-popover.tsx b/packages/ui/src/components/verse-action-popover.tsx
index 05c78fa5..35c0f557 100644
--- a/packages/ui/src/components/verse-action-popover.tsx
+++ b/packages/ui/src/components/verse-action-popover.tsx
@@ -1,4 +1,12 @@
-import { useEffect, useMemo, useRef, useState, type CSSProperties, type FC } from 'react';
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type FC,
+} from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { useTranslation } from 'react-i18next';
 import i18n from '@/i18n';
@@ -6,7 +14,13 @@ import { cn } from '../lib/utils';
 import { BoxStackIcon } from './icons/box-stack';
 import { Share } from './icons/share';
 import { CheckIcon } from './icons/check';
+import { useShadowPortalState } from './ui/use-shadow-portal-state';
 import { buildVerseActionSwatches, highlightFillColorMix } from '@/lib/highlight-colors';
+import {
+  getOwnShadowRoot,
+  isElementFromOwnerDocument,
+  useShadowFocusRestoreTarget,
+} from '@/lib/shadow-root-host';
 import { isDarkHighlightHex } from './verse';
 
 /** Re-export for back-compat; prefer `@/lib/highlight-colors` for new code. */
@@ -62,6 +76,15 @@ function scrollFadeMask({ start, end }: ScrollFade): React.CSSProperties | undef
   return { maskImage: mask, WebkitMaskImage: mask };
 }
 
+function isVerseEvent(event: Event, owner: HTMLElement): boolean {
+  return event
+    .composedPath()
+    .some(
+      (target) =>
+        isElementFromOwnerDocument(target, owner, 'Element') && target.matches('.yv-v[v]'),
+    );
+}
+
 type VerseActionPopoverProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -173,6 +196,8 @@ export const VerseActionPopover: FC<VerseActionPopoverProps> = ({
   theme = 'light',
 }) => {
   const { t } = useTranslation(undefined, { i18n });
+  const portal = useShadowPortalState({ open, onOpenChange });
+  const getShadowFocusRestoreTarget = useShadowFocusRestoreTarget();
 
   // On open, Radix's FocusScope would autofocus the first swatch. Because the bar
   // opens from a mouse/tap on non-focusable verse text, Chromium treats that
@@ -181,7 +206,15 @@ export const VerseActionPopover: FC<VerseActionPopoverProps> = ({
   // initial focus to the content container instead (see `onOpenAutoFocus`): focus
   // still enters the popover (Escape closes; screen readers announce the dialog),
   // but the ring only appears once the user actually Tabs to a swatch.
+  const [popoverAnchor, setPopoverAnchor] = useState<HTMLDivElement | null>(null);
   const contentRef = useRef<HTMLDivElement>(null);
+  const focusRestoreTargetRef = useRef<HTMLElement | null>(null);
+  const documentFocusRestoreTargetRef = useRef<HTMLElement | null>(null);
+  const versePointerEventsRef = useRef(new WeakSet<Event>());
+  const retainOutsideFocusRef = useRef(false);
+  const allowPriorFocusRestoration = (): void => {
+    retainOutsideFocusRef.current = false;
+  };
 
   // The swatch row is capped to the viewport width (see the Content max-width
   // below) and scrolls horizontally when it overflows. Track which edges have
@@ -265,13 +298,14 @@ export const VerseActionPopover: FC<VerseActionPopoverProps> = ({
     highlightedVerses,
   });
 
-  // Snapshot of everything the Content renders. While open we keep it fresh; the
-  // moment `open` flips false (apply / outside-click) the parent clears the
-  // selection and anchor synchronously, so without this the still-animating bar
+  // Snapshot of the anchor and everything the Content renders. While open we
+  // keep it fresh; the moment `open` flips false (apply / outside-click) the
+  // parent clears the selection and anchor, so the still-animating bar
   // would lose its anchor (jump to a fallback position) and flash the empty
   // layout. Freezing the last snapshot lets it simply fade out where it was.
   const dockSide: 'top' | 'bottom' = docked ? dockedSide : 'bottom';
   const live = {
+    anchorElement,
     virtualRef,
     side: dockSide,
     sideOffset: docked ? 24 : 20,
@@ -282,6 +316,51 @@ export const VerseActionPopover: FC<VerseActionPopoverProps> = ({
   if (open) frozenView.current = live;
   const view = open ? live : frozenView.current;
 
+  // Radix renders no Anchor element when given a virtual ref. Use the actual
+  // verse in that case, including the frozen anchor while closed, so document
+  // focus tracking survives the reader clearing its selection between opens.
+  const anchor = view.anchorElement ?? popoverAnchor;
+  const interactionRoot = anchor ? (getOwnShadowRoot(anchor) ?? anchor.ownerDocument) : null;
+  const ownerDocument = anchor && !getOwnShadowRoot(anchor) ? anchor.ownerDocument : null;
+
+  // Capture before Radix's passive autofocus, including a mount already open
+  // with a virtual anchor. Key on the document, not each newly selected verse,
+  // so re-anchoring doesn't replace the remembered control with document.body.
+  useLayoutEffect(() => {
+    if (!ownerDocument) return;
+
+    const rememberFocusedElement = (target: EventTarget | null): void => {
+      if (
+        !isElementFromOwnerDocument(target, ownerDocument.documentElement, 'HTMLElement') ||
+        target.closest('[data-slot="verse-action-popover"]') ||
+        target.hasAttribute('data-radix-focus-guard')
+      ) {
+        return;
+      }
+      documentFocusRestoreTargetRef.current = target;
+    };
+    const handleFocusIn = (event: FocusEvent): void => rememberFocusedElement(event.target);
+
+    rememberFocusedElement(ownerDocument.activeElement);
+    ownerDocument.addEventListener('focusin', handleFocusIn);
+    return () => ownerDocument.removeEventListener('focusin', handleFocusIn);
+  }, [ownerDocument]);
+
+  useEffect(() => {
+    if (!open || !interactionRoot) return;
+    const rememberVersePointer = (event: Event): void => {
+      const content = contentRef.current;
+      if (content && isVerseEvent(event, content)) {
+        versePointerEventsRef.current.add(event);
+      }
+    };
+    // Radix defers touch outside handling to click, after pointerdown's composed
+    // path is cleared and its target may be retargeted to the shadow host. Keep
+    // only a verdict keyed to that event, not DOM paths or a sticky pointer flag.
+    interactionRoot.addEventListener('pointerdown', rememberVersePointer, true);
+    return () => interactionRoot.removeEventListener('pointerdown', rememberVersePointer, true);
+  }, [open, interactionRoot]);
+
   // Measure the swatch row's overflow and keep the fade in sync. Keyed on the
   // state-held node so it (re)attaches the listener the moment Radix commits the
   // row into the DOM, and on the swatch count so a content-width change re-measures.
@@ -314,128 +393,168 @@ export const VerseActionPopover: FC<VerseActionPopoverProps> = ({
   }, [swatchRow, swatchCount]);
 
   return (
-    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <PopoverPrimitive.Anchor virtualRef={view.virtualRef} />
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          ref={contentRef}
-          role="dialog"
-          aria-label={t('verseActionsAriaLabel')}
-          tabIndex={-1}
-          data-yv-sdk
-          data-yv-theme={theme}
-          onOpenAutoFocus={(event) => {
-            // Keep focus contained in the popover but off the first swatch: land
-            // it on the (non-tabbable) content element so no `:focus-visible` ring
-            // shows on pointer-open. The first Tab still moves to the first swatch,
-            // and because Tab is keyboard modality the ring correctly appears then.
-            event.preventDefault();
-            contentRef.current?.focus({ preventScroll: true });
-          }}
-          onInteractOutside={(event) => {
-            // Tapping another verse modifies the selection — it should re-anchor
-            // the popover, not dismiss it. Only a tap truly outside the reader
-            // dismisses (which clears the selection via onOpenChange).
-            const target = event.detail.originalEvent.target;
-            if (target instanceof Element && target.closest('.yv-v[v]')) {
+    <PopoverPrimitive.Root open={portal.open} onOpenChange={portal.onOpenChange}>
+      <PopoverPrimitive.Anchor ref={setPopoverAnchor} virtualRef={view.virtualRef} />
+      {!portal.awaitingPortalTarget && (
+        <PopoverPrimitive.Portal container={portal.container}>
+          <PopoverPrimitive.Content
+            ref={contentRef}
+            role="dialog"
+            data-slot="verse-action-popover"
+            aria-label={t('verseActionsAriaLabel')}
+            tabIndex={-1}
+            data-yv-sdk
+            data-yv-theme={theme}
+            onOpenAutoFocus={(event) => {
+              // Keep focus contained in the popover but off the first swatch: land
+              // it on the (non-tabbable) content element so no `:focus-visible` ring
+              // shows on pointer-open. The first Tab still moves to the first swatch,
+              // and because Tab is keyboard modality the ring correctly appears then.
               event.preventDefault();
-            }
-          }}
-          side={view.side}
-          sideOffset={view.sideOffset}
-          align="center"
-          // Keep the pill off the screen edges; this also shrinks Radix's
-          // `--radix-popover-content-available-width`, which we cap to below.
-          collisionPadding={12}
-          className={cn(
-            'yv:bg-card yv:text-popover-foreground',
-            'yv:rounded-full yv:drop-shadow-[0px_4.8432px_20px_rgba(0,0,0,0.19)]',
-            'yv:px-4 yv:py-2',
-            'yv:flex yv:items-center yv:gap-3',
-            // Never wider than the viewport (minus collision padding). When the
-            // swatch row can't fit, it scrolls inside instead of overflowing the
-            // screen. Radix sets `--radix-popover-content-available-width`, but
-            // only recomputes it on reposition — it goes stale on a plain window
-            // resize. `min()` with a live `100vw` term keeps the cap honest when
-            // the viewport shrinks under an open popover (24px = 2×collisionPadding).
-            'yv:max-w-[min(var(--radix-popover-content-available-width),calc(100vw-24px))]',
-            'yv:z-50 yv:outline-hidden',
-            'yv:overflow-visible yv:relative',
-            'yv:origin-(--radix-popover-content-transform-origin)',
-            'yv:data-[state=open]:animate-in yv:data-[state=closed]:animate-out',
-            'yv:data-[state=closed]:fade-out-0 yv:data-[state=open]:fade-in-0',
-            'yv:data-[state=closed]:zoom-out-95 yv:data-[state=open]:zoom-in-95',
-            'yv:data-[side=bottom]:slide-in-from-top-2',
-            'yv:data-[side=top]:slide-in-from-bottom-2',
-          )}
-          style={popoverMotionStyle}
-        >
-          {/* Caret — matches the card background in both themes, pointing at the
+              const content = contentRef.current;
+              if (!content) return;
+
+              const root = getOwnShadowRoot(content);
+              retainOutsideFocusRef.current = false;
+              const activeElement = root
+                ? (root.activeElement ?? getShadowFocusRestoreTarget?.())
+                : documentFocusRestoreTargetRef.current;
+              focusRestoreTargetRef.current = isElementFromOwnerDocument(
+                activeElement,
+                content,
+                'HTMLElement',
+              )
+                ? activeElement
+                : null;
+              content.focus({ preventScroll: true });
+            }}
+            onCloseAutoFocus={(event) => {
+              const root = portal.container ? getOwnShadowRoot(portal.container) : null;
+              const target = focusRestoreTargetRef.current;
+              const restoreTarget =
+                target?.isConnected && (!root || target.getRootNode() === root) ? target : null;
+              if (root || restoreTarget) event.preventDefault();
+              if (!retainOutsideFocusRef.current) restoreTarget?.focus();
+              retainOutsideFocusRef.current = false;
+              focusRestoreTargetRef.current = null;
+            }}
+            onPointerDownCapture={allowPriorFocusRestoration}
+            onFocusCapture={allowPriorFocusRestoration}
+            onEscapeKeyDown={allowPriorFocusRestoration}
+            onInteractOutside={(event) => {
+              // Tapping another verse modifies the selection — it should re-anchor
+              // the popover, not dismiss it. Only a tap truly outside the reader
+              // dismisses (which clears the selection via onOpenChange).
+              const content = contentRef.current;
+              if (!content) return;
+              const originalEvent = event.detail.originalEvent;
+              const interactedWithVerse =
+                versePointerEventsRef.current.has(originalEvent) ||
+                isVerseEvent(originalEvent, content);
+              if (interactedWithVerse) {
+                event.preventDefault();
+                return;
+              }
+              retainOutsideFocusRef.current = true;
+            }}
+            side={view.side}
+            sideOffset={view.sideOffset}
+            align="center"
+            // Keep the pill off the screen edges; this also shrinks Radix's
+            // `--radix-popover-content-available-width`, which we cap to below.
+            collisionPadding={12}
+            className={cn(
+              'yv:bg-card yv:text-popover-foreground',
+              'yv:rounded-full yv:drop-shadow-[0px_4.8432px_20px_rgba(0,0,0,0.19)]',
+              'yv:px-4 yv:py-2',
+              'yv:flex yv:items-center yv:gap-3',
+              // Never wider than the viewport (minus collision padding). When the
+              // swatch row can't fit, it scrolls inside instead of overflowing the
+              // screen. Radix sets `--radix-popover-content-available-width`, but
+              // only recomputes it on reposition — it goes stale on a plain window
+              // resize. `min()` with a live `100vw` term keeps the cap honest when
+              // the viewport shrinks under an open popover (24px = 2×collisionPadding).
+              'yv:max-w-[min(var(--radix-popover-content-available-width),calc(100vw-24px))]',
+              'yv:z-50 yv:outline-hidden',
+              'yv:overflow-visible yv:relative',
+              'yv:origin-(--radix-popover-content-transform-origin)',
+              'yv:data-[state=open]:animate-in yv:data-[state=closed]:animate-out',
+              'yv:data-[state=closed]:fade-out-0 yv:data-[state=open]:fade-in-0',
+              'yv:data-[state=closed]:zoom-out-95 yv:data-[state=open]:zoom-in-95',
+              'yv:data-[side=bottom]:slide-in-from-top-2',
+              'yv:data-[side=top]:slide-in-from-bottom-2',
+            )}
+            style={popoverMotionStyle}
+          >
+            {/* Caret — matches the card background in both themes, pointing at the
               verse. Hidden when docked: the bar is no longer tied to a verse. */}
-          {view.showCaret && (
-            <svg
-              className="yv:text-card yv:absolute yv:-top-[16px] yv:left-1/2 yv:-translate-x-1/2"
-              width="33"
-              height="17"
-              viewBox="0 0 33 17"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <path d="M16.0215 0L32.0429 16.5H0L16.0215 0Z" fill="currentColor" />
-            </svg>
-          )}
+            {view.showCaret && (
+              <svg
+                className="yv:text-card yv:absolute yv:-top-[16px] yv:left-1/2 yv:-translate-x-1/2"
+                width="33"
+                height="17"
+                viewBox="0 0 33 17"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path d="M16.0215 0L32.0429 16.5H0L16.0215 0Z" fill="currentColor" />
+              </svg>
+            )}
 
-          {/* Highlights UI is hidden entirely when the feature is off (flag off):
+            {/* Highlights UI is hidden entirely when the feature is off (flag off):
               only Copy / Share remain. */}
-          {highlightsEnabled && (
-            <>
-              <div
-                ref={setSwatchRow}
-                // `min-w-0` lets this flex child actually shrink below its
-                // content size so `overflow-x-auto` engages instead of widening
-                // the pill. `py-1 -my-1` gives the hover:scale-110 swatches
-                // vertical breathing room inside the (now-clipping) scroll box
-                // without shifting the row's resting position. Scrollbar hidden;
-                // the edge fade signals there's more to scroll.
-                className="yv:flex yv:items-center yv:gap-2 yv:min-w-0 yv:overflow-x-auto yv:scrollbar-hide yv:py-1 yv:-my-1"
-                style={scrollFadeMask(scrollFade)}
-                role="group"
-                aria-label={t('highlightColorsAriaLabel')}
-              >
-                {view.colorCircles.map(({ color, showRemove, key }) => (
-                  <ColorCircle
-                    key={key}
-                    color={color}
-                    showRemove={showRemove}
-                    theme={theme}
-                    label={showRemove ? t('clearHighlightAriaLabel') : t('applyHighlightAriaLabel')}
-                    onClick={() => (showRemove ? onClearHighlight(color) : onHighlight(color))}
-                  />
-                ))}
-              </div>
-
-              {/* Separator — never shrinks, so only the swatch row scrolls. */}
-              <div className="yv:w-px yv:h-8 yv:shrink-0 yv:bg-border" aria-hidden="true" />
-            </>
-          )}
+            {highlightsEnabled && (
+              <>
+                <div
+                  ref={setSwatchRow}
+                  // `min-w-0` lets this flex child actually shrink below its
+                  // content size so `overflow-x-auto` engages instead of widening
+                  // the pill. `py-1 -my-1` gives the hover:scale-110 swatches
+                  // vertical breathing room inside the (now-clipping) scroll box
+                  // without shifting the row's resting position. Scrollbar hidden;
+                  // the edge fade signals there's more to scroll.
+                  className="yv:flex yv:items-center yv:gap-2 yv:min-w-0 yv:overflow-x-auto yv:scrollbar-hide yv:py-1 yv:-my-1"
+                  style={scrollFadeMask(scrollFade)}
+                  role="group"
+                  aria-label={t('highlightColorsAriaLabel')}
+                >
+                  {view.colorCircles.map(({ color, showRemove, key }) => (
+                    <ColorCircle
+                      key={key}
+                      color={color}
+                      showRemove={showRemove}
+                      theme={theme}
+                      label={
+                        showRemove ? t('clearHighlightAriaLabel') : t('applyHighlightAriaLabel')
+                      }
+                      onClick={() => (showRemove ? onClearHighlight(color) : onHighlight(color))}
+                    />
+                  ))}
+                </div>
 
-          {/* Copy / Share stay pinned and fully visible; only the swatch row
+                {/* Separator — never shrinks, so only the swatch row scrolls. */}
+                <div className="yv:w-px yv:h-8 yv:shrink-0 yv:bg-border" aria-hidden="true" />
+              </>
+            )}
+
+            {/* Copy / Share stay pinned and fully visible; only the swatch row
               scrolls when space is tight. */}
-          <div className="yv:flex yv:items-center yv:gap-1 yv:shrink-0">
-            <ActionButton
-              icon={<BoxStackIcon className="yv:size-5" />}
-              label={t('copy')}
-              onClick={onCopy}
-            />
-            <ActionButton
-              icon={<Share className="yv:size-5" />}
-              label={t('share')}
-              onClick={onShare}
-            />
-          </div>
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
+            <div className="yv:flex yv:items-center yv:gap-1 yv:shrink-0">
+              <ActionButton
+                icon={<BoxStackIcon className="yv:size-5" />}
+                label={t('copy')}
+                onClick={onCopy}
+              />
+              <ActionButton
+                icon={<Share className="yv:size-5" />}
+                label={t('share')}
+                onClick={onShare}
+              />
+            </div>
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      )}
     </PopoverPrimitive.Root>
   );
 };
diff --git a/packages/ui/src/lib/shadow-isolation.tsx b/packages/ui/src/lib/shadow-isolation.tsx
new file mode 100644
index 00000000..8c1492fb
--- /dev/null
+++ b/packages/ui/src/lib/shadow-isolation.tsx
@@ -0,0 +1,27 @@
+import {
+  createElement,
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type PropsWithoutRef,
+  type RefAttributes,
+} from 'react';
+import { ShadowRootHost } from './shadow-root-host';
+
+/** @internal Applies automatic isolation while preserving the component ref. */
+export function withShadowIsolation<P extends object, T>(
+  Implementation: ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>,
+  displayName: string,
+): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {
+  const Isolated = forwardRef<T, P>((props, ref) => {
+    const implementationProps: PropsWithoutRef<P> & RefAttributes<T> = {
+      ...props,
+      ref,
+    };
+
+    return (
+      <ShadowRootHost>{createElement(Implementation, implementationProps)}</ShadowRootHost>
+    );
+  });
+  Isolated.displayName = displayName;
+  return Isolated;
+}
diff --git a/packages/ui/src/lib/shadow-root-host.test.tsx b/packages/ui/src/lib/shadow-root-host.test.tsx
new file mode 100644
index 00000000..5a95c161
--- /dev/null
+++ b/packages/ui/src/lib/shadow-root-host.test.tsx
@@ -0,0 +1,157 @@
+import { StrictMode, useState } from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { ShadowRootHost, useShadowPortalTarget } from './shadow-root-host';
+
+function PortalRequester(): React.ReactNode {
+  const [open, setOpen] = useState(false);
+  useShadowPortalTarget(open);
+  return (
+    <button type="button" onClick={() => setOpen(true)}>
+      Open portal
+    </button>
+  );
+}
+
+describe('ShadowRootHost', () => {
+  it('attaches one shadow root under StrictMode', () => {
+    let container!: HTMLElement;
+    expect(() => {
+      ({ container } = render(
+        <StrictMode>
+          <ShadowRootHost>
+            <span>content</span>
+          </ShadowRootHost>
+        </StrictMode>,
+      ));
+    }).not.toThrow();
+
+    const host = container.querySelector<HTMLElement>('[data-yv-shadow-host]');
+    expect(host).not.toBeNull();
+    expect(host?.shadowRoot).not.toBeNull();
+    expect(host?.shadowRoot?.textContent).toContain('content');
+  });
+
+  it('stabilizes the host box while preserving only writing direction', () => {
+    const { container } = render(
+      <ShadowRootHost>
+        <span>content</span>
+      </ShadowRootHost>,
+    );
+
+    const host = container.querySelector<HTMLElement>('[data-yv-shadow-host]');
+    const wrapper = host?.shadowRoot?.querySelector<HTMLElement>(
+      '[data-yv-shadow-content-wrapper]',
+    );
+    expect(host).not.toBeNull();
+    expect(wrapper).not.toBeNull();
+    expect(host?.style.getPropertyValue('all')).toBe('initial');
+    expect(host?.style.getPropertyValue('display')).toBe('contents');
+    expect(host?.style.getPropertyValue('direction')).toBe('inherit');
+    expect(host?.style.getPropertyValue('writing-mode')).toBe('');
+    expect(host?.style.getPropertyValue('text-orientation')).toBe('');
+    expect(wrapper?.style.getPropertyValue('all')).toBe('initial');
+    expect(wrapper?.style.getPropertyValue('display')).toBe('contents');
+    expect(wrapper?.style.getPropertyValue('direction')).toBe('inherit');
+    expect(wrapper?.style.getPropertyValue('writing-mode')).toBe('');
+    expect(wrapper?.style.getPropertyValue('text-orientation')).toBe('');
+
+    // jsdom's cssstyle backing does not track priority for `all`
+    // or `direction` (real browsers do), so only `display` can assert
+    // getPropertyPriority here. The value-only checks above still prove
+    // direction was set.
+    expect(host?.style.getPropertyPriority('display')).toBe('important');
+  });
+
+  it('gives the fallback stylesheet a stable React resource identity', () => {
+    const { container } = render(
+      <ShadowRootHost>
+        <span>content</span>
+      </ShadowRootHost>,
+    );
+
+    const style = container
+      .querySelector<HTMLElement>('[data-yv-shadow-host]')
+      ?.shadowRoot?.querySelector('style');
+
+    // jsdom does not implement constructable stylesheets, so this exercises
+    // the fallback path. React uses href + precedence to hoist and de-duplicate
+    // stylesheet resources within the shadow root.
+    expect(style?.getAttribute('data-href')).toBe('yv-sdk-shadow-styles');
+    expect(style?.getAttribute('data-precedence')).toBe('yv-sdk');
+  });
+
+  it('creates a local portal lazily only after an overlay requests one', async () => {
+    const { container } = render(
+      <>
+        <ShadowRootHost>
+          <span>leaf without overlays</span>
+        </ShadowRootHost>
+        <ShadowRootHost portalStrategy="local-inline">
+          <PortalRequester />
+        </ShadowRootHost>
+      </>,
+    );
+
+    const roots = Array.from(
+      container.querySelectorAll<HTMLElement>('[data-yv-shadow-host]'),
+      (host) => host.shadowRoot,
+    );
+    expect(roots).toHaveLength(2);
+    expect(roots[0]?.querySelector('[data-yv-shadow-inline-overlay]')).toBeNull();
+    expect(roots[1]?.querySelector('[data-yv-shadow-inline-overlay]')).toBeNull();
+
+    roots[1]?.querySelector<HTMLButtonElement>('button')?.click();
+
+    const localPortal = await waitFor(() => {
+      const element = roots[1]?.querySelector<HTMLElement>('[data-yv-shadow-inline-overlay]');
+      if (!element) throw new Error('local portal not created');
+      return element;
+    });
+    expect(localPortal.getRootNode()).toBe(roots[1]);
+    expect(roots[0]?.querySelector('[data-yv-shadow-inline-overlay]')).toBeNull();
+  });
+
+  it('does not require native Popover selectors when an inline portal unmounts', async () => {
+    const matchesDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'matches');
+    let view: ReturnType<typeof render> | undefined;
+
+    try {
+      Object.defineProperty(HTMLElement.prototype, 'matches', {
+        configurable: true,
+        writable: true,
+        value(this: HTMLElement, selector: string): boolean {
+          if (selector === ':popover-open') {
+            throw new DOMException('unsupported selector', 'SyntaxError');
+          }
+          return false;
+        },
+      });
+      view = render(
+        <ShadowRootHost portalStrategy="local-inline">
+          <PortalRequester />
+        </ShadowRootHost>,
+      );
+      const shadowRoot = view.container.querySelector<HTMLElement>('[data-yv-shadow-host]')?.shadowRoot;
+      shadowRoot?.querySelector<HTMLButtonElement>('button')?.click();
+      await waitFor(() => {
+        if (!shadowRoot?.querySelector('[data-yv-shadow-inline-overlay]')) {
+          throw new Error('inline portal not created');
+        }
+      });
+      const mountedView = view;
+      view = undefined;
+      expect(() => mountedView.unmount()).not.toThrow();
+    } finally {
+      try {
+        view?.unmount();
+      } finally {
+        if (matchesDescriptor) {
+          Object.defineProperty(HTMLElement.prototype, 'matches', matchesDescriptor);
+        } else {
+          Reflect.deleteProperty(HTMLElement.prototype, 'matches');
+        }
+      }
+    }
+  });
+});
diff --git a/packages/ui/src/lib/shadow-root-host.tsx b/packages/ui/src/lib/shadow-root-host.tsx
new file mode 100644
index 00000000..cf561be9
--- /dev/null
+++ b/packages/ui/src/lib/shadow-root-host.tsx
@@ -0,0 +1,350 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+declare const __YV_STYLES__: string;
+
+const sdkStyleSheets = new WeakMap<Document, CSSStyleSheet>();
+const SDK_SHADOW_STYLE_HREF = 'yv-sdk-shadow-styles';
+const SDK_SHADOW_STYLE_PRECEDENCE = 'yv-sdk';
+type ShadowPortalStrategy = 'local-inline' | 'local-top-layer';
+
+interface ShadowPortalController {
+  container: HTMLElement | null;
+  getLastFocusedElement: () => HTMLElement | null;
+  prepareOpen: (instanceId: string) => void;
+  requestClose: (instanceId: string) => void;
+  setModalPresent: (instanceId: string, present: boolean) => void;
+  restoreFocusWhenModalReleased: (target: HTMLElement) => void;
+}
+
+const ShadowPortalContext = createContext<ShadowPortalController | null>(null);
+
+/**
+ * @internal Registers one floating-content owner and returns its portal target.
+ * `undefined` means no local strategy is enabled; `null` means the lazy target
+ * is being prepared; an element means the caller can portal into it.
+ */
+export function useShadowPortalTarget(open: boolean): HTMLElement | null | undefined {
+  const controller = useContext(ShadowPortalContext);
+  const instanceId = useId();
+  const prepareOpen = controller?.prepareOpen;
+  const requestClose = controller?.requestClose;
+
+  useLayoutEffect(() => {
+    if (!open || !prepareOpen || !requestClose) return;
+
+    prepareOpen(instanceId);
+    return () => requestClose(instanceId);
+  }, [instanceId, open, prepareOpen, requestClose]);
+
+  return controller?.container;
+}
+
+/**
+ * @internal Keeps sibling shadow content inert while mounted modal UI is present
+ * and returns the host-owned focus restoration function.
+ */
+export function useShadowModalPresence(
+  present: boolean,
+): ShadowPortalController['restoreFocusWhenModalReleased'] | undefined {
+  const controller = useContext(ShadowPortalContext);
+  const instanceId = useId();
+  const setModalPresent = controller?.setModalPresent;
+
+  useLayoutEffect(() => {
+    if (!present || !setModalPresent) return;
+
+    setModalPresent(instanceId, true);
+    return () => setModalPresent(instanceId, false);
+  }, [instanceId, present, setModalPresent]);
+
+  return controller?.restoreFocusWhenModalReleased;
+}
+
+/** @internal Returns the most recent focus target from the component's non-overlay content. */
+export function useShadowFocusRestoreTarget(): (() => HTMLElement | null) | undefined {
+  return useContext(ShadowPortalContext)?.getLastFocusedElement;
+}
+
+/** @internal Returns the node's own ShadowRoot, or null when it isn't attached inside one. */
+export function getOwnShadowRoot(node: Node): ShadowRoot | null {
+  const root = node.getRootNode();
+  const ShadowRootConstructor = node.ownerDocument?.defaultView?.ShadowRoot;
+  return ShadowRootConstructor && root instanceof ShadowRootConstructor ? root : null;
+}
+
+/** @internal Checks an Element subtype against the node's owner realm. */
+export function isElementFromOwnerDocument<Kind extends 'Element' | 'HTMLElement'>(
+  value: EventTarget | null | undefined,
+  node: Node,
+  kind: Kind,
+): value is Kind extends 'HTMLElement' ? HTMLElement : Element {
+  const ownerWindow = node.ownerDocument?.defaultView;
+  const ElementConstructor = ownerWindow?.[kind];
+  return Boolean(ElementConstructor && value instanceof ElementConstructor);
+}
+
+function getStyleSheetConstructor(root: ShadowRoot): typeof CSSStyleSheet | undefined {
+  return root.ownerDocument.defaultView?.CSSStyleSheet;
+}
+
+function supportsAdoptedStyleSheets(root: ShadowRoot): boolean {
+  const StyleSheet = getStyleSheetConstructor(root);
+  if (!StyleSheet) return false;
+  return 'replaceSync' in StyleSheet.prototype && 'adoptedStyleSheets' in root;
+}
+
+function getOrCreateSdkStyleSheet(root: ShadowRoot): CSSStyleSheet {
+  const ownerDocument = root.ownerDocument;
+  const existing = sdkStyleSheets.get(ownerDocument);
+  if (existing) return existing;
+
+  const StyleSheet = getStyleSheetConstructor(root)!;
+  const sheet = new StyleSheet();
+  sheet.replaceSync(__YV_STYLES__);
+  sdkStyleSheets.set(ownerDocument, sheet);
+  return sheet;
+}
+
+function resetHost(host: HTMLDivElement): void {
+  // The host page can select this light-DOM element, including with !important.
+  // Inline author-important declarations establish the smallest stable box.
+  host.style.setProperty('all', 'initial', 'important');
+  host.style.setProperty('display', 'contents', 'important');
+  host.style.setProperty('direction', 'inherit', 'important');
+}
+
+function hidePopoverIfOpen(container: HTMLElement | null): void {
+  if (container?.hasAttribute('popover') && container.matches(':popover-open')) {
+    container.hidePopover();
+  }
+}
+
+interface ShadowRootHostProps {
+  children: ReactNode;
+  /** @internal Spike-only, mount-stable strategy; omit for leaves without overlays. */
+  portalStrategy?: ShadowPortalStrategy;
+}
+
+/** @internal Proof-of-concept primitive; not part of the public API. */
+export function ShadowRootHost({ children, portalStrategy }: ShadowRootHostProps): ReactNode {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const shadowRootRef = useRef<ShadowRoot | null>(null);
+  const portalContainerRef = useRef<HTMLElement | null>(null);
+  const portalObserverRef = useRef<MutationObserver | null>(null);
+  const activePortalIdsRef = useRef(new Set<string>());
+  const contentWrapperRef = useRef<HTMLDivElement | null>(null);
+  const presentModalIdsRef = useRef(new Set<string>());
+  const pendingFocusTargetRef = useRef<HTMLElement | null>(null);
+  const lastFocusedElementRef = useRef<HTMLElement | null>(null);
+  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const [needsStyleFallback, setNeedsStyleFallback] = useState(false);
+
+  const hideIfIdle = useCallback(
+    (): void => {
+      const container = portalContainerRef.current;
+      if (
+        portalStrategy !== 'local-top-layer' ||
+        !container ||
+        activePortalIdsRef.current.size > 0 ||
+        container.childElementCount > 0
+      ) {
+        return;
+      }
+
+      hidePopoverIfOpen(container);
+    },
+    [portalStrategy],
+  );
+
+  const ensurePortalContainer = useCallback((): HTMLElement => {
+    const existing = portalContainerRef.current;
+    if (existing) return existing;
+
+    const root = shadowRootRef.current;
+    if (!root || !portalStrategy) {
+      throw new Error('Shadow portal requested without an enabled component shadow root');
+    }
+
+    const container = root.ownerDocument.createElement('div');
+    container.setAttribute(
+      portalStrategy === 'local-top-layer'
+        ? 'data-yv-shadow-local-overlay'
+        : 'data-yv-shadow-inline-overlay',
+      '',
+    );
+    let observer: MutationObserver | null = null;
+    if (portalStrategy === 'local-top-layer') {
+      if (!('showPopover' in container) || !('hidePopover' in container)) {
+        throw new Error('The native Popover API is required for isolated floating content');
+      }
+      const MutationObserverConstructor = root.ownerDocument.defaultView?.MutationObserver;
+      if (!MutationObserverConstructor) {
+        throw new Error('MutationObserver is required for isolated floating content');
+      }
+      container.setAttribute('popover', 'manual');
+      observer = new MutationObserverConstructor(hideIfIdle);
+    }
+
+    root.append(container);
+    portalContainerRef.current = container;
+    setPortalContainer(container);
+    if (observer) {
+      observer.observe(container, { childList: true });
+      portalObserverRef.current = observer;
+    }
+    return container;
+  }, [hideIfIdle, portalStrategy]);
+
+  const prepareOpen = useCallback(
+    (instanceId: string): void => {
+      const container = ensurePortalContainer();
+      activePortalIdsRef.current.add(instanceId);
+      if (portalStrategy === 'local-top-layer' && !container.matches(':popover-open')) {
+        container.showPopover();
+      }
+    },
+    [ensurePortalContainer, portalStrategy],
+  );
+
+  const requestClose = useCallback(
+    (instanceId: string): void => {
+      activePortalIdsRef.current.delete(instanceId);
+      hideIfIdle();
+    },
+    [hideIfIdle],
+  );
+
+  const setModalPresent = useCallback(
+    (instanceId: string, present: boolean): void => {
+      const ids = presentModalIdsRef.current;
+      if (present) ids.add(instanceId);
+      else ids.delete(instanceId);
+
+      const wrapper = contentWrapperRef.current;
+      if (wrapper) wrapper.inert = ids.size > 0;
+      if (ids.size > 0) return;
+
+      const target = pendingFocusTargetRef.current;
+      pendingFocusTargetRef.current = null;
+      if (target?.isConnected) target.focus();
+    },
+    [],
+  );
+
+  const restoreFocusWhenModalReleased = useCallback((target: HTMLElement): void => {
+    if (presentModalIdsRef.current.size > 0) {
+      pendingFocusTargetRef.current = target;
+      return;
+    }
+
+    if (target.isConnected) target.focus();
+  }, []);
+
+  const getLastFocusedElement = useCallback(
+    (): HTMLElement | null => lastFocusedElementRef.current,
+    [],
+  );
+
+  const portalController = useMemo<ShadowPortalController | null>(
+    () =>
+      portalStrategy
+        ? {
+            container: portalContainer,
+            getLastFocusedElement,
+            prepareOpen,
+            requestClose,
+            setModalPresent,
+            restoreFocusWhenModalReleased,
+          }
+        : null,
+    [
+      portalContainer,
+      portalStrategy,
+      getLastFocusedElement,
+      prepareOpen,
+      requestClose,
+      restoreFocusWhenModalReleased,
+      setModalPresent,
+    ],
+  );
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+
+    // React StrictMode replays effects against the same DOM node. Reuse the
+    // live root so attachShadow is called only once.
+    const existingRoot = host.shadowRoot;
+    const root = existingRoot ?? host.attachShadow({ mode: 'open' });
+    shadowRootRef.current = root;
+    if (!existingRoot) {
+      resetHost(host);
+      if (supportsAdoptedStyleSheets(root)) {
+        root.adoptedStyleSheets = [getOrCreateSdkStyleSheet(root)];
+      } else {
+        setNeedsStyleFallback(true);
+      }
+    }
+    setShadowRoot(root);
+
+    return () => {
+      portalObserverRef.current?.disconnect();
+      portalObserverRef.current = null;
+      activePortalIdsRef.current.clear();
+      const container = portalContainerRef.current;
+      hidePopoverIfOpen(container);
+      container?.remove();
+      portalContainerRef.current = null;
+      presentModalIdsRef.current.clear();
+      pendingFocusTargetRef.current = null;
+      lastFocusedElementRef.current = null;
+      if (contentWrapperRef.current) contentWrapperRef.current.inert = false;
+    };
+  }, []);
+
+  return (
+    <div ref={hostRef} data-yv-shadow-host>
+      {shadowRoot
+        ? createPortal(
+            <ShadowPortalContext.Provider value={portalController}>
+              {needsStyleFallback ? (
+                <style href={SDK_SHADOW_STYLE_HREF} precedence={SDK_SHADOW_STYLE_PRECEDENCE}>
+                  {__YV_STYLES__}
+                </style>
+              ) : null}
+              {/* Host selectors cannot reach this reset boundary. */}
+              <div
+                ref={contentWrapperRef}
+                data-yv-shadow-content-wrapper
+                style={{ all: 'initial', direction: 'inherit', display: 'contents' }}
+                onFocusCapture={(event) => {
+                  if (
+                    isElementFromOwnerDocument(event.target, event.currentTarget, 'HTMLElement') &&
+                    event.currentTarget.contains(event.target)
+                  ) {
+                    lastFocusedElementRef.current = event.target;
+                  }
+                }}
+              >
+                {children}
+              </div>
+            </ShadowPortalContext.Provider>,
+            shadowRoot,
+          )
+        : null}
+    </div>
+  );
+}
diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css
index 216ea626..090d7f5b 100644
--- a/packages/ui/src/styles/global.css
+++ b/packages/ui/src/styles/global.css
@@ -53,6 +53,37 @@ layer(yv-sdk-fonts);
 @import '@youversion/platform-core/browser/styles/bible-reader.css' layer(yv-sdk-bible-reader);
 @import 'tw-animate-css';
 
+/* The light-DOM shadow host remains selectable by the consumer page. Prevent
+   hostile host-page rules from generating content around the isolated SDK UI.
+   For !important declarations on a shadow host, the shadow-tree declaration
+   outranks an outer author declaration by design. */
+:host::before,
+:host::after {
+  content: none !important;
+  display: none !important;
+}
+
+/* A shadow-local portal container can enter the native top layer without
+   becoming a full-screen hit target itself. Its Radix-owned children remain
+   interactive while the zero-sized container only supplies tree scope. */
+[data-yv-shadow-local-overlay] {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 0;
+  block-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: visible;
+  background: transparent;
+  pointer-events: none;
+}
+
+[data-yv-shadow-local-overlay] > * {
+  pointer-events: auto;
+}
+
 /* Untitled Serif has no @font-face here on purpose. Its stylesheet URL needs the
    consumer's app key, which this file cannot know — it is frozen into __YV_STYLES__ at
    build time. It is loaded instead by <YvFonts /> (src/lib/yv-fonts.tsx), rendered from
@@ -66,6 +97,10 @@ layer(yv-sdk-fonts);
 
 @layer yv-sdk-theme {
   [data-yv-sdk] {
+    /* Keep Tailwind and tw-animate-css spacing independent of host custom properties. */
+    --yv-spacing: 0.25rem;
+    --spacing: var(--yv-spacing);
+
     @theme inline {
       /* Untitled Serif is the brand serif, loaded from the gated Fonts API stylesheet
          endpoint by <YvFonts /> — see docs/adr/0004-adopt-untitled-serif-via-fonts-api.md.
diff --git a/packages/ui/src/test/dom-stubs.ts b/packages/ui/src/test/dom-stubs.ts
index 9e106bf7..469a891f 100644
--- a/packages/ui/src/test/dom-stubs.ts
+++ b/packages/ui/src/test/dom-stubs.ts
@@ -26,3 +26,9 @@ export function requireHtmlElement(node: Element | null): HTMLElement {
   }
   return node;
 }
+
+export function requireShadowRoot(container: ParentNode): ShadowRoot {
+  const host = container.querySelector<HTMLElement>('[data-yv-shadow-host]');
+  if (!host?.shadowRoot) throw new Error('shadow root not attached');
+  return host.shadowRoot;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8a69468a..02e22343 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -223,6 +223,9 @@ importers:
       '@radix-ui/react-accordion':
         specifier: 1.2.12
         version: 1.2.12(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+      '@radix-ui/react-compose-refs':
+        specifier: 1.1.2
+        version: 1.1.2(@types/react@19.1.2)(react@19.1.2)
       '@radix-ui/react-dialog':
         specifier: 1.1.15
         version: 1.1.15(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
@@ -274,6 +277,9 @@ importers:
       react-i18next:
         specifier: ^17.0.0
         version: 17.0.2(i18next@26.0.4(typescript@7.0.2))(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(typescript@7.0.2)
+      tabbable:
+        specifier: 6.5.0
+        version: 6.5.0
       tailwind-merge:
         specifier: 3.3.1
         version: 3.3.1
@@ -6132,6 +6138,9 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
+  tabbable@6.5.0:
+    resolution: {integrity: sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==}
+
   tagged-tag@1.0.0:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
@@ -12554,6 +12563,8 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
+  tabbable@6.5.0: {}
+
   tagged-tag@1.0.0: {}
 
   tailwind-merge@3.3.1: {}