diff --git a/playwright/alert-dialog.spec.ts b/playwright/alert-dialog.spec.ts
index 7e464be74..92b713c3c 100644
--- a/playwright/alert-dialog.spec.ts
+++ b/playwright/alert-dialog.spec.ts
@@ -29,3 +29,31 @@ test('test', async ({ page }) => {
   // Assert the dialog is closed after confirming
   await expect(dialog).toHaveCount(0);
 });
+
+test('alert dialog marks background content inert', async ({ page }) => {
+  await page.goto('http://127.0.0.1:8080/component/?name=alert_dialog&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
+
+  // Is the trigger (which sits behind the dialog) inside an inert subtree?
+  const triggerIsInert = () => page.evaluate(() => {
+    const trigger = Array.from(document.querySelectorAll('button')).find(
+      (button) => button.textContent?.trim() === 'Show Alert Dialog'
+    );
+    return trigger ? trigger.closest('[inert]') !== null : null;
+  });
+
+  const trigger = page.getByRole('button', { name: 'Show Alert Dialog' });
+  await expect(trigger).toBeVisible();
+  await expect.poll(triggerIsInert).toBe(false);
+  await trigger.click();
+  await expect(page.getByRole('alertdialog')).toBeVisible();
+
+  await expect.poll(triggerIsInert).toBe(true);
+  await expect(page.locator('[data-inert-by]').first()).toBeAttached();
+
+  await page.keyboard.press('Escape');
+  await expect(page.getByRole('alertdialog')).toHaveCount(0);
+
+  await expect.poll(triggerIsInert).toBe(false);
+  await expect(page.locator('[data-inert-by]')).toHaveCount(0);
+  await expect(trigger).toBeFocused();
+});
diff --git a/playwright/dialog.spec.ts b/playwright/dialog.spec.ts
index 77d288f75..808f8b96a 100644
--- a/playwright/dialog.spec.ts
+++ b/playwright/dialog.spec.ts
@@ -33,3 +33,121 @@ test('test', async ({ page }) => {
   await page.mouse.click(2, 2);
   await expect(dialog).toHaveCount(0);
 });
+
+test('modal dialog marks background content inert', async ({ page }) => {
+  await page.goto('http://127.0.0.1:8080/component/?name=dialog&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
+
+  // Is the trigger (which sits behind the dialog) inside an inert subtree?
+  const triggerIsInert = () => page.evaluate(() => {
+    const trigger = Array.from(document.querySelectorAll('button')).find(
+      (button) => button.textContent?.trim() === 'Show Dialog'
+    );
+    return trigger ? trigger.closest('[inert]') !== null : null;
+  });
+
+  const trigger = page.getByRole('button', { name: 'Show Dialog' });
+  await expect(trigger).toBeVisible();
+  await expect.poll(triggerIsInert).toBe(false);
+  await trigger.click();
+  await expect(page.getByRole('dialog')).toBeVisible();
+
+  // Background content is inert while the modal is open, and every element that was made
+  // inert records the dialog that did it.
+  await expect.poll(triggerIsInert).toBe(true);
+  await expect(page.locator('[data-inert-by]').first()).toBeAttached();
+  // The dialog itself stays interactive.
+  await expect(page.getByRole('dialog')).not.toHaveAttribute('inert', '');
+
+  await page.keyboard.press('Escape');
+  await expect(page.getByRole('dialog')).toHaveCount(0);
+
+  // Closing unwinds everything it marked and returns focus to the opener.
+  await expect.poll(triggerIsInert).toBe(false);
+  await expect(page.locator('[data-inert-by]')).toHaveCount(0);
+  await expect(trigger).toBeFocused();
+});
+
+// The stacking rules live in the focus trap module rather than in any one component, and two
+// dialogs open at once has no demo to drive. Exercise the shipped bundle directly: the dialog
+// page loads it, and `createFocusTrap` is the same entry point the primitive calls.
+test('stacked focus traps compose and unwind independently', async ({ page }) => {
+  await page.goto('http://127.0.0.1:8080/component/?name=dialog&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
+  await page.waitForFunction(() => typeof (window as any).createFocusTrap === 'function');
+
+  const result = await page.evaluate(() => {
+    // <fixture>
+    //   <aside>          background for both dialogs
+    //   <wrapper>        background for the first, ancestor of the second
+    //     <filler>       background for the second only
+    //     <second>
+    //   <first>
+    const html = `<div id="t-aside"></div>
+      <div id="t-wrapper"><div id="t-filler"></div><div id="t-second"></div></div>
+      <div id="t-first"></div>`;
+    const fixture = document.createElement('div');
+    fixture.id = 't-fixture';
+    fixture.innerHTML = html;
+    document.body.append(fixture);
+    const el = (id: string) => document.getElementById(id)!;
+    // `inert` is inherited, so an element is unreachable if it or any ancestor carries it.
+    const blocked = (id: string) => el(id).closest('[inert]') !== null;
+
+    const createFocusTrap = (window as any).createFocusTrap;
+    const first = createFocusTrap(el('t-first'), { inertBackground: 'owner-first' });
+    const onlyFirst = {
+      aside: blocked('t-aside'),
+      wrapper: blocked('t-wrapper'),
+      second: blocked('t-second'),
+      first: blocked('t-first'),
+    };
+
+    const second = createFocusTrap(el('t-second'), { inertBackground: 'owner-second' });
+    const bothOpen = {
+      aside: blocked('t-aside'),
+      marker: el('t-aside').getAttribute('data-inert-by'),
+      wrapper: blocked('t-wrapper'),
+      filler: blocked('t-filler'),
+      second: blocked('t-second'),
+      first: blocked('t-first'),
+    };
+
+    second.remove();
+    const afterSecond = {
+      aside: blocked('t-aside'),
+      marker: el('t-aside').getAttribute('data-inert-by'),
+      wrapper: blocked('t-wrapper'),
+      first: blocked('t-first'),
+    };
+
+    first.remove();
+    const afterBoth = document.querySelectorAll('#t-fixture [inert], #t-fixture [data-inert-by]').length;
+
+    fixture.remove();
+    return { onlyFirst, bothOpen, afterSecond, afterBoth };
+  });
+
+  // One trap: everything outside it is inert, the trap itself is not.
+  expect(result.onlyFirst).toEqual({ aside: true, wrapper: true, second: true, first: false });
+
+  // Two traps: the one installed last is on top, so nothing on its path to <body> is inert —
+  // and the one underneath becomes inert itself. Shared background records both owners.
+  expect(result.bothOpen).toEqual({
+    aside: true,
+    marker: 'owner-first owner-second',
+    wrapper: false,
+    filler: true,
+    second: false,
+    first: true,
+  });
+
+  // Closing the top one hands the page back to the one underneath, not to the application.
+  expect(result.afterSecond).toEqual({
+    aside: true,
+    marker: 'owner-first',
+    wrapper: true,
+    first: false,
+  });
+
+  // Closing both leaves nothing behind.
+  expect(result.afterBoth).toBe(0);
+});
diff --git a/preview/src/components/alert_dialog/component.rs b/preview/src/components/alert_dialog/component.rs
index 91c862e7a..f3bf8c222 100644
--- a/preview/src/components/alert_dialog/component.rs
+++ b/preview/src/components/alert_dialog/component.rs
@@ -15,6 +15,7 @@ pub fn AlertDialog(props: AlertDialogRootProps) -> Element {
             id: props.id,
             default_open: props.default_open,
             open: props.open,
+            inert_background: props.inert_background,
             on_open_change: props.on_open_change,
             attributes: props.attributes,
             alert_dialog::AlertDialogContent {
diff --git a/preview/src/components/dialog/component.rs b/preview/src/components/dialog/component.rs
index af64ef403..a55d1ad82 100644
--- a/preview/src/components/dialog/component.rs
+++ b/preview/src/components/dialog/component.rs
@@ -17,6 +17,7 @@ pub fn Dialog(props: DialogRootProps) -> Element {
             class: Styles::dx_dialog_backdrop,
             id: props.id,
             is_modal: props.is_modal,
+            inert_background: props.inert_background,
             open: props.open,
             default_open: props.default_open,
             on_open_change: props.on_open_change,
diff --git a/preview/src/components/sheet/component.rs b/preview/src/components/sheet/component.rs
index d7b383fc0..637950640 100644
--- a/preview/src/components/sheet/component.rs
+++ b/preview/src/components/sheet/component.rs
@@ -44,6 +44,7 @@ pub fn Sheet(props: DialogRootProps) -> Element {
             "data-slot": "sheet-root",
             id: props.id,
             is_modal: props.is_modal,
+            inert_background: props.inert_background,
             open: props.open,
             default_open: props.default_open,
             on_open_change: props.on_open_change,
diff --git a/primitives/src/alert_dialog.rs b/primitives/src/alert_dialog.rs
index a2b8a5e84..4dd66175f 100644
--- a/primitives/src/alert_dialog.rs
+++ b/primitives/src/alert_dialog.rs
@@ -1,7 +1,7 @@
 //! Defines the [`AlertDialogRoot`] component and its sub-components.
 
 use crate::use_global_escape_listener;
-use crate::{use_animated_open, use_id_or, use_unique_id, FOCUS_TRAP_JS};
+use crate::{use_animated_open, use_focus_trap, use_id_or, use_unique_id, FOCUS_TRAP_JS};
 use dioxus::document;
 use dioxus::prelude::*;
 
@@ -9,6 +9,7 @@ use dioxus::prelude::*;
 struct AlertDialogCtx {
     open: Memo<bool>,
     set_open: Callback<bool>,
+    inert_background: ReadSignal<bool>,
     labelledby: String,
     describedby: String,
 }
@@ -27,6 +28,12 @@ pub struct AlertDialogRootProps {
     /// Callback to handle changes in the open state of the dialog.
     #[props(default)]
     pub on_open_change: Callback<bool>,
+    /// Whether to mark the content outside of the alert dialog `inert` while it is open, which
+    /// takes it out of the accessibility tree and makes it unreachable by pointer and by
+    /// programmatic focus. Defaults to true; set it to false if the application manages `inert`
+    /// itself.
+    #[props(default = ReadSignal::new(Signal::new(true)))]
+    pub inert_background: ReadSignal<bool>,
     /// Additional attributes to extend the root element.
     #[props(extends = GlobalAttributes)]
     pub attributes: Vec<Attribute>,
@@ -77,6 +84,14 @@ pub struct AlertDialogRootProps {
 ///
 /// The [`AlertDialogRoot`] component defines the following data attributes you can use to control styling:
 /// - `data-state`: Indicates if the alert dialog is open or closed. It can be either "open" or "closed".
+///
+/// ## Accessibility
+///
+/// While the alert dialog is open, the content outside of it is marked `inert`: it is removed from
+/// the accessibility tree and cannot be reached by a pointer or by a programmatic `focus()`. Every
+/// element marked this way also carries a `data-inert-by` attribute naming the dialogs that marked
+/// it, so stacked dialogs unwind independently, and `inert` the application had already set
+/// before the dialog opened is left alone. Set `inert_background` to false to opt out.
 #[component]
 pub fn AlertDialogRoot(props: AlertDialogRootProps) -> Element {
     let labelledby = use_unique_id().to_string();
@@ -90,6 +105,7 @@ pub fn AlertDialogRoot(props: AlertDialogRootProps) -> Element {
     use_context_provider(|| AlertDialogCtx {
         open,
         set_open,
+        inert_background: props.inert_background,
         labelledby,
         describedby,
     });
@@ -177,6 +193,7 @@ pub fn AlertDialogContent(props: AlertDialogContentProps) -> Element {
 
     let open = ctx.open;
     let set_open = ctx.set_open;
+    let inert_background = ctx.inert_background;
 
     // Add a escape key listener to the document when the dialog is open. We can't
     // just add this to the dialog itself because it might not be focused if the user
@@ -185,23 +202,8 @@ pub fn AlertDialogContent(props: AlertDialogContentProps) -> Element {
 
     let gen_id = use_unique_id();
     let id = use_id_or(gen_id, props.id);
-    use_effect(move || {
-        let eval = document::eval(
-            r#"let id = await dioxus.recv();
-            let is_open = await dioxus.recv();
-            let dialog = document.getElementById(id);
 
-            if (is_open) {
-                dialog.trap = window.createFocusTrap(dialog);
-            }
-            if (!is_open && dialog.trap) {
-                dialog.trap.remove();
-                dialog.trap = null;
-            }"#,
-        );
-        let _ = eval.send(id.to_string());
-        let _ = eval.send(open.cloned());
-    });
+    use_focus_trap(id, open, inert_background);
 
     rsx! {
         div {
diff --git a/primitives/src/dialog.rs b/primitives/src/dialog.rs
index 8959f372a..01bc90412 100644
--- a/primitives/src/dialog.rs
+++ b/primitives/src/dialog.rs
@@ -4,8 +4,8 @@ use dioxus::document;
 use dioxus::prelude::*;
 
 use crate::{
-    use_animated_open, use_controlled, use_global_escape_listener, use_id_or, use_outside_dismiss,
-    use_unique_id, FOCUS_TRAP_JS,
+    use_animated_open, use_controlled, use_focus_trap, use_global_escape_listener, use_id_or,
+    use_outside_dismiss, use_unique_id, FOCUS_TRAP_JS,
 };
 
 /// Context for the [`DialogRoot`] component
@@ -20,6 +20,9 @@ pub struct DialogCtx {
     // Whether the dialog is a modal and should capture focus.
     #[allow(unused)]
     is_modal: ReadSignal<bool>,
+
+    // Whether background content should be marked inert while a modal dialog is open.
+    inert_background: ReadSignal<bool>,
     dialog_labelledby: Signal<String>,
     dialog_describedby: Signal<String>,
 }
@@ -46,6 +49,13 @@ pub struct DialogRootProps {
     #[props(default = ReadSignal::new(Signal::new(true)))]
     pub is_modal: ReadSignal<bool>,
 
+    /// Whether to mark the content outside of a modal dialog `inert` while it is open, which
+    /// takes it out of the accessibility tree and makes it unreachable by pointer and by
+    /// programmatic focus. Defaults to true; set it to false if the application manages `inert`
+    /// itself. It has no effect if the dialog is not modal.
+    #[props(default = ReadSignal::new(Signal::new(true)))]
+    pub inert_background: ReadSignal<bool>,
+
     /// The controlled `open` state of the dialog.
     pub open: ReadSignal<Option<bool>>,
 
@@ -111,6 +121,14 @@ pub struct DialogRootProps {
 ///
 /// The [`DialogRoot`] component defines the following data attributes you can use to control styling:
 /// - `data-state`: Indicates if the dialog is open or closed. It can be either "open" or "closed".
+///
+/// ## Accessibility
+///
+/// While a modal dialog is open, the content outside of it is marked `inert`: it is removed from
+/// the accessibility tree and cannot be reached by a pointer or by a programmatic `focus()`. Every
+/// element marked this way also carries a `data-inert-by` attribute naming the dialogs that marked
+/// it, so stacked dialogs unwind independently, and `inert` the application had already set
+/// before the dialog opened is left alone. Set `inert_background` to false to opt out.
 #[component]
 pub fn DialogRoot(props: DialogRootProps) -> Element {
     let dialog_labelledby = use_unique_id();
@@ -125,6 +143,7 @@ pub fn DialogRoot(props: DialogRootProps) -> Element {
         open,
         set_open,
         is_modal: props.is_modal,
+        inert_background: props.inert_background,
         dialog_labelledby,
         dialog_describedby,
     });
@@ -218,6 +237,7 @@ pub fn DialogContent(props: DialogContentProps) -> Element {
     let ctx: DialogCtx = use_context();
     let open = ctx.open;
     let is_modal = ctx.is_modal;
+    let inert_background = ctx.inert_background;
     let set_open = ctx.set_open;
 
     // Add a escape key listener to the document when the dialog is open. We can't
@@ -229,29 +249,10 @@ pub fn DialogContent(props: DialogContentProps) -> Element {
     let id = use_id_or(gen_id, props.id);
 
     use_outside_dismiss(id, move || set_open.call(false));
-    use_effect(move || {
-        let is_modal = is_modal();
-        if !is_modal {
-            // If the dialog is not modal, we don't need to trap focus.
-            return;
-        }
-
-        let eval = document::eval(
-            r#"let id = await dioxus.recv();
-            let is_open = await dioxus.recv();
-            let dialog = document.getElementById(id);
 
-            if (is_open) {
-                dialog.trap = window.createFocusTrap(dialog);
-            }
-            if (!is_open && dialog.trap) {
-                dialog.trap.remove();
-                dialog.trap = null;
-            }"#,
-        );
-        let _ = eval.send(id.to_string());
-        let _ = eval.send(open.cloned());
-    });
+    // Only a modal dialog traps focus; a non-modal one leaves the rest of the page usable.
+    let trap_focus = use_memo(move || is_modal() && open());
+    use_focus_trap(id, trap_focus, inert_background);
 
     rsx! {
         div {
diff --git a/primitives/src/js/focus-trap.js b/primitives/src/js/focus-trap.js
index b403086ae..a642e41ce 100644
--- a/primitives/src/js/focus-trap.js
+++ b/primitives/src/js/focus-trap.js
@@ -1 +1 @@
-var focusable=function(element){if(element.tabIndex<0||element.getAttribute("disabled"))return!1;switch(element.tagName){case"A":return!!element.href&&element.rel!=="ignore";case"INPUT":return element.type!=="hidden";case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}};class FocusTrap{container;restoreFocusElement;nodeWalker;constructor(container){this.container=container,this.restoreFocusElement=document.activeElement,this.nodeWalker=document.createTreeWalker(this.container,NodeFilter.SHOW_ELEMENT,{acceptNode:(node)=>{if(node instanceof HTMLElement&&focusable(node))return NodeFilter.FILTER_ACCEPT;return NodeFilter.FILTER_SKIP}}),this.focusNext(),this.container.addEventListener("keydown",(event)=>{if(event.key==="Tab"){if(event.shiftKey)this.focusPrevious();else this.focusNext();event.preventDefault()}})}remove(){this.restoreFocusElement.focus()}focusChild(child){child.focus()}focusNext(){const nextNode=this.nodeWalker.nextNode();if(nextNode)this.focusChild(nextNode);else{this.nodeWalker.currentNode=this.container;const nextNode2=this.nodeWalker.nextNode();if(nextNode2)this.focusChild(nextNode2)}}focusPrevious(){const previousNode=this.nodeWalker.previousNode();if(previousNode)this.focusChild(previousNode);else{this.nodeWalker.currentNode=this.container;const lastNode=this.nodeWalker.lastChild();if(lastNode)this.focusChild(lastNode)}}}window.createFocusTrap=(container)=>{return new FocusTrap(container)};
\ No newline at end of file
+function focusable(element){if(element.tabIndex<0||element.getAttribute("disabled"))return!1;switch(element.tagName){case"A":return!!element.href&&element.rel!=="ignore";case"INPUT":return element.type!=="hidden";case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}}var INERT_OWNER_ATTR="data-inert-by",inertOwners=new Map;function readOwners(element){return(element.getAttribute(INERT_OWNER_ATTR)??"").split(" ").filter(Boolean)}function inertBackgroundFor(owner,container){inertOwners.set(owner,container),refreshInert()}function releaseInert(owner){inertOwners.delete(owner),refreshInert()}function refreshInert(){for(let element of Array.from(document.querySelectorAll(`[${INERT_OWNER_ATTR}]`)))element.removeAttribute(INERT_OWNER_ATTR),element.removeAttribute("inert");let open=Array.from(inertOwners).filter(([,container])=>container.isConnected);if(open.length===0)return;let top=open[open.length-1][1],onTopPath=new Set;for(let node=top;node;node=node.parentElement)onTopPath.add(node);for(let[owner,container]of open)markBackgroundInert(container,owner,onTopPath)}function markBackgroundInert(container,owner,onTopPath){let node=container;while(node!==document.body&&node.parentElement){let parent=node.parentElement;for(let sibling of Array.from(parent.children))if(sibling!==node&&sibling instanceof HTMLElement&&!onTopPath.has(sibling))markInert(sibling,owner);node=parent}}function markInert(element,owner){let owners=readOwners(element);if(owners.length===0&&element.hasAttribute("inert"))return;if(!owners.includes(owner))owners.push(owner),element.setAttribute(INERT_OWNER_ATTR,owners.join(" "));element.setAttribute("inert","")}class FocusTrap{container;restoreFocusElement;nodeWalker;inertOwner=null;constructor(container,options){if(this.container=container,this.restoreFocusElement=document.activeElement,this.nodeWalker=document.createTreeWalker(this.container,NodeFilter.SHOW_ELEMENT,{acceptNode:(node)=>{if(node instanceof HTMLElement&&focusable(node))return NodeFilter.FILTER_ACCEPT;return NodeFilter.FILTER_SKIP}}),options?.inertBackground)this.inertOwner=options.inertBackground,inertBackgroundFor(this.inertOwner,container);this.focusNext(),this.container.addEventListener("keydown",(event)=>{if(event.key==="Tab"){if(event.shiftKey)this.focusPrevious();else this.focusNext();event.preventDefault()}})}remove(){if(this.inertOwner!==null)releaseInert(this.inertOwner),this.inertOwner=null;if(this.restoreFocusElement?.isConnected){this.restoreFocusElement.focus();return}let main=document.querySelector("main");if(main){if(!main.hasAttribute("tabindex"))main.setAttribute("tabindex","-1"),main.addEventListener("blur",()=>main.removeAttribute("tabindex"),{once:!0});main.focus()}}focusChild(child){child.focus()}focusNext(){let nextNode=this.nodeWalker.nextNode();if(nextNode)this.focusChild(nextNode);else{this.nodeWalker.currentNode=this.container;let nextNode2=this.nodeWalker.nextNode();if(nextNode2)this.focusChild(nextNode2)}}focusPrevious(){let previousNode=this.nodeWalker.previousNode();if(previousNode)this.focusChild(previousNode);else{this.nodeWalker.currentNode=this.container;let lastNode=this.nodeWalker.lastChild();if(lastNode)this.focusChild(lastNode)}}}window.createFocusTrap=(container,options)=>new FocusTrap(container,options);window.releaseInertBackground=(owner)=>{releaseInert(owner)};
diff --git a/primitives/src/js/hash.txt b/primitives/src/js/hash.txt
index 4c9fc77d8..791455172 100644
--- a/primitives/src/js/hash.txt
+++ b/primitives/src/js/hash.txt
@@ -1 +1 @@
-[11982134631128731377]
\ No newline at end of file
+[4799083237276783177]
\ No newline at end of file
diff --git a/primitives/src/lib.rs b/primitives/src/lib.rs
index 1eb60c9bf..7ab7278eb 100644
--- a/primitives/src/lib.rs
+++ b/primitives/src/lib.rs
@@ -241,6 +241,57 @@ fn use_outside_dismiss(
     });
 }
 
+/// Trap focus inside the element with the given `id` while `active` is true.
+///
+/// When `inert_background` is set, everything outside that element is marked `inert` for as long
+/// as the trap is installed. `aria-modal` alone leaves background content reachable by a pointer,
+/// by a programmatic `focus()` and — depending on the screen reader — by a browse mode cursor;
+/// `inert` closes all three. The trap is released when `active` goes false and when the component
+/// is unmounted.
+fn use_focus_trap(
+    id: impl Readable<Target = String> + Copy + 'static,
+    active: impl Readable<Target = bool> + Copy + 'static,
+    inert_background: impl Readable<Target = bool> + Copy + 'static,
+) {
+    // The dialog is attributed its marks by an id of our own rather than by the id of its
+    // element: that one comes from the caller, and the marker holds a space separated list, so a
+    // caller id containing a space could not be read back out of it.
+    let owner = use_unique_id();
+    use_effect_with_cleanup(move || {
+        let id = id.cloned();
+        // `null` when the caller opted out, which leaves the background alone.
+        let owner = inert_background.cloned().then(|| owner.cloned());
+        let eval = active.cloned().then(|| {
+            let eval = document::eval(
+                r#"const id = await dioxus.recv();
+                const owner = await dioxus.recv();
+                const dialog = document.getElementById(id);
+                if (dialog) {
+                    dialog.trap = window.createFocusTrap(dialog, { inertBackground: owner });
+                }
+                await dioxus.recv();
+                if (dialog && dialog.trap) {
+                    dialog.trap.remove();
+                    dialog.trap = null;
+                }
+                // The dialog may have been unmounted while it was open, in which case there is
+                // no trap left to unwind what it marked. Release it by owner instead.
+                if (owner) {
+                    window.releaseInertBackground?.(owner);
+                }"#,
+            );
+            let _ = eval.send(id);
+            let _ = eval.send(owner);
+            eval
+        });
+        move || {
+            if let Some(eval) = &eval {
+                let _ = eval.send(true);
+            }
+        }
+    });
+}
+
 fn use_animated_open(
     id: impl Readable<Target = String> + Copy + 'static,
     open: impl Readable<Target = bool> + Copy + 'static,
diff --git a/primitives/src/ts/focus-trap.ts b/primitives/src/ts/focus-trap.ts
index 8b33ac883..c38290ad4 100644
--- a/primitives/src/ts/focus-trap.ts
+++ b/primitives/src/ts/focus-trap.ts
@@ -20,12 +20,118 @@ function focusable(element: HTMLElement) {
   }
 }
 
+// Records which dialogs made an element inert. The value is a space separated list of
+// owner ids so that stacked dialogs compose: closing the top one only removes its own
+// id and the element stays inert while a dialog underneath still needs it.
+//
+// An element the application marked inert before the dialog opened carries no marker, so it
+// is left alone.
+const INERT_OWNER_ATTR = "data-inert-by";
+
+// The containers of the traps that are currently marking the background, keyed by owner
+// id, in the order they were installed. The whole inert state is recomputed from this
+// map, so opening and closing a dialog on top of another one composes by construction.
+const inertOwners = new Map<string, HTMLElement>();
+
+function readOwners(element: HTMLElement): string[] {
+  return (element.getAttribute(INERT_OWNER_ATTR) ?? "").split(" ").filter(Boolean);
+}
+
+function inertBackgroundFor(owner: string, container: HTMLElement) {
+  inertOwners.set(owner, container);
+  refreshInert();
+}
+
+function releaseInert(owner: string) {
+  inertOwners.delete(owner);
+  refreshInert();
+}
+
+// Recompute which elements are inert from the dialogs that are currently open. Clearing
+// first and marking again keeps the two directions in one place: a dialog that opens
+// inside a subtree an earlier dialog marked has to make that subtree reachable again,
+// which no amount of marking alone can do.
+function refreshInert() {
+  for (const element of Array.from(
+    document.querySelectorAll<HTMLElement>(`[${INERT_OWNER_ATTR}]`)
+  )) {
+    element.removeAttribute(INERT_OWNER_ATTR);
+    element.removeAttribute("inert");
+  }
+
+  const open = Array.from(inertOwners).filter(([, container]) =>
+    container.isConnected
+  );
+  if (open.length === 0) {
+    return;
+  }
+
+  // The dialog installed last is the one on top, so nothing on its path to `<body>` may
+  // be inert — that path contains the dialog itself. Every other open dialog still marks
+  // its own background, which is how the one on top covers the ones underneath.
+  const top = open[open.length - 1][1];
+  const onTopPath = new Set<Element>();
+  for (let node: Element | null = top; node; node = node.parentElement) {
+    onTopPath.add(node);
+  }
+
+  for (const [owner, container] of open) {
+    markBackgroundInert(container, owner, onTopPath);
+  }
+}
+
+// Mark everything outside of `container` inert, so background content is removed from the
+// accessibility tree and cannot be reached by a pointer or a programmatic `focus()`.
+// `aria-modal` alone covers none of that reliably.
+function markBackgroundInert(
+  container: HTMLElement,
+  owner: string,
+  onTopPath: Set<Element>
+) {
+  let node: HTMLElement = container;
+  while (node !== document.body && node.parentElement) {
+    const parent = node.parentElement;
+    for (const sibling of Array.from(parent.children)) {
+      if (
+        sibling !== node &&
+        sibling instanceof HTMLElement &&
+        !onTopPath.has(sibling)
+      ) {
+        markInert(sibling, owner);
+      }
+    }
+    node = parent;
+  }
+}
+
+function markInert(element: HTMLElement, owner: string) {
+  const owners = readOwners(element);
+  // The application owns this one; leave it (and its lack of a marker) alone.
+  if (owners.length === 0 && element.hasAttribute("inert")) {
+    return;
+  }
+  if (!owners.includes(owner)) {
+    owners.push(owner);
+    element.setAttribute(INERT_OWNER_ATTR, owners.join(" "));
+  }
+  element.setAttribute("inert", "");
+}
+
+type FocusTrapOptions = {
+  // Mark the content outside the trap inert while it is installed, attributing every mark to
+  // this owner id — the same id `releaseInertBackground` unwinds by. The caller owns the id so
+  // that marking and unwinding cannot disagree about it. Omitted leaves the background alone: a
+  // modal dialog wants it, a popover that only borrows focus does not.
+  inertBackground?: string | null;
+};
+
 class FocusTrap {
   private container: HTMLElement;
   private restoreFocusElement: HTMLElement;
   private nodeWalker: TreeWalker;
+  private inertOwner: string | null = null;
 
-  constructor(container: HTMLElement) {
+  constructor(container: HTMLElement, options?: FocusTrapOptions) {
     this.container = container;
     this.restoreFocusElement = document.activeElement as HTMLElement;
     this.nodeWalker = document.createTreeWalker(
@@ -40,6 +146,10 @@ class FocusTrap {
         },
       }
     );
+    if (options?.inertBackground) {
+      this.inertOwner = options.inertBackground;
+      inertBackgroundFor(this.inertOwner, container);
+    }
     this.focusNext();
     this.container.addEventListener("keydown", (event) => {
       if (event.key === "Tab") {
@@ -54,7 +164,33 @@ class FocusTrap {
   }
 
   remove() {
-    this.restoreFocusElement.focus();
+    // Release the background before restoring focus: the element focus returns to is
+    // usually one of the elements that was just made inert.
+    if (this.inertOwner !== null) {
+      releaseInert(this.inertOwner);
+      this.inertOwner = null;
+    }
+    // The opener may have been unmounted while the dialog was open — routine when the
+    // dialog's action re-renders the view behind it. Focusing a detached node drops
+    // focus to `<body>` and loses the keyboard position, so fall back to the main
+    // landmark instead.
+    if (this.restoreFocusElement?.isConnected) {
+      this.restoreFocusElement.focus();
+      return;
+    }
+    const main = document.querySelector<HTMLElement>("main");
+    if (main) {
+      // `<main>` is not focusable on its own. Make it focusable, and take that back once focus
+      // moves on — removing the attribute while it still holds focus would blur it immediately,
+      // and leaving it behind would make the landmark click-focusable for good.
+      if (!main.hasAttribute("tabindex")) {
+        main.setAttribute("tabindex", "-1");
+        main.addEventListener("blur", () => main.removeAttribute("tabindex"), {
+          once: true,
+        });
+      }
+      main.focus();
+    }
   }
 
   focusChild(child: HTMLElement) {
@@ -95,12 +231,25 @@ class FocusTrap {
 
 declare global {
   interface Window {
-    createFocusTrap: (container: HTMLElement) => FocusTrap;
+    createFocusTrap: (
+      container: HTMLElement,
+      options?: FocusTrapOptions
+    ) => FocusTrap;
+    releaseInertBackground: (owner: string) => void;
   }
 }
 
-window.createFocusTrap = (container: HTMLElement) => {
-  return new FocusTrap(container);
+window.createFocusTrap = (
+  container: HTMLElement,
+  options?: FocusTrapOptions
+) => {
+  return new FocusTrap(container, options);
+};
+
+// Exposed separately so a dialog that was unmounted while open can still unwind what it
+// marked, when there is no trap left to call `remove()` on.
+window.releaseInertBackground = (owner: string) => {
+  releaseInert(owner);
 };
 
 export {};