From 7752f64f80978028aacfd92cda5dfc87bd8fa6f1 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 27 May 2026 12:42:37 +0200
Subject: [PATCH 1/9] feat(Dialog): support unmountOnHide

When set to false, Dialog content and overlay stay in the DOM when
closed (hidden via v-show) instead of being unmounted. Useful for SEO
and performance by avoiding remounts on every open.

Closes #1727
---
 docs/content/meta/DialogRoot.md                 |  8 ++++++++
 packages/core/src/Dialog/DialogContent.vue      |  9 ++++++++-
 packages/core/src/Dialog/DialogContentImpl.vue  |  2 +-
 packages/core/src/Dialog/DialogContentModal.vue | 16 ++++++++++++----
 packages/core/src/Dialog/DialogOverlay.vue      |  4 ++++
 packages/core/src/Dialog/DialogOverlayImpl.vue  |  9 +++++++--
 packages/core/src/Dialog/DialogRoot.vue         | 11 ++++++++++-
 7 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/docs/content/meta/DialogRoot.md b/docs/content/meta/DialogRoot.md
index 89d3dc34ad..efbd13721e 100644
--- a/docs/content/meta/DialogRoot.md
+++ b/docs/content/meta/DialogRoot.md
@@ -21,6 +21,13 @@
     'description': '<p>The controlled open state of the dialog. Can be binded as <code>v-model:open</code>.</p>\n',
     'type': 'boolean',
     'required': false
+  },
+  {
+    'name': 'unmountOnHide',
+    'description': '<p>When set to <code>false</code>, the dialog content will not be unmounted when closed, but instead hidden with CSS. Useful for SEO or when you want to improve performance by not remounting the component on every open.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
   }
 ]" />
 
@@ -55,6 +62,7 @@
 | `defaultOpen` | The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. | `boolean` | No | `false` |
 | `modal` | The modality of the dialog When set to true, <br> interaction with outside elements will be disabled and only dialog content will be visible to screen readers. | `boolean` | No | `true` |
 | `open` | The controlled open state of the dialog. Can be binded as v-model:open. | `boolean` | No | - |
+| `unmountOnHide` | When set to `false`, the dialog content will not be unmounted when closed, but instead hidden with CSS. Useful for SEO or when you want to improve performance by not remounting the component on every open. | `boolean` | No | `true` |
 
 **Events**
 
diff --git a/packages/core/src/Dialog/DialogContent.vue b/packages/core/src/Dialog/DialogContent.vue
index 0bbd22b3d4..f97156016a 100644
--- a/packages/core/src/Dialog/DialogContent.vue
+++ b/packages/core/src/Dialog/DialogContent.vue
@@ -32,16 +32,23 @@ const { forwardRef } = useForwardExpose()
 </script>
 
 <template>
-  <Presence :present="forceMount || rootContext.open.value">
+  <Presence
+    v-slot="{ present }"
+    :present="forceMount || rootContext.open.value"
+    :force-mount="forceMount || !rootContext.unmountOnHide.value"
+  >
     <DialogContentModal
       v-if="rootContext.modal.value"
+      v-show="rootContext.unmountOnHide.value || present"
       :ref="forwardRef"
+      :present="rootContext.unmountOnHide.value || present"
       v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
     >
       <slot />
     </DialogContentModal>
     <DialogContentNonModal
       v-else
+      v-show="rootContext.unmountOnHide.value || present"
       :ref="forwardRef"
       v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
     >
diff --git a/packages/core/src/Dialog/DialogContentImpl.vue b/packages/core/src/Dialog/DialogContentImpl.vue
index 79732966fe..3c03b3577b 100644
--- a/packages/core/src/Dialog/DialogContentImpl.vue
+++ b/packages/core/src/Dialog/DialogContentImpl.vue
@@ -21,7 +21,7 @@ export type DialogContentImplEmits = DismissableLayerEmits & {
 export interface DialogContentImplProps extends DismissableLayerProps {
   /**
    * Used to force mounting when more control is needed. Useful when
-   * controlling transntion with Vue native transition or other animation libraries.
+   * controlling transition with Vue native transition or other animation libraries.
    */
   forceMount?: boolean
   /**
diff --git a/packages/core/src/Dialog/DialogContentModal.vue b/packages/core/src/Dialog/DialogContentModal.vue
index a6342da356..6a31e7fdb1 100644
--- a/packages/core/src/Dialog/DialogContentModal.vue
+++ b/packages/core/src/Dialog/DialogContentModal.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { DialogContentImplEmits, DialogContentImplProps } from './DialogContentImpl.vue'
+import { computed } from 'vue'
 import { useEmitAsProps, useForwardExpose, useHideOthers } from '@/shared'
 import DialogContentImpl from './DialogContentImpl.vue'
 import { injectDialogRootContext } from './DialogRoot.vue'
 
-const props = defineProps<DialogContentImplProps>()
+const props = defineProps<DialogContentImplProps & { present: boolean }>()
 const emits = defineEmits<DialogContentImplEmits>()
 
 const rootContext = injectDialogRootContext()
@@ -12,15 +13,22 @@ const rootContext = injectDialogRootContext()
 const emitsAsProps = useEmitAsProps(emits)
 
 const { forwardRef, currentElement } = useForwardExpose()
-useHideOthers(currentElement)
+
+const ariaHiddenTarget = computed(() => props.present ? currentElement.value : undefined)
+useHideOthers(ariaHiddenTarget)
+
+const forwardedProps = computed(() => {
+  const { present: _, ...rest } = props
+  return rest
+})
 </script>
 
 <template>
   <DialogContentImpl
-    v-bind="{ ...props, ...emitsAsProps }"
+    v-bind="{ ...forwardedProps, ...emitsAsProps }"
     :ref="forwardRef"
     :trap-focus="rootContext.open.value"
-    :disable-outside-pointer-events="true"
+    :disable-outside-pointer-events="present"
     @close-auto-focus="
       (event) => {
         if (!event.defaultPrevented) {
diff --git a/packages/core/src/Dialog/DialogOverlay.vue b/packages/core/src/Dialog/DialogOverlay.vue
index be643eac51..fd12373539 100644
--- a/packages/core/src/Dialog/DialogOverlay.vue
+++ b/packages/core/src/Dialog/DialogOverlay.vue
@@ -25,13 +25,17 @@ const { forwardRef } = useForwardExpose()
 <template>
   <Presence
     v-if="rootContext?.modal.value"
+    v-slot="{ present }"
     :present="forceMount || rootContext.open.value"
+    :force-mount="forceMount || !rootContext.unmountOnHide.value"
   >
     <DialogOverlayImpl
+      v-show="rootContext.unmountOnHide.value || present"
       v-bind="$attrs"
       :ref="forwardRef"
       :as="as"
       :as-child="asChild"
+      :present="rootContext.unmountOnHide.value || present"
     >
       <slot />
     </DialogOverlayImpl>
diff --git a/packages/core/src/Dialog/DialogOverlayImpl.vue b/packages/core/src/Dialog/DialogOverlayImpl.vue
index a7aa9c3f57..970b33b8ad 100644
--- a/packages/core/src/Dialog/DialogOverlayImpl.vue
+++ b/packages/core/src/Dialog/DialogOverlayImpl.vue
@@ -5,15 +5,20 @@ export interface DialogOverlayImplProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
+import { watch } from 'vue'
 import { Primitive } from '@/Primitive'
 import { useForwardExpose } from '@/shared'
 import { useBodyScrollLock } from '@/shared/useBodyScrollLock'
 import { injectDialogRootContext } from './DialogRoot.vue'
 
-defineProps<DialogOverlayImplProps>()
+const props = withDefaults(defineProps<DialogOverlayImplProps & { present?: boolean }>(), {
+  present: true,
+})
 const rootContext = injectDialogRootContext()
 
-useBodyScrollLock(true)
+const scrollLocked = useBodyScrollLock(props.present)
+watch(() => props.present, val => scrollLocked.value = val)
+
 useForwardExpose()
 </script>
 
diff --git a/packages/core/src/Dialog/DialogRoot.vue b/packages/core/src/Dialog/DialogRoot.vue
index 2e865a4996..2f9373ed2e 100644
--- a/packages/core/src/Dialog/DialogRoot.vue
+++ b/packages/core/src/Dialog/DialogRoot.vue
@@ -12,6 +12,12 @@ export interface DialogRootProps {
    * interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
    */
   modal?: boolean
+  /**
+   * When set to `false`, the dialog content will not be unmounted when closed, but instead hidden with CSS. <br>
+   * Useful for SEO or when you want to improve performance by not remounting the component on every open.
+   * @defaultValue true
+   */
+  unmountOnHide?: boolean
 }
 
 export type DialogRootEmits = {
@@ -22,6 +28,7 @@ export type DialogRootEmits = {
 export interface DialogRootContext {
   open: Readonly<Ref<boolean>>
   modal: Ref<boolean>
+  unmountOnHide: Ref<boolean>
   openModal: () => void
   onOpenChange: (value: boolean) => void
   onOpenToggle: () => void
@@ -48,6 +55,7 @@ const props = withDefaults(defineProps<DialogRootProps>(), {
   open: undefined,
   defaultOpen: false,
   modal: true,
+  unmountOnHide: true,
 })
 const emit = defineEmits<DialogRootEmits>()
 
@@ -67,11 +75,12 @@ const open = useVModel(props, 'open', emit, {
 
 const triggerElement = ref<HTMLElement>()
 const contentElement = ref<HTMLElement>()
-const { modal } = toRefs(props)
+const { modal, unmountOnHide } = toRefs(props)
 
 provideDialogRootContext({
   open,
   modal,
+  unmountOnHide,
   openModal: () => {
     open.value = true
   },

From 177bd4f9ac40b9acb0df51dacef263d2601d79a5 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 27 May 2026 12:53:20 +0200
Subject: [PATCH 2/9] test(Dialog): add tests for unmountOnHide
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also fixes focus restoration when unmountOnHide=false — since FocusScope
never unmounts, close-auto-focus doesn't fire. Added a watcher on present
to manually restore focus to trigger when the dialog hides.
---
 packages/core/src/Dialog/Dialog.test.ts       | 63 +++++++++++++++++++
 .../core/src/Dialog/DialogContentModal.vue    |  8 ++-
 2 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/Dialog/Dialog.test.ts b/packages/core/src/Dialog/Dialog.test.ts
index 5a7c31a79f..f64f97c9a1 100644
--- a/packages/core/src/Dialog/Dialog.test.ts
+++ b/packages/core/src/Dialog/Dialog.test.ts
@@ -50,6 +50,69 @@ const DialogTest = defineComponent({
 </DialogRoot>`,
 })
 
+const UnmountOnHideDialogTest = defineComponent({
+  components: { DialogRoot, DialogTrigger, DialogOverlay, DialogContent, DialogClose, DialogTitle },
+  template: `<DialogRoot :unmount-on-hide="false">
+  <DialogTrigger>${OPEN_TEXT}</DialogTrigger>
+  <DialogOverlay />
+  <DialogContent>
+    <DialogTitle>${TITLE_TEXT}</DialogTitle>
+    <DialogClose>${CLOSE_TEXT}</DialogClose>
+  </DialogContent>
+</DialogRoot>`,
+})
+
+describe('given a Dialog with unmountOnHide=false', () => {
+  let wrapper: VueWrapper<InstanceType<typeof UnmountOnHideDialogTest>>
+  let trigger: DOMWrapper<HTMLElement>
+
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    wrapper = mount(UnmountOnHideDialogTest, { attachTo: document.body })
+    trigger = wrapper.find('button')
+  })
+
+  it('should keep content in DOM when closed after being opened', async () => {
+    await fireEvent.click(trigger.element)
+    await nextTick()
+
+    await fireEvent.keyDown(document.activeElement!, { key: 'Escape' })
+    await nextTick()
+
+    const contentEl = document.querySelector('[role="dialog"]')
+    expect(contentEl).not.toBeNull()
+    expect((contentEl as HTMLElement).style.display).toBe('none')
+  })
+
+  it('should focus the close button on open', async () => {
+    await fireEvent.click(trigger.element)
+    const closeButton = await findByText(document.body, CLOSE_TEXT)
+    expect(closeButton).toBe(document.activeElement)
+  })
+
+  it('should restore focus to trigger on close', async () => {
+    await fireEvent.click(trigger.element)
+    await nextTick()
+
+    await fireEvent.keyDown(document.activeElement!, { key: 'Escape' })
+    await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 10))
+
+    expect(document.activeElement).toBe(trigger.element)
+  })
+
+  it('should not apply aria-hidden to body when closed', async () => {
+    await nextTick()
+    expect(document.body.getAttribute('aria-hidden')).toBeNull()
+  })
+
+  it('should pass axe accessibility tests when open', async () => {
+    await fireEvent.click(trigger.element)
+    await nextTick()
+    expect(await axe(document.body)).toHaveNoViolations()
+  })
+})
+
 describe('given a default Dialog', () => {
   let wrapper: VueWrapper<InstanceType<typeof DialogTest>>
   let trigger: DOMWrapper<HTMLElement>
diff --git a/packages/core/src/Dialog/DialogContentModal.vue b/packages/core/src/Dialog/DialogContentModal.vue
index 6a31e7fdb1..153a1a7af4 100644
--- a/packages/core/src/Dialog/DialogContentModal.vue
+++ b/packages/core/src/Dialog/DialogContentModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DialogContentImplEmits, DialogContentImplProps } from './DialogContentImpl.vue'
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { useEmitAsProps, useForwardExpose, useHideOthers } from '@/shared'
 import DialogContentImpl from './DialogContentImpl.vue'
 import { injectDialogRootContext } from './DialogRoot.vue'
@@ -21,6 +21,12 @@ const forwardedProps = computed(() => {
   const { present: _, ...rest } = props
   return rest
 })
+
+watch(() => props.present, (isPresent, wasPresent) => {
+  if (!isPresent && wasPresent) {
+    rootContext.triggerElement.value?.focus()
+  }
+})
 </script>
 
 <template>

From 4c52c593ac512aec91cbc46935cc9fa7e5e79a69 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 27 May 2026 12:56:00 +0200
Subject: [PATCH 3/9] fix(Dialog): replace deprecated SpyInstance with
 MockInstance

---
 packages/core/src/Dialog/Dialog.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/Dialog/Dialog.test.ts b/packages/core/src/Dialog/Dialog.test.ts
index f64f97c9a1..da6de644e5 100644
--- a/packages/core/src/Dialog/Dialog.test.ts
+++ b/packages/core/src/Dialog/Dialog.test.ts
@@ -1,5 +1,5 @@
 import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
-import type { Mock, SpyInstance } from 'vitest'
+import type { Mock, MockInstance } from 'vitest'
 import { findByText, fireEvent, render } from '@testing-library/vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -117,7 +117,7 @@ describe('given a default Dialog', () => {
   let wrapper: VueWrapper<InstanceType<typeof DialogTest>>
   let trigger: DOMWrapper<HTMLElement>
   let closeButton: HTMLElement
-  let consoleWarnMock: SpyInstance
+  let consoleWarnMock: MockInstance
   let consoleWarnMockFunction: Mock
 
   beforeEach(() => {

From 25273379491367f84f69a72f513be4db6483a9f9 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 29 May 2026 10:37:44 +0200
Subject: [PATCH 4/9] fix(Dialog): restore focus for non-modal when
 unmountOnHide=false

The focus-restoration watcher only lived in DialogContentModal, so a
non-modal dialog with unmountOnHide=false never returned focus to the
trigger on close (close-auto-focus doesn't fire while mounted). Mirror
the watcher in DialogContentNonModal, respecting interact-outside, and
document why the watcher exists in both.
---
 packages/core/src/Dialog/Dialog.test.ts       | 45 +++++++++++++++++++
 packages/core/src/Dialog/DialogContent.vue    |  1 +
 .../core/src/Dialog/DialogContentModal.vue    |  6 ++-
 .../core/src/Dialog/DialogContentNonModal.vue | 23 ++++++++--
 4 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/Dialog/Dialog.test.ts b/packages/core/src/Dialog/Dialog.test.ts
index 175921a370..be880cb13c 100644
--- a/packages/core/src/Dialog/Dialog.test.ts
+++ b/packages/core/src/Dialog/Dialog.test.ts
@@ -62,6 +62,17 @@ const UnmountOnHideDialogTest = defineComponent({
 </DialogRoot>`,
 })
 
+const NonModalUnmountOnHideDialogTest = defineComponent({
+  components: { DialogRoot, DialogTrigger, DialogOverlay, DialogContent, DialogClose, DialogTitle },
+  template: `<DialogRoot :modal="false" :unmount-on-hide="false">
+  <DialogTrigger>${OPEN_TEXT}</DialogTrigger>
+  <DialogContent>
+    <DialogTitle>${TITLE_TEXT}</DialogTitle>
+    <DialogClose>${CLOSE_TEXT}</DialogClose>
+  </DialogContent>
+</DialogRoot>`,
+})
+
 // Reproduces https://github.com/unovue/reka-ui/issues/2660 — the content is
 // nested *inside* the overlay (a common centering pattern), so pointerdown
 // events from controls in the content bubble up to the overlay.
@@ -130,6 +141,40 @@ describe('given a Dialog with unmountOnHide=false', () => {
   })
 })
 
+describe('given a non-modal Dialog with unmountOnHide=false', () => {
+  let wrapper: VueWrapper<InstanceType<typeof NonModalUnmountOnHideDialogTest>>
+  let trigger: DOMWrapper<HTMLElement>
+
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    wrapper = mount(NonModalUnmountOnHideDialogTest, { attachTo: document.body })
+    trigger = wrapper.find('button')
+  })
+
+  it('should keep content in DOM when closed after being opened', async () => {
+    await fireEvent.click(trigger.element)
+    await nextTick()
+
+    await fireEvent.keyDown(document.activeElement!, { key: 'Escape' })
+    await nextTick()
+
+    const contentEl = document.querySelector('[role="dialog"]')
+    expect(contentEl).not.toBeNull()
+    expect((contentEl as HTMLElement).style.display).toBe('none')
+  })
+
+  it('should restore focus to trigger on close', async () => {
+    await fireEvent.click(trigger.element)
+    await nextTick()
+
+    await fireEvent.keyDown(document.activeElement!, { key: 'Escape' })
+    await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 10))
+
+    expect(document.activeElement).toBe(trigger.element)
+  })
+})
+
 describe('given a default Dialog', () => {
   let wrapper: VueWrapper<InstanceType<typeof DialogTest>>
   let trigger: DOMWrapper<HTMLElement>
diff --git a/packages/core/src/Dialog/DialogContent.vue b/packages/core/src/Dialog/DialogContent.vue
index f97156016a..e4590392b9 100644
--- a/packages/core/src/Dialog/DialogContent.vue
+++ b/packages/core/src/Dialog/DialogContent.vue
@@ -50,6 +50,7 @@ const { forwardRef } = useForwardExpose()
       v-else
       v-show="rootContext.unmountOnHide.value || present"
       :ref="forwardRef"
+      :present="rootContext.unmountOnHide.value || present"
       v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
     >
       <slot />
diff --git a/packages/core/src/Dialog/DialogContentModal.vue b/packages/core/src/Dialog/DialogContentModal.vue
index 153a1a7af4..ce076cb8ea 100644
--- a/packages/core/src/Dialog/DialogContentModal.vue
+++ b/packages/core/src/Dialog/DialogContentModal.vue
@@ -22,10 +22,12 @@ const forwardedProps = computed(() => {
   return rest
 })
 
+// When `unmountOnHide` is `false` the content stays mounted on close, so
+// `FocusScope` never unmounts and `close-auto-focus` never fires. Restore
+// focus to the trigger manually once the content is no longer present.
 watch(() => props.present, (isPresent, wasPresent) => {
-  if (!isPresent && wasPresent) {
+  if (!isPresent && wasPresent)
     rootContext.triggerElement.value?.focus()
-  }
 })
 </script>
 
diff --git a/packages/core/src/Dialog/DialogContentNonModal.vue b/packages/core/src/Dialog/DialogContentNonModal.vue
index 298376210d..1dd72fac52 100644
--- a/packages/core/src/Dialog/DialogContentNonModal.vue
+++ b/packages/core/src/Dialog/DialogContentNonModal.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { DialogContentImplEmits, DialogContentImplProps } from './DialogContentImpl.vue'
-import { ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useEmitAsProps, useForwardExpose } from '@/shared'
 import DialogContentImpl from './DialogContentImpl.vue'
 import { injectDialogRootContext } from './DialogRoot.vue'
 
-const props = defineProps<DialogContentImplProps>()
+const props = defineProps<DialogContentImplProps & { present: boolean }>()
 const emits = defineEmits<DialogContentImplEmits>()
 
 const emitsAsProps = useEmitAsProps(emits)
@@ -14,11 +14,28 @@ useForwardExpose()
 const rootContext = injectDialogRootContext()
 const hasInteractedOutsideRef = ref(false)
 const hasPointerDownOutsideRef = ref(false)
+
+const forwardedProps = computed(() => {
+  const { present: _, ...rest } = props
+  return rest
+})
+
+// When `unmountOnHide` is `false` the content stays mounted on close, so
+// `close-auto-focus` never fires. Restore focus to the trigger manually once
+// the content is no longer present, unless the user interacted outside.
+watch(() => props.present, (isPresent, wasPresent) => {
+  if (!isPresent && wasPresent) {
+    if (!hasInteractedOutsideRef.value)
+      rootContext.triggerElement.value?.focus()
+    hasInteractedOutsideRef.value = false
+    hasPointerDownOutsideRef.value = false
+  }
+})
 </script>
 
 <template>
   <DialogContentImpl
-    v-bind="{ ...props, ...emitsAsProps }"
+    v-bind="{ ...forwardedProps, ...emitsAsProps }"
     :trap-focus="false"
     :disable-outside-pointer-events="false"
     @close-auto-focus="

From 87ac9e217083aace517c69f93b432ee158445587 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 29 May 2026 10:38:39 +0200
Subject: [PATCH 5/9] =?UTF-8?q?test(Dialog):=20exercise=20open=E2=86=92clo?=
 =?UTF-8?q?se=20cycle=20for=20aria-hidden=20check?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Assert the rest of the page stays accessible after a full open/close
cycle (content remains mounted) rather than just checking initial state.
---
 packages/core/src/Dialog/Dialog.test.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/Dialog/Dialog.test.ts b/packages/core/src/Dialog/Dialog.test.ts
index be880cb13c..926c6043bd 100644
--- a/packages/core/src/Dialog/Dialog.test.ts
+++ b/packages/core/src/Dialog/Dialog.test.ts
@@ -129,8 +129,16 @@ describe('given a Dialog with unmountOnHide=false', () => {
     expect(document.activeElement).toBe(trigger.element)
   })
 
-  it('should not apply aria-hidden to body when closed', async () => {
+  it('should not apply aria-hidden to body after open then close', async () => {
+    await fireEvent.click(trigger.element)
+    await nextTick()
+
+    await fireEvent.keyDown(document.activeElement!, { key: 'Escape' })
     await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 10))
+
+    // Content stays mounted, but the rest of the page must stay accessible.
+    expect(document.querySelector('[role="dialog"]')).not.toBeNull()
     expect(document.body.getAttribute('aria-hidden')).toBeNull()
   })
 

From e9b8fa66e7e69d68f4affe0c33e585cf8625c042 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 29 May 2026 12:14:39 +0200
Subject: [PATCH 6/9] fix(DismissableLayer): restore body pointer-events when
 toggled off while mounted
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When `disableOutsidePointerEvents` toggles true→false without unmounting
(the unmountOnHide=false case), the watchEffect cleanup read the prop
reactively and saw the new false value, skipping the body pointer-events
restore and leaving the page frozen. Capture the value at run time for
cleanup, and read the layer set size via toRaw to avoid self-retriggering.
---
 .../DismissableLayer/DismissableLayer.test.ts | 59 ++++++++++++++++++-
 .../src/DismissableLayer/DismissableLayer.vue | 30 ++++++++--
 2 files changed, 80 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/DismissableLayer/DismissableLayer.test.ts b/packages/core/src/DismissableLayer/DismissableLayer.test.ts
index 51cad65501..04ea4c3930 100644
--- a/packages/core/src/DismissableLayer/DismissableLayer.test.ts
+++ b/packages/core/src/DismissableLayer/DismissableLayer.test.ts
@@ -2,8 +2,10 @@ import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
 import { fireEvent } from '@testing-library/vue'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
 import { sleep } from '@/test'
-import DismissableLayer from './story/_DismissableLayer.vue'
+import { DismissableLayer } from '.'
+import DismissableLayerStory from './story/_DismissableLayer.vue'
 import { isLayerExist } from './utils'
 
 const OPEN_LABEL = 'Open'
@@ -21,12 +23,12 @@ describe('isLayerExist', () => {
 })
 
 describe('given a default DismissableLayer', () => {
-  let wrapper: VueWrapper<InstanceType<typeof DismissableLayer>>
+  let wrapper: VueWrapper<InstanceType<typeof DismissableLayerStory>>
   let trigger: DOMWrapper<HTMLElement>
 
   beforeEach(() => {
     document.body.innerHTML = ''
-    wrapper = mount(DismissableLayer, { attachTo: document.body, props: { openLabel: OPEN_LABEL, closeLabel: CLOSE_LABEL, outsideLabel: OUTSIDE_LABEL } })
+    wrapper = mount(DismissableLayerStory, { attachTo: document.body, props: { openLabel: OPEN_LABEL, closeLabel: CLOSE_LABEL, outsideLabel: OUTSIDE_LABEL } })
     trigger = wrapper.find('button')
   })
 
@@ -81,3 +83,54 @@ describe('given a default DismissableLayer', () => {
     })
   })
 })
+
+describe('given a mounted DismissableLayer toggling disableOutsidePointerEvents', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    document.body.style.pointerEvents = ''
+  })
+
+  // Regression: with `unmountOnHide: false` the layer stays mounted while
+  // `disableOutsidePointerEvents` toggles `true` -> `false`. The body pointer-events
+  // must be restored even though the component is never unmounted.
+  it('should restore body pointer-events when toggled off while staying mounted', async () => {
+    const wrapper = mount(DismissableLayer, {
+      attachTo: document.body,
+      props: { disableOutsidePointerEvents: true },
+    })
+    await nextTick()
+
+    expect(document.body.style.pointerEvents).toBe('none')
+
+    await wrapper.setProps({ disableOutsidePointerEvents: false })
+    await nextTick()
+
+    expect(document.body.style.pointerEvents).toBe('')
+  })
+
+  it('should keep body locked while another layer still disables pointer events', async () => {
+    const first = mount(DismissableLayer, {
+      attachTo: document.body,
+      props: { disableOutsidePointerEvents: true },
+    })
+    const second = mount(DismissableLayer, {
+      attachTo: document.body,
+      props: { disableOutsidePointerEvents: true },
+    })
+    await nextTick()
+
+    expect(document.body.style.pointerEvents).toBe('none')
+
+    // Close the second (topmost) layer without unmounting it.
+    await second.setProps({ disableOutsidePointerEvents: false })
+    await nextTick()
+
+    // First layer is still open, so the body stays locked.
+    expect(document.body.style.pointerEvents).toBe('none')
+
+    await first.setProps({ disableOutsidePointerEvents: false })
+    await nextTick()
+
+    expect(document.body.style.pointerEvents).toBe('')
+  })
+})
diff --git a/packages/core/src/DismissableLayer/DismissableLayer.vue b/packages/core/src/DismissableLayer/DismissableLayer.vue
index fa428cb53e..8c591133c0 100644
--- a/packages/core/src/DismissableLayer/DismissableLayer.vue
+++ b/packages/core/src/DismissableLayer/DismissableLayer.vue
@@ -9,6 +9,7 @@ import {
   computed,
   nextTick,
   reactive,
+  toRaw,
   watchEffect,
 } from 'vue'
 import { isNullish, useForwardExpose } from '@/shared'
@@ -141,19 +142,36 @@ onKeyStroke('Escape', (event) => {
 watchEffect((cleanupFn) => {
   if (!layerElement.value)
     return
-  if (props.disableOutsidePointerEvents) {
-    if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+
+  // Capture the value for cleanup: `props.disableOutsidePointerEvents` is reactive,
+  // so reading it inside `cleanupFn` would return the *new* value. When the prop
+  // toggles `true` -> `false` while the layer stays mounted (e.g. `unmountOnHide: false`),
+  // that would skip restoring the body pointer-events and leave the page frozen.
+  const element = layerElement.value
+  const disabledOutsidePointerEvents = props.disableOutsidePointerEvents
+  const disabledLayers = context.layersWithOutsidePointerEventsDisabled
+  // Read `size` from the raw set so this effect doesn't track the reactive set
+  // it also mutates (which would recurse). Mutations still go through the proxy
+  // so dependent computeds (e.g. `isBodyPointerEventsDisabled`) stay reactive.
+  const rawDisabledLayers = toRaw(disabledLayers)
+
+  if (disabledOutsidePointerEvents) {
+    if (rawDisabledLayers.size === 0) {
       context.originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents
       ownerDocument.value.body.style.pointerEvents = 'none'
     }
-    context.layersWithOutsidePointerEventsDisabled.add(layerElement.value)
+    disabledLayers.add(element)
   }
-  layers.value.add(layerElement.value)
+  layers.value.add(element)
 
   cleanupFn(() => {
+    if (!disabledOutsidePointerEvents)
+      return
+
+    disabledLayers.delete(element)
+
     if (
-      props.disableOutsidePointerEvents
-      && context.layersWithOutsidePointerEventsDisabled.size === 1
+      rawDisabledLayers.size === 0
       && !isNullish(context.originalBodyPointerEvents)
     ) {
       ownerDocument.value.body.style.pointerEvents = context.originalBodyPointerEvents

From 0c77db30c585435346cbade80765bb9624e33c8b Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 29 May 2026 12:30:19 +0200
Subject: [PATCH 7/9] fix(FocusScope): re-run mount auto-focus when re-trapped
 while mounted

With unmountOnHide=false the FocusScope stays mounted across open/close,
so the mount auto-focus (keyed off physical mount) never re-fires on
reopen and focus never enters the content. Watch the trapped false->true
transition and re-run the mount auto-focus. The default unmount-on-close
path mounts already trapped, so this transition never happens there and
behavior is unchanged.
---
 packages/core/src/Dialog/Dialog.test.ts     | 18 +++++++++++
 packages/core/src/FocusScope/FocusScope.vue | 35 ++++++++++++++++++++-
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/Dialog/Dialog.test.ts b/packages/core/src/Dialog/Dialog.test.ts
index 926c6043bd..d15c2121c8 100644
--- a/packages/core/src/Dialog/Dialog.test.ts
+++ b/packages/core/src/Dialog/Dialog.test.ts
@@ -118,6 +118,24 @@ describe('given a Dialog with unmountOnHide=false', () => {
     expect(closeButton).toBe(document.activeElement)
   })
 
+  it('should re-focus the content when reopened', async () => {
+    // The content stays mounted, so focus must be re-applied on each open via
+    // the `trapped` false -> true transition (not just on physical mount).
+    await fireEvent.click(trigger.element)
+    await nextTick()
+
+    await fireEvent.keyDown(document.activeElement!, { key: 'Escape' })
+    await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 10))
+    expect(document.activeElement).toBe(trigger.element)
+
+    await fireEvent.click(trigger.element)
+    await nextTick()
+
+    const closeButton = await findByText(document.body, CLOSE_TEXT)
+    expect(closeButton).toBe(document.activeElement)
+  })
+
   it('should restore focus to trigger on close', async () => {
     await fireEvent.click(trigger.element)
     await nextTick()
diff --git a/packages/core/src/FocusScope/FocusScope.vue b/packages/core/src/FocusScope/FocusScope.vue
index a7c750896d..7b387ef90e 100644
--- a/packages/core/src/FocusScope/FocusScope.vue
+++ b/packages/core/src/FocusScope/FocusScope.vue
@@ -35,7 +35,7 @@ export interface FocusScopeProps extends PrimitiveProps {
 
 <script setup lang="ts">
 import { isClient } from '@vueuse/shared'
-import { nextTick, reactive, ref, watchEffect } from 'vue'
+import { nextTick, reactive, ref, watch, watchEffect } from 'vue'
 import { Primitive } from '@/Primitive'
 import { createFocusScopesStack } from './stack'
 import {
@@ -202,6 +202,39 @@ watchEffect(async (cleanupFn) => {
   })
 })
 
+// Re-run the mount auto-focus when the scope becomes trapped again while it
+// stays mounted, e.g. a force-mounted Dialog (`unmountOnHide: false`) reopening.
+// The mount `watchEffect` above only fires on physical mount, keyed off
+// `currentElement`, so without this the content would never regain focus on
+// subsequent opens. In the normal (unmount-on-close) path the content mounts
+// already trapped, so this `false -> true` transition never happens and
+// behavior is unchanged.
+watch(() => props.trapped, async (trapped, prevTrapped) => {
+  if (!isClient || !trapped || prevTrapped)
+    return
+
+  const container = currentElement.value
+  await nextTick()
+  if (!container)
+    return
+
+  const previouslyFocusedElement = getActiveElement() as HTMLElement | null
+  if (container.contains(previouslyFocusedElement))
+    return
+
+  const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS)
+  const handleMountAutoFocus = (ev: Event) => emits('mountAutoFocus', ev)
+  container.addEventListener(AUTOFOCUS_ON_MOUNT, handleMountAutoFocus)
+  container.dispatchEvent(mountEvent)
+  container.removeEventListener(AUTOFOCUS_ON_MOUNT, handleMountAutoFocus)
+
+  if (!mountEvent.defaultPrevented) {
+    focusFirst(getTabbableCandidates(container), { select: true })
+    if (getActiveElement() === previouslyFocusedElement)
+      focus(container)
+  }
+})
+
 function handleKeyDown(event: KeyboardEvent) {
   if (!props.loop && !props.trapped)
     return

From fe4f7b50497f762ecb0e066e71c9cede4073d032 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 29 May 2026 15:30:22 +0200
Subject: [PATCH 8/9] fix(FocusScope): retry auto-focus across v-show
 visibility frame

When a force-mounted scope (`unmountOnHide: false`) becomes trapped on
reopen, the `v-show` visibility can apply a frame after `trapped` flips,
so the first focus attempt runs while the container is still
`display: none` and no-ops. Retry the focus move on the next frame
without re-dispatching the auto-focus event.
---
 packages/core/src/FocusScope/FocusScope.vue | 27 ++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/FocusScope/FocusScope.vue b/packages/core/src/FocusScope/FocusScope.vue
index 7b387ef90e..2716a3d3ff 100644
--- a/packages/core/src/FocusScope/FocusScope.vue
+++ b/packages/core/src/FocusScope/FocusScope.vue
@@ -222,17 +222,42 @@ watch(() => props.trapped, async (trapped, prevTrapped) => {
   if (container.contains(previouslyFocusedElement))
     return
 
+  // Dispatch the mount auto-focus event once. Consumers (e.g. Dialog's
+  // `openAutoFocus`) may `preventDefault()` to opt out of the default focus.
   const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS)
   const handleMountAutoFocus = (ev: Event) => emits('mountAutoFocus', ev)
   container.addEventListener(AUTOFOCUS_ON_MOUNT, handleMountAutoFocus)
   container.dispatchEvent(mountEvent)
   container.removeEventListener(AUTOFOCUS_ON_MOUNT, handleMountAutoFocus)
 
-  if (!mountEvent.defaultPrevented) {
+  if (mountEvent.defaultPrevented)
+    return
+
+  function tryFocus() {
+    if (!container)
+      return
     focusFirst(getTabbableCandidates(container), { select: true })
     if (getActiveElement() === previouslyFocusedElement)
       focus(container)
   }
+
+  tryFocus()
+
+  // When the content is force-mounted (e.g. `unmountOnHide: false`), its
+  // visibility is toggled via `v-show` driven by `Presence`, which can apply a
+  // frame after `trapped` flips. On that first pass the container is still
+  // `display: none`, so there are no tabbable candidates and `focus()` no-ops.
+  // Retry on the next frame if focus hasn't landed inside the scope yet. The
+  // auto-focus event is not re-dispatched, only the focus move is retried.
+  if (
+    typeof requestAnimationFrame !== 'undefined'
+    && !container.contains(getActiveElement())
+  ) {
+    requestAnimationFrame(() => {
+      if (props.trapped && container && !container.contains(getActiveElement()))
+        tryFocus()
+    })
+  }
 })
 
 function handleKeyDown(event: KeyboardEvent) {

From 9291574a993595566de4c7ed228b650ea4fd0b90 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 29 May 2026 17:09:30 +0200
Subject: [PATCH 9/9] fix(FocusScope): drive auto-focus off visibility for
 force-mounted scopes

A force-mounted scope (Dialog `unmountOnHide: false`) physically mounts
once while hidden via `v-show`, so keying auto-focus off physical mount
fired `mountAutoFocus`/`openAutoFocus` and stole focus into a closed
dialog, and never re-focused non-modal content on open (it isn't
trapped). Gate the mount-time auto-focus on visibility and re-run it on
the hidden -> visible transition via a MutationObserver, covering first
open and reopen for both modal and non-modal. Replaces the trapped
watcher + rAF retry, which only handled the modal case.
---
 packages/core/src/Dialog/Dialog.test.ts     |  50 ++++++++
 packages/core/src/FocusScope/FocusScope.vue | 121 +++++++++-----------
 2 files changed, 103 insertions(+), 68 deletions(-)

diff --git a/packages/core/src/Dialog/Dialog.test.ts b/packages/core/src/Dialog/Dialog.test.ts
index d15c2121c8..2624683f01 100644
--- a/packages/core/src/Dialog/Dialog.test.ts
+++ b/packages/core/src/Dialog/Dialog.test.ts
@@ -112,8 +112,16 @@ describe('given a Dialog with unmountOnHide=false', () => {
     expect((contentEl as HTMLElement).style.display).toBe('none')
   })
 
+  it('should not pull focus into the content while closed on mount', async () => {
+    // Content is force-mounted but hidden; auto-focus must not fire yet.
+    expect(document.querySelector('[role="dialog"]')).not.toBeNull()
+    expect(document.activeElement).toBe(document.body)
+  })
+
   it('should focus the close button on open', async () => {
     await fireEvent.click(trigger.element)
+    await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 10))
     const closeButton = await findByText(document.body, CLOSE_TEXT)
     expect(closeButton).toBe(document.activeElement)
   })
@@ -131,6 +139,7 @@ describe('given a Dialog with unmountOnHide=false', () => {
 
     await fireEvent.click(trigger.element)
     await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 10))
 
     const closeButton = await findByText(document.body, CLOSE_TEXT)
     expect(closeButton).toBe(document.activeElement)
@@ -189,6 +198,17 @@ describe('given a non-modal Dialog with unmountOnHide=false', () => {
     expect((contentEl as HTMLElement).style.display).toBe('none')
   })
 
+  it('should focus the close button on open', async () => {
+    expect(document.activeElement).toBe(document.body)
+
+    await fireEvent.click(trigger.element)
+    await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 10))
+
+    const closeButton = await findByText(document.body, CLOSE_TEXT)
+    expect(closeButton).toBe(document.activeElement)
+  })
+
   it('should restore focus to trigger on close', async () => {
     await fireEvent.click(trigger.element)
     await nextTick()
@@ -201,6 +221,36 @@ describe('given a non-modal Dialog with unmountOnHide=false', () => {
   })
 })
 
+describe('given a Dialog with unmountOnHide=false, openAutoFocus', () => {
+  const OpenAutoFocusDialog = defineComponent({
+    components: { DialogRoot, DialogTrigger, DialogContent, DialogClose, DialogTitle },
+    props: ['onOpenAutoFocus'],
+    template: `<DialogRoot :unmount-on-hide="false">
+  <DialogTrigger>${OPEN_TEXT}</DialogTrigger>
+  <DialogContent @open-auto-focus="onOpenAutoFocus">
+    <DialogTitle>${TITLE_TEXT}</DialogTitle>
+    <DialogClose>${CLOSE_TEXT}</DialogClose>
+  </DialogContent>
+</DialogRoot>`,
+  })
+
+  it('should not emit openAutoFocus while closed and emit once per open', async () => {
+    document.body.innerHTML = ''
+    const onOpenAutoFocus = vi.fn()
+    const wrapper = mount(OpenAutoFocusDialog, { attachTo: document.body, props: { onOpenAutoFocus } })
+    const trigger = wrapper.find('button')
+
+    // Force-mounted but hidden: the auto-focus must not fire on mount.
+    await nextTick()
+    expect(onOpenAutoFocus).toHaveBeenCalledTimes(0)
+
+    await fireEvent.click(trigger.element)
+    await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 10))
+    expect(onOpenAutoFocus).toHaveBeenCalledTimes(1)
+  })
+})
+
 describe('given a default Dialog', () => {
   let wrapper: VueWrapper<InstanceType<typeof DialogTest>>
   let trigger: DOMWrapper<HTMLElement>
diff --git a/packages/core/src/FocusScope/FocusScope.vue b/packages/core/src/FocusScope/FocusScope.vue
index 2716a3d3ff..2fea3cd6f9 100644
--- a/packages/core/src/FocusScope/FocusScope.vue
+++ b/packages/core/src/FocusScope/FocusScope.vue
@@ -35,7 +35,7 @@ export interface FocusScopeProps extends PrimitiveProps {
 
 <script setup lang="ts">
 import { isClient } from '@vueuse/shared'
-import { nextTick, reactive, ref, watch, watchEffect } from 'vue'
+import { nextTick, reactive, ref, watchEffect } from 'vue'
 import { Primitive } from '@/Primitive'
 import { createFocusScopesStack } from './stack'
 import {
@@ -149,6 +149,24 @@ watchEffect((cleanupFn) => {
   })
 })
 
+// Dispatch the mount auto-focus event and move focus to the first tabbable
+// candidate (or the container as a fallback). Shared by the physical-mount path
+// and the visibility path below so both behave identically. Consumers (e.g.
+// Dialog's `openAutoFocus`) may `preventDefault()` to opt out of default focus.
+function dispatchMountAutoFocus(container: HTMLElement, previouslyFocusedElement: HTMLElement | null) {
+  const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS)
+  const handleMountAutoFocus = (ev: Event) => emits('mountAutoFocus', ev)
+  container.addEventListener(AUTOFOCUS_ON_MOUNT, handleMountAutoFocus)
+  container.dispatchEvent(mountEvent)
+  container.removeEventListener(AUTOFOCUS_ON_MOUNT, handleMountAutoFocus)
+
+  if (!mountEvent.defaultPrevented) {
+    focusFirst(getTabbableCandidates(container), { select: true })
+    if (getActiveElement() === previouslyFocusedElement)
+      focus(container)
+  }
+}
+
 watchEffect(async (cleanupFn) => {
   const container = currentElement.value
 
@@ -159,20 +177,15 @@ watchEffect(async (cleanupFn) => {
   const previouslyFocusedElement = getActiveElement() as HTMLElement | null
   const hasFocusedCandidate = container.contains(previouslyFocusedElement)
 
-  if (!hasFocusedCandidate) {
-    const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS)
-    container.addEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) =>
-      emits('mountAutoFocus', ev))
-    container.dispatchEvent(mountEvent)
-
-    if (!mountEvent.defaultPrevented) {
-      focusFirst(getTabbableCandidates(container), {
-        select: true,
-      })
-      if (getActiveElement() === previouslyFocusedElement)
-        focus(container)
-    }
-  }
+  // When force-mounted while closed (e.g. Dialog `unmountOnHide: false`), the
+  // scope physically mounts hidden via `v-show` (`display: none`). Skip the
+  // mount auto-focus in that case, otherwise it fires `mountAutoFocus` and
+  // steals focus into a closed dialog. The visibility watcher below re-runs the
+  // auto-focus once the scope actually becomes visible.
+  const isHidden = isClient && getComputedStyle(container).display === 'none'
+
+  if (!hasFocusedCandidate && !isHidden)
+    dispatchMountAutoFocus(container, previouslyFocusedElement)
 
   cleanupFn(() => {
     container.removeEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) =>
@@ -202,63 +215,35 @@ watchEffect(async (cleanupFn) => {
   })
 })
 
-// Re-run the mount auto-focus when the scope becomes trapped again while it
-// stays mounted, e.g. a force-mounted Dialog (`unmountOnHide: false`) reopening.
-// The mount `watchEffect` above only fires on physical mount, keyed off
-// `currentElement`, so without this the content would never regain focus on
-// subsequent opens. In the normal (unmount-on-close) path the content mounts
-// already trapped, so this `false -> true` transition never happens and
-// behavior is unchanged.
-watch(() => props.trapped, async (trapped, prevTrapped) => {
-  if (!isClient || !trapped || prevTrapped)
-    return
-
-  const container = currentElement.value
-  await nextTick()
-  if (!container)
-    return
-
-  const previouslyFocusedElement = getActiveElement() as HTMLElement | null
-  if (container.contains(previouslyFocusedElement))
-    return
-
-  // Dispatch the mount auto-focus event once. Consumers (e.g. Dialog's
-  // `openAutoFocus`) may `preventDefault()` to opt out of the default focus.
-  const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS)
-  const handleMountAutoFocus = (ev: Event) => emits('mountAutoFocus', ev)
-  container.addEventListener(AUTOFOCUS_ON_MOUNT, handleMountAutoFocus)
-  container.dispatchEvent(mountEvent)
-  container.removeEventListener(AUTOFOCUS_ON_MOUNT, handleMountAutoFocus)
-
-  if (mountEvent.defaultPrevented)
-    return
-
-  function tryFocus() {
+// Force-mounted scopes (e.g. Dialog `unmountOnHide: false`) physically mount
+// only once but are shown/hidden in place via `v-show` (`display: none`). The
+// mount `watchEffect` above keys auto-focus off physical mount, so it would
+// never re-focus on reopen and (without the visibility gate) would fire while
+// hidden. Drive auto-focus off the actual hidden -> visible transition instead:
+// this covers the first open and every reopen, for both trapped (modal) and
+// non-trapped (non-modal) scopes. Reacting to the style/class mutation means it
+// runs after the DOM updates, so the focus targets are already visible.
+if (isClient) {
+  watchEffect((cleanupFn) => {
+    const container = currentElement.value
     if (!container)
       return
-    focusFirst(getTabbableCandidates(container), { select: true })
-    if (getActiveElement() === previouslyFocusedElement)
-      focus(container)
-  }
 
-  tryFocus()
-
-  // When the content is force-mounted (e.g. `unmountOnHide: false`), its
-  // visibility is toggled via `v-show` driven by `Presence`, which can apply a
-  // frame after `trapped` flips. On that first pass the container is still
-  // `display: none`, so there are no tabbable candidates and `focus()` no-ops.
-  // Retry on the next frame if focus hasn't landed inside the scope yet. The
-  // auto-focus event is not re-dispatched, only the focus move is retried.
-  if (
-    typeof requestAnimationFrame !== 'undefined'
-    && !container.contains(getActiveElement())
-  ) {
-    requestAnimationFrame(() => {
-      if (props.trapped && container && !container.contains(getActiveElement()))
-        tryFocus()
+    let wasHidden = getComputedStyle(container).display === 'none'
+    const observer = new MutationObserver(() => {
+      const isHidden = getComputedStyle(container).display === 'none'
+      if (wasHidden && !isHidden) {
+        const previouslyFocusedElement = getActiveElement() as HTMLElement | null
+        if (!container.contains(previouslyFocusedElement))
+          dispatchMountAutoFocus(container, previouslyFocusedElement)
+      }
+      wasHidden = isHidden
     })
-  }
-})
+    observer.observe(container, { attributes: true, attributeFilter: ['style', 'class'] })
+
+    cleanupFn(() => observer.disconnect())
+  })
+}
 
 function handleKeyDown(event: KeyboardEvent) {
   if (!props.loop && !props.trapped)