diff --git a/.changeset/all-humans-leave.md b/.changeset/all-humans-leave.md
new file mode 100644
index 00000000..a845151c
--- /dev/null
+++ b/.changeset/all-humans-leave.md
@@ -0,0 +1,2 @@
+---
+---
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/fuzzy-spiders-check.md b/.changeset/fuzzy-spiders-check.md
new file mode 100644
index 00000000..df446eef
--- /dev/null
+++ b/.changeset/fuzzy-spiders-check.md
@@ -0,0 +1,5 @@
+---
+'@youversion/platform-react-ui': patch
+---
+
+Audit the compiled Shadow DOM stylesheet custom-property contract and fail builds on unexplained ambient references.
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/six-shrimps-stare.md b/.changeset/six-shrimps-stare.md
new file mode 100644
index 00000000..a845151c
--- /dev/null
+++ b/.changeset/six-shrimps-stare.md
@@ -0,0 +1,2 @@
+---
+---
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..a54cb786
--- /dev/null
+++ b/docs/adr/0007-prototype-shadow-dom-style-isolation.md
@@ -0,0 +1,171 @@
+# 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`. The completed YPE-5400 inventory,
+exact runtime-input exceptions, and compiled-CSS prevention guard are documented
+in the rollout plan.
+
+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
+
+- Client-side attachment emits an empty host from the server, hydrates that
+  host, and mounts isolated content after an effect attaches the shadow root.
+  This preserves React's ownership of the light-DOM tree and never exposes the
+  component internals to consuming-app CSS. It is the selected contract for the
+  prototype.
+- Rendering the component in the light DOM on the server and moving or
+  remounting it after hydration would make content visible sooner, but exposes
+  that first paint to consuming-app CSS and risks replacement, duplicate
+  content, and lost DOM identity during hydration.
+- Declarative Shadow DOM could provide isolated server content and an isolated
+  first paint. This spike did not identify a supported React 19.1
+  render-and-hydrate seam for the browser-created shadow tree, so adopting it
+  would require custom serialization and hydration behavior. It remains a
+  future option for a component that requires server-rendered content.
+- 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.
+
+## SSR and hydration contract
+
+`ShadowRootHost` is client-only. Its server markup is exactly an empty host:
+
+```html
+<div data-yv-shadow-host="true"></div>
+```
+
+The first client render matches that markup. After hydration, `useEffect`
+attaches or reuses one open shadow root, installs the SDK stylesheet, and then
+portals the component into that root. The component is not rendered in the
+light DOM, so hydration does not replace server content or create a duplicate.
+If constructable stylesheets are unavailable, the local `<style>` fallback and
+the component mount in the shadow root together. A same-origin iframe uses a
+stylesheet constructed for its own `Document`; it never adopts the parent
+document's sheet.
+
+The server contains no component content. If the browser paints before the
+effect runs, that paint is also empty; on a slow client, the user can see this
+empty state followed by the component appearing. If JavaScript does not run,
+the component never appears. No placeholder space is reserved, so mounting can
+move nearby content. Cumulative Layout Shift is a page-level result that also
+depends on the consuming app's layout; this prototype neither guarantees zero
+shift nor claims the delay is negligible.
+The [YPE-5354 first-paint research](../ype-5354-client-only-first-paint-research.md)
+records the measurement and reservation options for a future rollout decision.
+
+A forwarded component ref remains `null` during server rendering. It becomes
+available after the shadow content mounts and points to the real component
+element inside the shadow root, not to the light-DOM host. Before that mount,
+the component cannot receive focus or interaction.
+
+This contract must be accepted separately for every component selected for
+automatic isolation. A component that requires server content, no-JavaScript
+content, or a stable first-paint footprint cannot use this host unchanged.
+YPE-5356 owns that rollout policy, including whether a component needs reserved
+space, a product timing budget, or a different SSR strategy.
+
+## 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 client-only SSR and hydration behavior above is part of the component
+contract. 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..d7409a6b
--- /dev/null
+++ b/docs/shadow-dom-isolation-plan.md
@@ -0,0 +1,213 @@
+# 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. |
+| SSR and hydration | Focused React coverage verifies reuse of the exact empty server host, matching hydration without recoverable errors or duplicate content, and a null forwarded ref before the passive-effect mount. | Validated for the client-only prototype | Decide per rollout component whether a possibly empty first paint, layout shift, and no-JavaScript absence are acceptable. |
+| 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. |
+| Realistic same-page usage | YPE-5437 mounts, removes, and re-adds a 12-component mix in Normal and Strict Mode. Chromium coverage verifies exact host counts, rendered scripture content, and one shared stylesheet object across roots and remounts. A production-build comparison found a small warm-run mount-cost difference on one machine. | No shared-host blocker found | Repeat user-visible performance and compatibility checks for each component selected for rollout. |
+
+## 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.
+- Apply [ADR 0007's client-only SSR and hydration contract](adr/0007-prototype-shadow-dom-style-isolation.md#ssr-and-hydration-contract)
+  per rollout component. YPE-5356 decides whether its first-paint, layout, and
+  no-JavaScript limitations are acceptable for that component.
+- 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.
+- Keep the YPE-5400 custom-property contract and compiled-stylesheet prevention
+  guard green as component styles change. The audit below closes the known
+  ambient dependency; `all: initial` still does not reset custom properties.
+
+## Custom-property contract
+
+YPE-5400 audited authored UI CSS and TSX class inputs, the embedded core theme
+and Bible reader CSS, Tailwind and `tw-animate-css` inputs, and the resulting
+`packages/ui/dist/tailwind.css`. After removing an accidental `--radius`
+reference introduced by a test-only Tailwind class, the compiled stylesheet at
+the completion of YPE-5400 contained 201 declared or initialized names and 151
+referenced names. The declarations comprised 137 SDK-owned `--yv-*` names, 63
+generated `--tw-*` names, and the local `--spacing` compatibility alias.
+
+| Name or namespace | Classification and ownership |
+| --- | --- |
+| `--yv-*` | SDK-owned properties. The README's documented overrides are supported consumer inputs for light-DOM components under `[data-yv-sdk]`. They are not a public document-level override API for the automatically isolated `YouVersionAuthButton`. |
+| `--tw-*` | Tailwind and `tw-animate-css` implementation state that is declared or initialized in the compiled stylesheet. It is not a supported consumer input. |
+| `--spacing` | SDK-owned local compatibility alias for `--yv-spacing`, used by generated Tailwind utilities. |
+| Authored `--font-*`, `--color-*`, and `--radius-*` theme aliases | Compile-time Tailwind inputs that produce utilities backed by `--yv-*` values. They are not runtime consumer inputs. |
+| Exact `--radix-*` exceptions below | Third-party runtime inputs supplied inline by the corresponding Radix primitive. |
+| Exact cross-framework accordion exceptions below | Optional inputs in `tw-animate-css`'s fallback chain. The chain first checks the Radix value and ultimately falls back to `auto`. |
+| Any other reference-only name | Forbidden ambient dependency until it is locally supplied or added below with a reviewed owner and rationale. |
+
+The compiled guard has no namespace wildcards. These are its exact reviewed
+reference-only exceptions:
+
+| Property | Supplier and rationale |
+| --- | --- |
+| `--yv-reader-max-width` | `BibleCard` always supplies `none` inline so scripture fills its card content; other uses of the embedded or published reader CSS fall back to `65ch` when the property is unset. |
+| `--radix-accordion-content-height` | Radix Accordion supplies its measured content height inline. |
+| `--radix-popover-content-available-height` | Radix Popover supplies the available height inline. |
+| `--radix-popover-content-available-width` | Radix Popover supplies the available width inline. |
+| `--radix-popover-content-transform-origin` | Radix Popover supplies the transform origin inline. |
+| `--bits-accordion-content-height` | Optional `tw-animate-css` cross-framework fallback; the chain ends at `auto`. |
+| `--reka-accordion-content-height` | Optional `tw-animate-css` cross-framework fallback; the chain ends at `auto`. |
+| `--kb-accordion-content-height` | Optional `tw-animate-css` cross-framework fallback; the chain ends at `auto`. |
+| `--ngp-accordion-content-height` | Optional `tw-animate-css` cross-framework fallback; the chain ends at `auto`. |
+
+`scripts/verify-styles.js` parses the real compiled stylesheet and fails the UI
+build when a referenced custom-property name is neither declared/initialized
+there nor present in that exact allowlist. This is deliberately a name-level
+artifact check: a declaration somewhere in the stylesheet does not prove that
+the cascade makes it available to every selector. Focused contract tests and
+component tests preserve that boundary without pretending to perform full
+selector-reachability analysis.
+
+The source audit also found that `VerseActionPopover` assigns the source-only
+names `--tw-animate-duration` and `--tw-animate-easing`, while the installed
+animation CSS consumes differently named properties. Those inert assignments
+are not ambient stylesheet dependencies; their behavior change is tracked
+separately in YPE-5749.
+
+## 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.
+- Preserve YPE-5437's realistic-usage fixture as the shared-host regression
+  check. Its one-machine mount comparison is diagnostic, so selected rollout
+  components still need user-visible performance review in their intended
+  layouts.
+
+## 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, YPE-5436,
+and [YPE-5437](ype-5437-shadow-dom-realistic-usage.md) 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. Maintain YPE-5400's completed custom-property inventory and prevention guard.
+2. Reconcile YPE-5354's SSR/hydration decision, YPE-5355's overlay findings,
+   YPE-5436's consumer contract, and YPE-5437's realistic-usage result 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/docs/ype-5354-client-only-first-paint-research.md b/docs/ype-5354-client-only-first-paint-research.md
new file mode 100644
index 00000000..da2dff54
--- /dev/null
+++ b/docs/ype-5354-client-only-first-paint-research.md
@@ -0,0 +1,76 @@
+# YPE-5354: Client-only first paint and layout stability
+
+## Decision
+
+YPE-5354 accepts the existing client-only `ShadowRootHost` behavior without
+reserved space or a permanent layout-shift harness. It does not claim that the
+visible delay or layout shift is negligible. YPE-5356 decides per rollout
+component whether the limitations are acceptable and whether reservation or
+measurement is required.
+
+## Findings
+
+Layout shift and visible pop-in are different failures. A layout-shift score is
+produced when late content moves other visible content; inserting an element
+into unused space can score zero even though the element visibly appears later.
+The [CLS guidance](https://web.dev/articles/cls) and
+[Layout Instability specification](https://wicg.github.io/layout-instability/)
+define that behavior.
+
+`ShadowRootHost` emits an empty server host and renders its children after a
+passive effect ([source](../packages/ui/src/lib/shadow-root-host.tsx)). React
+effects run only on the client, and a non-interaction effect may run after the
+browser paints. A slow client can therefore display an empty state before the
+component appears. Changing to `useLayoutEffect` would not supply server
+geometry or make JavaScript arrive sooner.
+[React documents both effect timings](https://react.dev/reference/react/useEffect#caveats).
+
+The Core Web Vitals CLS threshold of `0.1` applies to the complete page at the
+75th percentile, split between mobile and desktop. It is not an allowance for
+one SDK component. The SDK can test attributable movement in named layouts, but
+consuming applications still own field CLS for the full page.
+
+## Reservation feasibility
+
+The built-in `default` and `short` auth buttons use the shared `lg` height of
+`2.5rem`. The built-in `icon` button uses automatic height with `0.75rem`
+padding around the shared button's `size-6` (`1.5rem`) logo. These are
+variant-specific defaults, not universal geometry: the public `className` can
+override them.
+([auth button source](../packages/ui/src/components/YouVersionAuthButton.tsx),
+[shared button source](../packages/ui/src/components/ui/button.tsx))
+
+Width is less predictable. It varies with authentication state, locale, the
+public `text` prop, and font metrics. The button does not wrap, so a fixed inline
+reservation would either leave blank space or fail for supported inputs.
+Reserving built-in block size could prevent vertical movement in a stacked
+layout, but it would not prevent horizontal movement in a navigation row.
+
+The server currently emits a normal empty `div`; the client changes it to
+`display: contents` when the shadow root attaches. Any reservation must be
+present in server markup and remain a box through the first client render.
+Adding dimensions in the existing effect is too late. A reserved host would
+revise the exact server-markup contract in ADR 0007 and would need its own
+compatibility validation.
+
+Official guidance recommends reserving space for late content. When exact size
+is unknown, a likely-size placeholder can reduce movement but may leave blank
+space or allow residual shift.
+[web.dev documents this tradeoff](https://web.dev/articles/optimize-cls#reserve-space-for-late-loading-content).
+
+## Evidence needed if layout stability becomes a rollout requirement
+
+A focused browser proof should:
+
+1. Serve real SSR output with the shadow host between stable witness elements.
+2. Capture witness geometry and `layout-shift` entries before hydration starts.
+3. Measure the empty-host interval separately, because CLS cannot detect pop-in.
+4. Cover representative vertical and horizontal layouts for the selected
+   component rather than claim a package-wide result.
+5. Include an unreserved negative control that demonstrably moves a witness.
+
+The component-level target should be zero attributable shift in those named
+layouts, with a small geometry tolerance only for browser rounding. No web
+standard defines a universal acceptable delay before one hydrated component
+appears, so any timing limit must be a product-owned budget selected during
+rollout. A zero CLS result alone does not close the visible-pop-in limitation.
diff --git a/docs/ype-5437-shadow-dom-realistic-usage.md b/docs/ype-5437-shadow-dom-realistic-usage.md
new file mode 100644
index 00000000..9af8a125
--- /dev/null
+++ b/docs/ype-5437-shadow-dom-realistic-usage.md
@@ -0,0 +1,66 @@
+# YPE-5437: Shadow DOM realistic usage
+
+## Recommendation
+
+The shared `ShadowRootHost` is reliable enough for YPE-5356 to continue defining
+the rollout policy. This spike found no shared-host blocker. It does not approve
+automatic isolation for any additional public component; each rollout candidate
+still needs its own compatibility, browser, accessibility, and performance review.
+
+## Browser fixture
+
+The production Storybook fixture renders 12 real UI components together:
+
+- one `BibleReader`;
+- two `BibleCard` instances;
+- two `VerseOfTheDay` instances;
+- two `ProfileAvatar` instances;
+- three `Textarea` instances; and
+- two `Separator` instances.
+
+This mix represents a content page with repeated scripture, profile, and form
+UI without inventing a stress-only component count. `YouVersionAuthButton` is
+not included because it already creates its own boundary; wrapping it would
+test nested isolation instead of the shared-host usage in question.
+
+The Normal and Strict Mode stories mount, remove, and re-add the complete mix.
+Focused Chromium coverage verifies that every cycle has exactly 12 hosts and
+component-specific output in each root, including scripture content, avatar
+labels, textarea values, and separators. The lifecycle produces no console
+errors. It also verifies that every `ShadowRootHost` in the Storybook document
+adopts the exact same `CSSStyleSheet` object, including after the complete mix
+is removed and re-added.
+
+## Mount-cost observation
+
+For the one-time comparison, a temporary harness rendered the same mix either
+through `ShadowRootHost` or directly under `[data-yv-sdk]`. It measured from the
+action that started a fresh keyed mount through the layout-effect commit of the
+final fixture item. API hook results and the font response were stubbed locally,
+so the observation was about mounting the component tree rather than network
+response time. The timing harness was removed after the observations were
+captured; it is not a permanent benchmark.
+
+The production Storybook build was served locally and exercised in headless
+Chromium 141.0.7390.37. Separate fresh pages captured each cold observation.
+After one warm-up of each mode, six alternating observations produced:
+
+| Mode | Observations (ms) | Median |
+| --- | --- | --- |
+| Isolated | 147.6 cold; 19.5, 19.1, 16.4, 17.9, 16.3, 15.9 warm | 17.2 warm |
+| Without isolation | 53.4 cold; 15.4, 13.7, 12.0, 12.8, 12.4, 11.6 warm | 12.6 warm |
+
+The cold isolated observation includes the document's one-time shared
+stylesheet construction. Warm observations show a small single-digit
+millisecond difference on this machine, with no errors or growth in stylesheet
+instances. That is not a product performance budget or a broad device result,
+so the comparison remains a manual diagnostic rather than a CI threshold.
+
+## Handoff to YPE-5356
+
+No focused follow-up ticket is needed from this spike. YPE-5356 can proceed on
+the basis that the shared host handles this realistic same-document quantity,
+reuses its stylesheet, removes every host, and re-adds the correct mix without
+console errors in Normal and Strict Mode. Rollout decisions must still evaluate
+the selected component's public contract and user-visible performance in its
+intended layout.
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/core/src/index.ts b/packages/core/src/index.ts
index 0d82dbf5..8fbd6f93 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -26,10 +26,7 @@ export { LanguagesClient } from './languages';
 export { getLanguage } from './languages-language';
 export { getLanguages, type GetLanguagesOptions } from './languages-list';
 export { SearchClient, type SearchVersesOptions } from './search';
-export {
-  getSuggestedQueries,
-  getTrendingQueries,
-} from './search-queries';
+export { getSuggestedQueries, getTrendingQueries } from './search-queries';
 export { searchVerses } from './search-verses';
 export { searchTopics } from './search-topics';
 export { isValidStructuralUsfmReference } from './schemas/search';
diff --git a/packages/ui/AGENTS.md b/packages/ui/AGENTS.md
index ba89ae41..6a3383bb 100644
--- a/packages/ui/AGENTS.md
+++ b/packages/ui/AGENTS.md
@@ -40,7 +40,16 @@ export — treat those two as public API and breaking-change territory.
 **React 19 `<style precedence>`**: `YouVersionProvider` renders `<YvStyles />` (`href="yv-sdk-styles"`). That sheet is Provider chrome (`dist/chrome.css`). Scripture and interactive roots render `<YvComponentStyles />` (`href="yv-sdk-components"`, the full `dist/tailwind.css`) and `BibleTextView` also renders `<YvReaderStyles />`. The three injectors are separate modules so Provider does not import the fat sheets. Different hrefs so React 19 does not drop the fat sheet. React hoists, dedupes, and streams the tags.
 - CSS embedded via tsup define: chrome → `__YV_STYLES__`, full utilities → `__YV_COMPONENT_STYLES__`, reader → `__YV_READER_STYLES__`
 - Public stylesheet stays `import '@youversion/platform-react-ui/styles.css'` (`dist/styles.css`: utilities plus reader). JS still injects the three sheets separately.
-- Each component includes a `data-yv-sdk` attribute on its root element for style scoping (consumers don't need to add this)
+- Shadow DOM exception: `ShadowRootHost` installs the embedded component 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, remain in `src/styles/global.css` so they pass
+  through the standard component build and embedding path.
+- 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 f0646cd4..170e4ac4 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -52,6 +52,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",
@@ -67,6 +68,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"
@@ -94,6 +96,7 @@
     "@vitest/browser-playwright": "4.0.4",
     "@vitest/coverage-v8": "4.0.4",
     "concurrently": "9.2.1",
+    "css-tree": "^3.2.1",
     "dotenv-cli": "7.4.2",
     "jsdom": "27.0.1",
     "markdown-to-jsx": "^9.6.1",
diff --git a/packages/ui/scripts/custom-property-contract.d.ts b/packages/ui/scripts/custom-property-contract.d.ts
new file mode 100644
index 00000000..30914c00
--- /dev/null
+++ b/packages/ui/scripts/custom-property-contract.d.ts
@@ -0,0 +1,7 @@
+export interface CustomPropertyAudit {
+  declarations: string[];
+  references: string[];
+  unexplainedReferences: string[];
+}
+
+export function auditCustomProperties(css: string): CustomPropertyAudit;
diff --git a/packages/ui/scripts/custom-property-contract.js b/packages/ui/scripts/custom-property-contract.js
new file mode 100644
index 00000000..8e326449
--- /dev/null
+++ b/packages/ui/scripts/custom-property-contract.js
@@ -0,0 +1,70 @@
+import { parse, walk } from 'css-tree';
+
+const referenceOnlyExceptions = new Set([
+  // SDK-owned component input
+  '--yv-reader-max-width',
+  // Third-party runtime inputs
+  '--radix-accordion-content-height',
+  '--radix-popover-content-available-height',
+  '--radix-popover-content-available-width',
+  '--radix-popover-content-transform-origin',
+  // Third-party generated fallback inputs
+  '--bits-accordion-content-height',
+  '--reka-accordion-content-height',
+  '--kb-accordion-content-height',
+  '--ngp-accordion-content-height',
+]);
+
+function sorted(values) {
+  return [...values].sort();
+}
+
+/**
+ * Inventory custom-property names in one compiled stylesheet.
+ *
+ * This is intentionally a name-level check: a declaration or @property
+ * registration explains a reference, but does not prove selector-level cascade
+ * reachability. The reviewed exceptions cover reference-only runtime inputs.
+ */
+export function auditCustomProperties(css) {
+  const ast = parse(css, { context: 'stylesheet', parseCustomProperty: true });
+  const declarations = new Set();
+  const references = new Set();
+
+  walk(ast, (node) => {
+    if (node.type === 'Declaration' && node.property.startsWith('--')) {
+      declarations.add(node.property);
+      return;
+    }
+
+    if (node.type === 'Atrule' && node.name.toLowerCase() === 'property') {
+      const name = node.prelude?.children.first;
+      const hasInitialValue =
+        node.block?.children.some(
+          (child) => child.type === 'Declaration' && child.property === 'initial-value',
+        ) ?? false;
+
+      if (name?.type === 'Identifier' && name.name.startsWith('--') && hasInitialValue) {
+        declarations.add(name.name);
+      }
+      return;
+    }
+
+    if (node.type === 'Function' && node.name.toLowerCase() === 'var') {
+      const name = node.children.first;
+      if (name?.type === 'Identifier' && name.name.startsWith('--')) {
+        references.add(name.name);
+      }
+    }
+  });
+
+  const unexplainedReferences = [...references].filter(
+    (name) => !declarations.has(name) && !referenceOnlyExceptions.has(name),
+  );
+
+  return {
+    declarations: sorted(declarations),
+    references: sorted(references),
+    unexplainedReferences: sorted(unexplainedReferences),
+  };
+}
diff --git a/packages/ui/scripts/verify-styles.js b/packages/ui/scripts/verify-styles.js
index 5c42f860..dead2124 100644
--- a/packages/ui/scripts/verify-styles.js
+++ b/packages/ui/scripts/verify-styles.js
@@ -1,6 +1,7 @@
 import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { auditCustomProperties } from './custom-property-contract.js';
 import { stripLayerBlocks } from './strip-layer-blocks.js';
 
 const uiRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
@@ -41,6 +42,13 @@ if (!css.trim()) {
       'dist/tailwind.css missing -webkit-appearance:revert-layer on the unlayered A2 rule',
     );
   }
+
+  const { unexplainedReferences } = auditCustomProperties(css);
+  if (unexplainedReferences.length > 0) {
+    errors.push(
+      `dist/tailwind.css contains unexplained custom-property references: ${unexplainedReferences.join(', ')}. Add a local declaration or document an exact reviewed runtime exception in packages/ui/scripts/custom-property-contract.js`,
+    );
+  }
 }
 
 const readerCssPath = resolve(dist, 'bible-reader.css');
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..2a3c5fd1
--- /dev/null
+++ b/packages/ui/src/components/YouVersionAuthButton.shadow-isolation.stories.tsx
@@ -0,0 +1,220 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { http, HttpResponse } from 'msw';
+import { createRoot, type Root } 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 both stylesheet paths work 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"]');
+    const iframeDocument = iframe?.contentDocument;
+    const iframeWindow = iframeDocument?.defaultView;
+    if (!iframeDocument || !iframeWindow) {
+      throw new Error('same-origin iframe document not available');
+    }
+
+    const container = iframeDocument.createElement('div');
+    iframeDocument.body.append(container);
+    const root = createRoot(container);
+    let fallbackContainer: HTMLDivElement | undefined;
+    let fallbackRoot: Root | undefined;
+
+    try {
+      root.render(
+        <ShadowRootHost>
+          <span className="yv:flex" data-testid="iframe-content">
+            Isolated
+          </span>
+        </ShadowRootHost>,
+      );
+
+      await waitFor(() => {
+        const host = container.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(iframeDocument);
+        void expect(shadowRoot?.adoptedStyleSheets).toHaveLength(1);
+        void expect(shadowRoot?.adoptedStyleSheets[0]).toBeInstanceOf(iframeWindow.CSSStyleSheet);
+        void expect(iframeWindow.getComputedStyle(content).display).toBe('flex');
+      });
+
+      const styleSheetPrototype = iframeWindow.CSSStyleSheet.prototype;
+      const replaceSyncDescriptor = Object.getOwnPropertyDescriptor(
+        styleSheetPrototype,
+        'replaceSync',
+      );
+      if (!replaceSyncDescriptor?.configurable) {
+        throw new Error('iframe CSSStyleSheet.replaceSync cannot be disabled for fallback proof');
+      }
+
+      Reflect.deleteProperty(styleSheetPrototype, 'replaceSync');
+      try {
+        fallbackContainer = iframeDocument.createElement('div');
+        iframeDocument.body.append(fallbackContainer);
+        fallbackRoot = createRoot(fallbackContainer);
+        fallbackRoot.render(
+          <ShadowRootHost>
+            <span className="yv:flex" data-testid="iframe-fallback-content">
+              Fallback isolated
+            </span>
+          </ShadowRootHost>,
+        );
+
+        await waitFor(() => {
+          const fallbackHost =
+            fallbackContainer?.querySelector<HTMLDivElement>('[data-yv-shadow-host]');
+          const shadowRoot = fallbackHost?.shadowRoot;
+          const content = shadowRoot?.querySelector('[data-testid="iframe-fallback-content"]');
+          const style = shadowRoot?.querySelector('style');
+          if (!content || !style) throw new Error('iframe fallback content not mounted');
+          void expect(shadowRoot?.adoptedStyleSheets).toHaveLength(0);
+          void expect(style.getAttribute('data-href')).toBe('yv-sdk-shadow-styles');
+          void expect(style.getAttribute('data-precedence')).toBe('yv-sdk');
+          void expect(iframeWindow.getComputedStyle(content).display).toBe('flex');
+        });
+      } finally {
+        fallbackRoot?.unmount();
+        fallbackContainer?.remove();
+        Object.defineProperty(styleSheetPrototype, 'replaceSync', replaceSyncDescriptor);
+      }
+    } 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 8c85e921..e1d686c3 100644
--- a/packages/ui/src/components/YouVersionAuthButton.tsx
+++ b/packages/ui/src/components/YouVersionAuthButton.tsx
@@ -13,6 +13,7 @@ import { Button } from '../components/ui/button';
 import { YouVersionLogo } from './icons/youversion-logo';
 import { cn } from '../lib/utils';
 import { YvComponentStyles } from '@/lib/yv-styles-components';
+import { withShadowIsolation } from '../lib/shadow-isolation';
 
 interface SignInAuthProps {
   /**
@@ -112,7 +113,7 @@ export interface YouVersionAuthButtonProps
  * <YouVersionAuthButton scopes={['profile']}/>
  *
  */
-export const YouVersionAuthButton = React.forwardRef<HTMLButtonElement, YouVersionAuthButtonProps>(
+const YouVersionAuthButtonImpl = React.forwardRef<HTMLButtonElement, YouVersionAuthButtonProps>(
   (
     {
       background,
@@ -211,7 +212,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
@@ -244,7 +245,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',
@@ -268,4 +269,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 d403a9c3..9bc119c8 100644
--- a/packages/ui/src/components/bible-reader.stories.tsx
+++ b/packages/ui/src/components/bible-reader.stories.tsx
@@ -167,6 +167,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);
+  },
+};
+
 const rtlPassage = {
   id: 'JHN.1',
   content:
diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index e653560e..6f3abf93 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -1287,7 +1287,7 @@ export function BibleThemeSettingsContent({
         data-yv-sdk
         data-yv-theme={theme}
         dir={interfaceDirection}
-        className="yv:flex yv:flex-col yv:gap-4 yv:p-4"
+        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">
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 85b418fd..6e19b86c 100644
--- a/packages/ui/src/components/bible-version-picker.tsx
+++ b/packages/ui/src/components/bible-version-picker.tsx
@@ -1026,7 +1026,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/shadow-root-host-realistic-usage.stories.tsx b/packages/ui/src/components/shadow-root-host-realistic-usage.stories.tsx
new file mode 100644
index 00000000..ed4914d6
--- /dev/null
+++ b/packages/ui/src/components/shadow-root-host-realistic-usage.stories.tsx
@@ -0,0 +1,373 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { BibleBook, BibleVersion } from '@youversion/platform-core';
+import { YouVersionContext, type HookOverrides } from '@youversion/platform-react-hooks';
+import { http, HttpResponse } from 'msw';
+import { StrictMode, useCallback, useContext, useEffect, useState, type ReactNode } from 'react';
+import { expect, spyOn, userEvent, waitFor } from 'storybook/test';
+import { ShadowRootHost } from '../lib/shadow-root-host';
+import { BibleCard } from './bible-card';
+import { BibleReader } from './bible-reader';
+import { ProfileAvatar } from './profile-avatar';
+import { Separator } from './ui/separator';
+import { Textarea } from './ui/textarea';
+import { VerseOfTheDay } from './verse-of-the-day';
+
+const EXPECTED_COMPONENT_IDS = [
+  'reader',
+  'card-luke',
+  'card-john',
+  'votd-default',
+  'votd-large',
+  'avatar-primary',
+  'avatar-secondary',
+  'notes-primary',
+  'notes-secondary',
+  'notes-tertiary',
+  'separator-primary',
+  'separator-secondary',
+];
+
+const meta = {
+  title: 'Spikes/Shadow DOM realistic usage',
+  tags: ['integration'],
+  parameters: {
+    includeAuth: false,
+    layout: 'fullscreen',
+    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>;
+
+const FIXTURE_BOOKS: BibleBook[] = [
+  {
+    id: 'JHN',
+    title: 'John',
+    full_title: 'The Gospel According to John',
+    canon: 'new_testament',
+    abbreviation: 'John',
+    chapters: [{ id: '1', title: '1', passage_id: 'JHN.1' }],
+  },
+];
+
+const FIXTURE_VERSION: BibleVersion = {
+  id: 111,
+  title: 'New International Version',
+  abbreviation: 'NIV',
+  localized_title: 'New International Version',
+  localized_abbreviation: 'NIV',
+  language_tag: 'en',
+  books: ['JHN'],
+  youversion_deep_link: 'https://bible.com/versions/111',
+};
+
+function fixturePassageContent(usfm: string): string {
+  return `<div class="p"><span class="yv-v" v="1"></span><span class="yv-vlbl">1</span>Fixture scripture content for ${usfm}.</div>`;
+}
+
+const HOOK_OVERRIDES = {
+  useBooks: () => ({
+    books: { data: FIXTURE_BOOKS, next_page_token: null },
+    loading: false,
+    error: null,
+    refetch: () => undefined,
+  }),
+  usePassage: ({ usfm }) => ({
+    passage: { id: usfm, content: fixturePassageContent(usfm), reference: usfm },
+    loading: false,
+    error: null,
+    refetch: () => undefined,
+  }),
+  useVersion: () => ({
+    version: FIXTURE_VERSION,
+    loading: false,
+    error: null,
+    refetch: () => undefined,
+  }),
+  useVerseOfTheDay: () => ({
+    data: { day: 1, passage_id: 'JHN.3.16' },
+    loading: false,
+    error: null,
+    refetch: () => undefined,
+  }),
+} satisfies HookOverrides;
+
+function FixtureProviders({ children }: { children: ReactNode }): ReactNode {
+  const parentContext = useContext(YouVersionContext);
+  const value = parentContext
+    ? { ...parentContext, hookOverrides: HOOK_OVERRIDES }
+    : { appKey: 'test', hookOverrides: HOOK_OVERRIDES };
+
+  return <YouVersionContext.Provider value={value}>{children}</YouVersionContext.Provider>;
+}
+
+interface FixtureItemProps {
+  children: ReactNode;
+  id: string;
+}
+
+function FixtureItem({ children, id }: FixtureItemProps): ReactNode {
+  const content = <div data-realistic-component={id}>{children}</div>;
+
+  return <ShadowRootHost>{content}</ShadowRootHost>;
+}
+
+function RealisticComponentMix(): ReactNode {
+  return (
+    <div
+      data-testid="realistic-component-mix"
+      style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}
+    >
+      <FixtureItem id="reader">
+        <BibleReader.Root
+          defaultBook="JHN"
+          defaultChapter="1"
+          defaultVersionId={111}
+          highlights={[]}
+        >
+          <BibleReader.Content />
+        </BibleReader.Root>
+      </FixtureItem>
+      <FixtureItem id="card-luke">
+        <BibleCard reference="LUK.1.39-45" versionId={111} highlights={[]} />
+      </FixtureItem>
+      <FixtureItem id="card-john">
+        <BibleCard reference="JHN.3.16" versionId={111} highlights={[]} />
+      </FixtureItem>
+      <FixtureItem id="votd-default">
+        <VerseOfTheDay versionId={111} dayOfYear={1} highlights={[]} />
+      </FixtureItem>
+      <FixtureItem id="votd-large">
+        <VerseOfTheDay versionId={111} dayOfYear={1} size="lg" highlights={[]} />
+      </FixtureItem>
+      <FixtureItem id="avatar-primary">
+        <ProfileAvatar name="SDK Reader" />
+      </FixtureItem>
+      <FixtureItem id="avatar-secondary">
+        <ProfileAvatar name="Bible Partner" />
+      </FixtureItem>
+      <FixtureItem id="notes-primary">
+        <Textarea defaultValue="Primary notes" />
+      </FixtureItem>
+      <FixtureItem id="notes-secondary">
+        <Textarea defaultValue="Secondary notes" />
+      </FixtureItem>
+      <FixtureItem id="notes-tertiary">
+        <Textarea defaultValue="Tertiary notes" />
+      </FixtureItem>
+      <FixtureItem id="separator-primary">
+        <Separator decorative={false} />
+      </FixtureItem>
+      <FixtureItem id="separator-secondary">
+        <Separator decorative={false} />
+      </FixtureItem>
+    </div>
+  );
+}
+
+type EffectPhase = 'setup' | 'cleanup';
+
+function EffectLifecycleProbe({
+  recordEffectPhase,
+}: {
+  recordEffectPhase: (phase: EffectPhase) => void;
+}): null {
+  useEffect(() => {
+    recordEffectPhase('setup');
+    return () => recordEffectPhase('cleanup');
+  }, [recordEffectPhase]);
+
+  return null;
+}
+
+function LifecycleHarness({ strict }: { strict: boolean }): ReactNode {
+  const [mounted, setMounted] = useState(false);
+  const [effectCounts, setEffectCounts] = useState({ setup: 0, cleanup: 0 });
+  const recordEffectPhase = useCallback((phase: EffectPhase): void => {
+    setEffectCounts((current) => ({ ...current, [phase]: current[phase] + 1 }));
+  }, []);
+  const mix = mounted ? (
+    <>
+      <EffectLifecycleProbe recordEffectPhase={recordEffectPhase} />
+      <RealisticComponentMix />
+    </>
+  ) : null;
+
+  return (
+    <main data-yv-sdk style={{ padding: '1.5rem' }}>
+      <button type="button" onClick={() => setMounted((current) => !current)}>
+        Toggle component mix
+      </button>
+      <span
+        data-testid="effect-lifecycle-counts"
+        data-effect-setup={effectCounts.setup}
+        data-effect-cleanup={effectCounts.cleanup}
+        hidden
+      />
+      {strict ? <StrictMode>{mix}</StrictMode> : mix}
+    </main>
+  );
+}
+
+interface MountedFixture {
+  hosts: HTMLElement[];
+  sheet: CSSStyleSheet;
+}
+
+function requireMountedFixture(canvasElement: HTMLElement): MountedFixture {
+  const hosts = Array.from(
+    canvasElement.ownerDocument.querySelectorAll<HTMLElement>('[data-yv-shadow-host]'),
+  );
+  void expect(hosts).toHaveLength(EXPECTED_COMPONENT_IDS.length);
+
+  const roots = hosts.map((host) => {
+    if (!host.shadowRoot) throw new Error('shadow root not attached');
+    return host.shadowRoot;
+  });
+  const componentIds = roots.map(
+    (root) =>
+      root.querySelector<HTMLElement>('[data-realistic-component]')?.dataset.realisticComponent,
+  );
+  void expect(componentIds).toEqual(EXPECTED_COMPONENT_IDS);
+
+  const components = new Map(
+    roots.map((root, index) => [
+      componentIds[index],
+      root.querySelector<HTMLElement>('[data-realistic-component]'),
+    ]),
+  );
+  const expectedPassages = new Map([
+    ['reader', 'JHN.1'],
+    ['card-luke', 'LUK.1.39-45'],
+    ['card-john', 'JHN.3.16'],
+    ['votd-default', 'JHN.3.16'],
+    ['votd-large', 'JHN.3.16'],
+  ]);
+  for (const [id, usfm] of expectedPassages) {
+    void expect(components.get(id)).toHaveTextContent(`Fixture scripture content for ${usfm}.`);
+  }
+  void expect(
+    components.get('avatar-primary')?.querySelector('[aria-label="SDK Reader"]'),
+  ).not.toBeNull();
+  void expect(
+    components.get('avatar-secondary')?.querySelector('[aria-label="Bible Partner"]'),
+  ).not.toBeNull();
+  void expect(components.get('notes-primary')?.querySelector('textarea')).toHaveValue(
+    'Primary notes',
+  );
+  void expect(components.get('notes-secondary')?.querySelector('textarea')).toHaveValue(
+    'Secondary notes',
+  );
+  void expect(components.get('notes-tertiary')?.querySelector('textarea')).toHaveValue(
+    'Tertiary notes',
+  );
+  void expect(
+    components.get('separator-primary')?.querySelector('[role="separator"]'),
+  ).not.toBeNull();
+  void expect(
+    components.get('separator-secondary')?.querySelector('[role="separator"]'),
+  ).not.toBeNull();
+
+  const sheet = roots[0]?.adoptedStyleSheets[0];
+  if (!sheet) throw new Error('shared SDK stylesheet not adopted');
+  for (const root of roots) {
+    void expect(root.adoptedStyleSheets).toHaveLength(1);
+    void expect(root.adoptedStyleSheets[0]).toBe(sheet);
+  }
+
+  return { hosts, sheet };
+}
+
+interface ExpectedEffectCounts {
+  firstMount: [setup: number, cleanup: number];
+  removal: [setup: number, cleanup: number];
+  secondMount: [setup: number, cleanup: number];
+}
+
+const NORMAL_EFFECT_COUNTS: ExpectedEffectCounts = {
+  firstMount: [1, 0],
+  removal: [1, 1],
+  secondMount: [2, 1],
+};
+
+const STRICT_EFFECT_COUNTS: ExpectedEffectCounts = import.meta.env.DEV
+  ? {
+      firstMount: [2, 1],
+      removal: [2, 2],
+      secondMount: [4, 3],
+    }
+  : NORMAL_EFFECT_COUNTS;
+
+function requireEffectCounts(
+  canvasElement: HTMLElement,
+  [setup, cleanup]: [setup: number, cleanup: number],
+): void {
+  const counts = canvasElement.querySelector('[data-testid="effect-lifecycle-counts"]');
+  void expect(counts).toHaveAttribute('data-effect-setup', String(setup));
+  void expect(counts).toHaveAttribute('data-effect-cleanup', String(cleanup));
+}
+
+async function exerciseLifecycle(
+  canvasElement: HTMLElement,
+  expectedEffectCounts: ExpectedEffectCounts,
+): Promise<void> {
+  const toggle = canvasElement.querySelector<HTMLButtonElement>('button');
+  if (!toggle) throw new Error('lifecycle toggle not rendered');
+  const consoleError = spyOn(console, 'error').mockImplementation(() => undefined);
+
+  try {
+    await userEvent.click(toggle);
+    const firstMount = await waitFor(() => {
+      const fixture = requireMountedFixture(canvasElement);
+      requireEffectCounts(canvasElement, expectedEffectCounts.firstMount);
+      return fixture;
+    });
+
+    await userEvent.click(toggle);
+    void expect(canvasElement.querySelectorAll('[data-yv-shadow-host]')).toHaveLength(0);
+    void expect(canvasElement.querySelector('[data-testid="realistic-component-mix"]')).toBeNull();
+    requireEffectCounts(canvasElement, expectedEffectCounts.removal);
+
+    await userEvent.click(toggle);
+    const secondMount = await waitFor(() => {
+      const fixture = requireMountedFixture(canvasElement);
+      requireEffectCounts(canvasElement, expectedEffectCounts.secondMount);
+      return fixture;
+    });
+    for (const host of secondMount.hosts) {
+      void expect(host.shadowRoot?.adoptedStyleSheets[0]).toBe(firstMount.sheet);
+    }
+    void expect(consoleError).not.toHaveBeenCalled();
+  } finally {
+    consoleError.mockRestore();
+  }
+}
+
+export const NormalLifecycle: Story = {
+  render: () => (
+    <FixtureProviders>
+      <LifecycleHarness strict={false} />
+    </FixtureProviders>
+  ),
+  play: async ({ canvasElement }) => {
+    await exerciseLifecycle(canvasElement, NORMAL_EFFECT_COUNTS);
+  },
+};
+
+export const StrictModeLifecycle: Story = {
+  render: () => (
+    <FixtureProviders>
+      <LifecycleHarness strict />
+    </FixtureProviders>
+  ),
+  play: async ({ canvasElement }) => {
+    await exerciseLifecycle(canvasElement, STRICT_EFFECT_COUNTS);
+  },
+};
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 2b972649..ed112e55 100644
--- a/packages/ui/src/components/ui/dialog.tsx
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -1,10 +1,60 @@
 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 { useInterfaceDirection } from '../../lib/direction';
+import { cn } from '@/lib/utils';
+import { useInterfaceDirection } from '@/lib/direction';
+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;
 
@@ -23,12 +73,31 @@ function DialogContent({
   className,
   theme = 'light',
   children,
+  onCloseAutoFocus,
+  ref,
   ...props
-}: DialogContentProps): React.ReactElement {
+}: DialogContentProps): React.ReactNode {
   const direction = useInterfaceDirection();
+  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',
@@ -36,8 +105,14 @@ function DialogContent({
         )}
       />
       <DialogPrimitive.Content
+        ref={contentRef}
         data-yv-sdk
         data-yv-theme={theme}
+        dir={direction}
+        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',
@@ -49,7 +124,6 @@ function DialogContent({
           'yv:data-[state=closed]:zoom-out-95 yv:data-[state=open]:zoom-in-95',
         )}
         {...props}
-        dir={direction}
       >
         {children}
       </DialogPrimitive.Content>
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..0e6da91b
--- /dev/null
+++ b/packages/ui/src/components/ui/input-group.test.tsx
@@ -0,0 +1,17 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { InputGroup, InputGroupAddon } from './input-group';
+
+it('uses the SDK-owned --yv-radius for kbd rounding', () => {
+  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)]');
+});
diff --git a/packages/ui/src/components/ui/input-group.tsx b/packages/ui/src/components/ui/input-group.tsx
index cb69dee1..d5bcd481 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 7ffdfb9a..c689327f 100644
--- a/packages/ui/src/components/ui/popover.tsx
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -2,16 +2,52 @@ import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { useTranslation } from 'react-i18next';
 import i18n from '@/i18n';
-import { useInterfaceDirection } from '@/lib/direction';
 import { Button } from './button';
+import { useShadowPortalState } from './use-shadow-portal-state';
 import { XIcon } from '../icons/x';
 
 import { cn } from '@/lib/utils';
+import { useInterfaceDirection } from '@/lib/direction';
+
+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({
@@ -40,22 +76,25 @@ function PopoverContent({
 }): React.ReactNode {
   const { t } = useTranslation(undefined, { i18n });
   const direction = useInterfaceDirection();
+  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
         data-yv-theme={theme}
+        dir={direction}
         align={align}
         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}
-        dir={direction}
       >
         {showHeader ? (
           <section
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 c3e3c914..0f69185c 100644
--- a/packages/ui/src/components/verse-action-popover.test.tsx
+++ b/packages/ui/src/components/verse-action-popover.test.tsx
@@ -1,7 +1,11 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { fillFor } from '@/test/highlights-test-utils';
+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 { InterfaceDirectionProvider } from '@/lib/direction';
+import { requireShadowRoot } from '@/test/dom-stubs';
+import { fillFor } from '@/test/highlights-test-utils';
 import {
   VerseActionPopover,
   HIGHLIGHT_COLORS,
@@ -24,16 +28,77 @@ function createDefaultProps() {
   };
 }
 
-describe('VerseActionPopover', () => {
-  const defaultProps = createDefaultProps();
+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)}
+        />
+      )}
+    </>
+  );
+}
 
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
+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)}
+      />
+    </>
+  );
+}
 
+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')
@@ -43,7 +108,7 @@ describe('VerseActionPopover', () => {
     });
 
     it('should render the six apply colors', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
 
       const applyButtons = screen
         .getAllByRole('button')
@@ -64,7 +129,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
@@ -81,7 +146,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')
@@ -92,7 +157,7 @@ describe('VerseActionPopover', () => {
     });
 
     it('should render popover with color buttons', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
 
       const dialog = screen.getByRole('dialog');
       expect(dialog).toBeTruthy();
@@ -107,14 +172,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);
@@ -124,14 +189,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);
@@ -147,7 +212,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -175,7 +240,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -202,7 +267,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -231,7 +296,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -259,7 +324,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -280,7 +345,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -313,7 +378,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -330,23 +395,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', () => {
@@ -357,7 +415,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -378,7 +436,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();
@@ -386,7 +444,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();
@@ -395,21 +453,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');
@@ -421,7 +479,7 @@ describe('VerseActionPopover', () => {
       const custom = 'aabbcc';
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={new Set([custom])}
           selectedVerses={[1]}
           highlightedVerses={{ 1: custom }}
@@ -436,7 +494,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' }}
@@ -454,7 +512,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')
@@ -478,7 +536,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -513,7 +571,7 @@ describe('VerseActionPopover', () => {
 
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           activeHighlights={activeHighlights}
           selectedVerses={selectedVerses}
           highlightedVerses={highlightedVerses}
@@ -554,7 +612,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] }}
@@ -567,7 +625,7 @@ describe('VerseActionPopover', () => {
     });
 
     it('apply swatches render no icon', () => {
-      render(<VerseActionPopover {...defaultProps} />);
+      render(<VerseActionPopover {...createDefaultProps()} />);
       applyButtons().forEach((btn) => {
         expect(btn.querySelector('svg')).toBeNull();
       });
@@ -581,29 +639,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]}
@@ -617,7 +675,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]}
@@ -632,7 +690,7 @@ describe('VerseActionPopover', () => {
       const custom = '000000';
       render(
         <VerseActionPopover
-          {...defaultProps}
+          {...createDefaultProps()}
           theme="light"
           activeHighlights={new Set([custom])}
           selectedVerses={[1]}
@@ -650,7 +708,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
@@ -661,7 +719,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');
@@ -671,7 +729,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'))!;
@@ -689,7 +747,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={{
@@ -706,9 +764,8 @@ describe('VerseActionPopover', () => {
       // No layout in jsdom → no mask at rest.
       expect(swatchRow.getAttribute('style') ?? '').not.toContain('linear-gradient');
 
-      // Fake a row whose first and last swatches both extend past its viewport,
-      // then fire a real scroll event. Only an attached handler will measure
-      // these rectangles and apply the mask.
+      // Fake a row clipped on both physical edges, then fire a real scroll
+      // event. Only an attached handler will measure it and apply the mask.
       const swatches = swatchRow.querySelectorAll('button');
       vi.spyOn(swatchRow, 'getBoundingClientRect').mockReturnValue(rect(100, 300));
       vi.spyOn(swatches[0]!, 'getBoundingClientRect').mockReturnValue(rect(80, 112));
@@ -726,7 +783,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]}
@@ -746,6 +803,197 @@ 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);
+});
+
 const viewport = rect(100, 300);
 const firstVisible = rect(100, 132);
 const lastVisible = rect(268, 300);
diff --git a/packages/ui/src/components/verse-action-popover.tsx b/packages/ui/src/components/verse-action-popover.tsx
index a2bc4e77..dc262a15 100644
--- a/packages/ui/src/components/verse-action-popover.tsx
+++ b/packages/ui/src/components/verse-action-popover.tsx
@@ -1,6 +1,14 @@
 'use client';
 
-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';
@@ -8,7 +16,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';
 import { useInterfaceDirection } from '@/lib/direction';
 import { YvComponentStyles } from '@/lib/yv-styles-components';
@@ -81,6 +95,15 @@ function scrollFadeMask({
   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;
@@ -193,6 +216,8 @@ export const VerseActionPopover: FC<VerseActionPopoverProps> = ({
 }) => {
   const { t } = useTranslation(undefined, { i18n });
   const direction = useInterfaceDirection();
+  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
@@ -201,7 +226,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
@@ -285,13 +318,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,
@@ -302,6 +336,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.
@@ -344,131 +423,169 @@ export const VerseActionPopover: FC<VerseActionPopoverProps> = ({
   return (
     <>
       <YvComponentStyles />
-      <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}
-            dir={direction}
-            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}
+              dir={direction}
+              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>
-            )}
-
-            {/* 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.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"
                 >
-                  {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" />
-              </>
-            )}
-
-            {/* Copy / Share stay pinned and fully visible; only the swatch row
+                  <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):
+              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" />
+                </>
+              )}
+
+              {/* 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..d53331b6
--- /dev/null
+++ b/packages/ui/src/lib/shadow-root-host.test.tsx
@@ -0,0 +1,224 @@
+import { createRef, forwardRef, StrictMode, useLayoutEffect, useState } from 'react';
+import { hydrateRoot, type Root } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { act, render, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { withShadowIsolation } from './shadow-isolation';
+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>
+  );
+}
+
+const IsolatedRefProbe = withShadowIsolation(
+  forwardRef<HTMLButtonElement>((_, ref) => (
+    <button ref={ref} type="button">
+      Isolated content
+    </button>
+  )),
+  'IsolatedRefProbe',
+);
+
+describe('ShadowRootHost', () => {
+  it('reuses the empty server host before making the forwarded ref available after shadow mount', async () => {
+    const buttonRef = createRef<HTMLButtonElement>();
+    const refsDuringInitialClientRender: Array<HTMLButtonElement | null> = [];
+
+    function HydrationProbe(): React.ReactNode {
+      useLayoutEffect(() => {
+        refsDuringInitialClientRender.push(buttonRef.current);
+      }, []);
+      return <IsolatedRefProbe ref={buttonRef} />;
+    }
+
+    const element = (
+      <StrictMode>
+        <HydrationProbe />
+      </StrictMode>
+    );
+    const serverMarkup = renderToString(element);
+
+    expect(serverMarkup).toBe('<div data-yv-shadow-host="true"></div>');
+    expect(buttonRef.current).toBeNull();
+
+    const container = document.createElement('div');
+    container.innerHTML = serverMarkup;
+    document.body.append(container);
+    const serverHost = container.firstElementChild;
+    const recoverableErrors: unknown[] = [];
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    let root: Root | undefined;
+
+    try {
+      await act(async () => {
+        root = hydrateRoot(container, element, {
+          onRecoverableError: (error) => recoverableErrors.push(error),
+        });
+      });
+
+      const hosts = container.querySelectorAll<HTMLElement>('[data-yv-shadow-host]');
+      expect(hosts).toHaveLength(1);
+      expect(hosts[0]).toBe(serverHost);
+      expect(hosts[0]?.childNodes).toHaveLength(0);
+      expect(hosts[0]?.shadowRoot?.querySelectorAll('button')).toHaveLength(1);
+      expect(refsDuringInitialClientRender.length).toBeGreaterThan(0);
+      expect(refsDuringInitialClientRender.every((value) => value === null)).toBe(true);
+      expect(buttonRef.current).toBe(hosts[0]?.shadowRoot?.querySelector('button'));
+      expect(recoverableErrors).toEqual([]);
+      expect(consoleError).not.toHaveBeenCalled();
+    } finally {
+      if (root) {
+        await act(async () => root?.unmount());
+      }
+      consoleError.mockRestore();
+      container.remove();
+    }
+  });
+
+  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..f50528ff
--- /dev/null
+++ b/packages/ui/src/lib/shadow-root-host.tsx
@@ -0,0 +1,351 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+declare const __YV_COMPONENT_STYLES__: string;
+declare const __YV_READER_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_COMPONENT_STYLES__}\n${__YV_READER_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_COMPONENT_STYLES__}\n${__YV_READER_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/custom-property-contract.test.ts b/packages/ui/src/styles/custom-property-contract.test.ts
new file mode 100644
index 00000000..92b09aca
--- /dev/null
+++ b/packages/ui/src/styles/custom-property-contract.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { auditCustomProperties } from '../../scripts/custom-property-contract.js';
+
+describe('auditCustomProperties', () => {
+  it('inventories declarations, registrations, and nested references structurally', () => {
+    const audit = auditCustomProperties(`
+      /* var(--comment-lookalike) */
+      @property --registered-duration {
+        syntax: "<time>";
+        inherits: false;
+        initial-value: 0s;
+      }
+      @property --uninitialized-input {
+        syntax: "*";
+        inherits: true;
+      }
+      .example {
+        --local-color: var(--registered-duration);
+        color: var(--local-color);
+        width: var(--outer-input, var(--inner-input, 1rem));
+        height: var(--uninitialized-input);
+        content: "var(--string-lookalike)";
+      }
+    `);
+
+    expect(audit.declarations).toEqual(['--local-color', '--registered-duration']);
+    expect(audit.references).toEqual([
+      '--inner-input',
+      '--local-color',
+      '--outer-input',
+      '--registered-duration',
+      '--uninitialized-input',
+    ]);
+    expect(audit.unexplainedReferences).toEqual([
+      '--inner-input',
+      '--outer-input',
+      '--uninitialized-input',
+    ]);
+  });
+
+  it('accepts exact reviewed exceptions and rejects a new ambient reference', () => {
+    const audit = auditCustomProperties(`
+      .reader { max-width: var(--yv-reader-max-width, 65ch); }
+      .popover { width: var(--radix-popover-content-available-width); }
+      .near-match { width: var(--radix-popover-content-available-width-extra); }
+      .unknown { border-radius: var(--radius); }
+    `);
+
+    expect(audit.unexplainedReferences).toEqual([
+      '--radius',
+      '--radix-popover-content-available-width-extra',
+    ]);
+  });
+});
diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css
index 6a173505..f0c1434f 100644
--- a/packages/ui/src/styles/global.css
+++ b/packages/ui/src/styles/global.css
@@ -54,6 +54,37 @@ layer(yv-sdk-fonts);
 
 @source '../components';
 
+/* 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
@@ -67,6 +98,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.
@@ -96,10 +131,23 @@ layer(yv-sdk-fonts);
       --color-border: var(--yv-border);
       --color-input: var(--yv-input);
       --color-ring: var(--yv-ring);
+      --color-chart-1: var(--yv-chart-1);
+      --color-chart-2: var(--yv-chart-2);
+      --color-chart-3: var(--yv-chart-3);
+      --color-chart-4: var(--yv-chart-4);
+      --color-chart-5: var(--yv-chart-5);
       --radius-sm: calc(var(--yv-radius) - 4px);
       --radius-md: calc(var(--yv-radius) - 2px);
       --radius-lg: var(--yv-radius);
       --radius-xl: calc(var(--yv-radius) + 4px);
+      --color-sidebar: var(--yv-sidebar);
+      --color-sidebar-foreground: var(--yv-sidebar-foreground);
+      --color-sidebar-primary: var(--yv-sidebar-primary);
+      --color-sidebar-primary-foreground: var(--yv-sidebar-primary-foreground);
+      --color-sidebar-accent: var(--yv-sidebar-accent);
+      --color-sidebar-accent-foreground: var(--yv-sidebar-accent-foreground);
+      --color-sidebar-border: var(--yv-sidebar-border);
+      --color-sidebar-ring: var(--yv-sidebar-ring);
     }
   }
 }
@@ -117,6 +165,18 @@ layer(yv-sdk-fonts);
   }
 }
 
+/* Verse selection — an underline under the selected verse's text. Sits in the
+   bible-reader layer alongside the `.yv-v` verse structure. Highlight fills are
+   applied as inline styles in verse.tsx (per-verse color), so they aren't here. */
+@layer yv-sdk-bible-reader {
+  [data-yv-sdk] .yv-v-selected {
+    text-decoration-line: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+    text-decoration-color: var(--yv-foreground);
+  }
+}
+
 @utility touch-hitbox {
   position: relative;
 
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 5338fbf1..fe5009a2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -226,6 +226,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)
@@ -277,6 +280,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
@@ -341,6 +347,9 @@ importers:
       concurrently:
         specifier: 9.2.1
         version: 9.2.1
+      css-tree:
+        specifier: ^3.2.1
+        version: 3.2.1
       dotenv-cli:
         specifier: 7.4.2
         version: 7.4.2
@@ -4047,6 +4056,10 @@ packages:
     resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -5228,6 +5241,9 @@ packages:
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
   media-typer@1.1.0:
     resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
     engines: {node: '>= 0.8'}
@@ -6135,6 +6151,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'}
@@ -6747,7 +6766,7 @@ snapshots:
     dependencies:
       '@asamuzakjp/nwsapi': 2.3.9
       bidi-js: 1.0.3
-      css-tree: 3.1.0
+      css-tree: 3.2.1
       is-potential-custom-element-name: 1.0.1
       lru-cache: 11.2.2
 
@@ -10427,6 +10446,11 @@ snapshots:
       mdn-data: 2.12.2
       source-map-js: 1.2.1
 
+  css-tree@3.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
   css.escape@1.5.1: {}
 
   cssesc@3.0.0: {}
@@ -10435,7 +10459,7 @@ snapshots:
     dependencies:
       '@asamuzakjp/css-color': 4.0.5
       '@csstools/css-syntax-patches-for-csstree': 1.0.14(postcss@8.5.6)
-      css-tree: 3.1.0
+      css-tree: 3.2.1
     transitivePeerDependencies:
       - postcss
 
@@ -11566,6 +11590,8 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
+  mdn-data@2.27.1: {}
+
   media-typer@1.1.0: {}
 
   meow@12.1.1: {}
@@ -12630,6 +12656,8 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
+  tabbable@6.5.0: {}
+
   tagged-tag@1.0.0: {}
 
   tailwind-merge@3.3.1: {}