From c80e33fbda96417b6458058da300b6fb6bf5243e Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 10 Mar 2024 15:02:59 -0500
Subject: [PATCH 01/33] chore(VDatePickerControls): add todo comment

---
 .../vuetify/src/components/VDatePicker/VDatePickerControls.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerControls.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerControls.tsx
index ae074f25073..06f82c670be 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerControls.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerControls.tsx
@@ -92,6 +92,7 @@ export const VDatePickerControls = genericComponent()({
     }
 
     useRender(() => {
+      // TODO: add slot support and scope defaults
       return (
         <div
           class={[

From 7706b4b6ba1849366b51c1adeb0dbcb5c4b0a5ea Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 10 Mar 2024 15:54:34 -0500
Subject: [PATCH 02/33] chore(package.json): update to latest @vuetify/one

---
 packages/docs/package.json            | 2 +-
 packages/docs/src/layouts/default.vue | 4 +---
 packages/docs/src/layouts/home.vue    | 4 +---
 packages/docs/src/layouts/user.vue    | 2 ++
 yarn.lock                             | 8 ++++----
 5 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index 53342dc8b59..bb20c1f5a8f 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -23,7 +23,7 @@
     "@cosmicjs/sdk": "^1.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^1.1.1",
+    "@vuetify/one": "^1.1.5",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",
diff --git a/packages/docs/src/layouts/default.vue b/packages/docs/src/layouts/default.vue
index b96689ec6cd..14175b6f4f0 100644
--- a/packages/docs/src/layouts/default.vue
+++ b/packages/docs/src/layouts/default.vue
@@ -1,8 +1,6 @@
 <template>
   <v-app>
-    <VoNotificationsBanner />
-
-    <VoAuthDialog />
+    <VoNotificationsBanner order="-1" />
 
     <AppSettingsDrawer />
 
diff --git a/packages/docs/src/layouts/home.vue b/packages/docs/src/layouts/home.vue
index c3bd0fcded0..f131c13f404 100644
--- a/packages/docs/src/layouts/home.vue
+++ b/packages/docs/src/layouts/home.vue
@@ -1,8 +1,6 @@
 <template>
   <v-app>
-    <VoNotificationsBanner />
-
-    <VoAuthDialog />
+    <VoNotificationsBanner order="-1" />
 
     <AppSettingsDrawer />
 
diff --git a/packages/docs/src/layouts/user.vue b/packages/docs/src/layouts/user.vue
index 0a91e758f76..b95a41e725f 100644
--- a/packages/docs/src/layouts/user.vue
+++ b/packages/docs/src/layouts/user.vue
@@ -1,5 +1,7 @@
 <template>
   <v-app>
+    <VoNotificationsBanner order="-1" />
+
     <AppSettingsDrawer />
 
     <AppBarBar />
diff --git a/yarn.lock b/yarn.lock
index 3522466d10b..9193d055d5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3949,10 +3949,10 @@
     find-cache-dir "^3.3.2"
     upath "^2.0.1"
 
-"@vuetify/one@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.1.1.tgz#938fa96bfa9329cf326a45d2ec03f22b317b23fc"
-  integrity sha512-Q9XgP+eqfImVHHucREycGgzaOk4R3m5l6wMPBsEcv5XXhzkhncILm/KMhel/5sYRn9MfBNpyg17s7NeciixTRg==
+"@vuetify/one@^1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.1.5.tgz#00c28119edc29428dee238c69537f79e996041f5"
+  integrity sha512-GxsxGbruHJCE0GqwOKIXvHGBJYOrLEd2FA/wL6TyqOn0w8s9k6tSuCuVOCr+H8oh+vncT7TBZavKFOKgGhizlw==
 
 "@vueuse/head@^1.3.1":
   version "1.3.1"

From 3ea9bda781ffcba817382b2fa14244f85b268452 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 11 Mar 2024 12:25:46 -0500
Subject: [PATCH 03/33] chore(package.json): update @vuetify/one

---
 packages/docs/package.json                    | 2 +-
 packages/docs/src/components/app/bar/Logo.vue | 2 +-
 yarn.lock                                     | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index bb20c1f5a8f..50d827f9cd3 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -23,7 +23,7 @@
     "@cosmicjs/sdk": "^1.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^1.1.5",
+    "@vuetify/one": "^1.1.6",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",
diff --git a/packages/docs/src/components/app/bar/Logo.vue b/packages/docs/src/components/app/bar/Logo.vue
index 8093d98ad90..eef4202c879 100644
--- a/packages/docs/src/components/app/bar/Logo.vue
+++ b/packages/docs/src/components/app/bar/Logo.vue
@@ -24,7 +24,7 @@
   const theme = useTheme()
 
   const logo = computed(() => {
-    const file = `${theme.name.value}.svg`
+    const file = `${theme.current.value.dark ? 'dark' : 'light'}.svg`
     const logo = 'vuetify-logo-v3-slim'
 
     return `${logo}-${lgAndUp.value ? 'text-' : ''}${file}`
diff --git a/yarn.lock b/yarn.lock
index 9193d055d5f..8dff31191f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3949,10 +3949,10 @@
     find-cache-dir "^3.3.2"
     upath "^2.0.1"
 
-"@vuetify/one@^1.1.5":
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.1.5.tgz#00c28119edc29428dee238c69537f79e996041f5"
-  integrity sha512-GxsxGbruHJCE0GqwOKIXvHGBJYOrLEd2FA/wL6TyqOn0w8s9k6tSuCuVOCr+H8oh+vncT7TBZavKFOKgGhizlw==
+"@vuetify/one@^1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.1.6.tgz#6e436c687b3db2823553dd256f655d0ced897c38"
+  integrity sha512-f6js/6fAxf10wm6xTSxAJqMZzrnwGECyO/cli29f7kG8xmHews3RJeFNJii9lXAFjPuK52hfEAjcWm2yhkOrug==
 
 "@vueuse/head@^1.3.1":
   version "1.3.1"

From c7ef9c75e7dfc3c907e69d368b6d942ef42ae9f3 Mon Sep 17 00:00:00 2001
From: Andrew Henry <AMajesticPotatoe@gmail.com>
Date: Mon, 11 Mar 2024 16:57:05 -0400
Subject: [PATCH 04/33] docs(upgrade-guide): update info on filter function

---
 packages/docs/src/pages/en/getting-started/upgrade-guide.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/docs/src/pages/en/getting-started/upgrade-guide.md b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
index cf4cae76caa..5ae23ab20ee 100644
--- a/packages/docs/src/pages/en/getting-started/upgrade-guide.md
+++ b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
@@ -243,6 +243,8 @@ app.use(vuetify)
   - `data-table-select` and `data-table-expand` must be defined as `key` instead of `value`.
   - `class` has been replaced with `headerProps`.
   - `cellClass` has been replaced with `cellProps` and now accepts either a function or an object.
+  - `filter` function requires `search` to be used in order for it to be triggered.
+- Tables requires `search` prop to trigger filtering. `items` array can be pre-filter with a computed.
 - Server side tables using `server-items-length` must be replaced with `<v-data-table-server items-length />`.
 - Argument order for `@click:*` events is now consistently `(event, data)`.
   - `onRowClick (item, data, event)` should be changed to `onRowClick (event, { item })`.

From bb61a69f3c1c7ee6c0ca0a630344e58ebdf71e75 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 11 Mar 2024 22:40:28 -0500
Subject: [PATCH 05/33] fix(VColorPickerPreview): slider overflowing

---
 .../vuetify/src/components/VColorPicker/VColorPickerPreview.sass | 1 +
 packages/vuetify/src/components/VColorPicker/_variables.scss     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass
index 584de836a68..5a4559c1c3c 100644
--- a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass
+++ b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass
@@ -25,6 +25,7 @@
   display: flex
   flex: 1 0 auto
   flex-direction: column
+  padding-inline-end: $color-picker-preview-sliders-padding
 
 .v-color-picker-preview__dot
   position: relative
diff --git a/packages/vuetify/src/components/VColorPicker/_variables.scss b/packages/vuetify/src/components/VColorPicker/_variables.scss
index 345d297093a..847ee0027dd 100644
--- a/packages/vuetify/src/components/VColorPicker/_variables.scss
+++ b/packages/vuetify/src/components/VColorPicker/_variables.scss
@@ -27,3 +27,4 @@ $color-picker-canvas-dot-size: 15px !default;
 $color-picker-preview-dot-size: 30px !default;
 $color-picker-preview-dot-margin: 24px !default;
 $color-picker-preview-dropper-margin: 12px !default;
+$color-picker-preview-sliders-padding: 16px !default;

From 2553cb5d59ddbb3ee53e93fad8df584477ed9df0 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 11 Mar 2024 23:42:39 -0500
Subject: [PATCH 06/33] docs(SettingsDrawer): add new themes, missing pins
 option, update locale

---
 packages/docs/package.json                    |  2 +-
 .../src/components/app/settings/Options.vue   |  1 +
 .../app/settings/options/ThemeOption.vue      | 20 ++++++++++++++-----
 packages/docs/src/i18n/messages/en.json       |  2 +-
 packages/docs/src/plugins/icons.ts            |  4 +++-
 yarn.lock                                     |  8 ++++----
 6 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index 50d827f9cd3..63d3d0287c2 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -23,7 +23,7 @@
     "@cosmicjs/sdk": "^1.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^1.1.6",
+    "@vuetify/one": "^1.1.7",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",
diff --git a/packages/docs/src/components/app/settings/Options.vue b/packages/docs/src/components/app/settings/Options.vue
index f59e6d0d9b2..f5e429c8f1c 100644
--- a/packages/docs/src/components/app/settings/Options.vue
+++ b/packages/docs/src/components/app/settings/Options.vue
@@ -13,6 +13,7 @@
       text="general-message"
       title="general"
     />
+    <AppSettingsOptionsPinOption />
 
     <AppSettingsOptionsCodeOption />
 
diff --git a/packages/docs/src/components/app/settings/options/ThemeOption.vue b/packages/docs/src/components/app/settings/options/ThemeOption.vue
index 3ab70509ed3..bb1253556ad 100644
--- a/packages/docs/src/components/app/settings/options/ThemeOption.vue
+++ b/packages/docs/src/components/app/settings/options/ThemeOption.vue
@@ -51,15 +51,25 @@
       icon: 'mdi-weather-night',
       value: 'dark',
     },
+    {
+      text: 'Blackguard',
+      icon: 'mdi-space-invaders',
+      value: 'blackguard',
+    },
+    {
+      text: 'Polaris',
+      icon: 'mdi-image-filter-hdr',
+      value: 'polaris',
+    },
+    {
+      text: 'Nebula',
+      icon: 'mdi-rocket-launch-outline',
+      value: 'nebula',
+    },
     {
       text: t('system'),
       icon: 'mdi-desktop-tower-monitor',
       value: 'system',
     },
-    {
-      text: t('blackguard'),
-      icon: 'mdi-space-invaders',
-      value: 'blackguard',
-    },
   ]
 </script>
diff --git a/packages/docs/src/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json
index 2baf8ea8991..ce4cccbb38c 100644
--- a/packages/docs/src/i18n/messages/en.json
+++ b/packages/docs/src/i18n/messages/en.json
@@ -291,7 +291,7 @@
   "see-more-themes-from": "See More Themes From {vendor}",
   "selection": "Selection",
   "services": "Services",
-  "settings": "Settings",
+  "settings": "Documentation settings",
   "slash-search": "Use / for Search hotkey",
   "slash-search-message": "This option sets the bound search key to '/' from Cmd/Ctrl+K.",
   "small": "Small",
diff --git a/packages/docs/src/plugins/icons.ts b/packages/docs/src/plugins/icons.ts
index aee48b97baf..c0cf8a9cd90 100644
--- a/packages/docs/src/plugins/icons.ts
+++ b/packages/docs/src/plugins/icons.ts
@@ -209,6 +209,7 @@ export {
   mdiImage,
   mdiImageEdit,
   mdiImageEditOutline,
+  mdiImageFilterHdr,
   mdiImageOutline,
   mdiInboxArrowDown,
   mdiInformation,
@@ -313,6 +314,7 @@ export {
   mdiRefresh,
   mdiReply,
   mdiRewind,
+  mdiRocketLaunchOutline,
   mdiSass,
   mdiSchool,
   mdiScriptText,
@@ -368,7 +370,6 @@ export {
   mdiVideoVintage,
   mdiViewDashboard,
   mdiViewDashboardOutline,
-  mdiWindowRestore,
   mdiViewGridOutline,
   mdiViewListOutline,
   mdiViewModule,
@@ -389,6 +390,7 @@ export {
   mdiWifiStrengthAlertOutline,
   mdiWindowMaximize,
   mdiWindowMinimize,
+  mdiWindowRestore,
   mdiWrench,
 } from '@mdi/js'
 
diff --git a/yarn.lock b/yarn.lock
index 8dff31191f9..8645541ae38 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3949,10 +3949,10 @@
     find-cache-dir "^3.3.2"
     upath "^2.0.1"
 
-"@vuetify/one@^1.1.6":
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.1.6.tgz#6e436c687b3db2823553dd256f655d0ced897c38"
-  integrity sha512-f6js/6fAxf10wm6xTSxAJqMZzrnwGECyO/cli29f7kG8xmHews3RJeFNJii9lXAFjPuK52hfEAjcWm2yhkOrug==
+"@vuetify/one@^1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.1.7.tgz#25788d6e835db4ee7f4622025a6a5571b747c7c3"
+  integrity sha512-T6m8Jo62wo36TFgRT2xy8bYmHeIePxRr4iTghFojd1pFMiAZmcnlWossyWyIQ7DsESLJL2QLgkHDPuqyLfZlYw==
 
 "@vueuse/head@^1.3.1":
   version "1.3.1"

From 7b5f2290f726092ae017c9674d141ae012fc7440 Mon Sep 17 00:00:00 2001
From: Yuchao Wu <yuchao.sydneyuni@gmail.com>
Date: Tue, 12 Mar 2024 20:02:38 +1100
Subject: [PATCH 07/33] fix(VSelects): Open menu only when items mutate from an
 empty array

fixes #19346
---
 .../components/VAutocomplete/VAutocomplete.tsx    |  8 +++++---
 .../__tests__/VAutocomplete.spec.cy.tsx           | 15 +++++++++++++++
 .../src/components/VCombobox/VCombobox.tsx        |  8 +++++---
 .../VCombobox/__tests__/VCombobox.spec.cy.tsx     | 15 +++++++++++++++
 .../vuetify/src/components/VSelect/VSelect.tsx    |  8 +++++---
 .../VSelect/__tests__/VSelect.spec.cy.tsx         | 15 +++++++++++++++
 6 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 0f9095d85b5..17b7b2a4a33 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -399,10 +399,12 @@ export const VAutocomplete = genericComponent<new <
       }
     })
 
-    watch(() => props.items, val => {
-      if (!isFocused.value || !val.length || menu.value) return
+    watch(() => props.items, (newVal, oldVal) => {
+      if (menu.value) return
 
-      menu.value = true
+      if (isFocused.value && !oldVal.length && newVal.length) {
+        menu.value = true
+      }
     })
 
     useRender(() => {
diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
index 58197dc9a39..601258f1082 100644
--- a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
@@ -545,6 +545,21 @@ describe('VAutocomplete', () => {
       .should('exist')
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/19346
+  it('should not show menu when focused and existing non-empty items are changed', () => {
+    cy
+      .mount((props: any) => (<VAutocomplete items={ props.items } />))
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-autocomplete')
+      .click()
+      .get('.v-overlay')
+      .should('exist')
+      .get('.v-list-item').eq(1).click({ waitForAnimations: false })
+      .setProps({ items: ['Foo', 'Bar', 'test', 'test 2'] })
+      .get('.v-overlay')
+      .should('not.exist')
+  })
+
   // https://github.com/vuetifyjs/vuetify/issues/17573
   // When using selection slot or chips, input displayed next to chip/selection slot should be always empty
   it('should always have empty input value when it is unfocused and when using selection slot or chips', () => {
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index 4aa75f9a53a..7af942c2816 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -445,10 +445,12 @@ export const VCombobox = genericComponent<new <
       }
     })
 
-    watch(() => props.items, val => {
-      if (!isFocused.value || !val.length || menu.value) return
+    watch(() => props.items, (newVal, oldVal) => {
+      if (menu.value) return
 
-      menu.value = true
+      if (isFocused.value && !oldVal.length && newVal.length) {
+        menu.value = true
+      }
     })
 
     useRender(() => {
diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
index 37438b8f83d..d8dc1c89515 100644
--- a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
+++ b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
@@ -665,6 +665,21 @@ describe('VCombobox', () => {
       .should('exist')
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/19346
+  it('should not show menu when focused and existing non-empty items are changed', () => {
+    cy
+      .mount((props: any) => (<VCombobox items={ props.items } />))
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-combobox')
+      .click()
+      .get('.v-overlay')
+      .should('exist')
+      .get('.v-list-item').eq(0).click({ waitForAnimations: false })
+      .setProps({ items: ['Foo', 'Bar', 'test'] })
+      .get('.v-overlay')
+      .should('not.exist')
+  })
+
   // https://github.com/vuetifyjs/vuetify/issues/17573
   // When using selection slot or chips, input displayed next to chip/selection slot should be always empty
   it('should always have empty input value when it is unfocused and when using selection slot or chips', () => {
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index 7f6ff07e3b9..44814fdde29 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -313,10 +313,12 @@ export const VSelect = genericComponent<new <
       }
     })
 
-    watch(() => props.items, val => {
-      if (!isFocused.value || !val.length || menu.value) return
+    watch(() => props.items, (newVal, oldVal) => {
+      if (menu.value) return
 
-      menu.value = true
+      if (isFocused.value && !oldVal.length && newVal.length) {
+        menu.value = true
+      }
     })
 
     useRender(() => {
diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
index 0ca61fa47cd..b438127a98a 100644
--- a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
+++ b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
@@ -584,6 +584,21 @@ describe('VSelect', () => {
       .should('exist')
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/19346
+  it('should not show menu when focused and existing non-empty items are changed', () => {
+    cy
+      .mount((props: any) => (<VSelect items={ props.items } />))
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-select')
+      .click()
+      .get('.v-overlay')
+      .should('exist')
+      .get('.v-list-item').eq(1).click({ waitForAnimations: false })
+      .setProps({ items: ['Foo', 'Bar', 'test', 'test 2'] })
+      .get('.v-overlay')
+      .should('not.exist')
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })

From 7f276a55bb6943ae110eaebb2e3533f76628f41b Mon Sep 17 00:00:00 2001
From: Prashant Singh <57935926+prashantsinghb@users.noreply.github.com>
Date: Tue, 12 Mar 2024 22:18:38 +0530
Subject: [PATCH 08/33] feat(VTreeview): port to v3 (#17864)

closes #13518

Co-authored-by: John Leider <john@vuetifyjs.com>
Co-authored-by: Kael <kaelwd@gmail.com>
---
 .../api-generator/src/locale/en/VList.json    |   1 +
 .../src/locale/en/VListGroup.json             |   7 +-
 .../src/locale/en/VTreeview.json              |  18 +-
 .../api-generator/src/locale/en/generic.json  |   1 +
 .../api-generator/src/locale/en/nested.json   |   2 +
 packages/docs/src/data/nav.json               |   4 +
 packages/docs/src/data/page-to-api.json       |   7 +-
 .../v-treeview/misc-search-and-filter.vue     |  58 +++---
 .../v-treeview/misc-selectable-icons.vue      |  44 ++---
 .../examples/v-treeview/prop-activatable.vue  | 100 +++++-----
 .../src/examples/v-treeview/prop-color.vue    | 100 +++++-----
 .../src/examples/v-treeview/prop-dense.vue    | 102 +++++-----
 .../v-treeview/prop-item-disabled.vue         | 100 +++++-----
 .../v-treeview/prop-load-children.vue         |   9 +-
 .../src/examples/v-treeview/prop-open-all.vue | 101 +++++-----
 .../src/examples/v-treeview/prop-rounded.vue  | 101 +++++-----
 .../examples/v-treeview/prop-selectable.vue   | 100 +++++-----
 .../v-treeview/prop-selected-color.vue        | 100 +++++-----
 .../v-treeview/prop-selection-type.vue        |  24 +--
 .../src/examples/v-treeview/prop-shaped.vue   | 100 +++++-----
 .../v-treeview/slot-append-and-label.vue      |  54 +++---
 .../docs/src/examples/v-treeview/usage.vue    |  50 ++---
 .../docs/src/pages/en/components/treeview.md  |  53 ++++--
 .../pages/en/getting-started/upgrade-guide.md |   2 -
 .../docs/src/pages/en/labs/introduction.md    |   1 +
 .../vuetify/src/components/VList/VList.tsx    |   8 +-
 .../src/components/VList/VListGroup.tsx       |   4 +-
 .../src/components/VList/VListItem.tsx        |  32 +++-
 .../composables/nested/activeStrategies.ts    | 130 +++++++++++++
 .../vuetify/src/composables/nested/nested.ts  |  66 ++++++-
 .../composables/nested/selectStrategies.ts    |  12 +-
 packages/vuetify/src/iconsets/fa.ts           |   2 +
 packages/vuetify/src/iconsets/fa4.ts          |   2 +
 packages/vuetify/src/iconsets/md.ts           |   2 +
 packages/vuetify/src/iconsets/mdi-svg.ts      |   2 +
 packages/vuetify/src/iconsets/mdi.ts          |   2 +
 .../vuetify/src/labs/VTreeview/VTreeview.tsx  | 180 ++++++++++++++++++
 .../src/labs/VTreeview/VTreeviewChildren.tsx  | 122 ++++++++++++
 .../src/labs/VTreeview/VTreeviewGroup.tsx     |  68 +++++++
 .../src/labs/VTreeview/VTreeviewItem.sass     |  19 ++
 .../src/labs/VTreeview/VTreeviewItem.tsx      | 118 ++++++++++++
 packages/vuetify/src/labs/VTreeview/index.ts  |   3 +
 packages/vuetify/src/labs/VTreeview/shared.ts |   8 +
 .../vuetify/src/labs/VTreeview/variables.scss |   8 +
 packages/vuetify/src/labs/components.ts       |   5 +-
 45 files changed, 1422 insertions(+), 610 deletions(-)
 create mode 100644 packages/vuetify/src/composables/nested/activeStrategies.ts
 create mode 100644 packages/vuetify/src/labs/VTreeview/VTreeview.tsx
 create mode 100644 packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
 create mode 100644 packages/vuetify/src/labs/VTreeview/VTreeviewGroup.tsx
 create mode 100644 packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
 create mode 100644 packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
 create mode 100644 packages/vuetify/src/labs/VTreeview/index.ts
 create mode 100644 packages/vuetify/src/labs/VTreeview/shared.ts
 create mode 100644 packages/vuetify/src/labs/VTreeview/variables.scss

diff --git a/packages/api-generator/src/locale/en/VList.json b/packages/api-generator/src/locale/en/VList.json
index 742a35ec945..f2db19cf83b 100644
--- a/packages/api-generator/src/locale/en/VList.json
+++ b/packages/api-generator/src/locale/en/VList.json
@@ -1,5 +1,6 @@
 {
   "props": {
+    "itemType": "Designates the key on the supplied items that is used for determining the nodes type.",
     "disabled": "Puts all children inputs into a disabled state.",
     "inactive": "If set, the list tile will not be rendered as a link even if it has to/href prop or @click handler.",
     "lines": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.",
diff --git a/packages/api-generator/src/locale/en/VListGroup.json b/packages/api-generator/src/locale/en/VListGroup.json
index 7b92d7f1795..798eb02ee5a 100644
--- a/packages/api-generator/src/locale/en/VListGroup.json
+++ b/packages/api-generator/src/locale/en/VListGroup.json
@@ -1,10 +1,15 @@
 {
   "props": {
     "disabled": "Puts all children inputs into a disabled state.",
+    "collapseIcon": "Icon to display when the list item is expanded.",
+    "expandIcon": "Icon to display when the list item is collapsed.",
     "group": "Assign a route namespace. Accepts a string or regexp for determining active state.",
     "noAction": "Removes left padding assigned for action icons from group items.",
     "prependIcon": "Prepends an icon to the component, uses the same syntax as `v-icon`.",
-    "subGroup": "Designate the component as nested list group.",
+    "subgroup": "Designate the component as nested list group.",
     "value": "Expands / Collapse the list-group."
+  },
+  "exposed": {
+    "isOpen": "Returns the current state of the list-group."
   }
 }
diff --git a/packages/api-generator/src/locale/en/VTreeview.json b/packages/api-generator/src/locale/en/VTreeview.json
index efd9b38d1dd..f693e4df8bd 100644
--- a/packages/api-generator/src/locale/en/VTreeview.json
+++ b/packages/api-generator/src/locale/en/VTreeview.json
@@ -1,7 +1,6 @@
 {
   "props": {
     "activatable": "Allows user to mark a node as active by clicking on it.",
-    "active": "Syncable prop that allows one to control which nodes are active. The array consists of the `item-key` of each active item.",
     "color": "Applies specified color to the active node - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "dense": "Decreases the height of the items.",
     "disabled": "Disables selection for all nodes.",
@@ -35,14 +34,19 @@
   },
   "slots": {
     "append": "Appends content after label.",
-    "prepend": "Prepends content before label."
+    "prepend": "Prepends content before label.",
+    "header": "Slot for custom header.",
+    "subheader": "Slot for custom subheader.",
+    "divider": "Slot for custom divider."
   },
   "events": {
-    "input": "Emits the array of selected items when this value changes.",
-    "update:active": "Emits the array of active items when this value changes.",
-    "update:open": "Emits the array of open items when this value changes."
+    "click:open": "Emits the item when it is clicked to open.",
+    "click:select": "Emits the item when it is clicked to select.",
+    "update:activated": "Emits the array of active items when this value changes.",
+    "update:opened": "Emits the array of open items when this value changes.",
+    "update:selected": "Emits the array of selected items when this value changes."
   },
-  "functions": {
-    "updateAll": "Opens or closes all nodes."
+  "exposed": {
+    "open": "Open a node by id"
   }
 }
diff --git a/packages/api-generator/src/locale/en/generic.json b/packages/api-generator/src/locale/en/generic.json
index 8f6a154cdd1..929c9de22a3 100644
--- a/packages/api-generator/src/locale/en/generic.json
+++ b/packages/api-generator/src/locale/en/generic.json
@@ -6,6 +6,7 @@
     "appendAvatar": "Appends a [v-avatar](/components/avatars/) component after default content in the **append** slot.",
     "appendIcon": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot.",
     "auto": "Centers list on selected element.",
+    "baseColor": "Sets the color of component when not focused.",
     "bgColor": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "clearable": "Allows for the component to be cleared.",
     "color": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
diff --git a/packages/api-generator/src/locale/en/nested.json b/packages/api-generator/src/locale/en/nested.json
index 139e3fd588b..0ec2a7aa424 100644
--- a/packages/api-generator/src/locale/en/nested.json
+++ b/packages/api-generator/src/locale/en/nested.json
@@ -1,5 +1,7 @@
 {
   "props": {
+    "activated": "Array of ids of activated nodes.",
+    "activeStrategy": "Affects how items with children behave when activated.\n- **leaf:** Only leaf nodes (items without children) can be activated.\n- **independent:** All nodes can be activated whether they have children or not.\n- **classic:** Activating a parent node will cause all children to be activated.",
     "opened": "An array containing the values of currently opened groups. Can be two-way bound with `v-model:opened`.",
     "openStrategy": "Affects how items with children behave when expanded.\n- **multiple:** Any number of groups can be open at once.\n- **single:** Only one group at each level can be open, opening a group will cause others to close.\n- **list:** Multiple, but all other groups will close when an item is selected.",
     "selected": "An array containing the values of currently selected items. Can be two-way bound with `v-model:selected`.",
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index a9082a85921..08d65dd87aa 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -238,6 +238,10 @@
       {
         "title": "speed-dials",
         "subfolder": "components"
+      },
+      {
+        "title": "treeview",
+        "subfolder": "components"
       }
     ]
   },
diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json
index 54f377f2521..36322ada286 100644
--- a/packages/docs/src/data/page-to-api.json
+++ b/packages/docs/src/data/page-to-api.json
@@ -143,7 +143,12 @@
   "components/timelines": ["VTimeline", "VTimelineItem"],
   "components/toolbars": ["VToolbar", "VToolbarItems", "VToolbarTitle"],
   "components/tooltips": ["VTooltip"],
-  "components/treeview": ["VTreeview"],
+  "components/treeview": [
+    "VTreeview",
+    "VTreeviewItem",
+    "VTreeviewChildren",
+    "VTreeviewGroup"
+  ],
   "components/virtual-scroller": ["VVirtualScroll"],
   "components/windows": ["VWindow", "VWindowItem"],
   "directives/click-outside": ["v-click-outside"],
diff --git a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
index e0b2bbc6ebb..7333aefc0cf 100644
--- a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
+++ b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
@@ -31,7 +31,7 @@
         <template v-slot:prepend="{ item }">
           <v-icon
             v-if="item.children"
-            v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
+            :icon="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
           ></v-icon>
         </template>
       </v-treeview>
@@ -45,63 +45,63 @@
   const items = ref([
     {
       id: 1,
-      name: 'Vuetify Human Resources',
+      title: 'Vuetify Human Resources',
       children: [
         {
           id: 2,
-          name: 'Core team',
+          title: 'Core team',
           children: [
             {
               id: 201,
-              name: 'John',
+              title: 'John',
             },
             {
               id: 202,
-              name: 'Kael',
+              title: 'Kael',
             },
             {
               id: 203,
-              name: 'Nekosaur',
+              title: 'Nekosaur',
             },
             {
               id: 204,
-              name: 'Jacek',
+              title: 'Jacek',
             },
             {
               id: 205,
-              name: 'Andrew',
+              title: 'Andrew',
             },
           ],
         },
         {
           id: 3,
-          name: 'Administrators',
+          title: 'Administrators',
           children: [
             {
               id: 301,
-              name: 'Mike',
+              title: 'Mike',
             },
             {
               id: 302,
-              name: 'Hunt',
+              title: 'Hunt',
             },
           ],
         },
         {
           id: 4,
-          name: 'Contributors',
+          title: 'Contributors',
           children: [
             {
               id: 401,
-              name: 'Phlow',
+              title: 'Phlow',
             },
             {
               id: 402,
-              name: 'Brandon',
+              title: 'Brandon',
             },
             {
               id: 403,
-              name: 'Sean',
+              title: 'Sean',
             },
           ],
         },
@@ -122,63 +122,63 @@
       items: [
         {
           id: 1,
-          name: 'Vuetify Human Resources',
+          title: 'Vuetify Human Resources',
           children: [
             {
               id: 2,
-              name: 'Core team',
+              title: 'Core team',
               children: [
                 {
                   id: 201,
-                  name: 'John',
+                  title: 'John',
                 },
                 {
                   id: 202,
-                  name: 'Kael',
+                  title: 'Kael',
                 },
                 {
                   id: 203,
-                  name: 'Nekosaur',
+                  title: 'Nekosaur',
                 },
                 {
                   id: 204,
-                  name: 'Jacek',
+                  title: 'Jacek',
                 },
                 {
                   id: 205,
-                  name: 'Andrew',
+                  title: 'Andrew',
                 },
               ],
             },
             {
               id: 3,
-              name: 'Administrators',
+              title: 'Administrators',
               children: [
                 {
                   id: 301,
-                  name: 'Mike',
+                  title: 'Mike',
                 },
                 {
                   id: 302,
-                  name: 'Hunt',
+                  title: 'Hunt',
                 },
               ],
             },
             {
               id: 4,
-              name: 'Contributors',
+              title: 'Contributors',
               children: [
                 {
                   id: 401,
-                  name: 'Phlow',
+                  title: 'Phlow',
                 },
                 {
                   id: 402,
-                  name: 'Brandon',
+                  title: 'Brandon',
                 },
                 {
                   id: 403,
-                  name: 'Sean',
+                  title: 'Sean',
                 },
               ],
             },
diff --git a/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue b/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue
index 1fa861b86bc..0cf3925f03b 100644
--- a/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue
+++ b/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue
@@ -2,30 +2,33 @@
   <v-card>
     <v-toolbar
       color="primary"
-      dark
       flat
     >
-      <v-icon>mdi-silverware</v-icon>
-      <v-toolbar-title>Local hotspots</v-toolbar-title>
+      <template v-slot:prepend>
+        <v-icon start>mdi-silverware</v-icon>
+
+        <v-toolbar-title>Local hotspots</v-toolbar-title>
+      </template>
     </v-toolbar>
 
     <v-row>
       <v-col>
         <v-card-text>
           <v-treeview
-            v-model="tree"
+            v-model:selected="tree"
             :items="items"
             :load-children="load"
             expand-icon="mdi-chevron-down"
             indeterminate-icon="mdi-bookmark-minus"
+            item-title="name"
+            item-value="name"
             off-icon="mdi-bookmark-outline"
             on-icon="mdi-bookmark"
             selected-color="indigo"
             open-on-click
             return-object
             selectable
-          >
-          </v-treeview>
+          ></v-treeview>
         </v-card-text>
       </v-col>
 
@@ -51,19 +54,12 @@
             <v-chip
               v-for="(selection, i) in tree"
               :key="i"
+              :text="selection"
               class="ma-1"
               color="grey"
-              dark
-              small
-            >
-              <v-icon
-                size="small"
-                start
-              >
-                mdi-beer
-              </v-icon>
-              {{ selection.name }}
-            </v-chip>
+              prepend-icon="mdi-beer"
+              size="small"
+            ></v-chip>
           </v-scroll-x-transition>
         </v-card-text>
       </v-col>
@@ -73,23 +69,19 @@
 
     <v-card-actions>
       <v-btn
+        text="Reset"
         variant="text"
         @click="tree = []"
-      >
-        Reset
-      </v-btn>
+      ></v-btn>
 
       <v-spacer></v-spacer>
 
       <v-btn
+        append-icon="mdi-content-save"
         color="green-darken-1"
+        text="Save"
         variant="flat"
-      >
-        Save
-        <v-icon end>
-          mdi-content-save
-        </v-icon>
-      </v-btn>
+      ></v-btn>
     </v-card-actions>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-treeview/prop-activatable.vue b/packages/docs/src/examples/v-treeview/prop-activatable.vue
index c53ecc0a794..3d6a9fd765e 100644
--- a/packages/docs/src/examples/v-treeview/prop-activatable.vue
+++ b/packages/docs/src/examples/v-treeview/prop-activatable.vue
@@ -11,42 +11,42 @@
   const items = ref([
     {
       id: 1,
-      name: 'Applications :',
+      title: 'Applications :',
       children: [
-        { id: 2, name: 'Calendar : app' },
-        { id: 3, name: 'Chrome : app' },
-        { id: 4, name: 'Webstorm : app' },
+        { id: 2, title: 'Calendar : app' },
+        { id: 3, title: 'Chrome : app' },
+        { id: 4, title: 'Webstorm : app' },
       ],
     },
     {
       id: 5,
-      name: 'Documents :',
+      title: 'Documents :',
       children: [
         {
           id: 6,
-          name: 'vuetify :',
+          title: 'vuetify :',
           children: [
             {
               id: 7,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 8, name: 'index : ts' },
-                { id: 9, name: 'bootstrap : ts' },
+                { id: 8, title: 'index : ts' },
+                { id: 9, title: 'bootstrap : ts' },
               ],
             },
           ],
         },
         {
           id: 10,
-          name: 'material2 :',
+          title: 'material2 :',
           children: [
             {
               id: 11,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 12, name: 'v-btn : ts' },
-                { id: 13, name: 'v-card : ts' },
-                { id: 14, name: 'v-window : ts' },
+                { id: 12, title: 'v-btn : ts' },
+                { id: 13, title: 'v-card : ts' },
+                { id: 14, title: 'v-window : ts' },
               ],
             },
           ],
@@ -55,28 +55,28 @@
     },
     {
       id: 15,
-      name: 'Downloads :',
+      title: 'Downloads :',
       children: [
-        { id: 16, name: 'October : pdf' },
-        { id: 17, name: 'November : pdf' },
-        { id: 18, name: 'Tutorial : html' },
+        { id: 16, title: 'October : pdf' },
+        { id: 17, title: 'November : pdf' },
+        { id: 18, title: 'Tutorial : html' },
       ],
     },
     {
       id: 19,
-      name: 'Videos :',
+      title: 'Videos :',
       children: [
         {
           id: 20,
-          name: 'Tutorials :',
+          title: 'Tutorials :',
           children: [
-            { id: 21, name: 'Basic layouts : mp4' },
-            { id: 22, name: 'Advanced techniques : mp4' },
-            { id: 23, name: 'All about app : dir' },
+            { id: 21, title: 'Basic layouts : mp4' },
+            { id: 22, title: 'Advanced techniques : mp4' },
+            { id: 23, title: 'All about app : dir' },
           ],
         },
-        { id: 24, name: 'Intro : mov' },
-        { id: 25, name: 'Conference introduction : avi' },
+        { id: 24, title: 'Intro : mov' },
+        { id: 25, title: 'Conference introduction : avi' },
       ],
     },
   ])
@@ -88,42 +88,42 @@
       items: [
         {
           id: 1,
-          name: 'Applications :',
+          title: 'Applications :',
           children: [
-            { id: 2, name: 'Calendar : app' },
-            { id: 3, name: 'Chrome : app' },
-            { id: 4, name: 'Webstorm : app' },
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' },
           ],
         },
         {
           id: 5,
-          name: 'Documents :',
+          title: 'Documents :',
           children: [
             {
               id: 6,
-              name: 'vuetify :',
+              title: 'vuetify :',
               children: [
                 {
                   id: 7,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 8, name: 'index : ts' },
-                    { id: 9, name: 'bootstrap : ts' },
+                    { id: 8, title: 'index : ts' },
+                    { id: 9, title: 'bootstrap : ts' },
                   ],
                 },
               ],
             },
             {
               id: 10,
-              name: 'material2 :',
+              title: 'material2 :',
               children: [
                 {
                   id: 11,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 12, name: 'v-btn : ts' },
-                    { id: 13, name: 'v-card : ts' },
-                    { id: 14, name: 'v-window : ts' },
+                    { id: 12, title: 'v-btn : ts' },
+                    { id: 13, title: 'v-card : ts' },
+                    { id: 14, title: 'v-window : ts' },
                   ],
                 },
               ],
@@ -132,28 +132,28 @@
         },
         {
           id: 15,
-          name: 'Downloads :',
+          title: 'Downloads :',
           children: [
-            { id: 16, name: 'October : pdf' },
-            { id: 17, name: 'November : pdf' },
-            { id: 18, name: 'Tutorial : html' },
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' },
           ],
         },
         {
           id: 19,
-          name: 'Videos :',
+          title: 'Videos :',
           children: [
             {
               id: 20,
-              name: 'Tutorials :',
+              title: 'Tutorials :',
               children: [
-                { id: 21, name: 'Basic layouts : mp4' },
-                { id: 22, name: 'Advanced techniques : mp4' },
-                { id: 23, name: 'All about app : dir' },
+                { id: 21, title: 'Basic layouts : mp4' },
+                { id: 22, title: 'Advanced techniques : mp4' },
+                { id: 23, title: 'All about app : dir' },
               ],
             },
-            { id: 24, name: 'Intro : mov' },
-            { id: 25, name: 'Conference introduction : avi' },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' },
           ],
         },
       ],
diff --git a/packages/docs/src/examples/v-treeview/prop-color.vue b/packages/docs/src/examples/v-treeview/prop-color.vue
index eac3546d7f8..a3b81739f99 100644
--- a/packages/docs/src/examples/v-treeview/prop-color.vue
+++ b/packages/docs/src/examples/v-treeview/prop-color.vue
@@ -12,42 +12,42 @@
   const items = ref([
     {
       id: 1,
-      name: 'Applications :',
+      title: 'Applications :',
       children: [
-        { id: 2, name: 'Calendar : app' },
-        { id: 3, name: 'Chrome : app' },
-        { id: 4, name: 'Webstorm : app' },
+        { id: 2, title: 'Calendar : app' },
+        { id: 3, title: 'Chrome : app' },
+        { id: 4, title: 'Webstorm : app' },
       ],
     },
     {
       id: 5,
-      name: 'Documents :',
+      title: 'Documents :',
       children: [
         {
           id: 6,
-          name: 'vuetify :',
+          title: 'vuetify :',
           children: [
             {
               id: 7,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 8, name: 'index : ts' },
-                { id: 9, name: 'bootstrap : ts' },
+                { id: 8, title: 'index : ts' },
+                { id: 9, title: 'bootstrap : ts' },
               ],
             },
           ],
         },
         {
           id: 10,
-          name: 'material2 :',
+          title: 'material2 :',
           children: [
             {
               id: 11,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 12, name: 'v-btn : ts' },
-                { id: 13, name: 'v-card : ts' },
-                { id: 14, name: 'v-window : ts' },
+                { id: 12, title: 'v-btn : ts' },
+                { id: 13, title: 'v-card : ts' },
+                { id: 14, title: 'v-window : ts' },
               ],
             },
           ],
@@ -56,28 +56,28 @@
     },
     {
       id: 15,
-      name: 'Downloads :',
+      title: 'Downloads :',
       children: [
-        { id: 16, name: 'October : pdf' },
-        { id: 17, name: 'November : pdf' },
-        { id: 18, name: 'Tutorial : html' },
+        { id: 16, title: 'October : pdf' },
+        { id: 17, title: 'November : pdf' },
+        { id: 18, title: 'Tutorial : html' },
       ],
     },
     {
       id: 19,
-      name: 'Videos :',
+      title: 'Videos :',
       children: [
         {
           id: 20,
-          name: 'Tutorials :',
+          title: 'Tutorials :',
           children: [
-            { id: 21, name: 'Basic layouts : mp4' },
-            { id: 22, name: 'Advanced techniques : mp4' },
-            { id: 23, name: 'All about app : dir' },
+            { id: 21, title: 'Basic layouts : mp4' },
+            { id: 22, title: 'Advanced techniques : mp4' },
+            { id: 23, title: 'All about app : dir' },
           ],
         },
-        { id: 24, name: 'Intro : mov' },
-        { id: 25, name: 'Conference introduction : avi' },
+        { id: 24, title: 'Intro : mov' },
+        { id: 25, title: 'Conference introduction : avi' },
       ],
     },
   ])
@@ -89,42 +89,42 @@
       items: [
         {
           id: 1,
-          name: 'Applications :',
+          title: 'Applications :',
           children: [
-            { id: 2, name: 'Calendar : app' },
-            { id: 3, name: 'Chrome : app' },
-            { id: 4, name: 'Webstorm : app' },
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' },
           ],
         },
         {
           id: 5,
-          name: 'Documents :',
+          title: 'Documents :',
           children: [
             {
               id: 6,
-              name: 'vuetify :',
+              title: 'vuetify :',
               children: [
                 {
                   id: 7,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 8, name: 'index : ts' },
-                    { id: 9, name: 'bootstrap : ts' },
+                    { id: 8, title: 'index : ts' },
+                    { id: 9, title: 'bootstrap : ts' },
                   ],
                 },
               ],
             },
             {
               id: 10,
-              name: 'material2 :',
+              title: 'material2 :',
               children: [
                 {
                   id: 11,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 12, name: 'v-btn : ts' },
-                    { id: 13, name: 'v-card : ts' },
-                    { id: 14, name: 'v-window : ts' },
+                    { id: 12, title: 'v-btn : ts' },
+                    { id: 13, title: 'v-card : ts' },
+                    { id: 14, title: 'v-window : ts' },
                   ],
                 },
               ],
@@ -133,28 +133,28 @@
         },
         {
           id: 15,
-          name: 'Downloads :',
+          title: 'Downloads :',
           children: [
-            { id: 16, name: 'October : pdf' },
-            { id: 17, name: 'November : pdf' },
-            { id: 18, name: 'Tutorial : html' },
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' },
           ],
         },
         {
           id: 19,
-          name: 'Videos :',
+          title: 'Videos :',
           children: [
             {
               id: 20,
-              name: 'Tutorials :',
+              title: 'Tutorials :',
               children: [
-                { id: 21, name: 'Basic layouts : mp4' },
-                { id: 22, name: 'Advanced techniques : mp4' },
-                { id: 23, name: 'All about app : dir' },
+                { id: 21, title: 'Basic layouts : mp4' },
+                { id: 22, title: 'Advanced techniques : mp4' },
+                { id: 23, title: 'All about app : dir' },
               ],
             },
-            { id: 24, name: 'Intro : mov' },
-            { id: 25, name: 'Conference introduction : avi' },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' },
           ],
         },
       ],
diff --git a/packages/docs/src/examples/v-treeview/prop-dense.vue b/packages/docs/src/examples/v-treeview/prop-dense.vue
index 1521d4ab7a1..eaeb25ffdd8 100644
--- a/packages/docs/src/examples/v-treeview/prop-dense.vue
+++ b/packages/docs/src/examples/v-treeview/prop-dense.vue
@@ -1,7 +1,7 @@
 <template>
   <v-treeview
     :items="items"
-    dense
+    density="compact"
   ></v-treeview>
 </template>
 
@@ -11,42 +11,42 @@
   const items = ref([
     {
       id: 1,
-      name: 'Applications :',
+      title: 'Applications :',
       children: [
-        { id: 2, name: 'Calendar : app' },
-        { id: 3, name: 'Chrome : app' },
-        { id: 4, name: 'Webstorm : app' },
+        { id: 2, title: 'Calendar : app' },
+        { id: 3, title: 'Chrome : app' },
+        { id: 4, title: 'Webstorm : app' },
       ],
     },
     {
       id: 5,
-      name: 'Documents :',
+      title: 'Documents :',
       children: [
         {
           id: 6,
-          name: 'vuetify :',
+          title: 'vuetify :',
           children: [
             {
               id: 7,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 8, name: 'index : ts' },
-                { id: 9, name: 'bootstrap : ts' },
+                { id: 8, title: 'index : ts' },
+                { id: 9, title: 'bootstrap : ts' },
               ],
             },
           ],
         },
         {
           id: 10,
-          name: 'material2 :',
+          title: 'material2 :',
           children: [
             {
               id: 11,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 12, name: 'v-btn : ts' },
-                { id: 13, name: 'v-card : ts' },
-                { id: 14, name: 'v-window : ts' },
+                { id: 12, title: 'v-btn : ts' },
+                { id: 13, title: 'v-card : ts' },
+                { id: 14, title: 'v-window : ts' },
               ],
             },
           ],
@@ -55,28 +55,28 @@
     },
     {
       id: 15,
-      name: 'Downloads :',
+      title: 'Downloads :',
       children: [
-        { id: 16, name: 'October : pdf' },
-        { id: 17, name: 'November : pdf' },
-        { id: 18, name: 'Tutorial : html' },
+        { id: 16, title: 'October : pdf' },
+        { id: 17, title: 'November : pdf' },
+        { id: 18, title: 'Tutorial : html' },
       ],
     },
     {
       id: 19,
-      name: 'Videos :',
+      title: 'Videos :',
       children: [
         {
           id: 20,
-          name: 'Tutorials :',
+          title: 'Tutorials :',
           children: [
-            { id: 21, name: 'Basic layouts : mp4' },
-            { id: 22, name: 'Advanced techniques : mp4' },
-            { id: 23, name: 'All about app : dir' },
+            { id: 21, title: 'Basic layouts : mp4' },
+            { id: 22, title: 'Advanced techniques : mp4' },
+            { id: 23, title: 'All about app : dir' },
           ],
         },
-        { id: 24, name: 'Intro : mov' },
-        { id: 25, name: 'Conference introduction : avi' },
+        { id: 24, title: 'Intro : mov' },
+        { id: 25, title: 'Conference introduction : avi' },
       ],
     },
   ])
@@ -88,42 +88,42 @@
       items: [
         {
           id: 1,
-          name: 'Applications :',
+          title: 'Applications :',
           children: [
-            { id: 2, name: 'Calendar : app' },
-            { id: 3, name: 'Chrome : app' },
-            { id: 4, name: 'Webstorm : app' },
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' },
           ],
         },
         {
           id: 5,
-          name: 'Documents :',
+          title: 'Documents :',
           children: [
             {
               id: 6,
-              name: 'vuetify :',
+              title: 'vuetify :',
               children: [
                 {
                   id: 7,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 8, name: 'index : ts' },
-                    { id: 9, name: 'bootstrap : ts' },
+                    { id: 8, title: 'index : ts' },
+                    { id: 9, title: 'bootstrap : ts' },
                   ],
                 },
               ],
             },
             {
               id: 10,
-              name: 'material2 :',
+              title: 'material2 :',
               children: [
                 {
                   id: 11,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 12, name: 'v-btn : ts' },
-                    { id: 13, name: 'v-card : ts' },
-                    { id: 14, name: 'v-window : ts' },
+                    { id: 12, title: 'v-btn : ts' },
+                    { id: 13, title: 'v-card : ts' },
+                    { id: 14, title: 'v-window : ts' },
                   ],
                 },
               ],
@@ -132,28 +132,28 @@
         },
         {
           id: 15,
-          name: 'Downloads :',
+          title: 'Downloads :',
           children: [
-            { id: 16, name: 'October : pdf' },
-            { id: 17, name: 'November : pdf' },
-            { id: 18, name: 'Tutorial : html' },
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' },
           ],
         },
         {
           id: 19,
-          name: 'Videos :',
+          title: 'Videos :',
           children: [
             {
               id: 20,
-              name: 'Tutorials :',
+              title: 'Tutorials :',
               children: [
-                { id: 21, name: 'Basic layouts : mp4' },
-                { id: 22, name: 'Advanced techniques : mp4' },
-                { id: 23, name: 'All about app : dir' },
+                { id: 21, title: 'Basic layouts : mp4' },
+                { id: 22, title: 'Advanced techniques : mp4' },
+                { id: 23, title: 'All about app : dir' },
               ],
             },
-            { id: 24, name: 'Intro : mov' },
-            { id: 25, name: 'Conference introduction : avi' },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' },
           ],
         },
       ],
diff --git a/packages/docs/src/examples/v-treeview/prop-item-disabled.vue b/packages/docs/src/examples/v-treeview/prop-item-disabled.vue
index 3fd8d1078e0..8d1815c0528 100644
--- a/packages/docs/src/examples/v-treeview/prop-item-disabled.vue
+++ b/packages/docs/src/examples/v-treeview/prop-item-disabled.vue
@@ -12,44 +12,44 @@
   const items = ref([
     {
       id: 1,
-      name: 'Applications :',
+      title: 'Applications :',
       locked: true,
       children: [
-        { id: 2, name: 'Calendar : app' },
-        { id: 3, name: 'Chrome : app' },
-        { id: 4, name: 'Webstorm : app' },
+        { id: 2, title: 'Calendar : app' },
+        { id: 3, title: 'Chrome : app' },
+        { id: 4, title: 'Webstorm : app' },
       ],
     },
     {
       id: 5,
-      name: 'Documents :',
+      title: 'Documents :',
       children: [
         {
           id: 6,
-          name: 'vuetify :',
+          title: 'vuetify :',
           children: [
             {
               id: 7,
-              name: 'src :',
+              title: 'src :',
               locked: true,
               children: [
-                { id: 8, name: 'index : ts' },
-                { id: 9, name: 'bootstrap : ts' },
+                { id: 8, title: 'index : ts' },
+                { id: 9, title: 'bootstrap : ts' },
               ],
             },
           ],
         },
         {
           id: 10,
-          name: 'material2 :',
+          title: 'material2 :',
           children: [
             {
               id: 11,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 12, name: 'v-btn : ts' },
-                { id: 13, name: 'v-card : ts' },
-                { id: 14, name: 'v-window : ts' },
+                { id: 12, title: 'v-btn : ts' },
+                { id: 13, title: 'v-card : ts' },
+                { id: 14, title: 'v-window : ts' },
               ],
             },
           ],
@@ -58,28 +58,28 @@
     },
     {
       id: 15,
-      name: 'Downloads :',
+      title: 'Downloads :',
       children: [
-        { id: 16, name: 'October : pdf', locked: true },
-        { id: 17, name: 'November : pdf', locked: true },
-        { id: 18, name: 'Tutorial : html', locked: true },
+        { id: 16, title: 'October : pdf', locked: true },
+        { id: 17, title: 'November : pdf', locked: true },
+        { id: 18, title: 'Tutorial : html', locked: true },
       ],
     },
     {
       id: 19,
-      name: 'Videos :',
+      title: 'Videos :',
       children: [
         {
           id: 20,
-          name: 'Tutorials :',
+          title: 'Tutorials :',
           children: [
-            { id: 21, name: 'Basic layouts : mp4' },
-            { id: 22, name: 'Advanced techniques : mp4' },
-            { id: 23, name: 'All about app : dir' },
+            { id: 21, title: 'Basic layouts : mp4' },
+            { id: 22, title: 'Advanced techniques : mp4' },
+            { id: 23, title: 'All about app : dir' },
           ],
         },
-        { id: 24, name: 'Intro : mov' },
-        { id: 25, name: 'Conference introduction : avi' },
+        { id: 24, title: 'Intro : mov' },
+        { id: 25, title: 'Conference introduction : avi' },
       ],
     },
   ])
@@ -91,44 +91,44 @@
       items: [
         {
           id: 1,
-          name: 'Applications :',
+          title: 'Applications :',
           locked: true,
           children: [
-            { id: 2, name: 'Calendar : app' },
-            { id: 3, name: 'Chrome : app' },
-            { id: 4, name: 'Webstorm : app' },
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' },
           ],
         },
         {
           id: 5,
-          name: 'Documents :',
+          title: 'Documents :',
           children: [
             {
               id: 6,
-              name: 'vuetify :',
+              title: 'vuetify :',
               children: [
                 {
                   id: 7,
-                  name: 'src :',
+                  title: 'src :',
                   locked: true,
                   children: [
-                    { id: 8, name: 'index : ts' },
-                    { id: 9, name: 'bootstrap : ts' },
+                    { id: 8, title: 'index : ts' },
+                    { id: 9, title: 'bootstrap : ts' },
                   ],
                 },
               ],
             },
             {
               id: 10,
-              name: 'material2 :',
+              title: 'material2 :',
               children: [
                 {
                   id: 11,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 12, name: 'v-btn : ts' },
-                    { id: 13, name: 'v-card : ts' },
-                    { id: 14, name: 'v-window : ts' },
+                    { id: 12, title: 'v-btn : ts' },
+                    { id: 13, title: 'v-card : ts' },
+                    { id: 14, title: 'v-window : ts' },
                   ],
                 },
               ],
@@ -137,28 +137,28 @@
         },
         {
           id: 15,
-          name: 'Downloads :',
+          title: 'Downloads :',
           children: [
-            { id: 16, name: 'October : pdf', locked: true },
-            { id: 17, name: 'November : pdf', locked: true },
-            { id: 18, name: 'Tutorial : html', locked: true },
+            { id: 16, title: 'October : pdf', locked: true },
+            { id: 17, title: 'November : pdf', locked: true },
+            { id: 18, title: 'Tutorial : html', locked: true },
           ],
         },
         {
           id: 19,
-          name: 'Videos :',
+          title: 'Videos :',
           children: [
             {
               id: 20,
-              name: 'Tutorials :',
+              title: 'Tutorials :',
               children: [
-                { id: 21, name: 'Basic layouts : mp4' },
-                { id: 22, name: 'Advanced techniques : mp4' },
-                { id: 23, name: 'All about app : dir' },
+                { id: 21, title: 'Basic layouts : mp4' },
+                { id: 22, title: 'Advanced techniques : mp4' },
+                { id: 23, title: 'All about app : dir' },
               ],
             },
-            { id: 24, name: 'Intro : mov' },
-            { id: 25, name: 'Conference introduction : avi' },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' },
           ],
         },
       ],
diff --git a/packages/docs/src/examples/v-treeview/prop-load-children.vue b/packages/docs/src/examples/v-treeview/prop-load-children.vue
index 3314e403d4d..0b9fb179467 100644
--- a/packages/docs/src/examples/v-treeview/prop-load-children.vue
+++ b/packages/docs/src/examples/v-treeview/prop-load-children.vue
@@ -3,17 +3,21 @@
     <v-card-title class="bg-indigo text-white text-h5">
       User Directory
     </v-card-title>
+
     <v-row
       class="pa-4"
       justify="space-between"
     >
       <v-col cols="5">
         <v-treeview
-          v-model:active="active"
-          v-model:open="open"
+          v-model:activated="active"
+          v-model:opened="open"
           :items="items"
           :load-children="fetchUsers"
           color="warning"
+          density="compact"
+          item-title="name"
+          item-value="id"
           activatable
           open-on-click
           transition
@@ -134,6 +138,7 @@
     ]
   })
   const selected = computed(() => {
+    console.log(active.value)
     if (!active.value.length) return undefined
     const id = active.value[0]
     return users.value.find(user => user.id === id)
diff --git a/packages/docs/src/examples/v-treeview/prop-open-all.vue b/packages/docs/src/examples/v-treeview/prop-open-all.vue
index 597f4437f92..9bd84547b95 100644
--- a/packages/docs/src/examples/v-treeview/prop-open-all.vue
+++ b/packages/docs/src/examples/v-treeview/prop-open-all.vue
@@ -1,6 +1,7 @@
 <template>
   <v-treeview
     :items="items"
+    item-value="id"
     open-all
   ></v-treeview>
 </template>
@@ -11,42 +12,42 @@
   const items = ref([
     {
       id: 1,
-      name: 'Applications :',
+      title: 'Applications :',
       children: [
-        { id: 2, name: 'Calendar : app' },
-        { id: 3, name: 'Chrome : app' },
-        { id: 4, name: 'Webstorm : app' },
+        { id: 2, title: 'Calendar : app' },
+        { id: 3, title: 'Chrome : app' },
+        { id: 4, title: 'Webstorm : app' },
       ],
     },
     {
       id: 5,
-      name: 'Documents :',
+      title: 'Documents :',
       children: [
         {
           id: 6,
-          name: 'vuetify :',
+          title: 'vuetify :',
           children: [
             {
               id: 7,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 8, name: 'index : ts' },
-                { id: 9, name: 'bootstrap : ts' },
+                { id: 8, title: 'index : ts' },
+                { id: 9, title: 'bootstrap : ts' },
               ],
             },
           ],
         },
         {
           id: 10,
-          name: 'material2 :',
+          title: 'material2 :',
           children: [
             {
               id: 11,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 12, name: 'v-btn : ts' },
-                { id: 13, name: 'v-card : ts' },
-                { id: 14, name: 'v-window : ts' },
+                { id: 12, title: 'v-btn : ts' },
+                { id: 13, title: 'v-card : ts' },
+                { id: 14, title: 'v-window : ts' },
               ],
             },
           ],
@@ -55,28 +56,28 @@
     },
     {
       id: 15,
-      name: 'Downloads :',
+      title: 'Downloads :',
       children: [
-        { id: 16, name: 'October : pdf' },
-        { id: 17, name: 'November : pdf' },
-        { id: 18, name: 'Tutorial : html' },
+        { id: 16, title: 'October : pdf' },
+        { id: 17, title: 'November : pdf' },
+        { id: 18, title: 'Tutorial : html' },
       ],
     },
     {
       id: 19,
-      name: 'Videos :',
+      title: 'Videos :',
       children: [
         {
           id: 20,
-          name: 'Tutorials :',
+          title: 'Tutorials :',
           children: [
-            { id: 21, name: 'Basic layouts : mp4' },
-            { id: 22, name: 'Advanced techniques : mp4' },
-            { id: 23, name: 'All about app : dir' },
+            { id: 21, title: 'Basic layouts : mp4' },
+            { id: 22, title: 'Advanced techniques : mp4' },
+            { id: 23, title: 'All about app : dir' },
           ],
         },
-        { id: 24, name: 'Intro : mov' },
-        { id: 25, name: 'Conference introduction : avi' },
+        { id: 24, title: 'Intro : mov' },
+        { id: 25, title: 'Conference introduction : avi' },
       ],
     },
   ])
@@ -88,42 +89,42 @@
       items: [
         {
           id: 1,
-          name: 'Applications :',
+          title: 'Applications :',
           children: [
-            { id: 2, name: 'Calendar : app' },
-            { id: 3, name: 'Chrome : app' },
-            { id: 4, name: 'Webstorm : app' },
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' },
           ],
         },
         {
           id: 5,
-          name: 'Documents :',
+          title: 'Documents :',
           children: [
             {
               id: 6,
-              name: 'vuetify :',
+              title: 'vuetify :',
               children: [
                 {
                   id: 7,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 8, name: 'index : ts' },
-                    { id: 9, name: 'bootstrap : ts' },
+                    { id: 8, title: 'index : ts' },
+                    { id: 9, title: 'bootstrap : ts' },
                   ],
                 },
               ],
             },
             {
               id: 10,
-              name: 'material2 :',
+              title: 'material2 :',
               children: [
                 {
                   id: 11,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 12, name: 'v-btn : ts' },
-                    { id: 13, name: 'v-card : ts' },
-                    { id: 14, name: 'v-window : ts' },
+                    { id: 12, title: 'v-btn : ts' },
+                    { id: 13, title: 'v-card : ts' },
+                    { id: 14, title: 'v-window : ts' },
                   ],
                 },
               ],
@@ -132,28 +133,28 @@
         },
         {
           id: 15,
-          name: 'Downloads :',
+          title: 'Downloads :',
           children: [
-            { id: 16, name: 'October : pdf' },
-            { id: 17, name: 'November : pdf' },
-            { id: 18, name: 'Tutorial : html' },
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' },
           ],
         },
         {
           id: 19,
-          name: 'Videos :',
+          title: 'Videos :',
           children: [
             {
               id: 20,
-              name: 'Tutorials :',
+              title: 'Tutorials :',
               children: [
-                { id: 21, name: 'Basic layouts : mp4' },
-                { id: 22, name: 'Advanced techniques : mp4' },
-                { id: 23, name: 'All about app : dir' },
+                { id: 21, title: 'Basic layouts : mp4' },
+                { id: 22, title: 'Advanced techniques : mp4' },
+                { id: 23, title: 'All about app : dir' },
               ],
             },
-            { id: 24, name: 'Intro : mov' },
-            { id: 25, name: 'Conference introduction : avi' },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' },
           ],
         },
       ],
diff --git a/packages/docs/src/examples/v-treeview/prop-rounded.vue b/packages/docs/src/examples/v-treeview/prop-rounded.vue
index 1220c632d44..57923474bfb 100644
--- a/packages/docs/src/examples/v-treeview/prop-rounded.vue
+++ b/packages/docs/src/examples/v-treeview/prop-rounded.vue
@@ -2,7 +2,6 @@
   <v-treeview
     :items="items"
     activatable
-    hoverable
     rounded
   ></v-treeview>
 </template>
@@ -13,42 +12,42 @@
   const items = ref([
     {
       id: 1,
-      name: 'Applications :',
+      title: 'Applications :',
       children: [
-        { id: 2, name: 'Calendar : app' },
-        { id: 3, name: 'Chrome : app' },
-        { id: 4, name: 'Webstorm : app' },
+        { id: 2, title: 'Calendar : app' },
+        { id: 3, title: 'Chrome : app' },
+        { id: 4, title: 'Webstorm : app' },
       ],
     },
     {
       id: 5,
-      name: 'Documents :',
+      title: 'Documents :',
       children: [
         {
           id: 6,
-          name: 'vuetify :',
+          title: 'vuetify :',
           children: [
             {
               id: 7,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 8, name: 'index : ts' },
-                { id: 9, name: 'bootstrap : ts' },
+                { id: 8, title: 'index : ts' },
+                { id: 9, title: 'bootstrap : ts' },
               ],
             },
           ],
         },
         {
           id: 10,
-          name: 'material2 :',
+          title: 'material2 :',
           children: [
             {
               id: 11,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 12, name: 'v-btn : ts' },
-                { id: 13, name: 'v-card : ts' },
-                { id: 14, name: 'v-window : ts' },
+                { id: 12, title: 'v-btn : ts' },
+                { id: 13, title: 'v-card : ts' },
+                { id: 14, title: 'v-window : ts' },
               ],
             },
           ],
@@ -57,28 +56,28 @@
     },
     {
       id: 15,
-      name: 'Downloads :',
+      title: 'Downloads :',
       children: [
-        { id: 16, name: 'October : pdf' },
-        { id: 17, name: 'November : pdf' },
-        { id: 18, name: 'Tutorial : html' },
+        { id: 16, title: 'October : pdf' },
+        { id: 17, title: 'November : pdf' },
+        { id: 18, title: 'Tutorial : html' },
       ],
     },
     {
       id: 19,
-      name: 'Videos :',
+      title: 'Videos :',
       children: [
         {
           id: 20,
-          name: 'Tutorials :',
+          title: 'Tutorials :',
           children: [
-            { id: 21, name: 'Basic layouts : mp4' },
-            { id: 22, name: 'Advanced techniques : mp4' },
-            { id: 23, name: 'All about app : dir' },
+            { id: 21, title: 'Basic layouts : mp4' },
+            { id: 22, title: 'Advanced techniques : mp4' },
+            { id: 23, title: 'All about app : dir' },
           ],
         },
-        { id: 24, name: 'Intro : mov' },
-        { id: 25, name: 'Conference introduction : avi' },
+        { id: 24, title: 'Intro : mov' },
+        { id: 25, title: 'Conference introduction : avi' },
       ],
     },
   ])
@@ -90,42 +89,42 @@
       items: [
         {
           id: 1,
-          name: 'Applications :',
+          title: 'Applications :',
           children: [
-            { id: 2, name: 'Calendar : app' },
-            { id: 3, name: 'Chrome : app' },
-            { id: 4, name: 'Webstorm : app' },
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' },
           ],
         },
         {
           id: 5,
-          name: 'Documents :',
+          title: 'Documents :',
           children: [
             {
               id: 6,
-              name: 'vuetify :',
+              title: 'vuetify :',
               children: [
                 {
                   id: 7,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 8, name: 'index : ts' },
-                    { id: 9, name: 'bootstrap : ts' },
+                    { id: 8, title: 'index : ts' },
+                    { id: 9, title: 'bootstrap : ts' },
                   ],
                 },
               ],
             },
             {
               id: 10,
-              name: 'material2 :',
+              title: 'material2 :',
               children: [
                 {
                   id: 11,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 12, name: 'v-btn : ts' },
-                    { id: 13, name: 'v-card : ts' },
-                    { id: 14, name: 'v-window : ts' },
+                    { id: 12, title: 'v-btn : ts' },
+                    { id: 13, title: 'v-card : ts' },
+                    { id: 14, title: 'v-window : ts' },
                   ],
                 },
               ],
@@ -134,28 +133,28 @@
         },
         {
           id: 15,
-          name: 'Downloads :',
+          title: 'Downloads :',
           children: [
-            { id: 16, name: 'October : pdf' },
-            { id: 17, name: 'November : pdf' },
-            { id: 18, name: 'Tutorial : html' },
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' },
           ],
         },
         {
           id: 19,
-          name: 'Videos :',
+          title: 'Videos :',
           children: [
             {
               id: 20,
-              name: 'Tutorials :',
+              title: 'Tutorials :',
               children: [
-                { id: 21, name: 'Basic layouts : mp4' },
-                { id: 22, name: 'Advanced techniques : mp4' },
-                { id: 23, name: 'All about app : dir' },
+                { id: 21, title: 'Basic layouts : mp4' },
+                { id: 22, title: 'Advanced techniques : mp4' },
+                { id: 23, title: 'All about app : dir' },
               ],
             },
-            { id: 24, name: 'Intro : mov' },
-            { id: 25, name: 'Conference introduction : avi' },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' },
           ],
         },
       ],
diff --git a/packages/docs/src/examples/v-treeview/prop-selectable.vue b/packages/docs/src/examples/v-treeview/prop-selectable.vue
index e557a84b0de..2bbb66ac5fa 100644
--- a/packages/docs/src/examples/v-treeview/prop-selectable.vue
+++ b/packages/docs/src/examples/v-treeview/prop-selectable.vue
@@ -11,42 +11,42 @@
   const items = ref([
     {
       id: 1,
-      name: 'Applications :',
+      title: 'Applications :',
       children: [
-        { id: 2, name: 'Calendar : app' },
-        { id: 3, name: 'Chrome : app' },
-        { id: 4, name: 'Webstorm : app' },
+        { id: 2, title: 'Calendar : app' },
+        { id: 3, title: 'Chrome : app' },
+        { id: 4, title: 'Webstorm : app' },
       ],
     },
     {
       id: 5,
-      name: 'Documents :',
+      title: 'Documents :',
       children: [
         {
           id: 6,
-          name: 'vuetify :',
+          title: 'vuetify :',
           children: [
             {
               id: 7,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 8, name: 'index : ts' },
-                { id: 9, name: 'bootstrap : ts' },
+                { id: 8, title: 'index : ts' },
+                { id: 9, title: 'bootstrap : ts' },
               ],
             },
           ],
         },
         {
           id: 10,
-          name: 'material2 :',
+          title: 'material2 :',
           children: [
             {
               id: 11,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 12, name: 'v-btn : ts' },
-                { id: 13, name: 'v-card : ts' },
-                { id: 14, name: 'v-window : ts' },
+                { id: 12, title: 'v-btn : ts' },
+                { id: 13, title: 'v-card : ts' },
+                { id: 14, title: 'v-window : ts' },
               ],
             },
           ],
@@ -55,28 +55,28 @@
     },
     {
       id: 15,
-      name: 'Downloads :',
+      title: 'Downloads :',
       children: [
-        { id: 16, name: 'October : pdf' },
-        { id: 17, name: 'November : pdf' },
-        { id: 18, name: 'Tutorial : html' },
+        { id: 16, title: 'October : pdf' },
+        { id: 17, title: 'November : pdf' },
+        { id: 18, title: 'Tutorial : html' },
       ],
     },
     {
       id: 19,
-      name: 'Videos :',
+      title: 'Videos :',
       children: [
         {
           id: 20,
-          name: 'Tutorials :',
+          title: 'Tutorials :',
           children: [
-            { id: 21, name: 'Basic layouts : mp4' },
-            { id: 22, name: 'Advanced techniques : mp4' },
-            { id: 23, name: 'All about app : dir' },
+            { id: 21, title: 'Basic layouts : mp4' },
+            { id: 22, title: 'Advanced techniques : mp4' },
+            { id: 23, title: 'All about app : dir' },
           ],
         },
-        { id: 24, name: 'Intro : mov' },
-        { id: 25, name: 'Conference introduction : avi' },
+        { id: 24, title: 'Intro : mov' },
+        { id: 25, title: 'Conference introduction : avi' },
       ],
     },
   ])
@@ -88,42 +88,42 @@
       items: [
         {
           id: 1,
-          name: 'Applications :',
+          title: 'Applications :',
           children: [
-            { id: 2, name: 'Calendar : app' },
-            { id: 3, name: 'Chrome : app' },
-            { id: 4, name: 'Webstorm : app' },
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' },
           ],
         },
         {
           id: 5,
-          name: 'Documents :',
+          title: 'Documents :',
           children: [
             {
               id: 6,
-              name: 'vuetify :',
+              title: 'vuetify :',
               children: [
                 {
                   id: 7,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 8, name: 'index : ts' },
-                    { id: 9, name: 'bootstrap : ts' },
+                    { id: 8, title: 'index : ts' },
+                    { id: 9, title: 'bootstrap : ts' },
                   ],
                 },
               ],
             },
             {
               id: 10,
-              name: 'material2 :',
+              title: 'material2 :',
               children: [
                 {
                   id: 11,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 12, name: 'v-btn : ts' },
-                    { id: 13, name: 'v-card : ts' },
-                    { id: 14, name: 'v-window : ts' },
+                    { id: 12, title: 'v-btn : ts' },
+                    { id: 13, title: 'v-card : ts' },
+                    { id: 14, title: 'v-window : ts' },
                   ],
                 },
               ],
@@ -132,28 +132,28 @@
         },
         {
           id: 15,
-          name: 'Downloads :',
+          title: 'Downloads :',
           children: [
-            { id: 16, name: 'October : pdf' },
-            { id: 17, name: 'November : pdf' },
-            { id: 18, name: 'Tutorial : html' },
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' },
           ],
         },
         {
           id: 19,
-          name: 'Videos :',
+          title: 'Videos :',
           children: [
             {
               id: 20,
-              name: 'Tutorials :',
+              title: 'Tutorials :',
               children: [
-                { id: 21, name: 'Basic layouts : mp4' },
-                { id: 22, name: 'Advanced techniques : mp4' },
-                { id: 23, name: 'All about app : dir' },
+                { id: 21, title: 'Basic layouts : mp4' },
+                { id: 22, title: 'Advanced techniques : mp4' },
+                { id: 23, title: 'All about app : dir' },
               ],
             },
-            { id: 24, name: 'Intro : mov' },
-            { id: 25, name: 'Conference introduction : avi' },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' },
           ],
         },
       ],
diff --git a/packages/docs/src/examples/v-treeview/prop-selected-color.vue b/packages/docs/src/examples/v-treeview/prop-selected-color.vue
index 6a829d3d0fe..8e14dbf615b 100644
--- a/packages/docs/src/examples/v-treeview/prop-selected-color.vue
+++ b/packages/docs/src/examples/v-treeview/prop-selected-color.vue
@@ -12,42 +12,42 @@
   const items = ref([
     {
       id: 1,
-      name: 'Applications :',
+      title: 'Applications :',
       children: [
-        { id: 2, name: 'Calendar : app' },
-        { id: 3, name: 'Chrome : app' },
-        { id: 4, name: 'Webstorm : app' },
+        { id: 2, title: 'Calendar : app' },
+        { id: 3, title: 'Chrome : app' },
+        { id: 4, title: 'Webstorm : app' },
       ],
     },
     {
       id: 5,
-      name: 'Documents :',
+      title: 'Documents :',
       children: [
         {
           id: 6,
-          name: 'vuetify :',
+          title: 'vuetify :',
           children: [
             {
               id: 7,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 8, name: 'index : ts' },
-                { id: 9, name: 'bootstrap : ts' },
+                { id: 8, title: 'index : ts' },
+                { id: 9, title: 'bootstrap : ts' },
               ],
             },
           ],
         },
         {
           id: 10,
-          name: 'material2 :',
+          title: 'material2 :',
           children: [
             {
               id: 11,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 12, name: 'v-btn : ts' },
-                { id: 13, name: 'v-card : ts' },
-                { id: 14, name: 'v-window : ts' },
+                { id: 12, title: 'v-btn : ts' },
+                { id: 13, title: 'v-card : ts' },
+                { id: 14, title: 'v-window : ts' },
               ],
             },
           ],
@@ -56,28 +56,28 @@
     },
     {
       id: 15,
-      name: 'Downloads :',
+      title: 'Downloads :',
       children: [
-        { id: 16, name: 'October : pdf' },
-        { id: 17, name: 'November : pdf' },
-        { id: 18, name: 'Tutorial : html' },
+        { id: 16, title: 'October : pdf' },
+        { id: 17, title: 'November : pdf' },
+        { id: 18, title: 'Tutorial : html' },
       ],
     },
     {
       id: 19,
-      name: 'Videos :',
+      title: 'Videos :',
       children: [
         {
           id: 20,
-          name: 'Tutorials :',
+          title: 'Tutorials :',
           children: [
-            { id: 21, name: 'Basic layouts : mp4' },
-            { id: 22, name: 'Advanced techniques : mp4' },
-            { id: 23, name: 'All about app : dir' },
+            { id: 21, title: 'Basic layouts : mp4' },
+            { id: 22, title: 'Advanced techniques : mp4' },
+            { id: 23, title: 'All about app : dir' },
           ],
         },
-        { id: 24, name: 'Intro : mov' },
-        { id: 25, name: 'Conference introduction : avi' },
+        { id: 24, title: 'Intro : mov' },
+        { id: 25, title: 'Conference introduction : avi' },
       ],
     },
   ])
@@ -89,42 +89,42 @@
       items: [
         {
           id: 1,
-          name: 'Applications :',
+          title: 'Applications :',
           children: [
-            { id: 2, name: 'Calendar : app' },
-            { id: 3, name: 'Chrome : app' },
-            { id: 4, name: 'Webstorm : app' },
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' },
           ],
         },
         {
           id: 5,
-          name: 'Documents :',
+          title: 'Documents :',
           children: [
             {
               id: 6,
-              name: 'vuetify :',
+              title: 'vuetify :',
               children: [
                 {
                   id: 7,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 8, name: 'index : ts' },
-                    { id: 9, name: 'bootstrap : ts' },
+                    { id: 8, title: 'index : ts' },
+                    { id: 9, title: 'bootstrap : ts' },
                   ],
                 },
               ],
             },
             {
               id: 10,
-              name: 'material2 :',
+              title: 'material2 :',
               children: [
                 {
                   id: 11,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 12, name: 'v-btn : ts' },
-                    { id: 13, name: 'v-card : ts' },
-                    { id: 14, name: 'v-window : ts' },
+                    { id: 12, title: 'v-btn : ts' },
+                    { id: 13, title: 'v-card : ts' },
+                    { id: 14, title: 'v-window : ts' },
                   ],
                 },
               ],
@@ -133,28 +133,28 @@
         },
         {
           id: 15,
-          name: 'Downloads :',
+          title: 'Downloads :',
           children: [
-            { id: 16, name: 'October : pdf' },
-            { id: 17, name: 'November : pdf' },
-            { id: 18, name: 'Tutorial : html' },
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' },
           ],
         },
         {
           id: 19,
-          name: 'Videos :',
+          title: 'Videos :',
           children: [
             {
               id: 20,
-              name: 'Tutorials :',
+              title: 'Tutorials :',
               children: [
-                { id: 21, name: 'Basic layouts : mp4' },
-                { id: 22, name: 'Advanced techniques : mp4' },
-                { id: 23, name: 'All about app : dir' },
+                { id: 21, title: 'Basic layouts : mp4' },
+                { id: 22, title: 'Advanced techniques : mp4' },
+                { id: 23, title: 'All about app : dir' },
               ],
             },
-            { id: 24, name: 'Intro : mov' },
-            { id: 25, name: 'Conference introduction : avi' },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' },
           ],
         },
       ],
diff --git a/packages/docs/src/examples/v-treeview/prop-selection-type.vue b/packages/docs/src/examples/v-treeview/prop-selection-type.vue
index 3a7679835ba..c4d3f4379ae 100644
--- a/packages/docs/src/examples/v-treeview/prop-selection-type.vue
+++ b/packages/docs/src/examples/v-treeview/prop-selection-type.vue
@@ -45,16 +45,16 @@
   const items = ref([
     {
       id: 1,
-      name: 'Root',
+      title: 'Root',
       children: [
-        { id: 2, name: 'Child #1' },
-        { id: 3, name: 'Child #2' },
+        { id: 2, title: 'Child #1' },
+        { id: 3, title: 'Child #2' },
         {
           id: 4,
-          name: 'Child #3',
+          title: 'Child #3',
           children: [
-            { id: 5, name: 'Grandchild #1' },
-            { id: 6, name: 'Grandchild #2' },
+            { id: 5, title: 'Grandchild #1' },
+            { id: 6, title: 'Grandchild #2' },
           ],
         },
       ],
@@ -70,16 +70,16 @@
       items: [
         {
           id: 1,
-          name: 'Root',
+          title: 'Root',
           children: [
-            { id: 2, name: 'Child #1' },
-            { id: 3, name: 'Child #2' },
+            { id: 2, title: 'Child #1' },
+            { id: 3, title: 'Child #2' },
             {
               id: 4,
-              name: 'Child #3',
+              title: 'Child #3',
               children: [
-                { id: 5, name: 'Grandchild #1' },
-                { id: 6, name: 'Grandchild #2' },
+                { id: 5, title: 'Grandchild #1' },
+                { id: 6, title: 'Grandchild #2' },
               ],
             },
           ],
diff --git a/packages/docs/src/examples/v-treeview/prop-shaped.vue b/packages/docs/src/examples/v-treeview/prop-shaped.vue
index 0950f8b9725..38bff5768cd 100644
--- a/packages/docs/src/examples/v-treeview/prop-shaped.vue
+++ b/packages/docs/src/examples/v-treeview/prop-shaped.vue
@@ -13,42 +13,42 @@
   const items = ref([
     {
       id: 1,
-      name: 'Applications :',
+      title: 'Applications :',
       children: [
-        { id: 2, name: 'Calendar : app' },
-        { id: 3, name: 'Chrome : app' },
-        { id: 4, name: 'Webstorm : app' },
+        { id: 2, title: 'Calendar : app' },
+        { id: 3, title: 'Chrome : app' },
+        { id: 4, title: 'Webstorm : app' },
       ],
     },
     {
       id: 5,
-      name: 'Documents :',
+      title: 'Documents :',
       children: [
         {
           id: 6,
-          name: 'vuetify :',
+          title: 'vuetify :',
           children: [
             {
               id: 7,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 8, name: 'index : ts' },
-                { id: 9, name: 'bootstrap : ts' },
+                { id: 8, title: 'index : ts' },
+                { id: 9, title: 'bootstrap : ts' },
               ],
             },
           ],
         },
         {
           id: 10,
-          name: 'material2 :',
+          title: 'material2 :',
           children: [
             {
               id: 11,
-              name: 'src :',
+              title: 'src :',
               children: [
-                { id: 12, name: 'v-btn : ts' },
-                { id: 13, name: 'v-card : ts' },
-                { id: 14, name: 'v-window : ts' },
+                { id: 12, title: 'v-btn : ts' },
+                { id: 13, title: 'v-card : ts' },
+                { id: 14, title: 'v-window : ts' },
               ],
             },
           ],
@@ -57,28 +57,28 @@
     },
     {
       id: 15,
-      name: 'Downloads :',
+      title: 'Downloads :',
       children: [
-        { id: 16, name: 'October : pdf' },
-        { id: 17, name: 'November : pdf' },
-        { id: 18, name: 'Tutorial : html' },
+        { id: 16, title: 'October : pdf' },
+        { id: 17, title: 'November : pdf' },
+        { id: 18, title: 'Tutorial : html' },
       ],
     },
     {
       id: 19,
-      name: 'Videos :',
+      title: 'Videos :',
       children: [
         {
           id: 20,
-          name: 'Tutorials :',
+          title: 'Tutorials :',
           children: [
-            { id: 21, name: 'Basic layouts : mp4' },
-            { id: 22, name: 'Advanced techniques : mp4' },
-            { id: 23, name: 'All about app : dir' },
+            { id: 21, title: 'Basic layouts : mp4' },
+            { id: 22, title: 'Advanced techniques : mp4' },
+            { id: 23, title: 'All about app : dir' },
           ],
         },
-        { id: 24, name: 'Intro : mov' },
-        { id: 25, name: 'Conference introduction : avi' },
+        { id: 24, title: 'Intro : mov' },
+        { id: 25, title: 'Conference introduction : avi' },
       ],
     },
   ])
@@ -90,42 +90,42 @@
       items: [
         {
           id: 1,
-          name: 'Applications :',
+          title: 'Applications :',
           children: [
-            { id: 2, name: 'Calendar : app' },
-            { id: 3, name: 'Chrome : app' },
-            { id: 4, name: 'Webstorm : app' },
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' },
           ],
         },
         {
           id: 5,
-          name: 'Documents :',
+          title: 'Documents :',
           children: [
             {
               id: 6,
-              name: 'vuetify :',
+              title: 'vuetify :',
               children: [
                 {
                   id: 7,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 8, name: 'index : ts' },
-                    { id: 9, name: 'bootstrap : ts' },
+                    { id: 8, title: 'index : ts' },
+                    { id: 9, title: 'bootstrap : ts' },
                   ],
                 },
               ],
             },
             {
               id: 10,
-              name: 'material2 :',
+              title: 'material2 :',
               children: [
                 {
                   id: 11,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 12, name: 'v-btn : ts' },
-                    { id: 13, name: 'v-card : ts' },
-                    { id: 14, name: 'v-window : ts' },
+                    { id: 12, title: 'v-btn : ts' },
+                    { id: 13, title: 'v-card : ts' },
+                    { id: 14, title: 'v-window : ts' },
                   ],
                 },
               ],
@@ -134,28 +134,28 @@
         },
         {
           id: 15,
-          name: 'Downloads :',
+          title: 'Downloads :',
           children: [
-            { id: 16, name: 'October : pdf' },
-            { id: 17, name: 'November : pdf' },
-            { id: 18, name: 'Tutorial : html' },
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' },
           ],
         },
         {
           id: 19,
-          name: 'Videos :',
+          title: 'Videos :',
           children: [
             {
               id: 20,
-              name: 'Tutorials :',
+              title: 'Tutorials :',
               children: [
-                { id: 21, name: 'Basic layouts : mp4' },
-                { id: 22, name: 'Advanced techniques : mp4' },
-                { id: 23, name: 'All about app : dir' },
+                { id: 21, title: 'Basic layouts : mp4' },
+                { id: 22, title: 'Advanced techniques : mp4' },
+                { id: 23, title: 'All about app : dir' },
               ],
             },
-            { id: 24, name: 'Intro : mov' },
-            { id: 25, name: 'Conference introduction : avi' },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' },
           ],
         },
       ],
diff --git a/packages/docs/src/examples/v-treeview/slot-append-and-label.vue b/packages/docs/src/examples/v-treeview/slot-append-and-label.vue
index 1116cb348f0..e52f27851da 100644
--- a/packages/docs/src/examples/v-treeview/slot-append-and-label.vue
+++ b/packages/docs/src/examples/v-treeview/slot-append-and-label.vue
@@ -2,7 +2,7 @@
   <v-treeview
     v-model="tree"
     :items="items"
-    :open="initiallyOpen"
+    :opened="initiallyOpen"
     item-key="name"
     activatable
     open-on-click
@@ -35,53 +35,53 @@
   const tree = ref([])
   const items = ref([
     {
-      name: '.git',
+      title: '.git',
     },
     {
-      name: 'node_modules',
+      title: 'node_modules',
     },
     {
-      name: 'public',
+      title: 'public',
       children: [
         {
-          name: 'static',
+          title: 'static',
           children: [{
-            name: 'logo.png',
+            title: 'logo.png',
             file: 'png',
           }],
         },
         {
-          name: 'favicon.ico',
+          title: 'favicon.ico',
           file: 'png',
         },
         {
-          name: 'index.html',
+          title: 'index.html',
           file: 'html',
         },
       ],
     },
     {
-      name: '.gitignore',
+      title: '.gitignore',
       file: 'txt',
     },
     {
-      name: 'babel.config.js',
+      title: 'babel.config.js',
       file: 'js',
     },
     {
-      name: 'package.json',
+      title: 'package.json',
       file: 'json',
     },
     {
-      name: 'README.md',
+      title: 'README.md',
       file: 'md',
     },
     {
-      name: 'vue.config.js',
+      title: 'vue.config.js',
       file: 'js',
     },
     {
-      name: 'yarn.lock',
+      title: 'yarn.lock',
       file: 'txt',
     },
   ])
@@ -104,53 +104,53 @@
       tree: [],
       items: [
         {
-          name: '.git',
+          title: '.git',
         },
         {
-          name: 'node_modules',
+          title: 'node_modules',
         },
         {
-          name: 'public',
+          title: 'public',
           children: [
             {
-              name: 'static',
+              title: 'static',
               children: [{
-                name: 'logo.png',
+                title: 'logo.png',
                 file: 'png',
               }],
             },
             {
-              name: 'favicon.ico',
+              title: 'favicon.ico',
               file: 'png',
             },
             {
-              name: 'index.html',
+              title: 'index.html',
               file: 'html',
             },
           ],
         },
         {
-          name: '.gitignore',
+          title: '.gitignore',
           file: 'txt',
         },
         {
-          name: 'babel.config.js',
+          title: 'babel.config.js',
           file: 'js',
         },
         {
-          name: 'package.json',
+          title: 'package.json',
           file: 'json',
         },
         {
-          name: 'README.md',
+          title: 'README.md',
           file: 'md',
         },
         {
-          name: 'vue.config.js',
+          title: 'vue.config.js',
           file: 'js',
         },
         {
-          name: 'yarn.lock',
+          title: 'yarn.lock',
           file: 'txt',
         },
       ],
diff --git a/packages/docs/src/examples/v-treeview/usage.vue b/packages/docs/src/examples/v-treeview/usage.vue
index a8ad2b5f06e..af771c0d2c7 100644
--- a/packages/docs/src/examples/v-treeview/usage.vue
+++ b/packages/docs/src/examples/v-treeview/usage.vue
@@ -8,42 +8,42 @@
       items: [
         {
           id: 1,
-          name: 'Applications :',
+          title: 'Applications :',
           children: [
-            { id: 2, name: 'Calendar : app' },
-            { id: 3, name: 'Chrome : app' },
-            { id: 4, name: 'Webstorm : app' },
+            { id: 2, title: 'Calendar : app' },
+            { id: 3, title: 'Chrome : app' },
+            { id: 4, title: 'Webstorm : app' },
           ],
         },
         {
           id: 5,
-          name: 'Documents :',
+          title: 'Documents :',
           children: [
             {
               id: 6,
-              name: 'vuetify :',
+              title: 'vuetify :',
               children: [
                 {
                   id: 7,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 8, name: 'index : ts' },
-                    { id: 9, name: 'bootstrap : ts' },
+                    { id: 8, title: 'index : ts' },
+                    { id: 9, title: 'bootstrap : ts' },
                   ],
                 },
               ],
             },
             {
               id: 10,
-              name: 'material2 :',
+              title: 'material2 :',
               children: [
                 {
                   id: 11,
-                  name: 'src :',
+                  title: 'src :',
                   children: [
-                    { id: 12, name: 'v-btn : ts' },
-                    { id: 13, name: 'v-card : ts' },
-                    { id: 14, name: 'v-window : ts' },
+                    { id: 12, title: 'v-btn : ts' },
+                    { id: 13, title: 'v-card : ts' },
+                    { id: 14, title: 'v-window : ts' },
                   ],
                 },
               ],
@@ -52,28 +52,28 @@
         },
         {
           id: 15,
-          name: 'Downloads :',
+          title: 'Downloads :',
           children: [
-            { id: 16, name: 'October : pdf' },
-            { id: 17, name: 'November : pdf' },
-            { id: 18, name: 'Tutorial : html' },
+            { id: 16, title: 'October : pdf' },
+            { id: 17, title: 'November : pdf' },
+            { id: 18, title: 'Tutorial : html' },
           ],
         },
         {
           id: 19,
-          name: 'Videos :',
+          title: 'Videos :',
           children: [
             {
               id: 20,
-              name: 'Tutorials :',
+              title: 'Tutorials :',
               children: [
-                { id: 21, name: 'Basic layouts : mp4' },
-                { id: 22, name: 'Advanced techniques : mp4' },
-                { id: 23, name: 'All about app : dir' },
+                { id: 21, title: 'Basic layouts : mp4' },
+                { id: 22, title: 'Advanced techniques : mp4' },
+                { id: 23, title: 'All about app : dir' },
               ],
             },
-            { id: 24, name: 'Intro : mov' },
-            { id: 25, name: 'Conference introduction : avi' },
+            { id: 24, title: 'Intro : mov' },
+            { id: 25, title: 'Conference introduction : avi' },
           ],
         },
       ],
diff --git a/packages/docs/src/pages/en/components/treeview.md b/packages/docs/src/pages/en/components/treeview.md
index 31bae035159..fb3c132a28c 100644
--- a/packages/docs/src/pages/en/components/treeview.md
+++ b/packages/docs/src/pages/en/components/treeview.md
@@ -1,33 +1,60 @@
 ---
-disabled: true
+emphasized: true
 meta:
+  nav: Treeview
   title: Treeview component
   description: The treeview component is a user interface that is used to represent hierarchical data in a tree structure.
   keywords: treeview, vuetify treeview component, vue treeview component
 related:
   - /components/lists/
   - /components/timelines/
-
+features:
+  label: 'C: VTreeview'
+  report: true
 ---
 
 # Treeview
 
 The `v-treeview` component is useful for displaying large amounts of nested data.
 
-<PromotedEntry />
+<PageFeatures />
+
+::: warning
+
+This feature requires [v3.5.9](/getting-started/release-notes/?version=v3.5.9)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VTreeview } from 'vuetify/labs/VTreeview'
+
+export default createVuetify({
+  components: {
+    VTreeview,
+  },
+})
+```
 
 ## Usage
 
-A basic example
+A basic example of the treeview component.
 
 <ExamplesExample file="v-treeview/usage" />
 
+<PromotedEntry />
+
 ## API
 
 | Component | Description |
 | - | - |
 | [v-treeview](/api/v-treeview/) | Primary Component |
-| [v-treeview-node](/api/v-treeview-node/) | Sub-component used to display a single treeview node |
+| [v-treeview-item](/api/v-treeview-item/) | Sub-component used to display a single treeview node |
+| [v-treeview-children](/api/v-treeview-children/) | Sub-component used to display a single treeview node's children |
+| [v-treeview-group](/api/v-treeview-group/) | Sub-component used to display a single treeview node's children |
 
 <ApiInline hide-links />
 
@@ -53,11 +80,11 @@ Dense mode provides more compact layout with decreased heights of the items.
 
 <ExamplesExample file="v-treeview/prop-dense" />
 
-#### Hoverable
+<!-- #### Hoverable
 
 Treeview nodes can have a hover effect.
 
-<ExamplesExample file="v-treeview/prop-hoverable" />
+<ExamplesExample file="v-treeview/prop-hoverable" /> -->
 
 #### Item disabled
 
@@ -77,17 +104,17 @@ Treeview nodes can be pre-opened on page load.
 
 <ExamplesExample file="v-treeview/prop-open-all" />
 
-#### Rounded
+<!-- #### Rounded
 
 You can make treeview nodes rounded.
 
-<ExamplesExample file="v-treeview/prop-rounded" />
+<ExamplesExample file="v-treeview/prop-rounded" /> -->
 
-#### Selectable
+<!-- #### Selectable
 
 You can easily select treeview nodes and children.
 
-<ExamplesExample file="v-treeview/prop-selectable" />
+<ExamplesExample file="v-treeview/prop-selectable" /> -->
 
 #### Selected color
 
@@ -101,11 +128,11 @@ Treeview now supports two different selection types. The default type is **'leaf
 
 <ExamplesExample file="v-treeview/prop-selection-type" />
 
-#### Shaped
+<!-- #### Shaped
 
 Shaped treeview's have rounded borders on one side of the nodes.
 
-<ExamplesExample file="v-treeview/prop-shaped" />
+<ExamplesExample file="v-treeview/prop-shaped" /> -->
 
 ### Slots
 
diff --git a/packages/docs/src/pages/en/getting-started/upgrade-guide.md b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
index 5ae23ab20ee..f2efef7459e 100644
--- a/packages/docs/src/pages/en/getting-started/upgrade-guide.md
+++ b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
@@ -34,9 +34,7 @@ Before upgrading, make sure to consult the Official [Vue 3 Migration Guide](http
 
 - [calendar](https://github.com/vuetifyjs/vuetify/issues/13469)
 - [overflow-btn](https://github.com/vuetifyjs/vuetify/issues/13493)
-- [speed-dial](https://github.com/vuetifyjs/vuetify/issues/13508)
 - [time-picker](https://github.com/vuetifyjs/vuetify/issues/13516)
-- [treeview](https://github.com/vuetifyjs/vuetify/issues/13518)
 :::
 
 ## Setup
diff --git a/packages/docs/src/pages/en/labs/introduction.md b/packages/docs/src/pages/en/labs/introduction.md
index 7203d5d016b..f375816514b 100644
--- a/packages/docs/src/pages/en/labs/introduction.md
+++ b/packages/docs/src/pages/en/labs/introduction.md
@@ -81,6 +81,7 @@ The following is a list of available and up-and-coming components for use with L
 | [v-fab](/components/floating-action-buttons/) | A layout aware [v-btn](/components/buttons/) | [v3.5.7](/getting-started/release-notes/?version=v3.5.7) |
 | [v-speed-dial](/components/speed-dials/) | A component for display actions | [v3.5.8](/getting-started/release-notes/?version=v3.5.8) |
 | [v-sparkline](/components/sparklines/) | A basic data display component | [v3.5.5](/getting-started/release-notes/?version=v3.5.5) |
+| [v-treeview](/components/treeview/) | A treeview component | [v3.5.9](/getting-started/release-notes/?version=v3.5.9) |
 
 ::: warning
 Lab component APIs are **NOT** finalized and can and will change. You should **EXPECT** for things to break during the course of development.
diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
index a47a8112a17..aa36192caa6 100644
--- a/packages/vuetify/src/components/VList/VList.tsx
+++ b/packages/vuetify/src/components/VList/VList.tsx
@@ -73,7 +73,7 @@ function transformItems (props: ItemProps & { itemType: string }, items: (string
   return array
 }
 
-function useListItems (props: ItemProps & { itemType: string }) {
+export function useListItems (props: ItemProps & { itemType: string }) {
   const items = computed(() => transformItems(props, props.items))
 
   return { items }
@@ -141,8 +141,10 @@ export const VList = genericComponent<new <
 
   emits: {
     'update:selected': (value: unknown[]) => true,
+    'update:activated': (value: unknown[]) => true,
     'update:opened': (value: unknown[]) => true,
     'click:open': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
+    'click:activate': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
     'click:select': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
   },
 
@@ -155,7 +157,7 @@ export const VList = genericComponent<new <
     const { dimensionStyles } = useDimension(props)
     const { elevationClasses } = useElevation(props)
     const { roundedClasses } = useRounded(props)
-    const { open, select } = useNested(props)
+    const { children, open, parents, select } = useNested(props)
     const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined)
     const activeColor = toRef(props, 'activeColor')
     const baseColor = toRef(props, 'baseColor')
@@ -277,6 +279,8 @@ export const VList = genericComponent<new <
       open,
       select,
       focus,
+      children,
+      parents,
     }
   },
 })
diff --git a/packages/vuetify/src/components/VList/VListGroup.tsx b/packages/vuetify/src/components/VList/VListGroup.tsx
index af232b41736..a475a86d330 100644
--- a/packages/vuetify/src/components/VList/VListGroup.tsx
+++ b/packages/vuetify/src/components/VList/VListGroup.tsx
@@ -119,7 +119,9 @@ export const VListGroup = genericComponent<VListGroupSlots>()({
       </props.tag>
     ))
 
-    return {}
+    return {
+      isOpen,
+    }
   },
 })
 
diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index 5ceed20f447..54cf2ab1fc5 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -115,17 +115,27 @@ export const VListItem = genericComponent<VListItemSlots>()({
   setup (props, { attrs, slots, emit }) {
     const link = useLink(props, attrs)
     const id = computed(() => props.value === undefined ? link.href.value : props.value)
-    const { select, isSelected, isIndeterminate, isGroupActivator, root, parent, openOnSelect } = useNestedItem(id, false)
+    const {
+      activate,
+      isActivated,
+      select,
+      isSelected,
+      isIndeterminate,
+      isGroupActivator,
+      root,
+      parent,
+      openOnSelect,
+    } = useNestedItem(id, false)
     const list = useList()
     const isActive = computed(() =>
       props.active !== false &&
-      (props.active || link.isActive?.value || isSelected.value)
+      (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value))
     )
     const isLink = computed(() => props.link !== false && link.isLink.value)
     const isClickable = computed(() =>
       !props.disabled &&
       props.link !== false &&
-      (props.link || link.isClickable.value || (props.value != null && !!list))
+      (props.link || link.isClickable.value || (!!list && (root.selectable.value || root.activatable.value || props.value != null)))
     )
 
     const roundedProps = computed(() => props.rounded || props.nav)
@@ -167,7 +177,14 @@ export const VListItem = genericComponent<VListItemSlots>()({
       if (isGroupActivator || !isClickable.value) return
 
       link.navigate?.(e)
-      props.value != null && select(!isSelected.value, e)
+
+      if (root.activatable) {
+        activate(!isActivated.value, e)
+      } else if (root.selectable) {
+        select(!isSelected.value, e)
+      } else if (props.value != null) {
+        select(!isSelected.value, e)
+      }
     }
 
     function onKeyDown (e: KeyboardEvent) {
@@ -339,7 +356,12 @@ export const VListItem = genericComponent<VListItemSlots>()({
       )
     })
 
-    return {}
+    return {
+      isGroupActivator,
+      isSelected,
+      list,
+      select,
+    }
   },
 })
 
diff --git a/packages/vuetify/src/composables/nested/activeStrategies.ts b/packages/vuetify/src/composables/nested/activeStrategies.ts
new file mode 100644
index 00000000000..495cfcef2af
--- /dev/null
+++ b/packages/vuetify/src/composables/nested/activeStrategies.ts
@@ -0,0 +1,130 @@
+/* eslint-disable sonarjs/no-identical-functions */
+// Utilities
+import { toRaw } from 'vue'
+
+export type ActiveStrategyFn = (data: {
+  id: unknown
+  value: boolean
+  activated: Set<unknown>
+  children: Map<unknown, unknown[]>
+  parents: Map<unknown, unknown>
+  event?: Event
+}) => Set<unknown>
+
+export type ActiveStrategyTransformInFn = (
+  v: readonly unknown[] | undefined,
+  children: Map<unknown, unknown[]>,
+  parents: Map<unknown, unknown>,
+) => Set<unknown>
+
+export type ActiveStrategyTransformOutFn = (
+  v: Set<unknown>,
+  children: Map<unknown, unknown[]>,
+  parents: Map<unknown, unknown>,
+) => unknown[]
+
+export type ActiveStrategy = {
+  activate: ActiveStrategyFn
+  in: ActiveStrategyTransformInFn
+  out: ActiveStrategyTransformOutFn
+}
+
+export const independentActiveStrategy = (mandatory?: boolean): ActiveStrategy => {
+  const strategy: ActiveStrategy = {
+    activate: ({ id, value, activated }) => {
+      id = toRaw(id)
+
+      // When mandatory and we're trying to deselect when id
+      // is the only currently selected item then do nothing
+      if (mandatory && !value && activated.size === 1 && activated.has(id)) return activated
+
+      if (value) {
+        activated.add(id)
+      } else {
+        activated.delete(id)
+      }
+
+      return activated
+    },
+    in: (v, children, parents) => {
+      let set = new Set()
+
+      for (const id of (v || [])) {
+        set = strategy.activate({
+          id,
+          value: true,
+          activated: new Set(set),
+          children,
+          parents,
+        })
+      }
+
+      return set
+    },
+    out: v => {
+      return Array.from(v)
+    },
+  }
+
+  return strategy
+}
+
+export const independentSingleActiveStrategy = (mandatory?: boolean): ActiveStrategy => {
+  const parentStrategy = independentActiveStrategy(mandatory)
+
+  const strategy: ActiveStrategy = {
+    activate: ({ activated, id, ...rest }) => {
+      id = toRaw(id)
+      const singleSelected = activated.has(id) ? new Set([id]) : new Set()
+      return parentStrategy.activate({ ...rest, id, activated: singleSelected })
+    },
+    in: (v, children, parents) => {
+      let set = new Set()
+
+      if (v?.length) {
+        set = parentStrategy.in(v.slice(0, 1), children, parents)
+      }
+
+      return set
+    },
+    out: (v, children, parents) => {
+      return parentStrategy.out(v, children, parents)
+    },
+  }
+
+  return strategy
+}
+
+export const leafActiveStrategy = (mandatory?: boolean): ActiveStrategy => {
+  const parentStrategy = independentActiveStrategy(mandatory)
+
+  const strategy: ActiveStrategy = {
+    activate: ({ id, activated, children, ...rest }) => {
+      id = toRaw(id)
+      if (children.has(id)) return activated
+
+      return parentStrategy.activate({ id, activated, children, ...rest })
+    },
+    in: parentStrategy.in,
+    out: parentStrategy.out,
+  }
+
+  return strategy
+}
+
+export const leafSingleActiveStrategy = (mandatory?: boolean): ActiveStrategy => {
+  const parentStrategy = independentSingleActiveStrategy(mandatory)
+
+  const strategy: ActiveStrategy = {
+    activate: ({ id, activated, children, ...rest }) => {
+      id = toRaw(id)
+      if (children.has(id)) return activated
+
+      return parentStrategy.activate({ id, activated, children, ...rest })
+    },
+    in: parentStrategy.in,
+    out: parentStrategy.out,
+  }
+
+  return strategy
+}
diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
index d6f8073a694..aa006fa4f72 100644
--- a/packages/vuetify/src/composables/nested/nested.ts
+++ b/packages/vuetify/src/composables/nested/nested.ts
@@ -2,7 +2,12 @@
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, inject, onBeforeUnmount, provide, ref, shallowRef, toRaw } from 'vue'
+import { computed, inject, onBeforeUnmount, provide, ref, shallowRef, toRaw, toRef } from 'vue'
+import {
+  independentActiveStrategy,
+  independentSingleActiveStrategy, leafActiveStrategy,
+  leafSingleActiveStrategy,
+} from './activeStrategies'
 import { listOpenStrategy, multipleOpenStrategy, singleOpenStrategy } from './openStrategies'
 import {
   classicSelectStrategy,
@@ -23,11 +28,16 @@ export type SelectStrategy = 'single-leaf' | 'leaf' | 'independent' | 'single-in
 export type OpenStrategyProp = 'single' | 'multiple' | 'list' | OpenStrategy
 
 export interface NestedProps {
+  activatable: boolean
+  selectable: boolean
+  activeStrategy: SelectStrategy | undefined
   selectStrategy: SelectStrategy | undefined
   openStrategy: OpenStrategyProp | undefined
+  activated: readonly unknown[] | undefined
   selected: readonly unknown[] | undefined
   opened: readonly unknown[] | undefined
   mandatory: boolean
+  'onUpdate:activated': EventProp<[unknown[]]> | undefined
   'onUpdate:selected': EventProp<[unknown[]]> | undefined
   'onUpdate:opened': EventProp<[unknown[]]> | undefined
 }
@@ -38,12 +48,16 @@ type NestedProvide = {
   root: {
     children: Ref<Map<unknown, unknown[]>>
     parents: Ref<Map<unknown, unknown>>
+    activatable: Ref<boolean>
+    selectable: Ref<boolean>
     opened: Ref<Set<unknown>>
+    activated: Ref<Set<unknown>>
     selected: Ref<Map<unknown, 'on' | 'off' | 'indeterminate'>>
     selectedValues: Ref<unknown[]>
     register: (id: unknown, parentId: unknown, isGroup?: boolean) => void
     unregister: (id: unknown) => void
     open: (id: unknown, value: boolean, event?: Event) => void
+    activate: (id: unknown, value: boolean, event?: Event) => void
     select: (id: unknown, value: boolean, event?: Event) => void
     openOnSelect: (id: unknown, value: boolean, event?: Event) => void
   }
@@ -60,17 +74,25 @@ export const emptyNested: NestedProvide = {
     children: ref(new Map()),
     open: () => null,
     openOnSelect: () => null,
+    activate: () => null,
     select: () => null,
+    activatable: ref(false),
+    selectable: ref(false),
     opened: ref(new Set()),
+    activated: ref(new Set()),
     selected: ref(new Map()),
     selectedValues: ref([]),
   },
 }
 
 export const makeNestedProps = propsFactory({
+  activatable: Boolean,
+  selectable: Boolean,
+  activeStrategy: [String, Function] as PropType<SelectStrategy>,
   selectStrategy: [String, Function] as PropType<SelectStrategy>,
   openStrategy: [String, Object] as PropType<OpenStrategyProp>,
   opened: Array as PropType<readonly unknown[]>,
+  activated: Array as PropType<readonly unknown[]>,
   selected: Array as PropType<readonly unknown[]>,
   mandatory: Boolean,
 }, 'nested')
@@ -82,6 +104,18 @@ export const useNested = (props: NestedProps) => {
 
   const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()])
 
+  const activeStrategy = computed(() => {
+    if (typeof props.activeStrategy === 'object') return props.activeStrategy
+
+    switch (props.activeStrategy) {
+      case 'leaf': return leafActiveStrategy(props.mandatory)
+      case 'single-leaf': return leafSingleActiveStrategy(props.mandatory)
+      case 'independent': return independentActiveStrategy(props.mandatory)
+      case 'single-independent':
+      default: return independentSingleActiveStrategy(props.mandatory)
+    }
+  })
+
   const selectStrategy = computed(() => {
     if (typeof props.selectStrategy === 'object') return props.selectStrategy
 
@@ -106,6 +140,13 @@ export const useNested = (props: NestedProps) => {
     }
   })
 
+  const activated = useProxiedModel(
+    props,
+    'activated',
+    props.activated,
+    v => activeStrategy.value.in(v, children.value, parents.value),
+    v => activeStrategy.value.out(v, children.value, parents.value),
+  )
   const selected = useProxiedModel(
     props,
     'selected',
@@ -136,6 +177,9 @@ export const useNested = (props: NestedProps) => {
     id: shallowRef(),
     root: {
       opened,
+      activatable: toRef(props, 'activatable'),
+      selectable: toRef(props, 'selectable'),
+      activated,
       selected,
       selectedValues: computed(() => {
         const arr = []
@@ -208,6 +252,24 @@ export const useNested = (props: NestedProps) => {
 
         nested.root.openOnSelect(id, value, event)
       },
+      activate: (id, value, event) => {
+        if (!props.activatable) {
+          return nested.root.select(id, true, event)
+        }
+
+        vm.emit('click:activate', { id, value, path: getPath(id), event })
+
+        const newActivated = activeStrategy.value.activate({
+          id,
+          value,
+          activated: new Set(activated.value),
+          children: children.value,
+          parents: parents.value,
+          event,
+        })
+
+        newActivated && (activated.value = newActivated)
+      },
       children,
       parents,
     },
@@ -231,6 +293,8 @@ export const useNestedItem = (id: Ref<unknown>, isGroup: boolean) => {
     openOnSelect: (open: boolean, e?: Event) => parent.root.openOnSelect(computedId.value, open, e),
     isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
     parent: computed(() => parent.root.parents.value.get(computedId.value)),
+    activate: (activated: boolean, e?: Event) => parent.root.activate(computedId.value, activated, e),
+    isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
     select: (selected: boolean, e?: Event) => parent.root.select(computedId.value, selected, e),
     isSelected: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'on'),
     isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
diff --git a/packages/vuetify/src/composables/nested/selectStrategies.ts b/packages/vuetify/src/composables/nested/selectStrategies.ts
index 7bea185f368..1c09acaabce 100644
--- a/packages/vuetify/src/composables/nested/selectStrategies.ts
+++ b/packages/vuetify/src/composables/nested/selectStrategies.ts
@@ -37,7 +37,11 @@ export const independentSelectStrategy = (mandatory?: boolean): SelectStrategy =
       // When mandatory and we're trying to deselect when id
       // is the only currently selected item then do nothing
       if (mandatory && !value) {
-        const on = Array.from(selected.entries()).reduce((arr, [key, value]) => value === 'on' ? [...arr, key] : arr, [] as unknown[])
+        const on = Array.from(selected.entries())
+          .reduce((arr, [key, value]) => {
+            if (value === 'on') arr.push(key)
+            return arr
+          }, [] as unknown[])
         if (on.length === 1 && on[0] === id) return selected
       }
 
@@ -167,7 +171,11 @@ export const classicSelectStrategy = (mandatory?: boolean): SelectStrategy => {
       // If mandatory and planned deselect results in no selected
       // items then we can't do it, so return original state
       if (mandatory && !value) {
-        const on = Array.from(selected.entries()).reduce((arr, [key, value]) => value === 'on' ? [...arr, key] : arr, [] as unknown[])
+        const on = Array.from(selected.entries())
+          .reduce((arr, [key, value]) => {
+            if (value === 'on') arr.push(key)
+            return arr
+          }, [] as unknown[])
         if (on.length === 0) return original
       }
 
diff --git a/packages/vuetify/src/iconsets/fa.ts b/packages/vuetify/src/iconsets/fa.ts
index 142b421f17d..a6a0b0143d8 100644
--- a/packages/vuetify/src/iconsets/fa.ts
+++ b/packages/vuetify/src/iconsets/fa.ts
@@ -41,6 +41,8 @@ const aliases: IconAliases = {
   plus: 'fas fa-plus',
   minus: 'fas fa-minus',
   calendar: 'fas fa-calendar',
+  treeviewCollapse: 'fas fa-caret-down',
+  treeviewExpand: 'fas fa-caret-right',
   eyeDropper: 'fas fa-eye-dropper',
 }
 
diff --git a/packages/vuetify/src/iconsets/fa4.ts b/packages/vuetify/src/iconsets/fa4.ts
index a432318068c..d07f69aecba 100644
--- a/packages/vuetify/src/iconsets/fa4.ts
+++ b/packages/vuetify/src/iconsets/fa4.ts
@@ -44,6 +44,8 @@ const aliases: IconAliases = {
   plus: 'fa-plus',
   minus: 'fa-minus',
   calendar: 'fa-calendar',
+  treeviewCollapse: 'fa-caret-down',
+  treeviewExpand: 'fa-caret-right',
   eyeDropper: 'fa-eye-dropper',
 }
 
diff --git a/packages/vuetify/src/iconsets/md.ts b/packages/vuetify/src/iconsets/md.ts
index 58f7ff6d86b..58552d42ad2 100644
--- a/packages/vuetify/src/iconsets/md.ts
+++ b/packages/vuetify/src/iconsets/md.ts
@@ -44,6 +44,8 @@ const aliases: IconAliases = {
   plus: 'add',
   minus: 'remove',
   calendar: 'event',
+  treeviewCollapse: 'arrow_drop_down',
+  treeviewExpand: 'arrow_right',
   eyeDropper: 'colorize',
 }
 
diff --git a/packages/vuetify/src/iconsets/mdi-svg.ts b/packages/vuetify/src/iconsets/mdi-svg.ts
index 90a448497b8..11cfd86a98a 100644
--- a/packages/vuetify/src/iconsets/mdi-svg.ts
+++ b/packages/vuetify/src/iconsets/mdi-svg.ts
@@ -43,6 +43,8 @@ const aliases: IconAliases = {
   plus: 'svg:M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z',
   minus: 'svg:M19,13H5V11H19V13Z',
   calendar: 'svg:M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z',
+  treeviewCollapse: 'svg:M7,10L12,15L17,10H7Z',
+  treeviewExpand: 'svg:M10,17L15,12L10,7V17Z',
   eyeDropper: 'svg:M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z',
 }
 
diff --git a/packages/vuetify/src/iconsets/mdi.ts b/packages/vuetify/src/iconsets/mdi.ts
index df03efdda88..d1a9e788062 100644
--- a/packages/vuetify/src/iconsets/mdi.ts
+++ b/packages/vuetify/src/iconsets/mdi.ts
@@ -44,6 +44,8 @@ const aliases: IconAliases = {
   plus: 'mdi-plus',
   minus: 'mdi-minus',
   calendar: 'mdi-calendar',
+  treeviewCollapse: 'mdi-menu-down',
+  treeviewExpand: 'mdi-menu-right',
   eyeDropper: 'mdi-eyedropper',
 }
 
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
new file mode 100644
index 00000000000..5feb99f56d9
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
@@ -0,0 +1,180 @@
+// Components
+import { makeVTreeviewChildrenProps, VTreeviewChildren } from './VTreeviewChildren'
+import { makeVListProps, useListItems, VList } from '@/components/VList/VList'
+
+// Composables
+import { provideDefaults } from '@/composables/defaults'
+import { makeFilterProps, useFilter } from '@/composables/filter'
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+// Utilities
+import { computed, provide, ref, toRef, watch } from 'vue'
+import { genericComponent, omit, propsFactory, useRender } from '@/util'
+
+// Types
+import { VTreeviewSymbol } from './shared'
+import type { VListChildrenSlots } from '@/components/VList/VListChildren'
+import type { ListItem } from '@/composables/list-items'
+import type { GenericProps } from '@/util'
+
+function flatten (items: ListItem[], flat: ListItem[] = []) {
+  for (const item of items) {
+    flat.push(item)
+    if (item.children) flatten(item.children, flat)
+  }
+  return flat
+}
+
+export const makeVTreeviewProps = propsFactory({
+  openAll: Boolean,
+  search: String,
+
+  ...makeFilterProps({ filterKeys: ['title'] }),
+  ...makeVTreeviewChildrenProps(),
+  ...omit(makeVListProps({
+    collapseIcon: '$treeviewCollapse',
+    expandIcon: '$treeviewExpand',
+    selectStrategy: 'independent' as const,
+    openStrategy: 'multiple' as const,
+    slim: true,
+  }), ['nav']),
+}, 'VTreeview')
+
+export const VTreeview = genericComponent<new <T>(
+  props: {
+    items?: T[]
+  },
+  slots: VListChildrenSlots<T>
+) => GenericProps<typeof props, typeof slots>>()({
+  name: 'VTreeview',
+
+  props: makeVTreeviewProps(),
+
+  emits: {
+    'update:opened': (val: unknown[]) => true,
+    'update:activated': (val: unknown[]) => true,
+    'update:selected': (val: unknown[]) => true,
+    'click:open': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
+    'click:select': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
+  },
+
+  setup (props, { slots }) {
+    const { items } = useListItems(props)
+    const activeColor = toRef(props, 'activeColor')
+    const baseColor = toRef(props, 'baseColor')
+    const color = toRef(props, 'color')
+    const opened = useProxiedModel(props, 'opened')
+    const activated = useProxiedModel(props, 'activated')
+    const selected = useProxiedModel(props, 'selected')
+
+    const vListRef = ref<VList>()
+
+    const flatItems = computed(() => flatten(items.value))
+    const search = toRef(props, 'search')
+    const { filteredItems } = useFilter(props, flatItems, search)
+    const visibleIds = computed(() => {
+      if (!search.value) {
+        return null
+      }
+      return new Set(filteredItems.value.flatMap(item => {
+        return [...getPath(item.props.value), ...getChildren(item.props.value)]
+      }))
+    })
+
+    function getPath (id: unknown) {
+      const path: unknown[] = []
+      let parent: unknown = id
+      while (parent != null) {
+        path.unshift(parent)
+        parent = vListRef.value?.parents.get(parent)
+      }
+      return path
+    }
+
+    function getChildren (id: unknown) {
+      const arr: unknown[] = []
+      const queue = ((vListRef.value?.children.get(id) ?? []).slice())
+      while (queue.length) {
+        const child = queue.shift()
+        if (!child) continue
+        arr.push(child)
+        queue.push(...((vListRef.value?.children.get(child) ?? []).slice()))
+      }
+      return arr
+    }
+
+    watch(() => props.openAll, val => {
+      opened.value = val ? openAll(items.value) : []
+    }, { immediate: true })
+
+    function openAll (item: any) {
+      let ids: number[] = []
+
+      for (const i of item) {
+        if (!i.children) continue
+
+        ids.push(i.value)
+
+        if (i.children) {
+          ids = ids.concat(openAll(i.children))
+        }
+      }
+
+      return ids
+    }
+
+    provide(VTreeviewSymbol, { visibleIds })
+
+    provideDefaults({
+      VTreeviewGroup: {
+        activeColor,
+        baseColor,
+        color,
+        collapseIcon: toRef(props, 'collapseIcon'),
+        expandIcon: toRef(props, 'expandIcon'),
+      },
+      VTreeviewItem: {
+        activeClass: toRef(props, 'activeClass'),
+        activeColor,
+        baseColor,
+        color,
+        density: toRef(props, 'density'),
+        disabled: toRef(props, 'disabled'),
+        lines: toRef(props, 'lines'),
+        variant: toRef(props, 'variant'),
+      },
+    })
+
+    useRender(() => {
+      const listProps = VList.filterProps(props)
+      const treeviewChildrenProps = VTreeviewChildren.filterProps(props)
+
+      return (
+        <VList
+          ref={ vListRef }
+          { ...listProps }
+          class={[
+            'v-treeview',
+            props.class,
+          ]}
+          style={ props.style }
+          v-model:opened={ opened.value }
+          v-model:activated={ activated.value }
+          v-model:selected={ selected.value }
+        >
+          <VTreeviewChildren
+            { ...treeviewChildrenProps }
+            items={ items.value }
+            v-slots={ slots }
+          ></VTreeviewChildren>
+        </VList>
+      )
+    })
+
+    return {
+      open,
+    }
+  },
+})
+
+export type VTreeview = InstanceType<typeof VTreeview>
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
new file mode 100644
index 00000000000..a9bfd2c6ca6
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -0,0 +1,122 @@
+// Components
+import { VTreeviewGroup } from './VTreeviewGroup'
+import { VTreeviewItem } from './VTreeviewItem'
+import { VCheckboxBtn } from '@/components/VCheckbox'
+
+// Utilities
+import { shallowRef } from 'vue'
+import { genericComponent, propsFactory } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+import type { InternalListItem } from '@/components/VList/VList'
+import type { VListItemSlots } from '@/components/VList/VListItem'
+import type { GenericProps } from '@/util'
+
+export type VTreeviewChildrenSlots<T> = {
+  [K in keyof Omit<VListItemSlots, 'default'>]: VListItemSlots[K] & { item: T }
+} & {
+  default: never
+  item: { props: InternalListItem['props'] }
+}
+
+export const makeVTreeviewChildrenProps = propsFactory({
+  loadChildren: Function as PropType<(item: unknown) => Promise<void>>,
+  loadingIcon: {
+    type: String,
+    default: '$loading',
+  },
+  items: Array as PropType<readonly InternalListItem[]>,
+  selectable: Boolean,
+}, 'VTreeviewChildren')
+
+export const VTreeviewChildren = genericComponent<new <T extends InternalListItem>(
+  props: {
+    items?: readonly T[]
+  },
+  slots: VTreeviewChildrenSlots<T>
+) => GenericProps<typeof props, typeof slots>>()({
+  name: 'VTreeviewChildren',
+
+  props: makeVTreeviewChildrenProps(),
+
+  setup (props, { emit, slots }) {
+    const isLoading = shallowRef(false)
+    const hasLoaded = shallowRef(false)
+
+    function checkChildren (item: unknown) {
+      return new Promise<void>(resolve => {
+        if (!props.items?.length || !props.loadChildren || hasLoaded.value) return resolve()
+
+        isLoading.value = true
+        props.loadChildren(item).then(resolve)
+      }).then(() => {
+        hasLoaded.value = true
+      }).finally(() => {
+        isLoading.value = false
+      })
+    }
+
+    function onClick (e: MouseEvent | KeyboardEvent, item: any) {
+      e.stopPropagation()
+
+      checkChildren(item)
+    }
+
+    return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, raw: item }) => {
+      const slotsWithItem = {
+        prepend: slots.prepend
+          ? slotProps => slots.prepend?.({ ...slotProps, item })
+          : props.selectable
+            ? ({ isSelected, isIndeterminate }) => (
+              <VCheckboxBtn
+                key={ item.value }
+                tabindex="-1"
+                modelValue={ isSelected }
+                loading={ isLoading.value }
+                indeterminate={ isIndeterminate }
+                onClick={ (e: MouseEvent) => onClick(e, item) }
+              />
+            )
+            : undefined,
+        append: slots.append ? slotProps => slots.append?.({ ...slotProps, item }) : undefined,
+        title: slots.title ? slotProps => slots.title?.({ ...slotProps, item }) : undefined,
+      } satisfies VTreeviewItem['$props']['$children']
+
+      const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps)
+      const treeviewChildrenProps = VTreeviewChildren.filterProps(props)
+
+      return children ? (
+        <VTreeviewGroup
+          value={ itemProps?.value }
+          { ...treeviewGroupProps }
+        >
+          {{
+            activator: ({ props: activatorProps }) => (
+              <VTreeviewItem
+                { ...itemProps }
+                { ...activatorProps }
+                loading={ isLoading.value }
+                v-slots={ slotsWithItem }
+                onClick={ (e: MouseEvent | KeyboardEvent) => onClick(e, item) }
+              />
+            ),
+            default: () => (
+              <VTreeviewChildren
+                { ...treeviewChildrenProps }
+                items={ children }
+                v-slots={ slots }
+              />
+            ),
+          }}
+        </VTreeviewGroup>
+      ) : (
+        slots.item?.({ props: itemProps }) ?? (
+          <VTreeviewItem
+            { ...itemProps }
+            v-slots={ slotsWithItem }
+          />
+        ))
+    })
+  },
+})
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewGroup.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewGroup.tsx
new file mode 100644
index 00000000000..88be4583ad0
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewGroup.tsx
@@ -0,0 +1,68 @@
+// Components
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
+import { makeVListGroupProps, VListGroup } from '@/components/VList/VListGroup'
+
+// Utilities
+import { computed, ref } from 'vue'
+import { genericComponent, omit, propsFactory, useRender } from '@/util'
+
+// Types
+import type { VListGroupSlots } from '@/components/VList/VListGroup'
+
+export const makeVTreeviewGroupProps = propsFactory({
+  ...omit(makeVListGroupProps({
+    collapseIcon: '$treeviewCollapse',
+    expandIcon: '$treeviewExpand',
+  }), ['subgroup']),
+}, 'VTreeviewGroup')
+
+export const VTreeviewGroup = genericComponent<VListGroupSlots>()({
+  name: 'VTreeviewGroup',
+
+  props: makeVTreeviewGroupProps(),
+
+  setup (props, { slots }) {
+    const vListGroupRef = ref<VListGroup>()
+    const toggleIcon = computed(() => vListGroupRef.value?.isOpen ? props.collapseIcon : props.expandIcon)
+
+    const activatorDefaults = computed(() => ({
+      VTreeviewItem: {
+        prependIcon: undefined,
+        appendIcon: undefined,
+        active: vListGroupRef.value?.isOpen,
+        toggleIcon: toggleIcon.value,
+      },
+    }))
+
+    useRender(() => {
+      const listGroupProps = VListGroup.filterProps(props)
+
+      return (
+        <VListGroup
+          { ...listGroupProps }
+          ref={ vListGroupRef }
+          class={[
+            'v-treeview-group',
+            props.class,
+          ]}
+          subgroup
+        >
+          {{
+            ...slots,
+            activator: slots.activator ? slotProps => (
+              <>
+                <VDefaultsProvider defaults={ activatorDefaults.value }>
+                  { slots.activator?.(slotProps) }
+                </VDefaultsProvider>
+              </>
+            ) : undefined,
+          }}
+        </VListGroup>
+      )
+    })
+
+    return {}
+  },
+})
+
+export type VTreeviewGroup = InstanceType<typeof VTreeviewGroup>
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
new file mode 100644
index 00000000000..3c278856a6a
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
@@ -0,0 +1,19 @@
+@use './variables' as *
+
+.v-treeview-item--filtered
+    display: none
+
+.v-treeview
+  --indent-padding: 0px
+
+.v-treeview-group.v-list-group
+  --list-indent-size: #{$treeview-group-list-indent-size}
+
+  .v-list--slim &
+    --prepend-width: #{$treeview-group-list-prepend-width}
+
+  .v-list-group__items .v-list-item
+    padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important
+
+  .v-list-group__items .v-list-item--prepend
+    // padding-inline-start: calc(#{$treeview-item-prepend-padding-inline-start} + var(--indent-padding)) !important
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
new file mode 100644
index 00000000000..738bc411533
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -0,0 +1,118 @@
+// Styles
+import './VTreeviewItem.sass'
+
+// Components
+import { VBtn } from '@/components/VBtn'
+import { VListItemAction } from '@/components/VList'
+import { makeVListItemProps, VListItem } from '@/components/VList/VListItem'
+
+// Composables
+import { IconValue } from '@/composables/icons'
+import { useLink } from '@/composables/router'
+
+// Utilities
+import { computed, inject, ref } from 'vue'
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+// Types
+import { VTreeviewSymbol } from './shared'
+import { VProgressCircular } from '../allComponents'
+import type { VListItemSlots } from '@/components/VList/VListItem'
+
+export const makeVTreeviewItemProps = propsFactory({
+  loading: Boolean,
+  toggleIcon: IconValue,
+
+  ...makeVListItemProps({ slim: true }),
+}, 'VTreeviewItem')
+
+export const VTreeviewItem = genericComponent<VListItemSlots>()({
+  name: 'VTreeviewItem',
+
+  props: makeVTreeviewItemProps(),
+
+  setup (props, { attrs, slots, emit }) {
+    const link = useLink(props, attrs)
+    const id = computed(() => props.value === undefined ? link.href.value : props.value)
+    const vListItemRef = ref<VListItem>()
+
+    const isClickable = computed(() =>
+      !props.disabled &&
+      props.link !== false &&
+      (props.link || link.isClickable.value || (props.value != null && !!vListItemRef.value?.list))
+    )
+
+    function onClick (e: MouseEvent | KeyboardEvent) {
+      if (!vListItemRef.value?.isGroupActivator || !isClickable.value) return
+      props.value != null && vListItemRef.value?.select(!vListItemRef.value?.isSelected, e)
+    }
+
+    function onKeyDown (e: KeyboardEvent) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        onClick(e as any as MouseEvent)
+      }
+    }
+
+    const visibleIds = inject(VTreeviewSymbol, { visibleIds: ref() }).visibleIds
+
+    useRender(() => {
+      const listItemProps = VListItem.filterProps(props)
+      const hasPrepend = slots.prepend || props.toggleIcon
+
+      return (
+        <VListItem
+          ref={ vListItemRef }
+          { ...listItemProps }
+          class={[
+            'v-treeview-item',
+            {
+              'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value),
+            },
+            props.class,
+          ]}
+          onClick={ onClick }
+          onKeydown={ isClickable.value && onKeyDown }
+        >
+          {{
+            ...slots,
+            prepend: hasPrepend ? slotProps => {
+              return (
+                <>
+                  { props.toggleIcon && (
+                    <VListItemAction start={ false }>
+                      <VBtn
+                        density="compact"
+                        icon={ props.toggleIcon }
+                        loading={ props.loading }
+                        variant="text"
+                      >
+                        {{
+                          loader () {
+                            return (
+                              <VProgressCircular
+                                indeterminate="disable-shrink"
+                                size="20"
+                                width="2"
+                              />
+                            )
+                          },
+                        }}
+                      </VBtn>
+                    </VListItemAction>
+                  )}
+
+                  { slots.prepend?.(slotProps) }
+                </>
+              )
+            } : undefined,
+          }}
+        </VListItem>
+      )
+    })
+
+    return {}
+  },
+})
+
+export type VTreeviewItem = InstanceType<typeof VTreeviewItem>
diff --git a/packages/vuetify/src/labs/VTreeview/index.ts b/packages/vuetify/src/labs/VTreeview/index.ts
new file mode 100644
index 00000000000..add205b5d54
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/index.ts
@@ -0,0 +1,3 @@
+export { VTreeview } from './VTreeview'
+export { VTreeviewItem } from './VTreeviewItem'
+export { VTreeviewGroup } from './VTreeviewGroup'
diff --git a/packages/vuetify/src/labs/VTreeview/shared.ts b/packages/vuetify/src/labs/VTreeview/shared.ts
new file mode 100644
index 00000000000..515b74e1e7c
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/shared.ts
@@ -0,0 +1,8 @@
+// Types
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export interface TreeViewProvide {
+  visibleIds: ComputedRef<Set<unknown> | null>
+}
+
+export const VTreeviewSymbol: InjectionKey<TreeViewProvide> = Symbol.for('vuetify:v-treeview')
diff --git a/packages/vuetify/src/labs/VTreeview/variables.scss b/packages/vuetify/src/labs/VTreeview/variables.scss
new file mode 100644
index 00000000000..05352370d07
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/variables.scss
@@ -0,0 +1,8 @@
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+$treeview-group-list-indent-size: 16px !default;
+$treeview-group-list-prepend-width: 16px !default;
+$treeview-item-padding-inline-start: 12px !default;
+$treeview-item-prepend-padding-inline-start: 44px !default;
diff --git a/packages/vuetify/src/labs/components.ts b/packages/vuetify/src/labs/components.ts
index d173ad17152..695e5631bf6 100644
--- a/packages/vuetify/src/labs/components.ts
+++ b/packages/vuetify/src/labs/components.ts
@@ -1,7 +1,8 @@
-export * from './VConfirmEdit'
 export * from './VCalendar'
+export * from './VConfirmEdit'
+export * from './VEmptyState'
 export * from './VFab'
 export * from './VPicker'
 export * from './VSparkline'
 export * from './VSpeedDial'
-export * from './VEmptyState'
+export * from './VTreeview'

From 36e3200968e41380ff172d924e321ba360a3764d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 12 Mar 2024 14:48:12 -0500
Subject: [PATCH 09/33] chore(release): publish v3.5.9

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

diff --git a/lerna.json b/lerna.json
index 9203879c545..d8a3a31e5d6 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.5.8",
+  "version": "3.5.9",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index c15d98935d6..5c60ea205b5 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.5.8",
+  "version": "3.5.9",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^20.0.0",
     "tsx": "^4.6.2",
     "vue": "^3.4.19",
-    "vuetify": "^3.5.8"
+    "vuetify": "^3.5.9"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 63d3d0287c2..f9592e8ce66 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.5.8",
+  "version": "3.5.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.7.1",
     "vue-instantsearch": "^4.12.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.5.8"
+    "vuetify": "^3.5.9"
   },
   "devDependencies": {
     "@emailjs/browser": "^3.11.0",
@@ -50,7 +50,7 @@
     "@vitejs/plugin-basic-ssl": "^1.0.2",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/compiler-sfc": "^3.4.19",
-    "@vuetify/api-generator": "^3.5.8",
+    "@vuetify/api-generator": "^3.5.9",
     "ajv": "^8.12.0",
     "async-es": "^3.2.5",
     "date-fns": "^2.30.0",
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index bcb6a48aa48..2ef697b6901 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.5.8",
+  "version": "3.5.9",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From dbd7432950c2bc5f3aa3d3c7da0b02118f14c823 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 13 Mar 2024 16:59:50 +1100
Subject: [PATCH 10/33] docs: replace polyfill.io with cdnjs

---
 packages/docs/index.html                                      | 4 ++--
 packages/docs/src/pages/en/getting-started/browser-support.md | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/docs/index.html b/packages/docs/index.html
index 13d1ff4dcae..f39ecebb062 100644
--- a/packages/docs/index.html
+++ b/packages/docs/index.html
@@ -6,10 +6,10 @@
     <meta name="theme-color" content="#1867c0">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimal-ui, shrink-to-fit=no">
     <!-- @inject-meta -->
-    <script defer src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver,ResizeObserver,WebAnimations,Object.fromEntries,Array.prototype.at"></script>
+    <script defer src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=IntersectionObserver,ResizeObserver,WebAnimations,Object.fromEntries,Array.prototype.at"></script>
     <link rel="preconnect" href="https://www.google-analytics.com">
     <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://polyfill.io">
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
     <link rel="preconnect" href="https://www.googletagmanager.com">
     <link rel="preconnect" href="https://api.cosmicjs.com">
     <link rel="preconnect" href="https://cdn.cosmicjs.com">
diff --git a/packages/docs/src/pages/en/getting-started/browser-support.md b/packages/docs/src/pages/en/getting-started/browser-support.md
index 8ae8f018390..416cff323b1 100644
--- a/packages/docs/src/pages/en/getting-started/browser-support.md
+++ b/packages/docs/src/pages/en/getting-started/browser-support.md
@@ -35,4 +35,4 @@ This is not an exhaustive list of compatible browsers, but the main targeted one
 This table is updated with minor releases of Vuetify. Chrome, Firefox, and Safari will be supported at least two years back from the Vuetify x.x.0 release date.
 Current start date is May 2021.
 
-Support for older browsers may be possible with additional [polyfills](https://polyfill.io/v3/) and [PostCSS plugins](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical), but has not been tested and is not guaranteed. If you need to support older browsers we recommend using Vuetify 2.
+Support for older browsers may be possible with additional [polyfills](https://cdnjs.cloudflare.com/polyfill/) and [PostCSS plugins](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical), but has not been tested and is not guaranteed. If you need to support older browsers we recommend using Vuetify 2.

From 46ed01893a929a87475c0c892b87063688571dce Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 13 Mar 2024 17:28:34 +1100
Subject: [PATCH 11/33] fix(VSpeedDial): forward menu slots

fixes #19381
---
 .../src/labs/VSpeedDial/VSpeedDial.tsx        | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx
index 26a29a4ffec..9ea635f84ae 100644
--- a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx
+++ b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx
@@ -10,20 +10,26 @@ import { makeComponentProps } from '@/composables/component'
 import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
 
 // Utilities
+import { ref } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
+// Types
+import type { OverlaySlots } from '@/components/VOverlay/VOverlay'
+
 export const makeVSpeedDialProps = propsFactory({
   ...makeComponentProps(),
   ...makeVMenuProps({ offset: 8, minWidth: 0, location: 'top center' as const }),
   ...makeTransitionProps({ transition: 'fade-transition' }),
 }, 'VSpeedDial')
 
-export const VSpeedDial = genericComponent()({
+export const VSpeedDial = genericComponent<OverlaySlots>()({
   name: 'VSpeedDial',
 
   props: makeVSpeedDialProps(),
 
   setup (props, { slots }) {
+    const menuRef = ref<VMenu>()
+
     useRender(() => {
       const menuProps = VMenu.filterProps(props)
 
@@ -33,22 +39,28 @@ export const VSpeedDial = genericComponent()({
           class={ props.class }
           style={ props.style }
           contentClass="v-speed-dial__content"
+          ref={ menuRef }
         >
-          <VDefaultsProvider
-            defaults={{
-              VBtn: {
-                size: 'small',
-              },
-            }}
-          >
-            <MaybeTransition
-              appear
-              group
-              transition={ props.transition }
-            >
-              { slots.default?.() }
-            </MaybeTransition>
-          </VDefaultsProvider>
+          {{
+            ...slots,
+            default: slotProps => (
+              <VDefaultsProvider
+                defaults={{
+                  VBtn: {
+                    size: 'small',
+                  },
+                }}
+              >
+                <MaybeTransition
+                  appear
+                  group
+                  transition={ props.transition }
+                >
+                  { slots.default?.(slotProps) }
+                </MaybeTransition>
+              </VDefaultsProvider>
+            ),
+          }}
         </VMenu>
       )
     })

From 4c7d254e4ae0e5f4f8c5af18bb93031ec27386ba Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 13 Mar 2024 17:32:13 +1100
Subject: [PATCH 12/33] fix(VOverlay): correc scrollStrategy teardown ordering

fixes #19373
---
 packages/vuetify/src/components/VOverlay/scrollStrategies.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VOverlay/scrollStrategies.ts b/packages/vuetify/src/components/VOverlay/scrollStrategies.ts
index 3d2495c4072..62e2c341b94 100644
--- a/packages/vuetify/src/components/VOverlay/scrollStrategies.ts
+++ b/packages/vuetify/src/components/VOverlay/scrollStrategies.ts
@@ -49,7 +49,7 @@ export function useScrollStrategies (
     if (!(data.isActive.value && props.scrollStrategy)) return
 
     scope = effectScope()
-    await nextTick()
+    await new Promise(resolve => setTimeout(resolve))
     scope.active && scope.run(() => {
       if (typeof props.scrollStrategy === 'function') {
         props.scrollStrategy(data, props, scope!)

From 5d71f37fa95f6852fc327ed270f1d74d8b2e8bc3 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 12 Mar 2024 22:48:23 -0500
Subject: [PATCH 13/33] docs(VBtn): add information regarding defaults
 targeting with VAppBar

---
 .../docs/src/pages/en/components/buttons.md    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/en/components/buttons.md b/packages/docs/src/pages/en/components/buttons.md
index c54ac56df74..1b99cbd8605 100644
--- a/packages/docs/src/pages/en/components/buttons.md
+++ b/packages/docs/src/pages/en/components/buttons.md
@@ -367,7 +367,7 @@ The following properties are modified when used within the **actions** slot of t
 | **ripple** | `false` |
 | **variant** | `text` |
 
-### Toolbars
+### Toolbars and AppBars
 
 The `v-toolbar` component applies the **text** variant to all `v-btn` components. In addition, the [v-toolbar-items](/api/v-toolbar-items/) component is used to create a grouping of buttons that fill the height of the toolbar.
 
@@ -377,6 +377,22 @@ The `v-toolbar` component applies the **text** variant to all `v-btn` components
 
 <ExamplesExample file="v-btn/defaults-toolbar" />
 
+::: info
+
+The [v-app-bar](/components/app-bars/) component uses [v-toolbar](/components/toolbars/) internally. When applying global defaults, you must target the `v-toolbar` component.
+
+:::
+
+```js { resource="src/plugins/vuetify.js" }
+export default createVuetify({
+  defaults: {
+    VToolbar: {
+      VBtn: { variant: 'flat' },
+    },
+  },
+})
+```
+
 The following properties are modified when used within a `v-toolbar` or `v-toolbar-items` component:
 
 | Property | Value |

From cd1f27dfd7f014490e62f2abb8c1db4b83777372 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 13 Mar 2024 12:09:49 -0500
Subject: [PATCH 14/33] docs(Dashboard): fix reactivity

---
 packages/docs/components.d.ts                 |  1 +
 .../dashboard/DashboardEmptyState.vue         | 25 +++++++++++++++++++
 packages/docs/src/pages/en/user/dashboard.md  | 22 +---------------
 3 files changed, 27 insertions(+), 21 deletions(-)
 create mode 100644 packages/docs/src/components/dashboard/DashboardEmptyState.vue

diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts
index 876ad3c6deb..ca7d4e75231 100644
--- a/packages/docs/components.d.ts
+++ b/packages/docs/components.d.ts
@@ -89,6 +89,7 @@ declare module 'vue' {
     AppVerticalDivider: typeof import('./src/components/app/VerticalDivider.vue')['default']
     Backmatter: typeof import('./src/components/Backmatter.vue')['default']
     ComponentsListItem: typeof import('./src/components/components/ListItem.vue')['default']
+    DashboardDashboardEmptyState: typeof import('./src/components/dashboard/DashboardEmptyState.vue')['default']
     DocContribute: typeof import('./src/components/doc/Contribute.vue')['default']
     DocExplorer: typeof import('./src/components/doc/Explorer.vue')['default']
     DocIconList: typeof import('./src/components/doc/IconList.vue')['default']
diff --git a/packages/docs/src/components/dashboard/DashboardEmptyState.vue b/packages/docs/src/components/dashboard/DashboardEmptyState.vue
new file mode 100644
index 00000000000..80b4d5cfa39
--- /dev/null
+++ b/packages/docs/src/components/dashboard/DashboardEmptyState.vue
@@ -0,0 +1,25 @@
+<template>
+  <v-empty-state
+    :text="text"
+    headline="My Dashboard"
+    height="calc(100vh - var(--v-layout-top))"
+  >
+    <UserOneSubCard />
+
+    <VoAuthCard v-if="!auth.user" />
+  </v-empty-state>
+</template>
+
+<script setup lang="ts">
+// Components
+  import UserOneSubCard from '@/components/user/OneSubCard.vue'
+
+  // Stores
+  import { useAuthStore } from '@vuetify/one'
+
+  const auth = useAuthStore()
+
+  const text = computed(() => {
+    return auth.user ? 'This page will soon be home to the Vuetify One Dashboard.' : 'In order to proceed, please login using GitHub or Discord.'
+  })
+</script>
diff --git a/packages/docs/src/pages/en/user/dashboard.md b/packages/docs/src/pages/en/user/dashboard.md
index 68688bbd417..0424a68ceb8 100644
--- a/packages/docs/src/pages/en/user/dashboard.md
+++ b/packages/docs/src/pages/en/user/dashboard.md
@@ -7,24 +7,4 @@ meta:
   keywords: user dashboard
 ---
 
-<script setup>
-// Components
-import UserOneSubCard from '@/components/user/OneSubCard.vue'
-
-// Stores
-import { useAuthStore } from '@vuetify/one'
-
-const auth = useAuthStore()
-
-const props = {
-  headline: 'My Dashboard',
-  title: auth.user ? 'Coming soon!' : 'Login to Subscribe to Vuetify One',
-  icon: '$vuetify',
-  height: 'calc(100vh - var(--v-layout-top))',
-  text: auth.user
-    ? 'This page will soon be home to the Vuetify One Dashboard.'
-    : 'In order to proceed, please login using GitHub or Discord.',
-}
-</script>
-
-<v-empty-state v-bind="props"><UserOneSubCard /><VoAuthListItem v-if="!auth.user" /></v-empty-state>
+<DashboardDashboardEmptyState />

From a95aeb2ce257bf08f5e0b4a132b9a0641cd0dcf9 Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Thu, 14 Mar 2024 05:44:26 +1100
Subject: [PATCH 15/33] fix(VAutocomplete/VCombobox): allow delete in single
 mode (#19387)

fixes #19369

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../VAutocomplete/VAutocomplete.tsx           | 17 +++++++++++------
 .../src/components/VCombobox/VCombobox.tsx    | 19 ++++++++++++-------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 17b7b2a4a33..afdf33fc1d2 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -246,9 +246,13 @@ export const VAutocomplete = genericComponent<new <
         listRef.value?.focus('next')
       }
 
-      if (!props.multiple) return
-
       if (['Backspace', 'Delete'].includes(e.key)) {
+        if (
+          !props.multiple &&
+          hasSelectionSlot.value &&
+          model.value.length > 0
+        ) return select(model.value[0], false)
+
         if (selectionIndex.value < 0) {
           if (e.key === 'Backspace' && !search.value) {
             selectionIndex.value = length - 1
@@ -258,12 +262,13 @@ export const VAutocomplete = genericComponent<new <
         }
 
         const originalSelectionIndex = selectionIndex.value
-        const selectedItem = model.value[selectionIndex.value]
-        if (selectedItem && !selectedItem.props.disabled) select(selectedItem, false)
+        select(model.value[selectionIndex.value], false)
 
         selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex
       }
 
+      if (!props.multiple) return
+
       if (e.key === 'ArrowLeft') {
         if (selectionIndex.value < 0 && selectionStart > 0) return
 
@@ -325,8 +330,8 @@ export const VAutocomplete = genericComponent<new <
     const isSelecting = shallowRef(false)
 
     /** @param set - null means toggle */
-    function select (item: ListItem, set: boolean | null = true) {
-      if (item.props.disabled) return
+    function select (item: ListItem | undefined, set: boolean | null = true) {
+      if (!item || item.props.disabled) return
 
       if (props.multiple) {
         const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value))
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index 7af942c2816..0448c272f03 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -268,6 +268,7 @@ export const VCombobox = genericComponent<new <
       }
       menu.value = !menu.value
     }
+    // eslint-disable-next-line complexity
     function onKeydown (e: KeyboardEvent) {
       if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return
 
@@ -306,24 +307,28 @@ export const VCombobox = genericComponent<new <
         if (hasSelectionSlot.value) _search.value = ''
       }
 
-      if (!props.multiple) return
-
       if (['Backspace', 'Delete'].includes(e.key)) {
+        if (
+          !props.multiple &&
+          hasSelectionSlot.value &&
+          model.value.length > 0
+        ) return select(model.value[0], false)
+
         if (selectionIndex.value < 0) {
           if (e.key === 'Backspace' && !search.value) {
             selectionIndex.value = length - 1
           }
-
           return
         }
 
         const originalSelectionIndex = selectionIndex.value
-        const selectedItem = model.value[selectionIndex.value]
-        if (selectedItem && !selectedItem.props.disabled) select(selectedItem, false)
+        select(model.value[selectionIndex.value], false)
 
         selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex
       }
 
+      if (!props.multiple) return
+
       if (e.key === 'ArrowLeft') {
         if (selectionIndex.value < 0 && selectionStart > 0) return
 
@@ -359,8 +364,8 @@ export const VCombobox = genericComponent<new <
       }
     }
     /** @param set - null means toggle */
-    function select (item: ListItem, set: boolean | null = true) {
-      if (item.props.disabled) return
+    function select (item: ListItem | undefined, set: boolean | null = true) {
+      if (!item || item.props.disabled) return
 
       if (props.multiple) {
         const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value))

From 64df31d8c2dbc9fcb029cd739a7397c4201711d0 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 13 Mar 2024 19:20:13 -0500
Subject: [PATCH 16/33] chore(package.json): update @vuetify/one

---
 packages/docs/package.json | 2 +-
 yarn.lock                  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index f9592e8ce66..0df2a89c96d 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -23,7 +23,7 @@
     "@cosmicjs/sdk": "^1.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^1.1.7",
+    "@vuetify/one": "^1.1.8",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 8645541ae38..0bf4cd8d0b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3949,10 +3949,10 @@
     find-cache-dir "^3.3.2"
     upath "^2.0.1"
 
-"@vuetify/one@^1.1.7":
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.1.7.tgz#25788d6e835db4ee7f4622025a6a5571b747c7c3"
-  integrity sha512-T6m8Jo62wo36TFgRT2xy8bYmHeIePxRr4iTghFojd1pFMiAZmcnlWossyWyIQ7DsESLJL2QLgkHDPuqyLfZlYw==
+"@vuetify/one@^1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.1.8.tgz#cabf14962fd6a95f4dec59af2c6b230c57b972ac"
+  integrity sha512-Vt5s09Mqijdiec/OzLR1nF11HpWrgfpMTuxO1jLThGNjtfCNwKcWUJ0fmchA/C6jCEyIpFyAvjMFr3tlWqXQyA==
 
 "@vueuse/head@^1.3.1":
   version "1.3.1"

From 68b5a2f54c2778139012c7dc993bce9110d3d371 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 13 Mar 2024 19:31:13 -0500
Subject: [PATCH 17/33] chore(scrollStrategies): fix lint

---
 packages/vuetify/src/components/VOverlay/scrollStrategies.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VOverlay/scrollStrategies.ts b/packages/vuetify/src/components/VOverlay/scrollStrategies.ts
index 62e2c341b94..9369a54637d 100644
--- a/packages/vuetify/src/components/VOverlay/scrollStrategies.ts
+++ b/packages/vuetify/src/components/VOverlay/scrollStrategies.ts
@@ -1,5 +1,5 @@
 // Utilities
-import { effectScope, nextTick, onScopeDispose, watchEffect } from 'vue'
+import { effectScope, onScopeDispose, watchEffect } from 'vue'
 import { requestNewFrame } from './requestNewFrame'
 import { convertToUnit, getScrollParents, hasScrollbar, IN_BROWSER, propsFactory } from '@/util'
 

From fbf7ec528d1cd53ad6cfbc1075e9c504c7dec193 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 13 Mar 2024 21:13:41 -0500
Subject: [PATCH 18/33] fix(entry-bundler): add missing blueprints export for
 Vuetify Play

---
 packages/vuetify/src/entry-bundler.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/vuetify/src/entry-bundler.ts b/packages/vuetify/src/entry-bundler.ts
index b38fd39cb83..e9943b01770 100644
--- a/packages/vuetify/src/entry-bundler.ts
+++ b/packages/vuetify/src/entry-bundler.ts
@@ -4,6 +4,7 @@
 import './styles/main.sass'
 
 // Components
+import * as blueprints from './blueprints'
 import * as components from './components'
 import * as directives from './directives'
 import { createVuetify as _createVuetify } from './framework'
@@ -19,6 +20,7 @@ export const version = __VUETIFY_VERSION__
 createVuetify.version = version
 
 export {
+  blueprints,
   components,
   directives,
 }

From 6675f835204d0ca6691f4a86bca83f66b66e7d6b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 14 Mar 2024 13:57:36 -0500
Subject: [PATCH 19/33] chore(package.json): update @vuetify/one

---
 packages/docs/package.json | 2 +-
 yarn.lock                  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index 0df2a89c96d..07d0b92fbd1 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -23,7 +23,7 @@
     "@cosmicjs/sdk": "^1.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^1.1.8",
+    "@vuetify/one": "^1.2.4",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 0bf4cd8d0b7..94d493a1a93 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3949,10 +3949,10 @@
     find-cache-dir "^3.3.2"
     upath "^2.0.1"
 
-"@vuetify/one@^1.1.8":
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.1.8.tgz#cabf14962fd6a95f4dec59af2c6b230c57b972ac"
-  integrity sha512-Vt5s09Mqijdiec/OzLR1nF11HpWrgfpMTuxO1jLThGNjtfCNwKcWUJ0fmchA/C6jCEyIpFyAvjMFr3tlWqXQyA==
+"@vuetify/one@^1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.2.4.tgz#0cd7756100fe2158fc98bdafef61b91abcbdeb02"
+  integrity sha512-Q9Os2+3RdaVv+oxxF+OdJCk+CH7PWVNHJY83Di7LM/9yr/npnW/YyDpoq1pfyHMzuLkfyl8XuKc13izV1D5fDA==
 
 "@vueuse/head@^1.3.1":
   version "1.3.1"

From b57999b285233b52c40261dfe2b235caa2d6028c Mon Sep 17 00:00:00 2001
From: Andrew Henry <AMajesticPotatoe@gmail.com>
Date: Thu, 14 Mar 2024 16:43:05 -0400
Subject: [PATCH 20/33] docs(display-and-platform.md): elaborate of
 AndUp/AndDown

---
 .../pages/en/features/display-and-platform.md | 47 +++++++++++++------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/packages/docs/src/pages/en/features/display-and-platform.md b/packages/docs/src/pages/en/features/display-and-platform.md
index c319b221a8e..a9f77cc00a9 100644
--- a/packages/docs/src/pages/en/features/display-and-platform.md
+++ b/packages/docs/src/pages/en/features/display-and-platform.md
@@ -50,14 +50,33 @@ If you are still using the Options API, you can access the display information o
 </script>
 ```
 
-<FeaturesBreakpointsTable />
-
 ## API
 
 | Component | Description |
 | - | - |
 | [useDisplay](/api/use-display/) | Composable |
 
+# Thresholds and Breakpoints
+
+Threshold values generate the ranges used for various breakpoints seen throughout vuetify and the `useDisplay` composable. The system uses an "and up" mentality starting from `xs` at 0px. The default threshold values are displayed below.
+
+<FeaturesBreakpointsTable />
+
+These ranges power the various additional `AndUp` / `AndDown` properties accessible in `useDisplay`
+
+```ts
+{
+  smAndDown: boolean // < 960px
+  smAndUp: boolean // > 600px
+  mdAndDown: boolean // < 1280px
+  mdAndUp: boolean // > 960px
+  lgAndDown: boolean // < 1919px
+  lgAndUp: boolean // > 1280px
+  xlAndDown: boolean // < 2559px
+  xlAndUp: boolean // > 1920px
+}
+```
+
 ## Options
 
 The **useDisplay** composable has several configuration options, such as the ability to define custom values for breakpoints.
@@ -124,20 +143,20 @@ In the following example, we use a switch statement and the current breakpoint n
 ```ts
 {
   // Breakpoints
-  xs: boolean
-  sm: boolean
-  md: boolean
-  lg: boolean
-  xl: boolean
+  xs: boolean // 0 - 595
+  sm: boolean // 600 - 959
+  md: boolean // 960 - 1279
+  lg: boolean // 1280 - 1919
+  xl: boolean // > 1920
   xxl: boolean
-  smAndDown: boolean
-  smAndUp: boolean
-  mdAndDown: boolean
-  mdAndUp: boolean
-  lgAndDown: boolean
-  lgAndUp: boolean
+  smAndDown: boolean // < 960
+  smAndUp: boolean // > 600
+  mdAndDown: boolean // < 1280
+  mdAndUp: boolean // > 960
+  lgAndDown: boolean // < 1919
+  lgAndUp: boolean // > 1280
   xlAndDown: boolean
-  xlAndUp: boolean
+  xlAndUp: boolean // < 1920
 
   // true if screen width < mobileBreakpoint
   mobile: boolean

From 5cc554fced11615a978b91e52c568edea6c80cc8 Mon Sep 17 00:00:00 2001
From: Andrew Henry <AMajesticPotatoe@gmail.com>
Date: Thu, 14 Mar 2024 16:46:28 -0400
Subject: [PATCH 21/33] docs(display-and-platform.md): swap header order

---
 packages/docs/src/pages/en/features/display-and-platform.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/en/features/display-and-platform.md b/packages/docs/src/pages/en/features/display-and-platform.md
index a9f77cc00a9..f155575f58d 100644
--- a/packages/docs/src/pages/en/features/display-and-platform.md
+++ b/packages/docs/src/pages/en/features/display-and-platform.md
@@ -56,7 +56,7 @@ If you are still using the Options API, you can access the display information o
 | - | - |
 | [useDisplay](/api/use-display/) | Composable |
 
-# Thresholds and Breakpoints
+# Breakpoints and Thresholds
 
 Threshold values generate the ranges used for various breakpoints seen throughout vuetify and the `useDisplay` composable. The system uses an "and up" mentality starting from `xs` at 0px. The default threshold values are displayed below.
 

From 8a31940b4b328c2b268814c9a3351defaf6fba7e Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 14 Mar 2024 16:32:17 -0500
Subject: [PATCH 22/33] docs(display-and-platform): fix lint

---
 packages/docs/src/pages/en/features/display-and-platform.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/en/features/display-and-platform.md b/packages/docs/src/pages/en/features/display-and-platform.md
index f155575f58d..f66e895086a 100644
--- a/packages/docs/src/pages/en/features/display-and-platform.md
+++ b/packages/docs/src/pages/en/features/display-and-platform.md
@@ -56,7 +56,7 @@ If you are still using the Options API, you can access the display information o
 | - | - |
 | [useDisplay](/api/use-display/) | Composable |
 
-# Breakpoints and Thresholds
+## Breakpoints and Thresholds
 
 Threshold values generate the ranges used for various breakpoints seen throughout vuetify and the `useDisplay` composable. The system uses an "and up" mentality starting from `xs` at 0px. The default threshold values are displayed below.
 

From 55b86bd26a84ac4324f1e776e57312192989e181 Mon Sep 17 00:00:00 2001
From: MajesticPotatoe <amajesticpotatoe@gmail.com>
Date: Thu, 14 Mar 2024 18:03:32 -0400
Subject: [PATCH 23/33] chore(ci): bump actions versions

---
 .github/actions/download-locales/action.yml |  4 ++--
 .github/actions/nightly-release/action.yml  |  2 +-
 .github/actions/yarn-install/action.yml     |  2 +-
 .github/workflows/ci.yml                    | 18 +++++++++---------
 .github/workflows/crowdin-uploads.yml       |  4 ++--
 .github/workflows/nightly-pr.yml            |  8 ++++----
 .github/workflows/nightly-schedule.yml      |  8 ++++----
 .github/workflows/triage.yml                |  2 +-
 8 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/.github/actions/download-locales/action.yml b/.github/actions/download-locales/action.yml
index db73d7b681a..413566dad88 100644
--- a/.github/actions/download-locales/action.yml
+++ b/.github/actions/download-locales/action.yml
@@ -11,7 +11,7 @@ runs:
   using: composite
   steps:
     - name: Download eo-UY
-      uses: crowdin/github-action@v1.12.0
+      uses: crowdin/github-action@v1.19.0
       with:
         download_language: eo
         config: crowdin.yml
@@ -21,7 +21,7 @@ runs:
         export_only_approved: false
         crowdin_branch_name: ${{ inputs.crowdin-branch }}
     - name: Download zh-CN
-      uses: crowdin/github-action@v1.12.0
+      uses: crowdin/github-action@v1.19.0
       with:
         download_language: zh-CN
         config: crowdin.yml
diff --git a/.github/actions/nightly-release/action.yml b/.github/actions/nightly-release/action.yml
index a36f3e3289b..fe8d525545f 100644
--- a/.github/actions/nightly-release/action.yml
+++ b/.github/actions/nightly-release/action.yml
@@ -30,7 +30,7 @@ runs:
         git config --global user.email "actions@github.com"
         git config --global user.name "GitHub Actions"
       shell: bash
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
       with:
         repository: ${{ inputs.checkout-repo }}
         ref: ${{ inputs.checkout-ref }}
diff --git a/.github/actions/yarn-install/action.yml b/.github/actions/yarn-install/action.yml
index aff639a366f..4148990647f 100644
--- a/.github/actions/yarn-install/action.yml
+++ b/.github/actions/yarn-install/action.yml
@@ -4,7 +4,7 @@ description: Restore node_modules and cache, then run yarn install
 runs:
   using: composite
   steps:
-    - uses: actions/cache@v2
+    - uses: actions/cache@v4
       with:
         path: |
           node_modules
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index afe39e48803..ed13ae18105 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,7 +30,7 @@ jobs:
     if: needs.pre_job.outputs.should_skip != 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/yarn-install
       - run: yarn build vuetify
       - uses: ./.github/actions/upload-artifact
@@ -50,7 +50,7 @@ jobs:
       matrix:
         scopes: ['--scope vuetify --scope @vuetify/api-generator', '--scope vuetifyjs.com']
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/download-artifact
         with:
           name: vuetify-dist
@@ -65,11 +65,11 @@ jobs:
     if: needs.pre_job.outputs.should_skip != 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/yarn-install
       - run: yarn run test:coverage -i
         working-directory: ./packages/vuetify
-      - uses: codecov/codecov-action@v1
+      - uses: codecov/codecov-action@v4
 
   test-cypress:
     name: Test (Cypress)
@@ -77,7 +77,7 @@ jobs:
     if: needs.pre_job.outputs.should_skip != 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/yarn-install
       - run: yarn cy:run --record --parallel --ci-build-id $GITHUB_RUN_ID
         if: ${{ !startswith(github.ref, 'refs/tags/v') && github.repository_owner == 'vuetifyjs' }}
@@ -87,7 +87,7 @@ jobs:
       - run: yarn cy:run
         if: ${{ !startswith(github.ref, 'refs/tags/v') && github.repository_owner != 'vuetifyjs' }}
         working-directory: ./packages/vuetify
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-screenshots
@@ -99,7 +99,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event_name == 'push' && startswith(github.ref, 'refs/tags/v') && github.repository_owner == 'vuetifyjs'
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - uses: ./.github/actions/download-artifact
@@ -125,7 +125,7 @@ jobs:
     if: needs.pre_job.outputs.should_skip != 'true' && github.event_name == 'push' && github.repository_owner == 'vuetifyjs' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/next')
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/download-artifact
         with:
           name: vuetify-dist
@@ -156,7 +156,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event_name == 'push' && github.repository_owner == 'vuetifyjs' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/next')
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/download-artifact
         with:
           name: docs-dist
diff --git a/.github/workflows/crowdin-uploads.yml b/.github/workflows/crowdin-uploads.yml
index 45d851527f9..01e839d9f18 100644
--- a/.github/workflows/crowdin-uploads.yml
+++ b/.github/workflows/crowdin-uploads.yml
@@ -26,10 +26,10 @@ jobs:
     steps:
 
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Upload
-      uses: crowdin/github-action@v1.12.0
+      uses: crowdin/github-action@v1.19.0
       with:
         config: crowdin.yml
         crowdin_branch_name: ${{ env.CROWDIN_BRANCH }}
diff --git a/.github/workflows/nightly-pr.yml b/.github/workflows/nightly-pr.yml
index a66ff7b5631..b55f1652a72 100644
--- a/.github/workflows/nightly-pr.yml
+++ b/.github/workflows/nightly-pr.yml
@@ -12,8 +12,8 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ github.repository_owner == 'vuetifyjs' }}
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/github-script@v6
+      - uses: actions/checkout@v4
+      - uses: actions/github-script@v7
         with:
           script: |
             const pr = await github.rest.pulls.get({
@@ -32,8 +32,8 @@ jobs:
           release-id: pr-${{ github.event.inputs.pr }}.${{ env.SHORT_SHA }}
           npm-tag: pr
           npm-token: ${{ secrets.NPM_TOKEN }}
-      - uses: actions/checkout@v2
-      - uses: actions/github-script@v6
+      - uses: actions/checkout@v4
+      - uses: actions/github-script@v7
         with:
           script: |
             const fullVersion = process.env.FULL_VERSION
diff --git a/.github/workflows/nightly-schedule.yml b/.github/workflows/nightly-schedule.yml
index 1a796988b79..2429f338b08 100644
--- a/.github/workflows/nightly-schedule.yml
+++ b/.github/workflows/nightly-schedule.yml
@@ -25,7 +25,7 @@ jobs:
           - branch: 'v2-dev'
             tag: 'v2-dev'
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           ref: ${{ matrix.branch }}
           fetch-depth: 0
@@ -45,14 +45,14 @@ jobs:
           release-id: ${{ matrix.branch }}.${{ env.RELEASE_ID }}
           npm-tag: ${{ matrix.tag }}
           npm-token: ${{ secrets.NPM_TOKEN }}
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
   percy:
     name: Visual regression tests
     runs-on: ubuntu-latest
     if: ${{ github.repository_owner == 'vuetifyjs' }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           ref: master
           fetch-depth: 0
@@ -73,7 +73,7 @@ jobs:
           PERCY_BRANCH: master
           PERCY_TARGET_BRANCH: master
           PERCY_COMMIT: ${{ env.COMMIT }}
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-screenshots
diff --git a/.github/workflows/triage.yml b/.github/workflows/triage.yml
index 78345fd0f66..6b25c9fe022 100644
--- a/.github/workflows/triage.yml
+++ b/.github/workflows/triage.yml
@@ -7,7 +7,7 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: vuetifyjs/triage-action@master
         with:
           token: ${{ secrets.GITHUB_TOKEN }}

From 5e078604868b22858dabd7877ca56c1e2874fc24 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Thu, 14 Mar 2024 20:09:28 -0700
Subject: [PATCH 24/33] fix(theme): add null check for current dark check
 (#19408)

---
 packages/vuetify/src/composables/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/composables/theme.ts b/packages/vuetify/src/composables/theme.ts
index f9aeca9bd25..a261035cd33 100644
--- a/packages/vuetify/src/composables/theme.ts
+++ b/packages/vuetify/src/composables/theme.ts
@@ -255,7 +255,7 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
   const styles = computed(() => {
     const lines: string[] = []
 
-    if (current.value.dark) {
+    if (current.value?.dark) {
       createCssClass(lines, ':root', ['color-scheme: dark'])
     }
 

From 357f7fa291d6cc9a3d80f5a87b82c08270e3583d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 14 Mar 2024 22:25:35 -0500
Subject: [PATCH 25/33] chore(package.json): update @vuetify/one

---
 packages/docs/package.json | 2 +-
 yarn.lock                  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index 07d0b92fbd1..55f6e00aa60 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -23,7 +23,7 @@
     "@cosmicjs/sdk": "^1.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^1.2.4",
+    "@vuetify/one": "^1.2.5",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 94d493a1a93..6718c16fae2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3949,10 +3949,10 @@
     find-cache-dir "^3.3.2"
     upath "^2.0.1"
 
-"@vuetify/one@^1.2.4":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.2.4.tgz#0cd7756100fe2158fc98bdafef61b91abcbdeb02"
-  integrity sha512-Q9Os2+3RdaVv+oxxF+OdJCk+CH7PWVNHJY83Di7LM/9yr/npnW/YyDpoq1pfyHMzuLkfyl8XuKc13izV1D5fDA==
+"@vuetify/one@^1.2.5":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.3.0.tgz#ca52890cac8eca875f9140a56065abcc25abac0d"
+  integrity sha512-v83jb3TgyvcngXACZl4qqb/3T505TtnMNYIaTivJ/aiD0QN8xsSWRrv5P3ZZe8BTQGzmRBt4DPS5xOV7iIvWYQ==
 
 "@vueuse/head@^1.3.1":
   version "1.3.1"

From 1b01835184f26ef441d06d65f8fa05a1c4d576e6 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 15 Mar 2024 15:34:27 -0500
Subject: [PATCH 26/33] fix(VNavigationDrawer): missing image slot and
 transition

---
 .../VNavigationDrawer/VNavigationDrawer.sass  |  3 +-
 .../VNavigationDrawer/VNavigationDrawer.tsx   | 31 ++++++++++++++++---
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
index 839adea358e..7a9bacbcf5e 100644
--- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
+++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
@@ -70,7 +70,8 @@
   width: 100%
   z-index: -1
 
-  img
+  // TODO: remove in v4
+  img:not(.v-img__img)
     height: $navigation-drawer-img-height
     object-fit: $navigation-drawer-img-object-fit
     width: $navigation-drawer-img-width
diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
index 9cbde45a8b0..346e7a4668c 100644
--- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
+++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
@@ -1,6 +1,10 @@
 // Styles
 import './VNavigationDrawer.sass'
 
+// Components
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
+import { VImg } from '@/components/VImg'
+
 // Composables
 import { useSticky } from './sticky'
 import { useTouch } from './touch'
@@ -249,10 +253,29 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
           >
             { hasImage && (
               <div key="image" class="v-navigation-drawer__img">
-                { slots.image
-                  ? slots.image?.({ image: props.image })
-                  : (<img src={ props.image } alt="" />)
-                }
+                { !slots.image ? (
+                  <VImg
+                    key="image-img"
+                    alt=""
+                    cover
+                    height="inherit"
+                    src={ props.image }
+                  />
+                ) : (
+                  <VDefaultsProvider
+                    key="image-defaults"
+                    disabled={ !props.image }
+                    defaults={{
+                      VImg: {
+                        alt: '',
+                        cover: true,
+                        height: 'inherit',
+                        src: props.image,
+                      },
+                    }}
+                    v-slots:default={ slots.image }
+                  />
+                )}
               </div>
             )}
 

From 756331e642437afbd6f20c533dac23f631572217 Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Sat, 16 Mar 2024 04:28:09 +0700
Subject: [PATCH 27/33] fix(VBreadcrumbs): item types for slots (#19341)

fixes #19339

Co-authored-by: Son Tran <stt@cct-technology.com>
---
 .../src/components/VBreadcrumbs/VBreadcrumbs.tsx       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
index 5ed814505e7..c9af34e5c01 100644
--- a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
+++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
@@ -25,10 +25,12 @@ import type { PropType } from 'vue'
 import type { LinkProps } from '@/composables/router'
 import type { GenericProps } from '@/util'
 
-export type BreadcrumbItem = string | (Partial<LinkProps> & {
+export type InternalBreadcrumbItem = Partial<LinkProps> & {
   title: string
   disabled?: boolean
-})
+}
+
+export type BreadcrumbItem = string | InternalBreadcrumbItem
 
 export const makeVBreadcrumbsProps = propsFactory({
   activeClass: String,
@@ -58,9 +60,9 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
   },
   slots: {
     prepend: never
-    title: { item: T, index: number }
+    title: { item: InternalBreadcrumbItem, index: number }
     divider: { item: T, index: number }
-    item: { item: T, index: number }
+    item: { item: InternalBreadcrumbItem, index: number }
     default: never
   }
 ) => GenericProps<typeof props, typeof slots>>()({

From 32b30cf5653983b01b0cb111288a6a1541a3c26f Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Sat, 16 Mar 2024 04:32:17 +0700
Subject: [PATCH 28/33] fix(VOtpInput): paste string to input number (#19345)

fixes #18931

Co-authored-by: Son Tran <stt@cct-technology.com>
Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../vuetify/src/components/VOtpInput/VOtpInput.tsx  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx b/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx
index 27ab3bec289..28f5ef00933 100644
--- a/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx
+++ b/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx
@@ -100,10 +100,11 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
     function onInput () {
       // The maxlength attribute doesn't work for the number type input, so the text type is used.
       // The following logic simulates the behavior of a number input.
-      if (props.type === 'number' && /[^0-9]/g.test(current.value.value)) {
+      if (isValidNumber(current.value.value)) {
         current.value.value = ''
         return
       }
+
       const array = model.value.slice()
       const value = current.value.value
 
@@ -165,7 +166,11 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
       e.preventDefault()
       e.stopPropagation()
 
-      model.value = (e?.clipboardData?.getData('Text') ?? '').split('')
+      const clipboardText = e?.clipboardData?.getData('Text') ?? ''
+
+      if (!isValidNumber(clipboardText)) return
+
+      model.value = clipboardText.split('')
 
       inputRef.value?.[index].blur()
     }
@@ -186,6 +191,10 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
       focusIndex.value = -1
     }
 
+    function isValidNumber (value: string) {
+      return props.type === 'number' && !isNaN(Number(value))
+    }
+
     provideDefaults({
       VField: {
         color: computed(() => props.color),

From 9a8dd98fb80451a38bedbfa8511bc278c40bd550 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 15 Mar 2024 17:03:48 -0500
Subject: [PATCH 29/33] docs(MadeWithVuetifyGallery): fix pagination

closes #19344
---
 packages/docs/src/components/doc/MadeWithVuetifyGallery.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue b/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue
index be75beb1399..c481c475679 100644
--- a/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue
+++ b/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue
@@ -79,7 +79,7 @@
   const store = useMadeWithVuetifyStore()
 
   const items = computed(() => {
-    return shuffle(store.items)
+    return shuffle(store.items.slice())
   })
 
   function shuffle (array) {

From cc266f40aad476d948be112c164c705be648ce34 Mon Sep 17 00:00:00 2001
From: Rajitha <rajithaeye@gmail.com>
Date: Sat, 16 Mar 2024 03:43:09 +0530
Subject: [PATCH 30/33] fix(VMenu): close when press key enter or space
 (#19368)

fixes #19361

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 packages/vuetify/src/components/VMenu/VMenu.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
index 08bebfa5458..74f643e2015 100644
--- a/packages/vuetify/src/components/VMenu/VMenu.tsx
+++ b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -135,6 +135,9 @@ export const VMenu = genericComponent<OverlaySlots>()({
           isActive.value = false
           overlay.value?.activatorEl?.focus()
         }
+      } else if (['Enter', ' '].includes(e.key) && props.closeOnContentClick) {
+        isActive.value = false
+        parent?.closeParents()
       }
     }
 

From f4055aab2b3e4abe843608e874ab35940bc327ba Mon Sep 17 00:00:00 2001
From: Alex Kunin <alexkunin@gmail.com>
Date: Sat, 16 Mar 2024 00:34:24 +0200
Subject: [PATCH 31/33] fix(VDatePickerMonth): set correct rangeStart/Stop from
 model (#19372)

fixes #19366

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../VDatePicker/VDatePickerMonth.tsx          | 15 +++++++++++----
 .../__tests__/VDatePicker.spec.cy.tsx         | 19 +++++++++++++++++++
 .../src/composables/date/adapters/vuetify.ts  |  2 +-
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx
index 03c31f44a2c..d29d8893202 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx
@@ -55,6 +55,13 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
     const rangeStart = shallowRef()
     const rangeStop = shallowRef()
 
+    if (props.multiple === 'range' && model.value.length > 0) {
+      rangeStart.value = model.value[0]
+      if (model.value.length > 1) {
+        rangeStop.value = model.value[model.value.length - 1]
+      }
+    }
+
     const atMax = computed(() => {
       const max = ['number', 'string'].includes(typeof props.multiple) ? Number(props.multiple) : Infinity
 
@@ -68,15 +75,15 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
         rangeStart.value = _value
         model.value = [rangeStart.value]
       } else if (!rangeStop.value) {
-        if (adapter.isSameDay(value, rangeStart.value)) {
+        if (adapter.isSameDay(_value, rangeStart.value)) {
           rangeStart.value = undefined
           model.value = []
           return
-        } else if (adapter.isBefore(value, rangeStart.value)) {
-          rangeStop.value = rangeStart.value
+        } else if (adapter.isBefore(_value, rangeStart.value)) {
+          rangeStop.value = adapter.endOfDay(rangeStart.value)
           rangeStart.value = _value
         } else {
-          rangeStop.value = _value
+          rangeStop.value = adapter.endOfDay(_value)
         }
 
         const diff = adapter.getDiff(rangeStop.value, rangeStart.value, 'days')
diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx
index 7b68ddc3846..9d328f6133d 100644
--- a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx
+++ b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx
@@ -21,4 +21,23 @@ describe('VDatePicker', () => {
         expect(model.value).to.have.length(11)
       })
   })
+
+  it('selects a range of dates across month boundary', () => {
+    const model = ref<unknown[]>([])
+    cy.mount(() => (
+      <Application>
+        <VDatePicker v-model={ model.value } multiple="range" />
+      </Application>
+    ))
+
+    cy.get('.v-date-picker-controls__month-btn').click()
+    cy.get('.v-date-picker-months__content').contains('Jan').click()
+    cy.get('.v-date-picker-month__day').contains(7).click()
+    cy.get('.v-date-picker-controls__month-btn').click()
+    cy.get('.v-date-picker-months__content').contains('Feb').click()
+    cy.get('.v-date-picker-month__day').contains(7).click()
+      .then(() => {
+        expect(model.value).to.have.length(32)
+      })
+  })
 })
diff --git a/packages/vuetify/src/composables/date/adapters/vuetify.ts b/packages/vuetify/src/composables/date/adapters/vuetify.ts
index 8dd97f14a99..adbc3a0e664 100644
--- a/packages/vuetify/src/composables/date/adapters/vuetify.ts
+++ b/packages/vuetify/src/composables/date/adapters/vuetify.ts
@@ -479,7 +479,7 @@ function setYear (date: Date, year: number) {
 }
 
 function startOfDay (date: Date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0)
 }
 
 function endOfDay (date: Date) {

From b465273955c704ee614089a9f7b694c8991f0419 Mon Sep 17 00:00:00 2001
From: Kevin Brubeck Unhammer <unhammer+dill@mm.st>
Date: Fri, 15 Mar 2024 23:38:37 +0100
Subject: [PATCH 32/33] fix(locale): translate `open` for no.ts (#19380)

---
 packages/vuetify/src/locale/no.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/locale/no.ts b/packages/vuetify/src/locale/no.ts
index 01d33e5de97..9b759347077 100644
--- a/packages/vuetify/src/locale/no.ts
+++ b/packages/vuetify/src/locale/no.ts
@@ -1,6 +1,6 @@
 export default {
   badge: 'Skilt',
-  open: 'Open',
+  open: 'Åpne',
   close: 'Lukk',
   confirmEdit: {
     ok: 'OK',

From a997c424f8660894555804bfcb88761cfead9238 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 16 Mar 2024 00:15:33 -0500
Subject: [PATCH 33/33] chore(package.json): upgrade @vuetify/one

---
 packages/docs/package.json | 2 +-
 yarn.lock                  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index 55f6e00aa60..5a9de24d428 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -23,7 +23,7 @@
     "@cosmicjs/sdk": "^1.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^1.2.5",
+    "@vuetify/one": "^1.3.1",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 6718c16fae2..ecc6bb001a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3949,10 +3949,10 @@
     find-cache-dir "^3.3.2"
     upath "^2.0.1"
 
-"@vuetify/one@^1.2.5":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.3.0.tgz#ca52890cac8eca875f9140a56065abcc25abac0d"
-  integrity sha512-v83jb3TgyvcngXACZl4qqb/3T505TtnMNYIaTivJ/aiD0QN8xsSWRrv5P3ZZe8BTQGzmRBt4DPS5xOV7iIvWYQ==
+"@vuetify/one@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.3.1.tgz#5d924d91a9c57db7791e6be43052ec8cf4a9635b"
+  integrity sha512-uv/l+pCU5JqRoWUkMIJG8vVAqO5uj3omhjcPwettF4aZ62ydxCBmMBxsrnVV2826t0XMPY+k3i7EeOC8+adDpA==
 
 "@vueuse/head@^1.3.1":
   version "1.3.1"