From 8a52ff3246bffa558decf7664d82acfa0e6b45de Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 16 Apr 2024 23:20:07 -0500
Subject: [PATCH 01/39] fix(VNavigationDrawer): element drag area size

fixes #17352
---
 packages/vuetify/src/components/VNavigationDrawer/touch.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VNavigationDrawer/touch.ts b/packages/vuetify/src/components/VNavigationDrawer/touch.ts
index d1c5dd009fc..0ae68af26f4 100644
--- a/packages/vuetify/src/components/VNavigationDrawer/touch.ts
+++ b/packages/vuetify/src/components/VNavigationDrawer/touch.ts
@@ -83,12 +83,12 @@ export function useTouch ({ isActive, isTemporary, width, touchless, position }:
       inElement ||
       (isActive.value && isTemporary.value)
     ) {
-      maybeDragging = true
       start = [touchX, touchY]
 
       offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value)
       dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY)
 
+      maybeDragging = offset.value > -30 && offset.value < 30
       endTouch(e)
       addMovement(e)
     }

From c1e81503f72c4ed1740cab58966ded6549dc11e3 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 17 Apr 2024 09:04:35 -0500
Subject: [PATCH 02/39] chore(touch): increase touch area that triggers drag

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

diff --git a/packages/vuetify/src/components/VNavigationDrawer/touch.ts b/packages/vuetify/src/components/VNavigationDrawer/touch.ts
index 0ae68af26f4..36e5f57af5c 100644
--- a/packages/vuetify/src/components/VNavigationDrawer/touch.ts
+++ b/packages/vuetify/src/components/VNavigationDrawer/touch.ts
@@ -88,7 +88,7 @@ export function useTouch ({ isActive, isTemporary, width, touchless, position }:
       offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value)
       dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY)
 
-      maybeDragging = offset.value > -30 && offset.value < 30
+      maybeDragging = offset.value > -100 && offset.value < 100
       endTouch(e)
       addMovement(e)
     }

From d6a500be40baaa44d58c151fb898cde8ab875e1a Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 18 Apr 2024 00:40:54 +1000
Subject: [PATCH 03/39] fix(VCombobox): don't delete chips on backspace until
 search is empty

fixes #19626
---
 .../VAutocomplete/VAutocomplete.tsx           | 21 ++++++++----------
 .../src/components/VCombobox/VCombobox.tsx    | 22 +++++++++----------
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index e676a30a39e..81d862e4185 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -250,21 +250,18 @@ export const VAutocomplete = genericComponent<new <
         if (
           !props.multiple &&
           hasSelectionSlot.value &&
-          model.value.length > 0
+          model.value.length > 0 &&
+          !search.value
         ) return select(model.value[0], false)
 
-        if (selectionIndex.value < 0) {
-          if (e.key === 'Backspace' && !search.value) {
-            selectionIndex.value = length - 1
-          }
+        if (~selectionIndex.value) {
+          const originalSelectionIndex = selectionIndex.value
+          select(model.value[selectionIndex.value], false)
 
-          return
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex
+        } else if (e.key === 'Backspace' && !search.value) {
+          selectionIndex.value = length - 1
         }
-
-        const originalSelectionIndex = selectionIndex.value
-        select(model.value[selectionIndex.value], false)
-
-        selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex
       }
 
       if (!props.multiple) return
@@ -324,7 +321,7 @@ export const VAutocomplete = genericComponent<new <
       listHasFocus.value = false
     }
     function onUpdateModelValue (v: any) {
-      if (v == null || (v === '' && !props.multiple)) model.value = []
+      if (v == null || (v === '' && !props.multiple && !hasSelectionSlot.value)) model.value = []
     }
 
     const isSelecting = shallowRef(false)
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index ac883135119..205450b5305 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -311,20 +311,18 @@ export const VCombobox = genericComponent<new <
         if (
           !props.multiple &&
           hasSelectionSlot.value &&
-          model.value.length > 0
+          model.value.length > 0 &&
+          !search.value
         ) return select(model.value[0], false)
 
-        if (selectionIndex.value < 0) {
-          if (e.key === 'Backspace' && !search.value) {
-            selectionIndex.value = length - 1
-          }
-          return
-        }
+        if (~selectionIndex.value) {
+          const originalSelectionIndex = selectionIndex.value
+          select(model.value[selectionIndex.value], false)
 
-        const originalSelectionIndex = selectionIndex.value
-        select(model.value[selectionIndex.value], false)
-
-        selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex
+        } else if (e.key === 'Backspace' && !search.value) {
+          selectionIndex.value = length - 1
+        }
       }
 
       if (!props.multiple) return
@@ -405,7 +403,7 @@ export const VCombobox = genericComponent<new <
       listHasFocus.value = false
     }
     function onUpdateModelValue (v: any) {
-      if (v == null || (v === '' && !props.multiple)) model.value = []
+      if (v == null || (v === '' && !props.multiple && !hasSelectionSlot.value)) model.value = []
     }
 
     watch(isFocused, (val, oldVal) => {

From bb486ae9b6ea04bc0bc6cce962d7f733b13b833a Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 17 Apr 2024 09:42:22 -0500
Subject: [PATCH 04/39] fix(VNavigationDrawer): manually apply dragging styles
 to avoid rerender

dragStyles causes rerendering of internal items when dragging
---
 .../VNavigationDrawer/VNavigationDrawer.tsx   |  4 +--
 .../src/components/VNavigationDrawer/touch.ts | 28 +++++++++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
index 346e7a4668c..99eda661bc9 100644
--- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
+++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
@@ -155,7 +155,8 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
       isActive.value = props.permanent || !mobile.value
     })
 
-    const { isDragging, dragProgress, dragStyles } = useTouch({
+    const { isDragging, dragProgress } = useTouch({
+      el: rootEl,
       isActive,
       isTemporary,
       width,
@@ -243,7 +244,6 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
             style={[
               backgroundColorStyles.value,
               layoutItemStyles.value,
-              dragStyles.value,
               ssrBootStyles.value,
               stickyStyles.value,
               props.style,
diff --git a/packages/vuetify/src/components/VNavigationDrawer/touch.ts b/packages/vuetify/src/components/VNavigationDrawer/touch.ts
index 36e5f57af5c..1f21ecfed84 100644
--- a/packages/vuetify/src/components/VNavigationDrawer/touch.ts
+++ b/packages/vuetify/src/components/VNavigationDrawer/touch.ts
@@ -1,13 +1,22 @@
 // Composables
+import { useToggleScope } from '@/composables/toggleScope'
 import { useVelocity } from '@/composables/touch'
 
 // Utilities
-import { computed, onBeforeUnmount, onMounted, shallowRef } from 'vue'
+import { computed, onBeforeUnmount, onMounted, onScopeDispose, shallowRef, watchEffect } from 'vue'
 
 // Types
 import type { Ref } from 'vue'
 
-export function useTouch ({ isActive, isTemporary, width, touchless, position }: {
+export function useTouch ({
+  el,
+  isActive,
+  isTemporary,
+  width,
+  touchless,
+  position,
+}: {
+  el: Ref<HTMLElement | undefined>
   isActive: Ref<boolean>
   isTemporary: Ref<boolean>
   width: Ref<number>
@@ -174,6 +183,21 @@ export function useTouch ({ isActive, isTemporary, width, touchless, position }:
     } : undefined
   })
 
+  useToggleScope(isDragging, () => {
+    const transform = el.value?.style.transform ?? null
+    const transition = el.value?.style.transition ?? null
+
+    watchEffect(() => {
+      el.value?.style.setProperty('transform', dragStyles.value?.transform || 'none')
+      el.value?.style.setProperty('transition', dragStyles.value?.transition || null)
+    })
+
+    onScopeDispose(() => {
+      el.value?.style.setProperty('transform', transform)
+      el.value?.style.setProperty('transition', transition)
+    })
+  })
+
   return {
     isDragging,
     dragProgress,

From 118507f3784513670648dffc2cae845fb577292b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 17 Apr 2024 09:49:24 -0500
Subject: [PATCH 05/39] chore(VNavigationDrawer): adjust touch drag size

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

diff --git a/packages/vuetify/src/components/VNavigationDrawer/touch.ts b/packages/vuetify/src/components/VNavigationDrawer/touch.ts
index 1f21ecfed84..f7f2a4e66c7 100644
--- a/packages/vuetify/src/components/VNavigationDrawer/touch.ts
+++ b/packages/vuetify/src/components/VNavigationDrawer/touch.ts
@@ -97,7 +97,7 @@ export function useTouch ({
       offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value)
       dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY)
 
-      maybeDragging = offset.value > -100 && offset.value < 100
+      maybeDragging = offset.value > -20 && offset.value < 80
       endTouch(e)
       addMovement(e)
     }

From 10864261bf5a07c79fb0a67c4f1e5503fa859edd Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 18 Apr 2024 01:08:43 +1000
Subject: [PATCH 06/39] fix(typography): use relative line heights (#19628)

---
 .../src/styles/settings/_variables.scss       | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss
index e29c25c62dd..e91ae1cb60c 100644
--- a/packages/vuetify/src/styles/settings/_variables.scss
+++ b/packages/vuetify/src/styles/settings/_variables.scss
@@ -180,7 +180,7 @@ $typography: map-deep-merge(
     'h1': (
       'size': 6rem,
       'weight': 300,
-      'line-height': 6rem,
+      'line-height': 1,
       'letter-spacing': -.015625em,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -188,7 +188,7 @@ $typography: map-deep-merge(
     'h2': (
       'size': 3.75rem,
       'weight': 300,
-      'line-height': 3.75rem,
+      'line-height': 1,
       'letter-spacing': -.0083333333em,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -196,7 +196,7 @@ $typography: map-deep-merge(
     'h3': (
       'size': 3rem,
       'weight': 400,
-      'line-height': 3.125rem,
+      'line-height': 1.05,
       'letter-spacing': normal,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -204,7 +204,7 @@ $typography: map-deep-merge(
     'h4': (
       'size': 2.125rem,
       'weight': 400,
-      'line-height': 2.5rem,
+      'line-height': 1.175,
       'letter-spacing': .0073529412em,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -212,7 +212,7 @@ $typography: map-deep-merge(
     'h5': (
       'size': 1.5rem,
       'weight': 400,
-      'line-height': 2rem,
+      'line-height': 1.333,
       'letter-spacing': normal,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -220,7 +220,7 @@ $typography: map-deep-merge(
     'h6': (
       'size': 1.25rem,
       'weight': 500,
-      'line-height': 2rem,
+      'line-height': 1.6,
       'letter-spacing': .0125em,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -228,7 +228,7 @@ $typography: map-deep-merge(
     'subtitle-1': (
       'size': 1rem,
       'weight': normal,
-      'line-height': 1.75rem,
+      'line-height': 1.75,
       'letter-spacing': .009375em,
       'font-family': $body-font-family,
       'text-transform': none
@@ -236,7 +236,7 @@ $typography: map-deep-merge(
     'subtitle-2': (
       'size': .875rem,
       'weight': 500,
-      'line-height': 1.375rem,
+      'line-height': 1.6,
       'letter-spacing': .0071428571em,
       'font-family': $body-font-family,
       'text-transform': none
@@ -244,7 +244,7 @@ $typography: map-deep-merge(
     'body-1': (
       'size': 1rem,
       'weight': 400,
-      'line-height': 1.5rem,
+      'line-height': 1.5,
       'letter-spacing': .03125em,
       'font-family': $body-font-family,
       'text-transform': none
@@ -252,7 +252,7 @@ $typography: map-deep-merge(
     'body-2': (
       'size': .875rem,
       'weight': 400,
-      'line-height': 1.25rem,
+      'line-height': 1.425,
       'letter-spacing': .0178571429em,
       'font-family': $body-font-family,
       'text-transform': none
@@ -260,7 +260,7 @@ $typography: map-deep-merge(
     'button': (
       'size': .875rem,
       'weight': 500,
-      'line-height': 2.25rem,
+      'line-height': 2.6,
       'letter-spacing': .0892857143em,
       'font-family': $body-font-family,
       'text-transform': uppercase
@@ -268,7 +268,7 @@ $typography: map-deep-merge(
     'caption': (
       'size': .75rem,
       'weight': 400,
-      'line-height': 1.25rem,
+      'line-height': 1.667,
       'letter-spacing': .0333333333em,
       'font-family': $body-font-family,
       'text-transform': none
@@ -276,7 +276,7 @@ $typography: map-deep-merge(
     'overline': (
       'size': .75rem,
       'weight': 500,
-      'line-height': 2rem,
+      'line-height': 2.667,
       'letter-spacing': .1666666667em,
       'font-family': $body-font-family,
       'text-transform': uppercase

From bc53bd36df0ec4932b7d3623642d3d1044f3dd0b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 17 Apr 2024 10:39:32 -0500
Subject: [PATCH 07/39] docs(VNavigationDrawer); fix bottom-drawer example

---
 .../v-navigation-drawer/prop-bottom-drawer.vue         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue b/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue
index 38a2a43af7d..6043ddcd14e 100644
--- a/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue
+++ b/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue
@@ -1,8 +1,6 @@
 <template>
   <v-card>
     <v-layout>
-      <!-- <v-system-bar color="deep-purple darken-3"></v-system-bar> -->
-
       <v-app-bar
         color="primary"
         prominent
@@ -13,16 +11,18 @@
 
         <v-spacer></v-spacer>
 
-        <v-btn icon="mdi-magnify" variant="text"></v-btn>
+        <template v-if="$vuetify.display.mdAndUp">
+          <v-btn icon="mdi-magnify" variant="text"></v-btn>
 
-        <v-btn icon="mdi-filter" variant="text"></v-btn>
+          <v-btn icon="mdi-filter" variant="text"></v-btn>
+        </template>
 
         <v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
       </v-app-bar>
 
       <v-navigation-drawer
         v-model="drawer"
-        location="bottom"
+        :location="$vuetify.display.mobile ? 'bottom' : undefined"
         temporary
       >
         <v-list

From 5d7cfe9997152afc6609530c431ae4887d05217b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 17 Apr 2024 12:38:58 -0500
Subject: [PATCH 08/39] 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 8451b9792ec..01c34d578e0 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.7.0",
+    "@vuetify/one": "^1.7.1",
     "algoliasearch": "^4.23.2",
     "fflate": "^0.8.2",
     "isomorphic-fetch": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 8ab0eec4b9e..aecda1e8100 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4108,10 +4108,10 @@
   dependencies:
     upath "^2.0.1"
 
-"@vuetify/one@^1.7.0":
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.7.0.tgz#0170d6f0178c1525a02b4b1d732afc87a706c01d"
-  integrity sha512-VQhbEPG45Y6+sHuMy15kINOmDjCsMD9zhjqF1kZAY93IadQNUQk18pQ8hW4EprXsTebLXEuzdcqGSt8Hew3qpg==
+"@vuetify/one@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.7.1.tgz#d37a8f84592ac7f9844af94c55309a6db2f906e7"
+  integrity sha512-6YqqYiF3IZTnskc5VBhFs8St2kbo4vH0NwD2zzWLCrtJUmHxYdOytX82bM1ZYiBTdmIZ0tB4w3IW5qblENfivw==
 
 "@vueuse/head@^1.3.1":
   version "1.3.1"

From afee26200e937659d69db68c29a5d8d40b9ee7cd Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 17 Apr 2024 19:30:18 -0500
Subject: [PATCH 09/39] 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 01c34d578e0..203bc6fae37 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.7.1",
+    "@vuetify/one": "^1.7.2",
     "algoliasearch": "^4.23.2",
     "fflate": "^0.8.2",
     "isomorphic-fetch": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index aecda1e8100..bbae562cc96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4108,10 +4108,10 @@
   dependencies:
     upath "^2.0.1"
 
-"@vuetify/one@^1.7.1":
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.7.1.tgz#d37a8f84592ac7f9844af94c55309a6db2f906e7"
-  integrity sha512-6YqqYiF3IZTnskc5VBhFs8St2kbo4vH0NwD2zzWLCrtJUmHxYdOytX82bM1ZYiBTdmIZ0tB4w3IW5qblENfivw==
+"@vuetify/one@^1.7.2":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.7.2.tgz#fb66fe7319ca100d3ce61362e8a8d677bd58664e"
+  integrity sha512-UcvihL55oDtWiJpzfIjuyGmjpTqyr4RBH1y69bin/kZDVzuQCm+Sni8D7eUFpTsQqyOzNzxAkSkRZB+wP4Z5og==
 
 "@vueuse/head@^1.3.1":
   version "1.3.1"

From d65d5865af5e13d45f5f9c00b380504ad44f5144 Mon Sep 17 00:00:00 2001
From: Yuchao Wu <yuchao.sydneyuni@gmail.com>
Date: Thu, 18 Apr 2024 23:29:32 +1000
Subject: [PATCH 10/39] fix(VSelect): auto scroll to the last selected item
 when open menu

fixes #19635
---
 packages/vuetify/src/components/VSelect/VSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index 5994891febf..d198eb21003 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -304,7 +304,7 @@ export const VSelect = genericComponent<new <
 
     watch([menu, model], () => {
       if (!props.hideSelected && menu.value && model.value.length) {
-        const index = displayItems.value.findIndex(
+        const index = displayItems.value.findLastIndex(
           item => model.value.some(s => props.valueComparator(s.value, item.value))
         )
         IN_BROWSER && window.requestAnimationFrame(() => {

From f7a871deb26ca187c996ed544fe1ef9bffb36313 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 19 Apr 2024 00:56:33 +1000
Subject: [PATCH 11/39] chore(VTimePicker): fix displayedValue prop definition

api-generator doesn't like props with no type, for
any just use null instead of only setting a default value
---
 packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
index 57f29b7a8d8..5b05d53e6c3 100644
--- a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
@@ -21,9 +21,7 @@ export const makeVTimePickerClockProps = propsFactory({
   ampm: Boolean,
   color: String,
   disabled: Boolean,
-  displayedValue: {
-    default: null,
-  },
+  displayedValue: null,
   double: Boolean,
   format: {
     type: Function,

From 674db98ea9727160151325941da68ab971832895 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 18 Apr 2024 20:16:07 -0500
Subject: [PATCH 12/39] fix(VFab): apply position absolute to fab container

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

diff --git a/packages/vuetify/src/labs/VFab/VFab.sass b/packages/vuetify/src/labs/VFab/VFab.sass
index 21c9ec2f305..e86914ea9e5 100644
--- a/packages/vuetify/src/labs/VFab/VFab.sass
+++ b/packages/vuetify/src/labs/VFab/VFab.sass
@@ -52,6 +52,7 @@
 .v-fab__container
   align-self: center
   display: inline-flex
+  position: absolute
   vertical-align: middle
 
   .v-fab--app &

From 7d2991c0d194dfe517379a92a6028f20db5ec964 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 19 Apr 2024 15:08:29 +1000
Subject: [PATCH 13/39] fix(VSelect): don't set scroll position on model change

fixes #19635
closes #19642

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

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index d198eb21003..449ad3fed2f 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -250,6 +250,10 @@ export const VSelect = genericComponent<new <
       const item = items.value.find(item => item.title.toLowerCase().startsWith(keyboardLookupPrefix))
       if (item !== undefined) {
         model.value = [item]
+        const index = displayItems.value.indexOf(item)
+        IN_BROWSER && window.requestAnimationFrame(() => {
+          index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index)
+        })
       }
     }
 
@@ -302,9 +306,9 @@ export const VSelect = genericComponent<new <
       }
     }
 
-    watch([menu, model], () => {
+    watch(menu, () => {
       if (!props.hideSelected && menu.value && model.value.length) {
-        const index = displayItems.value.findLastIndex(
+        const index = displayItems.value.findIndex(
           item => model.value.some(s => props.valueComparator(s.value, item.value))
         )
         IN_BROWSER && window.requestAnimationFrame(() => {

From f0f0fa0b5cf98dc0d6811c68322a23cf73d5b0bd Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 19 Apr 2024 17:25:03 +1000
Subject: [PATCH 14/39] fix(typography): preserve property order when
 unwrapping $typography

---
 packages/vuetify/src/styles/settings/_variables.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss
index e91ae1cb60c..feead9ecaaa 100644
--- a/packages/vuetify/src/styles/settings/_variables.scss
+++ b/packages/vuetify/src/styles/settings/_variables.scss
@@ -289,7 +289,14 @@ $flat-typography: () !default;
 @each $type, $values in $typography {
   $flat-typography: map-deep-merge(
     $flat-typography,
-    (#{$type}: map.values($values))
+    (#{$type}: (
+      map.get($values, 'size'),
+      map.get($values, 'weight'),
+      map.get($values, 'line-height'),
+      map.get($values, 'letter-spacing'),
+      map.get($values, 'font-family'),
+      map.get($values, 'text-transform'),
+    ))
   );
 }
 

From b9a7d69e5d1194b23a94e748f293a8eb7293f472 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 20 Apr 2024 14:41:49 -0500
Subject: [PATCH 15/39] fix(VSnackbar): support custom transition

fixes #15474
---
 .../src/components/VSnackbar/VSnackbar.sass   | 21 ++++++++++++++++---
 .../src/components/VSnackbar/VSnackbar.tsx    | 15 +++++++++----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass
index bc021f39018..e7ea46cdee2 100644
--- a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass
+++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass
@@ -8,9 +8,6 @@
   margin: $snackbar-wrapper-margin
   margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset))
 
-  &:not(.v-snackbar--centered):not(.v-snackbar--top)
-    align-items: flex-end
-
   &__wrapper
     align-items: center
     display: flex
@@ -67,6 +64,24 @@
       align-self: flex-end
       margin-bottom: $snackbar-vertical-action-margin-bottom
 
+  &--center
+    align-items: center
+    justify-content: center
+
+  &--top
+    align-items: flex-start
+
+  &--bottom
+    align-items: flex-end
+
+  &--left,
+  &--start
+    justify-content: flex-start
+
+  &--right,
+  &--end
+    justify-content: flex-end
+
 .v-snackbar-transition
   &-enter-active,
   &-leave-active
diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
index 242232da9e8..229531c91f8 100644
--- a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
+++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
@@ -9,7 +9,7 @@ import { VProgressLinear } from '@/components/VProgressLinear'
 
 // Composables
 import { forwardRefs } from '@/composables/forwardRefs'
-import { makeLocationProps, useLocation } from '@/composables/location'
+import { makeLocationProps } from '@/composables/location'
 import { makePositionProps, usePosition } from '@/composables/position'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
@@ -18,7 +18,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'
 
 // Utilities
-import { mergeProps, nextTick, onMounted, onScopeDispose, ref, shallowRef, watch } from 'vue'
+import { computed, mergeProps, nextTick, onMounted, onScopeDispose, ref, shallowRef, watch } from 'vue'
 import { genericComponent, omit, propsFactory, refElement, useRender } from '@/util'
 
 type VSnackbarSlots = {
@@ -95,7 +95,6 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
 
   setup (props, { slots }) {
     const isActive = useProxiedModel(props, 'modelValue')
-    const { locationStyles } = useLocation(props)
     const { positionClasses } = usePosition(props)
     const { scopeId } = useScopeId()
     const { themeClasses } = provideTheme(props)
@@ -146,6 +145,14 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
       startTimeout()
     }
 
+    const locationClasses = computed(() => {
+      return props.location.split(' ').reduce((acc, loc) => {
+        acc[`v-snackbar--${loc}`] = true
+
+        return acc
+      }, {} as Record<string, any>)
+    })
+
     useRender(() => {
       const overlayProps = VOverlay.filterProps(props)
       const hasContent = !!(slots.default || slots.text || props.text)
@@ -161,6 +168,7 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
               'v-snackbar--timer': !!props.timer,
               'v-snackbar--vertical': props.vertical,
             },
+            locationClasses.value,
             positionClasses.value,
             props.class,
           ]}
@@ -176,7 +184,6 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
               variantClasses.value,
             ],
             style: [
-              locationStyles.value,
               colorStyles.value,
             ],
             onPointerenter,

From c74d0c98828f78c219ef69cbc488821c14376c4e Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Sun, 21 Apr 2024 14:39:30 +1000
Subject: [PATCH 16/39] feat(VSnackbarQueue): create new component (#19629)

closes #2384

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 packages/docs/components.d.ts                 |   1 -
 .../docs/src/components/app/SnackbarQueue.vue |  47 -----
 packages/docs/src/data/nav.json               |   4 +
 .../src/examples/v-snackbar-queue/usage.vue   |  74 ++++++++
 packages/docs/src/layouts/default.vue         |   2 -
 packages/docs/src/layouts/home.vue            |   2 -
 packages/docs/src/layouts/user.vue            |   2 -
 .../src/pages/en/components/snackbar-queue.md |  38 ++++
 packages/docs/src/stores/app.ts               |  13 --
 .../labs/VSnackbarQueue/VSnackbarQueue.tsx    | 165 ++++++++++++++++++
 .../vuetify/src/labs/VSnackbarQueue/index.ts  |   1 +
 packages/vuetify/src/labs/components.ts       |   1 +
 packages/vuetify/src/locale/af.ts             |   1 +
 packages/vuetify/src/locale/ar.ts             |   1 +
 packages/vuetify/src/locale/az.ts             |   1 +
 packages/vuetify/src/locale/bg.ts             |   1 +
 packages/vuetify/src/locale/ca.ts             |   1 +
 packages/vuetify/src/locale/ckb.ts            |   1 +
 packages/vuetify/src/locale/cs.ts             |   1 +
 packages/vuetify/src/locale/da.ts             |   1 +
 packages/vuetify/src/locale/de.ts             |   1 +
 packages/vuetify/src/locale/el.ts             |   1 +
 packages/vuetify/src/locale/en.ts             |   1 +
 packages/vuetify/src/locale/es.ts             |   1 +
 packages/vuetify/src/locale/et.ts             |   1 +
 packages/vuetify/src/locale/fa.ts             |   1 +
 packages/vuetify/src/locale/fi.ts             |   1 +
 packages/vuetify/src/locale/fr.ts             |   1 +
 packages/vuetify/src/locale/he.ts             |   1 +
 packages/vuetify/src/locale/hr.ts             |   1 +
 packages/vuetify/src/locale/hu.ts             |   1 +
 packages/vuetify/src/locale/id.ts             |   1 +
 packages/vuetify/src/locale/it.ts             |   1 +
 packages/vuetify/src/locale/ja.ts             |   1 +
 packages/vuetify/src/locale/km.ts             |   1 +
 packages/vuetify/src/locale/ko.ts             |   1 +
 packages/vuetify/src/locale/lt.ts             |   1 +
 packages/vuetify/src/locale/lv.ts             |   1 +
 packages/vuetify/src/locale/nl.ts             |   1 +
 packages/vuetify/src/locale/no.ts             |   1 +
 packages/vuetify/src/locale/pl.ts             |   1 +
 packages/vuetify/src/locale/pt.ts             |   1 +
 packages/vuetify/src/locale/ro.ts             |   1 +
 packages/vuetify/src/locale/ru.ts             |   1 +
 packages/vuetify/src/locale/sk.ts             |   1 +
 packages/vuetify/src/locale/sl.ts             |   1 +
 packages/vuetify/src/locale/sr-Cyrl.ts        |   1 +
 packages/vuetify/src/locale/sr-Latn.ts        |   1 +
 packages/vuetify/src/locale/sv.ts             |   1 +
 packages/vuetify/src/locale/th.ts             |   1 +
 packages/vuetify/src/locale/tr.ts             |   1 +
 packages/vuetify/src/locale/uk.ts             |   1 +
 packages/vuetify/src/locale/vi.ts             |   1 +
 packages/vuetify/src/locale/zh-Hans.ts        |   1 +
 packages/vuetify/src/locale/zh-Hant.ts        |   1 +
 55 files changed, 326 insertions(+), 67 deletions(-)
 delete mode 100644 packages/docs/src/components/app/SnackbarQueue.vue
 create mode 100644 packages/docs/src/examples/v-snackbar-queue/usage.vue
 create mode 100644 packages/docs/src/pages/en/components/snackbar-queue.md
 create mode 100644 packages/vuetify/src/labs/VSnackbarQueue/VSnackbarQueue.tsx
 create mode 100644 packages/vuetify/src/labs/VSnackbarQueue/index.ts

diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts
index c53f1629ae3..abf04edb7ee 100644
--- a/packages/docs/components.d.ts
+++ b/packages/docs/components.d.ts
@@ -80,7 +80,6 @@ declare module 'vue' {
     AppSettingsPerksOptions: typeof import('./src/components/app/settings/PerksOptions.vue')['default']
     AppSettingsSettingsHeader: typeof import('./src/components/app/settings/SettingsHeader.vue')['default']
     AppSheet: typeof import('./src/components/app/Sheet.vue')['default']
-    AppSnackbarQueue: typeof import('./src/components/app/SnackbarQueue.vue')['default']
     AppTable: typeof import('./src/components/app/Table.vue')['default']
     AppTextField: typeof import('./src/components/app/TextField.vue')['default']
     AppTitle: typeof import('./src/components/app/Title.vue')['default']
diff --git a/packages/docs/src/components/app/SnackbarQueue.vue b/packages/docs/src/components/app/SnackbarQueue.vue
deleted file mode 100644
index 94558df38d0..00000000000
--- a/packages/docs/src/components/app/SnackbarQueue.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <v-snackbar
-    v-if="isVisible && current"
-    v-model="isActive"
-    :color="current.color"
-    :timeout="current.timeout"
-    timer
-    @after-leave="onAfterLeave"
-  >
-    {{ current.message }}
-  </v-snackbar>
-</template>
-
-<script setup lang="ts">
-  // Types
-  import type { Notification } from '@/stores/app'
-
-  const store = useAppStore()
-  const isActive = ref(false)
-  const isVisible = ref(false)
-  const current = shallowRef<Notification>()
-
-  watch(() => store.notifications.length, (val, oldVal) => {
-    if (!isVisible.value && val > oldVal) {
-      showNext()
-    }
-  })
-  watch(isActive, val => {
-    if (val) isVisible.value = true
-  })
-
-  function onAfterLeave () {
-    if (store.notifications.length) {
-      showNext()
-    } else {
-      current.value = undefined
-      isVisible.value = false
-    }
-  }
-  function showNext () {
-    current.value = store.notifications[0]
-    store.notifications.splice(0, 1)
-    nextTick(() => {
-      isActive.value = true
-    })
-  }
-</script>
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index 0a0a3e0a0c0..b48491f25fc 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -240,6 +240,10 @@
         "title": "number-inputs",
         "subfolder": "components"
       },
+      {
+        "title": "snackbar-queue",
+        "subfolder": "components"
+      },
       {
         "title": "sparklines",
         "subfolder": "components"
diff --git a/packages/docs/src/examples/v-snackbar-queue/usage.vue b/packages/docs/src/examples/v-snackbar-queue/usage.vue
new file mode 100644
index 00000000000..0f911b1479e
--- /dev/null
+++ b/packages/docs/src/examples/v-snackbar-queue/usage.vue
@@ -0,0 +1,74 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <div>
+      <v-text-field
+        v-model="text"
+        label="Queue a message"
+        hide-details
+        @keydown.enter="onClick"
+      >
+        <template v-slot:append-inner>
+          <v-btn
+            :disabled="!text"
+            append-icon="mdi-arrow-right"
+            text="Queue"
+            flat
+            slim
+            @click="onClick"
+          ></v-btn>
+        </template>
+      </v-text-field>
+
+      <v-snackbar-queue v-model="queue" :color="color" :timeout="timeout"></v-snackbar-queue>
+    </div>
+
+    <template v-slot:configuration>
+      <v-select
+        v-model="color"
+        :items="['primary', 'secondary', 'success', 'info', 'warning', 'error']"
+        label="Color"
+        clearable
+      ></v-select>
+
+      <v-number-input v-model="timeout" min="-1"></v-number-input>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = 'v-snackbar-queue'
+  const model = ref('default')
+  const options = []
+  const color = shallowRef()
+  const timeout = shallowRef(5000)
+  const queue = ref([])
+  const text = shallowRef('')
+
+  function onClick () {
+    queue.value.push({
+      text: text.value,
+      timeout: timeout.value,
+      color: color.value,
+    })
+  }
+
+  const props = computed(() => {
+    return {
+      color: color.value,
+      timeout: timeout.value !== 5000 ? timeout.value : undefined,
+    }
+  })
+
+  const slots = computed(() => {
+    return ''
+  })
+
+  const code = computed(() => {
+    return `<v-snackbar-queue${propsToString(props.value)}>${slots.value}</v-snackbar-queue>`
+  })
+</script>
diff --git a/packages/docs/src/layouts/default.vue b/packages/docs/src/layouts/default.vue
index 14175b6f4f0..50f5540a07c 100644
--- a/packages/docs/src/layouts/default.vue
+++ b/packages/docs/src/layouts/default.vue
@@ -12,8 +12,6 @@
 
     <AppBackToTop />
 
-    <AppSnackbarQueue />
-
     <v-main>
       <slot>
         <v-container
diff --git a/packages/docs/src/layouts/home.vue b/packages/docs/src/layouts/home.vue
index f131c13f404..9eaa631cc2f 100644
--- a/packages/docs/src/layouts/home.vue
+++ b/packages/docs/src/layouts/home.vue
@@ -6,8 +6,6 @@
 
     <AppBarBar />
 
-    <AppSnackbarQueue />
-
     <v-main class="text-center font-weight-light">
       <router-view />
     </v-main>
diff --git a/packages/docs/src/layouts/user.vue b/packages/docs/src/layouts/user.vue
index b95a41e725f..d4034c8e830 100644
--- a/packages/docs/src/layouts/user.vue
+++ b/packages/docs/src/layouts/user.vue
@@ -8,8 +8,6 @@
 
     <AppDrawerDrawer />
 
-    <AppSnackbarQueue />
-
     <v-main>
       <router-view v-slot="{ Component }">
         <v-fade-transition hide-on-leave>
diff --git a/packages/docs/src/pages/en/components/snackbar-queue.md b/packages/docs/src/pages/en/components/snackbar-queue.md
new file mode 100644
index 00000000000..bdbd6c8af12
--- /dev/null
+++ b/packages/docs/src/pages/en/components/snackbar-queue.md
@@ -0,0 +1,38 @@
+---
+emphasized: true
+meta:
+  nav: Snackbar Queue
+  title: Snackbar Queue component
+  description: test
+  keywords: test
+related:
+  - /components/buttons/
+  - /components/snackbars/
+  - /components/defaults-providers/
+features:
+  github: /labs/VSnackbarQueue/
+  label: 'C: VSnackbarQueue'
+  report: true
+  spec: https://m2.material.io/components/snackbars
+---
+
+# Snackbar Queue
+
+The `v-snackbar-queue` component is used to queue up multiple snackbar messages to be displayed to the user. Snackbars support positioning, removal delay, and callbacks.
+
+<PageFeatures />
+
+## Usage
+
+<ExamplesUsage name="v-snackbar-queue" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-snackbar-queue](/api/v-snackbar-queue/) | Primary Component |
+| [v-snackbar](/api/v-snackbar/) | The actual Snackbar Component |
+
+<ApiInline hide-links />
diff --git a/packages/docs/src/stores/app.ts b/packages/docs/src/stores/app.ts
index 881f527b8b0..4b431132aae 100644
--- a/packages/docs/src/stores/app.ts
+++ b/packages/docs/src/stores/app.ts
@@ -7,12 +7,6 @@ export type Category = {
   color: string
 }
 
-export type Notification = {
-  message: string
-  timeout?: number
-  color?: string
-}
-
 export type RootState = {
   apiSearch: string
   drawer: boolean | null
@@ -21,7 +15,6 @@ export type RootState = {
   items: NavItem[]
   pages: string[]
   settings: boolean
-  notifications: Notification[]
   categories: Record<string, Category>
 }
 
@@ -44,7 +37,6 @@ export const useAppStore = defineStore({
     items: Array.from(data),
     pages: getPages(data as NavItem[]),
     settings: false,
-    notifications: [],
     categories: {
       api: {
         icon: 'mdi-flask-outline',
@@ -92,11 +84,6 @@ export const useAppStore = defineStore({
       },
     },
   } as RootState),
-  actions: {
-    snackbar (message: string, options: Partial<Notification> = {}) {
-      this.notifications.push({ message, ...options })
-    },
-  },
 })
 
 function getPage (item: NavItem, parent = ''): string[] {
diff --git a/packages/vuetify/src/labs/VSnackbarQueue/VSnackbarQueue.tsx b/packages/vuetify/src/labs/VSnackbarQueue/VSnackbarQueue.tsx
new file mode 100644
index 00000000000..f6c3c39d4be
--- /dev/null
+++ b/packages/vuetify/src/labs/VSnackbarQueue/VSnackbarQueue.tsx
@@ -0,0 +1,165 @@
+// Components
+import { VBtn } from '@/components/VBtn'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
+import { makeVSnackbarProps, VSnackbar } from '@/components/VSnackbar/VSnackbar'
+
+// Composables
+import { useLocale } from '@/composables/locale'
+
+// Utilities
+import { computed, nextTick, shallowRef, watch } from 'vue'
+import { genericComponent, omit, propsFactory, useRender } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+import type { GenericProps } from '@/util'
+
+export type VSnackbarQueueSlots<T extends string | SnackbarMessage> = {
+  default: { item: T }
+  text: { item: T }
+  actions: {
+    item: T
+    props: {
+      onClick: () => void
+    }
+  }
+}
+
+export type SnackbarMessage = Omit<
+  VSnackbar['$props'],
+  | '$children'
+  | 'modelValue'
+  | 'onUpdate:modelValue'
+  | 'activator'
+  | 'activatorProps'
+  | 'closeDelay'
+  | 'openDelay'
+  | 'openOnClick'
+  | 'openOnFocus'
+  | 'openOnHover'
+>
+
+export const makeVSnackbarQueueProps = propsFactory({
+  // TODO: Port this to Snackbar on dev
+  closable: [Boolean, String],
+  closeText: {
+    type: String,
+    default: '$vuetify.dismiss',
+  },
+  modelValue: {
+    type: Array as PropType<readonly (string | SnackbarMessage)[]>,
+    default: () => [],
+  },
+
+  ...omit(makeVSnackbarProps(), ['modelValue']),
+}, 'VSnackbarQueue')
+
+export const VSnackbarQueue = genericComponent<new <T extends readonly (string | SnackbarMessage)[]> (
+  props: {
+    modelValue?: T
+    'onUpdate:modelValue'?: (val: T) => void
+  },
+  slots: VSnackbarQueueSlots<T[number]>,
+) => GenericProps<typeof props, typeof slots>>()({
+  name: 'VSnackbarQueue',
+
+  props: makeVSnackbarQueueProps(),
+
+  emits: {
+    'update:modelValue': (val: (string | SnackbarMessage)[]) => true,
+  },
+
+  setup (props, { emit, slots }) {
+    const { t } = useLocale()
+
+    const isActive = shallowRef(false)
+    const isVisible = shallowRef(false)
+    const current = shallowRef<SnackbarMessage>()
+
+    watch(() => props.modelValue.length, (val, oldVal) => {
+      if (!isVisible.value && val > oldVal) {
+        showNext()
+      }
+    })
+    watch(isActive, val => {
+      if (val) isVisible.value = true
+    })
+
+    function onAfterLeave () {
+      if (props.modelValue.length) {
+        showNext()
+      } else {
+        current.value = undefined
+        isVisible.value = false
+      }
+    }
+    function showNext () {
+      const [next, ...rest] = props.modelValue
+      emit('update:modelValue', rest)
+      current.value = typeof next === 'string' ? { text: next } : next
+      nextTick(() => {
+        isActive.value = true
+      })
+    }
+    function onClickClose () {
+      isActive.value = false
+    }
+
+    const btnProps = computed(() => ({
+      color: typeof props.closable === 'string' ? props.closable : undefined,
+      text: t(props.closeText),
+    }))
+
+    useRender(() => {
+      const hasActions = !!(props.closable || slots.actions)
+      const { modelValue: _, ...snackbarProps } = VSnackbar.filterProps(props as any)
+
+      return (
+        <>
+          { isVisible.value && !!current.value && (
+            slots.default
+              ? (
+                <VDefaultsProvider defaults={{ VSnackbar: current.value }}>
+                  { slots.default({ item: current.value }) }
+                </VDefaultsProvider>
+              ) : (
+                <VSnackbar
+                  { ...snackbarProps }
+                  { ...current.value }
+                  v-model={ isActive.value }
+                  onAfterLeave={ onAfterLeave }
+                >
+                  {{
+                    text: slots.text ? () => slots.text?.({ item: current.value! }) : undefined,
+                    actions: hasActions ? () => (
+                      <>
+                        { !slots.actions ? (
+                          <VBtn
+                            { ...btnProps.value }
+                            onClick={ onClickClose }
+                          />
+                        ) : (
+                          <VDefaultsProvider
+                            defaults={{
+                              VBtn: btnProps.value,
+                            }}
+                          >
+                            { slots.actions({
+                              item: current.value!,
+                              props: { onClick: onClickClose },
+                            })}
+                          </VDefaultsProvider>
+                        )}
+                      </>
+                    ) : undefined,
+                  }}
+                </VSnackbar>
+              )
+          )}
+        </>
+      )
+    })
+  },
+})
+
+export type VSnackbarQueue = InstanceType<typeof VSnackbarQueue>
diff --git a/packages/vuetify/src/labs/VSnackbarQueue/index.ts b/packages/vuetify/src/labs/VSnackbarQueue/index.ts
new file mode 100644
index 00000000000..8fe3df988b5
--- /dev/null
+++ b/packages/vuetify/src/labs/VSnackbarQueue/index.ts
@@ -0,0 +1 @@
+export { VSnackbarQueue } from './VSnackbarQueue'
diff --git a/packages/vuetify/src/labs/components.ts b/packages/vuetify/src/labs/components.ts
index 98850084f8e..037336bc275 100644
--- a/packages/vuetify/src/labs/components.ts
+++ b/packages/vuetify/src/labs/components.ts
@@ -4,6 +4,7 @@ export * from './VEmptyState'
 export * from './VFab'
 export * from './VNumberInput'
 export * from './VPicker'
+export * from './VSnackbarQueue'
 export * from './VSparkline'
 export * from './VSpeedDial'
 export * from './VTimePicker'
diff --git a/packages/vuetify/src/locale/af.ts b/packages/vuetify/src/locale/af.ts
index 16b8461da6e..34fc7bd4c76 100644
--- a/packages/vuetify/src/locale/af.ts
+++ b/packages/vuetify/src/locale/af.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'badge',
   open: 'Open',
   close: 'Close',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/ar.ts b/packages/vuetify/src/locale/ar.ts
index b265d61335a..b5ec2b2ea6f 100644
--- a/packages/vuetify/src/locale/ar.ts
+++ b/packages/vuetify/src/locale/ar.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'شارة',
   open: 'Open',
   close: 'إغلاق',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/az.ts b/packages/vuetify/src/locale/az.ts
index 1bfeb3ccd86..b452d1ccd95 100644
--- a/packages/vuetify/src/locale/az.ts
+++ b/packages/vuetify/src/locale/az.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'nişan',
   open: 'Open',
   close: 'Bağla',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/bg.ts b/packages/vuetify/src/locale/bg.ts
index 97556f97b8a..f795df46016 100644
--- a/packages/vuetify/src/locale/bg.ts
+++ b/packages/vuetify/src/locale/bg.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Значка',
   open: 'Отвори',
   close: 'Затвори',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Отмяна',
diff --git a/packages/vuetify/src/locale/ca.ts b/packages/vuetify/src/locale/ca.ts
index 95e0c4cd1f5..09b06b0b9e9 100644
--- a/packages/vuetify/src/locale/ca.ts
+++ b/packages/vuetify/src/locale/ca.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Insígnia',
   open: 'Open',
   close: 'Tancar',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/ckb.ts b/packages/vuetify/src/locale/ckb.ts
index 7a85013a3a0..64ffde6ea1a 100644
--- a/packages/vuetify/src/locale/ckb.ts
+++ b/packages/vuetify/src/locale/ckb.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'باج',
   open: 'Open',
   close: 'داخستن',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/cs.ts b/packages/vuetify/src/locale/cs.ts
index 4ebe6d78d77..85a8b6b613a 100644
--- a/packages/vuetify/src/locale/cs.ts
+++ b/packages/vuetify/src/locale/cs.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Odznak',
   open: 'Otevřiť',
   close: 'Zavřít',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Zrušit',
diff --git a/packages/vuetify/src/locale/da.ts b/packages/vuetify/src/locale/da.ts
index c80f32a89d4..8a80af26500 100644
--- a/packages/vuetify/src/locale/da.ts
+++ b/packages/vuetify/src/locale/da.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Emblem',
   open: 'Open',
   close: 'Luk',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/de.ts b/packages/vuetify/src/locale/de.ts
index aa8d614e8aa..7d1dacd2701 100644
--- a/packages/vuetify/src/locale/de.ts
+++ b/packages/vuetify/src/locale/de.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Abzeichen',
   open: 'Öffnen',
   close: 'Schließen',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Abbrechen',
diff --git a/packages/vuetify/src/locale/el.ts b/packages/vuetify/src/locale/el.ts
index 9a2c757b2fa..be1701683f9 100755
--- a/packages/vuetify/src/locale/el.ts
+++ b/packages/vuetify/src/locale/el.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Σήμα',
   open: 'Open',
   close: 'Close',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/en.ts b/packages/vuetify/src/locale/en.ts
index c03b6d6395b..cf94f5e9786 100644
--- a/packages/vuetify/src/locale/en.ts
+++ b/packages/vuetify/src/locale/en.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Badge',
   open: 'Open',
   close: 'Close',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/es.ts b/packages/vuetify/src/locale/es.ts
index 81dd808d8db..849ddececaa 100644
--- a/packages/vuetify/src/locale/es.ts
+++ b/packages/vuetify/src/locale/es.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Placa',
   open: 'Open',
   close: 'Cerrar',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/et.ts b/packages/vuetify/src/locale/et.ts
index f6ac5a40204..b420079173d 100644
--- a/packages/vuetify/src/locale/et.ts
+++ b/packages/vuetify/src/locale/et.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Märk',
   open: 'Open',
   close: 'Sulge',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/fa.ts b/packages/vuetify/src/locale/fa.ts
index 87841876b98..e1efd668b60 100644
--- a/packages/vuetify/src/locale/fa.ts
+++ b/packages/vuetify/src/locale/fa.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'نشان',
   open: 'Open',
   close: 'بستن',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'لغو',
diff --git a/packages/vuetify/src/locale/fi.ts b/packages/vuetify/src/locale/fi.ts
index 53b916003e9..d03c0703928 100644
--- a/packages/vuetify/src/locale/fi.ts
+++ b/packages/vuetify/src/locale/fi.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Infopiste',
   open: 'Open',
   close: 'Sulje',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/fr.ts b/packages/vuetify/src/locale/fr.ts
index dfd33b512c6..717e2902829 100644
--- a/packages/vuetify/src/locale/fr.ts
+++ b/packages/vuetify/src/locale/fr.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Badge',
   open: 'Ouvrir',
   close: 'Fermer',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Annuler',
diff --git a/packages/vuetify/src/locale/he.ts b/packages/vuetify/src/locale/he.ts
index 253b5c1708c..ebc04e428e6 100644
--- a/packages/vuetify/src/locale/he.ts
+++ b/packages/vuetify/src/locale/he.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'תג',
   open: 'Open',
   close: 'סגור',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/hr.ts b/packages/vuetify/src/locale/hr.ts
index 7e82c3be8d2..d24be21324b 100644
--- a/packages/vuetify/src/locale/hr.ts
+++ b/packages/vuetify/src/locale/hr.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Bedž',
   open: 'Open',
   close: 'Zatvori',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/hu.ts b/packages/vuetify/src/locale/hu.ts
index ae4efb4bded..707e2faa4e2 100644
--- a/packages/vuetify/src/locale/hu.ts
+++ b/packages/vuetify/src/locale/hu.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Jelvény',
   open: 'Open',
   close: 'Bezárás',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/id.ts b/packages/vuetify/src/locale/id.ts
index 734fa04c40f..ad689c5f478 100644
--- a/packages/vuetify/src/locale/id.ts
+++ b/packages/vuetify/src/locale/id.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Lencana',
   open: 'Open',
   close: 'Tutup',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/it.ts b/packages/vuetify/src/locale/it.ts
index 0614b098ce1..cc2d11e9f53 100644
--- a/packages/vuetify/src/locale/it.ts
+++ b/packages/vuetify/src/locale/it.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Distintivo',
   open: 'Apri',
   close: 'Chiudi',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Annulla',
diff --git a/packages/vuetify/src/locale/ja.ts b/packages/vuetify/src/locale/ja.ts
index 00211bf9280..1156492f552 100644
--- a/packages/vuetify/src/locale/ja.ts
+++ b/packages/vuetify/src/locale/ja.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'バッジ',
   open: 'Open',
   close: '閉じる',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/km.ts b/packages/vuetify/src/locale/km.ts
index f3f4b238701..10c1cd735ac 100644
--- a/packages/vuetify/src/locale/km.ts
+++ b/packages/vuetify/src/locale/km.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'ផ្លាក',
   open: 'បើក',
   close: 'បិទ',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'យល់ព្រម',
     cancel: 'បោះបង់',
diff --git a/packages/vuetify/src/locale/ko.ts b/packages/vuetify/src/locale/ko.ts
index f0c212dd701..f038b7c3679 100644
--- a/packages/vuetify/src/locale/ko.ts
+++ b/packages/vuetify/src/locale/ko.ts
@@ -2,6 +2,7 @@ export default {
   badge: '배지',
   open: 'Open',
   close: '닫기',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/lt.ts b/packages/vuetify/src/locale/lt.ts
index 82174e1330c..307340e31a3 100644
--- a/packages/vuetify/src/locale/lt.ts
+++ b/packages/vuetify/src/locale/lt.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Ženklelis',
   open: 'Atidaryti',
   close: 'Uždaryti',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Atšaukti',
diff --git a/packages/vuetify/src/locale/lv.ts b/packages/vuetify/src/locale/lv.ts
index 911cca0f464..eb493589646 100644
--- a/packages/vuetify/src/locale/lv.ts
+++ b/packages/vuetify/src/locale/lv.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Žetons',
   open: 'Open',
   close: 'Aizvērt',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/nl.ts b/packages/vuetify/src/locale/nl.ts
index de2fe1fb9e9..b8c6032fe32 100644
--- a/packages/vuetify/src/locale/nl.ts
+++ b/packages/vuetify/src/locale/nl.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Insigne',
   open: 'Openen',
   close: 'Sluiten',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Annuleren',
diff --git a/packages/vuetify/src/locale/no.ts b/packages/vuetify/src/locale/no.ts
index 3fb78ac86b0..c9fc72ddfc6 100644
--- a/packages/vuetify/src/locale/no.ts
+++ b/packages/vuetify/src/locale/no.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Skilt',
   open: 'Åpne',
   close: 'Lukk',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Avbryt',
diff --git a/packages/vuetify/src/locale/pl.ts b/packages/vuetify/src/locale/pl.ts
index bdb1000c1ff..0e45ad375df 100644
--- a/packages/vuetify/src/locale/pl.ts
+++ b/packages/vuetify/src/locale/pl.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Odznaka',
   open: 'Otwórz',
   close: 'Zamknij',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Anuluj',
diff --git a/packages/vuetify/src/locale/pt.ts b/packages/vuetify/src/locale/pt.ts
index 52ec4131ddd..d6094cb7edd 100644
--- a/packages/vuetify/src/locale/pt.ts
+++ b/packages/vuetify/src/locale/pt.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Distintivo',
   open: 'Abrir',
   close: 'Fechar',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/ro.ts b/packages/vuetify/src/locale/ro.ts
index e0016f9088f..615b2861637 100644
--- a/packages/vuetify/src/locale/ro.ts
+++ b/packages/vuetify/src/locale/ro.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Insignă',
   open: 'Open',
   close: 'Închideți',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Anulează',
diff --git a/packages/vuetify/src/locale/ru.ts b/packages/vuetify/src/locale/ru.ts
index 7af99bc3779..3c6eb2cde0e 100644
--- a/packages/vuetify/src/locale/ru.ts
+++ b/packages/vuetify/src/locale/ru.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Знак',
   open: 'Открыть',
   close: 'Закрыть',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'ОК',
     cancel: 'Отмена',
diff --git a/packages/vuetify/src/locale/sk.ts b/packages/vuetify/src/locale/sk.ts
index eef18e9739b..9b1ffe2481e 100644
--- a/packages/vuetify/src/locale/sk.ts
+++ b/packages/vuetify/src/locale/sk.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Odznak',
   open: 'Otvoriť',
   close: 'Zavrieť',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Zrušiť',
diff --git a/packages/vuetify/src/locale/sl.ts b/packages/vuetify/src/locale/sl.ts
index f31c327c6b5..c36e668c611 100644
--- a/packages/vuetify/src/locale/sl.ts
+++ b/packages/vuetify/src/locale/sl.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Značka',
   open: 'Odpri',
   close: 'Zapri',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'V redu',
     cancel: 'Prekliči',
diff --git a/packages/vuetify/src/locale/sr-Cyrl.ts b/packages/vuetify/src/locale/sr-Cyrl.ts
index f923df03f01..6e9c1f9cc16 100644
--- a/packages/vuetify/src/locale/sr-Cyrl.ts
+++ b/packages/vuetify/src/locale/sr-Cyrl.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Значка',
   open: 'Open',
   close: 'Затвори',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/sr-Latn.ts b/packages/vuetify/src/locale/sr-Latn.ts
index 98dc97ab4ce..485d81bd2d0 100644
--- a/packages/vuetify/src/locale/sr-Latn.ts
+++ b/packages/vuetify/src/locale/sr-Latn.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Značka',
   open: 'Open',
   close: 'Zatvori',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/sv.ts b/packages/vuetify/src/locale/sv.ts
index 5818b705339..2a0b576b7aa 100644
--- a/packages/vuetify/src/locale/sv.ts
+++ b/packages/vuetify/src/locale/sv.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Bricka',
   open: 'Open',
   close: 'Stäng',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Avbryt',
diff --git a/packages/vuetify/src/locale/th.ts b/packages/vuetify/src/locale/th.ts
index cd22cdcdd58..672643cd6c0 100644
--- a/packages/vuetify/src/locale/th.ts
+++ b/packages/vuetify/src/locale/th.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'สัญลักษณ์',
   open: 'Open',
   close: 'ปิด',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/tr.ts b/packages/vuetify/src/locale/tr.ts
index 7f0242c6b81..2463d23ba1e 100644
--- a/packages/vuetify/src/locale/tr.ts
+++ b/packages/vuetify/src/locale/tr.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'rozet',
   open: 'Open',
   close: 'Kapat',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/uk.ts b/packages/vuetify/src/locale/uk.ts
index ab6af48c040..4d1d28540ac 100644
--- a/packages/vuetify/src/locale/uk.ts
+++ b/packages/vuetify/src/locale/uk.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Знак',
   open: 'Open',
   close: 'Закрити',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/vi.ts b/packages/vuetify/src/locale/vi.ts
index 4d0a1b7b27e..67915a2dc1e 100644
--- a/packages/vuetify/src/locale/vi.ts
+++ b/packages/vuetify/src/locale/vi.ts
@@ -2,6 +2,7 @@ export default {
   badge: 'Huy hiệu',
   open: 'Open',
   close: 'Đóng',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/zh-Hans.ts b/packages/vuetify/src/locale/zh-Hans.ts
index 6dddccf4a68..dec1c61f811 100644
--- a/packages/vuetify/src/locale/zh-Hans.ts
+++ b/packages/vuetify/src/locale/zh-Hans.ts
@@ -2,6 +2,7 @@ export default {
   badge: '徽章',
   open: 'Open',
   close: '关闭',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',
diff --git a/packages/vuetify/src/locale/zh-Hant.ts b/packages/vuetify/src/locale/zh-Hant.ts
index 013282d2f85..dbae45b6526 100644
--- a/packages/vuetify/src/locale/zh-Hant.ts
+++ b/packages/vuetify/src/locale/zh-Hant.ts
@@ -2,6 +2,7 @@ export default {
   badge: '徽章',
   open: 'Open',
   close: '關閉',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel',

From 0d0759cede56efcfd27aafde910f95ded3cf447f Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 20 Apr 2024 23:59:58 -0500
Subject: [PATCH 17/39] feat(VFab): add new layout prop that determines if app
 fab takes up space

---
 packages/api-generator/src/locale/en/VFab.json | 1 +
 packages/vuetify/src/labs/VFab/VFab.tsx        | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VFab.json b/packages/api-generator/src/locale/en/VFab.json
index d40545ee82b..e62d1349ff4 100644
--- a/packages/api-generator/src/locale/en/VFab.json
+++ b/packages/api-generator/src/locale/en/VFab.json
@@ -1,6 +1,7 @@
 {
   "props": {
     "app": "If true, attaches to the closest layout and positions according to the value of **location**.",
+    "layout": "If true, will effect layout dimensions based on size and position.",
     "appear": "Used to control the animation of the FAB.",
     "extended": "An alternate style for the FAB that expects text.",
     "location": "The location of the fab relative to the layout. Only works when using **app**.",
diff --git a/packages/vuetify/src/labs/VFab/VFab.tsx b/packages/vuetify/src/labs/VFab/VFab.tsx
index dd2f84ae57a..d5678b2abde 100644
--- a/packages/vuetify/src/labs/VFab/VFab.tsx
+++ b/packages/vuetify/src/labs/VFab/VFab.tsx
@@ -25,6 +25,7 @@ export const makeVFabProps = propsFactory({
   app: Boolean,
   appear: Boolean,
   extended: Boolean,
+  layout: Boolean,
   location: {
     type: String as PropType<typeof locations[number]>,
     default: 'bottom end',
@@ -78,8 +79,8 @@ export const VFab = genericComponent()({
         id: props.name,
         order: computed(() => parseInt(props.order, 10)),
         position,
-        layoutSize: height,
-        elementSize: computed(() => height.value + 32),
+        layoutSize: computed(() => props.layout ? height.value + 24 : 0),
+        elementSize: computed(() => height.value),
         active: computed(() => props.app && model.value),
         absolute: toRef(props, 'absolute'),
       })

From cbb945d68086044f04cb13ef245dc4b4cb732392 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 21 Apr 2024 00:02:49 -0500
Subject: [PATCH 18/39] fix(VSnackbar): position based on app layout

closes #15744
---
 packages/vuetify/src/components/VSnackbar/VSnackbar.sass | 1 +
 packages/vuetify/src/components/VSnackbar/VSnackbar.tsx  | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass
index e7ea46cdee2..d101831845e 100644
--- a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass
+++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass
@@ -7,6 +7,7 @@
   z-index: $snackbar-z-index
   margin: $snackbar-wrapper-margin
   margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset))
+  padding: var(--v-layout-top) var(--v-layout-right) var(--v-layout-bottom) var(--v-layout-left)
 
   &__wrapper
     align-items: center
diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
index 229531c91f8..df16e6fda2d 100644
--- a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
+++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
@@ -8,6 +8,7 @@ import { makeVOverlayProps } from '@/components/VOverlay/VOverlay'
 import { VProgressLinear } from '@/components/VProgressLinear'
 
 // Composables
+import { useLayout } from '@/composables'
 import { forwardRefs } from '@/composables/forwardRefs'
 import { makeLocationProps } from '@/composables/location'
 import { makePositionProps, usePosition } from '@/composables/position'
@@ -95,6 +96,7 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
 
   setup (props, { slots }) {
     const isActive = useProxiedModel(props, 'modelValue')
+    const { mainStyles } = useLayout()
     const { positionClasses } = usePosition(props)
     const { scopeId } = useScopeId()
     const { themeClasses } = provideTheme(props)
@@ -172,7 +174,10 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
             positionClasses.value,
             props.class,
           ]}
-          style={ props.style }
+          style={[
+            mainStyles.value,
+            props.style,
+          ]}
           { ...overlayProps }
           v-model={ isActive.value }
           contentProps={ mergeProps({

From 200b3bf58f1335f46ad60fcefd981a91b9d10836 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 21 Apr 2024 00:16:45 -0500
Subject: [PATCH 19/39] fix(VSnackbar): close from swipe gesture

fixes #3509
---
 .../vuetify/src/components/VSnackbar/VSnackbar.tsx  | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
index df16e6fda2d..8192bf0e2e3 100644
--- a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
+++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
@@ -107,6 +107,7 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
     const overlay = ref<VOverlay>()
     const timerRef = ref<VProgressLinear>()
     const isHovering = shallowRef(false)
+    const startY = shallowRef(0)
 
     watch(isActive, startTimeout)
     watch(() => props.timeout, startTimeout)
@@ -147,6 +148,16 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
       startTimeout()
     }
 
+    function onTouchstart (event: TouchEvent) {
+      startY.value = event.touches[0].clientY
+    }
+
+    function onTouchend (event: TouchEvent) {
+      if (Math.abs(startY.value - event.changedTouches[0].clientY) > 50) {
+        isActive.value = false
+      }
+    }
+
     const locationClasses = computed(() => {
       return props.location.split(' ').reduce((acc, loc) => {
         acc[`v-snackbar--${loc}`] = true
@@ -199,6 +210,8 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
           scrim={ false }
           scrollStrategy="none"
           _disableGlobalStack
+          onTouchstart={ onTouchstart }
+          onTouchend={ onTouchend }
           { ...scopeId }
           v-slots={{ activator: slots.activator }}
         >

From 7ced152fe7325626279ab4430b047cacc86cedd1 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 21 Apr 2024 00:55:55 -0500
Subject: [PATCH 20/39] fix(VFab): account for margin in elementSize

---
 packages/vuetify/src/labs/VFab/VFab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/labs/VFab/VFab.tsx b/packages/vuetify/src/labs/VFab/VFab.tsx
index d5678b2abde..15a7dd8b87e 100644
--- a/packages/vuetify/src/labs/VFab/VFab.tsx
+++ b/packages/vuetify/src/labs/VFab/VFab.tsx
@@ -80,7 +80,7 @@ export const VFab = genericComponent()({
         order: computed(() => parseInt(props.order, 10)),
         position,
         layoutSize: computed(() => props.layout ? height.value + 24 : 0),
-        elementSize: computed(() => height.value),
+        elementSize: computed(() => height.value + 24),
         active: computed(() => props.app && model.value),
         absolute: toRef(props, 'absolute'),
       })

From f4a54147127f9d43890df495be0036a087fe17bd Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 21 Apr 2024 00:57:25 -0500
Subject: [PATCH 21/39] docs(BackToTop): update to use VFab

---
 .../docs/src/components/app/BackToTop.vue     | 39 +++++--------------
 1 file changed, 9 insertions(+), 30 deletions(-)

diff --git a/packages/docs/src/components/app/BackToTop.vue b/packages/docs/src/components/app/BackToTop.vue
index 5865a6309b8..22a9f831643 100644
--- a/packages/docs/src/components/app/BackToTop.vue
+++ b/packages/docs/src/components/app/BackToTop.vue
@@ -1,25 +1,14 @@
 <template>
-  <v-layout-item
-    class="text-end pointer-events-none"
-    position="bottom"
-    size="88"
-    model-value
+  <v-fab
+    v-model="model"
+    color="primary"
+    elevation="8"
+    icon="mdi-chevron-up"
+    size="large"
+    app
     v-scroll="onScroll"
-  >
-    <div class="ma-4">
-      <v-fab-transition>
-        <v-btn
-          v-show="model"
-          class="mt-auto pointer-events-initial"
-          color="primary"
-          elevation="8"
-          icon="mdi-chevron-up"
-          size="large"
-          @click="goTo(0)"
-        />
-      </v-fab-transition>
-    </div>
-  </v-layout-item>
+    @click="goTo(0)"
+  />
 </template>
 
 <script setup>
@@ -31,13 +20,3 @@
     model.value = window.scrollY > 200
   }
 </script>
-
-<style scoped>
-  .pointer-events-none {
-    pointer-events: none;
-  }
-
-  .pointer-events-initial {
-    pointer-events: initial;
-  }
-</style>

From 42e482f63378527b22012802a175c76674088092 Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Mon, 22 Apr 2024 00:54:00 +1000
Subject: [PATCH 22/39] fix(VNumberInput): avoid native number input weird
 behaviours (#19605)

fixes #19438
fixes #19558
fixes #19538
fixes #19494

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../src/labs/VNumberInput/VNumberInput.tsx    | 100 ++++++++++++++----
 .../__tests__/VNumberInput.spec.cy.tsx        |  57 ++++++++++
 2 files changed, 139 insertions(+), 18 deletions(-)
 create mode 100644 packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
index 7ce3ea4e428..ea9b8cced49 100644
--- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -13,8 +13,8 @@ import { makeFocusProps, useFocus } from '@/composables/focus'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, ref } from 'vue'
-import { filterInputAttrs, genericComponent, only, propsFactory, useRender } from '@/util'
+import { computed, ref, watchEffect } from 'vue'
+import { clamp, filterInputAttrs, genericComponent, getDecimals, only, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -39,9 +39,18 @@ const makeVNumberInputProps = propsFactory({
   },
   inset: Boolean,
   hideInput: Boolean,
-  min: Number,
-  max: Number,
-  step: Number,
+  min: {
+    type: Number,
+    default: -Infinity,
+  },
+  max: {
+    type: Number,
+    default: Infinity,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
 
   ...only(makeVInputProps(), [
     'density',
@@ -79,8 +88,8 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
     ...makeVNumberInputProps(),
 
     modelValue: {
-      type: [Number, String],
-      default: 0,
+      type: Number,
+      default: undefined,
     },
   },
 
@@ -93,6 +102,24 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
     const { isFocused, focus, blur } = useFocus(props)
     const inputRef = ref<HTMLInputElement>()
 
+    const stepDecimals = computed(() => getDecimals(props.step))
+    const modelDecimals = computed(() => model.value != null ? getDecimals(model.value) : 0)
+
+    const canIncrease = computed(() => {
+      if (model.value == null) return true
+      return model.value + props.step <= props.max
+    })
+    const canDecrease = computed(() => {
+      if (model.value == null) return true
+      return model.value - props.step >= props.min
+    })
+
+    watchEffect(() => {
+      if (model.value != null && (model.value < props.min || model.value > props.max)) {
+        model.value = clamp(model.value, props.min, props.max)
+      }
+    })
+
     function onFocus () {
       if (!isFocused.value) focus()
     }
@@ -101,14 +128,22 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       return props.hideInput ? 'stacked' : props.controlVariant
     })
 
+    const incrementSlotProps = computed(() => ({ click: onClickUp }))
+
+    const decrementSlotProps = computed(() => ({ click: onClickDown }))
+
     function toggleUpDown (increment = true) {
+      if (model.value == null) {
+        model.value = 0
+        return
+      }
+
+      const decimals = Math.max(modelDecimals.value, stepDecimals.value)
       if (increment) {
-        inputRef.value?.stepUp()
+        if (canIncrease.value) model.value = +(((model.value + props.step).toFixed(decimals)))
       } else {
-        inputRef.value?.stepDown()
+        if (canDecrease.value) model.value = +(((model.value - props.step).toFixed(decimals)))
       }
-
-      if (inputRef.value) model.value = parseInt(inputRef.value.value, 10)
     }
 
     function onClickUp () {
@@ -119,9 +154,33 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       toggleUpDown(false)
     }
 
-    const incrementSlotProps = computed(() => ({ click: onClickUp }))
+    function onKeydown (e: KeyboardEvent) {
+      if (
+        ['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace'].includes(e.key) ||
+        e.ctrlKey
+      ) return
 
-    const decrementSlotProps = computed(() => ({ click: onClickDown }))
+      if (['ArrowDown'].includes(e.key)) {
+        e.preventDefault()
+        toggleUpDown(false)
+        return
+      }
+      if (['ArrowUp'].includes(e.key)) {
+        e.preventDefault()
+        toggleUpDown()
+        return
+      }
+
+      // Only numbers, +, - & . are allowed
+      if (!/^[0-9\-+.]+$/.test(e.key)) {
+        e.preventDefault()
+      }
+    }
+
+    function onInput (e: Event) {
+      const el = e.target as HTMLInputElement
+      model.value = el.value ? +(el.value) : undefined
+    }
 
     useRender(() => {
       const fieldProps = filterFieldProps(props)
@@ -135,9 +194,11 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
             {
               !slots.decrement ? (
                 <VBtn
+                  disabled={ !canDecrease.value }
                   flat
                   key="decrement-btn"
                   height={ defaultHeight }
+                  name="decrement-btn"
                   icon="$expand"
                   size="small"
                   onClick={ onClickDown }
@@ -147,6 +208,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                   key="decrement-defaults"
                   defaults={{
                     VBtn: {
+                      disabled: !canDecrease.value,
                       flat: true,
                       height: defaultHeight,
                       size: 'small',
@@ -166,9 +228,11 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
             {
               !slots.increment ? (
                 <VBtn
+                  disabled={ !canIncrease.value }
                   flat
                   key="increment-btn"
                   height={ defaultHeight }
+                  name="increment-btn"
                   icon="$collapse"
                   onClick={ onClickUp }
                   size="small"
@@ -178,6 +242,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                   key="increment-defaults"
                   defaults={{
                     VBtn: {
+                      disabled: !canIncrease.value,
                       flat: true,
                       height: defaultHeight,
                       size: 'small',
@@ -231,12 +296,11 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                   }) => (
                     <input
                       ref={ inputRef }
-                      type="number"
-                      v-model={ model.value }
+                      type="text"
+                      value={ model.value }
+                      onInput={ onInput }
+                      onKeydown={ onKeydown }
                       class={ fieldClass }
-                      max={ props.max }
-                      min={ props.min }
-                      step={ props.step }
                       onFocus={ onFocus }
                       onBlur={ blur }
                       { ...inputAttrs }
diff --git a/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx b/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx
new file mode 100644
index 00000000000..5d115a7a149
--- /dev/null
+++ b/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx
@@ -0,0 +1,57 @@
+/// <reference types="../../../../types/cypress" />
+
+// Components
+import { VNumberInput } from '../VNumberInput'
+
+// Utilities
+import { ref } from 'vue'
+
+describe('VNumberInput', () => {
+  describe('native number input quirks', () => {
+    it('should not bypass min', () => {
+      const numberInputValue = ref(1)
+      cy.mount(() =>
+        <VNumberInput min={ 5 } max={ 15 } v-model={ numberInputValue.value } ></VNumberInput>
+      )
+        .get('.v-number-input input').should('have.value', '5')
+        .should(() => expect(numberInputValue.value).to.equal(5))
+    })
+
+    it('should not bypass max', () => {
+      const numberInputValue = ref(20)
+      cy.mount(() =>
+        <VNumberInput min={ 5 } max={ 15 } v-model={ numberInputValue.value } ></VNumberInput>
+      )
+        .get('.v-number-input input').should('have.value', '15')
+        .should(() => expect(numberInputValue.value).to.equal(15))
+    })
+
+    it('should support decimal step', () => {
+      const numberInputValue = ref(0)
+      cy.mount(() =>
+        (
+        <VNumberInput
+          step={ 0.03 }
+          v-model={ numberInputValue.value }
+        ></VNumberInput>
+        )
+      )
+        .get('button[name="increment-btn"]')
+        .click()
+        .get('.v-number-input input').should('have.value', '0.03')
+        .then(() => expect(numberInputValue.value).to.equal(0.03))
+        .get('button[name="increment-btn"]')
+        .click()
+        .get('.v-number-input input').should('have.value', '0.06')
+        .then(() => expect(numberInputValue.value).to.equal(0.06))
+        .get('button[name="decrement-btn"]')
+        .click()
+        .get('.v-number-input input').should('have.value', '0.03')
+        .then(() => expect(numberInputValue.value).to.equal(0.03))
+        .get('button[name="decrement-btn"]')
+        .click()
+        .get('.v-number-input input').should('have.value', '0')
+        .then(() => expect(numberInputValue.value).to.equal(0))
+    })
+  })
+})

From 468a9c1ab495ee78ee134c6d14bb277ed343659d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 21 Apr 2024 10:29:33 -0500
Subject: [PATCH 23/39] fix(VList): don't takeover focus control when target is
 INPUT

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

diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
index aa36192caa6..9b47788bc8e 100644
--- a/packages/vuetify/src/components/VList/VList.tsx
+++ b/packages/vuetify/src/components/VList/VList.tsx
@@ -205,7 +205,9 @@ export const VList = genericComponent<new <
     }
 
     function onKeydown (e: KeyboardEvent) {
-      if (!contentRef.value) return
+      const target = e.target as HTMLElement
+
+      if (!contentRef.value || target.tagName === 'INPUT') return
 
       if (e.key === 'ArrowDown') {
         focus('next')

From baf936581141209d37691a802227c1870dc743d1 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 21 Apr 2024 14:22:09 -0500
Subject: [PATCH 24/39] docs(VSnackbarQueue): add to labs intro, add install
 instructions, add api

---
 .../src/locale/en/VSnackbarQueue.json         |  6 ++++++
 packages/docs/src/data/page-to-api.json       |  1 +
 .../src/pages/en/components/snackbar-queue.md | 20 +++++++++++++++++++
 .../docs/src/pages/en/labs/introduction.md    |  1 +
 4 files changed, 28 insertions(+)
 create mode 100644 packages/api-generator/src/locale/en/VSnackbarQueue.json

diff --git a/packages/api-generator/src/locale/en/VSnackbarQueue.json b/packages/api-generator/src/locale/en/VSnackbarQueue.json
new file mode 100644
index 00000000000..79a68190bc7
--- /dev/null
+++ b/packages/api-generator/src/locale/en/VSnackbarQueue.json
@@ -0,0 +1,6 @@
+{
+  "props": {
+    "closable": "Adds a dismiss button that closes the active snackbar.",
+    "closeText": "The text used in the close button when using the **closable** prop."
+  }
+}
diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json
index d9bc80d1c4e..8989eb2c2fb 100644
--- a/packages/docs/src/data/page-to-api.json
+++ b/packages/docs/src/data/page-to-api.json
@@ -125,6 +125,7 @@
   "components/slide-groups": ["VSlideGroup", "VSlideGroupItem"],
   "components/sliders": ["VRangeSlider", "VSlider"],
   "components/snackbars": ["VSnackbar"],
+  "components/snackbar-queue": ["VSnackbarQueue", "VSnackbar"],
   "components/sparklines": ["VSparkline"],
   "components/steppers": [
     "VStepper",
diff --git a/packages/docs/src/pages/en/components/snackbar-queue.md b/packages/docs/src/pages/en/components/snackbar-queue.md
index bdbd6c8af12..5037b56c290 100644
--- a/packages/docs/src/pages/en/components/snackbar-queue.md
+++ b/packages/docs/src/pages/en/components/snackbar-queue.md
@@ -22,6 +22,26 @@ The `v-snackbar-queue` component is used to queue up multiple snackbar messages
 
 <PageFeatures />
 
+::: warning
+
+This feature requires [v3.6.0](/getting-started/release-notes/?version=v3.6.0)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VSnackbarQueue } from 'vuetify/labs/VSnackbarQueue'
+
+export default createVuetify({
+  components: {
+    VSnackbarQueue,
+  },
+})
+```
+
 ## Usage
 
 <ExamplesUsage name="v-snackbar-queue" />
diff --git a/packages/docs/src/pages/en/labs/introduction.md b/packages/docs/src/pages/en/labs/introduction.md
index c2619742c16..532e8cac8eb 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-empty-state](/components/empty-states/) | A component for displaying empty states | [v3.5.7](/getting-started/release-notes/?version=v3.5.7) |
 | [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-number-input](/components/number-input/) | A component for numerical data | [v3.5.10](/getting-started/release-notes/?version=v3.5.10) |
+| [v-snackbar-queue](/components/snackbar-queue/) | A queue for snackbars | [v3.6.0](/getting-started/release-notes/?version=v3.6.0) |
 | [v-sparkline](/components/sparklines/) | A basic data display component | [v3.5.5](/getting-started/release-notes/?version=v3.5.5) |
 | [v-speed-dial](/components/speed-dials/) | A component for display actions | [v3.5.8](/getting-started/release-notes/?version=v3.5.8) |
 | [v-time-picker](/components/time-pickers/) | A time-picker component | [v3.5.12](/getting-started/release-notes/?version=v3.5.12) |

From d5f1dc3cee9bb3da28353646ec7ce00454cef993 Mon Sep 17 00:00:00 2001
From: Zhaolin Liang <develop0304@outlook.com>
Date: Tue, 23 Apr 2024 00:51:35 +0800
Subject: [PATCH 25/39] fix(Dialog): add afterLeave event (#19664)

fixes #19660
---
 .../src/components/VDialog/VDialog.tsx        |  7 +++-
 .../VDialog/__test__/VDialog.spec.cy.tsx      | 39 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 packages/vuetify/src/components/VDialog/__test__/VDialog.spec.cy.tsx

diff --git a/packages/vuetify/src/components/VDialog/VDialog.tsx b/packages/vuetify/src/components/VDialog/VDialog.tsx
index a347c6d0bd9..9c18d64825f 100644
--- a/packages/vuetify/src/components/VDialog/VDialog.tsx
+++ b/packages/vuetify/src/components/VDialog/VDialog.tsx
@@ -47,7 +47,7 @@ export const VDialog = genericComponent<OverlaySlots>()({
     afterLeave: () => true,
   },
 
-  setup (props, { slots }) {
+  setup (props, { emit, slots }) {
     const isActive = useProxiedModel(props, 'modelValue')
     const { scopeId } = useScopeId()
 
@@ -95,6 +95,10 @@ export const VDialog = genericComponent<OverlaySlots>()({
       }
     }
 
+    function onAfterLeave () {
+      emit('afterLeave')
+    }
+
     watch(isActive, async val => {
       if (!val) {
         await nextTick()
@@ -131,6 +135,7 @@ export const VDialog = genericComponent<OverlaySlots>()({
           contentProps={ contentProps }
           role="dialog"
           onAfterEnter={ onAfterEnter }
+          onAfterLeave={ onAfterLeave }
           { ...scopeId }
         >
           {{
diff --git a/packages/vuetify/src/components/VDialog/__test__/VDialog.spec.cy.tsx b/packages/vuetify/src/components/VDialog/__test__/VDialog.spec.cy.tsx
new file mode 100644
index 00000000000..ec5d2296dec
--- /dev/null
+++ b/packages/vuetify/src/components/VDialog/__test__/VDialog.spec.cy.tsx
@@ -0,0 +1,39 @@
+/// <reference types="../../../../types/cypress" />
+
+// Components
+import { VDialog } from '..'
+
+// Utilities
+import { ref } from 'vue'
+
+// Tests
+describe('VDialog', () => {
+  it('should render correctly', () => {
+    const model = ref(false)
+    cy.mount(() => (
+      <VDialog v-model={ model.value } data-test="dialog">
+        <div data-test="content">Content</div>
+      </VDialog>
+    )).get('[data-test="dialog"]').should('not.exist')
+      .then(() => { model.value = true })
+      .get('[data-test="dialog"]').should('be.visible')
+      .get('[data-test="content"]').should('be.visible')
+      .get('body').click()
+      .then(() => {
+        expect(model.value).to.be.false
+      })
+      .get('[data-test="dialog"]').should('not.exist')
+      .get('[data-test="content"]').should('not.exist')
+  })
+
+  it('should emit afterLeave', () => {
+    const model = ref(true)
+    const onAfterLeave = cy.spy().as('afterLeave')
+    cy.mount(() => (
+      <VDialog v-model={ model.value } onAfterLeave={ onAfterLeave }>
+        <div data-test="content">Content</div>
+      </VDialog>
+    )).get('body').click()
+      .get('@afterLeave').should('have.been.calledOnce')
+  })
+})

From 99813955f0340439efffd1a222b8628b1e779f75 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 22 Apr 2024 19:26:17 +0100
Subject: [PATCH 26/39] fix(VChip): prevent text selection for link chips
 (#19653)

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

diff --git a/packages/vuetify/src/components/VChip/VChip.sass b/packages/vuetify/src/components/VChip/VChip.sass
index 2c663a4d9d5..8f5e5d93fd7 100644
--- a/packages/vuetify/src/components/VChip/VChip.sass
+++ b/packages/vuetify/src/components/VChip/VChip.sass
@@ -32,6 +32,7 @@
   &--link
     cursor: pointer
 
+  &--link,
   &--filter
     user-select: none
 

From edd311fc9154b89f6af3a3a7ad13e4399f26c0a0 Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Tue, 23 Apr 2024 04:28:39 +1000
Subject: [PATCH 27/39] fix(VFileInput): emit single if default is undefined &
 !multiple (#19656)

fixes #19297
---
 packages/vuetify/src/components/VFileInput/VFileInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
index af3434cc620..1ec00d14a64 100644
--- a/packages/vuetify/src/components/VFileInput/VFileInput.tsx
+++ b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -67,7 +67,7 @@ export const makeVFileInputProps = propsFactory({
 
   modelValue: {
     type: [Array, Object] as PropType<File[] | File>,
-    default: () => ([]),
+    default: (props: any) => props.multiple ? [] : null,
     validator: (val: any) => {
       return wrapInArray(val).every(v => v != null && typeof v === 'object')
     },

From 635946ca4bfb43b2684a702c96911c30a210db4d Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Tue, 23 Apr 2024 01:30:22 +0700
Subject: [PATCH 28/39] fix(VCarouselItem): add missing class prop (#19649)

fixes #19630
---
 packages/vuetify/src/components/VCarousel/VCarouselItem.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VCarousel/VCarouselItem.tsx b/packages/vuetify/src/components/VCarousel/VCarouselItem.tsx
index 3ab8d45070b..258a70f98ea 100644
--- a/packages/vuetify/src/components/VCarousel/VCarouselItem.tsx
+++ b/packages/vuetify/src/components/VCarousel/VCarouselItem.tsx
@@ -27,7 +27,10 @@ export const VCarouselItem = genericComponent<VImgSlots>()({
 
       return (
         <VWindowItem
-          class="v-carousel-item"
+          class={[
+            'v-carousel-item',
+            props.class,
+          ]}
           { ...windowItemProps }
         >
           <VImg

From 5918658a76f06c74db105731a8523fc9578cbd6b Mon Sep 17 00:00:00 2001
From: Zhaolin Liang <develop0304@outlook.com>
Date: Tue, 23 Apr 2024 02:30:54 +0800
Subject: [PATCH 29/39] fix(group): update the value when delete an item
 (#19663)

fixes #19655
fixes #19213

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../src/composables/__tests__/group.spec.ts   | 39 ++++++++++++++++++-
 packages/vuetify/src/composables/group.ts     | 13 ++++++-
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/composables/__tests__/group.spec.ts b/packages/vuetify/src/composables/__tests__/group.spec.ts
index 625e89dccd4..076e29b6169 100644
--- a/packages/vuetify/src/composables/__tests__/group.spec.ts
+++ b/packages/vuetify/src/composables/__tests__/group.spec.ts
@@ -3,7 +3,7 @@ import { makeGroupProps, useGroup, useGroupItem } from '../group'
 // Utilities
 import { describe, expect, it } from '@jest/globals'
 import { mount } from '@vue/test-utils'
-import { defineComponent, h, nextTick, reactive } from 'vue'
+import { defineComponent, h, nextTick, reactive, useSlots } from 'vue'
 
 describe('group', () => {
   describe('with complex values', () => {
@@ -270,7 +270,8 @@ describe('group', () => {
       setup (props) {
         // @ts-expect-error missing emit
         useGroup(props, Symbol.for('test'))
-        return () => h('div', [
+        const slot = useSlots()
+        return () => h('div', slot.default?.() ?? [
           h(GroupItemComponent, { disabled: !!props.disabledItems?.[0] }),
           h(GroupItemComponent, { disabled: !!props.disabledItems?.[1] }),
         ])
@@ -370,5 +371,39 @@ describe('group', () => {
 
       expect(wrapper.emitted('update:modelValue')).toStrictEqual([[[0]]])
     })
+
+    it('should update the items that use index as the value when delete', async () => {
+      const values = reactive(['one', 'two', 'three'])
+      const wrapper = mount(GroupComponent, {
+        props: {
+          multiple: false,
+          mandatory: false,
+        },
+        slots: {
+          default () {
+            return values.map(value => h(GroupItemComponent, { key: value }))
+          },
+        },
+      })
+      values.splice(1, 1)
+      values.push('four')
+      await nextTick()
+      let items = wrapper.findAllComponents(GroupItemComponent)
+
+      await items[1].trigger('click')
+      await items[2].trigger('click')
+
+      expect(wrapper.emitted()['update:modelValue']).toEqual([[1], [2]])
+
+      values.splice(1, 0, 'eight')
+      values.push('nine')
+      await nextTick()
+      items = wrapper.findAllComponents(GroupItemComponent)
+
+      await items[3].trigger('click')
+      await items[4].trigger('click')
+
+      expect(wrapper.emitted()['update:modelValue']).toEqual([[1], [2], [3], [4]])
+    })
   })
 })
diff --git a/packages/vuetify/src/composables/group.ts b/packages/vuetify/src/composables/group.ts
index 318f127f298..42d7e6b14a5 100644
--- a/packages/vuetify/src/composables/group.ts
+++ b/packages/vuetify/src/composables/group.ts
@@ -2,7 +2,7 @@
 import { useProxiedModel } from './proxiedModel'
 
 // Utilities
-import { computed, inject, onBeforeUnmount, onMounted, provide, reactive, toRef, unref, watch } from 'vue'
+import { computed, inject, onBeforeUnmount, onMounted, onUpdated, provide, reactive, toRef, unref, watch } from 'vue'
 import { consoleWarn, deepEqual, findChildrenWithProvide, getCurrentInstance, getUid, propsFactory, wrapInArray } from '@/util'
 
 // Types
@@ -13,6 +13,7 @@ export interface GroupItem {
   id: number
   value: Ref<unknown>
   disabled: Ref<boolean | undefined>
+  useIndexAsValue?: boolean
 }
 
 export interface GroupProps {
@@ -181,6 +182,7 @@ export function useGroup (
 
     if (unref(unwrapped.value) == null) {
       unwrapped.value = index
+      unwrapped.useIndexAsValue = true
     }
 
     if (index > -1) {
@@ -219,6 +221,15 @@ export function useGroup (
     isUnmounted = true
   })
 
+  onUpdated(() => {
+    // #19655 update the items that use the index as the value.
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].useIndexAsValue) {
+        items[i].value = i
+      }
+    }
+  })
+
   function select (id: number, value?: boolean) {
     const item = items.find(item => item.id === id)
     if (value && item?.disabled) return

From a1b47bb7789c4148afea5897f9d428b0eb4d93f1 Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Tue, 23 Apr 2024 01:49:18 +0700
Subject: [PATCH 30/39] fix(VDatePicker): change calendar when date is changed
 (#19570)

fixes #19421

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

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
index 853119afa04..f8317b8a8c5 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
@@ -230,6 +230,18 @@ export const VDatePicker = genericComponent<new <
     watch(model, (val, oldVal) => {
       const before = adapter.date(wrapInArray(val)[0])
       const after = adapter.date(wrapInArray(oldVal)[0])
+      const newMonth = adapter.getMonth(before)
+      const newYear = adapter.getYear(before)
+
+      if (newMonth !== month.value) {
+        month.value = newMonth
+        onUpdateMonth(month.value)
+      }
+
+      if (newYear !== year.value) {
+        year.value = newYear
+        onUpdateYear(year.value)
+      }
 
       isReversing.value = adapter.isBefore(before, after)
     })

From 5428cca6e3f039b1f39336e8a68be8b28c027406 Mon Sep 17 00:00:00 2001
From: Abdul Aziz Al Basyir <abdulazizalbasyir119@gmail.com>
Date: Tue, 23 Apr 2024 01:51:39 +0700
Subject: [PATCH 31/39] docs: better wording infinite-scroller.md (#19573)

---
 .../pages/en/components/infinite-scroller.md  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/docs/src/pages/en/components/infinite-scroller.md b/packages/docs/src/pages/en/components/infinite-scroller.md
index 1fb69f6467b..42ce7cd6769 100644
--- a/packages/docs/src/pages/en/components/infinite-scroller.md
+++ b/packages/docs/src/pages/en/components/infinite-scroller.md
@@ -34,7 +34,7 @@ When scrolling towards the bottom, new items will be rendered either automatical
 
 A **load** event will be emitted when the component needs to load more content. The argument passed is an object with two properties.
 
-- `side` tells you at which side new content should be added, either at the `'start'` or `'end'`. The return value of the function is a string which describes if the new content was loaded successfully or not.
+- `side` tells you on which side new content should be added, either at the `'start'` or `'end'`. The return value of the function is a string that describes if the new content was loaded successfully or not.
 - `done` is a callback function that should be called when the loading of new content is done. It takes a single parameter `status` that describes if the load was successful or not. See the table below for the possible values.
 
 |Status|Description|
@@ -42,7 +42,7 @@ A **load** event will be emitted when the component needs to load more content.
 |`'ok'`|Content was added succesfully|
 |`'error'`|Something went wrong when adding content. This will display the `error` slot|
 |`'empty'`|There is no more content to fetch. This will display the `empty` slot|
-|`'loading'`|Content is currently loading. This will display a message that content is loading. This status is only set internally by the component and should not be used with the **done** function|
+|`'loading'`|Content is currently loading. This will display a message that the content is loading. This status is only set internally by the component and should not be used with the **done** function|
 
 <PromotedEntry />
 
@@ -67,29 +67,29 @@ The `v-infinite-scroll` works with any content in its default slot.
 
 ## Guide
 
-The `v-infinite-scroll` component is a container that allows you to react to a user reaching the end of content area. It is useful when you need to display an unknown but large number of items, and you don't want to load them all at once.
+The `v-infinite-scroll` component is a container that allows you to react to a user reaching the end of the content area. It is useful when you need to display an unknown but large number of items, and you don't want to load them all at once.
 
 ### Props
 
-The `v-infinite-scroll` component has a number of props that can be used to customize its behaviour.
+The `v-infinite-scroll` component has several props that can be used to customize its behavior.
 
 #### Mode
 
-The default behaviour of the component is to try to load more content automatically when the scrollbar gets close to the end. However a manual mode is also supported, where the user needs to do some interaction to load the content. By default this a button, but it can be customized with a [slot](#load-more)
+The default behavior of the component is to try to load more content automatically when the scrollbar gets close to the end. However, a manual mode is also supported, where the user needs to do some interaction to load the content. By default this is a button, but it can be customized with a [slot](#load-more)
 
 <ExamplesExample file="v-infinite-scroll/prop-mode" />
 
 #### Direction
 
-The `v-infinite-scroll` component can be used with either vertical and horizontal scrolling.
+The `v-infinite-scroll` component can be used with either vertical or horizontal scrolling.
 
 <ExamplesExample file="v-infinite-scroll/prop-direction" />
 
 #### Side
 
-By default the `v-infinite-scroll` component assumes that new content will be appearing at the end of existing content. But it also supports content being added to the start, and content appearing both at the start and the end.
+By default, the `v-infinite-scroll` component assumes that new content will appear at the end of existing content. But it also supports content being added to the start and appearing both at the beginning and the end.
 
-When using the **start** side for content, the scrolllbar will start at the bottom of the content.
+When using the **start** side for content, the scrollbar will start at the bottom of the content.
 
 <ExamplesExample file="v-infinite-scroll/prop-side-start" />
 
@@ -105,17 +105,17 @@ The default load more button and loading spinner can be colored with the **color
 
 ### Slots
 
-The `v-infinite-scroll` component exposes a number of slots that allow you to further customize its behaviour.
+The `v-infinite-scroll` component exposes several slots that allow you to further customize its behaviour.
 
 ![Infinite scroll Slots](https://cdn.vuetifyjs.com/docs/images/components/v-infinite-scroll/v-infinite-scroll-slots.png)
 
 | Element / Area | Description |
 | - | - |
 | 1. Container | The default slot |
-| 2. Load-more | The slot shown when mode is set to `manual` and status is not `loading` |
-| 3. Loading | The slot shown when mode is set to `manual` and status is `loading` |
-| 4. Empty | The slot shown when status is `empty` |
-| 5. Error | The slot shown when status is `error` |
+| 2. Load-more | The slot shown when the mode is set to `manual` and the status is not `loading` |
+| 3. Loading | The slot is shown when the mode is set to `manual` and status is `loading` |
+| 4. Empty | The slot shown when the status is `empty` |
+| 5. Error | The slot is shown when the status is `error` |
 
 #### Loading
 
@@ -143,10 +143,10 @@ The **error** slot is shown if the status `'error'` is returned from the `done`
 
 ### Examples
 
-The following are a collection of examples that demonstrate more advanced and real world use of the `v-infinite-scroll` component.
+The following is a collection of examples that demonstrate more advanced and real-world use of the `v-infinite-scroll` component.
 
 #### Virtualized infinite scroller
 
-If the items in your infinite list are of a uniform size, you can quite easily virtualize the list to only render a small amount of items regardless of how far you scroll in either direction.
+If the items in your infinite list are of a uniform size, you can quite easily virtualize the list to only render a small number of items regardless of how far you scroll in either direction.
 
 <ExamplesExample file="v-infinite-scroll/misc-virtual" />

From d74128d0afb98157744b78cdf7b454b75ee42b64 Mon Sep 17 00:00:00 2001
From: Timbological <31364357+Timbological@users.noreply.github.com>
Date: Tue, 23 Apr 2024 05:49:29 +1000
Subject: [PATCH 32/39] docs(Cards): include examples of all card variants
 (#19394)

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 packages/docs/src/examples/v-card/prop-variant.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docs/src/examples/v-card/prop-variant.vue b/packages/docs/src/examples/v-card/prop-variant.vue
index eacd275296f..d32f16307db 100644
--- a/packages/docs/src/examples/v-card/prop-variant.vue
+++ b/packages/docs/src/examples/v-card/prop-variant.vue
@@ -10,6 +10,7 @@
         :variant="variant"
         class="mx-auto"
         color="surface-variant"
+        max-width="344"
         subtitle="Greyhound divisely hello coldly fonwderfully"
         title="Headline"
       >

From e56911012bf2b9b452c2aab8e8eca6817a57c34c Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 22 Apr 2024 15:04:19 -0500
Subject: [PATCH 33/39] fix(VDialog): partial revert of changes made in 8083d89

---
 packages/vuetify/src/components/VDialog/VDialog.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/vuetify/src/components/VDialog/VDialog.tsx b/packages/vuetify/src/components/VDialog/VDialog.tsx
index 9c18d64825f..4dcdea83b59 100644
--- a/packages/vuetify/src/components/VDialog/VDialog.tsx
+++ b/packages/vuetify/src/components/VDialog/VDialog.tsx
@@ -42,7 +42,6 @@ export const VDialog = genericComponent<OverlaySlots>()({
   props: makeVDialogProps(),
 
   emits: {
-    'click:outside': (e: MouseEvent) => true,
     'update:modelValue': (value: boolean) => true,
     afterLeave: () => true,
   },

From 97cc161b323af39e0d2acce355b8ee101854ed61 Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Tue, 23 Apr 2024 07:26:05 +0700
Subject: [PATCH 34/39] fix(VInput): add theme class (#19602)

fixes #19598
---
 packages/vuetify/src/components/VInput/VInput.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/vuetify/src/components/VInput/VInput.tsx b/packages/vuetify/src/components/VInput/VInput.tsx
index 7b79f1f4180..fe95b64fee4 100644
--- a/packages/vuetify/src/components/VInput/VInput.tsx
+++ b/packages/vuetify/src/components/VInput/VInput.tsx
@@ -10,6 +10,7 @@ import { makeComponentProps } from '@/composables/component'
 import { makeDensityProps, useDensity } from '@/composables/density'
 import { IconValue } from '@/composables/icons'
 import { useRtl } from '@/composables/locale'
+import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { makeValidationProps, useValidation } from '@/composables/validation'
 
 // Utilities
@@ -62,6 +63,7 @@ export const makeVInputProps = propsFactory({
 
   ...makeComponentProps(),
   ...makeDensityProps(),
+  ...makeThemeProps(),
   ...makeValidationProps(),
 }, 'VInput')
 
@@ -92,6 +94,7 @@ export const VInput = genericComponent<new <T>(
 
   setup (props, { attrs, slots, emit }) {
     const { densityClasses } = useDensity(props)
+    const { themeClasses } = provideTheme(props)
     const { rtlClasses } = useRtl()
     const { InputIcon } = useInputIcon(props)
 
@@ -156,6 +159,7 @@ export const VInput = genericComponent<new <T>(
               'v-input--hide-spin-buttons': props.hideSpinButtons,
             },
             densityClasses.value,
+            themeClasses.value,
             rtlClasses.value,
             validationClasses.value,
             props.class,

From d11824ff75b0d19434b068ae9fcaf13a395dd6f9 Mon Sep 17 00:00:00 2001
From: bluxiv <42218869+bluxiv@users.noreply.github.com>
Date: Tue, 23 Apr 2024 04:20:17 +0200
Subject: [PATCH 35/39] fix(VSwitch): transition in RTL (#19495)

---
 packages/vuetify/src/components/VSwitch/VSwitch.sass | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass
index 8ed2ba3bfc7..394a83d2387 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.sass
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass
@@ -100,7 +100,10 @@
   .v-selection-control__input
     border-radius: 50%
     transition: $switch-control-input-transition
-    transform: translateX(-$switch-thumb-transform)
+    +tools.ltr()
+      transform: translateX(-$switch-thumb-transform)
+    +tools.rtl()
+      transform: translateX($switch-thumb-transform)
     position: absolute
 
     .v-icon
@@ -108,7 +111,10 @@
 
   .v-selection-control--dirty
     .v-selection-control__input
-      transform: translateX($switch-thumb-transform)
+      +tools.ltr()
+        transform: translateX($switch-thumb-transform)
+      +tools.rtl()
+        transform: translateX(-$switch-thumb-transform)
 
   &.v-switch--indeterminate
     .v-selection-control__input

From 78fa9b9064123b60ec0e083b4da3552d1e9e2dfa Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 22 Apr 2024 21:29:46 -0500
Subject: [PATCH 36/39] Revert "fix(VProgressLinear): remove locationStyles"

This reverts commit 3f50694e479fae6d8bc8e6cf96953aaf1795005f.

closes #19658
---
 .../src/components/VProgressLinear/VProgressLinear.tsx      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
index aca17367633..c48123febe1 100644
--- a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
+++ b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
@@ -6,6 +6,7 @@ import { useBackgroundColor, useTextColor } from '@/composables/color'
 import { makeComponentProps } from '@/composables/component'
 import { useIntersectionObserver } from '@/composables/intersectionObserver'
 import { useRtl } from '@/composables/locale'
+import { makeLocationProps, useLocation } from '@/composables/location'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
@@ -52,6 +53,7 @@ export const makeVProgressLinearProps = propsFactory({
   roundedBar: Boolean,
 
   ...makeComponentProps(),
+  ...makeLocationProps({ location: 'top' } as const),
   ...makeRoundedProps(),
   ...makeTagProps(),
   ...makeThemeProps(),
@@ -70,6 +72,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
     const progress = useProxiedModel(props, 'modelValue')
     const { isRtl, rtlClasses } = useRtl()
     const { themeClasses } = provideTheme(props)
+    const { locationStyles } = useLocation(props)
     const { textColorClasses, textColorStyles } = useTextColor(props, 'color')
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(computed(() => props.bgColor || props.color))
     const { backgroundColorClasses: barColorClasses, backgroundColorStyles: barColorStyles } = useBackgroundColor(props, 'color')
@@ -117,8 +120,11 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
         ]}
         style={[
           {
+            bottom: props.location === 'bottom' ? 0 : undefined,
+            top: props.location === 'top' ? 0 : undefined,
             height: props.active ? convertToUnit(height.value) : 0,
             '--v-progress-linear-height': convertToUnit(height.value),
+            ...locationStyles.value,
           },
           props.style,
         ]}

From 3d810e1f9a5eadfcf1b4641c8d969b02a9bc0a79 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 22 Apr 2024 21:36:34 -0500
Subject: [PATCH 37/39] fix(VProgressLinear): only apply locationStyles when
 absolute

---
 .../vuetify/src/components/VProgressLinear/VProgressLinear.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
index c48123febe1..301817b5e30 100644
--- a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
+++ b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
@@ -124,7 +124,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
             top: props.location === 'top' ? 0 : undefined,
             height: props.active ? convertToUnit(height.value) : 0,
             '--v-progress-linear-height': convertToUnit(height.value),
-            ...locationStyles.value,
+            ...(props.absolute ? locationStyles.value : {}),
           },
           props.style,
         ]}

From 1c26e1414d9907ed9b933f21e49bedd919a5e036 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Tue, 23 Apr 2024 14:35:33 +0100
Subject: [PATCH 38/39] fix(VTextarea): up/down/home/end keys inside VList
 (#19674)

fixes #19092
---
 packages/vuetify/src/components/VList/VList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
index 9b47788bc8e..868ee43d2cd 100644
--- a/packages/vuetify/src/components/VList/VList.tsx
+++ b/packages/vuetify/src/components/VList/VList.tsx
@@ -207,7 +207,7 @@ export const VList = genericComponent<new <
     function onKeydown (e: KeyboardEvent) {
       const target = e.target as HTMLElement
 
-      if (!contentRef.value || target.tagName === 'INPUT') return
+      if (!contentRef.value || ['INPUT', 'TEXTAREA'].includes(target.tagName)) return
 
       if (e.key === 'ArrowDown') {
         focus('next')

From f04a732b6709aa7592fb3edef080e0206faf729c Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 23 Apr 2024 09:59:06 -0500
Subject: [PATCH 39/39] chore(release): publish v3.5.17

---
 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 08a0b7bbd1a..b3ae1a6e7b6 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.5.16",
+  "version": "3.5.17",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index 70e3131c870..8e47c036e75 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.5.16",
+  "version": "3.5.17",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^22.0.0",
     "tsx": "^4.7.2",
     "vue": "^3.4.21",
-    "vuetify": "^3.5.16"
+    "vuetify": "^3.5.17"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 203bc6fae37..57d655cad2d 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.16",
+  "version": "3.5.17",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.11.0",
     "vue-instantsearch": "^4.15.0",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.5.16"
+    "vuetify": "^3.5.17"
   },
   "devDependencies": {
     "@emailjs/browser": "^4.3.3",
@@ -50,7 +50,7 @@
     "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/compiler-sfc": "^3.4.21",
-    "@vuetify/api-generator": "^3.5.16",
+    "@vuetify/api-generator": "^3.5.17",
     "ajv": "^8.12.0",
     "async-es": "^3.2.5",
     "date-fns": "^3.6.0",
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index 9909e5d98ba..712dd6e32c9 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.16",
+  "version": "3.5.17",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"