diff --git a/lerna.json b/lerna.json
index 2d0a4a45972..ed2f2f80132 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.0.0-alpha.12",
+  "version": "3.0.0-alpha.13",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index a758b930b34..60b9e5da315 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.0.0-alpha.12",
+  "version": "3.0.0-alpha.13",
   "private": true,
   "description": "",
   "main": "src/index.js",
@@ -17,7 +17,7 @@
     "deepmerge": "^4.0.0",
     "rimraf": "^3.0.2",
     "vue": "^3.2.22",
-    "vuetify": "^3.0.0-alpha.12"
+    "vuetify": "^3.0.0-alpha.13"
   },
   "devDependencies": {
     "@babel/node": "^7.16.0"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 6dca5cb9efd..3e11b6319ac 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -3,7 +3,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <john@vuetifyjs.com>",
-  "version": "3.0.0-alpha.12",
+  "version": "3.0.0-alpha.13",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -30,7 +30,7 @@
     "vue": "^3.2.22",
     "vue-i18n": "^9.2.0-beta.23",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.0.0-alpha.12"
+    "vuetify": "^3.0.0-alpha.13"
   },
   "devDependencies": {
     "@intlify/vite-plugin-vue-i18n": "^3.2.1",
diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue
index 3be0c4578ec..ae292045f8d 100644
--- a/packages/docs/src/App.vue
+++ b/packages/docs/src/App.vue
@@ -95,4 +95,8 @@
     + p
       font-size: 1.25rem
       font-weight: 300
+
+  ul:not([class])
+    padding-left: 20px
+    margin-bottom: 16px
 </style>
diff --git a/packages/docs/src/components/Backmatter.vue b/packages/docs/src/components/Backmatter.vue
index a51ebeea60c..82d62878355 100644
--- a/packages/docs/src/components/Backmatter.vue
+++ b/packages/docs/src/components/Backmatter.vue
@@ -28,7 +28,7 @@
         :key="i"
         cols="12"
         sm="6"
-        lg="4"
+        md="4"
       >
         <app-sheet>
           <v-list-item
@@ -37,7 +37,11 @@
             :subtitle="item.subtitle"
           >
             <template #prepend>
-              <v-icon :icon="item.icon" :color="item.color" />
+              <v-icon
+                :icon="item.icon"
+                :color="item.color"
+                class="mr-5 ml-2"
+              />
             </template>
           </v-list-item>
         </app-sheet>
diff --git a/packages/docs/src/components/ads/Base.vue b/packages/docs/src/components/ads/Base.vue
index 6c56dbfb445..befaa2f36e0 100644
--- a/packages/docs/src/components/ads/Base.vue
+++ b/packages/docs/src/components/ads/Base.vue
@@ -1,7 +1,7 @@
 <template>
   <v-sheet
     :style="styles"
-    class="v-app-ad d-inline-flex flex-child-1 grow-shrink-0 my-2"
+    class="v-app-ad d-inline-flex flex-child-1 grow-shrink-0 mt-2 mb-4"
     rounded
     width="100%"
     v-bind="$attrs"
diff --git a/packages/docs/src/components/ads/Carbon.vue b/packages/docs/src/components/ads/Carbon.vue
index 2f1763215e4..45cd7212d56 100644
--- a/packages/docs/src/components/ads/Carbon.vue
+++ b/packages/docs/src/components/ads/Carbon.vue
@@ -16,8 +16,6 @@
       />
     </ads-base>
   </div>
-
-  <vuetify v-else />
 </template>
 
 <script lang="ts">
@@ -42,19 +40,20 @@
     > span
       display: flex
       position: relative
+      flex-wrap: wrap
 
     .carbon-wrap
       display: flex
+      flex-wrap: wrap
 
     .carbon-text,
     .carbon-poweredby
       max-width: 200px
-      padding: 0 0 0 16px
       text-decoration: none
 
     .carbon-img
       display: inline-flex
-      margin: 0.5rem
+      margin: 1rem auto
 
       img
         border-radius: 4px 0 0 4px
@@ -62,16 +61,20 @@
 
     .carbon-text
       color: inherit
-      font-size: 0.75rem
-      padding: 0.475rem
+      font-size: 0.70rem
+      padding: 0 0.475rem
+      margin: 0 auto
+      text-align: center
 
     .carbon-poweredby
-      bottom: 0.5rem
+      color: inherit
       font-size: 0.625rem
       font-weight: 400
-      letter-spacing: 0.09375rem
-      position: absolute
-      right: 0.5rem
+      letter-spacing: 0.075rem
+      margin: 0 auto
+      opacity: .56
+      padding: 8px 0 16px 0
+      text-align: center
       text-transform: uppercase
 
   .v-app-ad.theme--light
diff --git a/packages/docs/src/components/ads/Entry.vue b/packages/docs/src/components/ads/Entry.vue
index 6f6a94df382..ce6a1ee0b91 100644
--- a/packages/docs/src/components/ads/Entry.vue
+++ b/packages/docs/src/components/ads/Entry.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="mb-8">
     <vuetify
-      v-if="slug"
       :slug="slug"
       medium="entry"
     />
-
-    <carbon v-else />
   </div>
 </template>
 
diff --git a/packages/docs/src/components/ads/Inline.vue b/packages/docs/src/components/ads/Inline.vue
index 9911498808f..54fec5977ee 100644
--- a/packages/docs/src/components/ads/Inline.vue
+++ b/packages/docs/src/components/ads/Inline.vue
@@ -1,12 +1,15 @@
 <template>
-  <base-ad>
-    <app-markdown
-      v-if="ad"
-      class="v-markdown--inline d-inline"
-      tag="span"
-      :content="description"
-    />
-  </base-ad>
+  <div class="d-none">
+    <!-- TODO: resolve style issues -->
+    <base-ad>
+      <app-markdown
+        v-if="ad"
+        class="v-markdown--inline d-inline"
+        tag="span"
+        :content="description"
+      />
+    </base-ad>
+  </div>
 </template>
 
 <script>
diff --git a/packages/docs/src/components/ads/Vuetify.vue b/packages/docs/src/components/ads/Vuetify.vue
index 1f5f0dde770..fa0fbeed398 100644
--- a/packages/docs/src/components/ads/Vuetify.vue
+++ b/packages/docs/src/components/ads/Vuetify.vue
@@ -10,42 +10,16 @@
       class="rounded px-2"
       style="min-height: inherit; width: 100%"
       v-bind="attrs"
+      :prepend-avatar="src"
+      :title="ad.title"
     >
-      <template #prepend>
-        <v-list-item-avatar
-          v-if="src"
-          class="my-0"
-          size="56"
-          tile
-        >
-          <v-img
-            :alt="`Link to ${ad.title}`"
-            :src="src"
-            class="rounded-tl rounded-bl"
-            contain
-          />
-        </v-list-item-avatar>
-      </template>
-
-      <v-list-item-title
-        class="font-weight-medium text-subtitle-1 hidden-xs-only"
-        v-text="ad.title"
-      />
-
-      <div>
+      <template #subtitle>
         <app-markdown
           v-if="description"
           class="text-caption text--secondary"
           :content="description"
         />
-      </div>
-
-      <div
-        v-if="!compact"
-        class="powered-by align-self-end justify-self-end pl-4 my-2 hidden-sm-and-down"
-      >
-        {{ t('ads-via-vuetify') }}
-      </div>
+      </template>
     </v-list-item>
   </ads-base>
 </template>
@@ -65,6 +39,7 @@
 
     props: {
       color: String,
+
       ...createAdProps(),
     },
 
diff --git a/packages/docs/src/components/app/Markup.vue b/packages/docs/src/components/app/Markup.vue
index 44941e02848..c2730833236 100644
--- a/packages/docs/src/components/app/Markup.vue
+++ b/packages/docs/src/components/app/Markup.vue
@@ -2,70 +2,57 @@
   <v-sheet
     ref="root"
     :theme="isDark ? 'dark' : 'light'"
-    :color="isDark ? '#1F1F1F' : 'grey-lighten-5'"
-    class="app-markup overflow-hidden"
+    class="app-markup overflow-hidden pa-2"
     dir="ltr"
-    outlined
     rounded
     v-bind="$attrs"
   >
-
-    <div class="d-flex align-center mb-n7">
-      <div class="d-none">
-        <v-btn-toggle
-          v-model="type"
-          border="primary"
-          class="d-inline-flex"
-          color="primary"
-          density="compact"
-          rounded
-          variant="text"
-        >
-          <v-btn
-            icon="mdi-language-javascript"
-            value="js"
-            width="40"
-          />
-
-          <v-btn
-            icon="mdi-language-typescript"
-            value="ts"
-            width="40"
-          />
-        </v-btn-toggle>
-      </div>
-
-      <v-spacer />
-
-      <v-btn
-        class="v-btn--copy mr-n9"
-        density="compact"
-        icon
-        variant="text"
-        @click="copy"
+    <v-sheet
+      :color="isDark ? '#1F1F1F' : 'grey-lighten-4'"
+      class="border"
+      outlined
+      rounded
+    >
+      <v-toolbar
+        border="b"
+        class="px-1"
+        color="transparent"
+        flat
+        height="44"
       >
-        <v-fade-transition hide-on-leave>
-          <v-icon
-            :key="String(clicked)"
-            :icon="clicked ? '$complete' : 'mdi-content-copy'"
-            color="grey"
-          />
-        </v-fade-transition>
-      </v-btn>
-    </div>
-
-    <slot>
-      <pre v-if="inline" :class="className">
-        <code :class="className" v-html="highlighted" />
-      </pre>
-
-      <code v-else :class="className" v-html="highlighted" />
-    </slot>
+        <v-spacer />
+
+        <v-tooltip anchor="bottom">
+          <template #activator="{ props }">
+            <v-btn
+              :icon="clicked ? 'mdi-check' : 'mdi-clipboard-text'"
+              class="mr-1 text-disabled"
+              density="comfortable"
+              v-bind="props"
+              @click="copy"
+            />
+          </template>
+
+          <span>{{ t('copy-example-source') }}</span>
+        </v-tooltip>
+      </v-toolbar>
+
+      <div class="pa-4">
+        <slot>
+          <pre v-if="inline" :class="className">
+            <code :class="className" v-html="highlighted" />
+          </pre>
+
+          <code v-else :class="className" v-html="highlighted" />
+        </slot>
+      </div>
+    </v-sheet>
   </v-sheet>
 </template>
 
 <script lang="ts">
   // Composables
+  import { useI18n } from 'vue-i18n'
   import { useTheme } from 'vuetify'
   import { useUserStore } from '@/store/user'
 
@@ -105,6 +92,7 @@
       const clicked = ref(false)
       const root = ref<ComponentPublicInstance>()
       const type = ref('js')
+      const { t } = useI18n()
 
       const highlighted = computed(() => (
         props.code && props.language && Prism.highlight(props.code, Prism.languages[props.language], props.language)
@@ -114,7 +102,7 @@
       async function copy () {
         if (!IN_BROWSER || !root.value) return
 
-        const el = root.value.$el.querySelector('pre')
+        const el = root.value.$el.querySelector('code')
 
         if (!el) return
 
@@ -130,15 +118,25 @@
 
         await wait(500)
 
-        clicked.value = false
         window.getSelection()?.removeAllRanges()
+
+        clicked.value = false
       }
 
       const isDark = computed(() => {
         return user.mixedTheme || theme.getTheme(theme.current.value).dark
       })
 
-      return { root, isDark, highlighted, className, clicked, copy, type }
+      return {
+        root,
+        isDark,
+        highlighted,
+        className,
+        clicked,
+        copy,
+        type,
+        t,
+      }
     },
   })
 </script>
@@ -147,7 +145,6 @@
   .v-sheet.app-markup
     // margin: 16px 0
     position: relative
-    padding: 12px 50px 12px 16px
 
     &:not(:hover) .v-btn--copy .v-icon
       opacity: .4
@@ -157,7 +154,6 @@
       font-size: 1rem
       font-weight: 300
       margin: 0 !important
-      min-height: 48px
 
     > pre
       border-radius: inherit
@@ -181,17 +177,17 @@
 
     pre
       &::after
-        bottom: 0.75rem
+        bottom: 1rem
         color: hsla(0, 0%, 19%, 0.5)
         font-family: inherit
         font-size: 0.7rem
         font-weight: 700
         position: absolute
-        right: 1rem
+        right: 14px
         text-transform: uppercase
 
     pre.language-bash::after
-      content: 'sh'
+      content: ' sh '
 
     pre.language-html::after
       content: 'html'
diff --git a/packages/docs/src/components/app/Toc.vue b/packages/docs/src/components/app/Toc.vue
index fbf712b1da9..df4521d244c 100644
--- a/packages/docs/src/components/app/Toc.vue
+++ b/packages/docs/src/components/app/Toc.vue
@@ -17,7 +17,7 @@
       />
     </template>
 
-    <ul class="mb-6 ml-5">
+    <ul class="mb-4 ml-5">
       <router-link
         v-for="({ to, level, text }, i) in toc"
         v-slot="{ href }"
@@ -47,22 +47,25 @@
       </router-link>
     </ul>
 
-    <div class="ml-5">
+    <v-container>
       <app-caption
         v-if="sponsors.length"
-        class="ml-2 mb-3"
-        path="platinum-sponsors"
+        path="sponsors"
+        class="mb-2 ml-2"
       />
 
-      <template v-for="sponsor of sponsors" :key="sponsor.slug">
-        <sponsor-card compact :sponsor="sponsor" />
-      </template>
-
-      <sponsor-link
-        class="ml-2"
-        size="small"
-      />
-    </div>
+      <v-row no-gutters>
+        <v-col v-for="sponsor of sponsors" :key="sponsor.slug" cols="6">
+          <sponsor-card width="96" compact :sponsor="sponsor" max-height="36" />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="12">
+          <carbon class="pl-2" />
+        </v-col>
+      </v-row>
+    </v-container>
   </v-navigation-drawer>
 </template>
 
@@ -73,7 +76,6 @@
   import { useSponsorsStore } from '../../store/sponsors'
 
   import SponsorCard from '@/components/sponsor/Card.vue'
-  import SponsorLink from '@/components/sponsor/Link.vue'
 
   type TocItem = {
     to: string;
@@ -174,7 +176,6 @@
 
     components: {
       SponsorCard,
-      SponsorLink,
     },
 
     setup () {
diff --git a/packages/docs/src/components/app/bar/JobsLink.vue b/packages/docs/src/components/app/bar/JobsLink.vue
index 1fcd5ad434a..7cc6835db4c 100644
--- a/packages/docs/src/components/app/bar/JobsLink.vue
+++ b/packages/docs/src/components/app/bar/JobsLink.vue
@@ -9,7 +9,7 @@
         :value="newJobs.length"
         color="#ED561B"
         dot
-        location="top-left"
+        location="top-end"
       >
         <v-icon
           class="mx-1"
diff --git a/packages/docs/src/components/app/bar/Logo.vue b/packages/docs/src/components/app/bar/Logo.vue
index c2e4d7734d5..4f19e5308bd 100644
--- a/packages/docs/src/components/app/bar/Logo.vue
+++ b/packages/docs/src/components/app/bar/Logo.vue
@@ -38,7 +38,7 @@
 
       // computed
       const logo = computed(() => {
-        return props.alt ? `vuetify-logo-${theme.current.value}-text.svg` : `vuetify-logo-${theme.current.value}.svg`
+        return props.alt ? `vuetify-logo-v3-slim-text-${theme.current.value}.svg` : `vuetify-logo-v3-slim-${theme.current.value}.svg`
       })
       const width = computed(() => {
         return props.alt ? 148 : 34
diff --git a/packages/docs/src/components/app/bar/NotificationsMenu.vue b/packages/docs/src/components/app/bar/NotificationsMenu.vue
index 7c6c3409348..2444f907b89 100644
--- a/packages/docs/src/components/app/bar/NotificationsMenu.vue
+++ b/packages/docs/src/components/app/bar/NotificationsMenu.vue
@@ -13,7 +13,7 @@
             :value="unread.length"
             color="#ED561B"
             dot
-            location="top-left"
+            location="top-end"
           >
             <v-icon
               class="mx-1"
diff --git a/packages/docs/src/components/components/ListItem.vue b/packages/docs/src/components/components/ListItem.vue
new file mode 100644
index 00000000000..6164a5a9309
--- /dev/null
+++ b/packages/docs/src/components/components/ListItem.vue
@@ -0,0 +1,35 @@
+<template>
+  <v-col cols="4">
+    <v-card
+      :image="`https://cdn.vuetifyjs.com/docs/images/components-temp/${name}.png`"
+      :to="rpath(`/components/${name}`)"
+      height="164"
+      class="mb-3"
+      elevation="0"
+    />
+
+    <h2 class="text-h6">
+      <span class="text-capitalize">{{ name }}</span>
+    </h2>
+
+    <slot />
+  </v-col>
+</template>
+
+<script lang="ts">
+  // Utilities
+  import { defineComponent } from 'vue'
+  import { rpath } from '@/util/routes'
+
+  export default defineComponent({
+    name: 'ComponentsListItem',
+
+    props: {
+      name: String,
+    },
+
+    setup () {
+      return { rpath }
+    },
+  })
+</script>
diff --git a/packages/docs/src/components/examples/Example.vue b/packages/docs/src/components/examples/Example.vue
index 7833f2ab189..83a53edd81c 100644
--- a/packages/docs/src/components/examples/Example.vue
+++ b/packages/docs/src/components/examples/Example.vue
@@ -8,7 +8,7 @@
       <v-toolbar
         border="b"
         class="px-4"
-        height="38"
+        height="44"
         flat
         rounded="t"
       >
@@ -21,9 +21,8 @@
         >
           <template #activator="{ props: tooltip }">
             <v-btn
-              class="ml-2"
+              class="ml-2 text-medium-emphasis"
               density="comfortable"
-              size="small"
               variant="text"
               v-bind="mergeProps(action, tooltip)"
             />
diff --git a/packages/docs/src/components/examples/Usage.vue b/packages/docs/src/components/examples/Usage.vue
index 4a18d693712..c3884b80a9d 100644
--- a/packages/docs/src/components/examples/Usage.vue
+++ b/packages/docs/src/components/examples/Usage.vue
@@ -1,5 +1,15 @@
 <template>
-  <app-sheet class="mb-12">
-    <div class="text-h5 ma-3">Usage example coming soon...</div>
+  <app-sheet class="mb-6">
+    <vue-file :file="`${name}/usage`" />
   </app-sheet>
 </template>
+
+<script>
+  export default {
+    name: 'Usage',
+
+    props: {
+      name: String,
+    },
+  }
+</script>
diff --git a/packages/docs/src/components/examples/UsageExample.vue b/packages/docs/src/components/examples/UsageExample.vue
new file mode 100644
index 00000000000..ec8b85176ba
--- /dev/null
+++ b/packages/docs/src/components/examples/UsageExample.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <v-toolbar
+      border="b"
+      class="px-2"
+      density="compact"
+      flat
+    >
+      <v-btn-toggle
+        v-model="model"
+        class="py-2"
+        mandatory
+      >
+        <v-btn value="default">Default</v-btn>
+
+        <v-btn
+          v-for="(option, i) in options"
+          :key="i"
+          :value="option"
+        >
+          {{ option }}
+        </v-btn>
+      </v-btn-toggle>
+
+      <v-tooltip anchor="bottom">
+        <template #activator="{ props }">
+          <v-btn
+            icon="mdi-tune"
+            class="mr-1 text-medium-emphasis"
+            density="comfortable"
+            v-bind="props"
+            @click="tune = !tune"
+          />
+        </template>
+
+        <span>Configure more options</span>
+      </v-tooltip>
+    </v-toolbar>
+
+    <v-layout>
+      <v-main>
+        <v-sheet
+          class="px-12 d-flex align-center"
+          min-height="300"
+          rounded="0"
+        >
+          <div class="flex-grow-1 px-12">
+            <slot />
+          </div>
+        </v-sheet>
+      </v-main>
+
+      <v-navigation-drawer
+        :model-value="tune"
+        permanent
+        name="tune"
+        position="right"
+        width="200"
+      >
+        <v-list>
+          <v-list-subheader>Configuration</v-list-subheader>
+
+          <v-list-item title="Coming soon" />
+        </v-list>
+      </v-navigation-drawer>
+    </v-layout>
+
+    <app-markup :code="formatAttributes" class="pt-0" />
+  </div>
+</template>
+
+<script>
+  // Utilities
+  import { computed, ref } from 'vue'
+
+  export default {
+    name: 'UsageExample',
+
+    props: {
+      name: String,
+      options: {
+        type: Array,
+        default: () => ([]),
+      },
+      modelValue: {
+        type: String,
+        required: true,
+      },
+    },
+
+    emits: {
+      'update:modelValue': val => val,
+    },
+
+    setup (props, { emit }) {
+      const tune = ref(false)
+      const model = computed({
+        get () {
+          return props.modelValue
+        },
+        set (val) {
+          emit('update:modelValue', val)
+        },
+      })
+
+      const formatAttributes = computed(() => {
+        let attributeArray = []
+        if (props.options.includes(model.value)) {
+          attributeArray.push(model.value)
+        }
+
+        attributeArray = attributeArray.sort()
+        const indent = attributeArray.length ? '\r  ' : ''
+        const tail = `${attributeArray.length ? '\r' : ''}></${props.name}>`
+
+        return `<${props.name}${indent}${attributeArray.join('\r  ')}${tail}`
+      })
+
+      return {
+        formatAttributes,
+        model,
+        tune,
+      }
+    },
+  }
+</script>
diff --git a/packages/docs/src/components/examples/VueFile.vue b/packages/docs/src/components/examples/VueFile.vue
new file mode 100644
index 00000000000..c84e7a4478a
--- /dev/null
+++ b/packages/docs/src/components/examples/VueFile.vue
@@ -0,0 +1,40 @@
+<template>
+  <component
+    :is="component"
+    v-if="component"
+  />
+</template>
+
+<script>
+  // Utilities
+  import { getExample } from 'virtual:examples'
+  import { shallowRef } from 'vue'
+
+  export default {
+    name: 'VueFile',
+
+    props: {
+      file: {
+        type: String,
+        required: true,
+      },
+    },
+
+    data: () => ({ component: shallowRef() }),
+
+    created () {
+      this.load()
+    },
+
+    methods: {
+      async load () {
+        try {
+          const { component } = await getExample(this.file)
+          this.component = component
+        } catch (e) {
+          console.error(e)
+        }
+      },
+    },
+  }
+</script>
diff --git a/packages/docs/src/components/home/Footer.vue b/packages/docs/src/components/home/Footer.vue
index 7c0e5933f8d..65e44e09b54 100644
--- a/packages/docs/src/components/home/Footer.vue
+++ b/packages/docs/src/components/home/Footer.vue
@@ -12,7 +12,7 @@
             class="mx-auto"
             contain
             height="64px"
-            src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-dark.svg"
+            src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-light.svg"
             width="64px"
           />
         </v-col>
diff --git a/packages/docs/src/components/home/Logo.vue b/packages/docs/src/components/home/Logo.vue
index efadb211501..d61fd0955cc 100644
--- a/packages/docs/src/components/home/Logo.vue
+++ b/packages/docs/src/components/home/Logo.vue
@@ -24,7 +24,7 @@
       const theme = useTheme()
 
       const logo = computed(() => {
-        return `vuetify-logo-${theme.current.value}-atom.svg`
+        return `vuetify-logo-v3-${theme.current.value}.svg`
       })
 
       return { logo }
diff --git a/packages/docs/src/components/sponsor/Card.vue b/packages/docs/src/components/sponsor/Card.vue
index 7499897b5a0..70b64b1d04f 100644
--- a/packages/docs/src/components/sponsor/Card.vue
+++ b/packages/docs/src/components/sponsor/Card.vue
@@ -15,7 +15,7 @@
     <v-img
       :alt="sponsor.metadata.name"
       :src="src"
-      :width="width"
+      :width="imgWidth"
       class="d-inline-block"
       contain
       eager
@@ -36,6 +36,7 @@
       sponsor: Object,
       compact: Boolean,
       comfortable: Boolean,
+      width: [Number, String],
     },
 
     setup (props) {
@@ -53,7 +54,8 @@
         return !current.dark ? logolight.url || lightLogo : logodark.url || darkLogo
       })
 
-      const width = computed(() => {
+      const imgWidth = computed(() => {
+        if (props.width) return props.width
         if (props.compact) return 112
         if (props.comfortable) return 148
 
@@ -71,7 +73,7 @@
 
       return {
         src,
-        width,
+        imgWidth,
         onClick,
       }
     },
diff --git a/packages/docs/src/data/nav-alpha.json b/packages/docs/src/data/nav-alpha.json
index 44b34aa8585..37e507b8eb3 100644
--- a/packages/docs/src/data/nav-alpha.json
+++ b/packages/docs/src/data/nav-alpha.json
@@ -58,6 +58,7 @@
     "activeIcon": "mdi-view-dashboard",
     "group": "components",
     "items": [
+      "all",
       "alerts",
       "app-bars",
       "application",
diff --git a/packages/docs/src/examples/v-alert/misc-twitter.vue b/packages/docs/src/examples/v-alert/misc-twitter.vue
deleted file mode 100644
index 5c563be745c..00000000000
--- a/packages/docs/src/examples/v-alert/misc-twitter.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <v-alert
-      v-model="alert"
-      border="start"
-      border-color="cyan"
-      color="white"
-      closable
-      variant="contained"
-      icon="mdi-twitter"
-    >
-      You've got <strong>5</strong> new updates on your timeline!.
-    </v-alert>
-
-    <div v-if="!alert" class="text-center">
-      <v-btn @click="alert = true">
-        Reset Alert
-      </v-btn>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    data: () => ({
-      alert: true,
-    }),
-  }
-</script>
diff --git a/packages/docs/src/examples/v-alert/prop-border.vue b/packages/docs/src/examples/v-alert/prop-border.vue
index b32710e8068..a6955cc11c0 100644
--- a/packages/docs/src/examples/v-alert/prop-border.vue
+++ b/packages/docs/src/examples/v-alert/prop-border.vue
@@ -7,6 +7,8 @@
       I'm an alert with a top border and primary color
     </v-alert>
 
+    <br>
+
     <v-alert
       border="end"
       color="secondary"
@@ -14,6 +16,8 @@
       I'm an alert with an end border and secondary color
     </v-alert>
 
+    <br>
+
     <v-alert
       border="bottom"
       color="success"
@@ -21,6 +25,8 @@
       I'm an alert with a bottom border and success color
     </v-alert>
 
+    <br>
+
     <v-alert
       border="start"
       color="error"
diff --git a/packages/docs/src/examples/v-alert/prop-closable.vue b/packages/docs/src/examples/v-alert/prop-closable.vue
index 9605a516848..aa308274111 100644
--- a/packages/docs/src/examples/v-alert/prop-closable.vue
+++ b/packages/docs/src/examples/v-alert/prop-closable.vue
@@ -3,18 +3,23 @@
     <v-alert
       v-model="alert"
       border="start"
+      variant="contained-text"
       closable
       close-label="Close Alert"
       color="deep-purple accent-4"
-      theme="dark"
+      title="Closable Alert"
     >
       Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.
 
       Vivamus consectetuer hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur blandit mollis lacus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
     </v-alert>
-    <div class="text-center">
+
+    <div
+      v-if="!alert"
+      class="text-center"
+    >
       <v-btn
-        v-if="!alert"
+
         @click="alert = true"
       >
         Reset
diff --git a/packages/docs/src/examples/v-alert/prop-colored-border.vue b/packages/docs/src/examples/v-alert/prop-colored-border.vue
index c7f3d11263a..2d93f666d4b 100644
--- a/packages/docs/src/examples/v-alert/prop-colored-border.vue
+++ b/packages/docs/src/examples/v-alert/prop-colored-border.vue
@@ -10,14 +10,18 @@
       Morbi mollis tellus ac sapien. Fusce vel dui. Praesent ut ligula non mi varius sagittis. Vivamus consectetuer hendrerit lacus. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
     </v-alert>
 
+    <br>
+
     <v-alert
       border="top"
-      border-color="info"
+      border-color="success"
       elevation="2"
     >
       Vestibulum ullamcorper mauris at ligula. Nam pretium turpis et arcu. Ut varius tincidunt libero. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Morbi nec metus.
     </v-alert>
 
+    <br>
+
     <v-alert
       border="bottom"
       border-color="warning"
@@ -26,6 +30,8 @@
       Sed in libero ut nibh placerat accumsan. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis.
     </v-alert>
 
+    <br>
+
     <v-alert
       border="end"
       border-color="error"
diff --git a/packages/docs/src/examples/v-alert/prop-dense.vue b/packages/docs/src/examples/v-alert/prop-dense.vue
deleted file mode 100644
index 1071f18c85b..00000000000
--- a/packages/docs/src/examples/v-alert/prop-dense.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div>
-    <v-alert
-      density="compact"
-      type="info"
-      class="ma-2"
-    >
-      I'm a dense alert with a <strong>type</strong> of info
-    </v-alert>
-    <v-alert
-      density="compact"
-      variant="text"
-      type="success"
-      class="ma-2"
-    >
-      I'm a dense alert with the <strong>text</strong> prop and a <strong>type</strong> of success
-    </v-alert>
-    <v-alert
-      density="compact"
-      border="start"
-      type="warning"
-      class="ma-2"
-    >
-      I'm a dense alert with the <strong>border</strong> prop and a <strong>type</strong> of warning
-    </v-alert>
-    <v-alert
-      density="compact"
-      variant="outlined"
-      type="error"
-      class="ma-2"
-    >
-      I'm a dense alert with the <strong>outlined</strong> prop and a <strong>type</strong> of error
-    </v-alert>
-  </div>
-</template>
diff --git a/packages/docs/src/examples/v-alert/prop-density.vue b/packages/docs/src/examples/v-alert/prop-density.vue
new file mode 100644
index 00000000000..3f2659e88cf
--- /dev/null
+++ b/packages/docs/src/examples/v-alert/prop-density.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <v-alert
+      density="compact"
+      type="info"
+    >
+      I'm a compact alert with a <strong>type</strong> of info
+    </v-alert>
+
+    <br>
+
+    <v-alert
+      density="comfortable"
+      type="success"
+      variant="contained-text"
+    >
+      I'm a comfortable alert with the <strong>text</strong> prop and a <strong>type</strong> of success
+    </v-alert>
+
+    <br>
+
+    <v-alert
+      border="start"
+      density="default"
+      type="warning"
+    >
+      I'm a default alert with the <strong>border</strong> prop and a <strong>type</strong> of warning
+    </v-alert>
+
+    <br>
+
+    <!-- Density is "default" by default -->
+    <v-alert
+      prominent
+      type="error"
+      variant="outlined"
+    >
+      I'm a default alert with the <strong>prominent</strong> prop and a <strong>type</strong> of error
+    </v-alert>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/v-alert/prop-icon.vue b/packages/docs/src/examples/v-alert/prop-icon.vue
index a4614cf7210..f46111572ef 100644
--- a/packages/docs/src/examples/v-alert/prop-icon.vue
+++ b/packages/docs/src/examples/v-alert/prop-icon.vue
@@ -5,26 +5,28 @@
       theme="dark"
       icon="mdi-firework"
       density="compact"
-      class="ma-2"
     >
       Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Vivamus quis mi. Quisque ut nisi. Maecenas malesuada.
     </v-alert>
+
+    <br>
+
     <v-alert
       color="#C51162"
       theme="dark"
       icon="mdi-material-design"
-      border="end"
-      class="ma-2"
+      border
     >
       Phasellus blandit leo ut odio. Morbi mattis ullamcorper velit. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. In ut quam vitae odio lacinia tincidunt.
     </v-alert>
+
+    <br>
+
     <v-alert
       color="primary"
       theme="dark"
       icon="mdi-vuetify"
-      border="start"
       prominent
-      class="ma-2"
     >
       Praesent congue erat at massa. Nullam vel sem. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Curabitur at lacus ac velit ornare lobortis.
     </v-alert>
diff --git a/packages/docs/src/examples/v-alert/prop-outlined.vue b/packages/docs/src/examples/v-alert/prop-outlined.vue
index 2eefe658266..30a9d9dd423 100644
--- a/packages/docs/src/examples/v-alert/prop-outlined.vue
+++ b/packages/docs/src/examples/v-alert/prop-outlined.vue
@@ -1,28 +1,32 @@
 <template>
   <div>
     <v-alert
-      variant="outlined"
       color="purple"
-      class="ma-2"
+      variant="outlined"
     >
-      <div class="text-h6">
-        Lorem Ipsum
-      </div>
-      <div>Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Duis vel nibh at velit scelerisque suscipit. Praesent blandit laoreet nibh. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.</div>
+      <template v-slot:title>
+        Outlined Alert
+      </template>
+
+      Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Duis vel nibh at velit scelerisque suscipit. Praesent blandit laoreet nibh. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
     </v-alert>
+
+    <br>
+
     <v-alert
-      variant="outlined"
       type="success"
-      class="ma-2"
+      variant="outlined"
     >
       Praesent venenatis metus at tortor pulvinar varius. Aenean commodo ligula eget dolor. Praesent ac massa at ligula laoreet iaculis. Vestibulum ullamcorper mauris at ligula.
     </v-alert>
+
+    <br>
+
     <v-alert
       variant="outlined"
       type="warning"
       prominent
-      border="start"
-      class="ma-2"
+      border="top"
     >
       Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Suspendisse non nisl sit amet velit hendrerit rutrum. Nullam vel sem. Pellentesque dapibus hendrerit tortor.
     </v-alert>
diff --git a/packages/docs/src/examples/v-alert/prop-prominent.vue b/packages/docs/src/examples/v-alert/prop-prominent.vue
index 01c9b50539f..cff503713de 100644
--- a/packages/docs/src/examples/v-alert/prop-prominent.vue
+++ b/packages/docs/src/examples/v-alert/prop-prominent.vue
@@ -3,28 +3,33 @@
     <v-alert
       prominent
       type="error"
-      class="ma-2"
     >
-      <div class="d-flex flex-row align-center">
-        <div>Nunc nonummy metus. Nunc interdum lacus sit amet orci. Nullam dictum felis eu pede mollis pretium. Cras id dui.</div>
-        <v-btn variant="text">Take action</v-btn>
-      </div>
+      <template v-slot:text>
+        Nunc nonummy metus. Nunc interdum lacus sit amet orci Nullam dictum felis eu pede.
+      </template>
+
+      <template v-slot:append>
+        <v-btn size="small" variant="text">Take action</v-btn>
+      </template>
     </v-alert>
+
+    <br>
+
     <v-alert
-      color="blue-grey"
-      theme="dark"
+      color="blue-grey-darken-2"
       density="compact"
       icon="mdi-school"
       prominent
-      class="ma-2"
     >
       Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Aenean ut eros et nisl sagittis vestibulum. Sed aliquam ultrices mauris. Donec vitae orci sed dolor rutrum auctor.
     </v-alert>
+
+    <br>
+
     <v-alert
       icon="mdi-shield-lock-outline"
       prominent
       type="info"
-      class="ma-2"
     >
       Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Sed in libero ut nibh placerat accumsan.. Curabitur blandit mollis lacus. Curabitur blandit mollis lacus.
     </v-alert>
diff --git a/packages/docs/src/examples/v-alert/prop-rounded.vue b/packages/docs/src/examples/v-alert/prop-rounded.vue
index f97f430ecf0..52d1b249b7b 100644
--- a/packages/docs/src/examples/v-alert/prop-rounded.vue
+++ b/packages/docs/src/examples/v-alert/prop-rounded.vue
@@ -1,33 +1,44 @@
 <template>
   <div>
     <v-alert
-      rounded="lg"
-      color="info"
-      class="ma-2"
+      rounded="0"
+      type="info"
+      title="Info"
     >
-      I'm an alert with large rounded borders
+      I'm an alert with no rounded borders. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur recusandae, est itaque laboriosam amet officia? Officia repellat provident sed est adipisci voluptatibus, voluptas reprehenderit dicta voluptatum, optio enim, placeat nostrum.
     </v-alert>
+
+    <br>
+
     <v-alert
-      rounded="pill"
+      rounded="xl"
       variant="outlined"
+      title="Success"
       type="success"
-      class="ma-2"
     >
-      I'm an alert with pill shaped borders
+      I'm an alert with extra large rounded borders. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim cumque vel sapiente suscipit officia ullam quam possimus provident id neque, cupiditate fuga animi expedita, beatae ipsam in veniam inventore totam.
     </v-alert>
+
+    <br>
+
     <v-alert
-      rounded="0"
+      title="Warning"
+      rounded="pill"
       type="warning"
-      class="ma-2"
+      prominent
     >
-      I'm an alert with no rounded borders
+      I'm an alert with pill rounded borders. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium ex excepturi ea odio cum libero animi vitae repellat fuga velit explicabo quae, ducimus.
     </v-alert>
+
+    <br>
+
     <v-alert
+      title="Error"
       prominent
+      rounded="t-xl b-lg"
       type="error"
-      class="ma-2"
     >
-      I'm an alert with default borders
+      I'm an alert with top and bottom borders. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum esse quis eius delectus odio repellat voluptates ullam doloribus eaque dignissimos
     </v-alert>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-alert/prop-tip.vue b/packages/docs/src/examples/v-alert/prop-tip.vue
deleted file mode 100644
index 5fc49201f61..00000000000
--- a/packages/docs/src/examples/v-alert/prop-tip.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <v-alert
-    color="info"
-    tip
-  >
-    Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
-
-    Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
-  </v-alert>
-</template>
diff --git a/packages/docs/src/examples/v-alert/prop-type.vue b/packages/docs/src/examples/v-alert/prop-type.vue
index c0c66e5496a..8ed12f7a668 100644
--- a/packages/docs/src/examples/v-alert/prop-type.vue
+++ b/packages/docs/src/examples/v-alert/prop-type.vue
@@ -2,10 +2,16 @@
   <div>
     <v-alert type="success">I'm a success alert.</v-alert>
 
+    <br>
+
     <v-alert type="info">I'm an info alert.</v-alert>
 
+    <br>
+
     <v-alert type="warning">I'm a warning alert.</v-alert>
 
+    <br>
+
     <v-alert type="error">I'm an error alert.</v-alert>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-alert/prop-variant.vue b/packages/docs/src/examples/v-alert/prop-variant.vue
index bcf1be748fe..5b3d1c34b54 100644
--- a/packages/docs/src/examples/v-alert/prop-variant.vue
+++ b/packages/docs/src/examples/v-alert/prop-variant.vue
@@ -1,24 +1,32 @@
 <template>
   <div>
+    <v-alert
+      color="yellow-darken-4"
+      icon="mdi-flash"
+      title="Contained Flat (Default)"
+      variant="contained-flat"
+    >
+      Nullam tincidunt adipiscing enim. In consectetuer turpis ut velit. Maecenas egestas arcu quis ligula mattis placerat. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus.
+    </v-alert>
+
+    <br>
+
     <v-alert
       color="info"
-      class="ma-2"
+      title="Contained Text"
       variant="contained-text"
     >
-      <h3 class="text-h5">
-        Lorem Ipsum
-      </h3>
-      <div>Maecenas nec odio et ante tincidunt tempus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Curabitur turpis.</div>
+      <div>
+        Maecenas nec odio et ante tincidunt tempus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Curabitur turpis.
+      </div>
 
-      <v-divider
-        class="my-4 bg-info"
-        style="opacity: 0.22"
-      ></v-divider>
+      <v-divider class="my-4 bg-light-blue-lighten-4"></v-divider>
 
       <div class="d-flex flex-row align-center justify-space-between">
         <div>
           Proin magna. Vivamus in erat ut urna cursus vestibulum. Etiam imperdiet imperdiet orci.
         </div>
+
         <v-btn
           color="info"
           variant="outlined"
@@ -28,44 +36,51 @@
       </div>
     </v-alert>
 
+    <br>
+
     <v-alert
-      variant="outlined"
       color="deep-orange"
       icon="mdi-fire"
-      class="ma-2"
+      title="Outlined"
+      variant="outlined"
     >
       Nullam tincidunt adipiscing enim. In consectetuer turpis ut velit. Maecenas egestas arcu quis ligula mattis placerat. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus.
     </v-alert>
 
+    <br>
+
     <v-alert
-      variant="contained-text"
+      border="start"
+      color="teal-darken-4"
       density="compact"
-      color="teal"
       icon="mdi-clock-fast"
-      border="start"
-      class="ma-2"
+      title="Contained"
+      variant="contained"
     >
       Vestibulum ullamcorper mauris at ligula. Nulla porta dolor. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Curabitur at lacus ac velit ornare lobortis.
     </v-alert>
 
+    <br>
+
     <v-alert
-      variant="text"
+      icon="mdi-cloud-alert"
       prominent
+      title="Text"
       type="error"
-      icon="mdi-cloud-alert"
-      class="ma-2"
+      variant="text"
     >
       Praesent blandit laoreet nibh. Praesent nonummy mi in odio. Phasellus tempus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Duis leo.
     </v-alert>
 
+    <br>
+
     <v-alert
-      variant="plain"
-      density="compact"
       color="orange"
+      density="compact"
       icon="mdi-note"
       prominent
-      border="end"
-      class="ma-2"
+      title="Plain"
+      variant="plain"
     >
       Vestibulum ullamcorper mauris at ligula. Nulla porta dolor. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Curabitur at lacus ac velit ornare lobortis.
     </v-alert>
diff --git a/packages/docs/src/examples/v-alert/usage.vue b/packages/docs/src/examples/v-alert/usage.vue
index 38f001cc5c4..8ec565766c0 100644
--- a/packages/docs/src/examples/v-alert/usage.vue
+++ b/packages/docs/src/examples/v-alert/usage.vue
@@ -1,52 +1,42 @@
 <template>
-  <v-alert
-    v-if="show"
-    v-model="show"
-    v-bind="$attrs"
+  <usage-example
+    v-model="model"
+    :options="options"
+    name="v-alert"
   >
-    I'm an Alert Usage Example
-  </v-alert>
+    <v-defaults-provider
+      :defaults="{
+        VAlert: {
+          border: model === 'border',
+          variant: model === 'contained' ? 'contained' : undefined,
+        }
+      }"
+    >
+      <v-alert
+        v-model="alert"
+        icon="mdi-vuetify"
+        title="I'm an Alert Usage Example"
+        text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam earum, est illo quae fugit voluptatum fuga magni hic maiores ipsa, illum, tenetur accusamus cupiditate? Dolorem ad nisi eveniet officia voluptatibus."
+      ></v-alert>
+    </v-defaults-provider>
 
-  <v-btn
-    v-else
-    class="mx-auto"
-    color="primary"
-    @click="show = !show"
-  >
-    Reset
-  </v-btn>
+    <div
+      v-if="!alert"
+      class="d-flex justify-center"
+    >
+      <v-btn @click="alert= true">Reset Alert</v-btn>
+    </div>
+  </usage-example>
 </template>
 
 <script>
   export default {
-    name: 'Usage',
-
-    inheritAttrs: false,
+    name: 'VAlertUsageExample',
 
     data: () => ({
-      show: true,
-      defaults: {
-        border: null,
-        dense: false,
-        dismissible: false,
-        icon: null,
-        prominent: false,
-        outlined: false,
-        text: false,
-        shaped: false,
-        type: 'success',
-      },
-      options: {
-        booleans: ['dismissible'],
-        selects: {
-          border: ['left', 'right', 'top', 'bottom'],
-          color: ['red', 'orange', 'yellow', 'green', 'blue', 'purple'],
-          icon: ['$mdiAccount', '$mdiVuetify'],
-          type: ['success', 'info', 'warning', 'error'],
-        },
-        sliders: { elevation: [0, 24] },
-      },
-      tabs: ['dense', 'prominent', 'outlined', 'text', 'shaped'],
+      alert: true,
+      model: 'default',
+      options: ['contained', 'border'],
     }),
   }
 </script>
diff --git a/packages/docs/src/examples/v-app-bar/prop-density.vue b/packages/docs/src/examples/v-app-bar/prop-density.vue
index 1b5167aa9a1..e7d5af3e901 100644
--- a/packages/docs/src/examples/v-app-bar/prop-density.vue
+++ b/packages/docs/src/examples/v-app-bar/prop-density.vue
@@ -1,39 +1,40 @@
 <template>
-  <v-layout>
-    <v-app-bar density="compact" absolute>
-      <v-app-bar-title>Vuetify</v-app-bar-title>
-
-      <v-spacer></v-spacer>
-
-      <v-btn text>Developer</v-btn>
-
-      <v-btn class="mr-3" text>Help</v-btn>
-
-      <v-divider inset vertical></v-divider>
-
-      <v-btn
-        class="mr-4 ml-5"
+  <v-card
+    class="mx-auto"
+    max-width="448"
+  >
+    <v-layout>
+      <v-app-bar
         color="primary"
-        plain
+        density="compact"
       >
-        <v-icon left icon="mdi-handshake-outline"></v-icon>
-
-        <span>John Leider</span>
-      </v-btn>
-    </v-app-bar>
-
-    <v-main>
-      <v-sheet border>
-        <v-container>
-          <section>
-            <h4 class="text-h4">Heading</h4>
-
-            <div>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo consectetur quos velit inventore optio omnis, tempora nam officia, labore quibusdam error facere ipsum iste temporibus laboriosam aliquam quia vitae magni.
-            </div>
-          </section>
+        <template v-slot:prepend>
+          <v-app-bar-nav-icon></v-app-bar-nav-icon>
+        </template>
+
+        <v-app-bar-title>Photos</v-app-bar-title>
+
+        <template v-slot:append>
+          <v-btn icon="mdi-dots-vertical"></v-btn>
+        </template>
+      </v-app-bar>
+
+      <v-main>
+        <v-container fluid>
+          <v-row dense>
+            <v-col
+              v-for="n in 8"
+              :key="n"
+              cols="3"
+            >
+              <v-sheet
+                color="grey-lighten-3"
+                height="96"
+              ></v-sheet>
+            </v-col>
+          </v-row>
         </v-container>
-      </v-sheet>
-    </v-main>
-  </v-layout>
+      </v-main>
+    </v-layout>
+  </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-app-bar/prop-image.vue b/packages/docs/src/examples/v-app-bar/prop-image.vue
new file mode 100644
index 00000000000..fd14a5232b2
--- /dev/null
+++ b/packages/docs/src/examples/v-app-bar/prop-image.vue
@@ -0,0 +1,53 @@
+<template>
+  <v-card max-width="448" class="mx-auto" color="grey-lighten-4">
+    <v-layout>
+      <v-app-bar
+        color="teal-darken-4"
+        class="text-white"
+        image="https://picsum.photos/1920/1080?random"
+      >
+        <template v-slot:image>
+          <v-img
+            gradient="to top right, rgba(19,84,122,.8), rgba(128,208,199,.8)"
+          ></v-img>
+        </template>
+
+        <v-app-bar-nav-icon></v-app-bar-nav-icon>
+
+        <v-app-bar-title>Title</v-app-bar-title>
+
+        <v-spacer></v-spacer>
+
+        <v-btn icon>
+          <v-icon>mdi-magnify</v-icon>
+        </v-btn>
+
+        <v-btn icon>
+          <v-icon>mdi-heart</v-icon>
+        </v-btn>
+
+        <v-btn icon>
+          <v-icon>mdi-dots-vertical</v-icon>
+        </v-btn>
+      </v-app-bar>
+
+      <v-main>
+        <v-container fluid>
+          <v-row dense>
+            <v-col
+              v-for="n in 4"
+              :key="n"
+              cols="12"
+            >
+              <v-card
+                :title="`Content ${n}`"
+                :subtitle="`Subtitle for Content ${n}`"
+                text="Lorem ipsum dolor sit amet consectetur, adipisicing elit.?"
+              ></v-card>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-main>
+    </v-layout>
+  </v-card>
+</template>
diff --git a/packages/docs/src/examples/v-app-bar/prop-img.vue b/packages/docs/src/examples/v-app-bar/prop-img.vue
deleted file mode 100644
index 84ea73055ae..00000000000
--- a/packages/docs/src/examples/v-app-bar/prop-img.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <v-layout>
-    <v-app-bar
-      absolute
-      color="#fcb69f"
-      dark
-      shrink-on-scroll
-      src="https://picsum.photos/1920/1080?random"
-      scroll-target="#scrolling-techniques-2"
-    >
-      <template v-slot:img="{ props }">
-        <v-img
-          v-bind="props"
-          gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
-        ></v-img>
-      </template>
-
-      <v-app-bar-nav-icon></v-app-bar-nav-icon>
-
-      <v-app-bar-title>Title</v-app-bar-title>
-
-      <v-spacer></v-spacer>
-
-      <v-btn icon>
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
-
-      <v-btn icon>
-        <v-icon>mdi-heart</v-icon>
-      </v-btn>
-
-      <v-btn icon>
-        <v-icon>mdi-dots-vertical</v-icon>
-      </v-btn>
-    </v-app-bar>
-    <v-main>
-      <v-sheet
-        id="scrolling-techniques-2"
-        class="overflow-y-auto"
-        max-height="600"
-      >
-        <v-container style="height: 1000px;"></v-container>
-      </v-sheet>
-    </v-main>
-  </v-layout>
-</template>
diff --git a/packages/docs/src/examples/v-app-bar/prop-prominent.vue b/packages/docs/src/examples/v-app-bar/prop-prominent.vue
index 4986029e650..491f1e7f70b 100644
--- a/packages/docs/src/examples/v-app-bar/prop-prominent.vue
+++ b/packages/docs/src/examples/v-app-bar/prop-prominent.vue
@@ -1,38 +1,69 @@
 <template>
-  <v-layout>
-    <v-app-bar
-      absolute
-      color="indigo darken-2"
-      dark
-      shrink-on-scroll
-      prominent
-      scroll-target="#scrolling-techniques"
-    >
-      <v-app-bar-nav-icon></v-app-bar-nav-icon>
-
-      <v-app-bar-title>Title</v-app-bar-title>
-
-      <v-spacer></v-spacer>
-
-      <v-btn icon>
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
-
-      <v-btn icon>
-        <v-icon>mdi-heart</v-icon>
-      </v-btn>
-
-      <v-btn icon>
-        <v-icon>mdi-dots-vertical</v-icon>
-      </v-btn>
-    </v-app-bar>
-    <v-sheet
-      id="scrolling-techniques"
-      class="overflow-y-auto"
-      max-height="600"
-      width="100%"
-    >
-      <v-container style="height: 1000px;"></v-container>
-    </v-sheet>
-  </v-layout>
+  <v-card max-width="448" class="mx-auto">
+    <v-layout>
+      <v-app-bar
+        color="info"
+        density="prominent"
+      >
+        <template v-slot:prepend>
+          <v-app-bar-nav-icon></v-app-bar-nav-icon>
+        </template>
+
+        <v-app-bar-title>My Recent Trips</v-app-bar-title>
+
+        <template v-slot:append>
+          <v-btn icon>
+            <v-icon>mdi-dots-vertical</v-icon>
+          </v-btn>
+        </template>
+      </v-app-bar>
+
+      <v-main>
+        <v-container fluid>
+          <v-card
+            border
+            class="mb-2"
+            density="compact"
+            prepend-avatar="https://randomuser.me/api/portraits/women/10.jpg"
+            subtitle="Salsa, merengue, y cumbia"
+            title="Cuba"
+            variant="text"
+          >
+            <v-img src="https://picsum.photos/512/128?image=660" height="128" cover></v-img>
+
+            <v-card-text>
+              During my last trip to South America, I spent 2 weeks traveling through Patagonia in Chile.
+            </v-card-text>
+
+            <template v-slot:actions>
+              <v-btn color="primary" variant="text">View More</v-btn>
+
+              <v-btn color="primary" variant="text">See in Map</v-btn>
+            </template>
+          </v-card>
+
+          <v-card
+            border
+            density="comfortable"
+            prepend-avatar="https://randomuser.me/api/portraits/women/17.jpg"
+            subtitle="Salsa, merengue, y cumbia"
+            title="Florida"
+            variant="text"
+          >
+            <v-img src="https://picsum.photos/512/128?random" height="128" cover></v-img>
+
+            <v-card-text>
+              During my last trip to Florida, I spent 2 weeks traveling through the Everglades.
+            </v-card-text>
+
+            <template v-slot:actions>
+              <v-btn color="primary" variant="text">View More</v-btn>
+
+              <v-btn color="primary" variant="text">See in Map</v-btn>
+            </template>
+          </v-card>
+        </v-container>
+      </v-main>
+    </v-layout>
+  </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-app-bar/usage.vue b/packages/docs/src/examples/v-app-bar/usage.vue
index 85420156481..0f8bf02556a 100644
--- a/packages/docs/src/examples/v-app-bar/usage.vue
+++ b/packages/docs/src/examples/v-app-bar/usage.vue
@@ -1,38 +1,53 @@
 <template>
-  <v-app-bar
-    v-bind="$attrs"
+  <usage-example
+    v-model="model"
+    :options="options"
+    name="v-app-bar"
   >
-    <v-app-bar-nav-icon></v-app-bar-nav-icon>
-  </v-app-bar>
+    <v-defaults-provider
+      :defaults="{
+        VAppBar: {
+          collapse: model === 'collapse',
+        }
+      }"
+    >
+      <v-layout
+        class="elevation-2 rounded mx-auto bg-grey-lighten-4"
+        style="max-width: 448px;"
+      >
+        <v-app-bar :model-value="model !== 'hidden'">
+          <template v-slot:prepend>
+            <v-app-bar-nav-icon></v-app-bar-nav-icon>
+          </template>
+
+          <v-app-bar-title>Application Bar</v-app-bar-title>
+
+          <template v-slot:append>
+            <v-btn icon="mdi-heart"></v-btn>
+
+            <v-btn icon="mdi-magnify"></v-btn>
+
+            <v-btn icon="mdi-dots-vertical"></v-btn>
+          </template>
+        </v-app-bar>
+
+        <v-main>
+          <div class="text-center py-12">
+            <div class="text-h5">Content</div>
+          </div>
+        </v-main>
+      </v-layout>
+    </v-defaults-provider>
+  </usage-example>
 </template>
 
 <script>
   export default {
-    name: 'Usage',
-
-    inheritAttrs: false,
+    name: 'VAppBarUsageExample',
 
     data: () => ({
-      show: true,
-      defaults: {
-        color: null,
-        elevation: 4,
-        dense: false,
-        flat: false,
-        outlined: false,
-        prominent: false,
-        rounded: false,
-        shaped: false,
-      },
-      options: {
-        sliders: {
-          elevation: [0, 24],
-        },
-        selects: {
-          color: ['red', 'orange', 'yellow', 'green', 'blue', 'purple'],
-        },
-      },
-      tabs: ['dense', 'flat', 'outlined', 'prominent', 'rounded', 'shaped'],
+      model: 'default',
+      options: ['collapse'],
     }),
   }
 </script>
diff --git a/packages/docs/src/examples/v-badge/misc-customization.vue b/packages/docs/src/examples/v-badge/misc-customization.vue
index 683bcff9619..906fc3267e9 100644
--- a/packages/docs/src/examples/v-badge/misc-customization.vue
+++ b/packages/docs/src/examples/v-badge/misc-customization.vue
@@ -15,7 +15,7 @@
 
     <v-badge
       bordered
-      location="bottom-right"
+      location="bottom-end"
       color="deep-purple-accent-4"
       dot
       offset-x="2"
diff --git a/packages/docs/src/examples/v-badge/misc-hover.vue b/packages/docs/src/examples/v-badge/misc-hover.vue
index daf070f4765..6af43bcecdc 100644
--- a/packages/docs/src/examples/v-badge/misc-hover.vue
+++ b/packages/docs/src/examples/v-badge/misc-hover.vue
@@ -4,7 +4,7 @@
       :model-value="hover"
       color="deep-purple"
       content="9999+"
-      location="top-left"
+      location="top-end"
       transition="slide-x-transition"
     >
       <v-hover v-slot="{ props }" v-model="hover">
diff --git a/packages/docs/src/examples/v-badge/prop-content.vue b/packages/docs/src/examples/v-badge/prop-content.vue
new file mode 100644
index 00000000000..ea67274e07f
--- /dev/null
+++ b/packages/docs/src/examples/v-badge/prop-content.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-toolbar color="blue-grey-darken-3">
+    <v-spacer></v-spacer>
+
+    <v-btn class="text-none" stacked variant="contained-text">
+      <v-badge dot color="success">
+        <v-icon>mdi-home-outline</v-icon>
+      </v-badge>
+    </v-btn>
+
+    <v-btn class="text-none" stacked>
+      <v-icon>mdi-account-multiple-outline</v-icon>
+    </v-btn>
+
+    <v-btn class="text-none" stacked>
+      <v-badge content="9+" color="error">
+        <v-icon>mdi-store-outline</v-icon>
+      </v-badge>
+    </v-btn>
+
+    <v-btn class="text-none" stacked>
+      <v-badge content="2" color="error">
+        <v-icon>mdi-bell-outline</v-icon>
+      </v-badge>
+    </v-btn>
+
+    <v-btn class="text-none" stacked>
+      <v-icon>mdi-menu</v-icon>
+    </v-btn>
+
+    <v-spacer></v-spacer>
+  </v-toolbar>
+</template>
diff --git a/packages/docs/src/examples/v-badge/prop-dot.vue b/packages/docs/src/examples/v-badge/prop-dot.vue
new file mode 100644
index 00000000000..2337d5c613f
--- /dev/null
+++ b/packages/docs/src/examples/v-badge/prop-dot.vue
@@ -0,0 +1,34 @@
+<template>
+  <v-toolbar title="Application" color="grey-lighten-3">
+    <v-btn stacked>
+      <v-badge
+        color="error"
+        dot
+      >
+        <v-icon icon="mdi-newspaper-variant-outline"></v-icon>
+      </v-badge>
+
+      News
+    </v-btn>
+
+    <v-btn stacked>
+      <v-badge
+        dot
+        color="error"
+      >
+        <v-icon icon="mdi-post"></v-icon>
+      </v-badge>
+
+      Blog
+    </v-btn>
+
+    <v-btn
+      stacked
+      variant="contained-text"
+    >
+      <v-icon icon="mdi-login"></v-icon>
+
+      Login
+    </v-btn>
+  </v-toolbar>
+</template>
diff --git a/packages/docs/src/examples/v-badge/prop-inline.vue b/packages/docs/src/examples/v-badge/prop-inline.vue
new file mode 100644
index 00000000000..195037ee2b2
--- /dev/null
+++ b/packages/docs/src/examples/v-badge/prop-inline.vue
@@ -0,0 +1,47 @@
+<template>
+  <v-list
+    border
+    class="mx-auto"
+    max-width="256"
+  >
+    <v-list-item
+      link
+      prepend-icon="mdi-inbox-arrow-down"
+      title="Inbox"
+    >
+      <template v-slot:append>
+        <v-badge
+          color="error"
+          content="6"
+          inline
+        ></v-badge>
+      </template>
+    </v-list-item>
+
+    <v-list-item
+      link
+      prepend-icon="mdi-send"
+      title="Sent Mail"
+    ></v-list-item>
+
+    <v-list-item
+      link
+      prepend-icon="mdi-delete"
+      title="Trash"
+    >
+      <template v-slot:append>
+        <v-badge
+          color="info"
+          content="12"
+          inline
+        ></v-badge>
+      </template>
+    </v-list-item>
+
+    <v-list-item
+      link
+      prepend-icon="mdi-alert-circle"
+      title="Spam"
+    ></v-list-item>
+  </v-list>
+</template>
diff --git a/packages/docs/src/examples/v-badge/usage.vue b/packages/docs/src/examples/v-badge/usage.vue
index 88f2c0a95e2..51dd75c5a6f 100644
--- a/packages/docs/src/examples/v-badge/usage.vue
+++ b/packages/docs/src/examples/v-badge/usage.vue
@@ -1,38 +1,34 @@
 <template>
-  <div
-    style="width: 100%"
-    class="text-center"
+  <usage-example
+    v-model="model"
+    :options="options"
+    name="v-badge"
   >
-    <v-badge
-      v-bind="$attrs"
-    >
-      <v-icon large>
-        $mdiVuetify
-      </v-icon>
-    </v-badge>
-  </div>
+    <div class="text-center">
+      <v-defaults-provider
+        :defaults="{
+          VBadge: {
+            inline: model === 'inline',
+            floating: model === 'floating',
+          }
+        }"
+      >
+        <v-badge overlap>
+          <v-icon icon="mdi-vuetify" size="x-large"></v-icon>
+        </v-badge>
+      </v-defaults-provider>
+    </div>
+  </usage-example>
 </template>
 
 <script>
   export default {
-    name: 'Usage',
-
-    inheritAttrs: false,
+    name: 'VBadgeUsageExample',
 
     data: () => ({
-      defaults: {
-        bordered: false,
-        bottom: false,
-        dot: false,
-        inline: false,
-        left: false,
-        overlap: false,
-        tile: false,
-      },
-      options: {
-        booleans: ['bottom', 'dot', 'left', 'overlap'],
-      },
-      tabs: ['bordered', 'inline', 'tile'],
+      badge: true,
+      model: 'default',
+      options: ['floating', 'inline'],
     }),
   }
 </script>
diff --git a/packages/docs/src/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json
index 2f52d363940..99226a46526 100644
--- a/packages/docs/src/i18n/messages/en.json
+++ b/packages/docs/src/i18n/messages/en.json
@@ -6,6 +6,7 @@
   "about": "About",
   "accessibility": "Accessibility (a11y)",
   "ads-via-vuetify": "ads via Vuetify",
+  "all-components": "All Components",
   "alpha": "Alpha",
   "api": "API",
   "api-headers": {
@@ -60,6 +61,7 @@
   "community-support": "Community support",
   "contact-us": "Contact Us",
   "cookie-policy": "Cookie policy",
+  "copy-example-source": "Copy example source",
   "copyright": "Copyright {0}",
   "customization": "Customization",
   "dark": "Dark",
diff --git a/packages/docs/src/pages/en/components/alerts.md b/packages/docs/src/pages/en/components/alerts.md
index e1b61aa42a9..6f451a326dc 100644
--- a/packages/docs/src/pages/en/components/alerts.md
+++ b/packages/docs/src/pages/en/components/alerts.md
@@ -62,11 +62,11 @@ The **colored-border** prop removes the alert background in order to accent the
 
 <example file="v-alert/prop-colored-border" />
 
-#### Dense
+#### Density
 
-The **dense** prop decreases the height of the alert to create a simple and compact style. When combined with the **border** prop, the border thickness will be decreased to stay consistent with the style.
+The **density** prop decreases the height of the alert based upon 1 of 3 levels of density; **default**, **comfortable**, and **compact**.
 
-<example file="v-alert/prop-dense" />
+<example file="v-alert/prop-density" />
 
 #### Closable
 
@@ -106,18 +106,6 @@ The **rounded** prop will add or remove **border-radius** to the alert. Similar
 
 <example file="v-alert/prop-rounded" />
 
-#### Tip
-
-<!-- TODO: Write description. What is tip prop? It does not seem to be compatible with icon -->
-
-<example file="v-alert/prop-tip" />
-
-#### Twitter
-
-Combine multiple properties—**color, closable, border, elevation, and more**—to create a customized and stylish `v-alert` component.
-
-<example file="v-alert/misc-twitter" />
-
 ## Accessibility
 
 By default, `v-alert` components are assigned the [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) role of [**alert**](https://www.w3.org/TR/wai-aria/#alert) which denotes that the alert \"is a live region with important and usually time-sensitive information.\" When using the **closable** prop, the close icon will receive a corresponding `aria-label`. This value can be modified by changing either the **close-label** prop or globally through customizing the [Internationalization](/features/internationalization)'s default value for the _close_ property.
diff --git a/packages/docs/src/pages/en/components/all.md b/packages/docs/src/pages/en/components/all.md
new file mode 100644
index 00000000000..6530d5a241f
--- /dev/null
+++ b/packages/docs/src/pages/en/components/all.md
@@ -0,0 +1,53 @@
+---
+nav: All Components
+meta:
+  title: All Vuetify Components
+  description: Browse all of the available Vuetify components or group by category.
+  keywords: components, all components, all Vuetify components
+---
+
+<script setup>
+  import ComponentsListItem from '@/components/components/ListItem.vue'
+</script>
+
+# Components
+
+Vuetify Components are interactive building blocks for creating user interfaces.
+
+<entry />
+
+<v-row>
+
+<components-list-item name="alerts">
+
+  The alert component is used to convey important information to the user.
+
+</components-list-item>
+
+<components-list-item name="app-bars">
+
+  The app bar is used for top level navigation items and current page actions.
+
+</components-list-item>
+
+<components-list-item name="badges">
+
+  Badges superscript or subscript an avatar-like icon or text onto content.
+
+</components-list-item>
+
+<components-list-item name="breadcrumbs">
+
+  Breadcrumbs are navigational helpers for router pages.
+
+</components-list-item>
+
+<components-list-item name="buttons">
+
+  The button component allows users to take actions or make choices with a single tap.
+
+</components-list-item>
+
+</v-row>
+
+<backmatter />
diff --git a/packages/docs/src/pages/en/components/app-bars.md b/packages/docs/src/pages/en/components/app-bars.md
index 9701b49ec1f..8007c89828d 100644
--- a/packages/docs/src/pages/en/components/app-bars.md
+++ b/packages/docs/src/pages/en/components/app-bars.md
@@ -26,17 +26,24 @@ The `v-app-bar` component is used for application-wide actions and information.
 
 <api-inline />
 
-## Sub-components
+## Anatomy
 
-### v-app-bar-nav-icon
+The recommended placement of elements inside of `v-app-bar` is:
 
-A styled icon button component created specifically for use with [v-toolbar](/components/toolbars) and `v-app-bar`. Typically seen on the left side of a toolbar as a hamburger menu, it is often used to control the state of a navigation drawer. The `default` slot can be used to customize the icon and function of this component. This is a **functional** component.
+* Place `v-app-bar-nav-icon` or other navigation items on the far left
+* Place `v-app-bar-title` to the right of navigation
+* Place contextual actions to the right of navigation
+* Place overflow actions to the far right
 
-### v-app-bar-title
+**[FUTURE IMG LOCATION]**
 
-A modified [v-toolbar-title](/components/toolbars/) specifically for use with the `shrink-on-scroll` prop. `v-toolbar-title` will be truncated on small screens (see [issue #12514](https://github.com/vuetifyjs/vuetify/issues/12514)) but this component uses absolute positioning to be fully visible when expanded. We don't recommend using `v-app-bar-title` without `shrink-on-scroll` as it does add a resize watcher and some extra calculations.
-
-## Caveats
+| Element / Area | Description |
+| ------------ | ---------- |
+| 1. Container | The App Bar container holds all `v-app-bar` components |
+| 2. App Bar Icon (optional) | A styled icon button component created that is often used to control the state of a `v-navigation drawer` |
+| 3. Title (optional) | A heading with increased **font-size** |
+| 4. Action items (optional) | Used to highlight certain actions not in the overflow menu |
+| 5. Overflow menu (optional) | Place less often used action items into a hidden menu |
 
 <alert type="warning">
 
@@ -82,7 +89,7 @@ The background image of a `v-app-bar` can fade on scroll. Use the `fade-img-on-s
 
 `v-app-bar` can contain background images. You can set source via the `src` prop. If you need to customize the `v-img` properties, the app-bar provides you with an **img** slot.
 
-<example file="v-app-bar/prop-img" />
+<example file="v-app-bar/prop-image" />
 
 <!-- #### Inverted scrolling
 
@@ -102,7 +109,7 @@ An `v-app-bar` with the `prominent` prop can opt to have its height shrunk as th
 
 <example file="v-app-bar/prop-scroll-threshold" /> -->
 
-### Misc
+<!-- ### Misc
 
 #### Menu
 
@@ -114,6 +121,6 @@ You can easily extend the functionality of app bar by adding `VMenu` there. Clic
 
 Using the functional component `v-app-bar-nav-icon` you can toggle the state of other components such as a [v-navigation-drawer](/components/navigation-drawers).
 
-<example file="v-app-bar/misc-app-bar-nav" />
+<example file="v-app-bar/misc-app-bar-nav" />-->
 
 <backmatter />
diff --git a/packages/docs/src/pages/en/components/autocompletes.md b/packages/docs/src/pages/en/components/autocompletes.md
index bc9e4ab4006..d7d1ca60fa4 100644
--- a/packages/docs/src/pages/en/components/autocompletes.md
+++ b/packages/docs/src/pages/en/components/autocompletes.md
@@ -19,7 +19,7 @@ The `v-autocomplete` component offers simple and flexible type-ahead functionali
 
 The autocomplete component extends `v-select` and adds the ability to filter items.
 
-<usage name="v-autocomplete" />
+<!-- <usage name="v-autocomplete" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/avatars.md b/packages/docs/src/pages/en/components/avatars.md
index 903e36df76a..07b1577e7de 100644
--- a/packages/docs/src/pages/en/components/avatars.md
+++ b/packages/docs/src/pages/en/components/avatars.md
@@ -19,7 +19,7 @@ The `v-avatar` component is typically used to display circular user profile pict
 
 Avatars in their simplest form display content within a circular container.
 
-<usage name="v-avatar" />
+<!-- <usage name="v-avatar" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/badges.md b/packages/docs/src/pages/en/components/badges.md
index 4b07a4687ae..319e0dec5fd 100644
--- a/packages/docs/src/pages/en/components/badges.md
+++ b/packages/docs/src/pages/en/components/badges.md
@@ -16,23 +16,39 @@ The `v-badge` component superscripts or subscripts an avatar-like icon or text o
 
 <entry />
 
-<!--
-
 ## Usage
 
 Badges in their simplest form display to the upper right of the content that it wraps and requires the badge slot.
 
 <usage name="v-badge" />
 
--->
-
 ## API
 
 <api-inline />
 
 ## Examples
 
-### Misc
+### Props
+
+#### Dot
+
+The **dot** property removes badge's content and reduces its overall size. This is useful when you need to draw a user's attention subtlely.
+
+<example file="v-badge/prop-dot" />
+
+#### Inline
+
+Inline badges can be placed anywhere with content and can render without a *default* slot.
+
+<example file="v-badge/prop-inline" />
+
+#### Content
+
+For simple text, use the **content** property to display a *value* on the badge.
+
+<example file="v-badge/prop-content" />
+
+<!-- ### Misc
 
 #### Customization options
 
@@ -56,6 +72,6 @@ You can do many things with visibility control, for example, show badge on hover
 
 Badges help convey information to the user in a variety of ways.
 
-<example file="v-badge/misc-tabs" />
+<example file="v-badge/misc-tabs" /> -->
 
 <backmatter />
diff --git a/packages/docs/src/pages/en/components/banners.md b/packages/docs/src/pages/en/components/banners.md
index 8e463203437..bd91755783d 100644
--- a/packages/docs/src/pages/en/components/banners.md
+++ b/packages/docs/src/pages/en/components/banners.md
@@ -20,7 +20,7 @@ The `v-banner` component is used as a middle-interrupting message to the user wi
 
 Banners can contain one to two lines of text, to which actions and icons can be added.
 
-<usage name="v-banner" />
+<!-- <usage name="v-banner" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/breadcrumbs.md b/packages/docs/src/pages/en/components/breadcrumbs.md
index aae2692e378..40d6809ca05 100644
--- a/packages/docs/src/pages/en/components/breadcrumbs.md
+++ b/packages/docs/src/pages/en/components/breadcrumbs.md
@@ -20,7 +20,7 @@ The `v-breadcrumbs` component is a navigational helper for pages. It can accept
 
 By default, breadcrumbs use a text divider. This can be any string.
 
-<usage name="v-breadcrumbs" />
+<!-- <usage name="v-breadcrumbs" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/button-groups.md b/packages/docs/src/pages/en/components/button-groups.md
index 27d3089bf3b..1696c58533f 100644
--- a/packages/docs/src/pages/en/components/button-groups.md
+++ b/packages/docs/src/pages/en/components/button-groups.md
@@ -1,4 +1,5 @@
 ---
+nav: Button groups
 meta:
   title: Button group component
   description: The button group component allows you to combine a series of selectable buttons together in a single-line.
diff --git a/packages/docs/src/pages/en/components/buttons.md b/packages/docs/src/pages/en/components/buttons.md
index 83cde46a63b..951902ed607 100644
--- a/packages/docs/src/pages/en/components/buttons.md
+++ b/packages/docs/src/pages/en/components/buttons.md
@@ -16,15 +16,11 @@ The `v-btn` component replaces the standard html button with a material design t
 
 <entry />
 
-<!--
-
 ## Usage
 
 Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
 
-<usage name="v-btn" />
-
--->
+<!-- <usage name="v-btn" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/cards.md b/packages/docs/src/pages/en/components/cards.md
index 55a7fac4a9a..2a59d5c4d03 100644
--- a/packages/docs/src/pages/en/components/cards.md
+++ b/packages/docs/src/pages/en/components/cards.md
@@ -18,7 +18,7 @@ related:
 
 ## Usage
 
-<usage name="v-card" />
+<!-- <usage name="v-card" /> -->
 
 ## API
 
@@ -66,7 +66,7 @@ The following snippet shows the general structure of a card:
 
 ### v-card-actions
 
-The container used for placing **actions** for a card, such as [v-btn](/components/buttons) or [v-menu](/components/menus). Also applies *special margin* to buttons so that they properly line up with other card content areas.
+The container used for placing **actions** for a card, such as [v-btn](/components/buttons) or [v-menu](/components/menus). Also applies _special margin_ to buttons so that they properly line up with other card content areas.
 
 ### v-card-avatar
 
diff --git a/packages/docs/src/pages/en/components/chips.md b/packages/docs/src/pages/en/components/chips.md
index 15f7eeec296..c76f169fa75 100644
--- a/packages/docs/src/pages/en/components/chips.md
+++ b/packages/docs/src/pages/en/components/chips.md
@@ -20,7 +20,7 @@ The `v-chip` component is used to convey small pieces of information. Using the
 
 Chips come in the following variations: closeable, filter, outlined, pill. The default slot of `v-chip` will also accept avatars and icons alongside text.
 
-<usage name="v-chip" />
+<!-- <usage name="v-chip" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/combobox.md b/packages/docs/src/pages/en/components/combobox.md
index 4a286081515..5f85a7125de 100644
--- a/packages/docs/src/pages/en/components/combobox.md
+++ b/packages/docs/src/pages/en/components/combobox.md
@@ -19,7 +19,7 @@ The `v-combobox` component is a [v-autocomplete](/components/autocompletes) that
 
 With Combobox, you can allow a user to create new values that may not be present in a provided items list.
 
-<usage name="v-combobox" />
+<!-- <usage name="v-combobox" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/dividers.md b/packages/docs/src/pages/en/components/dividers.md
index 514d1b32994..b8496276763 100644
--- a/packages/docs/src/pages/en/components/dividers.md
+++ b/packages/docs/src/pages/en/components/dividers.md
@@ -20,7 +20,7 @@ The `v-divider` component is used to separate sections of lists or layouts.
 
 Dividers in their simplest form display a horizontal line.
 
-<usage name="v-divider" />
+<!-- <usage name="v-divider" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/expansion-panels.md b/packages/docs/src/pages/en/components/expansion-panels.md
index 8385a8ae042..a4ef2c7b905 100644
--- a/packages/docs/src/pages/en/components/expansion-panels.md
+++ b/packages/docs/src/pages/en/components/expansion-panels.md
@@ -1,4 +1,5 @@
 ---
+nav: Expansion panels
 meta:
   title: Expansion panel component
   description: The expansion panel component is a lightweight container that hides information behind expandable and contractable containers.
diff --git a/packages/docs/src/pages/en/components/file-inputs.md b/packages/docs/src/pages/en/components/file-inputs.md
index 18358cd580d..e4c6fbbc822 100644
--- a/packages/docs/src/pages/en/components/file-inputs.md
+++ b/packages/docs/src/pages/en/components/file-inputs.md
@@ -1,4 +1,5 @@
 ---
+nav: File inputs
 meta:
   title: File input component
   description: The file input component is a specialized input that provides a clean interface for selecting files, showing detailed selection information and upload progress.
diff --git a/packages/docs/src/pages/en/components/forms.md b/packages/docs/src/pages/en/components/forms.md
index b1caf942a57..31f4feca711 100644
--- a/packages/docs/src/pages/en/components/forms.md
+++ b/packages/docs/src/pages/en/components/forms.md
@@ -1,4 +1,5 @@
 ---
+nav: Forms
 meta:
   title: Form component
   description: The form component provides a wrapper that makes it easy to process and control validation states of input components.
diff --git a/packages/docs/src/pages/en/components/hover.md b/packages/docs/src/pages/en/components/hover.md
index 6eea84bea14..70b281ec826 100644
--- a/packages/docs/src/pages/en/components/hover.md
+++ b/packages/docs/src/pages/en/components/hover.md
@@ -20,7 +20,7 @@ The `v-hover` component provides a simple interface for handling hover states fo
 
  `v-hover` is a renderless component that uses the default slot to provide scoped access to its internal model; as well as mouse event listeners to modify it. To expliclty control the internal state, use the **model-value** property.
 
-<usage name="v-hover" />
+<!-- <usage name="v-hover" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/icons.md b/packages/docs/src/pages/en/components/icons.md
index 4f70601fcb8..6b8540df1dc 100644
--- a/packages/docs/src/pages/en/components/icons.md
+++ b/packages/docs/src/pages/en/components/icons.md
@@ -23,7 +23,7 @@ The `v-icon` component provides a large set of glyphs to provide context to vari
 
 Icons come in two themes (light and dark), and five different sizes (x-small, small, medium (default), large, and x-large).
 
-<usage name="v-icon" />
+<!-- <usage name="v-icon" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/images.md b/packages/docs/src/pages/en/components/images.md
index 7ec451d2a6f..049b11f4017 100644
--- a/packages/docs/src/pages/en/components/images.md
+++ b/packages/docs/src/pages/en/components/images.md
@@ -20,7 +20,7 @@ The `v-img` component is packed with features to support rich media. Combined wi
 
 `v-img` component is used to display a responsive image with lazy-load and placeholder.
 
-<usage name="v-img" />
+<!-- <usage name="v-img" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/inputs.md b/packages/docs/src/pages/en/components/inputs.md
index 4c4ca724b00..ed6c298ee1c 100644
--- a/packages/docs/src/pages/en/components/inputs.md
+++ b/packages/docs/src/pages/en/components/inputs.md
@@ -1,4 +1,5 @@
 ---
+nav: Custom inputs
 meta:
   title: Input component
   description: The input component is the baseline functionality for all of Vuetify's form components and provides a baseline for custom implementations.
diff --git a/packages/docs/src/pages/en/components/menus.md b/packages/docs/src/pages/en/components/menus.md
index 90a9053a90f..456c7983de2 100644
--- a/packages/docs/src/pages/en/components/menus.md
+++ b/packages/docs/src/pages/en/components/menus.md
@@ -1,4 +1,5 @@
 ---
+nav: Menus
 meta:
   title: Menu component
   description: The menu component exposes a dropdown of potential selections or actions that the user can make.
diff --git a/packages/docs/src/pages/en/components/progress-circular.md b/packages/docs/src/pages/en/components/progress-circular.md
index d844bcaded8..3b1769b1a9a 100644
--- a/packages/docs/src/pages/en/components/progress-circular.md
+++ b/packages/docs/src/pages/en/components/progress-circular.md
@@ -1,4 +1,5 @@
 ---
+nav: Progress circular
 meta:
   title: Progress circular component
   description: The progress circular component is useful for displaying a visual indicator of numerical data in a circle.
diff --git a/packages/docs/src/pages/en/components/progress-linear.md b/packages/docs/src/pages/en/components/progress-linear.md
index ab275ce8fe7..dce8448e41d 100644
--- a/packages/docs/src/pages/en/components/progress-linear.md
+++ b/packages/docs/src/pages/en/components/progress-linear.md
@@ -1,4 +1,5 @@
 ---
+nav: Progress linear
 meta:
   title: Progress linear component
   description: The progress-linear component is useful for displaying a visual indicator of numerical data in a straight line.
diff --git a/packages/docs/src/pages/en/components/radio-buttons.md b/packages/docs/src/pages/en/components/radio-buttons.md
index 3674e679c47..5477aed7139 100644
--- a/packages/docs/src/pages/en/components/radio-buttons.md
+++ b/packages/docs/src/pages/en/components/radio-buttons.md
@@ -1,4 +1,5 @@
 ---
+nav: Radio buttons
 meta:
   title: Radio button component
   description: A radio button allows the user to choose only one of a set of options using a radio group.
diff --git a/packages/docs/src/pages/en/components/ratings.md b/packages/docs/src/pages/en/components/ratings.md
index 7115a67888c..c9155d5b649 100644
--- a/packages/docs/src/pages/en/components/ratings.md
+++ b/packages/docs/src/pages/en/components/ratings.md
@@ -16,13 +16,11 @@ The `v-rating` component is a specialized but important piece in building user w
 
 <entry />
 
-<!--
 ## Usage
 
 The `v-rating` component provides a simple interface for gathering user feedback.
 
-<usage name="v-rating" />
--->
+<!-- <usage name="v-rating" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/sheets.md b/packages/docs/src/pages/en/components/sheets.md
index 519733bacf4..b8a9288f79a 100644
--- a/packages/docs/src/pages/en/components/sheets.md
+++ b/packages/docs/src/pages/en/components/sheets.md
@@ -16,11 +16,11 @@ The `v-sheet` component is the baseline for numerous components such as [v-card]
 
 <entry />
 
-<!-- ## Usage
+## Usage
 
 The `v-sheet` component is a transformable piece of _paper_ that provides a basic foundation for Vuetify features. For example, properties such as **rounded** and **shaped** modify the `border-radius` property while **elevation** increase / decreases `box-shadow`.
 
-<usage name="v-sheet" /> -->
+<!-- <usage name="v-sheet" /> -->
 
 ## API
 
@@ -32,13 +32,13 @@ The `v-sheet` component is a transformable piece of _paper_ that provides a basi
 
 #### Elevation
 
-The `v-sheet` component accepts a custom elevation between **0 and 24** (0 is default). The *elevation* property modifies the `box-shadow` property. More information is located in the MD [Elevation Design Specification](https://material.io/design/environment/elevation.html).
+The `v-sheet` component accepts a custom elevation between **0 and 24** (0 is default). The _elevation_ property modifies the `box-shadow` property. More information is located in the MD [Elevation Design Specification](https://material.io/design/environment/elevation.html).
 
 <example file="v-sheet/prop-elevation" />
 
 #### Rounded
 
-The **rounded** prop adds a default `border-radius` of _4px_. By default, the `v-sheet` component has no border-radius. Customize the radius's size and location by providing a custom rounded value; e.g. a rounded value of *tr-xl l-pill* equates to *rounded-tr-xl rounded-l-pill*. Additional information is on the [Border Radius](/styles/border-radius/) page.
+The **rounded** prop adds a default `border-radius` of _4px_. By default, the `v-sheet` component has no border-radius. Customize the radius's size and location by providing a custom rounded value; e.g. a rounded value of _tr-xl l-pill_ equates to _rounded-tr-xl rounded-l-pill_. Additional information is on the [Border Radius](/styles/border-radius/) page.
 
 <example file="v-sheet/prop-rounded" />
 
@@ -46,7 +46,7 @@ The **rounded** prop adds a default `border-radius` of _4px_. By default, the `v
 
 Sheets and components based on them can have different sizes and colors.
 
-The `v-sheet` component accepts custom [Material Design Color](/styles/colors/) values such as `warning`, `amber darken-3`, and `deep-purple accent`—as well as *rgb, rgba, and hexadecimal* values.
+The `v-sheet` component accepts custom [Material Design Color](/styles/colors/) values such as `warning`, `amber darken-3`, and `deep-purple accent`—as well as _rgb, rgba, and hexadecimal_ values.
 
 <example file="v-sheet/prop-color" />
 
diff --git a/packages/docs/src/pages/en/components/sliders.md b/packages/docs/src/pages/en/components/sliders.md
index e0fa85cd02d..43d426fab6b 100644
--- a/packages/docs/src/pages/en/components/sliders.md
+++ b/packages/docs/src/pages/en/components/sliders.md
@@ -20,7 +20,7 @@ The `v-slider` component can be used as an alternative visualization instead of
 
 Sliders reflect a range of values along a track, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
 
-<usage name="v-slider" />
+<!-- <usage name="v-slider" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/components/switches.md b/packages/docs/src/pages/en/components/switches.md
index df631218eee..63f53bdd431 100644
--- a/packages/docs/src/pages/en/components/switches.md
+++ b/packages/docs/src/pages/en/components/switches.md
@@ -1,4 +1,5 @@
 ---
+nav: Switches
 meta:
   title: Switch component
   description: The switch component is a simple and eloquent toggle used to select between two values.
diff --git a/packages/docs/src/pages/en/components/text-fields.md b/packages/docs/src/pages/en/components/text-fields.md
index 0b820e22663..8ef4437c1f3 100644
--- a/packages/docs/src/pages/en/components/text-fields.md
+++ b/packages/docs/src/pages/en/components/text-fields.md
@@ -1,4 +1,5 @@
 ---
+nav: Text fields
 meta:
   title: Text field component
   description: The text field component accepts textual input from users.
diff --git a/packages/docs/src/pages/en/components/textareas.md b/packages/docs/src/pages/en/components/textareas.md
index 06c42456c79..b5dc6f51849 100644
--- a/packages/docs/src/pages/en/components/textareas.md
+++ b/packages/docs/src/pages/en/components/textareas.md
@@ -1,4 +1,5 @@
 ---
+nav: Textareas
 meta:
   title: Textarea component
   description: The textarea component is a text field that accepts lengthy textual input from users.
diff --git a/packages/docs/src/pages/en/components/toolbars.md b/packages/docs/src/pages/en/components/toolbars.md
index 3b93cb0fd2c..ca50e9a5930 100644
--- a/packages/docs/src/pages/en/components/toolbars.md
+++ b/packages/docs/src/pages/en/components/toolbars.md
@@ -19,7 +19,7 @@ The `v-toolbar` component is pivotal to any graphical user interface (GUI), as i
 
 A toolbar is a flexible container that can be used in a number of ways. By default, the toolbar is 64px high on desktop and 56px high on mobile. There are a number of helper components available to use with the toolbar. The `v-toolbar-title` is used for displaying a title and `v-toolbar-items` allow [v-btn](/components/buttons) to extend full height.
 
-<usage name="v-toolbar" />
+<!-- <usage name="v-toolbar" /> -->
 
 ## API
 
diff --git a/packages/docs/src/pages/en/directives/resize.md b/packages/docs/src/pages/en/directives/resize.md
index 3e5fd8b494f..6bba063061e 100644
--- a/packages/docs/src/pages/en/directives/resize.md
+++ b/packages/docs/src/pages/en/directives/resize.md
@@ -1,4 +1,5 @@
 ---
+nav: Resize
 meta:
   title: Resize directive
   description: The resize directive provides the ability to conditionally invoke functions when the screen is resized.
diff --git a/packages/docs/src/pages/en/directives/ripple.md b/packages/docs/src/pages/en/directives/ripple.md
index ab59d8053ff..b367a7b7aef 100644
--- a/packages/docs/src/pages/en/directives/ripple.md
+++ b/packages/docs/src/pages/en/directives/ripple.md
@@ -1,4 +1,5 @@
 ---
+nav: Ripple
 meta:
   title: Ripple directive
   description: The ripple directive adds touch and click feedback to any element in the form of a water ripple.
diff --git a/packages/docs/src/pages/en/directives/scroll.md b/packages/docs/src/pages/en/directives/scroll.md
index 0dc34f820b1..3ed3aaf72e4 100644
--- a/packages/docs/src/pages/en/directives/scroll.md
+++ b/packages/docs/src/pages/en/directives/scroll.md
@@ -1,4 +1,5 @@
 ---
+nav: Scroll
 meta:
   title: Scroll directive
   description: The scroll directive gives you the ability to conditionally invoke methods when the screen or an element are scrolled.
diff --git a/packages/docs/src/pages/en/directives/touch.md b/packages/docs/src/pages/en/directives/touch.md
index 8f276091318..bb7e092d6b6 100644
--- a/packages/docs/src/pages/en/directives/touch.md
+++ b/packages/docs/src/pages/en/directives/touch.md
@@ -1,4 +1,5 @@
 ---
+nav: Touch
 meta:
   title: Touch directive
   description: The touch directive provides an interface for responding to various user touch actions.
diff --git a/packages/docs/src/plugins/global-components.ts b/packages/docs/src/plugins/global-components.ts
index b7143b32383..5f9a6648049 100644
--- a/packages/docs/src/plugins/global-components.ts
+++ b/packages/docs/src/plugins/global-components.ts
@@ -26,6 +26,8 @@ import PageComponent from '@/components/PageComponent.vue'
 import Promoted from '@/components/ads/Promoted.vue'
 import Random from '@/components/ads/Random.vue'
 import Usage from '@/components/examples/Usage.vue'
+import UsageExample from '@/components/examples/UsageExample.vue'
+import VueFile from '@/components/examples/VueFile.vue'
 import Vuetify from '@/components/ads/Vuetify.vue'
 
 import type { GlobalComponentsPlugin } from '@/types'
@@ -61,5 +63,7 @@ export const useGlobalComponents: GlobalComponentsPlugin = ({ app }) => {
   app.component('Promoted', Promoted)
   app.component('Random', Random)
   app.component('Usage', Usage)
+  app.component('UsageExample', UsageExample)
+  app.component('VueFile', VueFile)
   app.component('Vuetify', Vuetify)
 }
diff --git a/packages/docs/src/plugins/vuetify.ts b/packages/docs/src/plugins/vuetify.ts
index e1f5ba98956..9f8b46a1626 100644
--- a/packages/docs/src/plugins/vuetify.ts
+++ b/packages/docs/src/plugins/vuetify.ts
@@ -15,7 +15,6 @@ export const useVuetify: VuetifyPlugin = ({ app }) => {
         light: {
           colors: {
             primary: '#1867c0',
-            'on-background': '#333333',
             secondary: '#5CBBF6',
             tertiary: '#E57373',
             accent: '#005CAF',
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index 7c19d5d88e8..d71c77fafe1 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.0.0-alpha.12",
+  "version": "3.0.0-alpha.13",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"
@@ -151,7 +151,7 @@
     "vue-router": "^4.0.12"
   },
   "peerDependencies": {
-    "@formatjs/intl": "^1.0.0",
+    "@formatjs/intl": "^1.0.0 || ^2.0.0",
     "vue": "^3.2.19",
     "vue-i18n": "^9.0.0"
   },
diff --git a/packages/vuetify/src/components/VAlert/VAlert.sass b/packages/vuetify/src/components/VAlert/VAlert.sass
index 7431e1bd7fe..4eac7fc4250 100644
--- a/packages/vuetify/src/components/VAlert/VAlert.sass
+++ b/packages/vuetify/src/components/VAlert/VAlert.sass
@@ -4,6 +4,7 @@
 
 .v-alert
   display: grid
+  flex: 1 1
   grid-template-areas: "prepend content append close"
   grid-template-columns: max-content auto max-content min-content
   position: relative
@@ -13,7 +14,6 @@
 
   @include tools.position($alert-positions)
   @include tools.rounded($alert-border-radius)
-  @include tools.theme($alert-theme...)
   @include tools.variant($alert-variants...)
 
   &.v-alert--border
diff --git a/packages/vuetify/src/components/VAlert/VAlert.tsx b/packages/vuetify/src/components/VAlert/VAlert.tsx
index a05a3f8a18b..370aedb1e8a 100644
--- a/packages/vuetify/src/components/VAlert/VAlert.tsx
+++ b/packages/vuetify/src/components/VAlert/VAlert.tsx
@@ -74,7 +74,10 @@ export const VAlert = defineComponent({
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps(),
-    ...makeVariantProps({ variant: 'contained-flat' } as const),
+    ...makeVariantProps({
+      color: 'surface-variant',
+      variant: 'contained-flat',
+    } as const),
   },
 
   emits: {
diff --git a/packages/vuetify/src/components/VAlert/_variables.scss b/packages/vuetify/src/components/VAlert/_variables.scss
index cf1e2199530..d7a0a0c2d53 100644
--- a/packages/vuetify/src/components/VAlert/_variables.scss
+++ b/packages/vuetify/src/components/VAlert/_variables.scss
@@ -8,7 +8,7 @@ $alert-border-radius: settings.$border-radius-root !default;
 $alert-border-style: settings.$border-style-root !default;
 $alert-border-thin-width: 8px !default;
 $alert-border-width: 0 !default;
-$alert-border-opacity: 1 !default;
+$alert-border-opacity: .38 !default;
 $alert-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $alert-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
 $alert-elevation: 1 !default;
@@ -36,11 +36,6 @@ $alert-border: (
   $alert-border-thin-width
 ) !default;
 
-$alert-theme: (
-  $alert-background,
-  $alert-color
-) !default;
-
 $alert-variants: (
   $alert-background,
   $alert-color,
diff --git a/packages/vuetify/src/components/VApp/VApp.sass b/packages/vuetify/src/components/VApp/VApp.sass
index a131f03281d..005247886f0 100644
--- a/packages/vuetify/src/components/VApp/VApp.sass
+++ b/packages/vuetify/src/components/VApp/VApp.sass
@@ -1,7 +1,7 @@
 .v-application
   display: flex
   background: rgb(var(--v-theme-background))
-  color: rgb(var(--v-theme-on-background))
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity))
 
   a
     cursor: pointer
diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.sass b/packages/vuetify/src/components/VAppBar/VAppBar.sass
index 6a810b6b215..8ea7fc5acd2 100644
--- a/packages/vuetify/src/components/VAppBar/VAppBar.sass
+++ b/packages/vuetify/src/components/VAppBar/VAppBar.sass
@@ -3,90 +3,4 @@
 @use './variables' as *
 
 .v-app-bar
-  align-items: flex-start
   display: flex
-  flex-direction: column
-  justify-content: space-between
-  max-width: 100%
-  overflow: hidden
-  padding-left: $app-bar-padding-start
-  padding-right: calc(#{$app-bar-padding-end} + var(--v-scrollbar-offset))
-  position: absolute
-  transition: $app-bar-transition
-  transition-property: height, transform
-
-  // must be above border mixin for cascade
-  &--is-active
-    @include tools.elevation($app-bar-elevation)
-
-  @include tools.border($app-bar-border...)
-  @include tools.rounded($app-bar-border-radius)
-  @include tools.theme($app-bar-theme...)
-
-  &--border
-    &.v-app-bar--bottom
-      border-bottom-width: $app-bar-border-width
-      border-top-width: $app-bar-border-thin-width
-
-  &--collapsed
-    max-width: $app-bar-collapsed-max-width
-    overflow: hidden
-
-    @include tools.ltr()
-      border-bottom-right-radius: $app-bar-collapsed-border-radius
-
-    @include tools.rtl()
-      border-bottom-left-radius: $app-bar-collapsed-border-radius
-
-  &--flat
-    @include tools.elevation($app-bar-flat-elevation)
-
-  &--floating
-    display: inline-flex
-
-  &--rounded
-    @include tools.rounded($app-bar-rounded-border-radius)
-
-.v-app-bar__content
-  align-items: center
-  display: flex
-  flex: 0 0 auto
-  transition: inherit
-  width: 100%
-
-  .v-app-bar--density-default &
-    padding-bottom: $app-bar-density-default-padding
-    padding-top: $app-bar-density-default-padding
-
-  .v-app-bar--density-comfortable &
-    padding-bottom: $app-bar-density-comfortable-padding
-    padding-top: $app-bar-density-comfortable-padding
-
-  .v-app-bar--density-compact &
-    padding-bottom: $app-bar-density-compact-padding
-    padding-top: $app-bar-density-compact-padding
-
-.v-app-bar__extension
-  align-items: center
-  display: flex
-  flex: 0 0 auto
-  transition: inherit
-  width: 100%
-
-.v-app-bar__image
-  height: 100%
-  left: 0
-  position: absolute
-  top: 0
-  width: 100%
-  z-index: -1
-  display: flex
-
-.v-app-bar__append
-  display: flex
-  flex: 0 1 auto
-  margin-inline-start: auto
-
-.v-app-bar__prepend
-  display: flex
-  flex: 0 1 auto
diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.tsx b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
index 9d7c5241292..638538a3b8c 100644
--- a/packages/vuetify/src/components/VAppBar/VAppBar.tsx
+++ b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
@@ -2,21 +2,15 @@
 import './VAppBar.sass'
 
 // Components
-import { VImg } from '@/components/VImg'
+import { filterToolbarProps, makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'
 
 // Composables
-import { makeBorderProps, useBorder } from '@/composables/border'
-import { makeDensityProps, useDensity } from '@/composables/density'
-import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
-import { makeRoundedProps, useRounded } from '@/composables/rounded'
-import { makeTagProps } from '@/composables/tag'
-import { useBackgroundColor } from '@/composables/color'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, toRef } from 'vue'
-import { convertToUnit, defineComponent } from '@/util'
+import { computed, ref, toRef } from 'vue'
+import { defineComponent } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -32,40 +26,18 @@ export const VAppBar = defineComponent({
     // elevateOnScroll: Boolean
     // shrinkOnScroll: Boolean
     // fadeImageOnScroll: Boolean
-    collapse: Boolean,
-    color: String,
-    flat: Boolean,
-    height: {
-      type: [Number, String],
-      default: 64,
-    },
-    extensionHeight: {
-      type: [Number, String],
-      default: 48,
-    },
-    floating: Boolean,
-    image: String,
     modelValue: {
       type: Boolean,
       default: true,
     },
-    prominent: Boolean,
-    prominentHeight: {
-      type: [Number, String],
-      default: 128,
-    },
     position: {
       type: String as PropType<'top' | 'bottom'>,
       default: 'top',
       validator: (value: any) => ['top', 'bottom'].includes(value),
     },
 
-    ...makeBorderProps(),
-    ...makeDensityProps(),
-    ...makeElevationProps(),
-    ...makeRoundedProps(),
+    ...makeVToolbarProps(),
     ...makeLayoutItemProps(),
-    ...makeTagProps({ tag: 'header' }),
   },
 
   emits: {
@@ -73,22 +45,9 @@ export const VAppBar = defineComponent({
   },
 
   setup (props, { slots }) {
-    const { borderClasses } = useBorder(props)
-    const { densityClasses } = useDensity(props)
-    const { elevationClasses } = useElevation(props)
-    const { roundedClasses } = useRounded(props)
-    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
-    const isExtended = !!slots.extension
-    const contentHeight = computed(() => (
-      Number(props.prominent ? props.prominentHeight : props.height) -
-      (props.density === 'comfortable' ? 8 : 0) -
-      (props.density === 'compact' ? 16 : 0)
-    ))
-    const height = computed(() => (
-      contentHeight.value +
-      Number(isExtended ? props.extensionHeight : 0)
-    ))
-    const isActive = useProxiedModel(props, 'modelValue', props.modelValue)
+    const vToolbarRef = ref()
+    const isActive = useProxiedModel(props, 'modelValue')
+    const height = computed(() => vToolbarRef.value?.contentHeight)
     const { layoutItemStyles } = useLayoutItem({
       id: props.name,
       priority: computed(() => parseInt(props.priority, 10)),
@@ -100,68 +59,21 @@ export const VAppBar = defineComponent({
     })
 
     return () => {
-      const hasImage = !!(slots.image || props.image)
+      const [toolbarProps] = filterToolbarProps(props)
 
       return (
-        <props.tag
+        <VToolbar
+          ref={ vToolbarRef }
           class={[
             'v-app-bar',
             {
               'v-app-bar--bottom': props.position === 'bottom',
-              'v-app-bar--collapsed': props.collapse,
-              'v-app-bar--flat': props.flat,
-              'v-app-bar--floating': props.floating,
-              'v-app-bar--is-active': isActive.value,
-              'v-app-bar--prominent': props.prominent,
             },
-            backgroundColorClasses.value,
-            borderClasses.value,
-            densityClasses.value,
-            elevationClasses.value,
-            roundedClasses.value,
-          ]}
-          style={[
-            backgroundColorStyles.value,
-            layoutItemStyles.value,
           ]}
-        >
-          { hasImage && (
-            <div class="v-app-bar__image">
-              { slots.image
-                ? slots.img?.({ src: props.image })
-                : (<VImg src={ props.image } cover />)
-              }
-            </div>
-          ) }
-
-          <div
-            class="v-app-bar__content"
-            style={{ height: convertToUnit(contentHeight.value) }}
-          >
-            { slots.prepend && (
-              <div class="v-app-bar__prepend">
-                { slots.prepend() }
-              </div>
-            ) }
-
-            { slots.default?.() }
-
-            { slots.append && (
-              <div class="v-app-bar__append">
-                { slots.append() }
-              </div>
-            ) }
-          </div>
-
-          { isExtended && (
-            <div
-              class="v-app-bar__extension"
-              style={{ height: convertToUnit(props.extensionHeight) }}
-            >
-              { slots.extension?.() }
-            </div>
-          ) }
-        </props.tag>
+          style={ layoutItemStyles.value }
+          { ...toolbarProps }
+          v-slots={ slots }
+        />
       )
     }
   },
diff --git a/packages/vuetify/src/components/VAppBar/VAppBarTitle.sass b/packages/vuetify/src/components/VAppBar/VAppBarTitle.sass
deleted file mode 100644
index 60fda11e714..00000000000
--- a/packages/vuetify/src/components/VAppBar/VAppBarTitle.sass
+++ /dev/null
@@ -1,10 +0,0 @@
-@use './variables' as *
-
-.v-app-bar-title
-  font-size: $app-bar-title-font-size
-  padding: $app-bar-title-padding
-
-.v-app-bar-title__placeholder
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
diff --git a/packages/vuetify/src/components/VAppBar/VAppBarTitle.tsx b/packages/vuetify/src/components/VAppBar/VAppBarTitle.tsx
index c9e9c44af96..2dc25805edb 100644
--- a/packages/vuetify/src/components/VAppBar/VAppBarTitle.tsx
+++ b/packages/vuetify/src/components/VAppBar/VAppBarTitle.tsx
@@ -1,28 +1,20 @@
-// Styles
-import './VAppBarTitle.sass'
-
 // Composables
-import { makeTagProps } from '@/composables/tag'
+import { VToolbarTitle } from '@/components/VToolbar'
 
 // Utilities
 import { defineComponent } from '@/util'
 
 export const VAppBarTitle = defineComponent({
-  name: 'VAppBarTitle',
+  ...VToolbarTitle,
 
-  props: {
-    ...makeTagProps({ tag: 'header' }),
-  },
+  name: 'VAppBarTitle',
 
-  setup (props, { slots }) {
+  setup (_, { slots }) {
     return () => (
-      <props.tag class="v-app-bar-title">
-        { slots.default && (
-          <div class="v-app-bar-title__placeholder">
-            { slots.default() }
-          </div>
-        ) }
-      </props.tag>
+      <VToolbarTitle
+        class="v-app-bar-title"
+        v-slots={ slots }
+      />
     )
   },
 })
diff --git a/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx b/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx
index 4f23e382b36..d1d517fcf8c 100644
--- a/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx
+++ b/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx
@@ -23,6 +23,10 @@ describe('VAppBar', () => {
 
     cy.get('.v-app-bar').should('have.css', 'height', '64px')
 
+    cy.vue().then(wrapper => wrapper.setProps({ density: 'prominent' }))
+
+    cy.get('.v-app-bar').should('have.css', 'height', '128px')
+
     cy.vue().then(wrapper => wrapper.setProps({ density: 'comfortable' }))
 
     cy.get('.v-app-bar').should('have.css', 'height', '56px')
@@ -31,18 +35,4 @@ describe('VAppBar', () => {
 
     cy.get('.v-app-bar').should('have.css', 'height', '48px')
   })
-
-  it('should change height when using prominent', () => {
-    cy.mount(({ prominentHeight }: any) => (
-      <VLayout>
-        <VAppBar prominentHeight={ prominentHeight } prominent />
-      </VLayout>
-    ))
-
-    cy.get('.v-app-bar').should('have.css', 'height', '128px')
-
-    cy.vue().then(wrapper => wrapper.setProps({ prominentHeight: 200 }))
-
-    cy.get('.v-app-bar').should('have.css', 'height', '200px')
-  })
 })
diff --git a/packages/vuetify/src/components/VAppBar/__tests__/VAppBarNavIcon.spec.tsx b/packages/vuetify/src/components/VAppBar/__tests__/VAppBarNavIcon.spec.tsx
deleted file mode 100644
index 502cb883b72..00000000000
--- a/packages/vuetify/src/components/VAppBar/__tests__/VAppBarNavIcon.spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// Components
-import { VAppBarNavIcon } from '..'
-
-// Utilities
-import { createVuetify } from '@/framework'
-import { mount } from '@vue/test-utils'
-
-describe('VAppBarNavIcon', () => {
-  const vuetify = createVuetify()
-
-  function mountFunction (options = {}) {
-    return mount({
-      render: () => <VAppBarNavIcon />,
-    }, {
-      global: { plugins: [vuetify] },
-    })
-  }
-
-  it('should match a snapshot', () => {
-    const wrapper = mountFunction()
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-})
diff --git a/packages/vuetify/src/components/VAppBar/__tests__/VAppBarTitle.spec.tsx b/packages/vuetify/src/components/VAppBar/__tests__/VAppBarTitle.spec.tsx
deleted file mode 100644
index 0579a11e24b..00000000000
--- a/packages/vuetify/src/components/VAppBar/__tests__/VAppBarTitle.spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// Components
-import { VAppBarTitle } from '..'
-
-// Utilities
-import { createVuetify } from '@/framework'
-import { mount } from '@vue/test-utils'
-
-describe('VAppBarTitle', () => {
-  const vuetify = createVuetify()
-
-  function mountFunction (options = {}) {
-    return mount({
-      render: () => <VAppBarTitle />,
-    }, {
-      global: { plugins: [vuetify] },
-    })
-  }
-
-  it('should match a snapshot', () => {
-    const wrapper = mountFunction()
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-})
diff --git a/packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBarNavIcon.spec.tsx.snap b/packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBarNavIcon.spec.tsx.snap
deleted file mode 100644
index b44262c7408..00000000000
--- a/packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBarNavIcon.spec.tsx.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VAppBarNavIcon should match a snapshot 1`] = `
-<button type="button"
-        class="v-btn v-btn--elevated v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-contained v-app-bar-nav-icon"
->
-  <div class="v-btn__overlay">
-  </div>
-  <div class="v-btn__underlay">
-  </div>
-  <i class="mdi-menu mdi v-icon notranslate v-icon--size-default v-theme--light v-btn__icon"
-     aria-hidden="true"
-  >
-  </i>
-</button>
-`;
diff --git a/packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBarTitle.spec.tsx.snap b/packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBarTitle.spec.tsx.snap
deleted file mode 100644
index d66a60210dd..00000000000
--- a/packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBarTitle.spec.tsx.snap
+++ /dev/null
@@ -1,6 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VAppBarTitle should match a snapshot 1`] = `
-<header class="v-app-bar-title">
-</header>
-`;
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
index 814c7ac2705..a12495f81da 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
@@ -1,45 +1,77 @@
-@import './_variables.scss'
+@forward './variables'
+@use 'sass:selector'
+@use 'sass:math'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+@use '../VInput/variables' as *
 
 .v-autocomplete
-  &.v-input > .v-input__control > .v-input__slot
-    cursor: text
-
-  input
-    align-self: center
-
-  // Overwrite v-text-fields
-  // minimum-width default
-  &.v-select.v-input--is-focused
-    input
-      min-width: $autocomplete-focused-input
-
-  // Chips force input to wrap
-  // so we remove height and
-  // padding until focused
-  &:not(.v-input--is-focused).v-select--chips input
-    max-height: 0
-    padding: 0
-
-  &--is-selecting-index
-    input
-      opacity: 0
-
-  // When a single select, does not have
-  // selections padding
-  &.v-text-field--enclosed:not(.v-text-field--solo):not(.v-text-field--single-line):not(.v-text-field--outlined)
-    .v-select__slot > input
-      margin-top: $autocomplete-enclosed-input-margin-top
-
-    &.v-input--dense
-      .v-select__slot > input
-        margin-top: $autocomplete-dense-enclosed-input-margin-top
-
-  &:not(.v-input--is-disabled).v-select.v-text-field
-    input
-      pointer-events: inherit
-
-  &__content.v-menu__content
-    border-radius: 0
-
-    .v-card
-      border-radius: 0
+  .v-field
+    .v-text-field__prefix,
+    .v-text-field__suffix,
+    .v-field__input,
+    &.v-field
+      cursor: text
+
+.v-autocomplete
+  &__content
+    overflow: hidden
+
+    @include tools.elevation($autocomplete-content-elevation)
+    @include tools.rounded($autocomplete-content-border-radius)
+
+  &__search-input
+    opacity: 0
+
+  &__menu-icon
+    order: 1
+    margin-inline-start: 4px
+    transition: $autocomplete-transition
+
+  &__mask
+    background: rgb(var(--v-theme-on-surface-variant))
+
+  &__selection
+    display: inline-flex
+    margin-inline-end: 2px
+
+  &__selections
+    align-items: flex-start
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
+    display: flex
+    flex: 1 1
+
+  &--active-menu
+    .v-autocomplete__menu-icon
+      color: inherit
+      transform: rotate(180deg)
+
+  &--chips
+    .v-autocomplete__selection
+      &:first-child
+        margin-inline-start: 0
+
+  &--single
+    &.v-text-field input.v-field__input
+      position: absolute
+      left: 0
+
+    .v-field--active
+        input.v-field__input
+          transition: none
+
+    .v-field--dirty:not(.v-field--focused)
+        input.v-field__input
+          opacity: 0
+
+    .v-field--focused
+      .v-autocomplete__selections
+        opacity: 0
+
+  &--multiple
+    input.v-field__input
+      padding-inline-start: 0
+
+    .v-autocomplete__selections
+      padding-inline-end: 0
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts
deleted file mode 100644
index 434fc41861f..00000000000
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts
+++ /dev/null
@@ -1,459 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Styles
-import './VAutocomplete.sass'
-
-// Extensions
-import VSelect, { defaultMenuProps as VSelectMenuProps } from '../VSelect/VSelect'
-import VTextField from '../VTextField/VTextField'
-
-// Utilities
-import mergeData from '../../util/mergeData'
-import {
-  getObjectValueByPath,
-  getPropertyFromItem,
-  keyCodes,
-} from '../../util/helpers'
-
-// Types
-import { PropType, VNode } from 'vue'
-import { PropValidator } from 'vue/types/options'
-
-const defaultMenuProps = {
-  ...VSelectMenuProps,
-  offsetY: true,
-  offsetOverflow: true,
-  transition: false,
-}
-
-/* @vue/component */
-export default VSelect.extend({
-  name: 'v-autocomplete',
-
-  props: {
-    allowOverflow: {
-      type: Boolean,
-      default: true,
-    },
-    autoSelectFirst: {
-      type: Boolean,
-      default: false,
-    },
-    filter: {
-      type: Function,
-      default: (item: any, queryText: string, itemText: string) => {
-        return itemText.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1
-      },
-    } as PropValidator<(item: any, queryText: string, itemText: string) => boolean>,
-    hideNoData: Boolean,
-    menuProps: {
-      type: VSelect.options.props.menuProps.type,
-      default: () => defaultMenuProps,
-    },
-    noFilter: Boolean,
-    searchInput: {
-      type: String as PropType<string | null>,
-    },
-  },
-
-  data () {
-    return {
-      lazySearch: this.searchInput,
-    }
-  },
-
-  computed: {
-    classes (): object {
-      return {
-        ...VSelect.options.computed.classes.call(this),
-        'v-autocomplete': true,
-        'v-autocomplete--is-selecting-index': this.selectedIndex > -1,
-      }
-    },
-    computedItems (): object[] {
-      return this.filteredItems
-    },
-    selectedValues (): object[] {
-      return this.selectedItems.map(item => this.getValue(item))
-    },
-    hasDisplayedItems (): boolean {
-      return this.hideSelected
-        ? this.filteredItems.some(item => !this.hasItem(item))
-        : this.filteredItems.length > 0
-    },
-    currentRange (): number {
-      if (this.selectedItem == null) return 0
-
-      return String(this.getText(this.selectedItem)).length
-    },
-    filteredItems (): object[] {
-      if (!this.isSearching || this.noFilter || this.internalSearch == null) return this.allItems
-
-      return this.allItems.filter(item => {
-        const value = getPropertyFromItem(item, this.itemText)
-        const text = value != null ? String(value) : ''
-
-        return this.filter(item, String(this.internalSearch), text)
-      })
-    },
-    internalSearch: {
-      get (): string | null {
-        return this.lazySearch
-      },
-      set (val: any) { // TODO: this should be `string | null` but it breaks lots of other types
-        // emit update event only when the new
-        // search value is different from previous
-        if (this.lazySearch !== val) {
-          this.lazySearch = val
-          this.$emit('update:search-input', val)
-        }
-      },
-    },
-    isAnyValueAllowed (): boolean {
-      return false
-    },
-    isDirty (): boolean {
-      return this.searchIsDirty || this.selectedItems.length > 0
-    },
-    isSearching (): boolean {
-      return (
-        this.multiple &&
-        this.searchIsDirty
-      ) || (
-        this.searchIsDirty &&
-        this.internalSearch !== this.getText(this.selectedItem)
-      )
-    },
-    menuCanShow (): boolean {
-      if (!this.isFocused) return false
-
-      return this.hasDisplayedItems || !this.hideNoData
-    },
-    $_menuProps (): object {
-      const props = VSelect.options.computed.$_menuProps.call(this);
-      (props as any).contentClass = `v-autocomplete__content ${(props as any).contentClass || ''}`.trim()
-      return {
-        ...defaultMenuProps,
-        ...props,
-      }
-    },
-    searchIsDirty (): boolean {
-      return this.internalSearch != null &&
-        this.internalSearch !== ''
-    },
-    selectedItem (): any {
-      if (this.multiple) return null
-
-      return this.selectedItems.find(i => {
-        return this.valueComparator(this.getValue(i), this.getValue(this.internalValue))
-      })
-    },
-    listData () {
-      const data = VSelect.options.computed.listData.call(this) as any
-
-      data.props = {
-        ...data.props,
-        items: this.virtualizedItems,
-        noFilter: (
-          this.noFilter ||
-          !this.isSearching ||
-          !this.filteredItems.length
-        ),
-        searchInput: this.internalSearch,
-      }
-
-      return data
-    },
-  },
-
-  watch: {
-    filteredItems: 'onFilteredItemsChanged',
-    internalValue: 'setSearch',
-    isFocused (val) {
-      if (val) {
-        document.addEventListener('copy', this.onCopy)
-        this.$refs.input && this.$refs.input.select()
-      } else {
-        document.removeEventListener('copy', this.onCopy)
-        this.blur()
-        this.updateSelf()
-      }
-    },
-    isMenuActive (val) {
-      if (val || !this.hasSlot) return
-
-      this.lazySearch = null
-    },
-    items (val, oldVal) {
-      // If we are focused, the menu
-      // is not active, hide no data is enabled,
-      // and items change
-      // User is probably async loading
-      // items, try to activate the menu
-      if (
-        !(oldVal && oldVal.length) &&
-        this.hideNoData &&
-        this.isFocused &&
-        !this.isMenuActive &&
-        val.length
-      ) this.activateMenu()
-    },
-    searchInput (val: string) {
-      this.lazySearch = val
-    },
-    internalSearch: 'onInternalSearchChanged',
-    itemText: 'updateSelf',
-  },
-
-  created () {
-    this.setSearch()
-  },
-
-  destroyed () {
-    document.removeEventListener('copy', this.onCopy)
-  },
-
-  methods: {
-    onFilteredItemsChanged (val: never[], oldVal: never[]) {
-      // TODO: How is the watcher triggered
-      // for duplicate items? no idea
-      if (val === oldVal) return
-
-      if (!this.autoSelectFirst) {
-        const preSelectedItem = oldVal[this.$refs.menu.listIndex]
-
-        if (preSelectedItem) {
-          this.setMenuIndex(val.findIndex(i => i === preSelectedItem))
-        } else {
-          this.setMenuIndex(-1)
-        }
-        this.$emit('update:list-index', this.$refs.menu.listIndex)
-      }
-
-      this.$nextTick(() => {
-        if (
-          !this.internalSearch ||
-          (val.length !== 1 &&
-            !this.autoSelectFirst)
-        ) return
-
-        this.$refs.menu.getTiles()
-
-        if (this.autoSelectFirst && val.length) {
-          this.setMenuIndex(0)
-          this.$emit('update:list-index', this.$refs.menu.listIndex)
-        }
-      })
-    },
-    onInternalSearchChanged () {
-      this.updateMenuDimensions()
-    },
-    updateMenuDimensions () {
-      // Type from menuable is not making it through
-      this.isMenuActive && this.$refs.menu && this.$refs.menu.updateDimensions()
-    },
-    changeSelectedIndex (keyCode: number) {
-      // Do not allow changing of selectedIndex
-      // when search is dirty
-      if (this.searchIsDirty) return
-
-      if (this.multiple && keyCode === keyCodes.left) {
-        if (this.selectedIndex === -1) {
-          this.selectedIndex = this.selectedItems.length - 1
-        } else {
-          this.selectedIndex--
-        }
-      } else if (this.multiple && keyCode === keyCodes.right) {
-        if (this.selectedIndex >= this.selectedItems.length - 1) {
-          this.selectedIndex = -1
-        } else {
-          this.selectedIndex++
-        }
-      } else if (keyCode === keyCodes.backspace || keyCode === keyCodes.delete) {
-        this.deleteCurrentItem()
-      }
-    },
-    deleteCurrentItem () {
-      const curIndex = this.selectedIndex
-      const curItem = this.selectedItems[curIndex]
-
-      // Do nothing if input or item is disabled
-      if (
-        !this.isInteractive ||
-        this.getDisabled(curItem)
-      ) return
-
-      const lastIndex = this.selectedItems.length - 1
-
-      // Select the last item if
-      // there is no selection
-      if (
-        this.selectedIndex === -1 &&
-        lastIndex !== 0
-      ) {
-        this.selectedIndex = lastIndex
-
-        return
-      }
-
-      const length = this.selectedItems.length
-      const nextIndex = curIndex !== length - 1
-        ? curIndex
-        : curIndex - 1
-      const nextItem = this.selectedItems[nextIndex]
-
-      if (!nextItem) {
-        this.setValue(this.multiple ? [] : null)
-      } else {
-        this.selectItem(curItem)
-      }
-
-      this.selectedIndex = nextIndex
-    },
-    clearableCallback () {
-      this.internalSearch = null
-
-      VSelect.options.methods.clearableCallback.call(this)
-    },
-    genInput () {
-      const input = VTextField.options.methods.genInput.call(this)
-
-      input.data = mergeData(input.data!, {
-        attrs: {
-          'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
-          autocomplete: getObjectValueByPath(input.data!, 'attrs.autocomplete', 'off'),
-        },
-        domProps: { value: this.internalSearch },
-      })
-
-      return input
-    },
-    genInputSlot () {
-      const slot = VSelect.options.methods.genInputSlot.call(this)
-
-      slot.data!.attrs!.role = 'combobox'
-
-      return slot
-    },
-    genSelections (): VNode | never[] {
-      return this.hasSlot || this.multiple
-        ? VSelect.options.methods.genSelections.call(this)
-        : []
-    },
-    onClick (e: MouseEvent) {
-      if (!this.isInteractive) return
-
-      this.selectedIndex > -1
-        ? (this.selectedIndex = -1)
-        : this.onFocus()
-
-      if (!this.isAppendInner(e.target)) this.activateMenu()
-    },
-    onInput (e: Event) {
-      if (
-        this.selectedIndex > -1 ||
-        !e.target
-      ) return
-
-      const target = e.target as HTMLInputElement
-      const value = target.value
-
-      // If typing and menu is not currently active
-      if (target.value) this.activateMenu()
-
-      if (!this.multiple && value === '') this.deleteCurrentItem()
-
-      this.internalSearch = value
-      this.badInput = target.validity && target.validity.badInput
-    },
-    onKeyDown (e: KeyboardEvent) {
-      const keyCode = e.keyCode
-
-      if (
-        e.ctrlKey ||
-        ![keyCodes.home, keyCodes.end].includes(keyCode)
-      ) {
-        VSelect.options.methods.onKeyDown.call(this, e)
-      }
-
-      // The ordering is important here
-      // allows new value to be updated
-      // and then moves the index to the
-      // proper location
-      this.changeSelectedIndex(keyCode)
-    },
-    onSpaceDown (e: KeyboardEvent) { /* noop */ },
-    onTabDown (e: KeyboardEvent) {
-      VSelect.options.methods.onTabDown.call(this, e)
-      this.updateSelf()
-    },
-    onUpDown (e: Event) {
-      // Prevent screen from scrolling
-      e.preventDefault()
-
-      // For autocomplete / combobox, cycling
-      // interfers with native up/down behavior
-      // instead activate the menu
-      this.activateMenu()
-    },
-    selectItem (item: object) {
-      VSelect.options.methods.selectItem.call(this, item)
-      this.setSearch()
-    },
-    setSelectedItems () {
-      VSelect.options.methods.setSelectedItems.call(this)
-
-      // #4273 Don't replace if searching
-      // #4403 Don't replace if focused
-      if (!this.isFocused) this.setSearch()
-    },
-    setSearch () {
-      // Wait for nextTick so selectedItem
-      // has had time to update
-      this.$nextTick(() => {
-        if (
-          !this.multiple ||
-          !this.internalSearch ||
-          !this.isMenuActive
-        ) {
-          this.internalSearch = (
-            !this.selectedItems.length ||
-            this.multiple ||
-            this.hasSlot
-          )
-            ? null
-            : this.getText(this.selectedItem)
-        }
-      })
-    },
-    updateSelf () {
-      if (
-        !this.searchIsDirty &&
-        !this.internalValue
-      ) return
-
-      if (
-        !this.multiple &&
-        !this.valueComparator(
-          this.internalSearch,
-          this.getValue(this.internalValue)
-        )
-      ) {
-        this.setSearch()
-      }
-    },
-    hasItem (item: any): boolean {
-      return this.selectedValues.indexOf(this.getValue(item)) > -1
-    },
-    onCopy (event: ClipboardEvent) {
-      if (this.selectedIndex === -1) return
-
-      const currentItem = this.selectedItems[this.selectedIndex]
-      const currentItemText = this.getText(currentItem)
-      event.clipboardData?.setData('text/plain', currentItemText)
-      event.clipboardData?.setData('text/vnd.vuetify.autocomplete.item+plain', currentItemText)
-      event.preventDefault()
-    },
-  },
-})
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
new file mode 100644
index 00000000000..15378e6f07f
--- /dev/null
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -0,0 +1,321 @@
+// Styles
+import './VAutocomplete.sass'
+
+// Components
+import { makeSelectProps } from '@/components/VSelect/VSelect'
+import { VChip } from '@/components/VChip'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
+import { VList, VListItem } from '@/components/VList'
+import { VMenu } from '@/components/VMenu'
+import { VTextField } from '@/components/VTextField'
+
+// Composables
+import { makeFilterProps, useFilter } from '@/composables/filter'
+import { makeTransitionProps } from '@/composables/transition'
+import { useForwardRef } from '@/composables/forwardRef'
+import { useLocale } from '@/composables/locale'
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+// Utility
+import { computed, ref, watch } from 'vue'
+import { genericComponent, useRender, wrapInArray } from '@/util'
+
+// Types
+import type { FilterMatch } from '@/composables/filter'
+import type { MakeSlots } from '@/util'
+
+export interface DefaultSelectionSlot {
+  selection: {
+    active: boolean
+    text: string
+    value: any
+  }
+}
+
+export interface DefaultChipSlot extends DefaultSelectionSlot {
+  props: {
+    'onClick:close': (e: Event) => void
+    modelValue: any
+  }
+}
+
+function highlightResult (text: string, matches: FilterMatch, length: number) {
+  if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented')
+
+  return typeof matches === 'number' && ~matches
+    ? (
+      <>
+        <span class="v-autocomplete__unmask">{ text.substr(0, matches) }</span>
+        <span class="v-autocomplete__mask">{ text.substr(matches, length) }</span>
+        <span class="v-autocomplete__unmask">{ text.substr(matches + length) }</span>
+      </>
+    )
+    : text
+}
+
+export const VAutocomplete = genericComponent<new <T>() => {
+  $slots: MakeSlots<{
+    chip: [DefaultChipSlot]
+    default: []
+    selection: [DefaultSelectionSlot]
+  }>
+}>()({
+  name: 'VAutocomplete',
+
+  props: {
+    // TODO: implement post keyboard support
+    // autoSelectFirst: Boolean,
+    search: String,
+
+    ...makeFilterProps({ filterKeys: ['title'] }),
+    ...makeSelectProps({ menuIcon: '' }),
+    ...makeTransitionProps({ transition: false } as const),
+  },
+
+  emits: {
+    'click:clear': (e: MouseEvent) => true,
+    'update:search': (val: any) => true,
+    'update:modelValue': (val: any) => true,
+  },
+
+  setup (props, { slots }) {
+    const { t } = useLocale()
+    const vTextFieldRef = ref()
+    const activator = ref()
+    const isFocused = ref(false)
+    const isPristine = ref(true)
+    const search = useProxiedModel(props, 'search', '')
+    const model = useProxiedModel(
+      props,
+      'modelValue',
+      [],
+      v => wrapInArray(v || []),
+      (v: any) => props.multiple ? v : v[0]
+    )
+    const menu = ref(false)
+    const active = computed({
+      get: () => model.value,
+      set: val => {
+        model.value = val
+
+        if (props.multiple) return
+
+        menu.value = false
+        isPristine.value = true
+      },
+    })
+    const items = computed(() => {
+      const array = []
+
+      for (const item of props.items as any) {
+        const title = item?.title ?? String(item)
+        const value = item?.value ?? item
+        const active = model.value.includes(value)
+
+        if (props.hideSelected && active) continue
+
+        array.push({
+          active,
+          title,
+          value,
+        })
+      }
+
+      return array
+    })
+    const selections = computed(() => {
+      return model.value.map(value => {
+        return items.value.find(item => item.value === value)
+      })
+    })
+    const searchValue = computed(() => isPristine.value ? undefined : search.value)
+    const { filteredItems } = useFilter(props, items, searchValue)
+
+    function onClear (e: MouseEvent) {
+      model.value = []
+
+      if (props.openOnClear) {
+        menu.value = true
+      }
+
+      search.value = undefined
+    }
+    function onClickControl () {
+      if (props.hideNoData && !filteredItems.value.length) return
+
+      menu.value = true
+    }
+    function onKeydown (e: KeyboardEvent) {
+      if (
+        ['Enter', ' '].includes(e.key) &&
+        !menu.value
+      ) {
+        menu.value = true
+      } else if (
+        e.key === 'Escape' &&
+        menu.value
+      ) {
+        menu.value = false
+      } else if (
+        !e.ctrlKey &&
+        !e.shiftKey
+      ) {
+        isPristine.value = false
+      }
+    }
+
+    watch(() => vTextFieldRef.value, val => {
+      activator.value = val.$el.querySelector('.v-input__control')
+    })
+
+    watch(() => active.value, () => {
+      if (!isFocused.value || props.multiple) return
+
+      search.value = selections.value[0]?.title
+    })
+
+    watch(() => searchValue.value, val => {
+      if (!isFocused.value) return
+
+      if ((props.hideNoData && !filteredItems.value.length) || !val) {
+        menu.value = false
+      } else {
+        menu.value = true
+      }
+    })
+
+    watch(() => isFocused.value, val => {
+      isPristine.value = true
+
+      if (val && !props.multiple) {
+        search.value = selections.value[0]?.title
+      } else if (!val) {
+        search.value = ''
+        menu.value = false
+      }
+    })
+
+    useRender(() => {
+      const hasChips = !!(props.chips || slots.chip)
+
+      return (
+        <VTextField
+          ref={ vTextFieldRef }
+          v-model={ search.value }
+          class={[
+            'v-autocomplete',
+            {
+              'v-autocomplete--active-menu': menu.value,
+              'v-autocomplete--chips': !!props.chips,
+              [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true,
+            },
+          ]}
+          dirty={ model.value.length > 0 }
+          onClick:clear={ onClear }
+          onClick:control={ onClickControl }
+          onFocus={ () => isFocused.value = true }
+          onBlur={ () => isFocused.value = false }
+          onKeydown={ onKeydown }
+        >
+          {{
+            ...slots,
+            default: () => (
+              <>
+                { activator.value && (
+                  <VMenu
+                    v-model={ menu.value }
+                    activator={ activator.value }
+                    contentClass="v-autocomplete__content"
+                    eager={ props.eager }
+                    openOnClick={ false }
+                    transition={ props.transition }
+                  >
+                    <VList
+                      v-model:active={ active.value }
+                      activeStrategy={ props.multiple ? 'multiple' : 'single' }
+                    >
+                      { !filteredItems.value.length && !props.hideNoData && (
+                        <VListItem title={ t(props.noDataText) } />
+                      )}
+
+                      { filteredItems.value.map(({ item, matches }) => (
+                        <VListItem
+                          value={ item.value }
+                          onMousedown={ (e: MouseEvent) => e.preventDefault() }
+                        >
+                          {{
+                            title: () => {
+                              return isPristine.value
+                                ? item.title
+                                : highlightResult(item.title, matches.title, search.value?.length ?? 0)
+                            },
+                          }}
+                        </VListItem>
+                      )) }
+                    </VList>
+                  </VMenu>
+                ) }
+
+                <div class="v-autocomplete__selections v-field__input">
+                  { selections.value.map((selection, index) => {
+                    const active = selection?.active
+                    const title = selection?.title
+                    const value = selection?.value
+
+                    function onChipClose (e: Event) {
+                      e.stopPropagation()
+                      e.preventDefault()
+
+                      model.value = model.value.filter(item => item !== value)
+                    }
+
+                    const slotProps = {
+                      'onClick:close': onChipClose,
+                      modelValue: active,
+                    }
+
+                    return (
+                      <VDefaultsProvider
+                        defaults={{
+                          VChip: {
+                            closable: props.closableChips,
+                            size: 'small',
+                            text: title,
+                          },
+                        }}
+                      >
+                        <div class="v-autocomplete__selection">
+                          { hasChips
+                            ? slots.chip
+                              ? slots.chip({ props: slotProps, selection })
+                              : (<VChip { ...slotProps } />)
+                            : slots.selection
+                              ? slots.selection({ selection })
+                              : (
+                                <span class="v-autocomplete__selection-text">
+                                  { title }
+                                  { index < model.value.length - 1 && (
+                                    <span class="v-autocomplete__selection-comma">,</span>
+                                  ) }
+                                </span>
+                              )
+                          }
+                        </div>
+                      </VDefaultsProvider>
+                    )
+                  }) }
+                </div>
+              </>
+            ),
+          }}
+        </VTextField>
+      )
+    })
+
+    return useForwardRef({
+      filteredItems,
+    }, vTextFieldRef)
+  },
+})
+
+export type VAutocomplete = InstanceType<typeof VAutocomplete>
diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.ts b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.ts
deleted file mode 100644
index 20556fd9bf6..00000000000
--- a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.ts
+++ /dev/null
@@ -1,535 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Components
-// import VAutocomplete from '../VAutocomplete'
-
-// Utilities
-import {
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
-// import { keyCodes } from '../../../util/helpers'
-
-describe.skip('VAutocomplete.ts', () => {
-  type Instance = InstanceType<typeof VAutocomplete>
-  let mountFunction: (options?: object) => Wrapper<Instance>
-
-  beforeEach(() => {
-    document.body.setAttribute('data-app', 'true')
-
-    mountFunction = (options = {}) => {
-      return mount(VAutocomplete, {
-        ...options,
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (val: string) => val,
-            },
-            theme: {
-              dark: false,
-            },
-          },
-        },
-      })
-    }
-  })
-
-  it('should have explicit tabindex passed through when autocomplete', () => {
-    const wrapper = mountFunction({
-      attrs: {
-        tabindex: 10,
-      },
-    })
-
-    expect(wrapper.vm.$refs.input.tabIndex).toBe(10)
-    expect(wrapper.vm.$el.tabIndex).toBe(-1)
-  })
-
-  it('should emit search input changes', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-      },
-    })
-
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    const update = jest.fn()
-    wrapper.vm.$on('update:search-input', update)
-
-    element.value = 'test'
-    input.trigger('input')
-
-    await wrapper.vm.$nextTick()
-
-    expect(update).toHaveBeenCalledWith('test')
-  })
-
-  it('should filter autocomplete search results', async () => {
-    const wrapper = mountFunction({
-      propsData: { items: ['foo', 'bar'] },
-    })
-
-    wrapper.setData({ internalSearch: 'foo' })
-
-    expect(wrapper.vm.filteredItems).toHaveLength(1)
-    expect(wrapper.vm.filteredItems[0]).toBe('foo')
-  })
-
-  it('should filter numeric primitives', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: [1, 2],
-      },
-    })
-
-    wrapper.setData({ internalSearch: 1 })
-
-    expect(wrapper.vm.filteredItems).toHaveLength(1)
-    expect(wrapper.vm.filteredItems[0]).toBe(1)
-  })
-
-  it('should activate when search changes and not active', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: [1, 2, 3, 4],
-        multiple: true,
-      },
-    })
-
-    wrapper.vm.isMenuActive = true
-    await wrapper.vm.$nextTick()
-    wrapper.setData({ internalSearch: 2 })
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.isMenuActive).toBe(true)
-  })
-
-  // TODO: this fails without sync, nextTick doesn't help
-  // https://github.com/vuejs/vue-test-utils/issues/1130
-  it.skip('should set searchValue to null when deactivated', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: [1, 2, 3, 4],
-        multiple: true,
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    input.trigger('focus')
-    element.value = '2'
-    input.trigger('input')
-
-    expect(wrapper.vm.internalSearch).toBe('2')
-
-    wrapper.setProps({
-      multiple: false,
-      value: 1,
-    })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.internalSearch).toBe(1)
-
-    input.trigger('focus')
-    element.value = '3'
-    input.trigger('input')
-    input.trigger('blur')
-
-    expect(wrapper.vm.internalSearch).toBe('3')
-  })
-
-  it('should render role=combobox correctly when autocomplete', async () => {
-    const wrapper = mountFunction()
-
-    expect(wrapper.vm.$el.getAttribute('role')).toBeFalsy()
-
-    const input = wrapper.find('.v-input__slot')
-    expect(input.element.getAttribute('role')).toBe('combobox')
-  })
-
-  it('should not duplicate items after items update when caching is turned on', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        cacheItems: true,
-        returnObject: true,
-        itemText: 'text',
-        itemValue: 'id',
-        items: [],
-      },
-    })
-
-    wrapper.setProps({ items: [{ id: 1, text: 'A' }] })
-    expect(wrapper.vm.computedItems).toHaveLength(1)
-    wrapper.setProps({ items: [{ id: 1, text: 'A' }] })
-    expect(wrapper.vm.computedItems).toHaveLength(1)
-  })
-
-  it('should cache items passed via prop', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        cacheItems: true,
-        items: [1, 2, 3, 4],
-      },
-    })
-
-    expect(wrapper.vm.computedItems).toHaveLength(4)
-
-    wrapper.setProps({ items: [5] })
-
-    expect(wrapper.vm.computedItems).toHaveLength(5)
-  })
-
-  it('should not filter text with no items', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        eager: true,
-        items: ['foo', 'bar'],
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-
-    wrapper.setProps({ searchInput: 'asdf' })
-
-    // Wait for watcher
-    await wrapper.vm.$nextTick()
-
-    const tile = wrapper.find('.v-list-item__title')
-
-    expect(tile.text()).toBe('$vuetify.noDataText')
-  })
-
-  it('should not display menu when tab focused', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: [1, 2],
-        value: 1,
-      },
-    })
-
-    const input = wrapper.find('input')
-    input.trigger('focus')
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.isMenuActive).toBe(false)
-  })
-
-  // TODO: this fails without sync, nextTick doesn't help
-  // https://github.com/vuejs/vue-test-utils/issues/1130
-  // eslint-disable-next-line max-statements
-  it.skip('should change selected index', async () => {
-    const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
-        items: ['foo', 'bar', 'fizz'],
-        multiple: true,
-        value: ['foo', 'bar', 'fizz'],
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.selectedIndex).toBe(-1)
-    expect(wrapper.vm.selectedItems).toHaveLength(3)
-
-    // Right arrow
-    wrapper.vm.changeSelectedIndex(keyCodes.right)
-    expect(wrapper.vm.selectedIndex).toBe(0)
-
-    wrapper.vm.changeSelectedIndex(keyCodes.right)
-    expect(wrapper.vm.selectedIndex).toBe(1)
-
-    wrapper.vm.changeSelectedIndex(keyCodes.right)
-    expect(wrapper.vm.selectedIndex).toBe(2)
-
-    // Left arrow
-    wrapper.vm.changeSelectedIndex(keyCodes.left)
-    expect(wrapper.vm.selectedIndex).toBe(1)
-
-    wrapper.vm.changeSelectedIndex(keyCodes.left)
-    expect(wrapper.vm.selectedIndex).toBe(0)
-
-    wrapper.vm.changeSelectedIndex(keyCodes.left)
-    expect(wrapper.vm.selectedIndex).toBe(-1)
-
-    wrapper.vm.changeSelectedIndex(keyCodes.left)
-    expect(wrapper.vm.selectedIndex).toBe(2)
-
-    wrapper.vm.changeSelectedIndex(keyCodes.left)
-    expect(wrapper.vm.selectedIndex).toBe(1)
-
-    // Delete key
-    wrapper.vm.changeSelectedIndex(keyCodes.backspace)
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.selectedIndex).toBe(1)
-
-    wrapper.vm.changeSelectedIndex(keyCodes.left)
-    expect(wrapper.vm.selectedIndex).toBe(0)
-
-    wrapper.vm.changeSelectedIndex(keyCodes.backspace)
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.selectedIndex).toBe(0)
-
-    // Should not change index if search is dirty
-    wrapper.setProps({ searchInput: 'foo' })
-    wrapper.vm.changeSelectedIndex(keyCodes.backspace)
-
-    expect(wrapper.vm.selectedIndex).toBe(0)
-    expect(wrapper.vm.selectedItems).toHaveLength(1)
-
-    wrapper.setProps({ searchInput: undefined })
-
-    // Should not proceed if keyCode doesn't match
-    wrapper.vm.changeSelectedIndex(99)
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.selectedIndex).toBe(0)
-    expect(wrapper.vm.selectedItems).toHaveLength(1)
-
-    wrapper.vm.changeSelectedIndex(keyCodes.backspace)
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.selectedItems).toHaveLength(0)
-    expect(wrapper.vm.selectedIndex).toBe(-1)
-
-    // Should not change/error if called with no selection
-    wrapper.vm.changeSelectedIndex(keyCodes.backspace)
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.selectedIndex).toBe(-1)
-
-    wrapper.setProps({ value: ['foo', 'bar', 'fizz'] })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.selectedItems).toHaveLength(3)
-
-    wrapper.vm.selectedIndex = 2
-
-    // Simulating removing items when an index already selected
-    wrapper.setProps({ value: ['foo', 'bar'] })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.selectedIndex).toBe(2)
-
-    // Backspace
-    wrapper.vm.changeSelectedIndex(keyCodes.delete)
-    expect(wrapper.vm.selectedIndex).toBe(-1)
-  })
-
-  it('should conditionally show the menu', async () => {
-    const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
-        items: ['foo', 'bar', 'fizz'],
-      },
-    })
-
-    const slot = wrapper.find('.v-input__slot')
-    const input = wrapper.find('input')
-
-    // Focus input should only focus
-    input.trigger('focus')
-
-    expect(wrapper.vm.isFocused).toBe(true)
-    expect(wrapper.vm.menuCanShow).toBe(true)
-    expect(wrapper.vm.isMenuActive).toBe(false)
-
-    // Clicking input should open menu
-    slot.trigger('click')
-
-    expect(wrapper.vm.isMenuActive).toBe(true)
-    expect(wrapper.vm.menuCanShow).toBe(true)
-
-    wrapper.setProps({ searchInput: 'foo' })
-
-    expect(wrapper.vm.isMenuActive).toBe(true)
-    expect(wrapper.vm.menuCanShow).toBe(true)
-
-    // Should close menu but keep focus
-    input.trigger('keydown.esc')
-
-    expect(wrapper.vm.isFocused).toBe(true)
-    expect(wrapper.vm.isMenuActive).toBe(false)
-    expect(wrapper.vm.menuCanShow).toBe(true)
-
-    // TODO: Add expects for tags when impl
-  })
-
-  // TODO: this fails without sync, nextTick doesn't help
-  // https://github.com/vuejs/vue-test-utils/issues/1130
-  it.skip('should have the correct selected item', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['foo', 'bar', 'fizz'],
-        multiple: true,
-        value: ['foo'],
-      },
-    })
-
-    expect(wrapper.vm.selectedItem).toBeNull()
-
-    wrapper.setProps({
-      multiple: false,
-      value: 'foo',
-    })
-
-    expect(wrapper.vm.selectedItem).toBe('foo')
-  })
-
-  it('should reset lazySearch', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        chips: true,
-        items: ['foo', 'bar', 'fizz'],
-        searchInput: 'foo',
-      },
-    })
-
-    expect(wrapper.vm.lazySearch).toBe('foo')
-    expect(wrapper.vm.hasSlot).toBe(true)
-
-    wrapper.setData({ isMenuActive: true })
-    await wrapper.vm.$nextTick()
-    wrapper.setData({ isMenuActive: false })
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.lazySearch).toBeNull()
-  })
-
-  it('should select input text on focus', async () => {
-    const wrapper = mountFunction({
-      attachToDocument: true,
-    })
-    const select = jest.fn()
-    wrapper.vm.$refs.input.select = select
-
-    const input = wrapper.find('input')
-    input.trigger('focus')
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.isFocused).toBe(true)
-    expect(select).toHaveBeenCalledTimes(1)
-
-    input.trigger('keydown.tab')
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.isFocused).toBe(false)
-    expect(select).toHaveBeenCalledTimes(1)
-  })
-
-  it('should not respond to click', () => {
-    const onFocus = jest.fn()
-    const wrapper = mountFunction({
-      propsData: { disabled: true },
-      methods: { onFocus },
-    })
-    const slot = wrapper.find('.v-input__slot')
-
-    slot.trigger('click')
-
-    expect(onFocus).not.toHaveBeenCalled()
-
-    wrapper.setProps({ disabled: false, readonly: true })
-
-    slot.trigger('click')
-
-    expect(onFocus).not.toHaveBeenCalled()
-
-    wrapper.setProps({ readonly: false })
-
-    slot.trigger('click')
-
-    expect(onFocus).toHaveBeenCalled()
-  })
-
-  it('should react to keydown', () => {
-    const activateMenu = jest.fn()
-    const changeSelectedIndex = jest.fn()
-    const onEscDown = jest.fn()
-    const onTabDown = jest.fn()
-    const wrapper = mountFunction({
-      methods: {
-        activateMenu,
-        changeSelectedIndex,
-        onEscDown,
-        onTabDown,
-      },
-    })
-
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    expect(wrapper.vm.isMenuActive).toBe(false)
-
-    input.trigger('keydown.enter')
-    input.trigger('keydown.space')
-    input.trigger('keydown.up')
-    input.trigger('keydown.down')
-
-    expect(activateMenu).toHaveBeenCalledTimes(4)
-
-    input.trigger('keydown.esc')
-
-    expect(onEscDown).toHaveBeenCalledTimes(1)
-
-    input.trigger('keydown.tab')
-
-    expect(onTabDown).toHaveBeenCalledTimes(1)
-
-    // Skip menu activation
-    wrapper.setData({ isMenuActive: true })
-
-    element.value = 'foo'
-    input.trigger('input')
-
-    wrapper.setProps({ hideSelected: true })
-
-    expect(wrapper.vm.genSelections()).toEqual([])
-  })
-
-  it('should change autocomplete attribute', () => {
-    const wrapper = mountFunction({
-      attrs: {
-        autocomplete: 'on',
-      },
-    })
-
-    expect(wrapper.vm.$attrs.autocomplete).toBe('on')
-  })
-
-  it('should not delete item if readonly', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['a', 'b', 'c'],
-        multiple: true,
-        value: ['a', 'b', 'c'],
-      },
-    })
-    wrapper.vm.changeSelectedIndex(keyCodes.right)
-    wrapper.vm.changeSelectedIndex(keyCodes.right)
-    wrapper.vm.changeSelectedIndex(keyCodes.backspace)
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.selectedItems).toHaveLength(2)
-
-    wrapper.setProps({
-      readonly: true,
-    })
-
-    wrapper.vm.changeSelectedIndex(keyCodes.backspace)
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.selectedItems).toHaveLength(2)
-  })
-})
diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts
deleted file mode 100644
index 3705d5d31c5..00000000000
--- a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts
+++ /dev/null
@@ -1,474 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Components
-// import VAutocomplete from '../VAutocomplete'
-
-// Utilities
-import {
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
-// import { compileToFunctions } from 'vue-template-compiler'
-
-describe.skip('VAutocomplete.ts', () => {
-  type Instance = InstanceType<typeof VAutocomplete>
-  let mountFunction: (options?: object) => Wrapper<Instance>
-
-  beforeEach(() => {
-    document.body.setAttribute('data-app', 'true')
-
-    mountFunction = (options = {}) => {
-      return mount(VAutocomplete, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (val: string) => val,
-            },
-            theme: {
-              dark: false,
-            },
-          },
-        },
-        ...options,
-      })
-    }
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/3793
-  it('should reset menu index after selection', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['foo', 'bar'],
-        value: 'foo',
-      },
-    })
-
-    expect(wrapper.vm.isMenuActive).toBe(false)
-    const slot = wrapper.find('.v-input__slot')
-    slot.trigger('click')
-
-    expect(wrapper.vm.isMenuActive).toBe(true)
-
-    expect(wrapper.vm.getMenuIndex()).toBe(-1)
-  })
-
-  it('should not remove a disabled item', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        chips: true,
-        multiple: true,
-        items: [
-          { text: 'foo', value: 'foo', disabled: true },
-          { text: 'bar', value: 'bar' },
-        ],
-        value: ['foo', 'bar'],
-      },
-    })
-
-    const chips = wrapper.find('.v-chip')
-    const input = wrapper.find('input')
-
-    expect(chips.element.classList.contains('v-chip--disabled')).toBe(true)
-
-    input.trigger('focus')
-    input.trigger('keydown.left')
-
-    expect(wrapper.vm.selectedIndex).toBe(1)
-
-    input.trigger('keydown.delete')
-
-    expect(wrapper.vm.internalValue).toEqual(['foo'])
-
-    input.trigger('keydown.delete')
-
-    expect(wrapper.vm.internalValue).toEqual(['foo'])
-  })
-
-  it('should not filter results', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['foo', 'bar'],
-      },
-    })
-
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    element.value = 'foo'
-    input.trigger('input')
-
-    expect(wrapper.vm.filteredItems).toHaveLength(1)
-
-    wrapper.setProps({ noFilter: true })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.filteredItems).toHaveLength(2)
-  })
-
-  it.skip('should hide menu when no data', async () => {
-    const wrapper = mountFunction()
-
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    input.trigger('focus')
-    element.value = 'foo'
-    input.trigger('input')
-
-    expect(wrapper.vm.menuCanShow).toBe(true)
-
-    wrapper.setProps({ hideNoData: true })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.menuCanShow).toBe(false)
-
-    wrapper.setProps({ hideNoData: false })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.menuCanShow).toBe(true)
-
-    // If we are hiding selected
-    // filtered will have a positive length
-    // but the hidden items will not show
-    // check to make sure when all values are
-    // selected to close the menu
-    wrapper.setProps({
-      hideNoData: true,
-      hideSelected: true,
-      items: [1, 2, 3, 4],
-      multiple: true,
-      value: [1, 2, 3],
-    })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.menuCanShow).toBe(true)
-
-    wrapper.setProps({ value: [1, 2, 3, 4] })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.menuCanShow).toBe(false)
-  })
-
-  it('should not hide menu when no data but has no-data slot', async () => {
-    const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
-        combobox: true,
-      },
-      slots: {
-        'no-data': [compileToFunctions('<span>show me</span>')],
-      },
-    })
-
-    const input = wrapper.find('input')
-    input.trigger('focus')
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.menuCanShow).toBe(true)
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/2834
-  it('should not update search if selectedIndex is > -1', () => {
-    const wrapper = mountFunction()
-
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    input.trigger('focus')
-    element.value = 'foo'
-    input.trigger('input')
-
-    expect(wrapper.vm.internalSearch).toBe('foo')
-
-    wrapper.setData({
-      lazySearch: '',
-      selectedIndex: 0,
-    })
-
-    expect(wrapper.vm.internalSearch).toBe('')
-
-    element.value = 'bar'
-    input.trigger('input')
-
-    expect(wrapper.vm.internalSearch).toBe('')
-  })
-
-  it('should clear search input on clear callback', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        clearable: true,
-        items: ['foo'],
-        value: 'foo',
-      },
-    })
-
-    const icon = wrapper.find('.v-input__append-inner .v-icon')
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    element.value = 'foobar'
-    input.trigger('input')
-
-    expect(wrapper.vm.internalSearch).toBe('foobar')
-
-    icon.trigger('click')
-
-    expect(wrapper.vm.internalSearch).toBeNull()
-  })
-
-  it('should propagate content class', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        menuProps: { contentClass: 'foobar', eager: true },
-      },
-    })
-
-    const content = wrapper.find('.v-autocomplete__content')
-
-    expect(content.element.classList.contains('foobar')).toBe(true)
-  })
-
-  // TODO: this fails without sync, nextTick doesn't help
-  // https://github.com/vuejs/vue-test-utils/issues/1130
-  it.skip('should update the displayed value when items changes', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        value: 1,
-        items: [],
-      },
-    })
-
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    await wrapper.vm.$nextTick()
-    wrapper.setProps({ items: [{ text: 'foo', value: 1 }] })
-    await wrapper.vm.$nextTick()
-    expect(element.value).toBe('foo')
-  })
-
-  // TODO: this fails without sync, nextTick doesn't help
-  // https://github.com/vuejs/vue-test-utils/issues/1130
-  it.skip('should show menu when items are added for the first time and hide-no-data is enabled', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        hideNoData: true,
-        items: [],
-      },
-    })
-
-    const input = wrapper.find('input')
-
-    input.trigger('focus')
-
-    expect(wrapper.vm.isMenuActive).toBe(false)
-    expect(wrapper.vm.isFocused).toBe(true)
-
-    wrapper.setProps({
-      items: ['Foo', 'Bar'],
-    })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.isMenuActive).toBe(true)
-  })
-
-  it('should not show menu when items are updated and hide-no-data is enabled', async () => {
-    const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
-        hideNoData: true,
-        items: ['Something first'],
-      },
-    })
-
-    const input = wrapper.find('input')
-
-    input.trigger('focus')
-
-    expect(wrapper.vm.isMenuActive).toBe(false)
-    expect(wrapper.vm.isFocused).toBe(true)
-
-    wrapper.setProps({
-      items: ['Foo', 'Bar'],
-    })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.isMenuActive).toBe(false)
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/5110
-  // TODO: this fails without sync, nextTick doesn't help
-  // https://github.com/vuejs/vue-test-utils/issues/1130
-  it.skip('should set internal search', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        value: undefined,
-        items: [0, 1, 2],
-      },
-    })
-
-    // Initial value
-    expect(wrapper.vm.internalSearch).toBeUndefined()
-
-    wrapper.vm.setSearch()
-
-    await wrapper.vm.$nextTick()
-
-    // !this.selectedItem
-    expect(wrapper.vm.internalSearch).toBeNull()
-
-    wrapper.setData({ internalSearch: undefined })
-    wrapper.setProps({ multiple: true, value: 1 })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.selectedItems).toHaveLength(1)
-
-    wrapper.vm.setSearch()
-
-    await wrapper.vm.$nextTick()
-
-    // this.multiple
-    expect(wrapper.vm.internalSearch).toBeNull()
-
-    wrapper.setData({ internalSearch: undefined })
-    wrapper.setProps({ multiple: false, value: 0 })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.internalSearch).toBe(0)
-  })
-
-  it('should auto select first', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        autoSelectFirst: true,
-        items: [
-          'foo',
-          'foobar',
-          'bar',
-        ],
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    input.trigger('focus')
-    element.value = 'fo'
-    input.trigger('input')
-    input.trigger('keydown.enter')
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.getMenuIndex()).toBe(0)
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/4580
-  it('should display menu when hide-no-date and hide-selected are enabled and selected item does not match search', async () => {
-    const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
-        items: [1, 2],
-        value: 1,
-        hideNoData: true,
-        hideSelected: true,
-      },
-    })
-
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    input.trigger('focus')
-    await wrapper.vm.$nextTick()
-
-    element.value = '2'
-    input.trigger('input')
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.menuCanShow).toBe(true)
-  })
-
-  it('should retain search value when item selected and multiple is enabled', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['Sandra Adams', 'Ali Connors', 'Trevor Hansen', 'Tucker Smith'],
-        multiple: true,
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    input.trigger('focus')
-    element.value = 't'
-    input.trigger('input')
-    wrapper.vm.selectItem('Trevor Hansen')
-
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.selectedItems).toHaveLength(1)
-    expect(wrapper.vm.internalSearch).toBe('t')
-  })
-
-  it('should update render dynamically when itemText changes', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        returnObject: true,
-        itemText: 'labels.1033',
-        items: [
-          {
-            id: 1,
-            labels: { 1033: 'ID 1 English', 1036: 'ID 1 French' },
-          },
-          {
-            id: 2,
-            labels: { 1033: 'ID 2 English', 1036: 'ID 2 French' },
-          },
-        ],
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-
-    wrapper.vm.selectItem(wrapper.vm.items[0])
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.internalSearch).toEqual('ID 1 English')
-
-    wrapper.setProps({ itemText: 'labels.1036' })
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.computedItems).toHaveLength(2)
-    expect(wrapper.vm.internalSearch).toEqual('ID 1 French')
-  })
-
-  it('should not replicate html select hotkeys in v-autocomplete', async () => {
-    const onKeyPress = jest.fn()
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['aaa', 'foo', 'faa'],
-      },
-      methods: { onKeyPress },
-    })
-
-    const input = wrapper.find('input')
-    input.trigger('focus')
-    await wrapper.vm.$nextTick()
-
-    input.trigger('keypress', { key: 'f' })
-    await wrapper.vm.$nextTick()
-    expect(onKeyPress).not.toHaveBeenCalled()
-  })
-})
diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts
deleted file mode 100644
index 3ccd65efad9..00000000000
--- a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Components
-// import VAutocomplete from '../VAutocomplete'
-
-// Utilities
-import {
-  mount,
-  Wrapper,
-  MountOptions,
-} from '@vue/test-utils'
-
-describe.skip('VAutocomplete.ts', () => {
-  type Instance = InstanceType<typeof VAutocomplete>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
-
-  beforeEach(() => {
-    document.body.setAttribute('data-app', 'true')
-
-    mountFunction = (options = {}) => {
-      return mount(VAutocomplete, {
-        ...options,
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (val: string) => val,
-            },
-            theme: {
-              dark: false,
-            },
-          },
-        },
-      })
-    }
-  })
-
-  it('should have the correct role', async () => {
-    const wrapper = mountFunction()
-
-    const inputSlot = wrapper.find('.v-input__slot')
-
-    expect(inputSlot.element.getAttribute('role')).toBe('combobox')
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/7259
-  it('should update search when same item is selected', async () => {
-    const wrapper = mountFunction({
-      attachToDocument: true,
-      propsData: {
-        items: ['foo'],
-        value: 'foo',
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-
-    const input = wrapper.find('input')
-    const element = input.element as HTMLInputElement
-
-    expect(element.value).toBe('foo')
-
-    input.trigger('focus')
-    input.trigger('click')
-    element.value = 'fo'
-    input.trigger('input')
-
-    const item = wrapper.find('.v-list-item')
-
-    item.trigger('click')
-
-    await wrapper.vm.$nextTick()
-
-    expect(element.value).toBe('foo')
-  })
-
-  it('should copy selected item if multiple', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['aaa', 'bbb', 'ccc'],
-        value: ['aaa', 'bbb'],
-        chips: true,
-        multiple: true,
-      },
-    })
-
-    const input = wrapper.find('input')
-    const chip = wrapper.findAll('.v-chip').at(1)
-    const setData = jest.fn()
-    const event = {
-      clipboardData: {
-        setData,
-      },
-      preventDefault: jest.fn(),
-    }
-
-    input.trigger('focus')
-    chip.trigger('click')
-    wrapper.vm.onCopy(event)
-
-    expect(setData).toHaveBeenCalledWith('text/plain', 'bbb')
-    expect(setData).toHaveBeenCalledWith('text/vnd.vuetify.autocomplete.item+plain', 'bbb')
-    expect(event.preventDefault).toHaveBeenCalled()
-  })
-
-  it('should not copy anything if there is no selected item', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['aaa', 'bbb', 'ccc'],
-        value: ['aaa', 'bbb'],
-        chips: true,
-        multiple: true,
-      },
-    })
-
-    const input = wrapper.find('input')
-    const setData = jest.fn()
-    const event = {
-      clipboardData: {
-        setData,
-      },
-      preventDefault: jest.fn(),
-    }
-
-    input.trigger('focus')
-    wrapper.vm.onCopy(event)
-
-    expect(setData).not.toHaveBeenCalled()
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/9654
-  // https://github.com/vuetifyjs/vuetify/issues/11639
-  it('should delete value when pressing backspace', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        chips: true,
-        items: ['foo', 'bar', 'fizz', 'buzz'],
-        value: 'foo',
-      },
-    })
-
-    const input = wrapper.find('input')
-
-    input.trigger('focus')
-    input.trigger('keydown.backspace')
-    input.trigger('keydown.backspace')
-
-    expect(wrapper.vm.internalValue).toBeNull()
-
-    wrapper.setProps({
-      multiple: true,
-      value: ['foo', 'bar'],
-    })
-
-    input.trigger('keydown.backspace')
-    input.trigger('keydown.backspace')
-
-    expect(wrapper.vm.internalValue).toEqual(['foo'])
-  })
-
-  it('should not change selectedIndex to 0 when backspace is pressed', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['f', 'b'],
-        value: 'f',
-      },
-    })
-
-    const input = wrapper.find('input')
-
-    input.trigger('focus')
-    input.trigger('keydown.backspace')
-
-    expect(wrapper.vm.selectedIndex).toBe(-1)
-  })
-
-  it('should close menu when append icon is clicked', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['foo', 'bar'],
-      },
-    })
-
-    const append = wrapper.find('.v-input__append-inner')
-    const slot = wrapper.find('.v-input__slot')
-    slot.trigger('click')
-    expect(wrapper.vm.isMenuActive).toBe(true)
-    append.trigger('mousedown')
-    append.trigger('mouseup')
-    append.trigger('click')
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.isMenuActive).toBe(false)
-  })
-
-  it('should open menu when append icon is clicked', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['foo', 'bar'],
-      },
-    })
-
-    const append = wrapper.find('.v-input__append-inner')
-
-    append.trigger('mousedown')
-    append.trigger('mouseup')
-    append.trigger('click')
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.isMenuActive).toBe(true)
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/9489
-  it('should emit search-input update only once', async () => {
-    const onSearch = jest.fn()
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['foo', 'bar'],
-        value: 'foo',
-      },
-    })
-
-    wrapper.vm.$on('update:search-input', onSearch)
-
-    expect(onSearch).toHaveBeenCalledTimes(0)
-
-    wrapper.setData({ internalValue: 'bar' })
-
-    await wrapper.vm.$nextTick()
-
-    expect(onSearch).toHaveBeenCalledTimes(1)
-
-    wrapper.setData({ internalValue: 'foo' })
-
-    await wrapper.vm.$nextTick()
-
-    expect(onSearch).toHaveBeenCalledTimes(2)
-
-    wrapper.setData({ internalValue: 'foo' })
-
-    await wrapper.vm.$nextTick()
-
-    expect(onSearch).toHaveBeenCalledTimes(2)
-  })
-
-  it('should reset selected item when text-field is cleared if not multiple', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: ['foo', 'bar'],
-        value: 'foo',
-      },
-    })
-
-    const input = wrapper.find('input')
-
-    input.element.value = ''
-    input.trigger('input')
-
-    expect(wrapper.vm.internalValue).toBeNull()
-  })
-})
diff --git a/packages/vuetify/src/components/VAutocomplete/_variables.scss b/packages/vuetify/src/components/VAutocomplete/_variables.scss
index b8c96638531..08cfaf94577 100644
--- a/packages/vuetify/src/components/VAutocomplete/_variables.scss
+++ b/packages/vuetify/src/components/VAutocomplete/_variables.scss
@@ -1,5 +1,8 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
 
-$autocomplete-enclosed-input-margin-top: 24px !default;
-$autocomplete-dense-enclosed-input-margin-top: 20px !default;
-$autocomplete-focused-input: 64px !default;
+// Defaults
+$autocomplete-content-border-radius: 4px !default;
+$autocomplete-content-elevation: 4 !default;
+$autocomplete-line-height: 1.75 !default;
+$autocomplete-transition: .2s settings.$standard-easing !default;
+$autocomplete-chips-control-min-height: 64px !default;
diff --git a/packages/vuetify/src/components/VAutocomplete/index.ts b/packages/vuetify/src/components/VAutocomplete/index.ts
index 89ea565262d..97b51660784 100644
--- a/packages/vuetify/src/components/VAutocomplete/index.ts
+++ b/packages/vuetify/src/components/VAutocomplete/index.ts
@@ -1,4 +1 @@
-import VAutocomplete from './VAutocomplete'
-
-export { VAutocomplete }
-export default VAutocomplete
+export { VAutocomplete } from './VAutocomplete'
diff --git a/packages/vuetify/src/components/VBadge/VBadge.tsx b/packages/vuetify/src/components/VBadge/VBadge.tsx
index dcd23ea2f34..5ba907db03e 100644
--- a/packages/vuetify/src/components/VBadge/VBadge.tsx
+++ b/packages/vuetify/src/components/VBadge/VBadge.tsx
@@ -7,8 +7,11 @@ import { VIcon } from '@/components/VIcon'
 // Composables
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
 import { useBackgroundColor, useTextColor } from '@/composables/color'
+import { useLocale } from '@/composables/locale'
+import { useRtl } from '@/composables/rtl'
 
 // Utilities
 import { computed, toRef } from 'vue'
@@ -23,7 +26,7 @@ export const VBadge = defineComponent({
     bordered: Boolean,
     color: {
       type: String,
-      default: 'primary',
+      default: 'surface-variant',
     },
     content: String,
     dot: Boolean,
@@ -36,13 +39,13 @@ export const VBadge = defineComponent({
     },
     location: {
       type: String,
-      default: 'top-right',
+      default: 'top-end',
       validator: (value: string) => {
         const [vertical, horizontal] = (value ?? '').split('-')
 
         return (
           ['top', 'bottom'].includes(vertical) &&
-          ['left', 'right'].includes(horizontal)
+          ['start', 'end'].includes(horizontal)
         )
       },
     },
@@ -56,13 +59,17 @@ export const VBadge = defineComponent({
     textColor: String,
     ...makeRoundedProps(),
     ...makeTagProps(),
+    ...makeThemeProps(),
     ...makeTransitionProps({ transition: 'scale-rotate-transition' }),
   },
 
   setup (props, ctx) {
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
+    const { isRtl } = useRtl()
     const { roundedClasses } = useRounded(props)
+    const { t } = useLocale()
     const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'textColor'))
+    const { themeClasses } = useTheme()
 
     const position = computed(() => {
       return props.floating
@@ -77,8 +84,6 @@ export const VBadge = defineComponent({
     const locationStyles = computed(() => {
       const [vertical, horizontal] = (props.location ?? '').split('-')
 
-      // TODO: RTL support
-
       const styles = {
         bottom: 'auto',
         left: 'auto',
@@ -87,7 +92,9 @@ export const VBadge = defineComponent({
       }
 
       if (!props.inline) {
-        styles[horizontal === 'left' ? 'right' : 'left'] = calculatePosition(props.offsetX)
+        const isRight = (isRtl.value && horizontal === 'end') || (!isRtl.value && horizontal === 'start')
+
+        styles[isRight ? 'right' : 'left'] = calculatePosition(props.offsetX)
         styles[vertical === 'top' ? 'bottom' : 'top'] = calculatePosition(props.offsetY)
       }
 
@@ -132,6 +139,7 @@ export const VBadge = defineComponent({
                   backgroundColorClasses.value,
                   roundedClasses.value,
                   textColorClasses.value,
+                  themeClasses.value,
                 ]}
                 style={[
                   backgroundColorStyles.value,
@@ -139,7 +147,7 @@ export const VBadge = defineComponent({
                   textColorStyles.value,
                 ]}
                 aria-atomic="true"
-                aria-label="locale string here" // TODO: locale string here
+                aria-label={ t(props.label, value) }
                 aria-live="polite"
                 role="status"
                 { ...badgeAttrs }
diff --git a/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx b/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx
new file mode 100644
index 00000000000..2dfc6793a86
--- /dev/null
+++ b/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx
@@ -0,0 +1,138 @@
+/// <reference types="../../../../types/cypress" />
+
+import { VBadge } from '..'
+import { generate } from '@/../cypress/templates'
+
+const defaultColors = ['success', 'info', 'warning', 'error', 'invalid']
+const location = ['bottom-start', 'bottom-end', 'top-start', 'top-end']
+const rounded = ['circle', 'pill', 'shaped', 'tr-xl', 'br-lg', 0] // TODO: fix pill
+const offset = [8, -8, '4', '-4', undefined]
+
+const props = {
+  bordered: true,
+  color: defaultColors,
+  content: ['content'],
+  dot: true,
+  icon: ['mdi-vuetify'],
+  floating: true,
+  inline: true,
+  location,
+  modelValue: true,
+  rounded,
+}
+
+const stories = {
+  'Default badge': <VBadge />,
+  'Icon badge': <VBadge icon="mdi-vuetify" />,
+  'Offset badge': (
+    <div class="d-flex flex-column" style="gap: 0.8rem">
+      { ['offsetX', 'offsetY'].map(key => (
+        <>
+          <h5>{ key }</h5>
+          <div class="d-flex" style="gap: 1.3rem">
+            { offset.map(val => (
+              <VBadge {...{ [key]: val }} content={ `${val}` }>
+                <button class="v-btn v-btn--size-default v-btn--variant-contained">
+                  { key }
+                </button>
+              </VBadge>
+            )) }
+          </div>
+        </>
+      )) }
+    </div>
+  ),
+  'Text color': (
+    <div class="d-flex flex-row" style="gap: 0.8rem">
+      { defaultColors.map((color, idx) => (
+        <>
+          <div class="d-flex" style="gap: 0.8rem">
+            <VBadge textColor={ color } content={ idx.toString() }>
+              <button class="v-btn v-btn--size-default v-btn--variant-contained">
+                { color }
+              </button>
+            </VBadge>
+          </div>
+        </>
+      )) }
+    </div>
+  ),
+}
+
+// Tests
+describe('VBadge', () => {
+  describe('color', () => {
+    it('supports default color props', () => {
+      cy.mount(() => (
+        <>
+          {defaultColors.map((color, idx) => (
+            <VBadge color={ color } content={ idx.toString() }>
+              { color } badge
+            </VBadge>
+          )) }
+        </>
+      ))
+        .get('.v-badge')
+        .should('have.length', defaultColors.length)
+        .then(subjects => {
+          Array.from(subjects).forEach((subject, idx) => {
+            // TODO: refactor
+            expect(subject.querySelector(`.bg-${defaultColors[idx]}`)).to.be.instanceOf(HTMLSpanElement)
+            expect(subject).to.contain(defaultColors[idx])
+          })
+        })
+    })
+  })
+
+  describe('label', () => {
+    it('should have the designated aria label', () => {
+      cy.mount(<VBadge label="label-badge">label</VBadge>)
+        .get('.v-badge__badge')
+        .should('have.attr', 'aria-label', 'label-badge')
+    })
+  })
+
+  describe('max', () => {
+    it('should add a suffix if the content value is greater than the max value', () => {
+      cy.mount(<VBadge content="1000" max="999" />)
+        .get('.v-badge')
+        .should('contain.text', '+')
+    })
+  })
+
+  describe('tag', () => {
+    it('renders the proper tag instead of a div', () => {
+      cy.mount(<VBadge tag="custom-tag">tag</VBadge>)
+        .get('custom-tag')
+        .should('have.text', 'tag')
+    })
+  })
+
+  describe('textColor', () => {
+    it('supports default text color props', () => {
+      cy.mount(() => (
+        <>
+          {defaultColors.map((color, idx) => (
+            <VBadge textColor={ color } content={ idx.toString() }>
+              { color } text badge
+            </VBadge>
+          )) }
+        </>
+      ))
+        .get('.v-badge')
+        .should('have.length', defaultColors.length)
+        .then(subjects => {
+          Array.from(subjects).forEach((subject, idx) => {
+            // TODO: refactor
+            expect(subject.querySelector(`.text-${defaultColors[idx]}`)).to.be.instanceOf(HTMLSpanElement)
+            expect(subject).to.contain(defaultColors[idx])
+          })
+        })
+    })
+  })
+})
+
+// Useful to preview all of the variants and pre-made examples
+describe('Showcase', { viewportHeight: 1130, viewportWidth: 700 }, () => {
+  generate({ stories, props, component: VBadge })
+})
diff --git a/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.tsx b/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.tsx
index 41cd236d285..d3d460f8448 100644
--- a/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.tsx
+++ b/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.tsx
@@ -24,7 +24,7 @@ describe('VBadge.tsx', () => {
     [{ floating: true }],
     [{ icon: 'foo' }], // badge slot overrides icon
     [{ inline: true }],
-    [{ location: 'bottom-left' }],
+    [{ location: 'bottom-start' }],
     [{ location: undefined }],
     [{ location: null }],
     [{ content: '10', max: 9 }],
diff --git a/packages/vuetify/src/components/VBadge/__tests__/__snapshots__/VBadge.spec.tsx.snap b/packages/vuetify/src/components/VBadge/__tests__/__snapshots__/VBadge.spec.tsx.snap
index 9acc056b49d..22e8d91499a 100644
--- a/packages/vuetify/src/components/VBadge/__tests__/__snapshots__/VBadge.spec.tsx.snap
+++ b/packages/vuetify/src/components/VBadge/__tests__/__snapshots__/VBadge.spec.tsx.snap
@@ -7,9 +7,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { content: '10', m
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -29,9 +29,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { content: '10', m
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -51,9 +51,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { content: 'foo',
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -73,9 +73,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { dot: true } prop
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -92,9 +92,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { dot: true, float
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -111,9 +111,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { floating: true }
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -133,9 +133,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { floating: true }
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -155,9 +155,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { icon: 'foo' } pr
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -177,9 +177,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { inline: true } p
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -192,16 +192,16 @@ exports[`VBadge.tsx should match snapshot with badge slot and { inline: true } p
 </div>
 `;
 
-exports[`VBadge.tsx should match snapshot with badge slot and { location: 'bottom-left' } props 1`] = `
+exports[`VBadge.tsx should match snapshot with badge slot and { location: 'bottom-start' } props 1`] = `
 <div class="v-badge">
   <div class="v-badge__wrapper">
     <span>
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -221,9 +221,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { location: null }
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -243,9 +243,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { location: undefi
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -265,9 +265,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { modelValue: fals
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
             style="display: none;"
@@ -288,9 +288,9 @@ exports[`VBadge.tsx should match snapshot with badge slot and { modelValue: true
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -307,9 +307,9 @@ exports[`VBadge.tsx should match snapshot without badge slot and { content: 'foo
 <div class="v-badge">
   <div class="v-badge__wrapper">
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -326,9 +326,9 @@ exports[`VBadge.tsx should match snapshot without badge slot and { content: 'foo
 <div class="v-badge">
   <div class="v-badge__wrapper">
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
@@ -346,9 +346,9 @@ exports[`VBadge.tsx should match snapshot without badge slot and { icon: 'foo' }
 <div class="v-badge">
   <div class="v-badge__wrapper">
     <transition-stub>
-      <span class="v-badge__badge bg-primary"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >
diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass
index c727797dad1..0118851fe79 100644
--- a/packages/vuetify/src/components/VBtn/VBtn.sass
+++ b/packages/vuetify/src/components/VBtn/VBtn.sass
@@ -47,9 +47,6 @@
     &:focus-visible::after
       opacity: calc(.25 * var(--v-theme-overlay-multiplier))
 
-  &--flat
-    box-shadow: none
-
   &--icon
     border-radius: $button-icon-border-radius
     min-width: 0
@@ -99,6 +96,9 @@
       @include button-sizes($button-stacked-sizes, true)
       @include button-density('height', $button-stacked-density)
 
+  &--rounded
+    @include tools.rounded($button-rounded-border-radius)
+
 .v-btn__content
   transition: $button-content-transition
 
diff --git a/packages/vuetify/src/components/VBtn/_variables.scss b/packages/vuetify/src/components/VBtn/_variables.scss
index dc3ff1865f3..27e692e2265 100644
--- a/packages/vuetify/src/components/VBtn/_variables.scss
+++ b/packages/vuetify/src/components/VBtn/_variables.scss
@@ -41,6 +41,7 @@ $button-text-transform: tools.map-deep-get(settings.$typography, 'button', 'text
 $button-vertical-align: middle !default;
 $button-width-ratio: math.div(16, 9) !default;
 $button-stacked-width-ratio: 1 !default;
+$button-rounded-border-radius: map.get(settings.$rounded, 'xl') !default;
 
 $button-density: ('default': 0, 'comfortable': -2, 'compact': -3) !default;
 $button-stacked-density: ('default': 0, 'comfortable': -4, 'compact': -6) !default;
diff --git a/packages/vuetify/src/components/VCard/VCard.sass b/packages/vuetify/src/components/VCard/VCard.sass
index 4550d75a8f8..d84790ff20a 100644
--- a/packages/vuetify/src/components/VCard/VCard.sass
+++ b/packages/vuetify/src/components/VCard/VCard.sass
@@ -5,7 +5,6 @@
 
 .v-card
   display: block
-  color: $card-color
   overflow: hidden
   position: relative
   padding: $card-padding
@@ -110,6 +109,9 @@
   display: flex
   padding: $card-item-padding
 
+  + .v-card-text
+    padding-top: 0
+
 .v-card-media
   overflow: hidden
 
@@ -129,10 +131,10 @@
     padding: $card-subtitle-header-padding
 
 .v-card-text
+  color: $card-text-color
   font-size: $card-text-font-size
   font-weight: $card-text-font-weight
   letter-spacing: $card-text-letter-spacing
-  opacity: $card-text-opacity
   padding: $card-text-padding
   text-transform: $card-text-text-transform
   transition: inherit
@@ -140,6 +142,9 @@
 
   @include card-line-height-densities($card-text-densities)
 
+  + .v-card-actions
+    margin-top: -.5rem
+
 .v-card-title
   align-items: center
   display: flex
diff --git a/packages/vuetify/src/components/VCard/VCard.tsx b/packages/vuetify/src/components/VCard/VCard.tsx
index b282467c2f7..a49204881ad 100644
--- a/packages/vuetify/src/components/VCard/VCard.tsx
+++ b/packages/vuetify/src/components/VCard/VCard.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable complexity */
+
 // Styles
 import './VCard.sass'
 
@@ -60,7 +62,10 @@ export const VCard = defineComponent({
     ...makeRoundedProps(),
     ...makeRouterProps(),
     ...makeTagProps(),
-    ...makeVariantProps({ variant: 'contained' } as const),
+    ...makeVariantProps({
+      color: 'surface',
+      variant: 'contained',
+    } as const),
   },
 
   setup (props, { attrs, slots }) {
@@ -155,12 +160,14 @@ export const VCard = defineComponent({
                     </VCardTitle>
                   ) }
 
-                  <VCardSubtitle>
-                    { slots.subtitle
-                      ? slots.subtitle()
-                      : props.subtitle
-                    }
-                  </VCardSubtitle>
+                  { hasSubtitle && (
+                    <VCardSubtitle>
+                      { slots.subtitle
+                        ? slots.subtitle()
+                        : props.subtitle
+                      }
+                    </VCardSubtitle>
+                  ) }
                 </VCardHeaderText>
               ) }
 
diff --git a/packages/vuetify/src/components/VCard/__tests__/__snapshots__/VCard.spec.ts.snap b/packages/vuetify/src/components/VCard/__tests__/__snapshots__/VCard.spec.ts.snap
index a2bb3be6415..8af4ced5a37 100644
--- a/packages/vuetify/src/components/VCard/__tests__/__snapshots__/VCard.spec.ts.snap
+++ b/packages/vuetify/src/components/VCard/__tests__/__snapshots__/VCard.spec.ts.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VCard should match a snapshot 1`] = `
-<div class="v-card v-theme--light v-card--density-default v-card--variant-contained">
+<div class="v-card v-theme--light bg-surface v-card--density-default v-card--variant-contained">
   <div class="v-card__underlay">
   </div>
 </div>
 `;
 
 exports[`VCard should render slots and match a snapshot 1`] = `
-<div class="v-card v-theme--light v-card--density-default v-card--variant-contained">
+<div class="v-card v-theme--light bg-surface v-card--density-default v-card--variant-contained">
   <div class="v-card__underlay">
   </div>
   <div class="v-card-img">
diff --git a/packages/vuetify/src/components/VCard/_variables.scss b/packages/vuetify/src/components/VCard/_variables.scss
index ba9ab12512b..5a2e8a20934 100644
--- a/packages/vuetify/src/components/VCard/_variables.scss
+++ b/packages/vuetify/src/components/VCard/_variables.scss
@@ -21,7 +21,7 @@ $card-disabled-opacity: 0.6 !default;
 $card-elevation: 1 !default;
 $card-hover-elevation: 8 !default;
 $card-item-align-items: center !default;
-$card-item-padding: .5rem 1rem !default;
+$card-item-padding: .625rem 1rem !default;
 $card-padding: 0 !default;
 $card-positions: absolute fixed !default;
 $card-subtitle-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
@@ -29,19 +29,19 @@ $card-subtitle-comfortable-line-height: 1.125rem !default;
 $card-subtitle-compact-line-height: 1rem !default;
 $card-subtitle-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default;
 $card-subtitle-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default;
-$card-subtitle-header-padding: 0 !default;
+$card-subtitle-header-padding: 0 0 .25rem !default;
 $card-subtitle-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default;
 $card-subtitle-line-height: tools.map-deep-get(settings.$typography, 'body-2', 'line-height') !default;
 $card-subtitle-opacity: var(--v-medium-emphasis-opacity) !default;
 $card-subtitle-padding: 0 1rem !default;
 $card-subtitle-text-transform: none !default;
+$card-text-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $card-text-comfortable-line-height: 1.2rem !default;
 $card-text-compact-line-height: 1.15rem !default;
 $card-text-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default;
 $card-text-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default;
 $card-text-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default;
 $card-text-line-height: tools.map-deep-get(settings.$typography, 'body-2', 'line-height') !default;
-$card-text-opacity: var(--v-medium-emphasis-opacity) !default;
 $card-text-padding-bottom: 1rem !default;
 $card-text-padding: 1rem !default;
 $card-text-text-transform: tools.map-deep-get(settings.$typography, 'body-2', 'text-transform') !default;
diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass
index e0ff6ac769c..710ee1e549f 100644
--- a/packages/vuetify/src/components/VField/VField.sass
+++ b/packages/vuetify/src/components/VField/VField.sass
@@ -20,34 +20,10 @@
   grid-area: control
   position: relative
 
-  &,
-  .v-icon
-    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))
-
-  &--error,
-  &--disabled
-    .v-messages,
-    .v-icon
-      color: inherit
-
-  .v-label
-    color: inherit
-
-  &--focused
-    &,
-    .v-label
-      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
-
-  &--error
-    color: rgb(var(--v-theme-error))
-
   &--disabled
+    opacity: var(--v-disabled-opacity)
     pointer-events: none
 
-    &,
-    input
-      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity))
-
   --v-field-padding-start: #{$field-control-padding-start}
   --v-field-padding-end: #{$field-control-padding-end}
   --v-field-padding-top: #{$field-control-padding-top}
@@ -92,13 +68,6 @@
   &--single-line
     --v-field-padding-top: 0
 
-  &--variant-filled,
-  &--variant-outlined,
-  &--variant-underlined
-    &.v-field--focused
-      .v-label
-        color: inherit
-
   &--variant-contained,
   &--variant-filled
     $root: &
@@ -121,6 +90,7 @@
 /* endregion */
 /* region ELEMENTS */
 .v-field__input
+  color: inherit
   letter-spacing: $field-letter-spacing
   opacity: $field-input-opacity
   padding-inline-start: var(--v-field-padding-start)
@@ -169,6 +139,21 @@
   .v-field--focused &
     opacity: 1
 
+.v-field__prepend-inner,
+.v-field__append-inner,
+.v-field__clearable
+  > .v-icon
+    opacity: var(--v-medium-emphasis-opacity)
+
+  .v-field--disabled &,
+  .v-field--error &
+    > .v-icon
+      opacity: 1
+
+  .v-field--error:not(.v-field--disabled) &
+    > .v-icon
+      color: rgb(var(--v-theme-error))
+
 .v-field__clearable
   cursor: pointer
   opacity: 0
@@ -198,9 +183,13 @@
   .v-field--active &
     visibility: hidden
 
-  .v-input--disabled &,
-  .v-input--error &
-    color: inherit
+  .v-field--disabled &,
+  .v-field--focused &,
+  .v-field--error &
+    opacity: 1
+
+  .v-field--error:not(.v-field--disabled) &
+    color: rgb(var(--v-theme-error))
 
   &--floating
     --v-field-label-scale: #{$field-label-floating-scale}em
@@ -249,6 +238,9 @@
   .v-field:hover &
     --v-field-border-opacity: var(--v-high-emphasis-opacity)
 
+  .v-field--error:not(.v-field--disabled) &
+    color: rgb(var(--v-theme-error))
+
   .v-field.v-field--focused &,
   .v-input.v-input--error &
     --v-field-border-opacity: 1
@@ -348,7 +340,7 @@
 /* region OVERLAY */
 .v-field--variant-filled
   .v-field__overlay
-    background-color: rgb(var(--v-theme-on-surface))
+    background-color: currentColor
     border-radius: inherit
     opacity: $field-overlay-filled-opacity
     pointer-events: none
diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
index 8d6f51d8b36..3798991cc8c 100644
--- a/packages/vuetify/src/components/VField/VField.tsx
+++ b/packages/vuetify/src/components/VField/VField.tsx
@@ -10,7 +10,6 @@ import { VFieldLabel } from './VFieldLabel'
 import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { useBackgroundColor, useTextColor } from '@/composables/color'
-import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeFocusProps, useFocus } from '@/composables/focus'
 
 // Utilities
@@ -24,7 +23,6 @@ import {
   propsFactory,
   standardEasing,
   useRender,
-  wrapInArray,
 } from '@/util'
 
 // Types
@@ -93,10 +91,11 @@ export const VField = genericComponent<new <T>() => {
   inheritAttrs: false,
 
   props: {
+    active: Boolean,
+    dirty: Boolean,
     disabled: Boolean,
     error: Boolean,
     id: String,
-    modelValue: null,
 
     ...makeFocusProps(),
     ...makeVFieldProps(),
@@ -112,14 +111,11 @@ export const VField = genericComponent<new <T>() => {
   },
 
   setup (props, { attrs, emit, slots }) {
-    const model = useProxiedModel(props, 'modelValue')
-
     const { themeClasses } = provideTheme(props)
     const { loaderClasses } = useLoader(props)
     const { focusClasses, isFocused, focus, blur } = useFocus(props)
 
-    const isDirty = computed(() => wrapInArray(model.value || []).length > 0)
-    const isActive = computed(() => isDirty.value || isFocused.value)
+    const isActive = computed(() => props.dirty || props.active)
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
 
     const uid = getUid()
@@ -210,6 +206,7 @@ export const VField = genericComponent<new <T>() => {
               'v-field--active': isActive.value,
               'v-field--appended': hasAppend,
               'v-field--disabled': props.disabled,
+              'v-field--dirty': props.dirty,
               'v-field--error': props.error,
               'v-field--has-background': !!props.bgColor,
               'v-field--persistent-clear': props.persistentClear,
@@ -222,7 +219,6 @@ export const VField = genericComponent<new <T>() => {
             backgroundColorClasses.value,
             focusClasses.value,
             loaderClasses.value,
-            textColorClasses.value,
           ]}
           style={[
             backgroundColorStyles.value,
@@ -257,7 +253,11 @@ export const VField = genericComponent<new <T>() => {
 
           <div class="v-field__field">
             { ['contained', 'filled'].includes(props.variant) && hasLabel.value && (
-              <VFieldLabel ref={ floatingLabelRef } floating>
+              <VFieldLabel
+                ref={ floatingLabelRef }
+                class={[textColorClasses.value]}
+                floating
+              >
                 { label }
               </VFieldLabel>
             ) }
@@ -281,7 +281,7 @@ export const VField = genericComponent<new <T>() => {
             <VExpandXTransition>
               <div
                 class="v-field__clearable"
-                v-show={ isDirty.value }
+                v-show={ props.dirty }
               >
                 { slots.clear
                   ? slots.clear()
@@ -311,7 +311,12 @@ export const VField = genericComponent<new <T>() => {
             </div>
           ) }
 
-          <div class="v-field__outline">
+          <div
+            class={[
+              'v-field__outline',
+              textColorClasses.value,
+            ]}
+          >
             { isOutlined && (
               <>
                 <div class="v-field__outline__start" />
diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
index 5c9d9d7a2dd..25e851b72ad 100644
--- a/packages/vuetify/src/components/VFileInput/VFileInput.tsx
+++ b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -40,7 +40,6 @@ export const VFileInput = defineComponent({
     hint: String,
     persistentHint: Boolean,
     placeholder: String,
-    persistentPlaceholder: Boolean,
     showSize: {
       type: [Boolean, Number] as PropType<boolean | 1000 | 1024>,
       default: false,
@@ -99,14 +98,10 @@ export const VFileInput = defineComponent({
     const vFieldRef = ref<VInput>()
     const isFocused = ref(false)
     const inputRef = ref<HTMLInputElement>()
-    const isActive = computed(() => (
-      isFocused.value ||
-      props.persistentPlaceholder
-    ))
     const messages = computed(() => {
       return props.messages.length
         ? props.messages
-        : (isActive.value || props.persistentHint) ? props.hint : ''
+        : (props.persistentHint) ? props.hint : ''
     })
     function onFocus () {
       if (inputRef.value !== document.activeElement) {
@@ -158,16 +153,19 @@ export const VFileInput = defineComponent({
             ...slots,
             default: ({
               isDisabled,
+              isDirty,
               isReadonly,
+              isValid,
             }) => (
               <VField
                 ref={ vFieldRef }
+                dirty={ isDirty.value }
                 focused={ isFocused.value }
                 prepend-icon={ props.prependIcon }
                 onClick:control={ onControlClick }
                 onClick:clear={ onClear }
                 { ...fieldProps }
-                modelValue={ model.value }
+                error={ isValid.value === false }
               >
                 {{
                   ...slots,
diff --git a/packages/vuetify/src/components/VIcon/VIcon.sass b/packages/vuetify/src/components/VIcon/VIcon.sass
index 1eb33e1749f..91e3b1a2b6d 100644
--- a/packages/vuetify/src/components/VIcon/VIcon.sass
+++ b/packages/vuetify/src/components/VIcon/VIcon.sass
@@ -29,6 +29,8 @@
 
 .v-icon__svg
   fill: currentColor
+  width: 100%
+  height: 100%
 
 .v-icon
   &--left
diff --git a/packages/vuetify/src/components/VInput/VInput.sass b/packages/vuetify/src/components/VInput/VInput.sass
index 47775bf4088..934efa0e5eb 100644
--- a/packages/vuetify/src/components/VInput/VInput.sass
+++ b/packages/vuetify/src/components/VInput/VInput.sass
@@ -6,26 +6,9 @@
   display: grid
   flex: 1 1 auto
 
-  &,
-  .v-icon
-    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))
-
-  &--error,
-  &--disabled
-    .v-icon,
-    .v-messages
-      color: inherit
-
-  &--error
-    color: rgb(var(--v-theme-error))
-
   &--disabled
     pointer-events: none
 
-    &,
-    input
-      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity))
-
   @at-root
     @include tools.density('v-input', $input-density) using ($modifier)
       --v-input-control-height: #{$input-control-height + $modifier}
@@ -67,6 +50,26 @@
   overflow: hidden
   justify-content: space-between
 
+.v-input__details,
+.v-input__prepend,
+.v-input__append
+  > .v-icon
+    opacity: var(--v-medium-emphasis-opacity)
+
+  .v-input--disabled &,
+  .v-input--error &
+    > .v-icon,
+    .v-messages
+      opacity: 1
+
+  .v-input--disabled &
+    opacity: var(--v-disabled-opacity)
+
+  .v-input--error:not(.v-input--disabled) &
+    > .v-icon,
+    .v-messages
+      color: rgb(var(--v-theme-error))
+
 .v-input__prepend,
 .v-input__append
   display: flex
diff --git a/packages/vuetify/src/components/VLabel/VLabel.sass b/packages/vuetify/src/components/VLabel/VLabel.sass
index 3c948909bd7..32e5fc17501 100644
--- a/packages/vuetify/src/components/VLabel/VLabel.sass
+++ b/packages/vuetify/src/components/VLabel/VLabel.sass
@@ -5,18 +5,12 @@
 
 .v-label
   align-items: center
-  color: $label-color
   cursor: pointer
   display: $label-display
   font-size: $label-font-size
   letter-spacing: $label-letter-spacing
   min-width: 0
+  opacity: var(--v-medium-emphasis-opacity)
   overflow: hidden
   text-overflow: ellipsis
   white-space: nowrap
-
-  &--disabled
-    color: $label-disabled-color
-
-  &--error
-    color: $label-error-color
diff --git a/packages/vuetify/src/components/VLabel/VLabel.tsx b/packages/vuetify/src/components/VLabel/VLabel.tsx
index be8359272ee..2073a1b323d 100644
--- a/packages/vuetify/src/components/VLabel/VLabel.tsx
+++ b/packages/vuetify/src/components/VLabel/VLabel.tsx
@@ -11,8 +11,6 @@ export const VLabel = defineComponent({
   name: 'VLabel',
 
   props: {
-    disabled: Boolean,
-    error: Boolean,
     text: String,
 
     ...makeThemeProps(),
@@ -20,15 +18,7 @@ export const VLabel = defineComponent({
 
   setup (props, { slots }) {
     return () => (
-      <label
-        class={[
-          'v-label',
-          {
-            'v-label--disabled': props.disabled,
-            'v-label--error': props.error,
-          },
-        ]}
-      >
+      <label class="v-label">
         { props.text }
 
         { slots.default?.() }
diff --git a/packages/vuetify/src/components/VMessages/VMessages.sass b/packages/vuetify/src/components/VMessages/VMessages.sass
index 7667f3aeaea..95207bf802f 100644
--- a/packages/vuetify/src/components/VMessages/VMessages.sass
+++ b/packages/vuetify/src/components/VMessages/VMessages.sass
@@ -4,11 +4,11 @@
 
 
 .v-messages
-  color: $messages-color
   flex: 1 1 auto
   font-size: $messages-font-size
   min-height: $messages-min-height
   min-width: 1px // Ensure takes up space with no messages and inside of flex
+  opacity: var(--v-medium-emphasis-opacity)
   position: relative
 
   &__item
diff --git a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx
index 40a67d87144..1152ff9da5e 100644
--- a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx
+++ b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx
@@ -65,15 +65,10 @@ export const VRadioGroup = defineComponent({
             default: ({
               isDisabled,
               isReadonly,
-              isValid,
             }) => (
               <>
                 { label && (
-                  <VLabel
-                    disabled={ isDisabled.value }
-                    error={ isValid.value === false }
-                    for={ id.value }
-                  >
+                  <VLabel for={ id.value }>
                     { label }
                   </VLabel>
                 ) }
diff --git a/packages/vuetify/src/components/VSelect/VSelect.sass b/packages/vuetify/src/components/VSelect/VSelect.sass
index 0ecadafd2bc..9713a7386b3 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.sass
+++ b/packages/vuetify/src/components/VSelect/VSelect.sass
@@ -13,13 +13,12 @@
     .v-field__input
       cursor: inherit
 
+    input.v-field__input
+      opacity: 0
+
   .v-field.v-field
     cursor: pointer
 
-  &.v-input--dirty
-    input
-      opacity: 0
-
   &__content
     overflow: hidden
 
@@ -38,6 +37,7 @@
   &__selections
     align-items: flex-start
     color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
+    flex: 1 1
     display: flex
 
   &--active-menu
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index c2ceb150a18..d07e8cedf82 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -3,58 +3,83 @@ import './VSelect.sass'
 
 // Components
 import { VChip } from '@/components/VChip'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 import { VIcon } from '@/components/VIcon'
 import { VList, VListItem } from '@/components/VList'
 import { VMenu } from '@/components/VMenu'
 import { VTextField } from '@/components/VTextField'
 
 // Composables
-import { makeFilterProps, useFilter } from '@/composables/filter'
+import { makeTransitionProps } from '@/composables/transition'
 import { useForwardRef } from '@/composables/forwardRef'
 import { useLocale } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utility
 import { computed, ref, watch } from 'vue'
-import { genericComponent, useRender, wrapInArray } from '@/util'
+import { genericComponent, propsFactory, useRender, wrapInArray } from '@/util'
 
 // Types
 import type { LinkProps } from '@/composables/router'
 import type { MakeSlots } from '@/util'
 import type { PropType } from 'vue'
 
+export interface DefaultSelectionSlot {
+  selection: {
+    active: boolean
+    text: string
+    value: any
+  }
+}
+
+export interface DefaultChipSlot extends DefaultSelectionSlot {
+  props: {
+    'onClick:close': (e: Event) => void
+    modelValue: any
+  }
+}
+
 export type SelectItem = string | (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | (LinkProps & {
   text: string
 })
 
+export const makeSelectProps = propsFactory({
+  chips: Boolean,
+  closableChips: Boolean,
+  eager: Boolean,
+  hideNoData: Boolean,
+  hideSelected: Boolean,
+  items: {
+    type: Array as PropType<SelectItem[]>,
+    default: () => ([]),
+  },
+  menuIcon: {
+    type: String,
+    default: '$dropdown',
+  },
+  modelValue: {
+    type: [Number, String, Array],
+    default: () => ([]),
+  },
+  multiple: Boolean,
+  noDataText: {
+    type: String,
+    default: '$vuetify.noDataText',
+  },
+  openOnClear: Boolean,
+}, 'select')
+
 export const VSelect = genericComponent<new <T>() => {
   $slots: MakeSlots<{
     default: []
-    title: []
+    selection: [DefaultSelectionSlot]
   }>
 }>()({
   name: 'VSelect',
 
   props: {
-    chips: Boolean,
-    hideNoData: Boolean,
-    hideSelected: Boolean,
-    items: {
-      type: Array as PropType<SelectItem[]>,
-      default: () => ([]),
-    },
-    modelValue: {
-      type: [Number, String, Array],
-      default: () => ([]),
-    },
-    multiple: Boolean,
-    noDataText: {
-      type: String,
-      default: '$vuetify.noDataText',
-    },
-    openOnClear: Boolean,
-
-    ...makeFilterProps(),
+    ...makeSelectProps(),
+    ...makeTransitionProps({ transition: 'scale-transition' }),
   },
 
   emits: {
@@ -62,7 +87,7 @@ export const VSelect = genericComponent<new <T>() => {
     'update:modelValue': (val: any) => true,
   },
 
-  setup (props, { attrs, slots }) {
+  setup (props, { slots, emit }) {
     const { t } = useLocale()
     const vTextFieldRef = ref()
     const activator = ref()
@@ -73,7 +98,6 @@ export const VSelect = genericComponent<new <T>() => {
       v => wrapInArray(v),
       (v: any) => props.multiple ? v : v[0]
     )
-    const { filteredItems } = useFilter(props, props.items)
 
     const menu = ref(false)
     const active = computed({
@@ -89,25 +113,26 @@ export const VSelect = genericComponent<new <T>() => {
     const items = computed(() => {
       const array = []
 
-      for (const { item } of filteredItems.value as any) {
+      for (const item of props.items as any) {
         const title = item?.title ?? String(item)
         const value = item?.value ?? item
+        const active = model.value.includes(value)
 
-        if (props.hideSelected && active.value.includes(value)) {
-          continue
-        }
+        if (props.hideSelected && active) continue
 
-        array.push({ title, value })
-      }
-
-      if (!array.length && !props.hideNoData) {
-        array.push({ title: t(props.noDataText) })
+        array.push({
+          active,
+          title,
+          value,
+        })
       }
 
       return array
     })
     const selections = computed(() => {
-      return items.value.filter(item => active.value.includes(item.value))
+      return model.value.map(value => {
+        return items.value.find(item => item.value === value)
+      })
     })
 
     function onClear (e: MouseEvent) {
@@ -138,6 +163,8 @@ export const VSelect = genericComponent<new <T>() => {
     })
 
     useRender(() => {
+      const hasChips = !!(props.chips || slots.chip)
+
       return (
         <VTextField
           ref={ vTextFieldRef }
@@ -146,6 +173,7 @@ export const VSelect = genericComponent<new <T>() => {
             {
               'v-select--active-menu': menu.value,
               'v-select--chips': !!props.chips,
+              [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true,
             },
           ]}
           readonly
@@ -154,15 +182,20 @@ export const VSelect = genericComponent<new <T>() => {
           onBlur={ () => menu.value = false }
           modelValue={ model.value.join(', ') }
           onKeydown={ onKeydown }
-          { ...attrs }
         >
           {{
             ...slots,
-            appendInner: () => (
-              <VIcon
-                class="v-select__menu-icon"
-                icon="mdi-menu-down"
-              />
+            appendInner: slotProps => (
+              <>
+                { slots.appendInner?.(slotProps) }
+
+                { props.menuIcon && (
+                  <VIcon
+                    class="v-select__menu-icon"
+                    icon={ props.menuIcon }
+                  />
+                ) }
+              </>
             ),
             default: () => (
               <>
@@ -171,50 +204,78 @@ export const VSelect = genericComponent<new <T>() => {
                     v-model={ menu.value }
                     activator={ activator.value }
                     contentClass="v-select__content"
+                    eager={ props.eager }
                     openOnClick={ false }
+                    transition={ props.transition }
                   >
                     <VList
                       v-model:active={ active.value }
-                      items={ items.value }
                       activeStrategy={ props.multiple ? 'multiple' : 'single' }
                     >
-                      {{
-                        item: (item: any) => {
-                          return (
-                            <VListItem
-                              onMousedown={ (e: MouseEvent) => e.preventDefault() }
-                              { ...item }
-                            />
-                          )
-                        },
-                      }}
+                      { !items.value.length && !props.hideNoData && (
+                        <VListItem title={ t(props.noDataText) } />
+                      )}
+
+                      { items.value.map(({ title, value }) => (
+                        <VListItem
+                          title={ title }
+                          value={ value }
+                          onMousedown={ (e: MouseEvent) => e.preventDefault() }
+                        />
+                      )) }
                     </VList>
                   </VMenu>
                 ) }
 
-                { selections.value.length > 0 && (
-                  <div class="v-select__selections v-field__input">
-                    { selections.value.map((selection, index) => (
-                      <div class="v-select__selection">
-                        { props.chips
-                          ? (
-                            <VChip
-                              text={ selection.title }
-                              size="small"
-                            />
-                          ) : (
-                            <span class="v-select__selection-text">
-                              { selection.title }
-                              { index < model.value.length - 1 && (
-                                <span class="v-select__selection-comma">,</span>
-                              ) }
-                            </span>
-                          )
-                        }
-                      </div>
-                    )) }
-                  </div>
-                ) }
+                <div class="v-select__selections v-field__input">
+                  { selections.value.map((selection, index) => {
+                    const active = selection?.active
+                    const title = selection?.title
+                    const value = selection?.value
+
+                    function onChipClose (e: Event) {
+                      e.stopPropagation()
+                      e.preventDefault()
+
+                      model.value = model.value.filter(item => item !== value)
+                    }
+
+                    const slotProps = {
+                      'onClick:close': onChipClose,
+                      modelValue: active,
+                    }
+
+                    return (
+                      <VDefaultsProvider
+                        defaults={{
+                          VChip: {
+                            closable: props.closableChips,
+                            size: 'small',
+                            text: title,
+                          },
+                        }}
+                      >
+                        <div class="v-select__selection">
+                          { hasChips
+                            ? slots.chip
+                              ? slots.chip({ props: slotProps, selection })
+                              : (<VChip { ...slotProps } />)
+                            : slots.selection
+                              ? slots.selection({ selection })
+                              : (
+                                <span class="v-select__selection-text">
+                                  { title }
+                                  { index < model.value.length - 1 && (
+                                    <span class="v-select__selection-comma">,</span>
+                                  ) }
+                                </span>
+                              )
+                          }
+                        </div>
+                      </VDefaultsProvider>
+                    )
+                  }) }
+                </div>
               </>
             ),
           }}
diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass
index 20ed1f2ab9e..31b3ad9f3e4 100644
--- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass
+++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass
@@ -14,26 +14,22 @@
   position: relative
   user-select: none
 
-  .v-icon
-    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))
-
   .v-label
     height: 100%
     width: 100%
 
-  &--dirty
-    .v-icon
-      color: inherit
-
   &--disabled
     opacity: var(--v-disabled-opacity)
     pointer-events: none
 
-  &--error
-    color: rgb(var(--v-theme-error))
+  &--error,
+  &--disabled
+    .v-label
+      opacity: 1
 
-    .v-icon
-      color: inherit
+  &--error:not(.v-selection-control--disabled)
+    .v-label
+      color: rgb(var(--v-theme-error))
 
   &--inline
     display: inline-flex
@@ -83,5 +79,17 @@
   &:hover::before
     opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
 
+  > .v-icon
+    opacity: var(--v-medium-emphasis-opacity)
+
+  .v-selection-control--disabled &,
+  .v-selection-control--error &
+    > .v-icon
+      opacity: 1
+
+  .v-selection-control--error:not(.v-selection-control--disabled) &
+    > .v-icon
+      color: rgb(var(--v-theme-error))
+
   .v-selection-control--focus-visible &::before
     opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
index 89d1c045276..36cb0f1a4fc 100644
--- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
+++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
@@ -222,10 +222,13 @@ export const VSelectionControl = genericComponent<new <T>() => {
               'v-selection-control--inline': group?.inline.value || props.inline,
             },
             densityClasses.value,
-            textColorClasses.value,
           ]}
         >
-          <div class="v-selection-control__wrapper">
+          <div class={[
+            'v-selection-control__wrapper',
+            textColorClasses.value,
+          ]}
+          >
             { slots.default?.() }
 
             <div
@@ -268,11 +271,7 @@ export const VSelectionControl = genericComponent<new <T>() => {
             </div>
           </div>
 
-          <VLabel
-            disabled={ props.disabled }
-            error={ props.error }
-            for={ id.value }
-          >
+          <VLabel for={ id.value }>
             { label }
           </VLabel>
         </div>
diff --git a/packages/vuetify/src/components/VSlider/VSlider.sass b/packages/vuetify/src/components/VSlider/VSlider.sass
index b3cd5e94a23..c9759971a9f 100644
--- a/packages/vuetify/src/components/VSlider/VSlider.sass
+++ b/packages/vuetify/src/components/VSlider/VSlider.sass
@@ -24,6 +24,12 @@
   align-items: center
   cursor: pointer
 
+  .v-input--disabled &
+    opacity: var(--v-disabled-opacity)
+
+  .v-input--error:not(.v-input--disabled) &
+    color: rgb(var(--v-theme-error))
+
 // Modifiers
 .v-slider.v-input--horizontal
   margin-left: $slider-horizontal-left
diff --git a/packages/vuetify/src/components/VSlider/VSliderThumb.sass b/packages/vuetify/src/components/VSlider/VSliderThumb.sass
index ff7ad6788ad..da9f8e1bfe4 100644
--- a/packages/vuetify/src/components/VSlider/VSliderThumb.sass
+++ b/packages/vuetify/src/components/VSlider/VSliderThumb.sass
@@ -11,6 +11,9 @@
 .v-slider-thumb
   color: rgb(var(--v-theme-surface-variant))
 
+  .v-input--error:not(.v-input--disabled) &
+    color: inherit
+
 .v-slider-thumb__label
   background: rgba(var(--v-theme-surface-variant), .7)
   color: rgb(var(--v-theme-on-surface-variant))
diff --git a/packages/vuetify/src/components/VSlider/VSliderTrack.sass b/packages/vuetify/src/components/VSlider/VSliderTrack.sass
index 953f91d6bc6..a18c9dcb286 100644
--- a/packages/vuetify/src/components/VSlider/VSliderTrack.sass
+++ b/packages/vuetify/src/components/VSlider/VSliderTrack.sass
@@ -32,6 +32,9 @@
     .v-slider--pressed &
       transition: none
 
+    .v-input--error:not(.v-input--disabled) &
+      background-color: currentColor
+
 .v-slider-track__ticks
   height: 100%
   width: 100%
diff --git a/packages/vuetify/src/components/VSlider/slider.ts b/packages/vuetify/src/components/VSlider/slider.ts
index 23576a8ed0f..d0e420222c4 100644
--- a/packages/vuetify/src/components/VSlider/slider.ts
+++ b/packages/vuetify/src/components/VSlider/slider.ts
@@ -76,6 +76,7 @@ function getPosition (e: MouseEvent | TouchEvent, position: 'clientX' | 'clientY
 
 export const makeSliderProps = propsFactory({
   disabled: Boolean,
+  error: Boolean,
   readonly: Boolean,
   max: {
     type: [Number, String],
@@ -177,9 +178,9 @@ export const useSlider = ({
   const disabled = toRef(props, 'disabled')
   const vertical = computed(() => props.direction === 'vertical')
 
-  const thumbColor = computed(() => props.disabled ? undefined : props.thumbColor ?? props.color)
-  const trackColor = computed(() => props.disabled ? undefined : props.trackColor ?? props.color)
-  const trackFillColor = computed(() => props.disabled ? undefined : props.trackFillColor ?? props.color)
+  const thumbColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color)
+  const trackColor = computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color)
+  const trackFillColor = computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color)
 
   const mousePressed = ref(false)
 
diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass
index 959cfbb4e26..1e0ebcb9ca8 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.sass
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass
@@ -16,7 +16,7 @@
   background-color: currentColor
   transition: none
 
-  .v-selection-control--error &
+  .v-selection-control--error:not(.v-selection-control--disabled) &
     background-color: $switch-error-background-color
 
 .v-switch__track
diff --git a/packages/vuetify/src/components/VTextField/VTextField.sass b/packages/vuetify/src/components/VTextField/VTextField.sass
index 9ae4d9f5a78..bd93596b55f 100644
--- a/packages/vuetify/src/components/VTextField/VTextField.sass
+++ b/packages/vuetify/src/components/VTextField/VTextField.sass
@@ -3,67 +3,77 @@
 @use '../../styles/settings'
 @use './variables' as *
 
-// TODO: abstract variables
-
+/* region BLOCK */
 .v-text-field
+  input
+    flex: $text-field-input-flex
+    opacity: 0
+    transition: $text-field-input-transition
+
+    &:focus,
+    &:active
+      outline: none
+
+    // Remove Firefox red outline
+    &:invalid
+      box-shadow: none
+
+  .v-field
+    cursor: text
+
+  .v-field__input
+    @at-root #{selector.append('.v-text-field--prefixed', &)}
+      --v-field-padding-start: #{$text-field-input-padding-start}
+
+    @at-root #{selector.append('.v-text-field--suffixed', &)}
+      --v-field-padding-end: #{$text-field-input-padding-end}
+
+  .v-input__details
+    padding-inline-start: $text-field-details-padding-inline
+    padding-inline-end: $text-field-details-padding-inline
+
   .v-field--active
-    input,
-    .v-text-field__prefix,
-    .v-text-field__suffix
+    input
       opacity: 1
 
+  .v-field--single-line
+    input
+      transition: none
+
+/* endregion */
+/* region ELEMENTS */
+.v-text-field
   &__prefix,
   &__suffix
-    color: $text-field-affix-color
-    display: flex
     align-items: center
+    color: $text-field-affix-color
     cursor: default
+    display: flex
     opacity: 0
-    transition: .15s opacity settings.$standard-easing
-    white-space: nowrap
     padding-top: var(--v-field-padding-top)
+    transition: inherit
+    white-space: nowrap
+
+    .v-field--active &
+      opacity: 1
+
+    .v-field--disabled &
+      color: $text-field-disabled-affix-color
 
   &__prefix
-    padding-inline-end: var(--v-field-padding-before)
+    padding-inline-start: var(--v-field-padding-start)
 
   &__suffix
     padding-inline-end: var(--v-field-padding-end)
 
-  .v-field__input
-    @at-root #{selector.append('.v-text-field--prefixed', &)}
-      --v-field-padding-start: 6px
-    @at-root #{selector.append('.v-text-field--suffixed', &)}
-      --v-field-padding-end: 0
-
+/* endregion */
+/* region MODIFIERS */
+.v-text-field
   &--flush-details
     .v-input__details
       padding: 0
 
-  .v-field
-    cursor: text
-
-    &--single-line
-      input
-        transition: none
-
-  .v-input__details
-    padding-inline-start: $text-field-details-padding-inline
-    padding-inline-end: $text-field-details-padding-inline
-
-  input
-    flex: 1
-    opacity: 0
-    transition: .15s opacity settings.$standard-easing
-
-    &:focus,
-    &:active
-      outline: none
-
-    // Remove Firefox red outline
-    &:invalid
-      box-shadow: none
-
-  .v-field--disabled
-    .v-text-field__prefix,
-    .v-text-field__suffix
-      color: $text-field-disabled-affix-color
+  &--persistent-placeholder
+    input
+      opacity: 1
+/* endregion */
diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
index ce1de394519..c00c0a7548e 100644
--- a/packages/vuetify/src/components/VTextField/VTextField.tsx
+++ b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -37,6 +37,7 @@ export const VTextField = genericComponent<new <T>() => {
     autofocus: Boolean,
     counter: [Boolean, Number, String] as PropType<true | number | string>,
     counterValue: Function as PropType<(value: any) => number>,
+    dirty: Boolean,
     hint: String,
     persistentHint: Boolean,
     prefix: String,
@@ -96,14 +97,14 @@ export const VTextField = genericComponent<new <T>() => {
     const isFocused = ref(false)
     const inputRef = ref<HTMLInputElement>()
     const isActive = computed(() => (
-      isFocused.value ||
       activeTypes.includes(props.type) ||
-      props.persistentPlaceholder
+      props.persistentPlaceholder ||
+      isFocused.value
     ))
     const messages = computed(() => {
       return props.messages.length
         ? props.messages
-        : (isActive.value || props.persistentHint) ? props.hint : ''
+        : (isFocused.value || props.persistentHint) ? props.hint : ''
     })
     function onFocus () {
       if (inputRef.value !== document.activeElement) {
@@ -142,6 +143,7 @@ export const VTextField = genericComponent<new <T>() => {
           class={[
             'v-text-field',
             {
+              'v-text-field--persistent-placeholder': props.persistentPlaceholder,
               'v-text-field--prefixed': props.prefix,
               'v-text-field--suffixed': props.suffix,
               'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant),
@@ -163,6 +165,8 @@ export const VTextField = genericComponent<new <T>() => {
             }) => (
               <VField
                 ref={ vFieldRef }
+                active={ isActive.value || isDirty.value }
+                dirty={ isDirty.value }
                 focused={ isFocused.value }
                 onMousedown={ (e: MouseEvent) => {
                   if (e.target === inputRef.value) return
@@ -176,7 +180,6 @@ export const VTextField = genericComponent<new <T>() => {
                 role="textbox"
                 { ...fieldProps }
                 error={ isValid.value === false }
-                modelValue={ isDirty.value }
               >
                 {{
                   ...slots,
diff --git a/packages/vuetify/src/components/VTextField/_variables.scss b/packages/vuetify/src/components/VTextField/_variables.scss
index d2b499e4722..ced7a215cfc 100644
--- a/packages/vuetify/src/components/VTextField/_variables.scss
+++ b/packages/vuetify/src/components/VTextField/_variables.scss
@@ -2,52 +2,10 @@
 
 // Defaults
 $text-field-affix-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
-$text-field-disabled-affix-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
 $text-field-border-radius: settings.$border-radius-root !default;
-$text-field-line-height: 20px !default;
-$text-field-padding: 8px 0 8px !default;
-$text-field-dense-padding: 4px 0 2px !default;
-$text-field-append-prepend-margin: 4px !default;
-$text-field-dense-append-prepend-margin: 0px !default;
-$text-field-dense-icon-append-prepend-margin-top: 8px !default;
-$text-field-filled-full-width-outlined-slot-min-height: 56px !default;
-$text-field-filled-full-width-outlined-dense-slot-min-height: 52px !default;
-$text-field-filled-full-width-outlined-single-line-slot-min-height: 40px !default;
-$text-field-filled-border-radius: $text-field-border-radius $text-field-border-radius 0 0 !default;
-$text-field-counter-margin: 8px !default;
-$text-field-label-top: 6px !default;
-$text-field-label-active-transform: translateY(-18px) scale(.75) !default;
-$text-field-details-min-height: 14px !default;
-$text-field-filled-full-width-label-top: 18px !default;
-$text-field-filled-full-width-label-active-transform: translateY(-6px) scale(.75) !default;
-$text-field-dense-label-top: 17px !default;
-$text-field-dense-label-active-transform: translateY(-10px) scale(.75) !default;
-$text-field-single-line-label-top: 11px !default;
-$text-field-filled-margin-top: 22px !default;
-$text-field-enclosed-prepend-append-margin-top: 17px !default;
-$text-field-dense-prepend-append-margin-top: 14px !default;
-$text-field-single-line-prepend-append-margin-top: 9px !default;
-$text-field-outlined-prepend-append-margin-top: 8px !default;
-$text-field-enclosed-details-padding: 0 12px !default;
 $text-field-details-padding-inline: 16px !default;
-$text-field-outlined-margin-bottom: 16px !default;
-$text-field-outlined-label-position-x: 18px !default;
-$text-field-outlined-label-position-y: -24px !default;
-$text-field-outlined-dense-label-position-x: 10px !default;
-$text-field-outlined-dense-label-position-y: -16px !default;
-$text-field-prefix-max-height: 32px !default;
-$text-field-outlined-append-prepend-outer-margin-top: 18px !default;
-$text-field-outlined-fieldset-top: -5px !default;
-$text-field-outlined-fieldset-border-width: 1px !default;
-$text-field-outlined-fieldset-padding: 8px !default;
-$text-field-outlined-legend-line-height: 11px !default;
-$text-field-rounded-legend-margin: 12px !default;
-$text-field-rounded-border-radius: 28px !default;
-$text-field-shaped-border-radius: 16px 16px 0 0 !default;
-$text-field-outlined-fieldset-border: 2px solid currentColor !default;
-$text-field-outlined-rounded-slot-padding: 0 24px !default;
-$text-field-solo-label-top: calc(50% - 9px) !default;
-$text-field-solo-control-min-height: 48px !default;
-$text-field-solo-dense-control-min-height: 38px !default;
-$text-field-solo-outer-margin-top: 12px !default;
-$text-field-solo-dense-outer-margin-top: 7px !default;
+$text-field-disabled-affix-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
+$text-field-input-flex: 1 !default;
+$text-field-input-padding-end: 0 !default;
+$text-field-input-padding-start: 6px !default;
+$text-field-input-transition: .15s opacity settings.$standard-easing !default;
diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.tsx b/packages/vuetify/src/components/VTextarea/VTextarea.tsx
index 50de658f4a6..4c6d0cea93a 100644
--- a/packages/vuetify/src/components/VTextarea/VTextarea.tsx
+++ b/packages/vuetify/src/components/VTextarea/VTextarea.tsx
@@ -194,18 +194,22 @@ export const VTextarea = defineComponent({
             ...slots,
             default: ({
               isDisabled,
+              isDirty,
               isReadonly,
+              isValid,
             }) => (
               <VField
+                active={ isActive.value || isDirty.value }
+                dirty={ isDirty.value }
+                focused={ isFocused.value }
                 style={{
                   '--v-input-control-height': controlHeight.value,
                 }}
-                focused={ isFocused.value }
                 onClick:control={ onControlClick }
                 onClick:clear={ onClear }
                 role="textbox"
                 { ...fieldProps }
-                modelValue={ model.value }
+                error={ isValid.value === false }
               >
                 {{
                   ...slots,
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass
index 2c9f1b7556d..70eccf7970f 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.sass
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.sass
@@ -4,7 +4,7 @@
 
 // Block
 .v-toolbar
-  align-items: flex-startE
+  align-items: flex-start
   display: flex
   flex-direction: column
   justify-content: space-between
@@ -16,7 +16,6 @@
   transition-property: height, transform, max-width
   transition: $toolbar-transition
 
-  @include tools.theme($toolbar-theme...)
   @include tools.elevation($toolbar-elevation)
   @include tools.rounded($toolbar-border-radius)
 
@@ -33,6 +32,9 @@
     max-width: $toolbar-collapsed-max-width
     overflow: hidden
 
+    .v-toolbar-title
+      display: none
+
     @include tools.ltr()
       border-bottom-right-radius: $toolbar-collapsed-border-radius
 
@@ -76,6 +78,9 @@
   > .v-btn:first-child
     margin-inline-start: $toolbar-prepend-btn-margin-start
 
+  + .v-toolbar-title
+    padding-inline-start: $toolbar-title-padding
+
 .v-toolbar__append
   margin-inline-start: auto
 
@@ -86,7 +91,6 @@
   flex: 1 1
   font-size: $toolbar-title-font-size
   min-width: 0
-  padding-left: $toolbar-title-padding
 
   @include tools.typography($toolbar-title-typography...)
 
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
index ab0e05cf8df..7d0ae39ae54 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.tsx
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
@@ -2,8 +2,9 @@
 import './VToolbar.sass'
 
 // Components
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 import { VImg } from '@/components/VImg'
-import { VToolbarTitle } from '..'
+import { VToolbarTitle } from './VToolbarTitle'
 
 // Composables
 import { makeBorderProps, useBorder } from '@/composables/border'
@@ -13,19 +14,53 @@ import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { provideDefaults } from '@/composables/defaults'
 import { useBackgroundColor } from '@/composables/color'
+import { useForwardRef } from '@/composables/forwardRef'
 
 // Utilities
 import { computed, toRef } from 'vue'
-import { convertToUnit, genericComponent, useRender } from '@/util'
+import { convertToUnit, genericComponent, pick, propsFactory, useRender } from '@/util'
 
 // Types
 import type { MakeSlots } from '@/util'
-import type { PropType } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 
 export type Density = typeof allowedDensities[number]
 
 const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'] as const
 
+export const makeVToolbarProps = propsFactory({
+  absolute: Boolean,
+  collapse: Boolean,
+  color: {
+    type: String,
+    default: 'surface',
+  },
+  density: {
+    type: String as PropType<Density>,
+    default: 'default',
+    validator: (v: any) => allowedDensities.includes(v),
+  },
+  extended: Boolean,
+  extensionHeight: {
+    type: [Number, String],
+    default: 48,
+  },
+  flat: Boolean,
+  floating: Boolean,
+  height: {
+    type: [Number, String],
+    default: 64,
+  },
+  image: String,
+  title: String,
+
+  ...makeBorderProps(),
+  ...makeElevationProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps({ tag: 'header' }),
+  ...makeThemeProps(),
+}, 'v-toolbar')
+
 export const VToolbar = genericComponent<new () => {
   $slots: MakeSlots<{
     default: []
@@ -38,35 +73,7 @@ export const VToolbar = genericComponent<new () => {
 }>()({
   name: 'VToolbar',
 
-  props: {
-    absolute: Boolean,
-    collapse: Boolean,
-    color: String,
-    density: {
-      type: String as PropType<Density>,
-      default: 'default',
-      validator: (v: any) => allowedDensities.includes(v),
-    },
-    extended: Boolean,
-    extensionHeight: {
-      type: [Number, String],
-      default: 48,
-    },
-    flat: Boolean,
-    floating: Boolean,
-    height: {
-      type: [Number, String],
-      default: 64,
-    },
-    image: String,
-    title: String,
-
-    ...makeBorderProps(),
-    ...makeElevationProps(),
-    ...makeRoundedProps(),
-    ...makeTagProps({ tag: 'header' }),
-    ...makeThemeProps(),
-  },
+  props: makeVToolbarProps(),
 
   setup (props, { slots }) {
     const { borderClasses } = useBorder(props)
@@ -119,10 +126,17 @@ export const VToolbar = genericComponent<new () => {
         >
           { hasImage && (
             <div class="v-toolbar__image">
-              { slots.image
-                ? slots.image?.({ src: props.image })
-                : (<VImg src={ props.image } cover />)
-              }
+              <VDefaultsProvider
+                defaults={{
+                  VImg: {
+                    cover: true,
+                    src: props.image,
+                  },
+                }}
+                scoped
+              >
+                { slots.image ? slots.image?.() : (<VImg />) }
+              </VDefaultsProvider>
             </div>
           ) }
 
@@ -163,8 +177,12 @@ export const VToolbar = genericComponent<new () => {
       )
     })
 
-    return {}
+    return useForwardRef({ contentHeight })
   },
 })
 
 export type VToolbar = InstanceType<typeof VToolbar>
+
+export function filterToolbarProps (props: ExtractPropTypes<ReturnType<typeof makeVToolbarProps>>) {
+  return pick(props, Object.keys(VToolbar?.props ?? {}) as any)
+}
diff --git a/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx b/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx
index 334eae34cff..fcc57bd7e36 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx
+++ b/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx
@@ -23,17 +23,17 @@ export const VToolbarTitle = genericComponent<new () => {
 
   setup (props, { slots }) {
     useRender(() => {
-      const hasText = !!(slots.text || props.text)
+      const hasText = !!(slots.default || slots.text || props.text)
 
       return (
         <props.tag class="v-toolbar-title">
           { hasText && (
             <div class="v-toolbar-title__placeholder">
               { slots.text ? slots.text() : props.text }
+
+              { slots.default?.() }
             </div>
           ) }
-
-          { slots.default?.() }
         </props.tag>
       )
     })
diff --git a/packages/vuetify/src/components/VToolbar/_variables.scss b/packages/vuetify/src/components/VToolbar/_variables.scss
index 78eb843c67e..d8c11eea489 100644
--- a/packages/vuetify/src/components/VToolbar/_variables.scss
+++ b/packages/vuetify/src/components/VToolbar/_variables.scss
@@ -2,12 +2,10 @@
 @use "../../styles/settings/variables";
 @use "../../styles/tools/functions";
 
-$toolbar-background: rgb(var(--v-theme-surface)) !default;
 $toolbar-border-radius: 0 !default;
 $toolbar-btn-icon-size: 48px !default;
 $toolbar-collapsed-border-radius: 24px !default;
 $toolbar-collapsed-max-width: 112px !default;
-$toolbar-color: rgb(var(--v-theme-on-surface)) !default;
 $toolbar-content-padding-x: 16px !default;
 $toolbar-content-padding-y: 4px !default;
 $toolbar-density: ( 'default': 0, 'comfortable': -1, 'compact': -2, 'prominent': -3 ) !default;
@@ -34,11 +32,6 @@ $toolbar-prominent-title-letter-spacing: 0 !default;
 $toolbar-prominent-title-line-height: 2.25rem !default;
 $toolbar-prominent-title-text-transform: none !default;
 
-$toolbar-theme: (
-  $toolbar-background,
-  $toolbar-color,
-) !default;
-
 $toolbar-title-typography: (
   $toolbar-title-font-size,
   $toolbar-title-font-weight,
diff --git a/packages/vuetify/src/components/index.ts b/packages/vuetify/src/components/index.ts
index 2399916ab16..609ddac84d1 100644
--- a/packages/vuetify/src/components/index.ts
+++ b/packages/vuetify/src/components/index.ts
@@ -1,7 +1,7 @@
 export * from './VApp'
 export * from './VAppBar'
 export * from './VAlert'
-// export * from './VAutocomplete'
+export * from './VAutocomplete'
 export * from './VAvatar'
 export * from './VBadge'
 export * from './VBanner'
diff --git a/packages/vuetify/src/composables/__tests__/filter.spec.ts b/packages/vuetify/src/composables/__tests__/filter.spec.ts
index e42296e7167..0fef3fbc054 100644
--- a/packages/vuetify/src/composables/__tests__/filter.spec.ts
+++ b/packages/vuetify/src/composables/__tests__/filter.spec.ts
@@ -42,14 +42,6 @@ describe('filter.ts', () => {
       expect(filterItems(items, query, { filterKeys, filterMode: 'every' })).toHaveLength(expected)
     })
 
-    it('should filter an array of strings', () => {
-      const items = Array.from({ length: 50 }, (v, k) => `item-${k}`)
-
-      expect(filterItems(items, 'item-2')).toHaveLength(11)
-      expect(filterItems(items, 'item-29')).toHaveLength(1)
-      expect(filterItems(items, 'item')).toHaveLength(50)
-    })
-
     it('should filter by mode using customKeyFilter', () => {
       const customKeyFilter = {
         title: (s: string, q: string) => s === q,
@@ -110,7 +102,10 @@ describe('filter.ts', () => {
   })
 
   describe('useFilter', () => {
-    const items = ref(Array.from({ length: 50 }, (v, k) => `item-${k}`))
+    const items = ref(Array.from({ length: 50 }, (v, k) => ({
+      text: `item-${k}`,
+      value: k,
+    })))
 
     it.each([
       ['', items.value.length],
diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts
index 61dd16c37f6..5769463d7f6 100644
--- a/packages/vuetify/src/composables/filter.ts
+++ b/packages/vuetify/src/composables/filter.ts
@@ -2,11 +2,12 @@
 /* eslint-disable no-labels */
 
 // Utilities
-import { getPropertyFromItem, propsFactory, wrapInArray, wrapInRef } from '@/util'
-import { computed } from 'vue'
+import { getPropertyFromItem, propsFactory, wrapInArray } from '@/util'
+import { computed, unref } from 'vue'
 
 // Types
 import type { PropType, Ref } from 'vue'
+import type { MaybeRef } from '@/util'
 
 export type FilterFunction = (value: string, query: string, item?: any) => FilterMatch
 export type FilterKeyFunctions = Record<string, FilterFunction>
@@ -19,6 +20,7 @@ export interface FilterProps {
   customKeyFilter?: FilterKeyFunctions
   filterKeys?: FilterKeys
   filterMode?: FilterMode
+  noFilter?: boolean
 }
 
 // Composables
@@ -36,21 +38,22 @@ export const makeFilterProps = propsFactory({
     type: String as PropType<FilterMode>,
     default: 'intersection',
   },
+  noFilter: Boolean,
 }, 'filter')
 
-export function filterItems (
-  items: (Record<string, any> | string)[],
+export function filterItems<T = Record<string, any>> (
+  items: T[],
   query: string,
   options?: {
     customKeyFilter?: FilterKeyFunctions
     default?: FilterFunction
     filterKeys?: FilterKeys
     filterMode?: FilterMode
+    noFilter?: boolean
   },
 ) {
-  const array: (typeof items) = []
-  // always ensure we fallback
-  // to a functioning filter
+  const array: { item: T, matches: Record<string, FilterMatch> }[] = []
+  // always ensure we fall back to a functioning filter
   const filter = options?.default ?? defaultFilter
   const keys = options?.filterKeys ? wrapInArray(options.filterKeys) : false
   const customFiltersLength = Object.keys(options?.customKeyFilter ?? {}).length
@@ -60,14 +63,14 @@ export function filterItems (
   loop:
   for (const item of items) {
     const customMatches: Record<string, FilterMatch> = {}
-    let defaultMatches: Record<string, FilterMatch> | FilterMatch[] = {}
+    const defaultMatches: Record<string, FilterMatch> = {}
     let match: FilterMatch = -1
 
-    if (typeof item === 'object') {
+    if (query && typeof item === 'object' && !options?.noFilter) {
       const filterKeys = keys || Object.keys(item)
 
       for (const key of filterKeys) {
-        const value = getPropertyFromItem(item, key, item)
+        const value = getPropertyFromItem(item as any, key, item)
         const keyFilter = options?.customKeyFilter?.[key]
 
         match = keyFilter
@@ -100,12 +103,6 @@ export function filterItems (
           !defaultMatchesLength
         )
       ) continue
-    } else if (typeof item === 'string') {
-      match = filter(item, query, item)
-
-      if (match === -1 || match === false) continue
-
-      defaultMatches = wrapInArray(match)
     }
 
     array.push({ item, matches: { ...defaultMatches, ...customMatches } })
@@ -114,10 +111,10 @@ export function filterItems (
   return array
 }
 
-export function useFilter (
+export function useFilter<T> (
   props: FilterProps,
-  items: Ref<any[]> | any[],
-  query?: Ref<string>,
+  items: MaybeRef<T[]>,
+  query?: Ref<string | undefined>,
 ) {
   const strQuery = computed(() => (
     typeof query?.value !== 'string' &&
@@ -126,13 +123,14 @@ export function useFilter (
 
   const filteredItems = computed(() => {
     return filterItems(
-      wrapInRef(items).value,
+      unref(items),
       strQuery.value,
       {
         customKeyFilter: props.customKeyFilter,
         default: props.customFilter,
         filterKeys: props.filterKeys,
         filterMode: props.filterMode,
+        noFilter: props.noFilter,
       },
     )
   })
diff --git a/packages/vuetify/src/composables/locale.ts b/packages/vuetify/src/composables/locale.ts
index d4841f66524..27c1d52f5fc 100644
--- a/packages/vuetify/src/composables/locale.ts
+++ b/packages/vuetify/src/composables/locale.ts
@@ -1,5 +1,5 @@
-import { computed, inject, provide } from 'vue'
-import { consoleError, consoleWarn, getObjectValueByPath, wrapInRef } from '@/util'
+import { computed, inject, provide, ref } from 'vue'
+import { consoleError, consoleWarn, getObjectValueByPath } from '@/util'
 
 import en from '@/locale/en'
 
@@ -126,9 +126,9 @@ export function createDefaultLocaleAdapter (options?: LocaleOptions): LocaleAdap
     fallback: MaybeRef<string>
     messages: MaybeRef<LocaleMessages>
   }) => {
-    const current = wrapInRef(options.current)
-    const fallback = wrapInRef(options.fallback)
-    const messages = wrapInRef(options.messages)
+    const current = ref(options.current)
+    const fallback = ref(options.fallback)
+    const messages = ref(options.messages)
 
     return {
       current,
diff --git a/packages/vuetify/src/styles/generic/_colors.scss b/packages/vuetify/src/styles/generic/_colors.scss
index beb8609994d..9662417b144 100644
--- a/packages/vuetify/src/styles/generic/_colors.scss
+++ b/packages/vuetify/src/styles/generic/_colors.scss
@@ -14,7 +14,7 @@
 @mixin background-text-color($color_name, $color_type) {
   $map_value: map-deep-get(colors.$text-on-colors, $color_name, $color_type);
 
-  color: $map_value !important;
+  color: $map_value;
 }
 
 @if (settings.$color-pack) {
diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss
index efd28859672..73e6a985406 100644
--- a/packages/vuetify/src/styles/settings/_variables.scss
+++ b/packages/vuetify/src/styles/settings/_variables.scss
@@ -107,8 +107,7 @@ $grid-breakpoints: map-deep-merge(
 $grid-gutter: $spacer * 6 !default;
 $form-grid-gutter: $spacer * 2 !default;
 $grid-columns: 12 !default;
-
-$container-padding-x: $grid-gutter * .5 !default;
+$container-padding-x: $spacer * 4 !default;
 
 $grid-gutters: () !default;
 $grid-gutters: map-deep-merge(
diff --git a/packages/vuetify/src/styles/tools/_variant.sass b/packages/vuetify/src/styles/tools/_variant.sass
index 40affdc0cd4..0b14b0fb4b1 100644
--- a/packages/vuetify/src/styles/tools/_variant.sass
+++ b/packages/vuetify/src/styles/tools/_variant.sass
@@ -23,7 +23,6 @@
   &--variant-contained,
   &--variant-contained-flat
     background: $contained-background
-    color: $contained-color
 
   @if ($contained-elevation > 0)
     &--variant-contained
diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
index fee3e86b35d..9d6b02bd0bd 100644
--- a/packages/vuetify/src/util/helpers.ts
+++ b/packages/vuetify/src/util/helpers.ts
@@ -1,5 +1,5 @@
 // Utilities
-import { camelize, Fragment, isRef, ref } from 'vue'
+import { camelize, Fragment } from 'vue'
 
 // Types
 import type { ComponentInternalInstance, ComponentPublicInstance, InjectionKey, Ref, Slots, VNode, VNodeChild } from 'vue'
@@ -479,12 +479,6 @@ export function toKebabCase (str = '') {
 
 export type MaybeRef<T> = T | Ref<T>
 
-export type ExtractMaybeRef<P> = P extends MaybeRef<infer T> ? T : P;
-
-export function wrapInRef <T> (x: T) {
-  return (isRef(x) ? x : ref(x)) as Ref<ExtractMaybeRef<T>>
-}
-
 export function findChildren (vnode?: VNodeChild): ComponentInternalInstance[] {
   if (!vnode || typeof vnode !== 'object') {
     return []