diff --git a/.changeset/calm-browsers-test.md b/.changeset/calm-browsers-test.md
new file mode 100644
index 00000000..c4bef8ff
--- /dev/null
+++ b/.changeset/calm-browsers-test.md
@@ -0,0 +1,5 @@
+---
+'@youversion/platform-react-ui': patch
+---
+
+Preserve SDK spacing in Safari inside Shadow DOM and document roots by scoping the host CSS reset and inlining the fixed Tailwind spacing scale.
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
index 56e947c3..3f1b5a71 100644
--- a/.github/workflows/storybook.yml
+++ b/.github/workflows/storybook.yml
@@ -39,3 +39,37 @@ jobs:
           YVP_APP_KEY: ${{ secrets.YVP_APP_KEY }}
           STORYBOOK_YOUVERSION_API_HOST: ${{ secrets.YVP_API_HOST }}
           STORYBOOK_YOUVERSION_APP_KEY: ${{ secrets.STORYBOOK_YOUVERSION_APP_KEY }}
+
+  shadow-browser-tests:
+    name: Shadow DOM (${{ matrix.browser }})
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.56.1-noble
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [firefox, webkit]
+    env:
+      VITEST_BROWSER: ${{ matrix.browser }}
+      STORYBOOK_YOUVERSION_APP_KEY: ${{ secrets.STORYBOOK_YOUVERSION_APP_KEY }}
+      STORYBOOK_AUTH_REDIRECT_URL: ${{ secrets.STORYBOOK_AUTH_REDIRECT_URL }}
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm build
+
+      - name: Run Shadow DOM browser tests
+        run: cd packages/ui && pnpm run test:shadow-browser
+        env:
+          HOME: /root
diff --git a/docs/shadow-dom-consumer-compatibility.md b/docs/shadow-dom-consumer-compatibility.md
index 7f356783..b5f9d3fc 100644
--- a/docs/shadow-dom-consumer-compatibility.md
+++ b/docs/shadow-dom-consumer-compatibility.md
@@ -2,9 +2,9 @@
 
 ## 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`.
+This contract records cross-browser 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
@@ -30,7 +30,7 @@ exercise. They do not establish compatibility for every SDK component.
 | --- | --- | --- |
 | 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. |
+| An internal control resolves light-DOM `aria-labelledby` or `aria-describedby` ID references | Unsupported | The attributes remain present, but reflected element arrays are empty across the boundary in Chromium, Firefox, and Playwright WebKit. 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. |
@@ -38,7 +38,7 @@ exercise. They do not establish compatibility for every SDK component.
 | 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. |
+| Shadow-local ID relationships inside `BibleVersionPicker` | Supported in current browser evidence | `TopLayerEscapesClippingAndPreservesSemantics` verifies that the trigger and controlled panel remain in one root and Chromium, Firefox, and Playwright WebKit resolve their `aria-controls` relationship. This does not make cross-scope ID references supported. |
 
 ## Consumer risks
 
@@ -52,9 +52,14 @@ 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
+The focused Shadow DOM suite runs in Chromium, Firefox, and Playwright WebKit.
+All 22 current stories returned assertion-level success in local Safari 26.6.2
+through SafariDriver when each ran in a fresh browser session. A single
+long-lived SafariDriver session stalled on the sign-in dialog and verse action
+popover stories after 20 successes, so isolated sessions are required for this
+smoke setup. Actual Safari is not part of continuous integration. Real
+assistive technologies remain unverified. Reflected ARIA element properties
+demonstrate DOM relationship resolution, not announcements or other
 assistive-technology behavior.
 
 ## Input for YPE-5356
@@ -73,8 +78,9 @@ must:
   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 Firefox and WebKit coverage, define when to repeat actual-Safari
+  validation, and define required assistive-technology evidence rather than
+  treating browser DOM results as universal; and
 - preserve YPE-5355's separate ownership of nested and concurrent overlay
   behavior.
 
@@ -84,7 +90,7 @@ 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.
+The current ticket's actual-Safari smoke is recorded above. Recurring Safari 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
index 9856a782..d435624e 100644
--- a/docs/shadow-dom-isolation-plan.md
+++ b/docs/shadow-dom-isolation-plan.md
@@ -40,29 +40,45 @@ This is a working plan, not approval for package-wide rollout.
 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.
+existing peer overlay. Automated Firefox and Playwright WebKit coverage now
+exercises these journeys. All 22 focused stories returned assertion-level success
+in local Safari 26.6.2 through SafariDriver when each story used a fresh browser
+session. A single long-lived SafariDriver session stalled on the final two play
+functions; 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. |
+| Host CSS isolation | Hostile-CSS demos and focused browser coverage exercise element selectors, direction inheritance, vertical writing and typography resets, hostile custom properties, universal `!important` rules, host attacks, and generated pseudo-content. | Validated in Chromium, Firefox, Playwright WebKit, and local Safari 26.6.2 | 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. |
+| Owner-document handling | Focused coverage mounts into a same-origin iframe and verifies document-compatible stylesheet construction. | Validated in Chromium, Firefox, Playwright WebKit, and local Safari 26.6.2 | 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. |
+| 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, Firefox, Playwright WebKit, and local Safari 26.6.2 | Verify assistive-technology behavior and repeat actual-Safari checks for significant platform changes. |
 | 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. 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. |
+| Dialog relationships | Browser coverage resolves title and description relationships inside the component tree. | Validated in Chromium, Firefox, Playwright WebKit, and an isolated local Safari 26.6.2 run | 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, Firefox, Playwright WebKit, and an isolated local Safari 26.6.2 run | Verify assistive-technology behavior. |
+| 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. Verify assistive-technology behavior and repeat actual-Safari checks for significant platform changes. |
+| 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, Firefox, Playwright WebKit, and isolated local Safari 26.6.2 runs | Verify real screen-reader behavior. |
+| Consumer form participation | Browser 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 | Browser 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 | Peer-overlay coordination remains with YPE-5356; expand nested-overlay browser and assistive-technology validation during rollout. |
-| 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. |
+| Nested shadow roots | Coverage verifies basic rendering, recursive queries, and event retargeting at each boundary. | Supported for the validated basics | Peer-overlay coordination remains with YPE-5356; verify assistive-technology behavior and repeat actual-Safari checks for significant platform changes. |
+| Realistic same-page usage | YPE-5437 mounts, removes, and re-adds a 12-component mix in Normal and Strict Mode. Chromium, Firefox, Playwright WebKit, and local Safari 26.6.2 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. |
+
+Actual Safari 26.6.2 exposed a visual gap the initial focused assertions missed:
+the picker header and version rows lost their logical padding inside the shadow
+root. The unlayered host-CSS reset now applies only in document roots, where host
+selectors can reach SDK descendants. An isolated Safari rerun measured the
+expected `12px 16px` header and row padding, matching Chromium; the focused
+picker story now checks this spacing.
+
+The document-root hostile-CSS story also exposed a Safari spacing failure:
+variable-backed Tailwind padding resolved to zero through the unlayered
+`revert-layer` reset. The fixed SDK spacing scale is now inlined into generated
+utilities, and actual Safari and focused WebKit runs verify the SDK button and
+input padding while the host button remains overridden.
 
 ## Direct overlay inventory
 
@@ -89,7 +105,7 @@ decision. YPE-5356 owns whether and how to implement that coordination.
 - Resolve the YPE-5355 peer-dismissal gap before shipping concurrent peer
   overlays (YPE-5356). The decision must consider trigger-time peer dismissal
   and overlay order; ADR 0007 records the gap but does not select a coordination design.
-  Cross-browser and assistive-technology coverage still remain.
+  Recurring actual-Safari 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.
@@ -108,7 +124,7 @@ generated `--tw-*` names, and the local `--spacing` compatibility alias.
 | --- | --- |
 | `--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. |
+| `--spacing` | SDK-owned local compatibility alias for `--yv-spacing`, used by `tw-animate-css`. The fixed Tailwind spacing scale is inlined into generated 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`. |
@@ -148,7 +164,8 @@ separately in YPE-5749.
 - 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.
+  unsupported across tree scopes in current Chromium, Firefox, and Playwright
+  WebKit 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
@@ -179,9 +196,14 @@ separately in YPE-5749.
   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,
+- The focused Shadow DOM browser suite runs in Chromium, Firefox, and Playwright
+  WebKit. Playwright WebKit is not a substitute for testing actual Safari. All
+  22 current stories returned explicit success events in local Safari 26.6.2
+  when each ran in a fresh SafariDriver session. A single long-lived session
+  returned success for 20/22 and left the sign-in and verse-action play
+  functions pending. The cause of that session-dependent stall is unresolved;
+  repeat actual-Safari validation in isolated sessions.
+- Browser DOM relationship reflection is not a substitute for VoiceOver, NVDA,
   or other real assistive-technology verification.
 
 ## Research handoff and completion gate
diff --git a/packages/ui/.storybook/vitest.setup.ts b/packages/ui/.storybook/vitest.setup.ts
index c45f9760..ef35f1e5 100644
--- a/packages/ui/.storybook/vitest.setup.ts
+++ b/packages/ui/.storybook/vitest.setup.ts
@@ -1,5 +1,6 @@
 import { setProjectAnnotations } from '@storybook/react-vite';
 import { beforeEach } from 'vitest';
+import { isExpectedFontStylesheetEvent } from '../src/test/storybook-font-stylesheet';
 import * as previewAnnotations from './preview';
 
 const _annotations = setProjectAnnotations([previewAnnotations]);
@@ -16,6 +17,16 @@ Object.defineProperty(navigator, 'language', {
   configurable: true,
 });
 
+// React's precedence stylesheet resource rejects with the browser's generic
+// load Event when the optional Fonts API sheet is unavailable. Firefox exposes
+// that expected asset failure as an unhandled rejection; keep only that known
+// request from masking the story assertions.
+globalThis.addEventListener('unhandledrejection', (event) => {
+  if (event.reason instanceof Event && isExpectedFontStylesheetEvent(event.reason)) {
+    event.preventDefault();
+  }
+});
+
 beforeEach(() => {
   localStorage?.clear?.();
   sessionStorage?.clear?.();
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 170e4ac4..f27a2251 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -48,7 +48,8 @@
     "prepublishOnly": "YVP_PUBLISH_BUILD=true pnpm --filter @youversion/platform-core build && pnpm build && node ../../scripts/check-sdk-version-stamp.mjs core",
     "storybook": "pnpm build:css && pnpm build:storybook-css && concurrently \"node scripts/generate-i18n-resources.mjs --watch\" \"tailwindcss -i src/styles/chrome.css -o dist/chrome.css --watch\" \"tailwindcss -i src/styles/global.css -o dist/tailwind.css --watch\" \"tailwindcss -i src/styles/reader.css -o dist/bible-reader.css --watch\" \"node scripts/write-public-styles.js --watch\" \"storybook dev -p 6006\"",
     "build-storybook": "pnpm generate:i18n && pnpm build:css && pnpm build:storybook-css && storybook build",
-    "test:integration": "vitest run"
+    "test:integration": "vitest run",
+    "test:shadow-browser": "VITEST_STORY_TAG=shadow-dom,cross-browser vitest run --project storybook"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "1.2.12",
diff --git a/packages/ui/src/components/YouVersionAuthButton.shadow-isolation.stories.tsx b/packages/ui/src/components/YouVersionAuthButton.shadow-isolation.stories.tsx
index 2a3c5fd1..ca3ba71c 100644
--- a/packages/ui/src/components/YouVersionAuthButton.shadow-isolation.stories.tsx
+++ b/packages/ui/src/components/YouVersionAuthButton.shadow-isolation.stories.tsx
@@ -1,8 +1,9 @@
 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 { expect } from 'storybook/test';
 import { ShadowRootHost } from '../lib/shadow-root-host';
+import { waitFor, waitForElement } from '../test/storybook-dom';
 import { YouVersionAuthButton } from './YouVersionAuthButton';
 
 /**
@@ -35,6 +36,7 @@ const HOSTILE_CSS = `
 const meta = {
   title: 'Spikes/Automatic Shadow DOM isolation',
   component: YouVersionAuthButton,
+  tags: ['integration', 'shadow-dom'],
   parameters: {
     msw: {
       handlers: [
@@ -49,6 +51,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const browserWaitOptions = { timeout: 5_000 } as const;
+
 function buttonStyleSnapshot(button: HTMLButtonElement) {
   const ownerWindow = button.ownerDocument.defaultView;
   if (!ownerWindow) throw new Error('button owner window not available');
@@ -70,7 +74,6 @@ function buttonStyleSnapshot(button: HTMLButtonElement) {
 }
 
 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>
@@ -84,31 +87,34 @@ export const HostileGlobalButtonRule: Story = {
     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 control = await waitForElement<HTMLButtonElement>(
+      canvasElement,
+      '[data-testid="host-control"]',
+      'host control not rendered',
+      browserWaitOptions,
+    );
+    const host = await waitForElement<HTMLElement>(
+      canvasElement,
+      '[data-yv-shadow-host]',
+      'shadow host not rendered',
+      browserWaitOptions,
+    );
+    const shadowRoot = await waitFor(async () => {
+      if (!host.shadowRoot) throw new Error('shadow root not attached');
+      return host.shadowRoot;
+    }, browserWaitOptions);
+    const sdkButton = await waitForElement<HTMLButtonElement>(
+      shadowRoot,
+      '[data-testid="sdk-button"]',
+      'SDK button not rendered',
+      browserWaitOptions,
+    );
 
     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');
+    await expect(sdkBaseline.display).toBe('flex');
+    await expect(sdkBaseline.fontFamily).toContain('Inter');
 
     const style = ownerDocument.createElement('style');
     style.textContent = HOSTILE_CSS;
@@ -116,19 +122,21 @@ export const HostileGlobalButtonRule: Story = {
     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"');
+      await waitFor(async () => {
+        await expect(ownerWindow.getComputedStyle(control).backgroundColor).toBe(
+          'rgb(185, 28, 28)',
+        );
+        await 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');
+      await expect(ownerWindow.getComputedStyle(host, '::before').content).toBe('none');
+      await expect(ownerWindow.getComputedStyle(host, '::before').display).toBe('none');
+      await expect(ownerWindow.getComputedStyle(host, '::after').content).toBe('none');
+      await 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);
+      await expect(buttonStyleSnapshot(sdkButton)).toEqual(sdkBaseline);
     } finally {
       style.remove();
     }
@@ -136,16 +144,23 @@ export const HostileGlobalButtonRule: Story = {
 };
 
 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 iframe = await waitForElement<HTMLIFrameElement>(
+      canvasElement,
+      '[data-testid="iframe"]',
+      'same-origin iframe not rendered',
+      browserWaitOptions,
+    );
+    const { iframeDocument, iframeWindow } = await waitFor(async () => {
+      const currentDocument = iframe.contentDocument;
+      const currentWindow = currentDocument?.defaultView;
+      if (!currentDocument?.body || !currentWindow) {
+        throw new Error('same-origin iframe document not available');
+      }
+      return { iframeDocument: currentDocument, iframeWindow: currentWindow };
+    }, browserWaitOptions);
 
     const container = iframeDocument.createElement('div');
     iframeDocument.body.append(container);
@@ -162,16 +177,16 @@ export const SameOriginIframeDocument: Story = {
         </ShadowRootHost>,
       );
 
-      await waitFor(() => {
+      await waitFor(async () => {
         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');
-      });
+        await expect(host?.ownerDocument).toBe(iframeDocument);
+        await expect(shadowRoot?.adoptedStyleSheets).toHaveLength(1);
+        await expect(shadowRoot?.adoptedStyleSheets[0]).toBeInstanceOf(iframeWindow.CSSStyleSheet);
+        await expect(iframeWindow.getComputedStyle(content).display).toBe('flex');
+      }, browserWaitOptions);
 
       const styleSheetPrototype = iframeWindow.CSSStyleSheet.prototype;
       const replaceSyncDescriptor = Object.getOwnPropertyDescriptor(
@@ -195,18 +210,18 @@ export const SameOriginIframeDocument: Story = {
           </ShadowRootHost>,
         );
 
-        await waitFor(() => {
+        await waitFor(async () => {
           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');
-        });
+          await expect(shadowRoot?.adoptedStyleSheets).toHaveLength(0);
+          await expect(style.getAttribute('data-href')).toBe('yv-sdk-shadow-styles');
+          await expect(style.getAttribute('data-precedence')).toBe('yv-sdk');
+          await expect(iframeWindow.getComputedStyle(content).display).toBe('flex');
+        }, browserWaitOptions);
       } finally {
         fallbackRoot?.unmount();
         fallbackContainer?.remove();
diff --git a/packages/ui/src/components/YouVersionProvider.tsx b/packages/ui/src/components/YouVersionProvider.tsx
index c02b3ecc..3633b781 100644
--- a/packages/ui/src/components/YouVersionProvider.tsx
+++ b/packages/ui/src/components/YouVersionProvider.tsx
@@ -53,14 +53,16 @@ export function YouVersionProvider({
   // paint matches it. When locale is omitted, wait for the layout effect so SSR
   // stays on the English fallback instead of a request-time browser language.
   if (normalizedLocale) {
-    void syncSdkLanguage(normalizedLocale);
+    void syncSdkLanguage(normalizedLocale).catch(() => undefined);
   }
 
   useLayoutEffect(() => {
     let active = true;
-    void syncSdkLanguage(normalizedLocale).then((resolvedLocale) => {
-      if (active && !normalizedLocale) setBrowserLocale(resolvedLocale);
-    });
+    void syncSdkLanguage(normalizedLocale)
+      .then((resolvedLocale) => {
+        if (active && !normalizedLocale) setBrowserLocale(resolvedLocale);
+      })
+      .catch(() => undefined);
     return () => {
       active = false;
     };
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
index 74971ba3..55c6c96e 100644
--- a/packages/ui/src/components/bible-version-picker.shadow-isolation.stories.tsx
+++ b/packages/ui/src/components/bible-version-picker.shadow-isolation.stories.tsx
@@ -1,12 +1,13 @@
 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 { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { ShadowRootHost } from '../lib/shadow-root-host';
 import { globalHandlers } from '../test/mocks/handlers';
-import { waitForElement, waitForShadowRoot } from '../test/storybook-dom';
+import { waitFor, waitForElement, waitForShadowRoot } from '../test/storybook-dom';
 import { BibleVersionPicker } from './bible-version-picker';
 
 type PortalStrategy = 'local-inline' | 'local-top-layer';
@@ -53,14 +54,14 @@ function TwoPickersInOneIsland(): React.ReactNode {
 }
 
 function SameOriginIframeHarness(): React.ReactNode {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [iframeDocument, setIframeDocument] = useState<Document | null>(null);
   const [container, setContainer] = useState<HTMLElement | null>(null);
 
   useEffect(() => {
-    const iframeDocument = iframeRef.current?.contentDocument;
     if (!iframeDocument) return;
 
     const portalContainer = iframeDocument.createElement('div');
+    portalContainer.setAttribute('data-testid', 'iframe-portal-container');
     portalContainer.style.setProperty('display', 'grid');
     portalContainer.style.setProperty('min-block-size', '100vh');
     portalContainer.style.setProperty('place-items', 'center');
@@ -68,15 +69,16 @@ function SameOriginIframeHarness(): React.ReactNode {
     setContainer(portalContainer);
 
     return () => portalContainer.remove();
-  }, []);
+  }, [iframeDocument]);
 
   return (
     <>
       <iframe
-        ref={iframeRef}
         data-testid="iframe"
+        srcDoc="<!doctype html><html><head></head><body></body></html>"
         title="same-origin picker target"
         style={{ inlineSize: 800, blockSize: 600 }}
+        onLoad={(event) => setIframeDocument(event.currentTarget.contentDocument)}
       />
       {container
         ? createPortal(
@@ -93,7 +95,7 @@ function SameOriginIframeHarness(): React.ReactNode {
 const meta = {
   title: 'Spikes/BibleVersionPicker Shadow DOM isolation',
   component: IsolatedBibleVersionPicker,
-  tags: ['integration'],
+  tags: ['integration', 'shadow-dom'],
   parameters: {
     layout: 'centered',
     msw: {
@@ -117,7 +119,7 @@ async function getTrigger(root: ShadowRoot): Promise<HTMLElement> {
 async function openPicker(container: ParentNode) {
   const root = await waitForShadowRoot(container);
   const trigger = await getTrigger(root);
-  void expect(root.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
+  await expect(root.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
   await userEvent.click(trigger);
   const topLayer = await waitForElement<HTMLElement>(
     root,
@@ -129,7 +131,7 @@ async function openPicker(container: ParentNode) {
     '[data-slot="popover-content"]',
     'picker panel not rendered in local top layer',
   );
-  await waitFor(() => void expect(topLayer.matches(':popover-open')).toBe(true));
+  await waitFor(async () => await expect(topLayer.matches(':popover-open')).toBe(true));
   return { root, trigger, topLayer, panel };
 }
 
@@ -165,6 +167,17 @@ function typographySnapshot(element: HTMLElement, ownerWindow: Window) {
   };
 }
 
+async function expectLogicalPadding(
+  element: HTMLElement,
+  expected: { block: string; inline: string },
+): Promise<void> {
+  const style = getComputedStyle(element);
+  await expect(style.paddingBlockStart).toBe(expected.block);
+  await expect(style.paddingBlockEnd).toBe(expected.block);
+  await expect(style.paddingInlineStart).toBe(expected.inline);
+  await expect(style.paddingInlineEnd).toBe(expected.inline);
+}
+
 export const TopLayerEscapesClippingAndPreservesSemantics: Story = {
   render: () => (
     <div
@@ -182,35 +195,53 @@ export const TopLayerEscapesClippingAndPreservesSemantics: Story = {
     );
     const { root, trigger, topLayer, panel } = await openPicker(clippingContainer);
 
-    void expect(topLayer.getRootNode()).toBe(root);
-    void expect(panel.getRootNode()).toBe(root);
-    void expect(
+    await expect(topLayer.getRootNode()).toBe(root);
+    await expect(panel.getRootNode()).toBe(root);
+    const header = await waitForElement<HTMLElement>(
+      panel,
+      'section',
+      'picker header not rendered',
+    );
+    const versionHeading = await waitForElement<HTMLElement>(
+      panel,
+      '[data-testid="version-list"] h3',
+      'version heading not rendered',
+    );
+    const firstVersion = await waitForElement<HTMLElement>(
+      panel,
+      '[data-testid="version-list"] [data-slot="item"]',
+      'version row not rendered',
+    );
+    await expectLogicalPadding(header, { block: '12px', inline: '16px' });
+    await expectLogicalPadding(versionHeading, { block: '8px', inline: '16px' });
+    await expectLogicalPadding(firstVersion, { block: '12px', inline: '16px' });
+    await 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);
+    await 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);
+    await expect(panelRect.top).toBeGreaterThanOrEqual(16);
+    await expect(panelRect.left).toBeGreaterThanOrEqual(16);
+    await expect(panelRect.bottom).toBeLessThanOrEqual(viewport.innerHeight - 16);
+    await 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);
+    await expect(hit === panel || (hit !== null && panel.contains(hit))).toBe(true);
 
-    // SAFETY: Chromium exposes this reflected-ARIA draft property; the guard below verifies it.
+    // SAFETY: The reflected-ARIA property is still a draft; verify browser support before use.
     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]);
+    if (!reflectedControls) throw new Error('browser did not expose ariaControlsElements');
+    await expect(trigger.getAttribute('aria-controls')).toBe(panel.id);
+    await expect(reflectedControls).toEqual([panel]);
   },
 };
 
@@ -249,7 +280,7 @@ export const InlineControlIsClippedByItsAncestor: Story = {
       'clipping container not rendered',
     );
     const root = await waitForShadowRoot(clippingContainer);
-    void expect(root.querySelector('[data-yv-shadow-inline-overlay]')).toBeNull();
+    await expect(root.querySelector('[data-yv-shadow-inline-overlay]')).toBeNull();
     await userEvent.click(await getTrigger(root));
     const inlineContainer = await waitForElement<HTMLElement>(
       root,
@@ -264,14 +295,14 @@ export const InlineControlIsClippedByItsAncestor: Story = {
 
     const clippingRect = clippingContainer.getBoundingClientRect();
     const panelRect = panel.getBoundingClientRect();
-    void expect(panelRect.bottom).toBeGreaterThan(clippingRect.bottom + 1);
+    await 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(
+    await expect(visibleHit === panel || (visibleHit !== null && panel.contains(visibleHit))).toBe(
       true,
     );
 
@@ -280,7 +311,7 @@ export const InlineControlIsClippedByItsAncestor: Story = {
       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(
+    await expect(clippedHit === panel || (clippedHit !== null && panel.contains(clippedHit))).toBe(
       false,
     );
   },
@@ -296,15 +327,23 @@ export const StylingFocusDismissalAndRapidReopen: Story = {
     </div>
   ),
   play: async ({ canvasElement }) => {
-    const outsideControl = canvasElement.querySelector<HTMLButtonElement>(
+    const outsideControl = await waitForElement<HTMLButtonElement>(
+      canvasElement,
       '[data-testid="outside-control"]',
+      'outside control not rendered',
     );
-    if (!outsideControl) throw new Error('outside control not rendered');
     const { root, trigger, topLayer, panel } = await openPicker(canvasElement);
-    await waitFor(() => {
+    await waitFor(async () => {
       const focused = root.activeElement;
-      void expect(focused !== null && panel.contains(focused)).toBe(true);
+      await expect(focused !== null && panel.contains(focused)).toBe(true);
     });
+    const exitAnimationStyle = canvasElement.ownerDocument.createElement('style');
+    exitAnimationStyle.textContent = `
+      [data-slot='popover-content'][data-state='closed'] {
+        animation-duration: 400ms !important;
+      }
+    `;
+    root.append(exitAnimationStyle);
 
     const baseline = styleSnapshot(panel);
     const hostileStyle = canvasElement.ownerDocument.createElement('style');
@@ -321,23 +360,23 @@ export const StylingFocusDismissalAndRapidReopen: Story = {
     try {
       canvasElement.ownerDocument.head.append(hostileStyle);
       await waitFor(
-        () =>
-          void expect(getComputedStyle(outsideControl).backgroundColor).toBe('rgb(185, 28, 28)'),
+        async () =>
+          await expect(getComputedStyle(outsideControl).backgroundColor).toBe('rgb(185, 28, 28)'),
       );
-      void expect(styleSnapshot(panel)).toEqual(baseline);
+      await 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(async () => {
+      await expect(panel).toHaveAttribute('data-state', 'closed');
+      await expect(topLayer).toContainElement(panel);
+      await 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 waitFor(async () => {
+      await expect(topLayer.querySelector('[data-slot="popover-content"]')).toBeNull();
+      await expect(topLayer.matches(':popover-open')).toBe(false);
     });
 
     await userEvent.click(trigger);
@@ -346,9 +385,9 @@ export const StylingFocusDismissalAndRapidReopen: Story = {
       '[data-slot="popover-content"]',
       'picker panel did not reopen',
     );
-    await waitFor(() => {
+    await waitFor(async () => {
       const activeElement = root.activeElement;
-      void expect(activeElement !== null && reopenedPanel.contains(activeElement)).toBe(true);
+      await expect(activeElement !== null && reopenedPanel.contains(activeElement)).toBe(true);
     });
 
     const focused = root.activeElement;
@@ -357,16 +396,16 @@ export const StylingFocusDismissalAndRapidReopen: Story = {
       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 waitFor(async () => {
+      await expect(topLayer.matches(':popover-open')).toBe(true);
+      await 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);
+    await waitFor(async () => {
+      await expect(topLayer.querySelector('[data-slot="popover-content"]')).toBeNull();
+      await expect(topLayer.matches(':popover-open')).toBe(false);
+      await expect(root.activeElement).toBe(trigger);
     });
   },
 };
@@ -394,18 +433,18 @@ export const ProviderDirectionRejectsHostVisualValues: Story = {
     if (!hostControl) throw new Error('hostile inheritance control not rendered');
 
     const { root, trigger, panel } = await openPicker(canvasElement);
+    await waitFor(async () => await expect(trigger).toHaveTextContent('NIV'));
     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('ltr');
+    await expect(headingTypography.fontFamily).toContain('Inter');
+    await expect(ownerWindow.getComputedStyle(trigger).direction).toBe('rtl');
+    await expect(ownerWindow.getComputedStyle(wrapper).direction).toBe('ltr');
 
     await userEvent.click(within(panel).getByRole('button', { name: /select a language/i }));
     const languageTabs = await waitForElement<HTMLElement>(
@@ -423,8 +462,9 @@ export const ProviderDirectionRejectsHostVisualValues: Story = {
     }
     const languageTabsInlineSize = languageTabs.offsetWidth;
     const languageInputRadius = ownerWindow.getComputedStyle(languageInputGroup).borderRadius;
-    void expect(languageTabsInlineSize).toBe(languageTabsContainer.clientWidth - 32);
-    void expect(languageInputRadius).toBe('30px');
+    const panelGeometry = geometrySnapshot(panel);
+    await expect(languageTabsInlineSize).toBe(languageTabsContainer.clientWidth - 32);
+    await expect(languageInputRadius).toBe('30px');
 
     const hostileStyle = ownerDocument.createElement('style');
     hostileStyle.textContent = `
@@ -450,39 +490,41 @@ export const ProviderDirectionRejectsHostVisualValues: Story = {
 
     try {
       ownerDocument.head.append(hostileStyle);
-      await waitFor(() => {
+      await waitFor(async () => {
         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');
+        await expect(controlStyle.writingMode).toBe('vertical-rl');
+        await expect(controlStyle.textOrientation).toBe('upright');
+        await expect(controlStyle.color).toBe('rgb(185, 28, 28)');
+        await expect(controlStyle.fontFamily).toContain('fantasy');
+        await expect(controlStyle.fontSize).toBe('32px');
+        await expect(controlStyle.letterSpacing).toBe('16px');
+        await expect(controlStyle.lineHeight).toBe('96px');
+        await expect(controlStyle.wordSpacing).toBe('32px');
+        await 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('ltr');
-      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(
+      await expect(wrapperStyle.direction).toBe('ltr');
+      await expect(wrapperStyle.writingMode).toBe('horizontal-tb');
+      await expect(wrapperStyle.textOrientation).toBe('mixed');
+      await expect(headingStyle.direction).toBe('rtl');
+      await expect(headingStyle.writingMode).toBe('horizontal-tb');
+      await expect(headingStyle.textOrientation).toBe('mixed');
+      await expect(typographySnapshot(heading, ownerWindow)).toEqual(headingTypography);
+      await expect(panelStyle.getPropertyValue('--yv-spacing').trim()).toBe('.25rem');
+      await expect(panelStyle.getPropertyValue('--spacing').trim()).toBe('.25rem');
+      await expect(panelStyle.getPropertyValue('--yv-radius').trim()).toBe('2rem');
+      await expect(languageTabs.offsetWidth).toBe(languageTabsInlineSize);
+      await 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);
+      await waitFor(async () => {
+        await expect(geometrySnapshot(trigger)).toEqual(triggerGeometry);
+        await expect(geometrySnapshot(panel)).toEqual(panelGeometry);
+        await expect(geometrySnapshot(inputGroup)).toEqual(inputGeometry);
+      });
     } finally {
       hostileStyle.remove();
     }
@@ -506,8 +548,8 @@ export const MultiplePickersCreateIndependentLazyContainers: Story = {
     if (!first || !second) throw new Error('picker harness not rendered');
     const firstRoot = await waitForShadowRoot(first);
     const secondRoot = await waitForShadowRoot(second);
-    void expect(firstRoot.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
-    void expect(secondRoot.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
+    await expect(firstRoot.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
+    await expect(secondRoot.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
 
     const firstTrigger = await getTrigger(firstRoot);
     const secondTrigger = await getTrigger(secondRoot);
@@ -517,7 +559,7 @@ export const MultiplePickersCreateIndependentLazyContainers: Story = {
       '[data-yv-shadow-local-overlay]',
       'first local container not created',
     );
-    void expect(secondRoot.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
+    await expect(secondRoot.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
 
     await userEvent.click(secondTrigger);
     const secondTopLayer = await waitForElement<HTMLElement>(
@@ -525,10 +567,12 @@ export const MultiplePickersCreateIndependentLazyContainers: Story = {
       '[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);
+    await waitFor(async () => {
+      await expect(firstTopLayer.matches(':popover-open')).toBe(false);
+      await expect(secondTopLayer.matches(':popover-open')).toBe(true);
+      await expect(secondTopLayer.querySelectorAll('[data-slot="popover-content"]')).toHaveLength(
+        1,
+      );
     });
   },
 };
@@ -540,10 +584,10 @@ export const MultiplePopoversShareOneIslandContainer: Story = {
     const triggers = Array.from(
       root.querySelectorAll<HTMLElement>('[data-slot="popover-trigger"]'),
     );
-    void expect(triggers).toHaveLength(2);
+    await 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 expect(root.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
 
     await userEvent.click(firstTrigger);
     const topLayer = await waitForElement<HTMLElement>(
@@ -551,18 +595,18 @@ export const MultiplePopoversShareOneIslandContainer: Story = {
       '[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 waitFor(async () => {
+      await expect(firstTrigger).toHaveAttribute('aria-expanded', 'true');
+      await 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);
+    await waitFor(async () => {
+      await expect(firstTrigger).toHaveAttribute('aria-expanded', 'false');
+      await expect(secondTrigger).toHaveAttribute('aria-expanded', 'true');
+      await expect(topLayer.matches(':popover-open')).toBe(true);
+      await expect(topLayer.querySelectorAll('[data-slot="popover-content"]')).toHaveLength(1);
+      await expect(root.querySelectorAll('[data-yv-shadow-local-overlay]')).toHaveLength(1);
     });
 
     const panel = topLayer.querySelector<HTMLElement>('[data-slot="popover-content"]');
@@ -570,8 +614,8 @@ export const MultiplePopoversShareOneIslandContainer: Story = {
     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);
+    await expect(panelRect.top).toBeGreaterThanOrEqual(16);
+    await expect(panelRect.bottom).toBeLessThanOrEqual(viewport.innerHeight - 16);
   },
 };
 
@@ -624,16 +668,15 @@ export const PanelTracksAncestorScrollAndVersionListScrollsInternally: Story = {
     scrollAncestor.scrollTop += scrollDelta;
     scrollAncestor.dispatchEvent(new Event('scroll', { bubbles: true }));
 
-    await waitFor(() => {
+    await waitFor(async () => {
       const triggerRectAfter = trigger.getBoundingClientRect();
-      void expect(
+      const panelRectAfter = panel.getBoundingClientRect();
+      await expect(
         Math.abs(triggerRectAfter.top - (triggerRectBefore.top - scrollDelta)),
       ).toBeLessThan(2);
+      const offsetAfter = panelRectAfter.top - triggerRectAfter.bottom;
+      await expect(Math.abs(offsetAfter - offsetBefore)).toBeLessThanOrEqual(8);
     });
-    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
@@ -664,8 +707,8 @@ export const PanelTracksAncestorScrollAndVersionListScrollsInternally: Story = {
     scrollRegion.scrollTop = scrollRegion.scrollHeight;
     scrollRegion.dispatchEvent(new Event('scroll', { bubbles: true }));
 
-    await waitFor(() => {
-      void expect(scrollRegion.scrollTop).toBeGreaterThan(initialScrollTop);
+    await waitFor(async () => {
+      await expect(scrollRegion.scrollTop).toBeGreaterThan(initialScrollTop);
     });
 
     const lastItemRect = lastItem.getBoundingClientRect();
@@ -673,16 +716,26 @@ export const PanelTracksAncestorScrollAndVersionListScrollsInternally: Story = {
       lastItemRect.left + lastItemRect.width / 2,
       lastItemRect.top + lastItemRect.height / 2,
     );
-    void expect(hit === lastItem || (hit !== null && lastItem.contains(hit))).toBe(true);
+    await 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 waitForShadowRoot(iframe.contentDocument);
+    const { iframe, iframeDocument } = await waitFor(async () => {
+      const currentIframe =
+        canvasElement.querySelector<HTMLIFrameElement>('[data-testid="iframe"]');
+      const currentDocument = currentIframe?.contentDocument;
+      if (!currentIframe || !currentDocument) {
+        throw new Error('same-origin iframe document not available');
+      }
+      if (!currentDocument.querySelector('[data-testid="iframe-portal-container"]')) {
+        throw new Error('same-origin iframe portal container not mounted');
+      }
+      return { iframe: currentIframe, iframeDocument: currentDocument };
+    });
+    const componentRoot = await waitForShadowRoot(iframeDocument);
     const trigger = await getTrigger(componentRoot);
     await userEvent.click(trigger);
     const topLayer = await waitForElement<HTMLElement>(
@@ -690,7 +743,7 @@ export const SameOriginIframeTopLayerRemainsInteractive: Story = {
       '[data-yv-shadow-local-overlay]',
       'iframe top-layer container not created',
     );
-    const portalWrapper = await waitFor(() => {
+    const portalWrapper = await waitFor(async () => {
       const element = topLayer.firstElementChild;
       // SAFETY: A same-origin iframe exposes its realm's HTMLElement constructor on its Window.
       const frameWindow = iframe.contentWindow as
@@ -703,7 +756,7 @@ export const SameOriginIframeTopLayerRemainsInteractive: Story = {
     });
     const portalWindow = portalWrapper.ownerDocument.defaultView;
     if (!portalWindow) throw new Error('iframe portal window not available');
-    void expect(portalWindow.getComputedStyle(portalWrapper).pointerEvents).toBe('auto');
+    await expect(portalWindow.getComputedStyle(portalWrapper).pointerEvents).toBe('auto');
 
     const input = await waitForElement<HTMLInputElement>(
       topLayer,
@@ -711,14 +764,14 @@ export const SameOriginIframeTopLayerRemainsInteractive: Story = {
       'iframe picker input not rendered',
     );
     await userEvent.click(input);
-    void expect(componentRoot.activeElement).toBe(input);
+    await 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);
+    await expect(panelRect.top).toBeGreaterThanOrEqual(16);
+    await expect(panelRect.bottom).toBeLessThanOrEqual(frameWindow.innerHeight - 16);
   },
 };
diff --git a/packages/ui/src/components/consumer-compatibility.shadow-isolation.stories.tsx b/packages/ui/src/components/consumer-compatibility.shadow-isolation.stories.tsx
index 9d5dd458..db623487 100644
--- a/packages/ui/src/components/consumer-compatibility.shadow-isolation.stories.tsx
+++ b/packages/ui/src/components/consumer-compatibility.shadow-isolation.stories.tsx
@@ -1,16 +1,17 @@
 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 { expect, userEvent } from 'storybook/test';
 import { ShadowRootHost } from '../lib/shadow-root-host';
-import { waitForElement } from '../test/storybook-dom';
+import { waitFor, waitForElement } from '../test/storybook-dom';
 import { Textarea } from './ui/textarea';
 import { YouVersionAuthButton } from './YouVersionAuthButton';
 
 const meta = {
   title: 'Spikes/Shadow DOM consumer compatibility',
-  tags: ['integration'],
+  tags: ['integration', 'shadow-dom'],
   parameters: {
     layout: 'padded',
     msw: {
@@ -37,7 +38,7 @@ function requireElement<ElementType extends Element>(
 }
 
 async function requireShadowHost(container: ParentNode): Promise<HTMLElement> {
-  return waitFor(() => {
+  return waitFor(async () => {
     const host = requireElement<HTMLElement>(
       container,
       '[data-yv-shadow-host]',
@@ -165,12 +166,14 @@ 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 form = await waitFor(
+      () =>
+        requireElement<HTMLFormElement>(
+          canvasElement,
+          '[data-testid="consumer-form"]',
+          'consumer form not rendered',
+        ),
+      { timeout: 5_000 },
     );
     const label = requireElement<HTMLLabelElement>(
       canvasElement,
@@ -185,31 +188,31 @@ export const FormsAndExternalRelationshipsStopAtTheTreeScope: Story = {
       '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);
+    await expect(textarea.form).toBeNull();
+    await expect(form.elements.namedItem('notes')).toBeNull();
+    await expect(new FormData(form).has('notes')).toBe(false);
 
-    void expect(label.control).toBeNull();
+    await expect(label.control).toBeNull();
     await userEvent.click(label);
-    void expect(root.activeElement).not.toBe(textarea);
+    await 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.
+    // SAFETY: The optional extension models draft reflected-ARIA properties; verify before use.
     const reflectedTextarea = textarea as ReflectedAriaElement;
     if (!reflectedTextarea.ariaLabelledByElements) {
-      throw new Error('Chromium did not expose ariaLabelledByElements');
+      throw new Error('browser did not expose ariaLabelledByElements');
     }
     if (!reflectedTextarea.ariaDescribedByElements) {
-      throw new Error('Chromium did not expose ariaDescribedByElements');
+      throw new Error('browser 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([]);
+    await expect(textarea.getAttribute('aria-labelledby')).toBe('external-name');
+    await expect(textarea.getAttribute('aria-describedby')).toBe('external-description');
+    await expect(reflectedTextarea.ariaLabelledByElements).toEqual([]);
+    await expect(reflectedTextarea.ariaDescribedByElements).toEqual([]);
   },
 };
 
@@ -276,7 +279,7 @@ export const EventsRefsAndDomQueriesExposeDifferentConsumerViews: Story = {
   name: 'Events, refs, and DOM queries expose different views',
   render: () => <AutomaticButtonHarness />,
   play: async ({ canvasElement }) => {
-    const observer = await waitFor(() =>
+    const observer = await waitFor(async () =>
       requireElement<HTMLElement>(
         canvasElement,
         '[data-testid="consumer-observer"]',
@@ -291,8 +294,8 @@ export const EventsRefsAndDomQueriesExposeDifferentConsumerViews: Story = {
       '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);
+    await expect(canvasElement.querySelector('[data-testid="isolated-auth-button"]')).toBeNull();
+    await expect(root.querySelector('[data-testid="isolated-auth-button"]')).toBe(button);
     const firstLayoutEvidence = requireElement<HTMLOutputElement>(
       canvasElement,
       '[data-testid="first-layout-ref-state"]',
@@ -314,9 +317,9 @@ export const EventsRefsAndDomQueriesExposeDifferentConsumerViews: Story = {
       'consumer current target evidence not rendered',
     );
 
-    void expect(firstLayoutEvidence).toHaveTextContent('null');
-    void expect(firstLayoutEvidence).toHaveAttribute('hidden');
-    await waitFor(() => void expect(forwardedRefEvidence.observedNode).toBe(button));
+    await expect(firstLayoutEvidence).toHaveTextContent('null');
+    await expect(firstLayoutEvidence).toHaveAttribute('hidden');
+    await waitFor(async () => await expect(forwardedRefEvidence.observedNode).toBe(button));
 
     const clickTarget = requireElement<HTMLDivElement>(
       button,
@@ -336,12 +339,12 @@ export const EventsRefsAndDomQueriesExposeDifferentConsumerViews: Story = {
 
     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);
+    await expect(outsideTarget).toBe(host);
+    await expect(outsidePath[0]).toBe(clickTarget);
+    await expect(outsidePath).toContain(button);
+    await expect(outsidePath).toContain(host);
+    await expect(consumerTargetEvidence.observedNode).toBe(clickTarget);
+    await expect(consumerCurrentTargetEvidence.observedNode).toBe(button);
   },
 };
 
@@ -381,9 +384,9 @@ export const NestedRootsRequireTraversalAndRetargetAtEveryBoundary: Story = {
       '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);
+    await expect(canvasElement.querySelector('[data-testid="nested-auth-button"]')).toBeNull();
+    await expect(outerRoot.querySelector('[data-testid="nested-auth-button"]')).toBeNull();
+    await expect(innerRoot.querySelector('[data-testid="nested-auth-button"]')).toBe(button);
 
     let outerScopeTarget: EventTarget | null = null;
     let documentScopeTarget: EventTarget | null = null;
@@ -406,10 +409,10 @@ export const NestedRootsRequireTraversalAndRetargetAtEveryBoundary: Story = {
 
     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);
+    await expect(outerScopeTarget).toBe(innerHost);
+    await expect(documentScopeTarget).toBe(outerHost);
+    await expect(composedPath[0]).toBe(button);
+    await expect(composedPath).toContain(innerHost);
+    await expect(composedPath).toContain(outerHost);
   },
 };
diff --git a/packages/ui/src/components/missing-app-key.stories.tsx b/packages/ui/src/components/missing-app-key.stories.tsx
index b14d7092..634aafcc 100644
--- a/packages/ui/src/components/missing-app-key.stories.tsx
+++ b/packages/ui/src/components/missing-app-key.stories.tsx
@@ -46,15 +46,24 @@ export const RendersMessage: Story = {
   args: {
     theme: 'light',
   },
-  tags: ['integration'],
+  tags: ['integration', 'cross-browser'],
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await waitFor(async () => {
-      await expect(canvas.getByRole('alert')).toBeInTheDocument();
+    const alert = await waitFor(async () => {
+      const element = canvas.getByRole('alert');
+      await expect(element).toBeInTheDocument();
+      return element;
     });
 
     await expect(canvas.getByText('Error')).toBeInTheDocument();
     await expect(canvas.getByText(/app key/)).toBeInTheDocument();
+    await waitFor(async () => {
+      const style = getComputedStyle(alert);
+      await expect(style.paddingBlockStart).toBe('16px');
+      await expect(style.paddingBlockEnd).toBe('16px');
+      await expect(style.paddingInlineStart).toBe('16px');
+      await expect(style.paddingInlineEnd).toBe('16px');
+    });
   },
 };
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
index 50b25c84..3251fcbc 100644
--- 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
@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+
 import { http, HttpResponse } from 'msw';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { expect, spyOn, userEvent, waitFor } from 'storybook/test';
+import { expect, spyOn, userEvent } from 'storybook/test';
 import { ShadowRootHost } from '../lib/shadow-root-host';
-import { waitForElement, waitForShadowRoot } from '../test/storybook-dom';
+import { waitFor, waitForElement, waitForShadowRoot } from '../test/storybook-dom';
 import { HighlightPermissionDialog } from './highlight-permission-dialog';
 import { Dialog, DialogContent, DialogTitle } from './ui/dialog';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
@@ -12,11 +13,13 @@ import { VerseActionPopover } from './verse-action-popover';
 interface IsolatedProductionOverlaySeamProps {
   enableRapidReopen?: boolean;
   manualInstructions?: string;
+  reopenOnDemand?: boolean;
 }
 
 function IsolatedProductionOverlaySeam({
   enableRapidReopen = false,
   manualInstructions,
+  reopenOnDemand = false,
 }: IsolatedProductionOverlaySeamProps): React.ReactNode {
   const [primaryMounted, setPrimaryMounted] = useState(true);
   const [verseOpen, setVerseOpen] = useState(false);
@@ -53,7 +56,9 @@ function IsolatedProductionOverlaySeam({
     rapidTimers.current.push(
       window.setTimeout(() => {
         setPermissionOpen(false);
-        rapidTimers.current.push(window.setTimeout(() => setPermissionOpen(true), 650));
+        if (!reopenOnDemand) {
+          rapidTimers.current.push(window.setTimeout(() => setPermissionOpen(true), 650));
+        }
       }, 300),
     );
   };
@@ -81,6 +86,15 @@ function IsolatedProductionOverlaySeam({
         Close all overlays
       </button>
       <output data-testid="close-all-requests" data-count={closeAllRequests} />
+      {reopenOnDemand ? (
+        <button
+          type="button"
+          data-testid="finish-rapid-reopen"
+          onClick={() => setPermissionOpen(true)}
+        >
+          Finish rapid reopen
+        </button>
+      ) : null}
 
       {primaryMounted ? (
         <div data-testid="primary-island">
@@ -217,11 +231,11 @@ function getPermissionDialog(topLayer: HTMLElement): HTMLElement | null {
   );
 }
 
-function expectOverlayAboveAtOverlap(
+async function expectOverlayAboveAtOverlap(
   root: ShadowRoot,
   expectedTop: HTMLElement,
   underneath: HTMLElement,
-): void {
+): Promise<void> {
   const topRect = expectedTop.getBoundingClientRect();
   const underneathRect = underneath.getBoundingClientRect();
   const overlapLeft = Math.max(topRect.left, underneathRect.left);
@@ -229,14 +243,14 @@ function expectOverlayAboveAtOverlap(
   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);
+  await expect(overlapRight).toBeGreaterThan(overlapLeft);
+  await 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);
+  await expect(hit === expectedTop || (hit !== null && expectedTop.contains(hit))).toBe(true);
 }
 
 function placeOverlayCenterUnderneath(
@@ -290,6 +304,10 @@ function installUnequalExitDurations(
   return style;
 }
 
+function finishAnimations(element: HTMLElement): void {
+  for (const animation of element.getAnimations()) animation.finish();
+}
+
 interface PrimaryHarness {
   contentWrapper: HTMLElement;
   primaryIsland: HTMLElement;
@@ -306,7 +324,7 @@ async function getPrimaryHarness(canvasElement: HTMLElement): Promise<PrimaryHar
   const root = await waitForShadowRoot(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();
+  await expect(root.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
   return { contentWrapper, primaryIsland, root };
 }
 
@@ -327,7 +345,7 @@ async function openVerseActionPopover(
     'verse action popover not rendered',
     productionWaitOptions,
   );
-  await waitFor(() => void expect(topLayer.matches(':popover-open')).toBe(true));
+  await waitFor(async () => await expect(topLayer.matches(':popover-open')).toBe(true));
   return { topLayer, versePopover };
 }
 
@@ -338,7 +356,7 @@ async function openPermissionDialogFromVerseAction(
   const swatch = versePopover.querySelector<HTMLButtonElement>('[role="group"] button');
   if (!swatch) throw new Error('highlight swatch not rendered');
   await userEvent.click(swatch);
-  return waitFor(() => {
+  return waitFor(async () => {
     const dialog = getPermissionDialog(topLayer);
     if (!dialog) throw new Error('highlight permission dialog not rendered');
     return dialog;
@@ -377,7 +395,7 @@ export const RapidCloseReopenDuringExit = manualWorkflow(
 
 /** YPE-5355 regression evidence with YPE-5889 final-focus coverage. */
 export const PopoverOpensDialogEvidence: Story = {
-  tags: ['!dev'],
+  tags: ['!dev', 'shadow-dom'],
   play: async ({ canvasElement, step }) => {
     const { contentWrapper, root } = await getPrimaryHarness(canvasElement);
     const priorControl = await waitForElement<HTMLButtonElement>(
@@ -418,104 +436,120 @@ export const PopoverOpensDialogEvidence: Story = {
           opened.topLayer,
           opened.versePopover,
         );
-        void expect(opened.versePopover.getRootNode()).toBe(root);
-        void expect(permissionDialog.getRootNode()).toBe(root);
+        await expect(opened.versePopover.getRootNode()).toBe(root);
+        await expect(permissionDialog.getRootNode()).toBe(root);
         const restorePosition = placeOverlayCenterUnderneath(opened.versePopover, permissionDialog);
         try {
-          expectOverlayAboveAtOverlap(root, permissionDialog, opened.versePopover);
+          await expectOverlayAboveAtOverlap(root, permissionDialog, opened.versePopover);
         } finally {
           restorePosition();
         }
-        await waitFor(() => {
+        await waitFor(async () => {
           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 expect(focused !== null && permissionDialog.contains(focused)).toBe(true);
+        }, productionWaitOptions);
+        await expect(contentWrapper.inert).toBe(true);
+        await 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);
+        await waitFor(async () => {
+          await expect(getPermissionDialog(topLayer)).toBeNull();
+          await expect(topLayer.querySelector('[data-slot="verse-action-popover"]')).not.toBeNull();
+          await expect(contentWrapper.inert).toBe(false);
           const focused = root.activeElement;
-          void expect(focused !== null && versePopover.contains(focused)).toBe(true);
-        });
+          await expect(focused !== null && versePopover.contains(focused)).toBe(true);
+        }, productionWaitOptions);
         await userEvent.keyboard('{Escape}');
-        await waitFor(() => {
-          void expect(topLayer.querySelector('[data-slot="verse-action-popover"]')).toBeNull();
-          void expect(topLayer.matches(':popover-open')).toBe(false);
-          void expect(root.activeElement).toBe(priorControl);
-        });
+        await waitFor(async () => {
+          await expect(topLayer.querySelector('[data-slot="verse-action-popover"]')).toBeNull();
+          await expect(topLayer.matches(':popover-open')).toBe(false);
+          await expect(root.activeElement).toBe(priorControl);
+        }, productionWaitOptions);
       });
 
       await step('Keep modal ownership when the popover exits first', async () => {
         exitAnimationStyles.push(
           installUnequalExitDurations(root, {
-            dialog: 400,
-            overlay: 800,
-            popover: 180,
+            dialog: 40_000,
+            overlay: 50_000,
+            popover: 30_000,
           }),
         );
         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 },
+        const permissionDialog = await openPermissionDialogFromVerseAction(
+          opened.topLayer,
+          opened.versePopover,
         );
-        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 },
+        const dialogOverlay = opened.topLayer.querySelector<HTMLElement>(
+          '[data-slot="dialog-overlay"]',
         );
-        void expect(closeAllRequests.getAttribute('data-count')).toBe('2');
+        if (!dialogOverlay) throw new Error('dialog overlay not rendered');
+        closeAllOverlays.click();
+        closeAllOverlays.click();
+        await waitFor(async () => {
+          await expect(opened.versePopover).toHaveAttribute('data-state', 'closed');
+          await expect(permissionDialog).toHaveAttribute('data-state', 'closed');
+        }, productionWaitOptions);
+        finishAnimations(opened.versePopover);
+        await waitFor(async () => {
+          await expect(
+            opened.topLayer.querySelector('[data-slot="verse-action-popover"]'),
+          ).toBeNull();
+          await expect(getPermissionDialog(opened.topLayer)).toBe(permissionDialog);
+          await expect(contentWrapper.inert).toBe(true);
+        }, productionWaitOptions);
+        finishAnimations(permissionDialog);
+        finishAnimations(dialogOverlay);
+        await waitFor(async () => {
+          await expect(getPermissionDialog(opened.topLayer)).toBeNull();
+          await expect(contentWrapper.inert).toBe(false);
+          await expect(opened.topLayer.matches(':popover-open')).toBe(false);
+        }, productionWaitOptions);
+        await 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,
+            dialog: 30_000,
+            overlay: 40_000,
+            popover: 50_000,
           }),
         );
         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 },
+        const permissionDialog = await openPermissionDialogFromVerseAction(
+          opened.topLayer,
+          opened.versePopover,
         );
-        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 },
+        const dialogOverlay = opened.topLayer.querySelector<HTMLElement>(
+          '[data-slot="dialog-overlay"]',
         );
-        void expect(closeAllRequests.getAttribute('data-count')).toBe('3');
+        if (!dialogOverlay) throw new Error('dialog overlay not rendered');
+        closeAllOverlays.click();
+        await waitFor(async () => {
+          await expect(opened.versePopover).toHaveAttribute('data-state', 'closed');
+          await expect(permissionDialog).toHaveAttribute('data-state', 'closed');
+        }, productionWaitOptions);
+        finishAnimations(permissionDialog);
+        finishAnimations(dialogOverlay);
+        await waitFor(async () => {
+          await expect(getPermissionDialog(opened.topLayer)).toBeNull();
+          await expect(
+            opened.topLayer.querySelector('[data-slot="verse-action-popover"]'),
+          ).not.toBeNull();
+        }, productionWaitOptions);
+        finishAnimations(opened.versePopover);
+        await waitFor(async () => {
+          await expect(
+            opened.topLayer.querySelector('[data-slot="verse-action-popover"]'),
+          ).toBeNull();
+          await expect(contentWrapper.inert).toBe(false);
+          await expect(opened.topLayer.matches(':popover-open')).toBe(false);
+        }, productionWaitOptions);
+        await expect(closeAllRequests.getAttribute('data-count')).toBe('3');
       });
     } finally {
       for (const style of exitAnimationStyles) style.remove();
@@ -524,7 +558,7 @@ export const PopoverOpensDialogEvidence: Story = {
 };
 
 export const DialogContainsPopoverEvidence: Story = {
-  tags: ['!dev'],
+  tags: ['!dev', 'shadow-dom'],
   play: async ({ canvasElement, step }) => {
     const { contentWrapper, root } = await getPrimaryHarness(canvasElement);
     const openNotes = await waitForElement<HTMLButtonElement>(
@@ -573,7 +607,7 @@ export const DialogContainsPopoverEvidence: Story = {
       );
       const restorePosition = placeOverlayCenterUnderneath(notesDialog, notesPopover);
       try {
-        expectOverlayAboveAtOverlap(root, notesPopover, notesDialog);
+        await expectOverlayAboveAtOverlap(root, notesPopover, notesDialog);
       } finally {
         restorePosition();
       }
@@ -584,34 +618,34 @@ export const DialogContainsPopoverEvidence: Story = {
         productionWaitOptions,
       );
       await userEvent.click(notesAction);
-      await waitFor(() => void expect(noteActionCount.getAttribute('data-count')).toBe('1'));
-      await waitFor(() => {
+      await waitFor(async () => await expect(noteActionCount.getAttribute('data-count')).toBe('1'));
+      await waitFor(async () => {
         const focused = root.activeElement;
-        void expect(focused !== null && notesPopover.contains(focused)).toBe(true);
+        await 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 waitFor(async () => await expect(notesPopover.isConnected).toBe(false));
+      await expect(topLayer).toContainElement(notesDialog);
+      await waitFor(async () => await expect(root.activeElement).toBe(notesTrigger));
+      await 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);
+      await waitFor(async () => await expect(notesDialog.isConnected).toBe(false));
+      await waitFor(async () => await expect(contentWrapper.inert).toBe(false));
+      await waitFor(async () => await expect(topLayer.matches(':popover-open')).toBe(false));
+      await waitFor(async () => await expect(root.activeElement).toBe(openNotes));
     });
   },
 };
 
 /** YPE-5355 stable regression evidence; peer-dismissal observations remain in the docs. */
 export const TwoIndependentOverlaysEvidence: Story = {
-  tags: ['!dev'],
+  tags: ['!dev', 'shadow-dom'],
   play: async ({ canvasElement, step }) => {
     const { contentWrapper, primaryIsland, root } = await getPrimaryHarness(canvasElement);
     const verse = await waitForElement<HTMLElement>(
@@ -642,16 +676,16 @@ export const TwoIndependentOverlaysEvidence: Story = {
         'independent popover not rendered',
         productionWaitOptions,
       );
-      await waitFor(() => {
+      await waitFor(async () => {
         const focused = root.activeElement;
-        void expect(focused !== null && independentPopover.contains(focused)).toBe(true);
+        await expect(focused !== null && independentPopover.contains(focused)).toBe(true);
       });
-      void expect(contentWrapper.inert).toBe(false);
+      await expect(contentWrapper.inert).toBe(false);
       await userEvent.keyboard('{Escape}');
-      await waitFor(() => void expect(independentPopover.isConnected).toBe(false));
-      void expect(root.activeElement).toBe(independentTrigger);
+      await waitFor(async () => await expect(independentPopover.isConnected).toBe(false));
+      await waitFor(async () => await expect(root.activeElement).toBe(independentTrigger));
       closeAllOverlays.click();
-      await waitFor(() => void expect(topLayer.matches(':popover-open')).toBe(false));
+      await waitFor(async () => await expect(topLayer.matches(':popover-open')).toBe(false));
     });
 
     await step('Keep the secondary root usable through primary teardown', async () => {
@@ -683,7 +717,7 @@ export const TwoIndependentOverlaysEvidence: Story = {
       );
 
       const opened = await openVerseActionPopover(root, verse);
-      void expect(opened.topLayer).not.toBe(secondaryTopLayer);
+      await expect(opened.topLayer).not.toBe(secondaryTopLayer);
       await openPermissionDialogFromVerseAction(opened.topLayer, opened.versePopover);
       const unmountPrimary = await waitForElement<HTMLButtonElement>(
         canvasElement,
@@ -692,11 +726,13 @@ export const TwoIndependentOverlaysEvidence: Story = {
         productionWaitOptions,
       );
       unmountPrimary.click();
-      await waitFor(() => void expect(primaryIsland.isConnected).toBe(false));
+      await waitFor(async () => await 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 waitFor(async () => await expect(secondaryPopover.isConnected).toBe(false));
+      await waitFor(
+        async () => await expect(secondaryTopLayer.matches(':popover-open')).toBe(false),
+      );
+      await expect(secondaryIsland.isConnected).toBe(true);
 
       await userEvent.click(secondaryTrigger);
       const reopenedSecondaryPopover = await waitForElement<HTMLElement>(
@@ -705,16 +741,16 @@ export const TwoIndependentOverlaysEvidence: Story = {
         'secondary popover did not reopen after primary teardown',
         productionWaitOptions,
       );
-      void expect(reopenedSecondaryPopover).toHaveAttribute('data-state', 'open');
-      void expect(secondaryTopLayer.matches(':popover-open')).toBe(true);
+      await expect(reopenedSecondaryPopover).toHaveAttribute('data-state', 'open');
+      await expect(secondaryTopLayer.matches(':popover-open')).toBe(true);
     });
   },
 };
 
 /** YPE-5355 lifecycle evidence with YPE-5889 final-focus coverage. */
 export const RapidCloseReopenDuringExitEvidence: Story = {
-  tags: ['!dev'],
-  args: { enableRapidReopen: true },
+  tags: ['!dev', 'shadow-dom'],
+  args: { enableRapidReopen: true, reopenOnDemand: true },
   play: async ({ canvasElement, step }) => {
     const { contentWrapper, root } = await getPrimaryHarness(canvasElement);
     const runRapidCloseReopen = await waitForElement<HTMLButtonElement>(
@@ -723,6 +759,12 @@ export const RapidCloseReopenDuringExitEvidence: Story = {
       'rapid close/reopen control not rendered',
       productionWaitOptions,
     );
+    const finishRapidReopen = await waitForElement<HTMLButtonElement>(
+      canvasElement,
+      '[data-testid="finish-rapid-reopen"]',
+      'rapid reopen completion control not rendered',
+      productionWaitOptions,
+    );
     const exitAnimationStyle = installUnequalExitDurations(root, {
       dialog: 400,
       overlay: 800,
@@ -740,7 +782,7 @@ export const RapidCloseReopenDuringExitEvidence: Story = {
           'shadow-local top layer not created',
           productionWaitOptions,
         );
-        firstDialog = await waitFor(() => {
+        firstDialog = await waitFor(async () => {
           const dialog = getPermissionDialog(topLayer);
           if (!dialog) throw new Error('permission dialog did not open');
           return dialog;
@@ -748,50 +790,55 @@ export const RapidCloseReopenDuringExitEvidence: Story = {
       });
 
       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 waitFor(
+          async () => await expect(firstDialog).toHaveAttribute('data-state', 'closed'),
+        );
+        await expect(firstDialog.isConnected).toBe(true);
+        await expect(topLayer).toContainElement(firstDialog);
+        await expect(contentWrapper.inert).toBe(true);
       });
 
-      await step('Retain the overlay after the first dialog unmounts', async () => {
-        const retainedOverlay = await waitFor(() => {
-          void expect(firstDialog.isConnected).toBe(false);
+      await step('Reopen while the retained overlay owns focus', async () => {
+        await waitFor(() => {
+          if (firstDialog.isConnected) throw new Error('first dialog has not unmounted');
           const overlay = topLayer.querySelector<HTMLElement>('[data-slot="dialog-overlay"]');
           if (!overlay) throw new Error('dialog overlay did not remain during content exit');
-          return overlay;
-        });
-        await waitFor(() => {
-          void expect(root.activeElement).toBe(retainedOverlay);
-          void expect(contentWrapper.inert).toBe(true);
-          void expect(topLayer.matches(':popover-open')).toBe(true);
+          if (getPermissionDialog(topLayer)) throw new Error('dialog content is still mounted');
+          if (root.activeElement !== overlay)
+            throw new Error('retained overlay does not own focus');
+          if (!contentWrapper.inert) throw new Error('background content is not inert');
+          if (!topLayer.matches(':popover-open')) throw new Error('top layer exited before reopen');
+
+          // Request the next dialog in the same task that observed the retained
+          // overlay, before its exit animation can finish.
+          finishRapidReopen.click();
         });
       });
 
       await step('Reopen from overlay-only retained presence', async () => {
-        const reopenedDialog = await waitFor(() => {
+        const reopenedDialog = await waitFor(async () => {
           const dialog = getPermissionDialog(topLayer);
           if (!dialog || dialog.getAttribute('data-state') === 'closed') {
             throw new Error('permission dialog did not reopen during exit');
           }
           return dialog;
         });
-        void expect(reopenedDialog).not.toBe(firstDialog);
-        await waitFor(() => {
+        await expect(reopenedDialog).not.toBe(firstDialog);
+        await waitFor(async () => {
           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 expect(focused !== null && reopenedDialog.contains(focused)).toBe(true);
+          await expect(contentWrapper.inert).toBe(true);
+          await 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);
-          void expect(root.activeElement).toBe(runRapidCloseReopen);
+        await waitFor(async () => {
+          await expect(getPermissionDialog(topLayer)).toBeNull();
+          await expect(contentWrapper.inert).toBe(false);
+          await expect(topLayer.matches(':popover-open')).toBe(false);
+          await expect(root.activeElement).toBe(runRapidCloseReopen);
         });
       });
     } finally {
@@ -801,7 +848,7 @@ export const RapidCloseReopenDuringExitEvidence: Story = {
 };
 
 export const RapidCloseReopenIgnoresInvalidOpenerEvidence: Story = {
-  tags: ['!dev'],
+  tags: ['!dev', 'shadow-dom'],
   args: { enableRapidReopen: true },
   play: async ({ canvasElement, step }) => {
     const { contentWrapper, root } = await getPrimaryHarness(canvasElement);
@@ -815,7 +862,7 @@ export const RapidCloseReopenIgnoresInvalidOpenerEvidence: Story = {
       '[data-testid="secondary-island"]',
       'secondary island not rendered',
     );
-    const secondaryRoot = await waitFor(() => requireShadowRoot(secondaryIsland));
+    const secondaryRoot = await waitForShadowRoot(secondaryIsland);
     const exitAnimationStyle = installUnequalExitDurations(root, {
       dialog: 400,
       overlay: 800,
@@ -831,44 +878,48 @@ export const RapidCloseReopenIgnoresInvalidOpenerEvidence: Story = {
           '[data-yv-shadow-local-overlay]',
           'shadow-local top layer not created',
         );
-        const firstDialog = await waitFor(() => {
+        const firstDialog = await waitFor(async () => {
           const dialog = getPermissionDialog(topLayer);
           if (!dialog) throw new Error('permission dialog did not open');
           return dialog;
         });
-        await waitFor(() => void expect(firstDialog).toHaveAttribute('data-state', 'closed'));
-        await waitFor(() => {
+        await waitFor(
+          async () => await expect(firstDialog).toHaveAttribute('data-state', 'closed'),
+        );
+        await waitFor(async () => {
           const dialog = getPermissionDialog(topLayer);
           if (!dialog || dialog.getAttribute('data-state') === 'closed') {
             throw new Error('permission dialog did not reopen during exit');
           }
-          void expect(contentWrapper.inert).toBe(true);
+          await expect(contentWrapper.inert).toBe(true);
         });
       });
 
       await step('Ignore the opener after it moves to another shadow root', async () => {
         secondaryRoot.append(runRapidCloseReopen);
-        void expect(runRapidCloseReopen.getRootNode()).toBe(secondaryRoot);
+        await expect(runRapidCloseReopen.getRootNode()).toBe(secondaryRoot);
 
         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);
+        await waitFor(async () => {
+          await expect(getPermissionDialog(topLayer)).toBeNull();
+          await expect(contentWrapper.inert).toBe(false);
+          await expect(topLayer.matches(':popover-open')).toBe(false);
         });
-        void expect(secondaryRoot.activeElement).not.toBe(runRapidCloseReopen);
+        await expect(secondaryRoot.activeElement).not.toBe(runRapidCloseReopen);
       });
 
       await step('Ignore the opener after it moves into the light DOM', async () => {
         contentWrapper.append(runRapidCloseReopen);
         await userEvent.click(runRapidCloseReopen);
-        const firstDialog = await waitFor(() => {
+        const firstDialog = await waitFor(async () => {
           const dialog = getPermissionDialog(topLayer);
           if (!dialog) throw new Error('permission dialog did not reopen for light-DOM target');
           return dialog;
         });
-        await waitFor(() => void expect(firstDialog).toHaveAttribute('data-state', 'closed'));
-        await waitFor(() => {
+        await waitFor(
+          async () => await expect(firstDialog).toHaveAttribute('data-state', 'closed'),
+        );
+        await waitFor(async () => {
           const dialog = getPermissionDialog(topLayer);
           if (!dialog || dialog.getAttribute('data-state') === 'closed') {
             throw new Error('permission dialog did not rapidly reopen for light-DOM target');
@@ -878,15 +929,15 @@ export const RapidCloseReopenIgnoresInvalidOpenerEvidence: Story = {
         const focus = spyOn(runRapidCloseReopen, 'focus');
         try {
           canvasElement.ownerDocument.body.append(runRapidCloseReopen);
-          void expect(runRapidCloseReopen.getRootNode()).toBe(canvasElement.ownerDocument);
+          await expect(runRapidCloseReopen.getRootNode()).toBe(canvasElement.ownerDocument);
           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);
+          await waitFor(async () => {
+            await expect(getPermissionDialog(topLayer)).toBeNull();
+            await expect(contentWrapper.inert).toBe(false);
+            await expect(topLayer.matches(':popover-open')).toBe(false);
           });
-          void expect(focus).not.toHaveBeenCalled();
-          void expect(canvasElement.ownerDocument.activeElement).not.toBe(runRapidCloseReopen);
+          await expect(focus).not.toHaveBeenCalled();
+          await expect(canvasElement.ownerDocument.activeElement).not.toBe(runRapidCloseReopen);
         } finally {
           focus.mockRestore();
         }
@@ -895,13 +946,15 @@ export const RapidCloseReopenIgnoresInvalidOpenerEvidence: Story = {
       await step('Ignore the opener after it disconnects', async () => {
         contentWrapper.append(runRapidCloseReopen);
         await userEvent.click(runRapidCloseReopen);
-        const firstDialog = await waitFor(() => {
+        const firstDialog = await waitFor(async () => {
           const dialog = getPermissionDialog(topLayer);
           if (!dialog) throw new Error('permission dialog did not reopen for disconnected target');
           return dialog;
         });
-        await waitFor(() => void expect(firstDialog).toHaveAttribute('data-state', 'closed'));
-        await waitFor(() => {
+        await waitFor(
+          async () => await expect(firstDialog).toHaveAttribute('data-state', 'closed'),
+        );
+        await waitFor(async () => {
           const dialog = getPermissionDialog(topLayer);
           if (!dialog || dialog.getAttribute('data-state') === 'closed') {
             throw new Error('permission dialog did not rapidly reopen for disconnected target');
@@ -911,15 +964,15 @@ export const RapidCloseReopenIgnoresInvalidOpenerEvidence: Story = {
         const focus = spyOn(runRapidCloseReopen, 'focus');
         try {
           runRapidCloseReopen.remove();
-          void expect(runRapidCloseReopen.isConnected).toBe(false);
+          await expect(runRapidCloseReopen.isConnected).toBe(false);
           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);
+          await waitFor(async () => {
+            await expect(getPermissionDialog(topLayer)).toBeNull();
+            await expect(contentWrapper.inert).toBe(false);
+            await expect(topLayer.matches(':popover-open')).toBe(false);
           });
-          void expect(focus).not.toHaveBeenCalled();
-          void expect(root.activeElement).not.toBe(runRapidCloseReopen);
+          await expect(focus).not.toHaveBeenCalled();
+          await expect(root.activeElement).not.toBe(runRapidCloseReopen);
         } finally {
           focus.mockRestore();
         }
@@ -928,14 +981,16 @@ export const RapidCloseReopenIgnoresInvalidOpenerEvidence: Story = {
       await step('Ignore the opener after it moves to another document', async () => {
         contentWrapper.append(runRapidCloseReopen);
         await userEvent.click(runRapidCloseReopen);
-        const firstDialog = await waitFor(() => {
+        const firstDialog = await waitFor(async () => {
           const dialog = getPermissionDialog(topLayer);
           if (!dialog)
             throw new Error('permission dialog did not reopen for cross-document target');
           return dialog;
         });
-        await waitFor(() => void expect(firstDialog).toHaveAttribute('data-state', 'closed'));
-        await waitFor(() => {
+        await waitFor(
+          async () => await expect(firstDialog).toHaveAttribute('data-state', 'closed'),
+        );
+        await waitFor(async () => {
           const dialog = getPermissionDialog(topLayer);
           if (!dialog || dialog.getAttribute('data-state') === 'closed') {
             throw new Error('permission dialog did not rapidly reopen for cross-document target');
@@ -946,15 +1001,15 @@ export const RapidCloseReopenIgnoresInvalidOpenerEvidence: Story = {
         const focus = spyOn(runRapidCloseReopen, 'focus');
         try {
           secondaryDocument.body.append(runRapidCloseReopen);
-          void expect(runRapidCloseReopen.isConnected).toBe(true);
-          void expect(runRapidCloseReopen.ownerDocument).toBe(secondaryDocument);
+          await expect(runRapidCloseReopen.isConnected).toBe(true);
+          await expect(runRapidCloseReopen.ownerDocument).toBe(secondaryDocument);
           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);
+          await waitFor(async () => {
+            await expect(getPermissionDialog(topLayer)).toBeNull();
+            await expect(contentWrapper.inert).toBe(false);
+            await expect(topLayer.matches(':popover-open')).toBe(false);
           });
-          void expect(focus).not.toHaveBeenCalled();
+          await expect(focus).not.toHaveBeenCalled();
         } finally {
           focus.mockRestore();
         }
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
index ed4914d6..2bbbebab 100644
--- a/packages/ui/src/components/shadow-root-host-realistic-usage.stories.tsx
+++ b/packages/ui/src/components/shadow-root-host-realistic-usage.stories.tsx
@@ -1,9 +1,11 @@
 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 { expect, spyOn, userEvent } from 'storybook/test';
+import { isExpectedFontStylesheetEvent } from '../test/storybook-font-stylesheet';
 import { ShadowRootHost } from '../lib/shadow-root-host';
 import { BibleCard } from './bible-card';
 import { BibleReader } from './bible-reader';
@@ -11,6 +13,7 @@ import { ProfileAvatar } from './profile-avatar';
 import { Separator } from './ui/separator';
 import { Textarea } from './ui/textarea';
 import { VerseOfTheDay } from './verse-of-the-day';
+import { waitFor } from '../test/storybook-dom';
 
 const EXPECTED_COMPONENT_IDS = [
   'reader',
@@ -29,7 +32,7 @@ const EXPECTED_COMPONENT_IDS = [
 
 const meta = {
   title: 'Spikes/Shadow DOM realistic usage',
-  tags: ['integration'],
+  tags: ['integration', 'shadow-dom'],
   parameters: {
     includeAuth: false,
     layout: 'fullscreen',
@@ -221,11 +224,11 @@ interface MountedFixture {
   sheet: CSSStyleSheet;
 }
 
-function requireMountedFixture(canvasElement: HTMLElement): MountedFixture {
+async function requireMountedFixture(canvasElement: HTMLElement): Promise<MountedFixture> {
   const hosts = Array.from(
     canvasElement.ownerDocument.querySelectorAll<HTMLElement>('[data-yv-shadow-host]'),
   );
-  void expect(hosts).toHaveLength(EXPECTED_COMPONENT_IDS.length);
+  await expect(hosts).toHaveLength(EXPECTED_COMPONENT_IDS.length);
 
   const roots = hosts.map((host) => {
     if (!host.shadowRoot) throw new Error('shadow root not attached');
@@ -235,7 +238,7 @@ function requireMountedFixture(canvasElement: HTMLElement): MountedFixture {
     (root) =>
       root.querySelector<HTMLElement>('[data-realistic-component]')?.dataset.realisticComponent,
   );
-  void expect(componentIds).toEqual(EXPECTED_COMPONENT_IDS);
+  await expect(componentIds).toEqual(EXPECTED_COMPONENT_IDS);
 
   const components = new Map(
     roots.map((root, index) => [
@@ -251,35 +254,35 @@ function requireMountedFixture(canvasElement: HTMLElement): MountedFixture {
     ['votd-large', 'JHN.3.16'],
   ]);
   for (const [id, usfm] of expectedPassages) {
-    void expect(components.get(id)).toHaveTextContent(`Fixture scripture content for ${usfm}.`);
+    await expect(components.get(id)).toHaveTextContent(`Fixture scripture content for ${usfm}.`);
   }
-  void expect(
+  await expect(
     components.get('avatar-primary')?.querySelector('[aria-label="SDK Reader"]'),
   ).not.toBeNull();
-  void expect(
+  await expect(
     components.get('avatar-secondary')?.querySelector('[aria-label="Bible Partner"]'),
   ).not.toBeNull();
-  void expect(components.get('notes-primary')?.querySelector('textarea')).toHaveValue(
+  await expect(components.get('notes-primary')?.querySelector('textarea')).toHaveValue(
     'Primary notes',
   );
-  void expect(components.get('notes-secondary')?.querySelector('textarea')).toHaveValue(
+  await expect(components.get('notes-secondary')?.querySelector('textarea')).toHaveValue(
     'Secondary notes',
   );
-  void expect(components.get('notes-tertiary')?.querySelector('textarea')).toHaveValue(
+  await expect(components.get('notes-tertiary')?.querySelector('textarea')).toHaveValue(
     'Tertiary notes',
   );
-  void expect(
+  await expect(
     components.get('separator-primary')?.querySelector('[role="separator"]'),
   ).not.toBeNull();
-  void expect(
+  await 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);
+    await expect(root.adoptedStyleSheets).toHaveLength(1);
+    await expect(root.adoptedStyleSheets[0]).toBe(sheet);
   }
 
   return { hosts, sheet };
@@ -305,13 +308,13 @@ const STRICT_EFFECT_COUNTS: ExpectedEffectCounts = import.meta.env.DEV
     }
   : NORMAL_EFFECT_COUNTS;
 
-function requireEffectCounts(
+async function requireEffectCounts(
   canvasElement: HTMLElement,
   [setup, cleanup]: [setup: number, cleanup: number],
-): void {
+): Promise<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));
+  await expect(counts).toHaveAttribute('data-effect-setup', String(setup));
+  await expect(counts).toHaveAttribute('data-effect-cleanup', String(cleanup));
 }
 
 async function exerciseLifecycle(
@@ -322,29 +325,54 @@ async function exerciseLifecycle(
   if (!toggle) throw new Error('lifecycle toggle not rendered');
   const consoleError = spyOn(console, 'error').mockImplementation(() => undefined);
 
+  const waitForMountedDom = async (): Promise<MountedFixture> =>
+    waitFor(() => {
+      const hosts = Array.from(
+        canvasElement.ownerDocument.querySelectorAll<HTMLElement>('[data-yv-shadow-host]'),
+      );
+      if (hosts.length !== EXPECTED_COMPONENT_IDS.length) {
+        throw new Error('realistic component mix is still mounting');
+      }
+
+      const roots = hosts.map((host) => host.shadowRoot);
+      if (roots.some((root) => !root)) throw new Error('shadow roots are still mounting');
+      const componentIds = roots.map(
+        (root) =>
+          root?.querySelector<HTMLElement>('[data-realistic-component]')?.dataset
+            .realisticComponent,
+      );
+      if (componentIds.some((id, index) => id !== EXPECTED_COMPONENT_IDS[index])) {
+        throw new Error('realistic component mix is still mounting');
+      }
+
+      const sheet = roots[0]?.adoptedStyleSheets[0];
+      if (!sheet) throw new Error('shared SDK stylesheet is still mounting');
+      return { hosts, sheet };
+    });
+
   try {
     await userEvent.click(toggle);
-    const firstMount = await waitFor(() => {
-      const fixture = requireMountedFixture(canvasElement);
-      requireEffectCounts(canvasElement, expectedEffectCounts.firstMount);
-      return fixture;
-    });
+    const firstMount = await waitForMountedDom();
+    await requireMountedFixture(canvasElement);
+    await requireEffectCounts(canvasElement, expectedEffectCounts.firstMount);
 
     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 expect(canvasElement.querySelectorAll('[data-yv-shadow-host]')).toHaveLength(0);
+    await expect(canvasElement.querySelector('[data-testid="realistic-component-mix"]')).toBeNull();
+    await requireEffectCounts(canvasElement, expectedEffectCounts.removal);
 
     await userEvent.click(toggle);
-    const secondMount = await waitFor(() => {
-      const fixture = requireMountedFixture(canvasElement);
-      requireEffectCounts(canvasElement, expectedEffectCounts.secondMount);
-      return fixture;
-    });
+    const secondMount = await waitForMountedDom();
+    await requireMountedFixture(canvasElement);
+    await requireEffectCounts(canvasElement, expectedEffectCounts.secondMount);
     for (const host of secondMount.hosts) {
-      void expect(host.shadowRoot?.adoptedStyleSheets[0]).toBe(firstMount.sheet);
+      await expect(host.shadowRoot?.adoptedStyleSheets[0]).toBe(firstMount.sheet);
     }
-    void expect(consoleError).not.toHaveBeenCalled();
+    const unexpectedConsoleErrors = consoleError.mock.calls.filter(
+      ([firstArgument]) =>
+        !(firstArgument instanceof Event && isExpectedFontStylesheetEvent(firstArgument)),
+    );
+    await expect(unexpectedConsoleErrors).toHaveLength(0);
   } finally {
     consoleError.mockRestore();
   }
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
index fca35c99..ded9f39e 100644
--- a/packages/ui/src/components/sign-in-dialog.shadow-isolation.stories.tsx
+++ b/packages/ui/src/components/sign-in-dialog.shadow-isolation.stories.tsx
@@ -1,9 +1,10 @@
 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 { expect, userEvent } from 'storybook/test';
 import { ShadowRootHost } from '../lib/shadow-root-host';
-import { waitForShadowRoot } from '../test/storybook-dom';
+import { waitFor, waitForShadowRoot } from '../test/storybook-dom';
 import { SignInDialog } from './sign-in-dialog';
 
 function SignInDialogHarness(): React.ReactNode {
@@ -38,7 +39,7 @@ function SignInDialogHarness(): React.ReactNode {
 const meta = {
   title: 'Spikes/SignInDialog Shadow DOM isolation',
   component: SignInDialogHarness,
-  tags: ['integration'],
+  tags: ['integration', 'shadow-dom'],
   parameters: {
     layout: 'centered',
     msw: {
@@ -72,16 +73,16 @@ async function expectOutsideFocusRedirectedInto(
   dialog: HTMLElement,
 ): Promise<void> {
   outsideControl.focus();
-  await waitFor(() => {
+  await waitFor(async () => {
     const focused = root.activeElement;
-    void expect(focused !== null && dialog.contains(focused)).toBe(true);
+    await expect(focused !== null && dialog.contains(focused)).toBe(true);
   });
-  void expect(outsideControl.ownerDocument.activeElement).not.toBe(outsideControl);
+  await expect(outsideControl.ownerDocument.activeElement).not.toBe(outsideControl);
 }
 
 export const IsolatesFocusInertnessBackdropAndRestoration: Story = {
   play: async ({ canvasElement }) => {
-    const { outsideControl, clippingContainer } = await waitFor(() => {
+    const { outsideControl, clippingContainer } = await waitFor(async () => {
       const outside = canvasElement.querySelector<HTMLButtonElement>(
         '[data-testid="outside-control"]',
       );
@@ -99,12 +100,15 @@ export const IsolatesFocusInertnessBackdropAndRestoration: Story = {
       [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();
+    const insideControl = await waitFor(async () => {
+      const element = root.querySelector<HTMLButtonElement>('[data-testid="inside-control"]');
+      if (!element) throw new Error('inside-island control not rendered');
+      return element;
+    });
+    await expect(root.querySelector('[data-yv-shadow-local-overlay]')).toBeNull();
     insideControl.focus();
     await userEvent.click(insideControl);
-    const dialog = await waitFor(() => {
+    const dialog = await waitFor(async () => {
       const element = root.querySelector<HTMLElement>('[role="dialog"]');
       if (!element) throw new Error('sign-in dialog not rendered in the component shadow root');
       return element;
@@ -113,33 +117,33 @@ export const IsolatesFocusInertnessBackdropAndRestoration: Story = {
     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));
+    await expect(dialog.getRootNode()).toBe(root);
+    await expect(topLayer.getRootNode()).toBe(root);
+    await expect(canvasElement.ownerDocument.body.querySelector('[role="dialog"]')).toBeNull();
+    await waitFor(async () => await 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();
+    await expect(titleId).toBeTruthy();
+    await 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.
+    await expect(title).not.toBeNull();
+    await expect(description).not.toBeNull();
+    // SAFETY: These reflected-ARIA properties are still a draft; verify support 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');
+      throw new Error('browser did not expose the dialog ARIA element relationships');
     }
-    void expect(reflectedDialog.ariaLabelledByElements).toEqual([title]);
-    void expect(reflectedDialog.ariaDescribedByElements).toEqual([description]);
+    await expect(reflectedDialog.ariaLabelledByElements).toEqual([title]);
+    await expect(reflectedDialog.ariaDescribedByElements).toEqual([description]);
 
-    await waitFor(() => {
+    await waitFor(async () => {
       const focused = root.activeElement;
-      void expect(focused !== null && dialog.contains(focused)).toBe(true);
+      await expect(focused !== null && dialog.contains(focused)).toBe(true);
     });
 
     const hiddenWrapper = canvasElement.ownerDocument.createElement('div');
@@ -152,7 +156,7 @@ export const IsolatesFocusInertnessBackdropAndRestoration: Story = {
     const dialogButtons = Array.from(
       dialog.querySelectorAll<HTMLButtonElement>('button[data-slot="button"]'),
     );
-    void expect(dialogButtons).toHaveLength(2);
+    await expect(dialogButtons).toHaveLength(2);
     const [confirmButton, declineButton] = dialogButtons;
     if (!confirmButton || !declineButton) throw new Error('sign-in dialog actions not rendered');
 
@@ -172,24 +176,24 @@ export const IsolatesFocusInertnessBackdropAndRestoration: Story = {
 
     confirmButton.focus();
     await userEvent.tab();
-    void expect(root.activeElement).toBe(firstRadio);
+    await expect(root.activeElement).toBe(firstRadio);
     await userEvent.tab();
-    void expect(root.activeElement).toBe(declineButton);
+    await expect(root.activeElement).toBe(declineButton);
     await userEvent.tab();
-    await waitFor(() => void expect(root.activeElement).toBe(confirmButton));
+    await waitFor(async () => await 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);
+    await waitFor(async () => await expect(root.activeElement).toBe(declineButton));
+    await expect(root.activeElement).not.toBe(negativeTabIndexButton);
+    await expect(root.activeElement).not.toBe(secondRadio);
 
-    void expect(getComputedStyle(outsideControl).pointerEvents).toBe('none');
+    await expect(getComputedStyle(outsideControl).pointerEvents).toBe('none');
 
     await expectOutsideFocusRedirectedInto(root, outsideControl, dialog);
 
-    void expect(insideControl.closest('[inert]')).not.toBeNull();
+    await expect(insideControl.closest('[inert]')).not.toBeNull();
 
     insideControl.focus();
-    void expect(root.activeElement).not.toBe(insideControl);
+    await expect(root.activeElement).not.toBe(insideControl);
 
     const overlay = dialog.previousElementSibling;
     if (!(overlay instanceof HTMLElement)) throw new Error('dialog overlay not rendered');
@@ -198,23 +202,23 @@ export const IsolatesFocusInertnessBackdropAndRestoration: Story = {
     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);
+    await expect(overlayRect.width).toBeGreaterThanOrEqual(viewport.innerWidth - 1);
+    await 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(
+    await expect(
       escapedHit === overlay || (escapedHit !== null && overlay.contains(escapedHit)),
     ).toBe(true);
-    void expect(dialogRect.bottom).toBeGreaterThan(clippingRect.bottom + 1);
+    await 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(
+    await expect(dialogHit === dialog || (dialogHit !== null && dialog.contains(dialogHit))).toBe(
       true,
     );
 
@@ -235,39 +239,39 @@ export const IsolatesFocusInertnessBackdropAndRestoration: Story = {
     try {
       canvasElement.ownerDocument.head.append(hostileStyle);
       await waitFor(
-        () =>
-          void expect(getComputedStyle(outsideControl).backgroundColor).toBe('rgb(185, 28, 28)'),
+        async () =>
+          await expect(getComputedStyle(outsideControl).backgroundColor).toBe('rgb(185, 28, 28)'),
       );
-      void expect(styleSnapshot(dialog)).toEqual(dialogStyles);
-      void expect(styleSnapshot(overlay)).toEqual(overlayStyles);
+      await expect(styleSnapshot(dialog)).toEqual(dialogStyles);
+      await 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 waitFor(async () => {
+      await expect(dialog).toHaveAttribute('data-state', 'closed');
+      await expect(topLayer).toContainElement(dialog);
+      await expect(contentWrapper.inert).toBe(true);
+      await expect(getComputedStyle(outsideControl).pointerEvents).toBe('none');
+      await 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(async () => {
+      await expect(topLayer.querySelector('[role="dialog"]')).toBeNull();
+      await expect(topLayer.querySelector('[data-slot="dialog-overlay"]')).not.toBeNull();
+      await expect(contentWrapper.inert).toBe(true);
+      await 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 waitFor(async () => {
+      await expect(topLayer.childElementCount).toBe(0);
+      await expect(topLayer.matches(':popover-open')).toBe(false);
+      await expect(contentWrapper.inert).toBe(false);
+      await expect(root.activeElement).toBe(insideControl);
     });
 
     await userEvent.click(outsideControl);
-    const reopenedDialog = await waitFor(() => {
+    const reopenedDialog = await waitFor(async () => {
       const element = root.querySelector<HTMLElement>('[role="dialog"]');
       if (!element) throw new Error('dialog did not reopen');
       return element;
@@ -277,29 +281,29 @@ export const IsolatesFocusInertnessBackdropAndRestoration: Story = {
       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 waitFor(async () => {
+      await expect(reopenedDialog).toHaveAttribute('data-state', 'closed');
+      await expect(contentWrapper.inert).toBe(true);
+      await expect(getComputedStyle(outsideControl).pointerEvents).toBe('none');
+      await 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);
+    await waitFor(async () => {
+      await expect(topLayer.querySelector('[role="dialog"]')).toBeNull();
+      await expect(topLayer.querySelector('[data-slot="dialog-overlay"]')).not.toBeNull();
+      await expect(contentWrapper.inert).toBe(true);
+      await 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(async () => {
+      await expect(canvasElement.ownerDocument.activeElement).not.toBe(outsideControl);
+      await 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);
+    await waitFor(async () => {
+      await expect(topLayer.childElementCount).toBe(0);
+      await expect(topLayer.matches(':popover-open')).toBe(false);
+      await expect(contentWrapper.inert).toBe(false);
+      await expect(canvasElement.ownerDocument.activeElement).toBe(outsideControl);
     });
     exitAnimationStyle.remove();
   },
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
index 2e163857..169d2512 100644
--- a/packages/ui/src/components/verse-action-popover.shadow-isolation.stories.tsx
+++ b/packages/ui/src/components/verse-action-popover.shadow-isolation.stories.tsx
@@ -1,10 +1,11 @@
 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 { expect, userEvent, within } from 'storybook/test';
 import i18n from '../i18n';
 import { ShadowRootHost } from '../lib/shadow-root-host';
-import { waitForElement, waitForShadowRoot } from '../test/storybook-dom';
+import { waitFor, waitForElement, waitForShadowRoot } from '../test/storybook-dom';
 import { VerseActionPopover } from './verse-action-popover';
 
 function IsolatedVerseActionPopover(): React.ReactNode {
@@ -126,7 +127,7 @@ function IsolatedVerseActionPopover(): React.ReactNode {
 const meta = {
   title: 'Spikes/VerseActionPopover Shadow DOM isolation',
   component: IsolatedVerseActionPopover,
-  tags: ['integration'],
+  tags: ['integration', 'shadow-dom'],
   parameters: {
     layout: 'centered',
     msw: {
@@ -143,12 +144,16 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 async function waitForClosed(topLayer: HTMLElement): Promise<void> {
-  await waitFor(() => {
-    void expect(topLayer.querySelector('[role="dialog"]')).toBeNull();
-    void expect(topLayer.matches(':popover-open')).toBe(false);
+  await waitFor(async () => {
+    await expect(topLayer.querySelector('[role="dialog"]')).toBeNull();
+    await expect(topLayer.matches(':popover-open')).toBe(false);
   });
 }
 
+async function waitForFocus(shadowRoot: ShadowRoot, element: HTMLElement): Promise<void> {
+  await waitFor(async () => await expect(shadowRoot.activeElement).toBe(element));
+}
+
 function getCopyButton(dialog: HTMLElement): HTMLButtonElement {
   return within(dialog).getByRole('button', { name: i18n.t('copy') });
 }
@@ -204,19 +209,19 @@ export const PortalPlacementDockingReanchoringAndFocusRestoration: Story = {
       '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));
+    await waitFor(async () => await expect(topLayer.matches(':popover-open')).toBe(true));
+    await expect(topLayer.getRootNode()).toBe(shadowRoot);
+    await expect(dialog.getRootNode()).toBe(shadowRoot);
+    await expect(canvasElement.ownerDocument.body.querySelector('[role="dialog"]')).toBeNull();
+    await expect(dialog).toHaveAccessibleName(/.+/);
+    await expect(dialog.querySelector('[role="group"]')).toHaveAccessibleName(/.+/);
+    await waitFor(async () => await 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);
+    await expect(escapesAbove || escapesBelow).toBe(true);
     const sampleX = firstDialogRect.left + firstDialogRect.width / 2;
     const sampleY = escapesBelow
       ? Math.max(firstDialogRect.top + 2, clippingRect.bottom + 2)
@@ -224,44 +229,44 @@ export const PortalPlacementDockingReanchoringAndFocusRestoration: Story = {
     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);
+    await expect(hit === dialog || (hit !== null && dialog.contains(hit))).toBe(true);
 
     readerScrollRoot.scrollTop = readerScrollRoot.scrollHeight;
-    await waitFor(() => {
+    await waitFor(async () => {
       const readerRect = readerScrollRoot.getBoundingClientRect();
       const dockedRect = dialog.getBoundingClientRect();
-      void expect(Math.abs(dockedRect.top - (readerRect.top + 24))).toBeLessThan(12);
-      void expect(
+      await expect(Math.abs(dockedRect.top - (readerRect.top + 24))).toBeLessThan(12);
+      await expect(
         Math.abs(dockedRect.left + dockedRect.width / 2 - (readerRect.left + readerRect.width / 2)),
       ).toBeLessThan(2);
     });
     readerScrollRoot.scrollTop = 0;
-    await waitFor(() => {
+    await waitFor(async () => {
       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 expect(Math.abs(returnedRect.left - firstDialogRect.left)).toBeLessThan(12);
+      await expect(Math.abs(returnedRect.top - firstDialogRect.top)).toBeLessThan(12);
     });
 
     await userEvent.click(secondVerse);
-    await waitFor(() => {
+    await waitFor(async () => {
       const nextRect = dialog.getBoundingClientRect();
-      void expect(nextRect.left).toBeGreaterThan(firstDialogRect.left + 20);
+      await expect(nextRect.left).toBeGreaterThan(firstDialogRect.left + 20);
     });
-    void expect(
+    await expect(
       shadowRoot.querySelector('[data-testid="close-requests"]')?.getAttribute('data-count'),
     ).toBe('0');
-    void expect(topLayer).toContainElement(dialog);
+    await expect(topLayer).toContainElement(dialog);
 
     await userEvent.keyboard('{Escape}');
     await waitForClosed(topLayer);
-    void expect(shadowRoot.activeElement).toBe(priorControl);
+    await waitForFocus(shadowRoot, 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);
+    await waitForFocus(shadowRoot, priorControl);
 
     priorControl.focus();
     await userEvent.click(firstVerse);
@@ -277,30 +282,30 @@ export const PortalPlacementDockingReanchoringAndFocusRestoration: Story = {
     const closeRequestsBeforeRejection = Number(closeRequestOutput.getAttribute('data-count'));
     await userEvent.click(rejectedOutsideControl);
     await waitFor(
-      () =>
-        void expect(Number(closeRequestOutput.getAttribute('data-count'))).toBe(
+      async () =>
+        await expect(Number(closeRequestOutput.getAttribute('data-count'))).toBe(
           closeRequestsBeforeRejection + 1,
         ),
     );
-    void expect(topLayer).toContainElement(dialog);
-    void expect(canvasElement.ownerDocument.activeElement).toBe(rejectedOutsideControl);
+    await expect(topLayer).toContainElement(dialog);
+    await expect(canvasElement.ownerDocument.activeElement).toBe(rejectedOutsideControl);
     await userEvent.click(getCopyButton(dialog));
     await waitForClosed(topLayer);
-    void expect(shadowRoot.activeElement).toBe(priorControl);
+    await waitForFocus(shadowRoot, 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);
+    await 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);
+    await expect(canvasElement.ownerDocument.activeElement).toBe(outsideControl);
 
     const closeRequestsBeforeTouch = Number(closeRequestOutput.getAttribute('data-count'));
     const touchUser = userEvent.setup({ document: canvasElement.ownerDocument });
@@ -308,22 +313,22 @@ export const PortalPlacementDockingReanchoringAndFocusRestoration: Story = {
     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(
+    await expect(firstVerse).toHaveClass('yv-v-selected');
+    await expect(secondVerse).toHaveClass('yv-v-selected');
+    await expect(dialog).toHaveAttribute('data-state', 'open');
+    await expect(Number(closeRequestOutput.getAttribute('data-count'))).toBe(
       closeRequestsBeforeTouch,
     );
-    await waitFor(() => {
-      void expect(dialog.getBoundingClientRect().left).toBeGreaterThan(touchDialogRect.left + 20);
+    await waitFor(async () => {
+      await expect(dialog.getBoundingClientRect().left).toBeGreaterThan(touchDialogRect.left + 20);
     });
     await touchUser.pointer({ keys: '[TouchA>]', target: outsideControl });
-    void expect(dialog).toHaveAttribute('data-state', 'open');
+    await expect(dialog).toHaveAttribute('data-state', 'open');
     await touchUser.pointer({ keys: '[/TouchA]', target: outsideControl });
     await waitForClosed(topLayer);
-    void expect(Number(closeRequestOutput.getAttribute('data-count'))).toBe(
+    await expect(Number(closeRequestOutput.getAttribute('data-count'))).toBe(
       closeRequestsBeforeTouch + 1,
     );
-    void expect(canvasElement.ownerDocument.activeElement).toBe(outsideControl);
+    await expect(canvasElement.ownerDocument.activeElement).toBe(outsideControl);
   },
 };
diff --git a/packages/ui/src/i18n/index.ts b/packages/ui/src/i18n/index.ts
index fde8d35e..218b011e 100644
--- a/packages/ui/src/i18n/index.ts
+++ b/packages/ui/src/i18n/index.ts
@@ -43,7 +43,7 @@ export function syncSdkLanguage(languageTag?: string): Promise<string> {
  * Call from YouVersionProvider on mount when no `locale` prop is set.
  */
 export function syncBrowserLanguageFromNavigator(): void {
-  void syncSdkLanguage();
+  void syncSdkLanguage().catch(() => undefined);
 }
 
 function getInitialLanguage(): string {
diff --git a/packages/ui/src/styles/chrome.css b/packages/ui/src/styles/chrome.css
index 2bd10a53..5cdc5762 100644
--- a/packages/ui/src/styles/chrome.css
+++ b/packages/ui/src/styles/chrome.css
@@ -12,6 +12,12 @@ layer(yv-sdk-fonts);
 @import 'tailwindcss/theme.css' layer(yv-sdk-theme) prefix(yv);
 @import 'tailwindcss/utilities.css' layer(yv-sdk-utilities) prefix(yv) source(none);
 
+/* Match component CSS: WebKit can lose variable-backed spacing when the
+ * document-root revert-layer reset restores a layered utility. */
+@theme inline {
+  --spacing: 0.25rem;
+}
+
 @source '../components/YouVersionProvider.tsx';
 @source '../components/missing-app-key.tsx';
 @source '../components/icons/exclamation-circle.tsx';
diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css
index f0c1434f..6cac757b 100644
--- a/packages/ui/src/styles/global.css
+++ b/packages/ui/src/styles/global.css
@@ -52,6 +52,12 @@ layer(yv-sdk-fonts);
 @import 'tailwindcss/utilities.css' layer(yv-sdk-utilities) prefix(yv) source(none);
 @import 'tw-animate-css';
 
+/* Resolve the fixed SDK spacing scale in generated utilities. WebKit loses
+ * var(--yv-spacing) values when the document-root reset rolls back a layer. */
+@theme inline {
+  --spacing: 0.25rem;
+}
+
 @source '../components';
 
 /* The light-DOM shadow host remains selectable by the consumer page. Prevent
@@ -214,12 +220,15 @@ layer(yv-sdk-fonts);
 /*
  * A2: unlayered on purpose. Host `button {}` / Tailwind preflight sit in the
  * implicit last layer; this rule sits there too and rolls the listed
- * shorthands back to `yv-sdk-*`. Descendants only — the `[data-yv-sdk]` root
- * keeps inherited `--yv` tokens.
+ * shorthands back to `yv-sdk-*`. Scope it to document roots: a shadow tree
+ * already blocks host selectors, and Safari loses layered logical padding
+ * utilities when this unlayered padding reset also matches shadow descendants.
+ * `:where(:root)` preserves the original selector specificity. Descendants
+ * only — the `[data-yv-sdk]` root keeps inherited `--yv` tokens.
  */
-[data-yv-sdk] *,
-[data-yv-sdk] *::before,
-[data-yv-sdk] *::after {
+:where(:root) [data-yv-sdk] *,
+:where(:root) [data-yv-sdk] *::before,
+:where(:root) [data-yv-sdk] *::after {
   box-sizing: revert-layer;
   padding: revert-layer;
   margin: revert-layer;
diff --git a/packages/ui/src/styles/host-css-isolation.stories.tsx b/packages/ui/src/styles/host-css-isolation.stories.tsx
index c7cf143b..be997020 100644
--- a/packages/ui/src/styles/host-css-isolation.stories.tsx
+++ b/packages/ui/src/styles/host-css-isolation.stories.tsx
@@ -98,7 +98,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const HostileHost: Story = {
-  tags: ['integration'],
+  tags: ['integration', 'cross-browser'],
   play: async ({ canvasElement }) => {
     await waitFor(async () => {
       const hostButton = requiredElement(document, 'host-button');
@@ -115,11 +115,14 @@ export const HostileHost: Story = {
     const heading = requiredElement(canvasElement, 'sdk-heading');
     const input = requiredElement(canvasElement, 'sdk-input');
 
+    await waitFor(async () => {
+      const buttonStyle = getComputedStyle(button);
+      await expect(buttonStyle.paddingTop).toBe('8px');
+      await expect(buttonStyle.paddingRight).toBe('16px');
+      await expect(buttonStyle.paddingBottom).toBe('8px');
+      await expect(buttonStyle.paddingLeft).toBe('16px');
+    });
     const buttonStyle = getComputedStyle(button);
-    await expect(buttonStyle.paddingTop).toBe('8px');
-    await expect(buttonStyle.paddingRight).toBe('16px');
-    await expect(buttonStyle.paddingBottom).toBe('8px');
-    await expect(buttonStyle.paddingLeft).toBe('16px');
     await expect(buttonStyle.backgroundColor).toBe('rgb(18, 18, 18)');
     await expect(buttonStyle.color).toBe('rgb(255, 255, 255)');
     await expect(buttonStyle.fontFamily).not.toContain('HostileHostSerif');
diff --git a/packages/ui/src/styles/host-revert-layer.test.ts b/packages/ui/src/styles/host-revert-layer.test.ts
index f9956ef2..221e1cbf 100644
--- a/packages/ui/src/styles/host-revert-layer.test.ts
+++ b/packages/ui/src/styles/host-revert-layer.test.ts
@@ -12,12 +12,14 @@ const styleDir = import.meta.dirname;
 const globalCss = readFileSync(resolve(styleDir, './global.css'), 'utf8');
 const chromeCss = readFileSync(resolve(styleDir, './chrome.css'), 'utf8');
 
-const EXPECTED_SELECTORS = [
+const DOCUMENT_SELECTORS = [
   '[data-yv-sdk] *',
   '[data-yv-sdk] *::before',
   '[data-yv-sdk] *::after',
 ] as const;
 
+const GLOBAL_SELECTORS = DOCUMENT_SELECTORS.map((selector) => `:where(:root) ${selector}`);
+
 const REVERT_PROPERTIES = [
   'box-sizing',
   'padding',
@@ -72,7 +74,7 @@ function revertLayerRules(css: string): [selectors: string[], body: string][] {
   return rules;
 }
 
-function expectA2Rule(css: string, label: string): void {
+function expectA2Rule(css: string, label: string, expectedSelectors: readonly string[]): void {
   const withoutComments = stripComments(css);
   const collapsed = withoutComments.replace(/\s+/g, ' ');
 
@@ -82,7 +84,7 @@ function expectA2Rule(css: string, label: string): void {
   expect(rules.length, `${label}: expected at least one revert-layer rule`).toBeGreaterThan(0);
 
   for (const [selectors, body] of rules) {
-    expect(selectors, label).toEqual([...EXPECTED_SELECTORS]);
+    expect(selectors, label).toEqual([...expectedSelectors]);
     expect(body, label).not.toMatch(/\bdisplay\s*:/);
     expect(body, label).not.toMatch(/\bmax-width\s*:/);
 
@@ -94,8 +96,8 @@ function expectA2Rule(css: string, label: string): void {
 }
 
 describe('A2 host isolation rule', () => {
-  it('declares revert-layer on the listed shorthands in global.css and chrome.css', () => {
-    expectA2Rule(globalCss, 'global.css');
-    expectA2Rule(chromeCss, 'chrome.css');
+  it('limits the full-sheet reset to document roots and preserves the chrome reset', () => {
+    expectA2Rule(globalCss, 'global.css', GLOBAL_SELECTORS);
+    expectA2Rule(chromeCss, 'chrome.css', DOCUMENT_SELECTORS);
   });
 });
diff --git a/packages/ui/src/test/storybook-dom.ts b/packages/ui/src/test/storybook-dom.ts
index 23c32bc2..cd147107 100644
--- a/packages/ui/src/test/storybook-dom.ts
+++ b/packages/ui/src/test/storybook-dom.ts
@@ -1,10 +1,17 @@
-import { waitFor } from 'storybook/test';
+import { waitFor as storybookWaitFor } from 'storybook/test';
 import { requireShadowRoot } from './dom-stubs';
 
 interface StorybookWaitOptions {
   timeout?: number;
 }
 
+export function waitFor<T>(
+  callback: () => T | Promise<T>,
+  options: StorybookWaitOptions = {},
+): Promise<T> {
+  return storybookWaitFor(callback, { timeout: 5000, ...options });
+}
+
 export async function waitForElement<ElementType extends Element>(
   container: ParentNode,
   selector: string,
diff --git a/packages/ui/src/test/storybook-font-stylesheet.ts b/packages/ui/src/test/storybook-font-stylesheet.ts
new file mode 100644
index 00000000..bd2530b1
--- /dev/null
+++ b/packages/ui/src/test/storybook-font-stylesheet.ts
@@ -0,0 +1,8 @@
+export function isExpectedFontStylesheetEvent(event: Event): boolean {
+  const target = event.target;
+  return (
+    target instanceof HTMLLinkElement &&
+    target.rel === 'stylesheet' &&
+    target.href.includes('/v1/fonts/1/stylesheet?app_key=')
+  );
+}
diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts
index 55302887..2e5ba721 100644
--- a/packages/ui/vitest.config.ts
+++ b/packages/ui/vitest.config.ts
@@ -7,6 +7,12 @@ import { fileURLToPath } from 'node:url';
 
 const dirname = path.dirname(fileURLToPath(import.meta.url));
 
+const browserName = process.env.VITEST_BROWSER ?? 'chromium';
+if (!['chromium', 'firefox', 'webkit'].includes(browserName)) {
+  throw new Error(`Unsupported VITEST_BROWSER: ${browserName}`);
+}
+const storyTags = (process.env.VITEST_STORY_TAG ?? 'integration').split(',');
+
 export default defineConfig({
   plugins: [react()],
   test: {
@@ -51,7 +57,7 @@ export default defineConfig({
             // This should match your package.json script to run Storybook
             // The --ci flag will skip prompts and not open a browser
             storybookScript: 'pnpm storybook --no-open',
-            tags: { include: ['integration'] },
+            tags: { include: storyTags },
           }),
         ],
         test: {
@@ -65,7 +71,7 @@ export default defineConfig({
             // Make sure to install Playwright
             provider: playwright(),
             headless: true,
-            instances: [{ browser: 'chromium' }],
+            instances: [{ browser: browserName as 'chromium' | 'firefox' | 'webkit' }],
           },
           setupFiles: ['./.storybook/vitest.setup.ts'],
         },