From c0f061be9fceb0ef65fe9da84fbff23db9fa8b04 Mon Sep 17 00:00:00 2001
From: John Leider <9064066+johnleider@users.noreply.github.com>
Date: Sun, 25 Feb 2024 14:39:40 -0600
Subject: [PATCH] docs(VDialog): update page content and examples (#19272)

---
 packages/docs/src/data/page-to-api.json       |   2 +-
 .../docs/src/examples/v-dialog/misc-form.vue  | 221 +++++++++-------
 .../examples/v-dialog/misc-invite-dialog.vue  | 125 +++++++++
 .../src/examples/v-dialog/misc-loader.vue     |  53 ++--
 .../src/examples/v-dialog/misc-nesting.vue    | 162 ++++++------
 .../src/examples/v-dialog/misc-overflowed.vue | 128 ++++-----
 .../src/examples/v-dialog/prop-activator.vue  | 142 ++++++++--
 .../src/examples/v-dialog/prop-fullscreen.vue | 115 ++++----
 .../docs/src/examples/v-dialog/prop-model.vue |  27 +-
 .../src/examples/v-dialog/prop-persistent.vue |  42 ++-
 .../src/examples/v-dialog/prop-scrollable.vue | 247 ++++++++++--------
 .../examples/v-dialog/prop-transitions.vue    | 127 ++++-----
 .../src/examples/v-dialog/slot-default.vue    |  43 +++
 packages/docs/src/examples/v-dialog/usage.vue |  11 +-
 .../docs/src/pages/en/components/dialogs.md   |  90 ++++---
 packages/docs/src/plugins/icons.ts            |   5 +
 16 files changed, 954 insertions(+), 586 deletions(-)
 create mode 100644 packages/docs/src/examples/v-dialog/misc-invite-dialog.vue
 create mode 100644 packages/docs/src/examples/v-dialog/slot-default.vue

diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json
index 91e51a644f9..dd75406b7f3 100644
--- a/packages/docs/src/data/page-to-api.json
+++ b/packages/docs/src/data/page-to-api.json
@@ -71,7 +71,7 @@
   "components/date-pickers-month": ["VDatePicker"],
   "components/date-pickers": ["VDatePicker"],
   "components/defaults-providers": ["VDefaultsProvider"],
-  "components/dialogs": ["VDialog"],
+  "components/dialogs": ["VDialog", "VOverlay"],
   "components/dividers": ["VDivider"],
   "components/expansion-panels": [
     "VExpansionPanel",
diff --git a/packages/docs/src/examples/v-dialog/misc-form.vue b/packages/docs/src/examples/v-dialog/misc-form.vue
index 1926f8bb649..6f5e04e14b9 100644
--- a/packages/docs/src/examples/v-dialog/misc-form.vue
+++ b/packages/docs/src/examples/v-dialog/misc-form.vue
@@ -1,120 +1,149 @@
 <template>
-  <v-row justify="center">
+  <div class="pa-4 text-center">
     <v-dialog
       v-model="dialog"
-      persistent
-      width="1024"
+      max-width="600"
     >
-      <template v-slot:activator="{ props }">
+      <template v-slot:activator="{ props: activatorProps }">
         <v-btn
-          color="primary"
-          v-bind="props"
-        >
-          Open Dialog
-        </v-btn>
+          class="text-none font-weight-regular"
+          prepend-icon="mdi-account"
+          text="Edit Profile"
+          variant="tonal"
+          v-bind="activatorProps"
+        ></v-btn>
       </template>
-      <v-card>
-        <v-card-title>
-          <span class="text-h5">User Profile</span>
-        </v-card-title>
+
+      <v-card
+        prepend-icon="mdi-account"
+        title="User Profile"
+      >
         <v-card-text>
-          <v-container>
-            <v-row>
-              <v-col
-                cols="12"
-                sm="6"
-                md="4"
-              >
-                <v-text-field
-                  label="Legal first name*"
-                  required
-                ></v-text-field>
-              </v-col>
-              <v-col
-                cols="12"
-                sm="6"
-                md="4"
-              >
-                <v-text-field
-                  label="Legal middle name"
-                  hint="example of helper text only on focus"
-                ></v-text-field>
-              </v-col>
-              <v-col
-                cols="12"
-                sm="6"
-                md="4"
-              >
-                <v-text-field
-                  label="Legal last name*"
-                  hint="example of persistent helper text"
-                  persistent-hint
-                  required
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12">
-                <v-text-field
-                  label="Email*"
-                  required
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12">
-                <v-text-field
-                  label="Password*"
-                  type="password"
-                  required
-                ></v-text-field>
-              </v-col>
-              <v-col
-                cols="12"
-                sm="6"
-              >
-                <v-select
-                  :items="['0-17', '18-29', '30-54', '54+']"
-                  label="Age*"
-                  required
-                ></v-select>
-              </v-col>
-              <v-col
-                cols="12"
-                sm="6"
-              >
-                <v-autocomplete
-                  :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
-                  label="Interests"
-                  multiple
-                ></v-autocomplete>
-              </v-col>
-            </v-row>
-          </v-container>
-          <small>*indicates required field</small>
+          <v-row dense>
+            <v-col
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-text-field
+                label="First name*"
+                required
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-text-field
+                label="Middle name"
+                hint="example of helper text only on focus"
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-text-field
+                label="Last name*"
+                hint="example of persistent helper text"
+                persistent-hint
+                required
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-text-field
+                label="Email*"
+                required
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-text-field
+                label="Password*"
+                type="password"
+                required
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-text-field
+                label="Confirm Password*"
+                type="password"
+                required
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              sm="6"
+            >
+              <v-select
+                :items="['0-17', '18-29', '30-54', '54+']"
+                label="Age*"
+                required
+              ></v-select>
+            </v-col>
+
+            <v-col
+              cols="12"
+              sm="6"
+            >
+              <v-autocomplete
+                :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
+                auto-select-first
+                label="Interests"
+                multiple
+              ></v-autocomplete>
+            </v-col>
+          </v-row>
+
+          <small class="text-caption text-medium-emphasis">*indicates required field</small>
         </v-card-text>
+
+        <v-divider></v-divider>
+
         <v-card-actions>
           <v-spacer></v-spacer>
+
           <v-btn
-            color="blue-darken-1"
-            variant="text"
+            text="Close"
+            variant="plain"
             @click="dialog = false"
-          >
-            Close
-          </v-btn>
+          ></v-btn>
+
           <v-btn
-            color="blue-darken-1"
-            variant="text"
+            color="primary"
+            text="Save"
+            variant="tonal"
             @click="dialog = false"
-          >
-            Save
-          </v-btn>
+          ></v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
-  const dialog = ref(false)
+  const dialog = shallowRef(false)
 </script>
 
 <script>
diff --git a/packages/docs/src/examples/v-dialog/misc-invite-dialog.vue b/packages/docs/src/examples/v-dialog/misc-invite-dialog.vue
new file mode 100644
index 00000000000..043c31e54f1
--- /dev/null
+++ b/packages/docs/src/examples/v-dialog/misc-invite-dialog.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="pa-4 text-center">
+    <v-btn-group
+      color="#b2d7ef"
+      rounded="pill"
+      divided
+      density="comfortable"
+    >
+      <v-btn
+        class="pe-2"
+        prepend-icon="mdi-account-multiple-outline"
+        variant="flat"
+      >
+        <div class="text-none font-weight-regular">
+          Share
+        </div>
+
+        <v-dialog activator="parent" max-width="500">
+          <template v-slot:default="{ isActive }">
+            <v-card rounded="lg">
+              <v-card-title class="d-flex justify-space-between align-center">
+                <div class="text-h5 text-medium-emphasis ps-2">
+                  Invite John to connect
+                </div>
+
+                <v-btn
+                  icon="mdi-close"
+                  variant="text"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </v-card-title>
+
+              <v-divider class="mb-4"></v-divider>
+
+              <v-card-text>
+                <div class="text-medium-emphasis mb-4">
+                  Invite collaborators to your network and grow your connections.
+                </div>
+
+                <div class="mb-2">Message (optional)</div>
+
+                <v-textarea
+                  :counter="300"
+                  class="mb-2"
+                  persistent-counter
+                  rows="2"
+                  variant="outlined"
+                ></v-textarea>
+
+                <div class="text-overline mb-2">💎 PREMIUM</div>
+
+                <div class="text-medium-emphasis mb-1">
+                  Share with unlimited people and get more insights about your network. Try Premium Free for 30 days.
+                </div>
+
+                <v-btn
+                  color="primary"
+                  class="text-none font-weight-bold ms-n4"
+                  text="Retry Premium Free"
+                  variant="text"
+                ></v-btn>
+              </v-card-text>
+
+              <v-divider class="mt-2"></v-divider>
+
+              <v-card-actions class="my-2 d-flex justify-end">
+                <v-btn
+                  class="text-none"
+                  text="Cancel"
+                  rounded="xl"
+                  @click="isActive.value = false"
+                ></v-btn>
+
+                <v-btn
+                  class="text-none"
+                  color="primary"
+                  rounded="xl"
+                  text="Send"
+                  variant="flat"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </v-card-actions>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-btn>
+
+      <v-btn
+        icon
+        size="small"
+      >
+        <v-icon icon="mdi-menu-down"></v-icon>
+
+        <v-menu
+          activator="parent"
+          location="bottom end"
+          transition="fade-transition"
+        >
+          <v-list
+            density="compact"
+            slim
+            rounded="lg"
+            min-width="250"
+          >
+            <v-list-item
+              title="Copy link"
+              prepend-icon="mdi-link"
+              link
+            ></v-list-item>
+
+            <v-divider class="my-2"></v-divider>
+
+            <v-list-item min-height="24">
+              <template v-slot:subtitle>
+                <div class="text-caption">
+                  Shared with John + 1 more
+                </div>
+              </template>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-btn>
+    </v-btn-group>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/v-dialog/misc-loader.vue b/packages/docs/src/examples/v-dialog/misc-loader.vue
index 6363aa35685..34ef6927598 100644
--- a/packages/docs/src/examples/v-dialog/misc-loader.vue
+++ b/packages/docs/src/examples/v-dialog/misc-loader.vue
@@ -1,39 +1,52 @@
 <template>
-  <div class="text-center">
+  <div class="pa-4 text-center">
     <v-btn
       :disabled="dialog"
-      :loading="dialog"
-      color="purple-darken-2"
+      color="primary"
+      icon="mdi-refresh"
+      text="Start loading"
       @click="dialog = true"
-    >
-      Start loading
-    </v-btn>
+    ></v-btn>
+
     <v-dialog
       v-model="dialog"
-      :scrim="false"
       persistent
-      width="auto"
+      max-width="320"
     >
-      <v-card
+      <v-list
+        class="py-2"
         color="primary"
+        elevation="12"
+        rounded="lg"
       >
-        <v-card-text>
-          Please stand by
-          <v-progress-linear
-            indeterminate
-            color="white"
-            class="mb-0"
-          ></v-progress-linear>
-        </v-card-text>
-      </v-card>
+        <v-list-item
+          prepend-icon="$vuetify-outline"
+          title="Refreshing Application..."
+        >
+          <template v-slot:prepend>
+            <div class="pe-4">
+              <v-icon color="primary" size="x-large"></v-icon>
+            </div>
+          </template>
+
+          <template v-slot:append>
+            <v-progress-circular
+              color="primary"
+              indeterminate="disable-shrink"
+              size="16"
+              width="2"
+            ></v-progress-circular>
+          </template>
+        </v-list-item>
+      </v-list>
     </v-dialog>
   </div>
 </template>
 
 <script setup>
-  import { ref, watch } from 'vue'
+  import { shallowRef, watch } from 'vue'
 
-  const dialog = ref(false)
+  const dialog = shallowRef(false)
   watch(dialog, val => {
     if (!val) return
     setTimeout(() => (dialog.value = false), 4000)
diff --git a/packages/docs/src/examples/v-dialog/misc-nesting.vue b/packages/docs/src/examples/v-dialog/misc-nesting.vue
index bc0147c304c..6dce1e8f395 100644
--- a/packages/docs/src/examples/v-dialog/misc-nesting.vue
+++ b/packages/docs/src/examples/v-dialog/misc-nesting.vue
@@ -1,101 +1,85 @@
 <template>
-  <div>
-    <v-row
-      justify="center"
+  <div class="pa-4 text-center">
+    <v-btn
+      text="Open Dialog 1"
+      @click="dialog = true"
+    ></v-btn>
+
+    <v-dialog
+      v-model="dialog"
+      max-width="480"
+    >
+      <v-card title="Dialog 1">
+        <template v-slot:text>
+          <v-btn
+            class="my-2"
+            text="Open Dialog 2"
+            @click="dialog2 = true"
+          ></v-btn>
+        </template>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn
+            text="Close"
+            variant="text"
+            @click="dialog = false"
+          ></v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog
+      v-model="dialog2"
+      max-width="240"
     >
-      <v-btn
-        color="primary"
-        class="ma-2"
-        @click="dialog = true"
-      >
-        Open Dialog 1
-      </v-btn>
-      <v-dialog
-        v-model="dialog"
-        width="auto"
-      >
-        <v-card>
-          <v-card-title>
-            Dialog 1
-          </v-card-title>
-          <v-card-text>
-            <v-btn
-              color="primary"
-              class="ma-2"
-              @click="dialog2 = true"
-            >
-              Open Dialog 2
-            </v-btn>
-          </v-card-text>
-          <v-card-actions>
-            <v-btn
-              color="primary"
-              variant="text"
-              @click="dialog = false"
-            >
-              Close
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
+      <v-card title="Dialog 2">
+        <template v-slot:text>
+          <v-btn
+            class="my-2"
+            text="Open Dialog 3"
+            @click="dialog3 = !dialog3"
+          ></v-btn>
+        </template>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
 
-      <v-dialog
-        v-model="dialog2"
-        width="auto"
-      >
-        <v-card>
-          <v-card-title>
-            Dialog 2
-          </v-card-title>
-          <v-card-text>
-            <v-btn
-              color="primary"
-              @click="dialog3 = !dialog3"
-            >
-              Open Dialog 3
-            </v-btn>
-          </v-card-text>
-          <v-card-actions>
-            <v-btn
-              color="primary"
-              variant="text"
-              @click="dialog2 = false"
-            >
-              Close
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
+          <v-btn
+            text="Close"
+            variant="text"
+            @click="dialog2 = false"
+          ></v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog
+      v-model="dialog3"
+      width="auto"
+    >
+      <v-card title="Dialog 3">
+        <v-card-actions>
+          <v-spacer></v-spacer>
 
-      <v-dialog
-        v-model="dialog3"
-        width="auto"
-      >
-        <v-card>
-          <v-card-title>
-            <span>Dialog 3</span>
-          </v-card-title>
-          <v-card-actions>
-            <v-btn
-              color="primary"
-              variant="text"
-              @click="dialog3 = false"
-            >
-              Close
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-    </v-row>
+          <v-btn
+            text="Close"
+            variant="text"
+            @click="dialog3 = false"
+          ></v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
-  const dialog = ref(false)
-  const dialog2 = ref(false)
-  const dialog3 = ref(false)
+  const dialog = shallowRef(false)
+  const dialog2 = shallowRef(false)
+  const dialog3 = shallowRef(false)
 </script>
 
 <script>
diff --git a/packages/docs/src/examples/v-dialog/misc-overflowed.vue b/packages/docs/src/examples/v-dialog/misc-overflowed.vue
index a45f1578efc..0616fc591eb 100644
--- a/packages/docs/src/examples/v-dialog/misc-overflowed.vue
+++ b/packages/docs/src/examples/v-dialog/misc-overflowed.vue
@@ -1,68 +1,70 @@
 <template>
-  <v-row justify="center">
-    <v-dialog
-      v-model="dialog"
-      width="800"
-    >
-      <template v-slot:activator="{ props }">
+  <div class="pa-4 text-center">
+    <v-dialog max-width="800">
+      <template v-slot:activator="{ props: activatorProps }">
         <v-btn
-          color="primary"
-          v-bind="props"
-        >
-          Open Dialog
-        </v-btn>
+          v-bind="activatorProps"
+          text="Open Dialog"
+        ></v-btn>
+      </template>
+
+      <template v-slot:default="{ isActive }">
+        <v-card title="Use Google's location service?">
+          <template v-slot:text>
+            Lorem ipsum dolor sit amet, semper quis, sapien id natoque elit. Nostra urna at, magna at neque sed sed ante imperdiet, dolor mauris cursus velit, velit non, sem nec. Volutpat sem ridiculus placerat leo, augue in, duis erat proin condimentum in a eget, sed fermentum sed vestibulum varius ac, vestibulum volutpat orci ut elit eget tortor. Ultrices nascetur nulla gravida ante arcu. Pharetra rhoncus morbi ipsum, nunc tempor debitis, ipsum pellentesque, vitae id quam ut mauris dui tempor, aptent non. Quisque turpis. Phasellus quis lectus luctus orci eget rhoncus. Amet donec vestibulum mattis commodo, nulla aliquet, nibh praesent, elementum nulla. Sit lacus pharetra tempus magna neque pellentesque, nulla vel erat.
+
+            <br>
+
+            Justo ex quisque nulla accusamus venenatis, sed quis. Nibh phasellus gravida metus in, fusce aenean ut erat commodo eros. Ut turpis, dui integer, nonummy pede placeat nec in sit leo. Faucibus porttitor illo taciti odio, amet viverra scelerisque quis quis et tortor, curabitur morbi a. Enim tempor at, rutrum elit condimentum, amet rutrum vitae tempor torquent nunc. Praesent vestibulum integer maxime felis. Neque aenean quia vitae nostra, tempus elit enim id dui, at egestas pulvinar. Integer libero vestibulum, quis blandit scelerisque mattis fermentum nulla, tortor donec vestibulum dolor amet eget, elit nullam. Aliquam leo phasellus aliquam curabitur metus a, nulla justo mattis duis interdum vel, mollis vitae et id, vestibulum erat ridiculus sit pulvinar justo sed. Vehicula convallis, et nulla wisi, amet vestibulum risus, quam ac egestas.
+
+            <br>
+
+            Et vitae, nulla gravida erat scelerisque nullam nunc pellentesque, a dictumst cras augue, purus imperdiet non. Varius montes cursus varius vel tortor, nec leo a qui, magni cras, velit vel consectetuer lobortis vel. Nibh erat et wisi felis leo porttitor, sapien nibh sapien pede mi, sed eget porttitor, repellendus arcu ac quis. Luctus vulputate aut est sem magna, placerat accumsan nunc vestibulum ipsum ac auctor, maecenas lorem in ut nec mauris tortor, doloribus varius sem tortor vestibulum mollis, eleifend tortor felis tempus lacus eu eu. Eleifend vel eu, nullam maecenas mauris nec nunc euismod, tortor porta ridiculus potenti, massa tristique nam magna, et wisi placerat et erat ante. Eget pede erat in facilisis, fermentum venenatis sodales. Ac tortor sociis et non animi tristique, rhoncus malesuada, ut arcu volutpat scelerisque sollicitudin, elit curabitur dui pede purus dolor, integer aenean risus taciti nulla eleifend accumsan. At pulvinar diam parturient, interdum mi velit aliquet et a. Arcu at ac placerat eget justo semper, purus sociis curabitur mi ipsum consequat ut, mollis vestibulum, est ante ornare lacus sem. Neque magna mauris, commodo quisque, praesent semper suscipit lobortis nam. Justo malesuada cursus ac nunc litora nunc. Tellus ac, in lobortis nunc, montes lectus purus fermentum.
+
+            <br>
+
+            Ac sit wisi. Sodales aliquam, sed vestibulum nullam arcu sit risus arcu, id luctus vitae lorem nibh, integer nec nullam class cursus mi, purus arcu lectus. Vel ante suscipit volutpat potenti mattis sed, wisi eu placerat aliquam erat, lectus morbi lobortis at assumenda. Consequat neque purus ipsum voluptas odio, netus vestibulum ut nec, suspendisse pellentesque nec enim in. Wisi dictum sed semper a, ipsum erat tellus habitasse est, erat sem ornare, vitae quisque ultricies. Dui sed blandit. Tempor et faucibus justo sed luctus, nec vitae vitae. Nunc nibh pede, ipsum vestibulum aenean leo ante ultricies, nam cras quis sed penatibus amet. In mauris a. Integer metus mauris tortor, et rutrum vestibulum ultricies, ut phasellus in ullamcorper ut mollit, eu justo. Cursus pretium venenatis.
+            Cras pellentesque vel sodales accumsan aenean. Feugiat metus sit nec in aliquet amet, porttitor pretium vulputate massa. Consequat ipsum luctus quisque adipiscing libero. Wisi sollicitudin. Eget vitae ac lobortis, lorem natoque vestibulum et, aliquet faucibus at morbi nibh, vel condimentum. Massa unde orci sed id sed, odio donec congue nec praesent amet. Hymenaeos velit lacus, quis vivamus libero tempus duis, eu nisi eu, ipsum at accumsan pede justo morbi donec, massa et libero sit risus neque tortor. Ut sed sed etiam hendrerit dapibus, quis metus suspendisse nibh.
+
+            <br>
+
+            Fringilla tempor felis augue magna. Cum arcu a, id vitae. Pellentesque pharetra in cras sociis adipiscing est. Nibh nec mattis at maecenas, nisl orci aliquam nulla justo egestas venenatis, elementum duis vel porta eros, massa vitae, eligendi imperdiet amet. Nec neque luctus suscipit, justo sem praesent, ut nisl quisque, volutpat torquent wisi tellus aliquam reprehenderit, curabitur cras at quis massa porttitor mauris. Eros sed ultrices. Amet dignissim justo urna feugiat mauris litora, etiam accumsan, lobortis a orci suspendisse. Semper ac mauris, varius bibendum pretium, orci urna nunc ullamcorper auctor, saepe sem integer quam, at feugiat egestas duis. Urna ligula ante. Leo elementum nonummy. Sagittis mauris est in ipsum, nulla amet non justo, proin id potenti platea posuere sit ut, nunc sit erat bibendum. Nibh id auctor, ab nulla vivamus ultrices, posuere morbi nunc tellus gravida vivamus.
+
+            <br>
+
+            Mauris nec, facilisi quam fermentum, ut mauris integer, orci tellus tempus diam ut in pellentesque. Wisi faucibus tempor et odio leo diam, eleifend quis integer curabitur sit scelerisque ac, mauris consequat luctus quam penatibus fringilla dis, vitae lacus in, est eu ac tempus. Consectetuer amet ipsum amet dui, sed blandit id sed. Tellus integer, dignissim id pede sodales quis, felis dolorem id mauris orci, orci tempus ut. Nullam hymenaeos. Curabitur in a, tortor ut praesent placerat tincidunt interdum, ac dignissim metus nonummy hendrerit wisi, etiam ut.
+
+            <br>
+
+            Semper praesent integer fusce, tortor suspendisse, augue ligula orci ante asperiores ullamcorper. In sit per mi sed sed, mi vestibulum mus nam, morbi mauris neque vitae aliquam proin senectus. Ac amet arcu mollis ante congue elementum, inceptos eget optio quam pellentesque quis lobortis, sollicitudin sed vestibulum sollicitudin, lectus parturient nullam, leo orci ligula ultrices. At tincidunt enim, suspendisse est sit sem ac. Amet tellus molestie est purus magna augue, non etiam et in wisi id. Non commodo, metus lorem facilisi lobortis ac velit, montes neque sed risus consectetuer fringilla dolor. Quam justo et integer aliquam, cursus nulla enim orci, nam cursus adipiscing, integer torquent non, fringilla per maecenas. Libero ipsum sed tellus purus et. Duis molestie placerat erat donec ut. Dolor enim erat massa faucibus ultrices in, ante ultricies orci lacus, libero consectetuer mauris magna feugiat neque dapibus, donec pretium et. Aptent dui, aliquam et et amet nostra ligula.
+
+            <br>
+
+            Augue curabitur duis dui volutpat, tempus sed ut pede donec. Interdum luctus, lectus nulla aenean elit, id sit magna, vulputate ultrices pellentesque vel id fermentum morbi. Tortor et. Adipiscing augue lorem cum non lacus, rutrum sodales laoreet duis tortor, modi placerat facilisis et malesuada eros ipsum, vehicula tempus. Ac vivamus amet non aliquam venenatis lectus, sociosqu adipiscing consequat nec arcu odio. Blandit orci nec nec, posuere in pretium, enim ut, consectetuer nullam urna, risus vel. Nullam odio vehicula massa sed, etiam sociis mauris, lacus ullamcorper, libero imperdiet non sodales placerat justo vehicula. Nec morbi imperdiet. Fermentum sem libero iaculis bibendum et eros, eget maecenas non nunc, ad pellentesque. Ut nec diam elementum interdum. Elementum vitae tellus lacus vitae, ipsum phasellus, corporis vehicula in ac sed massa vivamus, rutrum elit, ultricies metus volutpat.
+
+            <br>
+
+            Semper wisi et, sollicitudin nunc vestibulum, cursus accumsan nunc pede tempus mi ipsum, ligula sed. Non condimentum ac dolor sit. Mollis eu aliquam, vel mattis mollis massa ut dolor ante, tempus lacinia arcu. Urna vestibulum lorem, nulla fermentum, iaculis ut congue ac vivamus. Nam libero orci, pulvinar nulla, enim pellentesque consectetuer leo, feugiat rhoncus rhoncus vel. Magna sociosqu donec, dictum cursus ullamcorper viverra. Ultricies quis orci lorem, suspendisse ut vestibulum integer, purus sed lorem pulvinar habitasse turpis.
+          </template>
+
+          <v-card-actions>
+            <v-spacer></v-spacer>
+
+            <v-btn
+              text="Disagree"
+              variant="text"
+              @click="isActive.value = false"
+            ></v-btn>
+
+            <v-btn
+              color="surface-variant"
+              text="Agree"
+              variant="flat"
+              @click="isActive.value = false"
+            ></v-btn>
+          </v-card-actions>
+        </v-card>
       </template>
-      <v-card>
-        <v-card-title>
-          <span class="text-h5">Use Google's location service?</span>
-        </v-card-title>
-        <v-card-text>
-          Lorem ipsum dolor sit amet, semper quis, sapien id natoque elit. Nostra urna at, magna at neque sed sed ante imperdiet, dolor mauris cursus velit, velit non, sem nec. Volutpat sem ridiculus placerat leo, augue in, duis erat proin condimentum in a eget, sed fermentum sed vestibulum varius ac, vestibulum volutpat orci ut elit eget tortor. Ultrices nascetur nulla gravida ante arcu. Pharetra rhoncus morbi ipsum, nunc tempor debitis, ipsum pellentesque, vitae id quam ut mauris dui tempor, aptent non. Quisque turpis. Phasellus quis lectus luctus orci eget rhoncus. Amet donec vestibulum mattis commodo, nulla aliquet, nibh praesent, elementum nulla. Sit lacus pharetra tempus magna neque pellentesque, nulla vel erat.
-          Justo ex quisque nulla accusamus venenatis, sed quis. Nibh phasellus gravida metus in, fusce aenean ut erat commodo eros. Ut turpis, dui integer, nonummy pede placeat nec in sit leo. Faucibus porttitor illo taciti odio, amet viverra scelerisque quis quis et tortor, curabitur morbi a. Enim tempor at, rutrum elit condimentum, amet rutrum vitae tempor torquent nunc. Praesent vestibulum integer maxime felis. Neque aenean quia vitae nostra, tempus elit enim id dui, at egestas pulvinar. Integer libero vestibulum, quis blandit scelerisque mattis fermentum nulla, tortor donec vestibulum dolor amet eget, elit nullam. Aliquam leo phasellus aliquam curabitur metus a, nulla justo mattis duis interdum vel, mollis vitae et id, vestibulum erat ridiculus sit pulvinar justo sed. Vehicula convallis, et nulla wisi, amet vestibulum risus, quam ac egestas.
-          Et vitae, nulla gravida erat scelerisque nullam nunc pellentesque, a dictumst cras augue, purus imperdiet non. Varius montes cursus varius vel tortor, nec leo a qui, magni cras, velit vel consectetuer lobortis vel. Nibh erat et wisi felis leo porttitor, sapien nibh sapien pede mi, sed eget porttitor, repellendus arcu ac quis. Luctus vulputate aut est sem magna, placerat accumsan nunc vestibulum ipsum ac auctor, maecenas lorem in ut nec mauris tortor, doloribus varius sem tortor vestibulum mollis, eleifend tortor felis tempus lacus eu eu. Eleifend vel eu, nullam maecenas mauris nec nunc euismod, tortor porta ridiculus potenti, massa tristique nam magna, et wisi placerat et erat ante. Eget pede erat in facilisis, fermentum venenatis sodales. Ac tortor sociis et non animi tristique, rhoncus malesuada, ut arcu volutpat scelerisque sollicitudin, elit curabitur dui pede purus dolor, integer aenean risus taciti nulla eleifend accumsan. At pulvinar diam parturient, interdum mi velit aliquet et a. Arcu at ac placerat eget justo semper, purus sociis curabitur mi ipsum consequat ut, mollis vestibulum, est ante ornare lacus sem. Neque magna mauris, commodo quisque, praesent semper suscipit lobortis nam. Justo malesuada cursus ac nunc litora nunc. Tellus ac, in lobortis nunc, montes lectus purus fermentum.
-          Ac sit wisi. Sodales aliquam, sed vestibulum nullam arcu sit risus arcu, id luctus vitae lorem nibh, integer nec nullam class cursus mi, purus arcu lectus. Vel ante suscipit volutpat potenti mattis sed, wisi eu placerat aliquam erat, lectus morbi lobortis at assumenda. Consequat neque purus ipsum voluptas odio, netus vestibulum ut nec, suspendisse pellentesque nec enim in. Wisi dictum sed semper a, ipsum erat tellus habitasse est, erat sem ornare, vitae quisque ultricies. Dui sed blandit. Tempor et faucibus justo sed luctus, nec vitae vitae. Nunc nibh pede, ipsum vestibulum aenean leo ante ultricies, nam cras quis sed penatibus amet. In mauris a. Integer metus mauris tortor, et rutrum vestibulum ultricies, ut phasellus in ullamcorper ut mollit, eu justo. Cursus pretium venenatis.
-          Cras pellentesque vel sodales accumsan aenean. Feugiat metus sit nec in aliquet amet, porttitor pretium vulputate massa. Consequat ipsum luctus quisque adipiscing libero. Wisi sollicitudin. Eget vitae ac lobortis, lorem natoque vestibulum et, aliquet faucibus at morbi nibh, vel condimentum. Massa unde orci sed id sed, odio donec congue nec praesent amet. Hymenaeos velit lacus, quis vivamus libero tempus duis, eu nisi eu, ipsum at accumsan pede justo morbi donec, massa et libero sit risus neque tortor. Ut sed sed etiam hendrerit dapibus, quis metus suspendisse nibh.
-          Fringilla tempor felis augue magna. Cum arcu a, id vitae. Pellentesque pharetra in cras sociis adipiscing est. Nibh nec mattis at maecenas, nisl orci aliquam nulla justo egestas venenatis, elementum duis vel porta eros, massa vitae, eligendi imperdiet amet. Nec neque luctus suscipit, justo sem praesent, ut nisl quisque, volutpat torquent wisi tellus aliquam reprehenderit, curabitur cras at quis massa porttitor mauris. Eros sed ultrices. Amet dignissim justo urna feugiat mauris litora, etiam accumsan, lobortis a orci suspendisse. Semper ac mauris, varius bibendum pretium, orci urna nunc ullamcorper auctor, saepe sem integer quam, at feugiat egestas duis. Urna ligula ante. Leo elementum nonummy. Sagittis mauris est in ipsum, nulla amet non justo, proin id potenti platea posuere sit ut, nunc sit erat bibendum. Nibh id auctor, ab nulla vivamus ultrices, posuere morbi nunc tellus gravida vivamus.
-          Mauris nec, facilisi quam fermentum, ut mauris integer, orci tellus tempus diam ut in pellentesque. Wisi faucibus tempor et odio leo diam, eleifend quis integer curabitur sit scelerisque ac, mauris consequat luctus quam penatibus fringilla dis, vitae lacus in, est eu ac tempus. Consectetuer amet ipsum amet dui, sed blandit id sed. Tellus integer, dignissim id pede sodales quis, felis dolorem id mauris orci, orci tempus ut. Nullam hymenaeos. Curabitur in a, tortor ut praesent placerat tincidunt interdum, ac dignissim metus nonummy hendrerit wisi, etiam ut.
-          Semper praesent integer fusce, tortor suspendisse, augue ligula orci ante asperiores ullamcorper. In sit per mi sed sed, mi vestibulum mus nam, morbi mauris neque vitae aliquam proin senectus. Ac amet arcu mollis ante congue elementum, inceptos eget optio quam pellentesque quis lobortis, sollicitudin sed vestibulum sollicitudin, lectus parturient nullam, leo orci ligula ultrices. At tincidunt enim, suspendisse est sit sem ac. Amet tellus molestie est purus magna augue, non etiam et in wisi id. Non commodo, metus lorem facilisi lobortis ac velit, montes neque sed risus consectetuer fringilla dolor. Quam justo et integer aliquam, cursus nulla enim orci, nam cursus adipiscing, integer torquent non, fringilla per maecenas. Libero ipsum sed tellus purus et. Duis molestie placerat erat donec ut. Dolor enim erat massa faucibus ultrices in, ante ultricies orci lacus, libero consectetuer mauris magna feugiat neque dapibus, donec pretium et. Aptent dui, aliquam et et amet nostra ligula.
-          Augue curabitur duis dui volutpat, tempus sed ut pede donec. Interdum luctus, lectus nulla aenean elit, id sit magna, vulputate ultrices pellentesque vel id fermentum morbi. Tortor et. Adipiscing augue lorem cum non lacus, rutrum sodales laoreet duis tortor, modi placerat facilisis et malesuada eros ipsum, vehicula tempus. Ac vivamus amet non aliquam venenatis lectus, sociosqu adipiscing consequat nec arcu odio. Blandit orci nec nec, posuere in pretium, enim ut, consectetuer nullam urna, risus vel. Nullam odio vehicula massa sed, etiam sociis mauris, lacus ullamcorper, libero imperdiet non sodales placerat justo vehicula. Nec morbi imperdiet. Fermentum sem libero iaculis bibendum et eros, eget maecenas non nunc, ad pellentesque. Ut nec diam elementum interdum. Elementum vitae tellus lacus vitae, ipsum phasellus, corporis vehicula in ac sed massa vivamus, rutrum elit, ultricies metus volutpat.
-          Semper wisi et, sollicitudin nunc vestibulum, cursus accumsan nunc pede tempus mi ipsum, ligula sed. Non condimentum ac dolor sit. Mollis eu aliquam, vel mattis mollis massa ut dolor ante, tempus lacinia arcu. Urna vestibulum lorem, nulla fermentum, iaculis ut congue ac vivamus. Nam libero orci, pulvinar nulla, enim pellentesque consectetuer leo, feugiat rhoncus rhoncus vel. Magna sociosqu donec, dictum cursus ullamcorper viverra. Ultricies quis orci lorem, suspendisse ut vestibulum integer, purus sed lorem pulvinar habitasse turpis.
-          +
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn
-            color="green-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
-            Disagree
-          </v-btn>
-          <v-btn
-            color="green-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
-            Agree
-          </v-btn>
-        </v-card-actions>
-      </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const dialog = ref(false)
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        dialog: false,
-      }
-    },
-  }
-</script>
diff --git a/packages/docs/src/examples/v-dialog/prop-activator.vue b/packages/docs/src/examples/v-dialog/prop-activator.vue
index 1167413e1d6..47e8089ab03 100644
--- a/packages/docs/src/examples/v-dialog/prop-activator.vue
+++ b/packages/docs/src/examples/v-dialog/prop-activator.vue
@@ -1,39 +1,133 @@
 <template>
-  <div class="text-center">
-    <v-btn
-      color="primary"
-    >
-      Open Dialog
-
-      <v-dialog
-        v-model="dialog"
-        activator="parent"
-        width="auto"
-      >
-        <v-card>
-          <v-card-text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </v-card-text>
-          <v-card-actions>
-            <v-btn color="primary" block @click="dialog = false">Close Dialog</v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-    </v-btn>
-  </div>
+  <v-container>
+    <v-row class="text-center">
+      <v-col cols="12" md="6">
+        <v-dialog max-width="340">
+          <template v-slot:activator="{ props: activatorProps }">
+            <v-btn
+              v-bind="activatorProps"
+              prepend-icon="mdi-package"
+              width="204"
+            >
+              Slot Activator
+            </v-btn>
+          </template>
+
+          <template v-slot:default="{ isActive }">
+            <v-card
+              title="Slot Activator"
+              text="When using the activator slot, you must bind the slot props to the activator element."
+              prepend-icon="mdi-package"
+            >
+              <template v-slot:actions>
+                <v-btn
+                  class="ml-auto"
+                  text="Close"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </template>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-btn
+          prepend-icon="mdi-picture-in-picture-bottom-right"
+          width="204"
+        >
+          Parent Activator
+
+          <v-dialog activator="parent" max-width="340">
+            <template v-slot:default="{ isActive }">
+              <v-card
+                title="Parent Activator"
+                text="When using the parent as the activator, the dialog will bind its listeners to the parent element."
+                prepend-icon="mdi-picture-in-picture-bottom-right"
+              >
+                <template v-slot:actions>
+                  <v-btn
+                    class="ml-auto"
+                    text="Close"
+                    @click="isActive.value = false"
+                  ></v-btn>
+                </template>
+              </v-card>
+            </template>
+          </v-dialog>
+        </v-btn>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-btn
+          ref="btn"
+          prepend-icon="mdi-variable"
+          width="204"
+        >
+          Ref Activator
+        </v-btn>
+
+        <v-dialog :activator="btn" max-width="340">
+          <template v-slot:default="{ isActive }">
+            <v-card
+              title="Ref Activator"
+              text="When using a ref, the dialog will bind its listeners to the ref element. This works for any element and custom components."
+              prepend-icon="mdi-variable"
+            >
+              <template v-slot:actions>
+                <v-btn
+                  class="ml-auto"
+                  text="Close"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </template>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-btn
+          id="activator-target"
+          prepend-icon="mdi-bullseye-arrow"
+          width="204"
+        >
+          Target Activator
+        </v-btn>
+
+        <v-dialog activator="#activator-target" max-width="340">
+          <template v-slot:default="{ isActive }">
+            <v-card
+              title="Target Activator"
+              text="Pass any valid querySelector to the activator prop to bind the dialog to the target element."
+              prepend-icon="mdi-bullseye-arrow"
+            >
+              <template v-slot:actions>
+                <v-btn
+                  class="ml-auto"
+                  text="Close"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </template>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup>
   import { ref } from 'vue'
 
-  const dialog = ref(false)
+  const btn = ref(null)
 </script>
 
 <script>
   export default {
     data () {
       return {
-        dialog: false,
+        btn: null,
       }
     },
   }
diff --git a/packages/docs/src/examples/v-dialog/prop-fullscreen.vue b/packages/docs/src/examples/v-dialog/prop-fullscreen.vue
index 889c7b0e8d4..5e7fbaab6a6 100644
--- a/packages/docs/src/examples/v-dialog/prop-fullscreen.vue
+++ b/packages/docs/src/examples/v-dialog/prop-fullscreen.vue
@@ -1,85 +1,109 @@
 <template>
-  <v-row justify="center">
+  <div class="text-center pa-4">
     <v-dialog
       v-model="dialog"
-      fullscreen
-      :scrim="false"
       transition="dialog-bottom-transition"
+      fullscreen
     >
-      <template v-slot:activator="{ props }">
+      <template v-slot:activator="{ props: activatorProps }">
         <v-btn
-          color="primary"
-          dark
-          v-bind="props"
-        >
-          Open Dialog
-        </v-btn>
+          size="small"
+          prepend-icon="mdi-cog"
+          text="Settings"
+          v-bind="activatorProps"
+        ></v-btn>
       </template>
+
       <v-card>
-        <v-toolbar
-          dark
-          color="primary"
-        >
+        <v-toolbar>
           <v-btn
-            icon
-            dark
+            icon="mdi-close"
             @click="dialog = false"
-          >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
+          ></v-btn>
+
           <v-toolbar-title>Settings</v-toolbar-title>
+
           <v-spacer></v-spacer>
+
           <v-toolbar-items>
             <v-btn
+              text="Save"
               variant="text"
               @click="dialog = false"
-            >
-              Save
-            </v-btn>
+            ></v-btn>
           </v-toolbar-items>
         </v-toolbar>
+
         <v-list
           lines="two"
           subheader
         >
           <v-list-subheader>User Controls</v-list-subheader>
-          <v-list-item title="Content filtering" subtitle="Set the content filtering level to restrict apps that can be downloaded"></v-list-item>
-          <v-list-item title="Password" subtitle="Require password for purchase or use password to restrict purchase"></v-list-item>
-        </v-list>
-        <v-divider></v-divider>
-        <v-list
-          lines="two"
-          subheader
-        >
+
+          <v-list-item
+            link
+            title="Content filtering"
+            subtitle="Set the content filtering level to restrict apps that can be downloaded"
+          ></v-list-item>
+
+          <v-list-item
+            link
+            title="Password"
+            subtitle="Require password for purchase or use password to restrict purchase"
+          ></v-list-item>
+
+          <v-divider></v-divider>
+
           <v-list-subheader>General</v-list-subheader>
-          <v-list-item title="Notifications" subtitle="Notify me about updates to apps or games that I downloaded">
+
+          <v-list-item
+            title="Notifications"
+            subtitle="Notify me about updates to apps or games that I downloaded"
+            @click="notifications = !notifications"
+          >
             <template v-slot:prepend>
-              <v-checkbox v-model="notifications"></v-checkbox>
+              <v-list-item-action start>
+                <v-checkbox-btn v-model="notifications" color="primary"></v-checkbox-btn>
+              </v-list-item-action>
             </template>
           </v-list-item>
-          <v-list-item title="Sound" subtitle="Auto-update apps at any time. Data charges may apply">
+
+          <v-list-item
+            title="Sound"
+            subtitle="Auto-update apps at any time. Data charges may apply"
+            @click="sound = !sound"
+          >
             <template v-slot:prepend>
-              <v-checkbox v-model="sound"></v-checkbox>
+              <v-list-item-action start>
+                <v-checkbox-btn v-model="sound" color="primary"></v-checkbox-btn>
+              </v-list-item-action>
             </template>
           </v-list-item>
-          <v-list-item title="Auto-add widgets" subtitle="Automatically add home screen widgets">
+
+          <v-list-item
+            title="Auto-add widgets"
+            subtitle="Automatically add home screen widgets"
+            @click="widgets = !widgets"
+          >
             <template v-slot:prepend>
-              <v-checkbox v-model="widgets"></v-checkbox>
+              <v-list-item-action start>
+                <v-checkbox-btn v-model="widgets" color="primary"></v-checkbox-btn>
+              </v-list-item-action>
             </template>
           </v-list-item>
         </v-list>
       </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
-  const dialog = ref(false)
-  const notifications = ref(false)
-  const sound = ref(true)
-  const widgets = ref(false)
+  const dialog = shallowRef(false)
+  const notifications = shallowRef(false)
+  const sound = shallowRef(true)
+  const widgets = shallowRef(false)
 </script>
 
 <script>
@@ -94,10 +118,3 @@
     },
   }
 </script>
-
-<style>
-.dialog-bottom-transition-enter-active,
-.dialog-bottom-transition-leave-active {
-  transition: transform .2s ease-in-out;
-}
-</style>
diff --git a/packages/docs/src/examples/v-dialog/prop-model.vue b/packages/docs/src/examples/v-dialog/prop-model.vue
index 061b33dfe1b..fbcce77b684 100644
--- a/packages/docs/src/examples/v-dialog/prop-model.vue
+++ b/packages/docs/src/examples/v-dialog/prop-model.vue
@@ -1,9 +1,6 @@
 <template>
-  <div class="text-center">
-    <v-btn
-      color="primary"
-      @click="dialog = true"
-    >
+  <div class="text-center pa-4">
+    <v-btn @click="dialog = true">
       Open Dialog
     </v-btn>
 
@@ -11,13 +8,19 @@
       v-model="dialog"
       width="auto"
     >
-      <v-card>
-        <v-card-text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" block @click="dialog = false">Close Dialog</v-btn>
-        </v-card-actions>
+      <v-card
+        prepend-icon="mdi-update"
+        max-width="400"
+        title="Update in progress"
+        text="Your application will relaunch automatically after the update is complete."
+      >
+        <template v-slot:actions>
+          <v-btn
+            class="ms-auto"
+            text="Ok"
+            @click="dialog = false"
+          ></v-btn>
+        </template>
       </v-card>
     </v-dialog>
   </div>
diff --git a/packages/docs/src/examples/v-dialog/prop-persistent.vue b/packages/docs/src/examples/v-dialog/prop-persistent.vue
index c7f24ca8a51..75b8bedbcc8 100644
--- a/packages/docs/src/examples/v-dialog/prop-persistent.vue
+++ b/packages/docs/src/examples/v-dialog/prop-persistent.vue
@@ -1,43 +1,35 @@
 <template>
-  <v-row justify="center">
+  <div class="text-center pa-4">
     <v-dialog
       v-model="dialog"
       persistent
-      width="auto"
+      max-width="400"
     >
-      <template v-slot:activator="{ props }">
-        <v-btn
-          color="primary"
-          v-bind="props"
-        >
+      <template v-slot:activator="{ props: activatorProps }">
+        <v-btn v-bind="activatorProps">
           Open Dialog
         </v-btn>
       </template>
-      <v-card>
-        <v-card-title class="text-h5">
-          Use Google's location service?
-        </v-card-title>
-        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
-        <v-card-actions>
+
+      <v-card
+        prepend-icon="mdi-map-marker"
+        title="Use Google's location service?"
+        text="Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."
+      >
+        <template v-slot:actions>
           <v-spacer></v-spacer>
-          <v-btn
-            color="green-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
+
+          <v-btn @click="dialog = false">
             Disagree
           </v-btn>
-          <v-btn
-            color="green-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
+
+          <v-btn @click="dialog = false">
             Agree
           </v-btn>
-        </v-card-actions>
+        </template>
       </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup>
diff --git a/packages/docs/src/examples/v-dialog/prop-scrollable.vue b/packages/docs/src/examples/v-dialog/prop-scrollable.vue
index f983a0a578b..f43d409503a 100644
--- a/packages/docs/src/examples/v-dialog/prop-scrollable.vue
+++ b/packages/docs/src/examples/v-dialog/prop-scrollable.vue
@@ -1,135 +1,158 @@
 <template>
-  <v-row justify="center">
+  <div class="pa-4 text-center">
     <v-dialog
-      v-model="dialog"
       scrollable
       width="auto"
     >
-      <template v-slot:activator="{ props }">
+      <template v-slot:activator="{ props: activatorProps }">
         <v-btn
-          color="primary"
-          v-bind="props"
+          color="brown"
+          prepend-icon="mdi-earth"
+          text="Select Country"
+          variant="outlined"
+          v-bind="activatorProps"
+        ></v-btn>
+      </template>
+
+      <template v-slot:default="{ isActive }">
+        <v-card
+          prepend-icon="mdi-earth"
+          title="Select Country"
         >
-          Open Dialog
-        </v-btn>
+          <v-divider class="mt-3"></v-divider>
+
+          <v-card-text class="px-4" style="height: 300px;">
+            <v-radio-group
+              v-model="dialog"
+              column
+              messages="Select a Country from the radio group"
+            >
+              <v-radio
+                label="Bahamas, The"
+                value="bahamas"
+              ></v-radio>
+
+              <v-radio
+                label="Bahrain"
+                value="bahrain"
+              ></v-radio>
+
+              <v-radio
+                label="Bangladesh"
+                value="bangladesh"
+              ></v-radio>
+
+              <v-radio
+                label="Barbados"
+                value="barbados"
+              ></v-radio>
+
+              <v-radio
+                label="Belarus"
+                value="belarus"
+              ></v-radio>
+
+              <v-radio
+                label="Belgium"
+                value="belgium"
+              ></v-radio>
+
+              <v-radio
+                label="Belize"
+                value="belize"
+              ></v-radio>
+
+              <v-radio
+                label="Benin"
+                value="benin"
+              ></v-radio>
+
+              <v-radio
+                label="Bhutan"
+                value="bhutan"
+              ></v-radio>
+
+              <v-radio
+                label="Bolivia"
+                value="bolivia"
+              ></v-radio>
+
+              <v-radio
+                label="Bosnia and Herzegovina"
+                value="bosnia"
+              ></v-radio>
+
+              <v-radio
+                label="Botswana"
+                value="botswana"
+              ></v-radio>
+
+              <v-radio
+                label="Brazil"
+                value="brazil"
+              ></v-radio>
+
+              <v-radio
+                label="Brunei"
+                value="brunei"
+              ></v-radio>
+
+              <v-radio
+                label="Bulgaria"
+                value="bulgaria"
+              ></v-radio>
+
+              <v-radio
+                label="Burkina Faso"
+                value="burkina"
+              ></v-radio>
+
+              <v-radio
+                label="Burma"
+                value="burma"
+              ></v-radio>
+
+              <v-radio
+                label="Burundi"
+                value="burundi"
+              ></v-radio>
+            </v-radio-group>
+          </v-card-text>
+
+          <v-divider></v-divider>
+
+          <v-card-actions>
+            <v-btn
+              text="Close"
+              @click="isActive.value = false"
+            ></v-btn>
+
+            <v-spacer></v-spacer>
+
+            <v-btn
+              color="surface-variant"
+              text="Save"
+              variant="flat"
+              @click="isActive.value = false"
+            ></v-btn>
+          </v-card-actions>
+        </v-card>
       </template>
-      <v-card>
-        <v-card-title>Select Country</v-card-title>
-        <v-divider></v-divider>
-        <v-card-text style="height: 300px;">
-          <v-radio-group
-            v-model="dialogm1"
-            column
-          >
-            <v-radio
-              label="Bahamas, The"
-              value="bahamas"
-            ></v-radio>
-            <v-radio
-              label="Bahrain"
-              value="bahrain"
-            ></v-radio>
-            <v-radio
-              label="Bangladesh"
-              value="bangladesh"
-            ></v-radio>
-            <v-radio
-              label="Barbados"
-              value="barbados"
-            ></v-radio>
-            <v-radio
-              label="Belarus"
-              value="belarus"
-            ></v-radio>
-            <v-radio
-              label="Belgium"
-              value="belgium"
-            ></v-radio>
-            <v-radio
-              label="Belize"
-              value="belize"
-            ></v-radio>
-            <v-radio
-              label="Benin"
-              value="benin"
-            ></v-radio>
-            <v-radio
-              label="Bhutan"
-              value="bhutan"
-            ></v-radio>
-            <v-radio
-              label="Bolivia"
-              value="bolivia"
-            ></v-radio>
-            <v-radio
-              label="Bosnia and Herzegovina"
-              value="bosnia"
-            ></v-radio>
-            <v-radio
-              label="Botswana"
-              value="botswana"
-            ></v-radio>
-            <v-radio
-              label="Brazil"
-              value="brazil"
-            ></v-radio>
-            <v-radio
-              label="Brunei"
-              value="brunei"
-            ></v-radio>
-            <v-radio
-              label="Bulgaria"
-              value="bulgaria"
-            ></v-radio>
-            <v-radio
-              label="Burkina Faso"
-              value="burkina"
-            ></v-radio>
-            <v-radio
-              label="Burma"
-              value="burma"
-            ></v-radio>
-            <v-radio
-              label="Burundi"
-              value="burundi"
-            ></v-radio>
-          </v-radio-group>
-        </v-card-text>
-        <v-divider></v-divider>
-        <v-card-actions>
-          <v-btn
-            color="blue-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
-            Close
-          </v-btn>
-          <v-btn
-            color="blue-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
-            Save
-          </v-btn>
-        </v-card-actions>
-      </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup>
   import { ref } from 'vue'
 
-  const dialogm1 = ref('')
-  const dialog = ref(false)
+  const dialog = ref('')
 </script>
 
 <script>
   export default {
     data () {
       return {
-        dialogm1: '',
-        dialog: false,
+        dialog: '',
       }
     },
   }
diff --git a/packages/docs/src/examples/v-dialog/prop-transitions.vue b/packages/docs/src/examples/v-dialog/prop-transitions.vue
index 562a67db7f2..afeabdb5e4b 100644
--- a/packages/docs/src/examples/v-dialog/prop-transitions.vue
+++ b/packages/docs/src/examples/v-dialog/prop-transitions.vue
@@ -1,65 +1,68 @@
 <template>
-  <v-row justify="space-around">
-    <v-col cols="auto">
-      <v-dialog
-        transition="dialog-bottom-transition"
-        width="auto"
-      >
-        <template v-slot:activator="{ props }">
-          <v-btn
-            color="primary"
-            v-bind="props"
-          >From the bottom</v-btn>
-        </template>
-        <template v-slot:default="{ isActive }">
-          <v-card>
-            <v-toolbar
-              color="primary"
-              title="Opening from the bottom"
-            ></v-toolbar>
-            <v-card-text>
-              <div class="text-h2 pa-12">Hello world!</div>
-            </v-card-text>
-            <v-card-actions class="justify-end">
-              <v-btn
-                variant="text"
-                @click="isActive.value = false"
-              >Close</v-btn>
-            </v-card-actions>
-          </v-card>
-        </template>
-      </v-dialog>
-    </v-col>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="12" md="6">
+        <v-dialog
+          transition="dialog-bottom-transition"
+          width="auto"
+        >
+          <template v-slot:activator="{ props: activatorProps }">
+            <v-btn
+              v-bind="activatorProps"
+              block
+              text="Transition from Bottom"
+            ></v-btn>
+          </template>
 
-    <v-col cols="auto">
-      <v-dialog
-        transition="dialog-top-transition"
-        width="auto"
-      >
-        <template v-slot:activator="{ props }">
-          <v-btn
-            color="primary"
-            v-bind="props"
-          >From the top</v-btn>
-        </template>
-        <template v-slot:default="{ isActive }">
-          <v-card>
-            <v-toolbar
-              color="primary"
-              title="Opening from the top"
-            ></v-toolbar>
-            <v-card-text>
-              <div class="text-h2 pa-12">Hello world!</div>
-            </v-card-text>
-            <v-card-actions class="justify-end">
-              <v-btn
-                variant="text"
-                @click="isActive.value = false"
-              >Close</v-btn>
-            </v-card-actions>
-          </v-card>
-        </template>
-      </v-dialog>
-    </v-col>
-  </v-row>
+          <template v-slot:default="{ isActive }">
+            <v-card>
+              <v-toolbar title="Opening from the Bottom"></v-toolbar>
+
+              <v-card-text class="text-h2 pa-12">
+                Hello world!
+              </v-card-text>
+
+              <v-card-actions class="justify-end">
+                <v-btn
+                  text="Close"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </v-card-actions>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-dialog
+          transition="dialog-top-transition"
+          width="auto"
+        >
+          <template v-slot:activator="{ props: activatorProps }">
+            <v-btn
+              v-bind="activatorProps"
+              block
+              text="Transition from Top"
+            ></v-btn>
+          </template>
+          <template v-slot:default="{ isActive }">
+            <v-card>
+              <v-toolbar title="Opening from the Top"></v-toolbar>
+
+              <v-card-text class="text-h2 pa-12">
+                Hello world!
+              </v-card-text>
+
+              <v-card-actions class="justify-end">
+                <v-btn
+                  text="Close"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </v-card-actions>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-dialog/slot-default.vue b/packages/docs/src/examples/v-dialog/slot-default.vue
new file mode 100644
index 00000000000..fbcce77b684
--- /dev/null
+++ b/packages/docs/src/examples/v-dialog/slot-default.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="text-center pa-4">
+    <v-btn @click="dialog = true">
+      Open Dialog
+    </v-btn>
+
+    <v-dialog
+      v-model="dialog"
+      width="auto"
+    >
+      <v-card
+        prepend-icon="mdi-update"
+        max-width="400"
+        title="Update in progress"
+        text="Your application will relaunch automatically after the update is complete."
+      >
+        <template v-slot:actions>
+          <v-btn
+            class="ms-auto"
+            text="Ok"
+            @click="dialog = false"
+          ></v-btn>
+        </template>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const dialog = ref(false)
+</script>
+
+<script>
+  export default {
+    data () {
+      return {
+        dialog: false,
+      }
+    },
+  }
+</script>
diff --git a/packages/docs/src/examples/v-dialog/usage.vue b/packages/docs/src/examples/v-dialog/usage.vue
index 31233726955..ba6e24aac42 100644
--- a/packages/docs/src/examples/v-dialog/usage.vue
+++ b/packages/docs/src/examples/v-dialog/usage.vue
@@ -45,14 +45,19 @@
 
   const props = computed(() => {
     return {
-      width: '500',
+      'max-width': '500',
     }
   })
 
   const slots = computed(() => {
     return `
-  <template v-slot:activator="{ props }">
-    <v-btn v-bind="props" text="Open Dialog"> </v-btn>
+  <template v-slot:activator="{ props: activatorProps }">
+    <v-btn
+      v-bind="activatorProps"
+      color="surface-variant"
+      text="Open Dialog"
+      variant="flat"
+    ></v-btn>
   </template>
 
   <template v-slot:default="{ isActive }">
diff --git a/packages/docs/src/pages/en/components/dialogs.md b/packages/docs/src/pages/en/components/dialogs.md
index 2afedaf10b1..2ef512c7190 100644
--- a/packages/docs/src/pages/en/components/dialogs.md
+++ b/packages/docs/src/pages/en/components/dialogs.md
@@ -19,7 +19,7 @@ features:
 
 The `v-dialog` component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Use dialogs sparingly because they are interruptive.
 
-<!-- ![dialog Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-dialog/v-dialog-entry.png) -->
+![Dialog Entry](https://cdn.vuetifyjs.com/docs/images/components/v-dialog/v-dialog-entry.png)
 
 <PageFeatures />
 
@@ -36,30 +36,44 @@ In this basic example we use the **activator** slot to render a button that is u
 | Component | Description |
 | - | - |
 | [v-dialog](/api/v-dialog/) | Primary component |
+| [v-overlay](/api/v-overlay/) | Extended component |
 
 <ApiInline hide-links />
 
-## Examples
+## Anatomy
 
-### Props
+The recommended components to use inside of a `v-dialog` are:
 
-#### Activator
+* [v-card](/components/cards/)
+* [v-list](/components/lists/)
+* [v-sheet](/components/sheets/)
 
-In addition using the **activator** slot, we can instead use the **activator** prop to activate a dialog. By placing the dialog component inside the button, and setting the **activator** prop value to **"parent"** we can designate the parent (button) as the activator.
+![Dialog Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-dialog/v-dialog-anatomy.png)
 
-<ExamplesExample file="v-dialog/prop-activator" />
+| Element / Area | Description                                                              |
+| - | - |
+| 1. Container | The dialog's content that animates from the activator |
+| 2. Activator | The element that activates the dialog |
+
+## Guide
 
-### v-model
+The `v-dialog` component is used to inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. They are controlled by a **v-model** and/or an activator.
+
+### Props
+
+The `v-dialog` component extends [v-overlay](/components/overlays/) and has access to all of its props.
+
+#### v-model
 
 You can also trigger a dialog by simply updating the v-model, without using either **activator** slot or prop. In this case, the dialog will not appear to be activated by any specific element, and will simply appear in the middle of the screen.
 
 <ExamplesExample file="v-dialog/prop-model" />
 
-#### Fullscreen
+#### Persistent
 
-Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.
+Persistent dialogs are not dismissed when touching outside or pressing the **esc** key.
 
-<ExamplesExample file="v-dialog/prop-fullscreen" />
+<ExamplesExample file="v-dialog/prop-persistent" />
 
 #### Transitions
 
@@ -67,46 +81,62 @@ You can make the dialog appear from the top or the bottom.
 
 <ExamplesExample file="v-dialog/prop-transitions" />
 
-#### Persistent
+#### Nesting
 
-Persistent dialogs are not dismissed when touching outside or pressing the **esc** key.
+Dialogs can be nested: you can open one dialog from another.
 
-<ExamplesExample file="v-dialog/prop-persistent" />
+<ExamplesExample file="v-dialog/misc-nesting" />
+
+#### Overflowed
 
-#### Scrollable
+Modals that do not fit within the available window space will scroll the container.
+
+<ExamplesExample file="v-dialog/misc-overflowed" />
+
+### Slots
+
+The `v-dialog` component has 2 slots, **activator** and **default**. The **activator** slot is used to designate an element that will activate the dialog. The **default** slot provides an **isActive** ref which is tied to the current state of the dialog.
+
+#### Activator
+
+In addition using the **activator** slot, we can instead use the **activator** prop to activate a dialog. By placing the dialog component inside the button, and setting the **activator** prop value to **"parent"** we can designate the parent (button) as the activator.
+
+<ExamplesExample file="v-dialog/prop-activator" />
+
+#### Default
+
+<ExamplesExample file="v-dialog/slot-default" />
+
+## Examples
+
+The following are a collection of examples that demonstrate more advanced and real world use of the `v-dialog` component.
+
+### Scrollable
 
 Example of a dialog with scrollable content.
 
 <ExamplesExample file="v-dialog/prop-scrollable" />
 
-### Misc
-
-#### Form
+### Form
 
 A simple example of a form in a dialog.
 
 <ExamplesExample file="v-dialog/misc-form" />
 
-#### Loader
+### Loader
 
 The `v-dialog` component makes it easy to create a customized loading experience for your application.
 
 <ExamplesExample file="v-dialog/misc-loader" />
 
-#### Nesting
-
-Dialogs can be nested: you can open one dialog from another.
-
-<ExamplesExample file="v-dialog/misc-nesting" />
+### Fullscreen
 
-#### Overflowed
-
-Modals that do not fit within the available window space will scroll the container.
+Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.
 
-<ExamplesExample file="v-dialog/misc-overflowed" />
+<ExamplesExample file="v-dialog/prop-fullscreen" />
 
-<!-- #### Without activator
+### Invite dialog
 
-If for some reason you are unable to use the activator slot, be sure to add the `.stop` modifier to the event that triggers the dialog.
+This example demonstrates a dialog that is used to invite users to a group.
 
-<ExamplesExample file="v-dialog/misc-without-activator" /> -->
+<ExamplesExample file="v-dialog/misc-invite-dialog" />
diff --git a/packages/docs/src/plugins/icons.ts b/packages/docs/src/plugins/icons.ts
index a77ac755929..aee48b97baf 100644
--- a/packages/docs/src/plugins/icons.ts
+++ b/packages/docs/src/plugins/icons.ts
@@ -60,6 +60,7 @@ export {
   mdiBullhorn,
   mdiBullhornOutline,
   mdiBullseye,
+  mdiBullseyeArrow,
   mdiCached,
   mdiCakeVariant,
   mdiCalendar,
@@ -131,6 +132,7 @@ export {
   mdiDotsVertical,
   mdiDownloadBoxOutline,
   mdiDropbox,
+  mdiEarth,
   mdiEmail,
   mdiEmailOpen,
   mdiEmailOpenOutline,
@@ -291,6 +293,7 @@ export {
   mdiPencil,
   mdiPhone,
   mdiPhoneInTalk,
+  mdiPictureInPictureBottomRight,
   mdiPin,
   mdiPinOff,
   mdiPinOutline,
@@ -359,11 +362,13 @@ export {
   mdiUnfoldMoreHorizontal,
   mdiUpdate,
   mdiUpload,
+  mdiVariable,
   mdiVectorDifferenceAb,
   mdiVideoInputComponent,
   mdiVideoVintage,
   mdiViewDashboard,
   mdiViewDashboardOutline,
+  mdiWindowRestore,
   mdiViewGridOutline,
   mdiViewListOutline,
   mdiViewModule,