@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/BottomSheet/BottomSheetStacking.test.tsx

@@ -0,0 +1,3184 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file BottomSheetStacking.test.tsx
+ * @input Uses vitest, @testing-library/react, react-dom/server, BottomSheet,
+ *   BottomSheetSwitcher, Dialog, and the private bottom-sheet stack registry
+ * @output Tests for stacked bottom sheets, one group per requirement: no new
+ *   API, open order, same-commit opens, covered sheets, dismissal, one scrim,
+ *   closing a covered sheet, focus, the native top layer, concurrent React,
+ *   non-modal sheets, and unchanged standalone behaviour
+ * @position Core testing; validates bottomSheetStack.ts and the stacking
+ *   behaviour of BottomSheet.tsx and BottomSheetSwitcher.tsx
+ *
+ * SYNC: When bottomSheetStack.ts, BottomSheet.tsx or BottomSheetSwitcher.tsx
+ * change their stacking behaviour, update these tests to match.
+ */
+
+import {act, fireEvent, render, screen} from '@testing-library/react';
+import {
+  Activity,
+  StrictMode,
+  Suspense,
+  startTransition,
+  useState,
+  type ReactNode,
+} from 'react';
+import {createPortal, flushSync} from 'react-dom';
+import {createRoot, hydrateRoot} from 'react-dom/client';
+import {renderToString} from 'react-dom/server';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {Dialog} from '../Dialog';
+import {Popover} from '../Popover';
+import {subscribeModalOutlets} from '../Layer/modalOutlet';
+import * as BottomSheetModule from './index';
+import {BottomSheet} from './BottomSheet';
+import {BottomSheetSwitcher} from './BottomSheetSwitcher';
+import {
+  BOTTOM_SHEET_STACK_STATE_FOR_TESTS,
+  getBottomSheetStackForTests,
+  registerBottomSheet,
+  resetBottomSheetStackForTests,
+} from './bottomSheetStack';
+import {__resetInteractionModalityForTest} from '../utils/interactionModality';
+
+/**
+ * Every native showModal/show/close, in order, with the dialog. The label is
+ * read when a test asks, because a switcher labels its dialog from state its
+ * items register in the same commit that shows it.
+ */
+let nativeLog: {
+  call: 'showModal' | 'show' | 'close' | 'showPopover' | 'hidePopover';
+  dialog: HTMLElement;
+}[] = [];
+
+beforeEach(() => {
+  nativeLog = [];
+  resetBottomSheetStackForTests();
+  __resetInteractionModalityForTest();
+  HTMLDialogElement.prototype.showModal = vi.fn(function (
+    this: HTMLDialogElement,
+  ) {
+    nativeLog.push({call: 'showModal', dialog: this});
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.show = vi.fn(function (this: HTMLDialogElement) {
+    nativeLog.push({call: 'show', dialog: this});
+    this.setAttribute('open', '');
+  });
+  // A non-modal sheet is a manual popover; jsdom's stand-ins keep the same
+  // `open` marker the dialog paths use (the Drawer tests do the same).
+  HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
+    nativeLog.push({call: 'showPopover', dialog: this});
+    this.setAttribute('open', '');
+  });
+  HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+    nativeLog.push({call: 'hidePopover', dialog: this});
+    this.removeAttribute('open');
+  });
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    nativeLog.push({call: 'close', dialog: this});
+    this.removeAttribute('open');
+  });
+  if (!Element.prototype.setPointerCapture) {
+    Element.prototype.setPointerCapture = vi.fn();
+    Element.prototype.releasePointerCapture = vi.fn();
+  }
+  window.scrollTo = vi.fn();
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockReturnValue({
+      matches: false,
+      media: '',
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }),
+  );
+  vi.stubGlobal(
+    'requestAnimationFrame',
+    vi.fn((callback: FrameRequestCallback) => {
+      callback(0);
+      return 1;
+    }),
+  );
+  vi.stubGlobal('cancelAnimationFrame', vi.fn());
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function getDialog(
+  label: string,
+  root: ParentNode = document,
+): HTMLDialogElement {
+  const dialog = root.querySelector<HTMLDialogElement>(
+    `dialog[aria-label="${label}"]`,
+  );
+  if (dialog == null) {
+    throw new Error(`dialog "${label}" not found`);
+  }
+  return dialog;
+}
+
+function getPanel(dialog: HTMLElement): HTMLElement {
+  const panels = Array.from(
+    dialog.querySelectorAll<HTMLElement>('.astryx-bottom-sheet'),
+  ).filter(panel => panel.closest('dialog') === dialog);
+  const panel =
+    panels.find(candidate => !candidate.parentElement?.hidden) ?? panels[0];
+  if (panel == null) {
+    throw new Error('sheet panel not found');
+  }
+  return panel;
+}
+
+function getPositioner(dialog: HTMLElement): HTMLElement {
+  const positioner = getPanel(dialog).parentElement;
+  if (positioner == null) {
+    throw new Error('positioner not found');
+  }
+  return positioner;
+}
+
+function getHandle(dialog: HTMLElement): HTMLElement {
+  const handle = getPanel(dialog).querySelector<HTMLElement>(
+    '[aria-hidden="true"]',
+  );
+  if (handle == null) {
+    throw new Error('grab handle not found');
+  }
+  return handle;
+}
+
+function scrim(dialog: HTMLElement): string {
+  return dialog.style.getPropertyValue('--_sheet-scrim-opacity');
+}
+
+/** The inline pin on the scrim transition: `0s` for the frame it changes hands. */
+function scrimDuration(dialog: HTMLElement): string {
+  return dialog.style.getPropertyValue('--_sheet-scrim-duration');
+}
+
+/**
+ * Record every scrim-opacity write with the transition pin in force at that
+ * moment. rAF is synchronous in these tests, so the pin is gone by the time
+ * an assertion reads the style; the spy sees it as the browser would.
+ */
+function recordScrimWrites(): {
+  writes: {opacity: string; pin: string}[];
+  restore: () => void;
+} {
+  const writes: {opacity: string; pin: string}[] = [];
+  const setProperty = CSSStyleDeclaration.prototype.setProperty;
+  CSSStyleDeclaration.prototype.setProperty = function (
+    this: CSSStyleDeclaration,
+    name: string,
+    value: string | null,
+    priority?: string,
+  ) {
+    if (name === '--_sheet-scrim-opacity') {
+      writes.push({
+        opacity: String(value),
+        pin: this.getPropertyValue('--_sheet-scrim-duration'),
+      });
+    }
+    return setProperty.call(this, name, value, priority);
+  };
+  return {
+    writes,
+    restore: () => {
+      CSSStyleDeclaration.prototype.setProperty = setProperty;
+    },
+  };
+}
+
+/** `label:state:depth` for every presented modal sheet, bottom to top. */
+function stackSummary(): string[] {
+  return getBottomSheetStackForTests().map(({element, isOpen, view}) => {
+    const label = element?.getAttribute('aria-label') ?? '?';
+    const state = !isOpen ? 'exiting' : view.isTop ? 'top' : 'covered';
+    return `${label}:${state}:${view.depth}`;
+  });
+}
+
+/** The final native top-layer order: the last showModal of each open dialog. */
+function topLayerOrder(): string[] {
+  const order: HTMLElement[] = [];
+  for (const entry of nativeLog) {
+    const index = order.indexOf(entry.dialog);
+    if (index !== -1) {
+      order.splice(index, 1);
+    }
+    if (entry.call === 'showModal') {
+      order.push(entry.dialog);
+    }
+  }
+  return order.map(dialog => dialog.getAttribute('aria-label') ?? '?');
+}
+
+function openDialogs(): string[] {
+  return Array.from(document.querySelectorAll('dialog[open]')).map(
+    dialog => dialog.getAttribute('aria-label') ?? '?',
+  );
+}
+
+// The sheet keeps its dialog open through the exit animation; jsdom never
+// runs it, so end it the way the panel's transition would.
+function finishExit(dialog: HTMLElement) {
+  for (const panel of Array.from(
+    dialog.querySelectorAll<HTMLElement>('.astryx-bottom-sheet'),
+  )) {
+    if (panel.closest('dialog') === dialog) {
+      fireEvent.transitionEnd(panel, {propertyName: 'transform'});
+    }
+  }
+}
+
+/**
+ * Complete a switcher handoff: the entering step's panel finishes its
+ * transform, the retained step fades, and its dialog closes.
+ */
+function finishHandoff(entering: HTMLElement, retained: HTMLElement) {
+  for (const panel of Array.from(
+    entering.querySelectorAll<HTMLElement>('.astryx-bottom-sheet'),
+  )) {
+    if (panel.closest('dialog') === entering) {
+      fireEvent.transitionEnd(panel, {propertyName: 'transform'});
+    }
+  }
+  for (const panel of Array.from(
+    retained.querySelectorAll<HTMLElement>('.astryx-bottom-sheet'),
+  )) {
+    if (panel.closest('dialog') === retained) {
+      fireEvent.transitionEnd(panel, {propertyName: 'opacity'});
+    }
+  }
+}
+
+function pressEscape(): KeyboardEvent {
+  const event = new KeyboardEvent('keydown', {
+    key: 'Escape',
+    bubbles: true,
+    cancelable: true,
+  });
+  document.dispatchEvent(event);
+  return event;
+}
+
+function fireCancel(dialog: Element): Event {
+  const event = new Event('cancel', {bubbles: false, cancelable: true});
+  dialog.dispatchEvent(event);
+  return event;
+}
+
+// Drive a pointer drag on a grab handle. jsdom PointerEvents don't carry
+// clientY, so dispatch plain events with the coords the handlers read.
+function drag(handle: HTMLElement, points: {y: number}[]) {
+  const [down, ...rest] = points;
+  fireEvent.pointerDown(handle, {
+    pointerId: 1,
+    clientY: down.y,
+    button: 0,
+    isPrimary: true,
+  });
+  for (const point of rest) {
+    fireEvent.pointerMove(handle, {pointerId: 1, clientY: point.y});
+  }
+  const last = points[points.length - 1];
+  fireEvent.pointerUp(handle, {pointerId: 1, clientY: last.y});
+}
+
+function classes(element: Element): string {
+  return element.className;
+}
+
+/**
+ * Two sibling sheets, each with its own state, plus an opener for each. The
+ * default writes A before B; `reversed` writes B before A so an open of A
+ * then B is an open out of tree order.
+ */
+function Siblings({
+  reversed = false,
+  purposeB,
+  initialA = false,
+  initialB = false,
+}: {
+  reversed?: boolean;
+  purposeB?: 'info' | 'form' | 'required';
+  initialA?: boolean;
+  initialB?: boolean;
+}) {
+  const [isAOpen, setIsAOpen] = useState(initialA);
+  const [isBOpen, setIsBOpen] = useState(initialB);
+  const a = (
+    <BottomSheet key="A" isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+      <button type="button" onClick={() => setIsBOpen(true)}>
+        Open B
+      </button>
+      <input aria-label="A field" defaultValue="" />
+    </BottomSheet>
+  );
+  const b = (
+    <BottomSheet
+      key="B"
+      isOpen={isBOpen}
+      onOpenChange={setIsBOpen}
+      label="B"
+      purpose={purposeB}>
+      <button type="button" onClick={() => setIsBOpen(false)}>
+        Close B
+      </button>
+      <button type="button" onClick={() => setIsAOpen(false)}>
+        Close A from B
+      </button>
+      <input aria-label="B field" defaultValue="" />
+    </BottomSheet>
+  );
+  return (
+    <>
+      <button type="button" onClick={() => setIsAOpen(true)}>
+        Open A
+      </button>
+      {reversed ? [b, a] : [a, b]}
+    </>
+  );
+}
+
+/** A → B → C, each rendered inside the previous sheet's content. */
+function Nested({
+  initial = false,
+  closeAllFromC = false,
+}: {
+  initial?: boolean;
+  closeAllFromC?: boolean;
+}) {
+  const [isAOpen, setIsAOpen] = useState(initial);
+  const [isBOpen, setIsBOpen] = useState(initial);
+  const [isCOpen, setIsCOpen] = useState(initial);
+  return (
+    <>
+      <button type="button" onClick={() => setIsAOpen(true)}>
+        Open A
+      </button>
+      <button type="button" onClick={() => setIsAOpen(false)}>
+        Close A from page
+      </button>
+      <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+        <button type="button" onClick={() => setIsBOpen(true)}>
+          Open B
+        </button>
+        <BottomSheet isOpen={isBOpen} onOpenChange={setIsBOpen} label="B">
+          <button type="button" onClick={() => setIsCOpen(true)}>
+            Open C
+          </button>
+          <BottomSheet isOpen={isCOpen} onOpenChange={setIsCOpen} label="C">
+            <button
+              type="button"
+              onClick={() => {
+                if (closeAllFromC) {
+                  setIsAOpen(false);
+                  setIsBOpen(false);
+                }
+                setIsCOpen(false);
+              }}>
+              Close C
+            </button>
+          </BottomSheet>
+        </BottomSheet>
+      </BottomSheet>
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Requirement 1 — no new public API; a lone sheet is unchanged
+// ---------------------------------------------------------------------------
+
+describe('R1 no new public API', () => {
+  it('exports exactly BottomSheet and BottomSheetSwitcher', () => {
+    expect(Object.keys(BottomSheetModule).sort()).toEqual([
+      'BottomSheet',
+      'BottomSheetSwitcher',
+    ]);
+  });
+
+  it('a sheet on its own carries no stack state and behaves as before', () => {
+    const onOpenChange = vi.fn();
+    render(
+      <BottomSheet isOpen onOpenChange={onOpenChange} label="Alone">
+        Content
+      </BottomSheet>,
+    );
+    const dialog = getDialog('Alone');
+    expect(dialog).toHaveAttribute('open');
+    expect(dialog).toHaveAttribute('aria-modal', 'true');
+    expect(dialog).not.toHaveAttribute('inert');
+    expect(dialog).not.toHaveAttribute('data-sheet-stack');
+    expect(dialog).not.toHaveAttribute('data-sheet-stack-depth');
+    expect(scrim(dialog)).toBe('1');
+    expect(getComputedStyle(getPositioner(dialog)).transform).toBe('');
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledTimes(1);
+    expect(getPanel(dialog)).toHaveFocus();
+
+    act(() => {
+      pressEscape();
+    });
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 2 — order is open order
+// ---------------------------------------------------------------------------
+
+describe('R2 order is open order', () => {
+  it('a sheet opened over another stacks on top; the covered one recedes', () => {
+    render(<Siblings />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open A'}));
+    expect(stackSummary()).toEqual(['A:top:0']);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+    expect(getDialog('A')).toHaveAttribute('data-sheet-stack', 'covered');
+    expect(getDialog('A')).toHaveAttribute('data-sheet-stack-depth', '1');
+    expect(getDialog('B')).toHaveAttribute('data-sheet-stack', 'top');
+    expect(getDialog('B')).not.toHaveAttribute('data-sheet-stack-depth');
+    expect(topLayerOrder()).toEqual(['A', 'B']);
+  });
+
+  it('a sheet that closes and reopens goes back on top', () => {
+    function Three() {
+      const [open, setOpen] = useState({A: true, B: true, C: true});
+      const toggle = (id: 'A' | 'B' | 'C', value: boolean) =>
+        setOpen(current => ({...current, [id]: value}));
+      return (
+        <>
+          <button type="button" onClick={() => toggle('A', false)}>
+            Close A
+          </button>
+          <button type="button" onClick={() => toggle('A', true)}>
+            Reopen A
+          </button>
+          <BottomSheet
+            isOpen={open.A}
+            onOpenChange={v => toggle('A', v)}
+            label="A">
+            a
+          </BottomSheet>
+          <BottomSheet
+            isOpen={open.B}
+            onOpenChange={v => toggle('B', v)}
+            label="B">
+            b
+          </BottomSheet>
+          <BottomSheet
+            isOpen={open.C}
+            onOpenChange={v => toggle('C', v)}
+            label="C">
+            c
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<Three />);
+    expect(stackSummary()).toEqual(['A:covered:2', 'B:covered:1', 'C:top:0']);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Close A'}));
+    finishExit(getDialog('A'));
+    expect(stackSummary()).toEqual(['B:covered:1', 'C:top:0']);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Reopen A'}));
+    expect(stackSummary()).toEqual(['B:covered:2', 'C:covered:1', 'A:top:0']);
+    expect(topLayerOrder()).toEqual(['B', 'C', 'A']);
+  });
+
+  it('a sheet reopened during its exit returns on top', () => {
+    render(<Siblings initialA initialB />);
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+    fireEvent.click(screen.getByRole('button', {name: 'Close A from B'}));
+    expect(stackSummary()).toEqual(['A:exiting:1', 'B:top:0']);
+    // Reopen before the exit animation has finished.
+    fireEvent.click(screen.getByRole('button', {name: 'Open A'}));
+    expect(stackSummary()).toEqual(['B:covered:1', 'A:top:0']);
+    expect(topLayerOrder()).toEqual(['B', 'A']);
+    expect(scrim(getDialog('A'))).toBe('0');
+    expect(scrim(getDialog('B'))).toBe('1');
+  });
+
+  it('sheets in separate components stack the same way', () => {
+    function Owner({label, children}: {label: string; children?: ReactNode}) {
+      const [isOpen, setIsOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setIsOpen(true)}>
+            Open {label}
+          </button>
+          <BottomSheet isOpen={isOpen} onOpenChange={setIsOpen} label={label}>
+            {children}
+          </BottomSheet>
+        </>
+      );
+    }
+    render(
+      <>
+        <Owner label="First" />
+        <Owner label="Second" />
+      </>,
+    );
+    fireEvent.click(screen.getByRole('button', {name: 'Open Second'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Open First'}));
+    expect(stackSummary()).toEqual(['Second:covered:1', 'First:top:0']);
+  });
+
+  it('a sheet inside another sheet’s content stacks above it', () => {
+    render(<Nested />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open A'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Open C'}));
+    expect(stackSummary()).toEqual(['A:covered:2', 'B:covered:1', 'C:top:0']);
+    expect(topLayerOrder()).toEqual(['A', 'B', 'C']);
+  });
+
+  it('a whole switcher is one level, and switching its step keeps its place', () => {
+    function App() {
+      const [isAOpen, setIsAOpen] = useState(false);
+      const [step, setStep] = useState<string | null>(null);
+      const [isCOpen, setIsCOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setIsAOpen(true)}>
+            Open A
+          </button>
+          <button type="button" onClick={() => setStep('one')}>
+            Open switcher
+          </button>
+          <button type="button" onClick={() => setStep('two')}>
+            Step two
+          </button>
+          <button type="button" onClick={() => setIsCOpen(true)}>
+            Open C
+          </button>
+          <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+            a
+          </BottomSheet>
+          <BottomSheetSwitcher activeSheet={step} onActiveSheetChange={setStep}>
+            <BottomSheet sheetId="one" label="One">
+              one
+            </BottomSheet>
+            <BottomSheet sheetId="two" label="Two">
+              two
+            </BottomSheet>
+          </BottomSheetSwitcher>
+          <BottomSheet isOpen={isCOpen} onOpenChange={setIsCOpen} label="C">
+            c
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open A'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Open switcher'}));
+    expect(stackSummary()).toEqual(['A:covered:1', 'One:top:0']);
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledTimes(2);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Step two'}));
+    // Each step owns its dialog: the entering step's is presented above the
+    // retained one, and the flow's level is now that dialog; its place in
+    // the stack is unchanged.
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledTimes(3);
+    expect(stackSummary()).toEqual(['A:covered:1', 'Two:top:0']);
+    finishHandoff(getDialog('Two'), getDialog('One'));
+    expect(stackSummary()).toEqual(['A:covered:1', 'Two:top:0']);
+    expect(getDialog('One')).not.toHaveAttribute('open');
+
+    fireEvent.click(screen.getByRole('button', {name: 'Open C'}));
+    expect(stackSummary()).toEqual(['A:covered:2', 'Two:covered:1', 'C:top:0']);
+    const switcherDialog = getDialog('Two');
+    expect(switcherDialog).toHaveAttribute('data-sheet-stack', 'covered');
+    expect(switcherDialog).toHaveAttribute('data-sheet-stack-depth', '1');
+    expect(switcherDialog).toHaveAttribute('inert');
+    expect(switcherDialog).toHaveAttribute('aria-hidden', 'true');
+    // The step's positioner recedes with the switcher.
+    for (const positioner of Array.from(
+      switcherDialog.querySelectorAll<HTMLElement>('.astryx-bottom-sheet'),
+    ).map(panel => panel.parentElement!)) {
+      expect(getComputedStyle(positioner).transform).toContain('scale(.96)');
+    }
+    // One scrim: A, the bottom sheet, owns it; the step and C are clear.
+    expect(scrim(getDialog('A'))).toBe('1');
+    expect(scrim(switcherDialog)).toBe('0');
+    expect(scrim(getDialog('C'))).toBe('0');
+  });
+
+  it('a sheet over a switcher flow keeps the field being typed in when the flow changes step from code (the re-show lands on it, no panel focus)', () => {
+    function App() {
+      const [step, setStep] = useState<string | null>('one');
+      const [isCOpen, setIsCOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setStep('two')}>
+            Step two
+          </button>
+          <button type="button" onClick={() => setIsCOpen(true)}>
+            Open C
+          </button>
+          <BottomSheetSwitcher activeSheet={step} onActiveSheetChange={setStep}>
+            <BottomSheet sheetId="one" label="One">
+              one
+            </BottomSheet>
+            <BottomSheet sheetId="two" label="Two">
+              two
+            </BottomSheet>
+          </BottomSheetSwitcher>
+          <BottomSheet isOpen={isCOpen} onOpenChange={setIsCOpen} label="C">
+            <label>
+              Note <input aria-label="Note" />
+            </label>
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open C'}));
+    expect(stackSummary()).toEqual(['One:covered:1', 'C:top:0']);
+    const note = screen.getByRole('textbox', {name: 'Note'});
+    note.focus();
+    fireEvent.change(note, {target: {value: 'hel'}});
+    expect(note).toHaveFocus();
+    const focusEvents: string[] = [];
+    note.addEventListener('blur', () => focusEvents.push('blur'));
+    note.addEventListener('focus', () => focusEvents.push('focus'));
+    const showsBefore = vi.mocked(HTMLDialogElement.prototype.showModal).mock
+      .calls.length;
+
+    // The flow beneath changes step from code: its level is a new dialog, so
+    // C is closed and shown again to stay on top.
+    fireEvent.click(screen.getByRole('button', {name: 'Step two'}));
+    const cShows = vi
+      .mocked(HTMLDialogElement.prototype.showModal)
+      .mock.contexts.slice(showsBefore)
+      .filter(dialog => dialog === getDialog('C')).length;
+    expect(cShows).toBe(1);
+    expect(stackSummary()).toEqual(['Two:covered:1', 'C:top:0']);
+    // Focus is still in the field; the next keystrokes land there, and the
+    // delegate attribute the re-show used is gone again.
+    expect(note).toHaveFocus();
+    expect(note).not.toHaveAttribute('autofocus');
+    expect((note as HTMLInputElement).value).toBe('hel');
+    // At most one blur and one focus reached the field (the top layer is
+    // append-only: a re-show closes the dialog first); never a focus on the
+    // panel in between.
+    expect(focusEvents.filter(e => e === 'blur').length).toBeLessThanOrEqual(1);
+    expect(focusEvents.filter(e => e === 'focus').length).toBeLessThanOrEqual(
+      1,
+    );
+    expect(
+      getDialog('C').querySelector('.astryx-bottom-sheet'),
+    ).not.toHaveFocus();
+  });
+
+  it('a Popover presented as a BottomSheet, opened from a sheet, is one level of the stack: it covers the sheet, Escape reaches only it, and focus returns into the sheet', async () => {
+    function App() {
+      const [isAOpen, setIsAOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setIsAOpen(true)}>
+            Open A
+          </button>
+          <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+            <Popover
+              label="Filters"
+              presentation="bottom-sheet"
+              content={<button type="button">Apply</button>}>
+              <button type="button">Filter</button>
+            </Popover>
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open A'}));
+    const filter = screen.getByRole('button', {name: 'Filter'});
+    filter.focus();
+    await act(async () => {
+      fireEvent.click(filter);
+      // The sheet presentation loads on demand.
+      await Promise.resolve();
+    });
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    expect(stackSummary()).toEqual(['A:covered:1', 'Filters:top:0']);
+    // A contains the Popover's dialog, so it is left to the browser's modal
+    // blocking rather than marked inert (inert on it would reach the top
+    // sheet too); it recedes and loses its scrim like any covered sheet.
+    expect(getDialog('A')).toHaveAttribute('data-sheet-stack', 'covered');
+    expect(getDialog('A')).not.toHaveAttribute('inert');
+    expect(getDialog('Filters')).not.toHaveAttribute('inert');
+    expect(getDialog('Filters')).toHaveAttribute('aria-modal', 'true');
+    // Escape reaches only the top sheet (the Popover's): A stays open.
+    fireEvent.keyDown(getDialog('Filters'), {key: 'Escape'});
+    finishExit(getDialog('Filters'));
+    expect(stackSummary()).toEqual(['A:top:0']);
+    expect(getDialog('A')).not.toHaveAttribute('data-sheet-stack');
+    // Focus returns into A, to the control that opened the Popover.
+    expect(filter).toHaveFocus();
+  });
+
+  it('a standalone sheet inside a switcher step stacks above the switcher', () => {
+    function App() {
+      const [isNestedOpen, setIsNestedOpen] = useState(false);
+      return (
+        <BottomSheetSwitcher
+          activeSheet="details"
+          onActiveSheetChange={() => {}}>
+          <BottomSheet sheetId="details" label="Details">
+            <button type="button" onClick={() => setIsNestedOpen(true)}>
+              Open nested
+            </button>
+            <BottomSheet
+              isOpen={isNestedOpen}
+              onOpenChange={setIsNestedOpen}
+              label="Nested">
+              nested
+            </BottomSheet>
+          </BottomSheet>
+        </BottomSheetSwitcher>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open nested'}));
+    expect(stackSummary()).toEqual(['Details:covered:1', 'Nested:top:0']);
+    expect(topLayerOrder()).toEqual(['Details', 'Nested']);
+  });
+
+  it('opening out of tree order puts the later-opened sheet on top', () => {
+    render(<Siblings reversed />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open A'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+    // B is written before A in the DOM, but opened after it.
+    const dialogs = Array.from(document.querySelectorAll('dialog')).map(d =>
+      d.getAttribute('aria-label'),
+    );
+    expect(dialogs).toEqual(['B', 'A']);
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+    expect(topLayerOrder()).toEqual(['A', 'B']);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 3 — same-update opens break ties by tree order, first frame
+// ---------------------------------------------------------------------------
+
+describe('R3 same-update opens (deep link)', () => {
+  function mountSync(element: ReactNode) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    let microtaskRan = false;
+    void Promise.resolve().then(() => {
+      microtaskRan = true;
+    });
+    // eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the test asserts the first synchronous frame
+    flushSync(() => {
+      root.render(element);
+    });
+    return {
+      container,
+      microtaskRan: () => microtaskRan,
+      unmount: () => {
+        act(() => root.unmount());
+        container.remove();
+      },
+    };
+  }
+
+  it('a depth-3 deep link of nested sheets is right in the first painted frame', () => {
+    const mounted = mountSync(<Nested initial />);
+    expect(mounted.microtaskRan()).toBe(false);
+
+    // Effects ran child first (C, B, A), yet the native top layer ends in
+    // tree order and every sheet already carries its stack state.
+    expect(topLayerOrder()).toEqual(['A', 'B', 'C']);
+    expect(stackSummary()).toEqual(['A:covered:2', 'B:covered:1', 'C:top:0']);
+    expect(getDialog('A')).toHaveAttribute('data-sheet-stack', 'covered');
+    expect(getDialog('A')).toHaveAttribute('data-sheet-stack-depth', '2');
+    expect(getDialog('B')).toHaveAttribute('data-sheet-stack-depth', '1');
+    expect(getDialog('C')).toHaveAttribute('data-sheet-stack', 'top');
+    expect(getComputedStyle(getPositioner(getDialog('A'))).transform).toContain(
+      'scale(.92)',
+    );
+    expect(getComputedStyle(getPositioner(getDialog('B'))).transform).toContain(
+      'scale(.96)',
+    );
+    expect(getComputedStyle(getPositioner(getDialog('C'))).transform).toBe('');
+    expect(scrim(getDialog('A'))).toBe('1');
+    expect(scrim(getDialog('B'))).toBe('0');
+    expect(scrim(getDialog('C'))).toBe('0');
+    expect(getPanel(getDialog('C'))).toHaveFocus();
+    expect(mounted.microtaskRan()).toBe(false);
+    mounted.unmount();
+  });
+
+  it('siblings opened in one commit stack in document order', () => {
+    const mounted = mountSync(<Siblings reversed initialA initialB />);
+    // B is written first, so with no open order between them B is below A.
+    expect(stackSummary()).toEqual(['B:covered:1', 'A:top:0']);
+    expect(topLayerOrder()).toEqual(['B', 'A']);
+    mounted.unmount();
+  });
+
+  it('several sheets opened in one later update are ordered by tree, and a later open goes above them', () => {
+    function App() {
+      const [all, setAll] = useState(false);
+      const [isDOpen, setIsDOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setAll(true)}>
+            Deep link
+          </button>
+          <button type="button" onClick={() => setIsDOpen(true)}>
+            Open D
+          </button>
+          <BottomSheet isOpen={all} onOpenChange={() => {}} label="A">
+            <BottomSheet isOpen={all} onOpenChange={() => {}} label="B">
+              b
+            </BottomSheet>
+          </BottomSheet>
+          <BottomSheet isOpen={all} onOpenChange={() => {}} label="C">
+            c
+          </BottomSheet>
+          <BottomSheet isOpen={isDOpen} onOpenChange={setIsDOpen} label="D">
+            d
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Deep link'}));
+    expect(stackSummary()).toEqual(['A:covered:2', 'B:covered:1', 'C:top:0']);
+    expect(topLayerOrder()).toEqual(['A', 'B', 'C']);
+    fireEvent.click(screen.getByRole('button', {name: 'Open D'}));
+    expect(stackSummary()).toEqual([
+      'A:covered:3',
+      'B:covered:2',
+      'C:covered:1',
+      'D:top:0',
+    ]);
+    expect(topLayerOrder()).toEqual(['A', 'B', 'C', 'D']);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 4 — covered sheets stay mounted, are blocked, and recede
+// ---------------------------------------------------------------------------
+
+describe('R4 covered sheets', () => {
+  it('keeps a covered sheet mounted with its state and marks a sibling-covered one inert', () => {
+    render(<Siblings />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open A'}));
+    fireEvent.change(screen.getByLabelText('A field'), {
+      target: {value: 'kept'},
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+
+    const a = getDialog('A');
+    expect(a).toHaveAttribute('open');
+    expect(a).toHaveAttribute('inert');
+    expect(a).toHaveAttribute('aria-hidden', 'true');
+    expect(getDialog('B')).not.toHaveAttribute('inert');
+    expect(screen.getByLabelText('A field')).toHaveValue('kept');
+
+    fireEvent.click(screen.getByRole('button', {name: 'Close B'}));
+    expect(a).not.toHaveAttribute('inert');
+    expect(a).not.toHaveAttribute('aria-hidden');
+    expect(screen.getByLabelText('A field')).toHaveValue('kept');
+  });
+
+  it('leaves a covered sheet that contains the top sheet to the browser’s modal blocking', () => {
+    render(<Nested initial />);
+    // inert on A would reach C, which lives inside A's content.
+    expect(getDialog('A')).not.toHaveAttribute('inert');
+    expect(getDialog('B')).not.toHaveAttribute('inert');
+    expect(getDialog('C')).not.toHaveAttribute('inert');
+    expect(getDialog('A')).toHaveAttribute('data-sheet-stack', 'covered');
+    expect(getDialog('C')).toHaveAttribute('data-sheet-stack', 'top');
+    // The top sheet is the last modal dialog shown, so the browser blocks
+    // everything outside it, A and B included.
+    expect(topLayerOrder().at(-1)).toBe('C');
+  });
+
+  it('recedes by depth: 0.96 / −8px at depth 1, 0.92 / −16px from depth 2 on', () => {
+    function Four() {
+      return (
+        <>
+          <BottomSheet isOpen onOpenChange={() => {}} label="A">
+            a
+          </BottomSheet>
+          <BottomSheet isOpen onOpenChange={() => {}} label="B">
+            b
+          </BottomSheet>
+          <BottomSheet isOpen onOpenChange={() => {}} label="C">
+            c
+          </BottomSheet>
+          <BottomSheet isOpen onOpenChange={() => {}} label="D">
+            d
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<Four />);
+    const transform = (label: string) =>
+      getComputedStyle(getPositioner(getDialog(label))).transform;
+    expect(getDialog('A')).toHaveAttribute('data-sheet-stack-depth', '3');
+    expect(transform('A')).toBe(
+      'translateY(calc(-2 * var(--spacing-2))) scale(.92)',
+    );
+    expect(transform('B')).toBe(
+      'translateY(calc(-2 * var(--spacing-2))) scale(.92)',
+    );
+    expect(transform('C')).toBe(
+      'translateY(calc(-1 * var(--spacing-2))) scale(.96)',
+    );
+    expect(transform('D')).toBe('');
+    expect(
+      getComputedStyle(getPositioner(getDialog('C'))).transformOrigin,
+    ).toBe('50% 0');
+  });
+
+  it('only sheets count: a Dialog over a sheet does not make it recede', () => {
+    function App() {
+      const [isDialogOpen, setIsDialogOpen] = useState(false);
+      return (
+        <BottomSheet isOpen onOpenChange={() => {}} label="Sheet">
+          <button type="button" onClick={() => setIsDialogOpen(true)}>
+            Open dialog
+          </button>
+          <Dialog
+            isOpen={isDialogOpen}
+            onOpenChange={setIsDialogOpen}
+            aria-label="Over">
+            over
+          </Dialog>
+        </BottomSheet>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open dialog'}));
+    expect(getDialog('Over')).toHaveAttribute('open');
+    expect(stackSummary()).toEqual(['Sheet:top:0']);
+    expect(getDialog('Sheet')).not.toHaveAttribute('data-sheet-stack');
+    expect(getComputedStyle(getPositioner(getDialog('Sheet'))).transform).toBe(
+      '',
+    );
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 5 — dismissal reaches only the top sheet, via its own callback
+// ---------------------------------------------------------------------------
+
+describe('R5 dismissal', () => {
+  function Pair({purposeB}: {purposeB?: 'info' | 'form' | 'required'}) {
+    return <Siblings initialA initialB purposeB={purposeB} />;
+  }
+
+  it('Escape closes only the top sheet', () => {
+    render(<Pair />);
+    let event!: KeyboardEvent;
+    act(() => {
+      event = pressEscape();
+    });
+    expect(event.defaultPrevented).toBe(true);
+    // The revealed sheet comes forward as the top sheet slides away.
+    expect(stackSummary()).toEqual(['A:top:0', 'B:exiting:0']);
+    expect(getDialog('B')).toHaveAttribute('open');
+    finishExit(getDialog('B'));
+    expect(stackSummary()).toEqual(['A:top:0']);
+    expect(getDialog('A')).toHaveAttribute('open');
+  });
+
+  it('a scrim tap closes only the top sheet', () => {
+    render(<Pair />);
+    fireEvent.click(getDialog('B'));
+    expect(stackSummary()).toEqual(['A:top:0', 'B:exiting:0']);
+    // Only the exiting sheet went; A is still open, and B's own callback was
+    // the one called (A's state is untouched).
+    expect(getDialog('A')).toHaveAttribute('open');
+  });
+
+  it('a swipe closes only the top sheet', () => {
+    render(<Pair />);
+    drag(getHandle(getDialog('B')), [{y: 0}, {y: 40}, {y: 120}]);
+    expect(stackSummary()).toEqual(['A:top:0', 'B:exiting:0']);
+    finishExit(getDialog('B'));
+    expect(stackSummary()).toEqual(['A:top:0']);
+  });
+
+  it('a platform close request pops the top sheet and is declined by a covered one', () => {
+    render(<Pair />);
+    const declined = fireCancel(getDialog('A'));
+    expect(declined.defaultPrevented).toBe(true);
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+
+    let accepted!: Event;
+    act(() => {
+      accepted = fireCancel(getDialog('B'));
+    });
+    expect(accepted.defaultPrevented).toBe(true);
+    expect(stackSummary()).toEqual(['A:top:0', 'B:exiting:0']);
+  });
+
+  it('Escape and a platform close reach the top sheet, not a covered sheet nested deeper in the tree', () => {
+    // B is rendered in A's content (one tree level deeper); C is written
+    // outside both and opened last, so C is the top sheet. The dismissal
+    // stack ranks tree depth first, so without the sheet stack standing a
+    // covered sheet down it would hand the press to B.
+    function App() {
+      const [isAOpen, setIsAOpen] = useState(true);
+      const [isBOpen, setIsBOpen] = useState(true);
+      const [isCOpen, setIsCOpen] = useState(false);
+      return (
+        <>
+          <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+            <button type="button" onClick={() => setIsCOpen(true)}>
+              Open C from A
+            </button>
+            <BottomSheet isOpen={isBOpen} onOpenChange={setIsBOpen} label="B">
+              <button type="button" onClick={() => setIsCOpen(true)}>
+                Open C from B
+              </button>
+            </BottomSheet>
+          </BottomSheet>
+          <BottomSheet isOpen={isCOpen} onOpenChange={setIsCOpen} label="C">
+            c
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open C from B'}));
+    expect(stackSummary()).toEqual(['A:covered:2', 'B:covered:1', 'C:top:0']);
+    act(() => {
+      pressEscape();
+    });
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0', 'C:exiting:0']);
+    expect(getDialog('B')).toHaveAttribute('open');
+    finishExit(getDialog('C'));
+    // Now B is the top sheet and takes the next press.
+    act(() => {
+      pressEscape();
+    });
+    expect(stackSummary()).toEqual(['A:top:0', 'B:exiting:0']);
+    finishExit(getDialog('B'));
+    // Platform close: the same rule. Reopen C over A.
+    fireEvent.click(screen.getByRole('button', {name: 'Open C from A'}));
+    expect(stackSummary()).toEqual(['A:covered:1', 'C:top:0']);
+    let accepted!: Event;
+    act(() => {
+      accepted = fireCancel(getDialog('C'));
+    });
+    expect(accepted.defaultPrevented).toBe(true);
+    expect(stackSummary()).toEqual(['A:top:0', 'C:exiting:0']);
+  });
+
+  it('honours the top sheet’s purpose: required blocks every path and shields the sheet below', () => {
+    render(<Pair purposeB="required" />);
+    let event!: KeyboardEvent;
+    act(() => {
+      event = pressEscape();
+    });
+    expect(event.defaultPrevented).toBe(true);
+    fireEvent.click(getDialog('B'));
+    drag(getHandle(getDialog('B')), [{y: 0}, {y: 40}, {y: 120}]);
+    fireCancel(getDialog('B'));
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+  });
+
+  it('honours a form top sheet: Escape closes, scrim and swipe do not', () => {
+    render(<Pair purposeB="form" />);
+    fireEvent.click(getDialog('B'));
+    drag(getHandle(getDialog('B')), [{y: 0}, {y: 40}, {y: 120}]);
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+    act(() => {
+      pressEscape();
+    });
+    expect(stackSummary()).toEqual(['A:top:0', 'B:exiting:0']);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 6 — one visible scrim per stack
+// ---------------------------------------------------------------------------
+
+describe('R6 one scrim', () => {
+  it('only the bottom sheet’s backdrop is visible; upper backdrops are transparent', () => {
+    render(<Nested initial />);
+    expect(scrim(getDialog('A'))).toBe('1');
+    expect(scrim(getDialog('B'))).toBe('0');
+    expect(scrim(getDialog('C'))).toBe('0');
+  });
+
+  it('keeps the dim stable through a push and a pop', () => {
+    render(<Siblings initialA />);
+    const a = getDialog('A');
+    expect(scrim(a)).toBe('1');
+    fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+    expect(scrim(a)).toBe('1');
+    expect(scrim(getDialog('B'))).toBe('0');
+    fireEvent.click(screen.getByRole('button', {name: 'Close B'}));
+    // The popped sheet's backdrop stays transparent through its exit; the
+    // bottom sheet's stays at full strength throughout.
+    expect(scrim(getDialog('B'))).toBe('0');
+    expect(scrim(a)).toBe('1');
+    finishExit(getDialog('B'));
+    expect(scrim(a)).toBe('1');
+    expect(scrimDuration(a)).toBe('');
+  });
+
+  it('hands the scrim over at once when the visible-backdrop sheet closes under others', () => {
+    render(<Siblings initialA initialB />);
+    const a = getDialog('A');
+    const b = getDialog('B');
+    const recorder = recordScrimWrites();
+    fireEvent.click(screen.getByRole('button', {name: 'Close A from B'}));
+    recorder.restore();
+    // The dim is B's from this frame on: B's backdrop appears with no fade
+    // and A's leaves with no fade, both pinned to 0s for the frame, so the
+    // page neither lightens nor darkens between the two. The pin is lifted
+    // again once the frame has painted.
+    expect(scrim(a)).toBe('0');
+    expect(scrim(b)).toBe('1');
+    expect(recorder.writes).toEqual(
+      expect.arrayContaining([
+        {opacity: '0', pin: '0s'},
+        {opacity: '1', pin: '0s'},
+      ]),
+    );
+    expect(scrimDuration(a)).toBe('');
+    expect(scrimDuration(b)).toBe('');
+    expect(getBottomSheetStackForTests()[0].view.isScrimTakenOver).toBe(true);
+    finishExit(a);
+    expect(stackSummary()).toEqual(['B:top:0']);
+    expect(scrim(b)).toBe('1');
+  });
+
+  it('a sheet closing alone fades its scrim out; no pin is applied', () => {
+    render(<Nested initial={false} />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open A'}));
+    const a = getDialog('A');
+    expect(scrim(a)).toBe('1');
+    const recorder = recordScrimWrites();
+    fireEvent.click(screen.getByRole('button', {name: 'Close A from page'}));
+    recorder.restore();
+    expect(scrim(a)).toBe('0');
+    expect(recorder.writes.every(write => write.pin === '')).toBe(true);
+    expect(classes(a)).toContain('scrimClosing');
+  });
+
+  it('a drag on an upper sheet never thins the visible scrim or reveals its own', () => {
+    render(<Siblings initialA initialB />);
+    // Partial drag that settles back: the gesture reports opacity changes.
+    drag(getHandle(getDialog('B')), [{y: 0}, {y: 10}, {y: 0}]);
+    expect(scrim(getDialog('A'))).toBe('1');
+    expect(scrim(getDialog('B'))).toBe('0');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 7 — closing a covered sheet from code
+// ---------------------------------------------------------------------------
+
+describe('R7 closing a covered sheet', () => {
+  it('takes the sheets rendered in its content with it, leaving their state to their owners', () => {
+    const onBChange = vi.fn();
+    const onCChange = vi.fn();
+    function App() {
+      const [isAOpen, setIsAOpen] = useState(true);
+      const [isBOpen, setIsBOpen] = useState(true);
+      const [isCOpen, setIsCOpen] = useState(true);
+      return (
+        <>
+          <button type="button" onClick={() => setIsAOpen(false)}>
+            Close A
+          </button>
+          <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+            <BottomSheet
+              isOpen={isBOpen}
+              onOpenChange={value => {
+                onBChange(value);
+                setIsBOpen(value);
+              }}
+              label="B">
+              <BottomSheet
+                isOpen={isCOpen}
+                onOpenChange={value => {
+                  onCChange(value);
+                  setIsCOpen(value);
+                }}
+                label="C">
+                c
+              </BottomSheet>
+            </BottomSheet>
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    expect(stackSummary()).toEqual(['A:covered:2', 'B:covered:1', 'C:top:0']);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Close A'}));
+    // All three leave together. B and C are not asked to change their state:
+    // their `isOpen` stays the consumer's (a Dialog in a closed Dialog works
+    // the same way), and they come back if A reopens while they are open.
+    expect(onBChange).not.toHaveBeenCalled();
+    expect(onCChange).not.toHaveBeenCalled();
+    expect(stackSummary()).toEqual([
+      'A:exiting:0',
+      'B:exiting:0',
+      'C:exiting:0',
+    ]);
+    finishExit(getDialog('C'));
+    finishExit(getDialog('B'));
+    finishExit(getDialog('A'));
+    expect(stackSummary()).toEqual([]);
+    expect(openDialogs()).toEqual([]);
+  });
+
+  it('a nested sheet still open when its host reopens is presented again, on top', () => {
+    function App() {
+      const [isAOpen, setIsAOpen] = useState(true);
+      return (
+        <>
+          <button type="button" onClick={() => setIsAOpen(false)}>
+            Close A
+          </button>
+          <button type="button" onClick={() => setIsAOpen(true)}>
+            Reopen A
+          </button>
+          <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+            <BottomSheet isOpen onOpenChange={() => {}} label="B">
+              b
+            </BottomSheet>
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+    fireEvent.click(screen.getByRole('button', {name: 'Close A'}));
+    finishExit(getDialog('B'));
+    finishExit(getDialog('A'));
+    expect(openDialogs()).toEqual([]);
+    fireEvent.click(screen.getByRole('button', {name: 'Reopen A'}));
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+    expect(openDialogs()).toEqual(['A', 'B']);
+  });
+
+  it('a switcher flow in a sheet’s content leaves with the sheet and returns with it; its state is never written', () => {
+    const onActiveSheetChange = vi.fn();
+    function App() {
+      const [isAOpen, setIsAOpen] = useState(true);
+      const [step, setStep] = useState<string | null>('one');
+      return (
+        <>
+          <button type="button" onClick={() => setIsAOpen(false)}>
+            Close A
+          </button>
+          <button type="button" onClick={() => setIsAOpen(true)}>
+            Reopen A
+          </button>
+          <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+            <BottomSheetSwitcher
+              activeSheet={step}
+              onActiveSheetChange={next => {
+                onActiveSheetChange(next);
+                setStep(next);
+              }}>
+              <BottomSheet sheetId="one" label="One">
+                one
+              </BottomSheet>
+              <BottomSheet sheetId="two" label="Two">
+                two
+              </BottomSheet>
+            </BottomSheetSwitcher>
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    expect(stackSummary()).toEqual(['A:covered:1', 'One:top:0']);
+    fireEvent.click(screen.getByRole('button', {name: 'Close A'}));
+    // The flow leaves with its host, through its own exit, without its
+    // state being written.
+    expect(onActiveSheetChange).not.toHaveBeenCalled();
+    expect(stackSummary()).toEqual(['A:exiting:0', 'One:exiting:0']);
+    finishExit(getDialog('One'));
+    finishExit(getDialog('A'));
+    expect(openDialogs()).toEqual([]);
+    expect(onActiveSheetChange).not.toHaveBeenCalled();
+    // The flow's state still names its step, so it comes back with the host.
+    fireEvent.click(screen.getByRole('button', {name: 'Reopen A'}));
+    expect(stackSummary()).toEqual(['A:covered:1', 'One:top:0']);
+    expect(openDialogs()).toEqual(['A', 'One']);
+  });
+
+  it('a sheet in a closed sheet’s content keeps its state and presents when that sheet opens', () => {
+    const onInnerChange = vi.fn();
+    function App() {
+      const [isOuterOpen, setIsOuterOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setIsOuterOpen(true)}>
+            Open outer
+          </button>
+          <BottomSheet
+            isOpen={isOuterOpen}
+            onOpenChange={setIsOuterOpen}
+            label="Outer">
+            <BottomSheet isOpen onOpenChange={onInnerChange} label="Inner">
+              inner
+            </BottomSheet>
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    expect(openDialogs()).toEqual([]);
+    // The inner sheet is not asked to close: its host has not closed, it
+    // merely has not opened yet.
+    expect(onInnerChange).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', {name: 'Open outer'}));
+    expect(stackSummary()).toEqual(['Outer:covered:1', 'Inner:top:0']);
+    expect(onInnerChange).not.toHaveBeenCalled();
+  });
+
+  it('never writes a nested sheet’s state: no onOpenChange on mount, rerender, StrictMode replay, or host close', () => {
+    const onInnerChange = vi.fn();
+    function App({tick}: {tick: number}) {
+      const [isOuterOpen, setIsOuterOpen] = useState(true);
+      return (
+        <>
+          <button type="button" onClick={() => setIsOuterOpen(false)}>
+            Close outer {tick}
+          </button>
+          <BottomSheet
+            isOpen={isOuterOpen}
+            onOpenChange={setIsOuterOpen}
+            label="Outer">
+            <BottomSheet
+              isOpen
+              onOpenChange={value => {
+                onInnerChange(value);
+              }}
+              label="Inner">
+              inner
+            </BottomSheet>
+          </BottomSheet>
+        </>
+      );
+    }
+    const {rerender} = render(
+      <StrictMode>
+        <App tick={0} />
+      </StrictMode>,
+    );
+    rerender(
+      <StrictMode>
+        <App tick={1} />
+      </StrictMode>,
+    );
+    fireEvent.click(screen.getByRole('button', {name: 'Close outer 1'}));
+    rerender(
+      <StrictMode>
+        <App tick={2} />
+      </StrictMode>,
+    );
+    expect(onInnerChange).not.toHaveBeenCalled();
+    // The inner sheet left with its host all the same.
+    expect(stackSummary()).toEqual(['Outer:exiting:0', 'Inner:exiting:0']);
+  });
+
+  it('leaves sibling sheets above it open: it slides out from beneath them', () => {
+    render(<Siblings initialA initialB />);
+    fireEvent.click(screen.getByRole('button', {name: 'Close A from B'}));
+    expect(stackSummary()).toEqual(['A:exiting:1', 'B:top:0']);
+    expect(getDialog('B')).toHaveAttribute('open');
+    expect(getDialog('B')).not.toHaveAttribute('inert');
+    finishExit(getDialog('A'));
+    expect(stackSummary()).toEqual(['B:top:0']);
+    expect(getDialog('B')).not.toHaveAttribute('data-sheet-stack');
+    expect(openDialogs()).toEqual(['B']);
+    // Nothing is stuck: B still closes normally.
+    fireEvent.click(screen.getByRole('button', {name: 'Close B'}));
+    finishExit(getDialog('B'));
+    expect(openDialogs()).toEqual([]);
+  });
+
+  it('a sheet in a switcher step leaves when the step is left', () => {
+    const onNestedChange = vi.fn();
+    function App() {
+      const [step, setStep] = useState<string | null>('one');
+      const [isNestedOpen, setIsNestedOpen] = useState(true);
+      return (
+        <>
+          <button type="button" onClick={() => setStep('two')}>
+            Step two
+          </button>
+          <BottomSheetSwitcher activeSheet={step} onActiveSheetChange={setStep}>
+            <BottomSheet sheetId="one" label="One">
+              <BottomSheet
+                isOpen={isNestedOpen}
+                onOpenChange={value => {
+                  onNestedChange(value);
+                  setIsNestedOpen(value);
+                }}
+                label="Nested">
+                nested
+              </BottomSheet>
+            </BottomSheet>
+            <BottomSheet sheetId="two" label="Two">
+              two
+            </BottomSheet>
+          </BottomSheetSwitcher>
+        </>
+      );
+    }
+    render(<App />);
+    expect(stackSummary()).toEqual(['One:covered:1', 'Nested:top:0']);
+    fireEvent.click(screen.getByRole('button', {name: 'Step two'}));
+    // The nested sheet leaves with the step; its state stays its owner's.
+    expect(onNestedChange).not.toHaveBeenCalled();
+    expect(stackSummary()).toEqual(['Two:top:0', 'Nested:exiting:0']);
+    finishExit(getDialog('Nested'));
+    expect(stackSummary()).toEqual(['Two:top:0']);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 8 — focus
+// ---------------------------------------------------------------------------
+
+describe('R8 focus', () => {
+  it('moves focus into a sheet when it opens, and returns it to the opener in the revealed sheet', () => {
+    render(<Siblings initialA />);
+    const openB = screen.getByRole('button', {name: 'Open B'});
+    openB.focus();
+    fireEvent.click(openB);
+    expect(getPanel(getDialog('B'))).toHaveFocus();
+
+    fireEvent.click(screen.getByRole('button', {name: 'Close B'}));
+    finishExit(getDialog('B'));
+    expect(openB).toHaveFocus();
+  });
+
+  it('focuses the revealed sheet’s panel when the opener is gone', () => {
+    function App() {
+      const [isAOpen, setIsAOpen] = useState(true);
+      const [isBOpen, setIsBOpen] = useState(false);
+      return (
+        <>
+          <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+            {!isBOpen && (
+              <button type="button" onClick={() => setIsBOpen(true)}>
+                Open B
+              </button>
+            )}
+          </BottomSheet>
+          <BottomSheet isOpen={isBOpen} onOpenChange={setIsBOpen} label="B">
+            <button type="button" onClick={() => setIsBOpen(false)}>
+              Close B
+            </button>
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    const openB = screen.getByRole('button', {name: 'Open B'});
+    openB.focus();
+    fireEvent.click(openB);
+    expect(openB).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', {name: 'Close B'}));
+    finishExit(getDialog('B'));
+    expect(getPanel(getDialog('A'))).toHaveFocus();
+  });
+
+  it('a switcher flow closing over a sheet focuses that sheet’s panel when the opener is gone', () => {
+    // The flow leaves the registry in the same commit its dialog closes
+    // (React runs the registration cleanup first), so the close must have
+    // read the sheet beneath before that.
+    function App() {
+      const [isAOpen, setIsAOpen] = useState(true);
+      const [step, setStep] = useState<string | null>(null);
+      return (
+        <>
+          <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+            {step == null && (
+              <button type="button" onClick={() => setStep('one')}>
+                Open flow
+              </button>
+            )}
+          </BottomSheet>
+          <BottomSheetSwitcher activeSheet={step} onActiveSheetChange={setStep}>
+            <BottomSheet sheetId="one" label="One">
+              <button type="button" onClick={() => setStep(null)}>
+                Close flow
+              </button>
+            </BottomSheet>
+          </BottomSheetSwitcher>
+        </>
+      );
+    }
+    render(<App />);
+    const openFlow = screen.getByRole('button', {name: 'Open flow'});
+    openFlow.focus();
+    fireEvent.click(openFlow);
+    expect(openFlow).not.toBeInTheDocument();
+    expect(stackSummary()).toEqual(['A:covered:1', 'One:top:0']);
+    // The flow's dialog is labelled by its active step; keep a handle.
+    const flowDialog = getDialog('One');
+    fireEvent.click(screen.getByRole('button', {name: 'Close flow'}));
+    finishExit(flowDialog);
+    expect(flowDialog).not.toHaveAttribute('open');
+    expect(stackSummary()).toEqual(['A:top:0']);
+    expect(getPanel(getDialog('A'))).toHaveFocus();
+  });
+
+  it('closing a covered sheet from code leaves focus in the top sheet', () => {
+    render(<Siblings initialA />);
+    const openB = screen.getByRole('button', {name: 'Open B'});
+    openB.focus();
+    fireEvent.click(openB);
+    const field = screen.getByLabelText('B field');
+    field.focus();
+    // jsdom's close() does not move focus; the browser's does, back to the
+    // element focused at showModal() (the button in A). Emulate it.
+    const a = getDialog('A');
+    const close = HTMLDialogElement.prototype.close;
+    HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
+      close.call(this);
+      if (this === a) {
+        openB.focus();
+      }
+    };
+    fireEvent.click(screen.getByRole('button', {name: 'Close A from B'}));
+    finishExit(getDialog('A'));
+    expect(field).toHaveFocus();
+    expect(openDialogs()).toEqual(['B']);
+  });
+
+  it('a deep link returns focus into the revealed sheet, not to the page', () => {
+    render(<Nested initial />);
+    expect(getPanel(getDialog('C'))).toHaveFocus();
+    fireEvent.click(screen.getByRole('button', {name: 'Close C'}));
+    finishExit(getDialog('C'));
+    expect(getPanel(getDialog('B'))).toHaveFocus();
+  });
+
+  it('a popped sheet’s finalFocusRef outside the revealed sheet yields to that sheet’s panel; inside it, it is focused', () => {
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+    const outsideRef = {current: outside as HTMLElement | null};
+    const insideRef = {current: null as HTMLElement | null};
+    function App() {
+      const [isAOpen, setIsAOpen] = useState(true);
+      const [isBOpen, setIsBOpen] = useState(false);
+      const [isCOpen, setIsCOpen] = useState(false);
+      return (
+        <>
+          <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+            <button
+              type="button"
+              ref={node => {
+                insideRef.current = node;
+              }}>
+              Inside A
+            </button>
+            <button type="button" onClick={() => setIsBOpen(true)}>
+              Open B
+            </button>
+            <button type="button" onClick={() => setIsCOpen(true)}>
+              Open C
+            </button>
+          </BottomSheet>
+          <BottomSheet
+            isOpen={isBOpen}
+            onOpenChange={setIsBOpen}
+            finalFocusRef={outsideRef}
+            label="B">
+            <button type="button" onClick={() => setIsBOpen(false)}>
+              Close B
+            </button>
+          </BottomSheet>
+          <BottomSheet
+            isOpen={isCOpen}
+            onOpenChange={setIsCOpen}
+            finalFocusRef={insideRef}
+            label="C">
+            <button type="button" onClick={() => setIsCOpen(false)}>
+              Close C
+            </button>
+          </BottomSheet>
+        </>
+      );
+    }
+    try {
+      render(<App />);
+      // B's target is on the page, which stays inert under A: A's panel.
+      fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+      fireEvent.click(screen.getByRole('button', {name: 'Close B'}));
+      finishExit(getDialog('B'));
+      expect(getPanel(getDialog('A'))).toHaveFocus();
+      // C's target is inside A: it is focused.
+      fireEvent.click(screen.getByRole('button', {name: 'Open C'}));
+      fireEvent.click(screen.getByRole('button', {name: 'Close C'}));
+      finishExit(getDialog('C'));
+      expect(screen.getByRole('button', {name: 'Inside A'})).toHaveFocus();
+    } finally {
+      outside.remove();
+    }
+  });
+
+  it('applies the standalone rules when the last sheet closes: the opener, or finalFocusRef', () => {
+    function App() {
+      const [isAOpen, setIsAOpen] = useState(false);
+      const [isBOpen, setIsBOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setIsAOpen(true)}>
+            Open A
+          </button>
+          <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+            <button type="button" onClick={() => setIsBOpen(true)}>
+              Open B
+            </button>
+          </BottomSheet>
+          <BottomSheet isOpen={isBOpen} onOpenChange={setIsBOpen} label="B">
+            <button
+              type="button"
+              onClick={() => {
+                setIsBOpen(false);
+                setIsAOpen(false);
+              }}>
+              Close all
+            </button>
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    const openA = screen.getByRole('button', {name: 'Open A'});
+    openA.focus();
+    fireEvent.click(openA);
+    fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Close all'}));
+    finishExit(getDialog('B'));
+    finishExit(getDialog('A'));
+    expect(openA).toHaveFocus();
+    expect(openDialogs()).toEqual([]);
+  });
+
+  /**
+   * A browser refuses to focus an element outside every open modal dialog
+   * (everything else is inert while a modal is shown) and anything inside a
+   * closed dialog (`display: none`). jsdom lets any focus through, which
+   * hides the "Close all" problem: the exits complete bottom first (all the
+   * panels' transitions end in the same frame, in tree order), so each
+   * sheet returns focus at depth 0 — the bottom sheet to a page opener
+   * refused while the dialogs above are still modal, the upper sheets to
+   * openers inside dialogs that are closed. Emulate the browser's rules.
+   */
+  function withModalFocusBlocking(run: () => void) {
+    const focus = HTMLElement.prototype.focus;
+    HTMLElement.prototype.focus = function (
+      this: HTMLElement,
+      options?: FocusOptions,
+    ) {
+      const own = this.closest('dialog');
+      if (own != null && !own.open) {
+        return;
+      }
+      const modal = [...document.querySelectorAll('dialog[open]')].filter(
+        d => d.getAttribute('aria-modal') === 'true',
+      );
+      if (modal.length > 0 && !modal.some(d => d.contains(this))) {
+        return;
+      }
+      focus.call(this, options);
+    };
+    try {
+      run();
+    } finally {
+      HTMLElement.prototype.focus = focus;
+    }
+  }
+
+  describe('closing every sheet in one update ("Close all")', () => {
+    it('returns focus once, to the bottom sheet’s opener, after the last dialog has closed (standalone sheets, depth 3)', () => {
+      function App() {
+        const [isAOpen, setIsAOpen] = useState(false);
+        const [isBOpen, setIsBOpen] = useState(false);
+        const [isCOpen, setIsCOpen] = useState(false);
+        const closeAll = () => {
+          setIsCOpen(false);
+          setIsBOpen(false);
+          setIsAOpen(false);
+        };
+        return (
+          <>
+            <button type="button" onClick={() => setIsAOpen(true)}>
+              Open A
+            </button>
+            <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+              <button type="button" onClick={() => setIsBOpen(true)}>
+                Open B
+              </button>
+            </BottomSheet>
+            <BottomSheet isOpen={isBOpen} onOpenChange={setIsBOpen} label="B">
+              <button type="button" onClick={() => setIsCOpen(true)}>
+                Open C
+              </button>
+            </BottomSheet>
+            <BottomSheet isOpen={isCOpen} onOpenChange={setIsCOpen} label="C">
+              <button type="button" onClick={closeAll}>
+                Close all
+              </button>
+            </BottomSheet>
+          </>
+        );
+      }
+      render(<App />);
+      const openA = screen.getByRole('button', {name: 'Open A'});
+      openA.focus();
+      fireEvent.click(openA);
+      fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+      fireEvent.click(screen.getByRole('button', {name: 'Open C'}));
+      expect(stackSummary()).toEqual(['A:covered:2', 'B:covered:1', 'C:top:0']);
+      withModalFocusBlocking(() => {
+        fireEvent.click(screen.getByRole('button', {name: 'Close all'}));
+        // The exits complete bottom first (tree order of the transitionend
+        // events, all in one frame), as in Chromium.
+        finishExit(getDialog('A'));
+        expect(openA).not.toHaveFocus();
+        finishExit(getDialog('B'));
+        expect(openA).not.toHaveFocus();
+        finishExit(getDialog('C'));
+      });
+      expect(openDialogs()).toEqual([]);
+      expect(openA).toHaveFocus();
+    });
+
+    it('returns focus when a member of the group unmounts mid-exit instead of reporting its motion (Close all with the upper sheet unmounting)', () => {
+      function App() {
+        const [isAOpen, setIsAOpen] = useState(false);
+        const [isBOpen, setIsBOpen] = useState(false);
+        const [isBMounted, setIsBMounted] = useState(true);
+        const closeAll = () => {
+          setIsBOpen(false);
+          setIsAOpen(false);
+        };
+        return (
+          <>
+            <button type="button" onClick={() => setIsAOpen(true)}>
+              Open A
+            </button>
+            <button type="button" onClick={() => setIsBMounted(false)}>
+              Unmount B
+            </button>
+            <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+              <button type="button" onClick={() => setIsBOpen(true)}>
+                Open B
+              </button>
+            </BottomSheet>
+            {isBMounted && (
+              <BottomSheet isOpen={isBOpen} onOpenChange={setIsBOpen} label="B">
+                <button type="button" onClick={closeAll}>
+                  Close all
+                </button>
+              </BottomSheet>
+            )}
+          </>
+        );
+      }
+      render(<App />);
+      const openA = screen.getByRole('button', {name: 'Open A'});
+      openA.focus();
+      fireEvent.click(openA);
+      fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+      expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+      withModalFocusBlocking(() => {
+        fireEvent.click(screen.getByRole('button', {name: 'Close all'}));
+        // Both exits are under way (the group is formed) when B's owner stops
+        // rendering it: its dialog was still open, and no exit motion will
+        // ever be reported for it. A's exit is the only one left.
+        expect(getDialog('B')).toHaveAttribute('open');
+        fireEvent.click(screen.getByRole('button', {name: 'Unmount B'}));
+        expect(screen.queryByRole('dialog', {name: 'B'})).toBeNull();
+        finishExit(getDialog('A'));
+      });
+      expect(openDialogs()).toEqual([]);
+      expect(openA).toHaveFocus();
+    });
+
+    it('prefers the bottom sheet’s finalFocusRef', () => {
+      const target = document.createElement('button');
+      document.body.appendChild(target);
+      const finalFocusRef = {current: target as HTMLElement | null};
+      function App() {
+        const [isAOpen, setIsAOpen] = useState(true);
+        const [isBOpen, setIsBOpen] = useState(true);
+        return (
+          <>
+            <BottomSheet
+              isOpen={isAOpen}
+              onOpenChange={setIsAOpen}
+              finalFocusRef={finalFocusRef}
+              label="A">
+              a
+            </BottomSheet>
+            <BottomSheet isOpen={isBOpen} onOpenChange={setIsBOpen} label="B">
+              <button
+                type="button"
+                onClick={() => {
+                  setIsBOpen(false);
+                  setIsAOpen(false);
+                }}>
+                Close all
+              </button>
+            </BottomSheet>
+          </>
+        );
+      }
+      try {
+        render(<App />);
+        withModalFocusBlocking(() => {
+          fireEvent.click(screen.getByRole('button', {name: 'Close all'}));
+          finishExit(getDialog('A'));
+          finishExit(getDialog('B'));
+        });
+        expect(target).toHaveFocus();
+      } finally {
+        target.remove();
+      }
+    });
+
+    it('a switcher flow on top closes with the sheet beneath it, focus to the bottom sheet’s opener', () => {
+      function App() {
+        const [isAOpen, setIsAOpen] = useState(false);
+        const [step, setStep] = useState<string | null>(null);
+        return (
+          <>
+            <button type="button" onClick={() => setIsAOpen(true)}>
+              Open A
+            </button>
+            <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+              <button type="button" onClick={() => setStep('one')}>
+                Open flow
+              </button>
+            </BottomSheet>
+            <BottomSheetSwitcher
+              activeSheet={step}
+              onActiveSheetChange={setStep}>
+              <BottomSheet sheetId="one" label="One">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setStep(null);
+                    setIsAOpen(false);
+                  }}>
+                  Close all
+                </button>
+              </BottomSheet>
+            </BottomSheetSwitcher>
+          </>
+        );
+      }
+      render(<App />);
+      const openA = screen.getByRole('button', {name: 'Open A'});
+      openA.focus();
+      fireEvent.click(openA);
+      fireEvent.click(screen.getByRole('button', {name: 'Open flow'}));
+      expect(stackSummary()).toEqual(['A:covered:1', 'One:top:0']);
+      const flowDialog = getDialog('One');
+      withModalFocusBlocking(() => {
+        fireEvent.click(screen.getByRole('button', {name: 'Close all'}));
+        finishExit(getDialog('A'));
+        finishExit(flowDialog);
+      });
+      expect(openDialogs()).toEqual([]);
+      expect(openA).toHaveFocus();
+    });
+
+    it('non-modal sheets closing together keep their own rule: the opener only while focus was inside', () => {
+      function App() {
+        const [isAOpen, setIsAOpen] = useState(false);
+        const [isBOpen, setIsBOpen] = useState(false);
+        return (
+          <>
+            <button type="button" onClick={() => setIsAOpen(true)}>
+              Open A
+            </button>
+            <BottomSheet
+              isOpen={isAOpen}
+              onOpenChange={setIsAOpen}
+              hasScrim={false}
+              label="A">
+              <button type="button" onClick={() => setIsBOpen(true)}>
+                Open B
+              </button>
+            </BottomSheet>
+            <BottomSheet
+              isOpen={isBOpen}
+              onOpenChange={setIsBOpen}
+              hasScrim={false}
+              label="B">
+              <button
+                type="button"
+                onClick={() => {
+                  setIsBOpen(false);
+                  setIsAOpen(false);
+                }}>
+                Close all
+              </button>
+            </BottomSheet>
+          </>
+        );
+      }
+      render(<App />);
+      const openA = screen.getByRole('button', {name: 'Open A'});
+      openA.focus();
+      fireEvent.click(openA);
+      const openB = screen.getByRole('button', {name: 'Open B'});
+      openB.focus();
+      fireEvent.click(openB);
+      // No modal dialog blocks anything; B's own close ran with focus
+      // inside B, so it returns to B's opener (inside A, which is leaving),
+      // then A's close finds focus no longer inside it and leaves it.
+      // Nothing is grouped.
+      expect(getBottomSheetStackForTests()).toHaveLength(0);
+      const closeAll = screen.getByRole('button', {name: 'Close all'});
+      closeAll.focus();
+      fireEvent.click(closeAll);
+      finishExit(getDialog('B'));
+      finishExit(getDialog('A'));
+      expect(openDialogs()).toEqual([]);
+      expect(document.activeElement).not.toBe(document.body);
+    });
+
+    it('a modal sheet closing with a non-modal one is not a group', () => {
+      function App() {
+        const [isAOpen, setIsAOpen] = useState(false);
+        const [isBOpen, setIsBOpen] = useState(false);
+        return (
+          <>
+            <button type="button" onClick={() => setIsAOpen(true)}>
+              Open A
+            </button>
+            <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+              <button type="button" onClick={() => setIsBOpen(true)}>
+                Open B
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setIsBOpen(false);
+                  setIsAOpen(false);
+                }}>
+                Close all
+              </button>
+            </BottomSheet>
+            <BottomSheet
+              isOpen={isBOpen}
+              onOpenChange={setIsBOpen}
+              hasScrim={false}
+              label="B">
+              b
+            </BottomSheet>
+          </>
+        );
+      }
+      render(<App />);
+      const openA = screen.getByRole('button', {name: 'Open A'});
+      openA.focus();
+      fireEvent.click(openA);
+      fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+      withModalFocusBlocking(() => {
+        fireEvent.click(screen.getByRole('button', {name: 'Close all'}));
+        finishExit(getDialog('A'));
+        finishExit(getDialog('B'));
+      });
+      // The one modal sheet returns focus through its own close.
+      expect(openDialogs()).toEqual([]);
+      expect(openA).toHaveFocus();
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 9 — the native top layer
+// ---------------------------------------------------------------------------
+
+describe('R9 top layer', () => {
+  it('keeps each sheet’s own dialog where it is written; nothing moves', () => {
+    const {container} = render(
+      <div data-testid="where-written">
+        <Siblings initialA initialB />
+      </div>,
+    );
+    const region = container.querySelector('[data-testid="where-written"]')!;
+    expect(getDialog('A').parentElement).toBe(region);
+    expect(getDialog('B').parentElement).toBe(region);
+    expect(getDialog('A')).toHaveAttribute('open');
+    expect(getDialog('B')).toHaveAttribute('open');
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledTimes(2);
+  });
+
+  it('a Dialog opened from a stacked sheet paints above it, and a sheet opened from that Dialog paints above the Dialog', () => {
+    function App() {
+      const [isDialogOpen, setIsDialogOpen] = useState(false);
+      const [isCOpen, setIsCOpen] = useState(false);
+      return (
+        <>
+          <BottomSheet isOpen onOpenChange={() => {}} label="A">
+            a
+          </BottomSheet>
+          <BottomSheet isOpen onOpenChange={() => {}} label="B">
+            <button type="button" onClick={() => setIsDialogOpen(true)}>
+              Open dialog
+            </button>
+            <Dialog
+              isOpen={isDialogOpen}
+              onOpenChange={setIsDialogOpen}
+              aria-label="Over">
+              <button type="button" onClick={() => setIsCOpen(true)}>
+                Open C
+              </button>
+              <BottomSheet isOpen={isCOpen} onOpenChange={setIsCOpen} label="C">
+                c
+              </BottomSheet>
+            </Dialog>
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open dialog'}));
+    expect(topLayerOrder()).toEqual(['A', 'B', 'Over']);
+    fireEvent.click(screen.getByRole('button', {name: 'Open C'}));
+    expect(topLayerOrder()).toEqual(['A', 'B', 'Over', 'C']);
+    // The Dialog is not a sheet: C is the top sheet over B, and the Dialog
+    // sits between them in the top layer without entering the stack.
+    expect(stackSummary()).toEqual(['A:covered:2', 'B:covered:1', 'C:top:0']);
+    // B contains the Dialog that contains C, so inert on B would reach C.
+    expect(getDialog('B')).not.toHaveAttribute('inert');
+    expect(getDialog('A')).toHaveAttribute('inert');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 10 — concurrent React
+// ---------------------------------------------------------------------------
+
+describe('R10 concurrent React', () => {
+  it('StrictMode leaves exactly one entry per sheet and every dialog open', () => {
+    render(
+      <StrictMode>
+        <Siblings initialA initialB />
+      </StrictMode>,
+    );
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+    expect(openDialogs()).toEqual(['A', 'B']);
+    expect(topLayerOrder()).toEqual(['A', 'B']);
+    expect(getPanel(getDialog('B'))).toHaveFocus();
+  });
+
+  it('StrictMode keeps an out-of-tree-order stack in open order', () => {
+    render(
+      <StrictMode>
+        <Siblings reversed />
+      </StrictMode>,
+    );
+    fireEvent.click(screen.getByRole('button', {name: 'Open A'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+  });
+
+  it('a transition that never commits has no effect', () => {
+    const never = new Promise<never>(() => {});
+    function Gate({children}: {children: ReactNode}): ReactNode {
+      if (children != null) {
+        // eslint-disable-next-line @typescript-eslint/only-throw-error -- Suspense protocol: a thrown promise suspends the subtree
+        throw never;
+      }
+      return children;
+    }
+    let setShow!: (value: boolean) => void;
+    function App() {
+      const [show, set] = useState(false);
+      setShow = set;
+      return (
+        <>
+          <BottomSheet isOpen onOpenChange={() => {}} label="A">
+            a
+          </BottomSheet>
+          <Suspense fallback={null}>
+            {show ? (
+              <Gate>
+                <BottomSheet isOpen onOpenChange={() => {}} label="B">
+                  b
+                </BottomSheet>
+              </Gate>
+            ) : null}
+          </Suspense>
+        </>
+      );
+    }
+    render(<App />);
+    act(() => {
+      startTransition(() => setShow(true));
+    });
+    expect(stackSummary()).toEqual(['A:top:0']);
+    expect(openDialogs()).toEqual(['A']);
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledTimes(1);
+  });
+
+  it('Suspense hide takes a sheet out of the stack; reveal re-presents it on top', async () => {
+    let resolveGate!: () => void;
+    const gate = new Promise<void>(resolve => {
+      resolveGate = resolve;
+    });
+    let isSettled = false;
+    void gate.then(() => {
+      isSettled = true;
+    });
+    function MaybeSuspend({suspend}: {suspend: boolean}) {
+      if (suspend && !isSettled) {
+        // eslint-disable-next-line @typescript-eslint/only-throw-error -- Suspense protocol: a thrown promise suspends the subtree
+        throw gate;
+      }
+      return null;
+    }
+    let setSuspend!: (value: boolean) => void;
+    function App() {
+      const [suspend, set] = useState(false);
+      setSuspend = set;
+      return (
+        <>
+          <BottomSheet isOpen onOpenChange={() => {}} label="A">
+            a
+          </BottomSheet>
+          <Suspense fallback={<span data-testid="fallback" />}>
+            <BottomSheet isOpen onOpenChange={() => {}} label="B">
+              <MaybeSuspend suspend={suspend} />
+            </BottomSheet>
+          </Suspense>
+          <BottomSheet isOpen onOpenChange={() => {}} label="C">
+            c
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    expect(stackSummary()).toEqual(['A:covered:2', 'B:covered:1', 'C:top:0']);
+
+    act(() => setSuspend(true));
+    expect(screen.getByTestId('fallback')).toBeInTheDocument();
+    // The hidden sheet left the stack and the top layer: a modal dialog with
+    // no box would otherwise keep blocking the page.
+    expect(stackSummary()).toEqual(['A:covered:1', 'C:top:0']);
+    expect(openDialogs()).toEqual(['A', 'C']);
+
+    await act(async () => {
+      resolveGate();
+      await gate;
+    });
+    // Revealed: presented again, as the most recent open — on top.
+    expect(stackSummary()).toEqual(['A:covered:2', 'C:covered:1', 'B:top:0']);
+    expect(topLayerOrder()).toEqual(['A', 'C', 'B']);
+  });
+
+  it('Activity hidden takes a sheet out; visible re-presents it on top with its state', () => {
+    let setHidden!: (value: boolean) => void;
+    function App() {
+      const [hidden, set] = useState(false);
+      setHidden = set;
+      return (
+        <>
+          <BottomSheet isOpen onOpenChange={() => {}} label="A">
+            a
+          </BottomSheet>
+          <Activity mode={hidden ? 'hidden' : 'visible'}>
+            <BottomSheet isOpen onOpenChange={() => {}} label="B">
+              <input aria-label="bInput" defaultValue="" />
+            </BottomSheet>
+          </Activity>
+          <BottomSheet isOpen onOpenChange={() => {}} label="C">
+            c
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.change(screen.getByLabelText('bInput'), {
+      target: {value: 'kept'},
+    });
+    act(() => setHidden(true));
+    expect(stackSummary()).toEqual(['A:covered:1', 'C:top:0']);
+    expect(openDialogs()).toEqual(['A', 'C']);
+    act(() => setHidden(false));
+    expect(stackSummary()).toEqual(['A:covered:2', 'C:covered:1', 'B:top:0']);
+    expect(screen.getByLabelText('bInput')).toHaveValue('kept');
+  });
+
+  it('SSR and hydration markup match, and the stack forms on the client', async () => {
+    const error = vi.spyOn(console, 'error').mockImplementation(() => {});
+    function App() {
+      return (
+        <BottomSheet isOpen onOpenChange={() => {}} label="A">
+          <BottomSheet isOpen onOpenChange={() => {}} label="B">
+            b
+          </BottomSheet>
+        </BottomSheet>
+      );
+    }
+    const html = renderToString(<App />);
+    expect(html).not.toContain('data-sheet-stack');
+    const container = document.createElement('div');
+    container.innerHTML = html;
+    document.body.appendChild(container);
+    let root!: ReturnType<typeof hydrateRoot>;
+    await act(async () => {
+      root = hydrateRoot(container, <App />);
+    });
+    expect(error).not.toHaveBeenCalled();
+    expect(stackSummary()).toEqual(['A:covered:1', 'B:top:0']);
+    expect(topLayerOrder()).toEqual(['A', 'B']);
+    act(() => root.unmount());
+    container.remove();
+    error.mockRestore();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 11 — non-modal sheets stay out of the stack
+// ---------------------------------------------------------------------------
+
+describe('R11 non-modal sheets', () => {
+  it('a hasScrim={false} sheet neither joins the stack nor recedes a modal sheet', () => {
+    function App() {
+      const [isNonModalOpen, setIsNonModalOpen] = useState(false);
+      return (
+        <>
+          <BottomSheet isOpen onOpenChange={() => {}} label="Modal">
+            <button type="button" onClick={() => setIsNonModalOpen(true)}>
+              Open non-modal
+            </button>
+          </BottomSheet>
+          <BottomSheet
+            isOpen={isNonModalOpen}
+            onOpenChange={setIsNonModalOpen}
+            hasScrim={false}
+            label="NonModal">
+            non-modal
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open non-modal'}));
+    expect(getDialog('NonModal')).toHaveAttribute('open');
+    // Not shown modally and not a stack level. Opened while a modal that
+    // does not contain it is open, it is inert under that modal, so it is
+    // not put in the top layer (there it would paint above the modal while
+    // a press on it lands on the modal): it is shown by show(), beneath.
+    expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+    expect(HTMLDialogElement.prototype.show).toHaveBeenCalledTimes(1);
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledTimes(1);
+    expect(stackSummary()).toEqual(['Modal:top:0']);
+    expect(getDialog('Modal')).not.toHaveAttribute('data-sheet-stack');
+    expect(getDialog('NonModal')).not.toHaveAttribute('data-sheet-stack');
+    expect(getComputedStyle(getPositioner(getDialog('Modal'))).transform).toBe(
+      '',
+    );
+  });
+
+  it('a hasScrim={false} sheet rendered inside an open modal sheet enters the top layer', () => {
+    function App() {
+      const [isNonModalOpen, setIsNonModalOpen] = useState(false);
+      return (
+        <BottomSheet isOpen onOpenChange={() => {}} label="Modal">
+          <button type="button" onClick={() => setIsNonModalOpen(true)}>
+            Open non-modal
+          </button>
+          <BottomSheet
+            isOpen={isNonModalOpen}
+            onOpenChange={setIsNonModalOpen}
+            hasScrim={false}
+            label="NonModal">
+            non-modal
+          </BottomSheet>
+        </BottomSheet>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open non-modal'}));
+    // Inside the modal's content it is not inert, so the top layer is right.
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(1);
+    expect(HTMLDialogElement.prototype.show).not.toHaveBeenCalled();
+  });
+
+  it('a hasScrim={false} sheet opened from a Dialog and rendered outside it stays beneath the Dialog', () => {
+    function App() {
+      const [isNonModalOpen, setIsNonModalOpen] = useState(false);
+      return (
+        <>
+          <Dialog isOpen onOpenChange={() => {}} aria-label="Edit">
+            <button type="button" onClick={() => setIsNonModalOpen(true)}>
+              Open non-modal
+            </button>
+          </Dialog>
+          <BottomSheet
+            isOpen={isNonModalOpen}
+            onOpenChange={setIsNonModalOpen}
+            hasScrim={false}
+            label="NonModal">
+            non-modal
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open non-modal'}));
+    expect(getDialog('NonModal')).toHaveAttribute('open');
+    expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+    expect(HTMLDialogElement.prototype.show).toHaveBeenCalledTimes(1);
+  });
+
+  it('a hasScrim={false} sheet shown beneath a Dialog enters the top layer once the Dialog closes, announcing its entry', () => {
+    function App() {
+      const [isDialogOpen, setIsDialogOpen] = useState(true);
+      const [isNonModalOpen, setIsNonModalOpen] = useState(false);
+      return (
+        <>
+          <Dialog
+            isOpen={isDialogOpen}
+            onOpenChange={setIsDialogOpen}
+            aria-label="Edit">
+            <button type="button" onClick={() => setIsNonModalOpen(true)}>
+              Open non-modal
+            </button>
+            <button type="button" onClick={() => setIsDialogOpen(false)}>
+              Close dialog
+            </button>
+          </Dialog>
+          <BottomSheet
+            isOpen={isNonModalOpen}
+            onOpenChange={setIsNonModalOpen}
+            hasScrim={false}
+            label="NonModal">
+            non-modal
+          </BottomSheet>
+        </>
+      );
+    }
+    const entries: string[] = [];
+    const unsubscribe = subscribeModalOutlets(change => {
+      entries.push(change);
+    });
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open non-modal'}));
+    expect(HTMLDialogElement.prototype.show).toHaveBeenCalledTimes(1);
+    expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+    expect(entries).not.toContain('entry');
+    // The Dialog closes: its dialog loses `open` and, as in a browser, a
+    // `close` event follows. The waiting sheet leaves show() for the top
+    // layer and announces the entry global hosts re-enter above.
+    fireEvent.click(screen.getByRole('button', {name: 'Close dialog'}));
+    act(() => {
+      getDialog('Edit').dispatchEvent(new Event('close'));
+    });
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(1);
+    expect(getDialog('NonModal')).toHaveAttribute('open');
+    expect(entries).toContain('entry');
+    unsubscribe();
+  });
+
+  it('a hasScrim={false} sheet shown beneath a Dialog enters the top layer when that Dialog unmounts while open (no close event fires)', async () => {
+    function App() {
+      const [isEditing, setIsEditing] = useState(true);
+      const [isNonModalOpen, setIsNonModalOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setIsNonModalOpen(true)}>
+            Open non-modal
+          </button>
+          <button type="button" onClick={() => setIsEditing(false)}>
+            Unmount dialog
+          </button>
+          {isEditing && (
+            <Dialog isOpen onOpenChange={() => {}} aria-label="Edit">
+              editing
+            </Dialog>
+          )}
+          <BottomSheet
+            isOpen={isNonModalOpen}
+            onOpenChange={setIsNonModalOpen}
+            hasScrim={false}
+            label="NonModal">
+            non-modal
+          </BottomSheet>
+        </>
+      );
+    }
+    const entries: string[] = [];
+    const unsubscribe = subscribeModalOutlets(change => {
+      entries.push(change);
+    });
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open non-modal'}));
+    expect(HTMLDialogElement.prototype.show).toHaveBeenCalledTimes(1);
+    expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+    // The Dialog is removed from the document still open: no `close` event
+    // and no sheet-stack update follow. The removal itself is the signal.
+    fireEvent.click(screen.getByRole('button', {name: 'Unmount dialog'}));
+    expect(screen.queryByRole('dialog', {name: 'Edit'})).toBeNull();
+    // Mutation records are delivered on a microtask.
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(1);
+    expect(getDialog('NonModal')).toHaveAttribute('open');
+    expect(entries).toContain('entry');
+    unsubscribe();
+  });
+
+  it('a hasScrim={false} sheet opened in the update that closes a modal sheet enters the top layer at once (the closing modal is gone for this decision)', () => {
+    function App() {
+      const [isModalOpen, setIsModalOpen] = useState(true);
+      const [isNonModalOpen, setIsNonModalOpen] = useState(false);
+      return (
+        <>
+          <BottomSheet
+            isOpen={isModalOpen}
+            onOpenChange={setIsModalOpen}
+            label="Modal">
+            <button
+              type="button"
+              onClick={() => {
+                setIsModalOpen(false);
+                setIsNonModalOpen(true);
+              }}>
+              Swap
+            </button>
+          </BottomSheet>
+          <BottomSheet
+            isOpen={isNonModalOpen}
+            onOpenChange={setIsNonModalOpen}
+            hasScrim={false}
+            label="NonModal">
+            non-modal
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    // A browser keeps answering `:modal` for the closing dialog until its
+    // close(); jsdom answers false to `:modal` for everything, so give this
+    // dialog the browser's answer.
+    const modal = getDialog('Modal');
+    const nativeMatches = modal.matches.bind(modal);
+    vi.spyOn(modal, 'matches').mockImplementation((selectors: string) =>
+      selectors === ':modal'
+        ? modal.hasAttribute('open')
+        : nativeMatches(selectors),
+    );
+    fireEvent.click(screen.getByRole('button', {name: 'Swap'}));
+    // The modal sheet is mid-exit: still an open modal dialog, but inert.
+    expect(modal).toHaveAttribute('open');
+    expect(modal).toHaveAttribute('inert');
+    expect(modal.matches(':modal')).toBe(true);
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(1);
+    expect(HTMLDialogElement.prototype.show).not.toHaveBeenCalled();
+  });
+
+  it('a hasScrim={false} sheet deferred under a plain showModal() dialog with no aria-modal (a MobileNav or Lightbox host) is promoted when that dialog is removed while open', async () => {
+    // A bare <dialog> presented with showModal(): the browser answers
+    // `:modal` for it and nothing sets aria-modal. jsdom answers false to
+    // `:modal` for everything, so give this dialog the browser's answer —
+    // only while it is in the document and open, as a browser would.
+    const plain = document.createElement('dialog');
+    plain.setAttribute('aria-label', 'Nav');
+    plain.textContent = 'nav';
+    document.body.appendChild(plain);
+    plain.setAttribute('open', '');
+    const nativeMatches = plain.matches.bind(plain);
+    vi.spyOn(plain, 'matches').mockImplementation((selectors: string) =>
+      selectors === ':modal'
+        ? plain.isConnected && plain.hasAttribute('open')
+        : nativeMatches(selectors),
+    );
+    function App() {
+      const [isOpen, setIsOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setIsOpen(true)}>
+            Open non-modal
+          </button>
+          <BottomSheet
+            isOpen={isOpen}
+            onOpenChange={setIsOpen}
+            hasScrim={false}
+            label="NonModal">
+            non-modal
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open non-modal'}));
+    expect(HTMLDialogElement.prototype.show).toHaveBeenCalledTimes(1);
+    expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+    // The nav is removed from the document still open: no close event, and
+    // nothing on the removed node says it was modal.
+    plain.remove();
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(1);
+    expect(getDialog('NonModal')).toHaveAttribute('open');
+  });
+
+  it('a hasScrim={false} sheet deferred under one Dialog that is replaced by another in a single update is promoted when the second unmounts while open (the re-check records the new blocker)', async () => {
+    function App() {
+      const [editor, setEditor] = useState<'caption' | 'alt' | null>('caption');
+      const [isNonModalOpen, setIsNonModalOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setIsNonModalOpen(true)}>
+            Open non-modal
+          </button>
+          <button type="button" onClick={() => setEditor('alt')}>
+            Switch editor
+          </button>
+          <button type="button" onClick={() => setEditor(null)}>
+            Unmount editor
+          </button>
+          {editor === 'caption' && (
+            <Dialog isOpen onOpenChange={() => {}} aria-label="Caption">
+              caption
+            </Dialog>
+          )}
+          {editor === 'alt' && (
+            <Dialog isOpen onOpenChange={() => {}} aria-label="Alt text">
+              alt text
+            </Dialog>
+          )}
+          <BottomSheet
+            isOpen={isNonModalOpen}
+            onOpenChange={setIsNonModalOpen}
+            hasScrim={false}
+            label="NonModal">
+            non-modal
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open non-modal'}));
+    expect(HTMLDialogElement.prototype.show).toHaveBeenCalledTimes(1);
+    expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+    // One update: the Caption dialog leaves (still open, no close event) and
+    // the Alt text dialog arrives open. The sheet stays beneath the new one.
+    fireEvent.click(screen.getByRole('button', {name: 'Switch editor'}));
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(screen.queryByRole('dialog', {name: 'Caption'})).toBeNull();
+    expect(getDialog('Alt text')).toHaveAttribute('open');
+    expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+    // The second dialog unmounts while open too.
+    fireEvent.click(screen.getByRole('button', {name: 'Unmount editor'}));
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(1);
+    expect(getDialog('NonModal')).toHaveAttribute('open');
+  });
+
+  it('a hasScrim={false} sheet opened with no modal open enters the top layer', () => {
+    function App() {
+      const [isOpen, setIsOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setIsOpen(true)}>
+            Open non-modal
+          </button>
+          <BottomSheet
+            isOpen={isOpen}
+            onOpenChange={setIsOpen}
+            hasScrim={false}
+            label="NonModal">
+            non-modal
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open non-modal'}));
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(1);
+    expect(HTMLDialogElement.prototype.show).not.toHaveBeenCalled();
+  });
+
+  it('a modal sheet opened over a non-modal sheet does not recede it', () => {
+    function App() {
+      const [isModalOpen, setIsModalOpen] = useState(false);
+      return (
+        <>
+          <BottomSheet
+            isOpen
+            onOpenChange={() => {}}
+            hasScrim={false}
+            label="NonModal">
+            <button type="button" onClick={() => setIsModalOpen(true)}>
+              Open modal
+            </button>
+          </BottomSheet>
+          <BottomSheet
+            isOpen={isModalOpen}
+            onOpenChange={setIsModalOpen}
+            label="Modal">
+            modal
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open modal'}));
+    expect(stackSummary()).toEqual(['Modal:top:0']);
+    expect(getDialog('NonModal')).not.toHaveAttribute('data-sheet-stack');
+    expect(getDialog('NonModal')).not.toHaveAttribute('inert');
+    expect(
+      getComputedStyle(getPositioner(getDialog('NonModal'))).transform,
+    ).toBe('');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 13 — one registry per realm, per document
+// ---------------------------------------------------------------------------
+
+describe('R13 registry state', () => {
+  it('keeps its state on globalThis under a shared symbol, with its shape', () => {
+    const holder = globalThis as Record<symbol, unknown>;
+    const shared = holder[BOTTOM_SHEET_STACK_STATE_FOR_TESTS.key] as {
+      shape: number;
+      entries: unknown[];
+    };
+    expect(shared.shape).toBe(BOTTOM_SHEET_STACK_STATE_FOR_TESTS.shape);
+    render(<Siblings initialA />);
+    expect(shared.entries).toHaveLength(1);
+  });
+
+  it('everything the stack reads across commits is in the shared state, nothing per copy: the deferred non-modal sheets and the element to keep focused are shared by a second same-protocol copy', async () => {
+    const holder = globalThis as Record<symbol, unknown>;
+    const shared = holder[BOTTOM_SHEET_STACK_STATE_FOR_TESTS.key] as {
+      entries: unknown[];
+      shownOrder: WeakMap<Document, unknown>;
+      listenedDocuments: WeakMap<Document, unknown>;
+      lastPress: WeakMap<Document, unknown>;
+      focusToKeep: WeakMap<Document, unknown>;
+      deferredTopLayer: WeakMap<Document, {deferred: Map<unknown, unknown>}>;
+    };
+    // The shape carries every per-document table the stack keeps.
+    for (const table of [
+      'shownOrder',
+      'listenedDocuments',
+      'lastPress',
+      'focusToKeep',
+      'deferredTopLayer',
+    ] as const) {
+      expect(shared[table]).toBeInstanceOf(WeakMap);
+    }
+    // A deferral made by this copy is visible to a fresh same-protocol copy:
+    // a non-modal sheet shown beneath an open Dialog waits in the shared
+    // state, and the copy's own promotion pass finds it and promotes it.
+    function App() {
+      const [isDialogOpen, setIsDialogOpen] = useState(true);
+      const [isNonModalOpen, setIsNonModalOpen] = useState(false);
+      return (
+        <>
+          <Dialog
+            isOpen={isDialogOpen}
+            onOpenChange={setIsDialogOpen}
+            aria-label="Edit">
+            <button type="button" onClick={() => setIsNonModalOpen(true)}>
+              Open non-modal
+            </button>
+            <button type="button" onClick={() => setIsDialogOpen(false)}>
+              Close dialog
+            </button>
+          </Dialog>
+          <BottomSheet
+            isOpen={isNonModalOpen}
+            onOpenChange={setIsNonModalOpen}
+            hasScrim={false}
+            label="NonModal">
+            non-modal
+          </BottomSheet>
+        </>
+      );
+    }
+    render(<App />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open non-modal'}));
+    expect(shared.deferredTopLayer.get(document)?.deferred.size).toBe(1);
+    vi.resetModules();
+    const copy = await import('./bottomSheetStack');
+    // The Dialog closes without the event the listener would need (the stub
+    // close() fires none): the second copy's promotion pass, reading the
+    // shared deferrals, promotes the sheet this copy deferred.
+    fireEvent.click(screen.getByRole('button', {name: 'Close dialog'}));
+    act(() => {
+      copy.promoteDeferredNonModal(document);
+    });
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(1);
+    expect(shared.deferredTopLayer.get(document)?.deferred.size).toBe(0);
+  });
+
+  it('a second copy of the module shares the same state', async () => {
+    // Two copies of the package on one page (two bundles, a dev server
+    // serving one file under two URLs) must see one stack.
+    vi.resetModules();
+    const copy = await import('./bottomSheetStack');
+    expect(copy.registerBottomSheet).not.toBe(registerBottomSheet);
+    render(<Siblings initialA />);
+    expect(copy.getBottomSheetStackForTests()).toHaveLength(1);
+    expect(copy.getBottomSheetStackForTests()[0].element).toBe(getDialog('A'));
+  });
+
+  it('the document-global key names the protocol version', () => {
+    const {key, protocolVersion, keyFor} = BOTTOM_SHEET_STACK_STATE_FOR_TESTS;
+    expect(key).toBe(keyFor(protocolVersion));
+    expect(key.description).toBe(`astryx.bottomSheetStack.v${protocolVersion}`);
+  });
+
+  it('two copies on different protocol versions keep two independent stacks: each orders only the sheets its copy renders (PR1)', async () => {
+    // A copy on another protocol version writes its state under its own
+    // key, so neither copy ever reads a state of the wrong shape. Modelled
+    // with this copy's state parked under the previous version's key, the
+    // way an older bundle on the page would have left it.
+    const holder = globalThis as Record<symbol, unknown>;
+    const {key, keyFor, protocolVersion} = BOTTOM_SHEET_STACK_STATE_FOR_TESTS;
+    const olderKey = keyFor(protocolVersion - 1);
+    const thisState = holder[key];
+    holder[olderKey] = {...(thisState as object), shape: protocolVersion - 1};
+    try {
+      render(<Siblings initialA />);
+      expect(getBottomSheetStackForTests()).toHaveLength(1);
+      // A fresh copy of the module speaks this protocol and joins this stack.
+      vi.resetModules();
+      const sameProtocol = await import('./bottomSheetStack');
+      expect(sameProtocol.getBottomSheetStackForTests()).toHaveLength(1);
+      // The older state under the older key saw nothing of it: the two
+      // stacks are independent, and the older copy's would order only what
+      // that copy rendered.
+      const older = holder[olderKey] as {entries: unknown[]; shape: number};
+      expect(older.shape).toBe(protocolVersion - 1);
+      expect(older).not.toBe(holder[key]);
+    } finally {
+      Reflect.deleteProperty(holder, olderKey);
+    }
+  });
+
+  it('a state found under this version key with another shape (a key collision) is not shared', async () => {
+    const holder = globalThis as Record<symbol, unknown>;
+    const shared = holder[BOTTOM_SHEET_STACK_STATE_FOR_TESTS.key] as {
+      shape: number;
+    };
+    const shape = shared.shape;
+    shared.shape = shape + 1000;
+    try {
+      vi.resetModules();
+      const copy = await import('./bottomSheetStack');
+      render(<Siblings initialA />);
+      expect(copy.getBottomSheetStackForTests()).toHaveLength(0);
+    } finally {
+      shared.shape = shape;
+    }
+  });
+
+  it('the press listeners are installed once per document with its first sheet, removed when its last sheet leaves, and installed again by the next (INV5)', () => {
+    const {isListeningForPresses} = BOTTOM_SHEET_STACK_STATE_FOR_TESTS;
+    const add = vi.spyOn(document, 'addEventListener');
+    const remove = vi.spyOn(document, 'removeEventListener');
+    const pressAdds = () =>
+      add.mock.calls.filter(
+        ([type, , options]) =>
+          ['pointerdown', 'click', 'keydown'].includes(type) &&
+          options === true,
+      ).length;
+    const pressRemoves = () =>
+      remove.mock.calls.filter(
+        ([type, , options]) =>
+          ['pointerdown', 'click', 'keydown'].includes(type) &&
+          options === true,
+      ).length;
+    expect(isListeningForPresses(document)).toBe(false);
+    const view = render(<Siblings initialA initialB />);
+    // Two sheets, one set of three listeners.
+    expect(isListeningForPresses(document)).toBe(true);
+    expect(pressAdds()).toBe(3);
+    // The top sheet leaves: the other still reads presses.
+    fireEvent.click(screen.getByRole('button', {name: 'Close B'}));
+    finishExit(getDialog('B'));
+    view.rerender(<Siblings initialA />);
+    expect(isListeningForPresses(document)).toBe(true);
+    expect(pressRemoves()).toBe(0);
+    // The last sheet leaves the registry (unmounted): the listeners go.
+    view.unmount();
+    expect(isListeningForPresses(document)).toBe(false);
+    expect(pressRemoves()).toBe(3);
+    // The next sheet installs them again.
+    render(<Siblings initialA />);
+    expect(isListeningForPresses(document)).toBe(true);
+    expect(pressAdds()).toBe(6);
+    add.mockRestore();
+    remove.mockRestore();
+  });
+
+  it('a recorded press holds its target weakly: a removed, collected target is not an actor', () => {
+    // WeakRef cannot be forced to clear in a test; what can be checked is
+    // that the record is a WeakRef whose deref is read, by swapping in one
+    // that answers undefined and seeing the actor fall back to focus.
+    render(<Siblings initialA />);
+    const holder = globalThis as Record<symbol, unknown>;
+    const shared = holder[BOTTOM_SHEET_STACK_STATE_FOR_TESTS.key] as {
+      lastPress: WeakMap<Document, {target: WeakRef<Element>; at: number}>;
+    };
+    fireEvent.pointerDown(screen.getByRole('button', {name: 'Open B'}));
+    const press = shared.lastPress.get(document);
+    expect(press).toBeDefined();
+    expect(press!.target).toBeInstanceOf(WeakRef);
+    expect(press!.target.deref()).toBe(
+      screen.getByRole('button', {name: 'Open B'}),
+    );
+  });
+
+  it('two copies, one presenting in an iframe document and one in the main document, keep both sheets shown', async () => {
+    // Everything the reconcile reads — the per-document shown order and the
+    // press listener registry — lives in the shared state, so a copy that
+    // first meets a document does not mistake it for another copy's.
+    vi.resetModules();
+    const {BottomSheet: CopyBottomSheet} = await import('./BottomSheet');
+    const copyStack = await import('./bottomSheetStack');
+    expect(copyStack.registerBottomSheet).not.toBe(registerBottomSheet);
+    const frame = document.createElement('iframe');
+    document.body.appendChild(frame);
+    const frameDocument = frame.contentDocument as Document;
+    const FrameDialog = (frame.contentWindow as Window & typeof globalThis)
+      .HTMLDialogElement;
+    FrameDialog.prototype.showModal = HTMLDialogElement.prototype.showModal;
+    FrameDialog.prototype.close = HTMLDialogElement.prototype.close;
+    const mount = frameDocument.createElement('div');
+    frameDocument.body.appendChild(mount);
+    function App() {
+      return (
+        <>
+          {createPortal(
+            <CopyBottomSheet isOpen onOpenChange={() => {}} label="Framed">
+              framed
+            </CopyBottomSheet>,
+            mount,
+          )}
+          <BottomSheet isOpen onOpenChange={() => {}} label="A">
+            a
+          </BottomSheet>
+        </>
+      );
+    }
+    try {
+      render(<App />);
+      expect(
+        nativeLog.map(
+          ({call, dialog}) => `${call}:${dialog.getAttribute('aria-label')}`,
+        ),
+      ).toEqual(['showModal:Framed', 'showModal:A']);
+      expect(stackSummary()).toEqual(['A:top:0']);
+      expect(
+        copyStack
+          .getBottomSheetStackForTests(frameDocument)
+          .map(({element}) => element?.getAttribute('aria-label')),
+      ).toEqual(['Framed']);
+      expect(
+        getBottomSheetStackForTests(frameDocument).map(({element}) =>
+          element?.getAttribute('aria-label'),
+        ),
+      ).toEqual(['Framed']);
+      expect(frameDocument.querySelector('dialog')).toHaveAttribute('open');
+    } finally {
+      frame.remove();
+    }
+  });
+
+  it('sheets in another document form their own stack', () => {
+    const frame = document.createElement('iframe');
+    document.body.appendChild(frame);
+    const frameDocument = frame.contentDocument as Document;
+    // jsdom has no showModal/close in any realm; the frame's realm gets the
+    // same stand-ins as the main one.
+    const FrameDialog = (frame.contentWindow as Window & typeof globalThis)
+      .HTMLDialogElement;
+    FrameDialog.prototype.showModal = HTMLDialogElement.prototype.showModal;
+    FrameDialog.prototype.close = HTMLDialogElement.prototype.close;
+    const mount = frameDocument.createElement('div');
+    frameDocument.body.appendChild(mount);
+    function App() {
+      return (
+        <>
+          <BottomSheet isOpen onOpenChange={() => {}} label="A">
+            a
+          </BottomSheet>
+          {createPortal(
+            <BottomSheet isOpen onOpenChange={() => {}} label="Framed">
+              framed
+            </BottomSheet>,
+            mount,
+          )}
+        </>
+      );
+    }
+    try {
+      render(<App />);
+      expect(stackSummary()).toEqual(['A:top:0']);
+      expect(
+        getBottomSheetStackForTests(frameDocument).map(
+          ({element, view}) =>
+            `${element?.getAttribute('aria-label')}:${view.isTop ? 'top' : 'covered'}`,
+        ),
+      ).toEqual(['Framed:top']);
+      expect(getDialog('A')).not.toHaveAttribute('data-sheet-stack');
+    } finally {
+      frame.remove();
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Requirement 12 — existing behaviour: the standalone and switcher contracts
+// ---------------------------------------------------------------------------
+
+describe('R14 a switcher flow stacked with standalone sheets', () => {
+  function Mixed() {
+    const [isAOpen, setIsAOpen] = useState(false);
+    const [step, setStep] = useState<string | null>(null);
+    const [isCOpen, setIsCOpen] = useState(false);
+    return (
+      <>
+        <button type="button" onClick={() => setIsAOpen(true)}>
+          Open A
+        </button>
+        <button type="button" onClick={() => setStep('one')}>
+          Open flow
+        </button>
+        <button type="button" onClick={() => setStep('two')}>
+          Step two
+        </button>
+        <button type="button" onClick={() => setStep(null)}>
+          Close flow
+        </button>
+        <button type="button" onClick={() => setIsCOpen(true)}>
+          Open C
+        </button>
+        <BottomSheet isOpen={isAOpen} onOpenChange={setIsAOpen} label="A">
+          <button type="button" onClick={() => setStep('one')}>
+            Open flow from A
+          </button>
+        </BottomSheet>
+        <BottomSheetSwitcher activeSheet={step} onActiveSheetChange={setStep}>
+          <BottomSheet sheetId="one" label="One">
+            <button type="button" onClick={() => setIsCOpen(true)}>
+              Open C from one
+            </button>
+          </BottomSheet>
+          <BottomSheet sheetId="two" label="Two">
+            two
+          </BottomSheet>
+        </BottomSheetSwitcher>
+        <BottomSheet isOpen={isCOpen} onOpenChange={setIsCOpen} label="C">
+          <button type="button" onClick={() => setIsCOpen(false)}>
+            Close C
+          </button>
+        </BottomSheet>
+      </>
+    );
+  }
+
+  it('a flow over a standalone sheet: one scrim (the sheet’s), the sheet recedes, the flow’s steps stay clear through a handoff', () => {
+    render(<Mixed />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open A'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Open flow from A'}));
+    expect(stackSummary()).toEqual(['A:covered:1', 'One:top:0']);
+    expect(topLayerOrder()).toEqual(['A', 'One']);
+    expect(scrim(getDialog('A'))).toBe('1');
+    expect(scrim(getDialog('One'))).toBe('0');
+    expect(getDialog('A')).toHaveAttribute('data-sheet-stack', 'covered');
+    expect(getDialog('A')).toHaveAttribute('inert');
+    expect(getDialog('One')).toHaveAttribute('data-sheet-stack', 'top');
+    expect(getDialog('One')).not.toHaveAttribute('inert');
+
+    fireEvent.click(screen.getByRole('button', {name: 'Step two'}));
+    // Neither step dims: A still owns the stack's scrim.
+    expect(scrim(getDialog('One'))).toBe('0');
+    expect(scrim(getDialog('Two'))).toBe('0');
+    expect(topLayerOrder()).toEqual(['A', 'One', 'Two']);
+    finishHandoff(getDialog('Two'), getDialog('One'));
+    expect(stackSummary()).toEqual(['A:covered:1', 'Two:top:0']);
+    expect(scrim(getDialog('A'))).toBe('1');
+    expect(scrim(getDialog('Two'))).toBe('0');
+    expect(getDialog('A')).toHaveAttribute('data-sheet-stack', 'covered');
+
+    // Escape reaches the flow, not the covered sheet.
+    act(() => {
+      pressEscape();
+    });
+    expect(stackSummary()).toEqual(['A:top:0', 'Two:exiting:0']);
+    finishExit(getDialog('Two'));
+    expect(stackSummary()).toEqual(['A:top:0']);
+    expect(getDialog('A')).not.toHaveAttribute('data-sheet-stack');
+    expect(getDialog('A')).not.toHaveAttribute('inert');
+    expect(scrim(getDialog('A'))).toBe('1');
+  });
+
+  it('a flow closing over a standalone sheet returns focus into that sheet', () => {
+    render(<Mixed />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open A'}));
+    const opener = screen.getByRole('button', {name: 'Open flow from A'});
+    opener.focus();
+    fireEvent.click(opener);
+    expect(stackSummary()).toEqual(['A:covered:1', 'One:top:0']);
+    fireEvent.click(screen.getByRole('button', {name: 'Close flow'}));
+    finishExit(getDialog('One'));
+    expect(stackSummary()).toEqual(['A:top:0']);
+    // The opener is inside the revealed sheet, so it takes focus back.
+    expect(opener).toHaveFocus();
+  });
+
+  it('a standalone sheet over a flow: the flow owns the one scrim and recedes as a whole; the sheet is clear', () => {
+    render(<Mixed />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open flow'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Open C from one'}));
+    expect(stackSummary()).toEqual(['One:covered:1', 'C:top:0']);
+    expect(topLayerOrder()).toEqual(['One', 'C']);
+    expect(scrim(getDialog('One'))).toBe('1');
+    expect(scrim(getDialog('C'))).toBe('0');
+    const stepDialog = getDialog('One');
+    expect(stepDialog).toHaveAttribute('data-sheet-stack', 'covered');
+    expect(stepDialog).toHaveAttribute('data-sheet-stack-depth', '1');
+    expect(stepDialog).toHaveAttribute('inert');
+    expect(stepDialog).toHaveAttribute('aria-hidden', 'true');
+    expect(
+      getComputedStyle(getPanel(stepDialog).parentElement!).transform,
+    ).toContain('scale(.96)');
+
+    // Escape reaches C, the top sheet; the covered flow stands down.
+    act(() => {
+      pressEscape();
+    });
+    expect(stackSummary()).toEqual(['One:top:0', 'C:exiting:0']);
+    finishExit(getDialog('C'));
+    expect(stackSummary()).toEqual(['One:top:0']);
+    expect(stepDialog).not.toHaveAttribute('data-sheet-stack');
+    expect(stepDialog).not.toHaveAttribute('inert');
+    expect(scrim(stepDialog)).toBe('1');
+  });
+
+  it('a step switch while the flow is covered keeps the covering sheet on top', () => {
+    render(<Mixed />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open flow'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Open C'}));
+    expect(topLayerOrder()).toEqual(['One', 'C']);
+    // Only code can switch a covered flow; the new step's dialog is presented
+    // on top, and the registry puts C back above it in the same commit.
+    fireEvent.click(screen.getByRole('button', {name: 'Step two'}));
+    expect(topLayerOrder()).toEqual(['One', 'Two', 'C']);
+    expect(stackSummary()).toEqual(['Two:covered:1', 'C:top:0']);
+    expect(scrim(getDialog('C'))).toBe('0');
+    finishHandoff(getDialog('Two'), getDialog('One'));
+    expect(topLayerOrder()).toEqual(['Two', 'C']);
+    expect(scrim(getDialog('Two'))).toBe('1');
+    expect(getDialog('Two')).toHaveAttribute('inert');
+  });
+
+  it('a standalone sheet closing over a flow returns focus into the flow’s active step', () => {
+    render(<Mixed />);
+    fireEvent.click(screen.getByRole('button', {name: 'Open flow'}));
+    const opener = screen.getByRole('button', {name: 'Open C from one'});
+    opener.focus();
+    fireEvent.click(opener);
+    fireEvent.click(screen.getByRole('button', {name: 'Close C'}));
+    finishExit(getDialog('C'));
+    expect(stackSummary()).toEqual(['One:top:0']);
+    expect(opener).toHaveFocus();
+  });
+});
+
+describe('R12 existing behaviour', () => {
+  it('a standalone sheet presented alone keeps its full contract after a stack has come and gone', () => {
+    render(<Siblings initialA />);
+    const a = getDialog('A');
+    fireEvent.click(screen.getByRole('button', {name: 'Open B'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Close B'}));
+    finishExit(getDialog('B'));
+    expect(stackSummary()).toEqual(['A:top:0']);
+    expect(a).not.toHaveAttribute('data-sheet-stack');
+    expect(a).not.toHaveAttribute('inert');
+    expect(scrim(a)).toBe('1');
+    expect(getComputedStyle(getPositioner(a)).transform).toBe('');
+    expect(classes(getPositioner(a))).not.toContain('positionerStackMotion');
+    act(() => {
+      pressEscape();
+    });
+    expect(stackSummary()).toEqual(['A:exiting:0']);
+    finishExit(a);
+    expect(openDialogs()).toEqual([]);
+  });
+
+  it('a switcher on its own presents each step in its own dialog, hands its scrim over, and carries no stack state', () => {
+    function Flow() {
+      const [step, setStep] = useState<string | null>('one');
+      return (
+        <BottomSheetSwitcher activeSheet={step} onActiveSheetChange={setStep}>
+          <BottomSheet sheetId="one" label="One">
+            <button type="button" onClick={() => setStep('two')}>
+              Next
+            </button>
+          </BottomSheet>
+          <BottomSheet sheetId="two" label="Two">
+            two
+          </BottomSheet>
+        </BottomSheetSwitcher>
+      );
+    }
+    render(<Flow />);
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledTimes(1);
+    fireEvent.click(screen.getByRole('button', {name: 'Next'}));
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledTimes(2);
+    const dialog = getDialog('Two');
+    // The retained step keeps the flow's scrim through the handoff.
+    expect(scrim(getDialog('One'))).toBe('1');
+    expect(scrim(dialog)).toBe('0');
+    finishHandoff(dialog, getDialog('One'));
+    expect(dialog).not.toHaveAttribute('data-sheet-stack');
+    expect(dialog).not.toHaveAttribute('inert');
+    expect(scrim(dialog)).toBe('1');
+    expect(getDialog('One')).not.toHaveAttribute('open');
+  });
+});