From 4750aaf3cee9dd2a398022f2c7f97895f26ffaae Mon Sep 17 00:00:00 2001
From: Mick Lawitzke <hallo@lawitzke.com>
Date: Sun, 8 Mar 2026 12:14:45 +0100
Subject: [PATCH 1/3] feat(Dialog): support unmountOnHide

---
 docs/content/meta/DialogRoot.md            |  7 +++++++
 packages/core/src/Dialog/DialogContent.vue |  8 +++++++-
 packages/core/src/Dialog/DialogOverlay.vue |  3 +++
 packages/core/src/Dialog/DialogRoot.vue    | 11 ++++++++++-
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/docs/content/meta/DialogRoot.md b/docs/content/meta/DialogRoot.md
index ea4ca04d3b..2a6661167d 100644
--- a/docs/content/meta/DialogRoot.md
+++ b/docs/content/meta/DialogRoot.md
@@ -20,6 +20,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 <code>true</code>, the element will be unmounted on closed state.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
   }
 ]" />
 
diff --git a/packages/core/src/Dialog/DialogContent.vue b/packages/core/src/Dialog/DialogContent.vue
index 0bbd22b3d4..cbe8546807 100644
--- a/packages/core/src/Dialog/DialogContent.vue
+++ b/packages/core/src/Dialog/DialogContent.vue
@@ -32,9 +32,14 @@ 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="present"
       :ref="forwardRef"
       v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
     >
@@ -42,6 +47,7 @@ const { forwardRef } = useForwardExpose()
     </DialogContentModal>
     <DialogContentNonModal
       v-else
+      v-show="present"
       :ref="forwardRef"
       v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
     >
diff --git a/packages/core/src/Dialog/DialogOverlay.vue b/packages/core/src/Dialog/DialogOverlay.vue
index be643eac51..ce441587b0 100644
--- a/packages/core/src/Dialog/DialogOverlay.vue
+++ b/packages/core/src/Dialog/DialogOverlay.vue
@@ -25,9 +25,12 @@ 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="present"
       v-bind="$attrs"
       :ref="forwardRef"
       :as="as"
diff --git a/packages/core/src/Dialog/DialogRoot.vue b/packages/core/src/Dialog/DialogRoot.vue
index 2e865a4996..3809782a56 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 and overlay 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 0f9787fe2e99c5dc3b6dab2e010d8449b948c314 Mon Sep 17 00:00:00 2001
From: Mick Lawitzke <hallo@lawitzke.com>
Date: Wed, 11 Mar 2026 20:25:39 +0100
Subject: [PATCH 2/3] feat(Dialog): support unmountOnHide

---
 packages/core/src/Dialog/DialogContentModal.vue | 2 +-
 packages/core/src/Dialog/DialogOverlay.vue      | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/core/src/Dialog/DialogContentModal.vue b/packages/core/src/Dialog/DialogContentModal.vue
index a6342da356..b7f4578cc1 100644
--- a/packages/core/src/Dialog/DialogContentModal.vue
+++ b/packages/core/src/Dialog/DialogContentModal.vue
@@ -20,7 +20,7 @@ useHideOthers(currentElement)
     v-bind="{ ...props, ...emitsAsProps }"
     :ref="forwardRef"
     :trap-focus="rootContext.open.value"
-    :disable-outside-pointer-events="true"
+    :disable-outside-pointer-events="rootContext.open.value"
     @close-auto-focus="
       (event) => {
         if (!event.defaultPrevented) {
diff --git a/packages/core/src/Dialog/DialogOverlay.vue b/packages/core/src/Dialog/DialogOverlay.vue
index ce441587b0..be643eac51 100644
--- a/packages/core/src/Dialog/DialogOverlay.vue
+++ b/packages/core/src/Dialog/DialogOverlay.vue
@@ -25,12 +25,9 @@ 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="present"
       v-bind="$attrs"
       :ref="forwardRef"
       :as="as"

From 1f173807efab819c656778ebb311750f8786ed13 Mon Sep 17 00:00:00 2001
From: Mick Lawitzke <hallo@lawitzke.com>
Date: Wed, 11 Mar 2026 20:43:45 +0100
Subject: [PATCH 3/3] feat(Dialog): support unmountOnHide docs:Fixed typo and
 removed non-existent Motion prop "multiple"

---
 docs/content/docs/guides/animation.md           | 2 +-
 packages/core/src/Dialog/DialogContent.vue      | 1 +
 packages/core/src/Dialog/DialogContentImpl.vue  | 2 +-
 packages/core/src/Dialog/DialogContentModal.vue | 4 ++--
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/content/docs/guides/animation.md b/docs/content/docs/guides/animation.md
index f31d68428c..a6a5e7566d 100644
--- a/docs/content/docs/guides/animation.md
+++ b/docs/content/docs/guides/animation.md
@@ -104,7 +104,7 @@ import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPor
       Edit profile
     </DialogTrigger>
     <DialogPortal>
-      <AnimatePresence multiple>
+      <AnimatePresence>
         <DialogOverlay as-child>
           <Motion
             :initial="{ opacity: 0, scale: 0 }"
diff --git a/packages/core/src/Dialog/DialogContent.vue b/packages/core/src/Dialog/DialogContent.vue
index cbe8546807..e202793bae 100644
--- a/packages/core/src/Dialog/DialogContent.vue
+++ b/packages/core/src/Dialog/DialogContent.vue
@@ -42,6 +42,7 @@ const { forwardRef } = useForwardExpose()
       v-show="present"
       :ref="forwardRef"
       v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
+      :present
     >
       <slot />
     </DialogContentModal>
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 b7f4578cc1..70918daba8 100644
--- a/packages/core/src/Dialog/DialogContentModal.vue
+++ b/packages/core/src/Dialog/DialogContentModal.vue
@@ -4,7 +4,7 @@ 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()
@@ -20,7 +20,7 @@ useHideOthers(currentElement)
     v-bind="{ ...props, ...emitsAsProps }"
     :ref="forwardRef"
     :trap-focus="rootContext.open.value"
-    :disable-outside-pointer-events="rootContext.open.value"
+    :disable-outside-pointer-events="present"
     @close-auto-focus="
       (event) => {
         if (!event.defaultPrevented) {