From a194622437e9baa0e9202a349fbc97dee95885cf Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Thu, 2 May 2024 19:55:33 -0700
Subject: [PATCH 001/122] fix(VDataTable): change mobile default to false
 (#19744)

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 packages/api-generator/src/locale/en/display.json             | 4 ++--
 .../src/components/VNavigationDrawer/VNavigationDrawer.tsx    | 2 +-
 packages/vuetify/src/composables/display.ts                   | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/api-generator/src/locale/en/display.json b/packages/api-generator/src/locale/en/display.json
index 1fea0af1766..22b1639681f 100644
--- a/packages/api-generator/src/locale/en/display.json
+++ b/packages/api-generator/src/locale/en/display.json
@@ -1,6 +1,6 @@
 {
   "props": {
-    "mobile": "Explicitly designate as a mobile display configuration.",
-    "mobileBreakpoint": "Overrides the display configuration default."
+    "mobile": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint",
+    "mobileBreakpoint": "Overrides the display configuration default screen size that the component should be considered in mobile."
   }
 }
diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
index 55fb512e9bb..ef077b7c8da 100644
--- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
+++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
@@ -87,7 +87,7 @@ export const makeVNavigationDrawerProps = propsFactory({
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDelayProps(),
-  ...makeDisplayProps(),
+  ...makeDisplayProps({ mobile: null }),
   ...makeElevationProps(),
   ...makeLayoutItemProps(),
   ...makeRoundedProps(),
diff --git a/packages/vuetify/src/composables/display.ts b/packages/vuetify/src/composables/display.ts
index eee63db72b6..98e1416ea27 100644
--- a/packages/vuetify/src/composables/display.ts
+++ b/packages/vuetify/src/composables/display.ts
@@ -216,8 +216,8 @@ export function createDisplay (options?: DisplayOptions, ssr?: SSROptions): Disp
 
 export const makeDisplayProps = propsFactory({
   mobile: {
-    type: Boolean,
-    default: null,
+    type: Boolean as PropType<boolean | null>,
+    default: false,
   },
   mobileBreakpoint: [Number, String] as PropType<number | DisplayBreakpoint>,
 }, 'display')

From 6b06e37d8a7e60fd5ac238986d466e29cb51a111 Mon Sep 17 00:00:00 2001
From: Matthew Ary <157217+MatthewAry@users.noreply.github.com>
Date: Sat, 4 May 2024 09:05:42 -0700
Subject: [PATCH 002/122] docs(team.json): add new team member (#19750)

---
 packages/docs/src/data/team.json | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/docs/src/data/team.json b/packages/docs/src/data/team.json
index 3a1279181ca..86a2ff2a029 100644
--- a/packages/docs/src/data/team.json
+++ b/packages/docs/src/data/team.json
@@ -182,6 +182,22 @@
     "twitter": "kieuminhcanh",
     "joined": "April 2024"
   },
+  "MatthewAry": {
+    "discord": "bitshift_",
+    "focus": [
+      "[vuetifyjs/*](https://github.com/vuetifyjs)"
+    ],
+    "languages": [
+      "English"
+    ],
+    "location": "Spokane, WA, USA",
+    "name": "Matthew Ary",
+    "twitter": "MatthewAry",
+    "linkedin": "matthewary",
+    "work": "Director of Product Development at Symplsoft Inc.",
+    "team": "core",
+    "joined": "May 2024"
+  },
   "jacekkarczmarczyk": {
     "discord": "jacek#3542",
     "languages": [

From daa96e98f1a6d84c14a3c610e654faed47160c62 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 5 May 2024 17:28:44 -0500
Subject: [PATCH 003/122] fix(VToolbar/VAppBar): nav-icon and title alignment

supposed to line up with default v-list-item spacing
---
 packages/vuetify/src/components/VToolbar/_variables.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/VToolbar/_variables.scss b/packages/vuetify/src/components/VToolbar/_variables.scss
index 333b257f9d2..e1dfb43a657 100644
--- a/packages/vuetify/src/components/VToolbar/_variables.scss
+++ b/packages/vuetify/src/components/VToolbar/_variables.scss
@@ -17,13 +17,13 @@ $toolbar-collapsed-max-width: 112px !default;
 $toolbar-elevation: 0 !default;
 $toolbar-flat-elevation: 0 !default;
 $toolbar-flex: none !default;
-$toolbar-prepend-btn-margin-start: 10px !default;
-$toolbar-append-btn-margin-end: 10px !default;
+$toolbar-prepend-btn-margin-start: 4px !default;
+$toolbar-append-btn-margin-end: 4px !default;
 $toolbar-rounded-border-radius: variables.$border-radius-root !default;
 $toolbar-transition: .2s variables.$standard-easing !default;
 
 // VToolbarTitle
-$toolbar-title-margin: 16px !default;
+$toolbar-title-margin: 20px !default;
 $toolbar-title-font-size: 1.25rem !default;
 $toolbar-title-font-weight: 400 !default;
 $toolbar-title-letter-spacing: 0 !default;

From 43529fa936cbb0d58d78e1c48aebc1e6c7fe3d1e Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 5 May 2024 19:17:43 -0500
Subject: [PATCH 004/122] fix(colors): apply theme-on-surface override for bg
 text color

---
 packages/vuetify/src/styles/generic/_colors.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vuetify/src/styles/generic/_colors.scss b/packages/vuetify/src/styles/generic/_colors.scss
index ce4d091c42a..487ebe6ddd5 100644
--- a/packages/vuetify/src/styles/generic/_colors.scss
+++ b/packages/vuetify/src/styles/generic/_colors.scss
@@ -13,6 +13,7 @@
 @mixin background-text-color($color_name, $color_type) {
   $map_value: map-deep-get(colors.$text-on-colors, $color_name, $color_type);
 
+  --v-theme-on-surface: #{$map_value} !important;
   color: $map_value !important;
 }
 

From 67b30e70435f7bcbb7abb64d2a5b9c4dc191355d Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 6 May 2024 20:39:51 +1000
Subject: [PATCH 005/122] fix(VTabs): inherit attrs and scope id

fixes #19752
fixes #19754
---
 packages/vuetify/src/components/VTabs/VTabs.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VTabs/VTabs.tsx b/packages/vuetify/src/components/VTabs/VTabs.tsx
index df42d23bb31..31ddf16dc35 100644
--- a/packages/vuetify/src/components/VTabs/VTabs.tsx
+++ b/packages/vuetify/src/components/VTabs/VTabs.tsx
@@ -12,6 +12,7 @@ import { useBackgroundColor } from '@/composables/color'
 import { provideDefaults } from '@/composables/defaults'
 import { makeDensityProps, useDensity } from '@/composables/density'
 import { useProxiedModel } from '@/composables/proxiedModel'
+import { useScopeId } from '@/composables/scopeId'
 import { makeTagProps } from '@/composables/tag'
 
 // Utilities
@@ -86,11 +87,12 @@ export const VTabs = genericComponent<VTabsSlots>()({
     'update:modelValue': (v: unknown) => true,
   },
 
-  setup (props, { slots }) {
+  setup (props, { attrs, slots }) {
     const model = useProxiedModel(props, 'modelValue')
     const items = computed(() => parseItems(props.items))
     const { densityClasses } = useDensity(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))
+    const { scopeId } = useScopeId()
 
     provideDefaults({
       VTab: {
@@ -132,6 +134,8 @@ export const VTabs = genericComponent<VTabsSlots>()({
             ]}
             role="tablist"
             symbol={ VTabsSymbol }
+            { ...scopeId }
+            { ...attrs }
           >
             { slots.default?.() ?? items.value.map(item => (
               slots.tab?.({ item }) ?? (
@@ -151,6 +155,7 @@ export const VTabs = genericComponent<VTabsSlots>()({
             <VTabsWindow
               v-model={ model.value }
               key="tabs-window"
+              { ...scopeId }
             >
               { items.value.map(item => slots.item?.({ item }) ?? (
                 <VTabsWindowItem

From 53d6bb9138be4eb19a85f0722253a7aba3065cc9 Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Tue, 7 May 2024 01:58:09 +1000
Subject: [PATCH 006/122] fix(VNumberInput): use VTextField as the base
 component (#19714)

fixes #19659
fixes #19757
---
 .../src/labs/VNumberInput/VNumberInput.tsx    | 184 +++++++-----------
 1 file changed, 72 insertions(+), 112 deletions(-)

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
index ea9b8cced49..3fa97c4cf7a 100644
--- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -5,27 +5,24 @@ import './VNumberInput.sass'
 import { VBtn } from '../../components/VBtn'
 import { VDefaultsProvider } from '../../components/VDefaultsProvider'
 import { VDivider } from '../../components/VDivider'
-import { filterFieldProps, makeVFieldProps, VField } from '@/components/VField/VField'
-import { makeVInputProps, VInput } from '@/components/VInput/VInput'
+import { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextField'
 
 // Composables
-import { makeFocusProps, useFocus } from '@/composables/focus'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, ref, watchEffect } from 'vue'
-import { clamp, filterInputAttrs, genericComponent, getDecimals, only, propsFactory, useRender } from '@/util'
+import { computed, watchEffect } from 'vue'
+import { clamp, genericComponent, getDecimals, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
-import type { VFieldSlots } from '@/components/VField/VField'
-import type { VInputSlots } from '@/components/VInput/VInput'
+import type { VTextFieldSlots } from '@/components/VTextField/VTextField'
 
 type ControlSlot = {
   click: () => void
 }
 
-type VNumberInputSlots = Omit<VInputSlots & VFieldSlots, 'default'> & {
+type VNumberInputSlots = Omit<VTextFieldSlots, 'default'> & {
   increment: ControlSlot
   decrement: ControlSlot
 }
@@ -52,31 +49,7 @@ const makeVNumberInputProps = propsFactory({
     default: 1,
   },
 
-  ...only(makeVInputProps(), [
-    'density',
-    'disabled',
-    'focused',
-    'hideDetails',
-    'hint',
-    'label',
-    'persistentHint',
-    'readonly',
-  ]),
-  ...only(makeVFieldProps(), [
-    'baseColor',
-    'bgColor',
-    'class',
-    'color',
-    'disabled',
-    'error',
-    'loading',
-    'reverse',
-    'rounded',
-    'style',
-    'theme',
-    'variant',
-  ]),
-  ...makeFocusProps(),
+  ...omit(makeVTextFieldProps(), ['appendInnerIcon', 'prependInnerIcon']),
 }, 'VNumberInput')
 
 export const VNumberInput = genericComponent<VNumberInputSlots>()({
@@ -86,11 +59,6 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
 
   props: {
     ...makeVNumberInputProps(),
-
-    modelValue: {
-      type: Number,
-      default: undefined,
-    },
   },
 
   emits: {
@@ -99,8 +67,6 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
 
   setup (props, { attrs, emit, slots }) {
     const model = useProxiedModel(props, 'modelValue')
-    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)
@@ -120,10 +86,6 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       }
     })
 
-    function onFocus () {
-      if (!isFocused.value) focus()
-    }
-
     const controlVariant = computed(() => {
       return props.hideInput ? 'stacked' : props.controlVariant
     })
@@ -156,7 +118,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
 
     function onKeydown (e: KeyboardEvent) {
       if (
-        ['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace'].includes(e.key) ||
+        ['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Tab'].includes(e.key) ||
         e.ctrlKey
       ) return
 
@@ -177,15 +139,12 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       }
     }
 
-    function onInput (e: Event) {
-      const el = e.target as HTMLInputElement
-      model.value = el.value ? +(el.value) : undefined
+    function onModelUpdate (v: string) {
+      model.value = v ? +(v) : undefined
     }
 
     useRender(() => {
-      const fieldProps = filterFieldProps(props)
-      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)
-      const { modelValue: _, ...inputProps } = VInput.filterProps(props)
+      const { modelValue: _, ...textFieldProps } = VTextField.filterProps(props)
 
       function controlNode () {
         const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%'
@@ -201,6 +160,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                   name="decrement-btn"
                   icon="$expand"
                   size="small"
+                  tabindex="-1"
                   onClick={ onClickDown }
                 />
               ) : (
@@ -236,6 +196,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                   icon="$collapse"
                   onClick={ onClickUp }
                   size="small"
+                  tabindex="-1"
                 />
               ) : (
                 <VDefaultsProvider
@@ -262,8 +223,53 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
         return !props.hideInput && !props.inset ? <VDivider vertical /> : undefined
       }
 
+      const appendInnerControl =
+        controlVariant.value === 'split'
+          ? (
+            <div class="v-number-input__control">
+              <VDivider vertical />
+
+              <VBtn
+                flat
+                height="100%"
+                icon="$plus"
+                tile
+                tabindex="-1"
+                onClick={ onClickUp }
+              />
+            </div>
+          ) : (!props.reverse
+            ? <>{ dividerNode() }{ controlNode() }</>
+            : undefined)
+
+      const hasAppendInner = slots['append-inner'] || appendInnerControl
+
+      const prependInnerControl =
+        controlVariant.value === 'split'
+          ? (
+            <div class="v-number-input__control">
+              <VBtn
+                flat
+                height="100%"
+                icon="$minus"
+                tile
+                tabindex="-1"
+                onClick={ onClickDown }
+              />
+
+              <VDivider vertical />
+            </div>
+          ) : (props.reverse
+            ? <>{ controlNode() }{ dividerNode() }</>
+            : undefined)
+
+      const hasPrependInner = slots['prepend-inner'] || prependInnerControl
+
       return (
-        <VInput
+        <VTextField
+          modelValue={ model.value }
+          onUpdate:modelValue={ onModelUpdate }
+          onKeydown={ onKeydown }
           class={[
             'v-number-input',
             {
@@ -276,71 +282,25 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
             },
             props.class,
           ]}
-          { ...rootAttrs }
-          { ...inputProps }
-          focused={ isFocused.value }
+          { ...textFieldProps }
           style={ props.style }
         >
           {{
             ...slots,
-            default: () => (
-              <VField
-                { ...fieldProps }
-                active
-                focused={ isFocused.value }
-              >
-                {{
-                  ...slots,
-                  default: ({
-                    props: { class: fieldClass, ...slotProps },
-                  }) => (
-                    <input
-                      ref={ inputRef }
-                      type="text"
-                      value={ model.value }
-                      onInput={ onInput }
-                      onKeydown={ onKeydown }
-                      class={ fieldClass }
-                      onFocus={ onFocus }
-                      onBlur={ blur }
-                      { ...inputAttrs }
-                    />
-                  ),
-                  'append-inner': controlVariant.value === 'split' ? () => (
-                    <div class="v-number-input__control">
-                      <VDivider vertical />
-
-                      <VBtn
-                        flat
-                        height="100%"
-                        icon="$plus"
-                        tile
-                        onClick={ onClickUp }
-                      />
-                    </div>
-                  ) : (!props.reverse
-                    ? () => <>{ dividerNode() }{ controlNode() }</>
-                    : undefined),
-                  'prepend-inner': controlVariant.value === 'split' ? () => (
-                    <div class="v-number-input__control">
-                      <VBtn
-                        flat
-                        height="100%"
-                        icon="$minus"
-                        tile
-                        onClick={ onClickDown }
-                      />
-
-                      <VDivider vertical />
-                    </div>
-                  ) : (props.reverse
-                    ? () => <>{ controlNode() }{ dividerNode() }</>
-                    : undefined),
-                }}
-              </VField>
-            ),
+            'append-inner': hasAppendInner ? (...args) => (
+              <>
+                { slots['append-inner']?.(...args) }
+                { appendInnerControl }
+              </>
+            ) : undefined,
+            'prepend-inner': hasPrependInner ? (...args) => (
+              <>
+                { prependInnerControl }
+                { slots['prepend-inner']?.(...args) }
+              </>
+            ) : undefined,
           }}
-        </VInput>
+        </VTextField>
       )
     })
   },

From fce7f758cfa26dac23e79fafa5c6fc5b67294e5d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 6 May 2024 11:51:17 -0500
Subject: [PATCH 007/122] fix(VFileInput): correctly set single value to null
 when cleared

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

diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
index 6e613ab7a0d..b074aa85f75 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({
   ...makeVInputProps({ prependIcon: '$file' }),
 
   modelValue: {
-    type: [Array, Object] as PropType<File[] | File>,
+    type: [Array, Object] as PropType<File[] | File | null>,
     default: (props: any) => props.multiple ? [] : null,
     validator: (val: any) => {
       return wrapInArray(val).every(v => v != null && typeof v === 'object')
@@ -98,7 +98,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
       'modelValue',
       props.modelValue,
       val => wrapInArray(val),
-      val => (props.multiple || Array.isArray(props.modelValue)) ? val : val[0],
+      val => (props.multiple || Array.isArray(props.modelValue)) ? val : (val[0] ?? null),
     )
     const { isFocused, focus, blur } = useFocus(props)
     const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined)

From 330baa073d4cc93a996f5e9ca039a8721cef8691 Mon Sep 17 00:00:00 2001
From: Zhaolin Liang <develop0304@outlook.com>
Date: Tue, 7 May 2024 03:42:31 +0800
Subject: [PATCH 008/122] fix(VTreeview): lines prop supports boolean type
 (#19668)

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

diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index a273e4fa568..d059c55f130 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -69,7 +69,7 @@ export const makeVListItemProps = propsFactory({
   appendIcon: IconValue,
   baseColor: String,
   disabled: Boolean,
-  lines: String as PropType<'one' | 'two' | 'three'>,
+  lines: [Boolean, String] as PropType<'one' | 'two' | 'three' | false>,
   link: {
     type: Boolean,
     default: undefined,

From d02e1b3cec7b98a29eb69f42249f15ace6da25f3 Mon Sep 17 00:00:00 2001
From: NassBin <nassimdaikh71@gmail.com>
Date: Tue, 7 May 2024 02:20:46 +0200
Subject: [PATCH 009/122] fix(VAutocomplete): only clear search on blur in
 multiple or using chips/selection shots (#19701)

resolves #19543

Co-authored-by: Yuchao Wu <yuchao.sydneyuni@gmail.com>
---
 packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 81d862e4185..8e2cc9ac41c 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -377,7 +377,7 @@ export const VAutocomplete = genericComponent<new <
           select(displayItems.value[0])
         }
         menu.value = false
-        search.value = ''
+        if (props.multiple || hasSelectionSlot.value) search.value = ''
         selectionIndex.value = -1
       }
     })

From c5a94a0cd01eafebc00e2f1fd746875e7bea87f2 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 7 May 2024 16:29:04 +1000
Subject: [PATCH 010/122] chore: revert unrelated type changes

partially reverts 75ed37b6eeda4434c73bd2089e2fa528ce6323d6
---
 packages/vuetify/src/components/VOverlay/VOverlay.tsx   | 7 ++-----
 packages/vuetify/src/components/VSnackbar/VSnackbar.tsx | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
index 1f8f910efcf..c683fffa6b2 100644
--- a/packages/vuetify/src/components/VOverlay/VOverlay.tsx
+++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -93,10 +93,7 @@ export const makeVOverlayProps = propsFactory({
   disabled: Boolean,
   opacity: [Number, String],
   noClickAnimation: Boolean,
-  modelValue: {
-    type: Boolean as PropType<boolean | null>,
-    default: null,
-  },
+  modelValue: Boolean,
   persistent: Boolean,
   scrim: {
     type: [Boolean, String],
@@ -140,7 +137,7 @@ export const VOverlay = genericComponent<OverlaySlots>()({
   setup (props, { slots, attrs, emit }) {
     const model = useProxiedModel(props, 'modelValue')
     const isActive = computed({
-      get: () => Boolean(model.value),
+      get: () => model.value,
       set: v => {
         if (!(v && props.disabled)) model.value = v
       },
diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
index 74e72b5dc35..600414a1777 100644
--- a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
+++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
@@ -30,7 +30,7 @@ import type { Ref } from 'vue'
 type VSnackbarSlots = {
   activator: { isActive: boolean, props: Record<string, any> }
   default: never
-  actions: { isActive: Ref<boolean | null> }
+  actions: { isActive: Ref<boolean> }
   text: never
 }
 

From 1a8db40219d859631d63c5efb4e6c589296f6d97 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 7 May 2024 16:36:24 +1000
Subject: [PATCH 011/122] chore: update vue to 3.4.27

---
 package.json                                  |   4 +-
 packages/api-generator/package.json           |   2 +-
 packages/docs/package.json                    |   4 +-
 packages/vuetify/package.json                 |   2 +-
 .../components/VSlideGroup/VSlideGroup.tsx    |   2 +-
 packages/vuetify/src/globals.d.ts             |  10 --
 yarn.lock                                     | 126 +++++++++++++-----
 7 files changed, 101 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index 986155b7f7d..df2ba25274d 100755
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@unhead/vue": "^1.9.4",
-    "@vue/compiler-sfc": "^3.4.21",
+    "@vue/compiler-sfc": "^3.4.27",
     "@vueuse/head": "^1.3.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^28.1.3",
@@ -82,7 +82,7 @@
     "upath": "^2.0.1",
     "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-warmup": "^0.1.0",
-    "vue": "^3.4.21",
+    "vue": "^3.4.27",
     "vue-analytics": "^5.16.1",
     "vue-router": "^4.3.0",
     "vue-tsc": "^1.8.27",
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index ba8f15c7a9c..113dae776c2 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -16,7 +16,7 @@
     "prettier": "^3.2.5",
     "ts-morph": "^22.0.0",
     "tsx": "^4.7.2",
-    "vue": "^3.4.21",
+    "vue": "^3.4.27",
     "vuetify": "^3.6.3"
   },
   "devDependencies": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 449a64171ab..3385989eca2 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -33,7 +33,7 @@
     "prismjs": "^1.29.0",
     "roboto-fontface": "^0.10.0",
     "vee-validate": "^4.12.6",
-    "vue": "^3.4.21",
+    "vue": "^3.4.27",
     "vue-gtag-next": "^1.14.0",
     "vue-i18n": "^9.11.0",
     "vue-instantsearch": "^4.15.0",
@@ -49,7 +49,7 @@
     "@types/prismjs": "^1.26.3",
     "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "^3.4.21",
+    "@vue/compiler-sfc": "^3.4.27",
     "@vuetify/api-generator": "^3.6.3",
     "ajv": "^8.12.0",
     "async-es": "^3.2.5",
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index a5addaba149..1b82b1f18ed 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -138,7 +138,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/babel-plugin-jsx": "^1.2.2",
-    "@vue/test-utils": "2.4.5",
+    "@vue/test-utils": "2.4.6",
     "acorn-walk": "^8.3.2",
     "autoprefixer": "^10.4.19",
     "babel-plugin-add-import-extension": "1.5.1",
diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
index 676486fe22e..0fa926635c9 100644
--- a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
+++ b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
@@ -207,7 +207,7 @@ export const VSlideGroup = genericComponent<new <T>(
       }
     }
 
-    function onScroll (e: UIEvent) {
+    function onScroll (e: Event) {
       const { scrollTop, scrollLeft } = e.target as HTMLElement
 
       scrollOffset.value = isHorizontal.value ? scrollLeft : scrollTop
diff --git a/packages/vuetify/src/globals.d.ts b/packages/vuetify/src/globals.d.ts
index cb06c7aeac7..8068100005b 100644
--- a/packages/vuetify/src/globals.d.ts
+++ b/packages/vuetify/src/globals.d.ts
@@ -58,16 +58,6 @@ declare global {
     path?: EventTarget[]
   }
 
-  interface UIEvent {
-    initUIEvent (
-      typeArg: string,
-      canBubbleArg: boolean,
-      cancelableArg: boolean,
-      viewArg: Window,
-      detailArg: number,
-    ): void
-  }
-
   interface MouseEvent {
     sourceCapabilities?: { firesTouchEvents: boolean }
   }
diff --git a/yarn.lock b/yarn.lock
index 063b4d09793..e54478ecf52 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3991,6 +3991,17 @@
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
+"@vue/compiler-core@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.27.tgz#e69060f4b61429fe57976aa5872cfa21389e4d91"
+  integrity sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==
+  dependencies:
+    "@babel/parser" "^7.24.4"
+    "@vue/shared" "3.4.27"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.0"
+
 "@vue/compiler-dom@3.4.21", "@vue/compiler-dom@^3.3.0":
   version "3.4.21"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz#0077c355e2008207283a5a87d510330d22546803"
@@ -3999,7 +4010,30 @@
     "@vue/compiler-core" "3.4.21"
     "@vue/shared" "3.4.21"
 
-"@vue/compiler-sfc@3.4.21", "@vue/compiler-sfc@^3.2.47", "@vue/compiler-sfc@^3.4.15", "@vue/compiler-sfc@^3.4.21":
+"@vue/compiler-dom@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz#d51d35f40d00ce235d7afc6ad8b09dfd92b1cc1c"
+  integrity sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==
+  dependencies:
+    "@vue/compiler-core" "3.4.27"
+    "@vue/shared" "3.4.27"
+
+"@vue/compiler-sfc@3.4.27", "@vue/compiler-sfc@^3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz#399cac1b75c6737bf5440dc9cf3c385bb2959701"
+  integrity sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==
+  dependencies:
+    "@babel/parser" "^7.24.4"
+    "@vue/compiler-core" "3.4.27"
+    "@vue/compiler-dom" "3.4.27"
+    "@vue/compiler-ssr" "3.4.27"
+    "@vue/shared" "3.4.27"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.10"
+    postcss "^8.4.38"
+    source-map-js "^1.2.0"
+
+"@vue/compiler-sfc@^3.2.47", "@vue/compiler-sfc@^3.4.15":
   version "3.4.21"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz#4af920dc31ab99e1ff5d152b5fe0ad12181145b2"
   integrity sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==
@@ -4022,6 +4056,14 @@
     "@vue/compiler-dom" "3.4.21"
     "@vue/shared" "3.4.21"
 
+"@vue/compiler-ssr@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.27.tgz#2a8ecfef1cf448b09be633901a9c020360472e3d"
+  integrity sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==
+  dependencies:
+    "@vue/compiler-dom" "3.4.27"
+    "@vue/shared" "3.4.27"
+
 "@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.5.1":
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.1.tgz#7f71f31e40973eeee65b9a64382b13593fdbd697"
@@ -4042,31 +4084,39 @@
     path-browserify "^1.0.1"
     vue-template-compiler "^2.7.14"
 
-"@vue/reactivity@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.21.tgz#affd3415115b8ebf4927c8d2a0d6a24bccfa9f02"
-  integrity sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==
+"@vue/reactivity@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.27.tgz#6ece72331bf719953f5eaa95ec60b2b8d49e3791"
+  integrity sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==
   dependencies:
-    "@vue/shared" "3.4.21"
+    "@vue/shared" "3.4.27"
 
-"@vue/runtime-core@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.21.tgz#3749c3f024a64c4c27ecd75aea4ca35634db0062"
-  integrity sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==
+"@vue/runtime-core@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.27.tgz#1b6e1d71e4604ba7442dd25ed22e4a1fc6adbbda"
+  integrity sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==
   dependencies:
-    "@vue/reactivity" "3.4.21"
-    "@vue/shared" "3.4.21"
+    "@vue/reactivity" "3.4.27"
+    "@vue/shared" "3.4.27"
 
-"@vue/runtime-dom@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz#91f867ef64eff232cac45095ab28ebc93ac74588"
-  integrity sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==
+"@vue/runtime-dom@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.27.tgz#fe8d1ce9bbe8921d5dd0ad5c10df0e04ef7a5ee7"
+  integrity sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==
   dependencies:
-    "@vue/runtime-core" "3.4.21"
-    "@vue/shared" "3.4.21"
+    "@vue/runtime-core" "3.4.27"
+    "@vue/shared" "3.4.27"
     csstype "^3.1.3"
 
-"@vue/server-renderer@3.4.21", "@vue/server-renderer@^3.2.26":
+"@vue/server-renderer@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.27.tgz#3306176f37e648ba665f97dda3ce705687be63d2"
+  integrity sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==
+  dependencies:
+    "@vue/compiler-ssr" "3.4.27"
+    "@vue/shared" "3.4.27"
+
+"@vue/server-renderer@^3.2.26":
   version "3.4.21"
   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.21.tgz#150751579d26661ee3ed26a28604667fa4222a97"
   integrity sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==
@@ -4079,10 +4129,15 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
   integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
 
-"@vue/test-utils@2.4.5":
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.4.5.tgz#010aa4debe6602d83dc75f233b397092742105a2"
-  integrity sha512-oo2u7vktOyKUked36R93NB7mg2B+N7Plr8lxp2JBGwr18ch6EggFjixSCdIVVLkT6Qr0z359Xvnafc9dcKyDUg==
+"@vue/shared@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.27.tgz#f05e3cd107d157354bb4ae7a7b5fc9cf73c63b50"
+  integrity sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==
+
+"@vue/test-utils@2.4.6":
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.4.6.tgz#7d534e70c4319d2a587d6a3b45a39e9695ade03c"
+  integrity sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==
   dependencies:
     js-beautify "^1.14.9"
     vue-component-type-helpers "^2.0.0"
@@ -10419,6 +10474,13 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.4"
 
+magic-string@^0.30.10:
+  version "0.30.10"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.10.tgz#123d9c41a0cb5640c892b041d4cfb3bd0aa4b39e"
+  integrity sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 magic-string@^0.30.3, magic-string@^0.30.4, magic-string@^0.30.5, magic-string@^0.30.7, magic-string@^0.30.9:
   version "0.30.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.9.tgz#8927ae21bfdd856310e07a1bc8dd5e73cb6c251d"
@@ -14806,16 +14868,16 @@ vue-tsc@^1.8.27:
     "@vue/language-core" "1.8.27"
     semver "^7.5.4"
 
-vue@^3.4.21:
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.21.tgz#69ec30e267d358ee3a0ce16612ba89e00aaeb731"
-  integrity sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==
+vue@^3.4.27:
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.27.tgz#40b7d929d3e53f427f7f5945386234d2854cc2a1"
+  integrity sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==
   dependencies:
-    "@vue/compiler-dom" "3.4.21"
-    "@vue/compiler-sfc" "3.4.21"
-    "@vue/runtime-dom" "3.4.21"
-    "@vue/server-renderer" "3.4.21"
-    "@vue/shared" "3.4.21"
+    "@vue/compiler-dom" "3.4.27"
+    "@vue/compiler-sfc" "3.4.27"
+    "@vue/runtime-dom" "3.4.27"
+    "@vue/server-renderer" "3.4.27"
+    "@vue/shared" "3.4.27"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"

From 94a05d1f1aae54b97a9a9ea27c61d3c28314f953 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 7 May 2024 16:44:43 +1000
Subject: [PATCH 012/122] fix(VList): allow group activators to be links

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

diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index d059c55f130..ec51bda0e14 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -174,10 +174,12 @@ export const VListItem = genericComponent<VListItemSlots>()({
     function onClick (e: MouseEvent) {
       emit('click', e)
 
-      if (isGroupActivator || !isClickable.value) return
+      if (!isClickable.value) return
 
       link.navigate?.(e)
 
+      if (isGroupActivator) return
+
       if (root.activatable.value) {
         activate(!isActivated.value, e)
       } else if (root.selectable.value) {

From 8f0322d095f277074678f4b454bdc83203d592bc Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 7 May 2024 17:49:51 +1000
Subject: [PATCH 013/122] fix(VResponsive): contentClass accepts array and
 object

fixes #19729
---
 packages/vuetify/src/components/VResponsive/VResponsive.tsx | 2 +-
 packages/vuetify/src/composables/component.ts               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/VResponsive/VResponsive.tsx b/packages/vuetify/src/components/VResponsive/VResponsive.tsx
index 25edf092a90..f23f011e8a9 100644
--- a/packages/vuetify/src/components/VResponsive/VResponsive.tsx
+++ b/packages/vuetify/src/components/VResponsive/VResponsive.tsx
@@ -28,7 +28,7 @@ export function useAspectStyles (props: { aspectRatio?: string | number }) {
 
 export const makeVResponsiveProps = propsFactory({
   aspectRatio: [String, Number],
-  contentClass: String,
+  contentClass: null,
   inline: Boolean,
 
   ...makeComponentProps(),
diff --git a/packages/vuetify/src/composables/component.ts b/packages/vuetify/src/composables/component.ts
index e1d961c0ef4..c5d426d3882 100644
--- a/packages/vuetify/src/composables/component.ts
+++ b/packages/vuetify/src/composables/component.ts
@@ -7,13 +7,13 @@ import type { PropType, StyleValue } from 'vue'
 export type ClassValue = any
 
 export interface ComponentProps {
-  class?: ClassValue
+  class: ClassValue
   style: StyleValue | undefined
 }
 
 // Composables
 export const makeComponentProps = propsFactory({
-  class: [String, Array] as PropType<ClassValue>,
+  class: [String, Array, Object] as PropType<ClassValue>,
   style: {
     type: [String, Array, Object] as PropType<StyleValue>,
     default: null,

From 6c78760ce11f836afac38b6a7ce6c26b1aa74b28 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 7 May 2024 17:59:04 +1000
Subject: [PATCH 014/122] chore: update vue-instantsearch to 4.16.1

---
 packages/docs/package.json |   4 +-
 yarn.lock                  | 392 ++++++++++++++++---------------------
 2 files changed, 167 insertions(+), 229 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index 3385989eca2..2d39be53f3d 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -24,7 +24,7 @@
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vuetify/one": "^1.8.1",
-    "algoliasearch": "^4.23.2",
+    "algoliasearch": "^4.23.3",
     "fflate": "^0.8.2",
     "isomorphic-fetch": "^3.0.0",
     "lodash-es": "^4.17.21",
@@ -36,7 +36,7 @@
     "vue": "^3.4.27",
     "vue-gtag-next": "^1.14.0",
     "vue-i18n": "^9.11.0",
-    "vue-instantsearch": "^4.15.0",
+    "vue-instantsearch": "^4.16.1",
     "vue-prism-component": "^2.0.0",
     "vuetify": "^3.6.3"
   },
diff --git a/yarn.lock b/yarn.lock
index e54478ecf52..42fb9ecea29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,131 +7,131 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@algolia/cache-browser-local-storage@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.23.2.tgz#060d15e89588fcac18e73643201fce0f4f7d5ca0"
-  integrity sha512-PvRQdCmtiU22dw9ZcTJkrVKgNBVAxKgD0/cfiqyxhA5+PHzA2WDt6jOmZ9QASkeM2BpyzClJb/Wr1yt2/t78Kw==
-  dependencies:
-    "@algolia/cache-common" "4.23.2"
-
-"@algolia/cache-common@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.23.2.tgz#c68706ce34b18377e56e71ac13cce2dd5662dcee"
-  integrity sha512-OUK/6mqr6CQWxzl/QY0/mwhlGvS6fMtvEPyn/7AHUx96NjqDA4X4+Ju7aXFQKh+m3jW9VPB0B9xvEQgyAnRPNw==
-
-"@algolia/cache-in-memory@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.23.2.tgz#94cd828275d7a12186959bf1b95a13247e103b23"
-  integrity sha512-rfbi/SnhEa3MmlqQvgYz/9NNJ156NkU6xFxjbxBtLWnHbpj+qnlMoKd+amoiacHRITpajg6zYbLM9dnaD3Bczw==
-  dependencies:
-    "@algolia/cache-common" "4.23.2"
-
-"@algolia/client-account@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.23.2.tgz#b53cb14e730fd8e0a0a227cf650b287b570a08bc"
-  integrity sha512-VbrOCLIN/5I7iIdskSoSw3uOUPF516k4SjDD4Qz3BFwa3of7D9A0lzBMAvQEJJEPHWdVraBJlGgdJq/ttmquJQ==
-  dependencies:
-    "@algolia/client-common" "4.23.2"
-    "@algolia/client-search" "4.23.2"
-    "@algolia/transporter" "4.23.2"
-
-"@algolia/client-analytics@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.23.2.tgz#7fdcf1cb27f0ae93e5da6beb4e612fc06a880b0c"
-  integrity sha512-lLj7irsAztGhMoEx/SwKd1cwLY6Daf1Q5f2AOsZacpppSvuFvuBrmkzT7pap1OD/OePjLKxicJS8wNA0+zKtuw==
-  dependencies:
-    "@algolia/client-common" "4.23.2"
-    "@algolia/client-search" "4.23.2"
-    "@algolia/requester-common" "4.23.2"
-    "@algolia/transporter" "4.23.2"
-
-"@algolia/client-common@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.23.2.tgz#e5f86fc2de707eb6bf9f1109b70187dae179c72c"
-  integrity sha512-Q2K1FRJBern8kIfZ0EqPvUr3V29ICxCm/q42zInV+VJRjldAD9oTsMGwqUQ26GFMdFYmqkEfCbY4VGAiQhh22g==
-  dependencies:
-    "@algolia/requester-common" "4.23.2"
-    "@algolia/transporter" "4.23.2"
-
-"@algolia/client-personalization@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-4.23.2.tgz#0472d9c207402eefcc9c98f7ffba5d26fe8e2fd0"
-  integrity sha512-vwPsgnCGhUcHhhQG5IM27z8q7dWrN9itjdvgA6uKf2e9r7vB+WXt4OocK0CeoYQt3OGEAExryzsB8DWqdMK5wg==
-  dependencies:
-    "@algolia/client-common" "4.23.2"
-    "@algolia/requester-common" "4.23.2"
-    "@algolia/transporter" "4.23.2"
-
-"@algolia/client-search@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.23.2.tgz#9b2741f0a209596459f06a44583118207ea287f7"
-  integrity sha512-CxSB29OVGSE7l/iyoHvamMonzq7Ev8lnk/OkzleODZ1iBcCs3JC/XgTIKzN/4RSTrJ9QybsnlrN/bYCGufo7qw==
-  dependencies:
-    "@algolia/client-common" "4.23.2"
-    "@algolia/requester-common" "4.23.2"
-    "@algolia/transporter" "4.23.2"
+"@algolia/cache-browser-local-storage@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.23.3.tgz#0cc26b96085e1115dac5fcb9d826651ba57faabc"
+  integrity sha512-vRHXYCpPlTDE7i6UOy2xE03zHF2C8MEFjPN2v7fRbqVpcOvAUQK81x3Kc21xyb5aSIpYCjWCZbYZuz8Glyzyyg==
+  dependencies:
+    "@algolia/cache-common" "4.23.3"
+
+"@algolia/cache-common@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.23.3.tgz#3bec79092d512a96c9bfbdeec7cff4ad36367166"
+  integrity sha512-h9XcNI6lxYStaw32pHpB1TMm0RuxphF+Ik4o7tcQiodEdpKK+wKufY6QXtba7t3k8eseirEMVB83uFFF3Nu54A==
+
+"@algolia/cache-in-memory@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.23.3.tgz#3945f87cd21ffa2bec23890c85305b6b11192423"
+  integrity sha512-yvpbuUXg/+0rbcagxNT7un0eo3czx2Uf0y4eiR4z4SD7SiptwYTpbuS0IHxcLHG3lq22ukx1T6Kjtk/rT+mqNg==
+  dependencies:
+    "@algolia/cache-common" "4.23.3"
+
+"@algolia/client-account@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.23.3.tgz#8751bbf636e6741c95e7c778488dee3ee430ac6f"
+  integrity sha512-hpa6S5d7iQmretHHF40QGq6hz0anWEHGlULcTIT9tbUssWUriN9AUXIFQ8Ei4w9azD0hc1rUok9/DeQQobhQMA==
+  dependencies:
+    "@algolia/client-common" "4.23.3"
+    "@algolia/client-search" "4.23.3"
+    "@algolia/transporter" "4.23.3"
+
+"@algolia/client-analytics@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.23.3.tgz#f88710885278fe6fb6964384af59004a5a6f161d"
+  integrity sha512-LBsEARGS9cj8VkTAVEZphjxTjMVCci+zIIiRhpFun9jGDUlS1XmhCW7CTrnaWeIuCQS/2iPyRqSy1nXPjcBLRA==
+  dependencies:
+    "@algolia/client-common" "4.23.3"
+    "@algolia/client-search" "4.23.3"
+    "@algolia/requester-common" "4.23.3"
+    "@algolia/transporter" "4.23.3"
+
+"@algolia/client-common@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.23.3.tgz#891116aa0db75055a7ecc107649f7f0965774704"
+  integrity sha512-l6EiPxdAlg8CYhroqS5ybfIczsGUIAC47slLPOMDeKSVXYG1n0qGiz4RjAHLw2aD0xzh2EXZ7aRguPfz7UKDKw==
+  dependencies:
+    "@algolia/requester-common" "4.23.3"
+    "@algolia/transporter" "4.23.3"
+
+"@algolia/client-personalization@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-4.23.3.tgz#35fa8e5699b0295fbc400a8eb211dc711e5909db"
+  integrity sha512-3E3yF3Ocr1tB/xOZiuC3doHQBQ2zu2MPTYZ0d4lpfWads2WTKG7ZzmGnsHmm63RflvDeLK/UVx7j2b3QuwKQ2g==
+  dependencies:
+    "@algolia/client-common" "4.23.3"
+    "@algolia/requester-common" "4.23.3"
+    "@algolia/transporter" "4.23.3"
+
+"@algolia/client-search@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.23.3.tgz#a3486e6af13a231ec4ab43a915a1f318787b937f"
+  integrity sha512-P4VAKFHqU0wx9O+q29Q8YVuaowaZ5EM77rxfmGnkHUJggh28useXQdopokgwMeYw2XUht49WX5RcTQ40rZIabw==
+  dependencies:
+    "@algolia/client-common" "4.23.3"
+    "@algolia/requester-common" "4.23.3"
+    "@algolia/transporter" "4.23.3"
 
 "@algolia/events@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@algolia/events/-/events-4.0.1.tgz#fd39e7477e7bc703d7f893b556f676c032af3950"
   integrity sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ==
 
-"@algolia/logger-common@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.23.2.tgz#5441a828f0fad1ceaae3a27caec7b663d40dd27f"
-  integrity sha512-jGM49Q7626cXZ7qRAWXn0jDlzvoA1FvN4rKTi1g0hxKsTTSReyYk0i1ADWjChDPl3Q+nSDhJuosM2bBUAay7xw==
-
-"@algolia/logger-console@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.23.2.tgz#fda4252bb02df7c52a92c63f1e357bf7370cc8db"
-  integrity sha512-oo+lnxxEmlhTBTFZ3fGz1O8PJ+G+8FiAoMY2Qo3Q4w23xocQev6KqDTA1JQAGPDxAewNA2VBwWOsVXeXFjrI/Q==
-  dependencies:
-    "@algolia/logger-common" "4.23.2"
-
-"@algolia/recommend@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/recommend/-/recommend-4.23.2.tgz#02bf57f836ced2c850633239d493a0414be76a7f"
-  integrity sha512-Q75CjnzRCDzgIlgWfPnkLtrfF4t82JCirhalXkSSwe/c1GH5pWh4xUyDOR3KTMo+YxxX3zTlrL/FjHmUJEWEcg==
-  dependencies:
-    "@algolia/cache-browser-local-storage" "4.23.2"
-    "@algolia/cache-common" "4.23.2"
-    "@algolia/cache-in-memory" "4.23.2"
-    "@algolia/client-common" "4.23.2"
-    "@algolia/client-search" "4.23.2"
-    "@algolia/logger-common" "4.23.2"
-    "@algolia/logger-console" "4.23.2"
-    "@algolia/requester-browser-xhr" "4.23.2"
-    "@algolia/requester-common" "4.23.2"
-    "@algolia/requester-node-http" "4.23.2"
-    "@algolia/transporter" "4.23.2"
-
-"@algolia/requester-browser-xhr@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.23.2.tgz#2d0a6b642e2a2bbfb2e2ff3d1e82158e3e143def"
-  integrity sha512-TO9wLlp8+rvW9LnIfyHsu8mNAMYrqNdQ0oLF6eTWFxXfxG3k8F/Bh7nFYGk2rFAYty4Fw4XUtrv/YjeNDtM5og==
-  dependencies:
-    "@algolia/requester-common" "4.23.2"
-
-"@algolia/requester-common@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.23.2.tgz#9c2e5da4dc15e65f9b9bbe5bedb419cf23092ef1"
-  integrity sha512-3EfpBS0Hri0lGDB5H/BocLt7Vkop0bTTLVUBB844HH6tVycwShmsV6bDR7yXbQvFP1uNpgePRD3cdBCjeHmk6Q==
-
-"@algolia/requester-node-http@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.23.2.tgz#718ae71f58949eab3b5fcfc440be42af41bd640f"
-  integrity sha512-SVzgkZM/malo+2SB0NWDXpnT7nO5IZwuDTaaH6SjLeOHcya1o56LSWXk+3F3rNLz2GVH+I/rpYKiqmHhSOjerw==
-  dependencies:
-    "@algolia/requester-common" "4.23.2"
-
-"@algolia/transporter@4.23.2":
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.23.2.tgz#61e7b9288d4f561b2015ddde689ba31e08c21644"
-  integrity sha512-GY3aGKBy+8AK4vZh8sfkatDciDVKad5rTY2S10Aefyjh7e7UGBP4zigf42qVXwU8VOPwi7l/L7OACGMOFcjB0Q==
-  dependencies:
-    "@algolia/cache-common" "4.23.2"
-    "@algolia/logger-common" "4.23.2"
-    "@algolia/requester-common" "4.23.2"
+"@algolia/logger-common@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.23.3.tgz#35c6d833cbf41e853a4f36ba37c6e5864920bfe9"
+  integrity sha512-y9kBtmJwiZ9ZZ+1Ek66P0M68mHQzKRxkW5kAAXYN/rdzgDN0d2COsViEFufxJ0pb45K4FRcfC7+33YB4BLrZ+g==
+
+"@algolia/logger-console@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.23.3.tgz#30f916781826c4db5f51fcd9a8a264a06e136985"
+  integrity sha512-8xoiseoWDKuCVnWP8jHthgaeobDLolh00KJAdMe9XPrWPuf1by732jSpgy2BlsLTaT9m32pHI8CRfrOqQzHv3A==
+  dependencies:
+    "@algolia/logger-common" "4.23.3"
+
+"@algolia/recommend@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/recommend/-/recommend-4.23.3.tgz#53d4f194d22d9c72dc05f3f7514c5878f87c5890"
+  integrity sha512-9fK4nXZF0bFkdcLBRDexsnGzVmu4TSYZqxdpgBW2tEyfuSSY54D4qSRkLmNkrrz4YFvdh2GM1gA8vSsnZPR73w==
+  dependencies:
+    "@algolia/cache-browser-local-storage" "4.23.3"
+    "@algolia/cache-common" "4.23.3"
+    "@algolia/cache-in-memory" "4.23.3"
+    "@algolia/client-common" "4.23.3"
+    "@algolia/client-search" "4.23.3"
+    "@algolia/logger-common" "4.23.3"
+    "@algolia/logger-console" "4.23.3"
+    "@algolia/requester-browser-xhr" "4.23.3"
+    "@algolia/requester-common" "4.23.3"
+    "@algolia/requester-node-http" "4.23.3"
+    "@algolia/transporter" "4.23.3"
+
+"@algolia/requester-browser-xhr@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.23.3.tgz#9e47e76f60d540acc8b27b4ebc7a80d1b41938b9"
+  integrity sha512-jDWGIQ96BhXbmONAQsasIpTYWslyjkiGu0Quydjlowe+ciqySpiDUrJHERIRfELE5+wFc7hc1Q5hqjGoV7yghw==
+  dependencies:
+    "@algolia/requester-common" "4.23.3"
+
+"@algolia/requester-common@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.23.3.tgz#7dbae896e41adfaaf1d1fa5f317f83a99afb04b3"
+  integrity sha512-xloIdr/bedtYEGcXCiF2muajyvRhwop4cMZo+K2qzNht0CMzlRkm8YsDdj5IaBhshqfgmBb3rTg4sL4/PpvLYw==
+
+"@algolia/requester-node-http@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.23.3.tgz#c9f94a5cb96a15f48cea338ab6ef16bbd0ff989f"
+  integrity sha512-zgu++8Uj03IWDEJM3fuNl34s746JnZOWn1Uz5taV1dFyJhVM/kTNw9Ik7YJWiUNHJQXcaD8IXD1eCb0nq/aByA==
+  dependencies:
+    "@algolia/requester-common" "4.23.3"
+
+"@algolia/transporter@4.23.3":
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.23.3.tgz#545b045b67db3850ddf0bbecbc6c84ff1f3398b7"
+  integrity sha512-Wjl5gttqnf/gQKJA+dafnD0Y6Yw97yvfY8R9h0dQltX1GXTgNs1zWgvtWW0tHl1EgMdhAyw189uWiZMnL3QebQ==
+  dependencies:
+    "@algolia/cache-common" "4.23.3"
+    "@algolia/logger-common" "4.23.3"
+    "@algolia/requester-common" "4.23.3"
 
 "@ampproject/remapping@^2.2.0":
   version "2.2.0"
@@ -3980,17 +3980,6 @@
     "@babel/parser" "^7.23.9"
     "@vue/compiler-sfc" "^3.4.15"
 
-"@vue/compiler-core@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.21.tgz#868b7085378fc24e58c9aed14c8d62110a62be1a"
-  integrity sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==
-  dependencies:
-    "@babel/parser" "^7.23.9"
-    "@vue/shared" "3.4.21"
-    entities "^4.5.0"
-    estree-walker "^2.0.2"
-    source-map-js "^1.0.2"
-
 "@vue/compiler-core@3.4.27":
   version "3.4.27"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.27.tgz#e69060f4b61429fe57976aa5872cfa21389e4d91"
@@ -4002,15 +3991,7 @@
     estree-walker "^2.0.2"
     source-map-js "^1.2.0"
 
-"@vue/compiler-dom@3.4.21", "@vue/compiler-dom@^3.3.0":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz#0077c355e2008207283a5a87d510330d22546803"
-  integrity sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==
-  dependencies:
-    "@vue/compiler-core" "3.4.21"
-    "@vue/shared" "3.4.21"
-
-"@vue/compiler-dom@3.4.27":
+"@vue/compiler-dom@3.4.27", "@vue/compiler-dom@^3.3.0":
   version "3.4.27"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz#d51d35f40d00ce235d7afc6ad8b09dfd92b1cc1c"
   integrity sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==
@@ -4018,7 +3999,7 @@
     "@vue/compiler-core" "3.4.27"
     "@vue/shared" "3.4.27"
 
-"@vue/compiler-sfc@3.4.27", "@vue/compiler-sfc@^3.4.27":
+"@vue/compiler-sfc@3.4.27", "@vue/compiler-sfc@^3.2.47", "@vue/compiler-sfc@^3.4.15", "@vue/compiler-sfc@^3.4.27":
   version "3.4.27"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz#399cac1b75c6737bf5440dc9cf3c385bb2959701"
   integrity sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==
@@ -4033,29 +4014,6 @@
     postcss "^8.4.38"
     source-map-js "^1.2.0"
 
-"@vue/compiler-sfc@^3.2.47", "@vue/compiler-sfc@^3.4.15":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz#4af920dc31ab99e1ff5d152b5fe0ad12181145b2"
-  integrity sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==
-  dependencies:
-    "@babel/parser" "^7.23.9"
-    "@vue/compiler-core" "3.4.21"
-    "@vue/compiler-dom" "3.4.21"
-    "@vue/compiler-ssr" "3.4.21"
-    "@vue/shared" "3.4.21"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.7"
-    postcss "^8.4.35"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-ssr@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz#b84ae64fb9c265df21fc67f7624587673d324fef"
-  integrity sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==
-  dependencies:
-    "@vue/compiler-dom" "3.4.21"
-    "@vue/shared" "3.4.21"
-
 "@vue/compiler-ssr@3.4.27":
   version "3.4.27"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.27.tgz#2a8ecfef1cf448b09be633901a9c020360472e3d"
@@ -4108,7 +4066,7 @@
     "@vue/shared" "3.4.27"
     csstype "^3.1.3"
 
-"@vue/server-renderer@3.4.27":
+"@vue/server-renderer@3.4.27", "@vue/server-renderer@^3.2.26":
   version "3.4.27"
   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.27.tgz#3306176f37e648ba665f97dda3ce705687be63d2"
   integrity sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==
@@ -4116,20 +4074,7 @@
     "@vue/compiler-ssr" "3.4.27"
     "@vue/shared" "3.4.27"
 
-"@vue/server-renderer@^3.2.26":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.21.tgz#150751579d26661ee3ed26a28604667fa4222a97"
-  integrity sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==
-  dependencies:
-    "@vue/compiler-ssr" "3.4.21"
-    "@vue/shared" "3.4.21"
-
-"@vue/shared@3.4.21", "@vue/shared@^3.3.0":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
-  integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
-
-"@vue/shared@3.4.27":
+"@vue/shared@3.4.27", "@vue/shared@^3.3.0":
   version "3.4.27"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.27.tgz#f05e3cd107d157354bb4ae7a7b5fc9cf73c63b50"
   integrity sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==
@@ -4342,33 +4287,33 @@ ajv@^8.12.0, ajv@^8.6.0, ajv@^8.6.2:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
-algoliasearch-helper@3.17.0:
-  version "3.17.0"
-  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.17.0.tgz#b8f2f98c9a49d9affb51205f8df116164050a842"
-  integrity sha512-R5422OiQjvjlK3VdpNQ/Qk7KsTIGeM5ACm8civGifOVWdRRV/3SgXuKmeNxe94Dz6fwj/IgpVmXbHutU4mHubg==
+algoliasearch-helper@3.19.0:
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.19.0.tgz#56f9c61f46ecb0a0f7497f127a5d32a94d87e090"
+  integrity sha512-AaSb5DZDMZmDQyIy6lf4aL0OZGgyIdqvLIIvSuVQOIOqfhrYSY7TvotIFI2x0Q3cP3xUpTd7lI1astUC4aXBJw==
   dependencies:
     "@algolia/events" "^4.0.1"
 
-algoliasearch@^4.23.2:
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.23.2.tgz#3b7bc93d98f3965628c73a06cbf9203531324a9d"
-  integrity sha512-8aCl055IsokLuPU8BzLjwzXjb7ty9TPcUFFOk0pYOwsE5DMVhE3kwCMFtsCFKcnoPZK7oObm+H5mbnSO/9ioxQ==
-  dependencies:
-    "@algolia/cache-browser-local-storage" "4.23.2"
-    "@algolia/cache-common" "4.23.2"
-    "@algolia/cache-in-memory" "4.23.2"
-    "@algolia/client-account" "4.23.2"
-    "@algolia/client-analytics" "4.23.2"
-    "@algolia/client-common" "4.23.2"
-    "@algolia/client-personalization" "4.23.2"
-    "@algolia/client-search" "4.23.2"
-    "@algolia/logger-common" "4.23.2"
-    "@algolia/logger-console" "4.23.2"
-    "@algolia/recommend" "4.23.2"
-    "@algolia/requester-browser-xhr" "4.23.2"
-    "@algolia/requester-common" "4.23.2"
-    "@algolia/requester-node-http" "4.23.2"
-    "@algolia/transporter" "4.23.2"
+algoliasearch@^4.23.3:
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.23.3.tgz#e09011d0a3b0651444916a3e6bbcba064ec44b60"
+  integrity sha512-Le/3YgNvjW9zxIQMRhUHuhiUjAlKY/zsdZpfq4dlLqg6mEm0nL6yk+7f2hDOtLpxsgE4jSzDmvHL7nXdBp5feg==
+  dependencies:
+    "@algolia/cache-browser-local-storage" "4.23.3"
+    "@algolia/cache-common" "4.23.3"
+    "@algolia/cache-in-memory" "4.23.3"
+    "@algolia/client-account" "4.23.3"
+    "@algolia/client-analytics" "4.23.3"
+    "@algolia/client-common" "4.23.3"
+    "@algolia/client-personalization" "4.23.3"
+    "@algolia/client-search" "4.23.3"
+    "@algolia/logger-common" "4.23.3"
+    "@algolia/logger-console" "4.23.3"
+    "@algolia/recommend" "4.23.3"
+    "@algolia/requester-browser-xhr" "4.23.3"
+    "@algolia/requester-common" "4.23.3"
+    "@algolia/requester-node-http" "4.23.3"
+    "@algolia/transporter" "4.23.3"
 
 ansi-colors@^4.1.1:
   version "4.1.1"
@@ -8830,27 +8775,27 @@ inquirer@^6.2.0, inquirer@^6.5.2:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-instantsearch-ui-components@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/instantsearch-ui-components/-/instantsearch-ui-components-0.4.0.tgz#0aabc136107b1adac42bbb93c6dc3cfb1942b24e"
-  integrity sha512-Isa9Ankm89e9PUXsUto6TxYzcQpXKlWZMsKLXc//dO4i9q5JS8s0Es+c+U65jRLK2j1DiVlNx/Z6HshRIZwA8w==
+instantsearch-ui-components@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/instantsearch-ui-components/-/instantsearch-ui-components-0.5.0.tgz#922e94a5a95b7c8a3bc8547a4090fa327a3ac279"
+  integrity sha512-iDdbAbPDyKZOCdOd4aiMkMVJ1WFhc+QU0dM0EIgfZqDYHFuw8XfyLakRK+S7YcQi4bomoqWZ4FiQ/gTFFWo4rQ==
   dependencies:
     "@babel/runtime" "^7.1.2"
 
-instantsearch.js@4.66.1:
-  version "4.66.1"
-  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.66.1.tgz#cd83a56f9ac2a591fe5809ed1bd791513b1ee117"
-  integrity sha512-RXFLrDSVHTBXeaGrS9Gqb6Vo1a6U0iCoDzNsJDn2kzIGjzP/SaFVLMdFW5ewAgCn9EUPmP2yImQv7mqgzmxe/g==
+instantsearch.js@4.68.0:
+  version "4.68.0"
+  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.68.0.tgz#8a2b57a17beaea3b1f8e0bafa1209a7e6c7dc8e9"
+  integrity sha512-eIh7jgXAd/TH3OBSgNmfXo6Dl2Apg05EKWqxrbOv0QCAKaouColPkmF6xujhNhjCUM/MVLyidMpSbGbEHa+GUw==
   dependencies:
     "@algolia/events" "^4.0.1"
     "@types/dom-speech-recognition" "^0.0.1"
     "@types/google.maps" "^3.45.3"
     "@types/hogan.js" "^3.0.0"
     "@types/qs" "^6.5.3"
-    algoliasearch-helper "3.17.0"
+    algoliasearch-helper "3.19.0"
     hogan.js "^3.0.2"
     htm "^3.0.0"
-    instantsearch-ui-components "0.4.0"
+    instantsearch-ui-components "0.5.0"
     preact "^10.10.0"
     qs "^6.5.1 < 6.10"
     search-insights "^2.13.0"
@@ -10474,20 +10419,13 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.4"
 
-magic-string@^0.30.10:
+magic-string@^0.30.10, magic-string@^0.30.3, magic-string@^0.30.4, magic-string@^0.30.5, magic-string@^0.30.9:
   version "0.30.10"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.10.tgz#123d9c41a0cb5640c892b041d4cfb3bd0aa4b39e"
   integrity sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
-magic-string@^0.30.3, magic-string@^0.30.4, magic-string@^0.30.5, magic-string@^0.30.7, magic-string@^0.30.9:
-  version "0.30.9"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.9.tgz#8927ae21bfdd856310e07a1bc8dd5e73cb6c251d"
-  integrity sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==
-  dependencies:
-    "@jridgewell/sourcemap-codec" "^1.4.15"
-
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -12161,7 +12099,7 @@ postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.27, postcss@^8.4.35, postcss@^8.4.38:
+postcss@^8.4.27, postcss@^8.4.38:
   version "8.4.38"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
   integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
@@ -14830,13 +14768,13 @@ vue-i18n@^9.11.0, vue-i18n@^9.7.1:
     "@intlify/shared" "9.11.1"
     "@vue/devtools-api" "^6.5.0"
 
-vue-instantsearch@^4.15.0:
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/vue-instantsearch/-/vue-instantsearch-4.15.0.tgz#313ca86436ee26d7fec35ac1d8ae2cda56d526f8"
-  integrity sha512-iiKwhpgw4wj23/+sdmw75Y81W6F5KdoWAAs4g1I7N+eCvrPRoVhzhb9DVwURj1aNCPQGla3Gh86BaMt/yAgLGQ==
+vue-instantsearch@^4.16.1:
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/vue-instantsearch/-/vue-instantsearch-4.16.1.tgz#bbffe6dcb71c2353a394d064131e7ff9c3858e9b"
+  integrity sha512-MO1y4tYHGZr+w4JOhH2UuB67mdXjFFEKpzbVGiAwfdy0isa+XWVDQVvjmNySbOx9YQoKb/vtDQ5uRYDY/RsRBg==
   dependencies:
-    instantsearch-ui-components "0.4.0"
-    instantsearch.js "4.66.1"
+    instantsearch-ui-components "0.5.0"
+    instantsearch.js "4.68.0"
     mitt "^2.1.0"
 
 vue-prism-component@^2.0.0:

From 0db429726b3bfd6f85984c372fd4536436fdc754 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 7 May 2024 22:14:27 +1000
Subject: [PATCH 015/122] fix(nested): correct prop types (#19758)

---
 packages/api-generator/src/types.ts           |  3 ++
 .../vuetify/src/components/VList/VList.tsx    | 14 +++---
 .../composables/nested/activeStrategies.ts    | 30 ++++++-----
 .../vuetify/src/composables/nested/nested.ts  | 50 +++++++++++++------
 .../vuetify/src/labs/VTreeview/VTreeview.tsx  |  6 +--
 5 files changed, 65 insertions(+), 38 deletions(-)

diff --git a/packages/api-generator/src/types.ts b/packages/api-generator/src/types.ts
index 76c410b852a..640bdf5ff52 100644
--- a/packages/api-generator/src/types.ts
+++ b/packages/api-generator/src/types.ts
@@ -309,6 +309,7 @@ function count (arr: string[], needle: string) {
 // Types that are displayed as links
 const allowedRefs = [
   'Anchor',
+  'ActiveStrategy',
   'DataIteratorItem',
   'DataTableHeader',
   'DataTableItem',
@@ -319,9 +320,11 @@ const allowedRefs = [
   'ListItem',
   'LocationStrategyFn',
   'OpenSelectStrategyFn',
+  'OpenStrategy',
   'OpenStrategyFn',
   'ScrollStrategyFn',
   'SelectItemKey',
+  'SelectStrategy',
   'SelectStrategyFn',
   'SortItem',
   'SubmitEventPromise',
diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
index 868ee43d2cd..567728ccd1c 100644
--- a/packages/vuetify/src/components/VList/VList.tsx
+++ b/packages/vuetify/src/components/VList/VList.tsx
@@ -128,10 +128,10 @@ export const VList = genericComponent<new <
     itemValue?: SelectItemKey<ItemType<T>>
     itemChildren?: SelectItemKey<ItemType<T>>
     itemProps?: SelectItemKey<ItemType<T>>
-    selected?: readonly S[]
-    'onUpdate:selected'?: (value: S[]) => void
-    opened?: readonly O[]
-    'onUpdate:opened'?: (value: O[]) => void
+    selected?: S
+    'onUpdate:selected'?: (value: S) => void
+    opened?: O
+    'onUpdate:opened'?: (value: O) => void
   },
   slots: VListChildrenSlots<ItemType<T>>
 ) => GenericProps<typeof props, typeof slots>>()({
@@ -140,9 +140,9 @@ export const VList = genericComponent<new <
   props: makeVListProps(),
 
   emits: {
-    'update:selected': (value: unknown[]) => true,
-    'update:activated': (value: unknown[]) => true,
-    'update:opened': (value: unknown[]) => true,
+    'update:selected': (value: unknown) => true,
+    'update:activated': (value: unknown) => true,
+    'update:opened': (value: unknown) => true,
     'click:open': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
     'click:activate': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
     'click:select': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
diff --git a/packages/vuetify/src/composables/nested/activeStrategies.ts b/packages/vuetify/src/composables/nested/activeStrategies.ts
index 495cfcef2af..3487da0a779 100644
--- a/packages/vuetify/src/composables/nested/activeStrategies.ts
+++ b/packages/vuetify/src/composables/nested/activeStrategies.ts
@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 // Utilities
 import { toRaw } from 'vue'
+import { wrapInArray } from '@/util'
 
 export type ActiveStrategyFn = (data: {
   id: unknown
@@ -12,7 +13,7 @@ export type ActiveStrategyFn = (data: {
 }) => Set<unknown>
 
 export type ActiveStrategyTransformInFn = (
-  v: readonly unknown[] | undefined,
+  v: unknown | undefined,
   children: Map<unknown, unknown[]>,
   parents: Map<unknown, unknown>,
 ) => Set<unknown>
@@ -21,7 +22,7 @@ export type ActiveStrategyTransformOutFn = (
   v: Set<unknown>,
   children: Map<unknown, unknown[]>,
   parents: Map<unknown, unknown>,
-) => unknown[]
+) => unknown
 
 export type ActiveStrategy = {
   activate: ActiveStrategyFn
@@ -49,14 +50,16 @@ export const independentActiveStrategy = (mandatory?: boolean): ActiveStrategy =
     in: (v, children, parents) => {
       let set = new Set()
 
-      for (const id of (v || [])) {
-        set = strategy.activate({
-          id,
-          value: true,
-          activated: new Set(set),
-          children,
-          parents,
-        })
+      if (v != null) {
+        for (const id of wrapInArray(v)) {
+          set = strategy.activate({
+            id,
+            value: true,
+            activated: new Set(set),
+            children,
+            parents,
+          })
+        }
       }
 
       return set
@@ -81,8 +84,11 @@ export const independentSingleActiveStrategy = (mandatory?: boolean): ActiveStra
     in: (v, children, parents) => {
       let set = new Set()
 
-      if (v?.length) {
-        set = parentStrategy.in(v.slice(0, 1), children, parents)
+      if (v != null) {
+        const arr = wrapInArray(v)
+        if (arr.length) {
+          set = parentStrategy.in(arr.slice(0, 1), children, parents)
+        }
       }
 
       return set
diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
index aa006fa4f72..51adb784e56 100644
--- a/packages/vuetify/src/composables/nested/nested.ts
+++ b/packages/vuetify/src/composables/nested/nested.ts
@@ -5,7 +5,8 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { computed, inject, onBeforeUnmount, provide, ref, shallowRef, toRaw, toRef } from 'vue'
 import {
   independentActiveStrategy,
-  independentSingleActiveStrategy, leafActiveStrategy,
+  independentSingleActiveStrategy,
+  leafActiveStrategy,
   leafSingleActiveStrategy,
 } from './activeStrategies'
 import { listOpenStrategy, multipleOpenStrategy, singleOpenStrategy } from './openStrategies'
@@ -20,26 +21,41 @@ import { getCurrentInstance, getUid, propsFactory } from '@/util'
 
 // Types
 import type { InjectionKey, PropType, Ref } from 'vue'
+import type { ActiveStrategy } from './activeStrategies'
 import type { OpenStrategy } from './openStrategies'
-import type { SelectStrategyFn } from './selectStrategies'
+import type { SelectStrategy } from './selectStrategies'
 import type { EventProp } from '@/util'
 
-export type SelectStrategy = 'single-leaf' | 'leaf' | 'independent' | 'single-independent' | 'classic' | SelectStrategyFn
+export type ActiveStrategyProp =
+  | 'single-leaf'
+  | 'leaf'
+  | 'independent'
+  | 'single-independent'
+  | ActiveStrategy
+  | ((mandatory: boolean) => ActiveStrategy)
+export type SelectStrategyProp =
+  | 'single-leaf'
+  | 'leaf'
+  | 'independent'
+  | 'single-independent'
+  | 'classic'
+  | SelectStrategy
+  | ((mandatory: boolean) => SelectStrategy)
 export type OpenStrategyProp = 'single' | 'multiple' | 'list' | OpenStrategy
 
 export interface NestedProps {
   activatable: boolean
   selectable: boolean
-  activeStrategy: SelectStrategy | undefined
-  selectStrategy: SelectStrategy | undefined
+  activeStrategy: ActiveStrategyProp | undefined
+  selectStrategy: SelectStrategyProp | undefined
   openStrategy: OpenStrategyProp | undefined
-  activated: readonly unknown[] | undefined
-  selected: readonly unknown[] | undefined
-  opened: readonly unknown[] | undefined
+  activated: any
+  selected: any
+  opened: any
   mandatory: boolean
-  'onUpdate:activated': EventProp<[unknown[]]> | undefined
-  'onUpdate:selected': EventProp<[unknown[]]> | undefined
-  'onUpdate:opened': EventProp<[unknown[]]> | undefined
+  'onUpdate:activated': EventProp<[any]> | undefined
+  'onUpdate:selected': EventProp<[any]> | undefined
+  'onUpdate:opened': EventProp<[any]> | undefined
 }
 
 type NestedProvide = {
@@ -88,12 +104,12 @@ export const emptyNested: NestedProvide = {
 export const makeNestedProps = propsFactory({
   activatable: Boolean,
   selectable: Boolean,
-  activeStrategy: [String, Function] as PropType<SelectStrategy>,
-  selectStrategy: [String, Function] as PropType<SelectStrategy>,
+  activeStrategy: [String, Function, Object] as PropType<ActiveStrategyProp>,
+  selectStrategy: [String, Function, Object] as PropType<SelectStrategyProp>,
   openStrategy: [String, Object] as PropType<OpenStrategyProp>,
-  opened: Array as PropType<readonly unknown[]>,
-  activated: Array as PropType<readonly unknown[]>,
-  selected: Array as PropType<readonly unknown[]>,
+  opened: null,
+  activated: null,
+  selected: null,
   mandatory: Boolean,
 }, 'nested')
 
@@ -106,6 +122,7 @@ export const useNested = (props: NestedProps) => {
 
   const activeStrategy = computed(() => {
     if (typeof props.activeStrategy === 'object') return props.activeStrategy
+    if (typeof props.activeStrategy === 'function') return props.activeStrategy(props.mandatory)
 
     switch (props.activeStrategy) {
       case 'leaf': return leafActiveStrategy(props.mandatory)
@@ -118,6 +135,7 @@ export const useNested = (props: NestedProps) => {
 
   const selectStrategy = computed(() => {
     if (typeof props.selectStrategy === 'object') return props.selectStrategy
+    if (typeof props.selectStrategy === 'function') return props.selectStrategy(props.mandatory)
 
     switch (props.selectStrategy) {
       case 'single-leaf': return leafSingleSelectStrategy(props.mandatory)
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
index 5feb99f56d9..693d45e41aa 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
@@ -51,9 +51,9 @@ export const VTreeview = genericComponent<new <T>(
   props: makeVTreeviewProps(),
 
   emits: {
-    'update:opened': (val: unknown[]) => true,
-    'update:activated': (val: unknown[]) => true,
-    'update:selected': (val: unknown[]) => true,
+    'update:opened': (val: unknown) => true,
+    'update:activated': (val: unknown) => true,
+    'update:selected': (val: unknown) => true,
     'click:open': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
     'click:select': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
   },

From f2c605046ffa47c487c73c0c076ba706e5a0edc9 Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Tue, 7 May 2024 22:15:11 +1000
Subject: [PATCH 016/122] fix: pass template refs to slots as functions
 (#19731)

fixes #19713
fixes #19685

Co-authored-by: Kael <kaelwd@gmail.com>
---
 packages/api-generator/src/types.ts           |  1 +
 .../VColorPicker/VColorPickerCanvas.tsx       |  2 +-
 .../VDataTable/VDataTableVirtual.tsx          |  5 +-
 .../VDatePicker/VDatePickerYears.tsx          |  9 ++--
 .../src/components/VOverlay/VOverlay.tsx      |  8 ++-
 .../src/components/VOverlay/useActivator.tsx  | 10 ++--
 .../components/VSlideGroup/VSlideGroup.tsx    | 50 +++++++++----------
 .../VVirtualScroll/VVirtualScrollItem.tsx     |  5 +-
 .../vuetify/src/composables/resizeObserver.ts | 13 ++---
 packages/vuetify/src/util/helpers.ts          | 23 +++++++++
 10 files changed, 74 insertions(+), 52 deletions(-)

diff --git a/packages/api-generator/src/types.ts b/packages/api-generator/src/types.ts
index 640bdf5ff52..0f14e001888 100644
--- a/packages/api-generator/src/types.ts
+++ b/packages/api-generator/src/types.ts
@@ -328,6 +328,7 @@ const allowedRefs = [
   'SelectStrategyFn',
   'SortItem',
   'SubmitEventPromise',
+  'TemplateRef',
   'TouchHandlers',
   'ValidationRule',
 ]
diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.tsx b/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.tsx
index 5b76f1fb410..fa3f6e32a04 100644
--- a/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.tsx
+++ b/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.tsx
@@ -80,7 +80,7 @@ export const VColorPickerCanvas = defineComponent({
     })
 
     const { resizeRef } = useResizeObserver(entries => {
-      if (!resizeRef.value?.offsetParent) return
+      if (!resizeRef.el?.offsetParent) return
 
       const { width, height } = entries[0].contentRect
 
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
index dc2c3b1941a..bee0fb23013 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
@@ -23,12 +23,11 @@ import { computed, shallowRef, toRef } from 'vue'
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
-import type { Ref } from 'vue'
 import type { VDataTableSlotProps } from './VDataTable'
 import type { VDataTableHeadersSlots } from './VDataTableHeaders'
 import type { VDataTableRowsSlots } from './VDataTableRows'
 import type { CellProps, RowProps } from '@/components/VDataTable/types'
-import type { GenericProps, SelectItemKey } from '@/util'
+import type { GenericProps, SelectItemKey, TemplateRef } from '@/util'
 
 type VDataTableVirtualSlotProps<T> = Omit<
   VDataTableSlotProps<T>,
@@ -46,7 +45,7 @@ export type VDataTableVirtualSlots<T> = VDataTableRowsSlots<T> & VDataTableHeade
   'body.prepend': VDataTableVirtualSlotProps<T>
   'body.append': VDataTableVirtualSlotProps<T>
   item: {
-    itemRef: Ref<HTMLElement | undefined>
+    itemRef: TemplateRef
   }
 }
 
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx
index d596f29ab92..4910d073cd2 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx
@@ -9,8 +9,8 @@ import { useDate } from '@/composables/date'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
-import { convertToUnit, createRange, genericComponent, propsFactory, useRender } from '@/util'
+import { computed, nextTick, onMounted, watchEffect } from 'vue'
+import { convertToUnit, createRange, genericComponent, propsFactory, templateRef, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -87,10 +87,11 @@ export const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({
       model.value = model.value ?? adapter.getYear(adapter.date())
     })
 
-    const yearRef = ref<VBtn>()
+    const yearRef = templateRef()
+
     onMounted(async () => {
       await nextTick()
-      yearRef.value?.$el.scrollIntoView({ block: 'center' })
+      yearRef.el?.scrollIntoView({ block: 'center' })
     })
 
     useRender(() => (
diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
index c683fffa6b2..75da73ed33b 100644
--- a/packages/vuetify/src/components/VOverlay/VOverlay.tsx
+++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -46,11 +46,9 @@ import {
 } from '@/util'
 
 // Types
-import type {
-  ComponentPublicInstance, PropType,
-  Ref,
-} from 'vue'
+import type { PropType, Ref } from 'vue'
 import type { BackgroundColorData } from '@/composables/color'
+import type { TemplateRef } from '@/util'
 
 interface ScrimProps {
   [key: string]: unknown
@@ -77,7 +75,7 @@ function Scrim (props: ScrimProps) {
 
 export type OverlaySlots = {
   default: { isActive: Ref<boolean> }
-  activator: { isActive: boolean, props: Record<string, any>, targetRef: Ref<ComponentPublicInstance<any> | HTMLElement> }
+  activator: { isActive: boolean, props: Record<string, any>, targetRef: TemplateRef }
 }
 
 export const makeVOverlayProps = propsFactory({
diff --git a/packages/vuetify/src/components/VOverlay/useActivator.tsx b/packages/vuetify/src/components/VOverlay/useActivator.tsx
index b1555ee3c48..0bf11e5ac86 100644
--- a/packages/vuetify/src/components/VOverlay/useActivator.tsx
+++ b/packages/vuetify/src/components/VOverlay/useActivator.tsx
@@ -22,7 +22,7 @@ import {
   IN_BROWSER,
   matchesSelector,
   propsFactory,
-  refElement,
+  templateRef,
   unbindProps,
 } from '@/util'
 
@@ -228,19 +228,19 @@ export function useActivator (
     }
   }, { flush: 'post' })
 
-  const activatorRef = ref<HTMLElement>()
+  const activatorRef = templateRef()
   watchEffect(() => {
     if (!activatorRef.value) return
 
     nextTick(() => {
-      activatorEl.value = refElement(activatorRef.value)
+      activatorEl.value = activatorRef.el
     })
   })
 
-  const targetRef = ref<ComponentPublicInstance<any> | HTMLElement>()
+  const targetRef = templateRef()
   const target = computed(() => {
     if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value
-    if (targetRef.value) return refElement(targetRef.value)
+    if (targetRef.value) return targetRef.el
     return getTarget(props.target, vm) || activatorEl.value
   })
   const targetEl = computed(() => {
diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
index 0fa926635c9..dee0b516718 100644
--- a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
+++ b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
@@ -116,7 +116,7 @@ export const VSlideGroup = genericComponent<new <T>(
     const goTo = useGoTo()
     const goToOptions = computed<Partial<GoToOptions>>(() => {
       return {
-        container: containerRef.value,
+        container: containerRef.el,
         duration: 200,
         easing: 'easeOutQuart',
       }
@@ -148,9 +148,9 @@ export const VSlideGroup = genericComponent<new <T>(
             isOverflowing.value = containerSize.value + 1 < contentSize.value
           }
 
-          if (firstSelectedIndex.value >= 0 && contentRef.value) {
+          if (firstSelectedIndex.value >= 0 && contentRef.el) {
             // TODO: Is this too naive? Should we store element references in group composable?
-            const selectedElement = contentRef.value.children[lastSelectedIndex.value] as HTMLElement
+            const selectedElement = contentRef.el.children[lastSelectedIndex.value] as HTMLElement
 
             scrollToChildren(selectedElement, props.centerActive)
           }
@@ -165,13 +165,13 @@ export const VSlideGroup = genericComponent<new <T>(
 
       if (center) {
         target = calculateCenteredTarget({
-          containerElement: containerRef.value!,
+          containerElement: containerRef.el!,
           isHorizontal: isHorizontal.value,
           selectedElement: children,
         })
       } else {
         target = calculateUpdatedTarget({
-          containerElement: containerRef.value!,
+          containerElement: containerRef.el!,
           isHorizontal: isHorizontal.value,
           isRtl: isRtl.value,
           selectedElement: children,
@@ -182,11 +182,11 @@ export const VSlideGroup = genericComponent<new <T>(
     }
 
     function scrollToPosition (newPosition: number) {
-      if (!IN_BROWSER || !containerRef.value) return
+      if (!IN_BROWSER || !containerRef.el) return
 
-      const offsetSize = getOffsetSize(isHorizontal.value, containerRef.value)
-      const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.value)
-      const scrollSize = getScrollSize(isHorizontal.value, containerRef.value)
+      const offsetSize = getOffsetSize(isHorizontal.value, containerRef.el)
+      const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.el)
+      const scrollSize = getScrollSize(isHorizontal.value, containerRef.el)
 
       if (
         scrollSize <= offsetSize ||
@@ -194,8 +194,8 @@ export const VSlideGroup = genericComponent<new <T>(
         Math.abs(newPosition - scrollPosition) < 16
       ) return
 
-      if (isHorizontal.value && isRtl.value && containerRef.value) {
-        const { scrollWidth, offsetWidth: containerWidth } = containerRef.value!
+      if (isHorizontal.value && isRtl.value && containerRef.el) {
+        const { scrollWidth, offsetWidth: containerWidth } = containerRef.el!
 
         newPosition = (scrollWidth - containerWidth) - newPosition
       }
@@ -216,12 +216,12 @@ export const VSlideGroup = genericComponent<new <T>(
     function onFocusin (e: FocusEvent) {
       isFocused.value = true
 
-      if (!isOverflowing.value || !contentRef.value) return
+      if (!isOverflowing.value || !contentRef.el) return
 
       // Focused element is likely to be the root of an item, so a
       // breadth-first search will probably find it in the first iteration
       for (const el of e.composedPath()) {
-        for (const item of contentRef.value.children) {
+        for (const item of contentRef.el.children) {
           if (item === el) {
             scrollToChildren(item as HTMLElement)
             return
@@ -240,7 +240,7 @@ export const VSlideGroup = genericComponent<new <T>(
       if (
         !ignoreFocusEvent &&
         !isFocused.value &&
-        !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget as Node))
+        !(e.relatedTarget && contentRef.el?.contains(e.relatedTarget as Node))
       ) focus()
 
       ignoreFocusEvent = false
@@ -251,7 +251,7 @@ export const VSlideGroup = genericComponent<new <T>(
     }
 
     function onKeydown (e: KeyboardEvent) {
-      if (!contentRef.value) return
+      if (!contentRef.el) return
 
       function toFocus (location: Parameters<typeof focus>[0]) {
         e.preventDefault()
@@ -280,25 +280,25 @@ export const VSlideGroup = genericComponent<new <T>(
     }
 
     function focus (location?: 'next' | 'prev' | 'first' | 'last') {
-      if (!contentRef.value) return
+      if (!contentRef.el) return
 
       let el: HTMLElement | undefined
 
       if (!location) {
-        const focusable = focusableChildren(contentRef.value)
+        const focusable = focusableChildren(contentRef.el)
         el = focusable[0]
       } else if (location === 'next') {
-        el = contentRef.value.querySelector(':focus')?.nextElementSibling as HTMLElement | undefined
+        el = contentRef.el.querySelector(':focus')?.nextElementSibling as HTMLElement | undefined
 
         if (!el) return focus('first')
       } else if (location === 'prev') {
-        el = contentRef.value.querySelector(':focus')?.previousElementSibling as HTMLElement | undefined
+        el = contentRef.el.querySelector(':focus')?.previousElementSibling as HTMLElement | undefined
 
         if (!el) return focus('last')
       } else if (location === 'first') {
-        el = (contentRef.value.firstElementChild as HTMLElement)
+        el = (contentRef.el.firstElementChild as HTMLElement)
       } else if (location === 'last') {
-        el = (contentRef.value.lastElementChild as HTMLElement)
+        el = (contentRef.el.lastElementChild as HTMLElement)
       }
 
       if (el) {
@@ -314,8 +314,8 @@ export const VSlideGroup = genericComponent<new <T>(
       let newPosition = scrollOffset.value + offsetStep
 
       // TODO: improve it
-      if (isHorizontal.value && isRtl.value && containerRef.value) {
-        const { scrollWidth, offsetWidth: containerWidth } = containerRef.value!
+      if (isHorizontal.value && isRtl.value && containerRef.el) {
+        const { scrollWidth, offsetWidth: containerWidth } = containerRef.el!
 
         newPosition += scrollWidth - containerWidth
       }
@@ -366,8 +366,8 @@ export const VSlideGroup = genericComponent<new <T>(
     const hasNext = computed(() => {
       if (!containerRef.value) return false
 
-      const scrollSize = getScrollSize(isHorizontal.value, containerRef.value)
-      const clientSize = getClientSize(isHorizontal.value, containerRef.value)
+      const scrollSize = getScrollSize(isHorizontal.value, containerRef.el)
+      const clientSize = getClientSize(isHorizontal.value, containerRef.el)
 
       const scrollSizeMax = scrollSize - clientSize
 
diff --git a/packages/vuetify/src/components/VVirtualScroll/VVirtualScrollItem.tsx b/packages/vuetify/src/components/VVirtualScroll/VVirtualScrollItem.tsx
index 28cb31df9ca..a7327248cf0 100644
--- a/packages/vuetify/src/components/VVirtualScroll/VVirtualScrollItem.tsx
+++ b/packages/vuetify/src/components/VVirtualScroll/VVirtualScrollItem.tsx
@@ -7,8 +7,7 @@ import { watch } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
-import type { Ref } from 'vue'
-import type { GenericProps } from '@/util'
+import type { GenericProps, TemplateRef } from '@/util'
 
 export const makeVVirtualScrollItemProps = propsFactory({
   renderless: Boolean,
@@ -22,7 +21,7 @@ export const VVirtualScrollItem = genericComponent<new <Renderless extends boole
   },
   slots: {
     default: Renderless extends true ? {
-      itemRef: Ref<HTMLElement | undefined>
+      itemRef: TemplateRef
     } : never
   }
 ) => GenericProps<typeof props, typeof slots>>()({
diff --git a/packages/vuetify/src/composables/resizeObserver.ts b/packages/vuetify/src/composables/resizeObserver.ts
index f9a6db1a0af..3652e258872 100644
--- a/packages/vuetify/src/composables/resizeObserver.ts
+++ b/packages/vuetify/src/composables/resizeObserver.ts
@@ -1,18 +1,19 @@
 // Utilities
 import { onBeforeUnmount, readonly, ref, watch } from 'vue'
-import { refElement } from '@/util'
+import { templateRef } from '@/util'
 import { IN_BROWSER } from '@/util/globals'
 
 // Types
 import type { DeepReadonly, Ref } from 'vue'
+import type { TemplateRef } from '@/util'
 
 interface ResizeState {
-  resizeRef: Ref<HTMLElement | undefined>
+  resizeRef: TemplateRef
   contentRect: DeepReadonly<Ref<DOMRectReadOnly | undefined>>
 }
 
 export function useResizeObserver (callback?: ResizeObserverCallback, box: 'content' | 'border' = 'content'): ResizeState {
-  const resizeRef = ref<HTMLElement>()
+  const resizeRef = templateRef()
   const contentRect = ref<DOMRectReadOnly>()
 
   if (IN_BROWSER) {
@@ -32,13 +33,13 @@ export function useResizeObserver (callback?: ResizeObserverCallback, box: 'cont
       observer.disconnect()
     })
 
-    watch(resizeRef, (newValue, oldValue) => {
+    watch(() => resizeRef.el, (newValue, oldValue) => {
       if (oldValue) {
-        observer.unobserve(refElement(oldValue) as Element)
+        observer.unobserve(oldValue)
         contentRect.value = undefined
       }
 
-      if (newValue) observer.observe(refElement(newValue) as Element)
+      if (newValue) observer.observe(newValue)
     }, {
       flush: 'post',
     })
diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
index cb60134d49a..cfff79aa004 100644
--- a/packages/vuetify/src/util/helpers.ts
+++ b/packages/vuetify/src/util/helpers.ts
@@ -735,3 +735,26 @@ export function isClickInsideElement (event: MouseEvent, targetDiv: HTMLElement)
 
   return mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom
 }
+
+export type TemplateRef = {
+  (target: Element | ComponentPublicInstance | null): void
+  value: HTMLElement | ComponentPublicInstance | null | undefined
+  readonly el: HTMLElement | undefined
+}
+export function templateRef () {
+  const el = shallowRef<HTMLElement | ComponentPublicInstance | null>()
+  const fn = (target: HTMLElement | ComponentPublicInstance | null) => {
+    el.value = target
+  }
+  Object.defineProperty(fn, 'value', {
+    enumerable: true,
+    get: () => el.value,
+    set: val => el.value = val,
+  })
+  Object.defineProperty(fn, 'el', {
+    enumerable: true,
+    get: () => refElement(el.value),
+  })
+
+  return fn as TemplateRef
+}

From 49fc5c59d153032dabe41d711f863841e0ce75c3 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 7 May 2024 10:30:24 -0500
Subject: [PATCH 017/122] fix(VStepperWindow/Item/VTabsWindow): add missing
 class / style passthrough

---
 packages/vuetify/src/components/VStepper/VStepperWindow.tsx | 6 +++++-
 .../vuetify/src/components/VStepper/VStepperWindowItem.tsx  | 6 +++++-
 packages/vuetify/src/components/VTabs/VTabsWindow.tsx       | 6 +++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/VStepper/VStepperWindow.tsx b/packages/vuetify/src/components/VStepper/VStepperWindow.tsx
index 87a8a338023..b59f2da9023 100644
--- a/packages/vuetify/src/components/VStepper/VStepperWindow.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepperWindow.tsx
@@ -54,7 +54,11 @@ export const VStepperWindow = genericComponent()({
           _as="VStepperWindow"
           { ...windowProps }
           v-model={ model.value }
-          class="v-stepper-window"
+          class={[
+            'v-stepper-window',
+            props.class,
+          ]}
+          style={ props.style }
           mandatory={ false }
           touch={ false }
           v-slots={ slots }
diff --git a/packages/vuetify/src/components/VStepper/VStepperWindowItem.tsx b/packages/vuetify/src/components/VStepper/VStepperWindowItem.tsx
index 55f7e6631c7..4adebdaff3d 100644
--- a/packages/vuetify/src/components/VStepper/VStepperWindowItem.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepperWindowItem.tsx
@@ -21,7 +21,11 @@ export const VStepperWindowItem = genericComponent()({
         <VWindowItem
           _as="VStepperWindowItem"
           { ...windowItemProps }
-          class="v-stepper-window-item"
+          class={[
+            'v-stepper-window-item',
+            props.class,
+          ]}
+          style={ props.style }
           v-slots={ slots }
         />
       )
diff --git a/packages/vuetify/src/components/VTabs/VTabsWindow.tsx b/packages/vuetify/src/components/VTabs/VTabsWindow.tsx
index ea39d0b36a6..df9fb72b680 100644
--- a/packages/vuetify/src/components/VTabs/VTabsWindow.tsx
+++ b/packages/vuetify/src/components/VTabs/VTabsWindow.tsx
@@ -51,7 +51,11 @@ export const VTabsWindow = genericComponent()({
           _as="VTabsWindow"
           { ...windowProps }
           v-model={ model.value }
-          class="v-tabs-window"
+          class={[
+            'v-tabs-window',
+            props.class,
+          ]}
+          style={ props.style }
           mandatory={ false }
           touch={ false }
           v-slots={ slots }

From 7c6439280e9686f46e787ed0bc1ac5b70b954edf Mon Sep 17 00:00:00 2001
From: Zhaolin Liang <develop0304@outlook.com>
Date: Tue, 7 May 2024 23:40:34 +0800
Subject: [PATCH 018/122] fix(VDataTable): correctly update the value of
 showSelectAll (#19762)

fixes #19069
---
 .../components/VDataTable/VDataTableHeaders.tsx    |  2 +-
 .../VDataTable/__tests__/VDataTable.spec.cy.tsx    | 14 ++++++++++++++
 .../components/VDataTable/composables/select.ts    |  3 ++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
index c2755cd9619..d075842d788 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -180,7 +180,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
               if (slots[columnSlotName]) return slots[columnSlotName]!(columnSlotProps)
 
               if (column.key === 'data-table-select') {
-                return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll && (
+                return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && (
                   <VCheckboxBtn
                     modelValue={ allSelected.value }
                     indeterminate={ someSelected.value && !allSelected.value }
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx
index 18eb35f1008..0cc1a79df2c 100644
--- a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx
+++ b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx
@@ -213,6 +213,20 @@ describe('VDataTable', () => {
       .should('deep.equal', [[2], [1]])
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/19069
+  it('should update the select all checkbox when changing the select-strategy', () => {
+    const strategy = ref('single')
+    cy.mount(() => (
+      <Application>
+        <VDataTable select-strategy={ strategy.value } items={ DESSERT_ITEMS } headers={ DESSERT_HEADERS } showSelect />
+      </Application>
+    )).get('thead .v-selection-control').should('not.exist')
+      .then(() => strategy.value = 'all')
+      .get('thead .v-selection-control').should('exist')
+      .then(() => strategy.value = 'page')
+      .get('thead .v-selection-control').should('exist')
+  })
+
   describe('slots', () => {
     it('should have top slot', () => {
       cy.mount(() => (
diff --git a/packages/vuetify/src/components/VDataTable/composables/select.ts b/packages/vuetify/src/components/VDataTable/composables/select.ts
index 419aecef2fb..fcea69f19a7 100644
--- a/packages/vuetify/src/components/VDataTable/composables/select.ts
+++ b/packages/vuetify/src/components/VDataTable/composables/select.ts
@@ -163,6 +163,7 @@ export function provideSelection (
     })
     return !!items.length && isSelected(items)
   })
+  const showSelectAll = computed(() => selectStrategy.value.showSelectAll)
 
   const data = {
     toggleSelect,
@@ -172,7 +173,7 @@ export function provideSelection (
     isSomeSelected,
     someSelected,
     allSelected,
-    showSelectAll: selectStrategy.value.showSelectAll,
+    showSelectAll,
   }
 
   provide(VDataTableSelectionSymbol, data)

From 21e9f5e74267706cc4eebf351a27889563e89047 Mon Sep 17 00:00:00 2001
From: "Adrian D. Alvarez" <06b@users.noreply.github.com>
Date: Tue, 7 May 2024 11:53:08 -0400
Subject: [PATCH 019/122] fix(VSlider): render in forced-colors mode (#19706)

fixes #19705

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../vuetify/src/components/VSlider/VSliderThumb.sass     | 3 +++
 .../vuetify/src/components/VSlider/VSliderTrack.sass     | 9 +++++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/vuetify/src/components/VSlider/VSliderThumb.sass b/packages/vuetify/src/components/VSlider/VSliderThumb.sass
index 977d221cd3d..2d9b5a15605 100644
--- a/packages/vuetify/src/components/VSlider/VSliderThumb.sass
+++ b/packages/vuetify/src/components/VSlider/VSliderThumb.sass
@@ -35,6 +35,9 @@
     user-select: none
     background-color: currentColor
 
+    @media (forced-colors: active)
+      background-color: highlight
+
     &::before
       transition: 0.3s settings.$standard-easing
       content: ''
diff --git a/packages/vuetify/src/components/VSlider/VSliderTrack.sass b/packages/vuetify/src/components/VSlider/VSliderTrack.sass
index 0e457ac997d..167b4a48871 100644
--- a/packages/vuetify/src/components/VSlider/VSliderTrack.sass
+++ b/packages/vuetify/src/components/VSlider/VSliderTrack.sass
@@ -9,9 +9,15 @@
   .v-slider-track__background
     background-color: rgb(var(--v-theme-surface-variant))
 
+    @media (forced-colors: active)
+      background-color: highlight
+
   .v-slider-track__fill
     background-color: rgb(var(--v-theme-surface-variant))
 
+    @media (forced-colors: active)
+      background-color: highlight
+
   .v-slider-track__tick
     background-color: rgb(var(--v-theme-surface-variant))
 
@@ -22,6 +28,9 @@
   .v-slider-track
     border-radius: $slider-track-border-radius
 
+    @media (forced-colors: active)
+      border: thin solid buttontext
+
   .v-slider-track
     &__background, &__fill
       position: absolute

From c4b33c011fc4d2c869284e1afca01121c3d273c6 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Tue, 7 May 2024 09:02:01 -0700
Subject: [PATCH 020/122] fix(VDataTable): header title font weight (#19742)

fixes #19737
---
 packages/vuetify/src/components/VDataTable/VDataTable.sass | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass
index 63025c0a5de..2f619910dfe 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTable.sass
+++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass
@@ -2,6 +2,7 @@
 @use '../../styles/tools'
 @use '../../components/VTable/variables' as *
 @use './variables' as *
+@use '../VTable/variables' as VTable
 
 @include tools.layer('components')
   .v-data-table
@@ -147,7 +148,7 @@
         border-bottom: 0 !important
 
   .v-data-table__td-title
-    font-weight: bold
+    font-weight: VTable.$table-header-font-weight
     text-align: left
 
   .v-data-table__td-value

From 5a39b60ac261c0de4f71c36f76565f0d8aa69e87 Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Tue, 7 May 2024 23:13:54 +0700
Subject: [PATCH 021/122] fix(VCalendar): add theme background color (#19745)

fixes #18988

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 packages/vuetify/src/labs/VCalendar/VCalendar.sass  | 5 +++--
 packages/vuetify/src/labs/VCalendar/_variables.scss | 8 ++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/labs/VCalendar/VCalendar.sass b/packages/vuetify/src/labs/VCalendar/VCalendar.sass
index ebadddd2877..ae0a5318eb6 100644
--- a/packages/vuetify/src/labs/VCalendar/VCalendar.sass
+++ b/packages/vuetify/src/labs/VCalendar/VCalendar.sass
@@ -2,6 +2,9 @@
 @use './variables' as *
 
 @include tools.layer('components')
+  .v-calendar
+    @include tools.theme($calendar-theme...)
+
   .v-calendar-weekly
     width: 100%
     height: 100%
@@ -9,8 +12,6 @@
     flex-direction: column
     // https://github.com/vuetifyjs/vuetify/issues/8319
     min-height: 0
-    // Themed
-    background-color: #fff
 
   .v-calendar__container
     border-top: $calendar-line-width solid $calendar-line-color
diff --git a/packages/vuetify/src/labs/VCalendar/_variables.scss b/packages/vuetify/src/labs/VCalendar/_variables.scss
index e362a2098ce..e79f55c804a 100644
--- a/packages/vuetify/src/labs/VCalendar/_variables.scss
+++ b/packages/vuetify/src/labs/VCalendar/_variables.scss
@@ -1,3 +1,6 @@
+$calendar-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default;
+$calendar-background: rgb(var(--v-theme-background)) !default;
+
 $calendar-line-width: thin !default;
 $calendar-line-color: #e0e0e0 !default;
 
@@ -45,3 +48,8 @@ $calendar-event-border-width: 1px !default;
 $calendar-event-font-size: 12px !default;
 $calendar-event-line-height: 20px !default;
 $calendar-event-right-empty: 10px !default;
+
+$calendar-theme: (
+  $calendar-background,
+  $calendar-color
+) !default;

From 183a2f9536810562a14f88958b63bc6073a6ba35 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 7 May 2024 11:14:06 -0500
Subject: [PATCH 022/122] fix(VSheet): base color off of on-surface istead of
 on-background

---
 packages/vuetify/src/components/VSheet/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VSheet/_variables.scss b/packages/vuetify/src/components/VSheet/_variables.scss
index 60b8f3ab839..a6ed9b2c767 100644
--- a/packages/vuetify/src/components/VSheet/_variables.scss
+++ b/packages/vuetify/src/components/VSheet/_variables.scss
@@ -7,7 +7,7 @@ $sheet-border-radius: 0 !default;
 $sheet-border-style: settings.$border-style-root !default;
 $sheet-border-thin-width: thin !default;
 $sheet-border-width: 0 !default;
-$sheet-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default;
+$sheet-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $sheet-elevation: 0 !default;
 $sheet-positions: absolute fixed relative sticky !default;
 $sheet-rounded-border-radius: settings.$border-radius-root !default;

From e577b5ad05851b100a83704383a9b3433a2f957d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 7 May 2024 11:31:08 -0500
Subject: [PATCH 023/122] docs(team): fix focus link

---
 packages/docs/src/data/team.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/data/team.json b/packages/docs/src/data/team.json
index 86a2ff2a029..69bdddd4f29 100644
--- a/packages/docs/src/data/team.json
+++ b/packages/docs/src/data/team.json
@@ -39,7 +39,7 @@
     "avatar": "https://cdn.vuetifyjs.com/docs/images/team/alexandria.jpg",
     "discord": "alexandriajackson_",
     "focus": [
-      "vuetifyjs/*"
+      "[vuetifyjs/*](https://github.com/vuetifyjs)"
     ],
     "languages": [
       "English"

From b7a4c360c69db9f69156bcfbb6c909ee8c8a1699 Mon Sep 17 00:00:00 2001
From: NassBin <nassimdaikh71@gmail.com>
Date: Tue, 7 May 2024 18:43:32 +0200
Subject: [PATCH 024/122] fix(VInfiniteScroll): do not emit load event if
 status is empty (#19764)

fixes #18895

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx b/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx
index c3fb7f5b7cb..50924090ab9 100644
--- a/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx
+++ b/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx
@@ -177,7 +177,7 @@ export const VInfiniteScroll = genericComponent<VInfiniteScrollSlots>()({
       if (props.mode !== 'manual' && !isIntersecting.value) return
 
       const status = getStatus(side)
-      if (!rootEl.value || status === 'loading') return
+      if (!rootEl.value || ['empty', 'loading'].includes(status)) return
 
       previousScrollSize = getScrollSize()
       setStatus(side, 'loading')

From 767ecdcedd75a6d28379ee4058b8c3b70bb66feb Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 7 May 2024 12:17:25 -0500
Subject: [PATCH 025/122] chore(release): publish v3.6.4

---
 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 d731f79c2b7..97dcc3b9a4f 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.6.3",
+  "version": "3.6.4",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index 113dae776c2..7b5030b27f9 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.6.3",
+  "version": "3.6.4",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^22.0.0",
     "tsx": "^4.7.2",
     "vue": "^3.4.27",
-    "vuetify": "^3.6.3"
+    "vuetify": "^3.6.4"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 2d39be53f3d..d3ed4af0118 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.6.3",
+  "version": "3.6.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.11.0",
     "vue-instantsearch": "^4.16.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.6.3"
+    "vuetify": "^3.6.4"
   },
   "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.27",
-    "@vuetify/api-generator": "^3.6.3",
+    "@vuetify/api-generator": "^3.6.4",
     "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 1b82b1f18ed..a6fb9e68887 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.6.3",
+  "version": "3.6.4",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From 3d9deb7db53e70e0605b76f270f7d962d38f09e4 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 8 May 2024 15:37:19 -0500
Subject: [PATCH 026/122] fix(VStepper): do not spread raw property onto
 VStepperItem

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

diff --git a/packages/vuetify/src/components/VStepper/VStepper.tsx b/packages/vuetify/src/components/VStepper/VStepper.tsx
index 485280360cf..4e2fa4ebce2 100644
--- a/packages/vuetify/src/components/VStepper/VStepper.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepper.tsx
@@ -150,7 +150,7 @@ export const VStepper = genericComponent<VStepperSlots>()({
         >
           { hasHeader && (
             <VStepperHeader key="stepper-header">
-              { items.value.map((item, index) => (
+              { items.value.map(({ raw, ...item }, index) => (
                 <>
                   { !!index && (<VDivider />) }
 

From 34bb2020124553436691d7542ca77948452d7fab Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 8 May 2024 16:10:41 -0500
Subject: [PATCH 027/122] fix(VStepper): only show edit icon if editable and
 selected

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

diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
index 7f7b5757742..ba3a583a820 100644
--- a/packages/vuetify/src/components/VStepper/VStepperItem.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
@@ -91,7 +91,7 @@ export const VStepperItem = genericComponent<VStepperItemSlots>()({
     const icon = computed(() => {
       if (hasError.value) return props.errorIcon
       if (hasCompleted.value) return props.completeIcon
-      if (props.editable) return props.editIcon
+      if (group.isSelected.value && props.editable) return props.editIcon
 
       return props.icon
     })

From da6d5f3cd2d54bf6ad652688b61c9626933d969d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 8 May 2024 16:17:49 -0500
Subject: [PATCH 028/122] fix(VStepper): add missing non-linear styles

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

diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.sass b/packages/vuetify/src/components/VStepper/VStepperItem.sass
index 26b21fd56ea..117d805b12b 100644
--- a/packages/vuetify/src/components/VStepper/VStepperItem.sass
+++ b/packages/vuetify/src/components/VStepper/VStepperItem.sass
@@ -14,6 +14,9 @@
     transition-property: $stepper-item-transition-property
     transition-timing-function: $stepper-item-transition-timing-function
 
+    .v-stepper--non-linear &
+      opacity: var(--v-high-emphasis-opacity)
+
     &--selected
       opacity: 1
 

From b45ab1aff93965c31a88cb567d83f934dac00e1d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 8 May 2024 16:34:54 -0500
Subject: [PATCH 029/122] fix(VStepper): add missing hover and focus styling

---
 .../src/components/VStepper/VStepperItem.sass     | 15 +++++++++++++++
 .../src/components/VStepper/VStepperItem.tsx      |  4 ++++
 2 files changed, 19 insertions(+)

diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.sass b/packages/vuetify/src/components/VStepper/VStepperItem.sass
index 117d805b12b..78ce758462d 100644
--- a/packages/vuetify/src/components/VStepper/VStepperItem.sass
+++ b/packages/vuetify/src/components/VStepper/VStepperItem.sass
@@ -8,12 +8,16 @@
     align-self: stretch
     display: inline-flex
     flex: none
+    outline: none
     opacity: $stepper-item-opacity
     padding: $stepper-item-padding
+    position: relative
     transition-duration: $stepper-item-transition-duration
     transition-property: $stepper-item-transition-property
     transition-timing-function: $stepper-item-transition-timing-function
 
+    @include tools.states('.v-stepper-item__overlay')
+
     .v-stepper--non-linear &
       opacity: var(--v-high-emphasis-opacity)
 
@@ -74,3 +78,14 @@
 
     .v-stepper--mobile &
       display: none
+
+  .v-stepper-item__overlay
+    background-color: currentColor
+    border-radius: inherit
+    opacity: 0
+    transition: opacity .2s ease-in-out
+
+  .v-stepper-item__overlay,
+  .v-stepper-item__underlay
+    @include tools.absolute()
+    pointer-events: none
diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
index ba3a583a820..129bc0395c0 100644
--- a/packages/vuetify/src/components/VStepper/VStepperItem.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
@@ -7,6 +7,7 @@ import { VIcon } from '@/components/VIcon/VIcon'
 
 // Composables
 import { makeGroupItemProps, useGroupItem } from '@/composables/group'
+import { genOverlays } from '@/composables/variant'
 
 // Directives
 import { Ripple } from '@/directives/ripple'
@@ -85,6 +86,7 @@ export const VStepperItem = genericComponent<VStepperItemSlots>()({
     const group = useGroupItem(props, VStepperSymbol, true)
     const step = computed(() => group?.value.value ?? props.value)
     const isValid = computed(() => props.rules.every(handler => handler() === true))
+    const isClickable = computed(() => !props.disabled && props.editable)
     const canEdit = computed(() => !props.disabled && props.editable)
     const hasError = computed(() => props.error || !isValid.value)
     const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value))
@@ -141,6 +143,8 @@ export const VStepperItem = genericComponent<VStepperItemSlots>()({
           ]}
           onClick={ onClick }
         >
+          { isClickable.value && genOverlays(true, 'v-stepper-item') }
+
           <VAvatar
             key="stepper-avatar"
             class="v-stepper-item__avatar"

From 85c41dbe8028c878da6cd8cbd7510a8b21be298b Mon Sep 17 00:00:00 2001
From: Yuchao Wu <yuchao.sydneyuni@gmail.com>
Date: Thu, 9 May 2024 13:25:30 +1000
Subject: [PATCH 030/122] fix(VFileInput): allow dirty prop to trigger dirty
 state

fixes #19699
---
 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 b074aa85f75..57f8bc29c2d 100644
--- a/packages/vuetify/src/components/VFileInput/VFileInput.tsx
+++ b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -211,7 +211,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
                 { ...fieldProps }
                 id={ id.value }
                 active={ isActive.value || isDirty.value }
-                dirty={ isDirty.value }
+                dirty={ isDirty.value || props.dirty }
                 disabled={ isDisabled.value }
                 focused={ isFocused.value }
                 error={ isValid.value === false }

From a6340ac592fd3435c81f35b36eb60861cd426d02 Mon Sep 17 00:00:00 2001
From: Andrew Henry <AMajesticPotatoe@gmail.com>
Date: Thu, 9 May 2024 11:55:50 -0400
Subject: [PATCH 031/122] fix(VDataTable): add missing
 hide-default-header/footer props (#19774)

---
 .../src/locale/en/VDataTable.json              |  3 ++-
 .../pages/en/components/data-tables/basics.md  |  4 ++--
 .../src/components/VDataTable/VDataTable.tsx   | 18 +++++++++++-------
 .../components/VDataTable/VDataTableServer.tsx | 18 ++++++++++--------
 .../VDataTable/VDataTableVirtual.tsx           | 16 +++++++++-------
 5 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json
index 96c8ef0c5db..df73bcca2a8 100644
--- a/packages/api-generator/src/locale/en/VDataTable.json
+++ b/packages/api-generator/src/locale/en/VDataTable.json
@@ -18,7 +18,8 @@
     "headers": "An array of objects that each describe a header column. See the example below for a definition of all properties.",
     "headersLength": "Can be used in combination with `hide-default-header` to specify the number of columns in the table to allow expansion rows and loading bar to function properly.",
     "height": "Set an explicit height of table.",
-    "hideDefaultHeader": "Hide the default headers.",
+    "hideDefaultHeader": "Hides the default header.",
+    "hideDefaultFooter": "Hides the default footer. This has no effect on `v-data-table-virtual`.",
     "hover": "Adds a hover effects to a table rows.",
     "itemClass": "Property on supplied `items` that contains item's row class or function that takes an item as an argument and returns the class of corresponding row.",
     "itemsPerPage": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.",
diff --git a/packages/docs/src/pages/en/components/data-tables/basics.md b/packages/docs/src/pages/en/components/data-tables/basics.md
index 615f7619ca5..b2075439fca 100644
--- a/packages/docs/src/pages/en/components/data-tables/basics.md
+++ b/packages/docs/src/pages/en/components/data-tables/basics.md
@@ -140,11 +140,11 @@ The `v-data-table` renders a default footer using the `v-data-footer` component.
 
 <ExamplesExample file="v-data-table/prop-footer-props" /> -->
 
-<!-- #### Hide default header and footer
+#### Hide default header and footer
 
 You can apply the **hide-default-header** and **hide-default-footer** props to remove the default header and footer respectively.
 
-<ExamplesExample file="v-data-table/prop-hide-header-footer" /> -->
+<ExamplesExample file="v-data-table/prop-hide-header-footer" />
 
 #### Selection
 
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
index b2b4fd0d4f6..36ff04e6f59 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -73,6 +73,8 @@ export type VDataTableSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots
 export const makeDataTableProps = propsFactory({
   ...makeVDataTableRowsProps(),
 
+  hideDefaultFooter: Boolean,
+  hideDefaultHeader: Boolean,
   width: [String, Number],
   search: String,
 
@@ -240,12 +242,14 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
             default: () => slots.default ? slots.default(slotProps.value) : (
               <>
                 { slots.colgroup?.(slotProps.value) }
-                <thead>
-                  <VDataTableHeaders
-                    { ...dataTableHeadersProps }
-                    v-slots={ slots }
-                  />
-                </thead>
+                { !props.hideDefaultHeader && (
+                  <thead key="thead">
+                    <VDataTableHeaders
+                      { ...dataTableHeadersProps }
+                      v-slots={ slots }
+                    />
+                  </thead>
+                )}
                 { slots.thead?.(slotProps.value) }
                 <tbody>
                   { slots['body.prepend']?.(slotProps.value) }
@@ -263,7 +267,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
                 { slots.tfoot?.(slotProps.value) }
               </>
             ),
-            bottom: () => slots.bottom ? slots.bottom(slotProps.value) : (
+            bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && (
               <>
                 <VDivider />
 
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
index 752b48c8cab..72e3496f213 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
@@ -165,13 +165,15 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
             default: () => slots.default ? slots.default(slotProps.value) : (
               <>
                 { slots.colgroup?.(slotProps.value) }
-                <thead class="v-data-table__thead" role="rowgroup">
-                  <VDataTableHeaders
-                    { ...dataTableHeadersProps }
-                    sticky={ props.fixedHeader }
-                    v-slots={ slots }
-                  />
-                </thead>
+                { !props.hideDefaultHeader && (
+                  <thead key="thead" class="v-data-table__thead" role="rowgroup">
+                    <VDataTableHeaders
+                      { ...dataTableHeadersProps }
+                      sticky={ props.fixedHeader }
+                      v-slots={ slots }
+                    />
+                  </thead>
+                )}
                 { slots.thead?.(slotProps.value) }
                 <tbody class="v-data-table__tbody" role="rowgroup">
                   { slots['body.prepend']?.(slotProps.value) }
@@ -189,7 +191,7 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
                 { slots.tfoot?.(slotProps.value) }
               </>
             ),
-            bottom: () => slots.bottom ? slots.bottom(slotProps.value) : (
+            bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && (
               <>
                 <VDivider />
 
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
index bee0fb23013..ee4364ccf21 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
@@ -203,13 +203,15 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
               >
                 <table>
                   { slots.colgroup?.(slotProps.value) }
-                  <thead>
-                    <VDataTableHeaders
-                      { ...dataTableHeadersProps }
-                      sticky={ props.fixedHeader }
-                      v-slots={ slots }
-                    />
-                  </thead>
+                  { !props.hideDefaultHeader && (
+                    <thead key="thead">
+                      <VDataTableHeaders
+                        { ...dataTableHeadersProps }
+                        sticky={ props.fixedHeader }
+                        v-slots={ slots }
+                      />
+                    </thead>
+                  )}
                   <tbody>
                     <tr ref={ markerRef } style={{ height: convertToUnit(paddingTop.value), border: 0 }}>
                       <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>

From 1bc66cd2a049677f68d2598d6e12450c75e6d117 Mon Sep 17 00:00:00 2001
From: John Leider <9064066+johnleider@users.noreply.github.com>
Date: Fri, 10 May 2024 14:40:54 -0500
Subject: [PATCH 032/122] feat(VStepperVertical): create new component (#19524)

---
 .../api-generator/src/locale/en/Stepper.json  |  27 +++
 .../src/locale/en/StepperItem.json            |  12 +
 .../src/locale/en/VExpansionPanelTitle.json   |   3 +-
 .../api-generator/src/locale/en/VStepper.json |  22 +-
 .../src/locale/en/VStepperItem.json           |   9 -
 .../locale/en/VStepperVerticalActions.json    |   9 +
 .../src/locale/en/VStepperVerticalItem.json   |   7 +
 packages/docs/src/data/nav.json               |   4 +
 .../v-stepper-vertical/slot-actions.vue       |  84 +++++++
 .../src/examples/v-stepper-vertical/usage.vue |  53 +++++
 .../pages/en/components/vertical-steppers.md  |  70 ++++++
 .../pages/en/getting-started/upgrade-guide.md |   5 +
 .../VExpansionPanel/VExpansionPanel.tsx       |   4 +-
 .../VExpansionPanel/VExpansionPanels.tsx      |  23 +-
 .../src/components/VStepper/VStepper.tsx      |   9 +-
 .../src/components/VStepper/VStepperItem.tsx  |   7 +-
 packages/vuetify/src/composables/group.ts     |  10 +
 .../VStepperVertical/VStepperVertical.tsx     | 138 ++++++++++++
 .../VStepperVerticalActions.tsx               |  51 +++++
 .../VStepperVerticalItem.sass                 |  74 +++++++
 .../VStepperVertical/VStepperVerticalItem.tsx | 206 ++++++++++++++++++
 .../src/labs/VStepperVertical/_variables.scss |   3 +
 .../src/labs/VStepperVertical/index.ts        |   3 +
 packages/vuetify/src/labs/components.ts       |   1 +
 24 files changed, 792 insertions(+), 42 deletions(-)
 create mode 100644 packages/api-generator/src/locale/en/Stepper.json
 create mode 100644 packages/api-generator/src/locale/en/StepperItem.json
 create mode 100644 packages/api-generator/src/locale/en/VStepperVerticalActions.json
 create mode 100644 packages/api-generator/src/locale/en/VStepperVerticalItem.json
 create mode 100644 packages/docs/src/examples/v-stepper-vertical/slot-actions.vue
 create mode 100644 packages/docs/src/examples/v-stepper-vertical/usage.vue
 create mode 100644 packages/docs/src/pages/en/components/vertical-steppers.md
 create mode 100644 packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx
 create mode 100644 packages/vuetify/src/labs/VStepperVertical/VStepperVerticalActions.tsx
 create mode 100644 packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.sass
 create mode 100644 packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
 create mode 100644 packages/vuetify/src/labs/VStepperVertical/_variables.scss
 create mode 100644 packages/vuetify/src/labs/VStepperVertical/index.ts

diff --git a/packages/api-generator/src/locale/en/Stepper.json b/packages/api-generator/src/locale/en/Stepper.json
new file mode 100644
index 00000000000..797be50f8e6
--- /dev/null
+++ b/packages/api-generator/src/locale/en/Stepper.json
@@ -0,0 +1,27 @@
+{
+  "props": {
+    "altLabels": "Places the labels beneath the step.",
+    "editable": "Marks step as editable.",
+    "hideActions": "Hide actions bar (prev and next buttons).",
+    "itemTitle": "Property on supplied `items` that contains its title.",
+    "itemValue": "Property on supplied `items` that contains its value.",
+    "mobile": "Forces the stepper into a mobile state, removing labels from stepper items.",
+    "nextText": "The text used for the Next button.",
+    "prevText": "The text used for the Prev button.",
+    "nonLinear": "Allow user to jump to any step."
+  },
+  "slots": {
+    "[`header-item.${string}`]": "Slot for customizing header items when using the [items](/api/v-stepper/#props-items) prop.",
+    "[`item.${string}`]": "Slot for customizing the content for each step.",
+    "actions": "Slot for customizing [v-stepper-actions](/api/v-stepper-actions/).",
+    "header": "Slot for customizing the header.",
+    "header-item": "Slot for customizing all header items.",
+    "icon": "Slot for customizing all stepper item icons.",
+    "next": "Slot for customizing the next step functionailty",
+    "prev": "Slot for customizing the prev step functionality"
+  },
+  "exposed": {
+    "next": "Move to the next step.",
+    "prev": "Move to the prev step."
+  }
+}
diff --git a/packages/api-generator/src/locale/en/StepperItem.json b/packages/api-generator/src/locale/en/StepperItem.json
new file mode 100644
index 00000000000..3f1ddeb13a5
--- /dev/null
+++ b/packages/api-generator/src/locale/en/StepperItem.json
@@ -0,0 +1,12 @@
+{
+  "props": {
+    "complete": "Marks step as complete.",
+    "completeIcon": "Icon to display when step is marked as completed.",
+    "editable": "Marks step as editable.",
+    "editIcon": "Icon to display when step is editable.",
+    "errorIcon": "Icon to display when step has an error.",
+    "error": "Puts the stepper item in a manual error state.",
+    "rules": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`.",
+    "step": "Content to display inside step circle."
+  }
+}
diff --git a/packages/api-generator/src/locale/en/VExpansionPanelTitle.json b/packages/api-generator/src/locale/en/VExpansionPanelTitle.json
index 814c6cca0c8..c3d385c2bf4 100644
--- a/packages/api-generator/src/locale/en/VExpansionPanelTitle.json
+++ b/packages/api-generator/src/locale/en/VExpansionPanelTitle.json
@@ -2,6 +2,7 @@
   "props": {
     "collapseIcon": "Icon used when the expansion panel is in a collapsable state.",
     "expandIcon": "Icon used when the expansion panel is in a expandable state.",
-    "hideActions": "Hide the expand icon in the content title."
+    "hideActions": "Hide the expand icon in the content title.",
+    "static": "Remove title size expansion when selected."
   }
 }
diff --git a/packages/api-generator/src/locale/en/VStepper.json b/packages/api-generator/src/locale/en/VStepper.json
index 43b4515f855..ae3f59342c2 100644
--- a/packages/api-generator/src/locale/en/VStepper.json
+++ b/packages/api-generator/src/locale/en/VStepper.json
@@ -1,26 +1,6 @@
 {
   "props": {
-    "altLabels": "Places the labels beneath the step.",
-    "editable": "Marks step as editable.",
-    "flat": "Removes the stepper's elevation.",
-    "hideActions": "Hide actions bar (prev and next buttons).",
-    "itemTitle": "Property on supplied `items` that contains its title.",
-    "itemValue": "Property on supplied `items` that contains its value.",
-    "mobile": "Forces the stepper into a mobile state, removing labels from stepper items.",
-    "nextText": "The text used for the Next button.",
-    "prevText": "The text used for the Prev button.",
-    "nonLinear": "Allow user to jump to any step.",
-    "vertical": "Display steps vertically."
-  },
-  "slots": {
-    "[`header-item.${string}`]": "Slot for customizing header items when using the [items](/api/v-stepper/#props-items) prop.",
-    "[`item.${string}`]": "Slot for customizing the content for each step.",
-    "actions": "Slot for customizing [v-stepper-actions](/api/v-stepper-actions/).",
-    "header": "Slot for customizing the header.",
-    "header-item": "Slot for customizing all header items.",
-    "icon": "Slot for customizing all stepper item icons.",
-    "next": "Slot for customizing the next step functionailty",
-    "prev": "Slot for customizing the prev step functionality"
+    "flat": "Removes the stepper's elevation."
   },
   "exposed": {
     "next": "Move to the next step.",
diff --git a/packages/api-generator/src/locale/en/VStepperItem.json b/packages/api-generator/src/locale/en/VStepperItem.json
index 6a4eb04f3bf..6ee1816d2a3 100644
--- a/packages/api-generator/src/locale/en/VStepperItem.json
+++ b/packages/api-generator/src/locale/en/VStepperItem.json
@@ -1,16 +1,7 @@
 {
   "props": {
-    "complete": "Marks step as complete.",
-    "completeIcon": "Icon to display when step is marked as completed.",
-    "editable": "Marks step as editable.",
-    "editIcon": "Icon to display when step is editable.",
-    "errorIcon": "Icon to display when step has an error.",
-    "error": "Puts the stepper item in a manual error state.",
-    "rules": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`.",
-    "step": "Content to display inside step circle."
   },
   "events": {
-    "click": "Emitted when component is clicked."
   },
   "slots": {
     "icon": "Slot for customizing all stepper item icons."
diff --git a/packages/api-generator/src/locale/en/VStepperVerticalActions.json b/packages/api-generator/src/locale/en/VStepperVerticalActions.json
new file mode 100644
index 00000000000..4ecea34c2de
--- /dev/null
+++ b/packages/api-generator/src/locale/en/VStepperVerticalActions.json
@@ -0,0 +1,9 @@
+{
+  "props": {
+    "finish": "Changes the Next button to use the finish text.",
+    "finishText": "The text used for the finish button. Shown when using the **finish** prop."
+  },
+  "events": {
+    "click:finish": "Emitted when the clicking the finish button."
+  }
+}
diff --git a/packages/api-generator/src/locale/en/VStepperVerticalItem.json b/packages/api-generator/src/locale/en/VStepperVerticalItem.json
new file mode 100644
index 00000000000..ca6696cfa26
--- /dev/null
+++ b/packages/api-generator/src/locale/en/VStepperVerticalItem.json
@@ -0,0 +1,7 @@
+{
+  "events": {
+    "click:finish": "Event emitted when clicking the finish button",
+    "click:next": "Event emitted when clicking the next button",
+    "click:previous": "Event emitted when clicking the previous button"
+  }
+}
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index 91446a8eadb..fa98c50da22 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -248,6 +248,10 @@
         "title": "snackbar-queue",
         "subfolder": "components"
       },
+      {
+        "title": "vertical-steppers",
+        "subfolder": "components"
+      },
       {
         "title": "time-pickers",
         "subfolder": "components"
diff --git a/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue b/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue
new file mode 100644
index 00000000000..8b9b45cc840
--- /dev/null
+++ b/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue
@@ -0,0 +1,84 @@
+<template>
+  <v-stepper-vertical>
+    <template v-slot:default="{ step }">
+      <v-stepper-vertical-item
+        :complete="step > 1"
+        subtitle="Personal details"
+        title="Step one"
+        value="1"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
+
+        <template v-slot:next="{ next }">
+          <v-btn color="primary" @click="next"></v-btn>
+        </template>
+
+        <template v-slot:prev></template>
+      </v-stepper-vertical-item>
+
+      <v-stepper-vertical-item
+        :complete="step > 2"
+        subtitle="Contact Details"
+        title="Step two"
+        value="2"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
+
+        <template v-slot:next="{ next }">
+          <v-btn color="primary" @click="next"></v-btn>
+        </template>
+
+        <template v-slot:prev="{ prev }">
+          <v-btn variant="plain" @click="prev"></v-btn>
+        </template>
+      </v-stepper-vertical-item>
+
+      <v-stepper-vertical-item
+        subtitle="Confirmation"
+        title="Step three"
+        value="3"
+        @click:next="onClickFinish"
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
+
+        <template v-slot:next="{ next }">
+          <v-btn color="primary" text="Finish" @click="next"></v-btn>
+        </template>
+
+        <template v-slot:prev="{ prev }">
+          <v-btn v-if="!finished" variant="plain" @click="prev"></v-btn>
+
+          <v-btn v-else text="Reset" variant="plain" @click="finished = false"></v-btn>
+        </template>
+      </v-stepper-vertical-item>
+    </template>
+  </v-stepper-vertical>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const finished = shallowRef(false)
+
+  function onClickFinish () {
+    finished.value = true
+
+    alert('Finished')
+  }
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      finished: false,
+    }),
+
+    methods: {
+      onClickFinish () {
+        this.finished = true
+
+        alert('Finished')
+      },
+    },
+  }
+</script>
diff --git a/packages/docs/src/examples/v-stepper-vertical/usage.vue b/packages/docs/src/examples/v-stepper-vertical/usage.vue
new file mode 100644
index 00000000000..141dc55bf82
--- /dev/null
+++ b/packages/docs/src/examples/v-stepper-vertical/usage.vue
@@ -0,0 +1,53 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <v-container>
+      <v-stepper-vertical :items="items">
+        <template v-slot:item.1>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
+        </template>
+
+        <template v-slot:item.2>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
+        </template>
+
+        <template v-slot:item.3>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
+        </template>
+      </v-stepper-vertical>
+    </v-container>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = 'v-stepper-vertical'
+  const model = ref('default')
+  const options = []
+
+  const items = [
+    'Step 1',
+    'Step 2',
+    'Step 3',
+  ]
+  const props = computed(() => {
+    return {
+      items: [
+        'Step 1',
+        'Step 2',
+        'Step 3',
+      ],
+    }
+  })
+
+  const slots = computed(() => {
+    return ''
+  })
+
+  const code = computed(() => {
+    return `<v-stepper-vertical${propsToString(props.value)}>${slots.value}</v-stepper-vertical>`
+  })
+</script>
diff --git a/packages/docs/src/pages/en/components/vertical-steppers.md b/packages/docs/src/pages/en/components/vertical-steppers.md
new file mode 100644
index 00000000000..f7852a3c159
--- /dev/null
+++ b/packages/docs/src/pages/en/components/vertical-steppers.md
@@ -0,0 +1,70 @@
+---
+emphasized: true
+meta:
+  nav: Steppers Vertical
+  title: Vertical Stepper component
+  description: The vertical stepper component is a navigation element that guides users through a sequence of steps.
+  keywords: vertical stepper, vuetify vertical stepper component, vue vertical stepper component
+related:
+  - /components/buttons/
+  - /components/icons/
+  - /styles/transitions/
+features:
+  report: true
+---
+
+# Vertical Steppers
+
+The `v-stepper-vertical` component can be used as a navigation element that guides users through a sequence of steps.
+
+<PageFeatures />
+
+::: warning
+
+This feature requires [v3.5.14](/getting-started/release-notes/?version=v3.5.14)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VStepperVertical } from 'vuetify/labs/VStepperVertical'
+
+export default createVuetify({
+  components: {
+    VStepperVertical,
+  },
+})
+```
+
+## Usage
+
+Vertical steppers allow users to complete a series of actions in step order.
+
+<ExamplesUsage name="v-stepper-vertical" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-stepper-vertical](/api/v-stepper-vertical/) | Primary Component |
+
+<ApiInline hide-links />
+
+### Guide
+
+The `v-stepper-vertical` is the vertical variant of the [v-stepper](/components/steppers/) component. It also extends functionality of [v-expansion-panels](/components/expansion-panels/).
+
+#### Slots
+
+The `v-stepper-vertical` component has several slots for customization.
+
+##### Actions
+
+Customize the flow of your stepper by hooking into the available **prev** and **next** slots.
+
+<ExamplesExample file="v-stepper-vertical/slot-actions" />
diff --git a/packages/docs/src/pages/en/getting-started/upgrade-guide.md b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
index 39923393806..61737ab9450 100644
--- a/packages/docs/src/pages/en/getting-started/upgrade-guide.md
+++ b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
@@ -232,6 +232,11 @@ app.use(vuetify)
 
 - `v-simple-table` has been renamed to `v-table`
 
+### v-stepper (vertical)
+
+- `v-stepper-step` has been renamed to `v-stepper-vertical-item`. Move content into the **title** slot.
+- `v-stepper-content` has been removed. Move content to the default slot of `v-stepper-vertical-item`.
+
 ### v-data-table
 
 - Headers objects:
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
index 021ae213381..4e913e6ffe5 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
@@ -124,7 +124,9 @@ export const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({
       )
     })
 
-    return {}
+    return {
+      groupItem,
+    }
   },
 })
 
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
index ead703dc956..f60ccb44420 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
@@ -23,6 +23,15 @@ const allowedVariants = ['default', 'accordion', 'inset', 'popout'] as const
 
 type Variant = typeof allowedVariants[number]
 
+export type VExpansionPanelSlot = {
+  prev: () => void
+  next: () => void
+}
+
+export type VExpansionPanelSlots = {
+  default: VExpansionPanelSlot
+}
+
 export const makeVExpansionPanelsProps = propsFactory({
   flat: Boolean,
 
@@ -37,7 +46,7 @@ export const makeVExpansionPanelsProps = propsFactory({
   },
 }, 'VExpansionPanels')
 
-export const VExpansionPanels = genericComponent()({
+export const VExpansionPanels = genericComponent<VExpansionPanelSlots>()({
   name: 'VExpansionPanels',
 
   props: makeVExpansionPanelsProps(),
@@ -47,7 +56,7 @@ export const VExpansionPanels = genericComponent()({
   },
 
   setup (props, { slots }) {
-    useGroup(props, VExpansionPanelSymbol)
+    const { next, prev } = useGroup(props, VExpansionPanelSymbol)
 
     const { themeClasses } = provideTheme(props)
 
@@ -83,11 +92,15 @@ export const VExpansionPanels = genericComponent()({
           props.class,
         ]}
         style={ props.style }
-        v-slots={ slots }
-      />
+      >
+        { slots.default?.({ prev, next }) }
+      </props.tag>
     ))
 
-    return {}
+    return {
+      next,
+      prev,
+    }
   },
 })
 
diff --git a/packages/vuetify/src/components/VStepper/VStepper.tsx b/packages/vuetify/src/components/VStepper/VStepper.tsx
index 4e2fa4ebce2..1350134118c 100644
--- a/packages/vuetify/src/components/VStepper/VStepper.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepper.tsx
@@ -20,13 +20,11 @@ import { genericComponent, getPropertyFromItem, only, propsFactory, useRender }
 
 // Types
 import type { InjectionKey, PropType } from 'vue'
-import type { StepperItemSlot } from './VStepperItem'
+import type { StepperItem, StepperItemSlot } from './VStepperItem'
 import type { GroupItemProvide } from '@/composables/group'
 
 export const VStepperSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-stepper')
 
-export type StepperItem = string | Record<string, any>
-
 export type VStepperSlot = {
   prev: () => void
   next: () => void
@@ -48,7 +46,7 @@ export type VStepperSlots = {
   [key: `item.${string}`]: StepperItem
 }
 
-export const makeVStepperProps = propsFactory({
+export const makeStepperProps = propsFactory({
   altLabels: Boolean,
   bgColor: String,
   editable: Boolean,
@@ -68,7 +66,10 @@ export const makeVStepperProps = propsFactory({
   mobile: Boolean,
   nonLinear: Boolean,
   flat: Boolean,
+}, 'Stepper')
 
+export const makeVStepperProps = propsFactory({
+  ...makeStepperProps(),
   ...makeGroupProps({
     mandatory: 'force' as const,
     selectedClass: 'v-stepper-item--selected',
diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
index 129bc0395c0..42766e6221a 100644
--- a/packages/vuetify/src/components/VStepper/VStepperItem.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
@@ -21,6 +21,8 @@ import { genericComponent, propsFactory, useRender } from '@/util'
 import type { PropType } from 'vue'
 import type { RippleDirectiveBinding } from '@/directives/ripple'
 
+export type StepperItem = string | Record<string, any>
+
 export type StepperItemSlot = {
   canEdit: boolean
   hasError: boolean
@@ -39,7 +41,7 @@ export type VStepperItemSlots = {
 
 export type ValidationRule = () => string | boolean
 
-export const makeVStepperItemProps = propsFactory({
+export const makeStepperItemProps = propsFactory({
   color: String,
   title: String,
   subtitle: String,
@@ -67,7 +69,10 @@ export const makeVStepperItemProps = propsFactory({
     type: Array as PropType<readonly ValidationRule[]>,
     default: () => ([]),
   },
+}, 'StepperItem')
 
+export const makeVStepperItemProps = propsFactory({
+  ...makeStepperItemProps(),
   ...makeGroupItemProps(),
 }, 'VStepperItem')
 
diff --git a/packages/vuetify/src/composables/group.ts b/packages/vuetify/src/composables/group.ts
index 42d7e6b14a5..b039bbcecc6 100644
--- a/packages/vuetify/src/composables/group.ts
+++ b/packages/vuetify/src/composables/group.ts
@@ -47,6 +47,8 @@ export interface GroupProvide {
 export interface GroupItemProvide {
   id: number
   isSelected: Ref<boolean>
+  isFirst: Ref<boolean>
+  isLast: Ref<boolean>
   toggle: () => void
   select: (value: boolean) => void
   selectedClass: Ref<(string | undefined)[] | false>
@@ -129,6 +131,12 @@ export function useGroupItem (
   const isSelected = computed(() => {
     return group.isSelected(id)
   })
+  const isFirst = computed(() => {
+    return group.items.value[0].id === id
+  })
+  const isLast = computed(() => {
+    return group.items.value[group.items.value.length - 1].id === id
+  })
 
   const selectedClass = computed(() => isSelected.value && [group.selectedClass.value, props.selectedClass])
 
@@ -139,6 +147,8 @@ export function useGroupItem (
   return {
     id,
     isSelected,
+    isFirst,
+    isLast,
     toggle: () => group.select(id, !isSelected.value),
     select: (value: boolean) => group.select(id, value),
     selectedClass,
diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx
new file mode 100644
index 00000000000..2cd11d98ae4
--- /dev/null
+++ b/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx
@@ -0,0 +1,138 @@
+// Components
+import { VStepperVerticalItem } from './VStepperVerticalItem'
+import { makeVExpansionPanelsProps, VExpansionPanels } from '@/components/VExpansionPanel/VExpansionPanels'
+import { makeStepperProps } from '@/components/VStepper/VStepper'
+
+// Composables
+import { provideDefaults } from '@/composables/defaults'
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+// Utilities
+import { computed, ref, toRefs } from 'vue'
+import { genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'
+
+// Types
+import type { VStepperSlot } from '@/components/VStepper/VStepper'
+import type { StepperItem, StepperItemSlot } from '@/components/VStepper/VStepperItem'
+
+export type VStepperVerticalSlots = {
+  actions: StepperItemSlot
+  default: VStepperSlot & { step: unknown }
+  icon: StepperItemSlot
+  title: StepperItemSlot
+  subtitle: StepperItemSlot
+  item: StepperItem
+  prev: StepperItemSlot
+  next: StepperItemSlot
+} & {
+  [key: `header-item.${string}`]: StepperItemSlot
+  [key: `item.${string}`]: StepperItem
+}
+
+export const makeVStepperVerticalProps = propsFactory({
+  prevText: {
+    type: String,
+    default: '$vuetify.stepper.prev',
+  },
+  nextText: {
+    type: String,
+    default: '$vuetify.stepper.next',
+  },
+
+  ...makeStepperProps(),
+  ...omit(makeVExpansionPanelsProps({
+    mandatory: 'force' as const,
+    variant: 'accordion' as const,
+  }), ['static']),
+}, 'VStepperVertical')
+
+export const VStepperVertical = genericComponent<VStepperVerticalSlots>()({
+  name: 'VStepperVertical',
+
+  props: makeVStepperVerticalProps(),
+
+  emits: {
+    'update:modelValue': (val: any) => true,
+  },
+
+  setup (props, { slots }) {
+    const vExpansionPanelsRef = ref<typeof VExpansionPanels>()
+    const { color, editable, prevText, nextText, hideActions } = toRefs(props)
+
+    const model = useProxiedModel(props, 'modelValue')
+    const items = computed(() => props.items.map((item, index) => {
+      const title = getPropertyFromItem(item, props.itemTitle, item)
+      const value = getPropertyFromItem(item, props.itemValue, index + 1)
+
+      return {
+        title,
+        value,
+        raw: item,
+      }
+    }))
+
+    provideDefaults({
+      VStepperVerticalItem: {
+        color,
+        editable,
+        prevText,
+        nextText,
+        hideActions,
+        static: true,
+      },
+      VStepperActions: {
+        color,
+      },
+    })
+
+    useRender(() => {
+      const expansionPanelProps = VExpansionPanels.filterProps(props)
+
+      return (
+        <VExpansionPanels
+          { ...expansionPanelProps }
+          v-model={ model.value }
+          ref={ vExpansionPanelsRef }
+          class={[
+            'v-stepper',
+            {
+              'v-stepper--alt-labels': props.altLabels,
+              'v-stepper--flat': props.flat,
+              'v-stepper--non-linear': props.nonLinear,
+              'v-stepper--mobile': props.mobile,
+            },
+            props.class,
+          ]}
+          style={ props.style }
+        >
+          {{
+            ...slots,
+            default: ({
+              prev,
+              next,
+            }) => {
+              return (
+                <>
+                  { items.value.map(({ raw, ...item }) => (
+                    <VStepperVerticalItem { ...item }>
+                      {{
+                        ...slots,
+                        default: slots[`item.${item.value}`],
+                      }}
+                    </VStepperVerticalItem>
+                  ))}
+
+                  { slots.default?.({ prev, next, step: model.value }) }
+                </>
+              )
+            },
+          }}
+        </VExpansionPanels>
+      )
+    })
+
+    return {}
+  },
+})
+
+export type VStepperVertical = InstanceType<typeof VStepperVertical>
diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalActions.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalActions.tsx
new file mode 100644
index 00000000000..0246cdaad84
--- /dev/null
+++ b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalActions.tsx
@@ -0,0 +1,51 @@
+// Components
+import { makeVStepperActionsProps, VStepperActions } from '@/components/VStepper/VStepperActions'
+
+// Utilities
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+// Types
+import type { VStepperActionsSlots } from '@/components/VStepper/VStepperActions'
+
+export const makeVStepperVerticalActionsProps = propsFactory({
+  ...makeVStepperActionsProps(),
+}, 'VStepperActions')
+
+export const VStepperVerticalActions = genericComponent<VStepperActionsSlots>()({
+  name: 'VStepperVerticalActions',
+
+  props: makeVStepperVerticalActionsProps(),
+
+  emits: {
+    'click:prev': () => true,
+    'click:next': () => true,
+  },
+
+  setup (props, { emit, slots }) {
+    function onClickPrev () {
+      emit('click:prev')
+    }
+
+    function onClickNext () {
+      emit('click:next')
+    }
+
+    useRender(() => {
+      const stepperActionsProps = VStepperActions.filterProps(props)
+
+      return (
+        <VStepperActions
+          class="v-stepper-vertical-actions"
+          { ...stepperActionsProps }
+          onClick:prev={ onClickPrev }
+          onClick:next={ onClickNext }
+          v-slots={ slots }
+        />
+      )
+    })
+
+    return {}
+  },
+})
+
+export type VStepperVerticalActions = InstanceType<typeof VStepperVerticalActions>
diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.sass b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.sass
new file mode 100644
index 00000000000..96967cabc2f
--- /dev/null
+++ b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.sass
@@ -0,0 +1,74 @@
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-stepper-vertical-item
+  position: relative
+  transition-duration: $stepper-vertical-item-transition-duration
+  transition-property: $stepper-vertical-item-transition-property
+  transition-timing-function: $stepper-vertical-item-transition-timing-function
+
+  &__title
+    font-size: 1rem
+
+  &__subtitle
+    font-size: .75rem
+
+  .v-expansion-panel-text
+    padding-inline-start: 32px
+
+  &:not(:last-child):before
+    content: ''
+    position: absolute
+    width: 2px
+    height: calc(100% - 30px)
+    background: rgba(var(--v-border-color), var(--v-border-opacity))
+    left: 35px
+    top: 44px
+    z-index: 1
+    transition-duration: 300ms
+    transition-property: height
+
+  &:after
+    display: none
+
+  &.v-expansion-panel--disabled,
+  &:not(.v-stepper-vertical-item--editable)
+    .v-expansion-panel-title
+      pointer-events: none
+
+      .v-expansion-panel-title__overlay
+        opacity: 0
+
+.v-stepper-vertical-item__avatar.v-avatar
+  background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity))
+  color: rgb(var(--v-theme-on-surface-variant))
+  transition-property: background
+
+  .v-icon
+    font-size: .875rem
+
+  .v-expansion-panel--active &
+    background: rgb(var(--v-theme-surface-variant))
+
+  .v-stepper-vertical-item--error &
+    background: rgb(var(--v-theme-error))
+    color: rgb(var(--v-theme-on-error))
+
+.v-stepper-vertical-item__title
+  .v-stepper-vertical-item--error &
+    color: rgb(var(--v-theme-error))
+
+.v-stepper-vertical-item__subtitle
+  .v-stepper-vertical-item--error &
+    color: rgb(var(--v-theme-error))
+
+.v-stepper-vertical-actions
+  &.v-stepper-actions
+    .v-btn
+      margin-inline-end: 8px
+
+    .v-stepper &
+      justify-content: flex-end
+      padding: 24px 0 0
+      flex-direction: row-reverse
diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
new file mode 100644
index 00000000000..fb2f13c0e7c
--- /dev/null
+++ b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
@@ -0,0 +1,206 @@
+// Styles
+import './VStepperVerticalItem.sass'
+
+// Components
+import { VStepperVerticalActions } from './VStepperVerticalActions'
+import { VAvatar } from '@/components/VAvatar/VAvatar'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'
+import { VExpansionPanel } from '@/components/VExpansionPanel'
+import { makeVExpansionPanelProps } from '@/components/VExpansionPanel/VExpansionPanel'
+import { VIcon } from '@/components/VIcon/VIcon'
+import { makeStepperItemProps } from '@/components/VStepper/VStepperItem'
+
+// Utilities
+import { computed, ref } from 'vue'
+import { genericComponent, omit, propsFactory, useRender } from '@/util'
+
+// Types
+import type { StepperItemSlot } from '@/components/VStepper/VStepperItem'
+
+export type VStepperVerticalItemSlots = {
+  default: StepperItemSlot
+  icon: StepperItemSlot
+  subtitle: StepperItemSlot
+  title: StepperItemSlot
+  text: StepperItemSlot
+  prev: StepperItemSlot
+  next: StepperItemSlot
+  actions: StepperItemSlot & {
+    next: () => void
+    prev: () => void
+  }
+}
+
+export const makeVStepperVerticalItemProps = propsFactory({
+  hideActions: Boolean,
+
+  ...makeStepperItemProps(),
+  ...omit(makeVExpansionPanelProps({
+    expandIcon: '',
+    collapseIcon: '',
+  }), ['hideActions']),
+}, 'VStepperVerticalItem')
+
+export const VStepperVerticalItem = genericComponent<VStepperVerticalItemSlots>()({
+  name: 'VStepperVerticalItem',
+
+  props: makeVStepperVerticalItemProps(),
+
+  emits: {
+    'click:next': () => true,
+    'click:prev': () => true,
+    'click:finish': () => true,
+  },
+
+  setup (props, { emit, slots }) {
+    const vExpansionPanelRef = ref<typeof VExpansionPanel>()
+    const step = computed(() => !isNaN(parseInt(props.value)) ? Number(props.value) : props.value)
+    const groupItem = computed(() => vExpansionPanelRef.value?.groupItem)
+    const isSelected = computed(() => groupItem.value?.isSelected.value ?? false)
+    const isValid = computed(() => isSelected.value ? props.rules.every(handler => handler() === true) : null)
+    const canEdit = computed(() => !props.disabled && props.editable)
+    const hasError = computed(() => props.error || (isSelected.value && !isValid.value))
+    const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value === true))
+
+    const disabled = computed(() => {
+      if (props.disabled) return props.disabled
+      if (groupItem.value?.isFirst.value) return 'prev'
+
+      return false
+    })
+    const icon = computed(() => {
+      if (hasError.value) return props.errorIcon
+      if (hasCompleted.value) return props.completeIcon
+      if (groupItem.value?.isSelected.value && props.editable) return props.editIcon
+
+      return props.icon
+    })
+
+    const slotProps = computed(() => ({
+      canEdit: canEdit.value,
+      hasError: hasError.value,
+      hasCompleted: hasCompleted.value,
+      title: props.title,
+      subtitle: props.subtitle,
+      step: step.value,
+      value: props.value,
+    }))
+
+    const actionProps = computed(() => ({
+      ...slotProps.value,
+      prev: onClickPrev,
+      next: onClickNext,
+    }))
+
+    function onClickNext () {
+      emit('click:next')
+
+      if (groupItem.value?.isLast.value) return
+
+      groupItem.value.group.next()
+    }
+
+    function onClickPrev () {
+      emit('click:prev')
+
+      groupItem.value.group.prev()
+    }
+
+    useRender(() => {
+      const hasColor = (
+        hasCompleted.value ||
+        groupItem.value?.isSelected.value
+      ) && (
+        !hasError.value &&
+        !props.disabled
+      )
+
+      const hasActions = !props.hideActions || !!slots.actions
+      const expansionPanelProps = VExpansionPanel.filterProps(props)
+
+      return (
+        <VExpansionPanel
+          _as="VStepperVerticalItem"
+          ref={ vExpansionPanelRef }
+          { ...expansionPanelProps }
+          class={[
+            'v-stepper-vertical-item',
+            {
+              'v-stepper-vertical-item--complete': hasCompleted.value,
+              'v-stepper-vertical-item--disabled': props.disabled,
+              'v-stepper-vertical-item--editable': canEdit.value,
+              'v-stepper-vertical-item--error': hasError.value,
+            },
+            props.class,
+          ]}
+          readonly={ !props.editable }
+          style={ props.style }
+          color=""
+          hide-actions={ false }
+          value={ step.value }
+        >
+          {{
+            title: () => (
+              <>
+                <VAvatar
+                  key="stepper-avatar"
+                  class="v-stepper-vertical-item__avatar"
+                  color={ hasColor ? props.color : undefined }
+                  size={ 24 }
+                  start
+                >
+                  { slots.icon?.(slotProps.value) ?? (
+                    icon.value ? (
+                      <VIcon icon={ icon.value }></VIcon>
+                    ) : step.value
+                  )}
+                </VAvatar>
+
+                <div>
+                  <div class="v-stepper-vertical-item__title">
+                    { slots.title?.(slotProps.value) ?? props.title }
+                  </div>
+
+                  <div class="v-stepper-vertical-item__subtitle">
+                    { slots.subtitle?.(slotProps.value) ?? props.subtitle }
+                  </div>
+                </div>
+              </>
+            ),
+            text: () => (
+              <>
+                { slots.default?.(slotProps.value) ?? props.text }
+
+                { hasActions && (
+                  <VDefaultsProvider
+                    defaults={{
+                      VStepperVerticalActions: {
+                        disabled: disabled.value,
+                        finish: groupItem.value?.isLast.value,
+                      },
+                    }}
+                  >
+                    { slots.actions?.(actionProps.value) ?? (
+                      <VStepperVerticalActions
+                        onClick:next={ onClickNext }
+                        onClick:prev={ onClickPrev }
+                        v-slots={{
+                          prev: slots.prev ? () => slots.prev?.(actionProps.value) : undefined,
+                          next: slots.next ? () => slots.next?.(actionProps.value) : undefined,
+                        }}
+                      />
+                    )}
+                  </VDefaultsProvider>
+                )}
+              </>
+            ),
+          }}
+        </VExpansionPanel>
+      )
+    })
+
+    return {}
+  },
+})
+
+export type VStepperVerticalItem = InstanceType<typeof VStepperVerticalItem>
diff --git a/packages/vuetify/src/labs/VStepperVertical/_variables.scss b/packages/vuetify/src/labs/VStepperVertical/_variables.scss
new file mode 100644
index 00000000000..eecd20e1bcd
--- /dev/null
+++ b/packages/vuetify/src/labs/VStepperVertical/_variables.scss
@@ -0,0 +1,3 @@
+$stepper-vertical-item-transition-duration: .2s !default;
+$stepper-vertical-item-transition-property: opacity !default;
+$stepper-vertical-item-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
diff --git a/packages/vuetify/src/labs/VStepperVertical/index.ts b/packages/vuetify/src/labs/VStepperVertical/index.ts
new file mode 100644
index 00000000000..dc0127e0bb8
--- /dev/null
+++ b/packages/vuetify/src/labs/VStepperVertical/index.ts
@@ -0,0 +1,3 @@
+export { VStepperVertical } from './VStepperVertical'
+export { VStepperVerticalItem } from './VStepperVerticalItem'
+export { VStepperVerticalActions } from './VStepperVerticalActions'
diff --git a/packages/vuetify/src/labs/components.ts b/packages/vuetify/src/labs/components.ts
index 7f2adedc388..6b753ff8790 100644
--- a/packages/vuetify/src/labs/components.ts
+++ b/packages/vuetify/src/labs/components.ts
@@ -2,6 +2,7 @@ export * from './VCalendar'
 export * from './VDateInput'
 export * from './VNumberInput'
 export * from './VPicker'
+export * from './VStepperVertical'
 export * from './VPullToRefresh'
 export * from './VSnackbarQueue'
 export * from './VTimePicker'

From 322fb4f0ae99f756bfc7fd3f03ca7704c57d2bc9 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 May 2024 14:43:55 -0500
Subject: [PATCH 033/122] docs(VStepper): update alert with vertical link

---
 packages/docs/src/pages/en/components/steppers.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/en/components/steppers.md b/packages/docs/src/pages/en/components/steppers.md
index 8c567dd420a..c5cc8c3dd85 100644
--- a/packages/docs/src/pages/en/components/steppers.md
+++ b/packages/docs/src/pages/en/components/steppers.md
@@ -38,7 +38,7 @@ A stepper can be used for a multitude of scenarios, including shopping carts, re
 
 ::: warning
 
-Due to the massive differences in display and functionality between horizontal and vertical steppers, the **vertical** property is moving to a new component `v-stepper-vertical`.
+Due to the massive differences in display and functionality between horizontal and vertical steppers, the **vertical** property is moving to a new component [v-stepper-vertical](/components/vertical-steppers/).
 
 :::
 

From fc2f154f2712a1ca44eadc9b9f7b7f73597d1b52 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 10 May 2024 14:55:47 -0500
Subject: [PATCH 034/122] chore(release): publish v3.6.5

---
 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 97dcc3b9a4f..75f37791928 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.6.4",
+  "version": "3.6.5",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index 7b5030b27f9..fbaba5a6f08 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.6.4",
+  "version": "3.6.5",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^22.0.0",
     "tsx": "^4.7.2",
     "vue": "^3.4.27",
-    "vuetify": "^3.6.4"
+    "vuetify": "^3.6.5"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index d3ed4af0118..44634b1e106 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.6.4",
+  "version": "3.6.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.11.0",
     "vue-instantsearch": "^4.16.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.6.4"
+    "vuetify": "^3.6.5"
   },
   "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.27",
-    "@vuetify/api-generator": "^3.6.4",
+    "@vuetify/api-generator": "^3.6.5",
     "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 a6fb9e68887..2be48354daa 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.6.4",
+  "version": "3.6.5",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From edf29fda836b7252fb92d5d25c965f53bf46a523 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Sat, 11 May 2024 18:47:50 +1000
Subject: [PATCH 035/122] docs(faq): add vue/compat instructions

---
 .../src/pages/en/getting-started/frequently-asked-questions.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md b/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md
index 0b41d3c1b9c..5fb39a95570 100644
--- a/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md
+++ b/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md
@@ -99,6 +99,6 @@ The following responses are a collection of common questions asked by the Vuetif
 
 * **Is Vuetify 3 compatible with `@vue/compat`?**
 
-  No. If this changes in the future, we will update this FAQ and make a public notification.
+  Not directly, you have to set `configureCompat({ MODE: 3 })` globally and `MODE: 2` in each of your components that you want to run in compatibility mode. There will still be some incorrect warnings that can be ignored with the `-ATTR_FALSE_VALUE` filter in devtools.
 
 <PromotedPromoted type="theme" />

From 6a9d8e68d53dc390c075f15bcabbb9366e1b465c Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Sat, 11 May 2024 18:54:18 +1000
Subject: [PATCH 036/122] docs(faq): add onMounted ref question

closes #19736
---
 .../pages/en/getting-started/frequently-asked-questions.md    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md b/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md
index 5fb39a95570..36c6ac88a46 100644
--- a/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md
+++ b/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md
@@ -101,4 +101,8 @@ The following responses are a collection of common questions asked by the Vuetif
 
   Not directly, you have to set `configureCompat({ MODE: 3 })` globally and `MODE: 2` in each of your components that you want to run in compatibility mode. There will still be some incorrect warnings that can be ignored with the `-ATTR_FALSE_VALUE` filter in devtools.
 
+* **Why don't elements exist in the DOM yet in `onMounted()`?** ([#19736](https://github.com/vuetifyjs/vuetify/issues/19736))
+
+  Some vuetify components are asynchronous, so there is no guarantee that their children will be mounted immediately. Either wait for the target element itself to be mounted with `v-on:vue:mounted` or use `onMounted` in a separate component that only has plain elements between the `<template>` and your target element.
+
 <PromotedPromoted type="theme" />

From 1b56e4e601c098620daf6eb077d797174703e0da Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 11 May 2024 10:59:40 -0500
Subject: [PATCH 037/122] Revert "fix(colors): apply theme-on-surface override
 for bg text color"

This reverts commit 43529fa936cbb0d58d78e1c48aebc1e6c7fe3d1e.
---
 packages/vuetify/src/styles/generic/_colors.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/vuetify/src/styles/generic/_colors.scss b/packages/vuetify/src/styles/generic/_colors.scss
index 487ebe6ddd5..ce4d091c42a 100644
--- a/packages/vuetify/src/styles/generic/_colors.scss
+++ b/packages/vuetify/src/styles/generic/_colors.scss
@@ -13,7 +13,6 @@
 @mixin background-text-color($color_name, $color_type) {
   $map_value: map-deep-get(colors.$text-on-colors, $color_name, $color_type);
 
-  --v-theme-on-surface: #{$map_value} !important;
   color: $map_value !important;
 }
 

From 9520563d9a4652c7d725c975ef9ac1e3673ceb47 Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Sun, 12 May 2024 22:31:46 +1000
Subject: [PATCH 038/122] fix(VNumberInput): mobile friendly support (#19791)

---
 .../src/labs/VNumberInput/VNumberInput.tsx      | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
index 3fa97c4cf7a..ca1924ed3f2 100644
--- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -19,7 +19,7 @@ import type { PropType } from 'vue'
 import type { VTextFieldSlots } from '@/components/VTextField/VTextField'
 
 type ControlSlot = {
-  click: () => void
+  click: (e: MouseEvent) => void
 }
 
 type VNumberInputSlots = Omit<VTextFieldSlots, 'default'> & {
@@ -108,11 +108,13 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       }
     }
 
-    function onClickUp () {
+    function onClickUp (e: MouseEvent) {
+      e.stopPropagation()
       toggleUpDown()
     }
 
-    function onClickDown () {
+    function onClickDown (e: MouseEvent) {
+      e.stopPropagation()
       toggleUpDown(false)
     }
 
@@ -143,6 +145,10 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       model.value = v ? +(v) : undefined
     }
 
+    function onControlMousedown (e: MouseEvent) {
+      e.stopPropagation()
+    }
+
     useRender(() => {
       const { modelValue: _, ...textFieldProps } = VTextField.filterProps(props)
 
@@ -162,6 +168,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                   size="small"
                   tabindex="-1"
                   onClick={ onClickDown }
+                  onMousedown={ onControlMousedown }
                 />
               ) : (
                 <VDefaultsProvider
@@ -195,6 +202,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                   name="increment-btn"
                   icon="$collapse"
                   onClick={ onClickUp }
+                  onMousedown={ onControlMousedown }
                   size="small"
                   tabindex="-1"
                 />
@@ -236,6 +244,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                 tile
                 tabindex="-1"
                 onClick={ onClickUp }
+                onMousedown={ onControlMousedown }
               />
             </div>
           ) : (!props.reverse
@@ -255,6 +264,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
                 tile
                 tabindex="-1"
                 onClick={ onClickDown }
+                onMousedown={ onControlMousedown }
               />
 
               <VDivider vertical />
@@ -284,6 +294,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
           ]}
           { ...textFieldProps }
           style={ props.style }
+          inputmode="decimal"
         >
           {{
             ...slots,

From 98ff5745fd98700389856265cc630e6eda765675 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 12 May 2024 16:26:44 -0500
Subject: [PATCH 039/122] docs(sparklines): update examples

---
 .../v-sparkline/misc-dashboard-cards.vue      | 112 ------------------
 .../src/pages/en/components/sparklines.md     |   6 -
 2 files changed, 118 deletions(-)
 delete mode 100644 packages/docs/src/examples/v-sparkline/misc-dashboard-cards.vue

diff --git a/packages/docs/src/examples/v-sparkline/misc-dashboard-cards.vue b/packages/docs/src/examples/v-sparkline/misc-dashboard-cards.vue
deleted file mode 100644
index 3510d210937..00000000000
--- a/packages/docs/src/examples/v-sparkline/misc-dashboard-cards.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <v-row dense>
-    <v-col v-for="(card, i) in cards" :key="i" cols="12" md="4">
-      <v-card elevation="4">
-        <div class="pa-4">
-          <div class="ps-4 text-caption text-medium-emphasis">{{ card.title }}</div>
-
-          <v-card-title class="pt-0 mt-n1 d-flex align-center">
-            <div class="me-2">{{ card.value }}</div>
-
-            <v-chip
-              :color="card.color"
-              :prepend-icon="`mdi-arrow-${card.change.startsWith('-') ? 'down' : 'up'}`"
-              class="pe-1"
-              size="x-small"
-              label
-            >
-              <template v-slot:prepend>
-                <v-icon size="10"></v-icon>
-              </template>
-
-              <span class="text-caption">{{ card.change }}</span>
-            </v-chip>
-          </v-card-title>
-        </div>
-
-        <v-sparkline
-          :color="card.color"
-          :gradient="[`${card.color}E6`, `${card.color}33`, `${card.color}00`]"
-          :model-value="card.data"
-          height="50"
-          line-width="1"
-          min="0"
-          padding="0"
-          fill
-          smooth
-        ></v-sparkline>
-      </v-card>
-    </v-col>
-  </v-row>
-</template>
-
-<script setup>
-  import { computed } from 'vue'
-
-  const bandwidth = [5, 2, 5, 9, 5, 10, 3, 5, 3, 7, 1, 8, 2, 9, 6]
-  const requests = [1, 3, 8, 2, 9, 5, 10, 3, 5, 3, 7, 6, 8, 2, 9, 6]
-  const cache = [9, 9, 9, 9, 8.9, 9, 9, 9, 9, 9]
-
-  const cards = computed(() => ([
-    {
-      title: 'Bandwidth Used',
-      value: '1.01 TB',
-      change: '-20.12%',
-      color: '#da5656',
-      data: bandwidth,
-    },
-    {
-      title: 'Requests Served',
-      value: '7.96 M',
-      change: '-7.73%',
-      color: '#da5656',
-      data: requests,
-    },
-    {
-      title: 'Cache Hit Rate',
-      value: '95.69 %',
-      change: '0.75%',
-      color: '#2fc584',
-      data: cache,
-    },
-  ]))
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        bandwidth: [5, 2, 5, 9, 5, 10, 3, 5, 3, 7, 1, 8, 2, 9, 6],
-        requests: [1, 3, 8, 2, 9, 5, 10, 3, 5, 3, 7, 6, 8, 2, 9, 6],
-        cache: [9, 9, 9, 9, 8.9, 9, 9, 9, 9, 9],
-      }
-    },
-    computed: {
-      cards () {
-        return [
-          {
-            title: 'Bandwidth Used',
-            value: '1.01 TB',
-            change: '-20.12%',
-            color: '#da5656',
-            data: this.bandwidth,
-          },
-          {
-            title: 'Requests Served',
-            value: '7.96 M',
-            change: '-7.73%',
-            color: '#da5656',
-            data: this.requests,
-          },
-          {
-            title: 'Cache Hit Rate',
-            value: '95.69 %',
-            change: '0.75%',
-            color: '#2fc584',
-            data: this.cache,
-          },
-        ]
-      },
-    },
-  }
-</script>
diff --git a/packages/docs/src/pages/en/components/sparklines.md b/packages/docs/src/pages/en/components/sparklines.md
index dce852fa122..693c8e3a0af 100644
--- a/packages/docs/src/pages/en/components/sparklines.md
+++ b/packages/docs/src/pages/en/components/sparklines.md
@@ -71,9 +71,3 @@ The `v-sparkline` component pairs nicely with `v-card` and `v-sheet` to create c
 For concise information, a complete chart might be overkill. Using a trend line with gradient provides enough detail for the user without showing too much information.
 
 <ExamplesExample file="v-sparkline/misc-heart-rate" />
-
-#### Dashboard cards
-
-The `v-sparkline` component can be used to create a variety of different cards for a dashboard. Here we show a few examples of how it can be used to display different types of data.
-
-<ExamplesExample file="v-sparkline/misc-dashboard-cards" />

From 0f6a3592b8e42d4ef4a9fe11b1d57ffd7d62d4a0 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 12 May 2024 21:15:30 -0500
Subject: [PATCH 040/122] docs(flex): move all classes into entry table

---
 packages/docs/src/pages/en/styles/flex.md | 726 ++++++++++++----------
 1 file changed, 394 insertions(+), 332 deletions(-)

diff --git a/packages/docs/src/pages/en/styles/flex.md b/packages/docs/src/pages/en/styles/flex.md
index c4970962a30..e383a5bc5cf 100644
--- a/packages/docs/src/pages/en/styles/flex.md
+++ b/packages/docs/src/pages/en/styles/flex.md
@@ -15,7 +15,400 @@ Control the layout of flex containers with alignment, justification and more wit
 
 <PageFeatures />
 
-<PromotedEntry />
+| Class | Properties |
+| - | - |
+| **d-flex** | display: flex; |
+| **d-inline-flex** | display: inline-flex; |
+| **d-sm-flex** | display: flex; |
+| **d-sm-inline-flex** | display: inline-flex; |
+| **d-md-flex** | display: flex; |
+| **d-md-inline-flex** | display: inline-flex; |
+| **d-lg-flex** | display: flex; |
+| **d-lg-inline-flex** | display: inline-flex; |
+| **d-xl-flex** | display: flex; |
+| **d-xl-inline-flex** | display: inline-flex; |
+| **flex-fill** | flex: 1 1 auto; |
+| **flex-sm-fill** | flex: 1 1 auto; |
+| **flex-md-fill** | flex: 1 1 auto; |
+| **flex-lg-fill** | flex: 1 1 auto; |
+| **flex-xl-fill** | flex: 1 1 auto; |
+| **flex-1-1** | flex: 1 1 0%; |
+| **flex-sm-1-1** | flex: 1 1 0%; |
+| **flex-md-1-1** | flex: 1 1 0%; |
+| **flex-lg-1-1** | flex: 1 1 0%; |
+| **flex-xl-1-1** | flex: 1 1 0%; |
+| **flex-1-0** | flex: 1 0 0%; |
+| **flex-sm-1-0** | flex: 1 0 0%; |
+| **flex-md-1-0** | flex: 1 0 0%; |
+| **flex-lg-1-0** | flex: 1 0 0%; |
+| **flex-xl-1-0** | flex: 1 0 0%; |
+| **flex-0-1** | flex: 0 1 auto; |
+| **flex-sm-0-1** | flex: 0 1 auto; |
+| **flex-md-0-1** | flex: 0 1 auto; |
+| **flex-lg-0-1** | flex: 0 1 auto; |
+| **flex-xl-0-1** | flex: 0 1 auto; |
+| **flex-0-0** | flex: 0 0 auto; |
+| **flex-sm-0-0** | flex: 0 0 auto; |
+| **flex-md-0-0** | flex: 0 0 auto; |
+| **flex-lg-0-0** | flex: 0 0 auto; |
+| **flex-xl-0-0** | flex: 0 0 auto; |
+| **flex-1-1-100** | flex: 1 1 100%; |
+| **flex-sm-1-1-100** | flex: 1 1 100%; |
+| **flex-md-1-1-100** | flex: 1 1 100%; |
+| **flex-lg-1-1-100** | flex: 1 1 100%; |
+| **flex-xl-1-1-100** | flex: 1 1 100%; |
+| **flex-1-0-100** | flex: 1 0 100%; |
+| **flex-sm-1-0-100** | flex: 1 0 100%; |
+| **flex-md-1-0-100** | flex: 1 0 100%; |
+| **flex-lg-1-0-100** | flex: 1 0 100%; |
+| **flex-xl-1-0-100** | flex: 1 0 100%; |
+| **flex-0-1-100** | flex: 0 1 100%; |
+| **flex-sm-0-1-100** | flex: 0 1 100%; |
+| **flex-md-0-1-100** | flex: 0 1 100%; |
+| **flex-lg-0-1-100** | flex: 0 1 100%; |
+| **flex-xl-0-1-100** | flex: 0 1 100%; |
+| **flex-0-0-100** | flex: 0 0 100%; |
+| **flex-sm-0-0-100** | flex: 0 0 100%; |
+| **flex-md-0-0-100** | flex: 0 0 100%; |
+| **flex-lg-0-0-100** | flex: 0 0 100%; |
+| **flex-xl-0-0-100** | flex: 0 0 100%; |
+| **ga-0** | gap: 0; |
+| **ga-1** | gap: 4px; |
+| **ga-2** | gap: 8px; |
+| **ga-3** | gap: 12px; |
+| **ga-4** | gap: 16px; |
+| **ga-5** | gap: 20px; |
+| **ga-6** | gap: 24px; |
+| **ga-7** | gap: 28px; |
+| **ga-8** | gap: 32px; |
+| **ga-9** | gap: 36px; |
+| **ga-10** | gap: 40px; |
+| **ga-11** | gap: 44px; |
+| **ga-12** | gap: 48px; |
+| **ga-13** | gap: 52px; |
+| **ga-14** | gap: 56px; |
+| **ga-15** | gap: 60px; |
+| **ga-16** | gap: 64px; |
+| **ga-sm-0** | gap: 0; |
+| **ga-sm-1** | gap: 4px; |
+| **ga-sm-2** | gap: 8px; |
+| **ga-sm-3** | gap: 12px; |
+| **ga-sm-4** | gap: 16px; |
+| **ga-sm-5** | gap: 20px; |
+| **ga-sm-6** | gap: 24px; |
+| **ga-sm-7** | gap: 28px; |
+| **ga-sm-8** | gap: 32px; |
+| **ga-sm-9** | gap: 36px; |
+| **ga-sm-10** | gap: 40px; |
+| **ga-sm-11** | gap: 44px; |
+| **ga-sm-12** | gap: 48px; |
+| **ga-sm-13** | gap: 52px; |
+| **ga-sm-14** | gap: 56px; |
+| **ga-sm-15** | gap: 60px; |
+| **ga-sm-16** | gap: 64px; |
+| **ga-md-0** | gap: 0; |
+| **ga-md-1** | gap: 4px; |
+| **ga-md-2** | gap: 8px; |
+| **ga-md-3** | gap: 12px; |
+| **ga-md-4** | gap: 16px; |
+| **ga-md-5** | gap: 20px; |
+| **ga-md-6** | gap: 24px; |
+| **ga-md-7** | gap: 28px; |
+| **ga-md-8** | gap: 32px; |
+| **ga-md-9** | gap: 36px; |
+| **ga-md-10** | gap: 40px; |
+| **ga-md-11** | gap: 44px; |
+| **ga-md-12** | gap: 48px; |
+| **ga-md-13** | gap: 52px; |
+| **ga-md-14** | gap: 56px; |
+| **ga-md-15** | gap: 60px; |
+| **ga-md-16** | gap: 64px; |
+| **ga-lg-0** | gap: 0; |
+| **ga-lg-1** | gap: 4px; |
+| **ga-lg-2** | gap: 8px; |
+| **ga-lg-3** | gap: 12px; |
+| **ga-lg-4** | gap: 16px; |
+| **ga-lg-5** | gap: 20px; |
+| **ga-lg-6** | gap: 24px; |
+| **ga-lg-7** | gap: 28px; |
+| **ga-lg-8** | gap: 32px; |
+| **ga-lg-9** | gap: 36px; |
+| **ga-lg-10** | gap: 40px; |
+| **ga-lg-11** | gap: 44px; |
+| **ga-lg-12** | gap: 48px; |
+| **ga-lg-13** | gap: 52px; |
+| **ga-lg-14** | gap: 56px; |
+| **ga-lg-15** | gap: 60px; |
+| **ga-lg-16** | gap: 64px; |
+| **ga-xl-0** | gap: 0; |
+| **ga-xl-1** | gap: 4px; |
+| **ga-xl-2** | gap: 8px; |
+| **ga-xl-3** | gap: 12px; |
+| **ga-xl-4** | gap: 16px; |
+| **ga-xl-5** | gap: 20px; |
+| **ga-xl-6** | gap: 24px; |
+| **ga-xl-7** | gap: 28px; |
+| **ga-xl-8** | gap: 32px; |
+| **ga-xl-9** | gap: 36px; |
+| **ga-xl-10** | gap: 40px; |
+| **ga-xl-11** | gap: 44px; |
+| **ga-xl-12** | gap: 48px; |
+| **ga-xl-13** | gap: 52px; |
+| **ga-xl-14** | gap: 56px; |
+| **ga-xl-15** | gap: 60px; |
+| **ga-xl-16** | gap: 64px; |
+| **flex-row** | flex-direction: row; |
+| **flex-row-reverse** | flex-direction: row-reverse; |
+| **flex-column** | flex-direction: column; |
+| **flex-column-reverse** | flex-direction: column-reverse; |
+| **flex-sm-row** | flex-direction: row; |
+| **flex-sm-row-reverse** | flex-direction: row-reverse; |
+| **flex-sm-column** | flex-direction: column; |
+| **flex-sm-column-reverse** | flex-direction: column-reverse; |
+| **flex-md-row** | flex-direction: row; |
+| **flex-md-row-reverse** | flex-direction: row-reverse; |
+| **flex-md-column** | flex-direction: column; |
+| **flex-md-column-reverse** | flex-direction: column-reverse; |
+| **flex-lg-row** | flex-direction: row; |
+| **flex-lg-row-reverse** | flex-direction: row-reverse; |
+| **flex-lg-column** | flex-direction: column; |
+| **flex-lg-column-reverse** | flex-direction: column-reverse; |
+| **flex-xl-row** | flex-direction: row; |
+| **flex-xl-row-reverse** | flex-direction: row-reverse; |
+| **flex-xl-column** | flex-direction: column; |
+| **flex-xl-column-reverse** | flex-direction: column-reverse; |
+| **justify-start** | justify-content: flex-start; |
+| **justify-end** | justify-content: flex-end; |
+| **justify-center** | justify-content: center; |
+| **justify-space-between** | justify-content: space-between; |
+| **justify-space-around** | justify-content: space-around; |
+| **justify-space-evenly** | justify-content: space-evenly; |
+| **justify-sm-start** | justify-content: flex-start; |
+| **justify-sm-end** | justify-content: flex-end; |
+| **justify-sm-center** | justify-content: center; |
+| **justify-sm-space-between** | justify-content: space-between; |
+| **justify-sm-space-around** | justify-content: space-around; |
+| **justify-sm-space-evenly** | justify-content: space-evenly; |
+| **justify-md-start** | justify-content: flex-start; |
+| **justify-md-end** | justify-content: flex-end; |
+| **justify-md-center** | justify-content: center; |
+| **justify-md-space-between** | justify-content: space-between; |
+| **justify-md-space-around** | justify-content: space-around; |
+| **justify-md-space-evenly** | justify-content: space-evenly; |
+| **justify-lg-start** | justify-content: flex-start; |
+| **justify-lg-end** | justify-content: flex-end; |
+| **justify-lg-center** | justify-content: center; |
+| **justify-lg-space-between** | justify-content: space-between; |
+| **justify-lg-space-around** | justify-content: space-around; |
+| **justify-lg-space-evenly** | justify-content: space-evenly; |
+| **justify-xl-start** | justify-content: flex-start; |
+| **justify-xl-end** | justify-content: flex-end; |
+| **justify-xl-center** | justify-content: center; |
+| **justify-xl-space-between** | justify-content: space-between; |
+| **justify-xl-space-around** | justify-content: space-around; |
+| **justify-xl-space-evenly** | justify-content: space-evenly; |
+| **align-start** | align-items: flex-start; |
+| **align-end** | align-items: flex-end; |
+| **align-center** | align-items: center; |
+| **align-baseline** | align-items: baseline; |
+| **align-stretch** | align-items: stretch; |
+| **align-sm-start** | align-items: flex-start; |
+| **align-sm-end** | align-items: flex-end; |
+| **align-sm-center** | align-items: center; |
+| **align-sm-baseline** | align-items: baseline; |
+| **align-sm-stretch** | align-items: stretch; |
+| **align-md-start** | align-items: flex-start; |
+| **align-md-end** | align-items: flex-end; |
+| **align-md-center** | align-items: center; |
+| **align-md-baseline** | align-items: baseline; |
+| **align-md-stretch** | align-items: stretch; |
+| **align-lg-start** | align-items: flex-start; |
+| **align-lg-end** | align-items: flex-end; |
+| **align-lg-center** | align-items: center; |
+| **align-lg-baseline** | align-items: baseline; |
+| **align-lg-stretch** | align-items: stretch; |
+| **align-xl-start** | align-items: flex-start; |
+| **align-xl-end** | align-items: flex-end; |
+| **align-xl-center** | align-items: center; |
+| **align-xl-baseline** | align-items: baseline; |
+| **align-xl-stretch** | align-items: stretch; |
+| **align-self-start** | align-self: flex-start; |
+| **align-self-end** | align-self: flex-end; |
+| **align-self-center** | align-self: center; |
+| **align-self-baseline** | align-self: baseline; |
+| **align-self-auto** | align-self: auto; |
+| **align-self-stretch** | align-self: stretch; |
+| **align-self-sm-start** | align-self: flex-start; |
+| **align-self-sm-end** | align-self: flex-end; |
+| **align-self-sm-center** | align-self: center; |
+| **align-self-sm-baseline** | align-self: baseline; |
+| **align-self-sm-auto** | align-self: auto; |
+| **align-self-sm-stretch** | align-self: stretch; |
+| **align-self-md-start** | align-self: flex-start; |
+| **align-self-md-end** | align-self: flex-end; |
+| **align-self-md-center** | align-self: center; |
+| **align-self-md-baseline** | align-self: baseline; |
+| **align-self-md-auto** | align-self: auto; |
+| **align-self-md-stretch** | align-self: stretch; |
+| **align-self-lg-start** | align-self: flex-start; |
+| **align-self-lg-end** | align-self: flex-end; |
+| **align-self-lg-center** | align-self: center; |
+| **align-self-lg-baseline** | align-self: baseline; |
+| **align-self-lg-auto** | align-self: auto; |
+| **align-self-lg-stretch** | align-self: stretch; |
+| **align-self-xl-start** | align-self: flex-start; |
+| **align-self-xl-end** | align-self: flex-end; |
+| **align-self-xl-center** | align-self: center; |
+| **align-self-xl-baseline** | align-self: baseline; |
+| **align-self-xl-auto** | align-self: auto; |
+| **align-self-xl-stretch** | align-self: stretch; |
+| **flex-sm-nowrap** | flex-wrap: nowrap; |
+| **flex-sm-wrap** | flex-wrap: wrap; |
+| **flex-sm-wrap-reverse** | flex-wrap: wrap-reverse; |
+| **flex-md-nowrap** | flex-wrap: nowrap; |
+| **flex-md-wrap** | flex-wrap: wrap; |
+| **flex-md-wrap-reverse** | flex-wrap: wrap-reverse; |
+| **flex-lg-nowrap** | flex-wrap: nowrap; |
+| **flex-lg-wrap** | flex-wrap: wrap; |
+| **flex-lg-wrap-reverse** | flex-wrap: wrap-reverse; |
+| **flex-xl-nowrap** | flex-wrap: nowrap; |
+| **flex-xl-wrap** | flex-wrap: wrap; |
+| **flex-xl-wrap-reverse** | flex-wrap: wrap-reverse; |
+| **order-first** | order: -1; |
+| **order-0** | order: 0; |
+| **order-1** | order: 1; |
+| **order-2** | order: 2; |
+| **order-3** | order: 3; |
+| **order-4** | order: 4; |
+| **order-5** | order: 5; |
+| **order-6** | order: 6; |
+| **order-7** | order: 7; |
+| **order-8** | order: 8; |
+| **order-9** | order: 9; |
+| **order-10** | order: 10; |
+| **order-11** | order: 11; |
+| **order-12** | order: 12; |
+| **order-last** | order: 13; |
+| **order-sm-first** | order: -1; |
+| **order-sm-0** | order: 0; |
+| **order-sm-1** | order: 1; |
+| **order-sm-2** | order: 2; |
+| **order-sm-3** | order: 3; |
+| **order-sm-4** | order: 4; |
+| **order-sm-5** | order: 5; |
+| **order-sm-6** | order: 6; |
+| **order-sm-7** | order: 7; |
+| **order-sm-8** | order: 8; |
+| **order-sm-9** | order: 9; |
+| **order-sm-10** | order: 10; |
+| **order-sm-11** | order: 11; |
+| **order-sm-12** | order: 12; |
+| **order-sm-last** | order: 13; |
+| **order-md-first** | order: -1; |
+| **order-md-0** | order: 0; |
+| **order-md-1** | order: 1; |
+| **order-md-2** | order: 2; |
+| **order-md-3** | order: 3; |
+| **order-md-4** | order: 4; |
+| **order-md-5** | order: 5; |
+| **order-md-6** | order: 6; |
+| **order-md-7** | order: 7; |
+| **order-md-8** | order: 8; |
+| **order-md-9** | order: 9; |
+| **order-md-10** | order: 10; |
+| **order-md-11** | order: 11; |
+| **order-md-12** | order: 12; |
+| **order-md-last** | order: 13; |
+| **order-lg-first** | order: -1; |
+| **order-lg-0** | order: 0; |
+| **order-lg-1** | order: 1; |
+| **order-lg-2** | order: 2; |
+| **order-lg-3** | order: 3; |
+| **order-lg-4** | order: 4; |
+| **order-lg-5** | order: 5; |
+| **order-lg-6** | order: 6; |
+| **order-lg-7** | order: 7; |
+| **order-lg-8** | order: 8; |
+| **order-lg-9** | order: 9; |
+| **order-lg-10** | order: 10; |
+| **order-lg-11** | order: 11; |
+| **order-lg-12** | order: 12; |
+| **order-lg-last** | order: 13; |
+| **order-xl-first** | order: -1; |
+| **order-xl-0** | order: 0; |
+| **order-xl-1** | order: 1; |
+| **order-xl-2** | order: 2; |
+| **order-xl-3** | order: 3; |
+| **order-xl-4** | order: 4; |
+| **order-xl-5** | order: 5; |
+| **order-xl-6** | order: 6; |
+| **order-xl-7** | order: 7; |
+| **order-xl-8** | order: 8; |
+| **order-xl-9** | order: 9; |
+| **order-xl-10** | order: 10; |
+| **order-xl-11** | order: 11; |
+| **order-xl-12** | order: 12; |
+| **order-xl-last** | order: 13; |
+| **align-content-start** | align-content: flex-start; |
+| **align-content-end** | align-content: flex-end; |
+| **align-content-center** | align-content: center; |
+| **align-content-space-between** | align-content: space-between; |
+| **align-content-space-around** | align-content: space-around; |
+| **align-content-space-evenly** | align-content: space-evenly; |
+| **align-content-stretch** | align-content: stretch; |
+| **align-content-sm-start** | align-content: flex-start; |
+| **align-content-sm-end** | align-content: flex-end; |
+| **align-content-sm-center** | align-content: center; |
+| **align-content-sm-space-between** | align-content: space-between; |
+| **align-content-sm-space-around** | align-content: space-around; |
+| **align-content-sm-space-evenly** | align-content: space-evenly; |
+| **align-content-sm-stretch** | align-content: stretch; |
+| **align-content-md-start** | align-content: flex-start; |
+| **align-content-md-end** | align-content: flex-end; |
+| **align-content-md-center** | align-content: center; |
+| **align-content-md-space-between** | align-content: space-between; |
+| **align-content-md-space-around** | align-content: space-around; |
+| **align-content-md-space-evenly** | align-content: space-evenly; |
+| **align-content-md-stretch** | align-content: stretch; |
+| **align-content-lg-start** | align-content: flex-start; |
+| **align-content-lg-end** | align-content: flex-end; |
+| **align-content-lg-center** | align-content: center; |
+| **align-content-lg-space-between** | align-content: space-between; |
+| **align-content-lg-space-around** | align-content: space-around; |
+| **align-content-lg-space-evenly** | align-content: space-evenly; |
+| **align-content-lg-stretch** | align-content: stretch; |
+| **align-content-xl-start** | align-content: flex-start; |
+| **align-content-xl-end** | align-content: flex-end; |
+| **align-content-xl-center** | align-content: center; |
+| **align-content-xl-space-between** | align-content: space-between; |
+| **align-content-xl-space-around** | align-content: space-around; |
+| **align-content-xl-space-evenly** | align-content: space-evenly; |
+| **align-content-xl-stretch** | align-content: stretch; |
+| **flex-nowrap** | flex-wrap: nowrap; |
+| **flex-wrap** | flex-wrap: wrap; |
+| **flex-wrap-reverse** | flex-wrap: wrap-reverse; |
+| **flex-grow-0** | flex-grow: 0; |
+| **flex-grow-1** | flex-grow: 1; |
+| **flex-shrink-0** | flex-shrink: 0; |
+| **flex-shrink-1** | flex-shrink: 1; |
+| **flex-sm-grow-0** | flex-grow: 0; |
+| **flex-md-grow-0** | flex-grow: 0; |
+| **flex-lg-grow-0** | flex-grow: 0; |
+| **flex-xl-grow-0** | flex-grow: 0; |
+| **flex-sm-grow-1** | flex-grow: 1; |
+| **flex-md-grow-1** | flex-grow: 1; |
+| **flex-lg-grow-1** | flex-grow: 1; |
+| **flex-xl-grow-1** | flex-grow: 1; |
+| **flex-sm-shrink-0** | flex-shrink: 0; |
+| **flex-md-shrink-0** | flex-shrink: 0; |
+| **flex-lg-shrink-0** | flex-shrink: 0; |
+| **flex-xl-shrink-0** | flex-shrink: 0; |
+| **flex-sm-shrink-1** | flex-shrink: 1; |
+| **flex-md-shrink-1** | flex-shrink: 1; |
+| **flex-lg-shrink-1** | flex-shrink: 1; |
+| **flex-xl-shrink-1** | flex-shrink: 1; { style="max-height: 420px;" fixed-header } |
+
+<VoPromotionsCardVuetify />
 
 ## Enabling flexbox
 
@@ -27,17 +420,6 @@ Using `display` utilities you can turn any element into a flexbox container tran
 
 You can also customize flex utilities to apply based upon various breakpoints.
 
-- **.d-flex**
-- **.d-inline-flex**
-- **.d-sm-flex**
-- **.d-sm-inline-flex**
-- **.d-md-flex**
-- **.d-md-inline-flex**
-- **.d-lg-flex**
-- **.d-lg-inline-flex**
-- **.d-xl-flex**
-- **.d-xl-inline-flex**
-
 ### Caveats
 
 ::: info
@@ -50,54 +432,6 @@ The flex utility classes can be used to modify the **flex** css property. This m
 
 <ExamplesExample file="flex/flex-flex" />
 
-There are also responsive variations for `flex`:
-
-- **.flex-fill**
-- **.flex-sm-fill**
-- **.flex-md-fill**
-- **.flex-lg-fill**
-- **.flex-xl-fill**
-- **.flex-1-1**
-- **.flex-sm-1-1**
-- **.flex-md-1-1**
-- **.flex-lg-1-1**
-- **.flex-xl-1-1**
-- **.flex-1-0**
-- **.flex-sm-1-0**
-- **.flex-md-1-0**
-- **.flex-lg-1-0**
-- **.flex-xl-1-0**
-- **.flex-0-1**
-- **.flex-sm-0-1**
-- **.flex-md-0-1**
-- **.flex-lg-0-1**
-- **.flex-xl-0-1**
-- **.flex-0-0**
-- **.flex-sm-0-0**
-- **.flex-md-0-0**
-- **.flex-lg-0-0**
-- **.flex-xl-0-0**
-- **.flex-1-1-100**
-- **.flex-sm-1-1-100**
-- **.flex-md-1-1-100**
-- **.flex-lg-1-1-100**
-- **.flex-xl-1-1-100**
-- **.flex-1-0-100**
-- **.flex-sm-1-0-100**
-- **.flex-md-1-0-100**
-- **.flex-lg-1-0-100**
-- **.flex-xl-1-0-100**
-- **.flex-0-1-100**
-- **.flex-sm-0-1-100**
-- **.flex-md-0-1-100**
-- **.flex-lg-0-1-100**
-- **.flex-xl-0-1-100**
-- **.flex-0-0-100**
-- **.flex-sm-0-0-100**
-- **.flex-md-0-0-100**
-- **.flex-lg-0-0-100**
-- **.flex-xl-0-0-100**
-
 ## Flex direction
 
 By default, `d-flex` applies `flex-direction: row` and can generally be omitted. However, there may be situations where you need to explicitly define it.
@@ -108,141 +442,24 @@ The `flex-column` and `flex-column-reverse` utility classes can be used to chang
 
 <ExamplesExample file="flex/flex-column" />
 
-There are also responsive variations for `flex-direction`.
-
-- **.flex-row**
-- **.flex-row-reverse**
-- **.flex-column**
-- **.flex-column-reverse**
-- **.flex-sm-row**
-- **.flex-sm-row-reverse**
-- **.flex-sm-column**
-- **.flex-sm-column-reverse**
-- **.flex-md-row**
-- **.flex-md-row-reverse**
-- **.flex-md-column**
-- **.flex-md-column-reverse**
-- **.flex-lg-row**
-- **.flex-lg-row-reverse**
-- **.flex-lg-column**
-- **.flex-lg-column-reverse**
-- **.flex-xl-row**
-- **.flex-xl-row-reverse**
-- **.flex-xl-column**
-- **.flex-xl-column-reverse**
-
 ## Flex justify
 
 The `justify-content` flex setting can be changed using the flex justify classes. This by default will modify the flexbox items on the **x-axis** but is reversed when using `flex-direction: column`, modifying the **y-axis**. Choose from `start` (browser default), `end`, `center`, `space-between`, `space-around`, or `space-evenly`.
 
 <ExamplesExample file="flex/flex-justify" />
 
-There are also responsive variations for `justify-content`.
-
-- **.justify-start**
-- **.justify-end**
-- **.justify-center**
-- **.justify-space-between**
-- **.justify-space-around**
-- **.justify-space-evenly**
-- **.justify-sm-start**
-- **.justify-sm-end**
-- **.justify-sm-center**
-- **.justify-sm-space-between**
-- **.justify-sm-space-around**
-- **.justify-sm-space-evenly**
-- **.justify-md-start**
-- **.justify-md-end**
-- **.justify-md-center**
-- **.justify-md-space-between**
-- **.justify-md-space-around**
-- **.justify-md-space-evenly**
-- **.justify-lg-start**
-- **.justify-lg-end**
-- **.justify-lg-center**
-- **.justify-lg-space-between**
-- **.justify-lg-space-around**
-- **.justify-lg-space-evenly**
-- **.justify-xl-start**
-- **.justify-xl-end**
-- **.justify-xl-center**
-- **.justify-xl-space-between**
-- **.justify-xl-space-around**
-- **.justify-xl-space-evenly**
-
 ## Flex align
 
 The `align-items` flex setting can be changed using the flex align classes. This by default will modify the flexbox items on the **y-axis** but is reversed when using `flex-direction: column`, modifying the **x-axis**. Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
 
 <ExamplesExample file="flex/flex-align" />
 
-There are also responsive variations for `align-items`.
-
-- **.align-start**
-- **.align-end**
-- **.align-center**
-- **.align-baseline**
-- **.align-stretch**
-- **.align-sm-start**
-- **.align-sm-end**
-- **.align-sm-center**
-- **.align-sm-baseline**
-- **.align-sm-stretch**
-- **.align-md-start**
-- **.align-md-end**
-- **.align-md-center**
-- **.align-md-baseline**
-- **.align-md-stretch**
-- **.align-lg-start**
-- **.align-lg-end**
-- **.align-lg-center**
-- **.align-lg-baseline**
-- **.align-lg-stretch**
-- **.align-xl-start**
-- **.align-xl-end**
-- **.align-xl-center**
-- **.align-xl-baseline**
-- **.align-xl-stretch**
-
 ## Flex align self
 
 The `align-self` flex setting can be changed using the flex align-self classes. This by default will modify individual flexbox items across the **y-axis** but is reversed when using `flex-direction: column`, modifying the **x-axis**. Choose from `start`, `end`, `center`, `baseline`, `stretch`, or `auto` (browser default, applies align-items property from flex container).
 
 <ExamplesExample file="flex/flex-align-self" />
 
-There are also responsive variations for `align-self-items`.
-
-- **.align-self-start**
-- **.align-self-end**
-- **.align-self-center**
-- **.align-self-baseline**
-- **.align-self-auto**
-- **.align-self-stretch**
-- **.align-self-sm-start**
-- **.align-self-sm-end**
-- **.align-self-sm-center**
-- **.align-self-sm-baseline**
-- **.align-self-sm-auto**
-- **.align-self-sm-stretch**
-- **.align-self-md-start**
-- **.align-self-md-end**
-- **.align-self-md-center**
-- **.align-self-md-baseline**
-- **.align-self-md-auto**
-- **.align-self-md-stretch**
-- **.align-self-lg-start**
-- **.align-self-lg-end**
-- **.align-self-lg-center**
-- **.align-self-lg-baseline**
-- **.align-self-lg-auto**
-- **.align-self-lg-stretch**
-- **.align-self-xl-start**
-- **.align-self-xl-end**
-- **.align-self-xl-center**
-- **.align-self-xl-baseline**
-- **.align-self-xl-auto**
-- **.align-self-xl-stretch**
-
 ## Auto margins
 
 Using the margin helper classes in a flexbox container, you can control the positioning of flex items on the **x-axis** or **y-axis** when using `flex-row` or `flex-column` respectively.
@@ -259,10 +476,6 @@ Mixing `flex-direction: column` and `align-items`, you can utilize `.mt-auto` an
 
 By default `.d-flex` does not provide any wrapping (behaves similarly to `flex-wrap: nowrap`). This can be modified by applying flex-wrap helper classes in the format `flex-{condition}` where condition can be `nowrap`, `wrap`, or `wrap-reverse`.
 
-- **.flex-nowrap**
-- **.flex-wrap**
-- **.flex-wrap-reverse**
-
 <ExamplesExample file="flex/flex-nowrap" />
 
 <ExamplesExample file="flex/flex-wrap" />
@@ -271,103 +484,12 @@ By default `.d-flex` does not provide any wrapping (behaves similarly to `flex-w
 
 These helper classes can also be applied in the format `flex-{breakpoint}-{condition}` to create more responsive variations based on breakpoints. The following combinations are available:
 
-- **.flex-sm-nowrap**
-- **.flex-sm-wrap**
-- **.flex-sm-wrap-reverse**
-- **.flex-md-nowrap**
-- **.flex-md-wrap**
-- **.flex-md-wrap-reverse**
-- **.flex-lg-nowrap**
-- **.flex-lg-wrap**
-- **.flex-lg-wrap-reverse**
-- **.flex-xl-nowrap**
-- **.flex-xl-wrap**
-- **.flex-xl-wrap-reverse**
-
 ## Flex order
 
 You can change the visual order of flex items with the `order` utilities.
 
 <ExamplesExample file="flex/flex-order" />
 
-There are also responsive variations for `order`.
-
-- **.order-first**
-- **.order-0**
-- **.order-1**
-- **.order-2**
-- **.order-3**
-- **.order-4**
-- **.order-5**
-- **.order-6**
-- **.order-7**
-- **.order-8**
-- **.order-9**
-- **.order-10**
-- **.order-11**
-- **.order-12**
-- **.order-last**
-- **.order-sm-first**
-- **.order-sm-0**
-- **.order-sm-1**
-- **.order-sm-2**
-- **.order-sm-3**
-- **.order-sm-4**
-- **.order-sm-5**
-- **.order-sm-6**
-- **.order-sm-7**
-- **.order-sm-8**
-- **.order-sm-9**
-- **.order-sm-10**
-- **.order-sm-11**
-- **.order-sm-12**
-- **.order-sm-last**
-- **.order-md-first**
-- **.order-md-0**
-- **.order-md-1**
-- **.order-md-2**
-- **.order-md-3**
-- **.order-md-4**
-- **.order-md-5**
-- **.order-md-6**
-- **.order-md-7**
-- **.order-md-8**
-- **.order-md-9**
-- **.order-md-10**
-- **.order-md-11**
-- **.order-md-12**
-- **.order-md-last**
-- **.order-lg-first**
-- **.order-lg-0**
-- **.order-lg-1**
-- **.order-lg-2**
-- **.order-lg-3**
-- **.order-lg-4**
-- **.order-lg-5**
-- **.order-lg-6**
-- **.order-lg-7**
-- **.order-lg-8**
-- **.order-lg-9**
-- **.order-lg-10**
-- **.order-lg-11**
-- **.order-lg-12**
-- **.order-lg-last**
-- **.order-xl-first**
-- **.order-xl-0**
-- **.order-xl-1**
-- **.order-xl-2**
-- **.order-xl-3**
-- **.order-xl-4**
-- **.order-xl-5**
-- **.order-xl-6**
-- **.order-xl-7**
-- **.order-xl-8**
-- **.order-xl-9**
-- **.order-xl-10**
-- **.order-xl-11**
-- **.order-xl-12**
-- **.order-xl-last**
-
 ## Flex align content
 
 The `align-content` flex setting can be changed using the flex align-content classes. This by default will modify the wrapped flexbox content across the **y-axis** but is reversed when using `flex-direction: column`, modifying the **x-axis**. Choose from `start`, `end`, `center`, `space-between`, `space-around`, `space-evenly` or `stretch` (browser default).
@@ -382,70 +504,10 @@ The `align-content` flex setting can be changed using the flex align-content cla
 
 <ExamplesExample file="flex/flex-align-content-around" />
 
-There are also responsive variations for `align-content`.
-
-- **align-content-start**
-- **align-content-end**
-- **align-content-center**
-- **align-content-space-between**
-- **align-content-space-around**
-- **align-content-space-evenly**
-- **align-content-stretch**
-- **align-content-sm-start**
-- **align-content-sm-end**
-- **align-content-sm-center**
-- **align-content-sm-space-between**
-- **align-content-sm-space-around**
-- **align-content-sm-space-evenly**
-- **align-content-sm-stretch**
-- **align-content-md-start**
-- **align-content-md-end**
-- **align-content-md-center**
-- **align-content-md-space-between**
-- **align-content-md-space-around**
-- **align-content-md-space-evenly**
-- **align-content-md-stretch**
-- **align-content-lg-start**
-- **align-content-lg-end**
-- **align-content-lg-center**
-- **align-content-lg-space-between**
-- **align-content-lg-space-around**
-- **align-content-lg-space-evenly**
-- **align-content-lg-stretch**
-- **align-content-xl-start**
-- **align-content-xl-end**
-- **align-content-xl-center**
-- **align-content-xl-space-between**
-- **align-content-xl-space-around**
-- **align-content-xl-space-evenly**
-- **align-content-xl-stretch**
-
 ## Flex grow and shrink
 
 Vuetify has helper classes for applying grow and shrink manually. These can be applied by adding the helper class in the format `flex-{condition}-{value}`, where condition can be either `grow` or `shrink` and value can be either `0` or `1`. The condition `grow` will permit an element to grow to fill available space, whereas `shrink` will permit an element to shrink down to only the space needs for its contents. However, this will only happen if the element must shrink to fit their container such as a container resize or being effected by a `flex-grow-1`. The value `0` will prevent the condition from occurring whereas `1` will permit the condition. The following classes are available:
 
-- **flex-grow-0**
-- **flex-grow-1**
-- **flex-shrink-0**
-- **flex-shrink-1**
-
 <ExamplesExample file="flex/grow-shrink" />
 
 These helper classes can also be applied in the format `flex-{breakpoint}-{condition}-{state}` to create more responsive variations based on breakpoints. The following combinations are available:
-
-- **flex-sm-grow-0**
-- **flex-md-grow-0**
-- **flex-lg-grow-0**
-- **flex-xl-grow-0**
-- **flex-sm-grow-1**
-- **flex-md-grow-1**
-- **flex-lg-grow-1**
-- **flex-xl-grow-1**
-- **flex-sm-shrink-0**
-- **flex-md-shrink-0**
-- **flex-lg-shrink-0**
-- **flex-xl-shrink-0**
-- **flex-sm-shrink-1**
-- **flex-md-shrink-1**
-- **flex-lg-shrink-1**
-- **flex-xl-shrink-1**

From 8ae0c8c666d451c1add1469ca2ce08e5917207ad Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 12 May 2024 21:38:59 -0500
Subject: [PATCH 041/122] docs(float): move classes to top of page

---
 packages/docs/src/pages/en/styles/float.md | 58 +++++++++++-----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/packages/docs/src/pages/en/styles/float.md b/packages/docs/src/pages/en/styles/float.md
index 52bf0f378d9..ec0eb5cbd21 100644
--- a/packages/docs/src/pages/en/styles/float.md
+++ b/packages/docs/src/pages/en/styles/float.md
@@ -15,7 +15,35 @@ Applies a custom float across any breakpoint with responsive float utilities.
 
 <PageFeatures />
 
-<PromotedEntry />
+| Class | Properties |
+| - | - |
+| **float-left** | float: left; |
+| **float-right** | float: right; |
+| **float-start** | float: start; |
+| **float-end** | float: end; |
+| **float-none** | float: none; |
+| **float-sm-left** |  float: left; |
+| **float-sm-right** |  float: right; |
+| **float-sm-start** |  float: start; |
+| **float-sm-end** |  float: end; |
+| **float-sm-none** |  float: none; |
+| **float-md-left** |  float: left; |
+| **float-md-right** |  float: right; |
+| **float-md-start** |  float: start; |
+| **float-md-end** |  float: end; |
+| **float-md-none** |  float: none; |
+| **float-lg-left** |  float: left; |
+| **float-lg-right** |  float: right; |
+| **float-lg-start** |  float: start; |
+| **float-lg-end** |  float: end; |
+| **float-lg-none** |  float: none; |
+| **float-xl-left** |  float: left; |
+| **float-xl-right** |  float: right; |
+| **float-xl-start** |  float: start; |
+| **float-xl-end** |  float: end; |
+| **float-xl-none** |  float: none; { style="max-height: 420px;" fixed-header } |
+
+<VoPromotionsCardVuetify />
 
 ## Overview
 
@@ -34,31 +62,3 @@ Easily toggle a float with a class:
 Floats can also be applied on a per breakpoint (viewport) basis.
 
 <ExamplesExample file="float/responsive" />
-
-Here is a list of all the available support classes:
-
-- **.float-left**
-- **.float-right**
-- **.float-start**
-- **.float-end**
-- **.float-none**
-- **.float-sm-left**
-- **.float-sm-right**
-- **.float-sm-start**
-- **.float-sm-end**
-- **.float-sm-none**
-- **.float-md-left**
-- **.float-md-right**
-- **.float-md-start**
-- **.float-md-end**
-- **.float-md-none**
-- **.float-lg-left**
-- **.float-lg-right**
-- **.float-lg-start**
-- **.float-lg-end**
-- **.float-lg-none**
-- **.float-xl-left**
-- **.float-xl-right**
-- **.float-xl-start**
-- **.float-xl-end**
-- **.float-xl-none**

From 59738a04d0795be18d464144e32b3f439cb07ae2 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sun, 12 May 2024 21:54:59 -0500
Subject: [PATCH 042/122] docs(display): move all classes into entry table

---
 packages/docs/src/pages/en/styles/display.md | 76 ++++++++++++++++----
 1 file changed, 62 insertions(+), 14 deletions(-)

diff --git a/packages/docs/src/pages/en/styles/display.md b/packages/docs/src/pages/en/styles/display.md
index 37e4029f541..47f92cd7ad4 100644
--- a/packages/docs/src/pages/en/styles/display.md
+++ b/packages/docs/src/pages/en/styles/display.md
@@ -15,7 +15,67 @@ The display helpers allow you to control the display of content. This includes b
 
 <PageFeatures />
 
-<PromotedEntry />
+| Class | Properties |
+| - | - |
+| **d-none** | display: none; |
+| **d-sm-none** | display: none; |
+| **d-md-none** | display: none; |
+| **d-lg-none** | display: none; |
+| **d-xl-none** | display: none; |
+| **d-xxl-none** | display: none; |
+| **d-sm-flex** | display: flex; |
+| **d-md-flex** | display: flex; |
+| **d-lg-flex** | display: flex; |
+| **d-xl-flex** | display: flex; |
+| **d-xxl-flex** | display: flex; |
+| **d-sm-inline** | display: inline; |
+| **d-md-inline** | display: inline; |
+| **d-lg-inline** | display: inline; |
+| **d-xl-inline** | display: inline; |
+| **d-xxl-inline** | display: inline; |
+| **d-sm-inline-block** | display: inline-block; |
+| **d-md-inline-block** | display: inline-block; |
+| **d-lg-inline-block** | display: inline-block; |
+| **d-xl-inline-block** | display: inline-block; |
+| **d-xxl-inline-block** | display: inline-block; |
+| **d-sm-table** | display: table; |
+| **d-md-table** | display: table; |
+| **d-lg-table** | display: table; |
+| **d-xl-table** | display: table; |
+| **d-xxl-table** | display: table; |
+| **d-sm-table-cell** | display: table-cell; |
+| **d-md-table-cell** | display: table-cell; |
+| **d-lg-table-cell** | display: table-cell; |
+| **d-xl-table-cell** | display: table-cell; |
+| **d-xxl-table-cell** | display: table-cell; |
+| **d-sm-table-row** | display: table-row; |
+| **d-md-table-row** | display: table-row; |
+| **d-lg-table-row** | display: table-row; |
+| **d-xl-table-row** | display: table-row; |
+| **d-xxl-table-row** | display: table-row; |
+| **d-sm-flex** | display: flex; |
+| **d-md-flex** | display: flex; |
+| **d-lg-flex** | display: flex; |
+| **d-xl-flex** | display: flex; |
+| **d-xxl-flex** | display: flex; |
+| **d-sm-inline-flex** | display: inline-flex; |
+| **d-md-inline-flex** | display: inline-flex; |
+| **d-lg-inline-flex** | display: inline-flex; |
+| **d-xl-inline-flex** | display: inline-flex; |
+| **d-xxl-inline-flex** | display: inline-flex; |
+| **d-print-none** | display: none; |
+| **d-print-inline** | display: inline; |
+| **d-print-inline-block** | display: inline-block; |
+| **d-print-block** | display: block; |
+| **d-print-table** | display: table; |
+| **d-print-table-cell** | display: table-cell; |
+| **d-print-table-row** | display: table-row; |
+| **d-print-flex** | display: flex; |
+| **d-print-inline-flex** | display: inline-flex; |
+| **d-sr-only** | display: none; |
+| **d-sr-only-focusable** | display: none; { style="max-height: 420px;" fixed-header } |
+
+<VoPromotionsCardVuetify />
 
 <FeaturesBreakpointsTable />
 
@@ -87,19 +147,7 @@ It is important to note that using any of the display classes above will result
 
 ## Display in print
 
-You can also change the display property when printing.
-
-- `.d-print-none`
-- `.d-print-inline`
-- `.d-print-inline-block`
-- `.d-print-block`
-- `.d-print-table`
-- `.d-print-table-row`
-- `.d-print-table-cell`
-- `.d-print-flex`
-- `.d-print-inline-flex`
-
-Print utility classes can also be combined with none print display utilities.
+You can also change the display property when printing. Print utility classes can also be combined with none print display utilities.
 
 <ExamplesExample file="display/print" />
 

From e36f7bcb40b960109542f0d31fec59c289dd5c47 Mon Sep 17 00:00:00 2001
From: "Adrian D. Alvarez" <06b@users.noreply.github.com>
Date: Mon, 13 May 2024 13:09:08 -0400
Subject: [PATCH 043/122] fix(VSwitch): render in forced-colors mode (#19703)

fixes #19702
---
 .../src/components/VSwitch/VSwitch.sass       | 55 +++++++++++++++++++
 .../src/components/VSwitch/VSwitch.tsx        |  7 ++-
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass
index 45b3b22055b..c9f8a7bb0bc 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.sass
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass
@@ -134,3 +134,58 @@
 
       .v-selection-control__wrapper
         transform: $switch-thumb-vertical-transform
+        
+@media (forced-colors: active)
+  .v-switch
+    .v-switch__loader
+      .v-progress-circular 
+        color: currentColor
+
+    .v-switch__thumb
+      background-color: buttontext
+
+    .v-switch__track,
+    .v-switch__thumb
+      border: 1px solid 
+      color: buttontext
+
+    &:not(.v-switch--loading):not(.v-input--disabled)
+      .v-selection-control--dirty
+        .v-switch__thumb
+          background-color: highlight 
+
+    &:not(.v-input--disabled)
+      .v-selection-control--dirty
+        .v-switch__track
+          background-color: highlight
+
+        .v-switch__track,
+        .v-switch__thumb
+          color: highlight
+
+    &.v-switch--inset
+      .v-switch__track
+        border-width: 2px
+
+      &:not(.v-switch--loading):not(.v-input--disabled)
+        .v-selection-control--dirty
+          .v-switch__thumb
+            background-color: highlighttext
+            color: highlighttext
+
+    &.v-input--disabled
+      .v-switch__thumb
+        background-color: graytext
+
+      .v-switch__track,
+      .v-switch__thumb
+        color: graytext
+
+    &.v-switch--loading
+      .v-switch__thumb
+        background-color: canvas
+
+      &.v-switch--inset,
+      &.v-switch--indeterminate
+        .v-switch__thumb
+          border-width: 0 
diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
index 5e72e86a3b4..ec2abafda44 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.tsx
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
@@ -16,7 +16,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, ref } from 'vue'
-import { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from '@/util'
+import { filterInputAttrs, genericComponent, getUid, IN_BROWSER, propsFactory, useRender } from '@/util'
 
 // Types
 import type { ComputedRef, Ref } from 'vue'
@@ -79,6 +79,7 @@ export const VSwitch = genericComponent<new <T>(
     const { loaderClasses } = useLoader(props)
     const { isFocused, focus, blur } = useFocus(props)
     const control = ref<VSelectionControl>()
+    const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches
 
     const loaderColor = computed(() => {
       return typeof props.loading === 'string' && props.loading !== ''
@@ -158,7 +159,7 @@ export const VSwitch = genericComponent<new <T>(
                       <div
                         class={[
                           'v-switch__track',
-                          ...backgroundColorClasses.value,
+                          !isForcedColorsModeActive ? backgroundColorClasses.value : undefined,
                         ]}
                         style={ backgroundColorStyles.value }
                         onClick={ onTrackClick }
@@ -183,7 +184,7 @@ export const VSwitch = genericComponent<new <T>(
                           class={[
                             'v-switch__thumb',
                             { 'v-switch__thumb--filled': icon || props.loading },
-                            props.inset ? undefined : backgroundColorClasses.value,
+                            props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value,
                           ]}
                           style={ props.inset ? undefined : backgroundColorStyles.value }
                         >

From 19ddcef6cfcfbd62e86730e4d43926d5ca7b1f1d Mon Sep 17 00:00:00 2001
From: Curt Grimes <github@curtgrimes.com>
Date: Mon, 13 May 2024 12:10:52 -0500
Subject: [PATCH 044/122] fix(VMenu): allow enter keypress to work in textareas
 (#19768)

fixes #19767
---
 packages/vuetify/src/components/VMenu/VMenu.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
index 7ac262c0b47..02fcdad31a7 100644
--- a/packages/vuetify/src/components/VMenu/VMenu.tsx
+++ b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -126,6 +126,7 @@ export const VMenu = genericComponent<OverlaySlots>()({
       if (props.disabled) return
 
       if (e.key === 'Tab' || (e.key === 'Enter' && !props.closeOnContentClick)) {
+        if (e.key === 'Enter' && e.target instanceof HTMLTextAreaElement) return
         if (e.key === 'Enter') e.preventDefault()
 
         const nextElement = getNextElement(

From 74158a884e6b819f2f86b71556e8f110c4129f67 Mon Sep 17 00:00:00 2001
From: vlacko0930 <34010558+vlacko0930@users.noreply.github.com>
Date: Mon, 13 May 2024 19:56:46 +0200
Subject: [PATCH 045/122] fix(locale): update hu translation (#19738)

---
 packages/vuetify/src/locale/hu.ts | 36 +++++++++++++++----------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/vuetify/src/locale/hu.ts b/packages/vuetify/src/locale/hu.ts
index 707e2faa4e2..d23db5b5e15 100644
--- a/packages/vuetify/src/locale/hu.ts
+++ b/packages/vuetify/src/locale/hu.ts
@@ -1,11 +1,11 @@
 export default {
   badge: 'Jelvény',
-  open: 'Open',
+  open: 'Megnyit',
   close: 'Bezárás',
-  dismiss: 'Dismiss',
+  dismiss: 'Elutasít',
   confirmEdit: {
     ok: 'OK',
-    cancel: 'Cancel',
+    cancel: 'Mégsem',
   },
   dataIterator: {
     noResultsText: 'Nincs egyező találat',
@@ -36,15 +36,15 @@ export default {
     divider: 'to',
   },
   datePicker: {
-    itemsSelected: '{0} selected',
+    itemsSelected: '{0} kiválasztva',
     range: {
-      title: 'Select dates',
-      header: 'Enter dates',
+      title: 'Válassza ki a dátumokat',
+      header: 'Adja meg a dátumokat',
     },
-    title: 'Select date',
-    header: 'Enter date',
+    title: 'Válassza ki a dátumot',
+    header: 'Adja meg a dátumot',
     input: {
-      placeholder: 'Enter date',
+      placeholder: 'Adja meg a dátumot',
     },
   },
   noDataText: 'Nincs elérhető adat',
@@ -57,7 +57,7 @@ export default {
   },
   calendar: {
     moreEvents: '{0} további',
-    today: 'Today',
+    today: 'Ma',
   },
   input: {
     clear: 'Clear {0}',
@@ -72,7 +72,7 @@ export default {
   timePicker: {
     am: 'de',
     pm: 'du',
-    title: 'Select Time',
+    title: 'Válassza ki az időpontot',
   },
   pagination: {
     ariaLabel: {
@@ -81,22 +81,22 @@ export default {
       previous: 'Előző oldal',
       page: 'Menj a(z) {0}. oldalra',
       currentPage: 'Aktuális oldal: {0}',
-      first: 'First page',
-      last: 'Last page',
+      first: 'Első oldal',
+      last: 'Utolsó oldal',
     },
   },
   stepper: {
-    next: 'Next',
-    prev: 'Previous',
+    next: 'Következő',
+    prev: 'Előző',
   },
   rating: {
     ariaLabel: {
       item: 'Rating {0} of {1}',
     },
   },
-  loading: 'Loading...',
+  loading: 'Betöltés...',
   infiniteScroll: {
-    loadMore: 'Load more',
-    empty: 'No more',
+    loadMore: 'Továbbiak',
+    empty: 'Nincsen több',
   },
 }

From 49892e2a45ebb82c3b3827df1f49e142f76b7e02 Mon Sep 17 00:00:00 2001
From: "Marc .N" <marc.newton@esprofiler.com>
Date: Tue, 14 May 2024 15:38:55 +0100
Subject: [PATCH 046/122] fix(VTreeview): scoped loading state by child
 (#19773)

fixes #19390
---
 .../src/labs/VTreeview/VTreeviewChildren.tsx  | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
index a9bfd2c6ca6..85bf5e3c4d1 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -41,19 +41,22 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
   props: makeVTreeviewChildrenProps(),
 
   setup (props, { emit, slots }) {
-    const isLoading = shallowRef(false)
-    const hasLoaded = shallowRef(false)
+    const isLoading = shallowRef(null)
 
-    function checkChildren (item: unknown) {
+    function checkChildren (item: any) {
       return new Promise<void>(resolve => {
-        if (!props.items?.length || !props.loadChildren || hasLoaded.value) return resolve()
+        if (!props.items?.length || !props.loadChildren) return resolve()
 
-        isLoading.value = true
-        props.loadChildren(item).then(resolve)
-      }).then(() => {
-        hasLoaded.value = true
+        if (item?.children?.length === 0) {
+          isLoading.value = item.value
+          props.loadChildren(item).then(resolve)
+
+          return
+        }
+
+        resolve()
       }).finally(() => {
-        isLoading.value = false
+        isLoading.value = null
       })
     }
 
@@ -64,6 +67,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
     }
 
     return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, raw: item }) => {
+      const loading = isLoading.value === item.value
       const slotsWithItem = {
         prepend: slots.prepend
           ? slotProps => slots.prepend?.({ ...slotProps, item })
@@ -73,7 +77,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
                 key={ item.value }
                 tabindex="-1"
                 modelValue={ isSelected }
-                loading={ isLoading.value }
+                loading={ loading }
                 indeterminate={ isIndeterminate }
                 onClick={ (e: MouseEvent) => onClick(e, item) }
               />
@@ -96,7 +100,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
               <VTreeviewItem
                 { ...itemProps }
                 { ...activatorProps }
-                loading={ isLoading.value }
+                loading={ loading }
                 v-slots={ slotsWithItem }
                 onClick={ (e: MouseEvent | KeyboardEvent) => onClick(e, item) }
               />

From 2553fe66f4cdf52f0d874bfc2622ca3667329e21 Mon Sep 17 00:00:00 2001
From: rainu <rainu@raysha.de>
Date: Tue, 14 May 2024 16:39:52 +0200
Subject: [PATCH 047/122] fix(locale): update German locale translations
 (#19805)

---
 packages/vuetify/src/locale/de.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vuetify/src/locale/de.ts b/packages/vuetify/src/locale/de.ts
index 7d1dacd2701..9b350fc1222 100644
--- a/packages/vuetify/src/locale/de.ts
+++ b/packages/vuetify/src/locale/de.ts
@@ -2,7 +2,7 @@ export default {
   badge: 'Abzeichen',
   open: 'Öffnen',
   close: 'Schließen',
-  dismiss: 'Dismiss',
+  dismiss: 'Verwerfen',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Abbrechen',
@@ -36,7 +36,7 @@ export default {
     divider: 'bis',
   },
   datePicker: {
-    itemsSelected: '{0} selected',
+    itemsSelected: '{0} ausgewählt',
     range: {
       title: 'Daten auswählen',
       header: 'Daten eingeben',
@@ -57,7 +57,7 @@ export default {
   },
   calendar: {
     moreEvents: '{0} mehr',
-    today: 'Today',
+    today: 'Heute',
   },
   input: {
     clear: '{0} leeren',
@@ -72,7 +72,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
-    title: 'Select Time',
+    title: 'Uhrzeit auswählen',
   },
   pagination: {
     ariaLabel: {

From aa79f1644df811809631612665ee4de89843d571 Mon Sep 17 00:00:00 2001
From: Zhaolin Liang <develop0304@outlook.com>
Date: Tue, 14 May 2024 22:47:34 +0800
Subject: [PATCH 048/122] fix(VSelect): hide-selected with return-object
 (#19807)

fixes #19806
---
 .../src/components/VSelect/VSelect.tsx        |  2 +-
 .../VSelect/__tests__/VSelect.spec.cy.tsx     | 38 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index 449ad3fed2f..ef7ce95d8b9 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -176,7 +176,7 @@ export const VSelect = genericComponent<new <
 
     const displayItems = computed(() => {
       if (props.hideSelected) {
-        return items.value.filter(item => !model.value.some(s => s === item))
+        return items.value.filter(item => !model.value.some(s => props.valueComparator(s, item)))
       }
       return items.value
     })
diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
index b438127a98a..fd60cd9c537 100644
--- a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
+++ b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
@@ -460,6 +460,44 @@ describe('VSelect', () => {
       cy.get('.v-overlay__content .v-list-item .v-list-item-title').eq(0).should('have.text', 'Item 3')
       cy.get('.v-overlay__content .v-list-item .v-list-item-title').eq(1).should('have.text', 'Item 4')
     })
+
+    // https://github.com/vuetifyjs/vuetify/issues/19806
+    it('should hide selected item(s) with return-object', () => {
+      const selectedItem = ref({ text: 'Item 1', id: 'item1' })
+      const items = ref([
+        {
+          text: 'Item 1',
+          id: 'item1',
+        },
+        {
+          text: 'Item 2',
+          id: 'item2',
+        },
+        {
+          text: 'Item 3',
+          id: 'item3',
+        },
+      ])
+      cy.mount((props: any) => (
+          <VSelect
+            v-model={ selectedItem.value }
+            hideSelected
+            items={ items.value }
+            item-title="text"
+            item-value="id"
+            returnObject
+          />
+      )).get('.v-select').click()
+        .get('.v-list-item--active').should('have.length', 0)
+        .get('.v-overlay__content .v-list-item').should('have.length', 2)
+        .get('.v-overlay__content .v-list-item .v-list-item-title').eq(0).should('have.text', 'Item 2')
+        .get('.v-overlay__content .v-list-item').eq(0).click({ waitForAnimations: false }).should(() => {
+          expect(selectedItem.value).to.deep.equal({ text: 'Item 2', id: 'item2' })
+        })
+        .get('.v-list-item--active').should('have.length', 0)
+        .get('.v-overlay__content .v-list-item').should('have.length', 2)
+        .get('.v-overlay__content .v-list-item .v-list-item-title').eq(0).should('have.text', 'Item 1')
+    })
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/16055

From b674239d174ed88eb0640d5ca9f5366bdd1efdd4 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 14 May 2024 10:25:14 -0500
Subject: [PATCH 049/122] fix(VSlideGroup): assign mobile default of null

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

diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
index dee0b516718..d0f809b3bcc 100644
--- a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
+++ b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
@@ -78,7 +78,7 @@ export const makeVSlideGroupProps = propsFactory({
   },
 
   ...makeComponentProps(),
-  ...makeDisplayProps(),
+  ...makeDisplayProps({ mobile: null }),
   ...makeTagProps(),
   ...makeGroupProps({
     selectedClass: 'v-slide-group-item--active',

From aad15b7bdab269cf440a82d08d719f55595c2bbb Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 14 May 2024 10:29:41 -0500
Subject: [PATCH 050/122] fix(VBanner): assign mobile default of null

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

diff --git a/packages/vuetify/src/components/VBanner/VBanner.tsx b/packages/vuetify/src/components/VBanner/VBanner.tsx
index 25f3fe1b6d8..6f0404ea6fd 100644
--- a/packages/vuetify/src/components/VBanner/VBanner.tsx
+++ b/packages/vuetify/src/components/VBanner/VBanner.tsx
@@ -51,7 +51,7 @@ export const makeVBannerProps = propsFactory({
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeDimensionProps(),
-  ...makeDisplayProps(),
+  ...makeDisplayProps({ mobile: null }),
   ...makeElevationProps(),
   ...makeLocationProps(),
   ...makePositionProps(),

From aada67ac448ddd71fc013391773c2cecc8b6189d Mon Sep 17 00:00:00 2001
From: noahbare <50649628+noahbare@users.noreply.github.com>
Date: Tue, 14 May 2024 10:50:16 -0500
Subject: [PATCH 051/122] fix(VOverlay): don't closeParents if persistent is
 set (#19782)

fixes #19780

Co-authored-by: nbare <nbare@colsa.com>
---
 packages/vuetify/src/components/VMenu/VMenu.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
index 02fcdad31a7..50fa611bbf6 100644
--- a/packages/vuetify/src/components/VMenu/VMenu.tsx
+++ b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -77,6 +77,7 @@ export const VMenu = genericComponent<OverlaySlots>()({
       closeParents (e) {
         setTimeout(() => {
           if (!openChildren.value &&
+            !props.persistent &&
             (e == null || (e && !isClickInsideElement(e, overlay.value!.contentEl!)))
           ) {
             isActive.value = false

From 7bb69ff1de2547e0e0405e1c9705b9c4b6fe4723 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 14 May 2024 11:03:45 -0500
Subject: [PATCH 052/122] chore(release): publish v3.6.6

---
 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 75f37791928..40ffe7b020d 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.6.5",
+  "version": "3.6.6",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index fbaba5a6f08..6f13e7f5054 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.6.5",
+  "version": "3.6.6",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^22.0.0",
     "tsx": "^4.7.2",
     "vue": "^3.4.27",
-    "vuetify": "^3.6.5"
+    "vuetify": "^3.6.6"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 44634b1e106..26dae75ad03 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.6.5",
+  "version": "3.6.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.11.0",
     "vue-instantsearch": "^4.16.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.6.5"
+    "vuetify": "^3.6.6"
   },
   "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.27",
-    "@vuetify/api-generator": "^3.6.5",
+    "@vuetify/api-generator": "^3.6.6",
     "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 2be48354daa..cf40e25acbd 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.6.5",
+  "version": "3.6.6",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From d6b292f9b2df6d0a5eda76583176d51d835323f8 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 14 May 2024 21:14:43 -0500
Subject: [PATCH 053/122] fix(VDivider): don't wrap content

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

diff --git a/packages/vuetify/src/components/VDivider/VDivider.sass b/packages/vuetify/src/components/VDivider/VDivider.sass
index 164745f849b..e74bc95eea9 100644
--- a/packages/vuetify/src/components/VDivider/VDivider.sass
+++ b/packages/vuetify/src/components/VDivider/VDivider.sass
@@ -35,6 +35,7 @@
 
   .v-divider__content
     padding: $divider-content-padding
+    text-wrap: nowrap
 
     .v-divider__wrapper--vertical &
       padding: $divider-content-vertical-padding

From 488f594df946ed114c0b3b4b681950d72c679c71 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 15 May 2024 21:52:16 -0500
Subject: [PATCH 054/122] docs(blueprints): add alert regarding utility classes

---
 packages/docs/src/pages/en/features/blueprints.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/docs/src/pages/en/features/blueprints.md b/packages/docs/src/pages/en/features/blueprints.md
index edddf1f8ab6..e4049ac95c5 100644
--- a/packages/docs/src/pages/en/features/blueprints.md
+++ b/packages/docs/src/pages/en/features/blueprints.md
@@ -42,6 +42,12 @@ While Vuetify is built under the guise of Google's [Material Design](https://mat
 | [Material Design 2](#material-design-2) | 2017 | ✅ Available | [Specification](https://m2.material.io) |
 | [Material Design 3](#material-design-3) | 2022 | ✅ Available | [Specification](https://m3.material.io) |
 
+::: error
+
+Blueprints require the use of utility classes to properly function.
+
+:::
+
 ### Material Design 1
 
 Released in 2014, the original Material Design specification aimed to create a visual language that combined principles and good design with technical and scientific innovation.

From fad615b1b28f72a19b846daf3c7d8bfdfd5382a1 Mon Sep 17 00:00:00 2001
From: Koya Aoyama <koya1616.0622@gmail.com>
Date: Thu, 16 May 2024 12:02:23 +0900
Subject: [PATCH 055/122] docs: fix v-icon component link (#19789)

---
 packages/docs/src/pages/en/components/avatars.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/en/components/avatars.md b/packages/docs/src/pages/en/components/avatars.md
index 569638bd63e..60a41608999 100644
--- a/packages/docs/src/pages/en/components/avatars.md
+++ b/packages/docs/src/pages/en/components/avatars.md
@@ -41,7 +41,7 @@ Avatars in their simplest form display content within a circular container.
 
 The recommended placement of elements inside of `v-avatar` is:
 
-* Place a [v-img](/components/images/) or [v-icon](/components/images/) component within the default *slot*
+* Place a [v-img](/components/images/) or [v-icon](/components/icons/) component within the default *slot*
 * Place textual content within the default *slot*
 
 ![Avatar Anatomy](https://cdn.vuetifyjs.com/docs/images/components-temp/v-avatar/v-avatar-anatomy.png)

From 9d6d7be57b544a52b492fa7fd6ba92f1650fbd78 Mon Sep 17 00:00:00 2001
From: Oskar Bechtold <bechtold@users.noreply.github.com>
Date: Thu, 16 May 2024 05:04:57 +0200
Subject: [PATCH 056/122] docs(checkboxes.md): update v-simple-checkbox
 description. (#19646)

---
 packages/docs/src/pages/en/components/checkboxes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/en/components/checkboxes.md b/packages/docs/src/pages/en/components/checkboxes.md
index 744d1a29c29..0f7a3048b35 100644
--- a/packages/docs/src/pages/en/components/checkboxes.md
+++ b/packages/docs/src/pages/en/components/checkboxes.md
@@ -31,7 +31,7 @@ A `v-checkbox` in its simplest form provides a toggle between 2 values.
 
 ::: tip
 
-A simpler version, `v-simple-checkbox` is used primarily as a lightweight alternative in data-table components to select rows or display inline boolean data.
+A simpler version, [`v-checkbox-btn`](/components/data-tables/basics/#simple-checkbox) is used primarily as a lightweight alternative in data-table components to select rows or display inline boolean data.
 
 :::
 

From 8d597320f463d7e365ddf7f7eaf3fab149d4b0a0 Mon Sep 17 00:00:00 2001
From: MajesticPotatoe <amajesticpotatoe@gmail.com>
Date: Wed, 15 May 2024 23:19:10 -0400
Subject: [PATCH 057/122] docs: update lab introduction page

---
 packages/docs/src/pages/en/labs/introduction.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/docs/src/pages/en/labs/introduction.md b/packages/docs/src/pages/en/labs/introduction.md
index e7fd1afd69c..19a3f7b38cb 100644
--- a/packages/docs/src/pages/en/labs/introduction.md
+++ b/packages/docs/src/pages/en/labs/introduction.md
@@ -78,8 +78,10 @@ The following is a list of available and up-and-coming components for use with L
 | - | - | - |
 | [v-calendar](/components/calendars/) | A calendar component | [v3.4.9](/getting-started/release-notes/?version=v3.4.9) |
 | [v-date-input](/components/date-inputs/) | A date input component | [v3.6.0](/getting-started/release-notes/?version=v3.6.0) |
+| [v-pull-to-refresh](/components/pull-to-refresh/) | A component to update content by screen swipes | [v3.6.0](/getting-started/release-notes/?version=v3.6.0) |
 | [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-stepper-vertical](/components/vertical-steppers/) | Vertical version of v-stepper | [v3.6.5](/getting-started/release-notes/?version=v3.6.5) |
 | [v-time-picker](/components/time-pickers/) | A time-picker component | [v3.5.12](/getting-started/release-notes/?version=v3.5.12) |
 | [v-treeview](/components/treeview/) | A treeview component | [v3.5.9](/getting-started/release-notes/?version=v3.5.9) |
 

From 33636128a3360a27b5e6cc533d92c3fac60b2aa1 Mon Sep 17 00:00:00 2001
From: MajesticPotatoe <amajesticpotatoe@gmail.com>
Date: Wed, 15 May 2024 23:19:33 -0400
Subject: [PATCH 058/122] docs: fix vertical steppers release version

---
 packages/docs/src/pages/en/components/vertical-steppers.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/en/components/vertical-steppers.md b/packages/docs/src/pages/en/components/vertical-steppers.md
index f7852a3c159..39d5aa4d5b1 100644
--- a/packages/docs/src/pages/en/components/vertical-steppers.md
+++ b/packages/docs/src/pages/en/components/vertical-steppers.md
@@ -21,7 +21,7 @@ The `v-stepper-vertical` component can be used as a navigation element that guid
 
 ::: warning
 
-This feature requires [v3.5.14](/getting-started/release-notes/?version=v3.5.14)
+This feature requires [v3.6.5](/getting-started/release-notes/?version=v3.6.5)
 
 :::
 

From 97ef8b34b7dbdf5fbbee65fc74be2b7078013e09 Mon Sep 17 00:00:00 2001
From: Eugene Owak <13153526+geneowak@users.noreply.github.com>
Date: Thu, 16 May 2024 15:27:25 +0300
Subject: [PATCH 059/122] docs: update tables reference to labs (#19824)

---
 packages/docs/src/pages/en/components/tables.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/en/components/tables.md b/packages/docs/src/pages/en/components/tables.md
index b126d64c9f7..f760e48d50b 100644
--- a/packages/docs/src/pages/en/components/tables.md
+++ b/packages/docs/src/pages/en/components/tables.md
@@ -20,7 +20,7 @@ features:
 The simpler of the table components is `v-table`, a basic wrapper component for the HTML `<table>` element. In addition, regular table elements such as `<thead>`, `<tbody>`, `<tr>`, and `<td>` work by default.
 
 ::: info
-More advanced tables such as [v-data-table](/components/data-tables/basics/) are available for preview in [Vuetify Labs](/labs/introduction/).
+More advanced tables such as [v-data-table](/components/data-tables/basics/) are available.
 :::
 
 <!-- ![Table Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-table/v-table-entry.png) -->

From 8ed87310890e2b6c8ad2a626a02c17f9467cbb60 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 17 May 2024 00:18:03 +1000
Subject: [PATCH 060/122] feat(VConfirmEdit): expose save, cancel, isPristine

closes #19747
---
 .../src/components/VConfirmEdit/VConfirmEdit.tsx     | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx b/packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx
index c6fcff537c9..6250146aaed 100644
--- a/packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx
+++ b/packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx
@@ -16,6 +16,9 @@ import type { GenericProps } from '@/util'
 export type VConfirmEditSlots<T> = {
   default: {
     model: Ref<T>
+    save: () => void
+    cancel: () => void
+    isPristine: boolean
     get actions (): VNode
   }
 }
@@ -100,6 +103,9 @@ export const VConfirmEdit = genericComponent<new <T> (
           {
             slots.default?.({
               model: internalModel,
+              save,
+              cancel,
+              isPristine: isPristine.value,
               get actions () {
                 actionsUsed = true
                 return actions
@@ -111,6 +117,12 @@ export const VConfirmEdit = genericComponent<new <T> (
         </>
       )
     })
+
+    return {
+      save,
+      cancel,
+      isPristine,
+    }
   },
 })
 

From 665c616254e5a5727482c4f5d894d1e958675edb Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 16 May 2024 18:57:04 -0500
Subject: [PATCH 061/122] fix(VBtn): remove negative prepend/append margin with
 slim prop

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

diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass
index 2004eff8169..8ed3b7b0f7f 100644
--- a/packages/vuetify/src/components/VBtn/VBtn.sass
+++ b/packages/vuetify/src/components/VBtn/VBtn.sass
@@ -193,10 +193,16 @@
     grid-area: prepend
     margin-inline: $button-margin-start $button-margin-end
 
+    .v-btn--slim &
+      margin-inline-start: 0
+
   .v-btn__append
     grid-area: append
     margin-inline: $button-margin-end $button-margin-start
 
+    .v-btn--slim &
+      margin-inline-end: 0
+
   .v-btn__content
     grid-area: content
     justify-content: center

From 88badc63f228dfe22bda14f57e0a94180dd20655 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 20 May 2024 14:30:21 -0500
Subject: [PATCH 062/122] fix(VField): avoid cascaded overlay multiplier from
 parent components

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

diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass
index a7a952d5eeb..051542e5bdb 100644
--- a/packages/vuetify/src/components/VField/VField.sass
+++ b/packages/vuetify/src/components/VField/VField.sass
@@ -8,6 +8,8 @@
 @include tools.layer('components')
   /* region INPUT */
   .v-field
+    --v-theme-overlay-multiplier: 1
+
     display: grid
     grid-template-areas: "prepend-inner field clear append-inner"
     grid-template-columns: min-content minmax(0, 1fr) min-content min-content

From c209d0952862540c5c503e46c5114c6cefb2e243 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 21 May 2024 21:57:07 +1000
Subject: [PATCH 063/122] fix(layout): find children inside suspense boundary

fixes #19830
---
 packages/vuetify/src/util/helpers.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
index cfff79aa004..e9efebb2037 100644
--- a/packages/vuetify/src/util/helpers.ts
+++ b/packages/vuetify/src/util/helpers.ts
@@ -540,6 +540,8 @@ export function findChildrenWithProvide (
 
   if (Array.isArray(vnode)) {
     return vnode.map(child => findChildrenWithProvide(key, child)).flat(1)
+  } else if (vnode.suspense) {
+    return findChildrenWithProvide(key, vnode.ssContent!)
   } else if (Array.isArray(vnode.children)) {
     return vnode.children.map(child => findChildrenWithProvide(key, child)).flat(1)
   } else if (vnode.component) {

From ea567bbe0fd09641e8fc68762cca8aaa3e4aeef2 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Tue, 21 May 2024 14:08:53 +0200
Subject: [PATCH 064/122] fix(VDivider): visiblity in container with dynamic
 height (#19828)

fixes #19827
---
 packages/vuetify/src/components/VDivider/VDivider.sass | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VDivider/VDivider.sass b/packages/vuetify/src/components/VDivider/VDivider.sass
index e74bc95eea9..66fdbc2b36d 100644
--- a/packages/vuetify/src/components/VDivider/VDivider.sass
+++ b/packages/vuetify/src/components/VDivider/VDivider.sass
@@ -16,7 +16,7 @@
       align-self: stretch
       border-width: $divider-vertical-border-width
       display: inline-flex
-      height: 100%
+      height: auto
       margin-left: $divider-vertical-margin-left
       max-height: 100%
       max-width: 0px

From 905eb633d8550a96e01f5a399c8252bb62776b7c Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Tue, 21 May 2024 19:11:53 +0700
Subject: [PATCH 065/122] fix(VCalendar): use date adapter to create new date
 (#19823)

fixes #19814
---
 packages/vuetify/src/labs/VCalendar/VCalendar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/labs/VCalendar/VCalendar.tsx b/packages/vuetify/src/labs/VCalendar/VCalendar.tsx
index 782c04ead72..d28f37919d6 100644
--- a/packages/vuetify/src/labs/VCalendar/VCalendar.tsx
+++ b/packages/vuetify/src/labs/VCalendar/VCalendar.tsx
@@ -71,7 +71,7 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
     }
 
     function onClickToday () {
-      model.value = [new Date()]
+      model.value = [adapter.date()]
     }
 
     const title = computed(() => {
@@ -149,7 +149,7 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
                       !props.hideWeekNumber ? <div class="v-calendar-month__weeknumber">{ weekNumbers.value[wi] }</div> : '',
                       week.map(day => (
                         <VCalendarMonthDay
-                          color={ adapter.isSameDay(new Date(), day.date) ? 'primary' : undefined }
+                          color={ adapter.isSameDay(adapter.date(), day.date) ? 'primary' : undefined }
                           day={ day }
                           title={ day ? adapter.format(day.date, 'dayOfMonth') : 'NaN' }
                           events={ props.events?.filter(e => adapter.isSameDay(day.date, e.start) || adapter.isSameDay(day.date, e.end)) }

From 934228846a83468657429250f53e6601a4f9c4ad Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Tue, 21 May 2024 05:15:20 -0700
Subject: [PATCH 066/122] fix(defaults): allow null component and global values
 (#19842)

fixes #19783
---
 packages/vuetify/src/composables/defaults.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/composables/defaults.ts b/packages/vuetify/src/composables/defaults.ts
index 5f211f56870..701c61824b9 100644
--- a/packages/vuetify/src/composables/defaults.ts
+++ b/packages/vuetify/src/composables/defaults.ts
@@ -106,7 +106,9 @@ export function internalUseDefaults (
       if (prop === 'class' || prop === 'style') {
         return [componentDefaults.value?.[prop], propValue].filter(v => v != null)
       } else if (typeof prop === 'string' && !propIsDefined(vm.vnode, prop)) {
-        return componentDefaults.value?.[prop] ?? defaults.value?.global?.[prop] ?? propValue
+        return componentDefaults.value?.[prop] !== undefined ? componentDefaults.value?.[prop]
+          : defaults.value?.global?.[prop] !== undefined ? defaults.value?.global?.[prop]
+          : propValue
       }
       return propValue
     },

From 4a2de375b84851fe5cdf26d4f391f5028d0a2854 Mon Sep 17 00:00:00 2001
From: Andrew Henry <AMajesticPotatoe@gmail.com>
Date: Tue, 21 May 2024 08:18:47 -0400
Subject: [PATCH 067/122] fix(VDataTable): add missing disable-sort prop
 (#19820)

resolves #19197
---
 .../api-generator/src/locale/en/VDataTableHeader.json    | 1 -
 .../api-generator/src/locale/en/VDataTableHeaders.json   | 1 +
 .../api-generator/src/locale/en/VDataTableServer.json    | 1 +
 .../api-generator/src/locale/en/VDataTableVirtual.json   | 1 +
 .../src/components/VDataTable/VDataTableHeaders.tsx      | 7 ++++---
 .../src/components/VDataTable/composables/sort.ts        | 9 ++++++---
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VDataTableHeader.json b/packages/api-generator/src/locale/en/VDataTableHeader.json
index 5f4ddba267f..9ac97c72528 100644
--- a/packages/api-generator/src/locale/en/VDataTableHeader.json
+++ b/packages/api-generator/src/locale/en/VDataTableHeader.json
@@ -1,6 +1,5 @@
 {
   "props": {
-    "disableSort": "Toggles rendering of sort button.",
     "everyItem": "Indicates if all items in table are selected.",
     "headers": "Array of header items to display.",
     "mobile": "Renders mobile view of headers.",
diff --git a/packages/api-generator/src/locale/en/VDataTableHeaders.json b/packages/api-generator/src/locale/en/VDataTableHeaders.json
index 9670a86c82e..d00ed1ab290 100644
--- a/packages/api-generator/src/locale/en/VDataTableHeaders.json
+++ b/packages/api-generator/src/locale/en/VDataTableHeaders.json
@@ -1,5 +1,6 @@
 {
   "props": {
+    "disableSort": "Toggles rendering of sort button.",
     "sortAscIcon": "Icon used for ascending sort button.",
     "sortDescIcon": "Icon used for descending sort button.",
     "sticky": "Sticks the header to the top of the table."
diff --git a/packages/api-generator/src/locale/en/VDataTableServer.json b/packages/api-generator/src/locale/en/VDataTableServer.json
index ce305f63a7b..56c3edfed52 100644
--- a/packages/api-generator/src/locale/en/VDataTableServer.json
+++ b/packages/api-generator/src/locale/en/VDataTableServer.json
@@ -12,6 +12,7 @@
     "column.data-table-select": "Slot to replace the default `v-simple-checkbox` used when selecting rows.",
     "dataTableGroup": "Slot for custom rendering of a group.",
     "data-table-select": "Slot for custom rendering of a header cell with the select checkbox.",
+    "disableSort": "Disables sorting completely.",
     "expanded-row": "Slot for custom rendering of an expanded row.",
     "footer.prepend": "Adds content to the empty space in the footer.",
     "group-header": "Slot for custom rendering of a group header.",
diff --git a/packages/api-generator/src/locale/en/VDataTableVirtual.json b/packages/api-generator/src/locale/en/VDataTableVirtual.json
index 7428773c59f..56058592aa3 100644
--- a/packages/api-generator/src/locale/en/VDataTableVirtual.json
+++ b/packages/api-generator/src/locale/en/VDataTableVirtual.json
@@ -9,6 +9,7 @@
     "column.data-table-select": "Slot to replace the default `v-simple-checkbox` used when selecting rows.",
     "data-table-group": "Slot for custom rendering of a group.",
     "data-table-select": "Slot for custom rendering of a header cell with the select checkbox.",
+    "disableSort": "Disables sorting completely.",
     "expanded-row": "Slot for custom rendering of an expanded row.",
     "group-header": "Slot for custom rendering of a group header.",
     "headers": "Slot to replace the default rendering of the `<thead>` element.",
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
index d075842d788..0702a348976 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -60,6 +60,7 @@ export type VDataTableHeadersSlots = {
 export const makeVDataTableHeadersProps = propsFactory({
   color: String,
   sticky: Boolean,
+  disableSort: Boolean,
   multiSort: Boolean,
   sortAscIcon: {
     type: IconValue,
@@ -142,7 +143,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
           align={ column.align }
           class={[
             {
-              'v-data-table__th--sortable': column.sortable,
+              'v-data-table__th--sortable': column.sortable && !props.disableSort,
               'v-data-table__th--sorted': isSorted(column),
               'v-data-table__th--fixed': column.fixed,
             },
@@ -192,7 +193,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
               return (
                 <div class="v-data-table-header__content">
                   <span>{ column.title }</span>
-                  { column.sortable && (
+                  { column.sortable && !props.disableSort && (
                     <VIcon
                       key="icon"
                       class="v-data-table-header__sort-icon"
@@ -223,7 +224,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
       const headerProps = mergeProps(props.headerProps ?? {} ?? {})
 
       const displayItems = computed<ItemProps['items']>(() => {
-        return columns.value.filter(column => column?.sortable)
+        return columns.value.filter(column => column?.sortable && !props.disableSort)
       })
 
       const appendIcon = computed(() => {
diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts
index 7c1b80e225c..0c9beba1c2f 100644
--- a/packages/vuetify/src/components/VDataTable/composables/sort.ts
+++ b/packages/vuetify/src/components/VDataTable/composables/sort.ts
@@ -95,8 +95,11 @@ export function useSort () {
 }
 
 // TODO: abstract into project composable
-export function useSortedItems <T extends InternalItem> (
-  props: { customKeySort: Record<string, DataTableCompareFunction> | undefined },
+export function useSortedItems<T extends InternalItem> (
+  props: {
+    customKeySort: Record<string, DataTableCompareFunction> | undefined
+    disableSort?: Boolean
+  },
   items: Ref<T[]>,
   sortBy: Ref<readonly SortItem[]>,
   options?: {
@@ -107,7 +110,7 @@ export function useSortedItems <T extends InternalItem> (
 ) {
   const locale = useLocale()
   const sortedItems = computed(() => {
-    if (!sortBy.value.length) return items.value
+    if (!sortBy.value.length || props.disableSort) return items.value
 
     return sortItems(items.value, sortBy.value, locale.current.value, {
       transform: options?.transform,

From 17a056162267fb56e4f8f96e98c287253e95b904 Mon Sep 17 00:00:00 2001
From: Nisay <ydehfuli@gmail.com>
Date: Tue, 21 May 2024 15:49:39 +0330
Subject: [PATCH 068/122] fix(locale): update missing persian translations
 (#19812)

---
 packages/vuetify/src/locale/fa.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/vuetify/src/locale/fa.ts b/packages/vuetify/src/locale/fa.ts
index e1efd668b60..d80255e4351 100644
--- a/packages/vuetify/src/locale/fa.ts
+++ b/packages/vuetify/src/locale/fa.ts
@@ -1,10 +1,10 @@
 export default {
   badge: 'نشان',
-  open: 'Open',
+  open: 'باز کردن',
   close: 'بستن',
-  dismiss: 'Dismiss',
+  dismiss: 'رد کردن',
   confirmEdit: {
-    ok: 'OK',
+    ok: 'تایید',
     cancel: 'لغو',
   },
   dataIterator: {
@@ -33,10 +33,10 @@ export default {
     pageText: '{0} تا {1} از {2}',
   },
   dateRangeInput: {
-    divider: 'to',
+    divider: 'تا',
   },
   datePicker: {
-    itemsSelected: '{0} selected',
+    itemsSelected: '{0} انتخاب‌شده',
     range: {
       title: 'انتخاب تاریخ‌ها',
       header: 'تاریخ‌ها را وارد کنید',
@@ -57,13 +57,13 @@ export default {
   },
   calendar: {
     moreEvents: '{بیشتر {0',
-    today: 'Today',
+    today: 'امروز',
   },
   input: {
-    clear: 'Clear {0}',
+    clear: 'پاکسازی {0}',
     prependAction: '{0} prepended action',
     appendAction: '{0} appended action',
-    otp: 'Please enter OTP character {0}',
+    otp: 'لطفا کد را وارد کنید {0}',
   },
   fileInput: {
     counter: '{0} پرونده',
@@ -72,7 +72,7 @@ export default {
   timePicker: {
     am: 'قبل از ظهر',
     pm: 'بعد از ظهر',
-    title: 'Select Time',
+    title: 'انتخاب زمان',
   },
   pagination: {
     ariaLabel: {
@@ -91,7 +91,7 @@ export default {
   },
   rating: {
     ariaLabel: {
-      item: 'Rating {0} of {1}',
+      item: 'امتیاز {0} از {1}',
     },
   },
   loading: 'در حال بارگذاری...',

From 4b387b5ceb3baa35a604526c55dab3510167254b Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 21 May 2024 22:26:16 +1000
Subject: [PATCH 069/122] fix(VAutocomplete/VCombobox): prevent focus on menu
 icon

---
 packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx | 1 +
 packages/vuetify/src/components/VCombobox/VCombobox.tsx         | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 8e2cc9ac41c..6491ece4401 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -638,6 +638,7 @@ export const VAutocomplete = genericComponent<new <
                     onClick={ noop }
                     aria-label={ t(label.value) }
                     title={ t(label.value) }
+                    tabindex="-1"
                   />
                 ) : undefined }
               </>
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index 205450b5305..cd3225f795e 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -684,6 +684,7 @@ export const VCombobox = genericComponent<new <
                     onClick={ noop }
                     aria-label={ t(label.value) }
                     title={ t(label.value) }
+                    tabindex="-1"
                   />
                 ) : undefined }
               </>

From 5703a6c8a0b95a7a0567576ac3d0f0d980a0079e Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Tue, 21 May 2024 22:29:53 +1000
Subject: [PATCH 070/122] fix(VAutocomplete/VCombobox): remove tab key listener
 (#19846)

fixes #19840
---
 .../vuetify/src/components/VAutocomplete/VAutocomplete.tsx    | 2 +-
 packages/vuetify/src/components/VCombobox/VCombobox.tsx       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 6491ece4401..b111a890618 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -238,7 +238,7 @@ export const VAutocomplete = genericComponent<new <
         menu.value = false
       }
 
-      if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
+      if (highlightFirst.value && e.key === 'Enter') {
         select(displayItems.value[0])
       }
 
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index cd3225f795e..cff4ae00550 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -290,8 +290,8 @@ export const VCombobox = genericComponent<new <
         menu.value = false
       }
 
-      if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
-        if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
+      if (['Enter', 'Escape'].includes(e.key)) {
+        if (highlightFirst.value && e.key === 'Enter') {
           select(filteredItems.value[0])
         }
 

From feeb4672c4c25661c68afeccaa998be06b09e45d Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Tue, 21 May 2024 22:33:08 +1000
Subject: [PATCH 071/122] fix(VList): pass return-object to nested
 VListChildren (#19848)

---
 packages/vuetify/src/components/VList/VListChildren.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VList/VListChildren.tsx b/packages/vuetify/src/components/VList/VListChildren.tsx
index 4edf9b9e4b0..9f817579f14 100644
--- a/packages/vuetify/src/components/VList/VListChildren.tsx
+++ b/packages/vuetify/src/components/VList/VListChildren.tsx
@@ -85,7 +85,11 @@ export const VListChildren = genericComponent<new <T extends InternalListItem>(
                 )
             },
             default: () => (
-              <VListChildren items={ children } v-slots={ slots } />
+              <VListChildren
+                items={ children }
+                returnObject={ props.returnObject }
+                v-slots={ slots }
+              />
             ),
           }}
         </VListGroup>

From 67ab46cdb97a1b8a1e0171c98ed83785e2c59708 Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Tue, 21 May 2024 19:38:49 +0700
Subject: [PATCH 072/122] fix(VDatePicker): disable months outside min/max
 value (#19822)

fixes #19810
---
 .../src/components/VDatePicker/VDatePicker.tsx   |  1 +
 .../components/VDatePicker/VDatePickerMonths.tsx | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
index e66f3b555bc..55c2e0c5b72 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
@@ -320,6 +320,7 @@ export const VDatePicker = genericComponent<new <
                       onUpdate:modelValue={ onUpdateMonth }
                       min={ minDate.value }
                       max={ maxDate.value }
+                      year={ year.value }
                     />
                   ) : viewMode.value === 'year' ? (
                     <VDatePickerYears
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx
index 1883a31f254..a412e75f446 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx
@@ -13,6 +13,8 @@ import { computed, watchEffect } from 'vue'
 import { convertToUnit, createRange, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
+import type { PropType } from 'vue'
+
 export type VDatePickerMonthsSlots = {
   month: {
     month: {
@@ -29,7 +31,10 @@ export type VDatePickerMonthsSlots = {
 export const makeVDatePickerMonthsProps = propsFactory({
   color: String,
   height: [String, Number],
+  min: null as any as PropType<unknown>,
+  max: null as any as PropType<unknown>,
   modelValue: Number,
+  year: Number,
 }, 'VDatePickerMonths')
 
 export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
@@ -47,12 +52,20 @@ export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
 
     const months = computed(() => {
       let date = adapter.startOfYear(adapter.date())
-
+      if (props.year) {
+        date = adapter.setYear(date, props.year)
+      }
       return createRange(12).map(i => {
         const text = adapter.format(date, 'monthShort')
+        const isDisabled =
+          !!(
+            (props.min && adapter.isAfter(adapter.startOfMonth(adapter.date(props.min)), date)) ||
+            (props.max && adapter.isAfter(date, adapter.startOfMonth(adapter.date(props.max))))
+          )
         date = adapter.getNextMonth(date)
 
         return {
+          isDisabled,
           text,
           value: i,
         }
@@ -75,6 +88,7 @@ export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
             const btnProps = {
               active: model.value === i,
               color: model.value === i ? props.color : undefined,
+              disabled: month.isDisabled,
               rounded: true,
               text: month.text,
               variant: model.value === month.value ? 'flat' : 'text',

From f016954313ba919e187754cbe6fa29ea324b1245 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Tue, 21 May 2024 05:46:18 -0700
Subject: [PATCH 073/122] fix(VDataTable): fit mobile row height to content
 (#19843)

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

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass
index 2f619910dfe..8789632346d 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTable.sass
+++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass
@@ -70,6 +70,10 @@
                   .v-data-table-header__sort-icon
                     opacity: 0.5
 
+            &.v-data-table__tr--mobile
+              > td
+                height: fit-content
+
   .v-data-table-column--fixed,
   .v-data-table__th--sticky
     background: $table-background

From 2f8ee0fa1c61d0b6342f014f7e931f27cd3116ad Mon Sep 17 00:00:00 2001
From: Andrew Henry <AMajesticPotatoe@gmail.com>
Date: Tue, 21 May 2024 10:55:02 -0400
Subject: [PATCH 074/122] fix(VDataTable): add ability to hide default body
 (#19844)

resolves #18854
---
 .../src/locale/en/VDataTable.json             |  1 +
 .../src/components/VDataTable/VDataTable.tsx  | 27 ++++---
 .../VDataTable/VDataTableServer.tsx           | 26 ++++---
 .../VDataTable/VDataTableVirtual.tsx          | 78 ++++++++++---------
 4 files changed, 70 insertions(+), 62 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json
index df73bcca2a8..278520e2fe9 100644
--- a/packages/api-generator/src/locale/en/VDataTable.json
+++ b/packages/api-generator/src/locale/en/VDataTable.json
@@ -18,6 +18,7 @@
     "headers": "An array of objects that each describe a header column. See the example below for a definition of all properties.",
     "headersLength": "Can be used in combination with `hide-default-header` to specify the number of columns in the table to allow expansion rows and loading bar to function properly.",
     "height": "Set an explicit height of table.",
+    "hideDefaultBody": "Hides the default body.",
     "hideDefaultHeader": "Hides the default header.",
     "hideDefaultFooter": "Hides the default footer. This has no effect on `v-data-table-virtual`.",
     "hover": "Adds a hover effects to a table rows.",
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
index 36ff04e6f59..830538b1acb 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -73,6 +73,7 @@ export type VDataTableSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots
 export const makeDataTableProps = propsFactory({
   ...makeVDataTableRowsProps(),
 
+  hideDefaultBody: Boolean,
   hideDefaultFooter: Boolean,
   hideDefaultHeader: Boolean,
   width: [String, Number],
@@ -251,18 +252,20 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
                   </thead>
                 )}
                 { slots.thead?.(slotProps.value) }
-                <tbody>
-                  { slots['body.prepend']?.(slotProps.value) }
-                  { slots.body ? slots.body(slotProps.value) : (
-                    <VDataTableRows
-                      { ...attrs }
-                      { ...dataTableRowsProps }
-                      items={ paginatedItems.value }
-                      v-slots={ slots }
-                    />
-                  )}
-                  { slots['body.append']?.(slotProps.value) }
-                </tbody>
+                { !props.hideDefaultBody && (
+                  <tbody>
+                    { slots['body.prepend']?.(slotProps.value) }
+                    { slots.body ? slots.body(slotProps.value) : (
+                      <VDataTableRows
+                        { ...attrs }
+                        { ...dataTableRowsProps }
+                        items={ paginatedItems.value }
+                        v-slots={ slots }
+                      />
+                    )}
+                    { slots['body.append']?.(slotProps.value) }
+                  </tbody>
+                )}
                 { slots.tbody?.(slotProps.value) }
                 { slots.tfoot?.(slotProps.value) }
               </>
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
index 72e3496f213..f3e9c5293aa 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
@@ -175,18 +175,20 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
                   </thead>
                 )}
                 { slots.thead?.(slotProps.value) }
-                <tbody class="v-data-table__tbody" role="rowgroup">
-                  { slots['body.prepend']?.(slotProps.value) }
-                  { slots.body ? slots.body(slotProps.value) : (
-                    <VDataTableRows
-                      { ...attrs }
-                      { ...dataTableRowsProps }
-                      items={ flatItems.value }
-                      v-slots={ slots }
-                    />
-                  )}
-                  { slots['body.append']?.(slotProps.value) }
-                </tbody>
+                { !props.hideDefaultBody && (
+                  <tbody class="v-data-table__tbody" role="rowgroup">
+                    { slots['body.prepend']?.(slotProps.value) }
+                    { slots.body ? slots.body(slotProps.value) : (
+                      <VDataTableRows
+                        { ...attrs }
+                        { ...dataTableRowsProps }
+                        items={ flatItems.value }
+                        v-slots={ slots }
+                      />
+                    )}
+                    { slots['body.append']?.(slotProps.value) }
+                  </tbody>
+                )}
                 { slots.tbody?.(slotProps.value) }
                 { slots.tfoot?.(slotProps.value) }
               </>
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
index ee4364ccf21..a4af3896992 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
@@ -212,48 +212,50 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
                       />
                     </thead>
                   )}
-                  <tbody>
-                    <tr ref={ markerRef } style={{ height: convertToUnit(paddingTop.value), border: 0 }}>
-                      <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>
-                    </tr>
+                  { !props.hideDefaultBody && (
+                    <tbody>
+                      <tr ref={ markerRef } style={{ height: convertToUnit(paddingTop.value), border: 0 }}>
+                        <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>
+                      </tr>
 
-                    { slots['body.prepend']?.(slotProps.value) }
+                      { slots['body.prepend']?.(slotProps.value) }
 
-                    <VDataTableRows
-                      { ...attrs }
-                      { ...dataTableRowsProps }
-                      items={ displayItems.value }
-                    >
-                      {{
-                        ...slots,
-                        item: itemSlotProps => (
-                          <VVirtualScrollItem
-                            key={ itemSlotProps.internalItem.index }
-                            renderless
-                            onUpdate:height={ height => handleItemResize(itemSlotProps.internalItem.index, height) }
-                          >
-                            { ({ itemRef }) => (
-                              slots.item?.({ ...itemSlotProps, itemRef }) ?? (
-                                <VDataTableRow
-                                  { ...itemSlotProps.props }
-                                  ref={ itemRef }
-                                  key={ itemSlotProps.internalItem.index }
-                                  index={ itemSlotProps.internalItem.index }
-                                  v-slots={ slots }
-                                />
-                              )
-                            )}
-                          </VVirtualScrollItem>
-                        ),
-                      }}
-                    </VDataTableRows>
+                      <VDataTableRows
+                        { ...attrs }
+                        { ...dataTableRowsProps }
+                        items={ displayItems.value }
+                      >
+                        {{
+                          ...slots,
+                          item: itemSlotProps => (
+                            <VVirtualScrollItem
+                              key={ itemSlotProps.internalItem.index }
+                              renderless
+                              onUpdate:height={ height => handleItemResize(itemSlotProps.internalItem.index, height) }
+                            >
+                              { ({ itemRef }) => (
+                                slots.item?.({ ...itemSlotProps, itemRef }) ?? (
+                                  <VDataTableRow
+                                    { ...itemSlotProps.props }
+                                    ref={ itemRef }
+                                    key={ itemSlotProps.internalItem.index }
+                                    index={ itemSlotProps.internalItem.index }
+                                    v-slots={ slots }
+                                  />
+                                )
+                              )}
+                            </VVirtualScrollItem>
+                          ),
+                        }}
+                      </VDataTableRows>
 
-                    { slots['body.append']?.(slotProps.value) }
+                      { slots['body.append']?.(slotProps.value) }
 
-                    <tr style={{ height: convertToUnit(paddingBottom.value), border: 0 }}>
-                      <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>
-                    </tr>
-                  </tbody>
+                      <tr style={{ height: convertToUnit(paddingBottom.value), border: 0 }}>
+                        <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>
+                      </tr>
+                    </tbody>
+                  )}
                 </table>
               </div>
             ),

From 7d955d270922b596cb8deb4c9152b0e85644888a Mon Sep 17 00:00:00 2001
From: NassBin <nassimdaikh71@gmail.com>
Date: Tue, 21 May 2024 17:42:09 +0200
Subject: [PATCH 075/122] fix(VMenu): min width property (#19771)

fixes #16987

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../vuetify/src/composables/dimensions.ts     | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/vuetify/src/composables/dimensions.ts b/packages/vuetify/src/composables/dimensions.ts
index 566fb562c44..f8bf672eb6c 100644
--- a/packages/vuetify/src/composables/dimensions.ts
+++ b/packages/vuetify/src/composables/dimensions.ts
@@ -23,14 +23,25 @@ export const makeDimensionProps = propsFactory({
 }, 'dimension')
 
 export function useDimension (props: DimensionProps) {
-  const dimensionStyles = computed(() => ({
-    height: convertToUnit(props.height),
-    maxHeight: convertToUnit(props.maxHeight),
-    maxWidth: convertToUnit(props.maxWidth),
-    minHeight: convertToUnit(props.minHeight),
-    minWidth: convertToUnit(props.minWidth),
-    width: convertToUnit(props.width),
-  }))
+  const dimensionStyles = computed(() => {
+    const styles: Record<string, any> = {}
+
+    const height = convertToUnit(props.height)
+    const maxHeight = convertToUnit(props.maxHeight)
+    const maxWidth = convertToUnit(props.maxWidth)
+    const minHeight = convertToUnit(props.minHeight)
+    const minWidth = convertToUnit(props.minWidth)
+    const width = convertToUnit(props.width)
+
+    if (height != null) styles.height = height
+    if (maxHeight != null) styles.maxHeight = maxHeight
+    if (maxWidth != null) styles.maxWidth = maxWidth
+    if (minHeight != null) styles.minHeight = minHeight
+    if (minWidth != null) styles.minWidth = minWidth
+    if (width != null) styles.width = width
+
+    return styles
+  })
 
   return { dimensionStyles }
 }

From 801e6162b5fb6470f0c9e2268d11c8b9a246ec0b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 21 May 2024 10:55:12 -0500
Subject: [PATCH 076/122] chore(release): publish v3.6.7

---
 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 40ffe7b020d..6c50ec910f4 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.6.6",
+  "version": "3.6.7",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index 6f13e7f5054..0f64a76a318 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.6.6",
+  "version": "3.6.7",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^22.0.0",
     "tsx": "^4.7.2",
     "vue": "^3.4.27",
-    "vuetify": "^3.6.6"
+    "vuetify": "^3.6.7"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 26dae75ad03..2187ce7aca5 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.6.6",
+  "version": "3.6.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.11.0",
     "vue-instantsearch": "^4.16.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.6.6"
+    "vuetify": "^3.6.7"
   },
   "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.27",
-    "@vuetify/api-generator": "^3.6.6",
+    "@vuetify/api-generator": "^3.6.7",
     "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 cf40e25acbd..755f5e0646d 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.6.6",
+  "version": "3.6.7",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From 828459d4d513fdb1273c571aa0473a6c33a684a2 Mon Sep 17 00:00:00 2001
From: Andrew Henry <AMajesticPotatoe@gmail.com>
Date: Wed, 22 May 2024 16:49:14 -0400
Subject: [PATCH 077/122] docs(v-tooltip-directive): fix options api example

fixes #19860
---
 .../src/examples/v-tooltip-directive/object-literals.vue    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/examples/v-tooltip-directive/object-literals.vue b/packages/docs/src/examples/v-tooltip-directive/object-literals.vue
index 00075b8682f..d990da4ed31 100644
--- a/packages/docs/src/examples/v-tooltip-directive/object-literals.vue
+++ b/packages/docs/src/examples/v-tooltip-directive/object-literals.vue
@@ -14,8 +14,10 @@
 <script>
   export default {
     data: () => ({
-      text: 'Tooltip',
-      scrollStrategy: 'block',
+      tooltip: {
+        text: 'Tooltip',
+        scrollStrategy: 'block',
+      },
     }),
   }
 </script>

From 963f85377bdb8df4b82f2a96ce6a26abafb683db Mon Sep 17 00:00:00 2001
From: MajesticPotatoe <amajesticpotatoe@gmail.com>
Date: Wed, 22 May 2024 22:28:00 -0400
Subject: [PATCH 078/122] docs: update simple-checkbox to checkbox-btn

---
 packages/api-generator/src/locale/en/VDataTable.json        | 4 ++--
 packages/api-generator/src/locale/en/VDataTableServer.json  | 2 +-
 packages/api-generator/src/locale/en/VDataTableVirtual.json | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json
index 278520e2fe9..c75a6072ae0 100644
--- a/packages/api-generator/src/locale/en/VDataTable.json
+++ b/packages/api-generator/src/locale/en/VDataTable.json
@@ -54,9 +54,9 @@
     "group.summary": "Slot to customize the default rendering of group summaries.",
     "heading": "Slot to add a custom header.",
     "header.<name>": "Slot to customize a specific header column.",
-    "header.data-table-select": "Slot to replace the default `v-simple-checkbox` in header.",
+    "header.data-table-select": "Slot to replace the default `v-checkbox-btn` in header.",
     "item": "Slot to replace the default rendering of a row.",
-    "item.data-table-select": "Slot to replace the default `v-simple-checkbox` used when selecting rows.",
+    "item.data-table-select": "Slot to replace the default `v-checkbox-btn` used when selecting rows.",
     "item.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.",
     "item.<name>": "Slot to customize a specific column.",
     "loading": "Defines content for when `loading` is true and no items are provided.",
diff --git a/packages/api-generator/src/locale/en/VDataTableServer.json b/packages/api-generator/src/locale/en/VDataTableServer.json
index 56c3edfed52..c4c85b60cf3 100644
--- a/packages/api-generator/src/locale/en/VDataTableServer.json
+++ b/packages/api-generator/src/locale/en/VDataTableServer.json
@@ -9,7 +9,7 @@
     "bottom": "Slot to add content below the table.",
     "colgroup": "Slot to replace the default rendering of the `<colgroup>` element.",
     "column.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.",
-    "column.data-table-select": "Slot to replace the default `v-simple-checkbox` used when selecting rows.",
+    "column.data-table-select": "Slot to replace the default `v-checkbox-btn` used when selecting rows.",
     "dataTableGroup": "Slot for custom rendering of a group.",
     "data-table-select": "Slot for custom rendering of a header cell with the select checkbox.",
     "disableSort": "Disables sorting completely.",
diff --git a/packages/api-generator/src/locale/en/VDataTableVirtual.json b/packages/api-generator/src/locale/en/VDataTableVirtual.json
index 56058592aa3..e24b810ffb4 100644
--- a/packages/api-generator/src/locale/en/VDataTableVirtual.json
+++ b/packages/api-generator/src/locale/en/VDataTableVirtual.json
@@ -6,7 +6,7 @@
     "bottom": "Slot to add content below the table.",
     "colgroup": "Slot to replace the default rendering of the `<colgroup>` element.",
     "column.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.",
-    "column.data-table-select": "Slot to replace the default `v-simple-checkbox` used when selecting rows.",
+    "column.data-table-select": "Slot to replace the default `v-checkbox-btn` used when selecting rows.",
     "data-table-group": "Slot for custom rendering of a group.",
     "data-table-select": "Slot for custom rendering of a header cell with the select checkbox.",
     "disableSort": "Disables sorting completely.",

From 407585db6d4edc3dd476a21c0f8b309e1451a409 Mon Sep 17 00:00:00 2001
From: MajesticPotatoe <amajesticpotatoe@gmail.com>
Date: Wed, 22 May 2024 22:30:11 -0400
Subject: [PATCH 079/122] docs: add data-table-select example

---
 .../slot-item-data-table-select.vue           | 200 ++++++++++++++++++
 .../data-tables/data-and-display.md           |   6 +
 2 files changed, 206 insertions(+)
 create mode 100644 packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue

diff --git a/packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue b/packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue
new file mode 100644
index 00000000000..f4dd178256b
--- /dev/null
+++ b/packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue
@@ -0,0 +1,200 @@
+<template>
+  <v-data-table
+    :items="desserts"
+    item-value="name"
+    show-select
+  >
+    <template v-slot:header.data-table-select="{ allSelected, selectAll, someSelected }">
+      <v-checkbox-btn
+        :indeterminate="someSelected && !allSelected"
+        :model-value="allSelected"
+        color="primary"
+        @update:model-value="selectAll(!allSelected)"
+      ></v-checkbox-btn>
+    </template>
+
+    <template v-slot:item.data-table-select="{ internalItem, isSelected, toggleSelect }">
+      <v-checkbox-btn
+        :model-value="isSelected(internalItem)"
+        color="primary"
+        @update:model-value="toggleSelect(internalItem)"
+      ></v-checkbox-btn>
+    </template>
+  </v-data-table>
+</template>
+
+<script setup>
+  const desserts = [
+    {
+      name: 'Frozen Yogurt',
+      calories: 159,
+      fat: 6,
+      carbs: 24,
+      protein: 4,
+      iron: 1,
+    },
+    {
+      name: 'Ice cream sandwich',
+      calories: 237,
+      fat: 9,
+      carbs: 37,
+      protein: 4.3,
+      iron: 1,
+    },
+    {
+      name: 'Eclair',
+      calories: 262,
+      fat: 16,
+      carbs: 23,
+      protein: 6,
+      iron: 7,
+    },
+    {
+      name: 'Cupcake',
+      calories: 305,
+      fat: 3.7,
+      carbs: 67,
+      protein: 4.3,
+      iron: 8,
+    },
+    {
+      name: 'Gingerbread',
+      calories: 356,
+      fat: 16,
+      carbs: 49,
+      protein: 3.9,
+      iron: 16,
+    },
+    {
+      name: 'Jelly bean',
+      calories: 375,
+      fat: 0,
+      carbs: 94,
+      protein: 0,
+      iron: 0,
+    },
+    {
+      name: 'Lollipop',
+      calories: 392,
+      fat: 0.2,
+      carbs: 98,
+      protein: 0,
+      iron: 2,
+    },
+    {
+      name: 'Honeycomb',
+      calories: 408,
+      fat: 3.2,
+      carbs: 87,
+      protein: 6.5,
+      iron: 45,
+    },
+    {
+      name: 'Donut',
+      calories: 452,
+      fat: 25,
+      carbs: 51,
+      protein: 4.9,
+      iron: 22,
+    },
+    {
+      name: 'KitKat',
+      calories: 518,
+      fat: 26,
+      carbs: 65,
+      protein: 7,
+      iron: 6,
+    },
+  ]
+</script>
+
+<script>
+  export default {
+    data () {
+      return {
+        desserts: [
+          {
+            name: 'Frozen Yogurt',
+            calories: 159,
+            fat: 6.0,
+            carbs: 24,
+            protein: 4.0,
+            iron: 1,
+          },
+          {
+            name: 'Ice cream sandwich',
+            calories: 237,
+            fat: 9.0,
+            carbs: 37,
+            protein: 4.3,
+            iron: 1,
+          },
+          {
+            name: 'Eclair',
+            calories: 262,
+            fat: 16.0,
+            carbs: 23,
+            protein: 6.0,
+            iron: 7,
+          },
+          {
+            name: 'Cupcake',
+            calories: 305,
+            fat: 3.7,
+            carbs: 67,
+            protein: 4.3,
+            iron: 8,
+          },
+          {
+            name: 'Gingerbread',
+            calories: 356,
+            fat: 16.0,
+            carbs: 49,
+            protein: 3.9,
+            iron: 16,
+          },
+          {
+            name: 'Jelly bean',
+            calories: 375,
+            fat: 0.0,
+            carbs: 94,
+            protein: 0.0,
+            iron: 0,
+          },
+          {
+            name: 'Lollipop',
+            calories: 392,
+            fat: 0.2,
+            carbs: 98,
+            protein: 0,
+            iron: 2,
+          },
+          {
+            name: 'Honeycomb',
+            calories: 408,
+            fat: 3.2,
+            carbs: 87,
+            protein: 6.5,
+            iron: 45,
+          },
+          {
+            name: 'Donut',
+            calories: 452,
+            fat: 25.0,
+            carbs: 51,
+            protein: 4.9,
+            iron: 22,
+          },
+          {
+            name: 'KitKat',
+            calories: 518,
+            fat: 26.0,
+            carbs: 65,
+            protein: 7,
+            iron: 6,
+          },
+        ],
+      }
+    },
+  }
+</script>
diff --git a/packages/docs/src/pages/en/components/data-tables/data-and-display.md b/packages/docs/src/pages/en/components/data-tables/data-and-display.md
index b76e817ea9e..4f024946ad1 100644
--- a/packages/docs/src/pages/en/components/data-tables/data-and-display.md
+++ b/packages/docs/src/pages/en/components/data-tables/data-and-display.md
@@ -80,6 +80,12 @@ Use the **item-selectable** prop to designate a property on your items that cont
 
 <ExamplesExample file="v-data-table/prop-item-selectable" />
 
+### Custom select column
+
+Use the **item.data-table-select** slot alongside `v-checkbox-btn` to customize the checkbox used for row selection. You can also use the **header.data-table-select** slot to customize the select-all checkbox in the header of the column.
+
+<ExamplesExample file="v-data-table/slot-item-data-table-select" />
+
 ### Select strategies
 
 Data-tables support three different select strategies.

From 957b4bc1cc8f870ba155e37be2dca6d5de4e588a Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 23 May 2024 20:51:21 +1000
Subject: [PATCH 080/122] fix: remove circular imports

fixes #19852
---
 .../src/components/VExpansionPanel/VExpansionPanel.tsx     | 2 +-
 .../src/components/VExpansionPanel/VExpansionPanelText.tsx | 2 +-
 .../components/VExpansionPanel/VExpansionPanelTitle.tsx    | 2 +-
 .../src/components/VExpansionPanel/VExpansionPanels.tsx    | 6 ++----
 packages/vuetify/src/components/VExpansionPanel/shared.ts  | 5 +++++
 packages/vuetify/src/components/VStepper/VStepper.tsx      | 6 ++----
 packages/vuetify/src/components/VStepper/VStepperItem.tsx  | 2 +-
 .../vuetify/src/components/VStepper/VStepperWindow.tsx     | 7 +------
 packages/vuetify/src/components/VStepper/shared.ts         | 5 +++++
 packages/vuetify/src/composables/defaults.ts               | 4 +++-
 .../src/labs/VStepperVertical/VStepperVerticalItem.tsx     | 3 +--
 packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx      | 2 +-
 12 files changed, 24 insertions(+), 22 deletions(-)
 create mode 100644 packages/vuetify/src/components/VExpansionPanel/shared.ts
 create mode 100644 packages/vuetify/src/components/VStepper/shared.ts

diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
index 4e913e6ffe5..881a6f6c0c4 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
@@ -1,5 +1,5 @@
 // Components
-import { VExpansionPanelSymbol } from './VExpansionPanels'
+import { VExpansionPanelSymbol } from './shared'
 import { makeVExpansionPanelTextProps, VExpansionPanelText } from './VExpansionPanelText'
 import { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from './VExpansionPanelTitle'
 
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelText.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelText.tsx
index cf9f1f4ceea..6c0211b4150 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelText.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelText.tsx
@@ -1,5 +1,5 @@
 // Components
-import { VExpansionPanelSymbol } from './VExpansionPanels'
+import { VExpansionPanelSymbol } from './shared'
 import { VExpandTransition } from '@/components/transitions'
 
 // Composables
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
index 50083b3850b..54cc401592c 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
@@ -1,5 +1,5 @@
 // Components
-import { VExpansionPanelSymbol } from './VExpansionPanels'
+import { VExpansionPanelSymbol } from './shared'
 import { VIcon } from '@/components/VIcon'
 
 // Composables
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
index f60ccb44420..ac5d7e6e9f5 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
@@ -2,6 +2,7 @@
 import './VExpansionPanel.sass'
 
 // Components
+import { VExpansionPanelSymbol } from './shared'
 import { makeVExpansionPanelProps } from './VExpansionPanel'
 
 // Composables
@@ -14,10 +15,7 @@ import { computed, toRef } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
-import type { InjectionKey, PropType } from 'vue'
-import type { GroupItemProvide } from '@/composables/group'
-
-export const VExpansionPanelSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-expansion-panel')
+import type { PropType } from 'vue'
 
 const allowedVariants = ['default', 'accordion', 'inset', 'popout'] as const
 
diff --git a/packages/vuetify/src/components/VExpansionPanel/shared.ts b/packages/vuetify/src/components/VExpansionPanel/shared.ts
new file mode 100644
index 00000000000..002b0a0379e
--- /dev/null
+++ b/packages/vuetify/src/components/VExpansionPanel/shared.ts
@@ -0,0 +1,5 @@
+// Types
+import type { InjectionKey } from 'vue'
+import type { GroupItemProvide } from '@/composables/group'
+
+export const VExpansionPanelSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-expansion-panel')
diff --git a/packages/vuetify/src/components/VStepper/VStepper.tsx b/packages/vuetify/src/components/VStepper/VStepper.tsx
index 1350134118c..c00678e8133 100644
--- a/packages/vuetify/src/components/VStepper/VStepper.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepper.tsx
@@ -2,6 +2,7 @@
 import './VStepper.sass'
 
 // Components
+import { VStepperSymbol } from './shared'
 import { makeVStepperActionsProps, VStepperActions } from './VStepperActions'
 import { VStepperHeader } from './VStepperHeader'
 import { VStepperItem } from './VStepperItem'
@@ -19,11 +20,8 @@ import { computed, toRefs } from 'vue'
 import { genericComponent, getPropertyFromItem, only, propsFactory, useRender } from '@/util'
 
 // Types
-import type { InjectionKey, PropType } from 'vue'
+import type { PropType } from 'vue'
 import type { StepperItem, StepperItemSlot } from './VStepperItem'
-import type { GroupItemProvide } from '@/composables/group'
-
-export const VStepperSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-stepper')
 
 export type VStepperSlot = {
   prev: () => void
diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
index 42766e6221a..7873532a86c 100644
--- a/packages/vuetify/src/components/VStepper/VStepperItem.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
@@ -14,7 +14,7 @@ import { Ripple } from '@/directives/ripple'
 
 // Utilities
 import { computed } from 'vue'
-import { VStepperSymbol } from './VStepper'
+import { VStepperSymbol } from './shared'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
diff --git a/packages/vuetify/src/components/VStepper/VStepperWindow.tsx b/packages/vuetify/src/components/VStepper/VStepperWindow.tsx
index b59f2da9023..146fec2fd28 100644
--- a/packages/vuetify/src/components/VStepper/VStepperWindow.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepperWindow.tsx
@@ -1,4 +1,5 @@
 // Components
+import { VStepperSymbol } from './shared'
 import { makeVWindowProps, VWindow } from '@/components/VWindow/VWindow'
 
 // Composables
@@ -8,12 +9,6 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { computed, inject } from 'vue'
 import { genericComponent, omit, propsFactory, useRender } from '@/util'
 
-// Types
-import type { InjectionKey } from 'vue'
-import type { GroupProvide } from '@/composables/group'
-
-export const VStepperSymbol: InjectionKey<GroupProvide> = Symbol.for('vuetify:v-stepper')
-
 export const makeVStepperWindowProps = propsFactory({
   ...omit(makeVWindowProps(), ['continuous', 'nextIcon', 'prevIcon', 'showArrows', 'touch', 'mandatory']),
 }, 'VStepperWindow')
diff --git a/packages/vuetify/src/components/VStepper/shared.ts b/packages/vuetify/src/components/VStepper/shared.ts
new file mode 100644
index 00000000000..0612889d89d
--- /dev/null
+++ b/packages/vuetify/src/components/VStepper/shared.ts
@@ -0,0 +1,5 @@
+// Types
+import type { InjectionKey } from 'vue'
+import type { GroupProvide } from '@/composables/group'
+
+export const VStepperSymbol: InjectionKey<GroupProvide> = Symbol.for('vuetify:v-stepper')
diff --git a/packages/vuetify/src/composables/defaults.ts b/packages/vuetify/src/composables/defaults.ts
index 701c61824b9..395354152b3 100644
--- a/packages/vuetify/src/composables/defaults.ts
+++ b/packages/vuetify/src/composables/defaults.ts
@@ -1,6 +1,8 @@
 // Utilities
 import { computed, inject, provide, ref, shallowRef, unref, watchEffect } from 'vue'
-import { getCurrentInstance, injectSelf, mergeDeep, toKebabCase } from '@/util'
+import { getCurrentInstance } from '@/util/getCurrentInstance'
+import { mergeDeep, toKebabCase } from '@/util/helpers'
+import { injectSelf } from '@/util/injectSelf'
 
 // Types
 import type { ComputedRef, InjectionKey, Ref, VNode } from 'vue'
diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
index fb2f13c0e7c..e2d719e06da 100644
--- a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
+++ b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
@@ -5,8 +5,7 @@ import './VStepperVerticalItem.sass'
 import { VStepperVerticalActions } from './VStepperVerticalActions'
 import { VAvatar } from '@/components/VAvatar/VAvatar'
 import { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'
-import { VExpansionPanel } from '@/components/VExpansionPanel'
-import { makeVExpansionPanelProps } from '@/components/VExpansionPanel/VExpansionPanel'
+import { makeVExpansionPanelProps, VExpansionPanel } from '@/components/VExpansionPanel/VExpansionPanel'
 import { VIcon } from '@/components/VIcon/VIcon'
 import { makeStepperItemProps } from '@/components/VStepper/VStepperItem'
 
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
index 738bc411533..6fae4204548 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -5,6 +5,7 @@ import './VTreeviewItem.sass'
 import { VBtn } from '@/components/VBtn'
 import { VListItemAction } from '@/components/VList'
 import { makeVListItemProps, VListItem } from '@/components/VList/VListItem'
+import { VProgressCircular } from '@/components/VProgressCircular'
 
 // Composables
 import { IconValue } from '@/composables/icons'
@@ -16,7 +17,6 @@ import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import { VTreeviewSymbol } from './shared'
-import { VProgressCircular } from '../allComponents'
 import type { VListItemSlots } from '@/components/VList/VListItem'
 
 export const makeVTreeviewItemProps = propsFactory({

From c3b2d29f8eb8bc0382ac3a792baa4724376da204 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 23 May 2024 12:45:06 -0500
Subject: [PATCH 081/122] chore(team.json): update team members

---
 packages/docs/src/data/team.json | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/docs/src/data/team.json b/packages/docs/src/data/team.json
index 69bdddd4f29..e3e9f304b8f 100644
--- a/packages/docs/src/data/team.json
+++ b/packages/docs/src/data/team.json
@@ -35,22 +35,6 @@
     "work": "COO @ Vuetify",
     "joined": "Nov 2019"
   },
-  "alexandriajackson": {
-    "avatar": "https://cdn.vuetifyjs.com/docs/images/team/alexandria.jpg",
-    "discord": "alexandriajackson_",
-    "focus": [
-      "[vuetifyjs/*](https://github.com/vuetifyjs)"
-    ],
-    "languages": [
-      "English"
-    ],
-    "location": "Dallas, TX, USA",
-    "name": "Alexandria Jackson",
-    "team": "company",
-    "twitter": "AlexxJackson96",
-    "work": "Marketing Coordinator @ Vuetify",
-    "joined": "Sept 2023"
-  },
   "KaelWD": {
     "discord": "kaelwd",
     "focus": [
@@ -267,5 +251,21 @@
     "name": "Yoones Khoshghadam",
     "team": "legends",
     "joined": "January 2023"
+  },
+  "alexandriajackson": {
+    "avatar": "https://cdn.vuetifyjs.com/docs/images/team/alexandria.jpg",
+    "discord": "alexandriajackson_",
+    "focus": [
+      "[vuetifyjs/*](https://github.com/vuetifyjs)"
+    ],
+    "languages": [
+      "English"
+    ],
+    "location": "Dallas, TX, USA",
+    "name": "Alexandria Jackson",
+    "team": "company",
+    "twitter": "AlexxJackson96",
+    "work": "Marketing Coordinator @ Vuetify",
+    "joined": "Sept 2023"
   }
 }

From e46a98db5be9ae899b7e31236b10de263fdd32e8 Mon Sep 17 00:00:00 2001
From: Tilen Pirih <33714934+tilenpirih@users.noreply.github.com>
Date: Fri, 24 May 2024 17:49:09 +0200
Subject: [PATCH 082/122] fix(VSlider): add missing aria-label (#19887)

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

diff --git a/packages/vuetify/src/components/VSlider/VSlider.tsx b/packages/vuetify/src/components/VSlider/VSlider.tsx
index c3e9d21d1ed..6afaf9b349e 100644
--- a/packages/vuetify/src/components/VSlider/VSlider.tsx
+++ b/packages/vuetify/src/components/VSlider/VSlider.tsx
@@ -168,6 +168,7 @@ export const VSlider = genericComponent<VSliderSlots>()({
                   onFocus={ focus }
                   onBlur={ blur }
                   ripple={ props.ripple }
+                  name={ props.name }
                 >
                   {{ 'thumb-label': slots['thumb-label'] }}
                 </VSliderThumb>
diff --git a/packages/vuetify/src/components/VSlider/VSliderThumb.tsx b/packages/vuetify/src/components/VSlider/VSliderThumb.tsx
index 1e8cce796df..5f48d3caca9 100644
--- a/packages/vuetify/src/components/VSlider/VSliderThumb.tsx
+++ b/packages/vuetify/src/components/VSlider/VSliderThumb.tsx
@@ -48,6 +48,7 @@ export const makeVSliderThumbProps = propsFactory({
     type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,
     default: true,
   },
+  name: String,
 
   ...makeComponentProps(),
 }, 'VSliderThumb')
@@ -152,6 +153,7 @@ export const VSliderThumb = genericComponent<VSliderThumbSlots>()({
           ]}
           role="slider"
           tabindex={ disabled.value ? -1 : 0 }
+          aria-label={ props.name }
           aria-valuemin={ props.min }
           aria-valuemax={ props.max }
           aria-valuenow={ props.modelValue }

From a23dece86fe666f15c74e304f65bbdd1ce13cefc Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 25 May 2024 11:28:46 -0500
Subject: [PATCH 083/122] fix(flex): add missing flex-x-x-0 classes

---
 packages/docs/src/pages/en/styles/flex.md     | 20 +++++++++++++++++++
 .../src/styles/settings/_utilities.scss       |  6 +++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/en/styles/flex.md b/packages/docs/src/pages/en/styles/flex.md
index e383a5bc5cf..eeb47ffb572 100644
--- a/packages/docs/src/pages/en/styles/flex.md
+++ b/packages/docs/src/pages/en/styles/flex.md
@@ -52,21 +52,41 @@ Control the layout of flex containers with alignment, justification and more wit
 | **flex-md-0-0** | flex: 0 0 auto; |
 | **flex-lg-0-0** | flex: 0 0 auto; |
 | **flex-xl-0-0** | flex: 0 0 auto; |
+| **flex-1-1-0** | flex: 1 1 0%; |
+| **flex-sm-1-1-0** | flex: 1 1 0%; |
+| **flex-md-1-1-0** | flex: 1 1 0%; |
+| **flex-lg-1-1-0** | flex: 1 1 0%; |
+| **flex-xl-1-1-0** | flex: 1 1 0%; |
 | **flex-1-1-100** | flex: 1 1 100%; |
 | **flex-sm-1-1-100** | flex: 1 1 100%; |
 | **flex-md-1-1-100** | flex: 1 1 100%; |
 | **flex-lg-1-1-100** | flex: 1 1 100%; |
 | **flex-xl-1-1-100** | flex: 1 1 100%; |
+| **flex-1-0-0** | flex: 1 0 0%; |
+| **flex-sm-1-0-0** | flex: 1 0 0%; |
+| **flex-md-1-0-0** | flex: 1 0 0%; |
+| **flex-lg-1-0-0** | flex: 1 0 0%; |
+| **flex-xl-1-0-0** | flex: 1 0 0%; |
 | **flex-1-0-100** | flex: 1 0 100%; |
 | **flex-sm-1-0-100** | flex: 1 0 100%; |
 | **flex-md-1-0-100** | flex: 1 0 100%; |
 | **flex-lg-1-0-100** | flex: 1 0 100%; |
 | **flex-xl-1-0-100** | flex: 1 0 100%; |
+| **flex-0-1-0** | flex: 0 1 0%; |
+| **flex-sm-0-1-0** | flex: 0 1 0%; |
+| **flex-md-0-1-0** | flex: 0 1 0%; |
+| **flex-lg-0-1-0** | flex: 0 1 0%; |
+| **flex-xl-0-1-0** | flex: 0 1 0%; |
 | **flex-0-1-100** | flex: 0 1 100%; |
 | **flex-sm-0-1-100** | flex: 0 1 100%; |
 | **flex-md-0-1-100** | flex: 0 1 100%; |
 | **flex-lg-0-1-100** | flex: 0 1 100%; |
 | **flex-xl-0-1-100** | flex: 0 1 100%; |
+| **flex-0-0-0** | flex: 0 0 0% |
+| **flex-sm-0-0-0** | flex: 0 0 0% |
+| **flex-md-0-0-0** | flex: 0 0 0% |
+| **flex-lg-0-0-0** | flex: 0 0 0% |
+| **flex-xl-0-0-0** | flex: 0 0 0% |
 | **flex-0-0-100** | flex: 0 0 100%; |
 | **flex-sm-0-0-100** | flex: 0 0 100%; |
 | **flex-md-0-0-100** | flex: 0 0 100%; |
diff --git a/packages/vuetify/src/styles/settings/_utilities.scss b/packages/vuetify/src/styles/settings/_utilities.scss
index 82a097a500e..dc4ce44386f 100644
--- a/packages/vuetify/src/styles/settings/_utilities.scss
+++ b/packages/vuetify/src/styles/settings/_utilities.scss
@@ -67,7 +67,11 @@ $utilities: () !default;
           '1-1-100': 1 1 100%,
           '1-0-100': 1 0 100%,
           '0-1-100': 0 1 100%,
-          '0-0-100': 0 0 100%
+          '0-0-100': 0 0 100%,
+          '1-1-0': 1 1 0,
+          '1-0-0': 1 0 0,
+          '0-1-0': 0 1 0,
+          '0-0-0': 0 0 0,
         )
       ),
       "flex-direction": (

From 2877f4f855fcc7b3bd0241a523a4284f3fb5b307 Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Mon, 27 May 2024 11:17:09 +0700
Subject: [PATCH 084/122] docs(VColorPicker): fix display eye dropper icon
 (#19902)

---
 packages/docs/src/plugins/icons.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docs/src/plugins/icons.ts b/packages/docs/src/plugins/icons.ts
index 10ede5a498f..5f50e64d639 100644
--- a/packages/docs/src/plugins/icons.ts
+++ b/packages/docs/src/plugins/icons.ts
@@ -150,6 +150,7 @@ export {
   mdiExport,
   mdiExportVariant,
   mdiEye,
+  mdiEyedropper,
   mdiEyeOff,
   mdiFacebook,
   mdiFastForward,

From 4ceaaa5bc060b32c4b4077174f26a6dc9f236d2f Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Tue, 28 May 2024 14:02:12 +0200
Subject: [PATCH 085/122] fix(VNumberInput): disable up/down controls for
 readonly state (#19906)

Co-authored-by: jsek <im68889094144@outlook.com>
Co-authored-by: Yuchao Wu <yuchao.sydneyuni@gmail.com>
---
 .../src/labs/VNumberInput/VNumberInput.tsx    |  10 ++
 .../__tests__/VNumberInput.spec.cy.tsx        | 104 ++++++++++++++++++
 2 files changed, 114 insertions(+)

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
index ca1924ed3f2..431b25997b6 100644
--- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -8,6 +8,7 @@ import { VDivider } from '../../components/VDivider'
 import { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextField'
 
 // Composables
+import { useForm } from '@/composables/form'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
@@ -71,16 +72,24 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
     const stepDecimals = computed(() => getDecimals(props.step))
     const modelDecimals = computed(() => model.value != null ? getDecimals(model.value) : 0)
 
+    const form = useForm()
+    const controlsDisabled = computed(() => (
+      props.disabled || props.readonly || form?.isReadonly.value
+    ))
+
     const canIncrease = computed(() => {
+      if (controlsDisabled.value) return false
       if (model.value == null) return true
       return model.value + props.step <= props.max
     })
     const canDecrease = computed(() => {
+      if (controlsDisabled.value) return false
       if (model.value == null) return true
       return model.value - props.step >= props.min
     })
 
     watchEffect(() => {
+      if (controlsDisabled.value) return
       if (model.value != null && (model.value < props.min || model.value > props.max)) {
         model.value = clamp(model.value, props.min, props.max)
       }
@@ -95,6 +104,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
     const decrementSlotProps = computed(() => ({ click: onClickDown }))
 
     function toggleUpDown (increment = true) {
+      if (controlsDisabled.value) return
       if (model.value == null) {
         model.value = 0
         return
diff --git a/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx b/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx
index 5d115a7a149..a2dbe36d9f3 100644
--- a/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx
+++ b/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx
@@ -2,11 +2,115 @@
 
 // Components
 import { VNumberInput } from '../VNumberInput'
+import { VForm } from '@/components/VForm'
 
 // Utilities
 import { ref } from 'vue'
 
 describe('VNumberInput', () => {
+  describe('readonly', () => {
+    it('should prevent mutation when readonly applied', () => {
+      const value = ref(1)
+
+      cy.mount(() => (
+        <>
+          <VNumberInput
+            class="standalone-input"
+            v-model={ value.value }
+            readonly
+          />
+        </>
+      ))
+
+      cy.get('.v-field input').as('input')
+      cy.get('.v-number-input__control .v-btn:first-child').click({ force: true })
+      cy.get('@input').should('have.value', '1')
+
+      cy.get('.v-number-input__control .v-btn:last-child').click({ force: true })
+      cy.get('@input').should('have.value', '1')
+
+      cy.get('@input')
+        .focus()
+        .type('{uparrow}', { force: true })
+        .should('have.value', '1')
+        .type('{downarrow}', { force: true })
+        .should('have.value', '1')
+    })
+    it('should prevent mutation when readonly applied to parent form', () => {
+      const value = ref(1)
+
+      cy.mount(() => (
+        <>
+          <VForm readonly>
+            <VNumberInput
+              class="input-in-form"
+              v-model={ value.value }
+            />
+          </VForm>
+        </>
+      ))
+
+      cy.get('.v-field input').as('input')
+      cy.get('.v-number-input__control .v-btn:first-child').click({ force: true })
+      cy.get('@input').should('have.value', '1')
+
+      cy.get('.v-number-input__control .v-btn:last-child').click({ force: true })
+      cy.get('@input').should('have.value', '1')
+
+      cy.get('@input')
+        .focus()
+        .type('{uparrow}', { force: true })
+        .should('have.value', '1')
+        .type('{downarrow}', { force: true })
+        .should('have.value', '1')
+    })
+
+    it('should keep original value when readonly or disabled', () => {
+      const value1 = ref(120)
+      const value2 = ref(-15)
+      const value3 = ref(40.4)
+      const value4 = ref(-8.6)
+
+      cy.mount(() => (
+        <>
+        <VNumberInput
+          class="readonly-input-1"
+          v-model={ value1.value }
+          min={ 0 }
+          max={ 50 }
+          readonly
+        />
+        <VNumberInput
+          class="readonly-input-2"
+          v-model={ value2.value }
+          min={ 0 }
+          max={ 50 }
+          readonly
+        />
+          <VNumberInput
+            class="disabled-input-1"
+            v-model={ value3.value }
+            min={ 0 }
+            max={ 10 }
+            disabled
+          />
+          <VNumberInput
+            class="disabled-input-2"
+            v-model={ value4.value }
+            min={ 0 }
+  max={ 10 }
+            disabled
+          />
+        </>
+      ))
+
+      cy.get('.readonly-input-1 input').should('have.value', '120')
+      cy.get('.readonly-input-2 input').should('have.value', '-15')
+      cy.get('.disabled-input-1 input').should('have.value', '40.4')
+      cy.get('.disabled-input-2 input').should('have.value', '-8.6')
+    })
+  })
+
   describe('native number input quirks', () => {
     it('should not bypass min', () => {
       const numberInputValue = ref(1)

From 18d64feb0f93b49a244c6bd83365dd2f89b9f1e1 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Tue, 28 May 2024 16:28:20 +0200
Subject: [PATCH 086/122] fix(VDivider): missing when vertical and aligned to
 center (#19890)

fixes #19889

Co-authored-by: jsek <im68889094144@outlook.com>
---
 .../src/components/VDivider/VDivider.tsx      |   4 +-
 .../VDivider/__tests__/VDivider.spec.cy.tsx   | 244 ++++++++++++++++++
 2 files changed, 246 insertions(+), 2 deletions(-)
 create mode 100644 packages/vuetify/src/components/VDivider/__tests__/VDivider.spec.cy.tsx

diff --git a/packages/vuetify/src/components/VDivider/VDivider.tsx b/packages/vuetify/src/components/VDivider/VDivider.tsx
index d2b9fe80be2..60961165d2e 100644
--- a/packages/vuetify/src/components/VDivider/VDivider.tsx
+++ b/packages/vuetify/src/components/VDivider/VDivider.tsx
@@ -10,7 +10,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { computed, toRef } from 'vue'
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
-type DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'maxHeight' | 'maxWidth'
+type DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'height' | 'width'
 type DividerStyles = Partial<Record<DividerKey, string>>
 
 export const makeVDividerProps = propsFactory({
@@ -37,7 +37,7 @@ export const VDivider = genericComponent()({
       const styles: DividerStyles = {}
 
       if (props.length) {
-        styles[props.vertical ? 'maxHeight' : 'maxWidth'] = convertToUnit(props.length)
+        styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length)
       }
 
       if (props.thickness) {
diff --git a/packages/vuetify/src/components/VDivider/__tests__/VDivider.spec.cy.tsx b/packages/vuetify/src/components/VDivider/__tests__/VDivider.spec.cy.tsx
new file mode 100644
index 00000000000..9a29830a93c
--- /dev/null
+++ b/packages/vuetify/src/components/VDivider/__tests__/VDivider.spec.cy.tsx
@@ -0,0 +1,244 @@
+/// <reference types="../../../../types/cypress" />
+
+import { VDivider } from '..'
+import { VList, VListItem } from '../../VList'
+import { VCard } from '../../VCard'
+import { VToolbar } from '../../VToolbar'
+import { VBtn } from '../../VBtn'
+import { VCol, VRow, VSpacer } from '../../VGrid'
+
+// Tests
+describe('VDivider', () => {
+  describe('examples in documentation', () => {
+    it('takes full height in flexbox container with static height', () => {
+      cy.mount(() => (
+        <>
+          <div
+            class="ma-2 d-flex align-center justify-center bg-grey-lighten-2"
+            style="height: 200px;"
+          >
+            <VDivider
+              data-test="divider-v"
+              vertical
+              class="opacity-100 text-red"
+            ></VDivider>
+          </div>
+        </>
+      ))
+        .get("[data-test='divider-v']")
+        .should('have.length', 1)
+        .should('have.css', 'height', '200px')
+    })
+
+    it('takes defined length when used as centered separator in VToolbar', () => {
+      cy.mount(() => (
+        <>
+          <VToolbar>
+            <VBtn icon="mdi-arrow-left"></VBtn>
+            <VSpacer></VSpacer>
+            <VBtn class="ms-5" icon="mdi-archive-plus-outline"></VBtn>
+            <VBtn icon="mdi-alert-circle-outline"></VBtn>
+            <VBtn icon="mdi-delete-outline"></VBtn>
+            <VDivider
+              data-test="divider-v"
+              class="mx-3 align-self-center opacity-100 text-red"
+              length="24"
+              thickness="2"
+              vertical
+            ></VDivider>
+            <VBtn icon="mdi-folder-outline"></VBtn>
+            <VBtn icon="mdi-tag-outline"></VBtn>
+            <VBtn icon="mdi-dots-vertical"></VBtn>
+          </VToolbar>
+        </>
+      ))
+        .get("[data-test='divider-v']")
+        .should('have.length', 1)
+        .should('have.css', 'height', '24px')
+    })
+  })
+
+  describe('adaptive height', () => {
+    it('takes full height in flexbox container with dynamic height', () => {
+      cy.mount(() => (
+        <>
+          <div
+            class="ma-2 pa-3 d-flex flex-column"
+            style="height: 370px; width: 940px; outline: 1px solid currentColor"
+          >
+            <div class="d-flex">
+              <aside class="pr-4" style="min-width: 200px">
+                <VList class="py-0">
+                  {[1, 2, 3].map(idx => (
+                    <VListItem
+                      rounded="lg"
+                      class="bg-grey mb-3"
+                      title={ `Nav item ${idx}` }
+                    ></VListItem>
+                  ))}
+                </VList>
+              </aside>
+              <VDivider
+                data-test="divider-v"
+                vertical
+                class="opacity-100 text-red"
+              ></VDivider>
+              <main class="px-4 d-flex align-content-start flex-wrap ga-4">
+                {[1, 2, 3, 4, 5, 6, 7, 8].map(idx => (
+                  <VCard color="grey" width="200" height="80"></VCard>
+                ))}
+              </main>
+            </div>
+            <footer class="bg-grey flex-fill mt-4 text-center">footer</footer>
+          </div>
+        </>
+      ))
+        .get("[data-test='divider-v']")
+        .should('have.length', 1)
+        .should('have.css', 'height', '272px') // 272 = 3 * 80px (card height) + 2 * 16px (ga-4)
+    })
+
+    it('takes relative height in flexbox container with dynamic height', () => {
+      cy.mount(() => (
+        <>
+          <div class="d-flex w-100 pa-6">
+            <aside class="bg-grey" style="width: 200px; height: 300px">
+              Sidebar
+            </aside>
+            <VDivider
+              data-test="divider-v"
+              vertical
+              class="mx-2 opacity-100 text-red"
+            ></VDivider>
+            <main class="bg-grey align-self-stretch flex-fill">Content</main>
+          </div>
+        </>
+      ))
+        .get("[data-test='divider-v']")
+        .should('have.length', 1)
+        .should('have.css', 'height', '300px')
+    })
+  })
+
+  describe('separator in list', () => {
+    it('takes full width in VList', () => {
+      cy.mount(() => (
+        <>
+          <div
+            class="ma-2 pa-3 d-flex flex-column"
+            style="height: 370px; width: 940px; outline: 1px solid currentColor"
+          >
+            <aside class="pr-4" style="max-width: 200px">
+              <VList class="bg-transparent py-0">
+                {[1, 2, 3].map(idx => (
+                  <>
+                    { idx > 1 && (
+                      <VDivider
+                        data-test="divider-h"
+                        class="my-2 opacity-100 text-red"
+                      ></VDivider>
+                    )}
+                    <VListItem
+                      rounded="lg"
+                      class="bg-grey"
+                      title={ `Nav item ${idx}` }
+                    ></VListItem>
+                  </>
+                ))}
+              </VList>
+            </aside>
+          </div>
+        </>
+      ))
+        .get("[data-test='divider-h']")
+        .should('have.length', 2)
+        .should('have.css', 'width', '184px')
+    })
+  })
+
+  describe('separator in grid', () => {
+    it('takes only necessary height when grid wraps', () => {
+      cy.mount(() => (
+        <>
+          <div
+            class="ma-2 pa-3"
+            style="height: 370px; width: 940px; outline: 1px solid currentColor"
+          >
+            <VRow class="align-content-start">
+              {[0, 1, 2, 3, 4, 5, 6, 7, 8].map(idx => (
+                <>
+                  { idx % 4 !== 0 && (
+                    <VDivider
+                      data-test={ `divider-v-${idx}` }
+                      vertical
+                      class="opacity-100 text-red"
+                    ></VDivider>
+                  )}
+                  <VCol cols="3">
+                    <VCard color="grey" height="80"></VCard>
+                  </VCol>
+                </>
+              ))}
+            </VRow>
+          </div>
+        </>
+      ))
+        .get("[data-test*='divider-v-']")
+        .should('have.length', 6)
+        .should('have.css', 'height', '104px') // 80px + 2 * 12px (v-col)
+    })
+  })
+
+  describe('vertical inset variant', () => {
+    it('accepts `inset` prop to get predefined margin', () => {
+      cy.mount(() => (
+        <>
+          <div
+            class="ma-2 d-flex align-center justify-center bg-grey-lighten-2"
+            style="height: 200px;"
+          >
+            <VDivider
+              data-test="divider-v"
+              vertical
+              inset
+              class="opacity-100 text-red"
+            ></VDivider>
+          </div>
+        </>
+      ))
+        .get("[data-test='divider-v']")
+        .should('have.length', 1)
+        .should('have.css', 'height', '184px') // 200px - 2 * 8px (inset margin)
+    })
+
+    it('accepts custom margin', () => {
+      cy.mount(() => (
+        <>
+          <div
+            class="ma-2 d-flex align-center justify-center bg-grey-lighten-2"
+            style="height: 200px;"
+          >
+            <VDivider
+              data-test="divider-v"
+              vertical
+              thickness="3"
+              class="my-6 opacity-100 text-red"
+            ></VDivider>
+          </div>
+          <div class="ma-2 d-flex align-center bg-grey-lighten-2">
+            <VCard color="blue" width="200" height="200" rounded="circle"></VCard>
+            <VDivider
+              data-test="divider-v"
+              vertical
+              thickness="3"
+              class="ma-6 opacity-100 text-red"
+            ></VDivider>
+          </div>
+        </>
+      ))
+        .get("[data-test='divider-v']")
+        .should('have.length', 2)
+        .should('have.css', 'height', '152px') // 200px - 2 * 24px (margin)
+    })
+  })
+})

From d4fe9f5c43bed46118579c3a1d531e8fdceba0fc Mon Sep 17 00:00:00 2001
From: KnoX1568 <neofuenf+github@gmail.com>
Date: Tue, 28 May 2024 17:09:27 +0200
Subject: [PATCH 087/122] docs(theme): make toggleTheme function work (#19888)

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

diff --git a/packages/docs/src/pages/en/features/theme.md b/packages/docs/src/pages/en/features/theme.md
index ce3aee9e81b..145916b3c78 100644
--- a/packages/docs/src/pages/en/features/theme.md
+++ b/packages/docs/src/pages/en/features/theme.md
@@ -165,7 +165,7 @@ import { useTheme } from 'vuetify'
 const theme = useTheme()
 
 function toggleTheme () {
-  theme.global.name = theme.global.current.dark ? 'light' : 'dark'
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
 }
 </script>
 ```

From e48d37bce506ebff8b82bae10b05b09a7052f4b8 Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Tue, 28 May 2024 22:40:28 +0700
Subject: [PATCH 088/122] fix(VSnackbar): fix class name for center location
 (#19878)

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

diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass
index 0adfb2b48d7..68903fac095 100644
--- a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass
+++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass
@@ -10,7 +10,7 @@
     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)
 
-    &:not(.v-snackbar--centered):not(.v-snackbar--top)
+    &:not(.v-snackbar--center):not(.v-snackbar--top)
       align-items: flex-end
 
     &__wrapper

From cc659623ce31c3a3e9b5d20daa0e3ef9bebbc6b9 Mon Sep 17 00:00:00 2001
From: tatsuhiro <satotats.alive@gmail.com>
Date: Wed, 29 May 2024 01:41:09 +0900
Subject: [PATCH 089/122] docs(VDataTable): fix wrong v-data-table-headers
 links (#19916)

---
 packages/api-generator/src/locale/en/VDataTable.json        | 2 +-
 packages/docs/src/pages/en/components/data-tables/basics.md | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json
index c75a6072ae0..2e5bdcdefb6 100644
--- a/packages/api-generator/src/locale/en/VDataTable.json
+++ b/packages/api-generator/src/locale/en/VDataTable.json
@@ -14,7 +14,7 @@
     "fixedHeader": "Fixed header to top of table.",
     "groupBy": "Changes which item property should be used for grouping items. Currently only supports a single grouping in the format: `group` or `['group']`. When using an array, only the first element is considered. Can be used with `.sync` modifier.",
     "groupDesc": "Changes which direction grouping is done. Can be used with `.sync` modifier.",
-    "headerProps": "Pass props to the default header. See [`v-data-table-header` API](/api/v-data-table-header) for more information.",
+    "headerProps": "Pass props to the default header. See [`v-data-table-headers` API](/api/v-data-table-headers) for more information.",
     "headers": "An array of objects that each describe a header column. See the example below for a definition of all properties.",
     "headersLength": "Can be used in combination with `hide-default-header` to specify the number of columns in the table to allow expansion rows and loading bar to function properly.",
     "height": "Set an explicit height of table.",
diff --git a/packages/docs/src/pages/en/components/data-tables/basics.md b/packages/docs/src/pages/en/components/data-tables/basics.md
index b2075439fca..b7d4cc19a87 100644
--- a/packages/docs/src/pages/en/components/data-tables/basics.md
+++ b/packages/docs/src/pages/en/components/data-tables/basics.md
@@ -34,7 +34,8 @@ The standard data table presumes that the entire data set is available locally.
 | Component | Description |
 | - | - |
 | [v-data-table](/api/v-data-table/) | Primary Component |
-| [v-data-table-footer](/api/v-data-table-footer/) | Functional Component used to display Data-table headers |
+| [v-data-table-headers](/api/v-data-table-headers/) | Functional Component used to display Data-table headers |
+| [v-data-table-footer](/api/v-data-table-footer/) | Functional Component used to display Data-table footers |
 | [v-checkbox-btn](/api/v-checkbox-btn/) | Reusable lightweight [v-checkbox](/components/checkboxes) |
 
 <ApiInline hide-links />

From e94dc93b8cc32c720fb7cfe79a7f29cce77e5d42 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 28 May 2024 15:46:32 -0500
Subject: [PATCH 090/122] fix(VStepperItem): remove inline margin in mobile
 mode

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

diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.sass b/packages/vuetify/src/components/VStepper/VStepperItem.sass
index 78ce758462d..ad1a0e1e360 100644
--- a/packages/vuetify/src/components/VStepper/VStepperItem.sass
+++ b/packages/vuetify/src/components/VStepper/VStepperItem.sass
@@ -43,6 +43,9 @@
     font-size: $stepper-item-avatar-font-size
     margin-inline-end: $stepper-item-avatar-margin-inline-end
 
+    .v-stepper--mobile &
+      margin-inline-end: 0
+
     .v-icon
       font-size: $stepper-item-avatar-icon-font-size
 

From 908fb5914a6685245935a7a5d299dfc774738417 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 28 May 2024 15:50:05 -0500
Subject: [PATCH 091/122] fix(VStepper): accept null value for mobile

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

diff --git a/packages/vuetify/src/components/VStepper/VStepper.tsx b/packages/vuetify/src/components/VStepper/VStepper.tsx
index c00678e8133..49a36eb5362 100644
--- a/packages/vuetify/src/components/VStepper/VStepper.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepper.tsx
@@ -13,6 +13,7 @@ import { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'
 
 // Composables
 import { provideDefaults } from '@/composables/defaults'
+import { makeDisplayProps, useDisplay } from '@/composables/display'
 import { makeGroupProps, useGroup } from '@/composables/group'
 
 // Utilities
@@ -61,9 +62,10 @@ export const makeStepperProps = propsFactory({
     type: String,
     default: 'value',
   },
-  mobile: Boolean,
   nonLinear: Boolean,
   flat: Boolean,
+
+  ...makeDisplayProps(),
 }, 'Stepper')
 
 export const makeVStepperProps = propsFactory({
@@ -87,6 +89,7 @@ export const VStepper = genericComponent<VStepperSlots>()({
 
   setup (props, { slots }) {
     const { items: _items, next, prev, selected } = useGroup(props, VStepperSymbol)
+    const { displayClasses, mobile } = useDisplay(props)
     const { color, editable, prevText, nextText } = toRefs(props)
 
     const items = computed(() => props.items.map((item, index) => {
@@ -141,8 +144,9 @@ export const VStepper = genericComponent<VStepperSlots>()({
               'v-stepper--alt-labels': props.altLabels,
               'v-stepper--flat': props.flat,
               'v-stepper--non-linear': props.nonLinear,
-              'v-stepper--mobile': props.mobile,
+              'v-stepper--mobile': mobile.value,
             },
+            displayClasses.value,
             props.class,
           ]}
           style={ props.style }

From 64acd015420b31b553b16608fd97687c307b672d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 28 May 2024 15:57:51 -0500
Subject: [PATCH 092/122] fix(VStepper): propagate complete/error/edit icons

---
 packages/vuetify/src/components/VStepper/VStepper.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VStepper/VStepper.tsx b/packages/vuetify/src/components/VStepper/VStepper.tsx
index 49a36eb5362..bdd67183429 100644
--- a/packages/vuetify/src/components/VStepper/VStepper.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepper.tsx
@@ -48,7 +48,10 @@ export type VStepperSlots = {
 export const makeStepperProps = propsFactory({
   altLabels: Boolean,
   bgColor: String,
+  completeIcon: String,
+  editIcon: String,
   editable: Boolean,
+  errorIcon: String,
   hideActions: Boolean,
   items: {
     type: Array as PropType<readonly StepperItem[]>,
@@ -90,7 +93,7 @@ export const VStepper = genericComponent<VStepperSlots>()({
   setup (props, { slots }) {
     const { items: _items, next, prev, selected } = useGroup(props, VStepperSymbol)
     const { displayClasses, mobile } = useDisplay(props)
-    const { color, editable, prevText, nextText } = toRefs(props)
+    const { completeIcon, editIcon, errorIcon, color, editable, prevText, nextText } = toRefs(props)
 
     const items = computed(() => props.items.map((item, index) => {
       const title = getPropertyFromItem(item, props.itemTitle, item)
@@ -116,6 +119,9 @@ export const VStepper = genericComponent<VStepperSlots>()({
     provideDefaults({
       VStepperItem: {
         editable,
+        errorIcon,
+        completeIcon,
+        editIcon,
         prevText,
         nextText,
       },

From ed2f0fa01ef8216158042a4f3dd85c6b1596998b Mon Sep 17 00:00:00 2001
From: Rafal <rafal.osieka@gmail.com>
Date: Wed, 29 May 2024 16:25:36 +0200
Subject: [PATCH 093/122] fix(VCheckboxBtn): reset checked state when readonly
 is true (#19861)

fixes #19137
---
 .../VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx    | 13 +++++++++++++
 .../VSelectionControl/VSelectionControl.tsx         | 11 ++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx b/packages/vuetify/src/components/VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx
index 51503877ecf..851f99fcfa9 100644
--- a/packages/vuetify/src/components/VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx
+++ b/packages/vuetify/src/components/VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx
@@ -47,4 +47,17 @@ describe('VCheckboxBtn', () => {
 
     cy.get('input').should('have.attr', 'aria-checked', 'mixed')
   })
+
+  it('should not update input checked state when it is readonly', () => {
+    const model = ref(false)
+    cy.mount(() => (
+      <VCheckboxBtn v-model={ model.value } readonly />
+    ))
+
+    cy.get('.v-checkbox-btn').click(20, 20)
+
+    cy.get('input').should('not.be.checked').then(() => {
+      expect(model.value).to.be.false
+    })
+  })
 })
diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
index 7340ba32954..97d024d77ae 100644
--- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
+++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
@@ -204,7 +204,16 @@ export const VSelectionControl = genericComponent<new <T>(
     }
 
     function onInput (e: Event) {
-      if (!isInteractive.value) return
+      if (!isInteractive.value) {
+        if (input.value) {
+          // model value is not updated when input is not interactive
+          // but the internal checked state of the input is still updated,
+          // so here it's value is restored
+          input.value.checked = model.value
+        }
+
+        return
+      }
 
       if (props.readonly && group) {
         nextTick(() => group.forceUpdate())

From f5f2fa4a3a5769083356794ea744fa8a6eca81db Mon Sep 17 00:00:00 2001
From: Zhaolin Liang <develop0304@outlook.com>
Date: Wed, 29 May 2024 22:58:50 +0800
Subject: [PATCH 094/122] fix(VTabs): render tabs correctly using items
 (#19868)

---
 packages/api-generator/src/locale/en/VTabs.json     |  2 +-
 packages/vuetify/src/components/VTabs/VTabs.tsx     |  2 +-
 .../components/VTabs/__tests__/VTabs.spec.cy.tsx    | 13 +++++++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VTabs.json b/packages/api-generator/src/locale/en/VTabs.json
index 8eefdaf55c6..e44e73503a4 100644
--- a/packages/api-generator/src/locale/en/VTabs.json
+++ b/packages/api-generator/src/locale/en/VTabs.json
@@ -13,7 +13,7 @@
     "height": "Sets the height of the tabs bar.",
     "hideSlider": "Hide's the generated `v-tabs-slider`.",
     "iconsAndText": "Will stack icon and text vertically.",
-    "items": "The items to display in the component. This can be an array of strings or objects with a property `title`.",
+    "items": "The items to display in the component. This can be an array of strings or objects with a property `text`.",
     "light": "Applies the light theme variant to the component.",
     "mobileBreakpoint": "Sets the designated mobile breakpoint for the component.",
     "optional": "Does not require an active item. Useful when using `v-tab` as a `router-link`.",
diff --git a/packages/vuetify/src/components/VTabs/VTabs.tsx b/packages/vuetify/src/components/VTabs/VTabs.tsx
index 31ddf16dc35..c68aa6456a6 100644
--- a/packages/vuetify/src/components/VTabs/VTabs.tsx
+++ b/packages/vuetify/src/components/VTabs/VTabs.tsx
@@ -144,7 +144,7 @@ export const VTabs = genericComponent<VTabsSlots>()({
                   key={ item.text }
                   value={ item.value }
                   v-slots={{
-                    default: () => slots[`tab.${item.value}`]?.({ item }),
+                    default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({ item }) : undefined,
                   }}
                 />
               )
diff --git a/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx b/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx
index 20c48496c74..9cdb3f270dd 100644
--- a/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx
+++ b/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx
@@ -145,4 +145,17 @@ describe('VTabs', () => {
         expect(model.value).to.equal('B')
       })
   })
+
+  it('should render tabs using items', () => {
+    const items = [
+      { text: 'A', value: 1 },
+      { text: 'B', value: 2 },
+      { text: 'C', value: 3 },
+    ]
+    cy.mount(() => (
+      <VTabs items={ items } />
+    )).get('.v-tab').eq(0).should('have.text', 'A')
+      .get('.v-tab').eq(1).should('have.text', 'B')
+      .get('.v-tab').eq(2).should('have.text', 'C')
+  })
 })

From 8d7beebf10643b6f1d18fb15bd81a9183725b1b5 Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Thu, 30 May 2024 01:18:20 +1000
Subject: [PATCH 095/122] fix(VTreeview): select & activate issues (#19795)

fixes #19441
fixes #19402
fixes #19400
fixes #19533
fixes #19471

Co-authored-by: Kael <kaelwd@gmail.com>
Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../vuetify/src/components/VList/VList.tsx    |   6 +-
 .../src/components/VList/VListGroup.tsx       |   1 +
 .../src/components/VList/VListItem.sass       |   2 +-
 .../src/components/VList/VListItem.tsx        |   4 +-
 .../vuetify/src/labs/VTreeview/VTreeview.tsx  |   2 +-
 .../src/labs/VTreeview/VTreeviewChildren.tsx  |  73 +++++++----
 .../src/labs/VTreeview/VTreeviewItem.tsx      | 123 ++++++++++++++++--
 7 files changed, 169 insertions(+), 42 deletions(-)

diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
index 567728ccd1c..00e020b2a94 100644
--- a/packages/vuetify/src/components/VList/VList.tsx
+++ b/packages/vuetify/src/components/VList/VList.tsx
@@ -22,7 +22,7 @@ import { makeVariantProps } from '@/composables/variant'
 
 // Utilities
 import { computed, ref, shallowRef, toRef } from 'vue'
-import { focusChild, genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'
+import { EventProp, focusChild, genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -95,6 +95,8 @@ export const makeVListProps = propsFactory({
   slim: Boolean,
   nav: Boolean,
 
+  'onClick:open': EventProp<[{ id: unknown, value: boolean, path: unknown[] }]>(),
+  'onClick:select': EventProp<[{ id: unknown, value: boolean, path: unknown[] }]>(),
   ...makeNestedProps({
     selectStrategy: 'single-leaf' as const,
     openStrategy: 'list' as const,
@@ -130,6 +132,8 @@ export const VList = genericComponent<new <
     itemProps?: SelectItemKey<ItemType<T>>
     selected?: S
     'onUpdate:selected'?: (value: S) => void
+    'onClick:open'?: (value: { id: unknown, value: boolean, path: unknown[] }) => void
+    'onClick:select'?: (value: { id: unknown, value: boolean, path: unknown[] }) => void
     opened?: O
     'onUpdate:opened'?: (value: O) => void
   },
diff --git a/packages/vuetify/src/components/VList/VListGroup.tsx b/packages/vuetify/src/components/VList/VListGroup.tsx
index a475a86d330..2d94ce78e31 100644
--- a/packages/vuetify/src/components/VList/VListGroup.tsx
+++ b/packages/vuetify/src/components/VList/VListGroup.tsx
@@ -66,6 +66,7 @@ export const VListGroup = genericComponent<VListGroupSlots>()({
     const { isBooted } = useSsrBoot()
 
     function onClick (e: Event) {
+      e.stopPropagation()
       open(!isOpen.value, e)
     }
 
diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass
index cfa039d1685..d1146c26a47 100644
--- a/packages/vuetify/src/components/VList/VListItem.sass
+++ b/packages/vuetify/src/components/VList/VListItem.sass
@@ -319,7 +319,7 @@
   .v-list-group__items .v-list-item
     padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important
 
-  .v-list-group__header.v-list-item--active
+  .v-list-group__header:not(.v-treeview-item--activetable-group-activator).v-list-item--active
     &:not(:focus-visible)
       .v-list-item__overlay
         opacity: 0
diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index ec51bda0e14..5033f7954e1 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -34,7 +34,7 @@ import { deprecate, EventProp, genericComponent, propsFactory, useRender } from
 import type { PropType } from 'vue'
 import type { RippleDirectiveBinding } from '@/directives/ripple'
 
-type ListItemSlot = {
+export type ListItemSlot = {
   isActive: boolean
   isSelected: boolean
   isIndeterminate: boolean
@@ -359,6 +359,8 @@ export const VListItem = genericComponent<VListItemSlots>()({
     })
 
     return {
+      activate,
+      isActivated,
       isGroupActivator,
       isSelected,
       list,
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
index 693d45e41aa..daaa14820f2 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
@@ -34,7 +34,7 @@ export const makeVTreeviewProps = propsFactory({
   ...omit(makeVListProps({
     collapseIcon: '$treeviewCollapse',
     expandIcon: '$treeviewExpand',
-    selectStrategy: 'independent' as const,
+    selectStrategy: 'classic' as const,
     openStrategy: 'multiple' as const,
     slim: true,
   }), ['nav']),
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
index 85bf5e3c4d1..17d40421270 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -4,13 +4,14 @@ import { VTreeviewItem } from './VTreeviewItem'
 import { VCheckboxBtn } from '@/components/VCheckbox'
 
 // Utilities
-import { shallowRef } from 'vue'
+import { shallowRef, withModifiers } from 'vue'
 import { genericComponent, propsFactory } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
 import type { InternalListItem } from '@/components/VList/VList'
 import type { VListItemSlots } from '@/components/VList/VListItem'
+import type { SelectStrategyProp } from '@/composables/nested/nested'
 import type { GenericProps } from '@/util'
 
 export type VTreeviewChildrenSlots<T> = {
@@ -28,6 +29,7 @@ export const makeVTreeviewChildrenProps = propsFactory({
   },
   items: Array as PropType<readonly InternalListItem[]>,
   selectable: Boolean,
+  selectStrategy: [String, Function, Object] as PropType<SelectStrategyProp>,
 }, 'VTreeviewChildren')
 
 export const VTreeviewChildren = genericComponent<new <T extends InternalListItem>(
@@ -60,29 +62,37 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
       })
     }
 
-    function onClick (e: MouseEvent | KeyboardEvent, item: any) {
-      e.stopPropagation()
-
-      checkChildren(item)
+    function selectItem (select: (value: boolean) => void, isSelected: boolean) {
+      if (props.selectable) {
+        select(!isSelected)
+      }
     }
 
     return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, raw: item }) => {
       const loading = isLoading.value === item.value
       const slotsWithItem = {
-        prepend: slots.prepend
-          ? slotProps => slots.prepend?.({ ...slotProps, item })
-          : props.selectable
-            ? ({ isSelected, isIndeterminate }) => (
-              <VCheckboxBtn
-                key={ item.value }
-                tabindex="-1"
-                modelValue={ isSelected }
-                loading={ loading }
-                indeterminate={ isIndeterminate }
-                onClick={ (e: MouseEvent) => onClick(e, item) }
-              />
-            )
-            : undefined,
+        prepend: slotProps => (
+          <>
+            { props.selectable && (!children || (children && !['leaf', 'single-leaf'].includes(props.selectStrategy as string))) && (
+              <div>
+                <VCheckboxBtn
+                  key={ item.value }
+                  modelValue={ slotProps.isSelected }
+                  loading={ loading }
+                  indeterminate={ slotProps.isIndeterminate }
+                  onClick={ withModifiers(() => selectItem(slotProps.select, slotProps.isSelected), ['stop']) }
+                  onKeydown={ (e: KeyboardEvent) => {
+                    if (!['Enter', 'Space'].includes(e.key)) return
+                    e.stopPropagation()
+                    selectItem(slotProps.select, slotProps.isSelected)
+                  }}
+                />
+              </div>
+            )}
+
+            { slots.prepend?.({ ...slotProps, item }) }
+          </>
+        ),
         append: slots.append ? slotProps => slots.append?.({ ...slotProps, item }) : undefined,
         title: slots.title ? slotProps => slots.title?.({ ...slotProps, item }) : undefined,
       } satisfies VTreeviewItem['$props']['$children']
@@ -96,15 +106,22 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
           { ...treeviewGroupProps }
         >
           {{
-            activator: ({ props: activatorProps }) => (
-              <VTreeviewItem
-                { ...itemProps }
-                { ...activatorProps }
-                loading={ loading }
-                v-slots={ slotsWithItem }
-                onClick={ (e: MouseEvent | KeyboardEvent) => onClick(e, item) }
-              />
-            ),
+            activator: ({ props: activatorProps }) => {
+              const listItemProps = {
+                ...itemProps,
+                ...activatorProps,
+                value: itemProps?.value,
+              }
+
+              return (
+                <VTreeviewItem
+                  { ...listItemProps }
+                  loading={ loading }
+                  v-slots={ slotsWithItem }
+                  onClick={ () => checkChildren(item) }
+                />
+              )
+            },
             default: () => (
               <VTreeviewChildren
                 { ...treeviewChildrenProps }
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
index 6fae4204548..fea97419ddf 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -3,13 +3,16 @@ import './VTreeviewItem.sass'
 
 // Components
 import { VBtn } from '@/components/VBtn'
-import { VListItemAction } from '@/components/VList'
+import { VListItemAction, VListItemSubtitle, VListItemTitle } from '@/components/VList'
 import { makeVListItemProps, VListItem } from '@/components/VList/VListItem'
 import { VProgressCircular } from '@/components/VProgressCircular'
 
 // Composables
+import { useDensity } from '@/composables/density'
 import { IconValue } from '@/composables/icons'
+import { useNestedItem } from '@/composables/nested/nested'
 import { useLink } from '@/composables/router'
+import { genOverlays } from '@/composables/variant'
 
 // Utilities
 import { computed, inject, ref } from 'vue'
@@ -17,7 +20,7 @@ import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import { VTreeviewSymbol } from './shared'
-import type { VListItemSlots } from '@/components/VList/VListItem'
+import type { ListItemSlot, VListItemSlots } from '@/components/VList/VListItem'
 
 export const makeVTreeviewItemProps = propsFactory({
   loading: Boolean,
@@ -33,34 +36,133 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
 
   setup (props, { attrs, slots, emit }) {
     const link = useLink(props, attrs)
-    const id = computed(() => props.value === undefined ? link.href.value : props.value)
+    const rawId = computed(() => props.value === undefined ? link.href.value : props.value)
     const vListItemRef = ref<VListItem>()
 
+    const {
+      activate,
+      isActivated,
+      select,
+      isSelected,
+      isIndeterminate,
+      isGroupActivator,
+      root,
+      id,
+    } = useNestedItem(rawId, false)
+
+    const isActivatableGroupActivator = computed(() =>
+      (root.activatable.value) &&
+      isGroupActivator
+    )
+
+    const { densityClasses } = useDensity(props, 'v-list-item')
+
+    const slotProps = computed(() => ({
+      isActive: isActivated.value,
+      select,
+      isSelected: isSelected.value,
+      isIndeterminate: isIndeterminate.value,
+    } satisfies ListItemSlot))
+
     const isClickable = computed(() =>
       !props.disabled &&
       props.link !== false &&
       (props.link || link.isClickable.value || (props.value != null && !!vListItemRef.value?.list))
     )
 
-    function onClick (e: MouseEvent | KeyboardEvent) {
-      if (!vListItemRef.value?.isGroupActivator || !isClickable.value) return
-      props.value != null && vListItemRef.value?.select(!vListItemRef.value?.isSelected, e)
+    function activateItem (e: MouseEvent | KeyboardEvent) {
+      if (
+        !isClickable.value ||
+        (!isActivatableGroupActivator.value && isGroupActivator)
+      ) return
+
+      if (root.activatable.value) {
+        if (isActivatableGroupActivator.value) {
+          activate(!isActivated.value, e)
+        } else {
+          vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e)
+        }
+      }
     }
 
     function onKeyDown (e: KeyboardEvent) {
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault()
-        onClick(e as any as MouseEvent)
+        activateItem(e)
       }
     }
 
     const visibleIds = inject(VTreeviewSymbol, { visibleIds: ref() }).visibleIds
 
     useRender(() => {
+      const hasTitle = (slots.title || props.title != null)
+      const hasSubtitle = (slots.subtitle || props.subtitle != null)
       const listItemProps = VListItem.filterProps(props)
       const hasPrepend = slots.prepend || props.toggleIcon
 
-      return (
+      return isActivatableGroupActivator.value
+        ? (
+          <div
+            class={[
+              'v-list-item',
+              'v-list-item--one-line',
+              'v-treeview-item',
+              'v-treeview-item--activetable-group-activator',
+              {
+                'v-list-item--active': isActivated.value || isSelected.value,
+                'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value),
+              },
+              densityClasses.value,
+              props.class,
+            ]}
+            onClick={ activateItem }
+            v-ripple={ isClickable.value && props.ripple }
+          >
+            <>
+              { genOverlays(isActivated.value || isSelected.value, 'v-list-item') }
+              { props.toggleIcon && (
+                <VListItemAction start={ false }>
+                  <VBtn
+                    density="compact"
+                    icon={ props.toggleIcon }
+                    loading={ props.loading }
+                    variant="text"
+                    onClick={ props.onClick }
+                  >
+                    {{
+                      loader () {
+                        return (
+                          <VProgressCircular
+                            indeterminate="disable-shrink"
+                            size="20"
+                            width="2"
+                          />
+                        )
+                      },
+                    }}
+                  </VBtn>
+                </VListItemAction>
+              )}
+
+             </>
+
+            <div class="v-list-item__content" data-no-activator="">
+              { hasTitle && (
+                <VListItemTitle key="title">
+                  { slots.title?.({ title: props.title }) ?? props.title }
+                </VListItemTitle>
+              )}
+
+              { hasSubtitle && (
+                <VListItemSubtitle key="subtitle">
+                  { slots.subtitle?.({ subtitle: props.subtitle }) ?? props.subtitle }
+                </VListItemSubtitle>
+              )}
+
+              { slots.default?.(slotProps.value) }
+            </div>
+          </div>
+        ) : (
         <VListItem
           ref={ vListItemRef }
           { ...listItemProps }
@@ -71,7 +173,8 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             },
             props.class,
           ]}
-          onClick={ onClick }
+          value={ id.value }
+          onClick={ activateItem }
           onKeydown={ isClickable.value && onKeyDown }
         >
           {{
@@ -108,7 +211,7 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             } : undefined,
           }}
         </VListItem>
-      )
+        )
     })
 
     return {}

From f401f41844c5201abccb9cd732ef7ddbde192089 Mon Sep 17 00:00:00 2001
From: timmy <126319815+TIM56887@users.noreply.github.com>
Date: Wed, 29 May 2024 23:53:15 +0800
Subject: [PATCH 096/122] fix(VDatePicker): using the start range that has been
 cleared (#19869)

fixes #19854

Co-authored-by: Timmy <ccliu@net-chinese.com.tw>
---
 .../vuetify/src/components/VDatePicker/VDatePickerMonth.tsx    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx
index 85a5779362b..3dadf81a037 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx
@@ -91,6 +91,9 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
     function onRangeClick (value: unknown) {
       const _value = adapter.startOfDay(value)
 
+      if (model.value.length === 0) {
+        rangeStart.value = undefined
+      }
       if (!rangeStart.value) {
         rangeStart.value = _value
         model.value = [rangeStart.value]

From b3eafb275c2ca85cefb297e840f66c839908eed8 Mon Sep 17 00:00:00 2001
From: Zhaolin Liang <develop0304@outlook.com>
Date: Thu, 30 May 2024 00:12:05 +0800
Subject: [PATCH 097/122] fix(VDataTable): customKeyFilter filtering (#19881)

fixes #19596
---
 .../src/composables/__tests__/filter.spec.ts  | 54 +++++++++++++++++++
 packages/vuetify/src/composables/filter.ts    |  2 +-
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/composables/__tests__/filter.spec.ts b/packages/vuetify/src/composables/__tests__/filter.spec.ts
index 4a458bb4480..6640d1e9398 100644
--- a/packages/vuetify/src/composables/__tests__/filter.spec.ts
+++ b/packages/vuetify/src/composables/__tests__/filter.spec.ts
@@ -115,6 +115,60 @@ describe('filter', () => {
         filterMode: 'every',
       })).toHaveLength(1)
     })
+
+    it('should filter by mode using customKeyFilter without query', () => {
+      const customKeyFilter = {
+        title: (s: string) => s.length < 5,
+        value: (s: string) => s === '1',
+      }
+      const items = [
+        {
+          title: 'foo',
+          subtitle: 'bar',
+          value: '1',
+        },
+        {
+          title: 'fizz',
+          subtitle: 'buzz',
+          value: '1',
+        },
+        {
+          title: 'foobar',
+          subtitle: 'fizzbuzz',
+          value: '2',
+        },
+        {
+          title: 'buzz',
+          subtitle: 'buzz',
+          value: '2',
+        },
+      ] as any
+      const filterKeys = ['title', 'value']
+
+      expect(filterItems(items, '', {
+        filterKeys,
+        customKeyFilter,
+        filterMode: 'some',
+      })).toHaveLength(3)
+
+      expect(filterItems(items, '', {
+        filterKeys,
+        customKeyFilter,
+        filterMode: 'union',
+      })).toHaveLength(2)
+
+      expect(filterItems(items, '', {
+        filterKeys,
+        customKeyFilter,
+        filterMode: 'intersection',
+      })).toHaveLength(0)
+
+      expect(filterItems(items, '', {
+        filterKeys,
+        customKeyFilter,
+        filterMode: 'every',
+      })).toHaveLength(2)
+    })
   })
 
   describe('useFilter', () => {
diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts
index 9ba2d6213ea..43d83e90237 100644
--- a/packages/vuetify/src/composables/filter.ts
+++ b/packages/vuetify/src/composables/filter.ts
@@ -78,7 +78,7 @@ export function filterItems (
     const defaultMatches: Record<string, FilterMatch> = {}
     let match: FilterMatch = -1
 
-    if (query && !options?.noFilter) {
+    if ((query || customFiltersLength > 0) && !options?.noFilter) {
       if (typeof item === 'object') {
         const filterKeys = keys || Object.keys(transformed)
 

From 0c5f6d5dac0538882f5d86cc618b627795ed495a Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 29 May 2024 11:23:02 -0500
Subject: [PATCH 098/122] chore(release): publish v3.6.8

---
 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 6c50ec910f4..dcf53c2cec1 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.6.7",
+  "version": "3.6.8",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index 0f64a76a318..983f5fb4ff4 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.6.7",
+  "version": "3.6.8",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^22.0.0",
     "tsx": "^4.7.2",
     "vue": "^3.4.27",
-    "vuetify": "^3.6.7"
+    "vuetify": "^3.6.8"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 2187ce7aca5..6bcfa7d6120 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.6.7",
+  "version": "3.6.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.11.0",
     "vue-instantsearch": "^4.16.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.6.7"
+    "vuetify": "^3.6.8"
   },
   "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.27",
-    "@vuetify/api-generator": "^3.6.7",
+    "@vuetify/api-generator": "^3.6.8",
     "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 755f5e0646d..857e3e09835 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.6.7",
+  "version": "3.6.8",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From 53a87e7ad964ef31ce6c7f4b6a4e8a6508fa8686 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 29 May 2024 15:10:20 -0500
Subject: [PATCH 099/122] docs(text-and-typography): add class table, missing
 page features

---
 .../pages/en/styles/text-and-typography.md    | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/packages/docs/src/pages/en/styles/text-and-typography.md b/packages/docs/src/pages/en/styles/text-and-typography.md
index 605d2adcd6d..7f192cfba36 100644
--- a/packages/docs/src/pages/en/styles/text-and-typography.md
+++ b/packages/docs/src/pages/en/styles/text-and-typography.md
@@ -1,4 +1,5 @@
 ---
+emphasized: true
 meta:
   title: Text and typography
   description: View the various typography styles. From headings to captions, with various weights, sizes and italics.
@@ -7,6 +8,9 @@ related:
   - /styles/display/
   - /styles/content/
   - /features/internationalization/
+features:
+  report: true
+  spec: https://m2.material.io/design/typography/the-type-system.html
 ---
 
 # Text and typography
@@ -15,6 +19,61 @@ Control text size, alignment, wrapping, overflow, transforms and more. By defaul
 
 <PageFeatures />
 
+| Class | Properties |
+| - | - |
+| **text-h1** | font-size: 6rem;<br>font-weight: 300;<br>line-height: 1;<br>letter-spacing: -0.015625em |
+| **text-h2** | font-size: 3.75rem;<br>font-weight: 300;<br>line-height: 1;<br>letter-spacing: -0.0083333333em; |
+| **text-h3** | font-size: 3rem;<br>font-weight: 400;<br>line-height: 1.05;<br>letter-spacing: normal; |
+| **text-h4** | font-size: 2.125rem;<br>font-weight: 400;<br>line-height: 1.175;<br>letter-spacing: 0.0073529412em; |
+| **text-h5** | font-size: 1.5rem;<br>font-weight: 400;<br>line-height: 1.333;<br>line-height: normal; |
+| **text-h6** | font-size: 1.25rem;<br>font-weight: 500;<br>line-height: 1.6;<br>letter-spacing: 0.0125em; |
+| **text-subtitle-1** | font-size: 1rem;<br>font-weight: normal;<br>line-height: 1.75;<br>letter-spacing: 0.009375em; |
+| **text-subtitle-2** | font-size: 0.875rem;<br>font-weight: 500;<br>line-height: 1.6;<br>letter-spacing: 0.0071428571em; |
+| **text-body-1** | font-size: 1rem;<br>font-weight: 400;<br>line-height: 1.5;<br>letter-spacing: 0.03125em; |
+| **text-body-2** | font-size: font-size: 0.875rem;<br>font-weight: 400;<br>line-height: 1.425;<br>letter-spacing: 0.0178571429em; |
+| **text-button** | font-size: 0.875rem;<br>font-weight: 500;<br>line-height: 2.6;<br>letter-spacing: 0.0892857143em;<br>text-transform: uppercase; |
+| **text-caption** | font-size: 0.75rem;<br>font-weight: 400;<br>line-height: 1.667;<br>letter-spacing: 0.0333333333em; |
+| **text-overline** | font-size: 0.75rem;<br>font-weight: 500;<br>line-height: 2.667;<br>letter-spacing: 0.1666666667em;<br>text-transform: uppercase; |
+| **text-high-emphasis** | color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); |
+| **text-medium-emphasis** | color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)); |
+| **text-disabled** | color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)); |
+| **text-uppercase** | text-transform: uppercase; |
+| **text-lowercase** | text-transform: lowercase; |
+| **text-capitalize** | text-transform: capitalize; |
+| **text-start** | text-align: start; |
+| **text-center** | text-align: center; |
+| **text-end** | text-align: end; |
+| **text-justify** | text-align: justify; |
+| **text-left** | text-align: left; |
+| **text-right** | text-align: right; |
+| **text-truncate** | overflow: hidden;<br>text-overflow: ellipsis;<br>white-space: nowrap; |
+| **text-no-wrap** | white-space: nowrap; |
+| **text-break** | overflow-wrap: break-word; |
+| **text-decoration-none** | text-decoration: none; |
+| **text-decoration-overline** | text-decoration: overline; |
+| **text-decoration-underline** | text-decoration: underline; |
+| **text-decoration-line-through** | text-decoration: line-through; |
+| **font-weight-black** | font-weight: 900; |
+| **font-weight-bold** | font-weight: 700; |
+| **font-weight-medium** | font-weight: 500; |
+| **font-weight-regular** | font-weight: 400; |
+| **font-weight-light** | font-weight: 300; |
+| **font-weight-thin** | font-weight: 100; |
+| **font-italic** | font-style: italic; |
+| **text-{breakpoint}-h1** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-h2** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-h3** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-h4** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-h5** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-h6** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-subtitle-1** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-subtitle-2** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-body-1** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-body-2** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-button** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-caption** | Set the font size for the specified breakpoint. |
+| **text-{breakpoint}-overline** | Set the font size for the specified breakpoint. { style="max-height: 600px;" fixed-header } |
+
 <PromotedEntry />
 
 ## Typography

From b922825b81f6c805365ed0b6588c578ae5851be3 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 29 May 2024 15:10:40 -0500
Subject: [PATCH 100/122] docs: add missing page features

---
 packages/docs/src/pages/en/styles/border-radius.md | 2 ++
 packages/docs/src/pages/en/styles/content.md       | 2 ++
 packages/docs/src/pages/en/styles/display.md       | 2 ++
 packages/docs/src/pages/en/styles/flex.md          | 2 ++
 packages/docs/src/pages/en/styles/float.md         | 2 ++
 packages/docs/src/pages/en/styles/overflow.md      | 2 ++
 packages/docs/src/pages/en/styles/position.md      | 2 ++
 packages/docs/src/pages/en/styles/sizing.md        | 2 ++
 packages/docs/src/pages/en/styles/spacing.md       | 2 ++
 9 files changed, 18 insertions(+)

diff --git a/packages/docs/src/pages/en/styles/border-radius.md b/packages/docs/src/pages/en/styles/border-radius.md
index dba6c59bde8..d07f1db370c 100644
--- a/packages/docs/src/pages/en/styles/border-radius.md
+++ b/packages/docs/src/pages/en/styles/border-radius.md
@@ -7,6 +7,8 @@ related:
   - /styles/text-and-typography/
   - /components/sheets/
   - /components/buttons/
+features:
+  report: true
 ---
 
 # Border Radius
diff --git a/packages/docs/src/pages/en/styles/content.md b/packages/docs/src/pages/en/styles/content.md
index ac8ba8df908..8083eded1ec 100644
--- a/packages/docs/src/pages/en/styles/content.md
+++ b/packages/docs/src/pages/en/styles/content.md
@@ -7,6 +7,8 @@ related:
   - /styles/text-and-typography/
   - /styles/display/
   - /styles/spacing/
+features:
+  report: true
 ---
 
 # Content
diff --git a/packages/docs/src/pages/en/styles/display.md b/packages/docs/src/pages/en/styles/display.md
index 47f92cd7ad4..66656bb6827 100644
--- a/packages/docs/src/pages/en/styles/display.md
+++ b/packages/docs/src/pages/en/styles/display.md
@@ -7,6 +7,8 @@ related:
   - /styles/text-and-typography/
   - /directives/resize/
   - /features/display-and-platform/
+features:
+  report: true
 ---
 
 # Display helpers
diff --git a/packages/docs/src/pages/en/styles/flex.md b/packages/docs/src/pages/en/styles/flex.md
index eeb47ffb572..8911227c88d 100644
--- a/packages/docs/src/pages/en/styles/flex.md
+++ b/packages/docs/src/pages/en/styles/flex.md
@@ -7,6 +7,8 @@ related:
   - /styles/display/
   - /components/grids/
   - /styles/css-reset/
+features:
+  report: true
 ---
 
 # Flex
diff --git a/packages/docs/src/pages/en/styles/float.md b/packages/docs/src/pages/en/styles/float.md
index ec0eb5cbd21..928ab178be9 100644
--- a/packages/docs/src/pages/en/styles/float.md
+++ b/packages/docs/src/pages/en/styles/float.md
@@ -7,6 +7,8 @@ related:
   - /styles/text-and-typography/
   - /styles/transitions/
   - /styles/content/
+features:
+  report: true
 ---
 
 # Float
diff --git a/packages/docs/src/pages/en/styles/overflow.md b/packages/docs/src/pages/en/styles/overflow.md
index e4fa2b5dca9..db50d1fbcf3 100644
--- a/packages/docs/src/pages/en/styles/overflow.md
+++ b/packages/docs/src/pages/en/styles/overflow.md
@@ -7,6 +7,8 @@ related:
   - /styles/elevation/
   - /styles/content/
   - /components/grids/
+features:
+  report: true
 ---
 
 # Overflow
diff --git a/packages/docs/src/pages/en/styles/position.md b/packages/docs/src/pages/en/styles/position.md
index 0cf998c8bb0..d0adc998d50 100644
--- a/packages/docs/src/pages/en/styles/position.md
+++ b/packages/docs/src/pages/en/styles/position.md
@@ -8,6 +8,8 @@ related:
   - /styles/display/
   - /styles/spacing/
   - /styles/flex/
+features:
+  report: true
 ---
 
 # Position
diff --git a/packages/docs/src/pages/en/styles/sizing.md b/packages/docs/src/pages/en/styles/sizing.md
index ffbb8fad964..c586da74bfd 100644
--- a/packages/docs/src/pages/en/styles/sizing.md
+++ b/packages/docs/src/pages/en/styles/sizing.md
@@ -7,6 +7,8 @@ related:
   - /styles/content/
   - /styles/flex/
   - /styles/text-and-typography/
+features:
+  report: true
 ---
 
 # Sizing
diff --git a/packages/docs/src/pages/en/styles/spacing.md b/packages/docs/src/pages/en/styles/spacing.md
index d74ad63c850..5570afd6cf4 100644
--- a/packages/docs/src/pages/en/styles/spacing.md
+++ b/packages/docs/src/pages/en/styles/spacing.md
@@ -7,6 +7,8 @@ related:
   - /styles/elevation/
   - /styles/content/
   - /components/grids/
+features:
+  report: true
 ---
 
 # Spacing

From 1dc350d64f3effe46a34f1d1975e25923908d27d Mon Sep 17 00:00:00 2001
From: Yuchao Wu <yuchao.sydneyuni@gmail.com>
Date: Thu, 30 May 2024 15:00:59 +1000
Subject: [PATCH 101/122] docs(VTreeview): change item-disabled example to use
 item-props

fixes #19882
---
 .../v-treeview/prop-item-disabled.vue         | 167 ------------------
 .../examples/v-treeview/prop-item-props.vue   |  86 +++++++++
 .../docs/src/pages/en/components/treeview.md  |   6 +-
 3 files changed, 89 insertions(+), 170 deletions(-)
 delete mode 100644 packages/docs/src/examples/v-treeview/prop-item-disabled.vue
 create mode 100644 packages/docs/src/examples/v-treeview/prop-item-props.vue

diff --git a/packages/docs/src/examples/v-treeview/prop-item-disabled.vue b/packages/docs/src/examples/v-treeview/prop-item-disabled.vue
deleted file mode 100644
index 8d1815c0528..00000000000
--- a/packages/docs/src/examples/v-treeview/prop-item-disabled.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-  <v-treeview
-    :items="items"
-    item-disabled="locked"
-    selectable
-  ></v-treeview>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const items = ref([
-    {
-      id: 1,
-      title: 'Applications :',
-      locked: true,
-      children: [
-        { id: 2, title: 'Calendar : app' },
-        { id: 3, title: 'Chrome : app' },
-        { id: 4, title: 'Webstorm : app' },
-      ],
-    },
-    {
-      id: 5,
-      title: 'Documents :',
-      children: [
-        {
-          id: 6,
-          title: 'vuetify :',
-          children: [
-            {
-              id: 7,
-              title: 'src :',
-              locked: true,
-              children: [
-                { id: 8, title: 'index : ts' },
-                { id: 9, title: 'bootstrap : ts' },
-              ],
-            },
-          ],
-        },
-        {
-          id: 10,
-          title: 'material2 :',
-          children: [
-            {
-              id: 11,
-              title: 'src :',
-              children: [
-                { id: 12, title: 'v-btn : ts' },
-                { id: 13, title: 'v-card : ts' },
-                { id: 14, title: 'v-window : ts' },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      id: 15,
-      title: 'Downloads :',
-      children: [
-        { id: 16, title: 'October : pdf', locked: true },
-        { id: 17, title: 'November : pdf', locked: true },
-        { id: 18, title: 'Tutorial : html', locked: true },
-      ],
-    },
-    {
-      id: 19,
-      title: 'Videos :',
-      children: [
-        {
-          id: 20,
-          title: 'Tutorials :',
-          children: [
-            { id: 21, title: 'Basic layouts : mp4' },
-            { id: 22, title: 'Advanced techniques : mp4' },
-            { id: 23, title: 'All about app : dir' },
-          ],
-        },
-        { id: 24, title: 'Intro : mov' },
-        { id: 25, title: 'Conference introduction : avi' },
-      ],
-    },
-  ])
-</script>
-
-<script>
-  export default {
-    data: () => ({
-      items: [
-        {
-          id: 1,
-          title: 'Applications :',
-          locked: true,
-          children: [
-            { id: 2, title: 'Calendar : app' },
-            { id: 3, title: 'Chrome : app' },
-            { id: 4, title: 'Webstorm : app' },
-          ],
-        },
-        {
-          id: 5,
-          title: 'Documents :',
-          children: [
-            {
-              id: 6,
-              title: 'vuetify :',
-              children: [
-                {
-                  id: 7,
-                  title: 'src :',
-                  locked: true,
-                  children: [
-                    { id: 8, title: 'index : ts' },
-                    { id: 9, title: 'bootstrap : ts' },
-                  ],
-                },
-              ],
-            },
-            {
-              id: 10,
-              title: 'material2 :',
-              children: [
-                {
-                  id: 11,
-                  title: 'src :',
-                  children: [
-                    { id: 12, title: 'v-btn : ts' },
-                    { id: 13, title: 'v-card : ts' },
-                    { id: 14, title: 'v-window : ts' },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-        {
-          id: 15,
-          title: 'Downloads :',
-          children: [
-            { id: 16, title: 'October : pdf', locked: true },
-            { id: 17, title: 'November : pdf', locked: true },
-            { id: 18, title: 'Tutorial : html', locked: true },
-          ],
-        },
-        {
-          id: 19,
-          title: 'Videos :',
-          children: [
-            {
-              id: 20,
-              title: 'Tutorials :',
-              children: [
-                { id: 21, title: 'Basic layouts : mp4' },
-                { id: 22, title: 'Advanced techniques : mp4' },
-                { id: 23, title: 'All about app : dir' },
-              ],
-            },
-            { id: 24, title: 'Intro : mov' },
-            { id: 25, title: 'Conference introduction : avi' },
-          ],
-        },
-      ],
-    }),
-  }
-</script>
diff --git a/packages/docs/src/examples/v-treeview/prop-item-props.vue b/packages/docs/src/examples/v-treeview/prop-item-props.vue
new file mode 100644
index 00000000000..a79c0c5d173
--- /dev/null
+++ b/packages/docs/src/examples/v-treeview/prop-item-props.vue
@@ -0,0 +1,86 @@
+<template>
+  <v-treeview
+    :items="items"
+    item-props
+    selectable
+  ></v-treeview>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const items = ref([
+    {
+      id: 1,
+      title: 'Applications :',
+      disabled: true,
+      children: [
+        { id: 2, title: 'Calendar : app' },
+        { id: 3, title: 'Chrome : app' },
+        { id: 4, title: 'Webstorm : app' },
+      ],
+    },
+    {
+      id: 5,
+      title: 'Documents :',
+      children: [
+        {
+          id: 6,
+          title: 'vuetify :',
+          children: [
+            {
+              id: 7,
+              title: 'src :',
+              disabled: true,
+              children: [
+                { id: 8, title: 'index : ts' },
+                { id: 9, title: 'bootstrap : ts' },
+              ],
+            },
+          ],
+        },
+        {
+          id: 10,
+          title: 'material2 :',
+          children: [
+            {
+              id: 11,
+              title: 'src :',
+              children: [
+                { id: 12, title: 'v-btn : ts' },
+                { id: 13, title: 'v-card : ts' },
+                { id: 14, title: 'v-window : ts' },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 15,
+      title: 'Downloads :',
+      children: [
+        { id: 16, title: 'October : pdf', disabled: true },
+        { id: 17, title: 'November : pdf', disabled: true },
+        { id: 18, title: 'Tutorial : html', disabled: true },
+      ],
+    },
+    {
+      id: 19,
+      title: 'Videos :',
+      children: [
+        {
+          id: 20,
+          title: 'Tutorials :',
+          children: [
+            { id: 21, title: 'Basic layouts : mp4' },
+            { id: 22, title: 'Advanced techniques : mp4' },
+            { id: 23, title: 'All about app : dir' },
+          ],
+        },
+        { id: 24, title: 'Intro : mov' },
+        { id: 25, title: 'Conference introduction : avi' },
+      ],
+    },
+  ])
+</script>
diff --git a/packages/docs/src/pages/en/components/treeview.md b/packages/docs/src/pages/en/components/treeview.md
index fb3c132a28c..664e700c1d9 100644
--- a/packages/docs/src/pages/en/components/treeview.md
+++ b/packages/docs/src/pages/en/components/treeview.md
@@ -86,11 +86,11 @@ Treeview nodes can have a hover effect.
 
 <ExamplesExample file="v-treeview/prop-hoverable" /> -->
 
-#### Item disabled
+#### Item props
 
-Setting **item-disabled** prop allows to control which node's property disables the node when set to `true`.
+If **item-props** is set to `true` then the whole item will be spread. In the following example, the disabled prop defined in each item will disable the item accordingly.
 
-<ExamplesExample file="v-treeview/prop-item-disabled" />
+<ExamplesExample file="v-treeview/prop-item-props" />
 
 #### Load children
 

From 9e079c85626de5d8c4656ac292d75ab8e2b71c99 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 30 May 2024 08:14:10 -0500
Subject: [PATCH 102/122] chore: update promotions

---
 packages/docs/src/pages/en/getting-started/installation.md  | 2 ++
 packages/docs/src/pages/en/getting-started/release-notes.md | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/en/getting-started/installation.md b/packages/docs/src/pages/en/getting-started/installation.md
index fe3fe4e3f53..97595064359 100644
--- a/packages/docs/src/pages/en/getting-started/installation.md
+++ b/packages/docs/src/pages/en/getting-started/installation.md
@@ -82,6 +82,8 @@ cd vuetify-project
 yarn dev
 ```
 
+<VoPromotionsCardVuetify slug="vuetify-one" />
+
 ## Using Nuxt 3
 
 [Nuxt](https://nuxt.com/) is an open-source framework that has helpful features to quickly get you started with developing a full-stack Vue app, such as file-based routing, SSR and component auto-imports. Nuxt is powered by Vite, so the steps to get Vuetify working in Nuxt 3 are quite similar to the manual steps described above.
diff --git a/packages/docs/src/pages/en/getting-started/release-notes.md b/packages/docs/src/pages/en/getting-started/release-notes.md
index 1c2c378ea73..e2291518671 100644
--- a/packages/docs/src/pages/en/getting-started/release-notes.md
+++ b/packages/docs/src/pages/en/getting-started/release-notes.md
@@ -16,6 +16,6 @@ The Vuetify team performs releases on a weekly basis.
 
 <PageFeatures />
 
-<VoPromotionsCardVuetify />
+<VoPromotionsCardVuetify slug="vuetify-one" />
 
 <DocReleases />

From bc98d54285710be654fdf86a38ec65660882ebad Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 30 May 2024 08:28:53 -0500
Subject: [PATCH 103/122] docs: add missing page features

---
 packages/docs/src/pages/en/features/accessibility.md        | 2 ++
 packages/docs/src/pages/en/features/aliasing.md             | 2 ++
 packages/docs/src/pages/en/features/application-layout.md   | 2 ++
 packages/docs/src/pages/en/features/blueprints.md           | 2 ++
 packages/docs/src/pages/en/features/display-and-platform.md | 2 ++
 packages/docs/src/pages/en/features/global-configuration.md | 2 ++
 packages/docs/src/pages/en/features/icon-fonts.md           | 2 ++
 packages/docs/src/pages/en/features/internationalization.md | 2 ++
 packages/docs/src/pages/en/features/sass-variables.md       | 2 ++
 packages/docs/src/pages/en/features/theme.md                | 2 ++
 packages/docs/src/pages/en/features/treeshaking.md          | 2 ++
 11 files changed, 22 insertions(+)

diff --git a/packages/docs/src/pages/en/features/accessibility.md b/packages/docs/src/pages/en/features/accessibility.md
index 662c7a01c3b..c16ffa843ac 100644
--- a/packages/docs/src/pages/en/features/accessibility.md
+++ b/packages/docs/src/pages/en/features/accessibility.md
@@ -7,6 +7,8 @@ related:
   - /features/internationalization/
   - /components/menus/
   - /components/lists/
+features:
+  report: true
 ---
 
 # Accessibility (a11y)
diff --git a/packages/docs/src/pages/en/features/aliasing.md b/packages/docs/src/pages/en/features/aliasing.md
index 01cf5abf6ba..f072e212c71 100644
--- a/packages/docs/src/pages/en/features/aliasing.md
+++ b/packages/docs/src/pages/en/features/aliasing.md
@@ -7,6 +7,8 @@ related:
 - /features/blueprints/
 - /features/global-configuration/
 - /features/treeshaking/
+features:
+  report: true
 ---
 
 # Aliasing & virtual components
diff --git a/packages/docs/src/pages/en/features/application-layout.md b/packages/docs/src/pages/en/features/application-layout.md
index 4bf81021444..0cd6236b3dd 100644
--- a/packages/docs/src/pages/en/features/application-layout.md
+++ b/packages/docs/src/pages/en/features/application-layout.md
@@ -7,6 +7,8 @@ related:
   - /components/app-bars/
   - /components/navigation-drawers/
   - /components/footers/
+features:
+  report: true
 ---
 
 # Application layout
diff --git a/packages/docs/src/pages/en/features/blueprints.md b/packages/docs/src/pages/en/features/blueprints.md
index e4049ac95c5..b21f855a845 100644
--- a/packages/docs/src/pages/en/features/blueprints.md
+++ b/packages/docs/src/pages/en/features/blueprints.md
@@ -7,6 +7,8 @@ related:
   - /features/global-configuration/
   - /features/theme/
   - /features/display-and-platform/
+features:
+  report: true
 ---
 
 # Blueprints
diff --git a/packages/docs/src/pages/en/features/display-and-platform.md b/packages/docs/src/pages/en/features/display-and-platform.md
index f66e895086a..ac247142438 100644
--- a/packages/docs/src/pages/en/features/display-and-platform.md
+++ b/packages/docs/src/pages/en/features/display-and-platform.md
@@ -7,6 +7,8 @@ related:
   - /directives/resize/
   - /styles/display/
   - /styles/text-and-typography/
+features:
+  report: true
 ---
 
 # Display & Platform
diff --git a/packages/docs/src/pages/en/features/global-configuration.md b/packages/docs/src/pages/en/features/global-configuration.md
index b286dca6c8f..2a8c3c4b8f1 100644
--- a/packages/docs/src/pages/en/features/global-configuration.md
+++ b/packages/docs/src/pages/en/features/global-configuration.md
@@ -7,6 +7,8 @@ related:
   - /features/accessibility/
   - /features/treeshaking/
   - /features/blueprints/
+features:
+  report: true
 ---
 
 # Global configuration
diff --git a/packages/docs/src/pages/en/features/icon-fonts.md b/packages/docs/src/pages/en/features/icon-fonts.md
index 8824912cfbb..c1cf2fd6f9c 100644
--- a/packages/docs/src/pages/en/features/icon-fonts.md
+++ b/packages/docs/src/pages/en/features/icon-fonts.md
@@ -7,6 +7,8 @@ related:
   - /components/icons
   - /components/buttons
   - /components/avatars
+features:
+  report: true
 ---
 
 # Icon Fonts
diff --git a/packages/docs/src/pages/en/features/internationalization.md b/packages/docs/src/pages/en/features/internationalization.md
index 57b753d8b8c..37e4ff24105 100644
--- a/packages/docs/src/pages/en/features/internationalization.md
+++ b/packages/docs/src/pages/en/features/internationalization.md
@@ -7,6 +7,8 @@ related:
   - /features/accessibility/
   - /components/locale-providers/
   - /getting-started/browser-support/
+features:
+  report: true
 ---
 
 # Internationalization (i18n)
diff --git a/packages/docs/src/pages/en/features/sass-variables.md b/packages/docs/src/pages/en/features/sass-variables.md
index 0a6e7617536..bc68b50c121 100644
--- a/packages/docs/src/pages/en/features/sass-variables.md
+++ b/packages/docs/src/pages/en/features/sass-variables.md
@@ -7,6 +7,8 @@ related:
   - /styles/colors/
   - /features/theme/
   - /features/treeshaking/
+features:
+  report: true
 ---
 
 # SASS variables
diff --git a/packages/docs/src/pages/en/features/theme.md b/packages/docs/src/pages/en/features/theme.md
index 145916b3c78..fd24610f66f 100644
--- a/packages/docs/src/pages/en/features/theme.md
+++ b/packages/docs/src/pages/en/features/theme.md
@@ -7,6 +7,8 @@ related:
   - /styles/colors/
   - /styles/transitions/
   - /getting-started/wireframes/
+features:
+  report: true
 ---
 
 # Theme configuration
diff --git a/packages/docs/src/pages/en/features/treeshaking.md b/packages/docs/src/pages/en/features/treeshaking.md
index 77a6e18e9f7..85d722053d1 100644
--- a/packages/docs/src/pages/en/features/treeshaking.md
+++ b/packages/docs/src/pages/en/features/treeshaking.md
@@ -7,6 +7,8 @@ related:
   - /features/sass-variables/
   - /features/blueprints/
   - /introduction/why-vuetify/
+features:
+  report: true
 ---
 
 # Treeshaking

From 99279d97711f4953c7d266247f8ff0415fd601a2 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 30 May 2024 11:19:46 -0500
Subject: [PATCH 104/122] fix(VEmptyState): support VBtn variants when using
 actions slot

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

diff --git a/packages/vuetify/src/components/VEmptyState/VEmptyState.tsx b/packages/vuetify/src/components/VEmptyState/VEmptyState.tsx
index 143be878527..848442e62d3 100644
--- a/packages/vuetify/src/components/VEmptyState/VEmptyState.tsx
+++ b/packages/vuetify/src/components/VEmptyState/VEmptyState.tsx
@@ -184,7 +184,7 @@ export const VEmptyState = genericComponent<VEmptyStateSlots>()({
                 defaults={{
                   VBtn: {
                     class: 'v-empty-state__action-btn',
-                    color: props.color,
+                    color: props.color ?? 'surface-variant',
                     text: props.actionText,
                   },
                 }}
diff --git a/packages/vuetify/src/components/VEmptyState/_variables.scss b/packages/vuetify/src/components/VEmptyState/_variables.scss
index 3023c2444cc..30e3778a717 100644
--- a/packages/vuetify/src/components/VEmptyState/_variables.scss
+++ b/packages/vuetify/src/components/VEmptyState/_variables.scss
@@ -1,8 +1,8 @@
 @use '../../styles/settings';
 @use "../../styles/tools/functions";
 
-$empty-state-actions-btn-background-color: rgb(var(--v-theme-surface-variant)) !default;
-$empty-state-actions-btn-color: rgb(var(--v-theme-on-surface-variant)) !default;
+$empty-state-actions-btn-background-color: initial !default;
+$empty-state-actions-btn-color: initial !default;
 $empty-state-actions-gap: 8px !default;
 $empty-state-actions-padding: 16px !default;
 $empty-state-content-padding: 24px 0 !default;

From 9e2d22f3f76515809ab47c147b689efc7cb09bf0 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 30 May 2024 12:49:49 -0500
Subject: [PATCH 105/122] fix(VBanner): set index when using sticky prop

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

diff --git a/packages/vuetify/src/components/VBanner/VBanner.sass b/packages/vuetify/src/components/VBanner/VBanner.sass
index 75c10eb83fa..aecc5b638b3 100644
--- a/packages/vuetify/src/components/VBanner/VBanner.sass
+++ b/packages/vuetify/src/components/VBanner/VBanner.sass
@@ -66,6 +66,7 @@
 
     &--sticky
       top: $banner-sticky-top
+      z-index: $banner-sticky-z-index
 
   .v-banner__content
     align-items: center
diff --git a/packages/vuetify/src/components/VBanner/_variables.scss b/packages/vuetify/src/components/VBanner/_variables.scss
index 92daba0b96d..8aba976f685 100644
--- a/packages/vuetify/src/components/VBanner/_variables.scss
+++ b/packages/vuetify/src/components/VBanner/_variables.scss
@@ -24,6 +24,7 @@ $banner-prepend-margin-end: 24px !default;
 $banner-rounded-border-radius: settings.$border-radius-root !default;
 $banner-stacked-padding-inline-end: 36px !default;
 $banner-sticky-top: 0 !default;
+$banner-sticky-z-index: 1 !default;
 $banner-text-padding-end: 90px !default;
 $banner-width: 100% !default;
 

From 3c04145a52a1e93e677be6172164ec50cf210d88 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 1 Jun 2024 11:16:10 -0500
Subject: [PATCH 106/122] docs(enterprise-support): update support options

---
 packages/docs/components.d.ts                 |   2 +
 .../src/components/app/bar/EnterpriseLink.vue |   2 +-
 .../components/introduction/DiscordDeck.vue   |  51 +------
 .../src/components/introduction/SlaDeck.vue   | 143 ++++++++++++++++++
 packages/docs/src/layouts/default.vue         |   2 +-
 .../en/introduction/enterprise-support.md     |   4 +-
 .../docs/src/plugins/global-components.ts     |   2 +
 7 files changed, 152 insertions(+), 54 deletions(-)
 create mode 100644 packages/docs/src/components/introduction/SlaDeck.vue

diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts
index f34eac93cda..0a814fa77f1 100644
--- a/packages/docs/components.d.ts
+++ b/packages/docs/components.d.ts
@@ -129,8 +129,10 @@ declare module 'vue' {
     IntroductionComparison: typeof import('./src/components/introduction/Comparison.vue')['default']
     IntroductionDirectSupport: typeof import('./src/components/introduction/DirectSupport.vue')['default']
     IntroductionDiscordDeck: typeof import('./src/components/introduction/DiscordDeck.vue')['default']
+    'IntroductionDiscordDeck.1': typeof import('./src/components/introduction/DiscordDeck.1.vue')['default']
     IntroductionEnterpriseDeck: typeof import('./src/components/introduction/EnterpriseDeck.vue')['default']
     IntroductionEnterpriseForm: typeof import('./src/components/introduction/EnterpriseForm.vue')['default']
+    IntroductionSlaDeck: typeof import('./src/components/introduction/SlaDeck.vue')['default']
     PageFeatures: typeof import('./src/components/PageFeatures.vue')['default']
     PromotedBase: typeof import('./src/components/promoted/Base.vue')['default']
     PromotedCarbon: typeof import('./src/components/promoted/Carbon.vue')['default']
diff --git a/packages/docs/src/components/app/bar/EnterpriseLink.vue b/packages/docs/src/components/app/bar/EnterpriseLink.vue
index 3ef7f5b43dd..31c5ca9569b 100644
--- a/packages/docs/src/components/app/bar/EnterpriseLink.vue
+++ b/packages/docs/src/components/app/bar/EnterpriseLink.vue
@@ -3,7 +3,7 @@
     :to="rpath('/introduction/enterprise-support/')"
     class="ms-1"
     color="primary"
-    text="enterprise"
+    text="support"
     variant="outlined"
     @click="gtagClick('app-bar', 'enterprise', name)"
   />
diff --git a/packages/docs/src/components/introduction/DiscordDeck.vue b/packages/docs/src/components/introduction/DiscordDeck.vue
index bc877a1fc9a..d6b60b5e5ed 100644
--- a/packages/docs/src/components/introduction/DiscordDeck.vue
+++ b/packages/docs/src/components/introduction/DiscordDeck.vue
@@ -33,7 +33,7 @@
                 :text="tierText(tier)"
                 :variant="i === 1 ? 'flat' : 'outlined'"
                 class="mb-6 text-none"
-                color="primary"
+                color="#6458f2"
                 rel="noopener"
                 target="_blank"
                 block
@@ -76,25 +76,6 @@
   const { mdAndUp } = useDisplay()
 
   const tiers = [
-    {
-      name: 'Grass Tier',
-      price: 'Free',
-      href: 'https://community.vuetifyjs.com/',
-      src: 'https://cdn.vuetifyjs.com/docs/images/discord/tiers/grass.png',
-      text: 'Ask questions in our public Discord help channels.',
-      benefits: [
-        {
-          name: '#vuetify-3-help',
-          text: 'Ask questions and get help for Vuetify 3 from the community in this public channel.',
-          emoji: '3️⃣',
-        },
-        {
-          name: '#vuetify-2-help',
-          text: 'Ask questions and get help for Vuetify 2 from the community in this public channel.',
-          emoji: '2️⃣',
-        },
-      ],
-    },
     {
       name: 'Wood Tier',
       price: '$2.99',
@@ -152,36 +133,6 @@
           text: 'Get a private help channel where you can ask questions to the Core Team.',
           emoji: '🔨',
         },
-        {
-          name: 'Priority GitHub Issues',
-          text: 'Get priority on your GitHub reported issues.',
-          emoji: '🚨',
-        },
-      ],
-    },
-    {
-      name: 'Galaxy Tier',
-      contact: true,
-      price: '$199.99',
-      suffix: '/mo',
-      href: 'mailto:support@vuetifyjs.com?subject=Galaxy%20Tier%20Support%20Request',
-      src: 'https://cdn.vuetifyjs.com/docs/images/discord/tiers/galaxy.png',
-      text: 'Get support for up to 3 developers with a private help channel.',
-      benefits: [
-        {
-          text: 'Every channel in Planetary Tier plus:',
-          emoji: '💫',
-        },
-        {
-          name: 'Extra Developers',
-          text: 'Get a private help channel where up to 3 developers can ask questions directly to the Core Team.',
-          emoji: '🛠️',
-        },
-        {
-          name: 'Direct Support Discounts',
-          text: '50% discount on all Direct Support services.',
-          emoji: '🏷️',
-        },
       ],
     },
   ]
diff --git a/packages/docs/src/components/introduction/SlaDeck.vue b/packages/docs/src/components/introduction/SlaDeck.vue
new file mode 100644
index 00000000000..7a29e8ac2f0
--- /dev/null
+++ b/packages/docs/src/components/introduction/SlaDeck.vue
@@ -0,0 +1,143 @@
+<template>
+  <v-sheet
+    border="s e b"
+    class="overflow-hidden"
+    max-width="900"
+    rounded
+  >
+    <v-divider
+      class="border-opacity-100"
+      color="primary"
+      thickness="4"
+    />
+
+    <v-container class="py-9 px-5" fluid>
+      <v-row justify="space-around" dense>
+        <template v-for="(tier, i) in tiers" :key="i">
+          <v-col
+            :class="i === 1 && 'bg-primary'"
+            class="position-relative pa-4 rounded-lg"
+            cols="12"
+            md="4"
+          >
+            <v-responsive :min-height="mdAndUp ? 96 : undefined" class="mb-4">
+              <h3 class="d-flex align-center text-h6 font-weight-medium mb-4">
+                <v-avatar :image="tier.src" class="me-3" />
+
+                <div>
+                  {{ tier.name }}
+
+                  <div class="text-h5 font-weight-bold">
+                    {{ tier.price }}<span v-if="tier.suffix" class="font-weight-medium opacity-60 text-body-2">{{ tier.suffix }}</span>
+                  </div>
+                </div>
+              </h3>
+
+              <v-btn
+                :color="i === 1 ? 'surface' : 'primary'"
+                :href="tier.href"
+                :text="tierText(tier)"
+                :variant="i === 1 ? 'flat' : 'outlined'"
+                class="mb-6 text-none"
+                rel="noopener"
+                target="_blank"
+                block
+              />
+
+              <div class="text-caption">{{ tier.text }}</div>
+            </v-responsive>
+
+            <v-divider class="mb-4" />
+
+            <ul class="text-caption ps-1" style="list-style-type: none;">
+              <li v-for="(benefit, k) in tier.benefits" :key="k" class="mb-2 d-flex">
+                <div class="me-2">{{ benefit.emoji }}</div>
+
+                <div>
+                  <strong>{{ benefit.name }}</strong>
+
+                  <div class="opacity-60">
+                    {{ benefit.text }}
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </v-col>
+        </template>
+      </v-row>
+    </v-container>
+  </v-sheet>
+</template>
+
+<script setup>
+  const { mdAndUp } = useDisplay()
+
+  const tiers = [
+    {
+      name: 'Galaxy Tier',
+      price: '$250',
+      suffix: '/mo',
+      href: 'https://buy.stripe.com/cN2fZOfIE7xc4iA288',
+      src: 'https://cdn.vuetifyjs.com/docs/images/avatars/galaxy.png',
+      text: '🥉 For 2 developers',
+      benefits: [
+        {
+          name: 'Chat support',
+          text: 'Get a private Discord channel where your developers can ask questions directly to the Core Team.',
+          emoji: '💬',
+        },
+        {
+          name: 'Same day response',
+          text: 'Questions are answered within 24 hours, Monday through Friday.',
+          emoji: '🕒',
+        },
+      ],
+    },
+    {
+      name: 'Cosmic Tier',
+      price: '$500',
+      suffix: '/mo',
+      href: 'https://buy.stripe.com/7sIfZO0NK3gW3ewfYZ',
+      src: 'https://cdn.vuetifyjs.com/docs/images/avatars/cosmic.png',
+      text: '🥈 For up to 5 developers',
+      benefits: [
+        {
+          name: 'Everything in Galaxy Tier, plus:',
+          emoji: '💫',
+        },
+        {
+          name: 'Priority bug fixes',
+          text: 'Get priority on reported or identified Vuetify GitHub issues.',
+          emoji: '🎯',
+        },
+      ],
+    },
+    {
+      name: 'Multiverse Tier',
+      price: '$1,000',
+      suffix: '/mo',
+      href: 'https://buy.stripe.com/8wMeVKeEA04K8yQeUW',
+      src: 'https://cdn.vuetifyjs.com/docs/images/avatars/multiverse.png',
+      text: '🥇 For up to 15 developers',
+      benefits: [
+        {
+          name: 'Everything in Cosmic Tier, plus:',
+          emoji: '💫',
+        },
+        {
+          name: 'Monthly strategy session',
+          text: 'A monthly strategy session to discuss your project and how to best utilize Vuetify.',
+          emoji: '📅',
+        },
+      ],
+    },
+  ]
+
+  function tierText (tier) {
+    if (tier.trial) return 'Start free trial'
+    if (tier.price === 'Free') return 'Join Community'
+    if (tier.contact) return 'Contact Us'
+
+    return 'Subscribe'
+  }
+</script>
diff --git a/packages/docs/src/layouts/default.vue b/packages/docs/src/layouts/default.vue
index 50f5540a07c..20cd94f2ae7 100644
--- a/packages/docs/src/layouts/default.vue
+++ b/packages/docs/src/layouts/default.vue
@@ -8,7 +8,7 @@
 
     <AppDrawerDrawer />
 
-    <AppToc />
+    <AppToc v-if="!route.meta.fluid" />
 
     <AppBackToTop />
 
diff --git a/packages/docs/src/pages/en/introduction/enterprise-support.md b/packages/docs/src/pages/en/introduction/enterprise-support.md
index cdfa25e1f6e..21f29a78faa 100644
--- a/packages/docs/src/pages/en/introduction/enterprise-support.md
+++ b/packages/docs/src/pages/en/introduction/enterprise-support.md
@@ -21,11 +21,11 @@ Let the experts at Vuetify help you get the most out of your application with a
 
 Vuetify offers a variety of support options to meet any need.
 
-<IntroductionEnterpriseDeck />
+<IntroductionSlaDeck />
 
 <br>
 
-## Chat support
+## Single developer support
 
 Get direct access to the Vuetify team through our private [Discord server](https://community.vuetifyjs.com/). Ask questions, get help, and chat with the team.
 
diff --git a/packages/docs/src/plugins/global-components.ts b/packages/docs/src/plugins/global-components.ts
index 0f40caa98f4..f984e7ce05d 100644
--- a/packages/docs/src/plugins/global-components.ts
+++ b/packages/docs/src/plugins/global-components.ts
@@ -35,6 +35,7 @@ import HomeEntry from '@/components/home/Entry.vue'
 import HomeFeatures from '@/components/home/Features.vue'
 import HomeSpecialSponsor from '@/components/home/SpecialSponsor.vue'
 import HomeSponsors from '@/components/home/Sponsors.vue'
+import IntroductionSlaDeck from '@/components/introduction/SlaDeck.vue'
 import IntroductionDiscordDeck from '@/components/introduction/DiscordDeck.vue'
 import IntroductionEnterpriseDeck from '@/components/introduction/EnterpriseDeck.vue'
 import PageFeatures from '@/components/PageFeatures.vue'
@@ -87,6 +88,7 @@ export function installGlobalComponents (app: App) {
     .component('HomeFeatures', HomeFeatures)
     .component('HomeSpecialSponsor', HomeSpecialSponsor)
     .component('HomeSponsors', HomeSponsors)
+    .component('IntroductionSlaDeck', IntroductionSlaDeck)
     .component('IntroductionDiscordDeck', IntroductionDiscordDeck)
     .component('IntroductionEnterpriseDeck', IntroductionEnterpriseDeck)
     .component('PageFeatures', PageFeatures)

From 2368668d49b322a1ac7aa5a9d602676affdef9b2 Mon Sep 17 00:00:00 2001
From: Yuchao Wu <yuchao.sydneyuni@gmail.com>
Date: Sun, 2 Jun 2024 14:19:05 +1000
Subject: [PATCH 107/122] fix(VAutocomplete/VCombobox): disallow
 auto-select-first via pure blur

fixes #19929
---
 .../VAutocomplete/VAutocomplete.tsx           |  15 +--
 .../__tests__/VAutocomplete.spec.cy.tsx       | 111 ++++++++++++++----
 .../src/components/VCombobox/VCombobox.tsx    |  17 +--
 .../VCombobox/__tests__/VCombobox.spec.cy.tsx | 101 ++++++++++++----
 4 files changed, 177 insertions(+), 67 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index b111a890618..59eeccb193d 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -238,7 +238,11 @@ export const VAutocomplete = genericComponent<new <
         menu.value = false
       }
 
-      if (highlightFirst.value && e.key === 'Enter') {
+      if (
+        highlightFirst.value &&
+        ['Enter', 'Tab'].includes(e.key) &&
+        !model.value.some(({ value }) => value === displayItems.value[0].value)
+      ) {
         select(displayItems.value[0])
       }
 
@@ -369,15 +373,8 @@ export const VAutocomplete = genericComponent<new <
         nextTick(() => isSelecting.value = false)
       } else {
         if (!props.multiple && search.value == null) model.value = []
-        else if (
-          highlightFirst.value &&
-          !listHasFocus.value &&
-          !model.value.some(({ value }) => value === displayItems.value[0].value)
-        ) {
-          select(displayItems.value[0])
-        }
         menu.value = false
-        if (props.multiple || hasSelectionSlot.value) search.value = ''
+        if (!model.value.some(({ title }) => title === search.value)) search.value = ''
         selectionIndex.value = -1
       }
     })
diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
index 601258f1082..bfc87cf239f 100644
--- a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
@@ -464,33 +464,92 @@ describe('VAutocomplete', () => {
       .should('not.have.class', 'v-autocomplete--active-menu')
   })
 
-  it('should auto-select-first item when pressing enter', () => {
-    const selectedItems = ref(undefined)
+  describe('auto-select-first', () => {
+    it('should auto-select-first item when pressing enter', () => {
+      const selectedItems = ref(undefined)
 
-    cy
-      .mount(() => (
-        <VAutocomplete
-          v-model={ selectedItems.value }
-          items={['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']}
-          multiple
-          autoSelectFirst
-        />
-      ))
-      .get('.v-autocomplete')
-      .click()
-      .get('.v-list-item')
-      .should('have.length', 6)
-      .get('.v-autocomplete input')
-      .type('Cal')
-      .get('.v-list-item').eq(0)
-      .should('have.class', 'v-list-item--active')
-      .get('.v-autocomplete input')
-      .trigger('keydown', { key: keyValues.enter, waitForAnimations: false })
-      .get('.v-list-item')
-      .should('have.length', 1)
-      .then(_ => {
-        expect(selectedItems.value).to.deep.equal(['California'])
-      })
+      cy
+        .mount(() => (
+          <VAutocomplete
+            v-model={ selectedItems.value }
+            items={['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']}
+            multiple
+            autoSelectFirst
+          />
+        ))
+        .get('.v-autocomplete')
+        .click()
+        .get('.v-list-item')
+        .should('have.length', 6)
+        .get('.v-autocomplete input')
+        .type('Cal')
+        .get('.v-list-item').eq(0)
+        .should('have.class', 'v-list-item--active')
+        .get('.v-autocomplete input')
+        .trigger('keydown', { key: keyValues.enter, waitForAnimations: false })
+        .get('.v-list-item')
+        .should('have.length', 1)
+        .then(_ => {
+          expect(selectedItems.value).to.deep.equal(['California'])
+        })
+    })
+
+    it('should auto-select-first item when pressing tab', () => {
+      const selectedItems = ref([])
+
+      cy
+        .mount(() => (
+          <VAutocomplete
+            v-model={ selectedItems.value }
+            items={['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']}
+            multiple
+            autoSelectFirst
+          />
+        ))
+        .get('.v-autocomplete')
+        .click()
+        .get('.v-list-item')
+        .should('have.length', 6)
+        .get('.v-autocomplete input')
+        .type('Cal')
+        .get('.v-list-item').eq(0)
+        .should('have.class', 'v-list-item--active')
+        .realPress('Tab')
+        .get('.v-list-item')
+        .should('have.length', 0)
+        .then(_ => {
+          expect(selectedItems.value).to.deep.equal(['California'])
+        })
+    })
+
+    it('should not auto-select-first item when blur', () => {
+      const selectedItems = ref(undefined)
+
+      cy
+        .mount(() => (
+          <VAutocomplete
+            v-model={ selectedItems.value }
+            items={['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']}
+            multiple
+            autoSelectFirst
+          />
+        ))
+        .get('.v-autocomplete')
+        .click()
+        .get('.v-list-item')
+        .should('have.length', 6)
+        .get('.v-autocomplete input')
+        .type('Cal')
+        .get('.v-list-item').eq(0)
+        .should('have.class', 'v-list-item--active')
+        .get('.v-autocomplete input')
+        .blur()
+        .get('.v-list-item')
+        .should('have.length', 0)
+        .should(_ => {
+          expect(selectedItems.value).to.deep.equal(undefined)
+        })
+    })
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/18796
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index cff4ae00550..bc1fbe1fe36 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -290,8 +290,12 @@ export const VCombobox = genericComponent<new <
         menu.value = false
       }
 
-      if (['Enter', 'Escape'].includes(e.key)) {
-        if (highlightFirst.value && e.key === 'Enter') {
+      if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
+        if (
+          highlightFirst.value &&
+          ['Enter', 'Tab'].includes(e.key) &&
+          !model.value.some(({ value }) => value === displayItems.value[0].value)
+        ) {
           select(filteredItems.value[0])
         }
 
@@ -412,15 +416,6 @@ export const VCombobox = genericComponent<new <
       selectionIndex.value = -1
       menu.value = false
 
-      if (
-        highlightFirst.value &&
-        !listHasFocus.value &&
-        !model.value.some(({ value }) => value === displayItems.value[0].value)
-      ) {
-        select(displayItems.value[0])
-        return
-      }
-
       if (search.value) {
         if (props.multiple) {
           select(transformItem(props, search.value))
diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
index d8dc1c89515..616753caf0c 100644
--- a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
+++ b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
@@ -593,27 +593,86 @@ describe('VCombobox', () => {
       .should('not.have.class', 'v-combobox--active-menu')
   })
 
-  it('should auto-select-first item when pressing enter', () => {
-    cy
-      .mount(() => (
-        <VCombobox
-          items={['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']}
-          multiple
-          autoSelectFirst
-        />
-      ))
-      .get('.v-combobox')
-      .click()
-      .get('.v-list-item')
-      .should('have.length', 6)
-      .get('.v-combobox input')
-      .type('Cal')
-      .get('.v-list-item').eq(0)
-      .should('have.class', 'v-list-item--active')
-      .get('.v-combobox input')
-      .trigger('keydown', { key: keyValues.enter, waitForAnimations: false })
-      .get('.v-list-item')
-      .should('have.length', 6)
+  describe('auto-select-first', () => {
+    it('should auto-select-first item when pressing enter', () => {
+      cy
+        .mount(() => (
+          <VCombobox
+            items={['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']}
+            multiple
+            autoSelectFirst
+          />
+        ))
+        .get('.v-combobox')
+        .click()
+        .get('.v-list-item')
+        .should('have.length', 6)
+        .get('.v-combobox input')
+        .type('Cal')
+        .get('.v-list-item').eq(0)
+        .should('have.class', 'v-list-item--active')
+        .get('.v-combobox input')
+        .trigger('keydown', { key: keyValues.enter, waitForAnimations: false })
+        .get('.v-list-item')
+        .should('have.length', 6)
+    })
+
+    it('should auto-select-first item when pressing tab', () => {
+      const selectedItems = ref([])
+
+      cy
+        .mount(() => (
+          <VCombobox
+            v-model={ selectedItems.value }
+            items={['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']}
+            multiple
+            autoSelectFirst
+          />
+        ))
+        .get('.v-combobox')
+        .click()
+        .get('.v-list-item')
+        .should('have.length', 6)
+        .get('.v-combobox input')
+        .type('Cal')
+        .get('.v-list-item').eq(0)
+        .should('have.class', 'v-list-item--active')
+        .realPress('Tab')
+        .get('.v-list-item')
+        .should('have.length', 0)
+        .then(_ => {
+          expect(selectedItems.value).to.deep.equal(['California'])
+        })
+    })
+
+    it('should not auto-select-first item when blur', () => {
+      const selectedItems = ref(undefined)
+
+      cy
+        .mount(() => (
+          <VCombobox
+            v-model={ selectedItems.value }
+            items={['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']}
+            multiple
+            autoSelectFirst
+          />
+        ))
+        .get('.v-combobox')
+        .click()
+        .get('.v-list-item')
+        .should('have.length', 6)
+        .get('.v-combobox input')
+        .type('Cal')
+        .get('.v-list-item').eq(0)
+        .should('have.class', 'v-list-item--active')
+        .get('.v-combobox input')
+        .blur()
+        .get('.v-list-item')
+        .should('have.length', 0)
+        .should(_ => {
+          expect(selectedItems.value).to.deep.equal(['Cal'])
+        })
+    })
   })
 
   it(`doesn't add duplicate values`, () => {

From 8511c37984fdc3f63d3cc9fd0854a8fbcf34e9f5 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 6 Jun 2024 12:17:57 -0500
Subject: [PATCH 108/122] docs(AppExample): only render top border when
 showCode && !preview

---
 packages/docs/src/components/examples/Example.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/components/examples/Example.vue b/packages/docs/src/components/examples/Example.vue
index ff0ae47ffe9..2ab3a46f469 100644
--- a/packages/docs/src/components/examples/Example.vue
+++ b/packages/docs/src/components/examples/Example.vue
@@ -70,7 +70,7 @@
       </v-lazy>
 
       <div class="d-flex flex-column">
-        <v-expand-transition v-if="hasRendered">
+        <v-expand-transition v-if="hasRendered || preview">
           <v-window v-show="showCode" v-model="template">
             <v-window-item
               v-for="(section, i) of sections"
@@ -88,7 +88,7 @@
         </v-expand-transition>
 
         <v-theme-provider
-          :class="showCode && 'border-t'"
+          :class="showCode && !preview && 'border-t'"
           :theme="theme"
           class="pa-2 rounded-b"
           with-background

From e74fb6a58e2e4baab02e7819f7ce4962a8169a45 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 6 Jun 2024 12:35:53 -0500
Subject: [PATCH 109/122] docs(application): add back missing page

---
 .../docs/src/components/examples/Example.vue  |  41 +++----
 packages/docs/src/data/301.json               |   1 -
 packages/docs/src/data/nav.json               |   1 +
 .../examples/application/app-bar-drawer.vue   |  19 ++++
 .../examples/application/drawer-app-bar.vue   |  19 ++++
 .../docs/src/examples/application/theme.vue   |  34 +++---
 .../src/pages/en/components/application.md    | 107 ++++--------------
 7 files changed, 100 insertions(+), 122 deletions(-)
 create mode 100644 packages/docs/src/examples/application/app-bar-drawer.vue
 create mode 100644 packages/docs/src/examples/application/drawer-app-bar.vue

diff --git a/packages/docs/src/components/examples/Example.vue b/packages/docs/src/components/examples/Example.vue
index 2ab3a46f469..18723796c94 100644
--- a/packages/docs/src/components/examples/Example.vue
+++ b/packages/docs/src/components/examples/Example.vue
@@ -7,7 +7,6 @@
   >
     <AppSheet class="mb-9">
       <v-lazy
-        v-if="!preview"
         v-model="hasRendered"
         min-height="44"
       >
@@ -46,26 +45,28 @@
 
           <v-spacer />
 
-          <v-tooltip
-            v-for="({ path, ...action }, i) of actions"
-            :key="i"
-            location="top"
-          >
-            <template #activator="{ props: tooltip }">
-              <v-fade-transition hide-on-leave>
-                <v-btn
-                  v-show="!action.hide"
-                  :key="action.icon"
-                  class="me-2 text-medium-emphasis"
-                  density="comfortable"
-                  variant="text"
-                  v-bind="mergeProps(action as any, tooltip)"
-                />
-              </v-fade-transition>
-            </template>
+          <template v-if="!preview">
+            <v-tooltip
+              v-for="({ path, ...action }, i) of actions"
+              :key="i"
+              location="top"
+            >
+              <template #activator="{ props: tooltip }">
+                <v-fade-transition hide-on-leave>
+                  <v-btn
+                    v-show="!action.hide"
+                    :key="action.icon"
+                    class="me-2 text-medium-emphasis"
+                    density="comfortable"
+                    variant="text"
+                    v-bind="mergeProps(action as any, tooltip)"
+                  />
+                </v-fade-transition>
+              </template>
 
-            <span>{{ t(path) }}</span>
-          </v-tooltip>
+              <span>{{ t(path) }}</span>
+            </v-tooltip>
+          </template>
         </v-toolbar>
       </v-lazy>
 
diff --git a/packages/docs/src/data/301.json b/packages/docs/src/data/301.json
index 0e5eb9338c4..d87996b6863 100644
--- a/packages/docs/src/data/301.json
+++ b/packages/docs/src/data/301.json
@@ -114,7 +114,6 @@
   "customization/sass-variables": "/features/sass-variables",
   "customization/theme": "/features/theme",
   "about/sponsors-and-backers": "/introduction/sponsors-and-backers",
-  "components/application": "/features/application-layout",
   "components/simple-tables": "/components/tables",
   "components/data-tables": "/components/data-tables/basics",
   "components/date-pickers-month": "/introduction/roadmap",
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index fa98c50da22..9d0a526bde2 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -88,6 +88,7 @@
         "routePath": "explorer",
         "subtitle": "browse-components"
       },
+      "application",
       { "divider": true },
       { "subheader": "containment" },
       "bottom-sheets",
diff --git a/packages/docs/src/examples/application/app-bar-drawer.vue b/packages/docs/src/examples/application/app-bar-drawer.vue
new file mode 100644
index 00000000000..16d07d8482e
--- /dev/null
+++ b/packages/docs/src/examples/application/app-bar-drawer.vue
@@ -0,0 +1,19 @@
+<template>
+  <v-responsive class="border rounded" max-height="300">
+    <v-app>
+      <v-app-bar title="App bar"></v-app-bar>
+
+      <v-navigation-drawer>
+        <v-list>
+          <v-list-item title="Navigation drawer"></v-list-item>
+        </v-list>
+      </v-navigation-drawer>
+
+      <v-main>
+        <v-container>
+          <h1>Main Content</h1>
+        </v-container>
+      </v-main>
+    </v-app>
+  </v-responsive>
+</template>
diff --git a/packages/docs/src/examples/application/drawer-app-bar.vue b/packages/docs/src/examples/application/drawer-app-bar.vue
new file mode 100644
index 00000000000..5cd4b7f20be
--- /dev/null
+++ b/packages/docs/src/examples/application/drawer-app-bar.vue
@@ -0,0 +1,19 @@
+<template>
+  <v-responsive class="border rounded" max-height="300">
+    <v-app>
+      <v-navigation-drawer>
+        <v-list>
+          <v-list-item title="Navigation drawer"></v-list-item>
+        </v-list>
+      </v-navigation-drawer>
+
+      <v-app-bar title="App bar"></v-app-bar>
+
+      <v-main>
+        <v-container>
+          <h1>Main Content</h1>
+        </v-container>
+      </v-main>
+    </v-app>
+  </v-responsive>
+</template>
diff --git a/packages/docs/src/examples/application/theme.vue b/packages/docs/src/examples/application/theme.vue
index ca74fedd374..fbbdba8569f 100644
--- a/packages/docs/src/examples/application/theme.vue
+++ b/packages/docs/src/examples/application/theme.vue
@@ -1,22 +1,24 @@
 <template>
-  <v-app
-    :theme="theme"
-    class="rounded-lg border"
-    style="max-height: 200px;"
-  >
-    <v-app-bar>
-      <v-spacer></v-spacer>
+  <v-responsive class="border rounded" max-height="300">
+    <v-app :theme="theme">
+      <v-app-bar class="px-3">
+        <v-spacer></v-spacer>
 
-      <v-btn
-        :prepend-icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
-        @click="onClick"
-      >Toggle Theme</v-btn>
-    </v-app-bar>
+        <v-btn
+          :prepend-icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
+          text="Toggle Theme"
+          slim
+          @click="onClick"
+        ></v-btn>
+      </v-app-bar>
 
-    <v-main>
-      <v-container class="text-center">Content area</v-container>
-    </v-main>
-  </v-app>
+      <v-main>
+        <v-container>
+          <h1>Main Content</h1>
+        </v-container>
+      </v-main>
+    </v-app>
+  </v-responsive>
 </template>
 
 <script setup>
diff --git a/packages/docs/src/pages/en/components/application.md b/packages/docs/src/pages/en/components/application.md
index 684253a796f..95dd3a1a7c6 100644
--- a/packages/docs/src/pages/en/components/application.md
+++ b/packages/docs/src/pages/en/components/application.md
@@ -1,5 +1,5 @@
 ---
-disabled: true
+emphasized: true
 meta:
   title: Application
   description: Vuetify comes equipped with a default markup that makes it easy to create layouts (boilerplate) for any Vue application.
@@ -8,47 +8,44 @@ related:
   - /features/theme/
   - /components/app-bars/
   - /components/navigation-drawers/
+features:
+  report: true
 ---
 
 # Application
 
 The `v-app` component is an optional feature that serves as the root layout component as well as providing an easy way to control the theme used at the root level.
 
+<PageFeatures />
+
 <PromotedEntry />
 
-In Vuetify, the `v-app` component is a convenient way to dynamically modify your application's current theme and provide an entry point for your layouts. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. When an application is mounted, each layout child registers itself with the closest layout parent and is then automatically placed in your window.
+## API
 
-The order of your layout components will dictate the order in which they are registered, and ultimately placed, within your application. The following example demonstrates how the `v-app-bar` component takes priority over `v-navigation-drawer` because of its rendering order:
+| Component | Description |
+| - | - |
+| [v-app](/api/v-app/) | Primary Component |
+| [v-main](/api/v-main/) | Content area |
 
-``` html
-<template>
-  <v-app>
-    <v-app-bar title="Application"></v-app-bar>
+<ApiInline hide-links />
 
-    <v-navigation-drawer>...</v-navigation-drawer>
+## Guide
 
-    <v-main>...</v-main>
-  </v-app>
-</template>
-```
+In Vuetify, the `v-app` component is a convenient way to dynamically modify your application's current theme and provide an entry point for your layouts. When an application is mounted, each layout child registers itself with the closest layout parent and is then automatically placed in your window.
 
-![Pending graphic](https://cdn.vuetifyjs.com/docs/images/graphics/img-placeholder.png "Rendered Application")
+::: info
+  More information on how to interact with the root sizing and styling is on the [Application](/features/application-layout/) page.
+:::
 
-If we swap `v-app-bar` and `v-navigation-drawer`, the registration order changes and the layout system layers the two components differently.
+When placing your application level components, the order matters. Elements are stacked based on when they register and are rendered in the DOM after the first **nextTick** (to account for suspense). Layouts utilize [suspense](https://vuejs.org/guide/built-ins/suspense) to allow all layout components to register before rendering the initial layout.
 
-``` html
-<template>
-  <v-app>
-    <v-navigation-drawer>...</v-navigation-drawer>
+The following example demonstrates how the `v-app-bar` component takes priority over `v-navigation-drawer` because of its rendering order:
 
-    <v-app-bar title="Application"></v-app-bar>
+<ExamplesExample file="application/app-bar-drawer" open preview  />
 
-    <v-main>...</v-main>
-  </v-app>
-</template>
-```
+If we swap `v-app-bar` and `v-navigation-drawer`, the registration order changes and the layout system layers the two components differently.
 
-![Pending graphic](https://cdn.vuetifyjs.com/docs/images/graphics/img-placeholder.png "Rendered Application")
+<ExamplesExample file="application/drawer-app-bar" open preview  />
 
 ## Theme
 
@@ -56,64 +53,4 @@ The `v-app` component makes it easy to enable one of your application defined th
 
 The following example demonstrates how to use the **theme** prop to toggle the theme from dark to light.
 
-<ExamplesExample file="application/theme" preview />
-
-```html { resource="src/App.vue" }
-<template>
-  <v-app :theme="theme">
-    <v-app-bar>
-      <v-spacer></v-spacer>
-
-      <v-btn
-        :prepend-icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
-        @click="onClick"
-      >Toggle Theme</v-btn>
-    </v-app-bar>
-
-    <v-main>
-      <v-container>Content area</v-container>
-    </v-main>
-  </v-app>
-</template>
-
-<script setup>
-  const theme = ref('light')
-
-  function onClick () {
-    theme.value = theme.value === 'light' ? 'dark' : 'light'
-  }
-</script>
-```
-
-::: tip
-  All components support to override the currently inherited theme locally using the **theme** prop.
-:::
-
-## API
-
-| Component | Description |
-| - | - |
-| [v-app](/api/v-app/) | Primary Component |
-| [v-main](/api/v-main/) | Content area |
-
-<ApiInline hide-links />
-
-### Layout components
-
-The following components are compatible with the [Application layout](/features/application-layout/) system:
-
-| Component | Default location | Default orientation | Description |
-| - | :-: | :-: | - |
-| [v-system-bar](/api/v-system-bar/) | top | horizontal | Used to simulate the system bar on phones and desktop applications |
-| [v-app-bar](/api/v-app-bar/) | top | horizontal | Top level application actions and navigation links |
-| [v-navigation-drawer](/api/v-navigation-drawer/) | start | vertical | The primary component used for application navigation |
-| [v-footer](/api/v-footer/) | bottom | horizontal | The only application component that is not bound to the current layout by default. Must explicitly specify the **app** prop |
-| [v-bottom-navigation](/api/v-bottom-navigation/) | bottom | horizontal | This component is often used as a replacement for application actions and navigation links on mobile and tablet devices |
-
-<br>
-
-<AppFigure src="https://cdn.vuetifyjs.com/images/layouts/app.png" alt="Vuetify Application" />
-
-::: info
-  More information on how to interact with the root sizing and styling is on the [Application](/features/application-layout/) page.
-:::
+<ExamplesExample file="application/theme" open preview />

From df6440dc99d55d8db743be35bc5cc50e1fea88b2 Mon Sep 17 00:00:00 2001
From: babu-ch <42715882+babu-ch@users.noreply.github.com>
Date: Fri, 7 Jun 2024 15:22:53 +0900
Subject: [PATCH 110/122] fix(VNumberInput): attributes fall through to root
 (#19959)

---
 packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
index 431b25997b6..c0acfe3f85f 100644
--- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -56,8 +56,6 @@ const makeVNumberInputProps = propsFactory({
 export const VNumberInput = genericComponent<VNumberInputSlots>()({
   name: 'VNumberInput',
 
-  inheritAttrs: false,
-
   props: {
     ...makeVNumberInputProps(),
   },

From d8e8a0c0452edb46b37a1c567286c158ba866683 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 10 Jun 2024 22:57:05 +1000
Subject: [PATCH 111/122] chore(framework): specify explicit types from
 mergeDeep return

closes #19979
---
 packages/vuetify/src/composables/goto.ts   | 17 +++++++++++------
 packages/vuetify/src/composables/icons.tsx | 14 ++++++++------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/vuetify/src/composables/goto.ts b/packages/vuetify/src/composables/goto.ts
index e675e805f78..cf6ee226662 100644
--- a/packages/vuetify/src/composables/goto.ts
+++ b/packages/vuetify/src/composables/goto.ts
@@ -9,10 +9,10 @@ import type { LocaleInstance, RtlInstance } from './locale'
 
 export interface GoToInstance {
   rtl: Ref<boolean>
-  options: GoToOptions
+  options: InternalGoToOptions
 }
 
-export interface GoToOptions {
+export interface InternalGoToOptions {
   container: ComponentPublicInstance | HTMLElement | string
   duration: number
   layout: boolean
@@ -21,6 +21,8 @@ export interface GoToOptions {
   patterns: Record<string, (t: number) => number>
 }
 
+export type GoToOptions = Partial<InternalGoToOptions>
+
 export const GoToSymbol: InjectionKey<GoToInstance> = Symbol.for('vuetify:goto')
 
 function genDefaults () {
@@ -69,16 +71,19 @@ function getOffset (target: any, horizontal?: boolean, rtl?: boolean): number {
   return totalOffset
 }
 
-export function createGoTo (options: Partial<GoToOptions> | undefined, locale: LocaleInstance & RtlInstance) {
+export function createGoTo (
+  options: GoToOptions| undefined,
+  locale: LocaleInstance & RtlInstance
+): GoToInstance {
   return {
     rtl: locale.isRtl,
-    options: mergeDeep(genDefaults(), options),
+    options: mergeDeep(genDefaults(), options) as InternalGoToOptions,
   }
 }
 
 export async function scrollTo (
   _target: ComponentPublicInstance | HTMLElement | number | string,
-  _options: Partial<GoToOptions>,
+  _options: GoToOptions,
   horizontal?: boolean,
   goTo?: GoToInstance,
 ) {
@@ -140,7 +145,7 @@ export async function scrollTo (
   }))
 }
 
-export function useGoTo (_options: Partial<GoToOptions> = {}) {
+export function useGoTo (_options: GoToOptions = {}) {
   const goToInstance = inject(GoToSymbol)
   const { isRtl } = useRtl()
 
diff --git a/packages/vuetify/src/composables/icons.tsx b/packages/vuetify/src/composables/icons.tsx
index d8cedd17527..76d3b28749b 100644
--- a/packages/vuetify/src/composables/icons.tsx
+++ b/packages/vuetify/src/composables/icons.tsx
@@ -65,18 +65,20 @@ export interface IconSet {
   component: IconComponent
 }
 
-export type IconOptions = {
-  defaultSet?: string
-  aliases?: Partial<IconAliases>
-  sets?: Record<string, IconSet>
+export type InternalIconOptions = {
+  defaultSet: string
+  aliases: Partial<IconAliases>
+  sets: Record<string, IconSet>
 }
 
+export type IconOptions = Partial<InternalIconOptions>
+
 type IconInstance = {
   component: IconComponent
   icon?: IconValue
 }
 
-export const IconSymbol: InjectionKey<Required<IconOptions>> = Symbol.for('vuetify:icons')
+export const IconSymbol: InjectionKey<InternalIconOptions> = Symbol.for('vuetify:icons')
 
 export const makeIconProps = propsFactory({
   icon: {
@@ -204,7 +206,7 @@ export function createIcons (options?: IconOptions) {
       ],
       /* eslint-enable max-len */
     },
-  }, options)
+  }, options) as InternalIconOptions
 }
 
 export const useIcon = (props: Ref<IconValue | undefined>) => {

From 9e1cfbddbfd0ce7043aa096bd7d370beef382c7f Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Wed, 12 Jun 2024 03:31:52 +1000
Subject: [PATCH 112/122] fix(VTreeview): remove redundant treeview re-render
 during open (#19968)

---
 packages/vuetify/src/components/VList/VList.tsx   | 1 +
 packages/vuetify/src/labs/VTreeview/VTreeview.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
index 00e020b2a94..fd1d33d9f38 100644
--- a/packages/vuetify/src/components/VList/VList.tsx
+++ b/packages/vuetify/src/components/VList/VList.tsx
@@ -97,6 +97,7 @@ export const makeVListProps = propsFactory({
 
   'onClick:open': EventProp<[{ id: unknown, value: boolean, path: unknown[] }]>(),
   'onClick:select': EventProp<[{ id: unknown, value: boolean, path: unknown[] }]>(),
+  'onUpdate:opened': EventProp<[]>(),
   ...makeNestedProps({
     selectStrategy: 'single-leaf' as const,
     openStrategy: 'list' as const,
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
index daaa14820f2..7778c69df26 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
@@ -9,9 +9,10 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, provide, ref, toRef, watch } from 'vue'
-import { genericComponent, omit, propsFactory, useRender } from '@/util'
+import { genericComponent, getCurrentInstance, omit, propsFactory, useRender } from '@/util'
 
 // Types
+import type { ExtractPublicPropTypes } from 'vue'
 import { VTreeviewSymbol } from './shared'
 import type { VListChildrenSlots } from '@/components/VList/VListChildren'
 import type { ListItem } from '@/composables/list-items'
@@ -59,6 +60,7 @@ export const VTreeview = genericComponent<new <T>(
   },
 
   setup (props, { slots }) {
+    const vm = getCurrentInstance('VTreeview')
     const { items } = useListItems(props)
     const activeColor = toRef(props, 'activeColor')
     const baseColor = toRef(props, 'baseColor')
@@ -146,7 +148,8 @@ export const VTreeview = genericComponent<new <T>(
     })
 
     useRender(() => {
-      const listProps = VList.filterProps(props)
+      const listProps = VList.filterProps(vm.vnode.props! as ExtractPublicPropTypes<typeof makeVTreeviewProps>)
+
       const treeviewChildrenProps = VTreeviewChildren.filterProps(props)
 
       return (
@@ -158,7 +161,6 @@ export const VTreeview = genericComponent<new <T>(
             props.class,
           ]}
           style={ props.style }
-          v-model:opened={ opened.value }
           v-model:activated={ activated.value }
           v-model:selected={ selected.value }
         >

From 0ba4b7864f4531b5ccac1880ea32c123ff1fbd7c Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Wed, 12 Jun 2024 00:37:36 +0700
Subject: [PATCH 113/122] fix(VTimePicker): properly apply disabled props
 (#19964)

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../vuetify/src/labs/VTimePicker/VTimePickerClock.tsx    | 6 +++++-
 .../vuetify/src/labs/VTimePicker/VTimePickerControls.tsx | 9 +++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
index 5b05d53e6c3..4b1d6e653c0 100644
--- a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
@@ -102,6 +102,8 @@ export const VTimePickerClock = genericComponent()({
     }
 
     function wheel (e: WheelEvent) {
+      if (!props.scrollable || props.disabled) return
+
       e.preventDefault()
 
       const delta = Math.sign(-e.deltaY || 1)
@@ -196,6 +198,8 @@ export const VTimePickerClock = genericComponent()({
     }
 
     function onMouseDown (e: MouseEvent | TouchEvent) {
+      if (props.disabled) return
+
       e.preventDefault()
 
       window.addEventListener('mousemove', onDragMove)
@@ -233,7 +237,7 @@ export const VTimePickerClock = genericComponent()({
           ]}
           onMousedown={ onMouseDown }
           onTouchstart={ onMouseDown }
-          onWheel={ (e: WheelEvent) => (props.scrollable && wheel(e)) }
+          onWheel={ wheel }
           ref={ clockRef }
         >
           <div class="v-time-picker-clock__inner" ref={ innerClockRef }>
diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx
index 9e25f7557b0..6d862e0a4ec 100644
--- a/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx
@@ -59,6 +59,7 @@ export const VTimePickerControls = genericComponent()({
             <VBtn
               active={ props.selecting === 1 }
               color={ props.selecting === 1 ? props.color : undefined }
+              disabled={ props.disabled }
               variant="tonal"
               class={{
                 'v-time-picker-controls__time__btn': true,
@@ -85,6 +86,7 @@ export const VTimePickerControls = genericComponent()({
                 'v-time-picker-controls__time--with-ampm__btn': props.ampm,
                 'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
               }}
+              disabled={ props.disabled }
               variant="tonal"
               text={ props.minute == null ? '--' : pad(props.minute) }
               onClick={ () => emit('update:selecting', SelectingTimes.Minute) }
@@ -113,6 +115,7 @@ export const VTimePickerControls = genericComponent()({
                     'v-time-picker-controls__time__btn__active': props.selecting === 3,
                     'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
                   }}
+                  disabled={ props.disabled }
                   text={ props.second == null ? '--' : pad(props.second) }
                 />
               )
@@ -133,8 +136,9 @@ export const VTimePickerControls = genericComponent()({
                       'v-time-picker-controls__ampm__btn': true,
                       'v-time-picker-controls__ampm__btn__active': props.period === 'am',
                     }}
+                    disabled={ props.disabled }
                     text={ t('$vuetify.timePicker.am') }
-                    variant="tonal"
+                    variant={ props.disabled && props.period === 'am' ? 'elevated' : 'tonal' }
                     onClick={ () => props.period !== 'am' ? emit('update:period', 'am') : null }
                   />
 
@@ -146,8 +150,9 @@ export const VTimePickerControls = genericComponent()({
                       'v-time-picker-controls__ampm__btn': true,
                       'v-time-picker-controls__ampm__btn__active': props.period === 'pm',
                     }}
+                    disabled={ props.disabled }
                     text={ t('$vuetify.timePicker.pm') }
-                    variant="tonal"
+                    variant={ props.disabled && props.period === 'pm' ? 'elevated' : 'tonal' }
                     onClick={ () => props.period !== 'pm' ? emit('update:period', 'pm') : null }
                   />
                 </div>

From e11d38df02ce0afa64944c197c9baadc12fa6b0b Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Wed, 12 Jun 2024 00:37:57 +0700
Subject: [PATCH 114/122] docs(VTimePicker): fix example using display
 information (#19958)

---
 packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue | 2 +-
 packages/docs/src/examples/v-time-picker/prop-disabled.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue b/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue
index 6c594128398..0cdf903a812 100644
--- a/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue
@@ -10,7 +10,7 @@
     ></v-time-picker>
     <v-time-picker
       v-model="picker"
-      :landscape="$vuetify.breakpoint.smAndUp"
+      :landscape="$vuetify.display.smAndUp"
       ampm-in-title
     ></v-time-picker>
   </v-row>
diff --git a/packages/docs/src/examples/v-time-picker/prop-disabled.vue b/packages/docs/src/examples/v-time-picker/prop-disabled.vue
index fb9a3d930c7..471529f3ba7 100644
--- a/packages/docs/src/examples/v-time-picker/prop-disabled.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-disabled.vue
@@ -9,7 +9,7 @@
     ></v-time-picker>
     <v-time-picker
       v-model="picker"
-      :landscape="$vuetify.breakpoint.smAndUp"
+      :landscape="$vuetify.display.smAndUp"
       disabled
     ></v-time-picker>
   </v-row>

From 07a6fb861318781bedcc145d0533a49d54b8121a Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Wed, 12 Jun 2024 00:40:31 +0700
Subject: [PATCH 115/122] fix(VFab): change type for location prop (#19949)

fixes #19944
---
 packages/vuetify/src/components/VFab/VFab.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/vuetify/src/components/VFab/VFab.tsx b/packages/vuetify/src/components/VFab/VFab.tsx
index 15a7dd8b87e..069034edef0 100644
--- a/packages/vuetify/src/components/VFab/VFab.tsx
+++ b/packages/vuetify/src/components/VFab/VFab.tsx
@@ -6,6 +6,7 @@ import { makeVBtnProps, VBtn } from '@/components/VBtn/VBtn'
 
 // Composables
 import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
+import { makeLocationProps } from '@/composables/location'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { useResizeObserver } from '@/composables/resizeObserver'
 import { useToggleScope } from '@/composables/toggleScope'
@@ -16,20 +17,14 @@ import { computed, ref, shallowRef, toRef, watchEffect } from 'vue'
 import { genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
-import type { ComputedRef, PropType } from 'vue'
+import type { ComputedRef } from 'vue'
 import type { Position } from '@/composables/layout'
 
-const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'] as const
-
 export const makeVFabProps = propsFactory({
   app: Boolean,
   appear: Boolean,
   extended: Boolean,
   layout: Boolean,
-  location: {
-    type: String as PropType<typeof locations[number]>,
-    default: 'bottom end',
-  },
   offset: Boolean,
   modelValue: {
     type: Boolean,
@@ -38,6 +33,7 @@ export const makeVFabProps = propsFactory({
 
   ...omit(makeVBtnProps({ active: true }), ['location']),
   ...makeLayoutItemProps(),
+  ...makeLocationProps(),
   ...makeTransitionProps({ transition: 'fab-transition' }),
 }, 'VFab')
 
@@ -65,13 +61,13 @@ export const VFab = genericComponent()({
     const position = computed(() => {
       if (!hasPosition.value) return false
 
-      return props.location.split(' ').shift()
+      return props.location?.split(' ').shift() ?? 'bottom'
     }) as ComputedRef<Position>
 
     const orientation = computed(() => {
       if (!hasPosition.value) return false
 
-      return props.location.split(' ')[1] ?? 'end'
+      return props.location?.split(' ')[1] ?? 'end'
     })
 
     useToggleScope(() => props.app, () => {

From e6e76d5670c8b6e0a41cd2d1c6db97b12673495f Mon Sep 17 00:00:00 2001
From: Joel Mandell <joelmandell@gmail.com>
Date: Tue, 11 Jun 2024 19:44:28 +0200
Subject: [PATCH 116/122] fix(VOverlay): check for Shadow DOM on mount (#19947)

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

diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
index 75da73ed33b..97e6460a56b 100644
--- a/packages/vuetify/src/components/VOverlay/VOverlay.tsx
+++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -140,7 +140,6 @@ export const VOverlay = genericComponent<OverlaySlots>()({
         if (!(v && props.disabled)) model.value = v
       },
     })
-    const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained))
     const { themeClasses } = provideTheme(props)
     const { rtlClasses, isRtl } = useRtl()
     const { hasContent, onAfterLeave: _onAfterLeave } = useLazy(props, isActive)
@@ -155,6 +154,9 @@ export const VOverlay = genericComponent<OverlaySlots>()({
       contentEvents,
       scrimEvents,
     } = useActivator(props, { isActive, isTop: localTop })
+    const potentialShadowDomRoot = computed(() => (activatorEl?.value as Element)?.getRootNode() as Element)
+    const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained ||
+      potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false))
     const { dimensionStyles } = useDimension(props)
     const isMounted = useHydration()
     const { scopeId } = useScopeId()

From 5b5bf505fdd7ebcc0ad4dee3eae68417f86dedc5 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Tue, 11 Jun 2024 19:48:31 +0200
Subject: [PATCH 117/122] fix(docs): contrast issues for API table on dark
 themes (#19946)

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

diff --git a/packages/docs/src/components/api/ApiTable.vue b/packages/docs/src/components/api/ApiTable.vue
index 06ee575b55f..28149fd2fa8 100644
--- a/packages/docs/src/components/api/ApiTable.vue
+++ b/packages/docs/src/components/api/ApiTable.vue
@@ -22,7 +22,7 @@
             name="row"
             v-bind="{
               props: {
-                class: 'bg-surface-bright'
+                style: 'background: rgba(0,0,0,.1)'
               },
               item,
             }"

From 193301cb2d55ceacc4d2ef2cdbadf62c87675297 Mon Sep 17 00:00:00 2001
From: timmy <126319815+TIM56887@users.noreply.github.com>
Date: Wed, 12 Jun 2024 02:00:18 +0800
Subject: [PATCH 118/122] fix(VMenu): allow enter keypress to work in input
 element (#19922)

fixes #19920

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

diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
index 50fa611bbf6..b21ae402711 100644
--- a/packages/vuetify/src/components/VMenu/VMenu.tsx
+++ b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -127,7 +127,11 @@ export const VMenu = genericComponent<OverlaySlots>()({
       if (props.disabled) return
 
       if (e.key === 'Tab' || (e.key === 'Enter' && !props.closeOnContentClick)) {
-        if (e.key === 'Enter' && e.target instanceof HTMLTextAreaElement) return
+        if (
+          e.key === 'Enter' &&
+          ((e.target instanceof HTMLTextAreaElement) ||
+          (e.target instanceof HTMLInputElement && !!e.target.closest('form')))
+        ) return
         if (e.key === 'Enter') e.preventDefault()
 
         const nextElement = getNextElement(

From 7ccff92e55fbfa27f022d9f61cbdf7d09d924f69 Mon Sep 17 00:00:00 2001
From: Zhaolin Liang <develop0304@outlook.com>
Date: Wed, 12 Jun 2024 03:39:02 +0800
Subject: [PATCH 119/122] fix(VAppBar): inability to scroll to the bottom
 (#19921)

fixes #19090
---
 .../VAppBar/__tests__/VAppBar.spec.cy.tsx     | 22 +++++++++++++++++++
 packages/vuetify/src/composables/scroll.ts    |  7 ++++++
 2 files changed, 29 insertions(+)

diff --git a/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx b/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx
index 6715d7e53b8..a9efd0b63d7 100644
--- a/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx
+++ b/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx
@@ -84,6 +84,28 @@ describe('VAppBar', () => {
         .get('.v-app-bar').should('not.be.visible')
     })
 
+    it('should hide correctly when scroll to the bottom', () => {
+      cy.mount(({ scrollBehavior }: any) => (
+        <VLayout>
+          <VAppBar scrollBehavior={ scrollBehavior } />
+
+          <VMain style="min-height: 300px">
+            {
+              Array.from({ length: 7 }, () => (
+                <div class="pa-16 ma-2 w-50 bg-green text-center">
+                  box
+                </div>
+              ))
+            }
+          </VMain>
+        </VLayout>
+      ))
+        .setProps({ scrollBehavior: 'hide' })
+        .get('.v-app-bar').should('be.visible')
+        .window().scrollTo('bottom')
+        .get('.v-app-bar').should('not.be.visible')
+    })
+
     it('collapses', () => {
       cy.mount(({ scrollBehavior }: any) => (
         <VLayout>
diff --git a/packages/vuetify/src/composables/scroll.ts b/packages/vuetify/src/composables/scroll.ts
index d131e4a1e33..179a3cbe294 100644
--- a/packages/vuetify/src/composables/scroll.ts
+++ b/packages/vuetify/src/composables/scroll.ts
@@ -44,6 +44,7 @@ export function useScroll (
 ) {
   const { canScroll } = args
   let previousScroll = 0
+  let previousScrollHeight = 0
   const target = ref<Element | Window | null>(null)
   const currentScroll = shallowRef(0)
   const savedScroll = shallowRef(0)
@@ -71,6 +72,12 @@ export function useScroll (
     previousScroll = currentScroll.value
     currentScroll.value = ('window' in targetEl) ? targetEl.pageYOffset : targetEl.scrollTop
 
+    const currentScrollHeight = targetEl instanceof Window ? document.documentElement.scrollHeight : targetEl.scrollHeight
+    if (previousScrollHeight !== currentScrollHeight) {
+      previousScrollHeight = currentScrollHeight
+      return
+    }
+
     isScrollingUp.value = currentScroll.value < previousScroll
     currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value)
   }

From a30a85973d0f8f7b59ed30f7a147bbed8e0ba330 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 11 Jun 2024 15:07:46 -0500
Subject: [PATCH 120/122] chore(release): publish v3.6.9

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

diff --git a/lerna.json b/lerna.json
index dcf53c2cec1..56e9498822a 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.6.8",
+  "version": "3.6.9",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index 983f5fb4ff4..ee0d5f5f1d2 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.6.8",
+  "version": "3.6.9",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^22.0.0",
     "tsx": "^4.7.2",
     "vue": "^3.4.27",
-    "vuetify": "^3.6.8"
+    "vuetify": "^3.6.9"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 6bcfa7d6120..b81806c85d6 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.6.8",
+  "version": "3.6.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.11.0",
     "vue-instantsearch": "^4.16.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.6.8"
+    "vuetify": "^3.6.9"
   },
   "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.27",
-    "@vuetify/api-generator": "^3.6.8",
+    "@vuetify/api-generator": "^3.6.9",
     "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 857e3e09835..e8f3533dda8 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.6.8",
+  "version": "3.6.9",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From cec20943af77b1c723c560d7282ebecee865e38b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 12 Jun 2024 13:02:33 -0500
Subject: [PATCH 121/122] fix(VExpansionPanelTitle): propagate VIcon defaults

---
 .../VExpansionPanel/VExpansionPanelTitle.tsx  | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
index 54cc401592c..98df96d9050 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
@@ -1,5 +1,6 @@
 // Components
 import { VExpansionPanelSymbol } from './shared'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 import { VIcon } from '@/components/VIcon'
 
 // Composables
@@ -75,6 +76,8 @@ export const VExpansionPanelTitle = genericComponent<VExpansionPanelTitleSlots>(
       readonly: props.readonly,
     }))
 
+    const icon = computed(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon)
+
     useRender(() => (
       <button
         class={[
@@ -103,12 +106,17 @@ export const VExpansionPanelTitle = genericComponent<VExpansionPanelTitleSlots>(
         { slots.default?.(slotProps.value) }
 
         { !props.hideActions && (
-          <span class="v-expansion-panel-title__icon">
-            {
-              slots.actions ? slots.actions(slotProps.value)
-              : <VIcon icon={ expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon } />
-            }
-          </span>
+          <VDefaultsProvider
+            defaults={{
+              VIcon: {
+                icon: icon.value,
+              },
+            }}
+          >
+            <span class="v-expansion-panel-title__icon">
+              { slots.actions?.(slotProps.value) ?? <VIcon /> }
+            </span>
+          </VDefaultsProvider>
         )}
       </button>
     ))

From 666484ae265194dc1512cb4f84f53ab928f5482b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 12 Jun 2024 13:11:13 -0500
Subject: [PATCH 122/122] fix(VExpansionPanel): propagate defaults provided by
 VExpansionPanels

---
 .../VExpansionPanel/VExpansionPanel.tsx       | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
index 881a6f6c0c4..45c22192410 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
@@ -2,6 +2,7 @@
 import { VExpansionPanelSymbol } from './shared'
 import { makeVExpansionPanelTextProps, VExpansionPanelText } from './VExpansionPanelText'
 import { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from './VExpansionPanelTitle'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 
 // Composables
 import { useBackgroundColor } from '@/composables/color'
@@ -11,7 +12,7 @@ import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 
 // Utilities
-import { computed, provide } from 'vue'
+import { computed, provide, toRef } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 export const makeVExpansionPanelProps = propsFactory({
@@ -101,25 +102,30 @@ export const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({
             ]}
           />
 
-          { hasTitle && (
-            <VExpansionPanelTitle
-              key="title"
-              { ...expansionPanelTitleProps }
-            >
-              { slots.title ? slots.title() : props.title }
-            </VExpansionPanelTitle>
-          )}
-
-          { hasText && (
-            <VExpansionPanelText
-              key="text"
-              { ...expansionPanelTextProps }
-            >
-              { slots.text ? slots.text() : props.text }
-            </VExpansionPanelText>
-          )}
-
-          { slots.default?.() }
+          <VDefaultsProvider
+            defaults={{
+              VExpansionPanelTitle: {
+                ...expansionPanelTitleProps,
+              },
+              VExpansionPanelText: {
+                ...expansionPanelTextProps,
+              },
+            }}
+          >
+            { hasTitle && (
+              <VExpansionPanelTitle key="title">
+                { slots.title ? slots.title() : props.title }
+              </VExpansionPanelTitle>
+            )}
+
+            { hasText && (
+              <VExpansionPanelText key="text">
+                { slots.text ? slots.text() : props.text }
+              </VExpansionPanelText>
+            )}
+
+            { slots.default?.() }
+          </VDefaultsProvider>
         </props.tag>
       )
     })