From e879b174c4db87765558faa4aa62f8bdb4788f6d Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 22 Feb 2022 13:04:58 -0600
Subject: [PATCH 01/60] chore(release): publish v3.0.0-alpha.13

---
 lerna.json                          | 2 +-
 packages/api-generator/package.json | 4 ++--
 packages/docs/package.json          | 4 ++--
 packages/vuetify/package.json       | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

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/vuetify/package.json b/packages/vuetify/package.json
index 7c19d5d88e8..66f690bcee5 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"

From cd7b748ff2d415c4a131aa03b50b13bd31ab891d Mon Sep 17 00:00:00 2001
From: Elijah Kotyluk <elijah@elijahkotyluk.com>
Date: Tue, 22 Feb 2022 12:22:45 -0800
Subject: [PATCH 02/60] test(VBadge): cypress spec (#14089)

Co-authored-by: John Leider <john.j.leider@gmail.com>
---
 .../vuetify/src/components/VBadge/VBadge.tsx  |  20 ++-
 .../VBadge/__tests__/VBadge.spec.cy.tsx       | 138 ++++++++++++++++++
 .../VBadge/__tests__/VBadge.spec.tsx          |   2 +-
 .../__snapshots__/VBadge.spec.tsx.snap        |  70 ++++-----
 4 files changed, 188 insertions(+), 42 deletions(-)
 create mode 100644 packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx

diff --git a/packages/vuetify/src/components/VBadge/VBadge.tsx b/packages/vuetify/src/components/VBadge/VBadge.tsx
index dcd23ea2f34..5c3ec27aca5 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'
@@ -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..33bb6cec0a9 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary 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-primary v-theme--light"
             aria-atomic="true"
-            aria-label="locale string here"
+            aria-label="Badge"
             aria-live="polite"
             role="status"
       >

From e73c958e553f75a38ab79bfa3856c0ccb51b8882 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 22 Feb 2022 15:49:13 -0600
Subject: [PATCH 03/60] fix(VAlert): implement flex styles

---
 packages/vuetify/src/components/VAlert/VAlert.sass | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vuetify/src/components/VAlert/VAlert.sass b/packages/vuetify/src/components/VAlert/VAlert.sass
index 7431e1bd7fe..d0058553984 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

From 5ecac9d8b99eb8e3c30fa5d25efab126c45e8861 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 22 Feb 2022 16:50:07 -0600
Subject: [PATCH 04/60] docs(Usage): create component usage process

---
 .../docs/src/components/examples/Usage.vue    | 12 +++-
 .../src/components/examples/UsageExample.vue  | 68 ++++++++++++++++++
 .../docs/src/components/examples/VueFile.vue  | 42 +++++++++++
 packages/docs/src/examples/v-alert/usage.vue  | 69 ++++++++-----------
 .../src/pages/en/components/autocompletes.md  |  2 +-
 .../docs/src/pages/en/components/avatars.md   |  2 +-
 .../docs/src/pages/en/components/badges.md    |  4 +-
 .../docs/src/pages/en/components/banners.md   |  2 +-
 .../src/pages/en/components/breadcrumbs.md    |  2 +-
 .../docs/src/pages/en/components/buttons.md   |  6 +-
 .../docs/src/pages/en/components/cards.md     |  4 +-
 .../docs/src/pages/en/components/chips.md     |  2 +-
 .../docs/src/pages/en/components/combobox.md  |  2 +-
 .../docs/src/pages/en/components/dividers.md  |  2 +-
 .../docs/src/pages/en/components/hover.md     |  2 +-
 .../docs/src/pages/en/components/icons.md     |  2 +-
 .../docs/src/pages/en/components/images.md    |  2 +-
 .../docs/src/pages/en/components/ratings.md   |  4 +-
 .../docs/src/pages/en/components/sheets.md    | 10 +--
 .../docs/src/pages/en/components/sliders.md   |  2 +-
 .../docs/src/pages/en/components/toolbars.md  |  2 +-
 .../docs/src/plugins/global-components.ts     |  4 ++
 22 files changed, 176 insertions(+), 71 deletions(-)
 create mode 100644 packages/docs/src/components/examples/UsageExample.vue
 create mode 100644 packages/docs/src/components/examples/VueFile.vue

diff --git a/packages/docs/src/components/examples/Usage.vue b/packages/docs/src/components/examples/Usage.vue
index 4a18d693712..76fb2717795 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>
+    <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..cad6afc1b4c
--- /dev/null
+++ b/packages/docs/src/components/examples/UsageExample.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <v-toolbar
+      border="b"
+      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-toolbar>
+
+    <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>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'UsageExample',
+
+    props: {
+      name: String,
+      options: {
+        type: Array,
+        default: () => ([]),
+      },
+      modelValue: {
+        type: String,
+        required: true,
+      },
+    },
+
+    emits: {
+      'update:modelValue': val => val,
+    },
+
+    computed: {
+      model: {
+        get () {
+          return this.modelValue
+        },
+        set (val) {
+          this.$emit('update:modelValue', val)
+        },
+      },
+    },
+  }
+</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..141cb35028e
--- /dev/null
+++ b/packages/docs/src/components/examples/VueFile.vue
@@ -0,0 +1,42 @@
+<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
+          // console.log(this.component)
+        } catch (e) {
+          console.error(e)
+        }
+      },
+    },
+  }
+</script>
diff --git a/packages/docs/src/examples/v-alert/usage.vue b/packages/docs/src/examples/v-alert/usage.vue
index 38f001cc5c4..e693a209aea 100644
--- a/packages/docs/src/examples/v-alert/usage.vue
+++ b/packages/docs/src/examples/v-alert/usage.vue
@@ -1,52 +1,41 @@
 <template>
-  <v-alert
-    v-if="show"
-    v-model="show"
-    v-bind="$attrs"
+  <usage-example
+    v-model="model"
+    :options="options"
   >
-    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/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..6742aba86ae 100644
--- a/packages/docs/src/pages/en/components/badges.md
+++ b/packages/docs/src/pages/en/components/badges.md
@@ -16,13 +16,11 @@ 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" />
+<!-- <usage name="v-badge" /> -->
 
 -->
 
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/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/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/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/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/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)
 }

From 0894cd251dcdce91341da01482c93e5af518b22e Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 22 Feb 2022 19:02:40 -0600
Subject: [PATCH 05/60] docs: fix ads, adjust sponsor logos in toc

---
 packages/docs/src/components/ads/Base.vue     |  2 +-
 packages/docs/src/components/ads/Carbon.vue   | 23 ++++++------
 packages/docs/src/components/ads/Entry.vue    |  3 --
 packages/docs/src/components/ads/Inline.vue   | 19 +++++-----
 packages/docs/src/components/ads/Vuetify.vue  | 35 +++----------------
 packages/docs/src/components/app/Toc.vue      | 31 ++++++++--------
 packages/docs/src/components/sponsor/Card.vue |  8 +++--
 7 files changed, 51 insertions(+), 70 deletions(-)

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/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/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,
       }
     },

From cc9da87d82ab9aec91eea1a8dac4e032e54f28f9 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Wed, 23 Feb 2022 10:40:42 -0600
Subject: [PATCH 06/60] fix(VApp): apply correct default application color

---
 packages/vuetify/src/components/VApp/VApp.sass | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From b21aca6f7221bd855aec51bb55bbfba03c586d53 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Wed, 23 Feb 2022 11:19:49 -0600
Subject: [PATCH 07/60] Revert "feat(VAlert): set default border opacity to 1"

This reverts commit d41c642f6c4165d324e45984268b3babf8b2469c.
---
 packages/vuetify/src/components/VAlert/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VAlert/_variables.scss b/packages/vuetify/src/components/VAlert/_variables.scss
index cf1e2199530..2e9ccc6e1ae 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;

From 845915fc412ed7898beb1f84e5e2cbb62df0e334 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Wed, 23 Feb 2022 11:24:41 -0600
Subject: [PATCH 08/60] docs(VAlert): update border/type examples

---
 packages/docs/src/examples/v-alert/prop-border.vue | 6 +++---
 packages/docs/src/examples/v-alert/prop-type.vue   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/docs/src/examples/v-alert/prop-border.vue b/packages/docs/src/examples/v-alert/prop-border.vue
index b32710e8068..182c99554d4 100644
--- a/packages/docs/src/examples/v-alert/prop-border.vue
+++ b/packages/docs/src/examples/v-alert/prop-border.vue
@@ -6,21 +6,21 @@
     >
       I'm an alert with a top border and primary color
     </v-alert>
-
+    <br>
     <v-alert
       border="end"
       color="secondary"
     >
       I'm an alert with an end border and secondary color
     </v-alert>
-
+    <br>
     <v-alert
       border="bottom"
       color="success"
     >
       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-type.vue b/packages/docs/src/examples/v-alert/prop-type.vue
index c0c66e5496a..2b8aa78a39e 100644
--- a/packages/docs/src/examples/v-alert/prop-type.vue
+++ b/packages/docs/src/examples/v-alert/prop-type.vue
@@ -1,11 +1,11 @@
 <template>
   <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>

From 50c63bf8842f5938620fa284b0516980f118a92b Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Wed, 23 Feb 2022 14:08:18 -0600
Subject: [PATCH 09/60] docs: add components index page (all)

---
 .../src/components/components/ListItem.vue    | 35 ++++++++++++
 packages/docs/src/data/nav-alpha.json         |  1 +
 packages/docs/src/i18n/messages/en.json       |  1 +
 packages/docs/src/pages/en/components/all.md  | 53 +++++++++++++++++++
 4 files changed, 90 insertions(+)
 create mode 100644 packages/docs/src/components/components/ListItem.vue
 create mode 100644 packages/docs/src/pages/en/components/all.md

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/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/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json
index 2f52d363940..fe5dcccd5a1 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": {
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 />

From 0cc111e3b312127a0245e471a6edfa390daa9c28 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Wed, 23 Feb 2022 20:25:40 -0600
Subject: [PATCH 10/60] fix(VApp): change color from on-background to
 on-surface

---
 packages/vuetify/src/components/VApp/VApp.sass | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VApp/VApp.sass b/packages/vuetify/src/components/VApp/VApp.sass
index 005247886f0..903418b1922 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: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity))
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
 
   a
     cursor: pointer

From 3d35acea1513131fd58037ff32ecda1d94a0cd6e Mon Sep 17 00:00:00 2001
From: AMajesticPotatoe <amajesticpotatoe@gmail.com>
Date: Thu, 24 Feb 2022 07:45:29 -0500
Subject: [PATCH 11/60] docs(usage): add basic markdown to alert example

---
 .../docs/src/components/examples/UsageExample.vue  | 14 ++++++++++++++
 packages/docs/src/components/examples/VueFile.vue  |  2 --
 packages/docs/src/examples/v-alert/usage.vue       |  1 +
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/components/examples/UsageExample.vue b/packages/docs/src/components/examples/UsageExample.vue
index cad6afc1b4c..82815a5fd4c 100644
--- a/packages/docs/src/components/examples/UsageExample.vue
+++ b/packages/docs/src/components/examples/UsageExample.vue
@@ -31,6 +31,10 @@
         <slot />
       </div>
     </v-sheet>
+
+    <v-divider />
+
+    <app-markup :code="formatAttributes" />
   </div>
 </template>
 
@@ -63,6 +67,16 @@
           this.$emit('update:modelValue', val)
         },
       },
+      formatAttributes () {
+        let attributeArray = []
+        if (this.options.includes(this.model)) {
+          attributeArray.push(this.model)
+        }
+        attributeArray = attributeArray.sort()
+        const indent = attributeArray.length ? '\r  ' : ''
+        const tail = `${attributeArray.length ? '\r' : ''}></${this.name}>`
+        return `<${this.name}${indent}${attributeArray.join('\r  ')}${tail}`
+      },
     },
   }
 </script>
diff --git a/packages/docs/src/components/examples/VueFile.vue b/packages/docs/src/components/examples/VueFile.vue
index 141cb35028e..c84e7a4478a 100644
--- a/packages/docs/src/components/examples/VueFile.vue
+++ b/packages/docs/src/components/examples/VueFile.vue
@@ -30,9 +30,7 @@
       async load () {
         try {
           const { component } = await getExample(this.file)
-
           this.component = component
-          // console.log(this.component)
         } catch (e) {
           console.error(e)
         }
diff --git a/packages/docs/src/examples/v-alert/usage.vue b/packages/docs/src/examples/v-alert/usage.vue
index e693a209aea..8ec565766c0 100644
--- a/packages/docs/src/examples/v-alert/usage.vue
+++ b/packages/docs/src/examples/v-alert/usage.vue
@@ -2,6 +2,7 @@
   <usage-example
     v-model="model"
     :options="options"
+    name="v-alert"
   >
     <v-defaults-provider
       :defaults="{

From 5d75a1dc603abf50f5a6e5f8f1f583ac93ec721a Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Fri, 25 Feb 2022 09:06:06 -0600
Subject: [PATCH 12/60] fix(colors): remove !important declaration on
 background-text color

the default color for background colors should be a suggestion
and not compete with text-color helper classes
---
 packages/vuetify/src/styles/generic/_colors.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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) {

From c50bc0bea4ca73e52992db548959e9e997e03f72 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Fri, 25 Feb 2022 09:42:56 -0600
Subject: [PATCH 13/60] fix(VTextField): show persistent-placeholder when label
 is not def

---
 .../src/components/VTextField/VTextField.sass | 98 ++++++++++---------
 .../src/components/VTextField/VTextField.tsx  |  3 +-
 .../src/components/VTextField/_variables.scss | 52 +---------
 3 files changed, 61 insertions(+), 92 deletions(-)

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..3b4f0ecbbda 100644
--- a/packages/vuetify/src/components/VTextField/VTextField.tsx
+++ b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -142,6 +142,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),
@@ -176,7 +177,7 @@ export const VTextField = genericComponent<new <T>() => {
                 role="textbox"
                 { ...fieldProps }
                 error={ isValid.value === false }
-                modelValue={ isDirty.value }
+                modelValue={ isDirty.value || isActive.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;

From f99d19cd7c523c8bda9fc30e5f705826b744f581 Mon Sep 17 00:00:00 2001
From: John Leider <9064066+johnleider@users.noreply.github.com>
Date: Fri, 25 Feb 2022 13:19:22 -0600
Subject: [PATCH 14/60] feat(VAutocomplete): port to v3 (#14728)

Co-authored-by: Kael <kaelwd@gmail.com>
---
 .../VAutocomplete/VAutocomplete.sass          | 104 ++--
 .../components/VAutocomplete/VAutocomplete.ts | 459 ---------------
 .../VAutocomplete/VAutocomplete.tsx           | 311 ++++++++++
 .../__tests__/VAutocomplete.spec.ts           | 535 ------------------
 .../__tests__/VAutocomplete2.spec.ts          | 474 ----------------
 .../__tests__/VAutocomplete3.spec.ts          | 259 ---------
 .../components/VAutocomplete/_variables.scss  |  11 +-
 .../src/components/VAutocomplete/index.ts     |   5 +-
 .../vuetify/src/components/VField/VField.tsx  |   3 +-
 .../src/components/VSelect/VSelect.sass       |   8 +-
 .../src/components/VSelect/VSelect.tsx        | 209 ++++---
 packages/vuetify/src/components/index.ts      |   2 +-
 .../src/composables/__tests__/filter.spec.ts  |  13 +-
 packages/vuetify/src/composables/filter.ts    |  34 +-
 packages/vuetify/src/composables/locale.ts    |  10 +-
 packages/vuetify/src/util/helpers.ts          |   8 +-
 16 files changed, 551 insertions(+), 1894 deletions(-)
 delete mode 100644 packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts
 create mode 100644 packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
 delete mode 100644 packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.ts
 delete mode 100644 packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts
 delete mode 100644 packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
index 814c7ac2705..6c34f3e4889 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
@@ -1,45 +1,73 @@
-@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
+  .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
 
-  // 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
+  &__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: 0 1
+
+  &--active-menu
+    .v-autocomplete__menu-icon
+      color: inherit
+      transform: rotate(180deg)
+
+  &--chips
+    .v-autocomplete__selection
+      &:first-child
+        margin-inline-start: 0
+
+  &--single
+    input.v-field__input
+      position: absolute
+      left: 0
+      opacity: 0
 
-    &.v-input--dense
-      .v-select__slot > input
-        margin-top: $autocomplete-dense-enclosed-input-margin-top
+    .v-field--focused
+      input.v-field__input
+        opacity: 1
 
-  &:not(.v-input--is-disabled).v-select.v-text-field
-    input
-      pointer-events: inherit
+      .v-autocomplete__selections
+        opacity: 0
 
-  &__content.v-menu__content
-    border-radius: 0
+  &--multiple
+    input.v-field__input
+      padding-inline-start: 0
 
-    .v-card
-      border-radius: 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..4781b95f702
--- /dev/null
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -0,0 +1,311 @@
+// 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 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, () => {
+      if (!isFocused.value || menu.value) return
+
+      menu.value = true
+    })
+
+    watch(() => isFocused.value, val => {
+      menu.value = val
+      isPristine.value = true
+
+      if (val && !props.multiple) {
+        search.value = selections.value[0]?.title
+      } else if (!val) {
+        search.value = ''
+      }
+    })
+
+    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={ () => menu.value = true }
+          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/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
index 8d6f51d8b36..3985f4733f7 100644
--- a/packages/vuetify/src/components/VField/VField.tsx
+++ b/packages/vuetify/src/components/VField/VField.tsx
@@ -49,6 +49,7 @@ export interface VFieldSlot extends DefaultInputSlot {
 }
 
 export const makeVFieldProps = propsFactory({
+  dirty: Boolean,
   appendInnerIcon: String,
   bgColor: String,
   clearable: Boolean,
@@ -118,7 +119,7 @@ export const VField = genericComponent<new <T>() => {
     const { loaderClasses } = useLoader(props)
     const { focusClasses, isFocused, focus, blur } = useFocus(props)
 
-    const isDirty = computed(() => wrapInArray(model.value || []).length > 0)
+    const isDirty = computed(() => wrapInArray(model.value || []).length > 0 || props.dirty)
     const isActive = computed(() => isDirty.value || isFocused.value)
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
 
diff --git a/packages/vuetify/src/components/VSelect/VSelect.sass b/packages/vuetify/src/components/VSelect/VSelect.sass
index 0ecadafd2bc..6037c9ba6ba 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: 0 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/index.ts b/packages/vuetify/src/components/index.ts
index f0d23fa19cc..7e2fe9ab51b 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..f53fa23b3ea 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>
@@ -38,8 +39,8 @@ export const makeFilterProps = propsFactory({
   },
 }, 'filter')
 
-export function filterItems (
-  items: (Record<string, any> | string)[],
+export function filterItems<T = Record<string, any>> (
+  items: T[],
   query: string,
   options?: {
     customKeyFilter?: FilterKeyFunctions
@@ -48,9 +49,8 @@ export function filterItems (
     filterMode?: FilterMode
   },
 ) {
-  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 +60,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') {
       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 +100,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 +108,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,7 +120,7 @@ export function useFilter (
 
   const filteredItems = computed(() => {
     return filterItems(
-      wrapInRef(items).value,
+      unref(items),
       strQuery.value,
       {
         customKeyFilter: props.customKeyFilter,
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/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 []

From 70efc58aff9660128137af82dd90b06d3337f33a Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Fri, 25 Feb 2022 13:53:28 -0600
Subject: [PATCH 15/60] docs: update logo images

---
 packages/docs/src/components/app/bar/Logo.vue | 2 +-
 packages/docs/src/components/home/Footer.vue  | 2 +-
 packages/docs/src/components/home/Logo.vue    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

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/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 }

From 1d78187fc3f410a4b27d5d20ba13c455e1ea0008 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Fri, 25 Feb 2022 16:41:56 -0600
Subject: [PATCH 16/60] docs: update location prop value for v-badge

---
 packages/docs/src/components/app/bar/JobsLink.vue          | 2 +-
 packages/docs/src/components/app/bar/NotificationsMenu.vue | 2 +-
 packages/docs/src/examples/v-badge/misc-customization.vue  | 2 +-
 packages/docs/src/examples/v-badge/misc-hover.vue          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

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/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/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">

From de88a00620656b900c926574c60e4a59e655b3ff Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Fri, 25 Feb 2022 16:48:38 -0600
Subject: [PATCH 17/60] docs(AppMarkup.vue): update query selector for code
 copy

---
 packages/docs/src/components/app/Markup.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/docs/src/components/app/Markup.vue b/packages/docs/src/components/app/Markup.vue
index 44941e02848..07160d9061a 100644
--- a/packages/docs/src/components/app/Markup.vue
+++ b/packages/docs/src/components/app/Markup.vue
@@ -10,7 +10,7 @@
     v-bind="$attrs"
   >
 
-    <div class="d-flex align-center mb-n7">
+    <div class="d-flex align-center mb-n10">
       <div class="d-none">
         <v-btn-toggle
           v-model="type"
@@ -39,7 +39,7 @@
 
       <v-btn
         class="v-btn--copy mr-n9"
-        density="compact"
+        size="small"
         icon
         variant="text"
         @click="copy"
@@ -114,7 +114,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
 

From f293ad86ba1ebd443d8a3b565851ea7e9fb98c29 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Sun, 27 Feb 2022 15:52:53 -0600
Subject: [PATCH 18/60] docs(alerts.md): clean-up examples and content

---
 .../src/examples/v-alert/misc-twitter.vue     | 29 ---------
 .../docs/src/examples/v-alert/prop-border.vue |  6 ++
 .../src/examples/v-alert/prop-closable.vue    | 11 +++-
 .../examples/v-alert/prop-colored-border.vue  |  8 ++-
 .../docs/src/examples/v-alert/prop-dense.vue  | 35 -----------
 .../src/examples/v-alert/prop-density.vue     | 41 +++++++++++++
 .../docs/src/examples/v-alert/prop-icon.vue   | 12 ++--
 .../src/examples/v-alert/prop-outlined.vue    | 24 ++++----
 .../src/examples/v-alert/prop-prominent.vue   | 23 +++++---
 .../src/examples/v-alert/prop-rounded.vue     | 35 +++++++----
 .../docs/src/examples/v-alert/prop-tip.vue    | 10 ----
 .../docs/src/examples/v-alert/prop-type.vue   |  6 ++
 .../src/examples/v-alert/prop-variant.vue     | 59 ++++++++++++-------
 .../docs/src/pages/en/components/alerts.md    | 18 +-----
 14 files changed, 166 insertions(+), 151 deletions(-)
 delete mode 100644 packages/docs/src/examples/v-alert/misc-twitter.vue
 delete mode 100644 packages/docs/src/examples/v-alert/prop-dense.vue
 create mode 100644 packages/docs/src/examples/v-alert/prop-density.vue
 delete mode 100644 packages/docs/src/examples/v-alert/prop-tip.vue

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 182c99554d4..a6955cc11c0 100644
--- a/packages/docs/src/examples/v-alert/prop-border.vue
+++ b/packages/docs/src/examples/v-alert/prop-border.vue
@@ -6,21 +6,27 @@
     >
       I'm an alert with a top border and primary color
     </v-alert>
+
     <br>
+
     <v-alert
       border="end"
       color="secondary"
     >
       I'm an alert with an end border and secondary color
     </v-alert>
+
     <br>
+
     <v-alert
       border="bottom"
       color="success"
     >
       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 2b8aa78a39e..8ed12f7a668 100644
--- a/packages/docs/src/examples/v-alert/prop-type.vue
+++ b/packages/docs/src/examples/v-alert/prop-type.vue
@@ -1,11 +1,17 @@
 <template>
   <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/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.

From 45d8c6e883f28dba878103b889ffdb6e7ba2607d Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Sun, 27 Feb 2022 16:00:55 -0600
Subject: [PATCH 19/60] docs(Backmatter.vue): resolve style issues

---
 packages/docs/src/components/Backmatter.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

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>

From e72134e0f6a43c5a1267834af644cbecead3598a Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Sun, 27 Feb 2022 22:30:51 -0600
Subject: [PATCH 20/60] docs(Markup/Example/UsageExample): improve design and
 functionality

---
 packages/docs/src/components/app/Markup.vue   | 118 +++++++++---------
 .../docs/src/components/examples/Example.vue  |   5 +-
 .../src/components/examples/UsageExample.vue  |  88 +++++++++----
 packages/docs/src/i18n/messages/en.json       |   1 +
 4 files changed, 126 insertions(+), 86 deletions(-)

diff --git a/packages/docs/src/components/app/Markup.vue b/packages/docs/src/components/app/Markup.vue
index 07160d9061a..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-n10">
-      <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"
-        size="small"
-        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)
@@ -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/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/UsageExample.vue b/packages/docs/src/components/examples/UsageExample.vue
index 82815a5fd4c..ec8b85176ba 100644
--- a/packages/docs/src/components/examples/UsageExample.vue
+++ b/packages/docs/src/components/examples/UsageExample.vue
@@ -2,6 +2,7 @@
   <div>
     <v-toolbar
       border="b"
+      class="px-2"
       density="compact"
       flat
     >
@@ -20,25 +21,58 @@
           {{ 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-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-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-divider />
+      <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" />
+    <app-markup :code="formatAttributes" class="pt-0" />
   </div>
 </template>
 
 <script>
+  // Utilities
+  import { computed, ref } from 'vue'
+
   export default {
     name: 'UsageExample',
 
@@ -58,25 +92,35 @@
       'update:modelValue': val => val,
     },
 
-    computed: {
-      model: {
+    setup (props, { emit }) {
+      const tune = ref(false)
+      const model = computed({
         get () {
-          return this.modelValue
+          return props.modelValue
         },
         set (val) {
-          this.$emit('update:modelValue', val)
+          emit('update:modelValue', val)
         },
-      },
-      formatAttributes () {
+      })
+
+      const formatAttributes = computed(() => {
         let attributeArray = []
-        if (this.options.includes(this.model)) {
-          attributeArray.push(this.model)
+        if (props.options.includes(model.value)) {
+          attributeArray.push(model.value)
         }
+
         attributeArray = attributeArray.sort()
         const indent = attributeArray.length ? '\r  ' : ''
-        const tail = `${attributeArray.length ? '\r' : ''}></${this.name}>`
-        return `<${this.name}${indent}${attributeArray.join('\r  ')}${tail}`
-      },
+        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/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json
index fe5dcccd5a1..99226a46526 100644
--- a/packages/docs/src/i18n/messages/en.json
+++ b/packages/docs/src/i18n/messages/en.json
@@ -61,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",

From 46e3311638766f49021db9e7b8f3a86f9d9fca5a Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Sun, 27 Feb 2022 22:41:18 -0600
Subject: [PATCH 21/60] fix(VCard): remove opacity from v-card-text, use it in
 text color

---
 packages/vuetify/src/components/VCard/VCard.sass      | 2 +-
 packages/vuetify/src/components/VCard/_variables.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VCard/VCard.sass b/packages/vuetify/src/components/VCard/VCard.sass
index 4550d75a8f8..06102349a48 100644
--- a/packages/vuetify/src/components/VCard/VCard.sass
+++ b/packages/vuetify/src/components/VCard/VCard.sass
@@ -129,10 +129,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
diff --git a/packages/vuetify/src/components/VCard/_variables.scss b/packages/vuetify/src/components/VCard/_variables.scss
index ba9ab12512b..bd67a50d08b 100644
--- a/packages/vuetify/src/components/VCard/_variables.scss
+++ b/packages/vuetify/src/components/VCard/_variables.scss
@@ -35,13 +35,13 @@ $card-subtitle-line-height: tools.map-deep-get(settings.$typography, 'body-2', '
 $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;

From c7b04c588d952abce4a6cadf8e25e9a718af47e6 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 28 Feb 2022 18:32:52 +1100
Subject: [PATCH 22/60] Revert "fix(VApp): change color from on-background to
 on-surface"

This reverts commit 0cc111e3b312127a0245e471a6edfa390daa9c28.
---
 packages/docs/src/plugins/vuetify.ts           | 1 -
 packages/vuetify/src/components/VApp/VApp.sass | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

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/src/components/VApp/VApp.sass b/packages/vuetify/src/components/VApp/VApp.sass
index 903418b1922..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: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity))
 
   a
     cursor: pointer

From aaa7c337809371883244736594daca3f4413f8a5 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 07:24:16 -0600
Subject: [PATCH 23/60] fix(VToolbar): apply toolbar-title padding only if
 prepend is present

---
 packages/vuetify/src/components/VToolbar/VToolbar.sass | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass
index 2c9f1b7556d..762fe92bd24 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.sass
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.sass
@@ -76,6 +76,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 +89,6 @@
   flex: 1 1
   font-size: $toolbar-title-font-size
   min-width: 0
-  padding-left: $toolbar-title-padding
 
   @include tools.typography($toolbar-title-typography...)
 

From a8df6144b9400ae7781409c5d5b8c816b13c90ae Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 09:06:51 -0600
Subject: [PATCH 24/60] refactor(VAppBar): implement VToolbar

---
 .../src/components/VAppBar/VAppBar.sass       |  88 +-------------
 .../src/components/VAppBar/VAppBar.tsx        | 112 ++----------------
 .../src/components/VToolbar/VToolbar.tsx      |   3 +-
 3 files changed, 16 insertions(+), 187 deletions(-)

diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.sass b/packages/vuetify/src/components/VAppBar/VAppBar.sass
index 6a810b6b215..135fb117864 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..6388490ec23 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 { 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,17 @@ 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(),
     ...makeLayoutItemProps(),
-    ...makeTagProps({ tag: 'header' }),
   },
 
   emits: {
@@ -73,22 +44,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 +58,24 @@ export const VAppBar = defineComponent({
     })
 
     return () => {
-      const hasImage = !!(slots.image || props.image)
-
       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,
           ]}
+          { ...props }
         >
-          { 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>
+          {{
+            ...slots,
+          }}
+        </VToolbar>
       )
     }
   },
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
index ab0e05cf8df..3e39b6000dc 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.tsx
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
@@ -13,6 +13,7 @@ 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'
@@ -163,7 +164,7 @@ export const VToolbar = genericComponent<new () => {
       )
     })
 
-    return {}
+    return useForwardRef({ contentHeight })
   },
 })
 

From 534c77256ca1b3e2802ed561b2cd2349b6bb9a62 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 09:20:16 -0600
Subject: [PATCH 25/60] feat(VGrid): change default padding from 12px to 16px

---
 packages/vuetify/src/styles/settings/_variables.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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(

From b4dbb5d3d51715b68842dd4186b01b5e1750be29 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 10:02:00 -0600
Subject: [PATCH 26/60] fix(VToolbar): set correct align-items css value

---
 packages/vuetify/src/components/VToolbar/VToolbar.sass | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass
index 762fe92bd24..25a6b548641 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

From 953a70d70d8a6f65cc05f3f9208d9756a55fa7db Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 10:02:30 -0600
Subject: [PATCH 27/60] sass(VAppBar): define 1 css property to avoid build bug

---
 packages/vuetify/src/components/VAppBar/VAppBar.sass | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.sass b/packages/vuetify/src/components/VAppBar/VAppBar.sass
index 135fb117864..8ea7fc5acd2 100644
--- a/packages/vuetify/src/components/VAppBar/VAppBar.sass
+++ b/packages/vuetify/src/components/VAppBar/VAppBar.sass
@@ -3,4 +3,4 @@
 @use './variables' as *
 
 .v-app-bar
-  //
+  display: flex

From bcb30db0d19719723f82a4e3fbcfe4841983a6cc Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 10:57:25 -0600
Subject: [PATCH 28/60] test(VAppBar): remove superfluous spec tests

---
 .../VAppBar/__tests__/VAppBarNavIcon.spec.tsx | 24 -------------------
 .../VAppBar/__tests__/VAppBarTitle.spec.tsx   | 24 -------------------
 .../VAppBarNavIcon.spec.tsx.snap              | 16 -------------
 .../__snapshots__/VAppBarTitle.spec.tsx.snap  |  6 -----
 4 files changed, 70 deletions(-)
 delete mode 100644 packages/vuetify/src/components/VAppBar/__tests__/VAppBarNavIcon.spec.tsx
 delete mode 100644 packages/vuetify/src/components/VAppBar/__tests__/VAppBarTitle.spec.tsx
 delete mode 100644 packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBarNavIcon.spec.tsx.snap
 delete mode 100644 packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBarTitle.spec.tsx.snap

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>
-`;

From aef5ed6413869bae9615180e935f6b91065673ed Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 10:58:33 -0600
Subject: [PATCH 29/60] fix(VToolbar): hide title when using the collapse prop

---
 packages/vuetify/src/components/VToolbar/VToolbar.sass | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass
index 25a6b548641..ea9fc6763f0 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.sass
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.sass
@@ -33,6 +33,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
 

From ebe3b55976e6780f4946de7c132559077d01edac Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 10:59:26 -0600
Subject: [PATCH 30/60] refactor(VToolbarTitle/VAppBarTitle): normalize both
 components

v-app-bar-title is intended to be an alias of v-toolbar-title
that adds its own class
---
 .../src/components/VAppBar/VAppBarTitle.sass  | 10 --------
 .../src/components/VAppBar/VAppBarTitle.tsx   | 24 +++++++------------
 .../src/components/VToolbar/VToolbarTitle.tsx |  6 ++---
 3 files changed, 11 insertions(+), 29 deletions(-)
 delete mode 100644 packages/vuetify/src/components/VAppBar/VAppBarTitle.sass

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/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>
       )
     })

From 48306a745678118a99006315f52a45448f662e02 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 11:46:20 -0600
Subject: [PATCH 31/60] refactor(VToolbar): add propsFactory and filter fn

---
 .../src/components/VAppBar/VAppBar.tsx        | 18 +++--
 .../src/components/VToolbar/VToolbar.tsx      | 68 ++++++++++---------
 2 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.tsx b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
index 6388490ec23..638538a3b8c 100644
--- a/packages/vuetify/src/components/VAppBar/VAppBar.tsx
+++ b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
@@ -2,7 +2,7 @@
 import './VAppBar.sass'
 
 // Components
-import { VToolbar } from '@/components/VToolbar/VToolbar'
+import { filterToolbarProps, makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'
 
 // Composables
 import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
@@ -36,6 +36,7 @@ export const VAppBar = defineComponent({
       validator: (value: any) => ['top', 'bottom'].includes(value),
     },
 
+    ...makeVToolbarProps(),
     ...makeLayoutItemProps(),
   },
 
@@ -58,6 +59,8 @@ export const VAppBar = defineComponent({
     })
 
     return () => {
+      const [toolbarProps] = filterToolbarProps(props)
+
       return (
         <VToolbar
           ref={ vToolbarRef }
@@ -67,15 +70,10 @@ export const VAppBar = defineComponent({
               'v-app-bar--bottom': props.position === 'bottom',
             },
           ]}
-          style={[
-            layoutItemStyles.value,
-          ]}
-          { ...props }
-        >
-          {{
-            ...slots,
-          }}
-        </VToolbar>
+          style={ layoutItemStyles.value }
+          { ...toolbarProps }
+          v-slots={ slots }
+        />
       )
     }
   },
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
index 3e39b6000dc..e363271612b 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.tsx
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
@@ -17,16 +17,46 @@ 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: 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(),
+}, 'v-toolbar')
+
 export const VToolbar = genericComponent<new () => {
   $slots: MakeSlots<{
     default: []
@@ -39,35 +69,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)
@@ -169,3 +171,7 @@ export const VToolbar = genericComponent<new () => {
 })
 
 export type VToolbar = InstanceType<typeof VToolbar>
+
+export function filterToolbarProps (props: ExtractPropTypes<ReturnType<typeof makeVToolbarProps>>) {
+  return pick(props, Object.keys(VToolbar?.props ?? {}) as any)
+}

From 5d11aa72c7a116bd404741c0b51b168df4c85a82 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 12:27:39 -0600
Subject: [PATCH 32/60] docs(App.vue): add global styling for non-class ul
 elements

---
 packages/docs/src/App.vue | 4 ++++
 1 file changed, 4 insertions(+)

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>

From 954a4c315261dba671651b7a1803d0aa900019e8 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 14:40:38 -0600
Subject: [PATCH 33/60] fix(VCard): remove text padding-top with header

---
 packages/vuetify/src/components/VCard/VCard.sass      | 3 +++
 packages/vuetify/src/components/VCard/_variables.scss | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VCard/VCard.sass b/packages/vuetify/src/components/VCard/VCard.sass
index 06102349a48..e084756d1be 100644
--- a/packages/vuetify/src/components/VCard/VCard.sass
+++ b/packages/vuetify/src/components/VCard/VCard.sass
@@ -110,6 +110,9 @@
   display: flex
   padding: $card-item-padding
 
+  + .v-card-text
+    padding-top: 0
+
 .v-card-media
   overflow: hidden
 
diff --git a/packages/vuetify/src/components/VCard/_variables.scss b/packages/vuetify/src/components/VCard/_variables.scss
index bd67a50d08b..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,7 +29,7 @@ $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;

From 500c71dde5a849bf030b788174d42191790464d7 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 14:41:57 -0600
Subject: [PATCH 34/60] fix(VCard): only render subtitle component slot or prop
 present

---
 packages/vuetify/src/components/VCard/VCard.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/vuetify/src/components/VCard/VCard.tsx b/packages/vuetify/src/components/VCard/VCard.tsx
index b282467c2f7..76586169996 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'
 
@@ -155,12 +157,14 @@ export const VCard = defineComponent({
                     </VCardTitle>
                   ) }
 
-                  <VCardSubtitle>
-                    { slots.subtitle
-                      ? slots.subtitle()
-                      : props.subtitle
-                    }
-                  </VCardSubtitle>
+                  { hasSubtitle && (
+                    <VCardSubtitle>
+                      { slots.subtitle
+                        ? slots.subtitle()
+                        : props.subtitle
+                      }
+                    </VCardSubtitle>
+                  ) }
                 </VCardHeaderText>
               ) }
 

From af8c87fcda7dde62f38baf19696c06fa964710a9 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 15:12:20 -0600
Subject: [PATCH 35/60] fix(VCard): adjust v-card-actions location when
 following v-card-text

---
 packages/vuetify/src/components/VCard/VCard.sass | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/vuetify/src/components/VCard/VCard.sass b/packages/vuetify/src/components/VCard/VCard.sass
index e084756d1be..1784822be64 100644
--- a/packages/vuetify/src/components/VCard/VCard.sass
+++ b/packages/vuetify/src/components/VCard/VCard.sass
@@ -143,6 +143,9 @@
 
   @include card-line-height-densities($card-text-densities)
 
+  + .v-card-actions
+    margin-top: -.5rem
+
 .v-card-title
   align-items: center
   display: flex

From 48248f982d8db272faf9193124b9130b51e5b102 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 15:14:15 -0600
Subject: [PATCH 36/60] docs(ExamplesUsage): reduce margin bottom

---
 packages/docs/src/components/examples/Usage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/components/examples/Usage.vue b/packages/docs/src/components/examples/Usage.vue
index 76fb2717795..c3884b80a9d 100644
--- a/packages/docs/src/components/examples/Usage.vue
+++ b/packages/docs/src/components/examples/Usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-sheet class="mb-12">
+  <app-sheet class="mb-6">
     <vue-file :file="`${name}/usage`" />
   </app-sheet>
 </template>

From 58f134f457dccf99ed717bafb5103ead62712180 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 15:14:45 -0600
Subject: [PATCH 37/60] refactor(VToolbar): propagate v-img props using
 defaults-provider

---
 .../src/components/VToolbar/VToolbar.tsx       | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
index e363271612b..87e54d312ff 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'
@@ -122,10 +123,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>
           ) }
 

From 26e7e5be470a0f3d1355b92203d27dea9ddeeb4e Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 15:15:53 -0600
Subject: [PATCH 38/60] docs(app-bars.md): add usage, improve existing examples
 and content

---
 .../src/examples/v-app-bar/prop-density.vue   |  69 ++++++------
 .../src/examples/v-app-bar/prop-image.vue     |  53 +++++++++
 .../docs/src/examples/v-app-bar/prop-img.vue  |  46 --------
 .../src/examples/v-app-bar/prop-prominent.vue | 103 ++++++++++++------
 .../docs/src/examples/v-app-bar/usage.vue     |  66 ++++++-----
 .../docs/src/pages/en/components/app-bars.md  |  27 +++--
 6 files changed, 211 insertions(+), 153 deletions(-)
 create mode 100644 packages/docs/src/examples/v-app-bar/prop-image.vue
 delete mode 100644 packages/docs/src/examples/v-app-bar/prop-img.vue

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..e5131cb7f9d 100644
--- a/packages/docs/src/examples/v-app-bar/usage.vue
+++ b/packages/docs/src/examples/v-app-bar/usage.vue
@@ -1,38 +1,50 @@
 <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" 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 bg-grey-lighten-4">
+            <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/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 />

From 3ef159aff0e14b93d6e2a5db91e76abe5881b802 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 15:19:17 -0600
Subject: [PATCH 39/60] docs(app-bars.md): adjust usage example styling

---
 packages/docs/src/examples/v-app-bar/usage.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/examples/v-app-bar/usage.vue b/packages/docs/src/examples/v-app-bar/usage.vue
index e5131cb7f9d..0f8bf02556a 100644
--- a/packages/docs/src/examples/v-app-bar/usage.vue
+++ b/packages/docs/src/examples/v-app-bar/usage.vue
@@ -11,7 +11,10 @@
         }
       }"
     >
-      <v-layout class="elevation-2 rounded mx-auto" style="max-width: 448px;">
+      <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>
@@ -29,7 +32,7 @@
         </v-app-bar>
 
         <v-main>
-          <div class="text-center py-12 bg-grey-lighten-4">
+          <div class="text-center py-12">
             <div class="text-h5">Content</div>
           </div>
         </v-main>

From 6256dd6efcb45acc0c4190141489dc8c3fa045be Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 18:49:26 -0600
Subject: [PATCH 40/60] fix(VAutocomplete): persistent-placeholder visibility
 with no label

---
 .../vuetify/src/components/VAutocomplete/VAutocomplete.sass  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
index 6c34f3e4889..5d07f1c04eb 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
@@ -65,6 +65,11 @@
       .v-autocomplete__selections
         opacity: 0
 
+    .v-field--active:not(.v-field--focused)
+      input.v-field__input
+        opacity: 0
+        transition: none
+
   &--multiple
     input.v-field__input
       padding-inline-start: 0

From 34a6de74c3af1b20baf5c97dcbed4f4a06673f60 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 19:02:49 -0600
Subject: [PATCH 41/60] fix(VAutocomplete): hide menu when using hide-no-data
 and no items

---
 .../src/components/VAutocomplete/VAutocomplete.tsx       | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 4781b95f702..0bbd7b966eb 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -168,10 +168,15 @@ export const VAutocomplete = genericComponent<new <T>() => {
 
       search.value = selections.value[0]?.title
     })
+
     watch(() => searchValue.value, () => {
-      if (!isFocused.value || menu.value) return
+      if (!isFocused.value) return
 
-      menu.value = true
+      if (props.hideNoData && !filteredItems.value.length) {
+        menu.value = false
+      } else {
+        menu.value = true
+      }
     })
 
     watch(() => isFocused.value, val => {

From b33d1175ba0d4b0405521dc6be6bd10b4d7a95e4 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 28 Feb 2022 19:28:15 -0600
Subject: [PATCH 42/60] fix(VSelect/VAutocomplete): let the selection container
 flex grow

---
 .../vuetify/src/components/VAutocomplete/VAutocomplete.sass     | 2 +-
 packages/vuetify/src/components/VSelect/VSelect.sass            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
index 5d07f1c04eb..d313e0f268c 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
@@ -40,7 +40,7 @@
     align-items: flex-start
     color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
     display: flex
-    flex: 0 1
+    flex: 1 1
 
   &--active-menu
     .v-autocomplete__menu-icon
diff --git a/packages/vuetify/src/components/VSelect/VSelect.sass b/packages/vuetify/src/components/VSelect/VSelect.sass
index 6037c9ba6ba..9713a7386b3 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.sass
+++ b/packages/vuetify/src/components/VSelect/VSelect.sass
@@ -37,7 +37,7 @@
   &__selections
     align-items: flex-start
     color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
-    flex: 0 1
+    flex: 1 1
     display: flex
 
   &--active-menu

From eef1af621019555fdfad0574c48736d12496ca31 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 1 Mar 2022 19:38:04 +1100
Subject: [PATCH 43/60] fix: update @formatjs/intl peer version

---
 packages/vuetify/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index 66f690bcee5..d71c77fafe1 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -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"
   },

From af450318849364782460e656319fe41d02a35d1e Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 1 Mar 2022 19:52:07 +1100
Subject: [PATCH 44/60] fix(VIcon): set explicit size on svg element

fixes #14768
---
 packages/vuetify/src/components/VIcon/VIcon.sass | 2 ++
 1 file changed, 2 insertions(+)

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

From 780031a37d5fdfd6d0c7932e2fae8dfbc2d5d24f Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 12:48:29 -0600
Subject: [PATCH 45/60] test(VAppBar): fix cypress tests

---
 .../VAppBar/__tests__/VAppBar.spec.cy.tsx      | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

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')
-  })
 })

From ae01ce44e6e38ab3c086b1da32a9b433cd09e72e Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 12:50:21 -0600
Subject: [PATCH 46/60] fix(FormControls): adjust styling for default, disable,
 & error states)

---
 .../vuetify/src/components/VCard/VCard.sass   |  1 -
 .../vuetify/src/components/VField/VField.sass | 64 ++++++++-----------
 .../vuetify/src/components/VField/VField.tsx  | 14 +++-
 .../vuetify/src/components/VInput/VInput.sass | 37 ++++++-----
 .../vuetify/src/components/VLabel/VLabel.sass |  8 +--
 .../vuetify/src/components/VLabel/VLabel.tsx  | 12 +---
 .../src/components/VMessages/VMessages.sass   |  2 +-
 .../components/VRadioGroup/VRadioGroup.tsx    |  7 +-
 .../VSelectionControl/VSelectionControl.sass  | 30 +++++----
 .../VSelectionControl/VSelectionControl.tsx   | 13 ++--
 .../src/components/VSlider/VSlider.sass       |  6 ++
 .../src/components/VSlider/VSliderThumb.sass  |  3 +
 .../src/components/VSlider/VSliderTrack.sass  |  3 +
 .../vuetify/src/components/VSlider/slider.ts  |  7 +-
 .../src/components/VSwitch/VSwitch.sass       |  2 +-
 .../vuetify/src/styles/tools/_variant.sass    |  1 -
 16 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/packages/vuetify/src/components/VCard/VCard.sass b/packages/vuetify/src/components/VCard/VCard.sass
index 1784822be64..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
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 3985f4733f7..2e210db9af6 100644
--- a/packages/vuetify/src/components/VField/VField.tsx
+++ b/packages/vuetify/src/components/VField/VField.tsx
@@ -223,7 +223,6 @@ export const VField = genericComponent<new <T>() => {
             backgroundColorClasses.value,
             focusClasses.value,
             loaderClasses.value,
-            textColorClasses.value,
           ]}
           style={[
             backgroundColorStyles.value,
@@ -258,7 +257,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>
             ) }
@@ -312,7 +315,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/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/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/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

From 37d1dfb661f90d014c87c533d118cf3ef462b9c5 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 17:16:15 -0600
Subject: [PATCH 47/60] fix(VTextField): show placeholder with no label, dirty,
 persistent

---
 .../VAutocomplete/VAutocomplete.sass          | 19 +++++++++----------
 .../vuetify/src/components/VField/VField.tsx  | 14 +++++---------
 .../src/components/VFileInput/VFileInput.tsx  | 12 +++++-------
 .../src/components/VTextField/VTextField.tsx  |  4 ++--
 4 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
index d313e0f268c..a12495f81da 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
@@ -53,22 +53,21 @@
         margin-inline-start: 0
 
   &--single
-    input.v-field__input
+    &.v-text-field input.v-field__input
       position: absolute
       left: 0
-      opacity: 0
 
-    .v-field--focused
-      input.v-field__input
-        opacity: 1
+    .v-field--active
+        input.v-field__input
+          transition: none
 
-      .v-autocomplete__selections
-        opacity: 0
+    .v-field--dirty:not(.v-field--focused)
+        input.v-field__input
+          opacity: 0
 
-    .v-field--active:not(.v-field--focused)
-      input.v-field__input
+    .v-field--focused
+      .v-autocomplete__selections
         opacity: 0
-        transition: none
 
   &--multiple
     input.v-field__input
diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
index 2e210db9af6..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
@@ -49,7 +47,6 @@ export interface VFieldSlot extends DefaultInputSlot {
 }
 
 export const makeVFieldProps = propsFactory({
-  dirty: Boolean,
   appendInnerIcon: String,
   bgColor: String,
   clearable: Boolean,
@@ -94,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(),
@@ -113,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 || props.dirty)
-    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()
@@ -211,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,
@@ -285,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()
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/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
index 3b4f0ecbbda..4a596dfdcfc 100644
--- a/packages/vuetify/src/components/VTextField/VTextField.tsx
+++ b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -96,7 +96,6 @@ 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
     ))
@@ -164,6 +163,8 @@ export const VTextField = genericComponent<new <T>() => {
             }) => (
               <VField
                 ref={ vFieldRef }
+                active={ isActive.value }
+                dirty={ isDirty.value }
                 focused={ isFocused.value }
                 onMousedown={ (e: MouseEvent) => {
                   if (e.target === inputRef.value) return
@@ -177,7 +178,6 @@ export const VTextField = genericComponent<new <T>() => {
                 role="textbox"
                 { ...fieldProps }
                 error={ isValid.value === false }
-                modelValue={ isDirty.value || isActive.value }
               >
                 {{
                   ...slots,

From 4e1b246d5654896a1f94d7e69772c338b8866825 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 18:14:26 -0600
Subject: [PATCH 48/60] fix(VAutocomplete/VTextField): elevate label when
 focused or active

---
 .../src/components/VAutocomplete/VAutocomplete.tsx        | 2 +-
 packages/vuetify/src/components/VTextField/VTextField.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 0bbd7b966eb..6bc3b594875 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -89,7 +89,7 @@ export const VAutocomplete = genericComponent<new <T>() => {
       props,
       'modelValue',
       [],
-      v => wrapInArray(v),
+      v => wrapInArray(v || []),
       (v: any) => props.multiple ? v : v[0]
     )
     const menu = ref(false)
diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
index 4a596dfdcfc..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,
@@ -97,12 +98,13 @@ export const VTextField = genericComponent<new <T>() => {
     const inputRef = ref<HTMLInputElement>()
     const isActive = computed(() => (
       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) {
@@ -163,7 +165,7 @@ export const VTextField = genericComponent<new <T>() => {
             }) => (
               <VField
                 ref={ vFieldRef }
-                active={ isActive.value }
+                active={ isActive.value || isDirty.value }
                 dirty={ isDirty.value }
                 focused={ isFocused.value }
                 onMousedown={ (e: MouseEvent) => {

From b441fb5d79e9163929cc72b6ce571dcb71c19a4a Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 18:16:23 -0600
Subject: [PATCH 49/60] fix(VTextarea): elevate label and show textarea when
 focused

---
 packages/vuetify/src/components/VTextarea/VTextarea.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

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,

From efdd1c1f6aed65ce22f13bb32f7e34831f08e192 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 18:23:29 -0600
Subject: [PATCH 50/60] feat(filter.ts): add no-filter option

---
 packages/vuetify/src/composables/filter.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts
index f53fa23b3ea..5769463d7f6 100644
--- a/packages/vuetify/src/composables/filter.ts
+++ b/packages/vuetify/src/composables/filter.ts
@@ -20,6 +20,7 @@ export interface FilterProps {
   customKeyFilter?: FilterKeyFunctions
   filterKeys?: FilterKeys
   filterMode?: FilterMode
+  noFilter?: boolean
 }
 
 // Composables
@@ -37,6 +38,7 @@ export const makeFilterProps = propsFactory({
     type: String as PropType<FilterMode>,
     default: 'intersection',
   },
+  noFilter: Boolean,
 }, 'filter')
 
 export function filterItems<T = Record<string, any>> (
@@ -47,6 +49,7 @@ export function filterItems<T = Record<string, any>> (
     default?: FilterFunction
     filterKeys?: FilterKeys
     filterMode?: FilterMode
+    noFilter?: boolean
   },
 ) {
   const array: { item: T, matches: Record<string, FilterMatch> }[] = []
@@ -63,7 +66,7 @@ export function filterItems<T = Record<string, any>> (
     const defaultMatches: Record<string, FilterMatch> = {}
     let match: FilterMatch = -1
 
-    if (query && typeof item === 'object') {
+    if (query && typeof item === 'object' && !options?.noFilter) {
       const filterKeys = keys || Object.keys(item)
 
       for (const key of filterKeys) {
@@ -127,6 +130,7 @@ export function useFilter<T> (
         default: props.customFilter,
         filterKeys: props.filterKeys,
         filterMode: props.filterMode,
+        noFilter: props.noFilter,
       },
     )
   })

From 1d5fe5e78cb44aaccb5eeb7c50fe4346dd44ebf3 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 18:29:38 -0600
Subject: [PATCH 51/60] fix(VAutocomplete): do not show menu with hide-no-data
 & no items

---
 .../src/components/VAutocomplete/VAutocomplete.tsx       | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 6bc3b594875..d74cdd3672c 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -140,6 +140,11 @@ export const VAutocomplete = genericComponent<new <T>() => {
 
       search.value = undefined
     }
+    function onClickControl () {
+      if (props.hideNoData && !filteredItems.value.length) return
+
+      menu.value = true
+    }
     function onKeydown (e: KeyboardEvent) {
       if (
         ['Enter', ' '].includes(e.key) &&
@@ -180,13 +185,13 @@ export const VAutocomplete = genericComponent<new <T>() => {
     })
 
     watch(() => isFocused.value, val => {
-      menu.value = val
       isPristine.value = true
 
       if (val && !props.multiple) {
         search.value = selections.value[0]?.title
       } else if (!val) {
         search.value = ''
+        menu.value = false
       }
     })
 
@@ -207,7 +212,7 @@ export const VAutocomplete = genericComponent<new <T>() => {
           ]}
           dirty={ model.value.length > 0 }
           onClick:clear={ onClear }
-          onClick:control={ () => menu.value = true }
+          onClick:control={ onClickControl }
           onFocus={ () => isFocused.value = true }
           onBlur={ () => isFocused.value = false }
           onKeydown={ onKeydown }

From 6cb7d26c4ce23e8efddb6f10781e34e5d921801c Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 19:29:17 -0600
Subject: [PATCH 52/60] fix(VAutocomplete): close menu searchValue becomes
 falsy

---
 .../vuetify/src/components/VAutocomplete/VAutocomplete.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index d74cdd3672c..15378e6f07f 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -174,10 +174,10 @@ export const VAutocomplete = genericComponent<new <T>() => {
       search.value = selections.value[0]?.title
     })
 
-    watch(() => searchValue.value, () => {
+    watch(() => searchValue.value, val => {
       if (!isFocused.value) return
 
-      if (props.hideNoData && !filteredItems.value.length) {
+      if ((props.hideNoData && !filteredItems.value.length) || !val) {
         menu.value = false
       } else {
         menu.value = true

From 4a9db3664ed763550217692b825ad26b77b27e59 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 20:52:32 -0600
Subject: [PATCH 53/60] docs(badges.md): update usage and examples

---
 .../docs/src/examples/v-badge/prop-dot.vue    | 34 +++++++++++++
 .../docs/src/examples/v-badge/prop-inline.vue | 47 +++++++++++++++++
 packages/docs/src/examples/v-badge/usage.vue  | 50 +++++++++----------
 .../docs/src/pages/en/components/badges.md    | 22 ++++++--
 4 files changed, 121 insertions(+), 32 deletions(-)
 create mode 100644 packages/docs/src/examples/v-badge/prop-dot.vue
 create mode 100644 packages/docs/src/examples/v-badge/prop-inline.vue

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/pages/en/components/badges.md b/packages/docs/src/pages/en/components/badges.md
index 6742aba86ae..2f1640a36c0 100644
--- a/packages/docs/src/pages/en/components/badges.md
+++ b/packages/docs/src/pages/en/components/badges.md
@@ -20,9 +20,7 @@ The `v-badge` component superscripts or subscripts an avatar-like icon or text o
 
 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" /> -->
-
--->
+<usage name="v-badge" />
 
 ## API
 
@@ -30,7 +28,21 @@ Badges in their simplest form display to the upper right of the content that it
 
 ## 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" />
+
+<!-- ### Misc
 
 #### Customization options
 
@@ -54,6 +66,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 />

From b1cc21928d38a8f2d90cc9b5be096555bd9725e8 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 21:09:59 -0600
Subject: [PATCH 54/60] refactor(VBadge): change default color to
 surface-variant

---
 .../vuetify/src/components/VBadge/VBadge.tsx  |  2 +-
 .../__snapshots__/VBadge.spec.tsx.snap        | 34 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/vuetify/src/components/VBadge/VBadge.tsx b/packages/vuetify/src/components/VBadge/VBadge.tsx
index 5c3ec27aca5..5ba907db03e 100644
--- a/packages/vuetify/src/components/VBadge/VBadge.tsx
+++ b/packages/vuetify/src/components/VBadge/VBadge.tsx
@@ -26,7 +26,7 @@ export const VBadge = defineComponent({
     bordered: Boolean,
     color: {
       type: String,
-      default: 'primary',
+      default: 'surface-variant',
     },
     content: String,
     dot: Boolean,
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 33bb6cec0a9..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,7 +7,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { content: '10', m
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -29,7 +29,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { content: '10', m
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -51,7 +51,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { content: 'foo',
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -73,7 +73,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { dot: true } prop
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -92,7 +92,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { dot: true, float
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -111,7 +111,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { floating: true }
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -133,7 +133,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { floating: true }
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -155,7 +155,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { icon: 'foo' } pr
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -177,7 +177,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { inline: true } p
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -199,7 +199,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { location: 'botto
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -221,7 +221,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { location: null }
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -243,7 +243,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { location: undefi
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -265,7 +265,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { modelValue: fals
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -288,7 +288,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { modelValue: true
       element
     </span>
     <transition-stub>
-      <span class="v-badge__badge bg-primary v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -307,7 +307,7 @@ 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 v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -326,7 +326,7 @@ 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 v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"
@@ -346,7 +346,7 @@ 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 v-theme--light"
+      <span class="v-badge__badge bg-surface-variant v-theme--light"
             aria-atomic="true"
             aria-label="Badge"
             aria-live="polite"

From f86fb439ae2f41acc0753ebbca69fc5243136232 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 21:11:17 -0600
Subject: [PATCH 55/60] fix(VToolbar): display correct text color from bg
 colors

---
 packages/vuetify/src/components/VToolbar/VToolbar.sass   | 1 -
 packages/vuetify/src/components/VToolbar/VToolbar.tsx    | 5 ++++-
 packages/vuetify/src/components/VToolbar/_variables.scss | 7 -------
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass
index ea9fc6763f0..70eccf7970f 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.sass
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.sass
@@ -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)
 
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
index 87e54d312ff..7d0ae39ae54 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.tsx
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
@@ -31,7 +31,10 @@ const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'
 export const makeVToolbarProps = propsFactory({
   absolute: Boolean,
   collapse: Boolean,
-  color: String,
+  color: {
+    type: String,
+    default: 'surface',
+  },
   density: {
     type: String as PropType<Density>,
     default: 'default',
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,

From d82c5d1baba15d626f8338e3b40ad5bf9eb90019 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 21:12:31 -0600
Subject: [PATCH 56/60] docs(badges.md): add new content example

---
 .../src/examples/v-badge/prop-content.vue     | 33 +++++++++++++++++++
 .../docs/src/pages/en/components/badges.md    |  6 ++++
 2 files changed, 39 insertions(+)
 create mode 100644 packages/docs/src/examples/v-badge/prop-content.vue

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/pages/en/components/badges.md b/packages/docs/src/pages/en/components/badges.md
index 2f1640a36c0..319e0dec5fd 100644
--- a/packages/docs/src/pages/en/components/badges.md
+++ b/packages/docs/src/pages/en/components/badges.md
@@ -42,6 +42,12 @@ Inline badges can be placed anywhere with content and can render without a *defa
 
 <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

From 2a41427a21fb9173a6c5803f5adebbf9275bb7a8 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 21:30:10 -0600
Subject: [PATCH 57/60] refactor(VCard): set default color to surface

---
 packages/vuetify/src/components/VCard/VCard.tsx              | 5 ++++-
 .../VCard/__tests__/__snapshots__/VCard.spec.ts.snap         | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/VCard/VCard.tsx b/packages/vuetify/src/components/VCard/VCard.tsx
index 76586169996..a49204881ad 100644
--- a/packages/vuetify/src/components/VCard/VCard.tsx
+++ b/packages/vuetify/src/components/VCard/VCard.tsx
@@ -62,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 }) {
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">

From efc4134fc65a77cd8da68cae46cbcdd4577168c6 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Tue, 1 Mar 2022 21:41:17 -0600
Subject: [PATCH 58/60] refactor(VAlert): set default color to surface variant

---
 packages/vuetify/src/components/VAlert/VAlert.sass     | 1 -
 packages/vuetify/src/components/VAlert/VAlert.tsx      | 5 ++++-
 packages/vuetify/src/components/VAlert/_variables.scss | 5 -----
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/vuetify/src/components/VAlert/VAlert.sass b/packages/vuetify/src/components/VAlert/VAlert.sass
index d0058553984..4eac7fc4250 100644
--- a/packages/vuetify/src/components/VAlert/VAlert.sass
+++ b/packages/vuetify/src/components/VAlert/VAlert.sass
@@ -14,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 2e9ccc6e1ae..d7a0a0c2d53 100644
--- a/packages/vuetify/src/components/VAlert/_variables.scss
+++ b/packages/vuetify/src/components/VAlert/_variables.scss
@@ -36,11 +36,6 @@ $alert-border: (
   $alert-border-thin-width
 ) !default;
 
-$alert-theme: (
-  $alert-background,
-  $alert-color
-) !default;
-
 $alert-variants: (
   $alert-background,
   $alert-color,

From ea082f7f86bf7d81c5f65fbbceef8daabbc3b8b2 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 2 Mar 2022 17:15:40 +1100
Subject: [PATCH 59/60] docs: add missing nav titles

---
 packages/docs/src/pages/en/components/button-groups.md     | 1 +
 packages/docs/src/pages/en/components/expansion-panels.md  | 1 +
 packages/docs/src/pages/en/components/file-inputs.md       | 1 +
 packages/docs/src/pages/en/components/forms.md             | 1 +
 packages/docs/src/pages/en/components/inputs.md            | 1 +
 packages/docs/src/pages/en/components/menus.md             | 1 +
 packages/docs/src/pages/en/components/progress-circular.md | 1 +
 packages/docs/src/pages/en/components/progress-linear.md   | 1 +
 packages/docs/src/pages/en/components/radio-buttons.md     | 1 +
 packages/docs/src/pages/en/components/switches.md          | 1 +
 packages/docs/src/pages/en/components/text-fields.md       | 1 +
 packages/docs/src/pages/en/components/textareas.md         | 1 +
 packages/docs/src/pages/en/directives/resize.md            | 1 +
 packages/docs/src/pages/en/directives/ripple.md            | 1 +
 packages/docs/src/pages/en/directives/scroll.md            | 1 +
 packages/docs/src/pages/en/directives/touch.md             | 1 +
 16 files changed, 16 insertions(+)

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/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/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/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/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.

From dec48eb0a1311678819a9e25c450a5826f42e0b8 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 2 Mar 2022 17:38:16 +1100
Subject: [PATCH 60/60] fix(VBtn): add boolean rounded support

---
 packages/vuetify/src/components/VBtn/VBtn.sass       | 6 +++---
 packages/vuetify/src/components/VBtn/_variables.scss | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

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;